/* =========================================================
   TATEA — S03 « Les académies » : 4 pistes de mise en page (pilotées par le défilement)
   A les onglets · B la roue · C le défilé · D le grand nom
   ========================================================= */
.acx { --ach: clamp(380px, 62vh, 600px); position: relative; height: var(--ach); }
.acx button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.acx img { display: block; }

/* sélecteur des pistes */
.pistes { position: fixed; z-index: 50; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--night); box-shadow: 0 8px 30px rgb(11 22 38 / .25); }
.pistes a { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #c9d0dc; text-decoration: none; white-space: nowrap; }
.pistes a[aria-current="page"] { background: var(--gold); color: var(--ink); }

/* ---------- la fiche d'une académie (commune) ---------- */
.acx__info { position: relative; display: grid; }
.acx__info > .ai { grid-area: 1 / 1; align-self: end; will-change: transform, opacity; }
.ai__who { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ai__name { margin: 0 0 8px; font-size: clamp(28px, 2.6vw, 42px); font-weight: 500; line-height: 1.02; letter-spacing: -.015em; color: var(--ink); }
.ai__prom { margin: 0 0 14px; max-width: 34ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.35; color: var(--ink); }
.ai__comp { list-style: none; counter-reset: c; margin: 0 0 18px; padding: 0; display: grid; }
.ai__comp li { counter-increment: c; display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid rgb(22 33 61 / .12); font-size: clamp(14px, 1vw, 15.5px); line-height: 1.3; color: #3c465b; }
.ai__comp li::before { content: counter(c, decimal-leading-zero); flex: none; width: 22px; font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--gold); }
.ai__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; }
.ai__btn { min-height: 42px; padding: 6px 18px; font-size: 14px; }
.ai__link { font-size: 14px; font-weight: 500; color: var(--ink); text-underline-offset: 4px; }

/* ---------- A : les onglets ---------- */
.acx--a { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
.acx--a .acx__tabs { display: flex; gap: 6px; }
.acx--a .acx__tab { position: relative; flex: 1; padding: 0 0 12px; text-align: left; font-size: 15px; font-weight: 600; letter-spacing: .06em; color: rgb(22 33 61 / .42); transition: color .3s; background: linear-gradient(rgb(22 33 61 / .14), rgb(22 33 61 / .14)) bottom / 100% 3px no-repeat; }
.acx--a .acx__tab.is-on { color: var(--ink); }
.acx--a .acx__tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.acx--a .acx__card { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); min-height: 0; }
.acx--a .acx__ph { position: relative; overflow: hidden; border-radius: 6px; background: var(--ink); }
.acx--a .acx__ph::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 120%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: rgb(226 174 12 / .9); }
.acx--a .acx__ph img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 92%; object-fit: contain; object-position: 50% 100%; will-change: transform, opacity; }
.acx--a .acx__info > .ai { align-self: center; }

/* ---------- B : la roue ---------- */
.acx--b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(18px, 2.4vw, 40px); align-items: center; }
.acx--b .acx__wheel { position: relative; width: 100%; max-height: 100%; aspect-ratio: 1; justify-self: end; }
.acx--b .acx__disc { position: absolute; inset: 11%; overflow: hidden; border-radius: 50%; background: var(--ink); }
.acx--b .acx__disc::before { content: ""; position: absolute; inset: 52% 8% -40%; border-radius: 50%; background: var(--gold); }
.acx--b .acx__disc img { position: absolute; left: 6%; right: 6%; bottom: 0; width: 88%; height: 90%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 120%; will-change: transform, opacity; }
.acx--b .acx__ring { position: absolute; inset: 0; container-type: inline-size; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(22 33 61 / .12); }
.acx--b .acx__tag { position: absolute; left: 50%; top: 50%; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .06em; background: var(--wall); color: rgb(22 33 61 / calc(.45 + .55 * var(--p, 0))); will-change: transform; transition: background-color .3s, color .3s; }
.acx--b .acx__tag.is-on { background: var(--gold); color: var(--ink); }

