:root{
  --bg:#0D1322; --panel:#151D33; --panel2:#1B2544; --line:#263155;
  --text:#ECF0FA; --muted:#8B94B2;
  --laterite:#E2703A; --vert:#3FA66A; --or:#E8B33C; --indigo:#5A7BD0;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',system-ui,sans-serif}
.mono{font-family:'IBM Plex Mono',monospace}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px}
h2.sec{font:500 12px 'Space Grotesk',sans-serif;letter-spacing:.12em;color:var(--muted);margin:2px 4px 10px;text-transform:uppercase}

header{padding:14px 22px 0}
.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:center;gap:10px}
.brand .name{font:700 22px 'Space Grotesk',sans-serif;letter-spacing:.04em}
.pill{font:400 10px 'IBM Plex Mono',monospace;color:var(--or);border:1px solid #E8B33C55;border-radius:99px;padding:2px 8px}
nav{display:flex;gap:18px;flex-wrap:wrap}
.tab{background:none;border:none;color:var(--muted);font:500 13px 'IBM Plex Sans',sans-serif;padding:8px 2px;cursor:pointer;border-bottom:2px solid transparent}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--laterite)}
.tab:focus-visible{outline:2px solid var(--indigo);border-radius:4px}
.dan-fani{background:repeating-linear-gradient(90deg,var(--indigo) 0 14px,var(--text) 14px 17px,var(--laterite) 17px 24px,var(--text) 24px 27px);height:4px;opacity:.9;border-radius:2px;margin-top:10px}
.bar{margin-top:10px;border-radius:9px;padding:9px 12px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.bar.alerte{background:#E2703A18;border:1px solid #E2703A55}
.bar.live{background:#E2703A18;border:1px solid #E2703A66;cursor:pointer}
.bar.live:hover{background:#E2703A26}

main{padding:18px;display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{padding:14px 16px}
.kpi b{font-size:26px;font-weight:700}
.kpi div{font-size:11.5px;color:var(--muted);margin-top:2px}
.grid3{display:grid;grid-template-columns:260px 1fr 300px;gap:14px;align-items:start}
.grid3c{display:grid;grid-template-columns:270px 1fr 320px;gap:14px;align-items:start}
@media(max-width:1000px){.grid3,.grid3c{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}

.agent-row,.bien{cursor:pointer;border:1px solid transparent;border-radius:9px;transition:background .15s,border-color .15s;padding:9px 10px;margin-bottom:6px}
.agent-row:hover,.bien:hover{background:var(--panel2)}
.agent-row.sel,.bien.sel{background:var(--panel2);border-color:var(--indigo)}
.agent-row:focus-visible,.bien:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.row{display:flex;justify-content:space-between;align-items:center}
.nom{font-size:13px;font-weight:600}
.sub{font:400 11px 'IBM Plex Mono',monospace;color:var(--muted)}
.puce{font-size:10.5px;display:inline-flex;align-items:center;gap:5px}
.puce i{width:7px;height:7px;border-radius:99px;display:inline-block}
.batt{width:26px;height:11px;border:1px solid var(--muted);border-radius:2px;padding:1px;display:inline-block;vertical-align:middle}
.batt i{display:block;height:100%;border-radius:1px}
.sig{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.sig i{width:3px;border-radius:1px}
.live-badge{font-size:9.5px;color:#fff;background:var(--laterite);border-radius:5px;padding:2px 7px;display:inline-flex;gap:4px;align-items:center;font-weight:600}
.live-badge i{width:6px;height:6px;border-radius:99px;background:#fff;animation:blink 1.2s infinite}

.maphead{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.journal{padding:10px 14px;border-top:1px solid var(--line);max-height:168px;overflow-y:auto}
.evt{border-left:2px solid var(--line);padding:4px 10px;margin-bottom:2px;display:flex;gap:10px;align-items:baseline}
.evt .h{font:400 10.5px 'IBM Plex Mono',monospace;color:var(--muted);min-width:36px}
.evt .t{font-size:12px}

.feed{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#0A101F,#121B33);aspect-ratio:16/9;transition:transform .18s,border-color .18s}
.feed.big{aspect-ratio:16/8}
.feed.click{cursor:pointer}
.feed.click:hover{transform:translateY(-2px);border-color:var(--indigo)}
.feed .center{position:absolute;inset:0;display:grid;place-items:center}
.feed .center span{font:400 9.5px 'IBM Plex Mono',monospace;color:#45537f;text-align:center;padding:0 10px;line-height:1.8}
.feed.big .center span{font-size:12px}
.feed .tl{position:absolute;top:8px;left:10px;display:flex;gap:8px;align-items:center}
.feed .tr{position:absolute;top:8px;right:10px;display:flex;gap:6px}
.feed .bl{position:absolute;left:10px;bottom:8px;font-size:10px}
.feed .bl .n{font-weight:600}
.feed .bl .s{color:var(--muted)}
.feed .br{position:absolute;right:10px;bottom:8px;font:400 10px 'IBM Plex Mono',monospace;color:var(--muted)}
.tag{font:400 10.5px 'IBM Plex Mono',monospace;color:var(--text);background:#0009;padding:2px 7px;border-radius:5px}
.rec{font-size:9.5px;color:var(--laterite);display:flex;gap:4px;align-items:center;background:#0009;padding:2px 7px;border-radius:5px}
.rec i{width:6px;height:6px;border-radius:99px;background:var(--laterite);animation:blink 1.2s infinite}
.noise{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);animation:scan 6s linear infinite}

.btn{border-radius:7px;padding:6px 10px;font:400 11.5px 'IBM Plex Sans',sans-serif;cursor:pointer;background:transparent}
.btn.indigo{border:1px solid var(--indigo);color:var(--indigo);background:#5A7BD022}
.btn.laterite{border:1px solid var(--laterite);color:var(--laterite);background:#E2703A22}
.btn.vert{border:1px solid var(--vert);color:var(--vert);background:#3FA66A22}
.btn.ghost{border:1px solid var(--line);color:var(--text)}
.btn.wide{width:100%;padding:10px}
.btn:focus-visible{outline:2px solid var(--indigo)}
.langsel{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 8px;font:400 11.5px 'IBM Plex Sans',sans-serif;cursor:pointer}
.langsel:focus-visible{outline:2px solid var(--indigo)}

.murgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.note{font-size:11.5px;color:var(--muted);margin:0}

table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);font-weight:500}
table.t td{padding:10px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top}
tr.prow{cursor:pointer;transition:background .15s}
tr.prow:hover{background:var(--panel2)}
.chaine{padding:14px 16px;border-top:1px solid var(--line);background:var(--panel2);animation:rise .3s ease-out}
.step{display:flex;gap:12px;padding:5px 0;align-items:baseline}
.step .h{font:400 11px 'IBM Plex Mono',monospace;color:var(--muted);min-width:40px}
.step i{width:8px;height:8px;border-radius:99px;background:var(--line);flex-shrink:0;position:relative;top:1px}
.step.last i{background:var(--vert)}

.visite{border-left:2px solid var(--line);padding:8px 12px;margin-bottom:6px}
.visite.live{border-left-color:var(--laterite)}
.chrono{display:flex;gap:6px;margin-top:8px}
.chrono span{flex:1;height:6px;border-radius:3px;background:var(--line)}
.chrono span.ok{background:var(--vert)}
.chrono span.cur{background:var(--laterite)}

/* accueil */
#gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.g-eyebrow{font:500 12px 'Space Grotesk',sans-serif;letter-spacing:.28em;color:var(--muted);text-transform:uppercase}
.g-eyebrow b{color:var(--text)}
.g-hero{font:700 clamp(42px,7vw,80px)/1.06 'Space Grotesk',sans-serif;margin:28px 0 0;color:var(--text);letter-spacing:-.01em}
.g-hero em{font-style:normal;color:var(--laterite)}
.g-line{font-size:17px;color:var(--muted);line-height:1.85;margin:28px auto 0;max-width:580px}
.g-line b{color:var(--text)}
.a1{animation:rise .55s .05s both}.a2{animation:rise .55s .18s both}.a3{animation:rise .55s .32s both}.a4{animation:rise .55s .46s both}.a5{animation:rise .55s .6s both}
@media(prefers-reduced-motion:reduce){.a1,.a2,.a3,.a4,.a5{animation:none}}
.gatebox{max-width:860px;width:100%;text-align:center}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:760px){.roles{grid-template-columns:1fr}}
.role{padding:22px 20px;text-align:left;cursor:pointer;transition:border-color .15s, transform .15s}
.role:hover{border-color:var(--indigo);transform:translateY(-2px)}
.role h3{margin:0 0 6px;font:700 17px 'Space Grotesk',sans-serif}
.role p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
.role .who{font:400 10.5px 'IBM Plex Mono',monospace;color:var(--or);margin-top:10px}

#modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:60;padding:20px}
#modal .card{max-width:540px;width:100%;padding:18px;max-height:85vh;overflow-y:auto}
#toasts{position:fixed;bottom:16px;right:16px;display:grid;gap:8px;z-index:50}
.toast{background:var(--panel2);border:1px solid var(--indigo);border-radius:9px;padding:10px 14px;font-size:12.5px;max-width:320px;box-shadow:0 8px 24px #0008;animation:rise .25s ease-out}
footer{padding:4px 22px 16px;font-size:10.5px;color:var(--muted)}

@keyframes pulse{0%{r:2.4;opacity:.8}70%{r:5.8;opacity:0}100%{opacity:0}}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
@keyframes scan{0%{background-position:0 0}100%{background-position:0 44px}}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.noise,.rec i,.live-badge i,.toast,.chaine{animation:none}.feed.click:hover,.role:hover{transform:none}circle.pulse{animation:none}}
circle.pulse{animation:pulse 1.8s ease-out infinite}

/* champs de connexion (ajout V1 — même langage visuel) */
.champ{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:10px 12px;font:400 13px 'IBM Plex Sans',sans-serif;margin-top:8px}
.champ:focus-visible{outline:2px solid var(--indigo)}