/* Composant : carte d'itinéraire (étape 16, essai). Colonne latérale de la page de lecture,
   avec le sommaire « Dans cet article ». Feuille neuve : n'altère aucun composant existant. */

/* Étape 19 : la carte est dans la colonne de texte, en haut de l'article (le sommaire reste seul à gauche).
   Sommaire de plus de 10 entrées sur une page à carte : cadre à défilement (45 vh au plus, barre discrète),
   toujours collant à grand écran puisqu'il tient dans la fenêtre. */
.article-layout .prose>.route-map{max-width:100%;margin:0 0 var(--space-7)}
.toc--scroll{max-height:45vh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--c-taupe) transparent;padding-right:8px}
.toc--scroll summary{position:sticky;top:0;z-index:1;background:var(--c-white);margin-bottom:0;padding-bottom:12px}
@media (max-width:1100px){.toc--scroll{position:static}}

.route-map summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;font-size:17px;font-weight:600;color:var(--c-ink);margin-bottom:14px}
.route-map summary::-webkit-details-marker{display:none}
.route-map summary::after{content:"";height:2px;background:var(--c-brand);width:36px}

/* Carte : visible seulement avec JavaScript (sinon la liste d'étapes seule). */
.route-map__canvas{display:none;width:100%;height:280px;background:var(--c-sand);border:1px solid var(--c-line);position:relative;z-index:0}
.route-map--js .route-map__canvas{display:block}
@media (min-width:821px){.route-map__canvas{height:clamp(380px,52vh,480px)}}

.route-map__list{list-style:none;margin:var(--space-3) 0 0;padding:0;columns:3 15rem;column-gap:var(--space-6);counter-reset:etape}
.route-map__list li{break-inside:avoid}
.prose .route-map .route-map__list{max-height:none;overflow:visible;padding:0}
.route-map__list li{counter-increment:etape;display:flex;align-items:baseline;gap:10px;margin-left:-1px;border-left:2px solid transparent;padding:0 0 0 12px}
.route-map__list li::before{content:counter(etape);flex:0 0 auto;min-width:1.6em;font-size:var(--text-xs);font-weight:600;color:var(--c-brand-strong);font-variant-numeric:tabular-nums}
.route-map__list li.on{border-left:3px solid var(--c-brand-strong);margin-left:-2px;padding-left:11px}
.route-map__name,.route-map__list button{font:inherit;font-size:var(--text-s);line-height:1.4;color:var(--c-ink-soft);padding:5px 0;text-align:left}
.route-map__list button{background:none;border:0;cursor:pointer}
.route-map__list button:hover,.route-map__list li.on button{color:var(--c-ink);text-decoration:underline;text-underline-offset:3px}
.route-map__list li.on button{font-weight:600}
.route-map__list button:focus-visible{outline:2px solid var(--c-brand-strong);outline-offset:2px}

/* Marqueurs numérotés (div-icon, pur CSS) et tracé. */
.route-map .vvv-pin{background:none;border:0}
.route-map .vvv-pin span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--c-brand);color:var(--c-white);border:2px solid var(--c-white);box-shadow:0 1px 3px rgba(var(--c-ink-rgb),.45);font:600 11px/1 var(--font-body);font-variant-numeric:tabular-nums}
.route-map .vvv-pin.on span{background:var(--c-brand-strong);width:30px;height:30px;font-size:13px;margin:-3px 0 0 -3px;box-shadow:0 0 0 3px rgba(var(--c-white-rgb),.8),0 1px 4px rgba(var(--c-ink-rgb),.6)}
.route-map .leaflet-container{font:inherit;background:var(--c-sand)}
.route-map .leaflet-container a{color:var(--c-ink-soft)}
.route-map .leaflet-control-attribution{font-size:11px}
.route-map .leaflet-tooltip{font-size:var(--text-s);color:var(--c-ink)}
.route-map--dense .vvv-pin span{width:18px;height:18px;font-size:9.5px;border-width:1.5px}
.route-map--dense .vvv-pin.on span{width:26px;height:26px;font-size:12px;margin:-4px 0 0 -4px}