feat: Gestion des utilisateurs (invitation, blocage, déblocage)

Permet aux administrateurs d'un établissement de gérer le cycle de vie
des comptes utilisateurs : inviter de nouveaux membres, bloquer/débloquer
des comptes actifs, et renvoyer des invitations en attente.

Chaque mutation vérifie l'appartenance au tenant courant pour empêcher
les accès cross-tenant. Le blocage est restreint aux comptes actifs
uniquement et un administrateur ne peut pas bloquer son propre compte.

Les comptes suspendus reçoivent une erreur 403 spécifique au login
(sans déclencher l'escalade du rate limiting) et les tentatives sont
tracées dans les métriques Prometheus.

frontend/src/lib/auth/auth.svelte.ts

@@ -45,9 +45,10 @@ function parseJwtPayload(token: string): Record<string, unknown> | null {
 function extractUserId(token: string): string | null {
 	const payload = parseJwtPayload(token);
 	if (!payload) return null;
-	// JWT 'sub' claim contains the user ID
-	const sub = payload['sub'];
-	return typeof sub === 'string' ? sub : null;
+	// JWT 'user_id' claim contains the UUID (set by JwtPayloadEnricher)
+	// Note: 'sub' contains the email (Lexik default), not the UUID
+	const userId = payload['user_id'];
+	return typeof userId === 'string' ? userId : null;
 }
 
 export interface LoginCredentials {
@@ -59,7 +60,7 @@ export interface LoginCredentials {
 export interface LoginResult {
 	success: boolean;
 	error?: {
-		type: 'invalid_credentials' | 'rate_limited' | 'captcha_required' | 'captcha_invalid' | 'unknown';
+		type: 'invalid_credentials' | 'rate_limited' | 'captcha_required' | 'captcha_invalid' | 'account_suspended' | 'unknown';
 		message: string;
 		retryAfter?: number | undefined;
 		delay?: number | undefined;
@@ -132,6 +133,17 @@ export async function login(credentials: LoginCredentials): Promise<LoginResult>
 			};
 		}
 
+		// Compte suspendu (403)
+		if (response.status === 403 && error.type === '/errors/account-suspended') {
+			return {
+				success: false,
+				error: {
+					type: 'account_suspended',
+					message: error.detail,
+				},
+			};
+		}
+
 		// CAPTCHA invalide (400)
 		if (response.status === 400 && error.type === '/errors/captcha-invalid') {
 			return {

frontend/src/lib/auth/index.ts

@@ -5,6 +5,7 @@ export {
 	authenticatedFetch,
 	isAuthenticated,
 	getAccessToken,
+	getCurrentUserId,
 	type LoginCredentials,
 	type LoginResult,
 } from './auth.svelte';

frontend/src/lib/components/organisms/Dashboard/DashboardAdmin.svelte

@@ -26,11 +26,11 @@
 	<div class="quick-actions">
 		<h2 class="sr-only">Actions de configuration</h2>
 		<div class="action-cards">
-			<div class="action-card disabled" aria-disabled="true">
+			<a class="action-card" href="/admin/users">
 				<span class="action-icon">👥</span>
 				<span class="action-label">Gérer les utilisateurs</span>
-				<span class="action-hint">Bientôt disponible</span>
-			</div>
+				<span class="action-hint">Inviter et gérer</span>
+			</a>
 			<a class="action-card" href="/admin/classes">
 				<span class="action-icon">🏫</span>
 				<span class="action-label">Configurer les classes</span>

frontend/src/routes/admin/+layout.svelte

@@ -24,6 +24,7 @@
 	}
 
 	// Determine which admin section is active
+	const isUsersActive = $derived(page.url.pathname.startsWith('/admin/users'));
 	const isClassesActive = $derived(page.url.pathname.startsWith('/admin/classes'));
 	const isSubjectsActive = $derived(page.url.pathname.startsWith('/admin/subjects'));
 	const isPeriodsActive = $derived(page.url.pathname.startsWith('/admin/academic-year/periods'));
@@ -38,6 +39,7 @@
 			</button>
 			<nav class="header-nav">
 				<a href="/dashboard" class="nav-link">Tableau de bord</a>
+				<a href="/admin/users" class="nav-link" class:active={isUsersActive}>Utilisateurs</a>
 				<a href="/admin/classes" class="nav-link" class:active={isClassesActive}>Classes</a>
 				<a href="/admin/subjects" class="nav-link" class:active={isSubjectsActive}>Matières</a>
 				<a href="/admin/academic-year/periods" class="nav-link" class:active={isPeriodsActive}>Périodes</a>

frontend/src/routes/login/+page.svelte

@@ -104,7 +104,7 @@
 
 		try {
 			const result: LoginResult = await login({
-				email,
+				email: email.trim(),
 				password,
 				captcha_token: captchaToken ?? undefined
 			});
@@ -188,7 +188,7 @@
 			<h1>Connexion</h1>
 
 			{#if error}
-				<div class="error-banner" class:rate-limited={isRateLimited}>
+				<div class="error-banner" class:rate-limited={isRateLimited} class:account-suspended={error.type === 'account_suspended'}>
 					{#if isRateLimited}
 						<span class="error-icon">🔒</span>
 						<div class="error-content">
@@ -197,6 +197,11 @@
 								Réessayez dans <strong>{formatCountdown(retryAfterSeconds)}</strong>
 							</span>
 						</div>
+					{:else if error.type === 'account_suspended'}
+						<span class="error-icon">🚫</span>
+						<div class="error-content">
+							<span class="error-message">{error.message}</span>
+						</div>
 					{:else}
 						<span class="error-icon">⚠</span>
 						<span class="error-message">{error.message}</span>
@@ -208,6 +213,7 @@
 				<div class="form-group">
 					<label for="email">Adresse email</label>
 					<div class="input-wrapper">
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							id="email"
 							type="email"
@@ -216,6 +222,7 @@
 							bind:value={email}
 							disabled={isSubmitting || isRateLimited || isDelayed}
 							autocomplete="email"
+							autofocus
 						/>
 					</div>
 				</div>
@@ -393,6 +400,12 @@
 		color: hsl(38, 92%, 30%);
 	}
 
+	.error-banner.account-suspended {
+		background: linear-gradient(135deg, hsl(220, 30%, 95%) 0%, hsl(220, 30%, 97%) 100%);
+		border-color: hsl(220, 30%, 80%);
+		color: hsl(220, 30%, 30%);
+	}
+
 	.error-icon {
 		flex-shrink: 0;
 		font-size: 18px;