# Système de design : theme-default

**Nom du thème :** `theme-default`
**Bundle :** `cpcreation/viti-theme-bundle`
**Chemin du thème :** `themes/theme-default`
**Objectif :** thème vitrine premium par défaut pour les vignerons français utilisant Viti-core

## 1. Thème visuel et ambiance

Le thème doit évoquer un domaine indépendant de Champagne ou de vin déjà établi :

- un luxe discret plutôt qu'ostentatoire ;
- une approche éditoriale plutôt que promotionnelle ;
- un caractère artisanal plutôt qu'industriel ;
- une sensation chaleureuse, enracinée et rassurante plutôt que tendance ;
- une hospitalité premium et un récit de terroir avant le discours commercial.

Le ton émotionnel recherché est :

- calme ;
- cultivé ;
- raffiné ;
- intime ;
- crédible ;
- lumineux.

Les références visuelles sont :

- des paysages de vignes dans une lumière basse et chaude ;
- des matières de cave comme la pierre calcaire, le chêne, les étiquettes papier, le laiton et le verre ;
- une hospitalité française discrète ;
- des marques patrimoniales avec une retenue contemporaine.

À éviter :

- les codes visuels de startup SaaS ;
- les dégradés néon surdimensionnés ;
- les interfaces chargées en glassmorphism ;
- les blocs e-commerce génériques sans rythme éditorial ;
- les clichés du luxe noir trop orientés mode ;
- le kitsch rustique de maison de campagne.

## 2. Promesse de marque

Ce thème par défaut n'est pas conçu pour un catalogue de vins grand public. Il s'adresse à des domaines qui souhaitent présenter :

- un lieu ;
- une histoire de famille ou de maison ;
- un savoir-faire ;
- une gamme de cuvées sélectionnée ;
- des visites, des dégustations et un contact direct ;
- une expérience boutique qui reste élégante.

Chaque page doit renforcer quatre idées :

- la provenance ;
- le savoir-faire ;
- l'élégance ;
- la réassurance.

## 3. Palette de couleurs et rôles

### Palette principale

- **Bordeaux principal** `#5B1F2E` : couleur d'action principale, accent majeur, ancrage premium.
- **Or champagne** `#C8A96A` : accents fins, bordures, rehauts, séparateurs premium.
- **Ivoire doux de fond** `#FAF7F1` : fond principal des pages, pour éviter un blanc pur trop dur.
- **Surface pure** `#FFFFFF` : cartes, overlays, formulaires, surfaces produit.
- **Brun encre pour le texte** `#1F1A17` : couleur principale de lecture, titres, contraste fort.
- **Pierre chaude atténuée** `#7A6F68` : texte secondaire, métadonnées, contenus d'accompagnement.
- **Ligne or pâle** `#E6D8C3` : séparateurs, filets, structure subtile.

### Couleurs de soutien étendues

- **Accent olive vignoble** `#6D7752` : accent optionnel pour le terroir, la nature et les récits environnementaux.
- **Ombre de cave** `#2A211E` : overlay sombre pour les images immersives et la profondeur du footer.
- **Argile rosée** `#B88C83` : accent éditorial ponctuel pour les sections saisonnières ou liées à l'hospitalité.

### Règles d'usage

- Le bordeaux doit rester sélectif et valorisant.
- L'or est une couleur de finition, pas une couleur de remplissage pour de grandes surfaces.
- L'ivoire doit dominer les arrière-plans afin de garder un site lumineux et éditorial.
- N'utiliser des overlays sombres sur les photos que lorsque la lisibilité l'exige.
- Ne jamais créer une palette tapageuse et multicolore. Le thème doit rester discipliné.

## 4. Règles typographiques

### Rôles des polices

- **Titres :** `Playfair Display`
- **Texte courant :** `Inter`
- **Accent / citations / détails premium :** `Cormorant Garamond`

### Hiérarchie

