/* Hallmark · macrostructure: Marquee Hero (full-bleed photo, headline bottom-left, CTA column right) · tone: utilitarian
 * theme: studied-DNA (source: image "Pratama Renewal" fournie par le client) · studied: yes · DNA-source: image
 * photo oklch overlay ink 18% · text white · accent oklch(57% 0.23 27) rouge France Tractor #ed0000
 * display: Plus Jakarta Sans 300 · body: Inter 400/500 (déjà chargées par Uncode)
 * nav: header Uncode existant, rendu transparent sur l'accueil jusqu'au scroll · enrichment: photo réelle client
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 */

/* ---------- Tokens ---------- */

.ft-hero,
.ft-transparent-header {
	--ft-color-white: oklch(100% 0 0);
	--ft-color-white-80: oklch(100% 0 0 / 0.82);
	--ft-color-white-65: oklch(100% 0 0 / 0.68);
	--ft-color-white-line: oklch(100% 0 0 / 0.28);
	--ft-color-ink: oklch(18% 0.02 275);
	--ft-color-shade-strong: oklch(14% 0.02 275 / 0.78);
	--ft-color-shade-mid: oklch(14% 0.02 275 / 0.32);
	--ft-color-shade-top: oklch(14% 0.02 275 / 0.45);
	--ft-color-shade-none: oklch(14% 0.02 275 / 0);
	--ft-color-shade-side: oklch(8% 0.01 275 / 0.85);
	--ft-color-accent: oklch(57% 0.23 27);
	--ft-color-accent-hover: oklch(50% 0.21 27);
	--ft-color-focus: oklch(100% 0 0);

	--ft-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
	--ft-font-body: "Inter", system-ui, sans-serif;

	--ft-text-title: clamp(1.75rem, 1.1rem + 2.3vw, 3.25rem);
	--ft-text-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--ft-text-note: 0.9375rem;
	--ft-text-cta: 0.8125rem;

	--ft-space-sm: 0.75rem;
	--ft-space-md: 1rem;
	--ft-space-lg: 1.5rem;
	--ft-space-xl: 2.5rem;
	--ft-space-2xl: 4rem;

	--ft-radius-cta: 4px;

	--ft-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ft-dur-fast: 180ms;
	--ft-dur-header: 220ms;
}

/* ---------- Hero plein écran ---------- */

.ft-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	/* La rangée remonte sous le menu (voir .ft-hero-row) ; on rend cet espace en padding. */
	padding-top: var(--ft-header-h, 58px);
	/* Au moins la hauteur de l'écran (moins la barre d'infos), mesurée une seule fois en JS.
	 * svh = hauteur stable : ne bouge pas quand la barre d'adresse mobile apparaît/disparaît.
	 * min-height (pas height) : si le texte est plus haut que l'écran, le hero grandit au lieu de couper. */
	min-height: max(520px, calc(100svh - var(--ft-topbar-h, 34px)));
	color: var(--ft-color-white);
	font-family: var(--ft-font-body);
	overflow: clip;
}

/* Rangée WPBakery qui contient [ft_hero] (classe « ft-hero-row ») : remonte sous le menu.
 * Uncode force margin-top:0 sur le 1er enfant d'une colonne, d'où le décalage porté par la rangée. */
.ft-transparent-header .vc_row.ft-hero-row {
	margin-top: calc(-1 * var(--ft-header-h, 58px));
}

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

.ft-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ft-hero__bg picture {
	display: contents;
}

.ft-hero .ft-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 60%;
}

/* Voile : sombre en bas (lisibilité du texte) et léger en haut (lisibilité du menu blanc). */
.ft-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--ft-color-shade-strong) 0%, var(--ft-color-shade-mid) 48%, var(--ft-color-shade-none) 70%),
		linear-gradient(to right, var(--ft-color-shade-mid) 0%, var(--ft-color-shade-none) 60%),
		linear-gradient(to bottom, var(--ft-color-shade-top) 0%, var(--ft-color-shade-none) 22%);
}

/* Dégradé noir → transparent derrière la colonne de droite (texte + bouton), desktop uniquement. */
@media (min-width: 1024px) {
	.ft-hero__bg::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: radial-gradient(ellipse 48% 62% at 100% 100%, var(--ft-color-shade-side) 0%, var(--ft-color-shade-none) 100%);
	}
}

.ft-hero__content {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--ft-space-2xl) clamp(1rem, 0.4rem + 2.6vw, 2.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ft-space-xl);
	align-items: end;
}

.ft-hero__main,
.ft-hero__side {
	min-width: 0;
}

.ft-hero .ft-hero__title {
	margin: 0 0 var(--ft-space-lg);
	padding: 0;
	max-width: 28ch;
	font-family: var(--ft-font-display);
	font-size: var(--ft-text-title);
	font-weight: 300;
	font-style: normal;
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-transform: none;
	color: var(--ft-color-white);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.ft-hero__title-strong {
	color: var(--ft-color-white);
}

.ft-hero__title-soft {
	color: var(--ft-color-white-80);
}

.ft-hero .ft-hero__lead {
	margin: 0;
	max-width: 40ch;
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-lead);
	font-weight: 400;
	line-height: 1.55;
	color: var(--ft-color-white-80);
}

