# Documentation du Carrousel des Offres

## Fonctionnalités implémentées

### Structure HTML
- Structure sémantique avec attributs ARIA pour l'accessibilité
- Fallback en mode no-js pour les utilisateurs sans JavaScript
- Contrôles de navigation accessibles (boutons précédent/suivant et pagination)

### CSS
- Styles de base dans `offres.css`
- Styles de compatibilité cross-browser dans `browser-compatibility.css`
- Fallback CSS dans `offres-fallback.css` pour fonctionnement sans JavaScript
- Media queries pour adaptation responsive sur différentes tailles d'écran
- Préfixes vendeurs pour compatibilité maximale (-webkit, -moz, -ms)

### JavaScript
- Classe `OffresCarousel` dans `offres-carousel.js`
- Détection automatique du navigateur pour adaptations spécifiques
- Support complet du clavier pour l'accessibilité
- Annonces pour lecteurs d'écran via ARIA live regions
- Gestion du touch/swipe sur appareils mobiles
- Auto-play avec pause au survol

## Guide de maintenance

### Ajout d'une nouvelle offre
1. Ajouter un nouveau bloc `.offer-card` dans le HTML
2. S'assurer que la structure interne est identique aux autres cartes
3. Le carrousel s'adaptera automatiquement

### Modification du comportement
- Nombre d'éléments par page : modifier la méthode `updateItemsPerPage()`
- Vitesse de défilement : modifier les valeurs de transition dans `.carousel-track`
- Intervalle d'auto-play : modifier la valeur dans `startAutoPlay()`

### Tests recommandés
- Tester sur Chrome, Firefox, Safari, Edge
- Vérifier le comportement responsive sur différentes tailles d'écran
- Tester avec JavaScript désactivé
- Vérifier l'accessibilité avec un lecteur d'écran
- Tester la navigation au clavier

## Problèmes connus et solutions

### Problème : Affichage incorrect sur IE11
Solution : Des styles spécifiques ont été ajoutés pour IE dans `browser-compatibility.css` et la détection de navigateur réduit automatiquement le nombre d'éléments affichés.

### Problème : Défilement saccadé sur certains navigateurs
Solution : Utilisation de `will-change: transform` et d'une courbe d'accélération personnalisée pour fluidifier les animations.

### Problème : Non-fonctionnement sans JavaScript
Solution : Le mode fallback affiche toutes les cartes en grille responsive grâce à la classe `.no-js`.

## Améliorations futures possibles
- Ajout d'animations plus élaborées lors des transitions
- Préchargement des images pour éviter les saccades
- Lazy loading des cartes hors-écran pour optimiser les performances
- Tests automatisés pour vérifier la compatibilité cross-browser