*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ivoire:#F4F2ED; --ivoire2:#E7E4DC; --blanc:#FFFFFF;
  --encre:#0F1115; --body:#3E4450; --muted:#565E6C; --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);
  /* 🔴 Plus Jakarta Sans colle le « f » et le « i » en une seule lettre : « fil »
     se lit « fll », « affilée » se lit « affllée ». Repéré par Théo le 09/09.
     On coupe les ligatures courantes, le texte n'en a aucun besoin ici. */
  font-variant-ligatures:no-common-ligatures;
  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:1320px;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:16.5px;font-weight:600;color:var(--encre);
  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%}
/* 11/09 : le canoë descend dans l'eau (la coque passe derrière la houle de
   devant) et perd son ombre portée, qui n'a pas de sens posée sur l'eau. */
/* 🔴 Pas de `pixelated` ici : l'image est une illustration « style pixel »
   (39 000 couleurs, pas de grille régulière), affichée PLUS PETITE que sa
   taille d'origine. En mode pixelated, la réduction saute des pixels au
   hasard et rend le dessin dentelé. Rendu lissé normal. */
.scene img{position:absolute;left:50%;bottom:31%;height:58%;width:auto;max-width:74%;
  transform:translateX(-50%);image-rendering:auto;
  animation:tangue 4.2s ease-in-out infinite}
/* l'eau qui bouge : deux houles qui glissent en sens contraire, à des
   vitesses différentes. Coupées par prefers-reduced-motion (règle globale). */
@keyframes houle{to{transform:translateX(-520px)}}
.scene .houle{animation:houle 14s linear infinite}
.scene .eau-fond .houle{animation-duration:24s;animation-direction:reverse}
.scene .eau-avant{pointer-events:none}
@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:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:center}
.compte b{color:var(--bleu)}

/* le bloc sous le titre : la scène et le bouton. Sous 860 px, le bouton
   passe avant la scène, comme avant la 2ᵉ passe. */
.hero-bande{position:relative;z-index:2;display:flex;flex-direction:column}
.hero-bande .cta{order:-1;margin-top:22px}
/* 🔴 sans largeur explicite, la scène (tout en position absolue) s'écrase à
   zéro dans la colonne flex et disparaît */
.hero-bande .scene{width:100%}

@media(min-width:860px){
  /* Retour de Clara du 11/09 (ordinateur) : « tout centrer au milieu de la
     page », et « le visuel de Kanoé sur un kayak doit prendre tout l'espace
     disponible », avec « un bandeau d'eau avec le bouton intégré à
     l'intérieur ». Le texte reste sur une colonne centrée ; la scène passe
     en pleine largeur, Kanoé en grand au centre, et le bouton se pose dans
     l'eau, sous le canoë. */
  .hero{padding:46px 0 0;overflow:visible}
  .hero h1{max-width:none}
  .hero-sous{font-size:clamp(21px,2.2vw,30px);font-weight:800;max-width:none;margin-top:18px}
  /* marge négative : le haut de la scène est du ciel transparent, on la
     remonte sous le sous-titre pour que Kanoé ne flotte pas dans le vide */
  .hero-bande{display:block;margin-top:-20px;
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-bottom:4px solid var(--encre)}
  /* le canoë a une taille fixe (277 px) : la scène doit être assez haute
     pour loger le canoë ET le bouton sous la surface sans chevauchement */
  .hero-bande .scene{margin:0;max-width:none;aspect-ratio:auto;height:560px}
  /* Taille fixe = la moitié exacte de l'image d'origine (820×554) : sur un
     écran Retina elle s'affiche pixel pour pixel, sur un écran standard la
     réduction de moitié reste propre. La coque descend sous la surface de la
     houle de devant (qui est à 65,5 % de la hauteur) pour que Kanoé soit
     dans l'eau. */
  .hero-bande .scene img{height:277px;bottom:calc(34.5% - 38px);max-width:none}
  .hero-bande .cta{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);margin:0;z-index:2}
  .hero-bande .compte{color:#fff;background:rgba(15,17,21,.6);padding:8px 14px;white-space:nowrap}
  .hero-bande .compte b{color:var(--or)}
}
/* tablette en portrait (701-859 px) : ni vidéo ni mise en page ordinateur.
   La bande d'eau passe en pleine largeur pour ne pas former un rectangle
   arrêté avant les bords de l'écran. */
