/* ============================================================================
   Tableau de bord des rejets — feuille de style du composant
   ----------------------------------------------------------------------------
   Tout est préfixé `sdb-` et porté par la racine `.sdb`, pour que l'intégration
   dans une application existante ne provoque aucune collision de sélecteurs.
   Aucun style n'est posé sur body/html : c'est à la page hôte de le faire.

   Personnalisation : redéfinissez les variables sur .sdb depuis votre app.
       .sdb { --sdb-c1: #005587; --sdb-font: "Inter", sans-serif; }
   ========================================================================== */

.sdb {
  /* encres et surfaces */
  --sdb-ink:     #14202a;
  --sdb-ink-2:   #4a5c6a;
  --sdb-ink-3:   #7b8b98;
  --sdb-ground:  #eff2f4;
  --sdb-card:    #ffffff;
  --sdb-rule:    #dce3e7;
  --sdb-soft:    #e9eef1;

  /* série catégorielle — validée pour les déficiences de vision des couleurs */
  --sdb-c1: #0e83b3;
  --sdb-c2: #c9701c;
  --sdb-c3: #7d4fa8;
  --sdb-c4: #4e8f3a;
  --sdb-neutral: #9aa8b2;

  --sdb-shadow: 0 1px 2px rgba(20, 32, 42, .05), 0 6px 18px -10px rgba(20, 32, 42, .2);
  --sdb-radius: 4px;
  --sdb-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color: var(--sdb-ink);
  font-family: var(--sdb-font);
  font-size: 15px;
  line-height: 1.5;
}

/* Thème sombre — trois états : préférence système, et forçage dans les deux sens. */
@media (prefers-color-scheme: dark) {
  .sdb:not([data-sdb-theme="light"]) {
    --sdb-ink: #e6edf2;  --sdb-ink-2: #a8b8c4; --sdb-ink-3: #788895;
    --sdb-ground: #0f1418; --sdb-card: #181f25; --sdb-rule: #2a343c; --sdb-soft: #212a31;
    --sdb-c1: #2b93b8; --sdb-c2: #c37a2b; --sdb-c3: #8e6fbd; --sdb-c4: #569e45;
    --sdb-neutral: #5c6a75;
    --sdb-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -10px rgba(0, 0, 0, .7);
  }
}
.sdb[data-sdb-theme="dark"] {
  --sdb-ink: #e6edf2;  --sdb-ink-2: #a8b8c4; --sdb-ink-3: #788895;
  --sdb-ground: #0f1418; --sdb-card: #181f25; --sdb-rule: #2a343c; --sdb-soft: #212a31;
  --sdb-c1: #2b93b8; --sdb-c2: #c37a2b; --sdb-c3: #8e6fbd; --sdb-c4: #569e45;
  --sdb-neutral: #5c6a75;
  --sdb-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -10px rgba(0, 0, 0, .7);
}

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

.sdb-num { font-variant-numeric: tabular-nums; }

/* ── en-tête ─────────────────────────────────────────────────────────────── */
.sdb-header { padding: 4px 0 18px; }
.sdb-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sdb-ink-3); font-weight: 600; margin: 0 0 8px;
}
.sdb-title {
  font-size: 27px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 4px;
  color: var(--sdb-ink);
}
.sdb-lede { color: var(--sdb-ink-2); margin: 0; font-size: 14.5px; }

/* ── barre de filtres ────────────────────────────────────────────────────── */
.sdb-filters {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end;
  padding: 16px 18px; margin: 18px 0 22px;
  background: var(--sdb-card); border: 1px solid var(--sdb-rule);
  border-radius: var(--sdb-radius); box-shadow: var(--sdb-shadow);
}
.sdb-fgroup { display: flex; flex-direction: column; gap: 7px; }
.sdb-flabel {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sdb-ink-3); font-weight: 600;
}
.sdb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sdb-chip {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--sdb-rule); background: transparent;
  color: var(--sdb-ink-2); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sdb-chip:hover { border-color: var(--sdb-c1); color: var(--sdb-c1); }
.sdb-chip[aria-pressed="true"] {
  background: var(--sdb-c1); border-color: var(--sdb-c1); color: #fff;
}
.sdb-chip:focus-visible { outline: 2px solid var(--sdb-c1); outline-offset: 2px; }
.sdb-select {
  font: inherit; font-size: 13.5px; padding: 6px 10px;
  border-radius: var(--sdb-radius); border: 1px solid var(--sdb-rule);
  background: var(--sdb-card); color: var(--sdb-ink); cursor: pointer; min-width: 210px;
}
.sdb-select:focus-visible { outline: 2px solid var(--sdb-c1); outline-offset: 1px; }
.sdb-reset { margin-left: auto; align-self: center; }

