/* Lockup combiné : tuile SevenGroupe + wordmark (cf. « combiné » de la charte) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sz-s-2);
}

.brand__tile {
  display: block;
  flex: none;
  border-radius: var(--sz-r-md);
}

/* Wordmark à la SevenGroupe : casse mixte, « Seven » sombre + 2e mot gris */
.brand__name {
  font-family: var(--sz-font-ui);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--sz-text);
}

.brand__name > span {
  color: var(--sz-text-2);
  font-weight: 800;
}

.brand--sm .brand__name { font-size: 16px; }
.brand--md .brand__name { font-size: 24px; }
.brand--lg .brand__name { font-size: 32px; }

.brand--sm .brand__tile { width: 22px; height: 22px; }
.brand--md .brand__tile { width: 30px; height: 30px; }
.brand--lg .brand__tile { width: 44px; height: 44px; }
/* Primitives UI du module Metrics (préfixe .mt-).
   Importée en JS (donc bundlée) — ce ne sont PAS des tokens de thème, juste des
   composants ; toutes les couleurs passent par var(--sz-*), jamais de hex en dur. */

/* ── Page ────────────────────────────────────────────────────────────────── */
.mt-page {
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-6);
  color: var(--sz-text);
  font-family: var(--sz-font-ui);
}

.mt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sz-s-4);
  flex-wrap: wrap;
}

.mt-head__titles { display: flex; flex-direction: column; gap: var(--sz-s-1); min-width: 0; }
.mt-title { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mt-subtitle { margin: 0; font-size: 0.9rem; color: var(--sz-text-2); }

.mt-back {
  display: inline-flex; align-items: center; gap: var(--sz-s-2);
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--sz-text-3); font: inherit; font-size: 0.85rem; font-weight: 600;
  margin-bottom: var(--sz-s-2);
}
.mt-back:hover { color: var(--sz-text); }

.mt-section-title {
  margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--sz-text-3);
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-4); border-radius: var(--sz-r-md);
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--sz-border); background: var(--sz-surface); color: var(--sz-text);
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    border-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease);
  white-space: nowrap;
}
.mt-btn:hover { background: var(--sz-surface-2); }
.mt-btn:focus-visible { outline: none; box-shadow: var(--sz-ring); }
.mt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mt-btn--primary { background: var(--sz-accent); border-color: var(--sz-accent); color: var(--sz-on-accent); }
.mt-btn--primary:hover { background: var(--sz-accent-hover); border-color: var(--sz-accent-hover); }
.mt-btn--ghost { background: transparent; border-color: transparent; color: var(--sz-text-2); }
.mt-btn--ghost:hover { background: var(--sz-surface-2); color: var(--sz-text); }
.mt-btn--sm { padding: var(--sz-s-1) var(--sz-s-3); font-size: 0.8rem; }

.mt-icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sz-r-md); border: 1px solid transparent; background: transparent;
  color: var(--sz-text-3); cursor: pointer;
}
/* surface-3 (et non -2) pour rester visible même sur une ligne surlignée. */
.mt-icon-btn:hover { background: var(--sz-surface-3); color: var(--sz-text); }
.mt-icon-btn:focus-visible { outline: none; box-shadow: var(--sz-ring); }
/* Bouton d'ouverture AnyDesk : plein, rouge (couleur de la marque AnyDesk). */
.mt-anydesk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--sz-r-sm);
  background: var(--sz-red); color: var(--sz-on-red, #ffffff);
  transition: filter var(--sz-dur) var(--sz-ease);
}
/* SVG en bloc : sinon il s'aligne sur la ligne de base du texte et décale le centrage. */
.mt-anydesk-btn > svg { display: block; }
.mt-anydesk-btn:hover { filter: brightness(0.9); text-decoration: none; }
.mt-anydesk-btn:focus-visible { outline: none; box-shadow: var(--sz-ring); }
/* Même bouton en version libellée (fiche serveur) : gabarit .mt-btn, identique
   au .sv-btn des boutons d'action du module SAV. */
.mt-btn--anydesk { background: var(--sz-red); border-color: var(--sz-red); color: var(--sz-on-red, #ffffff); }
.mt-btn--anydesk:hover { background: var(--sz-red); filter: brightness(0.9); text-decoration: none; }
.mt-btn--anydesk > svg { display: block; }
.mt-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--sz-text-3); }

/* ── Toolbar / filtres ───────────────────────────────────────────────────── */
.mt-toolbar { display: flex; align-items: center; gap: var(--sz-s-2); flex-wrap: wrap; }
.mt-toolbar__spacer { flex: 1; }

.mt-search {
  display: flex; align-items: center; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-3); min-width: 220px;
  background: var(--sz-input); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
  color: var(--sz-text-3);
}
.mt-search:focus-within { border-color: var(--sz-border-focus); box-shadow: var(--sz-ring); }
.mt-search > svg { flex: none; }
.mt-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 0.875rem; color: var(--sz-text); }

/* Champ de recherche avec suggestions (autocomplétion). */
.mt-ac { position: relative; }
.mt-ac__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 2px; padding: var(--sz-s-1);
  background: var(--sz-surface); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-md); box-shadow: var(--sz-shadow-md);
  max-height: 260px; overflow-y: auto;
}
.mt-ac__item {
  display: flex; align-items: baseline; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-3); border: none; background: transparent;
  border-radius: var(--sz-r-sm); cursor: pointer; text-align: left;
  font: inherit; font-size: 0.875rem; color: var(--sz-text);
}
.mt-ac__item--survol { background: var(--sz-surface-2); }
.mt-ac__precision { font-size: 0.75rem; color: var(--sz-text-3); }
.mt-ac__vide { margin: 0; padding: var(--sz-s-2) var(--sz-s-3); font-size: 0.82rem; color: var(--sz-text-3); }
/* Retrait du filtre : discret, et seulement quand il y a quelque chose à retirer. */
.mt-ac__effacer {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%;
  background: var(--sz-surface-3); color: var(--sz-text-3); cursor: pointer;
}
.mt-ac__effacer:hover { color: var(--sz-text); }
/* Ville retenue : le champ porte une coche, le filtre est actif. */
.mt-search--validee { border-color: var(--sz-border-strong); }
.mt-search--validee > svg { color: var(--sz-green); }

/* Filtre actif venu d'ailleurs (ex. clic sur un anneau du Dashboard), retirable. */
.mt-filtre-chip {
  display: inline-flex; align-items: center; gap: var(--sz-s-2);
  padding: var(--sz-s-1-5) var(--sz-s-2) var(--sz-s-1-5) var(--sz-s-3);
  border: 1px solid var(--sz-border-strong); border-radius: var(--sz-r-pill);
  background: var(--sz-accent-soft); color: var(--sz-text);
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.mt-filtre-chip__retirer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%;
  background: var(--sz-surface-3); color: var(--sz-text-3); cursor: pointer;
}
.mt-filtre-chip__retirer:hover { color: var(--sz-text); }
.mt-filtre-chip__retirer:focus-visible { outline: none; box-shadow: var(--sz-ring); }

/* Sélection multiple (MultiSelect) : bouton façon .mt-select + menu à cases. */
.mt-ms { position: relative; }
.mt-ms__bouton { display: inline-flex; align-items: center; gap: var(--sz-s-2); max-width: 240px; text-align: left; }
.mt-ms__bouton > svg { flex: none; transform: rotate(90deg); color: var(--sz-text-3); }
.mt-ms__bouton--actif { border-color: var(--sz-border-strong); }
.mt-ms__resume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ms__menu { right: auto; min-width: 100%; width: max-content; max-width: 320px; }
.mt-ms__item { align-items: center; }
.mt-ms__item input { margin: 0; accent-color: var(--sz-accent); }
.mt-ms__vider { align-self: flex-start; margin-top: var(--sz-s-1); }

