/* Pellicule — feuille de style. Mobile d'abord, une colonne. */

:root {
  --bg: #15131a;
  --surface: #1f1c25;
  --surface-2: #2a2631;
  --line: #2c2833;
  --ink: #f4f0ea;
  --ink-2: #aaa3b4;
  --ink-3: #736c7d;
  --edge: #f2b441;          /* ambre : marquages de bord de film, accent principal */
  --edge-ink: #1a1207;
  --like: #ff4d6d;
  --danger: #ff6b6b;
  --ok: #7ee787;

  --c0: #f2b441; --c1: #62c3ff; --c2: #ff7a59; --c3: #7ee787;
  --c4: #c79bff; --c5: #ffd166; --c6: #4dd4ac; --c7: #ff8fb1;

  --display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 14px;
  --col: 560px;
  --tab-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* fonds composés : les barres translucides et le noir des médias */
  --bar: rgba(21, 19, 26, .9);
  --bar-fort: rgba(21, 19, 26, .94);
  --scrim: rgba(8, 6, 12, .62);
  --media: #0b0a0e;
  --avatar-ink: #15131a;
  --ombre-feuille: 0 -12px 40px rgba(0, 0, 0, .45);

  /* courbes de mouvement — une app, pas une page web */
  --ease: cubic-bezier(.32, .72, 0, 1);       /* sortie douce, façon iOS */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  color-scheme: dark;
}

/* ------------------------------------------------------------- mode clair
   Le pendant papier de la pellicule : tirage sur papier chaud, encre profonde,
   et le même ambre — assombri pour rester lisible sur du clair. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) { color-scheme: light; }
  :root:not([data-theme="sombre"]) {
    --bg: #f4f1ea;
    --surface: #fffdf7;
    --surface-2: #e9e3d7;
    --line: #ded6c7;
    --ink: #1b1915;
    --ink-2: #5d574c;
    --ink-3: #6d6759;
    --edge: #8f5a0b;
    --edge-ink: #fffaf0;
    --like: #e0294f;
    --danger: #c4362f;
    --ok: #2f7d4a;
    --c0: #b0770f; --c1: #1f6fa8; --c2: #c1512c; --c3: #2f7d4a;
    --c4: #7a4fb5; --c5: #a07a16; --c6: #157a68; --c7: #b23a68;
    --bar: rgba(244, 241, 234, .88);
    --bar-fort: rgba(244, 241, 234, .94);
    --scrim: rgba(40, 34, 24, .38);
    --media: #ded8cc;
    --avatar-ink: #fff;
    --ombre-feuille: 0 -12px 40px rgba(60, 50, 35, .18);
  }
}
:root[data-theme="clair"] {
  color-scheme: light;
  --bg: #f4f1ea;
  --surface: #fffdf7;
  --surface-2: #e9e3d7;
  --line: #ded6c7;
  --ink: #1b1915;
  --ink-2: #5d574c;
  --ink-3: #6d6759;
  --edge: #8f5a0b;
  --edge-ink: #fffaf0;
  --like: #e0294f;
  --danger: #c4362f;
  --ok: #2f7d4a;
  --c0: #b0770f; --c1: #1f6fa8; --c2: #c1512c; --c3: #2f7d4a;
  --c4: #7a4fb5; --c5: #a07a16; --c6: #157a68; --c7: #b23a68;
  --bar: rgba(244, 241, 234, .88);
  --bar-fort: rgba(244, 241, 234, .94);
  --scrim: rgba(40, 34, 24, .38);
  --media: #ded8cc;
  --avatar-ink: #fff;
  --ombre-feuille: 0 -12px 40px rgba(60, 50, 35, .18);
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scrollbar-gutter: stable;
  /* pas de zoom ni de double-tap qui agrandit : ça trahissait le site */
  touch-action: manipulation;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--body);
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;   /* pas de sélection intempestive au maintien */
  -webkit-touch-callout: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
.post-caption, .cmt-body, .link-row input { -webkit-user-select: text; user-select: text; }
/* figée en place : `overflow:hidden` seul laisse le doigt promener la page
   derrière une feuille sur téléphone. Le décalage est rendu à la fermeture. */
