/* public/css/responsive-fix.css */ /* KB Med — Correctifs responsive complets */ /* À inclure EN DERNIER sur toutes les pages, après tous les autres CSS */ /* ═══════════════════════════════════════════════════════════════════ BREAKPOINTS — convention du projet Pas de build step (pas de Sass/PostCSS) : les media queries CSS natives n'acceptent pas var(--xxx) dans leur condition, donc ces valeurs sont documentées ici en constantes de référence plutôt que déclarées comme custom properties utilisables. Toute nouvelle règle @media doit reprendre une de ces trois valeurs telle quelle. max-width: 1024px → tablette / petit écran max-width: 768px → mobile (cible principale : iPhone 16, 393-440px) max-width: 480px → très petit mobile / ajustements fins ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ GLOBAL — Empêche le scroll horizontal sur TOUTES les pages ═══════════════════════════════════════════════════════════════════ */ html { overflow-x: hidden; max-width: 100vw; } body { overflow-x: hidden; max-width: 100vw; } /* Tout élément ne doit pas dépasser la fenêtre */ * { max-width: 100%; } /* Les tableaux peuvent scroller dans leur conteneur */ table { max-width: none; /* Exception pour les tables */ } /* ═══════════════════════════════════════════════════════════════════ SIDEBAR — Mobile overlay système unifié ═══════════════════════════════════════════════════════════════════ */ /* Overlay (fond sombre derrière la sidebar mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; animation: fadeIn 0.2s ease-out; } /* Sidebar se cache sur mobile */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.25s ease-out; z-index: 100; box-shadow: none; /* La sidebar est en position:fixed donc n'hérite pas du padding-top de (LOT 1) — l'encoche doit être gérée ici. */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .sidebar.open, .sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15); } .main-content, .main { margin-left: 0 !important; } /* .page-header est position:sticky;top:0 — quand elle colle en haut de l'écran, elle doit dégager l'encoche pour que le bouton hamburger et le titre restent tapables/visibles. */ .page-header { padding-top: max(10px, env(safe-area-inset-top, 0px)); } } /* ═══════════════════════════════════════════════════════════════════ HAMBURGER — Un seul bouton, celui du mobile-menu.js ═══════════════════════════════════════════════════════════════════ */ /* Cache notre bouton hamburger custom (mobile-menu.js en crée un) */ .mobile-menu-btn { display: none; } /* Sur mobile, affiche le bouton injecté par mobile-menu.js */ @media (max-width: 768px) { /* mobile-menu.js injecte un bouton avec id="mobile-menu-btn" */ #mobile-menu-btn { display: flex !important; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 3px; color: var(--text-secondary); font-size: 14px; cursor: pointer; margin-right: 8px; flex-shrink: 0; } } /* ═══════════════════════════════════════════════════════════════════ PAGE HEADER — Responsive ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .page-header { padding: 10px 14px; gap: 8px; flex-wrap: wrap; } .header-title-group { display: flex; align-items: center; gap: 8px; min-width: 0; } .header-title-group h1, .page-header h1 { font-size: 1rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-actions-group, .page-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* Cache le texte des boutons, garde juste l'icône */ .header-actions-group .btn-label, .page-actions .btn-label { display: none; } .header-actions-group .btn, .page-actions .btn { padding: 7px 10px; min-width: 36px; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ TOOLBARS — Empile verticalement sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .toolbar-clean-bar, .toolbar-card, .toolbar-bar { height: auto !important; flex-wrap: wrap !important; padding: 10px 12px !important; gap: 8px !important; } .toolbar-search-section, .toolbar-search { flex: 1 1 100% !important; min-width: 0; } .toolbar-divider { display: none !important; } .toolbar-nav-section, .toolbar-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; height: auto !important; flex-wrap: nowrap; gap: 0; } .toolbar-nav-section::-webkit-scrollbar, .toolbar-tabs::-webkit-scrollbar { height: 2px; } .nav-text-btn, .nav-tab { flex-shrink: 0; height: 36px !important; padding: 0 10px !important; font-size: 0.8rem !important; } .toolbar-filters-section { width: 100%; margin-left: 0 !important; flex-wrap: wrap; gap: 6px !important; } .minimal-select, .filter-select { flex: 1; min-width: 100px; } .filter-item { flex: 1; } } /* ═══════════════════════════════════════════════════════════════════ TABLES — Scroll horizontal dans le wrapper, pas dans la page ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .erp-table-wrapper, .table-wrapper, .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: calc(100vw - 28px); } /* Cache colonnes secondaires sur mobile */ .erp-table th:nth-child(4), .erp-table td:nth-child(4) { display: none; } .erp-table th, .erp-table td { padding: 8px 10px !important; font-size: 0.8rem !important; white-space: nowrap; } } /* ═══════════════════════════════════════════════════════════════════ MODALS — Plein écran sur mobile (LOT 2A) .modal > .modal-content (flex column) > .modal-header / .modal-body (scrollable) / .modal-footer — header et footer sont des enfants flex-shrink:0 en dehors de la zone de scroll de .modal-body, donc déjà "épinglés" sans avoir besoin de position:fixed (qui se comporte mal sous Safari iOS quand le clavier virtuel apparaît). On ajoute position:sticky en plus, en ceinture-bretelles, comme demandé. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .modal { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: transparent !important; } .modal-content { max-width: 100dvw !important; width: 100dvw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; margin: 0 !important; animation: fadeIn 0.15s ease-out !important; } .modal-header { position: sticky; top: 0; z-index: 2; min-height: 44px; padding-top: max(16px, env(safe-area-inset-top, 0px)); } .modal-close { width: 44px !important; height: 44px !important; } .modal-body { padding: 16px !important; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; } .modal-footer { position: sticky; bottom: 0; z-index: 2; padding: 12px 16px !important; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; flex-wrap: wrap; gap: 8px; } .modal-footer .btn { flex: 1; justify-content: center; min-height: 44px; } /* Bloque le scroll de la page derrière tant qu'un modal (ou un modal empilé sur un autre) est ouvert. */ body:has(.modal.active) { overflow: hidden !important; } } /* ═══════════════════════════════════════════════════════════════════ FICHE CLIENT — Responsive complet ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Full screen */ .client-sheet-modal { max-width: 100vw !important; width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; } .sheet-header { padding: 12px 14px !important; flex-wrap: wrap; gap: 8px; } .sheet-icon-box { width: 40px !important; height: 40px !important; font-size: 16px !important; } .sheet-title-box h2 { font-size: 1rem !important; } .sheet-actions-row { width: 100%; justify-content: flex-end; } /* Cache le texte sur les boutons de la sheet */ .sheet-actions-row .btn span { display: none; } .sheet-actions-row .btn { padding: 5px 8px; } /* Layout vertical au lieu de horizontal */ .sheet-layout { flex-direction: column !important; } /* Sidebar infos devient un accordéon compact */ .sheet-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border-primary) !important; padding: 12px !important; max-height: 180px !important; overflow-y: auto; background: var(--bg-secondary) !important; flex-shrink: 0; } .info-group { margin-bottom: 10px !important; } .info-line { font-size: 0.8rem !important; } /* Tabs */ .sheet-tabs { padding: 0 12px !important; overflow-x: auto; white-space: nowrap; } .sheet-tab { padding: 10px 12px !important; margin-right: 12px !important; font-size: 0.85rem !important; flex-shrink: 0; } .tab-pane { padding: 14px !important; } /* Cards grid des équipements */ .cards-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ STATS GRID — 2 colonnes sur tablette, 1 sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .stats-row, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } .widgets-grid { grid-template-columns: 1fr !important; } .footer-content { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { .stats-row, .stats-grid, .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 12px !important; } .stat-card { padding: 12px 14px !important; } .stat-card-value, .stat-value, .kpi-card .number { font-size: 1.8rem !important; } .footer-content { grid-template-columns: 1fr !important; } .customize-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ CONTAINERS — Padding réduit sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .page-body, .stats-container, .content-section, .widgets-section, .client-container-fluid, .report-container-fluid, .admin-container-fluid, .checklist-container-fluid, .checklist-view-container { padding: 12px !important; height: auto !important; overflow: visible !important; } .main-content, .main { height: auto !important; overflow: visible !important; } } /* ═══════════════════════════════════════════════════════════════════ FORMS — Colonnes sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .form-row { grid-template-columns: 1fr !important; gap: 10px !important; } .filters-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ WIDGETS — Empilés sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .widgets-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .widget-body, .widget-content { max-height: 280px !important; } /* Map */ #map { height: 300px !important; } .map-filters { flex-wrap: wrap !important; gap: 4px !important; padding: 8px !important; } .map-filter-btn { font-size: 0.75rem !important; padding: 4px 8px !important; } /* Notification panel */ .notif-panel { width: 100vw !important; top: 52px !important; } } /* ═══════════════════════════════════════════════════════════════════ TICKETS — KPIs et tabs sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .kpi-grid { padding: 12px !important; gap: 10px !important; } .kpi-card { padding: 12px !important; } .search-wrapper, .ticket-tabs-container { padding: 0 12px 10px !important; } .ticket-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; width: 100%; } .ticket-tab-btn { flex-shrink: 0 !important; padding: 7px 12px !important; font-size: 0.8rem !important; } .erp-table-wrapper { margin: 0 12px 12px !important; } /* Cache colonnes tickets sur mobile */ .col-status, .col-date { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ STK — Toolbar sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .stk-toolbar { height: auto !important; flex-wrap: wrap !important; padding: 10px 12px !important; gap: 8px !important; } .tool-group { border-right: none !important; padding-right: 0 !important; flex-wrap: wrap; } .sig-list { flex-wrap: wrap !important; gap: 6px !important; } #filename-display { width: 100%; margin-left: 0 !important; } .stk-container { height: auto !important; padding: 0 12px 12px !important; } #workspace { padding: 12px !important; min-height: 400px; } #zoom-controls { bottom: 8px !important; } } /* ═══════════════════════════════════════════════════════════════════ CHECKLIST VIEW — Mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .checklist-grid { grid-template-columns: 1fr !important; } .header-main-row { flex-direction: column !important; gap: 12px !important; } .column-content { max-height: 250px !important; } } /* ═══════════════════════════════════════════════════════════════════ ADMIN — Tabs sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .toolbar-nav-section#admin-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 0; } .admin-container-fluid { padding: 12px !important; } .section-header { flex-wrap: wrap !important; gap: 10px !important; } .section-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .permissions-grid { grid-template-columns: 1fr 1fr !important; max-height: 200px; } } /* ═══════════════════════════════════════════════════════════════════ REPORTS — Modal plein écran + sidebar cachée ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #report-modal .modal-content { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; } .modal-sidebar { display: none !important; } .modal-main-content { padding: 12px !important; } .grid-cols-material { display: flex !important; flex-direction: column !important; gap: 6px !important; } .grid-cols-tech { display: flex !important; flex-direction: column !important; gap: 6px !important; } .grid-header { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ FOOTER — Sur mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .app-footer { padding: 20px 14px 14px !important; } .footer-content { grid-template-columns: 1fr !important; gap: 20px !important; } .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; } .footer-legal { flex-wrap: wrap; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ BULK ACTIONS BAR — Mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bulk-actions-bar { min-width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; bottom: 12px !important; left: 12px !important; transform: none !important; flex-wrap: wrap !important; justify-content: center !important; padding: 10px 12px !important; border-radius: 6px !important; } } /* ═══════════════════════════════════════════════════════════════════ SLIMSELECT — Touch-friendly ═══════════════════════════════════════════════════════════════════ */ /* Bouton de fermeture du picker plein écran, injecté dans par slimselect-mobile-fix.js SANS style inline. Ses seules règles vivent dans le bloc @media (max-width:768px) plus bas : hors mobile il n'avait donc aucun style, s'affichait en flux tout en bas du (bouton "×" ~21px) et provoquait une barre de défilement verticale sur toute la page. On le neutralise par défaut ; le mobile le réactive quand un picker est ouvert. */ #ss-mobile-close { display: none; } @media (max-width: 768px) { .ss-main { height: auto !important; min-height: 44px !important; font-size: 1rem !important; flex-wrap: wrap !important; overflow: visible !important; padding: 4px 8px !important; } /* Sélection multiple : les tags passent à la ligne au lieu d'être coupés par la hauteur fixe du champ. */ .ss-values { flex-wrap: wrap !important; gap: 4px !important; } /* Cible tactile 44px sur chaque option de la liste */ .ss-option { min-height: 44px !important; display: flex !important; align-items: center !important; font-size: 1rem !important; } .ss-search input { font-size: 1rem !important; } /* ───────────────────────────────────────────────────────────── Dropdown plein écran (option B — voir échange avec l'utilisateur). .ss-content est ajouté à par SlimSelect en position:absolute, calculée une seule fois à l'ouverture à partir du champ déclencheur. Dans une modale au corps scrollable, cette position devient fausse dès que l'utilisateur scrolle : le dropdown reste figé alors que le champ se déplace. En le passant en plein écran fixe, il devient immunisé au scroll (de la modale ou de la page) et à l'overflow. SlimSelect ajoute .ss-open-below/.ss-open-above sur .ss-content uniquement quand il est effectivement ouvert. ───────────────────────────────────────────────────────────────── */ .ss-content.ss-open-below, .ss-content.ss-open-above { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100dvw !important; max-width: 100dvw !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; z-index: 100000 !important; display: flex !important; flex-direction: column !important; } .ss-content.ss-open-below .ss-search, .ss-content.ss-open-above .ss-search { flex-shrink: 0; position: sticky; top: 0; z-index: 2; padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px; background: inherit; } .ss-content.ss-open-below .ss-search input, .ss-content.ss-open-above .ss-search input { height: 44px !important; } .ss-content.ss-open-below .ss-list, .ss-content.ss-open-above .ss-list { flex: 1 !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); } /* Bloque le scroll derrière le picker plein écran tant qu'il est ouvert */ body:has(.ss-content.ss-open-below, .ss-content.ss-open-above) { overflow: hidden !important; } /* Bouton de fermeture (public/js/slimselect-mobile-fix.js) — nécessaire pour les multi-select sans recherche (showSearch:false), qui n'ont sinon aucun moyen de se fermer sans sélectionner une option. */ #ss-mobile-close { display: none; position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; z-index: 100001; border-radius: 50%; border: 1px solid var(--border-primary, #e5e7eb); background: var(--bg-elevated, #fff); color: var(--text-primary, #111827); font-size: 22px; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } body:has(.ss-content.ss-open-below, .ss-content.ss-open-above) #ss-mobile-close { display: flex; align-items: center; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ TOUCH TARGETS — Minimum 44px sur mobile (boutons et liens) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .btn, .btn-sm, .btn-icon-sm, .btn-icon-simple, .sidebar-btn, .nav-item, .nav-link, .map-filter-btn, .ticket-tab-btn, button, a.btn, a[role="button"] { min-height: 44px; } .btn-icon-sm, .btn-icon-simple { min-width: 44px; } } /* ═══════════════════════════════════════════════════════════════════ MODAL "MES PRÉFÉRENCES" — injecté en JS par sidebar-init.js, entièrement en style inline (pas de classes) sauf les 2 hooks ._prefs-box / ._prefs-head / ._prefs-close ajoutés pour ce correctif. !important nécessaire pour battre les style inline existants. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #_prefs-modal { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: transparent !important; } #_prefs-modal ._prefs-box { max-width: 100dvw !important; width: 100dvw !important; height: 100dvh !important; display: flex !important; flex-direction: column !important; } #_prefs-modal ._prefs-head { position: sticky; top: 0; z-index: 2; min-height: 44px !important; padding-top: max(14px, env(safe-area-inset-top, 0px)) !important; flex-shrink: 0; } #_prefs-modal ._prefs-close { width: 44px !important; height: 44px !important; } #_prefs-modal #_pane-password, #_prefs-modal #_pane-notifs { overflow-y: auto !important; -webkit-overflow-scrolling: touch; flex: 1; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important; } body:has(#_prefs-modal) { overflow: hidden !important; } }