/* ==========================================================================
   ACCUEIL AÉRÉ (octobre 2026) — même thème que la maquette validée, mise en
   page de vrai site : hero plein écran, sections qui respirent, grands
   visuels. Tout est limité à <main class="home"> : les autres pages ne
   sont pas concernées.
   ========================================================================== */
.home{--pad-y:clamp(96px,9.5vw,176px)}
.home .h2{font-size:max(calc(var(--mins) * 36px),calc(36 * var(--m)))}
.home .sec{min-height:0}
.home .sec__rail{top:var(--pad-y);bottom:calc(var(--pad-y) * .55)}
.home .txt{font-size:max(calc(var(--mins) * 16px),calc(8 * var(--m)))}

/* Le HERO reste exactement celui de la maquette (demande de Yann) : aucune règle ici. */

/* ---------- 02 QUI SOMMES-NOUS ----------------------------------------------- */
.home .about{padding:var(--pad-y) 0}
.home .about__grid{grid-template-columns:max(calc(var(--mins) * 430px),calc(350 * var(--m)));padding:0 0 0 calc(97 * var(--m))}
.home .about__title{margin-top:max(calc(var(--mins) * 22px),calc(16 * var(--m)))}
.home .about__text{padding-top:max(calc(var(--mins) * 28px),calc(20 * var(--m)))}
.home .about__text .txt{font-size:max(calc(var(--mins) * 16px),calc(8 * var(--m)))}
.home .about__visual{left:calc(470 * var(--m))}
.home .about__room{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.home .monitor{left:calc(120 * var(--m));top:calc(50% - 96 * var(--m));width:calc(300 * var(--m));height:calc(194 * var(--m));transform:perspective(calc(640 * var(--m))) rotateY(var(--tilt,-38deg));transition:transform .1s linear}
.home .monitor__words{font-size:calc(27 * var(--m))}
.home .about__notes{right:calc(40 * var(--m));top:calc(50% - 30 * var(--m))}

/* ---------- 03 EXPERTISES : quatre grandes cartes ------------------------- */
.home .exp{padding:var(--pad-y) 0}
.home .exp__grid{grid-template-columns:minmax(0,1fr);row-gap:max(calc(var(--mins) * 44px),calc(34 * var(--m)));padding:0 calc(55 * var(--m)) 0 calc(97 * var(--m))}
.home .exp__intro{display:grid;grid-template-columns:calc(430 * var(--m)) minmax(0,1fr);grid-template-rows:auto auto;column-gap:calc(40 * var(--m));align-items:end;padding:0}
.home .exp__intro .sec__label{grid-column:1/-1}
.home .exp__intro .txt{margin:0 0 .3em;max-width:max(calc(var(--mins) * 520px),calc(330 * var(--m)))}
.home .exp__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:max(calc(var(--mins) * 18px),calc(14 * var(--m)));perspective:1400px}
.home .xcard{min-height:max(calc(var(--mins) * 300px),calc(205 * var(--m)));padding:max(calc(var(--mins) * 26px),calc(20 * var(--m))) max(calc(var(--mins) * 28px),calc(22 * var(--m))) max(calc(var(--mins) * 24px),calc(18 * var(--m)))}
.home .xcard__num{font-size:max(calc(var(--mins) * 11px),calc(6 * var(--m)))}
.home .xcard__title{font-size:max(calc(var(--mins) * 30px),calc(23 * var(--m)))}
.home .xcard__list{padding-right:calc(60 * var(--m))}
.home .xcard__list li{font-size:max(calc(var(--mins) * 15px),calc(7.6 * var(--m)))}
.home .xcard__go{--d:max(calc(var(--mins) * 46px),calc(28 * var(--m)));right:max(calc(var(--mins) * 20px),calc(15 * var(--m)));bottom:max(calc(var(--mins) * 20px),calc(15 * var(--m)))}
.home .xcard--identity .xcard__media{width:calc(250 * var(--m));height:calc(250 * var(--m));right:calc(-6 * var(--m));top:calc(-24 * var(--m))}
.home .xcard--web .xcard__media{width:calc(262 * var(--m));right:calc(-44 * var(--m));top:calc(-8 * var(--m))}
.home .xcard--podcast .xcard__media{width:calc(104 * var(--m));right:calc(34 * var(--m));top:calc(-26 * var(--m))}
.home .xcard--software .xcard__media{width:calc(290 * var(--m));right:calc(-46 * var(--m));top:calc(26 * var(--m))}
.softscreen{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:4px;overflow:hidden;transform:perspective(900px) rotateY(-22deg) rotateX(7deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 50px -20px rgba(246,43,62,.5)}
.softscreen img{width:100%;height:auto;filter:saturate(.25) brightness(.72) contrast(1.1)}
.softscreen::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(246,43,62,.35),rgba(120,10,20,.15) 60%,transparent);mix-blend-mode:color}
/* hors ?calage : la console se lit (vraie interface, couleurs gardées, plus de voile rouge) */
html:not(.calage) .softscreen img{filter:saturate(.85) brightness(1.12) contrast(1.05)}
html:not(.calage) .softscreen::after{display:none}
.xcard--software::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,9,.92) 0,rgba(8,8,9,.6) 45%,transparent 78%);pointer-events:none}
.xcard--software:hover .xcard__media{transform:translate3d(calc(-4 * var(--m)),calc(-3 * var(--m)),0) scale(1.03)}
/* les cartes se relèvent en 3D légère à l'apparition */
html.js .home .xcard.rv{transform:translate3d(0,56px,0) rotateX(9deg);transform-origin:50% 100%}
html.js .home .xcard.rv.is-in{transform:none}

/* ---------- 04 PODCAST --------------------------------------------------------- */
.home .pod{padding:var(--pad-y) 0}
.home .pod__grid{grid-template-columns:calc(290 * var(--m)) minmax(0,1fr) max(calc(var(--mins) * 380px),calc(330 * var(--m)));grid-template-areas:"intro . player" "intro . eps";align-items:start;padding:0 calc(50 * var(--m)) 0 calc(97 * var(--m))}
.home .pod__intro{grid-area:intro;align-self:center}
.home .player{grid-area:player;margin-top:0}
.home .eps{grid-area:eps;margin:max(calc(var(--mins) * 26px),calc(18 * var(--m))) 0 0;padding:0}
.home .eps::before{display:none}
.home .pod__mic{left:calc(318 * var(--m));top:50%;width:calc(440 * var(--m));transform:translateY(-50%)}
.home .pod__mic-brand{font-size:calc(10.5 * var(--m))}
.home .pod__pulse{width:calc(230 * var(--m));height:calc(230 * var(--m));margin:calc(-115 * var(--m)) 0 0 calc(-115 * var(--m))}

/* ---------- 05 MÉTHODE ----------------------------------------------------------- */
.home .method{padding:var(--pad-y) 0}
.home .method__grid{grid-template-columns:minmax(0,1fr);row-gap:max(calc(var(--mins) * 60px),calc(44 * var(--m)));padding:0 calc(55 * var(--m)) 0 calc(97 * var(--m))}
.home .steps__list{column-gap:max(calc(var(--mins) * 30px),calc(28 * var(--m)))}
.home .step__title{font-size:max(calc(var(--mins) * 26px),calc(18 * var(--m)))}
.home .step__txt{max-width:none;font-size:max(calc(var(--mins) * 15px),calc(7.4 * var(--m)))}
.home .step__num{font-size:max(calc(var(--mins) * 11px),calc(5.4 * var(--m)))}

