/*
 * Carrousel de vidéos — résidu CSS de la façade « lite ».
 *
 * Le design vient des classes globales du kit (`mist-v4-news-slides`,
 * `-controls`, `-arrow`, `-dot`, `-title`) : elles sont posées dans
 * `_elementor_data`, donc Elementor émet leur CSS pour la page. Ne vit ici que
 * ce qu'aucune classe ne peut porter — l'image et l'iframe créées PAR LE
 * SCRIPT, qui n'existent pas au moment où Elementor génère sa feuille.
 *
 * ⚠️ Portée par attribut, jamais par un nom de classe inventé : un libellé
 * inconnu du kit sort en identifiant haché et ne pose aucun style.
 */

/* La façade réserve sa place AVANT que la miniature arrive : sans hauteur, la
   page saute au chargement de l'image (et le décalage se voit au défilement). */
.elementor [data-mist-video] {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 30px;
	background: #e4e1f2;
	cursor: pointer;
}

.elementor [data-mist-video] img,
.elementor [data-mist-video] iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* ⚠️ `e-image-base` impose `max-width:100%` : sans `none` la miniature
	   plafonne et laisse une bande à droite quand elle est plus étroite que
	   son cadre. Même piège que `mist-v4-actu-media` sur l'accueil. */
	max-width: none;
	margin: 0;
}

.elementor [data-mist-video] img {
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.35s ease;
}

.elementor [data-mist-video]:hover img {
	transform: scale(1.04);
}

/* Repli : quand `maxresdefault` n'existe pas, le script retombe sur
   `hqdefault` — 480×360, donc du 4/3 avec deux bandes noires. L'agrandissement
   les recadre, comme le fait YouTube lui-même. ⚠️ Il n'est posé QUE dans ce
   cas : l'appliquer à une miniature 16/9 nette la rendrait floue pour rien
   (défaut mesuré le 08/09, visible sur la capture et sur aucune métrique). */
.elementor [data-mist-video][data-mist-video-4-3="true"] img {
	transform: scale(1.35);
}

.elementor [data-mist-video][data-mist-video-4-3="true"]:hover img {
	transform: scale(1.4);
}

/* Le badge de lecture. Décoratif : le nom accessible est porté par
   `aria-label` sur la façade, posé par le script. */
.elementor [data-mist-video]::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background:
		#e94e1b
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")
		no-repeat center;
	box-shadow: 0 8px 24px -8px rgba(31, 36, 68, 0.5);
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.elementor [data-mist-video]:hover::after {
	transform: scale(1.08);
}

/* Une fois l'iframe posée, plus de badge et plus d'agrandissement : la façade
   EST le lecteur, et un rond orange par-dessus la vidéo intercepterait le clic. */
.elementor [data-mist-video][data-mist-video-lue="true"]::after {
	content: none;
}

.elementor [data-mist-video][data-mist-video-lue="true"] {
	cursor: default;
}

/* Le focus clavier doit se voir : la façade est un lien, et le kit ne donne
   aucune apparence aux liens (`mist-ds.css:65` fait `a{color:inherit}`). */
.elementor [data-mist-video]:focus-visible {
	outline: 3px solid #e94e1b;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.elementor [data-mist-video] img,
	.elementor [data-mist-video]::after {
		transition: none;
	}
	.elementor [data-mist-video]:hover img,
	.elementor [data-mist-video][data-mist-video-4-3="true"]:hover img {
		transform: none;
	}
	.elementor [data-mist-video][data-mist-video-4-3="true"] img {
		transform: scale(1.35);
	}
}

@media (max-width: 767px) {
	.elementor [data-mist-video] {
		border-radius: 22px;
	}
	.elementor [data-mist-video]::after {
		width: 54px;
		height: 54px;
		background-size: 22px 22px;
	}
}