/* ==========================================================================
   GRAPHIQUES (charte v1.2 §5) — habillage des conteneurs et légendes HTML.
   Le style INTERNE des tracés Chart.js (grilles --line, ticks mono granite
   foncé, tooltips graphite/craie) est piloté par charts/base.js via les
   tokens (getComputedStyle) — zéro hex en JS.
   ========================================================================== */

.charge-legend, .perf-legend, .fcv-split-legend, .cal-legend, .sub-legend {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-data); font-size: 9.5px; color: var(--granite-fonce);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.perf-legend { margin-top: 12px; }
.perf-leg-item { display: flex; align-items: center; gap: 5px; }
.perf-leg-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.filter-grp { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.filter-lbl { font-size: 9.5px; color: var(--granite-fonce); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 2px; white-space: nowrap; font-family: var(--font-data); }
.fbtn {
  border: var(--filet); border-radius: var(--radius); padding: 3px 10px;
  font-size: 10px; cursor: pointer; font-weight: 500;
  background: var(--carte); color: var(--ink-2); transition: all 0.12s; min-height: 24px;
  font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.06em;
}
.fbtn:hover { border-color: var(--graphite); color: var(--graphite); }
.fbtn.active { background: var(--graphite); color: var(--craie); border-color: var(--graphite); }
.vbtn-group { display: flex; gap: 2px; background: var(--carte); border: var(--filet); border-radius: var(--radius); padding: 2px; }
.vbtn {
  border-radius: var(--radius); padding: 3px 10px; font-size: 10px; cursor: pointer;
  font-weight: 500; border: none; background: transparent; color: var(--ink-2); transition: all 0.12s;
  font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.06em;
}
.vbtn.active { background: var(--graphite); color: var(--craie); }

.charge-meta { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.charge-stat { border: var(--filet-int); background: var(--craie); border-radius: var(--radius); padding: 7px 10px; text-align: center; min-width: 70px; }
.charge-stat-lbl { font-size: 9px; color: var(--granite-fonce); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.charge-stat-val { font-size: 15px; font-weight: 600; font-family: var(--font-data); }