*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ivoire:#F4F2ED; --ivoire2:#E7E4DC; --blanc:#FFFFFF;
  --encre:#0F1115; --body:#3E4450; --muted:#7C828A; --line:#D8D5CC;
  --bleu:#2D53AC; --bleu-profond:#1B2A6B; --bleu-vague:#79A4C1;
  --or:#F5C542; --or-fonce:#D9A916; --rose:#E9A8B0;
  --grise:#C9CBC4; --verrou:#EDEBE4; --verrou-bord:#9AA0A8;
}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background:var(--ivoire);
  color:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.pix{font-family:'Press Start 2P',monospace;letter-spacing:0}
.titre{font-family:'Archivo Black','Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;color:var(--encre)}

/* ── S1 · barre d'objectif, collante ─────────────────────────── */
.barre{position:sticky;top:0;z-index:50;background:var(--encre);color:#fff;
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  box-shadow:0 2px 0 rgba(15,17,21,.12)}
.barre img{height:20px;width:auto;display:block;flex-shrink:0}
.barre-obj{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#A9AEB6;
  font-weight:700;line-height:1.3;flex:1;min-width:0}
.barre-serie{font-size:10px;color:var(--or);white-space:nowrap;flex-shrink:0}
@media(max-width:430px){
  .barre{gap:9px;padding:9px 12px}
  .barre-obj{font-size:9px;letter-spacing:.08em}
  .barre-sub{display:none}
  .btn-vote{padding:9px 11px;font-size:11px}
}
.btn-vote{background:var(--or);color:var(--encre);border:none;
  box-shadow:3px 3px 0 var(--or-fonce);
  padding:9px 14px;font:800 12px/1 'Plus Jakarta Sans';text-transform:uppercase;
  letter-spacing:.04em;cursor:pointer;flex-shrink:0;transition:transform .08s,box-shadow .08s}
.btn-vote:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--or-fonce)}
.btn-vote:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--or-fonce)}
.btn-vote.fait{background:#8FBF7F;box-shadow:3px 3px 0 #6A9A5B;cursor:default}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.btn-vote:not(.fait){animation:pulse 2.6s ease-in-out infinite}

/* ── entête de section ───────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.intro{padding:26px 0 6px;text-align:center}
.intro h1{font-size:clamp(21px,5.4vw,34px);line-height:1.15;max-width:16ch;margin:0 auto}
.intro .sous{margin-top:9px;font-size:12.5px;color:var(--muted)}

/* ── S2 · HERO ───────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:30px 0 0}
.hero-in{max-width:1100px;margin:0 auto;padding:0 18px;position:relative;z-index:2}
.hero h1{font-size:clamp(25px,6.9vw,58px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance;
  max-width:13ch;margin:0 auto;text-align:center}
.hero h1 em{font-style:normal;color:var(--bleu)}
.hero-sur{text-align:center;font-size:10px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bleu);margin-bottom:12px}
.hero-sous{text-align:center;margin-top:14px;font-size:13.5px;color:var(--body);
  max-width:34ch;margin-left:auto;margin-right:auto}
.hero-sous b{color:var(--encre)}

/* le visuel : Kanoé sur la rivière */
.scene{position:relative;margin:22px auto 0;max-width:520px;aspect-ratio:520/400}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.scene img{position:absolute;left:50%;bottom:15%;height:58%;width:auto;max-width:74%;
  transform:translateX(-50%);image-rendering:pixelated;
  filter:drop-shadow(0 10px 0 rgba(27,42,107,.13));
  animation:tangue 4.2s ease-in-out infinite}
@keyframes tangue{0%,100%{transform:translateX(-50%) translateY(0) rotate(-.7deg)}
                  50%{transform:translateX(-50%) translateY(-9px) rotate(.7deg)}}

/* l'appel à l'action */
.cta{margin:4px auto 0;display:flex;flex-direction:column;align-items:center;gap:11px}
.btn-geant{background:var(--or);color:var(--encre);border:4px solid var(--encre);
  box-shadow:6px 6px 0 var(--encre);
  padding:19px 34px;font:800 clamp(16px,4.6vw,21px)/1 'Plus Jakarta Sans';
  text-transform:uppercase;letter-spacing:.03em;cursor:pointer;
  transition:transform .09s,box-shadow .09s;max-width:100%}
.btn-geant:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--encre)}
.btn-geant:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--encre)}
.btn-geant.fait{background:#8FBF7F;cursor:default;animation:none}
.btn-geant:not(.fait){animation:pulse 2.6s ease-in-out infinite}
.preuve{font-size:13px;color:var(--body);text-align:center}
.preuve b{color:var(--encre);font-family:'Press Start 2P',monospace;font-size:12px}
.compte{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:center}
.compte b{color:var(--bleu)}

@media(min-width:860px){
  .hero{padding:46px 0 0}
  .scene{aspect-ratio:520/400;margin:0}
  .hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
  .hero-txt{text-align:left}
  .hero h1,.hero-sur,.hero-sous,.compte,.preuve{text-align:left;margin-left:0}
  .hero h1{max-width:none}
  .cta{align-items:flex-start}
  .scene{margin:0;max-width:none}
}

/* ── S4 · progression ────────────────────────────────────────── */
.prog{display:flex;gap:10px;max-width:520px;margin:20px auto 4px}
.prog-bloc{flex:1;background:var(--blanc);border:2px solid var(--encre);
  box-shadow:3px 3px 0 rgba(15,17,21,.14);padding:11px 8px;text-align:center}
.prog-val{font-family:'Press Start 2P',monospace;font-size:15px;color:var(--encre);line-height:1.4}
.prog-lib{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-top:6px}
.jauge{max-width:520px;margin:14px auto 0}
.jauge-piste{height:16px;background:var(--verrou);border:2px solid var(--encre);position:relative;overflow:hidden}
.jauge-fill{height:100%;width:29.4%;background:repeating-linear-gradient(90deg,
  var(--bleu) 0 8px,var(--bleu-profond) 8px 16px)}
.jauge-txt{margin-top:7px;font-size:12px;color:var(--muted);text-align:center}

/* ── S3 · LE PLATEAU ─────────────────────────────────────────── */
.plateau-tete{text-align:center;margin:34px 0 10px}
.plateau-tete h2{font-size:clamp(17px,4.4vw,24px)}
.plateau-tete p{font-size:12.5px;color:var(--muted);margin-top:4px}
/* les cadeaux qui donnent envie de rester · quatre exemples, pas la liste */
.plateau-lots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-top:10px;max-width:430px;margin-left:auto;margin-right:auto}
.plateau-lots span{font-size:10.5px;font-weight:800;color:var(--encre);
  background:var(--blanc);border:2px solid var(--encre);padding:5px 9px;
  box-shadow:2px 2px 0 rgba(15,17,21,.22)}

