.gs-card {
	/* Palette et typographie alignees sur le site officiel de la commune
	   (www.grimisuat.ch) — le shortcode est destine a etre integre tel quel
	   dans une page de ce site, donc il reprend ses tokens plutot que
	   d'imposer un design propre : bleu Grimisuat #12477F, texte #111111,
	   fond des blocs secondaires #E9EEF5 (identique a la sidebar du site),
	   police Arial/Helvetica, aucun coin arrondi ni ombre decorative. */
	--gs-accent: #12477f;
	--gs-ink: #111111;
	--gs-ink-soft: #4a4a4a;
	--gs-line: #d9d9d9;
	--gs-surface: #fff;
	--gs-surface-soft: #e9eef5;
	--gs-heading-font: Arial, Helvetica, sans-serif;
	--gs-radius: 0;
	/* Espace vertical entre les grands blocs de la carte. */
	--gs-gap: 112px;
	box-sizing: border-box;
	color: var(--gs-ink);
	font-family: Arial, Helvetica, sans-serif;
}
.gs-card *,
.gs-card *::before,
.gs-card *::after {
	box-sizing: border-box;
}
@media (max-width: 700px) {
	.gs-card {
		--gs-gap: 72px;
	}
}
.gs-card .gs-inner {
	max-width: 1080px;
	margin: 0 auto;
}

/* ------------------------------ header row ------------------------------ */
.gs-card .gs-intro-row {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
	gap: 32px;
	align-items: start;
	margin-bottom: 64px;
}
/* Style UNIQUE de tous les titres de la carte (h1/h2) : meme taille, meme
   graisse, meme casse. !important pour battre les regles h1/h2/h3 du theme. */
.gs-card .gs-heading {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	text-transform: uppercase !important;
	color: var(--gs-ink);
	margin: 0 0 14px;
}
/* Style UNIQUE de tous les sous-titres : italique, gris, centre. */
.gs-card .gs-subtitle {
	display: block;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.6;
	color: var(--gs-ink-soft);
}
@media (max-width: 700px) {
	.gs-card .gs-heading {
		font-size: 1.25rem !important;
	}
}
.gs-card .gs-intro-wrap {
	margin: 0 0 18px;
}
.gs-card .gs-intro,
.gs-card .gs-intro-more {
	font-size: 0.96rem;
	line-height: 1.7;
	color: var(--gs-ink-soft);
}
.gs-card .gs-intro p,
.gs-card .gs-intro-more p {
	margin: 0 0 14px;
}
.gs-card .gs-intro p:last-child,
.gs-card .gs-intro-more p:last-child {
	margin-bottom: 0;
}
/* Repli en CSS pur : la case a cocher est masquee (voir "hidden" dans le
   HTML), le <label> qui suit sert de bouton — aucune mesure JS de hauteur,
   aucune dependance a un script qui pourrait planter ailleurs sur la page.
   Le texte est coupe cote PHP a la fin d'un paragraphe (intro/intro_more),
   jamais au milieu d'une phrase par une limite de hauteur arbitraire. */
