/*
Theme Name: Loukian.run
Theme URI: https://loukian.run
Description: Récits de courses, en train. Thème enfant de Twenty Twenty-Five : une couleur par course, dossards avec trace GPX, cartouche de notes, profil de dénivelé, sommaire flottant.
Author: Loukian
Template: twentytwentyfive
Version: 3.6.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loukian-run
*/

/*
 * Sommaire du fichier (chercher « N. » pour sauter à une section) :
 *   1. Variables            couleurs, polices, espacements ; --lr-race* = couleur de la course
 *   2. Bases                typographie générale, liens, boutons
 *   3. En-tête              barre de navigation (normale / par-dessus la photo)
 *   4. Accueil              bandeau « DES COURSES. EN TRAIN. »
 *   5. En-tête de page      photo sous voile, pastilles, titre (loukian/hero)
 *   6. Trace GPX            tracé SVG et son animation
 *   7. Cartouche            caractéristiques, objectif, chrono (loukian/race-card)
 *   8. Lecture              colonne de texte + sommaire flottant, images sur le côté
 *   9. Profil de dénivelé   (loukian/elevation, aussi utilisé dans Parcours)
 *  10. Sections et cartes   listes d'articles, dossards, astuces, actus
 *  11. Pied de page
 *  12. Éditeur              aperçus des blocs dynamiques dans Gutenberg
 *  13. Frise, notes, verdict, météo, à la une, éditions
 *  14. Parcours             carte stylisée + profil synchronisé (loukian/parcours)
 *  15. Les conseils         (loukian/conseils)
 *  16. Splits & FC          (loukian/splits)
 *  17. Bornes [km]          dans le texte
 *
 * Ce fichier est aussi chargé dans l'éditeur (add_editor_style) : l'aperçu y est fidèle.
 * Couleur de la course : ne jamais écrire une couleur de course en dur, utiliser
 * var(--lr-race) (fond), var(--lr-race-on) (texte sur ce fond), var(--lr-race-ink)
 * (texte coloré sur fond clair). Elles sont fournies par lr_race_style() (inc/helpers.php).
 */

/* =========================================================================
   1. Variables
   Les couleurs viennent de theme.json (Apparence → Éditeur → Styles).
   Les valeurs de repli protègent le design si une autre palette est choisie.
   ========================================================================= */

