/**
 * RunningMag — feuille de style principale.
 *
 * Organisée par sections, elle grandit au fil des étapes du chapitre 15.
 * Étape 3 : jetons, base, en-tête, pied de page.
 *
 * Les couleurs et dimensions viennent de theme.json (variables --wp--preset--*
 * et --wp--custom--*). La couche d'alias ci-dessous leur donne les noms courts
 * utilisés dans les maquettes, avec une valeur de repli si theme.json ne charge
 * pas. Ne pas redéfinir de couleur ailleurs qu'ici.
 */

/* ============================================================
   1. Jetons (alias des variables theme.json)
   ============================================================ */
:root {
	/*
	 * Charte jaune (octobre 2026). Les noms « orange » sont historiques :
	 * --orange = jaune d'action, --orange-dark = son survol.
	 *  - Le jaune ne s'écrit pas sur fond clair : il y sert en aplat (boutons,
	 *    étiquettes, surligné, filets) avec du texte --ink. En lettres, il est
	 *    réservé aux fonds foncés et aux photos.
	 *  - Sur fond clair, liens et surtitres en --teal ; au survol, les liens
	 *    sont surlignés en jaune, les titres soulignés en jaune.
	 *  - --alerte (rouge) seulement pour « annulée » et les erreurs.
	 */
	--orange: var(--wp--preset--color--orange, #ffc300);
	--orange-dark: var(--wp--preset--color--orange-dark, #e6ac00);
	--alerte: var(--wp--preset--color--alerte, #b3261e);
	--ink: var(--wp--preset--color--ink, #131f19);
	--ink-soft: var(--wp--preset--color--ink-soft, #1d2e25);
	--paper: var(--wp--preset--color--paper, #f6f4f3);
	--paper-warm: var(--wp--preset--color--paper-warm, #efebe8);
	--teal: var(--wp--preset--color--teal, #185359);
	--teal-deep: var(--wp--preset--color--teal-deep, #0e3a3f);
	--signal: var(--wp--preset--color--signal, #f5c518);

	--ink-line: var(--wp--custom--line--ink, rgba(19, 31, 25, 0.12));
	--on-dark-line: var(--wp--custom--line--on-dark, rgba(246, 244, 243, 0.14));
	--on-dark-muted: var(--wp--custom--on-dark-muted, rgba(246, 244, 243, 0.62));

	--display: var(--wp--preset--font-family--display, "Bricolage Grotesque", Georgia, serif);
	--body: var(--wp--preset--font-family--body, "Instrument Sans", system-ui, -apple-system, sans-serif);
	--mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, monospace);

	--gutter: var(--wp--custom--gutter, 20px);
	--max: var(--wp--custom--layout-max, 1240px);
	--radius: var(--wp--custom--radius, 14px);
	--radius-lg: var(--wp--custom--radius-lg, 22px);

	--masthead-h: 64px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 28px;
	}
}

/* ============================================================
   2. Base
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--masthead-h) + 16px);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Survol des liens d'action sur fond clair : surligné jaune, texte encre. */
.res-link:hover,
.link-arrow:hover,
.prose a:not(.btn):hover,
.fact dd a:hover,
.orgline a:hover,
.archive-empty a:hover,
.cal-filters__reset:hover,
.cal-pop .cal-pop__lien:hover,
.editions-plus summary:hover > span,
.crumbs--light a:hover {
	color: var(--ink);
	background: var(--orange);
	box-shadow: 0 0 0 3px var(--orange);
	border-radius: 2px;
	text-decoration: none;
}

/* Survol des titres-liens sur fond clair : bleu canard souligné de jaune. */
.semaine-liste a:hover .semaine-nom,
.territoire__head h2 a:hover,
.territoire__list a:hover,
.res-ligne__course a:hover,
.art-row__title a:hover,
.art-byline a:hover,
.sr-course__title a:hover,
.sr-item__title a:hover,
.dept-region__name:hover,
.dept-region__name[aria-current] {
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* Sur fond foncé, le jaune redevient la couleur des liens ; blanc au survol. */
.newspanel-foot .link-arrow {
	color: var(--orange);
}

.newspanel-foot .link-arrow:hover {
	color: #fff;
	background: none;
	box-shadow: none;
}

button {
	font: inherit;
	cursor: pointer;
}

/* Contour de focus : bleu canard sur fond clair, jaune sur les zones foncées. */
:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
	border-radius: 4px;
}

.site-footer :focus-visible,
.hero :focus-visible,
.archive-head :focus-visible {
	outline-color: var(--orange);
}

h1,
h2,
h3,
h4 {
	font-family: var(--display);
	margin: 0;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 800;
}

p {
	margin: 0;
}

.wrap {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.screen-reader-text,
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}

.skip-link:focus {
	left: var(--gutter);
	top: 8px;
	width: auto;
	height: auto;
	padding: 10px 16px;
	background: var(--paper);
	color: var(--ink);
	font-weight: 600;
	border-radius: 8px;
}

/* ============================================================
   3. Boutons
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 20px;
	border-radius: 11px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-orange {
	background: var(--orange);
	color: var(--ink);
}

.btn-orange:hover {
	background: var(--orange-dark);
}

.btn-ghost-light {
	border-color: var(--on-dark-line);
	color: var(--paper);
	background: rgba(246, 244, 243, 0.08);
}

.btn-ghost-light:hover {
	background: rgba(246, 244, 243, 0.16);
}

.btn-ink {
	background: var(--ink);
	color: var(--paper);
}

.btn-outline {
	border-color: var(--ink-line);
	color: var(--ink);
	background: #fff;
}

.btn-outline:hover {
	border-color: var(--ink);
}

.btn-sm {
	padding: 9px 15px;
	font-size: 14px;
	border-radius: 9px;
}

.btn-block {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		transition-duration: 0.001ms;
	}

	.btn:hover {
		transform: none;
	}
}

/* ============================================================
   4. En-tête
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--ink-line);
}

.site-header .wrap {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	min-height: var(--masthead-h);
	padding-block: 18px 10px;
}

.logo {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--display);
	font-weight: 800;
	font-size: 22px;
	color: var(--paper);
	letter-spacing: -0.03em;
}

.logo span {
	color: var(--orange);
}

.logo .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--orange);
	align-self: center;
	margin-left: 5px;
}

/* En-tête clair : logo texte en gris profond, « Mag » en bleu canard (pas de jaune en lettres sur fond clair) */
.site-header .logo {
	color: var(--ink);
}

.site-header .logo span {
	color: var(--teal);
}

/* Navigation principale */
.main-navigation {
	margin-left: auto;
}

.main-navigation .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 26px;
}

.main-navigation a {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	padding: 6px 0;
	position: relative;
}

.main-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
	transform: scaleX(1);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	font-weight: 600;
}

/* Bouton menu — mobile */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border-radius: 9px;
	border: 1px solid var(--ink-line);
	background: #fff;
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
}

.head-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.head-search {
	flex: 1;
}

/* Recherche de l'en-tête : variante claire par défaut, en version compacte */
.head-search .search-form {
	max-width: none;
}

.head-search .search-field {
	height: 38px;
	border-radius: 9px 0 0 9px;
	padding: 0 12px;
	font-size: 14px;
}

.head-search .search-submit {
	height: 38px;
	width: 40px;
	border-radius: 0 9px 9px 0;
}

/* Formulaire de recherche — variante fond sombre, compacte (hero, 404) */
.search-ondark .search-form {
	max-width: none;
}

.search-ondark .search-field {
	flex: 1;
	height: 38px;
	min-width: 0;
	border-color: var(--on-dark-line);
	border-right: 0;
	background: rgba(246, 244, 243, 0.08);
	color: var(--paper);
	border-radius: 9px 0 0 9px;
	padding: 0 12px;
	font-size: 14px;
}

.search-ondark .search-field::placeholder {
	color: var(--on-dark-muted);
}

.search-ondark .search-field:focus {
	outline: none;
	border-color: var(--paper);
	background: rgba(246, 244, 243, 0.14);
}

.search-ondark .search-submit {
	height: 38px;
	width: 40px;
	border-color: var(--on-dark-line);
	background: rgba(246, 244, 243, 0.08);
	color: var(--paper);
	border-radius: 0 9px 9px 0;
}

.search-ondark .search-submit:hover {
	background: var(--orange);
	border-color: var(--orange);
	color: var(--ink);
}

/* En-tête — mobile : la nav se replie sous la barre */
@media (max-width: 999px) {
	.main-navigation .menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		gap: 2px;
		padding: 10px var(--gutter) 16px;
		background: var(--paper);
		border-bottom: 1px solid var(--ink-line);
	}

	.main-navigation.toggled .menu {
		display: flex;
	}

	.main-navigation a {
		padding: 10px 0;
	}

	.main-navigation a::after {
		display: none;
	}
}

/* Sous 768 px : la recherche passe seule sur une deuxième ligne */
@media (max-width: 767px) {
	.head-actions {
		flex-basis: 100%;
		order: 5;
		margin-left: 0;
	}
}

@media (min-width: 768px) {
	.head-search .search-field {
		flex: none;
		width: 190px;
		max-width: 42vw;
	}
}

/* Grand écran : logo, menu et recherche sur une seule ligne. La recherche est
   compacte ; au clic, elle s'élargit vers la gauche, par-dessus le menu, sans
   rien décaler. */
@media (min-width: 1000px) {
	.menu-toggle {
		display: none;
	}

	.site-header .wrap {
		flex-wrap: nowrap;
		gap: 22px;
		padding-block: 12px;
	}

	.main-navigation .menu {
		gap: 22px;
	}

	.main-navigation a {
		white-space: nowrap;
	}

	.head-actions {
		margin-left: 0;
	}

	.head-search {
		position: relative;
		flex: none;
		width: 160px;
		height: 38px;
	}

	.head-search .search-form {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		transition: width 0.18s ease;
	}

	.head-search .search-field {
		flex: 1;
		width: auto;
		min-width: 0;
		max-width: none;
		background: #fff;
	}

	.head-search .search-form:focus-within {
		z-index: 2;
		width: 340px;
		box-shadow: 0 0 0 6px var(--paper);
	}
}

/* Entre 1000 et 1200 px : tout resserré pour que les libellés tiennent sur une ligne. */
@media (min-width: 1000px) and (max-width: 1199px) {
	.site-header .wrap {
		gap: 16px;
	}

	.main-navigation .menu {
		gap: 15px;
	}

	.main-navigation a {
		font-size: 13.5px;
	}

	.head-search {
		width: 104px;
	}
}

@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
	.head-search .search-form {
		transition: none;
	}
}

/* ============================================================
   5. Pied de page
   ============================================================ */
.site-footer {
	background: var(--ink);
	color: var(--on-dark-muted);
	padding-block: 44px 28px;
	font-size: 13.5px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 20px;
}

/* Téléphone : logo sur toute la largeur, colonnes de liens deux par deux. */
.footer-grid > :first-child {
	grid-column: 1 / -1;
}

.site-footer .logo {
	margin-bottom: 12px;
}

.site-footer p {
	margin: 0;
	max-width: 36ch;
}

.site-footer h2 {
	font-family: var(--body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--paper);
	margin-bottom: 12px;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.site-footer a:hover {
	color: var(--orange);
}

/* « Site réalisé par Grand Dehors » : logo blanc, en couleurs au survol. */
.site-footer .footer-credit {
	--gd-lavande: #ede6f2;
	--gd-orange: #d96f32;
	max-width: none;
	margin: 22px 0 0;
	text-align: center;
}

.footer-credit a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--on-dark-muted);
	text-decoration: none;
}

.footer-credit svg {
	display: block;
	width: auto;
	height: 28px;
}

.footer-credit .gd-texte,
.footer-credit .gd-bloc,
.footer-credit .gd-point {
	fill: #fff;
	transition: fill 0.2s ease;
}

/* Les deux « D » sont posés sur le bloc : couleur du fond au repos pour rester lisibles. */
.footer-credit .gd-lettre {
	fill: var(--ink);
	transition: fill 0.2s ease;
}

.footer-credit a:hover .gd-texte,
.footer-credit a:focus-visible .gd-texte,
.footer-credit a:hover .gd-lettre,
.footer-credit a:focus-visible .gd-lettre {
	fill: var(--gd-lavande);
}

.footer-credit a:hover .gd-bloc,
.footer-credit a:focus-visible .gd-bloc,
.footer-credit a:hover .gd-point,
.footer-credit a:focus-visible .gd-point {
	fill: var(--gd-orange);
}

.footer-bottom {
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--on-dark-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1100px) {
	.footer-grid {
		grid-template-columns: 1.3fr repeat(5, 1fr);
	}

	.footer-grid > :first-child {
		grid-column: auto;
	}
}

/* ============================================================
   6. Recherche
   ============================================================ */

/* Formulaire — variante par défaut (fond clair : page de résultats, 404) */
.search-form {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 520px;
}

.search-field {
	flex: 1;
	min-width: 0;
	height: 44px;
	appearance: none;
	border: 1px solid var(--ink-line);
	border-right: 0;
	background: #fff;
	color: var(--ink);
	font: inherit;
	padding: 0 14px;
	border-radius: 11px 0 0 11px;
}

.search-field:focus {
	outline: none;
	border-color: var(--ink);
}

.search-submit {
	flex: none;
	width: 48px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	border-radius: 0 11px 11px 0;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.search-submit:hover {
	background: var(--orange);
	border-color: var(--orange);
	color: var(--ink);
}

/* Page de résultats de recherche */
.site-main {
	max-width: var(--max);
	margin: 0 auto;
	padding: 40px var(--gutter) 64px;
}

.site-main .page-header {
	margin-bottom: 28px;
}

.site-main .page-title {
	font-size: clamp(22px, 4vw, 30px);
}

.site-main .page-title span {
	color: var(--teal);
}

.site-main article {
	padding: 20px 0;
	border-top: 1px solid var(--ink-line);
}

.site-main article:last-of-type {
	border-bottom: 1px solid var(--ink-line);
}

.site-main .entry-title {
	font-size: 19px;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}

.site-main .entry-title a:hover {
	color: var(--teal);
}

.site-main .entry-meta,
.site-main .entry-summary {
	font-size: 14px;
	color: rgba(19, 31, 25, 0.65);
}

.site-main .entry-summary {
	margin-top: 6px;
}

.site-main .entry-footer {
	display: none;
}

.no-results .page-content {
	margin-top: 12px;
	display: grid;
	gap: 16px;
}

/* ============================================================
   7. Publicité (bannières — plugin runningmag-core)
   ============================================================ */
.rm-ad {
	position: relative;
	max-width: 100%;
}

.rm-ad__label {
	position: absolute;
	top: 6px;
	left: 8px;
	z-index: 2;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.42);
	pointer-events: none;
}

.rm-ad__link {
	display: block;
}

/* Bannières suivantes d'un enchaînement, en attente. */
.rm-ad__link[hidden] {
	display: none;
}

.rm-ad__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: var(--rm-ad-w, 100%);
	border-radius: var(--radius);
}

.rm-ad--billboard {
	margin: 8px auto 44px;
	text-align: center;
}

/* Emplacement intercalé dans une liste : billboard dès 768px, rectangle en dessous. */
.rm-ad-liste {
	margin-block: 8px 28px;
}

.rm-ad-liste .rm-ad--billboard,
.rm-ad-liste .rm-ad--colonne_basse {
	max-width: var(--rm-ad-w, 100%);
	margin: 0 auto;
	text-align: center;
}

.rm-ad-liste__large {
	display: none;
}

.rm-ad-liste__mobile .rm-ad__img {
	margin-inline: auto;
}

/* Dans une grille de cartes : toute la rangée. */
.cards > .rm-ad-liste,
.mag-cards > .rm-ad-liste {
	grid-column: 1 / -1;
	margin-block: 4px;
}

@media (min-width: 768px) {
	.rm-ad-liste__large {
		display: block;
	}

	.rm-ad-liste__mobile {
		display: none;
	}
}

/* Fiche course : sous 1000px la colonne passe en bas (la pub est déjà remontée dans le texte) ;
   sous 768px le billboard 970px serait illisible. */
@media (max-width: 999px) {
	.course-rail .rm-ad {
		display: none;
	}
}

@media (max-width: 767px) {
	.course-main > .rm-ad--billboard {
		display: none;
	}
}

/* Page avec colonne latérale : elle prend le relais sur grand écran. */
@media (min-width: 1000px) {
	.rm-ad-liste--colonne {
		display: none;
	}
}

.rm-ad__accroche {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(19, 31, 25, 0.7);
}

/* ============================================================
   8. Fiche course (single-course.php)
   ============================================================ */

/* Sur la fiche, l'en-tête n'est plus collant : c'est la sous-nav qui l'est. */
.single-course .site-header {
	position: static;
}

/* --- Hero --- */
.chero {
	position: relative;
	background: var(--ink);
	color: var(--paper);
}

.chero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.chero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

/* Illustration de repli quand la course n'a pas d'image mise en avant. */
.chero-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.chero-fallback__sky {
	fill: var(--teal-deep);
}

.chero-fallback__sun {
	fill: var(--orange);
	opacity: 0.8;
}

.chero-fallback__hill-1 {
	fill: var(--teal);
}

.chero-fallback__hill-2 {
	fill: var(--ink);
	opacity: 0.85;
}

.chero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(19, 31, 25, 0.95) 6%, rgba(19, 31, 25, 0.58) 46%, rgba(19, 31, 25, 0.34) 100%);
}

