/*
 * MFD — Design System
 * Tokens, reset, base elements, accessibility and generic utilities.
 * Component & per-area styles live in header-footer.css / home.css / pages.css /
 * woocommerce.css.
 */

/* ============================================================
 * 1. DESIGN TOKENS
 * ============================================================ */
:root {
	/* Brand colors */
	--mfd-tan: #815A25;
	--mfd-tan-dark: #6B4B1F;
	--mfd-cream: #FFF6EA;
	--mfd-cream-soft: #FCF2DE;
	--mfd-ink: #000000;
	--mfd-white: #FFFFFF;
	--mfd-muted: #7D7A7A;
	--mfd-line: #E8DFC9;
	--mfd-product-tile: #FBF6E9;
	--mfd-gallery-base: #F0EAD8;

	/* Status */
	--mfd-status-delivered: #5B8C5A;
	--mfd-status-shipped: #815A25;

	/* Typography */
	--mfd-font-display: "Anton", Impact, "Arial Narrow", sans-serif;
	--mfd-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mfd-font-serif: "Lora", Georgia, "Times New Roman", serif;

	/* Layout */
	--mfd-container: 1280px;
	--mfd-container-wide: 1600px;
	--mfd-gutter: 24px;

	/* Spacing rhythm */
	--mfd-section-y: clamp(40px, 6vw, 72px);
	--mfd-grid-gap: clamp(16px, 2.5vw, 28px);

	/* Borders */
	--mfd-border: 1px solid var(--mfd-line);
	--mfd-frame: 1px solid var(--mfd-tan);

	/* Elevation */
	--mfd-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.04);
	--mfd-shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.2);
	--mfd-shadow-toast: 0 12px 32px rgba(0, 0, 0, 0.25);

	/* Z-index scale */
	--mfd-z-header: 100;
	--mfd-z-drawer: 200;
	--mfd-z-toast: 300;

	/* Motion */
	--mfd-transition: 0.25s ease;
}

/* ============================================================
 * 2. RESET
 * ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, svg, video, picture {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ============================================================
 * 3. BASE ELEMENTS
 * ============================================================ */
body {
	font-family: var(--mfd-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--mfd-ink);
	background: var(--mfd-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	transition: color var(--mfd-transition), opacity var(--mfd-transition);
}

a:hover {
	color: var(--mfd-tan-dark);
}

strong, b {
	font-weight: 700;
}

::selection {
	background: var(--mfd-tan);
	color: var(--mfd-white);
}

/* ============================================================
 * 4. ACCESSIBILITY
 * ============================================================ */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.mfd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--mfd-ink);
	color: var(--mfd-white);
	font-weight: 700;
	font-size: 13px;
}

.mfd-skip-link:focus {
	left: 8px;
	top: 8px;
}