:root {
	--lr-noir: var(--wp--preset--color--noir, #111111);
	--lr-anthracite: var(--wp--preset--color--anthracite, #26272b);
	--lr-blanc: var(--wp--preset--color--blanc, #ffffff);
	--lr-creme: var(--wp--preset--color--creme, #f7f5f2);
	--lr-beton: var(--wp--preset--color--beton, #e7e7e2);
	--lr-texte: var(--wp--preset--color--texte, #1a1a1a);
	--lr-gris: var(--wp--preset--color--gris, #5c5c58);
	--lr-accent: var(--wp--preset--color--accent, #00e5ff);
	--lr-accent-ink: var(--wp--preset--color--accent-ink, #007a8c);
	--lr-line: #dcdcd6;

	--lr-kanit: var(--wp--preset--font-family--kanit, Kanit, "Arial Black", sans-serif);
	--lr-inter: var(--wp--preset--font-family--inter, Inter, system-ui, sans-serif);
	--lr-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);

	--lr-pad: var(--wp--style--root--padding-left, clamp(16px, 4vw, 40px));
	--lr-wide: var(--wp--style--global--wide-size, 1200px);
	--lr-header-h: 84px;
	--lr-adminbar: var(--wp-admin--admin-bar--height, 0px);

	/* Couleur de la course (remplacée par article / par carte). */
	--lr-race: var(--lr-accent);
	--lr-race-on: var(--lr-noir);
	--lr-race-ink: var(--lr-accent-ink);
	--lr-race-glow: var(--lr-accent);
}

/* =========================================================================
   2. Bases
   ========================================================================= */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.wp-site-blocks {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--lr-adminbar));
}

.wp-site-blocks > .lr-main,
.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > * + *,
.lr-main > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.lr-kanit,
.lr-logo,
.lr-hero__title,
.lr-tile__value,
.lr-note__label,
.lr-note__score,
.lr-price,
.lr-chrono__time,
.lr-shoes,
.lr-bib__head,
.lr-bib__big,
.lr-footer__tagline {
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0;
}

.lr-label,
.lr-pill,
.lr-more,
.lr-empty,
.lr-bib__foot,
.lr-row__meta,
.lr-elev__stats,
.lr-elev__y,
.lr-elev__x,
.lr-elev__tip,
.lr-switch,
.lr-chrono__ok,
.lr-toc__jump,
.lr-pagination,
.lr-post-nav,
.lr-brief__label,
.lr-footer__legal {
	font-family: var(--lr-mono);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

:where(.lr-main) a:focus-visible,
.lr-header a:focus-visible,
.lr-bib:focus-visible {
	outline: 3px solid var(--lr-accent);
	outline-offset: 3px;
}

/* =========================================================================
   3. En-tête
   ========================================================================= */

.lr-header-part {
	position: relative;
	z-index: 30;
	background: var(--lr-noir);
	color: var(--lr-blanc);
}

.lr-header-part--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.lr-header {
	padding-block: 22px;
}

.lr-header__bar {
	gap: 24px;
	min-height: 40px;
}

.lr-logo {
	display: inline-block;
	color: var(--lr-blanc);
	font-size: clamp(1.3rem, 2.3vw, 1.65rem);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

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

a.lr-logo:hover {
	color: var(--lr-blanc);
}

.lr-nav {
	--navigation-layout-justification-setting: flex-end;
}

.lr-nav.wp-block-navigation {
	gap: clamp(16px, 2.2vw, 30px);
	color: var(--lr-blanc);
}

.lr-nav .wp-block-navigation-item__content {
	color: var(--lr-blanc);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 2px solid transparent;
}

.lr-nav .wp-block-navigation-item__content:hover,
.lr-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--lr-accent);
	border-bottom-color: var(--lr-accent);
}

.lr-nav .wp-block-navigation__responsive-container-open,
.lr-nav .wp-block-navigation__responsive-container-close {
	color: var(--lr-blanc);
}

.lr-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 22px var(--lr-pad);
}

.lr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	gap: 1.1rem;
	align-items: flex-start;
}

.lr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	font-size: 2.1rem;
	letter-spacing: 0;
	line-height: 1.1;
}

/* =========================================================================
   4. Accueil : bandeau d'accroche
   ========================================================================= */

.lr-home-hero {
	background: var(--lr-noir);
	color: var(--lr-blanc);
	padding-top: clamp(1.75rem, 4vw, 3.25rem);
	padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}

.lr-home-hero__inner {
	gap: 1.25rem 3rem;
	align-items: flex-end;
}

.lr-home-hero__title.wp-block-heading {
	margin: 0;
	color: var(--lr-blanc);
	font-size: clamp(2.9rem, 8vw, 5.25rem);
	line-height: 0.9;
}

.lr-home-hero__title mark {
	color: var(--lr-accent);
	background: transparent;
}

.lr-home-hero__title.wp-block-heading {
	flex: 0 1 auto;
}

.lr-home-hero__lede {
	flex: 0 1 24rem;
	max-width: 24rem;
	margin: 0;
	color: #cfcfcf;
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* =========================================================================
   5. En-tête de page (bloc loukian/hero)
   ========================================================================= */

.lr-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--lr-noir);
	color: var(--lr-blanc);
}

.lr-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lr-hero__veil {
	display: none;
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(17, 17, 17, 0.8);
}

.lr-hero.has-photo .lr-hero__veil {
	display: block;
}

.lr-hero__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: calc(var(--lr-wide) + 2 * var(--lr-pad));
	margin-inline: auto;
	padding: calc(var(--lr-header-h) + clamp(2rem, 6vw, 5rem)) var(--lr-pad) clamp(2.5rem, 6vw, 4.5rem);
}

.lr-hero.has-trace .lr-hero__inner {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.lr-hero--archive .lr-hero__inner {
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.lr-hero__text {
	max-width: 900px;
}

.lr-hero__title {
	margin: 0;
	color: var(--lr-blanc);
	font-size: clamp(2.5rem, 7.2vw, 5.75rem);
	line-height: 0.92;
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}

.lr-pills + .lr-hero__title {
	margin-top: 1rem;
}

.lr-hero--page .lr-hero__title,
.lr-hero--archive .lr-hero__title {
	font-size: clamp(2.5rem, 8vw, 6.25rem);
}

.lr-hero__lede {
	max-width: 36rem;
	margin: 1.1rem 0 0;
	color: #dadada;
	font-size: clamp(1.02rem, 1.6vw, 1.2rem);
	line-height: 1.55;
}

.lr-hero__trace {
	justify-self: end;
	width: 100%;
	max-width: 430px;
	max-height: 300px;
}

.lr-hero .lr-trace__line {
	stroke: var(--lr-race-glow);
	stroke-width: 4.5;
}

.lr-hero .lr-trace__start {
	fill: var(--lr-race-glow);
}

.lr-hero .lr-trace__end {
	fill: var(--lr-noir);
	stroke: var(--lr-race-glow);
}

@media (max-width: 781px) {
	.lr-hero.has-trace .lr-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.lr-hero__trace {
		order: -1;
		justify-self: start;
		max-width: 220px;
		max-height: 150px;
		margin-bottom: -0.5rem;
	}
}

/* Capsules */
.lr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lr-pill {
	display: inline-block;
	padding: 0.38em 0.95em;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-size: 0.72rem;
	line-height: 1.3;
}

.lr-pill--filled {
	background: var(--lr-race);
	border-color: var(--lr-race);
	color: var(--lr-race-on);
}

.lr-hero--article .lr-pill--filled {
	background: var(--lr-accent);
	border-color: var(--lr-accent);
	color: var(--lr-noir);
}

/* =========================================================================
   6. Trace GPX
   ========================================================================= */

.lr-trace {
	display: block;
	overflow: visible;
}

.lr-trace__line {
	fill: none;
	stroke: var(--lr-race);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.lr-trace__start {
	fill: var(--lr-race);
}

.lr-trace__end {
	fill: var(--lr-blanc);
	stroke: var(--lr-race);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.lr-trace--animate .lr-trace__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: lr-draw 4s cubic-bezier(0.45, 0, 0.55, 1) 0.35s forwards;
}

.lr-trace--animate .lr-trace__start,
.lr-trace--animate .lr-trace__end {
	opacity: 0;
	animation: lr-fade 0.4s ease forwards;
}

.lr-trace--animate .lr-trace__start {
	animation-delay: 0.15s;
}

.lr-trace--animate .lr-trace__end {
	animation-delay: 4.25s;
}

[data-lr-replay] {
	cursor: pointer;
	outline: none;
}

[data-lr-replay]:focus-visible {
	outline: 2px dashed var(--lr-race-glow);
	outline-offset: 8px;
}

@keyframes lr-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes lr-fade {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lr-trace--animate .lr-trace__line {
		animation: none;
		stroke-dashoffset: 0;
	}

	.lr-trace--animate .lr-trace__start,
	.lr-trace--animate .lr-trace__end {
		animation: none;
		opacity: 1;
	}
}

/* =========================================================================
   7. Cartouche de la course (bloc loukian/race-card)
   ========================================================================= */

.lr-card {
	background: var(--lr-race);
	color: var(--lr-race-on);
}

.lr-card__inner {
	box-sizing: border-box;
	display: grid;
	gap: clamp(1.1rem, 2.2vw, 1.5rem);
	max-width: calc(var(--lr-wide) + 2 * var(--lr-pad));
	margin-inline: auto;
	padding: clamp(1.4rem, 3vw, 2.1rem) var(--lr-pad);
}

.lr-card__section {
	min-width: 0;
}

.lr-label {
	display: block;
	margin: 0 0 0.55rem;
	font-size: 0.7rem;
	font-style: normal;
	line-height: 1.4;
	opacity: 0.82;
}

h2.lr-label {
	font-family: var(--lr-mono);
	font-weight: 500;
	font-size: 0.7rem;
	color: inherit;
}

.lr-grid {
	display: grid;
	gap: 10px;
}

.lr-grid--carac {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

.lr-grid--notes {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.lr-tile,
.lr-shoes {
	box-sizing: border-box;
	padding: 9px 13px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.17);
}

.lr-card.is-light .lr-tile,
.lr-card.is-light .lr-shoes {
	background: rgba(0, 0, 0, 0.08);
}

.lr-tile .lr-label {
	margin-bottom: 0.2rem;
}

.lr-tile__value {
	display: block;
	font-size: clamp(1.2rem, 2.1vw, 1.45rem);
	line-height: 1.1;
}

.lr-tile--wide p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.lr-price {
	font-size: 1.4rem;
	line-height: 1;
}

.lr-note__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.lr-note__label {
	font-size: 1.1rem;
	line-height: 1.1;
}

.lr-note__score {
	font-size: 1.65rem;
	line-height: 1;
	white-space: nowrap;
}

.lr-note__score small {
	margin-left: 1px;
	font-size: 0.55em;
	opacity: 0.65;
}

.lr-segments {
	display: flex;
	gap: 4px;
	margin: 7px 0 7px;
}

.lr-segments span {
	flex: 1;
	height: 6px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.22;
}

.lr-segments span.is-on {
	opacity: 1;
}

.lr-note p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

.lr-me {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	align-items: end;
	gap: 1rem 1.5rem;
}

.lr-switch {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	min-height: 46px;
	overflow: hidden;
	border: 1.5px solid currentColor;
	border-radius: 8px;
	font-size: 0.68rem;
}

.lr-switch span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 0.95em 0.3em;
	text-align: center;
	white-space: nowrap;
}

.lr-switch span.is-on {
	background: var(--lr-noir);
	color: var(--lr-blanc);
}

.lr-chrono {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 46px;
	padding: 2px 16px;
	border-radius: 8px;
	background: var(--lr-noir);
}

.lr-chrono__time {
	color: var(--lr-blanc);
	font-size: clamp(1.9rem, 3.6vw, 2.3rem);
	line-height: 1.05;
}

.lr-chrono__ok {
	color: #bbbbbb;
	font-size: 0.66rem;
	text-align: right;
}

.lr-shoes {
	display: flex;
	align-items: center;
	min-height: 46px;
	font-size: 1.3rem;
	line-height: 1.1;
}

/* Encart d'intro en tête de cartouche */
.lr-intro-box p {
	max-width: 62ch;
	margin: 0;
	font-size: clamp(1.08rem, 1.7vw, 1.3rem);
	font-weight: 500;
	line-height: 1.5;
}

.lr-intro-box {
	padding-bottom: clamp(1rem, 2vw, 1.4rem);
	border-bottom: 1.5px solid currentColor;
	border-bottom-color: rgba(0, 0, 0, 0.18);
}

.lr-card.is-dark .lr-intro-box {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* =========================================================================
   8. Lecture : texte + sommaire flottant
   ========================================================================= */

.lr-reading {
	box-sizing: border-box;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--lr-pad) clamp(3rem, 6vw, 5rem);
}

.lr-reading .lr-prose {
	padding-inline: 0;
}

@media (min-width: 1100px) {
	.lr-reading:not(.lr-reading--no-toc) {
		display: grid;
		grid-template-columns: 220px minmax(0, 680px);
		justify-content: center;
		align-items: start;
		gap: 72px;
	}

	.lr-reading:not(.lr-reading--no-toc) .lr-prose > :not(.alignleft):not(.alignright),
	.lr-reading:not(.lr-reading--no-toc) .lr-prose > .alignwide,
	.lr-reading:not(.lr-reading--no-toc) .lr-prose > .alignfull {
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Images « sur le côté » (alignement gauche / droite) : espace avec le texte.
   Mêmes règles dans l'éditeur (.wp-block-post-content.is-root-container) pour un aperçu fidèle. */
:is(.lr-prose, .wp-block-post-content.is-root-container) > .alignleft {
	float: left;
	margin: calc(var(--wp--style--block-gap, 1.25rem) + 0.4em) 2rem 3rem 0 !important;
	max-width: 50%;
}

:is(.lr-prose, .wp-block-post-content.is-root-container) > .alignright {
	float: right;
	margin: calc(var(--wp--style--block-gap, 1.25rem) + 0.4em) 0 3rem 2rem !important;
	max-width: 50%;
}

/* Éditeur : l'image flottante reste dans la colonne de texte (et non collée au bord). */
.wp-block-post-content.is-root-container > .alignleft {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 680px)) / 2)) !important;
}

.wp-block-post-content.is-root-container > .alignright {
	margin-right: max(0px, calc((100% - var(--wp--style--global--content-size, 680px)) / 2)) !important;
}

/* Un intertitre repart sous l'image flottante (nouveau chapitre), sur le site comme dans l'éditeur. */
:is(.lr-prose, .wp-block-post-content.is-root-container) > :is(h2, h3) {
	clear: both;
}

.wp-block-post-content.is-root-container > h2 {
	margin-top: 2.4em;
	margin-bottom: 0.55em;
}

.wp-block-post-content.is-root-container > h3 {
	margin-top: 1.9em;
	margin-bottom: 0.4em;
}

/* Intertitre à l'intérieur d'un groupe, de colonnes ou d'un bloc Média & texte : espace réduit. */
.lr-prose * > :is(h2, h3).wp-block-heading {
	margin-top: 1.4em;
}

/* Intertitre en tête d'une colonne, d'un groupe ou d'un bloc Média & texte : pas de grand espace au-dessus. */
.lr-prose :is(.wp-block-group, .wp-block-column, .wp-block-media-text__content) > :is(h2, h3):first-child {
	margin-top: 0;
}

@media (max-width: 600px) {
	:is(.lr-prose, .wp-block-post-content.is-root-container) > :is(.alignleft, .alignright) {
		float: none;
		max-width: 100%;
		margin: 1.5rem 0 !important;
	}
}

/* Typographie du texte */
.lr-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.lr-prose > :first-child {
	margin-top: 0;
}

.lr-prose h2 {
	margin-top: 2.4em;
	margin-bottom: 0.55em;
	font-size: clamp(1.65rem, 3.2vw, 2.15rem);
	scroll-margin-top: calc(var(--lr-adminbar) + 90px);
}

.lr-is-course .lr-prose h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 6px;
	margin-bottom: 0.7rem;
	border-radius: 2px;
	background: var(--lr-race);
}

.lr-prose h3 {
	margin-top: 1.9em;
	margin-bottom: 0.4em;
	font-size: 1.3rem;
	scroll-margin-top: calc(var(--lr-adminbar) + 90px);
}

.lr-prose a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 2px;
	text-decoration-color: var(--lr-accent);
	text-underline-offset: 3px;
}

