/* ============================================================
   MDJLABS — ATELIER · « ProLearn vs LMS classiques » (PL12)
   Une SEULE scène (#pl-comparatif), épinglée ~300vh, scrubée,
   réversible. Le comparatif n'est PAS un tableau figé : il se
   CONSTRUIT au scroll (les 12 lignes tombent une à une et se
   tranchent), puis l'écart se creuse (jauge 12/12), puis la
   rupture (punchline plein cadre). Piloté par atelier-comparatif.js
   via --tp → --p1/--p2/--p3 posés sur .cmp-wrap + --rev par ligne.
   Réutilise la coquille .plx-* de prolearn-scroll et le chrome
   d'atelier de atelier-atome. Tokens only → thème clair/sombre.
   ============================================================ */

/* la scène comparatif prend toute la largeur (pas de split iso 2 col) */
#pl-comparatif .plx-stage { grid-template-columns: 1fr; gap: clamp(8px, 1.4vh, 16px); }
#pl-comparatif .plx-side { align-items: center; text-align: center; }
#pl-comparatif .plx-side .plx-txts { min-height: clamp(66px, 8vh, 88px); width: 100%; max-width: 70ch; }
#pl-comparatif .plx-txt { left: 0; right: 0; text-align: center; }
/* headline de la scène compacté : il double l'ident → on lui laisse moins de place pour que
   les 12 lignes tiennent au-dessus des étapes sans se retrouver coupées ou superposées */
#pl-comparatif .plx-txt .em { font-size: clamp(19px, 2.3vw, 25px); }
#pl-comparatif .plx-txt small { font-size: clamp(12px, 1.15vw, 13.5px); }
#pl-comparatif .plx-chip, #pl-comparatif .plx-ident { align-self: center; }
#pl-comparatif .plx-ident { justify-content: center; }
/* narratif resserré pour dégager de la hauteur (l'ident double le headline em) */
#pl-comparatif .plx-chip { margin-bottom: clamp(8px, 1.4vh, 14px); }
#pl-comparatif .plx-ident { margin-bottom: clamp(8px, 1.3vh, 14px); }
#pl-comparatif .plx-ident .nm { font-size: clamp(17px, 1.9vw, 24px); }
/* LES ÉTAPES PASSENT SOUS LE TABLEAU : par défaut .plx-steps est absolute au bas du pin,
   où elles chevauchent les dernières lignes (le tableau est plus haut que les autres scènes).
   Ici on les remet EN FLUX (grille), centrées, sous l'écran → jamais sur l'animation. */
#pl-comparatif .plx-steps { position: static; left: auto; bottom: auto; transform: none;
  justify-content: center; margin-top: clamp(10px, 1.6vh, 18px); }

/* ---------- SCÈNE (perspective iso commune) ---------- */
.cmp-wrap { --p1: 0; --pclear: 0; --pgap: 0; --p2: 0; --p3: 0; position: relative; width: 100%; max-width: 1080px; margin: 0 auto; perspective: 1600px; }
.cmp-stage { position: relative; transform-style: preserve-3d;
  transform: rotateX(calc(7deg - var(--ep,1) * 7deg + 1deg)) rotateY(calc(-9deg + var(--ep,1) * 9deg)) translateY(calc((1 - var(--ep,1)) * 5%));
  transform-origin: 50% 40%; opacity: clamp(0, calc(var(--ep,1) * 1.6), 1); }

/* la légende de figure */
.cmp-cap { position: absolute; left: 2px; bottom: -22px; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--fg-3); white-space: nowrap; }
.cmp-cap .real { color: var(--pl); margin-left: 10px; }

/* utilitaire a11y : masquage visuel (les verdicts « ProLearn : oui / LMS : non »
   sont réservés aux lecteurs d'écran — non défini ailleurs dans le bundle vitrine) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- EN-TÊTES DE COLONNES ---------- */
