/* ==========================================================================
   HTIT Distance HM — interface web
   Design sobre industriel. Mobile d'abord, thème clair/sombre.
   ========================================================================== */

/* ---------------------------------- Jetons -------------------------------- */

:root {
  --brand:        #0057b7;
  --brand-hi:     #0068da;
  --brand-lo:     #00458f;
  --brand-soft:   #e8f0fb;

  --bg:           #f4f6f9;
  --surface:      #ffffff;
  --surface-2:    #f7f9fc;
  --border:       #dde3ea;
  --border-hi:    #c3ccd8;
  --text:         #16202b;
  --muted:        #5b6875;

  --ok:           #0a7a2f;
  --ok-soft:      #e6f6ec;
  --warn:         #a86a00;
  --warn-soft:    #fdf3e0;
  --err:          #b00020;
  --err-soft:     #fdeaed;

  --shadow-1:     0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .08);
  --shadow-2:     0 4px 12px rgba(16, 32, 48, .10);
  --shadow-up:    0 -2px 12px rgba(16, 32, 48, .10);

  --radius:       10px;
  --radius-sm:    7px;
  --tap:          44px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --brand:        #4d95e8;
  --brand-hi:     #6aa8ee;
  --brand-lo:     #2f7ad0;
  --brand-soft:   #16283d;

  --bg:           #0f151c;
  --surface:      #172029;
  --surface-2:    #1d2832;
  --border:       #26313d;
  --border-hi:    #35424f;
  --text:         #e6edf3;
  --muted:        #98a5b3;

  --ok:           #4ecb7a;
  --ok-soft:      #14301f;
  --warn:         #e2a83c;
  --warn-soft:    #33270f;
  --err:          #ff7080;
  --err-soft:     #3a1219;

  --shadow-1:     0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2:     0 4px 14px rgba(0, 0, 0, .45);
  --shadow-up:    0 -2px 14px rgba(0, 0, 0, .45);
}

/* ---------------------------------- Base ---------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.05rem; }
h2 { font-size: 1.02rem; }
h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
p  { margin: 0; }

code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------- En-tête -------------------------------- */

.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.appbar__mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.appbar__titles { flex: 1 1 auto; min-width: 0; }
.appbar__title {
  font-size: .96rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar__sub { font-size: .72rem; color: var(--muted); }
.appbar__actions { display: flex; align-items: center; gap: 6px; }

/* Lien vers le guide d'utilisation, visible dans les deux rôles. Calé sur
   l'allure de .btn--quiet pour ne pas introduire un troisième style de
   contrôle dans la barre. */
.appbar__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none;
  font-size: .9rem; font-weight: 500; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.appbar__link:hover { background: var(--surface-2); color: var(--text); }
/* Sur mobile la barre est étroite : l'icône seule suffit. */
@media (max-width: 520px) {
  .appbar__link-txt { display: none; }
  .appbar__link { padding: 6px 8px; }
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
}
.badge--admin { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.badge--ok    { background: var(--ok-soft);    color: var(--ok);    border-color: transparent; }
.badge--warn  { background: var(--warn-soft);  color: var(--warn);  border-color: transparent; }
.badge--err   { background: var(--err-soft);   color: var(--err);   border-color: transparent; }

/* --------------------------------- Boutons -------------------------------- */

button {
  font: inherit; cursor: pointer;
  min-height: var(--tap);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
button:hover:not(:disabled)  { background: var(--brand-hi); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled              { opacity: .45; cursor: not-allowed; }

button.btn--ghost {
  background: transparent; color: var(--text); border-color: var(--border-hi);
}
button.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }

button.btn--quiet {
  background: transparent; color: var(--muted); border-color: transparent;
  min-height: 36px; padding: 6px 10px; font-weight: 500;
}
button.btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

button.btn--danger { background: var(--err); }
button.btn--danger:hover:not(:disabled) { filter: brightness(1.1); }

button.btn--icon {
  min-height: 38px; width: 38px; padding: 0;
  background: transparent; color: var(--muted); border-color: var(--border);
  font-size: 1rem;
}
button.btn--icon:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

button.btn--block { width: 100%; }

/* ------------------------------- Conteneurs ------------------------------- */

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 14px 14px 24px;
}
.wrap--pad-action { padding-bottom: 96px; }   /* place pour la barre d'action */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 12px;
  overflow: hidden;
}
.card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.card__head h3 { flex: 1 1 auto; }
.card__body { padding: 14px; }
.card__body > * + * { margin-top: 12px; }
.card__foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .82rem; color: var(--muted);
}

.hint { font-size: .82rem; color: var(--muted); }
.hint code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: .95em;
}

/* -------------------------------- Onglets --------------------------------- */

.tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 1 auto; min-width: max-content;
  min-height: 38px; padding: 7px 14px;
  border: none; border-radius: 5px;
  background: transparent; color: var(--muted);
  font-size: .88rem; font-weight: 600;
}
.tab:hover:not(.tab--on) { background: var(--surface); color: var(--text); }
.tab--on { background: var(--brand); color: #fff; }

/* -------------------------------- Champs ---------------------------------- */

.field {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.field:first-child { border-top: none; padding-top: 0; }
.field__label { flex: 1 1 auto; min-width: 0; }
.field__name { font-size: .93rem; font-weight: 550; }
.field__help { font-size: .78rem; color: var(--muted); margin-top: 1px; }
.field__control { flex: 0 0 auto; }

input[type="number"], input[type="text"], input[type="password"], select {
  font: inherit;
  min-height: var(--tap);
  padding: 8px 10px;
  width: 122px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
select { width: auto; max-width: 240px; padding-right: 28px; }
input:hover, select:hover { border-color: var(--brand); }
input[type="file"] {
  font: inherit; font-size: .88rem; color: var(--muted);
  max-width: 100%;
}

.field--stack { display: block; }
.field--stack .field__control { margin-top: 9px; }

/* Interrupteurs (sorties d'alerte, options) */
.switches { display: grid; gap: 8px; }
.switch {
  display: flex; align-items: center; gap: 11px;
  min-height: var(--tap);
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.switch:hover { border-color: var(--border-hi); }
.switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); flex: 0 0 auto; }
.switch__text { flex: 1 1 auto; }
.switch__name { font-size: .92rem; font-weight: 550; }
.switch__help { font-size: .76rem; color: var(--muted); }
.switch:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* Valeurs en lecture seule */
.readonly-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ro {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ro__k { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ro__v {
  font-size: 1.14rem; font-weight: 650; margin-top: 2px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Segments (choix de distance côté client) */
.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segment {
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.segment--on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* -------------------------------- Messages -------------------------------- */

.note {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .88rem;
}
.note--ok   { border-left-color: var(--ok);   background: var(--ok-soft); }
.note--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note--err  { border-left-color: var(--err);  background: var(--err-soft); }
.note__icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.35; }
.note__body { flex: 1 1 auto; min-width: 0; }

.critical {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--warn); font-weight: 650;
}

/* ------------------------- Barre d'état connexion ------------------------- */

.connbar { display: grid; gap: 10px; }
.connbar__state { display: flex; align-items: center; gap: 9px; }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); flex: 0 0 auto;
}
.dot--ok   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-soft); }
.dot--busy { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft);
             animation: pulse 1.1s ease-in-out infinite; }
.dot--err  { background: var(--err);  box-shadow: 0 0 0 3px var(--err-soft); }
@keyframes pulse { 50% { opacity: .35; } }

.connbar__text { flex: 1 1 auto; font-size: .9rem; min-width: 0; }
.connbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.connbar__actions button { flex: 1 1 150px; }

/* --------------------------- Barre d'action save -------------------------- */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-up);
  transform: translateY(105%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.actionbar--on { transform: translateY(0); }
.actionbar__inner {
  max-width: 940px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.actionbar__msg { flex: 1 1 220px; font-size: .86rem; }
.actionbar__msg b { color: var(--warn); }
.actionbar__btns { display: flex; gap: 8px; flex: 0 0 auto; }
.actionbar__btns button { flex: 1 1 auto; }

/* Mise en avant du bouton à la première modification */
@keyframes attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 87, 183, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(0, 87, 183, 0); }
}
.btn--attention { animation: attention 1.5s ease-out 3; }

/* --------------------------------- Login ---------------------------------- */

.login {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 20px;
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--brand-soft), transparent 70%),
    var(--bg);
}
.login__card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 26px 22px;
  text-align: center;
}
.login__mark {
  width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: 12px; background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
}
.login__title { font-size: 1.14rem; font-weight: 650; }
.login__sub { font-size: .86rem; color: var(--muted); margin-top: 4px; }

.pin {
  display: flex; justify-content: center; gap: 7px;
  margin: 22px 0 6px;
}
.pin input {
  width: 38px; height: 50px; padding: 0;
  text-align: center;
  font-size: 1.3rem; font-weight: 650;
  font-family: var(--mono);
  border: 1px solid var(--border-hi); border-radius: 9px;
  background: var(--surface-2); color: var(--text);
}
.pin input:focus-visible { border-color: var(--brand); background: var(--surface); }
.pin input.pin--filled { border-color: var(--brand); }

.login__msg { min-height: 22px; margin: 10px 0 14px; font-size: .86rem; }
.login__msg--err { color: var(--err); font-weight: 550; }
.login__foot { margin-top: 18px; font-size: .74rem; color: var(--muted); line-height: 1.45; }
/* Accès au guide depuis l'écran de connexion : il décrit la marche à suivre
   pour obtenir l'accès, donc il ne doit pas être derrière l'accès. */
