/* ============================================================
   MDJLABS — ATELIER · scène de référence « L'atome de connaissance »
   Une SEULE scène (#pl-atome), épinglée, scrubée, réversible.
   L'atome est UNE entité continue qui se construit état par état
   (pilotée par scene-atome.js via --tp) — jamais 4 visuels qui
   se remplacent. Réutilise la coquille .plx-* de prolearn-scroll.
   ============================================================ */

/* ============================================================
   VIZ DE L'ATOME — surdimensionnée, iso 3D CSS, entité continue
   ============================================================ */
.plx-atom-viz { position: relative; aspect-ratio: 900 / 560; max-height: 66vh; width: 100%; margin: 0 auto; perspective: 1500px; }
.atx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform: rotateX(9deg) rotateZ(0deg); transform-origin: 50% 46%; will-change: transform; }
.atx-svg.alive { animation: atxdrift 13s var(--ease) infinite alternate; }
@keyframes atxdrift { from { transform: rotateX(11deg) rotateZ(-1.4deg); } to { transform: rotateX(6.5deg) rotateZ(1.4deg); } }
/* vie en boucle = CSS uniquement (le scroll ne pilote QUE la construction, via rAF ponctuel) */
@keyframes atxpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes atxspin { to { transform: rotate(360deg); } }
@keyframes atxbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes atxring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.atx-orbits { animation: atxspin 26s linear infinite; transform-box: view-box; transform-origin: 450px 244px; }
.atx-nuc-pulse { animation: atxpulse 2.6s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.atx-vbob { animation: atxbob 3.6s var(--ease) infinite; transform-box: fill-box; }
.atx-confort { animation: atxring 3s var(--ease) infinite; transform-box: view-box; transform-origin: 452px 450px; }

/* classes SVG de l'atome (tokens uniquement — theme-aware) */
.atx-orbit { fill: none; stroke: var(--pl-line); stroke-width: 1.4; }
.atx-nuc-glow { fill: var(--pl); opacity: .14; }
.atx-nuc { fill: var(--pl-soft); stroke: var(--pl); stroke-width: 2.4; filter: drop-shadow(0 0 18px var(--pl-glow)); }
.atx-nlabel { font-family: var(--ff-mono); fill: var(--pl); text-anchor: middle; font-weight: 600; letter-spacing: 0.06em; }
.atx-ncap { font-family: var(--ff-mono); fill: var(--fg-2); text-anchor: middle; letter-spacing: 0.04em; }
.atx-bond { stroke: var(--pl); stroke-width: 1.6; fill: none; stroke-dasharray: 4 4; filter: drop-shadow(0 0 5px var(--pl-glow)); }
.atx-card { fill: var(--bg-1); stroke: var(--pl-line); stroke-width: 1.5; }
.atx-card.best { stroke: var(--pl); }
.atx-dot { fill: var(--pl); filter: drop-shadow(0 0 8px var(--pl-glow)); }
.atx-icon { font-family: var(--ff-mono); fill: var(--fg-0); text-anchor: middle; font-weight: 600; }
.atx-vlabel { font-family: var(--ff-mono); fill: var(--fg-2); text-anchor: middle; letter-spacing: 0.05em; }
.atx-gbg { fill: var(--bg-3); }
.atx-gfill { fill: var(--pl); filter: drop-shadow(0 0 6px var(--pl-glow)); }
.atx-gtag { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: start; }
.atx-confort { fill: none; stroke: var(--acc); stroke-width: 2; stroke-dasharray: 5 6; filter: drop-shadow(0 0 8px var(--acc-glow)); }
.atx-conflabel { font-family: var(--ff-mono); fill: var(--acc); text-anchor: middle; letter-spacing: 0.1em; }
.atx-axis { stroke: var(--line-strong); stroke-width: 1.4; }
.atx-mnode { fill: var(--bg-1); stroke: var(--line-strong); stroke-width: 1.4; transition: none; }
.atx-mnode.on { stroke: var(--pl); fill: var(--pl-soft); filter: drop-shadow(0 0 9px var(--pl-glow)); }
.atx-mtick { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: middle; letter-spacing: 0.06em; }
.atx-mtick.on { fill: var(--pl); }
.atx-micon { font-family: var(--ff-mono); text-anchor: middle; font-weight: 600; fill: var(--fg-2); }
.atx-micon.on { fill: var(--pl); }
.atx-play { stroke: var(--acc); stroke-width: 2; filter: drop-shadow(0 0 7px var(--acc-glow)); }
.atx-curve-old { fill: none; stroke: var(--fg-3); stroke-width: 1.6; stroke-dasharray: 4 4; }
.atx-curve-new { fill: none; stroke: var(--pl); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--pl-glow)); }
.atx-clabel { font-family: var(--ff-mono); text-anchor: start; }

