✨ Add journey timeline page with scroll animations (Story 2.8)

- Create useIntersectionObserver composable for scroll-triggered animations
- Add TimelineItem component with alternating layout (desktop)
- Implement journey page with i18n-based milestones data
- Add 7 career milestones (2018-2025) in FR and EN
- Gradient timeline line with animated connection points
- Glassmorphism card design with hover effects
- Respect prefers-reduced-motion for all animations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/pages/parcours.vue

@@ -1,16 +1,73 @@
 <template>
-  <div class="min-h-screen p-8">
-    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.journey.title') }}</h1>
-    <p class="mt-4 text-sky-text/70">{{ $t('pages.journey.description') }}</p>
+  <div class="min-h-screen">
+    <!-- Hero section -->
+    <section class="relative overflow-hidden bg-gradient-to-b from-sky-dark to-sky-darker py-16">
+      <div class="container mx-auto px-4">
+        <h1 class="text-center text-4xl font-narrative font-bold text-white md:text-5xl">
+          {{ $t('journey.title') }}
+        </h1>
+        <p class="mx-auto mt-4 max-w-2xl text-center text-lg text-gray-400">
+          {{ $t('journey.page_description') }}
+        </p>
+      </div>
+
+      <!-- Decorative elements -->
+      <div class="absolute -left-20 top-20 h-40 w-40 rounded-full bg-sky-500/5 blur-3xl" />
+      <div class="absolute -right-20 bottom-10 h-60 w-60 rounded-full bg-emerald-500/5 blur-3xl" />
+    </section>
+
+    <!-- Timeline section -->
+    <section class="container mx-auto px-4 py-16">
+      <div class="relative">
+        <!-- Ligne centrale verticale -->
+        <div class="absolute bottom-0 left-2 top-0 w-0.5 bg-gradient-to-b from-sky-500/50 via-sky-dark to-sky-500/50 md:left-1/2 md:-translate-x-1/2" />
+
+        <!-- Étapes -->
+        <div class="space-y-12">
+          <TimelineItem
+            v-for="(milestone, index) in milestones"
+            :key="index"
+            :milestone="milestone"
+            :index="index"
+            :is-left="index % 2 === 0"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- Message de fin -->
+    <section class="container mx-auto px-4 pb-16">
+      <div class="mx-auto max-w-2xl rounded-xl bg-gradient-to-r from-sky-500/10 to-emerald-500/10 p-8 text-center">
+        <p class="font-narrative text-xl italic text-gray-300">
+          {{ $t('journey.end_message') }}
+        </p>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { Milestone } from '~/components/feature/TimelineItem.vue'
+
 const { setPageMeta } = useSeo()
-const { t } = useI18n()
+const { t, tm } = useI18n()
+const progressStore = useProgressStore()
 
 setPageMeta({
-  title: t('pages.journey.title'),
-  description: t('pages.journey.description'),
+  title: t('journey.page_title'),
+  description: t('journey.page_description'),
+})
+
+onMounted(() => {
+  progressStore.visitSection('journey')
+})
+
+// Charger les milestones depuis i18n
+const milestones = computed<Milestone[]>(() => {
+  const data = tm('journey.milestones')
+  if (Array.isArray(data)) {
+    return data as Milestone[]
+  }
+  return []
 })
 </script>