docs(r0): kickoff SIOP V2 — vision, cadrage, charte graphique, maquettes HD

Refondation design-first du projet SIOP (v1 gelée) :
- Playbook 00-vision (charte projet, personas, benchmark Atlas)
- Playbook 01-cadrage (releases R0→R5 + DoD, user-story map, exigences, risques)
- Playbook 02-design : charte graphique, tokens.css bi-thème (palettes
  analytics validées CVD/contraste par script), maquettes HD navigables
  (7 écrans dont démo-login DEMO_MODE, bilan codé, portail QR, mobile)

Prochaine étape : validation des maquettes par le référent avant tout code.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/02-design/charte-graphique.md

@@ -0,0 +1,79 @@
+# Charte graphique — SIOP V2
+
+> **Rôle de ce document (playbook)** : fixer l'identité visuelle AVANT le code. Toute
+> valeur visuelle vit dans [`tokens.css`](tokens.css) (source de vérité, importée telle
+> quelle par l'application) ; ce document explique les **choix** et leurs raisons.
+> Règle absolue : aucun style codé en dur hors tokens — c'est ce qui a rendu la v1 « flottante ».
+
+## 1. Positionnement
+
+SIOP est un **outil de travail professionnel** pour ascensoristes : sobre, dense sans être
+étouffant, lisible en plein soleil sur un chantier comme au bureau. Le monde visuel est
+celui du métier — acier, cabine, signalisation de sécurité — pas celui d'une app grand
+public. Deux thèmes (clair/sombre) au même niveau de soin.
+
+## 2. Couleur
+
+| Token | Valeur (clair) | Rôle & justification |
+| --- | --- | --- |
+| `--encre` | `#1B2534` | Texte principal — un « noir acier » à biais bleu, jamais de noir pur |
+| `--bleu-treuil` | `#1F4FB8` | **Primaire** (actions, liens, focus) — bleu de vêtement de travail, profond et désaturé, volontairement distinct du bleu néon par défaut des frameworks |
+| `--safran` | `#DD8A0B` | **Accent de marque** — safran marocain / gilet haute visibilité. Parcimonieux : logo, rail actif de navigation, moments de marque. Jamais pour un statut |
+| Fonds | `#F5F7FA` / surfaces `#FFFFFF` | Acier clair, biais froid assumé |
+| Sombre | fond `#0F1622`, surface `#182234` | « Machinerie de nuit » — pas une simple inversion |
+
+**Statuts (réservés, jamais réutilisés ailleurs)** : Ouvert `bleu`, En cours `indigo`,
+En attente `ambre`, Terminé `vert`, Annulé `gris`. Priorités : **Personne bloquée**
+(rouge vif + pastille animée — la seule animation d'alerte de l'app), Haute `rouge`,
+Moyenne `ambre`, Basse `verte`. Toujours pastille/pictogramme + libellé, jamais la couleur seule.
+
+**Palettes graphiques (analytics) — validées par script (CVD, contraste, bande de
+luminosité)** :
+
+- Clair : `#3B69D6 · #DD8A0B · #1F9E8E · #8A63D2` (ordre fixe, jamais recyclé ; étiquettes
+  directes obligatoires — le safran passe sous 3:1 sur blanc).
+- Sombre : `#5580E4 · #C7820A · #26A896 · #9673DE` (repas dédiés, pas d'inversion automatique).
+
+## 3. Typographie
+
+- **UI & titres : Manrope** (géométrique-humaniste, OFL, auto-hébergée — jamais de CDN).
+  Titres en 600/700, `text-wrap: balance`. Les maquettes HTML approximent avec Avenir Next
+  (présent sur macOS) en attendant l'app.
+- **Données : chiffres tabulaires** (`font-variant-numeric: tabular-nums`) partout où des
+  nombres s'alignent (tables, KPI, coûts).
+- Échelle : 12 / 13 / 14 (base) / 16 / 20 / 24 / 32. Libellés en capitales : 11 px,
+  `letter-spacing: 0.06em`.
+
+## 4. Forme & espace
+
+- Grille d'espacement **4 px** ; densité « bureau » (tables 40 px/ligne) mais cibles
+  tactiles ≥ 44 px sur mobile.
+- Rayons : 10 px (cartes), 8 px (contrôles), 999 px (pastilles).
+- Élévation discrète : bordures d'abord (`--bordure`), ombre légère seulement au survol/menus.
+- **Motif signature « rail »** : l'élément actif de la navigation porte un rail vertical
+  safran de 3 px (la cage d'ascenseur) — c'est LE geste identitaire, utilisé nulle part ailleurs.
+
+## 5. Iconographie & logo
+
+- **Lucide**, trait 1,75 px, 16–20 px dans l'UI.
+- Logotype : « SIOP » en Manrope 700 + marque **▲▼** (montée/descente cabine) safran sur
+  encre. Favicon = la marque seule.
+
+## 6. Mouvement
+
+Fonctionnel uniquement : transitions 120–160 ms (`ease-out`) sur survol/ouverture ;
+`prefers-reduced-motion` respecté ; **une seule** animation continue autorisée — la
+pastille « personne bloquée ».
+
+## 7. Ton rédactionnel
+
+Français métier, direct, sans jargon système : « Clôturer l'intervention », pas
+« Soumettre le formulaire ». Les erreurs disent quoi faire (« La checklist est incomplète :
+traitez chaque tâche »), jamais « Erreur 400 ». Vocabulaire du carnet : OT, bilan, organe,
+grille du mois.
+
+## 8. Application
+
+`tokens.css` est copié tel quel dans `apps/web` (et mappé vers la config Tailwind/shadcn).
+La page `/design` de l'app (R0) expose tous les tokens et composants — c'est la référence
+vivante des revues pixel.