/* ================================================
   boutique.css — page Boutique
   Reconstruit d'après la prod (page #23, 03/10/2026) :
   grille 4 colonnes (écart 20/40), cartes centrées,
   titres var(--color-text-soft), boutons var(--color-wood) radius 28px.
   ================================================ */

.boutique-head { padding-block: var(--space-4) var(--space-1); text-align: center; }
.boutique-head h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--w-light);
  margin-bottom: 4px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* prod : grid-4 */
  column-gap: 20px;
  row-gap: 40px;
  max-width: 66rem;
  margin-inline: auto;
}
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .product-grid { grid-template-columns: 1fr; } }  /* prod : mobile-1 */

.product-card { text-align: center; }                      /* prod : align center */

.product-card-link { display: block; }

.product-thumb {
  aspect-ratio: 1 / 1;
  background: var(--color-card);
  border-radius: 20px;                                     /* kit prod : images */
  overflow: hidden;
  margin-bottom: var(--space-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: var(--w-display); color: var(--color-text);
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card:hover .product-thumb img { transform: scale(1.02); transition: transform .4s ease; }

.product-name {
  font-size: 1.4rem;
  font-weight: var(--w-light);
  color: var(--color-text-soft);                                          /* prod */
  margin-bottom: 2px;
}
.product-price { color: var(--color-text-soft); font-size: 1.1rem; margin-bottom: var(--space-2); }