/* Étape CHECK : une affirmation par écran, compteurs de votes pour les cartons levés, puis repère de l'expert.
   La couleur de la station (--st) vient de config/quiz.php. */
:root{--vrai:#2B9B67;--autre:#D9822B;--jsp:#7A8796}
[hidden]{display:none!important}
main{max-width:960px}
.logos{max-width:960px;margin:0 auto 18px;display:flex;align-items:center;gap:14px}
.logo{height:56px;width:auto;border-radius:10px;display:block}
.logo-text{display:grid;place-items:center;height:56px;padding:0 14px;border:2px solid var(--line);font-weight:800;font-size:.8rem;line-height:1.15;text-align:center;color:var(--ink);background:var(--surface)}
.station{margin-left:auto;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:var(--st);color:#fff}

.ecran{display:grid;gap:20px;animation:entre .4s ease-out}
@keyframes entre{from{opacity:0;transform:translateY(12px)}}
.eyebrow{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st)}
h1{font-size:clamp(2.4rem,7vw,4.4rem);line-height:1.05}
h1 .v{color:var(--vrai)} h1 .f{color:var(--autre)}
.choisir{margin:8px 0 0;font-weight:800;font-size:1.15rem}
.ages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.age{font:inherit;font-weight:800;font-size:1.4rem;padding:26px;border-radius:20px;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .15s,border-color .15s}
.age:hover,.age:focus-visible{transform:translateY(-4px);border-color:var(--st)}

.haut{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tag{font-weight:800;font-size:.85rem;padding:6px 14px;border-radius:999px;background:var(--st);color:#fff}
.compteur{font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted)}
.barre{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.barre i{display:block;height:100%;width:0;background:var(--st);transition:width .4s}
.affirmation{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:clamp(26px,5vw,56px);min-height:clamp(150px,22vh,240px);display:grid;place-items:center;text-align:center}
.affirmation p{margin:0;font-weight:800;font-size:clamp(1.5rem,4vw,2.8rem);line-height:1.2;text-wrap:balance}

.aide-vote{margin:0;color:var(--muted);font-size:.92rem}
.votes{display:grid;grid-template-columns:1fr 1fr .8fr;gap:14px}
.vote{--c:var(--jsp);display:grid;gap:8px;justify-items:center;padding:18px 12px;border-radius:20px;border:3px solid var(--c);background:color-mix(in srgb,var(--c) 10%,var(--bg));transition:transform .2s,opacity .3s}
.vote.v0{--c:var(--vrai)} .vote.v1{--c:var(--autre)}
.libelle{font-weight:800;font-size:clamp(1.1rem,2.6vw,1.7rem);color:var(--c);text-align:center}
.nombre{font-weight:800;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums}
.plusmoins{display:flex;gap:10px}
.plusmoins button{font:inherit;font-weight:800;font-size:1.6rem;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--c);color:#fff}
.plusmoins .moins{background:transparent;color:var(--c);border:3px solid var(--c)}
.vote.bonne{transform:scale(1.04);box-shadow:0 0 0 4px var(--c)}
.vote.passe{opacity:.45}
.verrou .plusmoins{visibility:hidden}

.repere{display:grid;gap:8px;background:var(--surface);border-radius:18px;padding:18px 22px;border-left:8px solid var(--st);animation:entre .35s ease-out}
.repere p{margin:0;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.45}
.verdict{font-weight:800;font-size:clamp(1.3rem,3vw,2rem)!important}
.joker{color:var(--muted);font-size:.9rem!important}

.actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn{justify-self:start;font:inherit;font-weight:800;border:0;border-radius:999px;padding:16px 30px;background:var(--st);color:#fff;cursor:pointer;font-size:1.1rem}
.btn.ghost{background:transparent;color:var(--muted);border:2px solid var(--line)}
.fin{justify-items:center;text-align:center;padding-block:30px}
.fin h2{font-size:clamp(1.6rem,4vw,2.6rem)}
.recap{text-align:left;margin:0;padding:0;list-style:none;display:grid;gap:10px;width:100%}
.recap li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;gap:12px;align-items:baseline;font-weight:700}
.recap b{flex:none;font-size:.8rem;padding:3px 10px;border-radius:999px;color:#fff;background:var(--vrai)}
.recap b.r1{background:var(--autre)}
@media (max-width:700px){
  .ages{grid-template-columns:1fr}
  .votes{grid-template-columns:1fr}
  .station{display:none}
}
@media (prefers-reduced-motion: reduce){.ecran,.repere{animation:none}.barre i,.vote{transition:none}}