.lr-prose .wp-block-image,
.lr-prose .wp-block-gallery {
	margin-block: 2rem;
}

.lr-prose .wp-block-image img {
	border-radius: 0;
}

.lr-prose figcaption,
.lr-prose .wp-element-caption {
	margin-top: 0.6rem;
	color: var(--lr-gris);
	font-family: var(--lr-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
}

.lr-prose blockquote.wp-block-quote {
	margin-block: 2rem;
	padding-left: 1.1rem;
	border-left: 6px solid var(--lr-race);
}

.lr-prose blockquote.wp-block-quote cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--lr-mono);
	font-size: 0.72rem;
	font-style: normal;
	text-transform: uppercase;
}

.lr-prose .wp-block-pullquote {
	padding: 1.5rem 0;
	border-top: 6px solid var(--lr-race);
	border-bottom: 1px solid var(--lr-line);
	text-align: left;
}

/* Encadré « En bref » */
.lr-brief {
	padding: 1.1rem 1.35rem 1.2rem;
	border-radius: 8px;
	background: var(--lr-noir);
	color: var(--lr-blanc);
	font-size: 0.95rem;
	line-height: 1.6;
}

.lr-brief .lr-brief__label {
	margin: 0 0 0.35rem;
	color: var(--lr-accent);
	font-size: 0.72rem;
}