/* ---------- C : le défilé ---------- */
.acx--c { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 20px; }
.acx--c .acx__strip { position: relative; overflow: hidden; min-height: 0; margin-right: calc(-1 * var(--edge)); }
.acx--c .acx__track { display: flex; column-gap: 12px; height: 100%; will-change: transform; }
.acx--c .acx__pc { position: relative; flex: none; width: clamp(150px, 15vw, 230px); height: 100%; overflow: hidden; border-radius: 6px; background: var(--wall-2); text-align: left; }
.acx--c .acx__pc::before { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: var(--p, 0); }
.acx--c .acx__pc img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 88%; object-fit: contain; object-position: 50% 100%; filter: grayscale(calc(1 - var(--p, 0))); opacity: calc(.55 + .45 * var(--p, 0)); transform: scale(calc(.9 + .1 * var(--p, 0))); transform-origin: 50% 100%; }
.acx--c .acx__pc span { position: absolute; left: 14px; top: 12px; font-size: 15px; font-weight: 600; letter-spacing: .06em; color: rgb(22 33 61 / .5); }
.acx--c .acx__pc.is-on span { color: var(--gold-strong); }
.acx--c .acx__info .ai__comp { grid-template-columns: 1fr 1fr; column-gap: 22px; }
.acx--c .acx__info .ai__prom { margin-bottom: 10px; }

/* ---------- D : le grand nom ---------- */
.acx--d { overflow: hidden; }
.acx--d .acx__big { position: absolute; left: 0; top: 0; height: clamp(110px, 11.5vw, 190px); overflow: hidden; }
.acx--d .acx__col { display: grid; will-change: transform; }
.acx--d .acx__col span { height: clamp(110px, 11.5vw, 190px); font-size: clamp(120px, 12.6vw, 206px); font-weight: 600; line-height: .86; letter-spacing: -.05em; color: var(--ink); }
.acx--d .acx__ppl { position: absolute; right: -2%; bottom: 0; width: 46%; height: 100%; }
.acx--d .acx__ppl::before { content: ""; position: absolute; left: 6%; right: 0; bottom: 0; height: 58%; border-radius: 999px 999px 0 0; background: var(--gold); }
.acx--d .acx__ppl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; will-change: transform, opacity; }
.acx--d .acx__info { position: absolute; left: 0; bottom: 0; width: 56%; }
.acx--d .acx__dots { position: absolute; right: 0; top: 4px; display: flex; gap: 6px; }
.acx--d .acx__dots button { width: 26px; height: 4px; border-radius: 4px; background: rgb(22 33 61 / .16); transition: background-color .3s; }
.acx--d .acx__dots button.is-on { background: var(--gold); }

/* ---------- tablette ---------- */
@media (min-width: 900px) and (max-width: 1180px) {
  .ai__comp li { padding: 5px 0; font-size: 13.5px; }
  .ai__prom { font-size: 15px; }
  .acx--b { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); }
}

