# Lasserre Distribution — site refondu (V7)

Site statique, multi-pages, prêt à déployer. Reprise de la maquette V6 validée :
direction éditoriale, palette navy / ivoire / doré, typographie serif (Cormorant Garamond) + sans (Inter).

## Contenu du dossier

```
lasserre-distribution/
├── index.html        Page d'accueil (hero, marchand, régions, maisons, cave BCB, visites, formulaire)
├── maisons.html      Les maisons, regroupées par région
├── regions.html      Les régions (cartes) + Italie / Espagne
├── cave.html         Bordeaux City Bond (stats + conservation)
├── visites.html      Visites & dégustations
├── carnet.html       Le carnet (journal / blog)
├── parcours.html     Mon parcours (à propos)
├── contact.html      Contact + formulaire message
├── css/styles.css    Design system complet (variables, responsive)
└── js/main.js        Menu mobile, pills, validation formulaire, animations
```

## Voir le site

Double-cliquez sur `index.html` : il s'ouvre dans le navigateur. Tout fonctionne en local,
aucune installation requise. (Les polices Google Fonts se chargent via internet ; sans connexion,
des polices de secours élégantes prennent le relais.)

## Mettre en ligne

Site 100 % statique → hébergement simple, rapide, sécurisé (HTTPS natif, pas de WordPress à maintenir) :

- **Netlify** ou **Vercel** : glissez-déposez le dossier, c'est en ligne en 30 secondes (offre gratuite suffisante).
- **OVH / Infomaniak / o2switch** (hébergeurs européens, RGPD) : déposez les fichiers via FTP à la racine `www/`.
- Pensez à brancher le domaine `lasserredistribution.com` et à forcer le HTTPS.

## Ce qu'il reste à remplacer (placeholders élégants en attendant)

1. **Photo hero** — pour l'instant un dégradé + vignoble en SVG, avec le filtre tons chauds validé déjà appliqué.
   Pour mettre la vraie photo : dans `index.html`, repérez le bloc `.hero__bg` et définissez
   `style="--hero-photo: url('assets/hero.jpg')"` (créez un dossier `assets/` et déposez-y l'image).
   Le filtre CSS validé est conservé tel quel.
2. **Portrait d'Antoine** — cadre placeholder sur l'accueil et la page Parcours (séance photo à venir).
3. **Photos cave BCB & salle de dégustation** — cadres placeholders sur cave.html et visites.html.
4. **Liste complète des maisons** (20–60 noms) — maisons.html, à classer par région.
5. **Bio détaillée du parcours** — parcours.html.
6. **Articles du carnet** — carnet.html (3 entrées « à venir » en attendant).
7. **Coordonnées exactes** — email, numéro WhatsApp, adresse (contact.html + footer).

Tous les emplacements à compléter sont signalés à l'écran par une petite étiquette « Placeholder ».

## Formulaire

Les deux formulaires (espace privilégié + contact) sont fonctionnels côté affichage mais **sans back-end** :
à la soumission, un message de confirmation s'affiche, rien n'est envoyé. Pour recevoir réellement les
demandes, branchez un service comme **Formspree**, **Netlify Forms** ou **Tally** (quelques minutes de config).
La segmentation par profil (Particulier / Caviste / Restaurateur / Distributeur / Hôtel / Autre) est déjà câblée.

## Notes techniques

- HTTPS sans mixed content, aucune dépendance lourde, mobile optimisé (menu hamburger, grilles fluides).
- Skype définitivement remplacé par WhatsApp partout.
- Accessibilité : navigation au clavier, `aria-*` sur le menu et les pills, contrastes respectés.
- Animations désactivées si l'utilisateur préfère réduire les mouvements (`prefers-reduced-motion`).

Document généré le 16 juin 2026.