/* ---------- 06 RÉALISATIONS : grand carrousel qui déborde ---------------- */
.home .works{padding:var(--pad-y) 0}
.home .works__grid{grid-template-columns:minmax(0,1fr);row-gap:max(calc(var(--mins) * 44px),calc(34 * var(--m)));padding:0 0 0 calc(97 * var(--m))}
.home .works__intro{display:grid;grid-template-columns:calc(430 * var(--m)) minmax(0,1fr);column-gap:calc(40 * var(--m));align-items:end;padding-right:calc(55 * var(--m))}
.home .works__intro .sec__label{grid-column:1/-1}
.home .works__intro .txt{margin:0 0 .3em;max-width:max(calc(var(--mins) * 480px),calc(300 * var(--m)))}
.home .works__intro .btn{grid-column:2;justify-self:start;margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
.home .slider{padding-right:0;margin:0;min-width:0}
.home .slider__viewport{overflow:visible;clip-path:inset(-60px -100vw -60px 0)}
.home .slider__track{gap:max(calc(var(--mins) * 20px),calc(18 * var(--m)))}
.home .proj{flex-basis:max(calc(var(--mins) * 320px),calc(300 * var(--m)))}
.home .proj.is-active{flex-basis:max(calc(var(--mins) * 350px),calc(330 * var(--m)))}
.home .proj__shot{height:auto;aspect-ratio:16/10}
.home .proj__name{font-size:max(calc(var(--mins) * 17px),calc(9 * var(--m)))}
.home .slider__more{display:none}
.home .slider__nav{position:static;justify-content:flex-end;margin-top:max(calc(var(--mins) * 26px),calc(18 * var(--m)));padding-right:calc(55 * var(--m))}
.home .slider__nav .round{--d:max(calc(var(--mins) * 48px),calc(28 * var(--m)))}
.home .works__rock{width:calc(420 * var(--m))}

/* 07 CONTACT : bloc commun à toutes les pages, voir contact.css */

/* ==========================================================================
   Tablette et mobile : mises en page empilées de base, avec plus d'air.
   ========================================================================== */
@media (max-width:1023px){
  .home{--pad-y:clamp(64px,14vw,110px)}
  .home .about__grid,.home .exp__grid,.home .pod__grid,.home .method__grid,.home .works__grid{padding:0 24px}
  .home .about__grid{grid-template-columns:minmax(0,1fr)}
  .home .about__visual{left:auto}
  .home .monitor{left:22%;top:14%;width:52%;height:auto;aspect-ratio:179/116;transform:perspective(900px) rotateY(-30deg)}
  .home .exp__intro,.home .works__intro{grid-template-columns:minmax(0,1fr)}
  .home .works__intro .btn{grid-column:1}
  .home .exp__cards{grid-template-columns:minmax(0,1fr)}
  .home .xcard{min-height:260px}
  .home .xcard__title{font-size:30px}
  .home .xcard--identity .xcard__media{width:220px;height:220px;right:-30px;top:-20px}
  .home .xcard--web .xcard__media{width:260px;right:-80px;top:10px}
  .home .xcard--podcast .xcard__media{width:88px;right:22px;top:-24px}
  .home .xcard--software .xcard__media{width:240px;right:-70px;top:30px}
  .home .pod__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "player" "eps"}
  .home .pod__intro{margin-bottom:32px}
  .home .exp__intro .txt,.home .works__intro .txt{margin-top:20px}
  .home .pod__mic{position:relative;left:auto;top:auto;transform:none;width:min(86vw,440px);margin:0 auto -10px}
  .home .slider__viewport{clip-path:none}
  .home .proj{flex-basis:min(78vw,360px)}
  .home .proj.is-active{flex-basis:min(80vw,380px)}
  .home .slider__nav{justify-content:flex-start;padding:0}
}

/* ==========================================================================
   ACCUEIL PLEIN ÉCRAN (octobre 2026, demande de Yann)
   Chaque section occupe tout l'écran, contenu centré verticalement, sur
   ordinateur comme sur téléphone. Défilement section par section à la souris,
   au trackpad et au clavier : assets/js/modules/sections.js. Au doigt : scroll
   natif et aimantation douce. Fond vidéo rouge sombre de la section 03 à la
   fin : .home-bg (assets/js/modules/homebg.js).
   Le mode ?calage garde l'ancienne mise en page : tout ce bloc est limité à
   html:not(.calage).
   ========================================================================== */
html.page-accueil:not(.calage){scroll-padding-top:0}
html.yn-engine{scroll-behavior:auto}
html:not(.calage) .home{--fs-gap:clamp(18px,4.5vh,64px);--fs-top:calc(var(--hdr) + var(--fs-gap))}
html:not(.calage) .home > .sec{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--fs-top) 0 var(--fs-gap)}
html:not(.calage) .home .sec__rail{top:var(--fs-top);bottom:var(--fs-gap)}
html.yn-engine .home > section{transform-origin:50% 50%}

/* Au doigt : AUCUNE aimantation (10/10/2026). Sur iPhone, Safari freine l'élan
   dès que la page porte un scroll-snap, même « proximity » (Yann : « on a
   l'impression qu'on a un frein ») : le défilement reste celui du téléphone. */

/* Sections 03 à la fin (avis compris, s'ils sont publiés) : fond transparent,
   la vidéo passe derrière */
html:not(.calage) .home :is(.exp,.method,.works,.avis,.cta){background:transparent}
html:not(.calage) .home .pod{background:radial-gradient(calc(420 * var(--m)) calc(120 * var(--m)) at calc(820 * var(--m)) 100%,rgba(140,12,24,.16),transparent 70%)}

/* Sur la vidéo, les petites mentions gagnent un cran de lisibilité (AA) */
html:not(.calage) .home .ep__meta{color:var(--ink-3)}
html:not(.calage) .home .works .proj__type{color:var(--red-hi)}

/* ---------- fond vidéo (calque fixe, hors des sections) ------------------ */
/* hauteur fixe = le plus grand écran (100lvh), comme .page-bg des pages : au
   téléphone, quand la barre de Safari se replie ou revient, la vidéo ne se
   recadre plus d'un coup (+7 % avec inset:0) */
.home-bg{position:fixed;inset:0 0 auto 0;height:100vh;height:100lvh;z-index:0;pointer-events:none;background:#080203;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s linear .9s}
.home-bg.is-on{opacity:1;visibility:visible;transition:opacity .9s var(--ease)}
.home-bg__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.home-bg__shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,6,6,.62) 0,rgba(6,6,6,.3) 52%,rgba(6,6,6,.42) 100%),
  linear-gradient(180deg,rgba(6,6,6,.42) 0,rgba(6,6,6,0) 22%,rgba(6,6,6,0) 74%,rgba(6,6,6,.52) 100%)}
