/* ============================================================
   GSCDASH — système de design premium (light/dark) + tokens dataviz.
   Palette dataviz validée (CVD-safe). Les SVG référencent var(--series-N).
   ============================================================ */
:root {
  /* surfaces & texte — light */
  --bg: #f4f5f3;
  --surface: #ffffff;
  --surface-1: #fcfcfb;      /* surface des graphiques */
  --surface-2: #f0f1ee;
  --surface-3: #e9eae6;
  --border: #e4e5e0;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --accent: #2a78d6;
  --accent-weak: #eaf1fc;
  --up: #006300;
  --down: #c0392b;
  /* statut */
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b;
  /* catégorielles (light) */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948;
  /* séquentiel bleu */
  --seq-100:#cde2fb; --seq-200:#9ec5f4; --seq-300:#6da7ec; --seq-400:#3987e5;
  --seq-500:#256abf; --seq-600:#184f95; --seq-700:#0d366b;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px -6px rgba(16,24,40,.10);
  --shadow-lg: 0 8px 32px -8px rgba(16,24,40,.18);
  --radius: 14px; --radius-sm: 9px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="dark"], :root:where(:not([data-theme="light"])) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --bg:#101010; --surface:#191918; --surface-1:#1a1a19; --surface-2:#222221; --surface-3:#2a2a28;
    --border:#2c2c2a; --text:#ffffff; --text-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --baseline:#383835;
    --accent:#3987e5; --accent-weak:#16233d; --up:#0ca30c; --down:#e66767;
    --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
    --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
    --seq-100:#0d366b; --seq-200:#104281; --seq-300:#184f95; --seq-400:#256abf;
    --seq-500:#3987e5; --seq-600:#6da7ec; --seq-700:#9ec5f4;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px -8px rgba(0,0,0,.5);
    --shadow-lg:0 12px 40px -10px rgba(0,0,0,.6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#101010; --surface:#191918; --surface-1:#1a1a19; --surface-2:#222221; --surface-3:#2a2a28;
  --border:#2c2c2a; --text:#ffffff; --text-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --baseline:#383835;
  --accent:#3987e5; --accent-weak:#16233d; --up:#0ca30c; --down:#e66767;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
  --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
  --seq-100:#0d366b; --seq-200:#104281; --seq-300:#184f95; --seq-400:#256abf;
  --seq-500:#3987e5; --seq-600:#6da7ec; --seq-700:#9ec5f4;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px -8px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px -10px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { margin:0; font-weight:640; letter-spacing:-.01em; }
a { color:var(--accent); text-decoration:none; }
.ic { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---- topbar ---- */
.topbar { display:flex; align-items:center; justify-content:space-between;
  padding:13px 26px; background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; }
.brand h1 { font-size:16px; }
.brand .sub { color:var(--muted); font-size:11.5px; }
.brand-mark { width:30px; height:30px; border-radius:9px;
  background:linear-gradient(140deg,var(--series-1),var(--series-7)); flex:none;
  box-shadow:0 2px 10px -2px color-mix(in srgb,var(--series-1) 60%,transparent); }
.actions { display:flex; align-items:center; gap:9px; }
.meta { color:var(--muted); font-size:12px; }
.btn { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 13px; font-size:13px; font-weight:550;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .06s var(--ease); }
.btn:hover { background:var(--surface-2); border-color:var(--muted); }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--accent); color:#fff; border-color:transparent; }
.btn.primary:hover { filter:brightness(1.06); background:var(--accent); }
.btn.ghost { border-color:transparent; background:transparent; color:var(--muted); padding-left:6px; }
.btn.ghost:hover { color:var(--text); background:transparent; }
.btn.icon-only { padding:8px; }
.icon-only .moon{display:none;}
:root[data-theme="dark"] .icon-only .sun,:root:where(:not([data-theme="light"])) .icon-only .sun{display:none;}
:root[data-theme="dark"] .icon-only .moon,:root:where(:not([data-theme="light"])) .icon-only .moon{display:block;}
@media (prefers-color-scheme:light){:root:not([data-theme]) .icon-only .moon{display:none;}:root:not([data-theme]) .icon-only .sun{display:block;}}

main { padding:24px 26px 60px; max-width:1360px; margin:0 auto; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap; }
.section-head h2 { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.eyebrow { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.search { display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 12px; width:280px; color:var(--muted); }
.search input { border:none; background:transparent; color:var(--text); outline:none; width:100%; font-size:13px; }

/* ---- executive summary ---- */
.exec { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.exec .tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); }
.tile .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.tile .v { font-size:27px; font-weight:700; letter-spacing:-.02em; margin-top:4px; }
.tile .sub { font-size:12px; color:var(--muted); margin-top:2px; }

/* ---- grid & cards ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:15px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:17px; box-shadow:var(--shadow); cursor:pointer; position:relative;
  transition:transform .14s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease); }
.card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.card-title { font-weight:620; font-size:14px; word-break:break-word; }
.card-perm { font-size:11px; color:var(--muted); margin-top:1px; }
.kpis { display:flex; align-items:baseline; gap:14px; margin:12px 0 6px; }
.kpi-main { font-size:25px; font-weight:700; letter-spacing:-.02em; }
.kpi-label { font-size:11px; color:var(--muted); }
.trend { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:650; }
.trend.up{color:var(--up);} .trend.down{color:var(--down);} .trend.flat{color:var(--muted);}
.card-foot { display:flex; align-items:center; gap:7px; margin-top:11px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--text-2); }
.badge.crit { background:color-mix(in srgb,var(--critical) 16%,transparent); color:var(--critical); }
.badge.warn { background:color-mix(in srgb,var(--warning) 22%,transparent); color:var(--text); }
.badge.pos { background:var(--accent-weak); color:var(--accent); }
.badge.good{ background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); }

/* ---- panels & charts ---- */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); margin-bottom:16px; }
.panel h3 { font-size:14px; margin-bottom:3px; }
.panel .why { font-size:12.5px; color:var(--text-2); margin:6px 0 14px; line-height:1.5; }
.panel .advice { display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding:11px 13px;
  background:var(--accent-weak); border-radius:var(--radius-sm); font-size:13px; color:var(--text); }
