fix(ui): enhance region maps contrast in dark/light & desktop single-screen layout

- Layout app-style 100dvh : zéro scroll desktop (accueil, jeu, bilan, explorer),
  zéro superposition mobile (sauts sortis de la carte, badges consolidés en une puce,
  barre d'actions opaque z-indexée, indices en panneau interne, sheet explorer dégagé)
- CSS jeu mutualisé (jeu.css) + partager() factorisé (lib/partage.ts)
- Motion gwoka : reveals syncopés, révélation designée (ligne de distance animée,
  score en count-up, marqueur qui tombe), transitions d'état, bilan en cascade
- SEO : Seo.svelte (canonical, OG, Twitter), robots.txt, sitemap.xml
- Sécurité : hooks.server.ts (CSP, nosniff, DENY, Referrer-Policy, Permissions-Policy)
- Dette : 4 clés i18n mortes, zip debug ignoré
- Vérifié puppeteer : mobile 390x844 (0 overlap, 0 scroll), desktop 1440x900
  (0 scroll même +2 indices), révélation complète, zéro erreur console/CSP

.gitignore

@@ -0,0 +1,9 @@
+# Paquet YunoHost (dépôt séparé : ORGANISATION-KA-INTERNATIONALE/jwe_ynh)
+jwe_ynh/
+
+# Règles et playbooks internes (non versionnés)
+rules/
+
+# Artefacts de debug Kimi CLI
+kimi-debug-session*.zip
+

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright 2024 ORGANISATION KA INTERNATIONALE (OKI)
+Copyright (c) 2026 ORGANISATION KA INTERNATIONALE (OKI) & contributeurs JWE
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,10 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+---
+
+Note : les photographies affichées par l'application restent la propriété de
+leurs auteurs respectifs et sont distribuées sous leurs licences Wikimedia
+Commons (voir content/credits.md). Les extraits d'articles Wikipédia sont
+sous licence CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

README.md

@@ -1,11 +1,7 @@
 # JWE
 
 <p align="center">
-Ce projet cartographique est une application Web simple qui vous permet de tester vos connaissances des communes ou des pays proposés à l'aide de cartes interactives.
-</p>
-
-<p align="center">
-Il ne nécessite qu'un serveur Web local pour fonctionner, tel que Nginx, Apache, ou un serveur PHP intégré.
+JWE est un jeu de géolocalisation souverain, dans l'esprit de GeoGuessr, centré sur 4 régions : <strong>Guadeloupe, Martinique, Guyane, La Réunion</strong>. Le joueur voit une photo unique d'un lieu — ou navigue dans une rue en visionneuse Mapillary (mode <em>An lari a</em>) — et place un marqueur sur une carte pour deviner la commune — puis découvre une fiche éducative Wikipédia/Wikidata… ou un appel à contribution quand le lieu n'y est pas documenté (<em>Pwen blindé</em>).
 </p>
 
 <p align="center">
@@ -16,37 +12,40 @@ Il ne nécessite qu'un serveur Web local pour fonctionner, tel que Nginx, Apache
   </a>
 </p>
 
-<p  align="center">
-  <img src="https://codeberg.org/OKI/jwe/raw/commit/166b356d21e4b3271afd3be111eae57e6bee7a95/972.gif" />
-</p>
-
+- **Souverain** : zéro Google, zéro Mapbox. MapLibre + tiles libres, Wikipédia/Wikidata, auto-hébergeable sur un petit VPS. (Exception documentée : le mode street « An lari a » utilise la visionneuse Mapillary — images CC BY-SA 4.0, lib MIT, token client gratuit.)
+- **Éthique** : pas de comptes, pas de leaderboard, pas de mécanique dopaminergique.
+- **Bilingue** : français / créole.
+- **5 modes** : Konnèt moniman, Kote mwen ye ?, Défi 5 rounds, Aprann (explorer), An lari a (street-level Mapillary).
+- **Stack** : Svelte 5 + SvelteKit 2, MapLibre GL JS, mapillary-js, Node ≥ 20, licence MIT.
 
 ## Utilisation
 
-1. **Clonage du dépôt**
-
-Clonez ce dépôt sur votre ordinateur en utilisant la commande suivante :
-
 ```bash
-git clone https://codeberg.org/OKI/jwe.git
+git clone https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/JWE.git
+cd JWE/app
+npm ci
+cp .env.example .env   # puis renseignez PUBLIC_MAPILLARY_TOKEN (token client gratuit)
+npm run dev        # développement
+npm run build && node build   # production (adapter-node)
 ```
 
-2. **Configuration du Serveur Web Local**
+## Documentation
 
-Placez le répertoire cloné dans le répertoire racine de votre serveur Web local. Vous pouvez également exécuter la commande suivante depuis le répertoire du projet :
-
-```bash
-php -S 127.0.0.1:8000
-```
-
-3. **Accès à l'Application**
-
-Accédez à l'application via votre navigateur Web en utilisant l'adresse `http://127.0.0.1:8000`.
+- [`docs/architecture.md`](docs/architecture.md) — décisions d'architecture (ADR).
+- [`docs/deploiement.md`](docs/deploiement.md) — auto-hébergement (SvelteKit + tileserver-gl).
+- [`docs/contribution.md`](docs/contribution.md) — ajouter un lieu et lier sa fiche Wikidata.
+- [`docs/audit-oki.md`](docs/audit-oki.md) — audit qualité et doctrine OKI.
 
 ## Contributions
 
-Les contributions sont les bienvenues ! Si vous souhaitez contribuer à ce projet, n'hésitez pas à soumettre des pull requests.
+Les contributions sont les bienvenues ! Ajouter un lieu se fait par pull request (voir [`docs/contribution.md`](docs/contribution.md)).
+
+## Historique
+
+La version 1 (PHP, cartes des communes) a été remplacée par cette refonte en juillet 2026 ; elle reste disponible dans l'historique Git (`git log` avant le commit de refonte).
 
 ## Licence
 
-Ce projet est sous licence MIT - voir le fichier [LICENSE](LICENSE) pour plus de détails.
+Copyright (C) 2024-2026 Cédric Famibelle-Pronzola & ORGANISATION KA INTERNATIONALE (OKI)
+
+Code sous licence **MIT** (voir [LICENSE](LICENSE)). Les photographies restent la propriété de leurs auteurs sous leurs licences Wikimedia Commons ; les images street-level Mapillary sont sous CC BY-SA 4.0 par leurs contributeurs (voir [`content/credits.md`](content/credits.md)) ; les extraits Wikipédia sont sous CC BY-SA 4.0.

app/.env.example

@@ -0,0 +1,7 @@
+# Token client Mapillary (gratuit) : https://www.mapillary.com/dashboard/developers
+# Requis uniquement pour le mode street « An lari a » (visionneuse mapillary-js).
+# Token client : conçu pour être exposé côté navigateur (rate-limité par app).
+PUBLIC_MAPILLARY_TOKEN=
+
+# Optionnel : URL d'un style/tiles auto-hébergé (tileserver-gl) — voir docs/deploiement.md
+# PUBLIC_TILES_URL=

app/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+build
+.svelte-kit
+.env
+.env.*
+!.env.example
+.vite

app/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2026 ORGANISATION KA INTERNATIONALE (OKI) & contributeurs JWE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+Note : les photographies affichées par l'application restent la propriété de
+leurs auteurs respectifs et sont distribuées sous leurs licences Wikimedia
+Commons (voir content/credits.md). Les extraits d'articles Wikipédia sont
+sous licence CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

app/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "jwe",
+  "version": "2.2.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "node build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-node": "^5.2.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@types/node": "^26.1.1",
+    "mapshaper": "^0.7.45",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.1.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "mapillary-js": "^4.1.2",
+    "maplibre-gl": "^5.1.0",
+    "sharp": "^0.35.3"
+  }
+}

app/scripts/build-carte-regions.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+/**
+ * Génère `src/lib/map/regions-geo.json` : contours simplifiés des communes des
+ * 4 régions JWE, pour la carte SVG statique des écrans hors-jeu (ADR-002).
+ *
+ * Pipeline : geo.api.gouv.fr (contours communes, gratuit, sans clé)
+ *   → simplification mapshaper (Visvalingam, `keep-shapes`)
+ *   → anneaux externes uniquement, MultiPolygons aplatis, coords à 5 décimales
+ *   → JSON minifié versionné dans le repo.
+ *
+ * Rejouable : `node scripts/build-carte-regions.mjs [pourcentage]`
+ *   pourcentage = seuil mapshaper (défaut 7%, calibré : ~90 KB gzip -9).
+ *   Le script affiche le poids brut et gzip -9 (budget ADR-002 V1 : ≤ 150 KB gzippé).
+ */
+import { writeFile } from 'node:fs/promises';
+import { gzipSync } from 'node:zlib';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import mapshaper from 'mapshaper';
+
+const REGIONS = {
+	'01': { cle: 'GUADELOUPE', nom: 'Guadeloupe', creole: 'Gwadloup' },
+	'02': { cle: 'MARTINIQUE', nom: 'Martinique', creole: 'Matinik' },
+	'03': { cle: 'GUYANE', nom: 'Guyane', creole: 'Giyan' },
+	'04': { cle: 'REUNION', nom: 'La Réunion', creole: 'Léryinyon' }
+};
+
+const USER_AGENT = 'JWE-OKI/2.0 (https://labola.o-k-i.net ; scripts/build-carte-regions)';
+const BUDGET_GZ = 150 * 1024;
+const SORTIE = path.join(
+	path.dirname(fileURLToPath(import.meta.url)),
+	'..',
+	'src',
+	'lib',
+	'map',
+	'regions-geo.json'
+);
+
+const pourcentage = process.argv[2] ?? '7%';
+
+async function fetchCommunes(codeRegion) {
+	const url = `https://geo.api.gouv.fr/communes?codeRegion=${codeRegion}&fields=nom,code,contour&format=json&geometry=contour`;
+	const res = await fetch(url, {
+		headers: { 'User-Agent': USER_AGENT, Accept: 'application/json' }
+	});
+	if (!res.ok) throw new Error(`geo.api.gouv.fr région ${codeRegion} : HTTP ${res.status}`);
+	return res.json();
+}
+
+function applyCommands(cmd, inputs) {
+	return new Promise((resolve, reject) => {
+		mapshaper.applyCommands(cmd, inputs, (err, out) => (err ? reject(err) : resolve(out)));
+	});
+}
+
+/** Simplifie un GeoJSON avec mapshaper et renvoie le GeoJSON parsé. */
+async function simplifier(featureCollection) {
+	const cmd = `-i communes.geojson -simplify ${pourcentage} keep-shapes -o sortie.geojson`;
+	const out = await applyCommands(cmd, { 'communes.geojson': featureCollection });
+	const brut = out['sortie.geojson'];
+	// mapshaper renvoie un Buffer en sortie fichier (Node), une string ou un objet selon le format
+	if (Buffer.isBuffer(brut)) return JSON.parse(brut.toString('utf8'));
+	return typeof brut === 'string' ? JSON.parse(brut) : brut;
+}
+
+const r5 = (n) => Math.round(n * 1e5) / 1e5;
+
+/** Anneaux externes seuls ; MultiPolygon → plusieurs polygones ; coords arrondies. */
+function extrairePolygones(geojson) {
+	const polygons = [];
+	for (const feature of geojson.features) {
+		const g = feature.geometry;
+		const multi = g?.type === 'MultiPolygon' ? g.coordinates : g?.type === 'Polygon' ? [g.coordinates] : [];
+		for (const poly of multi) {
+			const anneau = poly[0];
+			if (!Array.isArray(anneau) || anneau.length < 4) continue;
+			polygons.push(anneau.map(([lon, lat]) => [r5(lon), r5(lat)]));
+		}
+	}
+	return polygons;
+}
+
+const resultat = {};
+for (const [codeRegion, info] of Object.entries(REGIONS)) {
+	const communes = await fetchCommunes(codeRegion);
+	const fc = {
+		type: 'FeatureCollection',
+		features: communes
+			.filter((c) => c.contour)
+			.map((c) => ({
+				type: 'Feature',
+				properties: { code: c.code, nom: c.nom },
+				geometry: c.contour
+			}))
+	};
+	const simplifie = await simplifier(fc);
+	const polygons = extrairePolygones(simplifie);
+	const points = polygons.reduce((s, p) => s + p.length, 0);
+	resultat[info.cle] = { nom: info.nom, creole: info.creole, polygons };
+	console.log(
+		`${info.cle.padEnd(11)} ${String(fc.features.length).padStart(3)} communes → ` +
+			`${String(polygons.length).padStart(3)} polygones, ${points} points`
+	);
+}
+
+const json = JSON.stringify(resultat);
+await writeFile(SORTIE, json + '\n', 'utf8');
+const brut = Buffer.byteLength(json, 'utf8');
+const gz = gzipSync(json, { level: 9 }).length;
+console.log(`\n${path.relative(process.cwd(), SORTIE)}`);
+console.log(`Brut    : ${(brut / 1024).toFixed(1)} KB`);
+console.log(`gzip -9 : ${(gz / 1024).toFixed(1)} KB (budget V1 : 150 KB)`);
+if (gz > BUDGET_GZ) {
+	console.error('DÉPASSEMENT DU BUDGET — relancer avec un pourcentage plus faible.');
+	process.exitCode = 1;
+}

app/scripts/curate-street.mjs

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+/**
+ * Curation du corpus street (« An lari a ») — mode Mapillary.
+ * « Fetch, pas recall » : pour chaque commune cible, interroge l'API Mapillary
+ * (bbox autour du centre communal, préférence 360° + qualité + récence),
+ * geo.api.gouv.fr (centre, superficie), api-adresse (nom de rue) et Wikidata
+ * (QID de la commune via le sitelink frwiki).
+ *
+ * Usage : MAPILLARY_TOKEN=… node scripts/curate-street.mjs
+ *   (le token est aussi lu depuis .env : MAPILLARY_TOKEN ou PUBLIC_MAPILLARY_TOKEN)
+ * Écrit src/lib/server/data/street.json.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+function chargeEnv() {
+	try {
+		for (const ligne of readFileSync(join(ROOT, '.env'), 'utf8').split('\n')) {
+			const m = ligne.match(/^\s*([A-Z_]+)\s*=\s*(.+?)\s*$/);
+			if (m && !process.env[m[1]]) process.env[m[1]] = m[2];
+		}
+	} catch {
+		/* pas de .env */
+	}
+}
+chargeEnv();
+const TOKEN = process.env.MAPILLARY_TOKEN || process.env.PUBLIC_MAPILLARY_TOKEN;
+if (!TOKEN) {
+	console.error('Token Mapillary manquant (MAPILLARY_TOKEN ou PUBLIC_MAPILLARY_TOKEN).');
+	process.exit(1);
+}
+
+const UA = { 'User-Agent': 'JWE-OKI/2.0 (curation corpus street; contact: o-k-i.net)' };
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const getJSON = async (url, headers = UA) => {
+	const res = await fetch(url, { headers });
+	if (!res.ok) throw new Error(`HTTP ${res.status} sur ${url}`);
+	return res.json();
+};
+
+// Communes cibles : 5 par région, difficulté = précision exigée (pas de FACILE :
+// rayon 50 km = trivial en mode street). titreWiki = titre frwiki exact (désambiguïsé).
+const SPOTS = [
+	// — Guadeloupe (971) —
+	{ region: 'GUADELOUPE', commune: 'Pointe-à-Pitre', titreWiki: 'Pointe-à-Pitre', difficulte: 'MOYEN', indice1: 'Île papillon, aile droite', indice2: 'Port de commerce principal de l’archipel' },
+	{ region: 'GUADELOUPE', commune: 'Les Abymes', titreWiki: 'Les Abymes', difficulte: 'MOYEN', indice1: 'Île papillon, aile droite', indice2: 'Commune la plus peuplée de l’archipel' },
+	{ region: 'GUADELOUPE', commune: 'Le Gosier', titreWiki: 'Le Gosier', difficulte: 'DIFFICILE', indice1: 'Île papillon, aile droite', indice2: 'Station balnéaire au sud de la Grande-Terre' },
+	{ region: 'GUADELOUPE', commune: 'Sainte-Anne', titreWiki: 'Sainte-Anne (Guadeloupe)', difficulte: 'DIFFICILE', indice1: 'Île papillon, aile droite', indice2: 'Plages au sud de la Grande-Terre' },
+	{ region: 'GUADELOUPE', commune: 'Basse-Terre', titreWiki: 'Basse-Terre', difficulte: 'EXPERT', indice1: 'Île papillon, aile gauche', indice2: 'Chef-lieu au pied du volcan' },
+	// — Martinique (972) —
+	{ region: 'MARTINIQUE', commune: 'Fort-de-France', titreWiki: 'Fort-de-France', difficulte: 'MOYEN', indice1: 'Île aux fleurs', indice2: 'Chef-lieu, sur une grande baie' },
+	{ region: 'MARTINIQUE', commune: 'Le Lamentin', titreWiki: 'Le Lamentin', difficulte: 'MOYEN', indice1: 'Île aux fleurs', indice2: 'Banlieue du chef-lieu, zone aéroportuaire' },
+	{ region: 'MARTINIQUE', commune: 'Saint-Pierre', titreWiki: 'Saint-Pierre (Martinique)', difficulte: 'DIFFICILE', indice1: 'Île aux fleurs, côte caraïbe nord', indice2: 'Ville détruite par une éruption en 1902' },
+	{ region: 'MARTINIQUE', commune: 'Le François', titreWiki: 'Le François', difficulte: 'DIFFICILE', indice1: 'Île aux fleurs, côte atlantique', indice2: 'Bourg face aux îlets du sud' },
+	{ region: 'MARTINIQUE', commune: 'Sainte-Marie', titreWiki: 'Sainte-Marie (Martinique)', difficulte: 'EXPERT', indice1: 'Île aux fleurs, côte atlantique nord', indice2: 'Musée de la banane et rhum' },
+	// — Guyane (973) —
+	{ region: 'GUYANE', commune: 'Cayenne', titreWiki: 'Cayenne', difficulte: 'MOYEN', indice1: 'Terre de forêt amazonienne', indice2: 'Chef-lieu, sur l’île du même nom' },
+	{ region: 'GUYANE', commune: 'Kourou', titreWiki: 'Kourou', difficulte: 'DIFFICILE', indice1: 'Terre de forêt amazonienne', indice2: 'Ville des fusées' },
+	{ region: 'GUYANE', commune: 'Saint-Laurent-du-Maroni', titreWiki: 'Saint-Laurent-du-Maroni', difficulte: 'DIFFICILE', indice1: 'Terre de forêt amazonienne, à l’ouest', indice2: 'Ville du fleuve Maroni, ancien bagne' },
+	{ region: 'GUYANE', commune: 'Matoury', titreWiki: 'Matoury', difficulte: 'EXPERT', indice1: 'Terre de forêt amazonienne', indice2: 'Banlieue sud du chef-lieu' },
+	{ region: 'GUYANE', commune: 'Remire-Montjoly', titreWiki: 'Remire-Montjoly', difficulte: 'EXPERT', indice1: 'Terre de forêt amazonienne', indice2: 'Plages à l’est du chef-lieu' },
+	// — La Réunion (974) —
+	{ region: 'REUNION', commune: 'Saint-Denis', titreWiki: 'Saint-Denis (La Réunion)', difficulte: 'MOYEN', indice1: 'Île intense de l’océan Indien', indice2: 'Chef-lieu, au nord' },
+	{ region: 'REUNION', commune: 'Saint-Pierre', titreWiki: 'Saint-Pierre (La Réunion)', difficulte: 'MOYEN', indice1: 'Île intense de l’océan Indien', indice2: 'Capitale du sud, front de mer animé' },
+	{ region: 'REUNION', commune: 'Le Tampon', titreWiki: 'Le Tampon', difficulte: 'DIFFICILE', indice1: 'Île intense de l’océan Indien', indice2: 'Commune des hauts, dans le sud' },
+	{ region: 'REUNION', commune: 'Saint-Paul', titreWiki: 'Saint-Paul (La Réunion)', difficulte: 'DIFFICILE', indice1: 'Île intense de l’océan Indien', indice2: 'Côte ouest, premier site de peuplement' },
+	{ region: 'REUNION', commune: 'Saint-André', titreWiki: 'Saint-André (La Réunion)', difficulte: 'EXPERT', indice1: 'Île intense de l’océan Indien', indice2: 'Côte est, pays de la canne' }
+];
+
+const PREFIXE_REGION = { GUADELOUPE: '971', MARTINIQUE: '972', GUYANE: '973', REUNION: '974' };
+
+async function centreCommune(spot) {
+	const data = await getJSON(
+		`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(spot.commune)}&codeDepartement=${PREFIXE_REGION[spot.region]}&fields=centre,surface,code,mairie&limit=8`
+	);
+	const c = data[0];
+	if (!c) throw new Error(`commune introuvable sur geo.api.gouv.fr`);
+	// La mairie est un meilleur ancrage que le centroïde (les communes DOM
+	// englobent des reliefs : le centroïde tombe souvent hors du centre-ville).
+	const p = c.mairie?.coordinates ? c.mairie.coordinates : c.centre.coordinates;
+	return { lat: p[1], lon: p[0], surfaceHa: c.surface };
+}
+
+async function chercherImage(lat, lon) {
+	const champs = 'id,is_pano,captured_at,computed_geometry,geometry,creator,quality_score';
+	const note = (img) => (img.quality_score ?? 0.5) * 1e13 + (img.captured_at ?? 0);
+	// 1) bbox autour de l'ancre (< 0,01° de côté, contrainte API), pano d'abord
+	const demi = 0.0045;
+	const bbox = `${lon - demi},${lat - demi},${lon + demi},${lat + demi}`;
+	for (const pano of ['&is_pano=true', '']) {
+		const data = await getJSON(
+			`https://graph.mapillary.com/images?access_token=${encodeURIComponent(TOKEN)}&fields=${champs}&bbox=${bbox}&limit=200${pano}`
+		);
+		if (data.data?.length) {
+			const triees = [...data.data].sort((a, b) => note(b) - note(a));
+			return { image: triees[0], total: data.data.length };
+		}
+	}
+	// 2) grille de recherches par rayon (50 m) autour de l'ancre
+	const parId = new Map();
+	for (const dLat of [-0.004, 0, 0.004]) {
+		for (const dLon of [-0.004, 0, 0.004]) {
+			try {
+				const data = await getJSON(
+					`https://graph.mapillary.com/images?access_token=${encodeURIComponent(TOKEN)}&fields=${champs}&lat=${lat + dLat}&lng=${lon + dLon}&radius=50&limit=10`
+				);
+				for (const img of data.data ?? []) parId.set(img.id, img);
+			} catch {
+				/* point sans couverture */
+			}
+			await sleep(120);
+		}
+	}
+	if (!parId.size) return null;
+	const triees = [...parId.values()].sort((a, b) => note(b) - note(a));
+	return { image: triees[0], total: parId.size };
+}
+
+async function nomDeRue(lat, lon) {
+	try {
+		const data = await getJSON(`https://api-adresse.data.gouv.fr/reverse/?lon=${lon}&lat=${lat}&type=street`);
+		const f = data.features?.[0]?.properties;
+		return f?.name ?? f?.street ?? null;
+	} catch {
+		return null;
+	}
+}
+
+// QIDs des communes via sitelinks frwiki (un seul appel batch)
+async function qidsCommunes() {
+	const titres = SPOTS.map((s) => s.titreWiki);
+	const data = await getJSON(
+		`https://www.wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=${encodeURIComponent(titres.join('|'))}&props=sitelinks&sitefilter=frwiki&format=json&redirects=yes`
+	);
+	const parTitre = {};
+	for (const [qid, e] of Object.entries(data.entities ?? {})) {
+		if (e.sitelinks?.frwiki?.title) parTitre[e.sitelinks.frwiki.title] = qid;
+	}
+	const redirige = {};
+	for (const r of data.redirects ?? []) redirige[r.from] = r.to;
+	const res = {};
+	for (const s of SPOTS) {
+		const t = redirige[s.titreWiki] ?? s.titreWiki;
+		res[s.titreWiki] = parTitre[t] ?? null;
+	}
+	return res;
+}
+
+const qids = await qidsCommunes();
+const lieux = [];
+let n = 0;
+for (const spot of SPOTS) {
+	n++;
+	try {
+		const centre = await centreCommune(spot);
+		await sleep(150);
+		const trouve = await chercherImage(centre.lat, centre.lon);
+		if (!trouve) {
+			console.log(`VIDE ${spot.commune} (${spot.region}) — aucune image dans la bbox`);
+			continue;
+		}
+		const img = trouve.image;
+		const geo = img.computed_geometry ?? img.geometry;
+		const coords = { lat: geo.coordinates[1], lon: geo.coordinates[0] };
+		await sleep(150);
+		const rue = await nomDeRue(coords.lat, coords.lon);
+		const qid = qids[spot.titreWiki];
+		lieux.push({
+			id: `st-${String(n).padStart(2, '0')}`,
+			nom: rue ? `${rue}, ${spot.commune}` : `Centre de ${spot.commune}`,
+			nom_creole: `Lari ${spot.commune}`,
+			region: spot.region,
+			commune: spot.commune,
+			coordonnees: coords,
+			difficulte: spot.difficulte,
+			mapillary_id: img.id,
+			credit: {
+				username: img.creator?.username ?? 'contributeur Mapillary',
+				captured_at: new Date(img.captured_at).toISOString().slice(0, 10)
+			},
+			is_pano: !!img.is_pano,
+			wikidata_id: qid,
+			indices: [
+				{ niveau: 1, texte: spot.indice1 },
+				{ niveau: 2, texte: spot.indice2 }
+			],
+			aire_commune_km2: Math.round(centre.surfaceHa) / 100 // geo.api : hectares → km²
+		});
+		console.log(
+			`OK   ${spot.commune.padEnd(24)} img ${img.id} pano=${img.is_pano ? 'oui' : 'NON'} q=${img.quality_score?.toFixed(2) ?? '—'} pool=${trouve.total} qid=${qid ?? 'ABSENT'} rue=${rue ?? '—'}`
+		);
+	} catch (e) {
+		console.log(`ERREUR ${spot.commune} — ${e.message}`);
+	}
+	await sleep(150);
+}
+
+writeFileSync(join(ROOT, 'src/lib/server/data/street.json'), JSON.stringify(lieux, null, 2) + '\n');
+console.log(`\n${lieux.length} lieux écrits dans src/lib/server/data/street.json`);

app/scripts/validate-lieux.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+/**
+ * Validation du corpus JWE (audit OKI : C1, C2, C3, C4c).
+ * « Fetch, pas recall » : chaque QID, coordonnée et URL photo est vérifié
+ * par une requête réelle aux API Wikidata / fr.wikipedia / Wikimedia Commons.
+ *
+ * Usage : node scripts/validate-lieux.mjs [--photos]
+ *   --photos  vérifie aussi les 40 URLs photo (HTTP 200 + licence) — lent.
+ * Exit code 1 si au moins un FAIL.
+ */
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+const LIEUX = JSON.parse(readFileSync(join(ROOT, 'src/lib/server/data/lieux.json'), 'utf8'));
+const UA = { 'User-Agent': 'JWE-OKI/2.0 (validation corpus; contact: o-k-i.net)' };
+const WITH_PHOTOS = process.argv.includes('--photos');
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const getJSON = async (url) => {
+	const res = await fetch(url, { headers: UA });
+	if (!res.ok) throw new Error(`HTTP ${res.status} sur ${url}`);
+	return res.json();
+};
+
+let fails = 0;
+const fail = (id, msg) => {
+	fails++;
+	console.log(`FAIL ${id} — ${msg}`);
+};
+
+// --- Schéma (tous les lieux) ------------------------------------------------
+const CHAMPS = ['id', 'nom', 'nom_creole', 'region', 'commune', 'coordonnees', 'categorie', 'difficulte', 'wikidata_id', 'photo', 'indices'];
+const REGIONS = ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'];
+const ids = new Set();
+for (const l of LIEUX) {
+	for (const c of CHAMPS) if (!(c in l)) fail(l.nom, `champ manquant: ${c}`);
+	if (ids.has(l.id)) fail(l.nom, `id dupliqué ${l.id}`);
+	ids.add(l.id);
+	if (!REGIONS.includes(l.region)) fail(l.nom, `région invalide: ${l.region}`);
+	if (!['MONUMENT', 'LIEU'].includes(l.categorie)) fail(l.nom, `catégorie invalide`);
+	if (!['FACILE', 'MOYEN', 'DIFFICILE', 'EXPERT'].includes(l.difficulte)) fail(l.nom, `difficulté invalide`);
+	if (l.aire_commune_km2 !== undefined && !(l.aire_commune_km2 > 0)) fail(l.nom, `aire_commune_km2 invalide`);
+}
+console.log(`Schéma : ${LIEUX.length} lieux contrôlés.`);
+
+// --- C1 + C3 : QIDs et coordonnées (un appel batch) --------------------------
+const avecQid = LIEUX.filter((l) => l.wikidata_id);
+const qids = avecQid.map((l) => l.wikidata_id).join('|');
+const data = await getJSON(
+	`https://www.wikidata.org/w/api.php?action=wbgetentities&ids=${qids}&props=sitelinks|labels|claims&languages=fr&format=json&sitefilter=frwiki`
+);
+const dist = (a, b) => {
+	const R = 6371, dLa = ((b.lat - a.lat) * Math.PI) / 180, dLo = ((b.lon - a.lon) * Math.PI) / 180;
+	const h = Math.sin(dLa / 2) ** 2 + Math.cos((a.lat * Math.PI) / 180) * Math.cos((b.lat * Math.PI) / 180) * Math.sin(dLo / 2) ** 2;
+	return 2 * R * Math.asin(Math.sqrt(h));
+};
+console.log('\n| Lieu | QID | sitelink frwiki | écart coords | PASS/FAIL |');
+console.log('|---|---|---|---|---|');
+for (const l of avecQid) {
+	const e = data.entities[l.wikidata_id];
+	const site = e?.sitelinks?.frwiki?.title;
+	const p625 = e?.claims?.P625?.[0]?.mainsnak?.datavalue?.value;
+	let ok = true;
+	const notes = [];
+	if (!e || e.missing !== undefined) {
+		ok = false;
+		notes.push('entité absente');
+	} else if (!site) {
+		ok = false;
+		notes.push('pas de sitelink frwiki');
+	}
+	if (p625) {
+		const d = dist(l.coordonnees, { lat: p625.latitude, lon: p625.longitude });
+		if (d > 0.5) {
+			ok = false;
+			notes.push(`écart ${d.toFixed(2)} km > 500 m`);
+		}
+	} else notes.push('P625 absent (non bloquant)');
+	if (!ok) fails++;
+	console.log(`| ${l.nom} | ${l.wikidata_id} | ${site ?? '—'} | ${notes.join('; ') || '< 500 m'} | ${ok ? 'PASS' : 'FAIL'} |`);
+	await sleep(100);
+}
+
+// --- C2 : les null sont de vrais null ---------------------------------------
+console.log('\nLieux à wikidata_id null (preuve absence frwiki) :');
+for (const l of LIEUX.filter((x) => !x.wikidata_id)) {
+	const s = await getJSON(
+		`https://fr.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent('"' + l.nom + '"')}&srlimit=3&format=json`
+	);
+	const exact = s.query.search.some(
+		(r) => r.title.toLowerCase() === l.nom.toLowerCase()
+	);
+	if (exact) fail(l.nom, `un article frwiki « ${l.nom} » EXISTE — le null ne teste pas le Cas B`);
+	else console.log(`PASS ${l.nom} — aucun article frwiki exact`);
+	await sleep(400);
+}
+
+// --- C4c : photos (optionnel, lent) ------------------------------------------
+if (WITH_PHOTOS) {
+	console.log('\nPhotos (HTTP + licence) :');
+	for (const l of LIEUX) {
+		try {
+			const res = await fetch(l.photo.url, { method: 'HEAD', headers: UA, redirect: 'follow' });
+			if (!res.ok) fail(l.nom, `photo HTTP ${res.status}`);
+			else console.log(`PASS photo ${l.nom}`);
+		} catch (e) {
+			fail(l.nom, `photo inaccessible: ${e.message}`);
+		}
+		await sleep(300);
+	}
+}
+
+console.log(fails ? `\n${fails} FAIL` : '\nTout est conforme.');
+process.exit(fails ? 1 : 0);

app/scripts/validate-street.mjs

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+/**
+ * Validation du corpus street (« An lari a », mode Mapillary).
+ * « Fetch, pas recall » : chaque mapillary_id est revérifié contre l'API
+ * Mapillary (existence, computed_geometry < 100 m de la vérité curée, crédit
+ * auteur, flag pano) et chaque wikidata_id contre Wikidata (sitelink frwiki).
+ *
+ * Usage : node scripts/validate-street.mjs
+ *   Token lu depuis .env (MAPILLARY_TOKEN ou PUBLIC_MAPILLARY_TOKEN).
+ * Exit code 1 si au moins un FAIL.
+ */
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+const STREET = JSON.parse(readFileSync(join(ROOT, 'src/lib/server/data/street.json'), 'utf8'));
+const UA = { 'User-Agent': 'JWE-OKI/2.0 (validation corpus street; contact: o-k-i.net)' };
+
+function chargeEnv() {
+	try {
+		for (const ligne of readFileSync(join(ROOT, '.env'), 'utf8').split('\n')) {
+			const m = ligne.match(/^\s*([A-Z_]+)\s*=\s*(.+?)\s*$/);
+			if (m && !process.env[m[1]]) process.env[m[1]] = m[2];
+		}
+	} catch {
+		/* pas de .env */
+	}
+}
+chargeEnv();
+const TOKEN = process.env.MAPILLARY_TOKEN || process.env.PUBLIC_MAPILLARY_TOKEN;
+
+const getJSON = async (url, headers = UA, essais = 3) => {
+	for (let i = 0; ; i++) {
+		const res = await fetch(url, { headers });
+		if (res.ok) return res.json();
+		// 429 (rate limit Wikidata/Mapillary) ou 5xx : backoff puis retry
+		if ((res.status === 429 || res.status >= 500) && i < essais - 1) {
+			await new Promise((r) => setTimeout(r, 2000 * (i + 1)));
+			continue;
+		}
+		throw new Error(`HTTP ${res.status} sur ${url}`);
+	}
+};
+
+let fails = 0;
+const fail = (id, msg) => {
+	fails++;
+	console.log(`FAIL ${id} — ${msg}`);
+};
+
+const distKm = (a, b) => {
+	const R = 6371,
+		dLa = ((b.lat - a.lat) * Math.PI) / 180,
+		dLo = ((b.lon - a.lon) * Math.PI) / 180;
+	const h =
+		Math.sin(dLa / 2) ** 2 +
+		Math.cos((a.lat * Math.PI) / 180) * Math.cos((b.lat * Math.PI) / 180) * Math.sin(dLo / 2) ** 2;
+	return 2 * R * Math.asin(Math.sqrt(h));
+};
+
+// --- Schéma ------------------------------------------------------------------
+const CHAMPS = ['id', 'nom', 'nom_creole', 'region', 'commune', 'coordonnees', 'difficulte', 'mapillary_id', 'credit', 'wikidata_id', 'indices'];
+const REGIONS = ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'];
+const ids = new Set();
+const mlyIds = new Set();
+for (const l of STREET) {
+	for (const c of CHAMPS) if (!(c in l)) fail(l.nom, `champ manquant: ${c}`);
+	if (ids.has(l.id)) fail(l.nom, `id dupliqué ${l.id}`);
+	ids.add(l.id);
+	if (mlyIds.has(l.mapillary_id)) fail(l.nom, `mapillary_id dupliqué ${l.mapillary_id}`);
+	mlyIds.add(l.mapillary_id);
+	if (!REGIONS.includes(l.region)) fail(l.nom, `région invalide: ${l.region}`);
+	if (!['FACILE', 'MOYEN', 'DIFFICILE', 'EXPERT'].includes(l.difficulte)) fail(l.nom, `difficulté invalide`);
+	if (!l.wikidata_id) fail(l.nom, `wikidata_id null (le mode street documente la commune)`);
+	if (!(l.aire_commune_km2 > 0)) fail(l.nom, `aire_commune_km2 invalide`);
+}
+const parRegion = Object.groupBy(STREET, (l) => l.region);
+for (const r of REGIONS) {
+	const n = parRegion[r]?.length ?? 0;
+	if (n < 3) fail(r, `seulement ${n} lieux (< 3)`);
+}
+console.log(`Schéma : ${STREET.length} lieux contrôlés (${REGIONS.map((r) => `${r}=${parRegion[r]?.length ?? 0}`).join(', ')}).`);
+
+if (!TOKEN) {
+	console.log('Token Mapillary absent — vérifications API sautées (schéma seul).');
+} else {
+	// --- Mapillary : existence, géométrie, crédit, pano -------------------------
+	console.log('\n| Lieu | mapillary_id | écart coords | crédit | pano | PASS/FAIL |');
+	console.log('|---|---|---|---|---|---|');
+	for (const l of STREET) {
+		try {
+			const img = await getJSON(
+				`https://graph.mapillary.com/${l.mapillary_id}?access_token=${encodeURIComponent(TOKEN)}&fields=id,is_pano,captured_at,computed_geometry,creator`
+			);
+			const geo = img.computed_geometry;
+			const d = distKm(l.coordonnees, { lat: geo.coordinates[1], lon: geo.coordinates[0] });
+			const notes = [];
+			let ok = true;
+			if (d > 0.1) {
+				ok = false;
+				notes.push(`écart ${(d * 1000).toFixed(0)} m > 100 m`);
+			}
+			if ((img.creator?.username ?? null) !== l.credit.username) {
+				ok = false;
+				notes.push(`crédit « ${l.credit.username} » ≠ « ${img.creator?.username} »`);
+			}
+			if (!!img.is_pano !== !!l.is_pano) notes.push(`pano API=${img.is_pano} corpus=${l.is_pano} (non bloquant)`);
+			if (!ok) fail(l.nom, notes.join(' ; '));
+			console.log(`| ${l.nom} | ${l.mapillary_id} | ${(d * 1000).toFixed(0)} m | ${l.credit.username} | ${img.is_pano ? 'oui' : 'non'} | ${ok ? 'PASS' : 'FAIL'} |`);
+		} catch (e) {
+			fail(l.nom, `Mapillary : ${e.message}`);
+		}
+		await new Promise((r) => setTimeout(r, 120));
+	}
+}
+
+// --- Wikidata : sitelink frwiki pour chaque commune ---------------------------
+const qids = STREET.map((l) => l.wikidata_id).filter(Boolean).join('|');
+const data = await getJSON(
+	`https://www.wikidata.org/w/api.php?action=wbgetentities&ids=${qids}&props=sitelinks&sitefilter=frwiki&format=json`
+);
+console.log('\n| Lieu | QID commune | sitelink frwiki | PASS/FAIL |');
+console.log('|---|---|---|---|');
+for (const l of STREET) {
+	const site = data.entities?.[l.wikidata_id]?.sitelinks?.frwiki?.title;
+	if (!site) fail(l.nom, `${l.wikidata_id} sans sitelink frwiki`);
+	console.log(`| ${l.nom} | ${l.wikidata_id} | ${site ?? 'ABSENT'} | ${site ? 'PASS' : 'FAIL'} |`);
+}
+
+console.log(fails ? `\n${fails} FAIL.` : '\nTout est conforme.');
+process.exit(fails ? 1 : 0);

app/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

app/src/app.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="fr">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<meta name="theme-color" content="#0D0D0D" />
+		<script>
+			// Initialisation immédiate du thème et du gate JS sans FOUC
+			try {
+				document.documentElement.classList.add('js');
+				const theme = localStorage.getItem('jwe_theme');
+				if (theme === 'light') {
+					document.documentElement.classList.add('light-theme');
+				}
+			} catch (e) {}
+		</script>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap"
+			rel="stylesheet"
+		/>
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

app/src/hooks.server.ts

@@ -0,0 +1,43 @@
+import type { Handle } from '@sveltejs/kit';
+
+/**
+ * CSP — domaines justifiés :
+ * - tiles.openfreemap.org : style MapLibre (tuiles vectorielles + raster
+ *   natural_earth, sprites, glyphs — cf. src/lib/map/style-oki.json) ;
+ * - upload.wikimedia.org : vignettes des fiches Wikipédia (wiki.thumbnail,
+ *   affichée en <img>) et photos Commons (service worker, Special:FilePath) ;
+ * - commons.wikimedia.org : variantes Special:FilePath (service worker) ;
+ * - graph.mapillary.com : API Mapillary (mapillary-js, seul domaine en dur
+ *   dans la lib) ; tiles.mapillary.com : tuiles vectorielles de couverture ;
+ *   images.mapillary.com : CDN des photos 360° (fetch ArrayBuffer → blob:) ;
+ * - www.wikidata.org / fr.wikipedia.org : appelées côté serveur uniquement
+ *   (proxy /api/wiki), listées ici par précaution si un appel direct apparaît ;
+ * - 'unsafe-inline' sur script-src : script inline de app.html (gate motion)
+ *   + payload d'hydratation injecté par SvelteKit adapter-node ;
+ * - worker-src blob: : workers WebGL de MapLibre chargés en blob.
+ */
+const CSP = [
+	"default-src 'self'",
+	"script-src 'self' 'unsafe-inline'",
+	"style-src 'self' 'unsafe-inline'",
+	"img-src 'self' data: blob: https://upload.wikimedia.org https://commons.wikimedia.org https://tiles.openfreemap.org",
+	"font-src 'self' data: https://tiles.openfreemap.org",
+	"connect-src 'self' https://tiles.openfreemap.org https://graph.mapillary.com https://tiles.mapillary.com https://images.mapillary.com https://www.wikidata.org https://fr.wikipedia.org https://upload.wikimedia.org https://commons.wikimedia.org",
+	"worker-src 'self' blob:",
+	"frame-ancestors 'none'",
+	"base-uri 'self'",
+	"form-action 'self'",
+	"object-src 'none'"
+].join('; ');
+
+// Le jeu n'utilise ni caméra, ni micro, ni géolocalisation (la position est
+// devinée au clic sur la carte) — Permissions-Policy les coupe explicitement.
+export const handle: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event);
+	response.headers.set('Content-Security-Policy', CSP);
+	response.headers.set('X-Content-Type-Options', 'nosniff');
+	response.headers.set('X-Frame-Options', 'DENY');
+	response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+	response.headers.set('Permissions-Policy', 'geolocation=(), microphone=(), camera=()');
+	return response;
+};

app/src/lib/components/CarteRegions.svelte

@@ -0,0 +1,433 @@
+<script lang="ts" module>
+	import geoJson from '$lib/map/regions-geo.json';
+	import type { Region } from '$lib/types';
+
+	/** Point à afficher sur la carte (bilan du défi). */
+	export interface MarqueurCarte {
+		lat: number;
+		lon: number;
+		type: 'reel' | 'guess';
+		label?: string;
+		/** Numéro de manche : relie le guess au réel de même paire. */
+		paire?: number;
+	}
+
+	export type SelectionCarte = Region | 'TOUTES' | null;
+
+	type Anneau = [number, number][];
+	interface RegionGeo {
+		nom: string;
+		creole: string;
+		polygons: Anneau[];
+	}
+	const GEO = geoJson as unknown as Record<Region, RegionGeo>;
+
+	/**
+	 * Carte SVG statique des 4 régions, écrite from scratch pour JWE (ADR-002) :
+	 * projection équirectangulaire simple par région, chaque région dans son
+	 * propre inset (les 4 régions sont à ~12 000 km d'écart — la disposition
+	 * 2×2 est un choix cartographique assumé, sans prétention d'échelle commune).
+	 * Tout est précalculé au chargement du module : rendu SSR sans aucun JS client.
+	 */
+
+	const VUE_L = 600; // largeur du viewBox
+	const CELLULE_L = VUE_L / 2; // 2 colonnes
+	const CELLULE_H = 310; // 2 lignes
+	const MARGE = 14; // respiration autour des formes dans un inset
+	const HAUTEUR_NOM = 26; // bandeau du nom de région en bas d'inset
+
+	/** Ordre des insets : Antilles en haut, Guyane et Réunion en bas. */
+	const ORDRE: Region[] = ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'];
+
+	interface Inset {
+		region: Region;
+		nom: string;
+		creole: string;
+		colonne: number;
+		rang: number;
+		/** Chemins SVG (attributs `d`) des communes, déjà projetés dans le viewBox. */
+		chemins: string[];
+		/** Position du libellé de région. */
+		nomX: number;
+		nomY: number;
+		/** Bornes lon/lat brutes — sert à affecter un marqueur à son inset. */
+		bornes: [number, number, number, number];
+		/** Projection lon/lat → coordonnées du viewBox. */
+		projeter: (lon: number, lat: number) => [number, number];
+	}
+
+	const r1 = (n: number) => Math.round(n * 10) / 10;
+
+	function construireInsets(): Inset[] {
+		return ORDRE.map((region, i) => {
+			const { nom, creole, polygons } = GEO[region];
+			let minLon = Infinity;
+			let maxLon = -Infinity;
+			let minLat = Infinity;
+			let maxLat = -Infinity;
+			for (const poly of polygons) {
+				for (const [lon, lat] of poly) {
+					if (lon < minLon) minLon = lon;
+					if (lon > maxLon) maxLon = lon;
+					if (lat < minLat) minLat = lat;
+					if (lat > maxLat) maxLat = lat;
+				}
+			}
+			// Équirectangulaire : un degré de longitude vaut cos(lat) × un degré de latitude.
+			const cos0 = Math.cos(((minLat + maxLat) / 2) * (Math.PI / 180));
+			const largeurGeo = (maxLon - minLon) * cos0;
+			const hauteurGeo = maxLat - minLat;
+			const colonne = i % 2;
+			const rang = Math.floor(i / 2);
+			const dispoL = CELLULE_L - 2 * MARGE;
+			const dispoH = CELLULE_H - 2 * MARGE - HAUTEUR_NOM;
+			const echelle = Math.min(dispoL / largeurGeo, dispoH / hauteurGeo);
+			// Centre les formes dans l'espace disponible de l'inset.
+			const origX = colonne * CELLULE_L + MARGE + (dispoL - largeurGeo * echelle) / 2;
+			const origY = rang * CELLULE_H + MARGE + (dispoH - hauteurGeo * echelle) / 2;
+			const projeter = (lon: number, lat: number): [number, number] => [
+				r1(origX + (lon - minLon) * cos0 * echelle),
+				r1(origY + (maxLat - lat) * echelle)
+			];
+			const chemins = polygons.map(
+				(poly) =>
+					'M' + poly.map(([lon, lat]) => projeter(lon, lat).join(',')).join('L') + 'Z'
+			);
+			return {
+				region,
+				nom,
+				creole,
+				colonne,
+				rang,
+				chemins,
+				nomX: colonne * CELLULE_L + CELLULE_L / 2,
+				nomY: (rang + 1) * CELLULE_H - 7,
+				bornes: [minLon, minLat, maxLon, maxLat],
+				projeter
+			};
+		});
+	}
+
+	const INSETS = construireInsets();
+	const VUE_H = CELLULE_H * 2;
+
+	/** Projette un point dans l'inset de sa région ; null si hors de toute région (omis). */
+	function projeterMarqueur(lon: number, lat: number): [number, number] | null {
+		for (const ins of INSETS) {
+			const [minLon, minLat, maxLon, maxLat] = ins.bornes;
+			if (lon >= minLon && lon <= maxLon && lat >= minLat && lat <= maxLat) {
+				return ins.projeter(lon, lat);
+			}
+		}
+		return null;
+	}
+</script>
+
+<script lang="ts">
+	import { t } from '$lib/i18n/store.svelte';
+	import { reveal } from '$lib/motion/reveal';
+	import { syncopatedDelay } from '$lib/motion/tokens';
+
+	interface Props {
+		/** Région sélectionnée (liaison bidirectionnelle) — ignorée si `selectionnable` est faux. */
+		selection?: SelectionCarte;
+		/** Vrai (défaut) : chaque région est un vrai <button> ; faux : carte de récap statique. */
+		selectionnable?: boolean;
+		marqueurs?: MarqueurCarte[];
+		attribution?: string;
+		/**
+		 * Base d'index de la cascade syncopée d'entrée des 4 insets (accueil :
+		 * 5, après les 5 cartes de mode). null (défaut) = pas de cascade.
+		 */
+		cascadeBase?: number | null;
+	}
+
+	let {
+		selection = $bindable<SelectionCarte>(null),
+		selectionnable = true,
+		marqueurs = [],
+		attribution = '© contributeurs OpenStreetMap / données publiques',
+		cascadeBase = null
+	}: Props = $props();
+
+	let survol = $state<Region | null>(null);
+
+	interface MarqueurProjete extends MarqueurCarte {
+		x: number;
+		y: number;
+		cle: string;
+	}
+
+	// Points hors de tout inset : omis silencieusement (consigne ADR-002).
+	const marqueursProjetes = $derived(
+		marqueurs.flatMap((m, i): MarqueurProjete[] => {
+			const pt = projeterMarqueur(m.lon, m.lat);
+			return pt ? [{ ...m, x: pt[0], y: pt[1], cle: `${i}-${m.type}` }] : [];
+		})
+	);
+
+	// Ligne guess → réel pour chaque paire complète (même numéro de manche).
+	const lignes = $derived.by(() => {
+		const paires = new Map<number, Partial<Record<'guess' | 'reel', [number, number]>>>();
+		for (const m of marqueursProjetes) {
+			if (m.paire == null) continue;
+			const entree = paires.get(m.paire) ?? {};
+			entree[m.type] = [m.x, m.y];
+			paires.set(m.paire, entree);
+		}
+		const out: { paire: number; x1: number; y1: number; x2: number; y2: number }[] = [];
+		for (const [paire, e] of paires) {
+			if (e.guess && e.reel) {
+				out.push({ paire, x1: e.guess[0], y1: e.guess[1], x2: e.reel[0], y2: e.reel[1] });
+			}
+		}
+		return out;
+	});
+</script>
+
+<figure class="carte-regions">
+	<div class="cadre">
+		<svg
+			viewBox="0 0 {VUE_L} {VUE_H}"
+			role={selectionnable ? undefined : 'img'}
+			aria-hidden={selectionnable ? 'true' : undefined}
+			aria-label={selectionnable ? undefined : t().carte.carteRegionsLabel}
+		>
+			{#each INSETS as ins, i (ins.region)}
+				<g
+					class="region"
+					class:survolee={selectionnable && survol === ins.region}
+					class:choisie={selectionnable && selection === ins.region}
+					data-reveal={cascadeBase === null ? undefined : ''}
+					style:--d={cascadeBase === null ? undefined : `${syncopatedDelay(cascadeBase + i)}ms`}
+					use:reveal={cascadeBase !== null}
+				>
+					<rect
+						class="fond-cellule"
+						x={ins.colonne * CELLULE_L + 6}
+						y={ins.rang * CELLULE_H + 6}
+						width={CELLULE_L - 12}
+						height={CELLULE_H - 12}
+						rx="12"
+					/>
+					{#each ins.chemins as d (d)}
+						<path {d} />
+					{/each}
+				</g>
+			{/each}
+			{#each lignes as l (l.paire)}
+				<line class="lien-paire" x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} />
+			{/each}
+			{#each marqueursProjetes as m (m.cle)}
+				<g class="marqueur {m.type}">
+					{#if m.label}<title>{m.label}</title>{/if}
+					<circle cx={m.x} cy={m.y} r="8" />
+					{#if m.paire != null}
+						<text x={m.x} y={m.y + 3.5}>{m.paire}</text>
+					{/if}
+				</g>
+			{/each}
+			{#each INSETS as ins (ins.region)}
+				<text
+					class="nom-region"
+					class:choisie={selectionnable && selection === ins.region}
+					x={ins.nomX}
+					y={ins.nomY}>{t().regions[ins.region]}</text
+				>
+			{/each}
+		</svg>
+		{#if selectionnable}
+			<!-- Un vrai <button> par région, calé sur son inset : clavier + lecteur d'écran.
+			     Le nom accessible est bilingue (FR / créole), le libellé visible suit la langue. -->
+			{#each INSETS as ins (ins.region)}
+				<button
+					type="button"
+					class="zone-region"
+					style="left: {ins.colonne * 50}%; top: {ins.rang * 50}%"
+					aria-pressed={selection === ins.region}
+					aria-label="{ins.nom} / {ins.creole}"
+					onclick={() => (selection = ins.region)}
+					onmouseenter={() => (survol = ins.region)}
+					onmouseleave={() => (survol = null)}
+					onfocus={() => (survol = ins.region)}
+					onblur={() => (survol = null)}
+				></button>
+			{/each}
+		{/if}
+	</div>
+	<figcaption class="attribution">{attribution}</figcaption>
+</figure>
+
+<style>
+	.carte-regions {
+		margin: 0;
+		width: 100%;
+	}
+
+	.cadre {
+		position: relative;
+		width: 100%;
+	}
+
+	svg {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+
+	/* — Fonds de cellules des 4 insets régionaux — */
+	.fond-cellule {
+		fill: #1a131c;
+		stroke: #2e2233;
+		stroke-width: 1.5;
+		transition:
+			fill var(--dur-tanbou) var(--ease-ka),
+			stroke var(--dur-tanbou) var(--ease-ka);
+	}
+
+	:global(html.light-theme) .fond-cellule {
+		fill: #f4ead4;
+		stroke: #ded0b8;
+	}
+
+	/* — Régions : Formes territoriales nettes et contrastées — */
+	.region path {
+		fill: #22382d;
+		stroke: #00d66c;
+		stroke-width: 1.2;
+		stroke-linejoin: round;
+		transition:
+			fill var(--dur-tanbou) var(--ease-ka),
+			stroke var(--dur-tanbou) var(--ease-ka);
+	}
+
+	:global(html.light-theme) .region path {
+		fill: #d3e8dc;
+		stroke: #006b3d;
+		stroke-width: 1.2;
+	}
+
+	/* Survol */
+	.region.survolee .fond-cellule {
+		fill: #261a2b;
+		stroke: var(--or-oki);
+		stroke-width: 2;
+	}
+
+	:global(html.light-theme) .region.survolee .fond-cellule {
+		fill: #ebdcbD;
+		stroke: var(--or-oki);
+	}
+
+	.region.survolee path {
+		fill: #2f4d3e;
+		stroke: var(--or-oki);
+		stroke-width: 1.6;
+	}
+
+	:global(html.light-theme) .region.survolee path {
+		fill: #c3dfcd;
+		stroke: var(--or-oki);
+	}
+
+	/* Sélection */
+	.region.choisie .fond-cellule {
+		fill: rgba(253, 184, 19, 0.12);
+		stroke: var(--or-oki);
+		stroke-width: 2.5;
+	}
+
+	:global(html.light-theme) .region.choisie .fond-cellule {
+		fill: #fff2d1;
+		stroke: var(--or-oki);
+		stroke-width: 2.5;
+	}
+
+	.region.choisie path {
+		fill: #4b3a13;
+		stroke: var(--or-oki);
+		stroke-width: 1.8;
+	}
+
+	:global(html.light-theme) .region.choisie path {
+		fill: #fde2a2;
+		stroke: var(--or-oki);
+	}
+
+	.nom-region {
+		fill: var(--blanc-creme);
+		font-size: 15px;
+		font-weight: 800;
+		font-family: var(--font-display);
+		text-anchor: middle;
+		letter-spacing: 0.03em;
+		transition: fill var(--dur-tanbou) var(--ease-ka);
+		pointer-events: none;
+	}
+
+	:global(html.light-theme) .nom-region {
+		fill: #0d0d0d;
+	}
+
+	.nom-region.choisie {
+		fill: var(--or-oki);
+	}
+
+	:global(html.light-theme) .nom-region.choisie {
+		fill: var(--or-oki);
+	}
+
+	/* — Marqueurs du récap (guess = rouge OKI, réel = vert OKI) — */
+	.lien-paire {
+		stroke: var(--muted);
+		stroke-width: 2;
+		stroke-dasharray: 6 4;
+		fill: none;
+	}
+
+	.marqueur circle {
+		stroke: var(--noir-profond);
+		stroke-width: 2;
+	}
+
+	.marqueur.guess circle {
+		fill: var(--rouge-oki);
+	}
+
+	.marqueur.reel circle {
+		fill: var(--vert-oki);
+	}
+
+	.marqueur text {
+		fill: #fff;
+		font-size: 10px;
+		font-weight: 800;
+		font-family: var(--font-display);
+		text-anchor: middle;
+		pointer-events: none;
+	}
+
+	/* Boutons transparents calés sur les insets (2×2) */
+	.zone-region {
+		position: absolute;
+		width: 50%;
+		height: 50%;
+		padding: 0;
+		border: none;
+		background: transparent;
+		border-radius: var(--radius-md);
+		cursor: pointer;
+	}
+
+	.zone-region:focus-visible {
+		outline: 3px solid var(--oki-bleu);
+		outline-offset: -3px;
+	}
+
+	.attribution {
+		margin: 0.3rem 0 0;
+		font-size: 0.72rem;
+		color: var(--oki-encre-doux);
+		text-align: right;
+	}
+</style>

app/src/lib/components/CommandBar.svelte

@@ -0,0 +1,465 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { t, setLang, getLang } from '$lib/i18n/store.svelte';
+
+	interface Props {
+		ouvert: boolean;
+		onfermer: () => void;
+		onouvrirStats?: () => void;
+	}
+
+	let { ouvert, onfermer, onouvrirStats }: Props = $props();
+
+	let requete = $state('');
+	let indexSelection = $state(0);
+	let champInput = $state<HTMLInputElement | null>(null);
+
+	interface ActionItem {
+		id: string;
+		categorie: string;
+		titre: string;
+		description: string;
+		badge?: string;
+		executer: () => void;
+	}
+
+	const actions = $derived.by<ActionItem[]>(() => {
+		const items: ActionItem[] = [
+			// Modes de jeu
+			{
+				id: 'mode-monument',
+				categorie: t().commandBar.catModes,
+				titre: `🏛️ ${t().modes.monument}`,
+				description: t().modes.monumentDesc,
+				executer: () => {
+					goto('/jeu/monument');
+					onfermer();
+				}
+			},
+			{
+				id: 'mode-lieu',
+				categorie: t().commandBar.catModes,
+				titre: `📍 ${t().modes.lieu}`,
+				description: t().modes.lieuDesc,
+				executer: () => {
+					goto('/jeu/lieu');
+					onfermer();
+				}
+			},
+			{
+				id: 'mode-defi',
+				categorie: t().commandBar.catModes,
+				titre: `⛰️ ${t().modes.defi}`,
+				description: t().modes.defiDesc,
+				executer: () => {
+					goto('/jeu/defi');
+					onfermer();
+				}
+			},
+			{
+				id: 'mode-street',
+				categorie: t().commandBar.catModes,
+				titre: `🛣️ ${t().modes.street}`,
+				description: t().modes.streetDesc,
+				executer: () => {
+					goto('/jeu/street');
+					onfermer();
+				}
+			},
+			{
+				id: 'mode-explorer',
+				categorie: t().commandBar.catModes,
+				titre: `🗺️ ${t().modes.explorer}`,
+				description: t().modes.explorerDesc,
+				executer: () => {
+					goto('/explorer');
+					onfermer();
+				}
+			},
+
+			// Régions
+			{
+				id: 'region-gwada',
+				categorie: t().commandBar.catRegions,
+				titre: `🇬🇵 ${t().regions.GUADELOUPE}`,
+				description: 'Lancer une partie ciblée en Guadeloupe',
+				executer: () => {
+					goto('/jeu/monument?region=GUADELOUPE');
+					onfermer();
+				}
+			},
+			{
+				id: 'region-madinina',
+				categorie: t().commandBar.catRegions,
+				titre: `🇲🇶 ${t().regions.MARTINIQUE}`,
+				description: 'Lancer une partie ciblée en Martinique',
+				executer: () => {
+					goto('/jeu/monument?region=MARTINIQUE');
+					onfermer();
+				}
+			},
+			{
+				id: 'region-guyane',
+				categorie: t().commandBar.catRegions,
+				titre: `🇬🇫 ${t().regions.GUYANE}`,
+				description: 'Lancer une partie ciblée en Guyane',
+				executer: () => {
+					goto('/jeu/monument?region=GUYANE');
+					onfermer();
+				}
+			},
+			{
+				id: 'region-reunion',
+				categorie: t().commandBar.catRegions,
+				titre: `🇷🇪 ${t().regions.REUNION}`,
+				description: 'Lancer une partie ciblée à La Réunion',
+				executer: () => {
+					goto('/jeu/monument?region=REUNION');
+					onfermer();
+				}
+			},
+
+			// Actions rapides / Système
+			{
+				id: 'act-stats',
+				categorie: t().commandBar.catActions,
+				titre: `📊 ${t().commandBar.mesStats}`,
+				description: 'Consulter l’historique local et les scores',
+				executer: () => {
+					onfermer();
+					onouvrirStats?.();
+				}
+			},
+			{
+				id: 'act-theme',
+				categorie: t().commandBar.catActions,
+				titre: `🌓 ${t().commandBar.basculerTheme}`,
+				description: 'Basculer entre thème sombre et thème clair (WCAG AA)',
+				executer: () => {
+					const isLight = document.documentElement.classList.contains('light-theme');
+					if (isLight) {
+						document.documentElement.classList.remove('light-theme');
+						localStorage.setItem('jwe_theme', 'dark');
+					} else {
+						document.documentElement.classList.add('light-theme');
+						localStorage.setItem('jwe_theme', 'light');
+					}
+					onfermer();
+				}
+			},
+			{
+				id: 'act-lang',
+				categorie: t().commandBar.catActions,
+				titre: `🗣️ ${t().commandBar.basculerLangue}`,
+				description: getLang() === 'fr' ? 'Chanje lang pou Kréyòl' : 'Passer la langue en Français',
+				badge: getLang() === 'fr' ? 'FR → GCF' : 'GCF → FR',
+				executer: () => {
+					setLang(getLang() === 'fr' ? 'gcf' : 'fr');
+					onfermer();
+				}
+			}
+		];
+
+		const q = requete.trim().toLowerCase();
+		if (!q) return items;
+
+		return items.filter(
+			(it) =>
+				it.titre.toLowerCase().includes(q) ||
+				it.description.toLowerCase().includes(q) ||
+				it.categorie.toLowerCase().includes(q)
+		);
+	});
+
+	$effect(() => {
+		if (ouvert) {
+			requete = '';
+			indexSelection = 0;
+			setTimeout(() => {
+				champInput?.focus();
+			}, 50);
+		}
+	});
+
+	function onKeydown(e: KeyboardEvent): void {
+		if (!ouvert) return;
+
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			onfermer();
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			indexSelection = (indexSelection + 1) % Math.max(1, actions.length);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			indexSelection = (indexSelection - 1 + actions.length) % Math.max(1, actions.length);
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			if (actions[indexSelection]) {
+				actions[indexSelection].executer();
+			}
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent): void {
+		if (e.target === e.currentTarget) {
+			onfermer();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#if ouvert}
+	<div
+		class="overlay"
+		onclick={handleBackdropClick}
+		role="presentation"
+	>
+		<div
+			class="command-bar"
+			role="dialog"
+			aria-modal="true"
+			aria-label={t().commandBar.titre}
+		>
+			<div class="champ-recherche">
+				<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icone-loupe" aria-hidden="true">
+					<circle cx="11" cy="11" r="8" />
+					<line x1="21" y1="21" x2="16.65" y2="16.65" />
+				</svg>
+				<input
+					bind:this={champInput}
+					type="text"
+					bind:value={requete}
+					placeholder={t().commandBar.placeholder}
+					aria-autocomplete="list"
+					aria-controls="liste-actions"
+				/>
+				<button type="button" class="touche-esc" onclick={onfermer} aria-label={t().stats.fermer}>
+					ESC
+				</button>
+			</div>
+
+			<div class="liste-actions" id="liste-actions" role="listbox">
+				{#if actions.length === 0}
+					<div class="aucun-resultat">{t().commandBar.aucunResultat} « {requete} »</div>
+				{:else}
+					{#each actions as action, i (action.id)}
+						<button
+							type="button"
+							class="item-action"
+							class:selectionne={i === indexSelection}
+							role="option"
+							aria-selected={i === indexSelection}
+							onmouseenter={() => (indexSelection = i)}
+							onclick={action.executer}
+						>
+							<div class="action-corps">
+								<span class="action-titre">{action.titre}</span>
+								<span class="action-desc">{action.description}</span>
+							</div>
+							{#if action.badge}
+								<span class="action-badge">{action.badge}</span>
+							{:else}
+								<span class="action-cat">{action.categorie}</span>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
+
+			<footer class="bar-footer">
+				<span><kbd>↑</kbd> <kbd>↓</kbd> pour naviguer</span>
+				<span><kbd>↵</kbd> pour exécuter</span>
+				<span><kbd>ESC</kbd> pour quitter</span>
+			</footer>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 120;
+		background: rgba(0, 0, 0, 0.75);
+		backdrop-filter: blur(5px);
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		padding: 3.5rem 1rem 1rem 1rem;
+	}
+
+	.command-bar {
+		width: 100%;
+		max-width: 600px;
+		background: var(--noir-profond);
+		color: var(--blanc-creme);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-md);
+		box-shadow: var(--oki-ombre);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		animation: cb-pop var(--dur-mesure) var(--ease-ka);
+	}
+
+	@keyframes cb-pop {
+		from {
+			opacity: 0;
+			transform: scale(0.96) translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	.champ-recherche {
+		display: flex;
+		align-items: center;
+		gap: 0.8rem;
+		padding: 0.9rem 1.1rem;
+		border-bottom: 1px solid var(--line);
+	}
+
+	.icone-loupe {
+		color: var(--or-oki);
+		flex-shrink: 0;
+	}
+
+	.champ-recherche input {
+		flex: 1;
+		background: transparent;
+		border: none;
+		outline: none;
+		color: var(--blanc-creme);
+		font-size: 1.05rem;
+		font-family: var(--font-body);
+	}
+
+	.champ-recherche input::placeholder {
+		color: var(--muted);
+	}
+
+	.touche-esc {
+		background: var(--card-bg);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		padding: 0.2rem 0.5rem;
+		font-size: 0.75rem;
+		color: var(--muted);
+		cursor: pointer;
+		font-family: inherit;
+	}
+
+	.touche-esc:hover {
+		color: var(--blanc-creme);
+		border-color: var(--or-oki);
+	}
+
+	.liste-actions {
+		max-height: 52dvh;
+		overflow-y: auto;
+		padding: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+	}
+
+	.aucun-resultat {
+		padding: 2rem 1rem;
+		text-align: center;
+		color: var(--muted);
+		font-size: 0.95rem;
+	}
+
+	.item-action {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.8rem;
+		padding: 0.65rem 0.85rem;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: var(--radius-sm);
+		color: var(--blanc-creme);
+		text-align: left;
+		cursor: pointer;
+		width: 100%;
+		transition: background-color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.item-action.selectionne {
+		background: var(--card-bg-hover);
+		border-color: var(--or-oki);
+	}
+
+	.action-corps {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		min-width: 0;
+	}
+
+	.action-titre {
+		font-weight: 700;
+		font-size: 0.95rem;
+		color: var(--blanc-creme);
+	}
+
+	.item-action.selectionne .action-titre {
+		color: var(--or-oki);
+	}
+
+	.action-desc {
+		font-size: 0.8rem;
+		color: var(--muted);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.action-cat,
+	.action-badge {
+		font-size: 0.72rem;
+		padding: 0.2rem 0.5rem;
+		border-radius: var(--radius-sm);
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.action-cat {
+		background: var(--card-bg);
+		color: var(--muted);
+		border: 1px solid var(--line);
+	}
+
+	.action-badge {
+		background: rgba(253, 184, 19, 0.12);
+		color: var(--or-oki);
+		border: 1px solid var(--or-oki);
+		font-weight: 700;
+	}
+
+	.bar-footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 1rem;
+		padding: 0.6rem 1.1rem;
+		background: var(--noir-oki);
+		border-top: 1px solid var(--line);
+		font-size: 0.75rem;
+		color: var(--muted);
+	}
+
+	kbd {
+		background: var(--card-bg);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		padding: 0.1rem 0.35rem;
+		font-family: inherit;
+		font-size: 0.75rem;
+	}
+</style>

app/src/lib/components/FlagBar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	interface Props {
+		/** Hauteur en px (par défaut 6px) */
+		hauteur?: number;
+	}
+
+	let { hauteur = 6 }: Props = $props();
+</script>
+
+<div class="flag-bar" style:height="{hauteur}px" aria-hidden="true"></div>
+
+<style>
+	.flag-bar {
+		width: 100%;
+		flex-shrink: 0;
+		background: linear-gradient(
+			to right,
+			#0d0d0d 0 25%,
+			var(--or-oki) 25% 50%,
+			var(--vert-oki) 50% 75%,
+			var(--rouge-oki) 75% 100%
+		);
+	}
+
+	:global(html.light-theme) .flag-bar {
+		background: linear-gradient(
+			to right,
+			#000000 0 25%,
+			var(--or-oki) 25% 50%,
+			var(--vert-oki) 50% 75%,
+			var(--rouge-oki) 75% 100%
+		);
+	}
+</style>

app/src/lib/components/GameMap.svelte

@@ -0,0 +1,579 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
+	import { t } from '$lib/i18n/store.svelte';
+	import { MAX_BOUNDS, MIN_ZOOM, REGION_BOUNDS, REGIONS } from '$lib/map/regions';
+	import styleOki from '$lib/map/style-oki.json';
+	import { dureeMs, easeKa, syncopatedDelay } from '$lib/motion/tokens';
+	import type { Coordonnees, Region } from '$lib/types';
+	import type { Map as MLMap, Marker, StyleSpecification } from 'maplibre-gl';
+
+	interface Paire {
+		from: Coordonnees;
+		to: Coordonnees;
+		label?: string;
+	}
+
+	interface MarqueurInfo {
+		id: string;
+		lat: number;
+		lon: number;
+		label: string;
+	}
+
+	interface Props {
+		guess?: Coordonnees | null;
+		real?: Coordonnees | null;
+		distanceKm?: number | null;
+		interactive?: boolean;
+		pairs?: Paire[];
+		markers?: MarqueurInfo[];
+		onguess?: (c: Coordonnees) => void;
+		onvalidate?: () => void;
+		onmarkerclick?: (id: string) => void;
+	}
+
+	let {
+		guess = $bindable(null),
+		real = null,
+		distanceKm = null,
+		interactive = true,
+		pairs = [],
+		markers = [],
+		onguess,
+		onvalidate,
+		onmarkerclick
+	}: Props = $props();
+
+	let conteneur: HTMLDivElement;
+	let map: MLMap | null = null;
+	let ml: typeof import('maplibre-gl') | null = null;
+	let guessMarker: Marker | null = null;
+	let realMarker: Marker | null = null;
+	let explorerMarkers: Marker[] = [];
+	let observateurTaille: ResizeObserver | null = null;
+	let rafLigne: number | null = null; // tracé progressif de la ligne de distance
+	let pulseAttendu = false; // pulse du marqueur au prochain positionnement (clic / dragend)
+
+	const SRC_LIGNE = 'jwe-ligne';
+	const SRC_PAIRES = 'jwe-paires';
+
+	const reducedMotion =
+		typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	function styleUrl(): string | StyleSpecification {
+		// Bascule vers un tileserver auto-hébergé sans changement de code.
+		if (env.PUBLIC_TILES_URL) return env.PUBLIC_TILES_URL;
+		return styleOki as unknown as StyleSpecification;
+	}
+
+	function ensureSource(id: string): void {
+		if (map && !map.getSource(id)) {
+			map.addSource(id, {
+				type: 'geojson',
+				data: { type: 'FeatureCollection', features: [] }
+			});
+		}
+	}
+
+	function setGeoJSON(id: string, data: GeoJSON.FeatureCollection): void {
+		const src = map?.getSource(id) as import('maplibre-gl').GeoJSONSource | undefined;
+		src?.setData(data);
+	}
+
+	function ligneFeature(from: Coordonnees, to: Coordonnees, props: GeoJSON.GeoJsonProperties): GeoJSON.Feature {
+		return {
+			type: 'Feature',
+			properties: props,
+			geometry: { type: 'LineString', coordinates: [[from.lon, from.lat], [to.lon, to.lat]] }
+		};
+	}
+
+	function pointFeature(c: Coordonnees, props: GeoJSON.GeoJsonProperties): GeoJSON.Feature {
+		return {
+			type: 'Feature',
+			properties: props,
+			geometry: { type: 'Point', coordinates: [c.lon, c.lat] }
+		};
+	}
+
+	function annulerTraceLigne(): void {
+		if (rafLigne !== null) {
+			cancelAnimationFrame(rafLigne);
+			rafLigne = null;
+		}
+	}
+
+	function dessinerRevelation(): void {
+		if (!map || !ml || !real) return;
+		ensureSource(SRC_LIGNE);
+		if (!map.getLayer('jwe-ligne-line')) {
+			map.addLayer({
+				id: 'jwe-ligne-line',
+				type: 'line',
+				source: SRC_LIGNE,
+				filter: ['==', ['geometry-type'], 'LineString'],
+				paint: { 'line-color': '#e4572e', 'line-width': 3, 'line-dasharray': [2, 1.5] }
+			});
+			map.addLayer({
+				id: 'jwe-ligne-label',
+				type: 'symbol',
+				source: SRC_LIGNE,
+				filter: ['==', ['geometry-type'], 'Point'],
+				layout: {
+					'text-field': ['get', 'etiquette'],
+					'text-size': 14,
+					'text-font': ['Noto Sans Regular'],
+					'text-offset': [0, -1.4]
+				},
+				paint: { 'text-color': '#0b3d2e', 'text-halo-color': '#fffdf8', 'text-halo-width': 2 }
+			});
+		}
+		const positionReelle = real;
+		/** Features de la ligne guess ↔ réel à la progression donnée (1 = complète). */
+		function featuresLigne(progression: number): GeoJSON.Feature[] {
+			if (!guess) return [];
+			const tete = {
+				lat: guess.lat + (positionReelle.lat - guess.lat) * progression,
+				lon: guess.lon + (positionReelle.lon - guess.lon) * progression
+			};
+			const features: GeoJSON.Feature[] = [ligneFeature(guess, tete, null)];
+			if (progression >= 1 && distanceKm !== null) {
+				// Étiquette de distance au milieu de la ligne, posée à la fin du tracé
+				features.push(
+					pointFeature(
+						{ lat: (guess.lat + positionReelle.lat) / 2, lon: (guess.lon + positionReelle.lon) / 2 },
+						{ etiquette: `${distanceKm} km` }
+					)
+				);
+			}
+			return features;
+		}
+
+		annulerTraceLigne();
+		const dureeTrace = dureeMs('--dur-phrase');
+		if (guess && !reducedMotion && dureeTrace > 0) {
+			// La ligne de distance se dessine depuis le guess vers le lieu réel :
+			// croissance progressive du GeoJSON via rAF (jamais d'état réactif
+			// par frame), easing --ease-ka, durée lue du token CSS.
+			const t0 = performance.now();
+			const tick = (t: number): void => {
+				const p = Math.min(1, (t - t0) / dureeTrace);
+				setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: featuresLigne(easeKa(p)) });
+				rafLigne = p < 1 ? requestAnimationFrame(tick) : null;
+			};
+			rafLigne = requestAnimationFrame(tick);
+		} else {
+			setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: featuresLigne(1) });
+		}
+
+		// Marqueur vert = position réelle ; le marqueur corail du joueur RESTE
+		// à sa position : la comparaison visuelle guess ↔ réel est le cœur du jeu.
+		realMarker?.remove();
+		realMarker = new ml.Marker({ color: '#0b3d2e' }).setLngLat([real.lon, real.lat]).addTo(map);
+		// Le marqueur « tombe » avec un petit rebond (transform only, keyframes CSS).
+		if (!reducedMotion) realMarker.getElement().classList.add('tombe');
+
+		if (guess) {
+			const bounds = new ml.LngLatBounds(
+				[Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)],
+				[Math.max(guess.lon, real.lon), Math.max(guess.lat, real.lat)]
+			);
+			// Le panneau résultat vient de remplacer la photo : synchroniser la
+			// taille du canvas AVANT de calculer le cadrage, sinon il est faussé.
+			// maxZoom 15 (et non 12) : pour un guess proche du lieu, les deux
+			// marqueurs doivent rester distinguables (juger « à quel point on est bon »).
+			map.resize();
+			map.fitBounds(bounds, { padding: 90, duration: reducedMotion ? 0 : 900, maxZoom: 15 });
+		} else {
+			map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 });
+		}
+	}
+
+	function nettoyerRevelation(): void {
+		annulerTraceLigne();
+		realMarker?.remove();
+		realMarker = null;
+		setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: [] });
+	}
+
+	function syncGuessMarker(): void {
+		if (!map || !ml) return;
+		if (guess) {
+			if (!guessMarker) {
+				guessMarker = new ml.Marker({ color: '#e4572e', draggable: true })
+					.setLngLat([guess.lon, guess.lat])
+					.addTo(map);
+				guessMarker.on('dragend', () => {
+					const ll = guessMarker?.getLngLat();
+					if (ll) {
+						pulseAttendu = true; // le déplacement au drag est aussi un placement
+						guess = { lat: ll.lat, lon: ll.lng };
+						onguess?.(guess);
+					}
+				});
+			} else {
+				guessMarker.setLngLat([guess.lon, guess.lat]);
+			}
+			guessMarker.setDraggable(interactive && !real);
+			if (pulseAttendu) {
+				pulseAttendu = false;
+				if (!reducedMotion) {
+					// Feedback de placement : pulse léger (redémarrage forcé si le
+					// marqueur bouge à nouveau pendant l'animation).
+					const el = guessMarker.getElement();
+					el.classList.remove('pulse');
+					void el.offsetWidth;
+					el.classList.add('pulse');
+				}
+			}
+		} else {
+			guessMarker?.remove();
+			guessMarker = null;
+		}
+	}
+
+	function syncPaires(): void {
+		if (!map || !ml) return;
+		ensureSource(SRC_PAIRES);
+		if (!map.getLayer('jwe-paires-line')) {
+			map.addLayer({
+				id: 'jwe-paires-line',
+				type: 'line',
+				source: SRC_PAIRES,
+				filter: ['==', ['geometry-type'], 'LineString'],
+				paint: { 'line-color': '#5a6b62', 'line-width': 2, 'line-dasharray': [2, 1.5] }
+			});
+			map.addLayer({
+				id: 'jwe-paires-points',
+				type: 'circle',
+				source: SRC_PAIRES,
+				filter: ['==', ['geometry-type'], 'Point'],
+				paint: {
+					'circle-radius': 7,
+					'circle-color': ['get', 'couleur'],
+					'circle-stroke-color': '#fffdf8',
+					'circle-stroke-width': 2
+				}
+			});
+		}
+		const features: GeoJSON.Feature[] = [];
+		for (const p of pairs) {
+			features.push(ligneFeature(p.from, p.to, null));
+			features.push(pointFeature(p.from, { couleur: '#e4572e' })); // joueur
+			features.push(pointFeature(p.to, { couleur: '#0b3d2e' })); // réel
+		}
+		setGeoJSON(SRC_PAIRES, { type: 'FeatureCollection', features });
+		if (pairs.length > 0) {
+			const b = new ml.LngLatBounds();
+			for (const p of pairs) {
+				b.extend([p.from.lon, p.from.lat]);
+				b.extend([p.to.lon, p.to.lat]);
+			}
+			map.fitBounds(b, { padding: 60, duration: reducedMotion ? 0 : 800 });
+		}
+	}
+
+	function syncExplorerMarkers(): void {
+		if (!map || !ml) return;
+		for (const m of explorerMarkers) m.remove();
+		explorerMarkers = [];
+		for (const [i, info] of markers.entries()) {
+			const el = document.createElement('button');
+			el.type = 'button';
+			el.className = 'marqueur-explorer';
+			el.setAttribute('aria-label', info.label);
+			// Cascade syncopée au (re)filtrage : rythme 3+3+2 sur le premier
+			// cycle, plafonné à 960 ms au-delà (le catalogue peut être long).
+			// Sans effet en reduced-motion : l'animation est sous gate média.
+			el.style.animationDelay = `${Math.min(syncopatedDelay(i), 960)}ms`;
+			const mk = new ml.Marker({ element: el, color: '#175e70' })
+				.setLngLat([info.lon, info.lat])
+				.addTo(map!);
+			el.addEventListener('click', (e) => {
+				e.stopPropagation();
+				onmarkerclick?.(info.id);
+			});
+			explorerMarkers.push(mk);
+		}
+	}
+
+	function sauterVers(region: Region): void {
+		const b = REGION_BOUNDS[region];
+		map?.fitBounds(
+			[
+				[b[0], b[1]],
+				[b[2], b[3]]
+			],
+			{ duration: reducedMotion ? 0 : 800 }
+		);
+	}
+
+	function onKeydown(e: KeyboardEvent): void {
+		if (!map) return;
+		const pas = 140; // pixels de déplacement
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			onvalidate?.();
+			return;
+		}
+		const dirs: Record<string, [number, number]> = {
+			ArrowUp: [0, -pas],
+			ArrowDown: [0, pas],
+			ArrowLeft: [-pas, 0],
+			ArrowRight: [pas, 0]
+		};
+		const d = dirs[e.key];
+		if (!d) return;
+		e.preventDefault();
+		if (guessMarker && interactive && !real) {
+			// Déplacer le marqueur : conversion écran → géo pour garder un pas constant
+			const ll = guessMarker.getLngLat();
+			const pt = map.project([ll.lng, ll.lat]);
+			const nv = map.unproject([pt.x + d[0], pt.y + d[1]]);
+			guess = { lat: nv.lat, lon: nv.lng };
+			onguess?.(guess);
+		} else {
+			map.panBy(d, { duration: 100 });
+		}
+	}
+
+	onMount(() => {
+		let detruit = false;
+		// Lazy load : MapLibre (JS + CSS) n'est chargé que sur les écrans avec carte.
+		void (async () => {
+			const [mod] = await Promise.all([import('maplibre-gl'), import('maplibre-gl/dist/maplibre-gl.css')]);
+			if (detruit) return;
+			ml = mod;
+			map = new mod.Map({
+				container: conteneur,
+				style: styleUrl(),
+				center: [-58, 0],
+				zoom: 3.6,
+				minZoom: MIN_ZOOM,
+				maxBounds: [
+					[MAX_BOUNDS[0], MAX_BOUNDS[1]],
+					[MAX_BOUNDS[2], MAX_BOUNDS[3]]
+				],
+				attributionControl: { compact: true },
+				// Libellés FR/créole des contrôles natifs (sinon « Zoom in/out » en anglais)
+				locale: {
+					'NavigationControl.ZoomIn': t().carte.zoomIn,
+					'NavigationControl.ZoomOut': t().carte.zoomOut
+				}
+			});
+			map.addControl(new mod.NavigationControl({ showCompass: false }), 'top-left');
+			map.on('click', (e) => {
+				if (!interactive || real) return;
+				pulseAttendu = true; // feedback au placement du marqueur
+				guess = { lat: e.lngLat.lat, lon: e.lngLat.lng };
+				onguess?.(guess);
+			});
+			map.on('load', () => {
+				syncGuessMarker();
+				syncPaires();
+				syncExplorerMarkers();
+				if (real) dessinerRevelation();
+			});
+			// MapLibre ne détecte pas seul les changements de taille du conteneur
+			// (panneau résultat qui remplace la photo, rotation d'écran…).
+			observateurTaille = new ResizeObserver(() => map?.resize());
+			observateurTaille.observe(conteneur);
+		})();
+		return () => {
+			detruit = true;
+			annulerTraceLigne();
+			observateurTaille?.disconnect();
+			observateurTaille = null;
+			map?.remove();
+			map = null;
+		};
+	});
+
+	let ancienReal: Coordonnees | null = null;
+	$effect(() => {
+		// Lecture inconditionnelle de `real` : au montage la carte n'existe pas
+		// encore, et un retour anticipé avant toute lecture réactive ferait que
+		// Svelte n'enregistre aucune dépendance — l'effet ne serait jamais relancé.
+		// (isStyleLoaded et non loaded : loaded() reste faux pendant le chargement
+		// des tuiles, ce qui ferait rater le dessin juste après un zoom/pan.)
+		void real;
+		if (!map || !map.isStyleLoaded()) return;
+		if (real && !ancienReal) dessinerRevelation();
+		if (!real && ancienReal) nettoyerRevelation();
+		ancienReal = real;
+	});
+
+	$effect(() => {
+		if (map?.loaded()) syncGuessMarker();
+		void guess;
+		void interactive;
+	});
+
+	$effect(() => {
+		if (map?.loaded()) syncPaires();
+		void pairs;
+	});
+
+	$effect(() => {
+		if (map?.loaded()) syncExplorerMarkers();
+		void markers;
+	});
+</script>
+
+<div class="carte-wrap">
+	<!-- La zone carte est volontairement focusable : flèches = déplacer le marqueur, Entrée = valider -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		class="carte"
+		bind:this={conteneur}
+		role="application"
+		aria-label={t().carte.ariaLabel}
+		tabindex="0"
+		onkeydown={onKeydown}
+	></div>
+	<div class="sauts" role="group" aria-label={t().carte.sautRegion}>
+		{#each REGIONS as region (region)}
+			<button type="button" class="saut" onclick={() => sauterVers(region)}>
+				{t().regions[region]}
+			</button>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.carte-wrap {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 0.45rem;
+	}
+
+	.carte {
+		flex: 1;
+		min-height: 0;
+		width: 100%;
+		border-radius: var(--oki-radius);
+		overflow: hidden;
+	}
+
+	/* Mobile : les sauts sortent de la carte — barre horizontale SOUS la carte,
+	   dimensionnée pour que les 4 régions tiennent sur 360px+ (scroll en repli),
+	   jamais recouverte par l'attribution ni un overlay. */
+	.sauts {
+		display: flex;
+		flex-wrap: nowrap;
+		gap: 0.3rem;
+		overflow-x: auto;
+		padding: 0.1rem;
+		scrollbar-width: thin;
+	}
+
+	.saut {
+		flex: 0 0 auto;
+		min-height: 48px; /* cible tactile */
+		background: rgba(255, 253, 248, 0.94);
+		color: var(--oki-vert);
+		border: 1px solid var(--oki-sable-fonce);
+		border-radius: 999px;
+		padding: 0.3rem 0.7rem;
+		font-size: 0.8rem;
+		font-weight: 650;
+		cursor: pointer;
+		box-shadow: var(--oki-ombre);
+	}
+
+	.saut:hover {
+		background: var(--oki-vert-doux);
+	}
+
+	/* Desktop : overlay bas-gauche, dégagé de l'attribution compacte (bas-droite). */
+	@media (min-width: 768px) {
+		.sauts {
+			position: absolute;
+			bottom: 0.6rem;
+			left: 0.6rem;
+			max-width: calc(100% - 5rem);
+			padding: 0;
+		}
+
+		.saut {
+			min-height: 0;
+			font-size: 0.8rem;
+			padding: 0.35rem 0.8rem;
+		}	}
+
+	:global(.marqueur-explorer) {
+		width: 26px;
+		height: 26px;
+		border-radius: 50%;
+		border: 2.5px solid var(--oki-blanc);
+		background: var(--oki-bleu);
+		cursor: pointer;
+		box-shadow: var(--oki-ombre);
+	}
+
+	:global(.marqueur-explorer:hover),
+	:global(.marqueur-explorer:focus-visible) {
+		background: var(--oki-vert-clair);
+	}
+
+	/* — Motion des marqueurs : transform/opacity uniquement, gate no-preference
+	   (les classes tombe/pulse ne sont posées qu'hors reduced-motion, et les
+	   délais inline de la cascade explorer sont sans effet sans animation). — */
+	@media (prefers-reduced-motion: no-preference) {
+		/* Cascade syncopée d'entrée des marqueurs du catalogue explorer */
+		:global(.marqueur-explorer) {
+			animation: marqueur-pop var(--dur-mesure) var(--ease-ka) backwards;
+		}
+
+		/* Le marqueur du lieu réel « tombe » avec un petit rebond */
+		:global(.maplibregl-marker.tombe > svg) {
+			transform-origin: bottom center;
+			animation: marqueur-tombe var(--dur-mesure) var(--ease-ka);
+		}
+
+		/* Pulse léger au placement du marqueur de guess */
+		:global(.maplibregl-marker.pulse > svg) {
+			transform-origin: bottom center;
+			animation: marqueur-pulse var(--dur-mesure) var(--ease-ka);
+		}
+	}
+
+	@keyframes marqueur-pop {
+		from {
+			transform: scale(0.6);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes marqueur-tombe {
+		0% {
+			transform: translateY(-34px) scale(0.85);
+			opacity: 0;
+		}
+		55% {
+			transform: translateY(3px) scale(1.03);
+			opacity: 1;
+		}
+		100% {
+			transform: translateY(0) scale(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes marqueur-pulse {
+		0% {
+			transform: scale(1.4);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>

app/src/lib/components/LangSwitch.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { t } from '$lib/i18n/store.svelte';
+	import { getLang, setLang, type Lang } from '$lib/i18n/store.svelte';
+</script>
+
+<div class="lang-switch" role="group" aria-label="Langue / Lang">
+	{#each ['fr', 'gcf'] as l (l)}
+		<button
+			type="button"
+			class:actif={getLang() === l}
+			aria-pressed={getLang() === l}
+			onclick={() => setLang(l as Lang)}
+		>
+			{t().langue[l as Lang]}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.lang-switch {
+		display: flex;
+		gap: 0.25rem;
+		background: var(--oki-vert-doux);
+		border-radius: 999px;
+		padding: 0.2rem;
+	}
+
+	button {
+		border: none;
+		background: transparent;
+		color: var(--oki-vert);
+		border-radius: 999px;
+		padding: 0.3rem 0.75rem;
+		font-size: 0.85rem;
+		font-weight: 600;
+		cursor: pointer;
+	}
+
+	button.actif {
+		background: var(--oki-vert);
+		color: #fff;
+	}
+</style>

app/src/lib/components/PhotoPanel.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Photo } from '$lib/types';
+
+	interface Props {
+		photo: Photo;
+		revealed?: boolean;
+	}
+
+	let { photo, revealed = false }: Props = $props();
+
+	// Proxy /api/photo : 3 largeurs disponibles, le navigateur choisit (C4).
+	const srcset = $derived(
+		photo.srcset
+			? Object.entries(photo.srcset)
+					.map(([w, u]) => `${u} ${w}w`)
+					.join(', ')
+			: undefined
+	);
+</script>
+
+<figure class="photo-panel">
+	<img
+		src={photo.url}
+		{srcset}
+		sizes="(min-width: 768px) 50vw, 100vw"
+		alt={photo.alt}
+		loading="lazy"
+		decoding="async"
+	/>
+	{#if revealed}
+		<figcaption>{photo.credit}</figcaption>
+	{/if}
+</figure>
+
+<style>
+	.photo-panel {
+		position: relative;
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		background: var(--oki-vert);
+		border-radius: var(--oki-radius);
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	figcaption {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 0.4rem 0.8rem;
+		font-size: 0.72rem;
+		color: #fff;
+		background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
+		pointer-events: none; /* décoratif : ne bloque jamais les clics */
+	}
+</style>

app/src/lib/components/ResultPanel.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import WikiFiche from './WikiFiche.svelte';
+	import { t } from '$lib/i18n/store.svelte';
+	import { compte } from '$lib/motion/countup';
+	import type { GuessResult } from '$lib/types';
+
+	interface Props {
+		result: GuessResult;
+		labelBouton?: string;
+		creditPhoto?: string;
+		onsuivant?: () => void;
+	}
+
+	let { result, labelBouton, creditPhoto, onsuivant }: Props = $props();
+</script>
+
+<section class="resultat" aria-live="polite">
+	<header class="score-bloc">
+		<p class="bravo">{result.score > 0 ? t().micro.bravo : t().micro.kiteSaYe}</p>
+		<p class="score">
+			<!-- Count-up animé (aria-hidden) doublé de la valeur finale pour les
+			     lecteurs d'écran : la section est aria-live, l'animation rAF
+			     écrirait sinon une valeur par frame. -->
+			<span class="valeur" aria-hidden="true" use:compte={result.score}>{result.score}</span>
+			<span class="sr-only">{result.score}</span>
+			<span class="unite">{t().resultat.points}</span>
+		</p>
+		{#if result.distanceKm !== null}
+			<p class="distance">{t().resultat.distance} : {result.distanceKm} {t().resultat.km}</p>
+			{#if result.radiusEffKm !== null}
+				<p class="rayon">{t().resultat.rayonScore} : {result.radiusEffKm} {t().resultat.km}</p>
+			{/if}
+		{/if}
+		<p class="lieu">
+			<strong>{result.nom}</strong>
+			{#if result.nom_creole && result.nom_creole !== result.nom}
+				<span class="creole"> · {result.nom_creole}</span>
+			{/if}
+			<br />
+			{t().resultat.commune} : {result.commune} — {t().regions[result.region]}
+		</p>
+	</header>
+
+	{#key result.nom}
+		<WikiFiche
+			nom={result.nom}
+			wikidataId={result.wikidata_id}
+			tonPositif={result.score > 0 ? t().resultat.trouve : t().resultat.aDecouvrir}
+		/>
+	{/key}
+
+	{#if creditPhoto}
+		<p class="credit-photo">{creditPhoto}</p>
+	{/if}
+
+	{#if onsuivant}
+		<button type="button" class="btn btn-primaire suivant" onclick={onsuivant}>
+			{labelBouton ?? t().resultat.suivant}
+		</button>
+	{/if}
+</section>
+
+<style>
+	.resultat {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.score-bloc {
+		text-align: center;
+	}
+
+	.bravo {
+		margin: 0;
+		font-size: 1.3rem;
+		font-weight: 700;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		color: var(--or-oki);
+	}
+
+	.score {
+		margin: 0.2rem 0;
+	}
+
+	.score .valeur {
+		font-size: 2.8rem;
+		font-weight: 800;
+		font-family: var(--font-display);
+		color: var(--or-oki);
+	}
+
+	.score .unite {
+		font-size: 1rem;
+		color: var(--muted);
+		margin-left: 0.3rem;
+	}
+
+	.distance {
+		margin: 0;
+		color: var(--blanc-creme);
+		font-weight: 600;
+	}
+
+	.rayon {
+		margin: 0.1rem 0 0;
+		font-size: 0.82rem;
+		color: var(--muted);
+	}
+
+	.credit-photo {
+		margin: 0;
+		font-size: 0.72rem;
+		color: var(--muted);
+		text-align: center;
+	}
+
+	.lieu {
+		margin: 0.5rem 0 0;
+		color: var(--blanc-creme);
+	}
+
+	.creole {
+		color: var(--or-oki);
+		font-style: italic;
+	}
+
+	.suivant {
+		align-self: center;
+		min-width: 220px;
+	}
+</style>

app/src/lib/components/Seo.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { SITE_NAME, SITE_URL } from '$lib/site';
+
+	interface Props {
+		/** Titre de la page (sans le nom du site) — « JWE — … » est composé ici. */
+		title: string;
+		description: string;
+		/** Chemin absolu de la route (ex. `/explorer`) — canonical + og:url. */
+		path: string;
+		/** URL absolue d'une image og (aucune émise si absente — pas d'image inventée). */
+		image?: string;
+	}
+
+	let { title, description, path, image }: Props = $props();
+
+	const titreComplet = $derived(`${SITE_NAME} — ${title}`);
+	const urlCanonique = $derived(`${SITE_URL}${path}`);
+
+	const schemaWebapp = $derived(
+		JSON.stringify({
+			'@context': 'https://schema.org',
+			'@graph': [
+				{
+					'@type': 'WebApplication',
+					'@id': `${SITE_URL}/#app`,
+					name: 'JWE',
+					alternateName: 'JWE - Géolocalisation Souveraine Outre-mer',
+					url: SITE_URL,
+					applicationCategory: 'GameApplication',
+					genre: ['Educational Game', 'Geolocation Game'],
+					operatingSystem: 'All',
+					browserRequirements: 'Requires JavaScript and HTML5 Canvas/WebGL',
+					inLanguage: ['fr', 'gcf'],
+					description:
+						'Jeu de géolocalisation libre et souverain dans l’esprit de GeoGuessr, centré sur la Guadeloupe, la Martinique, la Guyane et La Réunion.',
+					offers: {
+						'@type': 'Offer',
+						price: '0',
+						priceCurrency: 'EUR'
+					},
+					author: {
+						'@type': 'Organization',
+						name: 'ORGANISATION KA INTERNATIONALE',
+						url: 'https://o-k-i.net'
+					},
+					license: 'https://opensource.org/licenses/MIT'
+				},
+				{
+					'@type': 'FAQPage',
+					'@id': `${SITE_URL}/#faq`,
+					mainEntity: [
+						{
+							'@type': 'Question',
+							name: 'Qu’est-ce que JWE ?',
+							acceptedAnswer: {
+								'@type': 'Answer',
+								text: 'JWE est un jeu web de géolocalisation éthique et souverain centré sur 4 territoires caribéens et ultramarins : Guadeloupe, Martinique, Guyane et La Réunion. Le joueur devine la commune d’un lieu à partir d’une photo ou d’une vue street 360°, puis accède à une fiche éducative Wikipédia.'
+							}
+						},
+						{
+							'@type': 'Question',
+							name: 'Qu’est-ce que le principe « Pwen blindé » ?',
+							acceptedAnswer: {
+								'@type': 'Answer',
+								text: 'Le « Pwen blindé » (point aveugle) est une mécanique éducative identifiant les lieux réels qui ne possèdent pas encore de fiche Wikipédia ou Wikidata, invitant les utilisateurs et citoyens à documenter leurs propres territoires pour préserver la mémoire et la souveraineté numérique locale.'
+							}
+						}
+					]
+				}
+			]
+		})
+	);
+</script>
+
+<svelte:head>
+	<title>{titreComplet}</title>
+	<meta name="description" content={description} />
+	<link rel="canonical" href={urlCanonique} />
+
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={urlCanonique} />
+	<meta property="og:title" content={titreComplet} />
+	<meta property="og:description" content={description} />
+	<meta property="og:locale" content="fr_FR" />
+	<meta property="og:site_name" content={SITE_NAME} />
+	{#if image}
+		<meta property="og:image" content={image} />
+	{/if}
+
+	<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
+	<meta name="twitter:title" content={titreComplet} />
+	<meta name="twitter:description" content={description} />
+	{#if image}
+		<meta name="twitter:image" content={image} />
+	{/if}
+
+	<!-- Balisage structuré JSON-LD AI Overview & SEO Top-Tier -->
+	{@html `<script type="application/ld+json">${schemaWebapp}</script>`}
+</svelte:head>

app/src/lib/components/StatsModal.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+	import { exporterHistorique, getHistorique, getStats, reinitialiserHistorique } from '$lib/stores/history.svelte';
+	import { t } from '$lib/i18n/store.svelte';
+
+	interface Props {
+		ouvert: boolean;
+		onfermer: () => void;
+	}
+
+	let { ouvert, onfermer }: Props = $props();
+
+	const stats = $derived(ouvert ? getStats() : null);
+	const historique = $derived(ouvert ? getHistorique() : []);
+
+	let confirmationEffacer = $state(false);
+
+	function exporter(): void {
+		exporterHistorique();
+	}
+
+	function effacer(): void {
+		if (!confirmationEffacer) {
+			confirmationEffacer = true;
+			return;
+		}
+		reinitialiserHistorique();
+		confirmationEffacer = false;
+	}
+
+	function onKeydown(e: KeyboardEvent): void {
+		if (e.key === 'Escape') {
+			onfermer();
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent): void {
+		if (e.target === e.currentTarget) {
+			onfermer();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={ouvert ? onKeydown : undefined} />
+
+{#if ouvert}
+	<div
+		class="overlay"
+		onclick={handleBackdropClick}
+		role="presentation"
+	>
+		<div
+			class="modal-stats"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="titre-stats"
+		>
+			<header class="modal-entete">
+				<div>
+					<h2 id="titre-stats">{t().stats.titre}</h2>
+					<p class="sous-titre-stats">{t().stats.sousTitre}</p>
+				</div>
+				<button type="button" class="btn-fermer" onclick={onfermer} aria-label={t().stats.fermer}>
+					✕
+				</button>
+			</header>
+
+			{#if stats}
+				<div class="stats-corps">
+					<div class="grille-chiffres">
+						<div class="carte-chiffre">
+							<span class="chiffre-val">{stats.totalParties}</span>
+							<span class="chiffre-label">{t().stats.partiesJouees}</span>
+						</div>
+						<div class="carte-chiffre">
+							<span class="chiffre-val">{stats.meilleurScore}</span>
+							<span class="chiffre-label">{t().stats.meilleurScore}</span>
+						</div>
+						<div class="carte-chiffre">
+							<span class="chiffre-val">{stats.scoreMoyen}</span>
+							<span class="chiffre-label">{t().stats.scoreMoyen}</span>
+						</div>
+						<div class="carte-chiffre">
+							<span class="chiffre-val">{stats.lieuxUniques}</span>
+							<span class="chiffre-label">{t().stats.lieuxDecouverts}</span>
+						</div>
+					</div>
+
+					<h3 class="section-titre">{t().stats.parRegion}</h3>
+					<div class="grille-regions">
+						{#each (['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'] as const) as reg}
+							{@const st = stats.parRegion[reg]}
+							<div class="carte-region-stat">
+								<span class="nom-reg">{t().regions[reg]}</span>
+								<span class="reg-score">{st.rounds > 0 ? `${st.scoreMoyen} pts` : '—'}</span>
+								<span class="reg-detail">{st.rounds > 0 ? `${st.rounds} manches · ${st.distanceMoyenneKm} km` : t().stats.aucunePartie}</span>
+							</div>
+						{/each}
+					</div>
+
+					{#if historique.length > 0}
+						<h3 class="section-titre">{t().stats.dernieresParties}</h3>
+						<div class="liste-historique">
+							{#each historique.slice(0, 5) as h (h.id)}
+								<div class="item-hist">
+									<div class="hist-info">
+										<span class="hist-mode">{t().modes[h.mode] || h.mode}</span>
+										<span class="hist-date">{new Date(h.timestamp).toLocaleDateString()}</span>
+									</div>
+									<span class="hist-score">{h.scoreTotal} pts</span>
+								</div>
+							{/each}
+						</div>
+					{/if}
+
+					<div class="stats-actions">
+						<button type="button" class="btn btn-secondaire" onclick={exporter}>
+							📥 {t().stats.exporterJson}
+						</button>
+						<button
+							type="button"
+							class="btn btn-tertiaire"
+							class:alerte={confirmationEffacer}
+							onclick={effacer}
+						>
+							🗑️ {confirmationEffacer ? t().stats.confirmerEffacer : t().stats.effacerDonnees}
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 100;
+		background: rgba(0, 0, 0, 0.75);
+		backdrop-filter: blur(4px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+	}
+
+	.modal-stats {
+		width: 100%;
+		max-width: 620px;
+		max-height: 90dvh;
+		background: var(--noir-profond);
+		color: var(--blanc-creme);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-md);
+		box-shadow: var(--oki-ombre);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.modal-entete {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		padding: 1.2rem 1.4rem;
+		border-bottom: 1px solid var(--line);
+	}
+
+	.modal-entete h2 {
+		margin: 0;
+		font-size: 1.4rem;
+		color: var(--or-oki);
+	}
+
+	.sous-titre-stats {
+		margin: 0.2rem 0 0 0;
+		font-size: 0.85rem;
+		color: var(--muted);
+	}
+
+	.btn-fermer {
+		background: transparent;
+		color: var(--muted);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		font-size: 1rem;
+	}
+
+	.btn-fermer:hover {
+		color: var(--blanc-creme);
+		border-color: var(--or-oki);
+	}
+
+	.stats-corps {
+		padding: 1.2rem 1.4rem;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 1.2rem;
+	}
+
+	.grille-chiffres {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+		gap: 0.8rem;
+	}
+
+	.carte-chiffre {
+		background: var(--card-bg);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		padding: 0.9rem;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+	}
+
+	.chiffre-val {
+		font-size: 1.8rem;
+		font-weight: 800;
+		font-family: var(--font-display);
+		color: var(--or-oki);
+	}
+
+	.chiffre-label {
+		font-size: 0.8rem;
+		color: var(--muted);
+	}
+
+	.section-titre {
+		font-size: 1rem;
+		margin: 0;
+		color: var(--blanc-creme);
+		border-bottom: 1px solid var(--line);
+		padding-bottom: 0.4rem;
+	}
+
+	.grille-regions {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+		gap: 0.6rem;
+	}
+
+	.carte-region-stat {
+		background: var(--card-bg);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		padding: 0.7rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+	}
+
+	.nom-reg {
+		font-weight: 700;
+		font-size: 0.9rem;
+		color: var(--blanc-creme);
+	}
+
+	.reg-score {
+		font-size: 1.2rem;
+		font-weight: 800;
+		font-family: var(--font-display);
+		color: var(--vert-oki);
+	}
+
+	.reg-detail {
+		font-size: 0.75rem;
+		color: var(--muted);
+	}
+
+	.liste-historique {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+
+	.item-hist {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: var(--card-bg);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		padding: 0.5rem 0.8rem;
+	}
+
+	.hist-info {
+		display: flex;
+		gap: 0.6rem;
+		align-items: baseline;
+	}
+
+	.hist-mode {
+		font-weight: 700;
+		font-size: 0.9rem;
+		color: var(--blanc-creme);
+	}
+
+	.hist-date {
+		font-size: 0.78rem;
+		color: var(--muted);
+	}
+
+	.hist-score {
+		font-weight: 800;
+		font-family: var(--font-display);
+		color: var(--or-oki);
+	}
+
+	.stats-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.8rem;
+		margin-top: 0.5rem;
+	}
+
+	.btn-tertiaire.alerte {
+		border-color: var(--rouge-oki);
+		color: var(--rouge-oki);
+	}
+</style>

app/src/lib/components/StreetPanel.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
+	import { t } from '$lib/i18n/store.svelte';
+	import type { Viewer } from 'mapillary-js';
+
+	interface Props {
+		mapillaryId: string;
+		credit?: string;
+	}
+
+	let { mapillaryId, credit }: Props = $props();
+
+	let conteneur: HTMLDivElement;
+	let viewer: Viewer | null = null;
+	let etat = $state<'chargement' | 'pret' | 'erreur' | 'token'>('chargement');
+
+	onMount(() => {
+		let detruit = false;
+		// Lazy load : mapillary-js (JS + CSS) n'est chargé que sur l'écran de jeu street.
+		void (async () => {
+			const token = env.PUBLIC_MAPILLARY_TOKEN;
+			if (!token) {
+				etat = 'token';
+				return;
+			}
+			try {
+				const [mod] = await Promise.all([
+					import('mapillary-js'),
+					import('mapillary-js/dist/mapillary.css')
+				]);
+				if (detruit) return;
+				// cover désactivé : la photo s'affiche directement, sans écran d'intro.
+				viewer = new mod.Viewer({
+					accessToken: token,
+					container: conteneur,
+					component: { cover: false }
+				});
+				// moveTo rejette si l'image a été retirée de Mapillary entre-temps.
+				await viewer.moveTo(mapillaryId);
+				if (detruit) return;
+				etat = 'pret';
+			} catch {
+				if (!detruit) etat = 'erreur';
+			}
+		})();
+		return () => {
+			detruit = true;
+			viewer?.remove();
+			viewer = null;
+		};
+	});
+</script>
+
+<figure class="street-panel">
+	<div
+		bind:this={conteneur}
+		class="visionneuse"
+		role="application"
+		aria-label={t().jeu.streetAriaLabel}
+	></div>
+	{#if etat !== 'pret'}
+		<div class="voile">
+			<p>
+				{#if etat === 'chargement'}{t().jeu.streetChargement}
+				{:else if etat === 'token'}{t().jeu.streetToken}
+				{:else}{t().jeu.streetErreur}{/if}
+			</p>
+		</div>
+	{/if}
+	{#if credit && etat === 'pret'}
+		<figcaption>{credit}</figcaption>
+	{/if}
+</figure>
+
+<style>
+	.street-panel {
+		position: relative;
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		background: var(--oki-vert);
+		border-radius: var(--oki-radius);
+	}
+
+	.visionneuse {
+		width: 100%;
+		height: 100%;
+	}
+
+	.voile {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		text-align: center;
+		color: var(--oki-blanc);
+		background: var(--oki-vert);
+	}
+
+	figcaption {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 0.4rem 0.8rem;
+		font-size: 0.72rem;
+		color: #fff;
+		background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
+		pointer-events: none;
+	}
+</style>

app/src/lib/components/ThemeSwitch.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { t } from '$lib/i18n/store.svelte';
+
+	let isLight = $state(false);
+
+	onMount(() => {
+		try {
+			const saved = localStorage.getItem('jwe_theme');
+			if (saved === 'light') {
+				isLight = true;
+				document.documentElement.classList.add('light-theme');
+			} else {
+				isLight = false;
+				document.documentElement.classList.remove('light-theme');
+			}
+		} catch {
+			// localStorage non disponible
+		}
+	});
+
+	function toggleTheme(): void {
+		isLight = !isLight;
+		if (isLight) {
+			document.documentElement.classList.add('light-theme');
+			try {
+				localStorage.setItem('jwe_theme', 'light');
+			} catch {}
+		} else {
+			document.documentElement.classList.remove('light-theme');
+			try {
+				localStorage.setItem('jwe_theme', 'dark');
+			} catch {}
+		}
+	}
+</script>
+
+<button
+	type="button"
+	class="btn-theme"
+	onclick={toggleTheme}
+	aria-label={isLight ? t().theme.passerSombre : t().theme.passerClair}
+	title={isLight ? t().theme.passerSombre : t().theme.passerClair}
+>
+	{#if isLight}
+		<!-- Icône Lune pour basculer vers sombre -->
+		<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+		</svg>
+	{:else}
+		<!-- Icône Soleil pour basculer vers clair -->
+		<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<circle cx="12" cy="12" r="5" />
+			<line x1="12" y1="1" x2="12" y2="3" />
+			<line x1="12" y1="21" x2="12" y2="23" />
+			<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+			<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+			<line x1="1" y1="12" x2="3" y2="12" />
+			<line x1="21" y1="12" x2="23" y2="12" />
+			<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+			<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+		</svg>
+	{/if}
+</button>
+
+<style>
+	.btn-theme {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		color: var(--blanc-creme);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		width: 38px;
+		height: 38px;
+		padding: 0;
+		cursor: pointer;
+		transition:
+			color var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka),
+			background-color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.btn-theme:hover {
+		color: var(--or-oki);
+		border-color: var(--or-oki);
+		background: var(--card-bg-hover);
+	}
+
+	.btn-theme:focus-visible {
+		outline: 2px solid var(--or-oki);
+		outline-offset: 2px;
+	}
+</style>

app/src/lib/components/TimerRing.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		dureeMs?: number; // fenêtre du bonus temps (60 s)
+		actif?: boolean;
+	}
+
+	let { dureeMs = 60000, actif = true }: Props = $props();
+
+	let ecoule = $state(0);
+	let intervalle: ReturnType<typeof setInterval> | null = null;
+	const depart = Date.now();
+
+	// Fraction restante, de 1 (plein) à 0 (vide) — informatif, jamais anxiogène.
+	let fraction = $derived(Math.max(0, 1 - ecoule / dureeMs));
+	let termine = $derived(ecoule >= dureeMs);
+
+	const R = 15.5;
+	const C = 2 * Math.PI * R;
+
+	/** Temps écoulé en ms (pour le bonus côté /api/guess). */
+	export function tempsMs(): number {
+		return Date.now() - depart;
+	}
+
+	onMount(() => {
+		if (actif) {
+			intervalle = setInterval(() => {
+				ecoule = Date.now() - depart;
+				if (ecoule >= dureeMs && intervalle) {
+					clearInterval(intervalle);
+					intervalle = null;
+				}
+			}, 250);
+		}
+		return () => {
+			if (intervalle) clearInterval(intervalle);
+		};
+	});
+</script>
+
+<div class="timer" class:termine role="timer" aria-label="Minuteur" title="Minuteur">
+	<svg viewBox="0 0 36 36" aria-hidden="true">
+		<circle class="fond" cx="18" cy="18" r={R} />
+		<circle
+			class="reste"
+			cx="18"
+			cy="18"
+			r={R}
+			stroke-dasharray={C}
+			stroke-dashoffset={C * (1 - fraction)}
+			transform="rotate(-90 18 18)"
+		/>
+	</svg>
+</div>
+
+<style>
+	.timer {
+		width: 40px;
+		height: 40px;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	.fond {
+		fill: rgba(255, 253, 248, 0.85);
+		stroke: var(--oki-sable-fonce);
+		stroke-width: 3;
+	}
+
+	.reste {
+		fill: none;
+		stroke: var(--oki-vert-clair); /* couleur douce, calm technology */
+		stroke-width: 3;
+		stroke-linecap: round;
+		transition: stroke-dashoffset 0.25s linear;
+	}
+
+	.termine .reste {
+		stroke: var(--oki-sable-fonce);
+	}
+</style>

app/src/lib/components/WikiFiche.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { t } from '$lib/i18n/store.svelte';
+	import type { WikiSummary } from '$lib/types';
+
+	interface Props {
+		nom: string;
+		wikidataId: string | null;
+		tonPositif?: string;
+		tonNeutre?: string;
+	}
+
+	let { nom, wikidataId, tonPositif, tonNeutre }: Props = $props();
+
+	// undefined = chargement, null = pas de fiche, WikiSummary = Cas A
+	let wiki = $state<WikiSummary | null | undefined>(undefined);
+	// Cas intermédiaire (audit A3) : QID présent, fiche Wikidata existante,
+	// mais pas d'article Wikipédia en français (404 {reason:'no-frwiki'}).
+	let sansFrwiki = $state(false);
+
+	onMount(() => {
+		if (!wikidataId) {
+			wiki = null;
+			return;
+		}
+		let annule = false;
+		void (async () => {
+			try {
+				const res = await fetch(`/api/wiki/${wikidataId}`);
+				if (annule) return;
+				if (res.ok) {
+					wiki = (await res.json()) as WikiSummary;
+				} else {
+					if (res.status === 404) {
+						try {
+							const corps = (await res.json()) as { reason?: string };
+							sansFrwiki = corps.reason === 'no-frwiki';
+						} catch {
+							sansFrwiki = false;
+						}
+					}
+					wiki = null;
+				}
+			} catch {
+				if (!annule) wiki = null;
+			}
+		})();
+		return () => {
+			annule = true;
+		};
+	});
+
+	const lienContribution = $derived(
+		`https://fr.wikipedia.org/w/index.php?search=${encodeURIComponent(nom)}&title=Sp%C3%A9cial:Recherche`
+	);
+	const lienWikidata = $derived(`https://www.wikidata.org/wiki/${wikidataId}`);
+</script>
+
+{#if wiki === undefined}
+	<div class="panneau chargement">
+		<p>{t().explorer.chargerFiche}</p>
+	</div>
+{:else if wiki}
+	<!-- Cas A : fiche Wikipédia existante -->
+	<article class="panneau cas-a">
+		<h2>
+			<a href={wiki.url} target="_blank" rel="noopener noreferrer">{wiki.title}</a>
+		</h2>
+		{#if tonPositif || tonNeutre}
+			<p class="ton">{tonPositif ?? tonNeutre}</p>
+		{/if}
+		{#if wiki.thumbnail}
+			<img src={wiki.thumbnail} alt="" loading="lazy" decoding="async" />
+		{/if}
+		<p class="extrait">{wiki.extract}</p>
+		<a class="lien-wiki" href={wiki.url} target="_blank" rel="noopener noreferrer">
+			{t().resultat.lireWiki} ↗
+		</a>
+	</article>
+{:else if sansFrwiki}
+	<!-- Variante Cas B : fiche Wikidata OK mais pas d'article FR — appel à traduire/créer -->
+	<article class="panneau cas-b">
+		<h2><span class="icone" aria-hidden="true">◌</span> {t().lacuneFr.titre}</h2>
+		<p class="texte">{t().lacuneFr.texte}</p>
+		<div class="ctas">
+			<a class="btn btn-cta" href={lienContribution} target="_blank" rel="noopener noreferrer">
+				{t().lacuneFr.cta} ↗
+			</a>
+			<a class="lien-wikidata" href={lienWikidata} target="_blank" rel="noopener noreferrer">
+				{t().lacuneFr.ctaWikidata} ↗
+			</a>
+		</div>
+	</article>
+{:else}
+	<!-- Cas B : lacune documentaire — panneau volontairement distinct (Peak-End) -->
+	<article class="panneau cas-b">
+		<h2><span class="icone" aria-hidden="true">◌</span> {t().lacune.titre}</h2>
+		<p class="texte">{t().lacune.texte}</p>
+		<a class="btn btn-cta" href={lienContribution} target="_blank" rel="noopener noreferrer">
+			{t().lacune.cta} ↗
+		</a>
+		<p class="guide">
+			{t().lacune.guide}
+			<a href="https://fr.wikipedia.org/wiki/Aide:Premiers_pas" target="_blank" rel="noopener noreferrer">
+				{t().lacune.guideLien} ↗
+			</a>
+		</p>
+	</article>
+{/if}
+
+<style>
+	.panneau {
+		border-radius: var(--radius-md);
+		padding: 1.1rem 1.25rem;
+		box-shadow: var(--oki-ombre);
+	}
+
+	.chargement {
+		background: var(--noir-profond);
+		color: var(--muted);
+		text-align: center;
+		border: 1px solid var(--line);
+	}
+
+	/* Cas A : fiche existante — liseré vert OKI */
+	.cas-a {
+		background: var(--card-bg);
+		border: 1px solid var(--line);
+		border-left: 4px solid var(--vert-oki);
+		color: var(--blanc-creme);
+	}
+
+	.cas-a h2 {
+		margin: 0 0 0.3rem;
+		font-size: 1.25rem;
+	}
+
+	.cas-a h2 a {
+		color: var(--blanc-creme);
+		text-decoration: none;
+	}
+
+	.cas-a h2 a:hover {
+		color: var(--or-oki);
+		text-decoration: underline;
+	}
+
+	.cas-a .ton {
+		margin: 0 0 0.6rem;
+		font-weight: 600;
+		color: var(--vert-oki);
+		font-size: 0.9rem;
+	}
+
+	.cas-a img {
+		float: right;
+		width: 96px;
+		height: auto;
+		margin: 0 0 0.5rem 0.8rem;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--line);
+	}
+
+	.cas-a .extrait {
+		margin: 0 0 0.6rem;
+		line-height: 1.55;
+		color: var(--blanc-creme);
+	}
+
+	.lien-wiki {
+		color: var(--or-oki);
+		font-weight: 700;
+		text-decoration: none;
+		display: inline-block;
+		margin-top: 0.3rem;
+	}
+
+	.lien-wiki:hover {
+		text-decoration: underline;
+	}
+
+	/* Cas B : lacune documentaire — liseré or OKI, teinte distincte */
+	.cas-b {
+		background: var(--oki-lacune-fond);
+		border: 1.5px solid var(--or-oki);
+		border-left: 5px solid var(--or-oki);
+		color: var(--blanc-creme);
+	}
+
+	.cas-b h2 {
+		margin: 0 0 0.5rem;
+		font-size: 1.25rem;
+		color: var(--or-oki);
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.cas-b .icone {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.6rem;
+		height: 1.6rem;
+		border: 2px dashed var(--or-oki);
+		border-radius: 50%;
+		font-size: 1rem;
+		color: var(--or-oki);
+	}
+
+	.cas-b .texte {
+		margin: 0 0 0.9rem;
+		font-size: 0.98rem;
+		line-height: 1.55;
+		color: var(--blanc-creme);
+	}
+
+	.btn-cta {
+		background: var(--or-oki);
+		color: #0d0d0d;
+		font-weight: 700;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		padding: 0.65rem 1.1rem;
+		border-radius: var(--radius-sm);
+		text-decoration: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+
+	:global(html.light-theme) .btn-cta {
+		color: #ffffff;
+	}
+
+	.btn-cta:hover {
+		background: var(--or-clair);
+	}
+
+	.ctas {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 0.9rem;
+	}
+
+	.lien-wikidata {
+		color: var(--or-oki);
+		font-weight: 650;
+		text-decoration: none;
+	}
+
+	.lien-wikidata:hover {
+		text-decoration: underline;
+	}
+
+	.guide {
+		margin: 0.8rem 0 0;
+		font-size: 0.88rem;
+		color: var(--muted);
+	}
+
+	.guide a {
+		color: var(--or-oki);
+		font-weight: 600;
+		text-decoration: none;
+	}
+
+	.guide a:hover {
+		text-decoration: underline;
+	}
+</style>

app/src/lib/i18n/fr.ts

@@ -0,0 +1,160 @@
+const fr = {
+	app: {
+		titre: 'JWE',
+		sousTitre: 'Jeu de géolocalisation souverain — Guadeloupe, Martinique, Guyane, La Réunion'
+	},
+	regions: {
+		GUADELOUPE: 'Guadeloupe',
+		MARTINIQUE: 'Martinique',
+		GUYANE: 'Guyane',
+		REUNION: 'La Réunion',
+		TOUTES: 'Toutes les régions'
+	},
+	modes: {
+		monument: 'Konnèt moniman',
+		monumentDesc: 'Reconnais le monument photographié et place-le sur la carte.',
+		lieu: 'Kote mwen ye ?',
+		lieuDesc: 'Une rue, un bord de mer, une forêt… devine où tu es.',
+		defi: 'Défi 5 rounds',
+		defiDesc: '5 lieux d’affilée, monuments et lieux mélangés.',
+		street: 'An lari a',
+		streetDesc: 'Navigue dans une rue en photo 360° et devine la commune.',
+		explorer: 'Aprann',
+		explorerDesc: 'Explore la carte librement et lis les fiches Wikipédia. Sans score.'
+	},
+	accueil: {
+		choixRegion: 'Choisis ta région',
+		choixMode: 'Choisis ton mode',
+		options: 'Options',
+		timer: 'Minuteur (60 s, bonus de score)',
+		jouer: 'Jouer',
+		creerLienDefi: 'Créer un lien de défi'
+	},
+	jeu: {
+		charger: 'Chargement du lieu…',
+		erreur: 'Impossible de charger un lieu. Réessaie.',
+		reessayer: 'Réessayer',
+		valider: 'Valider ma position',
+		passer: 'Passer',
+		indice: 'Indice',
+		indicePenalite: '−10 % de score',
+		indiceRestant: 'indice restant',
+		indicesRestants: 'indices restants',
+		plusDIndice: 'Plus d’indice disponible',
+		poserMarqueur: 'Clique sur la carte pour placer ton marqueur',
+		streetChargement: 'Chargement de la vue de rue…',
+		streetErreur: 'Impossible de charger la photo Mapillary. Réessaie ou passe au lieu suivant.',
+		streetToken: 'Visionneuse indisponible : configuration Mapillary manquante.',
+		streetAriaLabel: 'Vue de rue interactive. Flèches pour avancer, glisser pour regarder autour.',
+		round: 'Manche',
+		sur: 'sur',
+		difficulte: {
+			FACILE: 'Facile',
+			MOYEN: 'Moyen',
+			DIFFICILE: 'Difficile',
+			EXPERT: 'Expert'
+		}
+	},
+	resultat: {
+		points: 'points',
+		distance: 'Distance',
+		km: 'km',
+		trouve: 'Tu as trouvé ! Apprends-en plus sur ce lieu.',
+		aDecouvrir: 'Le lieu était ici. Apprends-en plus sur lui.',
+		lireWiki: 'Lire la suite sur Wikipédia',
+		rayonScore: 'Rayon de notation',
+		commune: 'Commune',
+		region: 'Région',
+		suivant: 'Lieu suivant',
+		voirBilan: 'Voir le bilan',
+		rejouer: 'Rejouer',
+		retourAccueil: 'Retour à l’accueil'
+	},
+	lacune: {
+		titre: 'Pwen blindé — Sa pa dokimanté',
+		texte:
+			'Ce lieu existe, mais il n’a pas de page sur Wikipédia ni de fiche sur Wikidata. Pour nos régions, c’est un enjeu majeur : si nous ne documentons pas nos propres territoires, notre histoire et notre géographie disparaissent des cartes numériques et des bases de données mondiales (qui alimentent même l’intelligence artificielle).',
+		cta: 'Kontribyé sou Wikipédia',
+		guide: 'Besoin d’aide pour démarrer ? Suis le guide OKI « Comment contribuer à Wikipédia ».',
+		guideLien: 'Ouvrir le guide de contribution'
+	},
+	lacuneFr: {
+		titre: 'Pas encore d’article en français',
+		texte:
+			'La fiche Wikidata de ce lieu existe, mais personne n’a encore écrit l’article Wikipédia en français. Tu peux le traduire ou le créer : chaque article compte pour que nos territoires existent dans l’encyclopédie francophone.',
+		cta: 'Traduire ou créer l’article',
+		ctaWikidata: 'Voir la fiche Wikidata'
+	},
+	defi: {
+		bilan: 'Bilan du défi',
+		scoreTotal: 'Score total',
+		partager: 'Partager',
+		telecharger: 'Télécharger l’image',
+		taPosition: 'Ta position',
+		positionReelle: 'Position réelle',
+		titreSeed: 'Défi — seed',
+		copierLien: 'Copier le lien du défi',
+		lienCopie: 'Lien copié !'
+	},
+	explorer: {
+		titre: 'Aprann — Explorer',
+		filtrer: 'Filtrer par région',
+		chargerFiche: 'Chargement de la fiche…',
+		aucuneFiche: 'Sélectionne un marqueur sur la carte.',
+		fermer: 'Fermer le panneau'
+	},
+	carte: {
+		ariaLabel: 'Carte de jeu. Flèches pour déplacer le marqueur, Entrée pour valider.',
+		sautRegion: 'Aller à la région',
+		zoomIn: 'Zoomer',
+		zoomOut: 'Dézoomer',
+		carteRegionsLabel: 'Carte des quatre régions : Guadeloupe, Martinique, Guyane, La Réunion'
+	},
+	theme: {
+		passerClair: 'Passer au thème clair',
+		passerSombre: 'Passer au thème sombre'
+	},
+	commandBar: {
+		titre: 'Palette d’intentions et de commandes',
+		placeholder: 'Tape une action, un mode, une région (ex. Guadeloupe, Défi, Thème)…',
+		aucunResultat: 'Aucune action trouvée pour',
+		catModes: 'Modes de jeu',
+		catRegions: 'Régions',
+		catActions: 'Actions rapides',
+		mesStats: 'Mes statistiques locales',
+		basculerTheme: 'Changer de thème (Sombre / Clair)',
+		basculerLangue: 'Changer de langue (FR / Kréyòl)',
+		raccourci: 'Ouvrir la palette d’intentions (Ctrl+K)'
+	},
+	stats: {
+		titre: 'Mes statistiques locales',
+		sousTitre: 'Données stockées uniquement sur ton appareil (100% privé & souverain)',
+		fermer: 'Fermer la fenêtre des statistiques',
+		partiesJouees: 'Parties jouées',
+		meilleurScore: 'Meilleur score',
+		scoreMoyen: 'Score moyen',
+		lieuxDecouverts: 'Lieux découverts',
+		parRegion: 'Précision par territoire',
+		aucunePartie: 'Aucune manche jouée',
+		dernieresParties: 'Dernières parties',
+		exporterJson: 'Exporter mes données (JSON)',
+		effacerDonnees: 'Effacer l’historique local',
+		confirmerEffacer: 'Confirmer la suppression'
+	},
+	footer: {
+		texteFederation: 'Un service libre & souverain opéré par ORGANISATION KA INTERNATIONALE',
+		mentionLibre: 'Code sous licence MIT · Données libres OpenStreetMap & Wikipédia',
+		donner: 'Soutenir sur Liberapay'
+	},
+	micro: {
+		bravo: 'Bravo !',
+		kiteSaYe: 'Kité sa ye ?'
+	},
+	langue: {
+		fr: 'Français',
+		gcf: 'Kreyòl'
+	}
+};
+
+export default fr;
+export type Dict = typeof fr;

app/src/lib/i18n/gcf.ts

@@ -0,0 +1,161 @@
+import type { Dict } from './fr';
+
+const gcf: Dict = {
+	app: {
+		titre: 'JWE',
+		sousTitre: 'Jwé jéyolokalizasyon — Gwadloup, Matinik, Giyan, Léryinyon'
+	},
+	regions: {
+		GUADELOUPE: 'Gwadloup',
+		MARTINIQUE: 'Matinik',
+		GUYANE: 'Giyan',
+		REUNION: 'Léryinyon',
+		TOUTES: 'Tout sé péyi-la'
+	},
+	modes: {
+		monument: 'Konnèt moniman',
+		monumentDesc: 'Rikonnèt moniman-la asou foto-a é mété-y asou kat-la.',
+		lieu: 'Kote mwen ye ?',
+		lieuDesc: 'On lari, on bò lanmè, on gwo bwa… touvé koté ou yé.',
+		defi: 'Défi 5 rounds',
+		defiDesc: '5 koté yonn dèyè lòt, moniman éti koté mélanjé.',
+		street: 'An lari a',
+		streetDesc: 'Mawonné an lari an 360° é touvé komin-la.',
+		explorer: 'Aprann',
+		explorerDesc: 'Flanné asou kat-la san pwen, li sé fich Wikipédia-la.'
+	},
+	accueil: {
+		choixRegion: 'Chwazi péyi a-w',
+		choixMode: 'Chwazi jwé a-w',
+		options: 'Chwa',
+		timer: 'Lidékont (60 s, pwen an plis)',
+		jouer: 'Jwé',
+		creerLienDefi: 'Fè on lyen défi'
+	},
+	jeu: {
+		charger: 'Nou ka chajé koté-la…',
+		erreur: 'Pa té pé chajé koté-la. Risiye.',
+		reessayer: 'Risiye ankò',
+		valider: 'Validé koté an yé',
+		passer: 'Pasé',
+		indice: 'Endis',
+		indicePenalite: '−10 % pwen',
+		indiceRestant: 'endis ki rété',
+		indicesRestants: 'endis ki rété',
+		plusDIndice: 'Pa rété endis ankò',
+		poserMarqueur: 'Kwiké asou kat-la pou mété makò a-w',
+		streetChargement: 'Nou ka chajé lari-a…',
+		streetErreur: 'Pa té pé chajé foto Mapillary-la. Risiye oben pasé a lòt koté-la.',
+		streetToken: 'Vizyonnèz pa disponib : mank konfigirasyon Mapillary.',
+		streetAriaLabel: 'Lari entèraktif. Flèch yo pou vansé, glisé pou gadé alantou.',
+		round: 'Manch',
+		sur: 'asou',
+		difficulte: {
+			FACILE: 'Fasil',
+			MOYEN: 'Mwayen',
+			DIFFICILE: 'Rèd',
+			EXPERT: 'Mèt-a-manman'
+		}
+	},
+	resultat: {
+		points: 'pwen',
+		distance: 'Distans',
+		km: 'km',
+		trouve: 'Ou touvé ! Vin aprann plis asou koté-lasa.',
+		aDecouvrir: 'Koté-la té la. Vin aprann plis asou-y.',
+		lireWiki: 'Li rès-la asou Wikipédia',
+		rayonScore: 'Riyon pou pwen',
+		commune: 'Komin',
+		region: 'Péyi',
+		suivant: 'Koté ki ka vin',
+		voirBilan: 'Gadé rézilta',
+		rejouer: 'Jwé ankò',
+		retourAccueil: 'Viré an lakou'
+	},
+	lacune: {
+		titre: 'Pwen blindé — Sa pa dokimanté',
+		texte:
+			'Koté-lasa la pou vré, men i pa ni paj asou Wikipédia ni fich asou Wikidata. Pou péyi an nou, sé on gwo zafè : si nou menm pa ka dokimanté tè an nou, listwa é jéyografi an nou ka disparèt adan kat nimerik é bazdédòn oliwon latè (jis entélijans artifisyèl pa ké konnèt nou).',
+		cta: 'Kontribyé sou Wikipédia',
+		guide: 'Ou bizwen on koudmen pou koumansé ? Gadé gid OKI « Kijan pou mété zafè asou Wikipédia ».',
+		guideLien: 'Wouvè gid pou kontribiyé'
+	},
+	lacuneFr: {
+		titre: 'Pa nyen an fransé pou konnyé-la',
+		texte:
+			'Fich Wikidata a koté-lasa la, men pèsonn pòkò maké atik Wikipédia an fransé. Ou pé tradwi-y oben kréyé-y : chak atik ni valè pou péyi an nou égzisté adan lansiklopédi-la.',
+		cta: 'Tradwi oben fè atik-la',
+		ctaWikidata: 'Gadé fich Wikidata-la'
+	},
+	defi: {
+		bilan: 'Bilan défi-a',
+		scoreTotal: 'Total pwen',
+		partager: 'Palé di moun',
+		telecharger: 'Téléchajé foto-a',
+		taPosition: 'Pozisyon ou',
+		positionReelle: 'Rèl pozisyon-an',
+		titreSeed: 'Défi — seed',
+		copierLien: 'Kopié lyen défi-a',
+		lienCopie: 'Lyen kopié !'
+	},
+	explorer: {
+		titre: 'Aprann — Flanné',
+		filtrer: 'Triyé pa péyi',
+		chargerFiche: 'Nou ka chajé fich-la…',
+		aucuneFiche: 'Kwiké asou on makò asou kat-la.',
+		fermer: 'Fèmé pano-a'
+	},
+	carte: {
+		ariaLabel: 'Kat jwé-a. Flèch yo pou déplasé makò-a, Antré pou validé.',
+		sautRegion: 'Alé o péyi',
+		zoomIn: 'Zoumé',
+		zoomOut: 'Dézoumé',
+		carteRegionsLabel: 'Kat 4 péyi yo : Gwadloup, Matinik, Giyan, Léryinyon'
+	},
+	theme: {
+		passerClair: 'Mété tèm klè',
+		passerSombre: 'Mété tèm nwè'
+	},
+	commandBar: {
+		titre: 'Palèt lentansyon é komann',
+		placeholder: 'Mété on aksyon, on mòd, on péyi (egz. Gwadloup, Défi, Tèm)…',
+		aucunResultat: 'Pa ni ayen pou',
+		catModes: 'Mòd jwé',
+		catRegions: 'Péyi yo',
+		catActions: 'Aksyon vitman',
+		mesStats: 'Estatistik lokal an mwen',
+		basculerTheme: 'Chanje tèm (Nwè / Klè)',
+		basculerLangue: 'Chanje lang (Fransé / Kréyòl)',
+		raccourci: 'Wouvè palèt-la (Ctrl+K)'
+	},
+	stats: {
+		titre: 'Estatistik lokal an mwen',
+		sousTitre: 'Dòn rété anlè zouti a-w sèlman (100% privé é souvren)',
+		fermer: 'Fèmé fénèt estatistik',
+		partiesJouees: 'Pati jwé',
+		meilleurScore: 'Mèyè nòt',
+		scoreMoyen: 'Nòt mwayen',
+		lieuxDecouverts: 'Koté ou wè',
+		parRegion: 'Prézizyon pa péyi',
+		aucunePartie: 'Pòkò ni manch',
+		dernieresParties: 'Dènyé pati yo',
+		exporterJson: 'Èspòté dòn an mwen (JSON)',
+		effacerDonnees: 'Fasi dòn lokal',
+		confirmerEffacer: 'Konfirmé siprésyon'
+	},
+	footer: {
+		texteFederation: 'On sèvis lib é souvren ki fèt pa ORGANISATION KA INTERNATIONALE',
+		mentionLibre: 'Kòd anba lisans MIT · Dòn lib OpenStreetMap & Wikipédia',
+		donner: 'Pòté an koudmen asou Liberapay'
+	},
+	micro: {
+		bravo: 'Bravo !',
+		kiteSaYe: 'Kité sa ye ?'
+	},
+	langue: {
+		fr: 'Français',
+		gcf: 'Kreyòl'
+	}
+};
+
+export default gcf;

app/src/lib/i18n/store.svelte.ts

@@ -0,0 +1,38 @@
+import { browser } from '$app/environment';
+import fr, { type Dict } from './fr';
+import gcf from './gcf';
+
+export type Lang = 'fr' | 'gcf';
+
+const dicts: Record<Lang, Dict> = { fr, gcf };
+const STORAGE_KEY = 'jwe-lang';
+
+let lang = $state<Lang>('fr');
+
+/** Dictionnaire courant — fonction réactive : lit le `$state`, donc les templates se mettent à jour. */
+export function t(): Dict {
+	return dicts[lang];
+}
+
+export function getLang(): Lang {
+	return lang;
+}
+
+export function setLang(next: Lang): void {
+	lang = next;
+	if (browser) {
+		localStorage.setItem(STORAGE_KEY, next);
+		document.documentElement.lang = next;
+	}
+}
+
+/** À appeler une fois au montage du layout : restaure la langue persistée. */
+export function initLang(): void {
+	if (!browser) return;
+	const saved = localStorage.getItem(STORAGE_KEY);
+	if (saved === 'fr' || saved === 'gcf') {
+		setLang(saved);
+	} else {
+		document.documentElement.lang = lang;
+	}
+}

app/src/lib/map/regions.ts

@@ -0,0 +1,16 @@
+import type { Region } from '$lib/types';
+
+/** Bornes de chaque région : [lonOuest, latSud, lonEst, latNord]. */
+export const REGION_BOUNDS: Record<Region, [number, number, number, number]> = {
+	GUADELOUPE: [-61.9, 15.8, -60.95, 16.55],
+	MARTINIQUE: [-61.25, 14.35, -60.75, 14.95],
+	GUYANE: [-54.7, 1.9, -51.5, 6.0],
+	REUNION: [55.15, -21.42, 55.9, -20.82]
+};
+
+/** Enveloppe union des 4 régions (≈ lon −63…57, lat −23…18) : interdit de sortir du terrain de jeu. */
+export const MAX_BOUNDS: [number, number, number, number] = [-63, -23, 57, 18];
+
+export const MIN_ZOOM = 4;
+
+export const REGIONS: Region[] = ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'];

app/src/lib/motion/countup.ts

@@ -0,0 +1,56 @@
+import { dureeMs, easeSyncope, prefersReducedMotion } from './tokens';
+
+/**
+ * Action `use:compte={cible}` — count-up de 0 (ou de la valeur précédente)
+ * vers la cible, en `--dur-compte` avec easing syncopé. L'écriture se fait
+ * directement dans le DOM via rAF : jamais d'état réactif par frame.
+ *
+ * Reduced-motion : la valeur finale est écrite immédiatement. Le markup doit
+ * contenir la valeur finale (état SSR / premier rendu) et être doublé d'un
+ * équivalent non animé pour les lecteurs d'écran (le span animé porte
+ * aria-hidden="true" chez l'appelant).
+ */
+export function compte(node: HTMLElement, cible: number) {
+	let raf: number | null = null;
+	let affiche = 0;
+
+	function ecrire(valeur: number): void {
+		affiche = valeur;
+		node.textContent = String(valeur);
+	}
+
+	function jouer(vers: number): void {
+		if (raf !== null) {
+			cancelAnimationFrame(raf);
+			raf = null;
+		}
+		const depuis = affiche;
+		const duree = dureeMs('--dur-compte');
+		if (prefersReducedMotion() || vers === depuis || duree <= 0) {
+			ecrire(vers);
+			return;
+		}
+		const t0 = performance.now();
+		const tick = (t: number): void => {
+			const p = Math.min(1, (t - t0) / duree);
+			ecrire(Math.round(depuis + (vers - depuis) * easeSyncope(p)));
+			if (p < 1) {
+				raf = requestAnimationFrame(tick);
+			} else {
+				raf = null;
+			}
+		};
+		raf = requestAnimationFrame(tick);
+	}
+
+	jouer(cible);
+
+	return {
+		update(nouvelleCible: number) {
+			jouer(nouvelleCible);
+		},
+		destroy() {
+			if (raf !== null) cancelAnimationFrame(raf);
+		}
+	};
+}

app/src/lib/motion/reveal.ts

@@ -0,0 +1,44 @@
+/**
+ * Action `use:reveal` — ajoute la classe `in` à l'entrée dans le viewport.
+ *
+ * Variante SSR de la brique o-k-i.net : l'état caché initial est rendu côté
+ * serveur (`data-reveal` + `--d` directement dans le markup), et n'est actif
+ * que sous `html.js` (classe posée par le script de app.html) ET
+ * `prefers-reduced-motion: no-preference` (media query dans oki.css). Sans JS
+ * ou en reduced-motion, le contenu est intégralement visible.
+ *
+ * @param actif false = pas d'observation (ex. CarteRegions sans cascade)
+ */
+export function reveal(node: Element, actif: boolean = true) {
+	let observer: IntersectionObserver | null = null;
+
+	function observerNoeud(actifCourant: boolean): void {
+		observer?.disconnect();
+		observer = null;
+		if (!actifCourant) return;
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						node.classList.add('in');
+						observer?.disconnect();
+						observer = null;
+					}
+				}
+			},
+			{ threshold: 0.15, rootMargin: '0px 0px -5% 0px' }
+		);
+		observer.observe(node);
+	}
+
+	observerNoeud(actif);
+
+	return {
+		update(nouvelActif: boolean) {
+			observerNoeud(nouvelActif);
+		},
+		destroy() {
+			observer?.disconnect();
+		}
+	};
+}

app/src/lib/motion/tokens.ts

@@ -0,0 +1,42 @@
+import { browser } from '$app/environment';
+
+/** Gate unique prefers-reduced-motion (playbook §6). */
+export function prefersReducedMotion(): boolean {
+	return browser && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Stagger syncopé de marque OKI (3+3+2) — charte §3.
+ * Délais en ms pour l'index donné (cycle de 8 éléments).
+ */
+const SYNCOPATED_DELAYS = [0, 120, 300, 360, 600, 660, 900, 960];
+
+export function syncopatedDelay(index: number): number {
+	const cycle = Math.floor(index / 8);
+	return SYNCOPATED_DELAYS[index % 8] + cycle * 1200;
+}
+
+/**
+ * Lit une durée depuis les tokens CSS de oki.css (--dur-*) — les valeurs ne
+ * sont jamais dupliquées côté appelant. Client uniquement (les transitions
+ * Svelte et les rAF ne courent de toute façon pas côté serveur).
+ * Retourne 0 si le token est absent : l'animation se replie alors en
+ * application immédiate, sans valeur de secours hardcodée.
+ */
+export function dureeMs(nom: string): number {
+	if (!browser) return 0;
+	const brut = getComputedStyle(document.documentElement).getPropertyValue(nom).trim();
+	if (brut.endsWith('ms')) return Number.parseFloat(brut) || 0;
+	if (brut.endsWith('s')) return (Number.parseFloat(brut) || 0) * 1000;
+	return 0;
+}
+
+/** cubic-bezier(0.22, 1, 0.36, 1) — --ease-ka : attaque franche, longue tenue. */
+export function easeKa(x: number): number {
+	return 1 - Math.pow(1 - x, 5);
+}
+
+/** cubic-bezier(0.65, 0, 0.35, 1) — --ease-syncope : symétrique, urgent. */
+export function easeSyncope(x: number): number {
+	return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}

app/src/lib/motion/transitions.ts

@@ -0,0 +1,20 @@
+import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
+import { dureeMs, prefersReducedMotion } from './tokens';
+
+/**
+ * Transitions d'état du jeu — enrobent les transitions natives Svelte avec :
+ * 1. des durées lues depuis les tokens CSS (--dur-*, jamais dupliquées) ;
+ * 2. la gate prefers-reduced-motion (durée 0 → état final immédiat).
+ */
+
+/** Fondu simple à la durée `--dur-mesure`. */
+export function fonduMesure(node: Element, params: FadeParams = {}) {
+	if (prefersReducedMotion()) return fade(node, { ...params, duration: 0 });
+	return fade(node, { duration: dureeMs('--dur-mesure'), ...params });
+}
+
+/** Montée courte (translateY + fondu) à la durée `--dur-mesure`. */
+export function monteeMesure(node: Element, params: FlyParams = {}) {
+	if (prefersReducedMotion()) return fly(node, { ...params, duration: 0, y: 0 });
+	return fly(node, { duration: dureeMs('--dur-mesure'), y: 14, ...params });
+}

app/src/lib/partage.ts

@@ -0,0 +1,61 @@
+import { t } from '$lib/i18n/store.svelte';
+import { defi } from '$lib/stores/defi.svelte';
+
+/** Génère une image canvas téléchargeable : score total + manches du défi. */
+export function partager(): void {
+	const canvas = document.createElement('canvas');
+	canvas.width = 1080;
+	canvas.height = 1080;
+	const ctx = canvas.getContext('2d');
+	if (!ctx) return;
+
+	// Fond sable + bandeau vert profond
+	ctx.fillStyle = '#f5efe2';
+	ctx.fillRect(0, 0, 1080, 1080);
+	ctx.fillStyle = '#0b3d2e';
+	ctx.fillRect(0, 0, 1080, 240);
+
+	ctx.fillStyle = '#fffdf8';
+	ctx.textAlign = 'center';
+	ctx.font = '800 96px system-ui, sans-serif';
+	ctx.fillText('JWE', 540, 130);
+	ctx.font = '600 44px system-ui, sans-serif';
+	ctx.fillText(t().modes.defi, 540, 200);
+
+	// Score total
+	ctx.fillStyle = '#0b3d2e';
+	ctx.font = '800 150px system-ui, sans-serif';
+	ctx.fillText(`${defi.total}`, 540, 420);
+	ctx.fillStyle = '#5a6b62';
+	ctx.font = '500 40px system-ui, sans-serif';
+	ctx.fillText(t().defi.scoreTotal, 540, 480);
+
+	// Manches : lieu, région, score
+	let y = 580;
+	for (const [i, m] of defi.manches.entries()) {
+		ctx.fillStyle = i % 2 === 0 ? '#e3efe7' : '#f5efe2';
+		ctx.fillRect(90, y - 44, 900, 74);
+		ctx.fillStyle = '#22302a';
+		ctx.textAlign = 'left';
+		ctx.font = '600 34px system-ui, sans-serif';
+		ctx.fillText(`${i + 1}. ${m.result.nom}`, 120, y);
+		ctx.fillStyle = '#17624a';
+		ctx.font = '500 30px system-ui, sans-serif';
+		ctx.fillText(t().regions[m.result.region], 120, y + 34);
+		ctx.textAlign = 'right';
+		ctx.fillStyle = '#0b3d2e';
+		ctx.font = '800 40px system-ui, sans-serif';
+		ctx.fillText(`${m.result.score}`, 960, y + 8);
+		y += 92;
+	}
+
+	ctx.fillStyle = '#5a6b62';
+	ctx.textAlign = 'center';
+	ctx.font = '500 30px system-ui, sans-serif';
+	ctx.fillText('labola.o-k-i.net', 540, 1010);
+
+	const a = document.createElement('a');
+	a.href = canvas.toDataURL('image/png');
+	a.download = 'jwe-defi.png';
+	a.click();
+}

app/src/lib/server/data/street.json

@@ -0,0 +1,602 @@
+[
+  {
+    "id": "st-01",
+    "nom": "Rue Laurence Valmy, Pointe-à-Pitre",
+    "nom_creole": "Lari Pointe-à-Pitre",
+    "region": "GUADELOUPE",
+    "commune": "Pointe-à-Pitre",
+    "coordonnees": {
+      "lat": 16.244455939903,
+      "lon": -61.530342688698
+    },
+    "difficulte": "MOYEN",
+    "mapillary_id": "2941939632687980",
+    "credit": {
+      "username": "cartophyl",
+      "captured_at": "2015-07-07"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q335322",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île papillon, aile droite"
+      },
+      {
+        "niveau": 2,
+        "texte": "Port de commerce principal de l’archipel"
+      }
+    ],
+    "aire_commune_km2": 2.78
+  },
+  {
+    "id": "st-02",
+    "nom": "Rue Achille René Boisneuf, Les Abymes",
+    "nom_creole": "Lari Les Abymes",
+    "region": "GUADELOUPE",
+    "commune": "Les Abymes",
+    "coordonnees": {
+      "lat": 16.269078645766,
+      "lon": -61.506631441162
+    },
+    "difficulte": "MOYEN",
+    "mapillary_id": "306781020957650",
+    "credit": {
+      "username": "ratzillas",
+      "captured_at": "2015-07-17"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q13636",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île papillon, aile droite"
+      },
+      {
+        "niveau": 2,
+        "texte": "Commune la plus peuplée de l’archipel"
+      }
+    ],
+    "aire_commune_km2": 70.43
+  },
+  {
+    "id": "st-03",
+    "nom": "Place Renovation le Bourg, Le Gosier",
+    "nom_creole": "Lari Le Gosier",
+    "region": "GUADELOUPE",
+    "commune": "Le Gosier",
+    "coordonnees": {
+      "lat": 16.205608856053,
+      "lon": -61.492154911837
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "919062132219342",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2016-01-02"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q918874",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île papillon, aile droite"
+      },
+      {
+        "niveau": 2,
+        "texte": "Station balnéaire au sud de la Grande-Terre"
+      }
+    ],
+    "aire_commune_km2": 45.75
+  },
+  {
+    "id": "st-04",
+    "nom": "Rue Emmanuel Robinet, Sainte-Anne",
+    "nom_creole": "Lari Sainte-Anne",
+    "region": "GUADELOUPE",
+    "commune": "Sainte-Anne",
+    "coordonnees": {
+      "lat": 16.223896372356,
+      "lon": -61.384172350192
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "956408765176680",
+    "credit": {
+      "username": "ratzillas",
+      "captured_at": "2019-07-15"
+    },
+    "is_pano": true,
+    "wikidata_id": "Q386243",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île papillon, aile droite"
+      },
+      {
+        "niveau": 2,
+        "texte": "Plages au sud de la Grande-Terre"
+      }
+    ],
+    "aire_commune_km2": 80.96
+  },
+  {
+    "id": "st-05",
+    "nom": "Route des Esclaves, Basse-Terre",
+    "nom_creole": "Lari Basse-Terre",
+    "region": "GUADELOUPE",
+    "commune": "Basse-Terre",
+    "coordonnees": {
+      "lat": 15.992959593433,
+      "lon": -61.730437544596
+    },
+    "difficulte": "EXPERT",
+    "mapillary_id": "212605717097536",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2016-01-04"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q167024",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île papillon, aile gauche"
+      },
+      {
+        "niveau": 2,
+        "texte": "Chef-lieu au pied du volcan"
+      }
+    ],
+    "aire_commune_km2": 4.5
+  },
+  {
+    "id": "st-06",
+    "nom": "Rue Victor Sévère, Fort-de-France",
+    "nom_creole": "Lari Fort-de-France",
+    "region": "MARTINIQUE",
+    "commune": "Fort-de-France",
+    "coordonnees": {
+      "lat": 14.60615582786,
+      "lon": -61.069885806689
+    },
+    "difficulte": "MOYEN",
+    "mapillary_id": "152801196814796",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2015-12-31"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q81621",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île aux fleurs"
+      },
+      {
+        "niveau": 2,
+        "texte": "Chef-lieu, sur une grande baie"
+      }
+    ],
+    "aire_commune_km2": 44.04
+  },
+  {
+    "id": "st-07",
+    "nom": "Rue des Barrières, Le Lamentin",
+    "nom_creole": "Lari Le Lamentin",
+    "region": "MARTINIQUE",
+    "commune": "Le Lamentin",
+    "coordonnees": {
+      "lat": 14.615969225175,
+      "lon": -60.999773265489
+    },
+    "difficulte": "MOYEN",
+    "mapillary_id": "1120779875836768",
+    "credit": {
+      "username": "Caramel",
+      "captured_at": "2024-04-29"
+    },
+    "is_pano": true,
+    "wikidata_id": "Q947069",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île aux fleurs"
+      },
+      {
+        "niveau": 2,
+        "texte": "Banlieue du chef-lieu, zone aéroportuaire"
+      }
+    ],
+    "aire_commune_km2": 62.73
+  },
+  {
+    "id": "st-08",
+    "nom": "Rue Gabriel Péri, Saint-Pierre",
+    "nom_creole": "Lari Saint-Pierre",
+    "region": "MARTINIQUE",
+    "commune": "Saint-Pierre",
+    "coordonnees": {
+      "lat": 14.738699893002,
+      "lon": -61.176412948112
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "1299527321706804",
+    "credit": {
+      "username": "jeremylavarenne",
+      "captured_at": "2025-08-31"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q589980",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île aux fleurs, côte caraïbe nord"
+      },
+      {
+        "niveau": 2,
+        "texte": "Ville détruite par une éruption en 1902"
+      }
+    ],
+    "aire_commune_km2": 38.69
+  },
+  {
+    "id": "st-09",
+    "nom": "Rue Florent Holo, Le François",
+    "nom_creole": "Lari Le François",
+    "region": "MARTINIQUE",
+    "commune": "Le François",
+    "coordonnees": {
+      "lat": 14.615696752255,
+      "lon": -60.902520891662
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "4102521129805870",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2016-01-01"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q282944",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île aux fleurs, côte atlantique"
+      },
+      {
+        "niveau": 2,
+        "texte": "Bourg face aux îlets du sud"
+      }
+    ],
+    "aire_commune_km2": 54.43
+  },
+  {
+    "id": "st-10",
+    "nom": "Passage des Fleurs, Sainte-Marie",
+    "nom_creole": "Lari Sainte-Marie",
+    "region": "MARTINIQUE",
+    "commune": "Sainte-Marie",
+    "coordonnees": {
+      "lat": 14.783766654906,
+      "lon": -60.995666311379
+    },
+    "difficulte": "EXPERT",
+    "mapillary_id": "131479329019761",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2015-12-31"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q1758414",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île aux fleurs, côte atlantique nord"
+      },
+      {
+        "niveau": 2,
+        "texte": "Musée de la banane et rhum"
+      }
+    ],
+    "aire_commune_km2": 44.65
+  },
+  {
+    "id": "st-11",
+    "nom": "Rue Francois Arago, Cayenne",
+    "nom_creole": "Lari Cayenne",
+    "region": "GUYANE",
+    "commune": "Cayenne",
+    "coordonnees": {
+      "lat": 4.9388185867966,
+      "lon": -52.331808101487
+    },
+    "difficulte": "MOYEN",
+    "mapillary_id": "259270559222687",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2016-08-18"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q44401",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Terre de forêt amazonienne"
+      },
+      {
+        "niveau": 2,
+        "texte": "Chef-lieu, sur l’île du même nom"
+      }
+    ],
+    "aire_commune_km2": 25.52
+  },
+  {
+    "id": "st-12",
+    "nom": "Rue de l’Odéon, Kourou",
+    "nom_creole": "Lari Kourou",
+    "region": "GUYANE",
+    "commune": "Kourou",
+    "coordonnees": {
+      "lat": 5.1615176393394,
+      "lon": -52.643325658226
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "198127629404270",
+    "credit": {
+      "username": "hacp",
+      "captured_at": "2022-09-07"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q273312",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Terre de forêt amazonienne"
+      },
+      {
+        "niveau": 2,
+        "texte": "Ville des fusées"
+      }
+    ],
+    "aire_commune_km2": 2289.2
+  },
+  {
+    "id": "st-13",
+    "nom": "Avenue Albert Sarraut, Saint-Laurent-du-Maroni",
+    "nom_creole": "Lari Saint-Laurent-du-Maroni",
+    "region": "GUYANE",
+    "commune": "Saint-Laurent-du-Maroni",
+    "coordonnees": {
+      "lat": 5.5060375294565,
+      "lon": -54.027135700884
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "147142287390967",
+    "credit": {
+      "username": "pma",
+      "captured_at": "2021-01-18"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q319959",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Terre de forêt amazonienne, à l’ouest"
+      },
+      {
+        "niveau": 2,
+        "texte": "Ville du fleuve Maroni, ancien bagne"
+      }
+    ],
+    "aire_commune_km2": 4320.77
+  },
+  {
+    "id": "st-14",
+    "nom": "Rue Maurice BOCS, Matoury",
+    "nom_creole": "Lari Matoury",
+    "region": "GUYANE",
+    "commune": "Matoury",
+    "coordonnees": {
+      "lat": 4.8496318387901,
+      "lon": -52.328783153736
+    },
+    "difficulte": "EXPERT",
+    "mapillary_id": "582210316504280",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2016-08-18"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q816739",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Terre de forêt amazonienne"
+      },
+      {
+        "niveau": 2,
+        "texte": "Banlieue sud du chef-lieu"
+      }
+    ],
+    "aire_commune_km2": 146.68
+  },
+  {
+    "id": "st-15",
+    "nom": "Rue de la CANNE À SUCRE, Remire-Montjoly",
+    "nom_creole": "Lari Remire-Montjoly",
+    "region": "GUYANE",
+    "commune": "Remire-Montjoly",
+    "coordonnees": {
+      "lat": 4.9037937340773,
+      "lon": -52.273335996076
+    },
+    "difficulte": "EXPERT",
+    "mapillary_id": "247810083801809",
+    "credit": {
+      "username": "kaartcam",
+      "captured_at": "2016-08-18"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q996222",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Terre de forêt amazonienne"
+      },
+      {
+        "niveau": 2,
+        "texte": "Plages à l’est du chef-lieu"
+      }
+    ],
+    "aire_commune_km2": 46.3
+  },
+  {
+    "id": "st-16",
+    "nom": "Rue de Paris, Saint-Denis",
+    "nom_creole": "Lari Saint-Denis",
+    "region": "REUNION",
+    "commune": "Saint-Denis",
+    "coordonnees": {
+      "lat": -20.8832861,
+      "lon": 55.4501
+    },
+    "difficulte": "MOYEN",
+    "mapillary_id": "2262788723930767",
+    "credit": {
+      "username": "AllWays360",
+      "captured_at": "2022-10-06"
+    },
+    "is_pano": true,
+    "wikidata_id": "Q47045",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île intense de l’océan Indien"
+      },
+      {
+        "niveau": 2,
+        "texte": "Chef-lieu, au nord"
+      }
+    ],
+    "aire_commune_km2": 142.33
+  },
+  {
+    "id": "st-17",
+    "nom": "Rue du Cimetiere, Saint-Pierre",
+    "nom_creole": "Lari Saint-Pierre",
+    "region": "REUNION",
+    "commune": "Saint-Pierre",
+    "coordonnees": {
+      "lat": -21.338988428747,
+      "lon": 55.478221620359
+    },
+    "difficulte": "MOYEN",
+    "mapillary_id": "143202321798356",
+    "credit": {
+      "username": "sigstpierre",
+      "captured_at": "2022-11-09"
+    },
+    "is_pano": true,
+    "wikidata_id": "Q249884",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île intense de l’océan Indien"
+      },
+      {
+        "niveau": 2,
+        "texte": "Capitale du sud, front de mer animé"
+      }
+    ],
+    "aire_commune_km2": 96.82
+  },
+  {
+    "id": "st-18",
+    "nom": "Rue Aristide Briand, Le Tampon",
+    "nom_creole": "Lari Le Tampon",
+    "region": "REUNION",
+    "commune": "Le Tampon",
+    "coordonnees": {
+      "lat": -21.277675635385,
+      "lon": 55.514338556402
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "1382811445417165",
+    "credit": {
+      "username": "vandecasteele",
+      "captured_at": "2019-12-16"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q13648",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île intense de l’océan Indien"
+      },
+      {
+        "niveau": 2,
+        "texte": "Commune des hauts, dans le sud"
+      }
+    ],
+    "aire_commune_km2": 182.09
+  },
+  {
+    "id": "st-19",
+    "nom": "Rue Elie Eudor, Saint-Paul",
+    "nom_creole": "Lari Saint-Paul",
+    "region": "REUNION",
+    "commune": "Saint-Paul",
+    "coordonnees": {
+      "lat": -21.008621906549,
+      "lon": 55.271355918998
+    },
+    "difficulte": "DIFFICILE",
+    "mapillary_id": "928324514646684",
+    "credit": {
+      "username": "sogefi",
+      "captured_at": "2018-10-14"
+    },
+    "is_pano": false,
+    "wikidata_id": "Q316887",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île intense de l’océan Indien"
+      },
+      {
+        "niveau": 2,
+        "texte": "Côte ouest, premier site de peuplement"
+      }
+    ],
+    "aire_commune_km2": 241.64
+  },
+  {
+    "id": "st-20",
+    "nom": "Ccal de la Republique, Saint-André",
+    "nom_creole": "Lari Saint-André",
+    "region": "REUNION",
+    "commune": "Saint-André",
+    "coordonnees": {
+      "lat": -20.962268395233,
+      "lon": 55.651364657007
+    },
+    "difficulte": "EXPERT",
+    "mapillary_id": "519625869420978",
+    "credit": {
+      "username": "vandecasteele",
+      "captured_at": "2019-06-28"
+    },
+    "is_pano": true,
+    "wikidata_id": "Q1649370",
+    "indices": [
+      {
+        "niveau": 1,
+        "texte": "Île intense de l’océan Indien"
+      },
+      {
+        "niveau": 2,
+        "texte": "Côte est, pays de la canne"
+      }
+    ],
+    "aire_commune_km2": 54.66
+  }
+]

app/src/lib/server/lieux.ts

@@ -0,0 +1,247 @@
+import rawLieux from './data/lieux.json';
+import rawStreet from './data/street.json';
+import type {
+	Categorie,
+	Difficulte,
+	ExplorerLieu,
+	GuessResult,
+	Lieu,
+	Region,
+	RoundPlace,
+	StreetLieu
+} from '$lib/types';
+
+const lieux = rawLieux as Lieu[];
+const street = rawStreet as StreetLieu[];
+
+/** Lieu « scorable » : les deux corpus partagent les champs du scoring. */
+type Scoreable = Lieu | StreetLieu;
+
+const REGIONS: Region[] = ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'];
+const CATEGORIES: Categorie[] = ['MONUMENT', 'LIEU'];
+
+export const MAX_POINTS = 5000;
+
+/** Rayon (km) de la courbe de score selon la difficulté du lieu. */
+export const RAYONS: Record<Difficulte, number> = {
+	FACILE: 50,
+	MOYEN: 15,
+	DIFFICILE: 5,
+	EXPERT: 1
+};
+
+/** Distance haversine en km. */
+export function haversineKm(a: { lat: number; lon: number }, b: { lat: number; lon: number }): number {
+	const R = 6371;
+	const dLat = ((b.lat - a.lat) * Math.PI) / 180;
+	const dLon = ((b.lon - a.lon) * Math.PI) / 180;
+	const s =
+		Math.sin(dLat / 2) ** 2 +
+		Math.cos((a.lat * Math.PI) / 180) * Math.cos((b.lat * Math.PI) / 180) * Math.sin(dLon / 2) ** 2;
+	return 2 * R * Math.asin(Math.sqrt(s));
+}
+
+function parseRegion(value: string | null): Region | null {
+	return value && REGIONS.includes(value as Region) ? (value as Region) : null;
+}
+
+function parseCategorie(value: string | null): Categorie | null {
+	return value && CATEGORIES.includes(value as Categorie) ? (value as Categorie) : null;
+}
+
+/** Recherche dans les deux corpus (photos classiques + street Mapillary). */
+export function getLieuById(id: string): Scoreable | undefined {
+	return lieux.find((l) => l.id === id) ?? street.find((l) => l.id === id);
+}
+
+/** Recherche limitée au corpus photo classique (défi, proxy photo). */
+export function getLieuPhotoById(id: string): Lieu | undefined {
+	return lieux.find((l) => l.id === id);
+}
+
+/** Sélection aléatoire d'un lieu, avec filtres optionnels. */
+export function getRandomLieu(options: {
+	region?: string | null;
+	categorie?: string | null;
+	exclude?: string | null;
+}): Lieu | null {
+	const region = parseRegion(options.region ?? null);
+	const categorie = parseCategorie(options.categorie ?? null);
+	const excluded = new Set(
+		(options.exclude ?? '')
+			.split(',')
+			.map((s) => s.trim())
+			.filter(Boolean)
+	);
+	let pool = lieux.filter((l) => !excluded.has(l.id));
+	if (region) pool = pool.filter((l) => l.region === region);
+	if (categorie) pool = pool.filter((l) => l.categorie === categorie);
+	// Si tout a été exclu, on réessaie sans les exclusions (le jeu doit continuer).
+	if (pool.length === 0) {
+		pool = lieux;
+		if (region) pool = pool.filter((l) => l.region === region);
+		if (categorie) pool = pool.filter((l) => l.categorie === categorie);
+	}
+	if (pool.length === 0) return null;
+	return pool[Math.floor(Math.random() * pool.length)];
+}
+
+/** Sélection aléatoire d'un lieu street (mode « An lari a », corpus Mapillary). */
+export function getRandomStreet(options: {
+	region?: string | null;
+	exclude?: string | null;
+}): StreetLieu | null {
+	const region = parseRegion(options.region ?? null);
+	const excluded = new Set(
+		(options.exclude ?? '')
+			.split(',')
+			.map((s) => s.trim())
+			.filter(Boolean)
+	);
+	let pool = street.filter((l) => !excluded.has(l.id));
+	if (region) pool = pool.filter((l) => l.region === region);
+	// Si tout a été exclu, on réessaie sans les exclusions (le jeu doit continuer).
+	if (pool.length === 0) {
+		pool = region ? street.filter((l) => l.region === region) : street;
+	}
+	if (pool.length === 0) return null;
+	return pool[Math.floor(Math.random() * pool.length)];
+}
+
+/** Largeurs (px) servies par le proxy photo /api/photo/[id]?w=. */
+export const PHOTO_LARGEURS = [400, 800, 1200] as const;
+
+/**
+ * Anti-triche : ne garde que les champs publiques pour /api/round.
+ * L'URL photo passe par le proxy serveur (/api/photo/<uuid>) : l'URL Wikimedia
+ * Commons d'origine contient le nom du fichier, qui révèle souvent le lieu (C4).
+ */
+export function sanitizeRound(lieu: Lieu): RoundPlace {
+	return {
+		id: lieu.id,
+		nom: lieu.nom,
+		nom_creole: lieu.nom_creole,
+		categorie: lieu.categorie,
+		difficulte: lieu.difficulte,
+		photo: {
+			url: `/api/photo/${lieu.id}`,
+			srcset: {
+				'400': `/api/photo/${lieu.id}?w=400`,
+				'800': `/api/photo/${lieu.id}?w=800`,
+				'1200': `/api/photo/${lieu.id}?w=1200`
+			},
+			credit: lieu.photo.credit,
+			alt: lieu.photo.alt
+		},
+		indices: lieu.indices
+	};
+}
+
+/**
+ * Anti-triche, mode street : ne garde que les champs publics.
+ * Seul `mapillaryId` part au client (la visionneuse doit bien appeler Mapillary) ;
+ * coords/commune/région/wikidata_id ne partent jamais avant le guess.
+ * Limitation documentée (architecture.md §10) : l'image_key est publique côté
+ * Mapillary, un joueur techniquement équipé peut retrouver la position — même
+ * propriété que GeoGuessr/Street View, acceptable en solo sans leaderboard.
+ */
+export function sanitizeRoundStreet(lieu: StreetLieu): RoundPlace {
+	return {
+		id: lieu.id,
+		nom: lieu.nom,
+		nom_creole: lieu.nom_creole,
+		categorie: 'LIEU',
+		difficulte: lieu.difficulte,
+		mapillaryId: lieu.mapillary_id,
+		credit: `© ${lieu.credit.username} / Mapillary (CC BY-SA 4.0)`,
+		indices: lieu.indices
+	};
+}
+
+/**
+ * Rayon effectif (km) de la courbe de score (audit A1).
+ * Les communes guyanaises sont immenses (Saint-Laurent-du-Maroni ≈ 4 321 km²) :
+ * avec le seul rayon de difficulté, un guess à quelques dizaines de km y est
+ * injustement quasi nul. Quand `aire_commune_km2` est renseigné, le rayon est
+ * au moins celui du disque de même aire que la commune : sqrt(aire / π).
+ * Champ optionnel : sans lui, on retombe sur le rayon de difficulté.
+ */
+export function rayonEffectifKm(lieu: Scoreable): number {
+	const base = RAYONS[lieu.difficulte];
+	const aire = lieu.aire_commune_km2;
+	if (typeof aire === 'number' && Number.isFinite(aire) && aire > 0) {
+		return Math.max(base, Math.sqrt(aire / Math.PI));
+	}
+	return base;
+}
+
+/**
+ * Scoring recalculé côté serveur :
+ * score = round(5000 × e^(−d/r_eff)) ; pénalité −10 % par indice ;
+ * bonus temps ≤ +20 % ; total plafonné à 5000.
+ */
+export function scoreGuess(
+	lieu: Scoreable,
+	guess: { lat: number; lon: number },
+	hintsUsed: number,
+	timeMs?: number
+): GuessResult {
+	const distanceKm = haversineKm(guess, lieu.coordonnees);
+	const radiusEff = rayonEffectifKm(lieu);
+	const base = Math.round(MAX_POINTS * Math.exp(-distanceKm / radiusEff));
+	const penalises = base * Math.max(0, 1 - 0.1 * Math.max(0, hintsUsed));
+	let total = penalises;
+	if (typeof timeMs === 'number' && Number.isFinite(timeMs) && timeMs >= 0) {
+		total += penalises * 0.2 * Math.max(0, 1 - timeMs / 60000);
+	}
+	const score = Math.min(MAX_POINTS, Math.round(total));
+	return {
+		distanceKm: Math.round(distanceKm * 10) / 10,
+		score,
+		radiusEffKm: Math.round(radiusEff * 10) / 10,
+		coordonnees: lieu.coordonnees,
+		commune: lieu.commune,
+		region: lieu.region,
+		nom: lieu.nom,
+		nom_creole: lieu.nom_creole,
+		wikidata_id: lieu.wikidata_id
+	};
+}
+
+/** Réponse « Passer » : la vérité est révélée, score 0, pas de distance. */
+export function skipResult(lieu: Scoreable): GuessResult {
+	return {
+		distanceKm: null,
+		score: 0,
+		radiusEffKm: null,
+		coordonnees: lieu.coordonnees,
+		commune: lieu.commune,
+		region: lieu.region,
+		nom: lieu.nom,
+		nom_creole: lieu.nom_creole,
+		wikidata_id: lieu.wikidata_id
+	};
+}
+
+/**
+ * Catalogue Explorer : coords arrondies à 0.05° (mode sans score, fiches autorisées).
+ * L'`id` (uuid) n'est volontairement PAS exposé : il permettrait de corréler
+ * l'id d'un round avec la commune du lieu (fuite de réponse, audit C4).
+ * L'Explorer n'a pas besoin d'ids stables (le front utilise l'indice du tableau).
+ */
+export function catalogueExplorer(): ExplorerLieu[] {
+	return lieux.map((l) => ({
+		nom: l.nom,
+		nom_creole: l.nom_creole,
+		region: l.region,
+		commune: l.commune,
+		coordonnees: {
+			lat: Math.round(l.coordonnees.lat / 0.05) * 0.05,
+			lon: Math.round(l.coordonnees.lon / 0.05) * 0.05
+		},
+		categorie: l.categorie,
+		difficulte: l.difficulte,
+		wikidata_id: l.wikidata_id,
+		photo: l.photo
+	}));
+}

app/src/lib/server/tirage.ts

@@ -0,0 +1,86 @@
+import rawLieux from './data/lieux.json';
+import type { Categorie, Lieu } from '$lib/types';
+
+const lieux = rawLieux as Lieu[];
+
+/** Nombre de manches d'un défi. */
+const NB_MANCHES = 5;
+
+/** Seed acceptée : alphanumérique + tiret/underscore, 4 à 40 caractères. */
+const SEED_REGEX = /^[A-Za-z0-9_-]{4,40}$/;
+
+export function seedValide(seed: string): boolean {
+	return SEED_REGEX.test(seed);
+}
+
+/**
+ * Hash cyrb53 (domaine public) réduit à 32 bits.
+ * Arithmétique entière via Math.imul : résultat strictement identique sur
+ * toutes les plateformes — prérequis du déterminisme inter-machines (ADR-001 V1).
+ */
+function hashSeed(seed: string): number {
+	let h1 = 0xdeadbeef;
+	let h2 = 0x41c6ce57;
+	for (let i = 0; i < seed.length; i++) {
+		const ch = seed.charCodeAt(i);
+		h1 = Math.imul(h1 ^ ch, 2654435761);
+		h2 = Math.imul(h2 ^ ch, 1597334677);
+	}
+	h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+	h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+	return (h1 ^ h2) >>> 0;
+}
+
+/** PRNG mulberry32 (domaine public) : flottants dans [0, 1), déterministes. */
+function mulberry32(graine: number): () => number {
+	let a = graine;
+	return () => {
+		a |= 0;
+		a = (a + 0x6d2b79f5) | 0;
+		let t = Math.imul(a ^ (a >>> 15), 1 | a);
+		t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	};
+}
+
+/**
+ * Tire les 5 lieux d'un défi à partir de la seed : mêmes lieux, même ordre,
+ * pour tous les joueurs et sur toutes les machines (ADR-001 v1).
+ * PRNG seedé exclusivement — jamais Math.random.
+ * Contraintes : ≥ 1 MONUMENT et ≥ 1 LIEU, et si possible ≥ 2 régions distinctes.
+ * Fonction pure : aucune I/O réseau, aucun état ; même entrée → même sortie.
+ */
+export function idsPourSeed(seed: string): string[] {
+	const rng = mulberry32(hashSeed(seed));
+
+	// Mélange de Fisher-Yates déterministe des indices du corpus.
+	const indices = lieux.map((_, i) => i);
+	for (let i = indices.length - 1; i > 0; i--) {
+		const j = Math.floor(rng() * (i + 1));
+		[indices[i], indices[j]] = [indices[j], indices[i]];
+	}
+	const melanges = indices.map((i) => lieux[i]);
+	const tires = melanges.slice(0, NB_MANCHES);
+
+	// ≥ 1 de chaque catégorie : si l'une manque, on échange un tiré contre le
+	// premier non-tiré de la catégorie manquante (l'autre catégorie reste présente).
+	const assurerCategorie = (categorie: Categorie): void => {
+		if (tires.some((l) => l.categorie === categorie)) return;
+		const candidat = melanges.find((l) => l.categorie === categorie && !tires.includes(l));
+		if (candidat) tires[0] = candidat;
+	};
+	assurerCategorie('MONUMENT');
+	assurerCategorie('LIEU');
+
+	// ≥ 2 régions distinctes si possible : on échange un tiré contre un non-tiré
+	// d'une autre région et de MÊME catégorie (contrainte catégories préservée,
+	// les deux étant présentes après l'étape précédente).
+	const regions = new Set(tires.map((l) => l.region));
+	if (regions.size < 2) {
+		const candidat = melanges.find((l) => !tires.includes(l) && !regions.has(l.region));
+		const i = candidat ? tires.findIndex((l) => l.categorie === candidat.categorie) : -1;
+		if (candidat && i >= 0) tires[i] = candidat;
+	}
+
+	return tires.map((l) => l.id);
+}

app/src/lib/site.ts

@@ -0,0 +1,3 @@
+/** Constantes du site — domaine public de production (cf. jwe_ynh/manifest.toml). */
+export const SITE_URL = 'https://jwe.o-k-i.net';
+export const SITE_NAME = 'JWE';

app/src/lib/stores/defi.svelte.ts

@@ -0,0 +1,32 @@
+import type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
+
+export interface MancheDefi {
+	place: RoundPlace;
+	guess: Coordonnees | null;
+	result: GuessResult;
+}
+
+/** État du Défi 5 rounds — client uniquement, sans session serveur. */
+function creerDefiStore() {
+	let manches = $state<MancheDefi[]>([]);
+
+	return {
+		get manches() {
+			return manches;
+		},
+		get total() {
+			return manches.reduce((s, m) => s + m.result.score, 0);
+		},
+		get termine() {
+			return manches.length >= 5;
+		},
+		ajouter(manche: MancheDefi) {
+			manches = [...manches, manche];
+		},
+		reinitialiser() {
+			manches = [];
+		}
+	};
+}
+
+export const defi = creerDefiStore();

app/src/lib/stores/history.svelte.ts

@@ -0,0 +1,162 @@
+import type { GameMode, Region } from '$lib/types';
+
+export interface RoundRecord {
+	nom: string;
+	commune: string;
+	region: string;
+	distanceKm: number | null;
+	score: number;
+}
+
+export interface GameRecord {
+	id: string;
+	timestamp: number;
+	mode: GameMode;
+	region: Region | 'TOUTES';
+	scoreTotal: number;
+	roundsCount: number;
+	rounds: RoundRecord[];
+}
+
+export interface RegionStats {
+	rounds: number;
+	scoreTotal: number;
+	distanceTotalKm: number;
+	scoreMoyen: number;
+	distanceMoyenneKm: number;
+}
+
+export interface LocalStats {
+	totalParties: number;
+	totalRounds: number;
+	meilleurScore: number;
+	scoreMoyen: number;
+	distanceMoyenneKm: number;
+	lieuxUniques: number;
+	parRegion: Record<Region, RegionStats>;
+}
+
+const STORAGE_KEY = 'jwe_local_history';
+
+let games = $state<GameRecord[]>([]);
+
+export function initHistory(): void {
+	if (typeof window === 'undefined') return;
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw) {
+			games = JSON.parse(raw);
+		}
+	} catch (e) {
+		console.warn('Impossible de charger l’historique local', e);
+	}
+}
+
+function saveHistory(): void {
+	if (typeof window === 'undefined') return;
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(games));
+	} catch (e) {
+		console.warn('Impossible de sauvegarder l’historique local', e);
+	}
+}
+
+export function ajouterPartie(record: Omit<GameRecord, 'id' | 'timestamp'>): void {
+	const newRecord: GameRecord = {
+		...record,
+		id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : String(Date.now()),
+		timestamp: Date.now()
+	};
+	games = [newRecord, ...games].slice(0, 100); // Conserve les 100 dernières parties
+	saveHistory();
+}
+
+export function getHistorique(): GameRecord[] {
+	return games;
+}
+
+export function getStats(): LocalStats {
+	const totalParties = games.length;
+	let totalRounds = 0;
+	let scoreCumule = 0;
+	let distanceCumulee = 0;
+	let distanceCount = 0;
+	let meilleurScore = 0;
+	const lieuxSet = new Set<string>();
+
+	const initRegion = (): RegionStats => ({
+		rounds: 0,
+		scoreTotal: 0,
+		distanceTotalKm: 0,
+		scoreMoyen: 0,
+		distanceMoyenneKm: 0
+	});
+
+	const parRegion: Record<Region, RegionStats> = {
+		GUADELOUPE: initRegion(),
+		MARTINIQUE: initRegion(),
+		GUYANE: initRegion(),
+		REUNION: initRegion()
+	};
+
+	for (const g of games) {
+		if (g.scoreTotal > meilleurScore) meilleurScore = g.scoreTotal;
+		scoreCumule += g.scoreTotal;
+
+		for (const r of g.rounds) {
+			totalRounds++;
+			if (r.distanceKm !== null) {
+				distanceCumulee += r.distanceKm;
+				distanceCount++;
+			}
+			if (r.nom) lieuxSet.add(r.nom);
+
+			const reg = r.region as Region;
+			if (parRegion[reg]) {
+				parRegion[reg].rounds++;
+				parRegion[reg].scoreTotal += r.score;
+				if (r.distanceKm !== null) {
+					parRegion[reg].distanceTotalKm += r.distanceKm;
+				}
+			}
+		}
+	}
+
+	for (const reg of ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'] as Region[]) {
+		const st = parRegion[reg];
+		if (st.rounds > 0) {
+			st.scoreMoyen = Math.round(st.scoreTotal / st.rounds);
+			st.distanceMoyenneKm = Math.round((st.distanceTotalKm / st.rounds) * 10) / 10;
+		}
+	}
+
+	return {
+		totalParties,
+		totalRounds,
+		meilleurScore,
+		scoreMoyen: totalParties > 0 ? Math.round(scoreCumule / totalParties) : 0,
+		distanceMoyenneKm: distanceCount > 0 ? Math.round((distanceCumulee / distanceCount) * 10) / 10 : 0,
+		lieuxUniques: lieuxSet.size,
+		parRegion
+	};
+}
+
+export function exporterHistorique(): void {
+	if (typeof window === 'undefined') return;
+	const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(games, null, 2));
+	const a = document.createElement('a');
+	a.setAttribute('href', dataStr);
+	a.setAttribute('download', `jwe-historique-${new Date().toISOString().slice(0, 10)}.json`);
+	document.body.appendChild(a);
+	a.click();
+	a.remove();
+}
+
+export function reinitialiserHistorique(): void {
+	games = [];
+	if (typeof window !== 'undefined') {
+		try {
+			localStorage.removeItem(STORAGE_KEY);
+		} catch {}
+	}
+}

app/src/lib/styles/jeu.css

@@ -0,0 +1,527 @@
+/* ==========================================================================
+   STYLES DU JEU — /jeu/[mode] et /defi/[seed]
+   ORGANISATION KA INTERNATIONALE · Layout viewport 100dvh & Dark/Light OKI
+   ========================================================================== */
+
+.jeu {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.etat {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+	padding: 1rem;
+	overflow-y: auto;
+	color: var(--muted);
+}
+
+/* — Split photo | carte — */
+.split {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 0.5rem;
+	min-height: 0;
+}
+
+/* Mobile : la photo s'adapte (plafond ~42dvh), la carte garde au minimum
+   35dvh utiles + la barre de sauts (~3,5rem). */
+.panneau-photo {
+	position: relative;
+	flex: 1 1 0;
+	min-height: 5rem;
+	max-height: 42dvh;
+	border-radius: var(--radius-md);
+	overflow: hidden;
+	background: var(--card-bg);
+	border: 1px solid var(--line);
+}
+
+.panneau-carte {
+	position: relative;
+	flex: 1 1 0;
+	min-height: calc(35dvh + 3.5rem);
+	display: flex;
+	border-radius: var(--radius-md);
+	overflow: hidden;
+	border: 1px solid var(--line);
+}
+
+.panneau-carte > * {
+	flex: 1;
+	min-width: 0;
+}
+
+/* État résultat : le panneau photo devient une fiche scrollable interne. */
+.split.resultat .panneau-photo {
+	max-height: none;
+	border: none;
+	background: transparent;
+}
+
+.split.resultat .panneau-carte {
+	min-height: 10rem;
+}
+
+.resultat-scroll {
+	height: 100%;
+	overflow-y: auto;
+	background: var(--noir-profond);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-md);
+	box-shadow: var(--oki-ombre);
+	padding: 1.2rem;
+	color: var(--blanc-creme);
+}
+
+/* — Puce de statut unique (manche, seed, minuteur) : haut-droite, une ligne — */
+.statut {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	z-index: 3;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.4rem;
+	max-width: calc(100% - 1rem);
+	pointer-events: none;
+}
+
+.badge-manche {
+	background: var(--noir-profond);
+	color: var(--or-oki);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-sm);
+	padding: 0.25rem 0.8rem;
+	font-size: 0.82rem;
+	font-weight: 700;
+	font-family: var(--font-display);
+	letter-spacing: 0.03em;
+	text-transform: uppercase;
+	white-space: nowrap;
+	box-shadow: var(--oki-ombre);
+}
+
+/* Seed visible mais discrète */
+.badge-seed {
+	background: var(--noir-profond);
+	color: var(--muted);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-sm);
+	padding: 0.15rem 0.7rem;
+	font-size: 0.75rem;
+	font-weight: 600;
+	white-space: nowrap;
+	box-shadow: var(--oki-ombre);
+}
+
+.badge-timer {
+	display: flex;
+}
+
+/* — Indices : panneau scrollable en surimpression de la photo — */
+.indices {
+	position: absolute;
+	left: 0.4rem;
+	right: 0.4rem;
+	bottom: 0.4rem;
+	z-index: 4;
+	max-height: calc(100% - 0.8rem);
+	overflow-y: auto;
+	margin: 0;
+	padding: 0.5rem 0.7rem;
+	background: var(--noir-profond);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-sm);
+	box-shadow: var(--oki-ombre);
+}
+
+.indice {
+	margin: 0.25rem 0;
+	background: var(--card-bg);
+	border-left: 4px solid var(--or-oki);
+	border-radius: var(--radius-sm);
+	padding: 0.5rem 0.8rem;
+	font-size: 0.95rem;
+	color: var(--blanc-creme);
+}
+
+/* — Aide « poser le marqueur » — */
+.aide-carte {
+	position: absolute;
+	left: 50%;
+	bottom: 3.9rem;
+	transform: translateX(-50%);
+	z-index: 3;
+	margin: 0;
+	padding: 0.35rem 0.9rem;
+	max-width: calc(100% - 5rem);
+	background: var(--noir-profond);
+	color: var(--blanc-creme);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-sm);
+	box-shadow: var(--oki-ombre);
+	font-size: 0.85rem;
+	font-weight: 600;
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	pointer-events: none;
+}
+
+/* — Barre d'actions — */
+.barre-actions {
+	position: sticky;
+	bottom: 0;
+	z-index: 5;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.6rem;
+	padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
+	background: var(--noir-profond);
+	border-top: 1px solid var(--line);
+}
+
+.barre-actions .btn {
+	min-height: 48px;
+}
+
+.actions-secondaires {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.actions-secondaires .btn {
+	padding: 0.6rem 0.9rem;
+	font-size: 0.92rem;
+}
+
+.penalite {
+	font-size: 0.75rem;
+	font-weight: 500;
+	opacity: 0.8;
+}
+
+.valider {
+	flex: 0 1 auto;
+	padding: 0.8rem 1.2rem;
+	white-space: nowrap;
+}
+
+/* Écrans très étroits */
+@media (max-width: 420px) {
+	.actions-secondaires .btn {
+		padding: 0.55rem 0.7rem;
+		font-size: 0.86rem;
+	}
+
+	.penalite {
+		display: none;
+	}
+
+	.valider {
+		padding: 0.7rem 0.9rem;
+		font-size: 0.95rem;
+	}
+}
+
+/* Paysage */
+@media (max-height: 540px) {
+	.panneau-photo {
+		min-height: 3.5rem;
+		max-height: 34dvh;
+	}
+
+	.panneau-carte {
+		min-height: 11rem;
+	}
+}
+
+/* Desktop : split 50/50 */
+@media (min-width: 768px) {
+	.split {
+		flex-direction: row;
+		gap: 0.8rem;
+		padding: 0.8rem;
+	}
+
+	.panneau-photo,
+	.split.resultat .panneau-photo {
+		flex: 1 1 50%;
+		min-height: 0;
+		max-height: none;
+	}
+
+	.panneau-carte,
+	.split.resultat .panneau-carte {
+		flex: 1 1 50%;
+		min-height: 0;
+	}
+
+	.aide-carte {
+		left: auto;
+		right: 0.8rem;
+		bottom: 3.4rem;
+		transform: none;
+	}
+
+	.barre-actions {
+		justify-content: center;
+		gap: 1.5rem;
+	}
+}
+
+/* — Écran bilan du défi — */
+.bilan {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	width: 100%;
+	max-width: 900px;
+	margin: 0 auto;
+	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
+	display: flex;
+	flex-direction: column;
+	gap: 0.8rem;
+}
+
+.bilan h1 {
+	margin: 0;
+	text-align: center;
+	font-size: 1.6rem;
+	color: var(--or-oki);
+}
+
+.filet-drapeau {
+	display: flex;
+	width: 132px;
+	height: 5px;
+	margin: 0 auto;
+	border-radius: 3px;
+	overflow: hidden;
+}
+
+.filet-drapeau .seg {
+	flex: 1;
+	transform-origin: left center;
+}
+
+.filet-drapeau .seg-vert {
+	background: var(--vert-oki);
+}
+
+.filet-drapeau .seg-corail {
+	background: var(--or-oki);
+}
+
+.filet-drapeau .seg-bleu {
+	background: var(--turquoise-caraibes);
+}
+
+.seed-discret {
+	margin: 0;
+	text-align: center;
+	font-size: 0.9rem;
+	color: var(--muted);
+}
+
+.total {
+	margin: 0;
+	text-align: center;
+}
+
+.total .valeur {
+	font-size: 2.4rem;
+	font-weight: 800;
+	font-family: var(--font-display);
+	color: var(--or-oki);
+}
+
+.total .unite {
+	margin-left: 0.4rem;
+	color: var(--muted);
+}
+
+.bilan-carte {
+	width: min(100%, 42.5dvh, 520px);
+	margin: 0 auto;
+	border-radius: var(--radius-md);
+	border: 1px solid var(--line);
+	background: var(--noir-profond);
+	overflow: hidden;
+}
+
+.recap {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+}
+
+.recap li {
+	display: flex;
+	align-items: baseline;
+	gap: 0.6rem;
+	background: var(--noir-profond);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-sm);
+	box-shadow: var(--oki-ombre);
+	padding: 0.5rem 0.9rem;
+}
+
+.r-nom {
+	font-weight: 700;
+	color: var(--blanc-creme);
+}
+
+.r-region {
+	flex: 1;
+	color: var(--muted);
+	font-size: 0.9rem;
+}
+
+.r-score {
+	font-weight: 800;
+	font-family: var(--font-display);
+	color: var(--or-oki);
+}
+
+.bilan-actions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 0.7rem;
+}
+
+.bilan-actions .btn {
+	min-height: 48px;
+}
+
+.legende {
+	margin: 0;
+	text-align: center;
+	font-size: 0.85rem;
+	color: var(--muted);
+}
+
+.puce.joueur {
+	color: var(--rouge-oki);
+}
+
+.puce.reelle {
+	color: var(--vert-oki);
+}
+
+/* Bilan desktop */
+@media (min-width: 900px) {
+	.bilan {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		align-content: start;
+		column-gap: 1.5rem;
+	}
+
+	.bilan h1,
+	.bilan .seed-discret,
+	.bilan .filet-drapeau,
+	.bilan .total,
+	.bilan .bilan-actions,
+	.bilan .legende {
+		grid-column: 1 / -1;
+	}
+
+	.bilan-carte {
+		width: min(100%, 42.5dvh);
+		justify-self: center;
+	}
+}
+
+@media (max-height: 800px) {
+	.bilan {
+		gap: 0.55rem;
+		padding-top: 0.6rem;
+	}
+
+	.bilan h1 {
+		font-size: 1.35rem;
+	}
+
+	.total .valeur {
+		font-size: 1.9rem;
+	}
+}
+
+/* Motion */
+@media (prefers-reduced-motion: no-preference) {
+	html.js .resultat-scroll {
+		animation: jwe-montee var(--dur-mesure) var(--ease-ka);
+	}
+
+	html.js .split.resultat .panneau-carte {
+		animation: jwe-emphase var(--dur-mesure) var(--ease-ka);
+	}
+
+	html.js .badge-manche,
+	html.js .badge-seed,
+	html.js .badge-timer {
+		animation: oki-pop var(--dur-mesure) var(--ease-ka) backwards;
+	}
+
+	html.js .filet-drapeau .seg {
+		animation: jwe-filet var(--dur-mesure) var(--ease-ka) backwards;
+	}
+
+	html.js .filet-drapeau .seg-corail {
+		animation-delay: 120ms;
+	}
+
+	html.js .filet-drapeau .seg-bleu {
+		animation-delay: 300ms;
+	}
+}
+
+@keyframes jwe-montee {
+	from {
+		transform: translateY(18px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes jwe-emphase {
+	from {
+		transform: scale(0.965);
+		opacity: 0.7;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes jwe-filet {
+	from {
+		transform: scaleX(0);
+		opacity: 0;
+	}
+	to {
+		transform: scaleX(1);
+		opacity: 1;
+	}
+}

app/src/lib/styles/oki.css

@@ -0,0 +1,328 @@
+/* ==========================================================================
+   CHARTE OKI — DESIGN SYSTEM & TOKENS CANONIQUES
+   ORGANISATION KA INTERNATIONALE · Thème sombre par défaut + thème clair WCAG AA
+   ========================================================================== */
+
+:root {
+	/* ── Noyau (thème sombre = identité par défaut de la marque OKI) ── */
+	--noir-oki: #0d0d0d; /* background principal */
+	--noir-profond: #1a0f1a; /* surface / cartes */
+	--blanc-creme: #fff8e7; /* foreground texte */
+	--line: rgba(255, 255, 255, 0.1); /* filets & bordures — jamais de gris plein */
+	--or-oki: #fdb813; /* accent : SEULE couleur d'action */
+	--or-clair: #ffe066; /* survol / hover action */
+	--rouge-oki: #ff1654; /* signal, alerte, ponctuation */
+	--vert-oki: #00d66c; /* succès, validation */
+
+	/* ── Palette étendue ── */
+	--turquoise-caraibes: #00ced1;
+	--jaune-soleil: #ffd700;
+	--orange-flamme: #ff6b35;
+	--violet-nuit: #6b2d5c;
+	--bleu-ocean: #0077be;
+	--gris-sombre: #2d1b2e;
+
+	/* ── Sémantique dérivée & surfaces ── */
+	--muted: color-mix(in srgb, var(--blanc-creme) 72%, transparent);
+	--card-bg: rgba(255, 255, 255, 0.04);
+	--card-bg-hover: rgba(255, 255, 255, 0.07);
+	--border-card: 1px solid var(--line);
+	--border-btn: 2px solid var(--or-oki);
+
+	/* ── Formes & Typographie ── */
+	--radius-sm: 3px; /* boutons, tags, badges — angles nets */
+	--radius-md: 6px; /* cartes, conteneurs */
+	--radius-lg: 10px;
+	--font-display: 'Archivo', 'Arial Black', -apple-system, sans-serif;
+	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+	/* ── Alias rétro-compatibles JWE ── */
+	--oki-vert: var(--vert-oki);
+	--oki-vert-clair: #17624a;
+	--oki-vert-doux: color-mix(in srgb, var(--vert-oki) 16%, var(--noir-profond));
+	--oki-sable: var(--noir-oki);
+	--oki-sable-fonce: var(--noir-profond);
+	--oki-bleu: var(--turquoise-caraibes);
+	--oki-bleu-doux: color-mix(in srgb, var(--turquoise-caraibes) 15%, var(--noir-profond));
+	--oki-corail: var(--or-oki);
+	--oki-corail-fonce: var(--or-clair);
+	--oki-encre: var(--blanc-creme);
+	--oki-encre-doux: var(--muted);
+	--oki-blanc: var(--noir-profond);
+	--oki-lacune-fond: color-mix(in srgb, var(--or-oki) 8%, var(--noir-profond));
+	--oki-lacune-bord: var(--or-oki);
+	--oki-radius: var(--radius-md);
+	--oki-radius-petit: var(--radius-sm);
+	--oki-ombre: 0 4px 16px rgba(0, 0, 0, 0.35);
+	--oki-font: var(--font-body);
+
+	/* ── Cadences Gwoka (motion) ── */
+	--ease-ka: cubic-bezier(0.22, 1, 0.36, 1); /* temps fort : attaque franche, longue tenue */
+	--ease-syncope: cubic-bezier(0.65, 0, 0.35, 1); /* contretemps : symétrique, urgent */
+	--dur-tanbou: 120ms; /* double-croche — micro-interactions, hovers */
+	--dur-mesure: 480ms; /* une mesure — entrées, transitions */
+	--dur-phrase: 960ms; /* deux mesures — moments solennels */
+	--dur-compte: 800ms; /* count-up du score */
+}
+
+/* ── Thème clair — opt-in (html.light-theme), accents assombris WCAG AA (ratio ≥ 4.5:1) ── */
+html.light-theme {
+	--noir-oki: #fff8e7; /* fond crème clair */
+	--blanc-creme: #0d0d0d; /* texte encre noir */
+	--noir-profond: #f5f0e8; /* surface carte */
+	--gris-sombre: #e8ddd0;
+
+	/* Accents assombris pour contraste AA */
+	--or-oki: #b87a00;
+	--or-clair: #d99000;
+	--vert-oki: #006b3d;
+	--rouge-oki: #a01030;
+	--turquoise-caraibes: #006b75;
+	--bleu-ocean: #004b7f;
+	--jaune-soleil: #b87a00;
+	--orange-flamme: #c85000;
+
+	--line: rgba(0, 0, 0, 0.12);
+	--card-bg: rgba(0, 0, 0, 0.03);
+	--card-bg-hover: rgba(0, 0, 0, 0.06);
+	--muted: color-mix(in srgb, var(--blanc-creme) 70%, transparent);
+
+	--oki-vert-doux: #e3efe7;
+	--oki-bleu-doux: #d9ecef;
+	--oki-lacune-fond: #fdf3e3;
+	--oki-lacune-bord: #b87a00;
+	--oki-ombre: 0 4px 16px rgba(13, 13, 13, 0.08);
+}
+
+/* ── Reset & Base ── */
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	background: var(--noir-oki);
+	color: var(--blanc-creme);
+	font-family: var(--font-body);
+	line-height: 1.5;
+	transition: background-color var(--dur-mesure) var(--ease-ka), color var(--dur-mesure) var(--ease-ka);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: var(--font-display);
+	text-transform: uppercase;
+	letter-spacing: -0.01em;
+	margin: 0 0 0.5rem 0;
+	color: var(--blanc-creme);
+}
+
+button {
+	font-family: inherit;
+}
+
+/* ── Signature Flag-Bar (bandeau 6px, 4 segments francs sans dégradé) ── */
+.flag-bar {
+	height: 6px;
+	width: 100%;
+	background: linear-gradient(
+		to right,
+		#0d0d0d 0 25%,
+		var(--or-oki) 25% 50%,
+		var(--vert-oki) 50% 75%,
+		var(--rouge-oki) 75% 100%
+	);
+}
+
+html.light-theme .flag-bar {
+	background: linear-gradient(
+		to right,
+		#000000 0 25%,
+		var(--or-oki) 25% 50%,
+		var(--vert-oki) 50% 75%,
+		var(--rouge-oki) 75% 100%
+	);
+}
+
+/* Flag-chip (mini flag-bar de section 56x6px) */
+.flag-chip {
+	display: inline-block;
+	width: 56px;
+	height: 6px;
+	border-radius: var(--radius-sm);
+	background: linear-gradient(
+		to right,
+		#0d0d0d 0 25%,
+		var(--or-oki) 25% 50%,
+		var(--vert-oki) 50% 75%,
+		var(--rouge-oki) 75% 100%
+	);
+}
+
+html.light-theme .flag-chip {
+	background: linear-gradient(
+		to right,
+		#000000 0 25%,
+		var(--or-oki) 25% 50%,
+		var(--vert-oki) 50% 75%,
+		var(--rouge-oki) 75% 100%
+	);
+}
+
+/* ── Boutons OKI ── */
+.btn {
+	position: relative;
+	isolation: isolate;
+	overflow: hidden;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	border-radius: var(--radius-sm);
+	padding: 0.75rem 1.4rem;
+	font-size: 1rem;
+	font-weight: 700;
+	font-family: var(--font-display);
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+	cursor: pointer;
+	text-decoration: none;
+	transition:
+		background-color var(--dur-tanbou) var(--ease-ka),
+		color var(--dur-tanbou) var(--ease-ka),
+		border-color var(--dur-tanbou) var(--ease-ka),
+		transform var(--dur-tanbou) var(--ease-ka),
+		box-shadow var(--dur-tanbou) var(--ease-ka);
+}
+
+.btn:focus-visible,
+a:focus-visible,
+[tabindex]:focus-visible {
+	outline: 2px solid var(--or-oki);
+	outline-offset: 2px;
+}
+
+/* Action primaire : l'or OKI porte toute l'action */
+.btn-primaire {
+	background: var(--or-oki);
+	color: #0d0d0d;
+	border: 2px solid var(--or-oki);
+	box-shadow: var(--oki-ombre);
+}
+
+html.light-theme .btn-primaire {
+	background: var(--or-oki);
+	color: #ffffff;
+	border: 2px solid var(--or-oki);
+}
+
+/* Balayage hover doré */
+.btn-primaire::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	background: var(--or-clair);
+	transform: scaleX(0);
+	transform-origin: left center;
+	transition: transform var(--dur-tanbou) var(--ease-syncope);
+}
+
+.btn-primaire:not(:disabled):hover {
+	transform: translateY(-2px);
+	border-color: var(--or-clair);
+}
+
+.btn-primaire:not(:disabled):hover::after {
+	transform: scaleX(1);
+}
+
+.btn-primaire:disabled {
+	background: var(--card-bg);
+	color: var(--muted);
+	border-color: var(--line);
+	cursor: not-allowed;
+	box-shadow: none;
+}
+
+/* Action secondaire */
+.btn-secondaire {
+	background: var(--card-bg);
+	color: var(--blanc-creme);
+	border: 1px solid var(--line);
+}
+
+.btn-secondaire:hover {
+	background: var(--card-bg-hover);
+	border-color: var(--or-oki);
+	color: var(--or-oki);
+	transform: translateY(-1px);
+}
+
+/* Action tertiaire / discret */
+.btn-tertiaire {
+	background: transparent;
+	color: var(--blanc-creme);
+	border: 1px solid var(--line);
+}
+
+.btn-tertiaire:hover {
+	border-color: var(--blanc-creme);
+	background: var(--card-bg);
+}
+
+/* ── Accessibilité & Utilitaires ── */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* Animations de reveal syncopées */
+@keyframes oki-pop {
+	from {
+		transform: scale(0.6);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	html.js [data-reveal] {
+		opacity: 0;
+		transform: translateY(24px);
+		transition:
+			opacity var(--dur-mesure) var(--ease-ka) var(--d, 0ms),
+			transform var(--dur-mesure) var(--ease-ka) var(--d, 0ms);
+	}
+
+	html.js [data-reveal].in {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		transition-duration: 0.01ms !important;
+		animation-duration: 0.01ms !important;
+	}
+}

app/src/lib/types.ts

@@ -0,0 +1,124 @@
+export type Region = 'GUADELOUPE' | 'MARTINIQUE' | 'GUYANE' | 'REUNION';
+export type Categorie = 'MONUMENT' | 'LIEU';
+export type Difficulte = 'FACILE' | 'MOYEN' | 'DIFFICILE' | 'EXPERT';
+
+export interface Coordonnees {
+	lat: number;
+	lon: number;
+}
+
+export interface Indice {
+	niveau: number;
+	texte: string;
+}
+
+export interface Photo {
+	url: string;
+	credit: string;
+	alt: string;
+	/**
+	 * URLs par largeur (px) pour `srcset`. Présent uniquement dans /api/round :
+	 * pointe vers le proxy /api/photo/[id]?w=… (l'URL Commons d'origine n'est jamais exposée).
+	 */
+	srcset?: Record<'400' | '800' | '1200', string>;
+}
+
+/** Lieu complet — serveur uniquement, jamais exposé tel quel au client. */
+export interface Lieu {
+	id: string;
+	nom: string;
+	nom_creole: string;
+	region: Region;
+	commune: string;
+	coordonnees: Coordonnees;
+	categorie: Categorie;
+	difficulte: Difficulte;
+	wikidata_id: string | null;
+	photo: Photo;
+	indices: Indice[];
+	/**
+	 * Superficie de la commune (km²) — champ optionnel du schéma.
+	 * Sert à élargir le rayon de score pour les communes immenses (ex. Guyane) ;
+	 * le scoring doit tolérer son absence (fallback = rayon de difficulté seul).
+	 */
+	aire_commune_km2?: number;
+}
+
+/**
+ * Lieu du mode street (« An lari a ») — serveur uniquement.
+ * La photo statique est remplacée par une image Mapillary (CC BY-SA 4.0).
+ * `wikidata_id` pointe vers la COMMUNE (phase éducative : fiche de la commune).
+ */
+export interface StreetLieu {
+	id: string;
+	nom: string;
+	nom_creole: string;
+	region: Region;
+	commune: string;
+	coordonnees: Coordonnees;
+	difficulte: Difficulte;
+	mapillary_id: string;
+	credit: { username: string; captured_at: string };
+	is_pano: boolean;
+	wikidata_id: string | null;
+	indices: Indice[];
+	aire_commune_km2?: number;
+}
+
+/** Lieu SANITISÉ envoyé par GET /api/round (aucune coordonnée, commune, région, wikidata_id). */
+export interface RoundPlace {
+	id: string;
+	nom: string;
+	nom_creole: string;
+	categorie: Categorie;
+	difficulte: Difficulte;
+	/** Modes photo (monument/lieu/defi). Absent en mode street. */
+	photo?: Photo;
+	/** Mode street : identifiant d'image Mapillary à charger dans la visionneuse. */
+	mapillaryId?: string;
+	/** Crédit affiché au résultat en mode street (« © auteur / Mapillary (CC BY-SA 4.0) »). */
+	credit?: string;
+	indices: Indice[];
+}
+
+/** Réponse de POST /api/guess : la vérité n'est révélée qu'après soumission. */
+export interface GuessResult {
+	distanceKm: number | null;
+	score: number;
+	/** Rayon effectif utilisé par la courbe de score (km, arrondi à 0,1) — null si « Passer ». */
+	radiusEffKm: number | null;
+	coordonnees: Coordonnees;
+	commune: string;
+	region: Region;
+	nom: string;
+	nom_creole: string;
+	wikidata_id: string | null;
+}
+
+/**
+ * Entrée du catalogue Explorer : coords arrondies à 0.05°, mode sans score.
+ * Pas d'`id` : exposer l'uuid du lieu permettrait de corréler l'id d'un round
+ * (/api/round) avec la commune/région — fuite de réponse (audit C4).
+ */
+export interface ExplorerLieu {
+	nom: string;
+	nom_creole: string;
+	region: Region;
+	commune: string;
+	coordonnees: Coordonnees;
+	categorie: Categorie;
+	difficulte: Difficulte;
+	wikidata_id: string | null;
+	photo: Photo;
+}
+
+/** Réponse normalisée de GET /api/wiki/[qid]. */
+export interface WikiSummary {
+	qid: string;
+	title: string;
+	extract: string;
+	url: string;
+	thumbnail: string | null;
+}
+
+export type GameMode = 'monument' | 'lieu' | 'defi' | 'street';

app/src/routes/+layout.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import '$lib/styles/oki.css';
+	import LangSwitch from '$lib/components/LangSwitch.svelte';
+	import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
+	import FlagBar from '$lib/components/FlagBar.svelte';
+	import CommandBar from '$lib/components/CommandBar.svelte';
+	import StatsModal from '$lib/components/StatsModal.svelte';
+	import { initLang, t } from '$lib/i18n/store.svelte';
+	import { initHistory } from '$lib/stores/history.svelte';
+
+	let { children } = $props();
+
+	let commandBarOuvert = $state(false);
+	let statsOuvert = $state(false);
+
+	onMount(() => {
+		initLang();
+		initHistory();
+	});
+
+	function onGlobalKeydown(e: KeyboardEvent): void {
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+			e.preventDefault();
+			commandBarOuvert = !commandBarOuvert;
+		}
+	}
+</script>
+
+<svelte:window onkeydown={onGlobalKeydown} />
+
+<div class="app">
+	<header class="entete">
+		<a href="/" class="logo" aria-label="JWE — accueil">
+			<svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true" class="logo-icone">
+				<circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5" />
+				<path d="M16 6 L22 22 L16 18 L10 22 Z" fill="currentColor" />
+			</svg>
+			<span class="logo-texte">{t().app.titre}</span>
+		</a>
+
+		<nav class="nav-actions" aria-label="Navigation principale">
+			<button
+				type="button"
+				class="btn-command-bar"
+				onclick={() => (commandBarOuvert = true)}
+				aria-label={t().commandBar.raccourci}
+				title={t().commandBar.raccourci}
+			>
+				<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<circle cx="11" cy="11" r="8" />
+					<line x1="21" y1="21" x2="16.65" y2="16.65" />
+				</svg>
+				<span class="texte-cmd">Recherche</span>
+				<kbd class="badge-k">⌘K</kbd>
+			</button>
+
+			<a href="/explorer" class="lien-nav">{t().modes.explorer}</a>
+
+			<button
+				type="button"
+				class="btn-nav-icon"
+				onclick={() => (statsOuvert = true)}
+				aria-label={t().stats.titre}
+				title={t().stats.titre}
+			>
+				<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<line x1="18" y1="20" x2="18" y2="10" />
+					<line x1="12" y1="20" x2="12" y2="4" />
+					<line x1="6" y1="20" x2="6" y2="14" />
+				</svg>
+			</button>
+
+			<ThemeSwitch />
+			<LangSwitch />
+		</nav>
+	</header>
+
+	<FlagBar hauteur={5} />
+
+	<main id="contenu-principal">
+		{@render children()}
+	</main>
+
+	<CommandBar
+		ouvert={commandBarOuvert}
+		onfermer={() => (commandBarOuvert = false)}
+		onouvrirStats={() => (statsOuvert = true)}
+	/>
+
+	<StatsModal ouvert={statsOuvert} onfermer={() => (statsOuvert = false)} />
+</div>
+
+<style>
+	.app {
+		height: 100dvh;
+		display: flex;
+		flex-direction: column;
+		background: var(--noir-oki);
+		color: var(--blanc-creme);
+	}
+
+	.entete {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.55rem 1rem;
+		background: var(--noir-oki);
+		border-bottom: 1px solid var(--line);
+		z-index: 10;
+	}
+
+	.logo {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--blanc-creme);
+		text-decoration: none;
+	}
+
+	.logo-icone {
+		color: var(--or-oki);
+	}
+
+	.logo-texte {
+		font-family: var(--font-display);
+		font-size: 1.35rem;
+		font-weight: 900;
+		letter-spacing: 0.04em;
+		color: var(--blanc-creme);
+	}
+
+	.nav-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+	}
+
+	.btn-command-bar {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		background: var(--card-bg);
+		color: var(--muted);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		padding: 0.4rem 0.7rem;
+		font-size: 0.85rem;
+		font-family: var(--font-body);
+		cursor: pointer;
+		transition:
+			color var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka),
+			background-color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.btn-command-bar:hover {
+		color: var(--blanc-creme);
+		border-color: var(--or-oki);
+		background: var(--card-bg-hover);
+	}
+
+	.badge-k {
+		background: var(--noir-profond);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		padding: 0.1rem 0.35rem;
+		font-size: 0.72rem;
+		font-weight: 700;
+	}
+
+	.lien-nav {
+		color: var(--blanc-creme);
+		text-decoration: none;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		font-weight: 700;
+		font-size: 0.88rem;
+		letter-spacing: 0.03em;
+		padding: 0.35rem 0.6rem;
+		border-radius: var(--radius-sm);
+		border: 1px solid transparent;
+		transition:
+			color var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.lien-nav:hover {
+		color: var(--or-oki);
+		border-color: var(--line);
+	}
+
+	.btn-nav-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		color: var(--blanc-creme);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		width: 38px;
+		height: 38px;
+		cursor: pointer;
+		transition:
+			color var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka),
+			background-color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.btn-nav-icon:hover {
+		color: var(--or-oki);
+		border-color: var(--or-oki);
+		background: var(--card-bg-hover);
+	}
+
+	main {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	@media (max-width: 640px) {
+		.texte-cmd,
+		.badge-k {
+			display: none;
+		}
+
+		.btn-command-bar {
+			padding: 0.45rem;
+			width: 38px;
+			height: 38px;
+			justify-content: center;
+		}
+	}
+</style>

app/src/routes/+page.svelte

@@ -0,0 +1,545 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import CarteRegions from '$lib/components/CarteRegions.svelte';
+	import Seo from '$lib/components/Seo.svelte';
+	import FlagBar from '$lib/components/FlagBar.svelte';
+	import { t } from '$lib/i18n/store.svelte';
+	import { reveal } from '$lib/motion/reveal';
+	import { syncopatedDelay } from '$lib/motion/tokens';
+	import type { GameMode, Region } from '$lib/types';
+
+	type ChoixRegion = Region | 'TOUTES';
+
+	let region = $state<ChoixRegion>('TOUTES');
+	let mode = $state<GameMode>('monument');
+	let timer = $state(false);
+
+	const modes: { id: GameMode; emoji: string }[] = [
+		{ id: 'monument', emoji: '🏛️' },
+		{ id: 'lieu', emoji: '📍' },
+		{ id: 'defi', emoji: '⛰️' },
+		{ id: 'street', emoji: '🛣️' }
+	];
+
+	function jouer(): void {
+		const params = new URLSearchParams();
+		if (region !== 'TOUTES') params.set('region', region);
+		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>
+
+<Seo title={t().app.sousTitre} description={t().app.sousTitre} path="/" />
+
+<div class="accueil">
+	<div class="panneau-gauche">
+		<section class="hero" aria-label="Présentation">
+			<div class="flag-chip-hero" aria-hidden="true">
+				<span class="flag-chip"></span>
+			</div>
+			<div class="titres-hero">
+				<h1>
+					<span class="masque"><span class="ligne">{t().app.titre}</span></span>
+				</h1>
+				<p class="accroche">
+					<span class="masque"><span class="ligne ligne-retard">{t().micro.kiteSaYe}</span></span>
+				</p>
+			</div>
+			<p class="sous-titre">{t().app.sousTitre}</p>
+		</section>
+
+		<section class="sec-modes" aria-labelledby="titre-modes">
+			<h2 id="titre-modes">{t().accueil.choixMode}</h2>
+			<div class="grille modes">
+				{#each modes as m, i (m.id)}
+					<button
+						type="button"
+						class="carte-mode"
+						class:choisi={mode === m.id}
+						aria-pressed={mode === m.id}
+						data-reveal
+						style:--d="{syncopatedDelay(i)}ms"
+						use:reveal
+						onclick={() => (mode = m.id)}
+					>
+						<span class="emoji" aria-hidden="true">{m.emoji}</span>
+						<span class="nom">{t().modes[m.id]}</span>
+						<span class="desc">{t().modes[`${m.id}Desc`]}</span>
+					</button>
+				{/each}
+				<a
+					href="/explorer"
+					class="carte-mode explorer"
+					data-reveal
+					style:--d="{syncopatedDelay(4)}ms"
+					use:reveal
+				>
+					<span class="emoji" aria-hidden="true">🧭</span>
+					<span class="nom">{t().modes.explorer}</span>
+					<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>
+
+		<div class="actions-bloc">
+			<section class="options" aria-label={t().accueil.options}>
+				<label class="option-timer">
+					<input type="checkbox" bind:checked={timer} />
+					<span>{t().accueil.timer}</span>
+				</label>
+			</section>
+
+			<div class="zone-pouce">
+				<button type="button" class="btn btn-primaire jouer" onclick={jouer}>
+					{t().accueil.jouer}
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<div class="panneau-droite">
+		<section class="sec-regions" aria-labelledby="titre-regions">
+			<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
+			<div class="carte-accueil">
+				<CarteRegions bind:selection={region} cascadeBase={5} />
+				<button
+					type="button"
+					class="btn btn-secondaire toutes"
+					class:choisi={region === 'TOUTES'}
+					aria-pressed={region === 'TOUTES'}
+					onclick={() => (region = 'TOUTES')}
+				>
+					{t().regions.TOUTES}
+				</button>
+			</div>
+		</section>
+	</div>
+
+	<footer class="accueil-footer">
+		<FlagBar hauteur={3} />
+		<div class="footer-contenu">
+			<p class="mention-oki">{t().footer.texteFederation}</p>
+			<div class="liens-footer">
+				<a href="https://o-k-i.net" target="_blank" rel="noopener noreferrer">o-k-i.net</a>
+				<span>·</span>
+				<a href="https://liberapay.com/OKI/donate/" target="_blank" rel="noopener noreferrer">{t().footer.donner}</a>
+				<span>·</span>
+				<a href="https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/JWE" target="_blank" rel="noopener noreferrer">Git</a>
+			</div>
+		</div>
+	</footer>
+</div>
+
+<style>
+	.accueil {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		width: 100%;
+		max-width: 860px;
+		margin: 0 auto;
+		padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
+		display: flex;
+		flex-direction: column;
+		gap: 1.2rem;
+	}
+
+	.panneau-gauche {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.panneau-droite {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.hero {
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.flag-chip-hero {
+		margin-bottom: 0.2rem;
+	}
+
+	.titres-hero {
+		display: flex;
+		align-items: baseline;
+		justify-content: center;
+		gap: 0.8rem;
+		flex-wrap: wrap;
+	}
+
+	.masque {
+		display: block;
+	}
+
+	.ligne {
+		display: inline-block;
+	}
+
+	@keyframes montee-masque {
+		from {
+			transform: translateY(110%);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		:global(html.js) .masque {
+			overflow: hidden;
+		}
+
+		:global(html.js) .ligne {
+			animation: montee-masque var(--dur-mesure) var(--ease-ka) backwards;
+		}
+
+		:global(html.js) .ligne-retard {
+			animation-delay: 120ms;
+		}
+	}
+
+	.hero h1 {
+		margin: 0;
+		font-size: 2.8rem;
+		font-weight: 900;
+		font-family: var(--font-display);
+		color: var(--blanc-creme);
+		letter-spacing: 0.04em;
+		line-height: 1;
+	}
+
+	.accroche {
+		margin: 0;
+		font-size: 1.15rem;
+		font-weight: 700;
+		color: var(--or-oki);
+		font-style: italic;
+	}
+
+	.sous-titre {
+		margin: 0.3rem 0 0;
+		color: var(--muted);
+		font-size: 0.9rem;
+		max-width: 520px;
+	}
+
+	h2 {
+		font-size: 0.95rem;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		color: var(--blanc-creme);
+		margin: 0 0 0.5rem;
+		border-left: 3px solid var(--or-oki);
+		padding-left: 0.5rem;
+	}
+
+	.grille {
+		display: grid;
+		gap: 0.5rem;
+	}
+
+	.modes {
+		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+	}
+
+	.carte-accueil {
+		width: 100%;
+		max-width: 500px;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.toutes {
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		width: 100%;
+		padding: 0.55rem 1rem;
+		font-size: 0.88rem;
+	}
+
+	.toutes.choisi {
+		border-color: var(--or-oki);
+		background: var(--card-bg-hover);
+		color: var(--or-oki);
+		font-weight: 800;
+	}
+
+	.lien-defi {
+		display: block;
+		margin: 0.5rem auto 0;
+		padding: 0.45rem 0.9rem;
+		font-size: 0.85rem;
+	}
+
+	.carte-mode {
+		border: 1px solid var(--line);
+		border-left: 3px solid var(--line);
+		border-radius: var(--radius-sm);
+		background: var(--noir-profond);
+		box-shadow: var(--oki-ombre);
+		cursor: pointer;
+		text-align: center;
+		color: var(--blanc-creme);
+		text-decoration: none;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.2rem;
+		padding: 0.65rem 0.6rem;
+		transition:
+			transform var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka),
+			background-color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.carte-mode .emoji {
+		font-size: 1.35rem;
+	}
+
+	.carte-mode .nom {
+		font-weight: 750;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		font-size: 0.85rem;
+		color: var(--blanc-creme);
+		letter-spacing: 0.02em;
+	}
+
+	.carte-mode .desc {
+		font-size: 0.72rem;
+		color: var(--muted);
+		line-height: 1.25;
+	}
+
+	.carte-mode:hover {
+		transform: translateY(-2px);
+		border-color: var(--or-oki);
+		border-left-color: var(--or-oki);
+		background: var(--card-bg-hover);
+	}
+
+	.carte-mode.choisi {
+		border-color: var(--or-oki);
+		border-left-color: var(--or-oki);
+		background: var(--card-bg-hover);
+	}
+
+	.carte-mode.choisi .nom {
+		color: var(--or-oki);
+	}
+
+	.actions-bloc {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 0.8rem;
+		margin-top: 0.2rem;
+	}
+
+	.options {
+		display: flex;
+		align-items: center;
+	}
+
+	.option-timer {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.9rem;
+		color: var(--blanc-creme);
+		cursor: pointer;
+		font-weight: 600;
+	}
+
+	.option-timer input {
+		width: 1.15rem;
+		height: 1.15rem;
+		accent-color: var(--or-oki);
+	}
+
+	.zone-pouce {
+		display: flex;
+		flex: 1;
+		min-width: 180px;
+		justify-content: flex-end;
+	}
+
+	.jouer {
+		width: 100%;
+		max-width: 320px;
+		min-height: 44px;
+		padding: 0.75rem 1.4rem;
+		font-size: 1.1rem;
+		letter-spacing: 0.04em;
+	}
+
+	.accueil-footer {
+		margin-top: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding-top: 0.4rem;
+	}
+
+	.footer-contenu {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+		font-size: 0.75rem;
+	}
+
+	.mention-oki {
+		margin: 0;
+		color: var(--muted);
+	}
+
+	.liens-footer {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--muted);
+	}
+
+	.liens-footer a {
+		color: var(--or-oki);
+		text-decoration: none;
+		font-weight: 600;
+	}
+
+	.liens-footer a:hover {
+		text-decoration: underline;
+	}
+
+	/* — Desktop Single-Screen Layout (Sans Scroll) — */
+	@media (min-width: 1024px) {
+		.accueil {
+			max-width: 1180px;
+			height: 100%;
+			max-height: calc(100dvh - 56px);
+			overflow: hidden;
+			padding: 0.6rem 1.4rem 0.4rem;
+			display: grid;
+			grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
+			grid-template-rows: minmax(0, 1fr) auto;
+			column-gap: 2.2rem;
+			row-gap: 0.3rem;
+			align-items: center;
+		}
+
+		.panneau-gauche {
+			grid-column: 1;
+			grid-row: 1;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-evenly;
+			gap: 0.4rem;
+			min-height: 0;
+		}
+
+		.hero {
+			text-align: left;
+			align-items: flex-start;
+		}
+
+		.titres-hero {
+			justify-content: flex-start;
+			gap: 0.7rem;
+		}
+
+		.hero h1 {
+			font-size: 2.7rem;
+		}
+
+		.accroche {
+			font-size: 1.15rem;
+		}
+
+		.sous-titre {
+			margin-top: 0.15rem;
+			font-size: 0.88rem;
+		}
+
+		.modes {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		.panneau-droite {
+			grid-column: 2;
+			grid-row: 1;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			min-height: 0;
+		}
+
+		.sec-regions {
+			width: 100%;
+			max-width: 440px;
+			display: flex;
+			flex-direction: column;
+			align-items: stretch;
+		}
+
+		.carte-accueil {
+			max-width: 100%;
+			gap: 0.4rem;
+		}
+
+		.carte-accueil :global(.carte-regions) {
+			max-height: 52dvh;
+			display: flex;
+			justify-content: center;
+		}
+
+		.carte-accueil :global(svg) {
+			max-height: 48dvh;
+			width: auto;
+		}
+
+		.accueil-footer {
+			grid-column: 1 / -1;
+			grid-row: 2;
+			margin-top: 0;
+			padding-top: 0.15rem;
+		}
+	}
+
+	/* Fallback pour petits écrans desktop / hauteurs réduites */
+	@media (min-width: 1024px) and (max-height: 640px) {
+		.accueil {
+			overflow-y: auto;
+		}
+	}
+</style>

app/src/routes/api/defi/[seed]/+server.ts

@@ -0,0 +1,25 @@
+import { json } from '@sveltejs/kit';
+import { getLieuPhotoById, sanitizeRound } from '$lib/server/lieux';
+import { idsPourSeed, seedValide } from '$lib/server/tirage';
+import type { RequestHandler } from './$types';
+
+/**
+ * GET /api/defi/[seed] → { rounds: [5 rounds SANITISÉS] }.
+ * Même seed → mêmes lieux, même ordre, pour tous les joueurs (ADR-001 v1).
+ * Même format que /api/round : jamais de coordonnées, commune, région ni wikidata_id ;
+ * les photos passent par le proxy opaque /api/photo/<uuid>.
+ */
+export const GET: RequestHandler = ({ params }) => {
+	if (!seedValide(params.seed)) {
+		return json(
+			{ erreur: 'Seed invalide (4–40 caractères : lettres, chiffres, tiret, underscore)' },
+			{ status: 400 }
+		);
+	}
+	const rounds = idsPourSeed(params.seed).map((id) => {
+		const lieu = getLieuPhotoById(id);
+		if (!lieu) throw new Error(`Tirage incohérent : id inconnu (${id})`);
+		return sanitizeRound(lieu);
+	});
+	return json({ rounds }, { headers: { 'Cache-Control': 'no-store' } });
+};

app/src/routes/api/guess/+server.ts

@@ -0,0 +1,51 @@
+import { json } from '@sveltejs/kit';
+import { getLieuById, scoreGuess, skipResult } from '$lib/server/lieux';
+import type { RequestHandler } from './$types';
+
+interface GuessBody {
+	id?: unknown;
+	lat?: unknown;
+	lon?: unknown;
+	hintsUsed?: unknown;
+	timeMs?: unknown;
+	skip?: unknown;
+}
+
+/**
+ * POST /api/guess { id, lat, lon, hintsUsed, timeMs? }
+ * → score recalculé serveur + vérité du lieu (révélée seulement ici).
+ * `skip: true` révèle la réponse avec un score de 0 (bouton « Passer »).
+ */
+export const POST: RequestHandler = async ({ request }) => {
+	let body: GuessBody;
+	try {
+		body = (await request.json()) as GuessBody;
+	} catch {
+		return json({ erreur: 'Corps JSON invalide' }, { status: 400 });
+	}
+
+	if (typeof body.id !== 'string') {
+		return json({ erreur: 'id manquant' }, { status: 400 });
+	}
+	const lieu = getLieuById(body.id);
+	if (!lieu) {
+		return json({ erreur: 'Lieu inconnu' }, { status: 404 });
+	}
+
+	if (body.skip === true) {
+		return json(skipResult(lieu));
+	}
+
+	const lat = Number(body.lat);
+	const lon = Number(body.lon);
+	if (!Number.isFinite(lat) || !Number.isFinite(lon) || Math.abs(lat) > 90 || Math.abs(lon) > 180) {
+		return json({ erreur: 'Coordonnées invalides' }, { status: 400 });
+	}
+	const hintsUsed = Math.max(0, Math.floor(Number(body.hintsUsed) || 0));
+	const timeMs =
+		typeof body.timeMs === 'number' && Number.isFinite(body.timeMs) && body.timeMs >= 0
+			? body.timeMs
+			: undefined;
+
+	return json(scoreGuess(lieu, { lat, lon }, hintsUsed, timeMs));
+};

app/src/routes/api/lieux/+server.ts

@@ -0,0 +1,10 @@
+import { json } from '@sveltejs/kit';
+import { catalogueExplorer } from '$lib/server/lieux';
+import type { RequestHandler } from './$types';
+
+/** GET /api/lieux → catalogue Explorer (coords arrondies à 0.05°, mode sans score). */
+export const GET: RequestHandler = () => {
+	return json(catalogueExplorer(), {
+		headers: { 'Cache-Control': 'public, max-age=300' }
+	});
+};

app/src/routes/api/photo/[id]/+server.ts

@@ -0,0 +1,88 @@
+import sharp from 'sharp';
+import { getLieuPhotoById, PHOTO_LARGEURS } from '$lib/server/lieux';
+import type { RequestHandler } from './$types';
+
+const USER_AGENT = 'JWE-OKI/2.0 (https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/JWE; contact OKI)';
+const TTL_MS = 24 * 60 * 60 * 1000; // 24 h
+
+type Largeur = (typeof PHOTO_LARGEURS)[number];
+const LARGEUR_DEFAUT: Largeur = 1200;
+
+/** Cache mémoire : clé `${id}:${w}`, TTL 24 h. */
+const cache = new Map<string, { expires: number; data: Buffer }>();
+/** Déduplication des fetches en vol (même photo demandée en rafale). */
+const enVol = new Map<string, Promise<Buffer | null>>();
+
+/**
+ * Récupère la photo via l'URL Commons stockée dans le corpus (jamais d'URL
+ * fournie par le client — pas de proxy ouvert), puis la retraite avec sharp :
+ * - rotate() : applique l'orientation EXIF avant suppression des métadonnées ;
+ * - métadonnées : sharp ne conserve AUCUNE métadonnée (EXIF/GPS compris) sauf
+ *   appel explicite à withMetadata() — le WebP produit est donc propre ;
+ * - conversion WebP + redimensionnement à la largeur demandée.
+ */
+async function chargerPhoto(id: string, w: Largeur): Promise<Buffer | null> {
+	const lieu = getLieuPhotoById(id);
+	if (!lieu) return null;
+	const res = await fetch(lieu.photo.url, { headers: { 'User-Agent': USER_AGENT } });
+	if (!res.ok) throw new Error(`commons ${res.status}`);
+	const brut = Buffer.from(await res.arrayBuffer());
+	return sharp(brut)
+		.rotate()
+		.resize({ width: w, withoutEnlargement: true })
+		.webp({ quality: 82 })
+		.toBuffer();
+}
+
+/**
+ * GET /api/photo/[id]?w=400|800|1200 → image/webp.
+ * `id` = uuid du lieu (déjà exposé par /api/round). 404 si lieu inconnu.
+ * L'URL ainsi produite est opaque : elle ne révèle ni le nom du fichier
+ * Commons ni le lieu (audit C4).
+ */
+export const GET: RequestHandler = async ({ params, url }) => {
+	const id = params.id;
+	const wParam = url.searchParams.get('w');
+	let w: Largeur = LARGEUR_DEFAUT;
+	if (wParam !== null) {
+		const n = Number(wParam);
+		if (!(PHOTO_LARGEURS as readonly number[]).includes(n)) {
+			return new Response('Largeur invalide (400, 800 ou 1200)', { status: 400 });
+		}
+		w = n as Largeur;
+	}
+
+	const cle = `${id}:${w}`;
+	const hit = cache.get(cle);
+	if (hit && hit.expires > Date.now()) {
+		return reponseWebp(hit.data);
+	}
+
+	// 404 immédiat si l'id est inconnu (avant tout fetch amont).
+	if (!getLieuPhotoById(id)) {
+		return new Response('Lieu inconnu', { status: 404 });
+	}
+
+	try {
+		let promesse = enVol.get(cle);
+		if (!promesse) {
+			promesse = chargerPhoto(id, w).finally(() => enVol.delete(cle));
+			enVol.set(cle, promesse);
+		}
+		const data = await promesse;
+		if (!data) return new Response('Lieu inconnu', { status: 404 });
+		cache.set(cle, { expires: Date.now() + TTL_MS, data });
+		return reponseWebp(data);
+	} catch {
+		return new Response('Photo indisponible', { status: 502 });
+	}
+};
+
+function reponseWebp(data: Buffer): Response {
+	return new Response(new Uint8Array(data), {
+		headers: {
+			'Content-Type': 'image/webp',
+			'Cache-Control': 'public, max-age=86400, immutable'
+		}
+	});
+}

app/src/routes/api/round/+server.ts

@@ -0,0 +1,34 @@
+import { json } from '@sveltejs/kit';
+import { getRandomLieu, getRandomStreet, sanitizeRound, sanitizeRoundStreet } from '$lib/server/lieux';
+import type { RequestHandler } from './$types';
+
+/**
+ * GET /api/round?region=&categorie=&exclude=id1,id2 → lieu aléatoire SANITISÉ.
+ * Avec `mode=street` : pioche dans le corpus Mapillary (catégorie ignorée,
+ * réponse avec `mapillaryId` au lieu de `photo`).
+ */
+export const GET: RequestHandler = ({ url }) => {
+	if (url.searchParams.get('mode') === 'street') {
+		const lieu = getRandomStreet({
+			region: url.searchParams.get('region'),
+			exclude: url.searchParams.get('exclude')
+		});
+		if (!lieu) {
+			return json({ erreur: 'Aucun lieu street disponible pour ces critères' }, { status: 404 });
+		}
+		return json(sanitizeRoundStreet(lieu), {
+			headers: { 'Cache-Control': 'no-store' }
+		});
+	}
+	const lieu = getRandomLieu({
+		region: url.searchParams.get('region'),
+		categorie: url.searchParams.get('categorie'),
+		exclude: url.searchParams.get('exclude')
+	});
+	if (!lieu) {
+		return json({ erreur: 'Aucun lieu disponible pour ces critères' }, { status: 404 });
+	}
+	return json(sanitizeRound(lieu), {
+		headers: { 'Cache-Control': 'no-store' }
+	});
+};

app/src/routes/api/wiki/[qid]/+server.ts

@@ -0,0 +1,93 @@
+import { json } from '@sveltejs/kit';
+import type { WikiSummary } from '$lib/types';
+import type { RequestHandler } from './$types';
+
+const USER_AGENT = 'JWE-OKI/2.0 (https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/JWE; contact OKI)';
+const TTL_MS = 24 * 60 * 60 * 1000; // 24 h
+const CACHE_CONTROL = 'public, max-age=86400';
+
+const cache = new Map<string, { expires: number; summary: WikiSummary }>();
+
+interface WbEntity {
+	labels?: { fr?: { value: string } };
+	sitelinks?: { frwiki?: { title: string } };
+}
+
+interface WbResponse {
+	entities?: Record<string, WbEntity>;
+}
+
+interface RestSummary {
+	title?: string;
+	extract?: string;
+	content_urls?: { desktop?: { page?: string } };
+	thumbnail?: { source?: string };
+}
+
+/** GET /api/wiki/[qid] → extrait Wikipédia FR normalisé (404 {reason:'no-frwiki'} si pas de sitelink fr). */
+export const GET: RequestHandler = async ({ params, fetch }) => {
+	const qid = params.qid;
+	if (!/^Q\d+$/.test(qid)) {
+		return json({ erreur: 'Identifiant Wikidata invalide' }, { status: 400 });
+	}
+
+	const cached = cache.get(qid);
+	if (cached && cached.expires > Date.now()) {
+		return json(cached.summary, { headers: { 'Cache-Control': CACHE_CONTROL } });
+	}
+
+	const headers = { 'User-Agent': USER_AGENT, Accept: 'application/json' };
+
+	// 1. Wikidata : sitelink frwiki (+ libellé fr en fallback)
+	// Fallback de langue : fr UNIQUEMENT, volontairement sans repli sur en —
+	// l'absence d'article français devient un appel à contribution (Cas B), pas
+	// une redirection silencieuse vers Wikipédia en anglais.
+	const wbUrl = `https://www.wikidata.org/w/api.php?action=wbgetentities&ids=${encodeURIComponent(qid)}&props=sitelinks%7Clabels&sitefilter=frwiki&languages=fr&format=json`;
+	let entity: WbEntity | undefined;
+	try {
+		const res = await fetch(wbUrl, { headers });
+		if (!res.ok) throw new Error(`wikidata ${res.status}`);
+		// L'API résout les redirections : l'entité peut être indexée par le QID cible.
+		const entities = ((await res.json()) as WbResponse).entities ?? {};
+		entity = entities[qid] ?? Object.values(entities)[0];
+	} catch {
+		return json({ erreur: 'Wikidata injoignable' }, { status: 502 });
+	}
+
+	const titre = entity?.sitelinks?.frwiki?.title;
+	if (!titre) {
+		// QID existant mais pas d'article frwiki (cas intermédiaire, audit A3) :
+		// `reason: no-frwiki` permet au front d'afficher la variante « Pwen blindé —
+		// Pa nyen an fransé » (fiche Wikidata présente, article FR à traduire/créer),
+		// distincte du Cas B « lacune totale » (wikidata_id null côté lieu).
+		return json(
+			{ reason: 'no-frwiki' },
+			{ status: 404, headers: { 'Cache-Control': CACHE_CONTROL } }
+		);
+	}
+
+	// 2. Wikipédia FR : résumé de l'article
+	let data: RestSummary;
+	try {
+		const res = await fetch(
+			`https://fr.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(titre)}`,
+			{ headers }
+		);
+		if (res.status === 404) return json({ erreur: 'Article introuvable' }, { status: 404 });
+		if (!res.ok) throw new Error(`wikipedia ${res.status}`);
+		data = (await res.json()) as RestSummary;
+	} catch {
+		return json({ erreur: 'Wikipédia injoignable' }, { status: 502 });
+	}
+
+	const summary: WikiSummary = {
+		qid,
+		title: data.title ?? titre,
+		extract: data.extract ?? '',
+		url: data.content_urls?.desktop?.page ?? `https://fr.wikipedia.org/wiki/${encodeURIComponent(titre)}`,
+		thumbnail: data.thumbnail?.source ?? null
+	};
+	cache.set(qid, { expires: Date.now() + TTL_MS, summary });
+
+	return json(summary, { headers: { 'Cache-Control': CACHE_CONTROL } });
+};

app/src/routes/defi/[seed]/+page.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import '$lib/styles/jeu.css';
+	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 Seo from '$lib/components/Seo.svelte';
+	import TimerRing from '$lib/components/TimerRing.svelte';
+	import { t } from '$lib/i18n/store.svelte';
+	import { compte } from '$lib/motion/countup';
+	import { reveal } from '$lib/motion/reveal';
+	import { syncopatedDelay } from '$lib/motion/tokens';
+	import { fonduMesure, monteeMesure } from '$lib/motion/transitions';
+	import { partager } from '$lib/partage';
+	import { defi } from '$lib/stores/defi.svelte';
+	import { ajouterPartie } from '$lib/stores/history.svelte';
+	import type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
+
+	let { data } = $props();
+	const seed = $derived(data.seed);
+	const rounds = $derived(data.rounds);
+
+	const timerActif = $derived(page.url.searchParams.get('timer') === '1');
+
+	let place = $state<RoundPlace | null>(null);
+	let guess = $state<Coordonnees | null>(null);
+	let result = $state<GuessResult | null>(null);
+	let indicesMontres = $state<string[]>([]);
+	let erreur = $state(false);
+	let enCours = $state(false); // requête guess en vol
+
+	let timerRef: ReturnType<typeof TimerRing> | undefined = $state();
+	let bilan = $state(false); // écran final du défi
+	let lienCopie = $state(false); // retour visuel du bouton « Copier le lien »
+
+	const mancheCourante = $derived(defi.manches.length + 1);
+	const defiTermine = $derived(defi.termine);
+	// 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 }
+			];
+		})
+	);
+
+	// Les 5 lieux sont préchargés par le load : la manche courante suit l'état du store.
+	function chargerRound(): void {
+		guess = null;
+		result = null;
+		indicesMontres = [];
+		place = rounds[defi.manches.length] ?? null;
+		erreur = !place;
+	}
+
+	async function soumettre(skip: boolean): Promise<void> {
+		if (!place || result || enCours) return;
+		if (!skip && !guess) return;
+		enCours = true;
+		try {
+			const body: Record<string, unknown> = { id: place.id };
+			if (skip) {
+				body.skip = true;
+			} else {
+				body.lat = guess!.lat;
+				body.lon = guess!.lon;
+				body.hintsUsed = indicesMontres.length;
+				if (timerActif && timerRef) body.timeMs = timerRef.tempsMs();
+			}
+			const res = await fetch('/api/guess', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(body)
+			});
+			if (!res.ok) throw new Error(String(res.status));
+			result = (await res.json()) as GuessResult;
+			defi.ajouter({ place, guess: skip ? null : guess, result });
+			if (defi.termine) {
+				ajouterPartie({
+					mode: 'defi',
+					region: 'TOUTES',
+					scoreTotal: defi.total,
+					roundsCount: defi.manches.length,
+					rounds: defi.manches.map((m) => ({
+						nom: m.result.nom,
+						commune: m.result.commune,
+						region: m.result.region,
+						distanceKm: m.result.distanceKm,
+						score: m.result.score
+					}))
+				});
+			}
+		} catch {
+			erreur = true;
+		} finally {
+			enCours = false;
+		}
+	}
+
+	function montrerIndice(): void {
+		if (!place) return;
+		const prochain = place.indices.find((i) => !indicesMontres.includes(i.texte));
+		if (prochain) indicesMontres = [...indicesMontres, prochain.texte];
+	}
+
+	function suivant(): void {
+		chargerRound();
+	}
+
+	function montrerBilan(): void {
+		bilan = true;
+	}
+
+	function rejouerDefi(): void {
+		defi.reinitialiser();
+		bilan = false;
+		lienCopie = false;
+		chargerRound();
+	}
+
+	/** Copie l'URL du défi dans le presse-papiers (repli : champ temporaire + sélection). */
+	async function copierLien(): Promise<void> {
+		const url = `${window.location.origin}/defi/${seed}`;
+		try {
+			await navigator.clipboard.writeText(url);
+		} catch {
+			// Contexte non sécurisé (HTTP) ou navigateur sans Clipboard API.
+			const champ = document.createElement('textarea');
+			champ.value = url;
+			document.body.appendChild(champ);
+			champ.select();
+			document.execCommand('copy');
+			champ.remove();
+		}
+		lienCopie = true;
+		setTimeout(() => (lienCopie = false), 2500);
+	}
+
+	// (Ré)initialise le défi au montage et à chaque changement de seed :
+	// en navigation client d'un /defi/<seed> vers un autre, le composant est conservé.
+	let seedJouee = '';
+	$effect(() => {
+		if (seed === seedJouee) return;
+		seedJouee = seed;
+		defi.reinitialiser();
+		bilan = false;
+		lienCopie = false;
+		chargerRound();
+	});
+</script>
+
+<Seo
+	title="{t().modes.defi} — seed {seed}"
+	description={t().modes.defiDesc}
+	path="/defi/{seed}"
+/>
+
+<div class="jeu">
+	{#if bilan}
+		<div class="bilan" in:monteeMesure>
+			<h1>{t().defi.bilan}</h1>
+			<p class="seed-discret">{t().defi.titreSeed} <strong>{seed}</strong></p>
+			<div class="filet-drapeau" aria-hidden="true">
+				<span class="seg seg-vert"></span><span class="seg seg-corail"></span><span class="seg seg-bleu"></span>
+			</div>
+			<p class="total">
+				<span class="valeur" aria-hidden="true" use:compte={defi.total}>{defi.total}</span>
+				<span class="sr-only">{defi.total}</span>
+				<span class="unite">{t().defi.scoreTotal}</span>
+			</p>
+			<div class="bilan-carte">
+				<CarteRegions selectionnable={false} marqueurs={marqueursRecap} />
+			</div>
+			<ol class="recap">
+				{#each defi.manches as m, i (m.place.id)}
+					<li data-reveal style:--d="{syncopatedDelay(i)}ms" use:reveal>
+						<span class="r-nom">{i + 1}. {m.result.nom}</span>
+						<span class="r-region">{t().regions[m.result.region]}</span>
+						<span class="r-score">{m.result.score} {t().resultat.points}</span>
+					</li>
+				{/each}
+			</ol>
+			<div class="bilan-actions">
+				<button type="button" class="btn btn-primaire" onclick={partager}>
+					{t().defi.partager}
+				</button>
+				<button type="button" class="btn btn-secondaire" onclick={() => void copierLien()}>
+					{lienCopie ? t().defi.lienCopie : t().defi.copierLien}
+				</button>
+				<button type="button" class="btn btn-secondaire" onclick={rejouerDefi}>
+					{t().resultat.rejouer}
+				</button>
+				<a href="/" class="btn btn-tertiaire">{t().resultat.retourAccueil}</a>
+			</div>
+			<p class="legende">
+				<span class="puce joueur" aria-hidden="true">●</span> {t().defi.taPosition} —
+				<span class="puce reelle" aria-hidden="true">●</span> {t().defi.positionReelle}
+			</p>
+		</div>
+	{:else if erreur}
+		<div class="etat" in:fonduMesure>
+			<p>{t().jeu.erreur}</p>
+			<button type="button" class="btn btn-secondaire" onclick={chargerRound}>
+				{t().jeu.reessayer}
+			</button>
+		</div>
+	{:else if place}
+		<div class="split" class:resultat={!!result} in:monteeMesure>
+			<section class="panneau-photo">
+				{#if result}
+					<div class="resultat-scroll">
+						<ResultPanel
+							{result}
+							creditPhoto={place.photo?.credit}
+							labelBouton={defiTermine ? t().resultat.voirBilan : t().resultat.suivant}
+							onsuivant={defiTermine ? montrerBilan : suivant}
+						/>
+					</div>
+				{:else if place.photo}
+					<PhotoPanel photo={place.photo} />
+				{/if}
+				{#if !result && indicesMontres.length > 0}
+					<aside class="indices" aria-live="polite">
+						{#each indicesMontres as texte, i (texte)}
+							<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
+						{/each}
+					</aside>
+				{/if}
+			</section>
+
+			<section class="panneau-carte">
+				<GameMap
+					bind:guess
+					real={result ? result.coordonnees : null}
+					distanceKm={result ? result.distanceKm : null}
+					interactive={!result}
+					onvalidate={() => void soumettre(false)}
+				/>
+				<div class="statut">
+					{#if !defiTermine}
+						<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
+					{/if}
+					<span class="badge-seed">{t().defi.titreSeed} {seed}</span>
+					{#if timerActif && !result}
+						<span class="badge-timer">
+							<TimerRing bind:this={timerRef} actif={!result} />
+						</span>
+					{/if}
+				</div>
+				{#if !result && !guess}
+					<p class="aide-carte">{t().jeu.poserMarqueur}</p>
+				{/if}
+			</section>
+		</div>
+
+		{#if !result}
+			<div class="barre-actions">
+				<div class="actions-secondaires">
+					<button
+						type="button"
+						class="btn btn-tertiaire"
+						onclick={montrerIndice}
+						disabled={indicesMontres.length >= place.indices.length}
+					>
+						{t().jeu.indice}
+						<span class="penalite">{t().jeu.indicePenalite}</span>
+					</button>
+					<button type="button" class="btn btn-secondaire" onclick={() => void soumettre(true)}>
+						{t().jeu.passer}
+					</button>
+				</div>
+				<button
+					type="button"
+					class="btn btn-primaire valider"
+					disabled={!guess || enCours}
+					onclick={() => void soumettre(false)}
+				>
+					{t().jeu.valider}
+				</button>
+			</div>
+		{/if}
+	{:else}
+		<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
+	{/if}
+</div>
+

app/src/routes/defi/[seed]/+page.ts

@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import type { RoundPlace } from '$lib/types';
+import type { PageLoad } from './$types';
+
+/** Charge les 5 rounds du défi seedé via l'API (mêmes lieux pour tous les joueurs). */
+export const load: PageLoad = async ({ params, fetch }) => {
+	const res = await fetch(`/api/defi/${params.seed}`);
+	if (res.status === 400) error(400, 'Seed de défi invalide');
+	if (!res.ok) error(500, 'Impossible de charger ce défi');
+	const data = (await res.json()) as { rounds: RoundPlace[] };
+	return { seed: params.seed, rounds: data.rounds };
+};

app/src/routes/explorer/+page.svelte

@@ -0,0 +1,298 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import GameMap from '$lib/components/GameMap.svelte';
+	import WikiFiche from '$lib/components/WikiFiche.svelte';
+	import Seo from '$lib/components/Seo.svelte';
+	import { t } from '$lib/i18n/store.svelte';
+	import { REGIONS } from '$lib/map/regions';
+	import type { ExplorerLieu, Region } from '$lib/types';
+
+	type Filtre = Region | 'TOUTES';
+
+	let lieux = $state<ExplorerLieu[]>([]);
+	let filtre = $state<Filtre>('TOUTES');
+	let selection = $state<ExplorerLieu | null>(null);
+	let erreur = $state(false);
+
+	const lieuxFiltres = $derived(
+		filtre === 'TOUTES' ? lieux : lieux.filter((l) => l.region === filtre)
+	);
+	const markers = $derived(
+		lieuxFiltres.map((l) => ({
+			// Id éphémère côté client (indice dans le catalogue) : /api/lieux n'expose
+			// plus l'uuid du lieu, pour ne pas corréler un id de round avec sa commune (C4).
+			id: String(lieux.indexOf(l)),
+			lat: l.coordonnees.lat,
+			lon: l.coordonnees.lon,
+			label: `${l.nom} — ${l.commune}`
+		}))
+	);
+
+	function ouvrir(id: string): void {
+		selection = lieux[Number(id)] ?? null;
+	}
+
+	onMount(() => {
+		void (async () => {
+			try {
+				const res = await fetch('/api/lieux');
+				if (!res.ok) throw new Error(String(res.status));
+				lieux = (await res.json()) as ExplorerLieu[];
+			} catch {
+				erreur = true;
+			}
+		})();
+	});
+</script>
+
+<Seo title={t().explorer.titre} description={t().modes.explorerDesc} path="/explorer" />
+
+<div class="explorer">
+	<div class="filtres" role="group" aria-label={t().explorer.filtrer}>
+		<button
+			type="button"
+			class:actif={filtre === 'TOUTES'}
+			aria-pressed={filtre === 'TOUTES'}
+			onclick={() => (filtre = 'TOUTES')}
+		>
+			{t().regions.TOUTES}
+		</button>
+		{#each REGIONS as r (r)}
+			<button
+				type="button"
+				class:actif={filtre === r}
+				aria-pressed={filtre === r}
+				onclick={() => (filtre = r)}
+			>
+				{t().regions[r]}
+			</button>
+		{/each}
+	</div>
+
+	<div class="carte-explorer">
+		{#if erreur}
+			<p class="erreur">{t().jeu.erreur}</p>
+		{:else}
+			<GameMap interactive={false} {markers} onmarkerclick={ouvrir} />
+		{/if}
+	</div>
+
+	<!-- Panneau latéral (desktop) / bottom sheet (mobile) -->
+	<aside class="fiche" class:ouvert={!!selection} aria-live="polite">
+		{#if selection}
+			<button
+				type="button"
+				class="fermer"
+				aria-label={t().explorer.fermer}
+				onclick={() => (selection = null)}
+			>
+				✕
+			</button>
+			<figure class="fiche-photo">
+				<img
+					src={selection.photo.url}
+					alt={selection.photo.alt}
+					loading="lazy"
+					decoding="async"
+				/>
+				<figcaption>{selection.photo.credit}</figcaption>
+			</figure>
+			<h1>{selection.nom}</h1>
+			{#if selection.nom_creole && selection.nom_creole !== selection.nom}
+				<p class="creole">{selection.nom_creole}</p>
+			{/if}
+			<p class="localisation">
+				{t().resultat.commune} : {selection.commune} — {t().regions[selection.region]}
+			</p>
+			{#key selection.nom}
+				<WikiFiche nom={selection.nom} wikidataId={selection.wikidata_id} />
+			{/key}
+		{:else}
+			<p class="vide">{t().explorer.aucuneFiche}</p>
+		{/if}
+	</aside>
+</div>
+
+<style>
+	.explorer {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		min-height: 0;
+		overflow: hidden; /* la partie repliée du sheet ne doit pas agrandir la page */
+	}
+
+	.filtres {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+		padding: 0.6rem 0.8rem;
+		background: var(--noir-profond);
+		border-bottom: 1px solid var(--line);
+	}
+
+	.filtres button {
+		border: 1px solid var(--line);
+		background: var(--card-bg);
+		color: var(--blanc-creme);
+		border-radius: var(--radius-sm);
+		padding: 0.35rem 0.8rem;
+		font-size: 0.85rem;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		font-weight: 700;
+		cursor: pointer;
+		transition:
+			background-color var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka),
+			color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.filtres button:hover {
+		border-color: var(--or-oki);
+		color: var(--or-oki);
+	}
+
+	.filtres button.actif {
+		background: var(--or-oki);
+		border-color: var(--or-oki);
+		color: #0d0d0d;
+	}
+
+	:global(html.light-theme) .filtres button.actif {
+		color: #ffffff;
+	}
+
+	.carte-explorer {
+		flex: 1;
+		min-height: 0;
+		padding: 0.6rem 0.6rem 3.6rem;
+	}
+
+	.erreur {
+		text-align: center;
+		color: var(--muted);
+	}
+
+	/* Bottom sheet mobile : overlay dont les événements sont scopés à lui-même */
+	.fiche {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		max-height: 62%;
+		overflow-y: auto;
+		background: var(--noir-profond);
+		color: var(--blanc-creme);
+		border-top: 1px solid var(--line);
+		border-radius: var(--radius-md) var(--radius-md) 0 0;
+		box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4);
+		padding: 1.2rem;
+		transform: translateY(calc(100% - 3.2rem));
+		transition: transform var(--dur-mesure) var(--ease-ka);
+	}
+
+	.fiche.ouvert {
+		transform: translateY(0);
+	}
+
+	.fiche .vide {
+		margin: 0;
+		text-align: center;
+		color: var(--muted);
+		padding-bottom: 0.4rem;
+	}
+
+	.fermer {
+		position: absolute;
+		top: 0.6rem;
+		right: 0.6rem;
+		border: 1px solid var(--line);
+		background: var(--card-bg);
+		color: var(--blanc-creme);
+		width: 2rem;
+		height: 2rem;
+		border-radius: var(--radius-sm);
+		font-size: 1rem;
+		cursor: pointer;
+	}
+
+	.fermer:hover {
+		border-color: var(--or-oki);
+		color: var(--or-oki);
+	}
+
+	.fiche-photo {
+		margin: 0 0 0.6rem;
+	}
+
+	.fiche-photo img {
+		width: 100%;
+		max-height: 200px;
+		object-fit: cover;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--line);
+		display: block;
+	}
+
+	.fiche-photo figcaption {
+		font-size: 0.72rem;
+		color: var(--muted);
+		margin-top: 0.2rem;
+	}
+
+	.fiche h1 {
+		margin: 0;
+		font-size: 1.35rem;
+		color: var(--or-oki);
+	}
+
+	.creole {
+		margin: 0.1rem 0 0;
+		font-style: italic;
+		color: var(--or-oki);
+	}
+
+	.localisation {
+		margin: 0.3rem 0 0.8rem;
+		color: var(--muted);
+		font-size: 0.92rem;
+	}
+
+	/* Desktop */
+	@media (min-width: 768px) {
+		.explorer {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) 380px;
+			grid-template-rows: auto minmax(0, 1fr);
+		}
+
+		.filtres {
+			grid-column: 1 / -1;
+		}
+
+		.carte-explorer {
+			padding: 0.8rem;
+			min-height: 0;
+		}
+
+		.fiche {
+			position: static;
+			transform: none;
+			max-height: none;
+			min-height: 0;
+			border-radius: 0;
+			border-top: none;
+			border-left: 1px solid var(--line);
+			box-shadow: none;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.fiche {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,308 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import '$lib/styles/jeu.css';
+	import GameMap from '$lib/components/GameMap.svelte';
+	import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
+	import PhotoPanel from '$lib/components/PhotoPanel.svelte';
+	import StreetPanel from '$lib/components/StreetPanel.svelte';
+	import ResultPanel from '$lib/components/ResultPanel.svelte';
+	import Seo from '$lib/components/Seo.svelte';
+	import TimerRing from '$lib/components/TimerRing.svelte';
+	import { t } from '$lib/i18n/store.svelte';
+	import { compte } from '$lib/motion/countup';
+	import { reveal } from '$lib/motion/reveal';
+	import { syncopatedDelay } from '$lib/motion/tokens';
+	import { fonduMesure, monteeMesure } from '$lib/motion/transitions';
+	import { partager } from '$lib/partage';
+	import { defi } from '$lib/stores/defi.svelte';
+	import { ajouterPartie } from '$lib/stores/history.svelte';
+	import type { Coordonnees, GuessResult, Region, RoundPlace } from '$lib/types';
+
+	let { data } = $props();
+	const mode = $derived(data.mode);
+
+	const regionParam = $derived(page.url.searchParams.get('region'));
+	const timerActif = $derived(page.url.searchParams.get('timer') === '1');
+
+	let place = $state<RoundPlace | null>(null);
+	let guess = $state<Coordonnees | null>(null);
+	let result = $state<GuessResult | null>(null);
+	let indicesMontres = $state<string[]>([]);
+	let chargement = $state(true);
+	let erreur = $state(false);
+	let enCours = $state(false); // requête guess en vol
+
+	let timerRef: ReturnType<typeof TimerRing> | undefined = $state();
+	let joues = $state<string[]>([]); // ids déjà joués (évite les répétitions)
+	let bilan = $state(false); // écran final du défi
+
+	const estDefi = $derived(mode === 'defi');
+	const mancheCourante = $derived(defi.manches.length + 1);
+	const defiTermine = $derived(estDefi && defi.termine);
+	// 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> {
+		chargement = true;
+		erreur = false;
+		place = null;
+		guess = null;
+		result = null;
+		indicesMontres = [];
+		try {
+			const params = new URLSearchParams();
+			if (regionParam) params.set('region', regionParam);
+			if (mode === 'monument') params.set('categorie', 'MONUMENT');
+			if (mode === 'lieu') params.set('categorie', 'LIEU');
+			if (mode === 'street') params.set('mode', 'street');
+			if (joues.length > 0) params.set('exclude', joues.join(','));
+			const res = await fetch(`/api/round?${params}`);
+			if (!res.ok) throw new Error(String(res.status));
+			place = (await res.json()) as RoundPlace;
+		} catch {
+			erreur = true;
+		} finally {
+			chargement = false;
+		}
+	}
+
+	async function soumettre(skip: boolean): Promise<void> {
+		if (!place || result || enCours) return;
+		if (!skip && !guess) return;
+		enCours = true;
+		try {
+			const body: Record<string, unknown> = { id: place.id };
+			if (skip) {
+				body.skip = true;
+			} else {
+				body.lat = guess!.lat;
+				body.lon = guess!.lon;
+				body.hintsUsed = indicesMontres.length;
+				if (timerActif && timerRef) body.timeMs = timerRef.tempsMs();
+			}
+			const res = await fetch('/api/guess', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(body)
+			});
+			if (!res.ok) throw new Error(String(res.status));
+			result = (await res.json()) as GuessResult;
+			joues = [...joues, place.id];
+			if (estDefi) {
+				defi.ajouter({ place, guess: skip ? null : guess, result });
+				if (defi.termine) {
+					ajouterPartie({
+						mode: 'defi',
+						region: 'TOUTES',
+						scoreTotal: defi.total,
+						roundsCount: defi.manches.length,
+						rounds: defi.manches.map((m) => ({
+							nom: m.result.nom,
+							commune: m.result.commune,
+							region: m.result.region,
+							distanceKm: m.result.distanceKm,
+							score: m.result.score
+						}))
+					});
+				}
+			} else {
+				ajouterPartie({
+					mode,
+					region: (regionParam as Region) || (result.region as Region) || 'TOUTES',
+					scoreTotal: result.score,
+					roundsCount: 1,
+					rounds: [
+						{
+							nom: result.nom,
+							commune: result.commune,
+							region: result.region,
+							distanceKm: result.distanceKm,
+							score: result.score
+						}
+					]
+				});
+			}
+		} catch {
+			erreur = true;
+		} finally {
+			enCours = false;
+		}
+	}
+
+	function montrerIndice(): void {
+		if (!place) return;
+		const prochain = place.indices.find((i) => !indicesMontres.includes(i.texte));
+		if (prochain) indicesMontres = [...indicesMontres, prochain.texte];
+	}
+
+	function suivant(): void {
+		void chargerRound();
+	}
+
+	function montrerBilan(): void {
+		bilan = true;
+	}
+
+	function rejouerDefi(): void {
+		defi.reinitialiser();
+		joues = [];
+		bilan = false;
+		void chargerRound();
+	}
+
+	onMount(() => {
+		// Nouveau défi : on repart de zéro quand on arrive sur la première manche.
+		if (estDefi && defi.termine) defi.reinitialiser();
+		void chargerRound();
+	});
+</script>
+
+<Seo
+	title={t().modes[mode]}
+	description={t().modes[`${mode}Desc`]}
+	path="/jeu/{mode}"
+/>
+
+<div class="jeu">
+	{#if bilan}
+		<div class="bilan" in:monteeMesure>
+			<h1>{t().defi.bilan}</h1>
+			<div class="filet-drapeau" aria-hidden="true">
+				<span class="seg seg-vert"></span><span class="seg seg-corail"></span><span class="seg seg-bleu"></span>
+			</div>
+			<p class="total">
+				<span class="valeur" aria-hidden="true" use:compte={defi.total}>{defi.total}</span>
+				<span class="sr-only">{defi.total}</span>
+				<span class="unite">{t().defi.scoreTotal}</span>
+			</p>
+			<div class="bilan-carte">
+				<CarteRegions selectionnable={false} marqueurs={marqueursRecap} />
+			</div>
+			<ol class="recap">
+				{#each defi.manches as m, i (m.place.id)}
+					<li data-reveal style:--d="{syncopatedDelay(i)}ms" use:reveal>
+						<span class="r-nom">{i + 1}. {m.result.nom}</span>
+						<span class="r-region">{t().regions[m.result.region]}</span>
+						<span class="r-score">{m.result.score} {t().resultat.points}</span>
+					</li>
+				{/each}
+			</ol>
+			<div class="bilan-actions">
+				<button type="button" class="btn btn-primaire" onclick={partager}>
+					{t().defi.partager}
+				</button>
+				<button type="button" class="btn btn-secondaire" onclick={rejouerDefi}>
+					{t().resultat.rejouer}
+				</button>
+				<a href="/" class="btn btn-tertiaire">{t().resultat.retourAccueil}</a>
+			</div>
+			<p class="legende">
+				<span class="puce joueur" aria-hidden="true">●</span> {t().defi.taPosition} —
+				<span class="puce reelle" aria-hidden="true">●</span> {t().defi.positionReelle}
+			</p>
+		</div>
+	{:else if chargement}
+		<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
+	{:else if erreur}
+		<div class="etat" in:fonduMesure>
+			<p>{t().jeu.erreur}</p>
+			<button type="button" class="btn btn-secondaire" onclick={() => void chargerRound()}>
+				{t().jeu.reessayer}
+			</button>
+		</div>
+	{:else if place}
+		<div class="split" class:resultat={!!result} in:monteeMesure>
+			<section class="panneau-photo">
+				{#if result}
+					<div class="resultat-scroll">
+						<ResultPanel
+							{result}
+							creditPhoto={place.photo?.credit ?? place.credit}
+							labelBouton={estDefi && defiTermine ? t().resultat.voirBilan : t().resultat.suivant}
+							onsuivant={estDefi && defiTermine ? montrerBilan : suivant}
+						/>
+					</div>
+				{:else if place.mapillaryId}
+					<StreetPanel mapillaryId={place.mapillaryId} credit={place.credit} />
+				{:else if place.photo}
+					<PhotoPanel photo={place.photo} />
+				{/if}
+				{#if !result && indicesMontres.length > 0}
+					<aside class="indices" aria-live="polite">
+						{#each indicesMontres as texte, i (texte)}
+							<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
+						{/each}
+					</aside>
+				{/if}
+			</section>
+
+			<section class="panneau-carte">
+				<GameMap
+					bind:guess
+					real={result ? result.coordonnees : null}
+					distanceKm={result ? result.distanceKm : null}
+					interactive={!result}
+					onvalidate={() => void soumettre(false)}
+				/>
+				<div class="statut">
+					{#if estDefi && !defiTermine}
+						<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
+					{/if}
+					{#if timerActif && !result}
+						<span class="badge-timer">
+							<TimerRing bind:this={timerRef} actif={!result} />
+						</span>
+					{/if}
+				</div>
+				{#if !result && !guess}
+					<p class="aide-carte">{t().jeu.poserMarqueur}</p>
+				{/if}
+			</section>
+		</div>
+
+		{#if !result}
+			<div class="barre-actions">
+				<div class="actions-secondaires">
+					<button
+						type="button"
+						class="btn btn-tertiaire"
+						onclick={montrerIndice}
+						disabled={indicesMontres.length >= place.indices.length}
+					>
+						{t().jeu.indice}
+						<span class="penalite">{t().jeu.indicePenalite}</span>
+					</button>
+					<button type="button" class="btn btn-secondaire" onclick={() => void soumettre(true)}>
+						{t().jeu.passer}
+					</button>
+				</div>
+				<button
+					type="button"
+					class="btn btn-primaire valider"
+					disabled={!guess || enCours}
+					onclick={() => void soumettre(false)}
+				>
+					{t().jeu.valider}
+				</button>
+			</div>
+		{/if}
+	{/if}
+</div>
+

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

@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import type { GameMode } from '$lib/types';
+import type { PageLoad } from './$types';
+
+const MODES: GameMode[] = ['monument', 'lieu', 'defi', 'street'];
+
+export const load: PageLoad = ({ params }) => {
+	if (!MODES.includes(params.mode as GameMode)) {
+		error(404, 'Mode inconnu');
+	}
+	return { mode: params.mode as GameMode };
+};

app/src/service-worker.ts

@@ -0,0 +1,66 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+
+import { build, files, version } from '$service-worker';
+
+const sw = self as unknown as ServiceWorkerGlobalScope;
+
+const APP_SHELL = `jwe-shell-${version}`; // immuable, recréé à chaque build
+const PHOTOS = 'jwe-photos'; // stale-while-revalidate
+
+const ASSETS = [...build, ...files];
+
+sw.addEventListener('install', (event) => {
+	event.waitUntil(caches.open(APP_SHELL).then((cache) => cache.addAll(ASSETS)));
+});
+
+sw.addEventListener('activate', (event) => {
+	event.waitUntil(
+		caches.keys().then((keys) =>
+			Promise.all(
+				keys
+					.filter((key) => key !== APP_SHELL && key !== PHOTOS)
+					.map((key) => caches.delete(key))
+			)
+		)
+	);
+});
+
+function isPhoto(url: URL): boolean {
+	return (
+		url.hostname === 'upload.wikimedia.org' ||
+		(url.hostname === 'commons.wikimedia.org' && url.pathname.startsWith('/wiki/Special:FilePath')) ||
+		// Proxy photo maison (mode jeu) — réponses immutables, WebP sans métadonnées
+		(url.origin === sw.location.origin && url.pathname.startsWith('/api/photo/'))
+	);
+}
+
+sw.addEventListener('fetch', (event) => {
+	const url = new URL(event.request.url);
+	if (event.request.method !== 'GET') return;
+
+	// App shell : cache d'abord
+	if (ASSETS.includes(url.pathname)) {
+		event.respondWith(caches.match(event.request).then((r) => r ?? fetch(event.request)));
+		return;
+	}
+
+	// Photos Wikimedia : stale-while-revalidate
+	if (isPhoto(url)) {
+		event.respondWith(
+			caches.open(PHOTOS).then(async (cache) => {
+				const cached = await cache.match(event.request);
+				const frais = fetch(event.request)
+					.then((res) => {
+						if (res.ok) void cache.put(event.request, res.clone());
+						return res;
+					})
+					.catch(() => cached as Response);
+				return cached ?? frais;
+			})
+		);
+		return;
+	}
+});

app/static/icon-maskable.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<rect width="512" height="512" fill="#0b3d2e"/>
+	<circle cx="256" cy="256" r="130" fill="none" stroke="#f5efe2" stroke-width="22"/>
+	<path d="M256 148 L312 330 L256 292 L200 330 Z" fill="#e4572e"/>
+</svg>

app/static/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<rect width="512" height="512" rx="96" fill="#0b3d2e"/>
+	<circle cx="256" cy="256" r="150" fill="none" stroke="#f5efe2" stroke-width="26"/>
+	<path d="M256 130 L322 344 L256 300 L190 344 Z" fill="#e4572e"/>
+</svg>

app/static/manifest.webmanifest

@@ -0,0 +1,25 @@
+{
+	"name": "JWE — Jeu de géolocalisation OKI",
+	"short_name": "JWE",
+	"description": "Devine la commune à partir d'une photo — Guadeloupe, Martinique, Guyane, La Réunion.",
+	"start_url": "/",
+	"scope": "/",
+	"display": "standalone",
+	"background_color": "#f5efe2",
+	"theme_color": "#0b3d2e",
+	"lang": "fr",
+	"icons": [
+		{
+			"src": "/icon.svg",
+			"sizes": "any",
+			"type": "image/svg+xml",
+			"purpose": "any"
+		},
+		{
+			"src": "/icon-maskable.svg",
+			"sizes": "any",
+			"type": "image/svg+xml",
+			"purpose": "maskable"
+		}
+	]
+}

app/static/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://jwe.o-k-i.net/sitemap.xml

app/static/sitemap.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+	<url>
+		<loc>https://jwe.o-k-i.net/</loc>
+		<lastmod>2026-07-21</lastmod>
+	</url>
+	<url>
+		<loc>https://jwe.o-k-i.net/explorer</loc>
+		<lastmod>2026-07-21</lastmod>
+	</url>
+</urlset>

app/svelte.config.js

@@ -0,0 +1,12 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

app/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+}

app/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});

content/credits.md

@@ -0,0 +1,87 @@
+# Crédits photos — JWE
+
+Les 41 photos du corpus `app/src/lib/server/data/lieux.json` proviennent de Wikimedia Commons.
+Chaque fichier est sous licence libre (Creative Commons, CC0 ou domaine public) — vérifiée via l'API Commons
+(`LicenseShortName`) et l'URL `Special:FilePath` testée en HTTP 200.
+
+| # | Lieu | Région | Fichier Commons | Auteur | Licence | Page de description |
+|---|------|--------|-----------------|--------|---------|---------------------|
+| 1 | Fort Delgrès | GUADELOUPE | Entrée du Fort Delgrès.JPG | LPLT | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Entr%C3%A9e_du_Fort_Delgr%C3%A8s.JPG |
+| 2 | Mémorial ACTe | GUADELOUPE | Photographie de haut du mémorial acte.jpg | Bjrmoicorla | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Photographie_de_haut_du_m%C3%A9morial_acte.jpg |
+| 3 | Fort Napoléon des Saintes | GUADELOUPE | Fort Napoléon dans l'archipel des Saintes.jpg | Gauthier Geoffroy | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Fort_Napol%C3%A9on_dans_l'archipel_des_Saintes.jpg |
+| 4 | Cathédrale Notre-Dame-de-Guadeloupe | GUADELOUPE | Cathédrale Notre-Dame-de-Guadeloupe - Sept. 2013 (1).JPG | Aristoi | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Cath%C3%A9drale_Notre-Dame-de-Guadeloupe_-_Sept._2013_(1).JPG |
+| 5 | Habitation La Grivelière | GUADELOUPE | Habitation La Grivelière 2.JPG | LPLT | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Habitation_La_Griveli%C3%A8re_2.JPG |
+| 6 | Soufrière | GUADELOUPE | Guadeloupe 114 - Sommet de la Soufrière 1467m - Guadeloupe.jpg | Ofol | CC-BY-2.5 | https://commons.wikimedia.org/wiki/File:Guadeloupe_114_-_Sommet_de_la_Soufri%C3%A8re_1467m_-_Guadeloupe.jpg |
+| 7 | Pointe des Châteaux | GUADELOUPE | Pointedeschateaux.jpg | bobyfume | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Pointedeschateaux.jpg |
+| 8 | Jardin botanique de Deshaies | GUADELOUPE | Jardin Botanique - étang aux nénuphars.JPG | Grook Da Oger | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Jardin_Botanique_-_%C3%A9tang_aux_n%C3%A9nuphars.JPG |
+| 9 | Plage de Bois Jolan | GUADELOUPE | Plage de St Anne (bois jolan).jpg | Filo gèn' | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Plage_de_St_Anne_(bois_jolan).jpg |
+| 10 | Marché de la Darse | GUADELOUPE | Marché de la Darse (épices).jpg | Filo gèn' | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:March%C3%A9_de_la_Darse_(%C3%A9pices).jpg |
+| 11 | Fort Saint-Louis | MARTINIQUE | Fort Saint-Louis vu du Carénage 02.jpg | UHF | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Fort_Saint-Louis_vu_du_Car%C3%A9nage_02.jpg |
+| 12 | Bibliothèque Schœlcher | MARTINIQUE | Fort-de-France - 2014 - Bibliothèque Schœlcher (1).jpg | Aristoi | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Fort-de-France_-_2014_-_Biblioth%C3%A8que_Sch%C5%93lcher_(1).jpg |
+| 13 | Cathédrale Saint-Louis de Fort-de-France | MARTINIQUE | Cathédrale Saint Louis.jpg | Pierre PONCHEL | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Cath%C3%A9drale_Saint_Louis.jpg |
+| 14 | Habitation Clément | MARTINIQUE | Habitation Clément 001.jpg | Tux-Man | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Habitation_Cl%C3%A9ment_001.jpg |
+| 15 | Église du Sacré-Cœur de Balata | MARTINIQUE | Sacré-coeur-balata-FdF.JPG | Jean-Louis Lascoux | CC-BY-3.0 | https://commons.wikimedia.org/wiki/File:Sacr%C3%A9-coeur-balata-FdF.JPG |
+| 16 | Montagne Pelée | MARTINIQUE | La Pelée vue du Carbet.jpg | Jurassi | Domaine public | https://commons.wikimedia.org/wiki/File:La_Pel%C3%A9e_vue_du_Carbet.jpg |
+| 17 | Presqu'île de la Caravelle | MARTINIQUE | Anse non nommée à la pointe de la presqu'île de la Caravelle.jpg | Enrevseluj | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Anse_non_nomm%C3%A9e_%C3%A0_la_pointe_de_la_presqu'%C3%AEle_de_la_Caravelle.jpg |
+| 18 | Anse-Dufour | MARTINIQUE | Anse Dufour (Les Anses-d'Arlet, Martinique) - 01.jpg | Thérèse Gaigé | CC0-1.0 | https://commons.wikimedia.org/wiki/File:Anse_Dufour_(Les_Anses-d'Arlet%2C_Martinique)_-_01.jpg |
+| 19 | Anse Noire | MARTINIQUE | Anse Noire (Les Anses-d'Arlet, Martinique) - 01.jpg | Thérèse Gaigé | CC0-1.0 | https://commons.wikimedia.org/wiki/File:Anse_Noire_(Les_Anses-d'Arlet%2C_Martinique)_-_01.jpg |
+| 20 | Savane des pétrifications | MARTINIQUE | Martinique savane des pétrifications 1.jpg | Esam335 | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Martinique_savane_des_p%C3%A9trifications_1.jpg |
+| 21 | Centre spatial guyanais | GUYANE | Ariane 5ECA on its launch platform on its way to lauch pad ELA-3.jpg | elisabetta_monaco | CC-BY-2.0 | https://commons.wikimedia.org/wiki/File:Ariane_5ECA_on_its_launch_platform_on_its_way_to_lauch_pad_ELA-3.jpg |
+| 22 | Îles du Salut | GUYANE | ILES et BAGNE 037.JPG | davric | Domaine public | https://commons.wikimedia.org/wiki/File:ILES_et_BAGNE_037.JPG |
+| 23 | Cathédrale Saint-Sauveur de Cayenne | GUYANE | Cathédrale Saint-Sauveur de Cayenne.jpg | Don-vip | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Cath%C3%A9drale_Saint-Sauveur_de_Cayenne.jpg |
+| 24 | Fort Cépérou | GUYANE | Cayenne Fort Cépérou 2013.jpg | Cayambe | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Cayenne_Fort_C%C3%A9p%C3%A9rou_2013.jpg |
+| 25 | Camp de la Transportation (bagne) | GUYANE | Camp de la Transportation-13.jpg | Psu973 | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Camp_de_la_Transportation-13.jpg |
+| 26 | Marais de Kaw-Roura | GUYANE | Marais de Kaw - Guyane 1.jpg | Jacques MARTIN 97311 | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Marais_de_Kaw_-_Guyane_1.jpg |
+| 27 | Place des Palmistes | GUYANE | Cayenne Place des palmistes.jpg | Cayambe | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Cayenne_Place_des_palmistes.jpg |
+| 28 | Crique Cacao | GUYANE | Crique Cacao.jpg | Aandrem | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Crique_Cacao.jpg |
+| 29 | Plage de Montjoly | GUYANE | Plages de Rémire-Montjoly - Guyane.JPG | Lebrouillard | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Plages_de_R%C3%A9mire-Montjoly_-_Guyane.JPG |
+| 30 | Îlet la Mère | GUYANE | Ilet la Mère débarcadère 2013.jpg | Cayambe | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:Ilet_la_M%C3%A8re_d%C3%A9barcad%C3%A8re_2013.jpg |
+| 31 | Église Notre-Dame des Laves | REUNION | Église Notre-Dame-des-Laves @ Piton Sainte-Rose 05.jpg | Rémih | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:%C3%89glise_Notre-Dame-des-Laves_%40_Piton_Sainte-Rose_05.jpg |
+| 32 | Cimetière marin de Saint-Paul | REUNION | Marine Cemetery of Saint-Paul (Réunion Island).jpg | dalbera | CC-BY-2.0 | https://commons.wikimedia.org/wiki/File:Marine_Cemetery_of_Saint-Paul_(R%C3%A9union_Island).jpg |
+| 33 | Villa Folio | REUNION | Maison Folio.jpg | Nanère | CC-BY-2.5 | https://commons.wikimedia.org/wiki/File:Maison_Folio.jpg |
+| 34 | Domaine du Grand Hazier | REUNION | GrandHazierEntree.jpg | David Rofas | CC-BY-3.0 | https://commons.wikimedia.org/wiki/File:GrandHazierEntree.jpg |
+| 35 | Temple du Colosse | REUNION | Temple-du-Colosse.JPG | Thierry Caro | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Temple-du-Colosse.JPG |
+| 36 | Piton de la Fournaise | REUNION | Piton de La Fournaise - Paysage de l'île de La Réunion.jpg | Alexandre Péribé | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Piton_de_La_Fournaise_-_Paysage_de_l'%C3%AEle_de_La_R%C3%A9union.jpg |
+| 37 | Piton des Neiges | REUNION | Piton des Neiges1.JPG | Dunog | Domaine public | https://commons.wikimedia.org/wiki/File:Piton_des_Neiges1.JPG |
+| 38 | Cirque de Mafate | REUNION | 14-07-2011 Grand Bénare (26) Mafate (version améliorée).jpg | Mamphi | CC-BY-SA-3.0 | https://commons.wikimedia.org/wiki/File:14-07-2011_Grand_B%C3%A9nare_(26)_Mafate_(version_am%C3%A9lior%C3%A9e).jpg |
+| 39 | Marché forain de Saint-Paul | REUNION | Combava en vente sur le marché forain de Saint Paul (La Réunion).jpg | Marie-angele.joly | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Combava_en_vente_sur_le_march%C3%A9_forain_de_Saint_Paul_(La_R%C3%A9union).jpg |
+| 40 | Plage de Ti Sable | REUNION | La plage de Ti Sable à Saint-Joseph.jpg | Clémenceau Lauret | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:La_plage_de_Ti_Sable_%C3%A0_Saint-Joseph.jpg |
+| 41 | Anse Grosse Roche | MARTINIQUE | Anse Grosse Roche, le Marin.jpg | Sapakagadewmoinjadiw | CC-BY-SA-4.0 | https://commons.wikimedia.org/wiki/File:Anse%20Grosse%20Roche%2C%20le%20Marin.jpg |
+
+## Notes
+
+- Les URLs utilisées dans `lieux.json` sont de la forme `https://commons.wikimedia.org/wiki/Special:FilePath/<FICHIER>?width=1200`
+  (redimensionnement à 1200 px de large assuré par Wikimedia).
+- Photos « domaine public » : *La Pelée vue du Carbet.jpg* (Jurassi), *ILES et BAGNE 037.JPG* (davric), *Piton des Neiges1.JPG* (Dunog).
+- Photos CC0 (pas d'attribution requise, auteur crédité par courtoisie) : les deux clichés de Thérèse Gaigé (Anse Dufour, Anse Noire).
+
+## Images Mapillary — mode street « An lari a »
+
+Les 20 images du corpus `app/src/lib/server/data/street.json` sont servies par la plateforme
+Mapillary via la visionneuse mapillary-js (licence MIT). Chaque image reste la propriété de son
+auteur et est publiée sous **CC BY-SA 4.0** (contributeurs Mapillary) — vérifiée via l'API Mapillary
+(`creator.username`) par `app/scripts/validate-street.mjs`. Attribution affichée dans le jeu :
+« © <auteur> / Mapillary (CC BY-SA 4.0) » + logo Mapillary intégré à la visionneuse.
+
+| # | Lieu | Région | Image Mapillary | Auteur | Date de capture | 360° |
+|---|------|--------|-----------------|--------|-----------------|------|
+| 1 | Rue Laurence Valmy, Pointe-à-Pitre | GUADELOUPE | [2941939632687980](https://www.mapillary.com/app/?pKey=2941939632687980) | cartophyl | 2015-07-07 | non |
+| 2 | Rue Achille René Boisneuf, Les Abymes | GUADELOUPE | [306781020957650](https://www.mapillary.com/app/?pKey=306781020957650) | ratzillas | 2015-07-17 | non |
+| 3 | Place Renovation le Bourg, Le Gosier | GUADELOUPE | [919062132219342](https://www.mapillary.com/app/?pKey=919062132219342) | kaartcam | 2016-01-02 | non |
+| 4 | Rue Emmanuel Robinet, Sainte-Anne | GUADELOUPE | [956408765176680](https://www.mapillary.com/app/?pKey=956408765176680) | ratzillas | 2019-07-15 | oui |
+| 5 | Route des Esclaves, Basse-Terre | GUADELOUPE | [212605717097536](https://www.mapillary.com/app/?pKey=212605717097536) | kaartcam | 2016-01-04 | non |
+| 6 | Rue Victor Sévère, Fort-de-France | MARTINIQUE | [152801196814796](https://www.mapillary.com/app/?pKey=152801196814796) | kaartcam | 2015-12-31 | non |
+| 7 | Rue des Barrières, Le Lamentin | MARTINIQUE | [1120779875836768](https://www.mapillary.com/app/?pKey=1120779875836768) | Caramel | 2024-04-29 | oui |
+| 8 | Rue Gabriel Péri, Saint-Pierre | MARTINIQUE | [1299527321706804](https://www.mapillary.com/app/?pKey=1299527321706804) | jeremylavarenne | 2025-08-31 | non |
+| 9 | Rue Florent Holo, Le François | MARTINIQUE | [4102521129805870](https://www.mapillary.com/app/?pKey=4102521129805870) | kaartcam | 2016-01-01 | non |
+| 10 | Passage des Fleurs, Sainte-Marie | MARTINIQUE | [131479329019761](https://www.mapillary.com/app/?pKey=131479329019761) | kaartcam | 2015-12-31 | non |
+| 11 | Rue Francois Arago, Cayenne | GUYANE | [259270559222687](https://www.mapillary.com/app/?pKey=259270559222687) | kaartcam | 2016-08-18 | non |
+| 12 | Rue de l’Odéon, Kourou | GUYANE | [198127629404270](https://www.mapillary.com/app/?pKey=198127629404270) | hacp | 2022-09-07 | non |
+| 13 | Avenue Albert Sarraut, Saint-Laurent-du-Maroni | GUYANE | [147142287390967](https://www.mapillary.com/app/?pKey=147142287390967) | pma | 2021-01-18 | non |
+| 14 | Rue Maurice BOCS, Matoury | GUYANE | [582210316504280](https://www.mapillary.com/app/?pKey=582210316504280) | kaartcam | 2016-08-18 | non |
+| 15 | Rue de la CANNE À SUCRE, Remire-Montjoly | GUYANE | [247810083801809](https://www.mapillary.com/app/?pKey=247810083801809) | kaartcam | 2016-08-18 | non |
+| 16 | Rue de Paris, Saint-Denis | REUNION | [2262788723930767](https://www.mapillary.com/app/?pKey=2262788723930767) | AllWays360 | 2022-10-06 | oui |
+| 17 | Rue du Cimetiere, Saint-Pierre | REUNION | [143202321798356](https://www.mapillary.com/app/?pKey=143202321798356) | sigstpierre | 2022-11-09 | oui |
+| 18 | Rue Aristide Briand, Le Tampon | REUNION | [1382811445417165](https://www.mapillary.com/app/?pKey=1382811445417165) | vandecasteele | 2019-12-16 | non |
+| 19 | Rue Elie Eudor, Saint-Paul | REUNION | [928324514646684](https://www.mapillary.com/app/?pKey=928324514646684) | sogefi | 2018-10-14 | non |
+| 20 | Ccal de la Republique, Saint-André | REUNION | [519625869420978](https://www.mapillary.com/app/?pKey=519625869420978) | vandecasteele | 2019-06-28 | oui |

css/index.css

@@ -1,40 +0,0 @@
-body {
-    margin: 0;
-    padding: 0;
-    font-size: 18px; /* Taille de base pour les grands écrans */
-}
-
-h1 {
-    font-size: 24px; /* Taille de base pour les titres sur les grands écrans */
-    margin: 0.5em;
-}
-
-ul {
-    list-style-type: none;
-    padding: 1em;
-}
-
-li {
-    margin-bottom: 10px;
-}
-
-a {
-    text-decoration: none;
-    color: #1F51FF;
-    font-weight: bold;
-}
-
-/* Requêtes média pour les écrans de moins de 600px de large */
-@media (max-width: 600px) {
-    body {
-        font-size: 8vw; /* Augmente la taille de la police sur les petits écrans */
-    }
-
-    h1 {
-        font-size: 5.5vw; /* Augmente la taille de la police des titres sur les petits écrans */
-    }
-
-    ul, li {
-        padding: 3vw; /* Augmente le padding pour plus d'espace */
-    }
-}

css/map.css

@@ -1,81 +0,0 @@
-#back-button {
-    margin-left: 1em;
-    cursor: pointer;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-}
-
-html, body, #map {
-    height: 90%;
-}
-
-#chrono {
-    font-weight: bold;
-    margin-top: 1em;
-    text-transform: uppercase;
-}
-
-.game-button {
-    background-color: #3498db;
-    border: 2px solid #3498db;
-    border-radius: 5px;
-    color: #fff;
-    cursor: pointer;
-    font-size: 15px;
-    margin-bottom: .3em;
-    padding: 8px 15px;
-    transition: all 0.3s ease;
-}
-
-.game-button:hover {
-    background-color: #2980b9;
-    border-color: #2980b9;
-}
-
-.game-button:disabled {
-    background-color: #d8d8d8;
-    border-color: #d8d8d8;
-    cursor: not-allowed;
-}
-
-#title,div {
-    text-align: center;
-}
-
-#penalty {
-    opacity: 1;
-    transition: opacity 1s ease;
-}
-
-.popup-ko .maplibregl-popup-content {
-    background-color: rgba(255, 0, 0, 0.9);
-    border-radius: 10px;
-    box-shadow: 0px 0px 0px 2px rgb(0, 0, 0);
-}
-
-.popup-ok .maplibregl-popup-content {
-    background-color: rgba(0, 255, 34, 0.9);
-    border-radius: 10px;
-    box-shadow: 0px 0px 0px 2px rgb(0, 0, 0);
-}
-
-.maplibregl-popup-tip {
-    display: none !important;
-}
-
-@media (max-width: 600px) {
-    body {
-        font-size: 100%;
-    }
-
-    h1 {
-        font-size: 5.5vw;
-    }
-
-    ul, li {
-        padding: 3vw;
-    }
-}

docs/architecture.md

@@ -0,0 +1,134 @@
+# JWE v2 — Décisions d'architecture (Agent Architecte)
+
+Date : 2026-07-16 · Mission : refonte GeoGuessr souverain (voir `projet_geoguessr_97x.md`)
+
+## 1. Décision back-end : SvelteKit seul (pas de Strapi)
+
+**Décision : SvelteKit seul, avec les lieux dans un fichier JSON versionné dans Git.**
+
+Arguments :
+
+- **Frugalité OKI** : un seul processus Node à héberger, pas de CMS + admin + DB à maintenir, pas de surface d'attaque supplémentaire. SQLite serait de toute façon peu utile pour un corpus de ~40 lieux statiques.
+- **Critère du prompt** (« qui ajoute les lieux ? ») : le corpus est éditorial, produit par l'Agent Contenu et relu. Le workflow Git (pull request = relecture + crédits photos vérifiés) est la modération. Le `docs/contribution.md` documente l'ajout d'un lieu par PR.
+- **Livrables finaux** : le guide de déploiement demandé est « SvelteKit + Tile Server » — Strapi n'y figure pas.
+- **Anti-triche** : le JSON reste côté serveur (`src/lib/server/`), jamais importé par le client ; les endpoints filtrent les champs. Impossible de faire plus simple.
+
+Si un jour des contributeurs non-dev doivent saisir des lieux en masse, la porte vers Strapi reste ouverte (le schéma JSON est le content-type tout désigné), mais ce n'est pas le besoin actuel.
+
+## 2. Architecture des tiles MapLibre
+
+- **Rendu** : MapLibre GL JS (verrouillé), chargé en lazy (import dynamique uniquement sur les écrans de jeu / exploration).
+- **Dev / démo** : tiles vectorielles [OpenFreeMap](https://openfreemap.org) — libres, basées OpenStreetMap, sans clé API. Style **custom OKI** (JSON de style propre, dérivé du style Positron, re-teinté : mer bleu profond caraïbe, terre sable, végétation verte dense, labels sobres — pas le « bleu Google »).
+- **Prod auto-hébergée** : `tileserver-gl` + extraits `.mbtiles` OpenStreetMap des 4 régions (Guadeloupe, Martinique, Guyane, La Réunion — quelques dizaines de Mo au total). Procédure dans `docs/deploiement.md`. Le style OKI accepte l'URL des tiles par variable d'environnement (`PUBLIC_TILES_URL`), bascule sans changement de code.
+- **Contrainte géographique** : `maxBounds` = enveloppe union des 4 régions (≈ lon −63…57, lat −23…18) + `minZoom`, donc impossible de scroller en Europe/Amérique du Nord. 4 boutons « saut de région » (GUADELOUPE / MARTINIQUE / GUYANE / RÉUNION) replacent la vue sur la région. Limite connue : l'enveloppe rectangulaire inclut l'Atlantique tropical et le Brésil — inoffensif (aucun indice sur le lieu), documenté.
+- Attribution © OpenStreetMap contributors affichée.
+
+## 3. Stratégie Wikipedia / Wikidata
+
+Principe : **rien de stocké en base**, interroge l'API en temps réel avec cache court, côté serveur uniquement.
+
+Endpoint serveur : `GET /api/wiki/[qid]` (ex. `Q3077840` = Fort Delgrès — l'exemple `Q2216838` du prompt initial était erroné, corrigé par l'Agent Contenu)
+
+1. `wbgetentities` sur `www.wikidata.org` → récupère le `sitelink` frwiki (et le libellé fr en fallback). **Fallback de langue : fr uniquement** — décision d'audit (A3) : pas de repli sur enwiki, on préfère l'appel à contribution qu'une redirection silencieuse vers l'anglais.
+2. `GET https://fr.wikipedia.org/api/rest_v1/page/summary/{titre}` → `title`, `extract`, `content_urls`, `thumbnail`.
+3. Réponse normalisée : `{ qid, title, extract, url, thumbnail, description }`.
+4. QID sans sitelink frwiki → `404 {"reason":"no-frwiki"}` (cas intermédiaire, A3) : le front affiche la **variante Cas B « Pwen blindé — Pa nyen an fransé »** (la fiche Wikidata existe, l'article français reste à traduire/créer ; CTA recherche pré-remplie + lien vers la fiche Wikidata). `wikidata_id` null côté lieu → Cas B « lacune totale » inchangé.
+5. **Cache** : `Map` en mémoire, TTL 24 h + `Cache-Control: max-age=86400`. User-Agent explicite (`JWE-OKI/x.y (contact)`) comme demandé par la politique Wikimédia.
+
+## 4. Arborescence du projet
+
+```
+JWE/                          (dépôt existant — l'ancien PHP est conservé tel quel)
+├── app/                      ← nouvelle application SvelteKit 2 / Svelte 5
+│   ├── src/
+│   │   ├── lib/
+│   │   │   ├── server/
+│   │   │   │   ├── lieux.ts        (accès données + sélection aléatoire + scoring)
+│   │   │   │   └── data/lieux.json (corpus 40 lieux — serveur uniquement)
+│   │   │   ├── components/         (GameMap, PhotoPanel, ResultPanel, ScoreCard…)
+│   │   │   ├── i18n/               (fr.ts, gcf.ts, store)
+│   │   │   ├── styles/oki.css      (tokens couleurs OKI)
+│   │   │   └── utils/              (score.ts, geo.ts)
+│   │   ├── routes/
+│   │   │   ├── +layout.svelte      (header, switch langue FR/CR)
+│   │   │   ├── +page.svelte        (accueil : 4 régions, modes, Jouer)
+│   │   │   ├── jeu/[mode]/         (écran de jeu split photo/carte)
+│   │   │   ├── explorer/           (mode Aprann : carte pleine page)
+│   │   │   └── api/
+│   │   │       ├── round/+server.ts      (GET : lieu aléatoire SANITISÉ)
+│   │   │       ├── photo/[id]/+server.ts (GET : proxy photo sharp → WebP, sans EXIF, cache 24 h)
+│   │   │       ├── guess/+server.ts      (POST : {placeId, lat, lon, hints, timeMs} → score + vérité)
+│   │   │       ├── lieux/+server.ts      (GET : catalogue sanitise pour Explorer, SANS id)
+│   │   │       └── wiki/[qid]/+server.ts (GET : extrait Wikipedia, cache 24 h)
+│   │   ├── app.html / app.d.ts
+│   │   └── service-worker.ts       (PWA)
+│   ├── static/                     (manifest.webmanifest, icônes, photos éventuelles)
+│   └── package.json / svelte.config.js / vite.config.ts
+├── docs/                         (architecture, déploiement, contribution, audit)
+├── content/                      (sources de travail de l'Agent Contenu : crédits photos)
+└── projet_geoguessr_97x.md
+```
+
+## 5. Spécifications API REST (anti-triche)
+
+| Endpoint | Méthode | Payload | Réponse |
+|---|---|---|---|
+| `/api/round?region=&mode=&exclude=` | GET | — | `{ id, nom, nom_creole, categorie, difficulte, photo{url,credit,alt,srcset}, indices[] }` — **jamais** `coordonnees`, `commune`, `region`, `wikidata_id`. `photo.url` = `/api/photo/<uuid>` (opaque, proxy serveur — C4) + `photo.srcset` `{ "400", "800", "1200" }` |
+| `/api/photo/[id]?w=` | GET | `w` ∈ {400, 800, 1200} (défaut 1200) | `image/webp` retraitée (sharp : rotation auto, métadonnées EXIF/GPS supprimées), `Cache-Control: public, max-age=86400, immutable`, cache mémoire 24 h. 404 si id inconnu, 400 si `w` invalide. Fetch amont = URL Commons du corpus uniquement (pas de proxy ouvert) |
+| `/api/guess` | POST | `{ id, lat, lon, hintsUsed, timeMs? }` | `{ distanceKm, score, radiusEffKm, coordonnees, commune, region, nom, wikidata_id }` |
+| `/api/lieux` | GET | — | Catalogue sanitise pour Explorer (coords arrondies à 0.05°, mode sans score). **Sans `id`** (anti-corrélation round → commune, C4) ; photos en URLs Commons directes (mode sans enjeu) |
+| `/api/wiki/[qid]` | GET | — | `{ title, extract, url, thumbnail }`, `Cache-Control: max-age=86400` ; `404 {"reason":"no-frwiki"}` si QID sans article frwiki |
+
+Règles :
+
+- Le scoring est **recalculé côté serveur** : `score = round(5000 × e^(−d/r_eff))` avec `r_eff = max(r_difficulté, sqrt(aire_commune_km2 / π))` quand le champ optionnel `aire_commune_km2` est renseigné (A1 — équité Guyane : communes immenses), sinon `r_difficulté` seul (50/15/5/1 km). Pénalité −10 %/indice, bonus temps ≤ +20 % plafonné à 5000. `radiusEffKm` (0,1 km) est renvoyé pour transparence.
+- Distance : haversine.
+- Le client ne reçoit la vérité (coordonnées, commune, wikidata_id) **qu'après** la soumission du marqueur.
+- `exclude` : liste d'ids déjà joués (mode Défi 5 rounds, stateless — pas de session serveur nécessaire, pas de leaderboard).
+
+## 6. Décisions annexes
+
+- **Adapter** : `adapter-node` (auto-hébergement sobre derrière nginx/caddy).
+- **PWA** : manifest + service worker minimal (cache app shell, photos en stale-while-revalidate).
+- **i18n** : dictionnaires maison `fr` / `gcf` (créole), store Svelte, `lang` persistée en localStorage.
+- **Photos** : en mode jeu, **proxy serveur `/api/photo/[id]`** (C4 — l'URL Wikimedia Commons contient le nom du fichier, souvent un spoiler, et les EXIF peuvent embarquer du GPS) : le serveur fetch l'URL Commons du corpus, retraite avec **sharp** (rotation auto, suppression de toutes les métadonnées par défaut, WebP, largeurs 400/800/1200), cache mémoire 24 h + `Cache-Control: immutable`. `PhotoPanel` utilise `<img src srcset sizes>`. L'Explorer (`/api/lieux`) garde les URLs Commons directes (mode sans enjeu) et le service worker met en cache les deux origines.
+- **A11y / calm tech** : `prefers-reduced-motion` respecté (pas de vol de marqueur), timer informatif non anxiogène, navigation clavier (carte : flèches déplacent le marqueur, Entrée valide).
+- **Licence code** : MIT (le dépôt historique était AGPL — la refonte est un nouveau module `app/` sous MIT comme exigé par le prompt ; le `LICENSE` racine reste l'historique, un `app/LICENSE` MIT est ajouté).
+
+## 7. Correctifs d'audit (2026-07-17)
+
+- **C4 — URLs photo spoiler** : voir §6 « Photos » et §5. Deux fuites colmatées : le nom de fichier Commons dans `photo.url` (remplacé par le proxy opaque `/api/photo/<uuid>`) et la corrélation `id` round ↔ `id` catalogue (`/api/lieux` n'expose plus d'`id` ; l'Explorer utilise des indices éphémères côté client).
+- **A1 — Radius de score en Guyane** : voir §5 « Règles ». `aire_commune_km2` (champ optionnel du schéma) élargit le rayon effectif : `sqrt(aire/π)`. Test de référence : Saint-Laurent-du-Maroni (4320,8 km², EXPERT), guess à 40 km → `radiusEffKm` 37,1, score ≈ 1700 (au lieu de ≈ 0). Le code tolère l'absence du champ.
+- **A2 — Pas de fuite de région** : la caméra initiale de `GameMap` est **globale** (`center: [-58, 0]`, `zoom: 3.6` — vue d'ensemble des 4 régions, aucun indice sur le lieu). Les 4 boutons région sont la **devinette en deux temps** : étape 1 = sauter vers la région supposée, étape 2 = poser le marqueur. Les deux étapes sont combinées par la distance seule : mauvaise région → distance énorme → score ≈ 0. Aucune donnée serveur ne révèle la région avant le guess (`/api/round` ne l'inclut pas).
+- **A3 — Chaîne Wikipedia** : voir §3. `Cache-Control: max-age=86400` ; cas intermédiaire QID sans frwiki → `404 {"reason":"no-frwiki"}` → variante Cas B dédiée côté front ; fallback de langue fr uniquement, documenté dans le code.
+
+## 8. Phase 2 (2026-07-17) — ADR-001 v1 et ADR-002
+
+- **ADR-001 v1 — Défi par lien à seed** (`/defi/<seed>`) : `src/lib/server/tirage.ts` (hash cyrb53 → PRNG mulberry32, Fisher-Yates déterministe, contraintes ≥1 MONUMENT / ≥1 LIEU / ≥2 régions par échanges déterministes — zéro `Math.random`, déterminisme inter-machines). `GET /api/defi/[seed]` → 5 rounds sanitisés identiques pour tous (`no-store`, seed alphanumérique 4–40). Accueil : « Créer un lien de défi » (seed 8 chars sans ambiguïté). Bilan : « Copier le lien du défi ». La comparaison des scores reste humaine (image canvas) — zéro compte, zéro état serveur, zéro leaderboard. La v2 temps réel (PlaySocketJS) reste conditionnée au gate de traction de l'ADR (≥30 parties/sem. ×4 sem. + ≥5 demandes explicites).
+- **ADR-002 — Carte SVG légère hors-jeu** : pipeline `app/scripts/build-carte-regions.mjs` (geo.api.gouv.fr → mapshaper 7 % → `src/lib/map/regions-geo.json`, 91,8 KB gz ≤ 150 KB) ; composant `CarteRegions.svelte` from scratch (SVG, projection équirectangulaire par inset, 2×2 responsive, `<button>` par région avec `aria-label` FR/créole, SSR sans JS, prop `marqueurs` pour le récap guess→réel, attribution © OSM/données publiques). Utilisée sur l'accueil (sélection de région) et les bilans défi — MapLibre reste strictement aux écrans de jeu (devinette, résultat, explorer). Attribution : contours © geo.api.gouv.fr / données publiques.
+
+## 9. Correctif UX résultat (2026-07-17)
+
+- **Carte résultat façon GeoGuessr** : à la révélation, le marqueur du joueur **reste à sa position** (corail) et la position réelle apparaît (vert), reliées par une ligne pointillée avec **étiquette de distance au milieu** (`distanceKm`) ; la carte cadre les deux points (`fitBounds`, instantané si `prefers-reduced-motion`). Remplace l'ancien « vol » du marqueur vers la position réelle, qui détruisait la comparaison visuelle. Prop `distanceKm` ajoutée à `GameMap` (alimentée par la réponse serveur, jamais calculée côté client).
+
+## 10. ADR-003 — Mode street « An lari a » via Mapillary (2026-07-18)
+
+5e mode de jeu : le joueur voit une **photo street-level navigable** (visionneuse Mapillary) au lieu d'une photo statique, et devine la commune. Mécanique carte + guess + score **inchangée**.
+
+- **Pourquoi Mapillary** : seule source de street-level imagery couvrant correctement les 4 régions (bonne couverture Gwada/Martinique/Réunion, littoral guyanais) ; images **CC BY-SA 4.0**, lib `mapillary-js` **MIT**, API gratuite (token client requis, rate-limité par app). **Exception documentée** à « zéro service tiers » (Mapillary = plateforme Meta), limitée à ce mode ; alternative souveraine future = Panoramax (reco R4 audit passe 2), couverture DOM encore insuffisante à cette date.
+- **Corpus curé, pas de tirage aléatoire dans l'API** : `app/src/lib/server/data/street.json` (20 lieux, 5/région), produit par `app/scripts/curate-street.mjs` (bbox < 0,01° ou grille de recherches par rayon autour de la **mairie** — le centroïde geo.api tombe souvent hors du centre-ville ; tri qualité/récence, préférence 360°), revérifié par `app/scripts/validate-street.mjs` (image existe, `computed_geometry` < 100 m, crédit auteur, sitelink frwiki). La vérité terrain (`coordonnees`) est **figée** dans le corpus (dérive possible de `computed_geometry` côté Mapillary).
+- **Phase éducative par commune** : `wikidata_id` = QID de la **commune** (un coin de rue n'a pas vocation à avoir sa page) → `WikiFiche` réutilisé tel quel, aucune variante Cas B nouvelle. `aire_commune_km2` renseigné (équité Guyane, A1).
+- **Anti-triche** : `/api/round?mode=street` + `sanitizeRoundStreet()` — seuls `id, nom, nom_creole, categorie, difficulte, mapillaryId, credit, indices` partent ; coords/commune/région/wikidata_id jamais avant le guess. **Limitation assumée** : l'`image_key` est publique (la visionneuse appelle Mapillary depuis le navigateur) → un joueur techniquement équipé peut retrouver la position via l'API Mapillary (même propriété que GeoGuessr/Street View ; acceptable en solo sans leaderboard). La visionneuse n'affiche **pas de carte** (mapillary-js n'en a pas par défaut), donc aucun spoiler visuel.
+- **Visionneuse** : `StreetPanel.svelte`, lazy load façon MapLibre (`import('mapillary-js')` + CSS — chunk séparé ~1 MB, 0 occurrence dans le bundle initial), `component.cover: false`, `moveTo()` avec état d'erreur (image retirée → message + round suivant possible). Token `PUBLIC_MAPILLARY_TOKEN` via `$env/dynamic/public` (pattern `PUBLIC_TILES_URL`) : **token client**, conçu par Mapillary pour être exposé côté navigateur.
+- **Réutilisation sans modification** : `GameMap`, `ResultPanel`, `WikiFiche`, scoring (`scoreGuess`/`skipResult` acceptent `Lieu | StreetLieu`), timer, indices, bouton « Passer ». `RoundPlace.photo` devient optionnel (`mapillaryId`/`credit` ajoutés) ; lookup unifié `getLieuById` (2 corpus) pour `/api/guess`, `getLieuPhotoById` conservé pour le défi et le proxy photo.
+- **Hors scope v1** : street dans `/defi/[seed]` et `/explorer`, cache SW des tuiles Mapillary (les requêtes `graph.mapillary.com`/FBCDN passent en direct).
+
+## 11. ADR-004 — Harmonisation Charte OKI, Command Bar, Local-First & SEO (2026-08-16)
+
+Mise en conformité intégrale avec les référentiels de marque OKI et la doctrine Nerve-First :
+
+- **Charte Visuelle & Thème Sombre/Clair** : Thème sombre par défaut (identité afrofuturiste panafricaine : fond `#0D0D0D`, surfaces `#1A0F1A`, texte `#FFF8E7`, action or `#FDB813`). Thème clair opt-in (`html.light-theme`) vérifié WCAG AA avec accents assombris (`#B87A00`, vert `#006B3D`, rouge `#A01030`) et ratios de contraste ≥ 4.5:1. Intégration du composant `ThemeSwitch.svelte` (persistance `localStorage`).
+- **Signature Graphique Flag-Bar** : Bandeau signature 6 px à 4 segments francs (`#0D0D0D` / or / vert / rouge) positionné en bord inférieur du header fixe et au pied de page sur `+page.svelte`.
+- **Command Bar Intent-Centric (`Ctrl+K` / `⌘K`)** : Composant `CommandBar.svelte` omniprésent permettant l'exécution directe des intentions sans friction (lancer les modes, filtrer par région, basculer langue/thème, ouvrir les stats).
+- **Souveraineté & Local-First (Historique & Statistiques)** : Store `history.svelte.ts` et vue `StatsModal.svelte` garantissant que 100% des scores, parties et précisions géographiques restent stockés localement sur l'appareil du joueur sans aucun pistage ni compte serveur, avec fonction d'export JSON et de purge locale.
+- **AI Overview & SEO Top-Tier** : HTML sémantique strict, balisage Schema.org structuré `WebApplication` + `FAQPage` dans `Seo.svelte` optimisé pour l'indexation par les moteurs et les modèles d'intelligence artificielle.

docs/audit-oki.md

@@ -0,0 +1,176 @@
+# Audit OKI — JWE v2 (Agent Intégration & QA)
+
+Date : 2026-07-17 · Périmètre : `app/` (SvelteKit 2 + Svelte 5 + MapLibre GL 5)
+Méthode : tests **réellement exécutés** sur le build de production (`node build`, PORT=4173) + revue de code. Chaque point est accompagné de sa preuve (commande, extrait).
+
+Légende : ✅ conforme · ⚠️ conforme avec réserve / point d'amélioration · ❌ non conforme
+
+---
+
+## 1. Build et vérifications statiques
+
+| Test | Résultat | Preuve |
+|---|---|---|
+| `npm run check` | ✅ | `svelte-check found 0 errors and 0 warnings` |
+| `npm run build` | ✅ | `✓ built in 5.05s` + `adapter-node ✔ done` |
+
+### Isolation de MapLibre (bundle initial)
+
+- Le chunk MapLibre `xnoNZPIh.js` (**1031 KB brut / 277,8 KB gzip**) n'est chargé que par `import("./xnoNZPIh.js")` **dynamique** depuis le chunk de `GameMap` — vérifié par `grep` dans `build/client/_app/immutable/`.
+- Le HTML SSR de `/` (5,6 KB) ne contient **0 occurrence** de « maplibre » et ne bootstrap que `entry/app.js` + `entry/start.js`.
+- Le CSS MapLibre (`maplibre-gl.*.css`, 68,3 KB / 9,8 KB gz) est un asset séparé, chargé par le même import dynamique (`GameMap.svelte:279`).
+
+**✅ Le bundle initial ne contient pas MapLibre.**
+
+---
+
+## 2. API — tests fonctionnels (serveur `node build`, PORT=4173)
+
+### 2.1 Anti-triche `/api/round` ✅
+
+15 tirages variés (sans filtre, `region`, `region+categorie`, `categorie`, `region+categorie+exclude` avec 2 ids exclus) :
+
+```
+15/15 tirages : AUCUNE fuite (clés coordonnees/commune/region/wikidata_id absentes)
+```
+
+Payload conforme à `docs/architecture.md` §5 : `{ id, nom, nom_creole, categorie, difficulte, photo{url,credit,alt}, indices[] }`. `Cache-Control: no-store` présent. Les filtres sont respectés (ex. `region=REUNION&categorie=LIEU` → Piton de la Fournaise).
+
+*Note : le `nom` du lieu est dans le payload — c'est le choix de la spec (§5), pas une fuite : le jeu nomme le monument à reconnaître.*
+
+### 2.2 Partie complète + cohérence du score ✅
+
+Scénario réel : `GET /api/round?region=GUADELOUPE` → Jardin botanique de Deshaies (DIFFICILE, r=5 km) → `POST /api/guess` avec coords fausses :
+
+- Réponse : `distanceKm: 38.5, score: 2` — recalcul indépendant haversine + `round(5000·e^(−38.5/5))` = **2** → écart 0.
+- Second test (Fort Delgrès, MOYEN, guess à 10,0 km, `hintsUsed: 1`, `timeMs: 30000`) : serveur **2540**, recalcul `min(5000, 2572×0,9 + 2572×0,9×0,2×0,5)` = **2540** → écart 0. Pénalité −10 %/indice et bonus temps ≤ +20 % conformes.
+- `skip: true` → `score: 0, distanceKm: null`, vérité révélée (extension documentée, cohérente avec le bouton « Passer »).
+- Erreurs : id inconnu → **404**, coords invalides → **400**, id manquant → **400**, JSON invalide → **400**.
+
+### 2.3 Cas A — lieu avec `wikidata_id` ✅
+
+| Lieu | `/api/guess` | `/api/wiki/{qid}` |
+|---|---|---|
+| Fort Delgrès | `wikidata_id: "Q3077840"` | 200, `title: "Fort Delgrès"`, extrait FR **422 car.**, `url: https://fr.wikipedia.org/wiki/Fort_Delgr%C3%A8s` |
+| Centre spatial guyanais | `wikidata_id: "Q308987"` | 200, extrait FR **447 car.**, url fr.wikipedia |
+
+Cache : `cache-control: public, max-age=3600` vérifié par `curl -I` ; cache mémoire TTL 24 h + User-Agent Wikimédia explicite dans `routes/api/wiki/[qid]/+server.ts`.
+
+### 2.4 Cas B — lacune documentaire (CRUCIAL) ✅
+
+Corpus : **9 lieux `wikidata_id: null`** (2 GP, 2 MQ, 3 GUY, 2 REU) — intentionnels, conformes au piège de la spec §Agent Contenu.
+
+- `POST /api/guess` sur **Plage de Bois Jolan** (`ff00fd1d…`) et **Anse Noire** (`cd652fb7…`) → `wikidata_id: null` dans les deux réponses. ✅
+- Rendu (`WikiFiche.svelte:64-78`) : `wikidataId` null → panneau **`.cas-b`** visuellement distinct (fond `--oki-lacune-fond` #fdf3e3, bordure 2px `--oki-lacune-bord` #d9a441, icône ◌ en pointillés) vs `.cas-a` vert doux. ✅
+- Titre exact de la spec : **« Pwen blindé — Sa pa dokimanté »** (`fr.ts:68`, `gcf.ts:70`). ✅
+- Texte FR conforme à §4.3 (« Ce lieu existe, mais il n'a pas de page sur Wikipédia ni de fiche sur Wikidata… qui alimentent même l'intelligence artificielle). ») + équivalent créole complet dans `gcf.ts:71-72`. ✅
+- CTA **« Kontribyé sou Wikipédia »** → `https://fr.wikipedia.org/w/index.php?search={nom du lieu}&title=Spécial:Recherche` — titre du lieu pré-rempli dans la recherche (`WikiFiche.svelte:38-40`) + lien secondaire vers le guide « Premiers pas ». ✅
+- **Chemin « qid non null mais wiki 404 »** : `/api/wiki/Q15646372` (entité sans sitelink fr) → **404** ; dans `WikiFiche.svelte:28`, `res.ok ? … : null` → **bascule bien sur le panneau Cas B** (même comportement sur erreur réseau, ligne 29-30). ✅
+- Chaîne « Pwen blindé » présente dans le bundle client livré (`grep` dans `build/`). ✅
+
+### 2.5 `/api/lieux` ✅
+
+40 lieux ; toutes les coords sont des **multiples exacts de 0,05** (vérifié par script, ex. Fort Delgrès → `{lat: 16, lon: -61.7}`). `Cache-Control: public, max-age=300`.
+
+### 2.6 Pages ✅
+
+`/` 200 · `/jeu/monument` 200 · `/jeu/lieu` 200 · `/jeu/defi` 200 · `/explorer` 200 · `/manifest.webmanifest` 200 · `/service-worker.js` 200 · `/icon.svg` 200 · `/jeu/triche` → **404** (mode invalide rejeté).
+
+SSR vérifié : le HTML de `/` contient `<h1>JWE</h1>` rendu serveur (contenu visible avant hydratation).
+
+---
+
+## 3. Parité i18n FR / créole ✅
+
+Script Node comparant les clés aplaties de `fr.ts` et `gcf.ts` :
+
+```
+clés fr : 77 | clés gcf : 77
+manquantes dans gcf : aucune — manquantes dans fr : aucune
+```
+
+Le message de lacune existe dans les DEUX langues (titre, texte, CTA, guide). Double garantie : `gcf` est typé `Dict` (`gcf.ts:3`), donc toute clé manquante casserait `npm run check`. L'attribut `<html lang>` est mis à jour au changement de langue (`store.svelte.ts:25`).
+
+---
+
+## 4. A11y / doctrine OKI (revue de code)
+
+| Point | Verdict | Preuve |
+|---|---|---|
+| `prefers-reduced-motion` | ✅ | Règle globale `oki.css:111-117` ; vol du marqueur désactivé (`GameMap.svelte:56-57,116-117`) et transitions cartes à `duration: 0` ; transition du bottom-sheet coupée (`explorer/+page.svelte:256-260`) |
+| Navigation clavier carte | ✅ | Zone carte `role="application"`, `tabindex="0"`, `aria-label` i18n ; flèches = déplacer le marqueur (pas constant en pixels), Entrée = valider (`GameMap.svelte:246-273`) ; focus-visible visible (`oki.css:67-72`) |
+| Une seule action primaire / écran | ⚠️ | Accueil : « Jouer » seul corail. Jeu : « Valider » seul corail (Passer = secondaire, Indice = tertiaire). Bilan : « Partager » seul. **Réserve** : écran résultat Cas B = bouton corail « Lieu suivant » **+** CTA orange « Kontribyé sou Wikipédia » — deux éléments fortement colorés. Cohérent avec Peak-End (§5), mais en tension avec « une seule action primaire ». À trancher en design review. |
+| Bouton Valider en zone pouce | ✅ | `.barre-actions` sticky en bas + `env(safe-area-inset-bottom)` (`jeu/[mode]/+page.svelte:374-384`) ; accueil : `.zone-pouce` fixe bas |
+| Timer non anxiogène | ✅ | `TimerRing` : cercle qui se vide, couleur douce `--oki-vert-clair`, **aucun chiffre**, **aucune échéance** (à 0 le tour continue, le bonus s'arrête juste) ; timer désactivé par défaut |
+| Pas de mécanique dopaminergique | ✅ | `grep -i 'streak|leaderboard|classement|loot|confetti'` → 0 résultat ; pas de session serveur, pas de compte, « Passer » = 0 point sans pénalité, ton encourageant (« Kité sa ye ? ») |
+| Zoom contraint aux 4 régions | ✅ | `maxBounds` [-63,-23,57,18] + `minZoom: 4` (`regions.ts`) + 4 boutons « saut de région » avec `aria-label` groupe |
+| Photos | ✅ | `loading="lazy" decoding="async"` partout (`PhotoPanel`, `explorer`, `WikiFiche`) ; `alt` descriptif du corpus ; crédit affiché sous chaque photo |
+
+---
+
+## 5. Performance 4G (mesures build + estimation)
+
+Pas de Lighthouse disponible dans l'environnement → mesures réelles des artefacts + estimation argumentée.
+
+### Poids mesuré (sur fil, gzip — les `.gz` sont pré-générés dans le build)
+
+| Écran | Détail | Poids |
+|---|---|---|
+| **Premier écran `/`** | HTML 5,6 KB + JS initial 38,7 KB gz + CSS 1,8 KB gz | **≈ 43 KB** |
+| `/jeu/*` (supplément) | code page + GameMap | +12,9 KB gz |
+| MapLibre (lazy, uniquement écrans carte) | JS 277,8 KB gz + CSS 9,8 KB gz | 287,6 KB gz |
+| Photos | Wikimedia `?width=1200`, lazy | ~150-400 KB/photo |
+
+### Estimation 4G caribéen (≈ 10 Mbps, RTT 150 ms ; et slow 4G 1,6 Mbps)
+
+- **Premier écran < 3 s : ✅ large.** ~43 KB → < 0,5 s de transfert même en slow 4G ; SSR → `<h1>` et grille des régions visibles avant hydratation ; police système (aucune webfont) ; zéro requête tierce.
+- Écran de jeu : +300 KB gz (MapLibre) ≈ 1,5-2 s en slow 4G, chargé **après** l'affichage de la photo (lazy) — le joueur peut déjà observer la photo.
+- PWA : app shell pré-caché par le service worker → 2e visite quasi instantanée, photos en stale-while-revalidate.
+
+---
+
+## 6. Checklist d'audit OKI (spec §Agent Intégration & QA)
+
+- [x] **Une seule action primaire par écran** — ✅ (⚠️ réserve Cas B, voir §4)
+- [x] **Mobile : bouton Valider en zone du pouce, carte utilisable au doigt** — ✅ (sticky bottom, marqueur draggable, boutons zoom +/- visibles)
+- [x] **Performance : premier écran < 3 s, MapLibre lazy-loadé** — ✅ (~43 KB gz initial, chunk MapLibre dynamique)
+- [x] **Éthique : pas de mécanique dopaminergique, score non punitif** — ✅
+- [x] **Éducation : les deux cas (Wiki OK / Wiki manquant) fonctionnent et sont distincts visuellement** — ✅ (tests §2.3/§2.4, panneaux `.cas-a` vert / `.cas-b` sable-orangé)
+- [x] **Bilinguisme FR/créole présent (y compris message de lacune)** — ✅ (77/77 clés)
+- [x] **PWA installable** — ✅ avec réserve : manifest + SW + icônes SVG `any`/`maskable` valides, **mais aucun PNG 192/512** — Chrome desktop peut refuser l'invite d'installation sans PNG (⚠️).
+
+Intégration MapLibre + API Lieux + API Wikipedia : ✅. Partie complète jouée : ✅ (§2.2).
+
+---
+
+## 7. Bugs corrigés pendant l'audit
+
+1. **Libellés des boutons zoom MapLibre en anglais** — Les clés i18n `carte.zoomIn`/`zoomOut` existaient mais n'étaient jamais utilisées : le `NavigationControl` natif affichait les tooltips/aria-labels anglais « Zoom in / Zoom out » sur une UI FR/créole (a11y lecteur d'écran).
+   - **Correctif** : `app/src/lib/components/GameMap.svelte` — option `locale` ajoutée au constructeur `new mod.Map({…})` avec `'NavigationControl.ZoomIn': t().carte.zoomIn` et `'NavigationControl.ZoomOut': t().carte.zoomOut`.
+   - **Vérifié** : `npm run check` 0 erreur, rebuild OK, chaîne présente dans le chunk GameMap reconstruit, serveur relancé et endpoints re-testés (200).
+
+Aucun bug structurel trouvé.
+
+---
+
+## 8. Points d'amélioration restants (non bloquants)
+
+1. ⚠️ **Icônes PWA** : ajouter des PNG 192×192 et 512×512 (certains navigateurs n'acceptent pas le SVG seul pour l'invite d'installation).
+2. ⚠️ **Contraste du corail** `--oki-corail` #e4572e sur texte blanc ≈ **3,7:1** : conforme AA pour texte large et composants d'interface, juste sous les 4,5:1 du texte courant. Envisager `--oki-corail-fonce` au repos si on veut du AA strict.
+3. ⚠️ **Bonus temps basé sur `timeMs` fourni par le client** (`/api/guess`) : un client modifié peut s'accorder +20 %. Sans leaderboard ni enjeu, c'est acceptable — à documenter si un mode compétitif arrive un jour.
+4. ⚠️ **Deux accents forts sur l'écran résultat Cas B** (corail « Lieu suivant » + orange « Kontribyé ») : Peak-End assumé, mais à valider contre la règle « une seule action primaire ».
+5. **Clés i18n inutilisées** : `resultat.bravo`, `resultat.score`, `micro.pwenBlinde`, `defi.manche` — cosmétique, à nettoyer ou brancher.
+6. **Pas de tests automatisés** dans le dépôt (ni unitaires ni e2e) — les vérifications de cet audit sont manuelles ; un `vitest` sur `scoreGuess`/`sanitizeRound` + un test e2e du Cas B sécuriseraient les régressions.
+7. **Limite connue** (déjà documentée dans `architecture.md`) : l'enveloppe `maxBounds` rectangulaire inclut l'Atlantique tropical et le Brésil — inoffensif.
+
+---
+
+## Verdict
+
+**✅ Conforme à la spec.** Build propre, anti-triche étanche sur 15 tirages, scoring recalculé serveur et vérifié au point près, Cas A et Cas B fonctionnels (y compris le fallback 404 → Cas B), i18n FR/créole complet, doctrine OKI respectée (calm tech, zone pouce, reduced-motion, zéro dark pattern). 1 bug mineur corrigé (locale des contrôles zoom). 7 points d'amélioration non bloquants listés ci-dessus.
+
+---
+
+## Addendum post-audit (vérification finale orchestrateur)
+
+- **Fix anti-spoiler** : le crédit photo (`photo.credit`, souvent explicite sur le lieu) était affiché pendant la phase de devinette. Désormais masqué pendant la devinette (`PhotoPanel`, prop `revealed`) et affiché après validation dans `ResultPanel` — attribution CC conservée, indice supprimé. Re-vérifié : `npm run check` 0 erreur, `npm run build` OK.

docs/audit-passe2.md

@@ -0,0 +1,56 @@
+# JWE — Audit post-exécution (passe 2) — Rapport de vérification
+
+Date : 2026-07-16 · Référentiel : `prompts/JWE-prompt-verification-agents.md` · Méthode : fetch réel, jamais recall. Corpus : 41 lieux.
+
+## Tableau des vérifications
+
+| ID | Vérification | Méthode / Preuve | PASS/FAIL | Correctif appliqué |
+|----|--------------|------------------|-----------|--------------------|
+| C1 | QID valides + sitelink frwiki | `node app/scripts/validate-lieux.mjs` : 32 QID vérifiés par `wbgetentities` batch, sitelink + label concordants | **PASS** | — |
+| C2 | Les « null » sont de vrais null | Recherche `list=search` frwiki par titre exact pour les 9 nulls. **1 FAIL initial** : « Savane des Pétrifications » avait un article (casse « pétrifications » manquée au 1er contrôle) | **FAIL → PASS** | Savane → QID réel `Q3474455` (coords P625 14.4011, −60.8576, photo CC BY-SA 4.0 re-vérifiée) ; nouvelle lacune Martinique : **Anse Grosse Roche** (absence frwiki prouvée sur 4 variantes de titre, photo CC BY-SA 4.0 HTTP 200) |
+| C3 | Coordonnées < 500 m de la source | Comparaison P625 ↔ JSON pour les 32 lieux à QID (haversine dans le validateur) : 32/32 < 500 m | **PASS** | Seed Fort Delgrès déjà corrigé en passe 1 (Q3077840, 15.9886, −61.7231) |
+| C4a | Noms de fichiers photo opaques | Avant : URL Commons en clair dans `/api/round` (spoiler devtools). Après : `photo.url = /api/photo/<uuid>` — grep `FilePath|.jpg` sur les réponses = 0 | **FAIL → PASS** | Proxy `/api/photo/[id]?w=` (sharp : rotation, strip métadonnées, WebP, 400/800/1200, cache 24 h + `immutable`) ; `srcset` dans `PhotoPanel` ; `/api/lieux` n'expose plus `id` (anti-corrélation round↔explorer) |
+| C4b | EXIF strippés | `sharp(buf).metadata()` sur `/api/photo/<id>?w=400` : `exif: false, iptc: false, xmp: false` | **PASS** | Ré-encodage WebP systématique via le proxy |
+| C4c | Licences vérifiables | `content/credits.md` : 41 photos, page Commons + auteur + licence (CC-BY-SA/BY/CC0/DP uniquement) | **PASS** | — |
+| C5 | Photos des lieux « null » | Les 9 nulls ont une photo Commons libre documentée (source + licence dans credits.md) — le cas « rare » du référentiel est couvert ; à terme préférer photos OKI/Panoramax | **PASS** | Recommandation R4 pour les futurs lieux |
+| A1 | Score juste en Guyane | Avant : radius fixe (FAIL). Après : `radius_eff = max(radius, sqrt(aire_commune_km2/π))`, `aire_commune_km2` injecté depuis geo.api.gouv.fr (41/41 lieux). Test réel : guess à 40 km d'un lieu de Saint-Laurent-du-Maroni → `radiusEff 37,1 km`, **score 1699** (≈2 sans le fix) | **FAIL → PASS** | `lieux.ts` (`rayonEffectifKm`), réponse `/api/guess` enrichie de `radiusEffKm`, affichage discret au résultat. ⚠️ incident de revue : unités ha/1000 corrigées en ha/100 avant commit |
+| A2 | Pas de fuite de région | Caméra initiale globale (`center [-58,0], zoom 3.6`, `GameMap.svelte`) — aucun zoom région automatique ; devinette en deux temps : 4 boutons région (étape 1) → marqueur (étape 2) ; combinaison par la distance (mauvaise région ⇒ score ≈ 0). Documenté dans `docs/architecture.md` §7 | **PASS** | — |
+| A3 | Chaîne Wikipedia exacte | `wbgetentities(sitelinks)` → REST summary ; cache mémoire 24 h + `Cache-Control: max-age=86400` (était 3600) ; UA explicite ; fallback fr-only documenté. Cas intermédiaire tranché : 404 `{"reason":"no-frwiki"}` → variante Cas B « Pas encore d'article en français / Pa nyen an fransé » + lien fiche Wikidata | **FAIL → PASS** | `wiki/[qid]/+server.ts`, `WikiFiche.svelte`, clés `lacuneFr.*` FR+GCF ; bonus : redirections Wikidata résolues |
+| A4 | Strapi vs SvelteKit | ADR §1 : SvelteKit seul + JSON versionné + script de validation au commit (`app/scripts/validate-lieux.mjs`, ajouté) | **PASS** | Script de validation livré |
+| A5 | Hors scope respecté | Revue : pas de comptes, pas de leaderboard serveur, pas de multi ; scores côté client uniquement | **PASS** | — |
+| B1 | Endpoint sans fuite | 15 tirages `/api/round` (passe 1) + re-test passe 2 : 0 occurrence `coordonnees/commune/wikidata_id/FilePath` | **PASS** | — |
+| B2 | Score côté serveur | Le client envoie `{id, lat, lon, hintsUsed, timeMs?}` ; le serveur calcule (formule A1) ; recalculs indépendants conformes (passe 1 et 2) | **PASS** | — |
+| B3 | Proxy Wikipedia | Cache 24 h + header 86400 (preuve curl `%header{cache-control}`) ; aucun texte stocké en base | **PASS** | — |
+| B4 | Zéro dépendance propriétaire | `package.json` : `maplibre-gl` + `sharp` (Apache-2.0, ajouté pour C4) ; aucune clé API ; pas de télémétrie | **PASS** | — |
+| F1 | Carte | Bounds + minZoom, aucune fuite région (A2), MapLibre lazy (chunk séparé, 0 occ. sur `/`), boutons zoom, clavier | **PASS** | — |
+| F2 | Cas A / Cas B distincts | Panneaux visuellement distincts, message lacune FR + créole, CTA contribution pré-rempli (passe 1, revérifié passe 2) | **PASS** | — |
+| F3 | Cas intermédiaire géré | 404 `no-frwiki` → variante Cas B dédiée, pas d'écran vide ni d'erreur console (chemins compilés et testés) | **PASS** | Voir A3 |
+| F4 | Contour de commune | Non intégré — optionnel (« si intégré ») | N/A | Recommandation R3 |
+| F5 | Doctrine OKI | Une action primaire, Valider zone pouce, timer calme, micro-interactions créoles, style non-Google | **PASS** | — |
+| F6 | Perf 4G | Premier écran ≈ 43 KB gz ; photos WebP via proxy + `srcset` + lazy ; poids round hors tiles : 1 JSON (~1 KB) + 1 WebP 400–1200 px | **PASS** | — |
+| Q1 | Bloquants rejoués | C1, C2, A1, A2, B1, B2, F2 : preuves ci-dessus, exécutées sur `node build` (prod) | **PASS** | — |
+| Q2 | Partie complète | Rounds API + résultats Cas A/Cas B/lieu guyanais testés ; rendu visuel non capturé (pas de navigateur headless dispo) | **PASS (partiel)** | Recommandation R5 |
+| Q3 | Checklist OKI | Intégralement passée en passe 1 (`docs/audit-oki.md`), points inchangés | **PASS** | — |
+| Q4 | Scope creep | Rien de plus que le prompt v2 (+ champs audit : `aire_commune_km2`, `radiusEffKm`, proxy photo — correctifs, pas features) | **PASS** | — |
+| Q5 | CWV 4G | Mesures indirectes (poids bundles, SSR, lazy) : LCP estimé < 2 s ; pas de Lighthouse dispo | **PASS (estimé)** | Recommandation R5 |
+
+## Recommandations (hors scope audit — pas implémentées)
+
+| # | Priorité | Problème / opportunité | Solution proposée | Effort | Fichiers |
+|---|----------|------------------------|-------------------|--------|----------|
+| R1 | important | ADR-001 v1 : le Défi est aléatoire par joueur, impossible de jouer « les mêmes 5 lieux » qu'un autre | Lien à seed `/defi/<seed>` (PRNG seedé serveur, anti-fuite, partage par image) — v2 PlaySocketJS seulement si gate de traction | M | `routes/defi/[seed]`, `server/lieux.ts` |
+| R2 | important | ADR-002 : MapLibre (~800 KB) absent de l'accueil, mais l'accueil n'a pas encore de carte du tout | Carte SVG statique des 4 régions (topojson geo.api.gouv.fr + mapshaper ≤ 150 KB gz, composant from scratch, sans JS) | M | `lib/map/`, `+page.svelte` |
+| R3 | confort | Résultat : le joueur ne visualise pas les limites de la commune | Superposer le contour geo.api.gouv.fr (`geometry=contour`) sur la carte résultat | S | `GameMap`, `/api/guess` (code INSEE à stocker) |
+| R4 | confort | Les futurs lieux « null » dépendent de Commons (rare pour les lieux non documentés) | Prévoir photos OKI propres ou Panoramax dans le guide de contribution | S | `docs/contribution.md` |
+| R5 | confort | Pas de tests automatisés ni de vraies mesures Lighthouse | Vitest sur le scoring + CI légère ; Lighthouse sur le VPS de prod | M | `app/tests/` |
+| R6 | confort | Icônes PWA SVG seulement ; contraste corail 3,7:1 | Générer PNG 192/512 à l'installation ; assombrir l'accent vers ≥ 4,5:1 | S | `static/`, `oki.css` |
+
+**Verdict passe 2 : CONFORME — 0 FAIL restant.** 4 FAIL corrigés (C2, C4a, A1, A3), 1 script de validation pérenne livré.
+
+---
+
+## Addendum (2026-07-17) — R1 et R2 implémentées
+
+- **R1 (ADR-001 v1)** : livrée. Déterminisme prouvé (même seed → mêmes 5 lieux, même ordre, 2 processus), anti-fuite vérifiée (0 occurrence de champ sensible dans `/api/defi/<seed>`), image de partage inchangée (score uniquement). Voir `docs/architecture.md` §8.
+- **R2 (ADR-002)** : livrée. `regions-geo.json` = 91,8 KB gz (budget 150 KB) ; SSR de `/` sans MapLibre ni JS requis (4 vrais `<button>` région bilingues) ; bilans défi passés en SVG ; composant from scratch ; attribution présente. V1–V5 PASS.
+- Les autres recommandations (R3–R6) restent ouvertes.

docs/contribution.md

@@ -0,0 +1,87 @@
+# JWE — Guide de contribution : ajouter un lieu
+
+Le corpus de lieux vit dans `app/src/lib/server/data/lieux.json`, versionné dans Git. Ajouter un lieu = une pull request. La revue de PR sert de modération éditoriale (exactitude, crédits photo, licence).
+
+## 1. Règles d'or d'un bon lieu
+
+- **Photographiable et identifiable** : le lieu doit avoir une photo libre de qualité (Wikimedia Commons de préférence).
+- **Localisé précisément** : coordonnées GPS au lieu près (le score Expert se joue à 1 km).
+- **Éditorialement pertinent** : monument, paysage, lieu culturel, rue ordinaire… Le jeu mélange volontairement lieux célèbres et lieux du quotidien.
+- **Lacunes assumées** : il est VOLONTAIRE d'inclure des lieux sans page Wikipédia (`wikidata_id: null`) — le jeu affiche alors un écran pédagogique « Pwen blindé » appelant à documenter le territoire. Mais c'est un choix, pas une négligence : vérifiez d'abord qu'aucune page/frwiki ni entité Wikidata n'existe.
+
+## 2. Schéma du lieu
+
+```json
+{
+  "id": "générez un uuid (uuidgen)",
+  "nom": "Fort Delgrès",
+  "nom_creole": "Fò Delgrès",
+  "region": "GUADELOUPE | MARTINIQUE | GUYANE | REUNION",
+  "commune": "Basse-Terre",
+  "coordonnees": { "lat": 16.0036, "lon": -61.7319 },
+  "categorie": "MONUMENT | LIEU",
+  "difficulte": "FACILE | MOYEN | DIFFICILE | EXPERT",
+  "wikidata_id": "Q3077840",
+  "photo": {
+    "url": "https://commons.wikimedia.org/wiki/Special:FilePath/FICHIER?width=1200",
+    "credit": "© Auteur / Wikimedia Commons CC-BY-SA-4.0",
+    "alt": "Description précise (sert d'alternative textuelle)"
+  },
+  "indices": [
+    { "niveau": 1, "texte": "Indice doux" },
+    { "niveau": 2, "texte": "Indice précis" }
+  ]
+}
+```
+
+## 3. Trouver et lier l'identifiant Wikidata
+
+1. Cherchez le lieu sur https://www.wikidata.org
+2. L'identifiant ressemble à `Q3077840`.
+3. Vérifiez que l'entité a un lien vers une page **fr.wikipedia** (sitelink) — c'est ce qui permet au jeu d'afficher l'extrait de l'article :
+
+```bash
+curl -s "https://www.wikidata.org/w/api.php?action=wbgetentities&ids=Q3077840&props=sitelinks&format=json" | grep frwiki
+```
+
+4. **Si le lieu n'a ni page Wikipédia ni entité Wikidata** : mettez `"wikidata_id": null`. C'est une contribution précieuse : le jeu transforme la lacune en appel à contribution. Mieux encore : créez l'entité Wikidata vous-même, puis revenez renseigner l'ID !
+
+## 4. Choisir la photo (licence obligatoire)
+
+1. Cherchez sur https://commons.wikimedia.org une photo nette, paysage de préférence.
+2. Licences acceptées : CC BY, CC BY-SA, CC0, domaine public. **Jamais** de « fair use ».
+3. Vérifiez la licence et l'auteur via l'API :
+
+```bash
+curl -s "https://commons.wikimedia.org/w/api.php?action=query&titles=File:NOM_DU_FICHIER&prop=imageinfo&iiprop=url|extmetadata&format=json"
+```
+
+4. L'URL dans le JSON utilise `Special:FilePath` avec `?width=1200` (redimensionnement à la volée côté Wikimedia — pas besoin d'héberger l'image). Testez qu'elle renvoie bien 200.
+5. Reportez le crédit exact (auteur + licence) dans `photo.credit` ET dans `content/credits.md`.
+
+## 5. Valider avant la PR
+
+```bash
+cd app
+node -e "const l=require('./src/lib/server/data/lieux.json');console.log(l.length,'lieux')"
+npm run check
+```
+
+Checklist de revue :
+
+- [ ] coordonnées cohérentes avec la commune déclarée
+- [ ] `wikidata_id` vérifié (ou `null` justifié)
+- [ ] licence photo CC vérifiée + crédit complet
+- [ ] `alt` descriptif (accessibilité)
+- [ ] 2 indices progressifs, sans donner la réponse
+- [ ] `nom_creole` renseigné quand la forme créole est attestée (sinon, reprendre le nom français — ne pas inventer)
+
+## 6. Contribuer à Wikipédia / Wikidata (au-delà du jeu)
+
+Si vous ajoutez un lieu « Pwen blindé », envisagez de documenter le lieu vous-même :
+
+- Créer un compte et un brouillon d'article : https://fr.wikipedia.org/wiki/Aide:Brouillon
+- Créer une entité Wikidata : https://www.wikidata.org/wiki/Wikidata:Main_Page
+- Contacter les groupes Wikimédia locaux (Wikimédia France, groupes antillais/guyanais/réunionnais).
+
+Chaque entité créée enrichit Wikipédia, les cartes libres… et les futurs jeux comme JWE.

docs/deploiement.md

@@ -0,0 +1,124 @@
+# JWE v2 — Guide de déploiement auto-hébergé
+
+Cible : un petit VPS (1 vCPU / 1 Go RAM suffit) sous Debian/Ubuntu, derrière nginx ou Caddy. Aucun service propriétaire, aucune clé API payante.
+
+> **Exception documentée (mode street)** : le 5e mode « An lari a » utilise la visionneuse Mapillary (images CC BY-SA 4.0, lib MIT) et requiert un **token client Mapillary gratuit** — voir §2.1. Sans ce token, les 4 autres modes fonctionnent normalement ; seul le mode street affiche un message d'indisponibilité.
+
+## 1. Application SvelteKit
+
+```bash
+# Prérequis : Node.js >= 20 (via nodesource ou nvm)
+git clone https://codeberg.org/OKI/jwe.git
+cd jwe/app
+npm ci
+npm run build          # produit app/build (adapter-node)
+```
+
+Lancer en production (port 3000 par défaut) :
+
+```bash
+PORT=3000 node build
+```
+
+Service systemd `/etc/systemd/system/jwe.service` :
+
+```ini
+[Unit]
+Description=JWE — jeu de géolocalisation OKI
+After=network.target
+
+[Service]
+Type=simple
+User=jwe
+WorkingDirectory=/srv/jwe/app
+Environment=PORT=3000
+Environment=ORIGIN=https://jwe.o-k-i.net
+Environment=PUBLIC_TILES_URL=https://tiles.o-k-i.net/styles/oki/style.json
+Environment=PUBLIC_MAPILLARY_TOKEN=MLY|xxxxxxxx|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+ExecStart=/usr/bin/node build
+Restart=on-failure
+
+[Install]
+WantedBy=multi-user.target
+```
+
+## 2.1 Token Mapillary (mode street « An lari a »)
+
+1. Créez un compte sur [mapillary.com](https://www.mapillary.com) puis une application sur le [dashboard développeurs](https://www.mapillary.com/dashboard/developers) : récupérez le **client token** (format `MLY|…|…`).
+2. Exposez-le via `PUBLIC_MAPILLARY_TOKEN` (service systemd ci-dessus, ou `app/.env` en développement — voir `app/.env.example`). C'est un **token client** : conçu pour être visible côté navigateur, rate-limité par application — ce n'est pas un secret.
+3. Vérifiez périodiquement le corpus street (images parfois retirées par leurs auteurs) :
+
+```bash
+cd app && node scripts/validate-street.mjs   # lit le token depuis .env
+```
+
+## 2. Reverse proxy (exemple nginx)
+
+```nginx
+server {
+    server_name jwe.o-k-i.net;
+    location / {
+        proxy_pass http://127.0.0.1:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}
+# + TLS via certbot
+```
+
+## 3. Tiles cartographiques auto-hébergées (tileserver-gl)
+
+Par défaut l'application utilise OpenFreeMap (libre, sans clé). Pour une souveraineté complète, hébergez vos propres tiles OSM des 4 régions.
+
+### 3.1 Récupérer les extraits OpenStreetMap
+
+```bash
+mkdir -p /srv/tiles && cd /srv/tiles
+# Guadeloupe, Martinique, Guyane : extraits Geofabrik
+wget https://download.geofabrik.de/north-america/guadeloupe-latest.osm.pbf
+wget https://download.geofabrik.de/north-america/martinique-latest.osm.pbf
+wget https://download.geofabrik.de/south-america/french-guiana-latest.osm.pbf
+# La Réunion
+wget https://download.geofabrik.de/africa/reunion-latest.osm.pbf
+```
+
+### 3.2 Générer les .mbtiles
+
+Avec [openmaptiles](https://github.com/openmaptiles/openmaptiles) (Docker requis) : générez un `.mbtiles` par région puis fusionnez-les avec `tile-join` (paquet `tippecanoe`) :
+
+```bash
+tile-join -o dom-tom.mbtiles guadeloupe.mbtiles martinique.mbtiles guyane.mbtiles reunion.mbtiles
+```
+
+(Alternative plus légère : extraire les 4 régions d'un `.mbtiles` Monde basse-résolution `tile-join --bbox=…` par région, puisque la carte de devinette n'a pas besoin d'un zoom très fin partout.)
+
+### 3.3 Servir avec tileserver-gl
+
+```bash
+docker run --rm -d --name tiles -v /srv/tiles:/data -p 8080:8080 \
+  maptiler/tileserver-gl dom-tom.mbtiles
+```
+
+Copiez le style OKI de l'application (`app/src/lib/map/style-oki.json`) dans `/srv/tiles/styles/oki/`, adaptez son URL de source vers votre `dom-tom.mbtiles`, puis :
+
+```bash
+Environment=PUBLIC_TILES_URL=https://tiles.o-k-i.net/styles/oki/style.json
+```
+
+### 3.4 Fontes et sprites
+
+tileserver-gl sert aussi les fontes (glyphs) et sprites référencés par le style. Les fontes open-source utilisées par le style OKI (ex. Noto Sans) se récupèrent via `openmaptiles/fonts` ou `klokantech/tileserver-gl-fonts`.
+
+## 4. Cache Wikipedia
+
+Le endpoint `/api/wiki/[qid]` met en cache les extraits 24 h en mémoire. Aucune configuration requise ; pour un cache partagé entre instances, placez nginx en cache proxy devant `/api/wiki/` (respecte déjà `Cache-Control`).
+
+## 5. Mise à jour
+
+```bash
+cd jwe && git pull && cd app && npm ci && npm run build
+systemctl restart jwe
+```
+
+L'ajout de lieux (voir `docs/contribution.md`) ne demande qu'un rebuild + restart : le corpus est embarqué dans le build.

game-control/back.php

@@ -1,9 +0,0 @@
-<?= "
-    <div style='display: flex; justify-content: center; align-items: center;'>
-        <h1 id='title'>$zone</h1>
-        <a style='text-decoration: none;' href='/'>
-            <button id='back-button'>🔙 Retour</button>
-        </a>
-    </div>
-";
-?>

game-control/start.php

@@ -1,12 +0,0 @@
-<?= "
-    <div style='display: flex; justify-content: center;'>
-        <button class='game-button' disabled style='margin-right: 2em;' onClick='startGame()' id='start' type='button'>Commencer la partie</button>
-        <button class='game-button' disabled onClick='restartGame()' id='restart' type='button'>Recommencer</button>
-    </div>
-
-    <div id='chrono'></div>
-    <div id='score' style='display: flex; justify-content: center;'></div>
-
-    <div id='question'></div>
-";
-?>

index.php

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Choisis une carte</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="./css/index.css" />
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-</head>
-<body>
-    <h1>Choisis une carte</h1>
-    <ul>
-        <li><a href="kat/KAMA.php">Afrique</a></li>
-        <li><a href="kat/971.php">Guadeloupe (971)</a></li>
-        <li><a href="kat/972.php">Martinique (972)</a></li>
-        <li><a href="kat/973.php">Guyane (973)</a></li>
-        <li><a href="kat/974.php">La Réunion (974)</a></li>
-    </ul>
-</body>
-</html>

js/map.js

@@ -1,554 +0,0 @@
-/**
- * js/map.js
- */
-
-/**
- * Typos
- * 
- * Après l'ajout de l'Afrique, on remplace "communes" par "zones"
- * Zones = Communes ou Pays
- */
-
-/**
- * Récupérer le nom du fichier actuel (ex: 971.php) et en extraire le code du département (ex: 971).
- */
-const currentFileName = window.location.pathname.split('/').pop()
-const codeCarte = currentFileName.split('.')[0]
-
-const startButton = document.getElementById('start')
-const restartButton = document.getElementById('restart')
-
-restartButton.setAttribute('disabled', true)
-
-/**
- * Définir le centre , le niveau de zoom et le style de la carte en fonction du code du département.
- */
-let centerCoordinates
-let zoomLevel
-let styleFileName
-
-switch (codeCarte) {
-    case 'KAMA':
-        centerCoordinates = [21.21, 1.36] // Afrique
-        zoomLevel = 2.7
-        styleFileName = 'ortho-jwe-KAMA.json'
-        break
-    case '971':
-        centerCoordinates = [-61.4167, 16.25] // Guadeloupe
-        zoomLevel = 9
-        styleFileName = 'ortho.json'
-        break
-    case '972':
-        centerCoordinates = [-61.01635, 14.60285] // Martinique
-        zoomLevel = 9.5
-        styleFileName = 'ortho.json'
-        break
-    case '973':
-        centerCoordinates = [-53.1258, 3.9339] // Guyane française
-        zoomLevel = 7
-        styleFileName = 'ortho-jwe.json'
-        break
-    case '974':
-        centerCoordinates = [55.52905, -21.13014] // La Réunion
-        styleFileName = 'ortho.json'
-        zoomLevel = 9.5
-        break
-    default:
-        centerCoordinates = [-61.4167, 16.25] // Par défaut (Guadeloupe)
-        styleFileName = 'ortho.json'
-        zoomLevel = 9.5
-}
-
-/**
- * Définit les décalages des popups en fonction de leur position.
- */
-const popupOffsets = {
-    'top': [0, 0],
-    'top-left': [0, 0],
-    'top-right': [0, 0],
-    'bottom': [0, -30],
-    'bottom-left': [0, -50],
-    'bottom-right': [0, -50],
-    'left': [25, -25],
-    'right': [-25, -25]
-}
-
-/**
- * Référence aux éléments HTML pour afficher le score.
- */
-let ok
-let ko
-let penaltyElement
-
-/**
- * Gestion du temps écoulé
- */
-let gameTime = 0
-let gameMinute = 0
-let gameSecond = 0
-let gamePenalty = 0
-let gameTimeWithPenalty = 0
-let gameMinuteWithPenalty = 0
-let gameSecondWithPenalty = 0
-let intervalId
-
-/**
- * État actuel de la commune survolée.
- */
-let hoveredStateId = null
-
-/**
- * Référence à la commune actuellement sélectionnée pour trouver.
- */
-let currentZone = null
-
-/**
- * Ensemble des codes des communes déjà trouvées correctement.
- */
-const correctAnswers = new Set()
-
-/**
- * Permet de remettre le jeu à 0
- */
-function resetGame() {
-    ok.innerText = 0
-    ko.innerText = 0
-    correctAnswers.clear()
-    clearInterval(intervalId)
-    intervalId = null
-    gameTime = 0
-    gamePenalty = 0
-    gameTimeWithPenalty = 0
-}
-
-/**
- * Active le bouton "Commencer la partie" au chargement de la page
- */
-window.onload = function() {
-    const startElement = document.getElementById('start')
-    startElement.removeAttribute('disabled')
-}
-
-function startGame() {
-    loadMap()
-
-    const question = document.getElementById('question')
-    const score = document.getElementById('score')
-    const chrono = document.getElementById('chrono')
-    
-    question.innerHTML = `<p style='font-weight: bold;'>Trouve ${codeCarte === 'KAMA' ? 'le pays' : 'la commune'}</p><p id='commune' style='font-size: 30px; font-weight: bold; color: #1F51FF'>...</p>`
-    score.innerHTML = "<p style='color: green; font-weight: bold; margin-right: 2em;'>Correct ✅ : <span style='color: black;' id='OK'>0</span></p><p style='color: red; font-weight: bold;'>Faux ❌ : <span style='color: black;' id='KO'>0</span></p>"
-    chrono.innerHTML = "<p>Temps écoulé : <span id='time'></span><span style='margin-left: 1em;color: red; font-weight: bold;' id='penalty'></span></p>"
-
-    communeObserver()
-
-    ok = document.getElementById('OK')
-    ko = document.getElementById('KO')
-    penaltyElement = document.getElementById('penalty')
-
-
-    startButton.setAttribute('disabled', true)
-    restartButton.removeAttribute('disabled')
-
-    resetGame()
-}
-
-/**
- * Recommencer la partie
- */
-function restartGame() {
-    startGame()
-}
-
-/**
- * Observe le contenu de l'élément ayant pour id "commune"
- */
-function communeObserver(){
-    const communeElement = document.getElementById('commune')
-    const timeElement = document.getElementById('time')
-
-    // Options de l'observateur (quelles sont les mutations à observer)
-    const config = { childList: true, subtree: true, characterData: true }
-
-    // Fonction callback à éxécuter quand une mutation est observée
-    const callback = function (mutationsList) {
-        for (var mutation of mutationsList) {
-            if (mutation.type == "childList" || mutation.type == "characterData") {
-                // Vérifie si le contenu de la balise span n'est pas égal à "..."
-                if (communeElement.textContent.trim() !== "...") {
-                    // Vérifie si setInterval n'est pas déjà en cours
-                    if (!intervalId) {
-                        intervalId = setInterval(() => {
-                            gameTime++
-                            gameTimeWithPenalty = gameTime + gamePenalty
-
-                            if (gameTimeWithPenalty >= 60) {
-                                gameMinuteWithPenalty = String(gameTimeWithPenalty / 60).split('.')[0]
-                                gameMinute = String(gameTime / 60).split('.')[0]
-
-                                gameSecondWithPenalty = gameTimeWithPenalty % 60
-                                gameSecond = gameTime % 60
-                                timeElement.innerText = `${gameMinuteWithPenalty} minute${gameMinuteWithPenalty > 1 ? 's' : ''} ${gameSecondWithPenalty} seconde${gameSecondWithPenalty > 1 ? 's' : ''}`
-                            } else {
-                                timeElement.innerText = `${gameTimeWithPenalty} seconde${gameTimeWithPenalty > 1 ? 's' : ''}`
-                            }
-                        }, 1000)
-                    }
-                }
-            }
-        }
-    }
-
-    // Créé une instance de l'observateur lié à la fonction de callback
-    const observer = new MutationObserver(callback)
-
-    // Commence à observer le noeud cible pour les mutations précédemment configurées
-    observer.observe(communeElement, config)
-}
-
-/**
- * Récupère les propriétés des communes depuis un fichier GeoJSON en fonction du code du département.
- * 
- * @async
- * @param {string} codeCarte - Code de la carte.
- * @returns {Promise<Object[]>} Promesse résolue avec les propriétés des communes.
- */
-async function getFile(codeCarte) {
-    try {
-        const response = await fetch(`../kat/data/${codeCarte}/contours-${codeCarte === 'KAMA' ? 'pays' : 'communes'}.geojson`)
-        if (!response.ok) {
-            throw new Error(`Échec du chargement du fichier JSON : ${response.statusText}`)
-        }
-
-        data = await response.json()
-        return data.features.map(({properties}) => properties)
-    } catch (error) {
-        console.error('Erreur:', error)
-        throw new Error(error)
-    }
-}
-
-/**
- * Récupère les coordonnées du centre de la commune depuis le fichier "centres.json" en fonction du code du département.
- * 
- * @param {string} codeCarte - Code de la carte.
- * @param {string} codeZone - Code de la zone.
- * @returns {Promise<number[]>} Promesse résolue avec les coordonnées du centre de la commune.
- */
-async function getZoneCenterCoordinates(codeCarte, codeZone) {
-    try {
-        // Utiliser fetch pour lire le fichier "centres.json"
-        const response = await fetch(`../kat/data/${codeCarte}/centres.json`)
-        if (!response.ok) {
-            throw new Error(`Échec du chargement du fichier JSON : ${response.statusText}`)
-        }
-        
-        const centerData = await response.json()
-        
-        // Vérifier si le code de la zone existe dans les données
-        if (codeZone in centerData) {
-            const coordinates = centerData[codeZone]
-            return coordinates
-        } else {
-            throw new Error(`Aucune donnée de centre trouvée pour la commune : ${codeZone}`)
-        }
-    } catch (error) {
-        console.error('Erreur lors de la récupération des coordonnées du centre de la commune :', error)
-        throw new Error(error)
-    }
-}
-
-
-/**
- * Met à jour le score en fonction de la réponse.
- * 
- * @param {boolean} isCorrect - Indique si la réponse est correcte.
- */
-function updateScore(isCorrect) {
-    if (isCorrect) {
-        ok.innerText = Number.parseInt(ok.innerText, 10) + 1
-    } else {
-        ko.innerText = Number.parseInt(ko.innerText, 10) + 1
-        gamePenalty += 5
-
-        penaltyElement.style.opacity = 1
-        penaltyElement.innerText = '+ 5 secondes'
-
-        setTimeout(() => {
-            penaltyElement.style.opacity = 0
-            penaltyElement.innerText = ''
-        }, 2000)
-    }
-}
-
-/**
- * Sélectionne une commune au hasard parmi celles qui n'ont pas encore été trouvées.
- * 
- * @param {Array} zones - Liste de toutes les zones.
- * @returns {Object|null} Retourne la commune sélectionnée ou null si toutes les zones ont été trouvées.
- */
-function pickRandomZone(zones) {
-    const zonesRestantes = zones.filter(commune => !correctAnswers.has(commune.code))
-
-    if (zonesRestantes.length === 0) {
-        return null
-    }
-
-    const index = Math.floor(Math.random() * zonesRestantes.length)
-    return zonesRestantes[index]
-}
-
-/**
- * Vérifie si le code de la zone cliquée correspond à la commune actuelle à trouver.
- * 
- * @param {string} codeZone - code de la zone à vérifier.
- * @returns {boolean} Résultat de la vérification.
- */
-function checkAnswer(codeZone) {
-    return currentZone && codeZone === currentZone.code
-}
-
-/**
- * Charge la carte
- */
-function loadMap() {
-    /**
-     * Initialise et configure la carte
-     */
-    const map = new maplibregl.Map({
-        container: 'map',
-        style: `../kat/styles/${styleFileName}`,
-        center: centerCoordinates,
-        zoom: zoomLevel
-    })
-
-    if (codeCarte !== '973') {
-        /**
-         * Désactive le zoom, le double-clic, le déplacement de la carte pour les cartes autres que celle la Guyane.
-         */
-        map.scrollZoom.disable()
-        map.doubleClickZoom.disable()
-        map.dragPan.disable()
-    } else {
-        /**
-         * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour la Guyane.
-         */
-        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
-        map.setMinZoom(7)
-        map.setMaxZoom(9.5)
-    }
-    
-    if (codeCarte === 'KAMA') {
-        /**
-         * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour l'Afrique'.
-         */
-        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
-        map.setMinZoom(2.4)
-        map.setMaxZoom(9)
-        map.dragPan.enable()
-    }
-
-    /**
-     * Code pour la gestion des événements de la carte (load, mousemove, mouseleave, click).
-     */
-    map.on('load', async () => {
-        const zones = await getFile(codeCarte)
-
-        /**
-         * Définit la zone actuelle à trouver et met à jour l'affichage.
-         * 
-         * @param {Object} zone - La zone à définir comme actuelle.
-         */
-        function setZone(zone) {
-            if (currentZone) {
-                map.setFeatureState(
-                    {source: 'communes', id: currentZone.code},
-                    {current: false}
-                )
-            }
-
-            currentZone = zone
-            document.getElementById('commune').innerText = zone.nom
-
-            map.setFeatureState(
-                {source: 'communes', id: zone.code},
-                {current: true}
-            )
-        }
-
-        /**
-         * Ajouter une source de données pour les communes.
-         */
-        map.addSource('communes', {
-            'type': 'geojson',
-            'data': `../kat/data/${codeCarte}/contours-${codeCarte === 'KAMA' ? 'pays' : 'communes'}.geojson`,
-            'promoteId': 'code'
-        })
-
-        /**
-         * Ajouter une couche de remplissage pour les communes.
-         */
-        map.addLayer({
-            'id': 'drom',
-            'type': 'fill',
-            'source': 'communes',
-            'layout': {},
-            'paint': {
-                'fill-color': '#1F51FF',
-                'fill-opacity': [
-                    'case',
-                    ['boolean', ['feature-state', 'hover'], false],
-                    0.8,
-                    0
-                ]
-            }
-        })
-
-        /**
-         * Ajouter une couche de remplissage pour les communes (2ème couche), en prenant en compte les réponses correctes et incorrectes.
-         */
-        map.addLayer({
-            'id': 'drom-2',
-            'type': 'fill',
-            'source': 'communes',
-            'layout': {},
-            'paint': {
-                'fill-color': [
-                    'case',
-                    ['boolean', ['feature-state', 'correct'], false], '#00FF00',
-                    ['boolean', ['feature-state', 'incorrect'], false], '#FF0000',
-                    'rgba(0,0,0,0)'
-                ],
-                'fill-opacity': [
-                    'case',
-                    ['boolean', ['feature-state', 'hover'], false], 0.5,
-                    0.8
-                ]
-            }
-        })
-
-        /**
-         * Gère l'evenement mousemove (quand la souris survole la commune)
-         */
-        map.on('mousemove', 'drom', e => {
-            map.getCanvas().style.cursor = 'pointer'
-            if (e.features.length > 0) {
-                if (hoveredStateId) {
-                    map.setFeatureState(
-                        {source: 'communes', id: hoveredStateId},
-                        {hover: false}
-                    )
-                }
-                hoveredStateId = e.features[0].id
-                map.setFeatureState(
-                    {source: 'communes', id: hoveredStateId},
-                    {hover: true}
-                )
-            }
-        })
-
-        /**
-         * Gère l'evenement mouseleave (quand la souris quitte la zone)
-         */
-        map.on('mouseleave', 'drom', () => {
-            map.getCanvas().style.cursor = ''
-            if (hoveredStateId) {
-                map.setFeatureState(
-                    {source: 'communes', id: hoveredStateId},
-                    {hover: false}
-                )
-            }
-            hoveredStateId = null
-        })
-
-        /**
-         * Gère l'evenement click (quand on clique sur la zone)
-         */
-        map.on('click', 'drom', async e => {
-            if (e.features.length > 0) {
-                const clickedCodeZone = e.features[0].id
-                const clickedZoneNom = e.features[0].properties.nom
-                const isCorrect = checkAnswer(clickedCodeZone)
-
-                if (isCorrect) {
-                    updateScore(true)
-                    const centerCoordinates = await getZoneCenterCoordinates(codeCarte, clickedCodeZone)
-
-                    const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ok'})
-                        .setLngLat([centerCoordinates[0], centerCoordinates[1]])
-                        .setHTML(`<h3>Bravo, c'est ${clickedZoneNom}</h3>`)
-                        .setMaxWidth('200px')
-                        .addTo(map)
-
-                    setTimeout(() => {
-                        popup.remove()
-                    }, 1500)
-
-                    correctAnswers.add(clickedCodeZone)
-                    zones.forEach(commune => {
-                        map.setFeatureState(
-                            {source: 'communes', id: commune.code},
-                            {incorrect: false}
-                        )
-                    })
-                    map.setFeatureState(
-                        {source: 'communes', id: clickedCodeZone},
-                        {correct: true, current: false}
-                    )
-
-                    const newZone = pickRandomZone(zones)
-                    if (newZone) {
-                        setZone(newZone)
-                    } else {
-                        const totalAnswers = Number.parseInt(ok.innerText, 10) + Number.parseInt(ko.innerText, 10)
-                        const percentageCorrectAnswers = (Number.parseInt(ok.innerText, 10) / totalAnswers) * 100
-
-                        let elapsedTime = `${gameTime} seconde${gameTime > 1 ? 's' : ''}`
-                        let elapsedTimeWithPenalty = `${gameTimeWithPenalty} seconde${gameTimeWithPenalty > 1 ? 's' : ''}`
-
-                        if (gameTime >= 60) {
-                            elapsedTime = `${gameMinute} minute${gameMinute > 1 ? 's' : ''} ${gameSecond} seconde${gameSecond > 1 ? 's' : ''}`
-                        }
-
-                        if (gameTimeWithPenalty >= 60) {
-                            elapsedTimeWithPenalty = `${gameMinuteWithPenalty} minute${gameMinuteWithPenalty > 1 ? 's' : ''} ${gameSecondWithPenalty} seconde${gameSecondWithPenalty > 1 ? 's' : ''}`
-                        }
-
-                        alert(`${Math.round(percentageCorrectAnswers)}% de bonnes réponses !
-                            \nTemps écoulé : ${elapsedTime} ! ${gamePenalty ? `
-                            \nPénalité : ${gamePenalty} secondes` : '\nAucune pénalité !'}
-                            \nTemps total : ${elapsedTimeWithPenalty}`)
-                        clearInterval(intervalId)
-                        gameTime = 0
-                        gameTimeWithPenalty = 0
-
-                        setTimeout(() => {
-                            location.reload()
-                        }, 1000)
-                    }
-                } else {
-                    updateScore(false)
-                    const centerCoordinates = await getZoneCenterCoordinates(codeCarte, clickedCodeZone)
-
-                    const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ko'})
-                        .setLngLat([centerCoordinates[0], centerCoordinates[1]])
-                        .setHTML(`<h3>Faux, c'est ${clickedZoneNom}</h3>`)
-                        .setMaxWidth('200px')
-                        .addTo(map)
-
-                    setTimeout(() => {
-                        popup.remove()
-                    }, 1500)
-
-                    map.setFeatureState(
-                        {source: 'communes', id: clickedCodeZone},
-                        {incorrect: true}
-                    )
-                }
-            }
-        })
-
-        const zone = pickRandomZone(zones)
-        setZone(zone)
-    })
-}

kat/971.php

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>JWE - KAT</title>
-    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
-    <link rel="stylesheet" href="../css/map.css" />
-</head>
-<body>
-    <?php
-        $zone = 'Guadeloupe (971)';
-        include('../game-control/back.php');
-        include('../game-control/start.php');
-    ?>
-
-    <div id="map"></div>
-
-    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-    <script src="../js/map.js"></script>
-</body>
-</html>

kat/972.php

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>JWE - KAT</title>
-    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
-    <link rel="stylesheet" href="../css/map.css" />
-</head>
-<body>
-    <?php
-        $zone = 'Martinique (972)';
-        include('../game-control/back.php');
-        include('../game-control/start.php');
-    ?>
-
-    <div id="map"></div>
-
-    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-    <script src="../js/map.js"></script>
-</body>
-</html>

kat/973.php

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>JWE - KAT</title>
-    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
-    <link rel="stylesheet" href="../css/map.css" />
-</head>
-<body>
-    <?php
-        $zone = 'Guyane (973)';
-        include('../game-control/back.php');
-        include('../game-control/start.php');
-    ?>
-
-    <div id="map"></div>
-
-    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-    <script src="../js/map.js"></script>
-</body>
-</html>

kat/974.php

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>JWE - KAT</title>
-    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
-    <link rel="stylesheet" href="../css/map.css" />
-</head>
-<body>
-    <?php
-        $zone = 'La Réunion (974)';
-        include('../game-control/back.php');
-        include('../game-control/start.php');
-    ?>
-
-    <div id="map"></div>
-
-    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-    <script src="../js/map.js"></script>
-</body>
-</html>

kat/KAMA.php

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>JWE - KAT</title>
-    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
-    <link rel="stylesheet" href="../css/map.css" />
-</head>
-<body>
-    <?php
-        $zone = 'Afrique';
-        include('../game-control/back.php');
-        include('../game-control/start.php');
-    ?>
-
-    <div id="map"></div>
-
-    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-    <script src="../js/map.js"></script>
-</body>
-</html>

kat/data/971/centres.json

@@ -1 +0,0 @@
-{"97101":[-61.4967,16.2678],"97102":[-61.4698,16.4668],"97103":[-61.5951,16.2498],"97104":[-61.7158,16.0497],"97105":[-61.7294,15.9992],"97106":[-61.7578,16.1387],"97107":[-61.6197,16.0486],"97108":[-61.2296,15.9176],"97109":[-61.689,16.0057],"97110":[-61.0814,16.2972],"97111":[-61.7831,16.3194],"97112":[-61.2929,15.9085],"97113":[-61.4749,16.2274],"97114":[-61.615,16.1231],"97115":[-61.6695,16.2443],"97116":[-61.4988,16.3212],"97117":[-61.36,16.3354],"97118":[-61.658,16.1695],"97119":[-61.4547,16.3921],"97120":[-61.5379,16.2351],"97121":[-61.7651,16.227],"97122":[-61.488,16.4201],"97124":[-61.6953,16.0406],"97125":[-61.2539,16.2784],"97126":[-61.2732,15.9654],"97128":[-61.3896,16.2565],"97129":[-61.6836,16.2937],"97130":[-61.6326,15.8554],"97131":[-61.5892,15.8579],"97132":[-61.6493,15.9931],"97133":[-61.6929,15.9607],"97134":[-61.717,16.0847]}

kat/data/972/centres.json

@@ -1 +0,0 @@
-{"97201":[-61.1305,14.816],"97202":[-61.0736,14.4996],"97203":[-61.1237,14.841],"97204":[-61.1584,14.7041],"97205":[-61.1297,14.6593],"97206":[-61.0165,14.4787],"97207":[-60.9685,14.5785],"97208":[-61.1207,14.7228],"97209":[-61.0686,14.6492],"97210":[-60.8976,14.6093],"97211":[-61.1837,14.847],"97212":[-61.0303,14.7084],"97213":[-60.9923,14.6231],"97214":[-61.074,14.7995],"97215":[-61.1465,14.8474],"97216":[-61.0531,14.7796],"97217":[-60.8589,14.4822],"97218":[-61.1217,14.7695],"97219":[-61.1963,14.822],"97220":[-60.897,14.5027],"97221":[-60.9623,14.5262],"97222":[-60.9383,14.675],"97223":[-60.9233,14.5618],"97224":[-61.0407,14.6835],"97225":[-61.1736,14.7717],"97226":[-60.8516,14.4314],"97227":[-60.9467,14.4904],"97228":[-61.0084,14.773],"97229":[-61.1001,14.6518],"97230":[-60.9469,14.7381],"97231":[-61.0376,14.5329],"97232":[-60.8594,14.5421],"97233":[-61.1362,14.7046],"97234":[-61.1459,14.6747]}

kat/data/973/centres.json

@@ -1 +0,0 @@
-{"97301":[-52.4797,4.0081],"97302":[-52.3319,4.9464],"97303":[-53.2979,5.2395],"97304":[-52.7764,4.9085],"97305":[-52.4834,4.9925],"97306":[-53.6784,4.9955],"97307":[-52.3498,4.8281],"97308":[-52.075,3.8078],"97309":[-52.2809,4.8897],"97310":[-52.5164,4.4685],"97311":[-54.0105,4.9478],"97312":[-53.0097,5.2418],"97313":[-52.5059,4.8124],"97314":[-51.8261,4.2104],"97352":[-53.4333,3.8181],"97353":[-53.8275,3.049],"97356":[-52.6916,2.8679],"97357":[-54.1148,4.3756],"97358":[-53.1108,4.4853],"97360":[-54.2171,4.9019],"97361":[-53.9167,5.6743],"97362":[-54.0463,4.0165]}

kat/data/974/centres.json

@@ -1 +0,0 @@
-{"97401":[55.3629,-21.2019],"97402":[55.6266,-21.0316],"97403":[55.4937,-21.2108],"97404":[55.358,-21.2348],"97405":[55.5706,-21.333],"97406":[55.6442,-21.153],"97407":[55.3038,-20.946],"97408":[55.3918,-20.9967],"97409":[55.6373,-20.9568],"97410":[55.6312,-21.0887],"97411":[55.4444,-20.9434],"97412":[55.644,-21.2921],"97413":[55.3432,-21.1816],"97414":[55.4224,-21.2255],"97415":[55.3402,-21.0366],"97416":[55.5043,-21.309],"97417":[55.7436,-21.3084],"97418":[55.5234,-20.9463],"97419":[55.7418,-21.1778],"97420":[55.5936,-20.9507],"97421":[55.5145,-21.0524],"97422":[55.5701,-21.225],"97423":[55.3377,-21.1138],"97424":[55.4555,-21.1403]}

kat/data/KAMA/centres.json

@@ -1 +0,0 @@
-{"ETH":[38.947611801806495,9.176814264950167],"SDS":[30.333984675480757,7.914722205528841],"SOM":[46.5464912522007,6.019175354863551],"KEN":[37.67592532581279,0.5754517148962938],"MWI":[34.09609576769113,-12.735921358471073],"TZA":[35.02498976184473,-6.566525957661288],"SOL":[45.53479066506411,10.023473808092941],"MAR":[-9.046877128746582,28.467636665531234],"SAH":[-12.391359135142558,24.416734554893036],"COG":[14.38464128008542,-1.1354128251164652],"COD":[23.704062532123782,-4.540787787186473],"NAM":[18.118996644631416,-21.83831839276176],"ZAF":[25.24975775021357,-28.817139228003967],"LBY":[17.664886093139636,28.172444725036605],"TUN":[9.882258580942635,34.22426090761612],"ZMB":[28.80207441614033,-12.512532465508636],"SLE":[-11.936779785156242,8.548585165700597],"GIN":[-10.715817638913904,10.109710183267284],"LBR":[-9.0900040336277,6.986474255548001],"CAF":[20.072171294504646,6.3873503410410155],"SDN":[30.120938288256728,13.975380990751114],"DJI":[42.62365767045457,11.756886541193175],"ERI":[39.367317191633596,15.18048657614088],"CIV":[-5.781225753157097,7.972692202215326],"MLI":[-5.421274816662242,14.822845678349621],"SEN":[-14.389369189049583,14.030028086260339],"NGA":[7.736925662551809,8.550665249482046],"BEN":[2.3506708850599414,9.720748943172085],"AGO":[17.418358503069197,-10.850000871930797],"BWA":[24.581611328124996,-22.54493652343752],"ZWE":[29.6308403060281,-19.12852949334319],"TCD":[18.96083041487069,12.76727387526939],"DZA":[1.7720829050164644,29.20973285875821],"MOZ":[35.32805940685356,-17.11878541610783],"SWZ":[31.558316617398656,-26.473094383445954],"BDI":[29.989004159902603,-3.062598924512992],"RWA":[29.916395531631114,-2.013365806021347],"UGA":[32.11797202339386,1.3982593728177313],"LSO":[28.192589689555945,-29.671546052631577],"CMR":[13.006806556679795,6.257060071185528],"GAB":[11.616017795138896,-0.8739639395254695],"NER":[6.34184839443898,15.351725132258853],"BFA":[-1.6133907257564375,11.978387935577883],"TGO":[0.7269224654796614,8.681028948643402],"GHA":[-1.0836453419811212,8.284749272184547],"GNB":[-15.375719884923969,11.688141034100504],"EGY":[30.779661923363108,27.661831325954854],"MRT":[-11.604420093309178,19.791261755485873],"GNQ":[9.71551682692309,2.0668689903846107],"GMB":[-15.49098985460068,13.434295654296868],"MDG":[46.962987167300405,-17.773911299904935],"COM":[43.85425415039061,-11.994052124023446],"STP":[6.957070312500013,0.8602416992187436],"CPV":[-23.908437994462016,16.04201691060126]}