Nav mobile v2 : le dropdown 480px devient un panneau plein écran fixed
Standard KA 2026-08-25 : .mobile-menu passe de position:absolute top:100% (max-height 480px) à position:fixed inset:0 — menu visible peu importe la position de scroll. Rang du header (marque + burger→✕) maintenu au-dessus du panneau, verrou de scroll CSS pur via html:has(.mobile-menu.open). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +13 −10
modified
frontend/src/styles.css
+13 −10
@@ -772,16 +772,20 @@ html, body { overflow-x: clip; } | ||
| 772 | 772 | .menu-btn.open span:nth-child(2) { opacity: 0; } |
| 773 | 773 | .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } |
| 774 | 774 | |
| 775 | +/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu | |
| 776 | + importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */ | |
| 775 | 777 | .mobile-menu { |
| 776 | − display: none; position: absolute; left: 0; right: 0; top: 100%; | |
| 777 | − background: var(--white); border-bottom: 1px solid var(--line); | |
| 778 | − box-shadow: 0 18px 30px rgba(20, 24, 20, 0.14); | |
| 779 | − padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); | |
| 780 | − max-height: 0; overflow: hidden; opacity: 0; | |
| 781 | − transition: max-height 0.3s ease, opacity 0.22s ease; | |
| 782 | −} | |
| 783 | −.mobile-menu { z-index: var(--z-modal, 900); } | |
| 784 | −.mobile-menu.open { max-height: 480px; opacity: 1; } | |
| 778 | + display: none; position: fixed; inset: 0; | |
| 779 | + background: var(--paper); | |
| 780 | + padding: 76px 16px calc(24px + env(safe-area-inset-bottom)); | |
| 781 | + overflow-y: auto; overscroll-behavior: contain; | |
| 782 | +} | |
| 783 | +.mobile-menu.open { display: block; animation: mm-in 0.16s ease; } | |
| 784 | +@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| 785 | +/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | |
| 786 | +.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; } | |
| 787 | +/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ | |
| 788 | +html:has(.mobile-menu.open) { overflow: hidden; } | |
| 785 | 789 | /* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau |
| 786 | 790 | modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */ |
| 787 | 791 | .header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); } |
@@ -811,7 +815,6 @@ html, body { overflow-x: clip; } | ||
| 811 | 815 | @media (max-width: 760px) { |
| 812 | 816 | .menu-btn { display: flex; } |
| 813 | 817 | .nav { display: none; } |
| 814 | − .mobile-menu { display: block; } | |
| 815 | 818 | } |
| 816 | 819 | |
| 817 | 820 | /* --- Bandeau de consentement (témoins) ------------------------------------- */ |
| 818 | 821 | |