/*
 * MFD — Pages
 * Styles for all content page templates and reusable components.
 * Builds on design-system.css tokens/utilities; never duplicates them.
 * Derived from docs/DESIGN-SPEC.md §3.2–§3.15, §4, §1.3–§1.5.
 *
 * Sections:
 *   1.  Keyframe animations
 *   2.  page.php — default page template
 *   3.  404 page
 *   4.  PageEyebrow component
 *   5.  CollectionIntro component
 *   6.  FAQ Accordion component
 *   7.  tpl-concept.php — Concept Artisanal
 *   8.  tpl-collections-hub.php — Collections Hub
 *   9.  tpl-idee-cadeau.php — Idée Cadeau
 *  10.  tpl-cartes-cadeau.php — Cartes Cadeau
 *  11.  tpl-personnaliser.php — Personnaliser (Coming Soon)
 *  12.  tpl-point-de-vente.php — Point de Vente
 *  13.  tpl-ambassadeur.php — Devenir Ambassadeur
 *  14.  tpl-contact.php — Contact
 *  15.  tpl-comment-ca-marche.php — Comment ça Marche
 *  16.  tpl-faq.php — FAQ
 *  17.  Shared form layouts
 *  18.  Responsive — 960px
 *  19.  Responsive — 640px
 */

/* ============================================================
 * 1. KEYFRAME ANIMATIONS
 * ============================================================ */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================================
 * 2. DEFAULT PAGE TEMPLATE (page.php)
 * ============================================================ */
.mfd-page-header {
	padding-block: clamp(40px, 6vw, 64px);
	text-align: center;
}

.mfd-page-content .mfd-container--narrow {
	padding-block: 0;
}

/* Generic editorial prose inside default page template */
.mfd-page-content p,
.mfd-page-content li {
	font-family: var(--mfd-font-serif);
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
	margin-bottom: 1.2em;
}

.mfd-page-content h2 {
	/* DESIGN-SPEC §1.2 / §3.19 / §4.13: PageInfo H2 = Montserrat italic 800 + 2px tan underline */
	font-family: var(--mfd-font-body);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(18px, 2.5vw, 26px);
	letter-spacing: -0.01em;
	text-transform: none;
	margin: 2em 0 0.6em;
	padding-bottom: 0.25em;
	border-bottom: 2px solid var(--mfd-tan);
}

.mfd-page-content h3 {
	/* DESIGN-SPEC §4.13: PageInfo H3 = Montserrat italic 700 */
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(15px, 1.8vw, 20px);
	letter-spacing: -0.01em;
	text-transform: none;
	margin: 1.6em 0 0.5em;
}

/* ============================================================
 * 3. 404 PAGE
 * ============================================================ */
.mfd-404 {
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.mfd-404__inner {
	text-align: center;
	max-width: 560px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.mfd-404__number {
	font-family: var(--mfd-font-body);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(80px, 18vw, 160px);
	line-height: 1;
}

.mfd-404__title {
	font-size: clamp(24px, 4vw, 40px);
	line-height: 1.15;
}

.mfd-404__body {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.7;
	color: var(--mfd-muted);
}

/* ============================================================
 * 4. PAGEEYEBROW COMPONENT
 * ============================================================ */
.mfd-page-eyebrow {
	text-align: center;
	padding-block: clamp(40px, 6vw, 64px);
}

.mfd-page-eyebrow__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 720px;
	margin-inline: auto;
}

.mfd-page-eyebrow .mfd-eyebrow {
	margin-bottom: 4px;
}

.mfd-page-eyebrow__sub {
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.7;
	color: var(--mfd-muted);
	max-width: 600px;
	text-align: center;
}

/* ============================================================
 * 5. COLLECTIONINTRO COMPONENT
 * ============================================================ */
.mfd-collection-intro {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 36px;
	align-items: center;
}

.mfd-collection-intro__image-wrap {
	position: relative;
	overflow: hidden;
}

.mfd-collection-intro__image {
	width: 100%;
	height: clamp(280px, 40vw, 420px);
	object-fit: cover;
}

.mfd-collection-intro__overlay {
	position: absolute;
	bottom: 20px;
	left: 20px;
	font-size: clamp(24px, 4vw, 42px);
	color: var(--mfd-white);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	margin: 0;
}

.mfd-collection-intro__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mfd-collection-intro__para {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
}

/* ============================================================
 * 6. FAQ ACCORDION COMPONENT
 * ============================================================ */
.mfd-accordion {
	max-width: 800px;
}

.mfd-accordion__item {
	border-bottom: 1px solid var(--mfd-line);
}

.mfd-accordion__item:first-child {
	border-top: 1px solid var(--mfd-line);
}

.mfd-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	text-align: left;
	cursor: pointer;
	background: none;
	border: none;
	transition: color var(--mfd-transition);
}

