✨ 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>

frontend/app/components/feature/ProgressIcon.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const progressionStore = useProgressionStore()
+
+const showDrawer = ref(false)
+
+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)
+</script>
+
+<template>
+  <button
+    type="button"
+    class="progress-icon relative p-3"
+    :aria-label="t('progress.label', { percent: progressionStore.completionPercent })"
+    @click="showDrawer = true"
+  >
+    <div class="relative w-8 h-8">
+      <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
+        <circle
+          cx="18"
+          cy="18"
+          r="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          class="text-sky-dark-100"
+        />
+        <circle
+          cx="18"
+          cy="18"
+          r="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          class="text-sky-accent"
+          :stroke-dasharray="`${progressionStore.completionPercent}, 100`"
+        />
+      </svg>
+      <span
+        class="absolute inset-0 flex items-center justify-center text-xs font-ui font-bold text-sky-text"
+      >
+        {{ progressionStore.completionPercent }}
+      </span>
+    </div>
+  </button>
+
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="showDrawer"
+        class="fixed inset-0 bg-black/50 z-40"
+        @click="showDrawer = false"
+      />
+    </Transition>
+
+    <Transition name="slide-up">
+      <div
+        v-if="showDrawer"
+        class="fixed inset-x-0 bottom-0 z-50 bg-sky-dark-50 rounded-t-2xl shadow-xl p-4 pb-8"
+        style="bottom: var(--bottom-bar-height, 64px)"
+      >
+        <div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4" />
+
+        <h3 class="text-lg font-ui font-bold text-sky-text mb-4">
+          {{ t('progress.title') }}
+        </h3>
+
+        <FeatureProgressBar
+          :percent="progressionStore.completionPercent"
+          :show-tooltip="false"
+          compact
+          class="mb-4"
+        />
+
+        <ul class="space-y-2 mb-4">
+          <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 mb-4">
+          {{ t('progress.summary', { visited: visitedCount, remaining: remainingCount }) }}
+        </p>
+
+        <button
+          type="button"
+          class="w-full py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui hover:bg-sky-dark-200 transition-colors"
+          @click="showDrawer = false"
+        >
+          {{ t('common.close') }}
+        </button>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-enter-active,
+  .fade-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: none;
+  }
+}
+</style>

frontend/app/components/layout/AppHeader.vue

@@ -22,13 +22,12 @@
       </nav>
 
       <div class="flex items-center gap-3">
-        <!-- Barre de progression -->
-        <div class="hidden md:block w-24 h-1.5 bg-sky-text/10 rounded-full overflow-hidden">
-          <div
-            class="h-full bg-sky-accent/40 rounded-full transition-all duration-500"
-            :style="{ width: progressPercent + '%' }"
-          />
-        </div>
+        <!-- Barre de progression XP (desktop) -->
+        <FeatureProgressBar
+          v-if="showProgressBar"
+          :percent="progressPercent"
+          class="hidden md:block"
+        />
 
         <UiLanguageSwitcher />
 
@@ -88,6 +87,10 @@ const store = useProgressionStore()
 
 const progressPercent = computed(() => store.progressPercent)
 
+const showProgressBar = computed(() => {
+  return store.hero !== null
+})
+
 const mobileOpen = ref(false)
 const scrolled = ref(false)
 

frontend/i18n/en.json

@@ -179,6 +179,17 @@
     "clickToSkip": "Click or press Space to skip",
     "bugAlt": "The Bug - Stage {stage}"
   },
+  "progress": {
+    "label": "Progress: {percent}%",
+    "title": "Portfolio exploration",
+    "sections": {
+      "projects": "Projects",
+      "skills": "Skills",
+      "testimonials": "Testimonials",
+      "journey": "Journey"
+    },
+    "summary": "{visited} visited, {remaining} to discover"
+  },
   "pages": {
     "projects": {
       "title": "Projects",

frontend/i18n/fr.json

@@ -179,6 +179,17 @@
     "clickToSkip": "Cliquez ou appuyez sur Espace pour passer",
     "bugAlt": "Le Bug - Stade {stage}"
   },
+  "progress": {
+    "label": "Progression : {percent}%",
+    "title": "Exploration du portfolio",
+    "sections": {
+      "projects": "Projets",
+      "skills": "Compétences",
+      "testimonials": "Témoignages",
+      "journey": "Parcours"
+    },
+    "summary": "{visited} visité(s), {remaining} à découvrir"
+  },
   "pages": {
     "projects": {
       "title": "Projets",