/* Noms des virages sur le tracé (virages.js) : fiche circuit et fiche journée. Pack design v2 (tokens --td2-*). Préfixe vg-. */

/* Pastilles sur le tracé (repère SVG 100 x 100) */
.vg-pts .vg { cursor: pointer; }
.vg-pts .vg-fil { stroke: var(--td2-muted); stroke-width: .35; stroke-opacity: .55; }
.vg-pts .vg-pt { fill: var(--td2-ink); }
.vg-pts .vg-pas { fill: var(--td2-surface); stroke: var(--td2-ink); stroke-width: .45; }
.vg-pts .vg-num { fill: var(--td2-ink); font: 700 3px/1 var(--f-text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.vg-pts.a-un .vg { opacity: .35; }
.vg-pts .vg.is-on { opacity: 1; }
.vg-pts .vg.is-on .vg-pas { fill: var(--td2-action); stroke: var(--td2-action); }
.vg-pts .vg.is-on .vg-num { fill: #fff; }
.vg-pts .vg.is-on .vg-pt { fill: var(--td2-action); }
.vg-pts .vg.is-on .vg-fil { stroke: var(--td2-action); stroke-opacity: 1; }
.vg-pts .vg { transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .vg-pts .vg { transition: none; } }

/* Avec les virages, le tracé de la fiche circuit est un peu plus grand */
.p2 .ci-plan:has(.vg-pts) .trace { max-width: 520px; }

/* Liste sous le tracé */
.vg-bloc { margin: 16px 20px 0; }
.vg-h { margin: 0 0 8px; font: 700 15px/1.3 var(--f-display); color: var(--td2-ink); }
.vg-h small, .vg-mini summary small { margin-left: 4px; font: 600 12px var(--f-text); color: var(--td2-muted); }
.vg-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; margin: 0; padding: 0; list-style: none; }
.vg-liste button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--td2-ink); font: 500 14px/1.25 var(--f-text); text-align: left; cursor: pointer; }
.vg-liste button:hover, .vg-liste button.is-on { background: var(--td2-active-bg); }
.vg-liste button:focus-visible { outline: 2px solid var(--td2-action); outline-offset: 1px; }
.vg-n { flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border: 1.5px solid var(--td2-ink); border-radius: 12px;
  font: 700 12px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.vg-liste button.is-on .vg-n { border-color: var(--td2-action); background: var(--td2-action); color: #fff; }
.vg-nom { overflow-wrap: anywhere; }
.vg-src { margin: 8px 0 0; font-size: 12px; color: var(--td2-muted); }
.vg-src a { color: inherit; }

/* Fiche journée : bloc repliable dans la carte « Le circuit » */
.vg-mini { margin-top: 12px; border-top: 1px solid var(--td2-border); }
.vg-mini summary { display: flex; align-items: center; min-height: 44px; font: 600 14px var(--f-text); color: var(--td2-ink); cursor: pointer; list-style: none; }
.vg-mini summary::-webkit-details-marker { display: none; }
.vg-mini summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border: solid var(--td2-muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.vg-mini[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.vg-mini-plan { padding: 10px; border-radius: 10px; background: var(--td2-bg); }
.vg-mini-plan .trace { max-width: 300px; margin: 0 auto; }
.vg-mini-plan .trace .tr-loop { stroke: var(--td2-ink); }
.vg-mini .vg-liste { grid-template-columns: 1fr 1fr; gap: 0 6px; margin-top: 8px; }
.vg-mini .vg-liste button { gap: 6px; min-height: 32px; padding: 3px 4px; font-size: 13px; }
.vg-mini .vg-n { min-width: 20px; height: 20px; font-size: 11px; }

@media (max-width: 640px) {
  .vg-bloc { margin: 14px 16px 0; }
  .vg-liste { grid-template-columns: 1fr 1fr; gap: 0 6px; }
  .vg-liste button { gap: 6px; min-height: 40px; padding: 4px; font-size: 13px; }
  .vg-n { min-width: 22px; height: 22px; font-size: 11px; }
}
@media (max-width: 359px) { .vg-liste, .vg-mini .vg-liste { grid-template-columns: 1fr; } }