html.calage .home-bg{display:none}

/* ---------- index des sections (ordinateur) ------------------------------- */
.secnav{display:none}
@media (min-width:1024px){
  html:not(.calage) .secnav{display:block;position:fixed;right:max(14px,calc(9 * var(--m)));top:50%;z-index:800;transform:translate3d(0,-50%,0);font-family:var(--f-mono);font-weight:500;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
  html:not(.calage) .secnav.is-on{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
  .secnav ol{display:flex;flex-direction:column;align-items:flex-end}
  /* numéros plus clairs et détourés d'un halo sombre : lisibles sur la photo
     du studio comme sur les images claires de la vidéo */
  .secnav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:24px;padding-left:10px;font-size:10.5px;letter-spacing:.1em;line-height:1;color:var(--ink-2);text-shadow:0 0 6px rgba(0,0,0,.9);transition:color .3s var(--ease)}
  .secnav a::after{content:"";width:1px;height:100%;background:var(--line-2);transition:width .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
  .secnav a:hover,.secnav a:focus-visible{color:var(--ink)}
  .secnav a[aria-current]{color:var(--red)}
  .secnav a[aria-current]::after{width:2px;background:var(--red);box-shadow:0 0 8px var(--red-glow)}
  /* nom de la section active : écrit à la verticale sous les numéros, il reste
     dans la marge droite et ne recouvre jamais le contenu */
  .secnav__label{position:absolute;right:-4px;top:calc(100% + 14px);display:flex;align-items:center;gap:10px;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);line-height:1}
  .secnav__label::after{content:"";width:1px;height:16px;background:var(--red)}
  .secnav__label.is-new span{animation:snLabel .55s var(--ease-out)}
  @keyframes snLabel{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
}

/* ==========================================================================
   Ordinateur (1024 px et plus)
   ========================================================================== */
@media (min-width:1024px){
  /* ---- 01 HERO : même composition, centrée dans un écran plein. La scène
     (planète, relief, silhouette, annotations) reste calée sur le bloc de
     texte comme dans la maquette ; seuls le ciel, les particules et le fondu
     du bas s'étendent à toute la hauteur. ---------------------------------- */
  html:not(.calage) .home .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr calc(59 * var(--m)) auto auto calc(12 * var(--m)) 1fr;min-height:100vh;min-height:100svh;padding:0}
  html:not(.calage) .home .hero__bg{position:relative;inset:auto;grid-row:1/-1;grid-column:1;display:grid;grid-template-rows:subgrid}
  html:not(.calage) .home .hero__bg > :is(.hero__streak,.hero__bokeh,.hero__orbit,.hero__relief,.hero__figglow,.hero__figure),
  html:not(.calage) .home .hero > :is(.hero__note,.hero__tick,.hero__idx,.hero__rail){grid-row:2/6}
  /* le fondu du bas reste à sa place d'origine (bas de la composition, au moins
     398 px de maquette) et se prolonge en noir jusqu'au bas de l'écran */
  html:not(.calage) .home .hero__fade{grid-row:2/6;top:max(calc(328 * var(--m)),calc(100% - 70 * var(--m)));bottom:auto;height:calc(70 * var(--m) + 60vh);background:linear-gradient(transparent,rgba(6,6,6,.85) calc(70 * var(--m)),rgba(6,6,6,.85))}
  html:not(.calage) .home .hero__content{grid-row:3;grid-column:1}
  html:not(.calage) .home .stats{grid-row:4;grid-column:1}
  html:not(.calage) .home .hero__sky{grid-row:2/6;inset:-60vh 0;background:
    radial-gradient(calc(330 * var(--m)) calc(260 * var(--m)) at calc(735 * var(--m)) calc(200 * var(--m) + 60vh),rgba(150,14,26,.34),transparent 70%),
    radial-gradient(calc(260 * var(--m)) calc(200 * var(--m)) at calc(1000 * var(--m)) calc(70 * var(--m) + 60vh),rgba(70,70,76,.20),transparent 70%),
    radial-gradient(calc(420 * var(--m)) calc(160 * var(--m)) at calc(900 * var(--m)) calc(380 * var(--m) + 60vh),rgba(120,10,20,.28),transparent 70%),
    radial-gradient(calc(300 * var(--m)) calc(200 * var(--m)) at calc(60 * var(--m)) calc(260 * var(--m) + 60vh),rgba(90,8,16,.18),transparent 70%)}

  /* ---- 02 : les annotations laissent la place à l'index des sections :
     écartées de 30 px vers la gauche et remontées au-dessus de sa colonne
     de numéros (centrée dans l'écran), pour ne pas former deux listes
     côte à côte ---------------------------------------------------------- */
  html:not(.calage) .home .about__notes{right:calc(40 * var(--m) + 30px);top:calc(50% - 186px)}

  /* ---- 03 EXPERTISES : les quatre métiers sur une seule rangée ---------- */
  html:not(.calage) .home .exp__grid{row-gap:clamp(20px,4.4vh,calc(36 * var(--m)))}
  html:not(.calage) .home .exp__cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:max(14px,calc(11 * var(--m)))}
  html:not(.calage) .home .xcard{min-height:clamp(280px,44vh,max(300px,calc(250 * var(--m))));padding:max(22px,calc(18 * var(--m))) max(22px,calc(17 * var(--m))) max(20px,calc(16 * var(--m)))}
  html:not(.calage) .home .xcard__title{font-size:max(28px,calc(20.5 * var(--m)))}
  html:not(.calage) .home .xcard__list{padding-right:max(46px,calc(30 * var(--m)))}
  html:not(.calage) .home .xcard__list li{font-size:max(14px,calc(7.2 * var(--m)));line-height:1.75}
  html:not(.calage) .home .xcard__go{--d:max(40px,calc(24 * var(--m)));right:max(16px,calc(12 * var(--m)));bottom:max(16px,calc(12 * var(--m)))}
  html:not(.calage) .home .xcard--identity .xcard__media{width:calc(178 * var(--m));height:calc(178 * var(--m));right:calc(-26 * var(--m));top:calc(-22 * var(--m))}
  html:not(.calage) .home .xcard--web .xcard__media{width:calc(206 * var(--m));right:calc(-74 * var(--m));top:calc(-2 * var(--m))}
  html:not(.calage) .home .xcard--software .xcard__media{width:calc(212 * var(--m));right:calc(-82 * var(--m));top:calc(30 * var(--m))}
  html:not(.calage) .home .xcard--podcast .xcard__media{width:calc(84 * var(--m));right:calc(18 * var(--m));top:calc(-24 * var(--m))}

  /* ---- 05 MÉTHODE : la ligne se remplit à l'arrivée sur la section, les
     étapes s'allument quand elle les atteint ------------------------------ */
  html:not(.calage) .home .method__grid{row-gap:clamp(28px,6vh,calc(48 * var(--m)))}
  html:not(.calage) .home .steps__track{right:0}
  html:not(.calage) .home .steps__fill{transition:transform 1.5s cubic-bezier(.45,.05,.55,.95) .2s}
  html:not(.calage) .home .step.is-on,
  html:not(.calage) .home .step.is-on :is(.step__dot,.step__num,.step__title,.step__txt){transition-delay:var(--sd,0s)}
  html:not(.calage) .home .step:nth-child(1){--sd:.2s}
  html:not(.calage) .home .step:nth-child(2){--sd:.73s}
  html:not(.calage) .home .step:nth-child(3){--sd:.96s}
  html:not(.calage) .home .step:nth-child(4){--sd:1.21s}

  /* ---- 06 RÉALISATIONS : le carrousel déborde toujours à droite mais
     s'efface avant l'index des sections ------------------------------------ */
  html:not(.calage) .home .works__grid{row-gap:clamp(18px,3.8vh,calc(34 * var(--m)))}
  html:not(.calage) .home .slider__viewport{padding:44px 0;margin:-44px 0;clip-path:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 190px),transparent calc(100% - 58px));mask-image:linear-gradient(90deg,#000 calc(100% - 190px),transparent calc(100% - 58px))}
  /* le masque crée un calque : sans z-index, la marge intérieure transparente
     du carrousel passe par-dessus les boutons et avale les clics */
  html:not(.calage) .home .slider__nav{position:relative;inset:auto;z-index:1;margin-top:clamp(12px,2.4vh,calc(18 * var(--m)))}

  /* ---- 07 CONTACT : contact + pied de page = un écran (--ftr-h posé par
     sections.js ; sans lui, le contact fait un écran et le pied suit) ----- */
  html:not(.calage) .home > .cta{min-height:calc(100vh - var(--ftr-h,0px));min-height:calc(100svh - var(--ftr-h,0px))}
  /* l'annotation remonte au-dessus de la colonne de l'index : elle ne la
     longe plus, et le bord de la lune ne la traverse plus */
  html:not(.calage) .home .cta__notes{right:calc(28 * var(--m) + 44px);top:calc(50vh - 170px);bottom:auto}
  html:not(.calage) .home .cta__haze{background:radial-gradient(calc(380 * var(--m)) calc(160 * var(--m)) at calc(820 * var(--m)) 72%,rgba(246,43,62,.16),transparent 70%),linear-gradient(90deg,rgba(5,5,5,.55) calc(380 * var(--m)),transparent calc(600 * var(--m)))}
}

