/* ============================================================================ Correctifs responsive globaux — Cabinet Bruno extranet Chargé EN DERNIER dans le pour gagner la cascade. Stratégie : règles surtout MOBILE (<=992px) -> impact desktop quasi nul, zéro réécriture des 166 vues. Filet de sécurité contre les débordements. ============================================================================ */ /* Médias fluides — sûr sur tous les écrans. */ img, svg, video, canvas { max-width: 100%; height: auto; } /* --------------------------------------------------------------------------- MOBILE / TABLETTE (<= 992px) --------------------------------------------------------------------------- */ @media (max-width: 992px) { /* Plus de scroll horizontal global parasite. */ html, body { overflow-x: hidden; } /* Topbar : annule les marges fixes 80%/60% qui poussaient le menu hors écran. */ .ms-auto { margin-left: auto !important; } .dropdown-user { margin-left: auto !important; } /* Onglets à largeur fixe (200px) -> pleine largeur. */ .tab-list__link { width: 100% !important; } /* Plafonne toute largeur inline en pixels qui dépasse l'écran. */ [style*="width:"][style*="px"] { max-width: 100% !important; } /* Tables de données : défilement horizontal INTERNE au lieu de casser la page. On cible les tables de données (DataTables, .styled-table) et on laisse intactes les tables de mise en page éventuelles. */ .card-body, .scroll-y, .table-responsive, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.dataTable, table.styled-table, .dataTables_wrapper table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; min-width: 0; } /* Colonnes Bootstrap : retour à la ligne autorisé (défaut, mais on force). */ .row { flex-wrap: wrap; } /* Padding de conteneur raisonnable sur mobile. */ .container, .container-fluid, .container-xxl { padding-left: 12px; padding-right: 12px; } } /* --------------------------------------------------------------------------- PHASE 2 — Structures de mise en page des pages lourdes (<= 768px) Beaucoup de vues (recouvrement/detail, ticket/detail, immeuble/index, reunion/tenueReunion, rapportCampagne, cbDashboard…) utilisent des de MISE EN PAGE avec

, des colonnes en float, et des min-height fixes. On les empile proprement sur mobile, SANS toucher aux vraies tables de DONNÉES (DataTables / .styled-table). --------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Tables de mise en page dans les cartes : on empile lignes et cellules. */ .card-body table:not(.dataTable):not(.styled-table) > tbody > tr, .card-body table:not(.dataTable):not(.styled-table) > tr { display: block; width: 100%; } .card-body table:not(.dataTable):not(.styled-table) > tbody > tr > td, .card-body table:not(.dataTable):not(.styled-table) > tr > td { display: block; width: 100% !important; box-sizing: border-box; } /* Colonnes flottantes inline -> pleine largeur empilée. */ .card-body [style*="float:left"], .card-body [style*="float: left"], .card-body [style*="float:right"], .card-body [style*="float: right"] { float: none !important; width: 100% !important; } /* Hauteurs minimales forcées (ex. min-height:500px) -> auto sur mobile, pour éviter de grands blocs vides. */ [style*="min-height"] { min-height: 0 !important; } } /* --------------------------------------------------------------------------- TRÈS PETITS ÉCRANS (<= 576px) --------------------------------------------------------------------------- */ @media (max-width: 576px) { .container, .container-fluid, .container-xxl { padding-left: 8px; padding-right: 8px; } }