/* Plan et photo des circuits (Wikimedia Commons, images-circuits.js) : fiche circuit et fiche journée. Pack design v2 (tokens --td2-*). Préfixe ic-. */

/* Photo en tête de la fiche circuit : bandeau de hauteur fixe (pas de saut de mise en page), légende d'attribution dessous */
.ic-photo { margin: 0 0 14px; }
.ic-photo-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--td2-radius);
  background: var(--td2-neutral-bg); }
.ic-photo figcaption, .ic-mini figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--td2-muted); overflow-wrap: anywhere; }
.ic-photo figcaption a, .ic-mini figcaption a, .ic-plan .osm-attr a { color: inherit; }

/* Onglets « Tracé / Plan détaillé » de la carte « Le tracé » */
.ic-onglets { display: inline-flex; gap: 2px; margin: 14px 20px 0; padding: 3px; border-radius: 10px; background: var(--td2-neutral-bg); }
.ic-onglets [role=tab] { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 8px; background: none; color: var(--td2-muted);
  font: 600 14px/1.2 var(--f-text); cursor: pointer; }
.ic-onglets [role=tab][aria-selected=true] { background: var(--td2-surface); color: var(--td2-ink); box-shadow: 0 1px 3px rgba(22, 26, 29, .12); }
.ic-onglets [role=tab]:hover { color: var(--td2-ink); }
.ic-onglets [role=tab]:focus-visible { outline: 2px solid var(--td2-action); outline-offset: 1px; }
.ic-panneau[hidden] { display: none; }

/* Plan Commons : toujours sur fond blanc (les plans sont dessinés pour un fond clair) */
.ic-plan { margin: 14px 20px 0; padding: 16px; border: 1px solid var(--td2-border); border-radius: 10px; background: #fff; }
.ic-plan-lien { display: block; cursor: zoom-in; }
.ic-plan-img { display: block; width: 100%; height: auto; max-height: 560px; margin: 0 auto; object-fit: contain; }
.ic-plan .osm-attr { margin-top: 10px; }

/* Fiche journée : vignette du plan dans la carte « Le circuit » */
.ic-mini { margin: 12px 0 0; }
.ic-mini a { display: block; padding: 8px; border: 1px solid var(--td2-border); border-radius: 10px; background: #fff; }
.ic-mini a:hover { border-color: var(--rule-strong, var(--td2-muted)); }
.ic-mini a:focus-visible { outline: 2px solid var(--td2-action); outline-offset: 1px; }
.ic-mini-img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: contain; }

@media (max-width: 640px) {
  .ic-photo-img { aspect-ratio: 16 / 9; }
  .ic-onglets { margin: 12px 16px 0; }
  .ic-plan { margin: 12px 16px 0; padding: 10px; }
  .ic-plan-img { max-height: 420px; }
}

/* Virages lus sur le plan (plan-virages-data.js) : cadre aux proportions exactes de l'image, zones sur les numéros */
.ic-plan-cadre { position: relative; width: min(100%, calc(560px * var(--ar))); margin: 0 auto; }
.ic-plan-cadre .ic-plan-img { width: 100%; max-height: none; }
.ic-plan-pts { position: absolute; inset: 0; pointer-events: none; }
.ic-pt { position: absolute; width: max(22px, 3.4%); aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 50%;
  background: transparent; pointer-events: auto; cursor: pointer; }
.ic-pt-nom { width: max(34px, 7%); aspect-ratio: 2 / 1; border-radius: 999px; }
.vg-pts.ic-plan-pts.a-un .vg { opacity: 1; }
.ic-pt.is-on { background: rgba(217, 45, 32, .14); box-shadow: 0 0 0 3px var(--td2-action), 0 0 0 8px rgba(217, 45, 32, .2); }
.ic-pt:focus-visible { outline: 2px solid var(--td2-action); outline-offset: 2px; }
.ic-vg { margin-top: 14px; }
@media (max-width: 767px) {
  .ic-plan-cadre { width: min(100%, calc(420px * var(--ar))); }
}