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/Engagement.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="engagement" class="section">
+	<div class="container">
+		<h2 class="section-title">
+			<KineticText as="span" text={t.engagement.section_title} />{' '}
+			<span class="accent-text"
+				><KineticText as="span" text={t.engagement.section_title_accent} /></span
+			>
+		</h2>
+		<p class="section-subtitle">{t.engagement.section_subtitle}</p>
+
+		<div class="engagement-options">
+			{#each t.engagement.cards as card (card.title)}
+				<div class="engagement-card">
+					<div class="engagement-icon">
+						<svg class="icon" aria-hidden="true"
+							><use href="/icons.svg#{pictoFor(card.icon)}" /></svg
+						>
+					</div>
+					<h3>{card.title}</h3>
+					<p>{card.text}</p>
+					<a href="#contact" class="btn btn-solid">{card.cta}</a>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>
+
+<style>
+	.section-title {
+		text-align: center;
+	}
+
+	.accent-text {
+		color: var(--or-oki);
+	}
+
+	.section-subtitle {
+		text-align: center;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.engagement-options {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.5rem;
+		margin: 3rem 0;
+	}
+
+	.engagement-card {
+		background: var(--card-bg);
+		border: var(--border-card);
+		border-top: 4px solid var(--or-oki);
+		border-radius: var(--radius-md);
+		padding: 2.5rem;
+		text-align: center;
+		transition: transform var(--dur-tanbou) var(--ease-ka);
+	}
+
+	.engagement-card:hover {
+		transform: translateY(-4px);
+	}
+
+	.engagement-icon {
+		color: var(--or-oki);
+		margin-bottom: 1rem;
+	}
+
+	.engagement-icon .icon {
+		width: 2.25rem;
+		height: 2.25rem;
+	}
+
+	.engagement-card h3 {
+		color: var(--or-oki);
+		margin-bottom: 1rem;
+		font-size: 1.35rem;
+	}
+
+	.engagement-card p {
+		margin-bottom: 1.5rem;
+		line-height: 1.6;
+	}
+
+	@media (max-width: 768px) {
+		.engagement-options {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>