:focus-visible {
	outline: 2px solid var(--mfd-tan);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
 * 5. LAYOUT UTILITIES
 * ============================================================ */
.mfd-container {
	width: 100%;
	max-width: calc(var(--mfd-container) + var(--mfd-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--mfd-gutter);
}

.mfd-container--wide {
	max-width: calc(var(--mfd-container-wide) + var(--mfd-gutter) * 2);
}

.mfd-container--narrow {
	max-width: 840px;
}

.mfd-section {
	padding-block: var(--mfd-section-y);
}

.mfd-section--cream {
	background: var(--mfd-cream);
}

.mfd-section--cream-soft {
	background: var(--mfd-cream-soft);
}

.mfd-main {
	display: block;
}

.mfd-grid-4 {
	display: grid;
	gap: var(--mfd-grid-gap);
	grid-template-columns: repeat(4, 1fr);
}

.mfd-grid-3 {
	display: grid;
	gap: var(--mfd-grid-gap);
	grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
 * 6. TYPOGRAPHY UTILITIES
 * ============================================================ */
.mfd-display {
	font-family: var(--mfd-font-body); /* Titres de section uniformisés en Montserrat (au lieu d'Anton). */
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.1;
}

.mfd-overlay {
	font-family: var(--mfd-font-body); /* Titres uniformisés en Montserrat. */
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--mfd-white);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mfd-serif {
	font-family: var(--mfd-font-serif);
}

.mfd-italic {
	font-style: italic;
	font-weight: 800;
}

.mfd-eyebrow {
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mfd-tan);
}

.mfd-section-title {
	font-family: var(--mfd-font-body); /* Montserrat */
	font-weight: 800;
	font-style: italic;
	font-size: clamp(24px, 4vw, 38px);
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-transform: uppercase; /* Titres de section uniformisés en majuscules */
}

.mfd-page-title {
	font-family: var(--mfd-font-body);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(28px, 5vw, 48px);
	line-height: 1.1;
	text-transform: uppercase; /* Titres de section en majuscules. */
}

/* Uniformisation : tous les titres de section/sous-section du site
 * en MAJUSCULES, comme .mfd-section-title / .mfd-page-title / .mfd-display.
 * Cible les classes de titres « maison » qui n'héritaient pas d'une classe
 * utilitaire déjà en majuscules. Exclut volontairement : les titres de CARTES
 * (produits, matières, posts, cases de réassurance) et l'UI WooCommerce
 * (étapes/récap de commande & panier), conservés en casse normale. */
.mfd-brand-block__headline,
.mfd-footer__newsletter-title,
.mfd-engage-pillar__title,
.mfd-milestone__title,
.mfd-mif-atelier__subheading,
.mfd-ambass-benefit__title,
.mfd-contact-info__title,
.mfd-perso-hero__subtitle,
.mfd-hub-title__collection,
.mfd-recharges-step__title,
.mfd-404__title {
	text-transform: uppercase;
}

.mfd-text-tan {
	color: var(--mfd-tan);
}

.mfd-text-muted {
	color: var(--mfd-muted);
}

.mfd-text-center {
	text-align: center;
}

/* ============================================================
 * 7. BUTTONS
 * ============================================================ */
.mfd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 14px 28px;
	border: 1.5px solid transparent;
	background: var(--mfd-tan);
	color: var(--mfd-white);
	cursor: pointer;
	text-align: center;
	transition: background var(--mfd-transition), color var(--mfd-transition), opacity var(--mfd-transition);
}

.mfd-btn:hover {
	color: var(--mfd-white);
}

.mfd-btn--primary {
	background: var(--mfd-tan);
	color: var(--mfd-white);
}

.mfd-btn--primary:hover {
	background: var(--mfd-tan-dark);
}

.mfd-btn--dark {
	background: var(--mfd-ink);
	color: var(--mfd-white);
}

.mfd-btn--dark:hover {
	opacity: 0.85;
}

.mfd-btn--outline {
	background: transparent;
	color: var(--mfd-ink);
	border-color: var(--mfd-ink);
}

.mfd-btn--outline:hover {
	background: var(--mfd-ink);
	color: var(--mfd-white);
}

/* DSN-08 : variante « ghost » (transparente, bordure discrète) utilisée p.ex.
   sur le CTA « Voir tous les cadeaux … » de la page Idée cadeau. */
.mfd-btn--ghost {
	background: transparent;
	color: var(--mfd-ink);
	border-color: var(--mfd-line);
}

.mfd-btn--ghost:hover {
	background: var(--mfd-ink);
	color: var(--mfd-white);
	border-color: var(--mfd-ink);
}

.mfd-btn--pill {
	border-radius: 999px;
}

.mfd-btn[disabled],
.mfd-btn--disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ============================================================
 * 8. FORM CONTROLS (base)
 * ============================================================ */
.mfd-input,
.mfd-textarea,
.mfd-select,
input[type="text"].mfd-field,
input[type="email"].mfd-field,
input[type="tel"].mfd-field,
input[type="search"].mfd-field,
textarea.mfd-field {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--mfd-font-body);
	font-size: 14px;
	color: var(--mfd-ink);
	background: var(--mfd-white);
	border: 1px solid var(--mfd-line);
	border-radius: 0;
}

.mfd-input:focus,
.mfd-textarea:focus,
.mfd-field:focus {
	outline: none;
	border-color: var(--mfd-tan);
}

.mfd-input::placeholder,
.mfd-textarea::placeholder,
.mfd-field::placeholder {
	font-style: italic;
	color: var(--mfd-muted);
}