/* ---- 1024 à 1279 px : l'index des sections manque de place ---------------- */
@media (min-width:1024px) and (max-width:1279px){
  /* le contenu s'arrête au moins 30 px avant les numéros */
  html:not(.calage) .home :is(.exp__grid,.pod__grid,.method__grid){padding-right:max(calc(55 * var(--m)),72px)}
}
@media (min-width:1024px) and (max-width:1199px){
  /* les annotations du studio (décor) toucheraient l'écran incliné */
  html:not(.calage) .home .about__notes{display:none}
}

/* ---- 1024 à 1279 px, écran assez haut : les quatre métiers en 2 × 2 (sur
   une seule rangée, les cartes sont trop étroites et leurs listes se coupent
   mot à mot). En dessous de 740 px de haut, la grille 2 × 2 ne tiendrait
   pas dans l'écran : on garde une rangée. -------------------------------- */
@media (min-width:1024px) and (max-width:1279px) and (min-height:740px){
  html:not(.calage) .home .exp__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:not(.calage) .home .xcard{min-height:clamp(170px,24vh,230px)}
  html:not(.calage) .home .xcard--identity .xcard__media{width:150px;height:150px;right:-10px;top:-18px}
  html:not(.calage) .home .xcard--web .xcard__media{width:190px;right:-40px;top:-4px}
  html:not(.calage) .home .xcard--software .xcard__media{width:200px;right:-50px;top:14px}
}

/* ---- haut de l'accueil, de 1024 à 1100 px environ : l'annotation « Des idées
   qui prennent une autre dimension », son filet et le « 01 » s'écartent
   ensemble du chapô qu'ils chevauchaient. Au-delà, max() redonne exactement
   la position d'origine. ------------------------------------------------- */
@media (min-width:1024px) and (max-width:1119px){
  html:not(.calage) .home .hero__note--c{left:max(calc(558 * var(--m)),calc(152 * var(--m) + 412px))}
  html:not(.calage) .home .hero__tick--c{left:max(calc(540 * var(--m)),calc(134 * var(--m) + 412px))}
  html:not(.calage) .home .hero__idx{left:max(calc(535 * var(--m)),calc(129 * var(--m) + 412px))}
}

/* ---- écrans de plus de 1920 px : la scène reste plafonnée à 1920 px ; le
   relief du haut et les rochers du contact s'effacent vers la droite au lieu
   de s'arrêter net (fondu nul à 1920 px, de plus en plus large ensuite) ---- */
@media (min-width:1921px){
  html:not(.calage) .home .hero__relief{
    -webkit-mask-image:linear-gradient(#000 78%,transparent),linear-gradient(90deg,#000 calc(100% - min(260px,(100vw - 1920px) * .6)),transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(#000 78%,transparent),linear-gradient(90deg,#000 calc(100% - min(260px,(100vw - 1920px) * .6)),transparent);mask-composite:intersect}
  html:not(.calage) .home .cta__rocks{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - min(280px,(100vw - 1920px) * .6)),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - min(280px,(100vw - 1920px) * .6)),transparent)}
}

/* ==========================================================================
   Tablette et téléphone (moins de 1024 px) : chaque section tient dans l'écran
   ========================================================================== */
