/* =========================================================
   TATEA — S04 « Les niveaux » : 4 pistes de mise en page (pilotées par le défilement)
   A l'escalier · B le comparatif · C le parcours · D l'ascenseur
   E la carte de membre · F le certificat · G le chiffre-fenêtre · H les cartes qui se retournent · I le défilé horizontal
   ========================================================= */
[data-s04] .lv__list { display: none; }
:where(.lvx) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.lvx img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* la grille commune : intro + fiche à gauche, visuel à droite, admission en bas à gauche */
.lvx { position: absolute; left: var(--edge); right: var(--edge); top: calc(30px + var(--tth, 110px) + 16px); bottom: clamp(18px, 4.4vh, 44px);
  display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "intro vis" "info vis" "foot vis"; gap: 16px clamp(28px, 4vw, 64px); }
.lvx .lv__intro { grid-area: intro; margin: 0; max-width: 40ch; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.45; color: var(--text, #4a5468); }
.lvx__vis { grid-area: vis; position: relative; min-height: 0; }
.lvx__info { grid-area: info; display: grid; align-self: center; }
.lvx .lv__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lvx .lv__foot p { margin: 0; font-size: 14px; color: #6b7487; }

/* la fiche du niveau en cours */
.lvx__lay { grid-area: 1 / 1; will-change: transform, opacity; }
.lvx__lvl { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.lvx__nm { margin: 0; font-size: clamp(44px, 4.4vw, 70px); font-weight: 500; line-height: .95; letter-spacing: -.02em; color: var(--ink); }
.lvx__p { margin: 10px 0 0; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; color: var(--ink); }
.lvx__dl { display: grid; margin: clamp(16px, 2.6vh, 26px) 0 0; }
.lvx__dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgb(22 33 61 / .12); }
.lvx__dl dt { padding-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a92a3; }
.lvx__dl dd { margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.35; color: var(--ink); }

/* ---------- A : l'escalier ---------- */
.lvx__stairs { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 12px; }
.lvx__step { position: relative; flex: 1 1 0; min-width: 0; height: var(--h); overflow: hidden; border-radius: 12px 12px 0 0; background: var(--night); color: #fff; }
.lvx__step img { position: absolute; inset: 0; opacity: calc(.3 + .7 * var(--p, 0)); transition: opacity .2s; }
.lvx__step::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(11 22 38 / .55), transparent 40%, transparent 55%, rgb(11 22 38 / .75)); }
.lvx__sn, .lvx__sk, .lvx__sd { position: absolute; z-index: 1; left: clamp(14px, 1.6vw, 24px); right: 12px; }
.lvx__sn { top: clamp(14px, 2vh, 22px); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-strong); }
.lvx__sk { top: calc(clamp(14px, 2vh, 22px) + 22px); font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; line-height: 1; }
.lvx__sd { bottom: clamp(14px, 2vh, 22px); font-size: clamp(14px, 1.05vw, 16px); color: rgb(255 255 255 / .85); }
.lvx__mk { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px; background: var(--gold); will-change: transform; }

/* ---------- B : le comparatif ---------- */
.lvx--b { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro" "vis" "foot"; }
.lvx--b .lvx__info { display: none; }
.lvx__cmp { --cg: 14px; position: relative; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cg); }
.lvx__hl { position: absolute; left: 0; top: 0; bottom: 0; width: calc((100% - 2 * var(--cg)) / 3); border-radius: 14px; background: var(--night); transform: translate3d(calc(var(--g, 0) * (100% + var(--cg))), 0, 0); will-change: transform; }
.lvx__col { --p: 0; position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px 12px clamp(14px, 2.4vh, 22px); color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--ink)); }
.lvx__ph { flex: 1 1 0; min-height: 60px; overflow: hidden; border-radius: 8px; background: var(--wall-2); }
.lvx__ph img { opacity: calc(.55 + .45 * var(--p)); }
.lvx__cn { margin-top: clamp(12px, 2vh, 20px); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lvx__ck { margin-top: 4px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1; }
.lvx__cp { margin-top: 6px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.25; }
.lvx--b .lvx__dl { gap: 0; margin-top: clamp(10px, 1.8vh, 18px); }
.lvx__fx { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, rgb(255 255 255 / .16) calc(var(--p) * 100%), rgb(22 33 61 / .12)); }
.lvx__fx small { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.lvx__fx span { font-size: clamp(14px, 1vw, 15.5px); line-height: 1.3; }

/* ---------- C : le parcours ---------- */
.lvx__vis:has(.lvx__rail) { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
.lvx__photo { position: relative; overflow: hidden; border-radius: 14px; background: var(--night); }
.lvx__pl { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); will-change: clip-path; }
.lvx__rail { display: flex; gap: 6px; margin-top: clamp(16px, 2.6vh, 26px); }
.lvx__seg { --p: 0; flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px; }
.lvx__st { align-self: end; }
.lvx__st { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(22 33 61 / calc(.4 + .6 * var(--p))); }
.lvx__st b { font-weight: inherit; color: color-mix(in srgb, var(--gold) calc(var(--p) * 100%), rgb(22 33 61 / .4)); }
.lvx__tr { height: 6px; overflow: hidden; border-radius: 3px; background: rgb(22 33 61 / .12); }
.lvx__tr i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--f, 0)); }
.lvx__seg .lvx__sd { position: static; font-size: clamp(15px, 1.15vw, 18px); color: var(--ink); }
.lvx__tot { margin: clamp(10px, 1.8vh, 16px) 0 0; font-size: 14px; color: #6b7487; }
.lvx__tot b { font-weight: 600; color: var(--ink); }

/* ---------- D : l'ascenseur ---------- */
.lvx__tower { --fg: 10px; position: relative; height: 100%; display: flex; flex-direction: column; gap: var(--fg); padding-left: 20px; }
.lvx__fl { --p: 0; position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--wall-2); color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--ink)); }
.lvx__fl img { position: absolute; inset: 0; opacity: var(--p); }
.lvx__fl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 22 38 / .82), rgb(11 22 38 / .2) 60%, transparent); opacity: var(--p); }
.lvx__fn, .lvx__fk, .lvx__fd { position: absolute; z-index: 1; top: 50%; translate: 0 -50%; }
.lvx__fn { left: clamp(18px, 2vw, 30px); font-size: clamp(40px, 4.4vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: color-mix(in srgb, var(--gold-strong) calc(var(--p) * 100%), rgb(22 33 61 / .2)); }
.lvx__fk { left: calc(clamp(18px, 2vw, 30px) + clamp(70px, 7vw, 116px)); display: grid; gap: 4px; font-size: clamp(24px, 2.4vw, 38px); font-weight: 500; line-height: 1; }
.lvx__fk small { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.lvx__fd { right: clamp(18px, 2vw, 30px); font-size: clamp(15px, 1.15vw, 18px); }
.lvx__cab { position: absolute; left: 0; top: 0; width: 6px; height: calc((100% - 2 * var(--fg)) / 3); border-radius: 3px; background: var(--gold); transform: translate3d(0, calc((2 - var(--g, 0)) * (100% + var(--fg))), 0); will-change: transform; }

/* ---------- E : la carte de membre ---------- */
.lvx--e .lvx__vis { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lvx--g .lvx__vis { display: grid; }
.lvx__mb { container-type: size; display: grid; place-items: center; min-height: 0; perspective: 1600px; }
.lvx__card { position: relative; width: min(92cqw, 84cqh * 1.586); aspect-ratio: 1.586; transform-style: preserve-3d; will-change: transform; }
.lvx__face { --bg: #f8f9fb; --fg: var(--ink); --ac: var(--gold); position: absolute; inset: 0; overflow: hidden; border-radius: clamp(14px, 2cqw, 26px); backface-visibility: hidden;
  background: var(--bg); color: var(--fg); box-shadow: 0 30px 60px -24px rgb(11 22 38 / .45), 0 2px 6px rgb(11 22 38 / .08); container-type: inline-size; }
.lvx__face--b { transform: rotateY(180deg); }
.lvx__face[data-t="1"] { --bg: var(--gold); --ac: var(--ink); }
.lvx__face[data-t="2"] { --bg: var(--night); --fg: #fff; --ac: var(--gold-strong); }
.lvx__mbph { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; }
.lvx__mbph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg), transparent 45%); }
.lvx__mbbr { position: absolute; left: 6cqw; top: 6cqw; display: flex; align-items: baseline; gap: .5em; font-size: 4.2cqw; font-weight: 600; letter-spacing: .14em; }
.lvx__mbbr small { font-size: .5em; font-weight: 500; letter-spacing: .1em; opacity: .7; }
.lvx__chip { position: absolute; left: 6cqw; top: 17cqw; width: 9cqw; aspect-ratio: 1.3; border-radius: 1.4cqw; background: var(--ac); opacity: .9; }
.lvx__mbtx { position: absolute; left: 6cqw; bottom: 6cqw; display: grid; gap: .6cqw; max-width: 58%; }
.lvx__mblv { font-size: 2.2cqw; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ac); }
.lvx__face[data-t="0"] .lvx__mblv { color: #b98d06; }
.lvx__mbnm { font-size: 9.6cqw; font-weight: 500; line-height: .95; letter-spacing: -.02em; }
.lvx__mbp { font-size: 3cqw; opacity: .85; }
.lvx__mbno { position: absolute; right: 4.4cqw; bottom: 4.4cqw; z-index: 1; padding: .5em .9em; border-radius: 999px; background: var(--bg); font-size: 2.1cqw; font-weight: 600; letter-spacing: .14em; }
.lvx__tiers { order: -1; display: flex; justify-content: center; gap: 8px; padding-bottom: clamp(8px, 1.4vh, 14px); }
.lvx__tier { --p: 0; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgb(22 33 61 / calc(.05 + .07 * var(--p))); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: rgb(22 33 61 / calc(.45 + .55 * var(--p))); }
.lvx__tier i { width: 16px; height: 16px; border-radius: 50%; background: #f8f9fb; box-shadow: inset 0 0 0 1px rgb(22 33 61 / .15); }
.lvx__tier[data-t="1"] i { background: var(--gold); box-shadow: none; }
.lvx__tier[data-t="2"] i { background: var(--night); box-shadow: none; }

/* ---------- F : le certificat ---------- */
.lvx__pile { container-type: size; position: relative; height: 100%; display: grid; place-items: center; }
.lvx__cert { --s: 0; grid-area: 1 / 1; position: relative; width: min(94cqw, 86cqh * 1.414); aspect-ratio: 1.414; display: grid; grid-template-columns: 40% 1fr; padding: 2.4%; gap: 4%;
  background: #fbfaf6; box-shadow: 0 24px 50px -24px rgb(11 22 38 / .45), 0 1px 3px rgb(11 22 38 / .1); will-change: transform; container-type: inline-size; }
.lvx__cert::before { content: ""; position: absolute; inset: 1.4%; border: 1px solid rgb(226 174 12 / .55); pointer-events: none; }
.lvx__ctph { position: relative; overflow: hidden; }
.lvx__cttx { display: grid; align-content: center; gap: 1.2cqw; padding-right: 8%; }
.lvx__cttx small { font-size: 1.9cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8a92a3; }
.lvx__ctlv { margin-top: 3cqw; font-size: 2.2cqw; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #b98d06; }
.lvx__ctnm { font-size: 8cqw; font-weight: 500; line-height: .95; letter-spacing: -.02em; color: var(--ink); }
.lvx__ctp { font-size: 2.8cqw; color: var(--ink); }
.lvx__seal { position: absolute; right: 6%; bottom: 8%; display: grid; place-items: center; width: 15cqw; aspect-ratio: 1; border-radius: 50%; background: var(--gold);
  box-shadow: 0 6px 16px -6px rgb(11 22 38 / .4); font-style: normal; opacity: var(--s); transform: rotate(calc(-40deg + 40deg * var(--s))) scale(calc(1.9 - .9 * var(--s))); }
.lvx__seal::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(22 33 61 / .35); }
.lvx__seal span { font-size: 3.4cqw; font-weight: 700; color: var(--ink); }
.lvx--e .lvx__dl, .lvx--f .lvx__dl { margin-top: 0; }
.lvx--e .lvx__dl dd, .lvx--f .lvx__dl dd { font-size: clamp(16px, 1.25vw, 20px); }

/* ---------- G : le chiffre-fenêtre ---------- */
.lvx--g { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); grid-template-areas: "vis intro" "vis info" "vis foot"; }
.lvx__num { position: relative; min-height: 0; overflow: hidden; }
.lvx__dg { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; }
.lvx__dg svg { height: 100%; max-width: 100%; overflow: visible; }
.lvx__dg text { font-family: inherit; font-size: 172px; font-weight: 700; letter-spacing: -.04em; }
.lvx__dgbg { fill: var(--night); }
.lvx__dgim { transform-box: fill-box; transform-origin: center; }

/* ---------- H : les cartes qui se retournent ---------- */
.lvx--h { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro" "vis" "foot"; }
.lvx--h .lvx__info { display: none; }
.lvx__flip { --cg: 16px; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cg); perspective: 1800px; }
.lvx__hc { position: relative; min-height: 0; }
.lvx__hin { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.lvx__hf, .lvx__hb { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(16px, 2vw, 28px); }
.lvx__hf { color: #fff; background: var(--night); }
.lvx__hf img { position: absolute; inset: 0; }
.lvx__hf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(11 22 38 / .8)); }
.lvx__hf > span, .lvx__hf > b { position: relative; z-index: 1; }
.lvx__hb { --p: 1; transform: rotateY(180deg); justify-content: flex-start; background: var(--night); color: #fff; }
.lvx__hlv { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-strong); }
.lvx__hk { margin-top: 6px; font-size: clamp(28px, 2.8vw, 44px); font-weight: 500; line-height: 1; }
.lvx__hp { margin: 8px 0 clamp(10px, 2vh, 22px); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.2; }
.lvx__hn { margin-top: auto; font-size: clamp(56px, 6vw, 96px); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--gold-strong); }
.lvx__hb .lvx__dl { margin-top: clamp(8px, 1.6vh, 16px); }

/* ---------- I : le défilé horizontal ---------- */
.lvx--i { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro" "vis" "foot"; }
.lvx--i .lvx__info { display: none; }
.lvx--i .lvx__vis { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; margin-right: calc(-1 * var(--edge)); }
.lvx__rv { min-height: 0; overflow: hidden; }
.lvx__trk { height: 100%; display: flex; gap: 2.5%; transform: translate3d(calc(var(--g, 0) * -74.5%), 0, 0); will-change: transform; }
.lvx__pn { --p: 0; flex: 0 0 72%; min-width: 0; display: grid; grid-template-columns: 52% 1fr; overflow: hidden; border-radius: 14px; background: var(--night); color: #fff; opacity: calc(.4 + .6 * var(--p)); }
.lvx__pph { position: relative; overflow: hidden; }
.lvx__pph img { transform: scale(calc(1.12 - .12 * var(--p))); }
.lvx__ptx { display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2.6vw, 40px); }
.lvx__ptx .lvx__lvl { color: var(--gold-strong); }
.lvx__pk { font-size: clamp(34px, 3.6vw, 58px); font-weight: 500; line-height: .95; letter-spacing: -.02em; }
.lvx__pp { margin-top: 8px; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.2; }
.lvx__ptx .lvx__dl > div { border-top-color: rgb(255 255 255 / .16); }
.lvx__ptx .lvx__dl dt { color: rgb(255 255 255 / .55); }
.lvx__ptx .lvx__dl dd { color: #fff; }
.lvx__rul { display: flex; gap: 4px; margin: clamp(14px, 2.4vh, 24px) var(--edge) 0 0; }
.lvx__rs { --f: 0; --p: 0; flex: 1 1 0; min-width: 0; display: grid; gap: 8px; }
.lvx__rt { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: rgb(22 33 61 / .12); }
.lvx__rt i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--f)); }
.lvx__rd { font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; color: rgb(22 33 61 / calc(.45 + .55 * var(--p))); white-space: nowrap; }

