/* ============================================================
   SAMATSA · section 4 — « Plus tu t'engages avec Samatsa,
   plus Samatsa s'engage avec toi. »

   Principe : la section n'est pas une grille de cartes mais une
   ASCENSION. Le fond se découpe en quatre bandes horizontales —
   ivoire (le gratuit), terracotta (l'Immersion), bleu nuit
   (Samatsa Annuel), bleu profond dense (Transformation) — et la
   tour isométrique, collée à droite, sert de traduction visuelle
   du niveau d'engagement : à chaque étape active, la salle
   correspondante s'allume.

   Tour + logique de spotlight repris de v10/parcours-spotlight-va
   (assets/css/spotlight-va.css, assets/js/spotlight-va.js).

   Feuille ADDITIVE : hero.css, section2.css et section3.css ne
   sont pas touchés.
   ============================================================ */

:root{
  --s4-ivoire:#F3F1ED;
  --s4-off:#FAFAF8;
  --s4-terra:#C9775A;
  --s4-terra-deep:#A85E45;
  --s4-navy:#0B1D33;
  --s4-navy-2:#132B49;
  --s4-deep:#071426;
  --s4-or:#C5A96A;
  --s4-brume:#D9DEE6;
  --s4-steel:#38587A;

  --s4-wrap:1440px;
}

/* Pas de `.s4 img{height:auto}` ici : la seule image de la section est la
   tour, posée en inset:0 dans une scène qui porte déjà le bon ratio. Une
   règle `height:auto` plus spécifique que `.tower-image` la ferait
   déborder dès que la scène n'est plus à sa largeur nominale. */

/* ══════════ JONCTION SECTION 3 → SECTION 4 ══════════
   Il n'y a plus rien ici. La bande degradee de 96 px qui remontait du
   bleu de la section 3 vers l'ivoire a ete retiree : le bleu s'arrete,
   l'ivoire commence, et la couture entre les deux sections se lit comme
   les trois coupes internes de la section 4. Aucun fondu, aucun halo.
   La variable `--s4-hinge-h` est devenue sans objet.               */

/* ══════════ LA SECTION ══════════
   Les quatre bandes sont posées en une seule nappe de fond, coupées
   net : c'est l'arête qui structure la page, pas un fondu.        */
.s4{
  position:relative;
  /* la ligne de mire du parcours, lue par section4.js */
  --s4-focus:.46;
  color:var(--s4-navy);
  padding:clamp(3.2rem,5vw,5.4rem) 0 clamp(4rem,6vw,6.5rem);
  isolation:isolate;
}
/* Surtout PAS d'overflow:hidden sur .s4 : un ancêtre qui coupe le
   débordement annule le position:sticky de la tour. Le recadrage de la
   tour est fait par .s4__frame, qui n'est pas un ancêtre du sticky. */
/* Quatre aplats, trois coupes FRANCHES — aucun dégradé, aucun halo. Un
   arrêt double à la même position produit une arête nette ; c'est ce qui
   donne la lecture « bandes » plutôt que « brume colorée ».
   --b1 … --b3 sont écrits par section4.js : ce sont les bords hauts réels
   des étapes 2, 3 et 4. La coupe tombe donc exactement là où une étape
   commence, jamais au milieu d'un texte. Les valeurs par défaut servent
   avant l'exécution du script.                                          */