@media(min-width:701px) and (max-width:859px){
  /* sans ça, le hero coupe la bande aux 16 px de marge de la colonne */
  .hero{overflow:visible}
  .hero-bande .scene{max-width:none;width:100vw;margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);aspect-ratio:auto;height:460px}
  .hero-bande .scene img{height:250px;bottom:calc(34.5% - 34px);max-width:none}
}
@media(min-width:1200px){
  .hero-bande{margin-top:-70px}
  .hero-bande .scene{height:clamp(560px,40vw,580px)}
}

/* ── 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:11px;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:14px;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:15px;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:440px;
  aspect-ratio:375/1560;touch-action:pan-y}
/* 🔴 L'épaisseur du trait est fixée en pixels d'écran, pas en unités du
   dessin : sans ça, la rivière large de l'ordinateur deviendrait un fleuve
   de 180 px. */
#svg path{vector-effect:non-scaling-stroke}
#riviere{stroke-width:56px}
@media(min-width:1000px){ #riviere{stroke-width:72px} }
.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)}
/* 11/09 — une case manquée n'est plus barrée ni grisée : elle montre ce
   qu'elle contenait, comme une case ouverte, mais sans le badge « +1 bob ». */
.case.ratee{background:var(--bleu-vague);padding:0;overflow:visible}
.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:13.5px;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:13.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}
/* 23/09 — Les jours sans cadeau ouvrent sur une vidéo VERTICALE (540x960).
   Lui imposer un cadre paysage n'en montrerait qu'une bande. Le média garde
   donc son format et c'est la hauteur qu'on borne, pour qu'il tienne dans
   l'écran sans pousser le bouton de fermeture hors de vue.
   L'`aspect-ratio` sur la balise evite le saut de mise en page avant que
   les métadonnées de la vidéo soient chargées. */
.m-visuel.contenu{background:#6C9FC3}
.m-visuel.contenu video{aspect-ratio:9/16;width:auto;height:auto;
  max-height:56vh;max-width:100%;margin:0 auto;object-fit:cover}
.m-visuel.contenu img{width:auto;height:auto;max-height:56vh;max-width:100%;
  margin:0 auto;object-fit:contain}
.m-visuel img,.m-visuel video{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}
.m-visuel video[hidden],.m-visuel img[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:15px;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:15px;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:13.5px;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:14px;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:13px;color:var(--muted);line-height:1.65}

/* le mot qui passe en bas de l'écran */
/* 🔴 11/09 : au repos, la notification vide dépassait en bas de l'écran (un petit carré noir
   et jaune visible par tous les visiteurs) — le décalage de 140 % de sa hauteur ne compensait
   pas ses 22 px de marge. Elle sort maintenant entièrement de l'écran ET devient invisible
   tant qu'elle n'a pas de message ; l'apparition reste animée. */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,calc(100% + 40px));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;visibility:hidden;
  transition:transform .34s cubic-bezier(.2,.9,.3,1),visibility 0s linear .34s}
.toast.on{transform:translate(-50%,0);visibility:visible;
  transition:transform .34s cubic-bezier(.2,.9,.3,1),visibility 0s}

/* 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){
  /* Les deux photos latérales et leurs phrases ont été retirées (Clara,
     09/09 : « la rivière, sans les photos sur le côté »). La rivière
     n'est plus une colonne centrale coincée entre deux images : elle
     prend la largeur, comme demandé. */
  .plateau-zone{display:block;max-width:none;margin:0 auto}
  .plateau{margin:0 auto;max-width:none;width:min(1120px,94%)}
}

