/* ============================================================ responsive-fixes.css - Patch responsive mobile BATCH 6.5 ============================================================ A charger APRES styles.css dans le de pros.html, admin.html, mairie.html Corrige tous les bugs responsive mobile (S23 Ultra, iPhone, etc.) ============================================================ */ /* ============================================================ 1. BURGER MENU MOBILE - z-index hierarchy ============================================================ */ .mobile-menu-btn { display: none; /* cache sur desktop */ } .sidebar-overlay { display: none; /* cache par defaut */ } /* ============================================================ 2. MOBILE (jusqu'a 768px) ============================================================ */ @media (max-width: 768px) { /* Burger button - position fixed en haut a gauche */ .mobile-menu-btn { display: flex !important; position: fixed !important; top: 12px; left: 12px; z-index: 9999; width: 44px; height: 44px; align-items: center; justify-content: center; background: #1D9E75; color: #fff; border: none; border-radius: 10px; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); padding: 0; line-height: 1; } .mobile-menu-btn:active { transform: scale(0.95); } /* Sidebar cachee par defaut sur mobile */ .sidebar { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0; left: 0; width: 280px !important; height: 100vh !important; height: 100dvh !important; transform: translateX(-100%); transition: transform 0.25s ease-out; z-index: 9998; overflow-y: auto; box-shadow: 0 0 20px rgba(0,0,0,0.15); background: #fff; } /* Sidebar visible quand .open */ .sidebar.open { transform: translateX(0); } /* Overlay quand sidebar ouverte */ .sidebar-overlay { display: block !important; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(0,0,0,0.5); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity 0.25s; } body.menu-open .sidebar-overlay { opacity: 1; pointer-events: auto; } /* Main content prend toute la largeur sur mobile */ .main-content { margin-left: 0 !important; max-width: 100% !important; padding: 70px 16px 20px 16px !important; } /* Body en flex column sur mobile */ body { flex-direction: column !important; } } /* ============================================================ 3. TRES PETITS ECRANS (jusqu'a 480px) ============================================================ */ @media (max-width: 480px) { .main-content { padding: 60px 12px 20px 12px !important; } .card { padding: 12px !important; } .modal-content { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important; } button, .btn-primary, .btn-secondary { min-height: 44px; } input, select, textarea { font-size: 16px !important; } } /* ============================================================ 4. TABLETTES (768px - 1024px) ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { .sidebar { width: 220px !important; } .main-content { margin-left: 220px !important; max-width: calc(100% - 220px) !important; } } /* ============================================================ 5. SAFE AREA (S23 Ultra, iPhone notch) ============================================================ */ @supports (padding: env(safe-area-inset-top)) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .mobile-menu-btn { top: calc(12px + env(safe-area-inset-top)) !important; left: calc(12px + env(safe-area-inset-left)) !important; } .sidebar { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); } } /* ============================================================ 6. PWA STANDALONE (quand installee comme app) ============================================================ */ @media all and (display-mode: standalone) { .mobile-menu-btn { top: max(12px, env(safe-area-inset-top)) !important; } } /* ============================================================ 7. OPTIMISATIONS BATCH 5/6 ============================================================ */ @media (max-width: 768px) { .dispo-cal-grid { grid-template-columns: repeat(7, minmax(40px, 1fr)) !important; gap: 4px !important; } .abo-card-formule { grid-template-columns: 1fr !important; } .parraine-item { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } } /* ============================================================ FIX BURGER CACHE PAR BANDEAU IMPERSONATION (mobile) ============================================================ */ @media (max-width: 768px) { .bandeau-impersonation { margin-top: 56px !important; } } /* ============================================================ FIX BURGER CACHE PAR BANDEAU IMPERSONATION (mobile) Quand on est en mode 'Voir comme eux' sur mobile, le bandeau orange fixe en haut cachait le burger. Solution : decaler le burger SOUS le bandeau via selecteur ~ ============================================================ */ /* ============================================================ FIX BURGER CACHE PAR BANDEAU IMPERSONATION (mobile) - v3 Utilise :has() qui inspecte tout le body pour detecter la presence du bandeau (peu importe sa position dans le DOM) ============================================================ */ @media (max-width: 768px) { body:has(#admin-impersonation-banner) .mobile-menu-btn { top: 78px !important; } }