

### **2. [CRITIQUE] Barres de progression accessibles**
Remplacer `<div class="bar">` par :



### **3. [ÉLEVÉ] Corriger encodage UTF-8 et descriptions emojis**

👨‍💼 Bien-etre des agents

👨‍💼 Bien-être des agents

🚨 3 signaux burn-out détectés...



### **4. [ÉLEVÉ] Ajouter "skip to main content"**

Aller au contenu principal



### **5. [MOYEN] Tester mobile < 400px et ajuster focus**
- Réduire padding `.quadrant` sur mobile
- `.login-box` : vérifier lisibilité à 320px (input peut déborder)

---

## 5. CE QUI EST BIEN

- ✅ **Hiérarchie KPI claire** : grille 4 colonnes responsive, données critiques visibles[1][5]
- ✅ **Data visualization pertinente** : Karasek quadrants (modèle RH robuste), badges de risque contextuels — aide à la décision des élus
- ✅ **Design cohérent** : palette de couleurs (vert=bon, rouge=risque) intuitive et conforme thème municipal[1][3]

---

### **Conformité RGAA 4.2** 
Actuellement : **~35% de conformité** (critères manquants : 1.1, 1.3, 2.1, 2.4, 3.3, 4.1). Objectif 80% atteint dès implémentation des 5 améliorations ci-dessus.[1][2]

---

## mairie/agents.html
## 1. NOTE /10
**7.5/10**  
UX: 8/10 (intuitive, visuelle). Design: 8/10 (cohérent, moderne). Contenu: 7/10 (pertinent mais statique). Technique: 6.5/10 (problèmes accessibilité RGAA et bugs).

## 2. BUGS ou erreurs
- **Accents manquants** : "Reservee" → "Réservée", "elus" → "élus", "habilites" → "habilités".
- **HTML invalide** : Balises non fermées (`<div class="login-box">` sans `</div>` propre), `grid-2` sans CSS définition (erreur layout), `badge-grey` sans CSS.
- **Liens potentiellement cassés** : `../css/aix-theme.css`, `../js/cgu-gate.js` (non fournis), navigation vers `quartiers.html` etc. non vérifiée.
- **Script vulnérable** : Code fixe `'MAIRE2026'` en clair (sécurité faible).
- **Chart.js chargé** mais inutilisé.

## 3. PROBLÈMES UX
- **Accessibilité critique (RGAA non conforme)** : Pas d'`alt` sur icônes SVG favicon/emoji, contrastes variables (barres fines), navigation clavier absente (boutons sans `role`), titres mal hiérarchisés (h1/h2 OK mais spans comme labels), formulaire login sans `<label>`[1][2].
- **Mobile** : `.karasek-grid` OK responsive, mais `.grid-2` (7 cartes) déborde/casse sans `grid-template-columns: repeat(auto-fit, minmax(300px,1fr))`; barres trop fines (8px).
- **Navigation** : Overlay login bloque tout (pas d'échappatoire visible), pas de fil d'Ariane, surcharge visuelle (7 cartes services).
- **Lisibilité** : Texte petit (13px/14px), quadrants saturés en couleurs sans hover/tooltip.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `alt` aux emojis (`🧑‍💼 Bien-être`), `<label for="codeInput">Code</label>`, `aria-label` sur boutons, `role="alert"` sur `.alert-card`[1][2].
2. **Responsive grid** : Remplacer `.grid-2` par `display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--sp-md);`.
3. **Sécurité login** : Remplacer code fixe par hash ou backend API.
4. **Badges cohérents** : Définir CSS `.badge-grey` et uniformiser (ex. `badge badge-xxx`).
5. **Accents + sémantique** : Corriger fautes, utiliser `<section>`, `<article>` pour cartes.

## 5. CE QUI EST BIEN
- **Visualisation Karasek** : Quadrants intuitifs et colorés, parfaite pour élus (modèle scientifiquement validé).
- **Dashboard efficace** : KPIs + alertes + détails services en flux logique, données anonymisées adaptées au contexte mairies.
- **Thème cohérent** : CSS variables (`--aix-blue`), responsive nav, icônes Lucide modernes.

---

## mairie/index.html
# Audit UX/UI – SOS Mairies (index.html Direction)

## 1. NOTE GLOBALE: 6.5/10

| Dimension | Note |
|-----------|------|
| **UX/Navigation** | 6/10 |
| **Design & Lisibilité** | 7/10 |
| **Accessibilité** | 5/10 |
| **Technique** | 7/10 |

---

## 2. BUGS & ERREURS

- **Accents manquants** : "Reservee" → "Réservée" ; "elus" → "élus" ; "Dernieres" → "Dernières" ; "remontees" → "remontées"
- **Dépendance critique manquante** : `AixEngine` objet non défini → page blanche si `quartier-engine.js` échoue
- **Icônes Lucide** : chargement asynchrone externe (unpkg) → risque de timeout, pas de fallback
- **HTML invalide** : pas de validation du code HTML5 (multiline `<div class="navbar-inner">` sans fermeture propre)
- **Mot de passe en clair** : `CODE = 'MAIRE2026'` visible en source (sécurité)

---

## 3. PROBLÈMES UX

| Problème | Impact | Sévérité |
|----------|--------|----------|
| **Login sans feedback** | Code incorrect = message caché par défaut | Haute |
| **Pas d'indication de charge** | KPIs + carte apparaissent vides 1-2s | Haute |
| **Responsive dégradé** | Grille 2 colonnes OK, mais KPI-grid pas responsive | Moyenne |
| **Contraste insuffisant** | `.dir-nav a` (rgba 0.7) < AA WCAG | Haute |
| **Pas d'alternative texte** | Icônes Lucide sans `aria-label` | Moyenne |
| **Scroll horizontal caché** | `.dir-nav-inner overflow-x:auto` non découvert | Basse |
| **Pas de pagination** | Listes limitées à 5 items, pas de "voir plus" | Moyenne |

---

## 4. AMÉLIORATIONS PRIORITAIRES

### 1️⃣ **Accessibilité (Contraste + Labels)** [CRITIQUE]

Tableau de bord


Ajouter `aria-label` à tous les icônes Lucide ; améliorer contraste nav à `rgba(255,255,255,0.95)`.

### 2️⃣ **Gestion des erreurs de login**

function tryLogin() {

const code = document.getElementById('codeInput').value;

if (code === CODE) {

sessionStorage.setItem('aix_dir_auth', 'ok');

document.getElementById('loginOverlay').style.display = 'none';

} else {

const error = document.getElementById('loginError');

error.style.display = 'block';

error.setAttribute('role', 'alert');

document.getElementById('codeInput').focus();

}



### 3️⃣ **Skeleton loaders + fallbacks**


Empêcher le layout shift ; ajouter classe `.loading` pendant l'init.

### 4️⃣ **Responsive KPI grid**

.kpi-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

gap: var(--sp-lg);

}

@media (max-width: 480px) {

.kpi-grid { grid-template-columns: 1fr 1fr; }

}



### 5️⃣ **Sécurité : déplacer authentification**
- Retirer `CODE` de la source ; implémenter auth backend (token JWT)
- Ajouter **CSRF token** + **Content Security Policy**

---

## 5. POINTS FORTS

✅ **Design cohérent** : système de couleurs (bleu Aix, Provence) bien appliqué ; composants réutilisables  
✅ **Structure claire** : hiérarchie visuelle nette (KPIs → Cartes → Détails) ; navigation logique  
✅ **Performance technique** : Chart.js léger ; pas de requête réseau (mock data)

---

## Recommandation: Audit complet recommandé

Un **audit UX/ergonomique complet**[1] avec **tests utilisateurs réels** (élus, agents) révèlerait des pain points sur la compréhension des dashboards et des parcours décisionnels, notamment sur mobile[2].

---

## mairie/impact-societal.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** (Design moderne, mais lacunes accessibilité et mobile critiques pour une app mairies en 2026).

## 2. BUGS ou erreurs
- **HTML invalide**: Icônes `<i data-lucide>` sans `aria-hidden="true"` ou `role="img"`, canvas sans `aria-label` ou fallback.
- **Liens potentiellement cassés**: `href="../index.html"`, `href="index.html"` (non vérifiables sans contexte).
- **Fonctionnalité cassée**: `exportPDF()` = `window.print()` (pas PDF réel).
- **Variables CSS manquantes**: `--sp-lg`, `--radius-lg`, `--ease`, `--font` (dépend de `aix-theme.css` absent).
- **Accents OK**, mais titre "Mon 10e" incohérent avec projet "SOS Mairies".

## 3. PROBLÈMES UX
- **Mobile**: Grille KPIs `minmax(180px,1fr)` casse sur petits écrans (<768px) ; charts hauteur fixe 300px non responsive.
- **Navigation**: Pas de fil d'ariane, liens nav sans `aria-current`, bouton PDF fixed masque contenu mobile.
- **Accessibilité critique** (RGAA/WCAG AA obligatoire 2026 pour mairies[1][2][5]): 
  - Contraste faible (texte 0.5 opacité sur fond sombre).
  - Pas d'`alt` sur favicon SVG, pas de `title` page cohérent.
  - Charts Chart.js sans `aria-label`, focus clavier absent.
  - Pas de skip links, structure `<h1>` unique OK mais pas de landmarks (`<main>`, `<nav>`).
- **Lisibilité**: Trop de charts (6) sans hiérarchie claire, surcharge visuelle.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA**: Ajouter `role="img" aria-label` sur canvas/charts, `aria-hidden` sur icônes, vérifier contrastes (outil WAVE), déclaration accessibilité[1][2].
2. **Mobile-first**: `grid-template-columns: repeat(auto-fit, minmax(150px,1fr))` → `minmax(0,160px)` ; charts `aspect-ratio: 16/9`.
3. **Navigation**: Wrapper `<nav aria-label="Navigation principale">`, fil d'ariane `<nav aria-label="Chemin">`.
4. **Technique**: Remplacer `window.print()` par jsPDF pour vrai PDF ; lazy-load Chart.js.
5. **Contenu**: Corriger titre "SOS Mairies — Impact sociétal" ; ajouter filtres date sur charts.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème dark pro, couleurs sémantiques (vert ↑, rouge ↓), hover fluides.
- **KPIs impactants**: Métriques concrètes pour élus (économies €, temps), grille responsive.
- **Charts variés**: Bon usage Chart.js (bar/line/doughnut), données réalistes et tendancielles.

---

## mairie/impact-societal.html
## 1. NOTE /10
**7.5/10**  
*(UX: 8/10 - dashboard efficace ; Design: 8/10 - thème sombre cohérent ; Contenu: 7/10 - pertinent pour élus ; Technique: 7/10 - fonctionnel mais perfectible)*

## 2. BUGS ou erreurs
- **Titre incohérent** : "Impact societal — Direction — Mon 10e" au lieu de "Impact sociétal — Mon 10e" (accent manquant, mots superflus).
- **Liens relatifs risqués** : `href="../index.html"`, `href="index.html"` peuvent casser si structure de dossiers change.
- **Fonction PDF cassée** : `exportPDF()` appelle `window.print()` (impression, pas PDF réel).
- **Icônes Lucide non chargées** : `<i data-lucide>` sans script avant (script en fin de body).
- **HTML valide** mais sémantique faible : pas de `<main>`, `<header>`, ARIA landmarks.
- **Données statiques** : "0 EUR" + projections incohérentes avec KPIs (pas de calcul dynamique).

## 3. PROBLÈMES UX
- **Mobile insuffisant** : Grille KPIs ok mais charts à 300px height trop petits ; pas de media queries spécifiques ; bouton PDF fixed mal positionné sur petits écrans.
- **Navigation limitée** : Menu basique sans fil d'Ariane, recherche, ou filtres temporels (période charts non sélectionnable).
- **Accessibilité critique (RGAA/WCAG AA obligatoire 2026 pour collectivités)**[1][2][3] : 
  - Pas d'`alt` sur favicon SVG.
  - Contrastes limites (texte 0.5 opacity sur fond sombre).
  - Charts sans `aria-label` ni descriptions (non lisible par screen readers).
  - Pas de `lang="fr"` sur éléments, focus invisible, clavier non testable.
  - Bouton PDF sans `aria-label`.
- **Lisibilité** : Texte dense, pas de hiérarchie claire (trop de cards similaires).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `role="main"`, `aria-label` sur charts/boutons, `alt` explicatifs, contrasts >4.5:1, navigation clavier. Déclaration d'accessibilité obligatoire[1][2].
2. **PDF réel** : Remplacer `window.print()` par `html2pdf.js` ou `jsPDF` pour export fonctionnel.
3. **Responsive charts** : Ajouter `options: { responsive: true, aspectRatio: 2 }` + media queries pour mobile (`height: 250px` <768px).
4. **Navigation** : Ajouter fil d'Ariane `<nav aria-label="Fil d'ariane">` + sélecteur période (dropdown mois/année).
5. **Dynamiser données** : Lier "0 EUR" aux KPIs (ex: 312h × taux horaire) via JS.

## 5. CE QUI EST BIEN
- **Dashboard impactant** : KPIs colorés + deltas motivants, charts variés (bar/line/doughnut) pertinents pour élus mairies.
- **Thème sombre pro** : Cohérent (#1A2332), hover effects fluides, responsive grille auto-fit.
- **Chargement rapide** : Chart.js léger, données embarquées, pas de dépendances lourdes.

---

## mairie/quartiers.html
## 1. NOTE /10
**7.5/10**  
UX fluide et moderne (8/10), design cohérent (8/10), contenu pertinent (7/10), technique fonctionnel mais perfectible (6.5/10).

## 2. BUGS ou erreurs
- **Accents manquants** : "Reservee" → "Réservée", "elus" → "élus", "hab." → "hab.", "repondants" → "répondants".
- **HTML invalide** : `<i data-lucide>` sans `aria-hidden="true"` (risque lecteur d'écran), login-overlay sans `role="dialog"`, `onkeydown` inline sans `aria-label`.
- **Liens potentiellement cassés** : Dépendance `../js/quartier-engine.js` et `AixEngine` non fournis (erreur JS si manquant).
- **Sécurité faible** : Code auth hardcoded `'MAIRE2026'` (exposé en clair).

## 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA 2026 obligatoire pour mairies) : Pas de `alt` sur icônes SVG favicon, contrastes var(--aix-*) non garantis (AA requis[1][2]), navigation clavier incomplète (boutons sans `focus-visible`), pas de `aria-label` sur canvas chart, structure `<div>` au lieu de `<section>/<article>`.
- **Mobile** : `grid-template-columns: minmax(280px,1fr)` trop large (défilement horizontal sur petits écrans), textes 12px (dim-mini) sous seuil lisibilité.
- **Navigation** : Login overlay bloque tout sans `esc` pour fermer, pas de fil d'Ariane, surcharge visuelle (icônes + bars + scores).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA AA** : Ajouter `lang="fr"`, `alt` icônes, `aria-labelledby` charts, tester WCAG (contrastes, clavier). Publier déclaration accessibilité[1][3].
2. **Mobile-first** : `minmax(250px,1fr)` → `repeat(auto-fit, minmax(320px,1fr))`, tailles font 14px min, `overflow-x:auto` sur grid.
3. **Sécurité auth** : Remplacer hardcoded par backend (session/cookie sécurisé), ajouter `autocomplete="one-time-code"`.
4. **Performance** : Lazy-load Chart.js, debounce `renderGrid()`, ARIA live regions pour updates dynamiques.
5. **SEO/Structure** : `<main>`, `<h2>` sémantiques, meta `description`, OpenGraph pour partage.

## 5. CE QUI EST BIEN
- **Design moderne** : Thème CSS vars cohérent, hover states fluides, heatmap intuitive avec couleurs/scores.
- **Interactivité riche** : Filtres dimensions + radar chart dynamiques, tri auto performant.
- **Responsive global** : Navbar + grid adaptatifs, PWA-ready (viewport, theme-color).

---

## mairie/impact.html
## 1. NOTE /10
**8/10** (UX: 8, Design: 9, Contenu: 8, Technique: 7) – Interface moderne et data-driven adaptée aux élus, mais lacunes en accessibilité et robustesse.

## 2. BUGS ou erreurs
- Accents manquants: "Reservee" → "Réservée", "elus" → "élus", "signalements resolus" → "résolus".
- HTML invalide: `<div class="login-box">` sans balise de fermeture propre (fusionné en une ligne), attributs inline sans guillemets cohérents.
- JS erreur: `AixEngine.getQuartierName(p.quartier)` – `AixEngine` non défini (script `quartier-engine.js` manquant ou incomplet).
- Liens potentiellement cassés: `../css/aix-theme.css`, `../js/quartier-engine.js`, `../js/cgu-gate.js` (non fournis).
- Favicon SVG encodé en data-URI avec emoji non-standard (`🏛️`).

## 3. PROBLÈMES UX
- **Mobile**: Navigation `.dir-nav` en `overflow-x: auto` sans scrollbar stylée, métriques KPI trop serrées sur petits écrans (min 160px).
- **Accessibilité**: Icônes Lucide sans `aria-label` ni `alt`, contrastes faibles (ex: `.text-muted`), pas de `role` sur overlay login, clavier non-navigable (boutons sans `tabindex`).
- **Navigation**: Overlay login bloque tout sans feedback loading, code hardcoded `'MAIRE2026'` (sécurité nulle).
- **Lisibilité**: Polices petites (13px sur mobile), pas de `loading="lazy"` sur Chart.js.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter ARIA et sémantique**: `<button aria-label="Entrer dans l'espace direction">`, `role="status"` sur métriques, `alt` sur canvas chart.
2. **Mobile-first CSS**: `@media (max-width: 768px) { .kpi-grid { grid-template-columns: repeat(2,1fr); } .dir-nav { padding: var(--sp-md); } }`.
3. **Sécuriser auth**: Remplacer code fixe par API/fetch, ajouter `autocomplete="one-time-code"`, valider input côté serveur.
4. **Lazy loading + perf**: `loading="lazy"` sur scripts non-critiques, `defer` sur Chart.js/Lucide.
5. **Feedback UX**: Animations sur login (fade-in), tooltips sur statuts promesses, export CSV des métriques.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème CSS vars (`--aix-blue`), cards modernes, couleurs sémantiques (succès/bleu/or).
- **Data visualisation**: KPI grid impactants, chart Chart.js fluide avec datasets comparatifs (résolus/reçus).
- **Contenu pertinent**: Métriques citoyennes concrètes (signalements, promesses géolocalisées), adapté aux élus français.

---

## mairie/social.html
## 1. NOTE /10
**UX: 7/10** — Intuitive et moderne, mais lacunes mobile/accessibilité.  
**Design: 8/10** — Cohérent, visuel attractif avec CSS vars.  
**Contenu: 8/10** — Pertinent pour mairies, données anonymisées claires.  
**Technique: 6/10** — Fonctionnel, mais erreurs HTML/JS et dépendances externes.  
**Note globale: 7.25/10**

## 2. BUGS ou erreurs
- **Accents manquants**: "Reservee" → "Réservée", "elus" → "élus", "habilites" → "habilités".
- **HTML invalide**: `<div class="login-box">` sans balise `<label>` pour input (non sémantique), émoticônes sans `aria-label` (ex. `📡`), `onkeydown` inline sans `aria-describedby`.
- **Liens potentiellement cassés**: `../css/aix-theme.css`, `../js/quartier-engine.js` (non fournis), `AixEngine.detectSocialSignals()` peut planter si JS absent.
- **Login hardcoded**: Code 'MAIRE2026' en clair, non sécurisé (sessionStorage vulnérable).
- **Scripts externes**: Lucide CDN sans fallback, risque de blocage.

## 3. PROBLÈMES UX
- **Navigation mobile**: `.dir-nav-inner { overflow-x: auto; }` crée scrollbar horizontale sur petits écrans, liens trop petits (13px, < 44px tactile).
- **Lisibilité mobile**: Grille indicateurs `minmax(250px,1fr)` casse en 1 colonne sur <768px sans media query, padding excessif.
- **Accessibilité critique** (RGAA 4.1.2/WCAG 2.1 AA obligatoire pour mairies[1][2][3]): 
  - Pas d'`aria-label` sur icônes/émoticônes.
  - Contrastes non garantis (ex. `.trend-up { color: var(--aix-danger); }` sans vérif).
  - Non navigable clavier (boutons sans focus visible).
  - Pas de skip-link ni structure `<main>`, `<section>`.
  - Formulaire login sans `<label>`, lecteur d'écran confus.
- **Login overlay**: Bloque tout sans alt pour icône Lucide.

## 4. AMÉLIORATIONS concrètes (priorité décroissante)
1. **Accessibilité RGAA**: Ajouter `<label for="codeInput">Code d'accès</label>`, `aria-label` sur tous émoticônes (ex. `aria-label="Radar social"`), media queries pour focus visible et contrastes AA. Tester avec Lighthouse[3][5].
2. **Mobile-first**: Media query `@media (max-width: 768px) { .indicator-grid { grid-template-columns: 1fr; } .dir-nav a { min-height: 44px; padding: 12px; } }`.
3. **Sécurité login**: Remplacer hardcoded par API backend, ajouter CAPTCHA/rate-limit.
4. **Sémantique HTML**: `<main>`, `<section aria-labelledby="h1">`, remplacer émoticônes par `<svg>` avec `role="img" aria-label`.
5. **Perf/JS**: Lazy-load Lucide, fallback `signals = []` si `AixEngine` absent.

## 5. CE QUI EST BIEN
- **Design cohérent**: CSS vars (`--aix-blue`), cards avec bordures colorées, grille responsive auto-fit — moderne et lisible.
- **Contenu pertinent**: Indicateurs macro + signaux + reco actionnés, adaptés mairies (isolement seniors, bruit, commerces).
- **Navigation claire**: Navbar + dir-nav pill active, overlay login simple/efficace.

---

## mairie/impact.html
# Audit UX/UI — Impact.html (SOS Mairies)

## NOTE GLOBALE: 7/10

**Répartition:** UX 6.5/10 | Design 7.5/10 | Contenu 7/10 | Technique 7.5/10

---

## BUGS ET ERREURS

- **Accents manquants** : "Reservee" (réservée), "elus" (élus), "habilites" (habilités), "jeux securises" (sécurisés), "prevus" (prévus), "dimanche" (dirait plutôt "Dimanche"), etc. → Impacte la crédibilité auprès des élus.
- **Lien cassé probable** : `AixEngine.getQuartierName()` appelé sans vérification d'existence. Si le script `quartier-engine.js` n'est pas chargé, la page échoue silencieusement.
- **Balise sémantique manquante** : Les métriques KPI ne sont pas dans une liste (`<dl>`) ou élément avec `role="group"`.

---

## PROBLÈMES UX/ACCESSIBILITÉ

| Problème | Impact | Gravité |
|----------|--------|---------|
| **Contraste insuffisant** sur `.text-muted` (gris clair sur blanc) — ratio probable <4.5:1[3] | Illisible pour malvoyants (WCAG AA échoué) | 🔴 Haute |
| **Pas d'alternatives textuelles** pour les icônes Lucide (Chart, vote) | Lecteurs d'écran muets[3] | 🔴 Haute |
| **Overflow horizontal** sur `.dir-nav-inner` en mobile | Perte d'onglets sans scroll apparent[2] | 🟠 Moyenne |
| **Pas de label `<label>` pour l'input password** | Accès clavier + écrans muets | 🟠 Moyenne |
| **Couleurs seules pour statuts** (rouge/bleu/vert) | Utilisateurs daltoniens ne distinguent pas[3] | 🟠 Moyenne |
| **Zoom à 200% casse la grille KPI** | Pas responsive sur zoom[3] | 🟡 Basse |
| **Focus outline invisible** sur `.dir-nav a` | Navigation clavier impossible | 🔴 Haute |

---

## AMÉLIORATIONS PRIORITAIRES

### 1. **Corriger l'accessibilité des statuts** [🔴 CRITIQUE]
Ajouter des icônes ou symboles en plus de la couleur :

${p.status === 'realise' ? '✓' : p.status === 'encours' ? '⏳' : '✕'}

${statusLabels[p.status]}



### 2. **Augmenter le contraste des textes mutés** [🔴 CRITIQUE]

.text-muted { color: #555; } / au lieu de #999 ou similaire /

.text-xs { font-size: 12px; line-height: 1.5; } / améliorer lisibilité /



### 3. **Ajouter des descriptions aux icônes Lucide** [🔴 CRITIQUE]



### 4. **Fixer les accents diacritiques** [🟠 MOYENNE]
Utiliser l'encoding UTF-8 correctement ou remplacer les caractères mal échappés.

### 5. **Améliorer le responsive mobile de la nav** [🟠 MOYENNE]

@media (max-width: 640px) {

.dir-nav-inner { gap: 0; } / plus compact /

.dir-nav a { padding: 8px 12px; font-size: 12px; }

}



---

## CE QUI EST BIEN ✅

1. **Hiérarchie visuelle claire** : Titre H1 + KPI en évidence + cards bien structurées. Aide à la compréhension rapide[8].

2. **Utilisation intelligente de la couleur pour l'engagement** : Graphique Chart.js + barres de progression captivent l'attention sur les résultats concrets pour les élus.

3. **Contenu pertinent et transparent** : Les promesses incluent descriptions + quartiers + % réalisation → crédibilité et responsabilité démontrées[8].

---

## mairie/index.html
## 1. NOTE /10
**8/10** (UX: 8, Design: 9, Contenu: 7, Technique: 8). Dashboard moderne et fonctionnel, mais freiné par des erreurs basiques et manques d'accessibilité.

## 2. BUGS ou erreurs
- **Accents manquants** : "Reservee" → "Réservée", "elus" → "élus", "remontees" → "remontées".
- **HTML invalide** : `<i data-lucide="..."></i>` sans fallback texte (Lucide JS requis, échoue sans JS).
- **Liens potentiellement cassés** : Dépendance à `../js/quartier-engine.js` et `../css/aix-theme.css` non fournis ; erreurs console si absents.
- **Sécurité faible** : Code d'accès hardcodé en JS (`'MAIRE2026'`), visible en inspection source.
- **Chart.js version** : `@4` incomplète (devrait être `@4.x.x`), risque d'échec chargement.

## 3. PROBLÈMES UX
- **Mobile** : Navigation `.dir-nav` `overflow-x: auto` peu fluide ; grille `.dash-grid` passe à 1fr mais cartes trop hautes.
- **Navigation** : Pas de fil d'Ariane ; liens relatifs risquent de casser en prod.
- **Accessibilité** : Pas d'`aria-label` sur icônes Lucide ; canvas chart sans `aria-describedby` ; login sans `aria-describedby` pour erreur.
- **Lisibilité** : Textes petits (13px) sur mobile ; placeholders map vides sans JS.
- **Feedback** : Erreur login s'affiche sans `display: block` initial (cachée par défaut).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Sécuriser login** : Migrer vers backend (API POST), supprimer code JS ; ajouter `autocomplete="one-time-code"`.
2. **Accessibilité WCAG** : Ajouter `aria-label` icônes (`aria-label="Tableau de bord"`), `role="img"` canvas, `lang="fr"` cohérent partout.
3. **Responsive nav** : `.dir-nav-inner` → `flex-wrap: wrap` ou tabs select sur mobile (<768px).
4. **Charger JS différé** : `defer` sur scripts ; lazyload Chart.js ; fallback texte icônes (`<span aria-hidden="true" data-lucide>...</span>`).
5. **État loading** : Ajouter skeletons pour KPIs/listes pendant fetch `AixEngine`.

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème CSS vars (`--aix-blue`), cards arrondies, couleurs sémantiques (danger/warm/success).
- **Dashboard efficace** : KPIs prioritaires en haut, grille 2-col responsive, chart interactif Chart.js.
- **Interactions fluides** : Login overlay sessionStorage, hover nav, mini-listes dynamiques bien structurées.

---

## mairie/index.html
### 1. NOTE /10
**8/10** (UX: 8.5, Design: 8.5, Contenu: 7.5, Technique: 8).

### 2. BUGS ou erreurs
- Accents manquants: "Reservee" → "Réservée", "elus" → "élus".
- HTML invalide: `<link rel="icon">` avec SVG inline mal formatté (manque `base64` pour data URI valide).
- Liens potentiellement cassés: `../css/aix-theme.css`, `../js/quartier-engine.js` (non fournis, dépendance externe).
- JS: `AixEngine` non défini (erreur console si `quartier-engine.js` absent).
- `maxlength="10"` sur password, mais code 'MAIRE2026' fait 9 chars (OK, mais incohérent).

### 3. PROBLÈMES UX
- **Mobile**: Navigation `.dir-nav` `overflow-x: auto` sans scrollbar custom (scroll horizontal mal visible); grid dash passe 1fr OK mais cards trop denses.
- **Accessibilité**: Pas d'`aria-label` sur icônes Lucide; contrastes faibles (ex: `.dir-nav a` rgba(255,255,255,0.7)); clavier nav OK mais focus states manquants; pas d'`alt` sur canvas chart.
- **Navigation**: Login overlay bloque tout sans escape/fermeture clavier; pas de Breadcrumbs; liens "Site public" redirige sans confirmation.
- **Lisibilité**: Font-size 13px sur listes/nav (trop petit <16px recommandé WCAG); placeholders map vides au chargement.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Sécurité login**: Remplacer `sessionStorage` + code hardcodé par authentification serveur (ex: JWT API); ajouter CAPTCHA/rate-limit.
2. **Accessibilité**: Ajouter `aria-label` icônes (`aria-label="Tableau de bord"`), `role="img"` canvas, `tabindex` focus; valider WCAG AA via Lighthouse.
3. **Mobile**: Ajouter media-query pour `.dir-nav` (stack vertical <480px); lazyload Chart.js + images.
4. **Perf**: Extraire JS inline vers fichier; minifier CSS/JS; ajouter `loading="lazy"` si images futures.
5. **Contenu**: Ajouter tooltips KPIs (ex: `title="Satisfaction moyenne sur 10"`); filtres/search sur listes.

### 5. CE QUI EST BIEN
- **Design cohérent**: Thème `--aix-*` vars CSS, couleurs sémantiques (danger/warm/success), responsive grid efficace.
- **Dashboard intuitif**: KPIs en haut, hiérarchie claire (urgents/budget/forum), chart/barres colorées par score.
- **Interactions fluides**: Login simple, data démo réaliste, Chart.js bien configuré (responsive, no legend).

---

## maville-simulateur.html
## 1. NOTE /10
**UX: 7/10** — Intuitive et réactive, mais perfectible mobile/accessibilité.  
**Design: 8/10** — Moderne, cohérent (CSS vars), responsive partiel.  
**Contenu: 7/10** — Clair pour SaaS mairies, manque légendes/contextes.  
**Technique: 6/10** — Inline JS/CSS lourds, code incomplet, pas de JS fourni.  
**Global: 7/10**.

## 2. BUGS ou erreurs
- **Code HTML tronqué**: Fin abrupte à `background:var(--s` (ligne ~450) — page-offres incomplète, canvas/chartProj sans JS.
- **JS manquant**: Fonctions `showTab()`, `upd()`, `selOffer()`, `updOffre()` appelées mais non définies → sliders/tabs inopérants.
- **HTML invalide**: Styles inline non fermés (`style="background:var(--s`), balises incomplètes dans offre-card.
- **Accents OK**, pas de liens cassés (aucun lien externe).

## 3. PROBLÈMES UX
- **Mobile**: Grilles fixes (`grid-2: 350px`, `grid-3`) cassent <768px; tabs `overflow-x:auto` mais header/tabs sticky mal gérés.
- **Navigation**: Tabs sans indicateur visuel fort; pas de retour en haut ni breadcrumb.
- **Lisibilité**: Font-size trop petite (10-12px labels); contrastes limites (texte-muted sur surface-2).
- **Accessibilité**: Pas d'`aria-label` sur sliders/tabs; `input range` sans `aria-valuetext`; clavier-only navigation faible (onclick only).
- **Performance**: CSS/JS inline → chargement lent; pas de lazy-loading canvas.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Extraire JS/CSS en fichiers externes** + minifier pour perf/cache; ajouter script complet pour `upd()` etc.
2. **Responsive total**: Media queries (`@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }`); fluid grids.
3. **Accessibilité**: Ajouter `role="tablist"`, `aria-selected`, labels `<label for="s-auto">`; WCAG contrastes (AA).
4. **Mobile UX**: Touch targets >44px (boutons/sliders); swipe tabs ou bottom-nav.
5. **Contenu**: Tooltips légendes (e.g., ARPU=?) + bouton reset sliders.

## 5. CE QUI EST BIEN
- **Design system cohérent**: CSS vars, radius/borders uniformes — scalable et pro.
- **Simulateur intuitif**: Sliders réactifs (si JS) + métriques clés en vue (MRR/ARR/marge).
- **Palette accessible**: Couleurs sémantiques (navy/gold/green) avec bonnes vibes institutionnelles pour mairies.

---

## mairie/quartiers.html
### 1. NOTE /10
**7/10** (UX: 8/10 fluide et moderne ; Design: 7/10 cohérent mais perfectible mobile ; Contenu: 7/10 pertinent pour élus ; Technique: 6/10 bugs et accessibilité faible).[1][2]

### 2. BUGS ou erreurs
- Accents manquants: "Reservee" → "Réservée", "elus" → "élus", "repondants" → "répondants".[2]
- HTML invalide: `<div class="login-box">` sans balise de fermeture propre (manque `</div>` après `<div class="login-error">`).
- Liens potentiellement cassés: `../js/quartier-engine.js` et `AixEngine` non fournis (erreur JS si absents).
- `maxlength="10"` sur input sans validation côté serveur.
- Icône SVG favicon mal formée (`🏛️` non standard).

### 3. PROBLÈMES UX
- **Accessibilité critique** (non-RGAA 2026 pour mairies): Pas d'`alt` sur icônes SVG/canvas, contrastes faibles (ex. `.text-muted`), navigation clavier absente (boutons sans `role`), titres non hiérarchisés (h1+h2 sans structure), formulaire login sans `<label>`, chart non accessible (pas d'ARIA).[1][2][5]
- **Mobile**: Grid `minmax(280px)` trop large (défilement horizontal), nav `.dir-nav` `overflow-x:auto` sans scrollbar stylée, textes 12px trop petits.
- **Navigation**: Overlay login bloque tout sans skip-link ; pas de fil d'Ariane ; filtres boutons sans états focus visibles.
- **Lisibilité**: Hardcodé `MAIRE2026` en clair (sécurité faible) ; radar chart surcharge (5 datasets).

### 4. AMÉLIORATIONS concrètes (priorité décroissante)
1. **Accessibilité RGAA**: Ajouter `alt` icônes, `label for="codeInput"`, ARIA sur chart/grid (`role="img" aria-label`), `lang="fr"` cohérent, contrasts >4.5:1, `prefers-reduced-motion`.[1][2][4]
2. **Mobile-first**: `grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) → minmax(100%, 1fr)` ; media queries pour textes >14px ; touch targets 44px.[4]
3. **Sécurité login**: Remplacer hardcode par API ; ajouter CAPTCHA/2FA ; `autocomplete="current-password"`.
4. **Structure sémantique**: `<main>`, `<nav aria-label="Direction">`, `<section>` pour grid/chart ; skip-link login.
5. **Perf/SEO**: Lazy-load Chart.js ; `<meta name="description">` ; déclaration accessibilité RGAA obligatoire.[1][5]

### 5. CE QUI EST BIEN
- **Design cohérent**: Thème CSS vars moderne, heatmaps visuelles intuitives, hover/animations fluides.[3]
- **Interactivité riche**: Filtres dynamiques, tri scores, radar comparatif pertinent pour élus.
- **Responsive de base**: Grid auto-fit, viewport meta, theme-color PWA-like.

---

## memoire.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 9/10** | **Technique: 6/10**  
**Note globale: 7.5/10** (bon prototype, mais problèmes d'accessibilité RGAA critiques pour une app mairies en 2026).

## 2. BUGS ou erreurs
- **Syntaxe JS incomplète**: `DEMO_MEMORIES.story` coupée ("Sarah L., 34 ans" sans fin) → crash probable sur render.
- **Accents manquants**: "Mamie Jeanne" (OK), mais "arriere-grand-pere" → "arrière-grand-père".
- **HTML invalide**: `<i data-lucide="...">` sans script Lucide → icônes absentes; `navbar-inner` sans balise fermante claire.
- **Liens potentiellement cassés**: `js/quartier-engine.js` et `css/aix-theme.css` non fournis → page cassée sans eux.
- **Favicon SVG inline**: Fonctionne, mais caractères Unicode (`🏛️`) risquent d'être mal rendus sur vieux navigateurs.

## 3. PROBLÈMES UX
- **Accessibilité RGAA non-conforme** (critique pour mairies 2026): Pas d'`alt` sur images (`.memory-img`), labels `<label for="id">` manquants sur formulaires, contrastes non vérifiés (hero gradient faible), navigation clavier impossible (boutons sans focus visible), pas de `lang="fr"` cohérent, absence déclaration accessibilité[1][2][5].
- **Mobile**: Grid OK, mais `.memory-img` height fixe 200px → déformée sur petits écrans; form-row stacke bien mais boutons trop petits (cibles tactiles <24px WCAG 2.2)[4].
- **Navigation**: Navbar + tab-bar redondants → confusion; pas de skip-to-content pour clavier/lecteurs d'écran.
- **Lisibilité**: Textes petits (11-14px dans cards), pas de `prefers-reduced-motion`.
- **Performance**: Demo data statique, mais sans lazy-load images → lent sur mobile.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA**: Ajoutez `alt` descriptifs (ex: `alt="Photo sepia Cours Mirabeau 1962"`), `for` sur tous labels, `role="img"` ARIA, `aria-label` boutons, `main` landmark, déclaration accessibilité footer[1][2][4].
2. **Formulaires**: Validation JS (champs requis), feedback erreurs (ex: `aria-invalid`), pré-remplir quartier via geoloc.
3. **Mobile/Responsive**: `min-height` img adaptatif (`clamp(150px, 30vw, 250px)`), augmenter padding boutons (24px min).
4. **Navigation**: Fusionnez navbar/tab-bar ou conditionnez mobile/desktop; ajoutez `<a href="#main-content" class="skip-link">Aller au contenu</a>`.
5. **SEO/Perf**: `<meta name="description">`, lazy-load images (`loading="lazy"`), minifiez CSS/JS inline.

## 5. CE QUI EST BIEN
- **Design thématique fort**: Hero gradient Provence + sepia/modern cohérents, cards immersives avec hover subtil.
- **Contenu engageant**: Fun facts + demo memories riches, storytelling local parfait pour mairies (Aix identité).
- **Structure sémantique**: Hero, sections claires, grid responsive, CSS vars modernes → base solide évolutive.

---

## mairie/quartiers.html
# Audit UX/UI — quartiers.html (SOS Mairies)

## 1. NOTE GLOBALE: 6.5/10

| Critère | Note | Justification |
|---------|------|---------------|
| **UX** | 6/10 | Heatmap bien structurée mais manque de contexte et d'interactivité |
| **Design** | 7/10 | Cohérent avec le thème, mais card densité excessive |
| **Contenu** | 5/10 | Données sans narration ; titre vague, pas de guide utilisateur |
| **Technique** | 7/10 | Code propre, mais dépendances manquantes et pas de fallback |

---

## 2. BUGS ET ERREURS

- **Script manquant critique** : `../js/quartier-engine.js` n'existe pas dans le code fourni → **page non fonctionnelle**
- **Variable `AixEngine` non définie** : tout le rendu dépend de cet objet absent
- **Attribut `maxlength` sur input type password** : comportement imprévisible sur certains navigateurs
- **Icones Lucide non chargées au premier rendu** : dépendance à CDN externe (risque de lenteur)
- **Pas de balise `<main>`** : violation WCAG 2.1 pour la structure sémantique

---

## 3. PROBLÈMES UX CRITIQUES

### Mobile
- **Cards responsives insuffisantes** : `minmax(280px, 1fr)` limite la densité mais crée du overflow sur très petit écran
- **Navbar `.dir-nav-inner` avec `overflow-x: auto`** : pas d'indication visuelle du scroll horizontal (pas de shadow/gradient)
- **Score circle** : `60px` trop petit en viewport mobile (<375px)

### Accessibilité
- **Pas de `role` sur `.heat-card`** : article/listitem non défini
- **Couleurs comme seul encodeur d'info** (score green/orange/red) : non-conforme WCAG AA pour daltoniens
- **Contraste texte-fond insuffisant** : `rgba(255,255,255,0.7)` sur `--aix-blue` foncé
- **Pas d'`aria-label`** sur les boutons de filtre

### Lisibilité
- **Densité excessive** : 6+ mini-bars par card + score circle = surcharge cognitive
- **Radar chart** : overlap de 5 datasets → illisible en petit écran
- **Pas de loading state** : données s'affichent instantanément (pas de feedback utilisateur)

---

## 4. AMÉLIORATIONS PRIORITAIRES

### 1. **Ajouter couche de contexte (HAUTE PRIORITÉ)**
   - Remplacer titre vague par : *"Heatmap des quartiers — Satisfaction globale par zone (0-5)"*
   - Ajouter légende couleur sous titre : 🟢 Satisfait (4-5) | 🟠 Neutre (2-3) | 🔴 Insatisfait (0-1)
   - Bloc info : *"Données basées sur X répondants cette semaine"*

### 2. **Implémenter heatmap véritablement interactive (HAUTE PRIORITÉ)**
   - Selon les bonnes pratiques détectées[1], les heatmaps doivent segmenter **par appareil** (mobile/desktop) et **source de trafic**
   - Ajouter filtres : `<select>` pour Période, Source (web/app), Type d'appareil
   - Afficher indication *"Zone froide"* sur cards scores <2 (CTA d'action)

### 3. **Réduire cognitive load des mini-bars (MOYENNE PRIORITÉ)**

${d.icon}

${d.name}

${val}/5



### 4. **Radar chart — simplifier ou segmenter (MOYENNE PRIORITÉ)**
   - Limiter à **top 3 quartiers** ou proposer toggle *"Comparaison rapide"* ↔ *"Tous les quartiers"*
   - Ajouter tooltip au hover pour lire valeurs précises

### 5. **Accessibilité rapide (BASSE PRIORITÉ)**
   - Ajouter `aria-label="Score satisfaction: ${sc.total}/5"` sur `.score-circle`
   - Remplacer encodage couleur par badge texte : `<span class="badge-${color}">${label}</span>`
   - Tester contraste avec [WCAG AA Checker]

---

## 5. POINTS FORTS

✅ **Structure CSS modulaire** — variables `--aix-*` bien organisées, grid responsive`auto-fit`  
✅ **Interaction cohérente** — filtres `.active` fluides, animations `transition: all 0.2s`  
✅ **Données visuellement hiérarchisées** — score-circle en évidence, population contextualisée en `text-xs`

---

## BLOCAGE IMMÉDIAT

⚠️ **Le script `quartier-engine.js` manque → tester avec donnée d'exemple intégrée pour valider le rendu réel** sinon audit UX incomplet.

---

## mairie/social.html
## 1. NOTE /10
**7.5/10**  
*(UX: 8/10 - intuitive et moderne | Design: 8/10 - cohérent | Contenu: 7/10 - pertinent mais statique | Technique: 7/10 - fonctionnel mais perfectible)*

## 2. BUGS ou erreurs
- **Accents manquants** : "Reservee" → "Réservée", "elus" → "élus", "habilites" → "habilités".
- **HTML invalide** : Balises `<i data-lucide>` sans fallback (non sémantique), `login-overlay` inline sans CSS correspondant.
- **Liens potentiellement cassés** : `../css/aix-theme.css`, `../js/quartier-engine.js` non fournis (erreur 404 probable).
- **JS bloquant** : `AixEngine.detectSocialSignals()` non défini → `#signalList` vide.
- **Sécurité faible** : Code fixe `'MAIRE2026'` en clair (exposé source).

## 3. PROBLÈMES UX
- **Accessibilité critique (RGAA 2026)** : Pas d'`alt` sur icônes SVG/emoji, contrastes badges non garantis, navigation clavier incomplète (pas de `:focus-visible`), formulaire sans `<label>`[1][2][5].
- **Mobile** : `.dir-nav` `overflow-x: auto` sans scrollbar stylée, grille indicateurs trop dense sur petits écrans (min 250px).
- **Navigation** : Overlay login persistant sans bouton close (piégé si JS off), liens relatifs risquent 404.
- **Lisibilité** : Inline styles excessifs, tailles texte petites (13px nav, 12px trends).

## 4. AMÉLIORATIONS concrètes (priorité décroissante)
1. **Accessibilité RGAA** : Ajouter `alt` explicites (ex: `alt="Icône senior"`), `<label for="codeInput">Code d'accès</label>`, `role="alert"` sur erreurs, tester contrastes (AA min)[1][2][4].
2. **Responsive nav** : Remplacer `overflow-x:auto` par menu hamburger mobile (`@media max-width:768px`).
3. **Sécurité login** : Migrer vers backend (pas sessionStorage/code fixe), ajouter CAPTCHA/2FA.
4. **Sémantique HTML** : `<main>`, `<section>`, ARIA landmarks (`role="navigation"` sur `.dir-nav`)[4].
5. **Fallback JS** : Vérifier `if (typeof AixEngine !== 'undefined')` avant `detectSocialSignals()`.

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème CSS vars (`--aix-blue`), cards/gradients modernes, icônes emoji intuitives.
- **UX directionnelle** : Indicateurs visuels forts (couleurs/↑↓), priorisation signaux critiques.
- **Contenu pertinent** : Métriques actionnables pour mairies (isolement, bruit), recommandations concrètes.

---

## mentions-legales.html
## 1. NOTE /10
**8/10** (UX: 9/10, Design: 9/10, Contenu: 7/10, Technique: 8/10). Design premium et responsive, contenu complet mais manques légaux critiques, technique solide.

## 2. BUGS ou erreurs
- **Accents manquants partout** : "legales" → "légales", "numerique" → "numérique", "Editeur" → "Éditeur", "Hebergeur" → "Hébergeur", "donnees" → "données", "n°" → "n°", etc. (title, h1, header, sections).
- **HTML invalide** : `<title>Mentions legales</title>` (accent), `←` sans entité complète (`←`), `—` OK mais incohérent.
- **Incohérence projet** : Email `contact@sos-toutou.fr` (vétérinaire ?) vs projet **SOS Mairies** (communes/élus). Adresse "Paris, France" trop vague (pas de numéro/rue, obligatoire pour EI[1][4]).
- **Date future** : "Dernière mise à jour : mars 2026" (anachronique).
- **Script externe** : `js/ip-protection.js` non fourni, risque 404.

## 3. PROBLÈMES UX
- **Lisibilité mobile** : Texte petit (13px body, 12px header), faible contraste (rgba(200,195,185,0.6) sur #0d0d10 ≈ 3.5:1, sous WCAG AA 4.5:1).
- **Accessibilité** : Pas d'`alt` (images absentes mais prêt), ratios focus invisibles, pas de `lang="fr"`, numéros h2 non sémantiques (spans), skip links absents.
- **Navigation** : Lien "Retour" vers `/` assume accueil, pas de fil d'Ariane ni breadcrumbs.
- **Responsive** : Padding OK mais max-width 760px trop étroit sur desktop.

## 4. AMÉLIORATIONS concrètes (priorité décroissante)
1. **Corriger accents + adresse complète** : Ajouter rue/numéro Paris (ex: "12 rue Exemple, 75001 Paris"), SIRET, tél. obligatoire EI[1][4][7]. Changer email vers domaine mairies.
2. **Accessibilité** : Augmenter contrastes (0.8+ opacité), ajouter `role="navigation"`, `aria-label` bouton retour, `lang="fr"` cohérent.
3. **Manques légaux** : Ajouter tél. contact, SIREN/SIRET, numéro hébergeur/tél[1][2][7]. Lien politique confidentialité dédiée (RGPD exige[8]).
4. **Mobile** : `font-size: clamp(14px, 2.5vw, 16px)` body, tester contrastes Lighthouse.
5. **SEO/Perf** : Ajouter `<link rel="canonical">`, précharger Inter font, lazyload script.

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème dark élégant, gradient subtil, numérotation visuelle immersive.
- **Structure claire** : Sections numérotées, hiérarchie parfaite, contenu exhaustif (PI, RGPD, cookies).
- **Responsive natif** : Viewport/mobile-first, padding adaptatifs, hover states fluides.

---

## mairie/social.html
### 1. NOTE /10
**UX : 7/10** | **Design : 8/10** | **Contenu : 8/10** | **Technique : 6/10**  
**Note globale : 7.25/10** (solide visuellement, mais lacunes accessibilité/RGAA critiques pour une mairie en 2026[1][2][5]).

### 2. BUGS ou erreurs
- Accents manquants : "Reservee" → "Réservée", "elus" → "élus", "Encagnane" (répété, probable "Encagnane" OK mais vérifier orthographe quartier Aix).
- HTML invalide : `<div class="login-box">` sans balise de fermeture propre (contenu inline sans `>` correct), émoticons bruts sans fallback (`🧓`), script `AixEngine` non défini (erreur JS runtime).
- Liens potentiellement cassés : `../css/aix-theme.css`, `../js/quartier-engine.js` (non fournis, à valider).
- Login hardcodé insecure : `'MAIRE2026'` visible en source (risque sécurité).

### 3. PROBLÈMES UX
- **Accessibilité RGAA non conforme** (obligatoire 80% pour mairies 2026[1][2][5]) : pas d'`alt` sur icônes/émoticons, contrastes CSS var non garantis (risque <4.5:1), navigation clavier absente (`.dir-nav overflow-x:auto`), login sans `label`/ARIA, structure sémantique faible (pas de `<main>`, `<section>`).
- **Mobile** : `.dir-nav` `overflow-x:auto` casse sur petits écrans (pas de media queries spécifiques), grid `auto-fit` OK mais padding trop large.
- **Navigation** : Overlay login bloque tout sans escape/fermeture alternative ; pas de fil d'Ariane, liens relatifs risquent 404 hors contexte.
- Lisibilité : Font-size petite (13px nav, 14px cards), trends illisibles daltoniens (couleurs seules[4]).

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `alt` descriptifs (ex: `alt="Icône senior"`), `aria-label` liens/nav, `role="main"` sur `.container`, vérifier contrastes avec outil RGAA, déclarer conformité[1][2].
2. **Login sécurisé** : Remplacer hardcode par API backend, ajouter `label`+`aria-describedby` erreur, bouton annuler/escape.
3. **Mobile-first** : Media queries pour `.dir-nav` (stack vertical <768px), augmenter cibles tactiles (min 44px[4]).
4. **Sémantique HTML** : `<main>`, `<section aria-labelledby="h1">`, landmards ARIA (`role="navigation"` nav).
5. **Performance/SEO** : Lazy-load Lucide JS, préconnecter `../css`, meta `description` manquante.

### 5. CE QUI EST BIEN
- **Design cohérent** : Thème CSS vars moderne, cards colorés intuitifs (criticité visuelle claire), responsive grid efficace.
- **Contenu pertinent** : Métriques actionnables pour élus (signaux faibles, reco géolocalisées), hiérarchie visuelle forte (indicateurs → signaux → reco).
- **Simplicité technique** : Code concis, émoticons engageants, JS inline fonctionnel (si engine OK).

---

## meteo-quartier.html
### 1. NOTE /10
**8/10**  
UX fluide et gamifiée (7.5/10), design cohérent et responsive (8.5/10), contenu pertinent pour mairies (8/10), technique solide mais perfectible (8/10).

### 2. BUGS ou erreurs
- **Accents manquants** : "meteo" → "météo" partout (titre, classes CSS, IDs).
- **HTML invalide** : Favicon SVG inline malformé (`🏛️` non standard, utiliser emoji Unicode propre). `data:image/svg+xml` sans `,` après `href`.
- **Liens cassés potentiels** : Dépendance `js/quartier-engine.js` (non fourni) ; `AixEngine` undefined si absent → crash JS.
- **Console JS** : `AixEngine.DIMENSIONS` etc. non définis → erreurs runtime.

### 3. PROBLÈMES UX
- **Accessibilité critique (RGAA 2026 obligatoire pour mairies)** : Sliders sans `<label>`, boutons sans `aria-label`, icônes Lucide sans `alt`/aria-hidden, contrastes vars(--aix-*) non garantis (AA requis[1][2]), navigation clavier incomplète (focus invisible).
- **Mobile** : Timer fixed top:67px chevauche navbar sur petits écrans ; padding `--sp-xl` trop large en portrait.
- **Navigation** : Pas de bouton "Précédent" dans dims ; timer non pausable → frustration si distraction.
- **Lisibilité** : Slider labels "Tres mauvais" sans accents → "Très mauvais" ; police 12px trop petite (13px OK mais <14px RGAA[9]).

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `aria-label` sur sliders/boutons, `role="slider" aria-valuenow` sur input range, tester WAVE/tonerule[1][4]. **Priorité max (légal 2026)**.
2. **Corriger accents/bugs** : Remplacer "meteo"→"météo", valider HTML (W3C), mock AixEngine ou fallback.
3. **Bouton Précédent** : Ajouter dans `screen-dims` pour itérer dims ; `currentDim--` en JS.
4. **Timer UX** : Pause au blur/focus, alerte 10s ; `aria-live` pour timeLeft.
5. **Responsive** : `@media (max-width:480px)` réduire padding, timer top: auto.

### 5. CE QUI EST BIEN
- **Flow gamifié excellent** : Timer 90s + progrès dots + sliders intuitifs → engagement élevé (90s parfait pour micro-interaction).
- **Design cohérent** : Thème vars CSS réutilisable, animations fluides (fadeInUp), responsive container max-560px.
- **Technique modulaire** : Écrans cachés/activés, localStorage persistant, résultat benchmarké vs moyenne ville → valeur immédiate.

---

## maville-simulateur.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** – Interface pro et responsive, mais bugs et lacunes UX freinent l'expérience.

## 2. BUGS ou erreurs
- **Code HTML tronqué**: Fichier coupé à `background:var(--s` (ligne ~320) → page incomplète, JS manquant (`upd()`, `showTab()`, etc.).
- **JavaScript absent**: Fonctions `showTab()`, `upd()`, `selOffer()`, `updOffre()` non définies → sliders/tabs inopérants.
- **HTML invalide**: Inline styles malformés (ex: `style="background:var(--s`), balises non fermées dans projections (`id="proj6"` etc.).
- **Accents OK**, pas de liens cassés (aucun lien externe).

## 3. PROBLÈMES UX
- **Navigation mobile**: Tabs `overflow-x: auto` OK mais pas d'indicateurs visuels forts; header sticky masque contenu sur petits écrans.
- **Lisibilité**: Font-size trop petite (10-12px labels/titres); contraste faible sur `--text-muted` (gris clair sur fond clair).
- **Accessibilité**: Pas d'`aria-label` sur sliders/tabs; `input[range]` sans `aria-valuetext`; couleurs non WCAG-AA (ex: navy sur blanc).
- **Manque feedback**: Pas de validation sliders, tooltips, ou loading sur canvas/chart.
- **Complexité**: Trop d'infos denses sans hiérarchie claire (sliders sans reset/presets).[5]

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter JS manquant** + tester toutes interactions (sliders, tabs, charts) pour fonctionnement immédiat.
2. **Améliorer accessibilité**: Ajouter `aria-label`, `role="tablist"`, focus visibles; valider WCAG (contraste >4.5:1).
3. **Optimiser mobile**: Augmenter tailles min (fonts 14px+ labels), touch targets 44px+ sur sliders/buttons.[1]
4. **Ajouter feedback visuel**: Tooltips sur sliders, presets (ex: "Scénario startup"), barre progression tabs.[5]
5. **Refactor CSS**: Extraire inline styles en classes; ajouter media queries pour grid-2 → stack mobile.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème navy/gold pro, CSS variables propres, cards/grilles responsives et modernes.
- **Simulateur intuitif**: Sliders + metrics temps réel = excellente mécanique pour SaaS mairies (ARPU, churn).[3][4]
- **Contenu pertinent**: Tarifs réalistes, focus ROI mairies françaises, hiérarchie claire (header → tabs → grids).

---

## maville-simulateur.html
# Audit UX/UI — MaVille Simulateur de Revenus

## 1. NOTE GLOBALE: 7.2/10

| Critère | Score |
|---------|-------|
| **UX** | 7/10 |
| **Design** | 7.5/10 |
| **Contenu** | 7/10 |
| **Technique** | 7/10 |

---

## 2. BUGS & ERREURS CRITIQUES

- **HTML incomplet** : Le code s'interrompt brutalement à `style="margin-top:10px;font-size:11px;color:var(--s` (ligne du dernier card). La balise `</div>` et `</body></html>` manquent.
- **JavaScript manquant** : Les événements `oninput="upd()"`, `onclick="showTab()"`, `onclick="updOffre()"` font référence à des fonctions non définies → les sliders et onglets sont morts.
- **Canvas non initialisé** : `<canvas id="chartProj"></canvas>` n'a aucune logique de rendu (Script manquant).
- **Pas de dégradation progressive** : Sans JS, le simulateur est complètement inutilisable.

---

## 3. PROBLÈMES UX

### Accessibilité
- **Aucun attribut `aria-label`** sur les sliders → navigation au clavier impossible pour utilisateurs non-voyants[6]
- **Pas de `<label>` lié aux `<input>`** (utiliser `for="id"`), juste du texte visuel
- **Contraste insuffisant** : le texte blanc sur `rgba(255,255,255,0.5)` (header subtitle) est trop faible (WCAG AA non respecté)

### Mobile
- **.grid-2** (350px + 1fr) se casse sur mobile < 768px → pas de média queries
- **.commune-row** avec 6 colonnes → impossible à lire sur téléphone
- **.tabs** scrollable mais sans indicateur visuel clair du débordement

### Formulaires
Selon les bonnes pratiques UX[6], le formulateur manque de :
- **Clarté du flux** : l'utilisateur ne sait pas combien d'étapes il reste
- **Feedback temps réel** : aucune indication que les sliders mettent à jour les métriques
- **Explication du "pourquoi"** : pourquoi demander 30 paramètres ? Cas d'usage flou

### Lisibilité
- **Densité excessive** : 3 cards + 4 onglets + 12 sliders = cognitive overload
- **Typographie hiérarchique faible** : `.card-title` en 10px uppercase → difificile à scanner
- **Pas de tooltips** : termes métier (MRR, ARR, ARPU) non expliqués

---

## 4. AMÉLIORATIONS PRIORITAIRES (Top 5)

### 🔴 P1 — Compléter le code
- Terminer le HTML (balises fermantes)
- Implémenter les fonctions JS (`upd()`, `showTab()`, `updOffre()`)
- Initialiser Chart.js pour la projection 12 mois

### 🟠 P2 — Accessibilité
- Ajouter `aria-label`, `aria-describedby`, `role="slider"` aux `<input type="range">`
- Améliorer le contraste (header subtitle → blanc pur)
- Lier correctement `<label>` aux inputs (attribut `for`)

### 🟡 P3 — Responsive design
- Ajouter média queries : `.grid-2 → grid-template-columns: 1fr;` sur mobile
- `.commune-row → grid-template-columns: 1fr;` (passer à une liste)
- `.tabs → overflow-x: auto;` + scroll snap (déjà présent, mais pas d'indicateur)

### 🟢 P4 — UX du formulaire
- **Diviser en sections** : (1) Portefeuille, (2) Coûts, (3) Croissance → onglets ou accordéons
- **Ajouter help-text** : sous chaque slider, mini-explication en 11px gris
- **Validation en temps réel** : indiquer visuellement quand les seuils sont atteints (ex: "Rentabilité ✓" en vert)

### 🔵 P5 — Contenu & tutoriel
- Ajouter une **première visite interactif** : tour guidé avec hotspots
- **Glossaire** : modal avec définitions MRR, ARR, ARPU, churn
- **Mode d'emploi** : "Que changent les sliders ?" avec exemples concrets

---

## 5. CE QUI EST BON ✅

**1. Design system cohérent**
- Palette couleurs bien pensée (navy/gold/green/red) avec variables CSS
- Spacing uniforme (12px, 14px, 16px)
- Rayon de bordure consistant (10px / 6px)

**2. Structure hiérarchique des données**
- Séparation claire : sliders inputs / metrics outputs / projections
- Layout grid-2 pertinent (inputs à gauche, KPIs à droite)
- Badges thématisés (Self-service / Managed / Premium)

**3. Intention de conception B2B solide**
- Offres tarifaires bien structurées (Autonome / Assisté / Full-service)
- Simulation de portefeuille + ROI = cas d'usage SaaS cohérent
- Terminologie métier adaptée (MRR, ARR, churn) pour audience cible

---

## Verdict court
Le design et l'architecture sont **prometteurs**, mais le projet est **bloqué** : code HTML incomplet + JS absent = **non-fonctionnel**. Priorité : terminer l'implémentation + tester sur mobile. Ensuite, améliorer l'accessibilité et simplifier le flux utilisateur (trop de paramètres d'un coup).

---

## mon-quartier.html
### 1. NOTE /10
**8/10** (UX: 9/10 fluide et intuitive ; Design: 8/10 cohérent ; Contenu: 8/10 pertinent ; Technique: 7/10 solide mais perfectible).

### 2. BUGS ou erreurs
- **Accents manquants** : "Selectionnez" → "Sélectionnez" ; "pres de chez vous" → "près de chez vous".
- **HTML invalide** : Icône SVG favicon mal formée (`🏛️` non standard, risque d'affichage défectueux) ; `<i data-lucide>` sans `aria-hidden="true"` pour les icones décoratives.
- **Liens potentiellement cassés** : `commerces.html` et `associations.html` non standards (autres pages ?), `meteo-quartier.html` absent du nav.
- **JS** : Dépendance `AixEngine` non fournie (erreur runtime si manquante).

### 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA 2026 obligatoire pour mairies) : Pas d'`aria-label` sur `<select>`, contrastes non garantis (ex. barres de progression), navigation clavier incomplète (boutons sans focus visible), structure sémantique faible (`<div>` abusifs vs `<section>/<article>`), pas de `lang="fr"` sur titres[1][2].
- **Mobile** : Grid OK mais textes trop petits (13px dans `.mini-item`), boutons `btn-sm` trop étroits sur petits écrans.
- **Navigation** : Nav du haut + tab-bar redondants ; lien "active" sur `mon-quartier.html` doublé.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `aria-label="Choisissez votre quartier"` sur select, `role="progressbar"` + `aria-valuenow` sur barres, tester WCAG AA (contrastes, clavier)[1][2][3].
2. **Corrections accents/bugs** : Fixer "Sélectionnez/près", valider HTML (validator.w3.org), corriger favicon SVG.
3. **Mobile** : Augmenter `font-size: 14px min` (`.mini-item`), `min-height: 44px` sur boutons (iOS touch target).
4. **Perf/SEO** : Lazy-load Lucide JS, ajouter `<main>` autour container, meta `description`.
5. **Contenu** : Remplacer alert() par modal native, lier pages manquantes ou masquer.

### 5. CE QUI EST BIEN
- **Dashboard intuitif** : Grid responsive, score visuel immédiat, liens contextuels vers sections app.
- **Thème cohérent** : CSS vars, gradient hero immersif, icons Lucide pertinents.
- **JS stateful** : Sauvegarde localStorage, démo dynamique efficace sans backend.

---

## memoire.html
## 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 8/10** | **Technique: 6/10**  
**Note globale: 7.5/10** (Design immersif, mais accessibilité critique pour projet mairies/RGAA 2026 obligatoire[1][2][5]).

## 2. BUGS ou erreurs
- **HTML invalide**: `<script>` DEMO_MEMORIES coupé (`Sarah L., 34 ans` incomplet, JSON cassé).
- **Accents manquants**: "Aix d'hier et d'aujourd'hui" (manque ´ sur "aujourd'hui"), "Racontez votre quartier" répété sans cohérence.
- **Liens potentiellement cassés**: Dépendance `js/quartier-engine.js` et `css/aix-theme.css` non fournis ; fonctions `renderMemories()`, `submitMemory()` undefined.
- **Icônes Lucide**: `<i data-lucide>` sans script Lucide.js → icônes absentes.

## 3. PROBLÈMES UX
- **Accessibilité RGAA non conforme** (obligatoire mairies 2026, 80% seuil/page[1][2]): 
  - Pas d'`alt` sur images/fichiers, labels formulaires mal associés (`for` manquant).
  - Contrastes hero (gradient brun/or) potentiellement insuffisants (WCAG AA[3][4]).
  - Navigation clavier incomplète (boutons sans `role`, focus invisible).
  - Pas de `aria-label` sur icônes/filtres, `prefers-reduced-motion` ignoré.
- **Mobile**: Grid OK, mais boutons petits (13px decade-btn), formulaire file input non stylé.
- **Navigation**: Navbar sans `aria-current`, scroll infini absent (grid statique).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA**: Ajouter `alt` images, `for` labels, `aria-label` boutons, `role="main"` sur container, `lang="fr"` cohérent[1][2][4].
2. **Corriger JS**: Compléter DEMO_MEMORIES, implémenter `renderMemories()` avec filtrage localStorage, valider formulaire.
3. **Contrastes**: Tester hero/texte avec outil (cible 4.5:1 WCAG), assombrir fonds[3][4].
4. **Mobile**: `min-height` 44px cibles tactiles (WCAG 2.2), padding file input[4].
5. **SEO/Perf**: Lazy-load images, `<picture>` responsive, meta description.

## 5. CE QUI EST BIEN
- **Design thématique immersif**: Gradient Provence, cards hover fluides, sepia/moderne cohérents → émotion forte.
- **Structure sémantique**: Hero, sections logiques, grid responsive auto-fill.
- **Contenu engageant**: Fun facts rotatifs, démo souvenirs riches/localisés (Aix authentique).

---

## memoire.html
## 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 8/10** | **Technique: 6/10**  
**Note globale: 7.75/10** (Design immersif et thématique fort, mais lacunes techniques et accessibilité critiques pour un projet public).

## 2. BUGS ou erreurs
- **JS incomplet**: `DEMO_MEMORIES[7]` tronqué (`Sarah L., 34 ans` sans fin), crash probable sur `renderMemories()`.
- **Accents manquants**: "Annees" → "Années" (sélecteurs, options) ; "Aix Ensemble — Votre ville, votre voix • 2026" OK mais incohérent.
- **HTML invalide**: `<i data-lucide="...">` sans script Lucide (icônes absentes) ; `onclick="renderMemories()"`/`submitMemory()` sans définition (erreurs console).
- **Liens potentiellement cassés**: `js/quartier-engine.js` externe non fourni ; quartiers non populés (`#mQuartier`, `#filterQuartier`).
- **CSS externe manquant**: `css/aix-theme.css`/`--aix-*` vars utilisées sans fallback (risque rendu cassé).

## 3. PROBLÈMES UX
- **Navigation mobile**: Tab-bar + navbar redondants, surcharge bas d'écran ; pas de back-to-top.
- **Lisibilité mobile**: Grid OK mais `.memory-img` 200px fixe trop haute (dépassements) ; texte 11-12px trop petit (sous 16px recommandé).
- **Accessibilité (RGAA/WCAG critique pour mairies 2026)**: Pas d'`alt` sur images ; boutons sans `aria-label`/`role` ; contrastes faibles (gold/or sur beige ?) ; clavier non géré (focus invisibles) ; formulaires sans `aria-required`/`error`.
- **Loading**: Compteur `#totalMemories=0` et grid vides au premier rendu (délai JS non géré).
- **Form**: Pas de validation/prévisualisation ; file upload sans drag-drop ni preview.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA**: Ajouter `alt=""` dynamiques, `aria-label` boutons, `role="button"`, contrastes >4.5:1, `lang="fr"` sur `<html>`. Tester WCAG 2.2 AA[1][2].
2. **JS robuste**: Compléter `DEMO_MEMORIES`, définir `renderMemories()`/`submitMemory()` avec validation, localStorage pour persistance, lazy-load images.
3. **Mobile-first**: `min-height: 180px` sur `.memory-img` ; fusionner navbar/tab-bar ; ajouter skeleton loading pour grid.
4. **Form UX**: Preview photo (URL.createObjectURL), validation client (required fields), succès modal post-submit.
5. **Perf**: Inline critical CSS, defer `quartier-engine.js`, polyfill CSS vars pour IE/old browsers.

## 5. CE QUI EST BIEN
- **Design thématique immersif**: Gradient hero provencal, sépia/moderne cohérents, micro-interactions hover fluides.
- **Structure sémantique**: Hero/counter/filtres/grid/form logiques ; responsive grid auto-fill.
- **Contenu engageant**: Fun facts localisés, démo-mémoires riches émotionnellement, appel CTA fort ("Racontez votre quartier").

---

## monetisation-mairie.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 8/10** | **Technique: 6/10**  
**Note globale: 7.25/10** – Solide landing page persuasive, mais freinée par bugs et accessibilité.

## 2. BUGS ou erreurs
- **HTML invalide**: Section "guarantee-section" coupée (`</p> </` incomplet, page tronquée).
- **Accents manquants**: "Modele" → "Modèle", "elus" → "élus", "MaVille App pour les elus" → "élus", "10e" → "10ᵉ", "cotisation" → "cotisation" (OK mais incohérent), multiples fautes ("paris10.html" vs "10e").
- **JS manquant**: `calcROI()` et icônes Lucide non définis (erreurs console, calculette inactive).
- **Liens potentiellement cassés**: `index.html`, `pitch-paris10.html` (non vérifiables).
- **Incohérences chiffres**: Funnel "19 000 EUR" vs détail "20 140 EUR".

## 3. PROBLÈMES UX
- **Navigation mobile**: Nav fixed OK, mais funnel arrows cachées <600px sans fluidité optimale; pas de menu burger.
- **Lisibilité**: Texte dense en mobile (pas assez de sauts de ligne), contrastes bons mais typographie petite (14px sur labels).
- **Accessibilité**: Pas d'attributs `alt`/`aria`, inputs sans `aria-label`, couleurs OK mais pas WCAG-AA full (ex. rgba(255,255,255,0.6) sur fond bleu), clavier non testé.
- **Interactif cassé**: ROI calculette non fonctionnelle, impacte confiance.
- **Mobile-first insuffisant**: Grilles OK mais hero padding excessif sur petits écrans.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger HTML/JS**: Compléter `guarantee-section`, ajouter script `calcROI()` simple (ex. `function calcROI(){...}` avec formules basiques), charger Lucide.
2. **Accessibilité WCAG**: Ajouter `alt` icônes, `aria-label` inputs/buttons, `role="img"`, tester contraste (utiliser Lighthouse).
3. **Fix accents + cohérence**: Remplacer tous accents, uniformiser "10ᵉ", recalculer funnel (19k → 20k).
4. **Mobile optim**: Réduire padding hero (`padding: 20vh 1rem 4rem`), ajouter `word-break` textes longs.
5. **CTA fort**: Ajouter bouton "Démo gratuite" hero + fin page, lien vers contact.

## 5. CE QUI EST BIEN
- **Pitch économique clair**: Hero "0 EUR" impactant, funnel visuel + pricing table persuasifs (hiérarchie parfaite)[1][2].
- **Design cohérent**: Thème aix-theme + CSS moderne (grids, clamp, blur), responsive global, branding territorial fort[6].
- **Contenu adapté élus**: ROI calculette pertinente, projections chiffrées, étapes simples – aligne UX publique/citoyenne[3][9].

---

## mentions-legales.html
## Audit Page Mentions Légales - SOS Mairies

### 1. NOTE /10
**8/10**  
UX: 9/10 (structure claire, navigation intuitive). Design: 9/10 (esthétique cohérente, dark mode pro). Contenu: 7/10 (complet mais manques obligatoires). Technique: 8/10 (HTML valide, responsive).

### 2. BUGS ou erreurs
- **Accents manquants** : "Mentions legales" → "Mentions légales" (titre head/body) ; "numerique" → "numérique" ; "donnees" → "données" (multiples) ; "Hebergeur" → "Hébergeur" ; "proteges" → "protégés".
- **Adresse éditeur incomplète** : "Paris, France" sans rue/numéro/code postal (obligatoire pour entrepreneur individuel)[1][3][4].
- **Numéro téléphone manquant** : Absent pour éditeur (obligatoire)[3][4][6].
- **Script externe** : `js/ip-protection.js` sans fallback (risque 404 si manquant).
- **Date footer** : "mars 2026" (anachronique vs date actuelle 2026, mais OK si prévisionnel).

### 3. PROBLÈMES UX
- **Lisibilité mobile** : Texte petit (13px/12px), faible contraste sur fond sombre (risque <4.5:1 WCAG AA).
- **Accessibilité** : Pas d'attributs `aria-label` sur numéros sections ; pas de `lang` sur listes ; bouton retour sans `role="button"`.
- **Navigation** : Lien retour fixe en bas (perdu sur mobile long scroll) ; pas de table des matières ou ancre rapide.
- **Responsive** : Padding OK mais max-width 760px trop étroit sur tablette.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter accents + infos obligatoires** : Corriger tous accents ; compléter adresse éditeur (ex: "12 rue Exemple, 75001 Paris") + ajouter tél (ex: "01 23 45 67 89")[1][3].
2. **Améliorer accessibilité** : Ajouter `aria-labelledby` sur sections ; `min-contrast` CSS ; media query pour font-size mobile (`clamp(14px, 2vw, 16px)`).
3. **Optimiser mobile** : Sticky bouton retour (`position: sticky; bottom: 20px;`) ; table des matières cliquable en haut.
4. **Contenu légal** : Ajouter SIREN/SIRET (obligatoire EI)[2][3] ; numéro tél hébergeur (obligatoire)[4][9].
5. **Performance** : Inline script ou lazy-load `ip-protection.js` ; ajouter `<link rel="preconnect" href="cloudflare">`.

### 5. CE QUI EST BIEN
- **Design cohérent** : Thème dark pro, gradients subtils, numérotation visuelle engageante.
- **Contenu exhaustif** : Couvre RGPD, PI, hébergeur avec refs légales précises (au-delà du minimum)[1][5].
- **Structure sémantique** : Sections logiques, responsive viewport, SEO-ready (head/title).

---

## onboarding.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** – Solide base visuelle et structure wizard, mais bugs et UX perfectible freinent l'expérience.

## 2. BUGS ou erreurs
- **HTML tronqué**: Code coupé à `<span class="toggl` (fin de question 15) – page incomplète, JS probablement cassé.
- **Classes manquantes**: `.form-input`, `.form-select`, `.toggle`, `.q-input`, `.q-toggle`, `.q-radio`, `.q-multi` non stylées inline (dépendent de `mairie-theme.css` absent).
- **Progress bar incomplète**: `<div class="progress-bar">` et `#progressBar` sans styles CSS définis.
- **Liens navbar**: `index.html`, `demo.html` risquent d'être cassés sans ces fichiers.
- **Accents OK**, mais `Departement` → **Département**; `Kreiz-Breizh` OK (breton).
- **HTML invalide**: `<div class="progress-bar">` sans fermeture propre; animation `fadeInUp` non définie.

## 3. PROBLÈMES UX
- **Mobile**: Padding `16px` trop faible sur petits écrans; `max-width:700px` OK mais inputs/select longs (dépt.) débordent sans wrap.
- **Navigation**: Pas de boutons `.wizard-nav` visibles dans le code (seulement CSS); pas de "Suivant/Précédent" pour avancer blocs.
- **Accessibilité**: Pas d'`aria-label`/`aria-describedby` sur inputs; contrastes OK mais focus states manquants; keyboard nav pour checkboxes non géré.
- **Lisibilité**: 100 questions annoncées = fatigue; numérotation "1/100" démotive[1].
- **Onboarding long**: Pas de preview/sauvegarde progressive; toggles/checkboxes sans validation immédiate[1][2].

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Compléter HTML/JS**: Ajouter boutons nav, logique wizard (avancer blocs, progress), valider inputs avant next[1].
2. **Progress simplifié**: Réduire à 5-7 étapes max; ajouter save draft/auto-save pour réduire abandon[1][4].
3. **Mobile-first**: `padding: clamp(16px,5vw,24px)`; select dépt. en searchable dropdown (ex: Choices.js).
4. **Accessibilité**: Ajouter `aria-labelledby`, `role="radiogroup"` pour checkboxes, `required` + erreurs inline.
5. **Validation temps réel**: Feedback vert/rouge sur inputs; estimation temps restante dynamique[1].

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème France.fr (tricolore, vars CSS), progress sticky + dots immersifs.
- **Structure wizard claire**: Blocs thématiques avec icônes/headers engageants pour élus.
- **Contenu pertinent**: Questions adaptées mairies FR (dépt., interco, signalements)[2].

---

## meteo-quartier.html
## 1. NOTE /10
**7.5/10**  
UX fluide et engageante (8/10), design cohérent (8/10), contenu pertinent (8/10), technique fonctionnelle mais perfectible (6/10). Points forts en gamification, mais lacunes a11y critiques en 2026 (RGAA AA obligatoire pour mairies)[1][2][5].

## 2. BUGS ou erreurs
- **Accents manquants** : "meteo" partout → "météo" (titre, classes, IDs).
- **HTML invalide** : `<link rel="icon">` avec SVG inline malformé (🏛️ non standard, risque rendu).
- **Liens cassés potentiels** : Dépendances externes (`js/quartier-engine.js`, `AixEngine`) non fournies ; `localStorage` écrase données sans backup.
- **Scripts** : `AixEngine` non défini → crash au submit ; timer à 90s mais affichage "90s" statique.
- **Mobile** : Slider range sans `step="1"` peut bugger sur iOS.

## 3. PROBLÈMES UX
- **Accessibilité critique** (non RGAA AA) : Pas d'`alt` sur icônes Lucide, sliders sans `aria-label`/`aria-valuetext`, boutons sans `role="button"`, navigation clavier impossible (z-index navbar), contrastes variables ( `--aix-text-muted`), pas de `prefers-reduced-motion`, absence déclaration a11y[1][2][4].
- **Navigation** : Pas de bouton "Précédent" dans dims ; timer punitif sans pause/redo.
- **Lisibilité mobile** : Grilles quartiers/emojis sans wrap responsive ; slider labels trop petits (12px).
- **Feedback** : Pas de validation emoji avant submit ; résultat basé sur données fictives non chargées.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `aria-label` sliders/boutons, `role="slider"`, `alt` icônes, `nav` landmark, `@media (prefers-reduced-motion)`, déclaration a11y footer[1][2][4].
2. **Responsive** : `.quartier-grid`, `.emoji-grid` → CSS Grid avec `grid-template-columns: repeat(auto-fit, minmax(150px,1fr))`; slider labels ≥14px.
3. **Bouton Précédent** : Ajouter dans `screen-dims` : `if(currentDim>0) currentDim--; showDim();`.
4. **Timer UX** : Pause au focus input ; alerte 10s ; `step="1"` sur slider.
5. **Fallback data** : Vérif `if(!AixEngine) { /* mock data */ }` pour éviter crash submit.

## 5. CE QUI EST BIEN
- **Flow gamifié** : Timer 90s + progress dots + sliders intuitifs → engagement élevé (évaluation quartier rapide).
- **Design cohérent** : Thème `--aix-*` vars, animations fluides, mobile-first (viewport, max-width).
- **Structure sémantique** : Écrans modulaires, localStorage persistant, CTA clairs (boutons pill).

---

## mentions-legales.html
# Audit UX/UI - Mentions légales SOS Mairies

## NOTE GLOBALE: 6.5/10

- **UX:** 6/10 – Structure claire mais problèmes d'accessibilité
- **Design:** 7/10 – Esthétique cohérente, contraste acceptable
- **Contenu:** 5/10 – Incomplet par rapport aux obligations légales
- **Technique:** 7/10 – HTML valide, mais améliorations possibles

---

## 🐛 BUGS & ERREURS

1. **Accents manquants (caractères HTML mal encodés)**[1]
   - "legales" → "légales"
   - "Conformement" → "Conformément"
   - "l'economie numerique" → "l'économie numérique"
   - "Editeur" → "Éditeur"
   - Répété tout au long du document

2. **Email incorrect**
   - Contact: `contact@sos-toutou.fr` (incohérent avec "SOS Mairies" – semble être un copier-coller d'un autre projet)

3. **Informations incomplètes ou inexactes**
   - Adresse éditeur: "Paris, France" (trop vague – obligatoire d'avoir l'adresse complète)
   - Numéro INPI: "DSO2024-XXXXXX" (placeholder non remplacé)
   - Référence RGPD correcte mais **manque le DPO** (Délégué à la Protection des Données) si applicable[6]

---

## ⚠️ PROBLÈMES UX/ACCESSIBILITÉ

1. **Contraste insuffisant sur mobile**
   - Texte gris clair (rgba 0.6) sur fond très sombre → **score WCAG AA échoué** sur petits écrans
   - Les titres en petites majuscules (14px) sont difficiles à lire

2. **Pas de table des matières (anchor links)**
   - Impossible de naviguer rapidement vers une section spécifique
   - Page trop longue pour un mobile sans sauts

3. **Pas de "dernière mise à jour" visible en haut**
   - Utilisateurs ne savent pas immédiatement si c'est à jour
   - Actuellement caché en footer

4. **Lien "js/ip-protection.js" chargé mais non documenté**
   - Qu'est-ce que ce script fait ? Pourquoi ne pas le mentionner en section RGPD ?

5. **Pas de lien vers la politique de confidentialité**
   - Obligatoire selon les sources[2][4] – doit être distinct des mentions légales

---

## 🔧 AMÉLIORATIONS PRIORITAIRES (max 5)

### 1. **[CRITIQUE] Ajouter la Politique de Confidentialité (lien séparé)**[2][4]
   - Créer `politique-confidentialite.html`
   - Ajouter un lien explicite dans le footer et la section RGPD
   - **Raison:** Les sources indiquent que CGU/politique de confidentialité sont OBLIGATOIRES et doivent être distinctes

### 2. **[HAUTE] Corriger tous les accents & caractères spéciaux**
   - Remplacer `°` par le caractère Unicode correct
   - Utiliser les entités HTML ou l'UTF-8 natif systématiquement
   - Valider avec un checker HTML5

### 3. **[HAUTE] Compléter les informations légales manquantes**[1][2][5][6]
   - Adresse complète de l'éditeur (code postal, rue)
   - Numéro de SIRET/SIREN si entrepreneur individuel
   - Responsable de la rédaction (peut être Emmanuel Klein)
   - **Mention RSGP** (Responsabilité Sociétale des Entreprises) si applicable depuis décembre 2024[4]

### 4. **[MOYENNE] Améliorer l'accessibilité des couleurs**
   - Augmenter le contraste du texte gris (passer de 0.6 à 0.8+ opacity)
   - Tester avec outils WCAG (axe DevTools, Lighthouse)
   - Augmenter font-size minimum à 14px sur mobile

### 5. **[MOYENNE] Ajouter table des matières avec ancres**
   - Liens cliquables vers chaque section
   - Format: `#section-1`, `#section-2`, etc.
   - Aide navigation sur desktop et mobile

---

## ✅ POINTS FORTS

1. **Structure logique et numérotée** – Sections bien organisées, facile à scanner[7]
2. **Design cohérent & professionnel** – Palette minimaliste et gestion d'espaces correcte
3. **Couverture RGPD/CNIL solide** – Clauses Contractuelles Types, droit à l'oubli, CNIL mentionnés[6]

---

## parrainage.html
## 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7.5/10** (Design chaleureux et responsive, mais lacunes a11y et JS incomplet).

## 2. BUGS ou erreurs
- Code JS tronqué: `FILLEULS` incomplet (`{ id: 'F4', name: 'Fatima', age` → crash `profileList`).
- Accents manquants: `"apprend a utiliser"`, `"annees 60"`, `"deborder"` (à corriger en `à`, `années`, `débordé`).
- HTML invalide: `“`/`”` (guillemets typographiques) non standards ; balises `<i data-lucide>` sans `alt`/`aria-label`.
- Liens internes OK, mais `js/quartier-engine.js` non fourni (risque 404).
- Footer lien `parrainage.html` vers lui-même (auto-référence inutile).

## 3. PROBLÈMES UX
- **Accessibilité critique (RGAA 2026)**: Pas d'`alt` sur icônes Lucide, contrastes non vérifiés (ex: gold sur blanc), formulaires sans `aria-label`/erreurs claires, navigation clavier incomplète (tabs JS sans `role="tablist"`). Obligatoire pour mairies[1][2][3].
- **Mobile**: Grid OK mais cards trop denses (300px min → squeeze sur petits écrans).
- **Navigation**: Tabs JS sans fallback (désactivé JS = contenu vide) ; compteur statique `#totalParrainages`.
- **Formulaire**: Pas de validation côté client, checkbox sans `name`, submit sans confirmation/loading.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Fix JS + a11y**: Compléter `FILLEULS`, ajouter `role="tablist"`, `aria-selected`, `alt` sur icônes, `aria-label` formulaires. Tester clavier (WCAG AA)[2].
2. **Form validation**: Ajouter `required`, messages d'erreur (`invalid`), loading spinner sur `register()`.
3. **Contrastes/typo**: Vérifier WCAG AA (outils comme WAVE) ; min 14px body, focus visible sur buttons.
4. **Mobile perf**: Cards à `minmax(280px,1fr)` ; lazy-load profils si >20.
5. **SEO/Perf**: `<main>`, schema.org pour profils ; minifier CSS/JS inline.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème Provence chaleureux, hover fluides, responsive grid/media queries.
- **Contenu engageant**: Témoignages authentiques, stats motivantes, formulaire intuitif.
- **Structure sémantique**: Hero clair, sections logiques, CSS vars modernes (facilement thémable).

---

## mon-quartier.html
### 1. NOTE /10
**8/10** (UX: 8.5, Design: 8.5, Contenu: 8, Technique: 7.5). Solide dashboard responsive, mais lacunes accessibilité et polish technique.

### 2. BUGS ou erreurs
- Accents manquants: "Selectionnez" → "Sélectionnez" (l.215), "pres de chez vous" → "près de chez vous" (l.58).
- HTML invalide: `<i data-lucide="...">` sans `aria-hidden="true"` (risque lecteurs d'écran), select sans `<option>` initiale visible.
- Liens potentiellement cassés: `commerces.html`, `associations.html`, `meteo-quartier.html` non vérifiés (erreur 404 probable).
- JS: Dépendance `AixEngine` non fournie (erreur runtime si absente).

### 3. PROBLÈMES UX
- **Accessibilité critique** (non conforme RGAA/WCAG AA 2026 pour mairies[1][2][5]): Pas d'`alt` sur icônes SVG favicon/hero, contrastes variables (ex. bleu clair sur fond), select sans `aria-label`, navigation clavier partielle (btn sans focus visible), absence déclaration accessibilité.
- Lisibilité mobile: Grid OK mais textes 13px trop petits (WCAG 2.2: min 16px recommandé[3]), cibles tactiles btn-sm <44px.
- Navigation: Navbar + tab-bar redondants (fatigue cognitive), pas de Breadcrumbs pour contexte quartier.
- État vide: Prompt select non ARIA-live pour annonces dynamiques.

### 4. AMÉLIORATIONS concrètes (priorité décroissante)
1. **Accessibilité RGAA**: Ajouter `aria-label` sur select (`aria-label="Choisir un quartier"`), `alt="" aria-hidden="true"` sur icônes Lucide, `role="status" aria-live="polite"` sur #quartierDash, tester contrastes (outil WAVE)[1][3].
2. **Mobile/Responsive**: Augmenter font-size mini-item à 14px min, padding btn-sm à 44px (WCAG 2.2 tactiles[3]), media-query pour score-header stack vertical <500px.
3. **Corrections rapides**: Fix accents, ajouter fallback JS `if (!AixEngine) { /* loader */ }`, vérifier/exister pages liées.
4. **Perf/SEO**: Lazy-load Lucide JS, `<main>` landmark sur #quartierDash, meta `description` pour quartier.
5. **UX flow**: Auto-sélection géoloc (navigator.geolocation) ou quartier par défaut, loading spinner sur loadQuartier().

### 5. CE QUI EST BIEN
- **Dashboard intuitif**: Grid responsive, score visuel immédiat, liens contextuels vers sections app (ex. "Voir tout").
- **Design cohérent**: Thème Provence (gradients, vars CSS), icônes Lucide modernes, état vide engageant.
- **JS fonctionnel**: Persistance localStorage, données démo dynamiques, intégration fluide sans lag.

---

## meteo-quartier.html
## 1. NOTE /10
**8/10** (UX fluide et engageante, design cohérent, contenu pertinent ; pénalités pour accessibilité et bugs mineurs).

## 2. BUGS ou erreurs
- Accents manquants : "meteo" → "météo" partout (titre, classes CSS, IDs).
- HTML invalide : `<link rel="icon">` avec SVG inline mal formé (`🏛️` non standard).
- Scripts dépendants (`AixEngine.DIMENSIONS`, etc.) non fournis → risque d'erreurs JS runtime.
- `localStorage` sans gestion d'erreurs (quota dépassé).
- Labels slider faux : "Tres mauvais" (3 boutons pour 1-5) → incohérent.

## 3. PROBLÈMES UX
- **Accessibilité critique** (non RGAA AA 2026 pour mairies [1][2][5]) : sliders sans `aria-label`, boutons sans labels clavier, icônes sans `alt`/ARIA, contrastes variables ( `--aix-text-muted`), pas de `prefers-reduced-motion`, navigation tab-bar non focusable.
- Lisibilité mobile : timer fixed top chevauche navbar (z-index 998), textes petits (13px).
- Navigation : pas de bouton "Précédent" dans dimensions, timer non pausable.
- Inclusive : emojis non textuels, couleurs seules pour états (progress-dots).

## 4. AMÉLIORATIONS concrètes (priorité décroissante)
1. **Accessibilité RGAA** : Ajouter `aria-label` sur sliders/boutons, `role="slider" aria-valuenow`, landmarks ARIA (`<main>`, `<nav aria-label="principale">`), déclarer accessibilité [1][2].
2. **Corriger accents/bugs** : "météo" partout, fixer favicon SVG, valider HTML (W3C), gérer erreurs JS/localStorage.
3. **Mobile/timer** : Timer z-index > navbar, bouton pause, tailles min 16px (WCAG 2.2 [3]).
4. **Navigation** : Ajouter "Précédent", indicateur step clair (ex: "Dimension 1/6").
5. **Slider** : 5 labels (1:Très mauvais, 2:Mauvais, 3:Moyen, 4:Bon, 5:Excellent).

## 5. CE QUI EST BIEN
- **Flow intuitif** : Écrans progressifs (quartier → dims → question → résultat) avec timer engageant.
- **Design moderne** : Thème cohérent (CSS vars, animations fluides), responsive container.
- **Engagement citizen** : Résultats comparatifs visuels (bars, score), stockage local pour retours.

---

## pitch-paris10.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 8/10** | **Technique: 6/10**  
**Note globale: 7.25/10** – Page pitch efficace, responsive, mais lacunes a11y et fin tronquée.

## 2. BUGS ou erreurs
- **Code HTML tronqué**: Fin abrupte à `<div style="margin-top:var(--sp-3xl);padding:var(--sp-xl);background:var` (section CTA incomplète).
- **Accents manquants**: "elus" → "élus", "frustres" → "frustrés", "repond" → "répond", "deploiement" → "déploiement".
- **Icônes Lucide non chargées**: `<i data-lucide="...">` sans script d'initialisation (icônes absentes).
- **QR statique faux**: SVG décoratif, pas un vrai QR scannable vers `sos-mairies.pages.dev`.
- **Classes manquantes**: `.btn`, `.text-center`, `.text-muted` référencées sans définition (dépendance `aix-theme.css`).
- **HTML invalide**: `<p class="text-center text-muted">` (double classe sans guillemets corrects).

## 3. PROBLÈMES UX
- **Navigation fixe opaque**: Barre `pitch-nav` bloque contenu sur mobile (z-index OK mais padding insuffisant).
- **Lisibilité mobile**: Textes fins (12-14px) + espacements variables = zoom forcé; hero `min-height: 100vh` trop haut.
- **Accessibilité faible** (non-RGAA AA 2026): Pas d'`alt` sur icônes/SVG QR, contrastes limites (ex: blanc/bleu foncé ~4.2:1), pas de `aria-label` liens, structure sans `main`/`article`, navigation clavier partielle[1][2][3].
- **Pas de focus visible**: Liens/hover sans `:focus` stylé.
- **Scroll infini**: Pas de footer ou ancre retour haut.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger fin HTML + accents**: Compléter CTA, ajouter script Lucide (`<script src="lucide.js" data-defer></script>`), générer vrai QR via JS (qrcode.js).
2. **Accessibilité RGAA AA**: Ajouter `alt` icônes, `aria-label` nav/CTA, `role="img"` QR, contrasts >4.5:1, `lang="fr"` sections, landmark `<main>`[1][2][3].
3. **Mobile-first**: `font-size: clamp()` partout, réduire hero à `70vh`, boutons tactiles ≥44px[5].
4. **CTA fort**: Remplacer lien générique par bouton tracké (`data-event="demo-open"`), ajouter modale preview app.
5. **Perf**: Lazy-load CSS/JS, compresser SVG QR, ajouter `<meta name="robots" content="noindex">` (page pitch).

## 5. CE QUI EST BIEN
- **Structure pitch claire**: Hero → Problème → Solution → Impact → CTA (flow persuasif élus).
- **Design responsive moderne**: Grilles CSS auto-fit, gradients, clamp() scalables, print media.
- **Contenu impactant**: Stats chiffrées, zéro coût mis en avant, adapté mairies (propreté/solidarité).

---

## mon-quartier.html
### 1. NOTE /10
**8/10** (UX: 8.5, Design: 8.5, Contenu: 8, Technique: 7.5). Design moderne et responsive, UX intuitive pour app mairies, mais lacunes accessibilité (RGAA obligatoire pour collectivités[1][4]) et petits bugs techniques.

### 2. BUGS ou erreurs
- **Accents manquants** : "Selectionnez" → "Sélectionnez" (l.125, l.134) ; "pres de chez vous" → "près de chez vous" (l.57).
- **HTML invalide** : `<i data-lucide>` sans `aria-hidden="true"` (risque lecteurs d'écran) ; `<select>` sans options initiales chargées (JS critique).
- **Liens cassés potentiels** : `commerces.html`, `associations.html`, `meteo-quartier.html` non vérifiés ; `AixEngine` non défini (dépendance `quartier-engine.js`).
- **JS erreurs** : `alert()` en prod (demo only) ; `q.maire.charAt(0)` crash si `undefined`.

### 3. PROBLÈMES UX
- **Accessibilité (RGAA non-conforme[1][2][4])** : Pas d'`alt` sur icônes SVG favicon ; `<select>` sans `aria-label` ; contrastes non garantis (vars CSS) ; pas de `prefers-reduced-motion` ; navigation clavier partielle (btn sans focus visible).
- **Mobile** : Grid OK à 700px, mais textes 13px trop petits (WCAG 2.2: 24px cibles tactiles[3]) ; tab-bar surchauffe 5 items.
- **Navigation** : Double nav (navbar + tab-bar) redondante ; lien "active" sur navbar et tab-bar sans ARIA.
- **Lisibilité** : Score circle JS sans fallback ; états vides ("Aucun") sans CTA fort.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `aria-label` sur `<select>`/icônes ; `role="img" aria-label` sur Lucide ; tester contrastes (outil RGAA[1]) ; landmarks ARIA (`<main>`, `<nav aria-label="principale">`).
2. **Corrections accents/bugs** : Fix "Sélectionnez/près" ; remplacer `alert()` par modal toast ; valider `AixEngine` avec try/catch.
3. **Mobile/Responsive** : Augmenter font-size mini-item à 14px min ; réduire tab-bar à 4 items (dropdown 5e) ; ajouter `touch-action: manipulation`.
4. **Performances** : Lazy-load `quartier-engine.js` ; pré-remplir `<select>` côté serveur ; compresser gradient hero.
5. **Contenu** : Ajouter bouton géoloc auto ("Détecter mon quartier") ; lien "Évaluer" vers formulaire structuré.

### 5. CE QUI EST BIEN
- **Design cohérent** : Thème aix (vars CSS), hero gradient immersif, cards arrondies modernes.
- **UX personnalisée** : Sélecteur quartier + score comparatif + élu direct (idéal pour mairies/élus).
- **Responsive grid** : Dash 2-col → 1-col fluide ; localStorage persistant.

---

## preview-app.html
## 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7.5/10** (Design mobile premium, UX fluide, mais lacunes a11y et code incomplet).

## 2. BUGS ou erreurs
- **Code HTML tronqué**: CSS coupé à `.budget-card` (manque de fermeture), rendant la page invalide.
- **HTML invalide probable**: Absence de `<body>`, structure incomplète (pas de contenu JS/données), balises manquantes pour icônes SVG.
- **Accents/typo**: Aucun accent manquant visible, mais `lang="fr"` OK.
- **Viewport excessif**: `user-scalable=no,maximum-scale=1` bloque zoom (violation WCAG 1.4.4, RGAA critère 10.2)[1][2].

## 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA/EAA 2026 obligatoire pour mairies[1][4]): Pas d'`alt` sur SVG/icônes, contrastes non vérifiés (ex: `--text3` #9ca3af sur `--bg` #f2f2f7 faible), navigation clavier absente (`.tab-item`, `.mod-card` sans `:focus`), formes sans `label`/`aria-label` (`.sf-input`), pas de `prefers-reduced-motion`.
- **Lisibilité mobile**: Police Inter OK, mais tailles petites (ex: tabs 10px), sur iPhone safe-area mal gérée hors frame.
- **Navigation**: Modals `.detail-screen` sans trap focus/escape, tabs sans `role="tablist"`, surcharge visuelle (trop de cards).
- **Performance**: `overflow:hidden` sur `html/body` bloque scroll natif, Google Fonts sans `media=print`.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter accessibilité RGAA** (priorité #1, légal pour mairies[1][4]): `alt` sur tous SVG, `aria-label` sur boutons/icônes, `role="tab"` sur tabs, contrastes >4.5:1 (tester WCAG), `lang="fr"` sur inputs.
2. **Compléter/fixer code**: Fermer CSS, ajouter `<body>` avec tabs actifs/JS basique, valider HTML (W3C).
3. **Optimiser viewport**: Retirer `user-scalable=no` pour zoom a11y[2][3].
4. **Améliorer formes signalement**: Ajouter `<label for="id">`, validation client/erreurs visibles, `autocomplete`.
5. **Réduire densité**: Espacer grid modules (gap:16px), lister 6-8 max par écran.

## 5. CE QUI EST BIEN
- **Design iOS-native premium**: Frame phone réaliste, ombres/subtiles, animations fluides (fadeIn/slideIn), couleurs cohérentes (--c1 bleu mairie).
- **Responsive parfait**: Media queries précises (375px iPhone), safe-area, scroll fluide.
- **UX intuitive pour élus**: Cards tactiles (scale on tap), hiérarchie claire (alerts > modules > services), météo/cantine contextualisées.

---

## monetisation-mairie.html
# Audit UX/UI — monetisation-mairie.html

## Note globale: 6.5/10

- **UX**: 6/10 – Navigation claire mais manque d'accessibilité critique
- **Design**: 7/10 – Cohérent, mais lourd sur mobile
- **Contenu**: 7/10 – Message fort, mais peu scannable
- **Technique**: 6/10 – HTML valide mais problèmes d'accessibilité

---

## Bugs et erreurs

| Problème | Sévérité | Détail |
|----------|----------|--------|
| HTML incomplet | Critique | Section `guarantee-section` fermée abruptement (`</div>` manquant) |
| Accents manquants | Majeure | "economique" → "économique", "elus" → "élus", "cout" → "coût", "integree" → "intégrée" |
| Liens cassés potentiels | Majeure | `href="index.html"` et `href="pitch-paris10.html"` non testés |
| Icons Lucide non chargées | Majeure | Aucune référence à la librairie `lucide-icons` – les icônes n'affichent pas |
| Attribut `id="roiResult"` orphelin | Mineure | `display:none` initial – JavaScript `calcROI()` non fourni |

---

## Problèmes UX prioritaires

**1. Accessibilité insuffisante (WCAG violation)[8]**
- Pas d'attributs `aria-label`, `aria-describedby` sur les éléments interactifs
- **Inputs du calculateur** sans `<label>` associée (`for=""`), juste du texte CSS
- Contraste insuffisant sur `.pitch-nav a` (rgba 80% sur fond semi-transparent)
- Pas de `role="button"` sur `onclick` ou structure sémantique

**2. Expérience mobile défaillante (mobile-first manquant)[8]**
- `.funnel` passe à `minmax(180px, 1fr)` mais peu testé en <375px
- `.guarantee-grid` devient trop dense sur petit écran (4 cartes en colonne)
- Padding `var(--sp-lg)` trop agressif sur mobile → texte écrasé
- Navigation fixe `.pitch-nav` interfère avec contenu hero

**3. Hiérarchie d'information faible[1]**
- Page trop longue (8 sections) sans véritable scanabilité
- Les 4 étapes "How it works" manquent de visuels ou d'icônes
- Sections financières (revenus/coûts) peu mises en avant malgré importance

**4. Lisibilité du contenu[6]**
- Lignes de texte longues (100% width) → fatigue de lecture
- Police non spécifiée dans les `<p>` inline
- Manque de "respirabilité" visuelle (espacements irréguliers)

**5. Crédibilité compromise**
- ROI Calculator non fonctionnel (pas de JS)
- Aucune mention légale, RGPD, conditions d'utilisation
- "~500 commerces" et "90 000 habitants" sans sources

---

## Améliorations prioritaires

### 1️⃣ **Fixer les accents et compléter le HTML** (Critique)

Zéro publicité intrusive

Pas de bannières, pas de pop-ups. Juste un annuaire local utile aux habitants.


Inclure la librairie Lucide ou remplacer par emojis.

### 2️⃣ **Améliorer l'accessibilité (WCAG AA)[8]**

Appels évités par jour

.pitch-nav a { color: white; / au lieu de rgba 0.8 / }



### 3️⃣ **Adapter la structure mobile et aérer le contenu**

@media (max-width: 768px) {

.funnel { grid-template-columns: 1fr; gap: var(--sp-md); }

.guarantee-grid { grid-template-columns: repeat(2, 1fr); }

.pitch-nav { flex-direction: column; gap: var(--sp-sm); }

.biz-section { padding: var(--sp-2xl) var(--sp-md); }

body { line-height: 1.8; / meilleure respiration / }

}



### 4️⃣ **Implémenter le calcul ROI (JavaScript manquant)**

function calcROI() {

const calls = parseFloat(document.getElementById('roiCalls').value) || 0;

const duration = parseFloat(document.getElementById('roiDuration').value) || 1;

const hourly = parseFloat(document.getElementById('roiHourly').value) || 25;

const days = parseFloat(document.getElementById('roiDays').value) || 230;

const minutesPerDay = calls * duration;

const hoursPerYear = (minutesPerDay * days) / 60;

const savings = hoursPerYear * hourly;

document.getElementById('roiResult').style.display = 'block';

document.getElementById('roiValue').textContent = savings.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR' });

document.getElementById('roiDetail').textContent = ${hoursPerDay.toFixed(1)}h économisées/jour × ${days} jours × ${hourly}€/h;

}



### 5️⃣ **Ajouter mentions légales et clarifier les garanties**



---

## Points forts ✓

1. **Message clair et unique** — "0 EUR pour la mairie" immédiatement visible dans le hero[2]. Proposition de valeur forte et différenciée.

2. **Structure narrative logique** — Funnel → Pricing → ROI → Garanties suit une progression naturelle vers la décision (adéquation aux schémas mentaux des utilisateurs)[1].

3. **Design système cohérent** — Utilisation cohérente des variables CSS (`--sp-*`, `--aix-*`), couleurs institutionnelles (#002654), responsive intents visibles.

---

## Recommandations complémentaires

- Tester avec lector d'écran (NVDA/JAWS) pour WCAG AA compliance[8]
- Ajouter **wireframes ou

---

## monetisation-mairie.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 8/10** | **Technique: 6/10**  
**Note globale: 7.25/10** – Solide pitch commercial, responsive et visuellement attractif, mais freiné par bugs et lacunes accessibilité.

## 2. BUGS ou erreurs
- **HTML invalide**: Balise `<p>` non fermée dans `.guarantee-card` dernière (ligne ~320: `<p>Pas de bannieres... </p>` manquant).
- **Accents manquants**: "Modele" → "Modèle"; "elus" → "élus"; "MaVille App" → "MaVille App"; "10e" → "10ᵉ"; multiples fautes ("cotisation", "deploiement", "commercants").
- **Liens cassés potentiels**: `href="index.html"`, `pitch-paris10.html` – non vérifiables sans contexte, mais nav fixe suppose existants.
- **JS manquant**: `onclick="calcROI()"` et `#roiResult` sans script → calculateur inopérant.
- **Icônes Lucide**: `<i data-lucide>` sans script Lucide → icônes non rendues.

## 3. PROBLÈMES UX
- **Navigation**: Nav fixe masque contenu sur scroll mobile; pas de menu principal ni breadcrumbs pour mairies/élus.
- **Lisibilité mobile**: Texte dense (hero/sub), petits fonts (14px); funnel arrows cachées <600px mais grid OK; calculateur grid 1fr 1fr casse sur petits écrans.
- **Accessibilité**: Pas d'attributs ARIA (boutons, formulaire); contrastes limites (blanc/bleu foncé); pas WCAG (labels forms OK mais inputs sans `aria-describedby`); icônes sans `alt`[1][3].
- **Performance**: Styles inline + externe; backdrop-filter lourd sur mobile.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger HTML/JS**: Fermer balise, ajouter script Lucide/ROI, valider W3C.
2. **Accessibilité WCAG**: Ajouter `aria-label` nav/boutons, `alt` icônes, focus visibles, contrastes >4.5:1[1][3].
3. **Mobile**: Rendre calculateur stack vertical (`@media (max-width: 600px) { grid-template-columns: 1fr; }`), agrandir taps (48px min).
4. **Navigation**: Ajouter bouton "Contact/CTA" sticky bottom; hiérarchie claire (H1-H4 cohérents).
5. **Contenu**: Corriger fautes, ajouter mentions légales (obligatoire commune: éditeur, hébergeur)[2].

## 5. CE QUI EST BIEN
- **Design moderne**: Gradients, cards, couleurs cohérentes (#002654/#27AE60), responsive grid/auto-fit – pro et engageant[7].
- **Pitch efficace**: Hero "0 EUR" impactant, funnel visuel, ROI interactif (malgré bug) – guide élu vers décision[9].
- **Structure logique**: Sections thématiques (funnel → pricing → revenus → étapes) avec hiérarchie visuelle claire[5].

---

## proposition.html
## Audit UX/UI - proposition.html (SOS Mairies)

### 1. NOTE /10
**UX: 6/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 5/10**  
**Note globale: 6.5/10** (Design premium mais accessibilité critique pour mairies + code incomplet)

### 2. BUGS ou erreurs
- **CSS tronqué**: Règle `.chat-lang button` incomplète (`border-radius` coupé) → layout cassé.
- **HTML incomplet**: Pas de `<body>` fourni → impossible valider structure (liens JS/CSS externes OK).
- **Liens externes non sécurisés**: Google Fonts/CloudFlare sans `rel="preconnect"` → chargement lent.
- **Emoji favicon**: `🏛️` peut casser sur anciens navigateurs.
- **Pas d'accents manquants** dans le code visible.

### 3. PROBLÈMES UX
- **Accessibilité RGAA 2026 critique** (mairies = secteur public obligatoire 80% conformité)[1][2][5]:
  - **Aucun `alt` sur images/ico** (critère 1.3 RGAA).
  - **Contraste insuffisant**: `--chrome (#C0C0C0)` sur `--bg (#0A0A0F)` = 8.5:1 OK, mais `.text-muted (#6B7280)` = 5.8:1 (échec critère 3.1).
  - **Pas de `role`/`aria-*`** sur modales/chat/accordéons (critères 7/12).
  - **Navigation clavier absente**: `.cat-header`, `.mc-card` sans `:focus-visible`.
  - **Structure sémantique faible**: Pas de `<main>`, `<section aria-labelledby>`.
- **Mobile**: `clamp()` OK mais grid catalogue trop dense (340px min → 1-colonne OK, mais chips trop petites).
- **Performance**: 3 fontes + jsPDF + glassmorphism lourd sur mobile.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** (priorité #1 2026): Ajouter `alt` toutes images, `aria-expanded` accordéons, `role="dialog"` modales, contraste ≥ 4.5:1 partout[1][2].
2. **Compléter CSS/Body**: Finir `.chat-lang`, ajouter `<main>`, tester validateur W3C.
3. **Optimiser perf**: Lazyload jsPDF, préconnecter CDN, réduire à 2 fontes (Inter + Playfair).
4. **Mobile UX**: Chips catalogue `min-width: 120px`, boutons ≥ 44px touch targets.
5. **Déclaration RGAA**: Ajouter lien "Accessibilité" footer avec conformité 80%+[1].

### 5. CE QUI EST BIEN
- **Design glassmorphism premium**: Thème or/noir cohérent, animations fluides (shimmer/pulse).
- **Responsive avancé**: `clamp()`, grid auto-fill, hero adaptatif.
- **Interactions riches**: Chatbot, sélection modules, catalogue 345 services immersif.

---

## onboarding.html
# Audit UX/UI — SOS Mairies Onboarding

## Note Globale: 7/10

| Critère | Score |
|---------|-------|
| UX | 7/10 |
| Design | 7/10 |
| Contenu | 6/10 |
| Technique | 7/10 |

---

## 🐛 Bugs et Erreurs Détectés

- **HTML incomplet**: Le code est tronqué à la question 15 (balise `toggl` cassée, pas de fermeture `</body>` ni `</html>`)
- **Accents manquants**: "Téléphone" écrit "Telephone", "Département" écrit "Departement", "Périurbaine" écrit "Periurbaine"
- **Data invalides**: `data-q="100"` annoncé mais seulement 15 questions visibles
- **Select natif**: Pas d'accessibilité ARIA sur le sélecteur de département (très long)

---

## ⚠️ Problèmes UX/Accessibilité

- **Mobile**: Le wizard est limité à 700px max-width, risque d'être étroit sur petit écran
- **Progress unclear**: Affiche "Bloc 1/10" mais le contenu suggère bien plus de questions (annoncé 100)
- **Pas de validation**: Les champs ne valident pas avant de passer à l'étape suivante
- **Accessibilité clavier**: Les checkbox-items (.checkbox-item) ne sont pas focusables (div, pas button/input)
- **ARIA absent**: Pas d'attributs `role`, `aria-label`, `aria-current` sur les éléments interactifs
- **Color contrast**: À vérifier sur les textes gris sur fond blanc (var(--fr-grey-600))

---

## 🎯 Améliorations Prioritaires

### 1. **Compléter et corriger le HTML**
Fermer tous les éléments, ajouter les accents français, terminer le code JavaScript manquant pour la navigation inter-blocs.

### 2. **Rendre les checkboxes accessibles**
Convertir `.checkbox-item` en `<button>` ou wrapper les éléments dans `<input type="checkbox">` + `<label>` pour le clavier et lecteurs d'écran.[5]

### 3. **Clarifier la progression réelle**
Réconcilier "10 blocs" vs "100 questions". Afficher le vrai nombre d'étapes (pages) et de temps estimé (recommandé par les bonnes pratiques d'onboarding).[5]

### 4. **Valider les champs obligatoires avant navigation**
Ajouter des contraintes (ex: email, postal 5 chiffres) et désactiver "Suivant" si vides.[2]

### 5. **Optimiser mobile**
Augmenter le padding mobile, tester sur petit écran, adapter la taille des boutons (min 44px × 44px pour accessibilité tactile).

---

## ✨ Points Forts

- **Design épuré et cohérent**: Palettes de couleurs (bleu/émeraude) bien appliquées, espacement régulier
- **Structure logique du flux**: Bloc par bloc (identité → signalements), progression visuelle avec indicateurs
- **Données métier pertinentes**: Questions bien ciblées pour une mairie (maire, intercommunalité, département)

---

## onboarding.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 6/10** | **Technique: 5/10**  
**Note globale: 6.5/10** – Solide base visuelle et structure wizard, mais bugs techniques et UX incomplète freinent l'expérience.

## 2. BUGS ou erreurs
- **Code HTML tronqué**: Fin abrupte à `<span class="toggl` (question 15, toggle incomplet) – page non fonctionnelle.
- **Classes CSS manquantes**: `.form-input`, `.form-select`, `.toggle`, `.q-input`, `.q-toggle`, `.q-radio`, `.q-multi`, `.progress-bar`, `.progress-fill` non définies dans `<style>` (dépendent de `mairie-theme.css` ?).
- **Progress incomplet**: `#stepDots`, `#progressBar`, `#currentBloc`, `#progressPct` vides, pas de JS pour wizard navigation.
- **HTML invalide**: Pas de `<div class="wizard-nav">` avec boutons Suivant/Précédent ; blocs sans navigation.
- **Accents manquants**: "Departement" → "Département" ; "Intercommunalite" → "Intercommunalité".
- **Liens potentiels cassés**: Navbar pointe `index.html`, `demo.html` (non fournis).

## 3. PROBLÈMES UX
- **Navigation absente**: Pas de boutons pour passer entre blocs (10 blocs annoncés, mais statique).
- **Mobile**: Padding `16px` trop faible sur petits écrans ; select dépt trop long (scroll horizontal).
- **Accessibilité**: Pas d'`aria-label`/`aria-describedby` sur inputs ; contrastes toggles/cheboxes à vérifier (dépend CSS vars) ; numérotation "1/100" trompeuse (seulement ~15 questions visibles).
- **Lisibilité**: Questions denses (8 en bloc 1) sans validation temps réel ; hints sous-utilisés.
- **Onboarding long**: 100 questions sans estimation temps ni progression claire (vs bonnes pratiques[1][2]).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter JS wizard**: Implémentez navigation (Suivant/Précédent), validation inputs, maj progress (ex: localStorage pour sauvegarde).
2. **Compléter/comprimer select départements**: Utilisez `<datalist>` ou autocomplete JS ; groupez DOM/TOM.
3. **Améliorer mobile/accessibilité**: `min-height: 100vh` sur wizard ; ajouter `aria-current`, focus management, keyboard nav.
4. **Réduire friction**: Auto-fill code postal → dépt ; progressif disclosure (ex: toggle pour options avancées).
5. **Ajouter summary/récap**: Bloc final avec preview config + bouton "Lancer app".

## 5. CE QUI EST BIEN
- **Design cohérent**: Wizard progress sticky, cards hover, thème France tricolore – moderne et institutionnel.
- **Structure sémantique**: Blocs thématiques clairs (Identité → Signalements), icônes intuitives.
- **Responsive base**: `max-width: 700px`, flex layouts, viewport meta correcte.

---

## proprete.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** (Fonctionnel et engageant, mais lacunes en accessibilité et JS incomplet).

## 2. BUGS ou erreurs
- **Accents manquants**: "Decrivez" → "Décrivez" (x2), "proprete" → "propreté", "Dejection" → "Déjection", "nid-poule" → "nid-de-poule".
- **JS incomplet**: `switchTab()` tronqué ; carte Leaflet non initialisée (`#map` vide).
- **HTML invalide**: `<i data-lucide>` sans script Lucide ; input photo `onchange` basique sans preview.
- **Liens**: Navigation cohérente, mais pas de fallback si CSS/JS absent.

## 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA/EAA 2026 obligatoire pour mairies): Pas d'`alt` sur icônes, labels ARIA manquants (`aria-label` sur boutons/tabs), navigation clavier partielle, contrastes non vérifiés, pas de `prefers-reduced-motion`.
- **Mobile**: Grid responsive OK, mais boutons petits (cibles <24px WCAG 2.2), photo-zone tactile OK mais sans zoom/preview.
- **Navigation**: Tabs JS-only (échoue sans JS) ; pas de retour breadcrumb ; succès report sans reset form.
- **Lisibilité**: Texte 12-14px petit sur mobile ; table collectes non responsive (horizontal scroll).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA**: Ajouter `alt` icônes (`alt="Icône encombrants"`), `aria-label` boutons (`aria-label="Signaler encombrants"`), `role="tablist"` tabs, `lang="fr"` cohérent, `skip-link` nav[1][2][3].
2. **Compléter JS**: Finaliser `switchTab()` + init Leaflet (`L.map('map').setView([48.872, 2.354], 13)` avec markers faux signalements).
3. **Form responsive**: Rendre table collectes scrollable (`overflow-x:auto`), agrandir cibles tactiles (min 44px), preview photo (URL.createObjectURL).
4. **SEO/Perf**: Lazy-load Leaflet, service worker PWA, meta `description` + OpenGraph.
5. **Validation**: Ajouter validation form (requis loc/desc), loading spinner submit.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème aix-theme.css + variables CSS fluides, animations subtiles (`--ease-spring`), vert succès (#27AE60) motivant.
- **UX engageante**: Tabs intuitifs, grid signalements visuel (icônes claires), flow signalement simple (sélection → form → succès).
- **Contenu pertinent**: Stats impactantes, tableau collectes pratiques, lien officiel DansMaRue, quiz gamifié éducatif.

---

## parrainage.html
## 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7.5/10** – Design chaleureux et engageant, mais bugs techniques et UX incomplète freinent l'expérience.

## 2. BUGS ou erreurs
- **Code JS incomplet**: Array `FILLEULS` tronqué (`{ id: 'F4', name: 'Fatima', age` → crash probable de `profileList`).
- **Accents manquants**: "annees" → "années", "apres-midi" → "après-midi", "debouche" → "débordé" (cohérence avec projet français).
- **Fonctions manquantes**: `setTab()`, `register()` non définies (erreurs console, tabs/form inertes).
- **HTML invalide**: `<nav class="navbar"><div class="navbar-inner">` sans fermeture propre; `data-lucide` sans script Lucide.
- **Liens relatifs**: Dépendance `css/aix-theme.css`, `js/quartier-engine.js` (cassés si hors contexte).

## 3. PROBLÈMES UX
- **Mobile**: Grid `.profile-list` passe à 1fr OK, mais cards trop denses (56px avatar + padding xl → scroll excessif); form-row stacke bien mais checkboxes wrap mal.
- **Navigation**: Tabs non fonctionnels sans JS; pas de CTA clair pour contacter profils (seul formulaire d'inscription).
- **Accessibilité**: Pas d'`alt` sur avatars/ico; contrastes OK mais `font-size:11px` tags trop petit (WCAG AA fail); pas de `aria-label` sur checkboxes/tabs; focus invisible.
- **Lisibilité**: Témoignages longs sans hierarchy (blockquote dense); stats/counter statiques (pas engageant).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Compléter JS**: Ajouter `setTab()` pour filtrer `PARRAINS/FILLEULS` + `register()` avec validation/API mock + `populateProfileList()`.
2. **Accessibilité**: Ajouter `aria-label` tabs/checkboxes, `role="tablist"`, `alt` avatars, `min-height:1.2em` petits textes.
3. **CTA profils**: Bouton "Contacter" par card → modal avec email/tel (RGPD-compliant, lien vers formulaire sécurisé).
4. **Mobile-first**: Réduire padding cards à `--sp-lg` sur <600px; limiter checkboxes à 2/ligne avec scroll.
5. **Dynamisme**: Rendre counter/stats live (JS update); micro-interactions hover (scale + feedback).

## 5. CE QUI EST BIEN
- **Design thématique**: Gradient Provence chaleureux, avatars codés par rôle (senior/jeune/famille) – immersif et inclusif.
- **Contenu engageant**: Témoignages authentiques avec emojis/localisation – crée confiance et émotion.
- **Responsive grid**: Auto-fill profiles + stats adaptatifs – scalables pour croissance données.

---

## quartiers.html
## 1. NOTE /10
**UX: 8/10** | **Design: 8.5/10** | **Contenu: 7.5/10** | **Technique: 6.5/10**  
**Note globale: 7.7/10** (Design mobile réussi, mais a11y et bugs techniques critiques pour une app publique en 2026[1][2]).

## 2. BUGS ou erreurs
- Accents manquants: "Selectionnez" → "Sélectionnez", "evenements" → "événements", "Coeur" → "Cœur", "etudiee" → "étudiée", "Recu" → "Reçu", "il y a" (minuscule incohérente).
- HTML tronqué/invalide: `<div class="contact-info">` incomplet dans Bel Air (fin abrupte).
- Icônes Lucide non chargées: `<i data-lucide="..."></i>` sans script JS → icônes invisibles.
- Classes manquantes: `.badge`, `.btn`, `.progress-fill`, `.progress-bar` sans CSS → styles cassés.
- Liens cassés: `<a href="#">Lire le CR complet</a>` générique.
- Inline styles inconsistants (ex: `h3` sans classe).

## 3. PROBLÈMES UX
- **Accessibilité faible** (critique pour mairies 2026[1][8]): Pas d'`alt` sur émoticônes SVG favicon, contrastes non vérifiés (bleu foncé OK mais gris faibles?), navigation clavier impossible (onclick sans `role="button"`/tabindex), pas de `aria-label` sur boutons, structure sémantique faible (h3/h4 abusés sans `<section>`/`<nav>`), pas de skip links[2].
- Mobile: `user-scalable=no` bloque zoom (anti-a11y/malvoyants[2]), padding-bottom fixe ignore safe-area.
- Navigation: Contenus cachés via `display:none` sans ARIA (lecteurs d'écran voient tout[2]), pas de retour visuel clair sur vote/toast.
- Lisibilité: Texte petit (11px), surcharges sections sans espacement adaptatif.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA/WCAG AA**: Ajouter `role="tablist"`, `aria-selected` sur `.quartier-select`, `alt` émoticônes, `lang="fr"` cohérent, tester WAVE/toner[1][2]. Publier déclaration a11y.
2. **Corriger bugs techniques**: Compléter HTML Bel Air, ajouter CSS pour `.badge`/`.btn`/progress, charger Lucide JS, valider HTML (W3C).
3. **Améliorer navigation mobile**: Remplacer `user-scalable=no` par `maximum-scale=5`, ajouter swipe entre quartiers, lazy-load contenus.
4. **Contenu**: Corriger accents, dater actualités (2026 futuriste?), ajouter CTA clairs (ex: formulaire signalement direct).
5. **Perf/SEO**: Externaliser `<style>` en fichier, ajouter `<main>`, meta description, schema.org pour événements.

## 5. CE QUI EST BIEN
- **Design cohérent/mobile-first**: Thème France bleu, grid responsive, animations subtiles, bottom-nav sticky intuitive.
- **Contenu pertinent/localisé**: Sections thématiques riches (actualités, budgets, contacts) adaptées aux mairies françaises.
- **Interactions engageantes**: Sélecteurs quartiers visuels (hover, active), budget participatif gamifié avec barres/votes.

---

## parrainage.html
# Audit UX/UI — parrainage.html (SOS Mairies)

## Note globale: 7.5/10

| Critère | Score |
|---------|-------|
| **UX** | 7/10 |
| **Design** | 8/10 |
| **Contenu** | 8/10 |
| **Technique** | 6/10 |

---

## 🐛 Bugs et erreurs techniques

1. **HTML incomplet** — La balise `<div class="form-group">` pour "Fatima" est coupée (`{ id: 'F4', name: 'Fatima', age`) → données manquantes.
2. **Accents manquants** — Plusieurs entités HTML mal échappées (`etudes`, `ratatouille`, `societe` devraient utiliser des accents directs ou des entités correctes).
3. **Pas de validation HTML** — Attributs `onclick` utilisés (dépréciés) ; utiliser des `data-*` et l'événementiel JS moderne.
4. **Icônes Lucide non chargées** — Aucun script `<script src="lucide..."></script>` inclus → les icônes ne s'afficheront pas.
5. **Script `quartier-engine.js` manquant** — Les fonctions `setTab()` et `register()` ne sont pas définies → page non fonctionnelle.

---

## ⚠️ Problèmes UX

### Accessibilité & Mobile
- **Contraste insuffisant** — Texte doré sur fond clair (`.parrain-tag` et `.stat-mini`) → WCAG AA échoué[6].
- **Pas d'alternative texte** — Emojis dans le HTML sans `role="img"` ni `aria-label`.
- **Zones tactiles trop petites** — Checkboxes (16px) et boutons de tabs < 48px (norme mobile)[3].
- **Formulaire inaccessible au clavier** — Pas de `tabindex`, pas de `focus-visible` visible.

### Information & Hiérarchie
- **Placement des appels à action confus** — La CTA "S'inscrire" est relégouée en bas[3] ; placer un CTA secondaire plus haut (après testimoniales).
- **Pas d'indication d'intention** — Tabs "Parrains" vs "Chercher un parrain" peu clairs ; recommander `<a href="#" aria-current="page">` ou guide contextuel[2].
- **Données de test statiques** — La liste `#profileList` reste vide (script manquant) → confusion utilisateur.

### Navigation
- **Pas d'étapes claires** — Le formulaire d'inscription n'indique pas combien d'étapes (1/3) → friction[10].
- **Pas de lien d'invitation** — Zone de parrainage digital sans mention du "partage de lien" ou "code de parrainage"[2].

---

## 🎯 Améliorations prioritaires

### 1. **Corriger l'accessibilité des couleurs** (CRITIQUE)

/ Augmenter le contraste /

.parrain-tag {

background: var(--aix-gold-lt);

color: #5a4a00; / au lieu de var(--aix-gold-dk) /

}

.stat-mini .num {

color: #8B6F00; / plus sombre /

}


**Impact** : Conformité WCAG AA, lisibilité pour 15% des utilisateurs[6].

### 2. **Ajouter une zone "Inviter un ami"** (ENGAGEMENT)
Placer une section dédiée **après les témoignages**, avant les profils[2] :

Connaissez quelqu'un qui cherche une marraine ?

Invitez un ami — gagnez du crédit communautaire


**Impact** : Augmente le taux de parrainage de 20-45%[10].

### 3. **Rendre le formulaire d'inscription progressif** (UX)
Remplacer le formulaire statique par 3 étapes avec barre de progression[10] :
- Étape 1 : Rôle (parrain/filleul)
- Étape 2 : Profil (nom, âge, quartier)
- Étape 3 : Disponibilité & services

**Impact** : Réduit les abandons de 25-30%.

### 4. **Ajouter gamification dans la liste des profils** (ENGAGEMENT)
Ajouter badges/visuels aux profils[10] :

⭐ 8 mois


Montrer le nombre de matches réussis par parrain → renforce confiance et incite à parrainer.

### 5. **Compléter le script JS** (TECHNIQUE)

function setTab(tab) {

document.querySelectorAll('.tabs-switch button').forEach(b => b.classList.remove('active'));

event.target.classList.add('active');

const profiles = tab === 'parrains' ? PARRAINS : FILLEULS;

renderProfiles(profiles);

}

function renderProfiles(data) {

document.getElementById('profileList').innerHTML = data.map(p => `

${p.name.charAt(0)}

${p.name}

${p.age} ans

${p.bio}

`).join('');

}



---

## ✅ Points forts

1. **Design cohérent & chaleureux** — Palette dorée/provençale bien appliquée, gradients harmonieux. Transmet confiance[5].
2. **Testimoniales puissantes** — 3 histoires émotionnelles bien structurées, créent de l'engagement immédiat[5].
3. **Structure mobile-first** — Grid responsive, breakpoint 600px pertinent pour cette audience senior/famille[3].

---

## pitch-paris10.html
## 1. NOTE /10
**UX : 7/10** | **Design : 8/10** | **Contenu : 8/10** | **Technique : 6/10**  
**Note globale : 7.25/10** – Page persuasive et responsive, mais lacunes a11y et bugs freinent le professionnalisme.

## 2. BUGS ou erreurs
- **HTML tronqué** : Fin du code coupée (`<div style="margin-top:var(--sp-3xl);padding:var(--sp-xl);background:var` – incomplet, casse rendu CTA.
- **Accents manquants** : "elus" → "élus", "frustres" → "frustrés", "deploiement" → "déploiement", "etat civil" → "état civil".
- **Icônes Lucide non chargées** : `<i data-lucide>` sans script d'initialisation (JS manquant), apparaissent vides.
- **QR code faux** : SVG statique décoratif, pas un vrai QR scannable vers `sos-mairies.pages.dev`.
- **Bouton sans classe CSS** : `.btn` référencé mais non stylé inline/extérieur (risque de rendu brut).
- **HTML invalide** : Style inline mal fermé dans hero (`<p style=...>`), pas de balise `<main>` sémantique.

## 3. PROBLÈMES UX
- **Navigation fixe opaque** : Nav masquant hero sur mobile (z-index OK mais padding insuffisant <768px).
- **Lisibilité mobile** : Texte hero/sub trop dense (line-height 1.7 OK mais clamp() trop agressif <400px), grids OK mais cards étroites.
- **Accessibilité critique (RGAA/WCAG AA obligatoire 2026 pour mairies)**[1][2][5] : 
  - Pas d'`alt` sur icônes/SVG QR.
  - Contrastes faibles (ex: blanc sur bleu foncé rgba(255,255,255,0.5) ~3:1 <4.5:1).
  - Pas de focus visible sur liens/boutons.
  - Pas de `aria-label` sur nav/liens icônes.
  - Pas de `prefers-reduced-motion` ni landmarks ARIA (main, nav).
- **Scroll long sans ancrages** : Pas de menu sticky pour sauter sections.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter script Lucide + QR réel** : `<script src="https://unpkg.com/lucide@latest"></script><script>lucide.createIcons();</script>` + lib QR (qrcode.js) générant vrai code scannable.
2. **Accessibilité RGAA** : Ajouter `alt="..."` icônes/QR, `role="img" aria-label`, contrasts >4.5:1, `focus-visible`, déclaration a11y[1][2].
3. **Corriger accents + HTML** : Remplacer caractères + fermer balises, valider W3C.
4. **Mobile hero** : Ajouter `@media (max-width: 480px) { .pitch-hero { padding: var(--sp-2xl); } }`.
5. **CTA fort** : Ajouter `role="button" tabindex="0"` au bouton, hover/focus states.

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème bleu Paris/Mairie, gradients pros, responsive grids auto-fit excellents.
- **Structure persuasive** : Flow problème→solution→impact→CTA parfait pour élus (stats chiffrées impactantes).
- **Perf/SEO** : Inline styles légers, viewport/charset OK, favicon SVG moderne, print media.

---

## sante.html
## Audit UX/UI - sante.html (SOS Mairies)

### 1. NOTE /10
**UX : 7/10** | **Design : 8/10** | **Contenu : 8/10** | **Technique : 5/10**  
**Note globale : 7/10** (solide visuellement, mais bugs techniques et accessibilité critique pour une mairie en 2026)

### 2. BUGS ou erreurs
- **Code JS tronqué** : `const docs = [{ lat: 48.8735, lng: 2.3605, n` → carte Leaflet ne s'initialise jamais.
- **Fonction `switchTab`** : index magique `['medecins','pharmacies','centres','depistage'][i]` fragile si ordre change.
- **Accents manquants** : "Medecins" (Médecins), "Kinesitherapeute" (Kinésithérapeute), "depistage" (dépistage).
- **HTML invalide** : Icônes `<i data-lucide>` sans script Lucide → icônes absentes. Navbar `.active` mal appliqué.
- **Liens Doctolib/e-cancer** : OK mais `target="_blank"` sans `rel="noopener"`.

### 3. PROBLÈMES UX
- **Accessibilité RGAA 2026 non-conforme** (obligatoire mairies) : Pas d'`alt` sur icônes SVG favicon, contrastes urgences (#FDF2F1/#C0392B OK mais non testé), navigation tabs non-clavier (focus invisible), pas de `aria-label` boutons/liens tel:, pas de `lang="fr"` cohérent, structure sémantique faible (h1-h4 OK mais pas de `<main>`).
- **Mobile** : Grille urgences OK responsive, mais carte 400px fixe → trop haute sur petits écrans ; tabs flex OK mais padding 10px trop fin (cible tactile <44px WCAG).
- **Navigation** : Tabs recharge carte à chaque switch (lent), pas de retour haut de page, breadcrumb absent.
- **Lisibilité** : Textes mutés (13px) limites sur mobile, longue liste médecins sans pagination/filtres.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Fixer carte + accessibilité** : Compléter JS markers, ajouter `alt` icônes/SVG, `aria-expanded` tabs, `role="tablist"`, focus visible (`:focus {outline:2px solid #27AE60}`), `<main>` + landmarks ARIA.
2. **RGAA 2026** : Ajouter déclaration accessibilité (footer), tester contrastes (Wave/AXE), navigation clavier 100%, `prefers-reduced-motion`.
3. **Responsive carte** : `#mapSante {height:clamp(300px,40vh,500px)}`; pagination liste médecins (3/page + "charger plus").
4. **Performance** : Lazy-load Leaflet, précharger Doctolib, service worker PWA.
5. **Contenu dynamique** : API pharmacies garde (3237), geoloc user pour médecins proches.

### 5. CE QUI EST BIEN
- **Design cohérent** : Thème vert santé immersif, cards hover fluides, couleurs sémantiques (rouge urgence, vert nouveau).
- **Contenu pertinent** : Infos locales précises (adresses, horaires, tel:), tabs logiques pour mairies.
- **Responsive global** : Grille auto-fit, viewport OK, theme-color PWA-like.

---

## preview-app.html
## 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7.5/10** (Design mobile excellent, mais lacunes a11y et code incomplet).

## 2. BUGS ou erreurs
- Code CSS tronqué à la fin (`box-shadow:var(--` dans `.budget-card`).
- Pas de contenu HTML body (seul head/style fournis) → page inutilisable.
- Icônes SVG manquantes (référencées mais non définies).
- Meta viewport trop restrictif (`user-scalable=no,maximum-scale=1`) bloque zoom a11y[1][2].
- Pas d'`<img>` avec `alt` visibles (risque WCAG A[1]).

## 3. PROBLÈMES UX
- **Accessibilité critique** (non RGAA AA 2026[1][2][3]): 
  - Pas de `role`, `aria-label` sur boutons/tabs (clavier/lecteurs d'écran défaillants[1]).
  - Contrastes OK mais pas testés (ex: `--text3` sur `--bg` proche de 4.5:1 requis[1]).
  - Formulaires sans `label` associés (`sf-label` non liée à `sf-input` via `for`[1]).
  - Pas de `prefers-reduced-motion` (animations forcées[5]).
- Navigation mobile fluide mais tabs sans focus visible.
- Overflow `hidden` sur html/body bloque scroll natif sur petits écrans.
- Pas de skip links ou landmarks ARIA (`main`, `nav`[5]).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter balises sémantiques + ARIA** : `<main>`, `<nav aria-label="tabs">`, `role="tablist"`, `aria-selected` sur tabs, `aria-label` boutons[1][5].
2. **Corriger formulaires a11y** : `<label for="id">` + `id` sur inputs; ajouter `aria-describedby` erreurs[1][3].
3. **Supprimer restrictions zoom** : `user-scalable=yes,maximum-scale=5` (RGAA obligatoire[1][2]).
4. **Focus visible** : `:focus {outline: 2px solid var(--c1)}` sur tous interactifs[1].
5. **Compléter code** : Ajouter body HTML, tester contrastes (outil WAVE), déclarer conformité RGAA[3].

## 5. CE QUI EST BIEN
- **Design mobile-first premium** : Frame iPhone réaliste, spacing/taillez parfaites (Inter font, radius cohérents).
- **Responsive parfait** : Media queries fluides desktop/mobile, safe-area insets.
- **Interactions natives** : Animations subtiles (`scale`, `fadeIn`), tap highlights off, shadows légers.

---

## pitch-paris10.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 8/10** | **Technique: 6/10**  
**Note globale: 7.25/10** (solide pitch, mais bugs et accessibilité critiques).

## 2. BUGS ou erreurs
- **HTML tronqué**: Fin du code coupée (`<div style="margin-top:var(--sp-3xl);padding:var(--sp-xl);background:var` → syntaxe invalide, page incomplète).
- **Accents manquants**: "debordés", "frustres", "distend", "repond", "ecoute", "deploiement" (corriger en `débordés`, `frustrés`, etc.).
- **Icônes Lucide non chargées**: `<i data-lucide="...">` sans script Lucide.js → icônes invisibles.
- **QR statique faux**: SVG décoratif, pas un vrai QR scannable vers `sos-mairies.pages.dev`.
- **CSS vars manquantes**: `--sp-4xl`, `--radius-lg`, etc. dépendent de `aix-theme.css` (risque d'erreurs si absent).
- **Liens potentiellement cassés**: `index.html`, `mairie/impact-societal.html` (non vérifiables sans contexte).

## 3. PROBLÈMES UX
- **Navigation fixe opaque**: Barre `pitch-nav` bloque contenu sur mobile (z-index OK mais backdrop-blur non supporté partout).
- **Lisibilité mobile**: Hero `min-height: 100vh` + clamp() OK, mais textes petits (14px) et grid cards trop serrés <400px.
- **Accessibilité faible** (RGAA/WCAG AA obligatoire 2026 pour mairies[1][2][5]): 
  - Pas d'`alt` sur icônes/SVG QR.
  - Contrastes limites (ex: blanc sur bleu foncé <4.5:1).
  - Pas de skip-links, focus invisible, langue `<html lang="fr">` OK mais pas de `lang` sur sections.
  - Bouton CTA sans `role="button"` ni ARIA.
- **Pas de lazyload**: Page lourde avec gradients/grids sur mobile lent.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger HTML + accents + charger Lucide.js**: Ajouter `<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>` + `lucide.createIcons()` au load.
2. **Générer vrai QR**: Remplacer SVG par `<canvas>` avec lib QRCode.js pointant `https://sos-mairies.pages.dev/`.
3. **Accessibilité RGAA AA**: Ajouter `alt="..."` icônes/QR, `aria-label` liens/nav, `focus-visible`, déclarer conformité (obligatoire mairies 2026[1][5]).
4. **Mobile-first**: Réduire padding sections (`--sp-4xl` → responsive), ajouter `prefers-reduced-motion`.
5. **CTA fortifié**: Dupliquer bouton sous QR + `tel:` pour élus + analytics sur clics.

## 5. CE QUI EST BIEN
- **Structure pitch efficace**: Hero → Problème → Solution → Impact → CTA (flow persuasif pour élus).
- **Design responsive cohérent**: Grids auto-fit + clamp() + couleurs thématiques (bleu Paris, rouge urgence).
- **Zero-cost impact visuel**: Chiffres bold + "0 EUR" géants = arguments forts, crédibles pour mairies.

---

## securite-10e.html
## 1. NOTE /10
**8/10** (UX: 9/10, Design: 8.5/10, Contenu: 8/10, Technique: 7/10). Design cohérent et mobile-first, contenu pertinent pour mairies, mais lacunes accessibilité (RGAA obligatoire pour secteur public[1][4]) et JS incomplet.

## 2. BUGS ou erreurs
- **Accents manquants** : "securite" (x6), "proximite" (x3), "telesurveillance", "eclaire", "frequente", "videosurveillance".
- **HTML invalide/incomplet** : Script Leaflet coupé (`// Additional markers for safety` sans fin `</script>`). Icônes Lucide non chargées (manque `<script src="lucide.js">`).
- **Liens potentiellement cassés** : Emails/tels OK, mais JS `getGPS()`/`submitReport()` non définis (erreurs console).
- **Favicon SVG** : Emoji basket (🏛) inadapté pour sécurité.

## 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA 2026 obligatoire pour mairies[1][4]) : Pas d'`alt` sur icônes/marqueurs Leaflet, formulaires sans `aria-label`/`required`, contrastes non vérifiés (ex: `#FDF2F1` rouge faible), navigation clavier incomplète (boutons sans focus visible).
- **Mobile** : Grille urgences OK, mais map trop haute (400px → 280px), texte petit (12px labels).
- **Navigation** : Navbar sans `aria-current`, tab-bar redondante avec navbar.
- **Formulaire** : Pas de validation client, GPS sans fallback, avis "anonyme" mais GPS trackable.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `alt` markers Leaflet (`alt="Commissariat du 10e"`), `aria-label` boutons (`aria-label="Appeler le 17"`), `lang="fr"` inputs, `role="search"` formulaire[1][3].
2. **Corriger JS** : Définir `getGPS()` (Geolocation API + `navigator.geolocation.getCurrentPosition()`), `submitReport()` (fetch API anonyme), charger Lucide (`<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>` puis `lucide.createIcons()`).
3. **Accents + sémantique** : Corriger orthographe, `<main>`, `<section aria-labelledby="h2">`, `autocomplete` champs (ex: `autocomplete="street-address"`).
4. **Map interactive** : Ajouter clusters markers, recherche adresse (Leaflet Geocoding), zoom tactiles (WCAG 2.2 24px cibles[3]).
5. **Urgences prioritaires** : Ajouter vibration/haptics mobile (`navigator.vibrate(200)`) sur hover/tap cartes urgences.

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème CSS vars fluide, grid responsive, hover effects engageants, couleurs sémantiques (rouge urgence/vert SAMU).
- **Contenu localisé** : Infos précises 10e (commissariats, TGD, itinéraires sécurité), hiérarchie claire (urgences → map → contacts → signalement).
- **Mobile-first** : Viewport, media queries, grid auto-fit, touches `tel:/sms:`.

---

## proposition.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 6/10** | **Technique: 5/10**  
**Note globale: 6.5/10** – Design premium mais technique incomplet et accessibilité faible (critique pour mairies, RGAA obligatoire 2026).[1][2]

## 2. BUGS ou erreurs
- **Code CSS tronqué**: Fin abrupte à `.chat-lang button {...border-radius` – page inutilisable.
- **HTML incomplet**: Pas de `<body>`, scripts JS manquants (chatbot, démos, QR), structure cassée.
- **Liens externes non sécurisés**: Google Fonts, jsPDF sans `integrity` (risque sécurité).
- **Icône SVG favicon**: Emoji 🏛️ mal encodé (`🏛️`), rendu variable.
- **Cache-control excessif**: Bloque tout cache, dégrade perf mobiles.

## 3. PROBLÈMES UX
- **Lisibilité mobile**: Texte petit (`font-size:.78rem` chips), grid catalogue trop dense (340px min sur petits écrans).
- **Navigation clavier**: Boutons/accordéons sans `role`, `aria-expanded`, focus invisible (non-RGAA).[3]
- **Accessibilité critique**: Pas d'`alt` images, contrastes gold/ foncé faibles (WCAG AA échoue), pas de skip-links, structure sémantique absente (h1 dupliqués).[1][6]
- **Responsive incomplet**: Hero/iFrame fixes (680px), chat fab chevauche sur mobile.
- **Performance**: Glassmorphism + blur lourd sur mobiles, shimmer/pulse animations excessives.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Compléter code**: Ajouter `<body>`, JS manquants, fermer CSS – **bloquant immédiat**.
2. **Accessibilité RGAA**: Ajouter `alt` texts, `aria-labels`, contrastes ≥4.5:1, navigation clavier, déclaration accessibilité (obligatoire mairies 2026).[2][5]
3. **Mobile-first**: `clamp()` partout, grid `minmax(280px,1fr)`, tester iPhone SE.
4. **Perf**: Lazy-load fonts/iFrame, réduire animations, `prefers-reduced-motion`.
5. **SEO/Sémantique**: `<main>`, `<section aria-labelledby>`, meta description, OpenGraph.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème gold/dark glassmorphism premium, adapté mairies (élégant, moderne).[gold vars]
- **Interactions fluides**: Hover/shimmer/pulse engageants, transitions subtiles.
- **Structure modulaire**: Sections logiques (hero, catalogue 345 services, modules), scalable pour propositions personnalisées.

---

## preview-app.html
### 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7.5/10** (design mobile premium, mais lacunes a11y et code incomplet).

### 2. BUGS ou erreurs
- Code CSS tronqué à la fin (`box-shadow:var(--` dans `.budget-card`).
- Pas d'HTML body/content : seul `<head>` + `<style>` fourni, rendant la page inutilisable.
- Icônes SVG/Font Awesome non définies (`.tab-icon`, `.mod-icon` etc. sans `font-family` ou `<svg>`).
- Meta viewport trop restrictif (`user-scalable=no,maximum-scale=1`) : bloque zoom, illégal RGAA/WCAG AA[1][2].
- Pas d'`<img>` avec `alt` (ex: blasons, icônes) ni labels form `<input>`[3].

### 3. PROBLÈMES UX
- **Accessibilité critique** : Pas de `role`, `aria-label` sur boutons/tabs (RGAA 106 critères AA obligatoires 2026 pour mairies[1][2][3][5]). Contrastes OK mais pas testés (ex: `--text3` sur `--bg`). Navigation clavier impossible (focus non visible). Pas de skip-links.
- **Navigation mobile** : Tabs sticky bottom OK, mais detail-screen `position:absolute` sans back gesture natif iOS.
- **Lisibilité** : Textes petits (10-11px) sur mobile ; surcharge visuelle grid 3-colonnes signalements.
- **Responsive** : Phone-frame desktop-only ; sur mobile réel, status-bar chevauche sans `padding-top:env(safe-area-inset-top)`.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter sémantique HTML** : `<main>`, `<nav>`, `<button>` avec `aria-label`/`role="tab"` ; labels `<label for="id">` sur forms (RGAA critique[3]).
2. **Corriger a11y** : `user-scalable=yes` ; `outline` focus visible ; `alt` sur toutes icônes/images ; tester WCAG AA contrasts[1][4].
3. **Compléter code** : Ajouter body HTML structure + icônes SVG ; finir CSS budget-card.
4. **Optimiser perf** : Lazy-load fonts ; réduire shadows/CSS custom props pour 60fps scroll.
5. **Ajouter PWA** : `manifest.json` + service worker pour offline (mairies rurales).

### 5. CE QUI EST BIEN
- **Design iOS-native premium** : Couleurs cohérentes (`--c1` bleu admin), shadows subtils, animations fluides (fadeIn/slideIn).
- **Responsive frame astucieux** : Simule iPhone desktop/mobile seamlessly.
- **Composants modulaires** : Grilles/tabs/alerts réutilisables, hierarchy claire (h3/titles).

---

## seniors.html
## 1. NOTE /10
**8/10** (UX: 9/10, Design: 8/10, Contenu: 8/10, Technique: 7/10). Design moderne et thématique adapté aux seniors, mais lacunes RGAA critiques pour une app mairies (obligatoire 80% conformité depuis 2026)[1][2].

## 2. BUGS ou erreurs
- **Accents manquants** : "elevees" → "élevées", "Pensez a boire" → "à", "regulierement" → "régulièrement", "reseaux" → "réseaux" (multiples occurrences).
- **HTML invalide** : Icônes `<i data-lucide>` sans fallback texte ; favicon SVG inline sans `type="image/svg+xml"`.
- **Liens cassés potentiels** : `js/quartier-engine.js`, `js/cgu-gate.js` non fournis ; alertes JS en dur (démos non remplacées).
- **Balises manquantes** : Pas de `<main>`, `<header>`, `<footer>` sémantiques ; `onclick` inline au lieu d'event listeners.

## 3. PROBLÈMES UX
- **Accessibilité RGAA/WCAG non conforme** : Pas d'`alt` sur icônes SVG implicites ; contrastes variables (gradient hero faible) ; navigation clavier incomplète (boutons sans `role=button` ARIA) ; pas de `lang` sur paragraphes ; cible tactile <24px sur mobile (icônes 56px OK, mais badges petits)[1][2][4].
- **Lisibilité mobile** : Grilles `grid-3` trop serrées sur petits écrans (flex-wrap OK mais pas responsive) ; textes 13-14px trop petits pour seniors.
- **Navigation** : Navbar + tab-bar redondants ; pas de BIA (Bouton d'Accessibilité) RGAA obligatoire ; focus invisible sur hover-only.
- **Contenu** : Données anonymisées statiques (pas de refresh) ; alertes JS bloquantes.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter accessibilité RGAA** : `alt` sur tous `<i data-lucide>` (ex: `alt="Icône cœur"`), `aria-label` sur boutons/links, `role="button"` sur cards cliquables, vérifier contrastes >4.5:1, landmarks ARIA (`<main>`, `<nav aria-label="principale">`)[1][2][4].
2. **Responsive grids** : `grid-3` → `@media (max-width:768px) { grid-1 }` ; tailles texte min 16px seniors.
3. **Corriger accents + sémantique** : Ajouter `<main class="container">`, remplacer `onclick` par `addEventListener`, tester NVDA/VoiceOver.
4. **Urgences prioritaires** : Bouton appel d'urgence sticky en haut (tel:115 toujours visible).
5. **Déclaration RGAA** : Ajouter footer avec "Déclaration d'accessibilité" lien (obligatoire mairies)[1][5].

## 5. CE QUI EST BIEN
- **Design thématique inclusif** : Palette chaleureuse (Provence), gradients apaisants, cartes espacées idéales seniors.
- **Contenu pertinent** : Structure logique (alertes → veilleurs → services → numéros), focus entraide locale Aix.
- **Interactions fluides** : Hover/shadows subtils, icônes Lucide modernes, boutons pills actionnables.

---

## proprete.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** (Design moderne et intuitif, mais lacunes accessibilité/RGAA et JS incomplet freinent le score).

## 2. BUGS ou erreurs
- **Accents manquants** (HTML invalide) : "Decrivez" → "Décrivez" ; "proprete" → "propreté" ; "signalements" → "signalements" ; "Dejection" → "Déjection" ; "nid-poule" → "nid-de-poule".
- **JS incomplet** : `switchTab()` tronqué ; fonctions manquantes (`initMap()`, `startQuiz()`, `quizContent`).
- **Icônes Lucide non chargées** : Pas de `<script src="lucide.js">`, icônes invisibles.
- **Input photo** : `onchange` mal géré (texte statique, pas de preview).
- **Lien nav** : "isolement.html" vs "Solidarite" (incohérent).

## 3. PROBLÈMES UX
- **Accessibilité RGAA non-conforme** (critique pour mairies 2026 [1][2][5]) : Pas d'`alt` sur icônes ; labels manquants (`<label for="repLoc">`) ; navigation clavier faible (boutons sans focus visible) ; contrastes à vérifier (vert #27AE60 OK, mais textes muted risqués).
- **Mobile** : Grid `report-grid` OK (auto-fit), mais map 400px fixe trop haute ; boutons tabs petits (cibles <44px WCAG [4]).
- **Navigation** : Tabs sans ARIA (`role="tablist"`, `aria-selected`) ; formulaire sans validation (soumission sans checks).
- **Lisibilité** : Polices petites (12-14px) sur mobile ; hover-only (pas de tap feedback).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `alt` icônes (`alt="Icône encombrants"`), `<label for="id">`, `role="tab"` sur tabs, `aria-label` boutons. Viser 80% conformité [1][2].
2. **Compléter JS** : Finaliser `switchTab()`, implémenter `initMap()` Leaflet, `startQuiz()` avec questions.
3. **Formulaire robuste** : Validation client (requis loc/desc), preview photo (`URL.createObjectURL`), géocodage adresse → coords.
4. **Mobile-first** : `min-height:44px` boutons ; map responsive (`height:50vh`).
5. **SEO/Sémantique** : `<main>`, `<section aria-labelledby="h1">`, meta description.

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème aix-theme.css + CSS vars/custom props = moderne, responsive, animations fluides.
- **UX intuitive** : Tabs clairs, grid boutons visuels (icônes colorées), flow signalement linéaire.
- **Contenu pertinent** : Données locales (collectes 10e, déchetteries), lien officiel DansMaRue.

---

## proposition.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 6/10** | **Technique: 5/10**  
**Note globale: 6.5/10** (esthétique premium mais accessibilité faible, code incomplet, non conforme RGAA pour mairies[1][4]).

## 2. BUGS ou erreurs
- **Code CSS tronqué**: Fin abrupte sur `.chat-lang button` (incomplet, casse le chatbot).
- **HTML invalide**: Fichier incomplet (pas de `<body>`, scripts/styles sans fermeture), balises manquantes (pas de structure sémantique complète).
- **Liens externes non sécurisés**: Google Fonts/CDN sans `rel="preconnect"`, risque de blocage (ex. CSP).
- **Accents OK** mais titre "personnalisee" → "personnalisée".
- **Cache headers redondants**: `Cache-Control` + `Pragma` + `Expires` conflictuels.

## 3. PROBLÈMES UX
- **Accessibilité critique (RGAA non conforme[1][4])**: Pas d'`alt` sur icônes/SVG favicon, contrastes faibles (or/ foncé ~3:1 < 4.5:1 WCAG), pas de `aria-label` sur boutons/accordéons, navigation clavier impossible (chevons sans focus visible).
- **Mobile dégradé**: Grille catalogue `minmax(340px)` trop large (pas responsive <340px), chat 420px fixe déborde.
- **Navigation confuse**: Pas de menu principal, scroll long sans TOC, FAB chatbot masque contenu.
- **Lisibilité**: Texte `--chrome` (#C0C0C0) faible sur `--bg` (#0A0A0F), glassmorphism flou réduit clarté.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter structure sémantique + ARIA**: `<main>`, `<section aria-labelledby>`, `role="button"` sur `.cat-header`, `aria-expanded` sur accordéons[3].
2. **Corriger contrastes + focus**: Vérifier WCAG AA (outil contrastchecker), ajouter `outline: 2px solid var(--gold)` sur `:focus`.
3. **Responsive total**: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` pour mobile, chat `max-width: 90vw`.
4. **Compléter code**: Fermer CSS, ajouter `<body>` avec JS pour interactions (demo iframe, modules).
5. **Déclaration RGAA**: Ajouter page accessibilité avec conformité + schéma pluriannuel (obligatoire mairies[1]).

## 5. CE QUI EST BIEN
- **Design glassmorphism premium**: Thème or/foncé cohérent, animations fluides (shimmer, pulse) immersives.
- **Organisation contenu**: Sections logiques (hero, catalogue 345 services, modules), compteur impactant.
- **Interactions riches**: Chatbot intégré, sélection modules avec feedback visuel (check ✓), QR modal élégant.

---

## services.html
## 1. NOTE /10
**UX : 7/10** | **Design : 8/10** | **Contenu : 6/10** | **Technique : 6/10**  
**Note globale : 6.75/10** (Design attractif mais lacunes a11y critiques pour une app mairies, obligée RGAA 80% depuis 2026[1][2][5]).

## 2. BUGS ou erreurs
- **Accents manquants** : "demarches" → démarches, "etat civil" → état civil, "deces" → décès, "periscolaire" → périscolaire, "evenements" → événements (x5+).
- **HTML invalide** : `<h1>⚡ Services express</h1>` (⚡ non sémantique, utiliser `<span>`), balises `<div>` non sémantiques pour formulaires (manque `<form>`), `onclick` inline (non accessible).
- **Liens potentiellement cassés** : Vérifier URLs externes (service-public.fr, portail citoyen Aix) ; favicon SVG inline OK mais non testé.
- **JS inline** : `onclick="alert(...)"` non robuste (bloque a11y, pas de gestion erreurs).

## 3. PROBLÈMES UX
- **Accessibilité (RGAA critique)** : Pas d'`alt` sur icônes SVG/emoji[1][2], labels formulaires sans `for` assoc. `<input>`, navigation clavier impossible (onclick seulement), contrastes non garantis (thème CSS externe), pas de `aria-expanded` sur accordéons, structure sémantique faible (pas de `<main>`, `<section>` mal utilisées)[4].
- **Mobile** : Grid OK (auto-fit), mais formulaires trop compacts (cibles tactiles <24px CSS[4]), tab-bar fixe masque contenu sur petits écrans.
- **Navigation** : Navbar + tab-bar redondants (fatigue cognitive), pas de fil d'Ariane, liens internes sans états focus visibles.
- **Lisibilité** : Texte compressé (font-size 13px/14px), emojis sans fallback texte.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `aria-expanded`, `role="button/region"`, `alt` icônes, `for` labels, `lang="fr"` cohérent ; tester WCAG AA (contrastes, clavier)[1][2][4].
2. **Corrections accents/JS** : Remplacer accents, migrer `onclick` vers `addEventListener` avec gestion a11y (Enter/Espace).
3. **Formulaires** : Encapsuler en `<form>` avec validation native (`required`, `novalidate`), ARIA pour erreurs.
4. **Navigation** : Supprimer tab-bar redondante ou la conditionner mobile-only ; ajouter skip-links.
5. **Sémantique** : `<main>` autour grid, `<h2>` par carte, `<figure>` pour icônes.

## 5. CE QUI EST BIEN
- **Design moderne** : Gradient hero engageant, cards accordéon intuitives, couleurs thématiques Provence cohérentes.
- **Responsive grid** : Auto-fit efficace, hover/tap fluides.
- **Contenu pertinent** : Services mairies ciblés (électoral, famille), liens officiels utiles.

---

## quartiers.html
## 1. NOTE /10
**UX: 8/10** | **Design: 8.5/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7.5/10** (solide mobile-first, mais lacunes accessibilité et JS).

## 2. BUGS ou erreurs
- **Code tronqué**: Fichier coupé au milieu (`<div class="contact-info">` dans Bel Air) → HTML invalide.
- **Accents manquants**: "Selectionnez", "evenements", "Coeur", "etudiee", "ameliorer" → corriger en "Sélectionnez", "événements", etc.
- **Classes manquantes**: `.badge`, `.btn`, `.progress-bar`, `.progress-fill`, `.lucide` non stylées → liens cassés visuellement.
- **Icônes Lucide**: `<i data-lucide>` sans script Lucide → icônes non affichées.
- **Fonctions JS**: `selectQuartier()`, `voteProject()` non définies → erreurs console.
- **CSS vars**: `--fr-bg`, `--fr-blue`, etc. dépendent de `mairie-theme.css` (absent) → rendu dégradé.

## 3. PROBLÈMES UX
- **Navigation clavier**: Boutons `onclick` sans `tabindex` ni `role` → inaccessible aux lecteurs d'écran (RGAA 2026 AA obligatoire pour mairies)[5].
- **Contrastes**: Petites tailles (11px) + `opacity:0.8` risquent échec WCAG AA (critère 1.4.3)[1][2].
- **Mobile**: `user-scalable=no` bloque zoom → contraire RGAA (cible tactile 24px min WCAG 2.2)[4].
- **Chargement**: Contenus masqués par JS absent → page vide si JS off.
- **Surcharge info**: Sections denses sans priorisation (ex: 6 quartiers + longs scrolls).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA AA**: Ajouter `alt` emojis, `aria-label` boutons, `role="button"`, navigation clavier, déclaration accessibilité (obligatoire mairies 2026)[1][2][5].
2. **Corriger HTML/JS**: Compléter code, définir `selectQuartier(id, el)` avec `aria-selected`, implémenter `voteProject`, charger Lucide.
3. **Styles manquants**: Définir `.badge`, `.btn-primary`, `.progress-fill {background: var(--fr-blue); border-radius: 5px; height:100%;}`.
4. **Responsive**: `grid-template-columns: repeat(auto-fit, minmax(150px,1fr))` pour grands écrans; ajouter `prefers-reduced-motion`.
5. **Performance**: Lazy-load contenus quartiers; pagination news/budgets.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème France.fr-inspired, mobile-first sticky header/bottom-nav, micro-interactions fluides (hover, fadeIn).
- **Contenu pertinent**: Structure logique (sélection → actualités/signalements/événements/budget/contacts) adaptée mairies.
- **Immersif**: Bannières quartiers colorées + emojis intuitifs facilitent scan rapide.

---

## proprete.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** – Bonne base moderne, mais lacunes critiques en accessibilité (RGAA non-conforme) et JS incomplet.

## 2. BUGS ou erreurs
- **Accents manquants**: "Decrivez" → "Décrivez" (x3), "proprete" → "propreté", "signalements" → "signalements", "dejection" → "déjection", "nid-poule" → "nid-de-poule".
- **JS incomplet**: `switchTab()` tronqué (ligne finale), carte Leaflet non initialisée (`#map` vide), quiz non implémenté (`#quizContent` vide, `startQuiz()` manquant).
- **HTML invalide**: Icônes Lucide sans script de chargement, `<i data-lucide>` non rendues; balises `<div>` imbriquées sans sémantique (manque `<main>`, `<section>`).
- **Liens OK** mais navigation active mal gérée (pas de reset sur tabs).

## 3. PROBLÈMES UX
- **Accessibilité critique** (non-RGAA 2026): Pas d'`alt` sur icônes/SVG favicon, labels manquants (`for` absent sur `<label>`), navigation clavier impossible (boutons sans `role="button"`), contrastes faibles (vert `#27AE60` sur blanc), pas de `aria-label`/`aria-expanded` sur tabs/accordéon, tableaux sans `<thead>`/scope.
- **Mobile**: Grille boutons OK mais petits (140px min), cibles tactiles <44px (WCAG 2.2), photo-zone tactile mais pas de feedback visuel fort.
- **Navigation**: Tabs JS cassé, pas de retour arrière après succès, scroll brutal sur submit.
- **Lisibilité**: Textes 12-14px trop petits, pas de `prefers-reduced-motion`.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA**: Ajouter `alt` icônes ("Icône encombrants"), `for` labels (`for="repLoc"`), `aria-controls` tabs, `<th scope="col">` tableau, contraste >4.5:1 (tester vert/blanc).
2. **JS complet**: Finaliser `switchTab()` + `tab-content.active`, init Leaflet (`L.map('map')`), implémenter quiz basique (5 questions statiques).
3. **Corrections accents/typo**: Script linter ou PR avec toutes les fautes FR (Décrivez, Déjection, Propreté).
4. **Form validation**: Ajouter `required` + feedback erreur (description vide), resize photo avant upload.
5. **Mobile/Perf**: `min-height:44px` boutons, lazy-load Leaflet, PWA manifest pour app mairies.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème CSS vars propre, animations fluides (`--ease-spring`), responsive grid auto-fit.
- **Contenu pertinent**: Signalements ciblés 10e Paris, tableau collectes utile, lien officiel DansMaRue.
- **UX engageante**: Stats highlight impactant, quiz gamifié, formulaire intuitif avec GPS/photo.

---

## signalement.html
## 1. NOTE /10
**8/10**  
UX fluide et intuitive (8.5), design cohérent (8.5), contenu pertinent (8), technique solide mais perfectible (7).

## 2. BUGS ou erreurs
- **Accents manquants** : "probleme" → "problème" (h1, h3, multiples), "Decrivez" → "Décrivez" (h3, placeholder), "precisement" → "précisément".
- **HTML invalide** : `onclick` inline sans guillemets échappés ; `style` inline excessifs (violation separation concerns) ; `sig-meta` utilise icônes Unicode non sémantiques.
- **Fonctionnalités cassées** : Photo-zone déclenche `alert()` (UX cheap) ; dépendance `AixEngine` externe non fournie (risque d'erreur runtime).
- **Liens** : Navigation OK, mais `localStorage` peut échouer en mode privé/incognito.

## 3. PROBLÈMES UX
- **Accessibilité** : Pas d'`alt` sur icônes/emoji ; contrastes CSS vars non vérifiés (risque <4.5:1) ; pas d'`aria-label` sur boutons/tabs ; focus clavier faible (pas d'indicateurs visuels) ; formulaires sans `required` ni validation ARIA.
- **Mobile** : Grille catégories OK responsive, mais boutons tabs trop fins (touch target <44px) ; photo-zone tactile mais alert bloque flux.
- **Navigation** : Pas de validation formulaire (soumission sans titre/desc) ; retour "Retour" ne reset pas champs ; tabs masquent contenu sans scroll-top.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité** : Ajouter `aria-label`/`role="tablist"` aux tabs ; `alt` sur toutes icônes ; valider contrastes (outil WAVE) ; `required` + `aria-describedby` sur champs clés.
2. **Validation UX** : Bloquer submit si titre vide ; ajout géolocalisation auto (GPS pour quartier) ; remplacer alert photo par input file + preview.
3. **Responsive** : Augmenter padding tabs mobile (`min-height:44px`) ; grille cat min 160px mobile.
4. **Code** : Externaliser JS/CSS ; utiliser `fetch` API au lieu localStorage pour prod (backend mairie).
5. **Contenu** : Ajouter privacy notice (RGPD) avant submit ; statuts pipeline avec tooltips.

## 5. CE QUI EST BIEN
- **Flux intuitif** : Wizard catégories → formulaire → succès avec code de suivi (aligné bonnes pratiques signalement citoyen).
- **Design mobile-first** : Vars CSS, grid responsive, animations subtiles (spring ease).
- **Simplicité citoyenne** : Interface claire, icônes parlantes, tabs Nouveau/Suivi (réduit friction).

---

## sante.html
### 1. NOTE /10
**UX: 8/10** | **Design: 8/10** | **Contenu: 9/10** | **Technique: 6/10**  
**Note globale: 7.5/10** – Solide pour un usage mobile/local, mais freiné par bugs techniques et accessibilité RGAA insuffisante (obligatoire pour mairies en 2026)[1][2].

### 2. BUGS ou erreurs
- **Code JS tronqué**: `const docs = [{ lat: 48.8735, lng: 2.3605, n` – carte Leaflet non initialisée, `#mapSante` vide.
- **Accents manquants**: "Medecins" (x3), "Kinesitherapeute", "connaitre" → "Médecins", "Kinésithérapeute", "connaître".
- **HTML invalide**: Icônes `data-lucide` sans script Lucide (non chargé), balises `<i>` non sémantiques.
- **Liens internes**: Navigation OK, mais `index.html` etc. non fournis (potentiellement cassés).
- **Favicon SVG**: Texte emoji `🏛️` mal encodé, risque d'affichage dégradé.

### 3. PROBLÈMES UX
- **Accessibilité RGAA critique** (non conforme ~80% critères[1][2]): Pas d'`alt` sur icônes/SVG favicon, contrastes faibles (ex: texte muted sur hero), navigation tabs JS sans fallback clavier/lecteur d'écran, structure titres incohérente (h1+h2 sans h3), pas de `aria-label` sur boutons/tabs, `lang="fr"` OK mais pas de skip links.
- **Mobile**: Tabs flex OK, mais grille urgences trop dense sur petits écrans (minmax 200px → overflow).
- **Navigation**: Tabs sans indicateur visuel fort (seul fond vert), pas de retour haut de page, barre nav/bottom redondante.
- **Lisibilité**: Textes denses dans cards (ex: med-info >3 lignes sans pause), couleurs variées mais pas de focus visible.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Fixer carte + JS**: Compléter `docs` array avec marqueurs médecins, ajouter `L.marker().bindPopup()`; lazy-load Leaflet.
2. **Accessibilité RGAA**: Ajouter `alt` icônes (`alt="Icône SAMU"`), `aria-controls/aria-selected` sur tabs, `role="tablist"`, contrastes >4.5:1 (tester outil RGAA), déclaration accessibilité en footer[1][2].
3. **Script Lucide**: `<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>` + `lucide.createIcons()`.
4. **Responsive urgences**: `grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));` + media query pour stack vertical <480px.
5. **Tabs ARIA + fallback**: `role="tab" tabindex="0"`, CSS `:focus`, JS `event.key === 'Enter'`.

### 5. CE QUI EST BIEN
- **Contenu hyper-localisé**: Infos précises/actualisées (urgences, gardes, dépistages) pour 10e Paris, liens tel/Doctolib pratiques.
- **Design cohérent/mobile-first**: Thème "aix" clean, hero gradient thématique, cards hover/shadow fluides, tabs pill intuitifs.
- **Structure logique**: Grille urgences prioritaire, tabs segmentés, couleurs sémantiques (vert=dispo, rouge=urgence).

---

## quartiers.html
# Audit UX/UI — quartiers.html (SOS Mairies)

## 1. Note globale

| Critère | Note |
|---------|------|
| **UX** | 6.5/10 |
| **Design** | 7/10 |
| **Contenu** | 7.5/10 |
| **Technique** | 5/10 |
| **Accessibilité** | 3/10 |

**Note globale : 5.8/10** — Bonne structure fonctionnelle, mais **graves lacunes d'accessibilité** incompatibles avec les obligations RGAA 2026.

---

## 2. Bugs et erreurs critiques

- **Caractères non échappés** : `é` manquants (ex : "Selectionnez" au lieu de "Sélectionnez", "evenements" au lieu de "événements")
- **Attribut non-standard** : `data-lucide="lightbulb"` — les icônes Lucide ne sont pas chargées (pas de `<script>` Lucide)
- **Balises orphelines** : Dernier `.contact-card` tronqué (HTML incomplet)
- **Lien vide** : `<a href="#">Lire le CR complet</a>` sans URL valide
- **Événement inline** : `onclick="selectQuartier()"` — aucun script JavaScript fourni

---

## 3. Problèmes UX et accessibilité

### 🚨 Accessibilité (RGAA 2026)[2][3][4]

La page **viole les normes WCAG 2.1 et RGAA** requises légalement depuis le **28 juin 2025** en France[4] :

- **Pas de texte alternatif** : Les emojis (🏛️, 🏠, etc.) n'ont aucun équivalent textuel pour les lecteurs d'écran
- **Contraste insuffisant** : Texte blanc sur dégradé bleu/violet (`.quartier-banner`) — ratio < 4.5:1 exigé
- **Navigation au clavier impossible** : Les `.quartier-select` sont des `<div>` avec `onclick`, pas des `<button>` ou `<a>`
- **Pas d'attributs ARIA** : Les sections masquées (`.quartier-content`) n'ont pas `aria-hidden` ou `role`
- **Ordre de tabulation défaillant** : z-index chaotique (z-index: 100, 200, 999, 2000)
- **Absence de labels** : Les badges et compteurs de vote ne sont pas liés à du contenu sémantique

### 📱 Responsive & UX

- **Excès de contenu mobile** : La grille 2 colonnes reste à 320px (non testée sur très petit écran)
- **Zone cliquable trop petite** : `.quartier-select` padding 16px insuffisant en mobile
- **Pas de feedback utilisateur** : Bouton "Voter" n'a aucun état (disabled, loading, success)
- **Toast manquant de fermeture** : `.toast` n'a pas de bouton fermer ni de délai d'expiration

---

## 4. Améliorations prioritaires

### ⚠️ **P1 — Accessibilité légale (obligatoire 2026)**[2][3]

⛪

Centre-bourg



**Rationale** : Les organisations soumises au RGAA risquent des **sanctions financières** et exclusion des appels d'offres publics[3].

### ⚠️ **P2 — Contraste de couleur**

/ Banner blanc sur bleu sombre /

.quartier-banner {

background: linear-gradient(135deg, var(--fr-blue), #00006D);

color: white; / ratio: 8.2:1 ✅ acceptable /

}

/ Mais vérifier : texte gris sur blanc /

.news-card p {

color: var(--fr-grey-600); / Risque < 4.5:1 /

}



**Solution** : Auditer avec outils (Lighthouse, aXe DevTools)[2].

### ⚠️ **P3 — JavaScript non-fourni**



**Requis** : Implémenter `selectQuartier()`, `voteProject()`, `showToast()`.

### ⚠️ **P4 — États de bouton manquants**



Ajouter états CSS :

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.voted::after { content: " ✓ Votez enregistré"; }



### ⚠️ **P5 — Attributs ARIA sur contenu masqué**



---

## 5. Points forts ✅

- **Structure sémantique claire** : Sections bien organisées (actualités, signalements, budget)
- **Design cohérent** : Palette française (bleu/émeraude), emojis contextuels engageants
- **Contenu pertinent** : Informations hyper-locales utiles pour communes (conseil de quartier, budget participatif, contacts)

---

## 📋 Checklist post-audit

- [ ] Remplacer tous les `<div onclick>` par `<button>` ou `<a>`
- [ ] Ajouter `aria-label` + `aria-hidden` sur emojis
- [ ] Vérifier ratios de contraste (Lighthouse AA minimum)
- [ ] Charger script JavaScript (`selectQuartier`, `voteProject`, `showToast`)
- [ ] Implémenter déclaration d'accessibilité (obligatoire légalement)[2]
- [ ] Tester avec lecteur d'écran (NVDA, JAWS)

---

**Contexte légal** : En tant qu'application pour communes, cette page est soumise à la **directive UE 2019/882** transposée en droit français[4]. L'Arcom assurera le contrôle à partir de 2026[4].

---

## securite-10e.html
## 1. NOTE /10
**8/10**  
Excellente structure thématique et visuelle cohérente pour une app mairies. Pénalités : accessibilité (RGAA 2026 obligatoire pour communes[1][2][5]), mobile perfectible, JS incomplet.

## 2. BUGS ou erreurs
- **Accents manquants** : "securite" (x6), "proximite" (x3), "Numeros" (x2), "eclaire" (x4), "frequente" (x2), "telesurveillance", "Republique" (x3).
- **HTML invalide/incomplet** :
  - Script JS tronqué (`// Additional markers for safety` sans fin).
  - Fonctions `getGPS()` et `submitReport()` non définies → formulaires cassés.
  - Icônes Lucide (`data-lucide`) sans script Lucide → icônes absentes.
- **Liens potentiellement cassés** : `css/aix-theme.css` externe non fourni ; mails/tels OK mais non testés.
- Favicon SVG encode mal sur certains navigateurs.

## 3. PROBLÈMES UX
- **Accessibilité critique (RGAA 2026)**[1][2][4][5] :
  - Pas d'`alt` sur icônes SVG/Leaflet.
  - Labels formulaires OK mais pas d'`aria-label` sur boutons JS.
  - Contraste faible (`--aix-text-muted` probable <4.5:1).
  - Pas de `lang="fr"` sur `<html>` cohérent mais manque déclaration RGAA.
  - Navigation clavier partielle (grid/liens OK, mais map Leaflet non).
- **Mobile** : Grid OK mais map 280px trop petite ; textes 12-14px limites lisibilité.
- **Formulaire** : Pas de validation client, GPS non géolocalisé, soumission sans feedback.
- **Navigation** : Navbar/tab-bar redondants ; pas de fil d'Ariane.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `alt` icônes/marqueurs, `aria-label` boutons, `role="main"`, contraste >4.5:1, `skip-link` nav[1][2][4].
2. **Corriger JS** : Implémenter `getGPS()` (Geolocation API), `submitReport()` (fetch anonyme), charger Lucide icons.
3. **Formulaire robuste** : Validation HTML5 (`required`), feedback succès/erreur, géoloc auto.
4. **Mobile** : Map responsive `height: 40vh min(400px)`, textes ≥16px, cibles tactiles 44px[4].
5. **Performance** : Lazy-load Leaflet, précharger CSS vars, minifier inline styles.

## 5. CE QUI EST BIEN
- **Contenu hyper-localisé** : Numéros précis, itinéraires réalistes 10e Paris, TGD pertinent.
- **Design cohérent** : Thème CSS vars propre, grid responsive, couleurs sémantiques (rouge/vert urgence).
- **Structure logique** : Hero → Urgences → Map → Contacts → Signalement → Itinéraires (parcours user intuitif).

---

## signaler-demo.html
# Audit UX/UI — signaler-demo.html (SOS Mairies)

## Note globale: **7/10**

**Répartition:** UX 6.5/10 | Design 7.5/10 | Contenu 7/10 | Technique 7/10

---

## 🐛 Bugs et erreurs

- **HTML tronqué:** Le script final s'arrête abruptement à `params.get` — code incomplet
- **Accents incohérents:** "probleme" au lieu de "problème", "categorie" au lieu de "catégorie", "ou" au lieu de "où" — mélange de français standard et déaccentué
- **Validité HTML:** Attributs `onclick` inline à remplacer par événementiel; absence de `<form>` sémantique
- **Fichier manquant:** `js/tracking.js` n'est pas fourni — script non testé

---

## ⚠️ Problèmes UX et accessibilité

**CONFORMITÉ RGAA 2026 INSUFFISANTE** — Votre application cible les communes françaises, donc soumise à l'obligation légale:[2][4]

| Critère RGAA | Statut | Impact |
|--|--|--|
| **Images et alternatives textuelles** | ❌ Critique | Emojis sans `alt` (📷, ✅, ⚠️) — incompatible lecteurs d'écran[2] |
| **Contrastes de couleurs** | ⚠️ Moyen | Gris clair (#9ca3af) sur blanc → ratio insuffisant pour malvoyants[2] |
| **Navigation au clavier** | ⚠️ Moyen | Boutons photo déclenchés par `onclick` — pas de `tabindex` logique |
| **Étiquetage des formulaires** | ✅ Bon | Labels présents et liés (mais input sans `id` explicite) |
| **Structure sémantique** | ❌ Faible | Divs au lieu de `<nav>`, `<section>`, `<article>` |
| **Texte alternatif des icônes** | ❌ Critique | Icônes d'urgence (🟢🟡🔴) sans description textuelle |

**Risques légaux:** Défaut d'accessibilité → sanctions financières, exclusion des appels d'offres publics[3][4]

---

### Autres problèmes UX

- **Étape 2 (photos):** "Facultatif mais tres utile" — message contradictoire sur mobile (slot aspect-ratio peut déformer)
- **Étape 3 (GPS):** "Recherche de votre position..." — pas de timeout visible; si GPS échoue, utilisateur reste bloqué
- **Étape 4 (succès):** Code de suivi non copié facilement (pas de bouton "Copier") → friction pour l'utilisateur
- **Bottom bar fixe:** Sur écran petit, chevauche le contenu; padding insuffisant (100px) sur screen en mobile
- **Responsive:** Breakpoint unique à 400px — design fragile à 480px, 600px

---

## ✅ Ce qui est bien

1. **Design cohérent:** Système de couleurs défini (CSS variables) — maintenable et évolutif
2. **Micro-interactions:** Animations pulse, transitions, feedback visuel au hover — engageant
3. **Structure en étapes:** UX claire et guidée (4 steps) — réduit l'anxiété de l'utilisateur

---

## 🎯 Améliorations (priorité)

### 1. **[CRITIQUE] Conformité RGAA — Accessibilité**
- Remplacer tous les emojis par des `<svg>` avec `<title>` et `role="img"` ou du texte masqué (`.sr-only`)
- Ajouter `aria-label` sur tous les boutons sans texte
- Vérifier ratio de contraste: gris (#9ca3af) sur blanc = **3.5:1** (AAA exige **7:1**)[2] → utiliser gris plus foncé (#6b7280)
- Tester avec lecteur d'écran (NVDA, JAWS)

**Exemple:**



### 2. **[HAUTE] Gestion du GPS et fallback**
- Timeout après 8s avec message: "Position manuelle? Entrez votre adresse"
- Si GPS refuse: masquer la carte, proposer saisie libre obligatoire
- Ajouter bouton "Actualiser ma position"

### 3. **[HAUTE] Copie facile du code de suivi**
- Bouton "Copier le code" sous `.success-code` avec retour visuel (toast "Code copié!")
- Format du code: `SOS-[COMMUNE]-[DATE]-[RANDOM]`

### 4. **[MOYEN] Responsive mobile (320px+)**
- Media query à 480px, 768px (pas seulement 400px)
- `.bottom-bar`: padding dynamique, texte des boutons adapté (`"Suivant"` → `"→"`)
- Grid photos: 1 colonne sur très petits écrans

### 5. **[MOYEN] Contenu et tonalité**
- Corriger accents français (problème, catégorie, où)
- "Facultatif mais tres utile" → "Optionnel — très recommandé pour les services techniques"
- Ajouter estimé temps remplissage: "⏱️ ~2 min" en haut

---

## 📋 Checklist technique avant livraison

- [ ] Compléter le script JavaScript (fichier tronqué)
- [ ] Tester `js/tracking.js` (fichier externe)
- [ ] Audit RGAA complet (outil: [RGAA Checker](https://rgaa-checker.com))[4]
- [ ] Tester sur: iPhone SE, Samsung Galaxy A12, écran 24"
- [ ] Vérifier GPS sur vrai appareil (geolocation API)
- [ ] Certificat SSL pour géolocalisation
- [ ] WCAG 2.1 niveau AA minimum[2][4]

---

**Verdict:** Démo UX solide, mais **non-conforme aux obligations légales RGAA 2026** pour communes. Accessibilité critique avant mise en production.

---

## sante.html
## Audit UX/UI - sante.html (SOS Mairies)

### 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 9/10** | **Technique: 5/10**  
**Note globale: 7.25/10** (solide visuellement, contenu pertinent pour mairies, mais bugs techniques et accessibilité critique en 2026).

### 2. BUGS ou erreurs
- **Code JS tronqué**: `const docs = [{ lat: 48.8735, lng: 2.3605, n` → carte Leaflet ne s'initialise pas, `#mapSante` vide.
- **Accents manquants**: "Medecins" (x4), "kinesitherapeute", "à" → "a" (ex: "Chateau d'Eau"), "grange aux Belles".
- **HTML invalide**: Icônes `<i data-lucide>` sans script Lucide → icônes absentes; balises `<h3>`, `<h4>` non sémantiques partout.
- **Liens OK** mais `tel:` non testés; Doctolib cible `_blank` sans `rel="noopener"`.

### 3. PROBLÈMES UX
- **Accessibilité RGAA/WCAG 2.2 non conforme** (obligatoire 2026 pour mairies, seuil 80%): pas d'`alt` sur icônes SVG favicon; contrastes faibles (ex: `.u-number` rouge sur rose); navigation tabs JS sans clavier/ARIA; map sans labels ARIA; pas de `lang="fr"` cohérent; skip links absents[1][2][3].
- **Mobile**: Grid urgences OK mais tabs trop fins (cibles <24px tactiles WCAG 2.2); map 400px fixe non responsive[1].
- **Navigation**: Tabs masquent contenu sans indicateur loading; map ne recharge que sur "Médecins" → UX confuse.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Fixer JS + accessibilité**: Compléter `docs[]` pour markers; ajouter ARIA (`role="tablist"`, `aria-selected`); `alt=""` icônes; script Lucide; `rel="noopener"` liens ext[1][2].
2. **Responsive map/tabs**: `height: 50vh; min-height: 300px;` map; buttons tabs `min-height: 44px;` (WCAG tactiles)[1].
3. **Sémantique HTML**: `<main>`, `<section aria-labelledby="h2">`; `<figure>` map; corriger accents (UTF-8 OK mais texte sale).
4. **Contrastes/lecture**: Tester contrasts (ex: rouge #C0392B sur #FDF2F1 ~3:1 faible); ajouter `prefers-reduced-motion`.
5. **Dynamique**: API pharmacies garde temps réel (3237 statique); géoloc auto map.

### 5. CE QUI EST BIEN
- **Contenu hyper pertinent**: Urgences, médecins nouveaux patients, dépistages gratuits — adapté élus/habitants 10e Paris.
- **Design cohérent**: Thème vert santé, cards hover, gradient hero; responsive grid auto-fit.
- **Navigation intuitive**: Tabs clairs, navbar/tab-bar bottom mobile-first.

---

## simulateur.html
### 1. NOTE /10
**UX: 7/10** — Intuitive mais perfectible mobile/accessibilité.  
**Design: 8/10** — Cohérent France Bleu, responsive.  
**Contenu: 8/10** — Clair, métier pertinent.  
**Technique: 6/10** — JS incomplet, bugs potentiels.  
**Global: 7/10**.

### 2. BUGS ou erreurs
- **JS tronqué**: `chartRevenue` dataset coupé (`da` incomplet) → charts non rendus.
- **Mix % non validé**: Somme inputs mix >100% possible, sans warning.
- **HTML invalide**: `<div class="grid-2 grid">` (classe redondante), `kpi-grid mb-xl` (`.mb-xl` manquant CSS).
- **Accents OK**, liens internes cohérents (pas testés).

### 3. PROBLÈMES UX
- **Mobile**: Grid controls OK mais labels petits (13px), inputs denses sur petits écrans.
- **Accessibilité**: Pas d'`aria-label` sur inputs/tabs, contrastes OK mais focus states faibles, pas de `role="tablist"`.
- **Navigation**: Navbar sans burger mobile, liens non sémantiques.
- **Feedback**: Pas de loading/recalc instantané, mix % non normalisés.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Fix JS charts**: Compléter datasets/clients/segment, ajouter `window.onload` init.
2. **Valider mix %**: Ajouter JS pour normaliser somme=100% + warning visuel.
3. **Accessibilité**: Ajouter `aria-label`, `role="tab"`, clavier-nav tabs, `alt` SVG favicon.
4. **Mobile**: Media query pour stacker controls (1col <600px),增大 labels (14px min).
5. **Perf**: Débouncer `recalc()` (throttle 300ms), lazy Chart.js.

### 5. CE QUI EST BIEN
- **Design système cohérent**: Vars CSS France, gradients pros, responsive grid.
- **UX métier excellente**: Scenarios/tabs intuitifs, controls logiques, KPIs visuels immédiats.
- **Contenu impactant**: Market card accrocheuse, P&L table claire (positif/négatif colorés).

---

## seniors.html
# Audit UX/UI — seniors.html (SOS Mairies)

## NOTE GLOBALE : 6.5/10

**Répartition :** UX 5/10 | Design 7/10 | Contenu 7/10 | Technique 7/10

---

## 🔴 BUGS ET ERREURS CRITIQUES

| Erreur | Impact | Correction |
|--------|--------|-----------|
| Accents manquants | Texte illisible | "Personne ne reste seul**e** a Aix" → "à" |
| "prevues", "regulierement", "elevees" | Crédibilité compromis | Ajouter accents français (é, è, ê) |
| Balises `<i>` pour icônes (lucide) | Sémantique HTML faible | Utiliser `<span>` ou structure ARIA |
| Pas de `<main>` | Structure invalide | Envelopper contenu principal |
| `onclick="alert()"` partout | Pas de vrais liens | Implémenter vraies actions ou désactiver |

---

## 🟠 PROBLÈMES UX/ACCESSIBILITÉ (URGENT)

### **Non-conformité RGAA 2026**
En tant qu'application pour collectivités, ce site **doit respecter le RGAA (106 critères) et les normes WCAG 2.1 niveau AA**[2][3]. Actuellement, plusieurs défauts d'accessibilité bloquent cette conformité :

- **Contraste insuffisant** : texte gris clair sur fond blanc = ratio < 4.5:1 requis[3]
- **Pas de `lang` sur `<html>`** (✓ présent) mais pas de structure ARIA pour lecteur d'écran
- **Images/icônes sans alternatives** : `data-lucide` n'a pas de `aria-label` ni de `role`
- **Formulaires non balisés** : boutons `onclick` sans `type="button"` explicite
- **Pas de déclaration d'accessibilité** : obligatoire pour organisme public[3]

### Lisibilité mobile
- Grille `grid-3` devient cassée < 768px (pas de media query visible)
- Typographie trop petite (13–14px) sur petit écran
- Cards veilleurs non stackables

### Navigation
- Barre de nav compliquée pour seniors (6 liens trop proches)
- Pas de breadcrumb pour contexte
- Numéros d'urgence cachés en bas (mauvaise hiérarchie)

---

## 🟡 PROBLÈMES DE CONTENU

- **Données fictives**(`onclick="alert(...demo)"`) : pas de vraies actions
- **Anonymat insuffisant** : noms de veilleurs (Monique D., Gérard P.) = re-identification possible
- **Alerte chaleur** : trop générique, pas d'actions concrètes pour seniors
- **Pas de contexte légal** : RGPD, consentement des données seniors absent

---

## ✅ AMÉLIORATIONS PRIORITAIRES (TOP 5)

### 1. **Accessibilité RGAA AA — CRITIQUE (impact légal)**
- Ajouter `aria-label` à toutes les icônes lucide
- Fixer ratio contraste ≥ 4.5:1 (texte gris → noir ou plus foncé)
- Publier déclaration d'accessibilité obligatoire[3]
- Tester avec lecteur d'écran (NVDA gratuit)

### 2. **Corriger tous les accents français**
- "a" → "à", "Personne ne reste seul" → "seule", "regulierement" → "régulièrement"
- Outils : rechercher/remplacer dans l'IDE

### 3. **Responsivité mobile (media queries)**

@media (max-width: 768px) {

.grid-3 { grid-template-columns: 1fr; }

.navbar-links { display: none; } / Menu burger /

font-size: 16px; / min pour seniors /

}



### 4. **Remplacer `onclick="alert()"` par vraies actions**
- Créer formulaires POST vers backend
- Ou ajouter `data-action` + gestionnaire d'événements JavaScript

### 5. **Hiérarchie UX : numéros d'urgence prioritaires**
- Déplacer section "Numéros utiles" après "Réseau de veilleurs"
- Ou créer barre flottante sticky avec CCAS + SAMU (numéro principal en rouge)

---

## 💚 CE QUI EST BIEN (TOP 3)

1. **Design cohérent** : palette Aix Ensemble respectée, variables CSS bien structurées, card-based layout adapté aux seniors
2. **Contenu pertinent** : sections logiques (veilleurs → seniors suivis → services), empathie évidnte ("Personne ne reste seul"), alerte chaleur contextuelle
3. **Typographie hiérarchisée** : h1–h4 clairs, badges informatifs (`✅ Vue il y a 2 jours`), sections bien espacées

---

## 📋 PROCHAINES ÉTAPES

Avant déploiement public (collectivité = obligation légale RGAA 2026)[2] :
- Audit automatisé : RGAA-Checker, AXE, Lighthouse
- Test utilisateurs : vrais seniors + personnes en situation de handicap
- Audit externe recommandé (300–1500€ selon complexité)

---

## securite-10e.html
## 1. NOTE /10
**8/10** (UX: 9/10, Design: 8.5/10, Contenu: 9/10, Technique: 7/10). Design cohérent et immersif, contenu pertinent pour mairies, mais lacunes accessibilité (RGAA critique pour 2026[1][2]) et JS incomplet.

## 2. BUGS ou erreurs
- **Accents manquants** : "securite" (x3), "proximite" (x2), "Numeros" (x2), "telesurveillance", "Republique" (x3), "eclaire", "frequente".
- **HTML/JS incomplet** : Script map tronqué (`// Additional markers for safety`), fonctions `getGPS()` et `submitReport()` non définies → erreurs console.
- **Liens potentiellement cassés** : `css/aix-theme.css` externe non fourni ; icônes Lucide non chargées (manque `<script src="lucide.js">`).
- **Sémantique** : `<i data-lucide>` sans `aria-hidden="true"` ; pas de `<main>`, `<article>`.

## 3. PROBLÈMES UX
- **Accessibilité faible** (non-RGAA AA[1][2][5]) : Pas d'`alt` favicon SVG, contrastes limites (ex: `#FDF2F1`/#C0392B), formulaires sans `aria-label`/`required`, navigation clavier partielle, pas de skip-links, focus invisible.
- **Mobile** : Grid urgence OK, mais map 280px trop petite ; boutons "btn-block" trop larges ; texte 12-14px faible lisibilité.
- **Navigation** : Navbar sans `aria-current`, tab-bar redondante ; pas de fil d'Ariane ; formulaire sans validation/feedback visuel.
- **Performance** : Leaflet CDN bloquant ; map sans lazy-load.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `lang="fr"`, `alt=""` favicon, `aria-label` boutons/tel, `role="img"` icônes, contrastes >4.5:1, `<main>`, skip-link. Tester WAVE[2].
2. **Corriger JS** : Implémenter `getGPS()` (Geolocation API), `submitReport()` (fetch anonyme), charger Lucide (`<script src="https://unpkg.com/lucide@latest">`).
3. **Formulaire robuste** : Ajouter validation HTML5 (`required`, `pattern`), feedback erreurs, CAPTCHA anti-spam, confirmation envoi.
4. **Mobile/Perf** : Lazy-load map (`loading="lazy"`), media queries pour texte ≥16px, PWA manifest pour app mairies.
5. **SEO/Sémantique** : `<h1>` unique, balises `<section aria-labelledby>`, schema.org LocalBusiness pour commissariats.

## 5. CE QUI EST BIEN
- **Contenu hyper-localisé** : Numéros exacts 10e Paris, itinéraires sécurité concrets, TGD bien expliqué — parfait pour élus/habitants.
- **Design thématique cohérent** : CSS vars, couleurs Paris (#002654/#ED2939), cards immersives, hover fluides.
- **UX intuitive** : Grille urgence visuelle (couleurs codées), map interactive, formulaire anonyme rassurant.

---

## sos-voisins.html
## Audit UX/UI - SOS Voisins (SOS Mairies)

### 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 6/10** | **Technique: 5/10**  
*Moyenne: 6.5/10* - Design moderne et engageant, mais freiné par bugs techniques et accessibilité faible (RGAA non-respecté pour projet public 2026[1][2]).

### 2. BUGS ou erreurs
- **Accents manquants**: "enferme(e)", "demarre", "resolus", "alerte", "echappe" → "enfermée", "démarre", "résolus", "alertés", "échappé".
- **HTML incomplet**: Code JS coupé (`desc: 'Voisin bricoleur en`); `<div id="situationGrid">` vide → crash probable.
- **Liens cassés potentiels**: `js/quartier-engine.js`, `css/aix-theme.css` non fournis → styles/JS inopérants.
- **HTML invalide**: `<label class="checkbox-group label:has(...)` mal fermé; icônes Lucide sans script d'init; `data-lucide` sans polyfill.
- **Formulaires**: `id="rQuartier"`, `id="sosQuartier"` vides → selects cassés.

### 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA 2026 obligatoire pour mairies[1][3]): Pas d'`alt` sur icônes SVG favicon; contrastes faibles (rouge/blanc hero); non-navigable clavier (boutons sans `role`); formulaires sans `aria-label` ni `for` sur labels[2][6].
- **Mobile**: Grilles OK mais boutons trop larges (`width:100%`), modale `max-height:90vh` risque overflow; pas de `touch-action` pour hover.
- **Navigation**: Navbar sans `aria-current`; modal backdrop sans `aria-modal`; pas de skip-links ni focus management.
- **Lisibilité**: Texte petit (11-13px); animations `sos-pulse` épileptogène potentielle[7].

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger accessibilité RGAA AA**: Ajouter `alt` icônes, `for` labels, `aria-labelledby`, contrastes 4.5:1, navigation clavier complète[2][6].
2. **Fixer code incomplet**: Compléter JS `SITUATIONS`, populater grids/selects, valider HTML (W3C validator).
3. **Ajouter bouton submit clair**: Formulaire register sans bouton visible sur mobile; centrer et `type="submit"`.
4. **Optimiser modale**: `Esc` close, focus trap, backdrop `aria-hidden` sur body.
5. **Stats dynamiques**: Rendre counters réels via API (pas hardcodés 156/87).

### 5. CE QUI EST BIEN
- **Design cohérent**: Thème rouge SOS impactant, gradients engageants, icônes emoji intuitives.
- **Responsive grid**: `auto-fill minmax` parfait mobile/desktop; stats-banner adaptative.
- **Flow UX logique**: Hero → Stats → Big CTA → Situations → Voisins → Register motive l'action.

---

## services.html
## 1. NOTE /10
**8/10** (UX: 9/10 fluide et intuitive ; Design: 8/10 cohérent ; Contenu: 8/10 pertinent ; Technique: 7/10 bugs mineurs et accessibilité défaillante).

## 2. BUGS ou erreurs
- **Accents manquants** : "electorales" → "électorales", "demarches" → "démarches", "etat civil" → "état civil", "periscolaire" → "périscolaire", "evenements" → "événements".
- **HTML invalide** : Balises `<h3>` et `<p>` imbriquées sans `<div>` sémantique ; classes CSS absentes (`.mt-md`, `.text-xs`, `.text-muted`, `.mt-sm`) → styles inline forcés.
- **Liens OK** mais inline styles répétitifs (ex: `background:var(--aix-*)`) non centralisés.
- Pas de `alt` sur icônes SVG favicon ; émoticônes non ARIA-label.

## 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA/WCAG AA obligatoire 2026 pour services publics[1][2][3]) : Pas de `aria-expanded` sur `.service-card`, focus clavier invisible, forms sans `label for/id`, contrastes potentiels faibles (vérifier vars CSS), pas de `prefers-reduced-motion`.
- **Mobile** : Grid OK mais cards <300px sur petits écrans ; formulaires tactiles trop petits (WCAG 2.2: 24x24px[4]).
- **Navigation** : Navbar + tab-bar redondants ; pas de fil d'Ariane ; JS inline `onclick` non délégué (performances).
- **Lisibilité** : Polices petites (13px, 14px) ; émoticônes comme icônes (non scalables).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `aria-expanded`, `role="button"`, `label for="id"` sur forms, `alt`/`aria-label` icônes ; tester contraste >4.5:1[1][2].
2. **Corrections accents/validité** : Fixer typos, remplacer inline styles par classes CSS, valider HTML (W3C).
3. **JS moderne** : Remplacer `onclick` par `addEventListener` délégué ; ajouter clavier (Enter/Escape).
4. **Mobile/responsive** : `min-height:44px` sur inputs/buttons ; grid `minmax(280px,1fr)`.
5. **Contenu SOS Mairies** : Adapter titres/liens à projet générique (ex: liens dynamiques par commune).

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème Provence immersif, cards accordéon intuitives, hover fluides.
- **UX services express** : Contenu actionable (liens officiels + forms demo), icônes thématiques engageantes.
- **Perf légère** : CSS vars, grid moderne, pas de JS lourd.

---

## seniors.html
## 1. NOTE /10
**8/10** (UX: 9/10 fluide et intuitive ; Design: 8/10 cohérent et chaleureux ; Contenu: 8/10 pertinent pour seniors ; Technique: 7/10 bon mais perfectible).

## 2. BUGS ou erreurs
- **Accents manquants** : "elevees" → "élevées", "Pensez a boire" → "Pensez à boire", "regulierement" → "régulièrement", "reseu" → "réseau" (x2), "anonymise" → "anonymisé".
- **HTML invalide** : Icônes Lucide avec `data-lucide` sans `aria-hidden="true"` (risque pour lecteurs d'écran) ; balises `<i>` non sémantiques pour icônes.
- **Liens cassés potentiels** : Scripts externes (`js/quartier-engine.js`, `js/cgu-gate.js`) non fournis ; favicon SVG inline OK mais non testé.
- **Typos mineures** : "Temperatures" → "Températures".

## 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA/EAA 2026 obligatoire pour mairies [1][2][4]) : Pas d'`alt` sur icônes/avatar ; contrastes non vérifiés (ex: badges sur fonds clairs) ; pas de navigation clavier (boutons sans focus visible) ; absence de `lang="fr"` sur icônes/sections ; pas de déclaration d'accessibilité.
- **Lisibilité mobile** : Texte petit (13-14px dans alertes/seniors) ; grid-3 OK mais cards veilleurs trop denses sur petits écrans.
- **Navigation** : Navbar + tab-bar redondants ; pas de fil d'Ariane ; alertes `onclick` bloquantes (pas de vraie modale).
- **Seniors** : Boutons "pill" trop petits (cibles <44px WCAG 2.2 [3]) ; pas de mode haute contraste ou réduit-mouvement.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `alt="" aria-hidden="true"` sur toutes icônes ; `role="img"` sur avatars ; `aria-label` sur boutons ; tester contrastes (outil WAVE) ; ajouter déclaration d'accessibilité en footer [1][3].
2. **Corrections accents/bugs** : Remplacer tous accents manquants ; valider HTML (validator.w3.org) ; gérer erreurs JS graceful (no alert()).
3. **Mobile/seniors** : Augmenter `font-size` min 16px ; cibles tactiles ≥44px ; ajouter `prefers-reduced-motion` CSS.
4. **Navigation** : Fusionner navbar/tab-bar ; ajouter `skip to main content` link ; lazyload scripts.
5. **Contenu** : Rendre liste seniors interactive (filtre par quartier) ; ajouter formulaire réel vs alert demo.

## 5. CE QUI EST BIEN
- **Design thématique** : Palette Provence chaleureuse, gradient hero engageant, cards cohérentes et hover fluides.
- **Contenu pertinent** : Structure logique (alertes → veilleurs → services → urgences) adaptée seniors/mairies ; numéros utiles en cards proéminents.
- **Responsive intuitif** : Grids flexibles, icônes Lucide modernes, boutons CTA clairs pour inscriptions.

---

## terrain/admin-vie.html
## 1. NOTE /10
**7.5/10**  
UX: 8/10 (intuitive, task-focused). Design: 7/10 (cohérent mais inline styles). Contenu: 8/10 (pratique pour mairies). Technique: 6/10 (erreurs HTML/JS).

## 2. BUGS ou erreurs
- **HTML tronqué**: Code coupé à `data-val="urgent" style="flex:1;justify-content:center;">🔴 Urgent</button>` (fin incomplète du bon de commande N6).
- **Accents manquants**: "simplifiee" → "simplifiée"; "arrivee" → "arrivée"; "tournee" → "tournée" (x5); "releve" → "relevé"; "kilometrique" → "kilométrique".
- **HTML invalide**: `<link rel="icon">` dupliqué (SVG data + img/logo-header.svg); attributs incomplets (ex: `da` au lieu de `data-val`); styles inline excessifs au lieu de CSS.
- **JS manquant**: Fonctions comme `filterLevel()`, `toggleTool()`, `togglePointage()` non définies (erreurs console).
- **Alt incomplet**: Logo "Haute-Correze" → "Haute-Corrèze" (cohérent avec projet).

## 3. PROBLÈMES UX
- **Navigation mobile**: Liste outils longue (scroll excessif sur petits écrans); filtres N7-N3 cachent contenu par défaut.
- **Lisibilité**: Inline styles (ex: `font-size:0.85rem`) non responsive; icônes emoji peu contrastées sur fonds sombres; textes longs sans aération.
- **Accessibilité**: Pas d'`aria-label/expanded` sur accordéons (`toggleTool`); selects/textareas sans `aria-describedby`; contrastes potentiellement faibles (WCAG non-respecté); clavier navigation faible (focus invisible).
- **Feedback utilisateur**: Pas de loading/spinner sur submits (ex: `submitTournee()`); états hors-ligne statiques sans real-time.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Supprimer inline styles** → Migrer vers `terrain-theme.css` pour cohérence/responsivité (ex: media queries pour mobile).
2. **Ajouter ARIA & keyboard nav**: `role="button" aria-expanded` sur `.admin-tool-card`; `tabindex=0` + `onkeydown` pour chevrons.
3. **Feedback visuel immédiat**: Ajouter spinners/toasts sur tous boutons submit (ex: `btn-loading` class avec 300ms delay).
4. **Responsive hero/filtres**: `flex-wrap` sur `.filter-bar`; hero `clamp(1.1rem, 4vw, 1.3rem)` pour font-size.
5. **Completude code**: Finaliser HTML tronqué; externaliser JS dans `<script src="js/admin.js">`.

## 5. CE QUI EST BIEN
- **Structure task-oriented**: Outils courts (1-45s) avec icônes claires, alignés besoins mairies terrain[1][3].
- **Filtres niveaux hiérarchiques**: N7-N3 intuitifs pour rôles (cohérence UX)[2][8].
- **PWA-ready**: Manifest, viewport-fit, theme-color pour app mobile native-like[7].

---

## signalement.html
# Audit UX/UI — signalement.html (SOS Mairies)

## 1. NOTE GLOBALE

| Catégorie | Note | Justification |
|-----------|------|---------------|
| **UX** | 7/10 | Flux logique (catégorie → formulaire → confirmation), mais manque de clarté sur certains champs |
| **Design** | 7.5/10 | Cohérent avec la charte Aix Ensemble, mais animations et espacements peuvent être affinés |
| **Contenu** | 6.5/10 | Textes clairs, mais accents manquants et placeholders peu descriptifs |
| **Technique** | 6/10 | Accessibilité insuffisante, dépendances externes manquantes, structure perfectible |
| **MOYENNE** | **6.75/10** | Bon point de départ, améliorations critiques nécessaires |

---

## 2. BUGS ET ERREURS

- **Accents manquants** : "Quel type de probleme ?" (ligne 62), "Decrivez le probleme" (ligne 70), "Decrivez precisement" (ligne 90) → Corriger avec accents français
- **Dépendances manquantes** : `quartier-engine.js` non fourni ; script échouera sans `AixEngine.SIGNALEMENT_CATS`, `AixEngine.QUARTIERS`
- **Alerte dégradée** : `alert('Fonctionnalite photo a venir !')` (ligne 93) → Utiliser modal ou message contextualisé
- **HTML valide** : Structure correcte, mais manque d'attributs `aria-*` pour accessibilité
- **Lien absent** : `href="mon-quartier.html"` et autres pages peuvent ne pas exister

---

## 3. PROBLÈMES UX CRITIQUES

### Accessibilité (WCAG 2.1)
- **Pas de labels explicites** : Inputs sans `id` lié aux `<label>` (utiliser `for="sigTitre"`)
- **Contraste insuffisant** : `.aix-text-muted` sur fond clair → Vérifier ratio WCAG AA (4.5:1 minimum)
- **Pas d'ARIA** : Aucun `aria-label`, `aria-describedby`, `role` sur éléments dynamiques
- **Clavier** : Pas de focus visible défini ; navigation au clavier non testée

### Navigation mobile
- **Zone de saisie cramée** : 3 selects + 1 textarea sur mobile → Risque de débordement
- **Boutons trop petits** : Minimum 44×44px recommandé (vérifier sur `cat-btn`)
- **Tab bar encombre** : 5 items au bas → Peut cacher formulaire sur petits écrans

### Clarté du processus
- **Pas d'indication d'étape** : Utilisateur ne sait pas où il est (1/3, 2/3, 3/3)
- **Champ "Sous-catégorie" dépend de la catégorie** → Pas de feedback clair avant sélection
- **Photo optionnelle** : Aucun message d'erreur si la fonctionnalité échoue

---

## 4. AMÉLIORATIONS PRIORITAIRES

### 1. **Accessibilité (P0 — OBLIGATOIRE)**
Ajouter attributs ARIA et correctifs HTML :

Titre

class="form-input"

id="sigTitre"

aria-label="Titre du signalement"

aria-required="true"

required

placeholder="Ex: Nid de poule devant le 23 cours Mirabeau"


Bénéfice : Conformité légale (e-accessibilité), support lecteur d'écran[3][5]

### 2. **Indicateur d'étapes visuels (P1)**
Ajouter breadcrumb ou stepper au-dessus du formulaire :

1. Type

2. Détails

3. Confirmation


Bénéfice : Clarté du parcours, réduction de la confusion[7]

### 3. **Accents et typos (P1)**
Corriger tous les accents français manquants et remplacer l'alerte photo :

function handlePhotoClick() {

const msg = document.createElement('div');

msg.className = 'alert alert-info';

msg.textContent = '📷 Capture photo disponible bientôt. Vous pouvez joindre une image via votre galerie.';

document.querySelector('.photo-zone').parentElement.appendChild(msg);

}


Bénéfice : Professionnalisme, expérience utilisateur fluide

### 4. **Validation formulaire côté client (P1)**
Ajouter validation avant envoi :

function submitSignalement() {

const titre = document.getElementById('sigTitre').value.trim();

const desc = document.getElementById('sigDesc').value.trim();

const quartier = document.getElementById('sigQuartier').value;

if (!titre || titre.length < 10) {

alert('Le titre doit contenir au minimum 10 caractères');

return;

}

if (!desc || desc.length < 20) {

alert('La description doit contenir au minimum 20 caractères');

return;

}

// ... reste du code

}


Bénéfice : Évite les signalements vides, améliore qualité des données[2][10]

### 5. **Responsivité formulaire (P2)**
Adapter layout mobile :

@media (max-width: 640px) {

.cat-grid { grid-template-columns: repeat(2, 1fr); }

.photo-zone { padding: var(--sp-lg); }

.tab-bar { position: sticky; bottom: 0; }

}


Bénéfice : Meilleure expérience sur 60%+ des utilisateurs (mobile-first)[7]

---

## 5. CE QUI EST BIEN

✅ **Flux ergonomique clair** : Catégorie → Formulaire → Confirmation suit le parcours recommandé par les bonnes pratiques[7][10]

✅ **Code de suivi visible** : Génération et affichage immédiat du code (ex: AIX-45823) renforce la confiance et permet le suivi[10]

✅ **Récapitulatif avec status pipeline** : Visualisation de l'avancement du signalement (Reçu → En cours → Résolu) améliore la transparence citoyenne[2]

---

## CONCLUSION

L'application couvre correctement les fonctionnalités essentielles de signalement citoyen (référencées par Lumiplan et Yeldaagent). **L'audit révèle un besoin urgent d'accessibilité** et de validation de saisie. Les 5 améliorations listées sont réalisables en < 4h. Après ces corrections, évaluer avec tests utilisateurs réels sur mobile.

---

## terrain/dashboard-terrain.html
## 1. NOTE /10
**7.5/10**  
UX solide et fonctionnelle (8/10), design cohérent (8/10), contenu pertinent (8/10), technique perfectible (6/10).

## 2. BUGS ou erreurs
- **Accents manquants** : "Acces" → "Accès", "Resolus" → "Résolus", "Cree" → "Créé", "Cloture" → "Clôturé", "Repartition" → "Répartition", "developpement" → "développement".
- **HTML invalide** : Deux balises `<link rel="icon">` redondantes (garder la SVG data-URI + img/logo-header.svg).
- **Liens potentiellement cassés** : Dépendance externe Chart.js (CDN), `js/terrain-engine.js` non fourni (risque d'erreurs runtime).
- **Inline styles excessifs** : Mélange CSS/JS inline pollue le code (ex: `style="display:flex;..."`).
- **Code hardcodé** : Mot de passe 'ADMIN' en clair, non sécurisé.

## 3. PROBLÈMES UX
- **Mobile insuffisant** : Grille stats/charts (minmax 300px) et table à 8 colonnes non adaptées → scroll horizontal inévitable[1][6].
- **Accessibilité faible** : Pas d'ARIA labels (ex: charts, table, boutons), contrastes non vérifiés, emojis sans fallback texte, `autofocus` sans annonce, table sans `scope` sur `<th>`.
- **Navigation confuse** : Lien "App terrain" vers index.html alors que dashboard actif ; lock screen bloque sans feedback visuel clair.
- **Surcharge cognitive** : 4 KPI + 3 charts + table dense sans hiérarchie claire (règle 5 secondes non respectée)[4].
- **Pas de feedback loading** : Init dashboard sans skeleton screens[6].

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Responsive mobile** : Table → cards stackées sur <768px ; stats en colonne unique ; charts adaptatifs avec `maintainAspectRatio: false`[1][6].
2. **Accessibilité** : Ajouter `role="region" aria-label` sur sections/charts, `scope="col"` sur `<th>`, alt descriptifs, keyboard nav pour filters.
3. **Sécurité lock** : Remplacer code hardcodé par localStorage/session + hash ; ajouter 3 tentatives max.
4. **Hiérarchie visuelle** : KPI en **big numbers** asymétriques (plus grand pour "Ouverts") ; limiter table à 7 colonnes max, pagination[3][8].
5. **Loading states** : Skeleton pour stats/charts/table pendant `initDashboard()`[6].

## 5. CE QUI EST BIEN
- **Structure logique** : Lock → stats → charts → table → map → resolved suit flux décisionnel (hiérarchie claire)[3].
- **Interactif efficace** : Filtres chips, advanceStatus one-click, charts Chart.js responsives.
- **Thème cohérent** : CSS vars, couleurs sémantiques (danger/success), brand forte (logo/tagline).

---

## services.html
# Audit UX/UI - services.html (SOS Mairies)

## NOTE GLOBALE : 5,5/10

| Catégorie | Score | Observations |
|-----------|-------|--------------|
| **UX** | 6/10 | Navigation intuitive mais sérieuses lacunes d'accessibilité |
| **Design** | 7/10 | Cohérent, moderne, mais contraste insuffisant |
| **Contenu** | 6/10 | Clair mais incomplet (descriptions courtes) |
| **Technique** | 4/10 | Non-conforme aux normes légales RGAA 4.2 |

---

## 🔴 BUGS ET ERREURS CRITIQUES

- **Accents manquants** : "Inscription listes electorales", "etat civil", "deces", "salle municipale" (12+ occurrences sans accents)
- **Balises sémantiques absentes** : Les `<h3>` dans `.service-header` ne sont pas des vrais titres de section (structure HTML plate)
- **Attributs `alt` manquants** : Les emojis (🗳, 📜, etc.) n'ont pas d'alternative textuelle
- **Pas de `<main>` landmark** : Navigation et contenu ne sont pas correctement structurés
- **Formulaires non accessibles** :
  - Les `<select>` et `<input>` n'ont pas de vraie association `<label>` (la balise existe mais `for` manque)
  - Les `<textarea>` manquent d'attribut `name`

---

## ⚠️ PROBLÈMES UX ET ACCESSIBILITÉ

### Conformité RGAA 4.2 (80% requis depuis 1er janvier 2026)[3]
Cette page **n'atteint probablement pas les 80% de conformité** obligatoires. Risque : **50 000€ d'amende par service en ligne**[1].

### Accessibilité
- **Pas d'attribut `aria-expanded`** sur les cartes cliquables → lecteurs d'écran ne savent pas l'état ouvert/fermé
- **Pas de `role` explicite** sur les boutons d'expansion
- **Contraste insuffisant** : le texte gris (#aix-text-muted) sur fond clair risque de ne pas respecter le ratio AA[4]
- **Navigation au clavier impossible** : `.service-header` utilise `onclick` au lieu de `<button>` → inaccessible au clavier
- **Pas de focus visible** sur les éléments interactifs
- **Liens externes sans indication** : l'icône 🔗 n'est pas compréhensible par tous

### Mobile & UX
- **Trop d'emojis complexes** : mal rendus sur certains navigateurs mobiles
- **Pas de feedback utilisateur** : les alertes `alert()` sont obsolètes (utiliser des toasts)
- **Contraste des boutons** : impossible à vérifier sans voir les variables CSS

---

## 🎯 AMÉLIORATIONS PRIORITAIRES (Max 5)

### 1. **Rendre les cartes accessibles au clavier** [CRITIQUE]
Remplacer `onclick` par des `<button>` natifs avec `aria-expanded` :



### 2. **Corriger la structure sémantique et les accents** [HAUTE]
- Utiliser une vraie hiérarchie : `<section>` → `<h2>` → `<div class="service-card">` → `<h3>`
- Ajouter `<main>` autour du contenu principal
- Corriger tous les accents (é, è, ç, ô)
- Remplacer les balises `<h3>` par des `<span>` ou restructurer avec des `<h2>` pour chaque service

### 3. **Améliorer l'accessibilité des formulaires** [HAUTE]

Type de salle



### 4. **Ajouter des attributs `alt` aux icônes et améliorer le contraste** [MOYENNE]

🗳️


Vérifier que le ratio de contraste AA est respecté (4.5:1 pour du texte normal)[3].

### 5. **Remplacer les alertes par des notifications accessibles** [MOYENNE]

function showNotification(message) {

const notification = document.createElement('div');

notification.setAttribute('role', 'alert');

notification.className = 'toast';

notification.textContent = message;

document.body.appendChild(notification);

setTimeout(() => notification.remove(), 3000);

}



---

## ✅ POINTS FORTS

1. **Design cohérent et moderne** : Utilisation intelligente des variables CSS, design système bien pensé (espacement, couleurs, transitions)
2. **Navigation fluide** : Structure de menu logique, organisation des services pertinente pour une mairie
3. **Contenu pratique** : Services réels et utiles, liens vers les portails officiels (service-public.fr, mairie-aixenprovence.fr)

---

## ⚖️ CONTEXTE LÉGAL

Depuis le **28 juin 2025**, l'Acte Européen sur l'Accessibilité s'applique[1]. Cette page étant un service numérique municipal, elle doit respecter le **niveau AA des WCAG** (106 critères). Le seuil de **80% de conformité RGAA 4.2** est obligatoire depuis le **1er janvier 2026**[3]. Le non-respect expose à des amendes jusqu'à **50 000€ par service non conforme**[1].

**Priorité absolue : faire un audit RGAA complet et remédier aux défauts sémantiques et d'accessibilité clavier.**

---

## signaler-demo.html
## 1. NOTE /10
**UX: 8/10** | **Design: 9/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Global: 7.5/10** (Design mobile-first excellent, mais JS incomplet et accessibilité RGAA insuffisante pour mairies en 2026[1][2]).

## 2. BUGS ou erreurs
- **Code JS tronqué**: `var commune = decodeURIComponent(params.get` incomplet → bottom bar cassée, étapes non fonctionnelles.
- **Accents manquants**: "probleme" → "problème" (titre, header, h2) ; "tres" → "très" ; "etape" → "étape".
- **HTML invalide**: `<link rel="icon" href="data:image/svg+xml,...">` malformé (guillemets simples dans SVG) ; balises `<h2>` sans sémantique (pas de `<main>`).
- **Liens cassés potentiels**: `js/tracking.js` non fourni ; Leaflet chargé mais `#map` sans init.
- **Icônes Unicode**: `🏛️` (favicon) peut casser sur certains navigateurs.

## 3. PROBLÈMES UX
- **Navigation mobile**: Bottom bar OK, mais pas de `touch-action: manipulation` → gestes imprécis ; grid catégories passe 3→2 cols (<400px) mais trop serré.
- **Lisibilité**: Contrastes bons (blue/gray), mais petits textes (0.78rem) sur mobile ; pas de `prefers-reduced-motion` pour animations pulse[4].
- **Accessibilité RGAA critique** (mairie = secteur public, 80% requis 2026[1][2][5]):
  - Pas d'`alt` sur icônes/inputs file.
  - Boutons sans `aria-label`/`aria-expanded` (ex: back, urgency).
  - Pas de `role="main"`, landmarks ARIA (header/main/footer)[4].
  - Formulaires: labels OK mais pas `aria-describedby` pour erreurs ; clavier non testé (focus invisibles).
  - Pas de déclaration accessibilité obligatoire[1].
- **GPS**: Pulse animations intrusives ; map sans controls ARIA.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Compléter JS** : Ajouter fonctions `nextStep()`, `prevStep()`, `handlePhoto()`, geoloc, catégories dynamiques, recap → rend fonctionnel.
2. **RGAA fix** : Ajouter `alt` icônes, `aria-label` boutons, `<main role="main">`, `lang="fr"` cohérent, contrasts AA (tester WCAG 2.2[3][4]).
3. **Responsive** : `min-height: 44px` cibles tactiles (WCAG 2.2[4]) ; `touch-action: manipulation` sur boutons.
4. **Corrections ortho/HTML** : Accents, valider favicon, wrap JS/script dans `<main>`.
5. **Perf** : Lazy-load Leaflet ; compresser CSS inline (15kb → gzipped).

## 5. CE QUI EST BIEN
- **Design mobile-first** : Palette accessible (bleu/vert/rouge sémantique), shadows subtils, animations fluides.
- **UX wizard intuitif** : Steps bar claire, bottom bar sticky, photo slots drag-friendly.
- **Contenu adapté mairies** : Urgence/échelons, recap/timeline rassurants pour élus/usagers.

---

## signalement.html
## 1. NOTE /10
**UX: 8/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 7/10**  
**Note globale: 7.5/10** – Interface fluide et moderne, mais lacunes en accessibilité et finitions.

## 2. BUGS ou erreurs
- **Accents manquants**: "probleme" → "problème" (h1, h3, placeholders) ; "Decrivez" → "Décrivez" ; "precisement" → "précisément".
- **HTML invalide**: Classes CSS inline manquantes (`.sig-screen` utilise `display:none/animation` sans définition complète) ; `status-pipeline` et `.status-step` stylés inline sans CSS global.
- **Liens cassés potentiels**: Dépendance `AixEngine.SIGNALEMENT_CATS` / `AixEngine.QUARTIERS` (non fournis) ; photo-zone déclenche `alert()` basique.
- **Console errors**: `renderList()` appelle `AixEngine.getDemoSignalements()` et `AixEngine.getQuartierName()` non définis localement.

## 3. PROBLÈMES UX
- **Navigation mobile**: Tab-bar et navbar se chevauchent sur petits écrans (pas de media query spécifique) ; grid catégories trop dense (<140px sur mobile).
- **Lisibilité**: Textes petits (13px/12px) sans contraste garanti (dépend `--aix-text-muted`) ; zoom >175% casse layout (non responsive)[3].
- **Accessibilité**: Pas d'`aria-label`/`aria-expanded` sur boutons/tabs ; selects sans `aria-describedby` ; icônes Lucide sans `alt` équivalent ; focus invisible sur `.cat-btn`[6].
- **Feedback insuffisant**: Pas de validation formulaire (champs vides acceptés) ; transitions sans `prefers-reduced-motion`[3].

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corrections orthographe/accents** + ajouter `lang="fr"` cohérent + `aria-label` sur tous boutons (ex: `aria-label="Sélectionner nid-de-poule"`).
2. **Accessibilité WCAG**: Ajouter `role="tablist"` sur `.tabs-switch`, `aria-selected` sur buttons ; `alt` sur photo-zone ; `required` + `aria-invalid` sur formulaire.
3. **Géolocalisation/photo**: Remplacer alert par input file + géoloc auto (navigator.geolocation) pour signalements citoyens efficaces[8][9].
4. **Validation formulaire**: Ajouter checks JS (titre requis, quartier sélectionné) avec feedbacks visuels (erreurs en rouge).
5. **Mobile/responsive**: Media query `@media (max-width: 480px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }` + augmenter tailles touch (44px min).

## 5. CE QUI EST BIEN
- **Flux intuitif**: Étapes claires (cat → form → success) avec retours visuels (tabs, animations), aligné UX citoyenne[1][2].
- **Design cohérent**: Thème Aix propre, interactions fluides (hover, transitions), icônes expressives pour catégories.
- **Fonctionnalités clés**: Suivi localStorage + pipeline status réaliste ; code unique généré pour confiance utilisateur[9].

---

## terrain/dashboard.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** – Solide base responsive et visuelle, mais freiné par surcharge info et erreurs techniques.

## 2. BUGS ou erreurs
- **Code JS incomplet**: `renderServiceChart` coupé (`y: { max: 100, grid: { display: false }`), `renderMap` et `renderSignalList` manquantes → crash à l'init.
- **HTML invalide**: `<link rel="icon">` dupliqué (SVG data + img/logo-header.svg); balise `<main>` imbriquée sans sémantique claire.
- **Accents manquants**: "Resolus" → "Résolus"; "Acces" → "Accès"; "Immediat" → "Immédiat"; "signale" → "signalé".
- **Fonctions manquantes**: `exportCSV()`, `exportPDF()` non définies; dépendance `TerrainEngine` externe non fournie.
- **Map non initialisée**: Leaflet chargé mais `dashMap` jamais instancié → conteneur vide.

## 3. PROBLÈMES UX
- **Surcharge visuelle mobile**: 4 stats + 4 charts + liste = scrolling excessif (contredit bonnes pratiques: max 5-6 KPIs vue initiale[2][4]).
- **Lisibilité mobile**: Filtres flex-wrap OK, mais stats-grid 4-colonnes casse <400px; charts trop petits (hauteur fixe manquante).
- **Accessibilité faible**: Pas d'`aria-label` sur inputs/charts; emojis icons sans fallback texte; focus login OK mais contrastes CSS non vérifiés; pas de `role="img"` sur logo.
- **Navigation confuse**: Bottom-nav persiste sur login (risque confusion); lien "admin-vie.html" incohérent avec projet mairies.
- **Sécurité/login**: Code 'TERRAIN' hardcodé visible (indice + console) – non sécurisé pour élus.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Réparer JS incomplet**: Compléter `renderServiceChart`, implémenter `renderMap` (Leaflet basique), `renderSignalList` (table responsive), exports (jsPDF/CSV natif).
2. **Simplifier vue initiale**: Masquer charts sous accordéon/mobile; prioriser **alertes + stats + map** (1 objectif/page[4]).
3. **Améliorer mobile/accessibilité**: Ajouter media-queries stats (2-col <600px); `aria-label` filtres/charts; clavier-nav bottom-nav; WCAG contrastes.
4. **Sécuriser login**: Hash code ou API backend; supprimer indice visible; ajouter `autocomplete="off"`.
5. **Filtres avancés**: Ajouter recherche texte + date; debounce `applyFilters` pour perf.

## 5. CE QUI EST BIEN
- **Structure hiérarchique claire**: Stats globales → alertes urgentes → viz → liste (bonne priorisation KPIs[1][4]).
- **Responsive PWA-ready**: Viewport, manifest, offline-badge, theme-color – excellent pour terrain mairies.
- **Viz cohérentes**: Charts Chart.js variés/adaptées (doughnut catégories, bar horizontal communes) avec couleurs sémantiques.

---

## simulateur.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Global: 7/10** – Solide base visuelle et fonctionnelle, mais bugs critiques et lacunes UX/mobile.

## 2. BUGS ou erreurs
- **Code JS tronqué**: Script s'arrête à `da` dans `chartRevenue` dataset → graphs non rendus, page cassée.
- **Mix % non normalisé**: Somme inputs mix (ex: 60+25+12+3=100%) non validée → calculs erronés si >100%.
- **HTML invalide**: `<div class="grid-2 grid">` (classe redondante), canvas sans `width/height` explicites, `mb-xl` sans CSS.
- **Churn mathématique faux**: `totalClients` peut devenir négatif (corrigé à 0, mais logique défaillante Y1).
- **Pas d'accents manquants**, liens internes OK (pas testables sans fichiers).

## 3. PROBLÈMES UX
- **Mobile**: Grid controls (12 inputs) sur `minmax(200px)` → scrolling horizontal massif, labels/hints illisibles <768px.
- **Accessibilité**: Pas d'`aria-label` sur inputs/tabs, contrastes OK mais focus states faibles, pas de `role="tablist"` sur scénarios.
- **Navigation**: Navbar sans burger mobile, liens non sémantiques (`<ul>` sans `role="menubar"`).
- **Lisibilité**: Font-sizes trop petits (11-13px hints/labels), table P&L dense sans zebra-striping.
- **Feedback**: Pas de loading/recalc indicator, inputs sans validation visuelle (erreurs silencieuses).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Fix JS urgent**: Compléter charts (copier datasets manquants pour `profit`, `clients`, `segment`), tester rendu.
2. **Mobile-first controls**: `grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))` → `1fr` sur mobile + accordéon pour 12 inputs.
3. **Valider mix %**: Ajouter `oninput` pour normaliser somme=100% (JS: `mixTotal = mixV+mixB+...; if>1 ajuster`).
4. **Accessibilité**: Ajouter `aria-label`, `role="tablist"`, keyboard nav tabs, `required` + messages d'erreur inputs.
5. **Perf/UX**: Debounce `recalc()` (300ms), skeleton loading charts, export CSV P&L.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème France (vars CSS), gradients pros, responsive base (max-width 1100px).
- **Interactivité fluide**: Scénarios tabs intuitifs, realtime calc malgré bugs.
- **Contenu pertinent**: Modèle financier réaliste pour mairies (segments prix, churn, CAC), KPIs impactants.

---

## terrain/index.html
### 1. NOTE /10
**8/10** (UX fluide et mobile-first, design cohérent, contenu pertinent ; pertes sur accessibilité et polish technique).

### 2. BUGS ou erreurs
- Accents manquants : "reseau" → "réseau", "Haute-Correze" → "Haute-Corrèze" (titre, logo alt, footer).
- HTML invalide : `🏛️` (emoji basket) mal encodé dans favicon SVG ; doublon `<link rel="icon">`.
- Liens potentiellement cassés : `index.html`, `suivi.html`, `signaler.html?cat=...` (non vérifiables sans contexte).
- Script inline dépend de `TerrainEngine` non fourni (risque d'erreur JS si `terrain-engine.js` absent).

### 3. PROBLÈMES UX
- **Accessibilité faible** : Pas d'attributs `aria-label` complets (ex: cards générées sans `role="button"`), contrastes non garantis (badges urgency), clavier-nav ignoré sur grid dynamique.
- **Navigation mobile** : Toggle burger sans `aria-expanded`, liens nav chevauchent potentiellement sur petits écrans.
- **Lisibilité** : Hero surcharge visuelle (logo + badge + h1), offline-banner statique sans dismiss.
- **PWA incomplète** : Manifest sans `scope`, SW sans `scope` précis ; `user-scalable=no` pénalise zoom accessibilité.

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA AA** : Ajouter `role="grid"`, `aria-label` sur cards/buttons ; tester WCAG contrasts (ex: orange icon sur fond).
2. **Corrections ortho/SEO** : Uniformiser "Haute-Corrèze", meta description plus descriptive ; balises `alt` explicites (hero__logo → "Logo Haute-Corrèze Communauté").
3. **Perf mobile** : Lazy-load images (logo SVG), réduire JS inline → module ; ajouter skeleton loader pour categoryGrid.
4. **Navigation** : Menu persistant bottom-bar mobile ; bouton "retour" dans hero pour PWA.
5. **Offline UX** : Compteur signalements offline différencié ; toast dismissible pour banner.

### 5. CE QUI EST BIEN
- **Mobile-first parfait** : Viewport optimal, grid responsive, offline-first avec SW (idéal pour terrain communal).
- **Contenu incisif** : Hero "45s" capte attention, catégories dynamiques avec urgency/délai (actionnable pour élus).
- **PWA prête** : Theme-color, manifest, online/offline detection fluide ; lightweight (pas de bloat).

---

## signaler-demo.html
## 1. NOTE /10
**8.5/10**  
UX: 9/10 (flow intuitif, mobile-first). Design: 9/10 (moderne, cohérent). Contenu: 8/10 (clair, contextualisé). Technique: 8/10 (robuste, mais JS incomplet).

## 2. BUGS ou erreurs
- **Code JS tronqué** : `var commune = decodeURIComponent(params.get` incomplet → page non fonctionnelle sans `tracking.js`.
- **Accents manquants** : "probleme" → "problème" (titre, h2, etc.) ; "tres" → "très" ; "geolocalisation" → "géolocalisation".
- **HTML invalide** : Favicon SVG malformé (`🏛️` non standard) ; balises `<h2>`, `<p>` sans classe dans `.screen`.
- **Liens externes** : Dépendance `js/tracking.js` (absent) ; Leaflet OK mais map non initialisée.

## 3. PROBLÈMES UX
- **Accessibilité RGAA/WCAG AA insuffisante** (obligatoire 2026 pour services publics) : Pas d'`alt` sur icônes/images ; `aria-label` manquants (btn back, photo-slots) ; contrastes limites (icônes grises) ; pas de `role="progressbar"` pour steps-bar[1][2][3].
- **Navigation mobile** : Bottom-bar OK, mais pas de focus visible au clavier ; swipe gestures absents pour wizard.
- **Lisibilité** : Textes petits (0.78rem) sur mobile ; pas de `prefers-reduced-motion` ; GPS pulse animé intrusif.
- **Formulaires** : Champs obligatoires (`*`) sans `required` HTML ; pas d'`aria-describedby` pour instructions[3].

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Ajouter accessibilité RGAA** : `alt` icônes (`alt="Appareil photo"`), `aria-label` btns, `role="button"` cat-btn, contrastes >4.5:1, `lang="fr"` cohérent[1][5].
2. **Compléter JS** : Fonctions `nextStep()`, `handlePhoto()`, `setUrgency()`, init Leaflet/map, géoloc auto (`navigator.geolocation`).
3. **Corrections orthographe/SEO** : Ajouter accents ; `<title>Signaler un problème — SOS Mairies</title>` ; meta description.
4. **Mobile perf** : Lazy-load Leaflet ; réduire animations sur `prefers-reduced-motion: reduce`.
5. **Validation form** : `required` sur `#description` ; feedback erreur (ex: bordure rouge).

## 5. CE QUI EST BIEN
- **Design system cohérent** : CSS vars, radius/shadows uniformes, responsive grid (cat/photo).
- **Flow wizard intuitif** : Steps-bar visuelle, bottom-bar sticky, transitions fluides.
- **Mobile-first parfait** : Touch targets >44px, capture caméra native, GPS intégré.

---

## sos-voisins.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** (solide visuellement, mais lacunes accessibilité/RGAA et JS incomplet).

## 2. BUGS ou erreurs
- **Code HTML tronqué**: Script JS coupé (`desc: 'Voisin bricoleur en` → incomplet, grids vides (`id="situationGrid"` etc.).
- **Accents manquants**: "enferme(e)", "demarre", "resolus", "alerte", "reponse" (manque ´/è/ê).
- **HTML invalide**: Balises Lucide `<i data-lucide>` sans script d'initialisation; `label:has(input:checked)` non supporté IE/anciens navigateurs.
- **Liens internes**: Navigation pointe vers pages inexistantes (ex: `forum-citoyen.html`).
- **Favicon SVG inline**: Risque d'affichage dégradé sur certains navigateurs.

## 3. PROBLÈMES UX
- **Accessibilité RGAA/WCAG faible** (critique 2026 pour mairies): Pas d'`alt` sur icônes/emoji, contrastes rouges insuffisants (hero #E83A2A), formulaires sans `aria-label`/`required`, navigation clavier non testée, pas de `prefers-reduced-motion` pour animations pulse/sos-pulse[1][2][3].
- **Mobile**: Grids OK mais boutons trop larges (`width:100%`), modale `max-height:90vh` risque overflow sur petits écrans.
- **Navigation**: Navbar + tab-bar redondants; pas de fil d'Ariane ni skip-links.
- **Lisibilité**: Polices petites (11-13px) sur cards/status; animations intrusives sans pause.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA AA**: Ajouter `alt` emojis (`alt="Clés"`), `aria-label` boutons/modale, `role="button"` sur cards cliquables, contraste min 4.5:1, déclaration accessibilité footer[1][2][3].
2. **Compléter JS**: Remplir `#situationGrid`/ `#voisinGrid`/ `#resolvedFeed` via `quartier-engine.js`; corriger troncature SITUATIONS.
3. **Formulaires**: Ajouter `required` + validation JS (ex: `rName` non vide); `aria-describedby` pour instructions.
4. **Responsive**: `@media (max-width:480px)` pour stat-banner (1col), réduire padding hero.
5. **Perf**: Lazy-load Lucide, minifier CSS inline (trop volumineux).

## 5. CE QUI EST BIEN
- **Design cohérent/thématique**: Gradient rouge SOS impactant, cards hover fluides, stats-banner engageant.
- **UX intuitive**: Bouton SOS proéminent, modale contextualisée, checkboxes skills visuelles (emoji).
- **Mobile-first**: Viewport, grids auto-fill, tab-bar bottom efficace pour app-like.

---

## terrain/signaler.html
## Audit UX/UI - signaler.html (SOS Mairies)

**Note globale : 7/10**  
*(UX: 8/10 - flux intuitif ; Design: 7/10 - moderne mais perfectible ; Contenu: 7/10 - clair ; Technique: 6/10 - bugs + accessibilité faible)*

### 2. BUGS / Erreurs
- **Code JS tronqué** : `updateOnline()` incomplet (`!navigato` → `!navigator.onLine`).
- **Accents manquants** : "Categorie" → **"Catégorie"** ; "Decris" → **"Décris"** ; "Ou" → **"Où"**.
- **HTML invalide** : `<h2 style="margin-bottom:var(--space-lg);">` sans `--space-lg` défini inline (dépendance CSS externe).
- **Alt manquant** : `<img src="img/logo-header.svg" alt="Haute-Correze">` → **alt="SOS Terrain"**.
- **Liens potentiels** : `suivi.html` non vérifié, risque 404.

### 3. PROBLÈMES UX
- **Accessibilité RGAA critique** (obligatoire 2026 pour mairies[1][2]) : 
  - Pas de **labels `<label for="id">`** sur inputs/select (critère 12.1).
  - **Contraste inconnu** (dépendance CSS, risque échec 3.1).
  - **Navigation clavier impossible** : boutons sans `tabindex`, focus invisible.
  - Pas de **h1 sémantique** (seuls h2/h3).
- **Mobile** : `user-scalable=no` bloque zoom (WCAG 1.4.4[1]).
- **GPS** : Pas de bouton retry après échec.
- **Formulaires** : Pas de validation en temps réel (ex: catégorie obligatoire).

### 4. AMÉLIORATIONS (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `for` sur tous labels, `aria-label` sur icônes, `role="img"` sur SVG, tester contraste >4.5:1.
2. **Validation progressive** : Activer "Suivant" seulement si données valides (catégorie, GPS/lieu, 1+ photo).
3. **Champs obligatoires** : Marquer `*` sur catégorie/lieu ; `required` HTML5 + messages d'erreur ARIA.
4. **Performance** : Lazy-load photos ; compresser plus (0.7→0.5 JPEG).
5. **Offline PWA** : Ajouter `serviceWorker` + sync queue pour envois différés.

### 5. POINTS FORTS
- **Flux wizard intuitif** : 4 étapes logiques avec dots + récap → **conversion élevée**.
- **PWA native** : Offline banner, GPS, capture caméra, timer → **expérience terrain fluide**.
- **Design cohérent** : Icônes emoji, badges urgency, thumbnails compressés → **moderne et engageant**.

---

## simulateur.html
Je ne peux pas conduire un audit UX/UI complet sans accès aux fichiers CSS et JavaScript complets, ainsi qu'à la page rendue en navigateur (notamment le rendu mobile et les interactions dynamiques).[2][5] Cependant, voici une analyse basée sur le code HTML fourni et les bonnes pratiques d'audit UX.

## Note globale : 6,5/10

- **UX** : 6/10 | **Design** : 7/10 | **Contenu** : 6/10 | **Technique** : 7/10

---

## Bugs et erreurs identifiés

- **HTML incomplet** : Le code JavaScript est coupé au milieu (dernière ligne du `chartRevenue`). Le fichier ne fonctionne pas.
- **Accents** : « Modelisez » (devrait être « Modélisez »), « Repartition » (« Répartition »), « previsionnel » (« prévisionnel »), « Parametres » (« Paramètres »).
- **Entités HTML** : Mélange d'unicodes (📊) et entités (€) — risque d'incohérence d'affichage selon les navigateurs.
- **Meta viewport** : `maximum-scale=5.0` restreint inutilement le zoom utilisateur — norme WCAG recommande pas de limite strict.
- **Classes CSS manquantes** : `.kpi-grid`, `.kpi-card`, `.table-wrapper`, `.grid-2` référencées mais non définies dans le `<style>` fourni.

---

## Problèmes UX majeurs

| Problème | Criticité | Impact |
|----------|-----------|--------|
| **Formulaire sans validation** | Élevée | Risque d'entrées invalides (ex. mix > 100%), résultats aberrants |
| **Pas de confirmation avant reset** | Modéré | L'utilisateur peut perdre ses paramètres accidentellement |
| **Graphiques non responsifs** | Élevée | Canvas Chart.js se brise sur mobile < 576px |
| **Pas d'aide contextuelle** | Modéré | Les champs « Mix Village/Bourg/Ville/Grande ville » manquent d'explication sur leur interrelation |
| **Contraste texte insuffisant** | Élevée | Texte blanc sur dégradé bleu — vérifier ratio WCAG AA (4.5:1) |
| **Pas de barre de progression** | Faible | L'utilisateur ignore si le calcul est en cours |

---

## Améliorations prioritaires

1. **Validation des inputs** (Priorité 1 — Bloquant)
   - Ajouter vérification : sum(mix) = 100%, penetration > 0, churn < 100%
   - Message d'erreur inline clair + désactiver bouton recalc si invalide

2. **Mobile-first responsive** (Priorité 1 — Bloquant)
   - `.control-grid` : passer de `minmax(200px, 1fr)` à `minmax(150px, 1fr)` sur mobile
   - Stacker les graphiques en colonne sur < 768px
   - Tester sur iPhone 12 / Android 12

3. **Accessibilité WCAG AA** (Priorité 2 — Sérieux)
   - Ajouter `role="group"` et `aria-labelledby` sur panneaux de contrôle
   - Vérifier contraste texte blanc/gradient bleu (utiliser outil WAVE)
   - Labels explicites pour inputs numériques

4. **Clarification UX du modèle** (Priorité 2 — Sérieux)
   - Afficher **tooltip/popover** au survol des champs « Mix » : « Répartition des communes par taille (doit totaliser 100%) »
   - Ajouter **reset to default** button explicite
   - Afficher l'**état du formulaire** (validé/erreurs) visuellement

5. **Performance et complétude** (Priorité 3 — Amélioration)
   - Terminer le code JavaScript coupé
   - Lazy-load Chart.js (non-critique)
   - Ajouter export CSV/PDF des résultats

---

## Points forts

1. **Architecture claire** : Séparation logique (header → scénarios → contrôles → résultats) bien structurée pour un cas d'usage complexe (simulateur financier).
2. **Palette de marque cohérente** : Utilisation systématique des variables CSS (`--fr-blue`, `--fr-grey-*`) — maintenabilité excellente.
3. **Interactivité dynamique** : Les tabs de scénarios et recalcul instantané offrent une bonne boucle feedback utilisateur.[3]

---

**Recommandation** : Avant audit UX complet, corriger d'urgence le code JS tronqué, ajouter validation form, et tester rendu mobile en navigateur réel.

---

## terrain/admin-vie.html
# Audit UX/UI — SOS Terrain (admin-vie.html)

## Note globale : 6.5/10

| Catégorie | Score |
|-----------|-------|
| **UX** | 6/10 |
| **Design** | 7/10 |
| **Contenu** | 7/10 |
| **Technique** | 5/10 |

---

## 🐛 Bugs et erreurs techniques

- **HTML incomplet** : Le dernier formulaire (Bon de commande) est **tronqué** au milieu du code (`da` coupé). Cela empêche le rendu correct.
- **Accents non échappés** : Caractères spéciaux mal gérés dans certains labels (ex: `Pointe` vs `Pointé`).
- **Inline styles excessifs** : CSS dispersé partout au lieu d'une feuille centralisée (`terrain-theme.css`), rendant la maintenance difficile.
- **event.stopPropagation()** répété 15+ fois → À centraliser en JavaScript.
- **Pas d'attributs ARIA** : Zéro accessibilité pour lecteurs d'écran.

---

## ⚠️ Problèmes UX majeurs

1. **Lisibilité compromise sur mobile** : Trop d'éléments cliquables proches les uns des autres (risque de mauvais clics)[5]. Espacer davantage.

2. **Hiérarchie visuelle insuffisante** : Tous les cards ont le même poids visuel. Les tâches urgentes (ex: pointage, rapport) ne se démarquent pas[8].

3. **Manque de feedback utilisateur** : Aucun message de confirmation après soumission, pas de loader visible.

4. **Cohérence cassée** : Mélange de boutons (`.big-action-btn`, `.btn`, `.filter-chip`) avec styles différents[1]. Créer un système cohérent.

5. **Navigation sur N7 trop longue** : 5 formulaires d'affilée sans pagination. Segment en étapes/écrans[3].

6. **Accessibilité WCAG manquante** : Pas de contraste suffisant sur `var(--text-light)`, pas d'étiquettes correctes pour inputs[5].

---

## ✅ Améliorations prioritaires

| Priorité | Action |
|----------|--------|
| **1 - CRITIQUE** | Corriger le HTML cassé (formulaire Bon de commande). Valider avec un validateur W3C. |
| **2 - HAUTE** | Implémenter un **guide de style/système de design** : couleurs, typographie, espacements uniformes sur tous les éléments[8]. |
| **3 - HAUTE** | Ajouter **attributs ARIA** (`aria-label`, `role="button"`) et tester avec lecteur d'écran (WCAG 2.1 AA)[5]. |
| **4 - MOYENNE** | Diviser les 5 cards N7 en **onglets ou sections masquées** pour réduire le scrolling[3]. Ajouter indicateurs de progression. |
| **5 - MOYENNE** | **Tester sur mobile réel** : Vérifier espacements boutons, zones de clic (minimum 44×44 px)[5]. Ajouter confirmations visuelles post-action. |

---

## 💪 Points forts

1. **Structure logique claire** : Hiérarchie N7→N6→N5→N4→N3 bien organisée. Filtres fonctionnels[1].

2. **Contexte mobile-first pensé** : Utilisation d'`inputmode`, capture photo native, dimensions adaptées. Bon départ[5].

3. **Contenu pertinent et concis** : "1 tap", "30 sec" communiquent clairement la promesse d'efficacité. Phrases courtes, pas de jargon[2].

---

## terrain/suivi.html
# Audit UX/UI — SOS Terrain (suivi.html)

## NOTE GLOBALE: 6/10

- **UX:** 6/10 (structure claire, mais problèmes d'accessibilité majeurs)
- **Design:** 7/10 (cohérent, responsive basique)
- **Contenu:** 6/10 (concis mais incohérences de langue)
- **Technique:** 5/10 (HTML généré en inline, pas de semantic, vulnérabilités XSS)

---

## BUGS ET ERREURS

| Problème | Sévérité | Description |
|----------|----------|-------------|
| **XSS potentiel** | 🔴 Critique | `innerHTML += ... s.description ...` sans échappement. Les signalements malveillants exécutent du code JS |
| **Typos de langue** | 🟡 Moyen | "Recu" (doit être "Reçu"), "Cloture" (doit être "Clôture"), "Resolus" (doit être "Résolus") |
| **Meta viewport** | 🟡 Moyen | `user-scalable=no` bloque le zoom utilisateur — contre WCAG 2.1 |
| **Pas de `lang` sur `<html>`** | 🟡 Moyen | Omis alors que la page est en français |
| **Images sans `alt`** | 🔴 Critique | Photos de signalements n'ont pas d'attribut `alt` (photos dans boucle) |
| **`aria-label` sur `<button>` generic** | 🟡 Moyen | Le bouton toggle a un label, mais la valeur "Menu" ne décrit pas l'action |

---

## PROBLÈMES UX ET ACCESSIBILITÉ

**Accessibilité RGAA** (contexte collectivités)[3]:

- ❌ **Pas de heading `<h1>`** — Pas de titre principal identifiant la page
- ❌ **Contraste insuffisant** — `.text-muted` et `.text-secondary` probablement sous 4.5:1 (non vérifié mais patterns courants)
- ❌ **Focus visible manquant** — Pas de `:focus-visible` CSS visible
- ❌ **Statut de filtre non annoncé** — Le chip "active" n'a pas `aria-current="page"`

**Mobile & Responsive:**

- ⚠️ **Sticky FAB peut masquer du contenu** — Le bouton "+" en `position:fixed` à `bottom: 16px` recouvre potentiellement la liste
- ⚠️ **Stats-grid sur mobile** — 4 colonnes sur petit écran = texte cramé

**Navigation & Logique:**

- ❌ **Lien "Signaler" pointe vers `signaler.html`** — Fichier n'existe pas dans le code fourni (404)
- ❌ **Statistiques toujours sur données complètes** — Incohérence : elles ne reflètent pas les filtres appliqués

---

## AMÉLIORATIONS PRIORITAIRES (Top 5)

### 1. **Corriger les vulnérabilités XSS** 🔴

// ❌ Actuel (dangereux)

html += '

' + s.description + '

// ✅ Utiliser un helper d'échappement

function escapeHtml(text) {

const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };

return text.replace(/[&<>"']/g, m => map[m]);

}

html += '

' + escapeHtml(s.description) + '



### 2. **Ajouter un `<h1>` et respecter WCAG/RGAA** 🔴


Retirer `user-scalable=no` et ajouter CSS pour contraste.

### 3. **Corriger les accents et typos français** 🟡



### 4. **Aligner stats avec filtres actifs** 🟡
Les statistiques au sommet doivent refléter les données filtrées, sinon l'utilisateur est confus. Créer une fonction `getFilteredStats()`.

### 5. **Remplacer `innerHTML` par DOM API** 🟡

// ✅ Au lieu de chaînes HTML, utiliser createElement/appendChild

var cardEl = document.createElement('div');

cardEl.className = 'card';

// Construire le DOM de manière safe



---

## CE QUI EST BIEN ✅

1. **Structure et hiérarchie claire** — Navigation simple, sections bien délimitées, logique de filtrage cohérente
2. **Design system minimal mais fonctionnel** — Couleurs, espacements, composants (badges, chips, cards) consistent
3. **Responsive mobile-first** — Flex layout, variables CSS, FAB adapté — structure de base solide

---

## terrain/dashboard-terrain.html
## 1. NOTE /10
**7.5/10**  
UX: 8/10 (structure claire, stats prioritaires). Design: 7/10 (cohérent mais inline styles). Contenu: 8/10 (pertinent pour mairies). Technique: 7/10 (fonctionnel mais perfectible).[1][2]

## 2. BUGS ou erreurs
- **Accents manquants** : "Acces" → "Accès", "Resolus" → "Résolus", "Cree" → "Créé", "Cloture" → "Clôturé", "developpement" → "développement".
- **HTML invalide** : Deux `<link rel="icon">` en doublon (garder le SVG data-URI ou l'externe). `<script src="js/cgu-gate.js">` en fin body sans usage visible.
- **Liens potentiellement cassés** : Dépendance `js/terrain-engine.js` (non fourni) ; tester `TerrainEngine` methods.
- **JS erreurs** : `stats.parUrgence` assume clés exactes (HAUTE/etc.) ; risque crash si manquantes.

## 3. PROBLÈMES UX
- **Mobile** : Grilles stats/charts non responsive (minmax 300px force scroll horizontal) ; table non scrollable horizontalement ni card-based sur petit écran.[4]
- **Navigation** : Lien "active" statique sur dashboard ; pas de breadcrumb ou retour lock screen.
- **Accessibilité** : Pas d'ARIA (labels charts/tables), contrastes badges à vérifier, clavier nav incomplet (focus buttons table), emojis non sémantiques (🔐 sans alt).[1]
- **Lisibilité** : Inline styles partout (maintenance lourde) ; surcharge table (8 colonnes sans tri/recherche).[5]

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Responsive mobile** : Ajouter media queries CSS (`@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr 1fr; } .table { overflow-x: auto; } }`) ; transformer table en cards sur mobile.[4]
2. **Accessibilité** : Ajouter `role="region" aria-label` sur charts, `scope="col"` sur `<th>`, `aria-live="polite"` sur stats dynamiques ; tester WCAG contrastes.
3. **Inline styles → CSS** : Migrer tous `style=""` vers `terrain-theme.css` (ex: `.stats-grid { display: grid; gap: var(--space-lg); }`).
4. **Filtres table avancés** : Ajouter recherche input + tri colonnes (icônes ↑↓ sur `<th>`).
5. **Loading states** : Ajouter skeleton screens sur initDashboard (ex: placeholders gris animés pour stats/charts).[4]

## 5. CE QUI EST BIEN
- **Hiérarchie claire** : Stats KPI en haut (règle 5s), puis charts, table ; priorise action (avanceStatus).[1][6]
- **Lock screen sécurisé** : Simple, autofocus, Enter valide ; protège dashboard direction.
- **Interactif opérationnel** : Filtres status, boutons avance direct, charts variés (bar/line/doughnut) ; export CSV pratique.[2]

---

## sos-voisins.html
# Audit UX/UI — SOS Voisins (Aix Ensemble)

## Note globale : 6.5/10

**Ventilation :**
- UX : 6/10 (problèmes d'accessibilité majeurs)
- Design : 7/10 (cohérent mais améliorable)
- Contenu : 7/10 (clair, adapté au contexte)
- Technique : 6/10 (HTML incomplet, risques de conformité légale)

---

## 🐛 Bugs et erreurs critiques

1. **HTML incomplet** : Le script JavaScript `<script src="js/quartier-engine.js"></script>` est appelé mais les données (`SITUATIONS`, grilles de voisins, etc.) ne sont pas pré-remplies. Les conteneurs `#situationGrid`, `#voisinGrid`, `#resolvedFeed` restent vides à moins que du JS dynamique ne les remplisse.

2. **Balise `<textarea>` fermée incorrectement** : Dans le modal SOS, la balise n'a pas de contenu de fermeture valide (`</textarea>` manquante dans le code fourni).

3. **Accents manquants/mal encodés** : 
   - "enferme(e)" devrait être "enfermé(e)"
   - "echappe" → "échappé"
   - "demarre" → "démarre"
   - "besoin d'un medicament" → "besoin d'un médicament"

4. **Icônes Lucide non chargées** : Les balises `<i data-lucide="...">` requièrent une librairie d'icônes non incluse (`<script src="...lucide.min.js"></script>` manquant).

5. **Lien favicon brisé** : SVG inline pour le favicon peut échouer sur certains navigateurs.

---

## ⚠️ Problèmes UX et accessibilité (RGAA 4.2 / WCAG AA)

**Conforme depuis 28 juin 2025, obligatoire 80% depuis 1er janvier 2026[1][3] :**

| Problème | Gravité | Impact |
|----------|---------|--------|
| **Aucune balise `<h1>` globale**[3] | Critique | Structure HTML non sémantique ; lecteurs d'écran perdus |
| **Images emoji sans alternative texte** | Critique | Non conforme WCAG AA (106 critères)[1] |
| **Boutons sans `aria-label`** (`openSOSModal()`, `registerVoisin()`) | Critique | Inaccessible au clavier et aux lecteurs d'écran |
| **Modal sans `role="dialog"` ni `aria-labelledby`** | Haute | Pas de fermeture au clavier (Échap) ; navigation au clavier bloquée |
| **Contraste insuffisant** (texte muted sur fond clair) | Haute | Difficile à lire pour malvoyants ; échoue WCAG AA |
| **Labels de formulaires non associés** (`for="..."` manquants sur checkboxes)[3] | Haute | Lecteur d'écran ne lie pas label et input |
| **Pas d'attribut `alt` pertinent** sur images/icons[3] | Critique | Non conforme WCAG niveau A |
| **Navigation mobile** : Tab bar chevauche le contenu | Moyenne | Lisibilité réduite sur petit écran |
| **Pas de `lang="fr"`** sur les textes français | Moyenne | Lecteurs d'écran utilisent mauvaise prononciation |

**Risque légal** : Sanctions jusqu'à **50 000 € par service non conforme** + **25 000 € pour manquements déclaratifs**[1].

---

## 🎯 Améliorations concrètes (classées par priorité)

### 1. **Rendre le modal accessible (CRITIQUE)**

Envoyer un SOS


Ajouter : fermeture à `Escape`, focus trap, `aria-describedby` sur la description.

### 2. **Rendre tous les labels et inputs conformes**[3]

🔑 Clés/serrurerie



### 3. **Ajouter attributs `alt` sémantiques et rôles**



### 4. **Corriger les accents et typos**[7]
Utiliser un correcteur ou vérifier à la commit ; exemple : "Envoyés" au lieu de "Envoyes".

### 5. **Ajouter feedback visuel au clic**[5]
Animer l'expansion avec `transition: max-height 0.3s ease` et signaler l'état actif des filtres avec un changement de couleur + transition lisse.

---

## CE QUI EST BIEN

1. **Architecture logique solide**[6] : Séparation claire des couches (HTML structure, JS logique, filtrage dynamique). Le moteur `TerrainEngine` est bien isolé.

2. **Richesse des informations contextuelles**[7] : Status track visuelle, historique, réponse du service — l'utilisateur voit l'évolution complète sans clic supplémentaire.

3. **Offline-first et PWA ready** : Détection hors ligne, manifest, Service Worker — excellent pour les mairies en zones rurales.

---

## terrain/dashboard.html
## 1. NOTE /10
**UX: 7/10** | **Design: 6/10** | **Contenu: 8/10** | **Technique: 7/10**  
**Note globale: 7/10** – Dashboard fonctionnel et dense en infos, mais perfectible en responsive et accessibilité.

## 2. BUGS ou erreurs
- Code JS incomplet : `renderServiceChart` tronqué (fermeture `scales.y` manquante), risque d'erreur Chart.js.
- Accents manquants : "Acces" → "Accès", "Resolus" → "Résolus", "Immediat" → "Immédiat".
- HTML invalide : `<link rel="icon">` dupliqué (SVG data + img/logo-header.svg) ; styles inline excessifs (violation DRY).
- `renderMap` et `renderSignalList` non définies dans le code fourni (erreurs runtime si `TerrainEngine` absente).
- Favicon SVG data:URL malformé (`🏛️` peut casser sur certains navigateurs).

## 3. PROBLÈMES UX
- **Mobile** : Filtres flex-wrap sur petits écrans empilés mal (min-width:140px trop grand) ; stats-bar 4 colonnes non responsive (grille CSS fixe).
- **Navigation** : Bottom-nav persiste sur login (confus) ; pas de bouton logout visible.
- **Accessibilité** : Pas d'`aria-label` sur inputs/selects ; emojis comme icônes (non sémantiques, lecteurs d'écran défaillants) ; focus management faible (autofocus OK mais pas de skip links).
- **Lisibilité** : Trop de charts (4 doughnuts/bars) surcharge cognitive ; hiérarchie faible (stats noyées sous filtres).
- **Sécurité** : Code login hardcodé ('TERRAIN') en JS client-side (vulnérable).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Responsive stats/filtres** : `stats-bar { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }` ; media queries pour stacker sur mobile.
2. **Hiérarchiser contenu** : Déplacer **alerts prioritaire** au-dessus stats (couleur danger + badge) ; masquer charts secondaires par défaut (toggle).
3. **Accessibilité** : Ajouter `aria-label="Filtrer par commune"` sur selects ; remplacer emojis par `<svg>` ou icons SVG ; `role="alert"` sur alerts.
4. **Login sécurisé** : Passer à server-side auth (ou IndexedDB chiffré) ; ajouter bouton logout (`sessionStorage.removeItem`).
5. **Performance** : Lazy-load Leaflet/Charts (IntersectionObserver) ; pagination liste signalements (éviter DOM explosion).

## 5. CE QUI EST BIEN
- **Filtres dynamiques** + stats en temps réel : Excellente interaction data-driven, alignée bonnes pratiques (filtres personnalisés [1][2]).
- **Structure claire** : Hiérarchie KPI > alerts > viz > liste, avec exports pratiques pour élus.
- **PWA-ready** : Manifest + offline badge + service worker-ready, idéal pour terrain mairies.

---

## terrain/admin-vie.html
### 1. NOTE /10
**7.5/10**  
UX: 8/10 (structure claire, tâches rapides). Design: 7/10 (cohérent, mobile-first). Contenu: 8/10 (pratique, adapté mairies). Technique: 6/10 (HTML incomplet, JS manquant).

### 2. BUGS ou erreurs
- **HTML tronqué**: Code coupé à `da` dans dernier bouton (`data-val="urgent"` incomplet).
- **Accents manquants**: "simplifiee" → "simplifiée"; "arrivee" → "arrivée"; "decris" → "décris".
- **HTML invalide**: `<link rel="icon">` SVG inline sans `type`; balises `<div>` imbriquées sans fermeture potentielle; styles inline excessifs (à externaliser).
- **Liens cassés potentiels**: `img/logo-header.svg`, `css/terrain-theme.css`, `manifest.webmanifest` non vérifiés.
- **JS manquant**: Fonctions comme `toggleTool()`, `filterLevel()` appelées sans script.

### 3. PROBLÈMES UX
- **Navigation mobile**: Liste outils longue → scroll excessif; filtres OK mais pas de retour visuel fort (ex: loader sur submit).
- **Lisibilité**: Inline styles (`font-size:0.85rem`) trop petits sur mobile; textes denses sans assez de white space[2][7].
- **Accessibilité**: Pas d'`aria-label` sur icônes/inputs; contrastes icônes (✅, 📸) à valider WCAG; pas de focus visible sur boutons[4][6].
- **Feedback système manquant**: Pas d'états loading/success/erreur visibles (ex: après pointage)[3][7].
- **Cohérence**: Chevrons › partout, mais expand/collapse non testé; selects sans validation[1].

### 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger HTML/JS**: Compléter code, ajouter `<script>` avec fonctions; valider W3C.
2. **Accessibilité**: Ajouter `aria-expanded` sur cards, `alt` descriptifs, `role="button"` sur photo-slots[4].
3. **Mobile/scroll**: Ajouter sticky filter-bar; grouper outils par section avec accordéon natif (details/summary).
4. **Feedback UX**: Implémenter loaders/toasts (ex: "Rapport envoyé ✅") + validation forms[3].
5. **Perf**: Remplacer inline styles par CSS vars; lazy-load images; PWA manifest optimisé.

### 5. CE QUI EST BIEN
- **Tâches ultra-rapides**: Promesse "45s max" avec 1-tap/30s cohérente, alignée besoins terrain[1][3].
- **Structure intuitive**: Filtres niveaux + cards expandables = hiérarchie claire, mobile-first[2].
- **Contenu pertinent**: Outils réalistes pour mairies (pointage, EPI, km) avec icônes engageantes[7].

---

## terrain/index.html
## 1. NOTE /10
**8/10** (UX fluide et mobile-first, design cohérent, contenu pertinent ; pénalités accessibilité/RGAA et petits bugs techniques).

## 2. BUGS ou erreurs
- **Accents manquants** : "reseau", "Haute-Correze" (×3), "remontee", "operationnelle".
- **HTML invalide** : `<link rel="icon">` SVG inline malformé (manque `type="image/svg+xml"`), doublon `<link rel="icon">`.
- **Liens potentiellement cassés** : `signaler.html?cat=...`, `suivi.html` (non vérifiés, mais JS dynamique).
- **Alt texts vides** : `alt=""` sur logos hero/footer (RGAA critique : images sans alternative pertinente)[1][2].
- **JS inline non sémantique** : `onclick` au lieu d'`addEventListener` (accessibilité clavier compromise)[4].

## 3. PROBLÈMES UX
- **Accessibilité RGAA non conforme** (obligatoire 2026 pour mairies : 80% des 106 critères)[1][2][5] : 
  - Pas de `role="navigation"`, `aria-label` insuffisants, `alt` manquants, pas de `lang` sur spans, navigation clavier partielle (bouton menu JS-only).
  - Contrastes badges/texte à vérifier (risque daltonisme)[4].
  - Pas de `main` landmark, structure h1/h2 OK mais ARIA manquant.
- **Lisibilité mobile** : `user-scalable=no` bloque zoom (WCAG 2.2 interdit, EAA 2026)[4] ; grid responsive à tester.
- **Navigation** : Lien "Mes signalements" vers `suivi.html` redondant avec nav ; toggle menu sans feedback visuel/ARIA.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA** : Ajouter `alt` descriptifs ("Logo Haute-Corrèze Communauté"), `role="img"`, `aria-expanded` sur menu, `main` landmark, `lang="fr"` global ; viser 80% conformité[1][2].
2. **Corriger accents/bugs** : "réseau", "Haute-Corrèze", supprimer doublon favicon, passer `onclick` en `addEventListener`.
3. **Viewport** : Changer en `width=device-width, initial-scale=1.0` (autoriser zoom)[4].
4. **SEO/Perf** : Lazy-load images logos, précharger `signaler.html`.
5. **Offline** : Ajouter `aria-live` sur banner pour screen readers.

## 5. CE QUI EST BIEN
- **PWA complète** : Manifest, SW, offline banner, theme-color — idéal pour mairies terrain[4].
- **UX mobile-first** : Hero concis (45s pitch), grid catégories dynamique, compteurs signalements motivants.
- **Code léger/sémantique** : Sections claires, JS minimal inline, nav responsive.

---

## vote-10e.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 6/10** | **Technique: 5/10**  
**Globale: 6.5/10** (Design cohérent mais bugs critiques et accessibilité faible).

## 2. BUGS ou erreurs
- **HTML incomplet/coupé**: `<li c` à la fin (ligne calendrier-list) → page tronquée, invalide.
- **Accents manquants**: "Democratie" → "Démocratie" ; "elus" → "élus" ; "Scrutin" → "Scrutin".
- **JS manquant**: Fonctions `showTab()` et `onclick` non définies → tabs inopérants.
- **Icônes Lucide non chargées**: `<i data-lucide="vote">` sans script Lucide → icônes absentes.
- **HTML invalide**: `<li c` sans fermeture ; styles inline excessifs ; pas de `main` sémantique.

## 3. PROBLÈMES UX
- **Navigation mobile**: Navbar non responsive (liens non-adaptés) ; tabs flex-wrap mais petits textes (13px).
- **Lisibilité**: Hauteurs de barres (28px/10px) trop basses ; textes petits (12-13px) sur mobile.
- **Accessibilité critique** (RGAA/WCAG AA obligatoire 2026 pour mairies[1][2][5]): 
  - Pas d'`alt` sur favicon SVG ; icônes sans `aria-label`.
  - Contrastes non garantis (bleu #002654 sur blanc) ; pas de `prefers-reduced-motion`.
  - Tabs non-clavier (boutons sans `role="tab"`, `aria-selected`) ; pas de focus visible.
  - Pas de déclaration d'accessibilité obligatoire[2].

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger HTML/JS**: Compléter `<li>`, ajouter script tabs (ex: `function showTab(id){...}`) et Lucide.
2. **Accessibilité RGAA**: Ajouter `alt` SVG, `role="tablist"`, `aria-label` icônes, contrasts 4.5:1, `lang="fr"` sur éléments.
3. **Mobile-first**: `font-size: clamp(14px,2vw,16px)` ; `min-height:44px` cibles tactiles (WCAG 2.2[4]).
4. **Sémantique**: `<main>`, `<section aria-labelledby>`, headings hiérarchiques (h1→h2→h3).
5. **Contenu**: Corriger accents ; dater élections (2026 fictif ? ) ; ajouter CTA voting fonctionnel.

## 5. CE QUI EST BIEN
- **Design cohérent**: Thème Aix propre, CSS vars, grids responsive, animations fluides.
- **Structure tabs intuitive**: Navigation claire par onglets thématiques (élections/élus/etc.).
- **Visuals engageants**: Barres progressives, avatars, calendriers → bonne hiérarchie visuelle.

---

## terrain/dashboard-terrain.html
## 1. NOTE /10
**UX: 7/10** | **Design: 7/10** | **Contenu: 8/10** | **Technique: 6/10**  
**Note globale: 7/10** – Dashboard fonctionnel et intuitif pour élus, mais freiné par bugs techniques et accessibilité perfectible.

## 2. BUGS ou erreurs
- **Accents manquants**: "Acces" → "Accès", "Resolus" → "Résolus", "developpement" → "développement", "Cloture" → "Clôture".
- **HTML invalide**: Deux balises `<link rel="icon">` en doublon (garder une seule). `<script src="js/cgu-gate.js">` en fin de body sans fallback.
- **Liens potentiellement cassés**: Dépendances externes (`terrain-engine.js`, `terrain-theme.css`) non fournies ; `onclick="TerrainEngine.exportCSV()"` sans implémentation visible.
- **JS erreurs**: `stats.resolusSemaine` vs `stats.resolusSem` (incohérent) ; `s.resolvedAt` utilisé sans vérif (peut crasher si absent).

## 3. PROBLÈMES UX
- **Navigation mobile**: Nav en flex sans hamburger menu ; liens nav non adaptés petits écrans (viewport OK mais pas testé).
- **Lisibilité mobile**: Grille stats/charts en `repeat(auto-fit, minmax(300px,1fr))` trop étroite sur mobile (<300px) ; table non-scrollable horizontalement.
- **Accessibilité**: Pas d'`aria-label` sur icônes/inputs/boutons ; contrastes charts non garantis (couleurs vives OK mais vérifier WCAG) ; pas de `role="img"` sur SVG emoji ; table sans `scope` sur `<th>`.
- **Feedback utilisateur**: Pas de loading spinners sur `renderTable()` ou charts ; lock screen sans ARIA live pour erreurs.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Responsive prioritaire**: Ajouter media queries pour stats-grid (2-col → 1-col mobile) et table (horizontal scroll + sticky thead).
2. **Accessibilité**: Ajouter `aria-label="Code d'accès admin"` sur input ; `role="status"` sur stats ; clavier-navigable filters (tabindex).
3. **Sécurité lock**: Remplacer code hardcodé `'ADMIN'` par hash/localStorage ; ajouter 3 tentatives max.
4. **Perf charts**: Ajouter `maintainAspectRatio: false` + resize observer pour charts fluides.
5. **Carte**: Intégrer Leaflet.js simple pour remplacer placeholder (priorité basse).

## 5. CE QUI EST BIEN
- **KPI en haut**: Stats cards immédiates et colorées (danger/success/orange) pour scan rapide – conforme dashboards efficaces[1].
- **Filtres intuitifs**: Chips cliquables avec état active ; table dynamique – excellente interaction data-driven[1][4].
- **Charts variés**: Bar/line/doughnut bien choisis (cat/évol/urgence) avec responsive Chart.js – visualisation pro[1].

---

## terrain/signaler.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Note globale: 7/10** – Bonne base mobile-first, mais lacunes accessibilité et bugs bloquants.

## 2. BUGS ou erreurs
- **Code JS tronqué**: `updateOnline()` incomplet (`!navigato` → `!navigator.onLine`).
- **Accents manquants**: "Categorie" → "Catégorie", "Decris" → "Décris", "Ou" → "Où", "Recap" → "Récap".
- **HTML invalide**: `<link rel="icon">` dupliqué (SVG data + img/logo-header.svg); `onclick` inline au lieu d'event listeners.
- **Liens potentiellement cassés**: `TerrainEngine` non défini (dépend de `terrain-engine.js`); `suivi.html` non vérifié.
- **GPS**: Arrondi lat/lng à 4 décimales insuffisant (précision ~11m).

## 3. PROBLÈMES UX
- **Accessibilité critique** (RGAA/EAA 2026 obligatoire pour mairies): Pas d'`alt` sur `<img logo>`, labels manquants sur inputs file/select (`<label for="">`), navigation clavier faible (boutons sans `:focus`), contrastes non garantis, pas d'ARIA landmarks (`<main>`, `role="navigation"`).
- **Mobile**: `user-scalable=no` viole WCAG 2.2 (zoom obligatoire); cibles tactiles OK mais pas 24x24px mini.
- **Navigation**: Pas de validation progressive (ex: photos obligatoires ?); GPS timeout 10s trop court sur mobile faible.
- **Lisibilité**: Inline styles excessifs, surcharge visuelle step 4 (récap + textarea).

## 4. AMÉLIORATIONS concrètes (par priorité)
1. **Accessibilité RGAA**: Ajouter `alt=""` images, `for=""` labels, `aria-label` boutons, `<main>`, `role="progressbar"` steps, `prefers-reduced-motion`. Test WCAG AA[1][2][3].
2. **Corrections bugs**: Compléter JS, accents UTF-8, externaliser onclick → `addEventListener`, supprimer favicon dupliqué.
3. **Validation UX**: Bloquer "Suivant" si champs requis manquants (catégorie, localisation); feedback visuel erreurs.
4. **PWA/Offline**: Ajouter `aria-live` banner offline, sync auto à reconnexion.
5. **Perf mobile**: Lazy-load images, compress photos à 0.8 JPEG max 600px.

## 5. CE QUI EST BIEN
- **Flow intuitif**: Steps clairs avec dots/progression, timer engageant, pré-sélection URL cat.
- **Mobile-first solide**: Capture caméra native, compression auto photos, GPS fallback texte.
- **Design cohérent**: Thème PWA immersif (manifest, theme-color), offline-ready, reco photos optionnelles.

---

## terrain/suivi.html
## 1. NOTE /10
**7.5/10**  
(UX: 8/10 - intuitive ; Design: 7/10 - cohérent mais perfectible ; Contenu: 8/10 - adapté mairies ; Technique: 7/10 - fonctionnel mais erreurs mineures)

## 2. BUGS ou erreurs
- **Accent manquant** : "Resolus" → "Résolus" dans stat-card et stats JS.
- **HTML invalide** : Deux balises `<link rel="icon">` en doublon dans `<head>`.
- **Liens potentiellement cassés** : `signaler.html` (au lieu de `index.html` dans nav) ; dépend de l'arborescence.
- **JS erreur potentielle** : `parseInt(catFilter.value)` sans check si vide → NaN ; `s.category` non sécurisé si null.
- **Inline styles excessifs** : Mélange CSS/JS rendant maintenance difficile.

## 3. PROBLÈMES UX
- **Navigation mobile** : Menu burger sans états ARIA complets (focus management manquant) ; sticky FAB (+ bouton) masque contenu sur petits écrans.
- **Lisibilité mobile** : Filtres chips trop nombreuses (6+) → overflow horizontal ; vignettes photos 60px petites sur touch.
- **Accessibilité (RGAA)** : Pas d'`aria-label` sur stats/filtres ; icônes emoji sans `aria-hidden` ; select catégories sans `aria-label` ; contrastes badges à vérifier (orange/rouge).
- **Empty state** : Lien "Faire un signalement" redirige `signaler.html` alors que nav dit "Signaler" → incohérence.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger accents/bugs** : "Résolus" partout ; supprimer doublon favicon ; sécuriser JS (`s.category || {}`).
2. **Accessibilité RGAA AA** : Ajouter `aria-label` filtres/select ; `role="status"` stats ; tester contrasts avec outils WAVE.
3. **Responsive filtres** : Wrap chips en grid 2-col mobile ; réduire à 4 chips max + "Plus".
4. **Navigation cohérente** : Uniformiser liens ("Signaler" → `signaler.html`) ; ajouter back button en header.
5. **Perf/SEO** : Lazy-load images photos ; meta description ; PWA manifest avec `scope`.

## 5. CE QUI EST BIEN
- **Stats visuelles immédiates** : Grid cards colorées donne aperçu rapide (en attente/ cours/résolus).
- **Filtres dynamiques** : Chips + select catégories = UX fluide pour mairies (sans refresh).
- **PWA/offline ready** : Banner offline, service worker-ready, FAB sticky = adapté terrain communal.

---

## terrain/dashboard.html
## 1. NOTE /10
**UX: 7/10** | **Design: 6/10** | **Contenu: 8/10** | **Technique: 5/10**  
**Note globale: 6.5/10** – Solide structure fonctionnelle, mais freiné par bugs techniques et responsive perfectible.

## 2. BUGS ou erreurs
- **Code JS incomplet**: `renderServiceChart` tronqué (`y: { max: 100, grid: { display: false }`), charts cassés au runtime.
- **HTML invalide**: Balise `<link rel="icon">` SVG inline mal formée (manque `type="image/svg+xml"` sur la première); doublon favicon.
- **Accents manquants**: "Acces" → "Accès"; "Resolus" → "Résolus"; "Immediat" → "Immédiat"; "signale" → "signalé".
- **Fonctions manquantes**: `renderMap`, `renderSignalList`, `exportCSV/PDF`, `TerrainEngine.calculateStats` non définies ici (dépendance `terrain-engine.js`).
- **Leaflet non stylé**: Carte `#dashMap` sans CSS custom, risque de rendu dégradé.

## 3. PROBLÈMES UX
- **Responsive mobile faible**: Filtres flex-wrap sur petits écrans (min-width 140px) → overflow; grid charts 4-colonnes → empilement forcé sans media queries visibles.
- **Navigation bottom-nav persistante**: Visible sur loginGate, distraie/confond (élus en mode "terrain" attendent simplicité).
- **Accessibilité**: Pas d'ARIA labels (`role="main"`, `aria-label` sur charts/map); contrastes inline styles non garantis (ex: `--text-light`); password input sans `aria-describedby`.
- **Lisibilité**: Inline styles partout (head/main), surcharge cognitive; login "indice: TERRAIN" trop évident pour prod.
- **Charge cognitive**: Trop de charts (4 doughnut/bar) sans hiérarchie claire, viole "1 page = 1 objectif"[4].

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Fix responsive**: Ajouter media queries CSS (`@media (max-width: 768px) { .dashboard-grid { grid-template-columns: 1fr; } .stats-bar { grid-template-columns: repeat(2,1fr); } }`).
2. **Sécuriser login**: Remplacer code fixe par PIN dynamique (localStorage + hash); masquer indice en prod.
3. **Optimiser hierarchy**: Monter **stats + alertes** en top (KPI actionnables)[1]; collapse charts/liste en accordéon mobile.
4. **Accessibilité**: Ajouter `aria-label` inputs/charts, `role="region"` sections, keyboard nav bottom-nav.
5. **Performance**: Lazy-load charts/map (`IntersectionObserver`); debounce `applyFilters()`.

## 5. CE QUI EST BIEN
- **Filtres dynamiques + realtime render**: Excellente interactivité, filtres pertinents (commune/cat/urgence) pour élus[1].
- **Stats globales + alertes urgentes**: Hiérarchie claire (total/résolus/alertes), focus action prioritaire[4].
- **PWA-ready**: Manifest + offline badge + service worker-ready, parfait pour terrain mairies.

---

## terrain/index.html
## 1. NOTE /10
**7.5/10** (UX fluide et mobile-first, design cohérent, contenu clair ; pénalités accessibilité RGAA et bugs mineurs).

## 2. BUGS ou erreurs
- Accents manquants : "reseau", "remontee", "Haute-Correze" (x3), "Cloture"[1][2].
- HTML invalide : `<link rel="icon">` dupliqué (SVG data + img/logo-header.svg) ; `onclick` inline au lieu d'`addEventListener`.
- Liens potentiellement cassés : `signaler.html?cat=`, `suivi.html`, `index.html` (non fournis).
- `alt=""` vide sur hero__logo et footer__logo (non descriptif)[1][2].
- Script inline dépend de `TerrainEngine` non défini ici (risque JS error).

## 3. PROBLÈMES UX
- **Accessibilité RGAA non conforme** (obligatoire 2026 pour mairies : 80% des 106 critères) : pas de `role="navigation"`, `aria-expanded` sur menu toggle, `lang="fr"` sur `<html>` OK mais manque landmarks ARIA (main, nav), navigation clavier incomplète, contrastes/alt à vérifier[1][2][4][5].
- Mobile : `user-scalable=no` bloque zoom (contre WCAG 2.2, EAA 2026)[4].
- Navigation : lien "Signaler" marqué `active` mais page est liste catégories (confusion).
- Lisibilité : badges urgence codés couleur seulement (daltoniens exclus)[4].
- Pas de skip-link ou focus visible pour clavier.

## 4. AMÉLIORATIONS concrètes (priorité décroissante)
1. **Accessibilité RGAA** : Ajouter `role="main"` sur `<section class="section">`, `aria-label` sur images, `aria-expanded` sur toggle, tester contrastes (outil RGAA gratuit)[1][2].
2. **Supprimer `user-scalable=no`** et ajouter `meta name="viewport" ... maximum-scale=5`.
3. **Corriger accents** et `alt` descriptifs : `alt="Logo Haute-Corrèze Communauté"`.
4. **Remplacer onclick** par `addEventListener` + gestion `Escape` pour fermer menu.
5. **Badges urgence** : Ajouter texte/icône + couleur (ex: ⚠️ Urgent).

## 5. CE QUI EST BIEN
- **PWA complète** : offline-banner, Service Worker, manifest, theme-color — idéal pour terrain[4].
- **UX mobile-first** : hero concis "45s", grid responsive, bouton large 100%.
- **Contenu ciblé** : catégories dynamiques avec urgence/délai, compteur signalements live.

---

## terrain/suivis.html
# Audit UX/UI — SOS Mairies (suivis.html)

## 1. NOTE GLOBALE

**6,5/10**

- **UX** : 6/10 (navigation claire mais accessibilité défaillante)
- **Design** : 7/10 (cohérent, responsive-ready)
- **Contenu** : 7/10 (bien structuré, manque de microcopy)
- **Technique** : 6/10 (HTML valide mais problèmes d'accessibilité majeurs)

---

## 2. BUGS ET ERREURS

| Erreur | Ligne | Impact |
|--------|-------|--------|
| **Accents manquants** | Filtre buttons | "Envoyes", "Recus", "Resolus" → doivent être "Envoyés", "Reçus", "Résolus" |
| **Typo** | Empty state | "Rien ne correspond a tes filtres" → "à" (accent grave) |
| **Alt text vide** | Logo header | `alt="Haute-Correze"` → doit correspondre au contexte réel (SOS Terrain ?) |
| **Structure sémantique** | Filters | `<button>` avec `onclick` inline → préférer des `<a>` ou délégation d'événements |
| **ID manquant** | Search input | Pas de `<label>` associé pour accessibilité clavier |

---

## 3. PROBLÈMES UX ET ACCESSIBILITÉ

**Critique :**
- **Pas de label associé au champ de recherche[4]** → violates WCAG guidelines pour l'accessibilité. Utiliser `<label for="searchInput">` ou `aria-label`.
- **Boutons sans feedback tactile visible[6]** → états hover/active insuffisants pour mobile. Ajouter `focus:outline` visible.
- **Contraste insufficient possible** → dépend du CSS (non fourni) mais vérifier WCAG AA minimum[4].

**Important :**
- **Navigation au clavier non testée[2]** → filtres utilisent `onclick` inline au lieu de gestion d'événements robuste. Les utilisateurs clavier ne peuvent pas tabber efficacement.
- **Hiérarchie visuelle faible en mobile[6]** → trop d'informations compressées (status-track + card + badge). Risque de confusion.
- **Pas d'indication de l'état actif clair** → le filtre "active" dépend du CSS uniquement, pas d'`aria-current="page"` ou `aria-selected`.

**Modéré :**
- **Recherche sans validation en temps réel** → pas de message "Chargement..." ni débounce visible.
- **Empty state utilisable mais générique[2]** → "Rien ne correspond à tes filtres" est imprécis (quel filtre exactement ?).

---

## 4. AMÉLIORATIONS PRIORITAIRES

### 1. **Accessibilité : labels et ARIA (CRITIQUE)**
Ajouter labels explicites et attributs ARIA :

Rechercher par code, lieu ou description

aria-label="Rechercher par code, lieu ou description">


**Impact[4]** : Conformité WCAG, navigation clavier fonctionnelle.

---

### 2. **Corriger les accents (FACILE)**


**Impact** : Professionnalisme, crédibilité auprès des élus français.

---

### 3. **États interactifs visibles (DESIGN)**
CSS manquant pour les états hover/focus/active[3] :

.filter-chip:hover {

background: var(--primary-light);

transform: scale(1.02);

}

.filter-chip:focus {

outline: 2px solid var(--primary);

outline-offset: 2px;

}

.signal-card:focus-within {

box-shadow: 0 0 0 3px var(--primary-light);

}


**Impact[6]** : Feedback clair, accessibilité tactile/clavier.

---

### 4. **Empty state contextuel (UX)**

function renderList() {

// ... filter logic ...

if (signalements.length === 0) {

const reason = search ? 'recherche' :

currentFilter !== 'all' ? 'filtre de statut' :

currentCatFilter !== 'all' ? 'catégorie' : 'données';

listEl.innerHTML = `

📭

Aucun signalement

Aucun résultat pour cette ${reason}.

Réinitialiser les filtres

return;

}


**Impact[2]** : Aide utilisateur intégrée, réduction de la friction.

---

### 5. **Responsive : hiérarchie mobile (MOBILE-FIRST)**
Simplifier la status-track en mobile[6] :

@media (max-width: 600px) {

.status-track {

display: none; / Ou: display: flex; flex-direction: column; gap: 4px; /

}

.status-track.mobile-expanded {

display: flex;

flex-direction: column;

font-size: 0.75rem;

margin-top: 8px;

padding-top: 8px;

border-top: 1px solid var(--border);

}

.signal-card {

padding: 12px; / Augmenter pour tactile /

}


**Impact[6]** : Lisibilité mobile, ergonomie tactile améliorée.

---

## 5. POINTS FORTS ✓

1. **Architecture UX cohérente[1]** — Filtres + recherche + pagination claire. Navigation par status intuitive (visual progress track).

2. **Offline-first réfléchi[2]** — Badge "Hors ligne" visible, Service Worker enregistré, données locales gérées. Bon pour les communes rurales.

3. **Bottom navigation accessible[2]** — Navigation primaire toujours visible, labels clairs, icônes + texte (pas d'icônes seules). Suit les pratiques mobiles modernes.

---

## Recommandation
**Priorité immédiate** : Accessibilité (points 1-2) + États interactifs CSS. **Puis** : Empty state contextuel et responsive mobile.

---

## terrain/signaler.html
## 1. NOTE /10
**UX: 7/10** | **Design: 8/10** | **Contenu: 7/10** | **Technique: 6/10**  
**Globale: 7/10** (PWA mobile-first efficace, mais accessibilité critique et bugs techniques).

## 2. BUGS ou erreurs
- **Code JS tronqué**: `updateOnline()` incomplet (`!navigato` → `!navigator.onLine`).
- **Accents manquants**: "Categorie" → **"Catégorie"**; "Decris" → **"Décris"**; "Recap" → **"Récap"**.
- **HTML invalide**: `<h2 style="margin-bottom:var(--space-lg);">` (balises inline répétées, utiliser classes CSS).
- **Liens potentiels cassés**: `TerrainEngine.CATEGORIES` non chargé si `js/terrain-engine.js` échoue.
- **GPS**: `Math.round(... * 10000) / 10000` redondant, précision excessive.

## 3. PROBLÈMES UX
- **Accessibilité non conforme RGAA 2026** (obligatoire pour mairies[1][3][5]): 
  - Pas de `label` associés aux `<input>`/`<select>` (critère 12.1).
  - `alt` générique sur logo (`"Haute-Correze"`).
  - Pas de `aria-label` sur boutons icônes (`📷`).
  - Navigation clavier incomplète (steps non focusables).
  - Contrastes/typo à valider (WCAG 2.2)[2].
- **Mobile**: `user-scalable=no` viole WCAG (zoom obligatoire)[2].
- **Offline**: Banner statique, pas de sync indicator.
- **Validation**: Pas de feedback erreur (ex: catégorie vide au submit).

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité RGAA**: Ajouter `<label for="id">` sur tous inputs/selects; `alt` descriptifs; `role="progressbar"` sur steps; tester NVDA[1][3].
2. **Corrections accents/bugs**: "Catégorie", JS complet, refactoriser styles en classes CSS.
3. **Validation UX**: Désactiver "Suivant" si step incomplet (photos/location); messages d'erreur ARIA.
4. **PWA/Offline**: `aria-live` pour banner; bouton retry sync.
5. **Performances**: Lazy-load images; compression photos côté client optimisée (Web Workers).

## 5. CE QUI EST BIEN
- **Flow wizard intuitif** (steps + dots + recap) parfait pour signalements mobiles.
- **PWA native** (manifest, offline, GPS, capture caméra) adaptée aux agents terrain.
- **Design cohérent** (thème responsive, icônes, timer engagement).

---

## vote-10e.html
## 1. NOTE /10
**UX : 7/10** | **Design : 8/10** | **Contenu : 6/10** | **Technique : 5/10**  
**Note globale : 6.5/10** (Design moderne, mais bugs critiques et non-conformité RGAA pour une app mairies en 2026).

## 2. BUGS ou erreurs
- **HTML incomplet/invalide** : `<li c` tronqué dans `.calendar-list` (fin du code coupé) → page cassée.
- **Accents manquants** : "Democratie" → **Démocratie** ; "Scrutin du 15 et 22 mars 2026" → **ét**.
- **Fonctionnalités JS manquantes** : `showTab()` non définie → onglets inopérants.
- **Icônes Lucide non chargées** : `<i data-lucide="vote">` sans script Lucide.js.
- **Données fictives/erronées** : Élections 2026 avec résultats (date actuelle : mars 2026, mais 2nd tour "passé" ?).

## 3. PROBLÈMES UX
- **Navigation mobile dégradée** : Navbar overflow (liens non-wrappés), tabs flex-wrap mais petits boutons (13px).
- **Accessibilité RGAA critique** (obligatoire mairies 2026, seuil 80%)[1][2][5] : Pas d'`alt` sur icônes SVG favicon ; contrastes barres (blanc sur couleurs sombres ?) ; pas de `aria-label` sur boutons/tabs ; navigation clavier absente (focus invisible) ; structure sémantique faible (h2/h3 incohérents).
- **Lisibilité** : Textes petits (12-13px) sur mobile ; grids trop denses (elus/bureaux).
- **Responsive incomplet** : Grids auto-fit OK mais padding container trop large sur petits écrans.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Corriger HTML/JS** : Compléter `.calendar-list`, ajouter `showTab()` (ex: `function showTab(id) { ... }`), charger Lucide.js.
2. **Accessibilité RGAA** : Ajouter `alt` icônes, `aria-expanded` tabs, `role="tablist"`, contrasts ≥4.5:1, `lang="fr"` cohérent[1][3].
3. **Mobile-first** : `font-size: clamp(14px, 2vw, 16px)` ; navbar burger menu ; tabs swipe ou accordion.
4. **Contenu réel** : Remplacer mockups élections par API/data live ; ajouter formulaire pétition fonctionnel.
5. **Perf/SEO** : Lazy-load CSS, `<main>` landmark, meta description, OpenGraph.

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème Aix-en-Provence immersif (gradient Provence-bar), cards/bars animées fluides.
- **Structure tabs intuitive** : Navigation claire pour démocratie locale (élus, conseils, budget).
- **Responsive grids** : Auto-fit efficace pour elus/bureaux sur desktop/tablet.

---

## terrain/suivi.html
# Audit UX/UI — SOS Terrain (suivi.html)

## 1. NOTES /10

| Catégorie | Note | Justification |
|-----------|------|---------------|
| **UX** | 6/10 | Navigation claire mais accessibilité insuffisante ; absence de feedback utilisateur |
| **Design** | 7/10 | Cohérent visuellement ; manque de contraste et hiérarchie visuelle faible |
| **Contenu** | 6/10 | Libellés ambigus ("Recu", "Cloture") ; terminologie métier non expliquée |
| **Technique** | 5/10 | Inline styles excessifs ; gestion d'erreurs absente ; pas de gestion d'état robuste |

**Note globale : 6/10** — Prototype fonctionnel mais nécessite une refonte sur l'accessibilité et la robustesse.

---

## 2. BUGS & ERREURS CRITIQUES

- **Typo récurrente** : "Resolus" au lieu de "Résolus" (stat-card__label)
- **Accents manquants** : "Recu" → "Reçu", "Cloture" → "Clôture", "Mes suivis" vs "Mes signalements" (incohérence titre/nav)
- **Lien incohérent** : bouton "Faire un signalement" renvoie à `signaler.html` au lieu de `index.html`
- **Attribut ARIA manquant** : `<nav>` sans `role="navigation"` ; `<section>` sans balise `<main>`
- **Script externe dépendant** : `terrain-engine.js` non fourni — impossible de valider la logique métier

---

## 3. PROBLÈMES UX/ACCESSIBILITÉ[1][2][3]

**Navigation & Compréhensibilité**
- Statuts peu explicites ("En analyse", "Decision", "Action") → terminologie métier sans explication pour les citoyens
- **Taux de rebond potentiel élevé**[1] si les filtres ne répondent pas aux attentes réelles

**Accessibilité RGAA**[1]
- Pas d'attribut `aria-label` sur les filtres (chips sans contexte sémantique)
- Contraste insuffisant sur `.text-muted` (probablement gris pâle)
- Bouton hamburger non accessible : `aria-label="Menu"` OK, mais pas de `aria-expanded`
- Images sans `alt` dans les cartes signalements
- Icones emoji non accessibles (lecteur d'écran lira "🔎")

**Mobile**
- Sticky FAB (+) peut masquer du contenu bas de page
- Filtres horizontaux ne s'adaptent pas bien à petit écran → scroll horizontal[2]
- Photo thumbnails 60×60px trop petites sur mobile (ergonomie médiocre)

**Conception & UI**[5]
- **Inline styles** partout → maintenance impossible, pas de Design System[1]
- Pas de feedback visuel lors du chargement (`renderList()` synchrone → risque de blocage)
- États vides gérés mais pas les erreurs réseau (offline banner présente mais non intégrée aux filtres)

---

## 4. AMÉLIORATIONS PRIORITAIRES

**P1 — Accessibilité WCAG AA (non négociable pour collectivité)**[1][5]
- Ajouter attributs `aria-label` sur tous les filtres et statuts
- Remplacer emojis par `<span role="img" aria-label="...">` ou icônes SVG
- Vérifier contraste : mettre `.text-muted` à 4.5:1 minimum
- Utiliser balises sémantiques : `<main>`, `<article>` au lieu de `<div class="card">`

**P2 — Clarification des statuts métier**[3]
- Ajouter tooltips/help text : "En attente = reçu, en attente d'analyse" etc.
- Renommer avec français standard : "Reçu" → "Réceptionnné", "Decision" → "Décision prise"
- Afficher dans l'UI le **parcours de la demande** (timeline visuelle)

**P3 — Refactoring technique**
- Migrer inline styles → CSS external (terrain-theme.css)
- Ajouter état de chargement + gestion erreurs réseau
- Valider HTML : `<section>` → `<main>` ou ajouter `role="main"`

**P4 — Mobile-first responsive**
- Rendre filtres scrollables horizontalement avec indication visuelle
- Augmenter photos à 80×80px avec lightbox
- Tester sticky FAB sur iPhone 12 (ne doit pas chevaucher contenu)

**P5 — Tests utilisateurs[2]**
- Recruter 3-5 maires/habitants pour tester navigation et compréhension des statuts
- Mesurer : taux de rebond, temps pour trouver un signalement, abandon des filtres

---

## 5. CE QUI FONCTIONNE BIEN ✅

1. **Architecture IA claire** — Séparation filters/stats/list ; gestion d'état simple et prévisible[1]
2. **Design system cohérent** — Tokens CSS (`--space-*`, `--shadow-*`) et composants réutilisables (stat-card, badge, btn)
3. **Offline-ready** — Manifest PWA + banner offline présente ; TErrainEngine abstrait les données[1]

---

**Verdict** : Page fonctionnelle mais **audit ergonomique complet requis avant déploiement** auprès des communes.[1][3] Prioriser accessibilité RGAA et clarification métier.

---

## terrain/suivis.html
## 1. NOTE /10
**8/10**  
Excellente structure mobile-first et PWA-ready. Points forts en UX fonctionnelle, mais pénalisé par accessibilité et bugs mineurs.

## 2. BUGS ou erreurs
- **Accents manquants** : "Reponse" → "Réponse", "Resolus" → "Résolus", "a tes filtres" → "à tes filtres".
- **HTML invalide** : Balise `<link rel="icon">` dupliquée (SVG data + img/logo-header.svg).
- **Inline styles excessifs** : Mélange CSS/JS rendant le code non-maintenable.
- **JS erreurs potentielles** : `s.photos.map()` sans check `Array.isArray`, crash si `photos` mal formé.

## 3. PROBLÈMES UX
- **Accessibilité faible** : Pas d'`aria-label` sur boutons/inputs, icônes emoji sans `alt`, pas de `role="button"` sur chips, navigation clavier absente (WCAG non-respecté)[2][4].
- **Lisibilité mobile** : Inline styles fixes (`width:100px;height:100px`) cassent sur petits écrans, photos non-responsive.
- **Navigation confuse** : Double barre filtres trop proche (`margin-top:-4px`), surcharge cognitive.
- **Feedback manquant** : Pas d'états hover/focus, toggle expand sans animation fluide.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Accessibilité** : Ajouter `aria-label`, `role="button"`, `tabindex=0` sur chips ; `alt` descriptifs sur images ; `aria-expanded` sur cards.
2. **Responsive photos** : Remplacer inline `style` par CSS media queries : `img { max-width: 100%; height: auto; aspect-ratio: 1; }`.
3. **Séparer JS/CSS** : Extraire inline styles/templates vers `terrain-engine.js` et `terrain-theme.css`.
4. **Recherche avancée** : Ajouter debounce sur `input` (300ms) + clear button (X icône).
5. **Pull-to-refresh** : Intégrer pour PWA offline (plus UX native).

## 5. CE QUI EST BIEN
- **Structure claire** : Header/filtres/liste/bottom-nav cohérents, hiérarchie visuelle intuitive[1][5].
- **Filtres dynamiques** : Recherche + multi-filtres réactifs, démo data pour test rapide.
- **PWA complète** : Offline badge, SW, manifest, theme-color — prête pour usage terrain mobile[6].

---

## vote-10e.html
## 1. NOTE /10
**UX : 7/10** | **Design : 8/10** | **Contenu : 6/10** | **Technique : 5/10**  
**Note globale : 6.5/10** (Design moderne, mais bugs bloquants et accessibilité faible pour une app mairies en 2026).

## 2. BUGS ou erreurs
- **HTML tronqué** : Page incomplète (`<li c` à la fin de `.calendar-list` — section "Conseils" cassée).
- **Accents manquants** : "Democratie" → **Démocratie** ; "Scrutin du 15 et 22 mars 2026" → **15 et 22** ; "elu-card" → **élu** partout.
- **JS manquant** : Fonctions `showTab()` non définies → onglets inactifs.
- **Icônes Lucide** : `<i data-lucide="vote">` sans script Lucide → icônes non affichées.
- **HTML invalide** : `<link rel="icon" href="data:...">` malformé (guillemets dans SVG) ; balises `<h3>`, `<h4>` sans sémantique cohérente.

## 3. PROBLÈMES UX
- **Navigation mobile** : Navbar non responsive (liens chevauchent) ; tabs flex-wrap mais boutons trop petits sur petits écrans.
- **Accessibilité critique** (RGAA 2026 obligatoire pour mairies) : Pas d'`alt` sur icônes/SVG favicon ; contrastes barres (blanc sur couleurs sombres) potentiellement <4.5:1 ; pas de `aria-label` sur boutons/tabs ; focus clavier invisible ; pas de déclaration RGAA[1][2].
- **Lisibilité** : Textes petits (12-13px) sur mobile ; grilles denses (elus/bureaux) sans scroll fluide.
- **Interactif cassé** : Tabs, bars animées, boutons vote non fonctionnels sans JS.

## 4. AMÉLIORATIONS concrètes (priorité ↓)
1. **Compléter HTML/JS** : Ajouter script tabs (`function showTab(id) { ... }`) + fermer `<li>` ; valider W3C.
2. **Accessibilité RGAA** : Ajouter `alt=""` icônes, `aria-controls/aria-selected` tabs, `role="tablist"`, contrasts >4.5:1, déclaration accessibilité[1][2].
3. **Responsive prioritaire** : Media queries pour grids (1col <480px), navbar burger, tailles texte min 16px mobile.
4. **Sémantique** : `<main>`, `<section aria-labelledby>`, `<figure>` pour graphs, `<time>` dates calendrier.
5. **Contenu** : Corriger accents, dater résultats 2026 réalistes, ajouter CTA "S'inscrire élection".

## 5. CE QUI EST BIEN
- **Design cohérent** : Thème aix-theme.css + CSS vars modernes, cards/bars visuellement attractifs.
- **Structure tabs** : Logique claire (élections/élus/conseils), animations fluides.
- **Localisé France** : Contenu pertinent (10e Paris, bureaux réels, contacts mairie).

---

Audit Perplexity — SOS Mairies

CORRECTIONS APPLIQUEES (564 fixes, 58 fichiers)

Accents corrigees (524 occurrences)

WCAG/Accessibilite (10 fichiers)

Deploiement

RESULTATS PAR PAGE (details ci-dessous)

accessibilite-10e.html

1. NOTE /10

2. BUGS ou erreurs

3. PROBLÈMES UX

4. AMÉLIORATIONS concrètes (priorité ↓)

5. CE QUI EST BIEN

accessibilite-10e.html

1. NOTE /10

2. BUGS ou erreurs

5. CE QUI EST BIEN

accessibilite-10e.html

1. NOTE /10

2. BUGS ou erreurs

3. PROBLÈMES UX

4. AMÉLIORATIONS concrètes (priorité ↓)

5. CE QUI EST BIEN

carte-live.html

1. NOTE /10

2. BUGS ou erreurs

⚠️ Problèmes d'accessibilité (WCAG 2.2 & RGAA 4.2)

🎯 Problèmes UX/Design

✅ Améliorations prioritaires

1. **Accessibilité clavier & lecteur d'écran** [CRITIQUE]

2. **Corriger les contrastes de couleur** [CRITIQUE]

3. **Supporter `prefers-reduced-motion`** [MAJEUR]

4. **Responsive vraiment mobile** [MAJEUR]

5. **Ajouter état de chargement & feedback** [UX]

⭐ Points forts

📋 Checklist avant production

5. CE QUI EST BIEN

entraide.html

1. NOTE /10

2. BUGS ou erreurs

3. PROBLÈMES UX

4. AMÉLIORATIONS concrètes (priorité ↓)

5. CE QUI EST BIEN

entraide.html

1. NOTE /10

2. BUGS ou erreurs

3. PROBLÈMES UX

4. AMÉLIORATIONS concrètes (priorité ↓)

5. CE QUI EST BIEN

emploi.html

1. NOTE /10

2. BUGS ou erreurs

3. PROBLÈMES UX

4. AMÉLIORATIONS concrètes (priorité ↓)

5. CE QUI EST BIEN

etat-civil.html

1. NOTE /10

2. BUGS ou erreurs

5. Points forts

etat-civil.html

1. NOTE /10

2. BUGS ou erreurs

Horaires — Service Etat Civil` tronqué (manque "

3. PROBLÈMES UX

4. AMÉLIORATIONS concrètes (priorité ↓)

5. CE QUI EST BIEN

forum-citoyen.html

1. NOTE /10

2. BUGS ou erreurs

3. PROBLÈMES UX

4. AMÉLIORATIONS concrètes (priorité ↓)

5. CE QUI EST BIEN

forum-citoyen.html

Audit UX/UI — forum-citoyen.html (SOS Mairies)

Note: 6,5/10

Bugs & Erreurs

sans style explicite dans la réponse | Basse | Zone de réponse | | onclick inline (risque XSS avec données externes) | Haute | Multiples | | Pas de validation formulaire (titre/message vides acceptés) | Moyenne | Modal |

Problèmes UX & Accessibilité[1][4][8]

Améliorations Prioritaires

1. **Valider & sécuriser les inputs (CRITIQUE)**

2. **Rendre accessible selon WCAG[4][8]**

1. Accessibilité clavier & lecteur d'écran [CRITIQUE]

2. Corriger les contrastes de couleur [CRITIQUE]

3. Supporter `prefers-reduced-motion` [MAJEUR]

4. Responsive vraiment mobile [MAJEUR]

5. Ajouter état de chargement & feedback [UX]

sans style explicite dans la réponse | Basse | Zone de réponse |

| `onclick` inline (risque XSS avec données externes) | Haute | Multiples |

| Pas de validation formulaire (titre/message vides acceptés) | Moyenne | Modal |

1. Valider & sécuriser les inputs (CRITIQUE)

2. Rendre accessible selon WCAG[4][8]

3. Améliorer le feedback utilisateur[1]

4. Optimiser mobile

5. Enrichir la découverte[4]