/* ---------- tablette en paysage ---------- */
@media (min-width: 900px) and (max-width: 1180px) {
  .lvx:not(.lvx--b, .lvx--g, .lvx--h, .lvx--i) { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  .lvx--g { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
  .lvx__nm { font-size: 42px; }
}

/* ---------- téléphone et tablette en portrait : titre, visuel, fiche, admission l'un sous l'autre ---------- */
@media (max-width: 899px) {
  .lvx { top: calc(18px + var(--tth, 90px) + 12px); bottom: 14px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "intro" "vis" "info" "foot"; gap: 12px; }
  .lvx .lv__intro { font-size: 13.5px; }
  .lvx .lv__foot { justify-content: space-between; }
  .lvx .lv__foot p { font-size: 13px; }
  .lvx__info { align-self: start; }
  .lvx__lvl { font-size: 11px; margin-bottom: 4px; }
  .lvx__nm { font-size: clamp(30px, 8vw, 44px); }
  .lvx__p { margin-top: 6px; font-size: 17px; }
  .lvx__dl { margin-top: 10px; }
  .lvx__dl > div { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
  .lvx__dl dt { font-size: 9.5px; }
  .lvx__dl dd { font-size: 13.5px; }
  .lvx__stairs { gap: 6px; }
  .lvx__sn { font-size: 9.5px; letter-spacing: .12em; }
  .lvx__sk { top: calc(clamp(14px, 2vh, 22px) + 16px); font-size: 17px; }
  .lvx__sd { font-size: 12px; }
  .lvx--b { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro" "vis" "foot"; }
  .lvx--b .lvx__vis { overflow: hidden; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge); }
  .lvx__cmp { --cg: 10px; --sh: 56.5%; width: 230%; transform: translate3d(calc(var(--g, 0) / 2 * -1 * var(--sh)), 0, 0); will-change: transform; } /* la colonne en cours vient dans le cadre */
  .lvx__ck { font-size: 30px; }
  .lvx__seg { min-width: 24%; }
  .lvx__seg .lvx__sd { font-size: 13px; }
  .lvx__st { font-size: 9.5px; letter-spacing: .06em; }
  .lvx__tot { font-size: 12.5px; }
  .lvx__tower { --fg: 6px; padding-left: 12px; }
  .lvx__cab { width: 4px; }
  .lvx__fn { font-size: 34px; }
  .lvx__fk { left: 70px; font-size: 22px; }
  .lvx__fk small { font-size: 9.5px; }
  .lvx__fd { right: 14px; font-size: 12px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .lvx .lv__intro { font-size: 15px; }
  .lvx__nm { font-size: 48px; }
  .lvx__dl dd { font-size: 15px; }
  .lvx__sk { font-size: 26px; }
  .lvx__cmp { --sh: 33.333%; width: 150%; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .lvx .lv__intro { display: none; }
  .lvx__p { font-size: 15px; }
  .lvx__dl > div { padding: 4px 0; }
  .lvx__dl dd { font-size: 12.5px; }
}

/* ---------- pistes E à I sur téléphone et tablette en portrait ---------- */
@media (max-width: 899px) {
  .lvx--e .lvx__dl dd, .lvx--f .lvx__dl dd { font-size: 14px; }
  .lvx__tiers { padding-bottom: 6px; }
  .lvx__tier { padding: 5px 10px 5px 6px; font-size: 11px; }
  .lvx__tier i { width: 12px; height: 12px; }
  .lvx--g { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "vis" "info" "foot"; }
  .lvx--h .lvx__vis { overflow: hidden; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge); }
  .lvx__flip { --cg: 10px; width: 230%; transform: translate3d(calc(var(--g, 0) / 2 * -56.5%), 0, 0); will-change: transform; }
  .lvx__hk { font-size: 30px; }
  .lvx__hp { font-size: 16px; }
  .lvx__hn { font-size: 44px; }
  .lvx__trk { gap: 3%; transform: translate3d(calc(var(--g, 0) * -91%), 0, 0); }
  .lvx__pn { flex-basis: 88%; grid-template-columns: minmax(0, 1fr); grid-template-rows: 38% minmax(0, 1fr); }
  .lvx__ptx { justify-content: flex-start; padding: 14px 16px; }
  .lvx__pk { font-size: 30px; }
  .lvx__pp { font-size: 15px; }
  .lvx__ptx .lvx__dl { margin-top: 8px; }
  .lvx__rs { flex-grow: 1 !important; } /* sur petit écran, 3 segments égaux pour que les durées restent lisibles */
    .lvx__rd { font-size: 12px; }
  }

/* sélecteur des pistes (pages de comparaison) */
.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); }
.pistes { max-width: calc(100vw - 20px); overflow-x: auto; scrollbar-width: none; }
@media (max-width: 899px) { .pistes a { padding: 7px 10px; font-size: 12px; } }
/* la S05 arrive par un bandeau en bas de la S04 : on lui laisse la place */
.lvb .lvx { bottom: calc(var(--bh5, 0px) + clamp(18px, 4.4vh, 44px)); }
@media (max-width: 899px) { .lvb .lvx { bottom: calc(var(--bh5, 0px) + 14px); } }