/* Onglet Statistiques — tout est limité à #pageStats pour ne jamais toucher aux autres pages. */
#pageStats {
  --grille: #2e2a36; --axe: #4a4454;
  /* Palette catégorielle validée (daltonisme, contraste) sur le fond --carte. Ordre fixe. */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --autres: #6b6577;
}
#pageStats .sous-onglets { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--bord); margin-bottom: 12px; }
#pageStats .sous-onglets a { padding: 7px 12px; color: var(--sourd); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
#pageStats .sous-onglets a.actif { color: var(--texte); border-bottom-color: var(--accent); }
#pageStats .sous-onglets .date { margin-left: auto; align-self: center; color: var(--sourd); font-size: 12px; }
#pageStats .filtres { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 14px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px; }
#pageStats .filtres label { color: var(--sourd); font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
#pageStats select { font: inherit; border-radius: 6px; border: 1px solid var(--bord); background: var(--carte2); color: var(--texte); padding: 5px 8px; max-width: 100%; }
#pageStats input[list] { min-width: 220px; }
#pageStats .grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 12px; }
#pageStats .carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; min-width: 0;
  overflow-x: auto; }   /* un tableau large défile dans sa carte, jamais la page (téléphone) */
#pageStats .carte.large { grid-column: 1 / -1; }
#pageStats .carte-tete { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
#pageStats .carte-tete h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
#pageStats .carte-tete .actions { margin-left: auto; display: flex; gap: 4px; }
#pageStats .carte-tete .actions button { font-size: 11.5px; padding: 2px 8px; }
#pageStats .sous-titre { color: var(--sourd); font-size: 12px; margin-bottom: 6px; }
#pageStats .graphe { width: 100%; height: 340px; }
#pageStats .tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
#pageStats .tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 14px; }
#pageStats .tuile .v { font-size: 26px; font-weight: 650; }
#pageStats .tuile .v small { font-size: 13px; color: var(--sourd); font-weight: 400; }
#pageStats .tuile .l { color: var(--sourd); font-size: 12px; }
#pageStats table.t { width: 100%; border-collapse: collapse; font-size: 12.8px; }
#pageStats table.t th, #pageStats table.t td { padding: 4px 8px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
#pageStats table.t th { color: var(--sourd); font-weight: 500; font-size: 11.5px; text-transform: uppercase; }
#pageStats table.t td.num, #pageStats table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
#pageStats table.t tr.somme td { font-weight: 700; border-top: 2px solid var(--bord); }
#pageStats table.cote td { font-variant-numeric: tabular-nums; }   /* comparaison : tout à gauche, chiffres de largeur fixe */
#pageStats table.t tr.commun td { background: rgba(216, 162, 74, .06); }
#pageStats .table-wrap { max-height: 420px; overflow: auto; }
#pageStats .atelier { display: grid; grid-template-columns: 290px 1fr; gap: 12px; }
#pageStats .atelier .panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; align-self: start; }
#pageStats .atelier .panneau label { display: flex; flex-direction: column; gap: 3px; color: var(--sourd); font-size: 12px; }
#pageStats .types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#pageStats .types button { font-size: 12px; padding: 5px 4px; }
#pageStats .types button.actif { border-color: var(--accent); color: var(--accent); }
#pageStats .avert { color: var(--accent); font-size: 12px; }
#pageStats .note { color: var(--sourd); font-size: 12px; }
#pageStats .choix { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#pageStats .pastille-c { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
#pageStats .fiche-tete { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
#pageStats .fiche-tete h2 { margin: 0; font-size: 20px; }
#pageStats .champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
#pageStats .champs div { font-size: 13px; overflow-wrap: anywhere; }
#pageStats .champs span { color: var(--sourd); font-size: 11.5px; display: block; }
#pageStats .champs em { color: var(--sourd); font-size: 11.5px; font-style: normal; display: block; }
#pageStats ul.liens { margin: 4px 0; padding-left: 18px; }
#pageStats ul.liens li { margin: 2px 0; }
#pageStats .chargement { color: var(--sourd); padding: 30px 4px; }
@media (max-width: 760px) {
  #pageStats .atelier { grid-template-columns: 1fr; }
  #pageStats .graphe { height: 300px; }
  #pageStats input[list] { min-width: 0; width: 100%; }
}