.cmp-heads { display: grid; grid-template-columns: 1fr 116px 1fr; gap: 0; align-items: stretch; border: 1px solid var(--pl-line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.cmp-heads > div { padding: 8px 16px; }
.cmp-h-pl { background: var(--pl); color: var(--fg-inv); display: flex; flex-direction: column; gap: 3px; }
.cmp-h-pl .wm { font-family: var(--ff-mono); font-weight: 700; font-size: clamp(13px, 1.4vw, 17px); letter-spacing: 0.02em; color: var(--fg-inv); }
.cmp-h-pl .wm b { color: var(--fg-inv); }
.cmp-h-pl .tg { font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .82; }
.cmp-h-vs { background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cmp-h-lms { background: var(--bg-2); display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.cmp-h-lms .nm { font-family: var(--ff-mono); font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.cmp-h-lms .tg { font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--fg-3); }

/* ---------- LIGNES (tombent une à une, se tranchent) ---------- */
.cmp-rows { position: relative; border: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; background: var(--bg-1);
  /* le listing se retire proprement (pclear) avant l'écart — opacité pilotée par le scroll,
     PAS de transition (sinon lag → chevauchement bref avec le panneau) */
  opacity: calc(1 - var(--pclear, 0)); }
.cmp-row { display: grid; grid-template-columns: 1fr 116px 1fr; align-items: stretch; border-bottom: 1px solid var(--line);
  /* --rev 0→1 : la ligne glisse et se pose */
  opacity: var(--rev, 0); transform: translateY(calc((1 - var(--rev, 0)) * -12px));
  transition: opacity .18s linear, transform .28s var(--ease); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row > div { padding: 6px 14px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.cmp-row .txt { font-size: clamp(12px, 1vw, 13.5px); line-height: 1.32; letter-spacing: -0.005em; text-wrap: pretty; }

/* colonne ProLearn : accentuée, coche phosphore */
.cmp-c-pl { background: color-mix(in oklab, var(--pl-soft) 62%, transparent); color: var(--fg-0); border-left: 1px solid var(--pl-line); border-right: 1px solid var(--pl-line); position: relative; }
.cmp-c-pl .ic { width: 17px; height: 17px; border-radius: 999px; background: var(--pl); color: var(--fg-inv); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 8px var(--pl-glow);
  transform: scale(calc(0.2 + var(--rev, 0) * 0.8)); transition: transform .3s var(--ease); }
.cmp-c-pl .ic svg { width: 10px; height: 10px; }

/* colonne critère (centre) */
.cmp-c-crit { justify-content: center; text-align: center; background: var(--bg-2); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cmp-c-crit .crit { font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); line-height: 1.2; }

/* colonne LMS : terne, tiret/croix gris */
.cmp-c-lms { color: var(--fg-2); }
.cmp-c-lms .ic { width: 17px; height: 17px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--ff-mono); font-size: 12px; line-height: 1; }
.cmp-c-lms .txt { color: var(--fg-2); }

/* ---------- TEMPS 2 : la jauge d'écart (overlay synthétique) ---------- */
.cmp-gap { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 30px);
  /* fond quasi opaque : couvre le listing pendant qu'il se retire (fini le show-through translucide) */
  background: linear-gradient(color-mix(in oklab, var(--bg-0) 80%, transparent), color-mix(in oklab, var(--bg-0) 94%, transparent));
  /* le panneau ENTRE (pgap) APRÈS que le listing soit sorti (temps mort), puis les jauges montent (p2).
     Opacité pilotée par le scroll, sans transition (handoff net) */
  opacity: calc(var(--pgap, 0) * (1 - var(--p3))); pointer-events: none; }
.cmp-score { display: flex; align-items: baseline; gap: 10px; font-family: var(--ff-mono); }
.cmp-score .n { font-size: clamp(52px, 9vw, 108px); font-weight: 700; letter-spacing: -0.04em; color: var(--pl); text-shadow: 0 0 46px var(--pl-glow); font-feature-settings: "tnum","zero"; line-height: .9; }
.cmp-score .d { font-size: clamp(20px, 3vw, 34px); color: var(--fg-2); font-feature-settings: "tnum"; }
.cmp-score .lbl { align-self: center; margin-left: 6px; font-size: clamp(9px, 1vw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); max-width: 12ch; line-height: 1.3; text-align: left; }
.cmp-bars { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 64px); align-items: end; width: min(440px, 74%); height: clamp(120px, 20vh, 190px); }
.cmp-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.cmp-bar .track { position: relative; width: clamp(46px, 8vw, 78px); height: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); overflow: hidden; }
.cmp-bar .track b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 2px 2px; transition: height .3s var(--ease); }
.cmp-bar.pl .track b { height: calc((0.14 + var(--p2) * 0.86) * 100%); background: linear-gradient(var(--pl), var(--pl-deep, var(--pl))); box-shadow: 0 0 18px var(--pl-glow); }
.cmp-bar.lms .track b { height: 16%; background: var(--line-strong); }
.cmp-bar .cap { margin-top: 9px; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.cmp-bar.pl .cap { color: var(--pl); }
.cmp-bar.lms .cap { color: var(--fg-3); }

/* ---------- TEMPS 3 : la rupture (punchline plein cadre) ---------- */
.cmp-punch { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(18px, 3vh, 30px);
  opacity: var(--p3); transform: scale(calc(0.985 + var(--p3) * 0.015)); pointer-events: none; transition: opacity .3s var(--ease); }
.cmp-punch .k { font-family: var(--ff-mono); font-size: clamp(10px, 1.1vw, 13px); letter-spacing: 0.24em; text-transform: uppercase; color: var(--acc); display: inline-flex; align-items: center; gap: 10px; }
.cmp-punch .k::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 12px var(--acc-glow); }
.cmp-punch h2 { font-size: clamp(30px, 5.4vw, 74px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; margin: 0; color: var(--fg-1); max-width: 20ch; text-wrap: balance; }
.cmp-punch h2 .em { color: var(--pl); text-shadow: 0 0 48px var(--pl-glow); font-style: normal; }
.cmp-punch.glitching h2 .em { animation: cmpglitch .5s steps(2) 1; }
@keyframes cmpglitch { 0% { clip-path: inset(0 0 62% 0); transform: translateX(-3px); } 30% { clip-path: inset(44% 0 20% 0); transform: translateX(3px); } 60% { clip-path: inset(72% 0 0 0); transform: translateX(-2px); } 100% { clip-path: inset(0 0 0 0); transform: none; } }
.cmp-cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 11px; font-family: var(--ff-mono); font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-inv); background: var(--pl); border: 1px solid var(--pl); border-radius: var(--r-sm); padding: 13px 20px; box-shadow: 0 0 24px -4px var(--pl-glow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cmp-cta:hover { color: var(--fg-inv); transform: translateY(-2px); box-shadow: 0 8px 30px -6px var(--pl-glow); }
.cmp-cta span { transition: transform var(--dur) var(--ease); }
.cmp-cta:hover span { transform: translateX(4px); }
.cmp-punch .amorce { font-size: clamp(13px, 1.3vw, 16px); color: var(--fg-2); margin: 0; max-width: 52ch; line-height: 1.5; text-wrap: pretty; }

/* version mobile PL12 : 2 tableaux empilés (construits par scene-comparatif.js) — masqués ailleurs */
.cmp-mobile { display: none; }

/* ---------- MOBILE ≤720 : 2 TABLEAUX EMPILÉS PLEINE LARGEUR, SCROLL NORMAL (choix Mariella) ----------
   La comparaison 2 colonnes force des colonnes trop étroites sur mobile (retours à la ligne).
   Ici on DÉ-PINGLE la scène (plus de scrub/épinglage) et on affiche 2 tableaux distincts
   pleine largeur : chaque ligne dispose de toute la largeur → une seule ligne, tout lisible. */
@media (max-width: 720px) {
  .cmp-cap { display: none; }
  /* dé-pin : la scène redevient un bloc en flux normal */
  #pl-comparatif.plx-scene,
  #pl-comparatif.plx-scene.tall,
  #pl-comparatif.plx-scene.tall-lg,
  #pl-comparatif.plx-scene.tall-sm { height: auto; }
  #pl-comparatif .plx-pin { position: static; height: auto; min-height: 0; overflow: visible; display: block; padding: 26px 0 44px; }
  #pl-comparatif .plx-pin > .pv6-wrap { transform: none !important; max-width: none; padding-left: 16px; padding-right: 16px; }
  #pl-comparatif .plx-stage { display: block; }
  /* on masque le tableau 2 colonnes animé (+ jauges + étapes) et on montre les 2 tableaux */
  #pl-comparatif .cmp-wrap { display: none; }
  #pl-comparatif .plx-steps { display: none; }
  #pl-comparatif .cmp-mobile { display: block; }
  /* intro : titre + première accroche, en statique (plus de scrub) */
  #pl-comparatif .plx-side { margin-bottom: 4px; }
  #pl-comparatif .plx-side .plx-txts { position: static; min-height: 0; }
  #pl-comparatif .plx-txt { position: static; opacity: 1; transform: none; font-size: clamp(17px, 5vw, 22px); }
  #pl-comparatif .plx-txt:not([data-i="0"]) { display: none; }
  #pl-comparatif .plx-txt small { display: block; margin-top: 8px; font-size: 13px; }

  /* --- les 2 tableaux --- */
  .cmp-m-table { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-1); margin-top: 18px; }
  .cmp-m-pl { border-color: var(--pl-line, var(--line)); box-shadow: 0 0 0 1px var(--pl-soft, transparent); }
  .cmp-m-head { display: flex; align-items: baseline; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
  .cmp-m-pl .cmp-m-head { background: var(--pl); color: var(--fg-inv); border-bottom-color: transparent; }
  .cmp-m-lms .cmp-m-head { background: var(--bg-2); }
  .cmp-m-head .nm { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
  .cmp-m-head .sub { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.82; }
  /* icône + texte pleine largeur (pas de colonne critère → texte sur une ligne). Le critère
     reste dans le DOM (accessibilité/mapping) mais masqué : les 2 tableaux sont dans le même
     ordre, donc la ligne N de l'un correspond à la ligne N de l'autre. */
  .cmp-m-row { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
  .cmp-m-row:last-child { border-bottom: 0; }
  .cmp-m-lms .cmp-m-row:nth-child(odd) { background: color-mix(in oklab, var(--bg-2) 40%, transparent); }
  .cmp-m-row .crit { display: none; }
  .cmp-m-row .ic { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
  .cmp-m-pl .ic.ok { background: var(--pl); color: var(--fg-inv); box-shadow: 0 0 9px var(--pl-glow); }
  .cmp-m-pl .ic.ok svg { width: 11px; height: 11px; }
  .cmp-m-lms .ic.no { border: 1px solid var(--line-strong); color: var(--fg-3); font-family: var(--ff-mono); font-size: 12px; }
  .cmp-m-row .txt { font-size: 12.5px; line-height: 1.3; color: var(--fg-0); text-wrap: pretty; }
  .cmp-m-lms .cmp-m-row .txt { color: var(--fg-2); }
}
/* réserve narrative pleine SEULEMENT en 721-960px (tablette) — pas en mobile étroit,
   sinon elle réintroduit le grand vide au-dessus du tableau (bug de cascade). */
@media (min-width: 721px) and (max-width: 960px) {
  #pl-comparatif .plx-side .plx-txts { min-height: clamp(84px, 14vh, 130px); }
}
@media (max-width: 960px) {
  .cmp-stage { transform: none; }
}

/* ---------- ÉCRANS COURTS : on rogne surtout le NARRATIF (pas les lignes) pour garder le
   listing lisible ET les étapes visibles sous le tableau ---------- */
@media (max-height: 780px) {
  #pl-comparatif .plx-side .plx-txts { min-height: 40px; }
  #pl-comparatif .plx-txt .em { font-size: clamp(17px, 2.1vw, 22px); }
  #pl-comparatif .plx-txt small { display: none; }
  #pl-comparatif .plx-ident .nm { font-size: clamp(15px, 1.7vw, 20px); }
  #pl-comparatif .plx-stage { gap: clamp(6px, 1vh, 12px); }
  .cmp-heads > div { padding: 6px 16px; }
  .cmp-row > div { padding: 5px 14px; }
  .cmp-row .txt { font-size: clamp(11px, 0.95vw, 12.5px); }
}

/* ---------- REPLI — html.plx-flat / reduced-motion : tableau complet figé lisible ---------- */
html.plx-flat .cmp-stage { transform: none !important; opacity: 1 !important; }
html.plx-flat .cmp-rows { opacity: 1 !important; }
html.plx-flat .cmp-row { opacity: 1 !important; transform: none !important; }
html.plx-flat .cmp-row .txt { opacity: 1 !important; }
html.plx-flat .cmp-c-pl .ic { transform: none !important; }
/* jauge d'écart : posée statiquement sous le tableau */
html.plx-flat .cmp-gap { position: static; inset: auto; opacity: 1 !important; background: none; padding: 34px 0 8px; }
html.plx-flat .cmp-bar .track { height: clamp(120px, 30vw, 180px); }
html.plx-flat .cmp-bar.pl .track b { height: 100%; }
/* punchline : posée statiquement en fin */
html.plx-flat .cmp-punch { position: static; inset: auto; opacity: 1 !important; transform: none !important; padding: 40px 0 8px; }
html.plx-flat #pl-comparatif .plx-steps { position: static; transform: none; justify-content: center; margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .cmp-punch.glitching h2 .em { animation: none !important; }
  .cmp-row, .cmp-c-pl .ic, .cmp-bar.pl .track b { transition: none !important; }
}