/* ============================================================
   COMPONENTS — briques réutilisables, uniquement via variables.
   ============================================================ */

/* ---------- Tab button ---------- */
.tab {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--text);
}
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--sp-3); right: var(--sp-3);
  bottom: -1px;
  height: 2px;
  background: var(--text);
  border-radius: var(--radius-pill);
}
.tab__volume {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px var(--sp-2);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-subtle);
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
}

/* ---------- Header actions ---------- */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.last-updated {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-subtle);
  padding-right: var(--sp-2);
  white-space: nowrap;
}

/* ---------- Theme toggle ---------- */
.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.icon-btn__glyph {
  font-size: var(--fs-md);
  line-height: 1;
}
.icon-btn__svg {
  display: block;
}
.icon-btn[data-spinning="true"] .icon-btn__svg {
  animation: spin-rev 800ms linear infinite;
}
@keyframes spin-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ---------- Segmented control ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  gap: 2px;
}
.segmented__btn {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented__btn:hover { color: var(--text); }
.segmented__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ---------- KPI card ---------- */
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease);
}
.kpi:hover { border-color: var(--border-strong); }

.kpi__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.kpi__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-hero);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text);
}

.kpi__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.kpi__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.kpi--net    .kpi__dot { background: var(--series-net); }
.kpi--brut   .kpi__dot { background: var(--series-brut); }
.kpi--lost   .kpi__dot { background: var(--series-never); }
.kpi--rate   .kpi__dot { background: var(--success); }
.kpi--incid  .kpi__dot { background: var(--series-incid); }
.kpi--resil  .kpi__dot { background: var(--series-resil); }

/* ---------- Chart frame ---------- */
.frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.frame__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.frame__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
}

.frame__hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.chart-wrap {
  position: relative;
  width: 100%;
  height: 320px;
}
.chart-wrap--tall { height: 420px; }
.chart-wrap--short { height: 220px; }

/* ---------- Legend ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.legend__item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.legend__swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- Pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.pill--accent  { background: var(--accent-soft);  color: var(--accent);  border-color: transparent; }
.pill--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.pill--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.pill--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }

/* ---------- Table ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table thead th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}
.table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table thead th:last-child  { border-top-right-radius: var(--radius-md); }

.table td.num,
.table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.table tbody tr:hover {
  background: var(--surface-muted);
}

.table tbody tr:last-child td { border-bottom: 0; }

.table__wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table__group {
  font-weight: var(--fw-semi);
  color: var(--text);
  background: var(--surface-sunken);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---------- Insight block ---------- */
.insight {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.insight__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.insight__text {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-body);
}
.insight__text strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semi);
}

/* ---------- Empty state ---------- */
.empty {
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}