/**
 * KAIROS — DESIGN SYSTEM DE LA CONSOLE
 *
 * Tokens (palette indigo/violet, neutres ardoise, espacements, rayons 8/12/16,
 * ombres a 3 niveaux, transitions 150-200 ms) + layout (sidebar repliable,
 * topbar par vue) + composants (KPI, tables, badges, modales, toasts, etats
 * vides, skeletons). Theme clair par defaut ; theme sombre via variables CSS
 * seules (prefers-color-scheme), sans hack. Police systeme, zero dependance.
 */

/* ============================================================
   TOKENS
   ============================================================ */

:root {
  --indigo: #4f46e5;
  --indigo-fonce: #4338ca;
  --violet: #7c3aed;
  --accent: var(--indigo);
  --accent-fonce: var(--indigo-fonce);
  --accent-doux: #eef2ff;

  --encre: #0f172a;
  --texte: #1e293b;
  --texte-2: #64748b;
  --texte-3: #94a3b8;

  --bordure: #e2e8f0;
  --bordure-douce: #eef2f7;
  --fond: #f1f5f9;
  --fond-doux: #f8fafc;
  --carte: #ffffff;
  --sidebar-bg: #111736;
  --sidebar-texte: #c7cdf0;
  --sidebar-texte-2: #8b93c4;
  --sidebar-actif: rgba(255, 255, 255, 0.1);

  --succes: #16a34a;
  --succes-bg: #dcfce7;
  --succes-tx: #166534;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --danger-tx: #991b1b;
  --alerte: #d97706;
  --alerte-bg: #fef3c7;
  --alerte-tx: #92400e;
  --info-bg: #e0f2fe;
  --info-tx: #075985;
  --neutre-bg: #e2e8f0;
  --neutre-tx: #475569;
  --violet-bg: #ede9fe;
  --violet-tx: #5b21b6;

  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --ombre-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ombre-2: 0 4px 14px rgba(15, 23, 42, 0.07);
  --ombre-3: 0 16px 40px rgba(15, 23, 42, 0.14);

  --transition: 160ms ease;
  --sidebar-w: 250px;

  /**
   * MONOSPACE SYSTEME — la police des mesures.
   *
   * Le projet n'embarque aucune police externe, et n'en embarquera pas : ce serait
   * sa premiere dependance de rendu. La distinction typographique vient donc du
   * contraste entre la grotesque systeme (le texte) et la monospace systeme (les
   * chiffres, les etiquettes, les identifiants). Meme choix que la vitrine : un
   * produit qui mesure et qui prouve merite la police des instruments.
   */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /** Couleur de chaleur — SEMANTIQUE, jamais decorative (leads chauds, apex du logo). */
  --signal: #e2603a;
  --signal-bg: #fdeee8;

  /** Filet : un trait plus discret que --bordure, pour separer sans cloisonner. */
  --filet: rgba(15, 23, 42, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --signal: #ff8a5c;
    --signal-bg: #3a2018;
    --filet: rgba(255, 255, 255, 0.09);

    --encre: #e2e8f0;
    --texte: #cbd5e1;
    --texte-2: #94a3b8;
    --texte-3: #64748b;
    --bordure: #26314b;
    --bordure-douce: #1e2740;
    --fond: #0b1220;
    --fond-doux: #101a30;
    --carte: #131c33;
    --sidebar-bg: #0c1230;
    --sidebar-texte: #aab2e4;
    --sidebar-actif: rgba(255, 255, 255, 0.08);
    --accent-doux: #232c52;
    --succes-bg: #12341f;
    --succes-tx: #6ee7a0;
    --danger-bg: #3d1717;
    --danger-tx: #fca5a5;
    --alerte-bg: #3a2a10;
    --alerte-tx: #fbbf24;
    --info-bg: #0c2a3d;
    --info-tx: #7dd3fc;
    --neutre-bg: #26314b;
    --neutre-tx: #cbd5e1;
    --violet-bg: #2a1f4d;
    --violet-tx: #c4b5fd;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ombre-2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --ombre-3: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}

/* ============================================================
   BASE
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Les chiffres s'alignent en colonne partout : un tableau dont les unites dansent
     d'une ligne a l'autre se lit deux fois moins vite. */
  font-variant-numeric: tabular-nums;
}

/* Le suivi se resserre quand le corps grandit : sans cela, un gros titre en police
   systeme parait lache. */
h1 { font-size: 22px; font-weight: 750; color: var(--encre); margin: 2px 0 4px; letter-spacing: -0.022em; }
h2 { font-size: 15px; font-weight: 700; color: var(--encre); margin: 0; letter-spacing: -0.012em; }
h3 { font-size: 14px; font-weight: 700; color: var(--encre); margin: 0; letter-spacing: -0.01em; }

/**
 * ETIQUETTE DE MESURE — surtitre monospace, capitales espacees.
 *
 * Sert partout ou un chiffre a besoin d'etre nomme : libelles de KPI, en-tetes de
 * colonnes numeriques, legendes de graphique. C'est ce contraste avec la grotesque
 * qui donne a la console son air d'instrument plutot que de formulaire.
 */
.mesure {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texte-2);
}