/* ── 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,.case.ratee .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}
/* le badge « +1 bob » d'une case passée et ouverte, dans le coin haut gauche
   (le numéro occupe le coin bas droit) */
.plus-bob{position:absolute;top:-10px;left:-10px;z-index:3;display:flex;align-items:center;gap:1px;
  background:var(--or);color:var(--encre);border:2px solid var(--encre);
  font:7px/1 'Press Start 2P',monospace;padding:1px 3px 1px 1px;pointer-events:none;
  box-shadow:1px 1px 0 rgba(15,17,21,.35)}
.plus-bob img{width:13px;height:auto;image-rendering:pixelated;display:block}

/* ── ③ 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}
  /* 11/09 — la vidéo d'avant revient en fond plein (retour de Clara :
     « en fond plein derrière, en animation comme la petite vidéo d'avant,
     et non en dessous du contenu »). Réglages repris à l'identique du
     09/09 (commit b105b0c) : même cadrage, même voile. La source n'est
     posée qu'au téléphone par le script du HTML. */
  .hero-video{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:0}
  /* 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,.86) 0%,rgba(244,242,237,.76) 38%,
      rgba(244,242,237,.72) 62%,rgba(244,242,237,.88) 100%)}
  .hero-in{position:relative;z-index:2;padding-top:34px;padding-bottom:34px}
  /* le canoë fixe ferait doublon avec la vidéo : il n'est plus « en dessous
     du contenu » */
  .hero-bande .scene{display:none}
  .hero-bande{padding-bottom:34px}
  .hero h1{text-shadow:0 2px 10px rgba(244,242,237,.9)}
  /* Clara, 11/09 : « mettre également davantage en avant : Révélation
     Masculine Francophone » */
  .hero-sous{color:var(--encre);font-size:21px;font-weight:800;line-height:1.25;
    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 fixe du canoë. */
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none!important}
  @media(max-width:700px){ .hero-bande .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,.case.ratee{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,.case.ratee .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 : le cadenas est réservé aux cases à venir */

/* ═══ 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(34px,10vw,50px);
    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}

/* ── LE TOURNIQUET DES LOTS ──────────────────────────────────── */
/* Les dix cadeaux ne sont plus une grille figée : ils tournent.
   La carte du centre est en face, les voisines restent visibles mais
   s'effacent en s'éloignant — on voit qu'il y en a d'autres derrière.
   Ajouté le 09/09/2026. Si le JS ne monte pas, la grille reste une
   grille : rien de ce qui suit ne s'applique sans la classe posée
   par `monterTourniquet()`. */
.tourniquet{position:relative;margin-top:10px;padding:8px 0 4px;perspective:1250px;
  overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  cursor:grab;outline:none;
  /* pleine largeur d'écran : la colonne de texte coupait l'anneau sur les côtés,
     et c'est justement là qu'on voit les cartes tourner */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.tourniquet.attrape{cursor:grabbing}
.tourniquet:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.grille-lots.en-tourniquet{display:block;position:relative;transform-style:preserve-3d;gap:0;
  will-change:transform}
.grille-lots.en-tourniquet .lot{position:absolute;top:0;left:50%;
  width:var(--carte,200px);margin-left:calc(var(--carte,200px) / -2);
  backface-visibility:hidden;will-change:transform,opacity}
.grille-lots.en-tourniquet .lot img{pointer-events:none;-webkit-user-drag:none}
/* la carte dorée garde son battement, mais pas quand elle est de côté */
.grille-lots.en-tourniquet .lot.suivant{animation:none}
.grille-lots.en-tourniquet .lot.suivant.centre{animation:battement 2.6s ease-in-out infinite}
.tourniquet-points{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.tourniquet-points button{width:10px;height:10px;padding:0;cursor:pointer;
  border:2px solid var(--verrou-bord);background:none;transition:background .2s,border-color .2s}
.tourniquet-points button[aria-current="true"]{background:var(--or);border-color:var(--encre)}
.tourniquet-aide{margin-top:10px;text-align:center;font-family:'Press Start 2P',monospace;
  font-size:9px;color:var(--muted);letter-spacing:0;line-height:1.9}
@media(min-width:760px){
  .tourniquet{padding:14px 0 6px}
  .tourniquet-aide{font-size:8px}
}

/* la légende des trois compteurs — ajoutée le 09/09/2026 : « SERIE »
   montait sans que rien n'explique à quoi elle sert */
/* Chaque légende est centrée SOUS sa case, pas sur la page.
   Même grille que .prog : 3 colonnes égales, même gap, même largeur.
   Demande de Clara au point du 15/09/2026. */
.prog-aide{display:flex;gap:10px;max-width:520px;margin:8px auto 0;font-size:13px;
  line-height:1.45;color:var(--muted)}
.prog-aide span{flex:1;text-align:center}
.prog-aide b{display:block;color:var(--encre);font-weight:800;margin-bottom:1px}

/* ── PENDANT LE CHARGEMENT, ET QUAND ÇA NE CHARGE PAS ────────
   Ajouté le 09/09/2026. Le plateau ne montre plus une rivière vide
   avec un canoë égaré : il s'annonce comme en cours de chargement.
   Et si les trois tentatives échouent, le fan a un bouton, pas un
   message qui s'efface. */
body.chargement .plateau-zone{opacity:.45;transition:opacity .3s}
body.chargement .plateau-zone .canoe,
body.chargement .plateau-zone .canoe-inner{visibility:hidden}
body.chargement .prog-val{color:var(--verrou-bord)}
.panne{position:fixed;left:12px;right:12px;bottom:14px;z-index:140;
  background:var(--encre);color:#fff;border:3px solid var(--or);
  box-shadow:6px 6px 0 rgba(15,17,21,.35);
  padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:13.5px;line-height:1.55;max-width:560px;margin:0 auto}
.panne p{flex:1;min-width:200px;margin:0}
.panne b{color:var(--or)}
.panne button{flex-shrink:0;background:var(--or);color:var(--encre);border:0;
  font:800 13px 'Plus Jakarta Sans',sans-serif;padding:11px 18px;cursor:pointer;
  box-shadow:3px 3px 0 rgba(15,17,21,.5)}
.panne button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(15,17,21,.5)}

/* ── LE LOGO DES NRJ MUSIC AWARDS, DANS LA BARRE ─────────────
   Demandé par Clara le 09/09 et posé dans le hero. Déplacé le 11/09 :
   « le logo NMA doit être placé dans la barre en haut, et non à sa
   position actuelle ». Version blanche, la barre est sombre.
   Détourage : `appli-web/OUTILS-VISUELS.md`. */
.barre-logos{display:flex;align-items:center;gap:14px;flex-shrink:0}
.barre .barre-kanoe{height:24px;width:auto}
.barre-sep{display:block;width:1px;height:28px;background:rgba(255,255,255,.3)}
.barre .barre-nma{height:38px;width:auto}
@media(max-width:430px){
  .barre-logos{gap:9px}
  .barre .barre-kanoe{height:18px}
  .barre-sep{height:22px}
  .barre .barre-nma{height:28px}
}

/* ── LE BANDEAU DE FIN, CENTRÉ SUR ORDINATEUR ────────────────
   Retour de Clara du 11/09 : « tout centrer au milieu de la page ».
   Le texte passe au centre ; le voile devient uniforme pour rester
   lisible sur toute la largeur de l'image.
   (Le flou et le verrou du Bob d'Or ont été retirés le 11/09 : Clara,
   « pas obligé qu'il soit flouté ». Leurs règles sont supprimées.) */
@media(min-width:701px){
  .bandeau.droite .bandeau-mot{justify-items:center;text-align:center}
  .bandeau.droite .bandeau-mot p{margin:0 auto;max-width:none}
  .bandeau.droite::after{background:radial-gradient(ellipse at center,
    rgba(9,12,20,.74) 0%,rgba(9,12,20,.52) 55%,rgba(9,12,20,.3) 100%)}
}