Fiche Descriptive Complète

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template irtm162i39.html (Collection Saint Laurent – L’Ombre Romantique)

Version 1.0.0

Date de création 15 Mars 2026

Auteur / Designer Inspiré par Saint Laurent / Généré par Refoia Jeremy Tech

Type de page Landing Page de Mode (E-commerce / Lookbook)

Objectif principal Présenter la collection « Hiver 2026 » et inciter à l’achat via une esthétique luxueuse.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est une vitrine immersive pour une collection de mode haute couture. Il utilise un design minimaliste et sombre (« Dark Mode ») pour mettre en valeur des pièces de luxe. Il comprend :

Une navigation minimaliste.

Une section Hero avec effet de fondu (fade-in) et image en niveaux de gris.

Des sections narratives mélangeant texte éditorial et galeries d’images asymétriques.

Une section Boutique/Sélection avec affichage des prix et effets de survol.

Une section Bénéfices/Arguments utilisant des icônes SVG pour rassurer le client.

📌 Public cible (Persona)

👤 Clientèle Luxe : Personnes recherchant l’exclusivité et l’esthétique Saint Laurent.

👤 Amateurs de Mode : Intéressés par les tendances néo-victoriennes.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : Tailwind CSS (via CDN)

Typographie : Playfair Display (Serif) & Montserrat (Sans-serif) via Google Fonts.

Responsive : ✅ Oui (Adaptation des grilles via breakpoints md:)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 collection_title str ✅ Titre de la collection (ex: « L’Ombre Romantique »)

2 season_label str ✅ Label saisonnier (ex: « Hiver 2026 »)

3 product_list array ✅ Liste des produits (nom, prix, image)

4 hero_bg_image url ✅ Image de fond principale

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

Hover sur Images : Zoom progressif (scale-105) et passage du grayscale à la couleur pour certaines sections.

Hover Boutons : Inversion des couleurs (Noir/Blanc) avec transition fluide.

Scroll Reveal : Classes reveal présentes (prêtes pour une activation via JavaScript/Intersection Observer).

🧱 STRUCTURE DU FICHIER — DOM

nav : Barre de navigation supérieure (Logo centré, liens à gauche, panier à droite).

section 1 (Hero) : Plein écran (90vh), fond image opaque, titre en italique.

section 2 (Intro) : Grille 2 colonnes avec texte à gauche et images décalées à droite.

section 3 (Atelier) : Mise en page asymétrique inversée.

section 4 (Sélection) : Grille de produits 3 colonnes sur fond blanc (contraste fort).

section 5 (Arguments) : 3 colonnes avec icônes SVG filaires (Artisanat, Matières, Confort).

section 6 (Bénéfices) : Alternance visuelle (Image gauche/Texte droite puis inversement) avec cadres décoratifs « Gold ».

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs

Fond Principal : #050505 (Noir profond)

Accents : #c5a059 (Gold / Or)

Texte : #f4f4f4 (Blanc cassé) / #9ca3af (Gris secondaire)

Contraste : #FFFFFF / #000000 (Section sélection)

🔤 Typographie

Titres (Playfair Display) : Élégance, héritage, luxe (souvent en italique).

Corps de texte (Montserrat) : Modernité, lisibilité, minimalisme.

♿ ACCESSIBILITÉ & SEO

SEO : Utilisation de balises

à

hiérarchisées. Attributs alt présents sur les images.

Sémantique : Utilisation de