Le site qu’un domaine familial mérite : bilingue, en règle pour la vente d’alcool en ligne, et assez léger pour s’ouvrir depuis un lien Instagram.
Le point de départ : un domaine familial, deux cuvées de garde vendues en direct, un terroir qui a une histoire à raconter, et une présence en ligne qui n’en restitue rien. Tout a été produit d’un seul tenant et forme un seul objet : voix de marque, textes français et anglais, chaîne de traitement des images et de la vidéo, jeu complet de pages légales, et le front-end.
Un site de vin vit par la photographie : la vigne, les barriques, la bouteille sur la table. L’image plein cadre est tout l’argument qui justifie le prix de la bouteille. C’est aussi le moyen le plus rapide de rendre une page inutilisable sur un téléphone.
La plupart des visites arrivent d’un téléphone, depuis un lien Instagram, dans un moment de curiosité. Personne n’attend le chargement d’une image de fond, et personne ne survit à un menu de bureau rétréci à 375 px.
Vendre de l’alcool en ligne impose un contrôle de l’âge, une mention de consommation responsable et sept pages légales et de service. Les régulateurs et les prestataires de paiement les attendent ; un portail placé devant le contenu est aussi la première chose qui peut tuer la visite.
Le site est un seul défilement — accueil, vins, vinification, fiches techniques et film, galerie, accessoires de table, histoire du domaine — adossé à sept pages autonomes : histoire, contact, FAQ, livraison et retours, confidentialité, CGV, cookies. Chaque photographie et le film passent par une passe d’optimisation scriptée, avec des paramètres fixes par rôle d’image (fond, carte, portrait) : le poids total a été divisé par plus de dix, sans perte visible à l’écran. Le passage FR/EN est instantané (pas de rechargement, pas de position de défilement perdue) et le choix est mémorisé pour la visite suivante.
Le contrôle de l’âge est une vraie barrière, pas une décoration : il bloque le défilement jusqu’à confirmation, conserve la réponse et traite correctement un refus. Une conformité qu’on fait disparaître en scrollant n’est pas une conformité.
Un bandeau est un élément de décor ; un portail est un contrôle. Celui-ci interdit l’accès au contenu tant que le visiteur n’a pas confirmé, conserve la réponse pour ne pas interroger deux fois la même personne, et traite le refus par une sortie propre plutôt que par une impasse. C’est le mécanisme qu’un prestataire de paiement cherche au moment de l’ouverture du compte.
Un export réglé à la main est un exploit ponctuel qui ne tient pas dans la durée : la première photo de saison ajoutée après coup l’annule. Ici l’optimisation est un script aux réglages fixes par rôle d’image, avec livraison automatique en AVIF/WebP à la taille de l’écran du visiteur. Une nouvelle série de photos repasse par le même chemin en quelques minutes, avec une seule commande, et les réglages sont dans le dépôt.
Les apparitions de section et le parallaxe de la galerie tiennent en quelques dizaines de lignes de logique d’intersection ; une bibliothèque d’animation complète pèserait plus lourd que tout ce que l’optimisation des photos a fait gagner.
Les textes suivent une règle explicite : pas de remplissage, pas de slogan sans fait, uniquement du concret — la pente, le millésime, le cépage, le nombre de barriques. La règle s’applique avec la même sévérité au français et à l’anglais. Écrite, elle survit à la prochaine mise à jour de contenu ; gardée dans la tête de celui qui rédige, elle n’y survit pas.
Next.js App Router, React 19, TypeScript. Tout le texte — les sept pages légales, les libellés de formulaire et les légendes de photo compris — vit dans les catalogues de messages next-intl, à parité FR/EN. La langue choisie est conservée côté client et préservée d’une page à l’autre, donc elle ne se réinitialise jamais en cours de visite. Les formulaires de contact et la FAQ sont validés par React Hook Form et Zod, un schéma par formulaire.
Pages rendues côté serveur : premier affichage rapide et référencement correct sans travail supplémentaire. Les primitives d’interface — accordéon, dialogue, menu, onglets, infobulles — viennent de Radix UI, donc la navigation au clavier et la sémantique lecteur d’écran sont justes par construction et non rattrapées après coup. Le système de design est un jeu de tokens Tailwind v4 : toute la palette et l’échelle d’espacement se repointent sans toucher au code de mise en page. Le menu mobile est un plein écran dessiné séparément, avec sa propre animation et son verrou de défilement, pas une barre de bureau compressée. Il est couvert par un test Playwright joué avant chaque mise en ligne.
Les images sont servies en AVIF/WebP, dimensionnées pour l’écran du visiteur, et apparaissent au défilement via un composant dédié. Le film du domaine est privé de sa piste audio, compressé pour le web avec un profil à démarrage rapide et une image d’affiche, de sorte qu’il ne bloque jamais le reste de la page. Les paramètres d’optimisation sont versionnés dans le dépôt, sous forme de script, rôle d’image par rôle d’image. Résultat net : plus de dix fois moins lourd que les fichiers d’origine.
Sur ce projet, tout est parti de la même main : la voix de la marque et les textes français et anglais, la chaîne de traitement des photos et du film, les sept pages légales, et le front-end. C’est la version complète de ce que je fais — quand il n’y a rien à reprendre, il faut aussi décider ce que le site raconte.
Réponse sous 1 heure, chiffrage sous 24 h, en journée ouvrée. Un message n’engage à rien.