story-theme-mcp 1.0.0

package/src/knowledge/guides.js

@@ -0,0 +1,252 @@
+// Guides read by the model (read_guide). Written for building stores with Story Theme 4.0:
+// accurate to the theme, opinionated about what looks professional.
+
+export const GUIDES = {
+  demarrage: {
+    title: 'Méthode : créer une boutique propre avec le Story Thème',
+    body: `**Agir d'abord, demander ensuite.** Dès la première demande, si vous savez de quelle boutique il s'agit (un nom ou ce qu'elle vend), appelez build_store tout de suite : une V1 complète en un appel (identité, pages, traduction, zip). Rédigez les textes clés de la marque dans copy à partir de ce que vous savez. La seule question préalable permise : « Pour quelle boutique ? », si rien ne l'indique.
+
+Après la V1 :
+1. Résumez en quelques lignes ce qui a été fait, les choix supposés et le chemin du zip.
+2. Posez 3 à 5 questions pour affiner (collection principale, avis réels, conditions de livraison et de retour, couleur et logo, photos).
+3. Appliquez les réponses sur le projet en cours (inutile de préciser project) : update_theme_settings (couleurs, polices), edit_template (textes, sections), apply_recipe (changer une page), list_texts pour voir les textes d'exemple restants.
+4. review_project, puis export_theme pour un nouveau zip.
+
+Règles d'or :
+- N'inventez jamais un type de section, de bloc ou un identifiant de réglage : get_section / get_block donnent les vrais. Le validateur refuse le reste.
+- Partez d'un preset (sections et blocs) ou d'une recette : ils sont réglés par le designer du thème.
+- Les images ne peuvent pas être envoyées par le MCP : laissez les champs image vides, la check-list les liste. Si le marchand a déjà déposé ses images dans Contenu > Fichiers, utilisez shopify://shop_images/<nom-exact>.
+- Les produits, collections, menus et pages se créent dans l'administration Shopify ; le thème ne fait que les afficher. Utilisez les handles donnés par le marchand (ou lus avec un connecteur Shopify).
+- Honnêteté commerciale : pas de faux avis, faux chiffres, faux stock, compte à rebours qui redémarre, logos presse inventés.`,
+  },
+
+  architecture: {
+    title: 'Architecture du thème (4.0)',
+    body: `- **Modèles** (templates/*.json) : une page = { sections, order }. 25 sections maximum. Modèles alternatifs : templates/product.<nom>.json, templates/page.<nom>.json (attribués produit par produit ou page par page dans l'administration).
+- **Groupes de sections** : sections/header-group.json (barre d'annonce + en-tête) et sections/footer-group.json (réassurance, pied de page, pop-up). Même format + "type" et "name".
+- **Sections** : presque toutes sont des cadres composés (largeur, direction, alignements, espacements, palette de couleurs, séparateurs de forme, animations) remplis de blocs. Leur valeur est dans leurs **presets**.
+- **Blocs** : publics (heading, text, button, image, group…) utilisables partout où une section ou un groupe accepte « @theme » ; privés (préfixe _, ex. _slide, _offer, _card-title) seulement chez le parent qui les déclare. group, tabs, carousel et content-over-image se nichent (8 niveaux maximum).
+- **Blocs statiques** ("static": true) : posés par le code du thème (lignes et zones de l'en-tête, carte produit des listes, zones du panier). Leur type et leur identifiant sont imposés, ils ne se suppriment pas, ils ne vont pas dans block_order. On modifie leurs réglages et leurs enfants.
+- **Format** : dans un fichier, "blocks" est un objet { id: bloc } et "block_order" liste les blocs non statiques dans l'ordre. (Les presets du schéma utilisent des tableaux : ne les recopiez pas tels quels, utilisez add_section / add_block qui convertissent.)
+- **Taille des blocs dans un groupe** : réglages width (fill, fit, custom en douzièmes, fixed pour l'image), width_mobile, align_self. Un groupe horizontal passe en colonne sur mobile avec stack_on_mobile.
+- **Palettes de couleurs** : chaque section a color_palette (background-1, background-2, inverse, scheme par défaut). Les couleurs se règlent une fois dans config/settings_data.json.
+- **Styles de boutons** : button_style 1 (principal), 2 (secondaire), 3 (discret), custom. Gardez la même logique partout : un seul bouton de style 1 par section.
+- **Sources dynamiques** : "{{ closest.product }}" dans les blocs de fiche produit, "{{ product.metafields… }}" dans les textes.
+- **Panier** : cart_type (drawer, page, notification) dans les réglages du thème ; les blocs du tiroir panier vivent dans config/settings_data.json > current > sections > cart-drawer.`,
+  },
+
+  'design-pro': {
+    title: 'Ce qui fait une boutique professionnelle',
+    body: `- **Un message par section.** Titre court (2 à 8 mots), une phrase de soutien, un bouton au plus. Si une section a besoin de trois paragraphes, c'est une page.
+- **Hiérarchie.** Un seul <h1> par page (titre du héro sur l'accueil ; le titre produit sur la fiche). Les titres de sections sont des <p> ou <h2> stylés, pas des <h1>.
+- **Rythme.** Alternez les formats (image/texte, grille, texte seul, preuve sociale) et les fonds : background-1 pour la majorité, background-2 pour une section sur trois environ, inverse pour 1 ou 2 moments forts. Jamais trois sections identiques d'affilée.
+- **Espace.** Les presets ont des espacements réglés : ne les réduisez pas pour « faire tenir ». Une page qui respire fait haut de gamme.
+- **Cohérence.** Mêmes ratios d'images dans une liste (portrait 4:5 pour la mode, carré pour les objets), mêmes styles de boutons, même alignement de texte par page (centré pour les sections courtes, aligné à gauche pour la lecture).
+- **Longueur de l'accueil.** 7 à 10 sections. Chaque section doit servir la vente : promesse, produits, preuve, réassurance, marque.
+- **Photos.** Une photo de qualité vaut mieux que trois moyennes. Les visuels d'exemple du thème ne doivent jamais partir en ligne.
+- **Animations.** Celles des presets suffisent. Un seul effet fort par page (zoom au défilement, cartes empilées, scrollytelling).
+- **Mobile d'abord.** Tailles mobiles des titres (size_mobile), stack_on_mobile, bannière avec image mobile dédiée si le visuel est large.
+- **Sobriété commerciale.** Pas de pop-up à l'arrivée, une seule pop-up au total, pas d'urgence inventée, pas de superlatifs sans preuve.`,
+  },
+
+  couleurs: {
+    title: 'Couleurs et palettes',
+    body: `Le thème a deux niveaux :
+- **La palette globale** (réglage palette) : background, surface, text, text_muted, accent_1, accent_2, border, shadow, stars.
+- **Les palettes de couleurs** (color_schemes) appliquées aux sections : background-1 (fond principal), background-2 (fond alterné), inverse (fond sombre), scheme (couleur de marque en fond). Rôles : text = titres, text_secondary = texte courant, background, background_secondary (surfaces, cartes), accent-1 et accent-2 (boutons, liens, badges), dégradés optionnels.
+
+Les boutons prennent leurs couleurs selon button_1_palette, button_2_palette, button_3_palette (accent-1, accent-2, text, bg_fade, *-outline) : un bouton accent-1 a le fond accent-1 et le texte de la couleur du fond de la section. Il faut donc un contraste accent-1 / background d'au moins 4,5:1 dans chaque palette.
+
+Méthode :
+1. generate_color_schemes avec la couleur de marque (et une secondaire si elle existe). Le générateur ajuste la luminosité si nécessaire et le signale.
+2. update_theme_settings avec color_schemes, palette et les button_*_palette proposés.
+3. Contrôle : aucun contraste 🔴 dans review_project. Titres et texte ≥ 4,5:1, boutons ≥ 4,5:1.
+4. Usage : 60 % background-1, 30 % background-2, 10 % inverse ou scheme.
+
+Couleurs de marque trop claires (jaune, pastel) : elles restent superbes en fond (palette scheme, bandeaux), mais les boutons utilisent une version foncée.`,
+  },
+
+  typographie: {
+    title: 'Typographie',
+    body: `- Deux polices au plus : headings_font (titres) et body_font (texte). Elles doivent exister dans la bibliothèque de polices Shopify : find_fonts vérifie, et les identifiants inconnus sont refusés à l'import.
+- Certaines polices historiques sont **dépréciées** par Shopify (Futura, Avenir Next, Helvetica, Gill Sans…) : utilisez leur remplaçante (Jost, Figtree…).
+- Paires éprouvées : find_fonts sans argument les liste par style (éditorial, minimal, tech, naturel…).
+- Réglages utiles : headings_uppercase (à réserver aux polices condensées ou aux titres très courts), headings_letter_spacing, heading_1_font_size / heading_2_font_size et leurs tailles mobiles, body_size (16 px minimum).
+- Dans les blocs heading, custom_size + size_desktop / size_mobile ajustent un titre précis ; préférez les tailles du thème pour garder la cohérence.`,
+  },
+
+  accueil: {
+    title: "Page d'accueil",
+    body: `Structure qui fonctionne (adapter, pas copier) :
+1. **Héro** (banner ou slideshow) : promesse + bouton vers la collection principale. Titre en <h1>.
+2. **Réassurance express** (marquee Scrolling text ou multicolumn Icons with text) : livraison, retours, paiement, avis.
+3. **Produits** (product-list Featured collection ou Collection tabs) : ce qui se vend le mieux.
+4. **Univers / collections** (collection-list) si plusieurs familles.
+5. **Marque** (image-with-text Brand story) : pourquoi vous.
+6. **Preuve sociale** (testimonials, reviews, ugc, logo-list).
+7. **Objections** (faq) ou comparaison (comparison).
+8. **Newsletter**.
+
+Recettes prêtes : accueil-essentiel, accueil-marque-premium, accueil-produit-phare, accueil-catalogue, accueil-beaute, accueil-artisan (outil recipes).`,
+  },
+
+  'fiche-produit': {
+    title: 'Fiche produit',
+    body: `Le modèle templates/product.json repose sur la section main-product-composed : galerie (product-media) à gauche, colonne de blocs à droite, barre d'achat collante (product-sticky-bar).
+
+Ordre conseillé dans la colonne : note (product-rating) → titre (product-title, niveau h1) → prix (product-price) → variantes (product-variants) → stock réel (product-stock, source shopify) → offres éventuelles (product-offers) → quantité → bouton (product-buy) → réassurance (checklist ou trust-badges) → date de livraison (product-delivery) → description → accordéons (composition, entretien, livraison et retours).
+
+Sous la fiche : bénéfices (image-with-text), avis (testimonials / reviews), FAQ produit, produits associés (product-list Related products).
+
+Extras disponibles : guide des tailles (product-size-guide), personnalisation (product-custom-field), barre livraison offerte (product-shipping-bar), messages tournants (product-spin-message), compléments (product-addons), abonnement (product-subscription).
+
+Pour un produit particulier, créez un modèle alternatif (templates/product.<nom>.json) plutôt que de surcharger le modèle principal.`,
+  },
+
+  offres: {
+    title: 'Offres, lots et remises',
+    body: `**Le thème ne fixe jamais un prix.** Les blocs d'offre affichent ce que le marchand a configuré ; c'est Shopify qui facture, via une réduction automatique (une par palier), un plan d'abonnement ou le code de l'offre, appliqué après l'ajout au panier.
+
+- product-offers : paliers de quantité, X achetés Y offert, lots de produits, cadeaux, packs vendus comme variante. Chaque _offer = un choix.
+- product-subscription : lit les plans de vente d'une application d'abonnement.
+- product-addons : compléments ajoutés avec le produit, cadeau à choisir, souvent achetés ensemble.
+- bundle-builder : lot à composer (les paliers sont des estimations : créez les réductions automatiques correspondantes).
+- Panier : _cart-rewards (paliers de récompense), _cart-upsells.
+
+Pièges : Shopify applique la meilleure réduction, pas forcément celle de la carte ; deux réductions « X achetés Y offert » sur le même produit ne se cumulent pas. Toujours passer une commande test.
+
+Modèles d'exemple dans le thème : product.offers-quantity, -bogo, -bundle, -packs, -subscription, -minimal.`,
+  },
+
+  'entete-pied': {
+    title: 'En-tête, barre d’annonce et pied de page',
+    body: `**En-tête** (sections/header-group.json, section header) : trois rangées statiques (header-top, header-main, header-bottom), chacune avec trois zones statiques (left, center, right), plus le tiroir mobile (header-drawer). Les blocs se placent dans les zones : _header-logo, _header-menu (menu vide = menu principal), _header-search, _header-account, _header-cart, _header-wishlist, _header-localization, _header-link, _header-socials, _header-drawer-toggle. Chaque bloc a show_on (all, desktop, mobile) : pour une mise en page mobile, placez des blocs dédiés au mobile. Méga menu : blocs _header-mega dans _header-menu.
+Réglages de la section : sticky (none, always, scroll_up), transparent (off, home, all, auto : transparent sur un héro plein écran), overlay derrière les menus.
+
+**Barre d'annonce** (section announcement-bar, dans le même groupe) : zones left/center/right, messages (_announcement) dans _header-announcements (rotation, défilement, machine à écrire). 1 à 3 messages courts, chacun vrai.
+
+**Pied de page** (sections/footer-group.json) : section footer faite de groupes (colonnes) contenant logo, text, social-links, menu, newsletter, contact-info, copyright, policy-links, payment-icons, localization. Le groupe du thème contient aussi une section de réassurance (4 colonnes) et une pop-up newsletter : adaptez ou supprimez.`,
+  },
+
+  pages: {
+    title: 'Pages de contenu',
+    body: `Modèles fournis : page (contenu saisi dans l'administration), page.story (à propos), page.contact, page.faq, page.help, page.tracking (suivi de commande), page.wishlist (favoris), 404.
+Une page Shopify n'utilise un modèle alternatif que si on le lui attribue (Pages > la page > Modèle de thème).
+- À propos : recette page-a-propos.
+- Contact : section contact (coordonnées + formulaire) + FAQ au-dessus ou en dessous.
+- FAQ : une seule section faq avec structured_data par page.
+- Suivi : section order-tracking.
+- Mentions légales, CGV, confidentialité : Paramètres > Politiques (liens automatiques via le bloc policy-links).`,
+  },
+
+  redaction: {
+    title: 'Rédaction des textes',
+    body: `- Vouvoiement en français, sauf marque qui tutoie déjà partout.
+- Concret plutôt qu'emphatique : « Livrée en 48 h » plutôt que « Une livraison ultra rapide ». Aucun superlatif sans preuve.
+- Titres : 2 à 8 mots, un bénéfice. Boutons : un verbe + un objet (« Voir la collection », « Découvrir le coffret »).
+- Réassurance : faits vérifiables (délais, conditions de retour, moyens de paiement).
+- Avis, chiffres, presse : uniquement réels. Si le marchand n'en a pas encore, retirez la section plutôt que d'inventer.
+- Une langue par boutique : aucun texte d'exemple anglais ne doit rester sur une boutique française (review_project le signale).
+- Texte riche : <p>…</p> par paragraphe, <strong> pour mettre un mot en valeur (le style de titre du thème colore le gras), <h1> uniquement pour le titre principal de la page.`,
+  },
+
+  images: {
+    title: 'Images et médias',
+    body: `Les photos font la différence entre une boutique « propre » et une boutique qui claque. Le MCP ne télécharge rien lui-même : il place des fichiers déjà présents dans Contenu > Fichiers (shopify://shop_images/<nom-exact>).
+
+**Avec un connecteur Shopify (recommandé, avant build_store)**
+1. Lire les photos disponibles : collections { title handle image { url width height } } et products { title handle featuredImage { url width height } images(first: 5) { nodes { url width height } } }.
+2. Choisir : pour le héro, une photo large (plus large que haute), lumineuse, en situation ; pour l'histoire et l'ambiance, 2 à 4 photos variées. Éviter les packshots sur fond blanc en héro. Noter la largeur de chaque photo : en dessous de 1600 px, elle est floue en plein écran.
+3. Les copier dans Fichiers :
+   mutation { fileCreate(files: [{ originalSource: "<url>", contentType: IMAGE, filename: "<marque>-hero.jpg", alt: "<description>", duplicateResolutionMode: REPLACE }]) { files { id fileStatus } userErrors { field message } } }
+4. Attendre que fileStatus soit READY (query files(first: 10, query: "filename:<marque>-*") { nodes { ... on MediaImage { image { url } } fileStatus } }). Le nom du fichier est la fin de l'URL, sans le « ?v= ».
+5. build_store avec images: { hero: "<marque>-hero.jpg", story: [...], lifestyle: [...], large: [les photos de 1600 px ou plus] }. Seules les photos de large vont en plein écran (zoom au défilement, héro des pages de marque) ; les autres restent dans des blocs plus petits. Pour changer une image ensuite : edit_template → update_settings { image: "shopify://shop_images/<nom>" }.
+
+**Sans photo** : build_store fait un héro typographique sur la couleur de marque et remplace les sections qui en ont besoin (aucun carré « image manquante »). Les listes de produits et de collections montrent déjà les photos du catalogue.
+
+Formats conseillés :
+- Héro : 2400 × 1350 px (paysage) + une version portrait 1080 × 1350 pour le mobile si le visuel est large.
+- Plein écran (héro, zoom au défilement, héro des pages de marque) : 1600 px de large au minimum, sinon l'image est floue.
+- Image avec texte : 1600 px de large, 4:5 ou 1:1.
+- Cartes produit : un seul ratio pour tout le catalogue (4:5 mode, 1:1 objets), fond homogène.
+- Logo : SVG ou PNG transparent, deux fois la taille affichée.
+- Vidéo de fond : MP4 H.264, 10 à 20 s, sans son, moins de 10 Mo, avec une image de couverture.
+- Texte alternatif : sur chaque image (accessibilité et référencement).`,
+  },
+
+  'seo-performance': {
+    title: 'Référencement et performance',
+    body: `- Un <h1> par page. Les titres de section en <h2>/<p>.
+- FAQ : structured_data sur une seule section faq par page (données FAQPage). Fil d'Ariane (breadcrumb) : données BreadcrumbList.
+- Titres et descriptions de pages : dans l'administration (Préférences, et « Référencement » sur chaque produit, collection, page).
+- Première section : ses images chargent en priorité, les suivantes en différé : gardez le héro léger (une image optimisée plutôt qu'une vidéo lourde si la vidéo n'apporte rien).
+- Chaque vidéo, carrousel automatique et application tierce ajoute du poids : gardez ceux qui vendent.
+- minify_scripts doit rester activé.`,
+  },
+
+  accessibilite: {
+    title: 'Accessibilité',
+    body: `- Contraste texte / fond ≥ 4,5:1, boutons compris (review_project le vérifie pour chaque palette).
+- Textes alternatifs sur les images.
+- Pas d'information portée par la couleur seule.
+- Carrousels : le thème gère le clavier et la pause ; évitez l'autoplay rapide.
+- Animations : le thème respecte « réduire les animations » du système.
+- Libellés de boutons explicites (« Voir la collection Été », pas « Cliquez ici »).`,
+  },
+
+  lancement: {
+    title: 'Mise en ligne',
+    body: `1. review_project sans aucun 🔴.
+2. export_theme, puis dans Shopify : Boutique en ligne > Thèmes > Ajouter un thème > Importer un fichier zip. Le thème arrive non publié : l'ouvrir dans l'éditeur, ajouter logo et images, vérifier chaque page sur ordinateur et sur mobile.
+3. Créer ce que la check-list demande (collections, pages avec leur modèle, menus, réductions des offres, applications d'avis ou d'abonnement).
+4. Paramètres : politiques, paiements, expédition, taxes, domaine, notifications. En France : mentions légales, CGV avec rétractation 14 jours, médiateur de la consommation, bannière cookies.
+5. Commande test complète.
+6. Publier le thème, puis retirer le mot de passe de la boutique.`,
+  },
+
+  limites: {
+    title: 'Ce que le MCP (V1) ne fait pas',
+    body: `- Il ne se connecte à aucune boutique : il fabrique un thème (zip) à importer, il ne publie rien.
+- Il ne crée ni produits, ni collections, ni menus, ni pages, ni réductions, ni images : il les liste dans la check-list.
+- Il ne modifie jamais le code du thème (Liquid, CSS, JS) : seulement les modèles, les groupes de sections et les réglages, comme l'éditeur de thème.
+- Il ne garantit pas le rendu visuel : prévisualisez toujours dans l'éditeur Shopify avant de publier.`,
+  },
+};
+
+GUIDES.signatures = {
+  title: 'Faire une boutique brandée : directions, effets signature, pages originales',
+  body: `Une boutique qui claque = une direction artistique tenue + 2 ou 3 moments signature par page + des pages de marque propres au produit. Tout se fait avec build_store (direction, copy) puis compose_page.
+
+**Directions artistiques** (build_store direction) : editorial (angles vifs, sous-titres en capitales, transition rideau), minimal, organique (formes organiques animées entre sections), artisan (bords déchirés), douceur (courbes, cartes arrondies), pop (festons, survol en inclinaison, transition en cercle), energie (capitales, pentes, reflet sur les boutons), tech (projecteur au survol). Elles règlent arrondis, boutons, survols, transitions de page, séparateurs.
+
+**Effets signature et contenu à donner à compose_page**
+- Manifeste qui s'illumine mot à mot : rich-text preset « Big statement », content.manifesto. Idéal après le héro ou les collections.
+- Mots qui tournent dans un titre : content.rotating_words (3 à 5 mots, le titre se termine avant eux).
+- Mot fort en couleur : **mot** dans un titre (le style de titre colore le gras).
+- Cartes empilées au défilement : scroll-cards, items { title, text, button, palette (scheme / background-2 / inverse), image }. Superbe même sans photo, avec des palettes alternées.
+- Frise : timeline « Our story » (items { label: année, title, text }) ou « How it works » (items { title, text, icon }).
+- Scrollytelling (média collant qui change à chaque étape) : scroll-story, items { title, text, image } : uniquement avec photos.
+- Zoom au défilement : scroll-zoom, image + content.title.
+- Défilement horizontal : scroll-horizontal, images + items { title, text } (légende de chaque photo, titre en gras).
+- Image interactive : hotspots, image + items { title, text, product }.
+- Avant / après : before-after, deux vraies photos.
+- Comparatif : comparison, items { label, values: [true, false, "texte"] } (colonnes : nous, eux).
+- Caractéristiques : specifications, items { label, value, icon }.
+- Chiffres (réels uniquement) : stats « Key figures » items { value: "{120}K+", label } ; « Results » items { value: 0-100, label }.
+- Bandeau défilant : marquee, content.lines.
+- Formes entre sections : separator { top, bottom, animation } : curve, wave, waves, organic, tilt, peak, zigzag, scallop, clouds, mountains, torn, drip, fade, line ; animation flow, swell, grow, parallax. À poser sur les sections colorées (palette background-2, inverse, scheme).
+- Icônes : apple, banana, bottle, box, carrot, chat_bubble, check_mark, clipboard, dairy, eye, fire, heart, leaf, leather, lightning_bolt, lipstick, lock, map_pin, paw_print, perfume, plane, plant, price_tag, recycle, return, ruler, shirt, shoe, snowflake… (get_block icon pour la liste complète).
+
+**Pages de marque à proposer selon le produit** (compose_page, fichier templates/page.<nom>.json)
+- Notre histoire (créée par build_store) : manifeste, frise, valeurs, chiffres réels.
+- Comment utiliser / porter / entretenir (créée par build_store) : étapes à icônes, astuces en cartes, FAQ d'usage, produits.
+- Ingrédients / matières : specifications, hotspots sur une photo, multicolumn « Features with images ».
+- Lookbook / inspirations : gallery « Lookbook », scroll-horizontal, hotspots « Shop the look ».
+- Guide cadeaux : collection-list, product-list par budget, rich-text.
+- Comparatif / pourquoi nous : comparison, calculator (coût par usage), stats réels.
+- Landing de campagne : banner, countdown (vraie date), featured-product, comparison, FAQ.
+
+**Règles** : 7 à 10 sections par page, alterner visuel et texte, une section colorée sur trois, un seul effet fort par écran, jamais de faux chiffres ni de faux avis.`,
+};
+
+export const GUIDE_TOPICS = Object.keys(GUIDES);

