Mission : un catalogue conçu desktop-first qui s'effondre en cascade

Contexte

Sur catalogue.css, le style de base fixe grid-template-columns: repeat(4, 1fr); directement sur .grille, puis une unique règle @media (max-width: 480px) { .grille { grid-template-columns: 1fr; } } tente de rattraper le mobile. Entre 481px et 1023px (tablette), la grille reste bloquée à 4 colonnes écrasées, illisibles. Par ailleurs, un bouton "Ajouter au panier" ne s'affiche qu'au survol de la carte produit (opacity: 0 par défaut, opacity: 1 au :hover), le rendant invisible sur tablette tactile.