.mfd-textarea {
	min-height: 130px;
	resize: vertical;
}

.mfd-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

/* ============================================================
 * 9. ICONS & MEDIA
 * ============================================================ */
.mfd-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.mfd-frame {
	border: var(--mfd-frame);
}

.mfd-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
 * 10. WORDPRESS CORE
 * ============================================================ */
.alignwide {
	max-width: var(--mfd-container-wide);
}

.alignfull {
	max-width: none;
}

/* ------------------------------------------------------------
 * Google website-translation engine — suppress its injected UI.
 * The MFD language selector drives translation; Google's own
 * banner, tooltip and gadget must never be visible.
 * ------------------------------------------------------------ */
#google_translate_element {
	display: none !important;
}

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
iframe.skiptranslate,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.gtranslate_wrapper,
[class*="gt_float"] {
	display: none !important;
}

/* ASR-06 : ne neutraliser le décalage que lorsque Google Translate est actif
   (classes posées sur <body> par le widget) — ne jamais forcer top sur un
   site déjà en production qui positionnerait son <body>. */
body.translated-ltr,
body.translated-rtl {
	top: 0 !important;
}

.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption {
	font-size: 13px;
	font-style: italic;
	color: var(--mfd-muted);
	text-align: center;
	padding-top: 8px;
}

.mfd-empty {
	padding: 48px 0;
	text-align: center;
	color: var(--mfd-muted);
	font-style: italic;
}

/* ============================================================
 * 11. RESPONSIVE — generic grid collapse
 * ============================================================ */
/* Palier intermédiaire — cartes trop écrasées en 4 col. */
@media (max-width: 1140px) {
	.mfd-grid-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 960px) {
	.mfd-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* .mfd-grid-3 (cartes bénéfices) reste en 3 colonnes de 641 à 960px — évite
	   la carte orpheline (2 + 1) à 768px ; il passe en 1 colonne ≤640 ci-dessous. */
}

@media (max-width: 640px) {
	.mfd-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.mfd-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* Product grids stay 2-up at ≤640px — never 1-column on phone.
   No 420px 1-column rule: it would break 390px viewports. */

/* ============================================================
 * BANDE DE RÉASSURANCE (footer de section, sur chaque page)
 * 8 cases : icône au-dessus + titre MAJUSCULES + sous-texte court.
 * Une rangée de 8 sur desktop large, puis 4 / 2 / 1 en responsive.
 * ============================================================ */
.mfd-reassurance {
	padding: clamp(22px, 2.8vw, 34px) 0;
	background: var(--mfd-cream);
	border-top: 1px solid var(--mfd-border);
}

.mfd-reassurance__heading {
	text-align: center;
	margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.mfd-reassurance__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: clamp(12px, 1.6vw, 22px);
}

.mfd-reassurance__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 0 4px;
}

.mfd-reassurance__icon {
	display: inline-flex;
	color: var(--mfd-tan);
}

.mfd-reassurance__icon svg {
	width: 32px;
	height: 32px;
}

.mfd-reassurance__title {
	margin: 0;
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--mfd-ink);
}

.mfd-reassurance__text {
	margin: 0;
	font-family: var(--mfd-font-body);
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--mfd-muted);
}

/* Tablette large : 2 rangées de 4. */
@media (max-width: 1100px) {
	.mfd-reassurance__grid {
		grid-template-columns: repeat(4, 1fr);
		row-gap: clamp(20px, 3vw, 30px);
	}
}

/* Petit écran : 2 colonnes. */
@media (max-width: 640px) {
	.mfd-reassurance__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile étroit : 1 colonne centrée. */
@media (max-width: 380px) {
	.mfd-reassurance__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * BANDEAU RÉSEAUX SOCIAUX
 * ============================================================ */
.mfd-social-banner {
	background: var(--mfd-white);
	padding: clamp(28px, 4vw, 48px) 0;
	border-top: 1px solid var(--mfd-border);
}

.mfd-social-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}

.mfd-social-banner__title {
	margin: 0;
	max-width: 760px;
	font-family: var(--mfd-font-body);
	font-weight: 600;
	font-size: clamp(14px, 1.6vw, 17px);
	line-height: 1.5;
	color: var(--mfd-ink);
}

.mfd-social-banner__links {
	display: flex;
	align-items: center;
	gap: 18px;
}

.mfd-social-banner__link {
	display: inline-flex;
	transition: transform var(--mfd-transition);
}

.mfd-social-banner__link:hover {
	transform: translateY(-2px);
}

.mfd-social-banner__icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
	display: block;
}