/* Période « Du … au … » dans une barre de filtres. */
.mt-periode { display: inline-flex; align-items: center; gap: var(--sz-s-1-5); font-size: 0.82rem; color: var(--sz-text-3); }
/* Sélecteur de date natif lisible en thème sombre. */
.theme-sevenbox[data-theme='dark'] .mt-periode input { color-scheme: dark; }

.mt-select {
  padding: var(--sz-s-2) var(--sz-s-3); font: inherit; font-size: 0.85rem;
  background: var(--sz-input); color: var(--sz-text);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); cursor: pointer;
}
.mt-select:focus-visible { outline: none; border-color: var(--sz-border-focus); box-shadow: var(--sz-ring); }

/* Groupe de boutons segmenté : granularité (jour / semaine / mois), sous-navigation
   de second niveau… Variante discrète de `.mt-tabs`, avec lequel il peut s'imbriquer. */
.mt-segmented {
  display: inline-flex; padding: 2px; gap: 2px; flex-wrap: wrap;
  align-self: flex-start; max-width: 100%;
  background: var(--sz-surface-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
}
.mt-segmented__item {
  display: inline-flex; align-items: center; gap: var(--sz-s-2);
  padding: var(--sz-s-1) var(--sz-s-3); border: none; background: transparent; cursor: pointer;
  border-radius: var(--sz-r-sm); font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--sz-text-2);
}
.mt-segmented__item:hover { color: var(--sz-text); }
.mt-segmented__item:focus-visible { outline: none; box-shadow: var(--sz-ring); }
.mt-segmented__item--active { background: var(--sz-surface); color: var(--sz-text); box-shadow: var(--sz-shadow-sm); }

/* ── Onglets (sous-navigation interne à une vue) ─────────────────────────── */
/* Même visuel que les sous-menus du module SAV (.sv-tabs) : segmented control.
   `.mt-segmented` en est la variante compacte, pour les bascules de granularité. */
.mt-tabs {
  display: inline-flex; gap: var(--sz-s-1); padding: var(--sz-s-1);
  background: var(--sz-surface-2); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-md);
  /* Le pill épouse son contenu même dans un conteneur flex qui étire (.mt-page). */
  align-self: flex-start;
  max-width: 100%;
}
.mt-tab {
  display: inline-flex; align-items: center; gap: var(--sz-s-2); flex: none;
  padding: var(--sz-s-2) var(--sz-s-4); border: none; background: transparent;
  border-radius: var(--sz-r-sm); font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--sz-text-2); cursor: pointer; white-space: nowrap;
}
.mt-tab:hover { color: var(--sz-text); }
.mt-tab:focus-visible { outline: none; box-shadow: var(--sz-ring); }
.mt-tab--active { background: var(--sz-surface); color: var(--sz-text); box-shadow: var(--sz-shadow-sm); }

/* Variante soulignée : sous-navigation d'un contenu déjà sous onglets, pour ne
   pas empiler deux rangées de pills identiques. */
.mt-tabs--souligne {
  display: flex; gap: 0; padding: 0; align-self: stretch;
  background: none; border: none; border-radius: 0;
  border-bottom: 2px solid var(--sz-border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.mt-tabs--souligne::-webkit-scrollbar { display: none; }
.mt-tabs--souligne .mt-tab {
  padding: var(--sz-s-3) var(--sz-s-5); border-radius: 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color var(--sz-dur) var(--sz-ease), border-color var(--sz-dur) var(--sz-ease);
}
.mt-tabs--souligne .mt-tab--active {
  background: none; box-shadow: none;
  color: var(--sz-accent); border-bottom-color: var(--sz-accent);
}

/* ── Empilement vertical générique (liste de panneaux) ───────────────────── */
/* `position: relative` : contient les .mt-sr-only placées dedans (une absolute
   sans bloc conteneur se rattache au bloc conteneur initial, échappe au
   `overflow: hidden` du shell et rallonge la zone scrollable du document). */
.mt-stack { display: flex; flex-direction: column; gap: var(--sz-s-5); position: relative; }

/* Réservé aux lecteurs d'écran (régions live, libellés d'appoint) : retiré de
   l'affichage mais restitué à la voix — à placer dans un parent positionné. */
.mt-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Champs de formulaire ────────────────────────────────────────────────── */
.mt-field { display: flex; flex-direction: column; gap: var(--sz-s-1-5); min-width: 0; }
.mt-label {
  font-size: 0.72rem; font-weight: 700; color: var(--sz-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mt-input {
  padding: var(--sz-s-2) var(--sz-s-3); font: inherit; font-size: 0.875rem;
  background: var(--sz-input); color: var(--sz-text);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
  min-width: 0; width: 100%;
}
.mt-input:focus-visible { outline: none; border-color: var(--sz-border-focus); box-shadow: var(--sz-ring); }
.mt-input:disabled { opacity: 0.5; cursor: not-allowed; }
/* Valeurs chiffrées : chasse fixe, comme dans les tableaux. */
.mt-input--num { font-family: var(--sz-font-data); font-variant-numeric: tabular-nums; }
.mt-hint { margin: 0; font-size: 0.78rem; color: var(--sz-text-3); }

/* Message d'état d'un formulaire (validation, sauvegarde). */
.mt-form-msg { display: inline-flex; align-items: center; gap: var(--sz-s-2); font-size: 0.8rem; font-weight: 600; color: var(--sz-text-3); }
.mt-form-msg--error { color: var(--sz-red); }
.mt-form-msg--ok { color: var(--sz-green); }

/* Interrupteur on/off (checkbox visuellement remplacée). */
.mt-switch {
  display: inline-flex; align-items: center; gap: var(--sz-s-2); cursor: pointer;
  font-size: 0.8rem; font-weight: 600; color: var(--sz-text-2); user-select: none;
  /* Indispensable : sans bloc conteneur, la checkbox en position absolute se
     rattache au bloc conteneur initial, échappe au `overflow: hidden` du shell
     et rallonge la zone scrollable du document (2e barre de défilement). */
  position: relative;
}
.mt-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mt-switch__track {
  position: relative; flex: none; width: 36px; height: 20px;
  background: var(--sz-surface-3); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-pill);
  transition: background-color var(--sz-dur) var(--sz-ease), border-color var(--sz-dur) var(--sz-ease);
}
.mt-switch__track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--sz-text-3);
  transition: transform var(--sz-dur) var(--sz-ease), background-color var(--sz-dur) var(--sz-ease);
}
.mt-switch input:checked + .mt-switch__track { background: var(--sz-accent); border-color: var(--sz-accent); }
.mt-switch input:checked + .mt-switch__track::after { transform: translateX(16px); background: var(--sz-on-accent); }
.mt-switch input:focus-visible + .mt-switch__track { box-shadow: var(--sz-ring); }
.mt-switch input:disabled + .mt-switch__track { opacity: 0.5; }

/* ── Panneau / carte ─────────────────────────────────────────────────────── */
.mt-panel {
  background: var(--sz-surface); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-lg); box-shadow: var(--sz-shadow-sm);
}
/* Titre de panneau suivi de chips (décomptes, états). */
.mt-panel__titres { display: flex; align-items: center; gap: var(--sz-s-3); flex-wrap: wrap; min-width: 0; }
.mt-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-3);
  padding: var(--sz-s-4) var(--sz-s-5); border-bottom: 1px solid var(--sz-border);
}
.mt-panel__title { margin: 0; font-size: 0.95rem; font-weight: 700; }
.mt-panel__body { padding: var(--sz-s-5); }
/* Pied de panneau : état à gauche, action à droite. */
.mt-panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-3);
  padding: var(--sz-s-3) var(--sz-s-5); border-top: 1px solid var(--sz-border);
  flex-wrap: wrap;
}

