/* ── Top 10 des randonnées (randonnees.html) ──────────────────────────────────
 * Static content is generated by scripts/build-top-hikes.mjs; the maps, filters,
 * GPS guidance and print buttons are wired by js/top-hikes.js.
 * Colours come from tokens.css, so dark mode follows automatically. */

.th-body { background: var(--surface-1); margin: 0; }
.th-page { color: var(--text); }
.th-page a { color: var(--forest-600); }

/* ── Hero ── */
.th-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest-900);
}
.th-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.th-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 8, 0.15) 0%, rgba(6, 26, 8, 0.55) 45%, rgba(6, 26, 8, 0.92) 100%);
}
.th-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px 36px;
  color: #fff;
}
.th-crumbs { font-size: 0.82rem; opacity: 0.85; margin-bottom: 14px; }
.th-page .th-crumbs a { color: #fff; }
.th-hero-badge {
  display: inline-block;
  background: var(--lime-500);
  color: var(--forest-900);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 12px;
}
.th-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.1;
  margin: 0 0 12px;
  max-width: 820px;
  color: #fff;
}
.th-hero-lead { font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.55; max-width: 680px; margin: 0 0 20px; color: rgba(255, 255, 255, 0.92); }
.th-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.th-hero-stats li {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
}
.th-hero-stats strong { color: var(--lime-400); }

/* ── Section scaffolding ── */
.th-intro, .th-howto, .th-cta, .th-sources { max-width: 1100px; margin: 0 auto; padding: 40px 24px 0; }
.th-section-title, .th-howto h2, .th-cta h2, .th-sources h2 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Filters ── */
.th-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.th-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-0);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 0.88rem var(--font-sans);
  cursor: pointer;
  min-height: 40px;
}
.th-chip:hover { border-color: var(--forest-500); }
.th-chip.active { background: var(--forest-700); border-color: var(--forest-700); color: var(--lime-500); }

/* ── Overview: list + map ── */
.th-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.th-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.th-page .th-card { color: var(--text); }
.th-card:hover { border-color: var(--forest-500); transform: translateX(2px); }
.th-card.is-hidden, .th-hike.is-hidden, .th-list li:has(> .th-card.is-hidden) { display: none; }
.th-card-rank, .th-rank, .th-stop-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--forest-700);
  color: var(--lime-500);
  font-weight: 800;
}
.th-card-rank { width: 34px; height: 34px; font-size: 0.95rem; }
.th-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-card-body strong { color: var(--text-strong); font-size: 0.97rem; line-height: 1.3; }
.th-card-meta { font-size: 0.82rem; color: var(--text-muted); }
.th-overview-map {
  position: sticky;
  top: 76px;
  height: 560px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  z-index: 0;
}

