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

app/src/lib/components/CarteRegions.svelte

@@ -202,6 +202,14 @@
 					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}
@@ -267,39 +275,108 @@
 		height: auto;
 	}
 
-	/* — Régions : tokens OKI — */
+	/* — 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: var(--card-bg);
+		fill: #22382d;
-		stroke: var(--line);
+		stroke: #00d66c;
-		stroke-width: 1;
+		stroke-width: 1.2;
-		transition: fill var(--dur-tanbou) var(--ease-ka), stroke var(--dur-tanbou) var(--ease-ka);
+		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: var(--card-bg-hover);
+		fill: #2f4d3e;
+		stroke: var(--or-oki);
+		stroke-width: 1.6;
+	}
+
+	:global(html.light-theme) .region.survolee path {
+		fill: #c3dfcd;
 		stroke: var(--or-oki);
 	}
 
-	.region.choisie path {
+	/* Sélection */
-		fill: rgba(253, 184, 19, 0.18);
+	.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);
-		stroke-width: 1.5;
 	}
 
 	.nom-region {
 		fill: var(--blanc-creme);
 		font-size: 15px;
-		font-weight: 700;
+		font-weight: 800;
 		font-family: var(--font-display);
 		text-anchor: middle;
-		letter-spacing: 0.02em;
+		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);
@@ -338,7 +415,7 @@
 		padding: 0;
 		border: none;
 		background: transparent;
-		border-radius: var(--oki-radius);
+		border-radius: var(--radius-md);
 		cursor: pointer;
 	}
 

app/src/routes/+page.svelte

@@ -41,33 +41,20 @@
 <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>
-		<p class="sous-titre">{t().app.sousTitre}</p>
-	</section>
-
-	<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>
+			<p class="sous-titre">{t().app.sousTitre}</p>
 		</section>
 
 		<section class="sec-modes" aria-labelledby="titre-modes">
@@ -108,8 +95,8 @@
 			{/if}
 		</section>
 
-	<section class="options" aria-labelledby="titre-options">
+		<div class="actions-bloc">
-		<h2 id="titre-options">{t().accueil.options}</h2>
+			<section class="options" aria-label={t().accueil.options}>
 				<label class="option-timer">
 					<input type="checkbox" bind:checked={timer} />
 					<span>{t().accueil.timer}</span>