/* Panneau repliable : le bouton vit DANS le titre (motif accordéon ARIA). */
.mt-panel__head--accordeon { justify-content: flex-start; }
.mt-panel__head--accordeon .mt-panel__title { flex: 1; min-width: 0; }
.mt-panel--ferme .mt-panel__head { border-bottom: none; }
.mt-panel__toggle {
  display: inline-flex; align-items: center; gap: var(--sz-s-3); width: 100%;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.mt-panel__toggle:focus-visible { outline: none; box-shadow: var(--sz-ring); border-radius: var(--sz-r-sm); }
.mt-panel__chevron {
  display: inline-flex; flex: none; color: var(--sz-text-3);
  transition: transform var(--sz-dur) var(--sz-ease), color var(--sz-dur) var(--sz-ease);
}
.mt-panel__toggle:hover .mt-panel__chevron { color: var(--sz-text); }
.mt-panel__toggle[aria-expanded='true'] .mt-panel__chevron { transform: rotate(90deg); }
/* Panneau contenant un tableau bord à bord : le fond de l'en-tête collant ne
   doit pas déborder des coins arrondis. */
.mt-panel--table { overflow: hidden; }
/* Panneau qui remplit la hauteur de sa ligne (corps extensible). */
.mt-panel--fill { display: flex; flex-direction: column; }
.mt-panel--fill .mt-panel__body { flex: 1; }

/* ── Grilles ─────────────────────────────────────────────────────────────── */
.mt-grid { display: grid; gap: var(--sz-s-4); }
.mt-grid--kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Exactement trois colonnes (disposition de la fiche serveur), puis dégradé. */
.mt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mt-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .mt-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.mt-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--sz-s-5); align-items: start; }
@media (max-width: 900px) { .mt-cols { grid-template-columns: minmax(0, 1fr); } }

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.mt-kpi {
  display: flex; flex-direction: column; gap: var(--sz-s-2);
  padding: var(--sz-s-5); background: var(--sz-surface);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); box-shadow: var(--sz-shadow-sm);
}
.mt-kpi__label {
  font-size: 0.75rem; font-weight: 700; color: var(--sz-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mt-kpi__value { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.mt-kpi__hint { font-size: 0.8rem; color: var(--sz-text-2); }
.mt-kpi__value--green { color: var(--sz-green); }
.mt-kpi__value--red { color: var(--sz-red); }
.mt-kpi__value--amber { color: var(--sz-amber); }
/* KPI cliquable (raccourci vers une vue détaillée). */
.mt-kpi--link { position: relative; cursor: pointer; text-align: left; font: inherit; transition: border-color var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease); }
.mt-kpi--link:hover { border-color: var(--sz-border-strong); box-shadow: var(--sz-shadow-md); }
.mt-kpi--link:focus-visible { outline: none; box-shadow: var(--sz-ring); }
.mt-kpi__go { position: absolute; top: var(--sz-s-3); right: var(--sz-s-3); display: inline-flex; color: var(--sz-text-3); opacity: 0.55; transition: opacity var(--sz-dur) var(--sz-ease), transform var(--sz-dur) var(--sz-ease); }
.mt-kpi--link:hover .mt-kpi__go { opacity: 1; color: var(--sz-text); transform: translateX(2px); }

/* Variation par rapport à une période de référence. */
.mt-delta { display: inline-flex; align-items: baseline; gap: 4px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sz-text-3); }
.mt-delta--up { color: var(--sz-green); }
.mt-delta--down { color: var(--sz-red); }
.mt-delta__ref { font-weight: 500; color: var(--sz-text-3); }

/* Barre de progression d'une jauge (CPU, RAM…). */
.mt-progress {
  display: block; width: 100%; height: 6px; border-radius: var(--sz-r-pill);
  background: var(--sz-surface-3); overflow: hidden;
}
.mt-progress__fill {
  display: block; height: 100%; border-radius: inherit; background: var(--sz-accent);
  transition: width var(--sz-dur) var(--sz-ease);
}
.mt-progress__fill--green { background: var(--sz-green); }
.mt-progress__fill--amber { background: var(--sz-amber); }
.mt-progress__fill--red { background: var(--sz-red); }

/* ── Section titrée + cartes de détail ───────────────────────────────────── */
.mt-section { display: flex; flex-direction: column; gap: var(--sz-s-3); }
.mt-section-title { display: flex; align-items: center; gap: var(--sz-s-2); }
/* Variante « fiche » : titre lisible plutôt qu'étiquette en capitales. */
.mt-section-title--fiche {
  font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--sz-text);
}
.mt-section-title--fiche > svg { color: var(--sz-blue); flex: none; }

/* En-tête de fiche : nom du site + statut, puis nom d'hôte et ville en dessous. */
.mt-fiche-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sz-s-4); flex-wrap: wrap;
}
.mt-fiche-head__infos { display: flex; flex-direction: column; gap: var(--sz-s-2); min-width: 0; }
.mt-fiche-head__top { display: flex; align-items: center; gap: var(--sz-s-3); flex-wrap: wrap; }
.mt-fiche-head__meta {
  display: flex; align-items: center; gap: var(--sz-s-3); flex-wrap: wrap;
  margin: 0; font-size: 0.85rem; color: var(--sz-text-3);
}
.mt-fiche-head__item { display: inline-flex; align-items: center; gap: var(--sz-s-1-5); }
.mt-fiche-head__sep { width: 1px; height: 12px; background: var(--sz-border-strong); }
.mt-fiche-head__actions { display: flex; align-items: center; gap: var(--sz-s-2); flex-wrap: wrap; }
/* Bouton « Muet » quand le mode est réglé : reste neutre mais se démarque. */
.mt-btn--muet { background: var(--sz-surface-3); border-color: var(--sz-border-strong); }
.mt-btn--muet:hover { background: var(--sz-surface-3); border-color: var(--sz-text-3); }

