/* ==========================================================================
   Fiche de randonnée
   ========================================================================== */

.single-ir_randonnee #page.grid-container { max-width: none; padding: 0; margin: 0; }
.single-ir_randonnee #content.site-content { padding: 0; display: block; }
.single-ir_randonnee .site-main { margin: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ir-rando__hero {
	position: relative;
	color: #fff;
	background: linear-gradient(150deg, #0B2C3C 0%, #16463A 48%, #1E6B54 100%);
	padding-block: clamp(36px, 5vw, 64px);
	overflow: hidden;
}

.ir-rando__hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ir-hero-image);
	background-size: cover;
	background-position: center;
}

.ir-rando__hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(9, 32, 26, .93) 0%, rgba(9, 32, 26, .78) 46%, rgba(9, 32, 26, .35) 100%);
}

.ir-rando__hero-corps { position: relative; z-index: 1; }

.ir-rando__entete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }

/* Le niveau de difficulté reprend le code couleur du guide pratique :
   même échelle, mêmes couleurs, d'un bout à l'autre du site. */
.ir-puce--facile         { background: #4C8B3E; border-color: #4C8B3E; }
.ir-puce--modere         { background: #1E9BB0; border-color: #1E9BB0; }
.ir-puce--difficile      { background: var(--brasier); border-color: var(--brasier); }
.ir-puce--tres-difficile { background: #B03A2E; border-color: #B03A2E; }

.ir-rando__h1 {
	color: #fff;
	font-size: clamp(2.1rem, 5.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1.04;
	margin: 0;
}

.ir-rando__commune {
	font-family: var(--titre);
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	font-weight: 600;
	color: rgba(255, 255, 255, .82);
	margin: 4px 0 0;
}

.ir-rando__chapo {
	font-size: clamp(1rem, 1.5vw, 1.12rem);
	color: rgba(255, 255, 255, .88);
	max-width: 56ch;
	margin: 16px 0 0;
}

/* Bandeau de repères */

.ir-reperes {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
}

.ir-reperes li { display: flex; align-items: center; gap: 11px; }
.ir-reperes svg { color: #8FD3A8; flex: none; }
.ir-reperes span { display: grid; line-height: 1.25; }
.ir-reperes strong { font-family: var(--titre); font-size: 17px; font-weight: 700; color: #fff; }
.ir-reperes small { font-size: 12.5px; color: rgba(255, 255, 255, .7); }

.ir-rando__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.ir-bouton--clair {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

.ir-bouton--clair:hover,
.ir-bouton--clair:focus-visible { background: rgba(255, 255, 255, .24); color: #fff; }

/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */

.ir-rando__grille {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	padding-block: clamp(36px, 5vw, 56px);
	align-items: start;
}

@media (min-width: 940px) {
	.ir-rando__grille { grid-template-columns: minmax(0, 1fr) 340px; }
	.ir-rando__cote { position: sticky; top: 24px; }
}

.ir-rando__corps { font-size: 17px; line-height: 1.7; color: var(--encre-2); min-width: 0; }
.ir-rando__corps > * + * { margin-top: 1.1em; }
.ir-rando__corps p { max-width: 68ch; }

.ir-rando__corps h2 {
	font-family: var(--titre);
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	font-weight: 700;
	color: var(--nuit);
	margin-top: 2em;
}

.ir-rando__corps a { color: var(--lagon-fonce); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Informations pratiques
   -------------------------------------------------------------------------- */

.ir-fiche-technique {
	background: var(--sable-2);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	padding: 24px 26px;
}

.ir-fiche-technique__titre {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1rem;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--trait);
}

.ir-fiche-technique__titre svg { color: var(--lagon-fonce); }

.ir-fiche-technique dl { margin: 0; display: grid; gap: 0; }

.ir-fiche-technique__ligne {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 11px 0;
	border-bottom: 1px solid var(--trait);
}

.ir-fiche-technique__ligne:last-child { border-bottom: 0; padding-bottom: 0; }

.ir-fiche-technique dt { font-size: 14.5px; color: var(--encre-2); }

.ir-fiche-technique dd {
	margin: 0;
	font-family: var(--titre);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--nuit);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Itinéraire détaillé
   -------------------------------------------------------------------------- */

.ir-etapes { margin-top: 2.4em; }
.ir-etapes__titre { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 20px; }

.ir-etapes__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.ir-etape {
	display: grid;
	gap: 0;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	overflow: hidden;
	max-width: none;
}

@media (min-width: 620px) { .ir-etape { grid-template-columns: 180px minmax(0, 1fr); } }

.ir-etape__image { width: 100%; height: 100%; min-height: 130px; object-fit: cover; display: block; }

.ir-etape__corps { padding: 18px 22px; position: relative; }

.ir-etape__numero {
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--fougere);
	color: #fff;
	font-family: var(--titre);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 8px;
}

.ir-etape__titre { font-size: 1.05rem; margin: 0 0 4px; }

.ir-etape__km {
	font-family: var(--titre);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--brasier);
	font-variant-numeric: tabular-nums;
}

.ir-etape p { margin: 8px 0 0; font-size: 15px; color: var(--encre-2); max-width: none; }

/* --------------------------------------------------------------------------
   Maillage
   -------------------------------------------------------------------------- */

.ir-rando__autour { border-top: 1px solid var(--trait); }
.ir-rando__autour .ir-bloc + .ir-bloc { margin-top: 42px; }
.ir-rando__autour .ir-bloc__titre { font-family: var(--titre); font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--nuit); margin: 0 0 20px; }
.ir-rando__autour .ir-cartes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }