/* Finalys Hero Slider — remplace Slider Revolution (slider "home-7") */

.fhs-slider {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	background: #000;
}

/* Hauteur responsive : ratio hauteur/largeur repris des breakpoints Slider Revolution
   (d 1920x900, n 1700x768, t 1130x960, m 480x320) */
.fhs-slider { padding-top: 66.667%; } /* mobile (m) */
@media (min-width: 481px) {
	.fhs-slider { padding-top: 84.956%; } /* tablette (t) */
}
@media (min-width: 1131px) {
	.fhs-slider { padding-top: 45.176%; } /* notebook (n) */
}
@media (min-width: 1701px) {
	.fhs-slider { padding-top: 46.875%; } /* desktop (d) */
}

.fhs-slides {
	position: absolute;
	inset: 0;
}

.fhs-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 300ms ease;
	z-index: 0;
}
.fhs-slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Calque image central : present sur TOUTES les tailles d'ecran, comme dans
   Slider Revolution (aucun reglage "masquer sous telle largeur" dans la config
   d'origine). Les largeurs sont celles du slider d'origine, exprimees en vw
   pour suivre la grille de chaque palier, comme le faisait Slider Revolution :
   m 277px/480, t 215px/1130, n 324px/1700, d 366px/1920.
   La hauteur suit le ratio de l'image (485x561). */
.fhs-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 57.708vw;
	height: 66.751vw;
	/* Garde-fou mobile : le hero y est court, on evite que le logo le deborde. */
	max-height: 78%;
	transform: translate(-50%, calc(-50% + 4.375vw));
	perspective: 600px;
	z-index: 5;
}
@media (min-width: 481px) { /* tablette (t) */
	.fhs-layer {
		width: 19.027vw;
		height: 22.009vw;
		transform: translate(calc(-50% + 0.088vw), calc(-50% + 4.513vw));
	}
}
@media (min-width: 1131px) { /* notebook (n) */
	.fhs-layer {
		width: 19.059vw;
		height: 22.045vw;
		transform: translate(calc(-50% + 0.176vw), calc(-50% + 4.529vw));
	}
}
@media (min-width: 1701px) { /* desktop (d), fige au-dela de la grille 1920 */
	.fhs-layer {
		width: min(19.062vw, 366px);
		height: min(22.049vw, 423px);
		transform: translate(calc(-50% + min(0.208vw, 4px)), calc(-50% + min(4.583vw, 88px)));
	}
}
.fhs-layer img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain : si le garde-fou de hauteur se declenche, le logo se reduit
	   au lieu d'etre rogne. Ailleurs la boite est au ratio de l'image. */
	object-fit: contain;
	opacity: 0;
	transform: translateZ(-50px) rotateX(-70deg);
}
.fhs-layer img.fhs-play {
	animation: fhs-layer-cycle var(--fhs-delay, 9000ms) cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes fhs-layer-cycle {
	0% { opacity: 1; transform: translateZ(-50px) rotateX(-70deg); }
	19.44% { opacity: 1; transform: translateZ(-50px) rotateX(0deg); } /* fin du flip : 1750ms sur une slide de 9s, proportionnel ensuite */
	96.67% { opacity: 1; transform: translateZ(-50px) rotateX(0deg); } /* debut du fondu : ~8700ms sur une slide de 9s */
	100% { opacity: 0; transform: translateZ(-50px) rotateX(0deg); }
}

/* Barre de progression */
.fhs-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 7px;
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
	z-index: 9999;
}
.fhs-progress-bar {
	height: 100%;
	width: 0%;
	background: #1e3965;
	border-radius: 10px;
}
.fhs-progress-bar.fhs-animate {
	transition: width var(--fhs-delay, 9000ms) linear;
	width: 100%;
}