/**
 * The Wanderer — feuille de style (mobile-first).
 *
 * Portée du langage visuel des prototypes / singles VALR (Prototypes/proto-v1-*,
 * assets/css/single-*.css) : mêmes tokens (--accent #F91942, échelle --ink,
 * --r, ombres rgba(20,19,31)), mêmes composants (hero, tag-row, carte sombre,
 * grille de specs, sections en cartes, share-row).
 *
 * Adaptations (la page vit DANS le thème Listeo, pas en page autonome) :
 *  - hero INLINE (pas position:fixed) → coexiste avec le header du thème ;
 *  - pas d'app bar ni de bottombar (le thème fournit header/footer/bottom-nav) ;
 *  - polices Raleway (corps) / Poppins (titres+data) = celles chargées sur le site.
 *
 * Tout est scopé sous .vc-circuit pour neutraliser les fuites Bootstrap/Listeo.
 */

/* ───────────────────────── 1. Tokens + reset scopé ───────────────────────── */
.vc-circuit {
	--bg: #ffffff;
	--bg-soft: #f7f7f8;
	--bg-subtle: #fafafb;
	--border: #ececee;
	--border-md: #dddde0;
	--ink: #14131f;
	--ink-soft: #3a3850;
	--ink-muted: #74738a;
	--ink-light: #adaabf;
	--accent: #f91942;
	--accent-soft: #fee7ec;
	--accent-hover: #e20d36;
	--green: #16a34a;
	--green-soft: #dcfce7;
	--amber: #d97706;
	--amber-soft: #fef3c7;
	--partner: #f5b301;      /* pin partenaire (jaune) */
	/* Couleur « étape validée » : bleu ciel. */
	--vc-done: #0ea5e9;
	--vc-done-soft: #f0f9ff;
	--shadow-xs: 0 1px 2px rgba(20, 19, 31, .04);
	--shadow-sm: 0 1px 3px rgba(20, 19, 31, .06), 0 1px 2px rgba(20, 19, 31, .04);
	--shadow-md: 0 4px 12px rgba(20, 19, 31, .06), 0 2px 4px rgba(20, 19, 31, .04);
	--shadow-lg: 0 12px 32px rgba(20, 19, 31, .10), 0 4px 8px rgba(20, 19, 31, .04);
	--r-sm: 8px;
	--r: 12px;
	--r-lg: 16px;
	--r-xl: 20px;
	--r-pill: 999px;

	font-family: 'Raleway', system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--bg-soft);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.vc-circuit *, .vc-circuit *::before, .vc-circuit *::after { box-sizing: border-box; }
.vc-circuit img { display: block; max-width: 100%; height: auto; }
.vc-circuit a { text-decoration: none; color: inherit; }
.vc-circuit .display, .vc-circuit h1, .vc-circuit h2, .vc-circuit h3, .vc-circuit .num {
	font-family: 'Poppins', 'Raleway', sans-serif; letter-spacing: -0.02em; margin: 0;
}
.vc-circuit .mono { font-family: 'Poppins', ui-monospace, monospace; font-feature-settings: 'tnum'; }

/* Conteneur : le thème gère déjà la largeur ; on borne le contenu lisible. */
.vc-wrap { max-width: 760px; margin: 0 auto; padding: 14px 16px 0; }

/* Apparition au scroll. Gatée par .vc-js (ajoutée par le JS) : sans JS, le
 * contenu reste visible (progressive enhancement). */
.vc-circuit.vc-js .vc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.vc-circuit.vc-js .vc-reveal.in { opacity: 1; transform: none; }

/* ───────────────────────── 2. Hero (inline) ───────────────────────── */
.vc-hero {
	position: relative;
	height: 300px;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #1c1b27;
	margin-bottom: 16px;
}
.vc-hero img { width: 100%; height: 100%; object-fit: cover; }
.vc-hero__overlay {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.55) 100%);
}
.vc-hero__badge {
	position: absolute; top: 14px; left: 14px;
	background: rgba(255,255,255,.95); color: var(--ink);
	padding: 5px 11px; border-radius: var(--r-pill);
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(8px);
}
.vc-hero__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(249,25,66,.25); }