.chero .wrap {
	position: relative;
	z-index: 2;
	padding-block: 22px 30px;
}

.chero-grid {
	display: grid;
	gap: 28px;
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	color: var(--on-dark-muted);
	margin-bottom: 22px;
	padding: 0;
	list-style: none;
}

.crumbs li::after {
	content: "\203A";
	margin-left: 6px;
	opacity: 0.5;
}

.crumbs li:last-child::after {
	content: "";
}

.crumbs a:hover {
	color: var(--orange);
}

.crumbs [aria-current] {
	color: var(--paper);
}

.chero h1 {
	font-size: clamp(30px, 7vw, 54px);
	line-height: 1.02;
	margin-bottom: 12px;
}

.devise {
	font-family: var(--display);
	font-size: clamp(16px, 2.6vw, 20px);
	font-weight: 400;
	font-style: italic;
	color: var(--signal);
	margin-bottom: 20px;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 26px;
	padding: 0;
	list-style: none;
}

.tag {
	font-size: 12.5px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 99px;
	background: rgba(246, 244, 243, 0.1);
	border: 1px solid var(--on-dark-line);
	color: var(--paper);
}

.tag.is-disc {
	background: var(--orange);
	border-color: transparent;
	color: var(--ink);
	font-weight: 600;
}

.credit {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(246, 244, 243, 0.45);
	margin-top: 18px;
}

/* --- Carte d'informations clés --- */
.factcard {
	background: #fff;
	color: var(--ink);
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.75);
}

.facts {
	display: grid;
	gap: 16px;
	margin-bottom: 20px;
}

.fact {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.fact-ico {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 9px;
	background: var(--paper-warm);
	display: grid;
	place-items: center;
	color: var(--teal);
}

.fact dt {
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.5);
}

.fact dd {
	margin: 3px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.fact dd a {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fact dd small {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	color: rgba(19, 31, 25, 0.6);
	margin-top: 2px;
}

.factcard .actions {
	display: grid;
	gap: 9px;
	border-top: 1px solid var(--ink-line);
	padding-top: 18px;
}

/* --- Sous-navigation collante --- */
.subnav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--paper);
	border-bottom: 1px solid var(--ink-line);
}

.subnav .wrap {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	height: 56px;
	align-items: center;
}

.subnav .wrap::-webkit-scrollbar {
	display: none;
}

.subnav a {
	flex: none;
	font-size: 13.5px;
	font-weight: 500;
	padding: 8px 13px;
	border-radius: 9px;
	white-space: nowrap;
	color: rgba(19, 31, 25, 0.7);
}

.subnav a:hover {
	background: var(--paper-warm);
	color: var(--ink);
}

/* --- Mise en page --- */
.course-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* une colonne qui ne s'élargit jamais au contenu (onglets, adresses longues) */
	gap: 34px;
	padding-block: 40px 56px;
}

.course-sect {
	scroll-margin-top: 84px;
	margin-bottom: 44px;
}

.course-sect:last-child {
	margin-bottom: 0;
}

.course-sect > h2 {
	font-size: clamp(23px, 4.2vw, 30px);
	margin-bottom: 16px;
}

.lead-note {
	margin: 0 0 20px;
	font-size: 14px;
	color: rgba(19, 31, 25, 0.6);
	max-width: 60ch;
}

.prose {
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(19, 31, 25, 0.82);
}

