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 −9
modified
frontend/src/styles.css
+13 −9
@@ -742,15 +742,20 @@ button { font-family: inherit; } | ||
| 742 | 742 | .menu-btn.open span:nth-child(2) { opacity: 0; } |
| 743 | 743 | .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } |
| 744 | 744 | |
| 745 | +/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu | |
| 746 | + importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */ | |
| 745 | 747 | .mobile-menu { |
| 746 | − display: none; position: absolute; left: 0; right: 0; top: 100%; | |
| 747 | − background: var(--paper); border-bottom: 2px solid var(--ink); | |
| 748 | − box-shadow: 0 18px 30px rgba(20, 24, 20, 0.18); | |
| 749 | − padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); | |
| 750 | − max-height: 0; overflow: hidden; opacity: 0; | |
| 751 | − transition: max-height 0.3s ease, opacity 0.22s ease; | |
| 752 | −} | |
| 753 | −.mobile-menu.open { max-height: 480px; opacity: 1; } | |
| 748 | + display: none; position: fixed; inset: 0; | |
| 749 | + background: var(--paper); | |
| 750 | + padding: 76px 16px calc(24px + env(safe-area-inset-bottom)); | |
| 751 | + overflow-y: auto; overscroll-behavior: contain; | |
| 752 | +} | |
| 753 | +.mobile-menu.open { display: block; animation: mm-in 0.16s ease; } | |
| 754 | +@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| 755 | +/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | |
| 756 | +.header.menu-open .header-inner { position: relative; z-index: 60; } | |
| 757 | +/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ | |
| 758 | +html:has(.mobile-menu.open) { overflow: hidden; } | |
| 754 | 759 | .mm-link { |
| 755 | 760 | display: flex; align-items: center; gap: 12px; |
| 756 | 761 | padding: 15px 10px; min-height: 52px; |
@@ -778,7 +783,6 @@ button { font-family: inherit; } | ||
| 778 | 783 | @media (max-width: 880px) { |
| 779 | 784 | .menu-btn { display: flex; } |
| 780 | 785 | .nav { display: none; } |
| 781 | − .mobile-menu { display: block; } | |
| 782 | 786 | } |
| 783 | 787 | |
| 784 | 788 | /* --- Bandeau de consentement (témoins) ------------------------------------- */ |
| 785 | 789 | |