/* =========================================================
   IMAGE LOADING UX — skeleton + fade-in + brand fallback
   =========================================================
   While a content/product image loads, its wrapper shows a cream skeleton
   with a soft shimmer (never the raw ALT). The <img> is hidden (opacity:0)
   and fades in once JS adds `.is-loaded`. On error JS swaps the src to the
   brand MFD placeholder and adds `.is-fallback`. JS-only: with JS disabled
   the image renders normally (the wrapper has no skeleton until marked). */

.mfd-product-card__image-wrap,
.mfd-hub-card__image-wrap,
.mfd-matiere-card__image-wrap,
.mfd-collection-intro__image-wrap,
.mfd-hero-carousel__image-wrap {
	position: relative;
}

/* Skeleton: shown only while an image is still loading (img bound but not loaded). */
.mfd-product-card__image-wrap > img[data-mfd-img-bound]:not(.is-loaded),
.mfd-hub-card__image-wrap > img[data-mfd-img-bound]:not(.is-loaded),
.mfd-matiere-card__image-wrap > img[data-mfd-img-bound]:not(.is-loaded),
.mfd-collection-intro__image-wrap > img[data-mfd-img-bound]:not(.is-loaded),
.mfd-hero-carousel__image-wrap > img[data-mfd-img-bound]:not(.is-loaded) {
	/* Hide the image (and its raw alt) while loading. */
	opacity: 0;
	/* Prevent the alt text painting over the skeleton. */
	color: transparent;
	text-indent: -9999px;
	overflow: hidden;
}

/* The shimmer skeleton lives on the wrapper, behind the (hidden) img. */
.mfd-product-card__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
.mfd-hub-card__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
.mfd-matiere-card__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
.mfd-collection-intro__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
.mfd-hero-carousel__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--mfd-cream);
	background-image: linear-gradient(
		100deg,
		var(--mfd-cream) 0%,
		var(--mfd-cream-soft) 45%,
		var(--mfd-cream) 90%
	);
	background-size: 200% 100%;
	animation: mfd-img-shimmer 1.4s ease-in-out infinite;
	pointer-events: none;
}

/* Once loaded (or fallback applied), fade the image in. */
.mfd-product-card__image-wrap > img.is-loaded,
.mfd-hub-card__image-wrap > img.is-loaded,
.mfd-matiere-card__image-wrap > img.is-loaded,
.mfd-collection-intro__image-wrap > img.is-loaded,
.mfd-hero-carousel__image-wrap > img.is-loaded {
	opacity: 1;
	transition: opacity 0.4s ease, transform 0.6s ease;
}

/* Brand fallback: keep it contained and centred (placeholder may differ in ratio). */
.mfd-product-card__image-wrap > img.is-fallback,
.mfd-hub-card__image-wrap > img.is-fallback,
.mfd-matiere-card__image-wrap > img.is-fallback,
.mfd-collection-intro__image-wrap > img.is-fallback,
.mfd-hero-carousel__image-wrap > img.is-fallback {
	object-fit: cover;
	background: var(--mfd-cream);
}

@keyframes mfd-img-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Respect reduced-motion: drop the shimmer, keep a static cream skeleton. */
@media (prefers-reduced-motion: reduce) {
	.mfd-product-card__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
	.mfd-hub-card__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
	.mfd-matiere-card__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
	.mfd-collection-intro__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after,
	.mfd-hero-carousel__image-wrap:has(> img[data-mfd-img-bound]:not(.is-loaded))::after {
		animation: none;
		background-image: none;
		background-color: var(--mfd-cream);
	}

	.mfd-product-card__image-wrap > img.is-loaded,
	.mfd-hub-card__image-wrap > img.is-loaded,
	.mfd-matiere-card__image-wrap > img.is-loaded,
	.mfd-collection-intro__image-wrap > img.is-loaded,
	.mfd-hero-carousel__image-wrap > img.is-loaded {
		transition: none;
	}
}