.panel .advice .ic { color:var(--accent); margin-top:1px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr;} }

.viz { width:100%; overflow:visible; display:block; }
.viz text { font:11px -apple-system,sans-serif; fill:var(--muted); }
.viz .lbl { fill:var(--text-2); font-weight:600; }
.viz .grid-line { stroke:var(--grid); stroke-width:1; }
.viz .axis { stroke:var(--baseline); stroke-width:1; }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--text-2); }
.legend i { width:11px; height:3px; border-radius:2px; display:inline-block; vertical-align:middle; margin-right:5px; }

/* gauge */
.gauge-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.gauge-num{font-size:40px;font-weight:750;letter-spacing:-.03em;}
.gauge-verdict{font-size:13px;color:var(--muted);}

/* detail header */
.detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.detail-head h2 { font-size:22px; }
.stat-row { display:flex; gap:26px; margin:14px 0 20px; flex-wrap:wrap; }
.stat .v{font-size:22px;font-weight:700;} .stat .l{font-size:11px;color:var(--muted);}

/* tables */
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:8px 9px; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:550; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* insight rows */
.insight { display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--border); }
.insight:last-child{border-bottom:none;}
.insight .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;}
.dot.s3{background:var(--critical);} .dot.s2{background:var(--warning);} .dot.s1{background:var(--muted);}
.insight .msg{font-weight:550;} .insight .act{color:var(--text-2);font-size:13px;margin-top:2px;}
.insight .type{font-size:11px;color:var(--accent);font-weight:650;text-transform:uppercase;letter-spacing:.03em;}

/* tooltip */
#tt { position:fixed; pointer-events:none; z-index:50; background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:8px 11px; font-size:12px;
  box-shadow:var(--shadow-lg); opacity:0; transition:opacity .1s; max-width:260px; color:var(--text); }
#tt .tt-k{color:var(--muted);} #tt b{font-variant-numeric:tabular-nums;}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--text);
  color:var(--bg);padding:11px 17px;border-radius:10px;font-size:13px;box-shadow:var(--shadow-lg);z-index:60;}
.empty{color:var(--muted);padding:34px;text-align:center;}
.skeleton{background:var(--surface-2);border-radius:var(--radius);height:150px;animation:pulse 1.3s var(--ease) infinite;}
@keyframes pulse{50%{opacity:.5;}}
.spin{animation:spin 1s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}}

/* --- Rebrand Mister Goo --- */
:root{ --accent:#1A56F0; --accent-weak:#e8eeff; }
.brand .brand-mark{ background:#fff url(/logo-mark.webp) center/78% no-repeat; border:1px solid var(--border); }