/* Rafale – vitrine (Usine DEV, 15/11/2026). DA « niveau studio » : Nuit, Crème, Carbone, Braise ; accent Orange. */
@font-face{font-family:"Bebas Neue";src:url(/assets/fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --nuit:#0A0A0B; --creme:#F0ECE4; --carbone:#17171A; --braise:#FF5014; --orange:#FF9632; --sable:#B7B2A8;
  --titre:"Bebas Neue","Oswald",Impact,sans-serif; --texte:"Inter",system-ui,-apple-system,sans-serif;
  --gouttiere:clamp(20px,6vw,72px); --lent:cubic-bezier(.22,.61,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--nuit);color:var(--creme);font:300 16px/1.55 var(--texte);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
em{font-style:normal;color:var(--orange)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:-999px;top:8px;z-index:100;background:var(--creme);color:var(--nuit);padding:10px 14px;border-radius:6px}
.saut:focus{left:8px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* fonds */
.nuit{background:var(--nuit);color:var(--creme)}
.creme{background:var(--creme);color:var(--nuit)}
.carbone{background:var(--carbone);color:var(--creme)}
.braise{background:var(--braise);color:var(--nuit)}
.creme em{color:#C93A06} /* Braise assombrie : contraste lisible sur Crème */

/* barre de progression + en-tête */
.progres{position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none}
.progres span{display:block;height:100%;width:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}
.entete{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:max(12px,env(safe-area-inset-top)) var(--gouttiere) 12px;color:var(--creme);
  background:rgba(10,10,11,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(240,236,228,.06)}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px/1 var(--titre);letter-spacing:.06em}
.marque img{border-radius:8px}
.entete-cta{font:500 13px/1 var(--texte);letter-spacing:.04em;text-decoration:none;padding:15px 0 12px;border-bottom:1px solid currentColor}

/* petits repères de studio */
.etiquette{font:500 12px/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;color:var(--sable);display:flex;gap:12px;align-items:center}
.etiquette span{color:var(--orange)}
.creme .etiquette{color:inherit;opacity:.75}.braise .etiquette{color:var(--nuit)}
.braise .etiquette span{color:var(--nuit)}
.titre-section{font:400 clamp(56px,15vw,168px)/.86 var(--titre);letter-spacing:.005em;margin:18px 0 0}

/* ── INTRO ─────────────────────────────────────────────────────────── */
.intro{position:relative;min-height:100svh;overflow:hidden}
.intro-scene{position:relative;height:100svh;padding:96px var(--gouttiere) 40px;display:flex;flex-direction:column}
.intro-titre{font:400 clamp(58px,16vw,190px)/.86 var(--titre);margin-top:18px;max-width:11ch;position:relative;z-index:3}
.pile{position:absolute;left:50%;bottom:14svh;width:min(78vw,360px);height:230px;transform:translateX(-50%);z-index:2}
.carte-abo{position:absolute;inset:auto 0 0;height:120px;padding:16px 18px;border-radius:14px;background:var(--carbone);
  border:1px solid #2a2a2f;display:grid;grid-template-columns:1fr auto;align-content:space-between;
  transform:translateX(var(--x,0)) rotate(var(--r,0));box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.carte-abo:nth-child(1){bottom:0}.carte-abo:nth-child(2){bottom:26px}.carte-abo:nth-child(3){bottom:52px}
.carte-abo:nth-child(4){bottom:78px}.carte-abo:nth-child(5){bottom:104px}
.carte-abo small{grid-column:1/-1;font:500 11px/1 var(--texte);letter-spacing:.16em;text-transform:uppercase;color:var(--sable)}
.carte-abo b{font:400 30px/1 var(--titre);letter-spacing:.01em}
.carte-abo i{font:300 13px/1 var(--texte);color:var(--sable);align-self:end;font-style:normal}
.carte-rafale{background:var(--braise);border-color:var(--braise);color:var(--nuit);bottom:44px;opacity:0;transform:scale(.8)}
.carte-rafale small,.carte-rafale i{color:var(--nuit);opacity:.75}
.carte-rafale b{font-size:44px}
.compteur{position:absolute;right:var(--gouttiere);top:42svh;display:flex;align-items:center;gap:10px;z-index:3}
.compteur b{font:400 clamp(72px,18vw,150px)/.8 var(--titre);color:var(--orange);min-width:.6em;text-align:right}
.compteur span{font:400 13px/1.2 var(--texte);color:var(--sable);letter-spacing:.04em}
.balai{position:absolute;top:50%;left:0;width:100%;height:0;z-index:4;pointer-events:none;opacity:0}
.balai img{position:absolute;right:0;top:-60px;width:120px;height:120px;filter:drop-shadow(0 0 28px rgba(255,80,20,.6))}
.trainee{position:absolute;right:100px;top:-14px;height:28px;width:120vw;border-radius:28px;
  background:linear-gradient(90deg,rgba(255,80,20,0),rgba(255,80,20,.35) 55%,var(--braise));filter:blur(2px)}
.intro-fin{position:absolute;left:var(--gouttiere);right:var(--gouttiere);top:30svh;z-index:3;
  font:400 clamp(54px,15vw,170px)/.88 var(--titre);opacity:0}
.indice{position:absolute;left:var(--gouttiere);bottom:22px;font:500 11px/1 var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--sable)}

/* sans animation (ou sans JS) : état final lisible */
.statique .carte-abo{opacity:.35}
.statique .carte-rafale{opacity:1;transform:none;bottom:120px}
.statique .intro-fin{position:relative;top:auto;left:auto;right:auto;opacity:1;margin-top:24px}
.statique .balai,.statique .compteur{display:none}

/* ── VIDÉO ─────────────────────────────────────────────────────────── */
.video{padding:56px var(--gouttiere)}
.cadre-video{aspect-ratio:16/9;width:100%;max-width:1100px;margin:auto;border-radius:12px;overflow:hidden;background:var(--nuit);
  border:1px solid #2a2a2f;position:relative}
.cadre-video video{width:100%;height:100%;object-fit:cover}
.video-attente{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;
  background:radial-gradient(120% 80% at 80% 110%,rgba(255,80,20,.22),transparent 60%)}
.video-attente img{border-radius:12px}
.video-attente p{font-size:14px;color:var(--sable);max-width:22ch}
.video-attente b{display:block;font:400 30px/1 var(--titre);color:var(--creme);letter-spacing:.01em}

/* ── RAFALE GÉANT + TÉLÉPHONE ──────────────────────────────────────── */
.geant{position:relative;min-height:112svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 0}
.mot-geant{position:absolute;top:50%;left:0;transform:translateY(-62%);white-space:nowrap;
  font:400 clamp(220px,62vw,720px)/.8 var(--titre);color:var(--nuit);letter-spacing:-.01em;padding-left:4vw;will-change:transform}
.telephone{position:relative;z-index:2;width:min(50vw,250px);aspect-ratio:9/19;border-radius:42px;background:#050506;padding:10px;
  box-shadow:0 50px 80px -30px rgba(10,10,11,.6),inset 0 0 0 1.5px #2b2b30}
.ecran{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:var(--nuit)}
.reel-fond{position:absolute;inset:0;overflow:hidden}
.reel-fond span{position:absolute;border-radius:50%;filter:blur(30px);opacity:.85;animation:flotte 9s var(--lent) infinite alternate}
.reel-fond span:nth-child(1){width:90%;height:50%;left:-20%;top:8%;background:var(--braise)}
.reel-fond span:nth-child(2){width:70%;height:40%;right:-25%;top:40%;background:var(--orange);animation-delay:-3s}
.reel-fond span:nth-child(3){width:80%;height:35%;left:5%;bottom:-8%;background:#3a1a0e;animation-delay:-6s}
@keyframes flotte{to{transform:translate(12%,-8%) scale(1.15)}}
.reel-haut{position:absolute;top:18px;left:16px;font:600 15px/1 var(--texte);color:#fff}
.reel-cote{position:absolute;right:12px;bottom:110px;display:flex;flex-direction:column;gap:16px}
.reel-cote i{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
.reel-bas{position:absolute;left:14px;right:52px;bottom:70px;color:#fff;font-size:12px;line-height:1.35}
.reel-bas b{display:block;font-weight:600;font-size:13px}
.reel-com,.reel-dm{position:absolute;left:12px;right:12px;font-size:12px;line-height:1.35;border-radius:14px;padding:9px 11px}
.reel-com{bottom:24px;background:rgba(10,10,11,.72);color:#fff;backdrop-filter:blur(6px)}
.reel-com b{font-weight:600;margin-right:4px}
.reel-dm{top:46px;background:var(--creme);color:var(--nuit);box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.reel-dm small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:2px}
.geant-titre{position:relative;z-index:3;margin-top:36px;text-align:center;font:400 clamp(48px,12vw,120px)/.9 var(--titre);padding:0 var(--gouttiere)}

/* ── POURQUOI ──────────────────────────────────────────────────────── */
.pourquoi{padding:110px var(--gouttiere) 90px}
.raisons{list-style:none;margin-top:56px;display:flex;flex-direction:column}
.raison{display:grid;grid-template-columns:1fr;gap:10px;align-items:baseline;padding:28px 0;border-top:1px solid #2e2e33}
.raison:last-child{border-bottom:1px solid #2e2e33}
.raison-n{font:400 clamp(76px,22vw,220px)/.8 var(--titre);color:var(--orange)}
.raison p{font-size:17px;color:var(--sable);max-width:34ch}
.raison b{display:block;font-weight:500;color:var(--creme);font-size:19px;margin-bottom:4px}

/* ── CHAPITRES ─────────────────────────────────────────────────────── */
.chapitre{position:relative;min-height:100svh;padding:100px var(--gouttiere) 80px;display:grid;
  grid-template-rows:auto auto 1fr auto;overflow:hidden}
.ch-num{font:400 clamp(120px,40vw,420px)/.75 var(--titre);color:transparent;-webkit-text-stroke:1px var(--orange);opacity:.9}
.creme .ch-num{-webkit-text-stroke-color:var(--braise)}
.ch-titre{font:400 clamp(60px,16vw,180px)/.86 var(--titre);margin-top:-.32em;position:relative}
.ch-visuel{align-self:center;margin:44px 0;min-height:200px;position:relative}
.ch-texte{font-size:17px;max-width:38ch;color:var(--sable)}
.creme .ch-texte{color:#4a4741}

/* 01 publier */
.v-publier{display:flex;flex-direction:column;gap:22px}
.horloge b{font:400 clamp(80px,24vw,200px)/.8 var(--titre);color:var(--creme)}
.horloge span{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sable);margin-top:6px}
.reseaux{list-style:none;display:flex;flex-direction:column;border-top:1px solid #2a2a2f}
.reseaux li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #2a2a2f;font:400 28px/1 var(--titre);letter-spacing:.02em}
.reseaux i{font:500 12px/1 var(--texte);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);align-self:center}
.reseaux .bientot i{color:var(--sable)}

/* 02 heures */
.heures{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:150px;align-items:end}
.heures span{display:block;height:100%;border-radius:3px;background:rgba(10,10,11,.1);transform-origin:50% 100%}
.heures span.on{background:var(--braise)}
.heures-legende{display:flex;justify-content:space-between;font-size:12px;color:#6b675f;margin-top:10px}

/* 03 DM */
.v-dm{display:flex;flex-direction:column;gap:14px}
.bulle{max-width:78%;padding:14px 16px;border-radius:20px;font-size:17px}
.bulle small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:3px}
.bulle-com{background:#25252a;border-bottom-left-radius:6px}
.bulle-dm{align-self:flex-end;background:var(--creme);color:var(--nuit);border-bottom-right-radius:6px}
.chrono{display:flex;align-items:baseline;gap:8px;align-self:center}
.chrono b{font:400 clamp(130px,42vw,360px)/.8 var(--titre);color:var(--orange)}
.chrono span{font:400 clamp(44px,12vw,100px)/1 var(--titre);color:var(--sable)}

/* 04 essais */
.course{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:250px;align-items:end}
.couloir{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px}
.couloir span{width:100%;height:var(--h);background:#2a2a30;border-radius:6px 6px 0 0;transform-origin:50% 100%}
.couloir.gagne span{background:var(--braise)}
.couloir b{font:400 30px/1 var(--titre);color:var(--sable)}
.couloir.gagne b{color:var(--orange)}
.moyenne{position:absolute;left:-4px;right:-4px;bottom:calc(40px + (100% - 40px)*.7);border-top:1px dashed var(--sable)}
.moyenne i{position:absolute;right:0;top:-22px;font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sable)}

/* 05 page */
.entonnoir{list-style:none;display:flex;flex-direction:column;gap:8px}
.entonnoir li{width:var(--w);background:var(--nuit);color:var(--creme);padding:14px 16px;border-radius:4px;transform-origin:0 50%;
  font:400 26px/1 var(--titre);letter-spacing:.02em}
.entonnoir li:last-child{background:var(--braise);color:var(--nuit)}

/* 06 alertes */
.v-alertes{display:flex;flex-direction:column;gap:10px;max-width:420px}
.notif{display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:13px 14px;border-radius:18px;background:rgba(240,236,228,.07);
  border:1px solid #2c2c31;backdrop-filter:blur(8px)}
.notif::before{content:"";grid-row:span 2;width:36px;height:36px;border-radius:10px;background:#0A0A0B url(/assets/logo.png) center/80% no-repeat}
.notif b{font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:8px}
.notif b small{font-weight:400;font-size:12px;color:var(--sable)}
.notif span{font-size:14px;color:var(--sable)}

/* ── PREUVES ───────────────────────────────────────────────────────── */
.preuves{padding:110px var(--gouttiere)}
.chiffres{list-style:none;margin-top:40px}
.chiffres li{padding:30px 0;border-top:1px solid #26262b}
.chiffres b{display:block;font:400 clamp(84px,25vw,260px)/.82 var(--titre);color:var(--creme);white-space:nowrap}
.chiffres li:nth-child(2) b{color:var(--orange)}
.chiffres span{display:block;font-size:16px;color:var(--sable);max-width:36ch;margin-top:10px}

/* ── LISTE D'ATTENTE ───────────────────────────────────────────────── */
.liste{padding:110px var(--gouttiere) 100px}
.liste-titre{font:400 clamp(64px,18vw,200px)/.85 var(--titre);margin-top:18px}
.liste-sous{font-size:19px;font-weight:500;margin-top:18px}
.formulaire{margin-top:36px;max-width:520px;display:flex;flex-direction:column;gap:14px}
.formulaire input[type=email]{width:100%;font:400 18px/1 var(--texte);padding:18px 18px;border-radius:10px;border:1.5px solid var(--nuit);
  background:rgba(240,236,228,.18);color:var(--nuit)}
.formulaire input[type=email]::placeholder{color:rgba(10,10,11,.55)}
.formulaire input[type=email]:focus{outline:none;background:var(--creme);box-shadow:0 0 0 3px var(--nuit)}
.accord{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.4;font-weight:400;cursor:pointer}
.accord input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--nuit)}
.formulaire button{font:400 26px/1 var(--titre);letter-spacing:.04em;padding:20px;border:0;border-radius:10px;background:var(--nuit);color:var(--creme);
  cursor:pointer;transition:transform .3s var(--lent)}
.formulaire button:active{transform:scale(.98)}
.formulaire button[disabled]{opacity:.6}
.message{min-height:1.5em;font-weight:500}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.liste-note{margin-top:40px;font-size:14px;max-width:44ch;font-weight:400}

/* ── PIED ──────────────────────────────────────────────────────────── */
.pied{padding:56px var(--gouttiere) calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;color:var(--sable);font-size:14px}
.pied img{border-radius:10px}
.pied nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pied a{text-decoration:none;border-bottom:1px solid #3a3a40;padding:13px 0}

/* ordinateur */
@media (min-width:900px){
  .intro-scene{padding-top:120px}
  .pile{left:auto;right:16%;transform:none;bottom:18svh}
  .compteur{top:auto;bottom:16svh;right:auto;left:var(--gouttiere)}
  .chapitre{grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;column-gap:6vw}
  .ch-num,.ch-titre,.ch-texte{grid-column:1}
  .ch-visuel{grid-column:2;grid-row:1/4;margin:0}
  .raison{grid-template-columns:30% 1fr}
  .chiffres{display:grid;grid-template-columns:1fr;}
}

/* page légale */
.legal{max-width:720px;margin:auto;padding:110px var(--gouttiere) 80px}
.legal h1{font:400 clamp(56px,14vw,120px)/.88 var(--titre)}
.legal .maj{color:var(--sable);font-size:13px;margin:14px 0 36px}
.legal h2{font:400 30px/1 var(--titre);letter-spacing:.02em;color:var(--orange);margin:36px 0 10px}
.legal p,.legal li{color:#d9d4ca;font-size:16px}
.legal ul{padding-left:20px;margin:8px 0}
.legal a{color:var(--creme)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}