deepseek_html_20260313_5fb056

🍷 Fiche Descriptive : Template « Château Ausone »

L’élégance du terroir bordelais dans une interface numérique.

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template deepseek_html_20260313_5fb056.html

Version 1.0.0

Auteur Refoia Jeremy Tech (via Gemini)

Type de page Fiche Produit Luxe / Landing Page Viticole

Objectif principal Présentation haut de gamme d’un millésime d’exception.

🎯 DESCRIPTION FONCTIONNELLE

Ce template simule une étiquette de vin de prestige interactive. Il est conçu pour captiver l’amateur de vins fins par un design « Dark & Gold » évoquant la cave et le luxe. Il structure l’information technique (cépages, terroir) et sensorielle (notes de dégustation) de manière équilibrée.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 Sémantique.

CSS : CSS3 Pur (Internal Stylesheet) avec Flexbox et CSS Grid.

Responsive : ✅ Oui (Breakpoints : 700px pour passage en colonne unique).

Polices : Georgia, Times New Roman (Serif classique pour l’aspect premium).

🎨 Palette de Couleurs (Design Tokens)

Primaire (Fond) : linear-gradient(#2c1810, #4a2a1f) (Terre d’ombre / Lie de vin).

Accents (Or) : #d4af37 / #b8860b (Dorure à chaud).

Surface (Papier) : #faf7f2 (Papier vergé / Étiquette).

Texte : #1a0f09 (Encre brune profonde).

🧱 STRUCTURE DU DOM (Architecture)

body : Fond dégradé sombre simulant l’atmosphère d’un cellier.

.wine-card : Conteneur principal avec ombre portée profonde.

.wine-header : Identité visuelle (Nom du Château en majuscules espacées, Millésime massif).

.wine-content (Flexbox) :

.wine-left : Visuel stylisé de la bouteille (généré en CSS pur) + Caractéristiques techniques (Tableau de faits).

.wine-right : Narration (Description éditoriale) + Notes de dégustation (Grille d’icônes) + Scores de critiques (Parker/Suckling).

.wine-footer : Informations commerciales (Prix, Disponibilité, Rareté).

📥 ENTRÉES — CONTENU DYNAMIQUE

Variable Type Description

chateau-name str Nom du domaine (Ex: Château Ausone).

wine-vintage int Année de récolte (Ex: 2016).

feature-value array Liste des cépages et détails techniques.

rating-score str Note de l’expert (Ex: 98/100).

price float Prix de vente affiché en pied de page.

♿ ACCESSIBILITÉ & SEO

Hiérarchie Hn : Respectée (h2 pour la description, h3 pour les notes).

Sémantique : Utilisation de classes descriptives pour faciliter la maintenance.

Contraste : Texte brun foncé sur fond crème assurant une lisibilité optimale (Norme AA).

Meta : Balisage UTF-8 et Viewport configurés pour le SEO mobile.

🧪 TESTS & VALIDATION

Rendu CSS Pur : La bouteille est dessinée sans image externe (Performance ⚡).

Hover Effects : Les cartes de dégustation (.note-item) possèdent une transition translateY pour l’interactivité.

Adaptabilité : Sur mobile, les colonnes s’empilent pour éviter tout défilement horizontal.