/* ============================================================
   JETONS — voir systeme-animation.md §2
   ============================================================ */
:root{
  /* durées */
  --duree-instant:80ms; --duree-rapide:150ms; --duree-normale:250ms;
  --duree-ample:400ms;  --duree-fete:700ms;
  /* courbes */
  --courbe-standard:cubic-bezier(.4,0,.2,1);
  --courbe-entree:cubic-bezier(0,0,.2,1);
  --courbe-sortie:cubic-bezier(.4,0,1,1);
  --courbe-rebond:cubic-bezier(.34,1.56,.64,1);
  /* cascade */
  --cascade-serre:40ms; --cascade-large:90ms;

  /* couleurs — registre salle obscure */
  --fond:#0f0e13; --fond-2:#17161d; --fond-3:#201e28;
  --trait:#2e2b38;
  --texte:#f2f0f4; --texte-2:#a8a3b5;
  --accent:#e5484d; --accent-2:#ff6b5e;
  --juste:#3dd68c; --faux:#e5484d; --or:#f5c451;
  --rayon:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 600px at 50% -10%,#1c1a24 0%,var(--fond) 60%);
  color:var(--texte);
  font:16px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex;justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
#app{width:100%;max-width:460px;padding:20px 18px 40px;display:flex;flex-direction:column;min-height:100vh}

/* ---------- primitives ---------- */
.bandeau{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.logo{font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.logo span{color:var(--accent)}
.serie{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--texte-2);
  background:var(--fond-2);border:1px solid var(--trait);padding:5px 11px;border-radius:999px}
.carte{background:var(--fond-2);border:1px solid var(--trait);border-radius:var(--rayon);padding:18px}
.titre{font-size:1.35rem;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.sous{color:var(--texte-2);font-size:.9rem}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.btn{display:block;width:100%;padding:15px;border-radius:12px;font-weight:600;
  background:var(--accent);color:#fff;transition:transform var(--duree-instant) var(--courbe-standard),
  filter var(--duree-rapide) var(--courbe-standard)}
.btn:active{transform:scale(.98)}
.btn:hover{filter:brightness(1.08)}
.btn.fantome{background:transparent;border:1px solid var(--trait);color:var(--texte-2);font-weight:500;padding:12px}
.centre{flex:1;display:flex;flex-direction:column;justify-content:center}

/* ---------- M1 apparition ---------- */
@keyframes m1{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.m1{animation:m1 var(--duree-normale) var(--courbe-entree) both}

/* ---------- M2 validation ---------- */
@keyframes m2{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.m2{animation:m2 var(--duree-rapide) var(--courbe-standard)}

/* ---------- M5 transition ---------- */
@keyframes m5-out{to{opacity:0;transform:translateX(-16px)}}
@keyframes m5-in{from{opacity:0;transform:translateX(16px)}}
.m5-out{animation:m5-out var(--duree-rapide) var(--courbe-sortie) both}
.m5-in{animation:m5-in var(--duree-rapide) var(--courbe-entree) both}

/* ---------- M6 célébration ---------- */
@keyframes m6{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.m6{animation:m6 var(--duree-fete) var(--courbe-rebond) both}

/* ---------- M8 attente ---------- */
@keyframes m8{0%,100%{opacity:.4}50%{opacity:1}}
.m8{animation:m8 1.4s var(--courbe-standard) infinite}

/* ---------- écran de jeu ---------- */
.progression{display:flex;gap:5px;margin-bottom:20px}
.pas{height:3px;flex:1;background:var(--trait);border-radius:2px;overflow:hidden}
.pas i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--duree-normale) var(--courbe-standard)}
.pas.fait i{transform:scaleX(1)}
.pas.juste i{background:var(--juste)}
.pas.faux i{background:var(--faux)}

.consigne{color:var(--texte-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px}

/* générique */
.distribution{list-style:none;margin:14px 0 4px}
.distribution li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait)}
.distribution li:last-child{border-bottom:0}
.role{color:var(--texte-2);font-size:.8rem;flex:1;text-align:right}
.acteur{font-weight:560}
.masque{color:var(--texte-2);opacity:.35;letter-spacing:.12em}

.reponses{display:grid;gap:9px;margin-top:16px}
.rep{width:100%;text-align:left;padding:14px 16px;border-radius:11px;background:var(--fond-3);
  border:1px solid var(--trait);font-weight:520;
  transition:background var(--duree-rapide) var(--courbe-standard),
             border-color var(--duree-rapide) var(--courbe-standard),
             opacity var(--duree-rapide) var(--courbe-standard)}
.rep:hover:not(:disabled){border-color:#4a4657}
.rep:disabled{cursor:default}
.rep.juste{background:rgba(61,214,140,.14);border-color:var(--juste);color:#a6f0cb}
.rep.faux{background:rgba(229,72,77,.14);border-color:var(--faux);color:#ffb3b5}
.rep.eteint{opacity:.4}

.indice{margin-top:14px;text-align:center}
.indice button{color:var(--texte-2);font-size:.85rem;text-decoration:underline;text-underline-offset:3px}

/* révélation */
.reveal-titre{font-size:1.5rem;font-weight:680;letter-spacing:-.02em}
.meta{color:var(--texte-2);font-size:.88rem;margin-top:3px}
.anecdote{margin-top:16px;padding:14px;background:var(--fond-3);border-radius:11px;
  font-size:.9rem;line-height:1.55;border-left:2px solid var(--accent)}
.anecdote b{color:var(--or);font-weight:600}

/* frise */
.frise{position:relative;height:34px;margin:18px 0 6px}
.frise .rail{position:absolute;top:16px;left:0;right:0;height:2px;background:var(--trait)}
.frise .curseur{position:absolute;top:9px;width:16px;height:16px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(229,72,77,.2);
  transform:translateX(-50%) scale(0);transition:transform var(--duree-ample) var(--courbe-rebond)}
.frise.on .curseur{transform:translateX(-50%) scale(1)}
.frise .bornes{position:absolute;top:22px;left:0;right:0;display:flex;justify-content:space-between;
  font-size:.7rem;color:var(--texte-2)}

/* fin */
.score-grand{font-size:3.4rem;font-weight:750;letter-spacing:-.04em;line-height:1}
.score-grand small{font-size:1rem;font-weight:500;color:var(--texte-2);letter-spacing:0}
.grille-partage{font-size:1.45rem;letter-spacing:.14em;margin:14px 0;line-height:1.5}
.rang{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--trait);font-size:.92rem}
.rang:last-child{border-bottom:0}
.rang.moi{color:var(--or);font-weight:620}
.badge-pop{display:flex;align-items:center;gap:13px;padding:14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(245,196,81,.16),rgba(245,196,81,.04));
  border:1px solid rgba(245,196,81,.3);margin-bottom:14px}
.badge-rond{width:42px;height:42px;border-radius:50%;background:rgba(245,196,81,.2);
  display:grid;place-items:center;font-size:1.25rem;flex:none}

/* bulle personnage */
.bulle{display:flex;gap:11px;align-items:flex-start;margin-top:20px;min-height:56px}
.tete{width:38px;height:38px;border-radius:50%;background:var(--fond-3);border:1px solid var(--trait);
  display:grid;place-items:center;font-size:1.1rem;flex:none}
.phylactere{background:var(--fond-3);border:1px solid var(--trait);border-radius:4px 13px 13px 13px;
  padding:10px 13px;font-size:.87rem;color:var(--texte-2);line-height:1.45}
.phylactere b{color:var(--texte);font-weight:600;display:block;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}

.pied{margin-top:22px;text-align:center;color:var(--texte-2);font-size:.8rem}
.masque-vrai{visibility:hidden}

/* ============================================================
   MOUVEMENT RÉDUIT — systeme-animation.md §5
   « supprimer le déplacement, conserver le changement d'état »
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  @keyframes m1{from{opacity:0}to{opacity:1}}
  .m1,.m5-in,.m6{animation:m1 var(--duree-rapide) linear both !important}
  .m5-out{animation:none !important;opacity:0}
  .m8{animation:none !important;opacity:.7}
  .frise .curseur{transition:none;transform:translateX(-50%) scale(1)}
}

/* --- frise enrichie : graduations par décennie + année portée --- */
.frise{height:52px}
.frise i{position:absolute;top:13px;width:1px;height:8px;background:var(--trait)}
.frise .curseur{top:9px}
.frise .curseur b{position:absolute;top:22px;left:50%;transform:translateX(-50%);
  font-size:.74rem;font-weight:640;color:var(--accent);white-space:nowrap}
.frise .bornes{top:36px}

/* --- desktop : la colonne ne flotte plus dans le vide --- */
@media (min-width:720px){
  body{background:
    radial-gradient(900px 500px at 50% -5%,rgba(229,72,77,.10),transparent 60%),
    radial-gradient(1200px 600px at 50% -10%,#1c1a24 0%,var(--fond) 60%);}
  #app{border-left:1px solid var(--trait);border-right:1px solid var(--trait);
    background:rgba(255,255,255,.012)}
}

/* --- revue design 19/08 : paquet A --- */
/* RD-1 : accusé de réception — l'appui répond avant le verdict serveur */
.rep.presse{border-color:var(--accent);transform:scale(.985);transition:transform .08s}
/* DD-1 : le verdict n'est plus porté par la seule teinte — glyphe en renfort */
.rep{position:relative}
.rep.juste::after,.rep.faux::after{position:absolute;right:14px;top:50%;
  transform:translateY(-50%);font-weight:700}
.rep.juste::after{content:'\2713'}
.rep.faux::after{content:'\2715'}
/* DD-1 : la barre de progression double la couleur d'un motif */
.pas.faux i{background:repeating-linear-gradient(135deg,var(--faux) 0 3px,transparent 3px 6px)}
/* DD-3 : signalement — présent mais discret, la révélation reste la vedette */
.signaler{margin-top:14px;text-align:center}
.signaler button{background:none;border:none;color:var(--sous,#8a8794);
  font-size:.78rem;text-decoration:underline;cursor:pointer;opacity:.65}
.signaler button:disabled{text-decoration:none;opacity:.85;cursor:default}