.gs-card .gs-intro-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.gs-card .gs-intro-more {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.gs-card .gs-intro-checkbox:checked ~ .gs-intro-more {
	max-height: 4000px;
	margin-top: 14px;
}
.gs-card .gs-intro-toggle {
	display: inline-flex;
	margin-top: 8px;
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--gs-accent);
	cursor: pointer;
}
.gs-card .gs-intro-toggle-less {
	display: none;
}
.gs-card .gs-intro-checkbox:checked ~ .gs-intro-toggle .gs-intro-toggle-more {
	display: none;
}
.gs-card .gs-intro-checkbox:checked ~ .gs-intro-toggle .gs-intro-toggle-less {
	display: inline;
}
.gs-card .gs-badges {
	/* Bande pleine largeur, separee du texte d'intro. */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 var(--gs-gap);
	padding: 38px 12px;
	/* 97 % transparent. */
	background: rgba(233, 238, 245, 0.03);
	border-radius: 10px;
}
.gs-card .gs-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 4px 12px;
	text-align: center;
	/* Meme typo que les titres d'etape du widget ("2. Mode de presentation..."). */
	font-size: 0.76rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--gs-ink);
}
.gs-card .gs-badge + .gs-badge {
	border-left: 1px solid rgba(18, 71, 127, 0.22);
}
@media (max-width: 600px) {
	.gs-card .gs-badges {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 14px;
	}
	.gs-card .gs-badge:nth-child(odd) {
		border-left: 0;
	}
}
.gs-card .gs-badge svg {
	color: var(--gs-accent);
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}
.gs-card .gs-info-box {
	/* Illustration Alpine fournie par Ми, en fond tres attenue (overlay clair
	   a 90% d'opacite par-dessus) pour ne pas distraire du contenu — juste
	   une presence discrete, pas un visuel qui attire l'oeil. Chemin relatif
	   a ce fichier CSS (assets/css/ -> assets/img/), donc toujours servi
	   depuis le meme serveur que le plugin, jamais depuis l'exterieur. */
	/* Scoped radius/shadow for the plate and everything inside it only. */
	--gs-radius: 6px;
	--gs-sc-shadow: 0 2px 6px rgba(17, 40, 70, 0.14), 0 1px 2px rgba(17, 40, 70, 0.10);
	--gs-sc-shadow-hover: 0 5px 12px rgba(17, 40, 70, 0.20), 0 2px 4px rgba(17, 40, 70, 0.12);
	overflow: visible;
	background-image: linear-gradient(rgba(233, 238, 245, 0.66), rgba(233, 238, 245, 0.66)), url('../img/scenario-bg.jpg');
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* --------------------------- scénario de marche -------------------------- */
.gs-card .gs-scenario {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.gs-card .gs-scenario-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	/* Meme sous-couche que le panneau du bas : le texte reste lisible
	   quel que soit le fond. */
	background: var(--gs-surface-soft);
	border-radius: var(--gs-radius);
	padding: 12px 14px;
	box-shadow: var(--gs-sc-shadow);
}
.gs-card .gs-scenario > .gs-scenario-divider {
	display: none;
}
.gs-card .gs-scenario-step {
	background: var(--gs-surface-soft);
	border-radius: var(--gs-radius);
	padding: 14px;
	box-shadow: var(--gs-sc-shadow);
}
.gs-card .gs-scenario-title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--gs-ink);
}
/* Filet qui s'efface sur les bords, comme une separation discrete plutot
   qu'une ligne dure d'un bord a l'autre. */
.gs-card .gs-scenario-divider {
	display: block;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--gs-accent) 50%, transparent);
	opacity: 0.45;
}
.gs-card .gs-scenario-footer-ornament {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--gs-accent);
}
.gs-card .gs-scenario-footer-ornament .gs-scenario-divider {
	flex: 1 1 auto;
}
/* Une seule boussole dans l'ornament du bas. */
.gs-card .gs-scenario-footer-ornament svg,
.gs-card .gs-scenario-footer-ornament img ~ img {
	display: none;
}
.gs-card .gs-scenario-footer-ornament img {
	display: block;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin: 0;
}
.gs-card .gs-scenario-step-label {
	font-size: 0.76rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--gs-ink);
	margin-bottom: 8px;
}
.gs-card .gs-scenario-quick {
	display: grid;
	/* 5 colonnes rigoureusement egales (4 raccourcis + le bouton "10
	   objectifs") : une seule ligne garantie quelle que soit la longueur du
	   libelle, largeur ET hauteur identiques par construction (grid, pas un
	   flex qui laisse chaque bouton se dimensionner a son contenu). */
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	margin-bottom: 8px;
}
.gs-card .gs-scenario-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	border: 1px solid var(--gs-line);
	background: var(--gs-surface);
	color: var(--gs-ink);
	border-radius: var(--gs-radius);
	padding: 8px 4px;
	box-sizing: border-box;
	font-size: 0.68rem;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
	word-break: break-word;
	cursor: pointer;
	box-shadow: var(--gs-sc-shadow);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
/* Taille d'icone fixe : certains emojis (ex. 🫀) ont un rendu naturellement
   plus grand que d'autres (🎯, ⚡...) selon la police systeme. On la fige
   pour que l'icone ne fasse jamais varier la hauteur d'un bouton par
   rapport aux autres — la grille egalise deja la largeur, ceci egalise le
   rendu de l'icone elle-meme. */
