/* St-Élie — Bandeau d'accueil
   Gabarit repris du slider d'origine : grille de 1240 px, hauteur 868 px,
   réduction proportionnelle en dessous de 1240 px de large. */

@font-face {
	font-family: "Bebas Neue";
	src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("fonts/oswald-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.stb {
	--stb-encre: #fff;
	--stb-bouton: #121212;
	--stb-barre: rgba(204, 204, 204, .5);
	--stb-barre-on: #ccc;
	position: relative;
	width: 100%;
	height: max(560px, min(868px, 70vw));
	overflow: hidden;
	background: #121212;
	color: var(--stb-encre);
	isolation: isolate;
}

.stb__piste,
.stb__vue {
	position: absolute;
	inset: 0;
}

.stb__vue {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

.stb__vue.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.1s ease, visibility 0s;
	z-index: 1;
}

.stb img.stb__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	z-index: -1;
}

.stb__grille {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	height: 100%;
	margin: 0 auto;
	padding-top: min(253px, 20.4vw);
	padding-inline: clamp(0px, calc(1288px - 100vw), 24px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .18);
}

.stb__grille > * {
	margin: 0;
	color: inherit;
	font-style: italic;
	text-transform: uppercase;
}

.stb__sur {
	margin-left: min(16px, 1.3vw);
	font-family: "Oswald", sans-serif;
	font-size: min(15px, 1.21vw);
	line-height: min(22px, 1.78vw);
	letter-spacing: min(10px, .81vw);
	font-weight: 400;
}

.stb .stb__titre {
	margin-top: min(19px, 1.53vw);
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	letter-spacing: 0;
	color: inherit;
	text-transform: uppercase;
	font-style: italic;
}

.stb__titre--90 {
	font-size: min(90px, 7.26vw);
	line-height: 1;
}

.stb__titre--75 {
	font-size: min(75px, 6.05vw);
	line-height: 1.2;
}

.stb__filet {
	display: block;
	width: min(190px, 15.3vw);
	height: min(10px, .81vw);
	margin-top: min(18px, 1.45vw);
	margin-left: min(4px, .32vw);
	background: currentColor;
}

.stb__sous {
	margin-top: min(29px, 2.34vw);
	margin-left: max(-3px, -.24vw);
	font-family: "Bebas Neue", sans-serif;
	font-size: min(35px, 2.82vw);
	line-height: min(22px, 1.78vw);
	letter-spacing: min(10px, .81vw);
	font-weight: 400;
}

.stb .stb__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(221px, 17.8vw);
	height: min(41px, 3.31vw);
	margin-top: min(39px, 3.15vw);
	padding: 0 min(22px, 1.77vw);
	box-sizing: border-box;
	background: var(--stb-bouton);
	color: var(--stb-encre);
	font-family: "Bebas Neue", sans-serif;
	font-size: min(25px, 2.02vw);
	line-height: 1;
	font-style: italic;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.stb .stb__bouton:hover,
.stb .stb__bouton:focus-visible {
	background: var(--stb-encre);
	color: var(--stb-bouton);
}

.stb .stb__bouton:focus-visible,
.stb__barre:focus-visible {
	outline: 2px solid var(--stb-encre);
	outline-offset: 3px;
}

/* Barres de navigation (60 × 3 px, 5 px d'écart, à 20 px du bas) */
.stb__barres {
	position: absolute;
	left: 50%;
	bottom: 8px;
	z-index: 2;
	display: flex;
	gap: 5px;
	transform: translateX(-50%);
}

.stb__barre {
	width: 60px;
	height: 27px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: linear-gradient(var(--stb-barre), var(--stb-barre)) center / 100% 3px no-repeat;
	cursor: pointer;
}

.stb__barre.is-on,
.stb__barre:hover {
	background-image: linear-gradient(var(--stb-barre-on), var(--stb-barre-on));
}

/* Entrée des textes du visuel affiché */
@media (prefers-reduced-motion: no-preference) {
	.stb.is-ready .stb__vue .stb__grille > * {
		opacity: 0;
		transform: translateY(24px);
	}

	.stb.is-ready .stb__vue.is-on .stb__grille > * {
		opacity: 1;
		transform: none;
		transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	}

	.stb.is-ready .stb__vue.is-on .stb__grille > :nth-child(2) { transition-delay: .25s; }
	.stb.is-ready .stb__vue.is-on .stb__grille > :nth-child(3) { transition-delay: .45s; }
	.stb.is-ready .stb__vue.is-on .stb__grille > :nth-child(4) { transition-delay: .6s; }
	.stb.is-ready .stb__vue.is-on .stb__grille > :nth-child(5) { transition-delay: .75s; }
}

@media (prefers-reduced-motion: reduce) {
	.stb__vue,
	.stb__vue.is-on {
		transition: none;
	}
}

/* Téléphones et petites tablettes : textes lisibles, bloc centré */
@media (max-width: 767px) {
	.stb {
		height: max(520px, 80svh);
	}

	.stb__grille {
		justify-content: center;
		padding: 0 20px 40px;
	}

	.stb__sur {
		margin-left: 2px;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 6px;
	}

	.stb .stb__titre {
		margin-top: 12px;
	}

	.stb__titre--90 {
		font-size: clamp(44px, 12.5vw, 64px);
	}

	.stb__titre--75 {
		font-size: clamp(40px, 11vw, 56px);
	}

	.stb__filet {
		width: 120px;
		height: 6px;
		margin-top: 14px;
		margin-left: 2px;
	}

	.stb__sous {
		margin-top: 18px;
		margin-left: 0;
		font-size: 22px;
		line-height: 24px;
		letter-spacing: 4px;
	}

	.stb .stb__bouton {
		min-width: 0;
		height: 44px;
		margin-top: 24px;
		padding: 0 22px;
		font-size: 21px;
	}

	.stb__barre {
		width: 40px;
	}
}

/* Le bandeau occupe toute la largeur : on retire la marge de la colonne Elementor qui le contient */
.elementor-widget-wrap:has(> .elementor-widget-shortcode .stb) {
	padding: 0 !important;
}