a { color: var(--accent); }

.hidden { display: none !important; }

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

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--ombre-1); }
.btn-primary:hover:not(:disabled) { background: var(--accent-fonce); }

.btn-secondary { background: var(--carte); border-color: var(--bordure); color: var(--texte); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }

/* ============================================================
   BADGES & CHIPS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--neutre-bg);
  color: var(--neutre-tx);
}

.st-new { background: var(--info-bg); color: var(--info-tx); }
.st-contacted { background: var(--alerte-bg); color: var(--alerte-tx); }
.st-qualified { background: var(--violet-bg); color: var(--violet-tx); }
.st-lost { background: var(--neutre-bg); color: var(--neutre-tx); }
.st-won, .st-sent { background: var(--succes-bg); color: var(--succes-tx); }
.st-failed { background: var(--danger-bg); color: var(--danger-tx); }
.st-pending { background: var(--alerte-bg); color: var(--alerte-tx); }
.st-default { background: var(--neutre-bg); color: var(--neutre-tx); }

.badge-source { background: var(--accent-doux); color: var(--accent); }
.badge-action { background: var(--violet-bg); color: var(--violet-tx); }
.badge-admin { background: var(--violet-bg); color: var(--violet-tx); }
.badge-agent { background: var(--neutre-bg); color: var(--neutre-tx); }
.badge-ia { background: var(--accent-doux); color: var(--accent); }
.badge-template { background: var(--neutre-bg); color: var(--neutre-tx); }

.chips { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin-bottom: var(--espace-4); }

.chip {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--carte);
  color: var(--texte-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   LAYOUT — SIDEBAR + CONTENU
   ============================================================ */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--sidebar-texte);
  padding: var(--espace-4) var(--espace-3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  text-decoration: none;
}

.sidebar-brand { padding: var(--espace-2) var(--espace-2) var(--espace-4); }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
}

/**
 * Le monogramme portait les deux lettres « K2 ». Il porte desormais la meme ligne de
 * crete que la vitrine : un sommet, et une courbe qui monte vers lui. La console et la
 * page d'accueil partagent ainsi un seul signe — un visiteur qui se connecte ne change
 * pas de marque en chemin.
 */
