/* =========================================================
   Séquence d'ouverture de la hero — essai 5 affiné (2026-10-08).
   (Les essais 1 et 3 gardent intro-seq.css / intro-seq.js.)
   Une fois l'intro lue, la page monte toute seule sur la hero ; les rideaux
   s'ouvrent, le texte arrive à droite, puis LE projecteur de l'intro — le même,
   pas un second — descend, tourne la tête et balaie un groupe de dirigeants à
   gauche, là où était le titre. Rien derrière les personnes : seulement la nuit.
   (v4, 2026-10-09 : une fois la séquence finie, le projecteur suit le pointeur et sa lumière tombe en rond, voir intro-seq5.js § 5.)
   Le JS (intro-seq5.js) :
   - copie le projecteur de l'intro dans un calque `.seq__lamp` posé au-dessus de
     la hero (fixe tant que la hero n'a pas atteint le haut de l'écran, comme
     l'intro épinglée ; accroché à la page ensuite) et cache l'original ;
   - pose les classes is-seq-open (rideaux + texte), is-seq-lit (le groupe entre en
     scène, noir), is-seq-lamp (lentille allumée, faisceau), is-seq-done ;
   - pose --head (la tête du projecteur), --drop (la descente), --over (part du
     projecteur passée sur le rideau, pour le foncer/éclaircir) et, sur le faisceau,
     --w (ouverture), --len (portée), --al (intensité) ; --b (luminosité d'une personne).
   Sans JS, en mouvement réduit : la scène est directement dans son état final.
   ========================================================= */

/* ---------- Ce que la séquence remplace : le rideau d'un bloc, le disque qui cherche, le dirigeant seul ---------- */
html[data-seq] .stage__drift,
html[data-seq] .stage__light,
html[data-seq] .stage__actor { display: none; }

html[data-seq] .stage {
  --k: 0.1;                               /* largeur des rideaux ouverts (part de leur largeur) */
  --crew-x: 4%;
  --crew-w: 42%;
  --crew-h: min(84%, 44vw);
}
/* le voile du bas : le groupe reste lumineux jusqu'à la poitrine, pas de voile à gauche */
html[data-seq] .stage__shade {
  background:
    linear-gradient(to bottom, rgb(11 22 38 / 0.32), rgb(11 22 38 / 0) 18%),
    linear-gradient(to bottom, rgb(11 22 38 / 0) 50%, rgb(11 22 38 / 0.6) 66%, rgb(11 22 38 / 0.94) 80%, var(--night) 94%);
}

@media (min-width: 1600px) { html[data-seq] .stage { --crew-x: 5%; --crew-w: 46%; } }

/* ---------- Le texte passe à droite ---------- */
@media (min-width: 1024px) {
  html[data-seq] .copy { justify-self: end; width: min(680px, 42vw); }
  html[data-seq] .title { font-size: clamp(1.9rem, 2.9vw, 3rem); }
  html[data-seq] .lead { max-width: 50ch; }
}

/* ---------- Rideaux : deux pans, faits de la même photo que l'ancien rideau ---------- */
.seq__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  will-change: transform;
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.2, 1);
}
.seq__half--l { left: 0; transform-origin: 0 50%; }
.seq__half--r { right: 0; transform-origin: 100% 50%; }
.seq__half img {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 35%;
}
.seq__half--l img { left: 0; }
.seq__half--r img { right: 0; }
/* même pénombre que l'ancien rideau, et une ombre au bord libre du pan */
.seq__half::after { content: ""; position: absolute; inset: 0; background: rgb(8 15 30 / 0.46); }
.seq__half--l::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, transparent 72%, rgb(2 6 14 / 0.55)); }
.seq__half--r::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, transparent 72%, rgb(2 6 14 / 0.55)); }

.js:not(.is-ready) .seq__half { opacity: 0; }
.is-ready .seq__half { animation: fade 1.2s 0.3s ease-out backwards; }
:is(html.is-seq-open, html:not(.js)) .seq__half { transform: scaleX(var(--k)); }

