/* ============================================================
   MDJLABS — ProLearn · scène « Autonome par conception » (PL11)
   Rapatrié de l'atelier Claude Design. L'ENTITÉ CONTINUE = la BOÎTE
   ProLearn. État 1 « utile seul » : la boîte, seule dans son enceinte,
   voit ses 5 capacités s'allumer une à une dès J1 (badges 0 dépendance
   / prêt J1 / sans conduite du changement). État 2 « branché à votre
   SI » : la MÊME boîte s'ouvre et se réduit en HUB ; des connecteurs
   nommés (SSO, SCORM/xAPI/cmi5, API, exports, automatisations) se
   branchent un à un, les flux circulent, le hub pulse.
   Identité produit = teal --pl. Couche d'intégration = phosphore --acc.
   ⚠️ Le bloc `.plx-rail button.is-here { --acc }` de l'atelier a été
   RETIRÉ (non scopé → il repeindrait le marqueur actif de TOUTES les
   scènes de la page assemblée). Le rail reste géré par prolearn-scroll.
   ============================================================ */

/* ============================================================
   VIZ — conteneur iso 3D, entité continue (boîte → hub)
   ============================================================ */
.au-viz { position: relative; aspect-ratio: 900 / 560; max-height: 66vh; width: 100%; margin: 0 auto; perspective: 1500px; }
.au-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform: rotateX(8deg) rotateZ(0deg); transform-origin: 50% 48%; will-change: transform; }
.au-svg.alive { animation: audrift 15s var(--ease) infinite alternate; }
@keyframes audrift { from { transform: rotateX(10deg) rotateZ(-1.1deg); } to { transform: rotateX(6deg) rotateZ(1.1deg); } }

/* -- enceinte « seul dans sa boîte » (état 1) -- */
.au-enclosure { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 3 6; }
.au-enclabel { font-family: var(--ff-mono); fill: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase; }

/* -- la boîte ProLearn (le héros continu) -- */
.au-shell { fill: var(--bg-1); stroke: var(--pl); stroke-width: 2; filter: drop-shadow(0 0 16px var(--pl-glow)); }
.au-hdr { font-family: var(--ff-mono); fill: var(--pl); text-anchor: middle; font-weight: 600; letter-spacing: 0.1em; }
.au-sub { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: middle; letter-spacing: 0.12em; text-transform: uppercase; }
.au-div { stroke: var(--line); stroke-width: 1.2; }

/* -- check-list de capacités (état 1) -- */
.au-box { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: 1.5; transition: none; }
.au-box.on { fill: var(--pl-soft); stroke: var(--pl); filter: drop-shadow(0 0 7px var(--pl-glow)); }
.au-check { font-family: var(--ff-mono); fill: var(--pl); text-anchor: middle; font-weight: 700; opacity: 0; }
.au-check.on { opacity: 1; }
.au-rt { font-family: var(--ff-sans); fill: var(--fg-2); font-weight: 500; letter-spacing: -0.01em; }
.au-rt.on { fill: var(--fg-0); }
.au-tag { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: end; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; }
.au-tag.on { fill: var(--pl); opacity: 1; }

/* -- badges (état 1) -- */
.au-badge-r { fill: color-mix(in oklab, var(--bg-2) 90%, transparent); stroke: var(--line); stroke-width: 1.2; }
.au-badge-r.hero { fill: var(--pl-soft); stroke: var(--pl-line); }
.au-badge-r.hero.on { stroke: var(--pl); filter: drop-shadow(0 0 9px var(--pl-glow)); }
.au-badge-t { font-family: var(--ff-mono); fill: var(--fg-2); text-anchor: middle; letter-spacing: 0.06em; }
.au-badge-t.hero { fill: var(--fg-3); }
.au-badge-t.hero.on { fill: var(--pl); }

/* -- hub (état 2) : lueur qui pulse (vie en boucle = CSS) -- */
.au-hubglow { fill: var(--pl); opacity: 0; transform-box: fill-box; transform-origin: center; animation: aupulse 2.8s var(--ease) infinite; }
@keyframes aupulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* -- connecteurs vers le SI (état 2) -- */
.au-conn { fill: none; stroke: var(--acc-line); stroke-width: 2; stroke-linecap: round; }
.au-conn.on { stroke: var(--acc); filter: drop-shadow(0 0 5px var(--acc-glow)); }
/* flux de données : paquet qui circule (pathLength=100 → normalisé) */
.au-flow { fill: none; stroke: var(--acc); stroke-width: 3.2; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px var(--acc-glow)); }
.au-flow.live { opacity: 1; stroke-dasharray: 5 95; animation: auflow 1.5s linear infinite; }
@keyframes auflow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* prise qui s'enclenche */
.au-plug { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.au-plug.on { opacity: 1; filter: drop-shadow(0 0 6px var(--acc-glow)); }

/* -- systèmes du SI (cibles nommées, état 2) -- */
.au-node-r { fill: var(--bg-1); stroke: var(--acc-line); stroke-width: 1.5; }
.au-node-r.on { stroke: var(--acc); filter: drop-shadow(0 0 8px var(--acc-glow)); }
.au-node-t { font-family: var(--ff-sans); fill: var(--fg-0); font-weight: 600; text-anchor: middle; letter-spacing: -0.01em; }
.au-node-d { font-family: var(--ff-mono); fill: var(--acc); text-anchor: middle; letter-spacing: 0.08em; text-transform: uppercase; }

/* ============================================================
   OVERLAY HTML — bandeau généraliste (rotation multi-publics)
   ============================================================ */
.au-ex { position: absolute; left: 2%; top: 3%; z-index: 3; display: flex; align-items: center; gap: 10px; pointer-events: none; width: max-content; max-width: 92%;
  border: 1px solid var(--pl-line); border-radius: var(--r-sm); background: color-mix(in oklab, var(--bg-1) 74%, transparent); backdrop-filter: blur(6px); padding: 7px 13px; }
.au-ex .k { font-family: var(--ff-mono); font-size: clamp(8px, .82vw, 10px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.au-ex .roll { position: relative; height: 1.4em; min-width: clamp(184px, 22vw, 260px); }
.au-ex .roll span { position: absolute; left: 0; right: 0; top: 0; font-family: var(--ff-mono); font-size: clamp(11px, 1.15vw, 14px); font-weight: 600; letter-spacing: 0.01em; color: var(--pl); opacity: 0; transform: translateY(7px); transition: opacity .45s var(--ease), transform .45s var(--ease); white-space: nowrap; }
.au-ex .roll span.on { opacity: 1; transform: none; }

/* 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 : écran au-dessus, texte dessous, anim conservée
   ============================================================ */
@media (max-width: 960px) {
  .au-viz { max-height: 44vh; }
  #pl-autonomie .au-ex .k { display: none; }
}
@media (max-width: 960px) and (max-height: 720px) {
  .au-viz { max-height: 38vh; }
}

/* ============================================================
   REPLI — html.plx-flat / reduced-motion : composite figé lisible,
   la boîte + ses capacités ET les connecteurs vers le SI, sans scrub.
   ============================================================ */
html.plx-flat .au-svg { animation: none !important; transform: none !important; position: static; width: 100%; height: clamp(340px, 82vw, 500px); }
html.plx-flat .au-hubglow, html.plx-flat .au-flow { animation: none !important; }
html.plx-flat .au-viz { aspect-ratio: auto; max-height: none; height: auto; margin-bottom: 22px; display: flex; flex-direction: column; }
html.plx-flat .au-ex { position: static; width: 100%; box-sizing: border-box; margin-top: 10px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .au-svg, .au-hubglow, .au-flow { animation: none !important; }
}