- Les sections d'ouverture et titres de page doivent paraître éditoriaux, pas institutionnels.
- Les titres utilisent une voix serif à fort contraste avec une hauteur de ligne généreuse.
- Le texte courant reste propre, retenu et très lisible.
- Les petits libellés, métadonnées et éléments de navigation utilisent la famille sans serif.
- Les citations, signatures du domaine et rehauts raffinés peuvent utiliser la serif d'accent.

### Recommandations de style

- Préférer la casse phrase aux majuscules intégrales pour les grands titres.
- Si les majuscules sont utilisées, les réserver aux micro-libellés et à la navigation.
- L'approche des lettres doit être légèrement ouverte pour les petits libellés.
- Les paragraphes doivent rester modérément étroits sur desktop pour un confort de lecture durable.
- Éviter les blocs de texte denses plus larges que la grille éditoriale.

## 5. Principes de mise en page

### Conteneurs

- Conteneur standard : `min(100% - 2rem, 1180px)`
- Conteneur large : `min(100% - 2rem, 1440px)`

### Rythme

- Les espacements verticaux doivent sembler généreux et assurés.
- Espacement par défaut entre les sections :
  - mobile : `64px`
  - tablette : `96px`
  - desktop : `128px`
- Alterner des respirations entre les sections riches en images et celles centrées sur le texte.

### Comportement de grille

- Mobile first.
- Mobile : une seule colonne, ordre d'empilement fort, espacements tactiles.
- Tablette : passages en deux colonnes pour les sections éditoriales et les cartes.
- Desktop : les compositions asymétriques sont encouragées lorsqu'elles renforcent le récit.
- Les grilles produit peuvent passer à trois colonnes sur desktop, sans jamais devenir serrées.

### Langage de formes

- Cartes : arrondis subtils, `8px` maximum.
- Boutons : rectangle arrondi propre, sans effet pilule trop marqué.
- Images : majoritairement rectangulaires, avec parfois des cadrages encadrés.
- Lignes décoratives : fines, précises, discrètes.

## 6. Profondeur, texture et imagerie

### Profondeur

- Les ombres doivent rester douces et rares.
- Préférer la séparation par la tonalité, la bordure, l'espacement et la superposition plutôt que par une élévation spectaculaire.
- L'impression premium doit venir davantage de la composition, de la typographie et de la photographie que des effets.

### Texture

- Des références discrètes au papier, au calcaire ou au grain sont bienvenues si elles restent très retenues.
- Éviter les textures visiblement bruitées qui concurrencent la photographie produit.

### Direction photographique

- Rangs de vigne, détails de cave, bouteilles, gestes de dégustation, architecture du domaine.
- Lumière naturelle chaude.
- Matières réelles et détails tactiles.
- Les images doivent sembler calmes, réelles et précieuses.
- Éviter l'effet photo de banque d'images trop évident.

## 7. Stylage des composants

### Header

- Discret et stable.
- Transparent ou légèrement superposé à la section d'ouverture lorsque c'est pertinent, puis structuré clairement au scroll ou hors zone immersive.
- Navigation compacte avec une lisibilité forte.
- Les actions utilitaires peuvent inclure la langue, le compte, le panier ou la réservation.

### Section D'Ouverture

- Grande zone d'image immersive.
- Court kicker.
- Un titre éditorial fort.
- Texte d'accompagnement limité à 2 ou 3 lignes.
- Un CTA principal et un CTA secondaire.
- La section d'ouverture doit vendre l'atmosphère avant le catalogue.

### Boutons

- **Bouton principal :** fond bordeaux, texte clair, contraste affirmé.
- **Bouton secondaire :** fond transparent ou ivoire, texte bordeaux, bordure raffinée or ou bordeaux.
- Les effets au survol doivent rester subtils et soignés, jamais ludiques.
- Les états de focus doivent rester très visibles.

### Cartes

