/* =========================================================
   Vidéos hébergées sur le site (sortie de Vimeo, mise en service le 21/10/2026)
   La balise <video> remplace les lecteurs Vimeo : mêmes cadrages et mêmes filtres
   que les anciennes iframes. Le lecteur Vimeo cadrait la vidéo entière dans son
   cadre (bandes si les formats diffèrent) : c'est le comportement par défaut de
   <video> (object-fit: contain), gardé là où le cadrage en dépend.
   Chargé par inc/illustre-media.php, après main.css et theme-clair.css.
   ========================================================= */

/* Mosaïque du hero : vidéo créée au survol (assets/js/illustre-media.js) */
.hero__mosaic-cell .ill-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	pointer-events: none;
	/* mêmes filtres que l'ancienne iframe : main.css (sombre) et theme-clair.css (clair) */
	filter: brightness(0.78) saturate(0.95);
	opacity: 0;
	transition: opacity 350ms ease;
}
html[data-theme="light"] .hero__mosaic-cell .ill-video { filter: brightness(0.82) saturate(0.92); }
.hero__mosaic-cell.is-playing .ill-video { opacity: 1; }

/* Cartes études de cas (accueil, landings, /realisations/) */
.case-card__video-slot .ill-video {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center;
	border: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 600ms ease;
}
.case-card--ratio-horizontal .case-card__video-slot .ill-video {
	width: 105%;
	height: 105%;
}
.case-card--ratio-vertical .case-card__video-slot .ill-video {
	width: 100%;
	height: 100%;
	transform: translate(-50%, -30%) scale(2);
}
.case-card.is-playing .case-card__video-slot .ill-video {
	opacity: 1;
	filter: saturate(1.05) brightness(0.92);
}

/* Cartes « livrables » : la classe .deliverable-card__video-frame (main.css) gère déjà
   la taille. L'image d'aperçu de la balise <video> s'affiche tout de suite (plus de cadre
   vide pendant le chargement), au même cadrage que la vidéo. */
video.deliverable-card__video-frame { background: transparent; object-fit: contain; opacity: 1; }

/* Études de cas éclatées (/realisations/<client>/) */
.cse-card--video .ill-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
}
.cse-card--video.is-loaded .ill-video { opacity: 1; }

/* VSL : lecteur avec contrôles, même boîte que l'ancienne iframe (.vsl-scroll-video) */
video.vsl-scroll-video { object-fit: contain; }