# 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)

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

## 2. Architecture

```
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

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

## 6. Critères d'acceptation par section (checklist)

- [ ] En-tête : logo + nom + signature, 5 liens, CTA bleu arrondi « Contactez-nous → », lien actif souligné, menu mobile accessible, en-tête collant sobre.
- [ ] 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.
- [ ] Services : titre centré entre filets dorés, 4 cartes (disque bleu-gris + icône au trait), textes exacts.
- [ ] À 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.
- [ ] Témoignages : encadré bleu pâle arrondi, guillemets dorés, serif italique, pagination ; slider accessible ; masqué en prod sans avis validé.
- [ ] Bandeau : fond bleu ardoise, titre blanc, bouton ivoire, spirale + feuillage dorés à droite.
- [ ] Pied de page : logo + nom, liens, icônes LinkedIn/courriel (si fournis), copyright dynamique, signature, liens légaux.
- [ ] Responsive 360/390/768/1024/1440/1920 sans débordement horizontal.
- [ ] Formulaire : validation client/serveur, honeypot, rate limit, SMTP configurable, états succès/erreur, tests.
- [ ] Lint, typecheck, tests, build, axe : verts ou écarts documentés dans `docs/QA_REPORT.md`.