/* ==========================================================================
   Scrollytelling — séquence d'images scrubée au scroll
   Dépend des tokens de style.css (--font-h, --font-b, --gold-lt).
   Animé sur transform, opacity et filter uniquement.
   ========================================================================== */

/* Les hauteurs restent ici et non en utilitaires Tailwind : le play CDN
   rejette l'unite svh dans une valeur arbitraire (h-[400svh] n'est pas
   genere). svh est indispensable, vh fait sauter le pin quand la barre
   d'URL mobile se retracte. */

/* Vitesse de l'abeille : c'est ici et nulle part ailleurs. La course de
   scrub vaut la hauteur moins 100svh, et les 225 frames s'y etalent. Plus
   la hauteur est grande, plus le vol est lent. Ajouter des frames ne
   ralentirait rien, cela ne changerait que la finesse du mouvement. */

.scrolly {
  /* Mise en place du premier ecran. Ces proprietes etaient portees par des
     utilitaires charges depuis un CDN : quand le script tardait ou ne passait
     pas, le canvas mesurait 0 et l'image ne s'affichait plus. Elles sont
     maintenant dans la feuille du site. */
  position: relative;
  /* 225 frames etalees sur la course. A 700svh le vol etait 1,5 fois plus
     rapide sur telephone qu'en grand ecran, l'abeille filait. Meme cadence
     partout : 4svh par image. */
  height: 1000svh;                 /* course : 900svh de scrub */
  background: #0a0a0a;
  /* Gouttière du premier écran et retrait du filet doré : le badge Google
     s'aligne sur ce filet, les deux valeurs servent à plusieurs blocs. */
  --scrolly-gut: clamp(20px, 5vw, 76px);
  --scrolly-indent: clamp(16px, 4vw, 64px);
  --scrolly-hint-b: clamp(26px, 5vh, 54px);
}

@media (min-width: 1024px) {
  .scrolly { height: 1000svh; }    /* meme cadence qu'en telephone */
}

.scrolly-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0a0a0a;
}

/* L'image d'accroche et le canvas se superposent en couvrant le cadre.
   object-fit n'agit que sur l'image : le canvas, lui, recadre a la main
   dans draw(). */
.scrolly-poster,
.scrolly-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.scrolly-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scrolly-canvas {
  will-change: filter;
  transition: filter .45s var(--ease, cubic-bezier(.4,0,.2,1));
}

/* Filtre de lisibilité : vignette radiale plus voile plat. */
.scrolly-veil {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.55) 60%,
      rgba(0,0,0,0.8) 100%),
    rgba(0,0,0,0.25);
}

/* ---- Blocs de texte ----------------------------------------------------- */

/* Ancrage explicite : un absolu place dans une grille ne recoit pas le
   place-items du parent, il resterait a sa position statique. */
.scrolly-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 86vw);
  padding-inline: 20px;
  text-align: center;
  opacity: 0;
  will-change: opacity;
}

.scrolly-title {
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

.scrolly-sub {
  margin-top: clamp(16px, 2.4vw, 28px);
  font-family: var(--font-b);
  font-weight: 300;
  font-size: clamp(0.94rem, 1.5vw, 1.18rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.78);
  text-wrap: balance;
}

.scrolly-rule {
  width: 48px;
  height: 1px;
  margin: clamp(18px, 2.6vw, 30px) auto 0;
  background: var(--gold-lt, #b08830);
  transform-origin: center;
}

/* ---- Preloader ---------------------------------------------------------- */

/* Le preloader n'occulte plus rien : l'image d'accroche est deja affichee.
   Il se reduit a un fil de progression en bas d'ecran. */
.scrolly-loader {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(14px, 2.4vh, 26px);
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  justify-items: center;
}

.scrolly-loader-mark { display: none; }

.scrolly-loader[hidden] { display: none; }

.scrolly-loader-mark {
  width: 44px;
  height: auto;
  opacity: 0.85;
  animation: scrolly-pulse 2.4s var(--ease, cubic-bezier(.4,0,.2,1)) infinite;
}

@keyframes scrolly-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.97); }
  50%      { opacity: 0.9;  transform: scale(1); }
}

.scrolly-loader-bar {
  width: 168px;
  height: 1px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
}

