/* ==========================================================================
   La Moutarde — monde « L'Ardoise »
   L'ardoise annonce et classe ; la carte se lit sur fond clair.
   ========================================================================== */

:root :where(.wp-site-blocks),
body .wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
}

:root {
	--lm-mesure: 41rem;
	--lm-large: 72rem;
	--lm-gouttiere: clamp(1.25rem, 5vw, 3.5rem);

	/* Grain d'ardoise : bruit fractal figé, jamais un dégradé. */
	--lm-grain-ardoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)' opacity='.4'/%3E%3C/svg%3E");
	/* Nuage minéral large, qui donne la moucheture de la pierre. */
	--lm-nuage-ardoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
	/* Poussière de craie : trame très fine posée sur les lettres. */
	--lm-grain-craie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23c)'/%3E%3C/svg%3E");

	--lm-transition: 220ms cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   1. Surfaces du navigateur — ce qu'on n'a pas dessiné porte aussi le design
   -------------------------------------------------------------------------- */

::selection {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--ardoise);
}

.lm-ardoise ::selection,
.lm-ardoise-profonde ::selection {
	background: var(--wp--preset--color--jaune-vif);
	color: var(--wp--preset--color--ardoise-profonde);
}

html {
	scrollbar-color: var(--wp--preset--color--encre-douce) var(--wp--preset--color--lavee);
	scrollbar-width: thin;
	caret-color: var(--wp--preset--color--cachet);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--wp--preset--color--lavee); }
::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--encre-douce);
	border: 3px solid var(--wp--preset--color--lavee);
	border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--encre); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--cachet);
	outline-offset: 3px;
	border-radius: 2px;
}

.lm-ardoise :where(a, button, summary, [tabindex]):focus-visible,
.lm-ardoise-profonde :where(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--jaune-vif);
}

/* Les chiffres des tableaux s'alignent en colonnes. */
table, .lm-chiffre, time { font-variant-numeric: tabular-nums; }

html { background-color: var(--wp--preset--color--ardoise-profonde); }
body { background-color: var(--wp--preset--color--lavee); }

/* Les sections se touchent : le tableau est d'un seul tenant. */
.wp-site-blocks > *,
main.wp-block-group > * { margin-block: 0; }

main.wp-block-group { gap: 0; }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }

p, li { text-wrap: pretty; }
h1, h2, h3, h4, .lm-titre { text-wrap: balance; }

img { height: auto; }

/* --------------------------------------------------------------------------
   3. L'ardoise — la matière
   -------------------------------------------------------------------------- */

.lm-ardoise,
.lm-ardoise-profonde {
	position: relative;
	isolation: isolate;
	color: var(--wp--preset--color--craie);
}

.lm-ardoise { background-color: var(--wp--preset--color--ardoise); }
.lm-ardoise-profonde { background-color: var(--wp--preset--color--ardoise-profonde); }

.lm-ardoise::before,
.lm-ardoise-profonde::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--lm-grain-ardoise), var(--lm-nuage-ardoise);
	background-size: 320px 320px, 700px 700px;
	opacity: .5;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.lm-ardoise :where(h1, h2, h3, h4, h5, h6, .lm-titre),
.lm-ardoise-profonde :where(h1, h2, h3, h4, h5, h6, .lm-titre) {
	color: var(--wp--preset--color--craie);
}

.lm-ardoise :where(a):not(.wp-element-button),
.lm-ardoise-profonde :where(a):not(.wp-element-button) {
	color: var(--wp--preset--color--craie);
	text-decoration-color: rgba(240, 237, 228, .4);
}

.lm-ardoise :where(a):not(.wp-element-button):hover,
.lm-ardoise-profonde :where(a):not(.wp-element-button):hover {
	color: var(--wp--preset--color--jaune-vif);
	text-decoration-color: var(--wp--preset--color--jaune-vif);
}

.lm-secondaire { color: var(--wp--preset--color--craie-effacee); }

/* La craie : les lettres portent leur poussière. */
.lm-craie {
	font-family: var(--wp--preset--font-family--craie);
	color: var(--wp--preset--color--craie);
	position: relative;
}

/* Le halo de poussière : la craie ne coupe jamais net sur la pierre. */
.lm-craie {
	text-shadow:
		0 0 1px rgba(240, 237, 228, .22),
		0 1px 14px rgba(240, 237, 228, .09);
}

@supports (mask-image: url("")) {
	.lm-craie-texturee {
		background-image: var(--lm-grain-craie);
		background-size: 140px 140px;
		background-clip: text;
		-webkit-background-clip: text;
	}
}

/* --------------------------------------------------------------------------
   4. Le filet tracé — la règle est tirée à la main, jamais un border
   -------------------------------------------------------------------------- */

.lm-filet {
	display: block;
	width: 100%;
	height: 10px;
	overflow: visible;
	color: var(--wp--preset--color--craie);
	opacity: .85;
}

.lm-filet path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.lm-filet--encre { color: rgba(27, 31, 35, .55); }
.lm-filet--jaune { color: var(--wp--preset--color--jaune-vif); }
.lm-filet--fin path { stroke-width: 1.5; }

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */

.lm-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(240, 237, 228, .14);
}

.lm-entete__interieur {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: 0.875rem var(--lm-gouttiere);
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.lm-marque {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--craie);
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--wp--preset--color--craie);
	white-space: nowrap;
}

.lm-marque__la {
	font-weight: 400;
	font-size: .78em;
	opacity: .72;
	font-stretch: 88%;
}

.lm-marque__graine {
	width: .42em;
	height: .42em;
	border-radius: 50%;
	background: var(--wp--preset--color--jaune-vif);
	align-self: center;
	margin-left: .1em;
	flex: none;
}

.lm-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.75rem);
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--menu);
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lm-nav a {
	color: var(--wp--preset--color--craie-effacee);
	text-decoration: none;
	padding: .35rem 0;
	position: relative;
	transition: color var(--lm-transition);
}

.lm-nav a:hover,
.lm-nav a[aria-current="page"] { color: var(--wp--preset--color--craie); }

/* Le trait de craie sous l'entrée active : tracé, pas souligné. */
.lm-nav a::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--color--jaune-vif);
	clip-path: polygon(0 40%, 6% 10%, 22% 55%, 41% 15%, 63% 60%, 81% 20%, 100% 50%, 100% 100%, 0 100%);
	opacity: 0;
	transform: scaleX(.4);
	transform-origin: left;
	transition: opacity var(--lm-transition), transform var(--lm-transition);
}

.lm-nav a:hover::after,
.lm-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }

/* Menu au doigt sur mobile */
.lm-nav--replie { display: none; }

@media (max-width: 46rem) {
	.lm-entete__interieur { padding-inline: 1.25rem; }
	.lm-nav { display: none; }
	.lm-nav--replie { display: flex; margin-left: auto; }
	.lm-menu-detail { position: relative; }
	.lm-menu-detail > summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: .5rem;
		font-family: var(--wp--preset--font-family--craie);
		font-size: var(--wp--preset--font-size--menu);
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--wp--preset--color--craie);
		padding: .55rem .25rem;
		min-height: 44px;
	}
	.lm-menu-detail > summary::-webkit-details-marker { display: none; }
	.lm-menu-detail[open] > summary .lm-icone--menu { transform: rotate(90deg); }
	.lm-icone--menu { transition: transform var(--lm-transition); }
	.lm-menu-detail__panneau {
		position: absolute;
		right: 0;
		top: calc(100% + .75rem);
		min-width: 15rem;
		background: var(--wp--preset--color--ardoise-profonde);
		border: 1px solid rgba(240, 237, 228, .16);
		border-radius: 4px;
		padding: .5rem;
		display: grid;
		box-shadow: 0 4px 8px rgba(0, 0, 0, .3), 0 24px 48px -12px rgba(0, 0, 0, .55);
	}
	.lm-menu-detail__panneau a {
		display: block;
		padding: .7rem .75rem;
		min-height: 44px;
		color: var(--wp--preset--color--craie);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--craie);
		font-size: var(--wp--preset--font-size--petit);
		border-radius: 3px;
	}
	.lm-menu-detail__panneau a:hover { background: rgba(240, 237, 228, .08); color: var(--wp--preset--color--jaune-vif); }
}