package/src/knowledge/recipes.js

@@ -0,0 +1,253 @@
+// Page compositions built only from the theme's own presets, so every recipe renders the way the
+// theme was designed and validates by construction (tests apply each one). Preset names are the
+// English ones (stable); texts come out in the project's language.
+//
+// A step can add blocks inside the section: `into` is the type of the container block (first one
+// found), `after` the type of the sibling to insert after.
+
+export const RECIPES = [
+  {
+    id: 'accueil-essentiel',
+    template: 'templates/index.json',
+    title: 'Accueil essentiel',
+    for: 'Toute boutique qui démarre : un parcours clair de la promesse à l’inscription.',
+    why: 'Promesse, réassurance, produits, marque, bénéfices, preuve sociale, objections, fidélisation : l’ordre dans lequel un visiteur se convainc.',
+    steps: [
+      { type: 'banner', preset: 'Image banner', role: 'Héro : promesse en 4 à 8 mots en <h1>, une phrase, bouton vers la collection principale' },
+      { type: 'marquee', preset: 'Scrolling text', role: 'Réassurance express : livraison, retours, paiement, avis (4 messages courts)', settings: { color_palette: 'inverse' } },
+      { type: 'product-list', preset: 'Featured collection', role: 'Meilleures ventes : choisir la collection la plus vendue (source collection)' },
+      { type: 'image-with-text', preset: 'Brand story', role: 'Pourquoi la marque existe : 3 phrases vraies, une photo de l’équipe ou de l’atelier', settings: { color_palette: 'background-2' } },
+      { type: 'multicolumn', preset: 'Icons with text', role: '3 ou 4 bénéfices concrets, une icône chacun' },
+      { type: 'testimonials', preset: 'Testimonials carousel', role: 'Vrais avis clients avec prénom', settings: { color_palette: 'background-2' } },
+      { type: 'faq', preset: 'FAQ', role: '4 à 6 questions qui bloquent l’achat (délais, retours, tailles, composition)' },
+      { type: 'newsletter', preset: 'Newsletter', role: 'Une vraie raison de s’inscrire (nouveautés, conseils, avant-premières)' },
+    ],
+  },
+  {
+    id: 'accueil-marque-premium',
+    template: 'templates/index.json',
+    title: 'Accueil marque premium',
+    for: 'Mode, bijoux, maroquinerie, cosmétique haut de gamme : l’image de marque d’abord.',
+    why: 'Grands visuels, peu de texte, rythme lent. La vidéo et le zoom au défilement installent l’univers ; la presse et un témoignage incarné rassurent sans crier.',
+    steps: [
+      { type: 'banner', preset: 'Video banner', role: 'Film de marque court (10 à 20 s, sans son), promesse courte en <h1>' },
+      { type: 'collection-list', preset: 'Collection banners', role: '2 ou 3 univers en grand format' },
+      { type: 'product-list', preset: 'Immersive products', role: 'Pièces signatures, 4 à 8 produits' },
+      { type: 'scroll-zoom', preset: 'Expanding image', role: 'Une image forte de l’univers, une phrase manifeste' },
+      { type: 'image-with-text', preset: 'Details that matter', role: 'Savoir-faire : matière, geste, origine', settings: { color_palette: 'background-2' } },
+      { type: 'logo-list', preset: 'Press logos', role: 'Uniquement de vrais passages presse' },
+      { type: 'testimonials', preset: 'Testimonial with image', role: 'Un témoignage incarné, avec photo' },
+      { type: 'newsletter', preset: 'Newsletter with image', role: 'Accès en avant-première aux collections' },
+    ],
+  },
+  {
+    id: 'accueil-produit-phare',
+    template: 'templates/index.json',
+    title: 'Accueil produit phare (DTC)',
+    for: 'Marque d’un ou deux produits (complément, accessoire, soin, objet malin) : l’accueil vend le produit.',
+    why: 'Le visiteur doit comprendre le produit, le comparer, voir les preuves et acheter sans quitter la page.',
+    steps: [
+      { type: 'banner', preset: 'Split banner', role: 'Produit en situation + promesse chiffrée si elle est prouvée' },
+      { type: 'logo-list', preset: 'Logo row', role: 'Labels, certifications ou presse' },
+      { type: 'multicolumn', preset: 'Benefits', role: 'Les 3 bénéfices qui font acheter', settings: { color_palette: 'background-2' } },
+      { type: 'featured-product', preset: 'Product showcase', role: 'Le produit phare, achetable ici (choisir le produit)', settings: { color_palette: 'background-1' } },
+      { type: 'comparison', preset: 'Us vs them', role: 'Nous contre l’alternative habituelle : critères honnêtes et vérifiables' },
+      { type: 'reviews', preset: 'Rating banner', role: 'Note moyenne réelle et nombre d’avis', settings: { color_palette: 'background-2' } },
+      { type: 'testimonials', preset: 'Testimonials wall', role: 'Avis détaillés', settings: { color_palette: 'background-1' } },
+      { type: 'faq', preset: 'FAQ', role: 'Objections produit : utilisation, résultats, composition, garantie' },
+      { type: 'newsletter', preset: 'Newsletter with discount', role: 'Offre de bienvenue (créer le code dans Réductions)' },
+    ],
+  },
+  {
+    id: 'accueil-catalogue',
+    template: 'templates/index.json',
+    title: 'Accueil grand catalogue',
+    for: 'Maison, déco, épicerie, concept store : beaucoup de produits et plusieurs univers.',
+    why: 'Faire entrer vite dans le bon rayon : catégories visuelles, onglets de collections, nouveautés.',
+    steps: [
+      { type: 'slideshow', preset: 'Slideshow', role: '2 ou 3 campagnes de même importance (sinon une bannière)' },
+      { type: 'collection-list', preset: 'Shop by category', role: 'Les rayons principaux, 4 à 8' },
+      { type: 'product-list', preset: 'Collection tabs', role: 'Nouveautés / Meilleures ventes / Petits prix' },
+      { type: 'image-with-text', preset: 'Brand story', role: 'Ce qui rend la sélection unique', settings: { color_palette: 'background-2' } },
+      { type: 'product-list', preset: 'Product carousel', role: 'Une sélection thématique (saison, idées cadeaux)' },
+      { type: 'multicolumn', preset: 'Icons with text', role: 'Livraison, retours, paiement, service client' },
+      { type: 'testimonials', preset: 'Testimonials grid', role: 'Vrais avis clients', settings: { color_palette: 'background-2' } },
+      { type: 'blog-posts', preset: 'Blog posts', role: 'Conseils et inspirations (SEO)' },
+      { type: 'newsletter', preset: 'Newsletter', role: 'Nouveautés et offres' },
+    ],
+  },
+  {
+    id: 'accueil-beaute',
+    template: 'templates/index.json',
+    title: 'Accueil beauté et bien-être',
+    for: 'Cosmétique, soin, bien-être : résultats, ingrédients et confiance.',
+    why: 'Le client achète un résultat : il faut le montrer (avant/après, chiffres mesurés), l’expliquer et le faire confirmer par d’autres clients.',
+    steps: [
+      { type: 'banner', preset: 'Image banner', role: 'Promesse de résultat, visuel texture ou peau' },
+      { type: 'product-list', preset: 'Featured collection', role: 'Routine ou best-sellers' },
+      { type: 'image-with-text', preset: 'Product benefits', role: 'Actifs clés et ce qu’ils font', settings: { color_palette: 'background-2' } },
+      { type: 'before-after', preset: 'Transformation', role: 'Uniquement de vraies photos, même lumière' },
+      { type: 'stats', preset: 'Results', role: 'Résultats de tests mesurés (source citée)' },
+      { type: 'ugc', preset: 'Shop our Instagram', role: 'Photos clientes' },
+      { type: 'testimonials', preset: 'Testimonials grid', role: 'Avis détaillés par type de peau', settings: { color_palette: 'background-2' } },
+      { type: 'faq', preset: 'FAQ', role: 'Peaux sensibles, grossesse, conservation, composition' },
+      { type: 'newsletter', preset: 'Newsletter with discount', role: 'Offre de bienvenue' },
+    ],
+  },
+  {
+    id: 'accueil-artisan',
+    template: 'templates/index.json',
+    title: 'Accueil artisan et producteur',
+    for: 'Épicerie fine, artisanat, producteur local, fait main.',
+    why: 'L’humain et l’origine vendent : manifeste, histoire, étapes de fabrication, avis.',
+    steps: [
+      { type: 'banner', preset: 'Split banner', role: 'Le produit et la main qui le fait' },
+      { type: 'rich-text', preset: 'Big statement', role: 'Manifeste en une phrase' },
+      { type: 'collection-list', preset: 'Collection grid', role: 'Gammes' },
+      { type: 'product-list', preset: 'Featured collection', role: 'Produits de saison ou incontournables' },
+      { type: 'timeline', preset: 'How it works', role: 'De la matière première au colis', settings: { color_palette: 'background-2' } },
+      { type: 'image-with-text', preset: 'Brand story', role: 'Qui est derrière' },
+      { type: 'reviews', preset: 'Reviews', role: 'Avis clients', settings: { color_palette: 'background-2' } },
+      { type: 'newsletter', preset: 'Newsletter', role: 'Arrivages et recettes', settings: { color_palette: 'background-1' } },
+    ],
+  },
+  {
+    id: 'produit-complet',
+    template: 'templates/product.json',
+    title: 'Fiche produit complète',
+    for: 'La fiche produit par défaut de toute boutique.',
+    why: 'Tout ce qui décide l’achat près du bouton (prix, variantes, stock réel, réassurance, délai), puis les preuves et les objections sous la ligne de flottaison.',
+    steps: [
+      {
+        type: 'main-product-composed',
+        preset: 'Product page',
+        role: 'Galerie, titre, note, prix, variantes, stock, quantité, achat, réassurance, livraison, description, détails',
+        blocks: [
+          { type: 'product-stock', preset: 'Stock', into: 'group', after: 'product-variants' },
+          { type: 'checklist', preset: 'Checklist', into: 'group', after: 'product-buy' },
+          { type: 'product-delivery', preset: 'Delivery date', into: 'group', after: 'checklist' },
+          { type: 'accordion', preset: 'Accordion / FAQ', into: 'group', after: 'product-description' },
+        ],
+      },
+      { type: 'image-with-text', preset: 'Product benefits', role: 'Ce que le produit change pour le client' },
+      { type: 'testimonials', preset: 'Testimonials carousel', role: 'Avis clients', settings: { color_palette: 'background-2' } },
+      { type: 'faq', preset: 'FAQ', role: 'Questions sur ce type de produit' },
+      { type: 'product-list', preset: 'Related products', role: 'Produits associés (recommandations Shopify)' },
+    ],
+  },
+  {
+    id: 'produit-offres',
+    template: 'templates/product.offres.json',
+    title: 'Fiche produit avec offres',
+    for: 'Produit consommable ou à racheter : paliers de quantité, lots, cadeau.',
+    why: 'Les paliers augmentent le panier moyen quand la remise est réelle et appliquée par Shopify (réduction automatique par palier).',
+    steps: [
+      {
+        type: 'main-product-composed',
+        preset: 'Product with offers',
+        role: 'Offres par paliers, compléments, achat',
+        blocks: [
+          { type: 'checklist', preset: 'Checklist', into: 'group', after: 'product-buy' },
+          { type: 'product-delivery', preset: 'Delivery date', into: 'group', after: 'checklist' },
+        ],
+      },
+      { type: 'multicolumn', preset: 'Benefits', role: 'Bénéfices', settings: { color_palette: 'background-2' } },
+      { type: 'comparison', preset: 'Us vs them', role: 'Pourquoi ce produit plutôt qu’un autre' },
+      { type: 'reviews', preset: 'Reviews', role: 'Note et avis', settings: { color_palette: 'background-2' } },
+      { type: 'faq', preset: 'FAQ', role: 'Utilisation, fréquence de rachat, conservation' },
+      { type: 'product-list', preset: 'Related products', role: 'Compléments' },
+    ],
+  },
+  {
+    id: 'produit-storytelling',
+    template: 'templates/product.json',
+    title: 'Fiche produit storytelling (premium)',
+    for: 'Produit cher ou technique qu’il faut raconter : mobilier, montre, électronique, soin haut de gamme.',
+    why: 'Une vidéo collante qui raconte le produit, des caractéristiques précises, un témoignage incarné.',
+    steps: [
+      { type: 'main-product-composed', preset: 'Product page', role: 'Achat', blocks: [{ type: 'checklist', preset: 'Checklist', into: 'group', after: 'product-buy' }] },
+      { type: 'video', preset: 'Sticky video', role: 'Le produit en usage, avec bénéfices et accordéons à côté' },
+      { type: 'image-with-text', preset: 'Details that matter', role: 'Matières et finitions', settings: { color_palette: 'background-2' } },
+      { type: 'specifications', preset: 'Specifications', role: 'Dimensions, poids, matière, entretien, garantie' },
+      { type: 'testimonials', preset: 'Testimonial with image', role: 'Un client, une photo, une phrase' },
+      { type: 'product-list', preset: 'Related products', role: 'À associer' },
+    ],
+  },
+  {
+    id: 'collection-complete',
+    template: 'templates/collection.json',
+    base: 'templates/collection.json',
+    title: 'Page collection complète',
+    for: 'Toutes les collections : la page collection du thème (filtres, tri, grille) enrichie.',
+    why: 'La grille et les filtres du thème, puis un texte de collection pour le référencement et les produits vus récemment pour reprendre là où le client s’est arrêté.',
+    steps: [
+      { type: 'rich-text', preset: 'Rich text', role: 'Texte de collection utile (conseils de choix, matières) : 80 à 150 mots, pas de bourrage de mots-clés' },
+      { type: 'product-list', preset: 'Recently viewed products', role: 'Reprise de navigation, rien à régler' },
+    ],
+  },
+  {
+    id: 'page-a-propos',
+    template: 'templates/page.story.json',
+    title: 'Page À propos',
+    for: 'Raconter la marque (modèle page.story).',
+    why: 'Manifeste, histoire, étapes, chiffres, valeurs : de quoi donner confiance à un client qui hésite.',
+    steps: [
+      { type: 'banner', preset: 'Image banner', role: 'Titre de page en <h1> (ex. « Notre histoire »), photo des fondateurs ou de l’atelier' },
+      { type: 'rich-text', preset: 'Big statement', role: 'La conviction de la marque en une phrase' },
+      { type: 'image-with-text', preset: 'Brand story', role: 'Le déclic, le début' },
+      { type: 'timeline', preset: 'Our story', role: 'Dates réelles' },
+      { type: 'stats', preset: 'Key figures', role: 'Chiffres vrais uniquement', settings: { color_palette: 'background-2' } },
+      { type: 'multicolumn', preset: 'Icons with text', role: 'Valeurs, chacune prouvée par un fait' },
+      { type: 'newsletter', preset: 'Newsletter', role: 'Rester en contact' },
+    ],
+  },
+  {
+    id: 'page-contact',
+    template: 'templates/page.contact.json',
+    title: 'Page Contact',
+    for: 'Contact et service client (modèle page.contact).',
+    why: 'Répondre avant qu’on écrive : la FAQ au-dessus du formulaire réduit les messages.',
+    steps: [
+      { type: 'contact', preset: 'Contact', role: 'Coordonnées, horaires, formulaire' },
+      { type: 'faq', preset: 'FAQ with contact', role: 'Questions les plus fréquentes au service client', settings: { color_palette: 'background-2' } },
+    ],
+  },
+  {
+    id: 'page-faq',
+    template: 'templates/page.faq.json',
+    title: 'Page FAQ',
+    for: 'FAQ complète par thèmes (modèle page.faq).',
+    why: 'Une seule FAQ structurée par page : rangée par thèmes, elle se lit vite et nourrit le référencement.',
+    steps: [{ type: 'faq', preset: 'FAQ by topic', role: 'Commande, livraison, retours, produits, paiement' }],
+  },
+  {
+    id: 'page-suivi-commande',
+    template: 'templates/page.tracking.json',
+    title: 'Page Suivi de commande',
+    for: 'Suivi de colis (modèle page.tracking).',
+    why: 'Moins de « où est ma commande ? » au service client.',
+    steps: [
+      { type: 'order-tracking', preset: 'Order tracking', role: 'Recherche par numéro de suivi' },
+      { type: 'faq', preset: 'FAQ', role: 'Délais, transporteurs, colis en retard', settings: { color_palette: 'background-2' } },
+    ],
+  },
+  {
+    id: 'landing-offre',
+    template: 'templates/page.offre.json',
+    title: 'Landing page d’offre',
+    for: 'Campagne publicitaire, lancement, soldes (modèle page.offre à attribuer à une page).',
+    why: 'Une page, un message, un produit : pas de distraction entre la publicité et l’achat.',
+    steps: [
+      { type: 'banner', preset: 'Image banner', role: 'Reprendre mot pour mot la promesse de la publicité' },
+      { type: 'countdown', preset: 'Limited offer banner', role: 'Uniquement avec une vraie date de fin' },
+      { type: 'featured-product', preset: 'Featured product', role: 'Le produit de la campagne' },
+      { type: 'comparison', preset: 'Us vs them', role: 'Pourquoi maintenant, pourquoi nous', settings: { color_palette: 'background-2' } },
+      { type: 'testimonials', preset: 'Testimonials grid', role: 'Preuves' },
+      { type: 'faq', preset: 'FAQ', role: 'Conditions de l’offre, livraison, retours' },
+    ],
+  },
+];
+
+export function findRecipe(id) {
+  return RECIPES.find((recipe) => recipe.id === id) || null;
+}