app: refonte JWE v2 - SvelteKit 2 + Svelte 5 + MapLibre, 4 modes de jeu, API anti-triche, ecran Cas B 'Pwen blinde', i18n FR/GCF, PWA

2026-07-16 21:05:22 -04:00
parent ee85a10e20
commit 923fa2869f
38 changed files with 8570 additions and 0 deletions
@@ -0,0 +1,118 @@
+/* Tokens OKI — doctrine « calm technology » : couleurs ancrées dans le territoire,
+   un seul accent fort (corail) réservé à l'action primaire (Von Restorff). */
+:root {
+	--oki-vert: #0b3d2e; /* vert profond — couleur principale de la marque */
+	--oki-vert-clair: #17624a;
+	--oki-vert-doux: #e3efe7;
+	--oki-sable: #f5efe2; /* fonds */
+	--oki-sable-fonce: #e7dcc4;
+	--oki-bleu: #175e70; /* bleu caraïbe profond */
+	--oki-bleu-doux: #d9ecef;
+	--oki-corail: #e4572e; /* accent — action primaire UNIQUEMENT */
+	--oki-corail-fonce: #c4441f;
+	--oki-encre: #22302a;
+	--oki-encre-doux: #5a6b62;
+	--oki-blanc: #fffdf8;
+	--oki-lacune-fond: #fdf3e3; /* panneau Cas B « Pwen blindé » — teinte distincte */
+	--oki-lacune-bord: #d9a441;
+
+	--oki-radius: 14px;
+	--oki-radius-petit: 9px;
+	--oki-ombre: 0 2px 10px rgba(11, 61, 46, 0.14);
+	--oki-font:
+		system-ui,
+		-apple-system,
+		'Segoe UI',
+		Roboto,
+		sans-serif;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: var(--oki-font);
+	color: var(--oki-encre);
+	background: var(--oki-sable);
+	line-height: 1.5;
+}
+
+button {
+	font-family: inherit;
+}
+
+/* — Boutons — */
+.btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	border: none;
+	border-radius: var(--oki-radius-petit);
+	padding: 0.85rem 1.6rem;
+	font-size: 1.05rem;
+	font-weight: 650;
+	cursor: pointer;
+	text-decoration: none;
+	transition: background-color 0.15s ease;
+}
+
+.btn:focus-visible,
+a:focus-visible,
+[tabindex]:focus-visible {
+	outline: 3px solid var(--oki-bleu);
+	outline-offset: 2px;
+}
+
+/* Action primaire : le seul élément fortement coloré de l'écran */
+.btn-primaire {
+	background: var(--oki-corail);
+	color: #fff;
+	box-shadow: var(--oki-ombre);
+}
+
+.btn-primaire:hover {
+	background: var(--oki-corail-fonce);
+}
+
+.btn-primaire:disabled {
+	background: var(--oki-sable-fonce);
+	color: var(--oki-encre-doux);
+	cursor: not-allowed;
+	box-shadow: none;
+}
+
+.btn-secondaire {
+	background: var(--oki-vert-doux);
+	color: var(--oki-vert);
+}
+
+.btn-secondaire:hover {
+	background: #d2e5d9;
+}
+
+.btn-tertiaire {
+	background: transparent;
+	color: var(--oki-vert-clair);
+	border: 1.5px solid var(--oki-vert-clair);
+}
+
+.btn-tertiaire:hover {
+	background: var(--oki-vert-doux);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		transition-duration: 0.01ms !important;
+		animation-duration: 0.01ms !important;
+	}
+}