/* ============================================================
   charts.css — styles SVG partagés par les charts D3.
   Tout est local (zéro CDN). Couleurs via tokens.css.
   Dans @layer components (ordre déclaré dans tokens.css).
   ============================================================ */

@layer components {
  .line-chart,
  .heatmap,
  .choropleth-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  .line-chart-svg,
  .heatmap-svg,
  .choropleth {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* --- Line chart --- */
  .line-chart .axis text {
    fill: var(--tx3);
    font-size: 10px;
    font-family: var(--font-ui);
  }
  .line-chart .axis path,
  .line-chart .axis line {
    stroke: var(--bd);
    shape-rendering: crispEdges;
  }
  .line-chart .grid line {
    stroke: var(--bd);
    stroke-dasharray: 2, 2;
  }
  .line-chart .line {
    fill: none;
    stroke: var(--ac);
    stroke-width: 2;
  }
  .line-chart .area {
    fill: var(--ac3);
  }

  /* Sprint E 2026-05-14 — courbes de comparaison (Plausible-like).
     previous : dashed court, tx2 (gris medium). year_ago : dashed long, tx3
     (gris plus clair). Aucune area pour ne pas saturer le graphe. */
  .line-chart .compare-line {
    fill: none;
    stroke-width: 1.5;
    opacity: 0.7;
  }
  .line-chart .compare-previous {
    stroke: var(--tx2);
    stroke-dasharray: 4 2;
  }
  .line-chart .compare-year-ago {
    stroke: var(--tx3);
    stroke-dasharray: 8 3;
  }

  /* --- Heatmap --- */
  .heatmap rect.cell {
    shape-rendering: crispEdges;
    stroke: var(--bg);
    stroke-width: 0.5;
  }
  .heatmap rect.cell:hover {
    stroke: var(--ac);
    stroke-width: 1.5;
  }
  .heatmap .label {
    fill: var(--tx3);
    font-size: 10px;
    font-family: var(--font-ui);
  }

  /* --- Choropleth --- */
  .choropleth path {
    stroke: var(--bd);
    stroke-width: 0.5;
    transition: stroke var(--t-fast);
  }
  .choropleth path:hover {
    stroke: var(--ac);
    stroke-width: 1;
    cursor: default;
  }

  /* --- Tooltip chart (distinct du popover "?") --- */
  .chart-tooltip {
    position: absolute;
    z-index: 10;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    color: var(--tx);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: var(--shadow-2);
  }

  .chart-empty {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--tx2);
  }
} /* end @layer components */