Ultra-Premium v3 (Framer/Webflow) — Variation “Artisan Haute Facture”

# PROMPT MASTER - Site ultra-premium (Framer/Webflow) - VARIATION V3 "Artisan Haute Facture"

Rôle : Tu es un directeur-trice de création + lead UX/UI + intégrateur avancé (2025) spécialisé-e en sites ultra-premium type studio à 100k€.
Objectif : produire une landing + sous-pages modulaires exceptionnelles (Framer/Webflow ready), animations haut de gamme, performance exemplaire, SEO & accessibilité irréprochables.
Ne pose AUCUNE question : tout est dans les INPUTS : DATA_CLIENT et CUSTOM_INSTRUCTION.

========================
INPUTS (à parser)
========================
{DATA_CLIENT} :
[DATA_CLIENT]
{CUSTOM_INSTRUCTION} :
[CUSTOM_INSTRUCTION]

Si une info manque, choisis la meilleure option par défaut selon un positionnement "artisanat d'exception". Ne rien demander.

========================
STYLE & DIRECTION ARTISTIQUE
========================
- Mood : luxe artisanal, intemporel, tactile. Focus sur le geste, la matière, la patine.
- Matières & lumière : bois massif, cuir, laiton, pierre; lumière dorée, reflets doux; légère texture "grain" discrète.
- Grille & rythme : 12 colonnes, baseline 10/15/20 px; respiration généreuse; compositions éditoriales.
- Typo : utiliser celles de {DATA_CLIENT}, sinon fallback premium : Titres = "Fraunces" ou "Noe Display"; Texte = "Public Sans" ou system-ui. 1 H1 par page.
- Couleurs : palette {DATA_CLIENT}. À défaut : charbon #141414, lin #F5F2EA, laiton #C7A869, terracotta #B55E3C, olive #5E6B4A. Contrastes AA/AAA.
- Icono/illus : pictogrammes "gravure" (linework fin), photos reportage atelier (macro gestes/outils), pas de stock cliché.
- Microcopy : savoir-faire, garanties, provenance; CTA concrets (Devis sur-mesure, Visiter l'atelier); preuves chiffrées.

========================
ANIMATIONS & INTERACTIONS (haut de gamme & performantes)
========================
- Révélations "geste" : wipe/directionnel, mask/clip-path, split-text; 180-420 ms; easing out quintique; 60 FPS.
- Tracé SVG (stroke-dasharray) pour lignes, icônes, logos partenaires; throttle au scroll.
- Parallax doux sur photos macro; sections sticky "Processus" avec étapes épinglées.
- Hover "magnet" léger; boutons avec micro-élasticité; ombres profondes maîtrisées (perspective subtile).
- Transitions de page sobres; respect de prefers-reduced-motion.
- Framer : Variants, Scroll-based, Smart Components. Webflow : IX2 "While scrolling", "Page load", "Mouse move".

========================
ARCHITECTURE DE PAGES (exhaustive & modulaire)
========================
1) Home / Landing (héros atelier, USP, matières, réalisations phares, preuves locales, garanties, FAQ, CTA final)
2) Savoir-faire (gestes, machines, finitions, matières)
3) Réalisations / Projets (grille, filtres, fiches détaillées, avant/après)
4) Sur-mesure / Processus (étapes, délais, options, maintenance)
5) Tarifs & Devis (fourchettes, configurateur simple, prises de mesures)
6) À propos & Atelier (histoire, équipe, labels, visite)
7) Avis & Références (clients, architectes, presse)
8) Blog / Ressources (guides d'entretien, choix des essences, etc.)
9) Contact / Visite atelier / Prendre rendez-vous

Templates CMS : Article, Réalisation (Case Study), Témoignage, Service, FAQ, Ressource.

========================
MODULES PREMIUM (insérer si pertinents)
========================
- "As seen in" + labels (EPV, Qualibat, FSC, etc.) et logos de partenaires architectes
- Configurateur Sur-Mesure (dimensions, essence, finition → aperçu + fourchette)
- ROI/Comparatif : artisanal vs industriel (durabilité, réparabilité)
- Galerie "avant/après" (slider), vidéo lightbox en atelier
- Carte des chantiers (cluster + fiches), dossier presse/PDF book téléchargeable
- CTA sticky (Devis, Visite atelier), footer riche (sitemap, coordonnées, horaires)

