/* =========================================
   PAGE: BOUTIQUE
   SECTIONS:
   1) Section + Titre
   2) Grille produits
   3) Cartes produit
   4) Paiements
   5) Responsive
   NOTE: Copié à l’identique depuis style.css
   ========================================= */

/* 1) Section + Titre */
.boutique-page .portfolio-section{
  max-width:1200px; margin:0 auto;
  padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 24px);
}
.boutique-page .portfolio-title{
  text-align:center; font-size:clamp(22px, 4vw, 34px); margin-bottom:2rem; letter-spacing:-.01em;
}

/* 2) Grille produits */
.boutique-page .portfolio-grid{
  display:grid; gap:clamp(16px, 3vw, 28px);
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width: 992px){
  .boutique-page .portfolio-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
  .boutique-page .portfolio-grid{ grid-template-columns: 1fr; }
}

/* 3) Cartes produit */
.boutique-page .portfolio-item{
  background:#fff; border-radius:14px; padding:18px; box-shadow:0 8px 26px rgba(0,0,0,.08);
  text-align:center; transition: transform .2s ease, box-shadow .2s ease;
}
.boutique-page .portfolio-item:hover{
  transform: translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.boutique-page .portfolio-item img{
  width:100%; height:auto; border-radius:10px; margin-bottom:1rem; display:block; object-fit:cover;
}
.boutique-page .art-title{ font-size:1.15rem; font-weight:600; margin-bottom:.5rem; }
.boutique-page p{ margin:.4rem 0; }

/* 4) Paiements */
.boutique-page .payment-options{
  margin-top:1rem; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
}
.boutique-page .payment-options .insta-btn{ background: #b30000; }
.boutique-page .payment-options .insta-btn:hover{ background: #930000; }