# Design system
**Theme ID:** `theme-legacytheme3`
**Entry:** `theme-legacytheme3`
**Source technique:** `assets/styles/tokens.scss`, `assets/styles/theme.scss`, `templates/`

Ce document est la reference visuelle du theme legacy Theme3 porte dans VitiCore 2. Il sert a cadrer les futures surcharges Twig, composants Symfony UX, ecrans Stitch ou ajustements CSS du theme.

## 1. Visual Theme & Atmosphere

Champagne Delroche est un theme sombre, patrimonial et editorial. L'experience doit evoquer une maison de champagne: contraste noir profond, or doux, photographies de domaine et de bouteilles, typographie slab elegante, grands visuels plein cadre et composition calme.

L'interface n'est pas une interface SaaS dense. Elle est immersive, centree, verticale, et laisse beaucoup de place aux images. Les contenus de vente restent sobres: cartes produits sans arrondis, champs carres, filets or, fonds noirs ou gris anthracite, et tres peu d'ornements hors lignes, aplats et images.

Les ecrans doivent conserver une impression artisanale et premium:
- fonds majoritairement noirs ou anthracite;
- accents or utilises comme signal de marque, prix, et action;
- texte blanc ou blanc adouci;
- grandes photographies en hero, footer, menu et fiches cuvees;
- contours nets, angles droits, ombres reservees aux overlays et au checkout;
- menu lateral droit et panneau plein ecran comme signature de navigation.

## 2. Color Palette & Roles

- **Noir Champagne profond** (`#141414`): fond principal du site, fond du panier, page shop, sections immersives.
- **Anthracite de maison** (`#3c3c3b`): surfaces secondaires, panneaux boutique, blocs d'information, champs et modales.
- **Gris mineral** (`#6b6b6a`): fond du panneau menu ouvert et ton neutre de transition.
- **Or Delroche** (`#d3ad74`): couleur de marque, boutons pleins, bordures, titres secondaires, etats actifs, filets de structure.
- **Or clair cremeux** (`#f4d49d`): survols, liens secondaires dans les surfaces sombres, messages doux et accents de prix.
- **Blanc net** (`#ffffff`): texte principal sur fond sombre, surfaces de contraste ponctuelles, etat hover inverse.
- **Noir absolu** (`#000000`): bandeau de prevention alcool en footer uniquement.
- **Succes doux** (`#b7d8ba`): statut positif dans le checkout.
- **Erreur peche clair** (`#f1b7a6`) et **fond erreur profond** (`rgba(94, 35, 28, 0.55)`): erreurs checkout et alertes.

Roles Tailwind exposes par le theme:
- `--color-page`: `#141414`
- `--color-surface`: `#ffffff` par defaut, reinterprete en surfaces sombres dans le checkout
- `--color-foreground`: `#141414`
- `--color-on-foreground`: `#ffffff`
- `--color-accent`: `#d3ad74`
- `--color-accent-soft`: `#f4d49d`

Les transparences or sont frequentes pour les bordures: `rgba(211, 173, 116, 0.22)` a `0.72`. Les transparences blanches servent aux textes secondaires et fonds faibles: `rgba(255, 255, 255, 0.03)` a `0.82`.

## 3. Typography Rules

- **Titres et UI de marque:** Museo Slab (`"Museo Slab", museo-slab, Georgia, serif`). Elle porte les titres, boutons, prix, onglets, menus et intitules importants.
- **Texte courant et microcopy:** Roboto (`"Roboto", Arial, sans-serif`). Elle porte les paragraphes, libelles techniques, details panier, adresses et textes longs.
- **Accroches fines:** Josefin Sans (`"Josefin Sans", sans-serif`). Elle est utilisee pour les baselines, eyebrows, fleches de hero, sous-titres et bandeaux plus aeriens.

Ces familles sont les valeurs par defaut du theme, pas une decision figee. Dans une app hote, verifier d'abord les surcharges typographiques projet (imports de fonts, variables CSS/Tailwind, `assets/css/app.scss`, `assets/css/theme.scss`, tokens ou configuration locale) et les respecter. En l'absence de surcharge explicite, appliquer les familles ci-dessus.

Regles de style:
- les titres principaux sont legers a moyens, jamais ultra gras par defaut;
- le theme utilise `letter-spacing: 0`; ne pas ajouter de tracking negatif;
- les titres de navigation, boutons, sections checkout et labels importants sont souvent en majuscules;
- les paragraphes ont une ligne aeree autour de `1.65`;
- les h1 de hero peuvent etre enormes, transparents et decoratifs (`10em`, opacite `0.15`) sur desktop;
- sur mobile, les h1 decoratifs de hero disparaissent et la baseline devient le signal principal.

## 4. Component Stylings

### Header, Banner & Menu

La banner d'annonce doit etre tout en haut du document, avant le header visuel. Elle reste derriere les controles du menu.

Calques a respecter:
- banner annonce: `z-index: 30`;
- enveloppe menu: `z-index: 40`;
- panneau menu ouvert: `z-index: 60`;
- bloc menu fixe a droite et bouton hamburger: `z-index: 70`;
- drawer panier: `z-index: 90`;
- notifications: `z-index: 140`.

Le menu est une colonne fixe a droite, fond or, pictogramme anthracite en haut, bouton hamburger et actions compte/panier empiles. Le panneau menu ouvert glisse depuis la droite, occupe toute la hauteur viewport, et utilise un fond gris mineral.

