✨ feat(epic-4): chemins narratifs, easter eggs, challenge et contact

Epic 4: Chemins Narratifs, Challenge & Contact

Stories implementees:
- 4.1: Composant ChoiceCards pour choix narratifs binaires
- 4.2: Sequence d'intro narrative avec Le Bug
- 4.3: Chemins narratifs differencies avec useNarrativePath
- 4.4: Table easter_eggs et systeme de detection (API + composable)
- 4.5: Easter eggs UI (popup, notification, collection)
- 4.6: Page challenge avec puzzle de code
- 4.7: Page revelation "Monde de Code"
- 4.8: Page contact avec formulaire et stats

Fichiers crees:
- Frontend: ChoiceCards, IntroSequence, ZoneEndChoice, EasterEggPopup,
  CodePuzzle, ChallengeSuccess, CodeWorld, et pages intro/challenge/revelation
- API: EasterEggController, Model, Migration, Seeder

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

frontend/app/pages/revelation.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="revelation-page min-h-screen bg-sky-dark flex flex-col items-center justify-center p-8">
+    <!-- Transition phase -->
+    <Transition name="fade" mode="out-in">
+      <div
+        v-if="currentPhase === 'transition'"
+        key="transition"
+        class="text-center"
+      >
+        <div class="animate-pulse text-4xl mb-4" aria-hidden="true">...</div>
+        <p class="text-sky-text/60 font-narrative">{{ $t('revelation.loading') }}</p>
+      </div>
+
+      <!-- Code World phase -->
+      <div
+        v-else-if="currentPhase === 'codeworld'"
+        key="codeworld"
+        class="text-center"
+      >
+        <FeatureCodeWorld @complete="advancePhase" />
+      </div>
+
+      <!-- Avatar and message phase -->
+      <div
+        v-else-if="currentPhase === 'avatar' || currentPhase === 'message' || currentPhase === 'complete'"
+        key="complete"
+        class="text-center max-w-2xl"
+      >
+        <!-- Avatar -->
+        <div class="relative mb-8">
+          <div
+            class="w-32 h-32 mx-auto bg-gradient-to-br from-sky-accent to-amber-500 rounded-full flex items-center justify-center shadow-xl shadow-sky-accent/30"
+            :class="{ 'animate-bounce-in': !reducedMotion }"
+          >
+            <span class="text-5xl text-white font-ui font-bold">C</span>
+          </div>
+          <!-- Celebration particles -->
+          <div v-if="!reducedMotion" class="absolute inset-0">
+            <span
+              v-for="i in 8"
+              :key="i"
+              class="celebration-particle"
+              :style="{ '--delay': `${i * 0.1}s`, '--angle': `${i * 45}deg` }"
+            />
+          </div>
+        </div>
+
+        <!-- Bug says -->
+        <p class="text-lg text-sky-accent font-narrative mb-2">
+          {{ $t('revelation.bugSays') }}
+        </p>
+
+        <!-- Main message -->
+        <h1 class="text-4xl md:text-5xl font-ui font-bold text-sky-text mb-4">
+          {{ $t('revelation.foundMe') }}
+        </h1>
+
+        <p class="text-sky-text/60 font-narrative text-lg mb-8">
+          {{ $t('revelation.message') }}
+        </p>
+
+        <!-- Signature -->
+        <p class="text-sky-accent font-narrative italic mb-12">
+          - Celian
+        </p>
+
+        <!-- CTA -->
+        <NuxtLink
+          :to="localePath('/contact')"
+          class="inline-flex items-center gap-3 px-8 py-4 bg-sky-accent text-white font-ui font-semibold rounded-xl hover:opacity-90 transition-opacity"
+        >
+          {{ $t('revelation.contactCta') }}
+          <span aria-hidden="true">-></span>
+        </NuxtLink>
+      </div>
+    </Transition>
+
+    <!-- Screen reader description -->
+    <div class="sr-only" role="status" aria-live="polite">
+      {{ $t('revelation.srDescription') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'adventure',
+})
+
+const localePath = useLocalePath()
+const progressionStore = useProgressionStore()
+const reducedMotion = usePreferredReducedMotion()
+
+// Check if contact is unlocked
+onMounted(() => {
+  if (!progressionStore.contactUnlocked) {
+    navigateTo(localePath('/'))
+  }
+})
+
+// Phases
+type Phase = 'transition' | 'codeworld' | 'avatar' | 'message' | 'complete'
+const currentPhase = ref<Phase>('transition')
+
+function advancePhase() {
+  const phases: Phase[] = ['transition', 'codeworld', 'avatar', 'message', 'complete']
+  const currentIndex = phases.indexOf(currentPhase.value)
+
+  if (currentIndex < phases.length - 1) {
+    currentPhase.value = phases[currentIndex + 1]
+  }
+}
+
+// Start sequence
+onMounted(() => {
+  if (reducedMotion.value === 'reduce') {
+    // Static version
+    currentPhase.value = 'complete'
+  } else {
+    // Animated version
+    setTimeout(() => {
+      advancePhase()
+    }, 1500)
+  }
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-bounce-in {
+  animation: bounce-in 0.6s ease-out;
+}
+
+.celebration-particle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--sky-accent, #fa784f);
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  animation: explode 1s ease-out forwards;
+  animation-delay: var(--delay, 0s);
+}
+
+@keyframes explode {
+  0% {
+    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-80px);
+    opacity: 0;
+  }
+}
+</style>