/* ===================================================================== mobile.css — Responsive TÉLÉPHONE pour les pages qui étendent base_app.html.twig (profil, admin, mes recherches, support, annotations). Chargé EN DERNIER dans le de base_app. IMPORTANT : tout est encapsulé dans @media (max-width:768px) (+ ≤480px), donc le rendu ordinateur (≥ 769px) reste STRICTEMENT inchangé. ===================================================================== */ @media (max-width: 768px) { html, body { max-width: 100%; overflow-x: hidden; } /* ---- Navigation commune (base_app) ---- */ .top-navigation .nav-container { padding: 0 10px !important; gap: 8px; } .nav-title, .nav-brand .nav-title { display: none; } .nav-logo img { height: 26px; } .nav-actions { gap: 6px; } .br-lang-switcher { margin-right: 0 !important; } .br-lang-select { padding: 4px 2px; font-size: 12px; } /* ---- Conteneur principal ---- */ .main-container { padding: 16px 12px !important; } /* ---- En-têtes de section ---- */ .section-header { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; } .section-title { gap: 12px; } /* ---- Grilles → 1 colonne ---- */ .grid-2, .grid-3, .grid-4, .stats-grid, .notes-grid, .page-profile .grid-2, .page-support .grid-2 { grid-template-columns: 1fr !important; } /* ---- Cartes (pas de translate au survol sur tactile) ---- */ .card { padding: 16px; } .card:hover { transform: none; } /* ---- Tableaux larges → scroll horizontal ---- */ .table-wrap, .table-responsive, .support-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table, .support-summary-table { min-width: 560px; } table { font-size: 13px; } /* ---- Boutons d'action en pleine largeur (formulaires admin/profil) ---- */ .btn-block-mobile { width: 100%; } /* ---- Admin utilisateurs : filtres et actions empilés proprement ---- */ .page-admin .users-toolbar { padding: 12px 0 0; } .page-admin .users-toolbar__search, .page-admin .users-toolbar__filters, .page-admin .users-toolbar__field { flex: 1 1 100%; width: 100%; min-width: 0; } .page-admin .users-toolbar__filters .btn, .page-admin .users-toolbar__field .form-input { width: 100%; min-width: 0; } .page-admin .users-actions { display: flex; } .page-admin .users-actions .btn { flex: 1 1 auto; justify-content: center; } .page-admin .users-pagination { align-items: flex-start; } .page-admin .users-pagination__links { width: 100%; } .page-admin .user-activity-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .main-container { padding: 12px 8px !important; } .card { padding: 13px; } .nav-logo img { height: 22px; } .section-title h1, .section-title h2 { font-size: 18px; } }