@layer modules{
  /* ── Réseau social de création - « Le Pouls » (fil) + « Cordée » (liens) ───────── */

  /* Navigation sociale (colonne gauche, sous le profil) */
  .snav{margin-top:var(--sp-14);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column}
  .snav-b{display:flex;align-items:center;gap:var(--sp-10);width:100%;text-align:left;font:inherit;font-size:var(--fs-md);
    font-weight:var(--fw-medium);color:var(--txt);background:transparent;border:0;border-radius:0;padding:var(--sp-10) var(--sp-14);cursor:pointer}
  .snav-b+.snav-b{border-top:1px solid var(--line2)}
  .snav-b:hover{background:var(--line2)}
  .snav-b.on{background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent);
    box-shadow:inset 3px 0 0 var(--accent)}
  .snav-b svg.ic{width:16px;height:16px;color:currentColor}
  .snav-n{margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--mut);background:var(--card2);
    border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-8);font-variant-numeric:tabular-nums}
  .snav-b.on .snav-n{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  /* Libellés compacts (Paramètres › Application › Interface) : la nav d'accueil garde
     toujours libellé + icône - seuls l'en-tête et le sélecteur de vues se réduisent. */

  /* Rangée des stories (cercles) */
  .stories{display:flex;gap:var(--sp-12);overflow-x:auto;padding:var(--sp-4) var(--sp-2) var(--sp-14);max-width:none}
  .story{display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);background:none;border:0;
    padding:0;cursor:pointer;font:inherit;flex:none;width:64px}
  .story-av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--on-solid);
    font-weight:var(--fw-bold);font-size:var(--fs-lg);position:relative;overflow:hidden;
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));
    outline:2.5px solid var(--accent);outline-offset:2.5px}
  .story-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .story.add .story-av{background:var(--card2);color:var(--accent);outline-style:dashed;outline-color:var(--mut2)}
  .story .l{font-size:var(--fs-xs);color:var(--mut);max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Composer (partage : story / publication / reel) */
  .sc{max-width:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--sp-14) var(--sp-14);margin-bottom:var(--sp-18)}
  .sc-top{display:flex;gap:var(--sp-10);align-items:flex-start}
  .sc-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--on-solid);flex:none;
    font-weight:var(--fw-bold);font-size:var(--fs-base);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent))}
  .sc textarea{flex:1;font:inherit;font-size:var(--fs-md);color:var(--txt);background:var(--bg2);
    border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-8) var(--sp-12);resize:vertical;min-height:44px}
  .sc textarea:focus{outline:none;border-color:var(--accent)}
  .sc-types{display:flex;gap:var(--sp-6);margin:0;flex-wrap:wrap}
  .sc-type{font-size:var(--fs-sm);font-weight:var(--fw-strong);padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-pill);border:1px solid var(--line);
    background:var(--card2);color:var(--mut);cursor:pointer}
  .sc-type.on{color:var(--on-solid);background:var(--accent);border-color:var(--accent)}
  .sc-kinds{display:flex;gap:var(--sp-6);margin-top:var(--sp-8);flex-wrap:wrap}
  .sc-kind{font-size:var(--fs-xs);padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-pill);border:1px dashed var(--line);
    background:transparent;color:var(--mut);cursor:pointer}
  .sc-kind.on{border-style:solid;border-color:var(--accent);color:var(--accent);
    background:color-mix(in srgb,var(--accent) 8%,var(--card))}
  .sc-row{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-10);flex-wrap:wrap}
  .sc-row .sp{flex:1;min-width:8px}
  .sc-row .sc-types{flex-wrap:nowrap}
  .sc-prev{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin-top:var(--sp-10)}
  .sc-th{position:relative;width:74px;height:74px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
  .sc-th img,.sc-th video{width:100%;height:100%;object-fit:cover;display:block}
  .sc-th .x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;
    background:rgba(0,0,0,.62);color:var(--on-solid);font-size:var(--fs-xs);cursor:pointer;display:grid;place-items:center;padding:0}
  .sc-proj{display:inline-flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-10);border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--sp-6) var(--sp-10);background:var(--card2);font-size:var(--fs-sm)}
  .sc-proj .x{border:0;background:none;color:var(--mut);cursor:pointer;padding:0 var(--sp-2)}

  /* Cartes du fil */
  .feed{display:flex;flex-direction:column;gap:var(--sp-14);max-width:780px}
  .post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-14) var(--sp-14)}
  .post-h{display:flex;align-items:center;gap:var(--sp-10)}
  .post-h .sc-av{width:36px;height:36px;font-size:var(--fs-md)}
  .post-id{flex:1;min-width:0}
  .post-name{font-weight:var(--fw-strong);font-size:var(--fs-md)}
  .post-sub{font-size:var(--fs-xs);color:var(--mut);display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap}
  .post-kind{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-6);
    background:color-mix(in srgb,var(--accent) 8%,var(--card))}
  .post-kind.reel{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));
    background:color-mix(in srgb,var(--warn) 9%,var(--card))}
  .post-x{border:0;background:none;color:var(--mut2);cursor:pointer;padding:var(--sp-4)}
  .post-x:hover{color:var(--err)}
  .post-txt{font-size:var(--fs-md);line-height:1.55;margin-top:var(--sp-8);white-space:pre-line;word-break:break-word}
  .post-media{display:grid;gap:var(--sp-6);margin-top:var(--sp-10);border-radius:var(--radius);overflow:hidden}
  .post-media.m2{grid-template-columns:1fr 1fr}
  .post-media.m3{grid-template-columns:1fr 1fr 1fr}
  .post-media img,.post-media video{width:100%;max-height:420px;object-fit:cover;display:block;background:var(--bg2)}
  .post-proj{display:flex;align-items:center;gap:var(--sp-10);margin-top:var(--sp-10);border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--sp-8) var(--sp-12);background:var(--card2);cursor:pointer;width:100%;text-align:left;font:inherit}
  .post-proj:hover{border-color:var(--accent)}
  .post-proj .n{font-weight:var(--fw-strong);font-size:var(--fs-md)}
  .post-proj .v{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono)}
  .post-acts{display:flex;gap:var(--sp-6);margin-top:var(--sp-10);align-items:center}
  .post-act{font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-pill);border:1px solid var(--line);
    background:transparent;color:var(--mut);cursor:pointer;display:inline-flex;gap:var(--sp-6);align-items:center}
  .post-act:hover{border-color:var(--mut2);color:var(--txt)}
  .post-act.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
    background:color-mix(in srgb,var(--accent) 8%,var(--card))}
  .post-cmts{margin-top:var(--sp-10);border-top:1px solid var(--line2);padding-top:var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-8)}
  .cmt{display:flex;gap:var(--sp-8);font-size:var(--fs-sm)}
  .cmt .sc-av{width:26px;height:26px;font-size:var(--fs-2xs)}
  .cmt-b{background:var(--card2);border:1px solid var(--line2);border-radius:var(--radius);padding:var(--sp-6) var(--sp-10);flex:1;min-width:0}
  .cmt-b b{font-size:var(--fs-sm)}
  .cmt-row{display:flex;gap:var(--sp-8)}
  .cmt-row input{flex:1;font:inherit;font-size:var(--fs-sm);color:var(--txt);background:var(--bg2);
    border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--sp-6) var(--sp-12)}
  .cmt-row input:focus{outline:none;border-color:var(--accent)}

  /* Vue Cordée */
  .rope-add{max-width:780px;display:flex;gap:var(--sp-8);margin-bottom:var(--sp-16);flex-wrap:wrap}
  .rope-add input{flex:1;min-width:150px;font:inherit;font-size:var(--fs-md);color:var(--txt);background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-8) var(--sp-10)}
  .rope-add input:focus{outline:none;border-color:var(--accent)}
  .rope-list{display:flex;flex-direction:column;gap:var(--sp-10);max-width:780px}
  .rope{display:flex;align-items:center;gap:var(--sp-12);background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--sp-12) var(--sp-14)}
  .rope .sc-av{width:40px;height:40px}
  .rope .ri{flex:1;min-width:0}
  .rope .rn{font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .rope .rr{font-size:var(--fs-sm);color:var(--mut)}
  .story-viewer{display:flex;flex-direction:column;gap:var(--sp-10);align-items:center}
  .story-viewer img,.story-viewer video{max-width:100%;max-height:60vh;border-radius:var(--radius)}
  .story-viewer .t{font-size:var(--fs-base);line-height:1.55;white-space:pre-line}

  /* ── Store - vitrine de vente de projets (en préparation) ── */
  .store-notice{max-width:780px;display:flex;gap:var(--sp-12);align-items:flex-start;margin-bottom:var(--sp-18);
    border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--radius);
    background:color-mix(in srgb,var(--accent) 7%,var(--card));padding:var(--sp-14) var(--sp-16)}
  .store-notice-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:var(--radius);
    color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card))}
  .store-notice-ic svg.ic{width:19px;height:19px}
  .store-notice-tx{font-size:var(--fs-md);color:var(--mut);line-height:1.55}
  .store-notice-tx b{color:var(--txt);display:block;margin-bottom:var(--sp-2)}
  .store-notice-tx code{font-size:var(--fs-sm)}
  .store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-14);max-width:780px}
  .store-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--sp-14);display:flex;flex-direction:column;gap:var(--sp-10)}
  .store-card-top{display:flex;align-items:center;gap:var(--sp-10)}
  .store-card-top .picon{width:38px;height:38px}
  .store-card-id{flex:1;min-width:0;display:flex;flex-direction:column}
  .store-card-id .n{font-weight:var(--fw-strong);font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .store-card-id .v{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono)}
  .store-soon{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--warn);
    border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-6);
    background:color-mix(in srgb,var(--warn) 9%,var(--card))}
  .store-card-meta{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--mut)}
  .store-card-foot{display:flex;align-items:center;gap:var(--sp-8);margin-top:auto}
  .store-price{display:inline-flex;align-items:center;gap:var(--sp-4);flex:1;border:1px solid var(--line);
    border-radius:var(--radius-sm);background:var(--bg2);padding:var(--sp-4) var(--sp-8)}
  .store-price-c{color:var(--mut);font-weight:var(--fw-strong)}
  .store-price input{flex:1;min-width:0;width:100%;font:inherit;font-size:var(--fs-md);border:0;background:none;color:var(--txt)}
  .store-price input:disabled{color:var(--mut2)}

}