.gs-card .gs-scenario-btn > span[aria-hidden="true"] {
	font-size: 1.15rem;
	line-height: 1;
}
.gs-card .gs-scenario-btn:hover {
	border-color: var(--gs-accent);
	box-shadow: var(--gs-sc-shadow-hover);
	transform: translateY(-1px);
}
.gs-card .gs-scenario-btn-active {
	background: var(--gs-accent);
	border-color: var(--gs-accent);
	color: #fff;
}
.gs-card .gs-scenario-dropdown {
	position: relative;
	width: 100%;
}
.gs-card .gs-scenario-dropdown-toggle {
	position: relative;
	width: 100%;
}
.gs-card .gs-scenario-dropdown-toggle-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.gs-card .gs-scenario-dropdown-toggle .gs-scenario-chevron {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 0.6rem;
}
.gs-card .gs-scenario-dropdown-toggle-open .gs-scenario-chevron {
	transform: rotate(180deg);
}
.gs-card .gs-scenario-dropdown-hint {
	color: var(--gs-ink-soft);
	font-size: 0.72rem;
	padding: 2px 8px 8px;
}
.gs-card .gs-scenario-dropdown-menu {
	position: absolute;
	z-index: 5;
	top: calc(100% + 4px);
	left: 0;
	width: max(100%, 320px);
	max-width: 92vw;
	background: var(--gs-surface);
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	padding: 10px;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: 0 10px 28px rgba(17, 40, 70, 0.22), 0 2px 6px rgba(17, 40, 70, 0.12);
}
.gs-card .gs-scenario-dd-group + .gs-scenario-dd-group {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--gs-line);
}
.gs-card .gs-scenario-dd-heading {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gs-ink-soft);
	margin-bottom: 6px;
}
.gs-card .gs-scenario-dd-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--gs-ink);
	border-radius: var(--gs-radius);
	padding: 6px 8px;
	font-size: 0.82rem;
	text-align: left;
	cursor: pointer;
}
.gs-card .gs-scenario-dd-item:hover {
	background: var(--gs-surface-soft);
}
.gs-card .gs-scenario-dd-item-active {
	background: var(--gs-surface-soft);
	color: var(--gs-accent);
	font-weight: 600;
}
.gs-card .gs-scenario-modes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gs-card .gs-scenario-mode {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	color: var(--gs-ink);
	cursor: pointer;
}
.gs-card .gs-scenario-mode input {
	accent-color: var(--gs-accent);
}
.gs-card .gs-scenario-view-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-bottom: 0;
	border: 0;
	cursor: pointer;
	font-size: 0.88rem;
	box-shadow: var(--gs-sc-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s;
}
.gs-card .gs-scenario-view-toggle:hover {
	box-shadow: var(--gs-sc-shadow-hover);
	transform: translateY(-1px);
}
.gs-card .gs-scenario-chevron {
	transition: transform 0.2s ease;
}
.gs-card .gs-scenario-view-toggle-open .gs-scenario-chevron {
	transform: rotate(180deg);
}
.gs-card .gs-scenario-panel {
	background: var(--gs-surface-soft);
	border-radius: var(--gs-radius);
	padding: 16px;
}
.gs-card .gs-scenario-panel-title {
	margin: 0 0 10px;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--gs-ink);
}
.gs-card .gs-scenario-panel-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.gs-card .gs-scenario-field dt {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gs-ink-soft);
	margin-bottom: 3px;
}
.gs-card .gs-scenario-field dd {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--gs-ink);
}
@media (max-width: 780px) {
	.gs-card .gs-intro-row {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 420px) {
	/* En dessous de cette largeur, 5 colonnes egales rendraient le texte
	   illisible (boutons ecrases) : on passe a 2 colonnes plutot que de
	   forcer une seule ligne inexploitable. Au-dela de 420px (y compris
	   dans la colonne laterale du site), les 5 boutons restent sur une
	   seule ligne comme demande. */
	.gs-card .gs-scenario-quick {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------- gallery -------------------------------- */
/* Reflexion en forme de citation, juste au-dessus de la galerie : relie le
   widget "Scenario de marche" (pratiques de concentration en marchant) aux
   photos du terrain qui suivent. Filet gauche uni (pas de guillemets
   decoratifs), coherent avec l'aesthetique plate du reste du site. */
.gs-card .gs-lead {
	font-size: 0.96rem;
	line-height: 1.7;
	color: var(--gs-ink-soft);
}
.gs-card .gs-lead p {
	margin: 0 0 14px;
}
.gs-card .gs-lead p:last-child {
	margin-bottom: 0;
}
/* Premier bloc texte : titres alignes a gauche, espace regulier. */
.gs-card .gs-lead-title {
	margin: 0 0 18px;
}
.gs-card .gs-lead-h2 {
	margin: 40px 0 16px;
}
.gs-card .gs-lead-more-wrap {
	margin: 0;
}
.gs-card .gs-lead-more-wrap .gs-lead-more {
	font-size: inherit;
}
/* Avertissement : petit, italique, gris — pour le guide et pour le widget. */
.gs-card .gs-disclaimer {
	margin: 18px 0 0;
	font-size: 0.8rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--gs-ink-soft);
}
.gs-card .gs-scenario-note {
	margin: 16px 0 0;
	text-align: center;
}
.gs-card .gs-intro-more .gs-disclaimer,
.gs-card .gs-lead-more .gs-disclaimer {
	margin: 32px 0 0;
}
.gs-card .gs-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 12px 20px;
	border: 1px solid var(--gs-accent);
	color: var(--gs-accent);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.gs-card .gs-pdf-link:hover,
.gs-card .gs-pdf-link:focus-visible {
	background: var(--gs-accent);
	color: #fff;
}
/* Titre + sous-titre : centres sur la colonne du texte (pas sur la photo). */
.gs-card .gs-gallery-epigraph-head {
	text-align: center;
	margin: 0;
}
.gs-card .gs-gallery-epigraph-title {
	margin: 0 0 10px;
}
/* Texte en italique sous la galerie, avec la photo a droite (ratio
   1182x2560 conserve), beaucoup d'air avant la carte. */
.gs-card .gs-gallery-epigraph {
	max-width: 660px;
	margin: 0 auto var(--gs-gap);
	font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
	font-style: italic;
	color: var(--gs-ink-soft);
}
.gs-card .gs-gallery-epigraph-has-photo {
	max-width: 1040px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 270px;
	gap: 56px;
	align-items: stretch;
}
/* Colonne texte : titre + citation, centres verticalement face a la photo. */
.gs-card .gs-gallery-epigraph-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.gs-card .gs-gallery-epigraph-text {
	text-align: center;
	padding-top: 8px;
}
.gs-card .gs-gallery-epigraph-text::before,
.gs-card .gs-gallery-epigraph-text::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--gs-accent), transparent);
}
.gs-card .gs-gallery-epigraph-text::before {
	margin: 0 auto 24px;
}
.gs-card .gs-gallery-epigraph-text::after {
	margin: 28px auto 0;
}
.gs-card .gs-gallery-epigraph p {
	margin: 0 0 18px;
	font-size: 1.06rem;
	line-height: 1.85;
	letter-spacing: 0.005em;
}
.gs-card .gs-gallery-epigraph p:last-child {
	margin-bottom: 0;
}
/* Photo verticale : occupe toute la hauteur de la ligne (du titre jusqu'a la
   fin du texte), remplie par object-fit:cover. */
.gs-card .gs-gallery-epigraph-photo {
	position: relative;
	margin: 0;
	min-height: 440px;
}
.gs-card .gs-gallery-epigraph-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
@media (max-width: 700px) {
	.gs-card .gs-gallery-epigraph {
		margin-bottom: var(--gs-gap);
		padding-left: 8px;
		padding-right: 8px;
	}
	.gs-card .gs-gallery-epigraph-has-photo {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* Une figure de grille avec margin:auto se reduit a sa largeur de contenu
	   (0 ici, l'image etant en absolu) : largeur explicite obligatoire. */
	.gs-card .gs-gallery-epigraph-photo {
		width: 100%;
		max-width: 260px;
		min-height: 0;
		margin: 0 auto;
		aspect-ratio: 1182 / 2560;
	}
	.gs-card .gs-gallery-epigraph p {
		font-size: 1rem;
		line-height: 1.75;
	}
}
.gs-card .gs-bottom-heading {
	margin: var(--gs-gap) 0 0;
}
/* Bloc "Sentiers" pleine largeur de page (hors du conteneur .gs-inner),
   fond doux, beaucoup d'air haut/bas, texte centre dans une colonne lisible. */
html:has(.gs-sentiers-block),
body:has(.gs-sentiers-block),
html:has(.gs-maps-section),
body:has(.gs-maps-section) {
	overflow-x: clip;
}
.gs-card .gs-sentiers-block {
	width: 100vw;
	max-width: none;
	margin: var(--gs-gap) 0 0 calc(50% - 50vw);
	padding: 88px 24px 96px;
	background: var(--gs-surface-soft);
}
.gs-card .gs-sentiers-inner {
	/* Meme largeur que la grille de la page (1080px) : les filets s'etendent
	   sur toute la largeur, le texte reste dans une colonne lisible. */
	max-width: 1080px;
	margin: 0 auto;
}
.gs-card .gs-sentiers-inner .gs-intro-wrap {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
.gs-card .gs-sentiers-inner .gs-intro,
.gs-card .gs-sentiers-inner .gs-intro-more {
	font-size: 1.02rem;
	line-height: 1.8;
}
/* Fermeture du bloc : simple filet, sans seconde boussole. */
.gs-card .gs-sentiers-ornament.gs-sentiers-ornament-end {
	margin: 52px 0 0;
}
.gs-card .gs-sentiers-subtitle {
	margin: 0 auto 36px;
}
.gs-card .gs-maps-heading {
	text-align: center;
	margin: 0 0 12px;
}
.gs-card .gs-sentiers-ornament {
	margin: 0 0 44px;
}
.gs-card .gs-sentiers-block .gs-heading {
	text-align: center;
}
@media (max-width: 700px) {
	.gs-card .gs-sentiers-block {
		padding: 64px 20px 72px;
	}
	.gs-card .gs-sentiers-ornament {
		margin-bottom: 32px;
	}
}
/* Grille reguliere : toutes les cases ont exactement le meme format
   (voir aspect-ratio plus bas), remplies par object-fit:cover — l'espace
   est entierement occupe par un rectangle "parfait", sans trou ni ligne
   incomplete. Les cases vides (gs-gallery-placeholder) gardent le meme
   format, prealablement dimensionnees pour les futures photos. */
.gs-card .gs-gallery {
	/* Pleine largeur de la carte (plus de max-width reduit). */
	margin: 0 0 var(--gs-gap);
}
.gs-card .gs-gallery-heading {
	text-align: center;
	margin: 0 0 10px;
}
.gs-card .gs-gallery-note {
	margin: 0 auto 20px;
}
.gs-card .gs-gallery-item {
	display: block;
	border-radius: var(--gs-radius);
	overflow: hidden;
	border: 1px solid var(--gs-line);
}
.gs-card .gs-gallery-item:hover {
	border-color: var(--gs-accent);
}
.gs-card .gs-gallery-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.gs-card .gs-gallery-hero {
	margin-bottom: 12px;
}
.gs-card .gs-gallery-hero img {
	max-height: 300px;
	object-fit: contain;
	background: var(--gs-surface-soft);
	margin: 0 auto;
	height: auto;
}
.gs-card .gs-gallery-thumbs {
	display: grid;
	/* Colonnes fluides : autant de cases de ~230px que la largeur totale
	   (pleine largeur de la carte) le permet, au format album 18:9 —
	   hauteur de case comparable à la grille carrée precedente. */
	grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) );
	gap: 8px;
}
.gs-card .gs-gallery-thumbs .gs-gallery-item {
	aspect-ratio: 18 / 9;
	margin: 0;
}
/* Telephone : les miniatures forment un slider horizontal (balayage, accroche
   a chaque photo) au lieu d'une longue colonne. */
@media (max-width: 700px) {
	.gs-card .gs-gallery-thumbs {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
		scrollbar-width: thin;
	}
	.gs-card .gs-gallery-thumbs .gs-gallery-item {
		flex: 0 0 86%;
		scroll-snap-align: center;
		aspect-ratio: 4 / 3;
	}
}
/* Cases vides "photo a venir" : meme format que les vraies vignettes,
   mais pas de lien ni d'image — juste une icone discrete, pour reserver
   la place et la taille exacte des futures photos. Nombre reglable via
   l'attribut gallery_placeholders="". */
.gs-card .gs-gallery-placeholder {
	aspect-ratio: 18 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px dashed var(--gs-line);
	border-radius: var(--gs-radius);
	color: var(--gs-ink-soft);
	opacity: 0.6;
}
.gs-card .gs-gallery-placeholder:hover {
	border-color: var(--gs-line);
}
/* ------------------------------- outro ------------------------------------ */
.gs-card .gs-outro {
	margin: 56px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--gs-line);
	font-size: 0.96rem;
	line-height: 1.7;
	color: var(--gs-ink-soft);
}
.gs-card .gs-outro p {
	margin: 0;
}

