:root{
  --bg:#0d1117; --grid:#172230; --grid-strong:#1d2c3d;
  --panel:#0f1620; --panel-2:#141d28; --panel-3:#1a2531;
  --line:#243240; --line-2:#2e3f50;
  --text:#e6edf3; --muted:#7d8ea0; --muted-2:#566472;
  --accent:#34d3bf; --accent-d:#1f9e8e; --accent-2:#f0a637; --danger:#f0556b;
  --node:#192531; --node-sel:#1f3140;
  --r:9px;
}
body.light{
  --bg:#eef2f6; --grid:#dde5ee; --grid-strong:#ccd8e5;
  --panel:#ffffff; --panel-2:#f4f7fa; --panel-3:#e9eff5;
  --line:#dde4ec; --line-2:#c4cfdb;
  --text:#1a2433; --muted:#5b6b7c; --muted-2:#8090a0;
  --accent:#0fa392; --accent-d:#0c8576; --accent-2:#c0810f; --danger:#dc3a55;
  --node:#ffffff; --node-sel:#e6f7f3;
}
/* grille de fond pilotée par le thème */
#grid path{stroke:var(--grid)}
#gridBig>path{stroke:var(--grid-strong)}
body.light #topbar{background:linear-gradient(180deg,#ffffff,#f4f7fa)}
body.light #legendBox{background:rgba(255,255,255,.94)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none}
input,select,textarea{font-family:inherit}
::selection{background:var(--accent);color:#04201c}

/* ---- LAYOUT ---- */
#app{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:280px 1fr 300px;
  grid-template-areas:"top top top" "left canvas right" "left status right";height:100vh}
#topbar{grid-area:top}
#left{grid-area:left}
#stage{grid-area:canvas;position:relative;overflow:hidden;background:var(--bg)}
#stage.dropping::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:35;
  box-shadow:inset 0 0 0 2px var(--accent);background:rgba(52,211,191,.06)}
#right{grid-area:right}
#status{grid-area:status}

/* ---- TOPBAR ---- */
#topbar{display:flex;align-items:center;gap:14px;padding:0 16px;height:54px;
  background:linear-gradient(180deg,#121c27,#0f1620);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding-right:14px;border-right:1px solid var(--line)}
.brand.clickable{cursor:pointer;border-radius:8px;transition:opacity .12s}
.brand.clickable:hover{opacity:.78}
.brand .logo{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#062420;flex:none}
.brand .brandmark{width:32px;height:32px;border-radius:0;background:none;
  background-image:url(../assets/netvue.png);background-repeat:no-repeat;background-size:73px auto;background-position:50% 37%}
.brand h1{font-size:16px;font-weight:700;letter-spacing:.3px}
.brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:-2px}
.tools{display:flex;gap:4px}
.tool{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--muted);border:1px solid transparent;transition:.12s}
.tool:hover{background:var(--panel-2);color:var(--text)}
.tool.active{background:rgba(52,211,191,.12);color:var(--accent);border-color:rgba(52,211,191,.3)}
.tool kbd{font-size:10px;padding:1px 5px;border-radius:4px;background:#0008;color:var(--muted-2);
  border:1px solid var(--line);font-family:"JetBrains Mono",monospace}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--muted);
  border:1px solid transparent;transition:.12s}
.iconbtn:hover{background:var(--panel-2);color:var(--text)}
.iconbtn.disabled{opacity:.32;pointer-events:none}
.spacer{flex:1}
.zoomctl{display:flex;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.zoomctl button{width:32px;height:32px;display:grid;place-items:center;color:var(--muted);font-size:15px}
.zoomctl button:hover{background:var(--panel-3);color:var(--text)}
.zoomctl .lvl{min-width:54px;text-align:center;font-size:12px;color:var(--muted);border-left:1px solid var(--line);border-right:1px solid var(--line);height:32px;line-height:32px}
.ghost{height:34px;padding:0 13px;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted);
  border:1px solid var(--line);display:flex;align-items:center;gap:7px;transition:.12s}
.ghost:hover{background:var(--panel-2);color:var(--text);border-color:var(--line-2)}
.ghost.active{background:rgba(52,211,191,.12);color:var(--accent);border-color:rgba(52,211,191,.3)}
.ghost svg{width:15px;height:15px}
.lang-flag{width:18px;height:12px;border-radius:2px;overflow:hidden;display:inline-block;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);line-height:0}
.lang-flag svg{width:100%;height:100%;display:block}
.fb-btn{color:var(--accent);border-color:rgba(52,211,191,.4);background:rgba(52,211,191,.08);font-weight:600}
.fb-btn:hover{color:#04201c;background:var(--accent);border-color:var(--accent)}

/* ---- SIDEBARS ---- */
.side{background:var(--panel);display:flex;flex-direction:column;overflow:hidden}
#left{border-right:1px solid var(--line)}
#right{border-left:1px solid var(--line)}
.tabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.tabs button{flex:1;height:42px;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted-2);border-bottom:2px solid transparent;transition:.12s}
.tabs button:hover{color:var(--muted)}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
#inspector{flex:1;min-height:0;display:flex;flex-direction:column}
.panel-body{flex:1;overflow-y:auto;padding:14px}
.panel-body::-webkit-scrollbar{width:9px}
.panel-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid var(--panel)}
.panel-body::-webkit-scrollbar-thumb:hover{background:var(--line-2)}
.eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted-2);
  font-weight:600;margin:4px 0 10px;display:flex;align-items:center;gap:8px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

/* device palette */
.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dev-btn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);transition:.13s;text-align:center;cursor:grab}
.dev-btn:hover{background:var(--panel-3);border-color:var(--accent-d);transform:translateY(-1px)}
.dev-btn:active{cursor:grabbing;transform:translateY(0)}
.dev-btn .ico{width:30px;height:30px;color:var(--accent)}
.dev-btn span{font-size:11px;font-weight:500;color:var(--muted);line-height:1.2}

/* generic list rows */
.row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);margin-bottom:7px;transition:.12s;cursor:pointer}
.row:hover{border-color:var(--line-2);background:var(--panel-3)}
.row.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.swatch{width:13px;height:13px;border-radius:4px;flex:none}
.row .main{flex:1;min-width:0}
.row .main b{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .main em{font-size:11px;color:var(--muted);font-style:normal}
.row .vid{font-size:11px;color:var(--muted-2);font-weight:600}
.row .act{opacity:0;display:flex;gap:4px;transition:.12s}
.row:hover .act{opacity:1}
.icobtn{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--muted-2)}
.icobtn:hover{background:#0006;color:var(--text)}
.icobtn.del:hover{color:var(--danger)}
.icobtn svg{width:14px;height:14px}

.addbtn{width:100%;height:38px;border-radius:8px;border:1px dashed var(--line-2);color:var(--muted);
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:.13s;margin-top:4px}
.addbtn:hover{border-color:var(--accent);color:var(--accent);background:rgba(52,211,191,.05)}
.addbtn svg{width:15px;height:15px}

.empty{text-align:center;color:var(--muted-2);font-size:12px;padding:24px 12px;line-height:1.6}

/* flow rows */
.flow-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;background:var(--panel-2);
  border:1px solid var(--line);margin-bottom:7px;transition:.12s;cursor:pointer}
