/*
 * Galerie de la fiche produit (inc/video-produit.php).
 *
 * Mobile : toutes les diapositives (photos et vidéo) ont le même cadre 4:5,
 * rempli sans déformation (object-fit: cover, image centrée). Passer d'une
 * diapositive à l'autre ne change plus la hauteur de la galerie (avant,
 * FlexSlider prenait la hauteur de chaque photo). Une photo carrée perd 10 %
 * à gauche et à droite ; une photo 2:3 perd environ 8 % en haut et en bas.
 */
@media (max-width: 768px) {
	.woocommerce-product-gallery .woocommerce-product-gallery__image {
		aspect-ratio: 4 / 5 !important;
		overflow: hidden;
	}

	.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.woocommerce-product-gallery .woocommerce-product-gallery__image > a > img,
	.woocommerce-product-gallery .woocommerce-product-gallery__image > img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		object-position: center;
	}
}

/* Diapositive vidéo : même cadre que les photos (ordinateur : proportion de la
   photo principale, donnée par le serveur). */
.woocommerce-product-gallery .anaaz-video-diapo {
	position: relative;
	overflow: hidden;
	background-color: #f4f4f4;
}

.woocommerce-product-gallery .anaaz-video-diapo .anaaz-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Mobile : la vidéo apparaît en fondu dès que sa première image est prête
   (pas de photo principale en image d'attente). */
.woocommerce-product-gallery .anaaz-video-diapo .anaaz-video.anaaz-video--attente {
	opacity: 0;
	transition: opacity .3s ease;
}

.woocommerce-product-gallery .anaaz-video-diapo .anaaz-video.anaaz-video--prete {
	opacity: 1;
}

/* Vignette de la vidéo dans la navigation : petit triangle « lecture ». */
.flex-control-thumbs li.anaaz-video-vignette {
	position: relative;
}

.flex-control-thumbs li.anaaz-video-vignette::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -9px 0 0 -6px;
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
	pointer-events: none;
}

/*
 * Ordinateur : le thème affiche en haut la diapositive active et, dessous, la
 * liste des vignettes en grand. La vignette de la diapositive affichée en haut
 * est masquée (au départ la 1re = photo principale) : plus de photo en double,
 * et aucune ne manque quand une couleur fait glisser le haut vers une autre
 * photo. Navigateurs sans :has() : la 1re vignette est masquée.
 */
@media (min-width: 769px) {
	@supports selector(:has(*)) {
		.woocommerce-product-gallery .flex-control-thumbs li:has(> img.flex-active) {
			display: none !important;
		}
	}

	@supports not selector(:has(*)) {
		.woocommerce-product-gallery .flex-control-thumbs li:first-child {
			display: none !important;
		}
	}
}

/* Ordinateur : vignette de la vidéo remplacée par la vidéo elle-même (liste des
   vignettes affichée en grand par le thème) ; pas de triangle sur la vidéo. */
.flex-control-thumbs li.anaaz-video-vignette--lecture::after {
	display: none;
}

.flex-control-thumbs li .anaaz-video-liste {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
	background-color: #f4f4f4;
	opacity: 0;
	transition: opacity .3s ease;
}

/* Affichée dès que sa première image est prête (fondu court). */
.flex-control-thumbs li .anaaz-video-liste.anaaz-video-liste--prete {
	opacity: 1;
}