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