diff --git a/global.css b/global.css index 3807b32..8579b88 100644 --- a/global.css +++ b/global.css @@ -137,23 +137,89 @@ body.no-scroll { color: var(--text-main); } -.pf-mobile-menu { +/* === MENU MOBILE (Sidebar "Off-Canvas") === */ +.pf-mobile-overlay { display: none; position: fixed; - top: 64px; - left: 0; - right: 0; - height: calc(100vh - 64px); - overflow-y: auto; - -webkit-overflow-scrolling: touch; - background: white; - padding: 20px; - flex-direction: column; - gap: 16px; - z-index: 99; + inset: 0; + background: rgba(15, 23, 42, 0.6); + backdrop-filter: blur(4px); + z-index: 998; + opacity: 0; + transition: opacity 0.3s ease; } -.pf-mobile-menu.is-open { +.pf-mobile-overlay.is-visible { + display: block; + opacity: 1; +} + +.pf-mobile-menu { + position: fixed; + top: 0; + right: -300px; /* Caché à l'extérieur de l'écran à droite */ + width: 280px; + height: 100vh; + background: var(--bg-panel); + box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15); + z-index: 999; + transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; + flex-direction: column; + padding: 0; +} + +.pf-mobile-menu.is-open { + right: 0; /* Le menu glisse dans l'écran */ +} + +.pf-mobile-menu-header { + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border-light); + background: var(--bg-page); +} + +.pf-mobile-close-btn { + background: none; + border: none; + font-size: 2rem; + line-height: 1; + color: var(--text-muted); + cursor: pointer; +} + +.pf-mobile-menu-body { + padding: 20px; + display: flex; + flex-direction: column; + gap: 12px; + flex: 1; + overflow-y: auto; +} + +.pf-mobile-nav-link { + font-size: 1.1rem; + font-weight: 600; + text-decoration: none; + color: var(--text-main); + padding: 14px 16px; /* Plus large pour le tactile */ + border-radius: 12px; + display: flex; + align-items: center; + gap: 12px; + transition: background 0.2s; +} + +.pf-mobile-nav-link:active { + background: #f1f5f9; +} + +.pf-mobile-logout { + color: var(--danger); + background: #fef2f2; + margin-top: 15px; } /* === MAIN CONTENT & TYPOGRAPHY === */ @@ -575,3 +641,31 @@ p { padding: 14px; font-size: 1.05rem; } + +/* --- Optimisation Login Mobile --- */ +@media (max-width: 480px) { + .pf-login-wrapper { + padding: 0; + align-items: flex-start; /* Aligné en haut pour laisser de la place au clavier */ + background: var(--bg-panel); + } + + .pf-login-card { + border-radius: 0; /* Supprime les arrondis pour un look plein écran */ + border: none; + box-shadow: none; + padding: 60px 24px; + min-height: 100vh; + } +} + +/* ⚠️ IMPORTANT : Éviter le zoom auto sur iOS */ +.pf-login-card .pf-input { + font-size: 16px; /* En dessous de 16px, Safari iOS zoome automatiquement sur le champ */ + padding: 14px; /* Zone de clic plus large pour les doigts */ +} + +.pf-btn-block { + padding: 16px; /* Bouton plus haut pour un appui facile au pouce */ + font-size: 1.1rem; +} diff --git a/header.php b/header.php index 91b2226..7a399db 100644 --- a/header.php +++ b/header.php @@ -77,14 +77,23 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr'; -
- - - - - -
- +
+ +
+
+ + +
+ +
+ 🏠 + 📅 + 💰 + 🏖️ + 🎁 + + 🚪 +
@@ -107,18 +116,31 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr'; return window.I18N[key] || key; } - // Gestion du menu mobile + // Gestion du menu mobile (Off-Canvas Sidebar) document.addEventListener('DOMContentLoaded', () => { const burgerBtn = document.querySelector('.pf-burger-btn'); - const mobileMenu = document.querySelector('.pf-mobile-menu'); + const mobileMenu = document.getElementById('mobileMenu'); + const overlay = document.getElementById('mobileOverlay'); + const closeBtn = document.getElementById('closeMobileMenu'); - if(burgerBtn && mobileMenu) { - burgerBtn.addEventListener('click', () => { - const isOpen = mobileMenu.classList.toggle('is-open'); - burgerBtn.textContent = isOpen ? '✕' : '☰'; - document.body.classList.toggle('no-scroll', isOpen); - }); + function openMenu() { + mobileMenu.classList.add('is-open'); + overlay.classList.add('is-visible'); + document.body.classList.add('no-scroll'); + } + + function closeMenu() { + mobileMenu.classList.remove('is-open'); + overlay.classList.remove('is-visible'); + document.body.classList.remove('no-scroll'); + } + + if(burgerBtn && mobileMenu && overlay && closeBtn) { + burgerBtn.addEventListener('click', openMenu); + closeBtn.addEventListener('click', closeMenu); + // Fermer le menu si on clique en dehors (sur l'overlay sombre) + overlay.addEventListener('click', closeMenu); } }); diff --git a/login.php b/login.php index 42235c6..05473e3 100644 --- a/login.php +++ b/login.php @@ -45,11 +45,11 @@ require __DIR__ . '/header.php';
- - - - \ No newline at end of file