.lr-brief ul {
	margin: 0;
	padding-left: 1.1rem;
}

.lr-brief li::marker {
	color: var(--lr-accent);
}

/* Sommaire */
.lr-toc:not(.is-ready) {
	display: none;
}

.lr-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lr-toc__list a {
	display: block;
	padding: 0.42rem 0 0.42rem 0.9rem;
	border-left: 3px solid var(--lr-line);
	color: var(--lr-gris);
	font-size: 0.875rem;
	line-height: 1.35;
	text-decoration: none;
}

.lr-toc__list a:hover {
	color: var(--lr-noir);
}

.lr-toc__list a.is-active {
	border-left-color: var(--lr-noir);
	color: var(--lr-noir);
	font-weight: 500;
}

.lr-is-course .lr-toc__list a.is-active {
	border-left-color: var(--lr-race);
}

.lr-toc__jump {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.55em 1em;
	border-radius: 999px;
	background: var(--lr-noir);
	color: var(--lr-blanc);
	font-size: 0.7rem;
	text-decoration: none;
}

.lr-toc__jump:hover {
	background: var(--lr-race);
	color: var(--lr-race-on);
}

.lr-toc__toggle {
	display: none;
}

@media (min-width: 1100px) {
	.lr-reading:not(.lr-reading--no-toc) .lr-toc {
		position: sticky;
		top: calc(var(--lr-adminbar) + 2rem);
		max-height: calc(100vh - var(--lr-adminbar) - 4rem);
		overflow: auto;
	}

	.lr-toc::before {
		content: "Sommaire";
		display: block;
		margin-bottom: 0.8rem;
		color: var(--lr-gris);
		font-family: var(--lr-mono);
		font-size: 0.7rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}
}

/* Sommaire en barre repliable (mobile, tablette) */
@media (max-width: 1099px) {
	.lr-toc {
		position: sticky;
		top: var(--lr-adminbar);
		z-index: 15;
		max-width: 680px;
		margin: -1rem auto 2rem;
		border-bottom: 1px solid var(--lr-line);
		background: var(--lr-creme);
	}

	.lr-toc__toggle {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		width: 100%;
		padding: 0.85rem 0;
		border: 0;
		background: none;
		color: var(--lr-noir);
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	.lr-toc__toggle .lr-label {
		margin: 0;
		opacity: 1;
	}

	.lr-toc__toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		margin-left: auto;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-3px);
		transition: transform 0.2s;
	}

	.lr-toc.is-open .lr-toc__toggle::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.lr-toc__current {
		overflow: hidden;
		color: var(--lr-gris);
		font-size: 0.875rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.lr-toc__panel {
		display: none;
		max-height: 60vh;
		overflow: auto;
		padding: 0 0 1rem;
	}

	.lr-toc.is-open .lr-toc__panel {
		display: block;
	}
}

/* =========================================================================
   9. Profil de dénivelé (bloc loukian/elevation)
   ========================================================================= */

.lr-elev {
	margin-block: 2.2rem;
}

.lr-elev__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3rem 1rem;
	margin-bottom: 0.6rem;
}

.lr-elev__head .lr-label {
	margin: 0;
	color: var(--lr-gris);
	opacity: 1;
}

.lr-elev__stats {
	font-size: 0.75rem;
}

.lr-elev__plot {
	position: relative;
	height: clamp(140px, 24vw, 200px);
	border-bottom: 1.5px solid var(--lr-noir);
	cursor: crosshair;
	touch-action: pan-y;
}

.lr-elev__plot svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lr-elev__area {
	fill: var(--lr-race);
	opacity: 0.3;
}

.lr-elev__line {
	fill: none;
	stroke: var(--lr-race-ink);
	stroke-width: 2.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.lr-elev__y {
	position: absolute;
	left: 0;
	padding: 0 4px 0 0;
	color: var(--lr-gris);
	font-size: 0.66rem;
	line-height: 1;
	transform: translateY(-130%);
	pointer-events: none;
}

.lr-elev__x {
	position: relative;
	height: 1.5rem;
	color: var(--lr-gris);
	font-size: 0.66rem;
}

.lr-elev__x span {
	position: absolute;
	top: 0.4rem;
	transform: translateX(-50%);
	white-space: nowrap;
}

.lr-elev__x span:first-child {
	transform: none;
}

.lr-elev__x span.is-end {
	transform: translateX(-100%);
}

.lr-elev__cursor {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed var(--lr-noir);
	pointer-events: none;
}

.lr-elev__cursor[hidden] {
	display: none;
}

.lr-elev__dot {
	position: absolute;
	left: -6px;
	width: 11px;
	height: 11px;
	border: 2px solid var(--lr-noir);
	border-radius: 50%;
	background: var(--lr-race);
	transform: translateY(-50%);
	box-sizing: border-box;
}

.lr-elev__tip {
	position: absolute;
	top: -2px;
	left: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--lr-noir);
	color: var(--lr-blanc);
	font-size: 0.68rem;
	white-space: nowrap;
}

.lr-elev__tip.is-left {
	left: auto;
	right: 8px;
}

/* =========================================================================
   10. Sections, listes et cartes
   ========================================================================= */