.s4__bands{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,
    var(--s4-ivoire)  0,
    var(--s4-ivoire)  var(--b1,30%),
    var(--s4-terra)   var(--b1,30%),
    var(--s4-terra)   var(--b2,52%),
    var(--s4-navy-2)  var(--b2,52%),
    var(--s4-navy-2)  var(--b3,72%),
    var(--s4-deep)    var(--b3,72%),
    var(--s4-deep)    100%);
}
/* grain lumineux très bas, pour que les aplats ne soient jamais plats */
.s4__field{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.s4__grid{
  position:absolute;inset:38% 0 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
/* La nappe de lumière radiale a été retirée : sur des bandes à arête
   franche, elle réintroduisait précisément le brouillard qu'on cherche à
   supprimer. Seule la trame très basse reste, comme texture. */

.wrap4{
  position:relative;z-index:1;width:100%;
  max-width:var(--s4-wrap);margin-inline:auto;padding-inline:var(--pad);
}

.rv4{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv4.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv4{opacity:1;transform:none;transition:none}}

/* ══════════ L'EN-TÊTE ══════════ */
.s4__head{margin-bottom:clamp(2.4rem,4vw,4rem)}
/* Le label reprend la classe `.eyebrow` du hero (hero.css) : meme corps,
   meme tracking, meme bleu acier, meme carre Samatsa en clip-path. Rien
   n'est redefini ici — c'est la seule facon de garantir que les deux
   labels de la page restent identiques quand l'un des deux bouge.
   Seule la gouttiere sous le label est reprise, la section ayant un
   en-tete plus aere que le hero. */
.s4__head .eyebrow{margin-bottom:1.25rem}
.s4__title{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.15rem,1.2rem + 2.6vw,3.5rem);
  line-height:1.06;letter-spacing:-.024em;
  color:var(--s4-navy);
}
.s4__title em{
  display:block;font-style:italic;
  color:rgba(11,29,51,.8);
}
.s4__lede{
  margin:1.15rem 0 0;max-width:46ch;
  font-size:1.02rem;line-height:1.62;color:rgba(11,29,51,.62);
}
/* En dessous de 901 px les deux phrases restent en flux et s'enchainent
   normalement — d'ou l'espace entre les deux `span` dans le HTML. */
.s4__lede span{display:inline}

/* ══════════ LA COMPOSITION ══════════
   Deux colonnes : la progression à gauche, la tour à droite. La
   tour est sticky — le texte défile devant elle, ce qui rend la
   correspondance étape / salle immédiatement lisible.             */
.s4__stage{
  display:grid;
  /* La colonne de droite passe de .86fr a .98fr et la gouttiere se
     resserre : c'est ce qui libere la largeur necessaire a la tour
     agrandie sans la coller au bord — la colonne de texte garde plus
     de 600 px a 1440, largement au-dessus de ses 38ch de mesure. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(1.8rem,4vw,4.25rem);
  align-items:start;
}

/* ── la colonne de progression ── */
/* La réserve de scroll est posée SOUS la colonne, pas sous la section :
   c'est la hauteur de la scène qui décide jusqu'où la tour reste
   épinglée. Mise en bas de section, la tour se décollerait juste avant
   que « Transformation » n'atteigne la ligne de mire — on verrait le
   dernier palier s'activer sans voir la salle s'allumer.               */
.s4__track{
  position:relative;
  padding-left:clamp(2.2rem,3.4vw,3.4rem);
  padding-bottom:var(--s4-exhale,0px);
}

/* la ligne de parcours + la boule qui la descend */
.s4__rail{
  position:absolute;left:clamp(.55rem,.9vw,.95rem);top:1.4rem;
  /* La ligne descend jusqu'a la pastille de l'accent final, qui ferme le
     parcours — et non plus jusqu'au dernier palier. */
  bottom:calc(var(--s4-exhale,0px) + .7rem);
  width:2px;border-radius:2px;
  background:linear-gradient(180deg,
    rgba(11,29,51,.16) 0%,
    rgba(11,29,51,.16) 22%,
    rgba(255,236,222,.34) 46%,
    rgba(217,222,230,.22) 74%,
    rgba(217,222,230,.16) 86%,
    rgba(217,222,230,0)   100%);
}
.s4__rail-fill{
  position:absolute;left:0;top:0;width:100%;
  height:var(--fill,0%);
  border-radius:2px;
  background:linear-gradient(180deg,var(--s4-or) 0%,#E5C98F 34%,#FFD9BE 62%,#FFE8C9 100%);
  box-shadow:0 0 14px rgba(197,169,106,.55);
  transition:height 620ms cubic-bezier(.22,1,.36,1);
}
.s4__bead{
  position:absolute;left:50%;top:var(--fill,0%);
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFF6E4,var(--s4-or) 62%,#B9945A);
  box-shadow:0 0 0 4px rgba(197,169,106,.16),0 0 22px 4px rgba(255,214,160,.5);
  transition:top 620ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .s4__rail-fill,.s4__bead{transition:none}
}

/* ── une étape ── */
.s4__step{
  position:relative;
  padding:clamp(1.5rem,2.4vw,2.3rem) 0 clamp(1.9rem,3vw,2.9rem);
}
/* Aucun filet entre les étapes : il tomberait pile sur la coupe de
   couleur et la salirait d'un trait d'une troisième teinte. C'est
   l'arête des bandes qui sépare. */

/* le marqueur sur la ligne */
.s4__dot{
  position:absolute;
  left:calc(clamp(.55rem,.9vw,.95rem) - clamp(2.2rem,3.4vw,3.4rem) + 1px);
  top:calc(clamp(1.5rem,2.4vw,2.3rem) + .55rem);
  width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;
  background:var(--step-bg,#F3F1ED);
  border:1.5px solid var(--step-dot,rgba(11,29,51,.28));
  transition:transform 420ms cubic-bezier(.22,1,.36,1),border-color 420ms,background 420ms,box-shadow 420ms;
}
.s4__step.is-active .s4__dot{
  transform:scale(1.35);
  border-color:var(--step-accent,var(--s4-or));
  background:var(--step-accent,var(--s4-or));
  box-shadow:0 0 0 5px var(--step-halo,rgba(197,169,106,.2));
}

.s4__kicker{
  margin:0 0 .55rem;
  font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
  font-size:.735rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--step-kicker,rgba(11,29,51,.44));
  display:flex;align-items:baseline;gap:.6rem;
  transition:color 420ms;
}
.s4__kicker span{
  font-size:.9rem;letter-spacing:.04em;
  color:var(--step-num,rgba(11,29,51,.3));
  transition:color 420ms;
}
.s4__step-title{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.62rem,1.1rem + 1.35vw,2.3rem);
  line-height:1.1;letter-spacing:-.02em;
  color:var(--step-title,var(--s4-navy));
  transition:color 420ms;
}
/* La hierarchie d'un palier est NOM -> role -> phrase -> info secondaire.
   `.s4__meta` ne porte pas le tarif mais le benefice : c'est de la prose,
   elle repasse en Inter Tight, corps de lecture, graisse 500. Ce qui reste
   de secondaire descend
   dans `.s4__aside`, petit et sourd. */
.s4__meta{
  margin:.55rem 0 0;max-width:34ch;
  font-family:var(--sans);font-weight:500;
  font-size:1rem;line-height:1.45;letter-spacing:0;
  color:var(--step-meta,rgba(11,29,51,.74));
  transition:color 420ms;
}
/* Les tarifs sont sortis de la section : elle presente des experiences,
   pas une grille de prix. Ce qui reste est une ligne d'information
   secondaire — aujourd'hui la seule est « Edition saisonniere » sur
   Immersion. Elle garde le Merchant tabulaire (elle peut porter une
   duree ou une date) mais reste la quatrieme chose lue. */
.s4__aside{
  margin:.8rem 0 0;
  font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
  font-size:.75rem;letter-spacing:.075em;
  color:var(--step-price,rgba(11,29,51,.4));
  transition:color 420ms;
}
/* `.s4__desc` porte l'explication courte entre le descripteur (`.s4__meta`)
   et la phrase de transformation (`.s4__promise`) : meme famille que meta,
   un cran plus discret, sans variable de couleur dediee par etape. */
.s4__desc{
  margin:.5rem 0 0;max-width:36ch;
  font-family:var(--sans);font-weight:400;
  font-size:.92rem;line-height:1.5;
  color:var(--step-meta,rgba(11,29,51,.74));
  opacity:.78;
  transition:color 420ms,opacity 420ms;
}
.s4__promise{
  margin:.85rem 0 0;max-width:38ch;
  font-size:1.02rem;line-height:1.56;
  color:var(--step-promise,rgba(11,29,51,.62));
  opacity:.7;
  transition:color 420ms,opacity 420ms;
}
.s4__step.is-active .s4__promise{opacity:1}

/* ── palettes par étape (le texte vit sur la bande qui lui correspond) ── */
.s4__step--free{
  --step-meta:rgba(11,29,51,.76);
  --step-price:rgba(11,29,51,.4);
  --step-accent:var(--s4-or);
  --step-halo:rgba(197,169,106,.2);
  --step-bg:#F3F1ED;
}
.s4__step--immersion{
  --step-rule:rgba(255,255,255,.24);
  --step-accent:#FFE3CE;
  --step-halo:rgba(255,227,206,.24);
  --step-bg:#C9775A;
  --step-dot:rgba(255,255,255,.5);
  --step-kicker:rgba(255,245,238,.74);
  --step-num:rgba(255,245,238,.56);
  --step-title:#FFF6EF;
  --step-meta:rgba(255,246,240,.94);
  --step-price:rgba(255,238,228,.6);
  --step-promise:rgba(255,240,230,.88);
}
.s4__step--annuel{
  --step-rule:rgba(217,222,230,.2);
  --step-accent:var(--s4-or);
  --step-halo:rgba(197,169,106,.22);
  --step-bg:#132B49;
  --step-dot:rgba(217,222,230,.42);
  --step-kicker:rgba(217,222,230,.66);
  --step-num:rgba(217,222,230,.46);
  --step-title:#F3F1ED;
  --step-meta:rgba(243,241,237,.92);
  --step-price:rgba(217,222,230,.5);
  --step-promise:rgba(217,222,230,.82);
}
.s4__step--transfo{
  --step-rule:rgba(217,222,230,.14);
  --step-accent:#EFC27B;
  --step-halo:rgba(239,194,123,.2);
  --step-bg:#071426;
  --step-dot:rgba(217,222,230,.34);
  --step-kicker:rgba(217,222,230,.58);
  --step-num:rgba(217,222,230,.4);
  --step-title:#F3F1ED;
  --step-meta:rgba(243,241,237,.88);
  --step-price:rgba(217,222,230,.46);
  --step-promise:rgba(217,222,230,.76);
}

/* ── Samatsa Annuel est le cœur du système : on le dit sans le crier ── */
/* Le badge dit une chose structurelle : Progression est l'experience
   centrale. Il passe donc en typo UI (Inter Tight, comme le reste des
   libelles fonctionnels de la page) et perd son aplat champagne — il ne
   reste qu'un filet tres bas et le mot. Le losange tournant, qui etait la
   seule note decorative de la colonne, cede la place au carre Samatsa
   deja utilise par l'eyebrow : meme signe, meme grammaire. */
.s4__core{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 .7rem;padding:.24rem .58rem .26rem;
  border:1px solid rgba(197,169,106,.3);
  border-radius:4px;
  font-family:var(--sans);font-weight:600;
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--s4-or);
}
.s4__core::before{
  content:"";width:7px;height:7px;flex:none;
  background:currentColor;opacity:.85;
  clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,50% 100%,50% 50%,0 50%);
}
/* Le cœur du système porte le plus grand corps de la colonne ; Transformation
   est plus serré, plus dense — un cran d'engagement de plus, pas un cran
   d'importance de plus. */
