/* =========================================================
   MIDDLE LAND — tokens de charte + polices
   Handle `mlt-tokens` : enregistré par le thème, jamais chargé
   globalement. Il n'arrive sur une page que par dépendance
   (widgets mlt-*, mlt-header, mlt-footer). Voir CLAUDE.md > Isolation.
   ========================================================= */

/* -------------------- Polices (woff2 locaux, OFL) -------------------- */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* Noto Sans Arabic : sous-ensemble « alphabet arabe de base » (lettres, voyelles, chiffres, ponctuation),
   ~10 Ko au lieu de 49 Ko (2026-10-22, fontTools ; originaux dans _design/backups/2026-10-22/etape-finitions/). */
@font-face {
	font-family: 'Noto Sans Arabic';
	src: url('../fonts/noto-sans-arabic-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+060C, U+061B, U+061F, U+0621-0652, U+0660-0669;
}
@font-face {
	font-family: 'Noto Sans Arabic';
	src: url('../fonts/noto-sans-arabic-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+060C, U+061B, U+061F, U+0621-0652, U+0660-0669;
}

/* -------------------- Tokens -------------------- */
:root {
	/* Couleurs de la charte (valeurs exactes) */
	--mlt-color-olive: #374222;
	--mlt-color-botanique: #4F7942;
	--mlt-color-ocre: #A8751A;   /* texte ≥ 18px ou gras ≥ 14px uniquement (4.0:1 sur blanc) */

	/* Neutres (repris de l'existant) */
	--mlt-color-texte: #171B12;
	--mlt-color-texte-doux: #5E6152;  /* texte secondaire sur fond clair (≈ 6:1 sur --mlt-color-fond) */
	--mlt-color-fond: #F7F5F0;
	--mlt-color-blanc: #FFFFFF;

	/* Dérivés (transparences des couleurs ci-dessus) */
	--mlt-color-ligne: rgba(55, 66, 34, 0.14);        /* olive 14 % : séparateurs sur fond clair */
	--mlt-color-ligne-inverse: rgba(255, 255, 255, 0.2); /* séparateurs sur fond olive */
	--mlt-color-blanc-80: rgba(255, 255, 255, 0.82);  /* texte secondaire sur fond olive (≥ 7:1) */
	--mlt-color-ombre: rgba(23, 27, 18, 0.32);        /* ombre portée des objets détourés */

	/* Typographie */
	--mlt-font-latin: 'Montserrat', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif; /* Noto : glyphes arabes (ex. symbole د.ت), chargé seulement si besoin (unicode-range) */
	--mlt-font-arabe: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

	--mlt-fs-xsmall: 0.75rem;  /* étiquettes courtes uniquement (ex. libellés d'arches mobile) */
	--mlt-fs-small: 0.875rem;
	--mlt-fs-body: 1rem;
	--mlt-fs-lead: 1.125rem;
	--mlt-fs-h2: clamp(1.6rem, 2.6vw, 2.4rem);
	--mlt-fs-h1: clamp(2rem, 4.2vw, 3.4rem);
	--mlt-fs-display: clamp(2.75rem, 5.6vw, 5.75rem);  /* titre du hero */
	--mlt-lh-display: 0.98;
	--mlt-tracking-display: -0.035em;
	--mlt-lh-body: 1.6;
	--mlt-lh-title: 1.1;

	/* Espacements */
	--mlt-space-4: 4px;
	--mlt-space-8: 8px;
	--mlt-space-16: 16px;
	--mlt-space-24: 24px;
	--mlt-space-32: 32px;
	--mlt-space-48: 48px;
	--mlt-space-64: 64px;
	--mlt-space-96: 96px;

	--mlt-gutter: 16px;

	/* Formes */
	--mlt-radius-panel: 32px;
	--mlt-radius-card: 12px;
	--mlt-radius-pill: 999px;

	/* Mouvement */
	--mlt-duration: 200ms;
	--mlt-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out */
	--mlt-duration-reveal: 700ms; /* apparitions au scroll (home3, demande client 2026-10-02) */

	/* Unité d'échelle des maquettes 1440 px : 1px à 1440, proportionnelle en dessous */
	--mlt-u: min(1px, calc(100vw / 1440));

	/* Grain (bruit SVG) — texture légère des fonds olive */
	--mlt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	--mlt-grain-opacity: 0.09;

	/* Icônes (masques : la couleur vient de background-color: currentColor) */
	--mlt-icone-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
	--mlt-icone-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
	--mlt-icone-fleche-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M4 9l4 4 4-4'/%3E%3C/svg%3E");

	/* Focus */
	--mlt-focus-ring: 0 0 0 3px var(--mlt-color-blanc), 0 0 0 5px var(--mlt-color-botanique);
	--mlt-focus-ring-inverse: 0 0 0 2px var(--mlt-color-olive), 0 0 0 4px var(--mlt-color-blanc);

	/* Rythme des sections */
	--mlt-section-pad: clamp(72px, 8.4vw, 128px);               /* respiration verticale */
	--mlt-edge: max(var(--mlt-gutter), calc(120 * var(--mlt-u))); /* marge latérale des sections */
	--mlt-content-max: 1120px;                                 /* largeur max du contenu des sections (hors hero) */
	--mlt-section-max: calc(var(--mlt-content-max) + 2 * var(--mlt-edge));
	--mlt-fs-section: clamp(2.25rem, 4.4vw, 4rem);             /* titres de section (h2) */
}

@media (min-width: 1024px) {
	:root {
		--mlt-gutter: 32px;
	}
}

/* -------------------- Base de page Middle Land --------------------
   Classe `mlt-page` ajoutée sur <body> par le template home2 uniquement.
   Neutralise la typo ITF (Bricolage / Manrope) héritée de style.css. */
.mlt-page {
	font-family: var(--mlt-font-latin);
	font-size: var(--mlt-fs-body);
	line-height: var(--mlt-lh-body);
	color: var(--mlt-color-texte);
	background: var(--mlt-color-blanc);
}

/* Ancres de la page (#video, #echantillons…) : défilement doux, sauf « réduire les animations ».
   Les liens vers le devis de la page sont gérés par mlt-devis.js (sans rechargement). */
@media (prefers-reduced-motion: no-preference) {
	html:has(body.mlt-page) {
		scroll-behavior: smooth;
	}
}

.mlt-page h1,
.mlt-page h2,
.mlt-page h3,
.mlt-page h4,
.mlt-page h5,
.mlt-page h6 {
	font-family: var(--mlt-font-latin);
	line-height: var(--mlt-lh-title);
}

.mlt-page :lang(ar),
.mlt-ar {
	font-family: var(--mlt-font-arabe);
}

/* -------------------- Bouton Middle Land -------------------- */
.mlt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mlt-space-8);
	min-height: 48px;
	padding: 0 var(--mlt-space-24);
	border: 2px solid transparent;
	border-radius: var(--mlt-radius-pill);
	font-family: var(--mlt-font-latin);
	font-size: var(--mlt-fs-body);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mlt-duration) var(--mlt-ease),
		color var(--mlt-duration) var(--mlt-ease),
		border-color var(--mlt-duration) var(--mlt-ease);
}

