/* Univers « Le Repère » — direction A d'Automotive EBM. La mise au point : le défilement tourne la bague.
   Claude Opus 5.5, bras d'Opus 5.5 Pilot, 24/09/2026. Direction de création : Fable 5.1 (§ 0 et § 1 A).
   Règles tenues : le texte n'est jamais flou ; sur téléphone, aucun flou animé sur une photo (deux images, fondu) ;
   prefers-reduced-motion : de simples fondus. */
@font-face{font-family:"Unbounded";src:url("../assets/fonts/Unbounded-wght.ttf") format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --nuit:#0E0D0C; --graphite:#1B1A18; --graphite-2:#24221F; --ivoire:#EEE9E1; --ivoire-2:rgba(238,233,225,.8); --fumee:#8B857C;
  --laiton:#B8995E; --braise:#D8401E; --jaune:#F5C21B; --encre:#151412; --papier:#F4F0EA;
  --pad:clamp(20px,5vw,88px);
  --t-geant:clamp(46px,8.4vw,150px); --t-titre:clamp(32px,4.6vw,78px); --t-sous:clamp(18px,1.55vw,26px);
  --t-texte:clamp(15px,1.12vw,18.5px); --t-petit:clamp(12.5px,.86vw,14px); --t-label:clamp(10.5px,.74vw,12px);
  --doux:cubic-bezier(.2,.7,.2,1); --mise:cubic-bezier(.86,0,.07,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nuit);scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--nuit);color:var(--ivoire);font-family:"Archivo",system-ui,sans-serif;font-size:var(--t-texte);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.u{font-family:"Unbounded",sans-serif}
.label{font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;color:var(--laiton);font-weight:600}
.mention{position:absolute;z-index:6;font-size:12.5px;color:rgba(238,233,225,.84);background:rgba(14,13,12,.66);border-left:2px solid var(--laiton);
  padding:5px 10px;letter-spacing:.01em;backdrop-filter:blur(4px)}
.jaune{color:var(--jaune)}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ le haut ============ */
.u-haut{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad) 14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,12,.72),rgba(14,13,12,0))}
.u-haut>*{pointer-events:auto}
.u-logo img{height:clamp(26px,2.6vw,36px);width:auto}
.u-outils{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px)}
.u-bouton{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(238,233,225,.24);
  background:rgba(14,13,12,.55);backdrop-filter:blur(8px);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  text-decoration:none;color:var(--ivoire);transition:border-color .3s,background .3s}
.u-bouton:hover{border-color:var(--ivoire)}
.u-bouton svg{width:16px;height:16px}
#son[aria-pressed="true"]{border-color:var(--laiton)}
#son .ondes{opacity:.25;transition:opacity .3s}
#son[aria-pressed="true"] .ondes{opacity:1}
.u-dossier small{font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--ivoire-2);font-size:11.5px}

/* ============ la bague (le défilement la fait tourner) ============ */
#bague{position:fixed;z-index:35;right:clamp(12px,1.6vw,26px);top:50%;height:min(62vh,560px);width:92px;transform:translateY(-50%);
  pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
#bague .rail{position:absolute;right:0;top:0;width:100%;will-change:transform}
#bague .grad{position:absolute;right:0;height:1px;background:rgba(238,233,225,.3)}
#bague .grad.maj{background:rgba(184,153,94,.75)}
#bague .chap-n{position:absolute;right:26px;transform:translateY(-50%);font-size:11px;letter-spacing:.14em;color:var(--fumee);font-weight:600;
  pointer-events:auto;cursor:pointer;transition:color .3s;white-space:nowrap}
#bague .chap-n.on{color:var(--ivoire)}
#bague .index{position:absolute;right:0;top:50%;width:30px;height:2px;margin-top:-1px;background:var(--ivoire);transition:background .15s}
#bague.cale .index{background:var(--braise)}
#bague-nom{position:fixed;z-index:35;right:calc(clamp(12px,1.6vw,26px) + 100px);top:50%;transform:translateY(-50%);font-size:var(--t-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-2);font-weight:600;pointer-events:none;opacity:0;transition:opacity .4s;text-align:right}
body.defile #bague-nom{opacity:1}