.s4__step--annuel .s4__step-title{font-size:clamp(1.78rem,1.15rem + 1.65vw,2.62rem)}
.s4__step--transfo .s4__step-title{letter-spacing:-.026em}

/* ══════════ L'ACCENT FINAL ══════════
   Une seule ligne apres le dernier palier : le point d'arrivee. Elle est
   traitee comme une legende et non comme une etape — corps serif italique,
   champagne retenu, aucun bloc, aucune mesure de paragraphe. Sa pastille
   reprend l'implantation exacte des pastilles de palier mais reste creuse :
   c'est une terminaison de ligne, pas un cinquieme niveau.             */
.s4__outro{
  position:relative;
  /* Un peu plus d'ecart avec le dernier palier : c'est ce qui donne a
     l'etat Autonomie une fenetre de defilement comparable aux autres. */
  margin:2.2rem 0 0;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.12rem;line-height:1.3;letter-spacing:-.01em;
  color:rgba(197,169,106,.58);
  transition:color 420ms;
}
/* Etat actif : meme grammaire que les paliers — la pastille se remplit et
   prend son halo, le texte passe a pleine intensite. Rien de plus. */
.s4__outro.is-active{color:rgba(197,169,106,1)}
.s4__outro.is-active .s4__outro-dot{
  transform:scale(1.25);
  background:var(--s4-or);
  border-color:var(--s4-or);
  box-shadow:0 0 0 5px rgba(197,169,106,.18);
}
.s4__outro-dot{
  position:absolute;
  left:calc(clamp(.55rem,.9vw,.95rem) - clamp(2.2rem,3.4vw,3.4rem) + 1px);
  top:.42rem;
  width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;
  border:1.5px solid rgba(197,169,106,.6);
  background:transparent;
  transition:transform 420ms cubic-bezier(.22,1,.36,1),background 420ms,border-color 420ms,box-shadow 420ms;
}

/* Le point d'arrivee ouvre sur les offres. Un seul lien, trace en
   champagne comme la ligne qu'il prolonge : contour fin, fond presque
   nul, fleche de la meme famille que les CTA du hero. Il se lit comme
   une porte au bout du parcours, pas comme un bouton plein qui
   concurrencerait « Commencer gratuitement ». */
.s4__outro-cta{
  margin-top:1.75rem;           /* 28 px sous « Vers l'autonomie. » */
  font-size:.8rem;
  padding:.82rem 1.35rem;
  color:rgba(197,169,106,.94);
  border-color:rgba(197,169,106,.5);
  background:rgba(197,169,106,.07);
}
.s4__outro-cta:hover{
  color:var(--s4-off);
  border-color:rgba(197,169,106,.86);
  background:rgba(197,169,106,.14);
  transform:translateY(-2px);
}
.s4__outro-cta:focus-visible{outline:2px solid var(--s4-or);outline-offset:3px}
@media (hover:none){
  .s4__outro-cta{color:var(--s4-off);border-color:rgba(197,169,106,.6);background:rgba(197,169,106,.12)}
}

/* ══════════ LA TOUR ══════════
   La tour n'est plus dimensionnee par une formule en `vh` puis recadree :
   c'est le CADRE qui la dimensionne. `.s4__frame` occupe toute la hauteur
   restante sous la barre, la scene prend cette hauteur moins une marge, et
   `aspect-ratio` en deduit la largeur. Elle ne peut donc plus etre coupee,
   quelle que soit la hauteur de fenetre : quand la fenetre raccourcit, la
   tour retrecit avec elle au lieu de deborder.
   `max-width:100%` protege le cas inverse — fenetre tres haute et colonne
   etroite : la scene se contente alors de la largeur disponible, et l'image
   comme le calque SVG se centrent dedans a l'identique (object-fit:contain
   d'un cote, preserveAspectRatio meet de l'autre).
   Consequence : `--pan` vaut toujours 0, la regle de glissement laissee
   dans section4.js s'annule d'elle-meme et n'a pas eu a etre touchee.   */
/* Deux variables, une seule contrainte. Le bloc colle a `nav + --s4-vis-top`
   et mesure `100svh - nav - --s4-vis-gap` : en bas de page il lui reste donc
   exactement `gap - top` de jeu avant de devoir se decoller. La marge basse
   de la section vaut cette meme difference — le decollement est nul, et la
   tour ne glisse jamais sous la barre de navigation en fin de section.
   (Elle le faisait : 34 px de toit passaient derriere la nav collante au
   dernier palier.) Changer l'un des deux nombres recalcule l'autre. */
.s4__visual{
  position:sticky;top:calc(var(--nav-h) + var(--s4-vis-top,.35rem));
  display:flex;flex-direction:column;align-items:center;
  height:calc(100svh - var(--nav-h) - var(--s4-vis-gap,2.2rem));
  min-height:0;
}
/* Plus aucun recadrage ici : la tour tient entierement dans le cadre, donc
   `overflow:hidden` n'aurait plus rien a couper — sauf l'ombre portee, ce
   qui etait justement le probleme que le debord lateral compensait. Les
   deux disparaissent ensemble. */
