## Résumé

Refonte complète de l'architecture du site, en 2 chantiers liés :

### 1. Migration Vite + React Router → Next.js 16 (App Router, React 19)
- ~30 routes recréées sous `app/` (statiques + dynamiques blog/références/pages locales)
- SEO rendu server-side : Metadata API, JSON-LD en RSC, `app/sitemap.ts`, redirects 308 — les balises sont désormais dans le HTML initial (gain SEO vs SPA Vite)
- Vite, react-router, et 8 dépendances mortes supprimés ; dev server piloté par `.env.local` (aucun port en dur)

### 2. WordPress headless avec catalogue de blocks réorganisables
- **Infra** : Docker Compose (mariadb + WP 6.8 + redis + wpcli) sur le VPS srv1255941, admin sur https://covalba-admin.paf-studio.dev (TLS, basic auth, noindex), backups quotidiens
- **Modèle** : 4 CPT (produit, toiture, industrie, référence) + pages natives pour les one-off ; **26 layouts Flexible Content** partagés (catalogue de blocks filtré par type dans le BO) ; options globales (menu, footer, logos…) ; contrat de schéma documenté dans `wordpress/SCHEMA.md`
- **Front** : BlockRenderer (registry par suffixe) + 26 composants de blocks dérivés du design existant ; routes `[slug]` par CPT ; ISR par tags avec revalidation on-demand (bouton « Publier sur le site » dans l'admin WP)
- **Seed** : 36 documents extraits du contenu en dur (textes verbatim + 127 médias) via un seeder PHP idempotent
- Blog et pages locales villes/départements restent en dur (hors périmètre, architecture prête)

## Test plan
- [x] `npm run build` + `npm test` (24/24) verts
- [x] Toutes les routes répondent 200 sur la preview, redirects 308, 404 OK
- [x] Canonical + JSON-LD présents dans le HTML initial
- [x] Boucle éditoriale : modification dans le BO → webhook → revalidation front (vérifiée)
- [x] Requête GraphQL complète des 26 fragments validée contre le schéma réel
- [ ] Recette visuelle page à page (preview : https://covalba-wp-tom-passage-wp.paf-studio.dev) — à faire avant merge
- [ ] Déploiement Vercel + bascule des env vars (`WORDPRESS_GRAPHQL_URL`, `REVALIDATE_SECRET`)

🤖 Generated with [Claude Code](https://claude.com/claude-code)


---

## Handoff (mise à jour 2026-06-15)

_Document de passation complet : `HANDOFF.md` à la racine._

# HANDOFF -- Covalba (passage WordPress headless)

*Derniere mise a jour : 2026-06-15 13:25 par Tom Assous sur la branche tom/passage-wp*

## Projet en 30 secondes

Site Covalba (cool roof professionnel). **Le projet a change d'architecture** : l'ancienne SPA Vite (repo `Tomassous-38/covalba-refonte`, garde comme backup) a ete portee en **Next.js 16 (App Router, Turbopack)** branchee sur un **WordPress headless** (WPGraphQL + ACF PRO + ACF Extended). Nouveau repo : **`Tomassous-38/covalba-wp`** (prive). Le front est sur **Vercel** (`covalba-wp.vercel.app`, auto-deploy sur push de `tom/passage-wp`), le WordPress tourne sur le VPS Hostinger (`covalba-admin.paf-studio.dev`). Parite pixel avec la version Vite : les composants d'origine sont reutilises et alimentes par WP via un registry `origine`.

## Ou on en est

Etat au 2026-06-15 -- branche `tom/passage-wp`, HEAD `318cbcf`, **tout pousse et deploye** (dernier deploiement prod Vercel READY = `318cbcf`).

Ce qui marche / est en place :
- **Front Next.js en ligne** sur `covalba-wp.vercel.app`, alimente par le WordPress headless.
- **Route catch-all** `app/[...slug]/page.tsx` : une page creee dans le BO WP est visible publiquement (indexable, ISR par tags).
- **Perf** : `next/image` via wrapper `WpImage` (AVIF/WebP, srcset, fallback `<img>` natif pour hosts non optimisables) + `next/font`.
- **Revalidation ciblee** au "Publier" : seuls les tags de la route changee sont purges (`page:/{uri}` ou `{type}:{slug}` + `listing:*`), plus de purge globale.
- **BO en mode block-builder** : ACF Extended (modale plein ecran, recherche, categories, vignettes) + duplicate-post (templates). **Campagne 23/23 designs bespoke exposes** : tous les designs distincts du site sont selectionnables dans la modale (cf. `docs/blocks-audit.md`).
- **WordPress core mis a jour 6.8.3 -> 7.0** (backup pris avant ; core dans volume Docker `wp-core`, persiste ; rollback possible). Plugins compat (ACF 6.8.4, WPGraphQL 2.16, ACFE, duplicate-post), PHP 8.3.31.
- **134 images externes (HubSpot) migrees dans la mediatheque WP** (47 `references.ts` + 87 `www.covalba.fr`), avec alt + nom de fichier SEO, URLs remplacees dans le front. Plus aucune image externe sauf posters YouTube dynamiques (`img.youtube/${videoId}`).

Builds verts (`npm run build` : 48/48 pages). Commits tous authored `assous.tom@gmail.com` (sinon Vercel Hobby bloque le deploiement).

## Problematiques / Blockers

- **Backups WP non offsite** : `backup.sh` (DB + uploads, rotation 7j) ecrit sur le VPS lui-meme = SPOF. A externaliser (S3/R2/Bunny) -- en attente du choix de stockage de Tom.
- **Variables d'env Preview Vercel** : pas encore configurees (le CLI Vercel 51 a un bug ; a faire via le dashboard). La prod a bien `WORDPRESS_GRAPHQL_URL` + `REVALIDATE_SECRET`.
- **Pas de PR ouverte** vers `main` : le merge `tom/passage-wp -> main` reste a faire via PR quand Tom valide.
- **Posters YouTube dynamiques** restent servis par YouTube (generes au runtime depuis l'ID video, pas d'equivalent WP) -- volontaire.
- `tsconfig.tsbuildinfo` (cache build) et `CLAUDE.md` (modifie hors session) restent non commites volontairement.

## Structure du code

- `app/` -- routes Next.js App Router. `app/[...slug]/page.tsx` = catch-all pages WP ; `app/api/revalidate/route.ts` = endpoint de revalidation.
- `src/components/blocks/` -- blocks generiques (1 par layout ACF) + `BlockRenderer.tsx` (route par `origine` puis par `__typename`).
- `src/components/origine/` -- adaptateurs pixel-parfaits des composants d'origine du site.
- `src/lib/wp/` -- couche WordPress : `fragments/` (GraphQL), `types.ts`, `queries/page.ts` (+ `LISTING_TAGS_BY_URI`).
- `src/data/references.ts`, `src/data/blogArticles.ts` -- donnees front (references clients, blog) ; images = URLs mediatheque WP.
- `wordpress/mu-plugins/covalba-core/inc/` -- mu-plugin WP : `field-groups/sections.php` (flexible content + ACFE), `field-groups/layouts/*.php` (1 fichier par design), `revalidate.php` (tags par route), `seed/`.
- `scripts/block-thumbnails/` -- capture Playwright des vignettes de blocks.
- `scripts/migrate-external-images/` -- outillage de migration d'images externes vers WP (manifests + mappings + importeur PHP).
- `docs/blocks-audit.md` -- audit des designs + campagne d'exposition (23/23).
- `docs/contexte/` -- contexte metier/client (a lire en debut de session).

## Prochaines etapes

- [ ] Externaliser les backups WP offsite (choisir S3/R2/Bunny/autre VPS, cabler dans `backup.sh` via rclone/aws s3 sync).
- [ ] Configurer les env vars Preview sur Vercel (dashboard) : `WORDPRESS_GRAPHQL_URL`, `REVALIDATE_SECRET`.
- [ ] Ouvrir la PR `tom/passage-wp -> main` quand Tom valide (review Claude auto via plugin GitHub).
- [ ] Verifier visuellement le rendu en prod des images migrees (references, blog, vignettes produit) sur `covalba-wp.vercel.app`.
- [ ] (Optionnel) Refonte du grid references mode `toutes`/`secteur` pour lire WP au lieu de `src/data/references.ts` statique.

## Commandes utiles

```bash
# Dev server (port 3083, host 0.0.0.0 pour la preview)
npm run dev
# Build de prod (verifie tout)
npm run build
# WordPress (VPS) -- SSH + wp-cli via docker compose
ssh -i ~/.ssh/covalba_wp_ed25519 root@72.61.87.116
cd /srv/covalba-wp && docker compose run --rm wpcli wp <cmd>
# Deployer le mu-plugin : rsync wordpress/mu-plugins/ -> /srv/covalba-wp/wp-content/mu-plugins/
# Backup WP manuel : (sur le VPS) ./backup.sh
# Migration images externes : node scripts/migrate-external-images/build-manifest*.mjs
```

## Pour reprendre (agent suivant)

1. `git pull`
2. Lire ce HANDOFF.md entierement
3. Regarder la derniere entree du Journal pour le contexte recent
4. Commencer par la premiere tache "Prochaines etapes"

## Journal

### 2026-06-15 13:25 -- Tom Assous (branche tom/passage-wp)

**Actions depuis le dernier handoff** (session de passage WordPress headless, repo `covalba-wp`) :
- Mise en ligne du front Next.js sur Vercel (`covalba-wp.vercel.app`) + route catch-all pour les pages WP (`29c29eb`), perf next/image + fonts (`0a0e0df`), revalidation ciblee par route (`bd00b81`). Deploiements debloques en re-authorant les commits sous `assous.tom@gmail.com` (`f12481f`).
- BO block-builder : ACF Extended (modale visuelle) + duplicate-post ; **campagne 23/23** designs bespoke exposes en blocks selectionnables (pilote `e738ec7` + lots `6ba4ec1`/`0823794`/`e20b3eb`/`d0e3772` + finition RoofHero `6b3e51d`). Vignettes reelles capturees (`507d252`/`b1e51a2`). Couleur d'accent produit editable depuis WP (`e19da37`).
- **WordPress 6.8.3 -> 7.0** (backup avant ; sain apres : plugins compat, GraphQL 200, admin 200).
- **Migration de 134 images externes HubSpot dans la mediatheque WP** (`318cbcf`) : 47 dans `references.ts` + 87 `www.covalba.fr`, avec alt + nom SEO ; URLs remplacees dans le front ; servies par WP + optimisees next/image.

**Notes** :
- Piege Vercel Hobby : tout commit dont l'email auteur n'est pas matche a un compte Git est **BLOCKED**. Le shell exporte `GIT_AUTHOR_EMAIL=tom@paf-studio.dev` -> prefixer les commits avec `GIT_AUTHOR_EMAIL=assous.tom@gmail.com GIT_COMMITTER_EMAIL=assous.tom@gmail.com git commit --author="Tom Assous <assous.tom@gmail.com>"`.
- Piege WPGraphQL-ACF : sous-champs repeater/group = noms **uniques prefixes par layout** (sinon collision de type `SectionsSections{Pascal}`), sauf clones `entete`/`cta`.
- Parite : ne PAS migrer les pages deja seedees (elles ont `origine=...` qui court-circuite le generique) ; les nouveaux layouts ne servent qu'aux nouvelles sections BO.
- WP core vit dans le volume Docker `wp-core` -> `wp core update` persiste ; rollback = `wp core update --version=6.8.3 --force` + dump DB.
- Acces/secrets WP : voir la memoire infra (cle SSH `~/.ssh/covalba_wp_ed25519`, basic-auth + login WP non versionnes).

### Etat actuel -- 2026-06-04 -- Branche tom/retours-maxime

PR vers `main` :
`https://github.com/Tomassous-38/covalba-refonte/pull/30`

Important : la PR est preparee pour review, mais Tom a dit de **ne pas la merger tout de suite**. Il veut passer a un autre agent et continuer a faire des retours avant merge.

Preview :
`https://covalba-refonte-tom-retours-maxime.paf-studio.dev`

Document de suivi des retours Maxime :
`docs/contenus/retours-maxime-suivi.md`

### Ce qui a ete fait

- Retours mail de Maxime consolides dans `docs/contenus/retours-maxime-suivi.md`, avec colonnes commentaire / fait / reste a faire.
- Bloc references sectorielles partage ajoute via `src/components/SectorReferenceHighlights.tsx`.
  - Rail horizontal sur fond blanc.
  - Une carte visible sur mobile avec scroll/snap horizontal.
  - Utilise sur `/industrie` et les pages secteurs deja branchees.
- Donnees references structurees dans `src/data/references.ts`.
  - Pages detail uniquement pour projets avec video ou donnees solides.
  - Helpers `detailedReferences` et `getDetailedReferenceBySlug`.
- Route detail references ajoutee :
  - `src/pages/ReferenceDetail.tsx`
  - route `/references/:slug` dans `src/App.tsx`.
- Cas video enrichis avec les transcriptions :
  - `/references/intermarche-illiers-combray`
  - `/references/passage-international-entrepot-froid`
  - `/references/roche-bobois-versailles`
  Chaque page a maintenant sections narratives + bloc "Ce que precise la transcription video" + video integree.
- Autres pages detail crees pour references avec data/source :
  - Albright La Rochelle
  - Cotral Lab Conde-en-Normandie
  - Danone Bailleul
  - Servier Gidy
  - Cora Houssen
- `/references` enrichie : metriques dans les cartes et lien "Voir le cas" quand une page detail existe.
- `Testimonials.tsx` corrige : les IDs YouTube etaient mal attribues. Les videos sont maintenant associees a Intermarche, Pa.Sa.Ge et Roche Bobois.
- `/qui-sommes-nous` retravaillee :
  - premier bloc plus propre avec texte/stats + collage photos ;
  - galerie photos entreprise ;
  - nouvelles photos Drive converties en WebP dans `public/images/qui-sommes-nous/`.
- `docs/contenus/transcriptions-videos/` ajoute :
  - transcriptions brutes OpenAI Whisper ;
  - resume exploitable ;
  - note sur videos a utiliser comme cas client ou non.
- `/guide-cool-roof` : hero avec apercu ebook.
- `/simulateur-economie-energie` : wording repositionne vers simulateur en ligne a preparer, sans inventer de formules avant reception du Google Sheet de Maxime.
- `/estimation` : wording corrige vers budget/fourchette d'investissement, pas economies d'energie.
- `/bat-en-112` conserve comme canonical avec redirects depuis `/prime-cee-cool-roof` et `/prime-cee`.

### Ce qui reste a faire / valider

- Ne pas merger la PR maintenant : Tom veut faire d'autres retours.
- Simulateur economie energie : attendre le Google Sheet/formules de Maxime pour construire le vrai simulateur.
- Valider avec Maxime les formulations et chiffres extraits des videos, surtout :
  - Intermarche : 2 500 m2, -5 degC reserve, -3 degC magasin, -4,5% poste froid.
  - Pa.Sa.Ge : 3 000-3 500 m2, quais 15 degC -> 8-10 degC, 4-5 degC gagnes, moins de litiges.
  - Roche Bobois : verriere 80%, 43 degC a l'etage, 13 degC gagnes.
- Ajouter d'autres pages detail uniquement si video, data ou source fiable.
- Verifier visuellement les pages secteurs restantes si Tom demande que le rail references soit partout.
- Confirmer le slug SEO final de la page Prime CEE / BAT-EN-112 avec Maxime.

### Verifications effectuees

- `npm run build` : OK.
- `npm run test` : OK, 9 fichiers / 24 tests.
- Preview HTTPS : OK sur les pages cas enrichies.
- Playwright : bloc transcription OK sur Intermarche, Pa.Sa.Ge et Roche Bobois.
- Scan secrets repo : aucune occurrence de la cle OpenAI ni des cookies YouTube fournis dans le chat.

### Securite / secrets

- La cle OpenAI et les cookies YouTube fournis dans le chat ont ete utilises uniquement en fichiers temporaires sous `/tmp`, puis supprimes.
- Ne jamais les remettre dans le repo ni dans une PR.
- `AGENTS.md` est non tracke localement et doit rester hors commit sauf demande explicite.

## Etat actuel -- 2026-05-28 -- Branche tom/peafinage

PR ouverte vers `main` :
`https://github.com/Tomassous-38/covalba-refonte/pull/29`

### Ce qui a ete fait

- FeedbackPin a ete installe temporairement pour traiter les retours visuels, puis retire du site avant merge : le script `https://feedbackpin.vercel.app/embed.js?...` n'est plus present dans `index.html`.
- Les retours FeedbackPin de la session ont ete traites sur les pages signalees :
  - home : suppression du lien menu "Le cool roof", CTA "Demander un devis", hero mobile compacte avec logos clients visibles, carte Applicateur alignee, testimonial video stabilise.
  - contact : formulaire remonte en premier ecran, suppression du hero "acces direct".
  - `/qui-sommes-nous` : sur-titre harmonise, image fondateurs recentree.
  - `/devenir-applicateur` : formulaire candidature place juste apres la section partenariat.
  - `/references` : hero simplifie, suppression du bloc stats lateral.
  - pages toitures : CTAs en devis, labels de situations nettoyes, ordre texte/image ajuste, logos uniformises, cartes situation mobile ameliorees.
  - `/toitures/membrane-bitumineuse` et `/toitures/toiture-plate` : nouveaux visuels fournis par Tom ajoutes dans `public/images/toitures/feedback-*.png`.
  - secteurs : logos uniformises, bloc redondant 80 degres supprime en logistique, texte tertiaire corrige, formulaire collectivites reformule sans "diagnostic/devis/estimation" dans le titre.
  - `/guide-cool-roof` et `/simulateur-economie-energie` : formulaire HubSpot visible des le premier ecran.
  - `/prime-cee-cool-roof` : bloc SEO long-form mieux stylise.
  - `/cool-roof-roissy` : H1 desktop reduit.
- Libelles visibles "Demander un diagnostic", "Pre-diagnostic", "Voir le gain possible" et "ca surchauffe" nettoyes sur les zones signalees.

### Commits importants sur la branche

- `7f152ba chore: install feedback pin`
- `8b398db fix: update feedback pin project`
- `86df683 fix: address feedback pin review`
- Dernier commit attendu apres ce handoff : retrait du script FeedbackPin + mise a jour `HANDOFF.md`.

### Verifications effectuees

- `npm run build` : OK.
- `npm test` : OK, 9 fichiers / 24 tests passes.
- Smoke Playwright desktop/mobile sur :
  - `/`
  - `/contact`
  - `/toitures/membrane-bitumineuse`
  - `/industries/tertiaire`
  - `/guide-cool-roof`
  - `/simulateur-economie-energie`
  - `/cool-roof-roissy`
- Check texte automatique : aucune occurrence visible des libelles explicitement signales (`Demander un diagnostic`, `Pre-diagnostic`, `Voir le gain possible`, `ca surchauffe`) dans les zones scannees.

### Etat local et points d'attention

- Branche : `tom/peafinage`.
- Preview : `https://covalba-refonte-tom-peafinage.paf-studio.dev`.
- Dev server actif sur `0.0.0.0:3065`.
- `AGENTS.md` est non tracke localement et volontairement laisse hors commit.
- Le skill local `.claude/skills/feedbackpin/` existe dans le repo comme outil de dev, mais le site ne charge plus FeedbackPin cote client.

## Etat actuel -- 2026-05-27 -- Branche tom/suite-pages-industrie

La branche a ete poussee puis mergee sur `main` via la PR #22 :
`https://github.com/Tomassous-38/covalba-refonte/pull/22`

### Ce qui est merge sur main

- Squash merge effectue le 2026-05-27 a 09:01 UTC.
- Commit sur `main` : `89ae7df feat: add industry sector pages`.
- Auteur du commit merge : `Tomassous-38 <assous.tom@gmail.com>`.
- Pages ajoutees :
  - `/industries/distribution`
  - `/industries/tertiaire`
  - `/industries/collectivites`
- Navigation et sitemap mis a jour.
- Assets images Distribution, Tertiaire et Collectivites ajoutes.
- Tests ajoutes pour routes + pages secteur.
- `HANDOFF.md` a ete inclus dans le merge.

### Verifications effectuees avant merge

- `npm test` : OK, 5 fichiers / 5 tests passes.
- `npx tsc --noEmit` : OK.
- `npm run build` : OK.
- Checks GitHub/Vercel sur la PR #22 : OK.

### Etat local apres merge

- Branche locale : `tom/suite-pages-industrie`.
- La branche distante `origin/tom/suite-pages-industrie` contient les commits pre-merge, dont :
  - `d00d175 feat: add industry sector pages` (auteur initial `tom@paf-studio.dev`, cause du premier refus Vercel)
  - `76350de chore: retrigger preview deployment` (auteur `assous.tom@gmail.com`)
  - `b21af18 docs: update handoff for industry pages` (auteur `assous.tom@gmail.com`)
- Le squash merge sur `main` a bien ete fait avec `assous.tom@gmail.com`.
- Restent non trackes localement et volontairement non committes :
  - `AGENTS.md`
  - `docs/superpowers/`

### Note pour reprise

Si quelqu'un reprend cette branche, commencer par `git fetch origin` puis verifier `origin/main`.
La feature secteur est deja sur `main`; il n'y a pas de travail restant a merger depuis cette branche, sauf decision explicite de conserver/traiter les fichiers non trackes ci-dessus.

## Etat actuel -- 2026-05-26 -- Branche tom/suite-pages-industrie

La page `/industries/distribution` vient d'etre integree en suivant le template de la page Logistique terminee. Le travail est **non committe** au moment du handoff.

### Ce qui a ete fait

- Nouvelle route `/industries/distribution` ajoutee dans `src/config/routes.ts` et `src/App.tsx`.
- Nouvelle page `src/pages/industries/Distribution.tsx` composee avec Navbar, Footer, StickyMobileCTA et composants dedies.
- Nouveaux composants dedies dans `src/components/industries/` :
  - `DistributionSEO.tsx`
  - `DistributionHero.tsx`
  - `DistributionSimulator.tsx`
  - `DistributionTrustLogos.tsx`
  - `DistributionProblem.tsx`
  - `DistributionSolution.tsx`
  - `DistributionCEE.tsx`
  - `DistributionBenefits.tsx`
  - `DistributionApplications.tsx`
  - `DistributionMethod.tsx`
  - `DistributionProof.tsx`
  - `DistributionFAQ.tsx`
  - `DistributionFinalCTA.tsx`
  - `DistributionSEOContent.tsx`
- `Navbar.tsx` : lien secteur Distribution corrige vers `/industries/distribution`.
- `vite.config.ts` : port preview passe a `3056`, allowedHost passe a `covalba-refonte-tom-suite-pages-industrie.paf-studio.dev`.
- Tests ajoutes :
  - `src/config/routes.test.ts`
  - `src/pages/industries/Distribution.test.tsx`
  - `src/test/setup.ts` complete avec mock `IntersectionObserver`.
- Plan d'implementation cree dans `docs/superpowers/plans/2026-05-26-distribution-industry-page.md`.

### Verifications fraiches effectuees

- `npm test` : OK, 3 fichiers / 3 tests passes.
- `npx tsc --noEmit` : OK, sortie vide.
- `npm run build` : OK, build Vite termine. Warnings preexistants : Browserslist obsolete, classes Tailwind ambigues `duration-[900ms]` et `ease-[cubic-bezier(...)]`, chunk >500 kB.
- `dist/sitemap.xml` contient bien `/industries/distribution`.

### Images Distribution -- etat exact

Les images ont commence a etre generees. Le MCP `gpt-image-2` timeoute souvent ; bascule ensuite sur Python OpenAI direct high quality PNG + conversion, mais l'utilisateur a demande d'arreter pendant la generation. Images attendues par le code et deja presentes :

- `public/images/distribution/hero-desktop.jpg`
- `public/images/distribution/hero-mobile.jpg`
- `public/images/distribution/problem-clients.webp`
- `public/images/distribution/problem-climatisation.webp`
- `public/images/distribution/problem-rayons-frais.webp`
- `public/images/distribution/problem-equipes.webp`
- `public/images/distribution/solution-classic.webp`
- `public/images/distribution/solution-coolroof.webp`
- `public/images/distribution/benefits-hero.webp`

Images encore **manquantes** mais referencees dans le code :

- `public/images/distribution/site-supermarche.webp`
- `public/images/distribution/site-centre-commercial.webp`
- `public/images/distribution/site-grande-surface.webp`
- `public/images/distribution/site-commerce-proximite.webp`
- `public/images/distribution/site-retail-park.webp`
- `public/images/distribution/seo-commerce-coolroof.webp`
- `public/images/distribution/seo-prime-cee.webp`
- `public/images/distribution/seo-durabilite.webp`

Sources PNG high-quality deja produites par le script Python :

- `/tmp/opencode/distribution-png/hero-desktop.png`
- `/tmp/opencode/distribution-png/hero-mobile.png`

### Reprise conseillee

1. Generer les 8 images manquantes via Python OpenAI direct, pas via MCP, en `quality='high'`, `output_format='png'`, puis convertir en WebP.
2. Relancer `npm run build` apres generation complete.
3. Lancer le dev server : `npm run dev -- --host 0.0.0.0 --port 3056`.
4. Verifier visuellement `/industries/distribution` sur desktop et mobile : hero, images cartes, section CEE, zone SEO, aucun 404 image.
5. Si visuel OK : `git status`, verifier le diff, puis commit conventionnel possible : `feat: add distribution industry page`.

### Attention conflits

- Une PR ouverte `#21 feat: template pages cool roof locales + section vidéo réchauffement` modifie notamment `src/App.tsx`, `src/config/routes.ts`, `src/index.css`, `package.json`, `package-lock.json`. Conflits potentiels avec cette branche sur `App.tsx` et `routes.ts`.
- `AGENTS.md` est non tracke depuis le debut de session, je ne l'ai pas cree. Ne pas supprimer sans demander.

## Historique precedent -- Logistique

La branche `tom/industrie-logistique` refonte la page `/industries/logistique` via le pipeline `/paf-site-magic`. 2 sections livrees sur 12 du brief contenu (le brief complet est dans la conversation Claude Code).

**Section 1 - Hero** : composant `LogistiqueHero.tsx` refondu en v6 du mockup paf-site-magic :
- Photo entrepot full-bleed (`industrie-logistique-hero-desktop.jpg`) avec gradient navy progressif left-to-right (heavy 92% gauche -> 25% droite) et transition gradient douce en bas vers le marquee logos.
- Layout split 55/45 : texte gauche (eyebrow `COOL ROOF LOGISTIQUE` teal-vivid + H1 Satoshi Bold "L'ete, vos entrepots **surchauffent**." avec "surchauffent" underline teal-vivid 2px + sub "Vos equipes peinent, vos marchandises se degradent." cream/65 + 3 stats compactes icons teal : -10degC sous toiture / Aucune interruption / Bac acier - Bitume Membrane) + lead form droite (pattern home Hero : double bezel cream over navy/80, secteur=Logistique pre-selectionne, surface, email, CTA "Estimer mes economies" cta-gradient, badges Gratuit/Sans engagement/Primes CEE).
- Marquee logos clients : 6 logos prioritaires (Leclerc, Carrefour Market, Cora, Super U, Nestle, SNCF) + 6 secondaires (Continental, Thales, Valneva, Somfy, Servier, McDonald's), brightness:0 invert white/40, transition gradient douce.
- Mobile : recomposition stack vertical, photo en bg avec navy/80 haut + navy/15 milieu (photo respire) + navy/95 bas, burger menu droite, lead form en stack sous les stats.

**Section 2 - Probleme** : nouveau composant `LogistiqueProblem.tsx` (base sur pattern `IndustrieProblem` mais adapte logistique) :
- Header split 50/50 : eyebrow `POURQUOI AGIR ?` terracotta-dark + H2 "La chaleur pese sur **vos equipes et vos marchandises.**" (2e partie atténuée foreground/40) + intro courte avec "80°C" en gras / grande photo entrepot droite dans rounded-2xl frame avec shadow.
- 4 cards textuelles en row avec icons Lucide en cercles cream + terracotta-dark : Equipes (HardHat) "Plus de 35°C en zone de preparation" / Marchandises (Package) "Cosmetiques, vins, pharma : temperatures depassees" / Groupes froids (Snowflake) "Compresseurs au max, chaine du froid menacee" / Decret tertiaire (FileCheck2) "+1000 m², obligation de reduire la consommation".

`Logistique.tsx` page utilise maintenant `LogistiqueHero` + `LogistiqueProblem` puis enchaine sur les sections generiques `IndustriePrinciple`, `IndustrieBenefits`, `IndustrieApplications`, `IndustrieMethod`, `IndustrieProof`, `IndustrieFAQ`, `IndustrieFinalCTA` (a adapter pour Logistique selon le brief).

Ressources paf-site-magic dans `ressources/` (commitees pour tracabilite) :
- `BRAND.md` (tokens Covalba extraits du repo)
- `SECTIONS.md` (index des 12 sections du brief)
- `section-1-hero/` : `mockup-desktop.png` (v6), `mockup-mobile.png` (v1), 4 prompts archives v1-v4, comparaisons live/mockup
- `section-2-problem/` : `mockup-desktop.png` (v3 retenue)

Build/dev server OK sur port 3048. Commit `11093ae` poussé sur `origin/tom/industrie-logistique`. **Aucune PR ouverte** (`gh pr status` confirme).

## Problematiques / Blockers

**Direction "photos AI dans les cards" du LogistiqueProblem NON FINIE** : le user a explicitement demande d'**enlever la photo du header** ET de **generer une photo AI par card** (4 photos au total). Travail stoppe en cours de generation :
- 2 photos generees, stockees dans `/opt/claude-code/gpt-image-2-output/` (PAS encore copiees dans `public/`) :
  - `image-20260525-170420-647218-logistique-card-equipes.png` (interieur entrepot chaleur, vue large rayonnages, lumiere ambree)
  - `image-20260525-170728-405e81-logistique-card-marchandises.png` (allee d'entrepot avec palettes empilees, marchandises shrink-wrap)
- **2 photos restantes a generer** :
  - Card 3 (Groupes froids) : photo industrielle de groupes de refrigeration / compresseurs avec tuyauterie metallique
  - Card 4 (Decret tertiaire) : photo exterieure de batiment logistique moderne (facade + toiture)
- **Composant `LogistiqueProblem.tsx` PAS encore modifie** pour utiliser ces photos. La structure actuelle a une grosse photo dans le header + icons Lucide dans les cards. Le user veut : supprimer la photo du header, ajouter une photo en haut de chaque card.

Autres points :
- **OpenAI quota** : a deja explose 1x pendant la session, a ete recharge depuis. Verifier le solde avant de relancer des generations (`OpenAI billing`).
- **Sections 3-12 a coder** : seules les sections 1 (Hero) et 2 (Probleme) sont faites. Brief complet dans la conversation Claude Code. Les autres sections utilisent encore les composants generiques `IndustrieXxx`.
- **Aucune PR ouverte** sur la branche actuellement (gh pr status confirme).

## Structure du code

```
src/
  pages/
    industries/
      Logistique.tsx                         -- compose les sections de la page
  components/
    industries/                              -- (NEW dans cette session) composants Logistique
      LogistiqueHero.tsx                     -- (NEW v6 paf-site-magic) hero photo full-bleed + lead form
      LogistiqueProblem.tsx                  -- (NEW) section "Pourquoi agir ?" header photo + 4 cards
    industrie/                               -- composants Industrie generiques, reutilises en attendant adaptation Logistique
      IndustrieHero.tsx, IndustrieProblem.tsx (plus utilise pour Logistique)
      IndustriePrinciple.tsx, IndustrieBenefits.tsx, IndustrieApplications.tsx,
      IndustrieMethod.tsx, IndustrieProof.tsx, IndustrieFAQ.tsx, IndustrieFinalCTA.tsx
      IndustrieSEO.tsx
    Navbar.tsx, Footer.tsx, StickyMobileCTA.tsx, ui/CTAButton.tsx -- partages reutilises
ressources/                                  -- (NEW) artefacts paf-site-magic (mockups, prompts, comparisons) -- pas dans le bundle prod
  BRAND.md, SECTIONS.md
  section-1-hero/
    mockup-desktop.png (v6 retenue), mockup-mobile.png (v1 retenue)
    prompts/mockup-desktop-v{1..4}.txt
    comparisons/{live,compare}-{desktop,mobile}.png
  section-2-problem/
    mockup-desktop.png (v3 retenue)
public/images/
  industrie-logistique-hero-desktop.jpg      -- photo entrepot hero (utilisee dans LogistiqueHero ET LogistiqueProblem)
  industrie-logistique-hero-mobile.jpg
vite.config.ts                               -- port 3048, hostname tom-industrie-logistique
```

## Prochaines etapes

- [ ] **Finir la direction "photos AI dans cards" du LogistiqueProblem** :
  1. Generer photo 3 (Groupes froids) : `mcp__gpt-image-2__generate_image` size=1024x1024 quality=high, prompt "Documentary editorial photo, industrial refrigeration condenser units / compressors outside French cold-storage warehouse, large fans visible, warm summer afternoon light, sharp realistic, no theatrical drama, no people".
  2. Generer photo 4 (Decret tertiaire) : prompt "Editorial wide shot exterior facade of a modern French logistics warehouse, large flat metal roof, slight upward angle, sunny summer day, no people, architectural photography".
  3. Copier les 4 photos dans `public/images/logistique/` avec noms clean (`card-equipes.jpg`, `card-marchandises.jpg`, `card-groupes-froids.jpg`, `card-decret.jpg`). Optimiser en WebP si possible (>1MB chacune).
  4. Modifier `LogistiqueProblem.tsx` : retirer le `picture` du header right (la grande photo entrepot), garder le header simple en 1 colonne ou repenser le layout. Ajouter un `<img>` en haut de chaque card (~55% hauteur card, `object-cover rounded-t-2xl`) + supprimer les icon-circles. Raccourcir les bodies a 1 phrase max.
- [ ] **Section 5 — Solution / Principe** (brief : "On traite la cause, pas la consequence" + comparatif visuel toiture classique vs cool roof + 3 points cles + CTA "Decouvrir la methode")
- [ ] **Section 6 — Benefices mesurables** (5 benefices dans l'ordre : confort equipes, marchandises, temperature interieure, couts de froid frigorifique -40%, toiture protegee. Chiffre vedette -10°C)
- [ ] **Section 7 — Types d'entrepots** (remplace IndustrieApplications : 5 cards entrepots secs / e-commerce / cross-docking / frigorifiques / hangars techniques. CTA "Voir nos realisations")
- [ ] **Section 8 — Approche en 4 etapes** (Diagnostic / Preparation / Application / Controle + 2 reassurances "Machines au pied du batiment" + "Applicateurs formes")
- [ ] **Section 9 — Preuves** (3 chiffres mesures sans temoignage : -7,5°C surface, conditions de travail ameliorees, -38% froid sur site frigorifique)
- [ ] **Section 10 — FAQ logistique** (8 Q/R adaptees du brief : interruption / confort equipes / marchandises / gain temperature / sans clim / chambres froides / supports / decret tertiaire)
- [ ] **Section 11 — CTA final** (Badge "Cool roof logistique" + H2 "Reprenez le controle de la chaleur" + 2 CTAs + 3 reassurances 48h/sans engagement/expertise)
- [ ] **Section 12 — Zone SEO editoriale** (longue traine + GEO, H2 + 6 H3, sources ADEME/EPA/LBNL)
- [ ] **Meta tags** : title "Cool roof entrepot logistique : -10°C sous toiture | Covalba" (60 car), description 155 car. — a placer dans `IndustrieSEO` ou nouveau `LogistiqueSEO`
- [ ] **Maillage interne** : liens depuis cette page vers CovaTherm, CovaSeal 20, CovaMetal 20, secteur Industrie, simulateur, diagnostic (cf brief)
- [ ] **Tests responsive multi-viewport** + audit Lighthouse avant ouverture PR vers main

## Commandes utiles

```bash
# Dev server (port 3048, preview sur covalba-refonte-tom-industrie-logistique.paf-studio.dev)
npm run dev

# Type check
npx tsc --noEmit

# Build prod
npm run build

# Verifier les PRs ouvertes / conflits
gh pr status

# Capture rendu live d'une section
node /tmp/audit-hero.mjs   # capture le hero a 1920x1080 + 390x844

# Generer une photo isolee via gpt-image-2 (Acte 5 paf-site-magic)
# voir prompts archives dans ressources/section-N-{slug}/prompts/
```

## Pour reprendre (agent suivant)

1. `git pull`
2. Lire ce HANDOFF.md entierement
3. Regarder la derniere entree du Journal pour le contexte recent
4. Commencer par la premiere tache "Prochaines etapes"

## Journal

### 2026-05-25 17:15 -- Tom Assous (branche tom/industrie-logistique)

**Actions depuis le dernier handoff** :
- Session paf-site-magic complete sur la page `/industries/logistique` (brief contenu detaille fourni dans la conversation, 12 sections au total)
- **Hero (section 1)** : 6 iterations de mockup desktop generees via `mcp__gpt-image-2__edit_image` (v1 dramatique navy + mega -10°C rejete "trop agressif" -> v2 cream "trop cheap" -> v3 navy + lead form -> v4 tech minimaliste avec dot grid + crochets rejete "froufrou" -> v5 cream simple -> v6 final navy + photo full-bleed + lead form droite + transition gradient marquee). Mockup mobile v1 valide (recomposition stack vertical, photo bg + burger + 1 CTA + 3 stats compact + 4 logos cutoff). Code `LogistiqueHero.tsx` reecrit complet, capture live multi-viewport OK.
- **Probleme (section 2)** : 3 iterations (v1 cards textuelles classique "trop cheap pas assez d'image" -> v2 cards avec photos AI dans mockup integre "moche/cheap" -> v3 retenue : header split avec grande photo entrepot droite + 4 cards textuelles avec icons Lucide a la Industrie). Code `LogistiqueProblem.tsx` cree (pattern IndustrieProblem adapte logistique).
- **Generations en cours non finies** : user a demande sur la v3 d'enlever la photo header ET de generer une photo AI par card. 2 photos generees (equipes, marchandises) dans `/opt/claude-code/gpt-image-2-output/`, 2 manquantes (groupes froids, decret tertiaire). Composant pas encore modifie pour cette direction.
- **Pipeline paf-site-magic acquis** : BRAND.md (tokens Covalba), SECTIONS.md (index 12 sections), section-1-hero/ et section-2-problem/ avec mockups + prompts + comparisons commitees dans `ressources/`.
- **OpenAI quota** : explose une fois pendant la session puis recharge par le user.
- **Test nanobanana (Gemini 3 Pro Image)** : tente une fois en alternative quand gpt-image-2 quota etait epuise. Resultat moins bon (a affiche les annotations de specs dans l'image, cadrage casse). Retour gpt-image-2 confirmant qu'il est le bon modele.
- Commit `11093ae feat(logistique): refonte hero + ajout section probleme` pousse sur `origin/tom/industrie-logistique`.

**Notes** :
- L'iteration v1 -> v6 du hero a coute ~0.75$ en gpt-image-2 (high quality 1536x1024). Bon ratio iteration / qualite finale.
- Le pattern grimoire **"reutiliser composants existants"** a paye : Navbar, Footer, StickyMobileCTA, CTAButton, IndustriePrinciple/Benefits/etc tous reutilises sans modification.
- Decision UI sur le hero : on a remis le **lead form droite** dans le hero (apres l'avoir vire pour une iteration) car le user a precise "le meme lead form que la home". Pattern double bezel + secteur=Logistique pre-selectionne + 3 inputs + cta-gradient.
- Decision DA : H2 du hero en **Satoshi Bold (700)**, pas Black (900) — le user trouvait Black "trop gras". Bold suffit pour la presence editoriale, et c'est de toute facon le max charge dans `index.html` (fontshare loads 400/500/700 seulement).
- L'attention du user sur la qualite visuelle est forte — il a refuse plusieurs iterations comme "cheap" ou "agressif". Eviter les patterns AI-slop (gradient violet/bleu, fake stats, pseudo-tech pills, brackets, mono labels "01"). Le `paf-site-magic/SKILL.md` Annexe "Catalogue Anti-AI-Slop" est exhaustif sur les patterns a bannir.
- Le brief contenu a evolue en cours de session : initialement le mot-cle hero etait "Cool roof entrepot logistique" + accroche "L'ete vos entrepots surchauffent...", puis le user a explicitement reframe le H1 en accroche manifeste "L'ete vos entrepots surchauffent". A garder en tete : le brief texte n'est PAS l'arbitre final, le user iterer sur le wording en cours de design.

### 2026-04-18 13:00 -- Tom Assous (branche tom/opti-seo-home-page)

**Actions** :
- Resolution du conflit de merge avec origin/main sur `src/components/SEOContent.tsx` : retire les 2 wrappers `<ScrollReveal>` du fichier (convention main depuis commit `e517820`), garde la nouvelle structure pilier (bandeau Dossier + H2 + intro + 7 H3 + tableau comparatif + sources).
- Resolution du conflit de merge sur `HANDOFF.md` : fusion des journaux (entree SEO home en tete, entree laque-solaire preservee juste en dessous).
- PR #15 devient mergeable apres push du merge commit.

### 2026-04-18 12:35 -- Tom Assous (branche tom/opti-seo-home-page)

**Actions depuis le dernier handoff** :
- Passe d'optimisation SEO sur la home suivant un brief texte fourni par le user (mot-cle principal "cool roof", secondaires "peinture cool roof", "cool roofing", "entreprise cool roof", "cool roof prix", "cool roof france", "toiture cool roof", "cool roof peinture")
- 7 fichiers modifies au total : meta (index.html), 5 composants de sections (Testimonials, CTASection, SectorsGrid, FAQ, BlogPreview), 1 composant reecrit (SEOContent)
- Section pilier "Tout comprendre sur le cool roof" ajoutee dans `SEOContent.tsx` (remplace l'ancien SEOContent court) : H2 + 7 H3 + tableau comparatif 4 colonnes (Critere / Cool roof / Isolation / Climatisation) + 8 sources APA (Akbari 2005 LBNL, Levinson & Akbari 2010, Macintyre & Heaviside 2019, Santamouris 2014 et 2020, Synnefa 2007, EPA 2024, Kalkstein 2022)
- Tableau comparatif responsive : table classique desktop (sm:block), cards empilees mobile (sm:hidden) avec ligne "Cool roof" en bg-foreground/texte teal-vivid + lignes Isolation et Climatisation dessous en foreground/55 -- pattern identique a `CovaSealComparison`
- FAQ : 5 questions ajoutees en fin de tableau (ordre : hiver, prix m², duree de vie, aides generiques, DIY). Les 10 questions existantes sont inchangees. Deux questions dupliquent partiellement les anciennes (prix au m² / aides) mais avec un angle editorial plus riche -- decision validee avec le user de garder les deux (les anciennes sont transactionnelles, les nouvelles SEO).
- vite.config.ts : etait encore configure pour la branche `tom/laque-solaire` (port 3013 + allowedHost tom-laque-solaire). Passe a port 3015 + allowedHost `covalba-refonte-tom-opti-seo-home-page.paf-studio.dev` ajoute (celui de laque-solaire conserve aussi au cas ou)
- Plan ecrit dans `/home/dev/.claude/plans/il-faut-l-g-rement-am-liorer-swirling-porcupine.md` avant execution, valide par le user via ExitPlanMode

**Notes** :
- **Composants / sections intentionnellement non modifies** (decision user "on garde existant, on modifie ce que le doc modifie") : Hero, ConstatSection, CoolRoofExplainerSection, WinterObjectionSection, SystemSection, PriceComparisonSection, SocialProofSection, PriceVSSection, RSESection, ProcessSection, ExpertiseSection, PressSection, ApplicatorsSection. Le brief suggere aussi "Section logos clients mettre des alts" mais `TrustLogos.tsx` n'est pas rendu dans `Index.tsx` -- hors scope.
- Les composants `TrustLogos.tsx`, `SolutionsGrid.tsx`, `ROIBanner.tsx` existent dans le repo mais ne sont PAS rendus dans `Index.tsx`. Le brief SEO les presupposait. Decision : on ne les ajoute pas, on garde la structure actuelle (18 sections).
- La nouvelle section pilier utilise le meme pattern visuel que `CovaThermLightEditorial` (bg-cream, max-w-4xl, font-satoshi, ScrollReveal, space-y-14). **Attention** : main a un commit recent `e517820 chore(seo): remove scroll-reveal animations from long-form text sections` qui retire `ScrollReveal` sur les sections long-form. C'est exactement ce qui cause le conflit de merge PR #15 -- la resolution est de conserver la nouvelle structure pilier mais de retirer les wrappers `<ScrollReveal>`.
- PR #15 ouverte : https://github.com/Tomassous-38/covalba-refonte/pull/15 -- etat CONFLICTING, non mergee. Le user a demande "si pas de conflit merge", donc merge non effectue.
- Build OK (`npm run build` 4.71s), typecheck OK (`npx tsc --noEmit`), dev server HTTP 200 sur port 3015.
- Le 301 redirect de l'ancien blog pilier (`/blog/avantages-et-inconvenients-peintures-reflectives-coolroof`) vers la home est mentionne dans le brief mais **hors scope de ce PR frontend**. A planifier dans un PR dedie de config Vercel.
- CLAUDE.md avait un diff non commite au demarrage (mise a jour branche/URL preview pour cette session) -- inclus dans le meme commit.

### 2026-04-17 20:00 -- Tom Assous (branche tom/laque-solaire, PR #13 mergee)

**Actions depuis le dernier handoff** :
- **Page CovaTherm Light** creee de bout en bout : hero, showcase navy, slider avant/apres interactif (clipPath + useState, pointer events + range input pour accessibilite clavier), specs (9 lignes extraites en OCR du site actuel), certifications, avantages, comparison, FAQ (10 questions avec liens internes enrichis via `FAQEntry { q, text, node? }`), editorial long-form, SEO complet.
- **3 images** telechargees du site actuel `covalba.fr/hs-fs/hubfs/` via curl et renommees a la convention repo : `covatherm-light-intro.jpg` (hero), `covatherm-light-avant.jpg` + `covatherm-light-apres.jpg` (section before/after).
- **Refonte section "supports compatibles"** : 4 alternatives de layout testees sur `/solutions/covatherm-light` (liste + grille 2x2 + strip 4 colonnes + magazine alterne + onglets), user a valide les onglets. Composant promu en `CompatibilityTabs` partage et applique aux 4 pages produit en remplacement de l'ancien `CompatibilityCheck` (supprime).
- **15 images generees via nano banana** (Gemini 3 Pro Image, modele `pro` auto-selectionne, 2k, 1:1) :
  - 4 translucides (polycarbonate, polyester, fibre-verre, vitrage) -- style "vue depuis l'interieur regardant vers le haut vers le lanterneau"
  - 11 opaques (bitume, beton, epdm, fibrociment, ardoise, tuile, pvc, bac-acier, tole-ondulee, zinc, metal-generique) -- style "vue exterieure rapprochee de la texture du materiau"
  - Palette muted consistante (off-white, gris, teintes naturelles), pas de texte / personnes / logos, negative prompt pour exclure cartoon / 3D / illustration
- **Traitement "non compatible"** pour l'entree Vitrage sur CovaTherm Light : bordure rouge sur l'onglet + badge rouge "Non compatible" avec icone AlertTriangle + ring rouge autour de l'image active + motif hachure diagonal en overlay + callout d'avertissement avec recommandation d'alternative (film solaire interieur colle). Les 3 autres entrees (compatibles) ont un badge teal-vivid "Compatible" avec coche.
- **Fix Navbar** : entree "Laque solaire" -> "/solutions/laque-solaire" (404) renommee en "CovaTherm Light" -> "/solutions/covatherm-light". Meme fix dans RelatedProducts.tsx.
- **Route ajoutee** dans `src/config/routes.ts` + mapping dans `src/App.tsx`. Config Vite adaptee (port 3012 -> 3013, hostname tom-laque-solaire).
- **2 commits logiques** pushes sur `origin/tom/laque-solaire` :
  - `feat(covatherm-light): add product page and CompatibilityTabs component`
  - `feat(compatibility): replace CompatibilityCheck with CompatibilityTabs on all product pages`
- **PR #13** creee et mergee sur main (merge commit, meme pattern que PR #11/#12).

**Notes** :
- **Composant `CompatibilityTabs` generique** : accepte `productName`, `compatibleRoofs: { type, detail, image?, incompatible? }[]`, `intro?`, `coverageNote?`, `footerNote?`. Le traitement rouge s'active automatiquement via le flag `incompatible: true` sur l'entree concernee, pas de prop booleen au niveau section. Si le client identifie plus tard d'autres supports incompatibles (ex. sur CovaMetal : aluminium poli, inox brut), il suffit d'ajouter le flag sur l'entree.
- **OCR des specs** : l'image `covatherm-light-caracteristiques-desktop.png` de l'ancien site a ete telechargee temporairement dans `/tmp/`, lue via l'outil Read (qui fait l'OCR automatiquement), puis supprimee. Valeurs reelles extraites (98 % UV, 75 % energie, 200 g/m², 5-8 ans, **non eligible Prime CEE**) -- differentes du brief SEO fourni par le user (qui disait 8-10 ans). On a suivi les vraies donnees Covalba.
- **Choix d'angle photographique** : les 4 images translucides sont en "vue depuis l'interieur regardant vers le haut" (cohabite avec l'angle hero). Les 11 images opaques ne peuvent pas etre prises sous cet angle (le materiau opaque ne se voit pas par en-dessous), donc on a bascule sur "vue exterieure rapprochee de la texture". L'unite visuelle vient du traitement lumiere + palette muted + aspect 1:1.
- **.gitignore** : ajout de `*_thumb.jpeg` parce que nano banana genere systematiquement un thumbnail JPEG cote fichier pour la preview MCP -- inutile dans le repo, uniquement utile en chat.
- **CovaTherm Light non eligible Prime CEE** : confirme par l'image des specs du site actuel. La FAQ et le composant Certifications reflechissent ce fait (pas de badge CEE BAT-EN-112).
- **Composants partages pas touches** au-dela de ce qui est strictement necessaire : Footer, CTASection, ApplicatorsSection, ProductHero, ProductFAQ, RelatedProducts, SolutionsGrid (home), hooks usePageMeta. Compatibilite Navbar modifiee uniquement pour le fix du lien 404.
- **Vercel check sur la PR** reste rouge cause email commit pas lie a un compte GitHub (attribution Vercel), meme symptome que PR #12 -- mergee quand meme, comportement connu.
- **CLAUDE.md** diff commite avec commit 1 (update branche / preview / port pour cette session worktree).

### 2026-04-17 18:46 -- Tom Assous (branche tom/covametal)

**Actions depuis le dernier handoff** :
- Creation complete de la page `/solutions/covametal-20` sur le modele CovaSeal (template le plus proche car contient deja Certifications + Editorial long-form + Comparison)
- 7 nouveaux composants dedies dans `src/components/product/covametal/` : SEO, Showcase, Specs, Certifications, Advantages, Comparison, Editorial
- Route ajoutee dans `src/config/routes.ts` (priority 0.9) + import/mapping dans `src/App.tsx`
- 2 assets ajoutes : `covametal-intro.png` (hero applicateur sur bac acier) + `Covalba-CovaMetal20-Duo-Produit.png` (packshot duo Base Coat + Top Coat, fournis par le user via clipboard)
- JSON-LD Product + FAQPage + BreadcrumbList injectes via CovaMetalSEO (meme pattern que CovaSealSEO : composant qui retourne null, hooks usePageMeta + useJsonLd)
- Fix config Vite : le `vite.config.ts` etait reste configure pour la branche `tom-page-industrie-tom` (port 3011 + allowedHost tom-page-industrie-tom). Passe a port 3012 + `covalba-refonte-tom-covametal.paf-studio.dev`
- 9 FAQs redigees (arbitrage vs remplacement bac acier, rouille de surface, saisonnalite, chevauchements, Prime CEE BAT-EN-112, dosage 400-800 g/m², DIY impossible, prix, entretien) avec lien interne vers `/devenir-applicateur` sur la FAQ DIY via pattern FAQEntry { q, text, node? }
- CovaMetalComparison : tableau 3 colonnes (label + CovaMetal + Remplacement bac acier, pas 4 comme CovaSeal) -- 9 lignes avec check icons sur cool roof / anti-corrosion / etancheite
- CovaMetalEditorial : 6 sous-sections H3 + 4 sources APA (Akbari 2005 LBNL, Santamouris 2014, Synnefa 2007, EPA 2024) -- meme structure que CovaSeal mais contenu specialise corrosion / bac acier / cycles thermiques metal

**Notes** :
- **Composants partages pas touches** : Navbar, Footer, ProductHero, CompatibilityCheck, ProductFAQ, RelatedProducts, CTASection, ApplicatorsSection. La Navbar avait deja le lien `/solutions/covametal-20` depuis une precedente iteration -- il n'est plus casse.
- Le brief SEO fourni par le user (peinture cool roof bac acier, KD 0 sur secondaires avec CPC eleve 80 € sur "renovation toiture bac acier") a ete suivi a la lettre : title 60 car., meta 155 car., tous les H2/H3 contiennent la requete cible au moins une fois, long-form editorial ajoute pour GEO.
- Arbitrage : le tableau "CovaMetal vs remplacement" figure uniquement dans CovaMetalComparison (entre Advantages et FAQ), **pas dans l'editorial**, pour eviter la duplication. L'editorial du brief §9 avait un tableau -- il a ete transforme en section de prose recapitulative.
- CovaSealComparison pointe deja vers `/solutions/covametal-20` en fin de bloc (ancre "peinture cool roof pour bac acier CovaMetal 20") -- le lien n'est plus casse.
- Build OK (1804 modules, 4.39s), sitemap a 6 URLs dont covametal-20, HTTP 200 verifie en dev.
- Vite redemarre auto sur changement de `vite.config.ts` -- utile quand on corrige le port a chaud.
- CLAUDE.md a un diff non commite : update de branche et URL preview pour cette session -- a committer avec le reste.

### 2026-04-17 18:02 -- Tom Assous (branche tom/page-industrie-tom)

**Actions depuis le dernier handoff** :
- Creation complete de la page `/solutions/covaseal-20` sur le modele CovaTherm
- 7 nouveaux composants dedies dans `src/components/product/covaseal/` : SEO, Showcase, Specs, Certifications, Advantages, Comparison, Editorial
- Route ajoutee dans `src/config/routes.ts` (auto sitemap)
- Nouvelle dep `react-helmet-async` + HelmetProvider wrappe autour de l'app
- JSON-LD Product + FAQPage + BreadcrumbList injectes via CovaSealSEO
- Ajout prop `heroImageAlt` sur `ProductHero` pour corriger l'alt hardcode "CovaTherm"
- Image hero CovaSeal (`covaseal-intro.png`) + packshot duo (`Covalba-CovaSeal20-Duo-Produit.png`) ajoutees dans `src/assets/produits/`
- Detourage du packshot duo (fond blanc -> transparent) en 3 iterations : seuillage simple puis flood-fill binaire depuis les bords, puis remplace au final par la version detouree fournie par le user
- Construction d'un panel de tweak dev temporaire (actif via `?tweak=1`) avec sliders live pour ajuster height/left/bottom desktop et width/max-width/margin-bot mobile, puis suppression apres validation des valeurs finales : `lg:h-[340px] lg:bottom-[70px] lg:left-[-56px]`
- Section CovaSealComparison extraite de l'editorial et promue en bloc dedie (entre Advantages et FAQ) : table 4 colonnes, colonne CovaSeal en elevation navy, badge "Recommande", icones check sur les wins
- Config Vite adaptee : port 3008 -> 3011, allowedHosts -> tom-page-industrie-tom
- Bloc italique "Toiture saine sans fissures ?" supprime du Showcase pour eviter le doublon avec le footer et raccourcir la colonne texte (evitait que les pots soient trop bas dans la colonne bleue vu le container stretch sur items-stretch)
- `min-h-[260px]` remplace par `py-8` sur mobile pour que la colonne bleue se dimensionne sur l'image duo (plus courte que le single pot CovaTherm)

**Notes** :
- **Composants partages pas touches** : Navbar, Footer, CTASection, ApplicatorsSection, CompatibilityCheck, ProductFAQ, RelatedProducts (conformement au CLAUDE.md pour eviter les conflits equipe).
- `ProductHero` a ete legerement modifie pour accepter `heroImageAlt` (prop optionnel, fallback sur productName) : low risk, CovaTherm n'a pas de regression.
- La nouvelle section CovaSealComparison duplique *partiellement* le contenu de TechnicalSpecs (pattern colonne elevee navy). C'est volontaire : Specs = detail technique CovaSeal seul, Comparison = CovaSeal vs alternatives. Les deux servent des intentions de recherche differentes.
- Dev server tournait sur le port 3011 pendant toute la session (arrete une fois accidentellement puis relance).
- `react-helmet-async` a ete installe -> verifier qu'il n'y a pas de conflit de version avec d'eventuels futurs paquets SSR (pas de SSR actuellement sur ce projet).
- Pattern de bleed image identique a CovaTherm (`lg:absolute lg:bottom-0 lg:-left-14`) validé par le user apres iterations. La hauteur est 340px (vs 420 CovaTherm) car le duo est plus large que haut.
- `CLAUDE.md` a un diff non commite : c'est la mise a jour de branche et d'URL preview pour cette session -- a committer avec le reste.

### 2026-04-17 00:15 -- Tom Assous (branche tom/peaufinage-produit)

**Actions depuis le dernier handoff** :
- Peaufinage contraste textes secondaires sur 7 composants product/* (opacites, tailles)
- Redesign complet TechnicalSpecs.tsx : tableau avec colonne elevee navy, vue mobile 2 cartes, CTA integre, icone Trophy sur "record europeen"
- Ajout blobs decoratifs teal (ProductShowcase, ProductAdvantages) et degrades radiaux (CompatibilityCheck)
- Changement SEO : tag hero passe en H1 ("Peinture cool roof professionnelle"), nom produit en H2
- Remplacement "Membrane bitumineuse" -> "Peinture cool roof" dans Navbar et RelatedProducts
- Tags mega-menu passes en uppercase (text-[8px] tracking-[0.1em])
- Fix config Vite : port 3004 -> 3008, allowedHosts corrige

**Notes** :
- Les fichiers partages (Footer, Testimonials, ApplicatorsSection, CTASection) n'ont PAS ete touches volontairement -- eviter les conflits avec les autres devs.
- Les occurrences "Membrane bitumineuse" dans CovaTherm.tsx:23 (liste supports compatibles), ExpertiseSection.tsx et diagnosticForm.ts designent le materiau de toiture, pas le produit -- ne pas les changer.
- Les separateurs teal entre sections claires ont ete testes puis retires (user n'a pas aime).
- La vite.config.ts a ete modifiee pour cette branche -- attention au merge si d'autres branches changent aussi le port/allowedHosts.