body.locked { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.display { font-family: var(--display); font-variation-settings: "opsz" 96; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.lead { color: var(--ink-2); font-size: 16px; margin: 0 0 22px; }
.hint { color: var(--ink-3); font-size: 13px; margin-top: 18px; line-height: 1.5; }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 12px;
  background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; transition: transform .08s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--edge); color: var(--edge-ink); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-danger { background: transparent; color: var(--danger); }
.btn-block { width: 100%; }
.btn-icon { width: 46px; min-width: 46px; padding: 0; }
.btn svg { width: 20px; height: 20px; flex: none; }

.iconbtn {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.iconbtn:active { background: var(--surface-2); }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn.light { background: rgba(255,255,255,.12); color: #fff; }
.iconbtn.small { width: 32px; height: 32px; min-width: 32px; color: var(--ink-3); }
.iconbtn.small svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- champs */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--edge); }
.field textarea { min-height: 76px; resize: vertical; }
.form { display: grid; gap: 14px; }
.error { color: var(--danger); font-size: 14px; min-height: 1.2em; }

/* ----------------------------------------------------------------- avatar */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--avatar-ink);
  background: var(--c0);
}
.avatar.xl { width: 68px; height: 68px; font-size: 30px; }
.avatar.lg { width: 56px; height: 56px; font-size: 24px; }
.avatar.sm { width: 26px; height: 26px; font-size: 12px; }
[data-color="0"] { --mc: var(--c0); } [data-color="1"] { --mc: var(--c1); }
[data-color="2"] { --mc: var(--c2); } [data-color="3"] { --mc: var(--c3); }
[data-color="4"] { --mc: var(--c4); } [data-color="5"] { --mc: var(--c5); }
[data-color="6"] { --mc: var(--c6); } [data-color="7"] { --mc: var(--c7); }
.avatar[data-color] { background: var(--mc); }
.name-tint[data-color] { color: var(--mc); }

/* ------------------------------------------------------------------ coque */
.shell { min-height: 100dvh; padding-bottom: calc(var(--tab-h) + var(--safe-b) + 12px); }
.shell.no-tabbar { padding-bottom: 24px; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bar);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: calc(8px + var(--safe-t)) 8px 0; border-bottom: 1px solid var(--line);
}
.topbar-row { max-width: var(--col); margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 6px 8px; }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { margin: 0; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar.big .topbar-title h1 { font-size: 26px; }
.topbar-title small {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--edge); margin-bottom: 3px;
}

.seg-wrap { max-width: var(--col); margin: 0 auto; padding: 0 6px 8px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface); }
.seg-btn {
  flex: 1; min-height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--ink-2); -webkit-tap-highlight-color: transparent;
}
.seg-btn[aria-current="page"] { background: var(--surface-2); color: var(--ink); }

