/*
Theme Name: Planète Appro
Theme URI: https://planete-appro.fr/
Author: Planète Appro
Description: Thème éditorial classique pour Planète Appro — cuisine française, cuisine du monde, produits et matériel de cuisine. Sans Gutenberg, sans flux RSS, en-tête propre, HTML compact et DOM minimal. CSS moderne (layers, nesting, oklch, light-dark, container queries, scroll-driven animations, view transitions).
Version: 1.0.0
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.5
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: planete
*/

@layer reset, base, layout, components, prose;

@property --h { syntax: "<number>"; inherits: true; initial-value: 30; }

:root {
	color-scheme: light dark;
	--bg: light-dark(oklch(98.6% .011 85), oklch(17.5% .012 60));
	--bg2: light-dark(oklch(95.6% .019 80), oklch(21.5% .014 60));
	--ink: light-dark(oklch(24% .028 45), oklch(93% .012 80));
	--mute: light-dark(oklch(47% .022 50), oklch(73% .016 70));
	--line: light-dark(oklch(88.5% .022 72), oklch(30% .016 60));
	--brand: light-dark(oklch(57% .165 37), oklch(73% .145 48));
	--serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, serif;
	--sans: system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
	--max: 76rem;
	--gut: max(1rem, (100% - var(--max)) / 2);
	--hd: 4rem;
	--top: var(--wp-admin--admin-bar--height, 0px);
	--r: 1rem;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--spring: linear(0, .36 12%, .82 26%, 1.06 40%, 1.04 52%, .99 70%, 1);
	--i-search: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.6-3.6'/></svg>");
	--i-menu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M4 7h16M4 12h16M4 17h10'/></svg>");
	--i-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>");
}

/* Couleur de rubrique : --h (teinte) est posé inline par le PHP. */
:root, [style*="--h"] {
	--cat: light-dark(oklch(52% .15 var(--h)), oklch(78% .12 var(--h)));
	--cat-soft: color-mix(in oklch, var(--cat) 12%, transparent);
}

@view-transition { navigation: auto; }

@layer reset {
	*, ::before, ::after { box-sizing: border-box; margin: 0; }
	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		interpolate-size: allow-keywords;
		scrollbar-gutter: stable;
		hanging-punctuation: first last;
	}
	img, svg, video, iframe { display: block; max-inline-size: 100%; block-size: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { cursor: pointer; }
	@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
	@media (prefers-reduced-motion: reduce) {
		*, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	}
}

@layer base {
	body {
		display: flex;
		flex-direction: column;
		min-block-size: 100dvh;
		overflow-x: clip;
		background: var(--bg);
		color: var(--ink);
		font: 400 1rem/1.6 var(--sans);
		-webkit-font-smoothing: antialiased;
	}
	h1, h2, h3, h4 {
		font-family: var(--serif);
		font-weight: 600;
		line-height: 1.12;
		letter-spacing: -.012em;
		text-wrap: balance;
	}
	p, li, dd, figcaption { text-wrap: pretty; }
	a {
		color: inherit;
		text-decoration-thickness: 1px;
		text-underline-offset: .2em;
		&:hover { text-decoration-color: var(--brand); }
	}
	:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
	::selection { background: color-mix(in oklch, var(--brand) 28%, transparent); }
	.skip {
		position: absolute;
		inset: .5rem auto auto .5rem;
		z-index: 99;
		padding: .5rem 1rem;
		border-radius: 99px;
		background: var(--ink);
		color: var(--bg);
		translate: 0 -300%;
		&:focus { translate: 0; }
	}
}

@layer layout {
	main { flex: 1; inline-size: min(100% - 2rem, var(--max)); margin-inline: auto; }

	/* En-tête */
	.hd {
		position: sticky;
		inset-block-start: var(--top);
		z-index: 10;
		display: flex;
		align-items: center;
		gap: .25rem;
		block-size: var(--hd);
		padding-inline: var(--gut);
		background: color-mix(in oklch, var(--bg) 84%, transparent);
		backdrop-filter: blur(14px) saturate(1.4);
		border-block-end: 1px solid var(--line);
		view-transition-name: hd;
	}

	/* Pied de page : bloc sombre inversé (color-scheme: dark → les tokens light-dark()
	   basculent tout seuls), halo de planète, nom géant en filigrane via attr(data-name). */
	.ft {
		--ft-bg: oklch(16% .018 50);
		--logo-bg: var(--ft-bg);
		color-scheme: dark;
		position: relative;
		isolation: isolate;
		overflow: clip;
		display: grid;
		gap: 2.5rem 3rem;
		margin-block-start: clamp(4rem, 10vw, 7rem);
		padding: clamp(3rem, 7vw, 5.5rem) var(--gut) 0;
		border-radius: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) 0 0;
		background:
			radial-gradient(42rem 26rem at 92% -10%, color-mix(in oklch, var(--brand) 30%, transparent), transparent 70%),
			radial-gradient(30rem 20rem at -5% 110%, color-mix(in oklch, oklch(70% .12 145) 12%, transparent), transparent 70%),
			var(--ft-bg);
		color: var(--mute);
		font-size: .95rem;
		content-visibility: auto;
		contain-intrinsic-size: auto 34rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		& .ft-b { grid-column: 1 / -1; }
		@media (width >= 48rem) {
			grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
			& .ft-b { grid-column: auto; }
		}

		& nav { display: flex; flex-direction: column; align-items: start; gap: .7rem; }
		& nav::before {
			content: attr(aria-label) / "";
			margin-block-end: .4rem;
			font-size: .7rem;
			font-weight: 700;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--brand);
		}
		& :is(nav, .cp) a {
			color: var(--ink);
			text-decoration: none;
			background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
			transition: background-size .35s var(--ease), color .2s;
			&:hover { background-size: 100% 1px; color: var(--brand); }
		}
		& .cp {
			grid-column: 1 / -1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 1rem;
			padding-block: 1.5rem;
			border-block-start: 1px solid var(--line);
			font-size: .82rem;
			& a::after { content: " ↑"; }
		}
		/* Filigrane : le nom du site, géant, rogné en bas */
		&::after {
			content: attr(data-name) / "";
			grid-column: 1 / -1;
			order: 9;
			margin-block: -.12em -.24em;
			text-align: center;
			white-space: nowrap;
			font: 600 min(13vw, 11.5rem) / 1 var(--serif);
			letter-spacing: -.05em;
			background: linear-gradient(180deg, color-mix(in oklch, var(--brand) 75%, transparent) 10%, transparent 80%);
			background-clip: text;
			color: transparent;
			pointer-events: none;
			user-select: none;
		}
	}
	.ft-b {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: 1.25rem;
		max-inline-size: 22ch;
		font: 500 clamp(1.4rem, 1.1rem + 1vw, 2rem) / 1.2 var(--serif);
		letter-spacing: -.015em;
		color: var(--ink);
		text-wrap: balance;
	}

	/* Sections */
	.sec {
		padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
		& > h2 {
			display: flex;
			align-items: center;
			gap: .7rem;
			margin-block-end: 1.5rem;
			font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
			&::before {
				content: "";
				flex: none;
				inline-size: .7em;
				aspect-ratio: 1;
				border-radius: 50%;
				background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--cat) 40%, white), var(--cat) 70%);
			}
			& a { text-decoration: none; }
			& a::after { content: "→"; display: inline-block; margin-inline-start: .4em; color: var(--cat); transition: translate .3s var(--spring); }
			& a:hover::after { translate: .3em; }
		}
		& > p { max-inline-size: 62ch; margin-block: -.75rem 1.75rem; color: var(--mute); }
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
		gap: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
		&.lead { @media (width >= 64rem) {
			grid-template-columns: 2fr 1fr 1fr;
			& > :first-child { grid-row: span 2; }
		} }
	}
}

