:root{
  --fond:#0d0f12;
  --fond-2:#14171c;
  --fond-3:#1b1f26;
  --trait:#282e37;
  --texte:#e8e4dc;
  --doux:#9aa1ad;
  --or:#d8a34a;
  --or-sombre:#8a6a2f;
  --vert:#6fbf73;
  --rouge:#e0705f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* l’attribut hidden doit gagner contre les display: des classes ci-dessous */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--fond);color:var(--texte);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:var(--or)}
button{font-family:inherit;font-size:inherit}
b,strong{color:#fff;font-weight:600}
i,em{color:#d6d0c4}
sup{font-size:.7em}

/* ---------- accueil ---------- */
.accueil{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 22px}
.accueil-in{max-width:640px}
.sur{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin:0 0 18px}
.accueil h1{font-family:var(--serif);font-size:clamp(42px,9vw,76px);line-height:1.02;margin:0 0 28px;font-weight:400;letter-spacing:-.02em}
.chapo{font-family:var(--serif);font-size:19px;line-height:1.62;color:#cfcabf;margin:0 0 18px}
.accueil-actions{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 20px}
.mention{font-size:13px;color:var(--doux);margin:0}

/* ---------- boutons ---------- */
.btn{
  border:1px solid var(--trait);background:var(--fond-3);color:var(--texte);
  padding:12px 22px;border-radius:2px;cursor:pointer;transition:.15s;
  letter-spacing:.01em;
}
.btn:hover{border-color:var(--or-sombre);color:#fff}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primaire{background:var(--or);border-color:var(--or);color:#16130c;font-weight:600}
.btn-primaire:hover{background:#e8b45c;border-color:#e8b45c;color:#16130c}
.btn-fantome{background:transparent}
.btn-petit{padding:8px 14px;font-size:14px}

/* ---------- entête ---------- */
.entete{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:rgba(13,15,18,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait);
}
.burger{background:none;border:none;color:var(--texte);font-size:20px;cursor:pointer;padding:4px 8px;line-height:1}
.marque{font-family:var(--serif);font-size:16px;color:var(--texte);text-decoration:none;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jauge{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--doux)}
.jauge-barre{width:110px;height:3px;background:var(--fond-3);overflow:hidden}
.jauge-barre i{display:block;height:100%;width:0;background:var(--or);transition:width .4s}
@media(max-width:560px){.jauge-barre{width:60px}.marque{font-size:14px}}

/* ---------- sommaire ---------- */
.sommaire{
  position:fixed;top:0;left:0;bottom:0;width:330px;max-width:86vw;z-index:60;
  background:var(--fond-2);border-right:1px solid var(--trait);overflow-y:auto;
  padding:20px 0 60px;transform:translateX(-102%);transition:transform .25s ease;
}
.sommaire.ouvert{transform:none}
.voile{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50}
.som-acte{padding:20px 22px 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.som-acte small{display:block;letter-spacing:0;text-transform:none;color:var(--doux);font-size:13px;margin-top:3px}
.som-item{
  display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;
  background:none;border:none;color:var(--doux);padding:8px 22px;cursor:pointer;font-size:15px;
}
.som-item:hover{color:var(--texte);background:var(--fond-3)}
.som-item.actif{color:var(--or)}
.som-item.faite{color:var(--texte)}
.som-item.bloquee{opacity:.4;cursor:not-allowed}
.som-num{font-variant-numeric:tabular-nums;font-size:12px;min-width:20px;color:var(--trait)}
.som-item.faite .som-num{color:var(--vert)}
.som-item.aide .som-num{color:var(--or-sombre)}

/* ---------- scène ---------- */
main{max-width:760px;margin:0 auto;padding:40px 22px 120px}
.fil{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
h2.titre{font-family:var(--serif);font-weight:400;font-size:clamp(30px,6vw,44px);line-height:1.1;margin:0 0 26px;letter-spacing:-.01em}
.recit{font-family:var(--serif);font-size:18.5px;line-height:1.66;color:#cfcabf}
.question{
  margin:32px 0 22px;padding:16px 18px;border-left:2px solid var(--or);
  background:var(--fond-2);font-size:16.5px;color:#fff;
}

/* ---------- mécaniques ---------- */
.opts{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.opt{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--trait);
  background:var(--fond-2);cursor:pointer;transition:.12s;text-align:left;color:var(--texte);
  width:100%;font-size:16px;line-height:1.5;border-radius:2px;
}
.opt:hover{border-color:#3b444f}
.opt.choisie{border-color:var(--or);background:#1d1a13}
.opt.juste{border-color:var(--vert);background:#131c14}
.opt.fausse{border-color:var(--rouge);background:#1d1413}
.opt .case{
  flex:0 0 18px;height:18px;margin-top:2px;border:1px solid #4a525d;display:flex;
  align-items:center;justify-content:center;font-size:12px;color:var(--fond);
}
.opt.choisie .case{background:var(--or);border-color:var(--or)}
.opt.juste .case{background:var(--vert);border-color:var(--vert)}
.opt.fausse .case{background:var(--rouge);border-color:var(--rouge)}
.opt.ronde .case{border-radius:50%}
.retour{
  margin:-4px 0 8px;padding:12px 16px;border-left:2px solid var(--trait);
  font-size:15px;color:var(--doux);background:var(--fond-2)
}
.retour.bon{border-color:var(--vert)}
.retour.mauvais{border-color:var(--rouge)}

/* ordre */
.ordre-zone{margin:20px 0}
.ordre-liste{display:flex;flex-direction:column;gap:8px;min-height:8px}
.ordre-el{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--trait);background:var(--fond-2);cursor:pointer;font-size:15.5px;line-height:1.45}
.ordre-el:hover{border-color:#3b444f}
.ordre-el .rang{flex:0 0 24px;height:24px;border-radius:50%;background:var(--or);color:#16130c;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.ordre-el.pool .rang{background:var(--fond-3);color:var(--doux)}
.ordre-el.juste{border-color:var(--vert)}
.ordre-el.fausse{border-color:var(--rouge)}
.sous-titre{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin:20px 0 10px}

/* boucle */
.noeuds{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.noeud{display:flex;gap:12px;align-items:baseline;font-size:15.5px}
.noeud .cle{flex:0 0 22px;height:22px;border:1px solid var(--or-sombre);color:var(--or);display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:50%}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{
  border:1px solid var(--trait);background:var(--fond-2);color:var(--doux);padding:8px 13px;
  cursor:pointer;font-size:14px;font-variant-numeric:tabular-nums;border-radius:2px;
}
.chip:hover{border-color:#3b444f;color:var(--texte)}
.chip.on{border-color:var(--or);color:var(--or);background:#1d1a13}
.chip.juste{border-color:var(--vert);color:var(--vert)}
.chip.fausse{border-color:var(--rouge);color:var(--rouge)}

/* matrice */
.tableau{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.tableau th{color:var(--doux);font-weight:500;padding:8px 6px;text-align:center;vertical-align:bottom;font-size:13px;line-height:1.3}
.tableau th.ligne{text-align:left;width:38%}
.tableau td{padding:6px;text-align:center;border-top:1px solid var(--trait)}
.tableau td.lab{text-align:left;color:var(--texte);font-size:14.5px;line-height:1.35}
.coche{width:26px;height:26px;border:1px solid #4a525d;background:var(--fond-2);cursor:pointer;border-radius:2px}
.coche.on{background:var(--or);border-color:var(--or)}
.coche.faux{background:var(--rouge);border-color:var(--rouge)}

/* patch / sonde */
.carte{
  padding:14px 16px;border:1px solid var(--trait);background:var(--fond-2);margin-bottom:9px;
  cursor:pointer;display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5
}
.carte:hover{border-color:#3b444f}
.carte.on{border-color:var(--or);background:#1d1a13}
.carte.morte{opacity:.45}
.carte .cle{flex:0 0 34px;color:var(--or-sombre);font-size:12px;letter-spacing:.08em;padding-top:3px}
.compteur{font-size:13px;color:var(--doux);margin:6px 0 16px}
.echec-liste{margin:18px 0;border-left:2px solid var(--rouge);padding:4px 0 4px 16px}
.echec-liste p{margin:0 0 10px;font-size:15.5px;color:#e6c4bd}
.resultat{margin:16px 0;border:1px solid var(--trait);background:var(--fond-2)}
.resultat .lg{display:flex;gap:14px;padding:12px 16px;border-bottom:1px solid var(--trait);font-size:15px}
.resultat .lg:last-child{border-bottom:none}
.resultat .lg .t{flex:0 0 30%;color:var(--doux);font-size:13.5px}
.resultat .lg.pareil{color:var(--doux)}
.balise{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border:1px solid;border-radius:2px;white-space:nowrap}
.balise.nul{color:var(--rouge);border-color:#5a2f28}
.balise.utile{color:var(--vert);border-color:#2f4a31}

/* curseurs */
.curseur{margin:22px 0}
.curseur label{display:flex;justify-content:space-between;font-size:14.5px;color:var(--doux);margin-bottom:8px}
.curseur label b{color:var(--or);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;background:var(--fond-3);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--or);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--or);cursor:pointer}
.mesures{margin:22px 0;border:1px solid var(--trait)}
.mesure{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--trait);font-size:15px}
.mesure:last-child{border-bottom:none}
.mesure .t{flex:1;color:var(--doux);font-size:14.5px}
.mesure .v{font-variant-numeric:tabular-nums;font-size:19px;color:var(--rouge)}
.mesure .v.bon{color:var(--vert)}
.mesure .v.gris{color:var(--doux)}
.mesure .txt{flex:1.4;font-size:14.5px;color:var(--texte)}
.cible{font-size:13.5px;color:var(--or);margin:10px 0 0}

/* thèse */
textarea{
  width:100%;min-height:230px;background:var(--fond-2);border:1px solid var(--trait);color:var(--texte);
  padding:16px;font-family:var(--serif);font-size:17px;line-height:1.6;resize:vertical;border-radius:2px;
}
textarea:focus{outline:none;border-color:var(--or-sombre)}
.compte{font-size:13px;color:var(--doux);text-align:right;margin-top:6px}
.point{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--trait);font-size:15.5px;line-height:1.5;cursor:pointer}
.point .case{flex:0 0 18px;height:18px;border:1px solid #4a525d;margin-top:3px}
.point.on .case{background:var(--vert);border-color:var(--vert)}

/* ---------- barre du bas ---------- */
.barre{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;align-items:center;
  padding:12px 22px;background:rgba(13,15,18,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--trait);
}
.barre .espace{flex:1}
@media(max-width:600px){
  .barre{padding:10px 14px;gap:8px;flex-wrap:wrap}
  .barre .btn{padding:11px 14px;font-size:15px}
}

/* ---------- débrief ---------- */
.debrief{margin:34px 0 0;border-top:1px solid var(--trait);padding-top:28px}
.bandeau{
  display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:26px;
  border:1px solid var(--vert);background:#111a12;color:var(--vert);font-size:16px
}
.bandeau.aide{border-color:var(--or-sombre);background:#1a1610;color:var(--or)}
.bloc-sol{border-left:2px solid var(--or);padding:2px 0 2px 18px;margin:20px 0;font-size:16.5px;line-height:1.6}
.concept{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin:26px 0 10px}
.debrief-txt{font-size:16px;line-height:1.62;color:#c8c3b8}
.sources{margin:22px 0 0;padding:0;list-style:none;font-size:14px}
.sources li{margin-bottom:7px;color:var(--doux)}
.sources a{text-decoration:none;border-bottom:1px solid var(--or-sombre)}
.suivant{margin:38px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.indice-bloc{margin:18px 0;border-left:2px solid var(--or-sombre);padding:2px 0 2px 18px}
.indice-bloc p{margin:0 0 12px;font-size:15.5px;color:#c8c3b8}
.indice-bloc p b{color:var(--or);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px}

/* ---------- acte / fin ---------- */
.acte-ecran{text-align:left;padding:40px 0}
.acte-num{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:16px}
.acte-ecran h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,7vw,56px);margin:0 0 8px;line-height:1.05}
.acte-ecran .sous{font-family:var(--serif);font-size:20px;color:var(--doux);margin:0 0 28px}
.acte-ecran .intro{font-family:var(--serif);font-size:18.5px;line-height:1.65;color:#cfcabf;max-width:600px}
.fin-liste{margin:26px 0;padding:0;list-style:none}
.fin-liste li{padding:14px 0;border-top:1px solid var(--trait);font-family:var(--serif);font-size:19px}