/* ───────────────────────── 3. Titre + tags ───────────────────────── */
.vc-title-block { padding: 4px 0 4px; }
.vc-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.vc-tag {
	font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
	letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px;
}
.vc-tag--accent { background: var(--accent-soft); color: var(--accent); }
.vc-tag--outline { background: #fff; color: var(--ink-soft); border: 1px solid var(--border); }
.vc-tag--dark { background: var(--ink); color: #fff; }

.vc-title { font-size: 23px; font-weight: 600; line-height: 1.15; color: var(--ink); margin-bottom: 6px; }
.vc-title-meta { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 13.5px; }
.vc-title-meta svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.vc-title-meta strong { color: var(--ink-soft); font-weight: 600; }

.vc-breadcrumb { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 10px; }
.vc-breadcrumb a:hover { color: var(--accent); }

/* ───────────────────────── 4. Carte d'action sombre (startcard) ───────────────────────── */
.vc-startcard {
	background: var(--ink); color: #fff;
	border-radius: var(--r-lg); padding: 16px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 16px 0; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.vc-startcard::after {
	content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
	border-radius: 50%; background: radial-gradient(circle, rgba(249,25,66,.25), transparent 70%); pointer-events: none;
}
.vc-startcard__lead { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.vc-startcard__sub { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 6px; letter-spacing: .02em; }
.vc-startcard__cta {
	position: relative; background: var(--accent); color: #fff; border: none;
	border-radius: var(--r); padding: 13px 18px; font-family: 'Raleway', inherit;
	font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
	display: inline-flex; align-items: center; gap: 7px;
	box-shadow: 0 6px 18px rgba(249,25,66,.4); transition: transform .12s;
}
.vc-startcard__cta:active { transform: scale(.96); }
.vc-startcard__cta svg { width: 16px; height: 16px; }

/* Actions secondaires (GPX / favori / partager) */
.vc-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.vc-action {
	flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--r);
	padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px;
	font-size: 11.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
	box-shadow: var(--shadow-xs); transition: background .15s; font-family: inherit;
}
.vc-action:hover { background: var(--bg-soft); }
.vc-action svg { width: 18px; height: 18px; }
.vc-action[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.vc-action[aria-pressed="true"] svg { fill: currentColor; }

/* Bouton « J'y suis » — style .profile des fiches événement (chip blanc + badge) */
.vc-here { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 8px 14px 8px 8px; box-shadow: var(--shadow-xs); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.vc-here:hover { border-color: var(--border-md); background: var(--bg-soft); }
.vc-here__ico { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
/* État validé : badge pastel rempli */
step-card[status="completed"] .vc-here { border-color: var(--vc-done); background: var(--vc-done-soft); color: #075985; }
step-card[status="completed"] .vc-here__ico { background: var(--vc-done); color: #fff; }

/* ───────────────────────── 5. Grille de specs ───────────────────────── */
.vc-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 26px; }
.vc-spec {
	background: #fff; border: 1px solid var(--border); border-radius: var(--r);
	padding: 12px 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-xs);
}
.vc-spec__ico { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.vc-spec__ico svg { width: 16px; height: 16px; }
.vc-spec__val { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: -0.015em; }
.vc-spec__lab { font-size: 11px; color: var(--ink-muted); letter-spacing: .02em; }

.vc-coords-draft {
	background: var(--amber-soft); border: 1px solid rgba(217,119,6,.35); color: #7c4a03;
	border-radius: var(--r-sm); padding: 9px 13px; font-size: 12.5px; margin: 0 0 18px;
	display: flex; gap: 8px; align-items: flex-start; line-height: 1.45;
}

/* ─── Accessibilité 3 états — spec "partiel" atténuée ─── */
.vc-spec__val .vc-access-partial { opacity: .55; font-size: .85em; }

/* ───────────────────── Section « Bon à savoir » ─────────────────────── */
.vc-additional-info { }
.vc-ai-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-xs); }
.vc-ai-item { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.vc-ai-item + .vc-ai-item { border-top: 1px solid var(--border); }
.vc-ai-item__ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.vc-ai-item__ico svg { width: 18px; height: 18px; }
.vc-ai-item__body { flex: 1; min-width: 0; }
.vc-ai-item__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.vc-ai-item__content { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.vc-ai-item__content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.vc-ai-item__content a:hover { color: var(--accent-hover); }
.vc-ai-item__content ul { padding-left: 18px; margin: 4px 0 0; }
.vc-ai-item__content li { margin-bottom: 2px; }

/* ─── Fin de parcours : infos de retour ─── */
.vc-finish-info { margin-top: 20px; }
.vc-finish-info__title { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.vc-finish-info__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border-md); }
.vc-finish-info__item svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-muted); }
.vc-finish-info__item-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.vc-finish-info__item-body strong { display: block; color: var(--ink); margin-bottom: 2px; }
.vc-finish-info__item-body a { color: var(--accent); text-decoration: underline; }

/* ───────────────────────── 6. Sections ───────────────────────── */
.vc-sec { margin-bottom: 26px; }
.vc-sec__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vc-sec__title { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.vc-sec__link { font-size: 12.5px; color: var(--accent); font-weight: 600; }

.vc-quote {
	font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; font-style: italic;
	color: var(--accent); line-height: 1.35; letter-spacing: -0.01em;
	margin-bottom: 14px; padding-left: 14px; border-left: 2px solid var(--accent); text-wrap: balance;
}
.vc-prose { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.vc-prose p + p { margin-top: 10px; }

/* ───────────────────────── 7. Carte (map) ───────────────────────── */
.vc-map-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.vc-map { height: 280px; position: relative; background: var(--bg-soft); width: 100%; }
.vc-map__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 13px; text-align: center; padding: 16px; }
.vc-map-pill {
	position: absolute; top: 10px; left: 10px; z-index: 500; background: #fff; padding: 5px 10px;
	border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; box-shadow: var(--shadow-sm);
}
.vc-map-pill svg { width: 12px; height: 12px; color: var(--accent); }
.vc-map-pois { display: flex; gap: 12px; padding: 12px 14px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--border); }
.vc-map-pois::-webkit-scrollbar { display: none; }
.vc-poi { flex-shrink: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.vc-poi__d { font-family: 'Poppins', sans-serif; font-size: 11px; color: var(--ink-muted); }
.vc-poi__ico { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; font-family: 'Poppins', sans-serif; }

/* Pin chiffré (divIcon Leaflet) */
.vc-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); border: 2px solid #fff; }
.vc-pin span { transform: rotate(45deg); color: #fff; font-weight: 700; font-size: 13px; font-family: 'Poppins', sans-serif; }
.vc-pin--current { background: var(--accent-hover); }

/* ───────────────────────── 8. Étapes (step-card) ───────────────────────── */
.vc-steps { display: flex; flex-direction: column; gap: 10px; }
step-card {
	display: block; background: #fff; border: 1px solid var(--border);
	border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}
step-card[status="completed"] { border-color: var(--vc-done); }
step-card[status="current"] { border-color: var(--accent); box-shadow: var(--shadow-md); }
/* Carte horizontale façon « standard-TDF » : média à gauche, corps à droite. */
.step-card__inner { display: flex; flex-direction: column; }
.step-card__media {
	position: relative; width: 100%; aspect-ratio: 16 / 10; flex: none;
	background: var(--bg-soft); border: none; padding: 0; cursor: zoom-in; display: block; overflow: hidden;
}
/* width/height en !important : neutralise un éventuel `img { height:auto }` du thème. */
.step-card__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; }
.step-card__num {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	width: 30px; height: 30px; border-radius: var(--r-pill);
	background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-family: 'Poppins', sans-serif; font-size: 13px; box-shadow: var(--shadow-md);
}
step-card[status="completed"] .step-card__num { background: var(--vc-done); }
.step-card__chip {
	position: absolute; bottom: 10px; left: 10px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	background: rgba(255, 255, 255, .95); color: var(--ink-soft);
	font-size: 11px; font-weight: 700; letter-spacing: .01em;
	padding: 4px 9px; border-radius: var(--r-pill); backdrop-filter: blur(4px); text-transform: capitalize;
}
.step-card__chip i { color: var(--accent); }
.step-card__body { padding: 14px 16px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.step-card__meta { min-width: 0; }
.step-card__title { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.step-card__specs { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink-muted); font-size: 12.5px; font-family: 'Poppins', sans-serif; }
.step-card__specs svg { width: 14px; height: 14px; flex: none; color: var(--ink-light); }
.step-card__short { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.step-card__hints { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 0; }
.step-card__hint { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; white-space: nowrap; line-height: 1.4; }
.step-card__hint svg { width: 13px; height: 13px; flex: none; }
.step-card__hint--tip { background: #e8f3ff; color: #1a56db; }
.step-card__hint--riddle { background: #fef9c3; color: #854d0e; }
.step-card__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.step-card__audio, .step-card__expand { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border-md); border-radius: var(--r-pill); background: #fff; color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.step-card__audio svg, .step-card__expand svg { width: 15px; height: 15px; }
.step-card__audio:hover, .step-card__expand:hover { background: var(--bg-soft); }
.step-card__audio.is-playing { color: var(--accent); border-color: var(--accent); }
.step-card__long[hidden] { display: none; }
.step-card__longtext { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.step-card__anecdote { background: var(--bg-soft); border-radius: var(--r-sm); padding: 12px 14px; margin: 10px 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.step-card__tip { padding: 10px 0; margin: 6px 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.step-card__anecdote p, .step-card__tip p { margin: 5px 0 0; }
.step-card__block-label { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.step-card__block-label svg { width: 16px; height: 16px; flex: none; }
.step-card__validate { margin-top: 12px; align-self: flex-start; }

@media (min-width: 600px) {
	.step-card__inner { flex-direction: row; min-height: 190px; }
	.step-card__media { width: 30%; max-width: 230px; aspect-ratio: auto; align-self: stretch; min-height: 100%; }
}

/* ───────────────────────── 9. Partenaire — style « sb-mensualite » (amber) ───────────────────────── */
sponsor-banner {
	display: block; position: relative;
	background: linear-gradient(135deg, var(--amber-soft) 0%, #fff 65%);
	border: 1px solid rgba(217, 119, 6, .25);
	border-radius: var(--r-lg); padding: 18px;
	box-shadow: var(--shadow-xs);
	transition: transform .15s, box-shadow .15s;
}
sponsor-banner:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sponsor-banner__label { font-size: 10.5px; color: #92620a; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.sponsor-banner__name { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-top: 8px; display: flex; align-items: center; gap: 9px; }
.sponsor-banner__icon { color: var(--amber); font-size: 20px; display: inline-flex; }
.sponsor-banner__msg { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.sponsor-banner__offer { background: #fff; border: 1px dashed var(--amber); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 10px; font-size: 13px; color: #7c4a03; }
.sponsor-banner__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #b45309; font-weight: 600; margin-top: 12px; }
.sponsor-banner__link svg { width: 14px; height: 14px; transition: transform .15s; }
sponsor-banner:hover .sponsor-banner__link svg { transform: translateX(3px); }
.sponsor-banner__hide { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--ink-muted); cursor: pointer; font-size: 14px; line-height: 1; }
sponsor-banner[hidden] { display: none; }

/* ───────────────────────── 10. Share-row ───────────────────────── */
.vc-share-row { display: flex; gap: 8px; }
.vc-share-btn { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; box-shadow: var(--shadow-xs); font-family: inherit; }
.vc-share-btn:hover { background: var(--bg-soft); }
.vc-share-btn svg { width: 18px; height: 18px; }
.vc-share-btn.wa { color: #25D366; }
.vc-share-btn.fb { color: #1877F2; }
.vc-share-btn.em { color: var(--accent); }

/* ───────────────────────── 11. Archive / grille ───────────────────────── */
.vc-grid-circuits { display: grid; grid-template-columns: 1fr; gap: 16px; }
.vc-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); box-shadow: var(--shadow-xs); transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s; }
.vc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-md); }
.vc-card__media { aspect-ratio: 16 / 10; background: var(--bg-soft); }
.vc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vc-card__body { padding: 14px; }
.vc-card__title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.vc-card__meta { color: var(--ink-muted); font-size: 12.5px; font-family: 'Poppins', sans-serif; display: flex; flex-wrap: wrap; gap: 8px; }
.vc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }

/* Barre de filtres multi-groupe (mode / difficulté / thème) */
.vc-filter-bar { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 22px; }
.vc-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-filter-group__label { font-size: 11px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; min-width: 68px; }
.vc-filter-group__pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* Pill de filtre (bouton) */
.vc-chip {
	font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill);
	background: #fff; border: 1px solid var(--border); color: var(--ink-soft);
	cursor: pointer; font-family: inherit; line-height: 1.4;
	transition: background .15s, border-color .15s, color .15s;
}
.vc-chip:hover { background: var(--bg-soft); border-color: var(--border-md); color: var(--ink); }
.vc-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Sentinel scroll infini */
.vc-more-sentinel { height: 1px; margin: 24px 0 0; }
.vc-more-sentinel.is-loading {
	height: 48px; display: flex; align-items: center; justify-content: center;
}
.vc-more-sentinel.is-loading::after {
	content: ""; width: 24px; height: 24px;
	border: 2px solid var(--border); border-top-color: var(--accent);
	border-radius: 50%; animation: vc-spin .7s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }

/* ───────────────────────── 12. Mode parcours (overlay) ───────────────────────── */
/* pointer-events: none quand fermé = défense en profondeur (l'overlay hors-écran
 * ne peut jamais intercepter de clics, quelle que soit la cause du décalage). */
.vc-parcours { position: fixed; inset: 0; z-index: 2147483000; background: var(--bg); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .25s cubic-bezier(.32,.72,0,1); font-family: 'Raleway', system-ui, sans-serif; pointer-events: none; }
.vc-parcours.is-open { transform: translateY(0); pointer-events: auto; }
.vc-parcours__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--ink-soft); }
.vc-parcours__close { background: none; border: none; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ink); padding: 8px 12px; min-height: 44px; }
.vc-progress { height: 6px; background: var(--border); }
.vc-progress__bar { height: 100%; background: var(--accent); width: 0; transition: width .25s; }
/* overflow:hidden empêche les tuiles Leaflet de déborder hors du conteneur et
 * de superposer accidentellement la barre d'en-tête (et le bouton Quitter). */
.vc-parcours__map { flex: 1; min-height: 0; overflow: hidden; }
.vc-parcours__map .vc-map { height: 100%; }
.vc-parcours__sheet { background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 16px calc(16px + env(safe-area-inset-bottom, 0)); max-height: 50vh; overflow-y: auto; }
.vc-parcours__handle { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--border-md); margin: 0 auto 12px; }
.vc-parcours__sheet h3 { font-size: 18px; margin-bottom: 4px; }
.vc-parcours__distance { color: var(--accent); font-weight: 600; font-family: 'Poppins', sans-serif; }
.vc-arrival { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140%); z-index: 2147483100; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 22px; text-align: center; width: calc(100% - 32px); max-width: 360px; transition: transform .25s cubic-bezier(.32,.72,0,1); pointer-events: none; }
.vc-arrival.is-shown { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.vc-arrival h3 { font-size: 20px; margin: 8px 0 16px; }

/* ───────────────────────── 13. Badge final ───────────────────────── */
.vc-badge { text-align: center; padding: 30px 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.vc-badge__emoji { font-size: 52px; }
.vc-badge h2 { font-size: 21px; margin: 8px 0; }
.vc-badge__stats { display: flex; justify-content: center; gap: 24px; margin: 16px 0; color: var(--ink-muted); font-size: 12px; }
.vc-badge__stats strong { font-family: 'Poppins', sans-serif; color: var(--ink); font-size: 18px; display: block; }
.vc-badge__share { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.vc-rating button { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--amber); }

/* ───────────────────────── 14. Boutons génériques ───────────────────────── */
.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r); padding: 11px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; min-height: 44px; transition: transform .12s, background .15s; }
.vc-btn:active { transform: scale(.97); }
.vc-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(249,25,66,.35); }
.vc-btn--ghost { background: #fff; color: var(--ink-soft); border-color: var(--border); }

/* ───────────────────────── 15. A11y + responsive ───────────────────────── */
.vc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vc-circuit.vc-large-text { font-size: 1.3em; }
/* BUG : ne PAS mettre .vc-parcours / .vc-arrival dans le transform:none — leur
 * transform sert à masquer l'overlay. Avec transform:none!important l'overlay
 * couvre l'écran en permanence une fois créé → impossible de fermer (Quitter).
 * Solution : transitions coupées uniquement ; show/hide via display:none. */
@media (prefers-reduced-motion: reduce) {
  .vc-reveal, step-card, .vc-card { transition: none !important; opacity: 1 !important; transform: none !important; }
  .vc-parcours, .vc-arrival, .vc-lightbox__sheet { transition: none !important; }
  .vc-parcours:not(.is-open) { display: none !important; }
  .vc-arrival:not(.is-shown) { display: none !important; }
}

@media (min-width: 768px) {
	.vc-hero { height: 420px; }
	.vc-title { font-size: 30px; }
	.vc-map { height: 360px; }
	.vc-grid-circuits { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.vc-grid-circuits { grid-template-columns: repeat(3, 1fr); }
}

/* ───────────────────────── 16. Layout desktop (2 colonnes) ─────────────────────────
 * Mobile : pile naturelle (sidebar = startcard/specs en haut, puis contenu).
 * Desktop : contenu à gauche, sidebar collante à droite. */
.vc-layout { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 1024px) {
	.vc-wrap { max-width: 1140px; }
	.vc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
	.vc-main { grid-column: 1; grid-row: 1; min-width: 0; }
	.vc-side { grid-column: 2; grid-row: 1; position: sticky; top: 90px; }
	.vc-side .vc-startcard { flex-direction: column; align-items: stretch; text-align: left; }
	.vc-side .vc-startcard__cta { width: 100%; justify-content: center; margin-top: 12px; }
	.vc-side .vc-specs { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
	.vc-hero { height: 460px; }
	.vc-title { font-size: 34px; }
}

/* ───────────────────────── 17. Pins & popups carte (identiques à l'archive région) ─────────────────────────
 * Repris de commune-archive.css pour un rendu visuel cohérent avec le thème.
 * La couleur du pin et du liseré popup vient de la variable inline --c. */
.leaflet-div-icon.cmn-pin-wrap, .cmn-pin-wrap { background: transparent !important; border: 0 !important; }
.cmn-pin { width: 32px; height: 32px; position: relative; }
.cmn-pin::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: var(--c, #f91942); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(20, 19, 31, .35); }
.cmn-pin .cmn-pin-i { position: absolute; left: 15px; top: 14px; transform: translate(-50%, -50%); z-index: 1; color: #fff; line-height: 0; font-weight: 700; font-size: 12px; font-family: 'Poppins', sans-serif; }
.cmn-pin .cmn-pin-i svg { width: 14px; height: 14px; }

.cmn-pop-wrap .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--r, 12px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(20,19,31,.14)); overflow: hidden; }
.cmn-pop-wrap .leaflet-popup-content { margin: 0; line-height: 1.45; }
.cmn-pop { display: grid; grid-template-columns: 74px 1fr; gap: 0; background: #fff; color: inherit; text-decoration: none; font-family: 'Raleway', system-ui, sans-serif; min-height: 74px; }
.cmn-pop-img { background: #f7f7f8; position: relative; overflow: hidden; }
.cmn-pop-img::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, #f91942); }
.cmn-pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmn-pop-body { padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.cmn-pop-cat { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c, #f91942); }
.cmn-pop-name { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; color: #14131f; letter-spacing: -0.01em; line-height: 1.25; }
.cmn-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.cmn-pop-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; background: #fef3c7; color: #92400e; }

/* ───────────────────────── 18. Overlays au niveau <body> (tokens autonomes) ─────────────────────────
 * .vc-parcours / .vc-arrival / .vc-lightbox sont injectés dans <body> (hors
 * .vc-circuit) pour un position:fixed fiable → ils redéclarent les tokens. */
.vc-parcours, .vc-arrival, .vc-lightbox {
	--accent: #f91942; --accent-hover: #e20d36;
	--ink: #14131f; --ink-soft: #3a3850; --ink-muted: #74738a;
	--border: #ececee; --border-md: #dddde0; --bg: #fff; --bg-soft: #f7f7f8;
	--green: #16a34a; --vc-done: #0ea5e9; --vc-done-soft: #f0f9ff; --amber: #d97706;
	--r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
	--shadow-lg: 0 12px 32px rgba(20, 19, 31, .14), 0 6px 12px rgba(20, 19, 31, .06);
	font-family: 'Raleway', system-ui, sans-serif;
	color: var(--ink);
}

/* ───────────────────────── 19. Lightbox image (style popup séances ciné) ───────────────────────── */
.vc-lightbox { position: fixed; inset: 0; z-index: 2147483050; display: none; }
.vc-lightbox.is-open { display: block; }
.vc-lightbox__backdrop { position: absolute; inset: 0; background: rgba(20, 19, 31, .6); backdrop-filter: blur(3px); }
.vc-lightbox__sheet {
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%);
	width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
	background: #fff; border-radius: 22px 22px 0 0;
	box-shadow: var(--shadow-lg); transition: transform .35s cubic-bezier(.32, .72, 0, 1);
}
.vc-lightbox.is-open .vc-lightbox__sheet { transform: translateX(-50%) translateY(0); }
.vc-lightbox__close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 34px; height: 34px; border-radius: 50%; border: none;
	background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; font-size: 15px;
	box-shadow: var(--shadow-lg);
}
.vc-lightbox__media { background: var(--bg-soft); aspect-ratio: 16/9; overflow: hidden; }
.vc-lightbox__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-lightbox__body { padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0)); }
.vc-lightbox__title { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.vc-lightbox__content { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.vc-lightbox__lead { font-weight: 600; color: var(--ink); margin: 0 0 12px; }
/* .step-card__anecdote et .step-card__tip héritent leurs styles depuis la section step-card ci-dessus. */
.vc-lightbox__link { display: inline-flex; margin-top: 16px; text-decoration: none; }

@media (min-width: 768px) {
	/* Desktop : modale centrée plutôt que feuille basse. */
	.vc-lightbox__sheet { bottom: auto; top: 50%; border-radius: var(--r-lg); transform: translate(-50%, -50%) scale(.96); }
	.vc-lightbox.is-open .vc-lightbox__sheet { transform: translate(-50%, -50%) scale(1); }
}