/* Styles SharelySocial, repris de la maquette validée (maquette/sharelysocial.html).
   Disposition : rail de navigation vitré à gauche, colonne de contenu centrée (fil de 470 px), rail contextuel à droite ; sur mobile, en-tête compact + barre d'onglets en bas */
:root{
  --bg:oklch(0.155 0.018 285); --surface:oklch(0.2 0.022 285); --surface-2:oklch(0.25 0.026 285);
  --line:oklch(0.36 0.025 285 / .65); --fg:oklch(0.96 0.008 285); --muted:oklch(0.74 0.022 285); --faint:oklch(0.58 0.02 285);
  --accent:oklch(0.74 0.15 292); --accent-soft:oklch(0.74 0.15 292 / .16); --coral:oklch(0.74 0.16 28);
  --glass:oklch(0.19 0.02 285 / .72); --scrim:oklch(0.07 0.01 285 / .74);
  --ok:oklch(0.78 0.14 160); --warn:oklch(0.82 0.14 80); --bad:oklch(0.72 0.18 25);
  --on-grad:oklch(0.99 0 0); --on-media:oklch(0.99 0 0); --media-shade:oklch(0.1 0.02 285 / .55);
  --grad:linear-gradient(125deg,oklch(0.6 0.19 268),oklch(0.65 0.2 305) 52%,oklch(0.74 0.16 32));
  --shadow:0 1px 2px oklch(0 0 0 / .3),0 16px 40px -18px oklch(0 0 0 / .6);
  --font-display:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-text:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-card:22px; --r-ctl:12px; --side-w:248px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:oklch(0.975 0.006 285); --surface:oklch(1 0 0); --surface-2:oklch(0.955 0.01 285);
  --line:oklch(0.9 0.012 285); --fg:oklch(0.21 0.025 285); --muted:oklch(0.47 0.025 285); --faint:oklch(0.6 0.02 285);
  --accent:oklch(0.52 0.2 290); --accent-soft:oklch(0.52 0.2 290 / .1); --coral:oklch(0.6 0.2 25);
  --glass:oklch(0.99 0.004 285 / .76); --scrim:oklch(0.2 0.02 285 / .55);
  --ok:oklch(0.52 0.13 160); --warn:oklch(0.6 0.15 70); --bad:oklch(0.55 0.2 25);
  --shadow:0 1px 2px oklch(0.3 0.02 285 / .08),0 16px 40px -18px oklch(0.3 0.05 285 / .25);
  color-scheme:light}}
:root[data-theme="light"]{
  --bg:oklch(0.975 0.006 285); --surface:oklch(1 0 0); --surface-2:oklch(0.955 0.01 285);
  --line:oklch(0.9 0.012 285); --fg:oklch(0.21 0.025 285); --muted:oklch(0.47 0.025 285); --faint:oklch(0.6 0.02 285);
  --accent:oklch(0.52 0.2 290); --accent-soft:oklch(0.52 0.2 290 / .1); --coral:oklch(0.6 0.2 25);
  --glass:oklch(0.99 0.004 285 / .76); --scrim:oklch(0.2 0.02 285 / .55);
  --ok:oklch(0.52 0.13 160); --warn:oklch(0.6 0.15 70); --bad:oklch(0.55 0.2 25);
  --shadow:0 1px 2px oklch(0.3 0.02 285 / .08),0 16px 40px -18px oklch(0.3 0.05 285 / .25);
  color-scheme:light}

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 var(--font-text);-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--glass)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:800} h2{font-size:1.25rem;font-weight:700} h3{font-size:1.02rem;font-weight:700}
p{margin:0}
/* Un élément masqué (attribut hidden) le reste, même si sa classe lui donne un display. */
[hidden]{display:none!important}
small,.small{font-size:.82rem;color:var(--muted)}
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.sm{width:18px;height:18px}.i.xs{width:14px;height:14px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-size:.85em}

