/* ============================================================
   charts.css — styles SVG partagés par les charts D3.
   Aucun CSS ne fait référence à du CDN, tout est local.
   ============================================================ */

.line-chart, .heatmap, .choropleth-wrap {
  position: relative;
  width: 100%;
}

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

/* --- 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); }

/* --- 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 120ms ease; }
.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: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chart-empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--tx2);
}