# Epic: Correction Bug Ghost Tags - Fermeture Intempestive

**Epic ID:** EPIC-GHOST-TAGS-FIX
**Status:** Draft
**Priority:** High (Bug critique)
**Created:** 2026-01-09
**Owner:** Development Team
**Type:** Bug Fix

---

## Description du Bug

### Symptôme
Lorsqu'un utilisateur clique sur un **tag fantôme** (ghost tag) suggéré par l'IA pour l'ajouter à sa note:
1. ❌ **La fenêtre d'édition de la note se ferme immédiatement et de manière inattendue**
2. ❌ **Un toast de confirmation apparaît en haut à droite**
3. ❌ **L'utilisateur perd son contexte d'édition**

### Conditions de Reproduction

1. Créer une nouvelle note ou éditer une note existante
2. Ajouter du contenu texte qui déclenche l'analyse IA
3. Attendre que les suggestions de tags IA apparaissent (tags fantômes)
4. Cliquer sur un tag fantôme pour l'ajouter
5. **Résultat attendu:** Le tag est ajouté, la note reste ouverte
6. **Résultat actuel (BUG):** La note se ferme, toast apparaît

### Impact Utilisateur

- **Frustration élevée:** L'utilisateur perd sa place dans l'édition
- **Interruption du workflow:** Obligation de rouvrir la note pour continuer
- **Perte de confiance:** Les fonctionnalités IA deviennent agaçantes
- **Contourner le bug:** Les utilisateurs n'utilisent plus les tags suggérés

---

## Analyse des Causes Racines

Après analyse du code dans:
- `keep-notes/components/ghost-tags.tsx` (lignes 56-84)
- `keep-notes/components/note-input.tsx` (lignes 94-112)
- `keep-notes/components/note-editor.tsx` (lignes 77-95)

### Causes Identifiées

1. **Propagation d'événements:** Le clic sur le bouton du tag fantôme pourrait propager à un élément parent qui ferme la note
2. **Appel asynchrone `addLabel()`:** L'appel API pour créer le label pourrait déclencher un rafraîchissement
3. **Pas de prévention du comportement par défaut:** Le formulaire pourrait se soumettre implicitement
4. **Problème de focus:** Le clic pourrait déclencher une perte de focus qui ferme la note
5. **Toast trop intrusif:** Le toast de confirmation apparaît mais ne devrait pas interrompre

### Code Problématique

Dans `ghost-tags.tsx` lignes 56-68:
```typescript
<button
  type="button"
  onClick={(e) => {
    e.preventDefault();
    e.stopPropagation();
    onSelectTag(suggestion.tag);
  }}
  className={...}
>
```

Le `e.preventDefault()` et `e.stopPropagation()` sont présents, mais **ne suffisent pas** à empêcher la fermeture de la note.

---

## User Stories

### Story 1: Prévenir la Fermeture de la Note lors du Clic sur Tag Fantôme

**ID:** GHOST-TAGS-1
**Title:** Empêcher la fermeture intempestive de la note lors de l'ajout d'un tag fantôme
**Priority:** Must Have (Bug critique)
**Estimation:** 2h
**Type:** Bug Fix

**En tant que:** utilisateur
**Je veux:** cliquer sur un tag fantôme suggéré par l'IA sans que ma note se ferme
**Afin que:** je puisse continuer à éditer ma note sans interruption

**Critères d'Acceptation:**
1. **Given** une note en cours d'édition avec des tags fantômes affichés
2. **When** je clique sur un tag fantôme pour l'ajouter
3. **Then** le tag est ajouté à la note
4. **And** la note reste OUVERTE et le focus reste sur la zone d'édition
5. **And** un toast de confirmation apparaît en haut à droite (non-intrusif)
6. **Given** que je clique sur le tag fantôme
7. **When** le tag est ajouté
8. **Then** le tag fantôme disparaît de la liste des suggestions
9. **And** il apparaît dans la liste des tags sélectionnés avec une coche de validation

**Fichiers à Modifier:**
- `keep-notes/components/ghost-tags.tsx` - Améliorer la prévention de propagation
- `keep-notes/components/note-input.tsx` - Vérifier qu'aucun événement parent ne ferme
- `keep-notes/components/note-editor.tsx` - Vérifier qu'aucun événement parent ne ferme

