/* ============================================================
   MDJLABS — ATELIER · « L'audit Qualiopi, généré » (scène signature PL10)
   ------------------------------------------------------------
   UNE seule scène (#pl-signature), épinglée, scrubée, réversible.
   Le module de génération d'audit est UNE entité continue qui se
   construit état par état (pilotée par scene-signature.js via --tp) :
     1 · CONTRASTE      la paperasse d'hier ↔ l'audit qui se génère
     2 · ASSEMBLAGE RNQ les preuves volent et se mappent sur les indicateurs
     3 · VALIDATION     l'IA assemble, l'expert valide, on signe
   Jamais 3 visuels qui se remplacent — les classeurs DEVIENNENT les
   preuves qui volent, puis les lignes d'indicateurs validées et signées.
   Bloc accentué (cadre + fond phosphore discret) — moment fort.
   Réutilise la coquille .plx-* de prolearn-scroll.
   Base : tokens + site + v2 + brand + v3 + v4 + v5 + socle + home-v7
   + prolearn-scroll (coquille) + CE fichier.
   Garde-fou : jamais « certifié » — « prépare l'audit / mappé sur le RNQ ».
   ============================================================ */

/* ---- chrome d'atelier : barre supérieure minimale ---- */
.atx-top { position: fixed; left: 0; right: 0; top: 0; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 12px clamp(18px, 3vw, 34px); background: color-mix(in oklab, var(--bg-0) 78%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-weak); }
.atx-top .wm { font-size: clamp(15px, 1.6vw, 19px); letter-spacing: 0.02em; }
.atx-top .by { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.atx-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: clamp(9px, .9vw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); border: 1px solid var(--acc-line); border-radius: var(--r-sm); padding: 5px 10px; }
.atx-tag i { width: 6px; height: 6px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); animation: mpulse 1.8s var(--ease) infinite; }
.atx-top .sp { flex: 1; }
.atx-tbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.atx-tbtn:hover { color: var(--fg-0); border-color: var(--line-strong); }
.atx-tbtn:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.atx-tbtn svg { width: 15px; height: 15px; }
@media (max-width: 620px) { .atx-top .by, .atx-tag { display: none; } }

/* ---- rail : marqueur « Qualiopi » réel + repères fantômes (extensible ~13) ---- */
.plx-rail .ghost { pointer-events: none; }
.plx-rail .ghost .d { width: 6px; height: 6px; opacity: .5; }
.plx-rail .ghost .t { display: none; }
.plx-rail button.is-here .d { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 12px var(--acc-glow); }
.plx-rail button.is-here { color: var(--acc); }
.plx-rail button.is-here .t { opacity: 1; transform: none; }

/* ---- intro (contexte atelier, court) ---- */
.atx-intro { position: relative; z-index: 2; min-height: 84vh; display: flex; align-items: center; padding: clamp(96px, 14vh, 150px) 0 clamp(40px, 6vh, 72px); }
.atx-eyebrow { font-family: var(--ff-mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 clamp(18px, 3vh, 28px); display: inline-flex; align-items: center; gap: 10px; }
.atx-eyebrow b { color: var(--acc); font-weight: 500; }
.atx-intro h1 { font-size: clamp(40px, 7.4vw, 104px); font-weight: 700; letter-spacing: -0.04em; line-height: .94; margin: 0; color: var(--fg-0); text-wrap: balance; }
.atx-intro h1 em { font-style: normal; color: var(--acc); text-shadow: 0 0 48px var(--acc-glow); }
.atx-intro .lede { max-width: 64ch; margin: clamp(22px, 3.4vh, 36px) 0 0; font-size: clamp(15px, 1.6vw, 21px); line-height: 1.55; color: var(--fg-1); text-wrap: pretty; }
.atx-intro .lede b { color: var(--fg-0); font-weight: 600; }
.atx-cue { margin-top: clamp(26px, 4vh, 44px); display: inline-flex; align-items: center; gap: 12px; font-family: var(--ff-mono); font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-1); background: none; border: 0; cursor: pointer; padding: 0; }
.atx-cue:hover { color: var(--acc); }
.atx-cue:focus-visible { outline: none; color: var(--acc); }
.atx-cue .dsc { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--acc-line); display: inline-flex; align-items: center; justify-content: center; color: var(--acc); }
.atx-cue:hover .dsc { background: var(--acc-soft); box-shadow: 0 0 14px -2px var(--acc-glow); }
.atx-cue .dsc svg { animation: plxbob 2.2s var(--ease) infinite; }

