/**
 * ITS Rugby — Carte des voyages ([its_carte_voyages])
 * Charte It's : angles droits (aucun border-radius), mobile-first.
 */

.its-cvy {
  margin: 24px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* aucun débordement hors de la colonne article */
  background: var(--white, #fff);
  border: 1px solid var(--border, #C4C4C4);
  border-top: none; /* l'en-tête teal fait le bord haut, pas de liseré gris */
}
.its-cvy * { box-sizing: border-box; }

/* ── En-tête ──────────────────────────────────────────
   Sélecteur monté en spécificité (.its-cvy .its-cvy-head) pour battre la règle
   thème `.article-body figcaption { color:muted; font-style:italic }` héritée
   par le titre et le sous-titre. */
.its-cvy .its-cvy-head {
  padding: 14px 16px 12px;
  border-bottom: 2px solid var(--sage, #ABC8A2);
  background: var(--teal, #1C3D34);
  color: var(--vanilla, #F2E5D2);
  font-style: normal;
}
.its-cvy-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(171, 200, 162, .45);
}
.its-cvy-brand-wing { color: var(--sage, #ABC8A2); flex: 0 0 auto; }
.its-cvy-brand-name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white, #fff);
}
.its-cvy-brand-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal, #1C3D34);
  background: var(--sage, #ABC8A2);
  padding: 3px 8px;
}
.its-cvy .its-cvy-titre {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--vanilla, #F2E5D2);
}
.its-cvy .its-cvy-sous {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sage, #ABC8A2);
}

/* ── Avion le long de la route ───────────────────────── */
.its-cvy-plane { background: none; border: none; }
.its-cvy-plane-i {
  display: block;
  width: 24px;
  height: 24px;
  transform-origin: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* ── Sélecteur de nations (chips) ───────────────────────
   Défilement horizontal en mobile, sans casser la charte. */
.its-cvy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--border, #C4C4C4);
  background: var(--vanilla, #F2E5D2);
}
.its-cvy-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal, #1C3D34);
  background: var(--white, #fff);
  border: 1px solid var(--border, #C4C4C4);
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.its-cvy-chip:hover { border-color: var(--teal, #1C3D34); }
.its-cvy-chip.is-on {
  background: var(--teal, #1C3D34);
  color: var(--vanilla, #F2E5D2);
  border-color: var(--teal, #1C3D34);
}
.its-cvy-dot {
  width: 10px;
  height: 10px;
  background: var(--cvy-color, #444);
  display: inline-block;
}

/* ── Carte ───────────────────────────────────────────── */
.its-cvy-map {
  width: 100%;
  max-width: 100%;
  height: 340px;
  background: var(--vanilla-d, #E8D8C0);
}
.its-cvy-map .leaflet-container { background: #dfe7ea; font-family: var(--sans, sans-serif); }

/* Escales : point simple (angles droits) + libellé ville */
.its-cvy-stop { background: none; border: none; overflow: visible; }
.its-cvy-stopwrap { position: relative; display: block; width: 12px; height: 12px; }
.its-cvy-dot2 {
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.its-cvy-stop-lbl {
  position: absolute;
  top: 50%;
  font-size: 11px;
  font-weight: 800;
  color: var(--teal, #1C3D34);
  background: rgba(255, 255, 255, .9);
  padding: 1px 5px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.its-cvy-lbl-right { left: 18px; transform: translateY(calc(-50% + var(--dy, 0px))); }
.its-cvy-lbl-left { right: 18px; transform: translateY(calc(-50% + var(--dy, 0px))); }
.its-cvy-tip.leaflet-tooltip {
  background: var(--teal, #1C3D34);
  color: var(--vanilla, #F2E5D2);
  border: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  padding: 5px 8px;
  white-space: normal;
  max-width: 220px;
}
.its-cvy-tip.leaflet-tooltip b { color: var(--white, #fff); font-weight: 800; }
.its-cvy-tip.leaflet-tooltip::before { display: none; }

/* ── Indice / statut ─────────────────────────────────── */
.its-cvy-hint {
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal, #1C3D34);
  background: var(--sage-lt, #D7EAE2);
  border-bottom: 1px solid var(--border, #C4C4C4);
  min-height: 18px;
}
/* Notes / réserves méthodo sous la carte (toujours visibles) */
.its-cvy-notes {
  padding: 10px 14px;
  background: var(--vanilla, #F2E5D2);
  border-top: 1px solid var(--border, #C4C4C4);
}
.its-cvy-note {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  color: var(--muted, #6B6B6B);
}
.its-cvy-note strong { font-style: normal; font-weight: 800; color: var(--teal, #1C3D34); }
.its-cvy-note + .its-cvy-note { margin-top: 4px; }

/* ── Liste SSR (classement + itinéraires, alt. RGAA) ───── */
.its-cvy-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cvy;
}
.its-cvy-item {
  counter-increment: cvy;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "dot nom km"
    "route route route";
  align-items: center;
  gap: 2px 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #C4C4C4);
  font-size: 13px;
  min-width: 0;
}
.its-cvy-item:last-child { border-bottom: none; }
.its-cvy-item-dot {
  grid-area: dot;
  width: 12px;
  height: 12px;
  background: var(--cvy-color, #444);
}
.its-cvy-item-nom {
  grid-area: nom;
  font-weight: 800;
  color: var(--teal, #1C3D34);
}
.its-cvy-item-nom::before {
  content: counter(cvy) ". ";
  color: var(--muted, #6B6B6B);
  font-weight: 700;
}
.its-cvy-item-km {
  grid-area: km;
  font-weight: 800;
  color: var(--teal, #1C3D34);
  white-space: nowrap;
}
.its-cvy-item-dom { display: none; }
.its-cvy-item-route {
  grid-area: route;
  min-width: 0;
  font-size: 11px;
  color: var(--muted, #6B6B6B);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ── Desktop ─────────────────────────────────────────── */
@media (min-width: 720px) {
  .its-cvy-map { height: 460px; }
  .its-cvy .its-cvy-titre { font-size: 20px; }
  .its-cvy-item {
    grid-template-columns: auto 180px auto 1fr;
    grid-template-areas: "dot nom km route";
  }
  .its-cvy-item-route { font-size: 12px; text-align: left; }
  .its-cvy-item-km { margin-right: 16px; }
}