/* --------------------------------------------------------------------------
   6. Le tableau du jour — première vue de l'accueil
   -------------------------------------------------------------------------- */

.lm-tableau {
	position: relative;
	overflow: hidden;
}

.lm-tableau__interieur {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: clamp(3rem, 9vw, 6.5rem) var(--lm-gouttiere) clamp(2.5rem, 6vw, 4.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.lm-tableau__titre {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--ardoise-titre);
	font-weight: 800;
	font-stretch: 96%;
	line-height: .92;
	letter-spacing: -0.04em;
	margin: 0;
	color: var(--wp--preset--color--craie);
}

.lm-tableau__titre .lm-tableau__la {
	display: block;
	font-size: .3em;
	font-weight: 400;
	font-stretch: 84%;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .66;
	margin-bottom: .55em;
}

/* Chaque lettre du nom est posée à la main : la craie ne tombe jamais droit. */
.lm-tableau__titre .lm-lettre {
	display: inline-block;
	transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
}

.lm-tableau__chapeau {
	max-width: 32rem;
	margin: 1.6rem 0 0;
	font-size: var(--wp--preset--font-size--chapeau);
	line-height: 1.55;
	text-wrap: normal;
	color: var(--wp--preset--color--craie-effacee);
}

.lm-tableau__photo {
	position: relative;
	margin: 0;
}

/* La photo est posée sur la même pierre : pas de cadre, on fond les bords. */
.lm-tableau__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

@media (max-width: 56rem) {
	.lm-tableau__interieur { grid-template-columns: 1fr; gap: 2rem; }
	.lm-tableau__photo { order: -1; max-width: 22rem; }
}

/* --------------------------------------------------------------------------
   7. Le menu du jour — les quatre entrées, comme les sections d'une carte
   -------------------------------------------------------------------------- */

.lm-menu-jour__interieur {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: 0 var(--lm-gouttiere) clamp(3rem, 8vw, 5rem);
}

.lm-menu-jour__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.lm-entree {
	border-top: 1px solid rgba(240, 237, 228, .16);
}

.lm-entree:last-child { border-bottom: 1px solid rgba(240, 237, 228, .16); }

.lm-entree__lien {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: clamp(.75rem, 2.5vw, 2rem);
	row-gap: .5rem;
	padding: clamp(1.1rem, 2.6vw, 1.85rem) 0 clamp(.9rem, 2vw, 1.35rem);
	text-decoration: none;
	color: var(--wp--preset--color--craie);
	transition: color var(--lm-transition);
}

.lm-entree__lien:hover { color: var(--wp--preset--color--jaune-vif); }

.lm-entree__nom {
	font-family: var(--wp--preset--font-family--craie);
	font-size: clamp(1.35rem, 3.4vw, 2.15rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.lm-entree__question {
	font-size: var(--wp--preset--font-size--moyen);
	color: var(--wp--preset--color--craie-effacee);
	font-style: italic;
	justify-self: start;
	transition: color var(--lm-transition);
}

.lm-entree__lien:hover .lm-entree__question { color: var(--wp--preset--color--craie); }

.lm-entree__compte {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--menu);
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--wp--preset--color--craie-effacee);
	white-space: nowrap;
}

/* Le trait de craie qui court sous l'entrée au survol */
.lm-entree__trait {
	grid-column: 1 / -1;
	height: 6px;
	margin-top: -.2rem;
	color: var(--wp--preset--color--jaune-vif);
	opacity: 0;
	transition: opacity var(--lm-transition);
}

.lm-entree__lien:hover .lm-entree__trait,
.lm-entree__lien:focus-visible .lm-entree__trait { opacity: 1; }

@media (max-width: 40rem) {
	.lm-entree__lien { grid-template-columns: minmax(0, 1fr) auto; }
	.lm-entree__question { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   8. Le champ jaune — une seule couleur qui prend vraiment la page
   -------------------------------------------------------------------------- */

.lm-champ-jaune {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--ardoise);
	position: relative;
	isolation: isolate;
}

.lm-champ-jaune::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--lm-grain-ardoise);
	background-size: 320px 320px;
	opacity: .22;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.lm-champ-jaune__interieur {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 5.5rem) var(--lm-gouttiere);
}

