/**
 * Galerie de la fiche produit.
 *
 * WooCommerce livre sa galerie avec un carrousel jQuery, et Kadence taille les
 * images secondaires pour ce carrousel : 33% de large, 65px de haut, remontées
 * de 31px pour ne laisser dépasser qu'une bande sous la couverture. Le site ne
 * charge pas jQuery : le carrousel ne démarre jamais et cette bande reste, si
 * bien qu'une quatrième de couverture s'affichait sur 65px de haut, illisible.
 *
 * On assume donc une galerie statique : la couverture en grand, les autres
 * pages en vignettes lisibles sous elle. Les sélecteurs reprennent la chaîne
 * complète de Kadence, seule façon d'annuler ses hauteurs imposées.
 *
 * La mise en page tient entièrement ici ; le script n'ajoute que l'échange au
 * clic. Sans JavaScript, chaque vignette reste un lien vers l'image en pleine
 * taille, à la même échelle.
 */

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jmg-e-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La vue principale occupe toute la colonne. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(1) {
	flex: 0 0 100%;
	width: 100%;
	height: auto;
	margin: 0;
	border: 1px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon);
	background-color: var(--jmg-fond-carte);
	overflow: hidden;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(1) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Vignettes : au moins 96px de large et le format d'un livre, assez pour
   reconnaître une quatrième de couverture d'un coup d'œil. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) {
	display: block;
	flex: 0 0 auto;
	width: clamp(96px, 22%, 132px);
	height: auto;
	margin: 0;
	border: 1px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon);
	background-color: var(--jmg-fond-carte);
	overflow: hidden;
	transition: border-color var(--jmg-transition);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2):hover,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2):focus-within {
	border-color: var(--jmg-or-fort);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 7;
	object-fit: contain;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a {
	display: block;
	text-decoration: none;
}

/* Le script prend la main : la vignette ne quitte plus la page, elle échange
   son image avec la vue principale. Le curseur doit le dire. */
.jmg-galerie-active .woocommerce-product-gallery__image:nth-child(n+2) a {
	cursor: zoom-in;
}