/* =========================================================
   TATEA — Hero 3 : planche des 7 effets (tatea-hero-3-effets.html?e=1…7)
   Se charge par-dessus tatea-hero-3.css. Un seul effet actif à la fois,
   choisi par <html data-e="N">.
   ========================================================= */

/* ---------- Sélecteur d'effet (outil de démo, pas du site) ---------- */
.fx { position: fixed; z-index: 50; left: 50%; bottom: 14px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: var(--night); color: var(--wall); font: 500 13px/1 "Barlow", sans-serif; box-shadow: 0 12px 30px rgb(11 22 38 / .28); max-width: calc(100vw - 24px); }
.fx a { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; color: #b9c2d2; text-decoration: none; }
.fx a:hover { background: rgb(228 232 239 / .1); color: #fff; }
.fx a[aria-current] { background: var(--gold); color: var(--ink); font-weight: 600; }
.fx__name { padding: 0 6px 0 12px; white-space: nowrap; font-weight: 600; }
.fx__hint { padding-right: 12px; color: #8593aa; white-space: nowrap; }
.fx .fx__again { background: rgb(228 232 239 / .1); color: #fff; }
@media (max-width: 760px) { .fx__name, .fx__hint { display: none; } }

/* ---------- Section 02 (pour pouvoir défiler) ---------- */
.s02 { background: var(--night); color: var(--wall); min-height: 100vh; padding: clamp(80px, 16vh, 160px) var(--edge); }
.s02__label { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-strong); }
.s02__title { margin: 0; font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1.04; letter-spacing: -.02em; }
.s02__title b { font-weight: 500; color: var(--gold-strong); }
.s02__note { margin: 28px 0 0; font-size: 14px; color: #8593aa; }
.dive__end { display: none; }

.hero__person { pointer-events: none; }
.acad[hidden], .tip[hidden] { display: none; }

/* =========================================================
   1 — La liaison des trois villes
   ========================================================= */
.routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.routes__arc { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s cubic-bezier(.6, 0, .3, 1); }
.routes__dot { fill: var(--gold-strong); stroke: var(--wall); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .45s cubic-bezier(.3, 1.7, .5, 1); }
.routes__ring { fill: none; stroke: var(--gold-strong); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.routes__lbl { font: 600 14px "Barlow", sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--wall); stroke-width: 5px; stroke-linejoin: round; opacity: 0; transition: opacity .4s; }
.routes .is-on.routes__dot { scale: 1; }
.routes .is-on.routes__ring { animation: ring 1s ease-out both; }
.routes .is-on.routes__lbl { opacity: 1; }
.routes .is-on.routes__arc { stroke-dashoffset: 0; }
@keyframes ring { from { opacity: .9; scale: .4; } to { opacity: 0; scale: 2.6; } }

/* =========================================================
   2 — « l'Afrique » se remplit de jaune avec la carte
   ========================================================= */
[data-e~="2"] .hero__title .w + .w > span {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(to top, var(--gold) 50%, #10131a 50%);
  background-size: 100% 200%; background-position: 0 0; background-repeat: no-repeat;
}
[data-e~="2"] .is-in .hero__title .w + .w > span {
  background-position: 0 100%;
  transition: transform 1s cubic-bezier(.7, 0, .2, 1) .7s, background-position 1.1s cubic-bezier(.6, 0, .3, 1) 1.1s;
}

/* le mot jaune défile (si data-words) : il tombe, le suivant remonte et se remplit de jaune */
[data-e~="2"] .is-done .hero__title .w + .w > span { transition: transform .5s var(--ease), background-position .8s cubic-bezier(.6, 0, .3, 1) .2s; }
.hero__title [data-words] { white-space: nowrap; }
.hero__title .w > span.is-reset { background-position: 0 0 !important; transition: none !important; }

/* =========================================================
   3 — Les pays qui répondent au survol
   ========================================================= */
[data-e~="3"] .map__c--hc { cursor: pointer; transform-box: fill-box; transform-origin: 50% 100%; }
[data-e~="3"] .is-done .map__c--hc { transition: transform .4s var(--ease), filter .4s, fill .3s; }
[data-e~="3"] .map__c--hc.is-hot { transform: translateY(-4%) scale(1.1); fill: #22345f; filter: drop-shadow(0 8px 6px rgb(11 22 38 / .35)); }
[data-e~="3"] .hero__place span { cursor: pointer; transition: color .25s; }
[data-e~="3"] .hero__place span.is-hot { color: var(--gold); }
.tip {
  position: absolute; z-index: 6; margin: 0; padding: 10px 14px 11px; border-radius: 14px;
  background: var(--night); color: var(--wall); font-size: 13px; line-height: 1.35; white-space: nowrap; pointer-events: none;
  translate: -50% calc(-100% - 12px); animation: tip-in .3s var(--ease) both;
}
.tip b { display: block; font-size: 15px; font-weight: 600; color: var(--gold-strong); }
@keyframes tip-in { from { opacity: 0; transform: translateY(6px); } }

/* =========================================================
   4 — Le relief à la souris (transform piloté en JS)
   ========================================================= */
[data-e~="4"] .hero__map, [data-e~="4"] .hero__person, [data-e~="4"] .hero__title, [data-e~="4"] .hero__left { will-change: transform; }

/* =========================================================
   5 — La sortie en profondeur (transform piloté en JS)
   ========================================================= */
[data-e~="5"] .hero__map, [data-e~="5"] .hero__person, [data-e~="5"] .hero__title, [data-e~="5"] .hero__left { will-change: transform; }

/* =========================================================
   6 — La plongée dans la carte
   ========================================================= */
[data-e~="6"] .dive { height: calc(100vh + 170vh); }
[data-e~="6"] .page { position: sticky; top: 0; height: 100vh; min-height: 0; }
/* une fois l'entrée finie, le défilement pilote seul (sans les retards de l'entrée) */
[data-e~="5"] .is-done .hero__person, [data-e~="6"] .is-done .hero__person, [data-e~="6"] .is-done .stat, [data-e~="6"] .is-done .hero__place { transition: none; }
[data-e~="6"] .dive__end {
  display: grid; align-content: center; position: absolute; inset: 0; z-index: 20; padding: 0 var(--edge);
  background: var(--night); color: var(--wall); opacity: 0; pointer-events: none;
}
[data-e~="6"] .dive__end > * { transform: translateY(calc((1 - var(--k, 0)) * 30px)); }
[data-e~="6"] .s02 { padding-top: 40px; }
[data-e~="6"] .s02 > .s02__label, [data-e~="6"] .s02 > .s02__title { display: none; }

/* =========================================================
   8 — Le bandeau pousse la hero : le texte de la S02 remplace les chiffres,
       puis le bandeau monte, pousse la hero hors de l'écran et le titre
       se pose au milieu à gauche (piloté en JS, lissé, réversible)
   ========================================================= */
.stats__next { display: none; }
@media all {
  [data-e~="8"] .dive { height: calc(100vh + 3360vh); height: calc(100svh + 3360svh); }
  [data-e~="8"] .page { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  [data-e~="8"] .stats { overflow: visible; z-index: 10; will-change: transform; }
  [data-e~="8"] .stats::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 100%; height: 100vh; background: var(--wall-2); }
  [data-e~="8"] .hero, [data-e~="8"] .bar { will-change: transform; }
  [data-e~="8"] .stats__next { display: block; position: absolute; left: var(--edge); right: var(--edge); top: 50%; translate: 0 -50%; pointer-events: none; }
  [data-e~="8"] .stats__nextin { transform-origin: 0 50%; }
  [data-e~="8"] .stats__next .s02__label { color: var(--gold); }
  [data-e~="8"] .stats__next .s02__title { color: var(--ink); }
  [data-e~="8"] .stats__next .s02__title b { color: var(--gold); }
  /* chiffres → texte : les chiffres s'effacent vers le haut, le texte de la S02 monte (et l'inverse en remontant) */
  [data-e~="8"] .stats__next .s02__label, [data-e~="8"] .stats__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
  [data-e~="8"] .stats.is-next .stats__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
  [data-e~="8"] .stats.is-next .stats__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
  [data-e~="8"] .is-done .stat { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
  [data-e~="8"] .is-done .stats.is-next .stat { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
  [data-e~="8"] .stats.is-next .stat { opacity: 0; }
  [data-e~="8"] .s02 { padding-top: 12px; }
  [data-e~="8"] .s02 > .s02__label, [data-e~="8"] .s02 > .s02__title { display: none; }
}
/* tablette et mobile : toute la hero tient dans l'écran pour que le bandeau puisse la pousser */
@media (max-width: 1180px) {
  [data-e~="8"] .hero { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
  [data-e~="8"] .hero__stage { height: auto; min-height: 0; }
  [data-e~="8"] .hero__left { padding-block: 14px 18px; }
  [data-e~="8"] .stats__next { left: var(--edge); right: var(--edge); }
  [data-e~="8"] .stats__next .s02__title { font-size: clamp(30px, 7.6vw, 56px); }
}
@media (max-width: 599px) {
  [data-e~="8"] .hero__lead { font-size: 16px; line-height: 1.4; }
  [data-e~="8"] .hero__left .btn { margin-top: 12px; }
}
/* ---------- S02 « Pourquoi TATEA » : les 4 manques ---------- */
.why { display: none; }
[data-e~="8"] .stats__next { right: 52%; }
[data-e~="8"] .stats__next .s02__title { font-size: clamp(40px, 4.4vw, 66px); line-height: 1.02; }
[data-e~="8"] .why {
  display: block; position: absolute; left: 50%; right: var(--edge); top: 0;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
  --rowh: clamp(78px, 11vh, 108px);
}
[data-e~="8"] .stats.is-why .why { opacity: 1; visibility: visible; transition: opacity .3s; }
.why__intro { margin: 0 0 clamp(14px, 2.4vh, 24px); max-width: 44ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; color: var(--text, #4a5468); }
.why__list { position: relative; display: grid; grid-auto-rows: var(--rowh); border-top: 1px solid rgb(22 33 61 / .14); }
.why__row {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 0 calc(var(--picw) + 28px) 0 22px; border: 0; border-bottom: 1px solid rgb(22 33 61 / .14);
  background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer;
}
.why__row:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: -2px; }
.why__t { font-size: clamp(22px, 2.1vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; transition: color .3s; }
.why__d { font-size: clamp(13px, .95vw, 15px); color: #5d667a; transition: color .3s; }
/* une seule bande qui glisse d'un manque à l'autre au défilement ; la photo la suit et la suivante s'agrandit */
.why__band, .why__pic { position: absolute; top: 0; pointer-events: none; will-change: transform; }
.why__band { z-index: 3; left: 0; right: calc(-1 * var(--edge)); height: var(--rowh); background: var(--ink); }
.why__pic { z-index: 4; right: 0; width: var(--picw); height: var(--pich); overflow: hidden; background: var(--ink); }
.why__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0; }
.why__ghost { position: absolute; left: 0; top: 0; width: var(--listw, 100%); display: grid; grid-auto-rows: var(--rowh); will-change: transform; }
.why__ghost .why__row { border-color: transparent; pointer-events: none; }
.why__ghost .why__t { color: #fff; }
.why__ghost .why__d { color: rgb(255 255 255 / .78); }
/* entrée : les lignes montent l'une après l'autre, bande et photo s'ouvrent depuis la gauche */
.why__intro, .why__row, .why__end { opacity: 0; transform: translateY(16px); transition: opacity .45s, transform .6s var(--ease); }
.is-why .why__intro, .is-why .why__row, .is-why .why__end { opacity: 1; transform: none; }
.is-why .why__row:nth-of-type(1) { transition-delay: .06s; } .is-why .why__row:nth-of-type(2) { transition-delay: .12s; }
.is-why .why__row:nth-of-type(3) { transition-delay: .18s; } .is-why .why__row:nth-of-type(4) { transition-delay: .24s; }
.is-why .why__end { transition-delay: .3s; }
.why__band, .why__pic { opacity: 0; transition: opacity .5s .15s; }
.is-why .why__band, .is-why .why__pic { opacity: 1; }
.why__out { margin: 0; max-width: 34ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.4; font-weight: 500; color: var(--ink); }
/* téléphone : titre au-dessus, liste dessous */
@media (max-width: 899px) {
  [data-e~="8"] .stats__next { right: var(--edge); }
  [data-e~="8"] .why { left: var(--edge); --rowh: clamp(64px, 9.4svh, 96px); }
  .why__row { padding-left: 14px; }
  .why__t { font-size: 19px; }
  .why__d { font-size: 12.5px; }
  .why__intro { font-size: 14px; }
  .why__out { font-size: 14px; }
  .why__end { gap: 12px; margin-top: 14px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .why__intro { display: none; }
  [data-e~="8"] .stats__next .s02__title { font-size: 30px; }
  [data-e~="8"] .why { --rowh: 58px; }
  .why__t { font-size: 17px; }
  .why__out { display: none; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  [data-e~="8"] .stats__next .s02__title { font-size: clamp(34px, 5vw, 52px); }
  [data-e~="8"] .why { left: 48%; }
}

/* ---------- S03 « Les académies » : même transition que hero → S02 ---------- */
.acb { display: none; }
[data-e~="8"] .acb { display: block; position: absolute; z-index: 12; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .acb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.acb__out { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: clamp(18px, 3.2vh, 30px) var(--edge); }
.acb__out .why__out { max-width: 46ch; font-size: clamp(16px, 1.25vw, 20px); }
.acb__next { position: absolute; left: var(--edge); right: 52%; top: calc(var(--bh, 100px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.acb__nextin { transform-origin: 0 50%; }
.acb__next .s02__title { margin: 0; font-size: clamp(40px, 4.4vw, 66px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.acb__next .s02__title b { font-weight: inherit; color: var(--gold); }
.acb__next .s02__label { color: var(--gold); }
/* phrase ↔ titre : la phrase s'efface vers le haut, le titre monte (comme le premier bandeau) */
.acb__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.acb.is-next .acb__out > * { opacity: 0; transform: translateY(-18px); pointer-events: none; transition: opacity .25s, transform .45s var(--ease); }
.acb__next .s02__label, .acb__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.acb.is-next .acb__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.acb.is-next .acb__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
/* les académies, à droite du titre */
.ac { position: absolute; left: 50%; right: var(--edge); top: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.acb.is-ac .ac { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
.ac__intro { margin: 0 0 clamp(14px, 2.4vh, 24px); max-width: 48ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; color: var(--text, #4a5468); }
@media (min-width: 900px) and (max-width: 1180px) {
  .acb__next .s02__title { font-size: clamp(34px, 5vw, 52px); }
  .ac { left: 48%; }
}
@media (max-width: 899px) {
  .acb__next { right: var(--edge); }
  .acb__next .s02__title { font-size: clamp(30px, 7.6vw, 56px); }
  .acb__out { gap: 10px 16px; }
  .acb__out .why__out { font-size: 14px; }
  .ac { left: var(--edge); }
  .ac__intro { font-size: 14px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .acb__out .why__out { display: none; }
  .ac__intro { display: none; }
}

/* ---------- S04 « Les niveaux » : même transition, depuis le bas de la S03 ---------- */
.lvb { display: none; }
[data-e~="8"] .lvb { display: block; position: absolute; z-index: 14; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .lvb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.lvb__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
.lvb__out .why__out { margin: 0; max-width: none; font-size: clamp(17px, 1.4vw, 22px); }
.lvb__out .why__out b { font-weight: inherit; color: var(--gold); }
.lvb__next { position: absolute; left: var(--edge); right: 40%; top: calc(var(--bh, 80px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.lvb__nextin { transform-origin: 0 50%; }
.lvb__next .s02__title { margin: 0; font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.lvb__next .s02__title b { font-weight: inherit; color: var(--gold); }
.lvb__next .s02__label { color: var(--gold); }
.lvb__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.lvb.is-next .lvb__out > * { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
.lvb__next .s02__label, .lvb__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.lvb.is-next .lvb__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.lvb.is-next .lvb__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
.lv { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.lvb.is-lv .lv { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
@media (max-width: 899px) {
  .lvb__next { right: var(--edge); }
  .lvb__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  .lvb__out .why__out { font-size: 15px; }
}

/* ---------- S05 « Ce que vous devenez » : même transition, depuis le bas de la S04 ---------- */
.cvb { display: none; }
[data-e~="8"] .cvb { display: block; position: absolute; z-index: 16; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .cvb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.cvb__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
.cvb__out .why__out { margin: 0; max-width: none; font-size: clamp(17px, 1.4vw, 22px); }
.cvb__out .why__out b { font-weight: inherit; color: var(--gold); }
.cvb__next { position: absolute; left: var(--edge); right: 40%; top: calc(var(--bh, 80px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.cvb__nextin { transform-origin: 0 50%; }
.cvb__next .s02__title { margin: 0; font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.cvb__next .s02__title b { font-weight: inherit; color: var(--gold); }
.cvb__next .s02__label { color: var(--gold); }
.cvb__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.cvb.is-next .cvb__out > * { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
.cvb__next .s02__label, .cvb__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.cvb.is-next .cvb__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.cvb.is-next .cvb__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
.cv { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.cvb.is-cv .cv { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
@media (max-width: 899px) {
  .cvb__next { right: var(--edge); }
  .cvb__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  .cvb__out .why__out { font-size: 15px; }
}

/* ---------- S06 « Intervenants & mentors » : même transition, depuis le bas de la S05 ---------- */
.ivb { display: none; }
[data-e~="8"] .ivb { display: block; position: absolute; z-index: 17; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .ivb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.ivb__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
.ivb__out .why__out { margin: 0; max-width: none; font-size: clamp(17px, 1.4vw, 22px); }
.ivb__out .why__out b { font-weight: inherit; color: var(--gold); }
.ivb__next { position: absolute; left: var(--edge); right: 40%; top: calc(var(--bh, 80px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.ivb__nextin { transform-origin: 0 50%; }
.ivb__next .s02__title { margin: 0; font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.ivb__next .s02__title b { font-weight: inherit; color: var(--gold); }
.ivb__next .s02__label { color: var(--gold); }
.ivb__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.ivb.is-next .ivb__out > * { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
.ivb__next .s02__label, .ivb__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.ivb.is-next .ivb__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.ivb.is-next .ivb__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
.iv { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.ivb.is-iv .iv { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
@media (max-width: 899px) {
  .ivb__next { right: var(--edge); }
  .ivb__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  .ivb__out .why__out { font-size: 15px; }
}

/* ---------- S07 « Témoignages » : même transition, depuis le bas de la S06 ---------- */
.tmb { display: none; }
[data-e~="8"] .tmb { display: block; position: absolute; z-index: 18; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .tmb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.tmb__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
.tmb__out .why__out { margin: 0; max-width: none; font-size: clamp(17px, 1.4vw, 22px); }
.tmb__out .why__out b { font-weight: inherit; color: var(--gold); }
.tmb__next { position: absolute; left: var(--edge); right: 40%; top: calc(var(--bh, 80px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.tmb__nextin { transform-origin: 0 50%; }
.tmb__next .s02__title { margin: 0; font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.tmb__next .s02__title b { font-weight: inherit; color: var(--gold); }
.tmb__next .s02__label { color: var(--gold); }
.tmb__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.tmb.is-next .tmb__out > * { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
.tmb__next .s02__label, .tmb__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.tmb.is-next .tmb__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.tmb.is-next .tmb__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
.tm { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.tmb.is-tm .tm { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
@media (max-width: 899px) {
  .tmb__next { right: var(--edge); }
  .tmb__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  .tmb__out .why__out { font-size: 15px; }
}

/* ---------- S08 « Admission & tarifs » : même transition, depuis le bas de la S07 ---------- */
.trfb { display: none; }
[data-e~="8"] .trfb { display: block; position: absolute; z-index: 19; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .trfb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.trfb__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
.trfb__out .why__out { margin: 0; max-width: none; font-size: clamp(17px, 1.4vw, 22px); }
.trfb__out .why__out b { font-weight: inherit; color: var(--gold); }
.trfb__next { position: absolute; left: var(--edge); right: 40%; top: calc(var(--bh, 80px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.trfb__nextin { transform-origin: 0 50%; }
.trfb__next .s02__title { margin: 0; font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.trfb__next .s02__title b { font-weight: inherit; color: var(--gold); }
.trfb__next .s02__label { color: var(--gold); }
.trfb__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.trfb.is-next .trfb__out > * { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
.trfb__next .s02__label, .trfb__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.trfb.is-next .trfb__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.trfb.is-next .trfb__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
.trf { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.trfb.is-trf .trf { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
@media (max-width: 899px) {
  .trfb__next { right: var(--edge); }
  .trfb__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  .trfb__out .why__out { font-size: 15px; }
}

/* ---------- S09 « Prochaines cohortes » : même transition, depuis le bas de la S08 ---------- */
.cob { display: none; }
[data-e~="8"] .cob { display: block; position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .cob::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.cob__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
.cob__out .why__out { margin: 0; max-width: none; font-size: clamp(17px, 1.4vw, 22px); }
.cob__out .why__out b { font-weight: inherit; color: var(--gold); }
.cob__next { position: absolute; left: var(--edge); right: 40%; top: calc(var(--bh, 80px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.cob__nextin { transform-origin: 0 50%; }
.cob__next .s02__title { margin: 0; font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.cob__next .s02__title b { font-weight: inherit; color: var(--gold); }
.cob__next .s02__label { color: var(--gold); }
.cob__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.cob.is-next .cob__out > * { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
.cob__next .s02__label, .cob__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.cob.is-next .cob__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.cob.is-next .cob__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
.co { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.cob.is-co .co { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
@media (max-width: 899px) {
  .cob__next { right: var(--edge); }
  .cob__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  .cob__out .why__out { font-size: 15px; }
}

/* ---------- S10 « Questions fréquentes » : même transition, depuis le bas de la S09 ---------- */
.fqb { display: none; }
[data-e~="8"] .fqb { display: block; position: absolute; z-index: 21; left: 0; right: 0; top: 0; height: 100%; background: var(--wall); transform: translate3d(0, 100%, 0); will-change: transform; }
[data-e~="8"] .fqb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(22 33 61 / .12); }
.fqb__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
.fqb__out .why__out { margin: 0; max-width: none; font-size: clamp(17px, 1.4vw, 22px); }
.fqb__out .why__out b { font-weight: inherit; color: var(--gold); }
.fqb__next { position: absolute; left: var(--edge); right: 40%; top: calc(var(--bh, 80px) / 2); translate: 0 -50%; pointer-events: none; will-change: transform; }
.fqb__nextin { transform-origin: 0 50%; }
.fqb__next .s02__title { margin: 0; font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.fqb__next .s02__title b { font-weight: inherit; color: var(--gold); }
.fqb__next .s02__label { color: var(--gold); }
.fqb__out > * { transition: opacity .35s .12s, transform .6s var(--ease) .12s; }
.fqb.is-next .fqb__out > * { opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .45s var(--ease); }
.fqb__next .s02__label, .fqb__next .s02__title { opacity: 0; transform: translateY(26px); transition: opacity .3s, transform .5s var(--ease); }
.fqb.is-next .fqb__next .s02__label { opacity: 1; transform: none; transition: opacity .35s .12s, transform .7s var(--ease) .12s; }
.fqb.is-next .fqb__next .s02__title { opacity: 1; transform: none; transition: opacity .35s .18s, transform .7s var(--ease) .18s; }
.fq { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .4s; }
.fqb.is-fq .fq { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .6s var(--ease); }
@media (max-width: 899px) {
  .fqb__next { right: var(--edge); }
  .fqb__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  .fqb__out .why__out { font-size: 15px; }
}

/* la suite de la page continue sur le même mur */
[data-e~="8"] .s02 { background: var(--wall); color: var(--ink); }
[data-e~="8"] .s02__title b { color: var(--gold); }
[data-e~="8"] .s02__label { color: var(--gold); }

/* =========================================================
   7 — Une dirigeante par académie
   ========================================================= */
.acad { position: absolute; z-index: 5; right: var(--edge); top: calc(32% + clamp(56px, 8.4vw, 132px) * 1.95 + 18px); display: flex; gap: 6px; }
.acad button { min-width: 54px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(22 33 61 / .07); color: var(--ink); font: 600 13px/1 "Barlow", sans-serif; letter-spacing: .06em; cursor: pointer; transition: background-color .25s, color .25s; }
.acad button:hover { background: rgb(22 33 61 / .13); }
.acad button[aria-pressed="true"] { background: var(--ink); color: #fff; }
[data-e~="7"] .acad { animation: tip-in .6s var(--ease) 1.6s both; }
[data-e~="7"] .is-done .hero__person { transition: opacity .4s, translate .55s var(--ease); }
[data-e~="7"] .is-done .hero__title .w > span { transition: transform .5s var(--ease); }
.hero__person.is-out { opacity: 0 !important; translate: -52% 8% !important; transition: opacity .3s, translate .35s ease-in !important; }
.hero__title .w > span.is-swap { transform: translateY(110%) !important; transition: transform .28s ease-in !important; }

@media (max-width: 1180px) {
  .acad { position: static; grid-row: 4; margin: 0 0 24px; flex-wrap: wrap; }
}

/* Lenis (smooth.js) : règles de la bibliothèque (lenis.css) ; le défilement doux CSS est coupé pendant le glissé */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }