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/tailwind.config.js

@@ -1,8 +1,50 @@
 /** @type {import('tailwindcss').Config} */
+// Palette et primitives issues du design Claude Design « Bénévoles Festival »
+// (style néo-brutaliste : bordures franches, ombres portées dures, capitales).
 export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        cream: '#F5EFE1', // fond général
+        ink: '#14110E', // encre (quasi-noir)
+        paper: '#FFFDF7', // panneaux / cartes
+        sand: '#EFE8D6', // barres secondaires
+        'sand-line': '#E0D8C4', // séparateurs sur paper
+        'sand-dark': '#E7E0CE',
+        yellow: '#FFD23F',
+        'yellow-soft': '#FFE68A', // état « incomplet »
+        'yellow-hover': '#FFDF77',
+        orange: '#FF5C39',
+        'orange-dark': '#E0421F',
+        green: '#0E9F6E',
+        blue: '#A8C4FF',
+        'blue-strong': '#2A6BFF', // « non publié »
+      },
+      fontFamily: {
+        display: ['Archivo', 'Helvetica', 'Arial', 'sans-serif'],
+        mono: ['"DM Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+      },
+      boxShadow: {
+        brutal: '3px 3px 0 #14110E',
+        'brutal-sm': '2px 2px 0 #14110E',
+        'brutal-md': '4px 4px 0 #14110E',
+        'brutal-lg': '6px 6px 0 #14110E',
+      },
+      backgroundImage: {
+        // Hachures « sous-effectif critique »
+        'hatch-orange':
+          'repeating-linear-gradient(45deg,#FF5C39 0 6px,#E0421F 6px 12px)',
+        // Hachures « brouillon »
+        'hatch-ink':
+          'repeating-linear-gradient(45deg,#14110E 0 8px,#2A2520 8px 16px)',
+        // Trame « poste fermé »
+        'hatch-sand':
+          'repeating-linear-gradient(45deg,#E9E2D0 0 5px,#DFD7C2 5px 10px)',
+        // Pointillés « disponibilité déclarée »
+        'dots-sand': 'radial-gradient(#CFC7B4 1px,transparent 1.2px)',
+      },
+    },
   },
   plugins: [],
 };