/* ============================================================
   BLOC ACCENTUÉ — le module vit dans un cadre phosphore discret
   (c'est un moment fort ; l'accent = phosphore --acc, l'identité PL = teal)
   ============================================================ */
.qlx-chip { color: var(--acc) !important; border-color: var(--acc-line) !important; }
.qlx-chip i { background: var(--acc) !important; box-shadow: 0 0 7px var(--acc-glow) !important; }
.qlx-txt .em { color: var(--acc) !important; text-shadow: 0 0 34px var(--acc-glow) !important; }
.qlx-legend .real { color: var(--acc); }

.qlx-frame { position: relative; border: 1px solid var(--acc-line); border-radius: var(--r-md); background:
    radial-gradient(120% 130% at 8% -10%, var(--acc-soft), transparent 58%), var(--bg-1);
  box-shadow: 0 46px 110px -55px var(--acc-glow), 0 0 0 1px var(--acc-soft);
  padding: clamp(12px, 1.6vw, 20px);
  /* geste d'entrée iso, piloté par --ep posé par le JS */
  transform: perspective(1500px) rotateY(calc(-13deg + var(--ep, 1) * 13deg)) rotateX(calc(5deg - var(--ep, 1) * 5deg)) translateY(calc((1 - var(--ep, 1)) * 5%));
  transform-origin: left center; opacity: clamp(0, calc(var(--ep, 1) * 1.6), 1);
  will-change: transform, opacity; }
html[data-theme="light"] .qlx-frame { box-shadow: 0 30px 76px -42px rgba(20,40,26,.34), 0 0 0 1px var(--acc-soft); }
.qlx-frame .qlx-frame-head { display: flex; align-items: center; gap: 9px; padding: 2px 6px 12px; font-family: var(--ff-mono); font-size: clamp(8.5px, .85vw, 10px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.qlx-frame .qlx-frame-head .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); animation: mpulse 1.8s var(--ease) infinite; flex: none; }
.qlx-frame .qlx-frame-head .sp { flex: 1; }
.qlx-frame .qlx-frame-head .norm { color: var(--acc); }

