/* ============================================================
   JEU — « C'EST MOI, LE COTON » (événement 1 Vêtement = 1 Sourire)
   Page événementielle : jeu.html + jeu.js + images/jeu/.
   Palette = site (coral / wine / green / black / cream). Zéro doré.
   Retrait après l'événement : voir mokonzi-event/JEU_README.md
   ============================================================ */
.jeu-page{background:var(--black);color:#fff}
.jeu-page .site-nav.solid{border-bottom-color:rgba(255,255,255,.14)}

/* --- Stage plein écran ------------------------------------------------ */
.jeu-stage{position:relative;min-height:calc(100svh - 92px);display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--black);isolation:isolate}
.jeu-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--black)}
.jeu-media img,.jeu-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 6s linear}
.jeu-media video{opacity:0}
.jeu-media.has-video video{opacity:1}
.jeu-media.is-switching img,.jeu-media.is-switching video{opacity:0}
.jeu-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,21,16,.55) 0%,rgba(18,21,16,.2) 35%,rgba(18,21,16,.78) 70%,rgba(18,21,16,.96) 100%),linear-gradient(90deg,rgba(18,21,16,.55),transparent 55%)}
.jeu-progress{position:absolute;left:0;right:0;top:0;height:4px;z-index:3;background:rgba(255,255,255,.14)}
.jeu-progress i{display:block;height:100%;width:0;background:var(--coral);transition:width .6s cubic-bezier(.22,1,.36,1)}
.jeu-tag{position:relative;z-index:2;margin:0;padding:16px 5vw 22px;font:600 .58rem/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:12px}
.jeu-tag .wordmark{font-size:1.45rem;color:#fff;letter-spacing:0;text-transform:none}

/* --- Carte question ---------------------------------------------------- */
.jeu-card{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding:clamp(120px,14vh,190px) 5vw 26px;max-width:1180px;width:100%;margin:0 auto;box-sizing:border-box}
.jeu-card.is-out>*{opacity:0;transform:translateY(18px);filter:blur(6px)}
.jeu-card h1:focus{outline:none}
.jeu-card>*{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),filter .5s}
.jeu-kicker{display:flex;align-items:center;gap:14px;margin:0;font:700 .68rem/1 "DM Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--coral)}
.jeu-kicker span{color:rgba(255,255,255,.7)}
.jeu-kicker b{font-weight:700;color:#fff}
.jeu-question{margin:0;font:clamp(1.9rem,5.4vw,4.6rem)/.94 "Archivo Black",sans-serif;letter-spacing:-.045em;text-transform:uppercase;max-width:15ch;text-wrap:balance}
.jeu-question em{font-family:"UnifrakturCook",serif;font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;color:var(--coral)}
.jeu-lead{margin:0;max-width:560px;font-size:clamp(.98rem,1.5vw,1.15rem);line-height:1.6;color:rgba(255,255,255,.86)}

/* Réponses : 4 gros boutons tap-friendly */
.jeu-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 0;padding:0;list-style:none}
.jeu-answer{display:flex;align-items:center;gap:16px;width:100%;min-height:74px;padding:16px 18px;border:1px solid rgba(255,255,255,.34);background:rgba(18,21,16,.62);color:#fff;font:500 clamp(.98rem,1.4vw,1.12rem)/1.3 "DM Sans",sans-serif;text-align:left;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .35s,border-color .35s,transform .35s cubic-bezier(.22,1,.36,1),opacity .35s;-webkit-tap-highlight-color:transparent}
.jeu-answer b{flex:0 0 auto;width:34px;height:34px;display:grid;place-content:center;border:1px solid currentColor;font:800 .72rem "DM Sans",sans-serif;letter-spacing:.06em}
.jeu-answer:hover,.jeu-answer:focus-visible{background:rgba(239,94,73,.16);border-color:var(--coral)}
.jeu-answer:focus-visible,.jeu-chip:focus-visible,.jeu-cta:focus-visible,.jeu-ghost:focus-visible,.jeu-input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.jeu-answers.is-locked .jeu-answer{cursor:default;pointer-events:none}
.jeu-answer.is-correct{background:var(--green);border-color:var(--green);color:#fff;transform:scale(1.015);box-shadow:0 0 0 4px rgba(23,61,44,.35),0 18px 40px rgba(0,0,0,.35)}
.jeu-answer.is-correct b{background:#fff;color:var(--green);border-color:#fff}
.jeu-answer.is-wrong{border-color:var(--coral);color:rgba(255,255,255,.9);background:rgba(108,35,48,.55)}
.jeu-answers.is-locked .jeu-answer:not(.is-correct):not(.is-wrong){opacity:.38}
.jeu-feedback{margin:0;min-height:1.4em;font:700 .74rem/1.4 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.jeu-feedback.is-good{color:#9fe0b6}

/* CTA / boutons secondaires */
.jeu-actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.jeu-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-width:min(280px,100%);padding:18px 22px;border:0;background:var(--coral);color:var(--black);font:800 .74rem/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s}
.jeu-cta:hover{transform:translateY(-2px);background:#ff6f5a}
.jeu-cta .cta-mark{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.jeu-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 4px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.4);color:#fff;font:800 .68rem/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .3s,color .3s}
.jeu-ghost:hover{border-color:var(--coral);color:var(--coral)}

/* --- Écran d'accueil --------------------------------------------------- */
.jeu-stage[data-screen="start"] .jeu-card{justify-content:center;min-height:calc(100svh - 92px - 60px);padding-top:80px}
.jeu-title{margin:0;font:clamp(3.1rem,10vw,8.6rem)/.84 "Archivo Black",sans-serif;letter-spacing:-.06em;text-transform:uppercase}
.jeu-title em{display:block;font-family:"UnifrakturCook",serif;font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;font-size:.78em;color:var(--coral);margin-top:.1em}
.jeu-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0;list-style:none;font:600 .64rem/1.4 "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.jeu-meta li:before{content:"";display:inline-block;width:8px;height:8px;background:var(--coral);margin-right:10px;vertical-align:1px}

/* --- Écran 0 : le teaser AVANT le jeu ---------------------------------- */
.jeu-stage[data-screen="teaser"] .jeu-card{justify-content:center;min-height:calc(100svh - 92px - 60px);padding-top:80px;gap:18px}
.jeu-title--teaser{font-size:clamp(2rem,6vw,4.4rem)}
.jeu-teaser{position:relative;width:100%;max-width:820px;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.jeu-teaser iframe,.jeu-teaser #jeu-yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.jeu-teaser .teaser-play img{opacity:.92}

/* --- Scène : le clip joue seul avant la question ------------------------ */
.jeu-stage[data-phase="scene"]{cursor:pointer}
.jeu-stage[data-phase="scene"] .jeu-scrim{opacity:.35;transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.jeu-scrim{transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.jeu-stage[data-phase="scene"] .jeu-card{justify-content:space-between;min-height:calc(100svh - 92px - 60px);padding-top:48px}
.jeu-scene-hint{margin:0;align-self:flex-end;font:700 .62rem/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);animation:jeuHint 2.4s ease-in-out infinite}
@keyframes jeuHint{50%{opacity:.35}}

/* --- Q11 : le camion se remplit --------------------------------------- */
.jeu-truck-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:end}
.jeu-truck{width:100%;max-width:560px;height:auto;display:block;filter:drop-shadow(0 22px 40px rgba(0,0,0,.45))}
.jeu-truck .cargo-fill{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.jeu-truck .garment{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.jeu-truck .garment.is-in{opacity:1;transform:none}
.jeu-truck .wheel{transform-origin:center;animation:jeuWheel 3s linear infinite paused}
.jeu-truck.is-rolling .wheel{animation-play-state:running}
@keyframes jeuWheel{to{transform:rotate(360deg)}}
.jeu-count{display:flex;align-items:baseline;gap:12px;margin:0;font:800 clamp(2.6rem,7vw,5.2rem)/1 "Archivo Black",sans-serif;letter-spacing:-.05em}
.jeu-count small{font:700 .66rem "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.jeu-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.jeu-chip{min-width:70px;min-height:64px;padding:0 20px;border:1px solid rgba(255,255,255,.4);background:rgba(18,21,16,.62);color:#fff;font:800 1.25rem "Archivo Black",sans-serif;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,border-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.jeu-chip:hover{border-color:var(--coral);background:rgba(239,94,73,.16)}
.jeu-chip.is-active{background:var(--coral);border-color:var(--coral);color:var(--black);transform:translateY(-3px)}
.jeu-plus{display:none;gap:10px;align-items:stretch}
.jeu-plus.is-open{display:flex}
.jeu-input{width:120px;padding:0 16px;border:1px solid rgba(255,255,255,.5);background:rgba(18,21,16,.7);color:#fff;font:800 1.25rem "Archivo Black",sans-serif;min-height:64px;-moz-appearance:textfield}
.jeu-input::-webkit-outer-spin-button,.jeu-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.jeu-status{margin:0;font:700 clamp(1rem,2vw,1.4rem)/1.35 "DM Sans",sans-serif;color:#fff;min-height:1.4em}
.jeu-status.is-full{color:var(--coral)}

/* --- Écran final --------------------------------------------------------- */
.jeu-final{margin:0;font:clamp(1.55rem,4.2vw,3.6rem)/1.02 "Archivo Black",sans-serif;letter-spacing:-.04em;text-transform:uppercase;max-width:19ch;text-wrap:balance}
.jeu-final strong{display:block;margin:.35em 0;color:var(--coral);font-size:1.15em}
.jeu-final span{display:block}
.jeu-stat{margin:0;font:700 .7rem/1.5 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.jeu-diptych{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.jeu-diptych li{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:var(--black)}
.jeu-diptych img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}
.jeu-diptych span{position:absolute;left:12px;top:12px;padding:8px 12px;background:var(--black);color:#fff;font:800 .6rem "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.jeu-diptych li:last-child span{background:var(--coral);color:var(--black)}

/* --- Mobile ----------------------------------------------------------------- */
@media(max-width:1000px){.jeu-stage{min-height:calc(100svh - 92px)}}
@media(max-width:700px){
  .jeu-stage{min-height:calc(100svh - 75px)}
  .jeu-stage[data-screen="start"] .jeu-card,.jeu-stage[data-screen="teaser"] .jeu-card,.jeu-stage[data-phase="scene"] .jeu-card{min-height:calc(100svh - 75px - 60px)}
  .jeu-card{padding:110px 5vw 20px;gap:20px}
  .jeu-answers{grid-template-columns:1fr;gap:10px}
  .jeu-answer{min-height:66px;padding:14px 16px}
  .jeu-truck-wrap{grid-template-columns:1fr;gap:18px}
  .jeu-truck{max-width:100%}
  .jeu-cta{width:100%}
  .jeu-scrim{background:linear-gradient(180deg,rgba(18,21,16,.5) 0%,rgba(18,21,16,.25) 30%,rgba(18,21,16,.86) 62%,rgba(18,21,16,.98) 100%)}
  .jeu-tag{padding:10px 5vw 16px}
}
@media(prefers-reduced-motion:reduce){
  .jeu-media img,.jeu-media video,.jeu-card>*,.jeu-answer,.jeu-chip,.jeu-truck .cargo-fill,.jeu-truck .garment,.jeu-progress i{transition:none}
  .jeu-truck .wheel{animation:none}
  .jeu-scene-hint{animation:none}
}