/* ============ le pointeur : un repère qui fait le point ============ */
#curseur{position:fixed;left:0;top:0;z-index:100;width:56px;height:56px;margin:-28px 0 0 -28px;pointer-events:none;opacity:0;
  transition:opacity .3s;filter:drop-shadow(0 0 1px rgba(0,0,0,.8)) drop-shadow(0 2px 6px rgba(0,0,0,.35))}
body.pointeur #curseur{opacity:1}
#curseur .anneau{transition:r .25s var(--doux),stroke-width .25s}
#curseur .ix{transition:transform .25s var(--doux)}
#curseur.vise .anneau{r:11}
#curseur.vise .ix{transform:scale(.72)}
#curseur .etiq{position:absolute;left:44px;top:17px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ivoire);white-space:nowrap;opacity:0;transition:opacity .2s}
#curseur.vise .etiq{opacity:1}
@media (pointer:fine){body.pointeur,body.pointeur a,body.pointeur button,body.pointeur .zoom{cursor:none}}

/* ============ chapitres ============ */
.chap{position:relative}
.chap.epingle{height:var(--h,220vh)}
.chap.epingle>.scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.chap.plein{min-height:100vh;min-height:100svh;padding:clamp(96px,14vh,150px) var(--pad) clamp(80px,12vh,130px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px)}
.entete{display:grid;gap:clamp(10px,1.6vh,18px);max-width:min(1100px,100%)}
.titre{font-family:"Unbounded";font-weight:300;font-size:var(--t-titre);line-height:1.04;letter-spacing:-.02em}
.titre strong{font-weight:500}
.chapo{font-size:var(--t-sous);line-height:1.38;color:var(--ivoire-2);max-width:40ch}
.chapo b{color:var(--ivoire);font-weight:600}
.note{font-size:var(--t-petit);color:var(--fumee);line-height:1.45;max-width:78ch}

