/* Vol Rando — styles front, auto-suffisants (préfixe .vr, variables locales). */
.vr {
  --vr-accent: #0e7ba4;
  --vr-accent-strong: #0a5a77;
  --vr-ink: #1e2933;
  --vr-muted: #54616e;
  --vr-line: #dfe6ee;
  --vr-soft: #f4f7fa;
  --vr-card: #ffffff;
  --vr-radius: 14px;
  --vr-ok: #2f9e44;
  --vr-warn: #c2620a;
  --vr-bad: #d92626;
  --vr-marron: #8a5a33;

  color: var(--vr-ink);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 1200px;
  margin: 0 auto;
}
.vr *,
.vr *::before,
.vr *::after { box-sizing: border-box; }
.vr .vr-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vr :focus-visible { outline: 3px solid var(--vr-accent); outline-offset: 2px; }
.vr a { color: var(--vr-accent-strong); }

/* --- intro ----------------------------------------------------------- */
.vr-intro {
  background: var(--vr-soft);
  border: 1px solid var(--vr-line);
  border-left: 4px solid var(--vr-accent);
  border-radius: var(--vr-radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.1rem;
  color: #33404d;
}
.vr-intro a { word-break: break-all; }

/* --- filtres ---------------------------------------------------------- */
.vr-filters {
  background: var(--vr-soft);
  border: 1px solid var(--vr-line);
  border-radius: var(--vr-radius);
  padding: 1rem 1.1rem 0.9rem;
  margin-bottom: 0.8rem;
}
.vr-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem 1rem;
}
.vr-field { min-width: 0; }
.vr-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vr-muted);
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem;
}