@@ -121,9 +108,29 @@
 					{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={4} />
+		<FlagBar hauteur={3} />
 		<div class="footer-contenu">
 			<p class="mention-oki">{t().footer.texteFederation}</p>
 			<div class="liens-footer">
@@ -145,10 +152,21 @@
 		width: 100%;
 		max-width: 860px;
 		margin: 0 auto;
-		padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
+		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;
-		gap: 1.4rem;
 	}
 
 	.hero {
@@ -159,7 +177,15 @@
 	}
 
 	.flag-chip-hero {
-		margin-bottom: 0.4rem;
+		margin-bottom: 0.2rem;
+	}
+
+	.titres-hero {
+		display: flex;
+		align-items: baseline;
+		justify-content: center;
+		gap: 0.8rem;
+		flex-wrap: wrap;
 	}
 
 	.masque {
@@ -195,73 +221,84 @@
 
 	.hero h1 {
 		margin: 0;
-		font-size: 3.2rem;
+		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.2rem 0 0;
+		margin: 0;
-		font-size: 1.25rem;
+		font-size: 1.15rem;
 		font-weight: 700;
 		color: var(--or-oki);
 		font-style: italic;
 	}
 
 	.sous-titre {
-		margin: 0.4rem 0 0;
+		margin: 0.3rem 0 0;
 		color: var(--muted);
-		font-size: 0.95rem;
+		font-size: 0.9rem;
 		max-width: 520px;
 	}
 
 	h2 {
-		font-size: 1.05rem;
+		font-size: 0.95rem;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
 		color: var(--blanc-creme);
-		margin: 0 0 0.6rem;
+		margin: 0 0 0.5rem;
 		border-left: 3px solid var(--or-oki);
 		padding-left: 0.5rem;
 	}
 
 	.grille {
 		display: grid;
-		gap: 0.7rem;
+		gap: 0.5rem;
 	}
 
 	.modes {
-		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 	}
 
 	.carte-accueil {
-		max-width: 560px;
+		width: 100%;
+		max-width: 500px;
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 0.6rem;
+		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.8rem auto 0;
+		margin: 0.5rem auto 0;
+		padding: 0.45rem 0.9rem;
+		font-size: 0.85rem;
 	}
 
 	.carte-mode {
 		border: 1px solid var(--line);
-		border-left: 4px solid var(--line);
+		border-left: 3px solid var(--line);
 		border-radius: var(--radius-sm);
 		background: var(--noir-profond);
 		box-shadow: var(--oki-ombre);
@@ -272,8 +309,9 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 0.35rem;
+		justify-content: center;
-		padding: 1.1rem 0.9rem;
+		gap: 0.2rem;
+		padding: 0.65rem 0.6rem;
 		transition:
 			transform var(--dur-tanbou) var(--ease-ka),
 			border-color var(--dur-tanbou) var(--ease-ka),
@@ -281,24 +319,26 @@
 	}
 
 	.carte-mode .emoji {
-		font-size: 1.6rem;
+		font-size: 1.35rem;
 	}
 
 	.carte-mode .nom {
 		font-weight: 750;
 		font-family: var(--font-display);
 		text-transform: uppercase;
-		font-size: 0.95rem;
+		font-size: 0.85rem;
 		color: var(--blanc-creme);
+		letter-spacing: 0.02em;
 	}
 
 	.carte-mode .desc {
-		font-size: 0.82rem;
+		font-size: 0.72rem;
 		color: var(--muted);
+		line-height: 1.25;
 	}
 
 	.carte-mode:hover {
-		transform: translateY(-3px);
+		transform: translateY(-2px);
 		border-color: var(--or-oki);
 		border-left-color: var(--or-oki);
 		background: var(--card-bg-hover);
@@ -314,160 +354,192 @@
 		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;
-		flex-direction: column;
+		align-items: center;
-		gap: 0.4rem;
 	}
 
 	.option-timer {
 		display: flex;
 		align-items: center;
-		gap: 0.6rem;
+		gap: 0.5rem;
-		font-size: 0.95rem;
+		font-size: 0.9rem;
 		color: var(--blanc-creme);
 		cursor: pointer;
+		font-weight: 600;
 	}
 
 	.option-timer input {
-		width: 1.2rem;
+		width: 1.15rem;
-		height: 1.2rem;
+		height: 1.15rem;
 		accent-color: var(--or-oki);
 	}
 
 	.zone-pouce {
 		display: flex;
-		justify-content: center;
+		flex: 1;
-		padding: 0.5rem 0;
+		min-width: 180px;
+		justify-content: flex-end;
 	}
 
 	.jouer {
-		width: min(420px, 100%);
+		width: 100%;
-		min-height: 48px;
+		max-width: 320px;
-		padding: 1rem;
+		min-height: 44px;
-		font-size: 1.15rem;
+		padding: 0.75rem 1.4rem;
+		font-size: 1.1rem;
+		letter-spacing: 0.04em;
 	}
 
 	.accueil-footer {
-		margin-top: 1.5rem;
+		margin-top: auto;
 		display: flex;
 		flex-direction: column;
-		gap: 0.8rem;
+		gap: 0.5rem;
+		padding-top: 0.4rem;
 	}
 
 	.footer-contenu {
 		display: flex;
-		flex-direction: column;
 		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
 		gap: 0.4rem;
-		text-align: center;
+		font-size: 0.75rem;
-		padding: 0.5rem 0;
 	}
 
 	.mention-oki {
 		margin: 0;
-		font-size: 0.8rem;
 		color: var(--muted);
 	}
 
 	.liens-footer {
 		display: flex;
 		align-items: center;
-		gap: 0.6rem;
+		gap: 0.5rem;
-		font-size: 0.8rem;
 		color: var(--muted);
 	}
 
 	.liens-footer a {
 		color: var(--or-oki);
 		text-decoration: none;
+		font-weight: 600;
 	}
 
 	.liens-footer a:hover {
 		text-decoration: underline;
 	}
 
-	@media (min-width: 768px) {
+	/* — Desktop Single-Screen Layout (Sans Scroll) — */
-		.hero h1 {
-			font-size: 3.6rem;
-		}
-	}
-
 	@media (min-width: 1024px) {
 		.accueil {
-			max-width: 1120px;
+			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, 1fr) minmax(0, 1.05fr);
+			grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
-			column-gap: 2.5rem;
+			grid-template-rows: minmax(0, 1fr) auto;
-			row-gap: 1.1rem;
+			column-gap: 2.2rem;
-			align-content: start;
+			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 {
-			grid-column: 1;
 			text-align: left;
 			align-items: flex-start;
 		}
 
-		.sec-regions {
+		.titres-hero {
-			grid-column: 2;
+			justify-content: flex-start;
-			grid-row: 1 / span 5;
+			gap: 0.7rem;
-			align-self: start;
 		}
 
-		.sec-modes,
+		.hero h1 {
-		.options,
+			font-size: 2.7rem;
-		.zone-pouce {
+		}
-			grid-column: 1;
+
+		.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;
-		.zone-pouce {
+			padding-top: 0.15rem;
-			justify-content: flex-start;
-		}
-
-		.carte-accueil {
-			max-width: min(560px, calc(clamp(240px, 42dvh, 560px) * 0.94));
 		}
 	}
 
-	@media (min-width: 1024px) and (max-height: 999px) {
+	/* Fallback pour petits écrans desktop / hauteurs réduites */
+	@media (min-width: 1024px) and (max-height: 640px) {
 		.accueil {
-			row-gap: 0.8rem;
+			overflow-y: auto;
-			padding-top: 0.8rem;
-		}
-
-		.hero h1 {
-			font-size: 2.6rem;
-		}
-
-		.accroche {
-			font-size: 1.05rem;
-		}
-
-		h2 {
-			margin-bottom: 0.4rem;
-		}
-
-		.carte-mode {
-			padding: 0.7rem 0.8rem;
-			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>