/* Habillage « jour 2 » commun aux jeux CHALLENGE et CHECK : halos de couleur, mise en page qui tient sur un écran,
   rebonds, confettis (jeu.js). --st est la couleur de la station. Chargé après oms.css.
   Léger pour les tablettes : rien ne tourne en boucle, pas de flou, seules des animations courtes au toucher. */

/* Fond : halos fixes à la couleur de la station. L'emblème en filigrane (oms.css) ne bouge plus pendant le jeu. */
body{min-height:100dvh;padding-block:12px;background:
  radial-gradient(900px 600px at 15% -5%, color-mix(in srgb,var(--st) 32%,transparent), transparent 62%),
  radial-gradient(700px 520px at 105% 105%, color-mix(in srgb,var(--st) 22%,transparent), transparent 60%),
  var(--bg)}
body::before{animation:none}
html,button{touch-action:manipulation}
button{-webkit-tap-highlight-color:transparent;user-select:none}
main{max-width:1120px;gap:14px}
.logos{max-width:1120px;margin-bottom:10px}
.logos .logo,.logos .logo-text{height:clamp(52px,8vh,92px)}
.site-footer{max-width:1120px;margin-top:14px;font-size:.78rem;opacity:.8}
.ecran{gap:14px}

/* Bouton son (ajouté par jeu.js) */
.son{font:inherit;font-size:1.3rem;width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:var(--surface);cursor:pointer;flex:none}
.station + .son{margin-left:6px}

/* Boutons : dégradé, enfoncement au toucher. */
.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--st) 80%,#fff),var(--st) 55%,color-mix(in srgb,var(--st) 75%,#000));box-shadow:0 10px 24px -10px var(--st);transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent}

/* Rebond d'un chiffre ou d'une carte (classe posée par jeu.js) */
.rebond{animation:rebond .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes rebond{40%{transform:scale(1.35)}}
.arrive{animation:arrive .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes arrive{from{opacity:0;transform:translateY(16px) scale(.97)}}

/* Confettis */
.confetti{position:fixed;will-change:transform,opacity;z-index:50;width:10px;height:14px;border-radius:3px;pointer-events:none;animation:confetti 1.2s cubic-bezier(.15,.6,.4,1) forwards}
.confetti:nth-child(3n){border-radius:50%;width:9px;height:9px}
@keyframes confetti{60%{opacity:1}to{transform:translate(var(--dx),calc(var(--dy) + 420px)) rotate(var(--r));opacity:0}}

/* Fin : trophée qui saute */
.fin::before{content:"🏆";font-size:clamp(4rem,10vw,6rem);line-height:1;animation:trophee .8s cubic-bezier(.3,1.6,.5,1) 4 alternate}
@keyframes trophee{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-14px) rotate(6deg)}}

