La Raffinerie
Deux établissements, une marque : le site devait servir les deux sans en diluer aucun.
- Année
- 2026
- Conception
- 4 semaines
- Stack
- React · Vite · Tailwind · Framer Motion · Vercel
- Design
- Développement
- SEO local multi-site
- Rédaction
Version de démonstration mise en ligne par Kayzen Web sur une adresse Vercel ; le domaine définitif appartient au client.
- établissements, un seul domaine
- 2
- performance Lighthouse
- 95/100
- accessibilité Lighthouse
- 100/100
Ce qu'il fallait résoudre.
Le contexte
La Raffinerie est un bar à bières artisanales, tapas et cocktails, avec deux adresses lyonnaises : Saxe (Lyon 3) et Vaise (Lyon 9).
La contrainte
Deux établissements posent un problème classique de référencement local : soit on crée deux sites et on divise l'autorité du domaine, soit on n'en fait qu'un et l'on devient invisible sur les requêtes de quartier. Ajouté à cela, une carte de bières qui tourne en permanence et un public qui ne sait pas toujours quoi choisir.
La réponse
Un domaine unique, une page dédiée par établissement, chacune avec sa fiche complète et son balisage propre. La carte des bières devient un guide de dégustation : chaque bière porte son style, son amertume, son degré et un accord tapas suggéré. On ne liste pas, on conseille.
Les scores relevés à la livraison.
Scores Lighthouse du site en production. Nous les publions tels quels : quand l'un d'eux est bas, sa cause et son plan de correction sont écrits plus bas plutôt que passés sous silence.
Chaque parti pris, et sa raison.
Un guide plutôt qu'une liste
Filtres par style et par amertume, accord tapas suggéré pour chaque bière. Le client qui hésite entre quarante références est un client qui commande la même chose que d'habitude — ou qui ne commande pas.
Chaque adresse a sa personnalité
Photos, ambiance et horaires propres à Saxe et à Vaise, sur une base graphique commune. Deux pages jumelles auraient été perçues comme du remplissage par le visiteur comme par Google.
Mouvement au service de la matière
Les animations d'entrée soulignent la texture — mousse, cuivre, ardoise. Elles s'effacent totalement si l'utilisateur a demandé un mouvement réduit.
Palette du projet
Ardoise
#22262B
Fond principal
Cuivre
#C0763C
Action, accents
Mousse
#EFE6D4
Texte, surfaces claires
Houblon
#6C7A3F
Étiquettes de style
Système typographique
Titrage
Bebas Neue
Texte courant
Inter 400
Une capitale condensée pour les titres — registre brasserie artisanale — contrebalancée par une sans-serif très lisible sur les fiches de dégustation.
Ce qu'il y a sous le capot.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
La carte en données, pas en HTML
Bières et tapas vivent dans un fichier de données typé. Ajouter une référence ne demande ni de toucher au balisage, ni de risquer de casser la mise en page.
Animations mesurées
Framer Motion n'est chargé que par les pages qui animent réellement. Les pages d'information (accès, horaires) n'en téléchargent pas une ligne.
Comment le site se rend trouvable.
Deux fiches LocalBusiness distinctes
Chaque établissement porte son propre nœud avec adresse, coordonnées géographiques et horaires. Un seul bloc pour deux adresses interdit à Google de rattacher correctement les deux fiches.
Requêtes de quartier
« Bar à bières Saxe », « bar Vaise Lyon 9 » plutôt que « bar Lyon ». La page de quartier gagne sur des expressions que la page de marque ne peut pas viser.
Contenu de dégustation indexable
Les fiches de bières répondent à des recherches réelles (« bière IPA amère Lyon », « accord tapas bière ambrée ») et amènent un trafic de découverte que l'adresse seule ne capte pas.
Utilisable par tout le monde.
Depuis juin 2025, l'European Accessibility Act impose l'accessibilité numérique à une large part des services en ligne. Nous la traitons à la conception, pas en rattrapage.
100/100 avec des filtres interactifs
Les filtres sont des boutons natifs avec état pressé annoncé, et le nombre de résultats est communiqué dans une région live après chaque changement.
Ce qui a été livré.
- Accueil
- Saxe (Lyon 3) — fiche complète
- Vaise (Lyon 9) — fiche complète
- Guide des bières
- Tapas et cocktails
- Contact
Le déroulé du projet.
Stratégie multi-adresse
Arbitrage un domaine / deux pages, balisage par établissement.
Contenu de dégustation
Styles, amertume, accords : la carte devient un guide.
Design
Base commune, personnalité par adresse.
Développement
Données typées, animations chargées à la demande.
Ce qu'on nous demande souvent.
D'autres réalisations
Conformité RGPD & SaaSKonsent by Kayzen
Un éditeur de bandeau qui audite les bandeaux est juge et partie : l'indépendance était le produit.
Cybersécurité offensive & SaaSSentinel by Kayzen
Vendre un produit de sécurité à des ingénieurs : chaque affirmation devait être démontrable.
Data & Service météoMétéo Climat France
358 pages indexables, une carte animée sur 72 échéances — et pas une seule ligne de framework.
Le même niveau d'exigence, pour votre site.
Audit gratuit de votre site actuel, devis sous 24 h et un raisonnement écrit — comme celui que vous venez de lire. Paiement en trois fois sans frais, aides locales vérifiées avant signature.