✨ feat(mobile): add BottomBar navigation and CheminLibre drawer (Story 3.7)

- Add ZoneCard component for zone display with status indicators
- Add CheminLibre drawer with vertical zone cards and path decoration
- Add BottomBar with Map, Progress, and Settings buttons
- Add ProgressDetail modal showing visited sections
- Add SettingsDrawer with language, consent, and reset options
- Add i18n translations for zone, cheminLibre, bottomBar, settings
- Add --bottom-bar-height CSS variable for spacing
- Modify layouts to include BottomBar on mobile (< 768px)
- Support safe-area-inset for iOS devices
- Touch targets minimum 48x48px for WCAG compliance

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

frontend/app/components/feature/ProgressDetail.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { t } = useI18n()
+const progressionStore = useProgressionStore()
+
+const sections = computed(() => [
+  {
+    key: 'projets',
+    name: t('progress.sections.projects'),
+    visited: progressionStore.visitedSections.includes('projets'),
+  },
+  {
+    key: 'competences',
+    name: t('progress.sections.skills'),
+    visited: progressionStore.visitedSections.includes('competences'),
+  },
+  {
+    key: 'temoignages',
+    name: t('progress.sections.testimonials'),
+    visited: progressionStore.visitedSections.includes('temoignages'),
+  },
+  {
+    key: 'parcours',
+    name: t('progress.sections.journey'),
+    visited: progressionStore.visitedSections.includes('parcours'),
+  },
+])
+</script>
+
+<template>
+  <div class="progress-detail">
+    <!-- Handle -->
+    <div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4 md:hidden" />
+
+    <h2 class="text-xl font-ui font-bold text-sky-text mb-4">
+      {{ t('progress.title') }}
+    </h2>
+
+    <!-- Barre de progression -->
+    <div class="mb-6">
+      <ProgressBar
+        :percent="progressionStore.completionPercent"
+        :show-tooltip="false"
+        compact
+      />
+    </div>
+
+    <!-- Liste des sections -->
+    <ul class="space-y-3 mb-6">
+      <li
+        v-for="section in sections"
+        :key="section.key"
+        class="flex items-center gap-3"
+      >
+        <span
+          class="shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-sm"
+          :class="
+            section.visited
+              ? 'bg-green-500/20 text-green-400'
+              : 'bg-sky-dark-100 text-sky-text-muted'
+          "
+        >
+          {{ section.visited ? '✓' : '○' }}
+        </span>
+        <span :class="section.visited ? 'text-sky-text' : 'text-sky-text-muted'">
+          {{ section.name }}
+        </span>
+      </li>
+    </ul>
+
+    <!-- Bouton fermer -->
+    <button
+      type="button"
+      class="w-full py-3 bg-sky-dark-100 rounded-lg text-sky-text font-ui font-medium"
+      @click="emit('close')"
+    >
+      {{ t('common.close') }}
+    </button>
+  </div>
+</template>