**Tests Nécessaires:**
- **Test E2E Playwright:**
  ```
  1. Créer une nouvelle note
  2. Taper du contenu texte qui déclenche l'IA
  3. Attendre l'apparition des tags fantômes
  4. Cliquer sur un tag fantôme
  5. Vérifier que la note est toujours ouverte
  6. Vérifier que le tag est ajouté
  7. Vérifier que le toast apparaît
  ```

**Risques:**
- Risque de casser d'autres fonctionnalités de clic
- Nécessite de tester scénario par scénario

---

### Story 2: Gestion Asynchrone de l'Ajout de Tag sans Interrompre l'UI

**ID:** GHOST-TAGS-2
**Title:** Rendre l'ajout de tag non-bloquant et transparent pour l'utilisateur
**Priority:** Must Have
**Estimation:** 3h
**Type:** UX Improvement

**En tant que:** utilisateur
**Je veux:** que l'ajout d'un tag suggéré soit instantané et ne bloque pas mon travail
**Afin que:** je puisse continuer à éditer sans attendre

**Critères d'Acceptation:**
1. **Given** un tag fantôme sur lequel je clique
2. **When** je clique
3. **Then** le tag est **immédiatement** ajouté à l'état local (optimistic update)
4. **And** l'appel API `addLabel()` se fait en arrière-plan (async)
5. **And** si l'appel API échoue, le tag est retiré et une erreur est affichée
6. **Given** que l'appel API est en cours
7. **When** je continue à éditer
8. **Then** je ne vois aucun indicateur de chargement bloquant
9. **And** le tag apparaît comme "ajouté" avec un badge visuel

**Fichiers à Modifier:**
- `keep-notes/components/note-input.tsx` - Modifier `handleSelectGhostTag` pour optimistic update
- `keep-notes/components/note-editor.tsx` - Modifier `handleSelectGhostTag` pour optimistic update
- `keep-notes/context/LabelContext.tsx` - Ajouter gestion d'erreur optimistic

**Implémentation Proposée:**
```typescript
const handleSelectGhostTag = async (tag: string) => {
  // Optimistic update immédiat
  setSelectedLabels(prev => [...prev, tag])

  try {
    // Appel API en arrière-plan
    const globalExists = globalLabels.some(l => l.toLowerCase() === tag.toLowerCase())
    if (!globalExists) {
      await addLabel(tag)
    }
    addToast(`Tag "${tag}" added`, 'success')
  } catch (error) {
    // Rollback en cas d'erreur
    setSelectedLabels(prev => prev.filter(l => l !== tag))
    addToast(`Failed to add tag "${tag}"`, 'error')
  }
}
```

**Tests Nécessaires:**
- Test unitaire du optimistic update
- Test E2E: vérifier que le tag apparaît immédiatement
- Test E2E: simuler une erreur API et vérifier le rollback

**Risques:**
- Si l'API échoue souvent, les utilisateurs pourraient avoir des tags inconsistants
- Nécessite une bonne gestion des erreurs

---

### Story 3: Améliorer la Feedback Visuel des Tags Fantômes

**ID:** GHOST-TAGS-3
**Title:** Rendre les tags fantômes plus visiblement interactifs et éviter les clics accidentels
**Priority:** Should Have
**Estimation:** 2h
**Type:** UX Improvement

**En tant que:** utilisateur
**Je veux:** voir clairement que les tags fantômes sont cliquables
**Afin que:** je comprenne comment interagir avec eux sans erreur

**Critères d'Acceptation:**
1. **Given** des tags fantômes affichés
2. **When** je survole le tag avec la souris
3. **Then** un changement visuel clair apparaît (curseur pointer, surbrillance, animation)
4. **And** une tooltip explicite apparaît: "Click to add this tag"
5. **Given** que je clique sur le tag
6. **When** le clic est en cours
7. **Then** un indicateur de chargement subtil apparaît (spinner ou animation)
8. **And** le tag devient non-cliquable pendant le traitement
9. **Given** le tag ajouté
10. **When** il est confirmé
11. **Then** une coche verte ou un badge "✓ Added" apparaît

**Fichiers à Modifier:**
- `keep-notes/components/ghost-tags.tsx` - Ajouter états hover, loading, success
- `keep-notes/components/ghost-tags.tsx` - Améliorer les tooltips et indicateurs visuels

