# Plan d'implémentation — PHI Conseil

Date : 2026-11-08. Référence visuelle : references/phi-conseil-homepage.jpeg (1024 × 1536 px, capture desktop fournie par le client).

# 1. Audit initial

Élément	État constaté
Dépôt	Vide à l'origine (créé aujourd'hui). Scaffold `create-next-app` 16.4.5, TypeScript strict, Tailwind 4, ESLint 9, pnpm 11.
Capture	Présente et inspectée. Couleurs échantillonnées par région (médiane / mode / moyenne des pixels sombres) — voir `src/styles/tokens.css`.
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é.
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`.

# Inconnues bloquantes (à valider par le client)

Logo vectoriel officiel (sinon le SVG recréé src/components/graphics/Logo.tsx doit être approuvé).
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).
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.
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é ».
Textes juridiques (confidentialité, mentions légales) : gabarit fourni, à faire valider par un conseiller juridique.
Fournisseur de messagerie transactionnelle (SMTP) et adresses expéditeur/destinataire.
Choix CMS : voir §4.

# 2. Architecture

text

content/                 ← contenu administrable (JSON validé par Zod au build et à l'exécution)
  site.json              ← identité, navigation, coordonnées, liens sociaux, SEO par défaut
  home.json              ← hero, services, à-propos, témoignages, bandeau, visibilité des sections
  pages.json             ← pages internes (services, à propos, témoignages, nous joindre, confidentialité)
src/
  app/
    layout.tsx           ← polices, métadonnées par défaut, Header/Footer
    (site)/page.tsx      ← accueil (7 sections)
    (site)/services|a-propos|temoignages|nous-joindre|confidentialite/page.tsx
    api/contact/route.ts ← POST : validation Zod, honeypot, limitation de débit, envoi SMTP
    sitemap.ts, robots.ts, icon.svg, opengraph-image.tsx
  components/
    layout/   Header, MobileNav, Footer
    sections/ Hero, Services, About, Testimonials, CallToAction
    graphics/ Logo, GoldenSpiral, WaveDivider, BotanicalMotif, placeholders photo
    ui/       Button, Container, SectionTitle, Icon…
    forms/    ContactForm (client)
  lib/        content.ts (chargeur + schémas), env.ts, validation.ts, security.ts (rate limit, sanitisation), mail.ts, seo.ts
  styles/     tokens.css (design tokens), globals.css
tests/
  unit/       Vitest + Testing Library (schémas, validation, rate limit, composants)
  e2e/        Playwright (navigation, menu mobile, formulaire, liens, axe, captures)
docs/         IMPLEMENTATION_PLAN, DEPLOYMENT, CLIENT_GUIDE, QA_REPORT, ASSET_REGISTER

# 3. Design system

Tokens CSS (src/styles/tokens.css) : couleurs échantillonnées, échelle typographique clamp(), espacements, rayons, ombres, mouvement. Exposés à Tailwind 4 via @theme.
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.
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.

# 4. Contenu administrable — décision

Le 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.

Choix 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.

Compromis 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.

# 5. Étapes

Audit + plan (ce document). ✔
Design system : tokens, polices, UI de base, logo et motifs SVG.
Accueil fidèle : 7 sections, comparaison Playwright à 1024 px (largeur de la capture) puis 1440 px.
Pages internes + chargeur de contenu + visibilité des sections.
Formulaire de contact + API + messagerie SMTP configurable + protection antispam.
Validation : lint, typecheck, Vitest, Playwright (6 largeurs, axe), build de production.
Livraison : README, .env.example, docs/DEPLOYMENT, CLIENT_GUIDE, QA_REPORT, ASSET_REGISTER.

spb/phi-conseil