/* ===== CHALLENGE ===== */
.progression{height:10px;border-radius:5px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}
.progression i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--st),color-mix(in srgb,var(--st) 55%,#FFD23F));box-shadow:0 0 12px var(--st);transition:width .5s cubic-bezier(.3,1.3,.5,1)}

/* Histoire : bulles qui arrivent une à une */
.recit li{background:color-mix(in srgb,var(--surface) 82%,transparent);animation:none}
.recit li:last-child{animation:bulle .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes bulle{from{opacity:0;transform:translateX(-30px) scale(.92)}}

/* Pendant les questions : l'histoire à gauche, la question à droite, sur un seul écran. */
#ecran-scenario{grid-template-columns:minmax(0,1fr);grid-template-areas:"haut" "prog" "panneau" "titre" "recit" "question" "actions" "aide";align-items:start}
#ecran-scenario > .haut{grid-area:haut} #ecran-scenario > .progression{grid-area:prog} #ecran-scenario > .panneau{grid-area:panneau}
#sc-titre{grid-area:titre} #ecran-scenario > .recit{grid-area:recit} #ecran-scenario > .question{grid-area:question}
#ecran-scenario > .actions{grid-area:actions} #ecran-scenario > .aide{grid-area:aide}
@media (min-width:820px){
  #ecran-scenario:has(#question:not([hidden])){grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);column-gap:22px;
    grid-template-areas:"haut haut" "prog prog" "panneau question" "titre question" "recit question" "aide question" "actions actions";grid-template-rows:auto auto auto auto auto 1fr auto}
  #ecran-scenario:has(#question:not([hidden])) .recit li{font-size:clamp(.95rem,1.35vw,1.1rem);padding:10px 14px}
  #ecran-scenario:has(#question:not([hidden])) #sc-titre{font-size:1.3rem}
  #ecran-scenario:has(#question:not([hidden])) .panneau{padding:8px 14px;font-size:.85rem}
  #ecran-scenario:has(#question:not([hidden])) .question{padding:18px 22px;gap:6px}
  #ecran-scenario:has(#question:not([hidden])) .q-texte{font-size:clamp(1.3rem,2.4vw,1.8rem)}
  #ecran-scenario:has(#question:not([hidden])) .reponses{gap:9px}
  #ecran-scenario:has(#question:not([hidden])) .rep{padding:11px 16px;font-size:clamp(.98rem,1.5vw,1.12rem)}
  #ecran-scenario:has(#question:not([hidden])) .repere{padding:10px 14px}
  #ecran-scenario:has(#question:not([hidden])) .repere p{font-size:1rem}
  #ecran-scenario:has(#question:not([hidden])) .recit{gap:8px;border-width:6px;padding-block:10px}
  #ecran-scenario:has(#question:not([hidden])) .recit li::after{font-size:.75rem}
}

/* Question : carte en verre avec liseré lumineux */
.question{position:relative;background:color-mix(in srgb,var(--surface) 88%,transparent);border:0;border-radius:24px;
  box-shadow:0 0 0 3px var(--st),0 24px 50px -24px var(--st)}
.reponses{gap:12px}
.rep{border-radius:18px;padding:16px 20px;font-size:clamp(1.05rem,1.8vw,1.25rem);box-shadow:0 6px 0 color-mix(in srgb,var(--line) 90%,#000);transition:transform .12s,box-shadow .12s,background .2s,color .2s}
.rep:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--line) 90%,#000)}
.rep.choisi{background:var(--st);border-color:var(--st);color:#fff;box-shadow:0 6px 0 color-mix(in srgb,var(--st) 65%,#000);animation:rebond .35s cubic-bezier(.3,1.8,.5,1)}
.rep.ok{color:var(--ink);box-shadow:0 0 0 3px var(--good),0 0 22px -2px var(--good);animation:rebond .45s cubic-bezier(.3,1.8,.5,1)}
.rep.eviter{opacity:.75;box-shadow:none;animation:secoue .4s}
@keyframes secoue{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cat{transition:transform .12s}
.cat.choisi{animation:rebond .3s cubic-bezier(.3,1.8,.5,1)}
.repere{animation:arrive .5s cubic-bezier(.2,1.3,.4,1);background:color-mix(in srgb,var(--st) 12%,var(--bg))}

/* ===== CHECK ===== */
.barre{height:10px}
.barre i{background:linear-gradient(90deg,var(--st),color-mix(in srgb,var(--st) 55%,#FFD23F));box-shadow:0 0 12px var(--st)}
.affirmation{position:relative;min-height:clamp(110px,18vh,200px);padding:clamp(18px,3vw,36px);background:color-mix(in srgb,var(--surface) 85%,transparent);border:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--st) 60%,transparent),0 24px 50px -24px var(--st)}
.affirmation::before{content:"?";position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.4rem;color:#fff;background:var(--st);box-shadow:0 6px 16px -6px var(--st)}
.votes{gap:12px}
.vote{padding:12px 10px;gap:6px;}
.nombre{font-size:clamp(2rem,5vw,3rem)}
.plusmoins button{width:52px;height:52px;transition:transform .1s}
.plusmoins button:active{transform:scale(.88)}
.vote.bonne{position:relative;transform:scale(1.05);box-shadow:0 0 0 4px var(--c),0 0 34px -4px var(--c);animation:rebond .5s cubic-bezier(.3,1.8,.5,1)}
.vote.bonne::after{content:"✓";position:absolute;top:-16px;right:-12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.4rem;color:#fff;background:var(--c);box-shadow:0 6px 16px -6px var(--c);animation:tampon .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes tampon{from{transform:scale(2.4) rotate(-25deg);opacity:0}}
.vote.passe{opacity:.35;filter:grayscale(.6)}
.verdict{display:flex;align-items:center;gap:10px}

@media (prefers-reduced-motion: reduce){
  .fin::before,.recit li:last-child,.rep,.rep.choisi,.rep.ok,.rep.eviter,.vote.bonne,.vote.bonne::after,.arrive,.rebond,.repere{animation:none}
}
.fin .btn{justify-self:center}

/* Affiche de la station (CHECK ou CHALLENGE) sur l'écran d'accueil : à gauche sur grand écran, en bandeau sur tablette. */
.affiche{display:block;justify-self:center;width:auto;max-width:100%;max-height:34vh;border-radius:22px;box-shadow:0 0 0 3px var(--st),0 20px 40px -20px var(--st)}
@media (min-width:820px){
  #ecran-accueil:has(.affiche){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);column-gap:28px;align-items:start}
  #ecran-accueil > *{grid-column:2}
  #ecran-accueil > .affiche{grid-column:1;grid-row:1 / span 12;max-height:none;height:auto;position:sticky;top:12px}
}

/* ===== CHALLENGE : une couleur par groupe d'âge (data-age posé par challenge.js), de la carte Mission à la fin ===== */
.ages .age:nth-child(1){--age:#0FA3B1} .ages .age:nth-child(2){--age:#E8891C} .ages .age:nth-child(3){--age:#7B4DD8}
#ecran-accueil .ages .age{box-shadow:0 0 0 4px var(--age),0 14px 30px -14px rgba(0,0,0,.45)}
#ecran-accueil .ages .age .age-tranche{background:var(--age)}
body[data-age="0"]{--age:#0FA3B1} body[data-age="1"]{--age:#E8891C} body[data-age="2"]{--age:#7B4DD8}
body[data-age]{--st:var(--age);--s1:var(--age);--s2:var(--age);--s3:var(--age)}
body[data-age] .tag{background:var(--st)}
.age-badge{justify-self:start;font-size:1rem;padding:8px 16px}
.fin .age-badge{justify-self:center}

/* Retour immédiat : bonne ou mauvaise réponse */
.retour{margin:4px 0 0;padding:10px 16px;border-radius:14px;font-weight:800;font-size:clamp(1.05rem,1.8vw,1.3rem);color:#fff;animation:arrive .3s cubic-bezier(.2,1.3,.4,1)}
.retour.bien{background:var(--good)}
.retour.mal{background:var(--bad);animation:secoue .4s}
.rep.choisi.bien{background:var(--good);border-color:var(--good);box-shadow:0 6px 0 color-mix(in srgb,var(--good) 65%,#000)}
.rep.choisi.mal{background:var(--bad);border-color:var(--bad);box-shadow:0 6px 0 color-mix(in srgb,var(--bad) 65%,#000);animation:secoue .4s}
.rep.choisi.bien::after{content:" ✓"} .rep.choisi.mal::after{content:" ✕"}
.ligne.bien{border-color:var(--good)} .ligne.mal{border-color:var(--bad);animation:secoue .4s}

/* Fin : message de motivation */
.motivation{max-width:46ch;margin:0;font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;line-height:1.4;padding:18px 22px;border-radius:20px;background:color-mix(in srgb,var(--st) 14%,var(--surface));box-shadow:0 0 0 3px var(--st)}
.score{margin:0;font-weight:800;font-size:1.1rem}