**Tests Nécessaires:**
- Test visuel: vérifier les états hover
- Test E2E: survoler et vérifier la tooltip
- Test E2E: cliquer et vérifier l'indicateur de chargement

**Risques:**
- Trop d'animations pourraient être distrayants
- Surcharge visuelle si trop d'indicateurs

---

### Story 4: Supprimer ou Rendre le Toast Optionnel

**ID:** GHOST-TAGS-4
**Title:** Ne pas afficher de toast intrusif lors de l'ajout d'un tag fantôme
**Priority:** Should Have
**Estimation:** 1h
**Type:** UX Polish

**En tant que:** utilisateur
**Je veux:** ne pas être interrompu par un toast quand j'ajoute un tag suggéré
**Afin que:** je puisse me concentrer sur mon édition

**Critères d'Acceptation:**
1. **Given** que j'ajoute un tag fantôme
2. **When** le tag est ajouté avec succès
3. **Then** aucun toast n'apparaît
4. **And** le tag simplement apparaît dans la liste des tags sélectionnés
5. **Given** que l'ajout du tag échoue
6. **When** une erreur se produit
7. **Then** un toast d'erreur apparaît (pour les erreurs uniquement)
8. **And** le tag n'est pas ajouté à la liste

**Alternative proposée:**
- Remplacer le toast par un indicateur visuel SUBTIL sur le tag lui-même
- Ou: ajouter une petite animation de "succès" sur le tag ajouté

**Fichiers à Modifier:**
- `keep-notes/components/note-input.tsx` - Retirer le `addToast` de succès
- `keep-notes/components/note-editor.tsx` - Retirer le `addToast` de succès
- Garder le toast uniquement pour les erreurs

**Tests Nécessaires:**
- Test E2E: ajouter un tag et vérifier qu'aucun toast n'apparaît
- Test E2E: simuler une erreur et vérifier qu'un toast d'erreur apparaît

**Risques:**
- Les utilisateurs pourraient ne pas savoir si le tag a été ajouté
- Nécessite un autre indicateur visuel de succès

---

### Story 5: Prévenir les Fermetures Accidentelles de Note

**ID:** GHOST-TAGS-5
**Title:** Ajouter une protection contre la fermeture accidentelle lors de l'interaction avec les tags
**Priority:** Must Have
**Estimation:** 2h
**Type:** Bug Fix

**En tant que:** utilisateur
**Je veux:** que ma note ne se ferme pas accidentellement quand j'interagis avec les tags
**Afin que:** je ne perde pas mon travail

**Critères d'Acceptation:**
1. **Given** une note ouverte en cours d'édition
2. **When** j'interagis avec n'importe quel élément de l'UI (tags, boutons, etc.)
3. **Then** la note ne se ferme PAS sauf si je clique explicitement sur:
   - Le bouton "Close" / "X"
   - Le bouton "Add" (après création)
   - La touche Escape
4. **Given** un clic sur un tag fantôme
5. **When** le clic se produit
6. **Then** l'événement est complètement isolé et ne propage JAMAIS à un gestionnaire de fermeture
7. **And** un `e.preventDefault()` supplémentaire est ajouté sur tous les boutons interactifs dans la note

**Fichiers à Modifier:**
- `keep-notes/components/note-input.tsx` - Vérifier tous les gestionnaires d'événements
- `keep-notes/components/note-editor.tsx` - Vérifier tous les gestionnaires d'événements
- `keep-notes/components/ghost-tags.tsx` - Renforcer la prévention de propagation

**Tests Nécessaires:**
- Test E2E complet: parcourir tous les éléments interactifs et vérifier que la note reste ouverte
- Test régression: s'assurer que les boutons de fermeture fonctionnent toujours

**Risques:**
- Pourrait casser d'autres fonctionnalités de clic
- Nécessite une revue complète de tous les événements

---

### Story 6: Mode "Silencieux" pour les Tags Fantômes

**ID:** GHOST-TAGS-6
**Title:** Ajouter une option pour désactiver les toasts de succès pour les tags
**Priority:** Could Have
**Estimation:** 2h
**Type:** Feature Enhancement

**En tant que:** utilisateur
**Je veux:** pouvoir choisir de ne pas voir les toasts quand j'ajoute des tags
**Afin que:** je ne sois pas interrompu dans mon workflow

