/* Hero slider — remplacement natif de RevSlider. Zéro dépendance. */
.hero-slider,
.hero-slider * {
	box-sizing: border-box;
}

.hero-slider {
	position: relative;
	clear: both;               /* sous le .row floaté + le <hr> du header */
	width: 100%;
	max-width: 870px;          /* même largeur que l'ancien slider */
	aspect-ratio: 870 / 410;   /* ~410 px de haut à pleine largeur, proportionnel ensuite */
	margin: 0 auto 10px;       /* centré */
	overflow: hidden;
	border-radius: 6px;
	/*box-shadow: 0 2px 10px rgba(0, 0, 0, .18);  !* ombre légère *!*/
}

.hero-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease;
	will-change: opacity;
}

.hero-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hero-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;                 /* annule le img { margin-bottom: 21px } du thème */
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

.hero-slider__caption {
	position: absolute;
	left: 5%;
	bottom: 22%;               /* au-dessus du badge (bas-gauche) pour éviter le chevauchement */
	max-width: 70%;
	margin: 0;
	z-index: 2;
}

.hero-slider__kicker {
	display: block;
	margin: 0 0 .25em;         /* annule le margin 0 0 21px du thème */
	padding: 0;
	font-family: 'Open Sans', sans-serif;   /* police du thème, pas Arial */
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;            /* sombre, comme l'origine */
	text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.hero-slider__title {
	display: block;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;   /* police du thème */
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.hero-slider__badge {
	position: absolute;        /* ancré en bas-gauche de la photo */
	left: 20px;
	bottom: 20px;
	z-index: 2;
	width: 64px;
	max-width: 64px;
	height: auto;
	margin: 0;                 /* annule le margin du thème */
}

/* Flèches */
.hero-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-family: Arial, sans-serif;   /* glyphes ‹ › nets */
	font-size: 26px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	transition: background .2s ease;
	padding: 0;
}

.hero-slider__nav:hover,
.hero-slider__nav:focus-visible {
	background: rgba(0, 0, 0, .65);
	outline: none;
}

.hero-slider__nav--prev { left: 14px; }
.hero-slider__nav--next { right: 14px; }

/* Pagination */
.hero-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.hero-slider__dot {
	width: 11px;
	height: 11px;
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 0 3px rgba(0, 0, 0, .4);
	background: transparent;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.hero-slider__dot.is-active {
	background: #fff;
	transform: scale(1.15);
}

/* Tablette */
@media (min-width: 601px) and (max-width: 979px) {
	.hero-slider__title { font-size: 30px; }
	.hero-slider__kicker { font-size: 13px; }
}

/* Mobile */
@media (max-width: 600px) {
	.hero-slider { aspect-ratio: 4 / 3; }
	.hero-slider__caption { max-width: 86%; left: 5%; bottom: 30%; }
	.hero-slider__title { font-size: 24px; }
	.hero-slider__kicker { font-size: 12px; letter-spacing: .1em; }
	.hero-slider__nav { width: 38px; height: 38px; line-height: 38px; font-size: 22px; }
	.hero-slider__badge { width: 52px; max-width: 52px; left: 14px; bottom: 14px; }
}

/* Respecte les préférences d'accessibilité : pas d'animation */
@media (prefers-reduced-motion: reduce) {
	.hero-slider__slide { transition: none; }
}

/* ------------------------------------------------------------------
   Masquage partiel des nuages + bandeau triangle sous le slider.
   Réutilise l'overlay d'origine du thème (background-overlay-bottom.png,
   triangle blanc pointe-en-haut) au lieu de la variante douce -header.png.
   Piloté par le .top-background:after existant — on ne change que l'image
   et son calage vertical.
------------------------------------------------------------------ */
/* Desktop + tablette : slider en absolu dans le header (relative), comme RevSlider */
@media (min-width: 768px) {
	body.home header.container { position: relative; z-index: 1; }

	body.home .hero-slider {
		position: absolute;
		top: 100%;                 /* juste sous le <hr> du header */
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: 934px;          /* largeur native des PNG (photo ~867 + marges d'ombre) */
		margin: 0;
		height: auto;
		aspect-ratio: auto;        /* le ratio vient de l'image */
		overflow: visible;
		border-radius: 0;
		box-shadow: none;
		clear: none;
	}
	body.home .hero-slider__track { height: auto; }
	body.home .hero-slider__slide { position: absolute; inset: 0; }
	body.home .hero-slider__slide.is-active { position: relative; }  /* donne sa hauteur au bloc */
	body.home .hero-slider__img { position: static; width: 100%; height: auto; object-fit: fill; }

	/* Arc blanc ancré au bas du fond de nuages, plus dépendant de la hauteur du slider */
	body.home .top-background { position: relative; margin-bottom: 150px;}
	body.home .top-background:after {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		margin: 0 !important;
		z-index: 0;
	}
}