/* Composant « éditeur de flux » d'Arkhame (flux.js) — styles.
   Le composant ne définit aucune couleur de marque : il lit les variables de la page.
   Variables requises : --fond, --surface, --surface-2, --texte, --texte-2, --texte-3, --accent, --accent-texte,
   --sur-accent, --ligne, --ligne-2, --ligne-accent, --rayon, --rayon-bouton, --titre-police, --texte-police, --facile,
   --bascule, --toile-fond, --grille, --noeud-fond, --noeud-trait, --noeud-nom, --noeud-sous, --lien, --lien-chaud,
   --cadre-fond, --cadre-trait, --cadre-texte, --av-fond, --av-anneau, --av-trait, --av-accent, --av-ep, --av-police.
   Le bouton d'approbation reprend la classe .bouton de la page. Les variantes par univers (html[data-univers])
   ne servent qu'à la page des agents ; une étude de cas peut s'en passer. */

.flux{display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-areas:"toile console";height:clamp(680px,86vh,920px);border:1px solid var(--ligne);border-radius:calc(var(--rayon) + 4px);overflow:hidden;background:var(--surface)}
html[data-univers="intense"] .flux{box-shadow:0 40px 120px -40px #000,0 0 0 1px #F7A94414 inset}
html[data-univers="epure"] .flux{box-shadow:0 30px 80px -50px #17171640}
.toile{grid-area:toile;position:relative;overflow:hidden;background:var(--toile-fond);touch-action:none;cursor:grab}
.toile.glisse{cursor:grabbing}
.graphe{width:100%;height:100%;user-select:none;-webkit-user-select:none}
.grille-point{fill:var(--grille)}

.cadre-fond{fill:var(--cadre-fond);stroke:var(--cadre-trait);stroke-dasharray:4 5}
.cadre-nom{font:600 12px var(--texte-police);letter-spacing:.14em;text-transform:uppercase;fill:var(--cadre-texte)}

.lien{fill:none;stroke:var(--lien);stroke-width:1.3;transition:stroke .4s,stroke-width .4s,opacity .4s}
.lien.est-chaud{stroke:var(--lien-chaud);stroke-width:1.8}
.graphe.est-focalise .lien:not(.est-chaud){opacity:.35}

.particule{fill:var(--accent)}
html[data-univers="epure"] .particule{fill:#f8aa44}
.trace-lueur{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;opacity:.16}
.trace{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
html[data-univers="epure"] .trace{stroke:#171716;stroke-width:1.8}
html[data-univers="epure"] .trace-lueur{stroke:#f8aa44;opacity:.35;stroke-width:7}
.paquet-coeur{fill:#fff}
.paquet-halo{fill:var(--accent);opacity:.45}
html[data-univers="epure"] .paquet-coeur{fill:#171716}
html[data-univers="epure"] .paquet-halo{fill:#f8aa44;opacity:.6}

.noeud{cursor:pointer;outline:none;transition:opacity .5s ease}
.noeud .n-corps{transition:transform .35s var(--facile);transform-box:fill-box;transform-origin:center}
.noeud:hover .n-corps,.noeud:focus-visible .n-corps{transform:translateY(-2px)}
.n-carte{fill:var(--noeud-fond);stroke:var(--noeud-trait);stroke-width:1;transition:stroke .35s,fill .35s}
.noeud:hover .n-carte,.noeud:focus-visible .n-carte{stroke:var(--accent)}
.noeud:focus-visible .n-carte{stroke-width:2.5}
html[data-univers="epure"] .noeud:focus-visible .n-carte{stroke:#171716;stroke-width:2.5}
.n-halo{fill:none;stroke:var(--accent);stroke-width:10;opacity:0;transition:opacity .5s}
.n-nom{font:700 17px var(--titre-police);fill:var(--noeud-nom);letter-spacing:.02em}
html[data-univers="intense"] .n-nom{text-transform:uppercase;font-weight:800;font-size:18px}
.n-nom.n-nom-long{font-size:14.5px}
html[data-univers="intense"] .n-nom.n-nom-long{font-size:15px}
html[data-univers="epure"] .n-nom{font-weight:500;letter-spacing:-.01em}
.n-sous{font:400 13px var(--texte-police);fill:var(--noeud-sous)}
.n-port{fill:var(--noeud-fond);stroke:var(--noeud-trait);stroke-width:1.2}
.n-etat{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:respire 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.n-aura{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}
.noeud.est-actif .n-halo{opacity:.3}
.noeud.est-actif .n-carte{stroke:var(--accent);stroke-width:2}
.noeud.est-actif .n-aura{animation:onde 1.4s var(--facile) 1}
.noeud.est-allume .n-halo{opacity:.12}
.noeud.est-allume .n-carte{stroke:var(--ligne-accent)}
.noeud.est-attente .n-halo{animation:attente 1.2s ease-in-out infinite}
.graphe.est-scenario .noeud:not(.est-allume):not(.est-actif){opacity:.62}
.graphe.est-focalise .noeud:not(.est-proche){opacity:.62}
@keyframes respire{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes onde{0%{opacity:.45;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
@keyframes attente{0%,100%{opacity:.12}50%{opacity:.5}}

.toile-outils{position:absolute;right:16px;top:16px;display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--ligne)}
.toile-outils button,.lecteur button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid transparent;background:none;transition:background-color .25s,border-color .25s,transform .25s}
.toile-outils button:hover,.lecteur button:hover{border-color:var(--ligne-accent);background:var(--surface-2)}
.toile-outils svg,.lecteur svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flux [data-infobulle]{position:relative}
.flux [data-infobulle]::after{content:attr(data-infobulle);position:absolute;z-index:6;top:calc(100% + 10px);right:0;padding:7px 11px;border-radius:8px;
  background:var(--texte);color:var(--fond);font:500 12px/1.25 var(--texte-police);letter-spacing:0;text-transform:none;white-space:nowrap;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.flux .lecteur [data-infobulle]::after{top:auto;bottom:calc(100% + 10px);right:auto;left:0;transform:translateY(4px)}
.flux [data-infobulle]:hover::after,.flux [data-infobulle]:focus-visible::after{opacity:1;transform:none}
@media (hover:none){.flux [data-infobulle]:hover::after{opacity:0}}
.toile-aide{position:absolute;left:14px;bottom:12px;max-width:calc(100% - 28px);padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--ligne);font-size:12px;color:var(--texte-2);pointer-events:none}

.approbation{position:absolute;left:50%;bottom:26px;width:min(440px,calc(100% - 36px));transform:translateX(-50%);padding:20px 22px 18px;border-radius:var(--rayon);
  background:var(--surface);border:1px solid var(--accent);box-shadow:0 24px 60px -20px #0009;display:grid;gap:10px;justify-items:start}
html[data-univers="epure"] .approbation{box-shadow:0 24px 60px -30px #17171655}
.approbation:not([hidden]){animation:monte .55s var(--facile)}
.approbation-reserve{font:600 11px/1.4 var(--texte-police);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texte)}
.approbation-texte{font-size:15px;color:var(--texte)}
.approbation-note{font-size:12px;color:var(--texte-2)}
.bouton-approuver{min-height:46px;padding:12px 22px}
.bouton-approuver.est-fait{pointer-events:none;background:var(--surface-2);color:var(--texte);border-color:var(--accent)}
@keyframes monte{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* Console */
.console{grid-area:console;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--ligne);background:var(--surface)}
.scenarios{display:grid;gap:6px;padding:16px 16px 10px}
.scenario{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;text-align:left;padding:11px 12px;border-radius:10px;border:1px solid transparent;background:none;transition:border-color .3s,background-color .3s}
.scenario:hover{background:var(--surface-2);border-color:var(--ligne)}
.scenario[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-2)}
.scenario-num{grid-row:span 2;font:600 11px/1.6 var(--texte-police);color:var(--accent-texte);letter-spacing:.08em;padding-top:1px}
html[data-univers="epure"] .scenario-num{color:var(--texte-2)}
.scenario-titre{font:700 15px/1.25 var(--titre-police);color:var(--texte)}
html[data-univers="intense"] .scenario-titre{text-transform:uppercase;font-weight:800;letter-spacing:.01em}
html[data-univers="epure"] .scenario-titre{font-weight:500;letter-spacing:-.01em}
.scenario-resume{font-size:12.5px;line-height:1.45;color:var(--texte-2);display:none}
.scenario[aria-pressed="true"] .scenario-resume{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.lecteur{display:flex;align-items:center;gap:4px;padding:8px 12px;border-top:1px solid var(--ligne)}
.lecteur-jouer{background:var(--accent)!important;color:var(--sur-accent)}
html[data-univers="epure"] .lecteur-jouer{background:#171716!important;color:#fff}
.lecteur-jouer .icone-pause,.lecteur-jouer.en-cours .icone-jouer{display:none}
.lecteur-jouer.en-cours .icone-pause{display:inline}
.lecteur-jouer .icone-jouer{fill:currentColor;stroke:none}
/* Rond parfait quelle que soit la place disponible, triangle plus visible et centré à l'œil. */
.lecteur-jouer,.lecteur-recommencer{flex:0 0 44px;min-width:44px;aspect-ratio:1}
.lecteur{flex-wrap:wrap;row-gap:6px}
.lecteur-etape{min-width:0}
.lecteur-jouer svg{width:22px;height:22px}
[data-figer] .icone-anime{display:none;fill:currentColor;stroke:none}
[data-figer][aria-pressed="true"] .icone-anime{display:inline}
[data-figer][aria-pressed="true"] .icone-figer{display:none}
.flux.est-fige .n-etat,.flux.est-fige .n-aura,.flux.est-fige .noeud.est-attente .n-halo,.flux.est-en-pause .n-etat{animation-play-state:paused}
.vitesse{display:flex;margin-left:6px;border:1px solid var(--ligne);border-radius:999px;padding:3px}
.vitesse button{width:auto!important;height:44px!important;min-width:44px;padding:0 10px;border-radius:999px!important;font-size:12px;font-variant-numeric:tabular-nums;color:var(--texte-2)}
.vitesse button[aria-checked="true"]{background:var(--surface-2)!important;color:var(--texte);border-color:var(--ligne-accent)!important}
.lecteur-etape{margin-left:auto;white-space:nowrap;font-size:11.5px;color:var(--texte-2);font-variant-numeric:tabular-nums}
.progression{height:2px;background:var(--ligne-2)}
.progression span{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--facile)}
.journal{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 16px 16px}
.journal-tete{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font:600 11px/1.4 var(--texte-police);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);margin-bottom:10px}
.journal-note{letter-spacing:.02em;text-transform:none;font-weight:400}
.journal-liste{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth;mask-image:linear-gradient(180deg,transparent 0,#000 14px)}
.entree{display:grid;grid-template-columns:62px 1fr;gap:2px 10px;padding:9px 6px;border-top:1px solid var(--ligne-2);animation:entree .6s var(--facile)}
.entree-heure{font-size:12px;color:var(--accent-texte);font-variant-numeric:tabular-nums;grid-row:span 2;padding-top:1px}
html[data-univers="epure"] .entree-heure{color:var(--texte-2)}
.entree-qui{font-size:12px;font-weight:600;color:var(--texte)}
.entree-texte{font-size:13px;line-height:1.45;color:var(--texte-2)}
.entree.est-approbation .entree-qui{color:var(--accent-texte)}
html[data-univers="epure"] .entree.est-approbation{background:#fff6e8;border-radius:8px}
html[data-univers="intense"] .entree.est-approbation{background:#F7A94412;border-radius:8px}
.journal-vide{font-size:13px;color:var(--texte-2);padding:8px 0}
@keyframes entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Version pas à pas (mobile) */
.pas-a-pas{display:none}
.pas-liste{list-style:none;margin:0;padding:0;position:relative}
.pas{position:relative;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:0 0 22px;animation:entree .6s var(--facile)}
.pas::before{content:"";position:absolute;left:21.5px;top:46px;bottom:0;width:1px;background:var(--ligne)}
.pas:last-child::before{display:none}
.pas-av{width:44px;height:44px;grid-row:span 3}
.pas-tete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;color:var(--texte-2);font-variant-numeric:tabular-nums}
.pas-tete strong{color:var(--texte);font-weight:600}
.pas-flux{position:relative;display:inline-block;width:34px;height:2px;background:var(--ligne);border-radius:2px;overflow:hidden}
.pas-flux i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:flux var(--duree,1s) var(--facile) forwards}
.pas-texte{font-size:14.5px;line-height:1.5;color:var(--texte)}
.pas .bouton-approuver{justify-self:start;margin-top:8px}
.pas.est-courant .pas-av .avatar{animation:pulse-av 1.6s ease-in-out infinite}
@keyframes flux{to{transform:scaleX(1)}}
@keyframes pulse-av{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- Avatars ---------- */
.avatar{width:100%;height:100%;overflow:visible;color:var(--av-trait)}

/* ---------- Fiche d'agent ---------- */
.fiche{position:fixed;z-index:120;top:calc(var(--barre-h) + 12px);right:12px;bottom:12px;width:min(420px,calc(100vw - 24px));overflow-y:auto;overscroll-behavior:contain;
  padding:26px 26px 30px;border-radius:calc(var(--rayon) + 4px);background:var(--surface);border:1px solid var(--ligne);
  box-shadow:0 40px 100px -30px #000c;display:grid;gap:22px;align-content:start;
  transform:translateX(calc(100% + 24px));opacity:0;transition:transform .55s var(--bascule),opacity .4s ease}
html[data-univers="epure"] .fiche{box-shadow:0 40px 100px -40px #17171666}
html[data-univers="intense"] .fiche{border-color:#F7A94440}
.fiche.est-ouverte{transform:none;opacity:1}
.fiche-fermer{position:absolute;right:14px;top:14px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--ligne);background:var(--surface);transition:border-color .25s,transform .35s var(--facile)}
.fiche-fermer:hover{border-color:var(--accent);transform:rotate(90deg)}
.fiche-fermer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.fiche-tete{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;padding-right:44px}
.fiche-avatar{width:72px;height:72px}
.fiche-groupe{font:600 11px/1.4 var(--texte-police);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texte)}
html[data-univers="epure"] .fiche-groupe{color:var(--texte-2)}
.fiche h2{font-size:34px;line-height:1.05;margin:4px 0 2px;text-transform:none}
html[data-univers="intense"] .fiche h2{text-transform:uppercase}
.fiche-sous{color:var(--texte-2);font-size:14px}
.fiche-role{font-size:15.5px;line-height:1.6;color:var(--texte-3)}
.fiche-bloc h3{font:600 11px/1.4 var(--texte-police);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);margin-bottom:10px}
.puces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.puces li{font-size:12.5px;line-height:1.3;padding:7px 11px;border-radius:999px;border:1px solid var(--ligne);color:var(--texte-3)}
.puces-liens li{padding:0;border:0}
.puces-liens button{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;min-height:36px;border-radius:999px;border:1px solid var(--ligne);background:none;font-size:13px;transition:border-color .25s,background-color .25s}
.puces-liens button:hover{border-color:var(--accent);background:var(--surface-2)}
.puces-liens .mini-av{width:26px;height:26px}
.fiche-routines{margin:0;padding:0 0 0 18px;display:grid;gap:6px;font-size:14px;color:var(--texte-3)}
.fiche-routines li::marker{color:var(--accent)}

@media (max-width:1100px){
  .flux{grid-template-columns:1fr;grid-template-areas:"toile" "console";height:auto}
  .toile{height:600px}
  .console{border-left:0;border-top:1px solid var(--ligne)}
  .scenarios{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .journal{height:320px;flex:none}
}
@media (max-width:760px){
  .flux{grid-template-areas:"toile" "console" "pas";border:0;background:none;box-shadow:none!important;overflow:visible;gap:14px}
  /* Mobile : la carte reste, la caméra suit la demande ; le doigt glisse la carte à l'horizontale, la page défile à la verticale. */
  .toile{display:block;height:min(68vh,460px);border:1px solid var(--ligne);border-radius:var(--rayon);touch-action:pan-y}
  .toile-aide,.approbation{display:none!important}
  .toile-outils{top:10px;right:10px}
  .console{border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden}
  .scenarios{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding:12px;-webkit-overflow-scrolling:touch}
  .scenario{scroll-snap-align:start;border-color:var(--ligne)}
  .scenario-resume{display:block}
  .journal{display:none}
  .pas-a-pas{grid-area:pas;display:block;margin-top:12px}
  .fiche{top:auto;left:0;right:0;bottom:0;width:100%;max-height:84vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .fiche.est-ouverte{transform:none}
  .fiche h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .n-etat{animation:none;opacity:.8}
}