✨ feat(frontend): barre de progression XP style RPG

Story 3.4 : Barre de progression globale (XP bar)
- ProgressBar.vue avec design RPG (bordure, graduations, glow)
- Tooltip au hover avec liste des sections visitées
- Animation fluide avec prefers-reduced-motion
- ProgressIcon.vue pour mobile (cercle SVG + drawer)
- Intégration dans AppHeader (visible si héros choisi)
- Traductions progress.* FR/EN

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

frontend/app/components/feature/ProgressBar.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    percent: number
+    showTooltip?: boolean
+    compact?: boolean
+  }>(),
+  {
+    showTooltip: true,
+    compact: false,
+  },
+)
+
+const { t } = useI18n()
+const progressionStore = useProgressionStore()
+const reducedMotion = useReducedMotion()
+
+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'),
+  },
+])
+
+const visitedCount = computed(() => sections.value.filter((s) => s.visited).length)
+const remainingCount = computed(() => 4 - visitedCount.value)
+
+const showPopover = ref(false)
+</script>
+
+<template>
+  <div class="progress-bar-container relative" :class="{ compact: compact }">
+    <div
+      class="progress-bar-wrapper group cursor-pointer"
+      tabindex="0"
+      role="progressbar"
+      :aria-valuenow="percent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :aria-label="t('progress.label', { percent })"
+      @mouseenter="showPopover = true"
+      @mouseleave="showPopover = false"
+      @focus="showPopover = true"
+      @blur="showPopover = false"
+    >
+      <div
+        class="progress-frame relative h-6 w-40 rounded-full border-2 border-sky-accent/50 bg-sky-dark overflow-hidden"
+      >
+        <div class="absolute inset-0 flex">
+          <div
+            v-for="i in 4"
+            :key="i"
+            class="flex-1 border-r border-sky-dark-100/30 last:border-r-0"
+          />
+        </div>
+
+        <div
+          class="progress-fill absolute inset-y-0 left-0 bg-gradient-to-r from-sky-accent to-sky-accent-light"
+          :class="{ 'transition-all duration-500 ease-out': !reducedMotion }"
+          :style="{ width: `${percent}%` }"
+        >
+          <div class="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent" />
+
+          <div
+            class="glow-effect absolute inset-0 opacity-0 group-hover:opacity-100"
+            :class="{ 'transition-opacity duration-300': !reducedMotion }"
+          />
+        </div>
+
+        <div class="absolute inset-0 flex items-center justify-center">
+          <span class="text-xs font-ui font-bold text-sky-text drop-shadow-md">
+            {{ percent }}%
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <Transition name="fade">
+      <div
+        v-if="showTooltip && showPopover"
+        class="absolute top-full left-1/2 -translate-x-1/2 mt-2 z-50"
+      >
+        <div class="bg-sky-dark-50 border border-sky-dark-100 rounded-lg shadow-xl p-3 min-w-48">
+          <p class="text-sm font-ui font-semibold text-sky-text mb-2">
+            {{ t('progress.title') }}
+          </p>
+
+          <ul class="space-y-1">
+            <li
+              v-for="section in sections"
+              :key="section.key"
+              class="flex items-center gap-2 text-sm"
+            >
+              <span v-if="section.visited" class="text-green-400" aria-hidden="true">&#10003;</span>
+              <span v-else class="text-sky-text-muted" aria-hidden="true">&#9675;</span>
+              <span :class="section.visited ? 'text-sky-text' : 'text-sky-text-muted'">
+                {{ section.name }}
+              </span>
+            </li>
+          </ul>
+
+          <p class="text-xs text-sky-text-muted mt-2 pt-2 border-t border-sky-dark-100">
+            {{ t('progress.summary', { visited: visitedCount, remaining: remainingCount }) }}
+          </p>
+
+          <div
+            class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-sky-dark-50 border-l border-t border-sky-dark-100 transform rotate-45"
+          />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.progress-bar-wrapper:focus {
+  outline: 2px solid var(--sky-accent);
+  outline-offset: 2px;
+  border-radius: 9999px;
+}
+
+.glow-effect {
+  box-shadow:
+    0 0 10px var(--sky-accent),
+    0 0 20px var(--sky-accent);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.compact .progress-frame {
+  height: 1rem;
+  width: 100%;
+}
+
+.compact .progress-frame span {
+  font-size: 0.65rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-fill,
+  .glow-effect {
+    transition: none;
+  }
+}
+</style>