**Critères d'Acceptation:**
1. **Given** un paramètre utilisateur "Show toast for tag actions"
2. **When** ce paramètre est désactivé
3. **Then** aucun toast n'apparaît quand j'ajoute un tag (succès ou erreur)
4. **And** un indicateur visuel subtil remplace le toast
5. **Given** le paramètre activé (défaut)
6. **When** j'ajoute un tag
7. **Then** le comportement actuel est conservé (toast visible)
8. **And** ce paramètre est configurable dans les paramètres utilisateur

**Fichiers à Modifier:**
- `keep-notes/lib/config.ts` - Ajouter `SHOW_TAG_TOASTS` dans SystemConfig
- `keep-notes/components/note-input.tsx` - Conditionner les toasts sur ce paramètre
- `keep-notes/components/note-editor.tsx` - Conditionner les toasts sur ce paramètre
- `keep-notes/app/(main)/settings/page.tsx` - Ajouter l'option dans les paramètres

**Tests Nécessaires:**
- Test E2E: désactiver l'option et vérifier qu'aucun toast n'apparaît
- Test E2E: activer l'option et vérifier que les toasts apparaissent
- Test unitaire: vérifier la logique de condition

**Risques:**
- Complexité supplémentaire dans la configuration
- Pourrait créer de la confusion si mal documenté

---

### Story 7: Tests E2E pour le Workflow Complet des Tags Fantômes

**ID:** GHOST-TAGS-7
**Title:** Créer une suite de tests E2E pour valider le workflow des tags fantômes
**Priority:** Should Have
**Estimation:** 4h
**Type:** QA

**En tant que:** QA / Développeur
**Je veux:** des tests E2E automatisés pour valider que le bug ne revient pas
**Afin que:** nous ayons confiance dans les corrections apportées

**Critères d'Acceptation:**
1. **Given** une suite de tests E2E pour les tags fantômes
2. **When** les tests sont exécutés
3. **Then** ils couvrent tous les scénarios suivants:
   - Création de note + ajout de tag fantôme
   - Édition de note existante + ajout de tag fantôme
   - Ajout multiple de tags fantômes
   - Rejet de tags fantômes
   - Échec de l'API lors de l'ajout
   - Interaction avec d'autres éléments UI simultanément
4. **And** chaque scénario a des assertions claires
5. **And** les tests sont documentés pour maintenance future

**Tests à Créer:**

```typescript
// keep-notes/tests/ghost-tags-workflow.spec.ts

test('should add ghost tag without closing note (note-input)', async ({ page }) => {
  // 1. Navigate to app
  // 2. Click on note input
  // 3. Type content that triggers AI
  // 4. Wait for ghost tags
  // 5. Click on ghost tag
  // 6. Assert: note is still open
  // 7. Assert: tag is in selected labels
  // 8. Assert: no toast interruption (or minimal)
})

test('should add ghost tag without closing note (note-editor)', async ({ page }) => {
  // Similar for note-editor
})

test('should handle multiple ghost tag clicks', async ({ page }) => {
  // Test adding multiple ghost tags in sequence
})

test('should dismiss ghost tag without closing note', async ({ page }) => {
  // Test clicking X to dismiss
})

test('should handle API error gracefully when adding ghost tag', async ({ page }) => {
  // Mock API error
  // Verify rollback happens
  // Verify error toast appears
})
```

**Fichiers à Modifier:**
- `keep-notes/tests/ghost-tags-workflow.spec.ts` - Nouveau fichier de tests
- `keep-notes/playwright.config.ts` - Configuration si nécessaire

**Tests Nécessaires:**
- Exécuter les tests après correction
- S'assurer qu'ils passent tous
- Les intégrer au CI/CD

**Risques:**
- Les tests E2E peuvent être "flaky" (instables)
- Nécessite une maintenance continue

---

### Story 8: Documentation et Guide d'Utilisation des Tags Fantômes

**ID:** GHOST-TAGS-8
**Title:** Documenter le comportement attendu des tags fantômes pour éviter les futures régressions
**Priority:** Could Have
**Estimation:** 2h
**Type:** Documentation

**En tant que:** développeur
**Je veux:** une documentation claire sur le fonctionnement des tags fantômes
**Afin que:** les futurs développements respectent ce comportement