/* Carte « libellé + valeur » (une information par carte). */
.mt-info {
  display: flex; flex-direction: column; gap: var(--sz-s-1);
  padding: var(--sz-s-4) var(--sz-s-5); background: var(--sz-surface);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); box-shadow: var(--sz-shadow-sm);
}
.mt-info__label {
  font-size: 0.7rem; font-weight: 700; color: var(--sz-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mt-info__value { font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
/* Deux informations côte à côte dans une carte d'info (ex. IP · site public). */
.mt-info__ligne { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--sz-s-2); row-gap: 2px; }
.mt-info__sep { color: var(--sz-text-dim); }
/* Information secondaire d'une carte d'info : lien externe, ou mention d'absence. */
.mt-info__lien { font-size: 0.82rem; font-weight: 600; }
.mt-info__sub { font-size: 0.82rem; font-weight: 400; color: var(--sz-text-3); }

/* Carte de métrique : pastille + libellé/valeur, et barre de progression. */
.mt-metric {
  display: flex; flex-direction: column; gap: var(--sz-s-3);
  padding: var(--sz-s-4) var(--sz-s-5); background: var(--sz-surface);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); box-shadow: var(--sz-shadow-sm);
}
.mt-metric__head { display: flex; align-items: center; gap: var(--sz-s-3); min-width: 0; }
.mt-metric__icon {
  width: 34px; height: 34px; flex: none; border-radius: var(--sz-r-md);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Couleur fixe : elle identifie la métrique, elle ne juge pas sa valeur. */
.mt-metric__icon--blue { background: var(--sz-blue-soft); color: var(--sz-blue); }
.mt-metric__icon--green { background: var(--sz-green-soft); color: var(--sz-green); }
.mt-metric__icon--amber { background: var(--sz-amber-soft); color: var(--sz-amber); }
.mt-metric__icon--red { background: var(--sz-red-soft); color: var(--sz-red); }
.mt-metric__icon--gray { background: var(--sz-surface-2); color: var(--sz-text-3); }
.mt-metric__texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mt-metric__label { font-size: 0.75rem; color: var(--sz-text-3); }
.mt-metric__value { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
/* Précision sous la valeur (ex. « 3/4 LPR connectées »). */
.mt-metric__detail { font-size: 0.75rem; color: var(--sz-text-3); font-variant-numeric: tabular-nums; }
.mt-metric__detail--alerte { color: var(--sz-red); font-weight: 700; }

/* ── Liste de définitions (fiche d'équipement) ───────────────────────────── */
.mt-deflist {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sz-s-2) var(--sz-s-4); margin: 0; align-items: baseline;
}
.mt-deflist__label { font-size: 0.8rem; color: var(--sz-text-3); white-space: nowrap; }
.mt-deflist__value { margin: 0; font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }

/* Équipement : bloc LPR et pastilles de périphériques. */
.mt-eq-lpr { display: flex; align-items: center; gap: var(--sz-s-3); margin-top: var(--sz-s-4); }
.mt-eq-perifs { display: flex; flex-wrap: wrap; gap: var(--sz-s-2); margin-top: var(--sz-s-3); }
/* Équipement désactivé en base : présent mais hors service. */
.mt-panel--inactif { opacity: 0.65; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.mt-badge {
  display: inline-flex; align-items: center; gap: var(--sz-s-1);
  padding: 2px var(--sz-s-2); border-radius: var(--sz-r-pill);
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  background: var(--sz-surface-2); color: var(--sz-text-2);
}
.mt-badge--green { background: var(--sz-green-soft); color: var(--sz-green); }
.mt-badge--red { background: var(--sz-red-soft); color: var(--sz-red); }
.mt-badge--amber { background: var(--sz-amber-soft); color: var(--sz-amber); }
.mt-badge--blue { background: var(--sz-blue-soft); color: var(--sz-blue); }
/* Plusieurs badges d'état dans une même cellule. */
.mt-etats { display: inline-flex; align-items: center; gap: var(--sz-s-2); flex-wrap: wrap; }
/* Badge « clé : valeur » — la clé s'efface au profit de l'état. */
.mt-badge__cle { font-weight: 600; color: var(--sz-text-3); }
.mt-badge__cle::after { content: ' :'; }

/* Badge acronyme d'entité (couleur portée par --mt-entite-color, cf. EntiteBadge). */
.mt-entite {
  display: inline-flex; align-items: center;
  padding: 2px var(--sz-s-2); border-radius: var(--sz-r-pill);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--mt-entite-text-light, var(--mt-entite-color));
  background: color-mix(in srgb, var(--mt-entite-color) 14%, transparent);
}
.theme-sevenbox[data-theme='dark'] .mt-entite {
  color: var(--mt-entite-color);
  background: color-mix(in srgb, var(--mt-entite-color) 20%, transparent);
}

/* ── Tableau ─────────────────────────────────────────────────────────────── */
/* overflow-y explicite : `visible` serait calculé en `auto` et le conteneur
   deviendrait un scroller VERTICAL parasite (cf. .mt-tabs). */
.mt-table-wrap { overflow-x: auto; overflow-y: hidden; }
.mt-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.mt-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sz-table-head-bg); color: var(--sz-text-3);
  text-align: left; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: var(--sz-s-3) var(--sz-s-4); border-bottom: 1px solid var(--sz-border);
  white-space: nowrap;
}
.mt-table td { padding: var(--sz-s-3) var(--sz-s-4); border-bottom: 1px solid var(--sz-border); color: var(--sz-text); }
.mt-table tbody tr:hover td { background: var(--sz-surface-2); }
/* Ligne menant à une fiche détaillée. */
.mt-table tbody tr.is-clickable { cursor: pointer; }
.mt-table tbody tr.is-clickable:focus-visible { outline: none; box-shadow: var(--sz-ring); }
/* Serveur muet : la ligne passe en retrait, sauf la colonne de statut qui dit pourquoi. */
.mt-table tbody tr.is-muet > td:not(:first-child) { opacity: 0.5; }
.mt-table tbody tr.is-muet:hover > td:not(:first-child) { opacity: 0.8; }
/* Sous-niveau (arborescence de services) : décalage + filet de rattachement. */
.mt-subrow { padding-left: var(--sz-s-7) !important; position: relative; color: var(--sz-text-2); }
.mt-subrow::before {
  content: ''; position: absolute; left: var(--sz-s-5); top: 50%; width: 8px;
  border-top: 1px solid var(--sz-border-strong);
}
/* Colonnes de valeurs : chiffres alignés et de chasse fixe. */
.mt-table .mt-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Mêmes chiffres de chasse fixe, mais alignés à gauche comme le reste du tableau. */
.mt-tnum { font-variant-numeric: tabular-nums; }
/* Appréciation d'une valeur chiffrée (seuils propres à chaque indicateur).
   Le sélecteur `td` est indispensable : posée sur une cellule, la classe seule
   perdrait contre `.mt-table td { color }`, plus spécifique. */
.mt-num--green, .mt-table td.mt-num--green { color: var(--sz-green); font-weight: 700; }
.mt-num--amber, .mt-table td.mt-num--amber { color: var(--sz-amber); font-weight: 700; }
.mt-num--red, .mt-table td.mt-num--red { color: var(--sz-red); font-weight: 700; }

/* Cellule sur deux lignes : information principale au-dessus, secondaire dessous. */
.mt-cell-stack { display: flex; flex-direction: column; gap: 2px; }
.mt-cell-stack__main { font-weight: 600; }
.mt-cell-stack__sub { font-size: 0.78rem; color: var(--sz-text-3); }
/* Sous-ligne signalant une anomalie (ex. une LPR déconnectée). */
.mt-cell-stack__sub--alerte { color: var(--sz-red); font-weight: 700; }

/* Étiquette technique (version, référence) : chasse fixe sur fond discret. */
.mt-tag {
  display: inline-block; padding: 2px var(--sz-s-2); border-radius: var(--sz-r-sm);
  background: var(--sz-surface-2); color: var(--sz-text-2);
  font-family: var(--sz-font-data); font-size: 0.75rem;
}
.mt-mono { font-family: var(--sz-font-data); font-size: 0.82rem; white-space: nowrap; }
.mt-muted { color: var(--sz-text-3); }
/* Cellules à ne jamais couper (identifiants, noms d'hôte). */
.mt-nowrap { white-space: nowrap; }

/* Pastille de statut, colorée par le ton du badge qui la porte. */
.mt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* Hors badge (légende), la couleur doit être portée explicitement. */
.mt-dot--green { background: var(--sz-green); }
.mt-dot--red { background: var(--sz-red); }

/* ── Carte (Google Maps) ─────────────────────────────────────────────────── */
.mt-map { position: relative; height: 560px; min-height: 320px; }
.mt-map__canvas { position: absolute; inset: 0; background: var(--sz-surface-2); }

.mt-map__legende { display: flex; align-items: center; gap: var(--sz-s-4); flex-wrap: wrap; }
.mt-map__legende-item { display: inline-flex; align-items: center; gap: var(--sz-s-2); font-size: 0.78rem; color: var(--sz-text-2); }
/* Aperçu, dans la légende, de la pastille de regroupement dessinée sur la carte. */
.mt-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sz-text-3); color: var(--sz-bg);
  font-size: 0.62rem; font-weight: 700; font-style: italic;
}