.lm-champ-jaune :where(h2, h3) { color: var(--wp--preset--color--ardoise); }
.lm-champ-jaune :where(a) { color: var(--wp--preset--color--ardoise); text-decoration-color: rgba(35, 39, 44, .45); }
.lm-champ-jaune :where(a):hover { color: var(--wp--preset--color--cachet); text-decoration-color: currentColor; }

.lm-champ-jaune__titre {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--titre);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 .5rem;
}

.lm-champ-jaune__intro {
	max-width: 46ch;
	margin: 0 0 clamp(2rem, 4vw, 2.75rem);
	color: rgba(35, 39, 44, .82);
}

/* --------------------------------------------------------------------------
   9. Les fiches d'article — jamais des cartes toutes pareilles
   -------------------------------------------------------------------------- */

.lm-fiches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.lm-fiche { display: flex; }

.lm-fiche > a {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.lm-fiche__photo {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(35, 39, 44, .1);
}

.lm-fiche__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.lm-fiche a:hover .lm-fiche__photo img { transform: scale(1.035); }

/* Une fiche sans photographie n'est pas une fiche cassée : c'est une entrée
   écrite, comme sur une carte. Elle prend son filet et respire davantage. */
.lm-fiche:not(:has(.lm-fiche__photo)) > a {
	border-top: 1px solid rgba(27, 31, 35, .18);
	padding-top: 1.1rem;
	gap: .6rem;
}

.lm-champ-jaune .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(35, 39, 44, .3); }
.lm-ardoise .lm-fiche:not(:has(.lm-fiche__photo)) > a,
.lm-ardoise-profonde .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(240, 237, 228, .22); }

.lm-fiche:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--sous-titre);
}

.lm-fiches--une-en-tete > .lm-fiche:first-child:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--titre);
	max-width: 20ch;
}

.lm-fiche__texte {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

.lm-fiche__titre {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--chapeau);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;
	margin: 0;
}

.lm-fiche a { text-decoration: none; color: inherit; }
.lm-fiche a:hover /* Une fiche sans photographie n'est pas une fiche cassée : c'est une entrée
   écrite, comme sur une carte. Elle prend son filet et respire davantage. */
.lm-fiche:not(:has(.lm-fiche__photo)) > a {
	border-top: 1px solid rgba(27, 31, 35, .18);
	padding-top: 1.1rem;
	gap: .6rem;
}

.lm-champ-jaune .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(35, 39, 44, .3); }
.lm-ardoise .lm-fiche:not(:has(.lm-fiche__photo)) > a,
.lm-ardoise-profonde .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(240, 237, 228, .22); }

.lm-fiche:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--sous-titre);
}

.lm-fiches--une-en-tete > .lm-fiche:first-child:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--titre);
	max-width: 20ch;
}

.lm-fiche__texte {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

.lm-fiche__titre { text-decoration: underline; text-decoration-thickness: 2px; }

.lm-fiche__extrait {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.55;
	color: var(--wp--preset--color--encre-douce);
}

.lm-champ-jaune .lm-fiche__extrait { color: rgba(35, 39, 44, .78); }

/* La première fiche d'une série prend la largeur : la carte n'est pas une grille. */
.lm-fiches--une-en-tete > .lm-fiche:first-child { grid-column: 1 / -1; }

.lm-fiches--une-en-tete > .lm-fiche:first-child > a {
	flex-direction: row;
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
	align-items: center;
}

.lm-fiches--une-en-tete > .lm-fiche:first-child .lm-fiche__photo {
	flex: 0 0 min(48%, 26rem);
	aspect-ratio: 3 / 2;
}

.lm-fiches--une-en-tete > .lm-fiche:first-child /* Une fiche sans photographie n'est pas une fiche cassée : c'est une entrée
   écrite, comme sur une carte. Elle prend son filet et respire davantage. */
.lm-fiche:not(:has(.lm-fiche__photo)) > a {
	border-top: 1px solid rgba(27, 31, 35, .18);
	padding-top: 1.1rem;
	gap: .6rem;
}

.lm-champ-jaune .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(35, 39, 44, .3); }
.lm-ardoise .lm-fiche:not(:has(.lm-fiche__photo)) > a,
.lm-ardoise-profonde .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(240, 237, 228, .22); }

