spb/phi-conseil

1# Plan d'implémentation — PHI Conseil23Date : 2026-11-08. Référence visuelle : `references/phi-conseil-homepage.jpeg` (1024 × 1536 px, capture desktop fournie par le client).45## 1. Audit initial67| Élément       | État constaté                                                                                                                                                                                |8| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |9| Dépôt         | Vide à l'origine (créé aujourd'hui). Scaffold `create-next-app` 16.4.5, TypeScript strict, Tailwind 4, ESLint 9, pnpm 11.                                                                    |10| Capture       | Présente et inspectée. Couleurs échantillonnées par région (médiane / mode / moyenne des pixels sombres) — voir `src/styles/tokens.css`.                                                     |11| Actifs client | **Aucun** fichier original fourni : pas de logo vectoriel, pas de photos sous licence, pas de polices, pas de coordonnées, pas de textes juridiques, pas de témoignage autorisé.             |12| Hébergement   | Non précisé. Cible par défaut : Node 20+ (`next start` derrière un reverse proxy TLS). Un déploiement sur le cluster MacLustr (`mld`) ou sur Vercel est documenté dans `docs/DEPLOYMENT.md`. |1314### Inconnues bloquantes (à valider par le client)15161. Logo vectoriel officiel (sinon le SVG recréé `src/components/graphics/Logo.tsx` doit être approuvé).172. Photos sous licence pour le hero et la section À propos (les illustrations livrées sont des **placeholders vectoriels** dans la palette, marqués comme tels dans `docs/ASSET_REGISTER.md`).183. Coordonnées réelles (courriel, téléphone, adresse, LinkedIn) : laissées vides, les icônes/liens correspondants sont masqués tant que les champs du contenu sont vides.194. Témoignage(s) autorisé(s) : la section est **masquée en production** (`testimonials.visible=false`) ; le texte de la maquette est conservé uniquement comme exemple de prévisualisation marqué « non vérifié ».205. Textes juridiques (confidentialité, mentions légales) : gabarit fourni, à faire valider par un conseiller juridique.216. Fournisseur de messagerie transactionnelle (SMTP) et adresses expéditeur/destinataire.227. Choix CMS : voir §4.2324## 2. Architecture2526```27content/                 ← contenu administrable (JSON validé par Zod au build et à l'exécution)28  site.json              ← identité, navigation, coordonnées, liens sociaux, SEO par défaut29  home.json              ← hero, services, à-propos, témoignages, bandeau, visibilité des sections30  pages.json             ← pages internes (services, à propos, témoignages, nous joindre, confidentialité)31src/32  app/33    layout.tsx           ← polices, métadonnées par défaut, Header/Footer34    (site)/page.tsx      ← accueil (7 sections)35    (site)/services|a-propos|temoignages|nous-joindre|confidentialite/page.tsx36    api/contact/route.ts ← POST : validation Zod, honeypot, limitation de débit, envoi SMTP37    sitemap.ts, robots.ts, icon.svg, opengraph-image.tsx38  components/39    layout/   Header, MobileNav, Footer40    sections/ Hero, Services, About, Testimonials, CallToAction41    graphics/ Logo, GoldenSpiral, WaveDivider, BotanicalMotif, placeholders photo42    ui/       Button, Container, SectionTitle, Icon…43    forms/    ContactForm (client)44  lib/        content.ts (chargeur + schémas), env.ts, validation.ts, security.ts (rate limit, sanitisation), mail.ts, seo.ts45  styles/     tokens.css (design tokens), globals.css46tests/47  unit/       Vitest + Testing Library (schémas, validation, rate limit, composants)48  e2e/        Playwright (navigation, menu mobile, formulaire, liens, axe, captures)49docs/         IMPLEMENTATION_PLAN, DEPLOYMENT, CLIENT_GUIDE, QA_REPORT, ASSET_REGISTER50```5152## 3. Design system5354- Tokens CSS (`src/styles/tokens.css`) : couleurs échantillonnées, échelle typographique `clamp()`, espacements, rayons, ombres, mouvement. Exposés à Tailwind 4 via `@theme`.55- Titres : **EB Garamond** (OFL) ; corps : **Figtree** (OFL). Chargées par `next/font/google` (auto-hébergées au build, `display: swap`). À remplacer par les polices officielles du client si elles existent.56- Motifs : spirale de Fibonacci (carrés + arcs de quart de cercle, ratio 1,618 approché par la suite 1-1-2-3-5-8-13-21), vagues, feuillage — tous en SVG inline.5758## 4. Contenu administrable — décision5960Le cahier des charges recommande un CMS maintenu (Payload / Sanity) tout en demandant d'éviter de surdimensionner si une solution statique convient et de **demander validation**.6162Choix livré : **contenu structuré en fichiers JSON versionnés** (`content/*.json`), validé par Zod, modifiable sans toucher au code applicatif, avec guide client. Raisons : aucun hébergement de base de données ni de compte tiers à gérer, pas de surface d'authentification à sécuriser, sauvegarde = historique Git, coût nul, déploiement statique possible.6364Compromis documentés : l'édition exige un éditeur de texte ou l'interface web Git ; pas d'aperçu WYSIWYG ni de gestion de médias par glisser-déposer. Chemin d'évolution : `src/lib/content.ts` est l'unique point d'accès au contenu ; brancher Payload (SQLite/Postgres, intégré à Next) ou Sanity consiste à remplacer ce module en conservant les schémas Zod. **Décision à valider par le client.**6566## 5. Étapes67681. Audit + plan (ce document). ✔692. Design system : tokens, polices, UI de base, logo et motifs SVG.703. Accueil fidèle : 7 sections, comparaison Playwright à 1024 px (largeur de la capture) puis 1440 px.714. Pages internes + chargeur de contenu + visibilité des sections.725. Formulaire de contact + API + messagerie SMTP configurable + protection antispam.736. Validation : lint, typecheck, Vitest, Playwright (6 largeurs, axe), build de production.747. Livraison : README, .env.example, docs/DEPLOYMENT, CLIENT_GUIDE, QA_REPORT, ASSET_REGISTER.7576## 6. Critères d'acceptation par section (checklist)7778- [ ] En-tête : logo + nom + signature, 5 liens, CTA bleu arrondi « Contactez-nous → », lien actif souligné, menu mobile accessible, en-tête collant sobre.79- [ ] Hero : fond ivoire, H1 serif 3 lignes, sous-titre, bouton bleu, illustration à droite avec spirale dorée superposée, vagues ivoire/bleu pâle en bas.80- [ ] Services : titre centré entre filets dorés, 4 cartes (disque bleu-gris + icône au trait), textes exacts.81- [ ] À propos : image verticale à gauche avec courbe ivoire, surtitre doré, H2, paragraphe, bouton contour, 4 bénéfices avec coches dorées séparés par un filet vertical.82- [ ] Témoignages : encadré bleu pâle arrondi, guillemets dorés, serif italique, pagination ; slider accessible ; masqué en prod sans avis validé.83- [ ] Bandeau : fond bleu ardoise, titre blanc, bouton ivoire, spirale + feuillage dorés à droite.84- [ ] Pied de page : logo + nom, liens, icônes LinkedIn/courriel (si fournis), copyright dynamique, signature, liens légaux.85- [ ] Responsive 360/390/768/1024/1440/1920 sans débordement horizontal.86- [x] Témoins : bannière accessible, 3 catégories, choix mémorisé, réouverture, section dans la politique de confidentialité (ajouté 2026-11-08).87- [ ] Formulaire : validation client/serveur, honeypot, rate limit, SMTP configurable, états succès/erreur, tests.88- [ ] Lint, typecheck, tests, build, axe : verts ou écarts documentés dans `docs/QA_REPORT.md`.89