/* Bandeau discret pendant la résolution des adresses. */
.mt-map__etat {
  position: absolute; top: var(--sz-s-3); left: var(--sz-s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-3); border-radius: var(--sz-r-pill);
  background: var(--sz-overlay); border: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-sm); font-size: 0.78rem; color: var(--sz-text-2);
}

/* Message par-dessus la carte : chargement, erreur, recherche sans résultat.
   La carte reste visible derrière, elle n'est jamais remplacée. */
.mt-map__message {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: inline-flex; align-items: center; gap: var(--sz-s-3);
  max-width: calc(100% - var(--sz-s-6));
  padding: var(--sz-s-3) var(--sz-s-5); border-radius: var(--sz-r-lg);
  background: var(--sz-surface); border: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-md); font-size: 0.85rem; color: var(--sz-text-2);
}

/* Fiche ouverte au clic sur un marqueur. */
.mt-map__fiche {
  position: absolute; top: var(--sz-s-3); right: var(--sz-s-3); z-index: 3;
  width: 260px; max-width: calc(100% - var(--sz-s-6));
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sz-s-3);
  padding: var(--sz-s-4); border-radius: var(--sz-r-lg);
  background: var(--sz-surface); border: 1px solid var(--sz-border); box-shadow: var(--sz-shadow-md);
}
.mt-map__fiche-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sz-s-2); width: 100%; }
.mt-map__fiche-adresse { margin: 0; font-size: 0.82rem; color: var(--sz-text-2); }

.mt-map__note {
  display: flex; align-items: center; gap: var(--sz-s-2); flex-wrap: wrap;
  margin: 0; padding: var(--sz-s-3) var(--sz-s-4);
  border-top: 1px solid var(--sz-border); font-size: 0.8rem; color: var(--sz-text-3);
}

@media (max-width: 900px) {
  .mt-map { height: 420px; }
  /* La fiche passe en bandeau bas : à cette largeur, elle masquerait la carte. */
  .mt-map__fiche {
    top: auto; bottom: var(--sz-s-3); left: var(--sz-s-3); right: var(--sz-s-3);
    width: auto; max-width: none;
  }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.mt-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-3);
  padding: var(--sz-s-3) var(--sz-s-4); border-top: 1px solid var(--sz-border);
  font-size: 0.85rem; color: var(--sz-text-2);
}
.mt-pagination__left { display: flex; align-items: center; gap: var(--sz-s-4); }
.mt-pagination__nav { display: flex; align-items: center; gap: var(--sz-s-2); }
.mt-pagesize { display: inline-flex; align-items: center; gap: var(--sz-s-2); white-space: nowrap; }
.mt-pagesize__select { width: auto; padding: var(--sz-s-1) var(--sz-s-2); font-size: 0.85rem; }

.mt-pager { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.mt-pager__arrow, .mt-pager__page {
  min-width: 30px; height: 30px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sz-border); background: var(--sz-surface); color: var(--sz-text-2);
  border-radius: var(--sz-r-md); font-size: 0.85rem; font-family: var(--sz-font-data); cursor: pointer;
}
.mt-pager__arrow:hover:not(:disabled), .mt-pager__page:hover:not(.is-active) {
  background: var(--sz-surface-2); color: var(--sz-text); border-color: var(--sz-border-strong);
}
.mt-pager__page.is-active { background: var(--sz-accent); color: var(--sz-on-accent); border-color: var(--sz-accent); font-weight: 700; cursor: default; }
.mt-pager__arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.mt-pager__dots { min-width: 22px; text-align: center; color: var(--sz-text-3); user-select: none; }

/* Overlay de rechargement : spinner par-dessus le tableau sans le vider
   (la pagination reste fluide, pas de saut de mise en page). */
.mt-loading-host { position: relative; }
.mt-loading-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sz-bg) 55%, transparent);
  border-radius: var(--sz-r-lg);
}

@media (max-width: 900px) {
  .mt-pagination { flex-direction: column; align-items: stretch; gap: var(--sz-s-3); }
  .mt-pagination__left { flex-wrap: wrap; justify-content: space-between; gap: var(--sz-s-2) var(--sz-s-3); }
  .mt-pagination__nav { justify-content: space-between; }
}

/* ── États (chargement, vide, erreur) ────────────────────────────────────── */
.mt-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sz-s-2); padding: var(--sz-s-7) var(--sz-s-5); text-align: center;
  color: var(--sz-text-3);
}
.mt-state__title { font-size: 0.95rem; font-weight: 700; color: var(--sz-text); }
.mt-state__text { font-size: 0.875rem; color: var(--sz-text-2); max-width: 420px; }

.mt-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--sz-border-strong); border-top-color: var(--sz-accent);
  animation: mt-spin 700ms linear infinite;
}
@keyframes mt-spin { to { transform: rotate(360deg); } }
/* Version en ligne, à hauteur de texte. */
.mt-spinner--xs { width: 14px; height: 14px; border-width: 2px; flex: none; }

/* Squelette de chargement (placeholder de bloc). */
.mt-skeleton {
  background: var(--sz-surface-2); border-radius: var(--sz-r-sm);
  animation: mt-pulse 1.4s ease-in-out infinite;
}
@keyframes mt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Règle d'alerte (configuration des seuils) ───────────────────────────── */
/* Liste de règles dans un .mt-panel__body : pas de gouttière, chaque règle tient
   sur UNE ligne (identité à gauche, réglages à droite) et les lignes sont
   séparées par un filet, comme les lignes d'un tableau. */
.mt-rules { padding: 0; }
.mt-rule {
  /* Colonne d'identité centrée sur la hauteur de la ligne ; les réglages, eux,
     restent alignés par le bas (cf. .mt-rule__controls) pour que les champs
     s'alignent d'une ligne à l'autre. */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sz-s-6); padding: var(--sz-s-4) var(--sz-s-5); flex-wrap: wrap;
  transition: background-color var(--sz-dur) var(--sz-ease);
}
.mt-rule + .mt-rule { border-top: 1px solid var(--sz-border); }
.mt-rule:hover { background: var(--sz-surface-2); }