.lr-section {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.lr-section:last-child {
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.lr-section--archive {
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.lr-section__head {
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.5rem;
}

.lr-section__title.wp-block-heading {
	margin: 0;
	font-size: clamp(1.9rem, 4.2vw, 2.75rem);
}

.lr-more {
	margin: 0;
	font-size: 0.75rem;
}

.lr-more a {
	color: var(--lr-noir);
	text-decoration-color: var(--lr-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.lr-empty {
	color: var(--lr-gris);
	font-size: 0.8rem;
}

.lr-prose > .lr-intro,
.lr-intro {
	box-sizing: border-box;
	max-width: var(--lr-wide) !important;
	padding-right: max(0px, calc(100% - 40rem));
	color: var(--lr-gris);
	font-size: 1.15rem;
}

/* Dossards */
.wp-block-post-template.lr-bibs {
	grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr)) !important;
	gap: 20px;
}

.lr-bib {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--lr-line);
	border-radius: 8px;
	background: var(--lr-blanc);
	color: var(--lr-noir);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lr-bib:hover {
	color: var(--lr-noir);
	transform: translateY(-3px) rotate(-0.4deg);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
}

/* Les quatre trous d'épingles */
.lr-bib::before,
.lr-bib::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	z-index: 2;
	height: 11px;
	pointer-events: none;
	background:
		radial-gradient(circle, transparent 2.6px, rgba(0, 0, 0, 0.28) 2.8px, rgba(0, 0, 0, 0.28) 4.2px, transparent 4.5px) left center / 11px 11px no-repeat,
		radial-gradient(circle, transparent 2.6px, rgba(0, 0, 0, 0.28) 2.8px, rgba(0, 0, 0, 0.28) 4.2px, transparent 4.5px) right center / 11px 11px no-repeat;
}

.lr-bib::before {
	top: 8px;
}

.lr-bib::after {
	bottom: 8px;
}

.lr-bib__head {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5.6rem;
	padding: 24px 22px 16px;
	background: var(--lr-race);
	color: var(--lr-race-on);
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1;
	text-align: center;
	text-wrap: balance;
}

.lr-bib__body {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 14px 22px;
}

.lr-bib__svg {
	width: 100%;
	height: 130px;
}

.lr-bib .lr-trace__line {
	stroke: var(--lr-race-ink);
	stroke-width: 3;
}

.lr-bib .lr-trace__start {
	fill: var(--lr-race-ink);
}

.lr-bib .lr-trace__end {
	fill: var(--lr-blanc);
	stroke: var(--lr-race-ink);
}

.lr-bib__big {
	color: var(--lr-race-ink);
	font-size: 2.4rem;
}

.lr-bib__foot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin: 0 14px;
	padding: 12px 8px 26px;
	border-top: 1.5px dashed #d6d6d0;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}

.lr-bib__foot span:last-child {
	overflow: hidden;
	text-align: right;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 700;
}

/* Deux dossards compacts par ligne sur téléphone */
@media (max-width: 599px) {
	.wp-block-post-template.lr-bibs {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px;
	}

	.lr-bib__head {
		min-height: 4.2rem;
		padding: 20px 10px 12px;
		font-size: 1rem;
	}

	.lr-bib__body {
		min-height: 96px;
		padding: 10px 12px;
	}

	.lr-bib__svg {
		height: 84px;
	}

	.lr-bib__big {
		font-size: 1.5rem;
	}

	.lr-bib__foot {
		flex-wrap: wrap;
		gap: 2px 8px;
		margin: 0 8px;
		padding: 8px 4px 20px;
		font-size: 0.72rem;
	}
}

/* Cartes d'astuces */
.wp-block-post-template.lr-cards {
	gap: 18px;
}

.lr-tip {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--lr-line);
	border-top: 6px solid var(--lr-noir);
	border-radius: 8px;
	background: var(--lr-blanc);
}

.lr-tip:has(.lr-tip__img img) {
	border-top-width: 1px;
}

.lr-tip .lr-tip__img {
	margin: 0;
}

.lr-tip__img img {
	display: block;
	width: 100%;
	transition: transform 0.4s ease;
}

.lr-tip:hover .lr-tip__img img {
	transform: scale(1.03);
}

.lr-tip__img a {
	display: block;
	overflow: hidden;
}

.lr-tip__body {
	padding: 16px 18px 20px;
}

.lr-tip__title.wp-block-post-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.02;
}

.lr-tip__title a,
.lr-row__title a {
	color: var(--lr-noir);
	text-decoration: none;
}

.lr-tip__title a:hover,
.lr-row__title a:hover {
	color: var(--lr-accent-ink);
}

.lr-tip__excerpt,
.lr-row__excerpt {
	margin-top: 0.55rem;
	color: var(--lr-gris);
	font-size: 0.92rem;
	line-height: 1.55;
}

.lr-tip__excerpt p,
.lr-row__excerpt p {
	margin: 0;
}

.lr-tip__excerpt .wp-block-post-excerpt__more-text,
.lr-row__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

/* Lignes d'actus */
.lr-rows {
	border-bottom: 1px solid var(--lr-line);
}

.lr-rows > li {
	margin: 0;
}

.lr-row {
	padding: 1.5rem 0;
	border-top: 1px solid var(--lr-line);
}

.lr-row__meta {
	gap: 0.8rem;
	font-size: 0.72rem;
}

.lr-row__meta .wp-block-post-date {
	font-size: 0.72rem;
}

.lr-row__cat a {
	padding: 0.25em 0.8em;
	border-radius: 999px;
	background: var(--lr-noir);
	color: var(--lr-blanc);
	text-decoration: none;
}

.lr-row__cat .wp-block-post-terms__separator {
	display: none;
}

.lr-row__title.wp-block-post-title {
	margin: 0.5rem 0 0;
	font-size: clamp(1.45rem, 3vw, 2rem);
}

.lr-row__excerpt {
	max-width: 62ch;
}

/* Pagination */
.lr-pagination {
	margin-top: 2.5rem;
	font-size: 0.75rem;
}

.lr-pagination a {
	color: var(--lr-noir);
}

/* Bas d'article */
.lr-post-foot {
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.lr-post-nav {
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--lr-line);
	font-size: 0.75rem;
}

.lr-post-nav a {
	color: var(--lr-noir);
}

.lr-tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 0.25em 0.8em;
	border: 1.5px solid var(--lr-noir);
	border-radius: 999px;
	color: var(--lr-noir);
	font-family: var(--lr-mono);
	font-size: 0.7rem;
	text-decoration: none;
	text-transform: uppercase;
}

.lr-tags .wp-block-post-terms__separator {
	display: none;
}

/* =========================================================================
   11. Pied de page
   ========================================================================= */

.lr-footer-part {
	background: var(--lr-noir);
	color: #bdbdbd;
}

.lr-footer {
	padding-top: 2.75rem;
	padding-bottom: 1.8rem;
}

.lr-footer__top {
	gap: 1.5rem 3rem;
}

.lr-footer__tagline {
	margin: 0;
	color: var(--lr-blanc);
	font-size: 1rem;
}

.lr-footer__nav .wp-block-navigation-item__content {
	color: var(--lr-blanc);
	text-decoration: none;
}

.lr-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--lr-accent);
}

