feat: Dashboard placeholder avec preview Score Sérénité

Permet aux parents de visualiser une démo du Score Sérénité dès leur
première connexion, avant même que les données réelles soient disponibles.
Les autres rôles (enseignant, élève, admin) ont également leur dashboard
adapté avec des sections placeholder.

La landing page redirige automatiquement vers /dashboard si l'utilisateur
est déjà authentifié, offrant un accès direct au tableau de bord.

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { DemoData } from '$types';
+	import demoData from '$lib/data/demo-data.json';
+	import DashboardParent from '$lib/components/organisms/Dashboard/DashboardParent.svelte';
+	import DashboardTeacher from '$lib/components/organisms/Dashboard/DashboardTeacher.svelte';
+	import DashboardStudent from '$lib/components/organisms/Dashboard/DashboardStudent.svelte';
+	import DashboardAdmin from '$lib/components/organisms/Dashboard/DashboardAdmin.svelte';
+
+	type UserRole = 'parent' | 'teacher' | 'student' | 'admin' | 'direction';
+
+	// For now, default to parent role with demo data
+	// TODO: Fetch real user profile from /api/me when endpoint is implemented
+	let userRole = $state<UserRole>('parent');
+
+	// Simulated first login detection (in real app, this comes from API)
+	let isFirstLogin = $state(true);
+
+	// Serenity score preference (in real app, this is stored in backend)
+	let serenityEnabled = $state(true);
+
+	// Use demo data for now (no real data available yet)
+	const hasRealData = false;
+
+	// Demo child name for personalized messages
+	const childName = 'Emma';
+
+	function handleToggleSerenity(enabled: boolean) {
+		serenityEnabled = enabled;
+		// TODO: POST to /api/me/preferences when backend is ready
+		console.log('Serenity score preference updated:', enabled);
+	}
+
+	// Cast demo data to proper type
+	const typedDemoData = demoData as DemoData;
+
+	// Allow switching roles for demo purposes
+	function switchRole(role: UserRole) {
+		userRole = role;
+		isFirstLogin = false;
+	}
+</script>
+
+<svelte:head>
+	<title>Tableau de bord - Classeo</title>
+</svelte:head>
+
+<!-- Demo role switcher - TODO: Remove when real authentication is implemented -->
+<!-- This will be hidden once we can determine user role from /api/me -->
+<div class="demo-controls">
+	<span class="demo-label">Démo - Changer de rôle :</span>
+	<button class:active={userRole === 'parent'} onclick={() => switchRole('parent')}>Parent</button>
+	<button class:active={userRole === 'teacher'} onclick={() => switchRole('teacher')}>Enseignant</button>
+	<button class:active={userRole === 'student'} onclick={() => switchRole('student')}>Élève</button>
+	<button class:active={userRole === 'admin'} onclick={() => switchRole('admin')}>Admin</button>
+</div>
+
+{#if userRole === 'parent'}
+	<DashboardParent
+		demoData={typedDemoData}
+		{isFirstLogin}
+		isLoading={false}
+		{hasRealData}
+		{serenityEnabled}
+		{childName}
+		onToggleSerenity={handleToggleSerenity}
+	/>
+{:else if userRole === 'teacher'}
+	<DashboardTeacher isLoading={false} {hasRealData} />
+{:else if userRole === 'student'}
+	<DashboardStudent demoData={typedDemoData} isLoading={false} {hasRealData} isMinor={true} />
+{:else if userRole === 'admin' || userRole === 'direction'}
+	<DashboardAdmin
+		isLoading={false}
+		{hasRealData}
+		establishmentName="École Alpha"
+	/>
+{/if}
+
+<style>
+	.demo-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		margin-bottom: 1rem;
+		background: #fef3c7;
+		border: 1px solid #fcd34d;
+		border-radius: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.demo-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #92400e;
+	}
+
+	.demo-controls button {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.demo-controls button:hover {
+		background: #f3f4f6;
+	}
+
+	.demo-controls button.active {
+		background: #3b82f6;
+		border-color: #3b82f6;
+		color: white;
+	}
+</style>