/*
 * La page Boutique (template-boutique.php) : l'encart « Comment acheter ».
 * La grille des articles est habillée dans extensions/cnpr-boutique.css.
 */

/* =========================================================================
   BOUTIQUE (template-boutique.php + [cnpr_boutique])
   Les photos du club sont prises sur place (tables en bois, murs) : on ne
   les détoure pas, on les CADRE toutes pareil — carré, recadrage centré — et
   on laisse le prix, posé dessus en pastille, faire l'unité de la grille.
   ========================================================================= */
.boutique-achat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titre bouton" "points bouton";
  gap: 14px 32px;
  align-items: center;
  margin: 0 0 44px;
  padding: 26px 30px;
  border-radius: 24px;
  background: #fff8e6;
  border: 2px solid #ffe3a1;
}
.boutique-achat h2 { grid-area: titre; margin: 0; font-size: 22px; }
.boutique-achat .btn { grid-area: bouton; }
.boutique-achat__points {
  grid-area: points;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.boutique-achat__points strong { display: block; color: var(--soleil-marine); font-size: 16.5px; }
.boutique-achat__points span { display: block; margin-top: 2px; font-size: 15.5px; color: var(--soleil-gris); }

@media (max-width: 960px) {
  .boutique-achat { grid-template-columns: 1fr; grid-template-areas: "titre" "points" "bouton"; }
  .boutique-achat .btn { justify-self: start; }
}
@media (max-width: 640px) {
  .boutique-achat { padding: 22px 20px; }
  .boutique-achat__points { grid-template-columns: 1fr; gap: 12px; }
}