.brand-logo { width: 20px; height: 20px; color: #fff; flex: none; }
/* Point de chaleur, eclairci pour rester lisible sur le degrade indigo-violet. */
.brand-apex { fill: #ff8a5c; }
.login-brand-mark .brand-logo { width: 30px; height: 30px; }

.sidebar .brand-name { color: #fff; font-weight: 750; font-size: 16px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-group-label {
  margin: var(--espace-4) var(--espace-2) var(--espace-1);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-texte-2);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  color: var(--sidebar-texte);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
}

.nav-link:hover { background: var(--sidebar-actif); color: #fff; }
.nav-link.active { background: var(--sidebar-actif); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-text { flex: 1; min-width: 0; }

.nav-badge {
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.sidebar-tenant {
  margin-top: var(--espace-4);
  padding: var(--espace-3) var(--espace-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tenant-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-texte-2); }
.tenant-name { font-size: 13px; font-weight: 650; color: #fff; }

/* Barre utilisateur (bas de sidebar) */

.userbar { position: relative; padding: 0 var(--espace-2) var(--espace-2); }

.userbar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--sidebar-texte);
  font: inherit;
  cursor: pointer;
  transition: background var(--transition);
}

.userbar-btn:hover { background: var(--sidebar-actif); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.userbar-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.userbar-name { font-size: 13px; font-weight: 650; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userbar-meta { font-size: 11px; color: var(--sidebar-texte-2); }
.userbar-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.userbar-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: var(--espace-2);
  right: var(--espace-2);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-m);
  box-shadow: var(--ombre-3);
  overflow: hidden;
  z-index: 50;
}

.userbar-menu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.userbar-menu button:hover { background: var(--fond-doux); color: var(--accent); }

/* Contenu */

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.view {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--espace-5) var(--espace-5) 72px;
  outline: none;
}

.view-sub { color: var(--texte-2); font-size: 13px; margin: 0; }

/* Topbar mobile */

.mobile-topbar {
  display: none;
  align-items: center;
  gap: var(--espace-3);
  padding: 10px var(--espace-4);
  background: var(--sidebar-bg);
  position: sticky;
  top: 0;
  z-index: 30;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--sidebar-actif);
  color: #fff;
  cursor: pointer;
}

.nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 30, 0.5);
  z-index: 35;
}

/* Barre de token admin (mode ops) */

.token-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-5);
  background: var(--alerte-bg);
  border-bottom: 1px solid var(--bordure);
  font-size: 13px;
}

.token-icon { width: 18px; height: 18px; fill: none; stroke: var(--alerte-tx); stroke-width: 1.7; }
.token-bar label { font-weight: 700; color: var(--alerte-tx); }
.token-bar .hint { flex-basis: 100%; margin: 0; font-size: 11.5px; color: var(--texte-2); }

/* ============================================================
   TOPBAR DE VUE
   ============================================================ */

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espace-4);
  margin-bottom: var(--espace-5);
}

.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-2); }
.crumbs a { color: var(--texte-2); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--accent); }
.crumb-sep { color: var(--texte-3); }

.topbar-actions { display: flex; gap: var(--espace-2); flex-shrink: 0; flex-wrap: wrap; }

/* ============================================================
   CARTES, SECTIONS, KPI
   ============================================================ */

.section { margin-bottom: var(--espace-6); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espace-3);
}

.section-link { font-size: 12.5px; font-weight: 650; text-decoration: none; }

.card {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-m);
  box-shadow: var(--ombre-1);
}

.card-pad { padding: var(--espace-4); }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espace-4);
  margin-bottom: var(--espace-6);
}

/**
 * La carte de mesure se souleve au survol et laisse apparaitre un filet d'accent en
 * haut. Le mouvement est minuscule (1 px) : sur une grille de six cartes, tout ce qui
 * bouge davantage devient du bruit.
 */
.kpi {
  position: relative;
  display: flex;
  gap: var(--espace-3);
  align-items: flex-start;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-m);
  box-shadow: var(--ombre-1);
  padding: var(--espace-5) var(--espace-4) var(--espace-4);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--indigo), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}

.kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--ombre-2);
  border-color: var(--accent-doux);
}
.kpi:hover::before { transform: scaleX(1); }

.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.kpi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.kpi-icon.indigo { background: var(--accent-doux); color: var(--accent); }
.kpi-icon.vert { background: var(--succes-bg); color: var(--succes-tx); }
.kpi-icon.orange { background: var(--alerte-bg); color: var(--alerte-tx); }
.kpi-icon.ardoise { background: var(--neutre-bg); color: var(--neutre-tx); }

.kpi-body { flex: 1; min-width: 0; }

