Frontend : intégration du design Claude Design (6 écrans)

Portage du projet « Bénévoles Festival.dc.html » en implémentation statique
pilotée par un jeu de démonstration déterministe (portage du générateur du
design : 15 postes, 64 bénévoles, ~209 affectations).

- Système visuel néo-brutaliste : palette + primitives Tailwind, polices
  Archivo / DM Mono, primitives dans components/ui.tsx.
- Domaine (aligné CLAUDE.md) : types, jours/plages, moteur de validation
  (mêmes codes BLOCKING/WARNING que le back-end), sélecteurs, différentiel
  de publication.
- État applicatif : PlanningProvider (reducer) — affecter / désaffecter /
  publier / confirmer / éditer besoins et bénévoles / import simulé / pointage.
- Écrans : 01 Grille des besoins + panneau d'affectation (candidats triés,
  alertes), 02 Vue par bénévole, 03 Publication, 04 Mobile bénévole,
  05 Mobile référent, 06 Configuration (4 sous-onglets).
- i18n : aucun texte d'interface en dur, locales/fr.json.
- Vérifs : build tsc + vite, eslint (0 erreur), rendu headless des 6 écrans
  (npm run smoke).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AwswqSChc3Rwtu61pRXiY2

frontend/README.md

@@ -2,10 +2,21 @@
 
 React + Vite + TypeScript + Tailwind. Interface en français, code en anglais.
 
-Le design fait foi : projet Claude Design « Bénévoles Festival »
-(`Bénévoles Festival.dc.html`). Les écrans et composants réels sont dérivés de
-ce fichier et intégrés au fil des étapes. Le contenu actuel est un squelette
-(routage, i18n, client API).
+Intégration du design Claude Design « Bénévoles Festival »
+(`Bénévoles Festival.dc.html`) : les 6 écrans du projet sont implémentés en
+statique, pilotés par un **jeu de démonstration déterministe** (portage du
+générateur du design). Le branchement sur l'API back-end est l'étape suivante.
+
+## Écrans (onglets)
+
+| # | Route                | Écran                                                      |
+|---|----------------------|----------------------------------------------------------|
+| 01 | `/grille`           | Grille des besoins (postes × jours × plages) + panneau d'affectation (candidats triés, alertes bloquantes / avertissements) |
+| 02 | `/benevoles`        | Vue par bénévole (affectations + disponibilités déclarées, surcharge / oubliés) |
+| 03 | `/publication`      | Différentiel brouillon ↔ version publiée, aperçu du message, publication |
+| 04 | `/mobile-benevole`  | Maquette mobile : planning personnel, confirmation de créneau |
+| 05 | `/mobile-referent`  | Maquette mobile : pointage de l'équipe sur le créneau en cours |
+| 06 | `/configuration`    | Grille des besoins, bénévoles & import, messages & envois, règles du festival |
 
 ## Commandes
 
@@ -14,31 +25,40 @@ ce fichier et intégrés au fil des étapes. Le contenu actuel est un squelette
 | Installer              | `npm install`               |
 | Dev (hot reload)       | `npm run dev` → http://localhost:5173 |
 | Build de production    | `npm run build`             |
-| Prévisualiser le build | `npm run preview`           |
 | Lint                   | `npm run lint`              |
 | Vérif. de types        | `npm run typecheck`         |
+| Rendu headless des 6 écrans | `npm run smoke`        |
 
 En dev, Vite proxifie `/api` vers le backend (`VITE_API_TARGET`, défaut
 `http://localhost:8000`).
 
 ## Conventions
 
-- **Aucun texte visible en dur.** Tout passe par `src/i18n` (`t(key, params)`)
-  et `src/i18n/locales/fr.json`, même en monolingue.
-- Code, noms de fichiers et de variables en anglais.
-- Alias d'import `@/` → `src/`.
-- Vocabulaire métier : voir le glossaire FR ↔ EN de `CLAUDE.md`.
+- **Aucun texte d'interface en dur.** Tout passe par `src/i18n` (`t(key, params)`)
+  et `src/i18n/locales/fr.json`. Les libellés *de données* (nom d'un poste,
+  d'une plage, d'une journée) sont portés par l'entité — ils viendront de l'API.
+- Code, noms de fichiers et de variables en anglais. Alias `@/` → `src/`.
+- Vocabulaire métier : glossaire FR ↔ EN de `CLAUDE.md`.
+- Le moteur de validation (`src/domain/rules.ts`) reprend le contrat du back-end
+  (CLAUDE.md §3) : violations typées `BLOCKING` / `WARNING`, jamais de phrase.
 
 ## Arborescence
 
 ```
 src/
-├── main.tsx            # point d'entrée (React Query + Router)
-├── index.css           # directives Tailwind
+├── main.tsx                  # point d'entrée (Router + PlanningProvider)
 ├── app/
-│   ├── router.tsx      # routes
-│   └── AppLayout.tsx   # coquille de mise en page (remplacée par le design)
-├── pages/              # écrans
-├── api/client.ts       # client HTTP + ApiError
-└── i18n/               # t() + locales/fr.json
+│   ├── AppShell.tsx          # en-tête + onglets + badge brouillon
+│   ├── router.tsx            # routes (tableau réutilisable)
+│   └── planning-store.tsx    # état + actions (reducer) sur le jeu de démo
+├── domain/
+│   ├── types.ts              # modèle (aligné CLAUDE.md)
+│   ├── festival.ts           # jours, plages, helpers temps
+│   ├── rules.ts              # moteur de validation (portage back-end)
+│   ├── selectors.ts          # index des affectations, surcharge
+│   └── publication.ts        # différentiel de publication
+├── mock/                     # jeu de démonstration déterministe
+├── components/ui.tsx         # primitives visuelles (bordures/ombres franches)
+├── pages/                    # un fichier par écran (+ sous-dossiers grille/, config/, mobile/)
+└── i18n/                     # t() + locales/fr.json
 ```