.mlt-btn:focus-visible {
	outline: none;
	box-shadow: var(--mlt-focus-ring);
}

.mlt-btn[aria-disabled="true"],
.mlt-btn:disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Plein olive (sur fond clair) */
.mlt-btn--olive {
	background: var(--mlt-color-olive);
	color: var(--mlt-color-blanc);
}
.mlt-btn--olive:hover {
	background: var(--mlt-color-botanique);
}
.mlt-btn--olive:active {
	background: var(--mlt-color-texte);
}
/* reset.css (Hello Elementor) colore tous les liens au survol (a:hover, 0-1-1) :
   on réaffirme le texte blanc sur chaque état du bouton olive. */
.mlt-btn--olive:hover,
.mlt-btn--olive:active,
.mlt-btn--olive:focus,
.mlt-btn--olive:visited {
	color: var(--mlt-color-blanc);
}

/* Plein blanc (sur fond olive) */
.mlt-btn--blanc {
	background: var(--mlt-color-blanc);
	color: var(--mlt-color-olive);
}
.mlt-btn--blanc:hover {
	background: var(--mlt-color-fond);
	color: var(--mlt-color-botanique);
}
.mlt-btn--blanc:active {
	background: var(--mlt-color-fond);
	color: var(--mlt-color-texte);
}

/* Contour blanc (sur fond olive) */
.mlt-btn--contour-blanc {
	border-color: var(--mlt-color-blanc);
	color: var(--mlt-color-blanc);
	background: transparent;
}
.mlt-btn--contour-blanc:hover {
	background: var(--mlt-color-blanc);
	color: var(--mlt-color-olive);
}

/* -------------------- Briques de section (widgets mlt_*) -------------------- */
.mlt-section {
	position: relative;
	font-family: var(--mlt-font-latin);
	color: var(--mlt-color-texte);
}

.mlt-section__inner {
	position: relative;
	z-index: 1;
	max-width: var(--mlt-section-max);
	margin: 0 auto;
	padding: var(--mlt-section-pad) var(--mlt-edge);
}

/* Titre de section : graisse régulière olive (400, graisses de la charte : 400 / 500 / 700),
   ligne appuyée en option (signature du logo) */