.s4__frame{
  position:relative;
  flex:1 1 auto;min-height:0;
  align-self:stretch;width:auto;
  display:flex;align-items:center;justify-content:center;
}
.tower-stage{
  position:relative;flex:none;
  height:100%;
  width:auto;max-width:100%;
  /* Ratio de l'image RECADREE (946 x 1477). Le PNG d'origine portait 58 px
     de vide en haut et 34 / 44 px sur les cotes — soit 3,8 % de hauteur et
     7,6 % de largeur perdus dans une composition ou c'est precisement la
     hauteur qui bride la tour. Le viewBox du calque Spotlight absorbe le
     decalage (`34 58 946 1477`), les polygones de zones sont inchanges. */
  aspect-ratio:946 / 1477;
  margin:0;
  isolation:isolate;
  filter:drop-shadow(0 2.2rem 3.5rem rgba(0,6,16,.34));
  transform:translateY(var(--pan,0px));
  transition:transform 760ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .tower-stage{transition:none}
}
/* Lumiere d'ambiance DERRIERE le batiment — a ne pas confondre avec la
   nappe decorative supprimee du fond : celle-ci est ancree sur la tour et
   sert a la detacher. Sans elle, sur la bande la plus sombre, un batiment
   bleu nuit sur un fond bleu nuit disparait et il ne reste que le contour
   allume. Elle ne monte donc que sur les deux bandes foncees ; sur
   l'ivoire et la terracotta, le contraste suffit et elle reste basse. */
.tower-stage::before{
  content:"";position:absolute;z-index:-1;inset:6% 1% 2%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(86,126,170,var(--halo,.18)),transparent 66%);
  filter:blur(2rem);
  transition:background 560ms linear;
}
.s4__visual[data-active-zone="annual"] .tower-stage::before{--halo:.46}
.s4__visual[data-active-zone="premium"] .tower-stage::before{--halo:.5}
.tower-image,
.spotlight-overlay{position:absolute;inset:0;width:100%;height:100%}
.tower-image{object-fit:contain}
.spotlight-overlay{z-index:2;overflow:visible;pointer-events:none}

/* ══════════ HIERARCHIE DE L'ASCENSEUR ══════════
   Le PNG porte ses propres lumieres. Celle de la cabine vitree est de
   loin la plus forte de l'image : tant qu'aucune attenuation ne la
   couvre, elle se lit comme une seconde selection quelle que soit la
   zone reellement active. On ne touche pas au fichier source — on pose
   un voile bleu nuit local, floute pour n'avoir aucune arete, exactement
   sur le polygone de la zone `premium`, plus un voile plus faible sur la
   cage au-dessus.

   Le voile vit dans le meme SVG que les zones, donc au meme referentiel :
   il suit la tour au pixel pres a toutes les tailles, sans reglage. Il
   est place AVANT les groupes de zones, donc sous les contours actifs —
   il ne peut jamais ternir la salle allumee.

   Trois etats, un seul selecteur : `[data-active-zone]` sur le bloc
   visuel. Sur `premium` le voile tombe a zero et la cabine retrouve toute
   sa force ; partout ailleurs elle reste secondaire.                    */
