/* ============================================================
   L'Îlot — thème « boudoir » : velours prune, rose poudré, or,
   dentelle et pétales. Pensé pour un rendez-vous du soir à deux.
   ============================================================ */
:root {
  --bg: #1a0713;
  --bg2: #2a0d20;
  --surface: #35132a;
  --surface2: #431a35;
  --line: #5c2547;
  --ink: #ffeef6;
  --ink2: #d7a9c4;
  --rose: #ff5c8a;
  --rose-soft: #ff9ab5;
  --gold: #f2c66d;
  --plum: #a34d86;
  --ok: #7fd6a6;
  --r: 18px;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); line-height: 1.45;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(255,92,138,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(163,77,134,.25), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 60%) fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; font-family: var(--serif); font-weight: 700; }
.muted { color: var(--ink2); }
.center { text-align: center; }
.small { font-size: .82rem; }
.hint { font-size: .78rem; color: var(--ink2); margin: .15rem 0 .5rem; font-style: italic; }

/* ---------- Pétales flottants (décor discret) ---------- */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.petal { position: absolute; top: -6vh; font-size: 1rem; opacity: .35;
  animation: fall linear infinite; filter: blur(.2px); }
@keyframes fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10% { opacity: .4; }
  100% { transform: translateY(110vh) rotate(320deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .petal { display: none; } }

/* ---------- Connexion ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.2rem; }
.login-wrap { width: 100%; max-width: 420px; position: relative; z-index: 1; }
.brand { text-align: center; margin-bottom: 1.2rem; }
.brand-ico { font-size: 3.4rem; animation: beat 3.2s ease-in-out infinite; }
.brand h1 { font-size: 2.4rem; letter-spacing: .06em; color: var(--ink);
  text-shadow: 0 2px 18px rgba(255,92,138,.5); }
.brand-sub { color: var(--ink2); margin: .2rem 0 0; font-style: italic; }
@keyframes beat { 0%,100% { transform: scale(1) } 12% { transform: scale(1.14) } 24% { transform: scale(1) } 36% { transform: scale(1.09) } }
.tabs { display: flex; gap: .4rem; margin-bottom: .9rem; }
.tab { flex: 1; background: transparent; border: 1px solid var(--line); color: var(--ink2);
  padding: .55rem; border-radius: 999px; cursor: pointer; font-size: .9rem; }
.tab-on { background: linear-gradient(135deg, rgba(255,92,138,.25), rgba(242,198,109,.16));
  color: var(--ink); border-color: var(--rose); }
.msg { color: var(--gold); min-height: 1.2em; margin: .6rem 0 0; font-size: .88rem; }
.foot { text-align: center; color: var(--ink2); font-size: .76rem; margin-top: 1rem; }

/* ---------- Barre du haut ---------- */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(26,7,19,.9);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: .55rem;
  padding: .55rem .8rem calc(.55rem + env(safe-area-inset-top, 0px)); position: relative; }
.av-btn { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--rose); background: linear-gradient(135deg, var(--surface2), var(--plum));
  font-size: 1.25rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(255,92,138,.35); }
.tb-title { flex: 1; min-width: 0; cursor: pointer; line-height: 1.1; }
.tb-name { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .03em; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v170 — la barre etait bridee a 46vw sur une seule ligne : le nom de la traversee
   mangeait tout et l'echeance disparaissait derriere les points de suspension. On lui
   rend toute la largeur disponible et on repartit sur DEUX lignes — le nom, puis les
   chiffres. Le conteneur est deja en flex:1 avec min-width:0, il suffit de lacher la
   bride. */
.tb-sub { font-size: .72rem; color: var(--gold); display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-s1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-s2 { display: block; font-size: .68rem; color: var(--ink2); letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-s2 b { color: var(--gold); font-weight: 600; }
.bell-btn, .menu-btn { position: relative; background: transparent; border: none; color: var(--ink);
  font-size: 1.2rem; cursor: pointer; padding: .3rem; }
.bell-dot { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--rose); color: #2a0d20; border-radius: 999px; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(255,92,138,.8);
  animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.18) } }
.menu-pop { position: absolute; right: .6rem; top: 100%; background: var(--surface2);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; width: min(93vw, 370px); z-index: 70; }
.menu-pop > button, .menu-pop > a { display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--ink); padding: .7rem .9rem; font-size: .92rem; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05); }
.menu-pop > button:last-child, .menu-pop > a:last-child { border-bottom: none; }
.menu-pop > button:hover, .menu-pop > a:hover { background: rgba(255,92,138,.14); }
.menu-pop .danger { color: var(--rose); }

/* ---------- Structure ---------- */
.main { max-width: 680px; margin: 0 auto; padding: 1rem .9rem 5rem; position: relative; z-index: 1; }
.main > * { animation: rise .34s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.card { background: linear-gradient(160deg, var(--surface), rgba(53,19,42,.86));
  border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.05rem;
  margin-bottom: .9rem; box-shadow: var(--shadow); position: relative; overflow: hidden; }
/* liseré doré facon dentelle */
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--rose), transparent); opacity: .5; }
.card-soft { background: var(--surface2); }
.card-hero { text-align: center; }
/* v37 : sans ce style, les h2 héritaient des marges navigateur (~1.5em au-dessus) —
   c'est ce qui rendait les vignettes Réglages / Journal / Bienvenue si hautes. */
.card h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .55rem;
  line-height: 1.3; overflow-wrap: anywhere; }
.sec-title { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .6rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.link-btn { margin-left: auto; background: none; border: none; color: var(--gold);
  font-size: .76rem; cursor: pointer; text-decoration: underline;
  white-space: nowrap; flex: 0 0 auto; padding: 0; }
/* v37 : ligne pleine -> le bouton d'aide descend PROPREMENT à droite au lieu de se
   couper au milieu de son texte ; l'interligne du repli reste serré. */
.sec-title { row-gap: .15rem; }

label { display: block; font-size: .8rem; color: var(--ink2); margin: .7rem 0 .25rem; letter-spacing: .02em; }
input, select, textarea { width: 100%; background: rgba(20,5,15,.7); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: .65rem .75rem; font-size: 1rem;
  font-family: inherit; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; }

.btn-main, .btn-ghost, .btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: 999px; padding: .75rem 1.1rem; font-size: .95rem; font-weight: 700;
  cursor: pointer; border: 1px solid transparent; margin-top: .8rem; width: 100%;
}
.btn-main { background: linear-gradient(135deg, var(--rose), #ff8fb0 55%, var(--gold));
  color: #37091f; box-shadow: 0 8px 24px rgba(255,92,138,.35); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-soft { background: var(--surface2); color: var(--ink); border-color: var(--line); }
.btn-main:active, .btn-ghost:active, .btn-soft:active { transform: scale(.98); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.row-2 { display: flex; gap: .5rem; }
.row-2 > * { flex: 1; }

/* ---------- Accueil ---------- */
.hero { padding: .3rem 0 .6rem; }
.hero-hearts { font-size: 2.6rem; animation: beat 3.4s ease-in-out infinite; }
.hero-title { font-family: var(--serif); font-size: 1.55rem; margin-top: .2rem; }
.hero-sub { color: var(--ink2); font-size: .9rem; }

/* Le parcours guidé */
.steps { display: grid; gap: .5rem; }
.step { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(20,5,15,.4); }
.step-ico { font-size: 1.3rem; flex: 0 0 auto; }
.step-txt { flex: 1; min-width: 0; font-size: .9rem; }
.step-badge { font-size: .68rem; padding: .08rem .45rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.step-go { flex: 0 0 auto; align-self: center; background: linear-gradient(135deg, var(--rose), var(--gold));
  color: #37091f; border: none; border-radius: 999px; padding: .4rem .7rem; font-size: .78rem;
  font-weight: 800; cursor: pointer; }
.step-ok { opacity: .62; }
.step-ok .step-badge { color: var(--ok); border-color: var(--ok); }
.step-todo { border-color: var(--rose); background: rgba(255,92,138,.12);
  box-shadow: 0 0 18px rgba(255,92,138,.16); }
.step-todo .step-badge { color: var(--rose); border-color: var(--rose); }
.step-wait .step-badge { color: var(--gold); border-color: var(--gold); }

.gauge { margin: .5rem 0 .3rem; }
.gauge-bar { height: 15px; border-radius: 999px; background: rgba(20,5,15,.75);
  border: 1px solid var(--line); overflow: hidden; }
.gauge-fill { height: 100%; background: linear-gradient(90deg, var(--plum), var(--rose), var(--gold));
  transition: width .9s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 14px rgba(255,92,138,.6); }
.gauge-legend { display: flex; justify-content: space-between; font-size: .74rem; color: var(--ink2); margin-top: .3rem; }
.levels { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.level { flex: 1 1 46%; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .6rem;
  font-size: .78rem; background: rgba(20,5,15,.45); }
.level.on { border-color: var(--gold); background: rgba(242,198,109,.14); box-shadow: 0 0 14px rgba(242,198,109,.18); }
.level b { display: block; font-size: .85rem; }
.reward { margin-top: .6rem; font-size: .85rem; color: var(--gold); }

/* ---------- Mode d'emploi ---------- */
.howto { display: grid; gap: .6rem; margin: .6rem 0; text-align: left; }
.howto-step { display: flex; gap: .6rem; align-items: flex-start; }
.howto-step > span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--gold)); color: #37091f;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; }

/* ---------- Question ---------- */
.qhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .78rem; color: var(--ink2); flex-wrap: wrap; }
.qnum { background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem; }
.qfam { color: var(--gold); }
.qlabel { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; margin: .8rem 0 .2rem; }
.qsplit { margin-top: 1rem; padding: .7rem .75rem; border-radius: 14px; border: 1px solid var(--line); }
.qsplit-self { background: rgba(163,77,134,.16); border-color: var(--plum); }
.qsplit-pred { background: rgba(255,92,138,.12); border-color: var(--rose); }
.qsplit h4 { margin: 0 0 .1rem; font-size: .88rem; font-weight: 700; }
.opts { display: grid; gap: .45rem; }
.opt { text-align: left; background: rgba(20,5,15,.55); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: .7rem .85rem; cursor: pointer; font-size: .95rem; width: 100%; }
.opt.sel-self { border-color: var(--plum); background: rgba(163,77,134,.4); }
.opt.sel-pred { border-color: var(--rose); background: rgba(255,92,138,.34); }
.scale { display: flex; gap: .35rem; }
.scale button { flex: 1; background: rgba(20,5,15,.55); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: .7rem 0; font-size: 1rem; cursor: pointer; }
.scale button.sel-self { border-color: var(--plum); background: rgba(163,77,134,.4); }
.scale button.sel-pred { border-color: var(--rose); background: rgba(255,92,138,.34); }
.pill { display: inline-block; font-size: .72rem; padding: .12rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink2); }
.pill-myst { background: rgba(242,198,109,.18); border-color: var(--gold); color: var(--gold); }
/* v90 — les pastilles deviennent des boutons : cible de 26 px pour le doigt, point
   de 10 px à l'œil. Or = répondue, rose = celle qu'on regarde. */
.q-nav { display: flex; align-items: center; justify-content: center; gap: .2rem; margin: .8rem 0 .2rem; }
.q-arrow { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; line-height: 1; background: rgba(20,5,15,.55);
  border: 1px solid var(--line); color: var(--ink2); }
.q-arrow:disabled { opacity: .25; cursor: default; }
.q-arrow:not(:disabled):active { border-color: var(--gold); color: var(--gold); }
.progress-dots { display: flex; gap: .1rem; justify-content: center; flex-wrap: wrap; }
.dot { width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--line); transition: transform .2s ease, background .2s ease; }
.dot.done::after { background: var(--gold); }
.dot.on::after { background: var(--rose); box-shadow: 0 0 9px var(--rose); transform: scale(1.35); }
.dot.done.on::after { background: var(--gold); box-shadow: 0 0 9px var(--gold); }
.dot:active::after { transform: scale(1.5); }

/* ---------- Révélation ---------- */
.rev-q { border-bottom: 1px dashed var(--line); padding: .85rem 0; }
.rev-q:last-child { border-bottom: none; }
.rev-label { font-family: var(--serif); font-weight: 700; margin-bottom: .45rem; }
.rev-pair { display: flex; gap: .5rem; }
.rev-cell { flex: 1; background: rgba(20,5,15,.55); border: 1px solid var(--line); border-radius: 12px;
  padding: .5rem .6rem; font-size: .85rem; }
.rev-cell .who { font-size: .72rem; color: var(--ink2); display: block; }
.rev-hit { border-color: var(--ok); background: rgba(127,214,166,.14); }
.rev-star { color: var(--gold); font-size: .8rem; margin-top: .35rem; display: block; }
.score-line { display: flex; justify-content: space-around; text-align: center; margin: .7rem 0; }
.score-line b { display: block; font-size: 2rem; color: var(--gold); font-family: var(--serif); }
.kiff { background: linear-gradient(135deg, rgba(255,92,138,.2), rgba(242,198,109,.12));
  border: 1px solid var(--rose); border-radius: 14px; padding: .8rem; margin-top: .6rem; }
.gift { background: rgba(127,214,166,.12); border: 1px solid var(--ok); border-radius: 14px;
  padding: .8rem; margin-top: .6rem; }
.gage { background: rgba(242,198,109,.12); border: 1px solid var(--gold); border-radius: 14px;
  padding: .8rem; margin-top: .6rem; }

/* ---------- Divers ---------- */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.chip { background: rgba(20,5,15,.55); border: 1px solid var(--line); color: var(--ink2);
  border-radius: 999px; padding: .35rem .7rem; font-size: .8rem; cursor: pointer; text-align: left; }
.chip.on { border-color: var(--rose); color: var(--ink); background: rgba(255,92,138,.2); }
.av-chip { font-size: 1.3rem; padding: .3rem .5rem; }
.list-item { display: flex; align-items: center; gap: .5rem; padding: .55rem 0;
  border-bottom: 1px dashed var(--line); font-size: .92rem; }
.list-item:last-child { border-bottom: none; }
.list-item .del { margin-left: auto; background: none; border: none; color: var(--rose);
  cursor: pointer; font-size: 1rem; }
.used { opacity: .45; text-decoration: line-through; }
/* 🔑 v165 — les anciens codes pouvaient contenir O/0 et I/1/L. Une police
 * monospace avec zéro barré rend enfin ces caractères réellement distinguables. */
.join-code-block { text-align: center; margin: .55rem 0 .8rem; }
.code-big { font-size: 2.1rem; text-align: center; letter-spacing: .28em; color: var(--gold);
  font-family: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-variant-numeric: slashed-zero tabular-nums; font-feature-settings: 'zero' 1;
  font-weight: 800; margin: .55rem 0 .3rem; text-shadow: 0 2px 16px rgba(242,198,109,.5); }
.join-code-hint { margin: .15rem auto .45rem; max-width: 30rem; color: var(--ink2); font-size: .76rem; line-height: 1.35; }
.btn-code-copy { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .42rem .75rem;
  background: rgba(242,198,109,.09); color: var(--ink); cursor: pointer; font: inherit; font-size: .8rem; }
.btn-code-copy:hover { border-color: var(--gold); background: rgba(242,198,109,.16); }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(160%);
  background: var(--surface2); border: 1px solid var(--rose); color: var(--ink);
  padding: .7rem 1rem; border-radius: 999px; box-shadow: var(--shadow); font-size: .88rem;
  transition: transform .3s cubic-bezier(.22,1,.36,1); z-index: 300; max-width: 90vw; text-align: center; }