.login__docs {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px; padding: 9px 14px;
  border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none;
  font-size: .84rem; font-weight: 550;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.login__docs:hover {
  background: var(--surface-2); color: var(--text); border-color: var(--brand);
}

/* --------------------------------- Sniffer -------------------------------- */

.slot-grid {
  display: grid; gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
}
.slot {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center; align-content: center; gap: 1px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  transition: background .8s ease-out, color .8s ease-out, border-color .8s ease-out;
}
.slot--on { color: #fff; border-color: transparent; font-weight: 700; }
.slot__i { font-size: .68rem; opacity: .75; }
.slot__occ { font-size: .66rem; font-weight: 700; letter-spacing: -.02em; }
/* Le slot est tenu par le boîtier auquel il est assigné : cas normal. */
.slot--held    { border-color: var(--ok); }
.slot--held .slot__occ { color: var(--ok); }
/* Occupé par un autre boîtier que le sien, ou par deux à la fois. */
.slot--foreign { border-color: var(--warn); background: var(--warn-soft); }
.slot--foreign .slot__occ { color: var(--warn); }
.slot--conflict { border-color: var(--err); background: var(--err-soft); }
.slot--conflict .slot__occ { color: var(--err); }

/* ---- Analyse du sniffer ---- */

.verdict {
  padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: .92rem; font-weight: 550; line-height: 1.45;
}
.verdict--ok   { border-color: transparent; background: var(--ok-soft);   color: var(--ok); }
.verdict--warn { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.verdict--err  { border-color: transparent; background: var(--err-soft);  color: var(--err); }

.geom { font-family: var(--mono); font-size: .72rem; line-height: 1.6; }
.stat__sub { font-size: .72rem; font-weight: 400; color: var(--muted); }

.chart {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 6px;
}
.chart__svg { display: block; }
/* Le téléchargement CSV est un lien, pas un bouton (l'attribut download ne
   marche que sur <a>) : on lui donne l'allure d'un bouton fantôme, car les
   règles ci-dessus sont toutes préfixées par `button`. */
a.btnlink {
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  min-height: var(--tap); padding: 10px 16px;
  border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 150px;
  transition: background .12s ease;
}
a.btnlink:hover { background: var(--surface-2); }

.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--muted); }
.legend__i {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: .76rem; color: var(--muted);
  background: none; border: 0; padding: 2px 4px; margin: 0;
  border-radius: 4px; cursor: pointer; min-height: 0;
}
.legend__i:hover { background: var(--surface-2); color: var(--text); }
.legend__i i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Boîtier masqué : la pastille se vide, le libellé se barre. */
.legend__i--off { opacity: .5; text-decoration: line-through; }
.legend__i--off i { background: transparent !important; box-shadow: inset 0 0 0 2px var(--border-hi); }

/* Le tableau d'analyse est large par nature : il défile horizontalement dans
   son cadre plutôt que d'élargir la page. */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table.an { border-collapse: collapse; width: 100%; font-size: .78rem; }
table.an th, table.an td { padding: 6px 9px; text-align: left; white-space: nowrap; }
table.an thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--muted);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  border-bottom: 1px solid var(--border-hi);
}
table.an tbody tr + tr td { border-top: 1px solid var(--border); }
table.an tbody tr:hover td { background: var(--surface-2); }
table.an td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
table.an td.cell--bad { color: var(--err); font-weight: 650; }
table.an td.node { border-left: 3px solid var(--nc); font-family: var(--mono); }
.node__t { color: var(--muted); font-size: .7rem; margin-left: 6px; }
.cell__sub { display: block; font-size: .68rem; color: var(--muted); font-weight: 400; }
table.an td.st { white-space: normal; min-width: 150px; }
table.an td.st .badge { margin: 1px 2px 1px 0; }
.spread { display: block; }
.unit { padding: 6px 9px; font-size: .7rem; color: var(--muted); border-top: 1px solid var(--border); }
.empty { padding: 14px; font-size: .86rem; color: var(--muted); }

.events {
  max-height: 230px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .76rem;
}
.ev { display: flex; gap: 10px; padding: 5px 9px; align-items: baseline; }
.ev + .ev { border-top: 1px solid var(--border); }
.ev__t { font-family: var(--mono); color: var(--muted); flex: 0 0 auto; }
.ev__d { font-family: var(--mono); color: var(--muted); flex: 0 0 58px; text-align: right; }
.ev__x { flex: 1 1 auto; }
.ev--err  .ev__x { color: var(--err); font-weight: 550; }
.ev--warn .ev__x { color: var(--warn); }
.ev--ok   .ev__x { color: var(--ok); }