/* ---------- Ossature ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);gap:28px;max-width:1340px;margin:0 auto}
.side{position:sticky;top:0;height:100dvh;padding-block:22px;display:flex;flex-direction:column;gap:2px}
.logo{display:flex;align-items:center;gap:10px;padding:6px 12px 22px;font:800 1.3rem/1 var(--font-display);letter-spacing:-.03em}
.logo-mark{width:34px;height:34px;border-radius:11px;background:var(--grad);display:grid;place-items:center;flex:none;box-shadow:0 6px 18px -6px oklch(0.6 0.2 300 / .7)}
.logo-mark::before{content:"";width:14px;height:14px;border-radius:50%;border:3px solid var(--on-grad);box-shadow:5px -5px 0 -3px var(--on-grad)}
.logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:14px;color:var(--fg);font-weight:500;transition:background .15s}
.nav:hover{background:var(--surface-2)}
.nav.on{font-weight:700;background:var(--accent-soft)}
.nav.on .i{stroke-width:2.3;color:var(--accent)}
.nav .badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--coral);color:var(--on-grad);font-size:.72rem;font-weight:700;display:grid;place-items:center}
.side .sep{height:1px;background:var(--line);margin:10px 12px}
.side .grow{flex:1}
main{min-width:0;padding-block:28px 110px}
.mtop{display:none}
.tabbar{display:none}
@media (min-width:768px) and (max-width:1199px){
  :root{--side-w:72px}
  .side .lbl,.logo span,.nav .badge{display:none}
  .nav{justify-content:center;padding:12px}
  .logo{justify-content:center;padding-inline:0}
}
@media (max-width:767px){
  .app{grid-template-columns:minmax(0,1fr);gap:0}
  .side{display:none}
  main{padding-block:10px 104px}
  .mtop{display:flex;align-items:center;gap:8px;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px))) calc(-1 * max(16px,env(safe-area-inset-right,0px)));
    padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:var(--glass);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line)}
  .mtop .logo{padding:0;font-size:1.15rem;margin-right:auto}
  .mtop .logo-mark{width:28px;height:28px;border-radius:9px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-around;
    padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:var(--glass);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--line)}
  .tabbar a,.tabbar button{display:grid;place-items:center;width:48px;height:42px;border-radius:12px}
  .tabbar .on .i{stroke-width:2.4;color:var(--accent)}
  .tabbar .plus{background:var(--grad);color:var(--on-grad);width:52px;border-radius:14px}
}
.ib{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--fg)}
.ib:hover{background:var(--surface-2)}

/* ---------- Boutons & contrôles ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-ctl);font-weight:600;font-size:.9rem;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.pri{background:var(--grad);color:var(--on-grad);border-color:transparent;box-shadow:0 8px 20px -10px oklch(0.6 0.2 300 / .8)}
.btn.ghost{background:transparent}
.btn.sm{height:30px;padding:0 12px;font-size:.82rem;border-radius:10px}
.btn.done{background:var(--surface-2);color:var(--muted)}
.lnk{color:var(--accent);font-weight:600}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lab{font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.inp{width:100%;min-height:42px;padding:10px 14px;border-radius:var(--r-ctl);background:var(--surface-2);border:1px solid var(--line);outline:none}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.inp{resize:vertical;min-height:96px;line-height:1.5}
.sw{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--on-grad);transition:transform .2s;box-shadow:0 1px 3px oklch(0 0 0 / .3)}
.sw:checked{background:var(--accent)}
.sw:checked::after{transform:translateX(18px)}
.sw:disabled{opacity:.45;cursor:not-allowed}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.seg button{flex:1;height:34px;border-radius:10px;font-weight:600;font-size:.88rem;color:var(--muted);padding:0 10px;white-space:nowrap}
.seg button.on{background:var(--surface-2);color:var(--fg);box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;font-size:.78rem;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;font-size:.75rem;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:color-mix(in oklch,var(--ok) 14%,transparent)}
.pill.warn{color:var(--warn);background:color-mix(in oklch,var(--warn) 15%,transparent)}
.pill.bad{color:var(--bad);background:color-mix(in oklch,var(--bad) 14%,transparent)}
.pill.idle{color:var(--muted);background:var(--surface-2)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h p{color:var(--muted);font-size:.88rem;flex-basis:100%}
.note{font-size:.84rem;color:var(--muted);padding:10px 12px;border-radius:12px;background:var(--surface-2);display:flex;gap:8px;align-items:flex-start}
.note .i{color:var(--accent);margin-top:1px}
.row{display:flex;align-items:center;gap:12px;min-width:0}
.row .grow{flex:1;min-width:0}
.tbl-wrap{overflow-x:auto;margin-inline:-4px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.page{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.page-h{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-h .grow{flex:1;min-width:240px}
.page-h p{color:var(--muted);margin-top:6px;max-width:62ch}

/* ---------- Avatars & stories ---------- */
.av{display:grid;place-items:center;border-radius:50%;flex:none;color:var(--on-grad);font-weight:700;font-family:var(--font-display);
  background:linear-gradient(140deg,oklch(0.72 0.13 var(--h)),oklch(0.5 0.15 calc(var(--h) + 50)))}
.ring{padding:2.5px;border-radius:50%;background:var(--grad);flex:none;display:grid}
.ring.seen{background:var(--line)}
.ring>.av{box-shadow:0 0 0 2.5px var(--bg)}
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.st{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;flex:none;font-size:.75rem;color:var(--muted)}
.st span.n{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st .add{position:relative}
.st .add::after{content:"+";position:absolute;right:0;bottom:0;width:22px;height:22px;border-radius:50%;background:var(--grad);color:var(--on-grad);font-weight:800;display:grid;place-items:center;border:2.5px solid var(--bg);font-size:.95rem;line-height:1}

/* ---------- Accueil ---------- */
.home{display:grid;grid-template-columns:minmax(0,480px) 300px;gap:56px;justify-content:center}
.feed-col{min-width:0;display:flex;flex-direction:column;gap:14px}
.feed{--feed-gap:22px;display:flex;flex-direction:column;gap:var(--feed-gap)}
/* Les pages du fil sont des cadres Turbo imbriqués : l'écart s'applique aussi entre leurs publications. */
.feed turbo-frame{display:flex;flex-direction:column;gap:var(--feed-gap)}
.rail{display:flex;flex-direction:column;gap:18px;padding-top:8px;position:sticky;top:28px;align-self:start}
@media (max-width:1199px){.home{grid-template-columns:minmax(0,500px)}.rail{display:none}}
/* Fil sur mobile : publications bord à bord, sans cadre, pour un défilement plus fluide */
@media (max-width:767px){
  .feed{--feed-gap:28px}
  .feed .post{margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px))) calc(-1 * max(16px,env(safe-area-inset-right,0px)));
    border:0;border-radius:0;box-shadow:none;background:transparent}
  .feed .post .ph{padding-inline:max(12px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-right,0px))}
}
.sugg{display:flex;flex-direction:column;gap:12px}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .t{min-width:0;flex:1}
.who b{display:block;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fedstat{padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.fedstat .big{font:800 1.6rem/1 var(--font-display)}
.foot{font-size:.75rem;color:var(--faint);line-height:1.7}

/* ---------- Carte de post ---------- */
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.ph{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px}
.pmeta{flex:1;min-width:0}
.pname{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.9rem}
.psub{font-size:.78rem;color:var(--muted)}
.fed{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:2px 8px;border-radius:10px}
.imp{height:22px;font-size:.7rem;padding:0 8px}
.media{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--surface-2);user-select:none}
.track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.slide{flex:0 0 100%;height:100%;position:relative}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;display:block}
/* Vidéo façon Instagram : affiche, lecture muette à l'écran, bouton son en bas à gauche */
.player{position:relative;height:100%}
.player video{cursor:pointer}
.snd{position:absolute;left:12px;bottom:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--media-shade);color:var(--on-media);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1}
.snd .i{width:16px;height:16px}
.player .snd .on,.player.muted .snd .off{display:block}
.player .snd .off,.player.muted .snd .on{display:none}
/* Musique d'une publication : un seul bouton son pour la publication, la vidéo reste muette */
.media[data-music] .player .snd{display:none}
.music-snd{z-index:2}
.music-snd .on,.media.music-on .music-snd .off{display:none}
.music-snd .off,.media.music-on .music-snd .on{display:block}
.music-credit a{color:inherit}
.music-credit .i{vertical-align:-2px}
.cnt{position:absolute;top:12px;right:12px;padding:3px 9px;border-radius:10px;font-size:.75rem;font-weight:700;background:var(--media-shade);color:var(--on-media);backdrop-filter:blur(8px)}
.nb{position:absolute;top:50%;translate:0 -50%;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--glass);backdrop-filter:blur(10px);color:var(--fg);opacity:0;transition:opacity .2s}
.media:hover .nb,.media:focus-within .nb{opacity:1}
.nb.prev{left:10px}.nb.next{right:10px}
.dots{position:absolute;bottom:12px;left:50%;translate:-50% 0;display:flex;gap:5px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--on-media);opacity:.5;transition:all .3s}
.dots i.on{opacity:1;width:16px}
.burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.burst svg{width:110px;height:110px;fill:var(--on-media);stroke:none;filter:drop-shadow(0 8px 24px oklch(0.6 0.2 20 / .6));animation:burst .9s ease-out forwards}
@keyframes burst{0%{transform:scale(.2);opacity:0}25%{transform:scale(1.15);opacity:1}45%{transform:scale(.95)}80%{opacity:1}100%{transform:scale(1.1) translateY(-20px);opacity:0}}
.cw-veil{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:oklch(0.15 0.02 285 / .35);backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);color:var(--on-media);z-index:2}
.cw-veil b{display:block;font-family:var(--font-display);font-size:1.05rem;margin:6px 0 4px}
.cw-veil .btn{margin-top:12px;background:var(--media-shade);color:var(--on-media);border-color:oklch(1 0 0 / .25)}
.vid .play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--media-shade);backdrop-filter:blur(10px);color:var(--on-media);transition:opacity .3s,transform .2s}
.vid .play .i{width:30px;height:30px;fill:currentColor;margin-left:4px}
.vid .vbar{position:absolute;left:14px;right:14px;bottom:14px;height:3px;border-radius:2px;background:oklch(1 0 0 / .3);overflow:hidden}
.vid .vbar span{display:block;height:100%;width:0;background:var(--on-media)}
.vid .dur{position:absolute;left:14px;bottom:24px;font-size:.75rem;font-weight:700;color:var(--on-media);text-shadow:0 1px 4px oklch(0 0 0 / .5)}
.vid.playing .play{opacity:0;transform:scale(.8)}
.vid.playing img{animation:kb 12s linear forwards}
.vid.playing .vbar span{animation:vb 12s linear forwards}
@keyframes kb{to{transform:scale(1.25) translate(-4%,3%)}}
@keyframes vb{to{width:100%}}
.acts{display:flex;align-items:center;gap:2px;padding:8px 8px 2px}
.acts .sp{flex:1}
.act{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;transition:transform .15s}
.act:active{transform:scale(.88)}
.act.liked .i{fill:var(--coral);stroke:var(--coral);animation:pop .35s}
.act.boosted .i{color:var(--ok);stroke-width:2.4}
.act.saved .i{fill:currentColor}
@keyframes pop{50%{transform:scale(1.3)}}
.pbody{padding:2px 16px 16px;display:flex;flex-direction:column;gap:5px;font-size:.92rem}
.pbody .meta{color:var(--muted);font-size:.86rem}
.tag{color:var(--accent);font-weight:500}
.ago{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-top:3px}
.xp{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);padding:7px 10px;border-radius:10px;background:var(--surface-2);margin-top:4px;flex-wrap:wrap}
.xp .i{color:var(--accent)}
.svc{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:.6rem;font-weight:800;color:var(--on-grad);flex:none;letter-spacing:0}
.svc.ig{background:linear-gradient(135deg,oklch(0.6 0.2 330),oklch(0.72 0.17 50))}
.svc.fb{background:oklch(0.55 0.17 260)}
.svc.lg{width:40px;height:40px;border-radius:12px;font-size:.85rem}

