feat(carte): carte SVG legere des 4 regions sur accueil et bilans defi (ADR-002, 92 KB gz, SSR sans MapLibre)

app/src/routes/jeu/[mode]/+page.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/state';
 	import GameMap from '$lib/components/GameMap.svelte';
+	import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
 	import PhotoPanel from '$lib/components/PhotoPanel.svelte';
 	import ResultPanel from '$lib/components/ResultPanel.svelte';
 	import TimerRing from '$lib/components/TimerRing.svelte';
@@ -30,10 +31,23 @@
 	const estDefi = $derived(mode === 'defi');
 	const mancheCourante = $derived(defi.manches.length + 1);
 	const defiTermine = $derived(estDefi && defi.termine);
-	const paires = $derived(
-		defi.manches
-			.filter((m) => m.guess !== null)
-			.map((m) => ({ from: m.guess!, to: m.result.coordonnees, label: m.result.nom }))
+	// Marqueurs du récap SVG : position réelle (vert) + guess du joueur (corail),
+	// numérotés par manche ; une manche passée (guess null) n'a que le point réel.
+	const marqueursRecap = $derived(
+		defi.manches.flatMap((m, i): MarqueurCarte[] => {
+			const reel: MarqueurCarte = {
+				lat: m.result.coordonnees.lat,
+				lon: m.result.coordonnees.lon,
+				type: 'reel',
+				label: m.result.nom,
+				paire: i + 1
+			};
+			if (!m.guess) return [reel];
+			return [
+				reel,
+				{ lat: m.guess.lat, lon: m.guess.lon, type: 'guess', label: m.result.nom, paire: i + 1 }
+			];
+		})
 	);
 
 	async function chargerRound(): Promise<void> {
@@ -191,7 +205,7 @@
 				<span class="unite">{t().defi.scoreTotal}</span>
 			</p>
 			<div class="bilan-carte">
-				<GameMap interactive={false} pairs={paires} />
+				<CarteRegions selectionnable={false} marqueurs={marqueursRecap} />
 			</div>
 			<ol class="recap">
 				{#each defi.manches as m, i (m.place.id)}
@@ -482,7 +496,9 @@
 	}
 
 	.bilan-carte {
-		height: min(46vh, 420px);
+		width: 100%;
+		max-width: 520px;
+		margin: 0 auto;
 	}
 
 	.recap {