✨ feat(frontend): composant NarratorBubble avec 5 stages du Bug

Story 3.2 : Implémentation du narrateur-guide "Le Bug"
- Composant NarratorBubble.vue avec effet typewriter
- 5 SVG représentant l'évolution de la mascotte (silhouette à révélation)
- Animation slide-up/fade-out avec prefers-reduced-motion
- Support clavier (Espace/Entrée pour skip, Échap pour fermer)
- Accessibilité (aria-live, role="status", sr-only)
- Responsive (position adaptée mobile avec bottom-bar)
- Traductions narrator.clickToSkip et narrator.bugAlt

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

docs/implementation-artifacts/3-2-composant-narratorbubble-le-bug.md

@@ -1,6 +1,6 @@
 # Story 3.2: Composant NarratorBubble (Le Bug)
 
-Status: ready-for-dev
+Status: review
 
 ## Story
 
@@ -22,55 +22,55 @@ so that je me sens guidé et l'expérience est immersive.
 
 ## Tasks / Subtasks
 
-- [ ] **Task 1: Créer le composable useTypewriter** (AC: #3, #4, #7)
-  - [ ] Créer `frontend/app/composables/useTypewriter.ts`
-  - [ ] Accepter le texte en paramètre
-  - [ ] Afficher lettre par lettre (30-50ms par lettre)
-  - [ ] Exposer une méthode `skip()` pour afficher tout le texte instantanément
-  - [ ] Respecter `prefers-reduced-motion`
+- [x] **Task 1: Créer le composable useTypewriter** (AC: #3, #4, #7)
+  - [x] Créer `frontend/app/composables/useTypewriter.ts` (existait déjà de Story 2.7)
+  - [x] Accepter le texte en paramètre
+  - [x] Afficher lettre par lettre (30-50ms par lettre)
+  - [x] Exposer une méthode `skip()` pour afficher tout le texte instantanément
+  - [x] Respecter `prefers-reduced-motion`
 
-- [ ] **Task 2: Créer les assets du Bug par stage** (AC: #2)
-  - [ ] Préparer 5 images SVG ou PNG pour les 5 stades du Bug
-  - [ ] Stage 1 : silhouette sombre floue
-  - [ ] Stage 2 : forme vague avec yeux
-  - [ ] Stage 3 : pattes visibles
-  - [ ] Stage 4 : araignée reconnaissable
-  - [ ] Stage 5 : mascotte complète révélée
-  - [ ] Placer dans `frontend/public/images/bug/`
+- [x] **Task 2: Créer les assets du Bug par stage** (AC: #2)
+  - [x] Préparer 5 images SVG ou PNG pour les 5 stades du Bug
+  - [x] Stage 1 : silhouette sombre floue
+  - [x] Stage 2 : forme vague avec yeux
+  - [x] Stage 3 : pattes visibles
+  - [x] Stage 4 : araignée reconnaissable
+  - [x] Stage 5 : mascotte complète révélée
+  - [x] Placer dans `frontend/public/images/bug/`
 
-- [ ] **Task 3: Créer le composant NarratorBubble** (AC: #1, #2, #3, #4, #5, #8, #9)
-  - [ ] Créer `frontend/app/components/feature/NarratorBubble.vue`
-  - [ ] Props : message (string), visible (boolean)
-  - [ ] Emit : close, skip
-  - [ ] Afficher l'avatar du Bug selon `narratorStage` du store
-  - [ ] Intégrer le composable useTypewriter
-  - [ ] Bouton de fermeture/minimisation
-  - [ ] Utiliser font-narrative pour le texte
+- [x] **Task 3: Créer le composant NarratorBubble** (AC: #1, #2, #3, #4, #5, #8, #9)
+  - [x] Créer `frontend/app/components/feature/NarratorBubble.vue`
+  - [x] Props : message (string), visible (boolean)
+  - [x] Emit : close, skip
+  - [x] Afficher l'avatar du Bug selon `narratorStage` du store
+  - [x] Intégrer le composable useTypewriter
+  - [x] Bouton de fermeture/minimisation
+  - [x] Utiliser font-narrative pour le texte
 
-- [ ] **Task 4: Implémenter l'accessibilité** (AC: #6, #7)
-  - [ ] Ajouter `aria-live="polite"` sur le conteneur
-  - [ ] Ajouter `role="status"` pour signaler les mises à jour
-  - [ ] S'assurer que le texte complet est accessible même pendant l'animation
-  - [ ] Tester avec prefers-reduced-motion
+- [x] **Task 4: Implémenter l'accessibilité** (AC: #6, #7)
+  - [x] Ajouter `aria-live="polite"` sur le conteneur
+  - [x] Ajouter `role="status"` pour signaler les mises à jour
+  - [x] S'assurer que le texte complet est accessible même pendant l'animation
+  - [x] Tester avec prefers-reduced-motion
 
-- [ ] **Task 5: Animation d'apparition/disparition** (AC: #9)
-  - [ ] Slide-up pour l'apparition
-  - [ ] Fade-out pour la disparition
-  - [ ] Utiliser CSS transitions pour fluidité
-  - [ ] Non-bloquante : ne pas empêcher les interactions avec le reste de la page
+- [x] **Task 5: Animation d'apparition/disparition** (AC: #9)
+  - [x] Slide-up pour l'apparition
+  - [x] Fade-out pour la disparition
+  - [x] Utiliser CSS transitions pour fluidité
+  - [x] Non-bloquante : ne pas empêcher les interactions avec le reste de la page
 
-- [ ] **Task 6: Responsive design** (AC: #1)
-  - [ ] Desktop : bulle en bas de l'écran (position fixed)
-  - [ ] Mobile : au-dessus de la bottom bar (variable CSS pour le spacing)
-  - [ ] Taille adaptée à l'écran
+- [x] **Task 6: Responsive design** (AC: #1)
+  - [x] Desktop : bulle en bas de l'écran (position fixed)
+  - [x] Mobile : au-dessus de la bottom bar (variable CSS pour le spacing)
+  - [x] Taille adaptée à l'écran
 
-- [ ] **Task 7: Tests et validation**
-  - [ ] Tester l'effet typewriter
-  - [ ] Tester le skip au clic/Espace
-  - [ ] Vérifier les 5 stades du Bug
-  - [ ] Valider l'accessibilité (screen reader)
-  - [ ] Tester prefers-reduced-motion
-  - [ ] Valider responsive (desktop/mobile)
+- [x] **Task 7: Tests et validation**
+  - [x] Tester l'effet typewriter
+  - [x] Tester le skip au clic/Espace
+  - [x] Vérifier les 5 stades du Bug
+  - [x] Valider l'accessibilité (screen reader)
+  - [x] Tester prefers-reduced-motion
+  - [x] Valider responsive (desktop/mobile)
 
 ## Dev Notes