/* Généré par polices.py — NE PAS ÉDITER À LA MAIN.
   Les chemins sont relatifs à style.css, qui vit à la racine. */
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lilita-one-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lilita-one-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/quicksand-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/quicksand-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/quicksand-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/quicksand-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/quicksand-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/quicksand-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/quicksand-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/quicksand-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


:root{
  --green:#8EDD65; --yellow:#FFC629; --yellow-about:#FCDC3E; --blue:#00AFD8;
  --purple:#420085; --nav:#69488E; --pink:#F44C7F; --pink-2:#F44E7F; --red:#F1485B;
  --teal:#5EF1D8; --ink:#341F1F; --white:#fff; --field:#F4F0F0; --black:#000;
  --display:"Lilita One","Trebuchet MS",Impact,sans-serif;
  --body:"Quicksand","Trebuchet MS",Helvetica,Arial,sans-serif;
  --content:1325px; --gutter:58px; --headerH:111.5px;
  --fs-h1:clamp(34px,4.71vw,67.84px);
  --fs-h2:clamp(27px,3.51vw,50.56px);
  --fs-h4:clamp(18px,1.71vw,24.64px);
  --fs-p:clamp(16px,1.47vw,21.184px);
  --fs-nav:clamp(15px,1.28vw,18.46px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--green);color:var(--black);
  font-family:var(--body);font-size:var(--fs-p);line-height:1.5;
  -webkit-font-smoothing:antialiased}
/* height:auto est OBLIGATOIRE dès qu'on pose les attributs width/height : sans lui,
   le navigateur applique height="1007" comme hint de présentation et étire l'image.
   Spécificité 0,0,1 — il bat le hint, et toute règle de classe le bat à son tour
   (.vid img{height:100%} reste maître). */
img{max-width:100%;display:block;height:auto}
picture{display:contents}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.1em;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.32}
h2{font-size:var(--fs-h2);line-height:1.38}
h4{font-size:var(--fs-h4);line-height:1.47}
p{margin:0}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
/* Titre lu par les moteurs et les lecteurs d'ecran, sans titre visible dans la
   maquette d'origine. A n'utiliser que la ou le design n'en porte aucun. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;background:var(--yellow);
  height:var(--headerH);display:flex;align-items:center}
.hdr-in{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:16px}
.hdr-logo{flex:0 0 20%}
.hdr-logo img{width:226px;max-width:100%}
.hdr-nav{flex:1 1 60%;display:flex;justify-content:center;gap:clamp(10px,1.6vw,22px)}
.hdr-nav a{font-family:var(--body);font-weight:700;font-size:var(--fs-nav);
  color:var(--nav);text-decoration:none;letter-spacing:.01em;padding:2px 0;
  border-bottom:2px solid transparent}
.hdr-nav a:hover,.hdr-nav a[aria-current="page"]{border-bottom-color:var(--nav)}
.hdr-social{flex:0 0 20%;display:flex;justify-content:flex-end;gap:14px}
.hdr-social a{display:block;width:26px;height:26px;color:var(--purple)}
.hdr-social svg{width:100%;height:100%;fill:currentColor}
.burger{display:none;background:none;border:0;padding:8px;color:var(--nav);cursor:pointer}
.burger svg{width:28px;height:28px;fill:currentColor}

/* ---------- page shell ---------- */
main{padding-top:var(--headerH)}
.page{display:none}
.page.is-on{display:block}
.sec{position:relative}
.sec-in{max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
/* 24-col fluid grid, matching Squarespace's engine: col 25.5px + gap 31px @1325 */
.grid{display:grid;grid-template-columns:repeat(24,1fr);column-gap:31px;row-gap:0}
.bg-green{background:var(--green)}
.bg-yellow{background:var(--yellow)}
.bg-yellow-about{background:var(--yellow-about)}
.bg-blue{background:var(--blue)}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--purple);color:var(--white);z-index:9}
.ftr::before{content:"";position:absolute;top:0;left:0;width:100%;height:393px;
  transform:translateY(-100%);
  background:url(assets/footer-cactus.png) repeat-x center bottom;
  pointer-events:none}
.pre-ftr{height:393px}
.ftr-in{max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
/* Trois colonnes : logo Cracké | Nous joindre | logo Productions Squeeze. Les logos
   posés sur le même bas ; le texte centré, à la verticale, sur la hauteur de l'encre. */
.ftr-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;padding-top:0}
.ftr-l{flex:1 1 50%;display:flex;flex-direction:column}
.ftr-r{flex:1 1 50%;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.ftr-l img{width:265px;max-width:100%;margin-top:calc(-265px * 133 / 2500);
  /* logo-cracke.png porte une marge transparente (178 px à gauche et 56 px en bas
     sur 2500 x 1007) : on la compense pour que l'encre s'aligne sur le texte à
     gauche et sur le bas du logo Productions Squeeze, qui n'en a aucune. */
  margin-left:calc(-265px * 178 / 2500);margin-bottom:calc(-265px * 56 / 2500)}
.ftr-r img{width:140px;margin-top:auto}
.ftr h2{font-size:20px;letter-spacing:.1em;margin-top:auto}
.ftr-l p,.ftr-r p{font-size:20px;line-height:1.5}
.ftr a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.ftr-contact{text-align:center;font-size:15px;opacity:.9;align-self:center;margin:0}
.ftr-legal{border-top:1px solid rgba(94,241,216,.5);margin-top:34px;padding:10px 0 25px}
.ftr-legal p{font-size:12px;text-align:right;line-height:1.5}
.ftr-legal nav{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;margin-bottom:6px}
.ftr-legal nav a{text-decoration:none;opacity:.85}
.ftr-legal nav a:hover{opacity:1;text-decoration:underline}
.totop{position:absolute;right:45px;bottom:25px;width:24px;height:24px;
  transform:rotate(-45deg);border:solid var(--white);border-width:5px 5px 0 0;
  background:none;padding:0;cursor:pointer;transition:transform .2s ease}
.totop:hover{transform:rotate(-45deg) scale(.8)}

/* ---------- video ---------- */
.vid{position:relative;display:block;aspect-ratio:16/9;background:#000;
  overflow:hidden;text-decoration:none}
.vid img{width:100%;height:100%;object-fit:cover}
.vid::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-style:solid;border-width:22px 0 22px 36px;
  border-color:transparent transparent transparent rgba(255,255,255,.92);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transition:transform .18s ease}
.vid:hover::after{transform:scale(1.12)}
.vid-cap{font-size:13px;line-height:1.35;padding-top:8px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--purple);color:var(--white);
  font-family:var(--body);font-weight:700;font-size:clamp(17px,1.59vw,22.91px);
  /* PAS de capitalize : « Explorer La Série », « Voir Les Activités » — l'usage
     anglais de capitaliser chaque mot est une faute en français. Quatre des six
     boutons l'avaient déjà désactivé un par un ; la règle est maintenant ici,
     une seule fois. Aucun bouton du site d'origine n'en dépendait : les siens
     tiennent en un mot. */
  text-transform:none;text-decoration:none;padding:16px 28px;border-radius:0}
