/* Généré par scripts/rejeu/importer.mjs depuis graphe_reseau.html. Ne pas modifier à la main. */
:root{
  --bg:#080c12; --panel:#0e141d; --panel2:#131b27; --line:#1e2a3a; --line2:#2a3a4f;
  --text:#d6dee8; --muted:#8193a8; --faint:#56677c; --accent:#38bdf8;
  --legit:#94a3b8; --nr:#64748b; --ecarte:#7c8594; --susp:#f59e0b; --comp:#ef4444; --halo:#e879f9;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow:hidden}
button,input{font:inherit;color:inherit}
a{color:var(--accent)}
.mono{font-family:var(--mono)}
#app{display:grid;grid-template-rows:auto auto 1fr auto;height:100vh}

/* En-tête */
header{display:flex;align-items:center;gap:20px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.titre h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.02em}
.titre p{margin:2px 0 0;color:var(--muted);font-size:12px}
.horloge{margin-left:auto;text-align:right}
.horloge .h{font:600 24px/1 var(--mono);color:#e6f6ff;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.horloge .d{color:var(--muted);font-size:11px;margin-top:3px}
.gravite{border:1px solid var(--comp);color:#fecaca;background:rgba(239,68,68,.12);border-radius:4px;padding:5px 10px;
  font-weight:700;letter-spacing:.08em;font-size:12px;max-width:340px}
.gravite small{display:block;font-weight:400;letter-spacing:0;color:#fca5a5;font-size:11px;margin-top:2px;line-height:1.3}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:4px;padding:5px 10px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn:focus-visible,.chip:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Phases */
#phases{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--line);background:#0b1119;overflow-x:auto}
.phase{flex:1 1 0;min-width:96px;border:1px solid var(--line);border-radius:4px;padding:5px 8px;cursor:pointer;
  background:transparent;text-align:left;color:var(--faint);position:relative}
.phase .n{font-size:11.5px;font-weight:600;white-space:nowrap}
.phase .t{font:10.5px var(--mono)}
.phase.done{color:var(--muted);border-color:var(--line2)}
.phase.current{color:#fff;border-color:var(--comp);background:linear-gradient(180deg,rgba(239,68,68,.22),rgba(239,68,68,.06))}
.phase.current.p-normale{border-color:var(--legit);background:rgba(148,163,184,.12)}
.phase.current.p-spraying{border-color:var(--susp);background:rgba(245,158,11,.16)}

/* Zone principale */
main{display:grid;grid-template-columns:1fr 380px;min-height:0}
#stage{position:relative;min-width:0;min-height:0;border-right:1px solid var(--line)}
#graph{width:100%;height:100%;display:block;cursor:grab}
#graph:active{cursor:grabbing}
.toolbar{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;pointer-events:none}
.toolbar>*{pointer-events:auto}
.search{display:flex;align-items:center;gap:6px;background:rgba(14,20,29,.92);border:1px solid var(--line2);border-radius:4px;padding:3px 8px}
.search input{background:transparent;border:0;outline:none;width:150px;padding:2px 0}
.search span{color:var(--muted);font-size:11px}
.chips{display:flex;gap:3px;background:rgba(14,20,29,.92);border:1px solid var(--line2);border-radius:4px;padding:3px}
.chip{border:1px solid transparent;border-radius:3px;background:transparent;padding:2px 7px;cursor:pointer;font-size:11.5px;
  display:inline-flex;align-items:center;gap:5px;color:var(--text)}
.chip.off{opacity:.38;text-decoration:line-through}
.chip:hover{border-color:var(--line2)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.zoombar{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:4px}
.zoombar .btn{width:30px;height:30px;padding:0}
#hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--muted);pointer-events:none;
  background:rgba(14,20,29,.85);border:1px solid var(--line2);border-radius:6px;padding:14px 18px}
#hint b{color:var(--text)}
#d3err{position:absolute;inset:40% 10% auto;text-align:center;color:#fecaca}

/* Légende */
#legend{position:absolute;left:10px;bottom:10px;z-index:2;background:rgba(14,20,29,.94);border:1px solid var(--line2);border-radius:6px;
  padding:6px 10px;font-size:11.5px;max-width:calc(100% - 70px)}
#legend summary{cursor:pointer;color:var(--muted);font-weight:600;list-style:none}
#legend summary::before{content:"▸ ";} #legend[open] summary::before{content:"▾ ";}
.lg{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.lg-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}
.lg h4{margin:0;width:64px;font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.lg div:not(.lg-row){display:flex;align-items:center;gap:5px;white-space:nowrap}
.lg svg{flex:none}

/* SVG */
.zone{stroke-width:1;stroke-dasharray:6 6}
.zone.ext{fill:rgba(239,68,68,.035);stroke:rgba(239,68,68,.25)}
.zone.int{fill:rgba(56,189,248,.025);stroke:rgba(56,189,248,.18)}
.zone-label{font:600 11px var(--mono);letter-spacing:.18em;fill:var(--faint)}
.edge{transition:opacity .35s}
.edge .hit{stroke:transparent;stroke-width:12;fill:none;cursor:pointer}
.edge .line{fill:none;stroke-width:1.6;pointer-events:none}
.edge.k-echec .line{stroke-dasharray:5 4}
.edge.k-cible .line{stroke-dasharray:2 4;stroke-width:1.1;opacity:.6}
.edge.k-hote .line{stroke-dasharray:1 3;stroke-width:1.2;opacity:.75}
.edge.k-lateral .line{stroke-width:4.5;stroke-dasharray:12 7;animation:flow .7s linear infinite;stroke:var(--comp)!important}
@keyframes flow{to{stroke-dashoffset:-19}}
.edge.s-legitime .line{stroke:#4f5f73}
.edge.s-non_retenu .line{stroke:var(--nr)}
.edge.s-ecarte .line{stroke:#5d6570}
.edge.s-suspect .line{stroke:var(--susp)}
.edge.s-compromis .line{stroke:var(--comp)}
.edge.sel .line{stroke-width:3}
.edge.k-lateral.sel .line{stroke-width:6}
.count{font:600 10.5px var(--mono);fill:#fde68a;paint-order:stroke;stroke:var(--bg);stroke-width:3;text-anchor:middle;pointer-events:none;transition:opacity .35s}
.hidden{opacity:0!important;pointer-events:none!important}
.dim{opacity:.12}
.node{cursor:pointer;transition:opacity .35s}
.node .shape{stroke-width:2;fill:#1a2432;stroke:var(--legit);transition:fill .4s,stroke .4s}
.node .dc-ring{fill:none;stroke-width:1.2;stroke:var(--legit);opacity:.7}
.node .glyph{font:700 8.5px var(--mono);fill:#c5d1de;text-anchor:middle;pointer-events:none}
.node .label{font-size:11px;fill:var(--text);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;pointer-events:none}
.node.s-suspect .shape{fill:#3a2808;stroke:var(--susp)}
.node.s-suspect .dc-ring{stroke:var(--susp)}
.node.s-compromis .shape{fill:#3d1012;stroke:var(--comp);filter:drop-shadow(0 0 5px rgba(239,68,68,.75))}
.node.s-compromis .dc-ring{stroke:var(--comp)}
.node.s-ecarte .shape{fill:#1d2026;stroke:var(--ecarte)}
.node.s-ecarte .label,.node.s-non_retenu .label{fill:var(--muted)}
.node.s-non_retenu .shape{fill:#141a22;stroke:var(--nr);stroke-dasharray:3 2}
.node.sel .shape{stroke-width:3.5}
.node.match .label{fill:#7dd3fc;font-weight:700}
.node .halo{fill:none;stroke:var(--halo);stroke-width:2;opacity:0;pointer-events:none}
.node.cleared .halo{opacity:1;animation:halo 1.6s ease-in-out infinite}
.node .halo-label{font:700 9.5px var(--mono);fill:var(--halo);text-anchor:middle;opacity:0;paint-order:stroke;stroke:var(--bg);stroke-width:3px;pointer-events:none}
.node.cleared .halo-label{opacity:1}
@keyframes halo{0%,100%{stroke-opacity:.95;stroke-width:2}50%{stroke-opacity:.3;stroke-width:5}}
.node .body{transform-box:fill-box;transform-origin:center}
.node.flash .body{animation:pop .7s ease-out}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.45)}100%{transform:scale(1)}}
.pulse{pointer-events:none}
.pulse.s-legitime{fill:#bae6fd;filter:drop-shadow(0 0 4px #38bdf8)}
.pulse.s-suspect{fill:#fde68a;filter:drop-shadow(0 0 5px #f59e0b)}
.pulse.s-compromis{fill:#fecaca;filter:drop-shadow(0 0 6px #ef4444)}
.pulse.s-ecarte,.pulse.s-non_retenu{fill:#cbd5e1;filter:drop-shadow(0 0 3px #94a3b8)}

/* Colonne latérale */
#side{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.side-h{display:flex;align-items:baseline;justify-content:space-between;padding:10px 12px 8px;border-bottom:1px solid var(--line)}
.side-h h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.side-h span{font:11px var(--mono);color:var(--muted)}
#feed{list-style:none;margin:0;padding:4px 0;overflow-y:auto;flex:1}
.ev{display:grid;grid-template-columns:58px 36px 1fr auto;gap:6px;padding:5px 12px;border-left:3px solid transparent;cursor:pointer;font-size:12px;align-items:start}
.ev:hover{background:var(--panel2)}
.ev.future{display:none}
.ev .tm{font:11.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.ev .id{font:600 10.5px var(--mono);border:1px solid var(--line2);border-radius:3px;text-align:center;padding:0 2px;color:var(--muted)}
.ev .ds{word-break:break-word}
.ev .mk{font:700 11px var(--mono);color:var(--comp)}
.ev.s-suspect{border-left-color:var(--susp)}
.ev.s-suspect .id{color:var(--susp);border-color:rgba(245,158,11,.5)}
.ev.s-compromis{border-left-color:var(--comp);background:rgba(239,68,68,.06)}
.ev.s-compromis .id{color:#fecaca;border-color:rgba(239,68,68,.6)}
.ev.s-ecarte,.ev.s-non_retenu{color:var(--muted)}
.ev.current{background:rgba(56,189,248,.1);box-shadow:inset 0 0 0 1px rgba(56,189,248,.35)}

/* Panneau de détail */
#panel{position:absolute;inset:0;background:var(--panel);transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;z-index:3;border-left:1px solid var(--line2)}
#panel.open{transform:none}
#panel-body{overflow-y:auto;padding:12px 14px 24px;flex:1}
.ph{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ph h3{margin:0;font-size:15px;overflow-wrap:anywhere;flex:1}
.ph .sub{color:var(--muted);font-size:12px;margin-top:2px}
.x{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.pill{display:inline-block;border-radius:10px;padding:1px 8px;font-size:11px;font-weight:600;border:1px solid}
.pill.s-legitime{color:#cbd5e1;border-color:#475569;background:rgba(148,163,184,.1)}
.pill.s-non_retenu{color:#94a3b8;border-color:#475569;border-style:dashed}
.pill.s-ecarte{color:#cbd5e1;border-color:#6b7280;background:rgba(107,114,128,.18)}
.pill.s-suspect{color:#fde68a;border-color:var(--susp);background:rgba(245,158,11,.14)}
.pill.s-compromis{color:#fecaca;border-color:var(--comp);background:rgba(239,68,68,.16)}
.sec{margin-top:14px}
.sec h4{margin:0 0 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0;word-break:break-word}
ul.lst{list-style:none;margin:0;padding:0}
ul.lst li{padding:4px 0;border-bottom:1px solid var(--line)}
ul.lst li.future{opacity:.35}
.why{color:var(--muted);font-size:12px;margin-top:2px}
.tag{display:inline-block;font:600 10.5px var(--mono);border:1px solid var(--line2);border-radius:3px;padding:0 4px;margin:0 3px 3px 0;color:var(--text);text-decoration:none}
a.tag:hover{border-color:var(--accent)}
.prio{font:700 10px var(--mono);letter-spacing:.06em;padding:1px 5px;border-radius:3px;margin-right:4px}
.prio.p0{background:rgba(239,68,68,.2);color:#fecaca} .prio.p1{background:rgba(245,158,11,.18);color:#fde68a} .prio.p2{background:rgba(56,189,248,.14);color:#bae6fd}
.vt{border:1px solid rgba(239,68,68,.4);border-radius:6px;padding:10px;background:rgba(239,68,68,.05)}
.vt .big{font:700 20px var(--mono);color:#fecaca}
.bar{display:flex;height:8px;border-radius:3px;overflow:hidden;margin:6px 0 4px;background:var(--line)}
.bar i{display:block;height:100%}
.legend-bar{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--muted)}
a.rel{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--muted);cursor:pointer}
a.rel:hover{color:var(--accent)}
table.evt{width:100%;border-collapse:collapse;font-size:11.5px}
table.evt th{text-align:left;color:var(--faint);font-weight:600;padding:3px 4px;border-bottom:1px solid var(--line2)}
table.evt td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:top}
table.evt tr.future{opacity:.35}
table.evt td.mono{white-space:nowrap}

/* Contrôles */
footer{display:flex;align-items:center;gap:12px;padding:8px 16px;border-top:1px solid var(--line);background:var(--panel)}
.play{width:38px;height:32px;font-size:15px}
.seg{display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
.seg button{background:transparent;border:0;padding:5px 10px;cursor:pointer;font:600 12px var(--mono)}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--accent);color:#04121c}
.slider{position:relative;flex:1;height:34px}
.ticks{position:absolute;left:8px;right:8px;top:0;height:12px}
.ticks i{position:absolute;top:0;width:2px;height:10px;background:#4f5f73;transform:translateX(-1px)}
.ticks i.s-suspect{background:var(--susp)} .ticks i.s-compromis{background:var(--comp);height:12px}
.ticks i.s-ecarte,.ticks i.s-non_retenu{background:#5d6570}
.ticks b{position:absolute;top:-2px;height:14px;border-left:1px dashed rgba(255,255,255,.25)}
#scrub{position:absolute;left:0;right:0;bottom:0;width:100%;margin:0;accent-color:var(--accent);cursor:pointer}

/* Fenêtre de contrôle des données */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:10;padding:16px}
#modal.open{display:flex}
#modal .box{background:var(--panel);border:1px solid var(--line2);border-radius:8px;max-width:820px;width:100%;max-height:88vh;overflow:auto;padding:16px 18px}
#modal h3{margin:0 0 4px;font-size:15px}
#modal table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}
#modal th,#modal td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top}
#modal th{color:var(--faint)}
.etat-ok{color:#86efac;font-weight:700} .etat-ecart{color:#fca5a5;font-weight:700} .etat-info{color:#93c5fd;font-weight:700}
#tip{position:fixed;pointer-events:none;background:#0b1220;border:1px solid var(--line2);border-radius:4px;padding:6px 8px;font-size:12px;
  z-index:20;max-width:300px;display:none;box-shadow:0 6px 18px rgba(0,0,0,.5)}

@media (max-width:980px){
  html,body{overflow:auto}
  #app{height:auto}
  main{grid-template-columns:1fr;grid-template-rows:62vh 50vh}
  #stage{border-right:0;border-bottom:1px solid var(--line)}
  header{flex-wrap:wrap}
  .horloge{margin-left:0}
  footer{flex-wrap:wrap}
  .slider{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .edge.k-lateral .line,.node.cleared .halo,.node.flash .body{animation:none}
}

/* Accessibilité (portfolio) */
:root { --faint: #75869b; }