feat(r0.11): apps/web — connexion + sélecteur démo, coquille, /design, client typé

- React 19 + Vite + Tailwind v4 : tokens.css copié tel quel (source de
  vérité), classes composants extraites de la maquette validée, Manrope
  auto-hébergée, primitives shadcn-style possédées (Button cva, menu Radix)
- connexion fidèle à la maquette ; liste démo affichée seulement si
  /auth/demo-accounts répond (404 ⇒ rien — ADR-002, l'API seule source)
- coquille : sidebar 4 groupes avec rail safran actif (écrans futurs marqués
  R1-R3), topbar recherche/thème/chip DÉMO + sélecteur de rôle (bascule 101 ms,
  critère < 3 s) ; page /design = référence vivante des revues pixel
- règle d'or : schema.d.ts généré depuis docs/openapi.json et committé
  (openapi-typescript + openapi-fetch)
- tokens.css : tokens --nav-* ajoutés (valeurs de la maquette validée) ;
  seed réaligné sur les personas de la maquette
- vérifié en navigateur réel (Playwright + Chrome headless) : 7 captures,
  parcours démo complet, bi-thème, zéro erreur console ; typecheck + vitest + build OK

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

apps/api/prisma/seed.ts

@@ -82,15 +82,16 @@ const MATRIX: Record<RoleName, Partial<Record<ObjectCategory, Grant>>> = {
   },
 };
 
-/** 7 comptes démo — un par rôle (personas des maquettes 02-design). */
+/** 7 comptes démo — un par rôle. Les noms sont CEUX de la maquette validée
+ *  (maquette-web.html) : la revue pixel compare écrans et maquettes. */
 const DEMO_USERS: { email: string; displayName: string; role: RoleName }[] = [
-  { email: 'admin@demo.siop.ma', displayName: 'Amina Benali', role: 'Administrateur' },
-  { email: 'dispatcher@demo.siop.ma', displayName: 'Salma Radi', role: 'Dispatcher' },
-  { email: 'technicien@demo.siop.ma', displayName: 'Ahmed Meskini', role: 'Technicien' },
-  { email: 'technicien-limite@demo.siop.ma', displayName: 'Yassine Bouzid', role: 'Technicien limité' },
-  { email: 'gestionnaire@demo.siop.ma', displayName: 'Nadia Cherkaoui', role: 'Gestionnaire' },
-  { email: 'demandeur@demo.siop.ma', displayName: 'Karim El Fassi', role: 'Demandeur' },
-  { email: 'vue-seule@demo.siop.ma', displayName: 'Omar Senhaji', role: 'Vue seule' },
+  { email: 'admin@demo.siop.ma', displayName: 'Yasmine Alaoui', role: 'Administrateur' },
+  { email: 'dispatcher@demo.siop.ma', displayName: 'Salma Idrissi', role: 'Dispatcher' },
+  { email: 'technicien@demo.siop.ma', displayName: 'Ahmed Benali', role: 'Technicien' },
+  { email: 'technicien-limite@demo.siop.ma', displayName: 'Youssef Tazi', role: 'Technicien limité' },
+  { email: 'gestionnaire@demo.siop.ma', displayName: 'Nadia Berrada', role: 'Gestionnaire' },
+  { email: 'demandeur@demo.siop.ma', displayName: 'Karim Doukkali', role: 'Demandeur' },
+  { email: 'vue-seule@demo.siop.ma', displayName: 'Rachid Bennis', role: 'Vue seule' },
 ];
 
 export async function seed(prisma: PrismaClient): Promise<void> {
@@ -131,9 +132,11 @@ export async function seed(prisma: PrismaClient): Promise<void> {
     process.env.SEED_DEMO_PASSWORD ?? 'Demo!2026',
   );
   for (const u of DEMO_USERS) {
+    // Les comptes démo appartiennent au seed : nom et rôle sont réalignés
+    // à chaque exécution (jamais le mot de passe d'un compte existant).
     await prisma.user.upsert({
       where: { email: u.email },
-      update: {},
+      update: { displayName: u.displayName, roleId: roleIds.get(u.role)! },
       create: {
         email: u.email,
         displayName: u.displayName,