.mfd-accordion__trigger:hover .mfd-accordion__question {
	color: var(--mfd-tan);
}

.mfd-accordion__question {
	font-family: var(--mfd-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	transition: color var(--mfd-transition);
}

.mfd-accordion__icon {
	flex-shrink: 0;
	color: var(--mfd-tan);
	transition: transform 0.3s ease;
}

.mfd-accordion__item.is-open .mfd-accordion__icon {
	transform: rotate(45deg);
}

.mfd-accordion__panel {
	overflow: hidden;
}

.mfd-accordion__panel[hidden] {
	display: none;
}

.mfd-accordion__panel:not([hidden]) {
	animation: fadeUp 0.3s ease both;
}

.mfd-accordion__answer {
	padding-bottom: 20px;
}

.mfd-accordion__answer p {
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 1em;
}

.mfd-accordion__answer p:last-child {
	margin-bottom: 0;
}

/* ============================================================
 * 7. CONCEPT ARTISANAL (tpl-concept.php)
 * ============================================================ */

/* Hero */
.mfd-concept-hero__inner {
	text-align: center;
	padding-block: clamp(32px, 5vw, 56px);
}

.mfd-concept-hero__inner .mfd-eyebrow {
	font-size: clamp(16px, 2.5vw, 28px);
	letter-spacing: 0.1em;
	margin-bottom: 16px;
}

.mfd-concept-hero__title {
	font-size: clamp(40px, 8vw, 92px);
	line-height: 1;
}

/* Notre histoire */
.mfd-concept-histoire__heading {
	font-size: clamp(28px, 5vw, 56px);
	margin-bottom: clamp(28px, 4vw, 48px);
}

.mfd-concept-histoire__grid {
	display: grid;
	grid-template-columns: 1fr 0.7fr;
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}

.mfd-concept-histoire__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mfd-concept-histoire__text p {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
}

.mfd-concept-histoire__photo {
	overflow: hidden;
}

.mfd-concept-histoire__photo img {
	width: 100%;
	height: clamp(300px, 45vw, 520px);
	object-fit: cover;
}

/* Savoir-faire */
.mfd-concept-savoirfaire__grid {
	display: grid;
	grid-template-columns: 0.7fr 1fr;
	gap: clamp(28px, 4vw, 48px);
	align-items: center;
}

.mfd-concept-savoirfaire__photo img {
	width: 100%;
	height: clamp(300px, 45vw, 520px);
	object-fit: cover;
}

.mfd-concept-savoirfaire__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mfd-concept-savoirfaire__hangtag-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.mfd-concept-hangtag {
	flex-shrink: 0;
}

.mfd-concept-savoirfaire__heading {
	font-size: clamp(22px, 3vw, 40px);
	line-height: 1.05;
}

.mfd-concept-savoirfaire__content p {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
}

/* Qualité / Innovation 3-col */
.mfd-concept-ethique__grid {
	display: grid;
	grid-template-columns: 1fr 0.6fr 1fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

.mfd-concept-ethique__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mfd-concept-ethique__subheading {
	font-size: clamp(16px, 1.8vw, 22px);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--mfd-tan);
}

.mfd-concept-ethique__col p {
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 1.75;
}

.mfd-concept-ethique__photo {
	overflow: hidden;
}

.mfd-concept-ethique__photo img {
	width: 100%;
	height: clamp(260px, 35vw, 460px);
	object-fit: cover;
}

/* Founder quote */
.mfd-concept-quote__inner {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.mfd-concept-quote__text {
	font-family: var(--mfd-font-serif);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(24px, 4vw, 40px);
	line-height: 1.35;
	border: none;
	margin: 0;
	padding: 0;
}

.mfd-concept-quote__attribution {
	letter-spacing: 0.18em;
	color: var(--mfd-tan);
}

.mfd-concept-quote__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ============================================================
 * 8. COLLECTIONS HUB (tpl-collections-hub.php)
 * ============================================================ */

/* Stacked title */
.mfd-hub-title__inner {
	text-align: center;
}

.mfd-hub-title__la {
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 0;
}

.mfd-hub-title__collection {
	font-size: clamp(40px, 7vw, 72px);
	line-height: 1;
	margin: 0;
}

/* Category tiles row */
.mfd-hub-tiles__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.mfd-hub-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: clamp(280px, 35vw, 460px);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
}

.mfd-hub-tile__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.4));
	transition: opacity 0.4s;
}

.mfd-hub-tile:hover .mfd-hub-tile__overlay {
	opacity: 0.85;
}

/* Zoom effect on hover for the background */
.mfd-hub-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s ease;
}

.mfd-hub-tile:hover::before {
	transform: scale(1.04);
}