.mlt-page .mlt-h2 {
	margin: 0;
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-section);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.mlt-h2__fort {
	display: block;
	font-weight: 500;
}

.mlt-section--olive .mlt-h2,
.mlt-section--olive .mlt-h2__fort {
	color: var(--mlt-color-blanc);
}

/* Sur-titre + filet (repris du hero) */
.mlt-kicker {
	display: flex;
	align-items: center;
	gap: var(--mlt-space-8);
	margin: 0 0 var(--mlt-space-24);
	color: var(--mlt-color-texte);
	font-size: var(--mlt-fs-small);
	font-weight: 700;
	line-height: 1.3;
}

.mlt-kicker::after {
	content: "";
	width: 64px;
	height: 2px;
	background: currentColor;
	opacity: 0.3;
}

.mlt-section--olive .mlt-kicker {
	color: var(--mlt-color-blanc);
}

.mlt-lead {
	max-width: 52ch;
	margin: var(--mlt-space-24) 0 0;
	color: var(--mlt-color-texte-doux);
	font-size: var(--mlt-fs-lead);
	line-height: var(--mlt-lh-body);
}

.mlt-section--olive .mlt-lead {
	color: var(--mlt-color-blanc-80);
}

/* Lien texte souligné — inline-block (et non flex) : si le texte passe à la ligne,
   la flèche suit le dernier mot. Hauteur ≥ 44 px : interligne 24 px + 2 × 10 px. */
.mlt-lien {
	display: inline-block;
	padding: 10px 0;
	line-height: 1.5;
	color: var(--mlt-color-olive);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: color var(--mlt-duration) var(--mlt-ease), text-underline-offset var(--mlt-duration) var(--mlt-ease);
}

.mlt-lien:hover {
	color: var(--mlt-color-botanique);
	text-underline-offset: 4px;
}

/* Flèche d'action (même style sur toutes les sections) ; pas sur les liens email / téléphone */
.mlt-lien::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: var(--mlt-space-8);
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: var(--mlt-icone-fleche) center / contain no-repeat;
	mask: var(--mlt-icone-fleche) center / contain no-repeat;
	transition: transform var(--mlt-duration) var(--mlt-ease);
}

.mlt-lien:hover::after,
.mlt-lien:focus-visible::after {
	transform: translateX(4px);
}

.mlt-lien[href^="mailto:"]::after,
.mlt-lien[href^="tel:"]::after {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.mlt-lien::after {
		transition: none;
	}
}

/* reset.css / Hello Elementor retire le soulignement des liens (sélecteur plus spécifique) :
   on le réaffirme sur les pages Middle Land. */
