/* ==========================================
   PASSE RESPONSIVE GLOBALE — XAU Trade Plan
   Couvre tablette (≤980px) et mobile (≤640px / ≤400px)
   À inclure sur TOUTES les pages backoffice
   ========================================== */

/* Tablette */
@media (max-width: 980px) {
  body { font-size: 15px; }
  .container, .wrap, main { padding-left: 24px; padding-right: 24px; }
  /* Sidebar/nav qui passe en topbar mobile : géré par chaque page */
  /* Grilles 3+ colonnes -> 2 colonnes auto */
  [class*="grid-3"], .three-col, .cards-3 { grid-template-columns: repeat(2, 1fr) !important; }
  [class*="grid-4"], .four-col, .cards-4 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Padding hero/sections allégé */
  section, .section { padding-top: 70px; padding-bottom: 70px; }
}

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 14px; line-height: 1.5; }
  .container, .wrap, main { padding-left: 16px; padding-right: 16px; }
  /* Toutes grilles -> 1 colonne */
  [class*="grid-2"], [class*="grid-3"], [class*="grid-4"],
  .two-col, .three-col, .four-col,
  .cards-2, .cards-3, .cards-4,
  .row-2, .row-3, .row-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Typo */
  h1 { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.15; }
  h2 { font-size: clamp(22px, 6.5vw, 28px) !important; line-height: 1.2; }
  h3 { font-size: clamp(18px, 5vw, 22px) !important; }
  /* Sections */
  section, .section { padding-top: 48px; padding-bottom: 48px; }
  /* Boutons */
  button, .btn { font-size: 13px !important; padding: 12px 18px !important; letter-spacing: 0.08em; }
  /* Tableaux scrollables */
  table { font-size: 12px; }
  .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Modals fullscreen */
  .modal, .ticket-modal, .legal-modal { padding: 12px !important; }
  .modal-inner, .modal-content { max-height: 90vh; overflow-y: auto; }
  /* Cards */
  .card, [class*="card"] { padding: 18px !important; }
  /* Padding hero compacté */
  .hero, [class*="hero"] { padding: 80px 0 40px !important; min-height: auto !important; }
  /* Stack flex rows par défaut quand "row" */
  .row, .flex-row { flex-direction: column; align-items: stretch; }
  .row > *, .flex-row > * { width: 100%; }
  /* Footer */
  footer { padding: 28px 16px !important; text-align: center; }
  footer .f-links, .footer-links { gap: 10px 18px !important; font-size: 11px !important; flex-wrap: wrap; justify-content: center; }
  /* Sidebar dashboard : passe en bandeau si présente */
  .sidebar, .side-nav, .nav-side {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(230,184,102,0.2) !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding: 12px 16px !important;
  }
  .sidebar nav, .side-nav nav { display: flex !important; flex-direction: row !important; gap: 8px !important; flex-wrap: nowrap !important; }
  .sidebar a, .side-nav a { white-space: nowrap; padding: 8px 12px !important; font-size: 12px !important; }
  .layout, .app-layout, [class*="layout-grid"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
}

@media (max-width: 400px) {
  body { font-size: 13.5px; }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  .container, .wrap, main { padding-left: 14px; padding-right: 14px; }
  section, .section { padding-top: 36px; padding-bottom: 36px; }
  .card, [class*="card"] { padding: 14px !important; }
}

/* Empêcher tout scroll horizontal involontaire */
html, body { max-width: 100vw; overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; height: auto; }