/* ==========================================================================
   Projéta - Shop
   --------------------------------------------------------------------------
   Grille masonry (colonnes égales), cartes produit avec le traitement
   « surimpression » (contour noir + double ombre bleu/rose), tas de
   produits qu'on étale dans la grille.

   Réglages de la grille : nombre de colonnes et gouttières ci-dessous -
   le JS (shop.js) lit ces variables, il suffit d'éditer ici.
   ========================================================================== */

.shop-grille {
  --shop-colonnes: 3;
  --shop-gap-x: 44px;
  --shop-gap-y: 52px;
  position: relative;
}

@media (max-width: 900px) {
  .shop-grille { --shop-colonnes: 2; }
}
@media (max-width: 560px) {
  .shop-grille { --shop-colonnes: 1; --shop-gap-x: 24px; --shop-gap-y: 40px; }
}

/* Avant que le JS prenne la main (ou sans JS) : grille CSS simple,
   les produits rangés dans un tas restent cachés. */
.shop-grille:not(.est-prete) {
  display: grid;
  grid-template-columns: repeat(var(--shop-colonnes), 1fr);
  gap: var(--shop-gap-y) var(--shop-gap-x);
  align-items: end;
}
.shop-grille:not(.est-prete) [data-dans-groupe] { display: none; }

/* Une fois la masonry en place : cartes en absolu, déplacées via transform.
   Toute recomposition (filtre, étalement d'un tas) est donc animée. */
.shop-grille.est-prete .shop-item {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}
.shop-grille.est-animee .shop-item {
  transition: transform .5s cubic-bezier(.22, .9, .26, 1), opacity .3s ease;
}

.shop-item { margin: 0; }
.shop-item.est-cachee { opacity: 0; pointer-events: none; }

/* Les cartes en vol passent au-dessus du reste, sur leur propre couche */
.shop-item--vol { z-index: 5; will-change: transform; }

/* --- Filtres (natures) ------------------------------------------------------ */

.shop-filtres {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.shop-filtres .tag {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-width: 2px;
}

/* --- Carte produit ------------------------------------------------------------ */

.produit-carte { display: flex; flex-direction: column; gap: 16px; }

/* Le visuel est un bouton (ouvre la galerie) qui occupe toujours le même
   espace (--produit-ratio) ; l'image s'y loge en contain. */
.produit-visuel {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--produit-ratio);
  width: 100%;
}

/* Photo cadrée : bordure réelle + double ombre box-shadow */
.produit-visuel img {
  max-width: calc(100% - 14px);
  max-height: calc(100% - 14px);
  width: auto;
  height: auto;
  border: var(--trait-photo);
  box-shadow: var(--ombre-double);
  transition: transform .18s cubic-bezier(.22, .9, .26, 1), box-shadow .18s cubic-bezier(.22, .9, .26, 1);
}

/* Au survol : léger agrandissement, les ombres s'écartent */
.produit-visuel:hover img,
.produit-visuel:focus-visible img {
  transform: scale(1.03) rotate(-.5deg);
  box-shadow: var(--ombre-double-survol);
}

/* PNG détouré : contour drop-shadow qui épouse l'alpha + double ombre.
   Au survol, l'ombre s'écarte comme celle des photos cadrées - même
   durée, même courbe, mais sur filter (le box-shadow ferait un rectangle). */
.produit-visuel--detoure img {
  max-width: 92%;
  max-height: 96%;
  border: none;
  box-shadow: none;
  filter: var(--contour-detoure) var(--ombre-double-filtre);
  transition: transform .18s cubic-bezier(.22, .9, .26, 1), filter .18s cubic-bezier(.22, .9, .26, 1);
}
.produit-visuel--detoure:hover img,
.produit-visuel--detoure:focus-visible img {
  transform: scale(1.04) rotate(-.5deg);
  box-shadow: none;
  filter: var(--contour-detoure) var(--ombre-double-filtre-survol);
}

/* Bouton panier du cartel */
.produit-carte .btn { align-self: flex-start; }

