/* VELOCIA, accueil : les sept scènes. Le socle (variables, en-tête, boutons, pied) est dans velocia.css. */

/* ===== 1. La soufflerie ===== */
#soufflerie{position:relative;height:300vh}
.s-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noir)}
/* le cadre reproduit le cadrage du film (16:9, couvrant) : tout ce qui s'aligne sur la voiture vit dedans */
.s-cadre{position:absolute;left:50%;top:50%;width:max(100%,calc(100vh * 16 / 9));width:max(100%,calc(100svh * 16 / 9));aspect-ratio:16/9;transform:translate(-50%,-50%);container-type:inline-size}
.s-film,.s-plan,#flow{position:absolute;inset:0;width:100%;height:100%}
.s-plan{object-fit:cover}
.s-film video{opacity:0;transition:opacity .6s}
.s-film video.ready{opacity:1}
/* carte de pression : au survol, la carrosserie passe en simulation sous le curseur */
.s-cp{-webkit-mask-image:radial-gradient(circle var(--cr,0px) at var(--cx,50%) var(--cy,50%),#000 45%,transparent 100%);mask-image:radial-gradient(circle var(--cr,0px) at var(--cx,50%) var(--cy,50%),#000 45%,transparent 100%)}
.s-cpl{position:absolute;left:0;top:0;margin:0;display:flex;gap:8px;align-items:baseline;padding:6px 10px;border:1px solid var(--line-2);background:rgba(10,10,11,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--brume);pointer-events:none;opacity:0;transition:opacity .3s;transform:translate(var(--lx,0),var(--ly,0))}
.s-cpl b{color:var(--os);font-weight:400;min-width:4.5ch;text-align:right}
.s-cpl.on{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.s-cp,.s-cpl{display:none}}
/* le chiffre géant passe derrière la voiture : il est découpé par le masque de la carrosserie */
.s-fond{position:absolute;inset:0;opacity:0;-webkit-mask:url(../img/soufflerie-masque.webp) center/100% 100% no-repeat;mask:url(../img/soufflerie-masque.webp) center/100% 100% no-repeat}
.s-couche{position:absolute;inset:0}
.s-couche--vit{clip-path:inset(0 0 0 var(--lz,0%))}
.s-couche--cx{clip-path:inset(0 calc(100% - var(--lz,0%)) 0 0)}
.s-chiffre{position:absolute;left:50%;top:54.5%;transform:translate(-50%,-100%);font-family:var(--display);font-weight:300;font-size:27cqw;line-height:.72;letter-spacing:-.02em;font-variation-settings:'wdth' var(--cw,56);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--os)}
.s-reveal{position:absolute;inset:0;background:var(--noir);transform-origin:right;pointer-events:none}
.s-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 55%,transparent 40%,rgba(7,8,10,.72) 100%),linear-gradient(180deg,rgba(7,8,10,.62),transparent 30%,transparent 58%,rgba(7,8,10,.92));pointer-events:none}
.s-dark{position:absolute;inset:0;background:var(--noir);opacity:0;pointer-events:none}
.s-laser{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--laser);box-shadow:0 0 18px 4px rgba(232,213,173,.55),0 0 60px 10px rgba(232,213,173,.18);opacity:0;pointer-events:none}
.s-releve{position:absolute;right:var(--g);color:var(--brume);display:flex;flex-direction:column;gap:4px;text-align:right;opacity:0;transform:translateX(-4px);transition:opacity .4s var(--sec) 2.1s,transform .4s var(--sec) 2.1s}
.s-releve b{font-weight:400;color:var(--os)}
.s-releve--h{top:calc(var(--nav-h) + 22px)}
.s-releve--b{bottom:clamp(28px,5vh,52px)}
.in .s-releve{opacity:1;transform:none}
.s-copy{position:absolute;left:var(--g);right:var(--g);top:clamp(104px,15.5vh,168px);pointer-events:none}
.s-title{font-size:clamp(3rem,6.4vw,7rem);max-width:11ch;line-height:.92}
.s-title .w{display:inline-block;white-space:nowrap}
.s-title .ch{display:inline-block;opacity:0;transform:translateX(-12px);font-variation-settings:'wdth' 50;transition:opacity .7s var(--glisse),transform .7s var(--glisse),font-variation-settings .7s var(--glisse);transition-delay:calc(.9s + var(--i) * 28ms)}
.in .s-title .ch{opacity:1;transform:none;font-variation-settings:'wdth' var(--wd,112)}
.s-bas{position:absolute;left:var(--g);bottom:clamp(28px,5vh,52px);max-width:calc(100% - 2 * var(--g))}
.s-sub{max-width:40ch;color:#d5d6d4;text-shadow:0 1px 24px rgba(7,8,10,.8)}
.s-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.s-bas > *{opacity:0;transform:translateX(-12px);transition:opacity .45s var(--sec),transform .45s var(--sec)}
.in .s-bas > *{opacity:1;transform:none}
.in .s-bas > :nth-child(1){transition-delay:2.05s}.in .s-bas > :nth-child(2){transition-delay:2.15s}
.s-phase{position:absolute;left:var(--g);right:var(--g);bottom:clamp(28px,5vh,52px);pointer-events:none;opacity:0}
.s-phase p{font-size:clamp(1.9rem,3.4vw,3.6rem);max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.s-phase small{display:block;margin-top:14px;color:var(--brume)}

/* écran plus haut que large : un film vertical, tourné pour le téléphone, remplit l'écran */
@media (max-aspect-ratio:1/1){
  /* les trois modèles : une photo verticale par voiture, entière dans la largeur, le texte sur l'asphalte */
  #gamme .t-panel img{object-fit:contain;object-position:50% 0}
  .t-panel{background:#0a0b0d}
  .t-panel::after{background:linear-gradient(0deg,rgba(7,8,10,.94),rgba(7,8,10,.72) 30%,rgba(7,8,10,0) 54%),linear-gradient(180deg,rgba(7,8,10,.5),rgba(7,8,10,0) 16%)}
  .s-cadre{width:max(100%,calc(100vh * 9 / 16));width:max(100%,calc(100svh * 9 / 16));aspect-ratio:9/16}
  .s-fond{-webkit-mask-image:url(../img/soufflerie-masque-v.webp);mask-image:url(../img/soufflerie-masque-v.webp)}
  .s-cp{display:none}
  /* le chiffre se pose au-dessus du toit : il ne passe plus sur la voiture */
  .s-chiffre{font-size:34cqw;top:47.5%}
  .s-couche--cx .s-chiffre{font-variation-settings:'wdth' 66}
  .s-veil{background:linear-gradient(180deg,rgba(7,8,10,.5),transparent 24%,transparent 70%,rgba(7,8,10,.6))}
  .s-copy{top:calc(var(--nav-h) + 18px)}
  .s-title{font-size:clamp(2.7rem,14vw,5.4rem)}
  .s-releve--h{display:none}
  .s-releve--b{display:none}
  .s-bas{bottom:max(22px,env(safe-area-inset-bottom))}
  .s-actions .btn{flex:1 1 100%}
  .s-phase{bottom:auto;top:calc(50% + 34vw + 64px)}
}
@media (max-aspect-ratio:1/1) and (max-height:720px){.s-sub{display:none}.s-releve--b{display:none}}

/* ===== 2. La coupe : la peau et la coupe sont alignées au pixel, la nappe laser découpe la peau ===== */
.cut{position:relative;height:340vh;background:#000}
.cut__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cut__frame{position:absolute;left:50%;top:56%;width:max(100vw,160svh);aspect-ratio:2752/1536;transform:translate(-50%,-50%)}
.cut__frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  -webkit-mask-image:linear-gradient(transparent 0,transparent 13%,#000 26%,#000 84%,transparent 100%);mask-image:linear-gradient(transparent 0,transparent 13%,#000 26%,#000 84%,transparent 100%)}
.cut__os{clip-path:inset(0 calc(100% - var(--lx,0%)) 0 0)}
.cut__peau{clip-path:inset(0 0 0 var(--lx,0%))}
.cut__beam{position:absolute;top:-10%;bottom:-10%;left:var(--lx,0%);width:2px;margin-left:-1px;background:var(--laser);
  box-shadow:0 0 14px 3px rgba(232,213,173,.85),0 0 90px 30px rgba(232,213,173,.16);opacity:var(--bo,0);
  -webkit-mask-image:linear-gradient(transparent 8%,#000 30%,#000 88%,transparent);mask-image:linear-gradient(transparent 8%,#000 30%,#000 88%,transparent)}
.cut__tags{list-style:none}
.cut__tag{position:absolute;left:var(--x);top:var(--y);width:0;height:0;opacity:0;transition:opacity .4s var(--sec)}
.cut__tag::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--laser);box-shadow:0 0 10px var(--laser)}
.cut__tag::after{content:"";position:absolute;left:0;width:1px;top:calc(-1 * var(--len));height:var(--len);
  background:linear-gradient(var(--laser),rgba(232,213,173,.2));transform-origin:bottom;transform:scaleY(0);transition:transform .5s var(--sec) .08s}
.cut__tag span,.cut__tag b{position:absolute;left:12px;white-space:nowrap}
.cut__tag span{top:calc(-1 * var(--len) - 6px);color:var(--brume)}
.cut__tag b{top:calc(-1 * var(--len) + 14px);font:400 clamp(1rem,1.5vw,1.35rem)/1 var(--display);font-variation-settings:'wdth' 112}
.cut__tag--bas::after{top:0;transform-origin:top;background:linear-gradient(rgba(232,213,173,.2),var(--laser))}
.cut__tag--bas span{top:calc(var(--len) - 6px)}
.cut__tag--bas b{top:calc(var(--len) + 14px)}
.cut__tag.is-on{opacity:1}
.cut__tag.is-on::after{transform:scaleY(1)}
.cut__head{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 5vh);pointer-events:none}
.cut__head h2{max-width:12ch}
.cut__read{position:absolute;right:var(--g);bottom:5vh;color:var(--brume)}
.cut__read b{color:var(--laser);font-weight:400}
@media(max-width:860px){
  .cut{height:300vh}
  /* la caméra suit la nappe : la voiture défile sous un laser fixe, au centre de l'écran */
  .cut__frame{width:250vw;left:0;top:57%;transform:translate(var(--pan,-75vw),-50%)}
  .cut__tag b{font-size:.95rem}
}

/* ===== 3. Le banc : le visiteur règle le vent et lit les mesures ===== */
.banc{position:relative;padding:clamp(96px,15vh,180px) 0 clamp(88px,13vh,160px);background:linear-gradient(#000,var(--noir) 26%)}
.banc__tete{display:grid;gap:26px}
.banc__tete h2{max-width:15ch}
.banc__scene{position:relative;margin-top:clamp(28px,5vh,56px);width:100%;aspect-ratio:2752/1080;min-height:240px;overflow:hidden}
.banc__scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 49%;
  -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 82%,transparent)}
.banc__scene canvas{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.banc__pilote{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(20px,4vh,44px)}
.banc__vit{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-weight:300;line-height:.8}
.banc__vit b{font-weight:300;font-size:clamp(4rem,9vw,8.5rem);font-variation-settings:'wdth' var(--bw,60);font-variant-numeric:tabular-nums;min-width:2.9ch;letter-spacing:-.02em}
.banc__vit span{color:var(--brume)}
.banc__regle{position:relative;padding-bottom:30px}
.banc__regle label{display:block;color:var(--brume);margin-bottom:6px}
.banc__regle input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;background:transparent;cursor:ew-resize;touch-action:pan-y}
.banc__regle input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--laser) var(--p,0%),var(--line-2) var(--p,0%))}
.banc__regle input::-moz-range-track{height:1px;background:linear-gradient(90deg,var(--laser) var(--p,0%),var(--line-2) var(--p,0%))}
.banc__regle input::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:34px;margin-top:-17px;border:0;border-radius:0;background:var(--laser);box-shadow:0 0 14px 3px rgba(232,213,173,.7),0 0 0 12px transparent}
.banc__regle input::-moz-range-thumb{width:3px;height:34px;border:0;border-radius:0;background:var(--laser);box-shadow:0 0 14px 3px rgba(232,213,173,.7)}
.banc__regle input:focus-visible{outline:1px solid var(--laser);outline-offset:2px}
.banc__grad{position:absolute;left:0;right:0;bottom:0;height:24px;color:var(--brume);pointer-events:none}
.banc__grad span{position:absolute;bottom:0;left:var(--x);transform:translateX(-50%);padding-top:10px}
.banc__grad span::before{content:"";position:absolute;left:50%;top:0;width:1px;height:6px;background:var(--line-2)}
.banc__grad span:first-child{transform:none}.banc__grad span:first-child::before{left:0}
.banc__mesures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);margin-top:clamp(40px,7vh,72px);border-top:1px solid var(--line);padding-top:26px}
.banc__mesures dt{color:var(--laser)}
.banc__mesures dd{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-family:var(--display);line-height:1}
.banc__mesures dd b{font-weight:300;font-size:clamp(2.2rem,4.4vw,4.2rem);font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.banc__mesures dd span{color:var(--brume);font-size:1.25rem;font-weight:300}
.banc__note{margin-top:28px;color:var(--os);max-width:60ch;min-height:3.2em}
@media(max-width:760px){
  .banc__scene{aspect-ratio:2752/1250;min-height:0}
  .banc__pilote{grid-template-columns:1fr;gap:18px}
  .banc__mesures{grid-template-columns:1fr 1fr;gap:26px 20px}
  .banc__mesures div:last-child{grid-column:1 / -1}
}

/* ===== 4. Trois tempéraments ===== */
#gamme{position:relative;height:340vh}
.t-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noir)}
/* chaque panneau garde son texte dans son propre plan : le texte du premier ne passe plus au-dessus des suivants */
.t-panel{position:absolute;inset:0;clip-path:inset(0 100% 0 0);isolation:isolate}
#coupe{clip-path:inset(0 0 0 0)}
.t-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateX(-3%) scale(1.06)}
.t-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,10,.8),rgba(7,8,10,.1) 46%,transparent 70%),linear-gradient(0deg,rgba(7,8,10,.88),transparent 46%)}
.t-edge{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--laser);box-shadow:0 0 18px 4px rgba(232,213,173,.55);opacity:0;z-index:5;pointer-events:none}
.t-info{position:absolute;left:var(--g);bottom:clamp(58px,9vh,96px);right:var(--g);z-index:3}
.t-name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(3.2rem,10vw,10.5rem);line-height:.86;letter-spacing:.01em;font-variation-settings:'wdth' var(--nw,100)}
.t-tag{color:var(--laser);margin-bottom:16px}
.t-row{display:flex;gap:clamp(22px,4vw,64px);margin-top:28px;flex-wrap:wrap;align-items:flex-end}
.t-row div b{display:block;font-family:var(--display);font-weight:400;font-variation-settings:'wdth' 100;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.1;font-variant-numeric:tabular-nums}
.t-row div small{display:block;margin-top:4px;color:var(--brume)}
.t-row .btn{margin-left:auto}
.t-head{position:absolute;top:calc(var(--nav-h) + 20px);left:var(--g);right:var(--g);display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:6;color:var(--brume)}
.t-nav{display:flex;gap:clamp(4px,1.2vw,18px)}
.t-nav button{position:relative;min-height:44px;padding:0 10px;background:none;border:0;cursor:pointer;color:var(--brume);transition:color .25s}
.t-nav button::after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:1px;background:var(--laser);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--sec)}
.t-nav button:hover,.t-nav button[aria-current="true"]{color:var(--os)}
.t-nav button[aria-current="true"]::after{transform:scaleX(1)}
.t-bar{position:absolute;left:var(--g);right:var(--g);bottom:26px;height:1px;background:var(--line);z-index:6}
.t-bar i{position:absolute;inset:0;background:var(--laser);transform:scaleX(0);transform-origin:left}
@media(max-width:860px){
  .t-row{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
  .t-row .btn{margin-left:0;grid-column:1 / -1;margin-top:6px}
  .t-head > span{display:none}
  .t-nav{margin-left:-10px}
}

/* ===== 5. 2,1 secondes ===== */
/* l'arrêt : la scène reste plein écran sur une longueur et demie de défilement, le temps de tenir le bouton */
.lc-piste{height:250vh;height:250svh}
.lc-piste>.lc{position:sticky;top:0}
@media (prefers-reduced-motion:reduce){.lc-piste{height:auto}.lc-piste>.lc{position:relative}}
.lc{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000;touch-action:manipulation;user-select:none;-webkit-user-select:none;outline:none}
.lc img,.lc canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lc canvas{transform-origin:52% 46%}
.lc .vign{position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 50%,transparent 45%,rgba(0,0,0,.75));pointer-events:none}
.lc-word{position:absolute;left:0;right:0;top:15%;text-align:center;font-family:var(--display);font-weight:600;letter-spacing:.18em;font-size:clamp(28px,6vw,88px);font-variation-settings:'wdth' var(--w,100);color:rgba(236,235,230,.92);pointer-events:none;white-space:nowrap}
.lc-sub{position:absolute;left:0;right:0;top:calc(15% + clamp(40px,7.4vw,110px));text-align:center;color:var(--brume);pointer-events:none}
.lc-gauge{position:absolute;left:var(--g);bottom:clamp(30px,6vh,64px);width:clamp(120px,14vw,190px);aspect-ratio:1;pointer-events:none}
.lc-gauge svg{width:100%;height:100%;overflow:visible}
.lc-gauge .trk{fill:none;stroke:rgba(236,235,230,.16);stroke-width:2}
.lc-gauge .val{fill:none;stroke:var(--laser);stroke-width:2.4;filter:drop-shadow(0 0 4px rgba(232,213,173,.8))}
.lc-gauge .tick{stroke:rgba(236,235,230,.4);stroke-width:1}
.lc-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lc-num b{font-family:var(--mono);font-stretch:80%;font-weight:400;font-size:clamp(26px,3vw,40px);font-variant-numeric:tabular-nums;line-height:1}
.lc-num i{font-style:normal;font-family:var(--mono);font-stretch:80%;font-size:.6875rem;letter-spacing:.12em;color:var(--brume);margin-top:6px;text-transform:uppercase}
.lc-btn{touch-action:none;position:absolute;left:50%;bottom:clamp(30px,6vh,64px);width:clamp(108px,10vw,136px);aspect-ratio:1;transform:translateX(-50%);cursor:pointer;border:0;background:none;color:var(--os)}
.lc-btn svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lc-btn .r0{fill:rgba(7,8,10,.4);stroke:rgba(236,235,230,.3);stroke-width:1;transition:stroke .25s}
.lc-btn:hover .r0{stroke:rgba(236,235,230,.7)}
.lc-btn .r1{fill:none;stroke:var(--laser);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.lc-btn span{position:relative;font:500 .75rem var(--sans);letter-spacing:.14em;text-transform:uppercase}
.lc-btn:active{transform:translateX(-50%) scale(.97)}
.lc-side{position:absolute;right:var(--g);bottom:clamp(30px,6vh,64px);text-align:right;max-width:30ch;color:var(--brume);pointer-events:none}
.lc-side h2{font-family:var(--display);font-weight:300;font-variation-settings:'wdth' 112;font-size:clamp(1.75rem,3.2vw,3rem);line-height:1;color:var(--os);margin-bottom:12px}
@media(max-width:860px){
  .lc-gauge{width:104px}
  .lc-side{left:var(--g);right:var(--g);bottom:calc(clamp(30px,6vh,64px) + 128px);text-align:center;max-width:none}
  .lc-side h2{font-size:1.5rem;margin-bottom:6px}
  .lc .vign{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.25) 34%,transparent 52%),radial-gradient(90% 80% at 50% 50%,transparent 45%,rgba(0,0,0,.6))}
  .lc-side p{max-width:28ch;margin:0 auto}
  .lc-btn{left:auto;right:var(--g);transform:none}
  .lc-btn:active{transform:scale(.97)}
}

