/* ═══ Maestro — couche mobile commune ═══════════════════════════════
   Chargée par chaque page de l'app via <link> (donc toujours fraîche
   avec le HTML, aucun cache JS impliqué). Tiroir de navigation +
   adaptations d'affichage sous 1024 px. */

#mnavBtn { display: none; }
#mnavBackdrop { display: none; }

@media (max-width: 1024px) {

  /* ── Anti-débordement : plus AUCUN défilement horizontal ── */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  main.app, main, .content { max-width: 100vw; overflow-x: hidden; }

  /* ── Bouton menu flottant (au-dessus de la barre Safari/Chrome) ── */
  #mnavBtn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; z-index: 1200;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px; border-radius: 50%;
    background: #0a0a0a; color: white; border: none; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
  }

  /* ── Sidebar → tiroir coulissant ── */
  aside.sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1150;
    width: min(300px, 84vw);
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.18);
    height: 100dvh !important;
  }
  body.mnav-open aside.sidebar { transform: translateX(0); }
  body.mnav-open #mnavBackdrop {
    display: block; position: fixed; inset: 0; z-index: 1100;
    background: rgba(10, 10, 10, 0.45);
  }

  /* ── Topbar : titre entier, méta sur une ligne, actions dessous ── */
  header.topbar { display: flex; flex-wrap: wrap; gap: 8px 12px;
                  height: auto !important; padding: 14px 16px !important; }
  header.topbar > div:first-child { width: 100%; }
  .topbar-title { font-size: 20px !important; line-height: 1.2; white-space: nowrap; }
  .topbar-meta { display: block !important; width: 100%; max-width: 100%;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                 font-size: 12px !important; }
  .topbar-actions { width: 100%; display: flex !important; flex-wrap: wrap; gap: 8px; }
  .topbar-actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

  /* ── En-têtes de sections : titre au-dessus, contrôles en dessous ── */
  .zone-header { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .zone-controls { flex-wrap: wrap; max-width: 100%; }
  /* Rangées d'onglets plus larges que l'écran : défilement interne,
     jamais de coupe */
  .graph-tabs, .segmented, .zone-controls > div {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .graph-tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar { display: none; }
  .filter-bar { flex-wrap: wrap; }

  /* ── Contenus ── */
  main .content, .content { padding: 14px !important; }
  .kpi-strip, .grid-3, .micro-grid { grid-template-columns: 1fr 1fr !important; }
  .micro-stats { grid-template-columns: 1fr 1fr 1fr !important; }
  .graph-readout { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .readout-block { text-align: left !important; }
  .summary-bar { flex-wrap: wrap !important; gap: 12px !important; }
  .dashboard { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  /* Téléphone : tout s'empile, rien de compressé ni de coupé */
  .kpi-strip, .grid-3, .micro-grid { grid-template-columns: 1fr !important; }
  .kpi-card { padding: 16px !important; }
  main table, .content table { display: block; overflow-x: auto; }
}