.plateau{position:relative;margin:8px auto 0;width:100%;max-width:375px;
  aspect-ratio:375/1500;touch-action:pan-y}
.plateau svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.case{position:absolute;transform:translate(-50%,-50%);
  width:36px;height:36px;border:3px solid var(--encre);background:var(--grise);
  cursor:pointer;padding:0;display:grid;place-items:center;
  image-rendering:pixelated;transition:filter .12s}
.case::after{content:"";position:absolute;inset:-8px}      /* zone tactile 52px */
.case:hover{filter:brightness(1.06)}
.case .num{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--encre);pointer-events:none}
.case.ouverte{background:var(--bleu-vague)}
.case.ratee{background:var(--grise);border-color:var(--verrou-bord)}
.case.ratee::before{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:3px;
  background:var(--verrou-bord);transform:rotate(-38deg)}
.case.verrou{background:var(--verrou);border-color:var(--verrou-bord);cursor:default}
.case.verrou .num{color:var(--verrou-bord)}
.case.jour{width:48px;height:48px;background:var(--or);border-width:4px;z-index:6}
.case.jour .num{font-size:10px}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 rgba(245,197,66,.75)}
                70%{box-shadow:0 0 0 14px rgba(245,197,66,0)}}
.case.jour{animation:halo 2.4s ease-out infinite}

/* le bob gagné, posé en bas à droite d'une case ouverte */
.bobmini{position:absolute;place-self:end;right:-8px;bottom:-8px;left:auto;top:auto;
  width:18px!important;height:14px!important}

/* ── le canoë ────────────────────────────────────────────────── */
.canoe{position:absolute;transform-origin:50% 50%;z-index:8;pointer-events:none;
  width:66px;height:43px;filter:drop-shadow(2px 3px 0 rgba(15,17,21,.22))}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -3px}}
.canoe-inner{width:100%;height:100%;animation:flotte 2.8s ease-in-out infinite}

/* ── modale ──────────────────────────────────────────────────── */
.voile{position:fixed;inset:0;background:rgba(15,17,21,.55);z-index:100;
  display:grid;place-items:end center;opacity:0;pointer-events:none;transition:opacity .18s}
.voile.on{opacity:1;pointer-events:auto}
.modale{background:var(--ivoire);width:100%;max-width:430px;border-top:4px solid var(--encre);
  padding:22px 20px 30px;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.9,.3,1);
  max-height:88vh;overflow:auto}
.voile.on .modale{transform:translateY(0)}
@media(min-width:620px){
  .voile{place-items:center}
  .modale{border:4px solid var(--encre);box-shadow:8px 8px 0 rgba(15,17,21,.2);transform:translateY(18px) scale(.97)}
  .voile.on .modale{transform:translateY(0) scale(1)}
}
.m-jour{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--bleu)}
.m-date{font-size:12px;color:var(--muted);margin-top:6px;text-transform:capitalize}
.m-titre{font-size:21px;margin-top:12px;line-height:1.25}
.m-corps{margin-top:10px;font-size:14.5px}
.m-bob{margin-top:18px;display:flex;align-items:center;gap:13px;background:var(--blanc);
  border:2px solid var(--encre);box-shadow:3px 3px 0 rgba(15,17,21,.14);padding:12px 14px}
.m-bob>div{min-width:0}
.m-bob svg,.m-bob img{flex:0 0 auto}
.m-bob strong{color:var(--encre);font-size:14px}
.m-bob span{font-size:12.5px;color:var(--muted);display:block}
.m-close{margin-top:20px;width:100%;background:var(--encre);color:#fff;border:none;
  padding:13px;font:800 13px 'Plus Jakarta Sans';text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
/* ═══ ① LE COUVERCLE QUI SE SOULÈVE ═══════════════════════════ */
.couvercle{position:fixed;z-index:97;pointer-events:none;background:var(--or);
  border:4px solid var(--encre);transform-origin:50% 100%;
  animation:souleve .46s cubic-bezier(.3,.9,.4,1) forwards}
@keyframes souleve{
  0%  {transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}
  35% {transform:translate(-50%,-72%) rotate(-7deg) scale(1.04);opacity:1}
  100%{transform:translate(-50%,-190%) rotate(-26deg) scale(.82);opacity:0}}

.lueur{position:fixed;z-index:96;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,231,150,.95) 0%,rgba(245,197,66,.55) 42%,rgba(245,197,66,0) 72%);
  animation:jaillit .62s cubic-bezier(.2,.75,.35,1) forwards}
@keyframes jaillit{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}
                   28%{opacity:1}
                   100%{transform:translate(-50%,-50%) scale(4.6);opacity:0}}

/* les rayons qui sortent de la case, seulement sur un cadeau */
.rayons{position:fixed;z-index:96;pointer-events:none;width:0;height:0}
.rayons i{position:absolute;width:5px;background:rgba(255,226,140,.9);
  transform-origin:50% 100%;animation:rayonne .56s ease-out forwards}
