Refonte 2026 · Maquette HTML cliquable

Six écrans, un système.

Maquette de refonte du site Les Potes aux Vins. Trois palettes commutables (lie de vin, bordeaux, prune), tokens et composants partagés, photos et logo recolorisables. Une base prête à porter sur le sous-thème Olivero du site Drupal CMS 11.

Public

Page d'accueil

Hero éditorial, news strip, intro Bruno, programme des deux clubs, coups de cœur, CTA animation œnologique.

Ouvrir

Public

Fiche dégustation

Soirée Loire blanche du 17 avril 2026 : compte-rendu éditorial, six vins notés sur 20, galerie photos, lien vers la prochaine date.

Ouvrir

Public · Commercial

Animation œnologique

Présentation de Bruno, quatre formats de prestations, processus en quatre étapes, témoignages, formulaire de devis et FAQ.

Ouvrir

Membre

Catalogue fournisseurs

Six fournisseurs (Reuilly, Vouvray, Bellevoye, Châteauneuf, Champagne, Sancerre), filtres par type et statut, jauges franco de port en direct.

Ouvrir

Membre

Fiche fournisseur

Domaine Beurdin (Reuilly) en exemple : présentation, panneau commande sticky avec jauge franco, liste des vins avec quantités, commandes des autres membres.

Ouvrir

Membre

Fiche vin

Quincy Vieilles Vignes 2023 (Domaine Trotereau) : identité, dégustation œil/nez/bouche, service et accord mets, avis du club, vins similaires.

Ouvrir

Comment c'est organisé

Les six écrans partagent css/tokens.css (variables, palettes, typo, photos, logo) et css/components.css (header, footer, boutons, formulaires, breadcrumbs, news strip). Les styles spécifiques à chaque page sont conservés dans une balise <style> en tête de fichier.

Header, footer et palette switcher sont injectés via css/partials.js avec des balises marqueurs <div data-pav-header></div>, <div data-pav-footer></div>, <div data-pav-switcher></div>. À remplacer côté Drupal par des includes Twig.

Voir README.md pour le guide d'intégration côté pav_theme.

Palette mémorisée Le choix de palette persiste entre les pages via localStorage. Réinitialiser : DevTools → Application → Local storage.

Accessibilité Tous les contrastes validés AA, focus visibles, prefers-reduced-motion respecté, structure sémantique.

Photos 11 photos Unsplash optimisées dans /photos. À remplacer par les vraies prises de vue du club lors du déploiement.