/* === CSS complément boutique (léger) === */
main.boutique { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card { display:block; text-decoration:none; color:#111; border:1px solid #e2e2e2; border-radius:14px; overflow:hidden; background:#fff; }
.thumb { aspect-ratio: 4/3; background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.meta { padding:.75rem .9rem 1rem; }
/*.meta h2 { font-size:1rem; margin:0 0 .4rem;  }*/
/*.price { font-weight:700; }*/
main.product { max-width:900px; margin:0 auto; padding: 1.25rem; }
.title { font-family: "Advent Pro", sans-serif; display:flex; align-items: baseline; gap:.75rem; }
/*.title h1 { margin:.5rem 0; font-size:1.6rem; }*/
/*.title .price { font-size:1.1rem; font-weight:700; opacity:.9; }*/
.hero { display:grid; grid-template-columns: 1fr; gap:1rem; }
.hero img { width:100%; height:auto; border-radius:14px; display:block; }
.hero .price {font-weight:700;font-size:1.75em;}
@media (min-width: 800px) { .hero { grid-template-columns: 1.2fr .8fr; } }
.back { display:inline-block; margin:.5rem 0 1rem; }
/* — Harmonisation typographique avec l'accueil — */
.grid .card,
main.product {
  font-family: "Roboto", sans-serif; /* texte par défaut */
  color: #111;
}