/* Page des rapports (complète style.css) */
:root { --series-1: #2a78d6; --series-2: #eb6834; --grid: #e5e7eb; }
body { min-height: 100vh; }
a.btn { padding: .55em .9em; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; background: var(--card); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { border-color: transparent; background: none; }
.tabs button.on { background: #eff6ff; color: var(--accent); border-color: #bfdbfe; font-weight: 600; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.filters label { display: grid; gap: 3px; font-size: .82rem; color: var(--muted); }
.filters label.check { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--text); padding-bottom: 8px; }
.filters label.check input { width: auto; }
.filters input, .filters select { padding: .45em .6em; border: 1px solid var(--line); border-radius: 8px; background: var(--card); width: auto; }
.filters .q { display: flex; gap: 4px; }
.filters .q input { width: 200px; }

.content { padding: 16px; display: grid; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tile h3 { margin: 0 0 6px; font-size: .9rem; color: var(--muted); font-weight: 500; }
.tile .hero { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: .9rem; margin-left: 6px; }
.up { color: var(--ok); } .down { color: var(--danger); }
.tile dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 10px 0 0; font-size: .9rem; }
.tile dt { color: var(--muted); } .tile dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.report { width: 100%; border-collapse: collapse; background: var(--card); font-size: .92rem; }
.report th, .report td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report th:first-child, .report td:first-child { text-align: left; white-space: normal; }
.report th { position: sticky; top: 0; background: #f9fafb; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.report tfoot td { font-weight: 700; background: #f9fafb; border-top: 2px solid var(--line); }
.table-wrap { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--line); border-radius: 12px; }
.summary { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.summary div { display: grid; } .summary span { font-size: .8rem; color: var(--muted); } .summary strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Graphique */
.chart h2 { margin: 0 0 4px; font-size: 1rem; }
.legend { display: flex; gap: 16px; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart svg { width: 100%; height: 280px; display: block; }
.chart text { font-size: 11px; fill: var(--muted); }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .bar:hover { opacity: .85; }
.tip { position: fixed; z-index: 20; pointer-events: none; background: #111827; color: #fff; padding: 6px 9px; border-radius: 6px; font-size: .85rem; }