/* ==========================================================================
   CUMULO — feuille de style principale
   Palette et specs de marques conformes au design system data-viz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces & encres */
  --page:            #f9f9f7;
  --surface-1:       #fcfcfb;
  --surface-2:       #f2f1ed;
  --surface-sunken:  #efeeea;
  --raised:          #fcfcfb;   /* état actif d'un contrôle segmenté */
  --text-primary:    #0b0b0b;
  --text-secondary:  #52514e;
  --text-muted:      #898781;
  --grid:            #e1e0d9;
  --axis:            #c3c2b7;
  --border:          rgba(11, 11, 11, 0.10);
  --border-strong:   rgba(11, 11, 11, 0.18);
  --shadow:          0 1px 2px rgba(11, 11, 11, .04), 0 8px 24px -12px rgba(11, 11, 11, .10);
  --shadow-pop:      0 2px 6px rgba(11, 11, 11, .08), 0 16px 40px -16px rgba(11, 11, 11, .22);

  /* Palette catégorielle — ordre fixe, jamais recyclé */
  --s1: #2a78d6;  /* bleu     */
  --s2: #eb6834;  /* orange   */
  --s3: #1baf7a;  /* aqua     */
  --s4: #eda100;  /* jaune    */
  --s5: #e87ba4;  /* magenta  */
  --s6: #008300;  /* vert     */
  --s7: #4a3aa7;  /* violet   */
  --s8: #e34948;  /* rouge    */

  /* Rampe séquentielle bleue */
  --seq-100: #cde2fb;  --seq-250: #86b6ef;  --seq-400: #3987e5;  --seq-550: #1c5cab;
  --seq-150: #b7d3f6;  --seq-300: #6da7ec;  --seq-450: #2a78d6;  --seq-600: #184f95;
  --seq-200: #9ec5f4;  --seq-350: #5598e7;  --seq-500: #256abf;  --seq-650: #104281;

  /* Divergente (bleu ↔ rouge) + point neutre gris */
  --div-neutral: #f0efec;

  /* Statuts — réservés, jamais utilisés comme couleur de série */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --delta-up: #006300;

  --accent: var(--s1);
  --accent-wash: rgba(42, 120, 214, .10);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --maxw: 1320px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:            #0d0d0d;
    --surface-1:       #1a1a19;
    --surface-2:       #232322;
    --surface-sunken:  #141413;
    --raised:          #333331;
    --text-primary:    #ffffff;
    --text-secondary:  #c3c2b7;
    --text-muted:      #898781;
    --grid:            #2c2c2a;
    --axis:            #383835;
    --border:          rgba(255, 255, 255, 0.10);
    --border-strong:   rgba(255, 255, 255, 0.18);
    --shadow:          0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-pop:      0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px -16px rgba(0, 0, 0, .8);

    --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
    --s5: #d55181;  --s6: #008300;  --s7: #9085e9;  --s8: #e66767;

    --div-neutral: #383835;
    --delta-up: #0ca30c;
    --accent: var(--s1);
    --accent-wash: rgba(57, 135, 229, .14);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:            #0d0d0d;
  --surface-1:       #1a1a19;
  --surface-2:       #232322;
  --surface-sunken:  #141413;
  --raised:          #333331;
  --text-primary:    #ffffff;
  --text-secondary:  #c3c2b7;
  --text-muted:      #898781;
  --grid:            #2c2c2a;
  --axis:            #383835;
  --border:          rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.18);
  --shadow:          0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-pop:      0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px -16px rgba(0, 0, 0, .8);

  --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
  --s5: #d55181;  --s6: #008300;  --s7: #9085e9;  --s8: #e66767;

  --div-neutral: #383835;
  --delta-up: #0ca30c;
  --accent: var(--s1);
  --accent-wash: rgba(57, 135, 229, .14);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.03em; }
h2 { font-size: clamp(20px, 2.4vw, 26px); }
h3 { font-size: 17px; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--surface-1); color: var(--text-primary);
  padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
}
.skip-link:focus { left: 16px; }

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.small { font-size: 13px; }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Barre de navigation
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  display: flex; align-items: center; gap: 24px;
  height: 62px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; letter-spacing: -0.02em; font-size: 16px;
  color: var(--text-primary); text-decoration: none;
}
.brand__mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(140deg, var(--s1), var(--s7));
  display: grid; place-items: center; flex: none;
}
.brand__mark svg { width: 15px; height: 15px; }
.brand small { font-weight: 400; color: var(--text-muted); letter-spacing: 0; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none;
}
.nav a:hover { background: var(--surface-2); color: var(--text-primary); }
.nav a[aria-current="page"] { background: var(--surface-2); color: var(--text-primary); }

