/* XPANSION — retours de Yannick du 06/10/2026, préparés le 07/10/2026 (relais Codex → Claude).
   Feuille chargée EN DERNIER. Elle ne remplace aucun fichier partagé (cinema.css, branding.css, styles.css,
   xp-apple.css restent intacts) : retirer sa balise <link> suffit à annuler tout l'habillage ci-dessous.
   Sommaire : 1 bandeau · 2 hero en vrai texte · 3 promesses · 4 Mission XPANSION · 5 jeu annoncé · 6 histoire */

/* ───────── 1. Bandeau noir pleine largeur, logo officiel, navigation alignée sur le contenu ───────── */
body>.masthead{--xr-bord:max(clamp(22px,5vw,80px),calc((100vw - 1440px)/2 + 80px));
  margin:0!important;max-width:none;width:100%;height:auto;min-height:84px;box-sizing:border-box;
  padding:14px var(--xr-bord);border-bottom:0;gap:18px;background:#080a0d}
.xr-brand{display:block;flex:none;line-height:0;border-radius:6px}
.xr-brand img{display:block;height:46px;width:auto;aspect-ratio:3949/1173}
.xr-brand:focus-visible{outline:3px solid #fff;outline-offset:6px}
body>.masthead nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
body>.masthead .nav-link{color:#fff;text-decoration:none;white-space:nowrap}
body>.masthead .nav-link:hover{text-decoration:underline;text-underline-offset:5px}
body>.masthead .xr-ya{color:#b9b9c0}
@media (max-width:900px){body>.masthead .xr-ya{display:none}}
@media (max-width:540px){body>.masthead{min-height:66px;padding-block:10px}.xr-brand img{height:34px}
  body>.masthead .button{min-width:0;min-height:42px;font-size:11.5px;padding:0 14px}}
@media (max-width:350px){.xr-brand img{height:29px}body>.masthead .button{padding:0 11px;font-size:11px}}

/* ───────── 2. Hero : la même scène, mais le texte est du vrai texte (modifiable dans le HTML) ───────── */
.xr-hero{--xr-bord:max(clamp(22px,5vw,80px),calc((100% - 1440px)/2 + 80px))}
@media (min-width:1921px){.xr-stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}}
.xr-stage{position:relative;overflow:hidden;background:#050608}
.xr-art{display:block;width:100%}
.xr-art img{display:block;width:100%;height:auto;aspect-ratio:1732/908;object-fit:cover}
.xr-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,8,.82) 0,rgba(5,6,8,.55) 34%,rgba(5,6,8,0) 58%)}
.xr-copy{position:absolute;z-index:1;inset-block:0;left:var(--xr-bord);width:min(56%,860px);
  display:flex;flex-direction:column;justify-content:center;color:#fff}
.xr-h1{margin:0;font:700 clamp(38px,6.3vw,112px)/.95 Poppins,sans-serif;letter-spacing:-.035em;text-transform:uppercase;color:#fff;
  text-shadow:0 6px 28px rgba(0,0,0,.55)}
.xr-h1 span{display:block}
.xr-h1 .xr-rouge{color:#ff2536;text-shadow:0 0 34px rgba(255,37,54,.55),0 6px 28px rgba(0,0,0,.5)}
.xr-triade{text-wrap:balance;margin:.95em 0 0;font:600 clamp(17px,2vw,31px)/1.25 Poppins,sans-serif;letter-spacing:-.01em;color:#fff}
.xr-capitalise{margin:.75em 0 0;max-width:30em;font:400 clamp(15px,1.3vw,20px)/1.5 "DM Sans",sans-serif;color:#e9e6e0}
.xr-capitalise strong{font-family:Poppins,sans-serif;font-weight:600;color:#fff;letter-spacing:.01em}
.xr-hero .cinema-action{padding-inline:var(--xr-bord)}
.xr-hero .cinema-action p strong{font-family:Poppins,sans-serif;font-weight:600}
/* entrée en scène, ligne par ligne */
.xr-h1 span,.xr-triade,.xr-capitalise{opacity:0;transform:translateY(26px);animation:xrMonte .9s cubic-bezier(.2,.8,.2,1) forwards}
.xr-h1 span:nth-child(1){animation-delay:.10s}.xr-h1 span:nth-child(2){animation-delay:.22s}
.xr-h1 span:nth-child(3){animation-delay:.34s}.xr-h1 span:nth-child(4){animation-delay:.50s}
.xr-triade{animation-delay:.78s}.xr-capitalise{animation-delay:.94s}
@keyframes xrMonte{to{opacity:1;transform:none}}
@media (max-width:1000px){.xr-capitalise{font-size:15px;max-width:26em}}
@media (max-width:700px){
  .xr-stage{display:flex;flex-direction:column}
  .xr-stage::after{inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,rgba(5,6,8,0),rgba(5,6,8,.85))}
  .xr-copy{position:static;order:-1;width:auto;padding:30px 22px 14px;box-sizing:border-box;
    background:radial-gradient(120% 90% at 100% 100%,rgba(160,14,31,.38),rgba(5,6,8,0) 62%)}
  .xr-h1{font-size:clamp(34px,11vw,60px)}
  .xr-triade{font-size:clamp(17px,5vw,22px)}
  .xr-capitalise{font-size:16px;max-width:none}
  .xr-art img{aspect-ratio:1016/908}
}
@media (prefers-reduced-motion:reduce){.xr-h1 span,.xr-triade,.xr-capitalise{opacity:1;transform:none;animation:none}}

/* ───────── 3. Sous le hero : il ne reste que les trois promesses ───────── */
.cinema-intro.xr-intro{padding-block:clamp(40px,5vw,64px)}
.cinema-intro.xr-intro .hero-promesses{margin-top:0}

/* ───────── 4. Mission XPANSION ───────── */
.xr-mission{background:#f5f5f7;padding:clamp(72px,9vw,130px) clamp(24px,5.55vw,80px)}
.xr-mission-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.xr-mission-art{display:block;border-radius:28px;overflow:hidden;background:#0b0b10;box-shadow:0 40px 90px -50px rgba(0,0,0,.65);line-height:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.xr-mission-art img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.xr-mission-art:hover{transform:translateY(-6px) scale(1.01)}
.xr-mission p.xr-mission-k{margin:0 0 16px;font:600 13px/1.3 Poppins,sans-serif;letter-spacing:.16em;color:#E40D1A;text-transform:uppercase}
.xr-mission h2{margin:0;font:700 clamp(30px,3.6vw,52px)/1.06 Poppins,sans-serif;letter-spacing:-.03em;color:#191919}
.xr-mission h2 .red{color:#E40D1A}
.xr-mission p{margin:20px 0 0;font:400 clamp(16px,1.3vw,19px)/1.6 "DM Sans",sans-serif;color:#333}
.xr-mission p strong{font-family:Poppins,sans-serif;font-weight:600;color:#191919}
.xr-mission .xr-mission-note{font-size:15px;color:#666}
.xr-mission .button{margin-top:28px;border-radius:999px}
@media (max-width:900px){.xr-mission-in{grid-template-columns:1fr}.xr-mission-art{border-radius:20px}}
@media (max-width:540px){.xr-mission .button{width:100%;box-sizing:border-box}}
@media (prefers-reduced-motion:reduce){.xr-mission-art{transition:none}.xr-mission-art:hover{transform:none}}

/* ───────── 5. Le jeu : annoncé, règle visible AVANT, chrono au départ volontaire ───────── */
.xa-jeu-zone{cursor:default}
.xa-jeu.joue .xa-jeu-zone{cursor:crosshair}
.xa-start{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:22px 20px;text-align:center;color:#fff;
  background:radial-gradient(90% 80% at 50% 45%,rgba(15,15,16,.66),rgba(15,15,16,.9));
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),visibility .5s}
.xa-jeu.joue .xa-start{opacity:0;visibility:hidden;pointer-events:none}
.xa-start-k{margin:0;font:600 13px/1 Poppins,sans-serif;letter-spacing:.18em;color:#ff5a63}
.xa-regles{list-style:none;counter-reset:xr;margin:0;padding:0;display:grid;gap:11px;max-width:430px;text-align:left}
.xa-regles li{counter-increment:xr;display:flex;align-items:flex-start;gap:12px;font:500 16.5px/1.4 "DM Sans",sans-serif;color:#ececf1}
.xa-regles li::before{content:counter(xr);flex:none;width:26px;height:26px;border-radius:50%;background:#E40D1A;color:#fff;
  font:700 13px/26px Poppins,sans-serif;text-align:center}
.xa-regles li:nth-child(2)::before{background:#1D6EE8}
.xa-regles li:nth-child(3)::before{background:#fff;color:#191919}
.xa-start .xa-jouer{min-width:0;min-height:56px;padding:0 30px;border-radius:999px;cursor:pointer;font-size:16px}
.xa-start .xa-jouer:focus-visible{outline:3px solid #fff;outline-offset:4px}
.xa-start-s{margin:0;font:400 14px/1.4 "DM Sans",sans-serif;color:#a1a1a6}
/* la règle arrive ligne par ligne quand le jeu entre à l'écran */
.xa-start>*,.xa-regles li{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.xa-start>.xa-regles{opacity:1;transform:none}
.xa-start.vu>*,.xa-start.vu .xa-regles li{opacity:1;transform:none}
.xa-start.vu .xa-regles li:nth-child(1){transition-delay:.25s}.xa-start.vu .xa-regles li:nth-child(2){transition-delay:.6s}
.xa-start.vu .xa-regles li:nth-child(3){transition-delay:.95s}.xa-start.vu .xa-jouer{transition-delay:1.35s}.xa-start.vu .xa-start-s{transition-delay:1.6s}
.xa-jeu:not(.joue) .xa-jeu-hud{opacity:0}
.xa-jeu-hud{transition:opacity .4s}
.xa-compte{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;pointer-events:none;
  font:700 clamp(96px,17vw,180px)/1 Poppins,sans-serif;letter-spacing:-.04em;color:#fff;text-shadow:0 0 60px rgba(228,13,26,.6)}
.xa-jeu.decompte .xa-compte{display:flex}
.xa-compte.bat{animation:xrBat .62s cubic-bezier(.2,.8,.2,1) both}
@keyframes xrBat{0%{opacity:0;transform:scale(1.7)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.82)}}
.xa-jeu-fin p.xa-reveal{margin:0 0 20px;font:700 clamp(30px,4.3vw,62px)/1.04 Poppins,sans-serif;letter-spacing:-.03em;text-transform:uppercase;color:#fff}
.xa-jeu-fin p.xa-reveal b{color:#5b9bff}
.xa-jeu.gagne .xa-reveal{animation:xaPop .7s cubic-bezier(.3,1.6,.5,1) both}
.xa-jeu.gagne .xa-jeu-fin{max-height:980px}
@media (max-width:640px){.xa-start{gap:14px;padding:18px 16px}.xa-regles{gap:9px}.xa-regles li{font-size:15px}.xa-start .xa-jouer{width:100%;max-width:300px;padding:0 16px}}
@media (prefers-reduced-motion:reduce){.xa-start>*,.xa-regles li{opacity:1;transform:none;transition:none}.xa-compte.bat,.xa-jeu.gagne .xa-reveal{animation:none}}

/* ───────── 6. Mon histoire : le « 11 millions » lisible, et la vraie photo de scène ───────── */
.xa-gal .xa-gflow .xa-num,.xa-gal .xa-gs .xa-num{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  color:#fff!important;-webkit-text-fill-color:#fff;font-weight:700}
.xa-gal .xa-gflow .xa-fort{font-weight:700;color:#fff}
.xa-gal .xa-gcard.xr-foule:first-child{background:#0b0b10}
.xa-gal .xa-gcard.xr-foule:first-child>img{object-fit:cover!important;object-position:center 55%!important;
  width:100%!important;height:100%!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
  opacity:1!important;filter:none!important}
.xa-gal .xa-gcard.xr-foule:first-child::after{background:linear-gradient(90deg,rgba(0,0,0,.86) 0,rgba(0,0,0,.66) 36%,rgba(0,0,0,.12) 62%,rgba(0,0,0,0) 78%)}
.xr-credit{position:absolute;z-index:2;right:16px;bottom:12px;margin:0;font:400 11px/1.2 "DM Sans",sans-serif;color:rgba(255,255,255,.62)}
@media (max-width:700px){
  .xa-gal .xa-gcard.xr-foule:first-child>img{object-position:54% 40%!important}
  .xa-gal .xa-gcard.xr-foule:first-child::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.72) 44%,rgba(0,0,0,.9) 100%)}
}

/* Alternative clavier : mêmes éclats, progression annoncée, sans record de vitesse. */
.xa-start .xa-jouer-clavier{min-height:44px;padding:8px 20px;font-size:14px;cursor:pointer}
.xa-clavier{display:none;text-align:center;margin:20px auto;max-width:100%}
.xa-jeu.mode-clavier.joue:not(.gagne) .xa-clavier{display:block}
.xa-clavier-progres{font:400 15px/1.5 "DM Sans",sans-serif;color:#ddd;margin:12px 0}
.xa-rassembler{cursor:pointer;max-width:100%}
.xa-rassembler:focus-visible,.xa-jouer-clavier:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* Les citations courtes gardent leur hauteur propre. */
.xa .testimonials-grid{align-items:flex-start}

/* Retours 13h45 — header only; the official logo and all body interactions stay intact. */
body>.masthead nav{font:500 13px/1.35 'DM Sans',sans-serif}
@media(max-width:540px){body>.masthead nav>.nav-link[href="#programmes"]{display:none}body>.masthead nav{gap:10px}}