/* ---------- Overlays ---------- */
.ov{position:fixed;inset:0;z-index:60;background:var(--scrim);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .2s}
@keyframes fade{from{opacity:0}}
.ov .x{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));z-index:3;color:var(--on-media);background:var(--media-shade);border-radius:50%}
.pd{position:relative;width:min(1040px,100%);max-height:calc(100dvh - 48px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:26px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);animation:rise .3s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(16px) scale(.98);opacity:0}}
.pd-media{position:relative;background:var(--bg);display:grid;place-items:center;overflow:hidden;min-height:0}
.pd-media .glow{position:absolute;inset:-20%;background-size:cover;background-position:center;filter:blur(60px) saturate(1.4);opacity:.75}
.pd-media .media{width:100%;max-height:calc(100dvh - 48px);border-radius:0;background:transparent}
.pd-side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
.pd-side .ph{border-bottom:1px solid var(--line)}
.cmts{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:16px;min-height:120px}
.cmt{display:flex;gap:10px;font-size:.9rem}
.cmt .t{flex:1;min-width:0}
.cmt small{display:flex;gap:12px;margin-top:3px}
.cmt.arch{opacity:.85}
.addc{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:center}
.addc .inp{min-height:38px;border-radius:19px}
@media (max-width:767px){
  .ov{padding-inline:0}
  .pd{grid-template-columns:1fr;border-radius:26px 26px 0 0;max-height:calc(100dvh - 40px);overflow-y:auto}
  .pd-side{border-left:0}
  .pd-media .media{max-height:60dvh}
}

/* ---------- Stories ---------- */
.sv{position:relative;height:min(86dvh,820px);aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow);animation:rise .3s}
.sv>img{width:100%;height:100%;object-fit:cover;display:block}
.sv .bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:2}
.sv .bars i{flex:1;height:3px;border-radius:2px;background:oklch(1 0 0 / .35);overflow:hidden}
.sv .bars i span{display:block;height:100%;width:0;background:var(--on-media)}
.sv .bars i.done span{width:100%}
.sv .bars i.run span{animation:vb 5s linear forwards}
.sv .sh{position:absolute;top:24px;left:12px;right:12px;display:flex;align-items:center;gap:10px;color:var(--on-media);z-index:2;text-shadow:0 1px 4px oklch(0 0 0 / .45);font-size:.88rem}
.sv .sh .grow{flex:1;min-width:0}
.sv .stxt{position:absolute;left:8%;right:8%;top:58%;text-align:center;font:800 1.45rem/1.2 var(--font-display);color:var(--on-media);text-shadow:0 2px 16px oklch(0 0 0 / .55);text-wrap:balance}
.sv .tapl,.sv .tapr{position:absolute;top:70px;bottom:70px;z-index:1}
.sv .tapl{left:0;width:33%}.sv .tapr{right:0;width:67%}
.sv .sf{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;z-index:2}
.sv .sf .inp{background:oklch(0 0 0 / .25);border-color:oklch(1 0 0 / .4);color:var(--on-media);border-radius:22px;backdrop-filter:blur(8px)}
.sv .sf .inp::placeholder{color:oklch(1 0 0 / .8)}
.sv .xtag{position:absolute;bottom:66px;left:50%;translate:-50% 0;z-index:2;color:var(--on-media);background:var(--media-shade);backdrop-filter:blur(8px);padding:5px 10px;border-radius:12px;font-size:.75rem;display:flex;gap:6px;align-items:center;white-space:nowrap}

