/*
Theme Name: Moi Je Fais 2026
Theme URI: https://www.moijefais.com
Author: Christophe Giraud
Description: Thème sur mesure du blog DIY Moi Je Fais — plateforme DIY crème/sauge/terracotta, grille masonry, badges projets, léger et sans jQuery.
Version: 2.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: moijefais
*/

/* ===== Fondations ===== */
@font-face {
	font-family: "Playfair Display";
	src: url("assets/fonts/playfair-var.woff2") format("woff2-variations");
	font-weight: 400 900;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-var.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--paper: #F6F2EA;
	--card: #FFFFFF;
	--panel: #F8EBDA;
	--ink: #23211C;
	--ink-soft: #6E6A61;
	--line: #E7E1D4;
	--sage: #2FBD8B;
	--sage-deep: #1E9C71;
	--sage-soft: #DFF5EB;
	--terra: #E8685D;
	--terra-deep: #CC4B40;
	--terra-soft: #FBE3DF;
	--shadow: 0 1px 2px rgba(35, 33, 28, .05), 0 8px 24px rgba(35, 33, 28, .07);
	--shadow-hover: 0 2px 6px rgba(35, 33, 28, .08), 0 16px 40px rgba(35, 33, 28, .13);
	--radius: 14px;
	--mint: #2FBD8B; /* le vert du logo Moi Je Fais */
	--serif: "Playfair Display", Georgia, serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Mode clair permanent (choix éditorial 12/08/2026) : le site garde sa
   palette crème quelle que soit la préférence sombre du système. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: var(--sage); }
a:hover { color: var(--sage-deep); }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; text-wrap: balance; }

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--sage); color: #fff; padding: .6em 1em; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }

/* ===== En-tête à deux niveaux ===== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--card);
	border-bottom: 1px solid var(--line);
}
.header-inner {
	max-width: 1480px; margin: 0 auto; padding: 14px 24px 10px;
	display: flex; align-items: center; gap: 22px;
}
.site-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo img { width: 46px; height: 46px; }
.site-logo .site-title {
	font-family: var(--serif); font-weight: 650; font-size: 1.45rem;
	color: var(--ink); text-transform: uppercase; letter-spacing: .1em;
}
.site-logo .site-tagline { display: none; }

/* Grande recherche */
.header-search { flex: 1; max-width: 520px; }
.header-search form { position: relative; }
.header-search input[type="search"] {
	width: 100%;
	border: 1.5px solid var(--line); border-radius: 999px;
	background: var(--paper); color: var(--ink);
	padding: .72em 1.2em .72em 2.7em; font-size: .95rem;
}
.header-search input[type="search"]:focus { border-color: var(--sage); outline: none; }
.header-search form::before {
	content: "";
	position: absolute; left: 16px; top: 50%; translate: 0 -50%;
	width: 16px; height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A61' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Filtres « Trouver une idée » */
.finder { display: flex; align-items: center; gap: 8px; }
.finder select {
	border: 1.5px solid var(--line); border-radius: 10px;
	background: var(--card); color: var(--ink);
	padding: .55em .7em; font: inherit; font-size: .86rem;
	max-width: 165px;
}
.finder .finder-go {
	background: var(--sage); color: #fff; border: none; cursor: pointer;
	font: 600 .9rem var(--sans);
	padding: .68em 1.3em; border-radius: 10px;
	white-space: nowrap;
	transition: background .15s ease;
}
.finder .finder-go:hover { background: var(--sage-deep); }
@media (max-width: 1240px) { .finder select:nth-of-type(3), .finder select:nth-of-type(4) { display: none; } }
@media (max-width: 1050px) { .finder { display: none; } }

/* Navigation à icônes */
.icon-nav {
	max-width: 1480px; margin: 0 auto; padding: 0 16px;
}
.icon-nav ul {
	list-style: none; margin: 0; padding: 4px 0 10px;
	display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.icon-nav li { position: relative; }
.icon-nav > ul { justify-content: space-evenly; }
.icon-nav a {
	display: flex; align-items: center; gap: 9px;
	padding: .55em 1.15em; border-radius: 999px;
	text-decoration: none; color: var(--ink); font-size: .94rem; font-weight: 550;
}
.icon-nav > ul > li > a::before {
	content: "";
	width: 19px; height: 19px; flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--nav-ico) no-repeat center / contain;
	mask: var(--nav-ico) no-repeat center / contain;
}
.icon-nav a:hover, .icon-nav .current-menu-item > a, .icon-nav .current-menu-ancestor > a {
	background: var(--terra-soft); color: var(--terra-deep);
}
.icon-nav li.menu-loisirs { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.6 7.8 20 19M20 5 8.6 16.2'/%3E%3C/svg%3E"); }
.icon-nav li.menu-decoration-maison { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8'/%3E%3Cpath d='M5 10v11h14V10'/%3E%3C/svg%3E"); }
.icon-nav li.menu-bricolage-enfants { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='5.2'/%3E%3Cpath d='M12 13.5c.2 2.6-1.8 3-1.6 5M10 18.6h3.4'/%3E%3C/svg%3E"); }
.icon-nav li.menu-animaux-jardin { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21C5 12 12 5 21 5c0 9-7 16-16 16Z'/%3E%3Cpath d='M5 21c3-6 7-10 12-13'/%3E%3C/svg%3E"); }
.icon-nav li.menu-zero-dechet { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M19 2v4h-4'/%3E%3C/svg%3E"); }
.icon-nav li.menu-jour-de-fete { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='1'/%3E%3Cpath d='M4 10V7h16v3M12 7v14'/%3E%3Cpath d='M12 7C9 7 7.5 5.5 8.5 4S12 4 12 7c0-3 2.5-4.5 3.5-3S15 7 12 7Z'/%3E%3C/svg%3E"); }

/* Sous-menus */
.icon-nav .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; z-index: 60;
	background: var(--card); border: 1px solid var(--line); border-radius: 12px;
	box-shadow: var(--shadow-hover); padding: 6px; min-width: 215px;
	flex-direction: column; gap: 2px;
}
.icon-nav li:hover > .sub-menu,
.icon-nav li:focus-within > .sub-menu { display: flex; }
.icon-nav .sub-menu a { border-radius: 8px; }
.icon-nav .menu-item-has-children > a::after { content: " ▾"; font-size: .7em; color: var(--ink-soft); }

.nav-toggle {
	display: none; margin-left: auto;
	background: none; border: 1.5px solid var(--line); border-radius: 10px;
	padding: 8px 10px; color: var(--ink); font-size: 1.1rem; cursor: pointer;
}

@media (max-width: 860px) {
	.header-inner { flex-wrap: wrap; gap: 8px 12px; padding: 8px 14px 0; }
	.site-logo { gap: 8px; }
	.site-logo img { width: 34px; height: 34px; }
	.site-logo .site-title { font-size: 1.05rem; }

	/* Rangée 1 : logo à gauche, Favoris à droite */
	.fav-toggle { margin-left: auto; padding: 6px 10px; }

	/* Rangée 2 : grande recherche + burger côte à côte, burger à droite */
	.header-search { flex: 1 1 calc(100% - 60px); order: 5; max-width: none; margin-bottom: 8px; }
	.nav-toggle {
		display: block; order: 6; margin-left: 0; margin-bottom: 8px;
		align-self: stretch;
		font-size: 1.25rem; line-height: 1; padding: 7px 12px;
	}
	.header-search input[type="search"] {
		font-size: 1rem;
		padding: .72em 1.1em .72em 2.7em;
		border-width: 2px;
		border-color: var(--sage);
		background: var(--card);
	}
	.header-search input[type="search"]::placeholder { color: var(--ink-soft); opacity: 1; }

	/* Menu en tiroir : glisse depuis la gauche */
	.icon-nav {
		position: fixed; top: 0; left: 0; z-index: 80;
		height: 100dvh; width: min(320px, 86vw);
		background: #FFFFFF;
		box-shadow: var(--shadow-hover);
		padding: 18px 16px 60px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		transform: translateX(-102%);
		transition: transform .28s cubic-bezier(.2, .7, .2, 1);
	}
	.icon-nav.is-open { transform: translateX(0); }
	.icon-nav::before {
		content: "Menu";
		display: block;
		font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
		color: var(--sage);
		padding: 4px 12px 14px;
		border-bottom: 1px solid var(--line);
		margin-bottom: 10px;
	}
	.icon-nav ul { flex-direction: column; gap: 2px; align-items: stretch; }
	.icon-nav a { padding: .8em 1em; font-size: 1.02rem; border-radius: 12px; }

	/* Sous-menus REPLIÉS par défaut : un tap ouvre, un second tap navigue */
	.icon-nav .sub-menu { position: static; display: none; box-shadow: none; border: none; padding-left: 26px; background: none; }
	.icon-nav li.is-sub-open > .sub-menu { display: flex; }
	.icon-nav .menu-item-has-children > a::after { transition: transform .2s ease; display: inline-block; }
	.icon-nav li.is-sub-open > a::after { transform: rotate(180deg); }

	/* Voile derrière le tiroir. Il DOIT vivre dans le même plan d'empilement
	   que le tiroir (l'en-tête, sticky z-50) : posé sur body, il passerait
	   DEVANT le tiroir et bloquerait les taps (bug Android du 12/08). */
	body.nav-open .site-header::before {
		content: ""; position: fixed; inset: 0; z-index: 70;
		background: rgba(35, 33, 28, .45);
	}
	body.nav-open { overflow: hidden; }
}

/* ===== Mosaïque héro ===== */
.content-area { max-width: 1480px; margin: 0 auto; padding: 26px 24px 60px; }

.hero-mosaic {
	display: grid;
	grid-template-columns: 1.6fr 1.1fr 1.1fr 320px;
	grid-template-rows: 235px 235px;
	grid-template-areas:
		"feat a tall trend"
		"feat b tall trend";
	gap: 16px;
	margin-bottom: 44px;
}
.mosaic-card.is-featured { grid-area: feat; }
.mosaic-card.m-a { grid-area: a; }
.mosaic-card.m-b { grid-area: b; }
.mosaic-card.is-tall { grid-area: tall; }
.trend-panel { grid-area: trend; }
.mosaic-card {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--card);
}
.mosaic-card:hover { box-shadow: var(--shadow-hover); }
.mosaic-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .35s ease;
}
.mosaic-card:hover img { transform: scale(1.04); }
.mosaic-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20, 18, 14, 0) 40%, rgba(20, 18, 14, .72) 100%);
}
.mosaic-card .mosaic-body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 18px 20px;
	color: #fff;
}
.mosaic-card h2, .mosaic-card h3 {
	margin: 0 0 10px; color: #fff;
	font-size: 1.15rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.mosaic-card.is-featured h2 { font-size: 1.7rem; }

/* Badges projet */
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge-pill {
	background: rgba(255, 255, 255, .94); color: #3E3A33;
	font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	padding: .35em .75em; border-radius: 6px;
}

/* Panneau tendances */
.trend-panel {
	background: var(--panel);
	border-radius: var(--radius);
	padding: 18px 18px;
	overflow: hidden;
}
.trend-panel h2 {
	text-align: center; font-size: 1.02rem; margin: 2px auto 16px;
	text-transform: uppercase; letter-spacing: .08em; font-weight: 650;
	max-width: 185px;
	position: relative;
	padding-bottom: 11px;
}
.trend-panel h2::after {
	content: "";
	position: absolute; bottom: 0; left: 50%; translate: -50% 0;
	width: 58px; height: 3px; border-radius: 2px;
	background: var(--terra);
}
.trend-panel h2 span { color: var(--terra); font-size: 1.1em; }
.trend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.trend-list a {
	display: flex; align-items: center;
	text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem;
}
.trend-list img {
	width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
	flex-shrink: 0;
	position: relative; z-index: 2;
	box-shadow: 0 2px 6px rgba(20, 18, 14, .14);
}
.trend-list .trend-pill {
	flex: 1;
	margin-left: -23px;
	background: var(--card);
	border-radius: 999px;
	box-shadow: var(--shadow);
	padding: .45em 1.1em .45em calc(23px + 15px);
	transition: transform .15s ease, box-shadow .15s ease;
}
.trend-list a:hover .trend-pill { transform: translateX(3px); box-shadow: var(--shadow-hover); color: var(--sage-deep); }

/* ===== Favoris (cœurs) ===== */
.fav-btn {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	width: 34px; height: 34px;
	border: none; border-radius: 50%; cursor: pointer;
	background: transparent;
	display: grid; place-items: center;
	color: #fff;
	transition: transform .15s ease;
}
.fav-btn:hover { transform: scale(1.18); }
.fav-btn svg {
	width: 22px; height: 22px;
	fill: none; stroke: currentColor; stroke-width: 2;
	filter: drop-shadow(0 1px 3px rgba(20, 18, 14, .55));
}
.fav-btn.is-fav svg { fill: var(--terra); stroke: #fff; }

.fav-toggle {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	background: none; border: none; cursor: pointer;
	color: var(--ink); font: 550 .92rem var(--sans);
	padding: .5em .6em;
	white-space: nowrap;
}
.fav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav-toggle .fav-count {
	position: absolute; top: -2px; left: 22px;
	background: var(--terra); color: #fff;
	font-size: .66rem; font-weight: 700;
	min-width: 17px; height: 17px; border-radius: 999px;
	display: grid; place-items: center; padding: 0 4px;
}
.fav-toggle .fav-count:empty { display: none; }
.fav-panel {
	display: none;
	position: absolute; right: 24px; top: calc(100% + 6px); z-index: 70;
	background: var(--card); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-hover);
	padding: 14px; width: 320px; max-height: 60vh; overflow: auto;
}
.fav-panel.is-open { display: block; }
.fav-panel h3 { margin: 0 0 10px; font-size: 1rem; }
.fav-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fav-panel li { display: flex; align-items: center; gap: 8px; }
.fav-panel li a { flex: 1; color: var(--ink); text-decoration: none; font-size: .9rem; }
.fav-panel li a:hover { color: var(--sage-deep); }
.fav-panel .fav-remove {
	background: none; border: none; cursor: pointer;
	color: var(--ink-soft); font-size: 1rem; padding: 2px 6px;
}
.fav-panel .fav-remove:hover { color: var(--terra); }
.fav-panel .fav-empty { color: var(--ink-soft); font-size: .9rem; margin: 0; }

@media (max-width: 1150px) {
	.hero-mosaic {
		grid-template-columns: 1.5fr 1fr 1fr;
		grid-template-areas:
			"feat a tall"
			"feat b tall"
			"trend trend trend";
		grid-template-rows: 220px 220px auto;
	}
	.trend-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 760px) {
	.hero-mosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 230px 180px 180px auto;
		grid-template-areas:
			"feat feat"
			"a tall"
			"b tall"
			"trend trend";
	}
}