/* ---------- Le groupe : des silhouettes dans la nuit, que le projecteur révèle une à une ---------- */
.seq__crew {
  position: absolute;
  left: var(--crew-x);
  bottom: 0;
  width: var(--crew-w);
  height: var(--crew-h);
  pointer-events: none;
  transform: translate3d(calc(var(--px) * 8px), 0, 0);
}
html:not(.js) .seq__p { --b: 1; }
.seq__p {
  --b0: 0;
  position: absolute;
  bottom: 0;
  left: calc(var(--x) * 1%);
  z-index: var(--z);
  height: calc(var(--h) * 1%);
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: brightness(var(--b, var(--b0)));
}
.js:not(.is-seq-lit) .seq__p { opacity: 0; transform: translate(-50%, 6%); }
.is-seq-lit .seq__p {
  transition: opacity 0.6s calc(var(--i) * 0.09s), transform 0.95s calc(var(--i) * 0.09s) var(--ease-out);
}
.is-seq-done .seq__p { transition: filter 0.6s; }

/* ---------- Le projecteur : celui de l'intro, copié par le JS au-dessus de la hero ---------- */
.seq__lamp {
  position: fixed;
  top: 0;
  left: 61%;
  z-index: 5;
  width: clamp(88px, 9.4vw, 150px);
  height: auto;
  overflow: visible;
  /* sur le mur clair, bleu nuit ; sur le rideau, un bleu un peu plus clair pour rester lisible */
  fill: color-mix(in srgb, var(--night), #1d2a48 calc(var(--over, 0) * 100%));
  stroke: color-mix(in srgb, var(--night), #44537c calc(var(--over, 0) * 100%));
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgb(11 22 38 / 0.22));
  transform: translate(var(--lamp-dx), var(--lamp-dy));
  translate: 0 var(--drop, 0px);
  will-change: transform;
  pointer-events: none;
}
.seq__lamp .intro__lamp-head { transform: rotate(var(--head, -34deg)); }
/* la lentille s'éteint quand le rideau passe, se rallume sur la scène */
.seq__lamp .intro__lens { fill: color-mix(in srgb, #fff, #3b4560 calc(var(--over, 0) * 100%)); }
.seq__lamp.is-on .intro__lens { fill: #fff; animation: seq-lamp-on 0.35s ease-out backwards; }
@keyframes seq-lamp-on { from { fill: #3b4560; } }
/* la page remonte sur l'intro : le projecteur reprend sa place d'origine en douceur */
.seq__lamp.is-ease { transition: translate 0.7s var(--ease-out); }
.seq__lamp.is-ease .intro__lamp-head { transition: transform 0.7s var(--ease-out); }

/* Le faisceau : un cône très doux, blanc chaud, qui s'éteint avec la distance (pas de bord net). */
.seq__beam {
  --w: 40deg;      /* ouverture totale (posée par le JS) */
  --len: 800px;    /* portée */
  --al: 0.13;      /* intensité au cœur, près de la lentille */
  position: absolute;
  left: 0;
  top: 0;
  width: var(--len);
  height: calc(var(--len) * 1.8);
  margin-top: calc(var(--len) * -0.9);
  transform-origin: 0 50%;
  background: conic-gradient(from calc(90deg - var(--w) / 2) at 0 50%,
    rgb(255 246 230 / 0) 0deg,
    rgb(255 246 230 / calc(var(--al) * 0.16)) calc(var(--w) * 0.16),
    rgb(255 246 230 / calc(var(--al) * 0.55)) calc(var(--w) * 0.3),
    rgb(255 246 230 / calc(var(--al) * 0.9)) calc(var(--w) * 0.42),
    rgb(255 246 230 / var(--al)) calc(var(--w) * 0.5),
    rgb(255 246 230 / calc(var(--al) * 0.9)) calc(var(--w) * 0.58),
    rgb(255 246 230 / calc(var(--al) * 0.55)) calc(var(--w) * 0.7),
    rgb(255 246 230 / calc(var(--al) * 0.16)) calc(var(--w) * 0.84),
    rgb(255 246 230 / 0) var(--w),
    rgb(255 246 230 / 0) 360deg);
  -webkit-mask: radial-gradient(circle var(--len) at 0 50%, #000 0%, rgb(0 0 0 / 0.72) 36%, rgb(0 0 0 / 0.42) 70%, rgb(0 0 0 / 0.12) 92%, transparent 100%);
  mask: radial-gradient(circle var(--len) at 0 50%, #000 0%, rgb(0 0 0 / 0.72) 36%, rgb(0 0 0 / 0.42) 70%, rgb(0 0 0 / 0.12) 92%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.is-seq-lamp .seq__beam { opacity: 1; transition: opacity 0.7s ease-out; }
/* un éclat discret autour de la lentille : la source se devine, sans halo */
.seq__bloom {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 246 230 / 0.34), rgb(255 246 230 / 0.1) 46%, rgb(255 246 230 / 0));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.is-seq-lamp .seq__bloom { opacity: 1; transition: opacity 0.7s ease-out; }

/* ---------- Le rond de lumière sous le pointeur ----------
   Un voile bleu nuit sur toute la scène (personnes, rideaux), percé d'un cercle doux à
   l'endroit du pointeur : le faisceau du projecteur y finit. Dans le rond, un léger voile
   chaud : on voit la lumière tomber, même sur le fond nu. Le texte et le menu restent au-dessus.
   Le dégradé est fixe, centré dans un calque deux fois plus grand que la scène : le JS le
   déplace seulement (transform) et en règle la force (opacity) — rien n'est repeint quand
   le pointeur bouge. Seul --r (la taille du rond) repeint, et il ne change presque jamais. */
.seq__dim {
  --r: 320px;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle var(--r) at 50% 50%,
    rgb(255 244 224 / 0.07) 0%,
    rgb(255 244 224 / 0.045) 48%,
    rgb(11 22 38 / 0.2) 68%,
    rgb(11 22 38 / 0.66) 86%,
    rgb(11 22 38 / 0.9) 100%);
}

/* La pastille « H&C Executive Education · L'université du résultat » est retirée de la hero (demande du 2026-10-09) : le titre n'a plus besoin de marge au-dessus. */
html[data-seq="5"] .hero .title { margin-top: 0; }

/* ---------- Tablette et mobile : le groupe en haut, le texte dessous, à gauche (comme avant) ---------- */
@media (max-width: 1023px) {
  html[data-seq] .stage {
    --k: 0.08;
    --crew-x: 5%;
    --crew-w: 90%;
  }
  html[data-seq] .seq__crew { bottom: auto; top: 9svh; height: 40svh; -webkit-mask: linear-gradient(to bottom, #000 78%, transparent 99%); mask: linear-gradient(to bottom, #000 78%, transparent 99%); }
  html[data-seq] .stage__shade {
    background:
      linear-gradient(to bottom, rgb(11 22 38 / 0.42), rgb(11 22 38 / 0) 20%),
      linear-gradient(to bottom, rgb(11 22 38 / 0) 38%, rgb(11 22 38 / 0.6) 50%, rgb(11 22 38 / 0.96) 62%, var(--night) 100%);
  }
}
@media (max-width: 759px) {
  html[data-seq] .stage {
    --k: 0.06;
    --crew-x: -10%;
    --crew-w: 120%;
  }
  html[data-seq] .seq__crew { top: 15svh; height: 36svh; }
  html[data-seq] .seq__p[data-edge] { display: none; }
  .seq__lamp { left: 38%; width: 70px; }
}

/* ---------- Mouvement réduit : la scène est directement finie ---------- */
@media (prefers-reduced-motion: reduce) {
  .seq__half, .seq__p, .seq__beam, .seq__bloom { transition: none !important; }
  .is-ready .seq__half { animation: none; }
}
html.is-autoscroll { scroll-snap-type: none !important; }