@layer components {
	/* Logo */
	.logo {
		display: inline-flex;
		align-items: center;
		gap: .55rem;
		font: 700 1.35rem/1 var(--serif);
		letter-spacing: -.02em;
		text-decoration: none;
		white-space: nowrap;
		& i { font-weight: 500; color: var(--brand); }
		& .mark { flex: none; inline-size: 2.1rem; block-size: auto; color: var(--brand); overflow: visible; transition: rotate .7s var(--spring); }
		&:hover .mark { rotate: -24deg; }
		.ft & { font-size: 1.7rem; & .mark { inline-size: 2.6rem; } }
	}
	.hd > :first-child { margin-inline-end: auto; }
	.custom-logo { max-block-size: 2.5rem; inline-size: auto; }

	/* Boutons-icônes (aucun nœud DOM pour l'icône) */
	.ib {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		aspect-ratio: 1;
		border: 0;
		border-radius: 50%;
		background: none;
		&::before { content: ""; inline-size: 1.3rem; aspect-ratio: 1; background: currentColor; mask: var(--i) center / contain no-repeat; }
		&:hover { background: var(--bg2); }
	}
	.sb { --i: var(--i-search); }
	.mb { --i: var(--i-menu); order: 2; }
	.hd:has(#nav:popover-open) .mb { --i: var(--i-close); }

	/* Navigation : popover natif en mobile, barre en desktop — zéro JS */
	#nav {
		position: fixed;
		inset: calc(var(--top) + var(--hd)) 0 auto;
		inline-size: auto;
		max-block-size: calc(100dvh - var(--hd) - var(--top));
		margin: 0;
		padding: .5rem var(--gut) 1.5rem;
		border: 0;
		border-block-end: 1px solid var(--line);
		background: var(--bg);
		color: var(--ink);
		flex-direction: column;
		opacity: 0;
		translate: 0 -.75rem;
		transition: opacity .25s, translate .3s var(--ease), display .3s allow-discrete, overlay .3s allow-discrete;
		&:popover-open {
			display: flex;
			opacity: 1;
			translate: 0;
			@starting-style { opacity: 0; translate: 0 -.75rem; }
		}
		& a {
			padding: .95rem .25rem;
			border-block-end: 1px solid var(--line);
			font: 600 .85rem var(--sans);
			letter-spacing: .1em;
			text-transform: uppercase;
			text-decoration: none;
			&[aria-current] { color: var(--brand); }
		}
	}
	@media (width >= 66rem) {
		.mb { display: none; }
		#nav {
			position: static;
			display: flex;
			flex-direction: row;
			gap: .15rem;
			max-block-size: none;
			margin-inline-end: .25rem;
			padding: 0;
			border: 0;
			background: none;
			overflow: visible;
			opacity: 1;
			translate: none;
			& a {
				padding: .55rem .8rem;
				border: 0;
				border-radius: 99px;
				font-size: .75rem;
				&:hover { background: var(--bg2); }
				&[aria-current] { background: color-mix(in oklch, var(--brand) 11%, transparent); }
			}
		}
	}

	/* Lecture : barre de progression pilotée par le scroll, sans JS */
	@supports (animation-timeline: scroll()) {
		.single .hd::after {
			content: "";
			position: absolute;
			inset: auto 0 -1px;
			block-size: 3px;
			background: linear-gradient(90deg, var(--brand), oklch(78% .15 75));
			transform-origin: 0 50%;
			animation: read linear both;
			animation-timeline: scroll(root);
		}
	}

	/* Recherche (dialog + Invoker Commands) */
	#q {
		inline-size: min(100% - 2rem, 40rem);
		margin: 14vh auto auto;
		padding: .6rem;
		border: 0;
		border-radius: 1.25rem;
		background: var(--bg);
		color: var(--ink);
		box-shadow: 0 40px 90px -30px oklch(0% 0 0 / .5);
		opacity: 0;
		scale: .96;
		transition: opacity .2s, scale .25s var(--ease), display .25s allow-discrete, overlay .25s allow-discrete;
		&[open] { opacity: 1; scale: 1; @starting-style { opacity: 0; scale: .96; } }
		&::backdrop { background: oklch(20% .02 40 / .4); backdrop-filter: blur(6px); }
	}
	.sf {
		display: flex;
		gap: .5rem;
		& input {
			flex: 1;
			min-inline-size: 0;
			padding: .85rem 1.1rem;
			border: 1px solid var(--line);
			border-radius: .9rem;
			background: var(--bg2);
			font-size: 1.1rem;
			&:focus { outline: 2px solid var(--brand); outline-offset: 0; }
		}
	}
	.btn, .sf button {
		padding: .85rem 1.3rem;
		border: 0;
		border-radius: .9rem;
		background: var(--ink);
		color: var(--bg);
		font-weight: 600;
		text-decoration: none;
		transition: background .2s;
		&:hover { background: var(--brand); }
	}

	/* Accueil */
	.hero {
		--p: clamp(11rem, 28vw, 25rem);
		/* Décalage de la planète, borné pour que l'anneau (+.225p) ne déborde jamais du viewport */
		--pe: max(var(--p) * -.18, (100% - 100vw) / 2 + 1rem + var(--p) * .225);
		position: relative;
		isolation: isolate;
		padding-block: clamp(3rem, 9vw, 7.5rem) clamp(1rem, 3vw, 2rem);
		& h1 {
			max-inline-size: 17ch;
			margin-block: .9rem 1.4rem;
			font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5.6rem);
			line-height: 1;
			letter-spacing: -.035em;
			text-box: trim-both cap alphabetic;
		}
		& > p:not(.k) { max-inline-size: 50ch; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--mute); }
		/* La planète : deux pseudo-éléments, zéro DOM */
		&::before, &::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
		&::before {
			inset-block-start: clamp(1rem, 5vw, 3.5rem);
			inset-inline-end: var(--pe);
			inline-size: var(--p);
			aspect-ratio: 1;
			border-radius: 50%;
			background: radial-gradient(circle at 32% 28%, oklch(92% .08 85), oklch(74% .16 58) 42%, oklch(52% .16 34) 78%, oklch(38% .12 28));
			box-shadow: inset calc(var(--p) * -.08) calc(var(--p) * -.1) calc(var(--p) * .16) oklch(25% .08 30 / .45), 0 calc(var(--p) * .15) calc(var(--p) * .3) -.5rem color-mix(in oklch, var(--brand) 35%, transparent);
			animation: float 9s ease-in-out infinite alternate;
		}
		&::after {
			inset-block-start: calc(clamp(1rem, 5vw, 3.5rem) + var(--p) * .39);
			inset-inline-end: calc(var(--pe) - var(--p) * .225);
			inline-size: calc(var(--p) * 1.45);
			aspect-ratio: 4.2;
			border-radius: 50%;
			border: max(2px, calc(var(--p) * .012)) solid color-mix(in oklch, var(--brand) 55%, var(--bg));
			border-block-start-color: transparent;
			rotate: -18deg;
			animation: float 9s ease-in-out infinite alternate;
		}
		@media (width < 48rem) { &::before, &::after { opacity: .45; } }
	}
	.k {
		font: 700 .75rem var(--sans);
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--brand);
	}
	.pills {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		margin-block-start: 2.2rem;
		& a {
			padding: .6rem 1.05rem;
			border: 1px solid color-mix(in oklch, var(--cat) 28%, transparent);
			border-radius: 99px;
			background: color-mix(in oklch, var(--cat) 9%, var(--bg));
			color: var(--cat);
			font-size: .92rem;
			font-weight: 600;
			text-decoration: none;
			transition: background .2s, color .2s;
			&:hover { background: var(--cat); color: var(--bg); }
		}
	}

	/* Carte article : article > img + small + hN > a + p */
	.card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: .65rem;
		container-type: inline-size;
		& img, &:not(:has(img))::before {
			inline-size: 100%;
			aspect-ratio: 2 / 1;
			object-fit: cover;
			margin-block-end: .35rem;
			border-radius: var(--r);
			background: var(--bg2);
			transition: translate .4s var(--ease), box-shadow .4s var(--ease);
		}
		&:not(:has(img))::before {
			content: "";
			background:
				radial-gradient(circle at 68% 42%, color-mix(in oklch, var(--cat) 65%, var(--bg)) 0 17%, transparent 17.5%),
				radial-gradient(ellipse 46% 9% at 68% 44%, transparent 80%, color-mix(in oklch, var(--cat) 45%, var(--bg)) 82% 90%, transparent 92%),
				linear-gradient(135deg, color-mix(in oklch, var(--cat) 10%, var(--bg)), color-mix(in oklch, var(--cat) 28%, var(--bg)));
		}
		&:hover img, &:hover::before { translate: 0 -4px; box-shadow: 0 18px 30px -18px color-mix(in oklch, var(--cat) 60%, black); }
		& small {
			display: flex;
			flex-wrap: wrap;
			gap: .2rem .7rem;
			align-items: baseline;
			font-size: .8rem;
			color: var(--mute);
		}
		& b { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cat); }
		& :is(h2, h3) { font-size: 1.3rem; line-height: 1.2; }
		& a {
			text-decoration: none;
			&::after { content: ""; position: absolute; inset: 0; z-index: 1; }
			&:focus-visible { outline: 0; }
		}
		&:has(a:focus-visible) { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: var(--r); }
		&:hover :is(h2, h3) a { text-decoration: underline; text-decoration-color: var(--cat); }
		& p {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			font-size: .95rem;
			color: var(--mute);
		}
		@container (width >= 30rem) {
			& :is(h2, h3) { font-size: clamp(1.8rem, 6cqi, 2.7rem); line-height: 1.08; letter-spacing: -.02em; }
			& p { -webkit-line-clamp: 4; font-size: 1.05rem; }
		}
	}
	@supports (corner-shape: squircle) {
		.card img, .card:not(:has(img))::before, .fi { corner-shape: squircle; border-radius: calc(var(--r) * 2.2); }
	}

	/* Archives */
	.ah {
		padding-block: clamp(2.5rem, 7vw, 5rem) 2.5rem;
		& h1 {
			display: flex;
			align-items: center;
			gap: .35em;
			font-size: clamp(2.3rem, 1.3rem + 4vw, 4.4rem);
			letter-spacing: -.03em;
			&::before {
				content: "";
				flex: none;
				inline-size: .55em;
				aspect-ratio: 1;
				border-radius: 50%;
				background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--cat) 40%, white), var(--cat) 70%);
			}
		}
		& p { max-inline-size: 62ch; margin-block-start: 1rem; font-size: 1.1rem; color: var(--mute); }
	}

	/* Article */
	.post {
		display: grid;
		grid-auto-flow: row dense;
		gap: 2rem 4rem;
		padding-block: clamp(1.5rem, 4vw, 3rem) 0;
		& > * { min-inline-size: 0; }
	}
	.ph {
		max-inline-size: 54rem;
		& h1 {
			margin-block: 1rem;
			font-size: clamp(2.1rem, 1.25rem + 3.6vw, 4.1rem);
			line-height: 1.04;
			letter-spacing: -.028em;
		}
		& .m { font-size: .9rem; color: var(--mute); & b { color: var(--ink); } }
	}
	.lede { margin-block-end: 1rem; font: 400 clamp(1.15rem, 1rem + .6vw, 1.4rem)/1.5 var(--serif); color: var(--mute); }
	.bc {
		display: flex;
		flex-wrap: wrap;
		gap: .45rem;
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		& a { color: var(--mute); text-decoration: none; &:hover { color: var(--ink); } }
		& a:last-child { color: var(--cat); }
		& a:not(:last-child)::after { content: "/"; margin-inline-start: .45rem; color: var(--line); }
	}
	/* Image à la une : 900 × 450 natif, jamais agrandie */
	.fi { inline-size: 100%; max-inline-size: 900px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: calc(var(--r) * 1.5); }

	.toc {
		font-size: .92rem;
		& details { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); }
		& summary {
			display: flex;
			justify-content: space-between;
			font-size: .72rem;
			font-weight: 700;
			letter-spacing: .14em;
			text-transform: uppercase;
			list-style: none;
			cursor: pointer;
			&::-webkit-details-marker { display: none; }
			&::after { content: "+"; font-size: 1.1rem; line-height: 1; transition: rotate .3s var(--ease); }
		}
		& [open] summary::after { rotate: 45deg; }
		& details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
		& [open]::details-content { block-size: auto; }
		& ol { display: grid; gap: .1rem; margin-block-start: .8rem; padding: 0; list-style: none; counter-reset: t; scroll-target-group: auto; }
		& li { counter-increment: t; }
		& a {
			display: flex;
			gap: .65rem;
			padding: .4rem .55rem;
			border-radius: .55rem;
			line-height: 1.35;
			color: var(--mute);
			text-decoration: none;
			&::before { content: counter(t, decimal-leading-zero); font: 700 .72rem/1.85 var(--sans); font-variant-numeric: tabular-nums; color: var(--cat); }
		}
		& :is(a:hover, a[aria-current], a:target-current) { background: var(--cat-soft); color: var(--ink); }
	}
	@media (width >= 64rem) {
		.post:has(> .toc) { grid-template-columns: minmax(0, 46rem) 16rem; justify-content: space-between; }
		.ph, .fi { grid-column: 1 / -1; }
		.prose { grid-column: 1; }
		.toc {
			grid-column: 2;
			align-self: start;
			position: sticky;
			inset-block-start: calc(var(--top) + var(--hd) + 1.5rem);
			max-block-size: calc(100dvh - var(--top) - var(--hd) - 3rem);
			overflow: auto;
			overscroll-behavior: contain;
		}
	}

	/* Pagination */
	.pg {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: .4rem;
		margin-block-start: 3.5rem;
		& .page-numbers { min-inline-size: 2.75rem; padding: .6rem .95rem; border: 1px solid var(--line); border-radius: 99px; text-align: center; text-decoration: none; }
		& a:hover { border-color: var(--ink); }
		& .current { background: var(--ink); border-color: var(--ink); color: var(--bg); }
		& .dots { border: 0; }
	}

	/* 404 & vide */
	.e404 {
		display: grid;
		justify-items: center;
		gap: 1.25rem;
		padding-block: clamp(3rem, 10vw, 7rem);
		text-align: center;
		& h1 {
			font-size: clamp(6rem, 22vw, 13rem);
			line-height: .85;
			background: linear-gradient(140deg, oklch(78% .15 75), var(--brand) 55%, oklch(45% .14 25));
			background-clip: text;
			color: transparent;
		}
		& .sf { inline-size: min(100%, 32rem); }
		& .pills { justify-content: center; margin-block-start: 1rem; }
	}
}

