Header : vraiment collant au défilement
La règle hors @layer « body > * { position: relative } » (peinture au-dessus
du grain) écrasait l'utilitaire Tailwind sticky du header — les styles
non-layered gagnent sur @layer utilities. Exception explicite
« body > header { position: sticky; top: 0 } » : le menu du haut reste
visible en scrollant, mobile comme desktop.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +4 −0
modified
src/app/globals.css
+4 −0
@@ -105,6 +105,10 @@ body::before { | ||
| 105 | 105 | surtout PAS de z-index ici : une règle hors @layer écraserait les utilitaires |
| 106 | 106 | Tailwind (échelle --z-* de tokens.css : header 500, menu 900) */ |
| 107 | 107 | body > * { position: relative; } |
| 108 | +/* …sauf le header : cette règle hors @layer écrasait l'utilitaire Tailwind | |
| 109 | + `sticky` (les styles non-layered gagnent sur @layer utilities) — le menu | |
| 110 | + du haut disparaissait au défilement */ | |
| 111 | +body > header { position: sticky; top: 0; } | |
| 108 | 112 | |
| 109 | 113 | h1, h2, h3, h4 { |
| 110 | 114 | font-family: var(--font-space-grotesk), system-ui, sans-serif; |
| 111 | 115 | |