/**
 * Itinéraires sportifs, affichage public.
 * Charte Île-de-France Nature. Conception pensée pour le téléphone d'abord :
 * le public consultera surtout ces pages dehors, sur place.
 */

/*
 * Les tailles sont en pixels, pas en rem. Le thème du client règle la racine
 * à 62,5 %, une convention répandue où « 1rem = 10px » : le module, dessiné
 * sur une racine de 16 px, y perdait 37 % de sa taille, et les libellés des
 * mesures tombaient à 6,8 px. Le pixel est ici le seul repère qui ne dépende
 * pas du site d'accueil.
 */

/* ------------------------------------------------------------------ */
/* Typographie de la charte                                            */
/* ------------------------------------------------------------------ */

/*
 * TT Hoves pour le texte, Arya Single pour les titres de parcours. Ce sont
 * les polices de la charte, déjà embarquées dans la carte de vœux du client :
 * le module ne fait que les reprendre, il n'en introduit pas de nouvelle.
 *
 * Seul le woff2 est servi. Le woff n'apporterait qu'Internet Explorer et
 * doublerait le poids ; « swap » laisse le texte lisible pendant le
 * chargement plutôt que de le masquer.
 *
 * ⚠ Polices sous licence. TT Hoves est une police commerciale de TypeType,
 * Arya vient de la charte : leur usage en ligne suppose une licence web au
 * nom d'Île-de-France Nature, à confirmer avant la mise en production. Elles
 * sont ici parce que le client les emploie déjà sur ses pages.
 */