**Critères d'Acceptation:**
1. **Given** une documentation du système de tags fantômes
2. **When** un développeur lit la documentation
3. **Then** il comprend:
   - Comment les tags fantômes sont générés par l'IA
   - Comment l'utilisateur interagit avec eux
   - Ce qui se passe quand un tag est ajouté (optimistic update)
   - Comment les erreurs sont gérées
   - Pourquoi la note ne doit pas se fermer
4. **And** la documentation inclut des diagrammes de séquence
5. **And** elle est située dans `docs/ghost-tags-behavior.md`
6. **And** elle est référencée dans le README principal

**Contenu de la Documentation:**

```markdown
# Ghost Tags Behavior

## Overview
Les tags fantômes sont des suggestions de tags générées par l'IA...

## User Flow
1. User types content → AI analyzes
2. Ghost tags appear with sparkle icon
3. User can:
   - Click tag body to ADD
   - Click X to DISMISS
4. When added:
   - Optimistic update (immediate)
   - API call in background
   - Visual feedback (checkmark)
   - NOTE STAYS OPEN

## Technical Implementation
- Event propagation is prevented
- Optimistic updates used
- Toast only for errors

## Critical Rules
- NEVER close note on tag interaction
- ALWAYS use optimistic updates
- ALWAYS prevent event propagation
```

**Fichiers à Modifier:**
- `docs/ghost-tags-behavior.md` - Nouveau fichier de documentation
- `README.md` - Ajouter une référence

**Tests Nécessaires:**
- Revue de la documentation par l'équipe
- Vérifier que tout est clair

**Risques:**
- Documentation peut devenir obsolète
- Nécessite d'être maintenue à jour

---

## Dépendances Entre Stories

```
GHOST-TAGS-1 (Prévenir fermeture) ← CRITIQUE
    ↓
GHOST-TAGS-2 (Optimistic update) ← CRITIQUE
    ↓
GHOST-TAGS-3 (Feedback visuel) ← AMÉLIORATION UX
    ↓
GHOST-TAGS-4 (Retirer toast) ← POLISH
    ↓
GHOST-TAGS-5 (Protection fermeture) ← SÉCURITÉ
    ↓
GHOST-TAGS-7 (Tests E2E) ← VALIDATION
    ↓
GHOST-TAGS-6 (Mode silencieux) ← OPTIONNEL
    ↓
GHOST-TAGS-8 (Documentation) ← CONNAISSANCE
```

**Ordre Recommandé:**

**Sprint 1** (Correction du bug critique - 1-2 jours):
1. GHOST-TAGS-1: Prévenir la fermeture (URGENT)
2. GHOST-TAGS-2: Optimistic update (URGENT)
3. GHOST-TAGS-5: Protection fermeture accidentelle (IMPORTANT)

**Sprint 2** (Améliorations UX - 1 jour):
4. GHOST-TAGS-3: Feedback visuel
5. GHOST-TAGS-4: Retirer toast

**Sprint 3** (Qualité & Documentation - 1 jour):
6. GHOST-TAGS-7: Tests E2E
7. GHOST-TAGS-8: Documentation

**Optionnel** (Plus tard):
8. GHOST-TAGS-6: Mode silencieux

---

## Métriques de Succès

### Avant/Après

| Métrique | Avant (Bug) | Après (Corrigé) | Comment Mesurer |
|----------|-------------|----------------|-----------------|
| Fermeture intempestive | 100% (bug systématique) | 0% | Tests E2E Story 7 |
| Toasts intrusifs | Oui (gênant) | Non (ou optionnel) | Tests E2E |
| Tags ajoutés avec succès | Variable | 100% (optimistic) | Tests E2E |
| Satisfaction utilisateur | 1/5 (très frustrant) | 4/5+ | Feedback post-fix |

### Objectifs

- ✅ **0 fermeture accidentelle** lors de l'ajout d'un tag fantôme
- ⚡ **Ajout instantané** du tag (< 100ms ressenti)
- 🎯 **Pas d'interruption** du workflow d'édition
- 🔒 **Fiabilité 100%** sur l'ajout de tag

---

## Solutions Techniques Proposées

### Solution 1: Renforcer la Prévention de Propagation

Dans `ghost-tags.tsx`, ajouter:

```typescript
<button
  type="button"
  onClick={(e) => {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation(); // ← AJOUTER
    onSelectTag(suggestion.tag);
  }}
  onMouseDown={(e) => {
    // ← AJOUTER: prévenir dès le mouseDown
    e.preventDefault();
    e.stopPropagation();
  }}
  className={...}
>
```