.lm-fiche:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--sous-titre);
}

.lm-fiches--une-en-tete > .lm-fiche:first-child:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--titre);
	max-width: 20ch;
}

.lm-fiche__texte { gap: .8rem; }

.lm-fiches--une-en-tete > .lm-fiche:first-child .lm-fiche__extrait {
	font-size: var(--wp--preset--font-size--moyen);
	max-width: 48ch;
}

.lm-fiches--une-en-tete > .lm-fiche:first-child /* Une fiche sans photographie n'est pas une fiche cassée : c'est une entrée
   écrite, comme sur une carte. Elle prend son filet et respire davantage. */
.lm-fiche:not(:has(.lm-fiche__photo)) > a {
	border-top: 1px solid rgba(27, 31, 35, .18);
	padding-top: 1.1rem;
	gap: .6rem;
}

.lm-champ-jaune .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(35, 39, 44, .3); }
.lm-ardoise .lm-fiche:not(:has(.lm-fiche__photo)) > a,
.lm-ardoise-profonde .lm-fiche:not(:has(.lm-fiche__photo)) > a { border-top-color: rgba(240, 237, 228, .22); }

.lm-fiche:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--sous-titre);
}

.lm-fiches--une-en-tete > .lm-fiche:first-child:not(:has(.lm-fiche__photo)) .lm-fiche__titre {
	font-size: var(--wp--preset--font-size--titre);
	max-width: 20ch;
}

.lm-fiche__texte {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

.lm-fiche__titre {
	font-size: var(--wp--preset--font-size--titre);
}

@media (max-width: 44rem) {
	.lm-fiches--une-en-tete > .lm-fiche:first-child > a { flex-direction: column; }
	.lm-fiches--une-en-tete > .lm-fiche:first-child .lm-fiche__photo { flex: none; width: 100%; aspect-ratio: 4 / 3; }
}

/* Article déjà lu : la craie garde sa marque, comme un plat coché au tableau. */
.lm-fiche[data-lu="1"] .lm-fiche__titre::after,
.lm-entree__lien[data-lu="1"] .lm-entree__nom::after {
	content: "";
	display: inline-block;
	width: .78em;
	height: .78em;
	margin-left: .4em;
	vertical-align: baseline;
	background: currentColor;
	opacity: .5;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.2c2.4 1.1 4.6 3.1 6 5.6C11.6 12.4 15.4 6.9 21 3.4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.2c2.4 1.1 4.6 3.1 6 5.6C11.6 12.4 15.4 6.9 21 3.4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   10. L'article — l'ardoise lavée
   -------------------------------------------------------------------------- */

.lm-tete-article {
	position: relative;
}

.lm-tete-article__interieur {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: clamp(2.25rem, 6vw, 4rem) var(--lm-gouttiere) clamp(2rem, 5vw, 3rem);
}

.lm-fil {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--menu);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--craie-effacee);
	margin: 0 0 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
}

.lm-fil a { color: inherit; text-decoration: none; }
.lm-fil a:hover { color: var(--wp--preset--color--jaune-vif); }
.lm-fil__separateur { opacity: .45; }

.lm-tete-article__titre {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--grand-titre);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0;
	max-width: 22ch;
	color: var(--wp--preset--color--craie);
}

.lm-tete-article__meta {
	margin: 1.4rem 0 0;
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--craie-effacee);
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	align-items: center;
}

.lm-corps {
	max-width: var(--lm-mesure);
	margin-inline: auto;
	padding: clamp(2.25rem, 5vw, 3.5rem) var(--lm-gouttiere) clamp(3rem, 7vw, 5rem);
}

.lm-corps :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--craie);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.14;
	color: var(--wp--preset--color--encre);
}

.lm-corps > * { margin-block: 0 1.35rem; }
.lm-corps > :last-child { margin-bottom: 0; }