.flow-row:hover{border-color:var(--line-2);background:var(--panel-3)}
.flow-row.sel{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2) inset}
.flow-dot{width:8px;height:8px;border-radius:50%;flex:none}
.flow-row .fmain{flex:1;min-width:0}
.flow-row .fmain b{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.flow-row .fmain em{font-size:10.5px;color:var(--muted);font-style:normal;display:block;margin-top:1px}
.tag{font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:5px;text-transform:uppercase}
.tag.allow{background:rgba(74,222,128,.14);color:#6ee7a0}
.tag.deny{background:rgba(240,85,107,.14);color:#ff8a9c}

/* ---- INSPECTOR FORM ---- */
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:500}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;font-size:13px;color:var(--text);transition:.12s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(52,211,191,.12)}
.field input.mono{font-family:"JetBrains Mono",monospace;font-size:12.5px}
.field textarea{resize:vertical;min-height:54px;font-family:inherit}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;border:1px solid var(--line);
  color:var(--muted);cursor:pointer;transition:.12s;display:flex;align-items:center;gap:6px}
.chip .dot{width:9px;height:9px;border-radius:50%}
.chip.on{color:var(--text);border-color:transparent}
.colorpick{display:flex;flex-wrap:wrap;gap:7px}
.colorpick button{width:24px;height:24px;border-radius:6px;border:2px solid transparent;transition:.12s}
.colorpick button.on{border-color:#fff;transform:scale(1.12)}
.insp-head{display:flex;align-items:center;gap:11px;padding:14px;border-bottom:1px solid var(--line)}
.insp-head .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--panel-3);color:var(--accent)}
.insp-head .ic svg{width:20px;height:20px}
.insp-head h3{font-size:14px;font-weight:600}
.insp-head em{font-size:11px;color:var(--muted);font-style:normal}
.btn-row{display:flex;gap:8px;margin-top:6px}
.btn{flex:1;height:36px;border-radius:8px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;transition:.13s}
.btn.primary{background:var(--accent);color:#04201c}
.btn.primary:hover{background:#42e3cf}
.btn.danger-o{border:1px solid var(--line);color:var(--danger)}
.btn.danger-o:hover{background:rgba(240,85,107,.1);border-color:var(--danger)}
.btn svg{width:15px;height:15px}

/* port editor */
.ports{display:flex;flex-direction:column;gap:6px}
.port{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;
  background:var(--bg);border:1px solid var(--line);border-radius:7px}
.port .pn{font-size:11px;color:var(--muted-2);font-family:"JetBrains Mono",monospace;width:34px}
.port select{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:11px;color:var(--text)}
.port .pmode{font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px;background:var(--panel-3);color:var(--muted)}
.port .pmode.trunk{color:var(--accent);background:rgba(52,211,191,.14)}
.port .pmode.acc{color:var(--text);background:var(--panel-3)}
.port.connected{cursor:grab}
.port.connected:hover{border-color:var(--accent-d)}
.port.connected:active{cursor:grabbing}
.port.dragging{opacity:.45}
.port.dragover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.port .pgrip{width:10px;color:var(--muted-2);font-size:12px;line-height:1;text-align:center;flex:none}
.port.free .pgrip{visibility:hidden}
.port .pdev{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;color:var(--text);font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.port .pdevico{flex:none;width:15px;height:15px;color:var(--accent);display:grid;place-items:center}
.port .pdevico svg{width:15px;height:15px}
.port .pfree{font-size:11px;color:var(--muted-2);font-style:italic}
.chip.addv{border-style:dashed;color:var(--accent);border-color:var(--accent-d)}
.chip.addv:hover{background:rgba(52,211,191,.1)}
/* popover « Nouveau VLAN » ancré */
.vlan-pop{position:fixed;z-index:500;width:232px;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:11px;box-shadow:0 18px 50px rgba(0,0,0,.5);padding:12px;animation:ctxin .14s ease}
.vlan-pop .vp-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px}
.vlan-pop .vp-row{display:grid;grid-template-columns:62px 1fr;gap:7px;margin-bottom:9px}
.vlan-pop input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 8px;font-size:12.5px;color:var(--text)}
.vlan-pop input:focus{border-color:var(--accent);outline:none}
.vlan-pop .vp-colors{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.vlan-pop .vp-colors button{width:20px;height:20px;border-radius:5px;border:2px solid transparent;transition:.1s}
.vlan-pop .vp-colors button.on{border-color:#fff;transform:scale(1.1)}
.vlan-pop .vp-actions{display:flex;gap:7px}
.vlan-pop .vp-actions .btn{height:32px;font-size:12.5px}
.vlan-pop .btn.ghost{border:1px solid var(--line);color:var(--muted)}
.vlan-pop .btn.ghost:hover{background:var(--panel-3);color:var(--text)}
/* popover icônes / équipement personnalisé */
.icon-pop{position:fixed;z-index:500;width:268px;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:11px;box-shadow:0 18px 50px rgba(0,0,0,.5);padding:12px;animation:ctxin .14s ease}
.icon-pop .vp-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.icon-pop .cd-name{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 8px;font-size:12.5px;color:var(--text);margin-bottom:8px}
.icon-pop .cd-name:focus{border-color:var(--accent);outline:none}
.icon-pop .cd-base-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted);margin-bottom:9px}
.icon-pop .cd-base{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 6px;font-size:12px;color:var(--text)}
.icon-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-height:180px;overflow-y:auto;margin-bottom:10px}
.icon-grid button{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--bg);transition:.1s}
.icon-grid button:hover{color:var(--text);border-color:var(--accent-d)}
.icon-grid button.on{background:rgba(52,211,191,.16);border-color:var(--accent);color:var(--text)}
.icon-grid button svg{width:18px;height:18px}
.icon-pop .vp-actions{display:flex;gap:7px}
.icon-pop .vp-actions .btn{height:32px;font-size:12.5px}
.icon-pop .btn.ghost{border:1px solid var(--line);color:var(--muted)}
.dev-btn.dev-add{border-style:dashed;color:var(--accent);opacity:.85}
.dev-btn.dev-add .ico{font-size:22px;font-weight:300}
.dev-btn.dev-add:hover{opacity:1;background:rgba(52,211,191,.08)}
/* interfaces VLAN (équipements L3) */
.ifaces{display:flex;flex-direction:column;gap:6px}
.iface{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:center}
.iface .ifv{font-size:11px;font-weight:600;font-family:"JetBrains Mono",monospace;color:var(--muted)}
.iface .ifuse{font-size:10.5px;color:var(--accent);font-weight:600;white-space:nowrap}
.iface .ifuse:hover{text-decoration:underline}

