/* ============================================================
   COTON QUIZZ — feuille de style
   Palette : bleu nuit, or, bleu ligne, blanc cassé.
   ============================================================ */

:root{
  --nuit:#0E2340;
  --nuit-2:#16314F;
  --creme:#F6F2E9;
  --sable:#E8E0CE;
  --or:#C08A2E;
  --or-t:#8C6316;
  --or-l:#E7C77A;
  --ligne:#5C93B6;
  --ligne-l:#A9CDE3;

  --bg:var(--creme);
  --surface:#FFFDF7;
  --surface-2:var(--sable);
  --ink:var(--nuit);
  --ink-2:#4A5F7A;
  --trait:#D8CFBB;
  --accent:var(--or-t);
  --accent-plein:var(--or);
  --sur-accent:#FFFDF7;

  --juste:#256B4A;
  --juste-fond:#E0EFE6;
  --juste-trait:#8FC0A6;
  --faux:#A03A26;
  --faux-fond:#F6E2DC;
  --faux-trait:#DCA294;

  --gap:18px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--nuit);
    --surface:var(--nuit-2);
    --surface-2:#1D3C5E;
    --ink:var(--creme);
    --ink-2:var(--ligne-l);
    --trait:#2B4A6C;
    --accent:var(--or-l);
    --accent-plein:var(--or-l);
    --sur-accent:#0E2340;
    --juste:#8AD3AB;
    --juste-fond:#153D2B;
    --juste-trait:#256B4A;
    --faux:#F0A896;
    --faux-fond:#441D15;
    --faux-trait:#A03A26;
  }
}
:root[data-theme="dark"]{
  --bg:var(--nuit);
  --surface:var(--nuit-2);
  --surface-2:#1D3C5E;
  --ink:var(--creme);
  --ink-2:var(--ligne-l);
  --trait:#2B4A6C;
  --accent:var(--or-l);
  --accent-plein:var(--or-l);
  --sur-accent:#0E2340;
  --juste:#8AD3AB;
  --juste-fond:#153D2B;
  --juste-trait:#256B4A;
  --faux:#F0A896;
  --faux-fond:#441D15;
  --faux-trait:#A03A26;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  margin:0;
  font-family:"Archivo","Arial Narrow",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  text-wrap:balance;
}
p{margin:0}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.page{
  max-width:640px;
  margin:0 auto;
  padding-inline:20px;
  padding-block:20px 40px;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

/* ---------- la le site : bandeau de progression ---------- */
.corde{
  display:flex;
  gap:3px;
  height:10px;
  border-radius:99px;
  overflow:hidden;
  background:var(--surface-2);
  padding:0;
}
.corde i{
  flex:1;
  background:var(--surface-2);
  transition:background .3s ease;
}
.corde i.faite{background:var(--ligne)}
.corde i.faite.bonne{background:var(--accent-plein)}
.corde i.ici{background:var(--ink)}

.barre{display:flex;align-items:center;gap:14px}
.barre .corde{flex:1}
.compteur{
  font-family:"Archivo",sans-serif;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:15px;
  color:var(--accent);
  white-space:nowrap;
}

/* ---------- le chrono ---------- */
.chrono{display:flex;align-items:center;gap:12px}
.chrono .jauge{
  flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;
}
.chrono .jauge span{
  display:block;height:100%;width:100%;
  background:var(--accent-plein);
  transform-origin:left center;
}
.chrono .secondes{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;
  font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right;
}
.chrono.urgence .jauge span{background:var(--faux)}
.chrono.urgence .secondes{color:var(--faux)}

/* ---------- entêtes ---------- */
.surtitre{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.etiquettes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.etq{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:3px;background:var(--surface-2);color:var(--ink-2);
}
.etq.jour{background:var(--ink);color:var(--creme)}
.etq.multi{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}

.question{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(21px,5.4vw,27px);line-height:1.2;
}

/* ---------- les couloirs de réponse ---------- */
.couloirs{display:flex;flex-direction:column;gap:9px}
.couloir{
  display:flex;align-items:stretch;gap:0;
  width:100%;text-align:left;cursor:pointer;
  background:var(--surface);
  border:1.5px solid var(--trait);
  border-radius:6px;
  overflow:hidden;
  transition:border-color .12s ease,background .12s ease;
}
.couloir .num{
  flex:0 0 46px;
  display:grid;place-items:center;
  background:var(--surface-2);
  font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;
  color:var(--ink-2);
  border-right:1.5px solid var(--trait);
  transition:background .12s ease,color .12s ease;
}
.couloir .txt{padding:13px 15px;font-size:16px;font-weight:500;line-height:1.35}
.couloir:hover:not(:disabled){border-color:var(--ligne)}
.couloir[aria-pressed="true"]{border-color:var(--accent-plein);background:var(--surface)}
.couloir[aria-pressed="true"] .num{background:var(--accent-plein);color:var(--sur-accent)}
.couloir.juste{border-color:var(--juste-trait);background:var(--juste-fond)}
.couloir.juste .num{background:var(--juste);color:#fff;border-right-color:var(--juste)}
.couloir.rate{border-color:var(--juste-trait);background:transparent}
.couloir.rate .num{background:transparent;color:var(--juste);border-right-color:var(--juste-trait)}
.couloir.faux{border-color:var(--faux-trait);background:var(--faux-fond)}
.couloir.faux .num{background:var(--faux);color:#fff;border-right-color:var(--faux)}
.couloir:disabled{cursor:default}

/* ---------- boutons ---------- */
.bouton{
  display:block;width:100%;border:0;cursor:pointer;
  background:var(--accent-plein);color:var(--sur-accent);
  font-family:"Archivo",sans-serif;
  font-size:15px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 18px;border-radius:6px;
  transition:filter .12s ease,opacity .15s ease;
}
.bouton:hover:not(:disabled){filter:brightness(1.07)}
.bouton:disabled{opacity:.3;cursor:not-allowed}
.bouton.creux{
  background:transparent;color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px var(--trait);
}
.bouton.petit{font-size:13px;padding:11px 14px;width:auto}

/* ---------- panneau de correction ---------- */
.verdict{
  border:1.5px solid;border-radius:6px;padding:15px 17px;
  display:flex;flex-direction:column;gap:7px;
  animation:monte .2s ease-out;
}
@keyframes monte{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .verdict{animation:none}
  .chrono .jauge span{transition:none!important}
  .corde i{transition:none}
}
.verdict.ok{background:var(--juste-fond);border-color:var(--juste-trait)}
.verdict.ko{background:var(--faux-fond);border-color:var(--faux-trait)}
.verdict h3{font-size:18px}
.verdict.ok h3{color:var(--juste)}
.verdict.ko h3{color:var(--faux)}
.verdict p{font-size:14.5px;line-height:1.45}

/* ---------- accueil et listes ---------- */
.entete{display:flex;flex-direction:column;gap:7px;padding-top:18px}
.entete h1{font-size:clamp(32px,9vw,46px);line-height:1}
.entete .sous{color:var(--ink-2);font-size:15px}
.filet{width:54px;height:3px;background:var(--accent-plein);border-radius:2px}

.carte{
  display:flex;flex-direction:column;gap:5px;
  width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--trait);border-radius:6px;
  padding:16px 18px;
  transition:border-color .12s ease;
}
.carte:hover{border-color:var(--accent-plein)}
.carte b{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px}
.carte span{color:var(--ink-2);font-size:14px}

.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-size:13px;font-weight:600;color:var(--ink-2)}
.champ input{
  font-size:18px;font-weight:600;
  background:var(--surface);border:1.5px solid var(--trait);border-radius:6px;
  padding:13px 15px;width:100%;
}
.champ input:focus{border-color:var(--accent-plein);outline:none}

.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chiffre{
  background:var(--surface);border:1.5px solid var(--trait);border-radius:6px;
  padding:12px 8px;text-align:center;
}
.chiffre b{
  display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;
  font-variant-numeric:tabular-nums;
}
.chiffre span{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- résultat ---------- */
.score{
  background:var(--surface);border:1.5px solid var(--trait);border-radius:8px;
  padding:24px;text-align:center;display:flex;flex-direction:column;gap:4px;
}
.score .val{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:60px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.score .lab{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.score .det{font-size:15px;color:var(--ink-2);margin-top:5px}

.bloc{display:flex;flex-direction:column;gap:10px}
.bloc h2{
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);font-family:"Instrument Sans",sans-serif;
}

.rate-item{
  background:var(--surface);border:1.5px solid var(--trait);border-radius:6px;
  border-left:4px solid var(--faux-trait);
  padding:12px 15px;display:flex;flex-direction:column;gap:4px;
}
.rate-item b{font-size:14.5px;font-weight:600;line-height:1.35}
.rate-item span{font-size:14px;color:var(--juste);font-weight:600}

/* ---------- classement animateur ---------- */
.rang{
  display:grid;grid-template-columns:38px 1fr auto auto;gap:12px;align-items:center;
  background:var(--surface);border:1.5px solid var(--trait);border-radius:6px;
  padding:11px 14px;
}
.rang .pl{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums;text-align:center;color:var(--ink-2);
}
.rang .nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rang .pts{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:17px;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.rang .sup{
  background:none;border:0;cursor:pointer;color:var(--ink-2);
  font-size:18px;line-height:1;padding:0 4px;opacity:.5;
}
.rang .sup:hover{opacity:1;color:var(--faux)}
.rang.or{border-color:var(--accent-plein);border-width:2px}

.ligne-saisie{display:flex;gap:9px;align-items:flex-end}
.ligne-saisie .champ{flex:1}
.ligne-saisie .champ.court{flex:0 0 108px}

.vide{
  border:1.5px dashed var(--trait);border-radius:6px;padding:18px;text-align:center;
  color:var(--ink-2);font-size:14px;
}
.note{font-size:13px;color:var(--ink-2);line-height:1.5}
.pied{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--trait);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-2);
}
.lien{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent);font-size:12px;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:420px){
  .chiffres{grid-template-columns:repeat(3,1fr)}
  .couloir .num{flex-basis:38px}
}

/* ============================================================
   MODE EN DIRECT
   ============================================================ */
.code-geant{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(56px,17vw,104px);line-height:1;
  letter-spacing:.09em;text-align:center;
  color:var(--accent);
  background:var(--surface);
  border:1.5px solid var(--trait);border-radius:8px;
  padding:26px 12px 22px;
  margin-top:8px;
}
.code-saisie{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:34px;letter-spacing:.22em;text-align:center;text-transform:uppercase;
}
.question.grand{font-size:clamp(24px,4.4vw,40px)}

.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastille{
  background:var(--surface);border:1.5px solid var(--trait);border-radius:99px;
  padding:7px 14px;font-size:14px;font-weight:600;
}

.attente{display:flex;gap:7px;justify-content:center;padding:26px 0}
.attente span{
  width:9px;height:9px;border-radius:50%;background:var(--ligne);
  animation:respire 1.2s ease-in-out infinite;
}
.attente span:nth-child(2){animation-delay:.16s}
.attente span:nth-child(3){animation-delay:.32s}
@keyframes respire{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.attente span{animation:none;opacity:.6}}

.rang.moi{border-color:var(--accent-plein);background:var(--surface)}
.rang.moi .nom::after{content:" · toi";color:var(--accent);font-weight:600}

button.carte:disabled{opacity:.4;cursor:not-allowed}
button.carte:disabled:hover{border-color:var(--trait)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:3px;
}