:root {
  --bg: #080f19;
  --bg-2: #0d1826;
  --surface: rgba(15, 24, 38, 0.97);
  --surface-2: rgba(20, 31, 48, 0.94);
  --line: rgba(142, 163, 190, 0.16);
  --line-strong: rgba(142, 163, 190, 0.28);
  --text: #e6edf7;
  --muted: #91a4bd;
  --muted-2: #bdc9d8;
  --accent: #31b79f;
  --info: #6f9ed8;
  --ok: #68c98f;
  --warn: #d9a441;
  --danger: #e6858f;
  --purple: #8f86d9;
  --radius: 8px;
  --sidebar: 274px;
  --sidebar-icon: 72px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;   /* Inter retirée : jamais livrée (OPS-CONSOLE-FONT-DETERMINISM-001) */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html[data-theme="light"] { --bg:#f4f7fb; --bg-2:#edf2f7; --surface:#fff; --surface-2:#f7f9fc; --line:rgba(60,80,110,.16); --line-strong:rgba(60,80,110,.28); --text:#152238; --muted:#5d6d83; --muted-2:#33445e; }
html[data-theme="dark"] { --bg:#080f19; --bg-2:#0d1826; --surface:rgba(15,24,38,.97); --surface-2:rgba(20,31,48,.94); --text:#e6edf7; --muted:#91a4bd; --muted-2:#bdc9d8; }

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}
button, input, select { font: inherit; }
button { color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}
.shell.sidebar-icon { grid-template-columns: var(--sidebar-icon) minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(7, 14, 27, 0.98);
  border-right: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}
.brand-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 86%, #0a1d21);
  color: #031b17;
}
.myth-mark { width:36px; height:36px; object-fit:contain; flex:0 0 auto; }
.brand-copy { display: grid; gap: 1px; min-width: 0; }
.brand-copy strong { font-size: 14px; }
.brand-copy small { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.panel-mode-toggle,
.detail-toggle {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(142, 163, 190, 0.08);
  color: var(--muted-2);
  cursor: pointer;
}
.panel-mode-toggle:hover,
.detail-toggle:hover {
  border-color: rgba(49, 183, 159, 0.42);
  color: var(--text);
  background: rgba(49, 183, 159, 0.10);
}
.nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.nav-console-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin: 0 2px 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.nav-console-link:hover { border-color: rgba(49, 183, 159, .5); color: var(--accent); }
.nav-console-link .icon { width: 16px; height: 16px; }
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  text-align: left;
}
.nav-item:hover { background: rgba(56, 200, 168, 0.08); color: var(--text); }
.nav-item.active { background: rgba(56, 200, 168, 0.14); color: var(--accent); font-weight: 700; }
.nav-item span:not(.icon) { flex: 1; }
.nav-item b {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(240, 92, 115, 0.22);
  color: var(--danger);
  font-size: 11px;
}
.sidebar-config {
  display: grid;
  gap: 10px;
  padding: 14px 12px;
  border-top: 1px solid var(--line);
}
.config-label { color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-config label,
.auth-grid label,
.form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
input, select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(5, 10, 18, 0.7);
  color: var(--text);
  outline: none;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 200, 168, 0.14); }
.sidebar-toggle {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.sidebar.is-icon .brand-copy,
.sidebar.is-icon .brand-main .brand-copy,
.sidebar.is-icon .nav-item span:not(.icon),
.sidebar.is-icon .nav-item b,
.sidebar.is-icon .sidebar-config,
.sidebar.is-icon .nav-console-link span,
.sidebar.is-icon .sidebar-toggle span { display: none; }
.sidebar.is-icon .brand,
.sidebar.is-icon .nav-item,
.sidebar.is-icon .sidebar-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.is-icon .brand-main { justify-content: center; }
.sidebar.is-icon .brand {
  display: grid;
  gap: 10px;
}

.main { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 22px;
  /* Fond opaque, sans `backdrop-filter` : un flou d'arrière-plan compose la
     barre dans sa propre couche et le texte y perd le lissage sous-pixels
     (OPS-CONSOLE-FONT-SMOOTHING-001). */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 26px; letter-spacing: 0; }
h2 { font-size: 19px; letter-spacing: 0; }
h3 { font-size: 16px; letter-spacing: 0; }
h4 { margin-top: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); }
/* Une seule ligne : pays · département · ville · recherche · 3 filtres · action.
   Le bandeau de contexte occupait une rangée à lui seul au-dessus, pour deux
   sélecteurs et deux compteurs qui doublaient la grille KPI
   (OPS-PROVIDERS-HEADER-COMPACT-001). */
