/* Charte Woptimo — reprise de Profil Plus build_html.py (août 2026).
   Valeurs par défaut de tous les dashboards. Un client les surcharge dans
   dashboard/assets/<slug>.css, chargé après ce fichier : redéfinir les variables
   ci-dessous dans :root (thème clair) et [data-theme="dark"] (thème sombre).
   --wd-palette : couleurs des séries des graphiques (WD.PALETTE), dans l'ordre. */
:root {
  --bg:#f5f2ed; --panel:#ffffff; --panel-2:#fbf9f6;
  --ink:#15181d; --ink-2:#4c545c; --ink-3:#8b939b;
  --line:#e6e0d6; --line-soft:#f0ebe3;
  --accent:#1f6f5c; --accent-soft:#e9f2ef;
  --warn:#c0392b; --warn-soft:#fbecea;
  --m1:#1f6f5c; --m2:#3d7ea6; --m3:#c1813a;
  --b1:#1a6353; --b2:#25735f; --b3:#31836c;
  --b4:#409379; --b5:#57a48c; --b6:#c1813a;
  --tip-bg:#15181d; --tip-fg:#f7f5f1;
  --shadow:0 1px 2px rgba(20,24,28,.05), 0 12px 30px -20px rgba(20,24,28,.45);
  --radius:14px; --nav:#12241f; --nav-fg:#f4f1ea;
  --nav-hover:rgba(244,241,234,.12); --nav-line:rgba(244,241,234,.22);
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-title:var(--font-body);
  --wd-palette:#1f6f5c,#3d7ea6,#c1813a,#4fb497,#6aa9d0,#e0a45f,
    #c0392b,#8b939b,#6c5a9c,#9aa84f,#b5577e,#2f4858;
}
[data-theme="dark"] {
  --bg:#0f1216; --panel:#171b21; --panel-2:#1e232b;
  --ink:#f1f4f6; --ink-2:#b3bbc3; --ink-3:#7d868f;
  --line:#272d36; --line-soft:#212730;
  --accent:#4fb497; --accent-soft:#16302a;
  --warn:#ef6b5c; --warn-soft:#33201d;
  --m1:#4fb497; --m2:#6aa9d0; --m3:#e0a45f;
  --b1:#2c7d69; --b2:#358d77; --b3:#409c84;
  --b4:#4dab92; --b5:#63bba3; --b6:#d99a55;
  --tip-bg:#e9edf1; --tip-fg:#12161b;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 36px -20px rgba(0,0,0,.85);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--font-body);
  background:var(--bg); color:var(--ink); overflow:hidden;
  font-size:15px; -webkit-font-smoothing:antialiased;
}
.app { display:flex; height:100%; min-height:0; }
.sidenav {
  flex:none; width:232px; display:flex; flex-direction:column;
  background:var(--nav); color:var(--nav-fg); padding:18px 12px 14px;
}
.sidenav-name { font-weight:650; font-size:.92rem; }
.sidenav-sub { font-size:.72rem; opacity:.72; margin-top:2px; }
.sidenav-nav { flex:1; overflow:auto; margin-top:12px; }
.nav-label {
  font-size:.66rem; text-transform:uppercase; letter-spacing:.12em;
  opacity:.55; font-weight:700; padding:12px 8px 8px;
}
.nav-item {
  display:block; color:inherit; text-decoration:none;
  padding:8px 10px; border-radius:10px; font-size:.86rem;
}
.nav-item.on, .nav-item:hover { background:var(--nav-hover); }
.sidenav-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-top:12px;
}
.theme-btn {
  border:1px solid var(--nav-line); background:transparent;
  color:inherit; border-radius:999px; width:32px; height:32px; cursor:pointer;
}
.logo-woptimo { height:28px; width:auto; }
.main { flex:1; min-width:0; overflow:auto; scrollbar-gutter:stable; padding:18px 22px 48px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:8px; position:relative; z-index:90; }
.eyebrow { font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:700; }
.title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
h1 { font-family:var(--font-title); font-size:1.38rem; font-weight:650; letter-spacing:-.02em; }
.source-pill {
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.subtitle { font-size:.85rem; color:var(--ink-2); margin-top:4px; }
.note {
  font-size:.78rem; color:var(--ink-2); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px;
  margin:12px 0 16px; line-height:1.45;
}
.note summary { cursor:pointer; font-weight:650; color:var(--ink); }
.note-body { margin-top:8px; }
.toolbar, .card, .kpi, .tile {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.toolbar {
  position:sticky; top:0; z-index:80; padding:14px 16px; margin:0 0 16px;
  overflow:visible;
}
.toolbar.stuck {
  padding:10px 16px; border-top-color:transparent;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 10px 28px -18px rgba(20,24,28,.55);
}
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { padding:12px 14px; border-left:4px solid var(--accent); }
.kpi-label { font-size:.72rem; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.kpi-value { font-size:1.42rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
.kpi-sub { font-size:.78rem; color:var(--ink-2); margin-top:4px; }
.delta-up { color:var(--accent); } .delta-down { color:var(--warn); } .delta-flat { color:var(--ink-3); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.card { padding:16px 18px; }
.card h2 { font-family:var(--font-title); font-size:1.02rem; font-weight:650; margin-bottom:8px; }
.card .meta { font-size:.82rem; color:var(--ink-2); }
a.card { text-decoration:none; color:inherit; display:block; }
a.card:hover { border-color:var(--accent); }
.id { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.chart { width:100%; overflow:auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.data-table th, .data-table td {
  padding:6px 8px; border-bottom:1px solid var(--line-soft); text-align:left; white-space:nowrap;
}
.data-table th {
  font-size:.64rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); font-weight:700;
  position:sticky; top:0; background:var(--panel); z-index:3;
}
.data-table th.sort { cursor:pointer; user-select:none; }
.data-table th.sort:hover { color:var(--accent); }
.data-table th.sort .arrow { font-size:.62rem; margin-left:4px; color:var(--accent); }
.data-table td.num, .data-table th.num { text-align:center; font-variant-numeric:tabular-nums; }
.data-table td.kw, .data-table th.kw {
  position:sticky; left:0; background:var(--panel); z-index:2;
  max-width:240px; overflow:hidden; text-overflow:ellipsis;
  border-right:1px solid var(--line);
}
.data-table thead th.kw { z-index:4; }
.data-table tfoot td {
  font-weight:700; background:var(--panel-2);
  border-top:1px solid var(--line); position:sticky; bottom:0; z-index:3;
}
.data-table tfoot td.kw { z-index:4; background:var(--panel-2); }
.data-table tbody tr:hover td { background:var(--panel-2); }
.data-table tbody tr:hover td.kw { background:var(--panel-2); }
.table-scroll { overflow:auto; max-height:640px; }
.pager {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-top:12px;
}
.pager-meta { font-size:.78rem; color:var(--ink-2); }
.pager-btns { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pager button {
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2);
  border-radius:999px; cursor:pointer; padding:4px 10px;
  font-size:.74rem; font-weight:650; font-family:inherit;
}
.pager button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.pager button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.pager button:disabled { opacity:.4; cursor:default; }
.legend-row {
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  font-size:.74rem; color:var(--ink-2); margin:0 0 10px;
}
.legend-row span { display:inline-flex; align-items:center; gap:6px; }
.seo-search {
  height:34px; padding:0 12px; border:1px solid var(--line);
  border-radius:999px; background:var(--panel-2); color:var(--ink);
  font-size:.82rem; font-family:inherit; width:100%; min-width:220px;
}
.funnel { width:100%; height:auto; }
.funnel .fl, .funnel .fr, .funnel .fx, .funnel .fco { font-size:12px; fill:var(--ink-2); }
.funnel .ft { font-size:10px; fill:var(--ink-3); }
.funnel .fc { font-size:13px; font-weight:700; fill:#fff; }
.funnel .band.b1 { fill:var(--b1); } .funnel .band.b2 { fill:var(--b2); }
.funnel .band.b3 { fill:var(--b3); } .funnel .band.b4 { fill:var(--b4); }
.funnel .band.b5 { fill:var(--b5); } .funnel .band.b6 { fill:var(--b6); }
.tag-pos-1, .tag-pos-23, .tag-pos-410, .tag-pos-11, .tag-neg, .tag-nc {
  display:inline-block; min-width:2.1em; padding:2px 7px; border-radius:6px;
  font-variant-numeric:tabular-nums; font-weight:650; text-align:center;
}
.tag-pos-1 { background:var(--accent-soft); color:var(--m1); }
.tag-pos-23 { background:color-mix(in srgb, var(--m2) 18%, var(--panel)); color:var(--m2); }
.tag-pos-410 { background:color-mix(in srgb, var(--m3) 20%, var(--panel)); color:var(--m3); }
.tag-pos-11 { background:var(--warn-soft); color:var(--warn); }
.tag-neg { background:var(--line-soft); color:var(--ink-3); }
.tag-nc {
  min-width:2.4em; background:transparent; color:var(--ink-3);
  border:1px dashed var(--line); font-weight:650;
}
.tag-avg { min-width:3.4em; }
.filter-group label { display:block; font-size:.7rem; color:var(--ink-3); text-transform:uppercase; font-weight:600; margin-bottom:3px; }
.dropdown { position:relative; min-width:160px; }
.dropdown-btn {
  display:flex; justify-content:space-between; padding:7px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--panel-2);
  cursor:pointer; font-size:.82rem;
}
.dropdown-list {
  display:none; position:absolute; z-index:220; left:0; top:calc(100% + 6px);
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  min-width:max(100%, 240px); max-height:320px; overflow:auto; margin-top:4px;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.5);
}
.dropdown-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px 8px; border-bottom:1px solid var(--line-soft);
}
.dropdown-title { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.dropdown-close { font-size:1.2rem; color:var(--ink-3); cursor:pointer; line-height:1; padding:0 4px; border:none; background:none; }
.dropdown-toggle-bar { display:flex; gap:8px; padding:6px 12px; font-size:.72rem; }
.toggle-all { color:var(--accent); font-weight:600; cursor:pointer; }
.toggle-none { color:var(--warn); font-weight:600; cursor:pointer; }
.fgroup { display:flex; flex-direction:column; gap:5px; min-width:180px; }
.fgroup > label { font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700; }
.dropdown-list.show { display:block; }
.dropdown-item, .dropdown-toggle-bar { padding:6px 12px; font-size:.78rem; cursor:pointer; display:flex; gap:8px; align-items:center; }
.dropdown-item:hover { background:var(--panel-2); }
.dropdown-item .opt-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-item .only {
  margin-left:auto; flex:none; opacity:0; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  border-radius:999px; padding:1px 8px; font-size:.67rem; font-weight:700;
}
.dropdown-item:hover .only, .dropdown-item .only:focus { opacity:1; }
.dropdown-item .count { margin-left:8px; flex:none; color:var(--ink-3); font-size:.72rem; }
.filters-row { display:flex; flex-wrap:wrap; gap:12px 16px; }
.filters-row.grid-filters {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px 16px;
}
.filters-row.grid-filters .filter-group,
.filters-row.grid-filters .dropdown,
.filters-row.grid-filters .dropdown-btn { width:100%; min-width:0; }
.period-frame {
  flex:none; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px 12px; overflow:visible; min-width:260px;
}
.period-frame .eyebrow { margin-bottom:6px; }
@media print { .period-frame { display:none !important; } }
.seg { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.seg button {
  flex:1 1 calc(50% - 8px); min-width:0; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); border-radius:999px;
  padding:7px 12px; cursor:pointer; font-size:.82rem; font-weight:650;
  font-family:inherit; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.seg button.on {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.main > .card { margin-bottom:16px; }
.trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:1100px) { .trio { grid-template-columns:1fr; } }
@media (max-width:860px) {
  body { overflow:auto; }
  .app { flex-direction:column; height:auto; }
  .sidenav { width:100%; }
  .main { overflow:visible; }
  .toolbar { position:static; }
}
@media print {
  body { overflow:visible; background:#fff; }
  .sidenav, .toolbar, .theme-btn, .pager { display:none !important; }
  .toolbar { position:static; }
  .app { display:block; height:auto; }
  .main { overflow:visible; padding:0; }
  .card, .kpi { break-inside:avoid; }
  .chart-page-break { break-before:page; page-break-before:always; }
}

/* --- woptidash : sélecteur de mois, états de chargement --- */
.month-picker { display:flex; flex-direction:column; gap:6px; }
.month-picker select {
  height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel-2); color:var(--ink); font:inherit; font-size:.85rem; cursor:pointer;
}
.wd-status { font-size:.82rem; color:var(--ink-2); padding:18px 0; }
.wd-error {
  font-size:.82rem; color:var(--warn); background:var(--warn-soft);
  border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius:var(--radius); padding:12px 16px; margin:12px 0;
}
.wd-foot { font-size:.72rem; color:var(--ink-3); margin-top:24px; }