/* ---------- Composer ---------- */
.comp{width:min(980px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:var(--surface);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);animation:rise .3s}
.comp-h{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.comp-h h2{flex:1;text-align:center;font-size:1.02rem}
.comp-b{flex:1;overflow-y:auto;min-height:0}
.comp-f{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.comp-f .grow{flex:1;min-width:160px;font-size:.84rem;color:var(--muted)}
.src{display:flex;gap:6px;padding:14px 16px 0}
.drop{margin:16px;border:2px dashed var(--line);border-radius:20px;padding:44px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--muted)}
.drop .big{width:64px;height:64px;color:var(--accent)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.imm-h{display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.albums{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.imm-date{padding:6px 16px;font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.imm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:4px;padding:0 16px 12px}
.th{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.th .sel{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;border:2px solid var(--on-media);background:oklch(0 0 0 / .2);color:var(--on-grad);font-size:.75rem;font-weight:800;display:grid;place-items:center}
.th.on img{transform:scale(.88);border-radius:8px}
.th.on{outline:2px solid var(--accent);outline-offset:-2px}
.th.on .sel{background:var(--accent);border-color:var(--accent)}
.th .vd{position:absolute;left:7px;bottom:6px;font-size:.7rem;font-weight:700;color:var(--on-media);display:flex;gap:3px;align-items:center;text-shadow:0 1px 3px oklch(0 0 0 / .6)}
.th .vd .i{fill:currentColor;stroke:none}
.edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);min-height:100%}
.edit-prev{background:var(--bg);display:grid;place-items:center;padding:20px}
.edit-prev .media{width:min(420px,100%);border-radius:18px}
.edit-prev .sv{height:min(62dvh,600px);animation:none}
.edit-form{padding:18px;display:flex;flex-direction:column;gap:18px;border-left:1px solid var(--line)}
.alts{display:flex;flex-direction:column;gap:8px}
.alts .row img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--surface-2)}
.opt .grow b{display:block;font-size:.9rem}
.opt .grow small{display:block}
.counter{text-align:right;font-size:.75rem;color:var(--faint)}
@media (max-width:767px){
  .comp{border-radius:26px 26px 0 0;max-height:calc(100dvh - 30px)}
  .edit{grid-template-columns:1fr}
  .edit-form{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- Profil ---------- */
.prof{max-width:935px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.prof-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 48px;align-items:center;padding:10px 4% 0}
.prof-h .ring{padding:4px}
.prof-i{display:flex;flex-direction:column;gap:14px;min-width:0}
.prof-i .row{flex-wrap:wrap}
.prof-i h1{font-size:1.4rem}
.handle{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.82rem;color:var(--muted);padding:4px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stats b{font-family:var(--font-display);font-size:1.05rem}
.stats a:hover{text-decoration:underline}
.ptabs a{display:flex;align-items:center;gap:7px;height:50px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-top:2px solid transparent;margin-top:-1px}
.ptabs a.on{color:var(--fg);border-top-color:var(--fg)}
.netlist{display:flex;flex-direction:column;gap:8px}
.netlist turbo-frame{display:contents}
.found a.t{color:inherit}
.chk{display:flex;align-items:flex-start;gap:10px;line-height:1.45;cursor:pointer}
.chk input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.bio{line-height:1.55;max-width:56ch}
.hls{display:flex;gap:22px;overflow-x:auto;padding:4px 4% 4px;scrollbar-width:none}
.hl{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;font-weight:600;flex:none}
.hl .c{width:72px;height:72px;border-radius:50%;padding:3px;border:1px solid var(--line);background:var(--bg)}
.hl .c img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ptabs{display:flex;justify-content:center;gap:40px;border-top:1px solid var(--line)}
.ptabs button{display:flex;align-items:center;gap:7px;height:50px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-top:2px solid transparent;margin-top:-1px}
.ptabs button.on{color:var(--fg);border-top-color:var(--fg)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
/* Pages de la grille (cadres Turbo) : même grille, et une boîte visible pour le chargement au défilement. */
.grid3 turbo-frame{display:grid;grid-template-columns:subgrid;grid-column:1/-1;gap:inherit}
.gt{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--surface-2)}
.gt img,.gt video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.gt:hover img{transform:scale(1.04)}
.gt .gi{position:absolute;top:8px;right:8px;color:var(--on-media);filter:drop-shadow(0 1px 3px oklch(0 0 0 / .6))}
.gt .gh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;background:var(--media-shade);color:var(--on-media);font-weight:700;opacity:0;transition:opacity .2s}
.gt:hover .gh{opacity:1}
.gt .gh span{display:flex;gap:6px;align-items:center}
.gt .gh .i{fill:currentColor;stroke:none;width:20px;height:20px}
@media (max-width:767px){
  .prof-h{grid-template-columns:auto minmax(0,1fr);gap:14px 18px;padding:4px 0 0}
  .prof-h .ring .av{width:86px!important;height:86px!important;font-size:1.8rem!important}
  .bio,.prof-acts{grid-column:1/-1}
  .stats{gap:18px}
  .ptabs{gap:24px}
  .grid3{gap:2px}.gt{border-radius:3px}
  .hls{padding-inline:0}
}

/* ---------- Explorer ---------- */
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:4px}
.ex-grid .gt{aspect-ratio:1}
.ex-grid .gt.tall{grid-row:span 2;aspect-ratio:auto}
.found{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);flex-wrap:wrap}
.found .t{flex:1;min-width:160px}

/* ---------- Activité ---------- */
.notifs{display:flex;flex-direction:column}
.nf{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:.92rem}
.nf:last-child{border-bottom:0}
.nf .t{flex:1;min-width:0}
.nf .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.nf img.mini{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}

/* ---------- Réglages ---------- */
.setl{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.subnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:28px}
.subnav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-weight:500;text-align:left;color:var(--muted)}
.subnav button.on{background:var(--accent-soft);color:var(--fg);font-weight:700}
.subnav button.on .i{color:var(--accent)}
.setc{display:flex;flex-direction:column;gap:18px;min-width:0}
@media (max-width:899px){
  .setl{grid-template-columns:minmax(0,1fr)}
  .subnav{flex-direction:row;overflow-x:auto;position:static;scrollbar-width:none;padding-bottom:2px}
  .subnav button{white-space:nowrap;flex:none}
}
.acct{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--surface-2);flex-wrap:wrap}
.acct .grow{flex:1;min-width:180px}
.acct .grow b{display:block}
.vars{display:flex;gap:6px;flex-wrap:wrap}
.vars .chip{font-family:var(--font-mono);font-weight:500}
.preview-cap{white-space:pre-wrap;font-size:.86rem;padding:12px;border-radius:12px;border:1px dashed var(--line);color:var(--muted)}
pre.code{margin:0;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font:500 .8rem/1.6 var(--font-mono);overflow-x:auto;white-space:pre}
.codebox{position:relative}
.codebox .btn{position:absolute;top:8px;right:8px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.tool{padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:.82rem;color:var(--muted)}
.tool code{display:block;font:600 .82rem var(--font-mono);color:var(--fg);margin-bottom:2px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.two{grid-template-columns:minmax(0,1fr)}}

/* ---------- Immich (source des médias) ---------- */
.src-tabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--surface-2);margin-bottom:12px}
.src-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:10px;font-weight:600;font-size:.88rem;color:var(--muted)}
.src-tabs button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px oklch(0 0 0 / .12)}
.imm-source{display:flex;flex-direction:column;gap:10px}
.imm-filters{gap:8px}
.imm-filters select{min-width:0;flex:1 1 180px}
.imm-date{display:flex;align-items:center;gap:6px}
.imm-scroll{max-height:440px;overflow-y:auto;border-radius:14px;padding-right:4px}
.imm-scroll turbo-frame{display:block}
.imm-day{font-size:.8rem;font-weight:700;color:var(--muted);margin:12px 0 6px;text-transform:none}
.imm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
.imm-tile{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2);padding:0;border:0}
.imm-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.imm-tile .gi{position:absolute;left:5px;bottom:4px;display:flex;align-items:center;gap:3px;font-size:.7rem;font-weight:700;color:var(--on-media);text-shadow:0 1px 3px oklch(0 0 0 / .6)}
.imm-tile .sel{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:2px solid var(--on-media);background:oklch(0 0 0 / .25);display:grid;place-items:center;color:transparent}
.imm-tile[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:-3px}
.imm-tile[aria-pressed="true"] img{transform:scale(.9);border-radius:6px}
.imm-tile[aria-pressed="true"] .sel{background:var(--accent);border-color:var(--accent);color:var(--on-grad)}
.preview .src-badge{position:absolute;left:6px;bottom:6px;font-size:.68rem;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--media-shade);color:var(--on-media)}