@keyframes rayonne{0%{height:0;opacity:0}30%{opacity:.95}100%{height:var(--h);opacity:0}}

/* ═══ ② TROIS NIVEAUX D'OUVERTURE ═════════════════════════════ */
/* le voile qui s'assombrit une demi-seconde, réservé aux gros lots */
.noirci{position:fixed;inset:0;z-index:95;background:#05070B;opacity:0;pointer-events:none;
  animation:assombrit .95s ease-out forwards}
@keyframes assombrit{0%{opacity:0}22%{opacity:.82}100%{opacity:0}}

/* la pluie de pixels dorés derrière la carte */
.pluie{position:fixed;inset:0;z-index:101;pointer-events:none;overflow:hidden}
.pluie i{position:absolute;top:-24px;width:9px;height:9px;background:var(--or);
  box-shadow:0 0 0 2px rgba(15,17,21,.55);animation:tombe linear forwards}
@keyframes tombe{0%{transform:translateY(0) rotate(0);opacity:1}
                 100%{transform:translateY(112vh) rotate(220deg);opacity:.15}}

/* le titre qui arrive lettre par lettre */
.m-titre .lettre{display:inline-block;animation:lettreArrive .34s cubic-bezier(.34,1.5,.64,1) both}
.m-titre.grosslot{color:var(--encre)}
@keyframes lettreArrive{0%{transform:translateY(16px) scale(.7);opacity:0}
                        100%{transform:translateY(0) scale(1);opacity:1}}

/* la carte, plus dorée sur un gros lot */
.m-carte.grosslot::before{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--or);animation:cadreOr 1.1s .3s ease-out both}
@keyframes cadreOr{0%{opacity:0}30%{opacity:1}100%{opacity:.5}}
.m-visuel.grosslot{border-color:var(--or-fonce);box-shadow:0 0 0 3px var(--or)}

/* ── L'OUVERTURE DE CASE · l'animation vue 17 fois ───────────── */
.case.pop{animation:popCase .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes popCase{0%{transform:translate(-50%,-50%) scale(1)}
                   40%{transform:translate(-50%,-50%) scale(1.28) rotate(-4deg)}
                   100%{transform:translate(-50%,-50%) scale(1)}}

/* l'éclat de pixels qui part de la case */
.eclat{position:fixed;z-index:99;pointer-events:none;width:0;height:0}
.eclat i{position:absolute;width:8px;height:8px;background:var(--or);
  box-shadow:0 0 0 2px var(--encre);animation:gicle .62s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes gicle{0%{transform:translate(0,0) scale(1);opacity:1}
                 100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* la carte : un volet qui se retourne, pas un simple fondu */
@keyframes revele{0%{transform:perspective(900px) rotateX(-78deg) translateY(26px);opacity:0}
                  55%{transform:perspective(900px) rotateX(9deg) translateY(0);opacity:1}
                  78%{transform:perspective(900px) rotateX(-4deg)}
                  100%{transform:perspective(900px) rotateX(0)}}
.m-carte{animation:revele .58s cubic-bezier(.2,.8,.25,1) both;transform-origin:50% 0}

/* le trait de lumière qui balaie la carte une fois */
.m-carte::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(245,197,66,.55) 50%,transparent 62%);
  animation:balaye .8s .18s ease-out both}
@keyframes balaye{0%{transform:translateX(-115%)}100%{transform:translateX(115%)}}
.m-carte{position:relative;overflow:hidden;padding:2px}

/* le titre du lot arrive après la carte */
@keyframes monte{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
.m-jour{animation:monte .3s .30s both}
.m-date{animation:monte .3s .36s both}
.m-titre{animation:monte .34s .42s both}
.m-corps{animation:monte .34s .50s both}

/* le bob apparaît en dernier, avec un rebond — c'est la récompense */
@keyframes bobArrive{0%{transform:scale(.4) translateY(20px);opacity:0}
                     62%{transform:scale(1.14) translateY(-4px);opacity:1}
                     100%{transform:scale(1) translateY(0)}}
.m-bob{animation:bobArrive .5s .62s cubic-bezier(.34,1.56,.64,1) both}
.m-bob svg,.m-bob .bobimg{animation:tourne 2.4s 1.1s ease-in-out infinite}
@keyframes tourne{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-9deg)}96%{transform:rotate(9deg)}}

/* le visuel de la case ouverte */
.m-visuel{margin:0 0 16px;background:#6C9FC3 !important;border:3px solid var(--encre);
  overflow:hidden;position:relative;display:block;line-height:0}