.mt-rule__ident { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-rule__libelle { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.mt-rule__code { font-family: var(--sz-font-data); font-size: 0.72rem; color: var(--sz-text-3); overflow-wrap: anywhere; }
/* Troisième ligne de la colonne d'identité, montée seulement quand il y a un état
   à montrer. Elle reste plus courte que la colonne de réglages en face, donc la
   hauteur de la ligne — et la position des champs — ne bouge pas. */
.mt-rule__msg { margin-top: 2px; }

.mt-rule__controls { display: flex; align-items: flex-end; gap: var(--sz-s-4); flex: none; }
/* Largeurs fixes : les réglages s'alignent en colonnes d'une ligne à l'autre. */
.mt-field--sens { width: 170px; }
.mt-field--num { width: 108px; }
.mt-field--niveau { width: 190px; }
.mt-field--switch { align-items: flex-start; padding-bottom: var(--sz-s-2); }
/* Les réglages restent collés au bord droit : rien ne leur est réservé à droite,
   l'état de l'enregistrement s'affiche dans la colonne d'identité. */

/* Onglets : scroll horizontal seulement quand ils ne tiennent plus en largeur.
   overflow-y explicite, sinon `visible` est calculé en `auto` et le conteneur
   devient aussi un scroller VERTICAL (même précaution que .layout__nav). */
@media (max-width: 900px) {
  .mt-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .mt-tabs::-webkit-scrollbar { display: none; }
}

/* Réglages trop larges pour tenir à côté du libellé : ils passent dessous (le
   `flex-wrap` de .mt-rule s'en charge) et leurs champs se répartissent sur
   plusieurs lignes. Pas de `width: 100%` ici : une ligne à un seul champ doit
   rester à côté de son libellé. */
@media (max-width: 1100px) {
  .mt-rule__controls { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .mt-rule { padding: var(--sz-s-4); }
  .mt-rule__controls { flex-direction: column; align-items: stretch; }
  .mt-field--sens, .mt-field--num, .mt-field--niveau { width: 100%; }
}

/* ── Graphiques (Recharts) ───────────────────────────────────────────────── */
/* Conteneur à hauteur définie : ResponsiveContainer a besoin d'un parent mesurable. */
.mt-chart { width: 100%; height: 280px; }
.mt-chart--sm { height: 200px; }
.mt-chart--lg { height: 360px; }
/* Tooltip Recharts realigné sur le thème (il pose des styles inline par défaut). */
.mt-chart .recharts-default-tooltip {
  background: var(--sz-overlay) !important;
  border: 1px solid var(--sz-border) !important;
  border-radius: var(--sz-r-md);
  box-shadow: var(--sz-shadow-md);
  font-size: 0.8rem;
}
.mt-chart .recharts-cartesian-axis-tick-value { fill: var(--sz-text-3); font-size: 0.75rem; }
.mt-chart .recharts-cartesian-grid line { stroke: var(--sz-grid-line); }

/* ── Dashboard : cartes à anneau ─────────────────────────────────────────── */
/* Cinq cartes sur une ligne, repliées sur les écrans plus étroits. */
.mt-donuts { display: grid; gap: var(--sz-s-4); grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .mt-donuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .mt-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mt-donuts { grid-template-columns: minmax(0, 1fr); } }

.mt-donut { display: flex; flex-direction: column; gap: var(--sz-s-3); padding: var(--sz-s-4); min-width: 0; }
.mt-donut__head { display: flex; align-items: center; justify-content: center; gap: var(--sz-s-2); color: var(--sz-text-3); }
.mt-donut__titre {
  margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--sz-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* Donut à gauche, légende à droite. */
/* Bloc donut + légende centré dans la carte, verticalement comme horizontalement. */
.mt-donut__corps { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sz-s-4); min-width: 0; }
/* Anneau + total superposé au centre. */
/* Le donut rétrécit un peu si la carte est étroite, sans descendre sous 120px. */
.mt-donut__plot { position: relative; flex: 0 1 160px; min-width: 120px; aspect-ratio: 1; }
.mt-donut__chart { height: 100%; }
.mt-donut__centre {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mt-donut__total { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--sz-text); font-variant-numeric: tabular-nums; }
.mt-donut__unite { font-size: 0.72rem; color: var(--sz-text-3); }
/* Légende : pastille + libellé + nombre, texte toujours dans les couleurs de texte. */
/* Légende longue (une entrée par version) : défile au lieu d'agrandir la carte. */
.mt-donut__legende { max-height: 160px; overflow-y: auto; flex: 0 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sz-s-1-5); }
.mt-donut__item { display: flex; align-items: center; gap: var(--sz-s-2); font-size: 0.8rem; color: var(--sz-text-2); }
/* Entrée de légende cliquable : bouton remis à plat, souligné au survol. */
.mt-donut__item--lien {
  width: 100%; padding: 0; border: none; background: none; font: inherit; font-size: 0.8rem;
  text-align: left; cursor: pointer; border-radius: var(--sz-r-sm);
}
.mt-donut__item--lien:hover .mt-donut__label { color: var(--sz-text); text-decoration: underline; }
.mt-donut__item--lien:focus-visible { outline: none; box-shadow: var(--sz-ring); }
/* Part d'anneau cliquable. */
.mt-donut__part--lien { cursor: pointer; }
.mt-donut__part--lien:hover { opacity: 0.85; }
.mt-donut__pastille { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mt-donut__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-donut__tooltip {
  /* Suit le curseur : coordonnées écran, au-dessus de tout, sans capter la souris. */
  position: fixed; z-index: 1000; pointer-events: none;
  display: inline-flex; align-items: center; gap: var(--sz-s-2); white-space: nowrap;
  padding: var(--sz-s-1-5) var(--sz-s-3); font-size: 0.8rem; color: var(--sz-text);
  background: var(--sz-overlay); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-md); box-shadow: var(--sz-shadow-md);
}

/* ── Panneau latéral (drawer) ────────────────────────────────────────────── */
/* Même gabarit que le .sv-drawer du module SAV. Pas de token de voile dans la
   charte : repli sur la valeur du SAV. */
.mt-drawer__overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--sz-scrim, rgba(11, 14, 18, 0.45));
  display: flex; justify-content: flex-end;
}
.mt-drawer {
  width: min(480px, 100%); height: 100%; background: var(--sz-surface); color: var(--sz-text);
  border-left: 1px solid var(--sz-border); box-shadow: var(--sz-shadow-md);
  display: flex; flex-direction: column; animation: mt-slide var(--sz-dur) var(--sz-ease);
}
@keyframes mt-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mt-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-3);
  padding: var(--sz-s-5); border-bottom: 1px solid var(--sz-border);
}
.mt-drawer__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.mt-drawer__body {
  flex: 1; overflow-y: auto; padding: var(--sz-s-5);
  display: flex; flex-direction: column; gap: var(--sz-s-4);
}
.mt-drawer__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sz-s-2);
  padding: var(--sz-s-4) var(--sz-s-5); border-top: 1px solid var(--sz-border);
}
/* Message d'erreur du pied : poussé à gauche, les boutons restent à droite. */
.mt-drawer__msg { margin-right: auto; }

/* Choix exclusif présenté en cartes (radio natif conservé pour le clavier). */
.mt-choix-groupe { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: var(--sz-s-2); min-width: 0; }
.mt-choix-groupe > legend { padding: 0; margin-bottom: var(--sz-s-2); }
.mt-choix {
  display: flex; align-items: flex-start; gap: var(--sz-s-3);
  padding: var(--sz-s-3) var(--sz-s-4); cursor: pointer;
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); background: var(--sz-surface);
  transition: border-color var(--sz-dur) var(--sz-ease), background-color var(--sz-dur) var(--sz-ease);
}
.mt-choix:hover { background: var(--sz-surface-2); }
.mt-choix:focus-within { box-shadow: var(--sz-ring); }
.mt-choix--actif, .mt-choix--actif:hover { border-color: var(--sz-accent); background: var(--sz-accent-soft); }
.mt-choix input { margin: 3px 0 0; accent-color: var(--sz-accent); flex: none; }
.mt-choix__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-choix__titre { font-size: 0.875rem; font-weight: 600; }
.mt-choix__detail { font-size: 0.78rem; color: var(--sz-text-3); }

/* Ligne de période (mode muet périodique) : début, fin, retrait. */
.mt-mute-periode { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: var(--sz-s-2); }
.mt-mute-periode__retirer { margin-bottom: 2px; }
.mt-mute-periode__ajouter { align-self: flex-start; }
/* Sélecteur de date natif lisible en sombre, comme pour la période des alertes. */
.theme-sevenbox[data-theme='dark'] .mt-drawer input { color-scheme: dark; }
@media (max-width: 480px) {
  .mt-mute-periode { grid-template-columns: 1fr auto; }
  .mt-mute-periode > .mt-field:nth-child(2) { grid-column: 1; }
  .mt-mute-periode__retirer { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}

/* ── Historique d'un serveur (courbes + frises d'état) ───────────────────── */
/* Titre de section suivi d'un sélecteur (équipement, onduleur). */
.mt-section__head { display: flex; align-items: center; gap: var(--sz-s-3); flex-wrap: wrap; }
.mt-chart-unite { font-weight: 400; color: var(--sz-text-3); }

/* Plage affichée, en clair à côté des boutons de plage. */
.mt-fenetre__libelle {
  min-width: 0; font-size: 0.8rem; font-weight: 600;
  color: var(--sz-text-2); font-variant-numeric: tabular-nums;
}

/* Barre d'outils + navigateur, collés en haut du scroller pendant le défilement.
   Présentés en carte opaque, pour rester lisibles au-dessus des graphiques ;
   l'ombre n'apparaît qu'une fois la carte collée, quand du contenu passe dessous. */
.mt-historique__repere { display: block; height: 0; margin-bottom: calc(-1 * var(--sz-s-5)); }
.mt-historique__commandes {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-direction: column; gap: var(--sz-s-3);
  padding: var(--sz-s-3) var(--sz-s-4);
  background: var(--sz-surface); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-lg); box-shadow: var(--sz-shadow-sm);
  transition: box-shadow var(--sz-dur) var(--sz-ease), border-color var(--sz-dur) var(--sz-ease);
}
.mt-historique__commandes--colle { box-shadow: var(--sz-shadow-md); border-color: var(--sz-border-strong); }
/* Dans la carte, la piste du navigateur se détache du fond de carte. */
.mt-historique__commandes .mt-navigateur__piste { background: var(--sz-surface-2); }

