.cs-carte {
	--cs-ink: #1b1b1b;
	--cs-ink-soft: #4a4a4a;
	--cs-accent: #3c5a45;
	--cs-line: #e2e2e2;
	--cs-surface: #ffffff;
	display: block;
	color: var(--cs-ink);
	padding: 48px 0;
}
.cs-carte,
.cs-carte * {
	box-sizing: border-box;
}
.cs-carte .cs-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}
.cs-carte .cs-eyebrow {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-accent);
	margin-bottom: 12px;
	text-align: center;
}
.cs-carte .cs-heading {
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
	text-align: center;
}
.cs-carte .cs-intro {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--cs-ink-soft);
	max-width: 640px;
	margin: 0 auto 8px;
	text-align: center;
}
.cs-carte .cs-map-wrap {
	margin-top: 24px;
	border: 1px solid var(--cs-line);
	border-radius: 6px;
	overflow: hidden;
}
.cs-carte .cs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px;
	background: var(--cs-surface);
	border-bottom: 1px solid var(--cs-line);
}
.cs-carte .cs-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--cs-ink-soft);
	border: 1px solid var(--cs-line);
	padding: 5px 10px;
	border-radius: 20px;
	cursor: pointer;
	user-select: none;
	transition: opacity 0.2s;
}
.cs-carte .cs-filter input {
	width: 12px;
	height: 12px;
}
.cs-carte .cs-filter.cs-off {
	opacity: 0.4;
}
.cs-carte .cs-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-block;
}
.cs-carte .cs-map {
	width: 100%;
	background: #e8e8e8;
}
.cs-carte .leaflet-popup-content-wrapper {
	border-radius: 4px;
}
.cs-carte .leaflet-popup-content-wrapper h4 {
	font-size: 14px;
	margin: 0 0 4px;
}
.cs-carte .leaflet-popup-content-wrapper p {
	font-size: 12.5px;
	margin: 0;
	color: #555;
}
@media (max-width: 640px) {
	.cs-carte .cs-inner {
		padding: 0 16px;
	}
}

/* Icone du selecteur de fond de carte (empilement de calques), integree en
   base64 : aucune requete externe, ne depend pas des images/ non fournies
   par defaut avec Leaflet. Remplace le carre blanc vide. */
.cs-carte .leaflet-control-layers-toggle {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiA4bDEwIDYgMTAtNi0xMC02eiIgZmlsbD0iIzNjNWE0NSIvPjxwYXRoIGQ9Ik0yIDEybDEwIDYgMTAtNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2M1YTQ1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yIDE2LjVsMTAgNiAxMC02IiBmaWxsPSJub25lIiBzdHJva2U9IiMzYzVhNDUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+");
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	width: 34px;
	height: 34px;
}
.cs-carte .leaflet-control-layers {
	border-radius: 4px;
}

/* Le flag ukrainien fait partie de l'attribution par defaut de Leaflet
   depuis la v1.8 (geste des mainteneurs du projet, pas une requete externe).
   Masque ici pour rester neutre sur une carte suisse. */
.cs-carte .leaflet-attribution-flag {
	display: none !important;
}

/* Bouton "Me localiser" */
.cs-carte .cs-locate-control {
	background: #fff;
}
.cs-carte .cs-locate-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
}
.cs-carte .cs-locate-control.cs-locating .cs-locate-btn svg {
	animation: cs-locate-pulse 1s ease-in-out infinite;
}
@keyframes cs-locate-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}
.cs-carte .cs-map-wrap {
	position: relative;
}
.cs-carte .cs-locate-message {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	background: rgba(20, 20, 20, 0.88);
	color: #fff;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 0.8rem;
	max-width: 86%;
	text-align: center;
	z-index: 1000;
	transition: opacity 0.4s;
}
.cs-carte .cs-locate-message.cs-fade {
	opacity: 0;
}

/* Ligne d'icones de statistiques (duree, distance, denivele...) */
.cs-carte .cs-stats-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 4px 0 14px;
}
.cs-carte .cs-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.92rem;
	color: #3c5a45;
}
.cs-carte .cs-stat svg {
	flex-shrink: 0;
	color: #3c5a45;
}

/* En-tete d'une page itineraire unique : centre, plus grand. */
.cs-carte .cs-stats-icons-header {
	justify-content: center;
	gap: 28px;
	margin: 4px 0 20px;
}
.cs-carte .cs-stats-icons-header .cs-stat {
	font-size: 2rem;
	font-weight: 600;
	gap: 10px;
}
.cs-carte .cs-stats-icons-header .cs-stat svg {
	width: 1.6em;
	height: 1.6em;
}
@media (max-width: 640px) {
	.cs-carte .cs-stats-icons-header {
		gap: 18px;
	}
	.cs-carte .cs-stats-icons-header .cs-stat {
		font-size: 1.4rem;
	}
}