Ultra-Premium v4 (Framer/Webflow) — Variation “Boutique de Quartier (<50 produits)”

# PROMPT MASTER - Site ultra-premium (Framer/Webflow) - VARIATION V4 "Boutique Curatée (<50 produits)"

Rôle : Tu es un-e directeur-trice de création + lead UX/UI + intégrateur avancé (2025) de sites ultra-premium (niveau studio 100k€).
Objectif : créer une boutique < 50 produits, irrésistible et conversion-first (Framer/Webflow ready), avec SEO local, accessibilité AA, et performances exemplaires.
Ne pose AUCUNE question : tout est dans {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 pour une "petite boutique haut de gamme de proximité".

========================
STYLE & DIRECTION ARTISTIQUE
========================
- Mood : chaleureux premium, local chic, contemporain. Textures fines (papier, toile), lumière douce, produits héroïsés.
- Grille : 12 colonnes, baseline 10/15/20 px, rythme éditorial, grands interlignages.
- Typo : utiliser celles de {DATA_CLIENT}, sinon fallback premium : Titres = "Fraunces" ou "Canela"; Texte = "IBM Plex Sans" ou system-ui. 1 H1/page.
- Couleurs : palette {DATA_CLIENT}. À défaut : charbon #151515, ivoire #FAF7EF, sauge #7A8B78, terracotta #C2684F, miel #E4A851. Contrastes AA/AAA.
- Icono & photo : pictos fins (line), packshots propres + macros texture; no stock cliché; cadrages cohérents.
- Microcopy : concret, sensoriel, réassurant (provenance, labels, délais). CTA clairs (Ajouter au panier, Commander, Click & Collect).

========================
ANIMATIONS & INTERACTIONS (haut de gamme)
========================
- Reveal doux (fade/translate/clip-path), 180-420 ms, easing out quintique, 60 FPS, respect prefers-reduced-motion.
- Parallax léger sur héros/packshots, "wipe" directionnel inspiré des gestes d'artisan.
- Panier "drawer" (slide-in) avec micro-bounce; état d'ajout subtil (tick/confetti discret).
- Skeleton loaders pour listes produits; transitions de page sobres.
- Framer : Variants/Scroll/Smart Components. Webflow : IX2 "Page load", "While scrolling", "Mouse move".

========================
ARCHITECTURE DE PAGES (modulaire)
========================
1) Home : héros (USP + visuel), best-sellers, nouveautés, catégories courtes (≤ 8), engagements/labels, avis, FAQ, CTA final.
2) Boutique/Shop : grille curatée, filtres simples (catégorie, label, prix), tri best-sellers.
3) Catégorie : intro courte (bénéfices/usage), grille produits, bannières "saison / offre".
4) Produit (PDP) : visuels XL (zoom), variantes (poids/taille), prix/stock, badges (bio/AOP/IGP), ingrédients/allergènes, origine, conseils d'usage, avis, cross-sell.
5) About / Atelier / Sourcing : histoire, équipe, méthodes, fournisseurs.
6) Click & Collect / Livraison : zones, créneaux, délais, frais, minimum de commande.
7) Journal/Recettes (CMS) : guides, idées menu, accords (vin/fromage...).
8) Contact / Horaires / Accès.
Templates CMS : Produit, Catégorie, Article, Recette, Témoignage, FAQ.

========================
CATALOGUE & MERCHANDISING (< 50 produits)
========================
- Regrouper par 4-8 catégories maximum, prioriser 12 best-sellers en home.
- Bundles & coffrets (panier moyen), "Réassort rapide" (racheter vos favoris).
- Badges dynamiques : Nouveau, Réassort, Édition limitée, Fait du jour (boulangerie).
- Indicateurs : "Commander avant HH:MM pour retrait/jour J", stock faible.

