✨ 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/components/feature/EasterEggCollection.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="easter-egg-collection">
+    <!-- Header with counter -->
+    <div class="flex items-center justify-between mb-6">
+      <h2 class="text-xl font-ui font-bold text-sky-text">
+        {{ $t('easterEgg.collection') }}
+      </h2>
+      <div class="flex items-center gap-2">
+        <span class="text-sky-accent font-ui font-bold">{{ foundCount }}</span>
+        <span class="text-sky-text/60">/</span>
+        <span class="text-sky-text/60">{{ totalEasterEggs }}</span>
+      </div>
+    </div>
+
+    <!-- 100% badge -->
+    <div
+      v-if="isComplete"
+      class="bg-gradient-to-r from-sky-accent to-amber-500 rounded-lg p-4 mb-6 text-center"
+    >
+      <span class="text-2xl" aria-hidden="true">*</span>
+      <p class="text-white font-ui font-bold mt-2">
+        {{ $t('easterEgg.allFound') }}
+      </p>
+    </div>
+
+    <!-- Progress bar -->
+    <div class="h-2 bg-sky-dark-100 rounded-full mb-6 overflow-hidden">
+      <div
+        class="h-full bg-sky-accent transition-all duration-500"
+        :style="{ width: `${(foundCount / totalEasterEggs) * 100}%` }"
+      />
+    </div>
+
+    <!-- Easter eggs grid -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div
+        v-for="egg in availableEasterEggs"
+        :key="egg.slug"
+        class="easter-egg-card p-4 rounded-lg border transition-all"
+        :class="[
+          isFound(egg.slug)
+            ? 'bg-sky-dark-50 border-sky-accent/50'
+            : 'bg-sky-dark border-sky-dark-100 opacity-50'
+        ]"
+      >
+        <!-- Icon or mystery -->
+        <div class="text-3xl text-center mb-2">
+          {{ isFound(egg.slug) ? getTriggerIcon(egg.trigger_type) : '?' }}
+        </div>
+
+        <!-- Name or mystery -->
+        <p
+          class="text-sm font-ui text-center truncate"
+          :class="isFound(egg.slug) ? 'text-sky-text' : 'text-sky-text/60'"
+        >
+          {{ isFound(egg.slug) ? formatSlug(egg.slug) : '???' }}
+        </p>
+
+        <!-- Difficulty -->
+        <p class="text-xs text-center mt-1 text-sky-text/60">
+          {{ getDifficultyStars(egg.difficulty) }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Hint if not all found -->
+    <p
+      v-if="!isComplete"
+      class="text-sm text-sky-text/60 text-center mt-6 font-narrative italic"
+    >
+      {{ $t('easterEgg.hint') }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TriggerType } from '~/composables/useFetchEasterEggs'
+
+const progressionStore = useProgressionStore()
+const { availableEasterEggs, fetchList } = useFetchEasterEggs()
+
+onMounted(() => {
+  fetchList()
+})
+
+const totalEasterEggs = computed(() => availableEasterEggs.value.length || 8)
+const foundCount = computed(() => progressionStore.easterEggsFoundCount)
+const isComplete = computed(() => foundCount.value >= totalEasterEggs.value && totalEasterEggs.value > 0)
+
+function isFound(slug: string): boolean {
+  return progressionStore.easterEggsFound.includes(slug)
+}
+
+function getTriggerIcon(trigger: TriggerType): string {
+  const icons: Record<TriggerType, string> = {
+    click: '^',
+    hover: 'o',
+    konami: '#',
+    scroll: 'v',
+    sequence: '1',
+  }
+  return icons[trigger] || '?'
+}
+
+function formatSlug(slug: string): string {
+  return slug
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+function getDifficultyStars(difficulty: number): string {
+  return '*'.repeat(difficulty) + '.'.repeat(5 - difficulty)
+}
+</script>