/* =========================================================
   THIRD-PARTY FLOATING WIDGETS — overlap / z-index harmony
   =========================================================
   The Side Cart (XOO) floating basket and the Complianz cookie
   "Gérer le consentement" button both render fixed elements that
   can overlap page content (notably the contact form and the
   footer newsletter). We do not modify the plugins — we only tame
   their position and stacking from the theme. */

/* B8 — Side Cart floating basket: keep it clear of form controls /
   submit buttons and give it a consistent z-index. */
.xoo-wsc-basket {
	right: 18px !important;
	bottom: 22px !important;
	z-index: 9990 !important;
}

/* B3 — Complianz "Gérer le consentement" pill: sit it in the
   bottom-left corner, below the side cart in the stack, and never
   stretch across / cover the content or form fields. */
.cmplz-manage-consent.manage-consent-1,
.cmplz-manage-consent {
	z-index: 9980 !important;
	left: 18px !important;
	bottom: 18px !important;
	right: auto !important;
	max-width: max-content !important;
}

/* The cookie consent banner itself must always sit on top of the
   floating widgets while it is open. */
.cmplz-cookiebanner {
	z-index: 9999 !important;
}

/* On small screens, stack the two floating widgets so the side cart
   stays bottom-right and the consent pill bottom-left without overlap. */
@media (max-width: 600px) {
	.xoo-wsc-basket {
		bottom: 16px !important;
	}

	.cmplz-manage-consent.manage-consent-1,
	.cmplz-manage-consent {
		bottom: 16px !important;
	}
}

/* ============================================================
 * BANDE NEWSLETTER « LE CERCLE »
 * ============================================================
 * Bloc centré sur fond blanc, au-dessus du carrousel Instagram :
 * eyebrow + titre serif italique + sous-titre + formulaire partagé
 * (components/newsletter-form). Le formulaire a quitté la colonne
 * noire du pied de page. */
.mfd-newsletter-banner {
	background: var(--mfd-white);
	border-top: var(--mfd-border);
	padding: clamp(36px, 5vw, 56px) 0;
	text-align: center;
}

.mfd-newsletter-banner__label {
	color: var(--mfd-tan-dark);
	margin: 0 0 8px;
}

.mfd-newsletter-banner__title {
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.2;
	color: var(--mfd-ink);
	margin: 0 0 8px;
}

.mfd-newsletter-banner__sub {
	font-family: var(--mfd-font-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mfd-muted);
	margin: 0 auto 20px;
	max-width: 560px;
}

.mfd-newsletter-banner__form {
	max-width: 480px;
	margin: 0 auto;
}

.mfd-newsletter-form__field {
	display: flex;
	border: 1px solid var(--mfd-tan);
	background: var(--mfd-white);
}

.mfd-newsletter-form__input {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 12px 14px;
	font-family: var(--mfd-font-body);
	font-size: 13px;
	color: var(--mfd-ink);
	min-width: 0;
}

.mfd-newsletter-form__input::placeholder {
	color: var(--mfd-muted);
	font-style: italic;
}

.mfd-newsletter-form__input:focus {
	outline: none;
}

/* Le champ n'a pas de bordure propre (elle vit sur le conteneur) : sans
   relais, le focus clavier n'aurait aucun indicateur visible. L'anneau est
   donc porté par le conteneur bordé, au style global du thème. */
.mfd-newsletter-form__field:focus-within {
	outline: 2px solid var(--mfd-tan);
	outline-offset: 2px;
}

/* Le bouton d'envoi porte déjà son propre anneau : pas de double cadre. */
.mfd-newsletter-form__field:has(.mfd-newsletter-form__btn:focus-visible) {
	outline: none;
}

.mfd-newsletter-form__btn {
	flex-shrink: 0;
	padding: 12px 18px;
	font-size: 10px;
	letter-spacing: 0.12em;
}

