✨ 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/challenge.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="challenge-page min-h-screen bg-sky-dark relative">
+    <!-- Skip button (always visible) -->
+    <button
+      v-if="!puzzleCompleted"
+      type="button"
+      class="absolute top-4 right-4 text-sky-text/60 hover:text-sky-text text-sm font-ui underline z-10"
+      :class="{ 'text-sky-accent': hintsUsed >= 3 }"
+      @click="skipChallenge"
+    >
+      {{ $t('challenge.skip') }}
+    </button>
+
+    <!-- Introduction -->
+    <Transition name="fade" mode="out-in">
+      <div
+        v-if="showIntro"
+        key="intro"
+        class="flex flex-col items-center justify-center min-h-screen p-8"
+      >
+        <div class="max-w-lg text-center">
+          <div class="w-24 h-24 mx-auto mb-6 bg-sky-accent/20 rounded-full flex items-center justify-center">
+            <span class="text-4xl" aria-hidden="true">?</span>
+          </div>
+
+          <h1 class="text-3xl font-ui font-bold text-sky-text mb-4">
+            {{ $t('challenge.title') }}
+          </h1>
+
+          <p class="font-narrative text-xl text-sky-text/60 mb-8">
+            {{ $t('challenge.intro') }}
+          </p>
+
+          <button
+            type="button"
+            class="px-8 py-3 bg-sky-accent text-white font-ui font-semibold rounded-lg hover:bg-sky-accent/90 transition-colors"
+            @click="startPuzzle"
+          >
+            {{ $t('challenge.accept') }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Puzzle -->
+      <div
+        v-else-if="!puzzleCompleted"
+        key="puzzle"
+        class="flex flex-col items-center justify-center min-h-screen p-8"
+      >
+        <div class="max-w-2xl w-full">
+          <h2 class="text-xl font-ui font-bold text-sky-text mb-2 text-center">
+            {{ $t('challenge.puzzleTitle') }}
+          </h2>
+
+          <p class="text-sky-text/60 text-center mb-8">
+            {{ $t('challenge.puzzleInstruction') }}
+          </p>
+
+          <FeatureCodePuzzle
+            :hints-used="hintsUsed"
+            @solved="handlePuzzleSolved"
+            @hint-used="useHint"
+          />
+        </div>
+      </div>
+
+      <!-- Success -->
+      <div
+        v-else
+        key="success"
+        class="flex flex-col items-center justify-center min-h-screen p-8"
+      >
+        <FeatureChallengeSuccess />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'adventure',
+})
+
+const router = useRouter()
+const progressionStore = useProgressionStore()
+const localePath = useLocalePath()
+
+// Check if contact is unlocked
+onMounted(() => {
+  if (!progressionStore.contactUnlocked) {
+    navigateTo(localePath('/'))
+  }
+})
+
+// States
+const showIntro = ref(true)
+const puzzleCompleted = ref(false)
+const hintsUsed = ref(0)
+
+function startPuzzle() {
+  showIntro.value = false
+}
+
+function handlePuzzleSolved() {
+  puzzleCompleted.value = true
+  progressionStore.completeChallenge()
+
+  // Wait for animation then navigate
+  setTimeout(() => {
+    navigateTo(localePath('/revelation'))
+  }, 3000)
+}
+
+function skipChallenge() {
+  // Skip does not mark as completed
+  navigateTo(localePath('/revelation'))
+}
+
+function useHint() {
+  hintsUsed.value++
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>