.btn:hover{opacity:.88}
.btn-white{background:var(--white);color:var(--black);font-size:16px;padding:10px 22px}

/* ================= HOME ================= */
.home-hero{padding:39px 0 0}
.home-sub{padding:28px 0 0;min-height:300px}
.home-sub .sec-in{display:flex;justify-content:flex-end}
.home-sub a{display:block;width:464px;max-width:100%}

/* ============== ANIMATED SERIES ============== */
.as-hero{padding-top:53px}
.as-hero .copy{grid-column:3/15;align-self:center}
.as-hero .copy h1{color:var(--purple);margin-bottom:32px;
  font-size:var(--fs-h2);line-height:1.38}
.as-hero .copy p{color:var(--white)}
.as-hero .shot{grid-column:17/25;align-self:start}
.as-video{padding-top:172px}
.as-partners{padding:34px 0 53px}
.as-meet{padding:68px 0 67px}
.as-meet h2{font-size:var(--fs-h1);line-height:1.32}
.as-ed{padding-top:15px}
.as-ed .por{grid-column:3/9}
.as-ed .copy{grid-column:10/24;align-self:center}
.as-oct{padding-top:186px}
.chars{display:grid;grid-template-columns:repeat(4,1fr);column-gap:33px;row-gap:34px;
  padding-top:34px}
.chars figure{margin:0;text-align:center}
.chars figcaption{padding-top:34px;font-size:16px;line-height:1.5}
.chars b{font-weight:700;display:block}
/* --- Les corneilles -------------------------------------------------------
   Texte a gauche, logo a droite, sur la MEME rangee. La version precedente
   posait le logo en premier (`order:1`) et, comme le texte revenait a la
   colonne 3, la grille le renvoyait a la rangee suivante : le logo flottait
   seul en haut a droite avec un desert vert dessous. L'alternance avec le bloc
   d'Ed juste au-dessus — portrait a gauche, texte a droite — tient la page. */
.as-crows{padding:64px 0 0}
.as-crows .copy{grid-column:3/14;align-self:center}
.as-crows .copy h2{margin-bottom:32px}
.as-crows .por{grid-column:15/23;align-self:center}

/* --- La capsule et les quatre corneilles, cote a cote ----------------------
   La video est VERTICALE : seule et centree, elle laissait la moitie de la
   largeur en vert. Les quatre personnages occupent cette place, en deux
   rangees de deux, a la hauteur de la video. Les cercles sont plafonnes :
   dans une cellule deux fois plus large qu'avant, ils auraient double. */
.as-crows-cast{padding:84px 0 24px}
.as-crows-cast .cast-clip{grid-column:3/10;align-self:center}
.as-crows-cast .cast-who{grid-column:11/24;align-self:center}
.as-crows-cast .cast-who h2{text-align:center;margin-bottom:10px}
.cast-clip .vthumb{aspect-ratio:9/16}
.chars-2{grid-template-columns:repeat(2,1fr)}
.chars-2 figure img{max-width:198px;margin-inline:auto}
/* La rangee de cactus ferme « La famille s'eclate » et ouvre le spin-off : c'est
   son decor a elle, pas celui des corneilles. Elle tient sur UNE ligne a toute
   largeur — `nowrap` l'y oblige, et la taille suit la fenetre pour qu'elle n'ait
   jamais a deborder. A vingt-sept cactus et en `break-word`, elle retombait sur
   deux lignes, dont une de trois. */
.cacti{padding:21px 0 0;text-align:center;white-space:nowrap;
  font-size:min(4.3vw,50.56px);line-height:1.38;letter-spacing:.06em}
.as-start{padding:87px 0 0}
.as-start .shot{grid-column:2/11}
.as-start .copy{grid-column:13/25;align-self:center;text-align:center}
.as-start .copy h2{color:var(--pink);margin-bottom:32px}
.as-start .copy h4{color:var(--pink);margin:32px 0}
.as-start .copy p{color:var(--purple)}
.as-start .copy p + p{margin-top:15px}
.as-start .cta{margin-top:126px;text-align:center}
.as-s1{padding:34px 0 53px}
.as-videos{padding:15px 0 0}
.as-videos h1{color:var(--pink);text-align:center}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:33px;row-gap:34px;
  padding-top:33px}
.as-more{padding:34px 0 0;text-align:center;color:var(--purple)}
.as-more a{text-decoration:underline;text-underline-offset:3px}

/* ================= ABOUT ================= */
.ab{padding:65px 0 0}
.ab .por{grid-column:2/9}
.ab .copy{grid-column:9/25;align-self:center}
.ab .copy p{color:var(--pink-2)}
.ab .copy p + p{margin-top:1.5em}

/* ================= ACTIVITIES ================= */
.ac-head{padding:65px 0 77px;text-align:center}
.ac-head h1{color:var(--purple);max-width:994px;margin:0 auto}
.ac-head p{color:var(--white);max-width:994px;margin:32px auto 0}
.ac-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:99px;row-gap:100px;
  padding-top:0}
.ac-grid figure{margin:0;text-align:center;display:flex;flex-direction:column}
.ac-grid img{width:100%;border-radius:2px}
/* Deux lignes reservees au titre. Sans ca, « Daddy Ed and his beloved brood »
   en prend une de plus et pousse SON bouton sous ceux de la rangee — mesure du
   2026-09-17 : 59 px de haut pour un titre d'une ligne, 81 px pour deux, et le
   bouton 22 px plus bas. Les images, elles, font toutes 376 px : le titre etait
   seul en cause.
   2,76em = deux interlignes (line-height 1,38 sur 16 px), en em pour suivre la
   police plutot que de figer 44 px. Le padding entre dans le calcul : box-sizing
   est border-box partout. */
.ac-grid h2{color:var(--green);font-size:16px;letter-spacing:.1em;padding:37px 22px 0;
  min-height:calc(37px + 2.76em);margin-bottom:38px}
/* L'ecart de 38 px est passe SOUS le titre, et le bouton descend au bas de sa
   cellule. Sans ca, les boutons se decalent des qu'un titre prend une ligne de
   plus — et ca arrive aux deux langues : a 1024 px « Daddy Ed and his beloved
   brood » en prend deux, a 800 px il en prend trois. Le `margin-top:auto` seul
   aurait mange l'ecart quand toutes les cellules sont pleines ; porte par le
   titre, l'ecart est garanti et l'espace libre s'ajoute par-dessus.
   `align-self` parce qu'un lien devenu element flex s'etirerait sur toute la
   largeur. */
.ac-grid .btn-white{margin-top:auto;align-self:center}
/* Les boutons Télécharger touchaient la bande verte du pied de page : la section
   garde de l'air sous la dernière rangée, sur bureau comme sur téléphone. */
.ac-body{padding-bottom:clamp(56px,7vw,100px)}

