/* ============================================================================
   Arbitrix — animation « motion design » de la landing (cf. landing-motion.js)
   ----------------------------------------------------------------------------
   DA « Industry » : tokens --ds-* de /design-system.css (avec valeurs de repli
   identiques si la feuille manque), Barlow + Barlow Condensed (déclarées par
   /design-system.css — aucune @font-face ici), fond clair, filets 1 px, coins
   carrés, croix de calage, UN accent bleu acier ; vert/rouge réservés aux
   verdicts. Aucun dégradé, halo, flou ni ombre lourde.

   AUCUNE transition ni animation CSS : tout mouvement est piloté par la
   timeline JS (transform / opacity / clip-path / stroke-dashoffset). Les
   règles ci-dessous ne posent que la mise en page et l'état « avant rendu ».

   Géométrie : scène LOGIQUE à taille fixe (1920×1080 ou 1080×1920) mise à
   l'échelle par le script ; toutes les tailles ci-dessous sont en px logiques.
   Contraintes CSP : feuille same-origin, ni @import, ni url() externe.
   ========================================================================== */

/* ─── Conteneur (page hôte) ──────────────────────────────────────────────── */
.lm-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ds-color-bg, #f2f2f3);
  contain: layout paint;
  isolation: isolate;
}
.lm-stage[data-lm-format="9x16"] { aspect-ratio: 9 / 16; }
/* Landing mobile : on ne garde que la zone sûre (y 170 → 1590 de la scène). */
.lm-stage[data-lm-format="9x16"][data-lm-crop="safe"] { aspect-ratio: 1080 / 1420; }

.lm-viewport { position: absolute; inset: 0; overflow: hidden; }

/* Bouton pause / lecture (WCAG 2.2.2) — hors scène mise à l'échelle : taille
   réelle constante, cible ≥ 40 px. Par défaut (repli) dans le coin bas-droit
   de la scène ; .lm-toggle-ext = posé par le script dans l'emplacement que la
   page hôte lui réserve (data-lm-controls), dans le flux, HORS zone animée :
   il ne peut alors masquer aucune scène, quel que soit le format. */