/* ------------------------------- lightbox -------------------------------- */
.gs-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 14, 12, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.gs-lightbox.gs-lightbox-open {
	opacity: 1;
	visibility: visible;
}
.gs-lightbox img {
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	/* Le clic traverse l'image : jamais de zone morte devant la croix. */
	pointer-events: none;
}
.gs-lightbox .gs-lightbox-close {
	position: fixed !important;
	top: 14px !important;
	right: 14px !important;
	z-index: 2;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	font-size: 2rem !important;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: none !important;
}
.gs-lightbox .gs-lightbox-close:hover,
.gs-lightbox .gs-lightbox-close:focus-visible {
	background: rgba(255, 255, 255, 0.32) !important;
}
/* Fleches precedent / suivant et compteur du lightbox (slider). */
.gs-lightbox .gs-lightbox-nav {
	position: fixed !important;
	top: 50% !important;
	z-index: 2;
	width: 48px !important;
	height: 48px !important;
	margin: -24px 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	font-size: 1.6rem !important;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: none !important;
}
.gs-lightbox .gs-lightbox-nav:hover,
.gs-lightbox .gs-lightbox-nav:focus-visible {
	background: rgba(255, 255, 255, 0.34) !important;
}
.gs-lightbox .gs-lightbox-prev {
	left: 14px !important;
}
.gs-lightbox .gs-lightbox-next {
	right: 14px !important;
}
.gs-lightbox.gs-lightbox-single .gs-lightbox-nav,
.gs-lightbox.gs-lightbox-single .gs-lightbox-count {
	display: none !important;
}
.gs-lightbox .gs-lightbox-count {
	position: fixed;
	bottom: 18px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font: 0.9rem/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.04em;
	pointer-events: none;
}
@media (max-width: 700px) {
	.gs-lightbox {
		padding: 56px 8px 48px;
	}
	.gs-lightbox .gs-lightbox-nav {
		width: 40px !important;
		height: 40px !important;
		margin-top: -20px !important;
		background: rgba(0, 0, 0, 0.45) !important;
	}
	.gs-lightbox .gs-lightbox-prev {
		left: 6px !important;
	}
	.gs-lightbox .gs-lightbox-next {
		right: 6px !important;
	}
}
body.gs-lightbox-lock {
	overflow: hidden;
}