.m-visuel.lot{aspect-ratio:1;max-width:300px;margin-left:auto;margin-right:auto}
.m-visuel.portrait{aspect-ratio:16/11}
.m-visuel img{width:100%;height:100%;image-rendering:pixelated;display:block;
  object-fit:cover;padding:0;background:#6C9FC3}
.m-visuel.portrait img{object-position:50% 18%}
.m-visuel[hidden]{display:none}
@keyframes visuelArrive{0%{transform:scale(.9);opacity:0}
                        72%{transform:scale(1.03);opacity:1}
                        100%{transform:scale(1)}}
.m-visuel{animation:visuelArrive .46s .2s cubic-bezier(.34,1.4,.64,1) both}

/* le bob qui vole vers le compteur, une fois la modale fermée */
.bobvole{position:fixed;z-index:98;width:42px;height:auto;pointer-events:none;
  transition:transform .72s cubic-bezier(.5,-0.25,.4,1), opacity .2s .55s}

/* ── PIED DE PAGE ────────────────────────────────────────────── */
.pied{margin-top:64px;background:var(--encre);color:#A9AEB6;padding:34px 0 28px}
.pied-in{max-width:1000px;margin:0 auto;padding:0 18px;text-align:center}
.pied img{height:30px;width:auto;display:block;margin:0 auto 18px}
.pied-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;
  font-size:12.5px;font-weight:600}
.pied-liens a{color:var(--offwhite,#F5F5F7);text-decoration:none;padding:6px 14px;
  border-bottom:2px solid transparent}
.pied-liens a:hover{border-bottom-color:var(--or)}
.pied-liens span{color:#4A5058;align-self:center}
.pied-sep{height:2px;background:#22262E;margin:22px auto;max-width:180px}
/* la porte de secours du pied de page · visible sans être criarde */
.pied-retrouver{margin:2px 0 4px;text-align:center}
.pied-retrouver button{background:none;border:none;font:inherit;cursor:pointer;
  font-size:13px;font-weight:800;color:var(--or);padding:9px 16px;
  border-bottom:2px solid rgba(245,197,66,.45)}
.pied-retrouver button:hover{border-bottom-color:var(--or)}
.pied-sig{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#7C828A}
.pied-sig b{color:#fff}
.pied-sig em{font-style:normal;color:var(--or)}
.pied-legal{margin-top:14px;font-size:11.5px;line-height:1.8;color:#8A9099;max-width:56ch;
  margin-left:auto;margin-right:auto}

/* ── S5 · COMMENT ÇA MARCHE ──────────────────────────────────── */
.cm{margin:54px auto 0;max-width:1000px}
.cm-tete{text-align:center;margin-bottom:24px}
.cm-tete h2{font-size:clamp(19px,5vw,30px)}
.cm-tete p{font-size:13px;color:var(--muted);margin-top:6px}
.cm-etapes{display:grid;gap:16px}
.etape{background:var(--blanc);border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);
  padding:20px 20px 22px;display:flex;gap:16px;align-items:flex-start;position:relative}
.etape-num{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--blanc);
  background:var(--encre);padding:8px 9px;flex:0 0 auto;align-self:flex-start}
.etape-ic{flex:0 0 auto;width:62px;height:62px;background:var(--ivoire2);
  border:3px solid var(--encre);display:grid;place-items:center;image-rendering:pixelated}
.etape-txt h3{font-size:16.5px;line-height:1.25}
.etape-txt p{font-size:13.5px;margin-top:6px}
.etape-txt em{font-style:normal;color:var(--bleu);font-weight:700}
.aconf-in{display:inline-block;background:#FDF8E7;border:2px dashed var(--or-fonce);
  font-size:11px;font-weight:700;color:#8A6100;padding:2px 7px;margin-top:8px}

@media(min-width:820px){
  .cm-etapes{grid-template-columns:repeat(3,1fr);gap:22px}
  .etape{flex-direction:column;align-items:flex-start;gap:14px;padding-top:26px}
  .etape-num{position:absolute;top:-3px;left:-3px}
  .etape-ic{width:74px;height:74px;margin-top:14px}
  /* la flèche entre deux étapes */
  .etape:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;
    width:12px;height:12px;background:var(--encre);
    clip-path:polygon(0 0,100% 50%,0 100%);transform:translateY(-50%)}
}

/* ── S6 · LES LOTS ───────────────────────────────────────────── */
.lots{margin:56px auto 0;max-width:1000px}
.lots-tete{text-align:center;margin-bottom:22px}
.lots-tete h2{font-size:clamp(19px,5vw,30px)}
.lots-tete p{font-size:13px;color:var(--muted);margin-top:6px}

/* le grand prix, seul et en large */
.grandprix{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:26px;
  border:4px solid var(--encre);box-shadow:8px 8px 0 var(--encre);background:var(--blanc)}
.gp-img{background:linear-gradient(160deg,#2D53AC,#1B2A6B);position:relative;
  aspect-ratio:16/9;display:grid;place-items:center;border-bottom:4px solid var(--encre)}
.gp-txt{padding:20px 22px 22px}
.gp-eti{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--encre);
  background:var(--or);border:2px solid var(--encre);padding:6px 9px;display:inline-block}
.gp-txt h3{font-size:clamp(19px,4.6vw,27px);margin-top:12px;line-height:1.15}
.gp-txt p{font-size:14px;margin-top:9px}
@media(min-width:760px){
  .grandprix{grid-template-columns:1fr 1.05fr}
  .gp-img{aspect-ratio:auto;border-bottom:none;border-right:4px solid var(--encre)}
  .gp-txt{padding:30px 32px;align-self:center}
}

/* les dix cadeaux datés */
.grille-lots{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.lot{background:var(--blanc);border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);
  display:flex;flex-direction:column;overflow:hidden}
.lot-img{aspect-ratio:1;background:#6C9FC3;position:relative;
  display:grid;place-items:center;border-bottom:3px solid var(--encre);overflow:hidden}
.lot-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.lot-vide{font-family:'Press Start 2P',monospace;font-size:7.5px;color:#31547A;
  text-align:center;line-height:1.9;padding:0 8px}
.lot-date{position:absolute;top:0;left:0;background:var(--encre);color:#fff;
  font-family:'Press Start 2P',monospace;font-size:7.5px;padding:5px 7px;letter-spacing:0}
.lot-18{position:absolute;top:0;right:0;background:var(--rose);color:var(--encre);
  border-left:3px solid var(--encre);border-bottom:3px solid var(--encre);
  font:800 10px 'Plus Jakarta Sans';padding:5px 7px}
.lot-nom{padding:11px 12px 13px;font-size:13.5px;font-weight:700;color:var(--encre);
  line-height:1.35;flex:1}
.lot-tente{display:block;font-family:'Press Start 2P',monospace;font-size:7px;color:var(--bleu);
  letter-spacing:0;margin-bottom:6px;text-transform:uppercase}
.lots-legal{margin-top:20px;font-size:12px;color:var(--muted);text-align:center;line-height:1.7}
.lots-legal a{color:var(--bleu)}
.aconf{margin-top:18px;border-left:3px solid var(--or);background:#FDF8E7;
  border-radius:0 8px 8px 0;padding:12px 16px;font-size:13px;line-height:1.7}
.aconf b{color:var(--encre)}

/* ── LE TUNNEL · attente et inscription ──────────────────────── */
.modale.large{max-width:470px}
.m-haut{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.m-haut svg{flex:0 0 auto}
.m-eti{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--bleu)}

/* attente */
.att-titre{font-size:22px;margin-top:12px;line-height:1.2}
.att-txt{margin-top:9px;font-size:14px}
.att-piste{margin-top:20px;height:18px;background:var(--verrou);border:3px solid var(--encre);overflow:hidden}
.att-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,
  var(--or) 0 9px,var(--or-fonce) 9px 18px);transition:width .95s linear}
.att-compte{margin-top:9px;text-align:center;font-family:'Press Start 2P',monospace;
  font-size:11px;color:var(--muted)}
.att-btn{margin-top:20px;width:100%;background:var(--or);color:var(--encre);
  border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);
  padding:15px;font:800 14px 'Plus Jakarta Sans';text-transform:uppercase;letter-spacing:.04em;
  cursor:pointer;transition:transform .09s,box-shadow .09s}
.att-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--encre)}
.att-btn:disabled{background:var(--verrou);color:var(--verrou-bord);border-color:var(--verrou-bord);
  box-shadow:4px 4px 0 var(--line);cursor:not-allowed;transform:none}
