§4 — featured case study · Juillet 2026 · zéro→prod en 2 sessions

Bella Notte · Cinema Napoletano

« Trattoria napolitaine fictive, dal 1962 — expérience one-page cinématique. Livrée zéro→prod en sessions — images générées en direction photo unifiée, LCP observé 191 ms, 3 critiques a11y corrigés et vérifiés runtime. Un site demo qui sert de preuve : direction cinématique sombre ET conformité AA ne s'excluent pas. »

statut · livré — demo portfolio

§4.1

Tokens — Cinema Napoletano

« Apple product page × restaurant Michelin × campagne italienne de luxe. Lumière de bougie sur charcoal profond, or antique, matière — grain de film, papier. Le luxe se lit dans la retenue : beaucoup d'air, peu d'éléments, chaque animation gagnée. »

§4.1 — palette dark cinématique (tous neutres teintés chaud)
token CSS	valeur	rôle
--color-canvas	#1A1410	Charcoal chaud — canvas principal, jamais #000
--color-surface	#241C15	Elevated chaud — cards shadow-only
--color-burgundy	#4A0E1F	Deep burgundy — sections story/booking (surfaces uniquement, jamais texte)
--color-cream	#F5E6D3	Texte principal sur dark (12.9:1 AAA) + canvas sections papier menu
--color-accent	#C9A961	Or antique — ACCENT UNIQUE : CTA, prix, filets, lueurs (7.4:1 sur charcoal)
--color-accent-deep	#7E642F	Bronze vieilli — texte gold sur papier (AA 4.57:1, remplace #A8853F à 2.81:1)
--color-olive-light	#A9B47E	Tags ingrédients sur fonds sombres (7.60:1)
--color-text-muted	#9A8A75	Metadata — AA ≥ 4.56:1 sur les 4 canvases (remplace #8A7A64 post-audit)
--tricolore	#4E7A51 · #F5E6D3 · #9E3A3A	Filet 2px désaturé — usage unique footer + wordmark
--font-display	Playfair Display	Serif — italic actif sur les mots italiens, wordmark clamp(3.5rem, 12vw, 9rem)
--font-body	Geist	Sans body — substitution baseline de l’Inter demandé au brief (banni)

^†1Un seul accent — l'or antique #C9A961. Le tricolore italien existe mais désaturé et en usage unique (filet 2px footer + wordmark) : l'identité se joue sur la lumière, pas sur le folklore. Playfair Display italic porte les mots italiens (« dal 1962 », « la famiglia »).

§4.2

Images — procédural d’abord, génération par-dessus

photos générées en une direction photo unifiée — mais le site a d'abord été livré entièrement fonctionnel avec des assets procéduraux (compositions SVG déterministes par plat). La génération est du progressive enhancement, pas une dépendance.

§4.2 — 4 batches gpt_image_2 4K (Higgsfield MCP)
batch	images	détail
Hero salle	1	Lumière de bougie sur charcoal, vignette, base de l’og-image (dérivée, $0)
Plats menu	17	Direction photo unifiée — assiette, nappe, ombre portée, palette par catégorie
Story par époque	4	Grading temporel : sépia 1962 → Kodak 1987 → reportage 2011 → cinématique oggi
Salle booking	1	Ambiance réservation — cohérente hero, gold glow

^†223 images gpt_image_2 4K/high via Higgsfield MCP (~276 crédits). Le site a d’abord été livré avec des assets 100 % procéduraux (compositions SVG déterministes, $0, 0 requête externe) — les photos générées sont venues par-dessus, les SVG conservés en fallback. Ingestion par manifest jobIds + downscale ffmpeg 4K → 1280-1920px : 85 MB source → 4,1 MB servis.

§4.3

Architecture — one-page immersive

Deux routes seulement : la home one-page qui déroule l'expérience complète (hero → story → menu → commande → réservation → famiglia), et un dashboard propriétaire /admin en données générées, volontairement noindex. La densité est dans la profondeur de chaque section, pas dans le nombre de pages.

§4.3 — sections de l'expérience
section	type	notes
Hero	one-page	Wordmark massif ancré bas-gauche + méta colonne droite (asymétrie), candle glow radial animé, embers canvas 2D ~40 particules
Story	one-page	Chapitres 1962→oggi — pin GSAP ScrollTrigger + scroll horizontal, 4 photos gradées par époque
Menu	one-page	Section papier cream (inversion lumineuse), 17 plats en italien exact, chorégraphie scroll rotation 3D légère + parallax
Ordering	one-page	Cart drawer glass (backdrop-blur sur fixed uniquement), prix font-display gold jamais barrés
Booking	one-page	Réservation sur burgundy, photo salle, zéro countdown/urgence (dark pattern banni)
Famiglia	one-page	Équipe + tricolore filet unique footer
/admin	route	Owner dashboard démo (réservations, habitués, revenus données générées) — noindex + robots disallow
sitemap/robots	route	Hygiène SEO baseline — sitemap single-route, crawlers AI autorisés (GEO)

