spb/phi-conseil

1# PHI Conseil — site web23Site 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.45## Démarrage67```bash8pnpm install9cp .env.example .env.local       # ajuster au besoin (transport courriel, URL)10pnpm dev                          # http://localhost:300011```1213Prérequis : Node.js ≥ 20 (testé avec 26), pnpm ≥ 10.1415## Scripts1617| Commande                    | Rôle                                                                                                                                                                                                         |18| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |19| `pnpm dev`                  | serveur de développement                                                                                                                                                                                     |20| `pnpm build` / `pnpm start` | build de production / serveur de production (`-p <port>`)                                                                                                                                                    |21| `pnpm lint`                 | ESLint (config Next + règles React Compiler)                                                                                                                                                                 |22| `pnpm typecheck`            | `tsc --noEmit`                                                                                                                                                                                               |23| `pnpm test`                 | tests unitaires Vitest (schémas, validation, sécurité, API, composants)                                                                                                                                      |24| `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 |25| `pnpm check`                | lint + typecheck + tests + build                                                                                                                                                                             |26| `pnpm icons`                | régénère favicon / icônes à partir du logo (spirale dorée)                                                                                                                                                   |27| `pnpm format`               | Prettier                                                                                                                                                                                                     |2829## Structure3031```32content/            contenu administrable (site.json, home.json, pages.json) — voir docs/CLIENT_GUIDE.md33src/app/            routes (accueil, services, a-propos, temoignages, nous-joindre, confidentialite, api/contact)34src/components/     layout/ sections/ ui/ graphics/ forms/35src/lib/            content.ts (schémas + chargeur), env.ts, validation.ts, security.ts, mail.ts, seo.ts, spiral.ts36src/styles/         tokens.css (design tokens : couleurs échantillonnées, typo, espacements…)37tests/unit, tests/e2e38docs/               plan, déploiement, guide client, rapport QA, registre des actifs, captures39references/         maquette client40```4142## Principes4344- **Fidélité** : couleurs échantillonnées sur la maquette, structure DOM = ordre visuel sur tous les écrans, motifs (spirale de Fibonacci, vagues, feuillage) en SVG.45- **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`).46- **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`).47- **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.48- **Accessibilité** : WCAG 2.2 AA visé (axe sans violation sur toutes les pages), navigation clavier, `prefers-reduced-motion`, lien d'évitement, états focus visibles.4950## Documentation5152- `docs/IMPLEMENTATION_PLAN.md` — audit, architecture, décisions, critères d'acceptation53- `docs/DEPLOYMENT.md` — hébergement, DNS, HTTPS, variables, sauvegardes, rollback54- `docs/CLIENT_GUIDE.md` — modifier textes, services, témoignages, images, coordonnées55- `docs/QA_REPORT.md` — résultats réels des vérifications, limites, points à valider56- `docs/ASSET_REGISTER.md` — provenance, licence et statut de chaque actif57