.th-diff { font-weight: 700; }
.th-diff-easy { color: #15803d; }
.th-diff-medium { color: #c2410c; }
.th-diff-hard { color: #b91c1c; }
[data-theme="dark"] .th-diff-easy { color: #4ade80; }
[data-theme="dark"] .th-diff-medium { color: #fb923c; }
[data-theme="dark"] .th-diff-hard { color: #f87171; }

/* ── How-to ── */
.th-howto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.th-howto-grid p {
  margin: 0;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 0.93rem;
  line-height: 1.6;
}
.th-howto-grid strong { color: var(--text-strong); }

/* ── One hike ── */
.th-hikes { padding: 8px 0 0; }
.th-hike {
  max-width: 1000px;
  margin: 32px auto 0;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 28px 30px 22px;
  box-shadow: 0 4px 18px -10px rgba(11, 36, 16, 0.18);
  scroll-margin-top: 72px;
  /* Ten long articles: the browser skips laying out and painting the ones far
     from the screen until the reader scrolls near them (a phone spent most of
     its loading time on hikes nobody was looking at yet). The size is only a
     placeholder until a hike has been drawn once ("auto" then remembers it). */
  content-visibility: auto;
  contain-intrinsic-size: auto 2500px;
}
.th-hike-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.th-rank { width: 52px; height: 52px; font-size: 1.45rem; font-family: var(--font-display); }
.th-hike-place { margin: 2px 0 4px; font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.th-hike h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0 0 4px;
}
.th-tagline { margin: 0; color: var(--text-muted); font-style: italic; }

.th-photo { margin: 0 0 18px; }
.th-photo picture { display: block; }
.th-photo img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--surface-2); }
.th-photo-hero img { aspect-ratio: 16 / 9; object-fit: cover; }
.th-photo figcaption { font-size: 0.74rem; color: var(--text-faint); margin-top: 5px; line-height: 1.4; }
.th-page .th-photo figcaption a { color: inherit; }
.th-photo-side { float: right; width: 42%; margin: 4px 0 12px 20px; }

.th-stats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.th-stats li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.th-stats .ic { grid-row: span 2; font-size: 1.25rem; color: var(--forest-600); }
.th-stats strong { font-size: 1.02rem; color: var(--text-strong); line-height: 1.2; }
.th-stats span { font-size: 0.75rem; color: var(--text-muted); }

.th-summary { font-size: 1.05rem; line-height: 1.7; margin: 0 0 10px; }
.th-themes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.th-themes span {
  background: var(--forest-100);
  color: var(--forest-700);
  border: 1px solid var(--forest-300);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.78rem;
  font-weight: 600;
}
[data-theme="dark"] .th-themes span { background: var(--surface-2); color: var(--lime-400); border-color: var(--border); }

/* Map + elevation */
.th-mapwrap { display: grid; gap: 10px; margin-bottom: 14px; }
.th-map {
  height: 400px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  z-index: 0;
}
.th-map noscript { display: block; padding: 16px; font-size: 0.9rem; }
.th-elev { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px 12px 4px; }
.th-elev-title { margin: 0 0 4px; font-weight: 700; font-size: 0.9rem; color: var(--text-strong); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.th-elev-title span { font-weight: 500; color: var(--text-muted); }
.th-elev-svg { display: block; width: 100%; height: auto; }
.th-elev-area { fill: var(--forest-300); opacity: 0.55; }
.th-elev-line { fill: none; stroke: var(--forest-600); stroke-width: 2; stroke-linejoin: round; }
.th-elev-grid { stroke: var(--border); stroke-width: 1; }
.th-elev-lbl { fill: var(--text-muted); font-family: var(--font-sans); }
.th-elev-narrow { display: none; }
.th-elev-stop circle { fill: var(--forest-700); stroke: #fff; stroke-width: 1.5; }
.th-elev-stop text { fill: var(--lime-500); font-family: var(--font-sans); font-weight: 700; }
[data-theme="dark"] .th-elev-area { fill: var(--forest-500); opacity: 0.35; }
[data-theme="dark"] .th-elev-line { stroke: var(--lime-400); }

/* Buttons */
.th-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--forest-300);
  background: var(--forest-100);
  color: var(--forest-700);
  font: 700 0.9rem var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.th-page a.th-btn { color: var(--forest-700); }
.th-btn:hover { filter: brightness(0.97); }
.th-btn-primary, .th-page a.th-btn-primary { background: var(--forest-700); border-color: var(--forest-700); color: var(--lime-500); }
[data-theme="dark"] .th-btn, [data-theme="dark"] .th-page a.th-btn { background: var(--surface-2); color: var(--lime-400); border-color: var(--border); }
[data-theme="dark"] .th-btn-primary, [data-theme="dark"] .th-page a.th-btn-primary { background: var(--forest-600); color: var(--lime-300); }

/* Text blocks */
.th-block { margin-top: 22px; }
.th-block::after { content: ""; display: block; clear: both; }
.th-block h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-strong);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-block p { line-height: 1.7; margin: 0 0 12px; }
.th-startbox { background: var(--surface-1); border-left: 4px solid var(--forest-600); border-radius: 8px; padding: 10px 14px; }
.th-gps { font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-carrefours { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; color: var(--text-muted); }
.th-carrefours .ic { flex: none; margin-top: 3px; color: var(--forest-600); }

/* Step list — folded behind a button: unfolded, the ten lists made up almost
   half of the page's height on a phone. Printing unfolds them (top-hikes.js). */
.th-steps-wrap { margin-top: 12px; }
.th-steps-toggle { list-style: none; user-select: none; }
.th-steps-toggle::-webkit-details-marker { display: none; }
.th-steps-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.th-steps-wrap[open] > .th-steps-toggle::after { margin-top: 4px; transform: rotate(-135deg); }
.th-steps-hide, .th-steps-wrap[open] .th-steps-show { display: none; }
.th-steps-wrap[open] .th-steps-hide { display: inline; }
.th-steps { list-style: none; margin: 8px 0 0; padding: 0; border-left: 3px solid var(--forest-300); }
.th-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 8px 0 8px 12px;
  line-height: 1.55;
  break-inside: avoid;
}
.th-step::before {
  content: "";
  position: absolute;
  left: -7.5px;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface-0);
  border: 3px solid var(--forest-300);
}
.th-step-km { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--forest-600); font-size: 0.86rem; padding-top: 2px; }
.th-step-stop { background: var(--forest-100); border-radius: 0 12px 12px 0; margin: 4px 0; }
.th-step-stop::before { background: var(--forest-700); border-color: var(--lime-500); }
.th-step-stop strong { display: flex; align-items: center; gap: 8px; color: var(--text-strong); }
.th-step-stop p { margin: 4px 0 0; font-size: 0.93rem; }
.th-stop-n { width: 24px; height: 24px; font-size: 0.78rem; }
.th-step-end strong { color: var(--text-strong); }
[data-theme="dark"] .th-step-stop { background: var(--surface-2); }

.th-tips ul { margin: 0; padding-left: 20px; line-height: 1.65; }
.th-tips li { margin-bottom: 6px; }
.th-back { text-align: right; margin: 14px 0 0; font-size: 0.88rem; }

/* CTA + sources */
.th-cta {
  text-align: center;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 32px 24px;
  background: var(--forest-700);
  border-radius: 22px;
  color: #fff;
}
.th-cta h2 { color: #fff; justify-content: center; }
.th-cta p { color: rgba(255, 255, 255, 0.88); margin: 0 auto 18px; max-width: 560px; line-height: 1.6; }
.th-page .th-cta a.th-btn-primary { background: var(--lime-500); color: var(--forest-900); border-color: var(--lime-500); }
.th-sources { padding-bottom: 56px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; }
.th-sources h2 { font-size: 1.2rem; }
.th-warn { display: flex; gap: 8px; align-items: flex-start; background: var(--surface-0); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.th-warn .ic { flex: none; margin-top: 3px; color: #c2410c; }

/* Leaflet labels on the per-hike maps */
.leaflet-tooltip.th-stop-label {
  background: var(--surface-0);
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 700 11px var(--font-sans);
  padding: 2px 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.th-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--forest-700);
  color: var(--lime-500);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 12px var(--font-sans);
}
.th-pin-start { background: #16a34a; color: #fff; }
.th-pin-end { background: #dc2626; color: #fff; }
.th-pin-rank { width: 30px; height: 30px; font-size: 14px; cursor: pointer; }

/* ── Phones ── */
@media (max-width: 900px) {
  .th-overview { grid-template-columns: 1fr; }
  .th-overview-map { position: relative; top: 0; height: 360px; order: -1; }
  .th-howto-grid { grid-template-columns: 1fr; }
  .th-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .th-hero { min-height: 380px; }
  .th-hero-inner { padding: 56px 16px 24px; }
  .th-intro, .th-howto, .th-sources { padding-left: 16px; padding-right: 16px; }
  .th-hike { margin: 20px 10px 0; padding: 18px 14px 16px; border-radius: 16px; }
  .th-hike-head { gap: 12px; }
  .th-rank { width: 42px; height: 42px; font-size: 1.15rem; }
  .th-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-stats li:last-child { grid-column: span 2; }
  .th-map { height: 300px; }
  .th-elev-wide { display: none; }
  .th-elev-narrow { display: block; }
  .th-photo-side { float: none; width: 100%; margin: 0 0 14px; }
  .th-step { grid-template-columns: 54px 1fr; padding-left: 10px; }
  .th-actions .th-btn { flex: 1 1 auto; justify-content: center; }
  .th-steps-toggle { display: flex; justify-content: center; }
  .th-hike { contain-intrinsic-size: auto 3000px; }
  .th-cta { margin: 32px 10px 0; padding: 26px 16px; }
}

/* ── Print: one hike per sheet when printed from its "Imprimer" button ── */
@media print {
  .header, .site-footer, .th-hero, .th-intro, .th-howto, .th-cta, .th-sources, .th-actions, .th-back, .nav-drawer, .nav-drawer-overlay { display: none !important; }
  .th-body { background: #fff; }
  body[data-print-hike] .th-hike:not(.is-printing) { display: none !important; }
  .th-hike { box-shadow: none; border: none; margin: 0; padding: 0; max-width: none; break-after: page; content-visibility: visible; }
  .th-steps-toggle { display: none !important; }
  .th-photo-hero img { max-height: 7cm; }
  .th-photo-side { width: 35%; }
  .th-map { height: 9cm; break-inside: avoid; }
  .th-step { font-size: 10.5pt; }
  .th-step-stop { background: #eef6ea !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .th-page a { color: inherit; text-decoration: none; }
}