standard header/menu KA 2026-08-22 : header opaque (plus de blur), échelle z --z-* (header 500, menu 900, dropdown 700, cookies 950)
5 changed files +8 −8
modified
src/app/globals.css
+1 −1
@@ -88,7 +88,7 @@ body::before { | ||
| 88 | 88 | } |
| 89 | 89 | /* au-dessus du grain (::before positionné, premier dans l'ordre de peinture) ; |
| 90 | 90 | surtout PAS de z-index ici : une règle hors @layer écraserait les utilitaires |
| 91 | − Tailwind (z-[1100] du header, z-[3000] du menu) */ | |
| 91 | + Tailwind (échelle --z-* de tokens.css : header 500, menu 900) */ | |
| 92 | 92 | body > * { position: relative; } |
| 93 | 93 | |
| 94 | 94 | h1, h2, h3, h4 { |
modified
src/app/layout.tsx
+2 −2
@@ -111,8 +111,8 @@ export default function RootLayout({ children }: LayoutProps<"/">) { | ||
| 111 | 111 | dangerouslySetInnerHTML={{ __html: JSON.stringify(ORG_JSONLD) }} |
| 112 | 112 | /> |
| 113 | 113 | <LangProvider> |
| 114 | − {/* fond opaque sur mobile (backdrop-filter casse les enfants fixed sur WebKit) */} | |
| 115 | − <header className="sticky top-0 z-[1100] border-b-2 border-ink bg-paper md:bg-[rgba(245,243,238,0.88)] md:backdrop-blur-xl"> | |
| 114 | + {/* header opaque (standard header/menu KA 2026-08-22) */} | |
| 115 | + <header className="sticky top-0 z-[var(--z-header,500)] border-b-2 border-ink bg-paper"> | |
| 116 | 116 | <div className="relative mx-auto flex h-16 max-w-6xl items-center gap-5 px-4 sm:px-6"> |
| 117 | 117 | <Link |
| 118 | 118 | href="/" |
modified
src/components/CookieConsent.tsx
+2 −2
@@ -163,7 +163,7 @@ export default function CookieConsent() { | ||
| 163 | 163 | return ( |
| 164 | 164 | <> |
| 165 | 165 | {showBanner && ( |
| 166 | − <div className="fixed inset-x-0 bottom-0 z-[1300] p-3 pb-[calc(12px+env(safe-area-inset-bottom))] sm:p-5 sm:pb-[calc(20px+env(safe-area-inset-bottom))]"> | |
| 166 | + <div className="fixed inset-x-0 bottom-0 z-[var(--z-toast,950)] p-3 pb-[calc(12px+env(safe-area-inset-bottom))] sm:p-5 sm:pb-[calc(20px+env(safe-area-inset-bottom))]"> | |
| 167 | 167 | <div className="mx-auto max-w-3xl rounded-[10px] border-[1.5px] border-ink bg-ink p-5 text-paper shadow-[0_-8px_32px_rgba(16,18,16,0.35),6px_6px_0_rgba(20,24,20,0.3)]"> |
| 168 | 168 | <p className="klabel !text-lime">🍪 {t.prefsTitle}</p> |
| 169 | 169 | <p className="mt-2 text-[13.5px] leading-relaxed text-[rgba(245,243,238,0.85)]"> |
@@ -195,7 +195,7 @@ export default function CookieConsent() { | ||
| 195 | 195 | |
| 196 | 196 | {panel && ( |
| 197 | 197 | <div |
| 198 | − className="fixed inset-0 z-[1400] flex items-end justify-center bg-[rgba(16,18,16,0.55)] p-3 backdrop-blur-[2px] sm:items-center" | |
| 198 | + className="fixed inset-0 z-[var(--z-toast,950)] flex items-end justify-center bg-[rgba(16,18,16,0.55)] p-3 backdrop-blur-[2px] sm:items-center" | |
| 199 | 199 | onClick={() => setPanel(false)} |
| 200 | 200 | > |
| 201 | 201 | <div |
modified
src/components/HeaderNav.tsx
+1 −1
@@ -80,7 +80,7 @@ export default function HeaderNav() { | ||
| 80 | 80 | |
| 81 | 81 | {/* panneau plein écran — sibling du checkbox, affiché via peer-checked */} |
| 82 | 82 | <div |
| 83 | − className="fixed inset-0 z-[3000] hidden flex-col overflow-y-auto peer-checked:flex" | |
| 83 | + className="fixed inset-0 z-[var(--z-modal,900)] hidden flex-col overflow-y-auto peer-checked:flex" | |
| 84 | 84 | style={{ background: "var(--paper)" }} |
| 85 | 85 | role="dialog" |
| 86 | 86 | aria-modal="true" |
modified
src/components/SearchBox.tsx
+2 −2
@@ -57,7 +57,7 @@ export default function SearchBox({ | ||
| 57 | 57 | aria-label={placeholder ?? t("searchPlaceholder")} |
| 58 | 58 | /> |
| 59 | 59 | {open && sugg.length > 0 && ( |
| 60 | − <ul className="absolute z-[1200] mt-2 w-full overflow-hidden rounded-[10px] border-[1.5px] border-ink bg-surface shadow-[6px_6px_0_rgba(20,24,20,0.85)]"> | |
| 60 | + <ul className="absolute z-[var(--z-dropdown,700)] mt-2 w-full overflow-hidden rounded-[10px] border-[1.5px] border-ink bg-surface shadow-[6px_6px_0_rgba(20,24,20,0.85)]"> | |
| 61 | 61 | {sugg.map((s) => ( |
| 62 | 62 | <li key={s.id} className="border-b border-[rgba(20,24,20,0.1)] last:border-0"> |
| 63 | 63 | <button |
@@ -86,7 +86,7 @@ export default function SearchBox({ | ||
| 86 | 86 | </ul> |
| 87 | 87 | )} |
| 88 | 88 | {open && searched && sugg.length === 0 && q.trim().length >= 3 && ( |
| 89 | − <div className="vp-mono absolute z-[1200] mt-2 w-full rounded-[10px] border-[1.5px] border-ink bg-surface px-4 py-3 text-[12px] uppercase tracking-[0.04em] text-ink-2 shadow-[6px_6px_0_rgba(20,24,20,0.85)]"> | |
| 89 | + <div className="vp-mono absolute z-[var(--z-dropdown,700)] mt-2 w-full rounded-[10px] border-[1.5px] border-ink bg-surface px-4 py-3 text-[12px] uppercase tracking-[0.04em] text-ink-2 shadow-[6px_6px_0_rgba(20,24,20,0.85)]"> | |
| 90 | 90 | {t("searchNoResult")} |
| 91 | 91 | </div> |
| 92 | 92 | )} |
| 93 | 93 | |