- Utiliser une structure claire et une décoration retenue.
- Les cartes produit privilégient l'image de la bouteille, le nom de la cuvée, un descripteur court et un CTA.
- Les cartes éditoriales privilégient le titre, l'extrait et un espacement calme.

### Formulaires

- Élégants et discrets.
- Surfaces ivoire ou blanches.
- Libellés explicites, jamais de formulaires reposant uniquement sur des placeholders.
- Bordures fines et espacements généreux.

### Footer

- Plus dense que le reste de la page tout en restant calme.
- Liens utiles, contact, mentions légales, newsletter, réseaux sociaux et informations sur le domaine.
- Il doit évoquer un chapitre de clôture raffiné, pas un simple bloc utilitaire générique.

## 8. Structure de la page d'accueil

La page d'accueil par défaut devrait généralement suivre cet ordre narratif :

1. section d'ouverture immersive avec positionnement du domaine ;
2. accès rapide aux cuvées, à la collection ou à la réservation de visite ;
3. section histoire du domaine ou terroir ;
4. cuvées mises en avant ;
5. section savoir-faire ou travail de la vigne ;
6. invitation à l'hospitalité ou à la visite ;
7. témoignage, citation presse ou élément de réassurance éditoriale ;
8. actualités ou mises en avant saisonnières ;
9. footer raffiné.

La page d'accueil doit répondre aux questions suivantes :

- qui est ce domaine ;
- pourquoi faire confiance à ses vins ;
- que puis-je découvrir ou acheter ;
- quelle expérience le domaine propose-t-il ;
- comment poursuivre.

## 9. Orientations par page clé

### Page domaine / maison

- Plus éditoriale que commerciale.
- Utiliser la chronologie, le lieu, la famille, les méthodes et la photographie.
- Favoriser un récit long format.

### Page collection / cuvées

- Filtrage ou parcours de navigation clair si Viti-core l'expose.
- Grille produit premium, jamais une sensation de magasin discount.
- Lisibilité et hiérarchie fortes.

### Fiche cuvée

- L'identité produit d'abord.
- Notes de dégustation, terroir, vinification, accords et CTA d'achat.
- Le contenu doit sembler édité et ne pas être trop technique par défaut.

### Actualités

- Rythme de magazine.
- Les images et extraits doivent paraître soignés et crédibles.

### Contact / visite

- Niveau de confiance élevé.
- Informations pratiques claires.
- Invitation à la dégustation, à la visite du domaine ou à l'échange direct.

### Tunnel d'achat / boutique

- Conserver le ton premium, mais simplifier.
- Retirer le bruit visuel.
- Prioriser la confiance, la lisibilité et la finalisation.

## 10. Ton rédactionnel

Les textes doivent sembler :

- posés ;
- sincères ;
- compétents ;
- jamais ampoulés ;
- jamais luxueux pour le luxe seul.

Champs lexicaux privilégiés :

- terroir ;
- patience ;
- précision ;
- transmission ;
- parcelle ;
- vendange ;
- cave ;
- dégustation ;
- hospitalité.

À éviter :

- le langage commercial agressif ;
- les urgences artificielles ;
- les buzzwords de startup ;
- les clichés poétiques surjoués.

## 11. Mouvement et interaction

- Les animations doivent être subtiles et lentes.
- Préférer les fondus, les apparitions vers le haut et un parallax très modéré.
- Pas d'animations rebondissantes.
- Pas de micro-interactions excessives.
- Les retours interactifs doivent sembler premium et intentionnels.

## 12. Accessibilité et exigences UX non négociables

- Contraste fort du texte sur toutes les surfaces.
- Focus clavier visible sur chaque élément actionnable.
- Hiérarchie de titres sémantique.
- Boutons et liens toujours non ambigus.
- Zones tactiles confortables sur mobile.
- Les traitements décoratifs ne doivent jamais nuire à la lisibilité.
- Les formulaires doivent conserver des libellés visibles et des états d'erreur explicites.

## 13. Contraintes d'implémentation pour les sorties Stitch

