/**
 * Widget « FTI — Hero carrousel ».
 *
 * Silhouette à décrochements (coins arrondis haut-gauche + bas-droite, encoches haut-droite + bas-gauche)
 * découpée par un clip-path vectoriel piloté en JavaScript (tracé par breakpoint, voir fti-hero-carrousel.js),
 * avec un clip-path CSS de repli en attendant le script.
 *
 * Régimes : mobile/tablette → image puis texte empilés en flux normal (texte foncé) ; desktop → texte en
 * surimpression à gauche de l'image (texte clair + voile). Les valeurs se branchent sur les variables du
 * design system FTI, avec repli.
 */

/* Le widget impose sa pleine largeur : le hero est full-bleed et ne doit pas dépendre de l'étirement
   du conteneur parent. Dans un conteneur flex réglé sur « align-items: flex-start » (pas d'étirement),
   un enfant sans largeur intrinsèque — ici image en fond CSS + texte en absolu sur desktop — s'effondrerait
   à zéro, et l'aspect-ratio ne produirait plus aucune hauteur. On fixe donc 100 % sur l'enveloppe. */
.elementor-widget-fti-hero-carrousel {
	width: 100%;
}

.elementor-widget-fti-hero-carrousel > .elementor-widget-container {
	width: 100%;
}

.fti-hero {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--layout-max, 1280px);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fti-hero *,
.fti-hero *::before,
.fti-hero *::after {
	box-sizing: border-box;
}

/* ---- Média (cadre + image) ------------------------------------------------ */

.fti-hero__media {
	position: relative;
}

/* La silhouette (coins arrondis haut-gauche / bas-droite + décrochements haut-droite / bas-gauche) est
   découpée par un clip-path vectoriel. Le tracé courbe, en pixels réels, est construit par le script à chaque
   changement de taille du cadre ; les coins et décrochements gardent un rayon fixe, seules les arêtes droites
   s'allongent. La règle ci-dessous fournit un clip-path CSS appliqué tant que le script n'a pas posé sa valeur
   inline (qui, étant inline, reste prioritaire). */