.att-lien{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}
.att-lien button{background:none;border:none;color:var(--bleu);text-decoration:underline;
  font:inherit;cursor:pointer;padding:0}

/* formulaire CRM */
.form-sous{font-size:13.5px;margin-top:8px}
.champs{margin-top:18px;display:grid;gap:13px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:13px}
/* 🔴 Sans min-width:0, une colonne de grille ne descend jamais sous la largeur
   naturelle de son contenu. Le champ « date de naissance » a une largeur
   imposée par le système sur téléphone : il débordait sur le champ téléphone
   d'à côté. Les deux règles ci-dessous règlent la cause, pas le symptôme. */
.champ{min-width:0}
.champ input{min-width:0;max-width:100%}
@media(max-width:520px){
  .duo{grid-template-columns:1fr}      /* un champ par ligne, plus lisible au pouce */
}
.champ label{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--encre);margin-bottom:5px}
.champ label span{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:none}
.champ input{width:100%;background:var(--blanc);border:3px solid var(--encre);
  padding:12px 13px;font:600 15px 'Plus Jakarta Sans';color:var(--encre)}
.champ input:focus{outline:none;box-shadow:3px 3px 0 var(--bleu)}
.champ input::placeholder{color:#B4B8BE;font-weight:400}

.consent{margin-top:18px;display:grid;gap:12px}
.coche{display:flex;gap:11px;align-items:flex-start;background:var(--blanc);
  border:2px solid var(--encre);padding:12px 13px;cursor:pointer}
.coche input{appearance:none;flex:0 0 auto;width:22px;height:22px;background:var(--ivoire);
  border:3px solid var(--encre);cursor:pointer;position:relative;margin-top:1px}
.coche input:checked{background:var(--or)}
.coche input:checked::after{content:"";position:absolute;left:3px;top:6px;width:10px;height:5px;
  border-left:3px solid var(--encre);border-bottom:3px solid var(--encre);transform:rotate(-45deg)}
.coche-txt{font-size:12.5px;line-height:1.55;color:var(--body)}
.coche-txt b{color:var(--encre)}
.coche-txt em{font-style:normal;color:var(--muted);display:block;margin-top:3px;font-size:11.5px}
.coche a{color:var(--bleu)}

.form-err{margin-top:12px;font-size:12.5px;color:#B23B3B;font-weight:700;display:none}
.form-err.on{display:block}
.form-btn{margin-top:18px;width:100%;background:var(--or);color:var(--encre);
  border:4px solid var(--encre);box-shadow:5px 5px 0 var(--encre);padding:17px;
  font:800 15px 'Plus Jakarta Sans';text-transform:uppercase;letter-spacing:.04em;cursor:pointer;
  transition:transform .09s,box-shadow .09s}
.form-btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--encre)}
.form-pied{margin-top:13px;font-size:11.5px;color:var(--muted);line-height:1.65}

/* le mot qui passe en bas de l'écran */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:120;
  background:var(--encre);color:#fff;border:3px solid var(--or);padding:13px 20px;
  font-size:13px;font-weight:700;max-width:92vw;text-align:center;
  transition:transform .34s cubic-bezier(.2,.9,.3,1)}
.toast.on{transform:translate(-50%,0)}

/* cartouche d'arbitrage dans le formulaire */
.arb{margin-top:16px;border-left:3px solid var(--rose);background:#FDF2F3;
  border-radius:0 8px 8px 0;padding:11px 14px;font-size:12px;line-height:1.65;color:var(--body)}
.arb b{color:var(--encre)}

/* ── cartouche de maquette ───────────────────────────────────── */
.avert{max-width:760px;margin:44px auto 60px;background:var(--blanc);border:1px solid var(--line);
  border-left:4px solid var(--bleu);padding:18px 22px;font-size:13.5px;line-height:1.75}
