/* Hero Slider Articles — styles front */

.hsa-slider {
	--hsa-speed: 700ms;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hsa-viewport {
	position: relative;
	width: 100%;
	height: 560px;
	overflow: hidden;
	background-color: #0d0d0d;
	touch-action: pan-y;
}

/* --- Diapositives -------------------------------------------------- */

.hsa-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--hsa-speed) ease, transform var(--hsa-speed) ease, visibility 0s linear var(--hsa-speed);
}

.hsa-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transition-delay: 0s;
}

/* Glissement : la sortante part du côté opposé à l'entrante. */
.hsa-slider--slide .hsa-slide {
	transform: translate3d(100%, 0, 0);
}

.hsa-slider--slide .hsa-slide.is-prev {
	transform: translate3d(-100%, 0, 0);
}

.hsa-slider--slide .hsa-slide.is-active {
	transform: translate3d(0, 0, 0);
}

/* Deux classes : indispensable pour passer devant « .elementor img { height: auto } ». */
.hsa-slide .hsa-slide__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.hsa-slider--kenburns .hsa-slide.is-active .hsa-slide__img {
	animation: hsa-kenburns 12s ease-out forwards;
}

@keyframes hsa-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

/* Voile de couleur : au-dessus de l'image, sous les textes. */
.hsa-slide__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: transparent;
	pointer-events: none;
}

.hsa-slide__overlay {
	--hsa-overlay-color: rgba(0, 0, 0, 0.55);
	--hsa-overlay-angle: 110deg;
	--hsa-overlay-spread: 65%;
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		var(--hsa-overlay-angle),
		var(--hsa-overlay-color) 0%,
		transparent var(--hsa-overlay-spread)
	);
	pointer-events: none;
}

/* --- Contenu -------------------------------------------------------- */

.hsa-slide__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 48px 48px 56px;
	pointer-events: none;
}

.hsa-slide__content {
	max-width: 560px;
	pointer-events: auto;
}

.hsa-slide__title {
	margin: 0;
	color: #fff;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Le titre reste au-dessus du lien couvrant de la diapositive. */
.hsa-slide__permalink {
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

.hsa-slide__permalink:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.hsa-slide__kicker {
	margin: 10px 0 0;
	color: #e63329;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.35;
	text-transform: uppercase;
}

.hsa-slide__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-top: 28px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease;
}

.hsa-slide__arrow {
	transition: transform 200ms ease;
}

.hsa-slide__cta:hover .hsa-slide__arrow,
.hsa-slide__cta:focus-visible .hsa-slide__arrow {
	transform: translateX(4px);
}

.hsa-slide__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Lien couvrant : sous le contenu pour ne pas capter les clics du CTA. */
.hsa-slide__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --- Barres de progression ------------------------------------------ */

.hsa-progress {
	position: absolute;
	left: 48px;
	right: 48px;
	bottom: 24px;
	z-index: 5;
	display: flex;
	gap: 10px;
}

.hsa-progress__item {
	position: relative;
	flex: 1 1 0;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: rgba(255, 255, 255, 0.28);
	cursor: pointer;
	appearance: none;
}

/* Zone de clic confortable sans épaissir la barre. */
.hsa-progress__item::before {
	content: "";
	position: absolute;
	inset: -12px 0;
}

.hsa-progress__item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
}

.hsa-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	background-color: #fff;
	transform-origin: left center;
}

.hsa-progress__item.is-done .hsa-progress__fill {
	width: 100%;
}

/* --- Flèches --------------------------------------------------------- */

.hsa-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.hsa-arrow:hover {
	background-color: #fff;
	color: #111;
}

.hsa-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.hsa-arrow--prev { left: 16px; }
.hsa-arrow--next { right: 16px; }

/* --- Divers ---------------------------------------------------------- */

.hsa-empty {
	padding: 32px;
	border: 1px dashed #c3c4c7;
	color: #50575e;
	text-align: center;
}

.hsa-slider .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
	.hsa-viewport { height: 460px; }
	.hsa-slide__inner { padding: 32px 32px 48px; }
	.hsa-slide__title { font-size: 34px; }
	.hsa-progress { left: 32px; right: 32px; }
}

/* Tablettes comprises : même comportement qu'en mobile. */
@media (max-width: 1024px) {
	.hsa-viewport { height: 420px; }
	.hsa-slide__inner { padding: 24px 24px 40px; }
	.hsa-slide__content { max-width: 100%; }
	.hsa-slide__title { font-size: 26px; }
	.hsa-slide__kicker { font-size: 13px; }
	.hsa-progress { left: 24px; right: 24px; bottom: 18px; gap: 6px; }
	.hsa-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hsa-slide__permalink,
	.hsa-slide,
	.hsa-slide__arrow,
	.hsa-progress__fill {
		transition: none !important;
	}
	.hsa-slider--kenburns .hsa-slide.is-active .hsa-slide__img {
		animation: none;
	}
}