/* menus déroulants + sélecteurs segmentés */
.vr-select,
.vr-seg {
  width: 100%;
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  background: var(--vr-card);
  color: var(--vr-ink);
  font: inherit;
}
.vr-select {
  padding: 0.5rem 0.6rem;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7d8a96 50%),
    linear-gradient(135deg, #7d8a96 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.vr-seg { display: flex; overflow: hidden; }
.vr-seg-btn {
  flex: 1 1 0;
  padding: 0.5rem 0.3rem;
  border: 0;
  border-right: 1px solid var(--vr-line);
  background: transparent;
  color: var(--vr-muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.vr-seg-btn:last-child { border-right: 0; }
.vr-seg-btn[aria-pressed='true'] { background: var(--vr-accent); color: #fff; }
.vr-seg-btn:hover { color: var(--vr-accent-strong); }
.vr-seg-btn[aria-pressed='true']:hover { color: #fff; }
.vr-select:focus-visible,
.vr-seg-btn:focus-visible { outline-offset: -3px; }

/* --- rose des vents (filtre orientation) ------------------------------ */
.vr-field-orientation { grid-column: 1 / -1; }
.vr-compass {
  --cmp: 224px;
  width: var(--cmp);
  height: var(--cmp);
  margin: 0.4rem auto;
}
.vr-compass-rose { position: relative; width: 100%; height: 100%; }
.vr-compass-rose > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vr-needle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.vr-needle svg { filter: drop-shadow(0 1px 2px rgba(16, 24, 40, 0.25)); }

/* bouton=zone cliquable d'un pétale (le SVG affiche le visuel) */
.vr-cdir {
  position: absolute;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vr-cdir:hover { background: rgba(14, 123, 164, 0.14); }
.vr-cdir[aria-pressed='true']:hover { background: rgba(10, 90, 119, 0.22); }
.vr-cdir:focus-visible { outline: 3px solid var(--vr-accent-strong); outline-offset: 1px; }

.vr-compass-status {
  text-align: center;
  color: var(--vr-muted);
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .vr-needle, .vr-cdir { transition: none; }
}
.vr-reset { text-align: right; margin-top: 0.6rem; }
.vr-btn {
  font: inherit; font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--vr-line);
  background: var(--vr-card);
  color: var(--vr-accent-strong);
  cursor: pointer;
}
.vr-btn:hover { border-color: var(--vr-accent); }
.vr-btn-reset { font-size: 0.9rem; }

/* --- compteur --------------------------------------------------------- */
.vr-count {
  font-weight: 700;
  color: var(--vr-ink);
  margin: 0 0 0.7rem;
}

/* --- disposition : liste puis carte (page souvent en colonne étroite) -- */
.vr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* --- liste ------------------------------------------------------------ */
.vr-list { display: grid; gap: 0.6rem; align-content: start; }
.vr-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vr-empty { color: var(--vr-muted); font-style: italic; margin: 0; }
.vr-card {
  display: flex;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.8rem 0.9rem;
  background: var(--vr-card);
  border: 1px solid var(--vr-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font: inherit;
  color: var(--vr-ink);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.vr-card:hover { border-color: #c3d2df; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.10); transform: translateY(-1px); }
.vr-card-active,
.vr-card-active:hover {
  border-color: var(--vr-accent);
  box-shadow: 0 0 0 3px rgba(14, 123, 164, 0.22);
}
.vr-card-compass { flex: 0 0 auto; }
.vr-card-main { min-width: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.vr-card-title {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  display: flex; align-items: baseline; gap: 0.45rem;
}
.vr-card-arrow { color: var(--vr-accent); font-size: 0.85rem; transform: translateY(1px); }
.vr-card-sub { color: var(--vr-muted); font-size: 0.88rem; }
.vr-card-row { display: flex; gap: 0.45rem; font-size: 0.88rem; }
.vr-card-row-label { flex: 0 0 auto; font-weight: 600; color: var(--vr-muted); }
.vr-card-row-value { min-width: 0; color: #3a4754; }

/* pagination */
.vr-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  margin: 0.3rem 0 0.2rem;
}
.vr-pager-btn {
  min-width: 2.3rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--vr-line);
  border-radius: 8px;
  background: var(--vr-card);
  color: var(--vr-ink);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.vr-pager-btn:hover:not(:disabled) { border-color: var(--vr-accent); color: var(--vr-accent-strong); }
.vr-pager-btn:disabled { opacity: 0.45; cursor: default; }
.vr-pager-current {
  background: var(--vr-accent);
  border-color: var(--vr-accent-strong);
  color: #fff;
}
.vr-pager-current:hover:not(:disabled) { color: #fff; }
.vr-pager-note { font-size: 0.85rem; color: var(--vr-muted); }

/* badges */
.vr-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vr-badge {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--vr-line);
  background: var(--vr-soft);
  color: var(--vr-ink);
  white-space: nowrap;
}
.vr-badge-ok { background: rgba(47, 158, 68, 0.12); border-color: rgba(47, 158, 68, 0.4); color: #1b6e2e; }
.vr-badge-info { background: rgba(29, 111, 184, 0.12); border-color: rgba(29, 111, 184, 0.4); color: #175182; }
.vr-badge-marron { background: rgba(138, 90, 51, 0.12); border-color: rgba(138, 90, 51, 0.4); color: #6f4527; }
.vr-badge-warn { background: rgba(206, 120, 16, 0.14); border-color: rgba(206, 120, 16, 0.45); color: #8a4d05; }
.vr-badge-bad { background: rgba(217, 38, 38, 0.12); border-color: rgba(217, 38, 38, 0.45); color: #a51d1d; }

/* --- carte ------------------------------------------------------------ */
.vr-map {
  position: relative;
  z-index: 0;
  height: 520px;
  min-height: 440px;
  border-radius: var(--vr-radius);
  border: 1px solid var(--vr-line);
  overflow: hidden;
}
.vr-map .leaflet-container { font: inherit; }
.vr-map .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.22); }
.vr-map .leaflet-popup-content { margin: 0; }
.vr-map .leaflet-popup-tip { box-shadow: 0 6px 14px rgba(16, 24, 40, 0.18); }

.vr-pop { padding: 0.95rem 1.05rem 0.75rem; min-width: 230px; max-width: 300px; }
.vr-pop-kicker { margin: 0 0 0.1rem; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vr-accent-strong); }
.vr-pop-title { margin: 0 0 0.55rem; font-size: 1.2rem; line-height: 1.25; }
.vr-pop .vr-badges { margin-bottom: 0.6rem; }
.vr-kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.8rem; font-size: 0.9rem; }
.vr-kv dt { font-weight: 600; color: var(--vr-muted); white-space: nowrap; }
.vr-kv dd { margin: 0; color: #2b3742; }
.vr-kv + .vr-kv { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--vr-line); }

/* rose des vents miniature (cartouches + popover) */
.vr-compass-mini { display: inline-block; vertical-align: middle; }
.vr-compass-n { fill: var(--vr-accent-strong); }

/* marqueurs et clusters */
.vr-marker { background: transparent; border: 0; }
.vr-pin { filter: drop-shadow(0 2px 2px rgba(16, 24, 40, 0.35)); }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background-color: rgba(14, 123, 164, 0.35) !important;
}
.marker-cluster div { background-color: rgba(14, 123, 164, 0.92) !important; color: #fff !important; font-weight: 700; }

.vr-map-legend {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.7rem;
  position: absolute;
  z-index: 800;
  bottom: 12px;
  left: 12px;
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem;
  font-size: 0.8rem;
  color: var(--vr-muted);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
  pointer-events: none;
}
.vr-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.vr-legend-swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

.vr-noscript { color: var(--vr-muted); font-style: italic; }

/* --- responsive ------------------------------------------------------- */
@media (max-width: 640px) {
  .vr-map { height: 380px; min-height: 320px; }
  .vr-compass { --cmp: 196px; }
}