feat: refonte layout viewport + passe motion + finitions SEO/sécurité

- 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

@@ -1,2 +1,6 @@
 # Paquet YunoHost (dépôt séparé : ORGANISATION-KA-INTERNATIONALE/jwe_ynh)
 jwe_ynh/
+
+# Artefacts de debug Kimi CLI
+kimi-debug-session*.zip
+

app/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "jwe",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "jwe",
-      "version": "2.0.1",
+      "version": "2.0.2",
       "dependencies": {
         "mapillary-js": "^4.1.2",
         "maplibre-gl": "^5.1.0",

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jwe",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": true,
   "type": "module",
   "scripts": {

app/src/app.html

@@ -4,6 +4,11 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 		<meta name="theme-color" content="#0b3d2e" />
+		<script>
+			// Gate motion : les états cachés initiaux (data-reveal, masques) ne
+			// s'appliquent que si JS est actif — sans JS, tout reste visible.
+			document.documentElement.classList.add('js');
+		</script>
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
 		<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
 		%sveltekit.head%

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

@@ -125,6 +125,8 @@
 
 <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. */
@@ -133,13 +135,19 @@
 		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'
+		attribution = '© contributeurs OpenStreetMap / données publiques',
+		cascadeBase = null
 	}: Props = $props();
 
 	let survol = $state<Region | null>(null);
@@ -185,11 +193,14 @@
 			aria-hidden={selectionnable ? 'true' : undefined}
 			aria-label={selectionnable ? undefined : t().carte.carteRegionsLabel}
 		>
-			{#each INSETS as ins (ins.region)}
+			{#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}
 				>
 					{#each ins.chemins as d (d)}
 						<path {d} />

app/src/lib/components/GameMap.svelte

@@ -4,6 +4,7 @@
 	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';
 
@@ -50,6 +51,9 @@
 	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';
@@ -93,6 +97,13 @@
 		};
 	}
 
+	function annulerTraceLigne(): void {
+		if (rafLigne !== null) {
+			cancelAnimationFrame(rafLigne);
+			rafLigne = null;
+		}
+	}
+
 	function dessinerRevelation(): void {
 		if (!map || !ml || !real) return;
 		ensureSource(SRC_LIGNE);
@@ -118,38 +129,69 @@
 				paint: { 'text-color': '#0b3d2e', 'text-halo-color': '#fffdf8', 'text-halo-width': 2 }
 			});
 		}
-		const features: GeoJSON.Feature[] = [];
+		const positionReelle = real;
-		if (guess) {
+		/** Features de la ligne guess ↔ réel à la progression donnée (1 = complète). */
-			features.push(ligneFeature(guess, real, null));
+		function featuresLigne(progression: number): GeoJSON.Feature[] {
-			if (distanceKm !== null) {
+			if (!guess) return [];
-				// Étiquette de distance au milieu de la ligne guess ↔ réel
+			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 + real.lat) / 2, lon: (guess.lon + real.lon) / 2 },
+						{ 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) });
 		}
-		setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features });
 
 		// 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)]
 			);
-			map.fitBounds(bounds, { padding: 80, duration: reducedMotion ? 0 : 900, maxZoom: 12 });
+			// 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: [] });
@@ -165,6 +207,7 @@
 				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);
 					}
@@ -173,6 +216,17 @@
 				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;
@@ -224,11 +278,15 @@
 		if (!map || !ml) return;
 		for (const m of explorerMarkers) m.remove();
 		explorerMarkers = [];
-		for (const info of markers) {
+		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!);
@@ -307,6 +365,7 @@
 			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);
 			});
@@ -316,9 +375,16 @@
 				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;
 		};