.prose > * + * {
	margin-top: 12px;
}

.prose strong {
	color: var(--ink);
}

.prose a {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Un bouton placé dans un texte garde son apparence de bouton. */
.prose a.btn {
	text-decoration: none;
}

.prose a.btn-orange,
.prose a.btn-orange:hover {
	color: var(--ink);
}

/* --- Onglets distances --- */
.tablist {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-top: 12px; /* laisse respirer le badge « Top » (top: -8px) */
	padding-bottom: 4px;
	margin-bottom: 20px;
}

.tablist::-webkit-scrollbar {
	display: none;
}

.tab {
	flex: none;
	position: relative;
	display: grid;
	gap: 2px;
	text-align: left;
	padding: 12px 18px;
	border-radius: 12px;
	border: 1px solid var(--ink-line);
	background: #fff;
	color: var(--ink);
	transition: border-color 0.16s ease, background 0.16s ease;
}

.tab .km {
	font-family: var(--display);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.tab .lbl {
	font-size: 12px;
	color: rgba(19, 31, 25, 0.6);
}

.tab:hover {
	border-color: var(--teal);
}

.tab[aria-selected="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.tab[aria-selected="true"] .lbl {
	color: var(--on-dark-muted);
}

.tab .top-badge {
	position: absolute;
	top: -8px;
	right: 8px;
	font-family: var(--mono);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	background: var(--signal);
	color: var(--ink);
	padding: 3px 6px;
	border-radius: 5px;
}

/* --- Cartes d'épreuve --- */
.epreuves {
	display: grid;
	gap: 14px;
}

.epreuve {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 18px;
	display: grid;
	gap: 14px;
}

.epreuve-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
	justify-content: space-between;
}

.epreuve h4 {
	font-size: 18px;
	line-height: 1.15;
}

.epreuve h4 .num {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--teal);
	display: block;
	margin-bottom: 5px;
	letter-spacing: 0.06em;
}

.pop {
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--signal);
	color: var(--ink);
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
}

.specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.spec {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 7px;
	background: var(--paper);
	border: 1px solid var(--ink-line);
	font-variant-numeric: tabular-nums;
}

.spec.is-disc {
	background: rgba(24, 83, 89, 0.1);
	border-color: transparent;
	color: var(--teal);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 10.5px;
}

.spec.is-walk {
	background: rgba(19, 31, 25, 0.07);
	border-color: transparent;
}

.epreuve-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid var(--ink-line);
	padding-top: 14px;
	font-size: 13px;
	color: rgba(19, 31, 25, 0.6);
}

/* --- Infos pratiques / organisateur --- */
.orgbox {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.orgbox dl {
	display: grid;
	gap: 12px;
	margin: 0;
}

.orgline {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 10px;
	align-items: baseline;
	font-size: 14.5px;
}

.orgline dt {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.5);
}

.orgline dd {
	min-width: 0;
	margin: 0;
	font-weight: 500;
	overflow-wrap: anywhere; /* e-mails et adresses de site sans espace */
}

.orgline a {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mapcard--plain {
	border-radius: var(--radius);
	border: 1px solid var(--ink-line);
	background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(19, 31, 25, 0.035) 11px 22px), var(--paper-warm);
	min-height: 120px;
	display: grid;
	place-items: center;
	padding: 20px;
}

.mapcard--map {
	border-radius: var(--radius);
	border: 1px solid var(--ink-line);
	overflow: hidden;
	background: #fff;
}

/* Hauteur réservée : pas de saut de mise en page au chargement des tuiles. */
.mapcard-map {
	height: 240px;
	background: var(--paper-warm);
	z-index: 0;
}

.mapcard-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--ink-line);
}

.mapcard-foot p {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
}

.mapcard-foot .mapcard-note,
.mapcard-inner .mapcard-note {
	flex-basis: 100%;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(19, 31, 25, 0.65);
}

.mapcard-inner {
	display: grid;
	gap: 10px;
	justify-items: center;
	text-align: center;
}

.mapcard-inner p {
	font-weight: 600;
	font-size: 14px;
}

/* --- Résultats (tableau des éditions) --- */
.restable {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.restable caption {
	text-align: left;
	font-size: 13px;
	color: rgba(19, 31, 25, 0.6);
	padding-bottom: 12px;
}

.restable th,
.restable td {
	text-align: left;
	padding: 12px 10px;
	border-bottom: 1px solid var(--ink-line);
	vertical-align: top;
}

.restable thead th {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.55);
	border-bottom-color: rgba(19, 31, 25, 0.25);
}

.restable tbody tr:hover {
	background: rgba(24, 83, 89, 0.04);
}

.restable .yr {
	font-family: var(--mono);
	font-weight: 700;
	font-size: 15px;
	color: var(--ink);
}

.res-cell {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.res-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--teal);
}

/* --- Éditions précédentes --- */
.edition {
	border-top: 1px solid var(--ink-line);
	padding-top: 24px;
	margin-top: 24px;
}

.edition:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* Éditions anciennes repliées derrière « Voir toutes les éditions ». */
.editions-plus {
	border-top: 1px solid var(--ink-line);
	margin-top: 24px;
}

.editions-plus summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--teal);
	cursor: pointer;
	list-style: none;
}

.editions-plus summary::-webkit-details-marker {
	display: none;
}

.editions-plus summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

.editions-plus[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.editions-plus__fermer,
.editions-plus[open] .editions-plus__ouvrir {
	display: none;
}

.editions-plus[open] .editions-plus__fermer {
	display: inline;
}

.editions-plus[open] summary {
	margin-bottom: 24px;
}

.edition-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
}

.edition-head h3 {
	font-size: 22px;
}

.edition-annulee {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--alerte);
	margin-left: 8px;
}

.edition-head .when {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.5);
}

.edition .prose {
	max-width: 70ch;
}

/* Teaser du récit lié à l'édition (chapitre 2.3) */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
}

.link-arrow svg {
	transition: transform 0.18s ease;
}

.edition-recit {
	display: grid;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.edition-recit:hover {
	border-color: var(--teal);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -24px rgba(19, 31, 25, 0.5);
}

.edition-recit__thumb {
	border-radius: 10px;
	overflow: hidden;
	background: var(--paper-warm);
}

.edition-recit__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}

.edition-recit__body {
	display: grid;
	gap: 6px;
	align-content: start;
}

.edition-recit__kicker {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
}

.edition-recit__title {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--ink);
}

.edition-recit__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(19, 31, 25, 0.65);
}

.edition-recit:hover .link-arrow svg {
	transform: translateX(3px);
}

/* Récit affiché en entier (édition la plus récente) */
.edition-recit-full {
	margin-top: 4px;
	display: flow-root; /* contient la petite photo flottante */
}

.edition-recit-full .edition-recit__kicker {
	display: block;
	margin-bottom: 8px;
}

.edition-recit-full__title {
	font-size: clamp(20px, 3vw, 26px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
	max-width: 30ch;
}

.edition-recit-full__media {
	margin: 0 0 20px;
}

.edition-recit-full__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	display: block;
}

/* Petite photo (ancien site) : à sa taille réelle, centrée sur mobile. */
.edition-recit-full__media--petite {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.edition-recit-full__media--petite img {
	width: auto;
	max-width: 100%;
}

/* Photo dans le texte, en alternance droite / gauche quand plusieurs récits se suivent. */
@media (min-width: 700px) {
	.edition-recit-full__media {
		width: 42%;
	}

	.edition-recit-full__media--verticale {
		width: 30%;
	}

	.edition-recit-full__media--petite {
		width: fit-content;
		max-width: 42%;
	}

	.edition-recit-full__media--petite.edition-recit-full__media--verticale {
		max-width: 30%;
	}

	.edition-recit-full__media--droite {
		float: right;
		margin: 4px 0 14px 26px;
	}

	.edition-recit-full__media--gauche {
		float: left;
		margin: 4px 26px 14px 0;
	}
}

/* Texte sur toute la largeur de la photo, justifié dès que la ligne est assez longue. */
@media (min-width: 600px) {
	.edition-recit-full .prose {
		text-align: justify;
		hyphens: auto;
	}
}

.edition-recit-full .prose img {
	border-radius: var(--radius);
	margin-block: 8px;
}

.edition-recit-full__perma {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ink-line);
}

/* Bloc « récit de l'année en cours », remonté en haut de la fiche */
.course-recit-actuel {
	border-left: 3px solid var(--orange);
	padding-left: 20px;
}

.course-recit-actuel .edition-recit-full__title {
	font-size: clamp(22px, 3.4vw, 30px);
	max-width: none;
}

.edition-photos,
.course-recit-actuel__block {
	scroll-margin-top: 84px;
}

.course-recit-actuel__block {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ink-line);
}

.course-recit-actuel__block h3 {
	font-size: 16px;
	margin-bottom: 12px;
}

.recit-liens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

@media (max-width: 559px) {
	.course-recit-actuel {
		padding-left: 14px;
	}
}

@media (min-width: 560px) {
	.edition-recit--media {
		grid-template-columns: 200px 1fr;
		align-items: start;
	}
}

.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-top: 16px;
}

.gallery a {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	background: var(--paper-warm);
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transition: transform 0.3s ease;
}

.gallery a:hover img {
	transform: scale(1.04);
}

.edition-foot {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* --- Colonne latérale --- */
.course-rail {
	display: grid;
	gap: 18px;
	align-content: start;
}

.sidebox {
	background: var(--teal);
	color: var(--paper);
	border-radius: var(--radius);
	padding: 20px;
}

.sidebox h2 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 9px;
}

.sidebox p {
	font-size: 13.5px;
	color: rgba(246, 244, 243, 0.75);
	margin-bottom: 16px;
}

.nearby {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 20px;
}

.nearby h2 {
	font-size: 17px;
	margin-bottom: 14px;
}

.nearby ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.nearby li {
	display: grid;
	gap: 3px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ink-line);
}

.nearby li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.nearby a {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.25;
}

.nearby a:hover {
	color: var(--teal);
}

.nearby .m {
	font-family: var(--mono);
	font-size: 11px;
	color: rgba(19, 31, 25, 0.55);
	letter-spacing: 0.04em;
}

.partner-card {
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius);
	padding: 18px;
	display: grid;
	gap: 12px;
}

.partner-card .tagline {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--orange);
}

.partner-card .tagline::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--orange);
}

.partner-card h2 {
	font-size: 18px;
	color: #fff;
	line-height: 1.15;
}