/* Chip « regrouper » sur les cartes sorties d'un tas */
.cartel__groupe {
  align-self: flex-start;
  font: 400 10px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px dashed var(--ink);
  border-radius: var(--rayon-pill);
  padding: 5px 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.cartel__groupe:hover { background: var(--ink); color: var(--paper); }

/* --- Le tas (groupe de produits replié) ------------------------------------------ */

.groupe-carte { display: flex; flex-direction: column; gap: 16px; --produit-ratio: 1 / 1; }

.groupe-pile {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  position: relative;
  aspect-ratio: var(--produit-ratio);
  width: 100%;
  text-align: left;
}

/* La double ombre couleur est portée UNE fois par l'ensemble du tas -
   pas par chaque pièce, sinon les ombres se multiplient entre pièces. */
.groupe-pile__ombre {
  position: absolute;
  inset: 0;
  filter: var(--ombre-double-filtre);
}

.groupe-pile__vignette {
  --vignette-size: 50%;
  position: absolute;
  left: calc(var(--x, 0) * (100% - var(--vignette-size)));
  top: calc(6% + var(--y, .5) * 28%);
  /* max-height: var(--vignette-size); */
  max-width: var(--vignette-size);
  transform: rotate(var(--rot, 0deg));
  z-index: var(--i);
  transition: transform .25s cubic-bezier(.22, .9, .26, 1);
}

/* Au survol du tas (pile, badge ×N ou bouton « Étaler ») : les pièces
   s'éparpillent légèrement - le tas a envie de s'ouvrir. */
.groupe-carte:has([data-etaler]:hover) .groupe-pile__vignette,
.groupe-carte:has([data-etaler]:focus-visible) .groupe-pile__vignette {
  transform:
    translate(calc((var(--x, .5) - .5) * 30px), calc((var(--y, .5) - .5) * -18px))
    rotate(calc(var(--rot, 0deg) * 1.8));
}
/* Photo cadrée dans le tas : bordure réelle. Détouré : contour drop-shadow. */
.groupe-pile__vignette { border: var(--trait); background: var(--paper); }
.groupe-pile__vignette.est-detouree {
  border: none;
  background: none;
  filter: var(--contour-detoure);
}

.groupe-pile__compte {
  position: absolute;
  right: -4px;
  top: -12px;
  font: 700 11px var(--font-mono);
  background: var(--rose);
  color: #fff;
  border: var(--trait);
  border-radius: var(--rayon-pill);
  padding: 4px 9px;
  /* Au-dessus de toutes les vignettes (z-index: var(--i), sans plafond) */
  z-index: 99;
}

.groupe-carte .btn { align-self: flex-start; }

/* --- Bandeau prévente en tête de Shop --------------------------------------------- */

.shop-prevente { margin-bottom: 48px; }

/* --- Boutique en pause (Shop non listé, visité par URL) ----------------------------
   Un mot d'explication en tête ; les cartels affichent alors le prix
   seul à la place du bouton panier (voir bouton-panier.php). */

.shop-note {
  font: 400 13px/1.6 var(--font-mono);
  border: 2px dashed var(--ink);
  border-radius: var(--rayon-chip);
  background: var(--paper-alt);
  padding: 12px 16px;
  margin: 0 0 34px;
  max-width: 560px;
}

.cartel__prix { font: 700 13px var(--font-mono); }

/* --- Galerie produit (dialog natif, rempli par galerie.js) --------------------------
   Au clic sur un visuel : toutes les images du produit + cartel +
   bouton panier. Pas de page produit - tout se passe ici. */

.galerie {
  border: var(--trait);
  border-radius: var(--rayon-bloc);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
}
.galerie::backdrop { background: rgba(20, 20, 20, .75); }
body:has(.galerie[open]) { overflow: hidden; }

/* Un vrai rond : boîte carrée + rayon 50%, glyphe centré à la grille
   (le padding d'une pill laisse la croix flotter hors centre). */
.galerie__fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  font: 700 15px var(--font-mono);
  line-height: 1;
  border: var(--trait);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.galerie__fermer:hover { background: var(--ink); color: var(--paper); }

.galerie__grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  min-height: 380px;
}
@media (max-width: 700px) {
  .galerie__grille { grid-template-columns: 1fr; }
}

/* La scène : l'image courante, en contain, sur papier alterné */
.galerie__scene {
  position: relative;
  background: var(--paper-alt);
  border-right: var(--trait);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  aspect-ratio: 1 / 1;
  min-width: 0;
}
@media (max-width: 700px) {
  .galerie__scene { border-right: 0; border-bottom: var(--trait); aspect-ratio: 4 / 3; }
}

/* Les images de la galerie sont nues - ni contour ni ombre : on peut y
   trouver des gros plans ou des mises en situation, ce n'est plus le
   « visuel produit » traité en surimpression comme dans la grille. */
.galerie__scene img {
  display: none;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.galerie__scene img.est-active { display: block; }

/* Navigation entre images, posée sur la scène */
.galerie__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.galerie__nav[hidden] { display: none; }
/* Mêmes ronds que la croix, flèches centrées à la grille */
.galerie__nav button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font: 700 14px var(--font-mono);
  line-height: 1;
  border: var(--trait);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.galerie__nav button:hover { background: var(--ink); color: var(--paper); }
.galerie__compteur { font: 700 11px var(--font-mono); letter-spacing: .08em; }

/* Le cartel : artiste, titre, description, panier */
.galerie__cartel {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.galerie__cartel .cartel__titre { font-size: 21px; }
.galerie__cartel .btn { margin-top: auto; }
@media (max-width: 700px) {
  .galerie__cartel .btn { margin-top: 10px; }
}

/* Le texte complet (champ Contenu), sous le cartel dans la galerie */
.galerie__texte {
  font-size: 14px;
  line-height: 1.55;
  max-height: 38vh;
  overflow-y: auto;
}
.galerie__texte p + p { margin-top: .6em; }

/* --- Carte tombola --------------------------------------------------------------
   Injectée en tête de la grille tant qu'une tombola est active - même
   au-delà de la fin de la prévente. Pas de photo (un ticket n'est pas
   un objet) : un volet à trame animée aux couleurs INVERSÉES du
   panneau prévente (fond jaune, points à l'encre de la prévente),
   avec le trait d'atelier et les mêmes ombres que les photos. */

.tombola-carte { display: flex; flex-direction: column; gap: 16px; --produit-ratio: 1 / 1; }

.tombola-carte__visuel {
  --trame-fond: var(--jaune);
  --trame-encre: var(--prevente-encre, var(--bleu));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: var(--produit-ratio);
  padding: 16px;
  border: var(--trait-photo);
  box-shadow: var(--ombre-double);
  text-decoration: none;
  text-align: center;
  transition: transform .18s cubic-bezier(.22, .9, .26, 1), box-shadow .18s cubic-bezier(.22, .9, .26, 1);
}
.tombola-carte__visuel:hover,
.tombola-carte__visuel:focus-visible {
  transform: scale(1.03) rotate(-.5deg);
  box-shadow: var(--ombre-double-survol);
}

.tombola-carte__label {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
}
.tombola-carte__sous-titre {
  font: 700 11px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 4px 10px;
  border-radius: var(--rayon-chip);
}

.tombola-carte .btn { align-self: flex-start; }