/* =========================================================
   TATEA — la grille commune à toutes les sections (se charge en dernier)
   Pour qu'on ne change pas de site en défilant :
   - la barre (logo + menu) reste en haut de toutes les sections ;
   - chaque titre se pose au même endroit (--top, juste sous la barre), à la même taille ;
   - dessous, toujours la même grille : une colonne de texte à gauche (intro en haut, bouton jaune en bas),
     le visuel à droite, qui s'arrête au-dessus du bandeau de la section suivante ;
   - mêmes coins (--r), même bleu nuit, mêmes tailles de texte, mêmes bandeaux de bascule.
   --top est posé en JS (hauteur de la barre + marge) ; --tth = hauteur du titre ; --bh3 / --bh4 / --bh5 = bandeau suivant.
   ========================================================= */
:root {
  --top: 92px;
  --col: 30%;                         /* la colonne de texte */
  --gap: clamp(28px, 4vw, 64px);      /* entre la colonne et le visuel */
  --tg: clamp(16px, 2.6vh, 28px);     /* entre le titre et le contenu */
  --bot: clamp(18px, 4.4vh, 44px);    /* marge au-dessus du bandeau suivant */
  --r: 14px;                          /* un seul arrondi pour les cartes et panneaux */
  --ttl: clamp(38px, 3.6vw, 58px);    /* un seul corps de titre de section */
  --intro: clamp(15px, 1.1vw, 17px);
  --band: clamp(17px, 1.4vw, 22px);   /* phrases des bandeaux de bascule */
}
@media (min-width: 900px) and (max-width: 1180px) { :root { --col: 34%; --ttl: clamp(36px, 4.4vw, 48px); } }
@media (max-width: 899px) { :root { --tg: 14px; --bot: 14px; --ttl: clamp(30px, 8.4vw, 44px); --intro: 14px; --band: 15px; } }