/* La VALEUR d'abord, l'etiquette dessous : on lit le chiffre, puis ce qu'il mesure. */
.kpi-value {
  display: block;
  font-size: 29px;
  font-weight: 800;
  color: var(--encre);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Etiquette en monospace : voir « .mesure ». */
.kpi-label {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-2);
}

/* La variation devient une pastille : elle se lit d'un coup d'oeil au lieu de se
   confondre avec l'etiquette juste au-dessus. */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--espace-2);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.kpi-delta.up { color: var(--succes-tx); background: var(--succes-bg); }
.kpi-delta.down { color: var(--danger-tx); background: var(--danger-bg); }
.kpi-delta-ref { color: inherit; opacity: 0.65; font-weight: 500; }

.kpi-spark { margin-top: var(--espace-3); display: block; height: 30px; width: 100%; }
.kpi-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpi-spark polygon { fill: var(--accent); opacity: 0.1; stroke: none; }

/* ============================================================
   TABLEAUX
   ============================================================ */

.table-wrap {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-m);
  box-shadow: var(--ombre-1);
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--bordure-douce); }

th {
  color: var(--texte-2);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--fond-doux);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
}

tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--fond-doux); }
tbody tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; }

.num { text-align: right; }
.cell-main { font-weight: 650; color: var(--encre); }
.cell-main .cell-sub { font-weight: 400; margin-top: 1px; }
.cell-sub { color: var(--texte-2); font-size: 12px; }
.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

td code, .form-card-url code {
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--espace-3); }
.field label { font-size: 12px; font-weight: 650; color: var(--texte-2); }

input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  padding: 9px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 13px;
  color: var(--texte);
  background: var(--carte);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

textarea { min-height: 130px; resize: vertical; }
textarea.short { min-height: 70px; }

.form-error {
  margin: var(--espace-2) 0;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: var(--danger-bg);
  color: var(--danger-tx);
  font-size: 12.5px;
  font-weight: 600;
}

.hint { font-size: 11.5px; color: var(--texte-2); }

/* Interrupteur (formulaires, séquences) */

.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--neutre-bg);
  transition: background var(--transition);
  pointer-events: none;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ombre-1);
  transition: transform var(--transition);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:disabled + .switch-track { opacity: 0.5; }

/* ============================================================
   MODALES
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  z-index: 100;
  animation: fade-in 180ms ease;
  overflow-y: auto;
}

.modal {
  background: var(--carte);
  border-radius: var(--radius-l);
  box-shadow: var(--ombre-3);
  width: 100%;
  max-width: 620px;
  animation: modal-in 200ms ease;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}

.modal-wide { max-width: 760px; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  padding: var(--espace-4) var(--espace-5);
  border-bottom: 1px solid var(--bordure-douce);
}

.modal-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--texte-2);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--fond-doux); color: var(--texte); }

.modal-body { padding: var(--espace-4) var(--espace-5); overflow-y: auto; }
.modal-intro { margin: 0 0 var(--espace-3); color: var(--texte-2); font-size: 13px; }

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-5);
  border-top: 1px solid var(--bordure-douce);
}

.modal-note { flex: 1; font-size: 12.5px; color: var(--succes-tx); font-weight: 600; }

/* ============================================================
   TOASTS
   ============================================================ */

.toast-root {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  z-index: 200;
}

.toast {
  padding: 11px 16px;
  border-radius: var(--radius-s);
  background: var(--encre);
  color: var(--fond);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--ombre-3);
  animation: toast-in 200ms ease;
  max-width: 360px;
}

@media (prefers-color-scheme: dark) {
  .toast { background: #e2e8f0; color: #0f172a; }
}

.toast.success { background: var(--succes-tx); color: #fff; }
.toast.error { background: var(--danger-tx); color: #fff; }
.toast.leaving { opacity: 0; transition: opacity 300ms; }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   ÉTATS VIDES, ERREURS, SKELETONS, SPINNER
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--espace-6) var(--espace-4);
  text-align: center;
  color: var(--texte-2);
  font-size: 13px;
}

.empty-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-l);
  background: var(--accent-doux);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espace-2);
}

