/*
 * Home banner ([banniere_accueil]), replaces the Revolution Slider "accueil".
 *
 * Every size is expressed in the slider's grid pixels multiplied by --s, the same
 * scale factor Revolution Slider applied: grid 1240 x 1077 at 778px and wider
 * (never scaled above 1), grid 778 x 400 below 778px.
 */
.banniere-accueil {
	--s: min(1px, calc(100vw / 1240));
	position: relative;
	left: 50%;
	width: 100vw;
	height: calc(1077 * var(--s));
	margin-left: -50vw;
	overflow: hidden;
	animation: banniere-accueil-fondu 300ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

.banniere-accueil .banniere-accueil__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	background-color: #e7e7e7;
}

.banniere-accueil__bande {
	position: absolute;
	top: calc(50% - 46 * var(--s));
	right: 0;
	left: 0;
	height: calc(91 * var(--s));
	transform: translateY(-50%);
	background-color: rgba(237, 236, 234, 0.7);
}

.banniere-accueil .banniere-accueil__slogan {
	margin: 0;
	padding: 0;
}

.banniere-accueil__hier,
.banniere-accueil__demain {
	position: absolute;
	top: calc(50% - 46 * var(--s));
	transform: translate(-50%, -50%);
	font-family: 'Libre Franklin', Helvetica, Arial, sans-serif;
	font-size: calc(59 * var(--s));
	line-height: calc(59 * var(--s));
	letter-spacing: 0;
	color: #000;
	text-transform: uppercase;
	white-space: nowrap;
}

.banniere-accueil__hier {
	left: calc(50% - 229 * var(--s));
	font-weight: 900;
}

.banniere-accueil__demain {
	left: calc(50% + 262 * var(--s));
	font-weight: 400;
}

@media (max-width: 777px) {
	.banniere-accueil {
		--s: calc(100vw / 778);
		height: calc(400 * var(--s));
	}

	.banniere-accueil__bande {
		top: 50%;
		height: calc(189 * var(--s));
	}

	.banniere-accueil__hier,
	.banniere-accueil__demain {
		left: 50%;
	}

	.banniere-accueil__hier {
		top: calc(50% - 30 * var(--s));
	}

	.banniere-accueil__demain {
		top: calc(50% + 38 * var(--s));
	}
}

@keyframes banniere-accueil-fondu {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.banniere-accueil {
		animation: none;
	}
}