/* Styles de graphiques-tech.js. Les couleurs sont des variables de rôle : les
   valeurs claires et sombres sont celles validées avec le validateur de palette
   (bleu #2a78d6 / #3987e5 pour le marché, orange #eb6834 / #d95926 pour la
   sélection : écart CVD ≥ 24, contraste ≥ 3:1 sur la surface, en clair et en sombre).
   Le mode sombre est une sélection propre, pas une inversion automatique. */
.viz-racine {
  color-scheme: light;
  --viz-surface: #fcfcfb;
  --viz-texte: #0b0b0b;
  --viz-texte2: #52514e;
  --viz-grille: #e4e3df;
  --viz-point: #2a78d6;
  --viz-selection: #eb6834;
  --viz-attenue: #c6c5bf;
  --viz-zone: rgba(42, 120, 214, 0.08);
  --viz-bulle-fond: #0b0b0b;
  --viz-bulle-texte: #ffffff;
  /* Séries de barres (2 à 4 produits) : bleu, orange, aqua, jaune, dans cet ordre — validées adjacentes ; aqua et jaune sous 3:1 en clair : étiquettes visibles et tableau requis. */
  --viz-serie-1: #2a78d6;
  --viz-serie-2: #eb6834;
  --viz-serie-3: #1baf7a;
  --viz-serie-4: #eda100;
  position: relative;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-racine {
    color-scheme: dark;
    --viz-surface: #1a1a19;
    --viz-texte: #ffffff;
    --viz-texte2: #c3c2b7;
    --viz-grille: #383835;
    --viz-point: #3987e5;
    --viz-selection: #d95926;
    --viz-attenue: #55554f;
    --viz-zone: rgba(57, 135, 229, 0.12);
    --viz-bulle-fond: #ffffff;
    --viz-bulle-texte: #0b0b0b;
    --viz-serie-1: #3987e5;
    --viz-serie-2: #d95926;
    --viz-serie-3: #199e70;
    --viz-serie-4: #c98500;
  }
}
:root[data-theme="dark"] .viz-racine {
  color-scheme: dark;
  --viz-surface: #1a1a19;
  --viz-texte: #ffffff;
  --viz-texte2: #c3c2b7;
  --viz-grille: #383835;
  --viz-point: #3987e5;
  --viz-selection: #d95926;
  --viz-attenue: #55554f;
  --viz-zone: rgba(57, 135, 229, 0.12);
  --viz-bulle-fond: #ffffff;
  --viz-bulle-texte: #0b0b0b;
  --viz-serie-1: #3987e5;
  --viz-serie-2: #d95926;
  --viz-serie-3: #199e70;
  --viz-serie-4: #c98500;
}

.viz-racine .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.viz-boite { position: relative; }
.viz-svg { display: block; width: 100%; height: auto; background: var(--viz-surface); border-radius: 12px; }
.viz-svg:focus-visible { outline: 2px solid var(--viz-point); outline-offset: 2px; }

.viz-grille { stroke: var(--viz-grille); stroke-width: 1; shape-rendering: crispEdges; }
.viz-graduation { fill: var(--viz-texte2); font-size: 12px; }
.viz-axe { fill: var(--viz-texte2); font-size: 12px; font-weight: 600; }
.viz-zone { fill: var(--viz-zone); }
.viz-zone-titre { fill: var(--viz-texte2); font-size: 12px; font-weight: 700; }

/* Marques : fines, anneau de la couleur de surface pour rester lisibles quand elles se chevauchent. */
.viz-point { fill: var(--viz-point); stroke: var(--viz-surface); stroke-width: 2; }
.viz-point--selection { fill: var(--viz-selection); }
.viz-point--attenue { fill: var(--viz-attenue); }
.viz-point--actif { stroke: var(--viz-texte); }
.viz-capture { fill: transparent; pointer-events: all; }
.viz-etiquette { fill: var(--viz-texte); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--viz-surface); stroke-width: 3px; stroke-linejoin: round; }

.viz-tooltip { position: absolute; z-index: 2; transform: translate(-50%, -100%); max-width: 240px; padding: .4rem .65rem; border-radius: 8px; background: var(--viz-bulle-fond); color: var(--viz-bulle-texte); pointer-events: none; font-size: .85rem; line-height: 1.3; }
.viz-tooltip[hidden] { display: none; }
.viz-tooltip-valeur { font-weight: 800; }
.viz-tooltip-nom { opacity: .85; overflow-wrap: anywhere; }

.viz-legende { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .5rem; padding: 0; list-style: none; font-size: .85rem; color: var(--viz-texte2); }
.viz-legende li { display: inline-flex; align-items: center; gap: .4rem; }
.viz-cle { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.viz-cle--marche, .viz-cle--marque { background: var(--viz-point); }
.viz-cle--selection { background: var(--viz-selection); }

.viz-note, .viz-vide { margin: .5rem 0 0; font-size: .85rem; color: var(--viz-texte2); }
.viz-tableau { margin-top: .75rem; font-size: .9rem; }
.viz-tableau summary { cursor: pointer; color: var(--viz-texte2); font-weight: 600; }
.viz-tableau-defilement { max-height: 320px; overflow: auto; margin-top: .5rem; }
.viz-tableau table { width: 100%; border-collapse: collapse; }
.viz-tableau th, .viz-tableau td { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid var(--viz-grille); font-variant-numeric: tabular-nums; }
.viz-tableau thead th { position: sticky; top: 0; background: var(--viz-surface); }

/* Barres */
.viz-barre.viz-serie-1 { fill: var(--viz-serie-1); }
.viz-barre.viz-serie-2 { fill: var(--viz-serie-2); }
.viz-barre.viz-serie-3 { fill: var(--viz-serie-3); }
.viz-barre.viz-serie-4 { fill: var(--viz-serie-4); }
.viz-cle--serie-1 { background: var(--viz-serie-1); }
.viz-cle--serie-2 { background: var(--viz-serie-2); }
.viz-cle--serie-3 { background: var(--viz-serie-3); }
.viz-cle--serie-4 { background: var(--viz-serie-4); }
.viz-libelle-ligne { fill: var(--viz-texte); font-size: 13px; font-weight: 700; }
.viz-valeur { fill: var(--viz-texte); font-size: 12px; font-weight: 700; }
.viz-non-mesure { fill: var(--viz-texte2); font-size: 12px; font-style: italic; }