/* ---- surface SVG : iso 3D CSS + vie en boucle ---- */
.qlx-viz { position: relative; aspect-ratio: 900 / 560; max-height: 60vh; width: 100%; margin: 0 auto; perspective: 1500px; }
.qa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotateX(7deg); transform-origin: 50% 46%; will-change: transform; }
.qa-svg.alive { animation: qadrift 15s var(--ease) infinite alternate; }
@keyframes qadrift { from { transform: rotateX(9deg) rotateZ(-1deg); } to { transform: rotateX(4.5deg) rotateZ(1deg); } }
@keyframes qapulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes qabob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes qascan { 0% { transform: translateX(-8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(360px); opacity: 0; } }
.qa-livedot { animation: qapulse 2.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.qa-scan { animation: qascan 2.6s var(--ease) infinite; }
.qa-pile { animation: qabob 4.2s var(--ease) infinite; transform-box: fill-box; }

/* ---- classes SVG (tokens only — theme-aware) ---- */
.qa-module { fill: color-mix(in oklab, var(--bg-0) 62%, transparent); stroke: var(--acc-line); stroke-width: 1.4; }
.qa-modhead { fill: var(--bg-2); }
.qa-htxt { font-family: var(--ff-mono); fill: var(--fg-2); letter-spacing: 0.1em; }
.qa-htxt.acc { fill: var(--acc); }
.qa-iabar-bg { fill: var(--bg-3); }
.qa-iabar-fill { fill: var(--acc); filter: drop-shadow(0 0 6px var(--acc-glow)); }
.qa-iabar-t { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.08em; }

/* lignes d'indicateurs RNQ */
.qa-row { fill: var(--bg-1); stroke: var(--line); stroke-width: 1.3; transition: none; }
.qa-row.on { fill: var(--acc-soft); stroke: var(--acc-line); }
.qa-ck { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.qa-ck.on { fill: var(--acc); stroke: var(--acc); filter: drop-shadow(0 0 7px var(--acc-glow)); }
.qa-ckmark { stroke: var(--fg-inv); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qa-ind-n { font-family: var(--ff-mono); fill: var(--fg-3); font-weight: 600; letter-spacing: 0.04em; }
.qa-ind-n.on { fill: var(--acc); }
.qa-ind-t { font-family: var(--ff-sans); fill: var(--fg-2); font-weight: 500; }
.qa-ind-t.on { fill: var(--fg-0); }
.qa-status { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.1em; text-anchor: end; }
.qa-status.on { fill: var(--acc); }

/* classeurs / paperasse (état 1, gris, pénible) */
.qa-binder { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: 1.3; }
.qa-binder-tab { fill: var(--bg-4); }
.qa-binder-l { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.02em; }
.qa-fly-dot { fill: var(--acc); filter: drop-shadow(0 0 7px var(--acc-glow)); }

/* compteur temps (3 jours → minutes) */
.qa-count-num { font-family: var(--ff-mono); fill: var(--fg-0); font-weight: 700; text-anchor: start; font-feature-settings: "zero","tnum"; letter-spacing: -0.02em; }
.qa-count-unit { font-family: var(--ff-mono); fill: var(--fg-2); letter-spacing: 0.14em; text-anchor: start; }
.qa-count-cap { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.12em; text-anchor: start; }
.qa-count-cap.acc { fill: var(--acc); }
.qa-zone-l { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.16em; text-anchor: start; }

/* pipeline IA ▸ EXPERT ▸ SIGNÉ (état 3) */
.qa-pip-track { stroke: var(--line-strong); stroke-width: 1.4; }
.qa-pip-track.on { stroke: var(--acc); filter: drop-shadow(0 0 5px var(--acc-glow)); }
.qa-pip { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: 1.4; }
.qa-pip.on { fill: var(--acc-soft); stroke: var(--acc); filter: drop-shadow(0 0 8px var(--acc-glow)); }
.qa-pip-t { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.08em; text-anchor: middle; }
.qa-pip-t.on { fill: var(--acc); }

/* signature tracée + badge */
.qa-sign { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--acc-glow)); }
.qa-sign-base { stroke: var(--line-strong); stroke-width: 1.2; }
.qa-sign-cap { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.08em; text-anchor: start; }
.qa-badge-box { fill: var(--acc-soft); stroke: var(--acc-line); stroke-width: 1.4; }
.qa-badge-box.on { stroke: var(--acc); filter: drop-shadow(0 0 12px var(--acc-glow)); }
.qa-badge-t { font-family: var(--ff-mono); fill: var(--acc); font-weight: 600; letter-spacing: 0.12em; text-anchor: middle; }

/* ---- overlay HTML : généraliste (Qualiopi certifie l'ORGANISME, tous domaines) ---- */
.qa-ex { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; text-align: center; pointer-events: none; width: min(92%, 560px); justify-content: center; flex-wrap: wrap; }
.qa-ex .k { font-family: var(--ff-mono); font-size: clamp(8.5px, .85vw, 10.5px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); background: color-mix(in oklab, var(--bg-1) 72%, transparent); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 10px; }
.qa-ex .k b { color: var(--acc); font-weight: 600; }
.qa-ex .roll { position: relative; height: clamp(16px, 2.2vh, 22px); min-width: 130px; }
.qa-ex .roll span { position: absolute; left: 0; right: 0; top: 0; font-family: var(--ff-mono); font-size: clamp(9px, .95vw, 12px); font-weight: 600; letter-spacing: 0.02em; color: var(--acc); opacity: 0; transform: translateY(7px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.qa-ex .roll span.on { opacity: 1; transform: none; }

/* ---- outro : liens de reprise ---- */
.atx-outro { position: relative; z-index: 2; padding: clamp(56px, 9vh, 110px) 0 clamp(70px, 12vh, 140px); }
.atx-outro-in { max-width: 900px; margin: 0 auto; }
.atx-outro .k { font-family: var(--ff-mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc); display: inline-flex; align-items: center; gap: 10px; }
.atx-outro .k::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 12px var(--acc-glow); }
.atx-outro h2 { font-size: clamp(26px, 4vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; margin: 18px 0 16px; text-wrap: balance; }
.atx-outro p { font-size: clamp(14px, 1.4vw, 18px); line-height: 1.6; color: var(--fg-1); margin: 0 0 clamp(24px, 3.6vh, 36px); max-width: 66ch; text-wrap: pretty; }
.atx-outro p b { color: var(--fg-0); font-weight: 600; }
.atx-outro-links { display: flex; flex-wrap: wrap; gap: 12px; }
.atx-outro-links a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; background: var(--bg-1); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.atx-outro-links a.pri { color: var(--acc); border-color: var(--acc-line); background: var(--acc-soft); }
.atx-outro-links a:hover { color: var(--fg-0); border-color: var(--line-strong); }
.atx-outro-links a.pri:hover { color: var(--acc); border-color: var(--acc); }
.atx-outro-links a .arr { transition: transform var(--dur) var(--ease); }
.atx-outro-links a:hover .arr { transform: translateX(4px); }

/* focus visibles partout */
.plx-step:focus-visible, .plx-rail button:focus-visible, .plx-link:focus-visible, .atx-outro-links a:focus-visible { outline: none; box-shadow: var(--glow-focus); border-radius: var(--r-sm); }

/* ---- responsive : mobile garde l'anim (écran au-dessus, texte dessous) ---- */
@media (max-width: 960px) {
  .qlx-viz { max-height: 40vh; }
  .qlx-frame { transform: none !important; opacity: 1 !important; }
  .plx-pin { padding: 64px 0 58px; }
  .plx-stage { gap: 16px; }
  .plx-side .plx-txts { min-height: clamp(130px, 24vh, 190px); }
  .plx-txt { font-size: clamp(17px, 4.6vw, 26px); }
  .plx-txt small { font-size: clamp(12px, 3.4vw, 14.5px); margin-top: 10px; }
  .plx-cap { display: none; }
  .qa-ex { bottom: -2%; }
}
@media (max-width: 960px) and (max-height: 720px) {
  .qlx-viz { max-height: 32vh; }
  .plx-txt small { display: none; }
}

/* ============================================================
   REPLI — html.plx-flat / reduced-motion : module figé lisible
   (audit résolu : lignes AUTO + ✓ + signé), 3 temps empilés.
   ============================================================ */
html.plx-flat .qa-svg { animation: none !important; transform: none !important; position: static; width: 100%; height: clamp(320px, 76vw, 460px); }
html.plx-flat .qa-livedot, html.plx-flat .qa-scan, html.plx-flat .qa-pile { animation: none !important; }
html.plx-flat .qlx-viz { aspect-ratio: auto; max-height: none; height: auto; display: flex; flex-direction: column; }
html.plx-flat .qlx-frame { transform: none !important; opacity: 1 !important; }
html.plx-flat .qa-ex { position: static; transform: none; width: 100%; margin: 10px 0 0; }
html.plx-flat .qa-ex .roll { height: auto; }
html.plx-flat .qa-ex .roll span { position: static; opacity: 1 !important; transform: none !important; display: none; }
html.plx-flat .qa-ex .roll span.flat-on { display: block; }
html.plx-flat .plx-txt small { color: var(--fg-1); }
html.plx-flat .atx-intro { min-height: auto; }

@media (prefers-reduced-motion: reduce) {
  .qa-svg, .qa-livedot, .qa-scan, .qa-pile { animation: none !important; }
  .atx-tag i, .atx-cue .dsc svg, .qlx-frame .qlx-frame-head .dot { animation: none !important; }
}