/* Altiplano — feuille principale.
   Clear UI × sport : fond clair aéré, cartes douces 20px, en-tête vitré en pilule,
   couleurs de discipline, grands chiffres en italique, profil d'altitude.
   Thème clair / sombre : light-dark() piloté par color-scheme sur :root. */

@layer reset, tokens, base, layout, components, prose, templates, utilities;

/* ---------- Polices locales ---------- */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree.woff2") format("woff2");
	font-weight: 300 900;
	font-display: swap;
}

@view-transition { navigation: auto; }

/* ---------- Reset ---------- */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	html { -webkit-text-size-adjust: none; text-size-adjust: none; }
	img, svg, video, canvas, picture { display: block; max-width: 100%; }
	img { height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { cursor: pointer; background: none; border: 0; padding: 0; }
	ul[class], ol[class], :where(nav, .toc-card) :where(ul, ol), dl { list-style: none; padding: 0; }
	dd { margin: 0; }
	[hidden] { display: none !important; }
}

/* ---------- Jetons ---------- */
@layer tokens {
	:root {
		color-scheme: light dark;

		--bg:          light-dark(#F4F6F8, #0A0C0F);
		--card:        light-dark(#FFFFFF, #14181D);
		--soft:        light-dark(#EDF0F3, #1B2026);
		--ink:         light-dark(#0B0F14, #F2F4F6);
		--muted:       light-dark(#5E6A75, #8D97A1);
		--line:        light-dark(rgb(11 15 20 / .08), rgb(255 255 255 / .08));
		--accent:      light-dark(#FF4F17, #FF6A3D);
		--accent-soft: light-dark(#FFEAE1, rgb(255 106 61 / .15));
		--glass:       light-dark(rgb(255 255 255 / .72), rgb(20 24 29 / .66));
		--glass-line:  light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .08));
		--shadow:      0 1px 2px light-dark(rgb(11 15 20 / .04), rgb(0 0 0 / .3)),
		               0 8px 24px -12px light-dark(rgb(11 15 20 / .12), rgb(0 0 0 / .5));
		--shadow-hi:   0 2px 4px light-dark(rgb(11 15 20 / .04), rgb(0 0 0 / .3)),
		               0 24px 48px -20px light-dark(rgb(11 15 20 / .22), rgb(0 0 0 / .7));

		/* Disciplines */
		--c-route:    light-dark(#2F6BFF, #6E97FF);
		--c-vtt:      light-dark(#FF4F17, #FF6A3D);
		--c-gravel:   light-dark(#B87F1E, #E0A84A);
		--c-vae:      light-dark(#12A26B, #2FC68A);
		--c-montagne: light-dark(#7A5CFF, #9A82FF);
		--c-securite: light-dark(#E0244A, #FF5675);
		--c-atelier:  light-dark(#0E8F9C, #3CC3CF);

		/* Pistes */
		--verte: var(--c-vae);
		--bleue: var(--c-route);
		--rouge: var(--c-securite);
		--noire: var(--ink);

		--f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
		--f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

		/* Format unique des images du site : 900 × 450. */
		--img-w: 900px;
		--img-ratio: 2 / 1;

		--r-lg: 28px;
		--r: 20px;
		--r-sm: 14px;
		--wrap: 1240px;
		--gutter: clamp(16px, 4vw, 40px);
		--hd-h: 60px;
		--ease: cubic-bezier(.2, .7, .2, 1);
	}

	:root[data-theme="light"] { color-scheme: light; }
	:root[data-theme="dark"]  { color-scheme: dark; }
}

/* ---------- Base ---------- */
@layer base {
	html { scroll-padding-top: 24px; }
	@media (prefers-reduced-motion: no-preference) {
		html { scroll-behavior: smooth; }
	}

	body {
		background: var(--bg);
		color: var(--ink);
		font: 400 1rem/1.6 var(--f-body);
		-webkit-font-smoothing: antialiased;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
	}
	.site-main { flex: 1; }

	a { color: inherit; text-decoration: none; }
	h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; }
	p, li { text-wrap: pretty; }

	:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
	::selection { background: color-mix(in oklch, var(--accent) 28%, transparent); }

	input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		padding: 12px 16px;
		inline-size: 100%;
		&:focus-visible { border-color: var(--accent); outline: 3px solid var(--accent-soft); outline-offset: 0; }
	}
	textarea { field-sizing: content; min-block-size: 6lh; resize: vertical; }
}

/* ---------- Mise en page ---------- */
@layer layout {
	.wrap {
		/* body est en flex colonne : sans largeur explicite, margin auto rétrécirait l'en-tête. */
		inline-size: 100%;
		max-inline-size: var(--wrap);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
		gap: 22px;
		margin-top: 24px;
	}
	@media (min-width: 1000px) {
		.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}

	.sec-h {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: end;
		gap: 8px 16px;
		margin-top: 64px;
		& h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); line-height: 1; }
	}
	.sec-note { color: var(--muted); font-size: 14px; }
	.sec-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-weight: 600;
		font-size: 14px;
		color: var(--muted);
		& svg { inline-size: 14px; block-size: 14px; }
		&:hover { color: var(--ink); }
	}
}

/* ---------- Composants ---------- */
@layer components {
	.d {
		font-family: var(--f-display);
		font-stretch: 112%;
		font-weight: 800;
		letter-spacing: -.025em;
	}
	.num { font-variant-numeric: tabular-nums; }
	.label {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--muted);
	}

	.glass {
		background: var(--glass);
		border: 1px solid var(--glass-line);
		backdrop-filter: blur(16px) saturate(1.5);
		-webkit-backdrop-filter: blur(16px) saturate(1.5);
		box-shadow: var(--shadow);
	}

	.skip {
		position: absolute;
		inset-inline-start: 16px;
		inset-block-start: -100px;
		z-index: 100;
		background: var(--ink);
		color: var(--bg);
		padding: 10px 16px;
		border-radius: 999px;
		&:focus { inset-block-start: 12px; }
	}

	/* --- Boutons --- */
	.rb {
		inline-size: 44px;
		block-size: 44px;
		flex: none;
		display: grid;
		place-items: center;
		border-radius: 50%;
		background: var(--soft);
		transition: background-color .15s;
		&:hover { background: color-mix(in oklch, var(--soft), var(--ink) 8%); }
		& svg { inline-size: 18px; block-size: 18px; }
	}

	.btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		block-size: 52px;
		padding: 0 8px 0 22px;
		border-radius: 999px;
		background: var(--ink);
		color: var(--bg);
		font-weight: 600;
		font-size: 15px;
		& b {
			inline-size: 38px;
			block-size: 38px;
			border-radius: 50%;
			background: var(--accent);
			color: #fff;
			display: grid;
			place-items: center;
			transition: transform .25s var(--ease);
		}
		& svg { inline-size: 16px; block-size: 16px; }
		&:hover b { transform: translateX(3px) rotate(-45deg); }
	}
	/* Bouton sans pastille (formulaires). */
	button.btn, input.btn, .btn--plain { padding-inline: 22px; background: var(--accent); color: #fff; border: 0; }

	.btn-ghost {
		display: inline-flex;
		align-items: center;
		block-size: 52px;
		padding: 0 22px;
		border-radius: 999px;
		font-weight: 600;
		font-size: 15px;
		background: var(--card);
		box-shadow: var(--shadow);
		transition: box-shadow .2s;
		&:hover { box-shadow: var(--shadow-hi); }
	}

	/* --- Pastilles --- */
	.pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
	.pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		block-size: 28px;
		padding: 0 11px;
		border-radius: 999px;
		background: var(--soft);
		font-size: 13px;
		font-weight: 600;
		color: var(--muted);
		white-space: nowrap;
	}
	.pill--cat {
		background: color-mix(in oklch, var(--c, var(--accent)) 13%, transparent);
		color: var(--c, var(--accent));
	}
	a.pill:hover { filter: brightness(.95); }

	.piste i { inline-size: 8px; block-size: 8px; rotate: 45deg; background: var(--piste); }
	.piste--verte { --piste: var(--verte); }
	.piste--bleue { --piste: var(--bleue); }
	.piste--rouge { --piste: var(--rouge); }
	.piste--noire { --piste: var(--noire); }

	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		justify-self: start;
		align-self: start;
		background: var(--card);
		box-shadow: var(--shadow);
		padding: 6px 14px 6px 8px;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 600;
		& i {
			inline-size: 22px;
			block-size: 22px;
			border-radius: 50%;
			background: var(--accent-soft);
			display: grid;
			place-items: center;
			&::after { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
		}
		& span { color: var(--muted); font-weight: 500; }
	}

	/* --- En-tête : pilule vitrée flottante --- */
	/* En-tête dans le flux (non collant) ; z-index pour que les sous-menus passent au-dessus du contenu. */
	.hd {
		position: relative;
		z-index: 30;
		margin-top: calc(env(safe-area-inset-top, 0px) + 12px);
		view-transition-name: site-header;
	}
	.hd-pill {
		display: flex;
		align-items: center;
		gap: 16px;
		block-size: var(--hd-h);
		padding: 0 8px 0 18px;
		border-radius: 999px;
		background: var(--glass);
		border: 1px solid var(--glass-line);
		box-shadow: var(--shadow);
		backdrop-filter: blur(20px) saturate(1.6);
		-webkit-backdrop-filter: blur(20px) saturate(1.6);
	}

	.logo {
		display: flex;
		align-items: center;
		gap: 9px;
		flex: none;
		color: var(--ink);
		& .logo-mark { inline-size: 26px; block-size: 26px; }
		& .custom-logo { max-block-size: 36px; inline-size: auto; }
	}
	.logo-word {
		font: italic 900 22px/1 var(--f-display);
		font-stretch: 118%;
		letter-spacing: -.02em;
	}

	/* Navigation : une seule liste, en ligne sur grand écran, en popover sur mobile. */
	.nav {
		margin-inline: auto;
		& .nav-list { display: flex; gap: 2px; }
		& li { position: relative; }
		& a {
			display: block;
			padding: 8px 14px;
			border-radius: 999px;
			font-size: 14.5px;
			font-weight: 600;
			color: var(--muted);
			transition: background-color .15s, color .15s;
			&:hover { color: var(--ink); background: var(--soft); }
		}
		& :is(.current-menu-item, .current-menu-ancestor, .current-cat) > a { color: var(--ink); background: var(--soft); }

		& .sub-menu {
			position: absolute;
			inset-block-start: calc(100% + 10px);
			inset-inline-start: 0;
			min-inline-size: 220px;
			padding: 6px;
			background: var(--card);
			border-radius: var(--r-sm);
			box-shadow: var(--shadow-hi);
			opacity: 0;
			visibility: hidden;
			translate: 0 6px;
			transition: opacity .15s, translate .15s, visibility 0s .15s;
			&::before { content: ""; position: absolute; inset: -12px 0 auto; block-size: 12px; }
			& a { border-radius: 10px; font-size: 14px; }
		}
		& li:hover > .sub-menu,
		& li:focus-within > .sub-menu {
			opacity: 1;
			visibility: visible;
			translate: 0 0;
			transition-delay: 0s;
		}
		& .menu-item-has-children > a::after {
			content: "";
			display: inline-block;
			inline-size: 6px;
			block-size: 6px;
			margin-inline-start: 7px;
			border: solid currentColor;
			border-width: 0 1.5px 1.5px 0;
			rotate: 45deg;
			translate: 0 -3px;
		}
	}

	@media (min-width: 921px) {
		/* Le popover reste visible en ligne : on neutralise les styles UA. */
		.nav[popover] {
			display: block;
			position: static;
			inset: auto;
			inline-size: auto;
			block-size: auto;
			padding: 0;
			border: 0;
			background: none;
			color: inherit;
			overflow: visible;
		}
	}

	.hd-tools { display: flex; gap: 6px; align-items: center; flex: none; }
	.search-btn {
		display: flex;
		align-items: center;
		gap: 8px;
		block-size: 44px;
		padding: 0 8px 0 14px;
		border-radius: 999px;
		background: var(--soft);
		color: var(--muted);
		font-size: 14px;
		font-weight: 500;
		transition: color .15s;
		&:hover { color: var(--ink); }
		& svg { inline-size: 18px; block-size: 18px; }
		& kbd { font: 600 11px var(--f-body); background: var(--card); border-radius: 6px; padding: 2px 7px; }
	}
	.burger { display: none; }

	@media (max-width: 920px) {
		.hd-tools { margin-inline-start: auto; }
		.burger { display: grid; }
		.search-btn { inline-size: 44px; padding: 0; justify-content: center; }
		.search-btn :is(span, kbd) { display: none; }

		.nav[popover] {
			position: fixed;
			inset: calc(var(--hd-h) + 24px + env(safe-area-inset-top, 0px)) var(--gutter) auto;
			margin: 0;
			inline-size: auto;
			max-block-size: calc(100dvh - var(--hd-h) - 48px);
			overflow: auto;
			padding: 10px;
			background: var(--card);
			color: var(--ink);
			border: 0;
			border-radius: var(--r);
			box-shadow: var(--shadow-hi);
			opacity: 0;
			translate: 0 -8px;
			transition: opacity .2s, translate .2s var(--ease), overlay .2s allow-discrete, display .2s allow-discrete;

			&:popover-open {
				opacity: 1;
				translate: 0 0;
				@starting-style { opacity: 0; translate: 0 -8px; }
			}
			&::backdrop { background: rgb(10 12 15 / .25); backdrop-filter: blur(2px); }

			& .nav-list { flex-direction: column; gap: 2px; }
			& a { font-size: 17px; padding: 12px 14px; color: var(--ink); border-radius: var(--r-sm); }
			& .sub-menu {
				position: static;
				opacity: 1;
				visibility: visible;
				translate: none;
				box-shadow: none;
				padding: 0 0 6px 14px;
				background: none;
				&::before { display: none; }
				& a { font-size: 15px; color: var(--muted); padding-block: 8px; }
			}
			& .menu-item-has-children > a::after { display: none; }
		}
	}

	/* Bascule clair / sombre */
	.theme-toggle .i-sun { display: none; }
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .theme-toggle {
			& .i-sun { display: block; }
			& .i-moon { display: none; }
		}
	}
	:root[data-theme="dark"] .theme-toggle {
		& .i-sun { display: block; }
		& .i-moon { display: none; }
	}

	/* --- Recherche --- */
	.search-dlg {
		margin: 12vh auto auto;
		inline-size: min(640px, calc(100vw - 32px));
		padding: 0;
		border: 0;
		border-radius: var(--r);
		background: var(--card);
		color: var(--ink);
		box-shadow: var(--shadow-hi);
		opacity: 0;
		translate: 0 -8px;
		transition: opacity .18s, translate .18s var(--ease), overlay .18s allow-discrete, display .18s allow-discrete;

		&[open] {
			opacity: 1;
			translate: 0 0;
			@starting-style { opacity: 0; translate: 0 -8px; }
		}
		&::backdrop {
			background: rgb(10 12 15 / .35);
			backdrop-filter: blur(6px);
		}
	}
	.search-dlg-form {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 10px 10px 20px;
		border-bottom: 1px solid var(--line);
		& > svg { color: var(--muted); flex: none; }
		& input {
			flex: 1;
			border: 0;
			background: none;
			font-size: 19px;
			padding: 10px 0;
			&:focus-visible { outline: none; }
		}
	}
	.search-dlg-hint { padding: 12px 20px; color: var(--muted); font-size: 13px; }

	.search-form {
		display: flex;
		gap: 8px;
		max-inline-size: 560px;
		& input { flex: 1; min-inline-size: 0; border-radius: 999px; padding-inline: 20px; }
		& .btn { block-size: auto; }
	}

	/* --- Fil d'Ariane --- */
	.crumbs {
		margin-top: 40px;
		color: var(--muted);
		font-size: 13.5px;
		& ol { display: flex; flex-wrap: wrap; gap: 8px; }
		& li + li::before { content: "/"; margin-inline-end: 8px; opacity: .5; }
		& a:hover { color: var(--ink); }
		& [aria-current] { color: var(--ink); }
	}

	/* --- Rubriques en pastilles (listes) --- */
	.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
	.chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		block-size: 40px;
		padding: 0 16px;
		border-radius: 999px;
		background: var(--card);
		box-shadow: var(--shadow);
		font-size: 14px;
		font-weight: 600;
		transition: box-shadow .2s;
		&:hover { box-shadow: var(--shadow-hi); }
		& i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c, var(--ink)); }
		& small { font-size: 12px; color: var(--muted); font-weight: 500; }
		&[aria-current] {
			background: var(--ink);
			color: var(--bg);
			& small { color: color-mix(in oklch, var(--bg) 70%, transparent); }
		}
	}

	/* --- Tuiles de disciplines --- */
	.disc {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
		gap: 10px;
		margin-top: 28px;
	}
	.dc {
		display: grid;
		gap: 10px;
		padding: 16px;
		border-radius: var(--r);
		background: var(--card);
		box-shadow: var(--shadow);
		transition: translate .2s var(--ease), box-shadow .2s;
		&:hover { translate: 0 -2px; box-shadow: var(--shadow-hi); }
		& i {
			inline-size: 38px;
			block-size: 38px;
			border-radius: 12px;
			display: grid;
			place-items: center;
			background: color-mix(in oklch, var(--c) 14%, transparent);
			color: var(--c);
		}
		& b { font-size: 15px; font-weight: 700; line-height: 1.25; }
		& span { font-size: 13px; color: var(--muted); margin-top: -6px; }
	}

	/* --- Carte d'article --- */
	.card {
		position: relative;
		display: flex;
		flex-direction: column;
		background: var(--card);
		border-radius: var(--r);
		padding: 8px;
		box-shadow: var(--shadow);
		transition: translate .25s var(--ease), box-shadow .25s;
		container: card / inline-size;
		&:hover, &:focus-within { translate: 0 -3px; box-shadow: var(--shadow-hi); }
	}
	.thumb {
		position: relative;
		aspect-ratio: var(--img-ratio);
		max-inline-size: 100%;
		border-radius: var(--r-sm);
		overflow: hidden;
		background: var(--soft);
		& :is(img, canvas) { inline-size: 100%; block-size: 100%; object-fit: cover; }
	}
	.thumb-type {
		position: absolute;
		inset-inline-start: 10px;
		inset-block-start: 10px;
		padding: 5px 11px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 600;
	}
	.card-b {
		display: grid;
		grid-template-rows: auto auto 1fr auto;
		gap: 10px;
		padding: 14px 10px 10px;
		flex: 1;
	}
	.card-title {
		font: 700 1.1875rem/1.3 var(--f-body);
		letter-spacing: -.01em;
	}
	/* Le lien du titre couvre toute la carte. */
	.card-link {
		&::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
		&:focus-visible { outline: none; }
	}
	.card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
	.card .pill--cat { position: relative; z-index: 1; }
	.card-excerpt {
		font-size: 14.5px;
		color: var(--muted);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.card-f {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 6px;
		font-size: 13px;
		color: var(--muted);
	}
	.go {
		inline-size: 36px;
		block-size: 36px;
		border-radius: 50%;
		background: var(--soft);
		color: var(--ink);
		display: grid;
		place-items: center;
		transition: background-color .2s, color .2s, transform .25s var(--ease);
		& svg { inline-size: 15px; block-size: 15px; }
	}
	.card:hover .go { background: var(--accent); color: #fff; transform: rotate(-45deg); }
	@container card (width < 280px) {
		.card-excerpt { display: none; }
		.card-title { font-size: 1.0625rem; }
	}

	/* --- Pagination --- */
	.pager {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: center;
		margin-top: 48px;
		font-size: 14px;
		font-weight: 600;
		& > * {
			min-inline-size: 44px;
			block-size: 44px;
			display: grid;
			place-items: center;
			padding-inline: 14px;
			border-radius: 999px;
			background: var(--card);
			box-shadow: var(--shadow);
		}
		& a:hover { box-shadow: var(--shadow-hi); }
		& .current { background: var(--ink); color: var(--bg); }
		& .dots { background: none; box-shadow: none; }
	}

	/* --- Encadré « Nature » --- */
	.callout {
		display: flex;
		gap: 14px;
		align-items: flex-start;
		background: var(--accent-soft);
		border-radius: var(--r);
		padding: 18px 20px;
		font-size: 15.5px;
		line-height: 1.55;
		& > svg { flex: none; inline-size: 22px; block-size: 22px; color: var(--accent); }
		& p { margin-top: 4px; color: var(--muted); }
	}
}

/* ---------- Contenu éditorial ---------- */
@layer prose {
	@scope (.prose) {
		:scope {
			max-inline-size: 68ch;
			font-size: 1.09375rem;
			line-height: 1.75;
			min-inline-size: 0;
		}
		/* :where() annule la spécificité pour que h2, h3… gardent leurs marges. */
		:where(:scope > * + *) { margin-top: 1.1em; }

		h2 {
			font: 800 clamp(1.5rem, 1.3rem + .8vw, 1.875rem)/1.1 var(--f-display);
			font-stretch: 108%;
			letter-spacing: -.02em;
			margin-top: 2em;
			margin-bottom: -.2em;
		}
		h3 { font: 700 1.25rem/1.3 var(--f-body); margin-top: 1.8em; }
		h4 { font-size: 1rem; margin-top: 1.5em; }

		a:not(.btn, .pill, .wp-block-button__link, .read-also-link) {
			text-decoration: underline;
			text-decoration-color: var(--accent);
			text-decoration-thickness: 2px;
			text-underline-offset: 3px;
			&:hover { color: var(--accent); }
		}

		ul, ol { padding-inline-start: 1.3em; }
		ul { list-style: disc; }
		ol { list-style: decimal; }
		li + li { margin-top: .35em; }
		ul li::marker { color: var(--accent); }
		ol li::marker { font-weight: 700; color: var(--muted); }

		strong { font-weight: 700; }

		blockquote {
			background: var(--card);
			border-radius: var(--r);
			box-shadow: var(--shadow);
			padding: 20px 24px;
			font: italic 600 1.15em/1.5 var(--f-body);
		}

		img { border-radius: var(--r-sm); }
		figure { margin-inline: 0; }
		figcaption, .wp-caption-text { margin-top: 8px; font-size: 13px; color: var(--muted); }
		.alignleft { float: left; margin: .4em 1.5em 1em 0; max-inline-size: 50%; }
		.alignright { float: right; margin: .4em 0 1em 1.5em; max-inline-size: 50%; }
		.aligncenter { margin-inline: auto; }

		table {
			display: block;
			overflow-x: auto;
			border-collapse: collapse;
			inline-size: 100%;
			font-size: 14.5px;
			line-height: 1.45;
			background: var(--card);
			border-radius: var(--r);
			box-shadow: var(--shadow);
			padding: 6px;
			font-variant-numeric: tabular-nums;
		}
		th {
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .03em;
			text-transform: uppercase;
			color: var(--muted);
			text-align: start;
			padding: 12px 14px;
		}
		td { padding: 13px 14px; border-top: 1px solid var(--line); vertical-align: top; }
		tbody tr:first-child td { border-top-color: var(--line); }
		td:first-child { font-weight: 700; }

		code, kbd {
			font: .875em ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
			background: var(--soft);
			padding: .1em .4em;
			border-radius: 6px;
		}
		pre {
			overflow-x: auto;
			background: var(--soft);
			padding: 16px 18px;
			border-radius: var(--r-sm);
			font: 13px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace;
			& code { background: none; padding: 0; }
		}
		hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }

		/* Contenus hérités de l'éditeur de blocs : le CSS des blocs n'est plus chargé. */
		.wp-block-table, .wp-block-image { margin-inline: 0; }
		.wp-block-image img { inline-size: 100%; }
		.wp-block-separator { border: 0; border-top: 1px solid var(--line); }
		.has-text-align-center { text-align: center; }
		.has-text-align-right { text-align: end; }
		.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
		.wp-block-button__link {
			display: inline-flex;
			background: var(--ink);
			color: var(--bg);
			padding: 12px 20px;
			border-radius: 999px;
			font-weight: 600;
		}
		iframe { max-inline-size: 100%; border-radius: var(--r-sm); }
	}

	/* « Lisez aussi » : encadré dans le texte, deux liens vers d'autres articles. */
	.prose .read-also {
		margin-block: 2em;
		padding: 16px 20px 16px 22px;
		border-radius: var(--r-sm);
		background: var(--accent-soft);
		border-inline-start: 4px solid var(--accent);

		& .read-also-label {
			display: flex;
			align-items: center;
			gap: 8px;
			margin: 0 0 6px;
			font-size: 12px;
			font-weight: 800;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--accent);
			& svg { inline-size: 16px; block-size: 16px; flex: none; }
		}
		& ul { list-style: none; padding: 0; margin: 0; }
		& li + li { margin-top: 0; }
		& .read-also-link {
			display: block;
			padding: 4px 0;
			color: var(--ink);
			font-weight: 700;
			font-size: 1.03125rem;
			line-height: 1.4;
			text-decoration: none;
			&:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
		}
	}

	.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
	.page-links { display: flex; gap: 8px; margin-top: 32px; color: var(--muted); }
}

/* ---------- Gabarits ---------- */
@layer templates {
	/* --- Accueil : premier écran --- */
	.hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: clamp(24px, 4vw, 56px);
		align-items: center;
		padding-block: 56px 8px;
		@media (max-width: 880px) { grid-template-columns: 1fr; padding-top: 36px; }
	}
	.hero-txt { display: grid; gap: 22px; min-inline-size: 0; }
	.hero-title {
		font-size: clamp(2.625rem, 1.6rem + 3.6vw, 4.625rem);
		line-height: .98;
		& a:hover { color: var(--accent); }
	}
	.hero-excerpt { font-size: 1.125rem; color: var(--muted); max-inline-size: 46ch; }
	.ctas { display: flex; flex-wrap: wrap; gap: 10px; }

	.stats {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 36px;
		padding-top: 14px;
		border-top: 1px solid var(--line);
	}
	.stat {
		display: flex;
		flex-direction: column-reverse;
		& dd { font: italic 800 2.125rem/1.1 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; }
		& dt { font-size: 13px; color: var(--muted); }
	}

	/* Carte du visuel : image 2:1 entière, chiffres de l'article en dessous. */
	.visual {
		display: grid;
		gap: 8px;
		padding: 8px;
		max-inline-size: var(--img-w);
		inline-size: 100%;
		justify-self: end;
		background: var(--card);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow);
		transition: box-shadow .25s;
		&:hover { box-shadow: var(--shadow-hi); }
		@media (max-width: 880px) { justify-self: stretch; max-inline-size: none; }
	}
	.visual-img {
		position: relative;
		display: block;
		aspect-ratio: var(--img-ratio);
		border-radius: calc(var(--r-lg) - 8px);
		overflow: hidden;
		background: var(--accent-soft);
		& :is(img, canvas) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
	}
	.v-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 8px;
		& > span { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--soft); }
		& b { font: italic 800 1.625rem/1 var(--f-display); font-stretch: 110%; }
		& small { font-size: 12px; color: var(--muted); }
	}
	.v-tag {
		position: absolute;
		inset-block-start: 18px;
		inset-inline-start: 18px;
		padding: 7px 14px;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 600;
	}

	/* --- Bloc Vercors --- */
	.vercors {
		margin-top: 64px;
		display: grid;
		grid-template-columns: .9fr 1.1fr;
		gap: 28px;
		align-items: center;
		background: var(--card);
		border-radius: var(--r-lg);
		padding: clamp(22px, 4vw, 40px);
		box-shadow: var(--shadow);
		@media (max-width: 860px) { grid-template-columns: 1fr; }
	}
	.vercors-txt {
		display: grid;
		gap: 12px;
		& h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.02; }
		& p { color: var(--muted); max-inline-size: 44ch; }
	}
	.note {
		margin-top: 6px;
		display: flex;
		gap: 10px;
		align-items: flex-start;
		padding: 12px 14px;
		border-radius: var(--r-sm);
		background: var(--soft);
		font-size: 14px;
		color: var(--muted);
		& svg { flex: none; color: var(--accent); margin-top: 2px; }
		& strong { color: var(--ink); }
		& a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
	}
	.profile {
		margin: 0;
		min-inline-size: 0;
		& svg { inline-size: 100%; block-size: auto; overflow: visible; }
		& .area { fill: url(#profile-fill); }
		& .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
		& .gl { stroke: var(--line); stroke-width: 1; }
		& text { fill: var(--muted); font: 600 11px var(--f-body); }
		& .pt { fill: var(--card); stroke: var(--accent); stroke-width: 2.5; }
	}
	.p-stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		margin-top: 14px;
		& > span { display: grid; gap: 2px; background: var(--soft); border-radius: var(--r-sm); padding: 12px 14px; }
		& b { font: italic 800 1.5rem/1.1 var(--f-display); font-stretch: 110%; }
		& small { font-size: 12.5px; color: var(--muted); }
		@media (max-width: 480px) { grid-template-columns: 1fr; }
	}

	.about { margin-top: 8px; }
	.about-body { margin-top: 20px; }

	/* --- Listes --- */
	.page-head { margin-top: 18px; display: grid; gap: 12px; }
	.page-title { font-size: clamp(2.375rem, 1.6rem + 3vw, 4.25rem); line-height: 1; }
	.page-desc { color: var(--muted); max-inline-size: 62ch; font-size: 1.0625rem; }
	.empty { margin-top: 40px; display: grid; gap: 20px; color: var(--muted); }

	/* --- Article --- */
	.a-head { margin-top: 18px; display: grid; gap: 18px; max-inline-size: 900px; }
	.a-title { font-size: clamp(2.375rem, 1.6rem + 3vw, 4.25rem); line-height: 1; }
	.lead { font-size: 1.1875rem; line-height: 1.55; color: var(--muted); max-inline-size: 60ch; }
	.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
	.author {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-inline-end: 6px;
		font-weight: 600;
		font-size: 14.5px;
		& i {
			inline-size: 36px;
			block-size: 36px;
			border-radius: 50%;
			background: var(--accent-soft);
			color: var(--accent);
			display: grid;
			place-items: center;
			font-style: normal;
			font-weight: 700;
			font-size: 13px;
		}
	}

	/* Couverture à sa taille native (900 × 450), jamais agrandie. */
	.cover {
		position: relative;
		margin: 30px 0 0;
		aspect-ratio: var(--img-ratio);
		inline-size: 100%;
		max-inline-size: var(--img-w);
		border-radius: var(--r-lg);
		overflow: hidden;
		background: var(--accent-soft);
		& :is(img, canvas) { inline-size: 100%; block-size: 100%; object-fit: cover; }
		& figcaption {
			position: absolute;
			inset-inline-end: 14px;
			inset-block-end: 14px;
			padding: 6px 12px;
			border-radius: 999px;
			font-size: 12px;
		}
	}

	.a-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 56px;
		margin-top: 44px;
		align-items: start;
		&.a-body--solo { grid-template-columns: minmax(0, 1fr); }
		& .callout { margin-bottom: 28px; }
		@media (max-width: 1000px) {
			grid-template-columns: minmax(0, 1fr);
			gap: 28px;
			& .toc { order: -1; position: static; }
			& .toc-tools { display: none; }
		}
	}

	.toc {
		position: sticky;
		top: 24px;
		display: grid;
		gap: 12px;
	}
	.toc-card {
		border-radius: var(--r);
		padding: 18px;
		& ol { display: grid; gap: 2px; }
		& a {
			display: block;
			padding: 8px 12px;
			border-radius: 10px;
			font-size: 14px;
			line-height: 1.4;
			color: var(--muted);
			transition: background-color .15s, color .15s;
			&:hover { color: var(--ink); }
			&[aria-current="true"] { background: var(--soft); color: var(--ink); font-weight: 600; }
		}
	}
	.ring {
		--p: 0;
		display: flex;
		align-items: center;
		gap: 14px;
		padding-bottom: 14px;
		margin-bottom: 8px;
		border-bottom: 1px solid var(--line);
		& svg { inline-size: 52px; block-size: 52px; rotate: -90deg; flex: none; }
		& circle { fill: none; stroke-width: 5; }
		& .ring-bg { stroke: var(--line); }
		& .ring-fg {
			stroke: var(--accent);
			stroke-linecap: round;
			/* pathLength="100" : 100px = tour complet. */
			stroke-dasharray: 100px;
			stroke-dashoffset: calc((1 - var(--p)) * 100px);
			transition: stroke-dashoffset .15s linear;
		}
		& b { display: block; font: italic 800 1.375rem/1 var(--f-display); font-stretch: 110%; }
		& span { font-size: 12.5px; color: var(--muted); }
	}
	.toc-tools { display: flex; align-items: center; gap: 6px; }
	.toc-status { font-size: 13px; color: var(--muted); }

	.post-nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
		gap: 16px;
		margin-top: 64px;
		& a {
			display: grid;
			gap: 6px;
			padding: 20px 22px;
			border-radius: var(--r);
			background: var(--card);
			box-shadow: var(--shadow);
			transition: box-shadow .2s;
			&:hover { box-shadow: var(--shadow-hi); }
		}
		& span { font-size: 13px; color: var(--muted); }
		& b { font-weight: 700; line-height: 1.35; }
		& .post-nav-next { text-align: end; grid-column: -2; }
	}

	/* --- Commentaires --- */
	.comments {
		max-inline-size: 760px;
		& .comment-list { margin-top: 24px; display: grid; gap: 14px; }
		& .children { list-style: none; padding-inline-start: 24px; margin-top: 14px; display: grid; gap: 14px; }
		& .comment-body { display: grid; gap: 8px; background: var(--card); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
		& .comment-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; color: var(--muted); }
		& .comment-author { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
		& .avatar { border-radius: 50%; }
		& .says { display: none; }
		& .reply a { font-size: 13px; font-weight: 600; color: var(--accent); }
		& .comment-respond { margin-top: 36px; display: grid; gap: 16px; }
		& .comment-reply-title { font: 800 1.75rem/1 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; }
		& .comment-form { display: grid; gap: 14px; }
		& .comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
		& .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; & label { margin: 0; } }
		& .comments-closed { color: var(--muted); margin-top: 20px; }
	}

	/* --- 404 --- */
	.lost { display: grid; gap: 20px; padding-block: 64px 8px; max-inline-size: 760px; }
	.lost-title { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1; }

	/* --- Pied de page --- */
	.ft { margin-top: 72px; padding-bottom: 28px; }
	.ft-in {
		display: grid;
		grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
		gap: 28px;
		background: var(--card);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow);
		padding: clamp(22px, 4vw, 40px);
		@media (max-width: 780px) { grid-template-columns: 1fr 1fr; }
		@media (max-width: 460px) { grid-template-columns: 1fr; }
	}
	.ft-about p { margin-top: 12px; color: var(--muted); font-size: 14px; max-inline-size: 34ch; }
	.ft-h { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
	.ft-col ul { display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); }
	.ft-col a:hover { color: var(--ink); }
	.ft-bar {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 8px 24px;
		padding: 16px 8px 0;
		font-size: 13px;
		color: var(--muted);
	}
	.to-top {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		& svg { inline-size: 13px; block-size: 13px; }
		&:hover { color: var(--ink); }
	}
}

/* ---------- Utilitaires ---------- */
@layer utilities {
	.sr-only {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		[style*="--vt"] { view-transition-name: var(--vt); }
		::view-transition-old(root),
		::view-transition-new(root) { animation-duration: .25s; }
	}

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: .01ms !important;
			transition-duration: .01ms !important;
		}
	}

	@media print {
		.hd, .ft, .toc, .related, .post-nav, .comments, .search-dlg { display: none !important; }
		.a-body { display: block; }
		body { background: #fff; color: #000; }
	}
}