@media (max-width:1023px){
  html:not(.calage) .home{--fs-gap:clamp(14px,2.6vh,28px);--fs-top:calc(var(--hdr) + 46px)}
  html:not(.calage) .home .sec__rail{top:calc(var(--hdr) + 14px);bottom:auto}

  /* 02 : l'écran du studio, plus bas */
  html:not(.calage) .home .about__grid{padding:0 24px}
  html:not(.calage) .home .about__title{margin-top:16px}
  html:not(.calage) .home .about__text{padding-top:16px}
  html:not(.calage) .home .about__text .btn{margin-top:18px}
  html:not(.calage) .home .about__visual{height:clamp(140px,22svh,300px);margin-top:clamp(12px,2.2vh,24px)}

  /* 03 : les quatre cartes en bande qui glisse */
  html:not(.calage) .home .exp__grid{row-gap:20px}
  html:not(.calage) .home .exp__intro .txt{margin-top:14px}
  /* overflow-y:hidden : la bande ne défile qu'à l'horizontale ; sinon la
     première carte, pas encore apparue (décalée vers le bas), la rend
     défilable en hauteur et elle avale un glissé vertical de la page */
  html:not(.calage) .home .exp__cards{display:flex;gap:12px;margin:0 -24px;padding:4px 24px 8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;perspective:none}
  html:not(.calage) .home .exp__cards::-webkit-scrollbar{display:none}
  html:not(.calage) .home .xcard{flex:0 0 min(78vw,340px);min-height:clamp(240px,34svh,300px);scroll-snap-align:start}
  /* la carte suivante dépasse à droite : elle doit se voir tout de suite pour
     inviter à glisser (seule la première garde son apparition) */
  html.js:not(.calage) .home .exp__cards .xcard.rv:nth-child(n+2){opacity:1;transform:none}

  /* 04 : micro en fond, lecteur et épisodes resserrés */
  html:not(.calage) .home .pod__mic{position:absolute;left:auto;right:-16vw;top:calc(var(--hdr) + 6px);width:min(78vw,400px);margin:0;transform:none;opacity:.4;z-index:0}
  html:not(.calage) .home .pod__intro{margin-bottom:20px}
  html:not(.calage) .home .player{padding:34px 16px 14px}
  html:not(.calage) .home .player__title{font-size:20px}
  html:not(.calage) .home .player__row{margin-top:10px}
  html:not(.calage) .home .player__msg{min-height:0;margin-top:4px}
  /* la barre de lecture laisse passer le balayage vertical (sinon un doigt posé
     dessus bloque le défilement de la page) ; le glisser horizontal reste au lecteur */
  html:not(.calage) .home .player__wave{touch-action:pan-y}
  html:not(.calage) .home .eps{margin-top:12px}
  html:not(.calage) .home .ep{min-height:44px;padding:3px 0}
  html:not(.calage) .home .ep__name{font-size:14px}

  /* 05 : étapes compactes */
  html:not(.calage) .home .method__grid{row-gap:0}
  html:not(.calage) .home .steps{margin-top:22px}
  html:not(.calage) .home .steps__list{row-gap:16px}
  html:not(.calage) .home .step__title{font-size:21px}
  html:not(.calage) .home .step__txt{margin-top:6px;font-size:14px;line-height:1.55}
  /* quand la colonne tient dans l'écran, method.js pose .is-arrive : la ligne
     se remplit à l'arrivée sur la section, comme sur ordinateur, et chaque
     étape s'allume quand la ligne atteint son cercle (délais mesurés sur la
     colonne, de 375 à 820 px) */
  html:not(.calage) .home .steps.is-arrive .steps__fill{transition:transform 1.5s cubic-bezier(.45,.05,.55,.95) .2s}
  html:not(.calage) .home .steps.is-arrive .step.is-on,
  html:not(.calage) .home .steps.is-arrive .step.is-on :is(.step__dot,.step__num,.step__title,.step__txt){transition-delay:var(--sd,0s)}
  html:not(.calage) .home .steps.is-arrive .step:nth-child(1){--sd:.25s}
  html:not(.calage) .home .steps.is-arrive .step:nth-child(2){--sd:.76s}
  html:not(.calage) .home .steps.is-arrive .step:nth-child(3){--sd:1.02s}
  html:not(.calage) .home .steps.is-arrive .step:nth-child(4){--sd:1.27s}

  /* 06 */
  html:not(.calage) .home .works__grid{row-gap:0}
  html:not(.calage) .home .slider{margin-top:22px}
  html:not(.calage) .home .slider__nav{margin-top:14px}

  /* 07 : le texte au centre, la lune et les rochers posés sur le pied de page */
  html:not(.calage) .home > .cta{padding-bottom:0}
  html:not(.calage) .home .cta__grid{padding:0 24px;margin-block:auto}
  html:not(.calage) .home .cta__scene{flex:none;order:2}
}

/* Téléphones bas (moins de 760 px de haut, ex. 360 × 740) : on resserre encore */
@media (max-width:1023px) and (max-height:760px){
  html:not(.calage) .home{--fs-gap:14px;--fs-top:calc(var(--hdr) + 40px)}
  html:not(.calage) .home .sec__rail{top:calc(var(--hdr) + 10px)}
  html:not(.calage) .home .h2{font-size:32px}
  html:not(.calage) .home .txt,html:not(.calage) .home .about__text .txt{font-size:15px;line-height:1.55}
  html:not(.calage) .home .about__visual{height:clamp(120px,19svh,200px)}
  html:not(.calage) .home .player{padding:30px 14px 12px}
  html:not(.calage) .home .player__title{font-size:19px;min-height:0}
  html:not(.calage) .home .ep{min-height:40px}
  html:not(.calage) .home .pod__intro{margin-bottom:16px}
  html:not(.calage) .home .steps{margin-top:18px}
  html:not(.calage) .home .steps__list{row-gap:12px}
  html:not(.calage) .home .step__title{font-size:20px}
  html:not(.calage) .home .step__txt{font-size:13.5px;line-height:1.5}
  html:not(.calage) .home .slider{margin-top:18px}
  html:not(.calage) .home .proj__shot{height:min(44vw,200px)}
}

/* Téléphones très bas (375 × 667) : quelques pixels de plus pour que chaque
   section tienne dans l'écran. Les numéros de section restent : ils montent
   un peu (trait plus proche du chiffre) et les intervalles se resserrent. */
@media (max-width:1023px) and (max-height:700px){
  html:not(.calage) .home{--fs-top:calc(var(--hdr) + 34px)}
  html:not(.calage) .home .sec__rail{top:calc(var(--hdr) + 8px)}
  html:not(.calage) .home .sec__rail::before{top:17px}
  html:not(.calage) .home .exp__grid{row-gap:14px}
  html:not(.calage) .home .steps{margin-top:12px}
  html:not(.calage) .home .steps__list{row-gap:6px}
  html:not(.calage) .home .step__txt{margin-top:4px}
  html:not(.calage) .home .works__intro .btn{margin-top:12px}
  html:not(.calage) .home .slider{margin-top:12px}
  html:not(.calage) .home .slider__nav{margin-top:10px}
}

/* ==========================================================================
   VAGUE 3 · VITRINE (01/10/2026) : contrat commun de l'accueil.
   Jetons d'échelle et de mouvement, « tambour » entre les sections, arrivées
   communes (titres, apparitions, rail, étiquette), hero sur grands écrans,
   cadrage du fond vidéo par section, volume de poussière (home/stage.js).
   Chaque section règle le reste dans assets/css/home/<section>.css.
   Règle : tout état caché ou animé est écrit sous html.yn-fx (posée par
   home/stage.js : jamais en ?calage, dans l'éditeur ni en animations
   réduites). Sans cette classe, la page est dans son état final.
   ========================================================================== */

/* ---- mouvement : jetons communs ------------------------------------------ */
@property --fill{syntax:'<percentage>';inherits:false;initial-value:112%}
@property --hr{syntax:'<percentage>';inherits:false;initial-value:160%}
/* voile et liseré du tambour : non hérités (le contenu des sections n'a pas à
   recalculer son style à chaque image) ; seuls les ::before / ::after les lisent */
@property --shade{syntax:'<number>';inherits:false;initial-value:0}
@property --rim{syntax:'<number>';inherits:false;initial-value:0}
/* jetons typés (performance, sans effet visuel) : enregistrés, ces jetons sont
   calculés une fois, là où ils sont déclarés, en une valeur simple (0.75px,
   500ms, 1) ; non enregistrés, chaque var() recopiait toute leur formule
   (jusqu'à 1 300 caractères pour --mw, qui imbrique --u, --fx, --xw...) et
   chaque élément la relisait à chaque recalcul de style, soit à chaque image
   pour le contenu d'une section qui part (--rel). Mêmes valeurs (au
   millionième près) ; seuls les jetons sans unité relative à l'élément (ni %,
   ni em, ni cq*) le sont. Les jetons de base.css (--m, --fs-*, --hdr) ne le
   sont pas : le hero garde exactement sa géométrie.
   Les valeurs initiales reprennent les replis des var() (var(--tk,1),
   var(--i,0), var(--tilt,-38deg), var(--rise,0%)). */