.toast.on { transform: translateX(-50%) translateY(0); }
.toast.err { border-color: var(--gold); }
.modal-back { position: fixed; inset: 0; background: rgba(12,2,9,.78); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(3px); }
.modal { background: linear-gradient(160deg, var(--surface), var(--bg2));
  border: 1px solid var(--line); border-top: 2px solid var(--rose);
  border-radius: 22px 22px 0 0; width: 100%; max-width: 560px; padding: 1.1rem 1.1rem 1.7rem;
  max-height: 88vh; overflow-y: auto; animation: up .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes up { from { transform: translateY(34px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (min-width: 600px) { .modal-back { align-items: center; } .modal { border-radius: 22px; } }
.waiting { text-align: center; padding: 1.2rem 0; }
.waiting .big { font-size: 2.8rem; animation: beat 3.4s ease-in-out infinite; }
.sep { height: 1px; margin: .9rem 0;
  background: linear-gradient(90deg, transparent, var(--line), var(--rose), var(--line), transparent); }

/* ---------- Album photo ---------- */
.dropzone { display: block; text-align: center; cursor: pointer; margin-top: .8rem;
  border: 2px dashed var(--rose); border-radius: 16px; padding: 1rem .8rem;
  background: rgba(255,92,138,.08); font-weight: 700; }
.dropzone:active { background: rgba(255,92,138,.18); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; }
.ph { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; aspect-ratio: 1; background: rgba(20,5,15,.6); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-on { border-color: var(--rose); box-shadow: 0 0 14px rgba(255,92,138,.5); }
.ph-badge { position: absolute; top: .2rem; right: .2rem; font-size: .95rem;
  background: rgba(0,0,0,.4); border-radius: 7px; padding: .05rem .2rem; }
.ph-who { position: absolute; bottom: .2rem; left: .25rem; font-size: .8rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.dl-zone { border: 1px solid var(--line); border-radius: 14px; padding: .1rem .7rem; margin-top: .5rem; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; }
.dl-row + .dl-row { border-top: 1px dashed var(--line); }
.dl-lbl { font-size: .85rem; line-height: 1.25; min-width: 0; }
.dl-btns { display: flex; gap: .3rem; flex: 0 0 auto; }
.btn-mini { background: var(--surface2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: .4rem .7rem; font-size: .82rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; }
.btn-mini:not(:disabled) { border-color: var(--rose); }
.btn-mini.danger:not(:disabled) { border-color: #ff6b81; color: #ff9ab5; }
.up-banner { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 250; background: rgba(42,13,32,.96);
  border: 1px solid var(--rose); color: var(--ink); border-radius: 999px; padding: .5rem 1rem;
  font-size: .85rem; box-shadow: var(--shadow); white-space: nowrap; max-width: 92vw; overflow: hidden; }
.up-x { margin-left: .5rem; border: none; background: rgba(255,255,255,.15); color: var(--ink);
  border-radius: 6px; padding: .05rem .35rem; cursor: pointer; }
.wd { animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } }

/* ---------- Onglets du bas ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex;
  background: rgba(26,7,19,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar button { flex: 1; background: none; border: none; color: var(--ink2); cursor: pointer;
  font-size: .64rem; padding: .45rem .1rem .5rem; display: flex; flex-direction: column;
  align-items: center; gap: .12rem; letter-spacing: .01em; }
.tabbar button span { font-size: 1.25rem; line-height: 1; }
.tabbar button.on { color: var(--rose); }
.tabbar button.on span { filter: drop-shadow(0 0 8px rgba(255,92,138,.8)); transform: translateY(-1px); }
.main { padding-bottom: 6.2rem; }

/* ---------- Cartes de saison ---------- */
/* v104 : l'icône passe DANS le titre — le contenu récupère toute la largeur, au lieu
   d'être repoussé dans une colonne étroite à droite. */
.season-card { display: block; }
.season-card .sc-body { min-width: 0; }
.sc-name { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.25;
  overflow-wrap: anywhere; }
.sc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .3rem 0 .35rem; }
.sc-badges .diff-badge { margin-left: 0; }
.sc-meta { display: flex; gap: .35rem .8rem; flex-wrap: wrap; font-size: .74rem; color: var(--ink2); }
.sc-meta b { color: var(--gold); }
.badge-live { background: rgba(255,92,138,.2); border: 1px solid var(--rose); color: var(--ink);
  border-radius: 999px; padding: .1rem .5rem; font-size: .68rem; font-weight: 800; }
.badge-arch { background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink2);
  border-radius: 999px; padding: .1rem .5rem; font-size: .68rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.stat-box { background: rgba(20,5,15,.5); border: 1px solid var(--line); border-radius: 14px;
  padding: .7rem; text-align: center; }
.stat-box b { display: block; font-size: 1.7rem; color: var(--gold); font-family: var(--serif); }
.stat-box span { font-size: .74rem; color: var(--ink2); }
.duo-card { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: .5rem; cursor: pointer; }
.duo-card.on { border-color: var(--rose); background: rgba(255,92,138,.12); }
.duo-card .dc-body { flex: 1; min-width: 0; font-size: .9rem; }
.ph-season { position: absolute; top: .2rem; left: .2rem; font-size: .6rem; max-width: 70%;
  background: rgba(0,0,0,.5); border-radius: 6px; padding: .05rem .3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Profil : préférences ---------- */
.pref-list { display: grid; gap: .35rem; margin: .6rem 0; }
.pref { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(20,5,15,.4);
  font-size: .88rem; color: var(--ink); cursor: pointer; }
.pref input { width: auto; flex: 0 0 auto; accent-color: var(--rose); transform: scale(1.15); }

/* ---------- Ambiances (thèmes) ---------- */
body[data-theme="nuit"] {
  --bg: #070f22; --bg2: #0d1a35; --surface: #142347; --surface2: #1c2f5c; --line: #2b4477;
  --ink: #eaf1ff; --ink2: #9fb4dd; --rose: #6aa9ff; --rose-soft: #9cc6ff; --gold: #ffd98a;
  --plum: #3f63b0; --ok: #7fd6a6;
}
body[data-theme="velours"] {
  --bg: #0c0708; --bg2: #150c0e; --surface: #1e1214; --surface2: #2a1a1d; --line: #4a2a30;
  --ink: #fdeff1; --ink2: #c0a0a6; --rose: #e01f45; --rose-soft: #ff6b81; --gold: #e8c37a;
  --plum: #7a2036; --ok: #6fc79a;
}
body[data-theme="aurore"] {
  --bg: #2a1622; --bg2: #3a1f2e; --surface: #4b2a3c; --surface2: #5d374b; --line: #7c4c64;
  --ink: #fff2f6; --ink2: #e2b9cb; --rose: #ff7fa3; --rose-soft: #ffc0d2; --gold: #ffcf9e;
  --plum: #b5688f; --ok: #86dcae;
}

/* ---------- Bandeaux d'appel et salon d'attente ---------- */
.alert { border-radius: 16px; padding: .85rem .9rem; margin: .2rem 0 .9rem;
  border: 1px solid var(--line); background: rgba(20,5,15,.45); text-align: left; }
/* Seul le TITRE (enfant direct) passe à la ligne ; les <b> du texte restent en ligne,
   sinon « Il te reste 5 question(s) » s'affichait sur trois lignes. */
.alert > b { display: block; margin-bottom: .2rem; font-size: 1rem; }
.alert .muted b { color: var(--ink); }
.alert .btn-main, .alert .btn-ghost { margin-top: .7rem; }
.alert-todo { border-color: var(--rose); background: rgba(255,92,138,.14);
  box-shadow: 0 0 22px rgba(255,92,138,.18); }
.alert-live { border-color: var(--gold); background: linear-gradient(135deg, rgba(242,198,109,.18), rgba(255,92,138,.16));
  box-shadow: 0 0 26px rgba(242,198,109,.22); animation: livePulse 2.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 20px rgba(242,198,109,.16) }
  50% { box-shadow: 0 0 34px rgba(242,198,109,.34) } }
.alert-wait { border-color: var(--plum); background: rgba(163,77,134,.16); }
.alert-ok { border-color: var(--ok); background: rgba(127,214,166,.12); }

.ready-list { display: grid; gap: .45rem; margin: .8rem 0; }
.ready-card { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(20,5,15,.45); text-align: left; }
.ready-card .rc-av { font-size: 1.5rem; }
.ready-card .rc-body { flex: 1; min-width: 0; font-size: .9rem; }
.ready-card .rc-state { font-size: 1.2rem; }
.rc-ready { border-color: var(--gold); background: rgba(242,198,109,.14); }
.rc-done { border-color: var(--plum); }
.rc-wait { opacity: .85; }

/* ---------- Administration ---------- */
.adm-block { border: 1px solid var(--line); border-radius: 14px; padding: .6rem .7rem;
  margin-bottom: .6rem; background: rgba(20,5,15,.4); }
.adm-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .3rem; }
.adm-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem 0; border-top: 1px dashed var(--line); font-size: .86rem; }
.adm-actions { display: flex; gap: .3rem; flex: 0 0 auto; }
.adm-del { background: rgba(224,31,69,.15); border: 1px solid var(--rose); color: var(--rose-soft);
  border-radius: 999px; padding: .2rem .55rem; font-size: .74rem; cursor: pointer; white-space: nowrap; }
.adm-mini { background: var(--surface2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: .2rem .55rem; font-size: .74rem; cursor: pointer; white-space: nowrap; }
.adm-head .adm-del { margin-left: auto; }
/* v234 — indicateurs de complétude admin : uniquement des métadonnées, jamais les contenus. */
.adm-checks { display: flex; flex-wrap: wrap; gap: .25rem .45rem; margin-top: .28rem;
  font-size: .7rem; color: var(--ink2); }
.adm-checks > span { border: 1px solid var(--line); border-radius: 999px; padding: .08rem .38rem;
  background: rgba(255,255,255,.035); }
.adm-checks > .adm-ok { border-color: rgba(127,214,166,.38); color: var(--ok); }
.adm-checks > .adm-warn { border-color: rgba(242,198,109,.45); color: var(--gold); }
.adm-season { align-items: flex-start; }
.adm-season-body { min-width: 0; flex: 1 1 auto; }
.adm-season-body > .muted { white-space: nowrap; }

/* Vignette : image non sélectionnable au doigt, case à cocher toujours cliquable */
.ph img { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ph img.ph-broken { opacity: .25; }
.ph-badge { border: none; cursor: pointer; }
.btn-tiny { padding: .4rem .8rem; font-size: .78rem; margin-top: .5rem; }
.album-filter { justify-content: center; margin-top: .7rem; }
.album-filter .chip { font-size: .76rem; }

/* ---------- Sélecteur de saison de l'album ---------- */
.season-pick { display: flex; align-items: center; gap: .5rem; margin-top: .9rem;
  background: linear-gradient(135deg, rgba(255,92,138,.14), rgba(242,198,109,.10));
  border: 1px solid var(--rose); border-radius: 999px; padding: .35rem .5rem .35rem .8rem;
  box-shadow: 0 6px 20px rgba(255,92,138,.18); }
.season-pick .sp-ico { font-size: 1.1rem; flex: 0 0 auto; }
.sp-sel { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none;
  background: transparent; border: none; color: var(--ink); font-family: var(--serif);
  font-size: .95rem; padding: .35rem 1.8rem .35rem 0; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%23ff5c8a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center; }
.sp-sel:focus { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 999px; }
.sp-sel option { background: var(--surface); color: var(--ink); font-family: inherit; }

/* Croix de fermeture des pages secondaires */
.page-close { position: absolute; top: .6rem; right: .7rem; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: rgba(20,5,15,.55); border: 1px solid var(--line); color: var(--ink2);
  font-size: 1rem; line-height: 1; }
.page-close:active { background: rgba(255,92,138,.3); color: var(--ink); }
.card-wish { font-family: var(--serif); font-size: 1.1rem; margin: .35rem 0; }

/* Répartition des envies par thème */
.theme-spread { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.tsp { font-size: .7rem; padding: .22rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink2); background: rgba(20,5,15,.4); }
.tsp b { color: var(--ink2); font-weight: 700; }
.tsp-on { border-color: var(--rose); color: var(--ink); background: rgba(255,92,138,.14); }
.tsp-on b { color: var(--rose); }
.tsp-full { border-color: var(--gold); color: var(--ink); background: rgba(242,198,109,.16); }
.tsp-full b { color: var(--gold); }

/* Choix de la carte du soir par le perdant */
.gift-choose { border-color: var(--gold); background: rgba(242,198,109,.12); }
/* 🎁 Rappel de la carte du soir en cours (accueil, page Traversée). */
.gift-now { margin-top: .6rem; }
.gift-now-head { font-weight: 800; font-size: .95rem; }
/* 🎁 Choix du perdant : rendu prédominant pour qu'il ne l'oublie pas. */
.gift-choose-strong, .gift-choose-now {
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(242,198,109,.22), rgba(255,92,138,.12));
  box-shadow: 0 0 0 3px rgba(242,198,109,.16), 0 10px 26px -10px rgba(242,198,109,.6);
  animation: giftPulse 1.9s ease-in-out infinite;
}
.gift-choose-head {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 800; color: var(--gold);
  display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem;
}
.gift-choose-now .btn-main { margin-top: .6rem; }
@keyframes giftPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(242,198,109,.16), 0 10px 26px -10px rgba(242,198,109,.55); }
  50% { box-shadow: 0 0 0 4px rgba(242,198,109,.30), 0 12px 30px -8px rgba(242,198,109,.8); }
}
@media (prefers-reduced-motion: reduce) { .gift-choose-strong, .gift-choose-now { animation: none; } }
.wish-choice { display: grid; gap: .4rem; margin-top: .6rem; }
.wish-opt { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  text-align: left; width: 100%; cursor: pointer; padding: .6rem .75rem; border-radius: 12px;
  background: rgba(20,5,15,.55); border: 1px solid var(--line); color: var(--ink); }
.wish-opt:active { border-color: var(--gold); background: rgba(242,198,109,.2); }
.wo-theme { font-size: .68rem; color: var(--ink2); }
.wo-label { font-size: .92rem; font-weight: 600; }

/* Notifications : liste avec bouton « lu » */
.notif { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.06); }
.notif:last-child { border-bottom: none; }
.notif-go { flex: 1 1 auto; min-width: 0; width: auto; text-align: left; background: none;
  border: none; color: var(--ink); padding: .7rem .9rem; font-size: .88rem; cursor: pointer;
  line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.notif-go.center { text-align: center; color: var(--ink2); font-size: .82rem; }
.notif-go:hover { background: rgba(255,92,138,.12); }
.notif-x { flex: 0 0 34px; width: 34px; align-self: stretch; background: none; border: none;
  border-left: 1px solid rgba(255,255,255,.06); color: var(--ink2); cursor: pointer; font-size: .9rem; }
.notif-x:hover { color: var(--rose); background: rgba(255,92,138,.12); }
.notif-foot { background: rgba(255,255,255,.04); }

/* Avatar avec pseudo dans l'entête */
.av-btn { flex-direction: column; gap: 0; width: auto; min-width: 44px; height: auto;
  border-radius: 14px; padding: .18rem .4rem .22rem; }
.av-name { font-size: .58rem; color: var(--ink2); max-width: 62px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }

/* Pseudo cliquable -> fiche publique */
.plink { background: none; border: none; padding: 0; cursor: pointer; color: inherit;
  font: inherit; text-decoration: underline dotted var(--rose); text-underline-offset: 2px; }
.plink:active { color: var(--rose); }
.pub-head { display: flex; align-items: center; gap: .7rem; }
.pub-av { font-size: 2.4rem; }

/* ---------- Bandeau d'appel global ---------- */
.live-bar { position: sticky; top: 0; z-index: 58; }
.live-go { display: flex; align-items: center; gap: .5rem; width: 100%; border: none; cursor: pointer;
  padding: .6rem .9rem; font-size: .88rem; text-align: left; color: #37091f;
  background: linear-gradient(100deg, var(--gold), var(--rose) 55%, var(--gold));
  background-size: 220% 100%;
  animation: liveShine 2.4s linear infinite, liveBeat 1.6s ease-in-out infinite; }
.live-go b { font-weight: 800; }
.live-arrow { margin-left: auto; font-size: 1.3rem; font-weight: 800; }
@keyframes liveShine { 0% { background-position: 0% 50% } 100% { background-position: 220% 50% } }
@keyframes liveBeat { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.15) } }
@media (prefers-reduced-motion: reduce) { .live-go { animation: none; } }

/* ---------- Lancement de la veillée ---------- */
.epic { position: fixed; inset: 0; z-index: 400; overflow: hidden; cursor: pointer;
  background: radial-gradient(60% 50% at 50% 45%, rgba(255,92,138,.35), rgba(12,2,9,.96) 70%);
  backdrop-filter: blur(4px); animation: epicIn .35s ease both; }
@keyframes epicIn { from { opacity: 0 } to { opacity: 1 } }
.epic-core { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 1.5rem; }
.epic-ico { font-size: 4.2rem; animation: epicPop .7s cubic-bezier(.22,1.4,.36,1) both; }
.epic-title { font-family: var(--serif); font-size: 2rem; margin-top: .4rem; color: var(--ink);
  text-shadow: 0 3px 26px rgba(255,92,138,.8); animation: epicPop .7s .12s cubic-bezier(.22,1.4,.36,1) both; }
.epic-sub { color: var(--ink2); margin-top: .3rem; animation: epicPop .7s .24s cubic-bezier(.22,1.4,.36,1) both; }
@keyframes epicPop { from { opacity: 0; transform: scale(.6) translateY(14px) } to { opacity: 1; transform: none } }
.epic-h { position: absolute; bottom: -8vh; animation: epicRise 2.4s ease-in forwards; }
@keyframes epicRise {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  15% { opacity: .95; }
  100% { transform: translateY(-112vh) rotate(260deg); opacity: 0; }
}

/* ---------- Statistiques par famille ---------- */
.fam-row { padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.fam-row:last-of-type { border-bottom: none; }
.fam-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .9rem; }
.fam-bar { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; }
.fam-who { flex: 0 0 68px; font-size: .72rem; color: var(--ink2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fam-track { flex: 1; height: 9px; border-radius: 999px; background: rgba(20,5,15,.7);
  border: 1px solid var(--line); overflow: hidden; }
.fam-fill { display: block; height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.22,1,.36,1); }
.fam-me { background: linear-gradient(90deg, var(--plum), var(--rose)); }
.fam-pa { background: linear-gradient(90deg, var(--rose), var(--gold)); }
.fam-pct { flex: 0 0 38px; text-align: right; font-size: .74rem; color: var(--ink2); }

/* Guidage des thèmes d'envies */
.tsp { cursor: pointer; }
.tsp-empty { opacity: .6; border-style: dashed; }
.tsp-need { border-color: var(--rose); color: var(--ink); background: rgba(255,92,138,.2);
  animation: liveBeat 1.8s ease-in-out infinite; }
.idea-head { margin: .2rem 0; font-size: .95rem; }
.idea-need { color: var(--rose); }
.idea-full { opacity: .55; }
.idea-flash { animation: flashTheme 1.6s ease; border-radius: 8px; }
@keyframes flashTheme { 0%, 100% { background: transparent } 30% { background: rgba(255,92,138,.28) } }
.step-lock { opacity: .7; border-style: dashed; }
.step-lock .step-badge { color: var(--gold); border-color: var(--gold); }

/* ---------- Paliers de la jauge, détaillés ---------- */
.lv-list { display: grid; gap: .4rem; margin-top: .7rem; }
.lv { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .65rem;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(20,5,15,.4); opacity: .72; }
.lv-on { opacity: 1; border-color: var(--gold); background: rgba(242,198,109,.12);
  box-shadow: 0 0 14px rgba(242,198,109,.15); }
.lv-ico { font-size: 1.25rem; flex: 0 0 auto; }
.lv-body { flex: 1; min-width: 0; font-size: .88rem; }
.lv-need { font-size: .7rem; padding: .08rem .45rem; border-radius: 999px; margin-left: .35rem;
  border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.lv-on .lv-need { color: var(--gold); border-color: var(--gold); }

/* ---------- Bandeau : variantes selon la situation ---------- */
/* 🟢 Veillée EN COURS : vert émeraude, avec une pastille qui bat. */
.live-now { background: linear-gradient(100deg, #16a97a, #2fd6a5 55%, #16a97a);
  background-size: 220% 100%; color: #04261b; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #04261b; margin-right: .1rem; animation: dotBlink 1.1s ease-in-out infinite; }
@keyframes dotBlink { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .25; transform: scale(.75) } }
/* 🟣 En attente de l'autre : prune calme, sans clignotement. */
.live-wait { background: linear-gradient(100deg, var(--plum), #8d5f9f 55%, var(--plum));
  background-size: 100% 100%; color: var(--ink); animation: none; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- Histogrammes de fréquentation ---------- */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 78px; margin-top: .5rem;
  padding: .3rem .2rem; background: rgba(20,5,15,.45); border: 1px solid var(--line); border-radius: 10px; }
.spark-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.spark-bar { display: block; width: 100%; border-radius: 3px 3px 0 0; min-height: 2px;
  transition: height .6s cubic-bezier(.22,1,.36,1); }
.spark-visit { background: linear-gradient(180deg, var(--sea, #56cfe1), var(--plum)); }
.spark-login { background: linear-gradient(180deg, var(--rose), var(--plum)); }
.spark-signup { background: linear-gradient(180deg, var(--gold), #b8862f); }
.spark-season { background: linear-gradient(180deg, #7fd6a6, #2c8f66); }
.spark-meeting { background: linear-gradient(180deg, #ff9ab5, var(--rose)); }
.spark-axis { display: flex; justify-content: space-between; font-size: .66rem;
  color: var(--ink2); margin-top: .2rem; }
.stat-box span + span { display: block; margin-top: .15rem; }

/* ============================================================
   🎬 LE FILM DE LA RÉVÉLATION
   ============================================================ */
body.film-on { overflow: hidden; }
.film { position: fixed; inset: 0; z-index: 500; overflow: hidden; cursor: pointer;
  background: radial-gradient(70% 55% at 50% 40%, rgba(163,77,134,.5), rgba(10,2,8,.98) 72%);
  backdrop-filter: blur(6px); }
.film-stage { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .5rem;
  padding: calc(env(safe-area-inset-top, 0px) + 7rem) 1.1rem 1.4rem; }
.film-skip { position: absolute; top: calc(.8rem + env(safe-area-inset-top, 0px)); right: .8rem;
  z-index: 3; background: rgba(255,255,255,.12); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; cursor: pointer; }

.film-open .film-ico { font-size: 4.4rem; animation: filmPop .7s cubic-bezier(.22,1.4,.36,1) both; }
.film-title { font-family: var(--serif); font-size: 2.1rem; color: var(--ink); line-height: 1.15;
  text-shadow: 0 3px 30px rgba(255,92,138,.75); animation: filmPop .7s .1s cubic-bezier(.22,1.4,.36,1) both; }
.film-sub { color: var(--ink2); animation: filmPop .7s .25s cubic-bezier(.22,1.4,.36,1) both; }
@keyframes filmPop { from { opacity: 0; transform: scale(.7) translateY(16px) } to { opacity: 1; transform: none } }

.film-kicker { font-size: .78rem; color: var(--gold); letter-spacing: .06em; text-transform: uppercase;
  animation: filmPop .5s both; }
.film-q { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; max-width: 22rem;
  animation: filmPop .6s .12s both; }
.film-owner { font-size: .8rem; color: var(--ink2); animation: filmPop .6s .2s both; }

.film-pair { display: flex; gap: .6rem; width: 100%; max-width: 26rem; margin-top: .5rem; }
.film-env { flex: 1; min-width: 0; border-radius: 16px; padding: .8rem .6rem; font-size: 1rem;
  border: 2px solid var(--line); background: rgba(20,5,15,.75); }
.film-env b { display: block; margin-top: .2rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.film-who { font-size: .66rem; color: var(--ink2); text-transform: uppercase; letter-spacing: .05em; }
.film-a { animation: envIn .55s .5s cubic-bezier(.22,1.4,.36,1) both; }
.film-b { animation: envIn .55s 1.1s cubic-bezier(.22,1.4,.36,1) both; }
@keyframes envIn { from { opacity: 0; transform: translateY(24px) rotateX(45deg) } to { opacity: 1; transform: none } }
.film-hit { border-color: #4ade80; background: rgba(74,222,128,.16); box-shadow: 0 0 26px rgba(74,222,128,.35); }
.film-miss { border-color: var(--rose); background: rgba(255,92,138,.12); }

.film-verdict { margin-top: .6rem; font-size: 1.1rem; font-weight: 800;
  animation: filmPop .5s 1.8s both; }
.film-verdict.ok { color: #7ef0ad; text-shadow: 0 0 22px rgba(74,222,128,.6); }
.film-verdict.ko { color: var(--ink2); }

.film-scores { display: flex; gap: 1.2rem; align-items: flex-end; animation: filmPop .6s both; }
.film-sc b { display: block; font-family: var(--serif); font-size: 2.6rem; color: var(--ink); }
.film-sc span { font-size: .74rem; color: var(--ink2); }
.film-stars b { color: var(--gold); text-shadow: 0 0 26px rgba(242,198,109,.7); }

.film-h { position: absolute; bottom: -8vh; font-size: 1.6rem; animation: filmRise 3.4s ease-in forwards; }
@keyframes filmRise {
  0% { transform: translateY(0) rotate(0); opacity: 0 }
  12% { opacity: .95 }
  100% { transform: translateY(-115vh) rotate(300deg); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .film-a, .film-b, .film-verdict, .film-title, .film-sub, .film-ico, .film-h { animation: none !important; }
}

/* ============================================================
   v31 — carte d'état, registre calme, cloisonnement des envies
   ============================================================ */

/* 🌙 QUATRIÈME registre du bandeau : l'entre-deux. Ni doré ni clignotant — purement
   informatif. Seul ce qui réclame une action de ta part continue de battre. */
.live-calm { background: linear-gradient(100deg, #3b1630, #4d1f3f 55%, #3b1630);
  background-size: 100% 100%; color: var(--ink); animation: none;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.live-calm b { color: var(--rose-soft); font-weight: 700; }
.live-calm .live-arrow { color: var(--plum); }

/* 📊 Carte d'état de la traversée (accueil) */
.card-pulse { border-color: rgba(242,198,109,.28); }
.pulse-grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) { .pulse-grid { grid-template-columns: repeat(4, 1fr); } }
.pulse-cell { background: rgba(20,5,15,.5); border: 1px solid var(--line); border-radius: 14px;
  padding: .55rem .4rem; text-align: center; }
.pulse-cell b { display: block; font-size: 1.45rem; color: var(--gold);
  font-family: var(--serif); line-height: 1.15; }
.pulse-cell span { display: block; font-size: .72rem; color: var(--ink2); margin-top: .1rem; }
.pulse-cell.pulse-late b { color: var(--rose); }
.pulse-next { margin: .7rem 0 0; font-size: .86rem; color: var(--ink2); }
.pulse-next b { color: var(--ink); }

/* Périmètre d'une section : rappelle de quel îlot on parle */
.sec-scope { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .72rem; color: var(--ink2); font-weight: 400; margin-left: .35rem;
  padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(20,5,15,.4); white-space: nowrap; }

/* Pastille de compteur sur un bouton (réservoir d'envies) */
.pill-count { display: inline-block; margin-left: .35rem; font-size: .72rem; font-weight: 700;
  padding: .08rem .42rem; border-radius: 999px; border: 1px solid transparent; }
.pill-ok { background: rgba(127,214,166,.16); border-color: var(--ok); color: var(--ok); }
.pill-warn { background: rgba(255,92,138,.16); border-color: var(--rose); color: var(--rose-soft); }

/* 🗂️ Sélecteur d'îlot sur la page Envies */
.ilot-switch { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.ilot-switch label { display: block; font-size: .78rem; color: var(--ink2); margin-bottom: .25rem; }
.ilot-switch select { width: 100%; font-family: var(--serif); font-size: .95rem;
  color: var(--ink); background: rgba(20,5,15,.6); border: 1px solid var(--rose);
  border-radius: 12px; padding: .5rem .7rem; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.15rem, calc(100% - 13px) 1.15rem;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.ilot-switch select:focus { outline: none; border-color: var(--gold); }
.ilot-switch p { margin: .4rem 0 0; }

/* ============================================================
   v32 — modes de difficulté
   ============================================================ */

/* Le choix d'ambition, dans les réglages de la traversée */
.diffs { display: flex; flex-direction: column; gap: .45rem; margin: .3rem 0 .6rem; }
.diff { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  cursor: pointer; padding: .6rem .7rem; border-radius: 14px; color: var(--ink);
  background: rgba(20,5,15,.5); border: 1px solid var(--line);
  transition: border-color .15s ease, background .15s ease; }
.diff:hover { border-color: var(--plum); }
.diff.on { border-color: var(--rose); background: rgba(255,92,138,.12);
  box-shadow: 0 0 0 1px rgba(255,92,138,.35) inset; }
.diff-ico { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.diff-body { flex: 1 1 auto; min-width: 0; }
.diff-body b { display: block; font-family: var(--serif); font-size: 1rem; }
.diff-desc { display: block; font-size: .76rem; color: var(--ink2); margin-top: .1rem; }
.diff-target { flex: 0 0 auto; font-family: var(--serif); font-weight: 700;
  font-size: .95rem; color: var(--gold); white-space: nowrap; }
.diff.on .diff-target { color: var(--rose-soft); }

/* La pastille de rappel, partout où l'objectif est visible */
.diff-badge { display: inline-block; font-size: .7rem; font-weight: 600; white-space: nowrap;
  padding: .1rem .5rem; border-radius: 999px; vertical-align: middle;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: rgba(242,198,109,.14); border: 1px solid rgba(242,198,109,.5);
  color: var(--gold); margin-left: .35rem; }
.season-card .diff-badge { margin-left: .25rem; }
.hero .diff-badge, .card-hero > .diff-badge { margin: .35rem 0 0; }

/* ============================================================
   v33 — courbe d'évolution de la complicité
   ============================================================ */
.card-chart { padding-bottom: .8rem; }
.chart { display: block; width: 100%; height: auto; margin: .2rem 0 .3rem;
  overflow: visible; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.chart text { pointer-events: none; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .74rem;
  color: var(--ink2); margin-bottom: .1rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-legend i { display: inline-block; border-radius: 2px; }
.lg-bar { width: 11px; height: 11px; background: var(--gold); opacity: .8; }
.lg-line { width: 15px; height: 3px; background: var(--rose); border-radius: 999px;
  box-shadow: 0 0 0 2.5px rgba(255,92,138,.28); }

/* ============================================================
   v39 — le pont vers les idées, sur la page Envies
   ============================================================ */
.idea-jump { display: block; width: 100%; margin-top: .5rem; padding: .55rem .7rem;
  background: rgba(242,198,109,.08); border: 1px dashed var(--gold); border-radius: 12px;
  color: var(--ink2); font-size: .82rem; cursor: pointer; text-align: center; }
.idea-jump b { color: var(--gold); }
.idea-jump:active { background: rgba(242,198,109,.16); }

/* ============================================================
   v42 — invitation du binôme (WhatsApp / e-mail / partage)
   ============================================================ */
.invite-row { display: flex; gap: .45rem; margin: .6rem 0 .2rem; }
.invite-btn { flex: 1 1 0; padding: .55rem .3rem; border-radius: 12px; cursor: pointer;
  background: rgba(20,5,15,.55); border: 1px solid var(--rose); color: var(--ink);
  font-size: .8rem; white-space: nowrap; }
.invite-btn:active { background: rgba(255,92,138,.16); }
.hint.center { text-align: center; }

/* v43 — le ton de l'invitation */
.inv-label { display: block; font-size: .78rem; color: var(--ink2); margin: .5rem 0 .25rem; }
.inv-select { width: 100%; font-size: .88rem; color: var(--ink); background: rgba(20,5,15,.6);
  border: 1px solid var(--rose); border-radius: 12px; padding: .5rem .7rem; }
.inv-select:focus { outline: none; border-color: var(--gold); }
.inv-preview { margin: .45rem 0 0; padding: .5rem .65rem; font-size: .8rem; font-style: italic;
  color: var(--ink2); background: rgba(20,5,15,.4); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; }

/* v45 — le choix de la carte saute aux yeux */
.card-choice { border-color: var(--gold); animation: choicePulse 1.6s ease-in-out 3; }
@keyframes choicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,198,109,0); }
  50% { box-shadow: 0 0 0 7px rgba(242,198,109,.22); }
}

/* v47 — le tie-break */
.tb-q { font-family: var(--serif); font-size: 1.05rem; margin: .6rem 0 .2rem; }
.tb-step { font-size: .74rem; color: var(--gold); margin: .55rem 0 .25rem; font-weight: 700; }
.tb-opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.tb-opt { padding: .45rem .7rem; border-radius: 999px; cursor: pointer; font-size: .84rem;
  background: rgba(20,5,15,.55); border: 1px solid var(--line); color: var(--ink); }
.tb-opt.on { border-color: var(--gold); background: rgba(242,198,109,.16); color: var(--gold); font-weight: 700; }
.gift-choose-strong .btn-main { margin-top: .7rem; }
.gift-choose-strong .btn-main:disabled { opacity: .45; cursor: not-allowed; }

/* v48 — tableau de marque du dépouillement */
/* v51 : la marque est une bannière FIXE en haut du film — hors des frames, donc
   visible sur chacune, quel que soit leur contenu. */
/* v59 : la marque porte le suspense — grande, nommée, le meneur en lumière. */
/* v71 : la marque descend SOUS les boutons « Passer ⏭ » et 🔊, qui occupaient la
   même ligne — sur téléphone, les trois se chevauchaient. */
.film-score { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 3.5rem);
  left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: stretch; gap: .5rem; padding: .4rem .5rem;
  background: rgba(20,5,15,.9); border: 1px solid var(--gold); border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5); white-space: nowrap; }
.film-score .fs-p, .film-score .fs-stars { display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .05rem; padding: .15rem .6rem;
  border-radius: 11px; min-width: 4.6rem; transition: background .3s, transform .3s; }
.film-score i { font-style: normal; font-size: .6rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink2); max-width: 6.5rem; overflow: hidden;
  text-overflow: ellipsis; }
.film-score b { font-family: var(--serif); font-size: 1.65rem; line-height: 1.05; color: var(--ink); }
.film-score .fs-stars { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.film-score .fs-stars b { color: var(--gold); font-size: 1.35rem; }
.film-score .fs-lead { background: rgba(242,198,109,.16); transform: scale(1.06); }
.film-score .fs-lead b { color: var(--gold); text-shadow: 0 0 12px rgba(242,198,109,.6); }

/* v49 — programmation : des sélecteurs impossibles à manquer */
.pm-input { display: block; width: 100%; font-size: 1.15rem; padding: .65rem .8rem;
  background: rgba(20,5,15,.6); color: var(--ink); border: 1px solid var(--rose);
  border-radius: 12px; font-family: var(--serif); -webkit-appearance: none; }
.pm-input:focus { outline: none; border-color: var(--gold); }
.pm-hint { font-size: .68rem; color: var(--ink2); font-weight: 400; }
.pm-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .2rem; }

/* v50 — annonce entre deux manches de tie-break + compte du générique */
.tb-flash { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center;
  justify-content: center; background: rgba(16,4,12,.9); backdrop-filter: blur(4px);
  animation: tbfIn .3s ease both; }
.tb-flash.out { animation: tbfOut .4s ease both; }
.tb-flash-in { text-align: center; animation: filmPop .5s both; }
.tbf-ico { font-size: 3rem; }
.tbf-title { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); margin: .3rem 0 .15rem; }
.tbf-sub { color: var(--ink2); font-size: .95rem; }
.tbf-round { margin-top: .8rem; font-weight: 700; color: var(--rose-soft); }
@keyframes tbfIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tbfOut { from { opacity: 1; } to { opacity: 0; } }
.film-count { margin-top: .7rem; font-size: .8rem; color: var(--ink2); }


/* v51 — onglet Veillée lumineux + témoin de version */
.tabbar button.glow { color: var(--gold); }
.tabbar button.glow span { animation: tabGlow 1.15s ease-in-out infinite; display: inline-block; }
@keyframes tabGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(242,198,109,.35)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(242,198,109,1)) drop-shadow(0 0 26px rgba(255,92,138,.7));
        transform: scale(1.38); }
}
/* v56 : le libellé de l'onglet s'embrase aussi — plus personne ne le rate. */
.tabbar button.glow { text-shadow: 0 0 10px rgba(242,198,109,.8); font-weight: 700; }
.menu-ver { text-align: center; font-size: .68rem; color: var(--ink2); padding: .35rem 0 .15rem;
  border-top: 1px solid var(--line); margin-top: .3rem; }

/* v52 — la sonde de diagnostic */
.diag-pre { font-size: .68rem; line-height: 1.45; color: var(--ink2); background: rgba(20,5,15,.6);
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem; overflow-x: auto;
  white-space: pre-wrap; word-break: break-all; max-height: 55vh; overflow-y: auto; }

/* v57 — le rituel du tie-break */
.tb-how { display: flex; flex-direction: column; gap: .35rem; margin: .55rem 0;
  font-size: .84rem; }
.tb-recap { margin: .5rem 0; }
.tb-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem;
  font-size: .82rem; padding: .35rem .5rem; border-radius: 10px; margin-top: .3rem;
  background: rgba(20,5,15,.5); border: 1px solid var(--line); }
.tb-row.tb-hit { border-color: rgba(127,214,166,.55); }
.tb-row.tb-miss { border-color: rgba(255,92,138,.35); }
.tb-who { font-weight: 700; color: var(--gold); }
.tb-verdict { margin-left: auto; font-weight: 700; white-space: nowrap; }
.tb-hit .tb-verdict { color: var(--ok); }
.tb-miss .tb-verdict { color: var(--rose-soft); }
.tb-tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .45rem;
  border-radius: 999px; background: rgba(255,92,138,.18); border: 1px solid var(--rose);
  color: var(--rose-soft); vertical-align: middle; white-space: nowrap; }

/* v58 — libellé d'onglet vivant, bouton son du film, lien vers le film */
.tb-lbl { font-style: normal; }
.tabbar button.glow .tb-lbl { font-size: .58rem; letter-spacing: 0; }
.film-snd { right: auto; left: calc(env(safe-area-inset-left, 0px) + .9rem); }
.film-link { display: block; width: 100%; margin-top: .55rem; padding: .45rem .6rem;
  background: none; border: 1px dashed var(--gold); border-radius: 10px; cursor: pointer;
  color: var(--gold); font-size: .78rem; text-align: center; }
.film-link:active { background: rgba(242,198,109,.14); }

/* v59 — le guide */
.g-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.g-toc-b { flex: 1 1 8.5rem; display: flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .5rem .6rem; border-radius: 12px; font-size: .78rem; text-align: left;
  background: rgba(20,5,15,.5); border: 1px solid var(--line); color: var(--ink); }
.g-toc-b span { font-size: 1rem; }
.g-toc-b:active { border-color: var(--gold); background: rgba(242,198,109,.12); }
.g-p { font-size: .87rem; line-height: 1.55; color: var(--ink); margin: .5rem 0; }
.g-def { display: flex; flex-direction: column; gap: .12rem; padding: .55rem .7rem; margin-top: .45rem;
  background: rgba(20,5,15,.45); border-left: 3px solid var(--rose); border-radius: 0 12px 12px 0; }
.g-def b { font-size: .85rem; color: var(--gold); }
.g-def span { font-size: .82rem; line-height: 1.5; color: var(--ink2); }
.g-step { display: flex; gap: .6rem; align-items: flex-start; margin-top: .55rem; }
.g-step .g-num { flex: 0 0 1.6rem; height: 1.6rem; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; font-weight: 700; font-size: .8rem;
  background: rgba(242,198,109,.16); border: 1px solid var(--gold); color: var(--gold); }
.g-step b { font-size: .86rem; display: block; margin-bottom: .1rem; }
.g-tab { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .8rem; }
.g-tab th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gold); padding: .3rem .4rem; border-bottom: 1px solid var(--gold); }
.g-tab td { padding: .38rem .4rem; border-bottom: 1px solid var(--line); color: var(--ink2);
  vertical-align: top; }
.g-tab td:nth-child(2), .g-tab td:nth-child(3) { text-align: center; white-space: nowrap;
  font-weight: 700; color: var(--ink); }

/* v63 — lien en ligne dans le guide */
.g-inline { background: none; border: none; padding: 0; cursor: pointer; color: var(--gold);
  text-decoration: underline; font-size: inherit; font-family: inherit; }

/* v70 — l'entrée « guide » du menu est un lien vers guide.php : mêmes habits que les boutons. */
.menu-pop > a { box-sizing: border-box; text-decoration: none; }

/* v77 — la devinette sur la question commune, dans le bilan et le film */
.rev-pred { display: block; margin-top: .18rem; font-size: .72rem; color: var(--ink2); font-style: italic; }
.film-pred { display: block; margin-top: .2rem; font-size: .74rem; color: var(--ink2); font-style: italic; }

/* ============================================================
   v79 — barre d'installation (Chrome/Windows) et guide iOS
   ============================================================ */
.ib { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + .8rem);
  transform: translate(-50%, 140%); z-index: 180; display: flex; align-items: center; gap: .7rem;
  width: min(30rem, calc(100vw - 1.6rem)); padding: .7rem .8rem;
  background: var(--surface2); border: 1px solid var(--gold); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6); transition: transform .32s cubic-bezier(.34,1.4,.64,1); }
.ib.ib-on { transform: translate(-50%, 0); }
.ib.ib-tabs { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.6rem); }
.ib-ico { width: 2.4rem; height: 2.4rem; border-radius: 10px; flex: 0 0 auto; }
.ib-txt { flex: 1 1 auto; min-width: 0; }
.ib-txt b { display: block; font-size: .88rem; }
.ib-txt span { display: block; font-size: .72rem; color: var(--ink2); line-height: 1.35; }
.ib-go { flex: 0 0 auto; padding: .5rem .85rem; border: none; border-radius: 999px; cursor: pointer;
  font-size: .82rem; font-weight: 700; color: #37091f; white-space: nowrap;
  background: linear-gradient(100deg, var(--gold), var(--rose) 70%); }
.ib-x { flex: 0 0 auto; background: none; border: none; color: var(--ink2); cursor: pointer;
  font-size: .95rem; padding: .2rem .25rem; }

.ib-modal { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center;
  justify-content: center; padding: 1rem; opacity: 0; transition: opacity .25s ease;
  background: rgba(10,3,8,.82); backdrop-filter: blur(6px); overflow-y: auto; }
.ib-modal.ib-on { opacity: 1; }
.ib-card { position: relative; width: min(26rem, 100%); max-height: 92svh; overflow-y: auto;
  padding: 1.3rem; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.ib-card h3 { font-family: var(--serif); margin: 0 0 .6rem; }
.ib-close { position: absolute; top: .5rem; right: .65rem; background: none; border: none;
  color: var(--ink2); font-size: 1.1rem; cursor: pointer; }
.ib-p { font-size: .85rem; color: var(--ink2); line-height: 1.55; margin: 0 0 .9rem; }
.ib-step { display: flex; gap: .65rem; align-items: flex-start; margin-top: .55rem;
  font-size: .86rem; line-height: 1.45; }
.ib-step > span { flex: 0 0 1.5rem; height: 1.5rem; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; font-size: .76rem; font-weight: 700;
  background: rgba(242,198,109,.16); border: 1px solid var(--gold); color: var(--gold); }
.ib-share { display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; vertical-align: -.35rem; border-radius: 6px;
  background: rgba(90,160,255,.18); border: 1px solid rgba(120,180,255,.5); color: #9ecbff; }
.ib-note { margin: 1rem 0 0; padding: .55rem .7rem; border-radius: 10px; font-size: .76rem;
  line-height: 1.45; color: var(--ink2); background: rgba(255,92,138,.1);
  border: 1px solid rgba(255,92,138,.35); }
.ib-ok { width: 100%; margin-top: 1rem; padding: .8rem; border: none; border-radius: 999px;
  cursor: pointer; font-size: .92rem; font-weight: 700; color: #37091f;
  background: linear-gradient(100deg, var(--gold), var(--rose) 60%, var(--gold)); }

/* v88 — le kiff du jour : champ plus généreux et compteur */
.kiff-area { min-height: 150px; line-height: 1.5; }
.kiff-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; margin-top: .5rem; }
.kiff-n { font-size: .72rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.kiff-n.kiff-full { color: var(--gold); font-weight: 700; }

/* v89 — sortir de la file de questions */
.qhead { position: relative; }
.q-back { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin-right: .1rem; padding: 0;
  border-radius: 50%; cursor: pointer; font-size: 1.15rem; line-height: 1;
  background: rgba(20,5,15,.55); border: 1px solid var(--line); color: var(--ink2); }
.q-back:active { border-color: var(--gold); color: var(--gold); }

/* v91 — la marque grimpe après la révélation */
.film-score.score-pop { animation: scorePop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes scorePop {
  0% { transform: translateX(-50%) scale(1); }
  45% { transform: translateX(-50%) scale(1.13); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ============================================================
   v91 — la visionneuse de l'album : plein écran, flèches, diaporama
   ============================================================ */
.lb { position: fixed; inset: 0; z-index: 250; display: none; align-items: center;
  justify-content: center; background: rgba(8,2,6,.96); }
.lb-img { max-width: 100vw; max-height: 100svh; object-fit: contain; cursor: pointer;
  transition: opacity .2s ease; }
.lb-img.lb-turning { opacity: .35; }
.lb-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .7rem); right: .8rem;
  z-index: 3; width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; background: rgba(20,5,15,.75); border: 1px solid var(--line); color: var(--ink); }
.lb-count { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 1.05rem); left: .9rem;
  z-index: 3; font-size: .78rem; color: var(--ink2); background: rgba(20,5,15,.7);
  padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.9rem; height: 2.9rem; border-radius: 50%; cursor: pointer; font-size: 1.5rem;
  line-height: 1; background: rgba(20,5,15,.62); border: 1px solid var(--line); color: var(--ink); }
.lb-arrow:active { border-color: var(--gold); color: var(--gold); }
.lb-prev { left: .5rem; } .lb-next { right: .5rem; }
.lb-bar { position: absolute; left: 0; right: 0; z-index: 3;
  bottom: calc(env(safe-area-inset-bottom, 0px) + .6rem);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .8rem; margin: 0 .6rem; border-radius: 16px;
  background: rgba(20,5,15,.82); border: 1px solid var(--line); }
.lb-meta { font-size: .76rem; color: var(--ink2); }
.lb-tools { display: flex; gap: .3rem; }
.lb-tools button { width: 2.4rem; height: 2.4rem; border-radius: 12px; cursor: pointer;
  font-size: 1.05rem; background: rgba(53,19,42,.8); border: 1px solid var(--line); color: var(--ink); }
.lb-tools button.on { border-color: var(--gold); color: var(--gold); background: rgba(242,198,109,.16); }
.lb-tools button:active { border-color: var(--gold); }
@media (min-width: 720px) { .lb-bar { margin: 0 auto; max-width: 34rem; } }

/* ============================================================
   v92 — la chasse aux doublons
   ============================================================ */
.hash-bar { height: 8px; border-radius: 999px; background: rgba(20,5,15,.6);
  border: 1px solid var(--line); overflow: hidden; margin: .7rem 0 .3rem; }
.hash-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rose), var(--gold)); transition: width .3s ease; }
/* v147 — un groupe de doublons, ceint d'un liseré qui dit sa nature. Deux sections,
   deux couleurs, expliquées une seule fois en tête de page. */
.dup-grp { border-left: 3px solid transparent; padding: .5rem 0 .6rem .6rem; margin-bottom: .5rem;
  border-radius: 0 12px 12px 0; background: rgba(20,5,15,.35); }
.dup-grp:last-child { margin-bottom: 0; }
.dup-grp-n { font-size: .66rem; color: var(--ink2); margin-bottom: .35rem; }
.dup-exact { border-left-color: var(--gold); }
.dup-proche { border-left-color: #6aa9d8; }
.dup-lg { display: flex; align-items: baseline; gap: .45rem; font-size: .74rem;
  color: var(--ink2); line-height: 1.5; margin-bottom: .5rem; }
.dup-lg b { color: var(--ink); }
.dup-lg-i { flex: 0 0 auto; width: .55rem; height: .95rem; border-radius: 3px;
  background: currentColor; }
.dup-lg-i.dup-exact { color: var(--gold); border-left: none; }
.dup-lg-i.dup-proche { color: #6aa9d8; border-left: none; }
.dup-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
/* v228 — les coches de l'album ne paraissent qu'en mode selection, ou sur les photos
   deja cochees. L'album se regarde d'abord ; il se trie ensuite. */
.ph-badge { display: none; }
body.sel-on .ph-badge, .ph.ph-on .ph-badge { display: block; }
.dup { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--line); transition: border-color .2s ease, opacity .2s ease; }
.dup img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.dup-keep { border-color: var(--ok); }
.dup-off { border-color: var(--rose); opacity: .55; }
.dup-off img { filter: grayscale(.6); }
.dup-tag { position: absolute; top: .3rem; left: .3rem; font-size: .64rem; font-weight: 700;
  padding: .12rem .4rem; border-radius: 999px; background: rgba(10,3,8,.82); color: var(--ink); }
.dup-keep .dup-tag { color: var(--ok); }
.dup-off .dup-tag { color: var(--rose-soft); }
.dup-meta { position: absolute; bottom: .3rem; left: .3rem; font-size: .62rem; color: var(--ink2);
  background: rgba(10,3,8,.75); padding: .1rem .35rem; border-radius: 6px; }

/* ============================================================
   v96 — prénom du propriétaire, envies en attente, kiffs en clôture
   ============================================================ */
.q-owner { display: inline-block; padding: .05rem .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; white-space: nowrap; vertical-align: middle;
  background: rgba(255,92,138,.16); border: 1px solid var(--rose); color: var(--rose-soft); }
.q-for { font-size: .72rem; color: var(--ink2); margin-bottom: .35rem; }
.film-kicker .q-owner { font-size: .66rem; }

.gift-todo { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(242,198,109,.35); }

.kiff-reveal { display: flex; flex-direction: column; gap: .8rem; width: min(30rem, 88vw);
  margin: .4rem auto 0; }
.kiff-card { padding: .9rem 1.05rem; border-radius: 18px; text-align: left;
  background: rgba(53,19,42,.9); border: 1px solid var(--rose); }
.kiff-card .kiff-who { display: block; font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.kiff-card p { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.5; }
.kiff-pulse { animation: kiffPulse 1.9s ease-in-out infinite; }
@keyframes kiffPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,92,138,0); border-color: var(--rose); }
  50% { box-shadow: 0 0 22px 2px rgba(255,92,138,.4); border-color: var(--gold); }
}
.film-tap { margin-top: 1.2rem; font-size: .78rem; color: var(--ink2);
  animation: tapFade 1.6s ease-in-out infinite; }
@keyframes tapFade { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* v97 — la pile des envies en attente */
.gift-stack { margin-top: .2rem; }
.gs-item { border: 1px solid var(--line); border-radius: 14px; margin-top: .4rem; overflow: hidden;
  background: rgba(20,5,15,.4); }
.gs-item.gs-open { border-color: var(--rose); }
.gs-head { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem;
  background: none; border: none; cursor: pointer; text-align: left; color: var(--ink); }
.gs-ico { font-size: 1.1rem; flex: 0 0 auto; }
.gs-txt { flex: 1 1 auto; min-width: 0; }
.gs-txt b { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.gs-txt span { display: block; font-size: .68rem; color: var(--ink2); }
.gs-chev { flex: 0 0 auto; color: var(--ink2); font-size: .9rem; }
.gs-body { padding: 0 .5rem .5rem; }
.gs-body .gift-now { margin: 0; }

/* v101 — le rappel de la réponse déjà donnée */
.q-deja { margin: .45rem 0 .1rem; padding: .4rem .6rem; border-radius: 10px; font-size: .78rem;
  color: var(--ink2); background: rgba(242,198,109,.09); border-left: 3px solid var(--gold); }
.q-deja b { color: var(--gold); }

/* v104 — vignette « question posée à … », et carte de traversée pleine largeur */
.q-posee { display: inline-block; margin-bottom: .35rem; padding: .1rem .55rem;
  border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  background: rgba(255,92,138,.14); border: 1px solid var(--rose); color: var(--rose-soft); }
.film-stage .q-posee { margin-bottom: .5rem; }
.season-card .sc-ico { font-size: 1.05rem; }

/* ============================================================
   v105 — les cartes d'envie se détachent, et la page Traversée respire
   ============================================================ */
/* La carte d'envie prend les couleurs du thème choisi, en plus soutenu : un dégradé
   discret, un liseré doré et une ombre — elle ne se confond plus avec le fond. */
.gift {
  background:
    linear-gradient(135deg, rgba(242,198,109,.13), rgba(255,92,138,.10) 60%, transparent),
    var(--surface2);
  border: 1px solid var(--gold);
  border-left: 4px solid var(--rose);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  padding: .85rem .9rem;
  margin-top: .6rem;
}
.gift .gift-now-head, .gift .gift-choose-head { color: var(--gold); font-weight: 700; }
.gift .card-wish { font-family: var(--serif); font-size: 1.02rem; line-height: 1.4;
  margin: .35rem 0 .45rem; }
.gs-item.gs-open { border-color: var(--gold); }
.gs-body .gift { box-shadow: none; margin-top: .35rem; }

/* La dernière veillée, en tête de la page Traversée */
.dv-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  margin-top: .2rem; }
.dv-date { font-size: .82rem; color: var(--ink2); }
.dv-stars { font-size: .95rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.dv-verdict { margin: .35rem 0 .1rem; font-family: var(--serif); font-size: 1.08rem;
  line-height: 1.35; }

/* Harmonisation des tailles sur la page Traversée : les écarts étaient trop marqués */
.season-card .sc-name { font-size: 1.05rem; line-height: 1.3; }
.season-card .sc-meta { font-size: .76rem; gap: .3rem .7rem; margin-top: .35rem; }
.season-card .sc-meta b { font-size: .85rem; }
.season-card .sc-badges { margin: .35rem 0 .3rem; }
.season-card + .season-card { margin-top: .8rem; }

/* v107 — l'en-tête d'une carte empilée se voit un peu mieux, sans quitter le thème */
.gs-head {
  background: linear-gradient(135deg, rgba(242,198,109,.10), rgba(255,92,138,.07) 65%, transparent),
    var(--surface);
  border-left: 3px solid var(--rose);
}
.gs-item { border-color: var(--line); background: transparent; }
.gs-head:active { background: var(--surface2); }
.gs-item.gs-open .gs-head { border-left-color: var(--gold); }
.gs-txt b { color: var(--ink); }
.gs-txt span { color: var(--ink2); }
.h2-sub { font-size: .72em; font-weight: 400; color: var(--ink2); }

/* v109 — l'accueil annonce la traversée en cours, et récapitule toute l'histoire */
.hero-kicker { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .15rem; }
.hero-stat { font-size: .8rem; color: var(--ink2); margin: .3rem 0 .1rem; }
.hero-stat .link-btn { font-size: .74rem; margin-left: .3rem; }
.all-pulse { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.all-pulse .sec-title { font-size: .82rem; margin-bottom: .5rem; }
.gauge-all { margin-top: .6rem; }

/* v110 — la traversée en cours, tout entière dans une seule carte */
.card-season { padding-top: .9rem; }
.cs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.cs-kicker { flex: 1 1 100%; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold); }
.cs-name { flex: 1 1 auto; margin: 0; font-family: var(--serif); font-size: 1.18rem;
  line-height: 1.25; }
.cs-head .link-btn { flex: 0 0 auto; }
.dv { padding: .7rem .8rem; border-radius: 14px; background: rgba(20,5,15,.4);
  border: 1px solid var(--line); margin-bottom: .8rem; }
.dv .dv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .4rem; }
.dv-envie { margin: .35rem 0 .6rem; font-size: .9rem; line-height: 1.4; }
.dv-verdict { margin: .3rem 0 .1rem; }
.dv-verdict .dv-stars { margin-left: .5rem; font-size: .85rem; }
.cs-stats { margin-top: .2rem; }
.cs-stats .card-pulse { margin: 0; border: none; background: none; padding: 0; }
.cs-stats .card-pulse .sec-title { font-size: .82rem; }

/* v111 — la liste des traversées sur l'accueil */
.sl-row { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .7rem;
  margin-top: .4rem; border-radius: 14px; cursor: pointer; text-align: left; color: var(--ink);
  background: rgba(20,5,15,.4); border: 1px solid var(--line); }
.sl-row.sl-live { border-color: var(--gold);
  background: linear-gradient(135deg, rgba(242,198,109,.10), transparent 70%), rgba(20,5,15,.4); }
.sl-row:active { border-color: var(--rose); }
.sl-ico { flex: 0 0 auto; font-size: 1.1rem; }
.sl-body { flex: 1 1 auto; min-width: 0; }
.sl-body b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sl-body span { display: block; font-size: .7rem; color: var(--ink2); }
.sl-chev { flex: 0 0 auto; color: var(--ink2); }
.cs-closed { margin: 0 0 .8rem; padding: .5rem .7rem; border-radius: 10px; font-size: .8rem;
  color: var(--ink2); background: rgba(20,5,15,.5); border-left: 3px solid var(--ink2); }

/* ============================================================
   v114 — le rail d'envies : UNE carte à la fois, que l'on fait glisser
   ============================================================ */
.gift-rail { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .1rem .1rem .4rem; margin: 0 -.1rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; }
.gift-rail::-webkit-scrollbar { height: 4px; }
.gift-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.gr-item { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
.gr-head { display: flex; align-items: center; gap: .35rem; font-size: .7rem; color: var(--ink2);
  margin-bottom: .2rem; }
.gr-n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }
.gr-hint { margin: .1rem 0 0; font-size: .68rem; color: var(--ink2); text-align: center; }
.gr-item .gift { margin-top: 0; }

/* Titre de page « à plat » */
.page-head { padding: .2rem .2rem .6rem; }
.ph-kicker { display: block; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .15rem; }
.ph-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ph-name { flex: 1 1 auto; margin: 0; font-family: var(--serif); font-size: 1.22rem;
  line-height: 1.25; }

/* La liste des traversées sur l'accueil */
.sl-row { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .7rem;
  margin-top: .4rem; border-radius: 14px; cursor: pointer; text-align: left; color: var(--ink);
  background: rgba(20,5,15,.4); border: 1px solid var(--line); }
.sl-row.sl-live { border-color: var(--gold);
  background: linear-gradient(135deg, rgba(242,198,109,.10), transparent 70%), rgba(20,5,15,.4); }
.sl-row:active { border-color: var(--rose); }
.sl-ico { flex: 0 0 auto; font-size: 1.1rem; }
.sl-body { flex: 1 1 auto; min-width: 0; }
.sl-body b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sl-body span { display: block; font-size: .7rem; color: var(--ink2); }
.sl-chev { flex: 0 0 auto; color: var(--ink2); }
.cs-closed { margin: 0 0 .8rem; padding: .5rem .7rem; border-radius: 10px; font-size: .8rem;
  color: var(--ink2); background: rgba(20,5,15,.5); border-left: 3px solid var(--ink2); }

/* Le navigateur à flèches — sans carrés fantômes quand il n'y a rien à parcourir */
.nv-head { padding-bottom: .5rem; }
.nv-row { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.nv-mid { flex: 1 1 auto; min-width: 0; text-align: center; }
.nv-arrow { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer;
  font-size: 1.25rem; line-height: 1; background: rgba(20,5,15,.55);
  border: 1px solid var(--line); color: var(--ink); }
.nv-arrow:not(:disabled):active { border-color: var(--gold); color: var(--gold); }
.nv-solo .nv-arrow { display: none; }
.nv-arrow:disabled { opacity: .28; cursor: default; }
.nv-pos { display: block; text-align: center; font-size: .68rem; color: var(--ink2);
  margin-top: .25rem; font-variant-numeric: tabular-nums; }
.nv-head .ph-name { text-align: center; }
.nv-reglages { display: block; margin: .45rem auto 0; }

/* v115 — flèches du rail, navigation entre veillées, entête de l'îlot */
.gr-nav { display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-top: .1rem; }
.gr-nav .gr-hint { margin: 0; }
.nv-meet { justify-content: center; gap: .8rem; margin: .5rem 0 .7rem; }
.ilot-season { margin-top: .8rem; padding: .65rem .75rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(242,198,109,.10), transparent 70%), rgba(20,5,15,.4);
  border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.is-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.is-kicker { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.is-name { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.3;
  margin-top: .1rem; }
.is-stat { font-size: .76rem; color: var(--ink2); margin-top: .2rem; }
.tabbar button.on { color: var(--rose); font-weight: 700; }
.tabbar button.on::after { content: ''; position: absolute; left: 50%; bottom: .18rem;
  transform: translateX(-50%); width: 1.1rem; height: 2px; border-radius: 2px;
  background: var(--rose); box-shadow: 0 0 8px rgba(255,92,138,.8); }
.tabbar button { position: relative; }

/* v116 — une section d'envies vide le dit, et l'encart traversée porte son action */
.gift-none { margin: .1rem 0 0; padding: .6rem .7rem; border-radius: 12px; font-size: .84rem;
  color: var(--ink2); text-align: center; background: rgba(20,5,15,.4);
  border: 1px dashed var(--line); }
.ilot-season .callout, .ilot-season .alert { margin: .6rem 0 0; }
.ilot-season .btn-main, .ilot-season .btn-ghost { margin-top: .6rem; }

/* v117 — la traversée en cours, section à part entière sous l'entête de l'îlot */
.card.ilot-season { margin-top: .7rem; padding: .8rem .9rem;
  background: linear-gradient(135deg, rgba(242,198,109,.11), transparent 72%), var(--surface);
  border-left: 4px solid var(--gold); }
.card.ilot-season .is-name { font-size: 1.08rem; margin-top: .15rem; }
.card.ilot-season .is-stat { margin-bottom: .1rem; }

/* ============================================================
   v118 — proportions : titres alignés, étapes qui respirent
   ============================================================ */
/* L'étape du parcours : le texte occupait une colonne étroite dès que le titre
   s'allongeait, coincé entre l'icône, le badge et le bouton. La ligne se replie
   maintenant, et le bouton passe dessous plutôt que d'écraser le texte. */
.step { flex-wrap: wrap; }
.step-txt { flex: 1 1 62%; }
.step-go { margin-left: auto; }
@media (max-width: 26rem) {
  .step-go { flex: 1 1 100%; margin-left: 0; margin-top: .45rem; }
}

/* Le titre de la section « Traversée en cours » s'aligne sur les autres sections */
.card.ilot-season .is-name { display: block; font-family: var(--serif); font-size: 1.16rem;
  line-height: 1.3; margin: .1rem 0 .15rem; color: var(--gold); }
.card.ilot-season .sec-title { margin-bottom: .2rem; }

/* Le titre de la page Traversée, à la taille de celui de l'îlot */
.nv-head .ph-kicker { font-size: .7rem; }
.nv-head .ph-name { font-size: 1.55rem; line-height: 1.2; }   /* même taille que le titre de l'îlot */
.nv-mid { padding: 0 .1rem; }

/* v120 — sur la veillée, le kiff n'est plus qu'un renvoi vers la traversée */
.kiff-ptr .sec-title { margin-bottom: .3rem; }
.kiff-ptr .btn-tiny { margin-top: .5rem; }

/* ============================================================
   v122 — l'onglet actif se voit franchement
   ============================================================
   Une pastille rose translucide derrière l'icône, un liseré, et le libellé qui
   s'affirme. On reste dans le registre ROSE : l'or et sa pulsation demeurent la
   propriété exclusive de la veillée en cours, qui doit rester la plus visible. */
.tabbar button { position: relative; transition: color .18s ease; }
.tabbar button.on { color: var(--rose); font-weight: 700; }
.tabbar button.on span {
  filter: drop-shadow(0 0 8px rgba(255,92,138,.75));
  transform: translateY(-1px) scale(1.06);
}
/* la pastille, posée derrière l'icône */
.tabbar button.on::before {
  content: '';
  position: absolute;
  top: .28rem; left: 50%;
  transform: translateX(-50%);
  width: 2.5rem; height: 1.85rem;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255,92,138,.28), rgba(255,92,138,.10) 65%, transparent 78%);
  border: 1px solid rgba(255,92,138,.45);
  box-shadow: 0 0 14px rgba(255,92,138,.28), inset 0 0 10px rgba(255,92,138,.15);
  pointer-events: none;
  animation: tabPop .28s cubic-bezier(.34,1.5,.64,1);
}
@keyframes tabPop {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* le trait sous le libellé */
.tabbar button.on::after {
  content: '';
  position: absolute; left: 50%; bottom: .16rem;
  transform: translateX(-50%);
  width: 1.3rem; height: 2px; border-radius: 2px;
  background: var(--rose);
  box-shadow: 0 0 8px rgba(255,92,138,.9);
}

/* ⚠️ La veillée en cours prime sur tout : sa pastille passe à l'or et pulse avec
   l'icône, pour rester l'élément le plus visible de la barre. */
.tabbar button.glow.on::before,
.tabbar button.glow::before {
  content: '';
  position: absolute; top: .28rem; left: 50%;
  transform: translateX(-50%);
  width: 2.5rem; height: 1.85rem; border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(242,198,109,.34), rgba(255,92,138,.14) 65%, transparent 78%);
  border: 1px solid rgba(242,198,109,.7);
  box-shadow: 0 0 18px rgba(242,198,109,.45);
  pointer-events: none;
  animation: tabHalo 1.15s ease-in-out infinite;
}
@keyframes tabHalo {
  0%, 100% { box-shadow: 0 0 10px rgba(242,198,109,.30); }
  50% { box-shadow: 0 0 24px rgba(242,198,109,.75), 0 0 34px rgba(255,92,138,.35); }
}
.tabbar button.glow.on::after { background: var(--gold); box-shadow: 0 0 9px rgba(242,198,109,.9); }

/* v124 — la courbe d'évolution de la complicité */
.evo { margin: .7rem 0 .5rem; }
.evo .sec-title { font-size: .8rem; margin-bottom: .4rem; }
.evo-svg { width: 100%; height: 5.2rem; display: block; overflow: visible; }
.evo-axe { stroke: var(--line); stroke-width: .4; }
.evo-sep { stroke: var(--line); stroke-width: .35; stroke-dasharray: 1.2 1.2; }
.evo-line { fill: none; stroke: var(--gold); stroke-width: 1;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(242,198,109,.55)); vector-effect: non-scaling-stroke; }
.evo-dot { fill: var(--rose); stroke: var(--bg); stroke-width: .3; }
.evo-legend { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .35rem;
  font-size: .68rem; color: var(--ink2); }
.evo-legend b { color: var(--gold); }
.evo-legend i { font-style: normal; opacity: .7; }

/* v125 — la jauge, intégrée à la carte de statut plutôt qu'en carte à part */
.gauge-block { margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.gauge-block .sec-title { font-size: .84rem; }

/* v125 — le rappel compact du réservoir d'envies, une fois l'îlot lancé */
.wish-mini { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line);
  font-size: .84rem; }
.wish-mini b { color: var(--gold); margin-left: .3rem; }
/* v205 — le compte d'envies libres, accolé au titre de la carte */
.wish-cpt { margin-left: auto; color: var(--gold); font-variant-numeric: tabular-nums; }
/* v206 — l'alerte du réservoir : le bouton passe en avant quand il faut agir */
.wish-etat { margin-top: .6rem; }
.wish-etat .btn-tiny { margin-top: .6rem; }
.wish-cpt.pill-warn { color: var(--rose); }
.wish-mini { justify-content: flex-start; }
.wish-mini b.pill-warn { color: var(--rose); }
.ap-seul { margin-top: 0; padding-top: 0; border-top: none; }

/* v126 — des flèches de navigation plus franches */
.nv-arrow { width: 2.7rem; height: 2.7rem; font-size: 1.5rem;
  background: rgba(20,5,15,.7); border: 1px solid var(--rose); color: var(--ink);
  box-shadow: 0 0 10px rgba(255,92,138,.18); }
.nv-arrow:disabled { opacity: .2; border-color: var(--line); box-shadow: none; }
.nv-meet { gap: 1rem; }
.nv-meet .nv-pos { font-size: .78rem; color: var(--gold); font-weight: 700; }

/* ============================================================
   v127 — entête plus compacte, cartes d'envie dépliables
   ============================================================ */
/* L'entête de l'îlot : visible, mais moins haute */
.card-hero .hero { padding: .5rem 0 .3rem; }
.card-hero .hero-hearts { font-size: 1.5rem; line-height: 1; margin-bottom: .1rem; }
.card-hero .hero-title { font-size: 1.4rem; margin-top: .05rem; }
.card-hero .hero-kicker { margin-bottom: .05rem; }
.card-hero .hero-sub { font-size: .82rem; }

/* Les envies : le détail se déplie, la section reste courte */
.gr-det { border-radius: 14px; }
.gr-det > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .5rem .6rem; border-radius: 14px; list-style: none;
  background: linear-gradient(135deg, rgba(242,198,109,.10), rgba(255,92,138,.07) 65%, transparent),
    var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--rose); }
.gr-det > summary::-webkit-details-marker { display: none; }
.gr-det[open] > summary { border-left-color: var(--gold); margin-bottom: .35rem; }
.gr-det > summary::after { content: '⌄'; margin-left: auto; color: var(--ink2); }
.gr-det[open] > summary::after { content: '⌃'; }
.gr-ico { flex: 0 0 auto; font-size: 1.05rem; }
.gr-sum { flex: 1 1 auto; min-width: 0; }
.gr-sum b { display: block; font-size: .85rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.gr-sum > span { display: block; font-size: .68rem; color: var(--ink2); }
.gr-det .gift { margin-top: 0; }

/* v128 — les envies dans la carte de statut, et un sous-titre pour les chiffres */
.gift-sec { margin-bottom: .7rem; }
.gift-sec:last-of-type { margin-bottom: .9rem; }
.gift-sec .sec-title { font-size: .86rem; margin-bottom: .35rem; }
.st-sub { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: .86rem; }
.gauge-block { margin-top: .6rem; padding-top: 0; border-top: none; }

/* v129 — boutons principaux un peu moins imposants, et l'absence de veillée annoncée */
.btn-main { padding: .68rem .9rem; font-size: .93rem; }
.is-none { margin: .5rem 0 .1rem; font-size: .8rem; color: var(--ink2); }

/* v130 — renommer l'îlot, cartes d'envie plus contrastées, objectif explicite */
.ren-btn { margin-left: .4rem; padding: .1rem .3rem; font-size: .78rem; cursor: pointer;
  background: none; border: none; color: var(--ink2); vertical-align: middle; opacity: .7; }
.ren-btn:active { color: var(--gold); opacity: 1; }
.gauge-quoi { margin: .2rem 0 .3rem; font-size: .76rem; color: var(--ink2); }
.gauge-quoi b { color: var(--gold); }

/* Les deux familles d'envies se distinguent au premier coup d'œil */
/* v133 : des classes explicites — « :nth-of-type » comptait parmi TOUS les div voisins,
   d'où des couleurs qui ne suivaient pas la bonne section. Le titre porte désormais
   toujours la couleur du liseré de ses cartes. */
.gift-sec .gr-det > summary { border-width: 1px 1px 1px 4px; }
.gift-sec .gr-sum b { color: var(--ink); }

.gs-todo .sec-title { color: var(--rose-soft); }
.gs-todo .gr-det > summary { border-left-color: var(--rose);
  background: linear-gradient(135deg, rgba(255,92,138,.22), rgba(255,92,138,.07) 70%, transparent),
    var(--surface); }
.gs-todo .gr-det[open] > summary { border-left-color: var(--rose); }

.gs-due .sec-title { color: var(--ok); }
.gs-due .gr-det > summary { border-left-color: var(--ok);
  background: linear-gradient(135deg, rgba(127,214,166,.22), rgba(127,214,166,.06) 70%, transparent),
    var(--surface); }
.gs-due .gr-det[open] > summary { border-left-color: var(--ok); }

.gs-wait .sec-title { color: var(--gold); }
.gs-wait .gr-det > summary { border-left-color: var(--gold);
  background: linear-gradient(135deg, rgba(242,198,109,.20), transparent 70%), var(--surface); }
.gs-wait .gr-det[open] > summary { border-left-color: var(--gold); }

/* v134 — le filtre d'auteur de l'album */
.alb-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem;
  justify-content: center; }
.alb-filter .chip { font-size: .76rem; }
.alb-filter .chip-on { border-color: var(--gold); color: var(--gold);
  background: rgba(242,198,109,.16); font-weight: 700; }
#lightbox:fullscreen { background: #000; }

/* v135 — l'avertissement avant de sceller sa préparation */
.last-q { margin: .6rem 0 .5rem; border-color: var(--gold); }
.last-q b { color: var(--gold); }

/* v136 — la carte des souvenirs, dessinée sans dépendance externe */
.carte-box { margin-top: .7rem; padding: .5rem; border-radius: 14px;
  background: rgba(20,5,15,.45); border: 1px solid var(--line); }
/* v137 : la mosaïque de tuiles, positionnée au pixel */
.mp { position: relative; width: 100%; overflow: hidden; border-radius: 12px;
  background: #2a2036; border: 1px solid var(--line); }
/* v139 : la carte se manipule. touch-action:none est INDISPENSABLE — sans lui le
   navigateur happe le glissement pour faire défiler la page, et le doigt ne déplace
   jamais la carte. */
.mp { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.mp:active { cursor: grabbing; }
/* Le calque porte tout et ne bouge que par transform : le déplacement ne coûte alors
   aucun recalcul de mise en page. */
.mp-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0;
  will-change: transform; }
.mp-tiles, .mp-pins { position: absolute; left: 0; top: 0; }
.mp-tile { position: absolute; width: 256px; height: 256px; pointer-events: none;
  filter: saturate(.75) brightness(.82) contrast(1.05); }
.mp-pin { position: absolute; transform: translate(-50%, -100%); z-index: 2;
  background: none; border: none; cursor: pointer; font-size: 1.35rem; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.85)); }
.mp-pin:active { transform: translate(-50%, -100%) scale(1.25); }
.mp-attr { font-size: .62rem; opacity: .65; }
.carte-leg { margin: .4rem 0 .1rem; font-size: .72rem; color: var(--ink2); text-align: center;
  line-height: 1.5; }
.geo-note { margin: .5rem 0 0; font-size: .7rem; color: var(--ink2); line-height: 1.5;
  text-align: center; }

/* ============================================================
   v138 — la carte en plein écran, avec la bande de photos
   ============================================================ */
.cp { position: fixed; inset: 0; z-index: 240; display: none; flex-direction: column;
  background: var(--bg); }
.cp-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .7rem); right: .8rem;
  z-index: 5; width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; background: rgba(20,5,15,.8); border: 1px solid var(--line);
  color: var(--ink); }