/* ===== Sections / titres ===== */
.section-title {
	font-size: 1.15rem; margin: 0 0 20px;
	text-transform: uppercase; letter-spacing: .08em;
}
.section-title::after { content: " ⁓"; color: var(--terra); }
.section-head { display: flex; align-items: baseline; gap: 16px; margin: 40px 0 0; }
.section-head .see-all { margin-left: auto; font-size: .88rem; }

/* ===== Grille masonry (murs pleine largeur) ===== */
.masonry { columns: 300px; column-gap: 20px; }
.masonry > * { break-inside: avoid; margin: 0 0 20px; }
.content-area > .masonry, .related .masonry {
	width: 100vw; margin-left: calc(50% - 50vw);
	padding: 0 20px; margin-bottom: 0;
}
.content-area > .masonry > *, .related .masonry > * { margin-bottom: 20px; }

.card {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
	display: block;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card-thumb { position: relative; display: block; }
.card-thumb img { display: block; width: 100%; }
.card-cat {
	position: absolute; left: 12px; top: 12px;
	background: rgba(255, 255, 255, .94);
	color: var(--catc, var(--sage-deep));
	font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	padding: .4em .85em; border-radius: 6px;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(20, 18, 14, .18);
}
.card-thumb .badges { position: absolute; left: 12px; bottom: 12px; right: 12px; }
.card-body { padding: 15px 18px 12px; }
.card-title { font-size: 1.1rem; margin: 0 0 8px; font-weight: 650; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--sage-deep); }
.card-excerpt {
	color: var(--ink-soft); font-size: .9rem; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot {
	display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
	padding: 8px 18px 14px; font-size: .8rem; color: var(--ink-soft);
	min-width: 0;
}
.card-foot time { white-space: nowrap; }
.pin-btn {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--ink-soft); text-decoration: none; font-weight: 600;
	border: 1px solid var(--line); border-radius: 999px; padding: .3em .8em;
}
.pin-btn:hover { background: #E60023; border-color: #E60023; color: #fff; }
.pin-btn svg { width: 13px; height: 13px; fill: currentColor; }

/* Couleurs par catégorie (accent discret sur l'étiquette) */
.cat-loisirs { --catc: #2F7D5F; }
.cat-loisirs-creatifs { --catc: #2F7D5F; }
.cat-decoration-maison { --catc: #C2603E; }
.cat-decoration { --catc: #B4527E; }
.cat-jour-de-fete { --catc: #A8632B; }
.cat-couture-et-mode { --catc: #5F5590; }
.cat-bricolage-enfants { --catc: #2E6C9E; }
.cat-zero-dechet { --catc: #5C7A25; }
.cat-bricolage { --catc: #8A6D1F; }
.cat-diy-decoration { --catc: #1F7E78; }
.cat-noel-evenements { --catc: #A32E2E; }
.cat-halloween { --catc: #B65E12; }
.cat-paques { --catc: #6E8A22; }
.cat-st-valentin { --catc: #B23A5E; }
.cat-cosmetique-beaute { --catc: #96588C; }
.cat-creation-bijoux { --catc: #8A6D1F; }
.cat-origamis-et-pliage-papier { --catc: #3E6BA8; }
.cat-luminaires { --catc: #9A7420; }
.cat-book-nook { --catc: #6E5636; }
.cat-animaux-jardin { --catc: #3E7C31; }

/* Charger plus */
.load-more-wrap { text-align: center; margin: 34px 0 10px; }
.load-more {
	background: var(--sage); color: #fff; border: none; cursor: pointer;
	font: 600 1rem var(--sans);
	padding: .8em 2.4em; border-radius: 999px;
	transition: background .15s ease, transform .15s ease;
}
.load-more:hover { background: var(--sage-deep); transform: translateY(-1px); }
.load-more[disabled] { opacity: .6; cursor: wait; }
.pagination-fallback { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.pagination-fallback .page-numbers {
	padding: .4em .9em; border-radius: 8px; text-decoration: none;
	background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.pagination-fallback .page-numbers.current { background: var(--sage); color: #fff; }

/* ===== Bandeau avantages ===== */
.usp-band {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px;
	background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	width: 100vw; margin-left: calc(50% - 50vw);
	padding: 30px max(24px, calc(50vw - 720px));
	margin-top: 46px;
}
.usp { display: flex; gap: 12px; align-items: flex-start; }
.usp .usp-icon { font-size: 1.5rem; color: var(--terra); }
.usp strong { display: block; font-size: .95rem; }
.usp span { color: var(--ink-soft); font-size: .85rem; line-height: 1.45; }

/* ===== Newsletter terracotta ===== */
.newsletter {
	background: var(--terra);
	border-radius: var(--radius);
	color: #fff;
	padding: 34px 30px;
	margin: 44px 0 0;
	text-align: left;
}
.newsletter h2 { margin: 0 0 6px; font-size: 1.35rem; color: #fff; }
.newsletter p { color: #FBE8DE; margin: 0 0 16px; max-width: 55ch; }
.newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter input[type="email"] {
	border: none; border-radius: 10px;
	background: #fff; color: var(--ink);
	padding: .7em 1.2em; font: inherit; min-width: 260px;
}
.newsletter button {
	background: #2E2A24; color: #fff; border: none; cursor: pointer;
	font: 600 1rem var(--sans); padding: .7em 1.8em; border-radius: 10px;
}
.newsletter button:hover { background: #171512; }
.newsletter-ok { color: #fff; font-weight: 650; }

/* ===== Explorer par envie ===== */
.cat-grid-section { margin: 44px 0 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cat-tile {
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 18px 20px; text-decoration: none;
	display: flex; flex-direction: column; gap: 4px;
	border-top: 4px solid var(--catc, var(--sage));
	transition: transform .15s ease, box-shadow .15s ease;
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.cat-name { font-family: var(--serif); font-weight: 650; font-size: 1.05rem; color: var(--ink); }
.cat-count { color: var(--catc, var(--sage)); font-size: .84rem; font-weight: 600; }

/* ===== Article ===== */
.single-wrap { max-width: 780px; margin: 0 auto; padding: 36px 20px 60px; }
.single-header { text-align: center; margin-bottom: 26px; }
.single-header .cats { margin-bottom: 14px; }
.single-header .cats a {
	color: var(--catc, var(--sage-deep)); background: var(--card);
	box-shadow: var(--shadow);
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: .45em 1em; border-radius: 6px; text-decoration: none; margin: 0 3px;
}
.single-header h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin: 0 0 14px; }
.single-meta { color: var(--ink-soft); font-size: .88rem; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.single-thumb { margin: 0 0 30px; }
.single-thumb img { border-radius: var(--radius); box-shadow: var(--shadow); }

.entry-content { font-size: 1.05rem; }
.entry-content > * { max-width: 100%; }
.entry-content img { border-radius: 10px; height: auto; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignnone { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignleft { float: left; margin: .4em 1.6em 1em 0; }
.entry-content .alignright { float: right; margin: .4em 0 1em 1.6em; }
@media (max-width: 640px) {
	.entry-content .alignleft, .entry-content .alignright { float: none; display: block; margin: 0 auto 1em; }
}
.entry-content h2 { font-size: 1.5rem; margin-top: 1.8em; }
.entry-content h3 { font-size: 1.22rem; }
.entry-content blockquote {
	border-left: 4px solid var(--terra); margin: 1.5em 0; padding: .4em 0 .4em 1.2em;
	color: var(--ink-soft); font-style: italic;
}
.entry-content .wp-block-table, .entry-content table { display: block; overflow-x: auto; }

/* Fiche DIY */
.mjf-diy-card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 22px;
	margin: 0 0 26px;
	font-size: .96rem;
}
.mjf-diy-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mjf-diy-fact strong { color: var(--sage-deep); font-weight: 650; }
.mjf-diy-materials { margin-top: 12px; }
.mjf-diy-materials strong { color: var(--sage-deep); }
.mjf-diy-materials ul { margin: 6px 0 0; padding-left: 1.4em; columns: 2 220px; }
.mjf-diy-materials li { margin: .2em 0; }

/* Bloc « Pour réaliser ce DIY » */
.mjf-shop {
	background: var(--panel);
	border-radius: var(--radius);
	padding: 22px 24px;
	margin: 34px 0 0;
}
.mjf-shop-title { font-size: 1.2rem; margin: 0 0 4px; }
.mjf-shop-disclosure { color: var(--ink-soft); font-size: .8rem; margin: 0 0 14px; }
.mjf-shop-item {
	background: var(--card);
	border-radius: 12px;
	box-shadow: var(--shadow);
	margin-bottom: 10px;
	overflow: hidden;
}
.mjf-shop-item summary {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 16px 10px 10px;
	cursor: pointer; list-style: none;
}
.mjf-shop-item summary::-webkit-details-marker { display: none; }
.mjf-shop-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.mjf-shop-name { flex: 1; font-weight: 600; }
.mjf-shop-name small { display: block; color: var(--ink-soft); font-weight: 400; font-size: .82rem; }
.mjf-shop-cta { text-align: right; font-size: .85rem; color: var(--ink-soft); }
.mjf-shop-cta b { display: block; color: var(--sage-deep); }
.mjf-shop-offers { width: 100%; border-collapse: collapse; }
.mjf-shop-offers td { padding: 9px 16px; border-top: 1px solid var(--line); font-size: .92rem; }
.mjf-shop-offers td:nth-child(2) { font-weight: 650; white-space: nowrap; }
.mjf-shop-buy {
	display: inline-block; float: right;
	background: var(--sage); color: #fff !important;
	text-decoration: none; font-size: .84rem; font-weight: 600;
	padding: .45em 1.1em; border-radius: 999px;
}
.mjf-shop-buy:hover { background: var(--sage-deep); }

/* Bloc DIY sur mobile : vignette + nom côte à côte, prix et bouton en
   dessous sur une ligne, description masquée (l'essentiel d'abord). */
@media (max-width: 640px) {
	.mjf-shop { padding: 16px 14px; }
	.mjf-shop-item summary {
		flex-wrap: wrap; gap: 10px 12px;
		padding: 12px;
	}
	.mjf-shop-thumb { width: 46px; height: 46px; }
	.mjf-shop-name { flex: 1 1 0; font-size: .95rem; line-height: 1.35; align-self: center; }
	.mjf-shop-name small { display: none; }
	.mjf-shop-cta {
		flex: 1 1 100%;
		display: flex; align-items: center; justify-content: space-between;
		text-align: left; font-size: .9rem;
		border-top: 1px dashed var(--line);
		padding-top: 10px;
	}
	.mjf-shop-cta b {
		display: inline-block;
		background: var(--sage); color: #fff;
		font-size: .86rem; padding: .5em 1.1em; border-radius: 999px;
	}
	.mjf-shop-offers td { padding: 9px 12px; font-size: .88rem; }
	.mjf-shop-offers td:first-child { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
}

/* Partage */
.share-row { display: flex; gap: 10px; margin: 34px 0; flex-wrap: wrap; justify-content: center; }
.share-row a {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--line); border-radius: 999px;
	padding: .5em 1.2em; text-decoration: none; color: var(--ink); font-size: .9rem; font-weight: 600;
	background: var(--card);
}
.share-row a.pinterest:hover { background: #E60023; border-color: #E60023; color: #fff; }
.share-row a.facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.share-row a svg { width: 15px; height: 15px; fill: currentColor; }

.related { margin: 0 auto; padding: 0 18px 60px; }
.related h2 { font-size: 1.15rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: .08em; }
.related h2::after { content: " ⁓"; color: var(--terra); }

.post-nav { display: flex; gap: 16px; margin: 30px 0; }
.post-nav a {
	flex: 1; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 14px 18px; text-decoration: none; color: var(--ink); font-size: .9rem;
}
.post-nav a:hover { box-shadow: var(--shadow-hover); }
.post-nav .label { display: block; color: var(--ink-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.post-nav .next { text-align: right; }
@media (max-width: 640px) { .post-nav { flex-direction: column; } }

/* Auteur */
.author-hero {
	display: flex; gap: 20px; align-items: center;
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 24px 28px; margin-bottom: 30px;
}
.author-hero h1 { margin: 0 0 8px; font-size: 1.6rem; }
.author-photo { border-radius: 50%; flex-shrink: 0; }
.author-bio { color: var(--ink-soft); margin: 0 0 6px; max-width: 70ch; }
.author-count { color: var(--sage-deep); font-weight: 600; margin: 0; font-size: .9rem; }
.author-box {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 18px 22px; margin: 30px 0 0;
}
.author-box img { border-radius: 50%; flex-shrink: 0; }
.author-box-name { margin: 0 0 6px; font-weight: 650; }
.author-box-bio { margin: 0; color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 640px) { .author-hero { flex-direction: column; text-align: center; } }

/* ===== Commentaires ===== */
.comments-area { margin-top: 46px; border-top: 1px solid var(--line); padding-top: 30px; }
.comments-area .comment-list { list-style: none; padding: 0; }
.comments-area .comment { margin-bottom: 20px; background: var(--card); border-radius: 10px; padding: 14px 18px; box-shadow: var(--shadow); }
.comments-area .children { list-style: none; padding-left: 24px; margin-top: 14px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; border: 1px solid var(--line); border-radius: 8px;
	background: var(--card); color: var(--ink); padding: .6em .8em; font: inherit;
}
.comment-form .submit {
	background: var(--sage); color: #fff; border: none; cursor: pointer;
	font: 600 1rem var(--sans); padding: .7em 2em; border-radius: 999px;
}

/* ===== Pied de page ===== */
.site-footer {
	border-top: 1px solid var(--line);
	background: var(--card);
	margin-top: 46px;
}
.footer-inner {
	max-width: 1480px; margin: 0 auto; padding: 44px 24px 20px;
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 30px;
	color: var(--ink-soft); font-size: .9rem;
}
.footer-brand .footer-logo {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--serif); font-weight: 650; font-size: 1.2rem;
	color: var(--ink); text-transform: uppercase; letter-spacing: .1em;
	text-decoration: none;
}
.footer-brand img { width: 40px; height: 40px; }
.footer-brand p { max-width: 32ch; margin: 12px 0 0; }
.footer-col h3 {
	font-family: var(--sans); font-size: .82rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--ink); margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--sage-deep); }
.footer-bottom {
	max-width: 1480px; margin: 0 auto; padding: 16px 24px;
	border-top: 1px solid var(--line);
	display: flex; gap: 18px; flex-wrap: wrap;
	color: var(--ink-soft); font-size: .82rem;
}
.footer-bottom a { color: var(--ink-soft); }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; } }

/* ===== 404 / vide ===== */
.nothing-found { text-align: center; padding: 80px 20px; }
.nothing-found h1 { font-size: 2rem; }

/* ===== Archives ===== */
.page-heading { margin: 10px 0 24px; }
.page-heading h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 4px; }
.page-heading .count { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 640px) {
	.content-area { padding: 18px 14px 40px; }
	.single-wrap { padding: 24px 14px 40px; }
}

/* ===========================================================
   Fiche partenariat (page /partenariats/) — charte du site
   =========================================================== */
.mjf-kit { font-family: var(--sans); }
.mjf-kit .kit-lead {
	font-family: var(--serif); font-size: 1.5rem; line-height: 1.45; font-weight: 500;
	max-width: 40ch; text-wrap: balance; margin: 0 0 .5em;
}
.mjf-kit .kit-lead em { color: var(--terra); font-style: normal; }
.mjf-kit .kit-eyebrow {
	font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
	color: var(--terra); margin: 2.6em 0 .3em;
}
.mjf-kit h2 { margin-top: .2em; }
.mjf-kit .kit-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px; margin: 1.6em 0;
}
.mjf-kit .kit-stat {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 18px 20px 14px; box-shadow: var(--shadow);
}
.mjf-kit .kit-stat b {
	display: block; font-family: var(--serif); font-size: 2.4rem; font-weight: 700;
	line-height: 1.1; color: var(--sage); font-variant-numeric: tabular-nums;
}
.mjf-kit .kit-stat.is-hot b { color: var(--terra); }
.mjf-kit .kit-stat span { font-size: .84rem; color: var(--ink-soft); }
.mjf-kit .kit-table { display: table; width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mjf-kit .kit-table th, .mjf-kit .kit-table td { text-align: left; padding: 10px 16px; font-size: .95rem; }
.mjf-kit .kit-table th { background: var(--panel); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.mjf-kit .kit-table tr + tr td { border-top: 1px solid var(--line); }
.mjf-kit .kit-table td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sage); white-space: nowrap; }
.mjf-kit .kit-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; margin: 1em 0; }
.mjf-kit .kit-chips li {
	background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--sage);
	border-radius: 999px; padding: 7px 17px; font-size: .92rem; font-weight: 600;
}
.mjf-kit .kit-chips li:nth-child(even) { border-left-color: var(--terra); }
.mjf-kit .kit-chips li small { color: var(--ink-soft); font-weight: 500; }
.mjf-kit .kit-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 1em 0; }
.mjf-kit .kit-format { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.mjf-kit .kit-format h3 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .4em; color: var(--sage); }
.mjf-kit .kit-format p { font-size: .89rem; color: var(--ink-soft); margin: 0; }
.mjf-kit ul.kit-checks { list-style: none; padding: 0; margin: 1em 0; }
.mjf-kit ul.kit-checks li { padding: 6px 0 6px 30px; position: relative; }
.mjf-kit ul.kit-checks li::before {
	content: ""; position: absolute; left: 2px; top: 14px; width: 13px; height: 7px;
	border-left: 3px solid var(--terra); border-bottom: 3px solid var(--terra); transform: rotate(-45deg);
}
.mjf-kit ul.kit-checks b { color: var(--sage); }
.mjf-kit .kit-pledge { background: var(--panel); border-radius: var(--radius); padding: 6px 24px; }
.mjf-kit .kit-pledge ul.kit-checks li::before { border-color: var(--sage); }
.mjf-kit .kit-contact {
	background: var(--sage); color: var(--paper); border-radius: var(--radius);
	padding: 26px 28px; margin: 2.6em 0 0;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.mjf-kit .kit-contact h2 { color: inherit; margin: 0 0 .2em; }
.mjf-kit .kit-contact p { color: inherit; opacity: .92; margin: 0; font-size: .93rem; }
.mjf-kit .kit-contact .kit-cta {
	background: var(--terra); color: #FFF8F2; text-decoration: none; font-weight: 700;
	padding: 12px 24px; border-radius: 999px; font-size: .96rem; white-space: nowrap;
}
.mjf-kit .kit-contact .kit-cta:hover { background: var(--terra-deep); }

/* ===========================================================
   Page auteur — récit au défilement
   =========================================================== */
.au { overflow-x: clip; }

/* --- Héro --- */
.au-hero {
	min-height: 92vh; position: relative;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	text-align: center; padding: 60px 20px;
}
.au-eyebrow {
	font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	color: var(--terra); margin: 0 0 .6em;
}
.au-title {
	font-family: var(--serif); font-weight: 800;
	font-size: clamp(3.2rem, 10vw, 7.5rem); line-height: 1.02; margin: 0; color: var(--ink);
}
.au-title span { display: inline-block; opacity: 0; transform: translateY(46px); animation: au-up .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.au-title span:nth-child(2) { animation-delay: .16s; }
.au-title span:nth-child(3) { animation-delay: .32s; color: var(--mint); }
.au-sub {
	max-width: 54ch; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.7;
	margin: 26px 0 0; opacity: 0; animation: au-up .9s .6s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes au-up { to { opacity: 1; transform: none; } }
.au-scroll-cue {
	position: absolute; bottom: 26px; left: 50%; translate: -50% 0;
	color: var(--terra); font-size: 1.5rem; animation: au-cue 1.6s ease-in-out infinite;
}
@keyframes au-cue { 50% { transform: translateY(9px); opacity: .5; } }

.au-hero .au-ph {
	position: absolute; width: clamp(110px, 15vw, 220px); aspect-ratio: 3 / 4;
	object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-hover); z-index: -1;
}
.au-ph-1 { top: 9%;  left: 6%;  --rot: -7deg; --dy: -16vh; transform: rotate(-7deg); }
.au-ph-2 { top: 13%; right: 7%; --rot: 5deg;  --dy: -26vh; transform: rotate(5deg); }
.au-ph-3 { bottom: 11%; left: 12%;  --rot: 4deg;  --dy: -34vh; transform: rotate(4deg); }
.au-ph-4 { bottom: 15%; right: 11%; --rot: -5deg; --dy: -20vh; transform: rotate(-5deg); }
@supports (animation-timeline: scroll()) {
	.au-hero .au-ph {
		animation: au-drift linear both;
		animation-timeline: scroll();
		animation-range: 0 130vh;
	}
	@keyframes au-drift {
		from { transform: translateY(0) rotate(var(--rot)); }
		to   { transform: translateY(var(--dy)) rotate(var(--rot)); }
	}
}
@media (max-width: 760px) {
	.au-ph-3, .au-ph-4 { display: none; }
	.au-hero .au-ph { opacity: .55; }
}

/* --- Révélations au défilement --- */
.mjf-js .au-reveal { opacity: 0; transform: translateY(46px); transition: opacity .85s ease, transform .85s cubic-bezier(.2, .7, .2, 1); }
.mjf-js .au-reveal[data-d="1"] { transition-delay: .12s; }
.mjf-js .au-reveal[data-d="2"] { transition-delay: .24s; }
.mjf-js .au-reveal[data-d="3"] { transition-delay: .36s; }
.mjf-js .au-reveal.in-view { opacity: 1; transform: none; }

/* --- Chiffres --- */
.au-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px; max-width: 1060px; margin: 4vh auto 10vh; padding: 0 20px; text-align: center;
}
.au-stat b {
	display: block; font-family: var(--serif); font-weight: 800;
	font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.1; color: var(--sage);
	font-variant-numeric: tabular-nums;
}
.au-stat.is-hot b { color: var(--terra); }
.au-stat span { font-size: .9rem; color: var(--ink-soft); }

.au-stats-note { text-align: center; color: var(--ink-soft); font-size: .82rem; font-style: italic; margin: -6vh auto 10vh; padding: 0 20px; }

/* --- Chapitres --- */
.au-chapter {
	display: grid; grid-template-columns: 1fr 1fr; align-items: center;
	gap: clamp(26px, 6vw, 70px); max-width: 1060px; margin: 0 auto 16vh; padding: 0 20px;
}
.au-chapter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-hover); }
.au-chapter.au-flip img { order: -1; }
.au-chapter h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 .5em; text-wrap: balance; }
.au-chapter-txt p { color: var(--ink-soft); line-height: 1.75; margin: 0; }
.au-chapter-txt .au-eyebrow { margin-bottom: .4em; }
@media (max-width: 760px) {
	.au-chapter { grid-template-columns: 1fr; margin-bottom: 10vh; }
	.au-chapter.au-flip img { order: 0; }
}

/* --- Bande photos --- */
.au-strip { width: 100vw; margin: 0 0 14vh calc(50% - 50vw); overflow: clip; display: grid; gap: 16px; }
.au-row { display: flex; gap: 16px; width: max-content; }
.au-row img { width: clamp(150px, 18vw, 230px); aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.au-row-b { margin-left: -90px; }
@supports (animation-timeline: view()) {
	.au-row { animation: linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	.au-row-a { animation-name: au-slide-a; }
	.au-row-b { animation-name: au-slide-b; }
	@keyframes au-slide-a { from { transform: translateX(0); } to { transform: translateX(-14%); } }
	@keyframes au-slide-b { from { transform: translateX(-14%); } to { transform: translateX(0); } }
}

/* --- Transition vers la grille --- */
.au-cta { text-align: center; max-width: 700px; margin: 0 auto 8vh; padding: 0 20px; }
.au-cta h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 0 0 .3em; }
.au-cta p { color: var(--ink-soft); margin: 0; }

/* --- Accessibilité : réduction des animations --- */
@media (prefers-reduced-motion: reduce) {
	.au *, .au *::before { animation: none !important; transition: none !important; }
	.mjf-js .au-reveal { opacity: 1; transform: none; }
	.au-title span, .au-sub { opacity: 1; transform: none; }
}

/* ===========================================================
   Page À propos — histoire illustrée (.mjf-story)
   =========================================================== */
.mjf-story .story-lead {
	font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.7rem);
	line-height: 1.5; font-weight: 600; text-wrap: balance;
}
.mjf-story .au-eyebrow { margin: 3.2em 0 .8em; }
.mjf-story .story-pull {
	font-family: var(--serif); font-weight: 700; color: var(--terra);
	font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.35; margin: 1.5em 0;
}
.mjf-story .story-fig { margin: 2.6em 0; }
.mjf-story .story-fig img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--radius); box-shadow: var(--shadow-hover);
}
.mjf-story .story-verbs {
	display: flex; flex-direction: column; gap: .05em; margin: 1.4em 0;
	font-family: var(--serif); font-weight: 700; color: var(--sage);
	font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.25;
}
.mjf-story .story-verbs .is-terra { color: var(--terra); }
.mjf-story .story-sign { font-family: var(--serif); font-size: 1.3rem; margin-top: 2em; }
.mjf-story .story-fig.crop-banner img { aspect-ratio: 2 / 1; object-position: top; }
.mjf-story .story-fig.story-portrait { margin-top: 0; }
.mjf-story .story-fig.story-portrait img { aspect-ratio: auto; }

/* ===== Avatar de l'autrice ===== */
.single-meta .byline .avatar { width: 26px; height: 26px; border-radius: 50%; vertical-align: -8px; margin-right: 8px; object-fit: cover; }
.author-box .avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.au-hero .au-face {
	width: 118px; height: 118px; border-radius: 50%; object-fit: cover;
	border: 4px solid var(--card); box-shadow: var(--shadow-hover);
	margin-bottom: 16px;
	opacity: 0; animation: au-up .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) { .au-hero .au-face { opacity: 1; } }