.lr-footer .lr-footer__legal {
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid #2a2a2a;
	color: #8a8a8a;
	font-size: 0.66rem;
}

/* =========================================================================
   12. Éditeur : aperçus des blocs dynamiques
   ========================================================================= */

.lr-editor-ph {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 24px;
	border: 1.5px dashed #9a9a9a;
	border-radius: 8px;
	background: #fafaf8;
	color: #111111;
	font-family: var(--lr-mono);
	font-size: 12px;
}

.lr-editor-ph strong {
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	font-size: 18px;
	text-transform: uppercase;
}

.lr-editor-ph.is-dark {
	background: #111111;
	color: #ffffff;
}

.lr-editor-ph.is-race {
	background: #e4002b;
	color: #ffffff;
}

.lr-editor-ph.is-bib {
	min-height: 180px;
	justify-content: center;
	text-align: center;
}

/* Dans l'éditeur de site, l'en-tête superposé reste lisible */
.editor-styles-wrapper .lr-header-part--overlay {
	position: relative;
	background: var(--lr-noir);
}


/* =========================================================================
   13. V3 — frise, notes résumées, verdict, météo, à la une, éditions
   ========================================================================= */

/* Frise « date habituelle » */
.lr-tile--date {
	grid-column: span 2;
}

@media (max-width: 599px) {
	.lr-tile--date {
		grid-column: auto;
	}
}

.lr-frise {
	position: relative;
	display: block;
	height: 4px;
	margin-top: 9px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.28);
}

.lr-card.is-light .lr-frise {
	background: rgba(0, 0, 0, 0.18);
}

.lr-frise__seg {
	position: absolute;
	top: 0;
	width: 8%;
	height: 4px;
	border-radius: 2px;
	background: currentColor;
}

.lr-frise__ends {
	display: flex;
	justify-content: space-between;
	margin-top: 3px;
	font-family: var(--lr-mono);
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.6;
}

/* Notes résumées dans la cartouche */
.lr-notes-strip .lr-label {
	margin-bottom: 0;
}

.lr-notes-strip__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 0.45rem;
}

/* « Verdict complet ↓ » : petite capsule vers le verdict en bas de page. */
.lr-notes-strip__more,
.lr-card a.lr-notes-strip__more {
	flex-shrink: 0;
	padding: 0.2em 0.75em;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-family: var(--lr-mono);
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 0.85;
	transition: opacity 0.15s, background 0.15s;
}

.lr-notes-strip__more:hover,
.lr-notes-strip__more:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.14);
}

.lr-notes-strip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: 8px 18px;
}

.lr-mini__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.lr-mini__label,
.lr-mini__score {
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.1;
}

.lr-mini__label {
	font-size: 0.95rem;
}

.lr-mini__score {
	font-size: 1.15rem;
}

.lr-mini__score small {
	margin-left: 1px;
	font-size: 0.6em;
	opacity: 0.65;
}

.lr-mini .lr-segments,
.lr-verdict .lr-segments {
	margin: 5px 0 0;
}

.lr-segments span {
	height: 5px;
}

/* Verdict en fin d'article */
/*
 * Le verdict : bande pleine largeur à la couleur de la course.
 * Son titre est un onglet qui dépasse au-dessus de la bande, calé sur la colonne de texte,
 * pour qu'on lise la bande comme la suite de l'article (et pas comme le pied de page).
 */
.lr-verdict {
	position: relative;
	margin-top: 1.5rem;
	background: var(--lr-race);
	color: var(--lr-race-on);
}

/* Défilement doux vers le verdict et dans le sommaire (sauf si l'utilisateur réduit les animations). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.lr-verdict__inner {
	box-sizing: border-box;
	max-width: calc(900px + 2 * var(--lr-pad));
	margin-inline: auto;
	padding: clamp(1rem, 2.5vw, 1.5rem) var(--lr-pad) clamp(1.75rem, 4vw, 2.75rem);
}

.lr-verdict__title.wp-block-heading,
.lr-verdict__title {
	position: absolute;
	bottom: calc(100% - 1px); /* -1px : pas de liseré entre l'onglet et la bande. */
	/* Aligné sur la colonne de texte : centrée (680 px) sans sommaire… */
	left: max(var(--lr-pad), calc(50% - 340px));
	margin: 0;
	padding: 0.45em 0.75em 0.2em;
	border-radius: 10px 10px 0 0;
	background: var(--lr-race);
	color: inherit;
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.1;
	text-transform: uppercase;
	scroll-margin-top: calc(var(--lr-adminbar) + 110px);
}

/* …ou à droite du sommaire sur grand écran (même calcul que .lr-reading : 220 + 72 + 680, centré). */
@media (min-width: 1100px) {
	body:has(.lr-toc) .lr-verdict__title.wp-block-heading,
	body:has(.lr-toc) .lr-verdict__title {
		left: calc(50% - 194px - 0.75em);
	}
}

.lr-verdict__row {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	gap: 0.4rem 1.75rem;
	padding: 0.95rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.lr-verdict.is-light .lr-verdict__row {
	border-top-color: rgba(0, 0, 0, 0.2);
}

.lr-verdict__row p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.55;
}

.lr-verdict .lr-price {
	display: block;
	margin-top: 4px;
}

@media (max-width: 599px) {
	.lr-verdict__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Météo au départ */
.lr-meteo {
	margin-block: 2rem;
	padding: 14px 16px 12px;
	border: 1px solid var(--lr-line);
	border-radius: 8px;
	background: var(--lr-blanc);
}

.lr-meteo .lr-meteo__head {
	margin: 0 0 0.7rem;
	color: var(--lr-gris);
	opacity: 1;
}

.lr-meteo__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem 1.75rem;
}

.lr-meteo__main {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lr-meteo__icon {
	width: 44px;
	height: 44px;
	color: var(--lr-race-ink);
}

.lr-meteo__temp {
	display: block;
	color: var(--lr-noir);
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	font-size: 2.6rem;
	line-height: 1;
}

.lr-meteo__feels {
	margin: 2px 0 0;
	color: var(--lr-gris);
	opacity: 1;
}

.lr-meteo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
	gap: 0.6rem 1rem;
	margin: 0;
}

.lr-meteo__grid dt {
	margin: 0;
	color: var(--lr-gris);
	opacity: 1;
}

.lr-meteo__grid dd {
	margin: 0;
	color: var(--lr-noir);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
}

.lr-meteo__src {
	margin: 0.8rem 0 0;
	color: var(--lr-gris);
	font-size: 0.72rem;
}

.lr-meteo__src a {
	color: inherit;
}