.empty-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.empty-title { font-size: 14px; font-weight: 700; color: var(--encre); margin: 0; }
.empty-state p { margin: 0; }
.empty-state .btn { margin-top: var(--espace-2); }

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-6);
  text-align: center;
  color: var(--danger-tx);
  font-size: 13px;
}

.skeleton {
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--bordure-douce) 25%, var(--fond) 50%, var(--bordure-douce) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer { to { background-position: -200% 0; } }

.sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espace-4); margin-bottom: var(--espace-5); }
.sk-kpis .skeleton { height: 86px; }
.sk-block { height: 200px; margin-bottom: var(--espace-4); }
.sk-line { height: 52px; margin-bottom: var(--espace-2); }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   BANDEAUX
   ============================================================ */

.banner {
  border-radius: var(--radius-m);
  padding: var(--espace-3) var(--espace-4);
  font-size: 13px;
  margin-bottom: var(--espace-4);
}

.banner ul { margin: 6px 0 0; padding-left: 18px; }
.banner-warning { background: var(--alerte-bg); color: var(--alerte-tx); }
.banner-error { background: var(--danger-bg); color: var(--danger-tx); }

/* ============================================================
   FLUX & TIMELINE
   ============================================================ */

.feed, .timeline { list-style: none; margin: 0; padding: 0; }

.feed li, .timeline li {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--bordure-douce);
  font-size: 13px;
}

.feed li:last-child, .timeline li:last-child { border-bottom: none; }

.tl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.tl-icon.p { background: var(--accent-doux); color: var(--accent); }
.tl-icon.f { background: var(--succes-bg); color: var(--succes-tx); }
.tl-icon.c { background: var(--violet-bg); color: var(--violet-tx); }
.tl-icon.i { background: var(--neutre-bg); color: var(--neutre-tx); }

.feed-body, .tl-body { flex: 1; min-width: 0; }
.tl-title { font-weight: 650; color: var(--encre); }
.tl-meta { color: var(--texte-2); font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.feed time, .tl-time { color: var(--texte-3); font-size: 12px; white-space: nowrap; }

/* ============================================================
   VUE D'ENSEMBLE — MINI PRIORITÉS & GRAPHIQUES
   ============================================================ */

.mini-prop {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--bordure-douce);
  text-decoration: none;
  color: var(--texte);
  font-size: 13px;
  transition: background var(--transition);
}

.mini-prop:last-child { border-bottom: none; }
.mini-prop:hover { background: var(--fond-doux); }
.mini-prop-title { flex: 1; font-weight: 650; color: var(--encre); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-prop-arrow { color: var(--texte-3); }

.ring {
  --p: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--ring-color, var(--neutre-bg)) calc(var(--p) * 1%), var(--bordure-douce) 0);
}

.ring-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--carte);
  font-size: 13px;
  font-weight: 800;
  color: var(--encre);
}

.ring.small { width: 38px; height: 38px; }
.ring.small .ring-inner { width: 28px; height: 28px; font-size: 11px; }
.ring.danger { --ring-color: var(--danger); }
.ring.alerte { --ring-color: var(--alerte); }
.ring.neutre { --ring-color: var(--neutre-bg); }

.line-chart { display: block; width: 100%; height: 180px; }
.line-chart .lc-area { fill: var(--accent); opacity: 0.1; }
.line-chart .lc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .lc-dot { fill: var(--accent); }

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 6px 16px 12px;
  color: var(--texte-3);
  font-size: 11px;
}

/* ============================================================
   PRIORITÉS
   ============================================================ */

#proposals-list { display: flex; flex-direction: column; gap: var(--espace-4); }

.proposal {
  display: flex;
  gap: var(--espace-4);
  align-items: flex-start;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-m);
  box-shadow: var(--ombre-1);
  padding: var(--espace-4);
}

.proposal-body { flex: 1; min-width: 0; }
.proposal-why { margin: 4px 0 var(--espace-2); color: var(--texte-2); font-size: 13px; }
.proposal-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--espace-2); }
.proposal-actions { flex-shrink: 0; }

