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/auth/use-auth.ts

@@ -0,0 +1,79 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { api, clearToken, getToken, setToken } from '@/api/client';
+
+/** Profil courant. Un 401 (jeton expiré/invalide) purge la session. */
+export function useMe() {
+  return useQuery({
+    queryKey: ['me'],
+    enabled: !!getToken(),
+    retry: false,
+    queryFn: async () => {
+      const { data, response } = await api.GET('/users/me');
+      if (response.status === 401) {
+        clearToken();
+        throw new Error('Session expirée');
+      }
+      if (!data) throw new Error('Profil indisponible');
+      return data;
+    },
+  });
+}
+
+/** ADR-002 : la liste n'existe qu'en DEMO_MODE — un 404 signifie « pas de
+ *  mode démo », le web n'affiche alors rien (null). */
+export function useDemoAccounts() {
+  return useQuery({
+    queryKey: ['demo-accounts'],
+    retry: false,
+    staleTime: 5 * 60_000,
+    queryFn: async () => {
+      const { data, response } = await api.GET('/auth/demo-accounts');
+      if (response.status === 404) return null;
+      return data?.accounts ?? null;
+    },
+  });
+}
+
+export function useLogin() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (body: { email: string; password: string }) => {
+      const { data, error } = await api.POST('/auth/login', { body });
+      if (error || !data) throw new Error('Email ou mot de passe incorrect');
+      return data;
+    },
+    onSuccess: (data) => {
+      setToken(data.accessToken);
+      queryClient.clear();
+    },
+  });
+}
+
+/** Connexion 1 clic (et bascule de rôle en cours de session — critère < 3 s). */
+export function useDemoLogin() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (userId: string) => {
+      const { data, error } = await api.POST('/auth/demo-login', {
+        body: { userId },
+      });
+      if (error || !data) throw new Error('Connexion démo impossible');
+      return data;
+    },
+    onSuccess: (data) => {
+      setToken(data.accessToken);
+      queryClient.clear();
+    },
+  });
+}
+
+export function useLogout() {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  return () => {
+    clearToken();
+    queryClient.clear();
+    navigate('/connexion', { replace: true });
+  };
+}