@media (max-width: 599px) {
	.lr-meteo__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Accueil : la dernière course à la une */
.lr-feat {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	overflow: hidden;
	margin-bottom: 22px;
	border-radius: 10px;
	background: var(--lr-race);
	color: var(--lr-race-on);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lr-feat:hover {
	color: var(--lr-race-on);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.lr-feat__media {
	position: relative;
	min-height: clamp(220px, 30vw, 340px);
	background: var(--lr-noir);
	overflow: hidden;
}

.lr-feat__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.lr-feat:hover .lr-feat__img {
	transform: scale(1.03);
}

.lr-feat__veil {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.4);
}

.lr-feat__trace {
	position: absolute;
	inset: 14% 12%;
	width: 76%;
	height: 72%;
}

.lr-feat .lr-trace__line {
	stroke: #ffffff;
	stroke-width: 4.5;
}

.lr-feat .lr-trace__start {
	fill: #ffffff;
}

.lr-feat .lr-trace__end {
	fill: var(--lr-noir);
	stroke: #ffffff;
}

.lr-feat__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.lr-feat__top {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lr-feat .lr-label {
	margin: 0;
}

.lr-feat__title {
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 0.95;
	text-transform: uppercase;
	text-wrap: balance;
}

.lr-feat__intro {
	max-width: 42ch;
	font-size: 1rem;
	line-height: 1.5;
}

.lr-feat__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.lr-feat__chrono {
	padding: 2px 14px;
	border-radius: 7px;
	background: var(--lr-noir);
	color: var(--lr-blanc);
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	font-size: 1.7rem;
	line-height: 1.2;
}

@media (max-width: 781px) {
	.lr-feat {
		grid-template-columns: minmax(0, 1fr);
	}

	.lr-feat__media {
		min-height: 200px;
	}
}

/* Mes autres éditions */
.lr-editions {
	box-sizing: border-box;
	max-width: calc(var(--lr-wide) + 2 * var(--lr-pad));
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--lr-pad) 0;
}

.lr-editions .lr-section__title {
	margin: 0 0 1.25rem;
	font-family: var(--lr-kanit);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	text-transform: uppercase;
}

.lr-editions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
	gap: 20px;
}

/* =========================================================================
   14. V3.1 — bloc Parcours (carte stylisée + profil synchronisé)
   ========================================================================= */

.lr-parcours {
	margin-block: 2.2rem;
	overflow: hidden;
	border: 1px solid var(--lr-line);
	border-radius: 8px;
	background: var(--lr-blanc);
}

.lr-parcours__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3rem 1rem;
	padding: 10px 14px;
}

.lr-parcours__head .lr-label {
	margin: 0;
	color: var(--lr-gris);
	opacity: 1;
}