### Hero

Les pages principales utilisent un hero image plein cadre:
- hauteur `70vh`, minimum `400px`;
- image en `object-fit: cover`, position `50% 70%`;
- double voile: radial sombre et overlay noir leger;
- baseline centree en Josefin Sans, or puis blanc uppercase;
- titre decoratif geant en or, opacite faible, derriere la baseline;
- fleche de scroll blanche/or avec animation verticale.

### Buttons

Les boutons sont rectangulaires, sans arrondi visible.

- **Bouton plein:** fond or (`#d3ad74`), texte noir (`#141414`), bordure or. Au survol: fond blanc et texte noir.
- **Bouton contour:** fond transparent, bordure or ou blanche selon contexte, texte blanc. Au survol: fond blanc et texte noir.
- **Bouton de formulaire:** hauteur moderee, typo Museo Slab, souvent uppercase, poids `700`.
- **Boutons boutique produit:** plus compacts, texte non uppercase pour garder la densite des cartes.

Ne pas introduire de gros boutons pill-shaped dans le theme public. Les formes rondes sont reservees aux icones sociales, badge panier et petits boutons iconiques.

### Cards & Panels

Le theme privilegie les panneaux plats a angles droits:
- bordures or translucides;
- fond noir/anthracite;
- pas ou peu d'ombre;
- parfois une bordure gauche or plus epaisse pour les alertes, confirmations et blocs d'information.

Les seules ombres marquees sont reservees aux overlays:
- modales: `0 32px 90px rgba(0, 0, 0, 0.62)`;
- panier lateral: `-24px 0 60px rgba(0, 0, 0, 0.34)`;
- checkout summary: `0 30px 80px rgba(0, 0, 0, 0.34)`;
- notifications: `0 18px 44px rgba(0, 0, 0, 0.28)`.

### Forms & Inputs

Les champs sont carres, sombres et bordes d'or:
- fond anthracite ou noir translucide;
- bordure `1px` or;
- texte blanc;
- placeholders blancs attenues;
- focus par bordure or plus nette et outline or translucide.

Dans le checkout, les labels sont en Josefin Sans or. Les erreurs restent visibles sans changer le langage visuel: tons peche clair sur surfaces sombres.

### Shop

La boutique reste sobre et orientee produit:
- grille desktop en 3 colonnes;
- cartes produits sans fond encadre apparent, centrees, laissees sur le fond noir;
- images bouteilles hautes en `contain`, 350px desktop, 250px mobile;
- prix en pastille rectangulaire anthracite;
- onglets categories centrees avec soulignement or actif;
- selects et quantites en champs carres anthracite/or;
- informations boutique en panneaux anthracite avec bordure gauche or;
- legal notice sur fond blanc pour contraster avec le reste de la boutique.

Sur mobile, la grille passe a une colonne, la quantite utilise un stepper visible et la navigation produit peut passer par la barre mobile fixe.

### Cart & Checkout

Le panier est un drawer lateral droit noir, compact, avec filets or et images produit contenues. Le contenu est dense mais reste lisible: titres Museo Slab, details Roboto, prix or.

Le checkout conserve l'atmosphere sombre mais devient plus structure:
- fond noir avec glow radial or faible;
- header checkout anthracite/noir, logo contenu, liens contours;
- cartes checkout foncees avec bordures or translucides;
- summary desktop sticky;
- surface blanche uniquement pour le recapitulatif contraste quand necessaire;
- actions principales en or plein.

### Footer

Le footer est visuel et photographique:
- image de fond plein cadre positionnee haut;
- contenu en grille 3 colonnes desktop;
- menu uppercase en Museo Slab;
- icones sociales rondes blanches;
- bouton contact contour blanc;
- bandeau prevention alcool noir plein en bas.

## 5. Layout Principles

- Largeur de reference: `1200px`, via `.banette-container`.
- Les sections standard utilisent `72px` de padding vertical desktop.
- Les compositions alternent textes centres, grilles visuelles et panneaux larges.
- Les images portent une grande part du design: ne pas remplacer par des aplats ou illustrations generiques.
- Les pages doivent rester mobile-first dans le comportement: hero simplifie, grille produit en une colonne, menu plein ecran, footer centre.
- Eviter les cartes imbriquees et les fonds flottants decoratifs. Le theme se construit avec des bandes, images, grilles, filets et panneaux simples.
- Les classes et attributs fonctionnels VitiCore doivent rester presents: `{{ attributes }}`, `data-controller`, `data-action`, `data-model`, `data-live-*`, Turbo et Alpine.

## 6. Implementation Notes

- Les textes visibles doivent passer par les traductions Symfony du theme.
- Ne pas modifier VitiCore pour adapter ce theme; surcharger dans `themes/theme-legacytheme3/templates`.
- Les composants VitiCore peuvent garder leur logique, mais leur rendu visible doit suivre ce document.
- Pour la banner annonce, creer une surcharge `templates/components/announcement/Banner.html.twig` si le rendu VitiCore par defaut ne suffit pas; conserver `data-announcement-banner`, `x-data="announcementBanner(...)"`, `data-turbo-permanent` et les transitions Alpine.
- Ne pas ajouter de nouvelle palette dominante. Les couleurs d'un nouvel ecran doivent rester dans noir, anthracite, gris mineral, blanc et or Delroche.