========================
FORMULAIRES & FLOWS
========================
- Form principal : nom, email, téléphone (option), message, upload plan/photos (option), consentement RGPD, honeypot, reCAPTCHA invisible.
- Multi-étapes si {CUSTOM_INSTRUCTION} l'exige (devis/prise de mesures), prise de rendez-vous (calendrier).
- États : validation inline, succès/échec, tracking (submit_success, submit_error).

========================
SEO, DATA & LÉGAL
========================
- Balises : Title, Meta description, OG/Twitter Cards; H1 unique; H2/H3 rigoureux; données locales (ville, zone de chalandise).
- JSON-LD : LocalBusiness/ProfessionalService, WebSite+SearchAction, Product/Service, Article, Breadcrumb.
- Sitemap.xml, robots.txt; redirections propres; fil d'Ariane.
- Performance : images responsives (WebP/AVIF), lazy-loading, font-display: swap, animations GPU-friendly; budgets de poids.
- RGPD : bannière consentement, Mentions Légales, Politique de confidentialité.

========================
ACCESSIBILITÉ (WCAG 2.2 AA)
========================
- Focus visibles, ARIA sur composants, ordre tab logique, labels explicites.
- Alt détaillés (gestes, matériaux), contrastes AA/AAA, prefers-reduced-motion respecté.

========================
SYSTÈME DE DESIGN (TOKENS & COMPONENTS)
========================
- Tokens : couleurs (base/semantic), typos (scale), spacings, radii, ombres, z-index.
- Components : Header sticky (mega-nav atelier), Footer, Button (tiers), Badge (labels), Card (projet), Section, Pricing table, FAQ accordion, Testimonial, Form fields, Modal, Toast, Timeline Process, Material Swatches.

========================
LIVRABLES (attendus dans la sortie)
========================
1) Sitemap détaillé (pages & collections CMS).
2) Liste des sections par page (ordre + objectif).
3) UI Kit (tokens + composants) prêt à implémenter.
4) Spécs d'animations (quand/comment/easing/durée).
5) Pack SEO (titles/meta/OG, JSON-LD locaux).
6) Pack Accessibilité (contrôles, labels, ARIA).
7) Copys (H1/H2/paragraphes/CTA) alignés à la voix artisanale de {DATA_CLIENT} (+ variantes A/B).
8) Prompts visuels (scènes atelier, macro matière, lumière) par section.
9) Schéma CMS (collections, champs, références, slug).
10) Plan de tracking (events & dataLayer), conversions (form_submit, cta_click, configurator_step).
11) Check-list performance (budgets, lazy rules, formats).

========================
CONTRAINTES D'IMPLÉMENTATION
========================
- Framer : Sections/Stacks/Components avec Variants; Props pour textes/médias; responsive mobile-first.
- Webflow : page "Style Guide", classes utilitaires (wrap/container/grid), naming BEM, Interactions IX2 documentées.
- Langue : reprendre celle(s) de {DATA_CLIENT}; prévoir i18n si demandé.
- Si l'outil ne peut pas créer le site, fournir un EXPORT PRÊT À COPIER : HTML sémantique + CSS (ou Tailwind) + JS minimal (un seul fichier) pour la Home avec mêmes sections, textes, animations.

ONLY USE HTML, CSS AND JAVASCRIPT
try to elaborate as much as you can, to create something unique
ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE

========================
RÈGLES
========================
- Ne pas demander d'infos supplémentaires.
- Être concret : livrer textes exacts, structures, noms de classes/collections, paramètres d'animations.
- Ton premium, net, sans jargon inutile.

========================
Landing page variante #{landing_number}. Crée une variation unique et différente des autres.
DÉMARRER MAINTENANT AVEC LA PAGE COMPLETE EN HTML CSS JS PRÊTE À COPIER-COLLER :