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

app/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import CarteRegions from '$lib/components/CarteRegions.svelte';
 	import { t } from '$lib/i18n/store.svelte';
-	import { REGIONS } from '$lib/map/regions';
 	import type { GameMode, Region } from '$lib/types';
 
 	type ChoixRegion = Region | 'TOUTES';
@@ -22,6 +22,15 @@
 		if (timer) params.set('timer', '1');
 		goto(`/jeu/${mode}${params.size ? `?${params}` : ''}`);
 	}
+
+	/** Génère une seed lisible (alphabet sans ambiguïté : pas de 0/O, 1/I/L) et ouvre le défi partagé. */
+	function creerLienDefi(): void {
+		const alphabet = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
+		const octets = new Uint8Array(8);
+		crypto.getRandomValues(octets);
+		const seed = Array.from(octets, (b) => alphabet[b % alphabet.length]).join('');
+		goto(`/defi/${seed}`);
+	}
 </script>
 
 <svelte:head>
@@ -38,26 +47,16 @@
 
 	<section aria-labelledby="titre-regions">
 		<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
-		<div class="grille regions">
-			{#each REGIONS as r (r)}
-				<button
-					type="button"
-					class="carte-region region-{r.toLowerCase()}"
-					class:choisi={region === r}
-					aria-pressed={region === r}
-					onclick={() => (region = r)}
-				>
-					<span class="nom">{t().regions[r]}</span>
-				</button>
-			{/each}
+		<div class="carte-accueil">
+			<CarteRegions bind:selection={region} />
 			<button
 				type="button"
-				class="carte-region toutes"
+				class="btn btn-secondaire toutes"
 				class:choisi={region === 'TOUTES'}
 				aria-pressed={region === 'TOUTES'}
 				onclick={() => (region = 'TOUTES')}
 			>
-				<span class="nom">{t().regions.TOUTES}</span>
+				{t().regions.TOUTES}
 			</button>
 		</div>
 	</section>
@@ -84,6 +83,11 @@
 				<span class="desc">{t().modes.explorerDesc}</span>
 			</a>
 		</div>
+		{#if mode === 'defi'}
+			<button type="button" class="btn btn-secondaire lien-defi" onclick={creerLienDefi}>
+				{t().accueil.creerLienDefi}
+			</button>
+		{/if}
 	</section>
 
 	<section class="options" aria-labelledby="titre-options">
@@ -148,15 +152,35 @@
 		gap: 0.7rem;
 	}
 
-	.regions {
-		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-	}
-
 	.modes {
 		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 	}
 
-	.carte-region,
+	/* Carte SVG des régions + bouton « Toutes les régions » */
+	.carte-accueil {
+		max-width: 560px;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.6rem;
+	}
+
+	.toutes {
+		border: 2px solid transparent;
+	}
+
+	.toutes.choisi {
+		border-color: var(--oki-vert);
+		background: var(--oki-vert-doux);
+	}
+
+	/* Bouton secondaire « Créer un lien de défi », sous la grille des modes */
+	.lien-defi {
+		display: block;
+		margin: 0.8rem auto 0;
+	}
+
 	.carte-mode {
 		border: 2px solid transparent;
 		border-radius: var(--oki-radius);
@@ -166,19 +190,6 @@
 		text-align: center;
 		color: var(--oki-encre);
 		text-decoration: none;
-	}
-
-	.carte-region {
-		padding: 1.4rem 0.6rem;
-		font-size: 1.05rem;
-		font-weight: 700;
-	}
-
-	.carte-region .nom {
-		color: var(--oki-vert);
-	}
-
-	.carte-mode {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -200,12 +211,10 @@
 		color: var(--oki-encre-doux);
 	}
 
-	.carte-region:hover,
 	.carte-mode:hover {
 		border-color: var(--oki-vert-clair);
 	}
 
-	.carte-region.choisi,
 	.carte-mode.choisi {
 		border-color: var(--oki-vert);
 		background: var(--oki-vert-doux);