.s4-lift-calm{
  opacity:1;
  transition:opacity 620ms cubic-bezier(.22,1,.36,1);
}
.s4-lift-calm path{
  fill:#0B1D33;
  fill-opacity:.46;
  filter:url(#s4-calm-blur);
}
/* La cage n'a pas besoin d'autant : elle est deja plus sourde que la
   cabine, on se contente d'aplatir son cuivre. */
.s4-lift-calm path.s4-lift-calm__shaft{fill-opacity:.3}

/* Sur les trois etats bas et sur le rooftop, l'ascenseur reste en
   retrait. Sur le rooftop en particulier : le toit doit etre le heros,
   et c'est la cabine qui lui disputait la vedette. */
.s4__visual[data-active-zone="premium"] .s4-lift-calm{opacity:0}

/* Le contre-champ : quand Transformation est active, une colonne de
   lumiere monte dans la cage, plus dense en haut. Aucune animation —
   c'est le contraste avec les autres etats qui produit la sensation de
   poussee, pas un mouvement. */
.s4-lift-boost{
  opacity:0;
  transition:opacity 700ms cubic-bezier(.22,1,.36,1);
}
.s4__visual[data-active-zone="premium"] .s4-lift-boost{opacity:1}
.s4-lift-ray{
  fill:none;
  stroke:url(#s4-lift-grad);
  /* Pas de `non-scaling-stroke` ici, contrairement aux contours de zones :
     une colonne de lumiere doit se reduire avec la tour, sinon elle
     deborde de la cage sur mobile. */
  stroke-width:44;stroke-linecap:round;
  filter:url(#s4-glow-soft);
}
@media (prefers-reduced-motion:reduce){
  .s4-lift-calm,.s4-lift-boost{transition:none}
}

/* ── les zones : reprises de v10/assets/css/spotlight-va.css ── */
.spotlight-zone{
  --spotlight-color:#F0C98C;
  opacity:0;
  transition:opacity 560ms cubic-bezier(.22,1,.36,1);
}
.spotlight-zone--immersion{--spotlight-color:#FFB491}
.spotlight-zone--annual{--spotlight-color:#EBD3A0}
.spotlight-zone--premium{--spotlight-color:#EFC27B}
.spotlight-zone--autonomy{--spotlight-color:#FFE9BA}
.spotlight-zone.is-active{opacity:1}

.zone-outline,.zone-glow,.zone-secondary-glow,
.entrance-glow,.annual-light-line,.door-glow,.door-ray{
  fill:none;vector-effect:non-scaling-stroke;
}
/* Le contour ne s'allume pas d'un bloc : il se dessine. C'est ce tracé
   progressif qui donne la lecture « la salle se révèle » plutôt que
   « un calque apparaît ». La longueur exacte est mesurée en JS. */
.zone-outline{
  stroke:var(--spotlight-color);stroke-width:1.8;stroke-linejoin:round;
  opacity:.82;
  stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);
  transition:stroke-dashoffset 980ms cubic-bezier(.22,1,.36,1) 90ms;
}
.spotlight-zone.is-active .zone-outline{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .zone-outline{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}
.zone-glow{
  stroke:var(--spotlight-color);stroke-width:20;stroke-linejoin:round;
  opacity:.3;filter:url(#s4-glow-soft);
}
.spotlight-zone[data-zone="discover"] .zone-outline{stroke-width:2.2;opacity:.96}
.spotlight-zone[data-zone="discover"] .zone-glow{stroke-width:24;opacity:.36}
.spotlight-zone[data-zone="discover"] .entrance-glow{opacity:.38}
.entrance-glow,.door-glow{
  stroke:#FFE1A2;stroke-width:13;stroke-linecap:round;opacity:.28;
  filter:url(#s4-glow-door);
}
.spotlight-zone--immersion .zone-glow{stroke-width:24;opacity:.4}
.spotlight-zone--annual .zone-outline{stroke-width:2.5;opacity:.98}
.spotlight-zone--annual .zone-glow{stroke-width:28;opacity:.5}
.zone-secondary-glow{
  stroke:#5C82AE;stroke-width:48;opacity:.34;filter:url(#s4-glow-wide);
}
.annual-light-line{
  stroke:#EAD59F;stroke-width:4;stroke-linecap:round;opacity:.5;
  filter:url(#s4-glow-soft);
}
.spotlight-zone--premium .zone-outline{stroke-width:2.1}
.spotlight-zone--premium .zone-glow{stroke-width:20;opacity:.34}
/* Rooftop : memes valeurs que le prototype d'origine. La porte haute et
   son rai de lumiere reutilisent `.door-glow` / `.door-ray`, deja definis
   plus haut pour le seuil et l'annexe — aucun langage nouveau. */
.spotlight-zone--autonomy .zone-glow{stroke-width:24;opacity:.36}
.door-ray{
  stroke:#FFF2D2;stroke-width:2.5;stroke-linecap:round;opacity:.74;
  filter:url(#s4-glow-door);
}
.spotlight-zone.is-entering .zone-glow,
.spotlight-zone.is-entering .entrance-glow{animation:s4-pulse 820ms ease-out 1}
@keyframes s4-pulse{
  0%{opacity:0}
  55%{opacity:.56}
  100%{opacity:.3}
}
@media (prefers-reduced-motion:reduce){
  .spotlight-zone.is-entering .zone-glow,
  .spotlight-zone.is-entering .entrance-glow{animation:none}
}

/* Plus aucune legende sous la tour, a aucune largeur : l'etat actif se
   lit sur le texte de l'etape et sur la salle allumee. Le bloc visuel ne
   contient donc plus que le cadre, qui prend toute sa hauteur — aucun
   espace n'est laisse vacant a la place. */

/* ══════════ LA COURSE DE SCROLL ══════════
   La section doit être sensiblement plus haute que la fenêtre, sinon la
   dernière étape n'atteint jamais la ligne de mire et la tour reste
   bloquée sur le troisième niveau. Deux leviers : chaque étape occupe au
   moins un quart d'écran, et la section respire en bas — cette réserve
   de bleu profond est aussi ce qui laisse « Transformation » tenir seule
   avant la fin de la page.                                              */
@media (min-width:901px){
  /* Retour a la ligne volontaire entre les deux phrases : la premiere ne
     doit pas se faire couper et « A chaque palier » doit demarrer la
     seconde ligne. La mesure est relachee juste ce qu'il faut pour que la
     phrase la plus longue (71 signes) tienne d'un trait. */
  .s4__lede{max-width:74ch}
  .s4__lede span{display:block}

  .s4{
    /* La reserve de fin ne sert plus seulement a ce que « Transformation »
       atteigne la ligne de mire : elle doit maintenant laisser « Vers
       l'autonomie. » l'atteindre a son tour. A 1440 x 900 il faut environ
       486 px sous cette ligne ; 56 vh les donne, et cette course est aussi
       le temps pendant lequel le rooftop reste allume avant la sortie de
       section. Seule la fin de section est rallongee. */
    --s4-exhale:clamp(10rem,60vh,34rem);
    /* Ces deux valeurs sont tout ce qui separe encore la tour du haut et
       du bas de la fenetre. `top` garde 2 px pour que le toit ne vienne
       pas mordre le filet de la barre de navigation ; `gap` garde le
       minimum qui laisse le bloc collant tenir jusqu'au bas de section
       (la marge basse de la section vaut `gap - top`, voir .s4__visual).
       Sur une fenetre courte on rend un peu d'air, sinon la tour touche
       les deux bords a la fois. */
    --s4-vis-top:.125rem;
    --s4-vis-gap:.5rem;
    /* exactement le jeu dont dispose le bloc collant — voir .s4__visual */
    padding-bottom:calc(var(--s4-vis-gap) - var(--s4-vis-top));
  }
  .s4__step{min-height:clamp(11rem,24vh,17rem)}
}

/* La taille de la tour est deja pilotee par la hauteur de fenetre : elle
   vaut la hauteur du cadre, qui vaut `100svh - nav - chrome`. Elle suit
   donc le viewport en continu, sans palier. Une seule exception, en bas
   de gamme : sur une fenetre courte, ce calcul la ferait toucher la barre
   de navigation en haut ET le pli en bas. On lui rend alors un peu d'air —
   les quelques pixels gagnes ne valent pas cette tension. */
@media (min-width:901px) and (max-height:720px){
  .s4{--s4-vis-top:.35rem;--s4-vis-gap:1.4rem}
}

/* ══════════ GRAND DESKTOP : LE DUO TITRE + TOUR ══════════
   Au-dessus de 1280 px, la tour ne commence plus sous l'en-tete. Mesure a
   1440 x 900 : le sommet du titre est a 132 px, le haut de la scene a 358.
   La colonne de droite est donc remontee de cet ecart exact — 226 px —
   par un `margin-top` negatif. On ne restructure pas le markup : faire
   passer l'en-tete dans la colonne gauche aurait change les retours a la
   ligne du grand titre, verrouilles. L'en-tete garde sa largeur pleine,
   et rien ne se recouvre : la ligne la plus longue de l'intro s'arrete a
   582 px quand la tour commence a 847.

   TAILLE — le seul nombre a toucher est `--s4-tower-fill`. Il exprime la
   hauteur de la tour en part de la hauteur disponible sous la barre :

     1     = la tour tient entierement a l'ecran des qu'elle est collee,
             a aucun moment quoi que ce soit ne sort du champ ;
     1.12  = elle depasse de 12 %, `updatePan()` — deja present, jusqu'ici
             neutralise parce que la tour tenait pile — reprend la main et
             la fait glisser pour amener la salle allumee au centre.

   A 1.12, ce qui sort du champ sort par le haut (derriere la barre de
   navigation) ou par le bas (sous le pli), jamais sur du texte, et jamais
   la partie qui compte : le glissement vaut 0 sur Progression et sur
   Autonomie, donc le toit est entier precisement quand il est le sujet,
   et la base est entiere sur les trois etats bas. Aucun `overflow:hidden`
   n'est ajoute : rien n'est rogne par une boite CSS.
   Passer `--s4-tower-fill` a 1 rend la tour entierement visible en toutes
   circonstances, au prix de ~9 % de taille.                            */
@media (min-width:1280px){
  .s4{
    --s4-lift:clamp(11rem,15.7vw,14.6rem);
    --s4-vis-top:0rem;
    --s4-vis-gap:.35rem;
    --s4-tower-fill:1.12;
  }

  .s4__visual{margin-top:calc(-1 * var(--s4-lift))}

  /* La colonne de droite s'elargit et la gouttiere se resserre : c'est ce
     qui libere la largeur de la tour agrandie. La colonne de texte garde
     ~600 px a 1440, tres au-dessus de la mesure de 38ch des paliers. */
  .s4__stage{
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    gap:clamp(1.8rem,3.6vw,3.9rem);
  }

  /* A droite de sa colonne, et calee en HAUT : `updatePan()` calcule son
     glissement depuis le haut du cadre. Avec `align-items:center` herite,
     le centrage s'ajoutait au glissement et la tour partait 70 px trop
     haut. */
  .s4__frame{justify-content:flex-end;align-items:flex-start}

  .tower-stage{
    height:auto;
    width:min(100%,calc((100svh - var(--nav-h) - var(--s4-vis-gap)) * var(--s4-tower-fill) * 946 / 1477));
    max-width:100%;
  }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1180px){
  .s4__stage{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(1.6rem,3.4vw,3rem)}
  .tower-stage{max-width:100%}
}

/* ── tablette / mobile : la tour passe en tête, sticky et réduite, et la
   progression défile dessous. On garde la ligne, la boule et l'état actif —
   c'est la logique de la section, pas un ornement. Le fond de la barre
   sticky suit la bande active, sinon la tour flotte sur la mauvaise
   couleur au moment du passage.                                          */
@media (max-width:900px){
  /* La tour est collée en haut : la zone de lecture commence sous elle,
     donc la ligne de mire descend d'autant. */
  /* Le bandeau occupe maintenant environ 63 % de l'ecran : la ligne de
     mire descend d'autant, sinon l'etape jugee active passe derriere la
     tour. Et comme elle descend, la reserve de scroll doit grandir, sans
     quoi le dernier palier ne l'atteint jamais. */
  /* `--s4-focus` reste ici comme valeur de repli — section4.js la
     recalcule a partir de la position REELLE du bas du bandeau des que
     la page est mesurable (voir `updateMobileFocus`). Mesure a 390 x 844
     avant correction : au moment ou un palier devenait actif, son bord
     haut etait a 469 px pour un bandeau finissant a 613 — soit son
     numero, sa categorie et son titre deja passes DERRIERE la tour, et
     seuls les 77 derniers pixels du palier visibles. La ligne de mire
     etait posee a 80 % de l'ecran, c'est-a-dire au-dessus du bas du
     bandeau une fois defalquee la hauteur d'un palier. */
  .s4{--s4-exhale:clamp(9rem,52vh,22rem);padding-bottom:clamp(2rem,5vh,3.5rem);--s4-focus:.72}
  .s4__step{min-height:clamp(9rem,22vh,13rem)}
  /* `order` ne fonctionne pas en display:block — il faut une colonne flex
     pour faire remonter la tour au-dessus de la progression. */
  /* `align-items:start` hérité du desktop empêcherait les deux blocs de
     prendre toute la largeur — le bandeau de la tour resterait à la
     largeur de son contenu. */
  /* `gap` n'etait pas reinitialise ici : la regle de base de
     `.s4__stage` (celle qui sert la grille desktop, tout en haut de la
     feuille) porte `gap:clamp(1.8rem,4vw,4.25rem)`, et comme le
     selecteur ne change pas — seul `display` passe de grid a flex — ce
     gap HORIZONTAL destine a la gouttiere desktop restait applique
     comme espacement VERTICAL entre le bandeau et la colonne de texte.
     A 390 px ca representait a lui seul 28,8 px de vide non voulu,
     entierement invisible a la lecture du CSS de cette regle puisque le
     gap venait d'ailleurs dans la feuille. C'est la plus grosse des
     trois causes du vide mesure entre la tour et « Exploration ». */
  .s4__stage{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .s4__visual{order:-1}
  /* ── LE BANDEAU DE LA TOUR ──────────────────────────────────────
     Il lui faut un fond OPAQUE : le bloc est colle en haut et la colonne
     de progression defile dessous, donc sans fond le texte se voit au
     travers de la tour. Ca, c'est structurel, il n'y a pas a y revenir.

     Ce qui etait faux, c'etait la COULEUR de ce fond. Elle etait pilotee
     par l'ETAT ACTIF (`--bar`, une valeur par experience) alors que le
     fond de la section, lui, est pilote par la GEOMETRIE (les quatre
     bandes coupees a --b1, --b2, --b3, c'est-a-dire aux bords hauts
     reels des etapes). Les deux ne peuvent pas coincider, et de fait ne
     coincidaient jamais. Mesure a 390 x 844 :

       defilement 4700 : plaque terracotta / sol ivoire -> terracotta
       defilement 4900 : plaque terracotta / sol ivoire -> navy-2
       defilement 5100 : plaque navy-2     / sol ivoire -> deep
       defilement 5200 : plaque deep       / sol terracotta -> deep

     Soit, en clair, une dalle de 390 x 529 px — 63 % de l'ecran — d'une
     couleur qui n'est pas celle de la page, posee sur la zone de lecture
     et coupant les paliers en deux. C'est la « masse coloree » : ce
     n'est pas un halo qui deborde, c'est une plaque d'etat sur un fond
     de position.

     La correction ne consiste pas a enlever le fond — on a vu qu'il est
     necessaire — mais a lui rendre la seule couleur juste : CELLE DE LA
     PAGE, au point exact ou le bandeau se trouve. Le fond n'est donc
     plus un aplat, c'est une fenetre sur le sol de la section : meme
     degrade que `.s4__bands`, dimensionne a la hauteur de la section et
     decale de la position du bandeau dans celle-ci (`--s4-bar-y`, ecrit
     par section4.js). Resultat : la dalle devient invisible — arêtes de
     bandes comprises, puisqu'elles tombent au meme endroit — et il ne
     reste a l'ecran que la tour. Aucune surface ne se colore quand une
     experience s'active.

     Le sol vit dans un ::before a `z-index:-1` : derriere la tour, mais
     toujours au-dessus de la colonne de texte (le bandeau porte
     `z-index:2` et cree donc son propre contexte d'empilement). Fond de
     section et calque d'activation sont ainsi deux couches distinctes,
     qui ne peuvent plus se confondre. Et le fondu du bas porte sur le
     ::before seul : mis sur `.s4__visual`, un masque aurait aussi mange
     la base de la tour.                                              */
  .s4__visual{
    /* The mobile header scrolls away: the tower needs no header clearance. */
    position:sticky;top:0;
    z-index:2;min-height:0;height:auto;
    /* Il ne reste que la tour dans le bandeau : elle se cale contre le
       bord droit, comme sur desktop. */
    display:flex;flex-direction:row;align-items:center;
    justify-content:flex-end;gap:0;
    /* Ramenee de 1.9rem a .6rem (mesure a 390 : 19,2 -> 6,4 px). C'est
       la deuxieme des trois causes du vide avant Exploration — voir le
       commentaire sur `.s4__stage` juste au-dessus pour la premiere
       (28,8 px de gap desktop heritee par erreur). */
    margin:0 calc(var(--pad) * -1) clamp(.4rem,1vw,.6rem);
    /* La reserve du bas accueille le fondu du sol — troisieme cause du
       vide, ramenee de 2,5rem a 1,2rem (40 -> 19,2 px a 390).

       Toujours sans risque de delavage a travers le batiment, MEME reduite
       : le masque de `.s4__visual::before` s'arrete a
       `calc(100% - var(--s4-bar-fade))`, et le padding-bottom qui cree
       l'espace sous la tour vaut EXACTEMENT la meme variable. La zone de
       fondu et la zone de padding sont donc toujours rigoureusement la
       meme boite, quelle que soit sa taille — le fondu ne peut
       structurellement pas remonter sur la tour, qui occupe elle
       entierement la boite de contenu (au-dessus du padding). L'ancien
       bug (1.1rem insuffisant) appartenait a une version anterieure ou
       le fond etait un aplat directement sur `.s4__visual`, sans cette
       separation stricte entre contenu et fondu. */
    --s4-bar-fade:1.2rem;
    padding:.5rem var(--pad) var(--s4-bar-fade);
    background:none;
  }
  .s4__visual::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    /* strictement le degrade de `.s4__bands`, aux memes variables */
    background-image:linear-gradient(180deg,
      var(--s4-ivoire)  0,
      var(--s4-ivoire)  var(--b1,30%),
      var(--s4-terra)   var(--b1,30%),
      var(--s4-terra)   var(--b2,52%),
      var(--s4-navy-2)  var(--b2,52%),
      var(--s4-navy-2)  var(--b3,72%),
      var(--s4-deep)    var(--b3,72%),
      var(--s4-deep)    100%);
    background-repeat:no-repeat;
    background-size:100% var(--s4-sec-h,2133px);
    background-position:0 calc(-1 * var(--s4-bar-y,0px));
    /* aucune transition : la valeur est pilotee par le defilement, un
       fondu la ferait trainer d'un cran derriere la page */
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--s4-bar-fade)),transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--s4-bar-fade)),transparent 100%);
  }

  /* ── LA MISE EN VALEUR RESTE SUR LA TOUR ──
     Le bandeau ne dit plus rien de l'etat actif ; ce sont donc le contour
     et le halo de zone qui le disent seuls. Ils vivent dans le viewBox du
     SVG, qui les rogne a ses propres bords : la selection ne peut
     structurellement PAS deborder de l'illustration.

     Rien n'est renforce ici, et c'est deliberé : les contours portent
     `vector-effect:non-scaling-stroke`, leur epaisseur est donc la meme
     en pixels ecran sur une tour de 322 px que sur une tour de 536 px —
     rapportee a la taille du batiment, la selection est deja PLUS
     marquee en mobile qu'en desktop. Y ajouter du trait ne ferait que
     recreer, en plus petit, le probleme qu'on vient d'enlever. */

  /* Pas de recadrage en mobile : la tour est petite et tient entiere,
     le glissement n'a donc rien a rattraper. */
  /* Le cadre se contente d'entourer la tour : il reste un conteneur flex
     dimensionne par son contenu, sinon `max-width` en pourcentage sur la
     scene se resout contre une largeur elle-meme deduite de la scene, et
     la tour se retrouve ecrasee (57 px de large pour 185 de haut). */
  /* Le cadre prend toute la largeur du bandeau : c'est lui qui sert de
     reference au pourcentage de la tour, et `justify-content:flex-end`
     la pousse a droite. */
  .s4__frame{
    flex:1 1 auto;width:100%;align-self:auto;
    margin-inline:0;padding-inline:0;
    overflow:visible;display:flex;justify-content:flex-end;
  }
  /* La tour cesse d'etre une vignette. Elle est dimensionnee par la
     LARGEUR disponible (90 % du bandeau) mais plafonnee par la hauteur
     d'ecran (60 svh convertis en largeur via le ratio de l'image) : c'est
     le plus petit des deux qui gagne, donc jamais de scroll horizontal ni
     de bandeau qui devore l'ecran. `height:auto` + `aspect-ratio` : ni le
     toit, ni la base, ni l'ascenseur ne sont coupes. */
  /* 60svh -> 56svh. La tour perd 7 % (324 -> 302 px de large) et le
     bandeau 32 px : c'est ce qui rend au texte la place dont il manquait
     — voir le commentaire sur --s4-focus plus bas. Elle reste la piece
     signature de la section, simplement elle ne mange plus les deux
     tiers de l'ecran. */
  .tower-stage{
    width:min(90%,calc(56svh * 946 / 1477));
    height:auto;max-width:none;
    flex:none;
    filter:drop-shadow(0 1.1rem 2rem rgba(0,6,16,.4));
    transform:none;
  }
  .s4__track{padding-left:clamp(1.7rem,6vw,2.4rem)}
  .s4__rail{left:clamp(.35rem,2vw,.6rem)}
  .s4__dot{left:calc(clamp(.35rem,2vw,.6rem) - clamp(1.7rem,6vw,2.4rem) + 1px)}
  .s4__desc{max-width:none;opacity:.92}
  .s4__promise{max-width:none;opacity:1}
}

@media (max-width:560px){
  /* Aucune variante de bandes ici : la regle principale est pilotee par
     les positions mesurees (--b1 … --b3), elle est donc deja juste a
     toutes les largeurs. L'ancien degrade specifique a ce palier gagnait
     en specificite et reintroduisait le fondu sur mobile. */
  /* Sous 560 px la regle de largeur ci-dessus s'applique telle quelle ;
     seul le plafond de hauteur descend un peu, pour que le bandeau ne
     devore pas les petits ecrans. */
  .tower-stage{width:min(92%,calc(58svh * 946 / 1477))}
  .s4__title{font-size:clamp(1.9rem,1.1rem + 3.4vw,2.6rem)}
  .s4__step{padding:1.3rem 0 1.6rem}
  .s4__core{font-size:.6rem}
}

/* ══════════════════════════════════════════════════════════════════
   SORTIE DE SECTION 4 ET JONCTION AVEC LA SECTION 5   —   desktop

   Bloc ADDITIF, place en fin de feuille : il ne remplace aucune regle
   ecrite plus haut, il en surcharge quatre. Wording, hierarchie des
   experiences, logique d'activation des zones et mobile : intacts.

   ── CE QUI N'ALLAIT PAS, MESURE A 1440 x 900 ──
   L'etat « Vers l'autonomie » n'etait tenu que 70 px de defilement,
   alors que la section se terminait par 901 px pendant lesquels il ne
   se passait plus rien : colonne de gauche vide sous la derniere
   ligne, et la tour, haute de 919 px, qui remontait mecaniquement
   hors du cadre. Le climax durait un dixieme du temps de sa propre
   sortie. Pire, les deux evenements tombaient a la MEME image :
   le bloc collant se decolle a `bas de colonne - hauteur du bloc`,
   soit exactement une fenetre avant la fin de section — c'est-a-dire
   a l'instant precis ou le bord de la section 5 entre par le bas.
   La « rupture chelou » n'est pas une couture de couleur (les deux
   sections partagent le meme aplat #071426) : ce sont deux systemes
   qui occupent l'ecran en meme temps.

   ── LES TROIS LEVIERS ──
   1. Le bloc collant passe de 100svh a 84,5 % de la hauteur utile.
      Un seul nombre fait deux choses : la tour perd 9 % (c'est la
      reduction demandee) ET le decollement recule de 122 px, gagnes
      sans allonger la page d'un pixel. Effet de bord bienvenu : la
      base de la tour ne touche plus le bas de l'ecran, il reste
      ~126 px d'air sous elle.
   2. La reserve de defilement passe de 60 a 66 vh. Combinee au
      point 1, la fenetre de l'etat Autonomie passe de 70 a ~350 px :
      le climax est enfin tenu. Cout total : ~100 px de section.
   3. La tour ne remonte plus, elle SE RETIRE. `--s4-close`, ecrit par
      section4.js, vaut 0 tant que le bloc est colle et monte a 1 sur
      les 62 % de hauteur qui suivent le decollement. Le batiment perd
      son opacite, glisse de 38 px VERS LE BAS — ce qui annule une
      partie du defilement et le fait paraitre s'attarder au lieu
      d'etre arrache — et se reduit de 3,5 %. Aucun flou, aucun
      mouvement gratuit : une opacite, un glissement, une echelle.
      L'echelle porte sur `.s4__frame`, donc sur le PNG ET le calque
      SVG ensemble : l'alignement du Spotlight est conserve par
      construction, il n'y a rien a recaler.

   ── LE RELAIS ──
   Le dernier signal de la section 4 est le champagne de « Vers
   l'autonomie. », qui reste allume pendant toute la retraite. Le
   premier signal de la section 5 est le champagne de son eyebrow.
   Mesure : la retraite s'acheve a ~4364 px de defilement, l'eyebrow
   de la section 5 atteint le milieu de l'ecran a ~4389. Le relais
   tombe juste, et il tombe juste tout seul — les deux sont cales sur
   la meme geometrie.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width:901px){
  /* 66vh -> 50vh (cap 37rem -> 28rem) : mesure a 1440x900, ce cap etait
     atteint (592px). Le ramener a 448px avance le decollement, la fin de
     la retraite et le debut de la section 5 de 144 px chacun — c'est le
     « faire arriver la section 5 plus tot » demande. La fenetre PLEINE
     opacite de l'etat Autonomie (avant que la retraite ne commence) ne
     se resserre qu'a due proportion : de 366 a 222 px, desormais du
     meme ordre que celle des trois etats precedents (240-260 px) — le
     climax n'est donc pas ecourte, seulement aligne sur le rythme des
     autres etats. Voir plus bas pour la seconde moitie de la correction
     (CLOSE_SPAN, dans section4.js), qui s'attaque au temps mort APRES la
     retraite plutot qu'a la reserve elle-meme.                        */
  .s4{--s4-exhale:clamp(10rem,50vh,28rem)}
}

@media (min-width:1280px){
  .s4{
    /* LE nombre de cette passe. Il gouverne a la fois la hauteur du
       bloc collant et, par consequent, la taille de la tour. */
    --s4-vis-h:calc((100svh - var(--nav-h)) * .845);
    /* recalibre sur --s4-vis-h et non plus sur la fenetre : a 1440x900
       la tour passe de 589 a 536 px de large, soit -9,0 % en lineaire
       et -17,2 % en surface. Elle reste la piece signature. */
    --s4-tower-fill:1.20;
  }

  .s4__visual{height:var(--s4-vis-h)}
  .tower-stage{
    height:auto;
    width:min(100%,calc(var(--s4-vis-h) * var(--s4-tower-fill) * 946 / 1477));
    max-width:100%;
  }

  /* ── le mot de la fin descend et prend du corps ──
     Le texte n'est pas touche : c'est sa PLACE et son corps qui
     changent. « Vers l'autonomie. » cesse d'etre une note collee sous
     le dernier palier pour devenir la ligne qui ferme la section, posee
     bas dans la colonne. Le trou ne se lit plus comme un trou APRES le
     dernier mot mais comme une respiration AVANT lui. */
  .s4__outro{
    margin-top:clamp(5rem,10vh,8.5rem);
    font-size:clamp(1.45rem,1.05rem + 1.05vw,1.95rem);
    line-height:1.24;
  }
  /* la pastille se recale sur le centre optique de la nouvelle ligne */
  /* mesure : la ligne fait 38,7 px, son centre optique tombe donc a
     19 px du haut du bloc — d'ou .875rem + le rayon de la pastille */
  .s4__outro-dot{top:.875rem;width:10px;height:10px;margin-left:-5px}
  .s4__outro-cta{margin-top:1.5rem}

  /* ── la retraite ──
     Sur `.s4__frame` et non sur `.s4__visual` : le bloc collant garde
     ses proprietes intactes, et l'echelle emporte l'image et le calque
     SVG dans le meme mouvement. La transition de 140 ms lisse le pas
     du defilement sans introduire de retard perceptible. */
  .s4__frame{
    opacity:calc(1 - .94 * var(--s4-close,0));
    transform:translate3d(0,calc(var(--s4-close,0) * 38px),0) scale(calc(1 - .035 * var(--s4-close,0)));
    transform-origin:78% 34%;
    transition:opacity 140ms linear,transform 140ms linear;
  }
}

/* Mouvement reduit : la tour ne se retire pas, elle reste simplement la.
   Rien ne depend de la retraite pour la lecture. */
@media (prefers-reduced-motion:reduce){
  .s4__frame{opacity:1 !important;transform:none !important;transition:none}
}