/* ============ la mise au point d'une image : deux images, fondues ============ */
.mise{position:relative;overflow:hidden;background:#080807}
.mise>img,.mise>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.mise .flou{transform:scale(1.035)}
.mise .net{opacity:0;transform:scale(1.035);transition:opacity 1.05s var(--mise),transform 1.4s var(--doux)}
.mise.nette .net{opacity:1;transform:scale(1)}
.mise .loupe{opacity:0;transition:opacity .25s;clip-path:circle(60px at var(--mx,-200px) var(--my,-200px))}
.mise.sous-pointeur:not(.nette) .loupe{opacity:1}
.mise .af{position:absolute;inset:14%;z-index:3;pointer-events:none;opacity:0}
.mise .af i{position:absolute;width:22px;height:22px;border-color:var(--ivoire);border-style:solid;border-width:0}
.mise .af i:nth-child(1){left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.mise .af i:nth-child(2){right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.mise .af i:nth-child(3){left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.mise .af i:nth-child(4){right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.mise.verrouille .af{animation:af 1.1s var(--doux) both}
@keyframes af{0%{opacity:0;inset:4%}35%{opacity:1;inset:14%}70%{opacity:1;inset:14%}100%{opacity:0;inset:14%}}

/* ============ 1 · ouverture ============ */
#ouverture{height:100vh;height:100svh;min-height:560px;overflow:hidden}
#ouverture .mise{position:absolute;inset:0}
#ouverture .fondu{position:absolute;inset:0;z-index:2;background:
  linear-gradient(90deg,rgba(14,13,12,.9) 0%,rgba(14,13,12,.55) 34%,rgba(14,13,12,0) 62%),
  linear-gradient(0deg,rgba(14,13,12,.92) 0%,rgba(14,13,12,0) 38%)}
#ouverture .texte{position:absolute;z-index:4;left:var(--pad);bottom:clamp(92px,15vh,160px);max-width:min(760px,86vw);display:grid;gap:clamp(12px,2vh,22px)}
#ouverture h1{font-family:"Unbounded";font-weight:300;font-size:var(--t-geant);line-height:.96;letter-spacing:-.03em}
#ouverture .ligne{font-size:var(--t-sous);line-height:1.35;color:var(--ivoire)}
#ouverture .mention{right:var(--pad);bottom:28px}
.invite{position:absolute;z-index:4;left:var(--pad);bottom:28px;display:flex;align-items:center;gap:12px;font-size:var(--t-label);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ivoire-2);font-weight:600}
.invite svg{width:30px;height:30px}
.invite .tourne{transform-origin:15px 15px;transform-box:view-box}

/* ============ 2 · la mise au point (la scène du visiteur) ============ */
#mise-au-point .grille{position:absolute;inset:-2px;display:grid;grid-template-columns:repeat(var(--cols,8),1fr);grid-template-rows:repeat(var(--rows,6),1fr);gap:3px;background:#050505}
#mise-au-point .t{background-size:cover;background-position:center;transition:opacity .7s var(--doux),filter .7s var(--doux);opacity:.9}
#mise-au-point .t.eteinte{opacity:.07}
#mise-au-point .t.retenue{opacity:1;filter:brightness(1.25)}
#mise-au-point .voile{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(14,13,12,0) 25%,rgba(14,13,12,.55) 100%)}
#mise-au-point .compteur{position:absolute;z-index:5;left:var(--pad);top:clamp(86px,13vh,120px);display:grid;gap:6px}
#mise-au-point .compteur .n{font-family:"Unbounded";font-weight:300;font-size:clamp(46px,6vw,96px);line-height:1;letter-spacing:-.02em}
#mise-au-point .compteur .l{font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--laiton);font-weight:600}
#mise-au-point .anneau-scene{position:absolute;z-index:4;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#mise-au-point .revele{position:absolute;z-index:3;border-radius:50%;overflow:hidden;opacity:0;transition:opacity .9s var(--mise)}
#mise-au-point .revele img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
#mise-au-point.trouvee .revele{opacity:1}
#mise-au-point .signature{position:absolute;z-index:5;left:0;right:0;text-align:center;font-family:"Unbounded";font-weight:300;
  font-size:clamp(30px,4.4vw,72px);letter-spacing:-.02em;line-height:1}
#mise-au-point .signature .cur{display:inline-block;width:3px;height:.85em;background:var(--ivoire);margin-left:6px;vertical-align:-.05em;animation:clig 1s steps(2) infinite}
@keyframes clig{50%{opacity:0}}
#mise-au-point .fin-scene{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:clamp(30px,6vh,64px);display:flex;justify-content:space-between;
  align-items:flex-end;gap:20px;flex-wrap:wrap;opacity:0;transition:opacity .8s var(--doux)}
#mise-au-point.finie .fin-scene{opacity:1}
#mise-au-point .fin-scene p{font-size:var(--t-sous);line-height:1.35;max-width:34ch}
#mise-au-point .fin-scene p b{font-weight:600}
#mise-au-point .fin-scene .ex{font-size:var(--t-label);color:var(--fumee);letter-spacing:.12em;text-transform:uppercase}
#mise-au-point .consigne{position:absolute;z-index:5;right:var(--pad);top:clamp(92px,13.5vh,126px);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ivoire-2);font-weight:600;transition:opacity .5s}
#mise-au-point.finie .consigne{opacity:0}

/* ============ 3 · le logo vivant ============ */
#logo .scene{display:grid;place-items:center}
#logo .dessin{width:min(60vh,64vw);height:auto;overflow:visible}
#logo .marque{position:absolute;z-index:3;left:0;right:0;bottom:clamp(96px,16vh,170px);display:grid;justify-items:center;gap:12px;text-align:center;padding:0 var(--pad)}
#logo .mot{font-family:"Unbounded";font-weight:360;font-size:clamp(22px,3.1vw,52px);letter-spacing:var(--esp,.6em);padding-left:var(--esp,.6em);white-space:nowrap}
#logo .desc{font-size:clamp(9.5px,.9vw,14px);letter-spacing:.32em;text-transform:uppercase;color:var(--laiton);font-weight:600}
#logo .cote{position:absolute;z-index:3;left:var(--pad);top:clamp(96px,15vh,150px);max-width:34ch;display:grid;gap:10px}
#logo .petits{position:absolute;z-index:3;right:calc(var(--pad) + 110px);top:clamp(100px,16vh,160px);display:flex;gap:18px;align-items:flex-end}
#logo .petits figure{display:grid;gap:6px;justify-items:center;font-size:10.5px;color:var(--fumee);letter-spacing:.12em}
#logo .tourner{position:absolute;z-index:3;left:50%;transform:translateX(-50%);top:calc(50% + min(30vh,32vw) + 8px);font-size:var(--t-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--fumee);font-weight:600;display:none}
@media (pointer:fine){#logo .tourner{display:block}}

/* ============ 4 · Genius ============ */
#genius .corps-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(24px,4vw,70px);align-items:center}
#genius .gauche{display:grid;gap:clamp(14px,2.2vh,24px)}
#genius .etat-vif{display:flex;align-items:center;gap:18px}
#genius .etat-vif img{width:clamp(150px,13vw,210px);height:auto}
#genius .etat-vif small{display:block;font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--laiton);font-weight:600;margin-bottom:6px}
#genius .etat-vif span{font-family:"Unbounded";font-weight:400;font-size:clamp(17px,1.5vw,24px)}
.questions{display:grid;gap:10px}
.questions button{text-align:left;border:1px solid rgba(238,233,225,.24);border-radius:999px;padding:13px 20px;font-weight:500;
  font-size:clamp(14px,1.05vw,16.5px);display:flex;align-items:center;gap:12px;transition:background .25s,color .25s,border-color .25s}
.questions button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ivoire);flex:none}
.questions button:hover{border-color:var(--ivoire)}
.questions button.on{background:var(--ivoire);color:var(--nuit);border-color:var(--ivoire)}
.questions button.on::before{background:var(--nuit)}
.scenar{justify-self:start;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fumee);border:1px dashed rgba(139,133,124,.6);padding:7px 12px;border-radius:3px}
.fil{background:var(--graphite);border-radius:8px;padding:clamp(14px,1.6vw,26px);display:flex;flex-direction:column;gap:12px;min-height:min(460px,58vh);max-height:66vh;overflow:auto}
.msg{max-width:88%;padding:11px 15px;border-radius:16px;font-size:clamp(14px,1.02vw,16px);line-height:1.45;animation:app .35s var(--doux) both}
@keyframes app{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.client{align-self:flex-end;background:#2C2A26;border-bottom-right-radius:4px}
.msg.genius{align-self:flex-start;background:var(--nuit);border:1.5px solid var(--jaune);border-bottom-left-radius:4px}
.msg.genius .qui{display:flex;align-items:center;gap:8px;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--jaune);font-weight:600;margin-bottom:5px}
.msg.genius .qui img{width:20px;height:20px}
.msg.conseil{align-self:center;background:none;border:1px dashed rgba(184,153,94,.55);color:var(--laiton);font-size:var(--t-petit);text-align:center;max-width:94%}
.msg .cur{display:inline-block;width:2px;height:1em;background:var(--ivoire);vertical-align:-.15em;margin-left:2px;animation:clig 1s steps(2) infinite}
.etats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:clamp(18px,3vh,32px)}
.etats figure{background:var(--graphite);border-radius:6px;padding:10px 10px 12px;display:grid;gap:6px}
.etats img{width:100%;height:auto}
.etats figcaption{font-size:var(--t-label);letter-spacing:.1em;color:var(--ivoire-2);font-weight:600}

