# PHI Conseil — site web

Site vitrine de PHI Conseil (« Stratégies · Financement · Réussite »), reproduit fidèlement à partir de la maquette client (`references/phi-conseil-homepage.jpeg`) et conçu comme un produit de production : Next.js 16 (App Router), React 19, TypeScript strict, Tailwind CSS 4, contenu administrable validé par Zod, formulaire de contact sécurisé, tests unitaires et de bout en bout.

## Démarrage

```bash
pnpm install
cp .env.example .env.local       # ajuster au besoin (transport courriel, URL)
pnpm dev                          # http://localhost:3000
```

Prérequis : Node.js ≥ 20 (testé avec 26), pnpm ≥ 10.

## Scripts

| Commande                    | Rôle                                                                                                                                                                                                         |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `pnpm dev`                  | serveur de développement                                                                                                                                                                                     |
| `pnpm build` / `pnpm start` | build de production / serveur de production (`-p <port>`)                                                                                                                                                    |
| `pnpm lint`                 | ESLint (config Next + règles React Compiler)                                                                                                                                                                 |
| `pnpm typecheck`            | `tsc --noEmit`                                                                                                                                                                                               |
| `pnpm test`                 | tests unitaires Vitest (schémas, validation, sécurité, API, composants)                                                                                                                                      |
| `pnpm test:e2e`             | Playwright : navigation, menu mobile, formulaire, débordements, axe, captures (`docs/screenshots/`) ; nécessite `pnpm build` au préalable et `pnpm exec playwright install chromium webkit` la première fois |
| `pnpm check`                | lint + typecheck + tests + build                                                                                                                                                                             |
| `pnpm icons`                | régénère favicon / icônes à partir du logo (spirale dorée)                                                                                                                                                   |
| `pnpm format`               | Prettier                                                                                                                                                                                                     |

## Structure

```
content/            contenu administrable (site.json, home.json, pages.json) — voir docs/CLIENT_GUIDE.md
src/app/            routes (accueil, services, a-propos, temoignages, nous-joindre, confidentialite, api/contact)
src/components/     layout/ sections/ ui/ graphics/ forms/
src/lib/            content.ts (schémas + chargeur), env.ts, validation.ts, security.ts, mail.ts, seo.ts, spiral.ts
src/styles/         tokens.css (design tokens : couleurs échantillonnées, typo, espacements…)
tests/unit, tests/e2e
docs/               plan, déploiement, guide client, rapport QA, registre des actifs, captures
references/         maquette client
```

## Principes

- **Fidélité** : couleurs échantillonnées sur la maquette, structure DOM = ordre visuel sur tous les écrans, motifs (spirale de Fibonacci, vagues, feuillage) en SVG.
- **Honnêteté du contenu** : aucune coordonnée, témoignage ou réalisation inventés. Les témoignages ne sont publiés que s'ils sont `approved: true` et la section `visible: true` ; les photos de la maquette sont remplacées par des illustrations vectorielles tant que le client n'a pas fourni d'images sous licence (`docs/ASSET_REGISTER.md`).
- **Vie privée** : bannière de témoins conforme à la Loi 25 (refus par défaut, choix par catégorie, révocable via « Gérer les témoins », témoin `phi_consent` 180 jours). Aucun traceur n’est installé ; tout futur outil d’analyse doit être conditionné à `hasConsent("analytics")` (`src/lib/consent.ts`).
- **Sécurité** : CSP, en-têtes durcis, validation Zod client + serveur, honeypot, délai anti-robot, limitation de débit, dédoublonnage, journalisation sans donnée personnelle, secrets uniquement côté serveur.
- **Accessibilité** : WCAG 2.2 AA visé (axe sans violation sur toutes les pages), navigation clavier, `prefers-reduced-motion`, lien d'évitement, états focus visibles.

## Documentation

- `docs/IMPLEMENTATION_PLAN.md` — audit, architecture, décisions, critères d'acceptation
- `docs/DEPLOYMENT.md` — hébergement, DNS, HTTPS, variables, sauvegardes, rollback
- `docs/CLIENT_GUIDE.md` — modifier textes, services, témoignages, images, coordonnées
- `docs/QA_REPORT.md` — résultats réels des vérifications, limites, points à valider
- `docs/ASSET_REGISTER.md` — provenance, licence et statut de chaque actif