/* JS – Hero — v1.2.0
 * Pile de diapositives en GRID (hauteur = la plus haute, zéro absolu dans le flux),
 * fondu entre diapositives, images en (0,2,0) contre .elementor img{height:auto}
 * (leçon tdll-hero : bande nue sous le bloc), fonds teintés DISTINCTS par rang,
 * puces en bas à gauche + flèches en bas à droite (aucune collision avec le titre),
 * sur-titre en Dancing Script embarquée (préférence client).
 */

@font-face {
	font-family: 'Dancing Script JS';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/dancing-script-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Dancing Script JS';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/dancing-script-700.woff2') format('woff2');
}

.js-hero {
	--js-hero-minh: 620px;
	--js-hero-padt: 110px;
	--js-hero-padb: 110px;
	--js-pad-x: 48px;
	--js-hero-veil: .55;
	--js-hero-eyebrow: #c6ea9e;
	--js-hero-accent-a: #c6ea9e;
	--js-hero-accent-b: #c6ea9e;
	--js-hero-green: #4a7326;
	--js-hero-green2: #3e6d2c;

	position: relative;
	max-width: 100%;
	overflow-x: clip;
	overflow-y: clip;
	background: #000101;
	color: #ffffff;
}
.js-hero :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0; padding: 0; letter-spacing: normal; text-transform: none; clear: none;
}
.js-hero :where(*) { min-width: 0; }
.js-hero [hidden] { display: none !important; }

/* ---------- Pile ---------- */
.js-hero__slides { display: grid; }
.js-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--js-hero-padt) var(--js-pad-x) var(--js-hero-padb);
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease, visibility 0s linear .9s;
	pointer-events: none;
	min-width: 0 !important;
}
.js-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .9s ease;
	pointer-events: auto;
	z-index: 1;
}
.js-hero--has-footer .js-hero__slide { padding-bottom: calc(var(--js-hero-padb) + 58px); }
.js-hero--h-min .js-hero__slide { min-height: var(--js-hero-minh); }
.js-hero--h-full .js-hero__slide { min-height: 100vh; min-height: 100svh; }

