:root{
  --yellow:#ffd400; --yellow-d:#e6b800; --black:#141414; --paper:#fff8dc;
  --orange:#ff7a00; --purple:#4b1d6b; --ok:#1f9d55; --ko:#d63a2f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--black);
  font:18px/1.45 "Comic Neue","Comic Sans MS","Chalkboard SE",system-ui,sans-serif;
  background:
    repeating-linear-gradient(135deg,var(--yellow) 0 28px,var(--black) 28px 56px);
  background-attachment:fixed;
}
h1,h2,.btn,.brand,.kicker{font-family:"Bangers","Impact","Arial Black",system-ui,sans-serif;letter-spacing:.03em}
.top{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--black);color:var(--yellow);border-bottom:4px solid var(--orange)}
.brand{color:var(--yellow);text-decoration:none;font-size:1.5rem}
.brand span{white-space:nowrap;background:var(--orange);color:var(--black);padding:0 8px;border-radius:6px;font-size:1rem;margin-left:6px}
.top-date{font-size:.9rem;color:#fff}
main{max-width:920px;margin:0 auto;padding:20px 16px}
.screen{display:none}.screen.active{display:block;animation:pop .35s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.hero,.card{background:var(--paper);border:5px solid var(--black);border-radius:18px;box-shadow:8px 8px 0 var(--black);padding:22px}
.hero{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}
.hero-text{flex:1 1 320px}
.walker{max-height:300px;width:auto}
@media(min-width:760px){.walker{max-height:380px}}
.cover{width:320px;max-width:100%;display:block;border:4px solid var(--black);border-radius:6px;transform:rotate(-3deg);box-shadow:6px 6px 0 var(--orange)}
.kicker{display:inline-block;margin:0 0 6px;background:var(--orange);color:var(--black);padding:2px 12px;border-radius:999px;font-size:1.1rem;transform:rotate(-2deg)}
h1{margin:.1em 0;font-size:clamp(2.4rem,9vw,4.4rem);line-height:1;color:var(--black);text-shadow:3px 3px 0 var(--yellow)}
h1 em{color:var(--purple);font-style:normal;text-shadow:3px 3px 0 var(--orange)}
h1 small{font-size:.5em;color:var(--black)}
h2{font-size:clamp(1.5rem,5vw,2.1rem);margin:.2em 0 .6em;line-height:1.15;text-wrap:balance}
.lead{font-size:1.1rem}
.facts{list-style:none;padding:0;margin:12px 0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{background:var(--yellow);border:3px solid var(--black);border-radius:10px;padding:2px 10px;font-weight:700}
.note{font-size:.85rem;opacity:.75;margin-top:14px}
.btn{
  display:inline-block;cursor:pointer;text-decoration:none;text-align:center;
  background:var(--orange);color:var(--black);border:4px solid var(--black);border-radius:12px;
  padding:10px 22px;font-size:1.4rem;box-shadow:4px 4px 0 var(--black);transition:transform .08s,box-shadow .08s;
}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--black)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--black)}
.btn.ghost{background:var(--yellow)}
.progress{height:18px;background:var(--black);border-radius:999px;border:3px solid var(--black);overflow:hidden;margin-bottom:8px}
#bar{height:100%;width:0;background:repeating-linear-gradient(135deg,var(--yellow) 0 10px,var(--orange) 10px 20px);transition:width .35s}
.counter{margin:0 0 12px;color:var(--yellow);font-weight:700;text-shadow:1px 1px 0 var(--black),-1px -1px 0 var(--black),1px -1px 0 var(--black),-1px 1px 0 var(--black)}
.mascot{display:block;max-height:140px;margin:0 auto 8px}
.answers{display:grid;gap:12px}
@media(min-width:640px){.answers{grid-template-columns:1fr 1fr}}
.answer{
  font:inherit;font-weight:700;text-align:left;cursor:pointer;color:var(--black);
  background:#fff;border:4px solid var(--black);border-radius:12px;padding:12px 14px;min-height:56px;
  box-shadow:3px 3px 0 var(--black);transition:transform .08s;
}
.answer:hover:not(:disabled){background:var(--yellow);transform:translate(-1px,-1px)}
.answer:disabled{cursor:default}
.answer.good{background:#c9f2d7;border-color:var(--ok)}
.answer.bad{background:#ffd3cf;border-color:var(--ko);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.feedback{margin-top:16px;padding:14px;background:var(--yellow);border:4px dashed var(--black);border-radius:12px}
.feedback p{margin:0 0 12px}
.result{text-align:center}
.big-score{font-family:"Bangers","Impact",sans-serif;font-size:3.4rem;margin:0;color:var(--purple)}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0 8px}
.bonus a{color:var(--purple);font-weight:700}
.film{max-width:920px;margin:6px auto 0;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;background:var(--black);color:#fff;border-top:4px solid var(--orange);text-align:center}
.film p{margin:0}
.film a{color:var(--yellow);font-weight:700}
.film-tag{background:var(--yellow);color:var(--black);font-weight:700;padding:0 10px;border-radius:6px}
footer{text-align:center;font-size:.8rem;padding:16px;background:var(--black);color:#bbb}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.mascot-wrap{position:relative;width:max-content;margin:0 auto 8px;max-width:100%}
.mascot-wrap .mascot{max-height:170px;width:auto;margin:0;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.25))}
.cap{position:absolute;right:-70px;top:-20px;width:64px;animation:drop .5s ease-out}
@keyframes drop{from{transform:translateY(-60px) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.hop{animation:hop .5s ease}
@keyframes hop{30%{transform:translateY(-14px) rotate(-3deg)}60%{transform:translateY(0) rotate(2deg)}}
.result .mascot{max-height:260px;margin:0 auto 8px}

.logo{display:block;width:min(260px,70%);margin:0 0 6px}
.logo-sm{height:30px;width:auto;vertical-align:middle;background:var(--yellow);padding:4px 12px;border-radius:8px}

.big-score small{font-family:"Comic Neue",system-ui,sans-serif;font-size:1rem;color:var(--black);display:block}

/* Halloween : frises et petites animations (dessins fournis, non modifiés) */
.frise{height:64px;background:var(--orange) url("assets/halloween-frise1.png") repeat-x center bottom/auto 58px;border-bottom:4px solid var(--black)}
.frise.f2{background-image:url("assets/halloween-frise2.png");margin-top:18px;border-top:4px solid var(--black)}
.frise.f3{background:url("assets/halloween-frise3.png") repeat-x center bottom/auto 50px;height:56px;border:0;margin:14px -22px -4px}
.bat{position:absolute;top:6px;left:-90px;height:34px;width:auto;animation:fly 16s linear infinite;pointer-events:none}
@keyframes fly{0%{transform:translate(0,0)}25%{transform:translate(30vw,14px)}50%{transform:translate(60vw,-4px)}75%{transform:translate(85vw,12px)}100%{transform:translate(calc(100vw + 120px),0)}}
.hero{position:relative}
.spider{position:absolute;top:-5px;right:12px;width:90px;height:auto;transform-origin:70% 0;animation:swing 3.2s ease-in-out infinite;pointer-events:none}
@keyframes swing{50%{transform:rotate(5deg)}0%,100%{transform:rotate(-5deg)}}
.card.result{position:relative;overflow:hidden}
.fantome{position:absolute;left:8px;top:10px;width:70px;height:auto;animation:bob 3s ease-in-out infinite;pointer-events:none}
@keyframes bob{50%{transform:translateY(-10px)}}
@media(max-width:520px){.spider{width:60px}.fantome{width:50px}}

a.film{display:block;max-width:1100px;margin:6px auto 0;padding:0;background:var(--black);border:4px solid var(--black);border-top:0;color:var(--yellow);text-decoration:none;text-align:center}
a.film img{display:block;width:100%;height:auto}
.film-cta{display:block;padding:8px 12px;font-family:"Bangers","Impact",sans-serif;font-size:1.2rem;letter-spacing:.04em}
a.film:hover .film-cta,a.film:focus-visible .film-cta{background:var(--yellow);color:var(--black)}

/* Tirage au sort / newsletter */
.card.draw{margin-top:22px;background:#fff3c4}
.prizes{display:flex;gap:16px;justify-content:center;align-items:flex-end;flex-wrap:wrap;margin:8px 0 14px}
.prizes figure{margin:0;text-align:center;flex:0 1 200px}
.prizes img{display:block;width:100%;height:auto;border:4px solid var(--black);border-radius:6px;box-shadow:5px 5px 0 var(--orange);background:#fff}
.prizes figure:first-child img{transform:rotate(-2deg)}.prizes figure:last-child img{transform:rotate(2deg)}
.prizes figcaption{font-family:"Bangers","Impact",sans-serif;margin-top:8px;letter-spacing:.03em}
#draw-form{display:grid;gap:8px;max-width:460px;margin:0 auto}
#draw-form label{font-weight:700}
#draw-form input[type=text],#draw-form input[type=email]{font:inherit;width:100%;padding:10px 12px;border:4px solid var(--black);border-radius:10px;background:#fff;color:var(--black)}
#draw-form input:focus-visible{outline:4px solid var(--orange);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;font-size:.9rem}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--orange)}
.check a{color:var(--purple)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.draw-intro{margin:0 0 4px;text-align:center}
.draw-error{margin:0;padding:8px 12px;background:#ffd3cf;border:3px solid var(--ko);border-radius:10px;font-weight:700}
.legal{font-size:.78rem;opacity:.8;margin:4px 0 0;text-align:center}
.draw-done{text-align:center}.draw-done h3{font-family:"Bangers","Impact",sans-serif;font-size:1.8rem;margin:.2em 0}
.card.draw h2{text-align:center}.card.draw .kicker{display:block;width:max-content;margin-inline:auto}

/* Bas de page : fond orange continu, assorti à la bannière du film */
:root{--orange-film:#ec6500}
.bottom{background:var(--orange-film);margin-top:24px}
.bottom .frise.f2{background-color:transparent;border:0;margin:0;height:70px;background-position:center bottom}
.bottom a.film{background:transparent;border:0;margin:0 auto;color:var(--black)}
.bottom .film-cta{padding:12px;font-size:1.3rem}
.bottom a.film:hover .film-cta,.bottom a.film:focus-visible .film-cta{background:var(--black);color:var(--yellow)}
.bottom footer{background:transparent;color:var(--black);padding:6px 16px 22px}

.prizes{display:block;margin:8px auto 14px;max-width:520px}
.prizes img{border:0;border-radius:0;box-shadow:none;background:none;transform:none!important}