before claude

docs/issue-42-ui-readability.md

@@ -0,0 +1,50 @@
+## Objectif
+Améliorer la clarté et la lisibilité de l’interface (catalogue, filtres, détails produit) **sans modifier la palette de couleurs existante**.
+
+## Contraintes strictes
+- Interdit : changement de couleurs (fond, accent, badges, etc.)
+- Autorisé : typographie, espacements, hiérarchie, mise en page, libellés, tooltips, états, comportements hover/focus, clamp.
+
+---
+
+## Tâches
+
+### Cartes produit (catalogue)
+- [ ] Titre : line-clamp 2 lignes + ellipse
+- [ ] Tooltip titre complet (survol + clavier)
+- [ ] Prix : taille 18–20px, bold (prix = focal n°1)
+- [ ] Delta : format standard ▲/▼ + % (sinon afficher —)
+- [ ] Statuts : remplacer `unknown/n/a` par `En stock / Rupture / Inconnu / Erreur scrape`
+- [ ] Badges statuts homogènes (sans changer couleurs)
+- [ ] Actions : 1 action primaire visible, secondaires au hover ou menu “...”
+- [ ] Tooltips obligatoires sur toutes les icônes + aria-label
+
+### Panneau Détails (colonne droite)
+- [ ] Découper en sections : Résumé / Prix / Historique / Source / Actions
+- [ ] Prix dominant visuellement + espacement vertical accru
+- [ ] URL cliquable + bouton copier + ASIN visible
+- [ ] Actions regroupées en bas
+
+### Filtres (colonne gauche)
+- [ ] Afficher compteur `X affichés / Y`
+- [ ] Chips filtres actifs (cliquables pour retirer)
+- [ ] Bouton Reset filtres toujours visible
+- [ ] Labels cohérents + placeholders explicites
+
+### Comparaison
+- [ ] Message guidage : “Sélectionnez 2 à 4 produits…”
+- [ ] Afficher compteur de sélection (`2 sélectionnés`, etc.)
+
+### Accessibilité
+- [ ] Focus clavier visible
+- [ ] Navigation clavier : Tab sur cartes, Enter ouvre détails
+- [ ] Icônes avec aria-label + tooltips accessibles
+
+---
+
+## Critères d’acceptation
+- Prix clairement dominant sur cartes et détails
+- Titres non envahissants (2 lignes max)
+- Statuts compréhensibles (plus de unknown/n/a)
+- Filtres : X/Y + chips + reset
+- Aucune couleur modifiée