/* Remplace le bouton quand la relance n'est pas envoyable : note interne, ou lead
   non materialise. Dire pourquoi ici vaut mieux qu'un echec technique en fin de
   parcours, apres avoir fait rediger un brouillon pour rien. */
.proposal-note {
  margin: 0;
  max-width: 15rem;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texte-2);
  border-left: 2px solid var(--bordure);
  padding-left: var(--espace-2);
}

.breakdown { margin-top: var(--espace-2); font-size: 12.5px; }
.breakdown summary { cursor: pointer; color: var(--accent); font-weight: 650; }
.breakdown ul { margin: 6px 0 0; padding-left: 18px; color: var(--texte-2); }
.breakdown code { background: var(--fond-doux); border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }

/* ============================================================
   FICHE LEAD
   ============================================================ */

.lead-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-4); flex-wrap: wrap; margin-bottom: var(--espace-5); }
.lead-id { min-width: 0; }
.lead-badges { display: flex; gap: 6px; margin: 0 0 var(--espace-2); }
.lead-mail { margin: 2px 0; font-size: 13px; color: var(--texte-2); }
.lead-status-field { min-width: 180px; margin-bottom: 0; }

.stat-row { display: flex; gap: var(--espace-5); flex-wrap: wrap; }
.stat-item { min-width: 90px; }
.stat-value { font-size: 22px; font-weight: 800; color: var(--encre); }
.stat-label { font-size: 11.5px; color: var(--texte-2); font-weight: 600; }

.rgpd-text { margin: 0 0 var(--espace-3); color: var(--texte-2); font-size: 13px; }
.rgpd-actions { display: flex; gap: var(--espace-2); flex-wrap: wrap; }

.back-link { font-size: 13px; }

/* ============================================================
   FORMULAIRES HÉBERGÉS
   ============================================================ */

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--espace-4); }
.form-card { padding: var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-2); }
.form-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-3); }
.form-card-meta { margin: 0; font-size: 12.5px; color: var(--texte-2); }
.form-card-url { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-card-actions { display: flex; gap: var(--espace-2); margin-top: var(--espace-2); }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */

.notif-list { list-style: none; margin: 0; padding: 0; }

.notif-item {
  display: flex;
  gap: var(--espace-3);
  align-items: flex-start;
  padding: var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--bordure-douce);
}

.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--accent-doux); }
.notif-item.unread:hover { background: var(--accent-doux); }

.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 650; color: var(--encre); font-size: 13px; }
.notif-text { color: var(--texte-2); font-size: 12.5px; margin-top: 2px; }
.notif-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; }

/* ============================================================
   SÉQUENCES
   ============================================================ */

.seq-steps { display: flex; flex-direction: column; gap: var(--espace-3); margin-bottom: var(--espace-3); }

.seq-step {
  border: 1px solid var(--bordure);
  border-radius: var(--radius-m);
  padding: var(--espace-3);
  background: var(--fond-doux);
}

.seq-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--espace-2); font-size: 12px; font-weight: 700; color: var(--texte-2); }
.seq-step-grid { display: grid; grid-template-columns: 110px 1fr; gap: var(--espace-3); }
.seq-step-grid .field { margin-bottom: var(--espace-2); }

.step-list { list-style: none; margin: 0; padding: 0; }
.step-list li {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--bordure-douce);
  font-size: 13px;
}
.step-list li:last-child { border-bottom: none; }
.step-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-doux);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.step-body { flex: 1; min-width: 0; }
.step-subject { font-weight: 650; color: var(--encre); }
.step-meta { color: var(--texte-2); font-size: 12px; }

/* ============================================================
   APERÇU DE MESSAGE (iframe sandbox + texte brut)
   ============================================================ */

.preview-meta { margin-bottom: var(--espace-3); }
.preview-meta h3 { margin-bottom: 2px; }
.preview-badges { display: flex; gap: 6px; margin: var(--espace-2) 0 0; }
.preview-tabs { margin-bottom: var(--espace-3); }

