/* Analytics — consommation de tokens & coût réel par agent.
   Feuille SÉPARÉE de console.css : les graphes ont leur propre vocabulaire
   (palette de séries, marques, grille) et n'ont pas à alourdir le style global.

   Palette de séries : 8 slots catégoriels, ordre FIXE (jamais cyclé), validée
   contre les surfaces réelles du projet (--panel : #ffffff clair / #141a23
   sombre). Les pas sombres ne sont pas un « flip » automatique des pas clairs :
   ce sont les mêmes teintes re-choisies pour la surface sombre.

   Deux avertissements du validateur, et leurs contreparties (assumées) :
   - clair : 3 teintes passent sous 3:1 → labels visibles + vue tableau OBLIGATOIRES ;
   - sombre : ΔE CVD 10.3 (bande plancher) → encodage secondaire OBLIGATOIRE
     (légende libellée + écart de 2px entre segments + vue tableau).
   Ces contreparties sont livrées, donc la palette est légale. */

:root{
  --viz-1:#2a78d6; --viz-2:#1baf7a; --viz-3:#eda100; --viz-4:#008300;
  --viz-5:#4a3aa7; --viz-6:#e34948; --viz-7:#e87ba4; --viz-8:#eb6834;
  --viz-other:#898781;              /* la queue repliée en « Autre » — jamais une 9e teinte */
  --viz-surface:var(--panel);       /* la surface qui « creuse » les écarts de 2px */
  --viz-grid:var(--border);         /* grille : filet 1px plein, récessif (jamais pointillé) */
}
:root[data-theme="dark"]{
  --viz-1:#3987e5; --viz-2:#199e70; --viz-3:#c98500; --viz-4:#008300;
  --viz-5:#9085e9; --viz-6:#e66767; --viz-7:#d55181; --viz-8:#d95926;
  --viz-other:#898781;
}

/* --- Barre de filtres : UNE seule ligne, au-dessus de TOUT ce qu'elle cadre --- */
.ana-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.ana-filters .fld{display:flex;flex-direction:column;gap:4px}
.ana-filters label{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ana-filters select{min-width:132px}
.ana-spacer{flex:1}

/* --- Stat tiles : la réponse « combien » n'est pas un graphe, c'est un nombre --- */
.ana-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.ana-tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.ana-tile .lbl{font-size:12px;color:var(--muted);margin-bottom:6px}
.ana-tile .val{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
/* Le héros : un seul par vue. Chiffres PROPORTIONNELS (tabular ferait « lâche ». */
.ana-tile.hero .val{font-size:clamp(32px,4.5vw,48px);font-variant-numeric:proportional-nums}
.ana-tile.hero{grid-column:span 2}
@media (max-width:640px){ .ana-tile.hero{grid-column:span 1} }

/* --- Carte de graphe. Hauteur NON figée : l'axe X doit tenir dans la carte
       (sinon la carte se met à scroller toute seule sur 20px). --- */
.ana-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:16px}
.ana-card h3{margin:0 0 2px;font-size:14px;font-weight:600}
.ana-card .sub{margin:0 0 12px;font-size:12px;color:var(--muted)}
.ana-plot{position:relative;width:100%}
.ana-plot svg{display:block;width:100%;height:auto;overflow:visible}

/* Grille & axes : filets 1px PLEINS, une marche au-dessus de la surface. */
.ana-grid line{stroke:var(--viz-grid);stroke-width:1;shape-rendering:crispEdges}
.ana-axis text{fill:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}

/* Marques. Les segments empilés sont séparés par un ÉCART de surface (2px),
   jamais par un contour : un contour ajoute de l'encre qui n'est pas de la donnée. */
.ana-seg{stroke:none}
.ana-bar{stroke:none}
.ana-band{fill:transparent;cursor:pointer}          /* cible de survol = toute la colonne */
.ana-band:focus-visible{outline:none;fill:var(--hover)}
.ana-band.on{fill:var(--hover)}

/* Le texte ne porte JAMAIS la couleur de la série : identité = la pastille à côté. */
.ana-val{fill:var(--txt);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.ana-cat{fill:var(--muted);font-size:11px}

/* --- Légende : TOUJOURS présente dès 2 séries (canal d'identité fiable) --- */
.ana-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
.ana-legend .it{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt)}
.ana-legend .sw{width:10px;height:10px;border-radius:3px;flex:none}

/* --- Infobulle : elle ENRICHIT, elle ne conditionne jamais l'accès à la valeur
       (tout est aussi dans la vue tableau). --- */
.ana-tip{position:absolute;pointer-events:none;z-index:5;min-width:150px;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-lg);padding:8px 10px;font-size:12px;
  opacity:0;transition:opacity .12s var(--ease)}
.ana-tip.on{opacity:1}
.ana-tip .t{font-weight:600;margin-bottom:6px;font-size:12px}
.ana-tip .r{display:flex;align-items:center;gap:6px;justify-content:space-between;margin-top:3px}
.ana-tip .r .k{display:flex;align-items:center;gap:6px;color:var(--muted)}
.ana-tip .r .v{font-variant-numeric:tabular-nums;color:var(--txt);font-weight:600}
.ana-tip .sw{width:8px;height:8px;border-radius:2px;flex:none}
.ana-tip .tot{border-top:1px solid var(--border);margin-top:6px;padding-top:6px}

/* --- Vue tableau : le jumeau propre du graphe. Obligatoire ici (contraste clair)
       ET c'est elle qui rend le coût AUDITABLE (tarif $/Mtok appliqué). --- */
.ana-table-wrap{overflow-x:auto}
.ana-table{width:100%;border-collapse:collapse;font-size:13px}
.ana-table th,.ana-table td{padding:8px 10px;text-align:right;white-space:nowrap}
.ana-table th:first-child,.ana-table td:first-child{text-align:left}
.ana-table th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid var(--border)}
.ana-table td{border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.ana-table tbody tr:hover{background:var(--hover)}
.ana-table .agent{display:flex;align-items:center;gap:8px;text-align:left}
.ana-table .sw{width:10px;height:10px;border-radius:3px;flex:none}
.ana-table .rate{color:var(--muted);font-size:12px}

/* Un refetch ne doit pas faire clignoter un squelette : on garde le rendu
   précédent en opacité réduite (zéro saut de mise en page). */
.ana-loading{opacity:.45;transition:opacity .15s var(--ease)}

.ana-empty{color:var(--muted);font-size:13px;padding:28px 0;text-align:center}

@media (prefers-reduced-motion:reduce){
  .ana-tip,.ana-loading{transition:none}
}