chateau_petrus_2005_l_excellence_du_terroir

Fiche Descriptive Complète : Château Pétrus 2005

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template chateau_petrus_2005_l_excellence_du_terroir.html

Version 1.0.0

Date de création 16 Mars 2026

Auteur / Designer Gemini (via Refoia Jeremy Tech Style)

Type de page Landing Page de Prestige / Boutique d’Investissement Vinicole

Objectif principal Conversion haute performance (Demande d’allocation de vins rares)

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est une vitrine de luxe dédiée à l’acquisition du millésime 2005 de Château Pétrus. Il combine un storytelling émotionnel (« L’excellence du terroir ») avec des arguments rationnels d’investissement (valorisation, traçabilité NFT, stockage sécurisé). La structure est conçue pour rassurer le collectionneur via des preuves sociales (scores Parker, citations d’experts) et un protocole d’achat rigoureux en 3 étapes.

📌 Public cible (Persona)

👤 Grands Collectionneurs : Individus à haute valeur nette cherchant des flacons au pedigree irréprochable.

👤 Investisseurs en actifs tangibles : Personnes cherchant à diversifier leur patrimoine avec des actifs décorrélés des marchés boursiers.

👤 Amateurs de Vins de Luxe : Passionnés souhaitant accéder à des bouteilles rares via une plateforme sécurisée.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 (Sémantique respectée : section, nav, footer, blockquote)

Framework CSS : Tailwind CSS (via CDN)

Framework JS : Vanilla JS (Fonction toggleFAQ)

Responsive : Oui (Mobile First via classes md: et lg:)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 vintage_year str ✅ Oui L’année du millésime (ex: 2005)

2 parker_score str ✅ Oui Score de Robert Parker (ex: 100/100)

3 stock_remaining int ❌ Non Nombre de caisses restantes pour créer l’urgence

4 hero_bg_url str ✅ Oui URL de l’image de fond de la section Hero

🧱 STRUCTURE DU FICHIER — DOM

nav : Barre de navigation fixe avec effet mix-blend-difference pour la lisibilité sur fonds variables.

section #hero : Impact visuel fort, titre en Cormorant Garamond, animation fade-in.

section #note-chai : Grille 2 colonnes présentant les caractéristiques techniques (100% Merlot).

section #defis : Grille de 3 cartes soulignant les problèmes du marché (Contrefaçon, Conservation).

section #solutions : 4 colonnes présentant les garanties (Blockchain, Genève, Isotherme).

section #stats-expertises : Preuve sociale (Statistiques et citations de James Suckling).

section #workflow : Processus d’acquisition en 3 étapes numérotées.

section #faq : Accordéon interactif pour lever les objections.

section #cta-final : Bloc sombre avec effet parallaxe (chiffre 2005 en arrière-plan).

🎨 CHARTE GRAPHIQUE

🎨 Palette de Couleurs

Primaire : #1a1a1a (Noir profond pour le luxe)

Accent : #fdfcfb (Blanc cassé « papier » pour l’élégance)

Muted : #78716c (Stone-500 pour les textes secondaires)

Bordures : #e7e5e4 (Stone-200 pour la finesse)

🔤 Typographie

Titres : Cormorant Garamond (Serif classique, élégant)

Corps : Montserrat (Sans-serif moderne, lisible)

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Interaction FAQ Cliquer sur « + » L’accordéon s’ouvre avec une transition fluide

2 Effet Hover CTA Survol « Demander Allocation » Changement de couleur de blanc à stone-200

3 Responsive Design Largeur < 768px Les grilles passent de 2/3 colonnes à 1 colonne seule 4 Mix-blend Nav Scroller sur section blanche Le texte "PÉTRUS" doit rester visible (inversion couleur) 📝 EXEMPLE D'INTÉGRATION JS (Toggle FAQ) JavaScript function toggleFAQ(element) { const content = element.nextElementSibling; const icon = element.querySelector('span:last-child'); if (content.style.maxHeight) { content.style.maxHeight = null; icon.style.transform = "rotate(0deg)"; } else { content.style.maxHeight = content.scrollHeight + "px"; icon.style.transform = "rotate(45deg)"; } }