/*
 * Cartes « carnet de voyage » (extension mbp-carnet).
 * Une seule feuille fixe l'apparence de toutes les cartes à partir des jetons du thème (--mbp-color-*) : changer la
 * charte met à jour toutes les cartes sans les redessiner, et le mode sombre suit les jetons (html[data-theme="dark"]).
 * Les SVG enregistrés ne portent que des classes .mbpc-* ; ils ne contiennent aucun style.
 * Chargée seulement sur les pages qui contiennent le bloc, et dans l'éditeur.
 */

/* ------------------------------------------------------------------ la carte (SVG) */
.mbpc {
	--mbpc-papier: var(--mbp-color-surface-soft, #f8f6f1);
	--mbpc-encre: var(--mbp-color-heading, #121824);
	--mbpc-gris: var(--mbp-color-text-muted, #5e6b7c);
	--mbpc-vert: var(--mbp-color-accent-solid, #1e6b45);
	--mbpc-bord: var(--mbp-color-border, #eae6e0);
	--mbpc-trait: var(--mbpc-couleur-trace, var(--mbp-color-terracotta, #b44f25));
	--mbpc-eau: #d9e6e8;
	--mbpc-eau: color-mix(in srgb, #5f97a8 26%, var(--mbpc-papier));
	--mbpc-bois: #eef0e6;
	--mbpc-bois: color-mix(in srgb, var(--mbpc-vert) 9%, var(--mbpc-papier));
	--mbpc-riv: #b8d0d6;
	--mbpc-riv: color-mix(in srgb, #5f97a8 55%, var(--mbpc-papier));
	--mbpc-rt: #e2e0dc;
	--mbpc-rt: color-mix(in srgb, var(--mbpc-gris) 22%, var(--mbpc-papier));
	--mbpc-rivnom: #3f7d90;
	--mbpc-rivnom: color-mix(in srgb, #3f7d90 80%, var(--mbpc-encre));
	display: block;
	width: 100%;
	height: auto;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-user-select: none;
	user-select: none;
}
.mbpc .mbpc-fond { fill: var(--mbpc-papier); }
.mbpc .mbpc-eau { fill: var(--mbpc-eau); }
.mbpc .mbpc-bois { fill: var(--mbpc-bois); }
.mbpc .mbpc-riv { fill: none; stroke: var(--mbpc-riv); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mbpc .mbpc-rt { fill: none; stroke: var(--mbpc-rt); stroke-width: 1; stroke-linecap: round; }
.mbpc .mbpc-lim { fill: none; stroke: var(--mbpc-gris); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
.mbpc .mbpc-pays { fill: none; stroke: var(--mbpc-gris); stroke-opacity: .5; stroke-width: .8; }

/* tracé : un trait par mode de transport (route tiretée, marche en pointillé fin, train en double trait, arcs) */
.mbpc .mbpc-halo { fill: none; stroke: var(--mbpc-papier); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.mbpc .mbpc-trace { fill: none; stroke: var(--mbpc-trait); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mbpc .mbpc-trace--route { stroke-dasharray: 7 5; }
.mbpc .mbpc-trace--pied { stroke-width: 2.6; stroke-dasharray: .1 5; }
.mbpc .mbpc-trace--train { stroke-width: 4.2; }
.mbpc .mbpc-trace-rail { fill: none; stroke: var(--mbpc-papier); stroke-width: 1.6; stroke-linecap: round; }
.mbpc .mbpc-trace--bateau { stroke-width: 2; stroke-dasharray: 10 4 2 4; }
.mbpc .mbpc-trace--avion { stroke-width: 1.8; stroke-dasharray: 3 5; }

/* étapes : numéro vert cerclé de papier, nom manuscrit comme les intertitres des articles */
.mbpc .mbpc-pt circle { fill: var(--mbpc-vert); stroke: var(--mbpc-papier); stroke-width: 2.5; }
.mbpc .mbpc-pt text { fill: #fff; font-weight: 700; font-size: 12px; text-anchor: middle; dominant-baseline: central; }
.mbpc .mbpc-nom { font-family: 'Caveat Brush', 'Bradley Hand', cursive; font-size: 24px; fill: var(--mbpc-encre); paint-order: stroke; stroke: var(--mbpc-papier); stroke-width: 5; stroke-linejoin: round; }
.mbpc--compact .mbpc-pt text { font-size: 11px; }
.mbpc--compact .mbpc-nom { font-size: 21px; }
.mbpc a { cursor: pointer; text-decoration: none !important; }
.mbpc a:hover .mbpc-nom { fill: var(--mbpc-vert); }

/* repères : villes en petites capitales grises, rivières en italique */
.mbpc .mbpc-ville { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--mbpc-gris); paint-order: stroke; stroke: var(--mbpc-papier); stroke-width: 3; }
.mbpc .mbpc-ville-pt { fill: var(--mbpc-gris); }
.mbpc .mbpc-rivnom { font-size: 11px; font-style: italic; letter-spacing: .08em; fill: var(--mbpc-rivnom); paint-order: stroke; stroke: var(--mbpc-papier); stroke-width: 3; }

/* nord, échelle, encart de situation, attribution */
.mbpc .mbpc-ech path { fill: none; stroke: var(--mbpc-encre); stroke-width: 1.5; }
.mbpc .mbpc-ech text, .mbpc .mbpc-attr { font-size: 10px; fill: var(--mbpc-gris); }
.mbpc .mbpc-nord path { fill: var(--mbpc-encre); }
.mbpc .mbpc-nord text { font-family: 'Caveat Brush', 'Bradley Hand', cursive; font-size: 15px; fill: var(--mbpc-encre); text-anchor: middle; }
.mbpc .mbpc-encart-fond { fill: var(--mbpc-papier); }
.mbpc .mbpc-encart-bord { fill: none; stroke: var(--mbpc-bord); stroke-width: 1.5; }
.mbpc rect.mbpc-cadre { fill: rgba(180, 79, 37, .22); fill: color-mix(in srgb, var(--mbpc-trait) 22%, transparent); stroke: var(--mbpc-trait); stroke-width: 1.5; }

/* couleur du tracé, réglable dans le bloc sans redessiner la carte */
.mbpc-bloc--trace-rose { --mbpc-couleur-trace: #c4527f; }
html[data-theme="dark"] .mbpc-bloc--trace-rose,
.mbpc-apercu--sombre .mbpc-bloc--trace-rose,
.mbpc-apercu--sombre.mbpc-bloc--trace-rose { --mbpc-couleur-trace: #e48db2; }
.mbpc-bloc--trace-vert { --mbpc-couleur-trace: var(--mbp-color-accent, #1e6b45); }

/* ------------------------------------------------------------------ le bloc dans l'article */
.mbpc-bloc {
	position: relative;
	/* unités cqw : le cartouche suit la largeur de la carte (34 px de titre pour 840 px de carte) */
	container-type: inline-size;
	margin: 32px auto;
	width: 100%;
	max-width: 840px;
	box-sizing: border-box;
}
/* le thème plafonne les blocs de l'article à la colonne de lecture (720 px) : la carte s'élargit comme les médias */
body.mbp-wide-galleries .mbp-single-article .mbp-entry-content > .wp-block-mbp-carte-carnet.mbpc-bloc {
	max-width: 840px !important;
	margin-top: 32px;
	margin-bottom: 32px;
}
.mbpc-bloc div.mbpc-cadre {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--mbp-color-border, #eae6e0);
	background: var(--mbp-color-surface-soft, #f8f6f1);
	line-height: 0;
}
.mbpc-bloc div.mbpc-cadre svg { display: block; width: 100%; height: auto; max-width: none; }
/* div seulement : le rectangle de l'encart de situation porte aussi la classe mbpc-cadre (et il est vide) */
.mbpc-bloc div.mbpc-cadre:empty { display: none; }
.mbpc-bloc .mbpc-v-compact { display: none; }
@media (max-width: 620px) {
	.mbpc-bloc .mbpc-v-large { display: none; }
	.mbpc-bloc .mbpc-v-compact { display: block; }
	.mbpc-bloc div.mbpc-cadre { border-radius: 14px; }
}

.mbpc-bloc .mbpc-legende {
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
	text-align: left;
	font-style: normal;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--mbp-color-text, #2c3038);
	max-width: none;
}
/* cartouche (HTML du contenu, traduit avec l'article) : au-dessus de la carte par défaut */
.mbpc-bloc .mbpc-cartouche { margin: 0 0 12px; }
.mbpc-bloc .mbpc-cartouche:empty { display: none; }
/* le thème impose 18 px !important sous chaque paragraphe sur téléphone : marges du cartouche tenues */
.mbpc-bloc .mbpc-cartouche p { margin: 0 !important; max-width: none; }
.mbpc-bloc p.mbpc-titre-texte {
	font-family: 'Caveat Brush', 'Bradley Hand', cursive;
	/* le thème impose 19 px !important aux paragraphes de l'article */
	font-size: clamp(26px, 3.2vw, 34px) !important;
	line-height: 1.15 !important;
	font-weight: 400;
	color: var(--mbp-color-heading, #121824);
	overflow-wrap: anywhere;
}
.mbpc-bloc p.mbpc-surtitre {
	margin: 0 0 4px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mbp-color-terracotta, #b44f25);
}
.mbpc-bloc p.mbpc-sous { margin-top: 6px !important; font-size: 12px !important; line-height: 1.4 !important; color: var(--mbp-color-text-muted, #5e6b7c); }

/* Carte dessinée, grand écran : cartouche posé dans le coin que le moteur a laissé libre (--mbpc-cw : part de la
   largeur réservée), en unités de la carte (cqw) pour garder les proportions à toutes les largeurs. */
@media (min-width: 621px) {
	.mbpc-bloc--carte:not(.mbpc-bloc--titre-dessus):not(.mbpc-apercu) .mbpc-cartouche,
	.mbpc-apercu--large:not(.mbpc-bloc--titre-dessus) .mbpc-cartouche,
	.mbpc-apercu--sombre:not(.mbpc-bloc--titre-dessus) .mbpc-cartouche {
		position: absolute;
		z-index: 1;
		top: 1.43cqw;
		left: 1.43cqw;
		width: calc(var(--mbpc-cw, .5) * 100cqw - 2.86cqw);
		box-sizing: border-box;
		margin: 0;
		padding: 1.9cqw 2cqw 1.6cqw;
		border-radius: 1.43cqw;
		background: rgba(248, 246, 241, .9);
		background: color-mix(in srgb, var(--mbp-color-surface-soft, #f8f6f1) 90%, transparent);
	}
	/* coin droit : sélecteur au moins aussi précis que celui du placement, sinon le cartouche reste à gauche */
	.mbpc-bloc--carte.mbpc-coin--hd:not(.mbpc-bloc--titre-dessus):not(.mbpc-apercu) .mbpc-cartouche,
	.mbpc-apercu.mbpc-coin--hd:not(.mbpc-bloc--titre-dessus):not(.mbpc-apercu--compact) .mbpc-cartouche { left: auto; right: 1.43cqw; }
	.mbpc-bloc--carte:not(.mbpc-apercu--compact) p.mbpc-titre-texte { font-size: 34px !important; font-size: 4.05cqw !important; }
	.mbpc-bloc--carte.mbpc-titre--long:not(.mbpc-apercu--compact) p.mbpc-titre-texte { font-size: 28px !important; font-size: 3.33cqw !important; }
	/* titre (traduit) plus long que la place prévue : police resserrée de 15 % */
	.mbpc-bloc--carte.mbpc-titre--serre:not(.mbpc-apercu--compact) p.mbpc-titre-texte { font-size: 3.44cqw !important; }
	.mbpc-bloc--carte.mbpc-titre--long.mbpc-titre--serre:not(.mbpc-apercu--compact) p.mbpc-titre-texte { font-size: 2.83cqw !important; }
	.mbpc-bloc--carte:not(.mbpc-apercu--compact) p.mbpc-surtitre { font-size: 11px !important; font-size: 1.31cqw !important; }
	.mbpc-bloc--carte:not(.mbpc-apercu--compact) p.mbpc-sous { font-size: 12px !important; font-size: 1.43cqw !important; }
}
/* Téléphone (375 à 620 px) : bandeau en haut de la carte, que le moteur a laissé libre ; sous 375 px, au-dessus. */
@media (min-width: 375px) and (max-width: 620px) {
	.mbpc-bloc--carte:not(.mbpc-bloc--titre-dessus):not(.mbpc-apercu) .mbpc-cartouche {
		position: absolute;
		z-index: 1;
		/* à l'intérieur du filet du cadre (1 px), qui reste visible en mode sombre */
		top: 1px;
		left: 1px;
		right: 1px;
		margin: 0;
		padding: 4.4cqw 5.5cqw 2cqw;
		border-radius: 13px 13px 0 0;
		background: linear-gradient(var(--mbp-color-surface-soft, #f8f6f1) 55%, transparent);
	}
	.mbpc-bloc--carte:not(.mbpc-apercu) p.mbpc-titre-texte { font-size: 7.8cqw !important; line-height: 1.1 !important; }
	.mbpc-bloc--carte.mbpc-titre--moyen:not(.mbpc-apercu) p.mbpc-titre-texte { font-size: 6.7cqw !important; }
	.mbpc-bloc--carte.mbpc-titre--long:not(.mbpc-apercu) p.mbpc-titre-texte { font-size: 5.8cqw !important; }
	.mbpc-bloc--carte.mbpc-titre--serre:not(.mbpc-apercu) p.mbpc-titre-texte { font-size: 6.6cqw !important; }
	.mbpc-bloc--carte.mbpc-titre--moyen.mbpc-titre--serre:not(.mbpc-apercu) p.mbpc-titre-texte { font-size: 5.7cqw !important; }
	.mbpc-bloc--carte.mbpc-titre--long.mbpc-titre--serre:not(.mbpc-apercu) p.mbpc-titre-texte { font-size: 4.9cqw !important; }
	.mbpc-bloc--carte:not(.mbpc-apercu) p.mbpc-surtitre { font-size: 3.1cqw !important; }
	.mbpc-bloc--carte:not(.mbpc-apercu) p.mbpc-sous { display: none; }
}
/* aperçu « téléphone » de l'éditeur : mêmes règles, sans dépendre de la largeur du canevas */
.mbpc-apercu--compact:not(.mbpc-bloc--titre-dessus) .mbpc-cartouche {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 4.4cqw 5.5cqw 2cqw;
	background: linear-gradient(var(--mbp-color-surface-soft, #f8f6f1) 55%, transparent);
}
.mbpc-apercu--compact p.mbpc-titre-texte { font-size: 7.8cqw !important; line-height: 1.1 !important; }
.mbpc-apercu--compact.mbpc-titre--moyen p.mbpc-titre-texte { font-size: 6.7cqw !important; }
.mbpc-apercu--compact.mbpc-titre--long p.mbpc-titre-texte { font-size: 5.8cqw !important; }
.mbpc-apercu--compact.mbpc-titre--serre p.mbpc-titre-texte { font-size: 6.6cqw !important; }
.mbpc-apercu--compact.mbpc-titre--moyen.mbpc-titre--serre p.mbpc-titre-texte { font-size: 5.7cqw !important; }
.mbpc-apercu--compact.mbpc-titre--long.mbpc-titre--serre p.mbpc-titre-texte { font-size: 4.9cqw !important; }
.mbpc-apercu--compact p.mbpc-surtitre { font-size: 3.1cqw !important; }
.mbpc-apercu--compact p.mbpc-sous { display: none; }

.mbpc-bloc .mbpc-etape--sans-lien { cursor: default; }
.mbpc-bloc ol.mbpc-etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 4px;
	align-items: center;
	font-size: 15px;
	line-height: 1.4;
	counter-reset: none;
}
.mbpc-bloc ol.mbpc-etapes > li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* le thème impose 19 px !important aux éléments de liste des articles sous 768 px */
	font-size: 15px !important;
	line-height: 1.4 !important;
}
@media (max-width: 620px) {
	.mbpc-bloc ol.mbpc-etapes > li { font-size: 16px !important; }
}
.mbpc-bloc ol.mbpc-etapes > li::before,
.mbpc-bloc ol.mbpc-etapes > li::marker { content: none; display: none; }
.mbpc-bloc .mbpc-etape {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: var(--mbp-color-heading, #121824);
	font-weight: 600;
	padding: 3px 10px 3px 3px;
	border-radius: 999px;
	box-shadow: none;
	border: 0;
}
.mbpc-bloc a.mbpc-etape:hover { background: var(--mbp-color-accent-subtle, #ebf5ef); color: var(--mbp-color-heading, #121824); }
.mbpc-bloc a.mbpc-etape:focus-visible { outline: 2px solid var(--mbp-color-accent, #1e6b45); outline-offset: 2px; }
.mbpc-bloc .mbpc-n {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mbp-color-accent-solid, #1e6b45);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.mbpc-bloc .mbpc-km { font-size: 12px; color: var(--mbp-color-text-muted, #5e6b7c); white-space: nowrap; }
.mbpc-bloc .mbpc-km::before { content: "··· "; letter-spacing: .1em; color: var(--mbp-color-terracotta, #b44f25); }
.mbpc-bloc .mbpc-source { margin: 0; font-size: 13px !important; line-height: 1.5 !important; color: var(--mbp-color-text-muted, #5e6b7c); }
.mbpc-bloc .mbpc-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mbpc-bloc .mbpc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.mbpc-bloc a.mbpc-etape { transition: background-color .2s; }
}