.avert b{color:var(--encre)}
.avert code{background:var(--ivoire2);padding:1px 5px;font-size:12.5px}
.avert ul{margin:9px 0 0 18px}
.avert li{margin-bottom:4px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ── LE PLATEAU FLANQUÉ · ordinateur seulement ───────────────── */
.plateau-zone{display:block}
.cote{display:none}
@media(min-width:1000px){
  .plateau-zone{display:grid;grid-template-columns:1fr 375px 1fr;gap:46px;
    align-items:start;max-width:1180px;margin:0 auto}
  .cote{display:block;position:sticky;top:96px;max-width:330px}
  .cote.gauche{justify-self:end}
  .cote.droite{justify-self:start}
  .cote img{width:100%;display:block;border:4px solid var(--encre);
    box-shadow:8px 8px 0 var(--encre);image-rendering:pixelated}
  .cote-mot{margin-top:16px;font-size:15px;line-height:1.5;color:var(--body)}
  .cote-mot b{color:var(--encre)}
  .cote.gauche .cote-mot{text-align:right}
  .plateau{margin-top:0;max-width:none;width:375px}
}

/* ── LOT ENCORE VERROUILLÉ ───────────────────────────────────── */
.lot.ferme .lot-img{background:var(--verrou)}
.lot.ferme .lot-nom{color:var(--verrou-bord)}
.lot-mystere{display:grid;place-items:center;gap:9px;text-align:center;padding:8px}
.lot-mystere svg{display:block}
.lot-mystere span{font-family:'Press Start 2P',monospace;font-size:7px;color:#8A9099;
  letter-spacing:0;line-height:1.9}
.lots-reste{margin-top:18px;text-align:center;font-family:'Press Start 2P',monospace;
  font-size:11px;color:var(--bleu)}
.lots-reste b{color:var(--encre)}

/* ── LA FÉLICITATION DANS LA CASE OUVERTE ────────────────────── */
.m-bravo{margin:0 0 4px;background:var(--encre);color:#fff;border:3px solid var(--encre);
  padding:13px 15px;font-size:13.5px;line-height:1.6}
.m-bravo b{color:var(--or)}
.m-bravo .pt{display:block;font-family:'Press Start 2P',monospace;font-size:9px;
  color:var(--or);margin-bottom:8px;letter-spacing:0}
@keyframes bravoArrive{0%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1}}
.m-bravo{animation:bravoArrive .32s .26s both}
.m-bravo[hidden]{display:none}


/* ── ② LA CASE OUVERTE GARDE SON VISUEL ──────────────────────── */
.case.ouverte{background:var(--bleu-vague);padding:0;overflow:visible}
.case .vignette{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  image-rendering:pixelated;display:block}
.case.ouverte .num{position:absolute;right:-4px;bottom:-4px;background:var(--encre);
  color:#fff;font-size:6.5px;padding:2px 3px;line-height:1;z-index:2}
.case.jour.ouverte .num{font-size:8px;padding:3px 4px}
.case.ratee .vignette{filter:grayscale(1) opacity(.35)}

/* ── ③ LA TEXTURE DE FOND ────────────────────────────────────── */
body{background-color:var(--ivoire);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='%232D53AC' fill-opacity='0.045'%3E%3Crect x='0' y='6' width='6' height='2'/%3E%3Crect x='6' y='4' width='6' height='2'/%3E%3Crect x='12' y='6' width='6' height='2'/%3E%3Crect x='18' y='8' width='6' height='2'/%3E%3Crect x='24' y='6' width='6' height='2'/%3E%3Crect x='30' y='4' width='6' height='2'/%3E%3Crect x='20' y='16' width='6' height='2'/%3E%3Crect x='26' y='14' width='6' height='2'/%3E%3Crect x='32' y='16' width='6' height='2'/%3E%3Crect x='2' y='16' width='6' height='2'/%3E%3Crect x='8' y='14' width='6' height='2'/%3E%3Crect x='14' y='16' width='6' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat}

/* ── ④ L'ÉCRAN DE PALIER ─────────────────────────────────────── */
.palier{text-align:center;padding:6px 0 0}
.palier-eti{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--bleu);
  letter-spacing:0;display:block;margin-bottom:14px}
.palier-badge{margin:0 auto 18px;width:118px;height:118px;display:grid;place-items:center;
  background:radial-gradient(circle,#FFF3CE 0%,var(--or) 62%,var(--or-fonce) 100%);
  border:4px solid var(--encre);box-shadow:6px 6px 0 var(--encre);position:relative}
@keyframes badgeArrive{0%{transform:scale(.3) rotate(-24deg);opacity:0}
                       62%{transform:scale(1.14) rotate(6deg);opacity:1}
                       100%{transform:scale(1) rotate(0)}}
.palier-badge{animation:badgeArrive .62s cubic-bezier(.34,1.5,.64,1) both}
.palier-nb{font-family:'Press Start 2P',monospace;font-size:44px;line-height:1;color:var(--encre)}
.palier-nb small{display:block;font-size:9px;margin-top:9px;letter-spacing:0}
.palier h3{font-size:23px;line-height:1.2}
.palier p{margin-top:10px;font-size:14.5px}
.palier .suite{margin-top:16px;background:var(--blanc);border:2px solid var(--encre);
  padding:11px 14px;font-size:13px}
.palier .suite b{color:var(--encre)}
@keyframes palierTexte{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
.palier h3{animation:palierTexte .34s .5s both}
.palier p{animation:palierTexte .34s .58s both}
.palier .suite{animation:palierTexte .34s .66s both}

/* ── LES BANDEAUX PLEINE LARGEUR ─────────────────────────────── */
/* Pas de bordure : l'image touche les bords, elle respire.
   Le texte se pose sur un voile dégradé, pas sur une ombre portée —
   une ombre sur un ciel clair ne se lit pas. */
.bandeau{position:relative;margin:56px 0 0;overflow:hidden;
  width:100%;aspect-ratio:16/9;max-height:440px;background:var(--bleu-profond)}
.bandeau img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center;image-rendering:pixelated}
.bandeau.droite img{object-position:30% center}
.bandeau::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,12,20,.86) 0%,rgba(9,12,20,.62) 34%,
    rgba(9,12,20,.16) 62%,rgba(9,12,20,0) 100%)}
.bandeau.droite::after{background:linear-gradient(270deg,rgba(9,12,20,.86) 0%,
    rgba(9,12,20,.62) 34%,rgba(9,12,20,.16) 62%,rgba(9,12,20,0) 100%)}
.bandeau-mot{position:absolute;inset:0;z-index:2;display:grid;align-content:center;
  padding:0 clamp(22px,6vw,76px);pointer-events:none}