.page { max-width: var(--col); margin: 0 auto; padding: 16px 14px 0; }
.page.narrow { max-width: 440px; }
.loading { min-height: 60dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ink-3); }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--edge); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- tabbar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bar-fort);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); padding: 4px 4px calc(4px + var(--safe-b));
}
.tabbar-row { max-width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; color: var(--ink-3); font-size: 10px; font-weight: 600;
  -webkit-tap-highlight-color: transparent; border-radius: 10px;
}
.tab .tab-ic { display: flex; }
.tab svg { width: 23px; height: 23px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .tab-ic { color: var(--edge); }
.tab-add .tab-ic {
  width: 34px; height: 34px; border-radius: 11px; background: var(--edge); color: var(--edge-ink);
  align-items: center; justify-content: center; margin-bottom: -2px;
}
.tab-add { color: var(--ink-2); }

/* -------------------------------------------------------------- groupes */
.group-list { display: grid; gap: 10px; }
/* créer un groupe : une barre pleine largeur, un simple contour et un + au centre */
.ajout-bar {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; border-radius: var(--r); border: 1px solid var(--line);
  color: var(--ink-2); -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, color .15s ease, transform .12s var(--ease-out);
}
.ajout-bar:active { transform: scale(.99); border-color: var(--edge); color: var(--edge); }
@media (hover: hover) { .ajout-bar:hover { border-color: var(--edge); color: var(--edge); } }
.ajout-plus { display: flex; }
.ajout-plus svg { width: 24px; height: 24px; }
.group-card {
  display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r);
  background: var(--surface); -webkit-tap-highlight-color: transparent;
}
.group-card:active { background: var(--surface-2); }
.group-cover { width: 68px; height: 68px; border-radius: 11px; overflow: hidden; flex: none; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.group-cover img { width: 100%; height: 100%; object-fit: cover; }
.group-ph { color: var(--ink-3); display: flex; }
.group-ph svg { width: 24px; height: 24px; }
.group-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.group-txt strong { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-sub { color: var(--ink-2); font-size: 13px; }
.group-when { color: var(--ink-3); font-size: 12px; }
.group-go { color: var(--ink-3); display: flex; }
.group-go svg { width: 20px; height: 20px; }

/* --------------------------------------------------- le fil (style réseau) */
.feed { max-width: var(--col); margin: 0 auto; }
/* Pas de trait entre les posts : c'est l'espace qui les sépare.
   PAS de `content-visibility` ici : les posts hors écran retomberaient à une
   hauteur estimée quand l'écran est mis de côté, et la position restaurée au
   retour ne tomberait plus au même endroit (la vidéo se retrouvait ailleurs).
   La continuité passe avant l'économie de calcul — le fil compte des dizaines
   de posts, pas des milliers. */
.post { padding-bottom: 4px; margin-bottom: 26px; }
.post:last-child { margin-bottom: 8px; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.post-who { flex: 1; min-width: 0; display: grid; }
.post-who strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-who small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-seq { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--edge); }
.post-media { position: relative; background: var(--media); overflow: hidden; }
.post-media img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
@media (min-width: 600px) { .post-media { border-radius: var(--r); } }

.post-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px 2px; }
.act {
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 8px;
  color: var(--ink); font-size: 13px; font-weight: 600; -webkit-tap-highlight-color: transparent;
}
.act svg { width: 24px; height: 24px; transition: transform .15s ease; }
.act:active svg { transform: scale(1.2); }
.act .n { color: var(--ink-2); }
.like[aria-pressed="true"] { color: var(--like); }
.like[aria-pressed="true"] svg { fill: currentColor; }
.spacer { flex: 1; }
.post-likes { padding: 0 14px; font-size: 14px; font-weight: 600; }
.post-likes:empty { display: none; }
.post-caption { margin: 4px 0 0; padding: 0 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.post-caption strong { font-weight: 600; margin-right: 4px; }
.post-more { display: block; padding: 6px 14px 0; color: var(--ink-3); font-size: 14px; text-align: left; }
.post-more.quiet { color: var(--ink-3); opacity: .75; font-size: 13px; }

/* les derniers commentaires, lisibles sans ouvrir quoi que ce soit */
.post-cmts { display: grid; gap: 2px; }
.post-cmt {
  margin: 0; padding: 2px 14px 0; font-size: 14px; line-height: 1.4; color: var(--ink);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-cmt strong { font-weight: 600; margin-right: 4px; }

/* ------------------------------------------------------- la page d'un post */
.big-media { background: var(--media); max-height: 62dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.big-media img { width: 100%; height: auto; max-height: 62dvh; object-fit: contain; cursor: zoom-in; }
.big-media .vp { height: auto; aspect-ratio: var(--vp-ratio, 1); max-height: 62dvh; }
.big-media .vp video { object-fit: contain; }
.big-page { padding-bottom: 28px; }
.faits {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 22px;
  padding: 14px; border-radius: var(--r); background: var(--surface); font-size: 14px;
}
.faits dt { color: var(--ink-3); }
.faits dd { margin: 0; text-align: right; }
.big-cmts-titre { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.big-cmts { display: grid; gap: 2px; margin-bottom: 12px; }
.big-cmts-vide { color: var(--ink-3); font-size: 14px; margin: 4px 0 12px; }
/* le champ reste sous la main sans recouvrir le dernier commentaire */
.big-form {
  position: sticky; bottom: 0; z-index: 5; margin-top: 8px;
  background: var(--bg); padding: 10px 0 calc(10px + var(--safe-b)); border-top: 1px solid var(--line);
}
.post-time { padding: 4px 14px 8px; color: var(--ink-3); font-size: 12px; }

/* ---------------------------------------------------------- lecteur vidéo */
/* Pendant la lecture, l'image est nue : aucune commande, aucune barre. Une
   touche les révèle 2,5 s. Rien n'a de cadre : du blanc posé sur l'image. */
.vp { position: relative; width: 100%; height: 100%; background: #000 center / cover no-repeat; }
.vp video { width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; transition: opacity .12s linear; }
.vp.ready video { opacity: 1; }

/* les commandes, en bloc : visibles seulement quand `show` (ou en pause) */
.vp-play, .vp-sound, .vp-time, .vp-scrub {
  opacity: 0; pointer-events: none;
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
/* `en-pause` (et pas « pas en lecture ») : une vidéo qui n'a pas encore démarré
   ne montre rien du tout, elle se lance et c'est tout. */
.vp.show .vp-play, .vp.show .vp-sound, .vp.show .vp-time, .vp.show .vp-scrub,
.vp.en-pause .vp-play, .vp.en-pause .vp-sound, .vp.en-pause .vp-time, .vp.en-pause .vp-scrub {
  opacity: 1; pointer-events: auto;
}
.vp.show .vp-play, .vp.en-pause .vp-play { transform: scale(1); }
.vp-sound { transform: translateY(-4px); }
.vp-time { transform: translateY(4px); }
.vp.show .vp-sound, .vp.en-pause .vp-sound,
.vp.show .vp-time, .vp.en-pause .vp-time { transform: none; }

.vp-play {
  position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.65));
  -webkit-tap-highlight-color: transparent;
  transform: scale(.82);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
.vp-play svg { width: 38px; height: 38px; }
.vp-play:active { transform: scale(.72); }

.vp-sound {
  position: absolute; left: 6px; top: 6px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.7));
  -webkit-tap-highlight-color: transparent;
}
.vp-sound:active { transform: scale(.88); }
.vp-sound svg { width: 19px; height: 19px; }

.vp-time {
  position: absolute; right: 9px; bottom: 9px; color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.8));
}

/* la barre : collée au bas de l'image, pleine largeur, sans repère de position */
.vp-scrub {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  display: flex; align-items: flex-end; cursor: pointer; touch-action: none;
}
.vp-rail { position: relative; width: 100%; height: 3px; }
.vp-bars { position: absolute; inset: 0; overflow: hidden; background: rgba(255,255,255,.25); }
.vp-bars u, .vp-bars i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; }
.vp-bars u { background: rgba(255,255,255,.2); }
.vp-bars i { background: var(--edge); }
.vp.scrubbing .vp-rail { height: 5px; }

/* le cœur du double-tap */
.tap-coeur {
  position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; color: #fff;
  display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
  animation: coeur-tap .95s var(--ease-out) forwards;
}
.tap-coeur svg { width: 96px; height: 96px; fill: currentColor; }
@keyframes coeur-tap {
  0% { opacity: 0; transform: scale(.55); }
  22% { opacity: .96; transform: scale(1.06); }
  48% { opacity: .96; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18) translateY(-14px); }
}

