/* ==========================================================================
   AGREEN — Suite responsive partagée
   Chargée par toutes les applications (balise <link rel="stylesheet"
   href="/responsive-suite.css">). Une seule copie à la racine du dossier
   "publish" (voir build-dist.js) : le chemin absolu la résout depuis
   n'importe quelle sous-application. Règles génériques et sûres qui
   améliorent l'affichage mobile/tablette sans dépendre du détail de
   chaque feuille de style : pas de débordement horizontal, tableaux
   scrollables, zones tactiles confortables, pas de zoom iOS involontaire,
   grilles/barres qui s'empilent proprement sur petit écran, modales
   toujours contenues dans l'écran.
   ========================================================================== */

/* --- Base : jamais de scroll horizontal --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* --- Formulaires : 16px minimum pour éviter le zoom automatique iOS --- */
@media (max-width: 640px) {
  body { font-size: 14px; }
  input, select, textarea, button { font-size: max(16px, 1em) !important; }
}

/* --- Zones tactiles confortables sur mobile --- */
@media (max-width: 768px) {
  button, .btn, a.btn, [role="button"], input[type="button"], input[type="submit"] {
    min-height: 42px;
  }
}

/* --- Tableaux : jamais de débordement de page --- */
table, .responsive-table { max-width: 100%; }
@media (max-width: 768px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-container, .table-wrapper, .responsive-table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* --- Barres d'en-tête / outils : s'empilent au lieu de déborder --- */
@media (max-width: 900px) {
  .app-header, .topbar, .header-content, .header-actions, .toolbar, .actions-bar,
  [class*="-bar"], [class*="toolbar"], [class*="quick-tools"], [class*="rdv-buttons"],
  [class*="button-row"], [class*="actions-row"] {
    flex-wrap: wrap;
  }
  .dashboard-grid, .stats-grid, .cards-grid, .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .modal, .dialog, .wizard-modal { padding: 12px !important; }
  .modal-content, .modal-card, .dialog-content, .wizard-content,
  [class*="modal-content"], [class*="modal-card"], [class*="modal-box"] {
    width: min(100%, 680px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
  }
}

/* --- Grilles fréquentes : une colonne sur petit écran plutôt qu'un débordement --- */
@media (max-width: 640px) {
  .dashboard-grid, .stats-grid, .cards-grid, .content-grid, .form-grid,
  [class*="grid"]:not([class*="grid-item"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .container, .main-container, main { max-width: 100% !important; }
  .mobile-stack { flex-direction: column !important; align-items: stretch !important; }
  .hide-mobile { display: none !important; }
  .search-container, [class*="search-container"] { width: 100%; }
}

/* --- Modales : toujours contenues dans l'écran, scrollables --- */
@media (max-width: 380px) {
  .modal, .dialog, .wizard-modal { padding: 6px !important; }
  .modal-content, .modal-card, .dialog-content, .wizard-content {
    max-height: calc(100dvh - 12px) !important;
    border-radius: 16px !important;
  }
}

/* --- Titres : tailles fluides sur petit écran --- */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.3rem); }
  header, [class*="header"] { flex-wrap: wrap; }
}