:root{
  --bg:#0e1319; --panel:#151c24; --panel2:#1b242e; --line:#263341; --txt:#e6edf3; --mut:#8b9bab;
  --ok:#2ecc71; --warn:#f5a524; --bad:#ef4444; --info:#4aa3ff; --accent:#4aa3ff; --accent-ink:#06121f;
  --lbl-bg:rgba(10,14,19,.85); --lbl-fg:#fff; --lbl-line:#2c3948; --tip-bg:rgba(10,14,19,.88); --tip-fg:#e6edf3;
  --legend-bg:rgba(21,28,36,.92); --row-line:#1c2631; --hover:#ffffff14; --mapbg:#0b0f14; --ringc:#fff; --glow:#fff;
  --badge-bg:#24405f; --badge-fg:#bfe0ff; --fret-bg:#5a3d12; --fret-fg:#ffd79a; --shadow:rgba(0,0,0,.5);
  color-scheme:dark;
}
/* charte claire (mode par défaut) */
:root[data-theme="light"]{
  --bg:#eef2f6; --panel:#ffffff; --panel2:#f3f6f9; --line:#d3dce6; --txt:#16212c; --mut:#5a6a7a;
  --ok:#1e9e57; --warn:#d98a00; --bad:#d93636; --info:#1f6fb5; --accent:#1f6fb5; --accent-ink:#ffffff;
  --lbl-bg:rgba(255,255,255,.93); --lbl-fg:#16212c; --lbl-line:#b9c4d0; --tip-bg:rgba(255,255,255,.95); --tip-fg:#16212c;
  --legend-bg:rgba(255,255,255,.95); --row-line:#e4eaf0; --hover:#0000000d; --mapbg:#e8eef3; --ringc:#16212c; --glow:#1f6fb5;
  --badge-bg:#dbeafe; --badge-fg:#1e4f8a; --fret-bg:#ffedd0; --fret-fg:#8a4b00; --shadow:rgba(20,40,60,.25);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column}
button,select,input{font:inherit;color:inherit}
button{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
select,input[type=date],input[type=time]{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
#top{display:flex;align-items:center;gap:22px;padding:6px 16px;background:var(--panel2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;padding:6px 0}
.logo{background:var(--accent);color:var(--accent-ink);font-weight:800;letter-spacing:1px;padding:6px 10px;border-radius:6px}
.sub{font-weight:600;line-height:1.2}.sub small{color:var(--mut);font-weight:400}
.clock{text-align:center;min-width:130px}
#clk-time{font:700 26px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px}
#clk-date{color:var(--mut);font-size:12px;text-transform:capitalize}
.modes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex}
.seg button{border-radius:0;margin-left:-1px}
.seg button:first-child{border-radius:6px 0 0 6px;margin-left:0}
.seg button:last-child{border-radius:0 6px 6px 0}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;position:relative}
.sel-box{display:flex;gap:6px;align-items:center}
.sel-box[hidden]{display:none}
.opts{display:flex;gap:14px;align-items:center;margin-left:auto;flex-wrap:wrap;font-size:13px;color:var(--mut)}
.opts label{display:flex;gap:6px;align-items:center}
.opts .chk{color:var(--txt)}
main{flex:1;display:flex;min-height:0;position:relative}
#map{flex:1;background:var(--mapbg)}
#side{width:340px;background:var(--panel);border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-bottom:1px solid var(--line)}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.kpi b{display:block;font-size:22px;line-height:1.1}
.kpi span{color:var(--mut);font-size:12px}
.kpi.warn b{color:var(--warn)}.kpi.bad b{color:var(--bad)}.kpi.ok b{color:var(--ok)}
.card{margin:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px}
.card[hidden]{display:none}
.card h4{margin:0 0 6px;font-size:18px;display:flex;align-items:center;gap:8px}
.card .x{margin-left:auto;padding:0 8px}
.badge{font-size:11px;padding:2px 7px;border-radius:99px;background:var(--badge-bg);color:var(--badge-fg);font-weight:600}
.badge.fret{background:var(--fret-bg);color:var(--fret-fg)}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0}
.card dt{color:var(--mut)}.card dd{margin:0;text-align:right;font-weight:500}
.card .btns{display:flex;gap:6px;margin-top:6px}
.list h3{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px 6px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.pill{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:0 8px;color:var(--txt)}
.rows{padding:0 8px 12px}
.row{display:grid;grid-template-columns:16px 58px 1fr auto;gap:8px;align-items:center;padding:6px 6px;border-radius:6px;cursor:pointer;border-bottom:1px solid var(--row-line)}
.row:hover,.row.sel{background:var(--panel2)}
.row .code{font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace}
.row .nx{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .d{font-size:12px;font-weight:600}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ok)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.legend{position:absolute;left:12px;bottom:12px;z-index:500;background:var(--legend-bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:3px}
.legend span{display:flex;align-items:center;gap:6px}
.ring{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--ringc);background:transparent}
.gare-ico{display:inline-block;width:12px;height:12px;border-radius:3px;background:#fff;border:2px solid #1f6fb5}
.toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:600;background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:8px 14px}
.toast[hidden]{display:none}
/* marqueurs */
.tr{position:relative;width:26px;height:38px;transform:scale(var(--ts,1));transform-origin:50% 50%}
.tr .ico{width:26px;height:38px;transform-origin:50% 50%;filter:drop-shadow(0 0 2px rgba(0,0,0,.8))}
.tr svg{width:100%;height:100%;display:block;color:var(--ok)}
.tr.warn svg{color:var(--warn)}.tr.bad svg{color:var(--bad)}
.tr.stop svg .body{stroke:var(--ringc);stroke-width:1.6}
.tr.sel{filter:drop-shadow(0 0 6px var(--glow))}
.tr .lbl{position:absolute;left:28px;top:9px;font:700 11px ui-monospace,Menlo,Consolas,monospace;background:var(--lbl-bg);color:var(--lbl-fg);padding:1px 4px;border-radius:4px;border:1px solid var(--lbl-line);white-space:nowrap;pointer-events:none}
.tr.fret .lbl{border-color:#b7791f;color:var(--fret-fg)}
.z-low .tr .lbl{display:none}
.gare{transform:scale(var(--gs,1));transform-origin:50% 50%;width:22px;height:22px;border-radius:5px;background:#fff;border:2px solid #1f6fb5;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px var(--shadow)}
.gare svg{width:14px;height:14px}
.leaflet-tooltip.gtip{background:var(--tip-bg);color:var(--tip-fg);border:1px solid var(--lbl-line);font-size:11px;padding:1px 5px;box-shadow:none}
.leaflet-tooltip.gtip:before{display:none}
.z-low .gtip{display:none}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--txt)}
.leaflet-popup-content{margin:10px 12px;min-width:250px}
.pop h4{margin:0 0 2px;font-size:15px}.pop small{color:var(--mut)}
.pop table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
.pop td{padding:2px 4px;border-top:1px solid var(--line)}
.pop td.r{text-align:right}
.pop .late{color:var(--warn);font-weight:600}.pop .here{color:var(--info);font-weight:600}
@media (max-width:900px){#side{display:none}.opts{margin-left:0}}

.z-vlow .gare,.z-vlow .gtip{display:none}
.xing{width:22px;height:22px;display:flex;align-items:center;justify-content:center;transform:scale(calc(.55 + var(--ts,1) * .45))}
.xing i{width:14px;height:14px;border-radius:50%;background:#ff3df2;border:2px solid #fff;box-shadow:0 0 0 0 rgba(255,61,242,.8);animation:blink 1s infinite}
@keyframes blink{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,61,242,.8)}60%{opacity:.35;box-shadow:0 0 0 10px rgba(255,61,242,0)}100%{opacity:1;box-shadow:0 0 0 0 rgba(255,61,242,0)}}
.kpi{cursor:default}
.kpi b .v,.kpi.click{cursor:pointer}
.kpi .split{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.kpi .v{display:block;cursor:pointer}
.kpi .v b{display:block;font-size:22px;line-height:1.1}
.kpi .v small{display:block;color:var(--mut);font-size:12px}
.kpi .v{border-radius:6px;padding:0 4px;margin:0 -4px}
.kpi .v:hover{background:var(--hover)}
.kpi .v.act,.kpi.act{box-shadow:0 0 0 2px var(--accent) inset}
.kpi.act{border-color:var(--accent)}
.kpi .sep{color:var(--mut);font-size:18px}
.kpi .lab{display:block;color:var(--mut);font-size:12px}
.list h3 .flt{margin-left:6px;text-transform:none;letter-spacing:0;color:var(--accent);font-weight:600}
#list-title{flex:1}

.row.cross{grid-template-columns:16px 1fr auto}
.xdot{width:10px;height:10px;border-radius:50%;background:#ff3df2;display:inline-block}
.pop .pk{color:var(--mut);font-size:12px}
.pop .pick{display:block;width:100%;text-align:left;margin-top:4px}

#nav{display:flex;align-items:center;gap:28px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
#nav .links{display:flex;gap:4px;align-self:stretch;align-items:stretch}
#nav a{color:var(--mut);text-decoration:none;padding:0 14px;display:flex;align-items:center;border-bottom:2px solid transparent;border-top:2px solid transparent;font-size:14px}
#nav a:hover{color:var(--txt)}
#nav a.on{color:var(--txt);border-bottom-color:var(--accent);font-weight:600}
#nav a.soon{opacity:.75;cursor:default}

/* liste en tiroir : se superpose à la carte, juste à gauche de la barre latérale */
#drawer{position:absolute;top:10px;right:350px;width:330px;max-height:calc(100% - 20px);z-index:700;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px var(--shadow);display:flex;flex-direction:column}
#drawer[hidden]{display:none}
#drawer h3{border-bottom:1px solid var(--line);padding-bottom:8px}
#drawer .rows{overflow:auto;padding-top:4px}
#drawer .x{padding:0 9px;font-size:18px;line-height:1.3}
@media (max-width:900px){#drawer{right:10px}}

@media (min-width:1320px){
  #top{flex-wrap:nowrap;gap:14px}
  .clock{min-width:0;text-align:left;flex:none}
  #clk-time{font-size:22px}
  #clk-date{font-size:11px;white-space:nowrap}
  .modes{flex-wrap:nowrap;gap:8px;flex:none}
  .sel-box{gap:4px}
  .sel-box input{padding:3px 4px;font-size:13px}
  .sel-box input[type=date]{width:128px}
  .sel-box input[type=time]{width:104px}
  .opts{gap:10px;flex-wrap:nowrap;flex:none}
  .opts label{white-space:nowrap}
}
@media (min-width:1320px){
  #top{gap:10px;padding:6px 12px}
  .opts{gap:8px}
  .opts select{max-width:175px;padding:4px 2px}
  .modes{gap:6px}
  .sel-box button{padding:5px 8px}
}

/* fond de carte sombre : tuiles OpenStreetMap inversées (le fond CARTO exige désormais une clé d'API) */
.dark-tiles .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55)}
.leaflet-container{background:var(--mapbg)}
/* options à droite de la 1re ligne */
.navopts{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:13px;padding:4px 0}
.navopts label{display:flex;gap:6px;align-items:center;white-space:nowrap}
.navopts .chk{color:var(--txt)}
.navopts select{max-width:210px}
#top{gap:18px}

@media (min-width:1100px){
  #nav{flex-wrap:nowrap;gap:16px}
  #nav a{padding:0 10px}
  .navopts{gap:8px;flex:none}
  .navopts select{max-width:165px}
  .brand{flex:none}
}
.kpi .v,.kpi .v b{color:var(--txt)}
.kpi.ok .v b,.kpi.ok>b{color:var(--ok)}

/* ================= Étape 2 : perturbations, alertes, graphiques ================= */
:root{--inc:#a78bfa;--ret:#2dd4bf;--a-crit:#e11d48;--a-haute:#f97316;--a-moy:#eab308}
:root[data-theme="light"]{--inc:#7c3aed;--ret:#0d9488;--a-crit:#be123c;--a-haute:#ea580c;--a-moy:#ca8a04}

.dot.inc{background:var(--inc)}
.tr.inc .ico{color:var(--inc);filter:drop-shadow(0 0 5px var(--inc))}
.tr.blk .ico{opacity:.7}
.tr.blk .lbl{box-shadow:0 0 0 2px var(--a-haute)}

/* boutons de simulation (ligne 2 de l'en-tête) */
.simbtns{display:flex;align-items:center;gap:6px;margin-left:auto}
.simbtns .lbl{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.simbtns button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* KPI alertes */
.kpi.wide{grid-column:1/-1}
.kpi .split3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.kpi .v.crit b{color:var(--a-crit)}.kpi .v.haute b{color:var(--a-haute)}.kpi .v.moy b{color:var(--a-moy)}
.kpi .v.crit b,.kpi .v.haute b,.kpi .v.moy b{font-size:24px}

/* bandeau d'alerte sur la carte */
.banner{position:absolute;top:12px;left:62px;z-index:560;max-width:calc(100% - 62px - 360px);display:flex;gap:8px;align-items:center;
  padding:8px 14px;border-radius:8px;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--a-haute);box-shadow:0 4px 16px var(--shadow);cursor:pointer;font-size:13px}
.banner[hidden]{display:none}
.banner.critique{border-left-color:var(--a-crit);animation:bnr 1.6s ease-in-out infinite}
.banner.haute{border-left-color:var(--a-haute)}
.banner em{font-style:normal;color:var(--mut);margin-left:6px}
@keyframes bnr{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a-crit) 35%,transparent),0 4px 16px var(--shadow)}}

/* alertes dans la liste */
.adot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.adot.critique{background:var(--a-crit)}.adot.haute{background:var(--a-haute)}.adot.moyenne{background:var(--a-moy)}
.row.al{grid-template-columns:16px 1fr auto auto}
.row.al .nx{white-space:normal;line-height:1.25;color:var(--txt)}
.row button.res{margin-left:6px;padding:2px 8px;font-size:12px}

/* marqueur d'incident sur la voie */
.inc-m{width:28px;height:28px;border-radius:50%;background:var(--inc);color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;transform:scale(calc(.55 + var(--ts,1)*.45));animation:incp 1.4s infinite;cursor:pointer}
@keyframes incp{0%{box-shadow:0 0 0 0 rgba(124,58,237,.7)}100%{box-shadow:0 0 0 16px rgba(124,58,237,0)}}

/* actions superviseur dans la fiche train */
.act{border-top:1px solid var(--line);margin-top:8px;}
.act{padding-top:8px}
.act h5{margin:0 0 6px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.arow{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.arow select{flex:1;min-width:0}
.arow .lab{color:var(--mut);font-size:12px;width:100%}
.arow button{flex:1}
.incbox{background:color-mix(in srgb,var(--inc) 14%,var(--panel2));border:1px solid var(--inc);border-radius:8px;padding:8px 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.incbox span{flex:1;min-width:120px}
button.danger{background:var(--a-crit);border-color:var(--a-crit);color:#fff}
button.good{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}

/* panneau des graphiques */
#charts{position:absolute;left:12px;right:352px;bottom:12px;z-index:520;background:var(--legend-bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:0 4px 18px var(--shadow);max-height:52%;overflow:auto}
#charts[hidden]{display:none}
#charts .gh{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px}
#charts .gsub{color:var(--mut);font-weight:400;font-size:12px}
.ggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gcard{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-width:0}
.gcard h5{margin:0 0 4px;font-size:12px;color:var(--mut);font-weight:600}
.gcard .cv{position:relative;height:165px}
@media(max-width:1250px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}.gcard .cv{height:130px}}
body.charts-on .legend{bottom:calc(var(--chh,240px) + 24px)}
@media(max-width:1500px){.simbtns .lbl{display:none}}

/* ================= Étape 3 : connexion, vues, tableaux ================= */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login{width:min(380px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 10px 36px var(--shadow)}
.login .brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.login form{display:flex;flex-direction:column;gap:12px}
.login label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
.login input{padding:9px 10px;font-size:15px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--txt)}
.login .primary{padding:10px;font-size:15px}
.login .err{color:var(--bad);font-size:13px}
.login .hint{margin:14px 0 0;color:var(--mut);font-size:12px}

.userchip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt);white-space:nowrap}
.userchip .av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.userchip button{padding:3px 9px;font-size:12px}
@media(max-width:1500px){.userchip .nm{display:none}}

.view{flex:1;overflow:auto;padding:16px 20px;background:var(--bg)}
.view[hidden]{display:none}
.view h2{margin:0 0 10px;font-size:20px;display:flex;align-items:center;gap:10px}
.view h2 .pill{font-size:13px}
.view h3{margin:20px 0 8px;font-size:14px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.vbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.vbar input[type=search],.vbar select{padding:6px 9px}
.vbar .sp{flex:1}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel);cursor:pointer;font-size:13px}
.chip.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.chip b{font-size:15px}
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px}
.tbl th{position:sticky;top:0;background:var(--panel2);text-align:left;padding:8px 10px;color:var(--mut);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th.s{cursor:pointer;user-select:none}
.tbl th.s:hover{color:var(--txt)}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--row-line);vertical-align:middle}
.tbl tr.clk{cursor:pointer}
.tbl tr.clk:hover td,.tbl tr.sel td{background:var(--hover)}
.tbl td.r,.tbl th.r{text-align:right}
.tbl .code{font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace}
.tbl .mut{color:var(--mut)}
.tbl .empty{text-align:center;color:var(--mut);padding:22px}
.tbl button{padding:2px 9px;font-size:12px}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--panel2);border:1px solid var(--line)}
.tag.critique{background:var(--a-crit);border-color:var(--a-crit);color:#fff}
.tag.haute{background:var(--a-haute);border-color:var(--a-haute);color:#fff}
.tag.moyenne{background:var(--a-moy);border-color:var(--a-moy);color:#1b1b1b}
.tag.t-alerte{border-color:var(--a-haute);color:var(--a-haute)}
.tag.t-incident{border-color:var(--inc);color:var(--inc)}
.tag.t-action{border-color:var(--accent);color:var(--accent)}
.tag.t-session{color:var(--mut)}
.d-ok{color:var(--ok);font-weight:600}.d-warn{color:var(--warn);font-weight:600}.d-bad{color:var(--bad);font-weight:600}
.split2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:16px;align-items:start}
@media(max-width:1100px){.split2{grid-template-columns:1fr}}
.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;position:sticky;top:0}
.panelbox h4{margin:0 0 4px;font-size:16px}
.panelbox small{color:var(--mut)}
main[hidden]{display:none!important}

/* page de connexion : <main class="login"> ne doit pas hériter du « main » flex du dashboard */
main.login{display:block;flex:none;min-height:0;position:static;margin:auto;box-sizing:border-box}
.login-page{flex-direction:column}