A request resolves through the Next.js 14 App Router and assembles the café's narrative sections into server-rendered HTML with no component JavaScript attached.

1. 1A request hits the Next.js 14 App Router, which resolves the root route in /app.
2. 2The route's layout applies the global Tailwind stylesheet and the three next/font font variables to the document root.
3. 3The page assembles the section components in narrative order — hero, Fait maison chaque jour, Nos incontournables, L'expérience, Ils parlent de nous, the Vieux-Port location block, and the Prêt à venir CTA with footer.
4. 4Every section except the map renders on the server as a React server component, so its markup ships as HTML with no accompanying component JavaScript.
5. 5Tailwind's compiled stylesheet and the self-hosted font files are served from the same origin, giving the browser a complete, styled first paint.
6. 6Only the client-boundary map component's bundle is requested for hydration.

The Vieux-Port location section defers all Leaflet work past the server render, mounting an interactive map as the page's single hydrated island.

1. 1The location section renders its container and heading on the server, reserving the map's dimensions so the surrounding layout does not shift.
2. 2The nested client component mounts in the browser after hydration, deferring all Leaflet work — Leaflet requires window and document at instantiation.
3. 3An effect constructs the Leaflet map instance, centred on the café's Vieux-Port coordinates at a walkable zoom level.
4. 4The tile layer attaches and raster tiles stream in over the reserved container, with a marker placed at the café.
5. 5Pan and zoom handlers let the reader situate the café relative to wherever they happen to be standing.
6. 6The effect's cleanup tears the map instance down on unmount, releasing Leaflet's listeners.

Three typefaces carrying three brand registers are self-hosted at build time and wired into Tailwind, eliminating third-party font requests and fallback layout shift.

1. 1Playfair Display, Inter and Caveat are declared as next/font imports, each pinned to the subsets and weights the design actually uses.
2. 2The build downloads and self-hosts the font files into the output, so no font request leaves the origin at runtime.
3. 3Each face is exposed as a CSS custom property on the root element and wired into tailwind.config.ts as a named font family.
4. 4Sections reference the families through Tailwind utilities — Playfair for display headings, Inter for body and UI, Caveat for handwritten accents.
5. 5Because the @font-face rules are inlined and the files are same-origin, text paints in its final face without a fallback swap or cumulative layout shift.