/* =============================================================================
   LANTADELI — Homepage (front-page.html)
   Toutes les règles sont scopées `.lanta-fp` ou `.lanta-fp-*` pour ne JAMAIS
   leaker sur les autres pages et ne pas hériter de l'ancienne signature
   `.lanta-hero` / `.lanta-featured` / `.lanta-univers` qui vit dans style.css.
   Mobile-first. Breakpoints : 768px (tablette), 1024px (desktop).

   DIRECTION (v2.12.0) : CAMAÏEU PAPIER fluide. UN SEUL ton ivoire/sable
   chaud qui parcourt toute la home, transitions par filets champagne et
   gradients très subtle. Aucun color block. Les seuls accents colorés
   viennent des photos produits. Richesse texturale (grain papier inline
   SVG) + typographique (drop cap, numérotation), pas chromatique.
   Référence : Polène, Acne, Aesop.
   ============================================================================= */

.lanta-fp {
	/* Camaïeu papier — variations très proches d'un même ton chaud, du plus
	   clair au plus sombre. Aucun saut chromatique entre sections. */
	--lfp-paper:    #FAF5EC;       /* fond le plus clair (sélection) */
	--lfp-paper-2:  #F5EEDF;       /* fond médian (manifesto, univers) */
	--lfp-paper-3:  #EBE2CF;       /* fond le plus chaud (réassurance) */
	--lfp-cream:    #FBF8F4;       /* texte clair sur fond sombre (hero/cta) */

	/* Champagne sourd — accent UNIQUE (eyebrows, filets, règles, hover).
	   Volontairement mat et discret, anti-bling. */
	--lfp-accent:   var(--lu-accent);
	--lfp-accent-d: var(--lu-accent-strong);
	--lfp-rule:     rgba(168, 137, 107, 0.32);  /* filets inter-sections */

	/* Textes — chauds, jamais gris froid. */
	--lfp-ink:      #2E2925;       /* texte principal (plus chaud que contrast) */
	--lfp-ink-soft: #5C4D40;       /* texte secondaire */
	--lfp-mute:     #8A7A65;       /* texte tertiaire / leds */

	/* Hero/CTA overlays : anthracite chaud neutre, jamais teinté */
	--lfp-veil:     var(--lu-veil);    /* triplet rgb pour rgba() */

	/* Univers denim placeholder — anthracite chaud cohérent papier, pas bleu */
	--lfp-denim:      #2E2925;
	--lfp-denim-deep: #1A1612;

	/* Texture grain papier — SVG inline noise sépia ultra-discret (4% alpha).
	   Appliqué en background-image sur les fonds clairs pour casser le plat. */
	--lfp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.24 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

	--lfp-ease:      var(--lu-ease);
	--lfp-ease-slow: var(--lu-ease-slow);

	--lfp-pad-y-sm: clamp(3rem, 6vw, 4.5rem);
	--lfp-pad-y-md: clamp(4.5rem, 8vw, 7rem);
	--lfp-pad-x:    clamp(1.25rem, 4vw, 3rem);
}

/* Dark mode — l'accueil suit enfin la bascule du thème. On redéfinit seulement
   les tokens couleur --lfp-* vers un camaïeu SOMBRE chaud (mêmes valeurs que la
   palette dark de style.css), donc les fonds de section (qui utilisent
   var(--lfp-paper*) en !important) et tous les textes basculent automatiquement.
   L'accent (--lfp-accent → --lu-accent) a déjà sa variante dark. Les sections en
   photo (hero, CTA final) restent inchangées : voile sombre + --lfp-cream. */
[data-theme="dark"] .lanta-fp {
	/* Camaïeu papier → camaïeu nuit (tons chauds très proches, pas de noir pur) */
	--lfp-paper:    #1B1814;
	--lfp-paper-2:  #201C18;
	--lfp-paper-3:  #25201B;
	/* Textes — clairs et chauds (mirroir --lanta-noir / -soft / grey en dark) */
	--lfp-ink:      #E8E2D9;
	--lfp-ink-soft: #C8C0B6;
	--lfp-mute:     #A8A29E;
	/* --lfp-cream reste clair (texte sur voile photo sombre). --lfp-accent/-d
	   héritent de --lu-* (variantes dark déjà définies). --lfp-rule est une rgba
	   champagne fixe : son rendu sur fond sombre reste un filet chaud discret. */
}

/* -----------------------------------------------------------------------------
   Eyebrow — micro-label champagne sourd
   ----------------------------------------------------------------------------- */
.lanta-fp .lanta-fp-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--lfp-accent-d);
	margin: 0 0 1.6rem;
	line-height: 1;
}
.lanta-fp .lanta-fp-eyebrow--light {
	color: var(--lfp-accent);
	opacity: 0.95;
}