.bandeau-mot p{font-family:'Archivo Black','Plus Jakarta Sans',sans-serif;
  font-size:clamp(21px,3.8vw,44px);line-height:1.06;color:#fff;max-width:14ch;
  letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.bandeau-mot span{display:block;font-family:'Press Start 2P',monospace;font-size:9px;
  color:var(--or);margin-bottom:14px;letter-spacing:0}
.bandeau.droite .bandeau-mot{justify-items:end;text-align:right}
.bandeau.droite .bandeau-mot p{margin-left:auto}
@media(max-width:700px){
  .bandeau{width:100%;aspect-ratio:5/4;max-height:none}
  .bandeau::after{background:linear-gradient(0deg,rgba(9,12,20,.9) 0%,rgba(9,12,20,.6) 42%,
    rgba(9,12,20,.05) 82%)}
  .bandeau.droite::after{background:linear-gradient(0deg,rgba(9,12,20,.9) 0%,
    rgba(9,12,20,.6) 42%,rgba(9,12,20,.05) 82%)}
  .bandeau-mot{align-content:end;padding-bottom:26px}
  .bandeau.droite .bandeau-mot{justify-items:start;text-align:left}
  .bandeau-mot p{max-width:none}
}

/* ── LE BOB, EN IMAGE ────────────────────────────────────────── */
.bobmini{position:absolute;place-self:end;right:-9px;bottom:-7px;left:auto;top:auto;
  width:22px!important;height:auto!important;image-rendering:pixelated;
  filter:drop-shadow(0 1px 0 rgba(15,17,21,.5))}
.m-bob img.bobimg{width:46px;height:auto;flex:0 0 auto;image-rendering:pixelated}
.gp-img img.bobor{width:62%;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 6px 0 rgba(15,17,21,.35))}
.palier-badge img{width:74px;height:auto;image-rendering:pixelated}

/* ── PAGES LÉGALES : l'en-tête qui les relie au site ─────────── */
.legal-hero{position:relative;overflow:hidden;aspect-ratio:21/6;max-height:260px;
  border-bottom:4px solid var(--encre)}
.legal-hero img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.legal-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,12,20,.9) 0%,rgba(9,12,20,.62) 48%,rgba(9,12,20,.18) 100%)}
.legal-hero-txt{position:absolute;inset:0;z-index:2;display:grid;align-content:center;
  padding:0 clamp(20px,5vw,54px);max-width:900px;margin:0 auto;left:0;right:0}
.legal-hero-txt span{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--or);
  margin-bottom:11px}
.legal-hero-txt h1{font-size:clamp(22px,5vw,38px);line-height:1.08;color:#fff;margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 auto;max-width:760px;
  padding:22px 20px 0}
.legal-nav a{font-size:12.5px;font-weight:700;color:var(--body);text-decoration:none;
  background:var(--blanc);border:2px solid var(--encre);padding:8px 13px;
  box-shadow:3px 3px 0 rgba(15,17,21,.14)}
.legal-nav a:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(15,17,21,.14)}
.legal-nav a.actif{background:var(--or);color:var(--encre)}
.legal .maj{margin-bottom:24px}
.legal h1{display:none}          /* le titre vit dans l'en-tête */


/* ── LE FOND ANIMÉ DU HERO · téléphone uniquement ────────────── */
.hero-video{display:none}
@media(max-width:700px){
  /* Le hero vit dans .wrap, qui a 16 px de marge : on l'en sort pour
     que la vidéo touche les deux bords de l'écran. */
  .hero{position:relative;padding:0;min-height:86svh;display:grid;align-content:center;
    overflow:hidden;border-bottom:4px solid var(--encre);
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .hero .hero-in{padding-left:20px;padding-right:20px}
  .hero-video{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:0;image-rendering:pixelated}
  /* le voile : assez pour que l'encre reste lisible, assez peu pour voir la scène */
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(244,242,237,.70) 0%,rgba(244,242,237,.54) 40%,
      rgba(244,242,237,.48) 62%,rgba(244,242,237,.74) 100%)}
  .hero-in{position:relative;z-index:2;padding-top:34px;padding-bottom:34px}
  /* le canoë fixe ferait doublon avec la vidéo */
  .scene{display:none}
  .hero h1{text-shadow:0 2px 10px rgba(244,242,237,.9)}
  .hero-sous{color:var(--ink);text-shadow:0 1px 8px rgba(244,242,237,.95)}
  .preuve,.compte{text-shadow:0 1px 8px rgba(244,242,237,.95)}
  .hero-sur{text-shadow:0 1px 8px rgba(244,242,237,.95)}
}
/* Un visiteur qui a demandé moins d'animations garde l'image de secours. */
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none!important}
  @media(max-width:700px){.scene{display:block!important}}
}


/* ── LE TITRE DU HERO ────────────────────────────────────────── */
/* L'entre-deux : le titre revient à Archivo Black, très gras et
   parfaitement lisible, et c'est le sur-titre juste au-dessus qui
   porte le pixel (Press Start 2P). Le pixel reste dans l'univers,
   il quitte le mot qu'on doit lire d'un coup d'œil. */
.hero h1{font-family:'Archivo Black','Plus Jakarta Sans',sans-serif;
  font-weight:400;font-size:clamp(30px,8.4vw,64px);line-height:1.02;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--bleu)}
@media(max-width:700px){
  .hero h1{font-size:clamp(29px,8.8vw,46px);text-shadow:0 2px 10px rgba(244,242,237,.9)}
}


/* ═══ LA RIVIÈRE VIVANTE ══════════════════════════════════════ */
/* Trois lignes de courant qui descendent en continu, à des vitesses
   différentes : c'est ce décalage qui donne l'impression d'eau. */