.partner-card h2 a:hover {
	color: var(--orange);
}

.partner-card .where {
	font-size: 12.5px;
	color: var(--on-dark-muted);
}

@media (min-width: 600px) {
	.facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.factcard .actions {
		grid-template-columns: 1fr 1fr;
	}

	.epreuves {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 768px) {
	.chero .wrap {
		padding-block: 30px 40px;
	}

	.orgbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

@media (min-width: 1000px) {
	.chero-grid {
		grid-template-columns: 1.35fr 0.65fr;
		gap: 44px;
		align-items: end;
	}

	.factcard {
		padding: 24px;
	}

	.facts,
	.factcard .actions {
		grid-template-columns: 1fr;
	}

	.course-layout {
		grid-template-columns: 1fr 300px;
		gap: 48px;
	}

	.epreuves {
		grid-template-columns: 1fr;
	}

	.epreuve {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.epreuve .epreuve-foot {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   9. Accueil (front-page.php)
   ============================================================ */

.eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--teal);
}

.eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.25;
}

/* --- Hero --- */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	padding-block: 44px 56px;
}

.hero-bg {
	position: absolute;
	inset: auto 0 0 0;
	height: 62%;
	width: 100%;
	opacity: 0.5;
	pointer-events: none;
}

.hero-bg__wave {
	fill: var(--teal);
}

.hero .wrap {
	position: relative;
	z-index: 2;
}

.hero-grid {
	display: grid;
	gap: 36px;
}

.hero-eyebrow {
	color: var(--orange);
	margin-bottom: 22px;
}

.hero h1 {
	font-size: clamp(29px, 6.2vw, 50px);
	line-height: 1.03;
	letter-spacing: -0.035em;
	margin-bottom: 20px;
}

.hero h1 em {
	font-style: normal;
	color: var(--orange);
	display: block;
}

.hero .lead {
	font-size: clamp(15.5px, 2.3vw, 18px);
	color: var(--on-dark-muted);
	max-width: 48ch;
	margin: 0 0 28px;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 34px;
}

.hero-search {
	flex: 1;
	min-width: 220px;
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
	border-top: 1px solid var(--on-dark-line);
	padding-top: 22px;
	margin: 0;
}

.hero-stats dt {
	font-family: var(--mono);
	font-size: clamp(20px, 4.5vw, 28px);
	font-weight: 700;
	color: var(--paper);
	letter-spacing: -0.02em;
}

.hero-stats dd {
	margin: 5px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--on-dark-muted);
}

/* --- Panneau « À la une » --- */
.newspanel {
	background: linear-gradient(168deg, var(--teal) 0%, var(--teal-deep) 100%);
	border-radius: var(--radius-lg);
	padding: 22px;
	border: 1px solid rgba(246, 244, 243, 0.1);
	box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.85);
}

.newspanel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.live-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 0;
}

.pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 0 0 0 rgba(255, 195, 0, 0.7);
	animation: rm-pulse 2.4s infinite;
}

@keyframes rm-pulse {
	70% {
		box-shadow: 0 0 0 10px rgba(255, 195, 0, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(255, 195, 0, 0);
	}
}

.newspanel h2 {
	font-size: 19px;
	color: var(--paper);
	letter-spacing: -0.025em;
	line-height: 1.18;
	margin-bottom: 18px;
}

.newslist {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 3px;
}

.newslist a {
	display: grid;
	gap: 5px;
	padding: 12px;
	border-radius: 10px;
	background: rgba(246, 244, 243, 0.06);
	border-left: 2px solid transparent;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.newslist a:hover {
	background: rgba(255, 195, 0, 0.16);
	border-left-color: var(--orange);
}

.newslist .kick {
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
}

.newslist .head {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--paper);
}

/* Titre du récit, sous le nom de la course. */
.newslist .sub {
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(246, 244, 243, 0.68);
}

/* Le dernier article éditorial, séparé des récits. */
.newslist .newslist-article {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid rgba(246, 244, 243, 0.14);
}

.newspanel-empty {
	font-size: 13.5px;
	color: rgba(246, 244, 243, 0.7);
	margin: 0 0 16px;
}

.newspanel-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	border-top: 1px solid rgba(246, 244, 243, 0.14);
	padding-top: 16px;
}

/* --- Filtres région / département --- */
.depts {
	background: var(--paper-warm);
	border-bottom: 1px solid var(--ink-line);
}

.depts .wrap {
	display: grid;
	gap: 12px;
	padding-block: 16px;
}

.dept-region {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
}

.dept-region__name {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
	white-space: nowrap;
}

.dept-region__name:hover {
	color: var(--ink);
}

.dept-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dept {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 99px;
	background: #fff;
	border: 1px solid var(--ink-line);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.16s ease, color 0.16s ease;
}

.dept b {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--teal);
}

.dept:hover {
	border-color: var(--teal);
	color: var(--teal);
}

/* Accueil mobile : liste repliée derrière un bouton (js/depts.js). */
.depts-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--ink-line);
	border-radius: 99px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.depts-toggle svg {
	transition: transform 0.16s ease;
}

.depts-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.depts-liste {
	display: grid;
	gap: 12px;
}

.depts-liste[hidden],
.dept-region[hidden],
.depts-regions[hidden] {
	display: none;
}

/* Ordinateur : choix de la région (une seule liste affichée à la fois). */
.depts-regions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.depts-region-btn {
	padding: 8px 16px;
	border: 1px solid var(--ink-line);
	border-radius: 99px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.16s ease, color 0.16s ease;
}

.depts-region-btn:hover {
	border-color: var(--teal);
	color: var(--teal);
}

.depts-region-btn[aria-pressed="true"] {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}

@media (max-width: 767px) {
	.depts-toggle:not([hidden]) {
		display: inline-flex;
	}
}

/* --- Sections « bande » et derniers résultats --- */
.band {
	padding-block: 52px;
}

.band-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 26px;
}

.band-head .eyebrow {
	margin-bottom: 13px;
	max-width: 340px;
}

.band-head h2 {
	font-size: clamp(26px, 5.2vw, 38px);
	letter-spacing: -0.03em;
}

.band-head .sub {
	margin: 9px 0 0;
	font-size: 14px;
	color: rgba(19, 31, 25, 0.6);
	max-width: 54ch;
}

.band-head .btn {
	flex: none;
	display: none;
}

.results-layout {
	display: grid;
	gap: 28px;
	align-items: start;
}

.rail {
	display: grid;
	gap: 18px;
	align-content: start;
}

/* Sous 1000px la colonne passe sous la liste : la pub est alors intercalée dans la liste. */
@media (max-width: 999px) {
	.rail > .rm-ad,
	.rail__collant > .rm-ad {
		display: none;
	}
}

/* Page Résultats : la colonne est dans le même gabarit que l'accueil ; les blocs mois n'ont plus de marge propre. */
.results-page .wrap {
	max-width: none;
	padding-inline: 0;
}

.results-page__main {
	min-width: 0;
}

/* Calendrier : la colonne démarre à la hauteur du titre du mois. */
.cal-layout .results-page__rail {
	padding-top: 36px;
}

@media (min-width: 1000px) {
	.cal-layout .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Pages Articles : liste + colonne publicitaire. */
.mag-layout__main {
	min-width: 0;
}

@media (min-width: 1000px) {
	.mag-layout .mag-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Même respiration sous les filtres que la barre « Aller au jour », à gauche. */
.results-page__rail {
	padding-top: 28px;
}

/* --- Encart « Les courses du week-end prochain » (colonne) --- */
.semaine {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 20px;
}

.home-resultats {
	min-width: 0;
}

/* Accueil : surtitre seul, sans titre pour lui donner sa largeur et faire apparaître son filet. */
#calendrier .band-head > div {
	flex: 1;
}

#calendrier .band-head .eyebrow {
	margin-bottom: 0;
}

/* Accueil : les courses du week-end sur deux colonnes dès que la place le permet. */
@media (min-width: 768px) {
	#calendrier .semaine-liste {
		column-count: 2;
		column-gap: 28px;
	}

	#calendrier .semaine-liste li {
		break-inside: avoid;
	}
}

/* Accueil : petit format + lien vers les résultats, collants au défilement. */
.rail__collant {
	display: grid;
	gap: 18px;
}

.rail-lien {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 20px;
}

.rail-lien h2 {
	font-size: 19px;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin-bottom: 14px;
}

/* Accueil : la phrase d'introduction des résultats tient sur une ligne. */
#resultats .band-head .sub {
	max-width: none;
}

.semaine h2 {
	font-size: 19px;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin-bottom: 4px;
}

.semaine-periode {
	margin: 0 0 12px;
	font-size: 12.5px;
	color: rgba(19, 31, 25, 0.6);
}

.semaine-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.semaine-liste li + li {
	border-top: 1px solid var(--ink-line);
}

.semaine-liste a {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 2px 10px;
	padding: 9px 0;
	color: inherit;
	text-decoration: none;
}

.semaine-quand {
	grid-row: span 2;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--teal);
	padding-top: 2px;
}

.semaine-nom {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.25;
}

.semaine-liste a:hover .semaine-nom {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.semaine-lieu {
	font-size: 12.5px;
	color: rgba(19, 31, 25, 0.6);
}

.semaine-plus {
	border-top: 1px solid var(--ink-line);
}

.semaine-plus summary {
	padding: 10px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
	cursor: pointer;
}

.semaine-plus[open] summary {
	border-bottom: 1px solid var(--ink-line);
}

.semaine-cal {
	display: inline-flex;
	margin-top: 12px;
}

.orgcard {
	background: var(--teal);
	color: var(--paper);
	border-radius: var(--radius);
	padding: 22px;
}

.orgcard h2 {
	font-size: 19px;
	color: #fff;
	line-height: 1.12;
	margin-bottom: 9px;
	letter-spacing: -0.02em;
}

.orgcard p {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: rgba(246, 244, 243, 0.75);
}

.result-row {
	padding: 24px 0;
	border-top: 1px solid var(--ink-line);
}

.result-row:last-child {
	border-bottom: 1px solid var(--ink-line);
}

/* Accueil : chaque course s'ouvre sur un trait foncé et plus d'espace, bien
   distinct des filets clairs entre récit, résultats et photos. */
.result-row:not(.result-row--compact) {
	padding: 36px 0 32px;
	border-top: 3px solid var(--ink);
}

.result-row:not(.result-row--compact):first-child {
	padding-top: 24px;
}

.result-head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	align-items: center;
}

