/**
 * Bandeau défilant du thème (framework/function/home-slider.php)
 * Ajouté par LuxApps
 *
 * Le bandeau est dessiné sur une toile de --width x --height pixels : au-dessus de 768px,
 * tout (positions et tailles de texte) se réduit en proportion de la largeur disponible,
 * comme le faisait LayerSlider. En dessous, les textes deviendraient illisibles : ils
 * s'empilent au centre de l'image, à une taille fixe.
 */


/* ---------- Structure ---------- */

.home_slider {
	position:relative;
	overflow:hidden;
	background-color:#313131;
	container-type:inline-size;
}

.home_slider_slides {
	display:grid;
}

.home_slider_slide {
	position:relative;
	grid-area:1 / 1;
	aspect-ratio:var(--width) / var(--height);
	overflow:hidden;
	visibility:hidden;
	opacity:0;
	transition:opacity .8s ease, visibility 0s linear .8s;
}

.home_slider_slide.current {
	z-index:1;
	visibility:visible;
	opacity:1;
	transition:opacity .8s ease, visibility 0s;
}

.home_slider_bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
}


/* ---------- Couches de texte ---------- */

.home_slider_layer {
	position:absolute;
	top:var(--top);
	left:var(--left);
	margin:0;
	padding:0;
	color:#ffffff;
	font-size:calc(var(--size, 15) / var(--width) * 100cqw);
	line-height:normal;
	white-space:nowrap;
	opacity:0;
	transition:opacity .6s ease .3s;
}

.home_slider_slide.current .home_slider_layer {
	opacity:1;
}

.home_slider_layer .button {
	height:auto;
	padding:.7em 1.85em;
	font-size:clamp(10px, calc(15 / var(--width) * 100cqw), 15px);
	line-height:1.4;
}


/* ---------- Navigation ---------- */

.home_slider_nav {
	position:absolute;
	top:50%;
	z-index:2;
	width:44px;
	height:44px;
	margin:-22px 0 0;
	padding:0;
	border:0;
	border-radius:2px;
	background-color:rgba(0, 0, 0, .35);
	cursor:pointer;
	opacity:0;
	transition:opacity .2s ease, background-color .2s ease;
}

.home_slider_prev {left:20px;}

.home_slider_next {right:20px;}

.home_slider_nav:before {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:10px;
	height:10px;
	margin:-6px 0 0 -3px;
	border-top:2px solid #ffffff;
	border-left:2px solid #ffffff;
	transform:rotate(-45deg);
}

.home_slider_next:before {
	margin-left:-9px;
	transform:rotate(135deg);
}

.home_slider:hover .home_slider_nav,
.home_slider_nav:focus-visible {
	opacity:1;
}

.home_slider_nav:hover {
	background-color:rgba(0, 0, 0, .7);
}

.home_slider_bullets {
	position:absolute;
	bottom:6px;
	left:0;
	z-index:2;
	width:100%;
	text-align:center;
	line-height:0;
}

.home_slider_bullet {
	position:relative;
	width:24px;
	height:24px;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
}

.home_slider_bullet:before {
	content:'';
	position:absolute;
	top:7px;
	left:7px;
	width:10px;
	height:10px;
	box-sizing:border-box;
	border:2px solid #ffffff;
	border-radius:50%;
	transition:background-color .2s ease;
}

.home_slider_bullet.current:before,
.home_slider_bullet:hover:before {
	background-color:#ffffff;
}

.home_slider_nav:focus-visible,
.home_slider_bullet:focus-visible {
	outline:2px solid #ffffff;
	outline-offset:2px;
}


/* ---------- Petits écrans ---------- */

@media only screen and (max-width:768px) {
	.home_slider_slide {
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:300px;
		aspect-ratio:auto;
	}

	.home_slider_bg {
		filter:brightness(.7);
	}

	.home_slider_layers {
		position:relative;
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:6px;
		padding:40px 20px 48px;
		text-align:center;
	}

	.home_slider_layer {
		position:static;
		text-align:center;
		font-size:clamp(14px, calc(var(--size, 15) * .5px), 44px);
		white-space:normal;
	}

	.home_slider_layer br {
		display:none;
	}

	.home_slider_layer .button {
		margin-top:12px;
		font-size:14px;
	}

	.home_slider_nav {
		display:none;
	}
}


/* ---------- Animations réduites ---------- */

@media (prefers-reduced-motion:reduce) {
	.home_slider_slide,
	.home_slider_slide.current,
	.home_slider_layer {
		transition:none;
	}
}