/* ---------- téléphone (titre au-dessus, académies dessous) ---------- */
@media (max-width: 899px) {
  .acx { --ach: min(64svh, 560px); }
  .ai__who { font-size: 11.5px; margin-bottom: 4px; }
  .ai__name { font-size: 24px; margin-bottom: 6px; }
  .ai__prom { font-size: 14.5px; margin-bottom: 8px; }
  .ai__comp { margin-bottom: 10px; }
  .ai__comp li { padding: 4px 0; font-size: 13px; gap: 8px; }
  .ai__comp li::before { font-size: 11px; width: 18px; }
  .ai__btn { min-height: 38px; font-size: 13px; }
  .acx--a { gap: 12px; }
  .acx--a .acx__tab { font-size: 13px; padding-bottom: 9px; }
  .acx--a .acx__card { grid-template-columns: 1fr; grid-template-rows: 30% minmax(0, 1fr); gap: 12px; }
  .acx--a .acx__ph img { height: 96%; }
  .acx--a .acx__info > .ai { align-self: start; }
  .acx--b { grid-template-columns: 1fr; grid-template-rows: 38% minmax(0, 1fr); gap: 12px; }
  .acx--b .acx__wheel { order: -1; height: 100%; width: auto; justify-self: center; }
  .acx--b .acx__tag { padding: 4px 8px; font-size: 11px; }
  .acx--b .acx__info > .ai { align-self: start; }
  .acx--c { grid-template-rows: 34% minmax(0, 1fr); gap: 12px; }
  .acx--c .acx__pc { width: 112px; }
  .acx--c .acx__info .ai__comp { grid-template-columns: 1fr; }
  .acx--c .acx__info > .ai { align-self: start; }
  .acx--d .acx__big, .acx--d .acx__col span { height: 80px; font-size: 88px; }
  .acx--d .acx__ppl { width: 48%; height: 46%; top: 0; bottom: auto; }
  .acx--d .acx__ppl::before { height: 62%; }
  .acx--d .acx__info { width: 100%; }
  .acx--d .acx__dots { top: auto; bottom: calc(100% - 92px); left: 0; right: auto; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .acx { --ach: min(62svh, 420px); }
  .ai__who { display: none; }
  .ai__prom { display: none; }
  .ai__comp li { padding: 2px 0; font-size: 12px; }
  .acx--d .acx__ppl { height: 40%; }
}

/* ---------- E : les cartes qu'on écarte (réf. « Dior ») ---------- */
.acx--e { --fx: 9%; --ft: 22%; --fb: 16%; height: clamp(420px, 70vh, 680px); }
.acx--e .acx__frame { position: absolute; left: var(--fx); right: var(--fx); top: var(--ft); bottom: var(--fb); border: 1px solid rgb(22 33 61 / .38); pointer-events: none; }
.acx--e .acx__lay { position: absolute; inset: 0; pointer-events: none; transform: translate3d(0, calc(var(--e, 0) * 16px), 0); will-change: transform, opacity; }
.acx--e .acx__lay a, .acx--e .acx__lay button { pointer-events: inherit; }
.acx--e .acx__skills { position: absolute; left: var(--fx); top: 0; width: 64%; margin: 0; font-size: clamp(16px, 1.4vw, 22px); line-height: 1.22; color: var(--ink); }
.acx--e .acx__skills i { font-style: italic; color: #4a5468; }
.acx--e .acx__who { position: absolute; left: calc(var(--fx) + 10px); top: calc(var(--ft) + 12px); margin: 0; writing-mode: vertical-rl; rotate: 180deg; font-size: clamp(13px, 1vw, 16px); font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.acx--e .acx__sig, .acx--e .acx__the { position: absolute; margin: 0; writing-mode: vertical-rl; font-size: clamp(56px, 6.2vw, 104px); font-weight: 500; line-height: .9; letter-spacing: -.03em; white-space: nowrap; }
.acx--e .acx__sig { left: calc(var(--fx) - .42em); bottom: var(--fb); rotate: 180deg; color: var(--gold); z-index: 8; }
.acx--e .acx__the { right: calc(var(--fx) - .42em); top: var(--ft); color: var(--ink); }
.acx--e .acx__foot { position: absolute; left: var(--fx); bottom: 0; width: 62%; display: grid; gap: 10px; }
.acx--e .acx__prom { margin: 0; max-width: 40ch; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.35; color: var(--ink); }
.acx--e .acx__cnt { position: absolute; right: calc(var(--fx) + 12px); bottom: calc(var(--fb) - 28px); margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.acx--e .acx__stack { position: absolute; z-index: 5; left: 25%; width: 48%; top: 17%; height: 68%; }
.acx--e .acx__cd { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; transform-origin: 50% 100%; box-shadow: 0 18px 40px rgb(11 22 38 / .2); will-change: transform, opacity; }
.acx--e .acx__cd--ink { background: var(--ink); }
.acx--e .acx__cd--gold { background: var(--gold); }
.acx--e .acx__cd::before { content: ""; position: absolute; left: 50%; bottom: -34%; width: 125%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; }
.acx--e .acx__cd--ink::before { background: var(--gold); }
.acx--e .acx__cd--gold::before { background: var(--ink); }
.acx--e .acx__cd img { position: absolute; left: 0; bottom: 0; width: 100%; height: 90%; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 899px) {
  .acx--e { --fx: 7%; --ft: 20%; --fb: 20%; height: var(--ach); }
  .acx--e .acx__skills { width: 82%; font-size: 13.5px; }
  .acx--e .acx__who { font-size: 11.5px; left: calc(var(--fx) + 6px); }
  .acx--e .acx__sig, .acx--e .acx__the { font-size: 46px; }
  .acx--e .acx__stack { left: 22%; width: 56%; top: 16%; height: 66%; }
  .acx--e .acx__foot { width: 100%; gap: 6px; }
  .acx--e .acx__prom { font-size: 13px; }
  .acx--e .acx__cnt { bottom: calc(var(--fb) - 22px); font-size: 11px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .acx--e { --ft: 22%; --fb: 15%; }
  .acx--e .acx__skills { font-size: 12px; }
  .acx--e .acx__prom { display: none; }
}

/* ---------- F : le portrait dans le cercle (réf. « Leeroy »), en plein écran ----------
   Le titre de la S03 se range en haut à gauche (comme le logo + menu de la réf.), le cercle et la personne
   au centre de la page, les infos dans les coins. */
[data-s03="f"] .acb__next .s02__title { font-size: clamp(38px, 3.6vw, 58px); }
[data-s03="f"] .ac { left: 0; right: 0; bottom: var(--bh4, 0px); } /* la place du bandeau de la S04 */
[data-s03="f"] .ac__intro { position: absolute; z-index: 4; left: var(--edge); top: calc(30px + var(--tth, 100px) + 18px); width: min(24%, 330px); margin: 0; font-size: 14px; }
.acx--f { height: 100%; }
.acx--f .acx__panel { position: absolute; inset: 0; overflow: hidden; container-type: size; --d: min(54cqh, 36cqw); }
.acx--f .acx__panel { --ctop: calc(50% - var(--d) / 2 + 8%); }
.acx--f .acx__circ { position: absolute; left: var(--cx, 50%); top: var(--ctop); width: var(--d); aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.acx--f .acx__fig { position: absolute; left: var(--cx, 50%); top: calc(var(--ctop) - var(--d) * .42); width: var(--d); height: calc(var(--d) * 1.42); translate: -50% 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--d) / 2) no-repeat, radial-gradient(circle calc(var(--d) / 2) at 50% calc(100% - var(--d) / 2), #000 99.4%, transparent 100%);
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--d) / 2) no-repeat, radial-gradient(circle calc(var(--d) / 2) at 50% calc(100% - var(--d) / 2), #000 99.4%, transparent 100%); }
.acx--f .acx__who-img { position: absolute; left: 50%; bottom: 0; height: calc(var(--d) * 1.28); width: auto; max-width: none; will-change: transform, opacity; }
.acx--f .acx__lay { position: absolute; z-index: 3; inset: 0; pointer-events: none; transform: translate3d(0, calc(var(--e, 0) * 14px), 0); will-change: transform, opacity; }
.acx--f .acx__lay a { pointer-events: inherit; }
.acx--f .acx__nav { position: absolute; left: var(--edge); top: calc(30px + var(--tth, 100px) + 92px); width: min(22%, 300px); margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.acx--f .acx__bl { position: absolute; left: var(--edge); bottom: 7%; width: min(27%, 380px); }
.acx--f .acx__for { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.acx--f .acx__tg { margin: 0; max-width: 20ch; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.acx--f .acx__go, .acx--f .acx__bro { position: absolute; z-index: 3; right: var(--edge); display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.acx--f .acx__go { bottom: 7%; }
.acx--f .acx__bro { top: 30px; }
.acx--f .acx__go span, .acx--f .acx__bro span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--ink); transition: transform .3s var(--ease); }
.acx--f .acx__go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acx--f .acx__go:hover span { transform: translateX(3px); }
.acx--f .acx__bro span { background: var(--ink); color: #fff; font-size: 20px; font-weight: 400; letter-spacing: 0; }
/* les 5 académies, à droite, en grand : celle en cours en bleu nuit avec le trait jaune */
.acx--f .acx__list { --kh: clamp(50px, 7.4vh, 74px); position: absolute; z-index: 4; right: var(--edge); top: 50%; translate: 0 -50%; text-align: right; }
.acx--f .acx__the { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.acx--f .acx__ks { position: relative; display: grid; padding-right: 22px; }
.acx--f .acx__ks button { height: var(--kh); font-size: calc(var(--kh) * .78); font-weight: 500; line-height: 1; letter-spacing: .02em; text-align: right; color: rgb(22 33 61 / calc(.2 + .8 * var(--p, 0))); transition: color .2s; }
.acx--f .acx__ks button:hover { color: rgb(22 33 61 / .7); }
.acx--f .acx__mk { position: absolute; right: 0; top: calc(var(--kh) * .14); width: 5px; height: calc(var(--kh) * .72); border-radius: 3px; background: var(--gold); will-change: transform; }
.acx--f .acx__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
@media (min-width: 900px) and (max-width: 1180px) {
  .acx--f .acx__panel { --d: min(50cqh, 36cqw); }
  .acx--f .acx__list { --kh: 46px; }
}
/* téléphone : titre en haut, cercle au centre, la fiche dessous */
@media (max-width: 899px) {
  [data-s03="f"] .acb__next .s02__title { font-size: clamp(30px, 8.4vw, 44px); }
  [data-s03="f"] .ac__intro { display: none; }
  .acx--f .acx__panel { --d: min(56cqw, 34cqh); --ct: calc(18px + var(--tth, 90px) + 24px + var(--d) * .3); }
  .acx--f .acx__panel { --ctop: var(--ct); --cx: 42%; }
  .acx--f .acx__lay { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--edge) 74px; }
  .acx--f .acx__bl, .acx--f .acx__nav { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
  .acx--f .acx__bl { padding-top: 14px; background: var(--wall); box-shadow: 0 -26px 22px var(--wall); }
  .acx--f .acx__nav { order: 2; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgb(22 33 61 / .12); background: var(--wall); font-size: 9.5px; letter-spacing: .1em; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .acx--f .acx__tg { font-size: 19px; max-width: none; }
  .acx--f .acx__go { right: auto; left: var(--edge); bottom: 18px; font-size: 10.5px; }
  .acx--f .acx__bro { top: auto; bottom: 18px; font-size: 10.5px; }
  .acx--f .acx__go span, .acx--f .acx__bro span { width: 34px; height: 34px; }
  .acx--f .acx__list { --kh: 30px; top: calc(var(--ct) + var(--d) / 2); }
  .acx--f .acx__the { font-size: 9.5px; letter-spacing: .16em; margin-bottom: 4px; }
  .acx--f .acx__ks { padding-right: 12px; }
  .acx--f .acx__mk { width: 3px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .acx--f .acx__panel { --d: min(56cqw, 30cqh); }
  .acx--f .acx__tg { font-size: 16px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .acx--f .acx__list { --kh: 46px; }
  .acx--f .acx__the { font-size: 12px; }
  .acx--f .acx__tg { font-size: 24px; }
}