/*
 * La boutique du club ([cnpr_boutique]) : son style par défaut.
 *
 * Une vitrine : chaque article est une photo carrée, son prix posé dessus en
 * pastille, son nom dessous. 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 c'est la pastille du prix qui fait l'unité de la
 * grille. Un clic ouvre les photos en grand (la visionneuse, en fin de
 * fichier).
 *
 * LE CONTRAT AVEC LE THÈME (docs/theme-et-extensions.md) :
 * - ce fichier ne lit QUE les jetons --cnpr-*, toujours avec une valeur de
 *   repli : sans thème qui les définit, la boutique reste propre, aux
 *   couleurs du logo ;
 * - ses sélecteurs restent bas (une classe, deux au plus) : une retouche du
 *   thème, chargée après, l'emporte à sélecteur égal ;
 * - la grille s'adapte à la largeur de SON conteneur (requêtes @container),
 *   pas à celle de l'écran. Seule la visionneuse, qui couvre l'écran entier,
 *   n'a pas de conteneur à lire.
 */

.cnpr-boutique {
  container-type: inline-size;
  color: var(--cnpr-couleur-texte, #16284f);
  font-family: var(--cnpr-police-texte, inherit);
  line-height: 1.6;
}
.cnpr-boutique *,
.cnpr-boutique *::before,
.cnpr-boutique *::after { box-sizing: border-box; }

/* L'en-tête (quand le shortcode reçoit un titre) : le titre à gauche, la
   règle de vente à droite, l'un sous l'autre quand la place manque. */
.cnpr-boutique__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.cnpr-boutique__header h2 {
  margin: 0;
  font-family: var(--cnpr-police-titre, inherit);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-boutique__header p { margin: 0; color: var(--cnpr-couleur-texte-doux, #4c5f80); }

/* Aucun article publié. */
.cnpr-boutique__empty {
  padding: 22px 24px;
  border-radius: var(--cnpr-rayon, 20px);
  background: var(--cnpr-fond-doux, #eaf7fd);
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
}

/* Les rayons (quand les articles en portent un) : un titre, une grille. La
   taille du titre suit la largeur de la boutique : 2,6 % de celle-ci, plus
   1,248 px, c'est au pixel près le 2,6vw d'avant, la boutique occupant la
   largeur de l'écran moins ses deux marges de 24 px. */
.cnpr-boutique__rayon + .cnpr-boutique__rayon { margin-top: 48px; }
.cnpr-boutique__rayon-titre {
  margin: 0 0 18px;
  font-family: var(--cnpr-police-titre, inherit);
  font-size: clamp(22px, 2.6cqi + 1.248px, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cnpr-couleur-titre, #1e3f94);
}

.cnpr-boutique__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
}

/* Une carte : pas de cadre, la photo fait la carte. Les déclarations « à
   zéro » sont voulues : l'ancien thème du club encadrait chaque carte (fond,
   bordure, hauteur minimale, bulle en ::after), et un thème qui garde ces
   règles doit voir la vitrine telle qu'elle est dessinée. */
.cnpr-boutique__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.cnpr-boutique__card::after { content: none; }
.cnpr-boutique__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--cnpr-rayon, 20px);
  overflow: hidden;
  background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-boutique__lightbox { display: block; width: 100%; height: 100%; }
/* `img` et non la classe seule : l'ancien thème fixait la hauteur des
   photos par `.cnpr-boutique__media img`, qu'une classe seule ne couvre pas. */
.cnpr-boutique__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--cnpr-couleur-accent, #009fe0) 12%, transparent);
  background: var(--cnpr-fond, #ffffff);
  transition: transform .25s ease;
}
.cnpr-boutique__lightbox:hover img { transform: scale(1.03); }

/* Un article sans photo : le nom du club à la place. */
.cnpr-boutique__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  border-radius: 0;
  background: color-mix(in srgb, var(--cnpr-couleur-accent, #009fe0) 12%, transparent);
  font-family: var(--cnpr-police-titre, inherit);
  font-weight: 700;
  color: var(--cnpr-couleur-accent-clair, #5bc5f2);
}

/* Le prix, en pastille sur la photo ; le nombre de photos, en bas à droite. */
.cnpr-boutique__price {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--cnpr-fond, #ffffff);
  color: var(--cnpr-couleur-titre, #1e3f94);
  font-family: var(--cnpr-police-titre, inherit);
  max-width: calc(100% - 24px);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cnpr-couleur-texte, #16284f) 12%, transparent);
  pointer-events: none;
}
.cnpr-boutique__nb {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cnpr-couleur-texte, #16284f) 72%, transparent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}

.cnpr-boutique__body { padding: 0 2px; }
.cnpr-boutique__body h3 {
  margin: 0;
  font-family: var(--cnpr-police-titre, inherit);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-boutique__description p {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
}

/* Conteneur moyen : trois articles par ligne. */
@container (max-width: 912px) {
  .cnpr-boutique__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Conteneur étroit : deux articles par ligne, comme toute vitrine sur
   téléphone — treize articles en un écran et demi au lieu de treize écrans. */
@container (max-width: 592px) {
  .cnpr-boutique__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .cnpr-boutique__price { left: 8px; top: 8px; padding: 4px 10px; font-size: 13.5px; }
  .cnpr-boutique__body h3 { font-size: 15.5px; }
}

/* =========================================================================
   La visionneuse (boutique.js) : posée sur <body>, elle couvre l'écran.
   ========================================================================= */
.cnpr-boutique-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 20, 30, 0.7);
}
.cnpr-boutique-lightbox img {
  max-width: min(960px, 90vw);
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.cnpr-boutique-lightbox__close,
.cnpr-boutique-lightbox__nav {
  position: absolute;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--cnpr-couleur-texte, #16284f);
  font-size: 22px;
  cursor: pointer;
}
.cnpr-boutique-lightbox__close { top: 20px; right: 20px; width: 36px; height: 36px; }
.cnpr-boutique-lightbox__nav {
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
}
.cnpr-boutique-lightbox__nav--prev { left: 24px; }
.cnpr-boutique-lightbox__nav--next { right: 24px; }
/* Une seule photo : pas de flèches (boutique.js les cache). */
.cnpr-boutique-lightbox__nav[hidden] { display: none; }