feat: Gestion des sessions utilisateur

Permet aux utilisateurs de visualiser et gérer leurs sessions actives
sur différents appareils, avec la possibilité de révoquer des sessions
à distance en cas de suspicion d'activité non autorisée.

Fonctionnalités :
- Liste des sessions actives avec métadonnées (appareil, navigateur, localisation)
- Identification de la session courante
- Révocation individuelle d'une session
- Révocation de toutes les autres sessions
- Déconnexion avec nettoyage des cookies sur les deux chemins (legacy et actuel)

Sécurité :
- Cache frontend scopé par utilisateur pour éviter les fuites entre comptes
- Validation que le refresh token appartient à l'utilisateur JWT authentifié
- TTL des sessions Redis aligné sur l'expiration du refresh token
- Événements d'audit pour traçabilité (SessionInvalidee, ToutesSessionsInvalidees)

@see Story 1.6 - Gestion des sessions

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

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { logout } from '$lib/auth/auth.svelte';
+
+	let { children } = $props();
+	let isLoggingOut = $state(false);
+
+	async function handleLogout() {
+		isLoggingOut = true;
+		try {
+			await logout();
+		} finally {
+			isLoggingOut = false;
+		}
+	}
+
+	function goHome() {
+		goto('/');
+	}
+</script>
+
+<div class="settings-layout">
+	<header class="settings-header">
+		<div class="header-content">
+			<button class="logo-button" onclick={goHome}>
+				<span class="logo-text">Classeo</span>
+			</button>
+			<nav class="header-nav">
+				<button
+					class="logout-button"
+					onclick={handleLogout}
+					disabled={isLoggingOut}
+				>
+					{#if isLoggingOut}
+						<span class="spinner"></span>
+						Déconnexion...
+					{:else}
+						Déconnexion
+					{/if}
+				</button>
+			</nav>
+		</div>
+	</header>
+
+	<div class="settings-content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.settings-layout {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background: var(--surface-primary, #f8fafc);
+	}
+
+	.settings-header {
+		background: var(--surface-elevated, #fff);
+		border-bottom: 1px solid var(--border-subtle, #e2e8f0);
+		padding: 0 24px;
+	}
+
+	.header-content {
+		max-width: 1200px;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 64px;
+	}
+
+	.logo-button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 8px 0;
+	}
+
+	.logo-text {
+		font-size: 20px;
+		font-weight: 700;
+		color: var(--accent-primary, hsl(199, 89%, 48%));
+	}
+
+	.header-nav {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+
+	.logout-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 500;
+		color: var(--text-secondary, #64748b);
+		background: transparent;
+		border: 1px solid var(--border-subtle, #e2e8f0);
+		border-radius: 8px;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.logout-button:hover:not(:disabled) {
+		color: var(--color-alert, hsl(0, 72%, 51%));
+		border-color: var(--color-alert, hsl(0, 72%, 51%));
+	}
+
+	.logout-button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.spinner {
+		width: 14px;
+		height: 14px;
+		border: 2px solid var(--border-subtle, #e2e8f0);
+		border-top-color: var(--text-secondary, #64748b);
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	.settings-content {
+		flex: 1;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>