/* ---------------------------------------------- sélecteur de langue à drapeaux */

.flag-wrap { display: inline-flex; flex: none; line-height: 0; }
.flag-wrap .flag { display: block; border-radius: 3px; }

.langpick { order: 99; position: relative; }
.langpick__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 550;
  padding: 6px 9px; cursor: pointer;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 9px;
}
.langpick__btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.langpick__code { letter-spacing: .02em; }
.langpick__chev { width: 11px; height: 11px; opacity: .7; }
.langpick__btn[aria-expanded="true"] .langpick__chev { transform: rotate(180deg); }

.langpick__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 5px; list-style: none; min-width: 172px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: 11px;
  box-shadow: var(--shadow-pop);
}
.langpick__item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer;
  font-size: 13.5px; color: var(--text-secondary);
}
.langpick__item:hover, .langpick__item:focus-visible {
  background: var(--surface-2); color: var(--text-primary); outline: none;
}
.langpick__item[aria-selected="true"] { color: var(--text-primary); font-weight: 550; }
.langpick__item[aria-selected="true"]::after {
  content: ""; margin-left: auto; width: 6px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-1px, -1px);
}

.icon-btn {
  order: 100;
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-1); color: var(--text-secondary);
  cursor: pointer;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.icon-btn svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .icon-btn .i-sun,
.icon-btn .i-moon { display: block; }
:root[data-theme="dark"] .icon-btn .i-moon,
.icon-btn .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .icon-btn .i-moon { display: none; }
}
:root[data-theme="light"] .icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-moon { display: block; }

@media (max-width: 860px) {
  .topbar__inner { height: auto; padding-block: 10px; flex-wrap: wrap; gap: 10px; }
  .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; }
  .nav a { white-space: nowrap; }
  .icon-btn { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   4. En-tête de page
   -------------------------------------------------------------------------- */

.pagehead { padding: 44px 0 28px; }
.pagehead .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 14px;
}
.pagehead .eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent);
}
.pagehead .lede {
  max-width: 62ch; margin-top: 12px; font-size: 16.5px; color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   5. Cartes & grilles
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card__head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px 0;
}
.card__head h3 { font-size: 16px; }
.card__head .sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.card__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card__body { padding: 14px 20px 18px; }
.card__foot {
  padding: 12px 20px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } }

.section { padding-block: 34px; }
.section__head { margin-bottom: 18px; }
.section__head h2 { margin-bottom: 6px; }
.section__head p { color: var(--text-secondary); max-width: 70ch; margin: 0; }

/* --------------------------------------------------------------------------
   6. Tuiles de statistiques & chiffre héros
   -------------------------------------------------------------------------- */

.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stat {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat__label {
  font-size: 12.5px; color: var(--text-muted); font-weight: 500;
  display: flex; align-items: center; gap: 7px;
}
.stat__value {
  margin-top: 5px; font-size: 25px; font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.15;
}
.stat__meta { margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); }
.stat__key { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.hero-figure {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-wash), transparent 62%),
    var(--surface-1);
  padding: 22px 24px;
}
.hero-figure .label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.hero-figure .value {
  font-size: clamp(40px, 6vw, 58px); font-weight: 650; letter-spacing: -0.035em;
  line-height: 1.05; margin-top: 6px;
}
.hero-figure .note { margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); }

.delta { font-weight: 600; }
.delta--up { color: var(--delta-up); }
.delta--down { color: var(--critical); }

