/* ============================================================ MDJLABS — ATELIER · scène de référence « Suivi & pilotage » (PL9) Une SEULE scène (#pl-suivi), épinglée, scrubée, réversible. Le module de stats est UNE entité continue qui se construit en 3 états (piloté par scene-suivi.js via --tp) : 1. la vue cohorte (le groupe) → 2. du groupe à l'individu (zoom, notions triées par statut) → 3. prêt pour l'audit (export généré). Réutilise la coquille .plx-* de prolearn-scroll + chrome atelier. Base : tokens + site + v2 + brand + v3 + v4 + v5 + socle + home-v7 + prolearn-scroll (coquille) + CE fichier. N.B. tokens de statut scopés sur #pl-suivi (le assemblé n'a pas la classe .suxx de l'atelier autonome). ============================================================ */ /* ---- statuts de notion (tokens locaux, theme-aware) ---- */ #pl-suivi { --crit: #FF7E7E; --crit-glow: rgba(255,126,126,.26); --crit-soft: rgba(255,126,126,.10); --crit-line: rgba(255,126,126,.36); --watch: var(--pf); --watch-glow: var(--pf-glow); --watch-soft: var(--pf-soft); --watch-line: var(--pf-line); --ok: var(--pl); --ok-glow: var(--pl-glow); --ok-soft: var(--pl-soft); --ok-line: var(--pl-line); } html[data-theme="light"] #pl-suivi { --crit: #C63A33; --crit-glow: rgba(198,58,51,.20); --crit-soft: rgba(198,58,51,.07); --crit-line: rgba(198,58,51,.32); } /* ---- 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: 640px) { .atx-top .by, .atx-tag { display: none; } } /* ---- rail : marqueur « Suivi » 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(38px, 7vw, 100px); 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(--pl); text-shadow: 0 0 48px var(--pl-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; } /* ============================================================ VIZ « SUIVI » — surdimensionnée, iso 3D CSS, entité continue ============================================================ */ .sux-viz { position: relative; aspect-ratio: 900 / 560; max-height: 66vh; width: 100%; margin: 0 auto; perspective: 1500px; } .sux-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotateX(8deg) rotateY(calc((1 - var(--ep, 1)) * -13deg)) translateY(calc((1 - var(--ep, 1)) * 4%)); transform-origin: 50% 46%; opacity: clamp(0, calc(var(--ep, 1) * 1.5), 1); will-change: transform, opacity; } /* vie en boucle = CSS uniquement (le scroll ne pilote QUE la construction) */ @keyframes suxdrop { 0%,100% { opacity: .55; } 50% { opacity: 1; } } @keyframes suxglow { 0%,100% { opacity: .5; } 50% { opacity: 1; } } @keyframes suxexp { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes suxsheen { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(320%); } } /* --- classes SVG (tokens uniquement — theme-aware) --- */ /* cohorte : cartes candidats */ .sux-card { fill: var(--bg-1); stroke: var(--pl-line); stroke-width: 1.4; } .sux-card.drop { stroke: var(--crit-line); } .sux-card.focus { stroke: var(--pl); stroke-width: 2; } .sux-focusring { fill: none; stroke: var(--pl); stroke-width: 1.6; stroke-dasharray: 5 5; filter: drop-shadow(0 0 8px var(--pl-glow)); } .sux-av { fill: var(--bg-3); stroke: var(--line-strong); stroke-width: 1; } .sux-av.drop { fill: var(--crit-soft); stroke: var(--crit-line); } .sux-nm { fill: var(--line-strong); } .sux-ptrack { fill: var(--bg-3); } .sux-pfill { fill: var(--pl); filter: drop-shadow(0 0 5px var(--pl-glow)); } .sux-pfill.drop { fill: var(--crit); filter: drop-shadow(0 0 5px var(--crit-glow)); } .sux-pip { fill: var(--pl); } .sux-pip.drop { fill: var(--crit); } .sux-card.lit.drop { animation: suxdrop 1.7s var(--ease) infinite; } .sux-pip.lit.drop { animation: suxdrop 1.7s var(--ease) infinite; } /* KPI (cohorte) */ .sux-kbox { fill: var(--bg-2); stroke: var(--line); stroke-width: 1.2; } .sux-kv { font-family: var(--ff-mono); fill: var(--fg-0); text-anchor: middle; font-weight: 600; font-feature-settings: "tnum","zero"; } .sux-kv.acc { fill: var(--pl); } .sux-kv.acc.lit { animation: suxglow 2.4s var(--ease) infinite; } .sux-kl { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: middle; letter-spacing: 0.08em; } .sux-alert { font-family: var(--ff-mono); fill: var(--crit); text-anchor: middle; letter-spacing: 0.08em; } .sux-alert.lit { animation: suxdrop 1.7s var(--ease) infinite; } /* profil individuel */ .sux-panel { fill: color-mix(in oklab, var(--bg-1) 92%, transparent); stroke: var(--pl-line); stroke-width: 1.5; } .sux-pav { fill: var(--crit-soft); stroke: var(--crit-line); stroke-width: 1.6; } .sux-pname { font-family: var(--ff-sans); fill: var(--fg-0); font-weight: 600; text-anchor: start; } .sux-prole { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: start; letter-spacing: 0.08em; } .sux-pstat-v { font-family: var(--ff-mono); fill: var(--fg-0); text-anchor: middle; font-weight: 600; font-feature-settings: "tnum"; } .sux-pstat-l { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: middle; letter-spacing: 0.06em; } .sux-colh { font-family: var(--ff-mono); text-anchor: start; letter-spacing: 0.1em; } .sux-colh.crit { fill: var(--crit); } .sux-colh.watch { fill: var(--watch); } .sux-colh.ok { fill: var(--ok); } .sux-coldot { } .sux-coldot.crit { fill: var(--crit); } .sux-coldot.watch { fill: var(--watch); } .sux-coldot.ok { fill: var(--ok); } /* puces de notion (persistantes profil → lignes de document) */ .sux-chip-bg { fill: var(--bg-2); stroke: var(--line); stroke-width: 1; } .sux-chip-tick.crit { fill: var(--crit); } .sux-chip-tick.watch { fill: var(--watch); } .sux-chip-tick.ok { fill: var(--ok); } .sux-chip-t { font-family: var(--ff-sans); fill: var(--fg-1); text-anchor: start; font-size: 12px; } .sux-chip-v { fill: var(--line-strong); } .sux-chip-v.acc { fill: var(--pl); } /* document / export (état 3) */ .sux-sheet { fill: color-mix(in oklab, var(--bg-1) 96%, transparent); stroke: var(--line-strong); stroke-width: 1.4; } .sux-sheet-edge { fill: none; stroke: var(--pl-line); stroke-width: 1.4; } .sux-sheet-h { font-family: var(--ff-mono); fill: var(--fg-1); text-anchor: start; letter-spacing: 0.1em; font-weight: 600; } .sux-sheet-sub { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: start; letter-spacing: 0.08em; } .sux-colcap { font-family: var(--ff-mono); fill: var(--fg-3); text-anchor: middle; letter-spacing: 0.08em; } .sux-rule { stroke: var(--line); stroke-width: 1; } .sux-exwrap { transform-box: fill-box; transform-origin: center; } .sux-exwrap.ready { animation: suxexp 2s var(--ease) infinite; } .sux-exbtn { fill: var(--pl); } .sux-exbtn-t { font-family: var(--ff-mono); fill: var(--fg-inv); text-anchor: middle; letter-spacing: 0.12em; font-weight: 600; } .sux-fmt { fill: var(--bg-2); stroke: var(--pl-line); stroke-width: 1; } .sux-fmt-t { font-family: var(--ff-mono); fill: var(--pl); text-anchor: middle; letter-spacing: 0.08em; } .sux-qtie { font-family: var(--ff-mono); fill: var(--fg-2); text-anchor: middle; letter-spacing: 0.06em; } .sux-qtie tspan { fill: var(--pl); } /* ---- overlay HTML : intitulés de cohorte multi-domaines (état 1) ---- */ .sux-ex { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; pointer-events: none; width: min(90%, 560px); } .sux-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); } .sux-ex .roll { position: relative; height: clamp(28px, 4.2vh, 40px); width: 100%; } .sux-ex .roll span { position: absolute; left: 0; right: 0; top: 0; font-size: clamp(16px, 2.1vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); opacity: 0; transform: translateY(9px); transition: opacity .5s var(--ease), transform .5s var(--ease); text-wrap: balance; } .sux-ex .roll span.on { opacity: 1; transform: none; } .sux-ex .roll span b { color: var(--pl); font-weight: 600; } .sux-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; } /* ---- 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: 64ch; text-wrap: pretty; } .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(--pl); border-color: var(--pl-line); background: var(--pl-soft); } .atx-outro-links a:hover { color: var(--fg-0); border-color: var(--line-strong); } .atx-outro-links a.pri:hover { color: var(--pl); border-color: var(--pl); } .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 { 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) { .sux-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; } .plx-cap { display: none; } .sux-ex { top: 0; } .sux-ex .roll span { font-size: clamp(14px, 4vw, 20px); } .sux-ex .foot { display: none; } } @media (max-width: 960px) and (max-height: 720px) { .sux-viz { max-height: 32vh; } .plx-txt small { display: none; } } /* ============================================================ REPLI — html.plx-flat / reduced-motion : module figé lisible, 3 temps empilés (accroches), pas de scrub. Rendu = état 2 (profil). ============================================================ */ html.plx-flat .sux-svg { animation: none !important; transform: none !important; position: static; width: 100%; height: clamp(300px, 74vw, 460px); opacity: 1 !important; } html.plx-flat .sux-card.lit.drop, html.plx-flat .sux-pip.lit.drop, html.plx-flat .sux-alert.lit, html.plx-flat .sux-kv.acc.lit, html.plx-flat .sux-exwrap.ready { animation: none !important; } html.plx-flat .sux-viz { aspect-ratio: auto; max-height: none; height: auto; margin-bottom: 24px; display: flex; flex-direction: column; } html.plx-flat .sux-ex { position: static; transform: none; width: 100%; margin: 0 0 8px; } html.plx-flat .sux-ex .roll { height: auto; } html.plx-flat .sux-ex .roll span { position: static; opacity: 1 !important; transform: none !important; display: none; } html.plx-flat .sux-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) { .sux-svg { animation: none !important; } .sux-card.lit.drop, .sux-pip.lit.drop, .sux-alert.lit, .sux-kv.acc.lit, .sux-exwrap.ready { animation: none !important; } .atx-tag i, .atx-cue .dsc svg { animation: none !important; } }