/* Cockpit Mac Douglass — dark-first (même ambiance que le 3004), palette validée
   par scripts/validate_palette.js (dataviz) : bleu/orange/aqua catégoriel,
   bleu↔rouge divergent, statuts fixes. Texte = tokens d'encre, jamais la couleur série. */
:root {
  color-scheme: dark;
  --page: #0b0b0d; --surface: #121214; --surface-2: #18181b;
  --ink: #f4f4f2; --ink-2: #c3c2b7; --muted: #898781; --grid: #26262a; --axis: #383835; --ring: rgba(255,255,255,.10);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70;
  --pos: #3987e5; --neg: #e66767; --mid: #383835;
  --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b;
  --radius: 10px; --gap: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body { font-size: 14px; line-height: 1.45; padding: 0 18px 40px; max-width: 1480px; margin: 0 auto; }
h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: .01em; }
h2 { font-size: 12px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
h3 { font-size: 12px; font-weight: 600; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
p { margin: 6px 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { margin-left: auto; }
b { font-weight: 600; color: var(--ink); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 10px; position: sticky; top: 0; background: linear-gradient(var(--page) 80%, transparent); z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(12,163,12,.18); }
.dot.stale { background: var(--warn); box-shadow: 0 0 0 3px rgba(250,178,25,.18); }
.meta { display: flex; align-items: center; gap: 14px; }
.spot { font-weight: 600; font-variant-numeric: tabular-nums; }
.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--ring); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ghost[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }

main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.card { background: var(--surface); border: 1px solid var(--ring); border-radius: var(--radius); padding: 16px 18px; min-width: 0; position: relative; }
.span-all { grid-column: 1 / -1; }
.card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.stat { font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.pill { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--ring); color: var(--ink-2); }
.pill.pos { color: #9cc3f3; border-color: rgba(57,135,229,.45); }
.pill.neg { color: #f2a3a3; border-color: rgba(230,103,103,.45); }
.pill.neutral { color: var(--ink-2); }

/* Synthèse */
.hero { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 12px; }
.hero-num { font-size: 48px; font-weight: 600; line-height: 1; }
.badge { font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--ring); }
.badge.neg { background: rgba(230,103,103,.12); border-color: rgba(230,103,103,.4); color: #f4b3b3; }
.badge.pos { background: rgba(57,135,229,.12); border-color: rgba(57,135,229,.4); color: #b5d3f7; }
.levels { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.level { background: var(--surface-2); border: 1px solid var(--ring); border-radius: 8px; padding: 10px 12px; }
.level.neg { border-color: rgba(230,103,103,.35); background: rgba(230,103,103,.07); }
.level.pos { border-color: rgba(57,135,229,.35); background: rgba(57,135,229,.07); }
.level .name { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.level .vote { font-weight: 700; font-size: 13px; margin: 2px 0 4px; display: flex; align-items: center; gap: 6px; }
.level .why { font-size: 12px; color: var(--ink-2); }
.lead { font-weight: 600; margin: 8px 0 2px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 8px 0; }
.kpis.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpi { background: var(--surface-2); border: 1px solid var(--ring); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi .value { font-size: 22px; font-weight: 600; }

/* Charts (SVG) */
.chart { position: relative; width: 100%; height: 240px; margin-top: 8px; }
.chart.short { height: 170px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chart .lbl { fill: var(--ink-2); font-size: 11px; }
.chart .bar.pos { fill: var(--pos); } .chart .bar.neg { fill: var(--neg); }
.chart .bar.hover { filter: brightness(1.25); }
.chart .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.s2 { stroke: var(--s2); }
.chart .area { fill: var(--s1); opacity: .10; }
.chart .mk { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.chart .mk.s2 { fill: var(--s2); }
.chart .ref { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: none; opacity: .7; }
.chart .hit { fill: transparent; cursor: crosshair; }
.tip { position: absolute; pointer-events: none; background: #202024; color: var(--ink); border: 1px solid var(--ring); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.4; z-index: 10; box-shadow: 0 6px 20px rgba(0,0,0,.4); white-space: nowrap; }
.tip b { display: block; }

/* Meter */
.meter-wrap { margin: 10px 0 4px; }
.meter-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.meter { height: 10px; border-radius: 999px; background: rgba(230,103,103,.35); overflow: hidden; position: relative; }
.meter .fill { height: 100%; background: var(--pos); width: 50%; transition: width .4s; }
.meter-ends { display: flex; justify-content: space-between; margin-top: 4px; }

/* Desk */
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 8px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.row { background: var(--surface-2); border: 1px solid var(--ring); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.row .k { font-weight: 600; }
.row .v { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.row.auto { border-color: rgba(25,158,112,.45); }
.up { color: #8fd3b4; } .down { color: #f2a3a3; }
.empty { color: var(--muted); font-size: 12px; padding: 6px 2px; }

/* Table view */
table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 16px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--grid); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
td.num, th.num { text-align: right; }
.tables-wrap { overflow-x: auto; }

footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--grid); }

@media (max-width: 980px) {
  main { grid-template-columns: 1fr; }
  .levels { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pf-grid { grid-template-columns: 1fr; }
  .kpis.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-num { font-size: 40px; }
  .top { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .meter .fill { transition: none; } }