/* Closing — composants CSS (préfixe cl-). Les valeurs viennent de tokens.json. */
body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 22px; margin: 0; }
.cl-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Button */
.cl-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control); padding: 0 var(--space-3);
  font: 500 13px/16px var(--font-sans); border-radius: var(--radius-sm); border: 1px solid var(--rule-strong);
  background: transparent; color: var(--ink); cursor: pointer; }
.cl-btn:hover { background: var(--paper-sunken); }
.cl-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cl-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cl-btn--primary:hover { background: var(--brand); filter: brightness(1.12); }
.cl-btn--ghost { border-color: transparent; color: var(--brand); }
.cl-btn--sm { height: 26px; padding: 0 var(--space-2); font-size: 12px; }
.cl-btn:disabled { color: var(--ink-subtle); border-color: var(--rule); background: transparent; cursor: not-allowed; filter: none; }

/* Delta */
.cl-delta { font: 400 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-delta--up { color: var(--up); }
.cl-delta--up::before { content: "▲ "; font-size: .75em; }
.cl-delta--down { color: var(--down); }
.cl-delta--down::before { content: "▼ "; font-size: .75em; }
.cl-delta--flat { color: var(--ink-muted); }
.cl-delta--flat::before { content: "= "; }

/* Badge */
.cl-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm);
  font: 600 11px/16px var(--font-sans); letter-spacing: .6px; text-transform: uppercase; background: var(--paper-sunken); color: var(--ink-muted); }
.cl-badge--brand { background: var(--brand-wash); color: var(--brand); }
.cl-badge--up { background: var(--up-wash); color: var(--up); }
.cl-badge--down { background: var(--down-wash); color: var(--down); }
.cl-badge--warn { background: var(--warn-wash); color: var(--warn); }

/* KpiTile */
.cl-kpi { background: var(--paper-raised); border-top: var(--rule-thick) solid var(--rule-strong); padding: var(--space-3) var(--space-4) var(--space-4); }
.cl-kpi__label { font: 600 11px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
.cl-kpi__value { font: 500 32px/36px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); margin: var(--space-2) 0 var(--space-1); }
.cl-kpi__foot { display: flex; align-items: baseline; gap: var(--space-2); font-size: 12px; color: var(--ink-subtle); }
.cl-kpi__spark { display: block; margin-top: var(--space-3); width: 100%; height: 28px; }
.cl-kpi__spark polyline { fill: none; stroke: var(--chart-1); stroke-width: 1.5; }

/* DataTable */
.cl-table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-sans); color: var(--ink); }
.cl-table caption { text-align: left; font: 600 21px/28px var(--font-serif); padding-bottom: var(--space-2); }
.cl-table th { background: var(--paper-sunken); color: var(--ink-muted); font: 600 11px/16px var(--font-sans); letter-spacing: .8px;
  text-transform: uppercase; text-align: left; padding: var(--space-2) var(--space-3); border-top: 2px solid var(--rule-strong); }
.cl-table td { height: var(--row-dense); padding: 0 var(--space-3); border-bottom: 1px solid var(--rule); }
.cl-table .is-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cl-table tbody tr:hover td { background: var(--paper-raised); }
.cl-table tr.is-selected td { background: var(--brand-wash); }
.cl-table tfoot td { font-weight: 600; border-top: 1px solid var(--rule-strong); border-bottom: 0; background: var(--paper-sunken); }
.cl-table__source { font-size: 12px; color: var(--ink-subtle); padding-top: var(--space-2); }

/* Tabs */
.cl-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--rule); }
.cl-tab { appearance: none; background: none; border: 0; padding: var(--space-2) 0; margin-bottom: -1px; cursor: pointer;
  font: 500 13px/16px var(--font-sans); color: var(--ink-muted); border-bottom: 3px solid transparent; }
.cl-tab:hover { color: var(--ink); }
.cl-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--claret); }
.cl-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Field */
.cl-field { display: grid; gap: var(--space-1); }
.cl-field__label { font: 500 13px/16px var(--font-sans); color: var(--ink); }
.cl-field__input { height: var(--control); padding: 0 var(--space-3); border: 1px solid var(--ink-subtle); border-radius: var(--radius-sm);
  background: var(--paper-raised); color: var(--ink); font: 400 14px/20px var(--font-sans); }
.cl-field__input.is-num { font-family: var(--font-mono); text-align: right; }
.cl-field__input::placeholder { color: var(--ink-subtle); }
.cl-field__input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.cl-field__help { font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.cl-field.is-error .cl-field__input { border-color: var(--down); }
.cl-field.is-error .cl-field__help { color: var(--down); }

/* Rubrique (en-tête de section éditorial) */
.cl-rubrique { border-top: var(--rule-thick) solid var(--rule-strong); padding-top: var(--space-2); }
.cl-rubrique__kicker { font: 600 11px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--claret); }
.cl-rubrique__title { font: 500 30px/36px var(--font-serif); margin: var(--space-1) 0 var(--space-2); color: var(--ink); }
.cl-rubrique__standfirst { font: 400 17px/26px var(--font-serif); color: var(--ink-muted); margin: 0; max-width: 64ch; }
.cl-rubrique__meta { font: 400 12px/16px var(--font-mono); color: var(--ink-subtle); margin-top: var(--space-2); }