.result-block {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ink-line);
}

.result-block h4 {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.5);
	margin-bottom: 10px;
}

.result-block .src {
	margin-top: 8px;
}

.result-row .edition-recit-full {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ink-line);
}

.result-row .edition-recit-full__title {
	font-size: clamp(17px, 2vw, 20px);
}

.datechip {
	width: 54px;
	height: 54px;
	flex: none;
	border-radius: 12px;
	background: var(--ink);
	color: var(--paper);
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1;
	margin: 0;
}

/* Jour de la semaine (cartes « course ») : on choisit souvent sa course selon qu'elle tombe un samedi ou un dimanche. */
.datechip:has(.w) {
	height: auto;
	min-height: 54px;
	padding-block: 8px;
}

.datechip .w {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 4px;
}

.datechip .d {
	font-family: var(--mono);
	font-size: 19px;
	font-weight: 700;
}

.datechip .m {
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-dark-muted);
	margin-top: 4px;
}

.result-body {
	min-width: 0;
}

.result-body h3 {
	font-size: clamp(24px, 3.2vw, 32px);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 8px;
}

.result-body h3 a:hover {
	color: var(--teal);
}

.result-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
}

.tag-type {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(24, 83, 89, 0.1);
	color: var(--teal);
}

.meta-item {
	font-size: 12.5px;
	color: rgba(19, 31, 25, 0.62);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.meta-item b {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--teal);
}

.meta-item .dist {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.result-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
}

.src {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.42);
}

@media (min-width: 560px) {
	.band-head .btn {
		display: inline-flex;
	}
}

@media (min-width: 1000px) {
	.hero {
		padding-block: 60px 76px;
	}

	.hero-grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 52px;
		align-items: center;
	}

	.newspanel {
		padding: 26px;
	}
}

/* --- Cartes calendrier --- */
.cards {
	display: grid;
	gap: 14px;
}

.card {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -24px rgba(19, 31, 25, 0.5);
	border-color: rgba(19, 31, 25, 0.2);
}

.card-top {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.card-title {
	font-size: 17.5px;
	letter-spacing: -0.02em;
	line-height: 1.16;
	margin-bottom: 5px;
}

.card-place {
	font-size: 12.5px;
	color: rgba(19, 31, 25, 0.6);
	margin: 0;
}

.card-place b {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--teal);
	font-weight: 700;
}

.card-place em {
	font-style: normal;
	color: rgba(19, 31, 25, 0.45);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
}

.chip {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 5px 9px;
	border-radius: 7px;
	background: var(--paper);
	border: 1px solid var(--ink-line);
	color: var(--ink);
}

.chip.type {
	background: rgba(24, 83, 89, 0.1);
	border-color: transparent;
	color: var(--teal);
}

.card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid var(--ink-line);
	padding-top: 13px;
	font-size: 12.5px;
}

.card-foot .link-arrow {
	margin-left: auto;
	font-size: 13px;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(19, 31, 25, 0.6);
}

.status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #2e8b57;
}

.status--off::before {
	background: rgba(19, 31, 25, 0.3);
}

.partner-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--teal);
	margin: 0;
}

.partner-tag::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--orange);
}

.card.is-partner {
	background: var(--ink);
	color: var(--paper);
	border-color: transparent;
}

.card.is-partner .card-title {
	color: var(--paper);
}

.card.is-partner .card-place,
.card.is-partner .card-place em {
	color: var(--on-dark-muted);
}

.card.is-partner .chip {
	background: rgba(246, 244, 243, 0.1);
	border-color: var(--on-dark-line);
	color: var(--paper);
}

.card.is-partner .chip.type {
	background: rgba(246, 244, 243, 0.16);
	color: var(--paper);
}

.card.is-partner .datechip {
	background: var(--orange);
	color: var(--ink);
}

.card.is-partner .datechip .m {
	color: rgba(19, 31, 25, 0.7);
}

.card.is-partner .card-foot {
	border-color: var(--on-dark-line);
}

.card.is-partner .status {
	color: var(--on-dark-muted);
}

/* --- Mosaïque photos --- */
.photos {
	background: var(--ink);
	color: var(--paper);
	padding-block: 56px;
}

.photos .band-head h2 {
	color: var(--paper);
}

.photos .band-head .eyebrow {
	color: var(--orange);
}

.photos .band-head .sub {
	color: var(--on-dark-muted);
}

/* Dalles : la couleur d'abord ; la photo, s'il y en a une, teintée dans le fond. */
.dalles {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: dense;
}

.dalle {
	--dalle-fond: var(--ink-soft);
	--dalle-texte: var(--paper);
	position: relative;
	overflow: hidden;
	min-height: 150px;
	border-radius: var(--radius);
	background: var(--dalle-fond);
	color: var(--dalle-texte);
}

.dalle--route {
	--dalle-fond: var(--orange);
	--dalle-texte: var(--ink);
}

.dalle--trail {
	--dalle-fond: var(--teal);
}

.dalle--nature {
	--dalle-fond: var(--teal-deep);
}

.dalle--cross {
	--dalle-fond: var(--paper);
	--dalle-texte: var(--ink);
}

.dalle__fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: luminosity;
	opacity: 0.14; /* On la devine à peine : la couleur reste principale. */
}

.dalle__corps {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
}

.dalle h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: inherit;
}

.dalle h3 a {
	color: inherit;
	text-decoration: none;
}

.dalle h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dalle p {
	margin: 4px 0 12px;
	font-size: 12.5px;
	line-height: 1.3;
}

.dalle ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.dalle li a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
}

.dalle li a:hover {
	background: var(--dalle-texte);
	border-color: var(--dalle-texte);
	color: var(--dalle-fond);
}

@media (min-width: 560px) {
	.dalles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dalle--haute {
		grid-row: span 2;
	}
}

@media (min-width: 1000px) {
	.dalles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.photos-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 26px;
	border-top: 1px solid var(--on-dark-line);
	padding-top: 22px;
}

.photos-foot p {
	margin: 0;
	font-size: 13.5px;
	color: var(--on-dark-muted);
}

.photos-foot a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.photos-foot a:hover {
	color: var(--paper);
}

@media (min-width: 768px) {
	.cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.results-layout {
		grid-template-columns: 1fr 300px;
		gap: 40px;
	}

	/* Accueil : la colonne prend toute la hauteur de la liste et le petit format la suit au défilement. */
	.results-layout > .rail--collant {
		align-self: stretch;
	}

	/* Sous l’en-tête collant (85px sur ordinateur, menu et recherche sur une ligne), + barre d’admin si connecté. */
	.rail--collant > .rail__collant {
		position: sticky;
		top: calc(104px + var(--wp-admin--admin-bar--height, 0px));
	}
}

/* --- Magazine --- */
.mag-grid {
	display: grid;
	gap: 22px;
}

.mag-col {
	display: grid;
	gap: 18px;
}

.article {
	display: grid;
	gap: 12px;
}

.article-thumb {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper-warm);
	aspect-ratio: 16 / 10;
}

.article-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article .kicker {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
	margin: 0;
}

.article h3 {
	font-size: 20px;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin-top: 7px;
}

.article h3 a:hover {
	color: var(--teal);
}

.article .chapo {
	margin: 8px 0 0;
	font-size: 14px;
	color: rgba(19, 31, 25, 0.65);
}

.article .byline {
	margin: 10px 0 0;
	font-size: 12px;
	color: rgba(19, 31, 25, 0.5);
}

.article.lead h3 {
	font-size: clamp(23px, 4.4vw, 31px);
}

.article.small {
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: start;
}

/* Sans vignette, le texte occupe toute la largeur. */
.article.small:not(:has(> .article-thumb)) {
	grid-template-columns: 1fr;
}

.article.small .article-thumb {
	aspect-ratio: 1;
	border-radius: 10px;
}

.article.small h3 {
	font-size: 16px;
	margin-top: 5px;
}

.column-card {
	background: var(--teal);
	color: var(--paper);
	border-radius: var(--radius-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.column-card .kicker {
	color: var(--signal);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}

.column-card h3 {
	font-size: 22px;
	color: #fff;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.column-card h3 a:hover {
	color: var(--signal);
}

.column-card p {
	color: rgba(246, 244, 243, 0.75);
	font-size: 14px;
	margin: 0;
}

.column-card .author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(246, 244, 243, 0.16);
}

.avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex: none;
	background: var(--orange);
	display: grid;
	place-content: center;
	font-family: var(--display);
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
}

.column-card .author strong {
	font-size: 14px;
	display: block;
	line-height: 1.3;
}

.column-card .author span:not(.avatar) {
	font-size: 11.5px;
	color: rgba(246, 244, 243, 0.6);
}

@media (min-width: 1000px) {
	.cards {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media (min-width: 1000px) {
	.mag-grid {
		grid-template-columns: 1.5fr 1fr 0.9fr;
		align-items: start;
	}
}

/* ============================================================
   10. Archives de courses (étape 7)
   taxonomy.php (département, région, type) · archive-course.php (/courses/)
   ============================================================ */

/* --- En-tête sombre --- */
.archive-head {
	background: var(--ink);
	color: var(--paper);
	padding-block: 28px 40px;
}

.archive-head h1 {
	font-size: clamp(32px, 6.4vw, 54px);
	letter-spacing: -0.035em;
	margin-bottom: 16px;
}

.archive-head__eyebrow {
	color: var(--orange);
	margin-bottom: 16px;
	max-width: 420px;
}

.archive-head__intro {
	font-size: clamp(15px, 2.1vw, 17px);
	color: var(--on-dark-muted);
	max-width: 62ch;
	margin-bottom: 28px;
}

.archive-head__intro p + p {
	margin-top: 0.8em;
}

.archive-head__stats {
	max-width: 520px;
}

/* --- Filtres : pastille de la page courante --- */
.dept[aria-current] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.dept[aria-current] b {
	color: var(--orange);
}

.dept-region__name[aria-current] {
	color: var(--ink);
}

/* --- Listes --- */
.band--quiet {
	background: var(--paper-warm);
	border-top: 1px solid var(--ink-line);
}

.archive-empty {
	font-size: 15px;
	color: rgba(19, 31, 25, 0.65);
	max-width: 62ch;
}

.archive-empty a {
	color: var(--teal);
	font-weight: 600;
	text-decoration: underline;
}

/* Bannière « natif » glissée dans une grille de cartes. */
.cards > .rm-ad--natif {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 26px 18px 18px;
}

/* --- Annuaire /courses/ --- */
.territoires {
	display: grid;
	gap: 22px;
}

.territoire {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius-lg);
	padding: 22px;
}

.territoire__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--ink-line);
}

