/**
 * 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;
}

/* -------------------------------------------------------------------------
 * Visionneuse
 * ---------------------------------------------------------------------- */

/* La vue principale s'ouvre en grand au clic. */
.woocommerce-product-gallery__image.jmg-galerie-agrandissable a {
	cursor: zoom-in;
}

/* Le défilement de la page est figé derrière la fenêtre. Tenu par le CSS seul :
   il suit l'état réel du <dialog>, que la fermeture vienne d'un clic ou d'Échap. */
html:has( .jmg-visionneuse[open] ) {
	overflow: hidden;
}

.jmg-visionneuse {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--jmg-e-8) var(--jmg-e-4) var(--jmg-e-4);
	border: 0;
	background: rgba(26, 28, 36, 0.94);
	cursor: zoom-out;
}

.jmg-visionneuse[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.jmg-visionneuse::backdrop {
	background: rgba(26, 28, 36, 0.94);
}

.jmg-visionneuse__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background-color: var(--jmg-fond-carte);
	box-shadow: 0 0 0 1px rgba(254, 253, 249, 0.25);
}

/* Bouton nommé et non une simple croix : la croix seule est facile à manquer,
   et le mot dit ce qu'il fait. Cible de 48px, comme partout. Les sélecteurs
   sont doublés en spécificité et la transition coupée : les styles globaux des
   boutons du thème (couleur, fond, contour au focus) l'emporteraient sinon, et
   le bouton est focalisé dès l'ouverture. */
.jmg-visionneuse .jmg-visionneuse__fermer {
	position: absolute;
	top: var(--jmg-e-4);
	right: var(--jmg-e-4);
	display: inline-flex;
	align-items: center;
	gap: var(--jmg-e-2);
	min-height: var(--jmg-cible);
	padding: 0 var(--jmg-e-4);
	border: 2px solid var(--jmg-fond-carte);
	border-radius: var(--jmg-rayon);
	background: var(--jmg-fond-carte);
	color: var(--jmg-texte);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
	transition: none;
	cursor: pointer;
}

.jmg-visionneuse .jmg-visionneuse__fermer span {
	font-size: 1.75rem;
	line-height: 1;
	color: inherit;
}

.jmg-visionneuse .jmg-visionneuse__fermer:hover,
.jmg-visionneuse .jmg-visionneuse__fermer:focus,
.jmg-visionneuse .jmg-visionneuse__fermer:focus-visible {
	background: var(--jmg-fond-eleve);
	color: var(--jmg-texte);
}

/* Contour clair, seul visible sur le fond sombre de la fenêtre. */
.jmg-visionneuse .jmg-visionneuse__fermer:focus-visible {
	outline: 3px solid var(--jmg-fond-carte);
	outline-offset: 3px;
}