/* ---- STATUS BAR ---- */
#status{display:flex;align-items:center;gap:18px;height:34px;padding:0 16px;background:var(--panel);
  border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
#status .stat{display:flex;align-items:center;gap:6px}
#status .stat b{color:var(--text);font-weight:600;font-family:"JetBrains Mono",monospace}
#status .stat svg{width:13px;height:13px;color:var(--muted-2)}
#status .hint{margin-left:auto;color:var(--muted-2);font-style:italic}

/* ---- SVG STAGE ---- */
#net{width:100%;height:100%;display:block;cursor:default;touch-action:none;
  user-select:none;-webkit-user-select:none;-moz-user-select:none}
.inline-edit{position:absolute;z-index:60;background:var(--panel-3);border:2px solid var(--accent);
  border-radius:8px;color:var(--text);font-family:inherit;font-size:13px;font-weight:600;text-align:center;
  padding:4px 8px;outline:none;box-shadow:0 8px 24px #000a;user-select:text;-webkit-user-select:text}
#net.linking{cursor:crosshair}
#net.panning{cursor:grabbing}
.link{stroke:var(--line-2);stroke-width:2.5;fill:none;stroke-linejoin:round;stroke-linecap:round;transition:stroke .2s,opacity .2s}
.link.trunk{stroke-width:3.5}
.link.vpn{stroke:#a78bfa;stroke-width:2.5;stroke-dasharray:7 5}
.link.dim{opacity:.12}
.linkhit{stroke:transparent;stroke-width:14;fill:none;cursor:pointer}
.link-lbl{font-family:"JetBrains Mono",monospace;font-size:10px;fill:var(--muted);
  paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.node{cursor:grab}
.node-body{fill:var(--node);filter:url(#nodeShadow);transition:fill .15s}
.node-frame{fill:none;stroke:var(--line-2);stroke-width:1.5;transition:stroke .15s}
.node.sel .node-body{fill:var(--node-sel);filter:url(#selGlow)}
.node.sel .node-frame{stroke:var(--accent);stroke-width:2.5}
.node.flag .node-body{filter:drop-shadow(0 0 7px rgba(240,85,107,.7))}
.node.flag .node-frame{stroke:var(--danger);stroke-width:3}
.node.conn .node-body{filter:drop-shadow(0 0 7px rgba(110,168,255,.55))}
.node.conn .node-frame{stroke:#6ea8ff;stroke-width:2.5}
.node.dim{opacity:.22}
.link.flag{stroke:var(--danger)!important;stroke-width:3.5;opacity:1}
.link.conn{stroke-width:3.5;opacity:1}
.node-ico{color:var(--accent);pointer-events:none}
.node-name{font-size:13px;font-weight:600;fill:var(--text);pointer-events:none}
.node-ip{font-family:"JetBrains Mono",monospace;font-size:10px;fill:var(--muted);pointer-events:none}
.node-vbar{pointer-events:none}
.node:hover .node-frame{stroke:var(--accent-d)}
.flow-path{fill:none;stroke-linecap:round;pointer-events:none}
.flow-path.allow{stroke-dasharray:2 9;animation:dash 1s linear infinite}
/* Grosses topologies : on coupe les effets qui forcent un repaint permanent (fluidité + pas de lag des vidéos) */
#net.lowfx .node-body{filter:none}
#net.lowfx .node.sel .node-body{filter:url(#selGlow)}
#net.lowfx .flow-path.allow{animation:none;stroke-dasharray:2 7}
.flow-path.deny{stroke-dasharray:6 5;opacity:.85}
.flow-path.dim{opacity:.08}
.flow-x.dim{opacity:.08}
@keyframes dash{to{stroke-dashoffset:-22}}
.flow-x{font-size:13px;font-weight:700;fill:var(--danger);paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.tmp-link{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 5;fill:none;pointer-events:none}
.lasso{fill:rgba(52,211,191,.08);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4;pointer-events:none}
.gridbg{pointer-events:none}

@media (prefers-reduced-motion:reduce){.flow-path.allow{animation:none}}

/* ---- AUDIT PANEL ---- */
.score-card{background:linear-gradient(160deg,var(--panel-2),var(--panel-3));border:1px solid var(--line);
  border-radius:12px;padding:14px;margin-bottom:14px}
.score-top{display:flex;align-items:center;gap:14px}
.score-ring{width:72px;height:72px;flex:none}
.score-num{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:22px}
.score-meta{flex:1;min-width:0}
.score-label{font-size:14px;font-weight:600}
.score-counts{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.pill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;display:flex;align-items:center;gap:5px}
.pill .pd{width:7px;height:7px;border-radius:50%}
.pill.crit{background:rgba(240,85,107,.16);color:#ff8a9c}
.pill.med{background:rgba(240,166,55,.16);color:#f4b740}
.pill.info{background:rgba(79,157,255,.16);color:#7fb6ff}
.pill.ok{background:rgba(74,222,128,.16);color:#6ee7a0}
.axes{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.axis{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:9px;font-size:11.5px;color:var(--muted)}
.axis .bar{height:7px;border-radius:6px;background:var(--bg);overflow:hidden}
.axis .bar i{display:block;height:100%;border-radius:6px;transition:width .35s}
.axis b{font-family:"JetBrains Mono",monospace;color:var(--text);text-align:right;font-size:11px}
.alert{display:flex;gap:10px;padding:10px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);
  border-left-width:3px;margin-bottom:8px;cursor:pointer;transition:.12s}
.alert:hover{background:var(--panel-3);border-color:var(--line-2)}
.alert.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.alert.crit{border-left-color:var(--danger)}
.alert.med{border-left-color:var(--accent-2)}
.alert.info{border-left-color:#4f9dff}
.alert .sev{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
.alert.crit .sev{background:var(--danger)}.alert.med .sev{background:var(--accent-2)}.alert.info .sev{background:#4f9dff}
.alert .amain{flex:1;min-width:0}
.alert .amain b{font-size:12.5px;font-weight:600;display:block}
.alert .amain em{font-size:11px;color:var(--muted);font-style:normal;display:block;margin-top:2px;line-height:1.45}
.alert .amain .reco{font-size:11px;color:var(--accent);margin-top:5px;display:flex;gap:5px}
.alert .reco svg{width:13px;height:13px;flex:none;margin-top:1px}

/* ---- REPORT MODAL ---- */
#reportModal{position:fixed;inset:0;z-index:300;background:rgba(4,8,12,.72);backdrop-filter:blur(4px);
  display:none;grid-template-columns:320px 1fr}
#reportModal.open{display:grid}
.rm-side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.rm-side .rm-head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.rm-side .rm-head h3{font-size:15px;font-weight:600;flex:1}
.rm-body{flex:1;overflow-y:auto;padding:16px}
.rm-foot{padding:14px 16px;border-top:1px solid var(--line);display:flex;gap:8px}
.rm-preview{overflow:auto;padding:30px;display:flex;justify-content:center;align-items:flex-start}
.check{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:12.5px;color:var(--muted);cursor:pointer}
.check:hover{background:var(--panel-2);color:var(--text)}
.check input{width:15px;height:15px;accent-color:var(--accent)}
.logo-drop{border:1px dashed var(--line-2);border-radius:9px;padding:12px;text-align:center;font-size:12px;
  color:var(--muted);cursor:pointer;transition:.12s}
.logo-drop:hover{border-color:var(--accent);color:var(--accent)}
.logo-drop img{max-height:48px;max-width:100%;display:block;margin:0 auto 6px}

/* report document (also used for print) */
#report{display:none;background:#fff;color:#1a2230;width:210mm;min-height:297mm;padding:18mm 16mm;
  box-shadow:0 20px 60px #000a;font-size:12px;line-height:1.5}
#reportModal.open #report{display:block}
#report h1{font-size:26px;color:#0f1620;margin-bottom:4px}
#report h2{font-size:15px;color:#1f9e8e;margin:22px 0 9px;padding-bottom:5px;border-bottom:2px solid #e2e8f0;
  page-break-after:avoid}
#report .cover{min-height:200mm;display:flex;flex-direction:column}
#report .cover .ctop{flex:1}
#report .cover .logo{max-height:64px;margin-bottom:30px}
#report .cover .big{font-size:40px;font-weight:700;color:#0f1620;line-height:1.1;margin-bottom:8px}
#report .cover .sub{font-size:16px;color:#5b6b7a;margin-bottom:40px}
#report .cover .meta-row{font-size:14px;margin-bottom:6px}
#report .cover .meta-row span{display:inline-block;width:130px;color:#7d8ea0}
#report .cover .brand{border-top:2px solid #1f9e8e;padding-top:12px;color:#5b6b7a;font-size:13px}
#report table{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:11px}
#report th{background:#f1f5f9;text-align:left;padding:6px 8px;font-weight:600;color:#334155;border-bottom:1px solid #cbd5e1}
#report td{padding:5px 8px;border-bottom:1px solid #e2e8f0;vertical-align:top}
#report tr{page-break-inside:avoid}
#report .topo-img{width:100%;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden;background:#0d1117}
#report .topo-img svg{width:100%;height:auto;display:block}
#report .badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700}
#report .badge.crit{background:#fde2e7;color:#be123c}
#report .badge.med{background:#fef3d8;color:#b45309}
#report .badge.info{background:#dbeafe;color:#1d4ed8}
#report .rscore{display:flex;gap:20px;align-items:center;margin:8px 0 14px}
#report .rscore .big{font-size:38px;font-weight:700;font-family:"JetBrains Mono",monospace}
#report .rax{font-size:11px;margin-bottom:4px}
#report .rax .rbar{height:8px;background:#e2e8f0;border-radius:6px;overflow:hidden;margin-top:2px}
#report .rax .rbar i{display:block;height:100%}
.section-break{page-break-before:always}

@media print{
  /* tout masquer sauf le rapport, et remettre le rapport dans le flux normal pour qu'il pagine */
  html,body{height:auto!important;overflow:visible!important}
  #app,#toast,#ctxmenu,#tplModal,#wizModal,#helpModal,#projModal,#reportModal .rm-side{display:none!important}
  #reportModal{position:static!important;display:block!important;inset:auto!important;background:none!important;backdrop-filter:none!important}
  #reportModal .rm-preview{position:static!important;display:block!important;overflow:visible!important;padding:0!important}
  #report{display:block!important;position:static!important;width:auto!important;min-height:0!important;
    padding:0!important;margin:0!important;box-shadow:none!important}
  #report .cover{min-height:0!important}   /* évite que la page de garde déborde sur 2 pages */
  @page{margin:12mm}
}

/* ---- WELCOME / page d'accueil ---- */
#welcomeModal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:radial-gradient(1100px 560px at 50% -8%,rgba(52,211,191,.13),transparent),var(--bg);padding:24px;overflow:auto}
#welcomeModal.open{display:flex}
.wc-card{position:relative;width:min(740px,96vw);text-align:center;padding:22px 30px 30px;animation:ctxin .3s ease}
.wc-close{position:absolute;top:0;left:0;width:34px;height:34px;display:grid;place-items:center;font-size:16px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:9px;transition:.12s}
.wc-close:hover{color:var(--text);background:var(--panel-3)}
.wc-lang{position:absolute;top:0;right:0;display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.wc-lang button{width:44px;height:32px;font-size:12px;font-weight:700;color:var(--muted);transition:.12s}
.wc-lang button.on{background:var(--accent);color:#04201c}
.wc-lang button:not(.on):hover{background:var(--panel-3);color:var(--text)}
.wc-logo-img{width:230px;max-width:64vw;height:auto;margin:-6px auto 0;display:block;
  filter:drop-shadow(0 14px 30px rgba(52,211,191,.22))}
body.light .wc-logo-img{filter:drop-shadow(0 10px 22px rgba(13,148,136,.18))}
.wc-card h1{font-size:42px;font-weight:700;letter-spacing:.5px}
.wc-tag{font-size:16px;color:var(--accent);font-weight:600;margin-top:-42px}
.wc-pitch{font-size:14.5px;color:var(--muted);max-width:540px;margin:14px auto 0;line-height:1.65}
.wc-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px auto;max-width:620px;text-align:left}
.wc-feat{position:relative;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 15px;transition:border-color .13s,transform .13s}
.wc-feat:hover{border-color:var(--accent-d);transform:translateY(-1px);z-index:40}
.wc-feat-row{display:flex;gap:13px;align-items:flex-start}
.wc-feat .wc-ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(52,211,191,.13);color:var(--accent)}
.wc-feat .wc-ic svg{width:20px;height:20px}
.wc-feat b{display:block;font-size:13.5px;margin-bottom:3px}
.wc-feat span{font-size:12px;color:var(--muted);line-height:1.45}
/* aperçu au survol — jaillit sur le côté (extérieur de la colonne) */
.wc-pv{position:absolute;top:50%;width:258px;pointer-events:none;opacity:0;z-index:45;
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.85,.25,1)}
.wc-feat:nth-child(odd) .wc-pv{right:calc(100% + 16px);transform-origin:right center;transform:translateY(-50%) translateX(16px) scale(.95)}
.wc-feat:nth-child(even) .wc-pv{left:calc(100% + 16px);transform-origin:left center;transform:translateY(-50%) translateX(-16px) scale(.95)}
.wc-feat:hover .wc-pv{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
.wc-pv-card{background:var(--panel-3);border:1px solid var(--line-2);border-radius:13px;padding:9px;box-shadow:0 22px 55px rgba(0,0,0,.5)}
.wc-pv-card>svg{display:block;width:100%;height:auto;border-radius:8px}
.wc-pv-cap{margin-top:8px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.35}
/* animations internes des aperçus — rejouées à chaque survol */
.pv-placed{opacity:0}
.pv-link2{opacity:0}
.pv-drag{transform-box:fill-box;transform-origin:center}
.pv-rbar{transform-box:fill-box;transform-origin:bottom}
.pv-badge{transform-box:fill-box;transform-origin:center}
.pv-card,.pv-bar{transform-box:fill-box}
@keyframes pvGhost{
  0%{transform:translate(0,0) scale(1);opacity:0}
  7%{opacity:1}13%{transform:translate(0,0) scale(1.1)}
  55%{transform:translate(-102px,65px) scale(1.1)}
  66%{transform:translate(-102px,65px) scale(1)}
  88%{transform:translate(-102px,65px) scale(1);opacity:1}
  97%{opacity:0}100%{transform:translate(0,0) scale(1);opacity:0}}
@keyframes pvDrop{0%,58%{opacity:0}68%,88%{opacity:1}97%,100%{opacity:0}}
@keyframes pvRing{from{stroke-dashoffset:186}to{stroke-dashoffset:0}}
@keyframes pvBar{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes pvCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pvGrow{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
@keyframes pvLine{from{opacity:0;transform:translateX(8px)}to{opacity:.55;transform:translateX(0)}}
@keyframes pvPop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
.wc-feat:hover .pv-drag{animation:pvGhost 3.4s ease-in-out infinite}
.wc-feat:hover .pv-placed,.wc-feat:hover .pv-link2{animation:pvDrop 3.4s ease-in-out infinite}
.wc-feat:hover .pv-ring{animation:pvRing 1.2s ease-out}
.wc-feat:hover .pv-bar{animation:pvBar .5s ease-out backwards;animation-delay:calc(.25s + var(--d,0)*.13s)}
.wc-feat:hover .pv-card{animation:pvCardIn .55s cubic-bezier(.2,.85,.25,1) backwards;animation-delay:calc(var(--d,0)*.14s)}
.wc-feat:hover .pv-rbar{animation:pvGrow .7s cubic-bezier(.2,.85,.25,1) backwards;animation-delay:calc(.2s + var(--d,0)*.1s)}
.wc-feat:hover .pv-rline{animation:pvLine .5s ease-out backwards;animation-delay:calc(.1s + var(--d,0)*.07s)}
.wc-feat:hover .pv-badge{animation:pvPop .55s cubic-bezier(.2,.85,.25,1) backwards;animation-delay:.75s}
@media(prefers-reduced-motion:reduce){.wc-pv *{animation:none!important}.pv-placed,.pv-link2{opacity:1}}
/* fallback écrans étroits : l'aperçu jaillit vers le centre pour rester visible */
@media(max-width:1180px){
  .wc-feat:nth-child(odd) .wc-pv{right:auto;left:calc(100% + 14px);transform-origin:left center;transform:translateY(-50%) translateX(-16px) scale(.95)}
  .wc-feat:nth-child(even) .wc-pv{left:auto;right:calc(100% + 14px);transform-origin:right center;transform:translateY(-50%) translateX(16px) scale(.95)}
  .wc-feat:hover .wc-pv{transform:translateY(-50%) translateX(0) scale(1)}
}
.wc-cta{display:flex;gap:11px;justify-content:center;margin-top:6px}
.wc-go{flex:none;padding:0 30px;height:46px;font-size:15px;border-radius:10px}
.wc-demo{flex:none;padding:0 22px;height:46px;border:1px solid var(--line-2);color:var(--text);border-radius:10px}
.wc-demo:hover{background:var(--panel-2);border-color:var(--accent-d)}
.wc-foot{margin-top:18px;font-size:11.5px;color:var(--muted-2)}
@media(max-width:620px){
  .wc-feats{grid-template-columns:1fr}.wc-card h1{font-size:34px}
  .wc-feat .wc-pv,.wc-feat:nth-child(odd) .wc-pv,.wc-feat:nth-child(even) .wc-pv{position:relative;top:auto;left:auto;right:auto;width:100%;max-height:0;overflow:hidden;margin:0;transform:none;transition:max-height .28s ease,opacity .22s ease,margin .28s ease}
  .wc-feat:hover .wc-pv{max-height:280px;margin-top:12px;transform:none}
}

/* ---- Infobulle de résumé au survol d'un équipement ---- */
#nodeTip{position:fixed;z-index:350;pointer-events:none;width:212px;background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:10px;box-shadow:0 16px 44px rgba(0,0,0,.5);
  padding:9px 10px;font-size:12px;opacity:0;transition:opacity .1s;display:none}
#nodeTip.show{display:block;opacity:1}
#nodeTip .tip-head{display:flex;gap:8px;align-items:center;margin-bottom:7px}
#nodeTip .tip-ico{width:24px;height:24px;border-radius:6px;flex:none;display:grid;place-items:center;background:var(--panel-3);color:var(--accent)}
#nodeTip .tip-ico svg{width:15px;height:15px}
#nodeTip .tip-head b{font-size:12.5px;display:block;line-height:1.2}
#nodeTip .tip-head em{font-size:10.5px;color:var(--muted);font-style:normal}
#nodeTip .tip-row{display:flex;justify-content:space-between;gap:10px;color:var(--muted);line-height:1.7}
#nodeTip .tip-row b{color:var(--text);font-weight:600}
#nodeTip .mono{font-family:"JetBrains Mono",monospace}
#nodeTip .tip-vlans{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
#nodeTip .tip-vchip{font-size:10px;font-weight:600;padding:2px 6px;border-radius:20px;border:1px solid var(--line);color:var(--text);display:flex;align-items:center;gap:4px}
#nodeTip .tip-vchip .dot{width:7px;height:7px;border-radius:50%}
#nodeTip .tip-notes{margin-top:7px;font-size:11px;color:var(--muted);font-style:italic;line-height:1.4;border-top:1px solid var(--line);padding-top:6px}

/* ---- Exceptions d'audit (risques acceptés) ---- */
.alert{position:relative}
.alert .aign{position:absolute;top:7px;right:7px;width:22px;height:22px;display:grid;place-items:center;
  border-radius:6px;color:var(--muted-2);opacity:0;transition:.12s}
.alert:hover .aign,.alert .aign.show{opacity:1}
.alert .aign:hover{background:var(--panel-3);color:var(--text)}
.alert .aign svg{width:13px;height:13px}
.alert.ignored{opacity:.8}
.alert.ignored .sev{background:var(--muted-2)}
.score-ign{font-size:10.5px;color:var(--muted-2);margin-top:4px}

/* ---- Minimap ---- */
#minimap{position:absolute;right:14px;bottom:14px;z-index:40;width:200px;height:140px;
  background:rgba(15,22,32,.93);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:crosshair;
  box-shadow:0 8px 28px #0008}
body.light #minimap{background:rgba(255,255,255,.94)}
#mmView{position:absolute;border:1.5px solid var(--accent);border-radius:3px;background:rgba(52,211,191,.08);pointer-events:none}
body.present #minimap{display:none!important}

/* motifs daltoniens sur les pastilles de la légende */
body.cb .lg-dot.cb1{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 2px,transparent 2px 5px)}
body.cb .lg-dot.cb2{background-image:radial-gradient(rgba(255,255,255,.65) 1px,transparent 1.4px);background-size:5px 5px}
body.cb .lg-dot.cb3{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1.5px,transparent 1.5px 4.5px)}
body.cb .lg-dot.cb4{background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.45) 0 2px,transparent 2px 5px)}

/* ---- Import CSV & états figés ---- */
.csv-ta{width:100%;box-sizing:border-box;height:180px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text);resize:vertical}
.csv-ta:focus{border-color:var(--accent);outline:none}
.csv-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.csv-preview{font-size:12px;color:var(--accent);font-weight:600}
.snap-score{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:700;flex:none;margin:0 10px}
.snap-delta{margin-top:12px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  font-size:13px;color:var(--muted)}

/* ---- Recherche d'équipement (Ctrl+F) ---- */
.search-pop{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:60;width:min(400px,92%);
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:11px;box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden}
.search-pop .sp-row{display:flex;align-items:center;gap:9px;padding:10px 12px}
.search-pop .sp-row svg{width:15px;height:15px;color:var(--muted-2);flex:none}
.search-pop input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13px}
.search-pop kbd{font-size:9.5px;color:var(--muted-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.search-pop .sp-list{max-height:300px;overflow-y:auto;border-top:1px solid var(--line)}
.search-pop .sp-list:empty{border-top:none}
.sp-item{display:flex;align-items:center;gap:9px;padding:7px 12px;font-size:12.5px;color:var(--muted);cursor:pointer}
.sp-item:hover,.sp-item.on{background:var(--panel-3);color:var(--text)}
.sp-item .sp-ico{width:16px;height:16px;flex:none;color:var(--accent)}
.sp-item .sp-ico svg{width:16px;height:16px}
.sp-item .sp-name{font-weight:600}
.sp-item .sp-meta{margin-left:auto;font-size:10.5px;color:var(--muted-2)}
.sp-item .sp-zone{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted-2);flex:none}
.sp-item .sp-zone .dot{width:8px;height:8px;border-radius:2px}
.sp-empty{padding:10px 12px;font-size:12px;color:var(--muted-2);font-style:italic}

/* indicateur de sauvegarde (barre de statut) */
#st-save{color:var(--muted-2);margin-left:6px}
#st-save.ko{color:var(--danger);font-weight:600}

/* saisie stylée (uiPrompt) */
.ui-prompt-in{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:13px;color:var(--text)}
.ui-prompt-in:focus{border-color:var(--accent);outline:none}

/* ---- Confirmation stylée ---- */
.confirm-modal{z-index:600}
.confirm-msg{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
.hico.hico-danger{color:var(--danger);background:rgba(240,85,107,.12)}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#e0455a}

/* ---- Réglages ---- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-lbl{font-size:13px;font-weight:600;color:var(--text)}
.set-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
.set-row .chips{flex:none}
.set-row .chip{cursor:pointer}
/* disposition des panneaux (réglage) : groupés à gauche / à droite */
/* Docks « groupés » : 2 colonnes seulement — le canvas prend toute la largeur et
   l'inspecteur SURVOLE le canvas quand une sélection existe (pas de reflow, pas de colonne vide). */
body.dock-left #app{grid-template-columns:280px 1fr;grid-template-areas:"top top" "left canvas" "left status"}
body.dock-right #app{grid-template-columns:1fr 280px;grid-template-areas:"top top" "canvas left" "status left"}
body.dock-left #app.hide-left{grid-template-columns:0 1fr}
body.dock-right #app.hide-left{grid-template-columns:1fr 0}
body.dock-right #left{border-right:none;border-left:1px solid var(--line)}
body.dock-left #right,body.dock-right #right{grid-area:canvas;z-index:45;width:300px}
body.dock-left #right{justify-self:start;border-left:none;border-right:1px solid var(--line);box-shadow:26px 0 60px rgba(0,0,0,.45)}
body.dock-right #right{justify-self:end;border-left:1px solid var(--line);box-shadow:-26px 0 60px rgba(0,0,0,.45)}
body.dock-left #app.hide-right #right,body.dock-right #app.hide-right #right{display:none}

/* ---- Mode présentation : canvas seul, plein écran ---- */
body.present #topbar,body.present #left,body.present #right,body.present #status{display:none}
body.present #app{grid-template-columns:0 1fr 0!important;grid-template-areas:"top top top" "left canvas right" "left status right"!important}
#presentExit{display:none;position:absolute;top:14px;right:14px;z-index:70;height:34px;padding:0 14px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;color:var(--muted);font-size:12px;gap:7px;
  box-shadow:0 8px 28px #0008}
#presentExit:hover{color:var(--text);border-color:var(--accent)}
body.present #presentExit{display:flex;align-items:center}
/* édition rapide */
.vlan-pop .qe-name{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 8px;font-size:12.5px;color:var(--text);margin-bottom:8px}
.vlan-pop .qe-name:focus{border-color:var(--accent);outline:none}
.vlan-pop .qe-vl-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.vlan-pop .qe-vlans{margin-bottom:10px;max-height:96px;overflow-y:auto}

/* ---- Changelog / Quoi de neuf ---- */
.cl-rel{padding:2px 0 14px}
.cl-rel+.cl-rel{border-top:1px solid var(--line);padding-top:14px}
.cl-relhead{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.cl-ver{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--accent)}
.cl-date{font-size:11px;color:var(--muted-2)}
.cl-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#04201c;background:var(--accent);padding:2px 7px;border-radius:20px}
.cl-title{font-size:13px;font-weight:600;color:var(--text)}
.cl-list{list-style:none;display:flex;flex-direction:column;gap:7px;padding-left:2px}
.cl-list li{position:relative;padding-left:20px;font-size:12.5px;color:var(--muted);line-height:1.5}
.cl-list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.cl-rel:not(.latest) .cl-list li,.cl-rel:not(.latest) .cl-ver{color:var(--muted-2)}
.cl-rel:not(.latest) .cl-list li::before{color:var(--muted-2)}

/* ---- GENERIC MODAL (templates / wizard) ---- */
.modal{position:fixed;inset:0;z-index:300;background:rgba(4,8,12,.74);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:28px}
.modal.open{display:flex}
.modal-card{background:var(--panel);border:1px solid var(--line-2);border-radius:15px;
  box-shadow:0 28px 80px #000c;width:min(980px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;gap:13px;padding:17px 22px;border-bottom:1px solid var(--line)}
.modal-head .hico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:rgba(52,211,191,.12);color:var(--accent)}
.modal-head .hico svg{width:19px;height:19px}
.modal-head h2{font-size:17px;font-weight:600}
.modal-head .sub{font-size:12px;color:var(--muted);margin-top:1px}
.modal-head .grow{flex:1}
.x-close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:15px;flex:none}
.x-close:hover{background:var(--panel-2);color:var(--text)}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-body::-webkit-scrollbar{width:9px}
.modal-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid var(--panel)}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.modal-foot .grow{flex:1}

/* projects modal */
.proj-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);margin-bottom:8px;cursor:pointer;transition:.12s}
.proj-row:hover{border-color:var(--line-2);background:var(--panel-3)}
.proj-row.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.proj-row .pmain{flex:1;min-width:0}
.proj-row .pmain b{font-size:13.5px;font-weight:600;display:block}
.proj-row .pmain em{font-size:11.5px;color:var(--muted);font-style:normal}
.proj-row .pact{display:flex;gap:4px;opacity:0;transition:.12s}
.proj-row:hover .pact{opacity:1}

/* help modal */
.help-sec{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin:16px 0 7px}
.help-sec:first-child{margin-top:0}
.help-row{display:flex;gap:14px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line)}
.help-row b{flex:none;width:46%;font-size:12.5px;font-weight:600;color:var(--text)}
.help-row span{flex:1;font-size:12px;color:var(--muted)}

/* template cards */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.tpl{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:.13s}
.tpl:hover{border-color:var(--accent-d);transform:translateY(-2px);background:var(--panel-3)}
.tpl .prev{height:104px;background:var(--bg);border-bottom:1px solid var(--line);color:var(--accent);
  display:grid;place-items:center;padding:10px}
.tpl .prev svg{width:100%;height:100%;display:block}
.tpl .tbody{padding:13px;display:flex;flex-direction:column;gap:7px;flex:1}
.tpl .tbody h3{font-size:14px;font-weight:600}
.tpl .tbody>p{font-size:11.5px;color:var(--muted);line-height:1.45}
.tpl .pc{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.tpl .pc div{display:flex;gap:6px;font-size:11px;line-height:1.4}
.tpl .pc .ic{flex:none;font-weight:700}
.tpl .pc .pro .ic{color:#6ee7a0}.tpl .pc .con .ic{color:#ff8a9c}
.tpl .pc .pro{color:#a7c6b6}.tpl .pc .con{color:#c79aa3}
.tpl .use{height:34px;border-radius:8px;background:rgba(52,211,191,.12);color:var(--accent);
  border:1px solid rgba(52,211,191,.3);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px}
.tpl:hover .use{background:var(--accent);color:#04201c}

/* wizard */
.wiz-steps{display:flex;gap:6px;margin-bottom:6px}
.wiz-steps .ws{flex:1;height:5px;border-radius:3px;background:var(--line);transition:.2s}
.wiz-steps .ws.on{background:var(--accent)}
.wiz-steps .ws.done{background:var(--accent-d)}
.wiz-title{font-size:15px;font-weight:600;margin:16px 0 4px}
.wiz-desc{font-size:12.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.opt{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:12px;cursor:pointer;transition:.12s;display:flex;gap:11px;align-items:flex-start}
.opt:hover{border-color:var(--line-2);background:var(--panel-3)}
.opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:rgba(52,211,191,.06)}
.opt .ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);flex:none;margin-top:1px;display:grid;place-items:center;color:transparent}
.opt.on .ck{background:var(--accent);border-color:var(--accent);color:#04201c}
.opt .ck svg{width:12px;height:12px}
.opt .om b{font-size:12.5px;font-weight:600;display:block}
.opt .om em{font-size:11px;color:var(--muted);font-style:normal;line-height:1.4;display:block;margin-top:2px}
.opt .om .vid{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted-2)}
.count-row{display:flex;align-items:center;gap:13px;padding:9px 2px;border-bottom:1px solid var(--line)}
.count-row .cic{width:30px;height:30px;border-radius:8px;background:var(--panel-3);color:var(--accent);display:grid;place-items:center;flex:none}
.count-row .cic svg{width:18px;height:18px}
.count-row .cl{flex:1}
.count-row .cl b{font-size:13px;font-weight:600}
.count-row .cl em{font-size:11px;color:var(--muted-2);font-style:normal}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.stepper button{width:30px;height:32px;color:var(--muted);font-size:16px;background:var(--panel-2)}
.stepper button:hover{background:var(--panel-3);color:var(--text)}
.stepper input{width:46px;height:32px;text-align:center;background:var(--bg);border:none;
  border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--text);font-family:"JetBrains Mono",monospace;font-size:13px}
.recap{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:12.5px;line-height:1.8;color:var(--muted)}
.recap b{color:var(--text)}

/* ---- CONTEXT MENU ---- */
#ctxmenu{position:fixed;z-index:200;min-width:204px;background:var(--panel-3);
  border:1px solid var(--line-2);border-radius:11px;padding:6px;
  box-shadow:0 16px 48px #000c,0 0 0 1px #0006;font-size:13px;display:none;
  animation:ctxin .11s cubic-bezier(.2,.9,.3,1)}
@keyframes ctxin{from{opacity:0;transform:scale(.96) translateY(-5px)}to{opacity:1;transform:none}}
#ctxmenu .ci{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:8px;
  color:var(--text);cursor:pointer;white-space:nowrap;position:relative;transition:background .1s,color .1s;font-weight:500}
#ctxmenu .ci:hover{background:rgba(52,211,191,.16);color:var(--accent)}
#ctxmenu .ci:hover svg{color:var(--accent)}
#ctxmenu .ci svg{width:16px;height:16px;color:var(--muted);flex:none}
#ctxmenu .ci .k{margin-left:auto;font-size:11px;color:var(--muted-2);font-family:"JetBrains Mono",monospace;padding-left:22px}
#ctxmenu .ci.danger{color:var(--danger)}
#ctxmenu .ci.danger svg{color:var(--danger)}
#ctxmenu .ci.danger:hover{background:rgba(240,85,107,.16);color:#ff8a9c}
#ctxmenu .ci.danger:hover svg{color:#ff8a9c}
#ctxmenu .ci.has-sub::after{content:"›";margin-left:auto;color:var(--muted);font-size:17px;line-height:0;padding-left:14px}
#ctxmenu .ci.has-sub:hover::after{color:var(--accent)}
#ctxmenu .sub{position:absolute;left:100%;top:-7px;min-width:188px;
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:11px;padding:6px;
  box-shadow:0 16px 48px #000c;display:none;max-height:78vh;overflow:auto}
#ctxmenu .sep{height:1px;background:var(--line);margin:6px 8px}
#ctxmenu .hd{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted-2);
  font-weight:700;padding:7px 11px 5px;overflow:hidden;text-overflow:ellipsis;max-width:240px}
#ctxmenu .sub::-webkit-scrollbar{width:8px}
#ctxmenu .sub::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

/* canvas legend */
#legendBox{position:absolute;left:14px;bottom:14px;z-index:40;background:rgba(15,22,32,.93);
  border:1px solid var(--line);border-radius:10px;font-size:11.5px;color:var(--muted);
  box-shadow:0 8px 28px #0008;max-width:230px;
  display:flex;flex-direction:column;max-height:calc(100vh - 96px);overflow:hidden}
#legendBox .lg-head{display:flex;align-items:center;gap:8px;cursor:move;
  padding:8px 11px;color:var(--text);font-weight:600;font-size:12px;user-select:none}
#legendBox .lg-title{flex:1;cursor:pointer}
#legendBox .lg-head:hover .lg-title{color:var(--muted)}
#legendBox .lg-chev{color:var(--muted-2);font-size:11px;cursor:pointer}
#legendBox .lg-body{padding:2px 11px 10px;overflow-y:auto;flex:1;min-height:0}
#legendBox .lg-body::-webkit-scrollbar{width:7px}
#legendBox .lg-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:7px}
#legendBox .lg-sec{display:flex;align-items:center;gap:5px;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin:9px 0 5px;cursor:pointer;user-select:none}
#legendBox .lg-sec:hover{color:var(--muted)}
#legendBox .lg-secchev{font-size:9px;width:9px}
#legendBox .lg-count{margin-left:auto;background:var(--panel-2);color:var(--muted);border-radius:8px;padding:0 6px;font-size:9px;letter-spacing:0}
#legendBox .lg-search{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-size:11px;color:var(--text);margin:0 0 5px}
#legendBox .lg-search:focus{border-color:var(--accent);outline:none}
#legendBox .lg-zhdr{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--text);margin:7px 0 3px}
#legendBox .lg-zhdr.lg-zout{color:var(--muted-2);font-weight:600}
#legendBox .lg-empty{color:var(--muted-2);font-style:italic}
#legendBox .lg-row{display:flex;align-items:center;gap:8px;line-height:1.85;white-space:nowrap}
#legendBox .lg-dot{width:11px;height:11px;border-radius:3px;flex:none}
#legendBox .lg-vlan,#legendBox .lg-flow,#legendBox .lg-type{cursor:pointer;border-radius:6px;margin:0 -6px;padding:1px 6px;transition:.1s}
#legendBox .lg-vlan:hover,#legendBox .lg-flow:hover,#legendBox .lg-type:hover{background:var(--panel-2);color:var(--text)}
#legendBox .lg-vlan.on,#legendBox .lg-flow.on,#legendBox .lg-type.on{background:rgba(52,211,191,.16);color:var(--text);font-weight:600}
#legendBox .lg-clear{cursor:pointer;color:var(--accent);font-weight:600;font-size:11px;
  padding:3px 8px;border-radius:6px;background:rgba(52,211,191,.13)}