/* ---------- Import ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.step{display:flex;flex-direction:column;gap:8px;text-align:left;padding:4px 0;color:var(--faint);font-size:.82rem;font-weight:600}
.step::before{content:"";height:4px;border-radius:2px;background:var(--line)}
.step.on{color:var(--fg)}
.step.on::before{background:var(--grad)}
.step.done{color:var(--muted)}
.step.done::before{background:var(--accent)}
.zip{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:var(--surface-2);flex-wrap:wrap}
.zip .ico{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.zip .grow{flex:1;min-width:180px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.kpi{padding:14px;border-radius:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.kpi b{font:800 1.5rem/1.1 var(--font-display)}
.kpi small{font-size:.78rem}
.map td:first-child{font-family:var(--font-mono);font-size:.8rem;color:var(--muted)}
.map td:nth-child(2){color:var(--faint);width:24px}
.prog{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.prog span{display:block;height:100%;background:var(--grad);border-radius:5px;transition:width .3s}
.log{font:500 .78rem/1.7 var(--font-mono);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;height:210px;overflow-y:auto;color:var(--muted)}
.log .ok{color:var(--ok)}.log .w{color:var(--warn)}
.navbtns{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.small.err,p.err{color:var(--coral)}
.row.wrap{flex-wrap:wrap}
.inp.sm{width:auto;min-height:34px;padding:6px 10px;font-size:.85rem}
fieldset.field{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
fieldset.field legend{font-weight:600;margin-bottom:6px}
.import-item .thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--faint)}
.import-item .thumb img{width:100%;height:100%;object-fit:cover}
.import-item select{max-width:100%}
@media (max-width:640px){.import-item select{flex-basis:100%}}

/* ---------- Admin ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.tile b{font:800 1.6rem/1.1 var(--font-display)}
.tile small{font-size:.8rem}
@media (max-width:767px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dom{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:.88rem;flex-wrap:wrap}
.dom .grow{flex:1;min-width:140px}

/* ---------- Divers ---------- */
.toast{position:fixed;left:50%;translate:-50% 0;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;max-width:calc(100vw - 32px);animation:rise .25s}
@media (max-width:767px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface) 50%,var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.view{animation:vin .3s ease-out}
@keyframes vin{from{opacity:.4;transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- Ajouts de l'application ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.flashes{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:0 auto 16px}
.flash{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-weight:500}
.flash.success .i{color:var(--ok)} .flash.error .i{color:var(--bad)}
.form{display:flex;flex-direction:column;gap:16px}
.form-errors,.field-errors{margin:0;padding:10px 12px;list-style:none;border-radius:12px;background:color-mix(in oklch,var(--bad) 12%,transparent);color:var(--bad);font-size:.86rem;font-weight:500}
.field .help{font-size:.8rem;color:var(--muted)}
.field.invalid .inp{border-color:var(--bad)}
.auth{max-width:440px;margin:4vh auto 0;display:flex;flex-direction:column;gap:20px}
.auth .logo{justify-content:center;padding:0;font-size:1.6rem}
.auth .card{padding:24px}
.auth .alt{text-align:center;font-size:.9rem;color:var(--muted)}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choices label{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;font-weight:600;font-size:.9rem}
.choices label small{font-weight:400}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices input:checked+label{border-color:var(--accent);background:var(--accent-soft)}
.choices input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.welcome{padding:24px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.welcome h1{font-size:1.5rem}
.welcome .row{flex-wrap:wrap}
.empty{padding:40px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:var(--r-card)}
.empty .i{width:40px;height:40px;color:var(--accent)}
.more{display:flex;justify-content:center;padding:8px}
/* Fil d'un profil : en-tête de retour, publication visée sous la barre du haut */
.pf-head{display:flex;align-items:center;gap:10px;padding:2px 0}
.pf-head b{display:block;font-family:var(--font-display)}
.pf-head small{color:var(--muted)}
.post{scroll-margin-top:16px}
@media (max-width:767px){.post{scroll-margin-top:64px}}
.processing{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.9rem;padding:20px}
.slide video{background:#000}
.avatar-img{border-radius:50%;object-fit:cover;flex:none;display:block}
.page-narrow{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.compose{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.compose-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:20px;align-items:start}
@media (max-width:860px){.compose-grid{grid-template-columns:minmax(0,1fr)}}
.picker{display:flex;flex-direction:column;gap:12px}
.previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.preview{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:14px;background:var(--surface-2)}
.preview .th{aspect-ratio:4/5}
.preview .th img,.preview .th video{width:100%;height:100%;object-fit:cover;display:block}
.preview .inp{min-height:36px;padding:6px 10px;font-size:.82rem}
.post-actions-row{display:flex;gap:8px;align-items:center;padding:0 16px 12px}
.post-actions-row form{margin:0}
.danger{color:var(--bad)}
button[disabled]{opacity:.5;cursor:not-allowed}
.footer-note{font-size:.75rem;color:var(--faint);text-align:center;padding:24px 0}
.seg a{flex:1;display:grid;place-items:center;height:34px;border-radius:10px;font-weight:600;font-size:.88rem;color:var(--muted);padding:0 10px;white-space:nowrap}
.seg a.on{background:var(--surface-2);color:var(--fg);box-shadow:var(--shadow)}
.drop .big{width:64px;height:64px;color:var(--accent)}
.addc{margin:0}
.addc .field{flex:1}

/* ---------- Stories ---------- */
.story-viewer{background:oklch(0.06 0.01 285 / .94);animation:none}
.story-viewer .sv{animation:none;background:oklch(0.12 0.01 285)}
.sv-media{position:absolute;inset:0;display:grid;place-items:center}
.sv-media img,.sv-media video{width:100%;height:100%;object-fit:cover;display:block}
.sv .bars i span{transition:none}
.sv-author{display:block;flex:none}
.sv-meta{opacity:.8}
.sv-btn{color:var(--on-media);width:32px;height:32px}
.sv-btn:hover{background:oklch(1 0 0 / .12)}
.sv-own{position:absolute;left:12px;right:12px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--on-media);font-size:.85rem;text-shadow:0 1px 4px oklch(0 0 0 / .5)}
.sv-own .btn{background:var(--media-shade);color:var(--on-media);border-color:oklch(1 0 0 / .25)}
.st a,.st{color:var(--muted)}
.st .ring{transition:transform .15s}
.st:hover .ring{transform:scale(1.04)}
.add-badge{position:relative;display:inline-grid}
.add-badge .plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--grad);color:var(--on-grad);font-weight:800;display:grid;place-items:center;border:2.5px solid var(--bg);font-size:.95rem;line-height:1}
.hls a.hl{color:var(--fg)}
.prof-h .ring.has-story{cursor:pointer}
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.story-tile{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.story-tile .th{aspect-ratio:9/16;display:block;position:relative;overflow:hidden}
.story-tile .th:hover img{transform:scale(1.04)}
.story-tile .th .gi{position:absolute;top:8px;right:8px;color:var(--on-media);filter:drop-shadow(0 1px 3px oklch(0 0 0 / .6))}
.story-tile form{display:flex;flex-direction:column;gap:6px;margin:0}
.story-tile .inp{min-height:34px;padding:6px 10px;font-size:.82rem}
.story-tile .row{flex-wrap:wrap;gap:6px}
.story-viewer{place-items:center}
@media (max-width:767px){
  .story-viewer{padding:0}
  .story-viewer .sv{height:100dvh;width:100%;aspect-ratio:auto;border-radius:0}
  .story-viewer .x{top:calc(52px + env(safe-area-inset-top,0px))}
}
.choices label{text-transform:none;letter-spacing:0;color:var(--fg);font-size:.9rem}
.choices label small{text-transform:none;letter-spacing:0;color:var(--muted);font-size:.78rem}
.preview{position:relative;cursor:grab}
.preview.dragging{opacity:.4}
.preview .th{position:relative}
.order-badge{position:absolute;top:6px;left:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--media-shade);color:var(--on-media);font-size:.75rem;font-weight:700;display:grid;place-items:center}
.preview-tools{display:flex;gap:4px;justify-content:space-between}
.preview-tools .btn{flex:1;padding:0;height:30px;min-width:0}
.preview-tools .btn[disabled]{opacity:.35}

/* ---------- Menu « … » d'une publication ---------- */
.pmenu{position:relative}
.pmenu>summary{list-style:none;cursor:pointer}
.pmenu>summary::-webkit-details-marker{display:none}
.pmenu .menu{position:absolute;right:0;top:calc(100% + 4px);z-index:25;min-width:230px;padding:6px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;animation:rise .15s}
.pmenu .menu form{margin:0;display:contents}
.pmenu .menu a,.pmenu .menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font:inherit;font-size:.9rem;color:var(--fg);background:none;border:0;text-align:left;cursor:pointer}
.pmenu .menu a:hover,.pmenu .menu button:hover,.pmenu .menu :focus-visible{background:var(--surface-2)}
.pmenu .menu .danger{color:var(--coral)}

/* ---------- Feuille de partage ---------- */
/* Toutes les fenêtres modales sont au centre du navigateur, sur bureau comme sur mobile. */
dialog:modal{margin:auto}
.share-sheet{border:0;padding:0;background:transparent;max-width:min(420px,calc(100vw - 24px));width:100%;color:var(--fg)}
.share-sheet .sheet{animation:rise .15s}
.share-sheet::backdrop{background:oklch(0.15 0.02 285 / .55);backdrop-filter:blur(4px)}
.share-sheet .sheet{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.share-sheet header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px 10px;font-family:var(--font-display)}
.share-sheet .opt{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;font:inherit;color:var(--fg);background:none;border:0;text-align:left;cursor:pointer;width:100%}
.share-sheet .opt:hover,.share-sheet .opt:focus-visible{background:var(--surface-2)}
.share-sheet .opt span{display:flex;flex-direction:column}
.share-sheet .opt small{color:var(--muted);font-size:.78rem}

/* ---------- Commentaires ---------- */
.cmts-list{display:flex;flex-direction:column;gap:16px}
.cmt small form{margin:0;display:inline}
.cmt .del{font-size:inherit;color:var(--faint)}
.cmt .del:hover{color:var(--coral)}
.cprev{display:flex;flex-direction:column;gap:3px}
.cprev:empty{display:none}
.cmt.compact{font-size:.9rem;display:block}
.post .addc{border-top:1px solid var(--line)}
.post .addc .inp{flex:1;min-width:0;background:transparent;border:0;padding:0 4px}
.addc .err{flex-basis:100%;margin:4px 0 0;color:var(--coral)}
.addc{flex-wrap:wrap}
label.act{cursor:pointer}

/* ---------- Lecteur vidéo en fenêtre ---------- */
.video-modal{border:0;padding:0;background:transparent;max-width:min(100vw,960px);max-height:100dvh;width:100%;display:grid;place-items:center;overflow:visible}
.video-modal::backdrop{background:oklch(0.08 0.01 285 / .92)}
.video-modal video{display:block;width:100%;max-height:calc(100dvh - 32px);background:#000;border-radius:14px}
.video-modal .close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:1;color:#fff;background:oklch(0 0 0 / .45)}
@media (max-width:767px){.video-modal video{border-radius:0}}

/* Sélecteur de musique (création et modification) */
.music-picker{border:0;padding:0;margin:0;display:grid;gap:8px}
.music-picker legend{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.music-chosen{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.music-chosen .row{align-items:center;gap:10px}
.music-start{display:grid;gap:4px}
.music-start input{width:100%;accent-color:var(--accent)}
.music-search{display:grid;gap:8px}
.music-results{display:grid;gap:8px;max-height:320px;overflow:auto}
.music-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.music-list li{gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.music-list b{overflow-wrap:anywhere}
.sv-music{font-size:.78rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bureau : recherche de musique dans une fenêtre au centre, page assombrie (mobile : dans la page) */
.music-open{justify-self:start}
.music-modal{border:0;padding:0;background:transparent;width:min(600px,calc(100vw - 48px));max-height:min(720px,calc(100dvh - 48px));color:var(--fg);overflow:visible}
.music-modal::backdrop{background:oklch(0.15 0.02 285 / .55);backdrop-filter:blur(4px)}
.music-modal .sheet{display:flex;flex-direction:column;gap:10px;max-height:min(720px,calc(100dvh - 48px));background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 16px 16px;box-shadow:var(--shadow);animation:rise .15s}
.music-modal header{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:1.05rem}
.music-modal .music-search{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.music-modal .music-results{max-height:none;flex:1;min-height:120px}
.music-modal .sheet>div{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.music-thumb{position:relative;flex:0 0 48px;width:48px;height:48px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.music-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.music-fav{color:var(--muted)}
.music-fav[aria-pressed="true"]{color:var(--coral)}
.music-fav[aria-pressed="true"] .i{fill:var(--coral);stroke:var(--coral);animation:pop .35s}
.music-fav-title{display:flex;align-items:center;gap:6px;margin:0}
.music-play.loading .i{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}