========================
MODULES PREMIUM (insérer si pertinents)
========================
- Click & Collect (créneaux), Livraison locale (carte zones), retrait express.
- Programme fidélité / points / compte client; abonnement (box mensuelle).
- UGC & avis vérifiés (note moyenne, filtres, photos clients).
- Comparatif variantes (poids/prix/usage), recommandations (frequently bought together).
- Pressroom mini (logos, parutions) si marque reconnue.

========================
PDP - Éléments indispensables
========================
- Titre, sous-titre sensoriel, prix, TVA, disponibilité, variations.
- Boutons : Ajouter au panier, Acheter maintenant, Ajouter aux favoris.
- Contenu : bullet bénéfices, ingrédients/allergènes (si alimentaire), conseils conservation/consommation, provenance, labels, nutrition (si pertinent).
- Preuves : avis (aggregateRating), badges qualité, retours/garanties.
- Cross-sell : 3-5 recommandations contextuelles.

========================
FORMULAIRES & FLOWS
========================
- Newsletter, Alerte réassort, Demande pro (B2B) optionnelle.
- Panier drawer (quantités, suppression, codes promo placeholder), estimation frais.
- Checkout : si intégration non possible, fournir prototype d'interface + plan d'intégration (Shopify/Webflow Ecommerce/Snipcart/Stripe Checkout).
- États : validation inline, succès/échec; tracking (add_to_cart, begin_checkout, purchase).

========================
SEO, DATA & LÉGAL
========================
- Balises : Title/Meta/OG/Twitter; H1 unique; H2/H3 cohérents; FAQPage si utile.
- JSON-LD : LocalBusiness (ou Bakery/Grocery selon {DATA_CLIENT}), Product + Offer + AggregateRating, Breadcrumb, WebSite+SearchAction, Article/Recipe si présent.
- SEO local : NAP cohérent, horaires, zones desservies, plan d'accès.
- Performances : images WebP/AVIF, lazy-loading, font-display: swap, GPU-friendly anims, preconnect (CDN/paiement).
- RGPD : bannière consentement, Mentions, Politique, CGV/Retours.

========================
ACCESSIBILITÉ (WCAG 2.2 AA)
========================
- Focus visibles; ARIA sur panier/drawer/modals; ordre tab logique.
- Alternatives texte riches; contrastes AA/AAA; shortcuts clavier pour fermer drawer.
- Préférences moteurs : respects prefers-reduced-motion.

========================
SYSTÈME DE DESIGN (TOKENS & COMPONENTS)
========================
- Tokens : couleurs base/semantic, typographic scale, spacings, radii, ombres, z-index.
- Components : Header sticky (mini-cart), Footer, Button (tiers), Badge, Card Produit, Price Tag, Quantity Stepper, Drawer Panier, Toast, Accordion FAQ, Rating, Pagination, Breadcrumb.

========================
LIVRABLES (attendus dans la sortie)
========================
1) Sitemap complet + collections CMS.
2) Sections par page (ordre + objectif).
3) UI Kit (tokens + composants).
4) Specs d'animations (quand/comment/easing/durée).
5) Pack SEO (titles/meta/OG, JSON-LD produits & local).
6) Pack Accessibilité (labels, ARIA, focus).
7) Copys (H1/H2/paragraphes/CTA) alignés à la voix de {DATA_CLIENT} (+ variantes A/B).
8) Prompts visuels (packshots, macros, scènes d'usage).
9) Schéma CMS (produit/catégorie/article/recette/avis).
10) Plan de tracking (dataLayer : view_item_list, select_item, add_to_cart, begin_checkout, purchase).
11) Check-list performance (budgets poids, lazy, tailles visuels).

========================
CONTRAINTES D'IMPLÉMENTATION
========================
- Framer : Sections/Stacks/Components + Variants; Props (textes/médias/prix); responsive mobile-first.
- Webflow : Style Guide, classes utilitaires (wrap/container/grid), naming BEM, IX2 documentées; mini-cart/drawer.
- Langue : reprendre celles 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 fichier) pour la Home + Shop + PDP de référence, 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 ultra concret : textes exacts, structures, 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 :