/* Plus d'air au-dessus d'un titre qu'en dessous. */
.lm-corps h2 { margin-top: 3.25rem; margin-bottom: 1rem; }
.lm-corps h3 { margin-top: 2.5rem; margin-bottom: .75rem; }
.lm-corps h4 { margin-top: 2rem; margin-bottom: .6rem; }
.lm-corps > h2:first-child,
.lm-corps > h3:first-child { margin-top: 0; }

.lm-corps p { line-height: 1.68; }

/* Le chapeau : premier paragraphe, plus grand, il porte la réponse. */
.lm-corps > p:first-of-type {
	font-size: var(--wp--preset--font-size--chapeau);
	line-height: 1.52;
	color: var(--wp--preset--color--encre);
}

.lm-corps :where(ul, ol) { padding-left: 1.35rem; }
.lm-corps :where(ul, ol) li { margin-bottom: .6rem; line-height: 1.6; }
.lm-corps ul { list-style: none; padding-left: 1.5rem; }

.lm-corps ul > li::before {
	content: "";
	display: inline-block;
	width: .42em;
	height: .42em;
	border-radius: 50%;
	background: var(--wp--preset--color--jaune);
	margin-left: -1.5rem;
	margin-right: 1.08rem;
	vertical-align: .18em;
}

/* Les étapes numérotées d'une recette : le compteur est écrit à la craie. */
.lm-corps ol {
	list-style: none;
	padding-left: 0;
	counter-reset: etape;
}

.lm-corps ol > li {
	counter-increment: etape;
	position: relative;
	padding-left: 3.1rem;
	margin-bottom: 1.05rem;
}

.lm-corps ol > li::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: -.08em;
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--craie);
	font-size: .95rem;
	font-weight: 700;
	color: var(--wp--preset--color--ardoise);
	background: var(--wp--preset--color--jaune);
	border-radius: 50%;
	font-variant-numeric: tabular-nums;
}

.lm-corps :where(strong, b) { font-weight: 700; }

.lm-corps a {
	color: var(--wp--preset--color--encre);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--jaune);
	text-decoration-thickness: 2px;
	text-underline-offset: .17em;
	transition: color var(--lm-transition), text-decoration-color var(--lm-transition);
}

.lm-corps a:hover {
	color: var(--wp--preset--color--cachet);
	text-decoration-color: var(--wp--preset--color--cachet);
}

/* --------------------------------------------------------------------------
   11. Les encadrés — l'astuce, et la mise en garde
   -------------------------------------------------------------------------- */

.lm-corps blockquote,
.wp-block-quote {
	margin: 2.25rem 0;
	padding: 1.4rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--jaune-pale);
	border: 1px solid rgba(216, 162, 42, .5);
	border-radius: 3px;
	position: relative;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.58;
}

.lm-corps blockquote > :last-child,
.wp-block-quote > :last-child { margin-bottom: 0; }

.lm-corps blockquote p,
.wp-block-quote p { margin-bottom: .8rem; }

/* Le mot « Astuce » n'est plus écrit : il est dessiné, une fois, en tête. */
.lm-corps blockquote::before,
.wp-block-quote::before {
	content: "";
	position: absolute;
	top: -.72rem;
	left: 1.25rem;
	width: 1.45rem;
	height: 1.45rem;
	background: var(--wp--preset--color--jaune-pale);
	border: 1px solid rgba(216, 162, 42, .5);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6410' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.4.3.6.8.6 1.3v.3h5.8v-.3c0-.5.2-1 .6-1.3A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: .95rem;
}

/* Mise en garde : le rouge cachet, réservé à la santé et à la sécurité. */
.lm-corps blockquote.est-avertissement,
.wp-block-quote.est-avertissement {
	background: #fbeeec;
	border-color: rgba(168, 52, 42, .45);
}