.mlt-page a.mlt-lien {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.mlt-lien:active {
	color: var(--mlt-color-texte);
}

.mlt-lien:focus-visible {
	outline: none;
	border-radius: var(--mlt-space-4);
	box-shadow: var(--mlt-focus-ring);
}

.mlt-section--olive .mlt-lien,
.mlt-lien--inverse {
	color: var(--mlt-color-blanc);
}

.mlt-section--olive .mlt-lien:hover,
.mlt-lien--inverse:hover {
	color: var(--mlt-color-fond);
}

.mlt-section--olive .mlt-lien:focus-visible,
.mlt-lien--inverse:focus-visible {
	box-shadow: var(--mlt-focus-ring-inverse);
}

/* Marque « [À FOURNIR] » : donnée client manquante, visible mais discrète */
.mlt-a-fournir {
	color: var(--mlt-color-texte-doux);
	font-style: italic;
}

/* -------------------- Frise d'étapes (widgets mlt_*, fond clair) --------------------
   Numéros dans une pastille cerclée d'ocre, reliés par un trait ocre (sillons du logo).
   Mobile : frise verticale. ≥ 768 px : frise horizontale, une colonne par étape.
   --mlt-frise-fond = couleur du fond de la section (la pastille masque le trait). */
.mlt-frise {
	--mlt-frise-gap: var(--mlt-space-24);
	--mlt-frise-fond: var(--mlt-color-blanc);
	display: grid;
	gap: var(--mlt-frise-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mlt-frise__etape {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: var(--mlt-space-16);
	align-content: start;
}

/* Trait vertical vers l'étape suivante */
.mlt-frise__etape::before {
	content: "";
	position: absolute;
	top: 40px;
	bottom: calc(-1 * var(--mlt-frise-gap));
	left: 19px;
	width: 2px;
	background: var(--mlt-color-ocre);
	transform-origin: center top;
}

.mlt-frise__etape:last-child::before {
	content: none;
}

.mlt-frise__num {
	position: relative;
	z-index: 1;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--mlt-color-ocre);
	border-radius: 50%;
	background: var(--mlt-frise-fond);
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mlt-frise__titre {
	align-self: center;
	min-height: 40px;
	display: flex;
	align-items: center;
	color: var(--mlt-color-texte);
	font-weight: 700;
	line-height: 1.3;
}

.mlt-frise__texte {
	color: var(--mlt-color-texte-doux);
	font-size: var(--mlt-fs-small);
	line-height: 1.5;
}

/* Avec les animations : le trait se dessine étape après étape */
.mlt-anim-on .mlt-frise__etape::before {
	transform: scaleY(0);
	transition: transform var(--mlt-duration-reveal) var(--mlt-ease);
	transition-delay: calc(var(--mlt-i, 0) * 180ms + 250ms);
}

.mlt-anim-on .mlt-frise__etape.is-visible::before {
	transform: none;
}

@media (min-width: 768px) {
	.mlt-frise {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.mlt-frise__etape {
		display: flex;
		flex-direction: column;
		gap: var(--mlt-space-8);
	}

	/* Trait horizontal qui traverse l'espace jusqu'à l'étape suivante */
	.mlt-frise__etape::before {
		top: 19px;
		bottom: auto;
		left: 0;
		right: calc(-1 * var(--mlt-frise-gap));
		width: auto;
		height: 2px;
		transform-origin: left center;
	}

	.mlt-frise__etape:last-child::before {
		content: "";
		right: 0;
	}

	.mlt-frise__num {
		margin-bottom: var(--mlt-space-8);
	}

	.mlt-frise__titre {
		align-self: flex-start;
		min-height: 0;
	}

	.mlt-anim-on .mlt-frise__etape::before {
		transform: scaleX(0);
	}
}

/* Variante verticale à toutes les largeurs (frise longue, ex. widget mlt_etapes) */
@media (min-width: 768px) {
	.mlt-frise--verticale {
		grid-auto-flow: row;
	}

	.mlt-frise--verticale .mlt-frise__etape {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: var(--mlt-space-24);
	}

	.mlt-frise--verticale .mlt-frise__etape::before {
		top: 40px;
		bottom: calc(-1 * var(--mlt-frise-gap));
		left: 19px;
		right: auto;
		width: 2px;
		height: auto;
		transform-origin: center top;
	}

	.mlt-frise--verticale .mlt-frise__etape:last-child::before {
		content: none;
	}

	.mlt-frise--verticale .mlt-frise__num {
		margin-bottom: 0;
	}

	.mlt-frise--verticale .mlt-frise__titre {
		align-self: center;
		min-height: 40px;
	}

	.mlt-anim-on .mlt-frise--verticale .mlt-frise__etape::before {
		transform: scaleY(0);
	}

	.mlt-anim-on .mlt-frise--verticale .mlt-frise__etape.is-visible::before {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlt-frise__etape::before {
		transition: none;
	}
}

/* -------------------- Achat en ligne (mode boutique, widgets mlt_*) --------------------
   Balisage produit par MLT_Base::buy_html() : prix WooCommerce + bouton AJAX natif. */
.mlt-achat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mlt-space-8) var(--mlt-space-16);
}

.mlt-achat__prix {
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-lead);
	font-weight: 700;
	white-space: nowrap;
}

.mlt-achat__prix del {
	color: var(--mlt-color-texte-doux);
	font-size: var(--mlt-fs-small);
	font-weight: 400;
}

.mlt-achat__prix ins {
	text-decoration: none;
}

.mlt-achat .mlt-btn.loading {
	opacity: 0.6;
	cursor: progress;
}

.mlt-achat .mlt-btn.added::after {
	content: " ✓";
}

.mlt-achat__btn--compact {
	min-height: 40px;
	padding: 0 var(--mlt-space-16);
	font-size: var(--mlt-fs-small);
}

/* Lien « Voir le panier » ajouté par WooCommerce après un ajout */
.mlt-achat .added_to_cart {
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-small);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mlt-achat .added_to_cart:hover {
	color: var(--mlt-color-botanique);
}

.mlt-achat .added_to_cart:focus-visible {
	outline: none;
	border-radius: var(--mlt-space-4);
	box-shadow: var(--mlt-focus-ring);
}

/* -------------------- Fond olive texturé --------------------
   Ajouter `mlt-olive-grain` sur une section : fond olive + grain léger.
   Le contenu doit être en position relative (z-index ≥ 1). */
.mlt-olive-grain {
	position: relative;
	isolation: isolate;
	background-color: var(--mlt-color-olive);
}

.mlt-olive-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--mlt-grain);
	background-size: 220px 220px;
	opacity: var(--mlt-grain-opacity);
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* -------------------- Utilitaire -------------------- */
.mlt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}