/* ============================================================
   boutique.css — Page Boutique CTT Brunoy v2
   Reprend l'identité graphique des autres pages (creneaux.css) :
   intro centrée avec titre calligraphié + barre, cartes blanches
   avec ombre douce, palette/typo issues de global.css.
   ============================================================ */

/* ============================================================
   FOND DE PAGE (vagues, identique aux autres pages)
   Si le nom de fichier diffère chez toi, remplace juste le chemin
   ci-dessous — c'est la seule ligne à changer.
   ============================================================ */
.page-boutique {
  background-image     : url('../Image/Fond/Boutique.png');
  background-repeat     : no-repeat;
  background-size       : cover;
  background-position   : top center;
}

/* ============================================================
   1. INTRODUCTION (identique à creneaux.css)
   ============================================================ */
/* .boutique-intro, .boutique-titre, .boutique-titre::after et .boutique-texte : voir global.css §10 (composants partagés) */

/* ============================================================
   2. GRILLE DES ARTICLES
   ============================================================ */
.boutique-grille {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap                  : var(--espace-md);
  max-width            : var(--largeur-max);
  width                : 90%;
  margin               : 0 auto var(--espace-xl);
  align-items          : stretch;
}

.boutique-carte {
  background   : var(--blanc);
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
  box-shadow   : var(--ombre-carte);
  padding      : var(--espace-md);
  display      : flex;
  flex-direction: column;
  align-items  : center;
  text-align   : center;
  height       : 100%;
  transition   : transform var(--transition), box-shadow var(--transition);
}

.boutique-carte:hover {
  transform : translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ---- Visuel ---- */
.boutique-visuel {
  width        : 100%;
  max-width    : 280px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  margin-bottom: var(--espace-sm);
  overflow     : hidden;
}

.boutique-visuel img {
  width     : 100%;
  height    : auto;
  max-height: 360px;
  object-fit: contain;
}

/* ---- Miniatures ---- */
.boutique-miniatures {
  display: flex;
  gap    : var(--espace-xs);
  margin-bottom: var(--espace-md);
}

.boutique-miniature {
  width        : 48px;
  height       : 48px;
  padding      : 0;
  border       : 2px solid var(--gris-bordure);
  border-radius: var(--rayon-sm);
  background   : var(--gris-clair);
  cursor       : pointer;
  overflow     : hidden;
  transition   : border-color var(--transition);
}

.boutique-miniature img {
  width     : 100%;
  height    : 100%;
  object-fit: contain;
}

.boutique-miniature:hover,
.boutique-miniature:focus-visible {
  border-color: var(--bleu-nav-clair);
}

.boutique-miniature.is-active {
  border-color: var(--bleu-bouton);
}

/* ---- Infos ---- */
.boutique-infos {
  width: 100%;
}

.boutique-nom {
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : var(--taille-h3);
  color        : var(--bleu-titre);
  margin-bottom: 4px;
}

.boutique-prix {
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : 1.3rem;
  color        : var(--bleu-bouton);
  margin-bottom: var(--espace-sm);
}

.boutique-soustitre {
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : var(--taille-petit);
  color        : var(--noir-texte);
  margin-bottom: var(--espace-xs);
}

/* ---- Tailles (chips) ---- */
.boutique-tailles {
  display       : flex;
  flex-wrap     : wrap;
  justify-content: center;
  gap           : var(--espace-xs);
  margin-bottom : var(--espace-sm);
}

.boutique-tailles li {
  font-family  : var(--font-texte);
  font-size    : var(--taille-petit);
  padding      : 4px 12px;
  border       : 1px solid var(--gris-bordure);
  border-radius: 99px;
  color        : var(--bleu-titre);
  background   : var(--gris-clair);
}

/* ---- Fiche technique (tableau) ---- */
.boutique-fiche {
  width          : 100%;
  border-collapse: collapse;
  margin         : 0 0 var(--espace-sm);
  font-family    : var(--font-texte);
  font-size      : var(--taille-petit);
}

.boutique-fiche tr {
  border-bottom: 1px solid var(--gris-bordure);
}

.boutique-fiche tr:last-child {
  border-bottom: none;
}

.boutique-fiche th,
.boutique-fiche td {
  text-align: left;
  padding   : 8px 4px;
}

.boutique-fiche th {
  width      : 40%;
  font-family: var(--font-sous-titre);
  font-weight: 600;
  color      : var(--bleu-titre);
}

.boutique-fiche td {
  color: var(--gris-texte);
}

/* ---- Bloc texte libre (paragraphe, plusieurs possibles par carte) ---- */
.boutique-bloc-texte {
  font-family: var(--font-texte);
  font-size  : var(--taille-petit);
  font-style : italic;
  color      : var(--gris-texte);
  line-height: 1.5;
  margin-top : var(--espace-sm);
}

/* ============================================================
   3. BLOC PAIEMENT & RETRAIT
   ============================================================ */
.boutique-paiement {
  max-width    : 1000px;
  width        : 90%;
  margin       : 0 auto var(--espace-xl);
  padding      : var(--espace-md) var(--espace-lg);
  background   : var(--gris-clair);
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
}

.boutique-paiement-titre {
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : var(--taille-h3);
  color        : var(--bleu-titre);
  margin-bottom: var(--espace-sm);
}

.boutique-paiement-soustitre {
  font-family: var(--font-sous-titre);
  font-weight: 600;
  font-size  : var(--taille-texte);
  color      : var(--bleu-titre);
  margin     : var(--espace-md) 0 var(--espace-xs);
}

.boutique-paiement p {
  font-family: var(--font-texte);
  font-size  : var(--taille-petit);
  line-height: 1.6;
  color      : var(--gris-texte);
  margin-bottom: var(--espace-xs);
}

.boutique-paiement-liste {
  list-style: disc;
  padding-left: var(--espace-md);
  margin: var(--espace-xs) 0;
}

.boutique-paiement-liste li {
  font-family  : var(--font-texte);
  font-size    : var(--taille-petit);
  color        : var(--gris-texte);
  margin-bottom: var(--espace-xs);
}

.boutique-paiement-liste a {
  color      : var(--bleu-bouton);
  font-weight: 600;
  text-decoration: underline;
}

.boutique-paiement-liste a:hover,
.boutique-paiement-liste a:focus-visible {
  color: var(--bleu-bouton-hover);
}

/* ============================================================
   4. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .boutique-intro {
    max-width: 92%;
  }
}

@media (max-width: 600px) {
  .boutique-grille {
    grid-template-columns: 1fr;
  }

  .boutique-paiement {
    padding: var(--espace-md);
  }
}