.scrolly-loader-fill {
  height: 100%;
  width: 100%;
  background: var(--gold-lt, #b08830);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}

.scrolly-loader-pct {
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}

/* Scroll bloqué tant que les frames ne sont pas en cache. */
body.scrolly-locked {
  overflow: hidden;
  touch-action: none;
}

/* ---- Section d'expertise, glisse par-dessus la dernière frame ----------- */

.expertise {
  position: relative;
  z-index: 3;
  background: #171717;                       /* neutral-900 */
  color: #fafafa;
  padding: clamp(80px, 12vh, 160px) 0 clamp(72px, 10vh, 140px);
}

.expertise-inner {
  width: min(1180px, 90vw);
  margin: 0 auto;
}

.expertise-tag {
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lt, #b08830);
}

.expertise-h2 {
  max-width: 17ch;
  margin-top: 26px;
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fafafa;
  text-wrap: balance;
}

.expertise-lead {
  max-width: 62ch;
  margin-top: clamp(22px, 3vw, 34px);
  font-family: var(--font-b);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.85;
  color: rgba(250,250,250,0.62);
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(56px, 8vw, 96px);
  background: rgba(250,250,250,0.1);
  border-block: 1px solid rgba(250,250,250,0.1);
}

.expertise-cell {
  background: #171717;
  padding: clamp(30px, 3.4vw, 46px) clamp(24px, 2.6vw, 38px);
}

.expertise-num {
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(176,136,48,0.75);
  font-variant-numeric: tabular-nums;
}

.expertise-cell h3 {
  margin-top: 18px;
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.5vw, 1.34rem);
  line-height: 1.3;
  color: #fafafa;
}

.expertise-cell p {
  margin-top: 12px;
  font-family: var(--font-b);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(250,250,250,0.55);
}

.expertise-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(48px, 7vw, 80px);
}

.expertise-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r, 2px);
  transition: transform .4s var(--ease, cubic-bezier(.4,0,.2,1)),
              opacity .4s var(--ease, cubic-bezier(.4,0,.2,1));
}