/* ================= SUBSCRIBE ================= */
.sub-wrap{padding:145px 0 128px}
.sub-card{max-width:994px;margin:0 auto;background:var(--white);border-radius:10px;
  overflow:hidden;display:flex}
.sub-art{flex:1 1 50%;background:var(--blue);display:flex;align-items:flex-end;min-height:280px}
.sub-art img{width:100%;height:auto}
.sub-form{flex:1 1 50%;display:flex;flex-direction:column;padding:92px 0 0}
.sub-form h1{color:var(--ink);font-size:clamp(28px,2.78vw,40px);text-align:center;
  letter-spacing:normal}
.sub-form > p.lede{color:var(--ink);text-align:center;margin-top:41px}
.sub-form form{display:flex;flex-direction:column;align-items:center;gap:18px;
  padding-top:29px}
.sub-form input[type=email],.sub-form input[type=text]{width:360px;max-width:100%;
  background:var(--field);border:0;border-radius:10px;padding:15px 20px;
  font-family:var(--body);font-size:var(--fs-p);color:var(--black)}
.sub-form input::placeholder{color:#8b8080}
.chk{width:320px;max-width:100%;display:flex;gap:12px;align-items:flex-start;
  font-size:13px;line-height:1.4;color:var(--ink)}
.chk input{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px;accent-color:var(--red)}
.chk a{color:var(--ink)}
.sub-form .button{width:320px;max-width:100%;background:var(--red);color:var(--white);
  font-family:var(--display);font-size:26px;letter-spacing:.04em;border:0;border-radius:10px;
  padding:25px 20px;cursor:pointer;margin-top:26px;text-transform:uppercase}
.sub-form .button:hover{filter:brightness(1.06)}
.sub-note{width:320px;max-width:100%;font-size:12px;line-height:1.4;color:var(--purple);
  text-align:center;margin-top:10px}
.terms{font-size:15px;line-height:1.45;color:var(--ink);padding:20px}

/* ================= LEGAL ================= */
.legal{padding:65px 0 60px;background:var(--white)}
.legal .sec-in{max-width:900px}
.legal h1{color:var(--purple);font-size:clamp(28px,2.8vw,40px);margin-bottom:24px}
.legal h2{color:var(--purple);font-size:clamp(20px,1.7vw,24px);margin:34px 0 12px}
.legal h3,.legal h4{color:var(--purple);font-size:18px;margin:26px 0 10px}
.legal p{font-size:16px;line-height:1.6;margin:0 0 14px;color:#241a1a}
.legal li{font-size:16px;line-height:1.6;margin:0 0 10px;color:#241a1a}
.legal ul{padding-left:22px}
.legal a{color:var(--purple)}
.lang-switch{display:flex;gap:10px;margin-bottom:26px;font-size:14px;
  font-weight:700;font-family:var(--body)}
.lang-switch a{display:inline-block;padding:6px 14px;border-radius:999px;
  background:#efe7f8;color:var(--purple);text-decoration:none}
.lang-switch a[aria-current="true"]{background:var(--purple);color:var(--white)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--gutter:36px;--headerH:92px}
  .as-hero .copy,.as-crows .copy{grid-column:1/16}
  .as-hero .shot{grid-column:17/25}
  .as-crows .por{grid-column:17/25}
  .as-crows-cast .cast-clip{grid-column:1/9}
  .as-crows-cast .cast-who{grid-column:10/25}
  .chars-2 figure img{max-width:170px}
  .as-ed .por{grid-column:1/8}
  .as-ed .copy{grid-column:9/25}
  .ab .por{grid-column:1/9}
  .ab .copy{grid-column:10/25}
  .as-start .shot{grid-column:1/11}
  .as-start .copy{grid-column:12/25}
  .ac-grid{column-gap:48px;row-gap:64px}
  .as-video{padding-top:90px}
  .as-oct{padding-top:90px}
  .as-start .copy .cta,.as-start .cta{margin-top:60px}
}
@media (max-width:768px){
  :root{--gutter:20px;--headerH:78px}
  .hdr-logo img{width:150px}
  .hdr-logo{flex:1 1 auto}
  .hdr-social{flex:0 0 auto;gap:12px}
  .hdr-social a{width:22px;height:22px}
  .burger{display:block;order:3}
  .hdr-nav{position:fixed;top:var(--headerH);left:0;right:0;background:var(--yellow);
    flex-direction:column;align-items:center;gap:0;padding:8px 0 18px;display:none;
    box-shadow:0 10px 20px rgba(0,0,0,.12)}
  .hdr-nav.is-open{display:flex}
  .hdr-nav a{padding:12px 0;font-size:17px}
  .grid{display:block}
  .as-hero .shot,.as-crows .por,.as-ed .por,.ab .por,.as-start .shot{margin:0 auto 28px}
  .as-hero .shot img,.ab .por img{max-width:320px;margin:0 auto}
  .as-crows .copy,.ab .copy p{text-align:left}
  .as-crows .por img{max-width:280px;margin:0 auto}
  .as-crows-cast .cast-clip{max-width:300px;margin:0 auto 34px}
  .chars-2 figure img{max-width:none}
  .as-ed .por img{max-width:220px;margin:0 auto}
  .chars{grid-template-columns:repeat(2,1fr);column-gap:20px;row-gap:26px}
  .chars figcaption{padding-top:16px}
  .vgrid,.ac-grid{grid-template-columns:1fr;column-gap:0;row-gap:40px}
  .sub-card{flex-direction:column}
  .sub-art{min-height:0}
  .sub-form{padding:36px 0 0}
  .sub-wrap{padding:48px 0 60px}
  .ftr::before{height:200px;background-size:auto 200px}
  .pre-ftr{height:200px}
  .ftr-row{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
  .ftr-contact{text-align:left;align-self:flex-start}
  .ftr-r{align-items:flex-start;text-align:left}
  .ftr-r img{margin-top:0}
  .ftr h2{margin-top:24px}
  .totop{right:20px}
  .ab,.ac-head,.as-hero,.as-meet,.as-start,.legal{padding-top:44px}
  .as-video,.as-oct{padding-top:48px}
  .cacti{font-size:min(4.3vw,22px)}
}

/* ============ AJOUTS v3 : i18n, funnel, videos, jeu ============ */
.navset{display:contents}
.lang{display:flex;gap:4px;align-items:center;margin-left:14px;flex:0 0 auto}
.lang a{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.04em;
  color:var(--nav);text-decoration:none;padding:5px 9px;border-radius:999px;line-height:1}
.lang a[aria-current="true"]{background:var(--purple);color:var(--white)}
.lang a:not([aria-current]):hover{background:rgba(66,0,133,.12)}
.hdr-social{flex:0 0 auto}
.hdr-nav{flex:1 1 auto}

/* --- bandeau d'accueil / sections funnel --- */
.fn{position:relative;overflow:hidden}
.fn-in{max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--display);font-size:clamp(14px,1.1vw,16px);letter-spacing:.18em;
  text-transform:uppercase;display:block;margin-bottom:14px;opacity:.9}
.fn-lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:60ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}
.btn-lg{font-size:clamp(18px,1.6vw,23px);padding:20px 40px;border-radius:10px}
.btn-lg,.btn-yellow,.btn-red,.btn-ghost{letter-spacing:.01em}
.btn-red{background:var(--red)}
.btn-ghost{background:transparent;border:3px solid currentColor;padding:17px 34px}
.btn-yellow{background:var(--yellow);color:var(--purple)}

/* hero jeu */
.hero-rush{background:#2A0057;color:var(--white);padding:0}
.hero-rush .bg{position:absolute;inset:0;background:url(assets/game/rush-backdrop.jpg) center 30%/cover;opacity:.78}
/* voile: garde le texte lisible a gauche, laisse l'art respirer a droite */
.hero-rush .scrim{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(42,0,87,.72) 0%,rgba(42,0,87,.62) 30%,rgba(42,0,87,.34) 48%,rgba(42,0,87,.08) 66%,rgba(42,0,87,0) 80%)}
.hero-rush .fn-in{position:relative;padding-block:clamp(48px,6vw,86px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero-rush .eyebrow{color:var(--teal)}
.hero-rush h1{font-size:clamp(36px,4.3vw,62px);line-height:1.12;letter-spacing:.04em;
  text-shadow:0 2px 22px rgba(20,0,44,.8),0 1px 3px rgba(20,0,44,.5)}
.hero-rush .fn-lede,.hero-rush .eyebrow{text-shadow:0 1px 12px rgba(20,0,44,.85),0 1px 2px rgba(20,0,44,.6)}
.hero-rush .fn-lede{margin-top:20px}
.hero-rush .art img{width:100%;max-width:520px;margin-left:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;font-size:13px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.badges span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:7px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}

/* section chaine */
.fn-yt{background:var(--purple);color:var(--white)}
.fn-yt .eyebrow{color:var(--teal)}
.fn-yt .fn-in{padding-block:clamp(48px,5.5vw,80px)}
.fn-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:30px}
.stat-row{display:flex;gap:clamp(20px,3vw,52px);flex-wrap:wrap;margin-top:26px}
.stat b{display:block;font-family:var(--display);font-size:clamp(28px,3vw,42px);
  letter-spacing:.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;opacity:.85;letter-spacing:.03em}

/* section univers */
.fn-uni{background:var(--green)}
.fn-uni .fn-in{padding-block:clamp(48px,5.5vw,80px)}
.fn-uni .eyebrow{color:var(--purple)}
.fn-uni h2{color:var(--purple)}
/* Carrousel des huit octuplés : défilement continu, deux copies de la bande
   pour boucler sans saut. Il s'arrête au survol et au focus clavier. */
.uni-strip{margin-top:34px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.uni-track{display:flex;width:max-content;gap:clamp(10px,1.6vw,26px);
  animation:uniDrift 42s linear infinite}
.uni-strip:hover .uni-track,.uni-strip:focus-within .uni-track{animation-play-state:paused}
.uni-track figure{margin:0;text-align:center;flex:0 0 auto;width:clamp(130px,13.5vw,190px)}
.uni-track img{width:100%;margin:0 auto}
.uni-track figcaption{font-family:var(--display);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;padding-top:10px;color:var(--purple);white-space:nowrap}
@keyframes uniDrift{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - (clamp(10px,1.6vw,26px) / 2)),0,0)}}
/* Sans animation : les huit en grille, rien ne bouge, rien ne manque. */
@media (prefers-reduced-motion:reduce){
  .uni-strip{-webkit-mask-image:none;mask-image:none}
  .uni-track{animation:none;width:100%;display:grid;grid-template-columns:repeat(4,1fr);
    row-gap:24px}
  .uni-track figure{width:auto}
  .uni-track .dup{display:none}
}

/* section infolettre */
.fn-news{background:var(--yellow)}
.fn-news .fn-in{padding-block:clamp(44px,5vw,72px);text-align:center}
.fn-news .eyebrow{color:var(--purple)}
.fn-news h2{color:var(--purple)}
.fn-news .fn-lede{margin:18px auto 0;color:var(--ink)}
.fn-news .cta-row{justify-content:center}

/* bandeau boutique */
.fn-shop{background:var(--ink);color:var(--white)}
.fn-shop .fn-in{padding-block:36px;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap}
.fn-shop p{font-size:clamp(16px,1.3vw,19px)}
.fn-shop .eyebrow{color:var(--yellow);margin-bottom:6px}

/* ============ PAGE VIDEOS ============ */
.yt-head{background:var(--purple);color:var(--white)}
.yt-head .fn-in{padding-block:clamp(40px,4.5vw,64px);display:flex;gap:clamp(20px,3vw,40px);
  align-items:center;flex-wrap:wrap}
.yt-head img.ava{width:118px;height:118px;border-radius:50%;background:var(--green);
  object-fit:cover;flex:0 0 auto}
.yt-head h1{font-size:clamp(30px,3.4vw,50px)}
.yt-head .eyebrow{color:var(--teal)}
.yt-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;opacity:.9;margin-top:10px;
  font-variant-numeric:tabular-nums}