/* ---------- la barre : reste en haut de toute la scène ---------- */
html[data-e~="8"] .bar { z-index: 30; padding-block: 16px 14px; background: var(--wall); transition: box-shadow .3s; }
html[data-e~="8"] .bar.is-solid { box-shadow: 0 1px 0 rgb(22 33 61 / .1); }
.bar__nav a { position: relative; padding-block: 6px; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.bar__nav a[aria-current]::after { transform: none; }
@media (max-width: 899px) { html[data-e~="8"] .bar { padding-block: 10px 8px; } }

/* ---------- les titres : même place, même corps ---------- */
html[data-e~="8"] .stats__next, html[data-e~="8"] .acb__next, html[data-e~="8"] .lvb__next, html[data-e~="8"] .cvb__next, html[data-e~="8"] .ivb__next, html[data-e~="8"] .tmb__next , html[data-e~="8"] .trfb__next , html[data-e~="8"] .cob__next , html[data-e~="8"] .fqb__next { right: 40%; }
html[data-e~="8"] .stats__next .s02__title, html[data-e~="8"] .acb__next .s02__title,
html[data-e~="8"] .lvb__next .s02__title, html[data-e~="8"] .cvb__next .s02__title, html[data-e~="8"] .ivb__next .s02__title, html[data-e~="8"] .tmb__next .s02__title , html[data-e~="8"] .trfb__next .s02__title , html[data-e~="8"] .cob__next .s02__title , html[data-e~="8"] .fqb__next .s02__title { font-size: var(--ttl); line-height: 1.02; }
@media (max-width: 899px) {
  html[data-e~="8"] .stats__next, html[data-e~="8"] .acb__next, html[data-e~="8"] .lvb__next, html[data-e~="8"] .cvb__next, html[data-e~="8"] .ivb__next, html[data-e~="8"] .tmb__next , html[data-e~="8"] .trfb__next , html[data-e~="8"] .cob__next , html[data-e~="8"] .fqb__next { right: var(--edge); }
}
@media (max-width: 899px) and (max-height: 720px) { :root { --ttl: 30px; } }

/* ---------- les bandeaux de bascule : tous pareils (une phrase, pas de bouton) ---------- */
html[data-e~="8"] .acb__out, html[data-e~="8"] .lvb__out, html[data-e~="8"] .cvb__out, html[data-e~="8"] .ivb__out, html[data-e~="8"] .tmb__out , html[data-e~="8"] .trfb__out , html[data-e~="8"] .cob__out , html[data-e~="8"] .fqb__out { padding: clamp(16px, 2.6vh, 26px) var(--edge); }
html[data-e~="8"] .acb__out .why__out, html[data-e~="8"] .lvb__out .why__out, html[data-e~="8"] .cvb__out .why__out, html[data-e~="8"] .ivb__out .why__out, html[data-e~="8"] .tmb__out .why__out , html[data-e~="8"] .trfb__out .why__out , html[data-e~="8"] .cob__out .why__out , html[data-e~="8"] .fqb__out .why__out { max-width: none; font-size: var(--band); }
.acb__out .why__out b { font-weight: inherit; color: var(--gold); }

/* ---------- les intros : même texte partout ---------- */
.why__intro, .ac__intro, .lvx .lv__intro { font-size: var(--intro); line-height: 1.45; color: var(--text); max-width: 38ch; }

/* =========================================================
   La grille du contenu : colonne de texte | visuel
   ========================================================= */

/* ---------- S02 ---------- */
html[data-e~="8"] .why {
  left: var(--edge); right: var(--edge); top: calc(var(--top) + var(--tth, 120px) + var(--tg)); bottom: auto;
  height: calc(var(--ph, 100svh) - var(--top) - var(--tth, 120px) - var(--tg) - var(--bh3, 80px) - var(--bot)); /* la .why vit dans le bandeau : hauteur calculée sur la page */
  display: grid; grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "intro vis" ". vis" "foot vis"; gap: 16px var(--gap);
}
html[data-e~="8"] .why__intro { grid-area: intro; margin: 0; }
html[data-e~="8"] .why .alt { grid-area: vis; --alth: 100%; height: 100%; min-height: 0; }
.why__foot { grid-area: foot; }
.alt--c .alt__p { border-radius: var(--r); }

/* ---------- S03 (piste F) : le cercle dans le visuel, la fiche dans la colonne ---------- */
[data-s03="f"] .acx--f .acx__panel {
  --bt: calc(var(--top) + var(--tth, 120px) + var(--tg));
  --vl: calc(var(--edge) + (100cqw - 2 * var(--edge)) * .3 + var(--gap));   /* bord gauche du visuel */
  --vr: calc(var(--edge) + clamp(120px, 12vw, 190px));                      /* place de la liste des sigles */
  --d: min((100cqh - var(--bt) - var(--bot)) * .8, (100cqw - var(--vl) - var(--vr)) * .64);
  --cx: calc((var(--vl) + 100cqw - var(--vr)) / 2);
  --ctop: calc(100cqh - var(--bot) - var(--d));   /* le cercle se pose sur la même ligne de fond que les autres visuels */
}
html[data-e~="8"][data-s03="f"] .ac__intro { top: calc(var(--top) + var(--tth, 120px) + var(--tg)); width: calc((100% - 2 * var(--edge)) * .3); max-width: 38ch; font-size: var(--intro); }
.acx--f .acx__nav { top: calc(var(--bt) + clamp(76px, 9.4vh, 96px)); width: calc((100cqw - 2 * var(--edge)) * .3); }
.acx--f .acx__bl { bottom: calc(var(--bot) + 46px + clamp(18px, 3vh, 28px)); width: calc((100cqw - 2 * var(--edge)) * .3); }
.acx--f .acx__list { top: calc((var(--bt) + 100cqh - var(--bot)) / 2); }
.acx--f .acx__acts { position: absolute; left: var(--edge); bottom: var(--bot); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
html[data-e~="8"] .acx--f .acx__go { position: static; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
html[data-e~="8"] .acx--f .acx__go span { width: auto; height: auto; border-radius: 0; background: none; transform: none; }
html[data-e~="8"] .acx--f .acx__go .btn__icon { width: 32px; height: 32px; border-radius: 50%; background: rgb(22 33 61 / .12); }
html[data-e~="8"] .acx--f .acx__go svg { width: 16px; height: 16px; }
html[data-e~="8"] .acx--f .acx__bro { position: static; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.acx--f .acx__bro:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- S04 / S05 : même grille, même départ sous le titre ---------- */
html[data-e~="8"] .lvx, html[data-e~="8"] .cvx { top: calc(var(--top) + var(--tth, 110px) + var(--tg)); grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr); column-gap: var(--gap); }
html[data-e~="8"] .lvx { bottom: calc(var(--bh5, 0px) + var(--bot)); }
html[data-e~="8"] .cvx { bottom: var(--bot); }
/* S04 (piste I) : l'intro et le bouton à gauche, le défilé des niveaux à droite */
html[data-e~="8"] .lvx--i { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro vis" ". vis" "foot vis"; }
.lvx--i .lv__foot { display: grid; justify-items: start; }
.lvx__pn { flex-basis: 76%; border-radius: var(--r); }
.lvx__trk { transform: translate3d(calc(var(--g, 0) * -79%), 0, 0); gap: 3%; }
.lvx__pk { font-size: clamp(32px, 3vw, 50px); }
.lvx__ptx { padding: clamp(18px, 2.2vw, 34px); }
/* S05 : un seul arrondi */
.cvx__chat, .cvx__ba, .cvx__wall { border-radius: var(--r); }

/* ---------- tablette en paysage ---------- */
@media (min-width: 900px) and (max-width: 1180px) {
  .lvx__pn { flex-basis: 86%; grid-template-columns: 44% 1fr; }
  .lvx__trk { transform: translate3d(calc(var(--g, 0) * -89%), 0, 0); }
}

/* ---------- téléphone et tablette en portrait : titre, intro, visuel, bouton l'un sous l'autre ---------- */
@media (max-width: 899px) {
  html[data-e~="8"] .why { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro" "vis" "foot"; gap: 12px; }
  html[data-e~="8"] .lvx, html[data-e~="8"] .cvx { grid-template-columns: minmax(0, 1fr); }
  html[data-e~="8"] .lvx { bottom: calc(var(--bh5, 0px) + var(--bot)); }
  html[data-e~="8"] .lvx--i { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro" "vis" "foot"; }
  .lvx--i .lv__foot { display: flex; }
  .lvx__pn { flex-basis: 88%; grid-template-columns: minmax(0, 1fr); }
  .lvx__trk { gap: 3%; transform: translate3d(calc(var(--g, 0) * -91%), 0, 0); }
  .lvx__pk { font-size: 30px; }
  /* S03 : la fiche sous le cercle, le bouton en bas à gauche comme ailleurs */
  [data-s03="f"] .acx--f .acx__panel { --d: min(56cqw, 34cqh); --ct: calc(var(--top) + var(--tth, 90px) + var(--tg) + var(--d) * .3); --ctop: var(--ct); --cx: 42%; }
  .acx--f .acx__lay { padding-bottom: var(--bot); }
  .acx--f .acx__nav, .acx--f .acx__bl { width: auto; top: auto; bottom: auto; }
  .acx--f .acx__list { top: calc(var(--ct) + var(--d) / 2); }
  .acx--f .acx__acts { position: static; order: 3; margin-top: 12px; padding-top: 12px; background: var(--wall); }
  html[data-e~="8"] .acx--f .acx__go, html[data-e~="8"] .acx--f .acx__bro { font-size: 14px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  [data-s03="f"] .acx--f .acx__panel { --d: min(56cqw, 30cqh); }
}