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/web/src/components/avatar.tsx

@@ -0,0 +1,42 @@
+import type { RoleName } from '@siop/shared';
+import { cn } from '@/lib/cn';
+
+/** Couleur d'avatar par rôle (tokens uniquement — répartition de la maquette). */
+const ROLE_TOKEN: Record<RoleName, string> = {
+  Administrateur: 'var(--graf-1)',
+  Dispatcher: 'var(--primaire)',
+  Technicien: 'var(--graf-3)',
+  'Technicien limité': 'var(--st-encours)',
+  Gestionnaire: 'var(--graf-4)',
+  Demandeur: 'var(--st-annule)',
+  'Vue seule': 'var(--safran)',
+};
+
+export function Avatar({
+  initials,
+  roleName,
+  className,
+}: {
+  initials: string;
+  roleName?: RoleName;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn('avatar', className)}
+      style={roleName ? { background: ROLE_TOKEN[roleName] } : undefined}
+      aria-hidden="true"
+    >
+      {initials}
+    </span>
+  );
+}
+
+export function initialsOf(displayName: string): string {
+  return displayName
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join('');
+}