^†3Le fake 3D est assumé : perspective CSS + canvas 2D (~40 braises dorées) au lieu de Three.js. prefers-reduced-motion triple couche — grain statique, particles off, camera drift off, story pinnée dégradée en scroll vertical simple.

§4.4

Audit pré-livraison — a11y & LCP

« Un site cinématique sombre est un terrain à risque a11y : contrastes or-sur-noir flatteurs mais insuffisants, dialogs immersives qui avalent le focus, menu spectaculaire inatteignable au clavier. L'audit 7 passes + agent a11y a sorti 3 critiques — tous corrigés et vérifiés au runtime, pas seulement en statique. »

§4.4 — findings de l'audit 2026-07-18
finding	sévérité	fix
Nested-interactive — plats du menu inatteignables au clavier (bouton dans article cliquable)	critique	Restructuration : un seul élément interactif par plat, ordre Tab logique vérifié au clavier runtime
Dialogs (cart, booking) sans focus trap ni retour focus au déclencheur	critique	Hook réutilisable useDialogA11y — trap + Escape + restauration focus, vérifié runtime sur les 2 dialogs
Contrastes sous AA : gold #A8853F sur papier 2.81:1, muted #8A7A64, olive sur dark	critique	Recalibrage tokens : accent-deep #7E642F (4.57:1), text-muted #9A8A75 (≥ 4.56:1 sur 4 canvases), olive-light #A9B47E (7.60:1) — validés client
LCP 10,2 s observé — hero photo 4K derrière le chargement JS	majeur	Loader CSS-first : écran d’attente 100 % CSS peint immédiatement (LCP observé 191 ms), photo hero en fade-in derrière

^†4Le fix LCP est le pattern le plus réutilisable de la livraison : un loader 100 % CSS peint immédiatement (LCP observé ms, contre 10,2 s quand la photo hero 4K portait le LCP), la photo arrivant en fade-in derrière. Entré dans PATTERNS.md comme « loader CSS-first ».

§4.5

Décisions écartées

« Le brief demandait Inter, Three.js et des stock photos. Les trois ont été substitués — pas par caprice, mais parce que la baseline est un contrat : chaque substitution est documentée avec son équivalent livré. »

§4.5 — rejected by design
décision	raison
Inter comme police body (demandé explicitement par le brief)	Bannie baseline (signature AI-slop). Substitution Geist — même neutralité, mieux dessiné. Le brief est une direction, la baseline est un contrat.
Three.js / React Three Fiber (demandé par le brief pour la scène 3D)	Budget WebGL (≤ 200 kB) non justifié pour l’effet voulu. Canvas 2D embers ~40 particules + perspective CSS obtiennent le même ressenti pour ~0 kB de dépendance.
Stock photos pour les plats	Incohérence de lumière garantie sur 17 plats. Livraison procédurale SVG d’abord ($0, déterministe), puis 23 photos générées en une seule direction photo — SVG conservés en fallback.
Scaffold via /new-site	Projet né standalone hors repo. Recette alternative validée : historique poussé tel quel via git push HEAD:site/bella-notte — 7 commits préservés, pas de branche orpheline.
Rouge tomate saturé (cliché pizzeria)	Le tricolore reste désaturé et en usage unique (filet footer + wordmark). L’identité se joue sur charcoal/or/burgundy, pas sur le folklore.
Countdown / urgence sur le booking	Dark pattern — banni baseline (Code conso FR + RGPD). La rareté réelle n’a pas besoin de minuteur.

§4.6

Qualité finale mesurée

Livré zéro→prod en sessions, audité avant mise en ligne, métriques vérifiées sur le build statique et au runtime.

§4.6 — métriques mesurées 2026-07-18
métrique	cible	résultat	outil
LCP observé (hero)	< 2.5s	191 ms (était 10,2 s pré-loader)	Performance observer runtime
CLS	< 0.1	0.000	Lighthouse
TBT (Total Blocking Time)	< 200ms	6 ms	Lighthouse
Lighthouse Performance desktop	≥ 90	90	Lighthouse 12.8
Lighthouse Performance mobile	≥ 90	73 — artefact Lantern documenté (observé : CLS 0, TBT 6 ms)	Lighthouse 12.8 simulate
First Load JS (shared)	≤ 180 kB	87,5 kB	next build output
WCAG 2.1 AA — contrastes	0 fail	0 (3 familles de tokens recalibrées + validées client)	Agent a11y + vérif runtime
A11y critiques (clavier, focus)	0	0 (3 corrigés + vérifiés runtime)	design-review 7 passes + agent a11y
Routes statiques	100 %	100 % (output: export)	next.config

^†5Le 73 mobile est un artefact du simulateur Lantern (modélisation du loader CSS-first comme LCP tardif) — les métriques observées contredisent le score : CLS 0, TBT 6 ms, LCP réel 191 ms. Documenté plutôt que contourné : pas d’optimisation dirigée vers la métrique au détriment de l’expérience.