.cp-map { flex: 1 1 auto; min-height: 0; position: relative; }
.cp-map .mp { height: 100% !important; border: none; border-radius: 0; }
.cp-map .carte-leg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: .3rem .6rem; background: linear-gradient(transparent, rgba(10,3,8,.85) 45%); }
.cp-bas { flex: 0 0 auto; padding: .5rem .6rem calc(env(safe-area-inset-bottom, 0px) + .6rem);
  border-top: 1px solid var(--line); background: var(--surface); }
.cp-titre { font-size: .78rem; color: var(--ink2); margin-bottom: .4rem; }
.cp-geo { color: var(--gold); }
.cp-strip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.cp-vig { flex: 0 0 auto; width: 4.4rem; height: 4.4rem; padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: none; }
.cp-vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-vig:active { border-color: var(--gold); }
/* v139 — les commandes de zoom, et le mot qui remplace la bande quand la zone est vide */
.mp-ctl { position: absolute; right: .6rem; z-index: 4; display: flex; flex-direction: column;
  gap: .35rem; top: calc(env(safe-area-inset-top, 0px) + 3.6rem); }
.mp-ctl button { width: 2.4rem; height: 2.4rem; border-radius: 12px; cursor: pointer;
  font-size: 1.05rem; line-height: 1; color: var(--ink); background: rgba(20,5,15,.82);
  border: 1px solid var(--line); backdrop-filter: blur(3px); }
