/* ═══ 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; }
  .forecast-hero { grid-template-columns: 1fr 1fr !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: 1024px) {
  /* Grilles INLINE sans classe (style="grid-template-columns: repeat(N…")
     - présentes sur Prévisions, Signaux, etc. : repli générique */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 700px) {
  /* Téléphone : tout s'empile, rien de compressé ni de coupé.
     Variantes AVEC et SANS espace après les deux-points : les styles
     inline générés par JS n'ont pas d'espace (repeat(3, …) échappait). */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .kpi-strip, .grid-3, .micro-grid, .forecast-hero { grid-template-columns: 1fr !important; }
  .kpi-card { padding: 16px !important; }
  /* Cartes d'événements (Prévisions) : le titre s'étale, les badges suivent */
  .ev-row { flex-wrap: wrap !important; row-gap: 8px !important; }
  .ev-row > div { flex: 1 1 100% !important; order: -1; }
  #eventsSection [style*="display:flex"], .eventsSection [style*="display:flex"] {
    flex-wrap: wrap; row-gap: 6px;
  }
  main table, .content table { display: block; overflow-x: auto; }

  /* Paramètres : la colonne de navigation devient des rangées de puces
     dans le flux normal - JAMAIS collante ni superposée au contenu.
     minmax(0,1fr) + min-width:0 partout : aucun contenu interne (rangée
     de boutons des cartes d'intégration...) ne peut forcer le panneau
     à dépasser l'écran - c'était la cause du panneau rogné à 576 px. */
  .settings-layout { grid-template-columns: minmax(0, 1fr) !important;
                     width: 100% !important; max-width: 100% !important; }
  .settings-layout * { min-width: 0; }
  .settings-panel, .panel-section, .integ-card { max-width: 100% !important; }
  .integ-head, .integ-actions, .panel-section-header, .integ-security-banner {
    flex-wrap: wrap !important; row-gap: 8px;
  }
  .settings-nav {
    position: static !important; top: auto !important; align-self: auto !important;
    flex-direction: row !important; flex-wrap: wrap !important;
    gap: 6px !important; max-width: 100%; margin-bottom: 12px;
  }
  .settings-nav-link { white-space: nowrap; flex: 0 0 auto; }

  /* Comptabilité : rangée d'onglets défilante au doigt, jamais coupée */
  .tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; max-width: 100%; flex-wrap: nowrap;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }

  /* Réappro : les paramètres « sur une ligne » (desktop) s'empilent,
     et les rangées internes passent à la ligne au lieu d'être rognées */
  #rpParamsGrid { grid-template-columns: 1fr !important; }
  #reapproSpace [style*="display:flex"] { flex-wrap: wrap; row-gap: 6px; }
  #reapproSpace { overflow-x: clip; }
  #reapproSpace div { min-width: 0; }

  /* Tableau de bord : l'en-tête du graphique (titres + onglets) s'empile */
  .zone-head { flex-wrap: wrap; row-gap: 10px; }
  .zone-controls { flex-wrap: wrap; max-width: 100%; row-gap: 8px; }

  /* Pied de page de l'accueil */
  .footer-bottom { flex-wrap: wrap; row-gap: 8px; }

  /* ── MODALES : jamais coupées ──────────────────────────────────────
     Le motif « voile centré » rogne le haut ET le bas des fenêtres plus
     hautes que l'écran, sans aucun moyen d'atteindre le contenu. Sur
     téléphone : la fenêtre commence en haut (sous le bandeau démo le cas
     échéant) et c'est le VOILE qui défile. Couvre les deux motifs du
     site : la classe .modal-overlay ET les voiles construits en JS avec
     un style inline « position:fixed;inset:0 » (Produits, Paramètres,
     Prévisions). !important nécessaire pour battre les styles inline. */
  .modal-overlay,
  [style*="position:fixed;inset:0"],
  [style*="position: fixed"][style*="inset: 0px"] {
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(14px, calc(var(--demoBarH, 0px) + 10px)) 10px 28px !important;
  }
  .modal-overlay .modal { max-width: 100% !important; }

  /* Le bouton de menu flottant s'efface quand une fenêtre est ouverte
     (il flottait AU-DESSUS des modales et masquait des contrôles) */
  body:has(.modal-overlay.open) #mnavBtn,
  body:has([style*="position:fixed;inset:0"]) #mnavBtn,
  body:has([style*="position: fixed"][style*="inset: 0px"]) #mnavBtn,
  body:has(.modal-overlay.open) .mnav-btn,
  body:has([style*="position:fixed;inset:0"]) .mnav-btn,
  body:has([style*="position: fixed"][style*="inset: 0px"]) .mnav-btn { display: none !important; }
}