/* Navigateur : aperçu de toute la période + fenêtre de la plage affichée. */
.mt-navigateur { display: flex; flex-direction: column; gap: 2px; user-select: none; }
.mt-navigateur__piste {
  position: relative; height: 48px; overflow: hidden; cursor: pointer; touch-action: none;
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
}
.mt-navigateur__apercu { position: absolute; inset: 0; width: 100%; height: 100%; }
.mt-navigateur__courbe { fill: none; stroke: var(--sz-cat-c1); stroke-width: 1.5; }
.mt-navigateur__minuit { stroke: var(--sz-grid-line); stroke-width: 1; }
.mt-navigateur__deconnexion { fill: var(--sz-red-soft); }
.mt-navigateur__masque {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: color-mix(in srgb, var(--sz-text) 10%, transparent);
}
.mt-navigateur__fenetre {
  position: absolute; top: 0; bottom: 0; cursor: grab;
  border: 1px solid var(--sz-accent); border-radius: var(--sz-r-sm);
  background: color-mix(in srgb, var(--sz-accent) 8%, transparent);
}
.mt-navigateur__fenetre--active { cursor: grabbing; }
.mt-navigateur__fenetre:focus-visible { outline: none; box-shadow: var(--sz-ring); }
/* Poignées : zone de prise large (12 px), repère visuel étroit. */
.mt-navigateur__poignee { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.mt-navigateur__poignee--gauche { left: -6px; }
.mt-navigateur__poignee--droite { right: -6px; }
.mt-navigateur__poignee::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 20px;
  transform: translate(-50%, -50%); border-radius: 2px;
  background: var(--sz-surface); border: 1px solid var(--sz-accent);
}
.mt-navigateur__jours { position: relative; height: 14px; font-size: 0.68rem; color: var(--sz-text-3); }
.mt-navigateur__jours > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 600px) { .mt-navigateur__jours { display: none; } }

/* Zoom par glisser sur une courbe. */
.mt-chart--zoom { cursor: crosshair; user-select: none; }

/* Légende : libellés en encre de texte, la couleur est portée par le trait. */
.mt-chart-legende {
  display: flex; flex-wrap: wrap; gap: var(--sz-s-1) var(--sz-s-4);
  margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--sz-text-2);
}
.mt-chart-legende li { display: inline-flex; align-items: center; gap: var(--sz-s-1-5); }
.mt-chart-legende__trait { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.mt-chart-legende__pastille { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Infobulle : dans le graphique (Recharts) ou flottante au curseur (frises). */
.mt-chart-tip {
  display: flex; flex-direction: column; gap: var(--sz-s-1);
  padding: var(--sz-s-2) var(--sz-s-3); font-size: 0.8rem; color: var(--sz-text);
  background: var(--sz-overlay); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-md); box-shadow: var(--sz-shadow-md); white-space: nowrap;
}
.mt-chart-tip--flottant { position: fixed; z-index: 1000; pointer-events: none; }
.mt-chart-tip__date { font-size: 0.75rem; color: var(--sz-text-3); font-variant-numeric: tabular-nums; }
.mt-chart-tip__ligne { display: inline-flex; align-items: center; gap: var(--sz-s-2); }
.mt-chart-tip__valeur { margin-left: auto; padding-left: var(--sz-s-4); font-family: var(--sz-font-data); font-variant-numeric: tabular-nums; }

/* Frises : libellé à gauche, piste à droite. La colonne de libellé a la largeur
   de l'axe Y des courbes pour que les pistes s'alignent dessous. */
.mt-frises { display: flex; flex-direction: column; gap: var(--sz-s-2); }
.mt-frise { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: var(--sz-s-1) var(--sz-s-3); }
/* Légende sous la piste, dans la même colonne. */
.mt-frise__legende { grid-column: 2; font-size: 0.72rem; }
.mt-frise__titre { font-size: 0.8rem; font-weight: 600; color: var(--sz-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-frise__piste {
  position: relative; height: 18px; overflow: hidden;
  border-radius: var(--sz-r-sm); background: var(--sz-surface-3);
}
/* Filet de la couleur du fond entre deux états. */
.mt-frise__segment { position: absolute; top: 0; bottom: 0; box-shadow: inset -1px 0 0 var(--sz-surface); }
.mt-frise__segment:hover { filter: brightness(1.1); }
.mt-frise__bornes {
  display: flex; justify-content: space-between; gap: var(--sz-s-3);
  font-size: 0.72rem; color: var(--sz-text-3); font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .mt-frise { grid-template-columns: minmax(0, 1fr); gap: var(--sz-s-1); }
  .mt-frise__legende { grid-column: 1; }
  .mt-frise--axe > span:first-child { display: none; }
}
/* Shell du module : sidebar + contenu. Le portail utilise un topbar, les modules
   une sidebar — on ne duplique pas son pattern de navigation. */
.layout {
  display: flex;
  background: var(--sz-bg);
  color: var(--sz-text);
}

.layout--standalone {
  /* App shell : hauteur fixe, le scroll est délégué à .layout__content.
     La sidebar reste donc fixe et les sticky du contenu fonctionnent. */
  height: 100vh;
  overflow: hidden;
}

.layout--portal {
  /* Hauteur fixée en JS (viewport - top), le scroll est délégué à .layout__content.
     Fallback CSS avant exécution du JS. */
  height: 100vh;
  overflow: hidden;
}

.layout__sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sz-surface);
  border-right: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-sm);
  align-self: flex-start;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.layout--standalone .layout__sidebar {
  height: 100vh;
}

/* En fédéré, la sidebar remplit la hauteur du shell (calée en JS). */
.layout--portal .layout__sidebar {
  height: 100%;
  max-height: 100%;
}

.layout__brand {
  padding: var(--sz-s-5) var(--sz-s-5) var(--sz-s-4);
  border-bottom: 1px solid var(--sz-border);
}

.layout__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-1);
  padding: var(--sz-s-4) var(--sz-s-3);
  overflow-y: auto;
}

.layout__nav-link {
  display: flex;
  align-items: center;
  gap: var(--sz-s-3);
  padding: var(--sz-s-2) var(--sz-s-3);
  border-radius: var(--sz-r-md);
  color: var(--sz-text-2);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease);
}

.layout__nav-link:hover {
  background: var(--sz-surface-2);
  color: var(--sz-text);
  text-decoration: none;
}

.layout__nav-link--active {
  background: var(--sz-accent-soft);
  color: var(--sz-accent);
}

/* Bulle de compteur, poussée à droite de l'onglet (alertes, seuils dépassés…). */
.layout__nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sz-r-pill);
  background: var(--sz-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.layout__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-3);
  padding: var(--sz-s-4);
  border-top: 1px solid var(--sz-border);
}