/* -----------------------------------------------------------------------------
   Buttons — accent unique champagne sourd plein + ghost outline + outline ink
   ----------------------------------------------------------------------------- */
.lanta-fp .lanta-fp-btn .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 1.05rem 2.6rem;
	border-radius: 2px;
	transition: background-color 350ms var(--lfp-ease),
	            color 350ms var(--lfp-ease),
	            border-color 350ms var(--lfp-ease);
}
/* Bouton doré : aligné sur les tokens CTA du site (texte FONCÉ sur champagne),
   contraste AA dans les deux modes — corrige le texte cream illisible (3:1). */
.lanta-fp .lanta-fp-btn--gold .wp-block-button__link {
	background-color: var(--lanta-cta-bg);
	color: var(--lanta-cta-fg);
	border: 1px solid var(--lanta-cta-bg);
}
.lanta-fp .lanta-fp-btn--gold .wp-block-button__link:hover,
.lanta-fp .lanta-fp-btn--gold .wp-block-button__link:focus-visible {
	background-color: var(--lanta-cta-bg-hover);
	color: var(--lanta-cta-fg-hover);
	border-color: var(--lanta-cta-bg-hover);
}
.lanta-fp .lanta-fp-btn--ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.65);
}
.lanta-fp .lanta-fp-btn--ghost .wp-block-button__link:hover,
.lanta-fp .lanta-fp-btn--ghost .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}
.lanta-fp .lanta-fp-btn--outline .wp-block-button__link {
	background: transparent;
	color: var(--lfp-ink);
	border: 1px solid var(--lfp-ink);
}
.lanta-fp .lanta-fp-btn--outline .wp-block-button__link:hover,
.lanta-fp .lanta-fp-btn--outline .wp-block-button__link:focus-visible {
	background-color: var(--lfp-ink);
	color: var(--lfp-paper);
}

/* =============================================================================
   A. HERO — overlay anthracite chaud neutre (zéro teinte couleur)
   ============================================================================= */
.lanta-fp .lanta-fp-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
}
.lanta-fp .lanta-fp-hero .wp-block-cover__image-background {
	object-position: center 40%;
	filter: saturate(0.88) brightness(0.96);
}
.lanta-fp .lanta-fp-hero > .wp-block-cover__background.has-background-dim {
	opacity: 0;
}
.lanta-fp .lanta-fp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(var(--lfp-veil), 0.62) 0%,
		rgba(var(--lfp-veil), 0.28) 38%,
		rgba(var(--lfp-veil), 0) 70%);
	pointer-events: none;
	z-index: 1;
}
.lanta-fp .lanta-fp-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
.lanta-fp .lanta-fp-hero__inner {
	max-width: 920px;
	margin: 0 auto;
	padding: 4rem 0;
	text-align: center;
}
.lanta-fp .lanta-fp-hero__wordmark {
	font-size: clamp(3.6rem, 13vw, 9rem);
	font-weight: 300;
	letter-spacing: 0.18em;
	line-height: 0.92;
	color: var(--lfp-cream);
	margin: 0.6rem 0 1.4rem;
	text-shadow: 0 1px 32px rgba(0, 0, 0, 0.28);
}
.lanta-fp .lanta-fp-hero__tagline {
	font-size: clamp(1.05rem, 1.9vw, 1.4rem);
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 2.8rem;
}
.lanta-fp .lanta-fp-hero__actions {
	margin-top: 1.2rem;
	gap: 1rem !important;
	flex-wrap: wrap;
}
/* Hero reassurance bar — branchée à lantadeli_hero_reassurance via binding
   lantadeli/option (transform sep_typo). Discrète, sous les CTA. */