.fti-hero__frame {
	position: relative;
	box-sizing: content-box;
	width: 100%;
	height: 0;
	padding-top: min(119.4444%, 450px); /* ratio 430/360, hauteur plafonnée à 450 px (mobile) */
	-webkit-clip-path: url(#fti-hero-silhouette);
	clip-path: url(#fti-hero-silhouette);
}

/* Anti-flash : le script pose le clip-path exact (coins à rayon fixe) puis marque le cadre
   « data-clip-ready ». Tant que ce n'est pas fait, on masque le cadre pour ne pas laisser voir
   le basculement du repli vers le tracé du script. Filet de sécurité : si le script ne venait
   pas (JS absent), le cadre est révélé automatiquement après 1,2 s — le clip-path CSS de repli
   reste alors actif, donc la silhouette est tout de même présente. */
.fti-hero__frame:not( [data-clip-ready] ) {
	visibility: hidden;
	opacity: 0;
	/* Filet de sécurité : si le script ne vient pas, révélation + fondu après 1,2 s. */
	animation: fti-hero-clip-reveal 0.45s ease 1.2s forwards;
}
/* À la pose du masque par le script, le cadre apparaît en fondu (le fondu croisé des slides,
   qui joue sur .fti-hero__slide, n'est pas affecté). */
.fti-hero__frame[data-clip-ready] {
	animation: fti-hero-clip-reveal 0.45s ease both;
}
@keyframes fti-hero-clip-reveal {
	from { opacity: 0; }
	to   { opacity: 1; visibility: visible; }
}
@media ( prefers-reduced-motion: reduce ) {
	.fti-hero__frame:not( [data-clip-ready] ),
	.fti-hero__frame[data-clip-ready] {
		animation-duration: 0s;
	}
}

/* Repli par breakpoint (silhouettes aux proportions distinctes), en boîte englobante. Le tracé exact posé en
   inline par le script reste prioritaire. */
@media (min-width: 768px) and (max-width: 1024.98px) {

	.fti-hero__frame {
		-webkit-clip-path: url(#fti-hero-silhouette-tablet);
		clip-path: url(#fti-hero-silhouette-tablet);
	}
}

@media (max-width: 767.98px) {

	.fti-hero__frame {
		-webkit-clip-path: url(#fti-hero-silhouette-mobile);
		clip-path: url(#fti-hero-silhouette-mobile);
	}
}

.fti-hero__slides {
	position: absolute;
	inset: 0;
}

.fti-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
}

.fti-hero__slide.is-active {
	opacity: 1;
}

/* Fondu croisé (mode slide). Désactivé si l'utilisateur réduit les animations. */
.fti-hero--slide .fti-hero__slide {
	transition: opacity 0.9s ease;
}

.fti-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: none;
}

/* ---- Texte ---------------------------------------------------------------- */

.fti-hero__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--p-ink, #141b26);
}

/* Sélecteur à 2 classes (.fti-hero .fti-hero__title, spécificité 0,2,0) pour avoir priorité sur le
   style par défaut du kit Elementor, scopé en .elementor-kit-6 h1 (0,2,1 avec le wrapper, 0,1,1 sinon) :
   sans cela le kit applique sa couleur/graisse/interligne au titre. Mobile + tablette : titre noir. */
.fti-hero .fti-hero__title {
	margin: 0;
	color: #000;
	font-family: var(--font-title, "Aptos", system-ui, sans-serif);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.7px;
	font-size: var(--text-h1-sm, 40px);
}

.fti-hero__lead {
	margin: 0;
	font-family: var(--font-body, "Aptos", system-ui, sans-serif);
	font-weight: 700;
	line-height: 1.3;
	font-size: var(--text-lead-sm, 18px);
}

.fti-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	align-self: flex-start;
	height: 60px;
	min-height: 60px;
	padding: 0 32px;
	border-radius: 9999px;
	background: var(--p-brand-secondary, #3889ff);
	color: var(--color-text-inverse, #ffffff);
	font-family: var(--font-body, "Aptos", system-ui, sans-serif);
	font-weight: 700;
	font-size: var(--text-body-sm, 16px);
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.35s ease, color 0.35s ease;
}

/* Hover mobile + tablette : le fond passe en brand-primary (bleu foncé), le texte reste blanc. */
.fti-hero__btn:hover,
.fti-hero__btn:focus-visible {
	background: var(--p-brand-primary, #123347);
}

.fti-hero__btn:focus-visible {
	outline: 2px solid var(--p-brand-secondary, #3889ff);
	outline-offset: 2px;
}

/* Quand le bouton porte un lien (<a>), il hérite de la couleur de lien globale (bleu) : on fixe le texte
   et l'icône du bouton en blanc, dans tous les états, y compris sur le span interne. */
.fti-hero__btn,
.fti-hero__btn:link,
.fti-hero__btn:visited,
.fti-hero__btn:hover,
.fti-hero__btn:focus,
.fti-hero__btn:active,
.fti-hero__btn span {
	color: var(--color-text-inverse, #ffffff) !important;
}

.fti-hero__arrow {
	flex: 0 0 auto;
}

/* Mobile + tablette (régime empilé) : léger espace au-dessus du titre et du bouton. */
@media (max-width: 1024.98px) {

	.fti-hero .fti-hero__title,
	.fti-hero__btn {
		margin-top: 10px;
	}
}

/* ---- Tablette ------------------------------------------------------------- */

@media (min-width: 768px) {

	.fti-hero {
		gap: 32px;
	}

	.fti-hero__frame {
		padding-top: min(81.25%, 650px); /* ratio 13/16, hauteur plafonnée à 650 px (tablette) */
	}

	.fti-hero .fti-hero__title {
		font-size: var(--text-h1-md, 52px);
	}

	.fti-hero__lead {
		font-size: var(--text-lead-md, 23px);
	}

	.fti-hero__btn {
		font-size: var(--text-body-md, 18px);
	}
}

/* ---- Desktop : texte en surimpression ------------------------------------- */

@media (min-width: 1025px) {

	.fti-hero {
		position: relative;
		display: block;
	}

	.fti-hero__frame {
		padding-top: 68.75%; /* ratio 880/1280, sans plafond (desktop) */
	}

	.fti-hero__text {
		position: absolute;
		inset: 0;
		z-index: 2;
		width: min(800px, 62%);
		justify-content: center;
		gap: 40px;
		/* Le creux bas (décrochement bas-gauche) fait 80 px sur une image de 880, soit 6,25 % de la largeur
		   (80 / 1280). On ajoute ce creux en padding bas : avec un centrage vertical, le bloc remonte d'un
		   demi-creux et se centre dans la zone réellement libre (hauteur de l'image moins le creux). */
		padding: 50px;
		padding-bottom: calc(50px + 6.25%);
		color: var(--color-text-inverse, #ffffff);
	}

	.fti-hero .fti-hero__title {
		font-size: var(--text-h1-lg, 80px);
		line-height: 1;
		color: #fff; /* Desktop : texte en surimpression sur l'image → titre blanc. */
	}

	.fti-hero__lead {
		font-size: var(--text-lead-lg, 26px);
		line-height: 1.31;
	}

	.fti-hero__btn {
		font-size: var(--text-body-lg, 20px);
	}

	/* Hover desktop : inversion — fond blanc, texte et icône bleus. */
	.fti-hero__btn:hover,
	.fti-hero__btn:focus-visible {
		background: var(--color-surface-lightest, #ffffff);
		color: var(--p-brand-secondary, #3889ff) !important;
	}

	.fti-hero__btn:hover span,
	.fti-hero__btn:focus-visible span {
		color: var(--p-brand-secondary, #3889ff) !important;
	}

	.fti-hero.has-scrim .fti-hero__scrim {
		display: block;
		background: linear-gradient(
			90deg,
			rgba(7, 12, 20, 0.78) 0%,
			rgba(7, 12, 20, 0.45) 38%,
			rgba(7, 12, 20, 0) 66%
		);
	}
}

/* ---- Desktop étroit (1025–1099) ------------------------------------------- */

/* Dans les basses largeurs desktop, le panneau de texte en surimpression occupe toute la largeur du
   cadre pour éviter que le titre ne percute l'image. */
@media (min-width: 1025px) and (max-width: 1099.98px) {

	.fti-hero__text {
		width: 100%;
	}
}

/* ---- Accessibilité : réduction des animations ----------------------------- */

@media (prefers-reduced-motion: reduce) {

	.fti-hero--slide .fti-hero__slide {
		transition: none;
	}
}