/** * BIKBOX — améliorations responsive mobile (global). * Chargé dans les 3 templates de . Tout est scopé aux petits écrans : * ne change RIEN sur desktop. Vise les casses classiques sur téléphone * (tableaux larges, conteneurs à largeur fixe, modales, onglets, agenda). */ /* ---- Tablette & téléphone ---- */ @media (max-width: 991px) { /* Tableaux de données trop larges → scroll horizontal (swipe) au lieu de déborder. On garde TOUTES les colonnes visibles ; on épargne les DataTables (gérées via scrollX). */ .content-wrapper table:not(.dataTable) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .content-wrapper table:not(.dataTable) > thead, .content-wrapper table:not(.dataTable) > tbody { white-space: nowrap; } .content-wrapper .table-responsive { border: 0; margin-bottom: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Wrapper DataTables : le corps scrolle horizontalement */ .content-wrapper .dataTables_wrapper .dataTables_scrollBody { -webkit-overflow-scrolling: touch; } /* Conteneurs à largeur fixe (ex. zone d'upload docs width:700px) → pleine largeur */ .content-wrapper .container { width: auto !important; max-width: 100%; padding-left: 12px; padding-right: 12px; } /* Images et champs ne débordent jamais */ .content-wrapper img { max-width: 100%; height: auto; } .content-wrapper .form-control { max-width: 100%; } /* Modales Bootstrap : marges + largeur adaptée */ .modal-dialog { width: auto; margin: 12px; } /* Boîtes AdminLTE : paddings resserrés pour gagner de la place */ .content { padding: 8px; } .box-body { padding: 10px; } /* Boutons alignés qui se serrent → un peu d'air vertical */ .content-wrapper .btn { margin-bottom: 3px; } } /* ---- Téléphone ---- */ @media (max-width: 767px) { .content-header > h1 { font-size: 20px; } .content-header { padding: 12px 12px 0; } /* Barre d'onglets qui déborde → scroll horizontal doux */ .nav-tabs-custom > .nav-tabs { white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; } .nav-tabs-custom > .nav-tabs > li { float: none; display: inline-block; } .nav-tabs-custom > .nav-tabs > li > a { white-space: nowrap; } /* Agenda FullCalendar : barre d'outils empilée + police compacte */ .fc-toolbar { text-align: center; } .fc-toolbar .fc-left, .fc-toolbar .fc-center, .fc-toolbar .fc-right { float: none; display: block; margin: 4px 0; } .fc-toolbar h2 { font-size: 15px; } .fc .fc-event, .fc-time-grid-event .fc-time { font-size: 10px; } #calendar { max-width: 100%; } /* Cartes/callouts un peu plus serrés */ .callout, .box { margin-bottom: 10px; } /* Grilles d'infos très denses : on empile proprement */ .content-wrapper .row > [class*="col-"] { margin-bottom: 4px; } }