/* -------------------------------- tabs nav -------------------------------- */
/* Onglets en UNE seule ligne, colles au contenu : barre soulignee en bleu,
   l'onglet actif est plein et fusionne avec le filet. Si la largeur manque,
   la barre se fait glisser horizontalement (jamais de retour a la ligne). */
.gs-card .gs-tabs-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 4px;
	margin: 24px 0 24px;
	padding: 0;
	border: 0;
	border-bottom: 3px solid var(--gs-accent);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.gs-card .gs-tabs-nav .gs-tab-btn {
	appearance: none;
	flex: 1 1 0;
	min-width: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 13px 14px 12px;
	border: 1px solid #c7d2e0;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: #eef2f8;
	box-shadow: none;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	text-transform: none;
	color: var(--gs-ink);
	cursor: pointer;
	scroll-snap-align: start;
	transition: background 0.15s, color 0.15s;
}
.gs-card .gs-tabs-nav .gs-tab-btn:hover {
	background: #dde6f1;
	color: var(--gs-ink);
}
.gs-card .gs-tabs-nav .gs-tab-btn.gs-tab-active {
	border-color: var(--gs-accent);
	background: var(--gs-accent);
	color: #fff;
}
.gs-card .gs-tab-dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--gs-tab-color, var(--gs-accent));
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.gs-card .gs-tab-label {
	min-width: 0;
}
@media (max-width: 700px) {
	/* Telephone : grille 2 colonnes, tous les onglets visibles d'un coup,
	   cibles tactiles hautes (min. 56px), texte sur 2-3 lignes si besoin. */
	.gs-card .gs-tabs-nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		border-bottom: 0;
		overflow: visible;
		margin-bottom: 20px;
	}
	.gs-card .gs-tabs-nav .gs-tab-btn {
		flex: none;
		min-width: 0;
		min-height: 58px;
		padding: 10px 12px;
		justify-content: flex-start;
		border: 1.5px solid #c7d2e0;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(17, 40, 70, 0.12);
		font-size: 0.84rem;
	}
	.gs-card .gs-tabs-nav .gs-tab-btn.gs-tab-active {
		box-shadow: 0 3px 10px rgba(18, 71, 127, 0.35);
	}
	.gs-card .gs-tabs-nav .gs-tab-btn:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-content: center;
		text-align: center;
	}
}