.topbar-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Chaque contrôle réclame la largeur de SON libellé, et la recherche absorbe le
   reste. Une grille à huit colonnes fixes serrait tout le monde en dessous du
   lisible — « Tous les modes » sortait tronqué — et demandait un point de
   rupture par largeur d'écran. Ici la ligne se replie d'elle-même. */
/* `width: auto` est indispensable : la règle globale `input, select { width: 100% }`
   fixerait sinon la base de chaque élément flexible à toute la ligne, et chaque
   contrôle partirait sur sa propre rangée. */
.topbar-tools > .operation-field { flex: 0 1 auto;  width: auto; min-width: 88px;  max-width: 176px; }
.topbar-tools > .filter.search   { flex: 1 1 150px; width: auto; min-width: 132px; }
.topbar-tools > select           { flex: 0 1 auto;  width: auto; min-width: 108px; max-width: 152px; }
.topbar-tools > .btn             { flex: 0 0 auto; white-space: nowrap; }

/* Un libellé long — « Seine-et-Marne · 77 », « Toutes catégories » — se coupe
   proprement au lieu d'élargir sa colonne et de faire retomber le bouton sur une
   deuxième ligne. La hauteur gagnée est le sujet du lot. */
.topbar-tools > select,
.topbar-tools .operation-field select {
  text-overflow: ellipsis;
}
.filter.search {
  position: relative;
  display: flex;
  align-items: center;
}
.filter.search .icon {
  position: absolute;
  left: 10px;
  color: var(--muted);
  pointer-events: none;
}
.filter.search input { padding-left: 36px; }

/* Colonne « Dernier téléchargement » : le volume en tête, la portée en pied et
   en retrait — c'est la ligne qu'on lit en dernier, quand on se demande si la
   source couvre tout le pays ou trois départements. */
.download-cell strong { font-size: 13px; }
.download-cell .scope {
  margin-top: 2px;
  color: var(--muted-2);
  font-weight: 640;
}
.refresh-stamp {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page { padding: 22px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: rgba(122, 151, 190, 0.12);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn.primary { background: var(--accent); color: #041b17; }
.btn.ghost { border-color: var(--line); background: rgba(122, 151, 190, 0.08); color: var(--text); }
.btn.warn { background: rgba(245, 166, 35, 0.18); border-color: rgba(245, 166, 35, 0.34); color: var(--warn); }
.btn.danger { background: rgba(240, 92, 115, 0.18); border-color: rgba(240, 92, 115, 0.34); color: var(--danger); }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.btn.tiny { min-height: 28px; padding: 0 8px; font-size: 12px; }
.btn.wide { width: 100%; }
.icon { display: inline-flex; align-items: center; }
.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(122, 151, 190, 0.08);
  cursor: pointer;
}

.banner, .risk-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
}
.banner.danger { background: rgba(240, 92, 115, 0.12); color: var(--danger); }
/* OPS-PROVIDER-LIFECYCLE-001 — le bandeau qui dit LEQUEL des deux interrupteurs bloque.
   Avertissement et non danger : une source suspendue n'est pas un incident, c'est une décision. */
.banner.warn { background: rgba(245, 166, 35, 0.12); color: var(--warn); }
/* OPS-PROVIDER-TOKENS-ALL-001 — les sources sans identifiant appartiennent à l'espace, mais ne
   doivent pas concurrencer visuellement celles qui demandent un geste. */
.panel.muted-panel { opacity: .72; }
.panel.muted-panel:hover { opacity: 1; }
/* Le bandeau vit aussi DANS un modal, où il n'a pas de bord de panneau à épouser. */
.form-grid .banner { border-bottom: 0; border-radius: 6px; padding: 10px 12px; }
.risk-strip { flex-wrap: wrap; background: rgba(15, 25, 41, 0.62); }
.risk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid currentColor;
}
.risk.warn { color: var(--warn); background: rgba(245, 166, 35, 0.08); }
.risk.danger { color: var(--danger); background: rgba(240, 92, 115, 0.08); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi, .panel, .category-card, .billing-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.kpi {
  padding: 16px;
  display: grid;
  gap: 4px;
}
.kpi span, .kpi small { color: var(--muted); }
.kpi strong { font-size: 28px; line-height: 1; }
.kpi.accent strong { color: var(--accent); }
.kpi.ok strong { color: var(--ok); }
.kpi.warn strong { color: var(--warn); }
.kpi.danger strong { color: var(--danger); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.category-card {
  padding: 12px 14px;
  cursor: pointer;
}
.category-card:hover { border-color: var(--accent); }
.category-card strong { display: block; font-size: 14px; }
.category-card span, .category-card small { display: block; color: var(--muted); font-size: 12px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 16px;
  align-items: start;
}
.split.wide { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 420px); }
.split.detail-collapsed,
.split.wide.detail-collapsed {
  grid-template-columns: minmax(0, 1fr) 74px;
}
.action-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 16px;
}
.action-layout.detail-collapsed {
  grid-template-columns: minmax(0, 1fr) 74px;
}
.panel { overflow: hidden; }
.panel > header {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.panel > header small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}
.table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 163, 190, 0.38) transparent;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1060px;
}
th, td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(122, 151, 190, 0.10);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: rgba(11, 20, 32, 0.92);
}
td > strong {
  display: block;
  font-weight: 700;
}
td > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
tbody tr { cursor: pointer; }
tbody tr:hover { background: rgba(49, 183, 159, 0.045); }
tbody tr.selected { background: rgba(49, 183, 159, 0.075); }
.ops-table {
  table-layout: fixed;
}
.ops-table th:nth-child(1),
.ops-table td:nth-child(1) { width: 250px; }
/* `.providers-table` ne figure plus ici : ses sept colonnes sont dimensionnées
   en pourcentage plus bas dans cette feuille. Ces règles-ci ne concernent que
   `.billing-table`, qui n'a pas changé. */