/* Formulaire newsletter Elementor embarqué dans la bande (option
   newsletter_elementor_form_id) : champs harmonisés sur le design MFD
   clair (fond blanc bordé or, texte encre) — sinon ils héritent du
   style générique d'Elementor / du kit hérité. !important assumé :
   ces feuilles de plugin se chargent après le thème avec une
   spécificité variable. */
.mfd-newsletter-form--elementor input[type="text"],
.mfd-newsletter-form--elementor input[type="email"],
.mfd-newsletter-form--elementor .elementor-field-textual {
	background: var(--mfd-white) !important;
	border: 1px solid var(--mfd-tan) !important;
	border-radius: 0 !important;
	color: var(--mfd-ink) !important;
	font-family: var(--mfd-font-body) !important;
	font-size: 13px !important;
}

.mfd-newsletter-form--elementor input[type="text"]::placeholder,
.mfd-newsletter-form--elementor input[type="email"]::placeholder,
.mfd-newsletter-form--elementor .elementor-field-textual::placeholder {
	color: var(--mfd-muted) !important;
	font-style: italic !important;
}

/* ============================================================
 * BANDE INSTAGRAM
 * ============================================================
 * Bande pleine largeur entre la réassurance et le bandeau réseaux :
 * carrousel de six photos (boucle pas-à-pas, module JS « Instagram
 * Strip ») + bouton pill doré « @myfirstdiamond.fr » superposé au
 * centre. Largeurs fluides : 6 photos visibles desktop, 3 tablette,
 * 2 mobile (variables --mfd-insta-per / --mfd-insta-h). Hauteur
 * réservée en CSS + width/height sur les <img> : zéro layout shift. */
.mfd-instagram-strip {
	background: var(--mfd-white);
	border-top: var(--mfd-border); /* le token EST le raccourci complet (1px solid …). */
}

/* Phrase éditable au-dessus de la bande. */
.mfd-instagram-strip__head {
	padding-block: clamp(24px, 3.5vw, 40px) clamp(16px, 2vw, 24px);
	text-align: center;
}

.mfd-instagram-strip__intro {
	margin: 0;
	font-family: var(--mfd-font-serif);
	font-style: italic;
	font-size: clamp(15px, 1.6vw, 19px);
	line-height: 1.5;
	color: var(--mfd-ink);
	max-width: 760px;
	margin-inline: auto;
}

.mfd-instagram-strip__viewport {
	/* 5 photos visibles, images plus grandes. */
	--mfd-insta-per: 5;
	--mfd-insta-gap: 10px;
	--mfd-insta-h: 380px;
	position: relative;
	overflow: hidden;
	height: var(--mfd-insta-h);
}

.mfd-instagram-strip__track {
	display: flex;
	gap: var(--mfd-insta-gap);
	height: 100%;
	transition: transform 600ms ease;
	will-change: transform;
}

.mfd-instagram-strip__slide {
	flex: 0 0 calc((100% - (var(--mfd-insta-per) - 1) * var(--mfd-insta-gap)) / var(--mfd-insta-per));
	height: 100%;
}

/* Spécificité 0,2,0 + img : prime sur `.elementor img { height: auto; }`
   quand la bande est rendue dans un gabarit Elementor. */
.mfd-instagram-strip .mfd-instagram-strip__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Icônes des réseaux superposées au centre de la bande
   (remplacent l'ancien bouton pill). Pastilles crème à contraste lisible. */
.mfd-instagram-strip__social {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 16px);
}

.mfd-instagram-strip__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--mfd-cream);
	color: var(--mfd-ink);
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.35);
	transition: transform var(--mfd-transition), background var(--mfd-transition);
}

.mfd-instagram-strip__social-link:hover {
	transform: translateY(-2px);
	background: var(--mfd-white);
}

.mfd-instagram-strip .mfd-instagram-strip__social-icon {
	display: block;
	width: 22px;
	height: 22px;
}

@media (max-width: 960px) {
	.mfd-instagram-strip__viewport {
		--mfd-insta-per: 3;
		--mfd-insta-h: 300px;
	}
}

@media (max-width: 640px) {
	.mfd-instagram-strip__viewport {
		--mfd-insta-per: 2;
		--mfd-insta-h: 250px;
	}
}