.layout__user {
  display: flex;
  align-items: center;
  gap: var(--sz-s-3);
  min-width: 0;
}

.layout__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--sz-r-pill);
  background: var(--sz-accent-soft);
  color: var(--sz-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.layout__user-meta {
  min-width: 0;
}

.layout__user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout__user-role {
  font-size: 0.75rem;
  color: var(--sz-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout__actions {
  display: flex;
  align-items: center;
  gap: var(--sz-s-2);
}

.layout__logout {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sz-r-lg);
  background: transparent;
  border: 1px solid var(--sz-border);
  color: var(--sz-text-2);
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease),
    border-color var(--sz-dur) var(--sz-ease);
}

.layout__logout:hover {
  background: var(--sz-red-soft);
  border-color: var(--sz-red);
  color: var(--sz-red);
}

.layout__logout:focus-visible {
  outline: none;
  box-shadow: var(--sz-ring);
}

.layout__content {
  flex: 1;
  padding: var(--sz-s-7);
  /* Scroller principal (le layout est à hauteur fixe). Les éléments position: sticky
     des vues se calent sur ce conteneur. */
  overflow-y: auto;
  width: 100%;
  min-width: 0;
}

/* Barre mobile (burger) + voile : masqués par défaut, activés en mobile standalone.
   Hauteur de référence du header mobile = 56px (top du panneau + inset du voile). */
.layout__mobilebar { display: none; align-items: center; gap: var(--sz-s-3); height: 56px; padding: 0 var(--sz-s-3); border-bottom: 1px solid var(--sz-border); background: var(--sz-surface); position: relative; z-index: 31; }
.layout__burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); background: var(--sz-surface); color: var(--sz-text); cursor: pointer; }
.layout__burger:hover { background: var(--sz-surface-2); }
.layout__scrim { display: none; position: fixed; inset: 56px 0 0; z-index: 25; background: rgba(11, 14, 18, 0.35); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
/* ≤900 px (tablette + mobile) : la nav passe en haut (topbar fédéré / burger standalone). */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .layout__content { padding: var(--sz-s-4); }

  /* Fédéré : la sidebar devient une barre supérieure horizontale (pas de burger). */
  .layout--portal .layout__sidebar {
    width: 100%; flex-direction: row; align-items: center; gap: var(--sz-s-2);
    height: auto; max-height: none; position: static; overflow: visible;
    padding: var(--sz-s-2) var(--sz-s-3); border-right: none; border-bottom: 1px solid var(--sz-border);
  }
  .layout--portal .layout__nav { flex: 1; flex-direction: row; gap: var(--sz-s-1); padding: 0; overflow-x: auto; overflow-y: hidden; }
  .layout--portal .layout__nav-link { white-space: nowrap; flex: none; }

  /* Standalone : barre mobile (burger à gauche) + nav qui se déroule SOUS le header. */
  .layout--standalone .layout__mobilebar { display: flex; }
  .layout--standalone .layout__brand { display: none; } /* la barre mobile porte déjà le wordmark */
  .layout--standalone .layout__sidebar {
    display: none;                                  /* fermé par défaut */
    position: fixed; top: 56px; left: 0; right: 0;  /* top = hauteur du header */
    width: auto; height: auto; max-height: calc(100vh - 56px); overflow-y: auto;
    z-index: 30;                                    /* header (31) > nav (30) > voile (25) */
    flex-direction: column;
    border-right: none; border-bottom: 1px solid var(--sz-border); box-shadow: var(--sz-shadow-md);
  }
  .layout--standalone.is-menu-open .layout__sidebar { display: flex; }
  .layout--standalone.is-menu-open .layout__scrim { display: block; }
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--sz-s-7) var(--sz-s-4);
}

.login__card {
  background: var(--sz-surface);
  border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-lg);
  padding: var(--sz-s-7) var(--sz-s-6);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--sz-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-4);
}

.login__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sz-s-2);
  margin-bottom: var(--sz-s-2);
  text-align: center;
}

.login__subtitle {
  margin: 0;
  color: var(--sz-text-2);
  font-size: 0.95rem;
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-1);
}

.login__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sz-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login__field input {
  width: 100%;
  padding: var(--sz-s-3) var(--sz-s-3);
  border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-md);
  font: inherit;
  font-size: 0.95rem;
  background: var(--sz-input);
  color: var(--sz-text);
  transition:
    border-color var(--sz-dur) var(--sz-ease),
    box-shadow var(--sz-dur) var(--sz-ease);
}

.login__field input::placeholder {
  color: var(--sz-text-3);
}

.login__field input:focus {
  outline: none;
  border-color: var(--sz-border-focus);
  box-shadow: var(--sz-ring);
}

.login__password {
  position: relative;
  display: flex;
  align-items: center;
}

.login__password input {
  padding-right: 5rem;
}

.login__password-toggle {
  position: absolute;
  right: var(--sz-s-1);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--sz-text-3);
  font: inherit;
  font-size: 0.8rem;
  padding: var(--sz-s-1) var(--sz-s-2);
  border-radius: var(--sz-r-sm);
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease);
}

.login__password-toggle:hover {
  color: var(--sz-accent);
  background: var(--sz-accent-soft);
}

.login__error {
  background: var(--sz-red-soft);
  color: var(--sz-text);
  border: 1px solid var(--sz-border);
  padding: var(--sz-s-3);
  border-radius: var(--sz-r-md);
  font-size: 0.9rem;
}

.login__submit {
  margin-top: var(--sz-s-1);
  padding: var(--sz-s-3) var(--sz-s-4);
  background: var(--sz-accent);
  color: var(--sz-on-accent);
  border: none;
  border-radius: var(--sz-r-md);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    transform 80ms var(--sz-ease);
}

.login__submit:hover:not(:disabled) {
  background: var(--sz-accent-hover);
}

.login__submit:active:not(:disabled) {
  transform: translateY(1px);
}

.login__submit:focus-visible {
  outline: none;
  box-shadow: var(--sz-ring);
}

.login__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login__footer {
  margin: var(--sz-s-1) 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--sz-text-3);
}
/* Réinitialisation et styles de base du shell standalone. Les tokens --sz-*
   viennent de public/theme.css (chargé par index.html) en standalone, et du
   portail en mode fédéré : les fallbacks ne servent qu'avant chargement. */
* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--sz-font-ui, 'Nunito Sans', system-ui, sans-serif);
  background: var(--sz-bg, #e8ecf4);
  color: var(--sz-text, #0a0a0a);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--sz-dur, 150ms) var(--sz-ease, ease),
    color var(--sz-dur, 150ms) var(--sz-ease, ease);
}

a {
  color: var(--sz-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

code {
  font-family: var(--sz-font-data);
  background: var(--sz-surface-3);
  color: var(--sz-text);
  padding: 0.1em 0.35em;
  border-radius: var(--sz-r-sm);
  font-size: 0.9em;
  border: 1px solid var(--sz-border);
}

::selection {
  background: var(--sz-accent-soft-2);
  color: var(--sz-text);
}

/* Toggle de thème — standalone uniquement (le portail a le sien). */
.login-theme-toggle {
  position: fixed;
  top: var(--sz-s-4);
  right: var(--sz-s-4);
  z-index: 50;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sz-r-lg);
  background: var(--sz-surface);
  color: var(--sz-text-2);
  border: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-sm);
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease),
    border-color var(--sz-dur) var(--sz-ease);
}

.theme-toggle:hover {
  background: var(--sz-surface-2);
  color: var(--sz-text);
  border-color: var(--sz-border-strong);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sz-ring);
  border-color: var(--sz-border-focus);
}