/* --------------------------------------------------------------------------
   7. Formulaires
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 18px 20px 20px;
}
.panel__title {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 14px;
}
.panel + .panel { margin-top: 16px; }

.field { margin-bottom: 16px; }
.field__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px;
}
.field__label .hint {
  margin-left: auto; font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.input-group { display: flex; align-items: stretch; }
.input-group__prefix, .input-group__suffix {
  display: grid; place-items: center; padding-inline: 11px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-muted); font-size: 13.5px; font-weight: 500;
}
.input-group__prefix { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group__suffix { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

input[type="number"], input[type="text"], select {
  width: 100%; min-width: 0;
  font-family: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 8px 11px;
  appearance: none;
}
.input-group input { border-radius: 0; }
.input-group__prefix + input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group input:has(+ .input-group__suffix) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23898781' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px; cursor: pointer;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--surface-sunken) var(--fill, 0%));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--surface-sunken); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--surface-1); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface-1); border: 2px solid var(--accent);
}
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-wash); }

/* Contrôle segmenté */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px;
}
.seg button {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 5px 11px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { color: var(--text-primary); }
.seg button[aria-pressed="true"] {
  background: var(--raised); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
}

.btn {
  font: inherit; font-size: 14px; font-weight: 550;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn svg { width: 15px; height: 15px; }

/* Barre de filtres — une seule rangée, au-dessus de ce qu'elle cadre */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 16px; margin-bottom: 20px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
}
.filterbar__group { display: flex; align-items: center; gap: 8px; }
.filterbar__label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
/* Un groupe à nombreuses puces prend sa propre ligne, étiquette au-dessus :
   sinon l'étiquette flotte au milieu d'un pavé de quatre rangées. */
.filterbar__group--block {
  flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: 7px;
}
.filterbar__group--block .chips { max-height: 118px; overflow-y: auto; }

/* Puces de sélection de série */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-secondary);
}
.chip__key { width: 9px; height: 9px; border-radius: 3px; background: var(--axis); flex: none; }
.chip[aria-pressed="true"] { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-2); }
.chip[aria-pressed="false"] .chip__key { background: var(--axis) !important; }
.chip:hover { border-color: var(--text-muted); }

/* --------------------------------------------------------------------------
   8. Graphiques
   -------------------------------------------------------------------------- */

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart__axis line, .chart__axis path { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart__tick {
  font-size: 11.5px; fill: var(--text-muted); font-variant-numeric: tabular-nums;
  font-family: var(--font);
}
.chart__label { font-size: 12px; fill: var(--text-secondary); font-family: var(--font); font-weight: 550; }
.chart__label--strong { fill: var(--text-primary); }
.chart__crosshair { stroke: var(--text-muted); stroke-width: 1; pointer-events: none; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { stroke: var(--surface-1); stroke-width: 2; }
/* la marque survolée se soulève ; les autres ne sont pas éteintes */
.chart__bar { transition: filter .12s ease; }
.chart__bar.is-active { filter: brightness(1.16) saturate(1.05); }
.chart__hit { fill: transparent; cursor: crosshair; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: 12.5px; color: var(--text-secondary);
}
.chart-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend__key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.chart-legend__key--rect { width: 10px; height: 10px; border-radius: 3px; }

/* Les fonds au plus haut : une phrase et des pastilles valent mieux qu'une
   colonne de barres nulles toutes étiquetées « 0,0 % ». */
.athigh {
  margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.athigh__head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 9px;
}
.athigh__count { font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.athigh__list { display: flex; flex-wrap: wrap; gap: 6px; }
.athigh__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12.5px; color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--border);
}
.athigh__dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }

.scale-legend {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12.5px; color: var(--text-muted);
}
.scale-legend__label { font-weight: 500; }
.scale-legend__ramp { display: inline-flex; gap: 2px; }
.scale-legend__ramp span { width: 22px; height: 10px; border-radius: 2px; }
.scale-legend__ends { font-variant-numeric: tabular-nums; }

.viz-tooltip {
  position: absolute; z-index: 30; pointer-events: none;
  min-width: 158px; max-width: 280px;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
  padding: 9px 11px; font-size: 12.5px;
  opacity: 0; transform: translateY(2px); transition: opacity .1s ease;
}
.viz-tooltip[data-open="true"] { opacity: 1; transform: none; }
.viz-tooltip__title {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.viz-tooltip__row {
  display: flex; align-items: baseline; gap: 8px; padding: 2px 0;
}
.viz-tooltip__key { width: 12px; height: 2px; border-radius: 2px; flex: none; transform: translateY(-3px); }
.viz-tooltip__name { color: var(--text-secondary); }
.viz-tooltip__val {
  margin-left: auto; font-weight: 650; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Tableaux
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  padding: 8px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.data th {
  font-weight: 600; font-size: 12px; color: var(--text-muted);
  letter-spacing: .03em; text-transform: uppercase;
  position: sticky; top: 0; background: var(--surface-1); z-index: 1;
}
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.neg { color: var(--critical); }
table.data td.pos { color: var(--delta-up); }
table.data .rowkey { display: inline-flex; align-items: center; gap: 8px; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text-primary); }
table.data th[aria-sort="ascending"]::after  { content: " ↑"; color: var(--accent); }
table.data th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); }
table.data tfoot td { font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: 0; }