/* ---------- Média ---------- */
.js-hero__media { position: absolute; inset: 0; overflow: hidden; }
/* (0,2,0) : bat .elementor img{height:auto} — jamais de bande nue sous le bloc. */
.js-hero .js-hero__img {
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
/* Fonds teintés distincts par rang — le changement de diapositive doit SE VOIR
 * même sans images (leçon tdll-hero : jamais le même fond par défaut). */
.js-hero__media--tint-1 { background: linear-gradient(150deg, #2f5421 0%, #000101 78%); }
.js-hero__media--tint-2 { background: linear-gradient(150deg, #000101 12%, #1b2f18 100%); }
.js-hero__media--tint-3 { background: linear-gradient(150deg, #2f5421 0%, #0b3313 84%); }
.js-hero__media--tint-4 { background: linear-gradient(150deg, #241a06 0%, #000101 70%, #35520e 130%); }

/* Zoom lent — uniquement la diapositive active, coupé si mouvement réduit. */
.js-hero--kenburns .js-hero__slide.is-active .js-hero__img,
.js-hero--kenburns .js-hero__slide.is-active .js-hero__media[class*="--tint"] {
	animation: js-hero-zoom 12s ease-out forwards;
}
@keyframes js-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Voile de lisibilité. */
.js-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0,1,1, calc(var(--js-hero-veil) * .8)) 0%,
		rgba(0,1,1, calc(var(--js-hero-veil) * .55)) 45%,
		rgba(0,1,1, var(--js-hero-veil)) 100%);
	pointer-events: none;
}

/* ---------- Contenu ---------- */
.js-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	max-width: 760px;
	width: 100%;
	margin-right: auto;
}

.js-hero__eyebrow-row {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.js-hero__decor {
	display: inline-flex;
	align-items: center;
	color: var(--js-hero-eyebrow);
	margin-right: 10px !important;
	flex: 0 0 auto;
}
.js-hero__decor .js-hero__branch { width: 42px; height: 23px; display: block; }
.js-hero .js-hero__eyebrow {
	font-family: 'Dancing Script JS', 'Dancing Script', cursive;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--js-hero-eyebrow);
	overflow-wrap: break-word;
	text-shadow: 0 1px 10px rgba(0,1,1, .45);
}

.js-hero .js-hero__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.12;
	color: #ffffff;
	overflow-wrap: anywhere;
	max-width: 100%;
	margin-bottom: 18px;
	text-shadow: 0 2px 16px rgba(0,1,1, .35);
}
/* Accent : dégradé clair — le titre n'est jamais fragmenté ici, la peinture
 * au niveau du conteneur est sûre, y compris Safari. */
.js-hero .js-hero__accent {
	background-image: linear-gradient(100deg, var(--js-hero-accent-a), var(--js-hero-accent-b));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--js-hero-accent-a);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.js-hero .js-hero__text {
	font-family: 'Noto Sans', sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
	max-width: 560px;
	overflow-wrap: break-word;
	margin-bottom: 26px;
}

/* ---------- Boutons (contraste AA sur voile sombre) ---------- */
.js-hero__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--js-hero-btns-justify, flex-start);
	gap: 12px;
	max-width: 100%;
}
.js-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 13px 26px;
	border: 2px solid transparent;
	border-radius: var(--js-hero-btn-radius, 12px);
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.js-hero__btn-label { overflow-wrap: break-word; }
.js-hero__btn:hover { transform: translateY(-2px); }
.js-hero__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.js-hero__btn--gradient {
	background: linear-gradient(135deg, var(--js-hero-green), var(--js-hero-green2));
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(0,1,1, .35);
}
.js-hero__btn--gradient:hover { background: linear-gradient(135deg, #3e6d2c, #2f5421); color: #ffffff; }
.js-hero__btn--solid { background: var(--js-hero-green); color: #ffffff; }
.js-hero__btn--solid:hover { background: var(--js-hero-green2); color: #ffffff; }
.js-hero__btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .9); color: #ffffff; }
.js-hero__btn--ghost:hover { background: #ffffff; border-color: #ffffff; color: #000101; }
.js-hero__btn--white { background: #ffffff; color: #000101; }
.js-hero__btn--white:hover { background: #e9f2ec; color: #000101; }
.js-hero__btn--gold { background: #9fd36d; color: #0d1a0b; }
.js-hero__btn--gold:hover { background: #8fc95a; color: #0d1a0b; }

/* ---------- Pied : puces à gauche, flèches à droite ---------- */
.js-hero__footer {
	position: absolute;
	left: var(--js-pad-x);
	right: var(--js-pad-x);
	bottom: 20px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	opacity: 0;
	transition: opacity .3s ease;
}
.js-hero[data-js-ready] .js-hero__footer { opacity: 1; }

.js-hero__nav { display: flex; align-items: center; margin-left: var(--js-hero-nav-ml, auto); }
/* Flèches : sélecteur renforcé (0,3,0) et propriétés explicites — battent les styles globaux de bouton du thème / du kit Elementor (padding, largeur, couleur, ombre). */
.js-hero .js-hero__nav .js-hero__arrow {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px !important;
	height: 44px !important;
	min-width: 0;
	min-height: 0 !important;
	max-width: none;
	flex: 0 0 44px;
	margin: 0;
	padding: 0 !important;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 999px !important;
	background: rgba(0,1,1, .25) !important;
	background-image: none !important;
	color: #ffffff;
	font-size: 0;
	line-height: 1 !important;
	text-indent: 0;
	letter-spacing: 0;
	box-shadow: none !important;
	cursor: pointer;
	position: static;
	transform: none;
	overflow: hidden;
	backdrop-filter: blur(3px);
	transition: background .25s ease, border-color .25s ease;
}
.js-hero .js-hero__nav .js-hero__arrow::before, .js-hero .js-hero__nav .js-hero__arrow::after { content: none; display: none; }
.js-hero .js-hero__nav .js-hero__arrow + .js-hero__arrow { margin-left: 10px !important; }
.js-hero .js-hero__nav .js-hero__arrow svg { display: block; width: 18px; height: 18px; margin: 0; flex: 0 0 18px; }
.js-hero .js-hero__nav .js-hero__arrow:hover, .js-hero .js-hero__nav .js-hero__arrow:focus-visible { background: var(--js-hero-green) !important; border-color: var(--js-hero-green); color: #ffffff; transform: none; }
.js-hero .js-hero__nav .js-hero__arrow:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.js-hero__dots { display: flex; align-items: center; }
.js-hero .js-hero__dots .js-hero__dot {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	width: 9px !important;
	height: 9px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .45) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-size: 0;
	line-height: 1 !important;
	cursor: pointer;
	transform: none;
	transition: width .3s ease, background .3s ease;
}
.js-hero .js-hero__dots .js-hero__dot::before, .js-hero .js-hero__dots .js-hero__dot::after { content: none; display: none; }
.js-hero .js-hero__dots .js-hero__dot + .js-hero__dot { margin-left: 8px !important; }
.js-hero .js-hero__dots .js-hero__dot.is-active { width: 24px !important; background: #ffffff !important; }
.js-hero .js-hero__dots .js-hero__dot:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---------- Défauts responsive des marges (portés par le plugin) ---------- */
@media (max-width: 1024px) { .js-hero { --js-hero-padt: 76px; --js-hero-padb: 76px; } }
@media (max-width: 767px)  { .js-hero { --js-hero-padt: 46px; --js-hero-padb: 46px; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.js-hero .js-hero__title { font-size: 42px; }
}
@media (max-width: 767px) {
	.js-hero .js-hero__title { font-size: 31px; }
	.js-hero .js-hero__eyebrow { font-size: 25px; }
	.js-hero .js-hero__text { font-size: 15.5px; }
	.js-hero__btns { gap: 10px; }
	.js-hero__btn { width: 100%; }
	.js-hero--no-arrows-mobile .js-hero__nav { display: none; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	.js-hero *, .js-hero *::before, .js-hero *::after { transition: none !important; animation: none !important; }
	.js-hero__slide { transition: none !important; }
}