Lors de la génération d'écrans à partir de ce système de design :

- produire un HTML sémantique traduisible en templates Twig ;
- éviter les patterns spécifiques à React et les hypothèses de composants associées ;
- privilégier des sections réutilisables et des structures de blocks stables ;
- conserver des mises en page réalistes pour des thèmes Symfony rendus côté serveur ;
- ne pas inventer de dashboards applicatifs ou de schémas de navigation SaaS ;
- optimiser pour les parcours page d'accueil, domaine, collection, fiche cuvée, actualités, contact et boutique.

## 14. Règle de composition avec les données Viti-core

Le design du thème doit toujours être pensé pour accueillir les données métier réelles de Viti-core sur l'ensemble des pages.

Principes :

- les produits visibles dans le thème sont des produits Viti-core ;
- les catégories visibles dans le thème sont des catégories Viti-core ;
- les sélections éditoriales, mises en avant, carrousels, grilles ou listes doivent être conçus comme des habillages visuels de données réelles et non comme des contenus figés ;
- une maquette peut montrer un exemple de contenu, mais l'intégration finale doit pouvoir recevoir les objets métier Viti-core sans changer la direction artistique ;
- le design doit tolérer des variations de longueur de titre, de sous-titre, d'image, de prix, de description courte ou de nombre d'éléments.

Conséquences de design :

- les cartes produit doivent fonctionner avec les champs réels de Viti-core ;
- les listes et sliders de cuvées doivent pouvoir boucler sur les données fournies par Viti-core ;
- les pages collection, cuvée, boutique et homepage ne doivent jamais dépendre d'un contenu produit codé en dur pour exister visuellement ;
- lorsqu'un ordre métier existe, par exemple un ordre de catégories ou de cuvées favorites, la composition doit le respecter sans dégrader la mise en page.

## 15. Ancres de prompt pour les futures générations Stitch

Note : les formulations ci-dessous restent en anglais pour maximiser leur stabilité dans Stitch. La traduction française est fournie à titre de référence.

Formulations de style utiles :

- `premium French vineyard editorial` : éditorial premium de vignoble français
- `quiet luxury wine estate` : domaine viticole au luxe discret
- `terroir-driven ecommerce theme` : thème e-commerce centré sur le terroir
- `warm ivory and burgundy palette` : palette ivoire chaud et bordeaux
- `serif-led hospitality storytelling` : narration d'hospitalité portée par une typographie serif
- `artisanal Champagne estate homepage` : page d'accueil de domaine champenois artisanal
- `elegant winery direct-to-consumer storefront` : boutique élégante de domaine viticole en vente directe

Formulations anti-patterns utiles :

- `avoid startup SaaS aesthetics` : éviter les codes visuels de startup SaaS
- `avoid generic ecommerce blocks` : éviter les blocs e-commerce génériques
- `avoid flashy gradients` : éviter les dégradés tape-à-l'œil
- `avoid dark fashion luxury clichés` : éviter les clichés du luxe sombre orienté mode
- `avoid rustic cliché visuals` : éviter les visuels rustiques clichés

## 16. Référence de rendu Stitch

Quand une maquette Stitch est validée pour une page donnée, cette maquette devient la référence visuelle prioritaire pour cette page.

Cela signifie que l'intégration locale doit viser :

- la même structure de page ;
- la même hiérarchie visuelle ;
- la même densité ;
- les mêmes proportions générales ;
- le même rythme d'espacement ;
- la même ambiance.

L'objectif n'est pas de produire une interprétation du thème, mais une reproduction fidèle de la maquette validée, traduite en Twig + CSS/SCSS.

Règle de priorité :

- `.stitch/DESIGN.md` définit le système visuel global du thème ;
- la maquette Stitch validée fixe le rendu concret à reproduire pour la page concernée ;
- en cas d'écart entre une interprétation locale et une maquette Stitch validée, la maquette Stitch prime pour cette page.
