scrap/docs/issue-42-ui-readability.md

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