.lanta-fp .lanta-fp-hero__reassurance {
	margin: 1.6rem 0 0;
	font-family: 'DM Sans', 'Inter', sans-serif;
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lfp-cream); /* texte sur voile photo sombre — toujours clair (était --lanta-cream, devenait noir en dark) */
	opacity: 0.7;
}
.lanta-fp .lanta-fp-hero__scroll {
	position: absolute;
	bottom: 2.2rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 56px;
	display: block;
	overflow: hidden;
	z-index: 2;
}
.lanta-fp .lanta-fp-hero__scroll-line {
	display: block;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	transform: translateY(-100%);
	animation: lanta-fp-scroll-pulse 2.4s var(--lfp-ease-slow) infinite;
}
@keyframes lanta-fp-scroll-pulse {
	0%   { transform: translateY(-100%); }
	60%  { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

/* =============================================================================
   B. MANIFESTO — fond papier-2, drop cap ink, grain papier
   ============================================================================= */
.lanta-fp .lanta-fp-manifesto {
	padding: var(--lfp-pad-y-md) var(--lfp-pad-x);
	text-align: center;
	position: relative;
}
.lanta-fp .lanta-fp-manifesto__lead {
	font-size: clamp(1.7rem, 3.8vw, 2.6rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--lfp-ink);
	margin: 0 0 2.2rem;
}
.lanta-fp .lanta-fp-manifesto__body {
	font-size: clamp(0.94rem, 1.3vw, 1.05rem);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.005em;
	color: var(--lfp-ink-soft);
	margin: 0 0 1.4rem;
}
.lanta-fp .lanta-fp-rule {
	width: 48px;
	height: 1px;
	background: var(--lfp-accent);
	border: 0;
	margin: 3rem auto 0;
	opacity: 0.7;
}

/* =============================================================================
   C. UNIVERS — fond papier-2, cards veil neutre (couleurs viennent des photos)
   ============================================================================= */
.lanta-fp .lanta-fp-univers {
	padding: var(--lfp-pad-y-md) var(--lfp-pad-x);
	position: relative;
}
/* =============================================================================
   D. SÉLECTION (Woo product collection) — fond paper le plus clair
   ============================================================================= */
.lanta-fp .lanta-fp-selection {
	padding: var(--lfp-pad-y-md) var(--lfp-pad-x);
	text-align: center;
	position: relative;
}
.lanta-fp .lanta-fp-section__title {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	font-weight: 300;
	letter-spacing: -0.005em;
	line-height: 1.05;
	color: var(--lfp-ink);
	margin: 0 0 0.8rem;
}
.lanta-fp .lanta-fp-section__title em {
	font-style: italic;
}
.lanta-fp .lanta-fp-section__lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--lfp-mute);
	margin: 0 0 3rem;
}
.lanta-fp .lanta-fp-selection__grid {
	margin: 0 auto 2.6rem;
}
.lanta-fp .lanta-fp-selection__grid .wp-block-woocommerce-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem 1rem;
}
.lanta-fp .lanta-fp-selection__grid .wp-block-woocommerce-product-template > li,
.lanta-fp .lanta-fp-selection__grid .wp-block-post {
	list-style: none;
	margin: 0;
}
.lanta-fp .lanta-fp-selection__grid .wc-block-components-product-image img,
.lanta-fp .lanta-fp-selection__grid .wp-block-woocommerce-product-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 700ms var(--lfp-ease);
}
.lanta-fp .lanta-fp-selection__grid .wc-block-components-product-image:hover img,
.lanta-fp .lanta-fp-selection__grid .wp-block-woocommerce-product-image:hover img {
	transform: scale(1.04);
}
.lanta-fp .lanta-fp-selection__grid .wp-block-post-title {
	margin: 0.9rem 0 0.3rem;
}
.lanta-fp .lanta-fp-selection__grid .wp-block-post-title a {
	color: var(--lfp-ink);
	text-decoration: none;
	transition: color 250ms var(--lfp-ease);
}
.lanta-fp .lanta-fp-selection__grid .wp-block-post-title a:hover {
	color: var(--lfp-accent-d);
}
.lanta-fp .lanta-fp-selection__grid .wp-block-woocommerce-product-price {
	color: var(--lfp-ink-soft);
	margin-bottom: 0.5rem;
}

/* =============================================================================
   E. RÉASSURANCE — fond paper-3 (légèrement plus chaud, mais MÊME famille)
   ============================================================================= */
.lanta-fp .lanta-fp-reassurance {
	padding: var(--lfp-pad-y-sm) var(--lfp-pad-x);
	position: relative;
}
.lanta-fp .lanta-fp-reassurance__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
.lanta-fp .lanta-fp-reassurance__col {
	text-align: center;
	padding: 0 0.5rem;
}
.lanta-fp .lanta-fp-reassurance__icon {
	color: var(--lfp-accent-d);
	margin-bottom: 1.1rem;
	display: inline-block;
}
.lanta-fp .lanta-fp-reassurance__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--lfp-ink);
	margin: 0 0 0.6rem;
}
.lanta-fp .lanta-fp-reassurance__body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--lfp-ink-soft);
	margin: 0;
	max-width: 38ch;
	margin-inline: auto;
}

/* =============================================================================
   F. CTA FINAL — wash neutre anthracite chaud (pas de teinte couleur)
   ============================================================================= */