/* ============ 5 · la campagne en situation ============ */
#campagne .monde{position:absolute;inset:0;transform-origin:var(--ox,36%) var(--oy,31%);will-change:transform}
#campagne .monde video,#campagne .monde img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#campagne .plate{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:var(--nuit);opacity:0;pointer-events:none}
#campagne .plate img{width:min(92vw,calc((100svh - 150px) * 4 / 3));height:auto;box-shadow:0 30px 90px rgba(0,0,0,.6)}
#campagne .legende{position:absolute;z-index:5;left:var(--pad);bottom:clamp(28px,5vh,56px);display:grid;gap:8px;max-width:46ch}
#campagne .legende .titre{font-size:clamp(26px,3.4vw,56px)}
#campagne .mention{right:var(--pad);top:clamp(86px,12vh,110px)}
#campagne-suite .deux{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center}
.cadre-ban{background:var(--graphite);border-radius:8px;padding:clamp(12px,1.4vw,22px);display:grid;gap:12px;justify-items:center}
.cadre-ban .ban{position:relative;overflow:hidden;border-radius:3px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.cadre-ban iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0}
.cadre-ban .cap{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-2);font-weight:600}

/* ============ 6 · les réseaux ============ */
.ecrans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,34px);align-items:end}
.tel{position:relative;aspect-ratio:9/19.5;border-radius:clamp(22px,2.4vw,38px);border:clamp(5px,.55vw,9px) solid #1f1e1c;background:#000;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(238,233,225,.12)}
.tel img.defile{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}
.tel video,.tel .plein-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tel .stories img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.tel .stories img.on{opacity:1}
.tel .barres{position:absolute;z-index:2;left:8px;right:8px;top:8px;display:flex;gap:4px}
.tel .barres i{flex:1;height:2px;background:rgba(255,255,255,.35);overflow:hidden}
.tel .barres i b{display:block;height:100%;width:0;background:#fff}
.ecran-cap{margin-top:12px;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ivoire-2);font-weight:600;text-align:center}
.yt{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,2.4vw,40px);align-items:center;margin-top:clamp(22px,4vh,44px)}
.yt .chaine{border-radius:8px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.yt .pub{display:grid;gap:10px}
.yt video{width:100%;aspect-ratio:16/9;background:#000;border-radius:6px}

/* ============ 7 · une campagne par voiture ============ */
.pv{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.62fr);gap:clamp(16px,2.6vw,44px);align-items:center}
.affiche-3008{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.affiche-3008 .grille-f{position:absolute;inset:-4%;background-size:cover;background-position:center}
.affiche-3008 .lentille{position:absolute;border-radius:50%;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.affiche-3008 .lentille img{width:100%;height:100%;object-fit:cover}
.affiche-3008 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.affiche-3008 .txt{position:absolute;left:5%;top:7%;width:48%;display:grid;gap:3%}
.affiche-3008 .txt h3{font-family:"Unbounded";font-weight:300;font-size:clamp(20px,2.7vw,46px);line-height:1.06;letter-spacing:-.015em}
.affiche-3008 .txt p{font-size:clamp(11.5px,1vw,16px);line-height:1.45;color:var(--ivoire-2)}
.affiche-3008 .pied{position:absolute;left:5%;right:5%;bottom:5%;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.affiche-3008 .pied img{height:clamp(16px,1.9vw,30px);width:auto}
.affiche-3008 .pied span{font-size:clamp(8.5px,.72vw,11px);color:rgba(238,233,225,.8);background:rgba(14,13,12,.6);border-left:2px solid var(--laiton);padding:3px 7px}
.pv .story{border-radius:clamp(18px,2vw,30px);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);aspect-ratio:9/16;background:#000}
.pv .story img{width:100%;height:100%;object-fit:cover}
.principe{display:flex;gap:clamp(10px,1.6vw,22px);align-items:center;flex-wrap:wrap;font-size:var(--t-petit);color:var(--ivoire-2)}
.principe b{color:var(--ivoire);font-weight:600}
.principe i{font-style:normal;color:var(--laiton)}

/* ============ 8 · préparée, puis remise ============ */
#remise .plan{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--mise)}
#remise .plan.on{opacity:1}
#remise .plan .mise{position:absolute;inset:0}
#remise .fondu{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(14,13,12,.9) 0%,rgba(14,13,12,0) 42%),linear-gradient(180deg,rgba(14,13,12,.55) 0%,rgba(14,13,12,0) 26%)}
#remise .cartel{position:absolute;z-index:4;left:var(--pad);bottom:clamp(30px,7vh,76px);display:grid;gap:10px;max-width:min(40ch,86vw)}
#remise .cartel .titre{font-size:clamp(26px,3.6vw,60px)}
#remise .mention{right:var(--pad);top:clamp(86px,12vh,110px)}
#remise .points{position:absolute;z-index:4;right:var(--pad);bottom:clamp(30px,7vh,76px);display:flex;gap:8px}
#remise .points i{width:28px;height:2px;background:rgba(238,233,225,.3);transition:background .3s}
#remise .points i.on{background:var(--ivoire)}

/* ============ 9 · les objets ============ */
.objets{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.objets .o{position:relative;border-radius:6px;overflow:hidden;background:#0a0a09}
.objets .o1{grid-column:span 7;aspect-ratio:16/10}
.objets .o2{grid-column:span 5;aspect-ratio:16/12.4}
.objets .o3{grid-column:span 4;aspect-ratio:4/3}
.objets .o4{grid-column:span 4;aspect-ratio:4/3}
.objets .o5{grid-column:span 4;aspect-ratio:4/3}
.objets .o img,.objets .o video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.objets .o figcaption{position:absolute;z-index:3;left:12px;bottom:10px;right:12px;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ivoire);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.zoom{cursor:zoom-in}

/* ============ 10 · le livre du vendeur ============ */
.livre{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,32px);align-items:start}
.phrase-tel{border-left:2px solid var(--braise);padding:4px 0 4px 18px;display:grid;gap:10px}
.phrase-tel q{font-family:"Unbounded";font-weight:300;font-size:clamp(20px,1.9vw,32px);line-height:1.22;quotes:"«\00a0" "\00a0»"}
.bloc{background:var(--graphite);border-radius:6px;padding:clamp(14px,1.4vw,22px);display:grid;gap:9px}
.bloc h3{font-family:"Unbounded";font-weight:400;font-size:clamp(14.5px,1.1vw,18px)}
.bloc ul{list-style:none;display:grid;gap:8px;font-size:var(--t-petit);color:var(--ivoire-2);line-height:1.42}
.bloc li{padding-left:16px;position:relative}
.bloc li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--laiton)}
.bloc.non li{color:var(--fumee)}
.bloc.non li::before{background:var(--fumee)}
.bloc .obj{color:var(--ivoire);font-weight:600}
.bloc .g{color:var(--jaune)}

/* ============ 11 · la charte ============ */
.regles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.regle{background:var(--graphite);border-radius:6px;overflow:hidden;display:grid}
.regle .img{position:relative;aspect-ratio:1200/640;overflow:hidden}
.regle .img img{width:100%;height:100%;object-fit:cover}
.regle .img .non{position:absolute;top:0;right:0;width:50%;height:100%;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  background:rgba(14,13,12,0);transition:backdrop-filter .6s var(--mise),background .6s}
.regle:hover .img .non,.regle.touche .img .non{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(14,13,12,.35)}
.regle .t{padding:12px 14px 14px;display:grid;gap:5px}
.regle .t b{font-family:"Unbounded";font-weight:400;font-size:clamp(14px,1.05vw,17px)}
.regle .t span{font-size:var(--t-petit);color:var(--ivoire-2);line-height:1.38}
.regle .t span.nn{color:var(--fumee)}
.regle .t span i{font-style:normal;font-weight:600;color:var(--laiton);margin-right:6px}
.regle .t span.nn i{color:var(--fumee)}

/* ============ 12 · le site ============ */
.site-cadre{border-radius:10px;border:1px solid rgba(238,233,225,.14);background:linear-gradient(160deg,#171614,#0c0b0a);padding:clamp(18px,3vw,44px);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,36px);align-items:center}
.site-cadre img{height:clamp(46px,5vw,76px);width:auto}
.site-cadre ul{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.site-cadre li{border:1px solid rgba(238,233,225,.18);border-radius:999px;padding:6px 12px;font-size:var(--t-petit);color:var(--ivoire-2)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 26px;border-radius:999px;background:var(--ivoire);color:var(--nuit);
  font-weight:600;font-size:clamp(14px,1vw,16px);text-decoration:none;white-space:nowrap;transition:transform .25s var(--doux)}
.cta:hover{transform:translateY(-2px)}
.cta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--braise)}
.cta.second{background:none;color:var(--ivoire);border:1px solid rgba(238,233,225,.3)}
.cta.second::before{background:var(--ivoire)}

/* ============ 13 · la fin ============ */
#fin{text-align:center;align-items:center}
#fin .logo-fin{width:min(300px,60vw);height:auto}
#fin .sig{font-family:"Unbounded";font-weight:300;font-size:clamp(34px,5.4vw,92px);letter-spacing:-.02em;line-height:1}
#fin .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#fin .legal{font-size:11.5px;color:var(--fumee);max-width:70ch}

/* ============ la loupe (agrandir) ============ */
#agrandi{position:fixed;inset:0;z-index:90;background:rgba(6,6,5,.94);display:none;place-items:center;padding:5vh 4vw;cursor:zoom-out}
#agrandi.on{display:grid}
#agrandi img{max-width:100%;max-height:86vh;object-fit:contain}
#agrandi p{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:var(--t-petit);color:var(--fumee);padding:0 20px}

/* ============ entrées (le texte arrive net, tout de suite : seulement un glissé et un fondu courts) ============ */
.entre{opacity:0;transform:translateY(18px);transition:opacity .7s var(--doux),transform .7s var(--doux)}
.entre.vu{opacity:1;transform:none}

/* ============ téléphone ============ */
@media (max-width:760px){
  :root{--pad:18px;--t-titre:clamp(28px,8.2vw,38px);--t-sous:16.5px;--t-texte:15px;--t-petit:13px}
  .u-haut{padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
  .u-bouton{height:32px;padding:0 11px}
  .u-dossier .long,.u-dossier small{display:none}
  #bague{top:auto;bottom:0;right:0;left:0;width:auto;height:30px;transform:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);background:linear-gradient(0deg,rgba(14,13,12,.8),rgba(14,13,12,0))}
  #bague .rail{top:auto;bottom:0;height:100%;width:auto;right:auto;left:0}
  #bague .grad{bottom:0;right:auto;width:1px;height:8px}
  #bague .grad.maj{height:13px}
  #bague .chap-n{display:none}
  #bague .index{top:auto;bottom:0;left:50%;right:auto;width:2px;height:18px;margin:0 0 0 -1px}
  #bague-nom{top:auto;bottom:34px;right:auto;left:50%;transform:translateX(-50%);opacity:1;font-size:10px;text-align:center;
    background:rgba(14,13,12,.7);padding:4px 10px;border-radius:999px}
  #ouverture .texte{bottom:96px}
  #ouverture .fondu{background:linear-gradient(0deg,rgba(14,13,12,.95) 0%,rgba(14,13,12,.7) 38%,rgba(14,13,12,0) 66%)}
  #ouverture .mention{left:var(--pad);right:auto;bottom:auto;top:calc(env(safe-area-inset-top,0px) + 64px);font-size:10.5px}
  .invite{bottom:52px}
  #mise-au-point .compteur{top:78px}
  #mise-au-point .consigne{display:none}
  #mise-au-point .fin-scene{bottom:48px}
  #mise-au-point .fin-scene p{font-size:15.5px}
  #logo .cote{top:84px;max-width:none;right:var(--pad)}
  #logo .cote .note{display:none}
  #logo .petits{right:auto;left:var(--pad);top:auto;bottom:62px}
  #logo .marque{bottom:120px}
  #logo .dessin{width:min(58vw,40vh);margin-top:-6vh}
  #genius .corps-g{grid-template-columns:1fr;gap:16px}
  #genius .etat-vif img{width:118px}
  .questions{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .questions button{padding:9px 10px;font-size:12.5px;border-radius:14px;gap:6px}
  .questions button::before{display:none}
  .fil{min-height:0;max-height:44svh;padding:12px}
  .msg{font-size:13.5px;padding:8px 11px}
  .etats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .etats figure{padding:6px}
  #campagne .legende{bottom:48px;right:var(--pad)}
  #campagne .legende .titre{font-size:24px}
  #campagne .mention{top:64px;left:var(--pad);right:auto;font-size:10.5px}
  #campagne .plate img{width:94vw}
  #campagne-suite .deux{grid-template-columns:1fr}
  .ecrans{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .yt{grid-template-columns:1fr}
  .pv{grid-template-columns:1fr}
  .pv .story{width:62%;justify-self:center}
  .affiche-3008 .txt{width:60%}
  #remise .cartel{bottom:52px;right:var(--pad)}
  #remise .mention{top:64px;left:var(--pad);right:auto;font-size:10.5px}
  #remise .points{bottom:30px}
  .objets .o1,.objets .o2{grid-column:span 12}
  .objets .o3,.objets .o4,.objets .o5{grid-column:span 6}
  .objets .o5{grid-column:span 12}
  .livre{grid-template-columns:1fr}
  .regles{grid-template-columns:1fr 1fr;gap:8px}
  .regle .t span{display:none}
  .regle .t{padding:8px 10px}
  .site-cadre{grid-template-columns:1fr;justify-items:start}
  .cta{height:48px;padding:0 20px}
}
@media (max-width:760px) and (max-height:700px){:root{--t-titre:27px}}

/* ============ mouvement réduit : de simples fondus ============ */
@media (prefers-reduced-motion:reduce){
  .mise .net,.mise .flou{transform:none!important;transition:opacity .4s linear!important}
  .entre{transform:none!important;transition:opacity .4s linear!important}
  #campagne .monde{transform:none!important}
  .msg{animation:none}
  #mise-au-point .signature .cur,.msg .cur{animation:none}
}

/* ============ réglages après montage (24/09, 19h40) ============ */
#bague .grad{width:var(--l,10px)}
#bague .chap-n{top:0}
/* 1 · ouverture : à l'ordinateur, le film à droite, fondu dans la nuit ; le texte à gauche, jamais sur la voiture */
@media (min-aspect-ratio:13/10){
  #ouverture .mise{left:auto;right:0;width:min(84vw,calc(100vh * 16 / 9));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
  #ouverture .fondu{background:linear-gradient(0deg,rgba(14,13,12,.7) 0%,rgba(14,13,12,0) 26%)}
  #ouverture .texte{top:50%;bottom:auto;transform:translateY(-44%);max-width:min(36vw,560px)}
  #ouverture h1{font-size:clamp(40px,5.1vw,98px)}
}
#ouverture .mise video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 2 · la révélation : la voiture entière dans l'anneau (430d : centre 0,47 × 0,57, largeur 0,565 de l'image) */
#mise-au-point .revele{background:#0b0a09}
#mise-au-point .revele img{position:absolute;width:141.6%;height:auto;max-width:none;left:-16.8%;top:9.3%;object-fit:initial}
#mise-au-point .signature{pointer-events:none}
/* 5 · l'affiche à plat : une mise au point, 4 × 3 */
#campagne .plate{padding:clamp(70px,10vh,110px) 16px 16px}
#campagne .plate .mise{position:relative;width:min(92vw,calc((100svh - 170px) * 4 / 3));aspect-ratio:4/3;box-shadow:0 30px 90px rgba(0,0,0,.6)}
#campagne .plate .mise>img{object-fit:cover}
/* 7 · l'affiche du 3008 (3008 : centre 0,40 × 0,56, largeur 0,60 de l'image) */
.affiche-3008 .lentille{right:7%;top:10%;width:44%;aspect-ratio:1;background:#0b0a09;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.affiche-3008 .lentille img{position:absolute;width:136.7%;height:auto;max-width:none;left:-4.7%;top:10.7%}
.affiche-3008 .txt{width:47%}
.affiche-3008 svg{pointer-events:none}
/* 8 · la remise au téléphone : l'image entière, jamais recadrée sur la main ou la voiture */
@media (max-aspect-ratio:4/5){
  .mise.contenir-v>img,.mise.contenir-v>video{object-fit:contain;object-position:50% 34%}
  .mise.contenir-v{background:#0b0a09}
}
.son-txt{white-space:nowrap}
.regle .img{cursor:zoom-in}
@media (max-width:760px){
  #bague .grad{width:1px;height:calc(var(--l,10px) * .55)}
  .affiche-3008 .txt{width:50%;left:5%;top:6%}
  .affiche-3008 .txt h3{font-size:16.5px}
  .affiche-3008 .txt p{font-size:11px}
  #mise-au-point .fin-scene{flex-direction:column;align-items:flex-start;gap:8px}
  #logo .marque{bottom:110px}
}
@media (max-width:760px){
  #mise-au-point .fin-scene{bottom:34px;gap:6px}
  #mise-au-point .fin-scene p{font-size:14px;max-width:none}
  #mise-au-point .fin-scene .ex{font-size:10px;line-height:1.4;letter-spacing:.06em}
  #mise-au-point .signature{font-size:27px}
  #logo .mot{font-size:15.5px}
  #logo .desc{font-size:8.5px;letter-spacing:.24em}
  #logo .petits{display:none}
  #bague-nom{opacity:0;transition:opacity .4s}
  body.defile #bague-nom{opacity:1}
}
@media (max-width:760px){
  .affiche-3008 .txt{width:42%}
  .affiche-3008 .txt p{font-size:10.5px;line-height:1.38}
}