feat: migre le site vers SvelteKit (Svelte 5, statique, zéro tiers)

- Rebuild complet SvelteKit 2 + Svelte 5 runes + TypeScript, adapter-static
- Images self-hébergées optimisées au build (vite-imagetools), fonts Archivo/Inter
  en woff2 local — BunnyCDN et Google Fonts supprimés (corrige les 403 d'images)
- Tokens charte OKI, thème sombre par défaut / clair opt-in, zéro emoji (set SVG)
- Motion : KineticText (stagger syncopé gwoka), ScrollProgressBar, View Transitions
- Village SVG isométrique pour les services hébergés + fallback accessible
- PWA (manifest + SW hors-ligne), 404 en KA, CSP nettoyée (.htaccess + _headers)
- Lighthouse mobile : 91/100/100/100 — JS initial 67 Ko gzip

src/lib/components/sections/Mission.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import KineticText from '$lib/components/motion/KineticText.svelte';
+	import type { Bundle, Locale } from '$lib/i18n';
+	import { pictoFor } from './pictos';
+
+	let { t }: { t: Bundle; locale?: Locale } = $props();
+</script>
+
+<section id="mission" class="section">
+	<div class="container">
+		<h2 class="section-title">
+			<KineticText as="span" text={t.mission.section_title} />{' '}
+			<span class="accent-text"
+				><KineticText as="span" text={t.mission.section_title_accent} /></span
+			>
+		</h2>
+		<p class="mission-text">{t.mission.paragraph_main}</p>
+		<p class="mission-text mission-text--secondary">{t.mission.paragraph_secondary}</p>
+
+		<div class="values-grid">
+			{#each t.values as value (value.title)}
+				<div class="value-card">
+					<div class="value-icon">
+						<svg class="icon" aria-hidden="true"
+							><use href="/icons.svg#{pictoFor(value.icon)}" /></svg
+						>
+					</div>
+					<h3>{value.title}</h3>
+					<p>{value.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>
+
+<style>
+	section {
+		background: var(--noir-profond);
+		text-align: center;
+	}
+
+	.accent-text {
+		color: var(--or-oki);
+	}
+
+	.mission-text {
+		font-size: 1.2rem;
+		max-width: 800px;
+		margin: 0 auto 3rem;
+		line-height: 1.8;
+	}
+
+	.mission-text--secondary {
+		font-size: 1.1rem;
+	}
+
+	.values-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+		gap: 1.5rem;
+		margin-top: 3rem;
+		max-width: 1000px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.value-card {
+		background: var(--card-bg);
+		border: var(--border-card);
+		border-top: 3px solid var(--or-oki);
+		border-radius: var(--radius-md);
+		padding: 2rem;
+		transition:
+			transform var(--dur-tanbou) var(--ease-ka),
+			border-color var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.value-card:hover {
+		transform: translateY(-4px);
+		border-top-color: var(--vert-oki);
+	}
+
+	.value-icon {
+		color: var(--or-oki);
+		margin-bottom: 1rem;
+	}
+
+	.value-icon .icon {
+		width: 2rem;
+		height: 2rem;
+	}
+
+	.value-card h3 {
+		color: var(--or-oki);
+		margin-bottom: 0.5rem;
+		font-size: 1.2rem;
+	}
+</style>