@property --u{syntax:'<length>';inherits:true;initial-value:0px}
@property --fx{syntax:'<length>';inherits:true;initial-value:0px}
@property --xtra{syntax:'<length>';inherits:true;initial-value:0px}
@property --pl{syntax:'<length>';inherits:true;initial-value:0px}
@property --pr{syntax:'<length>';inherits:true;initial-value:0px}
@property --avail{syntax:'<length>';inherits:true;initial-value:0px}
@property --t-body{syntax:'<length>';inherits:true;initial-value:0px}
@property --t-lede{syntax:'<length>';inherits:true;initial-value:0px}
@property --t-small{syntax:'<length>';inherits:true;initial-value:0px}
@property --t-mono{syntax:'<length>';inherits:true;initial-value:0px}
@property --t-btn{syntax:'<length>';inherits:true;initial-value:0px}
@property --h-btn{syntax:'<length>';inherits:true;initial-value:0px}
@property --fs-gap{syntax:'<length>';inherits:true;initial-value:0px}
@property --fs-top{syntax:'<length>';inherits:true;initial-value:0px}
@property --tk{syntax:'<number>';inherits:true;initial-value:1}
@property --i{syntax:'<number>';inherits:true;initial-value:0}
@property --t-label{syntax:'<time>';inherits:true;initial-value:0s}
@property --t-title{syntax:'<time>';inherits:true;initial-value:0s}
@property --t-red{syntax:'<time>';inherits:true;initial-value:0s}
@property --t-rv{syntax:'<time>';inherits:true;initial-value:0s}
@property --st-item{syntax:'<time>';inherits:true;initial-value:0s}
@property --st-line{syntax:'<time>';inherits:true;initial-value:0s}
/* jetons propres aux sections (home/about, pod, method, works, contact.css) */
@property --xt{syntax:'<length>';inherits:true;initial-value:0px}
@property --xw{syntax:'<length>';inherits:true;initial-value:0px}
@property --S{syntax:'<length>';inherits:true;initial-value:0px}
@property --lab-h{syntax:'<length>';inherits:true;initial-value:0px}
@property --ft{syntax:'<length>';inherits:true;initial-value:0px}
@property --mb{syntax:'<length>';inherits:true;initial-value:0px}
@property --ml{syntax:'<length>';inherits:true;initial-value:0px}
@property --beam{syntax:'<length>';inherits:true;initial-value:0px}
@property --sky{syntax:'<length>';inherits:true;initial-value:0px}
@property --dot{syntax:'<length>';inherits:true;initial-value:0px}
@property --bar{syntax:'<length>';inherits:true;initial-value:0px}
@property --ct-d{syntax:'<length>';inherits:true;initial-value:0px}
@property --ct-cx{syntax:'<length>';inherits:true;initial-value:0px}
@property --ct-bw{syntax:'<length>';inherits:true;initial-value:0px}
/* écrits à chaque image par scrollfx.js et lus par l'élément lui-même
   seulement : non hérités, leur réécriture ne recalcule plus tout le
   contenu de l'écran du studio ni de la lune */
@property --tilt{syntax:'<angle>';inherits:false;initial-value:-38deg}
@property --rise{syntax:'<percentage>';inherits:false;initial-value:0%}
:root{
  --e-out:cubic-bezier(.16,1,.3,1);      /* arrivées (= --ease-out existant) */
  --e-io:cubic-bezier(.65,0,.35,1);      /* tracés, remplissages, lumière qui voyage, caméra du fond */
  --e-in:cubic-bezier(.7,0,.84,0);       /* rares départs minutés */
  --e-pop:cubic-bezier(.34,1.4,.64,1);   /* petits objets qui se posent (dépassement ≤ 3 %) */
  --e-spring:linear(0,.04 4%,.135 8%,.26 12%,.393 16%,.522 20%,.666 25%,.784 30%,.874 35%,.939 40%,.988 46%,1.015 52%,1.028 60%,1.025 70%,1.016 80%,1.008 90%,1 100%);
  --d-hover:240ms;--d-state:600ms;--d-in:1100ms;--d-trace:1500ms;--d-cam:1600ms;
  --st-item:90ms;--st-line:110ms;
  --t-label:60ms;--t-title:120ms;--t-red:450ms;--t-rv:500ms;   /* décalages par défaut après T0 */
}
@supports not (transition-timing-function:linear(0,1)){:root{--e-spring:cubic-bezier(.34,1.25,.64,1)}}

/* ---- échelle : une planche 1920 × 1080 posée en « contain » (1 u = 1 px de planche) */
html:not(.calage) main.home{
  --u:min(calc((100vw - var(--sbw,0px)) / 1920),calc(100vh / 1080));
  --u:min(calc((100vw - var(--sbw,0px)) / 1920),calc(100svh / 1080));
  --fx:max(0px,calc((100vw - var(--sbw,0px) - 2240 * var(--u)) / 2));   /* marge des écrans très larges (21:9) */
  --pl:calc(var(--fx) + max(170 * var(--u),97 * var(--m)));             /* bord gauche du contenu */
  --pr:calc(var(--fx) + max(120 * var(--u),96px));                      /* réserve droite (index) */
  --xtra:max(0px,calc(100svh - 1080 * var(--u)));                       /* surplus vertical (16:10) */
  --avail:calc(100svh - var(--fs-top) - var(--fs-gap));                 /* hauteur utile d'une section */
  --t-body:max(16px,calc(20 * var(--u)));
  --t-lede:max(17px,calc(23 * var(--u)));
  --t-small:max(14px,calc(17 * var(--u)));
  --t-mono:max(10.5px,calc(13 * var(--u)));
  --t-btn:max(10.5px,calc(13 * var(--u)));
  --h-btn:max(44px,calc(60 * var(--u)));
  --tk:1;
}
@media (max-width:1023px){
  html:not(.calage) main.home{
    --u:min(calc(100vw / 390),calc(100svh / 844));
    --fx:0px;--pl:24px;--pr:24px;--xtra:0px;
    --t-body:16px;--t-lede:17px;--t-small:14px;--t-mono:10.5px;--t-btn:10.5px;--h-btn:44px;
  }
}
@media (max-width:1023px) and (max-height:760px){html:not(.calage) main.home{--t-body:15px}}