@@ -380,33 +446,39 @@
 		position: relative;
 		width: 100%;
 		height: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 0.45rem;
 	}
 
 	.carte {
+		flex: 1;
+		min-height: 0;
 		width: 100%;
-		height: 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 {
-		position: absolute;
-		bottom: 0.75rem;
-		left: 50%;
-		transform: translateX(-50%);
 		display: flex;
-		gap: 0.4rem;
+		flex-wrap: nowrap;
-		flex-wrap: wrap;
+		gap: 0.3rem;
-		justify-content: center;
+		overflow-x: auto;
-		padding: 0 0.5rem;
+		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.35rem 0.8rem;
+		padding: 0.3rem 0.7rem;
 		font-size: 0.8rem;
 		font-weight: 650;
 		cursor: pointer;
@@ -417,6 +489,22 @@
 		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;
@@ -431,4 +519,61 @@
 	: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/PhotoPanel.svelte

@@ -59,5 +59,6 @@
 		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

@@ -1,6 +1,7 @@
 <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 {
@@ -17,7 +18,11 @@
 	<header class="score-bloc">
 		<p class="bravo">{result.score > 0 ? t().micro.bravo : t().micro.kiteSaYe}</p>
 		<p class="score">
-			<span class="valeur">{result.score}</span>
+			<!-- 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}

app/src/lib/components/Seo.svelte

@@ -0,0 +1,41 @@
+<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}`);
+</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}
+</svelte:head>

app/src/lib/i18n/fr.ts

@@ -56,8 +56,6 @@ const fr = {
 		}
 	},
 	resultat: {
-		bravo: 'Bravo !',
-		score: 'Score',
 		points: 'points',
 		distance: 'Distance',
 		km: 'km',
@@ -94,7 +92,6 @@ const fr = {
 		telecharger: 'Télécharger l’image',
 		taPosition: 'Ta position',
 		positionReelle: 'Position réelle',
-		manche: 'Manche',
 		titreSeed: 'Défi — seed',
 		copierLien: 'Copier le lien du défi',
 		lienCopie: 'Lien copié !'
@@ -115,8 +112,7 @@ const fr = {
 	},
 	micro: {
 		bravo: 'Bravo !',
-		kiteSaYe: 'Kité sa ye ?',
+		kiteSaYe: 'Kité sa ye ?'
-		pwenBlinde: 'Pwen blindé'
 	},
 	langue: {
 		fr: 'Français',

app/src/lib/i18n/gcf.ts

@@ -58,8 +58,6 @@ const gcf: Dict = {
 		}
 	},
 	resultat: {
-		bravo: 'Bravo !',
-		score: 'Pwen',
 		points: 'pwen',
 		distance: 'Distans',
 		km: 'km',
@@ -96,7 +94,6 @@ const gcf: Dict = {
 		telecharger: 'Téléchajé foto-a',
 		taPosition: 'Pozisyon ou',
 		positionReelle: 'Rèl pozisyon-an',
-		manche: 'Mannèk',
 		titreSeed: 'Défi — seed',
 		copierLien: 'Kopié lyen défi-a',
 		lienCopie: 'Lyen kopié !'
@@ -117,8 +114,7 @@ const gcf: Dict = {
 	},
 	micro: {
 		bravo: 'Bravo !',
-		kiteSaYe: 'Kité sa ye ?',
+		kiteSaYe: 'Kité sa ye ?'
-		pwenBlinde: 'Pwen blindé'
 	},
 	langue: {
 		fr: 'Français',

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/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/styles/jeu.css

@@ -0,0 +1,514 @@
+/* Styles partagés des écrans de jeu : /jeu/[mode] et /defi/[seed].
+   Layout « app » verrouillé au viewport (100dvh via +layout) : la page ne
+   scrolle jamais, seuls les panneaux internes défilent. Mobile-first. */
+
+.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(--oki-encre-doux);
+}
+
+/* — 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; /* ancre du panneau d'indices */
+	flex: 1 1 0;
+	min-height: 5rem;
+	max-height: 42dvh;
+}
+
+.panneau-carte {
+	position: relative; /* ancre de la puce de statut et de l'aide */
+	flex: 1 1 0;
+	min-height: calc(35dvh + 3.5rem);
+	display: flex;
+}
+
+.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;
+}
+
+.split.resultat .panneau-carte {
+	min-height: 10rem;
+}
+
+.resultat-scroll {
+	height: 100%;
+	overflow-y: auto;
+	background: var(--oki-blanc);
+	border-radius: var(--oki-radius);
+	box-shadow: var(--oki-ombre);
+	padding: 1rem;
+}
+
+/* — Puce de statut unique (manche, seed, minuteur) : haut-droite, une ligne.
+   Aucun élément absolu au-dessus des zones interactives : les badges sont
+   décoratifs, les clics les traversent. — */
+.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: rgba(255, 253, 248, 0.94);
+	color: var(--oki-vert);
+	border-radius: 999px;
+	padding: 0.25rem 0.8rem;
+	font-size: 0.82rem;
+	font-weight: 700;
+	white-space: nowrap;
+	box-shadow: var(--oki-ombre);
+}
+
+/* Seed visible mais discrète : les joueurs vérifient qu'ils jouent le même défi */
+.badge-seed {
+	background: rgba(255, 253, 248, 0.8);
+	color: var(--oki-encre-doux);
+	border-radius: 999px;
+	padding: 0.15rem 0.7rem;
+	font-size: 0.72rem;
+	font-weight: 600;
+	white-space: nowrap;
+	box-shadow: var(--oki-ombre);
+}
+
+.badge-timer {
+	display: flex;
+}
+
+/* — Indices : panneau scrollable interne, en surimpression de la photo
+   (zone non interactive) — jamais au-dessus de la carte. — */
+.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.4rem 0.6rem;
+	background: rgba(255, 253, 248, 0.96);
+	border-radius: var(--oki-radius-petit);
+	box-shadow: var(--oki-ombre);
+}
+
+.indice {
+	margin: 0.25rem 0;
+	background: var(--oki-bleu-doux);
+	border-left: 4px solid var(--oki-bleu);
+	border-radius: var(--oki-radius-petit);
+	padding: 0.5rem 0.8rem;
+	font-size: 0.95rem;
+}
+
+/* — Aide « poser le marqueur » : pastille décorative sur la carte, les clics
+   la traversent (pointer-events: none). Sur mobile elle flotte au bas du
+   canevas, juste au-dessus de la barre de sauts (~3,65rem) ; sur desktop elle
+   est décalée à droite pour ne pas chevaucher les sauts en overlay bas-gauche. — */
+.aide-carte {
+	position: absolute;
+	left: 50%;
+	bottom: 3.9rem; /* 48px de sauts + espacements, arrondi au-dessus */
+	transform: translateX(-50%);
+	z-index: 3;
+	margin: 0;
+	padding: 0.3rem 0.9rem;
+	max-width: calc(100% - 5rem);
+	background: rgba(255, 253, 248, 0.92);
+	color: var(--oki-encre-doux);
+	border-radius: 999px;
+	box-shadow: var(--oki-ombre);
+	font-size: 0.85rem;
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	pointer-events: none;
+}
+
+/* — Barre d'actions : en bas du flux (la page ne scrolle pas), opaque,
+   au-dessus de la carte grâce au z-index explicite. — */
+.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(--oki-blanc);
+	border-top: 1px solid var(--oki-sable-fonce);
+}
+
+.barre-actions .btn {
+	min-height: 48px; /* cible tactile */
+}
+
+.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 : tout doit tenir sur une ligne. */
+@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 / écrans très bas : on relâche les planchers pour éviter le rognage. */
+@media (max-height: 540px) {
+	.panneau-photo {
+		min-height: 3.5rem;
+		max-height: 34dvh;
+	}
+
+	.panneau-carte {
+		min-height: 11rem;
+	}
+}
+
+/* Desktop : split 50/50 qui remplit exactement la hauteur disponible. */
+@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; /* au-dessus de la rangée de sauts en overlay bas-gauche */
+		transform: none;
+	}
+
+	.barre-actions {
+		justify-content: center;
+		gap: 1.5rem;
+	}
+}
+
+/* — Écran bilan du défi : compact, scroll interne en dernier recours. — */
+.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(--oki-vert);
+}
+
+/* Filet drapeau du bilan : 3 segments francs aux couleurs OKI qui se
+   dessinent (scaleX) en cascade syncopée — sobre, pas de confettis. */
+.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(--oki-vert);
+}
+
+.filet-drapeau .seg-corail {
+	background: var(--oki-corail);
+}
+
+.filet-drapeau .seg-bleu {
+	background: var(--oki-bleu);
+}
+
+/* Seed rappelée sous le titre du bilan (page /defi/[seed]) */
+.seed-discret {
+	margin: 0;
+	text-align: center;
+	font-size: 0.9rem;
+	color: var(--oki-encre-doux);
+}
+
+.total {
+	margin: 0;
+	text-align: center;
+}
+
+.total .valeur {
+	font-size: 2.4rem;
+	font-weight: 800;
+	color: var(--oki-vert);
+}
+
+.total .unite {
+	margin-left: 0.4rem;
+	color: var(--oki-encre-doux);
+}
+
+/* Carte SVG du récap : hauteur plafonnée à 44dvh via la largeur
+   (viewBox 600×620 → hauteur ≈ largeur × 1,033). */
+.bilan-carte {
+	width: min(100%, 42.5dvh, 520px);
+	margin: 0 auto;
+}
+
+.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(--oki-blanc);
+	border-radius: var(--oki-radius-petit);
+	box-shadow: var(--oki-ombre);
+	padding: 0.5rem 0.9rem;
+}
+
+.r-nom {
+	font-weight: 700;
+	color: var(--oki-vert);
+}
+
+.r-region {
+	flex: 1;
+	color: var(--oki-encre-doux);
+	font-size: 0.9rem;
+}
+
+.r-score {
+	font-weight: 800;
+}
+
+.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(--oki-encre-doux);
+}
+
+.puce.joueur {
+	color: var(--oki-corail);
+}
+
+.puce.reelle {
+	color: var(--oki-vert);
+}
+
+/* Bilan desktop : deux colonnes (carte | récap) pour tenir sans scroll. */
+@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;
+	}
+}
+
+/* Hauteur limitée : resserre le bilan pour rester sans scroll dès 800px. */
+@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 (playbook §1.7) : transform/opacity uniquement, tout est sous
+   gate html.js + no-preference — contenu statique complet sans JS ni motion. — */
+@media (prefers-reduced-motion: no-preference) {
+	/* Moment révélation : la fiche résultat monte pendant que la carte prend
+	   l'emphase (léger zoom de reprise, --dur-mesure --ease-ka). */
+	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);
+	}
+
+	/* Pastilles de statut (manche, seed, minuteur) : apparition en pop. */
+	html.js .badge-manche,
+	html.js .badge-seed,
+	html.js .badge-timer {
+		animation: oki-pop var(--dur-mesure) var(--ease-ka) backwards;
+	}
+
+	/* Filet drapeau du bilan : segments qui se dessinent 0 / 120 / 300 ms. */
+	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);
+	}
+	to {
+		transform: scaleX(1);
+	}
+}

app/src/lib/styles/oki.css

@@ -25,6 +25,61 @@
 		'Segoe UI',
 		Roboto,
 		sans-serif;
+
+	/* Cadences gwoka (playbook §1.7) — lues aussi depuis le JS via
+	   getComputedStyle ($lib/motion/tokens.ts : dureeMs). */
+	--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 d'état */
+	--dur-phrase: 960ms; /* deux mesures — moments solennels (ligne de distance) */
+	--dur-compte: 800ms; /* count-up du score — entre mesure et phrase */
+}
+
+/* Lecture d'écran : valeur finale non animée qui double un compteur animé
+   (le span animé porte aria-hidden="true"). */
+.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;
+}
+
+/* Pop de marque (pastilles, marqueurs explorer) : scale 0.6 → 1.
+   Toujours appliqué sous gate html.js + no-preference chez l'appelant. */
+@keyframes oki-pop {
+	from {
+		transform: scale(0.6);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+/* États initiaux des reveals : uniquement si JS actif (classe `js` posée par
+   app.html) ET motion autorisée — sans JS ou en reduced-motion, tout le
+   contenu est visible (playbook §6). --d = délai syncopé posé dans le markup. */
+@media (prefers-reduced-motion: no-preference) {
+	html.js [data-reveal] {
+		opacity: 0;
+		transform: translateY(28px);
+		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);
+	}
 }
 
 * {
@@ -50,6 +105,9 @@ button {
 
 /* — Boutons — */
 .btn {
+	position: relative;
+	isolation: isolate; /* le balayage ::after reste sous le texte */
+	overflow: hidden;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -61,7 +119,11 @@ button {
 	font-weight: 650;
 	cursor: pointer;
 	text-decoration: none;
-	transition: background-color 0.15s ease;
+	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);
 }
 
 .btn:focus-visible,
@@ -78,8 +140,25 @@ a:focus-visible,
 	box-shadow: var(--oki-ombre);
 }
 
-.btn-primaire:hover {
+/* Balayage corail foncé qui glisse depuis la gauche (hover craft, pattern
+   .btn OKI adapté au DS corail/vert — transform only) */
+.btn-primaire::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	z-index: -1;
 	background: var(--oki-corail-fonce);
+	transform: scaleX(0);
+	transform-origin: left center;
+	transition: transform var(--dur-tanbou) var(--ease-syncope);
+}
+
+.btn-primaire:not(:disabled):hover {
+	transform: translateY(-2px);
+}
+
+.btn-primaire:not(:disabled):hover::after {
+	transform: scaleX(1);
 }
 
 .btn-primaire:disabled {

app/src/routes/+layout.svelte

@@ -32,7 +32,7 @@
 
 <style>
 	.app {
-		min-height: 100dvh;
+		height: 100dvh; /* layout « app » verrouillé : chaque écran gère son overflow interne */
 		display: flex;
 		flex-direction: column;
 	}
@@ -76,6 +76,7 @@
 
 	main {
 		flex: 1;
+		min-height: 0;
 		display: flex;
 		flex-direction: column;
 	}

app/src/routes/+page.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import CarteRegions from '$lib/components/CarteRegions.svelte';
+	import Seo from '$lib/components/Seo.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';
@@ -34,22 +37,23 @@
 	}
 </script>
 
-<svelte:head>
+<Seo title={t().app.sousTitre} description={t().app.sousTitre} path="/" />
-	<title>{t().app.titre} — {t().app.sousTitre}</title>
-	<meta name="description" content={t().app.sousTitre} />
-</svelte:head>
 
 <div class="accueil">
 	<section class="hero">
-		<h1>{t().app.titre}</h1>
+		<h1>
-		<p class="accroche">{t().micro.kiteSaYe}</p>
+			<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>
 		<p class="sous-titre">{t().app.sousTitre}</p>
 	</section>
 
-	<section aria-labelledby="titre-regions">
+	<section class="sec-regions" aria-labelledby="titre-regions">
 		<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
 		<div class="carte-accueil">
-			<CarteRegions bind:selection={region} />
+			<CarteRegions bind:selection={region} cascadeBase={5} />
 			<button
 				type="button"
 				class="btn btn-secondaire toutes"
@@ -62,15 +66,18 @@
 		</div>
 	</section>
 
-	<section aria-labelledby="titre-modes">
+	<section class="sec-modes" aria-labelledby="titre-modes">
 		<h2 id="titre-modes">{t().accueil.choixMode}</h2>
 		<div class="grille modes">
-			{#each modes as m (m.id)}
+			{#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>
@@ -78,7 +85,13 @@
 					<span class="desc">{t().modes[`${m.id}Desc`]}</span>
 				</button>
 			{/each}
-			<a href="/explorer" class="carte-mode explorer">
+			<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>
@@ -108,19 +121,57 @@
 
 <style>
 	.accueil {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto; /* scroll interne : l'en-tête reste visible */
 		width: 100%;
 		max-width: 860px;
 		margin: 0 auto;
-		padding: 1.25rem 1rem 7rem; /* espace pour le bouton fixe en zone pouce */
+		padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
 		display: flex;
 		flex-direction: column;
-		gap: 1.6rem;
+		gap: 1.4rem;
 	}
 
 	.hero {
 		text-align: center;
 	}
 
+	/* Reveal masqué du titre : la ligne glisse dans un masque overflow hidden.
+	   Actif uniquement sous html.js + no-preference : sans JS ou en
+	   reduced-motion, le titre est affiché statiquement. */
+	.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;
+		}
+
+		/* Contretemps gwoka : l'accroche suit le titre à 120 ms */
+		:global(html.js) .ligne-retard {
+			animation-delay: 120ms;
+		}
+	}
+
 	.hero h1 {
 		margin: 0;
 		font-size: 3rem;
@@ -196,6 +247,9 @@
 		align-items: center;
 		gap: 0.35rem;
 		padding: 1rem 0.8rem;
+		transition:
+			transform var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka);
 	}
 
 	.carte-mode .emoji {
@@ -212,7 +266,9 @@
 		color: var(--oki-encre-doux);
 	}
 
+	/* Hover craft : lift + liseré (transform/couleur uniquement) */
 	.carte-mode:hover {
+		transform: translateY(-3px);
 		border-color: var(--oki-vert-clair);
 	}
 
@@ -241,21 +297,16 @@
 		accent-color: var(--oki-vert);
 	}
 
-	/* Bouton « Jouer » : fixe en zone du pouce sur mobile */
+	/* Bouton « Jouer » : barre d'action normale en flux (plus de fixe à dégradé
+	   qui rendait le contenu sous-jacent visible mais non cliquable). */
 	.zone-pouce {
-		position: fixed;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
-		background: linear-gradient(transparent, var(--oki-sable) 35%);
 		display: flex;
 		justify-content: center;
-		z-index: 10;
 	}
 
 	.jouer {
 		width: min(420px, 100%);
+		min-height: 48px;
 		padding: 1rem;
 		font-size: 1.2rem;
 	}
@@ -265,4 +316,82 @@
 			font-size: 3.6rem;
 		}
 	}
+
+	/* Desktop : deux colonnes — identité + modes à gauche, carte des régions
+	   à droite. Tout tient dans le viewport sans scroll dès 900px de haut. */
+	@media (min-width: 1024px) {
+		.accueil {
+			max-width: 1120px;
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
+			column-gap: 2.5rem;
+			row-gap: 1.1rem;
+			align-content: start;
+		}
+
+		.hero {
+			grid-column: 1;
+			text-align: left;
+		}
+
+		.sec-regions {
+			grid-column: 2;
+			grid-row: 1 / span 5;
+			align-self: start;
+		}
+
+		.sec-modes,
+		.options,
+		.zone-pouce {
+			grid-column: 1;
+		}
+
+		.zone-pouce {
+			justify-content: flex-start;
+		}
+
+		/* Hauteur de la carte SVG plafonnée (viewBox 600×620 → hauteur ≈ largeur × 1,033) */
+		.carte-accueil {
+			max-width: min(560px, calc(clamp(240px, 42dvh, 560px) * 0.94));
+		}
+	}
+
+	/* Viewports bas : on resserre titres, espacements et cartes de mode pour
+	   que tout reste visible sans scroll (la colonne gauche est la plus haute). */
+	@media (min-width: 1024px) and (max-height: 999px) {
+		.accueil {
+			row-gap: 0.8rem;
+			padding-top: 0.8rem;
+		}
+
+		.hero h1 {
+			font-size: 2.6rem;
+		}
+
+		.accroche {
+			font-size: 1.05rem;
+		}
+
+		h2 {
+			margin-bottom: 0.4rem;
+		}
+
+		.carte-mode {
+			padding: 0.6rem 0.7rem;
+			gap: 0.2rem;
+		}
+
+		.carte-mode .emoji {
+			font-size: 1.3rem;
+		}
+
+		.carte-mode .desc {
+			font-size: 0.8rem;
+		}
+
+		.jouer {
+			padding: 0.7rem 1rem;
+			font-size: 1.05rem;
+		}
+	}
 </style>

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

@@ -1,11 +1,18 @@
 <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 type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
 
@@ -124,65 +131,6 @@
 		setTimeout(() => (lienCopie = false), 2500);
 	}
 
-	/** Génère une image canvas téléchargeable : score total + lieux déjà révélés (V3). */
-	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();
-	}
-
 	// (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 = '';
@@ -196,17 +144,23 @@
 	});
 </script>
 
-<svelte:head>
+<Seo
-	<title>{t().app.titre} — {t().modes.defi} — seed {seed}</title>
+	title="{t().modes.defi} — seed {seed}"
-</svelte:head>
+	description={t().modes.defiDesc}
+	path="/defi/{seed}"
+/>
 
 <div class="jeu">
 	{#if bilan}
-		<div class="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">{defi.total}</span>
+				<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">
@@ -214,7 +168,7 @@
 			</div>
 			<ol class="recap">
 				{#each defi.manches as m, i (m.place.id)}
-					<li>
+					<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>
@@ -239,14 +193,14 @@
 			</p>
 		</div>
 	{:else if erreur}
-		<div class="etat">
+		<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}>
+		<div class="split" class:resultat={!!result} in:monteeMesure>
 			<section class="panneau-photo">
 				{#if result}
 					<div class="resultat-scroll">
@@ -260,6 +214,13 @@
 				{: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">
@@ -270,14 +231,19 @@
 					interactive={!result}
 					onvalidate={() => void soumettre(false)}
 				/>
-				{#if !defiTermine}
+				<div class="statut">
-					<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
+					{#if !defiTermine}
-				{/if}
+						<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
-				<span class="badge-seed">{t().defi.titreSeed} {seed}</span>
+					{/if}
-				{#if timerActif && !result}
+					<span class="badge-seed">{t().defi.titreSeed} {seed}</span>
-					<div class="badge-timer">
+					{#if timerActif && !result}
-						<TimerRing bind:this={timerRef} actif={!result} />
+						<span class="badge-timer">
-					</div>
+							<TimerRing bind:this={timerRef} actif={!result} />
+						</span>
+					{/if}
+				</div>
+				{#if !result && !guess}
+					<p class="aide-carte">{t().jeu.poserMarqueur}</p>
 				{/if}
 			</section>
 		</div>
@@ -307,284 +273,9 @@
 					{t().jeu.valider}
 				</button>
 			</div>
-			{#if 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}
-			{#if !guess}
-				<p class="aide-carte">{t().jeu.poserMarqueur}</p>
-			{/if}
 		{/if}
 	{:else}
-		<div class="etat"><p>{t().jeu.charger}</p></div>
+		<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
 	{/if}
 </div>
 
-<style>
-	.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;
-		color: var(--oki-encre-doux);
-	}
-
-	.split {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.6rem;
-		padding: 0.6rem;
-		min-height: 0;
-	}
-
-	/* Mobile : photo 60 % haut, carte 40 % bas */
-	.panneau-photo {
-		flex: 0 0 58%;
-		min-height: 0;
-	}
-
-	.split.resultat .panneau-photo {
-		flex: 1 1 55%;
-		overflow-y: auto;
-	}
-
-	.panneau-carte {
-		position: relative;
-		flex: 1;
-		min-height: 220px;
-	}
-
-	.resultat-scroll {
-		height: 100%;
-		overflow-y: auto;
-		background: var(--oki-blanc);
-		border-radius: var(--oki-radius);
-		box-shadow: var(--oki-ombre);
-		padding: 1rem;
-	}
-
-	.badge-manche {
-		position: absolute;
-		top: 0.6rem;
-		right: 0.6rem;
-		background: rgba(255, 253, 248, 0.94);
-		color: var(--oki-vert);
-		border-radius: 999px;
-		padding: 0.25rem 0.8rem;
-		font-size: 0.82rem;
-		font-weight: 700;
-		box-shadow: var(--oki-ombre);
-	}
-
-	/* Seed visible mais discrète : les joueurs vérifient qu'ils jouent le même défi */
-	.badge-seed {
-		position: absolute;
-		top: 2.7rem;
-		right: 0.6rem;
-		background: rgba(255, 253, 248, 0.8);
-		color: var(--oki-encre-doux);
-		border-radius: 999px;
-		padding: 0.15rem 0.7rem;
-		font-size: 0.72rem;
-		font-weight: 600;
-		box-shadow: var(--oki-ombre);
-	}
-
-	.badge-timer {
-		position: absolute;
-		top: 0.6rem;
-		left: 3.4rem; /* à droite des boutons zoom */
-	}
-
-	/* Barre d'actions : fixe en zone du pouce (tiers inférieur) */
-	.barre-actions {
-		position: sticky;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.6rem;
-		padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
-		background: var(--oki-blanc);
-		border-top: 1px solid var(--oki-sable-fonce);
-	}
-
-	.actions-secondaires {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.actions-secondaires .btn {
-		padding: 0.7rem 1rem;
-		font-size: 0.92rem;
-	}
-
-	.penalite {
-		font-size: 0.75rem;
-		font-weight: 500;
-		opacity: 0.8;
-	}
-
-	.valider {
-		flex: 0 0 auto;
-		padding: 0.9rem 1.4rem;
-	}
-
-	.indices {
-		padding: 0 1rem 0.5rem;
-	}
-
-	.indice {
-		margin: 0.25rem 0;
-		background: var(--oki-bleu-doux);
-		border-left: 4px solid var(--oki-bleu);
-		border-radius: var(--oki-radius-petit);
-		padding: 0.5rem 0.8rem;
-		font-size: 0.95rem;
-	}
-
-	.aide-carte {
-		margin: 0;
-		padding: 0 1rem 0.6rem;
-		text-align: center;
-		font-size: 0.88rem;
-		color: var(--oki-encre-doux);
-	}
-
-	/* Desktop : 50/50 */
-	@media (min-width: 768px) {
-		.split {
-			flex-direction: row;
-		}
-
-		.panneau-photo,
-		.split.resultat .panneau-photo {
-			flex: 1 1 50%;
-		}
-
-		.panneau-carte {
-			flex: 1 1 50%;
-		}
-
-		.barre-actions {
-			justify-content: center;
-			gap: 1.5rem;
-		}
-	}
-
-	/* — Écran bilan du défi — */
-	.bilan {
-		flex: 1;
-		width: 100%;
-		max-width: 860px;
-		margin: 0 auto;
-		padding: 1.2rem 1rem 2rem;
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.bilan h1 {
-		margin: 0;
-		text-align: center;
-		color: var(--oki-vert);
-	}
-
-	.seed-discret {
-		margin: 0;
-		text-align: center;
-		font-size: 0.9rem;
-		color: var(--oki-encre-doux);
-	}
-
-	.total {
-		margin: 0;
-		text-align: center;
-	}
-
-	.total .valeur {
-		font-size: 2.8rem;
-		font-weight: 800;
-		color: var(--oki-vert);
-	}
-
-	.total .unite {
-		margin-left: 0.4rem;
-		color: var(--oki-encre-doux);
-	}
-
-	.bilan-carte {
-		width: 100%;
-		max-width: 520px;
-		margin: 0 auto;
-	}
-
-	.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(--oki-blanc);
-		border-radius: var(--oki-radius-petit);
-		box-shadow: var(--oki-ombre);
-		padding: 0.55rem 0.9rem;
-	}
-
-	.r-nom {
-		font-weight: 700;
-		color: var(--oki-vert);
-	}
-
-	.r-region {
-		flex: 1;
-		color: var(--oki-encre-doux);
-		font-size: 0.9rem;
-	}
-
-	.r-score {
-		font-weight: 800;
-	}
-
-	.bilan-actions {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		gap: 0.7rem;
-	}
-
-	.legende {
-		margin: 0;
-		text-align: center;
-		font-size: 0.85rem;
-		color: var(--oki-encre-doux);
-	}
-
-	.puce.joueur {
-		color: var(--oki-corail);
-	}
-
-	.puce.reelle {
-		color: var(--oki-vert);
-	}
-</style>

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

@@ -2,6 +2,7 @@
 	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';
@@ -44,9 +45,7 @@
 	});
 </script>
 
-<svelte:head>
+<Seo title={t().explorer.titre} description={t().modes.explorerDesc} path="/explorer" />
-	<title>{t().app.titre} — {t().explorer.titre}</title>
-</svelte:head>
 
 <div class="explorer">
 	<div class="filtres" role="group" aria-label={t().explorer.filtrer}>
@@ -121,6 +120,7 @@
 		flex-direction: column;
 		position: relative;
 		min-height: 0;
+		overflow: hidden; /* la partie repliée du sheet ne doit pas agrandir la page */
 	}
 
 	.filtres {
@@ -152,7 +152,8 @@
 	.carte-explorer {
 		flex: 1;
 		min-height: 0;
-		padding: 0.6rem;
+		padding: 0.6rem 0.6rem 3.6rem; /* réserve la bande de la poignée du sheet :
+		   la fiche repliée ne recouvre jamais la carte, les sauts ni l'attribution */
 	}
 
 	.erreur {
@@ -160,7 +161,8 @@
 		color: var(--oki-encre-doux);
 	}
 
-	/* Bottom sheet mobile */
+	/* Bottom sheet mobile : overlay dont les événements sont scopés à lui-même.
+	   Glisse --dur-mesure --ease-ka (cadence gwoka), coupée en reduced-motion. */
 	.fiche {
 		position: absolute;
 		left: 0;
@@ -173,7 +175,7 @@
 		box-shadow: 0 -4px 18px rgba(11, 61, 46, 0.2);
 		padding: 1rem;
 		transform: translateY(calc(100% - 3.2rem));
-		transition: transform 0.25s ease;
+		transition: transform var(--dur-mesure) var(--ease-ka);
 	}
 
 	.fiche.ouvert {
@@ -237,21 +239,32 @@
 		font-size: 0.92rem;
 	}
 
-	/* Panneau latéral desktop */
+	/* Desktop : panneau latéral droit EN FLUX (grille) — plus aucune bande
+	   verticale par-dessus la carte, toute la carte reste cliquable. */
 	@media (min-width: 768px) {
-		.fiche {
+		.explorer {
-			left: auto;
+			display: grid;
-			top: 0;
+			grid-template-columns: minmax(0, 1fr) 360px;
-			right: 0;
+			grid-template-rows: auto minmax(0, 1fr);
-			bottom: 0;
-			width: 380px;
-			max-height: none;
-			border-radius: var(--oki-radius) 0 0 var(--oki-radius);
-			transform: translateX(calc(100% - 3.2rem));
 		}
 
-		.fiche.ouvert {
+		.filtres {
-			transform: translateX(0);
+			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-left: 1px solid var(--oki-sable-fonce);
+			box-shadow: none;
 		}
 	}
 

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

@@ -1,13 +1,20 @@
 <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 type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
 
@@ -128,65 +135,6 @@
 		void chargerRound();
 	}
 
-	/** Génère une image canvas téléchargeable : score total + régions jouées. */
-	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();
-	}
-
 	onMount(() => {
 		// Nouveau défi : on repart de zéro quand on arrive sur la première manche.
 		if (estDefi && defi.termine) defi.reinitialiser();
@@ -194,16 +142,22 @@
 	});
 </script>
 
-<svelte:head>
+<Seo
-	<title>{t().app.titre} — {t().modes[mode]}</title>
+	title={t().modes[mode]}
-</svelte:head>
+	description={t().modes[`${mode}Desc`]}
+	path="/jeu/{mode}"
+/>
 
 <div class="jeu">
 	{#if bilan}
-		<div class="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">{defi.total}</span>
+				<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">
@@ -211,7 +165,7 @@
 			</div>
 			<ol class="recap">
 				{#each defi.manches as m, i (m.place.id)}
-					<li>
+					<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>
@@ -233,16 +187,16 @@
 			</p>
 		</div>
 	{:else if chargement}
-		<div class="etat"><p>{t().jeu.charger}</p></div>
+		<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
 	{:else if erreur}
-		<div class="etat">
+		<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}>
+		<div class="split" class:resultat={!!result} in:monteeMesure>
 			<section class="panneau-photo">
 				{#if result}
 					<div class="resultat-scroll">
@@ -258,6 +212,13 @@
 				{: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">
@@ -268,13 +229,18 @@
 					interactive={!result}
 					onvalidate={() => void soumettre(false)}
 				/>
-				{#if estDefi && !defiTermine}
+				<div class="statut">
-					<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
+					{#if estDefi && !defiTermine}
-				{/if}
+						<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
-				{#if timerActif && !result}
+					{/if}
-					<div class="badge-timer">
+					{#if timerActif && !result}
-						<TimerRing bind:this={timerRef} actif={!result} />
+						<span class="badge-timer">
-					</div>
+							<TimerRing bind:this={timerRef} actif={!result} />
+						</span>
+					{/if}
+				</div>
+				{#if !result && !guess}
+					<p class="aide-carte">{t().jeu.poserMarqueur}</p>
 				{/if}
 			</section>
 		</div>
@@ -304,261 +270,7 @@
 					{t().jeu.valider}
 				</button>
 			</div>
-			{#if 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}
-			{#if !guess}
-				<p class="aide-carte">{t().jeu.poserMarqueur}</p>
-			{/if}
 		{/if}
 	{/if}
 </div>
 
-<style>
-	.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;
-		color: var(--oki-encre-doux);
-	}
-
-	.split {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.6rem;
-		padding: 0.6rem;
-		min-height: 0;
-	}
-
-	/* Mobile : photo 60 % haut, carte 40 % bas */
-	.panneau-photo {
-		flex: 0 0 58%;
-		min-height: 0;
-	}
-
-	.split.resultat .panneau-photo {
-		flex: 1 1 55%;
-		overflow-y: auto;
-	}
-
-	.panneau-carte {
-		position: relative;
-		flex: 1;
-		min-height: 220px;
-	}
-
-	.resultat-scroll {
-		height: 100%;
-		overflow-y: auto;
-		background: var(--oki-blanc);
-		border-radius: var(--oki-radius);
-		box-shadow: var(--oki-ombre);
-		padding: 1rem;
-	}
-
-	.badge-manche {
-		position: absolute;
-		top: 0.6rem;
-		right: 0.6rem;
-		background: rgba(255, 253, 248, 0.94);
-		color: var(--oki-vert);
-		border-radius: 999px;
-		padding: 0.25rem 0.8rem;
-		font-size: 0.82rem;
-		font-weight: 700;
-		box-shadow: var(--oki-ombre);
-	}
-
-	.badge-timer {
-		position: absolute;
-		top: 0.6rem;
-		left: 3.4rem; /* à droite des boutons zoom */
-	}
-
-	/* Barre d'actions : fixe en zone du pouce (tiers inférieur) */
-	.barre-actions {
-		position: sticky;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.6rem;
-		padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
-		background: var(--oki-blanc);
-		border-top: 1px solid var(--oki-sable-fonce);
-	}
-
-	.actions-secondaires {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.actions-secondaires .btn {
-		padding: 0.7rem 1rem;
-		font-size: 0.92rem;
-	}
-
-	.penalite {
-		font-size: 0.75rem;
-		font-weight: 500;
-		opacity: 0.8;
-	}
-
-	.valider {
-		flex: 0 0 auto;
-		padding: 0.9rem 1.4rem;
-	}
-
-	.indices {
-		padding: 0 1rem 0.5rem;
-	}
-
-	.indice {
-		margin: 0.25rem 0;
-		background: var(--oki-bleu-doux);
-		border-left: 4px solid var(--oki-bleu);
-		border-radius: var(--oki-radius-petit);
-		padding: 0.5rem 0.8rem;
-		font-size: 0.95rem;
-	}
-
-	.aide-carte {
-		margin: 0;
-		padding: 0 1rem 0.6rem;
-		text-align: center;
-		font-size: 0.88rem;
-		color: var(--oki-encre-doux);
-	}
-
-	/* Desktop : 50/50 */
-	@media (min-width: 768px) {
-		.split {
-			flex-direction: row;
-		}
-
-		.panneau-photo,
-		.split.resultat .panneau-photo {
-			flex: 1 1 50%;
-		}
-
-		.panneau-carte {
-			flex: 1 1 50%;
-		}
-
-		.barre-actions {
-			justify-content: center;
-			gap: 1.5rem;
-		}
-	}
-
-	/* — Écran bilan du défi — */
-	.bilan {
-		flex: 1;
-		width: 100%;
-		max-width: 860px;
-		margin: 0 auto;
-		padding: 1.2rem 1rem 2rem;
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.bilan h1 {
-		margin: 0;
-		text-align: center;
-		color: var(--oki-vert);
-	}
-
-	.total {
-		margin: 0;
-		text-align: center;
-	}
-
-	.total .valeur {
-		font-size: 2.8rem;
-		font-weight: 800;
-		color: var(--oki-vert);
-	}
-
-	.total .unite {
-		margin-left: 0.4rem;
-		color: var(--oki-encre-doux);
-	}
-
-	.bilan-carte {
-		width: 100%;
-		max-width: 520px;
-		margin: 0 auto;
-	}
-
-	.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(--oki-blanc);
-		border-radius: var(--oki-radius-petit);
-		box-shadow: var(--oki-ombre);
-		padding: 0.55rem 0.9rem;
-	}
-
-	.r-nom {
-		font-weight: 700;
-		color: var(--oki-vert);
-	}
-
-	.r-region {
-		flex: 1;
-		color: var(--oki-encre-doux);
-		font-size: 0.9rem;
-	}
-
-	.r-score {
-		font-weight: 800;
-	}
-
-	.bilan-actions {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		gap: 0.7rem;
-	}
-
-	.legende {
-		margin: 0;
-		text-align: center;
-		font-size: 0.85rem;
-		color: var(--oki-encre-doux);
-	}
-
-	.puce.joueur {
-		color: var(--oki-corail);
-	}
-
-	.puce.reelle {
-		color: var(--oki-vert);
-	}
-</style>

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>