@font-face {
	font-family: 'TT Hoves';
	src: url('../polices/tt-hoves-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TT Hoves';
	src: url('../polices/tt-hoves-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Arya Single';
	src: url('../polices/arya-single.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*
 * La police du module, posée sur chaque descendant et pas seulement sur la
 * racine. L'héritage ne suffit pas : le thème du client écrit « Signika
 * Negative » sur des sélecteurs d'éléments — « a », « li », « p », « label »,
 * « .entry-content h1 » — qui l'emportent sur une police héritée d'un parent.
 * Le module est rendu à l'intérieur de « .entry-content », il en héritait donc
 * partout sauf là où ça se voit.
 *
 * La classe est doublée pour peser plus lourd que « .entry-content p » sans
 * recourir à « !important », qu'il faudrait ensuite surenchérir.
 */
.idfn-page.idfn-page,
.idfn-page.idfn-page * {
	font-family: 'TT Hoves', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/*
 * Le thème ne repeint pas que la police : il pose aussi sa couleur sur « p »
 * et sur « a ». Deux endroits du module comptaient sur l'héritage et se
 * retrouvaient en gris : le compteur, blanc sur le bandeau bordeaux, et la
 * pastille « Plus d'infos », verte sur la ligne. Même parade, classe doublée.
 */
.idfn-page.idfn-page .idfn-compteur {
	color: #fff;
	font-weight: 700;
}


/* Les titres de parcours gardent Arya Single : classe doublée elle aussi,
   sinon la règle générale ci-dessus les reprendrait. */
.idfn-page.idfn-page .idfn-bulle__titre,
.idfn-page.idfn-page .idfn-fiche__titre {
	font-family: 'Arya Single', 'TT Hoves', sans-serif;
}

/*
 * Le thème souligne les liens au survol et leur impose sa couleur. Dans le
 * module, un lien n'est jamais du texte courant : c'est une pastille ou un
 * bouton, que le soulignement barre de travers. Neutralisé ici une fois pour
 * toutes, plutôt que bouton par bouton.
 */
.idfn-page.idfn-page a,
.idfn-page.idfn-page a:hover,
.idfn-page.idfn-page a:focus,
.idfn-page.idfn-page a:focus-visible,
.idfn-page.idfn-page button,
.idfn-page.idfn-page button:hover,
.idfn-page.idfn-page button:focus,
.idfn-page.idfn-page button:focus-visible,
.idfn-page.idfn-page button:hover span,
.idfn-page.idfn-page button:focus span {
	text-decoration: none;
}

/*
 * Couleur des liens du module. Le thème la pose avec « !important » sur son
 * groupe « .color-accent », qui attrape tous les liens de la page : c'est le
 * seul cas de cette feuille où il faut répondre de la même façon, aucune
 * spécificité ne l'emportant sur un « important ». Le bouton du GPX sortait
 * en gris sur fond vert, et « Plus d'infos » en gris sur blanc.
 */
.idfn-page.idfn-page .idfn-bouton-gpx,
.idfn-page.idfn-page .idfn-bouton-gpx:hover,
.idfn-page.idfn-page .idfn-bouton-gpx:focus {
	color: #fff !important;
}

.idfn-page.idfn-page .idfn-item__infos {
	color: var(--idfn-vert) !important;
}

.idfn-page.idfn-page .idfn-item__infos:hover,
.idfn-page.idfn-page .idfn-item__infos:focus-visible {
	color: #fff !important;
}

/* La description est un paragraphe, repeint en gris par le thème comme le
   compteur l'était. */
.idfn-page.idfn-page .idfn-fiche__resume {
	color: var(--idfn-vert);
}

/* Le thème pose son propre interligne et ses marges sur les « p ». Classe
   doublée pour peser autant que lui, sinon la description reprend l'aération
   du thème et les réglages ci-dessous ne servent à rien. */
.idfn-page.idfn-page .idfn-fiche__resume,
.idfn-page.idfn-page .idfn-fiche__resume p {
	line-height: 1.1em;
}

.idfn-page.idfn-page .idfn-fiche__resume p {
	margin: 0;
	color: var(--idfn-vert);
}

.idfn-page.idfn-page .idfn-fiche__resume p + p {
	margin-top: 0.825em;
}

/* Le titre de la fiche est un « h2 » : le thème le repeint en gris et lui
   pose 35 px de marge haute, qui creusaient un vide sous la photo. */
.idfn-page.idfn-page .idfn-fiche__titre {
	margin: 0 0 8px;
	color: var(--idfn-vert);
}

.idfn-page {
	/* Couleurs de la charte, prélevées dans les aplats de la page 18 : les
	   valeurs CMJN et RVB imprimées sous les échantillons sont toutes
	   identiques, un défaut du document, elles ne sont pas exploitables. */
	--idfn-vert: #1B5016;        /* vert foncé, principale */
	--idfn-lime: #7BA92D;        /* vert olive, principale */
	--idfn-bordeaux: #8B1A1E;    /* rouge bordeaux, principale */
	--idfn-orange: #F89C0E;      /* orange, principale */
	--idfn-gris: #6b6f68;
	--idfn-bord: #e2e5e0;
	--idfn-fond: #f7f8f6;
	/* Couleur du bandeau des filtres. Le texte des puces cochées la reprend :
	   changer l'une change l'autre, elles ne peuvent plus se contredire.
	   Essai en cours au vert foncé ; remettre --idfn-bordeaux pour revenir. */
	--idfn-bandeau: #1B5016;

	font-size: 16px;
	line-height: 1.55;
	color: #2c2c2c;
}

/* Les thèmes contraignent la largeur du contenu, souvent autour de 620 px.
   Une carte de 50 itinéraires y est illisible, le module sort donc de cette
   contrainte. La largeur utile est mesurée en JavaScript (--idfn-fenetre) :
   « 100vw » inclut la barre de défilement et provoque un débordement.
   Sans JavaScript, on reste sagement dans la largeur du contenu. */
.idfn-page--pleine {
	--idfn-fenetre: 100%;
	width: var(--idfn-fenetre);
	max-width: var(--idfn-fenetre);
	margin-left: var(--idfn-decalage, 0);
	padding-inline: clamp(14px, 3vw, 48px);
}

/* Au-delà, l'œil ne suit plus d'un bord à l'autre. La lightbox et le bloc de
   définitions SVG sont hors flux : les brider ici revenait à couper le voile
   de la lightbox à 1560 px et à le centrer, au lieu de couvrir l'écran. */
.idfn-page--pleine > *:not(.idfn-modale):not(.idfn-defs) {
	max-width: 1560px;
	margin-inline: auto;
}

.idfn-page,
.idfn-page *,
.idfn-page *::before,
.idfn-page *::after {
	box-sizing: border-box;
}

/* Toute règle « display » l'emporte sur l'attribut hidden, qui n'est qu'une
   valeur par défaut du navigateur. Le cas s'est présenté deux fois — le badge
   du bouton de filtres, puis « Réinitialiser », tous deux visibles alors que
   le script les avait masqués. Réglé une bonne fois pour l'ensemble du bloc. */
.idfn-page [hidden] {
	display: none !important;
}

/* Les thèmes de blocs posent `:where(.wp-site-blocks :focus) { outline: 2px
   solid }`, sans couleur : l'anneau prend donc celle du texte et cerne de noir
   tout élément cliqué à la souris. Comme `:where()` ne pèse rien, la moindre
   règle l'emporte. On ne retire l'anneau que lorsque le navigateur juge
   lui-même qu'il n'a pas lieu d'être, c'est-à-dire à la souris : au clavier,
   `:focus-visible` reste et chaque élément a son liseré orange. */
.idfn-page :focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------------ */
/* Barre de filtres                                                    */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Panneau : bandeau, carte et liste en une seule pièce                */
/* ------------------------------------------------------------------ */

/* Les plans imprimés d'Île-de-France Nature posent un bandeau de couleur
   pleine sur la carte, sans marge ni arrondi. On reprend ce principe : le
   bandeau des filtres coiffe la carte et la liste, les trois blocs sont
   collés, et l'ensemble se lit comme un panneau et non comme trois modules. */
/* Aucun cadre autour du panneau : les plans imprimés ne cernent pas leurs
   blocs, ils les juxtaposent à fond perdu. */
.idfn-panneau {
	background: #fff;
	overflow: hidden;
}

.idfn-bandeau {
	position: relative;
	background: var(--idfn-bandeau);
	color: #fff;
	padding: 14px 18px 16px;
}

.idfn-bandeau__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}

.idfn-compteur {
	font-weight: 700;
	color: #fff;
	margin: 0;
	letter-spacing: 0.01em;
}

.idfn-filtres {
	display: flex;
	flex-wrap: wrap;
	/* Écart vertical aligné sur celui qui sépare le compteur du premier
	   groupe : quand les filtres passent à la ligne, la respiration reste la
	   même du haut en bas du bandeau. L'écart horizontal, lui, tient au filet
	   qui sépare deux groupes voisins. */
	gap: 12px 14px;
	/* Les groupes s'étirent à la même hauteur : sans cela le filet qui les
	   sépare ne courait que sur la hauteur du plus court. */
	align-items: stretch;
}

.idfn-filtre {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/*
 * Filet entre groupes : ils se combinent, ils ne s'excluent pas, et rien ne le
 * disait. Il est posé à droite du groupe et non à gauche du suivant : ainsi un
 * groupe qui ouvre une ligne se cale toujours au fer à gauche, sans qu'aucune
 * mesure n'ait à lui retirer son rembourrage — c'est ce retrait qui faisait
 * osciller la mise en page.
 */
.idfn-filtre:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.25);
	padding-right: 18px;
}

/*
 * Posée par le script quand un groupe passe à la ligne. Seule la couleur du
 * filet change, jamais le rembourrage : le retirer modifiait la largeur du
 * groupe, donc le retour à la ligne, donc la classe elle-même. La mise en page
 * oscillait autour de 1580 px de large, et le filet clignotait.
 */
.idfn-filtre.sans-filet {
	border-right-color: transparent;
}

/*
 * La pratique prend la ligne entière, le niveau et les particularités se
 * rangent en dessous, ensemble. Sans cela, « Particularités » descendait seul
 * et laissait un grand vide à droite du niveau.
 *
 * Le module est plafonné à 1 560 px de large, largeur atteinte à partir
 * d'une fenêtre de 1 600 px : au-delà, la place ne change plus. Les trois
 * groupes y tiennent tout juste, l'écart entre eux ayant été ramené de 18 à
 * 14 px pour gagner les huit pixels qui manquaient. En dessous de 1 600, ils
 * ne tiennent plus et la règle s'applique.
 */
@media (max-width: 1599px) {
	.idfn-filtre--pratique {
		flex-basis: 100%;
	}

	/*
	 * Le niveau ouvre alors la deuxième ligne : ni filet ni retrait, il se
	 * cale au même fer que la pratique au-dessus. C'est écrit ici, dans la
	 * requête de média, et non laissé au script : la largeur de la fenêtre
	 * ne dépend pas de la mise en page, donc rien ne peut osciller.
	 */
	.idfn-filtre--pratique {
		border-right: 0;
		padding-right: 0;
	}
}

.idfn-filtre legend {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	padding: 0 0 6px;
}

.idfn-choix {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.idfn-puce {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* La case reste accessible au clavier et au lecteur d'écran : on la masque
   visuellement sans la retirer du flux d'accessibilité. */
.idfn-puce input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dans le bandeau, tout est blanc : libellés, liserés, légendes. La puce est
   donc un contour et non une pastille pleine, et son texte reste gras et blanc
   qu'elle soit cochée ou non — une graisse ou une couleur qui change au clic
   fait bouger ou clignoter la ligne. */
.idfn-puce span {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #fff;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-weight: 700;
	font-size: 13.8px;
	line-height: 1.2;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	/* cible tactile confortable */
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.idfn-puce span svg {
	flex: 0 0 auto;
}

/* Cochée, la puce s'inverse : aplat blanc, texte dans le bordeaux du bandeau.
   L'inversion se lit à toutes les échelles et ne dépend plus de la couleur du
   filtre, ce qui réglait au passage le cas d'« Ultra », dont la teinte est
   exactement celle du fond. */
.idfn-puce input:checked + span {
	background: #fff;
	color: var(--idfn-bandeau);
}

/*
 * Les puces de niveau portent leur couleur de difficulté dès le repos : ce
 * sont les mêmes repères que les pastilles de la carte et les étiquettes des
 * fiches, et les montrer d'emblée dit au lecteur ce que veut dire chaque
 * couleur. Cochées ou survolées, elles s'inversent : aplat blanc, texte dans
 * leur couleur. Les autres puces gardent le contour blanc.
 */
.idfn-puce input[name="niveau"] + span {
	color: #fff;
	border-color: transparent;
}

.idfn-puce input[name="niveau"][value="amateur"] + span {
	background: #7BA92D;
}

.idfn-puce input[name="niveau"][value="confirme"] + span {
	background: #F89C0E;
}

.idfn-puce input[name="niveau"][value="ultra"] + span {
	background: #A8437F;
}

.idfn-puce input[name="niveau"]:checked + span,
.idfn-puce:hover input[name="niveau"] + span {
	background: #fff;
}

.idfn-puce input[name="niveau"][value="amateur"]:checked + span,
.idfn-puce:hover input[name="niveau"][value="amateur"] + span {
	color: #7BA92D;
}

.idfn-puce input[name="niveau"][value="confirme"]:checked + span,
.idfn-puce:hover input[name="niveau"][value="confirme"] + span {
	color: #F89C0E;
}

.idfn-puce input[name="niveau"][value="ultra"]:checked + span,
.idfn-puce:hover input[name="niveau"][value="ultra"] + span {
	color: #A8437F;
}

.idfn-puce input:focus-visible + span {
	outline: 3px solid var(--idfn-orange);
	outline-offset: 2px;
}

/* Au survol, la puce prend exactement l'aspect qu'elle aura une fois cochée :
   le geste montre son résultat avant le clic. Les niveaux ont leur propre
   règle plus haut, ils s'inversent au lieu de se remplir. */
.idfn-puce:hover span {
	background: #fff;
	color: var(--idfn-bandeau);
}



.idfn-reinit {
	/*
	 * Aligné sur la rangée de puces, pas sur le bloc entier : les groupes
	 * portent un titre au-dessus de leurs puces, un centrage sur toute leur
	 * hauteur plaçait le bouton trop haut. En lui donnant la hauteur d'une
	 * puce et en le calant en bas, son texte tombe à la même ligne optique.
	 */
	align-self: flex-end;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 13.8px;
	/* Graisse posée explicitement : le thème hérite d'un 300, plus maigre que
	   le corps de texte. */
	font-weight: 700;
	position: relative;
}

/*
 * Soulignement absent au repos, tracé de la gauche vers la droite au survol.
 * Il était présent en permanence, ce qui faisait passer le bouton pour un
 * lien de texte, et il flottait trop haut sous les lettres.
 *
 * Posé en pseudo-élément et non en `text-decoration`, qui ne s'anime pas.
 */
.idfn-reinit::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.idfn-reinit:hover::after,
.idfn-reinit:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Sans animation demandée par le système, le trait apparaît sans se déployer. */
@media (prefers-reduced-motion: reduce) {
	.idfn-reinit::after {
		transition: none;
	}
}

/*
 * « Réinitialiser » se cale en haut à droite du bandeau sur grand écran, sur
 * la ligne du compteur, où la place est libre. En dessous de 900 px, le
 * bandeau se resserre et le bouton reprend son rang, en fin de formulaire.
 *
 * Ce bloc vient après les règles du bouton, et non avant : la déclaration de
 * base le remettait en flux, position égale et écrite plus bas.
 */
@media (min-width: 901px) {
	.idfn-reinit {
		position: absolute;
		top: 16px;
		right: 18px;
		align-self: auto;
		min-height: 0;
	}
}

/* Bouton de repli des filtres, en mobile seulement. Il reste caché tant que le
   script ne l'a pas révélé : sans lui, il masquerait des filtres que rien ne
   pourrait rouvrir. */
/* Même logique que les puces de filtre : contour blanc au repos, inversion en
   blanc et bordeaux une fois ouvert. Aucun voile translucide, qui donnait au
   bouton une teinte flottante entre les deux états. */
.idfn-bascule {
	display: none;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 8px 14px;
	min-height: 40px;
	font: inherit;
	font-size: 13.8px;
	font-weight: 700;
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.idfn-bascule:hover,
.idfn-bascule[aria-expanded="true"] {
	background: #fff;
	color: var(--idfn-bandeau);
}

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

.idfn-bascule__compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 100px;
	background: #fff;
	color: var(--idfn-bandeau);
	font-size: 11.8px;
}

/* Le badge s'inverse avec son bouton, sinon il disparaîtrait dans le blanc. */
.idfn-bascule:hover .idfn-bascule__compte,
.idfn-bascule[aria-expanded="true"] .idfn-bascule__compte {
	background: var(--idfn-bandeau);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Carte et liste                                                      */
/* ------------------------------------------------------------------ */

.idfn-corps {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: stretch;
}

.idfn-carte {
	/* La carte occupe la hauteur utile de l'écran, sans dépasser : le visiteur
	   doit voir la carte et le début de la liste sans faire défiler. */
	height: clamp(420px, 68vh, 760px);
	background: var(--idfn-fond);
	overflow: hidden;
}

/* Le réseau routier reste lisible, il sert de repère. La carte tire seulement
   vers le vert plutôt que vers l'orange : ce sont des espaces naturels qu'on
   donne à voir, et les tracés doivent rester ce qui accroche l'œil. */
/* Les filtres portent sur les tuiles, pas sur leur conteneur. Le conteneur de
   Leaflet a une boîte de 0 × 0 (ses tuiles sont en positionnement absolu), or
   un filtre SVG `url()` calcule sa région de travail à partir de cette boîte :
   région vide, filtre appliqué par morceaux selon le découpage du compositeur,
   d'où des massifs traités et d'autres restés pâles dans la même vue. Chaque
   tuile, elle, mesure bien 256 px. */
.idfn-tuiles-plan .leaflet-tile {
	filter: saturate(0.78) hue-rotate(8deg) brightness(1.05) contrast(0.93) url(#idfn-verts);
}

/* Les fonds déjà sobres n'ont pas besoin d'être corrigés : seuls leurs verts,
   très pâles, sont densifiés. Le filtre est défini dans le gabarit de la page. */
.idfn-tuiles-sobre .leaflet-tile {
	filter: url(#idfn-verts);
}

/* Le filtre n'est rien d'autre qu'une définition : il ne doit occuper aucune
   place dans la page. Classe distincte de « .idfn-filtres », qui est le
   formulaire : les deux se sont percutées, et le formulaire disparaissait. */
.idfn-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* L'ombrage du relief se fond dans le plan sans le griser. */
.idfn-tuiles-relief {
	mix-blend-mode: multiply;
	filter: contrast(0.8);
	pointer-events: none;
}

/* Les courbes de niveau donnent la lecture du relief, discrètement. */
.idfn-tuiles-courbes {
	mix-blend-mode: multiply;
	filter: saturate(0.4) brightness(1.1);
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Pastilles de départ                                                 */
/* ------------------------------------------------------------------ */

.idfn-pastille-hote {
	background: none;
	border: 0;
}

.idfn-pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	border: 2.5px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.leaflet-marker-icon:hover .idfn-pastille,
.leaflet-marker-icon:focus-visible .idfn-pastille {
	transform: scale(1.16);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
}

.leaflet-marker-icon:focus-visible {
	outline: 3px solid var(--idfn-orange);
	outline-offset: 3px;
	border-radius: 50%;
}

/* La pastille du parcours choisi : cerne vert épaissi, en plus de
   l'agrandissement. Un liseré de 2,5 px se perdait sur un fond de carte
   chargé, à la taille où la pastille est déjà agrandie. */
.leaflet-marker-icon.est-actif .idfn-pastille {
	transform: scale(1.24);
	border-width: 4px;
	border-color: var(--idfn-vert);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/*
 * La carte est enfermée dans son propre contexte d'empilement.
 *
 * Leaflet numérote ses couches jusqu'à 1000 : ses commandes de zoom passaient
 * devant l'en-tête du site, dont le contexte vaut 100, et les sous-menus du
 * menu principal disparaissaient derrière la carte. Le « z-index: 0 » ne
 * déplace rien à l'écran, il referme la numérotation de Leaflet sur cette
 * zone, qui prend alors rang derrière l'en-tête.
 *
 * La fenêtre de détail n'est pas concernée : elle est en dehors de cette
 * zone, en position fixe, et garde son propre rang.
 */
.idfn-zone-carte {
	position: relative;
	z-index: 0;
	min-width: 0;
}

.idfn-carte__attente,
.idfn-carte__erreur {
	padding: 20px;
	color: var(--idfn-gris);
	text-align: center;
}

/* Titre au survol d'une pastille. Il reprend la voix des titres de la charte :
   capitales, vert foncé, gras, et un cran plus gros (1,08 em) que le corps de
   Leaflet, qui est menu. Un peu d'air à gauche et à droite, sinon les
   capitales touchent le bord de la bulle. Celle-ci reste au blanc par défaut
   de Leaflet. */
.idfn-page .leaflet-tooltip {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 16px;
	color: var(--idfn-vert);
	padding: 6px 10px;
	/* Angles vifs comme les autres blocs du module, et blanc franc : Leaflet
	   arrondit à 3 px et pose une opacité de 0,9 en ligne, levée à la pose de
	   l'infobulle. La flèche est un bord de pseudo-élément, elle se peint
	   séparément. */
	border-radius: 0;
	background-color: #fff;
	/* Leaflet cerne ses infobulles d'un filet blanc d'un pixel. Il ne se voyait
	   pas sur un fond blanc, mais il ménageait une marge autour de l'aperçu :
	   l'image touche maintenant les bords. */
	border: 0;
	/* Leaflet impose une ligne insécable : l'aperçu se place au-dessus du
	   titre, il faut donc rendre la bulle à un flux normal. */
	white-space: normal;
	padding: 0;
}

/* Bulle avec aperçu : l'image occupe toute la largeur, le titre se pose
   dessous.

   Largeur fixe, et non un simple maximum : une infobulle est positionnée en
   absolu, elle se réduit alors à son mot le plus long dès qu'elle n'a pas
   d'image pour la tenir. « Bout du monde » sortait sur 69 px, un mot par
   ligne. Les bulles ont donc toutes la même largeur, avec ou sans photo.

   Largeur ramenée à 180 px : l'aperçu est un repère au survol, pas une
   illustration, et il encombrait la carte. Le titre suit la même largeur, la
   bulle restant d'un seul tenant. */
.idfn-bulle {
	display: block;
	width: 180px;
}

.idfn-bulle__photo {
	display: block;
	width: 180px;
	height: 101px; /* 16/9, le cadrage des photos */
	object-fit: cover;
}

/* Titre resserré : en capitales, un interligne de 1,5 écarte trop les lignes
   d'un titre qui en fait deux ou trois. La hauteur perdue revient en marge
   haute et basse, pour que le texte ne colle ni à l'image ni au bord. */
.idfn-bulle__titre {
	display: block;
	/* Moins de rembourrage en bas qu'en haut : la descente de la police creuse
	   déjà l'espace sous la ligne, et les deux marges paraissaient inégales. */
	padding: 9px 10px 6px;
	line-height: 1.2;
	/* Arya Single, comme sur les plans imprimés : le nom du parcours se
	   distingue du reste, qui est en TT Hoves. */
	font-family: 'Arya Single', 'TT Hoves', sans-serif;
}

.idfn-page .leaflet-tooltip-top::before {
	border-top-color: #fff;
}

.idfn-page .leaflet-tooltip-bottom::before {
	border-bottom-color: #fff;
}

/* La liste défile, le retour à la vue d'ensemble non : après avoir suivi
   quelques itinéraires on est quelque part au milieu de cinquante lignes, et
   le bouton doit rester sous la main. D'où la colonne en trois parties, la
   liste au milieu qui prend le défilement, le pied collé en bas du cadre. */
.idfn-liste {
	display: flex;
	flex-direction: column;
	max-height: clamp(420px, 68vh, 760px);
	overflow: hidden;
	/* Le fond de la liste est vert : quand il n'y a qu'un ou deux résultats,
	   ou aucun, l'espace laissé sous les lignes se raccorde au pied plutôt
	   que de laisser une plage blanche. Les lignes, elles, restent blanches.
	   Le pied et le message « aucun résultat » ne repeignent rien : un second
	   calque à 5 % posé par-dessus donnait deux verts différents. */
	background: rgba(27, 80, 22, 0.05);
}

.idfn-liste__items {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
	/* La liste défile dans son cadre, et pourtant ses cinquante lignes
	   allongeaient la hauteur défilable de la PAGE de plus de mille sept cents
	   pixels : une hauteur fantôme, invisible mais bien présente dans la barre
	   de défilement. Cocher un filtre la faisait disparaître d'un coup, et le
	   navigateur, ne pouvant plus descendre aussi bas, remontait la fenêtre.
	   D'où l'écran qui sautait au clic sur un filtre, quand on avait fait
	   défiler la page. Le confinement de peinture arrête cette propagation :
	   ce qui dépasse du cadre ne compte plus dans la page. Sans effet de bord
	   ici, la liste est bornée en hauteur à toutes les largeurs et ne contient
	   aucun élément qui doive en sortir. */
	contain: paint;
}

.idfn-liste__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Le rang porte deux actions : le corps recentre la carte, « Plus d'infos »
   ouvre la fiche. Elles sont côte à côte pour rester distinctes au clic. */
.idfn-item {
	background: #fff;
	border-bottom: 1px solid var(--idfn-bord);
	display: flex;
	align-items: stretch;
	gap: 0;
	/* La sélection se déplace d'une ligne à l'autre au fil des clics et du
	   cadrage de la carte : la teinte se pose en fondu plutôt que d'un coup,
	   l'œil suit le déplacement. Les filets suivent le même fondu, sans quoi
	   ils blanchiraient avant que le fond n'arrive. Le survol emprunte la
	   même durée. La règle globale de réduction des animations, en fin de
	   feuille, neutralise le tout. */
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.idfn-item:last-child {
	border-bottom: 0;
}

.idfn-item__bouton {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	background: none;
	border: 0;
	padding: 12px 14px;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

/* Puce de la pratique, aux couleurs de son tracé sur la carte : la liste et
   la carte se lisent d'un même coup d'œil. */
.idfn-item__picto {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
}

.idfn-item__texte {
	min-width: 0;
}

/*
 * Survol et sélection se signalent par un cadre, pas par un fond : le survol
 * en vert de la charte, la sélection dans la couleur du niveau, la même que
 * la pastille de la ligne et que son tracé sur la carte.
 *
 * Le cadre est une ombre intérieure et non une bordure : une bordure ajouterait
 * deux pixels à la hauteur du rang, et toute la liste sauterait au passage de
 * la souris.
 */
.idfn-item:hover:not(.est-actif) {
	box-shadow: inset 0 0 0 1px var(--idfn-vert);
}

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

/* La ligne sélectionnée prend la teinte de son niveau, la même que sa pastille
   et que son tracé sur la carte : on retrouve d'un coup d'œil, dans une liste
   filtrée, l'itinéraire qui est cadré. Un aplat à 14 % laisse le texte lisible ;
   la couleur pleine descend du modèle en variable. Repli pour les navigateurs
   sans `color-mix` : l'ancien vert très clair. */
.idfn-item.est-actif {
	background: #eef2e3;
	background: color-mix(in srgb, var(--idfn-niveau, #7BA92D) 14%, #fff);
	box-shadow: inset 0 0 0 1px var(--idfn-niveau, #7BA92D);
}

/* Aucun filet autour de la ligne active : son cadre coloré suffit à la
   détacher, et le liseré blanc qui l'encadrait ajoutait un trait de plus.
   Les filets sont rendus transparents plutôt que retirés, sinon la ligne
   perdrait un pixel de hauteur et la liste sauterait au changement de
   sélection. Celui du haut appartient à la ligne précédente, d'où le `:has`. */
.idfn-item.est-actif,
.idfn-item:has( + .idfn-item.est-actif ) {
	border-bottom-color: transparent;
}

/* Appel à l'action de la fiche : une pastille posée dans la ligne, centrée
   verticalement, plutôt qu'une case qui découperait le rang en deux. */
.idfn-item__infos {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	margin-right: 12px;
	padding: 11px 14px;
	font-size: 12.8px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	color: var(--idfn-vert);
	background: #fff;
	border: 1px solid var(--idfn-vert);
	border-radius: 100px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.idfn-item__infos:hover,
.idfn-item__infos:focus-visible {
	background: var(--idfn-vert);
	color: #fff;
	text-decoration: none;
}

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

/* Retour à la vue d'ensemble : posé en bas du cadre, hors de la zone qui
   défile. Le vert foncé de la charte à dix pour cent le détache de la liste
   sans refermer le panneau sur un aplat plein. */
.idfn-liste__pied {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 14px;
}

.idfn-tout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	justify-content: center;
	padding: 10px 16px;
	font: inherit;
	font-size: 13.8px;
	font-weight: 700;
	color: var(--idfn-vert);
	background: #fff;
	border: 1px solid var(--idfn-vert);
	border-radius: 100px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.idfn-tout:hover,
.idfn-tout:focus-visible {
	background: var(--idfn-vert);
	color: #fff;
}

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

/* Sur les listes étroites, le libellé disparaît et seul le chevron reste :
   la ligne garde sa place pour le titre et les chiffres. */
@media (max-width: 480px) {
	.idfn-item__bouton {
		gap: 10px;
	}

	.idfn-item__infos {
		margin-right: 10px;
		/* Même respiration verticale qu'en grand écran : seule la largeur se
		   resserre sur les listes étroites. */
		padding: 10px 11px;
		font-size: 12px;
	}
}

.idfn-item__titre {
	display: block;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	color: var(--idfn-vert);
	margin-bottom: 2px;
}

.idfn-item__chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 13.4px;
	/* Les mesures passent au vert de la charte comme le titre au-dessus : la
	   ligne se lit d'un bloc, et le gris ne servait qu'à les mettre en retrait
	   d'un titre qui est déjà distingué par sa graisse. */
	color: var(--idfn-vert);
}

/* Une mesure : son pictogramme et sa valeur ne se séparent jamais. */
.idfn-mesure {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.idfn-mesure svg {
	flex: 0 0 auto;
	opacity: 0.75;
}

/* Aucun résultat : le message occupe la place de la liste, centré, sur le même
   fond que le bouton qui le suit — les deux forment le pied du panneau quand
   il n'y a rien à montrer. La liste est masquée plutôt que laissée vide, sinon
   elle continuait de réclamer sa hauteur et repoussait le message vers le bas. */
.idfn-aucun {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 24px 18px;
	text-align: center;
	color: var(--idfn-vert);
	font-weight: 600;
}

.idfn-liste.est-vide .idfn-liste__items {
	display: none;
}

.idfn-vide {
	padding: 18px;
	color: var(--idfn-gris);
	text-align: center;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Encart de l'itinéraire sélectionné                                  */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Fenêtre de détail                                                   */
/* ------------------------------------------------------------------ */

.idfn-modale {
	position: fixed;
	inset: 0;
	/* Aucune largeur de contenu ne s'applique à un voile : il couvre la
	   fenêtre, quelle que soit la mise en page qui l'entoure. */
	max-width: none;
	margin-inline: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.idfn-modale[hidden] {
	display: none;
}

.idfn-modale__fond {
	position: absolute;
	inset: 0;
	background: rgba(20, 30, 20, 0.62);
}

.idfn-modale__panneau {
	position: relative;
	background: #fff;
	border-radius: 0;
	width: min(1080px, 100%);
	max-height: min(88vh, 860px);
	overflow-y: auto;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
}

/* Aucun liseré sur le panneau : le focus lui est donné par le script à
   l'ouverture, pour que la lecture d'écran entre dans la fenêtre, et le
   navigateur le traitait comme un focus clavier — d'où un cadre orange autour
   d'une partie de la lightbox. La fenêtre est déjà signalée par elle-même ;
   les liserés restent sur les éléments réellement actionnables. */
.idfn-modale__panneau:focus,
.idfn-modale__panneau:focus-visible {
	outline: none;
}

.idfn-modale__fermer {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Pastille pleine au repos, creuse au survol : posée sur la photo de la
	   fiche, une croix vert sur blanc se perdait dans les zones claires. */
	background: var(--idfn-vert);
	border: 1px solid var(--idfn-vert);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.idfn-modale__fermer:hover {
	background: #fff;
	color: var(--idfn-vert);
}

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

/* La page derrière ne défile plus quand la fenêtre est ouverte. */
body.idfn-modale-ouverte {
	overflow: hidden;
}

.idfn-fiche {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	background: #fff;
	overflow: hidden;
}

/* Sur la page d'un itinéraire, la fiche garde son cadre. */
.idfn-fiche:not(.idfn-modale__contenu .idfn-fiche) {
	border: 1px solid var(--idfn-bord);
}

.idfn-fiche__infos {
	padding: 20px 22px;
}

/* Titre en capitales grasses, comme les titres des plans imprimés. La bascule
   est typographique et non textuelle : le titre reste saisi normalement en
   administration, et la lecture d'écran l'énonce tel quel plutôt que d'épeler
   des capitales. */
.idfn-fiche__titre {
	font-family: 'Arya Single', 'TT Hoves', sans-serif;
	margin: 0 0 6px;
	font-size: 19.8px;
	/* Arya Single porte déjà le titre : le gras l'épaissit sans le distinguer
	   davantage, la police n'étant pas dessinée pour cela. */
	font-weight: 400;
	line-height: 1.24;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--idfn-vert);
}

.idfn-fiche__resume {
	margin: 0 0 20px;
	color: var(--idfn-vert);
	line-height: 1.1em;
}

/* La description est découpée en vrais paragraphes, un par bloc de texte du
   client. L'écart entre eux valait un interligne plein, du temps des doubles
   « br » ; il est ramené au quart en moins, soit 0,825 em pour un interligne
   de 1,1. Le premier paragraphe ne porte rien : c'est le blanc entre deux
   paragraphes qu'on règle, pas le blanc au-dessus du texte. */
.idfn-fiche__resume p {
	margin: 0;
}

.idfn-fiche__resume p + p {
	margin-top: 0.825em;
}

/* Les étiquettes sont passées sous le titre : l'écart qui les séparait des
   chiffres n'a plus lieu d'être là, il revient à la description, qui précède
   désormais les chiffres. */
.idfn-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

.idfn-etiquette {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 7px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--idfn-vert);
	border: 1px solid var(--idfn-vert);
	/* Les capitales n'occupent pas la hauteur que leur ligne réserve : sans
	   interligne serré, elles se posent haut dans la pastille et le
	   rembourrage égal des deux côtés ne se voit pas. */
	line-height: 1;
}

.idfn-etiquette svg {
	flex: 0 0 auto;
}

/* Les niveaux portent leur couleur de difficulté, la même que dans les filtres
   et sur les pastilles de la carte : vert olive, orange, rouge corail. En plein
   plutôt qu'en contour, pour qu'on distingue au premier regard ce qui relève de
   la pratique et ce qui relève de l'effort. */
.idfn-etiquette--niveau {
	color: #fff;
	border-color: transparent;
}

/* Strava Art : étiquette pleine au vert de la charte. Elle ne reprend aucune
   des trois couleurs de difficulté, qui disent l'effort ; le dessin est d'un
   autre ordre. */
.idfn-etiquette--art {
	color: #fff;
	background: var(--idfn-vert);
	border-color: transparent;
}

/* Accès en transports : même aplat vert plein que le Strava Art. Les deux
   étiquettes disent une propriété de l'itinéraire et non l'effort, elles se
   lisent donc pareil ; ce sont les niveaux qui portent les trois couleurs de
   difficulté. */
.idfn-etiquette--transports {
	color: #fff;
	background: var(--idfn-vert);
	border-color: transparent;
}

.idfn-etiquette--amateur {
	background: #7BA92D;
}

.idfn-etiquette--confirme {
	background: #F89C0E;
}

.idfn-etiquette--ultra {
	background: #A8437F;
}

/* Crédit de la photo, posé sur l'image en bas à gauche : la mention doit se
   lire, sans prendre la place d'une ligne de texte sous la fiche. Fond sombre
   translucide, parce qu'une photo peut être claire à cet endroit. */
.idfn-fiche__photo {
	position: relative;
}

.idfn-fiche__credit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 5px 10px;
	font-size: 10.9px;
	line-height: 1.3;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

/* Bloc des mesures : entièrement au vert de la charte — filets, libellés et
   valeurs — avec des coins vifs comme les autres blocs de la fiche. */
.idfn-chiffres {
	display: flex;
	border: 1px solid var(--idfn-vert);
	border-radius: 0;
	margin: 0 0 16px;
}

.idfn-chiffre {
	flex: 1;
	padding: 9px 12px;
	border-right: 1px solid var(--idfn-vert);
}

.idfn-chiffre:last-child {
	border-right: 0;
}

.idfn-chiffre dt {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--idfn-vert);
	/* Graisse normale posée explicitement : le thème hérite d'un 300, trop
	   maigre pour des capitales de cette taille. */
	font-weight: 400;
	margin: 0;
}

.idfn-chiffre dt svg {
	flex: 0 0 auto;
}

.idfn-chiffre dd {
	margin: 1px 0 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--idfn-vert);
}

.idfn-durees {
	font-size: 13.4px;
	color: var(--idfn-gris);
	margin: 0 0 14px;
}

.idfn-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
}

.idfn-bouton-gpx {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 8px;
	background: var(--idfn-vert);
	color: #fff;
	text-decoration: none;
	font-size: 14.4px;
	font-weight: 600;
	padding: 16px 18px;
	border-radius: 0;
	min-height: 44px;
}

.idfn-bouton-gpx:hover,
.idfn-bouton-gpx:focus {
	background: #fff;
	color: var(--idfn-vert);
	box-shadow: inset 0 0 0 1px var(--idfn-vert);
}

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

/* Sortie vers Strava, en second : le GPX reste l'action principale, celle qui
   ne dépend d'aucun compte. */
.idfn-bouton-strava {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--idfn-vert);
	border: 1px solid var(--idfn-vert);
	text-decoration: none;
	font-size: 14.4px;
	font-weight: 600;
	padding: 10px 17px;
	border-radius: 3px;
	min-height: 44px;
}

.idfn-bouton-strava:hover,
.idfn-bouton-strava:focus {
	background: var(--idfn-vert);
	color: #fff;
	text-decoration: none;
}

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

.idfn-note-gpx {
	font-size: 12.5px;
	color: var(--idfn-gris);
	margin: 0 0 10px;
}

/* ------------------------------------------------------------------ */
/* Aperçu Strava                                                       */
/* ------------------------------------------------------------------ */

.idfn-fiche__apercu {
	background: var(--idfn-fond);
	display: flex;
	flex-direction: column;
	min-height: 320px;
}

.idfn-apercu {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	gap: 10px;
}

.idfn-apercu__declencheur {
	background: #fff;
	border: 1px solid var(--idfn-vert);
	color: var(--idfn-vert);
	font-size: 14.4px;
	font-weight: 600;
	padding: 11px 18px;
	border-radius: 3px;
	cursor: pointer;
	min-height: 44px;
}

.idfn-apercu__declencheur:hover {
	background: var(--idfn-vert);
	color: #fff;
}

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

.idfn-apercu__mention {
	font-size: 11.8px;
	color: var(--idfn-gris);
	text-align: center;
	margin: 0;
	padding: 6px 10px;
	/* Une seule ligne : cette mention est un pied de page, pas un paragraphe. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Photo de l'itinéraire                                               */
/* ------------------------------------------------------------------ */

/* La photo touche le haut et la gauche de la lightbox : elle ressort du
   rembourrage de la colonne par une marge négative, plutôt que d'imposer à
   toute la colonne une mise en page dont elle serait la seule à avoir besoin.
   Les valeurs suivent celles de .idfn-fiche__infos, ici comme en mobile. */
.idfn-fiche__photo {
	margin: -20px -22px 16px;
	overflow: hidden;
	/* Format paysage tenu même sans image : la fiche ne saute pas quand les
	   photos arrivent, et l'emplacement vide se voit pour ce qu'il est. */
	aspect-ratio: 16 / 9;
	background: var(--idfn-fond);
}

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

.idfn-fiche__photo--vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px dashed var(--idfn-bord);
	color: var(--idfn-gris);
}

.idfn-fiche__photo--vide figcaption {
	font-size: 12.8px;
	letter-spacing: 0.03em;
}

/* Recadrage : l'aperçu Strava répète son titre, le type, la distance et le
   dénivelé, déjà présents dans la fiche. On remonte le cadre pour ne garder
   que la carte.

   La hauteur de cet en-tête dépend de la longueur du titre : mesurée à 125 px
   quand il tient sur une ligne, 153 px sur deux, une ligne valant 28 px. On
   cale donc sur le cas le plus court. Recadrer davantage mordait sur la carte
   et masquait son bouton « + », situé à 135 px ; sur un titre long, il reste
   au pire la fin du titre en haut du cadre, ce qui se voit moins qu'un
   contrôle amputé.

   Et 500 px de hauteur, parce que c'est celle de la carte dans l'aperçu :
   valeur figée dans la feuille de style de Strava, insensible à la largeur
   comme à la hauteur du cadre. Le cadre montre donc exactement la carte.
   Valeurs à revérifier si Strava change sa mise en page. */

.idfn-apercu__cadre {
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1;
	min-height: 500px;
}

.idfn-apercu__cadre iframe {
	position: absolute;
	left: 0;
	top: -125px;
	width: 100%;
	height: calc(100% + 125px);
	border: 0;
}

.idfn-apercu:has(.idfn-apercu__cadre) {
	padding: 0;
	display: block;
}

/* ------------------------------------------------------------------ */
/* Téléphone et tablette                                               */
/* ------------------------------------------------------------------ */


/*
 * Filtres repliés derrière un bouton. Sept pratiques, trois niveaux et deux
 * particularités occupaient la moitié de l'écran avant que la carte
 * n'apparaisse ; ce qu'on vient chercher, c'est la carte. Les filtres restent
 * à un geste, et le bouton porte le nombre de filtres actifs pour qu'un tri en
 * cours ne puisse pas être oublié une fois replié.
 *
 * Le seuil est plus haut que celui de la mise en page, à 980 px contre 900 :
 * les filtres débordent avant que la carte et la liste n'aient besoin de
 * passer en une colonne.
 */
@media (max-width: 980px) {
	.idfn-bandeau {
		padding: 12px 14px;
	}

	.idfn-bandeau__tete {
		margin-bottom: 0;
	}

	.idfn-bascule {
		display: inline-flex;
	}

	/*
	 * « Réinitialiser » se cale sur la rangée de puces, pas sur le groupe
	 * entier : un groupe porte son titre au-dessus de ses puces, et un
	 * centrage sur toute sa hauteur remontait le bouton d'une demi-ligne de
	 * titre. En lui donnant la hauteur d'une puce et en le calant en bas, son
	 * milieu tombe sur celui des puces.
	 */
	.idfn-page.idfn-page .idfn-reinit {
		align-self: flex-end;
		/* Classe doublée : la remise à plat des boutons, écrite pour tenir
		   tête au thème, ramenait cette hauteur à zéro. */
		min-height: 34px;
	}

	.idfn-filtres {
		display: none;
		margin-top: 14px;
	}

	.idfn-filtres.est-ouvert {
		display: flex;
	}
}

@media (max-width: 900px) {
	.idfn-corps {
		grid-template-columns: 1fr;
	}

	.idfn-carte {
		height: 58vh;
		min-height: 300px;
	}

	.idfn-liste {
		/* Deux fois plus haute qu'auparavant : en une colonne, la liste est le
		   principal moyen de parcourir les itinéraires, la carte servant à
		   situer. Trois cent vingt pixels n'en montraient que quatre. */
		max-height: 640px;
	}

	.idfn-page--pleine {
		padding-inline: 14px;
	}

}

@media (max-width: 760px) {
	.idfn-fiche {
		grid-template-columns: 1fr;
	}

	/* Sur téléphone, la fenêtre occupe tout l'écran : une modale flottante y
	   est trop à l'étroit pour porter une carte et des informations. */
	.idfn-modale {
		padding: 0;
	}

	.idfn-modale__panneau {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}

	.idfn-fiche__apercu {
		border-left: 0;
		border-top: 1px solid var(--idfn-bord);
	}

	.idfn-fiche__photo {
		margin: -16px -16px 14px;
	}

	.idfn-fiche__infos {
		padding: 16px;
	}

	.idfn-bouton-gpx {
		width: 100%;
		justify-content: center;
	}

	.idfn-apercu__cadre {
		min-height: 560px;
	}

	.idfn-filtres {
		gap: 12px;
	}
}

/* ------------------------------------------------------------------ */
/* Accessibilité                                                       */
/* ------------------------------------------------------------------ */

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

@media (prefers-contrast: more) {
	.idfn-puce span {
		border-width: 2px;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Cohabitation avec le thème du site                                  */
/* ------------------------------------------------------------------ */

/*
 * Le thème d'accueil habille les boutons de la page : rembourrage de
 * 16,5 px sur 21,6 px, hauteur minimale, coins, fond. Ses sélecteurs pèsent
 * plus lourd que les classes du module, si bien que la croix de fermeture
 * devenait ovale et son pictogramme se retrouvait écrasé à zéro, faute de
 * place à l'intérieur.
 *
 * D'où ce bloc, en fin de feuille : on remet les boutons à plat, puis on
 * redonne à chacun sa géométrie. La classe est doublée des deux côtés pour
 * peser autant que le thème, et la position en fin de fichier tranche les
 * égalités. Aucun « !important », qu'il faudrait ensuite surenchérir.
 */
.idfn-page.idfn-page button,
.idfn-page.idfn-page input,
.idfn-page.idfn-page select {
	min-width: 0;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
	/* Les rangs de la liste ne sont pas des boutons : leur cadre est posé
	   plus bas, sur le « li », que cette remise à plat ne touche pas. */
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
}

/* Un pictogramme porte ses dimensions dans sa balise : le thème les remplace
   par « max-width: 100% » et « height: auto », qui le réduisent à rien dès
   que son conteneur est étroit. */
.idfn-page.idfn-page svg {
	max-width: none;
	height: auto;
	flex: 0 0 auto;
}

.idfn-page.idfn-page .idfn-tout {
	width: 100%;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--idfn-vert);
	border-radius: 100px;
}

.idfn-page.idfn-page .idfn-tout:hover,
.idfn-page.idfn-page .idfn-tout:focus-visible {
	background: var(--idfn-vert);
	color: #fff;
}

.idfn-page.idfn-page .idfn-bascule {
	padding: 8px 14px;
	min-height: 40px;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 100px;
}

/* L'état ouvert doit repasser devant : le bloc ci-dessus, écrit pour tenir
   tête au thème, reprenait aussi la couleur de mon propre bouton actif. */
.idfn-page.idfn-page .idfn-bascule:hover,
.idfn-page.idfn-page .idfn-bascule[aria-expanded="true"] {
	background: #fff;
	color: var(--idfn-bandeau);
}

.idfn-page.idfn-page .idfn-bascule[aria-expanded="true"] .idfn-bascule__compte,
.idfn-page.idfn-page .idfn-bascule:hover .idfn-bascule__compte {
	background: var(--idfn-bandeau);
	color: #fff;
}

.idfn-page.idfn-page .idfn-modale__fermer {
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--idfn-vert);
	border: 1px solid var(--idfn-vert);
	border-radius: 50%;
}

.idfn-page.idfn-page .idfn-modale__fermer:hover {
	background: #fff;
	color: var(--idfn-vert);
}

.idfn-page.idfn-page .idfn-item__bouton {
	padding: 12px 14px;
	background: none;
	border: 0;
}

.idfn-page.idfn-page .idfn-bouton-gpx {
	padding: 16px 18px;
	background: var(--idfn-vert);
	border: 0;
	border-radius: 0;
}

/* Survol : le bouton s'inverse, cadre vert sur fond blanc. Le cadre est une
   ombre intérieure, une bordure décalerait le texte d'un pixel. */
.idfn-page.idfn-page .idfn-bouton-gpx:hover,
.idfn-page.idfn-page .idfn-bouton-gpx:focus {
	background: #fff;
	color: var(--idfn-vert) !important;
	box-shadow: inset 0 0 0 1px var(--idfn-vert);
}

.idfn-page.idfn-page .idfn-apercu__declencheur {
	padding: 11px 18px;
	background: #fff;
	border: 1px solid var(--idfn-vert);
	border-radius: 3px;
}

/*
 * Choix du fond de carte, la petite commande en haut à droite.
 *
 * Leaflet y range une puce radio et son libellé côte à côte. Le thème passe
 * les champs et les étiquettes en bloc : la puce se retrouvait au-dessus du
 * texte, chaque ligne prenait trois hauteurs, et « Vue aérienne » se coupait
 * en deux. On rétablit la mise en ligne.
 */
/* Leaflet range sa liste dans une balise « section », que le thème traite en
   section de page : 80 px de rembourrage haut et bas, d'où une commande de
   217 px de haut pour deux lignes de 17. */
.idfn-page.idfn-page .leaflet-control-layers-list {
	padding: 0;
	margin: 0;
}

.idfn-page.idfn-page .leaflet-control-layers-list label,
.idfn-page.idfn-page .leaflet-control-layers-list label > span {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}

.idfn-page.idfn-page .leaflet-control-layers-list label + label {
	margin-top: 7px;
}

.idfn-page.idfn-page .leaflet-control-layers-selector {
	display: inline-block;
	width: 15px;
	height: 15px;
	min-width: 0;
	margin: 0;
	flex: 0 0 auto;
}

/* Mentions légales de la carte, en pied : elles sont obligatoires mais elles
   n'ont pas à peser dans la page. Le thème les ramenait à sa taille de texte
   courant. */
.idfn-page.idfn-page .leaflet-control-attribution,
.idfn-page.idfn-page .leaflet-control-attribution a,
.idfn-page.idfn-page .leaflet-control-attribution span {
	font-size: 10px;
	line-height: 1.4;
}

/*
 * Marge à gauche des lignes de liste, sur petit écran. La règle vit ici, en
 * fin de feuille, et non dans la requête de média plus haut : le bloc de
 * cohabitation qui remet les boutons à plat a la même spécificité, et c'est
 * le dernier écrit qui l'emporte.
 */
@media (max-width: 980px) {
	.idfn-page.idfn-page .idfn-item__bouton {
		padding: 12px 8px;
	}
}

/*
 * Marge de défilement, pour que le module ne se range pas sous l'en-tête fixe
 * du site quand on l'amène dans la vue. La hauteur est mesurée par le script,
 * qui n'a aucune connaissance du thème d'accueil, et déposée dans
 * « --idfn-entete » ; huit pixels s'y ajoutent pour ne pas coller au logo.
 */
.idfn-panneau,
.idfn-zone-carte {
	scroll-margin-top: calc(var(--idfn-entete, 0px) + 8px);
}

/* --------------------------------------------------------------------------
   Tracés jumeaux

   Un même chemin porté par deux pratiques : le client crée un itinéraire par
   pratique, parce que le niveau, la durée et le parcours Strava changent. Le
   bloc relie les deux fiches, pour ne pas obliger le visiteur à retrouver la
   seconde pastille sur la carte. Classe doublée : le thème du client style les
   éléments eux-mêmes, il faut peser autant que lui.
   -------------------------------------------------------------------------- */
.idfn-fiche .idfn-jumeaux.idfn-jumeaux {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
}

.idfn-fiche .idfn-jumeaux__intro {
	font-size: 14px;
	color: var(--idfn-gris-texte, #4a4a4a);
}

.idfn-fiche .idfn-jumeaux__lien.idfn-jumeaux__lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	padding: 9px 13px;
	border: 1px solid var(--idfn-vert);
	border-radius: 999px;
	background: #fff;
	color: var(--idfn-vert);
	cursor: pointer;
	/* Cible tactile : la pastille fait 13 px de texte, la zone touchée doit
	   rester atteignable au pouce. */
	min-height: 40px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.idfn-fiche .idfn-jumeaux__lien:hover,
.idfn-fiche .idfn-jumeaux__lien:focus-visible {
	background: var(--idfn-vert);
	color: #fff;
}

.idfn-fiche .idfn-jumeaux__lien svg {
	flex: 0 0 auto;
}

.idfn-fiche .idfn-jumeaux__duree {
	font-weight: 400;
	opacity: 0.75;
}