#legendBox .lg-clear:hover{background:rgba(52,211,191,.24)}
#legendBox .lg-line{width:18px;height:0;border-top:2.5px solid var(--line-2);flex:none}
#legendBox .lg-line.trunk{border-top-width:4px}
#legendBox .lg-line.dash{border-top-style:dashed;border-top-width:2px}
#legendBox .lg-line.allow{border-top-color:var(--accent-2)}
#legendBox .lg-line.deny{border-top-color:var(--danger)}

/* zones de site (cadres nommés derrière les nœuds) */
.zone-body{stroke-width:1.5;stroke-dasharray:8 7;fill-opacity:1;pointer-events:none}
.zone.sel .zone-body{stroke-dasharray:none;stroke-width:2}
.zone.hot .zone-body{stroke-dasharray:none;stroke-width:2.5}
.zone-hd{stroke-width:1.5;cursor:move}
.zone-hd:hover{filter:brightness(1.25)}
.zone-label{font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:700;pointer-events:none;letter-spacing:.3px}
.zone-h{fill:var(--bg);stroke:var(--accent);stroke-width:2;cursor:nwse-resize}
.zone-h[data-h="ne"],.zone-h[data-h="sw"]{cursor:nesw-resize}

/* toast */
#toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:9px;padding:10px 16px;font-size:13px;
  color:var(--text);opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 30px #0008;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* small screens */
@media (max-width:1100px){
  #app{grid-template-columns:0 1fr 0}
  body.dock-left #app,body.dock-right #app{grid-template-columns:0 1fr}
  #left,#right{position:absolute;top:54px;bottom:34px;width:280px;z-index:30;box-shadow:0 0 40px #000a}
  #left{left:0;transform:translateX(-100%);transition:.2s}
  #right{right:0;transform:translateX(100%);transition:.2s}
  #left.open{transform:none}#right.open{transform:none}
}
.mobtoggle{display:none}
@media (max-width:1100px){.mobtoggle{display:flex}}

/* panneaux repliables (desktop) */
@media (min-width:1101px){
  #app{transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1)}
  #left,#right{transition:opacity .2s ease}
  #app.hide-left{grid-template-columns:0 1fr 300px}
  #app.hide-right{grid-template-columns:280px 1fr 0}
  #app.hide-left.hide-right{grid-template-columns:0 1fr 0}
  #app.hide-left #left,#app.hide-right #right{border:none;opacity:0}
}
@media (max-width:1100px){.desktoggle{display:none}}