/* ── indicateurs de tête ─────────────────────────────────────────────────── */
.sdb-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
.sdb-kpi {
  background: var(--sdb-card); border: 1px solid var(--sdb-rule);
  border-radius: var(--sdb-radius); padding: 16px 18px;
  box-shadow: var(--sdb-shadow); position: relative; overflow: hidden;
}
.sdb-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sdb-c1);
}
.sdb-kpi--amber::before   { background: var(--sdb-c2); }
.sdb-kpi--green::before   { background: var(--sdb-c4); }
.sdb-kpi--neutral::before { background: var(--sdb-neutral); }
.sdb-kpi-k {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sdb-ink-3); font-weight: 600; display: block; margin-bottom: 7px;
}
.sdb-kpi-v {
  font-size: 32px; font-weight: 650; line-height: 1.05;
  letter-spacing: -.02em; display: block;
}
.sdb-kpi-s { font-size: 12.5px; color: var(--sdb-ink-3); display: block; margin-top: 5px; }

/* ── grille de cartes ────────────────────────────────────────────────────── */
.sdb-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.sdb-card {
  background: var(--sdb-card); border: 1px solid var(--sdb-rule);
  border-radius: var(--sdb-radius); padding: 18px 20px 16px;
  box-shadow: var(--sdb-shadow); min-width: 0;
}
.sdb-span-4  { grid-column: span 4; }
.sdb-span-6  { grid-column: span 6; }
.sdb-span-8  { grid-column: span 8; }
.sdb-span-12 { grid-column: span 12; }
@media (max-width: 860px) {
  .sdb-span-4, .sdb-span-6, .sdb-span-8 { grid-column: span 12; }
}
.sdb-card-title {
  font-size: 14px; font-weight: 650; margin: 0 0 2px; letter-spacing: -.005em;
  color: var(--sdb-ink);
}
.sdb-den { font-size: 11.5px; color: var(--sdb-ink-3); margin: 0 0 15px; }
.sdb-empty { color: var(--sdb-ink-3); font-size: 13px; padding: 22px 0; text-align: center; }

/* ── marques graphiques ──────────────────────────────────────────────────── */
.sdb svg { display: block; }
.sdb-gridline { stroke: var(--sdb-soft); stroke-width: 1; }
.sdb-axis {
  color: var(--sdb-ink-3); font-size: 10.5px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.sdb-mark { transition: opacity .12s; }
.sdb-mark:hover { opacity: .78; }

.sdb-bars { display: flex; flex-direction: column; gap: 7px; }
.sdb-bar {
  display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto;
  gap: 11px; align-items: center;
}
.sdb-bar-k {
  font-size: 12px; color: var(--sdb-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sdb-bar-track {
  height: 19px; background: var(--sdb-soft);
  border-radius: 3px; overflow: hidden;
}
.sdb-bar-fill { display: block; height: 100%; border-radius: 3px; }
.sdb-bar-v {
  font-size: 12px; font-weight: 650; min-width: 64px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.sdb-stack { display: flex; gap: 2px; height: 38px; }
.sdb-stack > span {
  border-radius: 3px; display: flex; align-items: center; padding-left: 10px;
  color: #fff; font-weight: 650; font-size: 13px;
  overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums;
}

.sdb-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 12px; color: var(--sdb-ink-2); margin-top: 12px;
}
.sdb-legend i {
  width: 10px; height: 10px; border-radius: 2px;
  display: inline-block; margin-right: 6px;
}

/* ── infobulle ───────────────────────────────────────────────────────────── */
.sdb-tip {
  position: fixed; pointer-events: none; opacity: 0; transition: opacity .1s;
  z-index: 9999; background: var(--sdb-ink); color: var(--sdb-ground);
  padding: 7px 10px; border-radius: var(--sdb-radius);
  font-family: var(--sdb-font); font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28); max-width: 240px;
}
.sdb-tip b { font-variant-numeric: tabular-nums; }

.sdb-footer {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--sdb-rule);
  font-size: 12px; color: var(--sdb-ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .sdb *, .sdb-tip { transition: none !important; }
}