/* Reduced motion : bande statique (le JS ne défile pas, pas de transition). */
@media (prefers-reduced-motion: reduce) {
	.mfd-instagram-strip__track {
		transition: none;
	}
}

/* ============================================================
 * NEUTRALISATION DU KIT ELEMENTOR HÉRITÉ (base client)
 *
 * Sur les pages dont le CONTENU est rendu par Elementor (ex. contact,
 * pro, devenir-revendeur sur une base existante), le kit global de
 * l'ancien site reste chargé volontairement (WYSIWYG éditeur = front,
 * cf. mfd_dequeue_elementor_frontend). Or ses règles globales
 * `.elementor-kit-N h1-h6 / a / label / button / input` (spécificité
 * 0,1,1 à 0,3,1) écrasent le CHROME du thème (classes simples 0,1,0) :
 * bouton recherche en pilule noire, sélecteur de langue gonflé,
 * titres du footer noirs sur fond noir, réassurance en 2em qui fait
 * déborder la page de 114px…
 *
 * Ce bloc re-déclare, UNIQUEMENT quand un kit Elementor est présent
 * (body[class*="elementor-kit-"]) et UNIQUEMENT pour le chrome MFD,
 * les propriétés que les kits globaux polluent. `!important` est
 * assumé : un kit client (contenu de sauvegarde, hors de notre
 * contrôle) peut porter n'importe quelle spécificité. Les valeurs
 * sont celles des règles de base — aucun effet visuel hors pollution.
 * Le CONTENU Elementor (zones the_content) n'est pas touché.
 * ============================================================ */

/* — Chrome header : boutons icônes (recherche, compte, panier), burger,
     fermeture de la barre de recherche — le kit les transforme en
     pilules noires 15px/40px rayon 30px. */
body[class*="elementor-kit-"] .mfd-header__action,
body[class*="elementor-kit-"] .mfd-hamburger,
body[class*="elementor-kit-"] .mfd-header__search-close,
body[class*="elementor-kit-"] .mfd-header__action:hover,
body[class*="elementor-kit-"] .mfd-hamburger:hover,
body[class*="elementor-kit-"] .mfd-header__search-close:hover,
body[class*="elementor-kit-"] .mfd-header__action:focus,
body[class*="elementor-kit-"] .mfd-hamburger:focus,
body[class*="elementor-kit-"] .mfd-header__search-close:focus {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: var(--mfd-ink) !important;
}

body[class*="elementor-kit-"] .mfd-header__search-close,
body[class*="elementor-kit-"] .mfd-header__search-close:hover,
body[class*="elementor-kit-"] .mfd-header__search-close:focus {
	padding: 4px !important;
}

