{ "schemaVersion": 1, "idPolicy": { "prefix": "SEC", "digits": 3, "immutableNumbers": true, "reuseRetiredNumbers": false }, "pageChrome": { "required": ["skip-link", "navigation", "footer-signature"], "notes": [ "Le chrome de page ne fait pas partie de la recette numerotee.", "Le skip link est le premier controle focusable et cible le contenu principal.", "La signature finale suit le contrat bayou-seal et utilise le glyphe Terre." ] }, "runtime": { "pathsRelativeTo": "public/brand", "stylesheets": ["styles.css", "sections/sections.css"], "scripts": ["sections/sections.js"], "assetBase": "assets/", "externalScripts": [ { "id": "lucide", "package": "lucide", "version": "0.468.0", "url": "https://unpkg.com/lucide@0.468.0/dist/umd/lucide.min.js", "integrity": "sha384-uTYyvsSSUZeaPhb5RbKlQa0zY/WpX/QHfvg2mczXyBQOpkWPEDy9lczyp+w7SKXu", "crossorigin": "anonymous", "referrerPolicy": "no-referrer" } ] }, "sections": [ { "id": "SEC-001", "number": 1, "slug": "product-stage-centered", "name": "ProductStage centré", "revision": 1, "status": "stable", "category": "hero", "purpose": "Ouvrir par une promesse courte et une preuve produit 16:9 dominante.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "stage" }, "definition": "definitions/SEC-001.json", "snippet": "snippets/SEC-001.html", "preview": { "path": "section-templates.html", "anchor": "stage" }, "slots": { "required": ["eyebrow", "title", "lede", "primaryAction", "productImage"], "optional": ["secondaryAction", "windowLabel"] }, "items": { "min": 1, "max": 1 }, "compatibility": { "themes": ["*"], "allowedBefore": [], "allowedAfter": ["SEC-002", "SEC-003", "SEC-005", "SEC-006", "SEC-012"] }, "requirements": { "components": ["Button"], "assets": ["productImage"], "interactions": [], "accessibility": ["descriptive-image-alt", "single-primary-action"] }, "usage": { "when": "Le produit est deja montrable et constitue la preuve principale.", "avoid": "La proposition de valeur exige d'abord du contexte ou une comparaison." }, "tags": ["hero", "product", "proof", "centered"] }, { "id": "SEC-002", "number": 2, "slug": "feature-gallery", "name": "FeatureGallery", "revision": 1, "status": "stable", "category": "explanation", "purpose": "Balayer plusieurs capacites avec une preuve visuelle et une explication courte par item.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "gallery" }, "definition": "definitions/SEC-002.json", "snippet": "snippets/SEC-002.html", "preview": { "path": "section-templates.html", "anchor": "gallery" }, "slots": { "required": ["title", "features"], "optional": ["intro"] }, "items": { "min": 3, "max": 6 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-009"], "allowedAfter": ["SEC-004", "SEC-005", "SEC-007", "SEC-010"] }, "requirements": { "components": ["Card"], "assets": ["featureImages"], "interactions": [], "accessibility": ["descriptive-image-alt", "logical-heading-order"] }, "usage": { "when": "Plusieurs capacites independantes doivent etre comprises d'un coup d'oeil.", "avoid": "Les items racontent une sequence ou depassent six preuves." }, "tags": ["features", "gallery", "grid", "proof"] }, { "id": "SEC-003", "number": 3, "slug": "feature-rail", "name": "FeatureRail", "revision": 1, "status": "stable", "category": "explanation", "purpose": "Faire defiler manuellement une serie dense de fonctionnalites illustrees.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "rail" }, "definition": "definitions/SEC-003.json", "snippet": "snippets/SEC-003.html", "preview": { "path": "section-templates.html", "anchor": "rail" }, "slots": { "required": ["eyebrow", "title", "lede", "features"], "optional": [] }, "items": { "min": 3, "max": 8 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-009"], "allowedAfter": ["SEC-004", "SEC-005", "SEC-006", "SEC-007", "SEC-010"] }, "requirements": { "components": ["IconButton"], "assets": ["featureImages"], "interactions": ["manual-horizontal-scroll"], "accessibility": ["keyboard-scroll-region", "labelled-controls", "reduced-motion"] }, "usage": { "when": "La densite fait partie de la demonstration et le visiteur peut explorer.", "avoid": "Chaque preuve doit etre visible simultanement ou l'ordre est obligatoire." }, "tags": ["features", "rail", "scroll", "proof"] }, { "id": "SEC-004", "number": 4, "slug": "benefit-triptych", "name": "BenefitTriptych", "revision": 1, "status": "stable", "category": "benefits", "purpose": "Hierarchiser trois benefices avec deux cartes courtes et une conclusion large.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "bentos" }, "definition": "definitions/SEC-004.json", "snippet": "snippets/SEC-004.html", "preview": { "path": "section-templates.html", "anchor": "bentos" }, "slots": { "required": ["eyebrow", "title", "lede", "benefits"], "optional": ["itemActions"] }, "items": { "min": 3, "max": 3 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-002", "SEC-003", "SEC-006"], "allowedAfter": ["SEC-005", "SEC-007", "SEC-010", "SEC-011"] }, "requirements": { "components": ["Card"], "assets": ["benefitImages"], "interactions": [], "accessibility": ["descriptive-image-alt", "meaningful-card-order"] }, "usage": { "when": "Trois benefices peuvent etre classes en deux arguments puis une synthese.", "avoid": "Le contenu comporte deux ou plus de trois benefices de poids equivalent." }, "tags": ["benefits", "bento", "triptych"] }, { "id": "SEC-005", "number": 5, "slug": "scene-anchored", "name": "SceneAnchored", "revision": 1, "status": "stable", "category": "proof", "purpose": "Changer la temperature de la page avec une scene immersive et trois preuves lisibles.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "scene" }, "definition": "definitions/SEC-005.json", "snippet": "snippets/SEC-005.html", "preview": { "path": "section-templates.html", "anchor": "scene" }, "slots": { "required": ["eyebrow", "title", "lede", "sceneImage", "proofs"], "optional": [] }, "items": { "min": 2, "max": 3 }, "compatibility": { "themes": ["bayou-alligators", "bayou-godmode", "bayou-nuit", "bayou-live", "bayou-baptiste"], "allowedBefore": ["SEC-002", "SEC-003", "SEC-004", "SEC-006"], "allowedAfter": ["SEC-007", "SEC-010", "SEC-011", "SEC-012"] }, "requirements": { "components": ["Card"], "assets": ["sceneImage"], "interactions": [], "accessibility": ["contrast-over-image", "proof-source-required"] }, "usage": { "when": "Une photo reelle et des chiffres sources peuvent porter la confiance.", "avoid": "La scene est generique, non sourcee ou nuit a la lisibilite." }, "tags": ["scene", "immersive", "proof", "dark"] }, { "id": "SEC-006", "number": 6, "slug": "guided-demo", "name": "GuidedDemo", "revision": 1, "status": "stable", "category": "journey", "purpose": "Raconter une sequence en trois etapes avec une preuve qui evolue.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "guided" }, "definition": "definitions/SEC-006.json", "snippet": "snippets/SEC-006.html", "preview": { "path": "section-templates.html", "anchor": "guided" }, "slots": { "required": ["eyebrow", "title", "lede", "steps"], "optional": ["specimenAction"] }, "items": { "min": 2, "max": 4 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-003", "SEC-009"], "allowedAfter": ["SEC-004", "SEC-007", "SEC-010", "SEC-011"] }, "requirements": { "components": ["Tabs", "Button"], "assets": ["stepImages"], "interactions": ["manual-tabs"], "accessibility": ["keyboard-tabs", "visible-focus", "live-panel-label", "reduced-motion"] }, "usage": { "when": "La valeur vient d'un parcours ordonne de deux a quatre etapes.", "avoid": "Les capacites sont independantes ou la sequence exige plus de quatre etapes." }, "tags": ["journey", "tabs", "demo", "product"] }, { "id": "SEC-007", "number": 7, "slug": "before-after", "name": "BeforeAfter", "revision": 1, "status": "stable", "category": "proof", "purpose": "Comparer deux etats equivalents pour rendre le changement immediat.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "compare" }, "definition": "definitions/SEC-007.json", "snippet": "snippets/SEC-007.html", "preview": { "path": "section-templates.html", "anchor": "compare" }, "slots": { "required": ["eyebrow", "title", "lede", "before", "after"], "optional": ["timeframe"] }, "items": { "min": 2, "max": 2 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-002", "SEC-003", "SEC-004", "SEC-006"], "allowedAfter": ["SEC-010", "SEC-011", "SEC-012"] }, "requirements": { "components": ["Card"], "assets": ["beforeImage", "afterImage"], "interactions": [], "accessibility": ["equivalent-comparison", "descriptive-image-alt"] }, "usage": { "when": "Le resultat peut etre compare au meme cadrage et avec des preuves reelles.", "avoid": "Les deux etats ne mesurent pas la meme chose ou la comparaison est artificielle." }, "tags": ["before-after", "comparison", "proof"] }, { "id": "SEC-008", "number": 8, "slug": "family-grid", "name": "FamilyGrid", "revision": 1, "status": "stable", "category": "explanation", "purpose": "Organiser des capacites en familles autonomes avec leur preuve.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "families" }, "definition": "definitions/SEC-008.json", "snippet": "snippets/SEC-008.html", "preview": { "path": "section-templates.html", "anchor": "families" }, "slots": { "required": ["eyebrow", "title", "lede", "families"], "optional": [] }, "items": { "min": 2, "max": 6 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-009"], "allowedAfter": ["SEC-005", "SEC-006", "SEC-007", "SEC-010"] }, "requirements": { "components": ["Card"], "assets": ["familyImages"], "interactions": [], "accessibility": ["logical-heading-order", "descriptive-image-alt"] }, "usage": { "when": "L'offre comporte des familles distinctes qui meritent chacune une preuve.", "avoid": "Les items constituent un seul parcours lineaire." }, "tags": ["families", "grid", "capabilities"] }, { "id": "SEC-009", "number": 9, "slug": "product-stage-split", "name": "ProductStage split", "revision": 1, "status": "stable", "category": "hero", "purpose": "Donner un angle editorial a une interface reelle avec texte et preuve en colonnes.", "source": { "kind": "specimen", "path": "guidelines/product-stage.card.html" }, "definition": "definitions/SEC-009.json", "snippet": "snippets/SEC-009.html", "preview": { "path": "guidelines/product-stage.card.html" }, "slots": { "required": ["eyebrow", "title", "lede", "primaryAction", "productImage", "caption"], "optional": ["secondaryAction"] }, "items": { "min": 1, "max": 1 }, "compatibility": { "themes": ["*"], "allowedBefore": [], "allowedAfter": ["SEC-002", "SEC-003", "SEC-006", "SEC-008", "SEC-012"] }, "requirements": { "components": ["Button"], "assets": ["productImage"], "interactions": [], "accessibility": ["descriptive-image-alt", "single-primary-action"] }, "usage": { "when": "L'interface a besoin d'une explication courte sans perdre sa place dominante.", "avoid": "Le titre doit etre totalement centre ou l'image ne constitue pas une preuve." }, "tags": ["hero", "product", "proof", "split"] }, { "id": "SEC-010", "number": 10, "slug": "result-card", "name": "ResultCard", "revision": 1, "status": "stable", "category": "proof", "purpose": "Contextualiser un temoignage par un point de depart, un resultat, une periode et une source.", "source": { "kind": "specimen", "path": "guidelines/result-card.card.html" }, "definition": "definitions/SEC-010.json", "snippet": "snippets/SEC-010.html", "preview": { "path": "guidelines/result-card.card.html" }, "slots": { "required": ["quote", "startingPoint", "result", "period", "source"], "optional": ["customer", "logo"] }, "items": { "min": 1, "max": 3 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-002", "SEC-004", "SEC-006", "SEC-007", "SEC-008"], "allowedAfter": ["SEC-011", "SEC-012"] }, "requirements": { "components": ["Card"], "assets": [], "interactions": [], "accessibility": ["source-required", "period-required", "result-context-required"] }, "usage": { "when": "Une preuve client dispose d'un avant, d'un resultat et d'une source verifiable.", "avoid": "Le compliment est anonyme, non date ou sans resultat concret." }, "tags": ["testimonial", "result", "proof", "source"] }, { "id": "SEC-011", "number": 11, "slug": "trial-timeline", "name": "TrialTimeline", "revision": 1, "status": "stable", "category": "reassurance", "purpose": "Rendre visibles les etapes temporelles d'un essai, d'un abonnement ou d'un engagement.", "source": { "kind": "specimen", "path": "guidelines/trial-timeline.card.html" }, "definition": "definitions/SEC-011.json", "snippet": "snippets/SEC-011.html", "preview": { "path": "guidelines/trial-timeline.card.html" }, "slots": { "required": ["eyebrow", "title", "lede", "milestones"], "optional": ["termsLink"] }, "items": { "min": 3, "max": 5 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-004", "SEC-006", "SEC-007", "SEC-010"], "allowedAfter": ["SEC-010", "SEC-012"] }, "requirements": { "components": ["Card"], "assets": [], "interactions": [], "accessibility": ["ordered-timeline", "explicit-dates", "clear-exit-condition"] }, "usage": { "when": "Le calendrier et les conditions sont des objections de confiance.", "avoid": "Il n'existe aucune etape temporelle ou les dates ne sont pas confirmees." }, "tags": ["timeline", "trial", "trust", "reassurance"] }, { "id": "SEC-012", "number": 12, "slug": "proof-rail", "name": "ProofRail", "revision": 1, "status": "stable", "category": "proof", "purpose": "Traiter une objection par preuve reelle dans un rail manuel et contextualise.", "source": { "kind": "specimen", "path": "guidelines/brand-visual-proof.card.html" }, "definition": "definitions/SEC-012.json", "snippet": "snippets/SEC-012.html", "preview": { "path": "guidelines/brand-visual-proof.card.html" }, "slots": { "required": ["eyebrow", "title", "lede", "proofs"], "optional": ["stepNumber"] }, "items": { "min": 3, "max": 7 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-003", "SEC-006", "SEC-007", "SEC-009", "SEC-010", "SEC-011"], "allowedAfter": ["SEC-010", "SEC-011"] }, "requirements": { "components": ["IconButton"], "assets": ["proofImages"], "interactions": ["manual-horizontal-scroll"], "accessibility": ["keyboard-scroll-region", "labelled-controls", "reduced-motion", "descriptive-image-alt"] }, "usage": { "when": "Plusieurs captures reelles repondent a des objections distinctes.", "avoid": "Les images sont decoratives ou sans contexte lisible." }, "tags": ["proof", "rail", "objections", "screenshots"] }, { "id": "SEC-013", "number": 13, "slug": "alligators-narrative-hero", "name": "NarrativeHero Alligators", "revision": 1, "status": "stable", "category": "hero", "purpose": "Ouvrir la page groupe par une these, deux portes produit lumineuses et un fond vivant reactif.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "narrative-hero" }, "definition": "definitions/SEC-013.json", "snippet": "snippets/SEC-013.html", "preview": { "path": "section-templates.html", "anchor": "narrative-hero" }, "slots": { "required": ["eyebrow", "title", "lede", "metrics", "primaryDoor", "secondaryDoor", "specialists"], "optional": ["scrollCue"] }, "items": { "min": 2, "max": 7 }, "compatibility": { "themes": ["bayou-alligators"], "allowedBefore": [], "allowedAfter": ["SEC-014", "SEC-002", "SEC-003", "SEC-006", "SEC-008"] }, "requirements": { "components": [], "assets": ["crococlickLogo", "crococlubLogo", "eyeActive"], "interactions": ["animated-water-canvas", "pointer-reactive-lines", "entry-reveal"], "accessibility": ["decorative-canvas-hidden", "descriptive-link-labels", "reduced-motion", "logical-heading-order"] }, "usage": { "when": "La page doit presenter le groupe, sa these et ses deux portes produit dans un seul geste narratif.", "avoid": "La page ne presente qu'un produit ou ne peut pas assumer une ouverture longue et immersive." }, "tags": ["hero", "group", "narrative", "animated", "doors"] }, { "id": "SEC-014", "number": 14, "slug": "manifesto-scrub", "name": "ManifestoScrub", "revision": 1, "status": "stable", "category": "narrative", "purpose": "Faire apparaitre le manifeste mot a mot pendant le scroll, avec les couleurs et logos des deux produits.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "manifesto-scrub" }, "definition": "definitions/SEC-014.json", "snippet": "snippets/SEC-014.html", "preview": { "path": "section-templates.html", "anchor": "manifesto-scrub" }, "slots": { "required": ["eyebrow", "statement", "productMarks"], "optional": [] }, "items": { "min": 3, "max": 3 }, "compatibility": { "themes": ["bayou-alligators"], "allowedBefore": ["SEC-013"], "allowedAfter": ["SEC-002", "SEC-004", "SEC-008", "SEC-010", "SEC-012", "SEC-028"] }, "requirements": { "components": [], "assets": ["crococlickLogo", "crococlubLogo"], "interactions": ["scroll-scrub", "ambient-color-drift", "sticky-stage"], "accessibility": ["static-content-without-script", "reduced-motion", "decorative-ambient-layer-hidden", "logical-heading-order"] }, "usage": { "when": "Une these de marque courte doit se reveler progressivement juste apres une ouverture immersive.", "avoid": "Le texte est long, transactionnel ou doit rester entierement visible sans defilement." }, "tags": ["manifesto", "scroll", "scrub", "narrative", "logos"] }, { "id": "SEC-015", "number": 15, "slug": "visual-benefit-grid", "name": "VisualBenefitGrid", "revision": 1, "status": "stable", "category": "benefits", "purpose": "Expliquer six benefices par des demonstrations UI compactes plutot que par des pictogrammes decoratifs.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "visual-benefit-grid" }, "definition": "definitions/SEC-015.json", "snippet": "snippets/SEC-015.html", "preview": { "path": "section-templates.html", "anchor": "visual-benefit-grid" }, "slots": { "required": ["benefits"], "optional": ["sectionHeader"] }, "items": { "min": 6, "max": 6 }, "compatibility": { "themes": ["bayou-alligators", "bayou-nuit"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-003", "SEC-006", "SEC-009", "SEC-013", "SEC-014"], "allowedAfter": ["SEC-005", "SEC-006", "SEC-007", "SEC-010", "SEC-011", "SEC-012"] }, "requirements": { "components": [], "assets": [], "interactions": [], "accessibility": ["logical-heading-order", "decorative-icons-hidden", "meaningful-card-order", "content-survives-without-icons"] }, "usage": { "when": "Six benefices ont chacun un mecanisme ou un etat concret que la miniature peut montrer.", "avoid": "Les benefices ne disposent d'aucune preuve visuelle ou la liste comporte moins de six items." }, "tags": ["benefits", "features", "visual-grid", "accelerator", "demonstration"] }, { "id": "SEC-016", "number": 16, "slug": "bootcamp-week-calendar", "name": "BootcampWeekCalendar", "revision": 1, "status": "stable", "category": "program", "purpose": "Montrer toute la semaine d'un evenement intensif, de la preparation aux lives, bonus et communaute.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "bootcamp-week-calendar" }, "definition": "definitions/SEC-016.json", "snippet": "snippets/SEC-016.html", "preview": { "path": "section-templates.html", "anchor": "bootcamp-week-calendar" }, "slots": { "required": ["month", "dates", "preparation", "liveDays", "bonusDay", "communityDay"], "optional": ["summary"] }, "items": { "min": 8, "max": 8 }, "compatibility": { "themes": ["bayou-baptiste"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-003", "SEC-006", "SEC-013"], "allowedAfter": ["SEC-006", "SEC-017", "SEC-018", "SEC-019"] }, "requirements": { "components": [], "assets": [], "interactions": ["manual-horizontal-scroll"], "accessibility": ["keyboard-scroll-region", "explicit-dates", "legend", "reduced-motion"] }, "usage": { "when": "Le rythme exact d'un evenement fait partie de la valeur et doit etre compris d'un coup d'oeil.", "avoid": "Le programme n'a pas de dates confirmees ou ne suit pas une sequence temporelle." }, "tags": ["calendar", "program", "event", "bootcamp", "schedule"] }, { "id": "SEC-017", "number": 17, "slug": "bootcamp-bonus-showcase", "name": "BootcampBonusShowcase", "revision": 1, "status": "stable", "category": "offer", "purpose": "Rendre un bonus premium concret avec video, competences, valeur et captures produit reelles.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "bootcamp-bonus-showcase" }, "definition": "definitions/SEC-017.json", "snippet": "snippets/SEC-017.html", "preview": { "path": "section-templates.html", "anchor": "bootcamp-bonus-showcase" }, "slots": { "required": ["offerChip", "title", "lede", "video", "benefits", "value", "proofImages"], "optional": [] }, "items": { "min": 4, "max": 7 }, "compatibility": { "themes": ["bayou-baptiste"], "allowedBefore": ["SEC-006", "SEC-012", "SEC-016"], "allowedAfter": ["SEC-010", "SEC-018", "SEC-019"] }, "requirements": { "components": [], "assets": ["loomVideo", "sevenProofImages"], "interactions": ["paused-on-hover-marquee", "manual-horizontal-scroll"], "accessibility": ["descriptive-image-alt", "labelled-video", "keyboard-scroll-region", "reduced-motion"] }, "usage": { "when": "Un bonus justifie une demonstration aussi riche que le produit principal.", "avoid": "Le bonus n'a ni video ni preuves produit reelles." }, "tags": ["bonus", "video", "proof", "marquee", "bootcamp"] }, { "id": "SEC-018", "number": 18, "slug": "bootcamp-price-card", "name": "BootcampPriceCard", "revision": 1, "status": "stable", "category": "pricing", "purpose": "Concentrer une offre, un prix, un cadeau et les inclusions dans une carte de conversion unique.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "bootcamp-price-card" }, "definition": "definitions/SEC-018.json", "snippet": "snippets/SEC-018.html", "preview": { "path": "section-templates.html", "anchor": "bootcamp-price-card" }, "slots": { "required": ["offerName", "price", "summary", "gift", "inclusions", "primaryAction", "reassurance"], "optional": ["footnote"] }, "items": { "min": 3, "max": 6 }, "compatibility": { "themes": ["bayou-baptiste"], "allowedBefore": ["SEC-010", "SEC-011", "SEC-012", "SEC-016", "SEC-017"], "allowedAfter": ["SEC-019"] }, "requirements": { "components": [], "assets": [], "interactions": ["primary-cta"], "accessibility": ["single-primary-action", "explicit-price", "visible-terms", "focus-visible"] }, "usage": { "when": "L'offre a un prix unique et tient dans une courte liste d'inclusions.", "avoid": "Plusieurs plans doivent etre compares." }, "tags": ["pricing", "offer", "cta", "bootcamp", "gift"] }, { "id": "SEC-019", "number": 19, "slug": "bootcamp-final-cta", "name": "BootcampFinalCTA", "revision": 1, "status": "stable", "category": "conversion", "purpose": "Fermer une page par une these forte, une urgence factuelle, deux actions et une preuve produit memorable.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "bootcamp-final-cta" }, "definition": "definitions/SEC-019.json", "snippet": "snippets/SEC-019.html", "preview": { "path": "section-templates.html", "anchor": "bootcamp-final-cta" }, "slots": { "required": ["title", "accent", "lede", "primaryAction", "secondaryAction", "productProof"], "optional": [] }, "items": { "min": 2, "max": 2 }, "compatibility": { "themes": ["bayou-baptiste"], "allowedBefore": ["SEC-010", "SEC-012", "SEC-017", "SEC-018"], "allowedAfter": [] }, "requirements": { "components": [], "assets": ["crocobotVoicePreview"], "interactions": ["primary-cta", "secondary-anchor"], "accessibility": ["descriptive-image-alt", "two-distinct-actions", "focus-visible", "logical-heading-order"] }, "usage": { "when": "La page a deja explique et prouve l'offre ; il reste a provoquer une decision nette.", "avoid": "La promesse, le prix ou la destination du CTA n'ont pas encore ete exposes." }, "tags": ["final-cta", "conversion", "crocobot", "bootcamp", "closing"] }, { "id": "SEC-020", "number": 20, "slug": "affiliate-gift-sticky", "name": "AffiliateGiftSticky", "revision": 1, "status": "stable", "category": "persistent-promo", "purpose": "Garder un avantage affilié concret et son action visibles sans interrompre la page.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "affiliate-gift-sticky" }, "definition": "definitions/SEC-020.json", "snippet": "snippets/SEC-020.html", "preview": { "path": "section-templates.html", "anchor": "affiliate-gift-sticky" }, "slots": { "required": ["referrer", "title", "offer", "durationProof", "primaryAction"], "optional": ["bonusDays"] }, "items": { "min": 1, "max": 1 }, "compatibility": { "themes": ["bayou-crococlub"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-006", "SEC-009", "SEC-013", "SEC-016"], "allowedAfter": [] }, "requirements": { "components": [], "assets": ["crococlickGift"], "interactions": ["persistent-sticky", "tracked-primary-cta", "url-referrer-personalization"], "accessibility": ["labelled-region", "single-primary-action", "focus-visible", "reduced-motion", "content-clearance"] }, "usage": { "when": "Un avantage affilié doit rester visible pendant la lecture et possède une destination unique.", "avoid": "La page contient déjà un autre élément persistant ou le bonus n’est pas confirmé." }, "tags": ["sticky", "affiliate", "gift", "trial", "conversion", "crococlick"] }, { "id": "SEC-021", "number": 21, "slug": "feature-family-tabs", "name": "FeatureFamilyTabs", "revision": 1, "status": "stable", "category": "explanation", "purpose": "Présenter quatre familles de fonctionnalités avec une promesse et une démonstration produit réaliste par onglet.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "feature-family-tabs" }, "definition": "definitions/SEC-021.json", "snippet": "snippets/SEC-021.html", "preview": { "path": "section-templates.html", "anchor": "feature-family-tabs" }, "slots": { "required": ["families", "familyTitle", "familyDescription", "capabilities", "productDemonstration", "eventConfirmation"], "optional": [] }, "items": { "min": 4, "max": 4 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-006", "SEC-009", "SEC-013"], "allowedAfter": ["SEC-005", "SEC-007", "SEC-010", "SEC-011", "SEC-012", "SEC-018", "SEC-019"] }, "requirements": { "components": ["Tabs"], "assets": ["crococlickLogo", "crococlickFavicon"], "interactions": ["manual-tabs"], "accessibility": ["keyboard-tabs", "roving-tabindex", "visible-focus", "reduced-motion", "logical-heading-order"] }, "usage": { "when": "Une plateforme comporte quatre familles distinctes qui nécessitent chacune une preuve produit détaillée.", "avoid": "Les capacités suivent une séquence obligatoire ou doivent être comparées simultanément." }, "tags": ["features", "families", "tabs", "product", "crococlick", "demonstration"] }, { "id": "SEC-022", "number": 22, "slug": "accordion-proof-switcher", "name": "AccordionProofSwitcher", "revision": 1, "status": "stable", "category": "explanation", "purpose": "Déplier trois bénéfices à gauche et synchroniser chacun avec une preuve produit réelle à droite.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "accordion-proof-switcher" }, "definition": "definitions/SEC-022.json", "snippet": "snippets/SEC-022.html", "preview": { "path": "section-templates.html", "anchor": "accordion-proof-switcher" }, "slots": { "required": ["title", "proofs", "proofTitle", "proofDescription", "proofImage", "proofCaption"], "optional": ["eyebrow"] }, "items": { "min": 3, "max": 3 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-006", "SEC-009", "SEC-013", "SEC-021"], "allowedAfter": ["SEC-005", "SEC-007", "SEC-010", "SEC-011", "SEC-012", "SEC-018", "SEC-019"] }, "requirements": { "components": [], "assets": ["threeProductProofs"], "interactions": ["single-open-accordion", "synchronized-proof-switch"], "accessibility": ["aria-expanded", "labelled-regions", "descriptive-image-alt", "visible-focus", "reduced-motion"] }, "usage": { "when": "Trois bénéfices ont chacun une preuve visuelle distincte et doivent être explorés sans quitter la section.", "avoid": "Les preuves doivent être comparées simultanément ou le parcours comporte plus de trois étapes." }, "tags": ["accordion", "features", "proof", "product", "interactive", "switcher"] }, { "id": "SEC-023", "number": 23, "slug": "spaghetti-vs-engine", "name": "SpaghettiVsEngine", "revision": 1, "status": "stable", "category": "explanation", "purpose": "Démontrer l'absurdité du stack d'abonnements fragmenté face à la puissance d'un moteur monolithe unifié.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "spaghetti-vs-engine" }, "definition": "definitions/SEC-023.json", "snippet": "snippets/SEC-023.html", "preview": { "path": "section-templates-v2.html", "anchor": "sec-block-SEC-023" }, "slots": { "required": ["title", "lede", "brokenTools", "unifiedEngine", "quote"], "optional": ["eyebrow"] }, "items": { "min": 1, "max": 1 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-013"], "allowedAfter": ["SEC-006", "SEC-007", "SEC-021", "SEC-024"] }, "requirements": { "components": ["Button"], "assets": [], "interactions": [], "accessibility": ["semantic-lists", "visible-focus"] }, "usage": { "when": "Le prospect utilise déjà plusieurs outils et ressent la douleur des connexions fragiles et du coût cumulé.", "avoid": "Le prospect n'utilise encore aucun logiciel ou démarre de zéro." }, "tags": ["architecture", "comparison", "saas", "stack", "savings", "monolith"] }, { "id": "SEC-024", "number": 24, "slug": "leaky-bucket-calculator", "name": "LeakyBucketCalculator", "revision": 1, "status": "stable", "category": "conversion", "purpose": "Calculer en direct la perte financière causée par les 3 fuites silencieuses de conversion d'un entonnoir classique.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "leaky-bucket-calculator" }, "definition": "definitions/SEC-024.json", "snippet": "snippets/SEC-024.html", "preview": { "path": "section-templates-v2.html", "anchor": "sec-block-SEC-024" }, "slots": { "required": ["title", "trafficControl", "priceControl", "fissures", "totalLossSummary"], "optional": ["eyebrow"] }, "items": { "min": 1, "max": 1 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-002", "SEC-023"], "allowedAfter": ["SEC-007", "SEC-010", "SEC-018", "SEC-025", "SEC-026"] }, "requirements": { "components": ["Button"], "assets": [], "interactions": ["range-calculator-slider"], "accessibility": ["aria-live-output", "label-for-input", "keyboard-range"] }, "usage": { "when": "L'audience envoie déjà du trafic ou investit en publicité mais ne comprend pas pourquoi sa marge s'effondre.", "avoid": "Offre sans trafic initial." }, "tags": ["calculator", "leak", "margin", "traffic", "roi", "interactive"] }, { "id": "SEC-025", "number": 25, "slug": "execution-receipt", "name": "ExecutionReceipt", "revision": 1, "status": "stable", "category": "reassurance", "purpose": "Matérialiser sous forme de ticket thermique minuté l'ensemble des corvées techniques prises en charge par le système.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "execution-receipt" }, "definition": "definitions/SEC-025.json", "snippet": "snippets/SEC-025.html", "preview": { "path": "section-templates-v2.html", "anchor": "sec-block-SEC-025" }, "slots": { "required": ["title", "tasksList", "totalValueSaved", "guarantee"], "optional": ["eyebrow"] }, "items": { "min": 1, "max": 1 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-006", "SEC-018", "SEC-021"], "allowedAfter": ["SEC-007", "SEC-010", "SEC-019"] }, "requirements": { "components": ["Button"], "assets": ["eyeNeon"], "interactions": [], "accessibility": ["table-headers", "semantic-markup"] }, "usage": { "when": "Rassurer les clients allergiques à la technique sur la simplicité de mise en route.", "avoid": "Vente de services de code sur mesure." }, "tags": ["receipt", "transparency", "setup", "automation", "infrastructure"] }, { "id": "SEC-026", "number": 26, "slug": "friction-museum", "name": "FrictionMuseum", "revision": 1, "status": "stable", "category": "proof", "purpose": "Exposer sous cloche les 3 micro-horreurs de conversion qui font fuir les acheteurs et montrer leur correction en direct.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "friction-museum" }, "definition": "definitions/SEC-026.json", "snippet": "snippets/SEC-026.html", "preview": { "path": "section-templates-v2.html", "anchor": "sec-block-SEC-026" }, "slots": { "required": ["title", "specimens", "fixAction"], "optional": ["eyebrow"] }, "items": { "min": 3, "max": 3 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-002", "SEC-021", "SEC-024"], "allowedAfter": ["SEC-007", "SEC-010", "SEC-018", "SEC-027"] }, "requirements": { "components": ["Button"], "assets": [], "interactions": ["live-specimen-fix"], "accessibility": ["aria-pressed", "interactive-toggle"] }, "usage": { "when": "Prouver le niveau maniaque d'attention aux détails UX du système.", "avoid": "Message purement institutionnel sans produit." }, "tags": ["museum", "bugs", "conversion", "details", "interactive", "crocofix"] }, { "id": "SEC-027", "number": 27, "slug": "time-compression-slider", "name": "TimeCompressionSlider", "revision": 1, "status": "stable", "category": "comparison", "purpose": "Comparer la vitesse de mise sur le marché d'une idée entre la voie agence/outils dispersés et la voie unifiée CrocoClick sur 14 jours.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "time-compression-slider" }, "definition": "definitions/SEC-027.json", "snippet": "snippets/SEC-027.html", "preview": { "path": "section-templates-v2.html", "anchor": "sec-block-SEC-027" }, "slots": { "required": ["title", "timelineSteps", "slowLane", "fastLane"], "optional": ["eyebrow"] }, "items": { "min": 5, "max": 5 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-006", "SEC-013", "SEC-026"], "allowedAfter": ["SEC-010", "SEC-018", "SEC-019"] }, "requirements": { "components": [], "assets": [], "interactions": ["step-timeline-scrub"], "accessibility": ["aria-selected", "keyboard-navigation"] }, "usage": { "when": "Montrer que le coût d'opportunité de la lenteur est supérieur au coût de l'outil.", "avoid": "Projet de refonte sur 18 mois." }, "tags": ["timeline", "velocity", "speed", "comparison", "execution"] }, { "id": "SEC-028", "number": 28, "slug": "four-elements-wheel", "name": "FourElementsWheel", "revision": 1, "status": "stable", "category": "narrative", "purpose": "Présenter la doctrine des quatre équilibres fondamentaux Alligators (Air, Feu, Eau, Terre) via un cadran interactif alchimique.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "four-elements-wheel" }, "definition": "definitions/SEC-028.json", "snippet": "snippets/SEC-028.html", "preview": { "path": "section-templates-v2.html", "anchor": "sec-block-SEC-028" }, "slots": { "required": ["title", "elements", "doctrineQuote", "softwareManifestation"], "optional": ["eyebrow"] }, "items": { "min": 4, "max": 4 }, "compatibility": { "themes": ["bayou-alligators", "bayou-crococlick"], "allowedBefore": ["SEC-013", "SEC-014"], "allowedAfter": ["SEC-001", "SEC-021"] }, "requirements": { "components": [], "assets": ["glyphAir", "glyphFeu", "glyphEau", "glyphTerre", "eyeNeon"], "interactions": ["wheel-element-switch"], "accessibility": ["aria-label", "focus-visible"] }, "usage": { "when": "Page manifeste, page À Propos ou discours de marque de fond.", "avoid": "Page de checkout ou funnel direct response court." }, "tags": ["alchemy", "elements", "doctrine", "manifesto", "alligators", "dial"] }, { "id": "SEC-029", "number": 29, "slug": "community-benefit-carousel", "name": "CommunityBenefitCarousel", "revision": 1, "status": "stable", "category": "benefits", "purpose": "Rendre les bénéfices d’une communauté ou d’un accompagnement tangibles dans un rail de grandes cartes illustrées.", "source": { "kind": "page-section", "path": "section-templates.html", "anchor": "community-benefit-carousel" }, "definition": "definitions/SEC-029.json", "snippet": "snippets/SEC-029.html", "preview": { "path": "section-templates-v2.html", "anchor": "sec-block-SEC-029" }, "slots": { "required": ["eyebrow", "title", "lede", "benefits", "benefitImage", "benefitTitle", "benefitDescription"], "optional": [] }, "items": { "min": 3, "max": 8 }, "compatibility": { "themes": ["*"], "allowedBefore": ["SEC-001", "SEC-006", "SEC-009", "SEC-015", "SEC-016"], "allowedAfter": ["SEC-005", "SEC-010", "SEC-017", "SEC-018", "SEC-019"] }, "requirements": { "components": ["IconButton"], "assets": ["benefitImages"], "interactions": ["manual-horizontal-scroll", "pointer-drag"], "accessibility": ["keyboard-scroll-region", "labelled-controls", "descriptive-image-alt", "disabled-boundary-controls", "reduced-motion"] }, "usage": { "when": "Une communauté, un accompagnement ou une expérience collective possède plusieurs bénéfices équivalents et des images capables de les rendre concrets.", "avoid": "Les cartes ne disposent que d’icônes décoratives, suivent une séquence obligatoire ou doivent toutes être comparées simultanément." }, "tags": ["benefits", "community", "carousel", "images", "accelerator", "collective"] } ] }