/* Vigie. Palette tiree du metier : gris anthracite (RAL 7016) et vert mousse (RAL 6005)
   des panneaux de cloture, sur un fond gris galvanise. Les couleurs d'etat sont reservees
   aux etats et toujours doublees d'une forme et d'un libelle. */
:root {
  color-scheme: light;
  --page: #edf0f1;
  --surface: #fbfcfc;
  --ink: #1c2124;
  --ink-2: #48525a;
  --muted: #6d777d;
  --line: #d3d9dc;
  --wire: #9aa4a9;
  --anthracite: #383e42;
  --side-ink: #e9edef;
  --side-muted: #a9b3b8;
  --moss: #0f4d3a;
  --moss-ink: #ffffff;
  --link: #0f4d3a;
  --focus: #2a78d6;
  --good: #0ca30c;
  --warning: #fab219;
  --warning-edge: #8a5a00;
  --critical: #d03b3b;
  --tint-critical: #f8dedd;
  --tint-warning: #fdf0cf;
  --series: #2a78d6;
  --grid: #e1e4e3;
  --axis: #c0c6c8;
  --meter-norm: #2a78d6; --meter-norm-track: #cde2fb;
  --meter-warn: #e09a00; --meter-warn-track: #fbe6b4;
  --meter-crit: #d03b3b; --meter-crit-track: #f4cccc;
  --display: Bahnschrift, "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #14181a;
    --surface: #1d2225;
    --ink: #f1f3f4;
    --ink-2: #c3cacd;
    --muted: #8f999e;
    --line: #333b40;
    --wire: #566068;
    --anthracite: #0f1214;
    --moss: #2f7d62;
    --link: #7fd1b3;
    --focus: #6da7ec;
    --warning-edge: #fab219;
    --tint-critical: #4a2222;
    --tint-warning: #45391a;
    --series: #3987e5;
    --grid: #2c3236;
    --axis: #3d454a;
    --meter-norm: #3987e5; --meter-norm-track: #1b3a61;
    --meter-warn: #fab219; --meter-warn-track: #4d3c12;
    --meter-crit: #e25555; --meter-crit-track: #532525;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 var(--body); }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: 2.1rem; letter-spacing: -.005em; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
p { margin: 0 0 .8rem; max-width: 76ch; }
code, pre { font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* ---------- structure */
.shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--anthracite); color: var(--side-ink); padding: 1.3rem 0 1rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: .65rem; padding: 0 1.2rem 1.4rem; color: var(--side-ink); text-decoration: none; font: 600 1.6rem/1 var(--display); letter-spacing: .01em; }
.brand svg { color: #7d878c; flex: none; }
.brand-dot { fill: #3fae86; }
.side nav { display: flex; flex-direction: column; }
.side nav a { display: flex; align-items: center; justify-content: space-between; padding: .55rem 1.2rem; color: var(--side-muted); text-decoration: none; border-left: 3px solid transparent; }
.side nav a:hover { color: var(--side-ink); }
.side nav a[aria-current] { color: #fff; border-left-color: #3fae86; background: rgba(255, 255, 255, .06); }
.nav-count { font-size: .8rem; min-width: 1.5rem; text-align: center; padding: 0 .4rem; border-radius: 99px; background: var(--warning); color: #2b1d00; font-weight: 600; }
.nav-count-crit { background: var(--critical); color: #fff; }
.side-user { margin-top: auto; padding: 1rem 1.2rem 0; font-size: .87rem; color: var(--side-muted); display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.side-user .link { color: var(--side-ink); }
main { padding: 1.8rem 2.2rem 4rem; min-width: 0; max-width: 1500px; }
.page-head { margin-bottom: 1.3rem; }
.lede { color: var(--ink-2); margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.crumb { margin: 0 0 .3rem; font-size: .9rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.2rem 0 .8rem; }
.section-head h2 { margin: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.empty { background: var(--surface); border: 1px solid var(--line); padding: 2rem; max-width: 40rem; }
.empty h2 { margin-top: 0; }

/* ---------- etats */
.ico { flex: none; vertical-align: -2px; fill: currentColor; }
.ico-critical { color: var(--critical); }
.ico-warning { color: var(--warning); stroke: var(--warning-edge); stroke-width: .9; stroke-linejoin: round; }
.ico-ok { color: var(--good); }
.ico-offline { color: var(--muted); }
.state { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-weight: 600; font-size: .9rem; }
.state-offline { color: var(--muted); font-weight: 400; }
.tag { display: inline-block; font-size: .8rem; padding: .05rem .5rem; border: 1px solid var(--wire); border-radius: 3px; color: var(--ink-2); white-space: nowrap; }

/* ---------- le parc en panneau grillage : une maille par poste */
.overview { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 2rem; align-items: start; }
.mesh { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); padding: 1px; }
.mesh-cell { display: flex; align-items: center; gap: .45rem; height: 46px; padding: 0 .65rem; margin: 1px; background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--wire); color: var(--ink); text-decoration: none; font-size: .86rem; min-width: 0; position: relative; }
.mesh-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesh-cell:hover, .mesh-cell:focus-visible { box-shadow: 0 0 0 2.5px var(--ink); z-index: 1; border-radius: 0; outline: none; }
.mesh-critical { background: var(--tint-critical); font-weight: 600; }
.mesh-warning { background: var(--tint-warning); }
.mesh-offline { background: transparent; color: var(--muted); }
.tally { margin: 0; display: grid; gap: 0; }
.tally > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.tally dt { display: flex; align-items: center; gap: .45rem; color: var(--ink-2); }
.tally dd { margin: 0; font: 600 1.5rem/1.1 var(--display); }

/* ---------- alertes */
.alert-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.alert-list li { display: grid; grid-template-columns: 9.5rem minmax(7rem, 12rem) minmax(0, 1fr) auto auto; gap: .4rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
#apercu .alert-list li { grid-template-columns: 9.5rem minmax(0, 1fr) auto auto; }
.alert-device { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-age { white-space: nowrap; font-size: .87rem; }
.alert-list form { margin: 0; }
.is-acked td { color: var(--muted); }

/* ---------- tableaux */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
.data th { text-align: left; font-weight: 600; font-size: .84rem; color: var(--ink-2); padding: .55rem .8rem; border-bottom: 1px solid var(--wire); white-space: nowrap; }
.data td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data tr:last-child td { border-bottom: 0; }
.data.compact td, .data.compact th { padding: .38rem .7rem; }
.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data td.wrap { min-width: 16rem; overflow-wrap: anywhere; }
.data form { margin: 0; }
.row-title { font-weight: 600; }
.row-sub { display: block; color: var(--muted); font-size: .85rem; }
.col-meter { width: 9.5rem; }
.col-os { min-width: 13rem; }
.meter { display: inline-flex; align-items: center; gap: .55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter-track { width: 68px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--meter-norm-track); flex: none; }
.meter-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--meter-norm); }
.meter-warn .meter-track { background: var(--meter-warn-track); } .meter-warn .meter-fill { background: var(--meter-warn); }
.meter-crit .meter-track { background: var(--meter-crit-track); } .meter-crit .meter-fill { background: var(--meter-crit); }
.meter-crit .meter-val { font-weight: 600; }
.meter-val { min-width: 2.8rem; }

/* ---------- onglets, filtres, boutons */
.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--wire); margin-bottom: 1.4rem; overflow-x: auto; }
.tabs a { padding: .5rem 0; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current], .tabs a.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--moss); }
.js-tabs .tab-panel { display: none; }
.js-tabs .tab-panel.is-active { display: block; }
.js-tabs .tab-panel > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; align-items: center; }
.filters input[type=search] { width: min(26rem, 100%); }
.seg { font: inherit; padding: .3rem .8rem; border: 1px solid var(--wire); background: var(--surface); color: var(--ink-2); cursor: pointer; border-radius: 3px; }
.seg[aria-pressed=true] { background: var(--anthracite); border-color: var(--anthracite); color: #fff; }
.btn { display: inline-block; font: inherit; font-weight: 600; padding: .42rem .9rem; border: 1px solid var(--wire); border-radius: 3px; background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--moss); border-color: var(--moss); color: var(--moss-ink); }
.btn-primary:hover { filter: brightness(1.12); border-color: var(--moss); }
.btn-danger { border-color: var(--critical); color: var(--critical); }
.btn-small { padding: .2rem .6rem; font-size: .85rem; font-weight: 400; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; }
.btn-row form { margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- formulaires */
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--wire); border-radius: 3px; padding: .4rem .55rem; max-width: 100%; }
.form label { display: block; margin: 0 0 .9rem; font-weight: 600; max-width: 30rem; }
.form label .muted { font-weight: 400; }
.form label > input:not([type=checkbox]), .form label > select, .form label > textarea { display: block; width: 100%; margin-top: .25rem; font-weight: 400; }
.form-wide label { max-width: 44rem; }
.form .check, .check { display: flex; gap: .55rem; align-items: baseline; font-weight: 400; max-width: 46rem; }
.check input { flex: none; }
.form .row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.form .row label { flex: 1 1 10rem; }
.num-input { width: 5.2rem; padding: .15rem .35rem; text-align: right; }
.rules { list-style: none; margin: 0 0 1.4rem; padding: 0; border-top: 1px solid var(--line); max-width: 54rem; }
.rules li { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.rules .check { max-width: none; margin: 0; }
.rule-detail { display: block; color: var(--ink-2); }
.rule-detail select { padding: .15rem .35rem; }
.danger-zone { border-left: 3px solid var(--critical); padding-left: 1rem; }
.flash { padding: .6rem .9rem; border: 1px solid var(--line); border-left: 4px solid var(--good); background: var(--surface); max-width: 60rem; }
.flash-err { border-left-color: var(--critical); }

/* ---------- fiches */
.facts { margin: 0 0 1rem; }
.facts > div { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: 1rem; padding: .32rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.plain { list-style: none; margin: 0 0 1rem; padding: 0; }
.plain li { padding: .25rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.notes { background: var(--surface); border: 1px solid var(--line); padding: .6rem .8rem; }
.timeline { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.timeline li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-alert_open span { font-weight: 600; }
.steps { padding-left: 1.3rem; max-width: 62rem; }
.steps li { margin-bottom: 1rem; padding-left: .3rem; }
.code-block { background: var(--surface); border: 1px solid var(--line); padding: .7rem .8rem; margin: 0 0 .8rem; }
.code-block pre { margin: 0 0 .6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.secret { font-size: 1.05rem; letter-spacing: .04em; }
details summary { cursor: pointer; color: var(--link); }
.collect-errors { margin-top: 1.5rem; }

/* ---------- courbes */
.charts { margin: 1.4rem 0 1rem; }
.chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.chart { margin: 0; background: var(--surface); border: 1px solid var(--line); padding: .7rem .8rem .4rem; min-width: 0; }
.chart figcaption { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: .92rem; }
.chart figcaption .now { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.chart-plot { position: relative; height: 168px; }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-plot svg:focus-visible { outline-offset: 0; }
.chart-plot .grid { stroke: var(--grid); stroke-width: 1; }
.chart-plot .base { stroke: var(--axis); stroke-width: 1; }
.chart-plot .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-plot .line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .area { fill: var(--series); opacity: .1; }
.chart-plot .dot { fill: var(--series); }
.chart-plot .cross { stroke: var(--axis); stroke-width: 1; }
.chart-plot .mark { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.chart-plot .none { fill: var(--muted); font-size: 13px; }
.chart.is-loading svg { opacity: .45; }
.tip { position: absolute; top: 4px; pointer-events: none; background: var(--ink); color: var(--surface); padding: .2rem .5rem; border-radius: 3px; font-size: .82rem; white-space: nowrap; transform: translateX(-50%); }
.tip strong { font-size: .95rem; margin-right: .4rem; }
.chart-table { margin-top: .7rem; }
.chart-table table { margin-top: .5rem; max-width: 34rem; }

/* ---------- connexion */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login { width: min(23rem, 100%); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--anthracite); padding: 1.8rem 1.8rem 1.4rem; }
.login h1 { font-size: 2.4rem; }
.login .lede { margin-bottom: 1.4rem; }
.login label { display: block; font-weight: 600; margin-bottom: .9rem; }
.login label .muted { font-weight: 400; }
.login input { display: block; width: 100%; margin-top: .25rem; }
.login .btn { width: 100%; margin-top: .4rem; padding: .55rem; }

/* ---------- petits ecrans */
@media (max-width: 1100px) {
  .chart-grid { grid-template-columns: 1fr; }
  .col-os { display: none; }
}
@media (max-width: 820px) {
  .shell { display: block; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .6rem 1rem 0; gap: 0 1rem; }
  .brand { padding: 0 0 .5rem; font-size: 1.35rem; }
  .side nav { flex-direction: row; order: 3; width: 100%; overflow-x: auto; }
  .side nav a { padding: .5rem .8rem .45rem; border-left: 0; border-bottom: 3px solid transparent; gap: .4rem; white-space: nowrap; }
  .side nav a[aria-current] { border-bottom-color: #3fae86; }
  .side-user { margin: 0 0 .5rem auto; padding: 0; flex-direction: row; gap: .8rem; }
  .side-user span { display: none; }
  main { padding: 1.2rem 16px 3rem; }
  h1 { font-size: 1.7rem; }
  .overview, .two-col { grid-template-columns: 1fr; gap: 1rem; }
  .tally { grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
  .col-meter { display: none; }
  .meter-track { width: 44px; }
  .mesh { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .alert-list li, #apercu .alert-list li { grid-template-columns: 1fr auto; }
  .alert-list .alert-msg { grid-column: 1 / -1; }
  .facts > div { grid-template-columns: 1fr; gap: 0; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .seg, .mesh-cell { transition: box-shadow .12s, border-color .12s, filter .12s; }
}

/* ---------- installation */
.setup { width: min(27rem, 100%); }
.setup h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }