# Rapport de vérification (QA) — PHI Conseil

Date : 2026-11-08. Environnement : macOS, Node 26.13, pnpm 11.1, Next.js 16.4.5, build de production local (`pnpm build && pnpm start -p 3100`, `CONTACT_TRANSPORT=log`).

## Résultats

| Vérification | Commande | Résultat |
|---|---|---|
| Lint | `pnpm lint` | ✅ 0 erreur, 0 avertissement |
| Types | `pnpm typecheck` | ✅ |
| Tests unitaires | `pnpm test` | ✅ 28/28 (contenu/Zod, validation, limitation de débit, dédoublonnage, CSP, route `/api/contact` incl. honeypot et délai anti-robot, composants, géométrie de la spirale) |
| Build de production | `pnpm build` | ✅ 10 routes statiques prérendues + `/api/contact` dynamique |
| Tests de bout en bout | `pnpm test:e2e` | ✅ 40 réussis, 8 ignorés volontairement (tests réservés au projet desktop ou mobile), 0 échec — projets Chromium 1440 × 900 et WebKit iPhone 13 |
| Accessibilité automatisée | axe-core (WCAG 2.0/2.1/2.2 A+AA) sur les 6 pages, desktop + mobile | ✅ 0 violation |
| Débordement horizontal | 360, 390, 768, 1024, 1440, 1920 px sur `/`, `/nous-joindre`, `/services` | ✅ aucun |
| Lighthouse mobile (accueil) | lighthouse 12, émulation mobile, Chromium headless local | ✅ Performance 100 · Accessibilité 100 · Bonnes pratiques 100 · SEO 100 — LCP 0,9 s, CLS 0, TBT 20 ms |
| En-têtes de sécurité | test e2e `en-têtes de sécurité présents` | ✅ CSP (`frame-ancestors 'none'`, `object-src 'none'`), `nosniff`, `X-Frame-Options`, `Referrer-Policy`, `Permissions-Policy`, HSTS ; `X-Powered-By` retiré |
| Formulaire | e2e : erreurs associées aux champs (`aria-invalid`, `aria-describedby`), soumission valide → confirmation ; API : 400 sur payload invalide | ✅ |
| Menu mobile | e2e WebKit : ouverture, focus sur « Fermer », Échap, retour du focus, navigation | ✅ |
| Liens | e2e : aucun lien interne mort sur l'accueil, 6 pages en 200, 404 personnalisée, sitemap/robots/manifest/icônes servis | ✅ |

## Comparaison visuelle avec la maquette

Captures dans `docs/screenshots/` (`home-1024.png` à la largeur de la maquette, `home-1440.png`, `home-mobile-390.png`, pages internes). Comparaison section par section à 1024 px :

| Section | Fidélité | Écarts connus |
|---|---|---|
| En-tête | ✅ logo + nom + signature, 5 liens, CTA bleu arrondi, lien actif souligné | signature masquée sous 640 px (place) |
| Hero | ✅ fond ivoire, titre serif 3 lignes, sous-titre, bouton, spirale dorée superposée, vagues ivoire/bleu pâle | **photo remplacée par une illustration vectorielle** (droits de la photo de maquette inconnus) ; titre un peu plus grand que la maquette à 1024 px |
| Nos services | ✅ titre entre filets dorés, 4 disques bleu-gris + icônes au trait, textes exacts | icônes redessinées (proches, non identiques) |
| À propos | ✅ image gauche + courbe ivoire, surtitre doré, titre, paragraphe, bouton contour, 4 coches dorées avec filet vertical | **photo remplacée** (idem) ; surtitre doré assombri (#7c5e34 au lieu de ~#bea177) pour atteindre le contraste AA 4,5:1 |
| Témoignages | ✅ encadré bleu pâle arrondi, guillemets dorés, serif italique, pagination, pause, clavier, `prefers-reduced-motion` | **masqués en production** (`visible=false`, aucun avis autorisé) ; visibles sur le site de démonstration avec bandeau « exemple non vérifié » (`NEXT_PUBLIC_CONTENT_PREVIEW=1`) |
| Bandeau final | ✅ fond bleu ardoise, titre blanc, bouton ivoire, spirale + feuillage dorés | sous-titre en blanc pur (maquette : blanc légèrement transparent) pour le contraste |
| Pied de page | ✅ logo + nom, liens séparés par filets, icône courriel, copyright dynamique, signature, liens légaux | icône LinkedIn masquée tant que `social.linkedin` est vide |

Le rendu n'a pas été qualifié de « pixel-perfect » : polices (EB Garamond / Figtree) et illustrations diffèrent nécessairement des actifs de la maquette.

## Limites de mesure

- Lighthouse mesuré en local (latence nulle) : à refaire sur l'hébergement final ; les Core Web Vitals terrain (p75) ne sont disponibles qu'avec du trafic réel.
- Le limiteur de débit est en mémoire : comportement validé pour une instance unique.
- L'envoi SMTP réel n'a pas été testé (aucun fournisseur/destinataire fourni) ; le transport `log` est explicitement signalé à l'utilisateur dans l'écran de confirmation. Le code SMTP (nodemailer) est en place et testé via un faux mailer.
- Tests manuels effectués dans Chromium et WebKit (Playwright) ; Firefox non testé.

## Points restant à valider par le client

1. Logo vectoriel officiel (sinon approuver la recréation SVG).
2. Photos sous licence pour le hero et la section À propos.
3. Coordonnées (courriel, téléphone, adresse) et URL LinkedIn.
4. Témoignage(s) réel(s) avec autorisation écrite → `approved: true`, `visible: true`.
5. Textes juridiques (confidentialité / mentions légales) → `privacy.reviewed: true`.
6. Fournisseur SMTP, expéditeur et destinataire du formulaire.
7. Choix de la gestion de contenu : fichiers JSON versionnés (livré) ou CMS (Payload/Sanity) — voir `docs/IMPLEMENTATION_PLAN.md` §4.
8. Nom de domaine définitif et hébergement.