.mp-ctl button:active { border-color: var(--gold); }
.cp-vide { font-size: .74rem; color: var(--ink2); padding: 1.1rem .2rem; line-height: 1.5; }
/* v144 — la vignette tient la place le temps que la vraie image arrive. Le flou dit
   « ce n'est pas encore net », sans jamais laisser l'écran vide. */
.lb-img { transition: filter .3s ease; }
.lb-flou { filter: blur(7px) saturate(1.05); }

/* ============================================================
   v143 — l'arrêt sur question : le débat pendant le dépouillement
   ============================================================ */
.dbt-chrono { font-size: 2.6rem; font-weight: 700; text-align: center; margin: .6rem 0 .2rem;
  font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--gold); }
.dbt-urgent { color: var(--rose); animation: dbtPulse 1s ease-in-out infinite; }
@keyframes dbtPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.dbt-txt { font-size: .82rem; line-height: 1.6; text-align: center; color: var(--ink2);
  max-width: 30rem; margin: 0 auto .9rem; }
.dbt-txt b { color: var(--ink); }
.dbt-btns { display: flex; flex-direction: column; gap: .45rem; align-items: center; }
.dbt-btns .btn-main { min-width: 12rem; }
.dbt-wait { font-size: .85rem; text-align: center; color: var(--ink2); padding: 1.6rem .5rem;
  line-height: 1.6; }
