diff --git a/apps/web/src/auth/use-auth.ts b/apps/web/src/auth/use-auth.ts
index 54ba465..a170b85 100644
--- a/apps/web/src/auth/use-auth.ts
+++ b/apps/web/src/auth/use-auth.ts
@@ -21,7 +21,9 @@ export function useMe() {
 }
 
 /** 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). */
+ *  mode démo », le web n'affiche alors rien (null). Une ERREUR RÉSEAU, en
+ *  revanche, signifie que l'API est injoignable : l'écran de connexion
+ *  l'affiche clairement (isError) au lieu de masquer la démo en silence. */
 export function useDemoAccounts() {
   return useQuery({
     queryKey: ['demo-accounts'],
@@ -29,8 +31,9 @@ export function useDemoAccounts() {
     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;
+      if (response.status === 404) return null; // pas de mode démo : normal
+      if (!data) throw new Error(`API : ${response.status}`);
+      return data.accounts;
     },
   });
 }
diff --git a/apps/web/src/pages/connexion.tsx b/apps/web/src/pages/connexion.tsx
index 552a861..9487bdc 100644
--- a/apps/web/src/pages/connexion.tsx
+++ b/apps/web/src/pages/connexion.tsx
@@ -11,7 +11,7 @@ export default function PageConnexion() {
   const navigate = useNavigate();
   const login = useLogin();
   const demoLogin = useDemoLogin();
-  const { data: demoAccounts } = useDemoAccounts();
+  const { data: demoAccounts, isError: apiInjoignable } = useDemoAccounts();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
@@ -33,6 +33,12 @@ export default function PageConnexion() {
     <div className="conn">
       <div className="carte-conn">
         <Logo sousTitre="Maintenance d'ascenseurs" />
+        {apiInjoignable ? (
+          <p className="erreur-form" role="alert">
+            L'API ne répond pas — en local, démarrez-la avec <code>pnpm dev</code>{' '}
+            (à la racine, elle lance l'API et le web ensemble).
+          </p>
+        ) : null}
         <form
           onSubmit={surConnexion}
           className="flex flex-col gap-[14px]"