/* ===== 6. À bord : la paume révèle la matière ===== */
.bord{padding:clamp(100px,16vh,190px) 0}
.bord__tete{display:grid;gap:26px}
.bord__tete h2{max-width:14ch}
.bord .frame{position:relative;aspect-ratio:21/9;min-height:360px;overflow:hidden;margin-top:clamp(40px,7vh,72px);cursor:none;touch-action:pan-y}
.bord .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bord .base{filter:brightness(.34) saturate(.55)}
.bord .paume{clip-path:circle(var(--r,0px) at var(--x,50%) var(--y,50%))}
.bord .ring{position:absolute;left:0;top:0;width:calc(var(--r,0px) * 2);height:calc(var(--r,0px) * 2);margin:calc(var(--r,0px) * -1) 0 0 calc(var(--r,0px) * -1);border:1px solid rgba(232,213,173,.55);border-radius:50%;transform:translate(var(--x,50%),var(--y,50%));pointer-events:none}
.bord .mat{position:absolute;color:var(--brume);transition:color .3s,opacity .3s;opacity:.6;pointer-events:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.bord .mat::before{content:"";flex:none;width:7px;height:7px;border:1px solid currentColor;border-radius:50%}
.bord .mat--d{flex-direction:row-reverse;transform:translateX(-100%)}
.bord .mat.on{color:var(--laser);opacity:1}
.bord .note{display:flex;justify-content:space-between;gap:8px 20px;margin-top:16px;color:var(--brume);flex-wrap:wrap}
@media(max-width:860px){
  .bord .frame{aspect-ratio:4/5;cursor:auto;margin-left:calc(-1 * var(--g));margin-right:calc(-1 * var(--g))}
  .bord .frame img{object-position:38% 50%}
  /* le cadrage change sur téléphone : les repères suivent */
  .bord .mat{left:var(--xm)!important;top:var(--ym)!important}
}

/* ===== 7. La porte ===== */
#porte{position:relative;height:240vh}
.p-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noir)}
.p-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
.p-door{position:absolute;left:0;right:0;top:0;height:100%;background:repeating-linear-gradient(180deg,#121418 0 46px,#0c0d10 46px 48px,#16181c 48px 50px);box-shadow:0 30px 80px 20px rgba(0,0,0,.6)}
.p-door::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--laser);box-shadow:0 0 30px 8px rgba(255,214,160,.55)}
.p-spill{position:absolute;left:0;right:0;bottom:0;height:60%;background:radial-gradient(80% 100% at 50% 100%,rgba(255,206,150,.35),transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.p-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,10,.86),rgba(7,8,10,.4) 44%,transparent 68%),linear-gradient(0deg,rgba(7,8,10,.72),transparent 50%);opacity:0;pointer-events:none}
.p-copy{position:absolute;left:var(--g);right:var(--g);bottom:clamp(56px,11vh,120px);opacity:0;transform:translateX(-12px)}
.p-copy .mono{color:var(--laser);margin-bottom:22px}
.p-copy h2{max-width:14ch;font-size:clamp(2.3rem,4.6vw,4.9rem);text-shadow:0 2px 40px rgba(0,0,0,.35)}
.p-copy p:not(.mono){max-width:40ch;margin-top:22px;color:#e2e0da}
.p-copy .s-actions{margin-top:28px}
@media(max-width:860px){
  .p-stage img{object-position:50% 100%}
  .p-shade{background:linear-gradient(180deg,rgba(7,8,10,.9),rgba(7,8,10,.62) 46%,transparent 74%)}
  .p-copy{bottom:auto;top:calc(var(--nav-h) + 12px)}
  .p-copy .btn{flex:1 1 100%}
}

@media(prefers-reduced-motion:reduce){
  #soufflerie,#gamme,#porte,.cut{height:auto}
  .s-stage,.t-stage,.p-stage{position:relative}
  .t-stage{height:auto}
  .t-panel{position:relative;height:100vh;clip-path:none!important}
  .t-panel img{transform:none!important}
  .t-head,.t-bar,.t-edge{display:none}
  .s-reveal,.p-door,.s-phase,.s-fond{display:none}
  .p-copy{opacity:1;transform:none}
  .p-shade{opacity:1}
  .cut__stage{position:relative;height:100svh}
  .cut__peau,.cut__beam{display:none}
  .cut__os{clip-path:none}
  .cut__tag{opacity:1}
  .cut__tag::after{transform:none}
  .cut__frame{left:50%;transform:translate(-50%,-50%)}
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){.cut__frame{width:150vw}}