Mission

Mission : une carte produit qui refuse de s'adapter à la sidebar

Diagnostiquer pourquoi une media query ne suffit pas pour un composant réutilisable, puis mettre en place une container query fonctionnelle.

Contexte

Sur catalogue.css, .carte-produit utilise @media (min-width: 400px) { .carte-produit { flex-direction: row; } } pour passer en ligne quand il y a de la place. Le composant s'affiche bien en ligne dans la zone principale (900px de large), mais reste bêtement en ligne dans la sidebar "Produits similaires" de 280px de large, où il devrait rester en colonne — le viewport, lui, dépasse toujours 400px de large sur cet écran desktop.