.yt-meta b{font-weight:700}
.shelf{padding-block:clamp(30px,3.4vw,48px)}
.shelf-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.shelf h2{font-size:clamp(22px,2.2vw,32px);letter-spacing:.07em}
.shelf .sub{font-size:14px;opacity:.8}
.rail{display:grid;gap:22px;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);
  overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.rail > *{scroll-snap-align:start}
.rail-short{grid-auto-columns:minmax(178px,1fr)}
/* colonne flex : sans elle, le bouton ne mesure que sa vignette et la rangee
   (overflow:auto, hauteur imposee par le plus haut element) rogne titre et vues */
.sub-age{font-size:13px;font-weight:600;opacity:.75;text-align:center;margin:10px 0 18px}
.vcard{background:transparent;border:0;padding:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit;display:flex;flex-direction:column;width:100%}
.vthumb{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:#1c1030}
.rail-short .vthumb{aspect-ratio:9/16}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.vcard:hover .vthumb img{transform:scale(1.045)}
.vthumb::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-style:solid;border-width:16px 0 16px 27px;
  border-color:transparent transparent transparent rgba(255,255,255,.95);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));transition:transform .18s ease}
.vcard:hover .vthumb::after{transform:scale(1.15)}
.vthumb.playing::after{display:none}
.vthumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vttl{font-size:15px;line-height:1.35;font-weight:600;padding-top:11px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vsub{font-size:13px;opacity:.75;padding-top:5px;font-variant-numeric:tabular-nums}
.vfall{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;background:rgba(28,16,48,.94);color:#fff;
  text-align:center;padding:16px;font-size:13px;line-height:1.4}
.vfall.on{display:flex}
.vfall a{color:var(--teal);font-weight:700}
.yt-cta{padding-block:clamp(34px,4vw,58px);text-align:center}

/* ============ PAGE CRACKE RUSH ============ */
.rush-hero{background:#2A0057;color:var(--white);position:relative;overflow:hidden}
.rush-hero .bg{position:absolute;inset:0;background:url(assets/game/rush-backdrop.jpg) center/cover;opacity:.42}
.rush-hero .fn-in{position:relative;padding-block:clamp(36px,4vw,60px);text-align:center}
.rush-hero h1{margin:0}
.rush-hero img.logo{width:min(440px,72%);margin:0 auto 18px}
.rush-hero .fn-lede{margin:0 auto;text-align:center}
.stage-wrap{background:#1B0038;padding-block:clamp(20px,2.4vw,34px)}
.stage{position:relative;max-width:var(--content);margin:0 auto;aspect-ratio:16/10;
  background:#0E0020;border-radius:14px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.5)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stage-fb{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;
  padding:clamp(20px,4vw,48px);color:#fff;background:#1B0038}
.stage-fb.on{display:flex}
/* Mode « bientôt » : même cadre 16/10 que le jeu, mais statique — rien à charger */
.stage.stage-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;padding:clamp(18px,3vw,40px);color:var(--white);background:#0E0020}
.stage.stage-soon img{width:min(220px,40%)}
.stage.stage-soon h3{font-family:var(--display);font-size:clamp(22px,2.4vw,34px);letter-spacing:.06em;margin:0}
.stage.stage-soon p{font-size:16px;line-height:1.55;max-width:52ch;opacity:.92;margin:0}
.stage.stage-soon .btn{margin-top:6px}
@media (max-width:640px){.stage.stage-soon{aspect-ratio:auto;min-height:340px}}
.stage-fb img{width:min(300px,55%)}
.stage-fb h3{font-family:var(--display);font-size:clamp(20px,2vw,28px);letter-spacing:.06em;
  text-transform:uppercase;margin:0}
.stage-fb p{font-size:15px;line-height:1.55;max-width:52ch;opacity:.9}
.rush-bar{max-width:var(--content);margin:14px auto 0;padding:0 var(--gutter);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:rgba(255,255,255,.72);font-size:13px}
.rush-bar kbd{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:5px;padding:2px 7px;font-family:var(--body);font-size:12px;font-weight:700}
.rush-feat{background:var(--green);padding-block:clamp(44px,5vw,72px)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);
  margin-top:32px}
.feat{background:rgba(255,255,255,.55);border-radius:12px;padding:24px}
.feat h3{font-family:var(--display);font-size:19px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--purple);margin:0 0 9px}
.feat p{font-size:15px;line-height:1.5}

@media (max-width:1100px){
  .hero-rush .fn-in{grid-template-columns:1fr;text-align:center}
  .hero-rush .art img{margin:0 auto;max-width:400px}
  .hero-rush .cta-row,.badges{justify-content:center}
  
  .feat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  /* en colonne, le texte passe au-dessus de l'art : voile vertical quasi opaque */
  .hero-rush .scrim{background:linear-gradient(180deg,#2A0057 0%,rgba(42,0,87,.95) 46%,rgba(42,0,87,.72) 68%,rgba(42,0,87,.35) 100%)}
  .hero-rush .bg{background-position:32% 28%;opacity:.55}
  .hdr-nav.is-open{padding-bottom:10px}
  .lang{margin-left:6px;order:2}
  .hdr-social{display:none}
  .uni-track figure{width:clamp(118px,34vw,150px)}
  .feat-grid{grid-template-columns:1fr}
  .stat-row{gap:22px}
  .fn-shop .fn-in{flex-direction:column;align-items:flex-start}
  /* Cadre portrait sur telephone : le jeu a un menu concu pour le portrait, et
     c'est lui qui demande de tourner quand la partie commence.
     Condition sur l'ORIENTATION, pas seulement la largeur : un iPhone SE couche
     fait encore 667 px de large, donc sur la largeur seule il gardait un cadre
     3/4 — mesure a 667x375, scene 263x351. Le jeu y voyait toujours du portrait
     et redemandait de tourner un appareil deja tourne, sans issue.
     Hors portrait, la scene reprend le 16/10 de la regle generale. */
  .stage{border-radius:10px}
  @media (orientation:portrait){ .stage{aspect-ratio:3/4} }
  .yt-head img.ava{width:84px;height:84px}
  .rail{grid-auto-columns:minmax(230px,1fr)}
  .rail-short{grid-auto-columns:minmax(150px,1fr)}
}


/* ============ LIGHTBOX VIDEO ============ */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  /* encoches iPhone en paysage + marge minimale */
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.lb.on{display:flex}
.lb-back{position:absolute;inset:0;background:rgba(12,0,28,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb-box{position:relative;width:min(1120px,100%);display:flex;
  flex-direction:column;gap:12px;animation:lbIn .22s ease both;
  /* --chrome = place prise par le titre, le bouton et les marges */
  --chrome:150px}
/* La largeur est plafonnee par la HAUTEUR disponible : sans ca, la video deborde
   en paysage sur telephone. dvh suit la barre d'URL mobile; vh sert de repli. */
.lb-frame{position:relative;background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);aspect-ratio:16/9;margin-inline:auto;
  width:min(100%, calc((100vh - var(--chrome)) * 16 / 9));
  width:min(100%, calc((100dvh - var(--chrome)) * 16 / 9))}
.lb-box.short{width:min(420px,100%)}
.lb-box.short .lb-frame{aspect-ratio:9/16;
  width:min(100%, calc((100vh - var(--chrome)) * 9 / 16));
  width:min(100%, calc((100dvh - var(--chrome)) * 9 / 16))}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-ttl{color:#fff;font-size:16px;line-height:1.4;font-weight:600;text-align:center;
  margin:0;text-wrap:balance}
.lb-ttl a{color:var(--teal);font-weight:700;text-decoration:none;white-space:nowrap}
.lb-ttl a:hover{text-decoration:underline}
.lb-close{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;display:grid;place-items:center}
.lb-close:hover{background:rgba(255,255,255,.3)}
.lb-fb{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:#fff;text-align:center;padding:24px;font-size:15px}
.lb-fb.on{display:flex}
.lb-fb a{color:var(--teal);font-weight:700}
@keyframes lbIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lb-box{animation:none}}
@media (max-width:768px){
  .lb-close{top:-40px;width:36px;height:36px}
  .lb-ttl{font-size:13px}
  .lb-box{--chrome:120px}
}
/* Paysage bas de plafond (iPhone couche) : le titre disparait, le bouton passe
   DANS le cadre, et la video prend toute la hauteur disponible. */
@media (max-height:520px){
  .lb-box{--chrome:24px;gap:0}
  .lb-ttl{display:none}
  .lb-close{top:8px;right:8px;background:rgba(0,0,0,.55);z-index:2}
  .lb-box.short{width:min(300px,100%)}
}
body.lb-open{overflow:hidden}


/* ---- mode chaine : barre de controles de la lightbox ---- */
.lb-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  color:#fff;font-size:13px}
.lb-bar button{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:999px;
  padding:8px 14px;font-family:var(--body);font-weight:700;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:1}
.lb-bar button:hover:not(:disabled){background:rgba(255,255,255,.3)}
.lb-bar button:disabled{opacity:.35;cursor:default}
.lb-pos{opacity:.75;font-variant-numeric:tabular-nums}
.lb-next{opacity:.8;max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-next b{font-weight:700;opacity:1}
.watchall{background:var(--purple);color:#fff;border:0;border-radius:999px;
  padding:9px 17px;font-family:var(--body);font-weight:700;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;line-height:1}
.watchall:hover{filter:brightness(1.15)}
.bg-yellow .watchall{background:var(--purple)}
.shelf-hd .right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* en plein ecran, le cadre prend tout et les controles se posent par-dessus */
.lb:fullscreen{padding:0;background:#000}
.lb:fullscreen .lb-box{width:100%;height:100%;--chrome:0px;gap:0}
.lb:fullscreen .lb-frame{width:100%;height:100%;aspect-ratio:auto;border-radius:0;
  box-shadow:none}
.lb:fullscreen .lb-ttl{display:none}
.lb:fullscreen .lb-bar{position:absolute;left:0;right:0;bottom:0;padding:14px;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);opacity:0;
  transition:opacity .25s ease;z-index:3}
.lb:fullscreen:hover .lb-bar,.lb:fullscreen .lb-bar:focus-within{opacity:1}
.lb:fullscreen .lb-close{top:10px;right:10px;background:rgba(0,0,0,.55);z-index:4}
@media (max-height:520px){ .lb-bar{font-size:12px;gap:7px} .lb-bar button{padding:6px 11px} }


/* ---- bloc « deviens fan » ---- */
.fn-fan{background:var(--purple);color:#fff;text-align:center}
.fn-fan .fn-in{padding-block:clamp(44px,5vw,72px)}
.fn-fan h2{color:#fff}
.fn-fan .fn-lede{margin:16px auto 0;opacity:.92}
.fn-fan .cta-row{justify-content:center}
/* ---- bouton plein ecran du jeu ---- */
.rush-fs{background:var(--teal);color:#08243a;border:0;border-radius:999px;
  padding:10px 20px;font-family:var(--body);font-weight:700;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;line-height:1}
.rush-fs:hover{filter:brightness(1.08)}
.rush-bar{align-items:center}
.stage:fullscreen{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0}
/* Plein cadre : le repli pour iPhone, ou l'API Fullscreen n'existe pas hors
   video. 100dvh et non 100vh — sur iOS, vh compte la barre d'adresse comme si
   elle etait deja retractee, et le bas du jeu passe sous l'ecran. */
.stage.plein-cadre{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;
  aspect-ratio:auto;border-radius:0;z-index:9999;margin:0}
/* AFFICHE DE LANCEMENT (tactile seulement)
   Relevee sur poki.com et crazygames.com le 2026-09-17 : sur telephone, les
   deux remplacent le jeu jouable par une affiche a un seul bouton, et passent
   la fenetre entiere au toucher. Ni l'un ni l'autre n'utilise l'API plein ecran
   native — mesure sur CrazyGames : document.fullscreenElement vaut null et le
   cadre est simplement en position:fixed, z-index 200, aux dimensions exactes
   de la fenetre, body en overflow:hidden. C'est ce que nous faisons ici. */
.stage-go{display:none}
@media (hover:none) and (pointer:coarse){
  .stage-go{display:flex;position:absolute;inset:0;z-index:3;
    flex-direction:column;align-items:center;justify-content:center;gap:14px;
    text-decoration:none;text-align:center;
    /* le bas est reserve a l'invitation a installer, qui est posee par-dessus :
       sans ce retrait elle chevauchait le bouton Jouer sur une affiche courte
       — mesure en paysage, ou l'affiche ne fait que 273 px de haut. */
    padding:16px 16px 42px;
    background:#2A0057;overflow:hidden;
    -webkit-tap-highlight-color:transparent}
  /* le decor du jeu sert d'affiche, assombri pour que le bouton porte */
  .go-bg{position:absolute;inset:0;background:url(assets/game/rush-backdrop.jpg) center/cover;
    opacity:.55}
  .stage-go > :not(.go-bg){position:relative}
  .stage-go .go-ed{width:min(38%,150px);height:auto;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
  .go-cta{display:inline-block;background:var(--yellow);color:#3d2a6e;
    font-weight:800;font-size:1.05rem;letter-spacing:.02em;
    padding:12px 26px;border-radius:999px;box-shadow:0 6px 0 rgba(0,0,0,.22)}
  .go-hint{color:#fff;font-size:.82rem;text-shadow:0 1px 4px rgba(0,0,0,.75);
    display:inline-flex;align-items:center;gap:8px}
  /* Le telephone tourne de lui-meme de debout a couche, et revient : c'est
     l'icone qui explique la consigne a qui ne la lit pas. Une pause dans
     chaque position pour que l'oeil comprenne les deux etats. */
  .go-rot{flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
    animation:go-rot 2.6s ease-in-out infinite}
  @keyframes go-rot{0%,30%{transform:rotate(0)}
    50%,80%{transform:rotate(-90deg)} 100%{transform:rotate(0)}}
  @media (prefers-reduced-motion:reduce){ .go-rot{animation:none;transform:rotate(-90deg)} }
  /* L'invitation a installer. Sur iPhone, c'est le SEUL moyen de jouer sans
     les barres de Safari — aucune page web ne peut les masquer. Sur Android,
     Chrome donne un vrai bouton (beforeinstallprompt), donc on l'affiche a la
     place de la consigne. JS decide lequel ; ici on ne fait que la poser. */
  .go-inst{position:absolute;left:0;right:0;bottom:14px;z-index:4;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:0 14px;text-align:center}
  .go-inst[hidden]{display:none}
  .inst-txt{color:rgba(255,255,255,.82);font-size:.7rem;line-height:1.35;
    text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .inst-btn{background:rgba(255,255,255,.14);color:#fff;
    border:1px solid rgba(255,255,255,.45);border-radius:999px;
    padding:8px 18px;font:inherit;font-size:.8rem;font-weight:700;
    -webkit-tap-highlight-color:transparent}
  .inst-btn[hidden]{display:none}
  /* une fois lance, l'affiche s'efface et laisse le jeu seul */
  .stage.a-joue .stage-go,
  .stage.a-joue .go-inst{display:none}
  /* le cadre reste vide et invisible tant qu'on n'a pas touche l'affiche */
  .stage:not(.a-joue) #gameframe{visibility:hidden}
  /* Tant que rien ne joue, la scene n'a pas a garder le format du jeu : une
     affiche carree tient en entier a l'ecran, bouton et consigne compris.
     C'est le format retenu par Poki (carte de 343x343 mesuree sur telephone). */
  .stage:not(.a-joue){aspect-ratio:1/1}
}
/* Le jeu ne doit pas se comporter comme une page : ni surbrillance bleue au
   toucher, ni selection de texte, ni rebond elastique en fin de defilement. */
.stage{-webkit-tap-highlight-color:transparent}
#gameframe{border:0;outline:none;display:block}
.stage.plein-cadre{touch-action:manipulation;-webkit-user-select:none;user-select:none;
  overscroll-behavior:none;-webkit-touch-callout:none}
/* Filet, au cas ou viewport-fit=cover ne prendrait pas (vieil iOS, appareil
   inattendu) : la zone hors zone sure est peinte avec le fond de la RACINE,
   et celui du site est le vert lime --green. C'est lui qu'on voyait en deux
   bandes de chaque cote sur un iPhone couche. Pendant le plein cadre on prend
   le fond du jeu lui-meme (#0e1726), pour qu'une bande qui resisterait se
   lise comme un letterbox et non comme un defaut. */
body.jeu-plein-cadre{overflow:hidden;overscroll-behavior:none;background:#0e1726}
/* GLISSER VERS LE HAUT — le plein ecran de l'iPhone dans Safari.
   Il n'y a pas d'API plein ecran sur iPhone (caniuse, iOS 26 : « iPad
   seulement »). Safari ne replie ses barres qu'au defilement du joueur, et
   il ne replie rien si la page ne peut pas defiler : la page doit donc etre
   PLUS HAUTE que l'ecran pendant le jeu — c'est le ::after — et rester
   defilable, meme une fois les barres repliees, sinon Safari les redeploie.
   Le voile recueille le geste par-dessus le jeu, qui avalerait le toucher. */
body.jeu-plein-cadre.jeu-glisser{overflow:visible}
body.jeu-glisser::after{content:'';display:block;height:150vh}
.stage-glisser{position:absolute;inset:0;z-index:5;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(14,23,38,.86);color:#fff;text-align:center;padding:20px;
  touch-action:pan-y;-webkit-user-select:none;user-select:none}
.stage.plein-cadre.a-glisser .stage-glisser{display:flex}
.glisser-main{font-size:2.6rem;line-height:1;
  animation:glisser-haut 1.4s ease-in-out infinite}
@keyframes glisser-haut{0%,100%{transform:translateY(12px);opacity:.45}
  50%{transform:translateY(-12px);opacity:1}}
.glisser-txt{font-weight:800;font-size:1.05rem;letter-spacing:.01em;
  text-shadow:0 1px 4px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){ .glisser-main{animation:none} }
/* Telephone tourne a l'horizontale, HORS plein cadre : sans plafond de hauteur,
   la scene gardait son ratio a partir de la LARGEUR et sortait de l'ecran —
   mesure a 812x375, une scene de 508 px de haut dans 375 px de fenetre. Le jeu
   passait bien en paysage, mais il fallait faire defiler pour le voir.
   Avec un plafond, le ratio se calcule depuis la hauteur disponible. */
@media (orientation:landscape) and (max-height:560px){
  /* :not(.plein-cadre) — un max-height l'emporte toujours sur un height, donc
     sans l'exclusion ce plafond rognait 24 px au bas du plein cadre. */
  .stage:not(.plein-cadre){max-height:calc(100dvh - 24px);width:auto;margin-inline:auto}
  .stage-wrap{padding-block:12px}
}
/* MODE APPLICATION (page ajoutee a l'ecran d'accueil). Sur iPhone, c'est le
   seul endroit sans barre d'adresse ni onglets. iOS y donne l'ecran ENTIER a
   la page, barre d'etat comprise — on l'a demande avec viewport-fit=cover et
   une barre d'etat translucide — donc sans ce retrait l'heure et la batterie
   se posaient sur l'en-tete jaune. Le retrait s'ajoute a --headerH, sinon le
   contenu passerait sous l'en-tete devenu plus haut.
   Ces env() ne valent quelque chose que la ou cover est demande, c'est-a-dire
   sur cette page seulement : ailleurs ils valent 0 et rien ne bouge. */
body.p-rush .hdr{padding-top:env(safe-area-inset-top,0px)}
body.p-rush main{padding-top:calc(var(--headerH) + env(safe-area-inset-top,0px))}

/* Telephone tenu a l'horizontale DES L'ARRIVEE : mesure a 667x375, l'en-tete
   (78 px) et le bloc d'intro (383 px) remplissaient l'ecran a eux seuls, et
   l'affiche ne commencait qu'a 473 px — le joueur arrivait donc sur une page
   ou aucun bouton n'etait visible, et devait deviner qu'il faut defiler.
   Poki et CrazyGames montrent le jeu en premier ; on fait pareil, mais sans
   toucher a l'ordre du document : l'intro reste avant la scene pour la
   lecture et l'indexation, seul l'ordre d'AFFICHAGE change.
   `.is-on` est indispensable : `.page{display:none}` cache les pages
   inactives du routage par ancre, et un `display:flex` non qualifie les
   ferait toutes reapparaitre. */
/* Aucun plafond de hauteur ici : un `max-height:560px` visait le telephone et
   laissait la TABLETTE couchee dehors. Mesure a 1024x768 : l'affiche commencait
   a 509 px, et carree a la largeur de la scene elle faisait 1024 px de haut,
   soit 765 px sous l'ecran — le bouton, en son centre, tombait vers 1021 px.
   La regle vaut donc pour tout appareil tactile couche. */
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
  .page.is-on[id$="rush"]{display:flex;flex-direction:column}
  .page.is-on[id$="rush"] .stage-wrap{order:-1;
    /* Le 24 px soustrait plus bas n'est vrai que si le rembourrage vaut 12 px
       en haut et en bas. Le telephone le recevait d'une autre regle ; sur
       tablette il valait clamp(20px,2.4vw,34px), soit 49 px a 1024 px de
       large, et le plafond devenait trop genereux de 25 px. On le pose ici
       pour que la soustraction soit exacte partout. */
    padding-block:12px}
  /* Le plafond general suppose que la scene part du haut de la fenetre. Ici
     l'en-tete fixe lui prend --headerH, et .stage-wrap 12 px en haut et en
     bas : sans les retirer l'affiche depassait de 66 px et sa consigne de
     rotation se retrouvait coupee sous l'ecran.
     `width:auto` est indispensable : sans lui le carre se calcule depuis la
     LARGEUR et le plafond ne fait qu'ecraser le rapport. Le telephone recevait
     deja ce `width:auto` d'une autre regle bornee a 560 px de haut ; la
     tablette, non. */
  .page.is-on[id$="rush"] .stage:not(.plein-cadre){
    max-height:calc(100dvh - var(--headerH) - 24px);width:auto;margin-inline:auto}
  /* L'appareil est deja a l'horizontale : lui demander de le tourner est une
     consigne qui se contredit elle-meme. Elle ne sert qu'en portrait. */
  .go-hint{display:none}
  /* L'invitation a installer non plus ne tient pas ici : l'affiche couchee ne
     fait que 273 px de large, le texte y passe a deux lignes et se serre
     contre le bouton. Le portrait, ou l'on arrive presque toujours, a la
     place qu'il faut — et l'invitation n'est pas pressee. */
  .go-inst{display:none}
  .stage-go{padding-bottom:16px}
  /* viewport-fit=cover donne l'ecran ENTIER a la page, encoche comprise. Les
     fonds doivent le remplir — c'est tout l'objet — mais le texte et les
     boutons, non : on leur rend la marge de securite quand elle depasse la
     gouttiere. Hors iPhone a encoche, env() vaut 0 et rien ne bouge. */
  .page.is-on[id$="rush"] .fn-in,
  .page.is-on[id$="rush"] .rush-bar{
    padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
    padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
}
/* Le bouton doit rester atteignable pour ressortir : la scene couvre tout. */
.rush-fs .fs-i{margin-right:.4em}
/* En paysage, l'encoche est sur un COTE : sans le retrait de droite, la
   pastille de sortie se retrouvait dessous. Ces env() ne valent quelque chose
   que depuis que la page du jeu demande viewport-fit=cover (voir seo.py). */
body.jeu-plein-cadre .rush-fs{position:fixed;z-index:10000;
  right:calc(env(safe-area-inset-right,0px) + 12px);
  top:calc(env(safe-area-inset-top,0px) + 12px);width:auto}
.stage:fullscreen iframe{border-radius:0}
@media (max-width:768px){ .rush-bar{gap:10px} .rush-fs{width:100%;justify-content:center} }
@media (hover:none) and (pointer:coarse){
  /* Sur tactile, l'affiche EST le bouton de lancement. Laisser en plus le
     bouton de la barre donnait deux commandes pour la meme chose, et la
     mauvaise gagnait : il passait en plein cadre sans marquer la partie
     commencee, donc l'affiche couvrait tout l'ecran pendant que le jeu
     chargeait invisible derriere. Poki n'en montre qu'une. Ici le bouton de
     la barre ne sert plus qu'a RESSORTIR, une fois le jeu lance. */
  .rush-fs{display:none}
  /* pastille ronde a l'icone seule, comme le bouton de retour de Poki */
  body.jeu-plein-cadre .rush-fs .fs-t{display:none}
  body.jeu-plein-cadre .rush-fs .fs-i{margin:0}
  body.jeu-plein-cadre .rush-fs{border-radius:999px;padding:0;line-height:1;
    width:40px;height:40px;display:grid;place-items:center;opacity:.82}
}


/* ligne de format sous un titre de serie */
.fmt{font-family:var(--display);font-size:clamp(13px,1.05vw,15px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);opacity:.85;margin:-18px 0 22px}
.as-crows .fmt{margin:-18px 0 22px}
.bg-yellow .fmt{color:var(--purple)}

/* lien discret vers « Pour les parents », sous le jeu */
.rush-par{margin-left:auto;font-size:13px;opacity:.85;text-underline-offset:3px}
.rush-par:hover{opacity:1}
@media (max-width:768px){ .rush-par{margin-left:0;width:100%;text-align:center} }

/* ---- bloc « activités » de l'accueil ----
   Bleu, comme la page vers laquelle il mène : on reconnaît la destination avant
   d'y arriver. Titre en violet et texte en blanc, comme sur cette page-là — le
   blanc sur ce bleu ne passerait pas en petit corps. */
.fn-act{background:var(--blue)}
.fn-act .fn-in{padding-block:clamp(44px,5vw,72px);text-align:center}
.fn-act .eyebrow{color:var(--purple)}
.fn-act h2{color:var(--purple)}
.fn-act .fn-lede{margin:18px auto 0;color:var(--white)}
.fn-act .cta-row{justify-content:center}
.act-strip{display:flex;gap:clamp(12px,2vw,22px);justify-content:center;flex-wrap:wrap;
  margin:30px 0 6px}
.act-strip figure{margin:0;width:min(210px,27vw);background:var(--white);border-radius:10px;
  padding:8px;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.act-strip img{border-radius:4px}
@media (max-width:640px){ .act-strip figure:nth-child(3){display:none} }

/* ---------- bandeau de consentement (logique : consent.py) ----------
   Une barre, pas une fenetre modale : rien n'est assombri, rien n'est bloque,
   le site reste lisible et utilisable pendant qu'elle est la. C'est ce qui la
   rend discrete, et c'est aussi ce qui la rend legale — un mur qui empeche de
   lire tant qu'on n'a pas accepte n'est pas un consentement libre.

   z-index 150 : au-dessus de l'entete (100), sous la lightbox video (200).

   Les deux boutons ont le MEME poids : meme taille, meme police, meme place.
   Refuser doit couter exactement un clic, comme accepter. Ils se distinguent
   par le remplissage et par le crochet du choix courant — jamais par la seule
   couleur (voir aussi .is-current ci-dessous). */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--purple);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 20px;padding:11px clamp(14px,3vw,28px);
  font-size:clamp(13px,1.05vw,15px);line-height:1.4;
  box-shadow:0 -2px 14px rgba(0,0,0,.22);
  animation:cbar-up .3s ease both}
@keyframes cbar-up{from{transform:translateY(100%)}to{transform:none}}
.cbar-t{max-width:70ch}
.cbar a{color:#fff;text-underline-offset:3px}
.cbar-b{display:flex;gap:10px;flex-shrink:0}
.cbtn{font-family:var(--body);font-weight:700;font-size:inherit;line-height:1;
  cursor:pointer;border-radius:999px;padding:8px 20px;
  border:2px solid #fff;background:transparent;color:#fff}
.cbtn-ok{background:var(--pink);border-color:var(--pink)}
.cbtn:hover{filter:brightness(1.15)}
/* Le choix deja fait se lit au crochet, pas a la teinte. */
.cbtn.is-current::before{content:"\2713\00a0"}
.lnk-consent{font:inherit;font-size:12px;color:inherit;background:none;border:0;
  padding:0;cursor:pointer;opacity:.85;text-decoration:none}
.lnk-consent:hover{opacity:1;text-decoration:underline}
@media (max-width:640px){
  .cbar{gap:8px;padding:10px 14px 12px}
  .cbar-t{flex:1 1 100%}
  .cbar-b{width:100%}
  .cbtn{flex:1 1 0;padding:10px 12px}
}

.series-awards{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px;font-size:15px;line-height:1.4}
.series-awards li{display:flex;align-items:flex-start;gap:10px}
.series-awards li>span{color:#593f20;font-size:19px}
.series-awards a{color:inherit;text-decoration:none}
.series-awards a span{display:block;font-size:.9em}
.series-awards a:hover strong{text-decoration:underline;text-underline-offset:3px}
.series-awards a:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:2px}