/* ---- overlay HTML : exemples multi-domaines (état 1) ---- */
.atx-ex { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; pointer-events: none; width: min(88%, 520px); }
.atx-ex .k { font-family: var(--ff-mono); font-size: clamp(9px, .9vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--pl); border: 1px solid var(--pl-line); border-radius: var(--r-sm); padding: 4px 10px; background: color-mix(in oklab, var(--bg-1) 66%, transparent); }
.atx-ex .roll { position: relative; height: clamp(30px, 4.4vh, 42px); width: 100%; }
.atx-ex .roll span { position: absolute; left: 0; right: 0; top: 0; font-size: clamp(17px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); text-wrap: balance; }
.atx-ex .roll span.on { opacity: 1; transform: none; }
.atx-ex .dom { font-family: var(--ff-mono); font-size: clamp(9px, .9vw, 11px); letter-spacing: 0.1em; color: var(--fg-3); min-height: 1.2em; }
.atx-ex .dom b { color: var(--pl); font-weight: 500; }
.atx-ex .foot { font-family: var(--ff-mono); font-size: clamp(8.5px, .85vw, 10px); letter-spacing: 0.06em; color: var(--fg-3); text-wrap: balance; }

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

/* ---- responsive : mobile garde l'anim (schéma au-dessus, texte dessous) ---- */
@media (max-width: 960px) {
  .plx-atom-viz { max-height: 36vh; }
  .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; }
  .plx-cap { display: none; }
  .atx-ex { top: 0; }
  .atx-ex .roll span { font-size: clamp(15px, 4.2vw, 22px); }
  .atx-ex .foot { display: none; }
}
@media (max-width: 960px) and (max-height: 720px) {
  .plx-atom-viz { max-height: 30vh; }
  .plx-txt small { display: none; }
}

/* ============================================================
   REPLI — html.plx-flat / reduced-motion : atome figé lisible,
   4 temps empilés en liste, pas de scrub.
   ============================================================ */
html.plx-flat .atx-svg { animation: none !important; transform: none !important; position: static; width: 100%; height: clamp(300px, 72vw, 440px); }
html.plx-flat .atx-orbits, html.plx-flat .atx-nuc-pulse, html.plx-flat .atx-vbob, html.plx-flat .atx-confort { animation: none !important; }
html.plx-flat .plx-atom-viz { aspect-ratio: auto; max-height: none; height: auto; margin-bottom: 26px; display: flex; flex-direction: column; }
html.plx-flat .atx-ex { position: static; transform: none; width: 100%; margin: 0 0 8px; }
html.plx-flat .atx-ex .roll { height: auto; }
html.plx-flat .atx-ex .roll span { position: static; opacity: 1 !important; transform: none !important; display: none; }
html.plx-flat .atx-ex .roll span.flat-on { display: block; }
html.plx-flat .plx-txt small { color: var(--fg-1); }

@media (prefers-reduced-motion: reduce) {
  .atx-svg, .atx-orbits, .atx-nuc-pulse, .atx-vbob, .atx-confort { animation: none !important; }
}