.mail-frame {
  width: 100%;
  height: 55vh;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-s);
  background: #fff;
}

.mail-raw {
  margin: 0;
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-s);
  background: var(--fond-doux);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 55vh;
  overflow-y: auto;
}

/* ============================================================
   PAGE DE CONNEXION
   ============================================================ */

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.login-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espace-4);
  padding: 8vh 7vw;
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(124, 58, 237, 0.45), transparent 70%),
    linear-gradient(160deg, #151d4a 0%, #0e1430 100%);
  color: #fff;
}

.login-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  font-size: 20px;
  font-weight: 800;
}

.login-brand-tag { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; margin: 0; max-width: 420px; }

.login-brand-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.login-brand-points li {
  position: relative;
  padding-left: 22px;
  color: #c7cdf0;
  font-size: 14px;
}
.login-brand-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--succes);
  border-bottom: 2px solid var(--succes);
  transform: rotate(-45deg);
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 7vw;
  background: var(--carte);
}

.login-title { font-size: 24px; }
.login-sub { color: var(--texte-2); margin: 0 0 var(--espace-5); }
.login-dev { margin-top: var(--espace-4); text-align: center; font-size: 12.5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .mobile-topbar { display: flex; }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--ombre-3);
  }

  .layout.sidebar-open .sidebar { transform: translateX(0); }
  .layout.sidebar-open .sidebar-overlay { display: block; }

  .view { padding: var(--espace-4) var(--espace-4) 64px; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .proposal { flex-wrap: wrap; }
  .login-screen { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-panel { min-height: 100vh; }
}

/* ============================================================
   CONSOLE SUPER ADMIN
   ============================================================

   Cet ecran n'avait jamais ete dessine : admin.html portait une balise <style>
   avec le commentaire « le design arrive Phase C », et un bleu code en dur qui
   n'etait meme pas celui de la console. Tout est repris ici, dans la feuille
   partagee, pour que les deux consoles vieillissent ensemble.

   Le parti pris est celui de la vitrine : la mesure d'abord. Chiffres en gros,
   etiquettes en monospace, filets plutot que cadres, une seule couleur chaude
   reservee a ce qui merite l'oeil.
   ============================================================ */

.admin-body { background: var(--fond); }

/* ─── Barre superieure ─────────────────────────────────────────────────────── */

.sa-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--carte) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bordure);
}

.sa-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--espace-3) var(--espace-5);
}

.sa-brand { display: flex; align-items: center; gap: var(--espace-3); text-decoration: none; }
.sa-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sa-brand-name { font-size: 15px; font-weight: 750; color: var(--encre); letter-spacing: -0.02em; }
.sa-brand-role {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-3);
}

/* ─── Onglets ──────────────────────────────────────────────────────────────── */

.sa-tabs {
  display: flex;
  gap: 2px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--espace-5);
  overflow-x: auto;
}

/* Onglet souligne plutot que pastille : la pastille pleine faisait concurrence au
   bouton d'action principal, et rien ne disait plus ou l'on etait. */
.sa-tab {
  position: relative;
  padding: var(--espace-3) var(--espace-4);
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 620;
  color: var(--texte-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition);
}
.sa-tab::after {
  content: "";
  position: absolute;
  left: var(--espace-3);
  right: var(--espace-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 220ms ease;
}
.sa-tab:hover { color: var(--encre); }
.sa-tab.active { color: var(--accent); }
.sa-tab.active::after { transform: scaleX(1); }

/* ─── Corps ────────────────────────────────────────────────────────────────── */

.sa-shell { max-width: 1240px; margin: 0 auto; padding: var(--espace-6) var(--espace-5) 72px; }

.sa-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-4);
  margin: var(--espace-6) 0 var(--espace-4);
}
.sa-section-head:first-child { margin-top: 0; }
.sa-section-title { font-size: 16px; font-weight: 720; color: var(--encre); letter-spacing: -0.015em; margin: 0; }

/* ─── Graphique d'activite ─────────────────────────────────────────────────── */

