/* ============ Cols & Crêtes ============ */
:root {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #efebe1;
  --ink: #1f2a24;
  --muted: #5f6a63;
  --line: #e2ddd1;
  --hero-bg: #1f3a2e;
  --hero-ink: #f6f3ec;
  --accent: #e9c98f;
  /* Couleurs des types (validées daltonisme) */
  --rando: #2b7a43;
  --velo: #dd8a30;
  --bikepacking: #1f6bb0;
  --course: #c2417f;
  --radius: 14px;
  --titre: Archivo, "Arial Black", sans-serif;
  --badge: #1f3a2e;
  --montagne: #f6f3ec;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131815;
    --surface: #1c231f;
    --surface-2: #242c27;
    --ink: #e9ece8;
    --muted: #9aa49e;
    --line: #2f3833;
    --hero-bg: #0e1e17;
    --rando: #237d4c;
    --velo: #c4842a;
    --bikepacking: #5a94e8;
    --course: #c95a95;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Inter, system-ui, sans-serif; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-family: var(--titre); font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; margin: 0; }
a { color: inherit; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* ---------- Menu ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1100;
  background: color-mix(in srgb, var(--hero-bg) 94%, transparent);
  backdrop-filter: blur(10px); color: var(--hero-ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner { display: flex; align-items: center; gap: 20px; height: 58px; }
.logo { text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 10px; --badge: #f6f3ec; --montagne: #1f3a2e; }
.logo svg { width: 26px; height: 26px; }
.menu { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: 999px; opacity: .8; display: inline-flex; align-items: center; gap: 7px;
}
.menu a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.menu a[aria-current="page"] { opacity: 1; background: var(--hero-ink); color: var(--hero-bg); }
.menu-groupe { display: flex; gap: 2px; align-items: center; padding: 3px; border-radius: 999px; }
.menu-groupe.on { background: rgba(255,255,255,.07); }
.menu a.menu-titre { font-weight: 700; letter-spacing: .02em; opacity: 1; }
.menu-sep { width: 1px; height: 22px; background: rgba(255,255,255,.2); margin: 0 6px; flex: none; }
.menu .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
@media (max-width: 640px) {
  .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 8px; gap: 6px; }
  .menu { margin-left: -12px; width: calc(100% + 24px); padding: 0 12px; }
}

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(1200px 420px at 80% -10%, #3c6b52 0%, transparent 60%), var(--hero-bg);
  color: var(--hero-ink); padding: 48px 0 36px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 70px; opacity: .18;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 L120 30 L190 48 L300 8 L390 40 L470 22 L560 55 L680 14 L760 38 L860 18 L960 50 L1060 20 L1200 44 L1200 70Z' fill='%23fff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; opacity: .7; margin: 0 0 10px; }
.hero h1 { font-size: clamp(44px, 9vw, 84px); font-weight: 800; }
.tagline { font: 600 clamp(17px, 2.4vw, 22px)/1.3 var(--titre); font-stretch: 112%; margin: 12px 0 0; color: var(--accent); }
.lead { max-width: 560px; opacity: .8; margin: 12px 0 28px; font-size: 17px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 1; }
.stat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 14px 16px; }
.stat b { display: block; font: 800 26px/1.1 var(--titre); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; opacity: .75; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sections ---------- */
section { margin-top: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h2 { font-size: 30px; }
.card-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Carte ---------- */
.map { height: 460px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 640px) { .map { height: 320px; } }

/* ---------- Graphique ---------- */
.chart-box { padding: 18px 18px 12px; position: relative; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .axis text { fill: var(--muted); font: 12px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.chart .total { fill: var(--ink); font: 600 12px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.chart rect.seg { stroke: var(--surface); stroke-width: 2px; }
.chart rect.seg:hover, .chart rect.seg.on { filter: brightness(1.1); }
.tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--bg);
  font-size: 13px; padding: 7px 10px; border-radius: 8px; white-space: nowrap; z-index: 5;
  transform: translate(-50%, calc(-100% - 10px)); font-variant-numeric: tabular-nums;
}
.tooltip b { font-weight: 600; }
details.table-view { margin-top: 8px; font-size: 14px; }
details.table-view summary { cursor: pointer; color: var(--muted); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }

/* ---------- Barre d'outils ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar input, .toolbar select {
  font: 14px Inter, sans-serif; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.toolbar input { flex: 1 1 220px; min-width: 0; }
@media (max-width: 640px) { .toolbar > * { flex: 1 1 140px; } }

/* ---------- Liste ---------- */
.year-group { margin-top: 28px; }
.year-group h3 { font-size: 24px; display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.year-group h3 small { font: 500 14px Inter, sans-serif; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
@media (max-width: 400px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.cover { height: 170px; position: relative; background: color-mix(in srgb, var(--c) 18%, var(--surface)); overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover svg.trace { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.cover .contours { position: absolute; inset: 0; opacity: .5; color: var(--c); }
.badge {
  position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; gap: 6px;
}
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; }
.badge.right { left: auto; right: 12px; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h4 { font: 700 18px/1.2 var(--titre); font-stretch: 108%; margin: 0; }
.meta { color: var(--muted); font-size: 14px; }
.figures { display: flex; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.figures b { font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* ---------- Page sortie ---------- */
.s-head { background: var(--hero-bg); color: var(--hero-ink); padding: 26px 0 30px; }
.back { font-size: 14px; opacity: .75; text-decoration: none; }
.back:hover { opacity: 1; }
.s-head .badge { position: static; margin: 16px 0 10px; }
.s-head h1 { font-size: clamp(32px, 6vw, 54px); font-weight: 800; }
.s-head .meta { color: inherit; opacity: .75; margin-top: 8px; font-size: 15px; }
.s-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 22px; }
@media (max-width: 900px) { .s-stats { grid-template-columns: repeat(3, 1fr); } }
.s-stats .stat b { font-size: 24px; }

.s-map { height: min(64vh, 620px); min-height: 360px; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; box-shadow: none; }
.map-card { margin-top: 24px; overflow: hidden; }
.poi-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.poi-filters button {
  font: 500 13px Inter, sans-serif; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
}
.poi-filters button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }

.profile { position: relative; padding: 12px 14px 6px; border-top: 1px solid var(--line); }
.profile svg { display: block; width: 100%; height: 190px; overflow: visible; touch-action: none; }
.profile .grid line { stroke: var(--line); }
.profile .axis text { fill: var(--muted); font: 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.profile .area { fill: var(--c); opacity: .18; }
.profile .line { fill: none; stroke: var(--c); stroke-width: 2px; stroke-linejoin: round; }
.profile .etape line { stroke: var(--muted); stroke-dasharray: 3 4; }
.profile .etape text { fill: var(--muted); font: 600 11px Inter, sans-serif; }
.profile .cursor line { stroke: var(--ink); stroke-width: 1px; }
.profile .cursor circle { fill: var(--c); stroke: var(--surface); stroke-width: 2px; }
.profile .poi-mark { font-size: 13px; cursor: pointer; }

.poi-icon {
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c, #444);
  display: grid; place-items: center; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.poi-icon.small { width: 24px; height: 24px; font-size: 12px; }
.photo-icon { width: 44px; height: 44px; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); overflow: hidden; background: #ccc; }
.photo-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.s-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 24px; align-items: start; }
@media (max-width: 900px) { .s-cols { grid-template-columns: 1fr; } }
.recit { padding: 22px 24px; }
.recit .resume { font: 600 18px/1.5 var(--titre); margin: 0 0 12px; }
.recit p { margin: 0 0 12px; }
.side { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.side h3 { font-size: 18px; margin-bottom: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  text-decoration: none; border-radius: 10px; padding: 9px 14px; font: 500 14px Inter, sans-serif; cursor: pointer;
}
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.poi-list { list-style: none; padding: 0; margin: 0; max-height: 340px; overflow: auto; }
.poi-list li button {
  width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line); padding: 7px 2px; font: 14px Inter, sans-serif; color: var(--ink); cursor: pointer;
}
.poi-list li button:hover { background: var(--surface-2); }
.poi-list small { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.poi-list .note { display: block; color: var(--muted); font-size: 12px; }
.etapes td, .etapes th { padding: 6px 6px; font-size: 14px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gallery button { padding: 0; border: none; border-radius: 12px; overflow: hidden; cursor: zoom-in; position: relative; aspect-ratio: 3/2; background: var(--surface-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gallery button:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px; color: #fff; font-size: 13px; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.photo-empty { border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }
.photo-empty code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

.lightbox { border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(5,8,6,.92); }
.lightbox .lb { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 60px; color: #fff; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 8px; }
.lightbox .lb-caption { margin-top: 12px; display: flex; gap: 14px; align-items: center; font-size: 14px; flex-wrap: wrap; justify-content: center; }
.lightbox .lb-caption button { color: #fff; background: rgba(255,255,255,.12); border: none; border-radius: 8px; padding: 6px 10px; font: 13px Inter, sans-serif; cursor: pointer; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-close { position: fixed; top: 14px; right: 14px; background: rgba(255,255,255,.12); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; cursor: pointer; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.pager a { padding: 14px 16px; text-decoration: none; }
.pager a small { display: block; color: var(--muted); font-size: 13px; }
.pager a b { font-family: var(--titre); font-stretch: 112%; font-size: 17px; }
.pager .next { text-align: right; grid-column: 2; }

.footer { color: var(--muted); font-size: 14px; text-align: center; padding: 48px 16px; }

/* ---------- Sport ---------- */
.records { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.record { padding: 14px 16px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.record:hover { border-color: var(--c, var(--ink)); }
.record small { color: var(--muted); font-size: 13px; }
.record b { font: 800 24px/1.15 var(--titre); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.record span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record i { font-style: normal; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.hero.sport { background: radial-gradient(1200px 420px at 80% -10%, #6b3c58 0%, transparent 60%), #2a1d26; }
.records-table td, .records-table th { font-size: 14px; padding: 6px; }
@media (min-width: 641px) and (max-width: 980px) { .logo span { display: none; } .menu a { padding: 7px 9px; } }
.s-head.sport { background: radial-gradient(1200px 420px at 80% -10%, #6b3c58 0%, transparent 60%), #2a1d26; }

/* ============ Multi-pages ============ */
/* Menu : libellés de groupe */
.menu .menu-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .55; padding: 0 4px 0 8px; white-space: nowrap; }
.menu > a, .menu-groupe { flex: none; }

/* Bandeau photo (accueil et pages de catégorie) */
.bandeau { position: relative; min-height: min(78vh, 680px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--hero-bg); }
.bandeau > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.bandeau::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,20,15,.15) 0%, rgba(10,20,15,.05) 35%, rgba(10,20,15,.75) 100%); }
.bandeau-texte { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 44px; width: 100%; }
.bandeau h1 { font-size: clamp(48px, 10vw, 104px); font-weight: 800; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.bandeau .lead { opacity: .92; }
.bandeau .eyebrow a, .hero .eyebrow a { text-decoration: none; }
.bandeau .eyebrow a:hover, .hero .eyebrow a:hover { text-decoration: underline; }
.bandeau-type { min-height: 440px; }
.bandeau-type h1 { font-size: clamp(42px, 8vw, 76px); }
.bandeau-type::before { background: linear-gradient(180deg, rgba(10,20,15,.25), rgba(10,20,15,.82)); }
.bandeau-type .tagline { margin-bottom: 24px; }
.bandeau .stats .stat { background: rgba(0,0,0,.3); backdrop-filter: blur(6px); }
.btn.ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.bandeau .btn.primary { background: var(--accent); color: #1f2a24; border-color: var(--accent); }

/* Chiffres clés sur fond clair */
.stats-clair .stat { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.stats-clair .stat span { color: var(--muted); opacity: 1; }

/* Tuiles des catégories */
.categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) { .categories { grid-template-columns: 1fr; } }
.categorie {
  position: relative; min-height: 320px; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none;
  display: flex; align-items: flex-end; box-shadow: var(--shadow); isolation: isolate;
}
.categorie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.categorie::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.78)); }
.categorie::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--c); }
.categorie:hover img, .categorie:focus-visible img { transform: scale(1.05); }
.categorie-texte { padding: 20px 22px 24px; }
.categorie .badge { position: static; display: inline-flex; margin-bottom: 8px; }
.categorie h3 { font-size: 34px; }
.categorie p { margin: 4px 0 10px; opacity: .9; }
.categorie-chiffres { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.categorie-chiffres b { font-size: 18px; }
.categorie small { display: block; margin-top: 8px; opacity: .75; font-size: 13px; }
.fleche { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: 20px; transition: transform .2s; }
.categorie:hover .fleche, .cat-stats:hover .fleche { transform: translateX(4px); }
.cat-stats { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 20px 22px; text-decoration: none; position: relative; }
.cat-stats b { font: 800 20px var(--titre); font-stretch: 125%; }
.cat-stats-icone { font-size: 30px; }
.cat-stats .fleche { position: static; margin-left: auto; background: var(--surface-2); }

/* Pied de page */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 10px; }
.footer-nav a { text-decoration: none; color: var(--ink); font-weight: 500; }
.footer-nav a:hover { text-decoration: underline; }

/* Statistiques */
.hero-toolbar { align-items: center; margin: 18px 0 20px; gap: 10px; font-size: 14px; }
.hero-toolbar select { flex: none; }
.table-box { padding: 6px 12px; overflow-x: auto; }
.table-box table { min-width: 620px; }
.table-box a { text-decoration: none; font-weight: 500; }
.total-row td { border-bottom: none; }
.dot-inline { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 8px; }
.heatmap { overflow-x: auto; }
.heatmap svg { display: block; min-width: 720px; width: 100%; height: auto; }
.heatmap text, .heatmap-legende { font: 11px Inter, sans-serif; fill: var(--muted); color: var(--muted); }
.heatmap-legende { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.heatmap rect.n0, .heatmap-legende rect.n0 { fill: var(--surface-2); }
.heatmap rect.n1, .heatmap-legende rect.n1 { fill: #bfe0c8; }
.heatmap rect.n2, .heatmap-legende rect.n2 { fill: #7cc293; }
.heatmap rect.n3, .heatmap-legende rect.n3 { fill: #3d9a5c; }
.heatmap rect.n4, .heatmap-legende rect.n4 { fill: #1d6236; }
@media (prefers-color-scheme: dark) {
  .heatmap rect.n1, .heatmap-legende rect.n1 { fill: #1f4a2e; }
  .heatmap rect.n2, .heatmap-legende rect.n2 { fill: #2c7444; }
  .heatmap rect.n3, .heatmap-legende rect.n3 { fill: #48a466; }
  .heatmap rect.n4, .heatmap-legende rect.n4 { fill: #86d39d; }
}
/* Cadrage des photos de catégories */
.pos-rando { object-position: center 45% !important; }
.pos-bikepacking { object-position: center 55% !important; }
.pos-course { object-position: center 88% !important; }
.pos-velo { object-position: center 70% !important; }
@media (max-width: 1100px) { .menu .menu-titre { display: none; } }
@media (min-width: 641px) and (max-width: 860px) { .menu a { padding: 7px 8px; font-size: 13px; } .menu .dot { display: none; } }
.table-box td, .table-box th { white-space: nowrap; }
.heatmap svg { min-width: 640px; }

/* ============ Logo & titres (Archivo Expanded) ============ */
.badge-logo { width: 36px; height: 36px; flex: none; display: block; }
.marque { font: 800 15px/1 var(--titre); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; }
.marque .et, h1 .et { color: var(--accent); }
.logo .marque { font-size: 15px; }
.logo-pied { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-top: 6px; }
.logo-pied .badge-logo { width: 44px; height: 44px; }
.logo-pied > span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo-pied .marque { font-size: 17px; }
.logo-pied .marque .et { color: #c9963a; }
.logo-pied .devise { font: 600 9.5px Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.footer { display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media (prefers-color-scheme: dark) { .logo-pied { --badge: #f6f3ec; --montagne: #1f3a2e; } .logo-pied .marque .et { color: var(--accent); } }

/* Grands titres en capitales larges */
.bandeau h1, .hero h1 { text-transform: uppercase; font-size: clamp(34px, 7.4vw, 78px); line-height: 1; letter-spacing: -.005em; }
.bandeau-type h1 { font-size: clamp(30px, 6vw, 60px); }
.s-head h1 { font-size: clamp(26px, 4.6vw, 44px); }
.section-head h2 { font-size: clamp(22px, 3vw, 28px); }
.year-group h3 { font-size: 22px; }
.categorie h3 { font-size: clamp(24px, 3.4vw, 32px); text-transform: uppercase; }
.side h3 { font-size: 15px; font-stretch: 112%; }
.recit h2 { font-size: 20px !important; }
.eyebrow { font-weight: 600; }
@media (min-width: 641px) and (max-width: 980px) { .logo .marque { display: none; } }
.bandeau-texte .eyebrow, .bandeau-texte .lead, .bandeau-texte .tagline { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.cover svg.illustration { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Bloc « La montagne » (randos) ---------- */
.montagne { margin-top: 24px; padding: 20px 22px; }
.montagne h2 { font-size: 20px; margin-bottom: 14px; }
.montagne-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .montagne-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .montagne-grille { grid-template-columns: 1fr; } }
.montagne-grille > div { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.montagne small { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 4px; }
.montagne-grille b { font: 800 17px/1.25 var(--titre); font-stretch: 108%; }
.montagne-grille b span { display: block; font: 500 13px Inter, sans-serif; color: var(--muted); margin-top: 3px; }
.faune { margin-top: 14px; }
.faune ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.faune li { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--rando) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rando) 30%, var(--line)); border-radius: 999px; padding: 5px 12px 5px 9px; font-size: 14px; font-weight: 500; }
.faune li span { font-size: 17px; }

/* ---------- Photos interactives ---------- */
.photo-icon { transition: transform .15s, box-shadow .15s; }
.photo-icon.estimee { border-style: dashed; }
.photo-icon.on { transform: scale(1.35); box-shadow: 0 0 0 4px var(--accent), 0 4px 14px rgba(0,0,0,.45); }
.tip-photo { display: flex; gap: 10px; align-items: center; max-width: 280px; white-space: normal; }
.tip-photo img { width: 84px; height: 62px; object-fit: cover; border-radius: 6px; flex: none; }
.profile .photo-mark { cursor: pointer; }
.profile .photo-mark line { stroke: #c2417f; stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .6; }
.profile .photo-mark circle { fill: var(--surface); stroke: #c2417f; stroke-width: 2; transition: r .15s; }
.profile .photo-mark text { font-size: 10px; }
.profile .photo-mark.on circle, .profile .photo-mark:hover circle { r: 12; fill: #f8e3ee; }
.gallery button.on { outline: 4px solid var(--accent); outline-offset: 2px; }
.photo-info { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px); }
#photos .section-head { align-items: baseline; }

/* ---------- À faire dans le coin ---------- */
.a-faire { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .a-faire { grid-template-columns: 1fr; } }
.sommet-a-faire { overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.sommet-a-faire.on { box-shadow: 0 0 0 4px var(--accent); transform: translateY(-2px); }
.sommet-photo { position: relative; height: 170px; background: color-mix(in srgb, var(--rando) 18%, var(--surface)); display: grid; place-items: center; font-size: 44px; }
.sommet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sommet-corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sommet-corps h3 { font-size: 19px; }
.sommet-corps p { margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.sommet-corps .btn-row { margin-top: auto; }
.sommet-corps .btn { padding: 7px 11px; font-size: 13px; }
.credit { font-size: 11px; color: var(--muted); }
.etoile-a-faire { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 2px dashed #c9963a; display: grid; place-items: center; font-size: 17px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.technique { font-size: 13px; font-weight: 500; color: #8a5a10; background: #fbf0dc; border-radius: 8px; padding: 6px 10px; }
@media (prefers-color-scheme: dark) { .technique { color: #f0c98a; background: #3a2e1a; } }
.photo-icon.paquet { width: 50px; height: 50px; position: relative; overflow: visible; }
.photo-icon.paquet img { border-radius: 7px; }
.photo-icon.paquet span { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: #c2417f; color: #fff; font: 700 12px/22px Inter, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }

/* ---------- Vignettes photo sur la carte (corrections) ---------- */
/* Leaflet force « width: auto » sur les images des marqueurs : on remplit la case */
.photo-icon { width: 38px; height: 38px; border-width: 2.5px; border-radius: 9px; }
.photo-icon.paquet { width: 44px; height: 44px; border-width: 3px; }
.photo-icon.paquet span { top: -8px; right: -8px; min-width: 20px; height: 20px; font-size: 11px; line-height: 20px; }
/* Infobulle : photo en haut, infos en dessous */
.tip-photo { display: flex; flex-direction: column; gap: 6px; width: 180px; max-width: none; white-space: normal; align-items: stretch; }
.tip-photo img { width: 100% !important; height: 120px; object-fit: cover; border-radius: 6px; }
.tip-photo div { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; line-height: 1.35; padding: 0 2px 2px; }
.tip-photo div b { width: 100%; font-size: 13px; }
.tip-photo div span { white-space: nowrap; }
.profile .photo-mark text.nb { font: 700 10.5px Inter, sans-serif; fill: #c2417f; }

/* ---------- Carrousel de photos ---------- */
.carrousel { position: relative; }
.car-piste { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; border-radius: 14px; }
.car-piste::-webkit-scrollbar { display: none; }
.car-photo { flex: 0 0 calc((100% - 30px) / 4); aspect-ratio: 4 / 3; scroll-snap-align: start; position: relative; padding: 0; border: none; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
@media (max-width: 900px) { .car-photo { flex-basis: calc((100% - 20px) / 3); } }
@media (max-width: 600px) { .car-photo { flex-basis: 78%; } }
.car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.car-photo:hover img { transform: scale(1.04); }
.car-photo.on { outline: 4px solid var(--accent); outline-offset: -4px; }
.car-photo figcaption { position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px; color: #fff; font-size: 13px; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.car-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface); color: var(--ink); font-size: 24px; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.25); transition: opacity .2s; }
.car-prev { left: -10px; } .car-next { right: -10px; }
.car-nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .car-nav { display: none; } }
.car-bas { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.car-points { display: flex; gap: 6px; }
.car-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.car-points i.on { background: var(--ink); transform: scale(1.25); }
.car-compteur { font-size: 13px; font-variant-numeric: tabular-nums; }
.car-tout { margin-left: auto; }

/* ---------- Bandeau d'accueil : photo de crête au coucher du soleil ---------- */
.bandeau > img.pos-bandeau { object-position: 88% 52%; }
/* Dégradé : sombre en bas et à gauche (sous le texte), ciel doré préservé en haut à droite */
.bandeau:not(.bandeau-type)::before {
  background:
    linear-gradient(180deg, rgba(8,16,12,.35) 0%, rgba(8,16,12,0) 22%, rgba(8,16,12,0) 45%, rgba(8,16,12,.55) 72%, rgba(8,16,12,.86) 100%),
    linear-gradient(90deg, rgba(8,16,12,.5) 0%, rgba(8,16,12,.15) 45%, rgba(8,16,12,0) 70%);
}
.bandeau:not(.bandeau-type) .bandeau-texte h1 { text-shadow: 0 2px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); }
.bandeau:not(.bandeau-type) .eyebrow { opacity: .9; }
@media (max-width: 640px) {
  .bandeau:not(.bandeau-type)::before { background: linear-gradient(180deg, rgba(8,16,12,.3) 0%, rgba(8,16,12,0) 20%, rgba(8,16,12,.35) 45%, rgba(8,16,12,.88) 100%); }
}
.pos-rando { object-position: center 40% !important; }

/* ---------- Accueil : bandeau plein écran + invitation à défiler ---------- */
html { scroll-padding-top: var(--topbar-h, 58px); }
.bandeau-accueil { min-height: calc(100vh - var(--topbar-h, 58px)); min-height: calc(100svh - var(--topbar-h, 58px)); }
.bandeau-accueil .bandeau-texte { padding-bottom: 120px; }
.defiler {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-decoration: none;
}
.defiler-texte { font: 600 11px Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; opacity: .85; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.defiler-rond {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
  animation: rebond 2.2s ease-in-out infinite; transition: background .2s, border-color .2s;
}
.defiler-rond svg { width: 22px; height: 22px; }
.defiler:hover .defiler-rond, .defiler:focus-visible .defiler-rond { background: var(--accent); border-color: var(--accent); color: #1f2a24; }
@keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .defiler-rond { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 640px) {
  .bandeau-accueil .bandeau-texte { padding-bottom: 104px; }
  .defiler { bottom: 16px; }
  .defiler-texte { display: none; }
}
/* Écrans très bas (paysage sur téléphone) : on garde le bandeau lisible sans le forcer */
@media (max-height: 520px) { .bandeau-accueil { min-height: 0; } .defiler { display: none; } .bandeau-accueil .bandeau-texte { padding-bottom: 44px; } }

/* ---------- Accueil : les 4 tuiles d'activités tiennent dans un écran ---------- */
.ecran-categories {
  --dispo: calc(100svh - var(--topbar-h, 58px));
  margin-top: 0; padding: 22px 0 24px; min-height: var(--dispo);
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-content: center;
}
.ecran-categories .section-head { margin-bottom: 12px; }
.ecran-categories .section-head h2 { font-size: clamp(20px, 2.2vw, 26px); }
.ecran-categories .categories { grid-template-columns: 1fr 1fr; gap: 12px; }
/* Grand écran : 4 tuiles portrait côte à côte */
.ecran-categories .categorie { min-height: 0; height: clamp(320px, calc(var(--dispo) - 120px), 640px); }
.ecran-categories .categorie-texte { padding: 16px 16px 20px; }
.ecran-categories .categorie h3 { font-size: clamp(19px, 1.85vw, 26px); }
.ecran-categories .categorie p { font-size: 14px; margin: 4px 0 8px; }
.ecran-categories .categorie-chiffres { gap: 4px 12px; font-size: 13px; }
.ecran-categories .categorie-chiffres b { font-size: 16px; }
.ecran-categories .fleche { width: 34px; height: 34px; font-size: 17px; top: 12px; right: 12px; }
/* Écran moyen : deux rangées de deux */
@media (max-width: 1099px) {
  .ecran-categories { grid-template-columns: 1fr; gap: 14px; }
  .ecran-categories .categorie { height: clamp(190px, calc((var(--dispo) - 150px) / 2), 420px); }
  .ecran-categories .categorie h3 { font-size: clamp(19px, 3vw, 26px); }
}
/* Mobile : grille 2 × 2 compacte, l'essentiel seulement */
@media (max-width: 640px) {
  .ecran-categories { padding: 14px 0 16px; gap: 10px; }
  .ecran-categories .section-head { margin-bottom: 8px; }
  .ecran-categories .section-head .muted { display: none; }
  .ecran-categories .categories { gap: 8px; }
  .ecran-categories .categorie { height: clamp(150px, calc((var(--dispo) - 110px) / 2), 340px); }
  .ecran-categories .categorie-texte { padding: 10px 10px 13px; }
  .ecran-categories .categorie .badge, .ecran-categories .categorie p, .ecran-categories .categorie small { display: none; }
  .ecran-categories .categorie h3 { font-size: 15px; letter-spacing: 0; }
  .ecran-categories .categorie-chiffres { font-size: 11.5px; gap: 0 8px; margin-top: 4px; }
  .ecran-categories .categorie-chiffres b { font-size: 13px; }
  .ecran-categories .categorie-chiffres span:nth-child(3) { display: none; }
  .ecran-categories .fleche { width: 26px; height: 26px; font-size: 13px; top: 8px; right: 8px; }
}

/* Version publique : un seul groupe (rando + bikepacking), deux grandes tuiles */
.ecran-categories.solo { grid-template-columns: 1fr; }
.ecran-categories.solo .categories { gap: 18px; }
.ecran-categories.solo .categorie { height: clamp(360px, calc(var(--dispo) - 130px), 720px); }
.ecran-categories.solo .categorie-texte { padding: 28px 30px 32px; }
.ecran-categories.solo .categorie h3 { font-size: clamp(30px, 4.2vw, 56px); }
.ecran-categories.solo .categorie p { font-size: clamp(15px, 1.4vw, 18px); max-width: 32ch; }
.ecran-categories.solo .categorie-chiffres { gap: 6px 22px; font-size: 15px; }
.ecran-categories.solo .categorie-chiffres b { font-size: clamp(20px, 2vw, 26px); }
.ecran-categories.solo .fleche { width: 44px; height: 44px; font-size: 20px; top: 18px; right: 18px; }
@media (max-width: 720px) {
  .ecran-categories.solo .categories { grid-template-columns: 1fr; gap: 12px; }
  .ecran-categories.solo .categorie { height: clamp(220px, calc((var(--dispo) - 100px) / 2), 420px); }
  .ecran-categories.solo .categorie-texte { padding: 16px 18px 20px; }
  .ecran-categories.solo .categorie h3 { font-size: 28px; }
  .ecran-categories.solo .categorie p { display: block; font-size: 14px; }
  .ecran-categories.solo .categorie-chiffres { font-size: 13px; gap: 0 14px; }
  .ecran-categories.solo .categorie-chiffres b { font-size: 17px; }
  .ecran-categories.solo .categorie-chiffres span:nth-child(3) { display: inline; }
  .ecran-categories.solo .fleche { width: 32px; height: 32px; font-size: 15px; top: 12px; right: 12px; }
}

/* ---------- Pages d'activité et Statistiques : bandeau plein écran ---------- */
.bandeau-type { min-height: calc(100vh - var(--topbar-h, 58px)); min-height: calc(100svh - var(--topbar-h, 58px)); }
.bandeau-type .bandeau-texte { padding-bottom: 116px; }
.bandeau-type h1 { font-size: clamp(38px, 7vw, 84px); line-height: 1; }
.bandeau-type .tagline { margin-bottom: 26px; }
.bandeau-type::before { background: linear-gradient(180deg, rgba(8,16,12,.3) 0%, rgba(8,16,12,0) 25%, rgba(8,16,12,.15) 45%, rgba(8,16,12,.6) 72%, rgba(8,16,12,.88) 100%); }
.pos-stats { object-position: center 55% !important; }
.bandeau-stats .hero-toolbar label { color: #fff; opacity: .85; }
.bandeau-stats .hero-toolbar select { background: rgba(255,255,255,.92); }
main#contenu > section:first-child { margin-top: 32px; }
@media (max-width: 640px) {
  .bandeau-type .bandeau-texte { padding-bottom: 92px; }
  .bandeau-type .tagline { margin-bottom: 18px; }
}
@media (max-height: 520px) { .bandeau-type { min-height: 0; } .bandeau-type .bandeau-texte { padding-bottom: 44px; } }

/* ---------- Page de sortie : bandeau plein écran ---------- */
.s-head.bandeau-sortie { padding: 0; background: #16271f; }
.s-fond { position: absolute; inset: 0; }
.s-fond img, .s-fond svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-fond img { object-position: center 45%; }
.bandeau-sortie .bandeau-texte { padding-top: 32px; }
.bandeau-sortie h1 { font-size: clamp(30px, 5.6vw, 66px); text-transform: none; }
.bandeau-sortie .back { color: #fff; }
.bandeau-sortie .badge { position: static; margin: 14px 0 10px; display: inline-flex; }
.bandeau-sortie .meta { color: #fff; opacity: .88; margin: 10px 0 22px; font-size: 15px; }
.bandeau-sortie .s-stats { margin-top: 0; }
.bandeau-sortie .stat { background: rgba(0,0,0,.32); border-color: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
@media (max-width: 640px) { .bandeau-sortie .s-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } .bandeau-sortie .stat { padding: 10px 11px; } .bandeau-sortie .stat b { font-size: 19px; } .bandeau-sortie .stat span { font-size: 11.5px; } }
/* L'illustration de course, souvent claire, est assombrie derrière le texte blanc */
.s-fond.illustration svg { filter: brightness(.52) saturate(.85); }

/* ---------- Listes : années repliables ---------- */
details.annee { border-top: 1px solid var(--line); padding-top: 4px; }
details.annee:first-child { border-top: none; }
details.annee > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-radius: 10px; }
details.annee > summary::-webkit-details-marker { display: none; }
details.annee > summary:hover h3 small { color: var(--ink); }
details.annee > summary h3 { margin: 0; }
details.annee[open] > summary { margin-bottom: 6px; }
.annee-fleche { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); position: relative; transition: transform .2s; }
.annee-fleche::before { content: ""; position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
details.annee[open] .annee-fleche { transform: rotate(180deg); }
details.annee:not([open]) > summary h3 { color: var(--muted); }

/* ---------- Barre recherche / année / tri : une seule ligne ---------- */
.section-head .toolbar { flex: 1 1 520px; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
.section-head .toolbar input { flex: 1 1 auto; min-width: 140px; max-width: 420px; }
.section-head .toolbar select { flex: 0 0 auto; }
@media (max-width: 640px) {
  .section-head .toolbar { flex-wrap: wrap; flex-basis: 100%; }
  .section-head .toolbar input { flex: 1 1 100%; max-width: none; }
  .section-head .toolbar select { flex: 1 1 0; min-width: 0; }
}

/* =====================================================================
   Menu flottant (par-dessus les bandeaux) — remplace l'ancienne barre
   ===================================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  background: none; border: none; backdrop-filter: none; color: #fff;
  padding: 14px 16px 0; pointer-events: none;
}
.topbar-inner {
  pointer-events: auto; max-width: 1160px; height: 58px; margin: 0 auto; padding: 0 8px 0 16px;
  display: flex; align-items: center; gap: 12px; border-radius: 999px;
  background: rgba(14, 26, 20, .28); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.topbar.defile .topbar-inner, .topbar.menu-ouvert .topbar-inner { background: rgba(20, 38, 29, .86); box-shadow: 0 10px 34px rgba(0,0,0,.28); }
.topbar .logo { color: #fff; }
.topbar .logo .badge-logo { width: 34px; height: 34px; }
.topbar .logo .marque { display: inline; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-lien, .nav-bouton {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  color: #fff; text-decoration: none; font: 500 14.5px Inter, sans-serif; background: none; border: none; cursor: pointer; opacity: .88;
  transition: background .2s, opacity .2s;
}
.nav-lien:hover, .nav-bouton:hover, .nav-groupe.ouvert .nav-bouton { background: rgba(255,255,255,.12); opacity: 1; }
.nav-lien[aria-current="page"], .nav-groupe.actif > .nav-bouton { background: #fff; color: #17271f; opacity: 1; }
.nav-bouton svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.nav-groupe { position: relative; }
.nav-groupe.ouvert .nav-bouton svg { transform: rotate(180deg); }
/* Sous-menu : panneau vitré sous le bouton */
.nav-panneau {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -6px); min-width: 280px;
  padding: 8px; border-radius: 18px; background: rgba(20, 38, 29, .94); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px); box-shadow: 0 18px 40px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-panneau::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* pont pour le survol */
.nav-groupe.ouvert .nav-panneau { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 861px) { .nav-groupe:hover .nav-panneau, .nav-groupe:focus-within .nav-panneau { opacity: 1; visibility: visible; transform: translate(-50%, 0); } }
.nav-lien-type { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #fff; text-decoration: none; }
.nav-lien-type:hover, .nav-lien-type:focus-visible { background: rgba(255,255,255,.1); }
.nav-lien-type[aria-current="page"] { background: rgba(255,255,255,.16); }
.nav-lien-type .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-top: 5px; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.nav-lien-type b { display: block; font: 700 15px var(--titre); font-stretch: 112%; }
.nav-lien-type small { display: block; font-size: 12.5px; opacity: .7; margin-top: 2px; }

/* Burger + menu mobile */
.nav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); cursor: pointer; position: relative; }
.nav-burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s; }
.nav-burger span:nth-child(1) { top: 15px; } .nav-burger span:nth-child(2) { top: 21px; } .nav-burger span:nth-child(3) { top: 27px; }
.topbar.menu-ouvert .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar.menu-ouvert .nav-burger span:nth-child(2) { opacity: 0; }
.topbar.menu-ouvert .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile {
  pointer-events: auto; max-width: 1160px; margin: 10px auto 0; padding: 10px; border-radius: 22px;
  background: rgba(20, 38, 29, .95); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile .nav-lien { height: 46px; font-size: 16px; }
.nav-mobile .nav-lien[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
.nav-mobile-titre { margin: 10px 14px 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
@media (max-width: 860px) {
  .nav { display: none; }
  .nav-burger { display: block; }
  .topbar-inner { padding-right: 7px; }
}
@media (max-width: 640px) { .topbar { padding: 10px 10px 0; } .topbar-inner { height: 54px; } }
/* L'ancien comportement « cacher le nom sous 980 px » n'a plus lieu d'être */
@media (min-width: 641px) and (max-width: 980px) { .logo .marque { display: inline; } }

/* ---------- Les bandeaux passent sous le menu et prennent tout l'écran ---------- */
.bandeau-accueil, .bandeau-type { min-height: 100vh; min-height: 100svh; }
.bandeau .bandeau-texte { padding-top: calc(var(--topbar-h, 82px) + 20px); }
.ecran-categories { --dispo: calc(100svh - var(--topbar-h, 82px)); }
html { scroll-padding-top: var(--topbar-h, 82px); }

/* =====================================================================
   Filtres modernisés (recherche + menus déroulants), sur tout le site
   ===================================================================== */
.toolbar input, .toolbar select, .hero-toolbar select {
  -webkit-appearance: none; appearance: none;
  height: 44px; border-radius: 999px; border: 1px solid var(--line);
  background-color: var(--surface); color: var(--ink);
  font: 500 14.5px Inter, system-ui, sans-serif; line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
/* Menus déroulants : flèche dessinée, bien décollée du bord */
.toolbar select, .hero-toolbar select {
  padding: 0 46px 0 18px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235f6a63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 16px 16px;
}
/* Recherche : loupe à gauche */
.toolbar input[type="search"] {
  padding: 0 18px 0 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%235f6a63' stroke-width='2.2'/%3E%3Cpath d='M16 16l4 4' stroke='%235f6a63' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 16px center; background-size: 18px 18px;
}
.toolbar input[type="search"]::placeholder { color: var(--muted); opacity: .8; }
.toolbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%235f6a63' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.toolbar input:hover, .toolbar select:hover, .hero-toolbar select:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); }
.toolbar input:focus-visible, .toolbar select:focus-visible, .hero-toolbar select:focus-visible {
  outline: none; border-color: var(--rando); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rando) 22%, transparent);
}
/* Un filtre actif (autre que la valeur par défaut) est mis en avant */
.toolbar select.actif { background-color: color-mix(in srgb, var(--rando) 10%, var(--surface)); border-color: color-mix(in srgb, var(--rando) 45%, var(--line)); }
@media (prefers-color-scheme: dark) {
  .toolbar select, .hero-toolbar select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239aa49e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
/* Sur le bandeau Statistiques : menu vitré */
.bandeau-stats .hero-toolbar select { background-color: rgba(255,255,255,.94); border-color: rgba(255,255,255,.5); color: #1f2a24; }
/* Alignement : même hauteur, aucun débordement */
.section-head { align-items: center; }
.section-head .toolbar { min-width: 0; }
.section-head .toolbar select { min-width: 0; max-width: 230px; }
@media (max-width: 640px) { .section-head .toolbar select { max-width: none; padding-left: 16px; padding-right: 40px; background-position: right 14px center; } }
.bandeau-stats .hero-toolbar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235f6a63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 16px 16px;
}
@media (max-width: 640px) {
  .section-head .toolbar select { font-size: 13.5px; padding-left: 14px; padding-right: 34px; background-position: right 12px center; background-size: 14px 14px; }
}

/* ---------- Cartes MapLibre ---------- */
.map { position: relative; overflow: hidden; }
.maplibregl-map { font: 14px Inter, sans-serif; }
.maplibregl-ctrl-attrib { font-size: 10.5px; }
.maplibregl-popup-content { font: 13px/1.45 Inter, sans-serif; color: #1f2a24; border-radius: 10px; padding: 9px 12px; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.maplibregl-popup-content b { font-family: var(--titre); font-weight: 700; font-size: 13px; }
.maplibregl-popup-close-button { font-size: 18px; padding: 0 6px; color: #5f6a63; }
.maplibregl-popup.tip { pointer-events: none; }
.maplibregl-popup.tip-image .maplibregl-popup-content { padding: 6px; }
.maplibregl-marker:has(.poi-icon) { z-index: 2; }
.maplibregl-marker:has(.etoile-a-faire) { z-index: 3; }
.maplibregl-marker.marqueur-photo { z-index: 4; cursor: pointer; }
.maplibregl-marker:has(.photo-icon.on) { z-index: 9999; }
.maplibregl-popup { z-index: 10000; }
.borne { width: 15px; height: 15px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.borne.depart { background: #2b7a43; }
.borne.arrivee { background: #1f3a2e; }
.survol-point { width: 16px; height: 16px; border-radius: 50%; background: var(--c, #c2417f); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.45); }
.carte-boutons { position: absolute; left: 12px; bottom: 12px; z-index: 6; display: flex; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 130px); }
.carte-boutons button { height: 36px; padding: 0 14px; border-radius: 999px; border: none; cursor: pointer; font: 600 13px Inter, sans-serif;
  background: rgba(255,255,255,.94); color: #1f2a24; box-shadow: 0 3px 12px rgba(0,0,0,.2); transition: background .15s, color .15s; }
.carte-boutons button:hover { background: #fff; }
.carte-boutons button[aria-pressed="true"] { background: #1f3a2e; color: #fff; }
.carte-boutons button:focus-visible { outline: 2px solid #e9c98f; outline-offset: 2px; }
.legende-pente { position: absolute; left: 12px; top: 12px; z-index: 6; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; max-width: calc(100% - 70px);
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); font: 500 11.5px Inter, sans-serif; color: #3d4741; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.legende-pente b { font-weight: 700; }
.legende-pente i { display: inline-block; width: 16px; height: 5px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
@media (max-width: 640px) {
  .carte-boutons { left: 8px; bottom: 8px; gap: 6px; max-width: calc(100% - 100px); }
  .carte-boutons button { height: 32px; padding: 0 11px; font-size: 12px; }
  .legende-pente { left: 8px; top: 8px; border-radius: 12px; font-size: 10.5px; gap: 2px 8px; }
}
/* Crédits de la carte : juste le « i », le texte apparaît au survol ou au toucher (sinon il passe sous les boutons) */
.map .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover):not(:focus-within), .traces-carte .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover):not(:focus-within) { padding: 0; min-height: 24px; min-width: 24px; }
.map .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover):not(:focus-within) .maplibregl-ctrl-attrib-inner, .traces-carte .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover):not(:focus-within) .maplibregl-ctrl-attrib-inner { display: none; }
.map .maplibregl-ctrl-attrib.maplibregl-compact-show:hover, .map .maplibregl-ctrl-attrib.maplibregl-compact-show:focus-within { position: relative; z-index: 7; }
.note-reconstituee { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- Météo du jour ---------- */
.meteo-jour { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.meteo-icone { font-size: 30px; line-height: 1; width: 40px; text-align: center; flex: none; }
.meteo-jour b { display: block; font-size: 14.5px; }
.meteo-jour span { font-size: 13px; color: var(--muted); }
.meteo-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Panorama du point culminant ---------- */
.panorama { margin-top: 28px; }
.pano-carte { padding: 0; overflow: hidden; }
.pano-defile { overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pano-defile.glisse { cursor: grabbing; user-select: none; }
.pano-defile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pano-defile svg { display: block; }
.pano-horizon { stroke: #ffffff; stroke-opacity: .55; stroke-dasharray: 4 6; }
.pano-pied { fill: var(--surface-2); }
.pano-graduation { stroke: var(--muted); stroke-width: 1; }
.pano-cardinal { font: 700 12px Inter, sans-serif; fill: var(--ink); }
.pano-sommet line { stroke: #1f3a2e; stroke-opacity: .35; stroke-width: 1; }
.pano-sommet circle { fill: #1f3a2e; stroke: #fff; stroke-width: 1.2; }
.pano-sommet text { font: 12px Inter, sans-serif; fill: #1f2a24; }
.pano-nom { font-weight: 600; }
.pano-alt { fill: #5f6a63; font-size: 11px; }
.pano-sommet:hover line { stroke-opacity: .9; }
.pano-sommet:hover text { fill: #c2417f; }
.pano-sommet:hover circle { fill: #c2417f; }
.pano-note { margin: 0; padding: 10px 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- Toutes mes traces ---------- */
.page-traces { background: #22322b; }
.traces-ecran { position: relative; height: 100svh; min-height: 520px; }
.traces-carte { position: absolute; inset: 0; }
.traces-panneau { position: absolute; z-index: 5; left: 16px; top: calc(var(--topbar-h, 82px) + 8px); width: 340px; padding: 20px 20px 16px;
  border-radius: 20px; background: rgba(12, 24, 19, .8); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #eef1ec; box-shadow: 0 10px 40px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.traces-panneau h1 { font: 800 24px/1.1 var(--titre); font-stretch: 125%; text-transform: uppercase; margin: 0 0 6px; color: #fff; }
.traces-resume { margin: 0 0 14px; font-size: 14px; color: #c9d3cc; }
.traces-resume b { color: #fff; }
.traces-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.traces-types button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #eef1ec; font: 600 13px Inter, sans-serif; transition: opacity .15s, background .15s; }
.traces-types button i { width: 9px; height: 9px; border-radius: 50%; background: var(--lum); box-shadow: 0 0 8px 2px var(--lum); }
.traces-types button[aria-pressed="false"] { opacity: .4; }
.traces-types button[aria-pressed="false"] i { box-shadow: none; }
.traces-outils { display: flex; gap: 8px; }
.traces-outils select, .traces-tout { height: 38px; border-radius: 999px; font: 600 13px Inter, sans-serif; color: #eef1ec; cursor: pointer;
  background-color: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.traces-outils select { flex: 1; appearance: none; -webkit-appearance: none; padding: 0 34px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23eef1ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.traces-outils select option { color: #1f2a24; }
.traces-outils select.actif { border-color: #e9c98f; }
.traces-tout { padding: 0 14px; }
.traces-outils select:focus-visible, .traces-tout:focus-visible, .traces-types button:focus-visible { outline: 2px solid #e9c98f; outline-offset: 2px; }
.traces-aide { margin: 12px 0 0; font-size: 12.5px; color: #9fb0a6; }
.page-traces .maplibregl-ctrl-group { background: rgba(12,24,19,.85); }
.page-traces .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.1); }
.page-traces .maplibregl-ctrl-icon { filter: invert(1); }
.page-traces .maplibregl-ctrl-top-right { top: calc(var(--topbar-h, 82px) + 4px); }
.maplibregl-popup.tip-sombre .maplibregl-popup-content { background: rgba(12,24,19,.94); color: #eef1ec; border: 1px solid rgba(255,255,255,.12); }
.maplibregl-popup.tip-sombre .maplibregl-popup-tip { border-top-color: rgba(12,24,19,.94); border-bottom-color: rgba(12,24,19,.94); }
.maplibregl-popup.tip-sombre b { color: #fff; }
.traces-ouvrir { display: inline-block; margin-top: 6px; color: #e9c98f; font-weight: 600; }
@media (max-width: 760px) {
  .traces-panneau { top: auto; bottom: 10px; left: 8px; right: 8px; width: auto; padding: 14px 14px 12px; border-radius: 16px; }
  .traces-panneau h1 { font-size: 18px; }
  .traces-resume { margin-bottom: 10px; font-size: 13px; }
  .traces-types { gap: 5px; margin-bottom: 10px; }
  .traces-types button { height: 30px; padding: 0 10px; font-size: 12px; }
  .traces-aide { display: none; }
}
.cat-traces { background: linear-gradient(120deg, #0f1d17, #1f3a2e); color: #eef1ec; border-color: transparent; }
.cat-traces .muted { color: #b9c7bf; }
.cat-traces + .cat-stats { margin-top: 12px; }
.cat-traces .fleche { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Cotation de difficulté ---------- */
.cotation { --n: #3f9a5c; display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 Inter, sans-serif; white-space: nowrap; }
.cotation.n2 { --n: #c9a227; } .cotation.n3 { --n: #dd8a30; } .cotation.n4 { --n: #c8452f; }
.cotation .jauge { display: inline-flex; gap: 2px; }
.cotation .jauge i { width: 5px; height: 11px; border-radius: 2px; background: currentColor; opacity: .2; }
.cotation .jauge i.on { background: var(--n); opacity: 1; }
.cot-detail { display: inline-block; padding: 3px 6px; border-radius: 6px; font: 700 11px/1 Inter, sans-serif; background: var(--surface-2); color: var(--ink); }
.cot-detail.t1 { background: #f3d46b; color: #3a3000; }
.cot-detail.t2, .cot-detail.t3 { background: #fff; color: #c8452f; box-shadow: inset 0 0 0 2px #c8452f; }
.cot-detail.t3 { background: #c8452f; color: #fff; }
.cot-detail.t4, .cot-detail.t5, .cot-detail.t6 { background: #fff; color: #2d63b8; box-shadow: inset 0 0 0 2px #2d63b8; }
.cot-detail.t5, .cot-detail.t6 { background: #2d63b8; color: #fff; }
/* En-tête : sur le bandeau sombre */
.cot-entete { margin-left: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); vertical-align: middle; }
.cot-entete .jauge i { background: #fff; }
/* Tuiles */
.cot-carte { margin-top: 10px; color: var(--muted); }
/* Bloc de détail */
.cotation-bloc .cot-ligne { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; }
.cotation-bloc .cot-ligne + .cot-ligne { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.cotation-bloc small { font-size: 12px; color: var(--muted); }
.cotation-bloc b { font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.cotation-bloc .muted { font-size: 12.5px; }
.cot-barre { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 6px; gap: 1px; }
.cot-barre i, .cot-legende i { background: #f3d46b; }
.cot-barre i.t2, .cot-legende i.t2 { background: #e8a291; } .cot-barre i.t3, .cot-legende i.t3 { background: #c8452f; }
.cot-barre i.t4, .cot-legende i.t4 { background: #8fb0e6; } .cot-barre i.t5, .cot-legende i.t5 { background: #2d63b8; } .cot-barre i.t6, .cot-legende i.t6 { background: #173c7a; }
.cot-legende { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.cot-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------- Infobulle de la cotation ---------- */
.cot-info { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font: italic 700 10px/1 Georgia, serif; background: currentColor; opacity: .55; }
.cot-info { color: inherit; background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.cotation[role="button"] { cursor: help; border-radius: 999px; }
.cotation[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cot-carte { cursor: help; }
.infobulle { position: absolute; z-index: 10050; width: min(340px, calc(100vw - 20px)); padding: 14px 16px; border-radius: 14px;
  background: #13241c; color: #e9eee9; font: 13px/1.5 Inter, sans-serif; box-shadow: 0 12px 36px rgba(0,0,0,.35); pointer-events: auto; }
.infobulle::after { content: ""; position: absolute; left: calc(var(--fleche, 50%) - 7px); bottom: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #13241c; }
.infobulle.dessous::after { bottom: auto; top: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #13241c; }
.infobulle p { margin: 0 0 8px; }
.infobulle .ib-titre { margin: 0 0 4px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.infobulle .ib-titre b { color: #fff; }
.infobulle .ib-titre ~ .ib-titre { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.infobulle .ib-note { font-size: 12px; color: #a9b8ae; margin: 6px 0 0; }
.ib-echelle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 2px; }
.ib-niveau { display: flex; flex-direction: column; padding: 5px 6px; border-radius: 8px; font-size: 11px; color: #a9b8ae; background: rgba(255,255,255,.05); border-top: 3px solid var(--n, #3f9a5c); }
.ib-niveau.n2 { --n: #c9a227; } .ib-niveau.n3 { --n: #dd8a30; } .ib-niveau.n4 { --n: #c8452f; }
.ib-niveau b { font-size: 11.5px; color: #e9eee9; }
.ib-niveau.actif { background: rgba(255,255,255,.16); color: #fff; }
.ib-t { display: flex; gap: 5px; }
.ib-t .cot-detail { opacity: .45; }
.ib-t .cot-detail.actif { opacity: 1; transform: scale(1.12); }

/* ---------- Course : progression ---------- */
.chart .grille-v { stroke: var(--line); stroke-dasharray: 2 4; }
.chart .tendance { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; opacity: .75; }
.chart circle.seance { fill: var(--course); stroke: var(--surface); stroke-width: 2; opacity: .75; cursor: pointer; }
.chart circle.seance.competition { fill: #e9c98f; stroke: var(--course); stroke-width: 2.5; opacity: 1; }
.chart circle.seance.on { opacity: 1; r: 7; }
.legend .leg-ligne { width: 16px; height: 2px; border-radius: 1px; background: var(--ink); opacity: .75; }
.legend .leg-compet { border-radius: 50%; background: #e9c98f; box-shadow: inset 0 0 0 2px var(--course); }
.tooltip .muted-inv { opacity: .7; font-size: 12px; }
.sous-titre { margin-top: 26px; }
.sous-titre h3 { font-size: 18px; margin: 0; }
.predictions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prediction { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.prediction small { color: var(--muted); font-size: 13px; }
.prediction b { font: 800 26px/1.1 var(--titre); font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--course); }
.prediction span { font-size: 13px; color: var(--muted); }
.petite-note { font-size: 13px; margin: 10px 2px 0; }
.histo-records { padding: 6px 18px; }
.histo-ligne { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; padding: 12px 0; }
.histo-ligne + .histo-ligne { border-top: 1px solid var(--line); }
.histo-nom b { display: block; font-size: 15px; }
.histo-nom span { font-size: 12.5px; color: #2b7a43; font-weight: 600; }
.histo-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.histo-etapes li { display: flex; align-items: center; gap: 6px; }
.histo-etapes li + li::before { content: "→"; color: var(--muted); font-size: 12px; }
.histo-etapes a { display: flex; flex-direction: column; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); text-decoration: none; color: inherit; line-height: 1.2; }
.histo-etapes a b { font-variant-numeric: tabular-nums; font-size: 14px; }
.histo-etapes a span { font-size: 11.5px; color: var(--muted); }
.histo-etapes li.actuel a { background: var(--course); color: #fff; }
.histo-etapes li.actuel a span { color: rgba(255,255,255,.85); }
@media (max-width: 760px) {
  .predictions { grid-template-columns: repeat(2, 1fr); }
  .histo-ligne { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Objectifs annuels ---------- */
.objectifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.objectif { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.objectif-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.objectif-tete span { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.objectif-tete i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.objectif-tete small { color: var(--muted); font-size: 12.5px; }
.objectif-valeur { font-size: 14px; color: var(--muted); }
.objectif-valeur b { font: 800 30px/1 var(--titre); font-stretch: 112%; color: var(--ink); font-variant-numeric: tabular-nums; }
.objectif-valeur span { float: right; font-weight: 700; color: var(--ink); font-size: 15px; margin-top: 8px; }
.objectif-barre { position: relative; height: 12px; border-radius: 6px; background: var(--surface-2); overflow: visible; }
.objectif-rempli { height: 100%; border-radius: 6px; background: var(--c); transition: width .6s ease; }
.objectif-repere { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.objectif-repere::after { content: "aujourd'hui"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.objectif-statut { margin: 12px 0 0; font-size: 13px; line-height: 1.45; }
.objectif.atteint .objectif-statut { color: #2b7a43; font-weight: 600; }

/* ---------- Survol : photo à l'endroit de la prise de vue ---------- */
.survol-photo { position: absolute; z-index: 7; right: 54px; top: 12px; margin: 0; width: min(300px, 46%); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.35); opacity: 0; transform: translateY(-8px) scale(.97); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.survol-photo.visible { opacity: 1; transform: none; }
.survol-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.survol-photo figcaption { padding: 7px 11px; font: 12.5px/1.35 Inter, sans-serif; color: #1f2a24; display: flex; flex-direction: column; }
.survol-photo figcaption span { color: #5f6a63; }
@media (max-width: 640px) { .survol-photo { right: 48px; top: 8px; width: 42%; } }
@media (prefers-reduced-motion: reduce) { .survol-photo { transition: none; } }

/* ---------- Page d'un massif ---------- */
.massifs-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 26px 0 6px; }
.massifs-nav > .muted { font-size: 13px; margin-right: 4px; }
.massifs-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13px; }
.massifs-nav a span { font-size: 11px; font-weight: 700; color: var(--muted); }
.massifs-nav a[aria-current="page"] { background: var(--rando); border-color: var(--rando); color: #fff; }
.massifs-nav a[aria-current="page"] span { color: rgba(255,255,255,.8); }
.massif-intro { margin-top: 18px; padding: 22px 24px; }
.massif-intro h2 { margin: 0 0 12px; }
.massif-intro-grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.massif-texte p { margin: 0 0 12px; line-height: 1.6; }
.massif-chiffres { grid-template-columns: 1fr 1fr; }
.massif-carte { height: 520px; }
.sommets-gravis { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sommet-gravi { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; }
.sommet-gravi .sommet-icone { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rando); color: #fff; font-size: 13px; }
.sommet-gravi b { display: block; font-size: 14.5px; }
.sommet-gravi > div > span { font-size: 12.5px; color: var(--muted); }
.sommet-fois { display: flex; flex-wrap: wrap; gap: 4px; }
.sommet-fois a { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.massif-sommet { width: 22px; height: 22px; border-radius: 50%; background: var(--rando); color: #fff; border: 2px solid #fff; display: grid; place-items: center; font-size: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.lien-massif { color: inherit; text-decoration: none; border-bottom: 2px solid var(--rando); }
.lien-massif:hover { color: var(--rando); }
@media (max-width: 760px) {
  .massif-intro-grille { grid-template-columns: 1fr; }
  .massif-carte { height: 380px; }
}
.massif-chiffres small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.faune small { display: block; font-size: 12.5px; color: var(--muted); }
.objectifs-annee { grid-column: 1 / -1; margin: 6px 0 -4px; font-size: 16px; color: var(--muted); }
.objectifs-annee:first-child { margin-top: 0; }
.objectif-note { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.objectifs-course { margin-bottom: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

/* ---------- Massifs ---------- */
.grid-massifs .cover img { width: 100%; height: 100%; object-fit: cover; }
.massif-tuile .meta { min-height: 2.6em; }
.pastille-massif { display: flex; align-items: center; gap: 6px; text-decoration: none; color: #fff; white-space: nowrap; }
.pastille-massif b { display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: 50%; background: var(--rando); border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); font: 700 13px Inter, sans-serif; }
.pastille-massif span { padding: 3px 9px; border-radius: 999px; background: rgba(31,58,46,.88); font: 600 12px Inter, sans-serif; }
.pastille-massif:hover b { transform: scale(1.1); }

/* ---------- Impressions et matériel ---------- */
.impressions { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--surface-2); }
.impressions-note { display: flex; flex-direction: column; gap: 2px; }
.impressions-note span { font-size: 12px; color: var(--muted); }
.etoiles { font-size: 20px; letter-spacing: 1px; color: color-mix(in srgb, var(--muted) 35%, transparent); line-height: 1; }
.etoiles i { font-style: normal; }
.etoiles i.on { color: #e3a521; }
.impressions dl { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.impressions dt { font-size: 12px; color: var(--muted); }
.impressions dd { margin: 0; font-weight: 600; font-size: 14px; }
.materiel-bloc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.materiel-bloc li { display: flex; gap: 10px; align-items: center; }
.mat-icone { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 18px; flex: none; }
.materiel-bloc b, .mat-tete b { display: block; font-size: 14px; }
.materiel-bloc small, .mat-tete small { color: var(--muted); font-size: 12.5px; }
.materiel-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.materiel-carte { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.materiel-carte.retraite { opacity: .65; }
.mat-tete { display: flex; gap: 10px; align-items: center; }
.mat-km { font-size: 14px; color: var(--muted); }
.mat-km b { font: 800 26px/1 var(--titre); font-stretch: 112%; color: var(--ink); }
.mat-details { font-size: 12.5px; color: var(--muted); }
.mat-usure { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.mat-usure div { height: 100%; background: #2b7a43; border-radius: 4px; }
.mat-usure div.bientot { background: #dd8a30; } .mat-usure div.fin { background: #c8452f; }
.mat-usure-txt { font-size: 11.5px; color: var(--muted); }
/* Vélo et course : pas de récit, les infos s'étalent sur toute la largeur */
.s-cols.sans-recit { grid-template-columns: 1fr; }
.s-cols.sans-recit .side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 28px; align-items: start; }
.s-cols.sans-recit .side > div:empty { display: none; }

/* ---------- Page d'une sortie : l'essentiel et les infos pratiques (sans récit) ---------- */
.s-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 28px; align-items: start; }
.s-infos:empty { display: none; }
.info-carte { padding: 16px 18px; }
.info-carte h3 { font-size: 15px; font-stretch: 112%; margin: 0 0 10px; }
.info-carte .impressions { margin: 0; padding: 0; background: none; }
.info-texte { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.s-infos + .map-card { margin-top: 18px; }
.s-pratique { margin-top: 36px; }
.s-pratique-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.info-poi .poi-list { max-height: 300px; }
.records-table, .etapes { width: 100%; border-collapse: collapse; }
.s-infos + .montagne { margin-top: 18px; }
.montagne + .map-card { margin-top: 24px; }

/* ---------- Mur de photos (page d'une sortie) ---------- */
.mur-photos { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 8px; }
.mur-photo { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--surface-2); }
.mur-photos[style*="--n:1"] .mur-photo, .mur-photos[style*="--n:2"] .mur-photo { aspect-ratio: 16 / 10; }
.mur-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mur-photo:hover img, .mur-photo.on img { transform: scale(1.05); }
.mur-photo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mur-photo.on { box-shadow: 0 0 0 3px var(--accent); }
.mur-plus { position: absolute; inset: 0; display: none; place-items: center; align-content: center; background: rgba(15,26,20,.55); color: #fff; font: 800 30px/1 var(--titre); font-stretch: 112%; }
.mur-plus small { display: block; font: 600 13px Inter, sans-serif; margin-top: 4px; text-align: center; }
.mur-plus-8 { display: grid; }
.mur-bas { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 700px) {
  .mur-photos { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .mur-photos[style*="--n:1"] { grid-template-columns: 1fr; }
  .mur-photo:nth-child(n + 5) { display: none; }
  .mur-plus-8 { display: none; }
  .mur-plus-4 { display: grid; }
}
/* L'essentiel : deux colonnes (difficulté | météo + trace) */
.s-infos { grid-template-columns: 1fr 1fr; }
.s-infos-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s-infos-col:empty { display: none; }
.s-infos:has(.s-infos-col:empty) { grid-template-columns: 1fr; }
@media (max-width: 760px) { .s-infos { grid-template-columns: 1fr; } }
/* Cartes sombres (pages par type) */
.map.carte-sombre { background: #22322b; border-color: #2c3d35; }
.carte-sombre .maplibregl-ctrl-group { background: rgba(12,24,19,.85); }
.carte-sombre .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.1); }
.carte-sombre .maplibregl-ctrl-icon { filter: invert(1); }

/* ---------- La frise des pages d'activité : un bloc par mois, une rangée de cartes ---------- */
/* Frise détaillée */
.frise { position: relative; padding-left: 26px; }
.frise::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.f-mois { position: relative; margin-bottom: 22px; }
.f-mois-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.f-point { position: absolute; left: -24px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ct, #2b7a43); }
.f-mois-tete b { font: 700 17px var(--titre); font-stretch: 108%; }
.f-mois-tete small { color: var(--muted); font-size: 13px; }
.f-cartes { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.f-carte { flex: 0 0 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .15s; }
.f-carte:hover { transform: translateY(-3px); }
.f-carte-image { position: relative; height: 120px; background: var(--surface-2); }
.f-carte-image > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-carte-image .cover { height: 100%; border-radius: 0; }
.f-carte-image .cover .badge { display: none; }
.f-jour { position: absolute; top: 8px; left: 8px; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: rgba(255,255,255,.95); color: #1f2a24; display: grid; place-items: center; font: 800 14px var(--titre); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.f-carte-corps { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.f-carte-corps b { font-size: 14px; line-height: 1.3; }
.f-carte-corps small { color: var(--muted); font-size: 12.5px; }
.f-carte-corps .cotation { margin-top: 4px; }
@media (max-width: 640px) { .f-carte { flex-basis: 180px; } .f-carte-image { height: 100px; } }
.annee-frise .frise { margin: 6px 0 4px; }
.annee-frise .f-mois:last-child { margin-bottom: 6px; }