.lm-corps blockquote.est-avertissement::before,
.wp-block-quote.est-avertissement::before {
	background-color: #fbeeec;
	border-color: rgba(168, 52, 42, .45);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8342a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v5M12 17.5v.01M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

.lm-corps blockquote.est-avertissement strong,
.wp-block-quote.est-avertissement strong { color: var(--wp--preset--color--cachet); }

/* --------------------------------------------------------------------------
   12. Tableaux — larges, mais utilisables au doigt
   -------------------------------------------------------------------------- */

.lm-corps .wp-block-table { margin: 2.25rem 0; }

.lm-corps .wp-block-table > table,
.lm-corps table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.4;
	background: var(--wp--preset--color--lavee-claire);
}

.lm-corps th {
	background: var(--wp--preset--color--ardoise);
	color: var(--wp--preset--color--craie);
	font-weight: 600;
	letter-spacing: .01em;
	text-align: left;
	padding: .7rem .85rem;
	border: none;
	vertical-align: bottom;
}

.lm-corps td {
	padding: .7rem .85rem;
	border: none;
	border-top: 1px solid rgba(27, 31, 35, .12);
	vertical-align: top;
}

.lm-corps tbody tr:nth-child(even) td { background: rgba(27, 31, 35, .028); }

/* Le tableau déborde : il défile dans son propre cadre, jamais la page. */
.lm-tableau-defilant {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	border-radius: 3px;
	box-shadow: inset -12px 0 12px -12px rgba(27, 31, 35, .3);
}

.lm-tableau-defilant > table { min-width: 34rem; }

/* --------------------------------------------------------------------------
   13. L'encart d'épicerie — emplacement d'affiliation
   -------------------------------------------------------------------------- */

.lm-epicerie {
	margin: 2.75rem 0;
	padding: 1.5rem;
	background: var(--wp--preset--color--ardoise);
	color: var(--wp--preset--color--craie);
	border-radius: 3px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.35rem;
	align-items: start;
	position: relative;
	isolation: isolate;
}

.lm-epicerie::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--lm-grain-ardoise);
	background-size: 320px 320px;
	opacity: .4;
	mix-blend-mode: overlay;
	border-radius: 3px;
	pointer-events: none;
}

.lm-epicerie__vignette {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 2px;
	object-fit: cover;
	background: var(--wp--preset--color--ardoise-claire);
	flex: none;
}

.lm-epicerie__mention {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--menu);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--craie-effacee);
	margin: 0 0 .35rem;
}

.lm-epicerie__nom {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--chapeau);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 .45rem;
	color: var(--wp--preset--color--craie);
}

.lm-epicerie__note {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.55;
	color: var(--wp--preset--color--craie-effacee);
}

.lm-epicerie__bouton {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--ardoise);
	font-family: var(--wp--preset--font-family--craie);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--petit);
	text-decoration: none;
	padding: .7rem 1.15rem;
	min-height: 44px;
	border-radius: 3px;
	transition: background var(--lm-transition), transform var(--lm-transition);
}

.lm-epicerie__bouton:hover {
	background: var(--wp--preset--color--jaune-vif);
	color: var(--wp--preset--color--ardoise);
	transform: translateY(-1px);
}

.lm-epicerie--vide {
	border: 1px dashed rgba(240, 237, 228, .3);
	background: transparent;
	color: var(--wp--preset--color--craie-effacee);
	grid-template-columns: 1fr;
	text-align: left;
}

.lm-epicerie--vide::before { display: none; }

@media (max-width: 34rem) {
	.lm-epicerie { grid-template-columns: 1fr; }
	.lm-epicerie__vignette { width: 100%; height: 9rem; }
}

/* --------------------------------------------------------------------------
   14. Bas d'article : la suite du menu
   -------------------------------------------------------------------------- */

.lm-suite {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--lm-gouttiere);
}

.lm-suite__titre {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--sous-titre);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 1.75rem;
}

/* --------------------------------------------------------------------------
   15. Archives et listes
   -------------------------------------------------------------------------- */

.lm-tete-archive__interieur {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.25rem) var(--lm-gouttiere) clamp(2rem, 5vw, 3rem);
}

.lm-tete-archive__titre {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--grand-titre);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
	color: var(--wp--preset--color--craie);
}

.lm-tete-archive__intro {
	max-width: 52ch;
	margin: 1.1rem 0 0;
	color: var(--wp--preset--color--craie-effacee);
	font-size: var(--wp--preset--font-size--chapeau);
	line-height: 1.5;
}

