.stats-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.stats-header h1{ margin:0; }
.stats-header .filters{ display:flex; align-items:center; gap:.6rem; }
.stats-header .filters .sep{ opacity:.6; }
.guard{
  padding:1rem; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05); border-radius:12px; margin-top:1rem;
}
.hidden{ display:none !important; }

.kpi-grid{
  margin-top:1rem;
  display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr));
}
.kpi{ background: var(--panel, rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px; }
.kpi-label{ font-size:.9rem; opacity:.8; }
.kpi-value{ font-size:1.4rem; font-weight:700; margin-top:.25rem; }

.charts{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top:1rem; }
.chart-card{ background: var(--panel, rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; }

.tables{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top:1rem; }
.table-card{ background: var(--panel, rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; }
.table{ width:100%; border-collapse: collapse; }
.table th,.table td{ padding:.5rem .6rem; border-bottom:1px solid rgba(255,255,255,.08); }
.table th{ text-align:left; opacity:.8; }

/* ===== Overrides spécifiques à la page Stats ===== */
html, body.page-stats {
  height: auto;
  overflow-y: auto !important;     /* réactive le scroll vertical */
}

/* Si ton layout global centre verticalement .container, on l'annule ici */
.page-stats .container {
  display: block !important;
  align-items: stretch !important;
  min-height: unset !important;
  padding-bottom: 64px;            /* marge pour scroller confortablement */
}

/* Certaines 'cards' globales ont overflow:hidden pour arrondis.
   Ici on laisse leur contenu s'étendre et donc la page scroller. */
.page-stats .panel {
  overflow: visible !important;
}

.btn.secondary {
  background: rgba(255,255,255,.08);
  color: var(--white);
  align-items: center !important;
}

/* === Centrage du bouton "Menu" (spécifique page Stats) === */
.page-stats .nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  z-index: 1000;
}

.page-stats .nav .btn{
  min-width: 140px;
  text-align: center;
}


/* === Variante : bouton "Menu" centré DANS LE FLUX (pas fixé) === */
.page-stats nav.nav{
  position: static !important;
  left: auto; right: auto; bottom: auto;
  display: flex;
  justify-content: center;
  margin: 24px 0 32px;
}
.page-stats nav.nav .btn{
  min-width: 140px;
  text-align: center;
}