.mfd-hub-tile__label {
	position: relative;
	z-index: 1;
	font-size: clamp(20px, 3.5vw, 40px);
	padding-bottom: 20px;
	color: var(--mfd-white);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Hub catalogue cards */
.mfd-hub-catalogue .mfd-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.mfd-hub-card {
	display: flex;
	flex-direction: column;
	background: var(--mfd-white);
	padding: clamp(12px, 2vw, 20px);
	transition: transform 0.3s ease;
}

.mfd-hub-card:hover {
	transform: translateY(-4px);
}

.mfd-hub-card__link {
	display: block;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.mfd-hub-card__image-wrap {
	background: var(--mfd-product-tile);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 12px;
}

.mfd-hub-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.mfd-hub-card:hover .mfd-hub-card__image-wrap img {
	transform: scale(1.03);
}

.mfd-hub-card__body {
	padding: 8px 0;
}

.mfd-hub-card__name {
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 6px;
}

.mfd-hub-card__price {
	font-size: 14px;
	font-style: italic;
}

.mfd-hub-card__atc {
	margin-top: 12px;
	width: 100%;
}

/* ============================================================
 * 9. IDÉE CADEAU (tpl-idee-cadeau.php)
 * ============================================================ */

/* Hero */
.mfd-idee-hero__inner {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.mfd-idee-hero__sub {
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.7;
	color: var(--mfd-muted);
}

/* Budget filters (now <a> links that redirect to shop with price params) */
.mfd-budget-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 24px;
}

.mfd-budget-btn {
	font-family: var(--mfd-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 12px 22px;
	border: 1.5px solid var(--mfd-tan);
	background: transparent;
	color: var(--mfd-ink);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	display: inline-block;
	text-decoration: none;
	line-height: 1;
}

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

/* ── Occasion tabs ── */
.mfd-occasion-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
	margin-bottom: 32px;
}

.mfd-occasion-tab {
	font-family: var(--mfd-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 10px 20px;
	border: 1.5px solid var(--mfd-tan);
	background: transparent;
	color: var(--mfd-ink);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	line-height: 1.3;
}

.mfd-occasion-tab:hover {
	background: var(--mfd-tan);
	color: var(--mfd-white);
}

.mfd-occasion-tab.is-active,
.mfd-occasion-tab[aria-selected="true"] {
	background: var(--mfd-tan);
	color: var(--mfd-white);
	box-shadow: 0 2px 8px rgba(213, 169, 95, 0.4);
}

.mfd-occasion-tab__from {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.85;
}

/* ── Occasion panels ── */
.mfd-occasion-panels {
	position: relative;
}

.mfd-occasion-panel {
	display: none;
}

.mfd-occasion-panel.is-active {
	display: block;
}

.mfd-occasion-panel__cta {
	margin-top: 28px;
	text-align: center;
}

/* Fallback empty state (no categories) */
.mfd-occasions-empty {
	padding: 48px 32px;
	border: 1px solid var(--mfd-line);
	text-align: center;
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.mfd-occasions-empty__msg {
	font-size: 18px;
}

.mfd-occasions-empty__hint {
	font-size: 15px;
	color: var(--mfd-muted);
}

/* Carte promo 2-col */
.mfd-idee-carte__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 48px);
	align-items: center;
}

.mfd-idee-carte__image {
	/* DESIGN-SPEC §3.9 item 4: carte cadeau promo image framed with 1px solid tan */
	overflow: hidden;
	border: 1px solid var(--mfd-tan);
}

.mfd-idee-carte__image img {
	width: 100%;
	height: clamp(260px, 35vw, 420px);
	object-fit: cover;
	display: block;
}

.mfd-idee-carte__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mfd-idee-carte__body {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.7;
}

/* ============================================================
 * 10. CARTES CADEAU (tpl-cartes-cadeau.php)
 * ============================================================ */
.mfd-carte-config__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 56px);
	max-width: 1000px;
	margin-inline: auto;
	align-items: start;
}

/* Gift card visual */
.mfd-carte-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: clamp(32px, 4vw, 48px);
	text-align: center;
}

.mfd-carte-visual__label {
	font-size: 11px;
}

.mfd-carte-visual__amount {
	font-family: var(--mfd-font-body);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1;
	color: var(--mfd-tan);
	transition: all 0.25s ease;
}

.mfd-carte-visual__brand {
	font-size: 18px;
}

.mfd-carte-visual__validity {
	font-size: 11px;
}

/* Form */
.mfd-carte-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ============================================================
 * 11. PERSONNALISER — COMING SOON (tpl-personnaliser.php)
 * ============================================================ */
.mfd-perso-hero {
	min-height: 80vh;
}

.mfd-perso-hero__inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.mfd-perso-hero__coming {
	font-size: clamp(48px, 9vw, 96px);
	line-height: 1;
	color: var(--mfd-tan);
}

.mfd-perso-hero__subtitle {
	font-size: clamp(22px, 3vw, 36px);
	line-height: 1.2;
}

.mfd-perso-hero__body {
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.75;
	max-width: 580px;
}