.stats-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.stat {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.stat__k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat__v { font-size: 1.22rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }

#map {
  height: 300px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.leaflet-container { font: inherit; background: var(--surface-2); }

.log {
  height: 240px; overflow: auto;
  padding: 9px 10px;
  background: #0c1016; color: #cbd5e1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: .74rem; line-height: 1.5;
}
.log__line { white-space: pre; }
.log__line--n0 { color: #ffb86c; } .log__line--n1 { color: #8be9fd; }
.log__line--n2 { color: #50fa7b; } .log__line--n3 { color: #ff79c6; }
.log__line--n4 { color: #f1fa8c; } .log__line--n5 { color: #bd93f9; }
/* Trame émise hors de son slot : elle doit sauter aux yeux dans le flot. */
.log__line--bad { background: rgba(255, 90, 110, .16); }

/* --------------------------------- OTA ------------------------------------ */

.ota-drop {
  display: block;
  padding: 18px 14px;
  border: 1.5px dashed var(--border-hi);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
}
.ota-drop:hover { border-color: var(--brand); }
.ota-drop__title { font-weight: 600; font-size: .93rem; }
.ota-drop__sub { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.ota-drop input[type="file"] { display: none; }

.bar {
  height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.bar__fill {
  height: 100%; width: 0;
  background: var(--brand);
  transition: width .18s linear;
}
.bar__fill--ok { background: var(--ok); }
.bar__fill--err { background: var(--err); }

/* ------------------------------- Overlay ---------------------------------- */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(10, 16, 22, .62);
  backdrop-filter: blur(2px);
}
.overlay__card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 22px;
  text-align: center;
}
.overlay__title { font-size: 1.04rem; font-weight: 650; }
.overlay__text { font-size: .89rem; color: var(--muted); margin-top: 7px; }
.overlay__btns { display: flex; gap: 8px; margin-top: 18px; }
.overlay__btns button { flex: 1 1 auto; }

.spinner {
  width: 30px; height: 30px; margin: 4px auto 12px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------- Toasts ---------------------------------- */

.toasts {
  position: fixed; z-index: 70;
  left: 14px; right: 14px; top: 14px;
  display: grid; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font-size: .88rem;
  animation: toast-in .2s ease-out;
}
.toast--ok   { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
.toast--err  { border-left-color: var(--err); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* -------------------------------- Écrans large ---------------------------- */

@media (min-width: 600px) {
  .switches { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .toasts { left: auto; right: 16px; width: 360px; }
  #map { height: 380px; }
  .log { height: 300px; }
  .slot-grid { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
}

@media (min-width: 900px) {
  .appbar { padding: 11px 20px; }
  .wrap { padding: 18px 20px 28px; }
  h1 { font-size: 1.1rem; }
}

/* Écrans très étroits : les champs passent en colonne */
@media (max-width: 420px) {
  .field { display: block; }
  .field__control { margin-top: 9px; }
  input[type="number"], select { width: 100%; max-width: none; }
  .pin { gap: 5px; }
  .pin input { width: 34px; height: 46px; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------- Thème système (auto) -------------------------- */
/* Reprend la palette sombre quand l'OS est en sombre et que l'utilisateur
   n'a pas forcé le thème clair via le sélecteur de l'en-tête.               */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:      #4d95e8;
    --brand-hi:   #6aa8ee;
    --brand-lo:   #2f7ad0;
    --brand-soft: #16283d;

    --bg:         #0f151c;
    --surface:    #172029;
    --surface-2:  #1d2832;
    --border:     #26313d;
    --border-hi:  #35424f;
    --text:       #e6edf3;
    --muted:      #98a5b3;

    --ok:         #4ecb7a;
    --ok-soft:    #14301f;
    --warn:       #e2a83c;
    --warn-soft:  #33270f;
    --err:        #ff7080;
    --err-soft:   #3a1219;

    --shadow-1:   0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2:   0 4px 14px rgba(0, 0, 0, .45);
    --shadow-up:  0 -2px 14px rgba(0, 0, 0, .45);
  }
  :root:not([data-theme="light"]) .segment--on,
  :root:not([data-theme="light"]) .tab--on,
  :root:not([data-theme="light"]) button:not(.btn--ghost):not(.btn--quiet):not(.btn--icon) {
    color: #08121d;
  }
}

:root[data-theme="dark"] .segment--on,
:root[data-theme="dark"] .tab--on,
:root[data-theme="dark"] button:not(.btn--ghost):not(.btn--quiet):not(.btn--icon) {
  color: #08121d;
}
:root[data-theme="dark"] .appbar__mark,
:root[data-theme="dark"] .login__mark { color: #08121d; }
:root[data-theme="dark"] button.btn--danger { color: #2a0207; }