### Solution 2: Isoler le Conteneur Parent

Dans `note-input.tsx` et `note-editor.tsx`, vérifier que le Card n'a pas de onClick:

```typescript
<Card
  onClick={(e) => {
    // ← S'ASSURER qu'il n'y a PAS de onClick ici
    // ou qu'il prévient bien la propagation
  }}
>
```

### Solution 3: Optimistic Update Pattern

```typescript
const handleSelectGhostTag = async (tag: string) => {
  // 1. Optimistic update IMMÉDIAT
  setSelectedLabels(prev => [...prev, tag])

  // 2. Appel API en arrière-plan
  try {
    const globalExists = globalLabels.some(l => l.toLowerCase() === tag.toLowerCase())
    if (!globalExists) {
      await addLabel(tag)
    }
    // PAS de toast ici pour éviter l'interruption
  } catch (error) {
    // Rollback en cas d'erreur seulement
    setSelectedLabels(prev => prev.filter(l => l !== tag))
    addToast(`Failed to add tag: ${error.message}`, 'error')
  }
}
```

---

## Tests de Validation

### Scénario de Test Principal

```typescript
// Test manuel à exécuter après correction:

1. Ouvrir l'application Memento
2. Cliquer sur la zone "Take a note..."
3. Taper: "How to implement authentication in Next.js"
4. Attendre 2-3 secondes (apparition des tags fantômes)
5. Cliquer sur un tag fantôme (ex: "nextjs", "auth")
6. ✅ VÉRIFIER: La note reste OUVERTE
7. ✅ VÉRIFIER: Le tag apparaît dans les tags sélectionnés
8. ✅ VÉRIFIER: Pas de toast intrusif (ou discret)
9. ✅ VÉRIFIER: On peut continuer à éditer
10. Cliquer sur "Add" pour créer la note
11. ✅ VÉRIFIER: La note est créée avec le tag
```

---

## Fichers Critiques pour l'Implémentation

Les 5 fichiers les plus importants à modifier:

1. **`keep-notes/components/ghost-tags.tsx`** - Composant des tags fantômes (gestion événements)
2. **`keep-notes/components/note-input.tsx`** - Note input (handleSelectGhostTag)
3. **`keep-notes/components/note-editor.tsx`** - Note editor (handleSelectGhostTag)
4. **`keep-notes/context/LabelContext.tsx`** - Gestion asynchrone des labels
5. **`keep-notes/tests/ghost-tags-workflow.spec.ts`** - Tests E2E à créer

---

## Risques et Mitigations

### Risques Techniques

| Risque | Probabilité | Impact | Mitigation |
|--------|-------------|--------|------------|
| La correction casse d'autres fonctionnalités de clic | Moyenne | Moyen | Tests de régression complets |
| L'optimistic update crée des incohérences | Faible | Moyen | Gestion d'erreur avec rollback |
| Le bug revient avec une future mise à jour | Moyenne | Élevé | Tests E2E automatisés + documentation |

### Risques UX

| Risque | Probabilité | Impact | Mitigation |
|--------|-------------|--------|------------|
| Retirer le toast rend l'action invisible | Moyenne | Faible | Ajouter indicateur visuel sur le tag |
- Utilisateurs pourraient ne pas savoir si le tag a été ajouté
- Nécessite un autre indicateur visuel de succès
| Trop d'indicateurs visuels créent du bruit | Faible | Faible | Design minimaliste et subtil |

---

## Next Steps Immédiats

1. **Corriger le bug critique (Stories 1 & 2)** - Priorité MAXIMALE
2. **Tester manuellement** la correction sur plusieurs scénarios
3. **Créer les tests E2E** (Story 7) pour éviter la régression
4. **Déployer en production** dès que validé
5. **Documenter** le comportement (Story 8)

---

**Document Version:** 1.0
**Last Updated:** 2026-01-09
**Severity:** High (Bug critique UX)
**Target Fix:** Sprint 1 (1-2 jours)

---

## Annexes

### A. Capture d'écran du Bug

(Note: Ajouter une capture d'écran montrant le problème)

### B. Logs Console

(Note: Ajouter les logs console pertinents si disponibles)

### C. Environnement de Test

- Navigateur: Chrome / Firefox / Safari
- OS: Windows / Mac / Linux
- Version Memento: 0.2.0