.lanta-fp .lanta-fp-cta {
	position: relative;
}
.lanta-fp .lanta-fp-cta > .wp-block-cover__background.has-background-dim {
	opacity: 0;
}
.lanta-fp .lanta-fp-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(var(--lfp-veil), 0.78) 0%,
		rgba(var(--lfp-veil), 0.42) 45%,
		rgba(var(--lfp-veil), 0.10) 85%);
	pointer-events: none;
	z-index: 1;
}
.lanta-fp .lanta-fp-cta > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
.lanta-fp .lanta-fp-cta__title {
	font-size: clamp(1.7rem, 3.5vw, 2.6rem);
	font-weight: 300;
	letter-spacing: -0.005em;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
}
.lanta-fp .lanta-fp-cta__title em {
	font-style: italic;
	color: var(--lfp-accent);
}
.lanta-fp .lanta-fp-cta__lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.88rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 2rem;
}

/* =============================================================================
   CAMAÏEU PAPIER — OVERRIDES + TEXTURE + FILETS
   - Backgrounds Gutenberg surchargés vers les 3 nuances papier (faible amplitude
     pour gardir l'unité chromatique : 3 valeurs très proches, jamais de saut).
   - Grain papier SVG inline sur tous les fonds clairs (~4% noise sépia).
   - Filets champagne 1px entre sections (au lieu de murs colorés).
   ============================================================================= */
.lanta-fp .lanta-fp-manifesto.has-accent-4-background-color,
.lanta-fp .lanta-fp-univers.has-base-background-color {
	background-color: var(--lfp-paper-2) !important;
	background-image: var(--lfp-grain);
	background-repeat: repeat;
	background-size: 220px 220px;
}
.lanta-fp .lanta-fp-selection.has-base-2-background-color {
	background-color: var(--lfp-paper) !important;
	background-image: var(--lfp-grain);
	background-repeat: repeat;
	background-size: 220px 220px;
}
.lanta-fp .lanta-fp-reassurance.has-accent-4-background-color {
	background-color: var(--lfp-paper-3) !important;
	background-image: var(--lfp-grain);
	background-repeat: repeat;
	background-size: 220px 220px;
}

/* Filets champagne 1px sur chaque section claire — remplace les transitions
   brutales par une ponctuation typographique discrète. */
.lanta-fp .lanta-fp-manifesto::before,
.lanta-fp .lanta-fp-univers::before,
.lanta-fp .lanta-fp-selection::before,
.lanta-fp .lanta-fp-reassurance::before {
	content: "";
	display: block;
	width: clamp(40px, 6vw, 72px);
	height: 1px;
	background: var(--lfp-rule);
	margin: 0 auto 2.5rem;
}
/* Réassurance : un peu plus aérée — pas de filet en haut (transition douce
   depuis sélection cream → réassurance papier-3 plus chaud). */
.lanta-fp .lanta-fp-reassurance::before { display: none; }

/* =============================================================================
   RESPONSIVE — Tablette (≥ 768px)
   ============================================================================= */
@media (min-width: 768px) {
	.lanta-fp .lanta-fp-reassurance__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem;
	}
	.lanta-fp .lanta-fp-reassurance__col + .lanta-fp-reassurance__col {
		border-left: 1px solid var(--lfp-rule);
	}
	.lanta-fp .lanta-fp-selection__grid .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem 1.2rem;
	}
}

/* =============================================================================
   RESPONSIVE — Desktop (≥ 1024px) — grille univers asymétrique
   ============================================================================= */
@media (min-width: 1024px) {
	.lanta-fp .lanta-fp-selection__grid .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem 1.4rem;
	}
	.lanta-fp .lanta-fp-hero__inner { padding: 0; }
}

/* =============================================================================
   RESPONSIVE — Mobile fin (≤ 480px)
   ============================================================================= */
@media (max-width: 480px) {
	.lanta-fp .lanta-fp-hero__wordmark { letter-spacing: 0.12em; }
	.lanta-fp .lanta-fp-hero__actions {
		flex-direction: column;
		align-items: stretch !important;
		width: min(100%, 280px);
		margin-inline: auto;
	}
	.lanta-fp .lanta-fp-btn .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
	/* En mobile, la reassurance bar tient sur 2 lignes max — letter-spacing
	   réduit + line-height généreux pour ne pas écraser le texte. */
	.lanta-fp .lanta-fp-hero__reassurance {
		font-size: 0.6rem;
		letter-spacing: 0.14em;
		line-height: 1.6;
		margin-top: 1.2rem;
		padding-inline: 1rem;
	}
}

/* =============================================================================
   ACCESSIBILITÉ — reduce motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
	.lanta-fp *,
	.lanta-fp *::before,
	.lanta-fp *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.lanta-fp .lanta-fp-hero__scroll { display: none; }
}