/* v146 — les devinettes, sous les réponses, pendant le débat de la question commune */
/* v160 — le rappel de contexte, juste au-dessus de la question */
.dbt-rappel { font-size: .72rem; color: var(--ink2); text-align: center; margin: .2rem 0 .5rem; }
.dbt-rappel b { color: var(--ink); }
/* v171 — sur les pages d'annonce, l'ACTE prime : c'est lui qu'on doit lire d'un coup
   d'oeil, la question n'etant plus qu'un rappel. */
.dbt-acte { font-size: 1.3rem; font-weight: 700; text-align: center; line-height: 1.35;
  margin: .4rem 0 .5rem; color: var(--gold); }
.dbt-corr { font-size: 1.15rem; text-align: center; margin: 1rem 0 .6rem; }
/* v166 — le final : le meilleur score s'illumine, puis l'annonce se pose par-dessus. */
.sc-win { color: var(--gold); display: inline-block; transform: scale(1.25);
  transition: transform .45s ease, color .45s ease; text-shadow: 0 0 14px rgba(212,175,110,.5); }
.fin-pop { text-align: center; padding: .3rem 0 .1rem; }
.fin-titre { font-size: 1.35rem; font-weight: 700; margin-bottom: .5rem; }
.fin-score { font-size: 2rem; font-variant-numeric: tabular-nums; color: var(--gold);
  margin: .2rem 0 .1rem; }