/* — Sélecteur de langue (pilule discrète du topbar + options du menu). */
body[class*="elementor-kit-"] .mfd-lang-selector__btn,
body[class*="elementor-kit-"] .mfd-lang-selector__btn:focus {
	padding: 4px 10px !important;
	background: rgba(0, 0, 0, 0.06) !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: var(--mfd-white) !important;
	font-family: var(--mfd-font-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

body[class*="elementor-kit-"] .mfd-lang-selector__btn:hover {
	background: rgba(0, 0, 0, 0.15) !important;
}

body[class*="elementor-kit-"] .mfd-lang-selector__option,
body[class*="elementor-kit-"] .mfd-lang-selector__option:hover,
body[class*="elementor-kit-"] .mfd-lang-selector__option:focus {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 9px 16px !important;
	font-family: var(--mfd-font-body) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--mfd-ink) !important;
}

/* — Boutons MFD natifs (<button class="mfd-btn">, ex. « Rechercher »). */
body[class*="elementor-kit-"] button.mfd-btn {
	font-family: var(--mfd-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1 !important;
	padding: 14px 28px !important;
	border: 1.5px solid transparent !important;
	border-radius: 0 !important;
	background: var(--mfd-tan) !important;
	color: var(--mfd-white) !important;
}

body[class*="elementor-kit-"] button.mfd-btn:hover,
body[class*="elementor-kit-"] button.mfd-btn:focus {
	border-radius: 0 !important;
	background: var(--mfd-tan-dark) !important;
	color: var(--mfd-white) !important;
}

body[class*="elementor-kit-"] button.mfd-btn--dark,
body[class*="elementor-kit-"] button.mfd-btn--dark:hover,
body[class*="elementor-kit-"] button.mfd-btn--dark:focus {
	background: var(--mfd-ink) !important;
}

body[class*="elementor-kit-"] button.mfd-btn--outline {
	background: transparent !important;
	color: var(--mfd-ink) !important;
	border-color: var(--mfd-ink) !important;
}

body[class*="elementor-kit-"] button.mfd-btn--outline:hover,
body[class*="elementor-kit-"] button.mfd-btn--outline:focus {
	background: var(--mfd-ink) !important;
	color: var(--mfd-white) !important;
}

body[class*="elementor-kit-"] button.mfd-btn--ghost,
body[class*="elementor-kit-"] button.mfd-btn--ghost:hover,
body[class*="elementor-kit-"] button.mfd-btn--ghost:focus {
	background: transparent !important;
	color: var(--mfd-ink) !important;
}

/* — Champ de la barre de recherche (le kit force fond/bordure/typo de
     tous les inputs textuels avec une spécificité 0,3,1). */
body[class*="elementor-kit-"] .mfd-search-form__field {
	font-family: var(--mfd-font-body) !important;
	font-size: 14px !important;
	color: var(--mfd-ink) !important;
	background: var(--mfd-white) !important;
	border: 1px solid var(--mfd-line) !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	padding: 11px 14px !important;
}

body[class*="elementor-kit-"] .mfd-search-form__field:focus {
	border-color: var(--mfd-tan) !important;
}

/* — Bande de réassurance : le h3 global du kit (2em) élargit les
     cartes au-delà de la grille => débordement horizontal de page. */
body[class*="elementor-kit-"] .mfd-reassurance__title {
	font-family: var(--mfd-font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	color: var(--mfd-ink) !important;
}

/* — Footer : titres de colonnes et titre newsletter (le kit les rend
     noirs sur fond noir => invisibles). */
body[class*="elementor-kit-"] .mfd-footer__col-title {
	color: var(--mfd-tan) !important;
	font-family: var(--mfd-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}

body[class*="elementor-kit-"] .mfd-footer__newsletter-label {
	color: var(--mfd-tan) !important;
	font-family: var(--mfd-font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
}

body[class*="elementor-kit-"] .mfd-footer__newsletter-title {
	color: var(--mfd-white) !important;
	font-family: var(--mfd-font-serif) !important;
	font-style: italic !important;
	font-size: 18px !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* — Newsletter (repli PHP) : champ transparent + bouton or du design. */
body[class*="elementor-kit-"] .mfd-footer__newsletter-input {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 10px 12px !important;
	font-family: var(--mfd-font-body) !important;
	font-size: 13px !important;
	color: var(--mfd-white) !important;
}

body[class*="elementor-kit-"] button.mfd-footer__newsletter-btn,
body[class*="elementor-kit-"] button.mfd-footer__newsletter-btn:hover,
body[class*="elementor-kit-"] button.mfd-footer__newsletter-btn:focus {
	padding: 10px 16px !important;
	font-size: 10px !important;
	letter-spacing: 0.12em !important;
}

/* — Zone de contenu Elementor (page.php) : un gabarit hérité, composé
     pour l'ancien thème, peut déborder horizontalement (conteneurs
     décalés). On borne la zone de contenu — jamais le contenu lui-même
     n'est retaillé, et le reste de la page garde son défilement normal. */
.mfd-page-content--elementor {
	overflow-x: clip;
}

/* Mention d'information RGPD sous les formulaires. */
.mfd-form-privacy {
	margin-top: 10px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(26, 26, 26, 0.62);
}
.mfd-form-privacy a {
	color: inherit;
	text-decoration: underline;
}

/* Statut du double opt-in newsletter. */
.mfd-newsletter-form__status {
	margin: 0 0 12px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #1a5c37;
}
.mfd-newsletter-form__status--err {
	color: #8c2f24;
}