.territoire__head h2 {
	font-size: clamp(22px, 3.6vw, 28px);
	letter-spacing: -0.03em;
}

.territoire__head h2 a:hover {
	color: var(--teal);
}

.territoire__count {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--teal);
	white-space: nowrap;
}

.territoire__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.territoire__list a {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: baseline;
	gap: 10px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--ink-line);
	font-size: 15px;
	transition: color 0.16s ease;
}

.territoire__list li:last-child a {
	border-bottom: 0;
}

.territoire__list b {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--teal);
}

.territoire__list em {
	font-style: normal;
	font-family: var(--mono);
	font-size: 12px;
	color: rgba(19, 31, 25, 0.55);
}

.territoire__list a:hover {
	color: var(--teal);
}

.territoire__list a.is-empty span {
	color: rgba(19, 31, 25, 0.5);
}

@media (min-width: 768px) {
	.archive-head {
		padding-block: 34px 52px;
	}

	.territoire__list {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 28px;
	}

	.territoire__list li:nth-last-child(2):nth-child(odd) a {
		border-bottom: 0;
	}
}

@media (min-width: 1000px) {
	.territoires {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}

	.territoire__list {
		grid-template-columns: 1fr;
	}

	.territoire__list li:nth-last-child(2):nth-child(odd) a {
		border-bottom: 1px solid var(--ink-line);
	}
}

/* ============================================================
   11. Calendrier (page-calendrier.php)
   ============================================================ */

/* --- Filtres --- */
.cal-filters-band {
	background: var(--paper-warm);
	border-bottom: 1px solid var(--ink-line);
	padding-block: 18px;
}

.cal-filters {
	display: grid;
	gap: 12px;
	align-items: end;
}

.cal-filters__field {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.cal-filters__field label {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
}

.cal-filters select {
	width: 100%;
	min-height: 44px;
	padding: 10px 38px 10px 14px;
	border: 1px solid var(--ink-line);
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23131f19' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	appearance: none;
}

.cal-filters select:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

.cal-filters__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cal-filters__actions .btn {
	min-height: 44px;
}

.cal-filters__reset {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
	text-decoration: underline;
}

/* --- Mois --- */
.cal-month {
	padding-block: 36px 8px;
}

.cal-month:last-of-type {
	padding-bottom: 52px;
}

.cal-month__title {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: clamp(24px, 4.4vw, 32px);
	letter-spacing: -0.03em;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--ink);
}

.cal-month__title span {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--teal);
}

.cal-orgcard {
	display: grid;
	gap: 4px;
	max-width: 720px;
}

.cal-orgcard .btn {
	justify-self: start;
}

@media (min-width: 768px) {
	.cal-filters {
		grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
		gap: 16px;
	}
}

/* ============================================================
   12. Résultats (page-resultats.php)
   Filtres et titres de mois : classes du calendrier (§11).
   ============================================================ */
/* --- Liens en pastilles (saisons, mois suivants) --- */
.res-jours {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 28px;
}

.res-jours__label {
	font-size: 13px;
	color: rgba(19, 31, 25, 0.6);
	margin-right: 4px;
}

.res-jours__lien {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--ink-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.res-jours__lien span {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--teal);
}

.res-jours__lien:hover {
	background: var(--orange);
	border-color: var(--orange);
}

.res-jours__lien:hover span {
	color: var(--ink);
}

/* Archives département / type : annuaire A → Z des fiches sans date annoncée. */
.annuaire-lettres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.annuaire-lettres a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0 9px;
	border: 1px solid var(--ink-line);
	border-radius: 8px;
	background: #fff;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

.annuaire-lettres a:hover {
	background: var(--orange);
	border-color: var(--orange);
}

.archive-suite {
	margin-top: 20px;
}

.annuaire {
	columns: 1;
	column-gap: 32px;
}

.annuaire__groupe {
	break-inside: avoid-column;
	margin-bottom: 18px;
	scroll-margin-top: 150px; /* En-tête collant. */
}

.annuaire__lettre {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--teal);
	border-bottom: 1px solid var(--ink-line);
	padding-bottom: 4px;
	margin-bottom: 6px;
}

.annuaire ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.annuaire li {
	padding: 3px 0;
	font-size: 14px;
	line-height: 1.35;
}

.annuaire li a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.annuaire li a:hover {
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 3px;
}

.annuaire li span {
	color: rgba(19, 31, 25, 0.6);
	font-size: 12.5px;
}

.annuaire li span::before {
	content: " · ";
}

/* Prochaine date annoncée, dans l'annuaire. */
.annuaire__date {
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(24, 83, 89, 0.1);
	font-family: var(--mono);
	font-size: 11px;
	color: var(--teal);
	white-space: nowrap;
}

/* Pages de zone et pages type : liens vers les pages thématiques (« Trails dans les Pyrénées »). */
.archive-zones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-block: 8px 28px;
}

/* Page de zone : courses suivantes en lignes compactes, par mois. */
.zone-mois {
	margin-top: 30px;
}

.zone-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 1;
	column-gap: 32px;
}

.zone-liste li {
	break-inside: avoid;
	padding: 5px 0;
	border-bottom: 1px solid var(--ink-line);
	font-size: 14px;
	line-height: 1.35;
}

.zone-liste time {
	display: inline-block;
	min-width: 88px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--teal);
}

.zone-liste a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.zone-liste a:hover {
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 3px;
}

.zone-liste span {
	color: rgba(19, 31, 25, 0.6);
	font-size: 12.5px;
}

.zone-liste span::before {
	content: " · ";
}

@media (min-width: 768px) {
	.zone-liste {
		columns: 2;
	}
}

/* Course arrêtée (aucune édition cette année ni après) : en retrait, avec sa dernière année. */
.annuaire li.is-arretee a {
	color: rgba(19, 31, 25, 0.58);
	font-weight: 400;
}

.annuaire li.is-arretee span {
	color: rgba(19, 31, 25, 0.45);
}

.annuaire__fin {
	margin-left: 6px;
	font-family: var(--mono);
	font-size: 11px;
	font-style: normal;
	color: rgba(19, 31, 25, 0.5);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.annuaire {
		columns: 3;
	}
}

/* Calendrier : un bloc par week-end, ou par jour de semaine. */
.cal-bloc {
	margin-bottom: 30px;
	scroll-margin-top: 150px; /* En-tête collant. */
}

.cal-bloc .res-jour__titre {
	margin-bottom: 14px;
}

/* Saisons précédentes, sous la pagination. */
.res-saisons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-bottom: 52px;
}

/* --- Un jour de course --- */
.res-jour {
	margin-bottom: 30px;
	scroll-margin-top: 150px; /* En-tête collant. */
}

.res-jour__titre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--teal);
}

.res-jour__titre span {
	padding: 6px 13px;
	border-radius: 8px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--display);
	font-size: 17px;
	letter-spacing: -0.01em;
}

.res-entetes {
	display: none;
}

/* --- Une course : petite carte sur téléphone, ligne en colonnes au-delà --- */
.res-ligne {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 12px;
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--ink-line);
}

.res-ligne > * {
	margin: 0;
}

.res-ligne__course,
.res-ligne__classements,
.res-ligne__extra {
	grid-column: 1 / -1;
}

.res-ligne__course {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.res-ligne__course a {
	color: var(--ink);
	text-decoration: none;
}

.res-ligne__course .tag-type {
	font-size: 9.5px;
	padding: 3px 7px;
}

.res-ligne__lieu {
	font-size: 13.5px;
}

.res-ligne__lieu span {
	color: rgba(19, 31, 25, 0.6);
}

.res-ligne__dist {
	font-family: var(--mono);
	font-size: 12.5px;
}

.res-ligne__classements {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 4px;
	font-size: 13.5px;
}

.res-ligne__extra {
	display: flex;
	gap: 14px;
	font-size: 13px;
}

.res-ligne__extra:empty {
	display: none;
}

.res-ligne__extra a {
	color: var(--teal);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.res-ligne__extra a:hover {
	color: var(--ink);
	background: var(--orange);
	box-shadow: 0 0 0 3px var(--orange);
	border-radius: 2px;
	text-decoration: none;
}

@media (min-width: 768px) {
	.res-entetes,
	.res-ligne {
		grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr) minmax(0, 0.85fr) minmax(0, 1.6fr) minmax(0, 0.8fr);
		gap: 0 16px;
	}

	.res-entetes {
		display: grid;
		padding: 10px 0 6px;
		font-family: var(--mono);
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgba(19, 31, 25, 0.5);
	}

	.res-entetes--photos,
	.res-ligne--photos {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 2.4fr);
	}

	.res-ligne {
		padding: 11px 0;
	}

	.res-ligne:hover {
		background: rgba(24, 83, 89, 0.04);
	}

	.res-ligne__course,
	.res-ligne__classements,
	.res-ligne__extra {
		grid-column: auto;
	}

	.res-ligne__course {
		font-size: 15.5px;
	}

	.res-ligne__classements {
		margin-top: 0;
	}

	.res-ligne__extra:empty {
		display: block;
	}
}

/* --- Pagination --- */
.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding-block: 8px 52px;
}

.pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ink-line);
	border-radius: 10px;
	background: #fff;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
}

.pager a.page-numbers:hover {
	border-color: var(--teal);
	color: var(--teal);
}

.pager .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.pager .page-numbers.dots {
	border: 0;
	background: none;
	min-width: 0;
	padding: 0 4px;
}

/* ============================================================
   13. Archive des articles (page-archives.php, date.php)
   Titres de mois et pagination : §11 et §12.
   ============================================================ */

/* --- Vignettes par année --- */
.years {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.year-tile {
	display: grid;
	gap: 6px;
	padding: 20px 18px;
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.year-tile:hover {
	transform: translateY(-3px);
	border-color: var(--teal);
	box-shadow: 0 18px 34px -24px rgba(19, 31, 25, 0.5);
}

.year-tile__year {
	font-family: var(--display);
	font-size: clamp(30px, 6vw, 40px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.year-tile__count {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--teal);
}

/* --- Liste d'articles --- */
.art-row {
	padding: 18px 0;
	border-top: 1px solid var(--ink-line);
}

.art-list .art-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.art-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.55);
	margin-bottom: 6px;
}

.art-row__rubrique {
	color: var(--teal);
}

.art-row__title {
	font-size: clamp(18px, 2.6vw, 22px);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: 6px;
}

.art-row__title a:hover {
	color: var(--teal);
}

.art-row__excerpt {
	font-size: 14.5px;
	color: rgba(19, 31, 25, 0.7);
	max-width: 70ch;
}

@media (min-width: 768px) {
	.years {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.years {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ============================================================
   14. Magazine : article (single.php), page Magazine, rubriques
   ============================================================ */

/* --- Colonne de lecture --- */
/* Le conteneur a la largeur du reste du site (même bord gauche que Calendrier,
   Photos…) ; seul le texte est plafonné pour rester lisible. */
.art-narrow > * {
	max-width: 880px;
}

/* Récit de course : texte + colonne de droite (pub, courses du week-end). */
.art-layout {
	display: grid;
	gap: 36px;
	align-items: start;
}

.art-col {
	min-width: 0;
}

.art-col > * {
	max-width: 880px;
}

@media (min-width: 1000px) {
	.art-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 48px;
	}
}

.crumbs--light {
	color: rgba(19, 31, 25, 0.55);
}

.crumbs--light [aria-current] {
	color: var(--ink);
}

/* Après « .crumbs a:hover » (jaune sur fond sombre) : sur fond clair, texte encre sur surligné jaune. */
.crumbs.crumbs--light a:hover {
	color: var(--ink);
}

/* --- En-tête d'article --- */
.art-head {
	padding-block: 28px 30px;
}

.art-kicker {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 14px;
}

.art-kicker a:hover {
	color: var(--teal);
}

.art-title {
	font-size: clamp(30px, 6vw, 48px);
	letter-spacing: -0.035em;
	line-height: 1.06;
	margin-bottom: 18px;
}

.art-chapo {
	font-size: clamp(17px, 2.4vw, 20px);
	line-height: 1.5;
	color: rgba(19, 31, 25, 0.75);
	margin-bottom: 22px;
}

.art-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--ink-line);
}

.art-byline p {
	display: grid;
	gap: 2px;
	font-size: 13px;
	color: rgba(19, 31, 25, 0.6);
}

.art-byline strong {
	font-size: 14.5px;
	color: var(--ink);
}

/* --- Image à la une --- */
.art-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto 32px;
}

/* À côté de la pub (récits) : calée à gauche, sur toute la colonne. */
.art-figure--colonne {
	align-items: flex-start;
	margin: 0 0 28px;
}

/* Toute l'image visible d'un coup : hauteur plafonnée, ratio conservé. */
.art-figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(78vh, 760px);
	border-radius: var(--radius-lg);
}

/* --- Petites photos (ancien site) : entières, sur leur propre fond flouté --- */
.img-petite {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--teal-deep);
}

.img-petite .img-petite__fond {
	position: absolute;
	inset: -30px;
	width: calc(100% + 60px);
	max-width: none;
	height: calc(100% + 60px);
	object-fit: cover;
	filter: blur(22px) brightness(0.6) saturate(1.15);
	border-radius: 0;
}

/* Au plus 1,5 fois la taille réelle : au-delà, la photo devient floue. */
.img-petite .img-petite__photo {
	position: relative;
	inset: auto;
	width: min(100%, calc(var(--img-l) * 1.5));
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* Photo à la une d'un article : dans le texte, à droite (pleine largeur au-dessus du texte sur mobile). */
.art-body .art-figure-flottante {
	margin: 0 0 22px;
}

.art-figure-flottante img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* Petite photo (ancien site) ou verticale : entière, centrée sur mobile. */
.art-body .art-figure-flottante--petite,
.art-body .art-figure-flottante--verticale {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.art-figure-flottante--petite img,
.art-figure-flottante--verticale img {
	width: auto;
	max-width: 100%;
	max-height: 78vh;
}

/* Le texte contient l'image flottante, même s'il est plus court qu'elle. */
.art-body {
	display: flow-root;
}

@media (min-width: 700px) {
	.art-body .art-figure-flottante {
		float: right;
		width: 45%;
		margin: 6px 0 16px 28px;
	}

	.art-body .art-figure-flottante--verticale {
		width: 32%;
	}

	.art-body .art-figure-flottante--petite {
		width: fit-content;
		max-width: 45%;
	}

	.art-figure-flottante--verticale img {
		width: 100%;
		max-height: none;
	}
}

/* --- Photo agrandissable au clic (js/zoom.js) --- */
.zoomable {
	position: relative;
	display: block;
	cursor: zoom-in;
	border-radius: var(--radius);
}

/* Loupe dans le coin : signale que la photo s'agrandit. */
.zoomable::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(19, 31, 25, 0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: background-color 0.15s;
}

.zoomable:hover::after,
.zoomable:focus-visible::after {
	background-color: var(--ink);
}

.zoomable:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
}

.zoom {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-out;
}

.zoom[open] {
	display: grid;
	place-items: center;
}

.zoom::backdrop {
	background: rgba(12, 18, 15, 0.92);
}

.zoom__img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	object-fit: contain;
	border-radius: var(--radius);
	cursor: default;
}

.zoom__fermer {
	position: fixed;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.zoom__fermer:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 2px;
}

html:has(.zoom[open]) {
	overflow: hidden;
}

.art-figure figcaption,
.art-body figcaption {
	margin-top: 8px;
	font-size: 12.5px;
	color: rgba(19, 31, 25, 0.55);
}

/* --- Texte de l'article --- */
.art-body {
	font-size: clamp(16.5px, 2vw, 18px);
	line-height: 1.7;
	color: rgba(19, 31, 25, 0.86);
}

.art-body > * + * {
	margin-top: 1.1em;
}

.art-body h2 {
	font-size: clamp(22px, 3.4vw, 28px);
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin-top: 1.8em;
	color: var(--ink);
}

.art-body h3 {
	font-size: clamp(19px, 2.8vw, 22px);
	letter-spacing: -0.02em;
	margin-top: 1.5em;
	color: var(--ink);
}

.art-body ul,
.art-body ol {
	padding-left: 1.3em;
}

.art-body li + li {
	margin-top: 0.4em;
}

.art-body blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--orange);
	font-family: var(--display);
	font-size: 1.15em;
	line-height: 1.45;
	color: var(--ink);
}

.art-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.art-body figure {
	margin-inline: 0;
}

/* --- Encart « La course » (récits) --- */
.art-course {
	margin-top: 40px;
	padding: 22px;
	border: 1px solid var(--ink-line);
	border-left: 4px solid var(--orange);
	border-radius: var(--radius);
	background: #fff;
	display: grid;
	gap: 10px;
}

.art-course .kicker {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
}

.art-course h2 {
	font-size: clamp(20px, 3vw, 24px);
	letter-spacing: -0.025em;
}

.art-course h2 a:hover {
	color: var(--teal);
}

.art-course__meta {
	font-size: 13.5px;
	color: rgba(19, 31, 25, 0.6);
}

.art-course__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 6px;
}

.art-tags {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.art-tags li {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 7px;
	background: var(--paper-warm);
}

.art-ad {
	margin-block: 40px;
}

.article-main {
	padding-bottom: 8px;
}

/* --- Cartes d'article --- */
.mag-cards {
	display: grid;
	gap: 28px 24px;
}

.mag-card__title {
	font-size: 20px;
	letter-spacing: -0.025em;
	line-height: 1.18;
	margin-top: 7px;
}

.mag-card__title a:hover {
	color: var(--teal);
}

.article-thumb--vide {
	background: linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 100%);
}

.mag-une {
	margin-bottom: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--ink-line);
}

.mag-card--lead .mag-card__title {
	font-size: clamp(26px, 4.6vw, 38px);
	line-height: 1.08;
}

.mag-card--lead .chapo {
	font-size: 15.5px;
}

.mag-cards > .rm-ad--natif {
	background: #fff;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	padding: 26px 18px 18px;
}

@media (min-width: 768px) {
	.art-head {
		padding-block: 36px 40px;
	}

	.mag-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mag-card--lead {
		grid-template-columns: 1.3fr 1fr;
		gap: 32px;
		align-items: center;
	}
}

@media (min-width: 1000px) {
	.mag-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ============================================================
   15. Page auteur (author.php) et pages simples (page.php)
   ============================================================ */
.archive-head__who {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 16px;
}

.archive-head__who h1 {
	margin-bottom: 0;
}

.avatar--lg {
	width: 64px;
	height: 64px;
	font-size: 22px;
}

.art-byline a:hover {
	color: var(--teal);
}

.art-updated {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(19, 31, 25, 0.5);
	padding-top: 16px;
	border-top: 1px solid var(--ink-line);
}

.art--page {
	padding-bottom: 56px;
}

@media (min-width: 768px) {
	.avatar--lg {
		width: 80px;
		height: 80px;
		font-size: 27px;
	}
}

.footer-legal a:hover {
	color: var(--orange);
}

/* ============================================================
   15. Calendrier : bascule Liste / Carte
   ============================================================ */
.cal-vues {
	padding-block: 16px 0;
}

.cal-vues__tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--paper-warm);
	border: 1px solid var(--ink-line);
	border-radius: 999px;
}

.cal-vues__tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: 600 0.9rem/1 var(--body);
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
}

.cal-vues__tab[aria-selected="true"] {
	background: var(--ink);
	color: var(--paper);
}

.cal-vues__tab:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 2px;
}

.cal-carte {
	padding-block: 16px 40px;
}

.cal-carte[hidden],
#cal-liste[hidden] {
	display: none;
}

.cal-carte__map {
	height: min(70vh, 560px);
	min-height: 360px;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	background: var(--paper-warm);
	overflow: hidden;
	z-index: 0;
}

.cal-carte__note {
	margin: 10px 0 0;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/* Repère : goutte orange, pointe vers le bas. */
.cal-pin span {
	display: block;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	background: var(--orange);
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	box-shadow: 0 2px 6px rgba(19, 31, 25, 0.4);
	transform: rotate(-45deg);
}

.cal-pin span::after {
	content: "";
	position: absolute;
	inset: 7px;
	background: #fff;
	border-radius: 50%;
}

.cal-pin:focus-visible span {
	outline: 3px solid var(--ink);
}

.cal-pop {
	font-family: var(--body);
}

.cal-pop p {
	margin: 4px 0 0;
	font-size: 0.85rem;
	line-height: 1.35;
	color: var(--ink-soft);
}

.cal-pop .cal-pop__titre {
	font: 700 1rem/1.25 var(--display);
	color: var(--ink);
	text-decoration: none;
}

.cal-pop .cal-pop__date {
	font-weight: 600;
	color: var(--ink);
}

.cal-pop .cal-pop__lien {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--teal);
}