.ft-hero__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ft-space-lg);
	padding-top: var(--ft-space-lg);
	border-top: 1px solid var(--ft-color-white-line);
}

.ft-hero .ft-hero__note {
	margin: 0;
	max-width: 38ch;
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-note);
	line-height: 1.55;
	color: var(--ft-color-white-65);
}

/* ---------- CTA ---------- */
/* Spécificité renforcée : Uncode colore « .style-light a:hover » en navy. */

.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ft-space-sm);
	min-height: 48px;
	padding: 0 1.25rem;
	border-radius: var(--ft-radius-cta);
	background: var(--ft-color-accent);
	color: var(--ft-color-white);
	font-family: var(--ft-font-display);
	font-size: var(--ft-text-cta);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ft-dur-fast) var(--ft-ease-out), color var(--ft-dur-fast) var(--ft-ease-out);
}

.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta .ft-hero__cta-label {
	color: inherit;
}

.ft-hero__cta-icon {
	flex: none;
	transition: transform var(--ft-dur-fast) var(--ft-ease-out);
}

.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta:hover,
.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta:focus {
	background: var(--ft-color-white);
	color: var(--ft-color-ink);
}

.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta:hover .ft-hero__cta-icon {
	transform: translate(2px, -2px);
}

.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta:active {
	background: var(--ft-color-accent-hover);
	color: var(--ft-color-white);
}

.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta:focus-visible {
	outline: 2px solid var(--ft-color-focus);
	outline-offset: 3px;
}

/* ---------- Mobile : voile plus dense, la photo est plus chargée à cette taille ---------- */

@media (max-width: 767.98px) {
	.ft-hero__bg::after {
		background:
			linear-gradient(to top, var(--ft-color-shade-strong) 0%, var(--ft-color-shade-strong) 35%, var(--ft-color-shade-mid) 70%, var(--ft-color-shade-top) 100%);
	}
}

/* Mobile : place réservée sous le bouton pour les widgets fixes (chat Tawk, bouton cookies). */
@media (max-width: 767.98px) {
	.ft-hero__content {
		padding-bottom: 96px;
	}
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
	.ft-hero__content {
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
		gap: var(--ft-space-2xl);
	}
}

/* ---------- Header transparent (accueil, avant scroll) ---------- */

.ft-transparent-header #masthead {
	position: relative;
	z-index: 40;
}

.ft-transparent-header #masthead .menu-container,
.ft-transparent-header #masthead .menu-container::after,
.ft-transparent-header #masthead .menu-smart > li > a,
.ft-transparent-header #masthead .logo-image img {
	transition:
		background-color var(--ft-dur-header) var(--ft-ease-out),
		color var(--ft-dur-header) var(--ft-ease-out),
		box-shadow var(--ft-dur-header) var(--ft-ease-out),
		filter var(--ft-dur-header) var(--ft-ease-out),
		opacity var(--ft-dur-header) var(--ft-ease-out);
}

.ft-transparent-header:not(.ft-scrolled) #masthead .menu-container {
	background-color: transparent !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

.ft-transparent-header:not(.ft-scrolled) #masthead .menu-container::after {
	opacity: 0;
}

.ft-transparent-header:not(.ft-scrolled) #masthead .logo-image img {
	filter: brightness(0) invert(1);
}

/* Desktop uniquement (≥ 960px, seuil mobile d'Uncode) : liens de 1er niveau en blanc.
 * Sur mobile, ces mêmes liens sont dans le menu latéral à fond blanc : ils doivent garder leurs couleurs. */
@media (min-width: 960px) {
	.ft-transparent-header:not(.ft-scrolled) #masthead .menu-smart > li > a,
	.ft-transparent-header:not(.ft-scrolled) #masthead .menu-smart > li > a i,
	.ft-transparent-header:not(.ft-scrolled) #masthead .menu-smart > li > a span {
		color: var(--ft-color-white) !important;
	}

	.ft-transparent-header:not(.ft-scrolled) #masthead .menu-smart > li.current-menu-item > a {
		color: var(--ft-color-white-65) !important;
	}
}

/* Mobile : seulement les icônes de la barre (recherche, compte, panier) et le burger. */
.ft-transparent-header:not(.ft-scrolled) #masthead .mobile-additional-icons a,
.ft-transparent-header:not(.ft-scrolled) #masthead .mobile-additional-icons a i {
	color: var(--ft-color-white) !important;
}

.ft-transparent-header:not(.ft-scrolled) #masthead .lines,
.ft-transparent-header:not(.ft-scrolled) #masthead .lines::before,
.ft-transparent-header:not(.ft-scrolled) #masthead .lines::after {
	background-color: var(--ft-color-white) !important;
}

/* Accueil : le menu reste visible au défilement (annule « masquer le menu au scroll » d'Uncode sur mobile). */
.ft-transparent-header #masthead .menu-container.menu-hided {
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta,
	.ft-hero__cta-icon,
	.ft-transparent-header #masthead .menu-container,
	.ft-transparent-header #masthead .menu-container::after,
	.ft-transparent-header #masthead .menu-smart > li > a,
	.ft-transparent-header #masthead .logo-image img {
		transition: none;
	}

	.ft-hero .ft-hero__content a.ft-hero__cta.ft-hero__cta:hover .ft-hero__cta-icon {
		transform: none;
	}
}