/* ============================================================
   MDJLABS — ATELIER · scène « Ciblage du besoin & boucle de
   remédiation » (PL6). UNE seule scène (#pl-remediation),
   épinglée, scrubée, réversible. Le parcours et la boucle sont
   UNE entité continue construite par atelier-remediation.js via
   --tp — jamais des visuels qui se remplacent.
   Chrome (.atx-top/.atx-intro/.atx-outro/.plx-rail/.atx-ex) et
   coquille .plx-* : réutilisés d'atelier-atome.css + prolearn-scroll.css.
   Base : tokens + site + v2 + brand + v3 + v4 + v5 + socle + home-v7
   + prolearn-scroll + atelier-atome (chrome) + CE fichier (viz).
   ============================================================ */

/* alerte : couleur fixe, theme-aware (le vert phosphore reste le succès) */
:root { --rem-warn: #F27A5B; --rem-warn-glow: rgba(242,122,91,.5); --rem-warn-soft: rgba(242,122,91,.15); --rem-warn-line: rgba(242,122,91,.55); }
html[data-theme="light"] { --rem-warn: #C4492A; --rem-warn-glow: rgba(196,73,42,.35); --rem-warn-soft: rgba(196,73,42,.1); --rem-warn-line: rgba(196,73,42,.5); }

/* ---- conteneur viz : iso 3D, geste d'entrée piloté par --ep ---- */
.rem-viz { position: relative; aspect-ratio: 900 / 560; max-height: 66vh; width: 100%; margin: 0 auto; perspective: 1500px;
  transform: rotateY(calc(-11deg + var(--ep, 1) * 11deg)) translateY(calc((1 - var(--ep, 1)) * 5%)); transform-origin: left center;
  opacity: clamp(0, calc(var(--ep, 1) * 1.6), 1); }
.plx-scene.flip .rem-viz { transform: rotateY(calc(11deg - var(--ep, 1) * 11deg)) translateY(calc((1 - var(--ep, 1)) * 5%)); transform-origin: right center; }
.rem-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotateX(9deg); transform-origin: 50% 48%; will-change: transform; }
.rem-svg.alive { animation: remdrift 15s var(--ease) infinite alternate; }
@keyframes remdrift { from { transform: rotateX(11deg) rotateZ(-1.1deg); } to { transform: rotateX(6.5deg) rotateZ(1.1deg); } }

/* vie en boucle = CSS uniquement (le scroll ne pilote QUE la construction) */
@keyframes remwarn { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.13); } }
@keyframes remflow { to { stroke-dashoffset: -22; } }
@keyframes rembob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes remspark { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---- parcours principal (chaîne d'atomes) ---- */
.rem-bond { stroke: var(--pl-line); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.rem-bond.dim { stroke: var(--line-strong); }
.rem-bond.done { stroke: var(--pl); filter: drop-shadow(0 0 6px var(--pl-glow)); }
.rem-atom { fill: var(--bg-1); stroke: var(--pl-line); stroke-width: 2; }
.rem-atom.done { fill: var(--pl-soft); stroke: var(--pl); }
.rem-albl { font-family: var(--ff-mono); font-size: 13px; fill: var(--fg-2); text-anchor: middle; font-weight: 600; font-feature-settings: "tnum"; }
.rem-albl.done { fill: var(--pl); }

/* atome faible : normal → alerte (rouge) → réparé (vert) */
.rem-weak-glow { fill: var(--rem-warn); opacity: 0; }
.rem-weak { fill: var(--bg-1); stroke: var(--pl-line); stroke-width: 2.4; }
.rem-alert { fill: none; stroke: var(--rem-warn); stroke-width: 1.8; transform-box: fill-box; transform-origin: center; opacity: 0; }
.rem-alert.live { animation: remwarn 1.8s var(--ease) infinite; }
.rem-weaklbl { font-family: var(--ff-mono); font-size: 19px; fill: var(--fg-2); text-anchor: middle; font-weight: 700; }

/* candidat : chevron qui progresse sur le parcours */
.rem-cand { fill: var(--acc); filter: drop-shadow(0 0 8px var(--acc-glow)); transform-box: fill-box; transform-origin: center; }
.rem-cand.live { animation: rembob 2.4s var(--ease) infinite; }

/* ---- panneau de stats (état 1) ---- */
.rem-stats-bg { fill: var(--bg-1); stroke: var(--pl-line); stroke-width: 1.4; }
.rem-stats-hd { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.14em; fill: var(--pl); text-anchor: start; }
.rem-stats-lbl { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.06em; fill: var(--fg-3); text-anchor: start; text-transform: uppercase; }
.rem-avg { font-family: var(--ff-mono); font-size: 15px; fill: var(--fg-1); text-anchor: end; font-weight: 600; font-feature-settings: "tnum"; }
.rem-avg-strike { stroke: var(--rem-warn); stroke-width: 2; stroke-linecap: round; }
.rem-need { font-family: var(--ff-mono); font-size: 13px; fill: var(--rem-warn); text-anchor: end; font-weight: 700; }
.rem-need-dot { fill: var(--rem-warn); }
.rem-signal { stroke: var(--pl-line); stroke-width: 1.4; fill: none; stroke-dasharray: 4 7; }
.rem-signal.live { animation: remflow 1.1s linear infinite; }
.rem-point { stroke: var(--rem-warn); stroke-width: 1.6; fill: none; stroke-dasharray: 4 4; }

/* ---- question qui coince (déclencheur, état 2) ---- */
.rem-qcard { fill: var(--bg-1); stroke: var(--rem-warn-line); stroke-width: 1.5; }
.rem-qcard-hd { font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.1em; fill: var(--rem-warn); text-anchor: start; }
.rem-opt { fill: var(--bg-2); stroke: var(--line); stroke-width: 1; }
.rem-opt.bad { fill: var(--rem-warn-soft); stroke: var(--rem-warn); }
.rem-opt-t { font-family: var(--ff-mono); font-size: 8px; fill: var(--fg-2); text-anchor: start; }
.rem-x { stroke: var(--rem-warn); stroke-width: 2; stroke-linecap: round; }

/* ---- la boucle de remédiation ---- */
.rem-loop { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--acc-glow)); }
.rem-loop-ghost { fill: none; stroke: var(--acc-line); stroke-width: 2.4; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .5; }
.rem-milestone { fill: var(--bg-1); stroke: var(--acc); stroke-width: 1.6; }
.rem-milestone.done { fill: var(--pl-soft); stroke: var(--pl); filter: drop-shadow(0 0 8px var(--pl-glow)); }
.rem-mlbl { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.04em; fill: var(--fg-2); text-anchor: middle; }
.rem-mlbl.done { fill: var(--pl); }
.rem-check { stroke: var(--pl); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rem-pip { fill: none; stroke: var(--acc-line); stroke-width: 1.2; }
.rem-pip.on { fill: var(--acc); stroke: var(--acc); }
.rem-play { fill: var(--acc); filter: drop-shadow(0 0 7px var(--acc-glow)); }

/* ---- indicateur de difficulté (descend puis remonte) ---- */
.rem-diff-axis { stroke: var(--line-strong); stroke-width: 1.4; }
.rem-diff-tick { stroke: var(--line); stroke-width: 1; }
.rem-diff-lbl { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.1em; fill: var(--fg-3); text-anchor: middle; text-transform: uppercase; }
.rem-diff-end { font-family: var(--ff-mono); font-size: 8.5px; fill: var(--fg-3); text-anchor: start; }
.rem-diff-mark { fill: var(--acc); filter: drop-shadow(0 0 8px var(--acc-glow)); }
.rem-diff-trace { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .7; }

/* légende sous le parcours */
.rem-cap { position: static; margin-top: 12px; }

/* ============================================================
   RESPONSIVE — mobile : écran au-dessus, texte dessous, anim conservée
   ============================================================ */
@media (max-width: 960px) {
  .rem-viz { max-height: 38vh; }
  .plx-pin { padding: 64px 0 58px; }
  .plx-stage { gap: 16px; }
  .plx-side .plx-txts { min-height: clamp(120px, 22vh, 180px); }
  .plx-txt { font-size: clamp(17px, 4.6vw, 26px); }
  .plx-txt small { font-size: clamp(12px, 3.4vw, 14.5px); margin-top: 10px; }
}
@media (max-width: 960px) and (max-height: 720px) {
  .rem-viz { max-height: 30vh; }
  .plx-txt small { display: none; }
}
@media (min-width: 961px) and (max-height: 820px) {
  .rem-viz { max-height: 54vh; }
}

/* ============================================================
   REPLI — html.plx-flat / reduced-motion : boucle dessinée
   statique + lisible, 3 temps empilés en liste, pas de scrub.
   ============================================================ */
html.plx-flat .rem-svg { animation: none !important; transform: none !important; position: static; width: 100%; height: clamp(320px, 74vw, 460px); }
html.plx-flat .rem-viz { aspect-ratio: auto; max-height: none; height: auto; margin-bottom: 26px; transform: none !important; opacity: 1 !important; perspective: none; }
html.plx-flat .rem-svg .rem-alert, html.plx-flat .rem-svg .rem-cand, html.plx-flat .rem-svg .rem-signal { animation: none !important; }
html.plx-flat .plx-txt small { color: var(--fg-1); }

@media (prefers-reduced-motion: reduce) {
  .rem-svg, .rem-alert, .rem-cand, .rem-signal { animation: none !important; }
}