/* 6-step indicator (disabled) */
.mfd-perso-steps {
	display: flex;
	align-items: center;
	gap: 0;
	opacity: 0.5;
	flex-wrap: wrap;
	justify-content: center;
	margin: 8px 0;
}

.mfd-perso-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.mfd-perso-step__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--mfd-ink);
	font-family: var(--mfd-font-body);
	font-size: 13px;
	font-weight: 700;
}

.mfd-perso-step__label {
	font-family: var(--mfd-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mfd-perso-step__connector {
	width: 32px;
	height: 2px;
	background: var(--mfd-line);
	margin-bottom: 16px;
}

/* Hourglass badge */
.mfd-perso-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 1.5px solid var(--mfd-tan);
	background: var(--mfd-white);
	border-radius: 999px;
}

.mfd-perso-badge__text {
	font-family: var(--mfd-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mfd-perso-hero__invite {
	font-size: clamp(14px, 1.2vw, 16px);
	color: var(--mfd-muted);
}

.mfd-perso-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ============================================================
 * 12. POINT DE VENTE (tpl-point-de-vente.php)
 * ============================================================ */

/* Hero */
.mfd-pdv-hero__inner {
	text-align: center;
}

/* Category filter tabs */
.mfd-pdv-filters {
	padding-top: 0;
	padding-bottom: 0;
}

.mfd-pdv-filter-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 20px 0;
	border-bottom: 1px solid var(--mfd-line);
}

.mfd-pdv-filter-tab {
	padding: 8px 20px;
	border: 1.5px solid var(--mfd-ink);
	background: transparent;
	color: var(--mfd-ink);
	font-family: var(--mfd-font-body);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.mfd-pdv-filter-tab:hover {
	background: var(--mfd-ink);
	color: var(--mfd-white);
}

.mfd-pdv-filter-tab.is-active {
	background: var(--mfd-ink);
	color: var(--mfd-white);
}

/* Shop category badge */
.mfd-pdv-card__badge {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 2px;
	font-family: var(--mfd-font-body);
	align-self: flex-start;
	margin-top: 2px;
}

.mfd-pdv-card__badge--boutique {
	background: var(--mfd-tan);
	color: var(--mfd-white);
}

.mfd-pdv-card__badge--revendeur {
	background: var(--mfd-line);
	color: var(--mfd-ink);
}

/* Country label */
.mfd-pdv-card__country {
	font-size: 13px;
}

/* Search */
.mfd-pdv-search__form {
	display: flex;
	gap: 12px;
	max-width: 520px;
	margin-inline: auto;
	flex-wrap: wrap;
}

.mfd-pdv-search__input {
	flex: 1;
	border: 1.5px solid var(--mfd-ink);
	background: var(--mfd-white);
}

/* Store list + map */
/* Shared height token: map and list are always the same height. */
:root {
	--mfd-pdv-panel-height: 520px;
}

.mfd-pdv-locator__grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 24px;
	align-items: start;
}

.mfd-pdv-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: var(--mfd-pdv-panel-height);
	max-height: var(--mfd-pdv-panel-height);
	overflow-y: auto;
	/* On-brand thin scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--mfd-tan) var(--mfd-cream-soft);
}

.mfd-pdv-list::-webkit-scrollbar {
	width: 5px;
}

.mfd-pdv-list::-webkit-scrollbar-track {
	background: var(--mfd-cream-soft);
}

.mfd-pdv-list::-webkit-scrollbar-thumb {
	background-color: var(--mfd-tan);
	border-radius: 3px;
}

.mfd-pdv-card {
	width: 100%;
	text-align: left;
	padding: 20px 18px;
	border: none;
	border-bottom: 1px solid var(--mfd-line);
	background: var(--mfd-white);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.mfd-pdv-card:first-child {
	border-top: 1px solid var(--mfd-line);
}

.mfd-pdv-card.is-selected {
	border: 2px solid var(--mfd-tan);
	background: var(--mfd-cream-soft);
}

.mfd-pdv-card__name {
	font-size: 15px;
	font-weight: 700;
}

.mfd-pdv-card__address {
	font-size: 14px;
	color: var(--mfd-muted);
}

.mfd-pdv-card__status {
	font-size: 13px;
}

/* Map placeholder */
.mfd-pdv-map {
	position: relative;
	height: var(--mfd-pdv-panel-height);
	min-height: var(--mfd-pdv-panel-height);
	background: var(--mfd-cream-soft);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mfd-pdv-map__caption {
	font-size: 14px;
	padding: 12px 16px;
	position: relative;
	z-index: 1;
	text-align: center;
}

.mfd-pdv-map__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mfd-pdv-map__placeholder {
	width: 100%;
	height: var(--mfd-pdv-panel-height);
	background: linear-gradient(135deg, var(--mfd-cream-soft) 0%, var(--mfd-line) 100%);
}

/* ============================================================
 * 13. DEVENIR AMBASSADEUR (tpl-ambassadeur.php)
 * ============================================================ */

/* Split hero */
.mfd-ambass-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 320px;
	max-height: 520px;
}

.mfd-ambass-hero__panel {
	background: var(--mfd-ink);
	color: var(--mfd-white);
	padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}

.mfd-ambass-hero__panel .mfd-eyebrow {
	color: var(--mfd-tan);
}

.mfd-ambass-hero__panel .mfd-page-title {
	color: var(--mfd-white);
}

.mfd-ambass-hero__sub {
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
}

.mfd-ambass-hero__photo {
	overflow: hidden;
	height: clamp(320px, 40vw, 520px);
	max-height: 520px;
}

.mfd-ambass-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Benefits */
.mfd-ambass-benefit {
	padding-top: 20px;
	border-top: 2px solid var(--mfd-tan);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mfd-ambass-benefit__title {
	font-family: var(--mfd-font-body);
	font-size: clamp(16px, 1.8vw, 22px);
	font-weight: 800;
	font-style: italic;
}

.mfd-ambass-benefit__body {
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 1.7;
}

/* Candidature form */
.mfd-ambass-form__wrap {
	max-width: 640px;
	margin-inline: auto;
}

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

.mfd-ambass-success {
	padding: 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.mfd-ambass-success[hidden] {
	display: none;
}

.mfd-ambass-success__title {
	font-family: var(--mfd-font-body);
	font-size: 20px;
	font-weight: 800;
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mfd-ambass-success__body {
	font-size: 15px;
	line-height: 1.7;
}

/* ============================================================
 * 14. CONTACT (tpl-contact.php)
 * ============================================================ */

/* Hero */
.mfd-contact-hero__inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.mfd-contact-hero__sub {
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.7;
	color: var(--mfd-muted);
}

/* 2-col layout */
.mfd-contact-main__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(32px, 5vw, 56px);
	align-items: start;
}

/* Success state */
.mfd-contact-success {
	padding: 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.mfd-contact-success[hidden] {
	display: none;
}

.mfd-contact-success__title {
	font-family: var(--mfd-font-body);
	font-size: 20px;
	font-weight: 800;
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mfd-contact-success__body {
	font-size: 15px;
	line-height: 1.7;
}

/* Info card */
.mfd-contact-info {
	padding: clamp(24px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mfd-contact-info__title {
	font-size: clamp(16px, 1.8vw, 22px);
}

.mfd-contact-info__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mfd-contact-info__body p {
	font-size: 15px;
	line-height: 1.7;
}

.mfd-contact-info__body a {
	color: var(--mfd-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
 * 15. COMMENT ÇA MARCHE (tpl-comment-ca-marche.php)
 * ============================================================ */

/* Hero */
.mfd-ccm-hero__title {
	font-size: clamp(36px, 7vw, 82px);
	line-height: 1;
	text-align: center;
	padding-block: clamp(32px, 5vw, 56px);
}

/* Intro 2-col */
.mfd-ccm-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 56px);
	align-items: center;
}

.mfd-ccm-intro__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mfd-ccm-intro__text p {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
}

/* Video placeholder */
.mfd-ccm-video {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mfd-ccm-video__player {
	position: relative;
	background: var(--mfd-ink);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.mfd-ccm-video__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.mfd-ccm-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--mfd-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, background 0.2s ease;
}

.mfd-ccm-video__play:hover {
	background: var(--mfd-white);
	transform: scale(1.06);
}

.mfd-ccm-video__caption {
	font-size: 13px;
	text-align: center;
}

/* FAQ heading */
.mfd-ccm-faq__heading {
	font-size: clamp(22px, 3.5vw, 44px);
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* Center accordion in ccm section */
.mfd-ccm-faq .mfd-accordion {
	margin-inline: auto;
}

/* ============================================================
 * 16. FAQ PAGE (tpl-faq.php)
 * ============================================================ */
.mfd-faq-section {
	padding-top: 0;
}

.mfd-faq-section .mfd-accordion {
	margin-inline: auto;
}

/* ============================================================
 * 17. SHARED FORM LAYOUTS
 * ============================================================ */
.mfd-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.mfd-field-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mfd-field-group--full {
	grid-column: 1 / -1;
}

/* ============================================================
 * 18. RESPONSIVE — 960px
 * ============================================================ */
@media (max-width: 960px) {

	/* Collections Hub */
	.mfd-hub-tiles__row {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Concept — 3-col ethics → 1 col */
	.mfd-concept-ethique__grid {
		grid-template-columns: 1fr;
	}

	.mfd-concept-ethique__photo {
		display: none; /* hide center photo on tablet to keep reading flow */
	}

	/* Concept — 2-col grids */
	.mfd-concept-histoire__grid,
	.mfd-concept-savoirfaire__grid {
		grid-template-columns: 1fr;
	}

	.mfd-concept-histoire__photo,
	.mfd-concept-savoirfaire__photo {
		order: -1;
	}

	/* Contact 2-col */
	.mfd-contact-main__grid {
		grid-template-columns: 1fr;
	}

	/* Comment ça marche 2-col */
	.mfd-ccm-intro__grid {
		grid-template-columns: 1fr;
	}

	/* Ambassadeur split hero */
	.mfd-ambass-hero {
		grid-template-columns: 1fr;
		min-height: auto;
		max-height: none;
	}

	.mfd-ambass-hero__photo {
		height: 260px;
		max-height: 260px;
	}

	/* Idée cadeau */
	.mfd-idee-carte__grid {
		grid-template-columns: 1fr;
	}

	/* Cartes cadeau */
	.mfd-carte-config__grid {
		grid-template-columns: 1fr;
	}

	/* Point de vente — stack, no forced equal height on mobile */
	.mfd-pdv-locator__grid {
		grid-template-columns: 1fr;
	}

	.mfd-pdv-list {
		height: auto;
		max-height: 360px;
	}

	.mfd-pdv-map {
		height: 300px;
		min-height: 300px;
	}

	.mfd-pdv-map__placeholder {
		height: 300px;
	}

	/* Collection intro */
	.mfd-collection-intro {
		grid-template-columns: 1fr;
	}

	/* Collections hub */
	.mfd-hub-catalogue .mfd-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
 * 19. RESPONSIVE — 640px
 * ============================================================ */
@media (max-width: 640px) {

	/* Collections Hub tiles */
	.mfd-hub-tiles__row {
		grid-template-columns: 1fr;
	}

	.mfd-hub-catalogue .mfd-grid-4 {
		grid-template-columns: 1fr 1fr;
	}

	/* Occasion tabs → wrap naturally at 640px */
	.mfd-occasion-tabs {
		gap: 8px;
	}

	/* Forms → single col */
	.mfd-form-grid {
		grid-template-columns: 1fr;
	}

	/* Personaliser steps → wrap naturally */
	.mfd-perso-steps {
		gap: 8px;
	}

	/* PDV search stacks */
	.mfd-pdv-search__form {
		flex-direction: column;
	}

	.mfd-pdv-search__input {
		width: 100%;
	}

	/* Concept quote actions stack */
	.mfd-concept-quote__actions {
		flex-direction: column;
		align-items: center;
	}

	.mfd-perso-hero__actions {
		flex-direction: column;
		align-items: center;
	}

	/* Hangtag row stacks */
	.mfd-concept-savoirfaire__hangtag-row {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Budget filter buttons */
	.mfd-budget-filters {
		gap: 8px;
	}

	/* Ambassadeur benefits → 1 col */
	.mfd-ambass-benefits__grid {
		grid-template-columns: 1fr;
	}

	/* Collection intro */
	.mfd-collection-intro {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * 20. CONTACT FORM 7 — MFD INTEGRATION
 *
 * CF7 injects its own wrappers; these rules make CF7-rendered
 * forms look identical to the native form fallback.
 * Scoped to .mfd-contact-form-wrap and .mfd-ambass-form to
 * avoid bleeding into other CF7 instances.
 * ============================================================ */

/* Remove CF7 default outer padding/margin */
.mfd-contact-form-wrap .wpcf7,
.mfd-ambass-form .wpcf7 {
	margin: 0;
	padding: 0;
}

/* CF7 wraps each field control in a <span> — make it behave like a block */
.mfd-contact-form-wrap .wpcf7-form-control-wrap,
.mfd-ambass-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Inherit our grid layout on the CF7 <form> element */
.mfd-contact-form-wrap .wpcf7-form,
.mfd-ambass-form .wpcf7-form {
	margin: 0;
	padding: 0;
}

/* CF7 hides the <br> separators — make sure they don't add extra space */
.mfd-contact-form-wrap .wpcf7-form br,
.mfd-ambass-form .wpcf7-form br {
	display: none;
}

/* CF7 wraps label content in <p> — remove default paragraph margin */
.mfd-contact-form-wrap .wpcf7-form p,
.mfd-ambass-form .wpcf7-form p {
	margin: 0;
	padding: 0;
}

/* Validation error tip (appears below invalid field) */
.mfd-contact-form-wrap .wpcf7-not-valid-tip,
.mfd-ambass-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-family: var(--mfd-font-body);
	font-size: 12px;
	font-weight: 600;
	color: #c0392b;
	letter-spacing: 0.02em;
}

/* Invalid field highlight */
.mfd-contact-form-wrap .wpcf7-not-valid,
.mfd-ambass-form .wpcf7-not-valid {
	border-color: #c0392b !important;
}

/* Response output bar (success / error) */
.mfd-contact-form-wrap .wpcf7-response-output,
.mfd-ambass-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 14px 20px;
	font-family: var(--mfd-font-body);
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-left: 3px solid var(--mfd-tan);
	background: var(--mfd-cream-soft);
	color: var(--mfd-ink);
}

/* Success state */
.mfd-contact-form-wrap .wpcf7-form.sent .wpcf7-response-output,
.mfd-ambass-form .wpcf7-form.sent .wpcf7-response-output {
	border-left-color: #5b8c5a;
	background: #f0f7f0;
	color: #2d5a2d;
}

/* Error / invalid state */
.mfd-contact-form-wrap .wpcf7-form.invalid .wpcf7-response-output,
.mfd-contact-form-wrap .wpcf7-form.failed .wpcf7-response-output,
.mfd-ambass-form .wpcf7-form.invalid .wpcf7-response-output,
.mfd-ambass-form .wpcf7-form.failed .wpcf7-response-output {
	border-left-color: #c0392b;
	background: #fdf2f2;
	color: #7b1e1e;
}

/* Spam state */
.mfd-contact-form-wrap .wpcf7-form.spam .wpcf7-response-output,
.mfd-ambass-form .wpcf7-form.spam .wpcf7-response-output {
	border-left-color: var(--mfd-muted);
	background: var(--mfd-cream-soft);
	color: var(--mfd-muted);
}

/* CF7 spinner (AJAX loading indicator) */
.mfd-contact-form-wrap .wpcf7-spinner,
.mfd-ambass-form .wpcf7-spinner {
	display: inline-block;
	margin-left: 12px;
	vertical-align: middle;
}

/* Submit button: CF7 wraps in <input type="submit"> — style matches mfd-btn--primary */
.mfd-contact-form-wrap .wpcf7-submit,
.mfd-ambass-form .wpcf7-submit {
	cursor: pointer;
}

/* Ensure the submit wrapper div does not collapse */
.mfd-contact-form-wrap .mfd-field-group--full:last-child,
.mfd-ambass-form .mfd-ambass-form__submit {
	display: flex;
	justify-content: flex-start;
}

/* ============================================================
 * Recharges page (tpl-recharges.php — DESIGN-SPEC §3.7)
 * ============================================================ */

.mfd-collection-eyebrow {
	font-size: clamp(14px, 2vw, 18px);
	color: var(--mfd-muted);
	text-align: center;
	padding-block: clamp(16px, 2vw, 24px);
}

.mfd-recharges-intro__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.mfd-recharges-intro__photo-wrap {
	position: relative;
	overflow: hidden;
}

.mfd-recharges-intro__photo-wrap img {
	width: 100%;
	height: clamp(300px, 45vw, 520px);
	object-fit: cover;
	display: block;
}

.mfd-recharges-intro__overlay-label {
	position: absolute;
	bottom: 24px;
	left: 24px;
	font-family: var(--mfd-font-display);
	font-size: clamp(28px, 5vw, 52px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--mfd-white);
	text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.mfd-recharges-intro__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mfd-recharges-intro__content p {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
}

/* 3-step section */
.mfd-recharges-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 40px);
	margin-top: 40px;
}

.mfd-recharges-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

.mfd-recharges-step__number {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 800;
	line-height: 1;
}

.mfd-recharges-step__image {
	width: 100%;
	overflow: hidden;
}

.mfd-recharges-step__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.mfd-recharges-step__title {
	font-size: clamp(16px, 1.5vw, 20px);
}

.mfd-recharges-step__desc {
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 1.65;
	color: var(--mfd-muted);
}

@media (max-width: 960px) {
	.mfd-recharges-intro__grid {
		grid-template-columns: 1fr;
	}
	.mfd-recharges-steps__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.mfd-recharges-steps__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * 18b. EDITORIAL INFO PAGES — shared components
 *      Used by: tpl-notre-histoire, tpl-engagements, tpl-made-in-france,
 *               tpl-livraison-retours, tpl-guide-tailles, tpl-garantie
 * ============================================================ */

/* Narrow prose block */
.mfd-info-prose {
	max-width: 840px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mfd-info-prose h2 {
	font-family: var(--mfd-font-body);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(18px, 2.5vw, 26px);
	letter-spacing: -0.01em;
	text-transform: none;
	margin: 2em 0 0.6em;
	padding-bottom: 0.25em;
	border-bottom: 2px solid var(--mfd-tan);
}

.mfd-info-prose h2:first-child {
	margin-top: 0;
}

.mfd-info-prose h3 {
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(15px, 1.8vw, 20px);
	letter-spacing: -0.01em;
	margin: 1.6em 0 0.5em;
}

.mfd-info-prose p.mfd-serif,
.mfd-info-prose p {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.8;
	font-family: var(--mfd-font-serif);
	margin-top: 12px;
}

.mfd-info-prose p:first-of-type {
	margin-top: 0;
}

/* Prose list — also applies to plain <ul> typed inside .mfd-info-prose. */
.mfd-info-list,
.mfd-info-prose ul {
	font-family: var(--mfd-font-serif);
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.8;
	padding-left: 22px;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Pull quote */
.mfd-info-quote {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.mfd-info-quote__text {
	font-family: var(--mfd-font-serif);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(22px, 3.5vw, 36px);
	line-height: 1.4;
	border: none;
	margin: 0;
	padding: 0;
}

.mfd-info-quote__attr {
	letter-spacing: 0.18em;
	color: var(--mfd-tan);
	font-size: 11px;
}

/* CTA block — centered call to action */
.mfd-info-cta {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.mfd-info-cta__heading {
	font-size: clamp(24px, 4vw, 40px);
}

.mfd-info-cta__intro {
	font-size: clamp(14px, 1.3vw, 17px);
	line-height: 1.7;
	max-width: 580px;
}

.mfd-info-cta__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ============================================================
 * 18c. NOTRE HISTOIRE — timeline milestones
 * ============================================================ */
.mfd-milestones {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 840px;
	margin-inline: auto;
}

.mfd-milestone {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(24px, 3vw, 36px) 0;
	border-bottom: 1px solid var(--mfd-line);
	align-items: start;
}

.mfd-milestone:first-child {
	border-top: 1px solid var(--mfd-line);
}

.mfd-milestone__year {
	font-family: var(--mfd-font-body);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(20px, 2.5vw, 28px);
	color: var(--mfd-tan);
	padding-top: 4px;
}

.mfd-milestone__title {
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: clamp(14px, 1.4vw, 17px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.mfd-milestone__body p.mfd-serif {
	font-size: clamp(14px, 1.2vw, 15px);
	line-height: 1.75;
	color: var(--mfd-muted);
	margin-top: 0;
}

/* ============================================================
 * 18d. NOS ENGAGEMENTS / LIVRAISON / GARANTIE — pillar grid
 * ============================================================ */
.mfd-engage-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 48px);
}

.mfd-engage-pillar {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mfd-engage-pillar__icon {
	color: var(--mfd-tan);
	flex-shrink: 0;
}

.mfd-engage-pillar__title {
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: clamp(14px, 1.3vw, 16px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mfd-engage-pillar p.mfd-serif {
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 1.75;
	color: var(--mfd-muted);
}

/* ============================================================
 * 18e. MADE IN FRANCE — atelier 2-col
 * ============================================================ */
.mfd-mif-atelier__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.mfd-mif-atelier__visual {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.mfd-mif-hangtag {
	flex-shrink: 0;
}

.mfd-mif-atelier__heading {
	font-size: clamp(24px, 3.5vw, 44px);
	line-height: 1.05;
}

.mfd-mif-atelier__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mfd-mif-atelier__subheading {
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(16px, 1.8vw, 22px);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mfd-tan);
}

.mfd-mif-atelier__content p.mfd-serif {
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
}

/* ============================================================
 * 18f. GUIDE DES TAILLES — sizing cards
 * ============================================================ */
.mfd-guide-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 48px);
}

.mfd-guide-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(24px, 3vw, 36px);
	background: var(--mfd-white);
	border: 1px solid var(--mfd-line);
}

.mfd-guide-card__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mfd-guide-card__title {
	font-size: clamp(18px, 2vw, 26px);
}

.mfd-guide-table {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--mfd-line);
}

.mfd-guide-table__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 12px 16px;
	border-bottom: 1px solid var(--mfd-line);
	font-size: 14px;
	font-family: var(--mfd-font-serif);
	line-height: 1.5;
}

.mfd-guide-table__row:last-child {
	border-bottom: none;
}

.mfd-guide-table__row--head {
	background: var(--mfd-cream);
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ============================================================
 * 18g. RESPONSIVE — 960px
 * ============================================================ */
@media (max-width: 960px) {
	.mfd-engage-pillars {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mfd-mif-atelier__grid {
		grid-template-columns: 1fr;
	}

	.mfd-guide-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.mfd-milestone {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.mfd-milestone__year {
		font-size: 18px;
	}

	.mfd-guide-table__row {
		grid-template-columns: 1.4fr 1fr;
		padding: 10px 12px;
		font-size: 13px;
	}
}

/* ── Full-bleed section utility [R2-23]
	Use .mfd-section--full-bleed on sections whose child image must span 100vw.
	The .mfd-container inside is still applied for text, but images escape it.
	Also: concept artisanal image sections must not be constrained to mfd-container. */
.mfd-section--full-bleed {
	overflow: hidden;
}

.mfd-section--full-bleed > .mfd-container,
.mfd-section--full-bleed > .mfd-container--wide {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.mfd-section--full-bleed img {
	width: 100%;
	display: block;
	object-fit: cover;
}