# Popup d'Information sur la Confidentialité

Documentation du popup d'information sur la confidentialité et le suivi affiché aux utilisateurs.

## 📍 Localisation

Le popup s'affiche **en bas à gauche** de l'écran sur toutes les pages de l'Espace Paie.

## 🎯 Fonctionnement

### Affichage
- Le popup apparaît **1,2 seconde** après le chargement de la page
- Il s'affiche avec une animation fluide (spring animation)
- Il est **non intrusif** et peut être fermé facilement

### Persistance
Le popup utilise le **localStorage** du navigateur pour se souvenir que l'utilisateur l'a déjà vu :
- **Clé de stockage :** `odentas_info_suivi_ack_v1`
- **Valeur :** `"1"` quand l'utilisateur a cliqué sur "J'ai compris"
- Le popup ne s'affiche **qu'une seule fois** par navigateur

### Réaffichage
Pour forcer le réaffichage du popup (utile pour les tests ou après une mise à jour) :
1. Ouvrir la console du navigateur (F12)
2. Exécuter : `localStorage.removeItem('odentas_info_suivi_ack_v1')`
3. Rafraîchir la page

Ou changer la version dans le code : `storageKey = "odentas_info_suivi_ack_v2"`

## 📝 Contenu

### Message principal
```
Transparence & confidentialité

L'Espace Paie Odentas utilise des cookies essentiels pour votre authentification 
et votre sécurité, ainsi qu'un outil d'analyse (PostHog) pour améliorer 
nos services. Vos données sont hébergées en France 🇫🇷 et ne sont jamais 
revendues. En utilisant l'Espace Paie, vous acceptez notre Politique de 
Confidentialité.
```

### Actions disponibles
1. **"J'ai compris"** - Ferme le popup et enregistre l'acceptation
2. **"En savoir plus"** - Ouvre la politique de confidentialité dans un nouvel onglet
3. **Bouton X** - Ferme le popup sans enregistrer (il réapparaîtra au prochain chargement)

## 🎨 Design

### Style visuel
- **Position :** Fixed, bas gauche (left-4 bottom-4)
- **Taille :** 384px max-width (responsive sur mobile)
- **Arrière-plan :** Gradient blanc vers gris avec backdrop blur
- **Bordure :** Border slate-200
- **Ombre :** Shadow-lg
- **Icône :** ShieldCheck en bleu (sky-700)

### Animation
- **Type :** Spring animation
- **Stiffness :** 380
- **Damping :** 28
- **Effet :** Apparition en fondu avec légère translation verticale et scale

### Responsive
- **Desktop :** 384px de largeur
- **Mobile :** 92vw (92% de la largeur de l'écran)
- S'adapte automatiquement à la taille de l'écran

## 🔧 Intégration technique

### Fichiers
- **Composant :** `components/PopupInfoSuivi.tsx`
- **Intégration :** `app/layout.tsx` (layout racine)

### Dépendances
- **framer-motion** - Pour les animations fluides
- **lucide-react** - Pour les icônes (ShieldCheck, X)
- **React hooks** - useState, useEffect

### Props
```typescript
{
  policyUrl?: string;      // URL de la politique de confidentialité
                           // Par défaut: "/politique-confidentialite"
  
  storageKey?: string;     // Clé localStorage pour la persistance
                           // Par défaut: "odentas_info_suivi_ack_v1"
}
```

### Utilisation
```tsx
import PopupInfoSuivi from "@/components/PopupInfoSuivi";

// Dans le layout ou une page
<PopupInfoSuivi policyUrl="/politique-confidentialite" />
```

## 🔒 Conformité RGPD

Le popup informe les utilisateurs de :
1. ✅ L'utilisation de cookies essentiels (authentification, sécurité)
2. ✅ L'utilisation d'un outil d'analyse (PostHog)
3. ✅ L'hébergement des données en France 🇫🇷
4. ✅ La non-revente des données personnelles
5. ✅ Le lien vers la politique de confidentialité complète

## 🎯 Bonnes pratiques

### UX
- **Non bloquant :** L'utilisateur peut continuer à naviguer
- **Discret :** Petit format en bas à gauche
- **Clair :** Message court et compréhensible
- **Actions simples :** 2 boutons principaux

### Accessibilité
- **role="dialog"** - Indique qu'il s'agit d'une boîte de dialogue
- **aria-live="polite"** - Annonce le contenu aux lecteurs d'écran
- **aria-label** - Décrit le contenu du popup
- **Focus trap** - Non implémenté car non bloquant

### Performance
- **Lazy loading :** Le popup ne se charge qu'après 1,2 seconde
- **Lightweight :** Code minimal et optimisé
- **Exit animation :** Animation de sortie fluide

## 🧪 Tests

### Test manuel
1. Ouvrir l'Espace Paie en navigation privée
2. Vérifier que le popup apparaît après 1,2 seconde
3. Cliquer sur "J'ai compris"
4. Rafraîchir la page
5. Vérifier que le popup ne réapparaît **pas**

### Test responsive
1. Ouvrir en mode mobile (DevTools)
2. Vérifier que le popup s'adapte à la largeur
3. Vérifier la lisibilité sur petit écran

### Test accessibilité
1. Tester avec un lecteur d'écran
2. Naviguer au clavier (Tab, Enter)
3. Vérifier les labels ARIA

## 📊 Statistiques d'utilisation

Pour suivre l'utilisation du popup avec PostHog :
- **Événement d'affichage :** Peut être ajouté dans useEffect
- **Événement de clic "J'ai compris" :** Peut être ajouté dans acknowledge()
- **Événement de fermeture (X) :** Peut être ajouté dans setOpen(false)

## 🔄 Mises à jour futures

### Possibles améliorations
1. **Multi-langues** - Ajouter support i18n
2. **Personnalisation** - Adapter le message selon le rôle (staff/client)
3. **Analytics** - Tracker les interactions avec PostHog
4. **A/B testing** - Tester différentes variantes du message
5. **Animations avancées** - Ajouter des micro-interactions

### Versions
- **v1** (actuelle) - Version initiale avec message de confidentialité
- **v2** (future) - Ajout d'analytics et personnalisation

## 🐛 Dépannage

### Le popup ne s'affiche pas
1. Vérifier que framer-motion est installé : `npm list framer-motion`
2. Vérifier la console pour les erreurs JS
3. Vérifier le localStorage : `localStorage.getItem('odentas_info_suivi_ack_v1')`

### Le popup réapparaît alors qu'il a été fermé
1. L'utilisateur a peut-être cliqué sur X au lieu de "J'ai compris"
2. Le localStorage a été effacé (navigation privée, clear cookies)
3. Vérifier que la clé de stockage n'a pas changé

**⚠️ Bug corrigé (décembre 2024)** : Le popup réapparaissait à chaque déconnexion/reconnexion car le `LogoutButton` appelait `localStorage.clear()`, ce qui supprimait la clé `odentas_info_suivi_ack_v1`. Solution : sauvegarder et restaurer cette clé lors du nettoyage du localStorage.

### Animation saccadée
1. Vérifier la version de framer-motion
2. Désactiver les extensions de navigateur qui peuvent bloquer les animations
3. Tester sur un autre navigateur

## 📚 Ressources

- [Documentation framer-motion](https://www.framer.com/motion/)
- [Lucide Icons](https://lucide.dev/)
- [RGPD - Cookies et traceurs](https://www.cnil.fr/fr/cookies-et-traceurs-que-dit-la-loi)
- [Accessibilité - Dialog ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)