@layer prose {
	.prose {
		font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
		line-height: 1.75;
		counter-reset: h2;
		& > * + * { margin-block-start: 1.2em; }
		& :is(h2, h3, h4) { scroll-margin-block-start: calc(var(--top) + var(--hd) + 1.5rem); }
		& h2 { margin-block-start: 2.3em; font-size: 1.8em; counter-increment: h2; }
		& h3 { margin-block-start: 1.9em; font-size: 1.32em; }
		& h4 { margin-block-start: 1.6em; font-size: 1.1em; }
		& :is(h2, h3, h4) + * { margin-block-start: .65em; }
		& a { color: var(--cat); text-decoration-color: color-mix(in oklch, var(--cat) 40%, transparent); &:hover { text-decoration-color: currentColor; } }
		& :is(ul, ol) { padding-inline-start: 1.3em; }
		& li + li { margin-block-start: .4em; }
		& li::marker { color: var(--cat); font-weight: 700; }
		& strong { font-weight: 650; }
		& blockquote {
			padding: .2em 0 .2em 1.3em;
			border-inline-start: 3px solid var(--cat);
			font: italic 1.12em/1.6 var(--serif);
		}
		& img { block-size: auto; border-radius: var(--r); }
		& :is(figcaption, .wp-caption-text) { margin-block-start: .6em; font-size: .85em; text-align: center; color: var(--mute); }
		& table { inline-size: 100%; border-collapse: collapse; font-size: .88em; line-height: 1.5; }
		& > table { display: block; overflow-x: auto; }
		& figure:has(> table) { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
		& :is(th, td) { padding: .75em 1em; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
		& :is(thead th, tr:first-child > th) { background: var(--cat-soft); font-weight: 650; white-space: nowrap; }
		& tr:last-child > td { border-block-end: 0; }
		& hr { block-size: 1px; margin-block: 2.5em; border: 0; background: var(--line); }
		& code { padding: .1em .35em; border-radius: .35em; background: var(--bg2); font: .88em var(--mono); }
		& pre { padding: 1em 1.2em; overflow-x: auto; border-radius: var(--r); background: var(--bg2); font: .85em/1.6 var(--mono); & code { padding: 0; background: none; } }
		& mark { background: color-mix(in oklch, var(--brand) 22%, transparent); color: inherit; }
		& details { padding-block: .8em; border-block-end: 1px solid var(--line); }
		& summary { font-weight: 650; cursor: pointer; }
		& .aligncenter { margin-inline: auto; }
		& .alignleft { float: inline-start; max-inline-size: 50%; margin: .3em 1.5em 1em 0; }
		& .alignright { float: inline-end; max-inline-size: 50%; margin: .3em 0 1em 1.5em; }
		& .has-text-align-center { text-align: center; }
		& .wp-block-columns { display: flex; flex-wrap: wrap; gap: 2em; }
		& .wp-block-column { flex: 1 1 14rem; }
		& .wp-block-embed iframe { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; border-radius: var(--r); }
		& .wp-block-button__link { display: inline-block; padding: .75em 1.3em; border-radius: .9rem; background: var(--ink); color: var(--bg); text-decoration: none; }
	}
	/* Numérotation éditoriale des H2, synchronisée avec le sommaire */
	.toc ~ .prose h2::before {
		content: counter(h2, decimal-leading-zero) / "";
		display: block;
		margin-block-end: .55em;
		font: 700 .42em/1 var(--sans);
		letter-spacing: .14em;
		color: var(--cat);
	}
	@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
		.toc ~ .prose > p:first-of-type::first-letter {
			-webkit-initial-letter: 3;
			initial-letter: 3;
			margin-inline-end: .6rem;
			font-family: var(--serif);
			font-weight: 600;
			color: var(--cat);
		}
	}
	.intro { max-inline-size: 46rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
}

/* Animations — hors layers */
@keyframes read { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes float { to { translate: 0 -.9rem; } }
@keyframes rise { from { opacity: 0; translate: 0 1.75rem; } }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.grid > .card { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
		.ft::after { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
	}
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@media print {
	.hd, .ft, .toc, .sec.rel, dialog, .skip { display: none !important; }
	body { background: #fff; color: #000; }
}