{ "summary": "Audit VISION des blocks : les agents lisent les screenshots pleine page, fusionnent les designs visuellement identiques, produisent la vraie liste des designs distincts + plan BO", "agentCount": 9, "logs": [], "result": { "categories": [ { "category": "Héros", "candidateCount": 9, "distinctCount": 6, "distinctDesigns": [ { "name": "Hero (home, avec formulaire)", "mergedFrom": [ "Hero (home, avec formulaire)", "Hero générique (CTAs + stats + badges)" ], "visualNote": "Hero navy compact: titre fort a gauche (\"Votre Expert du Cool Roof en France\"), carte formulaire compacte en haut a droite, fine bande photo de toiture industrielle tout en haut. Le candidat 'Hero générique' est la version paramétrable du meme design (memes proportions texte+carte). Fusionne avec l'origine home.", "bestThumbnailSource": "home.jpg — tout en haut (premier viewport: titre gauche + carte formulaire droite)" }, { "name": "ProductHero (split bicolore creme/navy)", "mergedFrom": [ "ProductHero (split bicolore crème/navy)" ], "visualNote": "Unique a deux bandes: bande photo pleine largeur en haut (ouvrier sur toiture) avec badge + titre produit en overlay et mini-strip de stats (-10°C / 40% / 20 ans ou Prime CEE), puis bande navy dessous avec gros titre produit + visuel des pots produit a droite. CovaTherm et CovaSeal partagent exactement cette structure (seuls contenu/stats changent).", "bestThumbnailSource": "solutions-covatherm.jpg — deux premieres bandes (photo overlay + bande navy avec packs produit)" }, { "name": "IndustrieHero (hub /industrie)", "mergedFrom": [ "IndustrieHero (hub /industrie)" ], "visualNote": "Seul hero sur fond clair/creme. Titre a gauche (\"Réduisez la chaleur, maîtrisez vos coûts\") + deux boutons CTA, photo de site industriel a coins arrondis a droite, fine bande de stats/badges dessous. PAS de formulaire — le distingue nettement des heros Distribution/Logistique.", "bestThumbnailSource": "industrie-hub.jpg — premier viewport (fond clair, titre gauche + photo arrondie droite + stats)" }, { "name": "DistributionHero / LogistiqueHero (split texte + lead form, navy)", "mergedFrom": [ "DistributionHero (photo split + lead form, logos grille)", "LogistiqueHero (photo split + lead form, logos marquee)" ], "visualNote": "Meme design a l'oeil: fond navy, titre a gauche (\"Gardez vos magasins/entrepôts au frais tout l'été\"), carte lead-form 'Estimez votre budget' a droite, strip de stats, et rangee de logos clients. Seule difference visible: logos en grille statique (Distribution) vs marquee (Logistique), + contenu/photo. Infirme l'affirmation 'distincts': c'est UN seul design repete.", "bestThumbnailSource": "industries-distribution.jpg — premier viewport (titre gauche + carte 'Estimez votre budget' droite + logos)" }, { "name": "RoofHero / SectorHero (template toiture/secteur, fond photo plein cadre + lead form)", "mergedFrom": [ "RoofHero (template toitures, form 4 champs)", "SectorHero (template secteurs, form 5 champs)" ], "visualNote": "Meme famille split+lead-form que Distribution/Logistique MAIS sur un fond photo sombre plein cadre (metal/toiture texturee) au lieu d'un navy plat — difference visuelle reelle. Titre a gauche (\"Cool roof pour toiture en bac acier\"), carte 'Estimez le gain possible' a droite, strip stats + logos. RoofHero et SectorHero = meme template (nb de champs du form differe seulement).", "bestThumbnailSource": "toiture-bac-acier.jpg — premier viewport (fond photo metal sombre + carte form droite)" }, { "name": "LocalHero (héros local sans formulaire)", "mergedFrom": [ "LocalHero (héros local sans formulaire)" ], "visualNote": "Fond photo plein cadre (vue aerienne de toitures logistiques), titre a gauche (\"Cool roof à Roissy-en-France 95\"), SANS formulaire ni carte. Le combo fond-photo-bleed + absence totale de form le distingue du RoofHero (qui a un lead form) et des autres.", "bestThumbnailSource": "local-roissy.jpg — premier viewport (photo aerienne plein cadre + titre local gauche)" } ], "note": "Affirmation utilisateur partiellement infirmee. A l'oeil: DistributionHero et LogistiqueHero sont LE MEME design (split texte gauche + carte lead-form droite, fond navy, stats + logos) — seule diff = logos grille vs marquee + contenu; donc fusionnes. Distincts confirmes: Hero-home (carte form compacte, bande photo fine), ProductHero (bicolore photo-band + navy a deux etages), IndustrieHero (fond clair, sans form, photo arrondie), LocalHero (photo plein cadre, sans form). RoofHero garde son design separe car fond photo plein cadre sombre vs navy plat des Distribution/Logistique, et SectorHero y est fusionne (meme template). 9 candidats -> 6 designs distincts." }, { "category": "Showcase", "candidateCount": 15, "distinctCount": 7, "distinctDesigns": [ { "name": "Showcase produit / positionnement (Cova*Showcase texte_image)", "mergedFrom": [ "ProductShowcase", "CovaSealShowcase", "CovaMetalShowcase", "CovaThermLightShowcase" ], "visualNote": "Bande navy foncee pleine largeur, titre centre + eyebrow, optionnel toggle de variantes (CovaTherm 8 / CovaTherm 20 vu sur solutions-covatherm ; absent sur CovaSeal qui n'a qu'une variante). Dessous, une seule carte creme arrondie : texte a gauche (titre produit, description, key-points, bouton terracotta 'Demander un devis') + photo packshot des seaux Covalba a droite. CovaTherm (3 seaux) et CovaSeal (2 seaux) sont VISUELLEMENT le meme design, seuls le toggle et le nombre de seaux changent. CovaMetal/CovaThermLight non visibles sur les captures mais memes composant parametre.", "bestThumbnailSource": "solutions-covatherm.jpg, section 'CovaTherm existe en deux versions' (bande navy + toggle + carte packshot)" }, { "name": "Compatibilite supports (liste + preview image)", "mergedFrom": [ "CompatibilityTabs", "CompatibiliteSupports" ], "visualNote": "Fond creme clair, titre 'Les supports compatibles avec CovaTherm/CovaSeal'. A gauche une liste verticale numerotee de types de support (Membrane bitumineuse, Beton/dalle beton, EPDM, Fibrociment, Acier galva, PVC...) chacun avec mini-icone ; a droite une grande image de preview du support selectionne (texture toiture) avec badge 'Compatible' et legende + description. Comportement onglets. Layout list-left / big-image-right tres distinct.", "bestThumbnailSource": "solutions-covatherm.jpg, section 'Les supports compatibles avec CovaTherm.' (liste a gauche, grande image bitume a droite)" }, { "name": "Principe classique vs cool (2 cartes 3D)", "mergedFrom": [ "IndustriePrinciple" ], "visualNote": "Bande navy foncee, eyebrow 'LA SOLUTION COVALBA' + titre centre 'Le cool roof agit a la source' + sous-titre. Dessous deux cartes blanches arrondies cote a cote : 'Toiture classique' (puce terracotta 'Absorbe la chaleur', illustration 3D toit sombre avec fleches rouges descendantes) vs 'Toiture cool roof' (puce teal 'Reflechit la chaleur', illustration 3D toit clair avec fleches teal remontantes). Comparatif visuel image/image distinct des autres showcases.", "bestThumbnailSource": "industrie-hub.jpg, section 'Le cool roof agit a la source.' (2 cartes 3D classique vs cool)" }, { "name": "Split texte / image (illustration 3D isometrique)", "mergedFrom": [ "LocalSolutionSection", "TexteImage" ], "visualNote": "Section deux colonnes : d'un cote une illustration 3D isometrique de batiment (toiture chaude/froide, parfois dans une carte arrondie avec legende type 'SANS COOL ROOF : ABSORPTION THERMIQUE'), de l'autre cote un bloc texte (titre + paragraphe + bullets ou paragraphes secondaires comme 'Vieillissement premature de l'etancheite'). Layout split 12 colonnes, alternance gauche/droite. Recurrent sur local-roissy ('Chaque ete, votre toiture vous coute tres cher') et toiture-bac-acier ('Le metal chauffe vite'). Distinct de la carte packshot showcase et de la liste compat.", "bestThumbnailSource": "local-roissy.jpg, section 'Chaque ete, votre toiture vous coute tres cher.' (illustration 3D batiment a gauche, texte + bullets a droite)" }, { "name": "Avant / Apres (paire d'images)", "mergedFrom": [ "CovaThermLightBeforeAfter", "AvantApres" ], "visualNote": "Paire d'images avant/apres (glow terracotta sur l'avant, teal sur l'apres d'apres la description). Non visible sur les 5 captures fournies (page CovaThermLight non capturee) mais pattern de comparaison photo cote a cote, distinct du comparatif 3D classique/cool et du split texte-image.", "bestThumbnailSource": "Page produit CovaThermLight (non disponible dans les captures) — section avant/apres" }, { "name": "Video (embed + takeaways)", "mergedFrom": [ "Video" ], "visualNote": "Bloc media : iframe YouTube + liste de takeaways/points cles a cote. Pattern d'integration video distinct de tous les autres showcases (pas de packshot, pas de comparatif). Non capture explicitement mais design propre.", "bestThumbnailSource": "Non present sur les captures — bloc generique Video (iframe + takeaways)" }, { "name": "Variantes produit (cards pricing)", "mergedFrom": [ "VariantesProduit" ], "visualNote": "Cartes de variantes type pricing (cards alignees presentant des declinaisons produit avec prix/caracteristiques). Layout cards-pricing distinct de la carte unique showcase et du toggle Cova*Showcase. Non capture sur les pages fournies.", "bestThumbnailSource": "Non present sur les captures — bloc generique VariantesProduit (cards pricing)" } ], "note": "Categorie Showcase : 15 candidats reduits a 7 designs distincts. Fusion majeure : les 4 Cova*Showcase (ProductShowcase/CovaSeal/CovaMetal/CovaThermLight) sont VISUELLEMENT identiques (bande navy + titre centre + optionnel toggle + carte texte-gauche/packshot-droite) — confirme en comparant solutions-covatherm (toggle 8/20, 3 seaux) et solutions-covaseal (pas de toggle, 2 seaux) : meme composant parametre. CompatibilityTabs = CompatibiliteSupports (liste+image). LocalSolutionSection = TexteImage (split 3D/texte, recurrent sur local-roissy et toiture-bac-acier). IndustriePrinciple reste a part (2 cartes 3D classique vs cool). BeforeAfter, Video et VariantesProduit gardes distincts par leur pattern propre (non visibles sur les 5 captures car pages produit CovaThermLight/blocs generiques non fournies). Bases visuelles : les 5 captures lues. CovaMetal/CovaThermLight Showcase, AvantApres, Video et VariantesProduit non rendus sur les captures fournies mais classes d'apres le code/registry et leur famille visuelle." }, { "category": "Grille", "candidateCount": 20, "distinctCount": 7, "distinctDesigns": [ { "name": "Cartes photo plein cadre avec titre en overlay", "mergedFrom": [ "SectorsGrid", "GrilleSecteurs", "IndustrieApplications" ], "visualNote": "Cartes a photo pleine surface, degrade sombre en bas, nom du secteur/application en blanc pose SUR l'image + sous-titre, parfois petit bouton + en haut a droite. Pas de corps blanc. Vu sur la home ('Le cool roof adapte a chaque filiere') et le hub industrie ('Une solution pensee...').", "bestThumbnailSource": "home.jpg section 'Le cool roof adapte a chaque filiere professionnelle' (grille de cartes-photo secteurs)" }, { "name": "Cartes frictions avec vignette photo en haut", "mergedFrom": [ "DistributionProblem", "LogistiqueProblem" ], "visualNote": "Carte blanche contenue, vignette photo en bandeau haut (avec petit label badge), puis titre + description sous l'image. 4 cartes en ligne, plus une ligne de transition dessous. Different du design overlay : ici la photo est cadree dans la carte, le texte est dans un corps blanc. Identique entre distribution et logistique (contenu different).", "bestThumbnailSource": "industries-distribution.jpg section 'La chaleur pese sur vos ventes' (4 cartes photo+texte)" }, { "name": "Grille de cartes icone/label+numero (texte)", "mergedFrom": [ "IndustrieProblem", "DistributionApplications", "LogistiqueApplications" ], "visualNote": "Cartes creme arrondies, bordure/ombre subtile, en haut soit une icone ronde tintee soit un badge label+numero (01,02...), puis titre + description. Meme coquille de carte, juste le nombre de colonnes (4 ou 5) et le badge qui varient. C'est le MEME design de grille de cartes pour les frictions industrie et les applications/surfaces distribution & logistique.", "bestThumbnailSource": "industries-distribution.jpg section 'Une solution pour chaque surface commerciale' (5 cartes badge+numero)" }, { "name": "Bloc expertise 2x2 avec carte mise en avant", "mergedFrom": [ "ExpertiseSection" ], "visualNote": "Section 'Concu en France' : grille 2x2 de cartes (icone ronde en haut, titre, description), dont UNE carte remplie en navy fonce (texte blanc) au milieu, les autres claires. Layout 2 colonnes avec titre+CTA a gauche. Distinct des autres grilles par la carte highlight navy et la mise en page asymetrique.", "bestThumbnailSource": "home.jpg section 'Concu en France. Pose par nos equipes' (grille 2x2, une carte navy)" }, { "name": "Liste avantages 2 colonnes sur fond navy (icones lucide)", "mergedFrom": [ "ProductAdvantages", "CovaSealAdvantages", "CovaMetalAdvantages", "CovaThermLightAdvantages" ], "visualNote": "Fond navy fonce, grille 2 colonnes d'items (icone teal a gauche, titre + description), separateurs fins, pas de contour de carte. Tous les *Advantages produit partagent ce meme design, seul le contenu/produit change. Vu sur la page CovaTherm ('Les avantages de la peinture cool roof').", "bestThumbnailSource": "solutions-covatherm.jpg section 'Les avantages de la peinture cool roof CovaTherm' (fond navy, 2 colonnes d'icones)" }, { "name": "Cartes blanches 3-up media + label + titre (produit/article)", "mergedFrom": [ "SolutionsGrid", "GrilleSolutions", "GrilleCards", "RelatedProducts", "BlogPreview", "SolutionSection" ], "visualNote": "Rangee de cartes blanches a bordure fine, zone media/image en haut, petit label (pill arrondi pour produits ex 'Toiture fissuree', texte capitales pour articles ex 'ETUDE DE CAS'), titre, puis description et/ou lien 'Decouvrir ->'. RelatedProducts ('Decouvrez egalement') et BlogPreview ('Le cool roof au quotidien') sont visuellement la meme carte a nuances pres. SolutionSection (3 cartes chiffres) non rendu/invisible sur les pages capturees, rattache a cette famille de grille generique de cartes.", "bestThumbnailSource": "solutions-covatherm.jpg section 'Decouvrez egalement' (3 cartes produit blanches avec label pill + lien)" }, { "name": "Cartes references avec bandeau navy + preuve", "mergedFrom": [ "ReferencesGrille" ], "visualNote": "Cartes references : bandeau superieur navy fonce avec tag secteur ('INDUSTRIE'), puis corps blanc avec label 'PREUVE TERRAIN'/'REFERENCE PUBLIEE', titre du chantier, description et une metrique (ex '8 000 m2'). Lien 'Voir les references filtrees' en tete. Vu sur les pages industrie ('Des references concretes a rapprocher de votre site'). Design distinct par le bandeau bicolore.", "bestThumbnailSource": "industrie-hub.jpg section 'Des references concretes a rapprocher de votre site' (3 cartes a bandeau navy)" } ], "note": "Audit visuel sur crops haute-resolution des 5 screenshots. Categorie Grille = 20 candidats (lignes 52-71) ramenes a 7 designs distincts. Reponse a la question du brief : NON, les *Advantages, *Problem et *Applications ne sont pas tous la meme grille. (a) Les *Advantages produit (ProductAdvantages/CovaSeal/CovaMetal/CovaThermLight) sont UN design unique : liste 2 colonnes sur fond navy. (b) Les *Problem se SCINDENT en deux : IndustrieProblem = cartes icone/texte (famille G3), alors que DistributionProblem & LogistiqueProblem = cartes avec vignette photo (famille G2, distincte). (c) Les *Applications se scindent aussi : IndustrieApplications = cartes-photo overlay (G1), alors que DistributionApplications & LogistiqueApplications = cartes badge+numero (G3, meme coquille que IndustrieProblem). Donc la coquille de carte icone/label+numero (G3) regroupe IndustrieProblem + Distribution/Logistique Applications. Reserve : SolutionSection (3 cartes chiffres) et les grilles generiques (SolutionsGrid/GrilleSolutions/GrilleCards) ne sont pas rendues visiblement sur les pages capturees (marquees INVISIBLE/non cable) ; rattachees par coherence a la famille de cartes blanches 3-up, a confirmer si SolutionSection est en realite un simple bloc 3-stats. IndustrieBenefits/DistributionBenefits (Reassurance) partagent visuellement la coquille G3 mais ne sont pas dans cette categorie." }, { "category": "Comparatif", "candidateCount": 16, "distinctCount": 6, "distinctDesigns": [ { "name": "Tableau comparatif multi-solutions (colonne mise en avant + verdicts)", "mergedFrom": [ "PriceComparisonSection", "CovaSealComparison", "CovaMetalComparison", "CovaThermLightComparison", "TableauComparatif" ], "visualNote": "Matrice de comparaison : lignes de criteres a gauche, une colonne Covalba mise en avant dans un panneau navy fonce (pill RECOMMANDE/teal + parfois CTA rouge a l'interieur) et 2-3 colonnes concurrentes plus claires. Verdicts par cellule en checks teal / croix rouge (PriceComparison home, 4 col) OU en valeurs texte (CovaSealComparison 3 col : Cout/m2, Duree, ROI...). CovaSeal/Metal/ThermLight Comparison sont le meme design a 2-3 colonnes pres. Vu sur home (Rentabilise en 24 mois) et CovaSeal (Etancheite cool roof ou refection complete).", "bestThumbnailSource": "Home — section 'Rentabilise en 24 mois / Performant pendant 10 ans' (tableau colonne Covalba 18-25 EUR/m2 vs Climatisation/Membrane neuve/Refection, checks & croix). Alternative: CovaSeal 'Etancheite cool roof ou refection complete' (3 colonnes valeurs texte)." }, { "name": "Tableau de specs technique (lignes + colonne(s) valeur surlignee navy)", "mergedFrom": [ "TechnicalSpecs", "CovaSealSpecs", "CovaMetalSpecs", "CovaThermLightSpecs", "SpecsTechniques" ], "visualNote": "Table de caracteristiques : labels a gauche (Technologie, Indice SRI, Garantie...) et la/les valeur(s) dans un panneau navy fonce avec badge accent (RECOMMANDE / 2-EN-1). TechnicalSpecs = 2 colonnes (COVATHERM 8 clair vs COVATHERM 20 navy surligne) ; CovaSeal/Metal/ThermLightSpecs = meme design a 1 seule colonne valeur (panneau COVASEAL 20). Meme idiome visuel, le nombre de colonnes valeur change. Distinct du tableau comparatif car pas de colonnes concurrentes ni de verdicts check/croix : on decrit UN produit/ses versions.", "bestThumbnailSource": "CovaTherm — section 'CovaTherm 8 ou 20 ? Les caracteristiques' (2 colonnes, colonne CovaTherm 20 navy 'RECOMMANDE'), la plus lisible. Sinon CovaSeal 'Les caracteristiques de CovaSeal 20' (1 colonne)." }, { "name": "Duel face-a-face 2 cartes (standard vs Covalba)", "mergedFrom": [ "PriceVSSection", "DistributionValueDurability" ], "visualNote": "Deux cartes cote a cote : a gauche carte claire 'Resine acrylique standard' (lignes-metriques PRIX AU M2 / DUREE DE VIE / COUT REEL + puces negatives croix rouge), a droite carte navy fonce 'Resine polyurethane Covalba' avec pill teal en haut-centre (LE CHOIX RENTABLE / LE CHOIX DURABLE) + puces positives check teal + prix colore. Le design home (PriceVS) et le design distribution (ValueDurability) sont strictement identiques a l'oeil, seul le texte du badge et le contenu changent.", "bestThumbnailSource": "Home — section 'La solution la plus economique sur 10 ans' (CONCURRENCE) : les deux cartes acrylique standard (claire) vs polyurethane Covalba (navy, badge 'LE CHOIX RENTABLE')." }, { "name": "Deux cartes-illustration comparatives (absorption vs reflexion)", "mergedFrom": [ "DistributionSolution", "LogistiqueSolution" ], "visualNote": "Sur fond navy : eyebrow 'LA SOLUTION COVALBA' + titre bicolore, puis deux cartes a illustration 3D (ABSORPTION = batiment chauffe, fleches jaunes vs REFLEXION) ; en dessous, comparatif 'Toiture classique jusqu'a 80C en surface' vs 'Toiture cool roof jusqu'a 90% du rayonnement' avec listes a puces (cercles rouges/teal) et une rangee de 4 chips key-points icone+texte. Distribution et Logistique partagent ce design (Logistique = 3 key-points), contenu/illustration adaptes au secteur.", "bestThumbnailSource": "Distribution — section 'Votre toiture reflete au lieu de chauffer' (cartes ABSORPTION/REFLEXION + Toiture classique 80C / cool roof 90% + 4 chips key-points)." }, { "name": "Table des primes par zone climatique (form + bareme CEE)", "mergedFrom": [ "DistributionCEE" ], "visualNote": "Layout 2 colonnes : a gauche un formulaire d'eligibilite (Type de surface, Zone climatique, Surface, PAC, email + CTA teal 'Envoyer a Covalba') ; a droite une carte navy 'REPERE RAPIDE' contenant une table H1/H2/H3 -> zone -> fourchette EUR/m2, suivie d'une carte note 'A RETENIR'. Unique : combine un bareme tabulaire de primes avec un form, design propre a la section CEE.", "bestThumbnailSource": "Distribution — section 'Covalba verifie votre eligibilite CEE' (form a gauche + carte navy 'REPERE RAPIDE' avec table H1/H2/H3 et fourchettes EUR/m2)." }, { "name": "Tableau de situations generique (texte editorial)", "mergedFrom": [ "TableauSituations" ], "visualNote": "Bloc generique non illustre dans les screenshots fournis (pas de rendu visible sur home/distribution/covatherm/covaseal). Conserve separe car son intention (tableau de mises en situation / cas d'usage) differe du comparatif chiffre, du bareme de primes et de la table de specs ; pas de fusion possible faute d'apparence observee.", "bestThumbnailSource": "Aucun rendu dans les screenshots fournis — generer un exemple via le BO/preview pour la vignette (sinon reutiliser temporairement la vignette du tableau comparatif)." } ], "note": "Audit base sur les 4 screenshots fournis. Familles 'Specs' (TechnicalSpecs + Cova*Specs + SpecsTechniques) et 'Comparatif' (PriceComparison + Cova*Comparison + TableauComparatif) se ressemblent fortement a l'oeil (toutes deux = tableau a colonne navy surlignee avec badge), mais je les garde distinctes : Specs decrit UN produit/ses versions (lignes label + valeur), Comparatif oppose PLUSIEURS solutions avec verdicts check/croix sur plusieurs colonnes peer. CovaSeal/Metal/ThermLight Specs (1 col) et Comparison (2-3 col) ne sont que des variantes de colonnes du meme design — fusionnees. PriceVS (home) et DistributionValueDurability sont strictement identiques (duel 2 cartes) — fusionnees. TableauSituations non rendu sur les pages capturees, garde isole par prudence. 16 candidats -> 6 designs distincts." }, { "category": "Process", "candidateCount": 5, "distinctCount": 2, "distinctDesigns": [ { "name": "Timeline étapes verticale (méthode/process)", "mergedFrom": [ "ProcessSection", "IndustrieMethod", "DistributionMethod", "Etapes" ], "visualNote": "Frise verticale identique sur les 3 pages : pastille ronde contournée avec icône (presse-papier, agenda, bouclier, spray...) alignée à gauche, fine ligne verticale de connexion entre les étapes, eyebrow teal 'ÉTAPE 0X', titre bold navy, paragraphe gris. Vu en home ('Devis gratuit / Planification sur-mesure'), sur le hub industrie ('Diagnostic / Préparation / Application sécurisée / Contrôle & suivi', + 2 cartes réassurance crème 'Machines au pied du bâtiment' / 'Applicateurs formés' en pied) et en distribution ('Diagnostic du magasin / Planification autour de vos horaires / Application sécurisée depuis le sol / Confort mesurable', + ligne pied 'Durée moyenne : 2 à 5 jours'). Même gabarit à l'œil ; seuls le contenu, les variantes optionnelles (cartes réassurance, ligne durée, vidéo embed) et le titre de section changent. Etapes = la version générique du même motif.", "bestThumbnailSource": "industries-distribution.jpg — section méthode 'ÉTAPE 01 Diagnostic du magasin' (timeline verticale complète avec les 4 étapes et icônes rondes)" }, { "name": "Système en couches (illustration isométrique)", "mergedFrom": [ "SystemSection" ], "visualNote": "Aucun rapport visuel avec la timeline : grand titre éditorial '3 couches de technologie conçues pour réfléchir, protéger et durer', lead + CTA rouge 'Demander un devis' en haut à droite, et surtout une grande illustration 3D isométrique d'un bloc de toiture en coupe (mousse sombre + couches résine/vernis ambre/blanc) sur fond clair arrondi, avec un label-pilule rouge interactif 'Primaire d'accroche' pointant une couche. C'est une visualisation produit en couches, pas une suite d'étapes.", "bestThumbnailSource": "home.jpg — section 'COMMENT ÇA MARCHE / 3 couches de technologie' avec le bloc isométrique en coupe et le label 'Primaire d'accroche'" } ], "note": "Catégorie Process = 5 candidats, 2 designs distincts. 4 d'entre eux (ProcessSection home, IndustrieMethod, DistributionMethod, Etapes générique) partagent exactement la même frise verticale à étapes (pastilles rondes + ligne de connexion + eyebrow 'ÉTAPE 0X') et fusionnent. SystemSection est seul : c'est une illustration isométrique de la toiture en couches avec label interactif, design totalement différent. Les variantes vidéo embed (DistributionMethod) et cartes réassurance (IndustrieMethod) sont des sous-éléments conditionnels du même gabarit timeline, pas un layout distinct." }, { "category": "Réassurance", "candidateCount": 14, "distinctCount": 6, "distinctDesigns": [ { "name": "Bandeau chiffres-clés (stat row sur navy)", "mergedFrom": [ "SocialProofSection", "Chiffres" ], "visualNote": "Bandeau pleine largeur fond navy profond. A gauche un bloc note (5 etoiles teal + '5 / 5' + 'Note Google · Clients verifies'), puis 3-4 colonnes de gros chiffres blancs avec sous-libelles (+500 chantiers, +2M m2, 14 ans R&D) separees par de fins traits verticaux. Vu en bas de la home. 'Chiffres' generique est la version parametree de ce meme rang de stats.", "bestThumbnailSource": "home.jpg — bandeau navy '5/5 / +500 / +2M / 14 ans' (~y 7350-7600)" }, { "name": "Benefits mesurables (headline + metrique + cartes icones)", "mergedFrom": [ "IndustrieBenefits", "LogistiqueBenefits", "DistributionBenefits" ], "visualNote": "Section fond creme, eyebrow teal 'BENEFICES MESURABLES'. Titre bicolore (navy + gris) a gauche, et a droite une grosse metrique ('-40%' / '-8 a -10°C' dans une carte a thermometre). Dessous une rangee de cartes blanches a coins arrondis avec icone ronde + titre + texte (Industrie: 5 cartes; Distribution: 5 cartes numerotees 01-05). Industrie et Distribution montrent strictement la meme mise en page, seul le contenu/secteur change — Logistique est la meme variante. Un seul design.", "bestThumbnailSource": "industrie-hub.jpg — 'Moins de chaleur / -40%' + rangee de 5 cartes (~y 3000-3950)" }, { "name": "Certifications & garanties (variantes produit identiques)", "mergedFrom": [ "CovaSealCertifications", "CovaMetalCertifications", "CovaThermLightCertifications", "Certifications" ], "visualNote": "Bloc certifications/labels parametre par produit: meme gabarit (liste de garanties/labels type 'Eligible primes CEE', 'ISO 50001 / BREEAM / HQE', 'Garanti 10 ans', '118 record europeen') avec puces/icones. Les variantes CovaSeal/CovaMetal/CovaThermLight sont visuellement identiques (meme code parametre), seul le produit change. Le contenu certif apparait aussi integre au tableau specs sur la page CovaTherm.", "bestThumbnailSource": "home.jpg — bloc blanc 'CERTIFICATIONS & GARANTIES / Des produits qui repondent a vos engagements RSE et labels' avec 3 items a icone (~y 9000-9350)" }, { "name": "Bandeau logos presse", "mergedFrom": [ "PressSection" ], "visualNote": "Bande horizontale de logos presse/medias (mentions presse), libellee, distincte d'un marquee client. Strip de logos en ligne sur fond clair.", "bestThumbnailSource": "home.jpg — bande de logos sous le hero / section presse" }, { "name": "Marquee logos clients", "mergedFrom": [ "TrustLogos", "Logos" ], "visualNote": "Marquee defilant de logos clients. TrustLogos (marquee clients) et Logos (marquee custom inline) ont le meme rendu visuel — rangee/bande defilante de logos monochromes. Fusionnes.", "bestThumbnailSource": "industrie-hub.jpg — bande de logos clients defilante (sous hero)" }, { "name": "Barre de reassurance (mini-rang icones + libelles)", "mergedFrom": [ "BarreReassurance" ], "visualNote": "Rang horizontal compact de points de confiance: petite icone ronde teal + court libelle, repete 3-4 fois ('Solution passive', 'Posee depuis l'exterieur', 'Compatible avec de nombreux supports' / 'Compatible bac acier'). Vu sous le comparatif Toiture classique vs cool roof (industrie) et sous DistributionSolution. Pas de gros chiffres — distinct du bandeau stats.", "bestThumbnailSource": "industrie-hub.jpg — rang 'Solution passive · Posee depuis l'exterieur · Compatible...' sous les 2 cartes toiture (~y 2600)" } ], "note": "Les 3 blocs *Benefits (Industrie/Logistique/Distribution) partagent strictement le meme gabarit (creme + eyebrow 'BENEFICES MESURABLES' + headline bicolore + metrique + rangee de cartes a icone ronde): fusionnes en 1. Les 3 Cova*Certifications sont des variantes parametrees d'un meme template (philosophie 'meme code parametre' du projet) avec generic Certifications: fusionnes en 1. SocialProofSection + Chiffres = meme rang de stats sur navy. TrustLogos + Logos = meme marquee client; PressSection garde un statut a part (bande presse libellee). Attention: les blocs '3 grandes cartes-stat sur navy' (-7 a -10°C / -38% / Prime CEE) que l'on voit sur industrie/distribution sont IndustrieProof/DistributionProof, classes en Temoignage — hors de cette categorie, donc non comptes ici." }, { "category": "Témoignage+FAQ", "candidateCount": 10, "distinctCount": 3, "distinctDesigns": [ { "name": "FAQ accordéon (questions repliables)", "mergedFrom": [ "FAQSection", "ProductFAQ", "IndustrieFAQ", "LogistiqueFAQ", "DistributionFAQ", "Faq" ], "visualNote": "Accordéon mono-colonne IDENTIQUE partout : cartes blanches arrondies à ombre légère, question en gras à gauche + chevron-down à droite, sur fond crème, parfois eyebrow teal ('ILS PARLENT DE NOUS') et lien teal en pied ('Une question? Contactez-nous' / 'Une autre question? Parlons-en'). Vu verbatim sur la home (15+ questions cool roof), industrie-hub (questions HACCP/BPF/ISO), et bas de page CovaSeal (quantité produit / application pro). Seul le contenu des questions change selon page/produit/industrie : un seul design.", "bestThumbnailSource": "home.jpg — section FAQSection ('Combien ça coûte ?' etc., fond crème), accordéon le plus complet et représentatif" }, { "name": "Carrousel témoignages vidéo (résultats clients)", "mergedFrom": [ "Testimonials", "TemoignagesVideo" ], "visualNote": "Bande navy foncé, eyebrow teal 'RÉSULTATS CLIENTS', titre bicolore blanc+teal ('Le cool roof, en chiffres sur le terrain'), 3 cartes vidéo navy en bas de bande avec nom (Olivier Fontaine, Marine Calas), rôle/société en petit, et bouton play circulaire blanc à droite. Lien teal 'Voir les résultats dans votre secteur'. Distinct des bandes-preuve : ici ce sont des cartes-vidéo avec play, pas des chiffres.", "bestThumbnailSource": "home.jpg — section Testimonials 'RÉSULTATS CLIENTS' (3 cartes vidéo navy avec boutons play)" }, { "name": "Bandeau preuve chiffres (3 stat-cards)", "mergedFrom": [ "IndustrieProof", "DistributionProof" ], "visualNote": "Bande navy foncé, eyebrow teal avec trait 'DES RÉSULTATS CONCRETS', gros titre bicolore à gauche ('Ils nous font confiance' / 'Des résultats mesurés sur le terrain') + paragraphe lead à droite, puis 3 cartes navy bordurées chacune avec icône ronde teal en haut, gros chiffre blanc (-7 à -10°C / jusqu'à -20% / Solution passive ; -7,5°C / -38% / Prime CEE) et légende dessous. industrie-hub et distribution montrent EXACTEMENT la même mise en page : un seul design 'preuve chiffres', à distinguer du carrousel vidéo.", "bestThumbnailSource": "industrie-hub.jpg — bande IndustrieProof 'DES RÉSULTATS CONCRETS / Ils nous font confiance' (3 stat-cards navy avec icônes teal)" } ], "note": "Sur les 6 pages capturées, les blocks DistributionFAQ et LogistiqueFAQ n'apparaissent pas en accordéon distinct sur les pages distribution/logistique (elles se terminent par du SEO long-form + footer) ; mais le design FAQ est confirmé identique partout où il s'affiche (home, industrie-hub, produits). Les bandes-preuve IndustrieProof et DistributionProof partagent strictement le même gabarit (3 stat-cards navy à icône teal), donc fusionnées. Le carrousel Testimonials (cartes vidéo + bouton play) est un design à part, ne pas confondre avec les bandes-preuve chiffrées." }, { "category": "CTA+Autre+Fiche", "candidateCount": 21, "distinctCount": 12, "distinctDesigns": [ { "name": "ConstatSection (texte + illustration iso, liste de douleurs)", "mergedFrom": [ "ConstatSection" ], "visualNote": "Vu en haut de la home : illustration isometrique 3D d'un batiment (rouge/chaud, label SANS COOL ROOF) a gauche, et a droite une liste de 3 points de douleur (titre + ligne grise) avec une fine barre d'accent rouge a gauche de la liste. Pas de bouton. Composition image-gauche / liste-droite.", "bestThumbnailSource": "home.jpg, section 'Chaque ete, votre toiture vous coute tres cher' (illustration iso rouge + liste 3 frictions)" }, { "name": "CoolRoofExplainerSection (texte + illustration iso, titre + paragraphe + CTA)", "mergedFrom": [ "CoolRoofExplainerSection" ], "visualNote": "Meme famille que Constat (illustration iso 3D a gauche, label AVEC COOL ROOF en vert/froid) mais colonne droite differente : gros titre bicolore 'Le cool roof : une reponse concrete', un paragraphe avec mots en gras, et un bouton rouge plein 'Demander un devis'. Pas de liste a puces. C'est le pendant 'apres' du Constat.", "bestThumbnailSource": "home.jpg, section 'Le cool roof : une reponse concrete au probleme de chaleur' (illustration iso verte + bouton rouge)" }, { "name": "CTASection finale simple (navy, centree, 2 boutons)", "mergedFrom": [ "CTASection" ], "visualNote": "Bloc navy plein largeur avec blobs degrades subtils, contenu centre : gros titre blanc ('Quel budget prevoir pour traiter votre toiture ?'), sous-titre gris, et DEUX pilules CTA cote a cote (rouge degrade 'Demander un devis' + contour rouge 'Estimer mon budget'). PAS d'eyebrow, PAS de pastilles de reassurance. Variante utilisee sur la home et en bas des pages produit (CovaTherm/CovaSeal).", "bestThumbnailSource": "home.jpg, section 'Quel budget prevoir pour traiter votre toiture ?' (navy, 2 boutons centres)" }, { "name": "Final CTA industrie enrichi (eyebrow teal + 2 boutons + 3 pastilles reassurance)", "mergedFrom": [ "IndustrieFinalCTA", "LogistiqueFinalCTA", "DistributionFinalCTA" ], "visualNote": "Meme bloc navy centre que CTASection mais ENRICHI : petit eyebrow teal en majuscules ('COOL ROOF DISTRIBUTION' / 'COOL ROOF INDUSTRIEL'), gros titre blanc 2 lignes, sous-titre, DEUX boutons ('Demander un devis' rouge + 'Parler a un expert' contour), PUIS une rangee de 3 pastilles/cards de reassurance ('Etude personnalisee sous 48h', 'Prime CEE estimee', 'Sans engagement' / 'Expertise technique reconnue'). Les 3 versions industrie sont visuellement identiques, seuls l'eyebrow et les libelles changent.", "bestThumbnailSource": "industries-distribution.jpg, section 'Faites de la fraicheur un atout commercial' (eyebrow teal + 2 boutons + 3 pastilles)" }, { "name": "Cta generique (navy, gauche, badge + bouton unique)", "mergedFrom": [ "Cta" ], "visualNote": "Bloc navy mais mise en page DIFFERENTE des autres CTA : contenu aligne a GAUCHE (badge pilule contour 'Votre batiment', gros titre, sous-titre) avec un SEUL bouton rouge 'Demander un devis' pousse a droite. Pas centre, pas de double bouton, pas de pastilles. Vu en bas de la fiche reference.", "bestThumbnailSource": "reference-servier.jpg, section 'Identifiez le potentiel de votre toiture.' (navy, badge a gauche, 1 bouton a droite)" }, { "name": "SEOContent long-form / editorial dossier", "mergedFrom": [ "SEOContent", "CoolRoofGuide", "CovaSealEditorial", "CovaMetalEditorial", "CovaThermLightEditorial", "LogistiqueSEOContent", "DistributionSEOContent", "ContenuSeo" ], "visualNote": "Long article editorial une colonne sur fond creme : eyebrow 'DOSSIER' (ou 'DOSSIER LOGISTIQUE'), titre bicolore 2 lignes ('Tout comprendre sur le cool roof' / 'La peinture cool roof, en clair' / 'L'etancheite cool roof, en clair' / 'Chaleur en entrepot logistique...'), paragraphes avec mots en gras, sous-titres H2/H3, listes, parfois un petit tableau comparatif integre et une section 'Sources et references scientifiques'. Toutes les variantes (home, produits CovaTherm/CovaSeal/CovaMetal/CovaThermLight, industrie logistique/distribution) partagent exactement la meme mise en page ; seul le texte change. DistributionSEOContent montre juste une intro lead en plus, meme design.", "bestThumbnailSource": "solutions-covatherm.jpg, section 'La peinture cool roof, en clair' (badge DOSSIER + long-form), ou home.jpg 'Tout comprendre sur le cool roof'" }, { "name": "ApplicatorsSection (panneau recrutement creme + checklist)", "mergedFrom": [ "ApplicatorsSection" ], "visualNote": "Panneau a coins arrondis fond creme/teal tres clair : badge pilule 'Reseau applicateurs', gros titre 2 lignes 'Devenez applicateur cool roof certifie', paragraphe d'intro, puis une checklist de 3 items avec icones rondes coche verte, et un bouton pilule contour 'En savoir plus ->'. Mise en page distincte (panneau encadre clair, pas pleine largeur navy).", "bestThumbnailSource": "home.jpg, panneau 'Devenez applicateur cool roof certifie' (fond creme, checklist verte) — egalement en bas des pages produit" }, { "name": "FicheChantier (fiche reference chantier)", "mergedFrom": [ "FicheChantier" ], "visualNote": "Mise en page unique de fiche reference : en-tete navy avec lien retour, badge categorie ('Industrie'), enorme titre 2 lignes, lead, rangee de chips (lieu / produit / type d'etancheite) et carte photo aerienne arrondie a droite ; en dessous sur fond creme une grosse stat ('8 000 m2 de toiture traitee') puis 3 etapes numerotees 01/02/03 'Le contexte / La reponse Covalba / Le resultat' (pastille ronde numero + barre verticale + titre + paragraphe).", "bestThumbnailSource": "reference-servier.jpg, en-tete 'Laboratoires Servier Industrie - Gidy' + stat 8 000 m2 + etapes 01/02/03" }, { "name": "WinterObjectionSection (traitement d'objection hiver)", "mergedFrom": [ "WinterObjectionSection" ], "visualNote": "NON OBSERVE sur les 5 screenshots fournis (marque INVISIBLE, non rendu sur les pages capturees). Decrit comme une section editoriale de traitement d'objection ('et l'hiver ?'). Conserve distinct faute de pouvoir le fusionner visuellement avec un autre design observe.", "bestThumbnailSource": "non observe — a capturer sur une page ou la section est rendue (home), section traitant l'objection hivernale" }, { "name": "RSESection (engagement environnemental)", "mergedFrom": [ "RSESection" ], "visualNote": "NON OBSERVE sur les 5 screenshots fournis (marque INVISIBLE). Decrit comme une section d'engagement environnemental/RSE. Conserve distinct faute de rendu visuel pour confirmer une fusion.", "bestThumbnailSource": "non observe — a capturer sur la page ou la section RSE est rendue (home)" }, { "name": "Citation (blockquote editorial)", "mergedFrom": [ "Citation" ], "visualNote": "NON OBSERVE sur les 5 screenshots fournis. Decrit comme un bloc citation/blockquote editorial. Design intrinsequement distinct (citation isolee) des longs articles SEO et des CTA ; conserve separe.", "bestThumbnailSource": "non observe — a capturer sur une page utilisant une citation editoriale" }, { "name": "ComposantReact (escape hatch interactif)", "mergedFrom": [ "ComposantReact" ], "visualNote": "NON OBSERVE — escape hatch generique sans rendu fixe (contenu React arbitraire injecte). Pas de design visuel propre ; conserve comme entree distincte (categorie escape hatch) sans vignette representative.", "bestThumbnailSource": "non observe — pas de design fixe (escape hatch), aucune vignette representative" } ], "note": "Categorie 'CTA+Autre+Fiche' : 21 candidats analyses, ramenes a 12 designs distincts. Fusions visuelles majeures observees sur les screenshots : (1) les 3 *FinalCTA industrie (Industrie/Logistique/Distribution) sont un SEUL design enrichi navy avec eyebrow teal + 2 boutons + 3 pastilles de reassurance ; (2) CTASection est la variante simple (navy, centree, 2 boutons, sans eyebrow ni pastilles) reutilisee sur la home et en bas des pages produit ; (3) tous les longs articles editoriaux/SEO (SEOContent home, CoolRoofGuide, les 4 *Editorial produit, Logistique/DistributionSEOContent, ContenuSeo) partagent la meme mise en page 'DOSSIER' une colonne (titre bicolore + prose + tableau integre + sources). Le 'Cta' generique reste distinct car aligne a gauche avec un bouton unique (vu sur la fiche reference). 4 candidats n'apparaissent sur AUCUN des 5 screenshots (WinterObjectionSection, RSESection, Citation, ComposantReact) : conserves distincts par defaut, sans confirmation visuelle, signales explicitement. Constat et Explainer sont gardes separes (meme famille illustration iso + texte, mais colonne droite reellement differente : liste a puces vs paragraphe + CTA). Timeline exclu du perimetre (frise chronologique = design Process)." } ], "synthesis": "I now have a complete and accurate picture of the architecture. I have all the facts needed to write the report. Let me compute the totals from the audit JSON and produce the final report.\n\nThe audit JSON sums:\n- Héros: 9→6, Showcase: 15→7, Grille: 20→7, Comparatif: 16→6, Process: 5→2, Réassurance: 14→6, Témoignage+FAQ: 10→3, CTA+Autre+Fiche: 21→12\n- Candidates: 9+15+20+16+5+14+10+21 = 110; Distinct: 6+7+7+6+2+6+3+12 = 49\n\nThe task says \"108 candidates\" — the audit lists 110 (the prompt rounds/states 108; I'll be honest about this). The code has 26 generic ACF layouts (modal-selectable) and 72 origine adapters wired. Let me write the report.\n\n# Audit VISION des blocks Covalba — Rapport de synthèse et plan d'implémentation\n\n## 0. Cadrage technique (état réel du code, vérifié)\n\nAvant les chiffres, un point d'architecture indispensable pour que le périmètre soit honnête. Le projet n'est PAS un mono-rendu : il y a **deux systèmes de rendu superposés** (`src/components/blocks/BlockRenderer.tsx`) :\n\n1. **Registry `origine`** (priorité 1) — 72 adaptateurs pixel-parfaits wirés (`src/components/origine/{home,produits,industrie}.tsx`), keyés par le **nom du composant React d'origine** (`Hero`, `ProductHero`, `SectorsGrid`, `IndustrieProof`…). C'est de là que viennent les ~108/110 « candidats » de l'audit. Ces composants rendent à l'identique du site pré-CMS mais **ne sont PAS sélectionnables dans la modale** : ils sont posés par le seed, figés sur leurs pages.\n2. **Registry générique** (fallback) — 26 layouts ACF (`wordpress/.../field-groups/layouts/*.php` + 26 entrées dans `BlockRenderer.tsx`), matchés par suffixe `…XxxLayout`. **Ce sont EUX, et eux seuls, que la modale BO expose** (`sections.php`, `acfe_flexible_modal`).\n\nConséquence centrale : **la modale propose 26 « coquilles » génériques, alors que le site contient ~49 designs réellement distincts.** L'écart audité est donc double — sosies à fusionner ET designs bespoke jamais exposés.\n\n---\n\n## 1. Total des designs visuellement distincts\n\n| | Nombre |\n|---|---|\n| Candidats nommés dans le code (registry `origine` + génériques cités) | **110** (l'audit en compte 110 ; le brief disait 108 — écart de 2, voir note) |\n| **Designs visuellement distincts après fusion des sosies** | **49** |\n| Réduction | **−61 designs (~55 %)** |\n\n**Détail de la somme distincte** : 6 (Héros) + 7 (Showcase) + 7 (Grille) + 6 (Comparatif) + 2 (Process) + 6 (Réassurance) + 3 (Témoignage+FAQ) + 12 (CTA+Autre+Fiche) = **49**.\n\n**Explication de l'écart 110 → 49.** Les sosies sont massivement des **mêmes composants paramétrés par secteur/produit**, conformément à la doctrine projet « parité pixel = même code » (mémoire `parite-pixel-meme-code.md`). Trois familles de fusion dominent :\n- **Variantes produit** : les 4 `Cova*Showcase`, 4 `*Advantages`, `Cova*Specs`/`Comparison`/`Certifications` → un design chacun, le contenu change, pas le layout.\n- **Variantes secteur** : `Distribution*`/`Logistique*`/`Industrie*` (Hero, Problem, Applications, Method, Benefits, Proof, FinalCTA, Solution) → souvent un seul gabarit par fonction.\n- **Génériques = doublons d'origine** : `Etapes`=`ProcessSection`, `Logos`=`TrustLogos`, `ContenuSeo`=`SEOContent`+tous les `*Editorial`, etc. — la version « générique BO » et la version « origine » sont visuellement le même bloc.\n\n**Note d'honnêteté sur 108 vs 110** : l'addition des `candidateCount` de l'audit donne 110, pas 108. Probablement deux entrées comptées en double entre catégories (ex. `IndustrieBenefits`/`DistributionBenefits` apparaissent à la fois côté Réassurance et frôlent la catégorie Témoignage via `*Proof`). Ça ne change pas le résultat actionnable (49 distincts), mais je le signale plutôt que de masquer.\n\n---\n\n## 2. Tableau par catégorie — distincts retenus + statut modale\n\nStatut : **EXPOSÉ** = il existe déjà un layout ACF sélectionnable couvrant ce design ; **INVISIBLE** = design bespoke (origine) non sélectionnable, à exposer. Mapping établi en croisant les 26 layouts de `sections.php` avec les `mergedFrom` de l'audit.\n\n### Héros — 9 → 6\n\n| Design distinct | Statut modale | Layout/coquille couvrante |\n|---|---|---|\n| Hero home (titre + carte form compacte) | **EXPOSÉ** | `hero` |\n| ProductHero (split bicolore photo-band + navy) | **INVISIBLE** | aucun (`hero` ne fait pas le double-étage) |\n| IndustrieHero (fond clair, sans form, photo arrondie) | **INVISIBLE** | aucun |\n| Distribution/Logistique Hero (navy + lead-form + logos) | **INVISIBLE** | aucun |\n| Roof/Sector Hero (fond photo plein cadre + lead-form) | **INVISIBLE** | aucun |\n| LocalHero (photo plein cadre, sans form) | **INVISIBLE** | aucun |\n\n### Showcase — 15 → 7\n\n| Design distinct | Statut | Coquille |\n|---|---|---|\n| Cova*Showcase (navy + toggle + carte packshot) | **INVISIBLE** | aucun |\n| Compatibilité supports (liste + grande image) | **EXPOSÉ** | `compatibilite-supports` |\n| Principe classique vs cool (2 cartes 3D) | **INVISIBLE** | aucun |\n| Split texte/image illustration 3D | **EXPOSÉ** | `texte-image` |\n| Avant/Après (paire d'images) | **EXPOSÉ** | `avant-apres` |\n| Video (embed + takeaways) | **EXPOSÉ** | `video` |\n| Variantes produit (cards pricing) | **EXPOSÉ** | `variantes-produit` |\n\n### Grille — 20 → 7\n\n| Design distinct | Statut | Coquille |\n|---|---|---|\n| Cartes photo plein cadre + titre overlay | **EXPOSÉ** | `grille-secteurs` |\n| Cartes frictions vignette photo en haut | **INVISIBLE** | aucun (≈ `grille-cards` mais layout différent) |\n| Cartes icône/label+numéro | **EXPOSÉ** | `grille-cards` |\n| Bloc expertise 2×2 carte highlight navy | **INVISIBLE** | aucun |\n| Liste avantages 2 colonnes sur navy | **INVISIBLE** | aucun |\n| Cartes blanches 3-up média+label | **EXPOSÉ** | `grille-solutions` |\n| Cartes références bandeau navy + preuve | **EXPOSÉ** | `references-grille` |\n\n### Comparatif — 16 → 6\n\n| Design distinct | Statut | Coquille |\n|---|---|---|\n| Tableau comparatif multi-solutions (verdicts) | **EXPOSÉ** | `tableau-comparatif` |\n| Tableau de specs technique | **EXPOSÉ** | `specs-techniques` |\n| Duel 2 cartes (standard vs Covalba) | **INVISIBLE** | aucun |\n| 2 cartes-illustration (absorption vs réflexion) | **INVISIBLE** | aucun |\n| Table primes CEE par zone (form + barème) | **INVISIBLE** | aucun |\n| Tableau de situations générique | **EXPOSÉ** | `tableau-situations` |\n\n### Process — 5 → 2\n\n| Design distinct | Statut | Coquille |\n|---|---|---|\n| Timeline étapes verticale | **EXPOSÉ** | `etapes` (+ `timeline`) |\n| Système en couches (illustration iso) | **INVISIBLE** | aucun |\n\n### Réassurance — 14 → 6\n\n| Design distinct | Statut | Coquille |\n|---|---|---|\n| Bandeau chiffres-clés (stat row navy) | **EXPOSÉ** | `chiffres` |\n| Benefits mesurables (headline + métrique + cartes) | **INVISIBLE** | aucun |\n| Certifications & garanties | **EXPOSÉ** | `certifications` |\n| Bandeau logos presse | **INVISIBLE** | aucun (`logos` = clients) |\n| Marquee logos clients | **EXPOSÉ** | `logos` |\n| Barre de réassurance (mini-rang icônes) | **EXPOSÉ** | `barre-reassurance` |\n\n### Témoignage + FAQ — 10 → 3\n\n| Design distinct | Statut | Coquille |\n|---|---|---|\n| FAQ accordéon | **EXPOSÉ** | `faq` |\n| Carrousel témoignages vidéo | **EXPOSÉ** | `temoignages-video` |\n| Bandeau preuve chiffres (3 stat-cards) | **INVISIBLE** | aucun (distinct de `chiffres`) |\n\n### CTA + Autre + Fiche — 21 → 12\n\n| Design distinct | Statut | Coquille |\n|---|---|---|\n| ConstatSection (iso + liste douleurs) | **INVISIBLE** | aucun |\n| CoolRoofExplainer (iso + paragraphe + CTA) | **INVISIBLE** | aucun |\n| CTASection finale simple (navy centré 2 boutons) | **INVISIBLE** | aucun (`cta` = aligné gauche, 1 bouton) |\n| Final CTA enrichi (eyebrow + 2 boutons + 3 pastilles) | **INVISIBLE** | aucun |\n| Cta générique (navy gauche, 1 bouton) | **EXPOSÉ** | `cta` |\n| SEOContent long-form / dossier | **EXPOSÉ** | `contenu-seo` |\n| ApplicatorsSection (panneau recrutement) | **INVISIBLE** | aucun |\n| FicheChantier | **EXPOSÉ\\*** | `fiche-chantier` (layout existe mais **sans vignette**, et rendu contextuel reference) |\n| WinterObjectionSection | **INVISIBLE** | aucun (non observé) |\n| RSESection | **INVISIBLE** | aucun (non observé) |\n| Citation (blockquote) | **EXPOSÉ** | `citation` |\n| ComposantReact (escape hatch) | **EXPOSÉ** | `composant-react` |\n\n**Bilan statut** : sur les 49 designs distincts, **~24 sont déjà couverts par une coquille de la modale** et **~25 sont INVISIBLES** (bespoke origine jamais exposés). `fiche-chantier` est un demi-cas (layout présent, vignette manquante — c'est le reliquat tâche #6).\n\n---\n\n## 3. Validation de l'exemple utilisateur (héros distincts)\n\n**Affirmation partiellement infirmée — c'est la conclusion correcte.** L'audit a raison de fusionner et raison de séparer :\n\n- ✅ **Fusion juste** : `DistributionHero` et `LogistiqueHero` sont **le même design** (split texte gauche + carte lead-form droite, fond navy plat, strip stats + rangée logos). La seule différence — logos en grille vs marquee — est un paramètre d'affichage, pas un layout distinct. Les présenter comme 2 designs serait une erreur. Idem `RoofHero`/`SectorHero` fusionnés (même template, nb de champs du form ≠).\n- ✅ **Séparation juste** : garder `RoofHero/SectorHero` distinct de Distribution/Logistique est **correct** — la différence est réelle (fond photo plein cadre sombre vs navy plat), pas cosmétique.\n- ✅ Les vrais distincts confirmés visuellement : Hero-home (carte compacte + bande photo fine), ProductHero (bicolore deux étages), IndustrieHero (fond clair, sans form), LocalHero (photo plein cadre, sans form).\n\n**Verdict : 9 candidats héros → 6 designs distincts.** Le raisonnement « différence cosmétique (grille vs marquee, nb de champs) = même design » est la bonne grille de lecture et doit servir de règle pour toutes les catégories.\n\n---\n\n## 4. Périmètre à implémenter — blocks à AJOUTER à la modale\n\nCe sont les **~25 designs distincts aujourd'hui INVISIBLES**. Regroupés par effort.\n\n**Héros (5 nouveaux layouts)** : `product-hero`, `industrie-hero`, `secteur-hero` (= Distribution/Logistique, 1 layout paramétré logos grille|marquee), `roof-hero` (= Roof/Sector, 1 layout), `local-hero`.\n\n**Showcase (2)** : `produit-showcase` (Cova*Showcase, toggle variantes optionnel), `principe-cool-roof` (2 cartes 3D classique vs cool).\n\n**Grille (3)** : `grille-frictions` (vignette photo en haut), `expertise-grid` (2×2, carte highlight navy), `avantages-produit` (liste 2 col sur navy).\n\n**Comparatif (3)** : `duel-cards` (standard vs Covalba), `solution-absorption-reflexion` (2 cartes illustration), `prime-cee` (form + barème zones).\n\n**Process (1)** : `systeme-couches` (illustration iso interactive).\n\n**Réassurance (2)** : `benefices-mesurables` (headline + métrique + cartes), `logos-presse` (paramètre du même bloc logos, distinct de clients).\n\n**Témoignage (1)** : `preuve-chiffres` (3 stat-cards navy).\n\n**CTA + Autre (6 confirmés + 2 à statuer)** : `constat`, `cool-roof-explainer`, `cta-final-simple` (navy centré 2 boutons), `cta-final-enrichi` (eyebrow + 3 pastilles), `applicateurs`. Plus, après capture/validation, `winter-objection`, `rse-section` (non observés — à confirmer comme designs réels avant de coder).\n\n**Total périmètre net : ~23 nouveaux layouts + finition `fiche-chantier`.** (Les ~25 invisibles moins ~2 à statuer et ré-attribution de `logos-presse` comme variante.)\n\n---\n\n## 5. Plan d'implémentation\n\n### 5.1 Mécanisme recommandé — **un layout ACF par design, origine figée**\n\nDeux options se présentent :\n\n- **A. Layout + sélecteur de style** (un layout « Héros » avec un champ `style = home|product|industrie|…`). **Rejeté** : ça oblige à un champ-set commun qui ne colle à aucun des 6 héros (les champs diffèrent radicalement — form vs pas de form, packshots vs photo) et casse le mapping suffixe `…XxxLayout → composant origine` du `BlockRenderer`. On recréerait du branching conditionnel fragile.\n- **B. Un layout par design distinct, chacun figé sur son composant origine.** **Recommandé.** C'est exactement le pattern déjà en place pour les 26 génériques + 72 adaptateurs. Chaque nouveau layout ACF expose **uniquement les champs réellement éditables** de ce design (titre, sous-titre, image, items…), et `BlockRenderer` route déjà vers le bon composant via `origineRegistry`. Zéro réimplémentation, parité garantie.\n\nCe choix respecte la doctrine `parite-pixel-meme-code.md` : on n'écrit pas de nouveau composant visuel, on **branche un schéma de champs sur un composant origine déjà wiré**.\n\n### 5.2 Rendre éditables les designs bespoke aujourd'hui figés\n\nLe composant origine existe et est déjà dans `origineRegistry` (72 adaptateurs). Le seul maillon manquant est **le schéma de champs + l'entrée dans la modale**. Par design INVISIBLE :\n\n1. Créer `wordpress/mu-plugins/covalba-core/inc/field-groups/layouts/.php` (sur le modèle de `hero.php`), avec les champs éditables et **`show_in_graphql` + noms de champs uniques** (cf. piège types §5.5).\n2. Ajouter `` aux 3 listes de `sections.php` : `$files`, `cvb_layout_categories()`, `$with_thumb`.\n3. Vérifier que l'adaptateur origine correspondant lit bien ces champs (la plupart sont déjà mappés ; pour Constat/Explainer/Applicators/SystemSection/Benefits/Proof/FinalCTA, vérifier le mapping camelCase WP → props).\n4. Pour les designs **secteur-paramétrés** (secteur-hero, benefices, preuve-chiffres…), un champ `secteur`/`variante` peut nourrir le contenu par défaut tout en laissant tout éditable — un seul layout couvre Distribution+Logistique.\n\n### 5.3 Stratégie vignettes — réutiliser `scripts/block-thumbnails/`\n\nL'outillage existe et est éprouvé (`capture-gallery.mjs`, `capture.mjs`, `probe.mjs`). Le pattern actuel :\n- une page WP `/galerie-blocks` liste toutes les sections, le script screenshote `main > *` aligné sur l'ordre GraphQL, écrit en `public/block-thumbnails/.jpg`, servi ensuite via `acfe_flexible_thumbnail`.\n\nPour les nouveaux : **ajouter chaque nouveau layout à la page galerie** (seed) avec un contenu représentatif, étendre le tableau `NEED` de `capture-gallery.mjs`, relancer le script. Les designs **contextuels** (`fiche-chantier`, héros à fond photo) qui ne rendent pas en galerie générique : capturer depuis leur **vraie page** via `capture-pages.mjs` et copier le crop. C'est précisément le blocage de `fiche-chantier` aujourd'hui (tâche #6).\n\n### 5.4 Fichiers à toucher + ordre\n\n1. **`wordpress/.../layouts/.php`** × ~23 (création) — schémas de champs.\n2. **`wordpress/.../field-groups/sections.php`** — 3 listes (`$files`, catégories, `$with_thumb`).\n3. **`src/components/origine/*.tsx`** — vérifier/compléter le mapping des adaptateurs concernés (la plupart existent déjà).\n4. **`src/lib/wp/types.ts` + `src/lib/wp/fragments|queries`** — ajouter les types/fragments GraphQL des nouveaux layouts (le `BlockRenderer` route par `__typename`, donc les fragments doivent exister).\n5. **Page seed `/galerie-blocks`** (`wordpress/seed/`) + **`scripts/block-thumbnails/capture-gallery.mjs`** (`NEED`) — vignettes.\n6. **`wordpress/seed/run.php`/`lib.php`** — si on veut des exemples seedés.\n\n**Ordre conseillé** : (a) 1 layout pilote de bout en bout (ex. `benefices-mesurables`, déjà mappé, non contextuel) pour valider la chaîne champs→GraphQL→fragment→renderer→vignette ; (b) puis les designs sans piège (génériques navy : CTA enrichi/simple, preuve-chiffres, expertise, avantages) ; (c) enfin les contextuels/photos (héros à fond image, fiche-chantier, prime-cee avec form).\n\n### 5.5 Pièges\n\n- **Parité pixel des pages existantes** : les pages actuelles sont seedées avec `origine = \"NomComposant\"` qui **court-circuite le layout générique** (priorité 1 dans `BlockRenderer`). Tant qu'on ne retire pas la clé `origine` des pages seedées, **ajouter des layouts ne casse rien** — les pages live continuent de rendre l'origine. Le nouveau layout ne sert qu'aux **nouvelles sections créées au BO**. Ne PAS « migrer » les pages existantes vers les nouveaux layouts sans diff pixel.\n- **Sentinel `_absorbe`** : certains composants 1-pour-N consomment les données de rows voisines. Les designs concernés (ex. héros qui absorbent une row stats/logos) doivent garder ce mécanisme — un layout BO unitaire doit embarquer TOUS les champs, sinon perte de contenu.\n- **Types WPGraphQL for ACF (mémoire `covalba-schema-contract.md`)** : collisions de types sur champs imbriqués de même nom — d'où la convention déjà appliquée (commit `aff259d`, « unique nested field names »). **Tout nouveau sous-champ répété doit avoir un nom unique** (préfixé par le slug du layout), sinon erreur de schéma au build.\n- **Tri par longueur des clés** (`registryKeys.sort`) : déjà géré, mais tout nouveau `…Layout` dont le suffixe en chevauche un autre (ex. un futur `…VideoLayout`) doit être vérifié.\n- **Vignettes contextuelles** : `fiche-chantier` et les héros à fond photo ne rendent pas en galerie générique → prévoir la capture page réelle, sinon vignette vide dans la modale.\n- **Designs non observés** (`WinterObjection`, `RSESection`, `Citation` éditorial, `ComposantReact`) : 4 entrées classées sans confirmation visuelle. **Valider qu'ils sont de vrais designs distincts** (capture sur page rendue) avant de leur dédier un layout — sinon risque de coder une coquille pour un bloc fantôme.\n\n### 5.6 Estimation d'effort réaliste\n\nEffort par layout (B = un layout/design), pour un design **non contextuel déjà mappé** : ~0,5–1 j (schéma champs + fragment GraphQL + entrée sections.php + vignette galerie + smoke test BO→front). Pour un design **contextuel ou à mapping incomplet** (héros à form, prime-cee, fiche-chantier, constat/explainer/applicators à vérifier) : ~1–1,5 j.\n\n| Lot | Designs | Effort |\n|---|---|---|\n| Pilote bout-en-bout (chaîne complète) | 1 | 1,5 j |\n| Génériques navy déjà mappés | ~8 | 5–6 j |\n| Héros (5) — form, fonds photo, vignettes contextuelles | 5 | 6–7 j |\n| Showcase/Comparatif/Process bespoke (iso, duel, absorption, couches) | ~6 | 5–6 j |\n| Reliquats à statuer + fiche-chantier vignette | ~3 | 2–3 j |\n| Galerie + outillage vignettes (mutualisé) | — | 1,5 j |\n| QA parité (diff pixel pages live) + types GraphQL | — | 2 j |\n\n**Total réaliste : ~23–27 jours-homme** pour exposer proprement les ~23 designs invisibles avec vignettes et sans régression de parité. Ce n'est pas un petit chantier : l'essentiel du coût n'est pas le rendu (déjà fait, c'est la force du registry origine) mais **la conception du schéma de champs éditables design par design, l'unicité des types GraphQL, et la capture de vignettes contextuelles**.\n\n---\n\n**Fichiers de référence (chemins absolus)** :\n- Modale BO / layouts : `/opt/projects/.covalba-wp-worktrees/tom-passage-wp/wordpress/mu-plugins/covalba-core/inc/field-groups/sections.php` et `…/field-groups/layouts/*.php` (26 fichiers)\n- Dispatch rendu : `/opt/projects/.covalba-wp-worktrees/tom-passage-wp/src/components/blocks/BlockRenderer.tsx`\n- Registry pixel-parité (72 adaptateurs) : `/opt/projects/.covalba-wp-worktrees/tom-passage-wp/src/components/origine/{index.ts,home.tsx,produits.tsx,industrie.tsx}`\n- Composants génériques BO (26) : `/opt/projects/.covalba-wp-worktrees/tom-passage-wp/src/components/blocks/`\n- Outillage vignettes : `/opt/projects/.covalba-wp-worktrees/tom-passage-wp/scripts/block-thumbnails/{capture.mjs,capture-gallery.mjs,capture-pages.mjs,probe.mjs}` → sortie `public/block-thumbnails/`" } }