.billing-table th:nth-child(5),
.billing-table td:nth-child(5) { width: 170px; }
.billing-table th:nth-child(6),
.billing-table td:nth-child(6) { width: 135px; }
.billing-table th:nth-child(9),
.billing-table td:nth-child(9) { width: 150px; }
.providers-table.is-compact {
  min-width: 1120px;
}
.provider-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.provider-cell span:last-child {
  display: grid;
  min-width: 0;
}
.provider-cell small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-avatar {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--avatar) 60%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--avatar) 18%, transparent);
  color: color-mix(in srgb, var(--avatar) 82%, white);
  font-weight: 700;
  font-size: 11px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.pill.ok { color: var(--ok); background: rgba(104, 201, 143, 0.09); border-color: rgba(104, 201, 143, 0.20); }
.pill.warn { color: var(--warn); background: rgba(217, 164, 65, 0.09); border-color: rgba(217, 164, 65, 0.20); }
.pill.danger { color: var(--danger); background: rgba(220, 106, 122, 0.10); border-color: rgba(220, 106, 122, 0.22); }
.pill.info { color: var(--info); background: rgba(111, 158, 216, 0.09); border-color: rgba(111, 158, 216, 0.20); }
.pill.muted { color: var(--muted-2); background: rgba(142, 163, 190, 0.08); border-color: rgba(142, 163, 190, 0.16); }

