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 | surtout PAS de z-index ici : une règle hors @layer écraserait les utilitaires | 105 | surtout PAS de z-index ici : une règle hors @layer écraserait les utilitaires | ||
| 106 | Tailwind (échelle --z-* de tokens.css : header 500, menu 900) */ | 106 | Tailwind (échelle --z-* de tokens.css : header 500, menu 900) */ | ||
| 107 | body > * { position: relative; } | 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 | h1, h2, h3, h4 { | 113 | h1, h2, h3, h4 { | ||
| 110 | font-family: var(--font-space-grotesk), system-ui, sans-serif; | 114 | font-family: var(--font-space-grotesk), system-ui, sans-serif; | ||
| 111 | 115 | ||||