Premium UX (dual-mode adaptive, SSR-prestanda, editorial) [DONE] `PL-T158`
En bref
The premium UX layer of web/ — a dual-mode adaptive shell that switches between mobile drawer/bottom-nav and desktop full-nav driven by `useDeviceClass()`, an editorial typographic scale on Fraunces opsz and Inter ss01, the PetanqueImage AVIF/WebP/JPEG component with focal-point and priority hints, server-rendered TenantBrandStyle CSS variables with auto-derived contrast, a Lighthouse-budgeted SSR with hreflang, JSON-LD, sitemap and robots, and an axe-clean accessibility baseline on every public route.
Comment ça fonctionne
Premium UX is everything that makes a CMS site feel like a hand-crafted product instead of a template. A `useDeviceClass()` hook drives the shell: on mobile, `MobileNav` renders a sticky logo + hamburger + slide-in drawer + bottom-nav with ESC and backdrop close, body scroll-lock and 44px tap targets; on desktop, `SiteHeader` renders the full horizontal nav with backdrop-blur. The editorial display scale (`.display-hero`, `.display-section`, `.display-lede`, `.display-eyebrow`, `.overline`, `.pull-quote`) uses Fraunces opsz-tuned for headings and Inter with `font-feature-settings 'ss01','calt'` for body — the same type system as www.petanque.life. `<PetanqueImage>` uses `<picture>` with AVIF, WebP and JPEG sources, supports focal-point via `object-position`, sets `fetchpriority="high"` for LCP candidates and lazy-loads everything else with `decoding="async"`, and ships overlay variants (gradient-bottom, gradient-top, frost) for hero captions. `TenantBrandStyle` server-renders a scoped `<style>` injecting tenant CSS variables (primary, accent, foregrounds derived via YIQ for AA contrast, accent auto-derived ×1.18 if blank), validated as hex.
SSR performance includes a configured `metadataBase`, canonical and hreflang per `site.supported_languages` with x-default, preloaded brand fonts and inlined critical CSS — the Lighthouse budget is Performance ≥ 95, SEO 100, Accessibility ≥ 95. Per page the layout emits Organization/SportsOrganization + WebSite JSON-LD; `sitemap.ts` and `robots.ts` produce per-site sitemaps with hreflang alternates and respect a global `NEXT_PUBLIC_ALLOW_INDEXING` flag. Accessibility baseline: skip-to-content link, `<main id="main-content" tabIndex={-1}>`, `:focus-visible` rings, axe-clean on every public route.
The footer is a 4-column desktop / 1-column mobile editorial design with a language switcher that remembers via sessionStorage + cookie. A shared ThemeProvider syncs Tailwind dark mode via `HtmlThemeBridge` mirroring `colorScheme` to `documentElement.classList`.
Capacités clés
- Dual-mode adaptive shell — mobile drawer/bottom-nav vs. desktop full nav
- Editorial display scale on Fraunces opsz + Inter ss01
- PetanqueImage AVIF/WebP/JPEG with focal-point, priority and overlays
- Server-rendered TenantBrandStyle CSS variables with auto-derived accent and foreground
- SSR perf budget Performance ≥ 95 / SEO 100 / A11y ≥ 95 with hreflang and canonical
- Auto-emitted Organization + WebSite JSON-LD per tenant page
- Skip-to-content, focus-visible, axe-baseline accessibility on every route
En pratique
A visitor on a mid-range Android phone taps a link to klubb.petanque-life.com from a Facebook share. The page renders within 1.4s LCP because the AVIF hero is preloaded with `fetchpriority=high`, brand fonts are preloaded via `<link rel="preload">` and critical CSS is inlined. The mobile shell shows a sticky logo with a hamburger; tapping opens a drawer with full nav, ESC closes it, the bottom-nav stays anchored for the most-used routes.
The visitor switches language via the footer switcher; the choice persists in sessionStorage so all subsequent pages render in the chosen language. They open the same URL on their desktop the next morning — the shell flips to the full horizontal nav with backdrop-blur, the editorial typography breathes, and the experience feels native to both devices from the same codebase.
Fonctionnalités de ce sous-système
10| ID | Status | Fonctionnalités |
|---|---|---|
| F18.15.01 | Livré | Dual-mode adaptive shell (mobile drawer + bottom-nav / desktop full nav) ✅ PL-T158 |
| F18.15.02 | Livré | Editorial display-skala (Fraunces opsz, ss01) ✅ PL-T158 |
| F18.15.03 | Livré | PetanqueImage AVIF/WebP/JPEG + focal-point + lazy/priority ✅ PL-T158 |
| F18.15.04 | Livré | TenantBrandStyle SSR CSS-var-injektion + auto-accent ✅ PL-T158 |
| F18.15.05 | Livré | SSR-prestanda + canonical + hreflang + Lighthouse-budget ✅ PL-T158 |
| F18.15.06 | Livré | JSON-LD Organization + WebSite per tenant page ✅ PL-T158 |
| F18.15.07 | Livré | Sitemap + robots med tenant-noindex-respekt ✅ PL-T158 |
| F18.15.08 | Livré | Skip-to-content + axe-baseline + focus-visible ✅ PL-T158 |
| F18.15.09 | Livré | Editorial footer + språkväxlare med session-minne ✅ PL-T158 |
| F18.15.10 | Livré | Shared ThemeProvider + HtmlThemeBridge ✅ PL-T158 |