# Site de restaurant gastronomique animé avec réservations

Cendre — un site de table gastronomique avec menu dégustation épinglé au défilement, illustrations d’assiettes générées, galerie plein écran et réservation en cinq étapes, en environ 33 Ko de code compressé, sans bibliothèque d’animation.

> hospitality · 2026-10-06T21:40:06.181Z

Project overview

Cendre est une table de dégustation fictive de vingt-deux places, conçue comme vitrine pour les restaurants gastronomiques et les concepts de chef. Le site raconte l’histoire comme un repas : une ouverture calme, un manifeste qui s’illumine à la lecture, puis les neuf services un à un au fil du défilement — et se termine par une réservation qui gère expériences, services, accords et restrictions alimentaires.

[Ouvrir la démo Cendre en ligne](/demos/cendre/index.html)

Client context

  - Industry: Restauration / gastronomie

  - Client size / environment: Table de dégustation de chef — build vitrine, marque fictive

  - Primary stakeholders: Chef-propriétaire, service en salle, clients qui planifient une soirée spéciale

Challenge

On attend d’un site gastronomique qu’il ressemble à la salle — cinématographique, lent, porté par l’image — mais beaucoup deviennent des pages lourdes de constructeur de site, avec un menu PDF et un module de réservation sans lien avec la marque. L’objectif : des animations de niveau primé (révélation du texte, parallaxe, menu horizontal épinglé, cartes empilées, bandeau défilant, menu plein écran) qui restent rapides, fonctionnent sur mobile, respectent la réduction des animations et passent une CSP stricte.

Scope delivered

  - Menu dégustation épinglé : les neuf services défilent à l’horizontale pendant que la section reste fixe, avec compteur en direct ; devient un carrousel tactile sur mobile

  - Neuf illustrations d’assiettes générées par le code (SVG) — aucune photo de stock pour le menu, rien à licencier

  - Animations sans bibliothèque : écran de chargement, révélation du texte mot à mot, manifeste éclairé au défilement, parallaxe, bandeau sensible à la vitesse, cartes empilées, braises animées, curseur personnalisé et boutons magnétiques

  - Accords et bar en onglets accessibles au clavier, avec un aperçu d’image qui suit le pointeur

  - Menu plein écran et galerie en visionneuse : flèches du clavier, glissement, piège de focus et retour du focus

  - Réservation en cinq étapes : expérience, convives et calendrier (jours fermés, fenêtre de 30 jours), services avec liste d’attente, coordonnées et restrictions, récapitulatif avec TPS + TVD du Manitoba et fichier .ics

Before / after

  - Avant: Un site gastronomique typique : un gabarit de constructeur lent, le menu en PDF et un module de réservation tiers au design de quelqu’un d’autre.

  - Après: Une seule page rapide qui ressemble à la salle. Le menu se déploie service par service au défilement, et le client choisit expérience, heure, accords et restrictions en cinq étapes. Environ 33 Ko de HTML, CSS et JavaScript compressés, 11 requêtes au premier chargement et aucune requête tierce.

Mobile — accueil à 390 px et menu plein écran
Bureau — écran d’ouverture avec braises animées et photo du foyer en arche

Visual proof placeholders

  - 52 tests navigateur automatisés — chargement, progression du menu épinglé, manifeste, bandeau, onglets et clavier, aperçu au survol, cartes empilées, menu plein écran, visionneuse et focus, réservation et totaux, limites du comptoir, infolettre, mobile et animations réduites

  - Aucun débordement horizontal à 390 px ; zéro erreur JavaScript sur bureau, mobile et animations réduites

  - Fonctionne sous la même CSP stricte que ce site — aucun script ni style en ligne, polices auto-hébergées, aucune bibliothèque d’animation

Delivery timeline

  - Phase 1 : Concept, direction artistique, typographie et couleurs, choix des photos et système d’illustrations

  - Phase 2 : Système d’animation, menu dégustation épinglé, onglets, menu plein écran, galerie et visionneuse

  - Phase 3 : Logique de réservation, mobile et animations réduites, accessibilité, tests automatisés et captures

Outcome

Un site de restaurant avec la finition qu’on attend des studios primés, construit en HTML, CSS et JavaScript simples dont le restaurant est propriétaire. Les étapes de réservation sont prêtes à être reliées à un système de réservation, à un fournisseur de paiement pour l’empreinte de carte ou à un simple courriel vers l’accueil.

Technology stack

HTML5, CSS Grid et positionnement sticky, JavaScript natif (IntersectionObserver, requestAnimationFrame, Canvas 2D, SVG généré), polices auto-hébergées, images WebP, tests navigateur automatisés Playwright.

Visual evidence

Menu dégustation — neuf services, chacun avec une illustration générée par le code
Galerie — grille éditoriale ; chaque image s’ouvre dans une visionneuse accessible
Accords et bar — onglets avec une carte d’aperçu qui suit le pointeur
Réservation — récapitulatif avec accords, restrictions, taxes et empreinte de carte
Menu plein écran — grands liens serif avec aperçu de chaque section
Nous trouver — horaires de la semaine, jour courant en évidence et plan illustré

---
Source page: https://amensecurity.ca/fr/projects/fine-dining-restaurant-website
Markdown version for AI agents · Amen Security
Email: info@amensecurity.ca
Phone: +1 (204) 514-3536