.lm-toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin: 0;
  cursor: pointer; border-radius: 0;
  color: var(--ds-color-text, #1d1f20);
  background: var(--ds-color-bg, #f2f2f3);
  border: 1px solid var(--ds-color-divider, rgba(29, 31, 32, .16));
}
.lm-toggle svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.lm-toggle:hover { background: var(--ds-color-surface, #e9e9ea); }
.lm-toggle:focus-visible { outline: 2px solid var(--ds-color-accent, #5980a6); outline-offset: 2px; }
.lm-toggle.lm-toggle-ext { position: relative; right: auto; bottom: auto; z-index: auto; flex: none; }

/* ─── Scène logique ──────────────────────────────────────────────────────── */
.lm-canvas {
  --lm-hair: 1px;
  --pu: 1;
  --lm-ink: var(--ds-color-text, #1d1f20);
  --lm-bg: var(--ds-color-bg, #f2f2f3);
  --lm-surface: var(--ds-color-surface, #e9e9ea);
  --lm-line: rgba(29, 31, 32, .14);
  --lm-frame: rgba(29, 31, 32, .32);
  --lm-muted: rgba(29, 31, 32, .6);
  --lm-accent: var(--ds-color-accent, #5980a6);
  --lm-accent-100: var(--ds-accent-100, #eef6ff);
  --lm-accent-400: var(--ds-accent-400, #94bce3);
  --lm-accent-700: var(--ds-accent-700, #416180);
  --lm-accent-900: var(--ds-accent-900, #1d2d3d);
  --lm-good: var(--ds-good, #047857);
  --lm-good-bg: var(--ds-good-bg, #ecfdf5);
  --lm-bad: var(--ds-bad, #dc2626);
  --lm-bad-bg: var(--ds-bad-bg, #fef2f2);
  --lm-head: var(--ds-font-heading, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  --lm-body: var(--ds-font-body, 'Barlow', system-ui, sans-serif);

  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  visibility: hidden;               /* rendu par le script (1er seek) */
  background: var(--lm-bg);
  color: var(--lm-ink);
  font-family: var(--lm-body);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  user-select: none;
  pointer-events: none;
}
.lm-canvas.lm-f9 { width: 1080px; height: 1920px; --pu: 1.15; }
.lm-canvas *, .lm-canvas *::before, .lm-canvas *::after { box-sizing: border-box; }
.lm-canvas i { font-style: normal; }
.lm-canvas b { font-weight: 700; }

.lm-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; isolation: isolate; }
.lm-opaque { background: var(--lm-bg); }

/* Ligne de texte masquée (le texte monte sous une ligne de coupe). Le padding
   négatif élargit la zone de coupe pour les accents et jambages sans changer
   la mise en page. */
.lm-ml { display: block; overflow: hidden; padding: .16em .08em .14em; margin: -.16em -.08em -.14em; }
.lm-mli { display: block; white-space: nowrap; transform: translateY(130%); }

.lm-display {
  font-family: var(--lm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}

/* Filet qui se trace (scaleX depuis la gauche) */
.lm-rule {
  position: absolute; display: block; left: 0; width: 100%;
  height: var(--lm-hair); background: var(--lm-line);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* Cadre dessiné (4 filets) */
.lm-bx { position: absolute; inset: 0; display: block; pointer-events: none; --lm-bxc: var(--lm-frame); }
.lm-bx > i { position: absolute; display: block; background: var(--lm-bxc); }
.lm-bx > .t { left: 0; top: 0; width: 100%; height: var(--lm-hair); transform-origin: 0 0; }
.lm-bx > .l { left: 0; top: 0; width: var(--lm-hair); height: 100%; transform-origin: 0 0; }
.lm-bx > .r { right: 0; top: 0; width: var(--lm-hair); height: 100%; transform-origin: 0 0; }
.lm-bx > .b { left: 0; bottom: 0; width: 100%; height: var(--lm-hair); transform-origin: 0 0; }
.lm-bx-soft { --lm-bxc: rgba(29, 31, 32, .22); }
.lm-bx-accent { --lm-bxc: var(--lm-accent); }
.lm-bx-btn { --lm-bxc: var(--lm-accent-400); }

/* Glyphes SVG (✓ ✕ ≥) */
.lm-g { display: inline-block; width: .72em; height: .72em; vertical-align: -.04em; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: none; }
.lm-g-gte { width: .5em; height: .68em; vertical-align: -.06em; stroke-width: 1.5; margin: 0 .04em; }

/* Logo « code-barres » */
.lm-logo { display: block; flex: none; }
.lm-logo-bg { fill: var(--lm-accent); }
.lm-logo-bars { fill: none; stroke: var(--lm-bg); stroke-width: 4.5; }

/* ─── Habillage permanent : croix de calage + marque ─────────────────────── */
.lm-cross { position: absolute; width: 22px; height: 22px; color: rgba(29, 31, 32, .45); }
.lm-cross::before, .lm-cross::after { content: ""; position: absolute; background: currentColor; }
.lm-cross::before { left: 10.5px; top: 0; width: var(--lm-hair); height: 100%; }
.lm-cross::after { top: 10.5px; left: 0; height: var(--lm-hair); width: 100%; }
.lm-cross-tl { left: 37px; top: 37px; }
.lm-cross-tr { right: 37px; top: 37px; }
.lm-cross-bl { left: 37px; bottom: 37px; }
.lm-cross-br { right: 37px; bottom: 37px; }
.lm-brand { position: absolute; left: 120px; top: 62px; display: flex; align-items: center; gap: 14px; }
.lm-brand .lm-logo { width: 34px; height: 34px; }
.lm-brand-word { font-family: var(--lm-head); font-weight: 600; font-size: 28px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; }
.lm-f9 .lm-brand { left: 84px; top: 96px; }
.lm-f9 .lm-brand .lm-logo { width: 40px; height: 40px; }
.lm-f9 .lm-brand-word { font-size: 34px; }

.lm-hud-dark { color: var(--lm-bg); }
.lm-hud-dark .lm-cross { color: rgba(242, 242, 243, .45); }
.lm-hud-dark .lm-logo-bars { stroke: var(--lm-accent-900); }

/* ─── Scènes 1 + 2 : étiquette, fiche produit, extension ─────────────────── */
.lm-cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.lm-br { position: absolute; left: 740px; top: 170px; width: 1060px; height: 740px; background: var(--lm-bg); }
.lm-f9 .lm-br { left: 72px; top: 700px; width: 936px; height: 800px; }

.lm-br-bar {
  position: absolute; left: 0; top: 0; right: 0; height: calc(76px * var(--pu));
  display: flex; align-items: center; gap: calc(22px * var(--pu)); padding: 0 calc(24px * var(--pu));
}
.lm-br-barrule { top: calc(76px * var(--pu)); background: var(--lm-frame); }
.lm-br-dots { display: flex; gap: calc(9px * var(--pu)); flex: none; }
.lm-br-dots i { display: block; width: calc(14px * var(--pu)); height: calc(14px * var(--pu)); border-radius: 50%;
  border: var(--lm-hair) solid var(--lm-frame); }
.lm-br-url {
  flex: 1; min-width: 0; height: calc(46px * var(--pu)); display: flex; align-items: center;
  padding: 0 calc(16px * var(--pu)); border: var(--lm-hair) solid var(--lm-line); background: var(--lm-bg);
  font-size: calc(27px * var(--pu)); color: var(--lm-muted); white-space: nowrap; overflow: hidden;
}
.lm-br-ico {
  position: relative; flex: none; width: calc(56px * var(--pu)); height: calc(56px * var(--pu));
  display: flex; align-items: center; justify-content: center;
  border: var(--lm-hair) solid var(--lm-frame);
}
.lm-br-icoon { position: absolute; inset: 0; background: var(--lm-accent-100);
  box-shadow: inset 0 0 0 var(--lm-hair) var(--lm-accent); opacity: 0; }
.lm-br-logo { position: relative; width: calc(32px * var(--pu)); height: calc(32px * var(--pu)); }

.lm-br-info { position: absolute; left: 44px; top: calc(120px * var(--pu)); width: 470px; height: 560px; }
.lm-f9 .lm-br-info { left: 36px; width: 400px; }
.lm-skel { position: absolute; left: 0; display: block; height: 12px; background: rgba(29, 31, 32, .08);
  transform-origin: 0 50%; }
.lm-skel-t { height: calc(24px * var(--pu)); background: rgba(29, 31, 32, .13); }
.lm-skel-1 { top: 0; width: 94%; }
.lm-skel-2 { top: calc(42px * var(--pu)); width: 64%; }
.lm-skel-3 { top: calc(282px * var(--pu)); width: 98%; }
.lm-skel-4 { top: calc(310px * var(--pu)); width: 88%; }
.lm-skel-5 { top: calc(338px * var(--pu)); width: 76%; }
.lm-skel-btn { position: absolute; left: 0; top: calc(392px * var(--pu)); width: 62%; height: calc(70px * var(--pu)); }

/* Étiquette prix (la « photo » de la scène 1, puis le prix de la fiche) */
.lm-tag { position: absolute; left: 0; top: calc(96px * var(--pu)); }
.lm-tag-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.lm-tag-out, .lm-tag-hole { fill: none; stroke: var(--lm-ink); stroke-width: var(--lm-hair);
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.lm-tag-out { fill: var(--lm-bg); }
.lm-tag-was { position: absolute; left: calc(64px * var(--pu)); top: calc(16px * var(--pu));
  font-size: calc(24px * var(--pu)); color: var(--lm-muted); line-height: 1.2; }
.lm-strike { position: absolute; left: -3%; top: 54%; width: 106%; height: calc(2px * var(--pu));
  background: var(--lm-ink); transform-origin: 0 50%; transform: scaleX(0); }
.lm-tag-off { position: absolute; right: calc(16px * var(--pu)); top: calc(15px * var(--pu));
  padding: calc(3px * var(--pu)) calc(9px * var(--pu)); background: var(--lm-accent); color: var(--lm-bg);
  font-size: calc(21px * var(--pu)); font-weight: 700; line-height: 1.15; letter-spacing: .02em;
  clip-path: inset(0 100% 0 0); }
.lm-tag-now { position: absolute; left: calc(62px * var(--pu)); top: calc(50px * var(--pu));
  font-family: var(--lm-head); font-weight: 600; font-size: calc(68px * var(--pu)); line-height: 1; }

.lm-br-img { position: absolute; left: 548px; top: calc(120px * var(--pu)); width: 470px; height: 470px; }
.lm-f9 .lm-br-img { left: 468px; width: 432px; height: 432px; }
.lm-iso { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; overflow: visible; }
.lm-iso path { fill: none; stroke: rgba(29, 31, 32, .42); stroke-width: calc(var(--lm-hair) * .58);
  stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Panneau de l'extension */
.lm-pop {
  position: absolute; right: calc(26px * var(--pu)); top: calc(88px * var(--pu));
  width: calc(380px * var(--pu)); padding: 0 calc(24px * var(--pu)) calc(24px * var(--pu));
  background: var(--lm-bg); border: var(--lm-hair) solid var(--lm-frame);
  box-shadow: 0 3px 10px rgba(43, 43, 45, .12);
  clip-path: inset(0 0 100% 0);
}
.lm-pop-head { display: flex; align-items: center; gap: calc(12px * var(--pu)); height: calc(72px * var(--pu));
  border-bottom: var(--lm-hair) solid var(--lm-line); margin: 0 calc(-24px * var(--pu)); padding: 0 calc(24px * var(--pu)); }
.lm-pop-logo { width: calc(30px * var(--pu)); height: calc(30px * var(--pu)); }
.lm-pop-word { font-family: var(--lm-head); font-weight: 600; font-size: calc(26px * var(--pu));
  letter-spacing: .14em; text-transform: uppercase; }
.lm-bc { position: relative; height: calc(120px * var(--pu)); margin-top: calc(24px * var(--pu));
  border: var(--lm-hair) solid var(--lm-line); padding: calc(18px * var(--pu)) calc(22px * var(--pu)); }
.lm-bc-svg { position: absolute; left: calc(22px * var(--pu)); right: calc(22px * var(--pu));
  top: calc(18px * var(--pu)); bottom: calc(18px * var(--pu));
  width: calc(100% - 44px * var(--pu)); height: calc(100% - 36px * var(--pu)); }
.lm-bc-faint rect { fill: rgba(29, 31, 32, .16); }
.lm-bc-ink rect { fill: var(--lm-ink); }
.lm-bc-ink { clip-path: inset(-2px 100% -2px -2px); }
.lm-bc-scan { position: absolute; left: calc(22px * var(--pu)); top: calc(8px * var(--pu)); bottom: calc(8px * var(--pu));
  width: calc(3px * var(--pu)); background: var(--lm-accent); opacity: 0; }
.lm-ean { display: inline-flex; align-items: center; gap: calc(10px * var(--pu)); margin-top: calc(18px * var(--pu));
  padding: calc(5px * var(--pu)) calc(14px * var(--pu)); background: var(--ds-neutral-100, #f5f5f8);
  border: var(--lm-hair) solid var(--lm-line); color: var(--ds-neutral-800, #424244);
  font-size: calc(26px * var(--pu)); font-weight: 700; letter-spacing: .06em; line-height: 1.2;
  clip-path: inset(0 100% 0 0); }
.lm-ean .lm-g { color: var(--lm-accent-700); stroke-dashoffset: 1; }
.lm-pop-sep { position: relative; display: block; margin: calc(22px * var(--pu)) 0; }
.lm-amz { position: relative; padding: calc(18px * var(--pu)) calc(20px * var(--pu)); }
.lm-amz-l { font-size: calc(30px * var(--pu)); font-weight: 500; }
.lm-amz-p { font-family: var(--lm-head); font-weight: 600; font-size: calc(46px * var(--pu)); line-height: 1; }
.lm-amz .lm-mli { display: flex; align-items: baseline; }
.lm-amz .lm-mli b { margin-left: .2em; }

.lm-ring { position: absolute; display: block; border: calc(2px * var(--pu)) solid var(--lm-accent); opacity: 0; }
.lm-cur { position: absolute; left: 0; top: 0; width: calc(28px * var(--pu)); height: calc(42px * var(--pu));
  transform-origin: 3px 2px; opacity: 0; }
.lm-cur-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lm-cur-svg path { fill: var(--lm-ink); stroke: var(--lm-bg); stroke-width: 1.6; stroke-linejoin: round; }

/* Textes des scènes 1 et 2 */
.lm-copy { position: absolute; }
.lm-s1c { left: 120px; top: 330px; }
.lm-s1-h1 { font-size: 120px; }
.lm-s1-h2 { font-size: 120px; margin-top: 28px; color: var(--lm-accent-700); }
.lm-f9 .lm-s1c { left: 84px; top: 300px; }
.lm-f9 .lm-s1-h1 { font-size: 132px; }
.lm-f9 .lm-s1-h2 { font-size: 132px; margin-top: 30px; }

.lm-s2c { left: 120px; top: 318px; width: 580px; }
.lm-s2-h { font-size: 96px; }
.lm-steps { margin-top: 64px; display: flex; flex-direction: column; gap: 26px; }
.lm-step { display: flex; align-items: center; gap: 18px; }
.lm-step-tick { display: block; flex: none; width: 34px; height: 3px; background: var(--lm-accent);
  transform-origin: 0 50%; transform: scaleX(0); }
.lm-step-t { font-size: 40px; font-weight: 500; line-height: 1.2; }
.lm-f9 .lm-s2c { left: 84px; top: 250px; width: 912px; }
.lm-f9 .lm-s2-h { font-size: 96px; }
.lm-f9 .lm-steps { margin-top: 44px; gap: 22px; }
.lm-f9 .lm-step-t { font-size: 44px; }

/* ─── Scène 3 : cascade des frais ────────────────────────────────────────── */
.lm-s3 { clip-path: inset(0 100% 0 0); }
.lm-s3-title { position: absolute; left: 120px; top: 150px; font-size: 88px; }
.lm-s3-start { position: absolute; left: 120px; top: 384px; width: 560px; height: 56px;
  display: flex; align-items: baseline; justify-content: space-between; }
.lm-s3-start-l { font-size: 30px; font-weight: 500; }
.lm-s3-start-a { font-size: 32px; font-weight: 700; }
.lm-s3-start-rule { top: auto; bottom: 0; background: var(--lm-frame); }

.lm-s3-col { position: absolute; top: 150px; width: 500px; }
.lm-s3-colA { left: 740px; }
.lm-s3-colB { left: 1300px; }
.lm-s3-grp { position: relative; padding-bottom: 12px; margin-bottom: 2px;
  font-size: 26px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lm-accent-700); }
.lm-s3-grp-rule { top: auto; bottom: 0; background: var(--lm-accent); }
.lm-s3-row + .lm-s3-grp { margin-top: 40px; }
.lm-s3-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px;
  align-items: baseline; padding: 13px 0 13px 22px;
  border-bottom: var(--lm-hair) solid var(--lm-line); opacity: 0;
}
.lm-s3-mark { position: absolute; left: 0; top: 13px; bottom: 13px; width: 5px; background: var(--lm-accent); opacity: 0; }
.lm-s3-lab { font-size: 30px; font-weight: 500; line-height: 1.2; }
.lm-s3-amt { font-size: 30px; font-weight: 500; line-height: 1.2; text-align: right; white-space: nowrap; }
.lm-s3-det { grid-column: 1 / -1; margin-top: 3px; font-size: 27px; line-height: 1.22; color: var(--lm-muted); }
/* Statut du palier FBA (« calibré ») : marqueur neutre — le vert reste
   réservé aux verdicts. */
.lm-s3-flag { display: inline-block; margin-right: 10px; padding: 0 7px; font-style: normal; font-size: .8em;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.35; vertical-align: .08em;
  color: var(--lm-accent-700); box-shadow: inset 0 0 0 var(--lm-hair) var(--lm-accent); }

.lm-s3-res { position: absolute; left: 120px; top: 478px; width: 560px; height: 520px; }
.lm-s3-run, .lm-s3-fin { position: absolute; left: 0; top: 0; font-family: var(--lm-head); font-weight: 600;
  font-size: 140px; line-height: 1; white-space: nowrap; }
/* min-width : repli avant mesure — le script la remplace par la largeur de la
   plus longue valeur du décompte (chiffres alignés à droite, virgule fixe). */
.lm-s3-runv { display: inline-block; min-width: 3.1em; text-align: right; }
.lm-s3-fin { opacity: 0; display: flex; align-items: baseline; }
.lm-s3-fin.is-good { color: var(--lm-good); }
.lm-s3-fin.is-bad { color: var(--lm-bad); }
.lm-s3-finn { font-size: 58px; margin-left: 18px; text-transform: none; }
.lm-s3-kpi { position: absolute; left: 0; top: 176px; display: flex; align-items: baseline; gap: 30px; }
.lm-s3-roi { font-size: 44px; font-weight: 500; }
.lm-s3-mult { font-size: 30px; color: var(--lm-muted); }
.lm-s3-ver { position: absolute; left: 0; top: 262px; }
.lm-s3-tag {
  display: inline-flex; align-items: center; gap: 14px; padding: 8px 20px 8px 16px;
  font-family: var(--lm-head); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  clip-path: inset(0 100% 0 0);
}
.lm-s3-tag.is-good { color: var(--lm-good); background: var(--lm-good-bg); box-shadow: inset 0 0 0 var(--lm-hair) rgba(4, 120, 87, .4); }
.lm-s3-tag.is-bad { color: var(--lm-bad); background: var(--lm-bad-bg); box-shadow: inset 0 0 0 var(--lm-hair) rgba(220, 38, 38, .4); }
.lm-s3-tag .lm-g { width: .78em; height: .78em; stroke-width: 2.2; stroke-dashoffset: 1; }
.lm-s3-crit { margin-top: 18px; font-size: 28px; color: var(--lm-muted); }
.lm-s3-max { position: absolute; left: 0; top: 396px; font-size: 32px; }
.lm-s3-foot { position: absolute; left: 0; top: 488px; font-size: 27px; color: var(--lm-muted); }

/* 9:16 — composition finale dans la zone sûre y ∈ [200 ; 1570] : titre, prix
   de départ (avec respiration sous le titre), puis le bloc résultat remonte à
   FORMATS['9x16'].s3ResTo (landing-motion.js) et descend jusqu'à y ≈ 1545. */
.lm-f9 .lm-s3-title { left: 84px; top: 224px; font-size: 108px; }
.lm-f9 .lm-s3-start { left: 84px; top: 520px; width: 912px; height: 66px; }
.lm-f9 .lm-s3-start-l { font-size: 36px; }
.lm-f9 .lm-s3-start-a { font-size: 38px; }
.lm-s3-win { position: absolute; left: 84px; top: 606px; width: 912px; height: 620px; overflow: hidden; }
.lm-s3-scroll { position: absolute; left: 0; top: 0; width: 100%; padding-top: 22px; }
.lm-f9 .lm-s3-grp { font-size: 30px; padding-bottom: 12px; }
.lm-f9 .lm-s3-row + .lm-s3-grp { margin-top: 34px; }
.lm-f9 .lm-s3-row { padding: 15px 0 15px 26px; }
.lm-f9 .lm-s3-mark { top: 15px; bottom: 15px; width: 6px; }
.lm-f9 .lm-s3-lab, .lm-f9 .lm-s3-amt { font-size: 37px; }
.lm-f9 .lm-s3-det { font-size: 31px; }
.lm-f9 .lm-s3-res { left: 84px; top: 1262px; width: 912px; height: 860px; }
.lm-f9 .lm-s3-run, .lm-f9 .lm-s3-fin { font-size: 224px; }
.lm-f9 .lm-s3-finn { font-size: 88px; margin-left: 24px; }
.lm-f9 .lm-s3-kpi { top: 292px; gap: 40px; }
.lm-f9 .lm-s3-roi { font-size: 66px; }
.lm-f9 .lm-s3-mult { font-size: 46px; }
.lm-f9 .lm-s3-ver { top: 430px; }
.lm-f9 .lm-s3-tag { font-size: 62px; padding: 12px 28px 12px 22px; }
.lm-f9 .lm-s3-crit { font-size: 36px; margin-top: 22px; }
.lm-f9 .lm-s3-max { top: 690px; font-size: 44px; }
.lm-f9 .lm-s3-foot { top: 800px; font-size: 32px; }

/* ─── Scène 4 : aspiration ───────────────────────────────────────────────── */
.lm-s4-title { position: absolute; left: 120px; top: 150px; font-size: 96px; }
.lm-s4-sub { position: absolute; left: 120px; top: 386px; font-size: 44px; font-weight: 500; line-height: 1.2; }
.lm-s4-panel { position: absolute; left: 740px; top: 150px; width: 1060px; height: 796px; background: var(--lm-bg); }
.lm-s4-head { position: absolute; left: 0; top: 0; right: 0; height: 84px; display: flex; align-items: center;
  gap: 14px; padding: 0 28px; opacity: 0; }
.lm-s4-logo { width: 34px; height: 34px; }
.lm-s4-word { font-family: var(--lm-head); font-weight: 600; font-size: 28px; letter-spacing: .14em; text-transform: uppercase; }
.lm-s4-track { margin-left: auto; width: 340px; height: 6px; background: rgba(29, 31, 32, .1); overflow: hidden; }
.lm-s4-fill { display: block; width: 100%; height: 100%; background: var(--lm-accent); transform-origin: 0 50%; transform: scaleX(0); }
.lm-s4-headrule { top: 84px; background: var(--lm-frame); }
.lm-s4-list { position: absolute; left: 24px; right: 24px; top: 104px; }
.lm-s4-row {
  position: absolute; left: 0; top: 0; width: 100%;
  padding: 18px 26px 0 34px; background: var(--lm-bg);
  border: var(--lm-hair) solid var(--lm-line);
  clip-path: inset(-2px 100% -2px -2px);
}
.lm-s4-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; opacity: 0; }
.is-good > .lm-s4-bar { background: var(--lm-good); }
.is-bad > .lm-s4-bar { background: var(--lm-bad); }
.lm-s4-scan { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--lm-accent);
  transform-origin: 0 50%; transform: scaleX(0); }
.lm-s4-l1 { display: flex; align-items: center; gap: 20px; }
.lm-s4-name { flex: 1; min-width: 0; font-size: 32px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.lm-s4-pill {
  flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 11px;
  font-family: var(--lm-head); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
  clip-path: inset(0 100% 0 0);
}
.is-good .lm-s4-pill { color: var(--lm-good); background: var(--lm-good-bg); box-shadow: inset 0 0 0 var(--lm-hair) rgba(4, 120, 87, .4); }
.is-bad .lm-s4-pill { color: var(--lm-bad); background: var(--lm-bad-bg); box-shadow: inset 0 0 0 var(--lm-hair) rgba(220, 38, 38, .4); }
.lm-s4-l2 { display: flex; align-items: baseline; margin-top: 16px; white-space: nowrap; }
.lm-s4-kp { display: flex; align-items: baseline; clip-path: inset(0 100% 0 0); }
.lm-s4-c { display: inline-flex; align-items: baseline; gap: 10px; }
.lm-s4-c b { font-size: 30px; }
.lm-s4-k { font-size: 25px; color: var(--lm-muted); }
.lm-s4-was { font-size: 24px; color: var(--lm-muted); margin-left: 2px; }
.lm-s4-c-px { width: 330px; }
.lm-s4-c-net { width: 210px; }
.lm-s4-c-roi { width: 180px; }

.lm-s4-hl { position: absolute; display: block; pointer-events: none; }
.lm-s4-lead { position: absolute; display: block; background: var(--lm-accent); }
.lm-s4-lead-a { height: var(--lm-hair); transform-origin: 100% 50%; transform: scaleX(0); }
.lm-s4-lead-b { width: var(--lm-hair); transform-origin: 50% 0; transform: scaleY(0); }
.lm-s4-lead-c { height: var(--lm-hair); transform-origin: 0 50%; transform: scaleX(0); }
.lm-s4-node { position: absolute; display: block; width: 9px; height: 9px; background: var(--lm-accent); opacity: 0; }
.lm-s4-note { position: absolute; left: 120px; top: 700px; font-size: 40px; font-weight: 500; line-height: 1.2;
  color: var(--lm-accent-700); }
.lm-s4-illus { position: absolute; left: 120px; top: 962px; font-size: 27px; color: var(--lm-muted); }

/* 9:16 — zone sûre y ∈ [200 ; 1570] : titre, sous-titre DÉTACHÉ du titre
   (respiration ≈ 40 px sous la boîte du titre), panneau, puis une ligne de
   légende sous le panneau (note annotée à gauche, « Exemple illustratif » à
   droite) qui se termine vers y ≈ 1550. */
.lm-f9 .lm-s4-title { left: 84px; top: 224px; font-size: 108px; }
.lm-f9 .lm-s4-sub { left: 84px; top: 496px; font-size: 42px; }
.lm-f9 .lm-s4-panel { left: 84px; top: 600px; width: 912px; height: 880px; }
.lm-s4-cols { position: absolute; left: 50px; right: 20px; top: 84px; height: 58px; display: flex; align-items: center;
  font-size: 25px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lm-muted); opacity: 0; }
.lm-s4-colh:nth-child(1), .lm-s4-colh:nth-child(2) { width: 214px; flex: none; }
.lm-s4-colh:nth-child(3) { width: 184px; flex: none; }
.lm-f9 .lm-s4-list { top: 150px; }
.lm-f9 .lm-s4-head { padding: 0 24px; }
.lm-f9 .lm-s4-track { width: 300px; }
.lm-f9 .lm-s4-list { left: 20px; right: 20px; }
.lm-f9 .lm-s4-row { padding: 18px 22px 0 30px; }
.lm-f9 .lm-s4-name { font-size: 33px; }
.lm-f9 .lm-s4-pill { font-size: 28px; }
.lm-f9 .lm-s4-l2 { margin-top: 20px; }
.lm-f9 .lm-s4-c b { font-size: 34px; }
.lm-f9 .lm-s4-c-px, .lm-f9 .lm-s4-c-net { width: 214px; }
.lm-f9 .lm-s4-c-roi { width: 184px; }
.lm-f9 .lm-s4-note { left: 118px; top: 1504px; font-size: 38px; }
/* Légende de figure, alignée à droite sur la ligne de la note (même ligne de
   base) : le bouton pause vit désormais HORS de la scène sur la landing. */
.lm-f9 .lm-s4-illus { left: auto; right: 84px; top: 1511px; font-size: 30px; }

/* ─── Bande acier : scènes 5 et 6 ────────────────────────────────────────── */
.lm-band { background: var(--lm-accent-900); color: var(--lm-bg); clip-path: inset(100% 0 0 0); }
.lm-band-rim { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--lm-accent-400); }
.lm-wipe { position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--lm-accent); }

.lm-s5 { position: absolute; inset: 0; }
.lm-s5-stat { position: absolute; top: 330px; width: 500px; }
.lm-s5-stat:nth-child(1) { left: 120px; }
.lm-s5-stat:nth-child(2) { left: 710px; }
.lm-s5-stat:nth-child(3) { left: 1300px; }
.lm-s5-num { font-family: var(--lm-head); font-weight: 600; font-size: 300px; line-height: 1; }
.lm-odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.lm-odo-s { display: block; }
.lm-odo-s > span { display: block; height: 1em; line-height: 1; }
.lm-s5-lab { margin-top: 44px; font-size: 32px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(242, 242, 243, .66); }
.lm-s5-div { position: absolute; display: block; background: rgba(242, 242, 243, .24); }
.lm-f16 .lm-s5-div { top: 330px; width: var(--lm-hair); height: 420px; transform-origin: 50% 0; transform: scaleY(0); }
.lm-f16 .lm-s5-div-1 { left: 655px; }
.lm-f16 .lm-s5-div-2 { left: 1245px; }

.lm-f9 .lm-s5-stat { left: 84px; width: 912px; }
.lm-f9 .lm-s5-stat:nth-child(1) { left: 84px; top: 270px; }
.lm-f9 .lm-s5-stat:nth-child(2) { left: 84px; top: 690px; }
.lm-f9 .lm-s5-stat:nth-child(3) { left: 84px; top: 1110px; }
.lm-f9 .lm-s5-num { font-size: 250px; }
.lm-f9 .lm-s5-lab { margin-top: 30px; font-size: 40px; }
.lm-f9 .lm-s5-div { left: 84px; width: 912px; height: var(--lm-hair); transform-origin: 0 50%; transform: scaleX(0); }
.lm-f9 .lm-s5-div-1 { top: 650px; }
.lm-f9 .lm-s5-div-2 { top: 1070px; }

.lm-s6 { position: absolute; inset: 0; }
.lm-s6-h { position: absolute; left: 120px; top: 290px; font-size: 124px; }
.lm-s6-btn { position: absolute; left: 120px; top: 630px; display: inline-flex; align-items: center;
  padding: 30px 46px; }
.lm-s6-fill { position: absolute; inset: 0; background: var(--lm-accent); clip-path: inset(0 100% 0 0); }
.lm-s6-btnt { position: relative; font-family: var(--lm-head); font-weight: 600; font-size: 42px; line-height: 1.05;
  letter-spacing: .03em; text-transform: uppercase; color: var(--lm-bg); }
.lm-s6-url { position: absolute; left: 120px; top: 812px; font-size: 44px; font-weight: 500; letter-spacing: .02em;
  color: rgba(242, 242, 243, .82); }

.lm-f9 .lm-s6-h { left: 84px; top: 330px; font-size: 138px; }
.lm-f9 .lm-s6-btn { left: 84px; top: 960px; width: 912px; padding: 36px 44px; }
.lm-f9 .lm-s6-btnt { font-size: 52px; line-height: 1.12; }
.lm-f9 .lm-s6-url { left: 84px; top: 1250px; font-size: 50px; }