.sa-chart-card { padding: var(--espace-5); }

.sa-legend { display: flex; flex-wrap: wrap; gap: var(--espace-4); margin-bottom: var(--espace-4); }
.sa-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.sa-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.sa-chart { display: block; width: 100%; height: 210px; }
.sa-chart-grid { stroke: var(--filet); stroke-width: 1; }
.sa-chart-area { stroke: none; }
.sa-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Le point final est marque : c'est la valeur d'aujourd'hui, celle qu'on cherche. */
.sa-chart-end { stroke: var(--carte); stroke-width: 2; }

.sa-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--espace-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--texte-3);
}

/* ─── Tableau des locataires ───────────────────────────────────────────────── */

.sa-quota { display: flex; flex-direction: column; gap: 4px; min-width: 116px; }
.sa-quota-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--neutre-bg);
  overflow: hidden;
}
.sa-quota-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
/* Au-dela de 80 % du plafond, la barre passe a la couleur de chaleur : c'est le seul
   endroit du tableau ou l'exploitant doit agir avant que le client ne s'en apercoive. */
.sa-quota-fill.chaud { background: var(--signal); }
.sa-quota-text { font-family: var(--mono); font-size: 10.5px; color: var(--texte-3); }

.sa-muted { color: var(--texte-3); }
.sa-num { font-family: var(--mono); font-size: 12.5px; }

/* Point d'activite : plein si le locataire a emis dans les 7 jours, creux sinon. */
.sa-pulse { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sa-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--succes); flex: none; }
.sa-pulse-dot.tiede { background: var(--alerte); }
.sa-pulse-dot.froid { background: var(--neutre-bg); box-shadow: inset 0 0 0 1.5px var(--texte-3); }

/* ─── Connexion ────────────────────────────────────────────────────────────── */

.sa-login { max-width: 400px; margin: 12vh auto; padding: var(--espace-6); }
.sa-login-brand { display: flex; align-items: center; gap: var(--espace-3); margin-bottom: var(--espace-5); }
.sa-login h1 { font-size: 19px; margin: 0 0 4px; }
.sa-login-sub { color: var(--texte-2); font-size: 13px; margin: 0 0 var(--espace-5); }

/* ─── Divers ───────────────────────────────────────────────────────────────── */

.sa-msg { margin: var(--espace-3) 0; font-size: 13px; }
.sa-msg.error { color: var(--danger-tx); }
.sa-msg.ok { color: var(--succes-tx); }
.sa-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-inline-form { display: flex; gap: 6px; align-items: center; }
.sa-inline-form select, .sa-inline-form input { font-size: 12px; padding: 5px 8px; }
.sa-euros { width: 88px; }
.sa-form { display: grid; gap: var(--espace-3); }
.sa-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--espace-3); }

@media (max-width: 720px) {
  .sa-top-inner, .sa-tabs { padding-left: var(--espace-4); padding-right: var(--espace-4); }
  .sa-shell { padding: var(--espace-5) var(--espace-4) 56px; }
  .sa-chart { height: 170px; }
}

/**
 * Grille de mesures en TROIS colonnes pour la console super admin.
 *
 * La grille generique (auto-fit, minmax 220px) donnait cinq colonnes sur un grand
 * ecran : six cartes s'y rangeaient en 5 + 1, avec une carte orpheline sur sa propre
 * ligne. Trois colonnes font deux rangees pleines, et laissent la place d'ecrire
 * « Revenu mensuel récurrent » sans le couper.
 */
.kpis-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) { .kpis-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kpis-trio { grid-template-columns: minmax(0, 1fr); } }

/**
 * Une carte de mesure SANS courbe centre son contenu.
 *
 * Les cartes d'une meme rangee ont la meme hauteur : celles qui portent une courbe
 * la remplissent, les autres laissaient un grand vide sous leur etiquette et
 * paraissaient inachevees. Centrer verticalement suffit — inventer un contenu pour
 * combler le trou aurait ete pire.
 */
.kpi:not(:has(.kpi-spark)) { align-items: center; }