standard header/menu KA 2026-08-22 : header opaque (plus de blur), échelle z --z-*, badge « Un service Groupe KA » dans le header et le menu mobile
5 changed files +24 −8
modified
app/src/app/globals.css
+1 −1
@@ -69,7 +69,7 @@ body::before { | ||
| 69 | 69 | } |
| 70 | 70 | /* au-dessus du grain (::before positionné, premier dans l'ordre de peinture) ; |
| 71 | 71 | surtout PAS de z-index ici : une règle hors @layer écraserait les utilitaires |
| 72 | − Tailwind (z-[1100] du header, z-[3000] du menu) */ | |
| 72 | + Tailwind (échelle --z-* : header 500, menu 900) */ | |
| 73 | 73 | body > * { position: relative; } |
| 74 | 74 | |
| 75 | 75 | h1, h2, h3, h4 { |
modified
app/src/app/layout.tsx
+10 −2
@@ -83,8 +83,8 @@ export default function RootLayout({ children }: LayoutProps<"/">) { | ||
| 83 | 83 | dangerouslySetInnerHTML={{ __html: JSON.stringify(JSON_LD) }} |
| 84 | 84 | /> |
| 85 | 85 | <LangProvider> |
| 86 | − {/* fond opaque sur mobile (backdrop-filter casse les enfants fixed sur WebKit) */} | |
| 87 | − <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"> | |
| 86 | + {/* header opaque (standard header/menu KA 2026-08-22) */} | |
| 87 | + <header className="sticky top-0 z-[var(--z-header,500)] border-b-2 border-ink bg-paper"> | |
| 88 | 88 | <div className="relative mx-auto flex h-16 max-w-6xl items-center gap-5 px-4 sm:px-6"> |
| 89 | 89 | <Link |
| 90 | 90 | href="/" |
@@ -95,6 +95,14 @@ export default function RootLayout({ children }: LayoutProps<"/">) { | ||
| 95 | 95 | Plex |
| 96 | 96 | </span> |
| 97 | 97 | </Link> |
| 98 | + <a | |
| 99 | + href="https://www.groupe-ka.com" | |
| 100 | + target="_blank" | |
| 101 | + rel="noopener noreferrer" | |
| 102 | + className="vp-mono hidden items-center gap-1 rounded-full border-[1.5px] border-ink bg-paper px-3 py-1 text-[10px] font-bold uppercase tracking-[0.08em] text-ink transition-colors hover:bg-ink hover:text-lime xl:inline-flex" | |
| 103 | + > | |
| 104 | + Un service Groupe KA | |
| 105 | + </a> | |
| 98 | 106 | <div className="ml-auto flex items-center gap-2"> |
| 99 | 107 | <HeaderNav /> |
| 100 | 108 | <LangToggle /> |
modified
app/src/components/CookieConsent.tsx
+2 −2
@@ -148,7 +148,7 @@ export default function CookieConsent() { | ||
| 148 | 148 | return ( |
| 149 | 149 | <> |
| 150 | 150 | {showBanner && ( |
| 151 | − <div className="fixed inset-x-0 bottom-0 z-[1300] p-3 sm:p-5"> | |
| 151 | + <div className="fixed inset-x-0 bottom-0 z-[var(--z-toast,950)] p-3 sm:p-5"> | |
| 152 | 152 | <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)]"> |
| 153 | 153 | <p className="klabel !text-lime">🍪 {t.prefsTitle}</p> |
| 154 | 154 | <p className="mt-2 text-[13.5px] leading-relaxed text-[rgba(245,243,238,0.85)]"> |
@@ -180,7 +180,7 @@ export default function CookieConsent() { | ||
| 180 | 180 | |
| 181 | 181 | {panel && ( |
| 182 | 182 | <div |
| 183 | − 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" | |
| 183 | + 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" | |
| 184 | 184 | onClick={() => setPanel(false)} |
| 185 | 185 | > |
| 186 | 186 | <div |
modified
app/src/components/HeaderNav.tsx
+9 −1
@@ -78,7 +78,7 @@ export default function HeaderNav() { | ||
| 78 | 78 | |
| 79 | 79 | {/* panneau plein écran — sibling du checkbox, affiché via peer-checked */} |
| 80 | 80 | <div |
| 81 | − className="fixed inset-0 z-[3000] hidden flex-col overflow-y-auto peer-checked:flex" | |
| 81 | + className="fixed inset-0 z-[var(--z-modal,900)] hidden flex-col overflow-y-auto peer-checked:flex" | |
| 82 | 82 | style={{ background: "var(--paper)" }} |
| 83 | 83 | role="dialog" |
| 84 | 84 | aria-modal="true" |
@@ -144,6 +144,14 @@ export default function HeaderNav() { | ||
| 144 | 144 | <Link href="/confidentialite"> |
| 145 | 145 | {fr ? "Confidentialité" : "Privacy"} |
| 146 | 146 | </Link> |
| 147 | + <a | |
| 148 | + href="https://www.groupe-ka.com" | |
| 149 | + target="_blank" | |
| 150 | + rel="noopener noreferrer" | |
| 151 | + className="underline underline-offset-4" | |
| 152 | + > | |
| 153 | + Un service Groupe KA | |
| 154 | + </a> | |
| 147 | 155 | <span>contact@spboucher.ai</span> |
| 148 | 156 | </div> |
| 149 | 157 | </div> |
modified
app/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 | |