/* Section cartes : sur telephone, bande pleine largeur sur fond blanc,
   nettement separee de la galerie photo qui la precede. */
.gs-card .gs-maps-section .gs-maps-heading {
	margin-top: 0;
}
@media (max-width: 700px) {
	.gs-card .gs-maps-section {
		width: 100vw;
		margin: 0 0 0 calc(50% - 50vw);
		padding: 48px 16px 52px;
		background: #fff;
		border-top: 1px solid var(--gs-line);
		border-bottom: 1px solid var(--gs-line);
	}
}

/* Telephone : onglets + carte + fiche forment UN seul bloc "application"
   (un cadre arrondi, une ombre, aucun espace entre les trois parties). */
@media (max-width: 700px) {
	.gs-card .gs-app {
		border: 1px solid #b9c7da;
		border-radius: 16px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 8px 28px rgba(17, 40, 70, 0.16);
	}
	.gs-card .gs-app .gs-tabs-nav {
		margin: 0;
		padding: 10px;
		gap: 8px;
		background: var(--gs-surface-soft);
		border-bottom: 1px solid #b9c7da;
	}
	.gs-card .gs-app .gs-tabs-body {
		display: block;
	}
	.gs-card .gs-app .gs-tabs-map-wrap {
		border: 0;
		border-radius: 0;
	}
	.gs-card .gs-app .gs-tabs-card {
		border: 0;
		border-top: 1px solid #b9c7da;
		border-radius: 0;
		padding: 22px 18px 24px;
	}
}

/* Miniatures de fond de carte (Carte / Satellite / OSM), en haut a droite. */
.gs-card .gs-thumbs {
	display: flex;
	gap: 6px;
}
.gs-card .gs-thumb {
	position: relative;
	width: 64px;
	height: 64px;
	padding: 0;
	margin: 0;
	border: 2px solid #fff;
	border-radius: 8px;
	overflow: hidden;
	background-color: #cfd6d0;
	background-size: cover;
	background-position: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	cursor: pointer;
}
.gs-card .gs-thumb span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 0;
	text-align: center;
	font: 700 9px/1.1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: rgba(0, 0, 0, 0.62);
}
.gs-card .gs-thumb.gs-thumb-active {
	border-color: var(--gs-accent);
	box-shadow: 0 0 0 2px var(--gs-accent), 0 1px 4px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) {
	.gs-card .gs-thumb {
		width: 58px;
		height: 58px;
	}
	.gs-card .gs-thumb span {
		font-size: 8px;
		letter-spacing: 0.02em;
	}
}