.lr-parcours__stats {
	font-family: var(--lr-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.lr-parcours__map {
	position: relative;
	width: 100%;
	background: #efeee9;
	overflow: hidden;
}

.lr-parcours__base,
.lr-parcours__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lr-parcours__base {
	object-fit: cover;
}

.lr-parcours__svg {
	overflow: visible;
	touch-action: pan-y;
}

.lr-parcours .lr-trace__line {
	stroke: var(--lr-race-ink);
	stroke-width: 3.5;
}

.lr-parcours .lr-trace__start {
	fill: var(--lr-race-ink);
}

.lr-parcours .lr-trace__end {
	fill: var(--lr-blanc);
	stroke: var(--lr-race-ink);
}

.lr-km circle {
	fill: var(--lr-race-ink);
	stroke: var(--lr-blanc);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.lr-km text {
	fill: var(--lr-blanc);
	font-family: var(--lr-mono);
	font-weight: 700;
	text-anchor: middle;
}

.lr-parcours__dot {
	fill: var(--lr-blanc);
	stroke: var(--lr-noir);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.lr-parcours__dot[hidden] {
	display: none;
}

.lr-parcours__tip {
	position: absolute;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--lr-noir);
	color: var(--lr-blanc);
	font-family: var(--lr-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transform: translate(-50%, calc(-100% - 12px));
	pointer-events: none;
}

.lr-parcours__tip[hidden] {
	display: none;
}

.lr-elev--in {
	margin: 0;
	padding: 12px 14px 4px;
	border-top: 1px solid var(--lr-line);
}

.lr-elev--in .lr-elev__plot {
	height: clamp(90px, 14vw, 120px);
}

.lr-elev__src {
	color: var(--lr-gris);
	text-transform: none;
	letter-spacing: 0;
}

.lr-parcours__credit {
	margin: 0;
	padding: 0 14px 10px;
	color: var(--lr-gris);
	font-size: 0.68rem;
}

.lr-parcours__credit a {
	color: inherit;
}


/* =========================================================================
   15. Les conseils (bloc loukian/conseils) : emoji en marge + pastille couleur course
   ========================================================================= */

.lr-conseils {
	margin-top: 2.4em;
	margin-bottom: 1.5em;
	clear: both;
}

.lr-prose .lr-conseils > .lr-conseils__title,
.lr-conseils > .lr-conseils__title {
	margin-top: 0;
	margin-bottom: 0.8em;
}

.lr-conseils__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lr-conseil {
	display: grid;
	grid-template-columns: 2.1em minmax(0, 1fr);
	align-items: start;
	margin: 0 0 0.7em;
}

.lr-conseil:last-child {
	margin-bottom: 0;
}

.lr-conseil__icon {
	font-size: 1.25em;
	line-height: 1.4;
	font-style: normal;
}

.lr-conseil__icon.is-dot::before {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.2em;
	border-radius: 50%;
	background: var(--lr-race);
	vertical-align: 0.15em;
}

.lr-conseil__tag {
	display: inline-block;
	margin-right: 0.55em;
	padding: 0.2em 0.6em 0.15em;
	border-radius: 4px;
	background: var(--lr-race);
	color: var(--lr-race-on);
	font-family: var(--lr-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	vertical-align: 0.15em;
	white-space: nowrap;
}

/* Éditeur : mode d'emploi et aperçu. */
.lr-conseils__tuto {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px dashed #c9c4bb;
	border-radius: 6px;
	color: #6b6860;
	font-size: 0.8rem;
	line-height: 1.5;
}

.lr-conseils__preview {
	margin-top: 1.2rem;
	padding-top: 0.9rem;
	border-top: 1px dashed #c9c4bb;
}

.lr-conseils__preview-label {
	display: block;
	margin-bottom: 0.6rem;
	color: #8a8780;
	font-family: var(--lr-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* =========================================================================
   16. Splits & FC (bloc loukian/splits)
   ========================================================================= */

.lr-splits {
	--lr-fc: #e5243b; /* Fréquence cardiaque : toujours rouge vif, quelle que soit la couleur de la course. */
	margin-block: 2.2rem;
	padding: 1rem 1.1rem 0.8rem;
	border: 1px solid var(--lr-line);
	border-radius: 8px;
	background: var(--lr-blanc);
}

.lr-splits__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	margin-bottom: 1.6rem;
}

.lr-splits__head .lr-label {
	margin: 0;
}

.lr-splits__sum {
	margin-left: auto;
	font-family: var(--lr-mono);
	font-size: 0.78rem;
	font-weight: 700;
}

.lr-splits__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--lr-line);
	border-radius: 999px;
	font-size: 0.78rem;
	cursor: pointer;
	user-select: none;
}

.lr-splits__toggle input {
	margin: 0;
	accent-color: var(--lr-fc);
}

.lr-splits__plot {
	position: relative;
	height: 180px;
	border-bottom: 1.5px solid var(--lr-texte, #16161a);
}

.lr-splits__bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
}

.lr-split {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100%;
	min-width: 0;
	padding-inline: 3px;
	cursor: default;
}

.lr-split__bar {
	position: relative;
	width: 100%;
	border-radius: 4px 4px 0 0;
	background: color-mix(in srgb, var(--lr-race) 42%, #fff);
	transition: background 0.15s;
}

.lr-split.is-fast .lr-split__bar {
	background: var(--lr-race);
}

.lr-split.is-slow .lr-split__bar {
	background: color-mix(in srgb, var(--lr-race) 16%, #fff);
}

.lr-split:hover .lr-split__bar,
.lr-split.is-on .lr-split__bar {
	background: color-mix(in srgb, var(--lr-race) 80%, #000);
}

.lr-split__v {
	position: absolute;
	z-index: 2; /* Au-dessus de la courbe de FC et de la ligne de moyenne. */
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0 3px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--lr-blanc) 85%, transparent);
	line-height: 1.35;
	font-family: var(--lr-mono);
	font-size: 0.66rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--lr-gris, #6b6860);
}

.lr-split.is-fast .lr-split__v {
	color: var(--lr-race-ink);
}

.lr-splits__avg {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	border-top: 1.5px dashed color-mix(in srgb, var(--lr-texte, #16161a) 45%, transparent);
	pointer-events: none;
}

.lr-splits__hr {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.lr-splits__line {
	fill: none;
	stroke: var(--lr-fc);
	stroke-width: 2.25;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.lr-splits--fc .lr-splits__line {
	stroke-width: 2.5;
}

.lr-splits__area {
	fill: color-mix(in srgb, var(--lr-fc) 10%, transparent);
}

.lr-splits:has(.lr-splits__toggle input:not(:checked)) .lr-splits__hr,
.lr-splits:has(.lr-splits__toggle input:not(:checked)) .lr-splits__tick {
	display: none;
}

.lr-splits__zone {
	position: absolute;
	left: 0;
	right: 0;
	background: color-mix(in srgb, var(--lr-fc) 4%, transparent);
	pointer-events: none;
}

.lr-splits__zone.is-z4 {
	background: color-mix(in srgb, var(--lr-fc) 8%, transparent);
}

.lr-splits__zone.is-z5 {
	background: color-mix(in srgb, var(--lr-fc) 14%, transparent);
}

.lr-splits__zone span {
	position: absolute;
	right: 4px;
	top: 2px;
	font-family: var(--lr-mono);
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--lr-fc);
	opacity: 0.8;
}

.lr-splits__tick {
	position: absolute;
	left: 0;
	transform: translateY(50%);
	font-family: var(--lr-mono);
	font-size: 0.6rem;
	color: var(--lr-gris, #6b6860);
	pointer-events: none;
}

.lr-splits--both .lr-splits__tick {
	left: auto;
	right: -2px;
	padding: 0 2px;
	background: color-mix(in srgb, var(--lr-blanc) 80%, transparent);
	color: var(--lr-fc);
}

.lr-splits__cursor {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px solid color-mix(in srgb, var(--lr-texte, #16161a) 35%, transparent);
	pointer-events: none;
}

.lr-splits__dot {
	position: absolute;
	left: 0;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--lr-fc);
	transform: translate(-50%, 50%);
}

.lr-splits--fc .lr-splits__plot {
	cursor: crosshair;
	touch-action: pan-y;
}

.lr-splits__axis {
	display: flex;
	margin-top: 5px;
	font-family: var(--lr-mono);
	font-size: 0.64rem;
	color: var(--lr-gris, #6b6860);
	text-align: center;
}

.lr-splits__axis span {
	min-width: 0;
	flex-basis: 0;
}

.lr-splits__axis.is-abs {
	position: relative;
	height: 1.1em;
}

.lr-splits__axis .is-abs {
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

.lr-splits__axis .is-end {
	transform: translateX(-100%);
	padding-left: 0.5em;
	background: var(--lr-blanc);
}

.lr-splits__tip {
	min-height: 1.3em;
	margin: 0.6rem 0 0;
	font-family: var(--lr-mono);
	font-size: 0.74rem;
	line-height: 1.4;
}

.lr-splits__legend {
	margin: 0.3rem 0 0;
	font-size: 0.72rem;
	color: var(--lr-gris, #6b6860);
}

@media (max-width: 600px) {
	.lr-splits__plot {
		height: 150px;
	}

	.lr-split {
		padding-inline: 1.5px;
	}

	.lr-split__v {
		font-size: 0.58rem;
	}

	.lr-splits--both .lr-splits__tick {
		display: none;
	}
}

/* =========================================================================
   17. Bornes km dans le texte : [3ème km]
   ========================================================================= */

.lr-kmref,
.lr-prose a.lr-kmref {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.lr-kmref__borne {
	display: inline-block;
	width: auto;
	height: 1.3em; /* La largeur suit (viewBox). */
	margin-right: 0.3em;
	vertical-align: -0.28em;
	overflow: visible;
	transition: transform 0.15s;
}

.lr-kmref__body {
	fill: #fff;
	stroke: currentColor;
	stroke-width: 1.2;
}

.lr-kmref__cap {
	fill: var(--lr-race);
}

.lr-kmref__borne text {
	font-family: var(--lr-mono);
	font-size: 9.5px;
	font-weight: 700;
	fill: #16161a;
}

.lr-kmref:hover .lr-kmref__borne,
.lr-kmref:focus-visible .lr-kmref__borne {
	transform: translateY(-2px);
}