# Patterns marketing Bayou Ces patterns sont des **idées de section portables**. Ils complètent les primitives UI sans les dupliquer : Button, Tabs, Card, Badge et Table restent les briques ; les patterns expliquent comment les composer pour qu'une page montre avant de raconter. ## Le noyau retenu ### ProductStage — le produit en premier écran Une vraie interface occupe la scène principale. Le texte formule une seule transformation et les actions restent secondaires face à la preuve. Le média porte une bordure grisée et reste sur une surface claire. La matière sable est possible comme respiration ponctuelle, jamais comme socle automatique sous chaque image. **Minimum :** eyebrow, titre, amorce, une capture réelle lisible, un CTA principal et au plus une action secondaire. Pas de dashboard réinventé en HTML quand une capture produit existe. **Deux anatomies officielles :** `CenteredStage` place la promesse au-dessus d'un très grand média et convient aux pages d'entrée spectaculaires. `SplitStage` garde le texte dans une colonne et la preuve à côté ; il est plus éditorial et plus compact. Le spécimen [`product-stage.card.html`](product-stage.card.html) montre cette seconde anatomie. La scène peut rester claire ou devenir un hero sombre contenu, jamais collé aux bords du viewport. Dans ce second cas, elle reçoit une texture canonique discrète, des coins `--radius-2xl`, une bordure grisée et une grande vidéo ou image produit arrondie. Une ligne sobre sépare le hero de la section suivante. ### ProofRail — une objection par preuve Le rail décrit une séquence ou répond à plusieurs objections avec des preuves visuelles de même nature. Son contrat complet vit dans [`visual-proof.md`](visual-proof.md), patron VPR-01. **Variante `BeforeAfter` :** deux bento boxes de dimensions égales comparent un état de départ et un état d'arrivée. Les titres, les volumes de texte, le ratio des médias et leurs alignements restent comparables : le contraste vient du résultat, pas d'une carte « après » artificiellement plus grande ou plus spectaculaire. Le texte occupe sa propre zone et le média reste ancré en bas, sans jamais le chevaucher. Le spécimen vivant est [`before-after.card.html`](before-after.card.html). ### SceneAnchored — une conviction sur une scène Une image réelle sombre ou colorée porte une promesse courte et zéro à trois preuves factuelles. Cette bascule spectaculaire reste ponctuelle au milieu des matières claires. Son contrat complet vit dans [`visual-proof.md`](visual-proof.md), patron VPR-02. Les preuves internes peuvent devenir des bento boxes translucides : bordure plus claire que le fond, matière semi-transparente et `backdrop-filter` réel. Le flou reste perceptible sans diminuer le contraste du texte. ### SystemMap — le système visible d'un coup d'œil Une source, des relations et une conséquence composent une carte lisible sans paragraphe de secours. Son contrat complet vit dans [`visual-proof.md`](visual-proof.md), patron VPR-03. ### ResultCard — le contexte avant le compliment Un témoignage devient une preuve quand il nomme le point de départ, le résultat, la période et la source. La citation seule ne suffit pas. Le chiffre dominant reste sourcé et la carte n'invente jamais une performance. ### GuidedDemo — une visite sans tunnel de texte Deux à quatre onglets partagent le même cadre visuel. Chaque onglet montre un résultat distinct avec une capture réelle, un titre et une phrase. Aucun défilement automatique : le visiteur garde le contrôle et l'état actif reste accessible. ### FeatureGallery — l'étendue du produit en un regard Quatre à six fonctionnalités forment une grille de démonstrations autonomes. Chaque bloc associe un média produit réel au ratio 16:9, un titre Bricolage Grotesque en 700 maximum et une phrase Plus Jakarta Sans en 500. Le grand panneau reste clair et généreux ; les médias portent les angles arrondis et la matière sable, sans bouton répété sous chaque fonctionnalité. Une image statique suffit quand elle rend l'action évidente. Pour montrer un geste, préférer une courte vidéo MP4 ou WebM, muette, en boucle et accompagnée d'un poster statique. Un GIF reste possible pour un mouvement bref et non essentiel. Dans tous les cas, `prefers-reduced-motion` affiche une preuve fixe ou laisse la lecture à l'initiative du visiteur. **Trois variantes, un même contrat :** - grille 3 × 2 avec médias 16:9, titre de section placé dans l'angle supérieur et textes alignés à gauche ; - triptyque coloré avec titre, phrase et CTA alignés à gauche, puis image collée au bord inférieur ; la surface peut être vive, mais elle ne teinte jamais le média, et les textes prennent le cran sombre lisible de la même famille colorée ; - rail manuel de médias carrés sur fond sable, bordure grisée et aperçu de la carte suivante. La variante `FamilyGrid` organise deux à quatre familles dans une grille bento colorée. L'en-tête reste empilé à gauche, jamais complété par un paragraphe déporté à droite. Dans chaque bento, label, titre, phrase et média partagent une seule surface continue : aucune barre ne coupe artificiellement la carte. L'image ne possède pas de sous-cadre, ne passe jamais derrière le texte et vient s'ancrer au bord inférieur. La couleur rythme la page, mais chaque famille conserve une bordure grisée commune. Le spécimen vivant est [`feature-family-grid.card.html`](feature-family-grid.card.html). Le rail ne défile jamais seul. Ses flèches pressent comme Button et le mobile conserve le débordement horizontal : montrer moins à la fois permet souvent de faire comprendre davantage. ### TrialTimeline — le temps devient visible La chronologie rend explicites accès, rappel, décision, paiement et sortie. Elle réduit le risque en montrant quand chaque événement arrive. Les dates réelles priment sur des étapes vagues comme « bientôt » ou « ensuite ». ## Règles communes - Le pattern peut apparaître n'importe où dans la page ; son emplacement n'est pas canonique. - Une section porte une seule idée et une seule action principale. - Les bento boxes se détachent par une bordure grisée et un changement de surface, jamais par une ombre portée. - `--surface-sunken` reste autorisé pour une frise, un cadre de preuve ou une respiration courte ; il ne devient pas le fond par défaut d'une grande section. - La preuve produit réelle précède l'illustration, puis le texte. - La matière claire domine ; le sombre reste une bascule narrative ponctuelle. - Les contrôles visibles fonctionnent et exposent un état accessible. - Les données, témoignages et résultats sont réels ou explicitement marqués comme démonstration. - Si le pattern ne retire aucun paragraphe, il n'a probablement rien montré. « Une section, un résultat, une preuve » est le contrat transversal de toute la bibliothèque. Il ne constitue pas un neuvième pattern. ## Spécimens - [`product-stage.card.html`](product-stage.card.html) - [`brand-visual-proof.card.html`](brand-visual-proof.card.html) - [`before-after.card.html`](before-after.card.html) - [`result-card.card.html`](result-card.card.html) - [`guided-demo.card.html`](guided-demo.card.html) - [`feature-gallery.card.html`](feature-gallery.card.html) - [`feature-family-grid.card.html`](feature-family-grid.card.html) - [`trial-timeline.card.html`](trial-timeline.card.html) ## Gate de cohérence Cache le texte descriptif et regarde cinq secondes. La transformation, le résultat ou la séquence doit rester compréhensible. Sinon, agrandis la preuve, change le pattern ou retire la section.