Audit LocaGed - Rapport Complet

🔴 BUGS CRITIQUES (cassent le site)

Overflow horizontal sur mobile (iPhone SE)

css/resource-pages.css:12

Le body a `overflow-x: hidden` mais certains éléments dépassent sur mobile, créant un scroll horizontal indésirable.

Ajouter `max-width: 100vw` sur body et `.wrap` + padding réduit sur mobile.
Zoom automatique iOS sur les inputs

contact.html:45-60

Les champs de formulaire ont `font-size: 14px`, déclenchant le zoom automatique d'iOS.

Forcer `font-size: 16px !important` sur tous les inputs de type text/email/tel.
Images sans dimensions définies

index.html:78, 85, 92

Les images hero et dashboard n'ont pas d'attributs width/height, causant des Cumulative Layout Shifts (CLS).

Ajouter `width` et `height` intrinsèques + `loading="lazy"`.
Contraste texte/fond insuffisant (WCAG)

css/resource-pages.css:100

Le texte `.article-p` en `#5a5a58` sur blanc = contraste 4.2:1 (minimum requis 4.5:1).

Changer en `#5a5a58` → `#4a4a48` pour atteindre 7:1.

🟠 PROBLÈMES MAJEURS (dégradent fortement l'expérience)

Touch targets trop petits sur mobile

css/nav-drawer.css:19-28

Les boutons de navigation mobile font 40x40px (minimum WCAG: 44x44px).

Augmenter à `min-width: 44px; min-height: 44px`.
Pas de skip link pour accessibilité

Toutes les pages

Absence de lien "Skip to content" pour la navigation au clavier.

Ajouter un lien caché qui apparaît au focus en début de page.
Grids qui ne s'adaptent pas correctement

css/resource-pages.css:129, 160

Les grids `.enjeux-grid` et `.lr-grid` passent directement de 2→1 colonnes sans état intermédiaire.

Ajouter un breakpoint tablette avec `grid-template-columns: repeat(2, 1fr)`.
Polices système comme polices principales

css/resource-pages.css:7

Utilisation de 'Trebuchet MS' comme police principale (non disponible sur tous les systèmes).

Importer Inter ou system-ui stack moderne.
Pas de support dark mode

Tous les fichiers CSS

Absence de media query `prefers-color-scheme: dark`.

Ajouter des variables CSS pour le dark mode.

🟡 AMÉLIORATIONS RECOMMANDÉES (best practices)

Variables CSS hardcodées

css/resource-pages.css:3-10

Couleurs hexadécimales directement dans les règles au lieu de variables.

Créer un système de design avec variables CSS cohérent.
Tailles de police en px au lieu de rem

css/hero-zigzag-org-fixes.css:11-24

Utilisation de `px` pour les tailles de police, empêchant le zoom utilisateur.

Convertir en `rem` (1rem = 16px par défaut).
Borders en couleur solide

css/resource-pages.css:36, 55

Borders `#e8e8e6` au lieu de rgba pour un effet plus subtil.

Utiliser `rgba(0,0,0,0.08)` pour alpha blending.
Pas de font-display: swap

Tous les fichiers CSS

Absence de `font-display: swap` pour éviter FOIT (Flash of Invisible Text).

Ajouter `font-display: swap` dans `@font-face`.
Animations sans prefers-reduced-motion

css/resource-pages.css:175-178

Les animations `.rv` n'ont pas de fallback pour `prefers-reduced-motion`.

Ajouter `@media (prefers-reduced-motion: reduce)`.
Anti-patterns design identifiés

Multiple

Border-left colorée systématique, tout centré, gradients sur boutons.

Simplifier et uniformiser selon les principes de Dropbox Business.

🟢 POINTS POSITIFS

Structure HTML sémantique

Bonne utilisation des balises header, nav, main, section, footer.

Navigation mobile bien implémentée

Drawer menu robuste avec gestion des safe areas iOS.

Performance JavaScript

Scripts bien structurés avec gestion des événements appropriée.

Responsive design de base

Breakpoints présents même si perfectibles.

Organisation des fichiers

Structure claire avec séparation CSS/JS/HTML.

Meta tags corrects

Viewport, charset, et balises OpenGraph présentes.

📊 SCORE PAR CATÉGORIE

Structure HTML

7/10

Bonnes bases sémantiques

Responsive design

6/10

Breakpoints à améliorer

Typographie

5/10

Polices système, contraste faible

Couleurs & accessibilité

4/10

Contraste insuffisant, pas de dark mode

Performance

6/10

Images non optimisées

Qualité du code

7/10

Bien organisé, variables à améliorer

🛠️ PLAN DE CORRECTION PRIORITAIRE

Corriger l'overflow horizontal mobile
Ajouter `max-width: 100vw` et padding adaptatif sur les petits écrans.
Fixer le zoom iOS sur les inputs
Forcer `font-size: 16px` sur tous les champs de formulaire.
Améliorer les contrastes WCAG
Revoir toutes les couleurs de texte pour atteindre 4.5:1 minimum.
Ajouter les dimensions aux images
Width/height intrinsèques + lazy loading pour améliorer le CLS.
Implémenter le système de design
Créer des variables CSS et un spacing system cohérent.

📁 FICHIERS DE CORRECTION CRÉÉS

css/locaged-global.css - Système de design complet inspiré Dropbox Business
css/critical-fixes.css - Corrections urgentes pour bugs critiques
audit-locaged.html - Ce rapport d'audit détaillé

Instructions : Ajouter ces deux fichiers CSS dans l'ordre suivant dans le <head> de toutes les pages :
1. css/locaged-global.css (nouveau système de design)
2. css/critical-fixes.css (corrections urgentes)
3. Les fichiers CSS existants