/* Carte plein ecran (fixee sur tout l'ecran, aussi sur telephone). */
html.gs-fs-lock,
html.gs-fs-lock body {
	overflow: hidden !important;
}
.gs-card .gs-tabs-map-wrap .gs-map.gs-map-fs {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	z-index: 999999 !important;
}
.gs-card .gs-map-fs .leaflet-top {
	padding-top: env(safe-area-inset-top, 0px);
}
.gs-card .gs-map-fs .leaflet-bottom {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gs-card .gs-map-fs .leaflet-left {
	padding-left: env(safe-area-inset-left, 0px);
}
.gs-card .gs-map-fs .leaflet-right {
	padding-right: env(safe-area-inset-right, 0px);
}
.gs-card .gs-fs-control {
	background: #fff;
}
.gs-card .gs-fs-control .gs-fs-btn {
	width: 30px;
	height: 30px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.gs-card .gs-fs-control.gs-fs-open {
	background: var(--gs-accent);
}
.gs-card .gs-fs-control.gs-fs-open .gs-fs-btn,
.gs-card .gs-fs-control.gs-fs-open .gs-fs-btn:hover {
	width: auto;
	height: 42px;
	padding: 0 16px;
	gap: 8px;
	background: var(--gs-accent);
	color: #fff;
	font: 700 14px/1 Arial, Helvetica, sans-serif;
	text-decoration: none;
}

/* -------------------------------- tabs body -------------------------------- */
.gs-card .gs-tabs-body {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
	gap: 20px;
	/* Carte et fiche de l'itineraire : toujours la meme hauteur. */
	align-items: stretch;
}
.gs-card .gs-tabs-map-wrap {
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
}
.gs-card .gs-tabs-map-wrap .gs-map {
	background: #e8e8e8;
	flex: 1 1 auto;
	height: auto !important;
	min-height: 440px;
}
@media (max-width: 780px) {
	.gs-card .gs-tabs-map-wrap .gs-map {
		min-height: 360px;
	}
}
.gs-card .gs-tab-marker {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.gs-card .gs-tabs-card {
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	padding: 20px;
	background: var(--gs-surface);
	min-height: 200px;
}
.gs-card .gs-tab-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.gs-card .gs-tab-card-photo {
	width: 56px;
	height: 56px;
	border-radius: var(--gs-radius);
	object-fit: cover;
	flex-shrink: 0;
}
.gs-card .gs-tab-card-title {
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.3;
	font-family: var(--gs-heading-font);
}
.gs-card .gs-stats-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 14px;
}
.gs-card .gs-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--gs-ink);
}
.gs-card .gs-stat svg {
	color: var(--gs-accent);
	flex-shrink: 0;
}
.gs-card .gs-tab-card-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--gs-ink-soft);
	margin: 0 0 16px;
	white-space: pre-line;
}
.gs-card .gs-tab-card-gmaps {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gs-accent);
	color: #fff;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 700;
	padding: 10px 16px;
	border-radius: var(--gs-radius);
	margin-bottom: 18px;
	transition: opacity 0.15s;
}
.gs-card .gs-tab-card-gmaps:hover {
	opacity: 0.9;
	color: #fff;
}
.gs-card .gs-tab-card-stops {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.gs-card .gs-tab-card-stops li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.88rem;
	color: var(--gs-ink);
}
.gs-card .gs-tab-stop-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gs-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
/* Un seul arret nomme (ex. depart = arrivee = meme parking, pour une
   boucle) : les puces numerotees des differents arrets sont regroupees
   avant le libelle commun (voir cardHtml() dans gs-card.js), pour que "1"
   et "2" sur la carte se reconnaissent comme le meme point cote texte. */
.gs-card .gs-tab-stop-single {
	font-weight: 600;
}
.gs-card .gs-tab-stop-num-group {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.gs-card .gs-admin-note {
	background: #fdf6e3;
	border: 1px solid #eadfb5;
	border-radius: var(--gs-radius);
	padding: 12px 16px;
	font-size: 0.88rem;
}
@media (max-width: 780px) {
	.gs-card .gs-tabs-body {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------ locate control ------------------------------ */
.gs-card .gs-locate-control {
	background: #fff;
}
.gs-card .gs-locate-btn {
	width: 30px;
	height: 30px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.gs-card .gs-locate-control.gs-locating .gs-locate-btn svg circle:first-child {
	animation: gs-pulse 1s ease-in-out infinite;
}
.gs-card .gs-locate-control.gs-tracking .gs-locate-btn {
	background: var(--gs-surface-soft);
}
@keyframes gs-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}
/* --------------------------- couches (satellite) ----------------------------- */
.gs-card .gs-layers-control {
	background: #fff;
}
.gs-card .gs-layers-btn {
	width: 30px;
	height: 30px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.gs-card .gs-layers-control.gs-layers-satellite .gs-layers-btn {
	background: var(--gs-surface-soft);
}
.gs-card .gs-locate-message {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	background: rgba(20, 24, 22, 0.9);
	color: #fff;
	font-size: 0.82rem;
	padding: 8px 14px;
	max-width: 90%;
	text-align: center;
	z-index: 1000;
	transition: opacity 0.4s ease;
}
.gs-card .gs-locate-message.gs-fade {
	opacity: 0;
}

/* Filet bleu + boussole tout en bas de la carte, sous "Galerie mobile". */
.gs-card .gs-card-end-ornament {
	margin: 56px 0 0;
}

/* Filet bleu + boussole au-dessus du titre des cartes. */
.gs-card .gs-maps-ornament {
	margin: 0 0 40px;
}
@media (max-width: 700px) {
	.gs-card .gs-maps-ornament {
		margin-bottom: 28px;
	}
}