/* ---- tailles communes des sections 02 à 07 ------------------------------- */
html:not(.calage) main.home > .sec .sec__label span{font-size:var(--t-mono)}
html:not(.calage) main.home > .sec .btn{--h:var(--h-btn);font-size:var(--t-btn)}
@media (min-width:1024px){
  html:not(.calage) main.home > .sec .sec__label{gap:max(8px,calc(12 * var(--u)))}
  html:not(.calage) main.home > .sec .sec__label::before{width:calc(64 * var(--u))}
  html:not(.calage) main.home > .sec .sec__label span{padding:max(4px,calc(5.5 * var(--u))) max(8px,calc(11 * var(--u)))}
  html:not(.calage) main.home > .sec .btn{gap:max(10px,calc(13 * var(--u)));padding:0 max(22px,calc(30 * var(--u)))}
  /* rail : à l'échelle de la planche, un peu plus loin du bord */
  html:not(.calage) main.home > .sec .sec__rail{left:calc(var(--fx) + max(88 * var(--u),50 * var(--m)));width:max(22px,calc(24 * var(--u)))}
  html:not(.calage) main.home > .sec .sec__num{font-size:max(11px,calc(14 * var(--u)))}
  html:not(.calage) main.home > .sec .sec__rail::before{top:max(20px,calc(27 * var(--u)))}
  html:not(.calage) main.home > .sec .sec__rail::after{left:calc(11 * var(--u));top:max(30px,calc(40 * var(--u)))}
  /* index des sections */
  html:not(.calage) .secnav a{font-size:max(10.5px,calc(12 * var(--u)));height:max(24px,calc(28 * var(--u)))}
  html:not(.calage) .secnav__label{font-size:max(10px,calc(11 * var(--u)))}
}

/* ---- tambour : voile et liseré de couture (--shade / --rim publiés par
   sections.js pendant un glissé ; nuls au repos). Les ::before / ::after des
   sections de l'accueil appartiennent à ce contrat : aucune section ne les
   utilise. ------------------------------------------------------------------ */
html.yn-engine.yn-fx main.home > section::after{content:"";position:absolute;inset:0;z-index:60;background:#060606;--shade:inherit;opacity:var(--shade,0);pointer-events:none}
/* liseré : filet de 2 px + halo peint en dégradés (pas d'ombre floue à
   repeindre à chaque image) */
html.yn-engine.yn-fx main.home > section::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(44 * var(--u));z-index:61;
  background:linear-gradient(90deg,transparent,#f62b3e 18%,#ffd9dc 50%,#f62b3e 82%,transparent) top/100% 2px no-repeat,
    radial-gradient(50% 100% at 50% 0,rgba(246,43,62,.42),rgba(246,43,62,.12) 45%,transparent 100%) top/100% 100% no-repeat;
  --rim:inherit;opacity:var(--rim,0);pointer-events:none}
/* pendant un glissé : sections et calques du tambour sur leurs propres couches
   (échelle de rendu figée : pas de re-pixellisation à chaque image) */
html.yn-engine.yn-fx.yn-moving main.home > section{will-change:transform}
html.yn-engine.yn-fx.yn-moving main.home > section::before,html.yn-engine.yn-fx.yn-moving main.home > section::after{will-change:opacity}

/* ---- section entièrement hors de l'écran (.is-off, posée par sections.js) :
   les anneaux du hero ne tournent plus pour rien (invisible : ils reprennent
   là où ils en étaient) --------------------------------------------------- */
html.yn-fx main.home > .hero.is-off .hero__rings .spin{animation-play-state:paused}

/* ---- départ / arrivée pilotés par la position (réversibles) --------------- */
html.yn-fx main.home > section{--lv:clamp(0,calc(var(--rel,0) * -1),1);--ar:clamp(0,var(--rel,0),1)}
/* le hero (intouchable) ne lit ni --rel, ni --lv, ni --ar : ses enfants directs
   les fixent à 0, ce qui arrête leur héritage. Une réécriture de --rel sur le
   hero (à chaque image du passage 01 <-> 02) ne recalcule plus que lui et ses
   enfants directs, au lieu de tout son contenu. Aucun effet visible. */
html.yn-fx main.home > .hero > *{--rel:0;--lv:0;--ar:0}
html.yn-fx main.home > section.st-again{--tk:.6}
html.yn-fx main.home > section.st-reset,html.yn-fx main.home > section.st-reset *,
html.yn-fx main.home > section.st-reset *::before,html.yn-fx main.home > section.st-reset *::after{transition:none!important;animation:none!important}

/* ---- titres h2 : les lignes se relèvent en charnière 3D ; les mots rouges
   arrivent en contour et se remplissent de gauche à droite avec un front
   chaud (la signature « contour » du hero, déclinée). État final = rouge
   plein, comme avant. ------------------------------------------------------- */
html.yn-fx main.home > .sec .lines > .ln{perspective:6em;perspective-origin:50% 100%}
html.yn-fx main.home > .sec .lines > .ln > span{transform-origin:50% 100%;
  transition:transform calc(900ms * var(--tk)) var(--e-out) calc((var(--t-title) + var(--i,0) * var(--st-line)) * var(--tk))}
html.yn-fx main.home > .sec:not(.st-in) .lines > .ln > span{transform:translate3d(0,100%,0) rotateX(-75deg)}
html.yn-fx main.home > .sec.st-in .lines > .ln > span{transform:none}
html.yn-fx main.home > .sec .h2 .red{--fill:-10%;color:transparent;-webkit-text-stroke:max(1.2px,.012em) var(--red);
  background:linear-gradient(90deg,var(--red) calc(var(--fill) - 10%),#ffd9dc var(--fill),transparent calc(var(--fill) + 3%));-webkit-background-clip:text;background-clip:text;
  transition:--fill calc(650ms * var(--tk)) var(--e-io) calc((var(--t-red) + var(--i,0) * var(--st-line)) * var(--tk))}
html.yn-fx main.home > .sec.st-in .h2 .red{--fill:112%}

/* ---- apparitions des sections 02 à 07 : déclenchées par l'arrivée de la
   section (.st-in), et non plus par reveal.js ------------------------------- */
html.yn-fx main.home > .sec :is(.rv,.rv-fade){
  transition:opacity calc(900ms * var(--tk)) var(--e-out),transform calc(1100ms * var(--tk)) var(--e-out);
  transition-delay:calc((var(--t-rv) + var(--i,0) * var(--st-item)) * var(--tk))}
html.yn-fx main.home > .sec:not(.st-in) .rv{opacity:0;transform:translate3d(0,calc(28 * var(--u)),0)}
html.yn-fx main.home > .sec:not(.st-in) .rv-fade{opacity:0}
html.yn-fx main.home > .sec.st-in :is(.rv,.rv-fade){opacity:1;transform:none}
html.yn-fx main.home > .sec .rv-clip{transition:clip-path calc(1300ms * var(--tk)) var(--e-out) calc(var(--t-rv) * var(--tk))}
html.yn-fx main.home > .sec:not(.st-in) .rv-clip{clip-path:inset(0 0 100% 0)}
html.yn-fx main.home > .sec.st-in .rv-clip{clip-path:inset(0 0 0 0)}
html.yn-fx main.home > .sec .rv-clip > :is(img,.about__room){transition:scale calc(1800ms * var(--tk)) var(--e-out) calc(var(--t-rv) * var(--tk))}
html.yn-fx main.home > .sec:not(.st-in) .rv-clip > :is(img,.about__room){scale:1.08}
html.yn-fx main.home > .sec.st-in .rv-clip > :is(img,.about__room){scale:1}

/* ---- cadre : étiquette (filet puis cartouche), rail (tiret, filet vertical,
   numéro qui sort d'un masque) ---------------------------------------------- */
html.yn-fx main.home > .sec .sec__label.rv{transition-delay:calc(var(--t-label) * var(--tk))}
html.yn-fx main.home > .sec .sec__label.rv::before{transition:transform calc(900ms * var(--tk)) var(--e-io) calc(var(--t-label) * var(--tk))}
html.yn-fx main.home > .sec:not(.st-in) .sec__label.rv::before{transform:scaleX(0)}
html.yn-fx main.home > .sec.st-in .sec__label.rv::before{transform:none}
html.yn-fx main.home > .sec .sec__rail::before{transform-origin:0 50%;transition:transform calc(300ms * var(--tk)) var(--e-out)}
html.yn-fx main.home > .sec .sec__rail::after{transform-origin:50% 0;transition:transform calc(900ms * var(--tk)) var(--e-io) calc(120ms * var(--tk))}
html.yn-fx main.home > .sec .sec__num{transition:transform calc(500ms * var(--tk)) var(--e-out) calc(80ms * var(--tk)),clip-path calc(500ms * var(--tk)) var(--e-out) calc(80ms * var(--tk))}
html.yn-fx main.home > .sec:not(.st-in) .sec__rail::before{transform:scaleX(0)}
html.yn-fx main.home > .sec:not(.st-in) .sec__rail::after{transform:scaleY(0)}
html.yn-fx main.home > .sec:not(.st-in) .sec__num{transform:translate3d(0,100%,0);clip-path:inset(0 0 100% 0)}
html.yn-fx main.home > .sec.st-in .sec__num{clip-path:inset(0)}

/* ---- 01 HERO sur les écrans de plus de 1920 px : la même composition grandit
   à l'identique (bornée par la hauteur). Les jetons --fs-* sont calculés sur
   :root : on les redéclare ici pour qu'ils suivent le nouveau --m. ---------- */
@media (min-width:1921px){
  html:not(.calage) .home .hero{
    --m:max(calc(1920px / 1086),min(calc(100vw / 1086),calc((100svh - 190px) / 420)));
    --fs-h1:max(calc(var(--mins) * 44px),calc(59.5 * var(--m)));
    --fs-body:max(calc(var(--mins) * 15px),calc(7.4 * var(--m)));
    --fs-small:max(calc(var(--mins) * 13px),calc(6.6 * var(--m)));
    --fs-micro:max(calc(var(--mins) * 10.5px),calc(5 * var(--m)));
    --fs-nano:max(calc(var(--mins) * 9.5px),calc(4.6 * var(--m)));
  }
}

/* ---- fond vidéo : cadrage par section (homebg.js pose data-sec) ----------- */
html:not(.calage) .home-bg{overflow:hidden}
html:not(.calage) .home-bg__video{transform:scale(var(--vs,1)) translate(var(--vx,0%),var(--vy,0%));transition:transform var(--d-cam) var(--e-io)}
html:not(.calage) .home-bg[data-sec="expertises"]{--vs:1.04}
html:not(.calage) .home-bg[data-sec="podcast"]{--vs:1.12;--vx:-2%;--vy:1.5%;--vlite:.9}
html:not(.calage) .home-bg[data-sec="process"]{--vs:1.06;--vx:2%;--vy:-1.5%;--vsh:.08}
html:not(.calage) .home-bg:is([data-sec="works"],[data-sec="avis"]){--vs:1.1;--vy:3%}
html:not(.calage) .home-bg[data-sec="contact"]{--vs:1.16;--vx:-1%;--vy:4%;--vsh:.18}
/* voile : un peu plus clair sur le foyer du podcast, plus sombre ailleurs,
   et un cran de plus pendant un glissé (montée 200 ms, retombée 600 ms) */
html:not(.calage) .home-bg__shade{opacity:var(--vlite,1);transition:opacity var(--d-cam) var(--e-io)}
html:not(.calage) .home-bg__shade::before,html:not(.calage) .home-bg__shade::after{content:"";position:absolute;inset:0;background:#060606;opacity:0;pointer-events:none}
html:not(.calage) .home-bg__shade::before{opacity:var(--vsh,0);transition:opacity var(--d-cam) var(--e-io)}
html:not(.calage) .home-bg__shade::after{transition:opacity .6s var(--ease)}
html.yn-moving:not(.calage) .home-bg__shade::after{opacity:.12;transition-duration:.2s}
/* teinte du site présenté en 06 (événement ynel:tint, calque créé par homebg.js) */
.home-bg__tint{position:absolute;inset:0;background:rgb(var(--tint,246,43,62));mix-blend-mode:soft-light;opacity:0;transition:opacity .9s var(--ease),background-color .9s var(--ease);pointer-events:none}
.home-bg[data-sec="works"] .home-bg__tint{opacity:.14}
/* passage 02 → 03 vers le bas : la vidéo s'ouvre depuis l'horizon (une fois) */
.home-bg.is-horizon{transition:none;-webkit-mask-image:radial-gradient(circle at 50% 110%,#000 var(--hr),transparent calc(var(--hr) + 20%));mask-image:radial-gradient(circle at 50% 110%,#000 var(--hr),transparent calc(var(--hr) + 20%));animation:ynHorizon 1.2s var(--e-io) both}
@keyframes ynHorizon{from{--hr:0%}to{--hr:160%}}
@media (prefers-reduced-motion:reduce){
  .home-bg__video,.home-bg__shade,.home-bg__shade::before,.home-bg__shade::after,.home-bg__tint{transition:none!important}
  .home-bg.is-horizon{animation:none;-webkit-mask-image:none;mask-image:none}
}

/* ---- volume de poussière (canvas WebGL créé par home/stage.js) ------------- */
.home-dust{position:fixed;inset:0 0 auto 0;z-index:0;width:100%;height:100vh;height:100lvh;pointer-events:none;opacity:0}
html.calage .home-dust{display:none}

/* PORTÉE DE --rel / --lv / --ar (performance, appliquée le 01/10) : --rel / --lv / --ar ne
   descendent que jusqu'aux éléments qui les lisent. Chaque descendant d'une
   section les fixe à 0 (ce qui arrête l'héritage : une réécriture de --rel
   ne recalcule plus que la section, ses enfants directs et les chemins
   ci-dessous), sauf les éléments qui lisent ces variables et leurs ancêtres,
   qui les héritent. Tout nouvel effet de départ ou d'arrivée qui lit --rel,
   --lv ou --ar dans un nouvel élément doit ajouter cet élément (et ses
   ancêtres jusqu'à la section) à la liste. */
html.yn-fx main.home > section *{--rel:0;--lv:0;--ar:0}
html.yn-fx main.home > section :is(
  .about__grid,
  .exp__grid,.exp__cards,.xcard,
  .pod__grid,.pod__intro,.pod__mic,.pod__stage,.pod__dep,.pod__ringd,.pod__barsd,.pod__floor,.pod__title,.pod__clips,
  .method__grid,.method__grid > div:first-child,.steps,
  .works__grid,.slider,.slider__viewport,.works__glow,
  .cta__scene,.cta__ridge,.cta__lit,.cta__orb){--rel:inherit;--lv:inherit;--ar:inherit}