@keyframes coule{to{stroke-dashoffset:-500}}
.courant{animation:coule linear infinite}
.courant.c1{animation-duration:14s}
.courant.c2{animation-duration:22s}
.courant.c3{animation-duration:30s}

/* ═══ LES CASES RESSORTENT ════════════════════════════════════ */
.case{width:44px;height:44px;border-width:4px;
  box-shadow:0 4px 0 rgba(15,17,21,.35), 0 0 0 3px rgba(244,242,237,.9)}
.case .num{font-size:9px}
.case.verrou{background:#F1EFE9;border-color:#7E858E;
  box-shadow:0 3px 0 rgba(15,17,21,.18), 0 0 0 3px rgba(244,242,237,.85)}
.case.verrou .num{color:#7E858E}
.case.ouverte{box-shadow:0 4px 0 rgba(15,17,21,.4), 0 0 0 3px rgba(244,242,237,.95)}
.case.jour{width:62px;height:62px;border-width:5px;
  box-shadow:0 5px 0 rgba(15,17,21,.45), 0 0 0 4px rgba(244,242,237,1)}
.case.jour .num{font-size:12px}
@keyframes halo{0%,100%{filter:drop-shadow(0 0 0 rgba(245,197,66,0))}
                55%{filter:drop-shadow(0 0 14px rgba(245,197,66,.95))}}
.case.jour{animation:halo 2.2s ease-in-out infinite}
.case.ouverte .num{right:-5px;bottom:-5px;font-size:7.5px}

/* ── LE CADENAS DES CASES À VENIR ─────────────────────────────
   Un petit cadenas pixel posé en haut à droite de la case. Il dit
   « pas encore » sans texte, et il disparaît le jour où la case
   s'ouvre. Dessiné en SVG : il reste net à toutes les tailles. */
.case.verrou::before{
  content:"";position:absolute;top:-7px;right:-7px;
  width:13px;height:16px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11' shape-rendering='crispEdges'%3E%3Cpath fill='%23F4F2ED' d='M0 3h9v8H0z'/%3E%3Cpath fill='%237E858E' d='M3 0h3v1H3zM2 1h1v3H2zM6 1h1v3H6zM1 4h7v1H1zM0 5h9v6H0z'/%3E%3Cpath fill='%23F1EFE9' d='M4 7h1v2H4z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(15,17,21,.35));
}
/* ⚠️ ne jamais ajouter .ratee ici : son ::before est la barre rouge */

/* ═══ LE CANOË DE KANOÉ ═══════════════════════════════════════ */
.canoe{width:84px;height:auto}
.canoe img{width:100%;height:auto;display:block;image-rendering:pixelated;
  filter:drop-shadow(0 4px 0 rgba(27,42,107,.28))}
/* il tangue, et il laisse un sillage */
@keyframes tangue2{0%,100%{transform:translateY(0) rotate(-1.2deg)}
                   50%{transform:translateY(-5px) rotate(1.2deg)}}
.canoe-inner{animation:tangue2 3.2s ease-in-out infinite}

/* ═══ LE TITRE — majuscules et plus lisible ═══════════════════ */
.hero h1{text-transform:uppercase;letter-spacing:-.005em;line-height:1.02;
  font-size:clamp(29px,7.8vw,60px);max-width:none}
@media(max-width:700px){
  .hero h1{font-size:clamp(27px,7.8vw,42px);
    text-shadow:0 0 18px rgba(244,242,237,1), 0 2px 0 rgba(244,242,237,.9)}
}

/* ═══ LE MOTIF DU FORMULAIRE ══════════════════════════════════ */
.form-motif{margin-top:10px;background:var(--or);border:3px solid var(--encre);
  box-shadow:4px 4px 0 var(--encre);padding:12px 14px;font-size:14px;color:var(--encre)}
.form-motif b{font-weight:800}


/* ── LA CROIX DE FERMETURE ───────────────────────────────────── */
.modale{position:relative}
.m-croix{position:absolute;top:12px;right:12px;z-index:5;
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--encre);color:#fff;border:3px solid var(--encre);
  box-shadow:3px 3px 0 rgba(15,17,21,.25);cursor:pointer;padding:0;
  transition:transform .08s,box-shadow .08s}
.m-croix:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(15,17,21,.25)}
.m-croix:active{transform:translate(3px,3px);box-shadow:none}
.m-carte{padding-top:6px}
.modale.large .m-croix{top:14px;right:14px}


/* ── LA PROCHAINE CASE À DÉBLOQUER ───────────────────────────── */
/* Elle avance toute seule avec le calendrier : c'est le repère qui
   dit « c'est celle-là que tu attends ». */
.lot.suivant{border-color:var(--or-fonce);
  box-shadow:0 0 0 3px var(--or), 6px 6px 0 var(--encre)}
.lot.suivant .lot-img{background:#EFE6CE}
.lot.suivant .lot-mystere svg g{fill:var(--or-fonce)}
.lot.suivant .lot-mystere span{color:#8A6100}
.lot.suivant .lot-nom{background:#FDF8E7}
.lot.suivant .lot-tente{color:#8A6100}
.lot-suivant{position:absolute;top:0;right:0;background:var(--or);color:var(--encre);
  border-left:3px solid var(--encre);border-bottom:3px solid var(--encre);
  font-family:'Press Start 2P',monospace;font-size:7px;padding:6px 7px;letter-spacing:0}
@keyframes battement{0%,100%{box-shadow:0 0 0 3px var(--or), 6px 6px 0 var(--encre)}
                     50%{box-shadow:0 0 0 6px rgba(245,197,66,.55), 6px 6px 0 var(--encre)}}
.lot.suivant{animation:battement 2.6s ease-in-out infinite}

/* ── « J'AI DÉJÀ PARTICIPÉ » ─────────────────────────────────── */
.form-deja{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.6}
.form-deja button{background:none;border:none;color:var(--bleu);font:inherit;font-weight:800;
  text-decoration:underline;cursor:pointer;padding:0}