.stack-cell {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: start;
}
.stack-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack-cell small {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-cell {
  max-width: 126px;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-meter {
  width: 92px;
  height: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(142, 163, 190, 0.10);
}
.mini-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  opacity: 0.28;
}
.mini-meter b {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
}
.mini-meter.ok i, .progress.ok em { background: color-mix(in srgb, var(--ok) 82%, #ffffff); }
.mini-meter.warn i, .progress.warn em { background: color-mix(in srgb, var(--warn) 82%, #ffffff); }
.mini-meter.danger i, .progress.danger em { background: color-mix(in srgb, var(--danger) 82%, #ffffff); }
.mini-meter.muted i, .progress.muted em { background: var(--muted); }

.detail {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}
.detail-rail {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  min-height: 220px;
  padding: 12px 8px;
  overflow: visible;
}
.detail-rail .provider-avatar {
  width: 40px;
  height: 40px;
}
.detail-rail .pill {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  justify-content: center;
  color: var(--muted-2);
}
.detail-rail .pill::before { margin: 0; }
.detail-rail .pill {
  font-size: 0;
}
.detail-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.detail-status, .detail-actions, .card-actions, .toolbar-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.detail-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(122, 151, 190, 0.10);
}
.detail-row span {
  color: var(--muted);
  font-size: 12px;
}
.detail-row strong {
  font-weight: 600;
  word-break: break-word;
}
.progress {
  display: grid;
  gap: 5px;
}
.progress div {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}
.progress div b {
  color: var(--text);
  font-family: var(--mono);
}
.progress i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(122, 151, 190, 0.12);
}
.progress em {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.alert-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(240, 92, 115, 0.18);
  border-radius: var(--radius);
  background: rgba(240, 92, 115, 0.08);
}
.runs {
  display: grid;
  gap: 7px;
}
.runs > div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.mono, code {
  font-family: var(--mono);
  font-size: 11px;
}

.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.billing-card {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.billing-card.warn { border-color: rgba(245, 166, 35, 0.34); }
.billing-card.danger { border-color: rgba(240, 92, 115, 0.38); }
.card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.card-top div { display: grid; min-width: 0; }
.card-top small { color: var(--muted); }
.price {
  font-size: 24px;
  font-weight: 700;
}
.price span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.action-console { min-height: 360px; }
.action-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
}
.action-hero p { color: var(--muted); }
.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.endpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  padding: 14px;
}
.endpoint-grid code {
  display: block;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 10, 18, 0.52);
}
.timeline {
  display: grid;
  gap: 8px;
  padding: 14px;
}
.audit-row {
  display: grid;
  grid-template-columns: 130px 220px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 10, 18, 0.28);
}
.audit-row time { color: var(--muted); font-size: 12px; }
.audit-row code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-2);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card {
  width: min(100%, 460px);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.auth-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent);
  color: #041b17;
  margin-bottom: 14px;
}
.auth-copy {
  color: var(--muted);
  margin: 8px 0 18px;
}
.auth-error {
  padding: 10px;
  border: 1px solid rgba(240, 92, 115, 0.3);
  border-radius: var(--radius);
  background: rgba(240, 92, 115, 0.10);
  color: var(--danger);
  margin-bottom: 12px;
}
.auth-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 10px;
  border: 1px solid rgba(56, 200, 168, 0.28);
  border-radius: var(--radius);
  background: rgba(56, 200, 168, 0.09);
  color: var(--text);
  margin-bottom: 12px;
  font-size: 13px;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(56, 200, 168, 0.24);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.auth-grid, .form-grid {
  display: grid;
  gap: 12px;
}
.auth-row, .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.58);
}
.modal {
  width: min(100%, 560px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #101a2a;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.modal .form-grid { padding: 14px; }
/* Le popup d'accès porte DEUX gestes destructeurs qui ne font pas la même chose : effacer la clé
   stockée n'est pas retirer la déclaration. Sans titre, ce sont deux blocs jumeaux terminés par un
   bouton coloré, et on clique le premier venu. Le titre nomme le geste avant que la main parte. */
.form-grid h4 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.hint {
  color: var(--muted);
  font-size: 12px;
}
.empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}
.empty svg { width: 34px; height: 34px; opacity: 0.55; }
.mt { margin-top: 16px; }

@media (max-width: 1180px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .split, .split.wide, .action-layout { grid-template-columns: 1fr; }
  .detail { position: static; max-height: none; }
}

@media (max-width: 820px) {
  .shell { grid-template-columns: var(--sidebar-icon) minmax(0, 1fr) !important; }
  .sidebar .brand-copy,
  .sidebar .nav-item span:not(.icon),
  .sidebar .nav-item b,
  .sidebar .sidebar-config,
  .sidebar .nav-console-link span,
  .sidebar .sidebar-toggle span { display: none; }
  .sidebar .brand,
  .sidebar .nav-item,
  .sidebar .sidebar-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
  .page { padding: 14px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .auth-row, .form-row { grid-template-columns: 1fr; }
  .audit-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar { padding: 12px 14px; }
  .billing-grid { grid-template-columns: 1fr; }
}

/* ── Providers Management refresh: operational hierarchy, explicit themes ─ */
html[data-theme="dark"] {
  --bg: #09111c;
  --bg-2: #0d1724;
  --surface: #101b29;
  --surface-2: #142131;
  --line: rgba(160, 185, 215, .15);
  --line-strong: rgba(160, 185, 215, .28);
  --text: #edf3fa;
  --muted: #95a5b9;
  --muted-2: #c8d3e1;
  --accent: #35a891;
  --info: #5793de;
  --ok: #43b982;
  --warn: #d89d39;
  /* OPS-PROVIDERS-CONTRASTE-SOMBRE-1311-001 — en sombre, « Déconnexion » (4,25:1) et le compteur du menu (4,36:1) sur leur aplat rose : même teinte éclaircie, ≥ 4,7:1 sur tous les aplats. */
  --danger: #e6858f;
  --radius: 8px;
}
html[data-theme="light"] {
  --bg: #f4f7fb;
  --bg-2: #eaf0f7;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --line: rgba(47, 70, 101, .14);
  --line-strong: rgba(47, 70, 101, .26);
  --text: #14243a;
  --muted: #59697e;
  --muted-2: #3e5169;
  --accent: #087c6d;
  --info: #256db8;
  --ok: #17724f;
  --warn: #9a6212;
  /* OPS-CONSOLE-RESTES-TOUR-NUIT-1311-001 — « Déconnexion » (.btn.danger, 4,02:1) et le compteur rouge
     du menu (.nav-item b, 3,97:1) écrivent --danger sur un aplat rose : même teinte assombrie au plus
     près, ≥ 4,55:1 sur tous ces aplats (y compris l'entrée active du menu). */
  --danger: #a03d49;
  --purple: #7267cf;
  --radius: 8px;
}
html[data-theme="light"] .sidebar { background: #fff; }
/* OPS-CDP-PAQUET-PROVIDERS-ETAT-1211-001 — en clair, l'initiale de catégorie écrite à 82 % de blanc
   sur son aplat à 18 % tombait à 1,5–2,2:1. Encre de la MÊME teinte assombrie (50 % de noir) :
   ≥ 5,5:1 sur les huit couleurs de catégorie. */
html[data-theme="light"] .provider-avatar { color: color-mix(in srgb, var(--avatar) 50%, black); }
html[data-theme="light"] .topbar { background: rgba(255,255,255,.94); }
html[data-theme="dark"] .sidebar { background: #0c1520; }
html[data-theme="dark"] .topbar { background: rgba(9,17,28,.94); }
body { background: var(--bg); }
.shell { grid-template-columns: 244px minmax(0, 1fr); }
.shell.sidebar-icon { grid-template-columns: var(--sidebar-icon) minmax(0, 1fr); }
.sidebar { background: var(--surface); }
.brand { min-height: 72px; padding: 18px 14px; }
.myth-mark { width: 36px; height: 36px; }
.nav { padding: 12px 8px; }
.nav-console-link { min-height: 36px; border-radius: 6px; }
.nav-item { min-height: 38px; border-radius: 6px; }
.sidebar-config { gap: 9px; padding: 12px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.sidebar-config input, .sidebar-config select { border-radius: 6px; background: var(--surface-2); }
.sidebar-toggle { min-height: 44px; }
.topbar { min-height: 58px; padding: 9px 24px; background: var(--surface); }
.topbar h2 { font-size: 19px; font-weight: 700; }
.topbar-tools { gap: 7px; }
.operation-context { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.page { max-width: 1560px; padding: 24px; }
.risk-strip { padding: 10px 24px; background: var(--surface); }
.risk { border-radius: 5px; }
.kpi-grid { gap: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); }
.kpi { min-height: 108px; padding: 16px 18px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.kpi:last-child { border-right: 0; }
.kpi strong { font-size: 27px; }
.category-grid { gap: 0; margin-bottom: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.category-card { min-height: 82px; padding: 13px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.category-card:hover { background: var(--surface-2); border-color: var(--line); }
.panel, .billing-card { border-radius: 8px; background: var(--surface); box-shadow: none; }
.panel > header { min-height: 52px; padding: 12px 14px; background: var(--surface-2); }
.split, .split.wide { grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); gap: 16px; }
.split.detail-collapsed, .split.wide.detail-collapsed { grid-template-columns: minmax(0, 1fr) 64px; }
.action-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); }
.table-wrap { background: var(--surface); }
th { height: 42px; background: var(--surface-2); }
th, td { padding: 11px 12px; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
tbody tr.selected { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.provider-avatar, .category-icon { border-radius: 8px; }
.pill, .mini-meter, .progress i { border-radius: 5px; }
.detail { top: 90px; max-height: calc(100vh - 112px); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.detail-body { padding: 14px; }
.detail-row { padding: 9px 0; }
.detail-actions .btn, .action-buttons .btn { min-height: 36px; }
.billing-grid { gap: 12px; }
.billing-card { border-radius: 8px; }
.toolbar-line { margin-bottom: 14px; }
.endpoint-grid code, .audit-row { border-radius: 6px; background: var(--surface-2); }
.audit-row { padding: 12px; }
.modal { border-radius: 8px; background: var(--surface); }
.modal-backdrop { background: rgba(5,12,20,.58); }
.btn { min-height: 36px; border-radius: 6px; }
/* Aplat sous texte BLANC distinct de l'accent de texte : en sombre #35a891 sous du blanc = 2,93:1
   (tour web du 12/11). #1b7f6e, même teinte assombrie = 4,88:1 — OPS-WEB-KO-CAMPAGNE-1211-001. */
.btn.primary { background: var(--accent-fill, var(--accent)); color: #fff; }
html[data-theme="dark"] .btn.primary { --accent-fill: #1b7f6e; }
.btn.ghost { background: var(--surface-2); }
.btn.small { min-height: 32px; }
@media (max-width: 1180px) {
  .operation-context { grid-column: span 1; }
  .split, .split.wide, .action-layout { grid-template-columns: 1fr; }
  .detail { position: static; max-height: none; }
}
@media (max-width: 820px) {
  .page { padding: 14px; }
  .topbar { padding: 12px 14px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .operation-context { width: 100%; }
  .kpi-grid, .category-grid { grid-template-columns: 1fr; }
  .kpi, .kpi:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi:last-child { border-bottom: 0; }
  .category-card { border-right: 0; }
}

/* ── OPS-SPORT-CALIBRATION-001 — onglet « Calibration sport » ────────────── */
.sport-source-panel { margin-top: 14px; }
.sport-source-panel header small { margin-left: auto; }
.sport-grid td small { display: block; opacity: .65; font-size: .82em; }
.sport-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Les raisons sont la valeur de cet écran : lisibles, pas reléguées en
   info-bulle — c'est ce qui répond à « pourquoi ce match est publié ». */
.sport-grid td.reasons { font-size: .84em; line-height: 1.35; max-width: 26rem; }
.sport-grid td.reasons div + div { margin-top: .15rem; opacity: .8; }
.sport-grid .pill.ok { background: rgba(34, 197, 94, .16); color: var(--ok); }
.sport-grid .pill.warn { background: rgba(245, 158, 11, .16); color: #b45309; }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin: .75rem 0 1rem; }
.filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .82em; opacity: .85; }
.empty-row { text-align: center; padding: 1.5rem; opacity: .7; }

/* ── Premium providers console refonte ───────────────────────────────────── */
.page {
  width: 100%;
  max-width: none;
}

.shell > main.main,
main.main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

input,
select,
textarea {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 88%, #050a12);
}

textarea {
  min-height: 420px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}

textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.topbar {
  align-items: stretch;
  gap: 18px;
  min-height: 64px;
}

.topbar-heading {
  min-width: 220px;
  padding-top: 4px;
}

.topbar-heading small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.topbar-workspace {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.operation-field {
  min-width: 0;
  min-height: 38px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.operation-field span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.operation-field select,
.operation-field input {
  min-height: 22px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
}

/* La ville est une saisie : son texte d'invite doit se lire comme la valeur
   « toutes » d'un sélecteur, pas comme un champ vide qu'on aurait oublié. */
.operation-field input::placeholder {
  color: var(--muted);
  font-weight: 600;
}


/* Ne redéfinit PLUS la grille : celle du haut de feuille compte huit colonnes
   depuis OPS-PROVIDERS-HEADER-COMPACT-001, et cette règle, plus tardive, les
   ramenait silencieusement à cinq. */
.topbar-tools {
  width: 100%;
  max-width: none;
}

.topbar-tools input,
.topbar-tools select,
.sidebar-config input,
.sidebar-config select {
  color: var(--text);
}

.topbar-tools input::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.providers-toolbar {
  justify-content: flex-start;
  margin: 0 0 14px;
}

.category-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.category-card {
  display: grid;
  gap: 5px;
  min-height: 92px;
  transition: background .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.category-card.active {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  box-shadow: inset 0 -3px 0 var(--accent);
}

.category-top {
  display: flex !important;
  justify-content: space-between;
  gap: 10px;
  color: var(--text) !important;
}

.category-top b {
  min-width: 30px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface-2);
  font-size: 12px;
}

.management-right,
.split.management-right,
.split.wide.management-right,
.action-layout.management-right {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
}

.management-right.detail-collapsed,
.split.management-right.detail-collapsed,
.split.wide.management-right.detail-collapsed,
.action-layout.management-right.detail-collapsed {
  grid-template-columns: minmax(0, 1fr) 64px;
}

.providers-table {
  min-width: 1180px;
  table-layout: auto;
  font-size: 14px;
}

.providers-table.is-compact {
  min-width: 1120px;
}

/* SEPT colonnes depuis l'ajout de « Dernier téléchargement » en 4ᵉ position :
   source · état · token · téléchargement · plan/quota · cadence · actions.
   Les largeurs sont réécrites pour ce rang exact — une règle `nth-child` écrite
   pour six colonnes désigne silencieusement la mauvaise après une insertion.  */
.providers-table th:nth-child(1),
.providers-table td:nth-child(1) { width: 22%; }

.providers-table th:nth-child(2),
.providers-table td:nth-child(2) { width: 13%; }

.providers-table th:nth-child(3),
.providers-table td:nth-child(3) { width: 13%; }

.providers-table th:nth-child(4),
.providers-table td:nth-child(4) { width: 16%; }

.providers-table th:nth-child(5),
.providers-table td:nth-child(5) { width: 16%; }

.providers-table th:nth-child(6),
.providers-table td:nth-child(6) { width: 15%; }

.providers-table th:nth-child(7),
.providers-table td:nth-child(7) { width: 190px; }

.providers-table th {
  font-size: 11px;
  letter-spacing: .07em;
}

.providers-table td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.providers-table .provider-avatar {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.providers-table .provider-cell strong,
.providers-table .stack-cell > strong {
  font-size: 15px;
  line-height: 1.25;
}

.providers-table .provider-cell small,
.providers-table .stack-cell small,
.providers-table .declared-note {
  font-size: 12px;
  line-height: 1.42;
}

.providers-table .pill {
  min-height: 26px;
  padding: 3px 9px;
  font-size: 12px;
}

.providers-table .btn.tiny {
  min-height: 32px;
  font-size: 13px;
}

.providers-table .stack-cell small,
.providers-table .stack-cell strong,
.declared-note {
  white-space: normal;
}

.state-cell,
.cadence-cell,
.plan-quota-cell {
  gap: 5px;
}

.pill-row,
.inline-metric {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.plan-quota-cell > .stack-cell {
  gap: 2px;
}

.row-actions {
  min-width: 170px;
}

.row-actions .btn {
  flex: 1 1 128px;
  min-width: 0;
}

.row-actions .btn svg {
  flex: 0 0 auto;
}

.declared-note {
  color: var(--warn) !important;
}

.detail { justify-self: stretch; }

.detail header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-row {
  grid-template-columns: 104px minmax(0, 1fr);
}

.detail-row strong {
  line-height: 1.35;
}

.qa-table {
  min-width: 940px;
}

.modal-wide {
  width: min(100%, 980px);
}

.error {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
  border-radius: 6px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

@media (max-width: 1180px) {
  .topbar {
    flex-direction: column;
  }

  .topbar-tools { width: 100%; }

  .management-right,
  .split.management-right,
  .split.wide.management-right,
  .action-layout.management-right,
  .management-right.detail-collapsed,
  .split.management-right.detail-collapsed,
  .split.wide.management-right.detail-collapsed,
  .action-layout.management-right.detail-collapsed {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topbar-tools > .filter.search { flex-basis: 100%; }

  .providers-table,
  .providers-table.is-compact {
    min-width: 880px;
  }

  textarea {
    min-height: 320px;
  }
}

/* Lissage en niveaux de gris seulement sur fond SOMBRE : sur fond clair il
   supprime le rendu sous-pixels et délave le texte (OPS-CONSOLE-FONT-SMOOTHING-001). */
html[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep the horizontal scrollbar reachable in the existing split layout. */
.provider-table-scroll {
  max-height: min(68vh, 780px);
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.provider-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
}
.provider-table-scroll:focus-visible,
.modal :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.operation-field > span { font-size: 11px; }
.audit-row details { min-width: 0; }
.audit-row pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Nine billing columns retain readable widths inside their scroll region. */
.billing-table { min-width: 1680px; }

.sport-grid { min-width: 1180px; }

.sport-pagination { padding: 12px; gap: 10px; flex-wrap: wrap; }
.sport-pagination [role="status"] { margin-right: auto; color: var(--muted-2); }