feat: passe expérience — motion system niveau Awwwards (DOM/SVG, zéro WebGL)

- IntroLoader : cérémonie d'entrée (flag-bar, monogramme, titrage), 1re visite, skippable
- Lenis au layout (ticker GSAP, imports dynamiques) + ancres interceptées
- Hero : titrage oversized en masques, filets drapeau en parallaxe, sortie scrubée (scroll-driven CSS)
- Reveal syncopé gwoka (use:reveal) sur 83 éléments, flag chips, icônes pop
- Marquee kréyòl (tagline + valeurs), pause au survol
- Hover craft : boutons à balayage or, nav soulignée + section active, pochettes DJANGOKAM en wipe clip-path + tilt 3D (use:tilt) avec reflet or
- Gate unique prefers-reduced-motion partout ; contenu complet sans JS
- Lighthouse mobile 91/100/100/100 — JS initial 69 Ko gzip (budget 170 Ko)

src/lib/components/sections/Engagement.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import FlagChip from '$lib/components/motion/FlagChip.svelte';
 	import KineticText from '$lib/components/motion/KineticText.svelte';
 	import type { Bundle, Locale } from '$lib/i18n';
+	import { reveal } from '$lib/motion/reveal';
 	import { pictoFor } from './pictos';
 
 	let { t }: { t: Bundle; locale?: Locale } = $props();
@@ -8,6 +10,7 @@
 
 <section id="engagement" class="section">
 	<div class="container">
+		<FlagChip />
 		<h2 class="section-title">
 			<KineticText as="span" text={t.engagement.section_title} />&#32;
 			<span class="accent-text"
@@ -17,9 +20,9 @@
 		<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">
+			{#each t.engagement.cards as card, i (card.title)}
+				<div class="engagement-card" use:reveal={i}>
+					<div class="engagement-icon reveal-pop" use:reveal={i + 1}>
 						<svg class="icon" aria-hidden="true"
 							><use href="/icons.svg#{pictoFor(card.icon)}" /></svg
 						>