/* ----------------------------------------------------------------- mur */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 900px; margin: 0 auto; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--media); cursor: zoom-in; -webkit-tap-highlight-color: transparent; border: 0; display: block; width: 100%; padding: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile .seq { position: absolute; left: 6px; bottom: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--edge); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.tile .vid { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.tile .novis { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }

/* -------------------------------------------------------------- invités */
.invite-card { background: var(--surface); border-radius: var(--r); padding: 14px; margin-bottom: 18px; }
.invite-card p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 16px; padding-left: 18px; border-left: 1px dashed var(--line); }
.tree li { position: relative; }
.tree ul li::before { content: ""; position: absolute; left: -18px; top: 27px; width: 12px; border-top: 1px dashed var(--line); }
.guest { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 0; width: 100%; text-align: left; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.guest .g-name { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guest .g-sub { color: var(--ink-3); font-size: 13px; }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.tag.host { color: var(--edge); background: rgba(242,180,65,.14); }
.tag.me { color: var(--edge-ink); background: var(--edge); }
.guest .g-edit { margin-left: auto; color: var(--ink-3); display: flex; }
.guest .g-edit svg { width: 18px; height: 18px; }

/* -------------------------------------------------------- compte/réglages */
.me-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.me-head strong { font-size: 26px; display: block; margin-bottom: 4px; }
.rows { background: var(--surface); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.rows-title { margin: 0; padding: 12px 14px 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* `.row` appartient aux listes de réglages : sans le préfixe, son trait
   s'appliquait aussi à la ligne du bas de la visionneuse — invisible sur fond
   sombre, mais bien visible en mode clair (la « barre blanche »). */
.rows .row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; min-height: 56px; border-top: 1px solid var(--line); -webkit-tap-highlight-color: transparent; }
.rows .rows-title + .row, .rows > .row:first-child, .rows > .switch-row:first-child { border-top: 0; }
.rows .row:active { background: var(--surface-2); }
.rows .row-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-txt strong { font-size: 15px; font-weight: 600; }
.row-txt small { color: var(--ink-3); font-size: 13px; }
.rows .row-go { color: var(--ink-3); display: flex; }
.row-go svg { width: 18px; height: 18px; }
.rows .row-bloc { display: block; }
.rows .row-bloc .row-txt { display: block; margin-bottom: 10px; }
.theme-seg { background: var(--bg); }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 60px; border-top: 1px solid var(--line); cursor: pointer; }
.switch-row > span:first-child { flex: 1; display: grid; gap: 2px; }
.switch-row strong { font-size: 15px; font-weight: 600; }
.switch-row small { color: var(--ink-3); font-size: 13px; }
.switch { position: relative; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { display: block; width: 48px; height: 28px; border-radius: 999px; background: var(--surface-2); transition: background .15s ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-3); transition: transform .15s ease, background .15s ease; }
.switch input:checked + .switch-track { background: rgba(242,180,65,.3); }
.switch input:checked + .switch-track::after { transform: translateX(20px); background: var(--edge); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--edge); outline-offset: 2px; }

/* ---------------------------------------------------------------- sheets */
#layer:empty { display: none; }
.scrim {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim);
  opacity: 0; transition: opacity .26s var(--ease);
  /* --kb : hauteur du clavier, mesurée par suitLeClavier() */
  padding-bottom: var(--kb, 0px);
}
.scrim.open { opacity: var(--scrim-fade, 1); }
.sheet {
  width: 100%; max-width: 560px; background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 8px 18px calc(20px + var(--safe-b)); overflow: auto;
  max-height: calc(88dvh - var(--kb, 0px));
  transform: translateY(100%); transition: transform .34s var(--ease);
  will-change: transform; touch-action: pan-y; overscroll-behavior: contain;
  box-shadow: var(--ombre-feuille);
}
/* quand le clavier est là, la feuille colle au champ : pas de marge basse en plus */
.scrim[style*="--kb"] .sheet { padding-bottom: 10px; }
.scrim.open .sheet { transform: none; }
.sheet-grip {
  display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line);
  margin: 4px auto 14px; transition: background .15s ease;
}
.sheet:active .sheet-grip { background: var(--ink-3); }
.sheet h2 { margin: 0 0 8px; font-size: 21px; }
.sheet > p { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.sheet .actions { display: flex; gap: 10px; margin-top: 14px; }
.sheet .actions .btn { flex: 1; }
.sheet-tall { display: flex; flex-direction: column; height: calc(82dvh - var(--kb, 0px)); min-height: 240px; }
@media (min-width: 700px) {
  .scrim { align-items: center; }
  .sheet { border-radius: 18px; transform: translateY(16px) scale(.98); }
  .scrim.open .sheet { transform: none; }
}

.pick-list { display: grid; gap: 6px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-align: left; width: 100%; }
.pick:active { background: var(--surface-2); }
.pick-cover { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.pick-cover img { width: 100%; height: 100%; object-fit: cover; }
.pick-ph { color: var(--ink-3); display: flex; }
.pick-ph svg { width: 20px; height: 20px; }
.pick > span:last-child { display: grid; gap: 2px; }
.pick strong { font-size: 16px; }
.pick small { color: var(--ink-3); font-size: 13px; }

/* ---------------------------------------------------------- commentaires */
.cmt-list {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 4px; align-content: start;
  margin: 0 -4px; padding: 0 4px 6px;
  /* le doigt ne doit pas emporter la page derrière une fois la liste au bout */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.cmt { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.cmt-body { flex: 1; min-width: 0; }
.cmt-body strong { font-weight: 600; font-size: 14px; }
.cmt-body span { font-size: 14px; overflow-wrap: anywhere; }
.cmt-body small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.cmt-del { color: var(--ink-3); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex: none; }
.cmt-del svg { width: 15px; height: 15px; }
.cmt-empty, .cmt-load { color: var(--ink-3); font-size: 14px; padding: 24px 0; text-align: center; }
/* pas de trait sous la liste : un dégradé la laisse s'effacer sous le champ */
.cmt-form {
  display: flex; gap: 8px; align-items: center; padding-top: 12px; margin-top: 2px;
  position: relative; flex: none; background: var(--surface);
}
.cmt-form::before {
  content: ""; position: absolute; left: -18px; right: -18px; bottom: 100%; height: 22px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--surface));
}
.cmt-input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.cmt-input:focus { outline: none; border-color: var(--edge); }
.cmt-send { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--edge); color: var(--edge-ink); display: flex; align-items: center; justify-content: center; }
.cmt-send svg { width: 19px; height: 19px; }
.cmt-send[disabled] { opacity: .5; }

/* envoi */
.upload-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-bottom: 14px; max-height: 30vh; overflow: auto; }
.upload-list .th { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--bg); position: relative; }
.upload-list .th img { width: 100%; height: 100%; object-fit: cover; }
.upload-list .th .st { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(21,19,26,.55); color: #fff; font-family: var(--mono); font-size: 11px; }
.upload-list .th .st svg { width: 20px; height: 20px; }
.upload-list .th.done .st { background: transparent; color: var(--ok); }
.upload-list .th.fail .st { background: rgba(120,20,30,.6); }
.progress { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; margin: 10px 0 6px; }
.progress i { display: block; height: 100%; width: 100%; background: var(--edge); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.progress-line { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ------------------------------------------------------------------ viewer */
.viewer {
  position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column;
  min-height: 100dvh; touch-action: pan-y;
  opacity: 0; transform: scale(.96); transition: opacity .22s var(--ease-out), transform .28s var(--ease-out);
}
/* pendant le plein écran, la page elle-même passe au noir : sur téléphone la
   zone visible peut dépasser la hauteur de mise en page, et on voyait alors
   une bande claire sous la visionneuse en mode clair. */
html.plein-ecran, html.plein-ecran body { background: #000; }
.viewer.open { opacity: 1; transform: none; }
/* En plein écran, le lecteur prend la forme de la vidéo (et pas tout l'écran) :
   sa barre et son temps restent ainsi sur l'image, jamais sur les commandes
   du bas. Le rembourrage réserve la place des deux barres de la visionneuse. */
.viewer-slide { padding: calc(52px + var(--safe-t)) 0 calc(104px + var(--safe-b)); }
.viewer-slide .vp {
  width: 100%; height: auto; max-height: 100%; aspect-ratio: var(--vp-ratio, 1);
  background-size: contain; background-color: #000;
}
.viewer-slide .vp video { object-fit: contain; }
/* le son descend sous la barre du haut quand la vidéo touche le bord */
.viewer-slide .vp-sound { top: 8px; left: 8px; }
.viewer-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 10px 8px; background: linear-gradient(rgba(0,0,0,.6), transparent); transition: opacity .2s ease; }
/* centré : à gauche, il se cognait au bouton du son du lecteur */
.viewer-top .counter { flex: 1; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--edge); }
.viewer-top .iconbtn:first-child { order: -1; }
.viewer-stage { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.viewer-track { position: absolute; inset: 0; display: flex; will-change: transform; }
.viewer-slide { flex: none; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.viewer-slide img, .viewer-slide video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-bot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 14px calc(12px + var(--safe-b)); background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; transition: opacity .2s ease; }
.viewer-bot .row { display: flex; align-items: center; gap: 10px; }
.viewer-bot .who { font-weight: 600; }
.viewer-bot .when { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.viewer-bot .caption { margin: 6px 0 4px; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-bot .tools { display: flex; gap: 4px; align-items: center; }
.viewer-bot .act { color: #fff; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: none; align-items: center; justify-content: center; transition: opacity .2s ease; }
.viewer-nav svg { width: 22px; height: 22px; }
.viewer-nav.prev { left: 12px; } .viewer-nav.next { right: 12px; }
@media (hover: hover) and (min-width: 700px) { .viewer-nav { display: flex; } }

/* ---------------------------------------------------------------- rejoindre */
.join { max-width: 420px; margin: 0 auto; padding: calc(40px + var(--safe-t)) 20px 40px; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
.join .who { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--ink-2); }
.join h1 { font-size: clamp(32px, 9vw, 44px); margin: 0 0 8px; }
.join .stats { color: var(--ink-3); font-size: 14px; margin: 0 0 28px; }
.closed { text-align: center; }
.closed p { color: var(--ink-2); }

/* ------------------------------------------------------------------ divers */
.empty { text-align: center; padding: 56px 20px; color: var(--ink-2); }
.empty-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); align-items: center; justify-content: center; color: var(--edge); margin-bottom: 16px; }
.empty-ic svg { width: 26px; height: 26px; }
.empty h3 { font-size: 23px; margin: 0 0 8px; color: var(--ink); }
.empty p { margin: 0 auto 20px; max-width: 34ch; }
#toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 14px); transform: translate(-50%, 12px); z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.newpill { position: sticky; top: calc(78px + var(--safe-t)); z-index: 15; display: flex; justify-content: center; margin: 10px 0; }
.newpill .btn { min-height: 36px; font-size: 13px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }

/* -------------------------------------------------- petites animations */
/* l'écran arrive au lieu d'apparaître */
#main { animation: screen-in .3s var(--ease-out) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* l'écran arrivé par un glissement ne rejoue pas l'animation d'entrée */
#main.sans-anim { animation: none; }

/* Le glissement entre onglets : une piste de trois panneaux côte à côte, dont
   les voisins ne sont construits qu'au début du geste. */
#main { min-height: 62dvh; }             /* le geste doit marcher aussi dans le vide */
.pager { overflow: hidden; }
.pager-piste { display: flex; will-change: transform; }
.pager-panneau { flex: 0 0 100%; min-width: 100%; }

/* les cartes du fil se posent l'une après l'autre (les 6 premières seulement :
   au-delà on ne les voit pas arriver, et animer 40 nœuds coûte cher) */
.feed .post { animation: post-in .38s var(--ease-out) both; }
.feed .post:nth-child(1) { animation-delay: .02s; }
.feed .post:nth-child(2) { animation-delay: .06s; }
.feed .post:nth-child(3) { animation-delay: .1s; }
.feed .post:nth-child(4) { animation-delay: .14s; }
.feed .post:nth-child(5) { animation-delay: .18s; }
.feed .post:nth-child(n+6) { animation: none; }
@keyframes post-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.group-card { animation: post-in .34s var(--ease-out) both; }
.group-list .group-card:nth-child(2) { animation-delay: .05s; }
.group-list .group-card:nth-child(3) { animation-delay: .1s; }
.group-list .group-card:nth-child(n+4) { animation-delay: .14s; }

/* le cœur qui gonfle quand on aime */
.like[aria-pressed="true"] svg { animation: pop .32s var(--ease-out); }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }

/* un commentaire qui arrive glisse dans la liste */
.cmt { animation: cmt-in .26s var(--ease-out) both; }
@keyframes cmt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tile { transition: transform .18s var(--ease-out), opacity .18s ease; }
.tile:active { transform: scale(.96); }
.group-card:active { transform: scale(.99); }
.row, .pick, .group-card { transition: background .15s ease, transform .15s var(--ease-out); }
.tab { transition: color .18s ease; }
.tab:active .tab-ic { transform: scale(.9); }
.tab .tab-ic { transition: transform .18s var(--ease-out); }
.seg-btn { transition: background .2s var(--ease), color .2s ease; }
.newpill { animation: post-in .3s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}