.table-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   10. Divers
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-secondary);
  background: var(--surface-2);
}
.badge--tr { color: var(--text-secondary); }
.badge--pr { color: var(--text-secondary); }

.callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13.5px; color: var(--text-secondary);
}
.callout svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--text-muted); }
.callout strong { color: var(--text-primary); font-weight: 600; }
.callout--warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.callout--warn svg { color: var(--warning); }

.event {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 16px 18px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-1);
}
.event__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.event__title { font-weight: 600; font-size: 15px; }
.event__period { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.event__body { font-size: 13.5px; color: var(--text-secondary); margin: 0; }
.event__stats { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.event__stat { font-size: 12.5px; color: var(--text-muted); }
.event__stat b {
  display: block; font-size: 16px; font-weight: 650; color: var(--text-primary);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.event__stat b.neg { color: var(--critical); }
.event__stat b.pos { color: var(--delta-up); }
.event--down { border-left: 3px solid var(--critical); }
.event--up   { border-left: 3px solid var(--good); }

.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

.footer {
  margin-top: 48px; padding: 28px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}
.footer__inner { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.footer p { max-width: 68ch; margin: 0; }
.footer a { color: var(--text-secondary); }

.disclaimer {
  margin-top: 20px; padding: 14px 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  font-size: 12.5px; color: var(--text-muted); line-height: 1.6;
}

/* Panneaux dépliables */
details.disclosure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
details.disclosure > summary {
  cursor: pointer; padding: 12px 16px; font-size: 13.5px; font-weight: 550;
  color: var(--text-secondary); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; margin-left: 2px;
}
details.disclosure[open] > summary::before { transform: rotate(45deg); }
details.disclosure > summary:hover { color: var(--text-primary); }
details.disclosure .disclosure__body { padding: 0 16px 16px; }

/* --------------------------------------------------------------------------
   11. Calculateur — les réglages en haut, les résultats en dessous
   -------------------------------------------------------------------------- */

.params {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow);
}

.params__top {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end;
}
.params__pick { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.params__pick--grow { flex: 1 1 240px; }
.params__reset { margin-left: auto; align-self: flex-end; }

.tinylabel {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

.params__grid {
  display: grid; gap: 16px 22px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
/* Intertitre pleine largeur : sépare les groupes sans ajouter de cadres. */
.params__sep {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.params__sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.params__grid > .params__sep:first-child { margin-top: 0; }

.param { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.param__label { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.param__row { display: flex; align-items: center; gap: 12px; }
.param__row input[type="range"] { flex: 1 1 0; min-width: 60px; }
.param__hint { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* Champ numérique : on doit pouvoir TAPER la valeur, pas seulement viser au curseur. */
.numbox {
  display: flex; align-items: stretch; flex: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.numbox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.numbox input {
  border: 0; background: transparent; border-radius: 0;
  padding: 8px 4px 8px 11px; width: 100%;
  font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500;
}
.numbox input:focus { outline: none; box-shadow: none; border-color: transparent; }
.numbox__unit {
  display: grid; place-items: center; padding-right: 11px; padding-left: 2px;
  color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.numbox--sm { width: 108px; }
.numbox--sm input { padding-left: 10px; font-size: 14.5px; }

.results { margin-top: 22px; }

/* État d'attente : tant que le visiteur n'a rien saisi, la page le dit au lieu
   d'afficher une projection qui se lirait comme une promesse. */
.emptystate {
  padding: 22px 24px; border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong); background: var(--surface-1);
  color: var(--text-secondary); font-size: 14.5px; line-height: 1.6;
}
.emptystate strong { display: block; color: var(--text-primary); margin-bottom: 4px; }
.results.is-empty > *:not(.emptystate) { display: none; }
.results:not(.is-empty) > .emptystate { display: none; }

@media (max-width: 620px) {
  .params { padding: 16px; }
  .params__reset { margin-left: 0; width: 100%; justify-content: center; }
  .params__pick { min-width: 100%; }
}

/* ------------------------------------------------- listes déroulantes maison */

.dd { position: relative; }
.dd__btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; font-size: 14px; font-weight: 500; text-align: left;
  padding: 8px 11px; cursor: pointer;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.dd__btn:hover { border-color: var(--text-muted); }
.dd__btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.dd__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__chev { width: 12px; height: 12px; flex: none; opacity: .65; }
.dd__btn[aria-expanded="true"] .dd__chev { transform: rotate(180deg); }
.dd__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* Le panneau se dimensionne sur SON contenu, pas sur le bouton : dans un
   en-tête de carte le déclencheur est étroit, et une liste calée sur sa largeur
   tronquerait tous les libellés en « M… », « S&… ». */
.dd__panel {
  position: absolute; left: 0; top: calc(100% + 5px); z-index: 60;
  min-width: 100%; width: max-content; max-width: min(360px, 86vw);
  background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: 11px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
/* Aligné à droite quand le déclencheur est en bout de ligne. */
.dd--end .dd__panel { left: auto; right: 0; }

.dd__search { padding: 7px 7px 3px; }
.dd__searchInput {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 7px 10px 7px 30px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-primary);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 9px center;
}
.dd__searchInput:focus { outline: none; border-color: var(--accent); }

.dd__menu {
  margin: 0; padding: 5px; list-style: none;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
}
.dd__menu:focus { outline: none; }

.dd__group {
  padding: 9px 10px 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.dd__menu > .dd__group:first-child { padding-top: 4px; }

.dd__empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted); }

.dd__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 13.5px; color: var(--text-secondary); white-space: nowrap;
}
.dd__item .dd__label { overflow: visible; text-overflow: clip; }
/* Une seule mise en évidence, pilotée au clavier comme à la souris : deux
   surbrillances concurrentes (hover + clavier) rendent la liste illisible. */
.dd__item.is-active {
  background: var(--surface-2); color: var(--text-primary); outline: none;
}
.dd__item[aria-selected="true"] { color: var(--text-primary); font-weight: 550; }
.dd__item[aria-selected="true"]::after {
  content: ""; flex: none; width: 6px; height: 10px; margin-left: 2px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-1px, -1px);
}
.dd__hint {
  margin-left: auto; padding-left: 16px;
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.calc-layout { display: grid; grid-template-columns: 344px minmax(0, 1fr); gap: 22px; align-items: start; }

/* Le panneau défile SEUL : tous les réglages restent atteignables sans
   faire défiler la page entière, et les résultats restent en vis-à-vis. */
.calc-layout__aside {
  position: sticky; top: 76px;
  max-height: calc(100vh - 92px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; margin-right: -6px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.calc-layout__aside::-webkit-scrollbar { width: 8px; }
.calc-layout__aside::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px;
  border: 2px solid var(--page);
}
.calc-layout__aside::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1080px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-layout__aside { position: static; max-height: none; overflow: visible; padding-right: 0; margin-right: 0; }
}

/* Le panneau d'amorçage se distingue : c'est par lui qu'on commence. */
.panel--lead {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background:
    radial-gradient(120% 150% at 100% 0%, var(--accent-wash), transparent 58%),
    var(--surface-1);
}

.select-flag { display: flex; align-items: stretch; }
.select-flag__icon {
  display: grid; place-items: center; padding-inline: 10px;
  border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2);
}
.select-flag select { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.notebox {
  margin-top: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.notebox strong { color: var(--text-primary); }
.notebox--warn { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.notebox__flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--text-primary); margin-bottom: 4px;
}

.seg--full { display: flex; width: 100%; }
.seg--full button { flex: 1 1 0; text-align: center; }

.checkline {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.checkline input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* Tableau compact : évite le défilement horizontal sur les écrans courants. */
table.data--compact { font-size: 12.5px; }
table.data--compact th, table.data--compact td { padding: 6px 10px; }
table.data--compact th:first-child, table.data--compact td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-1);
  box-shadow: 1px 0 0 var(--border);
}
table.data--compact tbody tr:hover td:first-child { background: var(--surface-2); }
table.data--compact th:first-child { z-index: 3; }
.cols-annual-hidden .col-annual { display: none; }

/* Rappel du résultat, sur écran étroit uniquement. */
.resultbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: baseline; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border-strong);
}
.resultbar__label { font-size: 12.5px; color: var(--text-muted); }
.resultbar__value { margin-left: auto; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
@media (max-width: 1080px) {
  .resultbar { display: flex; }
  main { padding-bottom: 58px; }
}

@media print {
  .topbar, .filterbar, .card__actions, .btn, .footer { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
}