.expertise-cta--primary {
  background: var(--gold-lt, #b08830);
  color: #171717;
}

.expertise-cta--ghost {
  color: rgba(250,250,250,0.72);
  border: 1px solid rgba(250,250,250,0.22);
}

.expertise-cta:hover { transform: translateY(-2px); }
.expertise-cta--ghost:hover { opacity: 0.75; }

@media (max-width: 860px) {
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-actions { flex-direction: column; align-items: stretch; }
  .expertise-cta { justify-content: center; }
}

/* ---- Mouvement réduit --------------------------------------------------- */

/* !important assume : ces regles doivent battre les utilitaires Tailwind
   h-[400svh], sticky et h-screen, qui ont la meme specificite. */
@media (prefers-reduced-motion: reduce) {
  .scrolly { height: auto !important; }
  .scrolly-pin {
    position: static !important;
    height: auto !important;
    display: block;
    padding: clamp(64px, 10vh, 120px) 0;
  }
  .scrolly-canvas { position: absolute; opacity: 0.35; }
  .scrolly-stage {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    transform: none;
    margin: 0 auto;
    padding-block: clamp(40px, 8vh, 90px);
  }
  .expertise-cta:hover { transform: none; }
}

/* ---- Repli sans moteur d'animation -------------------------------------- */

/* GSAP vient d'un CDN. Bloque, lent ou indisponible, le scrub n'existe pas :
   le JS pose alors .is-statique. Sans ces regles, les quatre scenes restaient
   en position absolue et s'empilaient au centre de l'ecran, l'une par-dessus
   l'autre. La page se lit maintenant de haut en bas, comme en mouvement
   reduit. */
.scrolly.is-statique { height: auto; }
.scrolly.is-statique .scrolly-pin {
  position: static;
  height: auto;
  display: block;
  padding: clamp(64px, 10vh, 120px) 0;
}
.scrolly.is-statique .scrolly-canvas { position: absolute; opacity: 1; }
.scrolly.is-statique .scrolly-poster { display: none; }
.scrolly.is-statique .scrolly-intro { display: none; }
.scrolly.is-statique .scrolly-stage {
  position: relative;
  left: auto;
  top: auto;
  opacity: 1;
  transform: none;
  margin: 0 auto;
  padding-block: clamp(40px, 8vh, 90px);
}
.scrolly.is-statique .scrolly-cta {
  position: relative; left: auto; bottom: auto; transform: none;
  justify-content: center; margin-top: 30px;
}
.scrolly.is-statique .scrolly-hint,
.scrolly.is-statique .scrolly-index { display: none; }

/* ==========================================================================
   Finition
   ========================================================================== */

/* ---- Révélation mot à mot ----------------------------------------------- */

.scrolly-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Le masque qui découpe le mot par le bas : c'est lui qui donne le geste
   d'imprimerie plutôt qu'un simple fondu. */
.scrolly-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* ---- Progression par scène ---------------------------------------------- */

.scrolly-index {
  position: absolute;
  z-index: 3;
  right: clamp(18px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}

.scrolly-index-mark {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}

.scrolly-index-mark i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold-lt, #b08830);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

@media (max-width: 640px) {
  .scrolly-index { display: none; }
}

/* ---- Invite à défiler ---------------------------------------------------- */

.scrolly-skip {
  position: absolute;
  z-index: 6;
  right: var(--scrolly-gut);
  bottom: var(--scrolly-hint-b);
  padding: 11px 18px;
  border: 1px solid rgba(230, 193, 99, .75);
  background: rgba(10, 10, 10, .72);
  color: #fff;
  font: 600 .76rem var(--font-b);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.scrolly-skip:hover, .scrolly-skip:focus-visible {
  background: #e6c163;
  color: #101010;
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .scrolly-skip { right: 20px; bottom: 22px; }
}
.scrolly.is-statique .scrolly-skip { display: none; }

.scrolly-hint {
  position: absolute;
  z-index: 3;
  bottom: var(--scrolly-hint-b);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  will-change: transform, opacity;
}

.scrolly-hint-txt {
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  /* La deuxième scène se joue sur un sol pâle : à 50 % de blanc et sans
     ombre, l'invite disparaissait complètement dans l'image. */
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Un rail fixe, et un segment doré qui le descend. La structure ne bouge pas,
   seul le repère avance : c'est ce qui distingue une invite tenue d'un
   clignotement. L'ancienne version faisait pousser un trait blanc translucide
   sur toute sa hauteur, invisible dès que l'image derrière était claire.
   Le rail est en overflow: hidden : le segment est coupé net au pied du rail
   au lieu de poursuivre sa course par-dessus le chevron. */
.scrolly-hint-line {
  position: relative;
  display: block;
  width: 2px;
  height: 44px;
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
}

.scrolly-hint-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 18px;
  background: linear-gradient(to bottom, rgba(230, 193, 99, 0), #e6c163);
  animation: scrolly-descente 2.2s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes scrolly-descente {
  0%   { transform: translate3d(0, -18px, 0); }
  100% { transform: translate3d(0, 44px, 0); }
}

/* Chevron immobile, juste sous le rail. Il est porté par le conteneur et non
   par le rail : sur le rail, l'overflow: hidden qui coupe le segment le
   couperait aussi. La marge négative reprend une partie du gap de la grille
   pour le rapprocher du pied du trait. */
.scrolly-hint::after {
  content: '';
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid #e6c163;
  border-bottom: 2px solid #e6c163;
  transform: rotate(45deg);
  opacity: 0.72;
}

/* ---- Révélation de la section d'expertise ------------------------------- */

/* Le bandeau partenaires porte desormais la remontee par-dessus la derniere
   image ; la section protocole se pose simplement dessous. */
.expertise { margin-top: 0; }

.expertise-inner > * { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .scrolly-hint,
  .scrolly-index { display: none; }
  .scrolly-word { opacity: 1 !important; transform: none !important; }
  .scrolly-hint-line::after { animation: none; opacity: 1; }
}

/* ==========================================================================
   Premier écran
   ========================================================================== */

/* L'image d'accroche tient la place jusqu'à ce que les frames soient prêtes.
   Elle ne disparaît jamais brutalement : le canvas se pose par-dessus. */
.scrolly-poster {
  transition: opacity .6s var(--ease, cubic-bezier(.4,0,.2,1));
}

.scrolly-canvas {
  opacity: 0;
  transition: opacity .6s var(--ease, cubic-bezier(.4,0,.2,1)),
              filter .45s var(--ease, cubic-bezier(.4,0,.2,1));
}

.scrolly.is-live .scrolly-canvas { opacity: 1; }
.scrolly.is-live .scrolly-poster { opacity: 0; }

/* ---- Signature d'ouverture ---------------------------------------------- */

/* Posee dans le quart haut gauche, la ou l'image est vide : l'abeille tient
   la droite du cadre. Sous la barre de navigation, dont le logo s'efface
   pendant ce temps pour ne pas doubler la marque. */
.scrolly-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: opacity;
}

.scrolly-intro-brand {
  position: absolute;
  left: var(--scrolly-gut);
  top: clamp(92px, 15vh, 160px);
  display: grid;
  justify-items: start;
  gap: 18px;
  text-align: left;
}

.scrolly-intro-logo {
  width: clamp(260px, 34vw, 500px);
  height: auto;
  filter: drop-shadow(0 3px 26px rgba(0,0,0,0.55));
  animation: scrolly-logo-in 1.1s var(--ease, cubic-bezier(.4,0,.2,1)) both;
}

/* Décalée sous le mot « Cleaner », pas sous l'abeille : le filet doré tient
   l'alignement et se déploie après le logo. */
.scrolly-intro-tag {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: clamp(8px, 1.2vh, 18px);
  margin-left: var(--scrolly-indent);
  padding-left: clamp(16px, 1.8vw, 26px);
  font-family: var(--font-b);
  font-size: clamp(0.76rem, 1.4vw, 1.02rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 2px 18px rgba(0,0,0,0.65);
}

.scrolly-intro-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 2px;
  background: linear-gradient(to bottom, #e6c163, rgba(230,193,99,0));
  transform: scaleY(0);
  transform-origin: top center;
  animation: scrolly-tag-rule 1s .55s var(--ease, cubic-bezier(.4,0,.2,1)) both;
}

.scrolly-intro-tag span {
  opacity: 0;
  animation: scrolly-tag-in .9s var(--ease, cubic-bezier(.4,0,.2,1)) both;
}

.scrolly-intro-tag span:nth-child(1) { animation-delay: .5s; }

/* Le coin haut gauche de l'image est clair : un doré sombre s'y perdrait. */
.scrolly-intro-tag span:nth-child(2) {
  animation-delay: .72s;
  color: #e6c163;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}

@keyframes scrolly-logo-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes scrolly-tag-rule {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes scrolly-tag-in {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* Contrepoids en diagonale du logo, dans le coin que l'abeille laisse vide. */
.scrolly-intro-welcome {
  position: absolute;
  right: clamp(56px, 9vw, 170px);
  bottom: calc(var(--scrolly-hint-b) + 48px);
  font-family: var(--font-h);
  font-size: clamp(2.1rem, 5.6vw, 4.2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #e6c163;
  text-shadow: 0 3px 30px rgba(0,0,0,0.8);
}

/* Le haut gauche de l'image est clair (la baie vitree) : sans assombrir ce
   coin, un logo blanc s'y perdrait. Le voile est porte par le calque de
   lisibilite deja en place, et non par un pseudo-element en position fixed :
   un fixed echappe a l'overflow du pin et elargit le document. */
.scrolly-veil {
  transition: background .8s var(--ease, cubic-bezier(.4,0,.2,1));
}

body.is-opening .scrolly-veil {
  background:
    radial-gradient(ellipse 80% 80% at 8% 12%,
      rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 60% 55% at 92% 88%,
      rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 95% 75% at 50% 50%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 62%, rgba(0,0,0,0.55) 100%),
    rgba(0,0,0,0.08);
}

/* ---- H1 réel, sous la phrase d'accroche --------------------------------- */

.scrolly-h1 {
  margin-top: clamp(14px, 2.2vw, 24px);
  font-family: var(--font-b);
  font-size: clamp(0.88rem, 1.35vw, 1.05rem);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.78);
  text-wrap: balance;
}

.scrolly-h1 em {
  font-style: normal;
  color: rgba(255,255,255,0.95);
}

/* ---- Preuve sociale et appel à l'action --------------------------------- */

.scrolly-cta {
  position: absolute;
  z-index: 3;
  left: calc(var(--scrolly-gut) + var(--scrolly-indent));
  bottom: clamp(62px, 11vh, 118px);
  will-change: opacity;
}

.scrolly-note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: background .35s var(--ease, cubic-bezier(.4,0,.2,1)),
              transform .35s var(--ease, cubic-bezier(.4,0,.2,1));
}

.scrolly-note:hover {
  background: rgba(10,10,10,0.62);
  transform: translateY(-2px);
}

.scrolly-note-g { width: 22px; height: 22px; flex: none; }

.scrolly-note-txt { display: grid; gap: 1px; }

.scrolly-note-top { display: flex; align-items: center; gap: 7px; }

.scrolly-note-n {
  font-family: var(--font-h);
  font-size: 1.05rem;
  line-height: 1;
  color: #fff;
}

.scrolly-note-stars {
  font-size: 0.72rem;
  letter-spacing: 1px;
  line-height: 1;
  color: #f5b301;
}

.scrolly-note-t {
  font-family: var(--font-b);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}

/* Sous 900 px, l'appel à l'action occupe toute la largeur du bas : la
   signature ne peut plus tenir le coin, elle passe sous le logo. */
/* Sous 900 px, plus assez de largeur pour tenir les deux coins : la signature
   se remet dans le flux, sous le logo. */
@media (max-width: 900px) {
  .scrolly-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 4vh, 34px);
    padding: clamp(80px, 13vh, 130px) clamp(20px, 5vw, 76px) 0;
  }
  .scrolly-intro-brand,
  .scrolly-intro-welcome { position: static; }
  .scrolly-intro-logo { width: min(74vw, 420px); }
  .scrolly-intro-welcome { font-size: clamp(1.9rem, 9vw, 3rem); }

  /* Les bulles d'appel occupent les deux coins bas : le badge passe au centre,
     l'invite à défiler remonte au-dessus. */
  .scrolly-cta {
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(22px, 3.5vh, 34px);
  }
  .scrolly-hint { bottom: clamp(92px, 13vh, 118px); }
}

/* ---- Barre de navigation par-dessus la vidéo ---------------------------- */

/* Le header reprend son fond crème après 50px de scroll : sur dix écrans de
   vidéo sombre, ce bandeau clair flotterait. Tant que la traversée dure, il
   reste transparent et passe en texte clair. */
body.scrolly-over .hdr.on {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
}

body.scrolly-over .hdr,
body.scrolly-over .hdr a,
body.scrolly-over .hdr button {
  color: #fff;
}

body.scrolly-over .hdr .nav-logo img,
body.scrolly-over .hdr .burger-lines span {
  filter: invert(1) brightness(2);
}

/* Le logo du header s'efface tant que la signature d'ouverture est à l'écran,
   pour ne pas doubler la marque. */
body.is-opening .hdr .nav-logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease, cubic-bezier(.4,0,.2,1));
}

@media (prefers-reduced-motion: reduce) {
  .scrolly-canvas { opacity: 1; }
  .scrolly-poster { display: none; }
  .scrolly-intro { display: none; }
  .scrolly-cta { position: relative; left: auto; bottom: auto; transform: none;
                 justify-content: center; margin-top: 30px; }
}

/* ==========================================================================
   Téléphone — on retire le flou du canvas
   Le va-et-vient de netteté était une transition de 0,45 s sur filter, relancée
   à chaque tick de scroll sur un canvas plein écran. Le compositeur d'un
   téléphone n'a pas le temps : il laissait passer des images vides, ce sont
   les flashs vus en remontant. Le JS ne l'écrit plus ici (setBlur sort tout
   de suite) ; on enlève aussi la couche de composition qu'entretenait
   will-change, qui coûte un plein écran de mémoire pour rien.
   ========================================================================== */

@media (max-width: 767px) {
  .scrolly-canvas {
    will-change: auto;
    transition: none;
    filter: none;
  }
}

/* ---- Origine de la séquence --------------------------------------------- */

/* Les 225 frames sont générées. La mention se tient dans l'angle libre du
   premier écran : l'avis Google occupe la gauche, l'invite à défiler le
   centre, les repères de scène la droite à mi-hauteur. */
.scrolly-ia {
  position: absolute;
  z-index: 3;
  right: var(--scrolly-gut, clamp(20px, 5vw, 76px));
  bottom: var(--scrolly-hint-b, clamp(26px, 5vh, 54px));
  margin: 0;
  max-width: 46vw;
  text-align: right;
  font-family: var(--font-b, inherit);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(250, 250, 250, 0.38);
  pointer-events: none;
}

@media (max-width: 767px) {
  .scrolly-ia { font-size: 0.54rem; letter-spacing: 0.12em; }
}

.scrolly.is-statique .scrolly-ia {
  position: static;
  max-width: none;
  text-align: center;
  margin-top: 18px;
}