/* Exploration des graphiques : survol, mise en évidence, estompage
   ================================================================
   Accompagne static/js/chart-explore.js. Tout est en variables CSS pour suivre la palette et le mode
   sombre, et tout est neutralisé à l'impression : un rapport imprimé ou exporté en PDF doit ressembler
   à ce qu'il était avant que ce fichier n'existe. */

/* Un point interactif : le curseur le dit, et il reste visible au clavier. */
.ce-pt {
  cursor: pointer;
  transition: opacity .18s ease, r .18s ease, stroke-width .18s ease;
}
.ce-pt:focus-visible {
  outline: 2px solid var(--brand, #1795d0);
  outline-offset: 2px;
}

/* Survolé ou choisi : on grossit légèrement plutôt que de changer la couleur — la couleur porte déjà
   le niveau, et la détourner ferait lire un autre résultat. */
.ce-pt.ce-on { r: 7; stroke-width: 3; }
.ce-pt.ce-off { opacity: .32; }

/* Écarté par un filtre : estompé, jamais retiré. Retirer un axe d'un radar redistribuerait les autres
   et la forme dirait autre chose que les données. */
.ce-pt.ce-dim { opacity: .18; }

/* Les lignes de tableau liées au graphique. */
tr.ce-row { transition: background-color .15s ease; }
tr.ce-row.ce-on { background: color-mix(in srgb, var(--brand, #1795d0) 12%, transparent); }
tr.ce-hide { display: none; }

/* Les figures servies par le serveur dans l'application.
   Le SVG dessine ses anneaux en gris très clair : il lui faut un fond clair pour rester lisible, y
   compris en mode sombre. Le texte, lui, suit `color` — d'où `currentColor` côté serveur. */
.cap-figs { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.cap-figs figure {
  margin: 0; padding: .75rem 1rem; border-radius: 10px;
  background: #fff; color: #17202b;
  border: 1px solid var(--line, #dfe6ee);
}
.cap-figs svg { max-width: 100%; height: auto; display: block; }

/* La barre de recherche d'un graphique, dans un rapport servi. */
.ce-bar {
  display: flex; align-items: center; gap: .5rem;
  margin: .5rem 0 .25rem; font-size: 11.5px;
}
.ce-bar input {
  flex: 1 1 14rem; max-width: 22rem;
  padding: .35rem .6rem; font: inherit;
  border: 1px solid var(--line, #dfe6ee); border-radius: 6px;
  background: var(--bg, #fff); color: var(--ink, #17202b);
}
.ce-bar .ce-count { color: var(--muted, #6b7a8c); white-space: nowrap; }

/* À l'impression et dans les exports : rien de tout cela. Le graphique redevient ce qu'il était. */
@media print {
  .ce-bar { display: none !important; }
  .ce-pt, .ce-pt.ce-on, .ce-pt.ce-off, .ce-pt.ce-dim { opacity: 1 !important; r: inherit; stroke-width: inherit; cursor: auto; }
  tr.ce-hide { display: table-row !important; }
  tr.ce-row.ce-on { background: transparent !important; }
}

/* Mouvement réduit : la mise en évidence reste, l'animation part. */
@media (prefers-reduced-motion: reduce) {
  .ce-pt, tr.ce-row { transition: none; }
}