.fin-score span { display: block; font-size: .8rem; color: var(--ink2); }
.fin-txt { font-size: .88rem; line-height: 1.6; margin: .8rem 0 1rem; }
/* v168 — le rappel de fin de traversée, discret d'ordinaire, marquant au dernier jour */
/* v169 — l'echeance dans la barre du haut */
.tb-fin { white-space: nowrap; }
.tb-fin-jour { color: var(--gold); font-weight: 600; }
.alert.cs-closed { border-color: var(--line); background: rgba(20,5,15,.55); }
/* v172 — les envies promises et pas encore realisees, au niveau de l'ilot */
/* v180 — la carte du soir : doree tant que l'envie est due, verte une fois tenue */
.gift-due { border-left: 3px solid var(--gold); }
.gift-faite { border-left: 3px solid #6fbf8b; }
.env-ok { color: #6fbf8b; }
.env-du { color: var(--gold); }
/* v183 — l'etat passe SOUS le nom : c'est le nom qu'on cherche d'abord, l'etat le
   qualifie ensuite. Les marges suivent ce renversement. */
.nv-mid .ph-name { margin: 0 0 .12rem; }
.nv-mid .ph-kicker { display: block; margin: 0; }
.hero .hero-title { margin-bottom: .12rem; }
.hero .hero-kicker { margin-top: 0; }
/* v185 — la fresque de complicité : largeur fixe par veillée, défilement si besoin */
.evo-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  margin: .2rem -.2rem .1rem; padding-bottom: .2rem; }
/* v190 — par defaut la fresque epouse la largeur de sa carte (le viewBox fait la mise
   a l'echelle) ; au-dela d'une douzaine de veillees elle reprend sa largeur propre et
   c'est le conteneur qui defile. */
.evo-svg { display: block; width: 100%; height: auto; }
.evo-svg.evo-fixe { width: auto; height: auto; }
/* v192 — deux fresques : la complicité de chaque veillée, puis la moyenne cumulée.
   Couleurs distinctes, échelle verticale commune (0 / 50 / 100 %). */
.evo-grille { stroke: var(--line); stroke-width: .5; stroke-dasharray: 2 3; opacity: .6; }
.evo-ech { fill: var(--ink2); font-size: 8px; }
.evo-jour { fill: var(--ink2); font-size: 7.5px; opacity: .85; }
.evo-line.evo-cum, .evo-dot.evo-cum { stroke: #7fb3d5; }
.evo-dot.evo-cum { fill: #7fb3d5; }
.evo-note { font-size: .66rem; color: var(--ink2); letter-spacing: .02em; font-style: italic;
  margin: .15rem 0 0; }
.evo-borne { fill: none; stroke: var(--line); stroke-width: 1; }
/* v188 — la traversée encore en cours se reconnaît : accolade pointillée, nom plus vif */
.evo-borne-vive { stroke-dasharray: 3 2; stroke: var(--gold); }
.evo-nom { fill: var(--ink2); font-size: 10px; font-weight: 600; }
.evo-nom-vive { fill: var(--gold); }
.evo-moy { fill: var(--ink2); font-size: 9px; }
/* v196 — la récompense acquise se voit : elle passe du doré discret au vert affirmé */
/* v198 — trois etats : à débloquer (doré), débloquée (vert), non débloquée (éteint) */
.reward-ok { color: #6fbf8b; border-color: #6fbf8b; }
.reward-ok b { color: #6fbf8b; }
.reward-ko { color: var(--ink2); border-color: var(--line); opacity: .85; }
.reward-ko b { color: var(--ink2); }
/* v197 — les envies : un intitulé sobre où seul le NOMBRE ressort, puis un rail
   horizontal comme pour les cartes du soir. Le jaune gras d'avant écrasait la phrase. */
/* v219 — la conclusion du bilan par famille : ce qu'on retient de la traversée */
/* v223 — l'appel : l'autre a écrit, c'est à toi */
.kiff-appel { font-size: .86rem; line-height: 1.5; color: var(--ink); margin: .2rem 0 .5rem; }
.kiff-appel b { color: var(--gold); }
/* v227 — la barre de suppression des doublons : toujours sous la main */
/* v228 : 6.2rem, la hauteur que .main reserve deja aux onglets — la barre se cale
   juste au-dessus au lieu de disparaitre derriere. */
.dup-barre { position: sticky; bottom: 3.4rem; z-index: 30; padding: .6rem .2rem .8rem;
  background: linear-gradient(to top, rgba(26,7,19,.97) 70%, rgba(26,7,19,0)); }
.dup-barre.dup-vide { opacity: .45; }
.dup-barre .btn-main { margin: 0; }
/* v222 — les kiffs, dépliables sous la veillée où ils ont été écrits */
.kf-toggle { display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--gold); font-size: .74rem; cursor: pointer; padding: .1rem 0 .35rem 2.1rem; }
.kf-box { padding: 0 0 .5rem 2.1rem; }
.kf-l { font-size: .84rem; line-height: 1.45; margin: .2rem 0; color: var(--ink); }
.kf-l b { color: var(--gold); margin-right: .25rem; }
.fam-verdict { border: 1px solid var(--gold); border-radius: .7rem; padding: .7rem .8rem;
  margin-top: .8rem; background: rgba(212,175,110,.07); }
.fam-verdict-t { font-family: var(--serif); font-size: .92rem; color: var(--gold);
  margin-bottom: .45rem; }
.fam-v-l { display: flex; align-items: baseline; gap: .4rem; margin: .3rem 0;
  font-size: .9rem; line-height: 1.4; }
.fam-v-fam { color: var(--gold); }
.fam-v-pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink2);
  font-size: .82rem; }
/* v220 — le même encadré sert aux conclusions de la traversée, avec sa teinte */
.verdict-ok { border-color: #6fbf8b; background: rgba(111,191,139,.08); }
.verdict-ok .fam-verdict-t, .verdict-ok .fam-v-fam { color: #6fbf8b; }
.verdict-ko { border-color: var(--line); background: rgba(255,255,255,.03); }
.verdict-ko .fam-verdict-t, .verdict-ko .fam-v-fam { color: var(--ink2); }
.env-grp { margin-top: .9rem; }
.env-tit { font-size: .82rem; color: var(--ink); line-height: 1.45; margin: 0 0 .4rem; }
.env-nb { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
/* v199 — l'état de la traversée d'où vient l'envie, discret mais lisible */
.env-etat { font-size: .68rem; opacity: .8; }
.env-etat-vive { color: var(--gold); opacity: 1; }
/* v202 — les fleches des rails d'envies sont plus discretes que celles qui font
   naviguer entre traversees : elles ne deroulent qu'une petite liste, elles n'ont pas
   besoin de la meme presence. On ne touche pas a .nv-arrow, employee a huit endroits. */
/* v208 — le glissement au doigt reste, la barre de defilement disparait : elle etait
   inesthetique sous les cartes, et les fleches suffisent a dire qu'il y a une suite. */
/* v211 — le filtre par auteur, au-dessus de la carte */
/* v212 — la seconde porte vers les fichiers, discrète sous la zone d'ajout */
.lien-fichiers { display: block; text-align: center; margin-top: .5rem; cursor: pointer;
  font-size: .8rem; color: var(--gold); }
.lien-fichiers span { display: block; color: var(--ink2); }
/* v215 — le filtre par auteur, en tête de la carte. La pastille active reprend la
   classe `.on` déjà définie pour les chips : une seule règle à maintenir. */
.cp-haut { flex: 0 0 auto; display: flex; gap: .4rem; justify-content: center;
  flex-wrap: wrap; padding: .5rem .6rem .35rem; background: rgba(10,3,8,.6); }
.cp-haut .chip { font-size: .74rem; padding: .2rem .6rem; }
.env-grp .gift-rail { scrollbar-width: none; -ms-overflow-style: none; }
.env-grp .gift-rail::-webkit-scrollbar { display: none; }
/* v208 — une fleche qui change de traversee se signale */
.nv-chg { border-color: var(--gold); color: var(--gold); }
.nv-sauts { display: flex; justify-content: space-between; gap: .6rem; margin-top: .1rem; }
.nv-saut { font-size: .66rem; color: var(--gold); margin: 0; }
.env-grp .nv-arrow { width: 1.7rem; height: 1.7rem; font-size: 1rem; }
.env-grp .gr-nav { gap: .5rem; margin-top: .25rem; }
.env-grp .gr-hint { font-size: .64rem; }
.env-grp .gift { margin-top: 0; }
.env-grp .btn-tiny { margin-top: .5rem; }
.env-grp .hint { margin: .35rem 0 0; }
.fin-trav { text-align: center; margin: 0 0 .6rem; }
.fin-trav-proche, .fin-trav-jour { border-radius: 12px; padding: .55rem .7rem; font-size: .82rem;
  line-height: 1.45; border: 1px solid var(--line); background: rgba(20,5,15,.45); }
.fin-trav-proche { color: var(--ink2); }
.fin-trav-proche b, .fin-trav-jour b { color: var(--ink); }
.fin-trav-jour { border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 16px rgba(212,175,110,.22); }
.fin-trav-jour b { color: var(--gold); font-size: .95rem; }
.fin-trav span { display: block; color: var(--ink2); font-size: .74rem; margin-top: .15rem; }
.dbt-pred { font-size: .72rem; color: var(--ink2); text-align: center; margin: .35rem 0 0;
  line-height: 1.5; }
/* v155 — la page du temps du debat : plein ecran, mais defilante si le texte deborde
   sur un petit telephone. */
#debat-plein { overflow-y: auto; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) .9rem 1.4rem; }
#debat-plein .film-stage { max-width: 34rem; width: 100%; }
.dbt-pred b { color: var(--ink); }
/* La trace d'une correction, dans la frame et au replay. */
.film-fix { display: block; margin-top: .3rem; font-size: .66rem; color: var(--ink2);
  line-height: 1.4; }
.film-fix s { opacity: .75; }
/* v140 — la bulle de grappe, à la manière d'Airbnb : le nombre de souvenirs au même
   endroit, et le nom du lieu quand on le connaît. */
.mp-grp { position: absolute; transform: translate(-50%, -50%); z-index: 3; cursor: pointer;
  display: flex; align-items: center; gap: .3rem; padding: .28rem .55rem; border-radius: 999px;
  background: rgba(20,5,15,.9); border: 1px solid var(--gold); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.6); white-space: nowrap; }
.mp-grp b { font-size: .82rem; line-height: 1; }
.mp-grp i { font-size: .66rem; font-style: normal; color: var(--ink2); max-width: 6.5rem;
  overflow: hidden; text-overflow: ellipsis; }
.mp-grp:active { transform: translate(-50%, -50%) scale(1.12); }
/* Les pastilles de zone : atteindre un groupe précis d'une seule tape. */
.cp-zones { display: flex; gap: .35rem; overflow-x: auto; padding: 0 0 .45rem; }
.cp-zones:empty { display: none; }
.zn { flex: 0 0 auto; padding: .3rem .6rem; border-radius: 999px; cursor: pointer;
  font-size: .72rem; white-space: nowrap; color: var(--ink2); background: rgba(20,5,15,.5);
  border: 1px solid var(--line); }
.zn span { opacity: .6; margin-left: .15rem; }
.zn-on { color: var(--ink); border-color: var(--gold); background: rgba(20,5,15,.85); }
.cp-lien { background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--gold); text-decoration: underline; }

/* v139 — sécurité du compte : code de récupération lisible sans ressembler à un champ éditable. */
.recovery-code { margin: .65rem 0; padding: .85rem .75rem; border: 1px dashed var(--gold);
  border-radius: 12px; text-align: center; font: 700 .95rem ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .05em; word-break: break-all; background: rgba(20,5,15,.38); color: var(--ink); }

/* v141 — indicateur de conformité des mots de passe. La couleur est doublée par
   un libellé et un texte afin que l'information ne repose jamais sur la couleur seule. */
.pw-meter{margin:.48rem 0 .72rem;padding:.62rem .72rem;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.035)}
.pw-meter-track{height:7px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.10)}
.pw-meter-fill{display:block;height:100%;width:0;border-radius:inherit;transition:width .18s ease,background-color .18s ease}
.pw-meter-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.42rem;font-size:.78rem}
.pw-meter-label{font-weight:850}.pw-meter-count{opacity:.66;font-size:.72rem;white-space:nowrap}
.pw-meter-hint{margin-top:.18rem;font-size:.72rem;line-height:1.35;opacity:.82}
.pw-meter[data-level="empty"] .pw-meter-fill{width:0;background:#89909a}
.pw-meter[data-level="red"] .pw-meter-fill{width:25%;background:#d93b50}
.pw-meter[data-level="red"] .pw-meter-label{color:#ff7182}
.pw-meter[data-level="orange"] .pw-meter-fill{width:50%;background:#e77825}
.pw-meter[data-level="orange"] .pw-meter-label{color:#ff9f50}
.pw-meter[data-level="yellow"] .pw-meter-fill{width:75%;background:#d7ad24}
.pw-meter[data-level="yellow"] .pw-meter-label{color:#f4d65f}
.pw-meter[data-level="green"] .pw-meter-fill{width:100%;background:#36a568}
.pw-meter[data-level="green"] .pw-meter-label{color:#71d69a}
.pw-match{margin:.16rem 0 .78rem;font-size:.72rem;line-height:1.35;opacity:.82;min-height:1em}
.pw-match[data-state="ok"]{color:#71d69a;opacity:1}.pw-match[data-state="bad"]{color:#ff7182;opacity:1}

.pref-disabled{opacity:.55}.pref-disabled input{cursor:not-allowed}


/* v147 — zone de suppression de compte : volontairement sobre et explicite. */
.danger-card { border-color: rgba(180,55,55,.34); background: rgba(150,35,35,.045); }
.danger-card .sec-title { color: #9d3333; }
.danger-btn { border-color: rgba(170,45,45,.55) !important; color: #9d3333 !important; }
.danger-btn:hover { background: rgba(170,45,45,.09) !important; }
.danger-ack { margin:.8rem 0; align-items:flex-start; }
.danger-card a { text-decoration: underline; }

/* v148 — inscription sans îlot obligatoire */
.btn-link-later{display:block;margin:.8rem auto .15rem;border:0;background:transparent;color:var(--muted,#786f75);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.45rem .8rem}
.btn-link-later:hover{color:var(--text,#2f2930)}
.onboarding-later-note{margin:.2rem 0 0}
.no-duo-hero .hero{margin-bottom:.45rem}
.no-duo-cta{margin-top:1rem;font-size:1.05rem;padding:.95rem 1rem}
.empty-duos{text-align:center;padding:1rem .5rem}
.empty-duos-ico{font-size:2rem;margin-bottom:.35rem}


/* v157 — afficher/masquer les mots de passe sans déplacer les champs. */
.pw-eye-wrap{position:relative;display:block;width:100%;box-sizing:border-box}
.pw-eye-wrap>input{display:block;width:100%!important;padding-right:3.25rem!important;box-sizing:border-box}
.pw-eye{position:absolute!important;right:.48rem!important;top:50%!important;transform:translateY(-50%)!important;width:2.25rem!important;height:2.25rem!important;min-width:2.25rem!important;margin:0!important;padding:.48rem!important;border:1px solid rgba(242,198,109,.48)!important;border-radius:999px!important;background:rgba(32,9,25,.92)!important;color:#f2c66d!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;line-height:1!important;opacity:1!important;z-index:12!important;box-shadow:0 1px 8px rgba(0,0,0,.35)!important}
.pw-eye svg{display:block;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pw-eye:hover,.pw-eye:focus-visible{background:rgba(68,25,50,.98)!important;outline:2px solid rgba(242,198,109,.42)!important;outline-offset:1px}
.pw-eye[aria-pressed="true"]{color:#ff8fb3!important}

/* v157 — pages publiques conformité. */
.policy-wrap{width:min(820px,92vw);margin:2.2rem auto 4rem}
.policy-wrap h1{font-family:var(--serif);margin-bottom:.4rem}
.policy-wrap h2{font-family:var(--serif);font-size:1.28rem;margin-top:1.5rem}
.policy-wrap p,.policy-wrap li{line-height:1.62}
.policy-wrap ul{padding-left:1.25rem}
.policy-meta{padding:.8rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--card);margin:1rem 0}

/* v159 — calibration desktop sans changer la densité mobile. */
@media (min-width: 960px) {
  .login-wrap { max-width: 560px; }
  .topbar-in, .main { max-width: 820px; }
  .modal { max-width: 680px; padding: 1.35rem 1.5rem 1.8rem; }
}

/* v162 — départ du binôme / îlot archivé. */
.depart-list{margin:.75rem 0 .9rem;padding-left:1.25rem;line-height:1.5}
.depart-list li{margin:.28rem 0}
.archive-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.8rem 0}
@media (max-width:520px){.archive-actions{grid-template-columns:1fr}}

/* v166 — retour persistant lors de la suppression du compte */
.delete-account-msg{min-height:1.35rem;margin:.55rem 0 0;text-align:center;font-size:.9rem;font-weight:650;color:var(--muted)}
.delete-account-msg.err{color:#a22f2f}

/* v233 — état explicite de l'e-mail de récupération dans le profil. */
.recovery-email-state {
  margin: .7rem 0;
  padding: .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(20,5,15,.32);
}
.recovery-email-state.verified { border-color: var(--ok); background: rgba(127,214,166,.08); }
.recovery-email-state.pending { border-style: dashed; }
.recovery-email-state-title { font-weight: 700; margin-bottom: .22rem; }
.recovery-email-address { font-weight: 650; overflow-wrap: anywhere; }
.recovery-email-change {
  margin-top: .7rem;
  padding: .8rem .85rem;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(20,5,15,.25);
}


/* OAI UX LIGHT v1.0 — divulgation progressive : le principal d'abord, le détail sur demande. */
.ux-fold { overflow:hidden; padding:0 !important; }
.ux-fold > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; padding:1.05rem 1.1rem; font-family:var(--serif); font-size:1.08rem; font-weight:700; color:var(--ink); }
.ux-fold > summary::-webkit-details-marker { display:none; }
.ux-fold > summary::after { content:'⌄'; flex:0 0 auto; color:var(--gold); font-family:system-ui,sans-serif;
  font-size:1.15rem; transition:transform .18s ease; }
.ux-fold[open] > summary::after { transform:rotate(180deg); }
.ux-fold[open] > summary { border-bottom:1px solid var(--line); }
.ux-fold-meta { margin-left:auto; color:var(--ink2); font-family:system-ui,sans-serif; font-size:.72rem; font-weight:500; }
.ux-fold-body { padding:.2rem 1.05rem 1.05rem; }
.ux-fold-body > .qrow:first-child, .ux-fold-body > .fam-row:first-of-type { margin-top:.65rem; }


/* OAI UX FLOW v1.0 — navigation horizontale moderne de la Traversée. */
.season-pager-shell { margin-top:.25rem; }
.season-pager-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.38rem;
  margin:.25rem 0 .35rem; padding:.3rem; border:1px solid var(--line); border-radius:17px;
  background:rgba(20,5,15,.32); backdrop-filter:blur(10px); }
.season-pager-tab { min-width:0; border:0; border-radius:13px; padding:.7rem .3rem; cursor:pointer;
  background:transparent; color:var(--ink2); font-size:.75rem; font-weight:700; transition:transform .18s ease,background .22s ease,color .22s ease,box-shadow .22s ease; }
.season-pager-tab span { display:block; font-size:1.06rem; margin-bottom:.12rem; }
.season-pager-tab.on { color:var(--ink); background:linear-gradient(135deg,rgba(241,187,109,.17),rgba(210,72,126,.13));
  box-shadow:inset 0 0 0 1px rgba(241,187,109,.28),0 5px 16px rgba(0,0,0,.12); }
.season-pager-tab:active { transform:scale(.975); }
.season-pager-caption { min-height:18px; display:flex; align-items:center; justify-content:center; gap:.3rem; margin:0 0 .45rem; color:var(--ink2); }
.season-pager-caption small { margin-left:.25rem; font-size:.64rem; opacity:.72; }
.season-pager-dot { width:5px; height:5px; border-radius:50%; background:var(--line); transition:width .2s ease,background .2s ease; }
.season-pager-dot.on { width:16px; border-radius:999px; background:var(--gold); }
.season-pager-viewport { overflow:hidden; transition:height .32s cubic-bezier(.22,.8,.32,1); touch-action:pan-y; }
.season-pager-track { display:flex; align-items:flex-start; width:100%; will-change:transform;
  transition:transform .34s cubic-bezier(.22,.8,.32,1); }
.season-pane { flex:0 0 100%; width:100%; min-width:0; padding:0 1px .35rem; }
.season-pane > :first-child { margin-top:.08rem; }
.season-glance { padding:.9rem 1rem; }
.season-glance-head { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-bottom:.7rem; }
.season-glance-badge { flex:0 0 auto; font-size:.69rem; color:var(--ink2); border:1px solid var(--line); border-radius:999px; padding:.28rem .5rem; }
.season-glance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
.season-glance-grid > div { min-width:0; text-align:center; padding:.6rem .25rem; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.045); }
.season-glance-grid b { display:block; font-size:1rem; }
.season-glance-grid span { display:block; color:var(--ink2); font-size:.63rem; margin-top:.13rem; line-height:1.2; }
.season-no-due { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.8rem 1rem; }
.home-wish-nudge .alert { border-radius:12px; }
.wish-ilot-choices { display:grid; gap:.55rem; margin:.8rem 0 1rem; }
.wish-ilot-choice { width:100%; border:1px solid var(--line); border-radius:15px; padding:.78rem .8rem; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; gap:.65rem; align-items:center; text-align:left; color:var(--ink);
  background:rgba(255,255,255,.025); cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.wish-ilot-choice.on { border-color:rgba(241,187,109,.55); background:rgba(241,187,109,.075); }
.wish-ilot-choice:active { transform:scale(.985); }
.wic-ico { font-size:1.25rem; }.wic-main { min-width:0; }.wic-main b,.wic-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wic-main small { color:var(--ink2); margin-top:.12rem; font-size:.69rem; }.wic-state { font-size:.64rem; color:var(--ink2); border-radius:999px; padding:.25rem .42rem; background:rgba(80,190,130,.11); }
.wic-state.warn { color:var(--gold); background:rgba(241,187,109,.11); }
@media (max-width:390px) { .season-pager-tab { font-size:.69rem; padding:.64rem .2rem; } .season-glance-grid span { font-size:.59rem; } }
@media (prefers-reduced-motion:reduce) { .season-pager-track,.season-pager-viewport,.season-pager-tab,.season-pager-dot { transition:none !important; } }


/* OAI UX FLOW v1.2 — Îlot + Veillée : groupes horizontaux fluides. */
.ux-pager-shell{margin-top:.2rem}.ux-pager-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.38rem;margin:.25rem 0 .35rem;padding:.3rem;border:1px solid var(--line);border-radius:17px;background:rgba(20,5,15,.32);backdrop-filter:blur(10px)}
.ux-pager-tab{min-width:0;border:0;border-radius:13px;padding:.7rem .26rem;cursor:pointer;background:transparent;color:var(--ink2);font-size:.74rem;font-weight:700;transition:transform .18s ease,background .22s ease,color .22s ease,box-shadow .22s ease}.ux-pager-tab span{display:block;font-size:1.06rem;margin-bottom:.12rem}.ux-pager-tab.on{color:var(--ink);background:linear-gradient(135deg,rgba(241,187,109,.17),rgba(210,72,126,.13));box-shadow:inset 0 0 0 1px rgba(241,187,109,.28),0 5px 16px rgba(0,0,0,.12)}.ux-pager-tab:active{transform:scale(.975)}
.ux-pager-caption{min-height:18px;display:flex;align-items:center;justify-content:center;gap:.3rem;margin:0 0 .45rem;color:var(--ink2)}.ux-pager-caption small{margin-left:.25rem;font-size:.64rem;opacity:.72}.ux-pager-dot{width:5px;height:5px;border-radius:50%;background:var(--line);transition:width .2s ease,background .2s ease}.ux-pager-dot.on{width:16px;border-radius:999px;background:var(--gold)}
.ux-pager-viewport{overflow:hidden;transition:height .32s cubic-bezier(.22,.8,.32,1);touch-action:pan-y}.ux-pager-track{display:flex;align-items:flex-start;width:100%;will-change:transform;transition:transform .34s cubic-bezier(.22,.8,.32,1)}.ux-pane{flex:0 0 100%;width:100%;min-width:0;padding:0 1px .35rem}.ux-pane>:first-child{margin-top:.08rem}
.ux-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.ux-quick-grid button{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);color:var(--ink);padding:.8rem .65rem;text-align:left;cursor:pointer}.ux-quick-grid button>span{font-size:1.18rem;display:block}.ux-quick-grid b,.ux-quick-grid small{display:block}.ux-quick-grid small{color:var(--ink2);font-size:.66rem;margin-top:.1rem}.wish-access-hint{margin-top:.55rem;color:var(--ink2);font-size:.66rem;line-height:1.35}.wish-access-hint b{color:var(--ink)}.meeting-result-head{margin-bottom:.12rem}.meeting-result-head h2{margin:.25rem 0 .45rem}
#menu-wish{display:flex!important;align-items:center;justify-content:space-between;gap:.5rem}.menu-wish-state{margin-left:.5rem;padding:.18rem .38rem;border-radius:999px;font-size:.6rem;font-weight:800;color:var(--gold);background:rgba(241,187,109,.12);border:1px solid rgba(241,187,109,.24)}.menu-wish-state.soft{color:var(--ink2);background:rgba(255,255,255,.04);border-color:var(--line)}#menu-wish.menu-wish-alert{background:linear-gradient(90deg,rgba(241,187,109,.10),rgba(210,72,126,.06))}
@media(max-width:390px){.ux-pager-tab{font-size:.68rem;padding:.64rem .18rem}.ux-quick-grid{gap:.42rem}.ux-quick-grid button{padding:.7rem .55rem}}
@media(prefers-reduced-motion:reduce){.ux-pager-track,.ux-pager-viewport,.ux-pager-tab,.ux-pager-dot{transition:none!important}}


/* OAI SOUVENIR PHOTOS v1.0 — petit ruban de photos dans le souvenir d'une veillée. */
.meeting-photos-card{overflow:hidden}
.meeting-photo-rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.meeting-photo-rail::-webkit-scrollbar{display:none}
.meeting-photo-vig{flex:0 0 min(38vw,150px);aspect-ratio:4/3;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--card-soft,#eee);scroll-snap-align:start;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.meeting-photo-vig img{width:100%;height:100%;display:block;object-fit:cover}
.meeting-photo-vig:active{transform:scale(.985)}
.meeting-photo-foot{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;opacity:.66;margin-top:-2px}
.mpv{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;background:rgba(7,8,14,.96);touch-action:pan-y}
.mpv-img{max-width:100vw;max-height:92vh;object-fit:contain;user-select:none;-webkit-user-drag:none}
.mpv-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;font-size:1.25rem;background:rgba(255,255,255,.15);color:#fff}
.mpv-count{position:absolute;top:max(22px,calc(env(safe-area-inset-top) + 8px));left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.34);padding:5px 10px;border-radius:999px;font-size:.82rem}
.mpv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:58px;border:0;border-radius:14px;background:rgba(0,0,0,.32);color:#fff;font-size:2.2rem}
.mpv-prev{left:8px}.mpv-next{right:8px}
.mpv-meta{position:absolute;left:12px;right:12px;bottom:max(15px,env(safe-area-inset-bottom));text-align:center;color:#fff;font-size:.85rem;text-shadow:0 1px 4px #000}
@media(min-width:700px){.meeting-photo-vig{flex-basis:160px}.mpv-arrow{width:50px}}


/* OAI SOUVENIR PHOTOS v1.1 — la page Souvenirs devient une vraie carte mémoire. */
.meeting-souvenir-hero{position:relative;overflow:hidden;padding:1.05rem 1rem;text-align:center;background:linear-gradient(145deg,rgba(241,187,109,.14),rgba(210,72,126,.11) 54%,rgba(122,76,184,.10));border-color:rgba(241,187,109,.28)}
.meeting-souvenir-hero:after{content:'✦';position:absolute;right:12px;top:5px;font-size:2.7rem;opacity:.07;transform:rotate(10deg)}
.meeting-souvenir-kicker{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);font-weight:850}
.meeting-souvenir-date{font-size:1rem;font-weight:800;margin:.22rem 0 .42rem}
.meeting-souvenir-score{display:flex;align-items:center;justify-content:center;gap:.55rem}.meeting-souvenir-score b{font-size:1.72rem}.meeting-souvenir-score span{font-size:.74rem;color:var(--ink2)}
.meeting-souvenir-verdict{margin-top:.35rem;font-size:.76rem;color:var(--ink2)}
.meeting-photos-has{border-color:rgba(241,187,109,.22);background:linear-gradient(180deg,rgba(241,187,109,.06),rgba(255,255,255,.015))}
.meeting-photo-kicker{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:800;margin-bottom:.25rem}
.meeting-photo-vig:first-child{flex-basis:min(58vw,230px);box-shadow:0 7px 22px rgba(0,0,0,.16)}
.meeting-photos-empty{text-align:center;padding:1.15rem 1rem;border-style:dashed;border-color:rgba(241,187,109,.32);background:linear-gradient(145deg,rgba(241,187,109,.07),rgba(210,72,126,.045))}
.meeting-photo-empty-ico{font-size:2rem;line-height:1;margin-bottom:.45rem;filter:grayscale(.1)}
.meeting-photo-add{margin:.65rem auto .35rem;display:inline-flex!important;width:auto!important;align-items:center;justify-content:center}
.meeting-photo-empty-hint{font-size:.64rem;color:var(--ink2);opacity:.82}


/* OAI UX FLOW v1.3 — micro-indice de découverte du swipe, jamais bloquant. */
.ux-pager-shell,.season-pager-shell{position:relative}
.ux-swipe-cue{position:absolute;z-index:8;left:50%;bottom:.55rem;transform:translate(-50%,8px) scale(.98);opacity:0;
  pointer-events:none;display:flex;align-items:center;gap:.45rem;max-width:calc(100% - 2rem);padding:.48rem .72rem;border-radius:999px;
  border:1px solid rgba(241,187,109,.28);background:rgba(25,8,18,.88);backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.22);
  color:var(--ink2);font-size:.68rem;line-height:1.2;white-space:nowrap;transition:opacity .24s ease,transform .24s ease}
.ux-swipe-cue.show{opacity:.94;transform:translate(-50%,0) scale(1)}
.ux-swipe-cue.out{opacity:0;transform:translate(-50%,5px) scale(.98)}
.ux-swipe-arrow{color:var(--gold);font-size:.92rem;font-weight:900}
.ux-pager-track.ux-peek,.season-pager-track.ux-peek{animation:uxSwipePeek .72s cubic-bezier(.22,.8,.32,1)}
@keyframes uxSwipePeek{0%,100%{transform:translate3d(0,0,0)}42%{transform:translate3d(-12px,0,0)}68%{transform:translate3d(-5px,0,0)}}
@media(max-width:390px){.ux-swipe-cue{font-size:.64rem;max-width:calc(100% - 1rem);padding:.44rem .62rem}}
@media(prefers-reduced-motion:reduce){.ux-swipe-cue{transition:none!important}.ux-pager-track.ux-peek,.season-pager-track.ux-peek{animation:none!important}}


/* OAI UX FLOW v1.4 — lanceur contextuel persistant, sans preview du contenu. */
.ux-context-orb{position:fixed;z-index:58;right:max(12px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 72px);
  opacity:0;transform:translate3d(10px,0,0) scale(.96);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.ux-context-orb.show{opacity:1;transform:translate3d(0,0,0) scale(1);pointer-events:auto}
.ux-context-orb.out{opacity:0;transform:translate3d(7px,0,0) scale(.96);pointer-events:none}
.ux-context-orb-btn{appearance:none;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:.42rem;cursor:pointer;
  filter:drop-shadow(0 8px 18px rgba(35,7,22,.28));-webkit-tap-highlight-color:transparent}
.ux-context-orb-disc{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:1.28rem;
  color:#fff;background:linear-gradient(145deg,#d8497e,#9c55c4);border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 0 rgba(216,73,126,.28);animation:uxOrbPulse 2.8s ease-out 2}
.ux-context-orb-label{padding:.44rem .62rem;border-radius:999px;background:rgba(31,12,24,.92);color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.01em;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);white-space:nowrap}
.ux-context-orb-btn:focus-visible .ux-context-orb-disc{outline:3px solid rgba(241,187,109,.72);outline-offset:3px}
.ux-context-orb-btn:active .ux-context-orb-disc{transform:scale(.94)}
@keyframes uxOrbPulse{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 0 rgba(216,73,126,.28)}70%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 10px rgba(216,73,126,0)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 0 rgba(216,73,126,0)}}
@media(max-width:390px){.ux-context-orb{right:9px}.ux-context-orb-disc{width:47px;height:47px}.ux-context-orb-label{font-size:.64rem;padding:.4rem .54rem}}
@media(prefers-reduced-motion:reduce){.ux-context-orb,.ux-context-orb-disc{transition:none!important;animation:none!important}}

/* 💗 OAI MEMORY NUDGE v1.5 — cœur plus sage, texte sans pastille opaque, puis carte
   souvenir en fondu/relief au clic. */
.ux-memory-nudge-sticky{position:fixed;z-index:58;right:max(6px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 104px)}
.ux-memory-nudge .ux-memory-nudge-btn{flex-direction:column;gap:.14rem;width:76px;align-items:center;filter:drop-shadow(0 7px 15px rgba(35,7,22,.24))}
.ux-memory-nudge .ux-context-orb-disc{width:44px;height:44px;font-size:1.1rem;animation:uxMemoryHeart 3.35s ease-in-out infinite;will-change:transform,box-shadow}
.ux-memory-nudge-label{display:block;max-width:82px;padding:0;background:transparent!important;border:0!important;border-radius:0;
  color:rgba(255,244,248,.95);font-size:.57rem;font-weight:700;line-height:1.15;text-align:center;
  text-shadow:0 1px 10px rgba(18,3,12,.55),0 0 1px rgba(18,3,12,.85);box-shadow:none!important;backdrop-filter:none!important}
@keyframes uxMemoryHeart{
  0%,100%{transform:scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 0 rgba(216,73,126,0)}
  8%{transform:scale(1.065);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 5px rgba(216,73,126,.12)}
  16%{transform:scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 9px rgba(216,73,126,0)}
  24%{transform:scale(1.04)}
  32%{transform:scale(1)}
}
.memory-nudge-card-back{position:fixed;inset:0;z-index:240;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(14,4,12,.44);backdrop-filter:blur(4px);opacity:0;transition:opacity .26s ease}
.memory-nudge-card-back.show{opacity:1}
.memory-nudge-card{position:relative;width:min(30rem,100%);max-height:min(82svh,700px);overflow:auto;padding:1rem .95rem 1.05rem;
  border-radius:22px;background:linear-gradient(160deg,rgba(29,11,23,.97),rgba(46,20,36,.96));border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  transform:perspective(900px) translate3d(0,18px,0) rotateX(7deg) scale(.97);opacity:.84;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .26s ease}
.memory-nudge-card-back.show .memory-nudge-card{transform:perspective(900px) translate3d(0,0,0) rotateX(0) scale(1);opacity:1}
.memory-nudge-card-close{position:absolute;top:.6rem;right:.65rem;width:2rem;height:2rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:1rem;z-index:2}
.memory-nudge-card-shell{display:flex;flex-direction:column;gap:.8rem}
.memory-nudge-card-hero{position:relative;overflow:hidden;padding:1rem .95rem .9rem;text-align:center;border-radius:18px;
  background:linear-gradient(145deg,rgba(241,187,109,.16),rgba(210,72,126,.14) 54%,rgba(122,76,184,.14));border:1px solid rgba(241,187,109,.22)}
.memory-nudge-card-hero:after{content:'✦';position:absolute;right:12px;top:4px;font-size:2.4rem;opacity:.08;transform:rotate(10deg)}
.memory-nudge-card-kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:850;padding-right:1.6rem}
.memory-nudge-card-date{font-size:1rem;font-weight:800;margin:.28rem 0 .42rem}
.memory-nudge-card-score{display:flex;align-items:center;justify-content:center;gap:.55rem}.memory-nudge-card-score b{font-size:1.72rem}.memory-nudge-card-score span{font-size:.74rem;color:var(--ink2)}
.memory-nudge-card-verdict{margin-top:.35rem;font-size:.77rem;color:var(--ink2);line-height:1.35}
.memory-nudge-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.memory-nudge-card-actions .btn-main,.memory-nudge-card-actions .btn-ghost{width:100%;margin:0}
.memory-nudge-card-loading{display:grid;place-items:center;gap:.5rem;min-height:220px}
.memory-nudge-card-loader{font-size:2rem;animation:uxMemoryHeart 3.35s ease-in-out infinite}
.memory-nudge-photos-wrap{padding:.2rem 0 .05rem}
.memory-nudge-photos-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.45rem;color:var(--ink2);font-size:.73rem}
.memory-nudge-photo-rail{display:flex;gap:.48rem;overflow:auto;padding-bottom:.1rem}
.memory-nudge-photo-vig{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);padding:0;border-radius:15px;overflow:hidden;flex:0 0 88px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.memory-nudge-photo-vig.big{flex-basis:min(46vw,170px)}
.memory-nudge-photo-vig img{display:block;width:100%;height:88px;object-fit:cover}.memory-nudge-photo-vig.big img{height:112px}
.memory-nudge-photos-more{margin-top:.35rem;font-size:.67rem;color:var(--ink2);text-align:right}
.memory-nudge-empty{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.65rem;padding:.72rem .76rem;border-radius:16px;
  border:1px dashed rgba(241,187,109,.28);background:linear-gradient(145deg,rgba(241,187,109,.055),rgba(210,72,126,.035))}
.memory-nudge-empty .sec-title{margin:0 0 .18rem}.memory-nudge-empty p{margin:0;line-height:1.4}
.memory-nudge-empty-ico{font-size:1.65rem;line-height:1;opacity:.88}.memory-nudge-empty .btn-tiny{grid-column:1/-1;width:auto;margin:.05rem auto 0}
.memory-nudge-kiffs{display:grid;gap:.5rem;padding:.12rem 0}.memory-nudge-kiff{padding:.72rem .78rem;border-radius:15px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:.86rem;line-height:1.45}
.memory-nudge-kiffs-empty{padding:.72rem .76rem;border-radius:16px;border:1px dashed rgba(216,73,126,.22);background:rgba(216,73,126,.035)}
.memory-nudge-kiffs-empty .sec-title{margin-bottom:.2rem}.memory-nudge-kiffs-empty p{margin:0;line-height:1.4}
body.memory-nudge-card-open{overflow:hidden}
@media(max-width:390px){.ux-memory-nudge-sticky{right:max(6px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 98px)}.ux-memory-nudge .ux-memory-nudge-btn{width:72px}.ux-memory-nudge-label{max-width:78px;font-size:.55rem}.memory-nudge-card{padding:.9rem .82rem 1rem}.memory-nudge-card-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ux-memory-nudge .ux-context-orb-disc,.memory-nudge-card-loader{animation:none!important}.memory-nudge-card-back,.memory-nudge-card{transition:none!important}}

/* ============================================================
   OAI ADMIN MEMORY v1.2 — administration plus compacte et lisible
   ============================================================ */
.adm-hero-compact{padding-bottom:.9rem}
.adm-kpis{display:flex;flex-wrap:wrap;justify-content:center;gap:.32rem .8rem;margin-top:.55rem;font-size:.76rem;color:var(--ink2)}
.adm-kpis > span{display:inline-flex;align-items:baseline;gap:.24rem;padding:.08rem 0}
.adm-kpis b{font-size:.92rem;color:var(--ink)}
.adm-kpis-stats{justify-content:flex-start;gap:.45rem 1rem}
.adm-kpis-stats > span{flex-direction:column;align-items:flex-start;gap:.02rem;min-width:110px}
.adm-kpis-stats small{display:block;font-size:.62rem;color:var(--ink2);font-weight:500}
.adm-inline-alert{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.65rem;padding:.48rem 0;border-top:1px solid var(--line);font-size:.76rem;color:var(--gold)}

.adm-panel{margin:.7rem 0;padding:.72rem .78rem;background:rgba(20,5,15,.22);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.adm-panel-title{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.45rem;font-family:var(--serif);font-weight:800;font-size:1rem}
.adm-duo{padding:.68rem 0;border-top:1px solid rgba(255,255,255,.08)}
.adm-duo:first-of-type{border-top:0}
.adm-duo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem}
.adm-duo-main{min-width:0;flex:1 1 auto}
.adm-duo-title{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-size:.9rem}
.adm-members{margin-top:.15rem;font-size:.72rem;color:var(--ink2)}
.adm-duo-status{margin-top:.32rem}
.adm-schedule{display:inline-flex;align-items:center;gap:.2rem;font-size:.72rem;font-weight:750}
.adm-schedule-on{color:var(--ok)}
.adm-schedule-live{color:var(--rose-soft)}
.adm-schedule-wait{color:var(--gold)}
.adm-schedule-none{color:var(--ink2)}
.adm-meta-line{display:flex;flex-wrap:wrap;gap:.18rem .65rem;margin-top:.38rem;font-size:.67rem;color:var(--ink2)}
.adm-meta-line span{padding:0;background:none;border:0}
.adm-seasons-flat{margin-top:.38rem;padding-left:.45rem;border-left:2px solid rgba(255,255,255,.07)}
.adm-season-line{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;padding:.42rem 0;border-top:1px dashed rgba(255,255,255,.08)}
.adm-season-line:first-child{border-top:0}
.adm-season-copy{display:flex;flex-direction:column;gap:.08rem;min-width:0;font-size:.78rem}
.adm-ok-text,.adm-warn-text{font-size:.64rem}
.adm-ok-text{color:var(--ok)}
.adm-warn-text{color:var(--gold)}
.adm-actions-top{align-items:flex-start}
.adm-memory-test{border-color:rgba(216,73,126,.42);color:var(--rose-soft);background:rgba(216,73,126,.09)}
.adm-users-flat{display:grid;gap:0}
.adm-user-line{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.44rem 0;border-top:1px dashed rgba(255,255,255,.08);font-size:.8rem}
.adm-user-line:first-child{border-top:0}
.adm-user-usage{align-items:flex-start}
.adm-privacy-note{margin:.55rem 0 0;font-size:.68rem;line-height:1.42;color:var(--ink2)}
.adm-footer-actions{display:grid;gap:.5rem;margin:.8rem 0 1rem}
.adm-empty-line{padding:.45rem 0;color:var(--ink2);font-size:.74rem}

.adm-memory-targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.8rem 0}
.adm-memory-target{appearance:none;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);color:var(--ink);padding:.75rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer}
.adm-memory-target span{font-size:1.45rem}.adm-memory-target:active{transform:scale(.98);background:rgba(216,73,126,.1)}

.adm-charts-panel{padding-bottom:.2rem}
.adm-chart-row{padding:.68rem 0 .75rem;border-top:1px solid rgba(255,255,255,.08)}
.adm-chart-row:first-of-type{border-top:0}
.adm-chart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:.7rem}
.adm-chart-head > div{display:flex;flex-direction:column;gap:.06rem}.adm-chart-head b{font-size:.82rem}.adm-chart-head span{font-size:.64rem;color:var(--ink2)}
.adm-chart-head strong{font-size:.9rem;color:var(--ink2)}
.adm-spark{height:72px;margin-top:.35rem;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;padding:.2rem 0 0}
.adm-spark-hit{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;border-radius:4px;transition:background .15s ease,transform .15s ease}
.adm-spark-hit:hover,.adm-spark-hit:focus-visible{background:rgba(255,255,255,.07);outline:none;transform:translateY(-1px)}
.adm-spark-hit:active{background:rgba(216,73,126,.12);transform:none}
.adm-spark-hit .spark-bar{pointer-events:none}
.adm-detail-list{display:grid;gap:0;margin:.5rem 0 .8rem;max-height:55vh;overflow:auto}
.adm-detail-line{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.5rem .05rem;border-top:1px dashed rgba(255,255,255,.1);font-size:.8rem}
.adm-detail-line:first-child{border-top:0}
.adm-detail-stack{align-items:flex-start;flex-direction:column;gap:.1rem}

@media(max-width:560px){
  .adm-duo-top,.adm-season-line,.adm-user-line{gap:.45rem}
  .adm-duo-top{flex-direction:column}
  .adm-actions-top{width:100%;justify-content:flex-end}
  .adm-season-line{flex-direction:column}
  .adm-season-line .adm-actions{align-self:flex-end}
  .adm-kpis-stats > span{min-width:92px}
}

/* OAI ADMIN MEMORY v1.3 — hiérarchie explicite ÎLOT > TRAVERSÉES, sans revenir
   aux boîtes imbriquées de l'ancienne administration. */
.adm-duo-v13{padding:.78rem 0 1rem}
.adm-scope-label{display:inline-flex;align-items:center;font-size:.56rem;font-weight:900;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;margin-bottom:.22rem}
.adm-island-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.adm-island-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.18rem .85rem;margin:.52rem 0 .3rem;padding:.42rem 0;border-top:1px dashed rgba(255,255,255,.08);border-bottom:1px dashed rgba(255,255,255,.08)}
.adm-island-facts>span,.adm-season-data>span{display:flex;flex-direction:column;gap:.02rem;min-width:0}
.adm-island-facts small,.adm-season-data small{font-size:.55rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.adm-island-facts b{font-size:.7rem;font-weight:750;color:var(--ink)}
.adm-island-schedule{display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.38rem 0 .08rem}
.adm-schedule-caption{font-size:.61rem;color:var(--ink2)}
.adm-scope-divider{margin-top:.72rem;padding-top:.62rem;border-top:1px solid rgba(255,255,255,.12)}
.adm-scope-divider>div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.adm-scope-label-season{margin:0;color:var(--rose-soft)}
.adm-scope-divider small{font-size:.61rem;color:var(--ink2)}
.adm-seasons-v13{margin-top:.22rem}
.adm-season-v13{position:relative;display:flex;gap:.55rem;padding:.62rem 0 .66rem;border-top:1px dashed rgba(255,255,255,.09)}
.adm-season-v13:first-child{border-top:0}
.adm-season-rail{flex:0 0 3px;border-radius:999px;background:linear-gradient(180deg,rgba(216,73,126,.72),rgba(241,187,109,.42));opacity:.85}
.adm-season-v13.is-closed .adm-season-rail{background:rgba(255,255,255,.16)}
.adm-season-v13-body{min-width:0;flex:1 1 auto}
.adm-season-v13-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.65rem}
.adm-season-kicker{display:block;font-size:.52rem;letter-spacing:.09em;color:var(--ink2);font-weight:850;margin-bottom:.08rem}
.adm-season-name{font-size:.82rem;line-height:1.25}
.adm-season-schedule{margin:.22rem 0 .35rem}
.adm-season-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.28rem .7rem;margin-bottom:.32rem}
.adm-season-data b{font-size:.67rem;font-weight:700;line-height:1.25;color:var(--ink)}
.adm-season-v13 .adm-ok-text,.adm-season-v13 .adm-warn-text{padding-top:.14rem}
@media(max-width:520px){
  .adm-island-head,.adm-season-v13-head{flex-direction:column;gap:.38rem}
  .adm-island-head .adm-actions-top,.adm-season-v13-head .adm-actions{width:100%;justify-content:flex-end}
  .adm-island-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.28rem .65rem}
  .adm-island-schedule{align-items:flex-start;flex-direction:column;gap:.15rem}
  .adm-season-data{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* OAI ADMIN MEMORY v1.4 — les îlots deviennent de vrais parents repliables.
   Une seule enveloppe visuelle par îlot ; les traversées gardent leur rail vertical. */
.adm-duo-v14{margin:.5rem 0;padding:0!important;border:1px solid rgba(241,187,109,.18)!important;border-radius:17px;
  background:linear-gradient(155deg,rgba(241,187,109,.045),rgba(255,255,255,.018) 42%,rgba(210,72,126,.025));overflow:hidden}
.adm-duo-v14:first-of-type{border-top:1px solid rgba(241,187,109,.18)!important}
.adm-duo-v14.is-open{border-color:rgba(241,187,109,.3)!important;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.adm-island-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.55rem;padding:.58rem .62rem}
.adm-island-toggle{appearance:none;border:0;background:transparent;color:var(--ink);padding:0;min-width:0;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:1.25rem minmax(0,1fr);align-items:center;gap:.34rem;-webkit-tap-highlight-color:transparent}
.adm-island-toggle:focus-visible{outline:2px solid rgba(241,187,109,.6);outline-offset:4px;border-radius:9px}
.adm-island-chevron{display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:999px;color:var(--gold);font-size:1.05rem;font-weight:900;
  background:rgba(241,187,109,.08);transition:transform .2s ease,background .2s ease}
.adm-duo-v14.is-open .adm-island-chevron{background:rgba(241,187,109,.14)}
.adm-island-summary-copy{display:flex;flex-direction:column;gap:.04rem;min-width:0}
.adm-island-summary-line{display:flex;align-items:center;gap:.34rem;min-width:0;flex-wrap:wrap;font-size:.86rem;line-height:1.15}
.adm-island-summary-line .adm-scope-label{margin:0;flex:0 0 auto}
.adm-island-summary-line>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(260px,42vw)}
.adm-island-summary .adm-members{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.67rem}
.adm-actions-island{align-items:center;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap}
.adm-actions-island .adm-memory-test{font-size:.66rem;padding:.38rem .52rem}
.adm-actions-island .adm-del{width:2rem;height:2rem;padding:0;display:grid;place-items:center;flex:0 0 2rem}
.adm-island-body{padding:0 .72rem .78rem;border-top:1px solid rgba(241,187,109,.11)}
.adm-island-body[hidden]{display:none!important}
.adm-duo-v14 .adm-island-facts{margin-top:.5rem}
.adm-duo-v14 .adm-scope-divider{margin-top:.65rem}
@media(max-width:520px){
  .adm-island-summary{grid-template-columns:minmax(0,1fr) auto;gap:.36rem;padding:.52rem .5rem}
  .adm-island-toggle{grid-template-columns:1.05rem minmax(0,1fr);gap:.25rem}
  .adm-island-chevron{width:1rem;height:1rem;font-size:.95rem}
  .adm-island-summary-line{font-size:.78rem;gap:.26rem}
  .adm-island-summary-line>b{max-width:31vw}
  .adm-island-summary .adm-members{font-size:.6rem}
  .adm-actions-island{gap:.2rem}
  .adm-actions-island .adm-memory-test{font-size:.59rem;padding:.34rem .4rem}
  .adm-actions-island .adm-del{width:1.85rem;height:1.85rem;flex-basis:1.85rem}
  .adm-island-body{padding:0 .55rem .7rem}
}


/* OAI ADMIN MEMORY v1.6 — l'îlot reste ouvert par défaut ; ses traversées sont des
   sous-sections compactes repliées une par une. Le rail rose/or reste le repère de niveau 2. */
.adm-seasons-v16{display:flex;flex-direction:column;gap:.14rem}
.adm-season-v16{padding:.5rem 0 .52rem!important}
.adm-season-v16-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;min-width:0}
.adm-season-toggle{appearance:none;border:0;background:transparent;color:var(--ink);padding:0;min-width:0;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:1.18rem minmax(0,1fr);align-items:center;gap:.32rem;-webkit-tap-highlight-color:transparent}
.adm-season-toggle:focus-visible{outline:2px solid rgba(216,73,126,.5);outline-offset:3px;border-radius:9px}
.adm-season-chevron{display:grid;place-items:center;width:1.08rem;height:1.08rem;border-radius:999px;color:var(--rose);font-size:.95rem;font-weight:900;
  background:rgba(216,73,126,.08);transition:background .18s ease}
.adm-season-v16.is-unfolded .adm-season-chevron{background:rgba(216,73,126,.15)}
.adm-season-toggle-copy{display:flex;flex-direction:column;gap:.04rem;min-width:0}
.adm-season-toggle-copy .adm-season-kicker{margin:0}
.adm-season-toggle-copy .adm-season-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-season-schedule-inline{margin:.08rem 0 0!important;min-width:0}
.adm-season-schedule-inline .adm-schedule{font-size:.62rem;line-height:1.2}
.adm-season-actions{align-items:center;justify-content:flex-end;white-space:nowrap}
.adm-season-detail{margin:.42rem 0 0 1.5rem;padding:.42rem 0 .02rem;border-top:1px dashed rgba(255,255,255,.08)}
.adm-season-detail[hidden]{display:none!important}
.adm-season-v16.is-folded{padding-top:.42rem!important;padding-bottom:.42rem!important}
@media(max-width:520px){
  .adm-season-v16-summary{grid-template-columns:minmax(0,1fr) auto;gap:.28rem}
  .adm-season-toggle{grid-template-columns:1rem minmax(0,1fr);gap:.24rem}
  .adm-season-chevron{width:.95rem;height:.95rem;font-size:.86rem}
  .adm-season-actions{gap:.18rem}
  .adm-season-actions .adm-mini{font-size:.59rem;padding:.32rem .4rem}
  .adm-season-actions .adm-del{width:1.85rem;height:1.85rem;padding:0}
  .adm-season-detail{margin-left:1.2rem}
}

/* OAI MAIL RECOVERY v1.9 — l'envoi d'un e-mail n'est plus un temps mort visuel. */
.recovery-mail-progress[hidden]{display:none!important}
.recovery-mail-progress{display:flex;align-items:center;gap:.58rem;margin:.55rem 0 .15rem;padding:.58rem .68rem;border-radius:12px;
  background:rgba(241,187,109,.08);border:1px solid rgba(241,187,109,.2);color:var(--ink2);font-size:.72rem;line-height:1.25}
.recovery-mail-progress b{display:block;color:var(--ink);font-size:.74rem}.recovery-mail-progress small{display:block;margin-top:.08rem;font-size:.64rem;color:var(--ink2)}
.recovery-mail-fly,.recovery-mail-btn-spin{display:inline-block;transform-origin:50% 60%;animation:recoveryMailFly 1.35s ease-in-out infinite}
.recovery-mail-fly{font-size:1.15rem}.recovery-mail-dots{display:inline-flex;gap:.18rem;margin-left:auto;align-items:center}
.recovery-mail-dots i{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.28;animation:recoveryMailDot 1s ease-in-out infinite}
.recovery-mail-dots i:nth-child(2){animation-delay:.15s}.recovery-mail-dots i:nth-child(3){animation-delay:.3s}
@keyframes recoveryMailFly{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(3px,-3px,0) rotate(4deg)}}
@keyframes recoveryMailDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.recovery-mail-fly,.recovery-mail-btn-spin,.recovery-mail-dots i{animation:none!important}}