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/tokens.css

@@ -0,0 +1,156 @@
+/*
+ * SIOP V2 — Design tokens (source de vérité visuelle)
+ * Importé tel quel par apps/web ; les maquettes HD l'utilisent aussi.
+ * Règle : AUCUNE valeur visuelle codée en dur hors de ce fichier.
+ * Thèmes : clair par défaut, sombre via @media + surcharge [data-theme].
+ */
+
+:root {
+  /* ——— Marque ——— */
+  --primaire: #1f4fb8;          /* bleu-treuil : actions, liens, focus */
+  --primaire-actif: #1a439c;
+  --primaire-doux: #eaf0fb;     /* fonds de sélection/hover primaires */
+  --safran: #dd8a0b;            /* accent de marque — parcimonieux */
+  --safran-doux: #fdf3e3;
+
+  /* ——— Neutres (acier, biais froid) ——— */
+  --fond: #f5f7fa;
+  --surface: #ffffff;
+  --surface-2: #eef2f7;         /* en-têtes de table, zones repliées */
+  --bordure: #dce3ec;
+  --bordure-forte: #b9c4d4;
+  --encre: #1b2534;             /* texte principal */
+  --encre-2: #55647a;           /* texte secondaire */
+  --encre-3: #8494ab;           /* placeholder, désactivé */
+
+  /* ——— Statuts OT (réservés) ——— */
+  --st-ouvert: #3d6fe0;  --st-ouvert-fond: #e9effc;
+  --st-encours: #6d5bd8; --st-encours-fond: #efecfa;
+  --st-attente: #b96f07; --st-attente-fond: #fbf1df;
+  --st-termine: #178a50; --st-termine-fond: #e6f5ec;
+  --st-annule: #68788f;  --st-annule-fond: #edf0f4;
+
+  /* ——— Priorités (réservées) ——— */
+  --prio-bloque: #d92626;  --prio-bloque-fond: #fdeaea; /* personne bloquée */
+  --prio-haute: #d92626;
+  --prio-moyenne: #b96f07;
+  --prio-basse: #178a50;
+  --prio-aucune: #8494ab;
+
+  /* ——— Sémantique générale ——— */
+  --succes: #178a50;
+  --alerte: #b96f07;
+  --danger: #d92626;
+  --info: #3d6fe0;
+
+  /* ——— Palette graphique (analytics, ordre FIXE, validée CVD) ——— */
+  --graf-1: #3b69d6;
+  --graf-2: #dd8a0b;
+  --graf-3: #1f9e8e;
+  --graf-4: #8a63d2;
+  --graf-grille: #e6ebf2;
+
+  /* ——— Typographie ——— */
+  --police-ui: "Manrope", "Avenir Next", "Segoe UI Variable", system-ui, sans-serif;
+  --police-mono: "SF Mono", ui-monospace, "Cascadia Mono", monospace;
+  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px;
+  --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px;
+
+  /* ——— Forme & espace (grille 4 px) ——— */
+  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px;
+  --rayon: 10px;            /* cartes */
+  --rayon-controle: 8px;    /* inputs, boutons */
+  --rayon-pastille: 999px;
+  --ombre-menu: 0 8px 24px rgb(16 30 54 / 0.14);
+  --rail: 3px;              /* motif signature : rail actif safran */
+
+  /* ——— Mouvement ——— */
+  --transition: 140ms ease-out;
+}
+
+/* ——— Thème sombre (« machinerie de nuit », pas une inversion) ——— */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primaire: #6e92e8;
+    --primaire-actif: #8facf0;
+    --primaire-doux: #1d2c4c;
+    --safran: #e89a1f;
+    --safran-doux: #33270f;
+
+    --fond: #0f1622;
+    --surface: #182234;
+    --surface-2: #1e2a40;
+    --bordure: #2b3850;
+    --bordure-forte: #3d4d6b;
+    --encre: #e8edf5;
+    --encre-2: #a7b4c8;
+    --encre-3: #6d7d96;
+
+    --st-ouvert: #7da2ee;  --st-ouvert-fond: #1c2a47;
+    --st-encours: #a394ec; --st-encours-fond: #262040;
+    --st-attente: #e0a33c; --st-attente-fond: #322510;
+    --st-termine: #4bc084; --st-termine-fond: #12301f;
+    --st-annule: #93a3ba;  --st-annule-fond: #222d3f;
+
+    --prio-bloque: #f26d6d; --prio-bloque-fond: #3a1414;
+    --prio-haute: #f26d6d;
+    --prio-moyenne: #e0a33c;
+    --prio-basse: #4bc084;
+    --prio-aucune: #6d7d96;
+
+    --succes: #4bc084;
+    --alerte: #e0a33c;
+    --danger: #f26d6d;
+    --info: #7da2ee;
+
+    --graf-1: #5580e4;
+    --graf-2: #c7820a;
+    --graf-3: #26a896;
+    --graf-4: #9673de;
+    --graf-grille: #24304a;
+
+    --ombre-menu: 0 8px 24px rgb(0 0 0 / 0.45);
+  }
+}
+
+/* Le sélecteur de thème de l'app doit GAGNER dans les deux sens. */
+:root[data-theme="light"] {
+  --primaire: #1f4fb8; --primaire-actif: #1a439c; --primaire-doux: #eaf0fb;
+  --safran: #dd8a0b; --safran-doux: #fdf3e3;
+  --fond: #f5f7fa; --surface: #ffffff; --surface-2: #eef2f7;
+  --bordure: #dce3ec; --bordure-forte: #b9c4d4;
+  --encre: #1b2534; --encre-2: #55647a; --encre-3: #8494ab;
+  --st-ouvert: #3d6fe0; --st-ouvert-fond: #e9effc;
+  --st-encours: #6d5bd8; --st-encours-fond: #efecfa;
+  --st-attente: #b96f07; --st-attente-fond: #fbf1df;
+  --st-termine: #178a50; --st-termine-fond: #e6f5ec;
+  --st-annule: #68788f; --st-annule-fond: #edf0f4;
+  --prio-bloque: #d92626; --prio-bloque-fond: #fdeaea;
+  --prio-haute: #d92626; --prio-moyenne: #b96f07; --prio-basse: #178a50; --prio-aucune: #8494ab;
+  --succes: #178a50; --alerte: #b96f07; --danger: #d92626; --info: #3d6fe0;
+  --graf-1: #3b69d6; --graf-2: #dd8a0b; --graf-3: #1f9e8e; --graf-4: #8a63d2;
+  --graf-grille: #e6ebf2;
+  --ombre-menu: 0 8px 24px rgb(16 30 54 / 0.14);
+}
+:root[data-theme="dark"] {
+  --primaire: #6e92e8; --primaire-actif: #8facf0; --primaire-doux: #1d2c4c;
+  --safran: #e89a1f; --safran-doux: #33270f;
+  --fond: #0f1622; --surface: #182234; --surface-2: #1e2a40;
+  --bordure: #2b3850; --bordure-forte: #3d4d6b;
+  --encre: #e8edf5; --encre-2: #a7b4c8; --encre-3: #6d7d96;
+  --st-ouvert: #7da2ee; --st-ouvert-fond: #1c2a47;
+  --st-encours: #a394ec; --st-encours-fond: #262040;
+  --st-attente: #e0a33c; --st-attente-fond: #322510;
+  --st-termine: #4bc084; --st-termine-fond: #12301f;
+  --st-annule: #93a3ba; --st-annule-fond: #222d3f;
+  --prio-bloque: #f26d6d; --prio-bloque-fond: #3a1414;
+  --prio-haute: #f26d6d; --prio-moyenne: #e0a33c; --prio-basse: #4bc084; --prio-aucune: #6d7d96;
+  --succes: #4bc084; --alerte: #e0a33c; --danger: #f26d6d; --info: #7da2ee;
+  --graf-1: #5580e4; --graf-2: #c7820a; --graf-3: #26a896; --graf-4: #9673de;
+  --graf-grille: #24304a;
+  --ombre-menu: 0 8px 24px rgb(0 0 0 / 0.45);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --transition: 0ms; }
+}