.lm-liste-archive {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--lm-gouttiere) clamp(3rem, 7vw, 5rem);
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */

.lm-pied__interieur {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 4.5rem) var(--lm-gouttiere) clamp(2rem, 4vw, 2.75rem);
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
}

.lm-pied__engagement {
	max-width: 42ch;
	margin: 1rem 0 0;
	color: var(--wp--preset--color--craie-effacee);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.6;
}

.lm-pied__colonne h2 {
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--menu);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--craie-effacee);
	margin: 0 0 1rem;
}

.lm-pied__colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.lm-pied__colonne a {
	color: var(--wp--preset--color--craie);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--petit);
}

.lm-pied__colonne a:hover { color: var(--wp--preset--color--jaune-vif); text-decoration: underline; }

.lm-pied__bas {
	max-width: var(--lm-large);
	margin-inline: auto;
	padding: 1.5rem var(--lm-gouttiere) 2.5rem;
	border-top: 1px solid rgba(240, 237, 228, .12);
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--menu);
	color: var(--wp--preset--color--craie-effacee);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	align-items: center;
}

@media (max-width: 46rem) {
	.lm-pied__interieur { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* --------------------------------------------------------------------------
   17. Icônes — dessinées, une seule graisse de trait
   -------------------------------------------------------------------------- */

.lm-icone {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.18em;
}

/* --------------------------------------------------------------------------
   18. Le mouvement — un seul geste : le trait se trace
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.lm-filet--anime path {
		stroke-dasharray: var(--lm-longueur, 1200);
		stroke-dashoffset: var(--lm-longueur, 1200);
		animation: lm-tracer 1100ms cubic-bezier(.16, 1, .3, 1) forwards;
		animation-delay: var(--lm-delai, 180ms);
	}

	@keyframes lm-tracer {
		to { stroke-dashoffset: 0; }
	}
}

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

/* --------------------------------------------------------------------------
   19. Utilitaires
   -------------------------------------------------------------------------- */

.lm-invisible {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.lm-saut {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--ardoise);
	font-family: var(--wp--preset--font-family--craie);
	font-weight: 600;
	padding: .75rem 1.25rem;
	text-decoration: none;
}

.lm-saut:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   20. Recherche
   -------------------------------------------------------------------------- */

.lm-recherche { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 34rem; }

.lm-recherche__etiquette {
	display: block;
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--menu);
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre-douce);
	margin-bottom: .7rem;
}

.lm-recherche__ligne { display: flex; gap: .6rem; }

.lm-recherche__champ {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: .7rem .9rem;
	font-family: var(--wp--preset--font-family--carte);
	font-size: var(--wp--preset--font-size--moyen);
	color: var(--wp--preset--color--encre);
	background: var(--wp--preset--color--lavee-claire);
	border: 1px solid rgba(27, 31, 35, .28);
	border-radius: 3px;
}

.lm-recherche__champ::placeholder { color: var(--wp--preset--color--encre-douce); opacity: 1; }
.lm-recherche__champ:focus { border-color: var(--wp--preset--color--cachet); }

.lm-recherche__bouton {
	flex: none;
	min-height: 48px;
	padding: .7rem 1.3rem;
	font-family: var(--wp--preset--font-family--craie);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--craie);
	background: var(--wp--preset--color--ardoise);
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background var(--lm-transition);
}

.lm-recherche__bouton:hover { background: var(--wp--preset--color--cachet); }

.lm-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 0;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

.lm-pagination a,
.lm-pagination span {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .6rem;
	font-family: var(--wp--preset--font-family--craie);
	font-size: var(--wp--preset--font-size--petit);
	text-decoration: none;
	color: var(--wp--preset--color--encre);
	border: 1px solid rgba(27, 31, 35, .2);
	border-radius: 3px;
}

.lm-pagination a:hover { background: var(--wp--preset--color--jaune-pale); border-color: var(--wp--preset--color--jaune); }
.lm-pagination .current { background: var(--wp--preset--color--ardoise); color: var(--wp--preset--color--craie); border-color: var(--wp--preset--color--ardoise); }