/* ============================================================
   16. Page Contact
   ============================================================ */
.contact-grid {
	display: grid;
	gap: 32px;
	align-items: start;
}

@media (min-width: 900px) {
	.contact-grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 48px;
	}
}

.contact-form {
	display: grid;
	gap: 18px;
}

.contact-row {
	display: grid;
	gap: 18px;
}

@media (min-width: 640px) {
	.contact-row {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-field {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.contact-field label {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ink-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}

.contact-field textarea {
	min-height: 180px;
	resize: vertical;
}

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

/* Piège à robots : hors écran, invisible pour les humains et les lecteurs d'écran. */
.contact-field--miel {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form .btn {
	justify-self: start;
	cursor: pointer;
}

.contact-legal {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.contact-msg {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: 10px;
	font-weight: 600;
}

.contact-msg--ok {
	background: #e3f2e7;
	color: #14532d;
}

.contact-msg--err {
	background: #fde8e4;
	color: #8a1f0c;
}

.contact-side__who {
	margin: 0 0 14px;
}

.contact-side__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.contact-side__list span {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}

.contact-side__list a {
	font-weight: 600;
	color: inherit;
	word-break: break-word;
}

.contact-side__note {
	margin: 18px 0 0;
	font-size: 0.85rem;
	opacity: 0.85;
}

/* Pied de page : réseaux sociaux. */
.site-footer .footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--on-dark-line);
	border-radius: 50%;
	color: var(--paper);
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.site-footer .footer-social a:hover,
.footer-social a:focus-visible {
	background: var(--orange);
	border-color: var(--orange);
	color: var(--ink);
}

/* ============================================================
   17. Page 404
   ============================================================ */
.err404__grid {
	display: grid;
	gap: 36px;
	align-items: center;
}

@media (min-width: 900px) {
	.err404__grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 64px;
	}
}

.err404__search {
	max-width: 460px;
	margin-top: 26px;
}

.err404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 0;
}

/* Dossard : clin d'œil au numéro d'erreur. */
.err404__bib {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 18px 22px 20px;
	background: #fff;
	color: var(--ink);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transform: rotate(3deg);
	justify-self: center;
}

.err404__bib-top,
.err404__bib-foot {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--teal);
}

.err404__bib-num {
	font-family: var(--display);
	font-size: clamp(72px, 12vw, 120px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ink);
}

/* ============================================================
   18. Page Photos
   ============================================================ */
.gal-merci__box h2 {
	margin-bottom: 14px;
}

.gal-merci__text {
	margin-bottom: 20px;
}

.gal-merci__text p {
	margin: 0 0 12px;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* ============================================================
   19. Résultats de recherche
   ============================================================ */
.sr-wrap {
	max-width: 880px;
}

.sr-form {
	max-width: 460px;
	margin-bottom: 32px;
}

.sr-group {
	margin: 28px 0 14px;
	font-size: 1.15rem;
}

.sr-list {
	display: grid;
	gap: 14px;
}

.sr-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sr-badge--course {
	background: var(--orange);
	color: var(--ink);
}

.sr-badge--article {
	background: var(--teal);
	color: #fff;
}

.sr-badge--page {
	background: var(--paper-warm);
	color: var(--ink);
}

.sr-badge__extra {
	font-weight: 500;
	opacity: 0.85;
}

/* Course : carte marquée d'un liseré orange, vignette contenue à droite. */
.sr-course {
	display: grid;
	gap: 16px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--ink-line);
	border-left: 5px solid var(--orange);
	border-radius: var(--radius);
}

.sr-course.is-partner {
	border-left-color: var(--signal);
}

@media (min-width: 640px) {
	.sr-course {
		grid-template-columns: minmax(0, 1fr) 170px;
		align-items: start;
	}
}

.sr-course__head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.sr-course__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.sr-course__title a {
	color: var(--ink);
	text-decoration: none;
}

.sr-course__title a:hover {
	color: var(--teal);
}

.sr-course__place {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.sr-course .chips {
	margin: 14px 0 0;
}

.sr-course .card-foot {
	margin-top: 16px;
}

.sr-course__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--paper-warm);
}

.sr-course__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 639px) {
	.sr-course__thumb {
		display: none;
	}
}

/* Article / page : ligne sobre. */
.sr-item {
	padding: 16px 4px 18px;
	border-top: 1px solid var(--ink-line);
}

.sr-item .sr-badge {
	margin-bottom: 8px;
}

.sr-item__title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.25;
}

.sr-item__title a {
	color: var(--ink);
	text-decoration: none;
}

.sr-item__title a:hover {
	color: var(--teal);
}

.sr-item__extrait {
	margin: 6px 0 0;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.sr-item__date {
	margin: 6px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--teal);
}

.sr-empty {
	padding: 8px 0 24px;
}

.sr-empty__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sr-band .pager {
	margin-top: 28px;
}

/* ============================================================
   20. Consentement aux cookies
   ============================================================ */
.consent {
	position: fixed;
	inset: auto 0 0;
	z-index: 100;
	padding: 16px 0;
	background: var(--paper);
	border-top: 1px solid var(--ink-line);
	box-shadow: 0 -8px 28px rgba(19, 31, 25, 0.12);
}

.consent[hidden] {
	display: none;
}

.consent__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.consent__text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.consent__text a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.consent__text .consent__title {
	margin-bottom: 4px;
	font-family: var(--display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.consent__actions {
	display: flex;
	gap: 10px;
}

.consent__actions .btn {
	flex: 1;
}

@media (min-width: 768px) {
	.consent__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.consent__actions {
		flex: none;
	}

	.consent__actions .btn {
		flex: none;
		min-width: 130px;
	}
}

.footer-legal .consent-open {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.footer-legal .consent-open:hover {
	color: var(--orange);
}

/* ============================================================
   21. Identité : logo image et photo de fond du hero
   ============================================================ */
/* L'image a des marges vides en haut et en bas : hauteur généreuse pour que le mot soit bien lisible. */
.logo__img {
	display: block;
	width: auto;
	height: 46px;
	max-width: 240px;
	object-fit: contain;
}

@media (min-width: 768px) {
	.logo__img {
		height: 60px;
		max-width: 300px;
	}
}

.hero-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Voile sombre : garde le titre lisible quelle que soit la photo. */
.hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(19, 31, 25, 0.92) 0%, rgba(19, 31, 25, 0.7) 55%, rgba(19, 31, 25, 0.55) 100%);
}

@media (max-width: 767px) {
	.hero-photo::after {
		background: rgba(19, 31, 25, 0.8);
	}
}

/* ============================================================
   22. Magazine papier (/magazine/)
   ============================================================ */
.mag-papier {
	display: grid;
	gap: 32px;
	align-items: start;
}

@media (min-width: 800px) {
	.mag-papier {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
	}
}

.mag-papier__une {
	margin: 0;
	max-width: 460px;
}

.mag-papier__une img,
.mag-papier__pages img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 16px 30px -24px rgba(19, 31, 25, 0.5);
}

.mag-papier__texte h2 {
	margin: 4px 0 18px;
}

.mag-papier__offre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: 28px;
	padding: 18px 22px;
	border-radius: var(--radius);
	background: var(--paper-warm);
}

.mag-papier__offre p {
	margin: 0;
}

.mag-papier__offre strong {
	font-size: 1.6rem;
	color: var(--teal);
}

.mag-papier__pages {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@media (min-width: 800px) {
	.mag-papier__pages {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}

.mag-papier__pages a {
	display: block;
	transition: transform 0.18s ease;
}

.mag-papier__pages a:hover {
	transform: translateY(-3px);
}

.mag-papier__paiement {
	padding-top: 12px;
	border-top: 1px solid var(--ink-line);
	font-size: 0.95rem;
}

/* ============================================================
   Newsletter : bandeau (fiche course) ou encart dans une liste
   (accueil, résultats, calendrier, photos)
   ============================================================ */
.news {
	background: var(--paper-warm);
	padding-block: 52px;
}

.news-inner {
	display: grid;
	gap: 24px;
	align-items: center;
}

.news h2 {
	font-size: clamp(24px, 4.8vw, 34px);
	letter-spacing: -0.03em;
	line-height: 1.06;
}

.news-inner > div > p {
	margin: 12px 0 0;
	font-size: 15px;
	color: rgba(19, 31, 25, 0.65);
	max-width: 44ch;
}

.news-form {
	display: grid;
	gap: 10px;
}

.news-form input[type="email"] {
	width: 100%;
	padding: 15px 16px;
	border-radius: 11px;
	border: 1px solid var(--ink-line);
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
}

.news-form input[type="email"]::placeholder {
	color: rgba(19, 31, 25, 0.45);
}

.news-form .fine {
	margin: 0;
	font-size: 11.5px;
	color: rgba(19, 31, 25, 0.6);
}

.news-form .fine a {
	color: inherit;
	text-decoration: underline;
}

.news-msg {
	margin: 0 0 14px;
	padding: 14px 18px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
}

.news-msg--ok {
	background: #e3f2e7;
	color: #14532d;
}

.news-msg--err {
	background: #fde8e4;
	color: #8a1f0c;
}

@media (min-width: 600px) {
	.news-form {
		grid-template-columns: 1fr auto;
		align-items: stretch;
	}

	.news-form .fine {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	.news {
		padding-block: 64px;
	}

	.news-inner {
		grid-template-columns: 1.1fr 1fr;
		gap: 40px;
	}
}

/* Encart : même habillage, en carte dans la colonne principale. Titre et
   formulaire l'un sous l'autre : la colonne est trop étroite pour deux. */
.news--encart {
	margin-block: 8px 28px;
	padding: 28px 22px;
	border-radius: var(--radius-lg);
	scroll-margin-top: 120px;
}

.news--encart .news-inner {
	grid-template-columns: 1fr;
	gap: 18px;
}

.news--encart h2 {
	font-size: clamp(22px, 3.4vw, 27px);
}

.news--encart .news-inner > div > p {
	max-width: 60ch;
}

.cards > .news--encart {
	grid-column: 1 / -1;
	margin-block: 4px;
}

@media (min-width: 768px) {
	.news--encart {
		padding: 34px 36px;
	}
}