/* ==========================================================================
   Design tokens
   ========================================================================== */
/* ---------------------------------------------------------------------
   Palette "Mousse & Baie" — testée puis écartée au profit de l'originale.
   Pour la réactiver : copier ces 13 valeurs dans le bloc :root actif
   ci-dessous, à la place des valeurs "Forêt & Terracotta".
   --forest-900: #2b3328;
   --forest-800: #3a4535;
   --forest-700: #4d5c45;
   --forest-500: #7c8a70;
   --forest-100: #eef0e9;
   --cream: #f5f3ee;
   --paper: #fffefb;
   --charcoal: #2c2b26;
   --stone: #75736b;
   --stone-200: #ddd9cd;
   --terracotta: #8c3a4e;
   --terracotta-dark: #6f2d3d;
   --gold: #c9a15a;
   --------------------------------------------------------------------- */
:root {
  /* Palette active : Forêt & Terracotta (originale) */
  --forest-900: #1b2e22;
  --forest-800: #24402e;
  --forest-700: #2f5238;
  --forest-500: #4a7a56;
  --forest-100: #e7efe4;
  --cream: #f7f4ec;
  --paper: #fffdf8;
  --charcoal: #26241f;
  --stone: #6b6a63;
  --stone-200: #d9d5c8;
  --terracotta: #c5622f;
  --terracotta-dark: #a44e23;
  --gold: #d3a13a;
  --shadow-soft: 0 12px 32px rgba(27, 46, 34, 0.16);
  --shadow-hard: 0 4px 14px rgba(27, 46, 34, 0.28);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --font-display: "Sora", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; line-height: 1.1; }
p { line-height: 1.65; margin: 0 0 1em; color: var(--charcoal); }
button { font-family: inherit; cursor: pointer; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--forest-700);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5em;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--terracotta); color: #fff; box-shadow: var(--shadow-hard); }
.btn-primary:hover { background: var(--terracotta-dark); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-outline { background: transparent; color: var(--forest-800); border: 1.5px solid var(--forest-700); }
.btn-outline:hover { background: var(--forest-800); color: #fff; }

/* ==========================================================================
   Top site nav (small, unobtrusive — main nav is the fan menu)
   ========================================================================== */
.site-brand {
  position: fixed;
  top: 36px;
  left: 30px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 1px 10px rgba(0,0,0,.35);
  letter-spacing: .01em;
}
.site-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
/* Fixed position: stays on screen while the page scrolls past the hero
   photo onto the plain cream background, so the shadow above has to hold
   up on both — not just on a photo. */

/* ==========================================================================
   Fan / dock menu
   ========================================================================== */
.fan-menu {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;
}
.fan-menu__toggle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--forest-800);
  box-shadow: var(--shadow-soft);
  border: none;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .2s ease;
  position: relative;
  z-index: 3;
}
.fan-menu__toggle:hover { transform: scale(1.06); }
.fan-menu.is-open .fan-menu__toggle { background: var(--terracotta); transform: rotate(-8deg); }

.fan-menu__items {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 2;
}
.fan-menu__item {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-hard);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  opacity: 0;
  transform: translate(0, 0) scale(.4);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  pointer-events: none;
}
.fan-menu__item .ico { font-size: 1.3rem; line-height: 1; }
.fan-menu__item .lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--forest-800);
  white-space: nowrap;
  line-height: 1;
}
.fan-menu.is-open .fan-menu__item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--tx), var(--ty)) scale(1);
}
.fan-menu.is-open .fan-menu__item:hover { background: var(--forest-800); }
.fan-menu.is-open .fan-menu__item:hover .ico,
.fan-menu.is-open .fan-menu__item:hover .lbl { color: #fff; }

.fan-menu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 46, 34, .18);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1;
}
.fan-menu.is-open .fan-menu__backdrop { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Homepage — fullscreen slideshow
   ========================================================================== */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--forest-900);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s ease-out;
}
.hero-slide.is-active img { transform: scale(1); }
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,25,18,.15) 0%, rgba(15,25,18,.05) 40%, rgba(15,25,18,.75) 100%);
}
.hero-slide__caption {
  position: absolute;
  left: 6%;
  bottom: 12%;
  z-index: 2;
  color: #fff;
  max-width: 640px;
}
.hero-slide__caption .eyebrow { color: var(--gold); }
.hero-slide__caption h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.hero-slide__meta {
  display: flex;
  gap: 1.4em;
  margin: .9em 0 1.4em;
  font-size: .9rem;
  font-weight: 600;
}
.hero-slide__meta span { display: flex; align-items: center; gap: .4em; }

.hero-dots {
  position: absolute;
  left: 6%;
  bottom: 5%;
  z-index: 3;
  display: flex;
  gap: .5em;
}
.hero-dots button {
  width: 34px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.35);
  border: none; padding: 0;
  position: relative; overflow: hidden;
}
.hero-dots button::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
}
.hero-dots button.is-active::after { animation: dot-progress 5.5s linear forwards; }
@keyframes dot-progress { to { transform: scaleX(1); } }

.hero-arrows {
  position: absolute;
  right: 6%;
  bottom: 5%;
  z-index: 3;
  display: flex;
  gap: .6em;
}
.hero-arrows button {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.5);
  color: #fff; font-size: 1.1rem;
  backdrop-filter: blur(6px);
}
.hero-arrows button:hover { background: rgba(255,255,255,.3); }

.hero-scroll-cue {
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  color: #fff; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .18em;
  z-index: 3; opacity: .8;
  display: flex; flex-direction: column; align-items: center; gap: .4em;
}
.hero-scroll-cue .line { width: 1px; height: 26px; background: rgba(255,255,255,.6); animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue { 0%,100%{ transform: scaleY(.4); opacity:.4;} 50%{ transform: scaleY(1); opacity:1; } }

.home-teaser { max-width: 1300px; margin: 0 auto; padding: 4rem 6% 2rem; }
.home-teaser__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.home-teaser__head h2 { font-size: 1.7rem; margin: 0; }
/* Only ever 2-3 cards here (unlike the full archive grid, which can grow to
   many rows) — auto-fit lets them stretch to fill the row instead of
   auto-fill leaving a phantom empty track that starves them of width and
   wraps their meta row onto 3 lines. */
.home-teaser .rando-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 640px) {
  .home-teaser { padding: 2.6rem 5% 1rem; }
}

/* ==========================================================================
   Generic page banner (randonnées / conseils / contact)
   ========================================================================== */
.page-banner {
  position: relative;
  height: 46vh;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest-900);
}
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.page-banner::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,32,24,.35), rgba(20,32,24,.85)); }
.page-banner__inner { position: relative; z-index: 2; padding: 0 6% 4em; color: #fff; }
.page-banner__inner .eyebrow { display: block; margin-bottom: .5em; }
.page-banner__inner h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.page-banner__inner p { color: rgba(255,255,255,.85); max-width: 560px; }

/* ==========================================================================
   Randonnées page — split layout
   ========================================================================== */
.randos-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2.4rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 6% 5rem;
  align-items: start;
}

.filter-panel {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem 2rem;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 24px;
}
.filter-panel h2 { font-size: 1.15rem; margin-bottom: .2em; }
.filter-panel .filter-sub { color: var(--stone); font-size: .85rem; margin-bottom: 1.4em; }

.filter-group { margin-bottom: 1.5rem; border-bottom: 1px solid var(--stone-200); padding-bottom: 1.4rem; }
.filter-group:last-of-type { border-bottom: none; }
.filter-group label.group-label {
  display: block; font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .7em; color: var(--forest-800);
}
.chip-row { display: flex; flex-wrap: wrap; gap: .5em; }
.chip {
  border: 1.5px solid var(--stone-200);
  background: #fff;
  border-radius: 999px;
  padding: .45em 1em;
  font-size: .82rem;
  font-weight: 600;
  color: var(--stone);
  transition: all .15s ease;
}
.chip input { display: none; }
.chip:has(input:checked) { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.chip:hover { border-color: var(--forest-700); }

.range-field { display: flex; flex-direction: column; gap: .5em; }
.range-field .range-values { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--forest-800); }
input[type="range"] { accent-color: var(--terracotta); width: 100%; }

.select-field select, .text-field input {
  width: 100%;
  padding: .7em .9em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--stone-200);
  font-family: inherit;
  font-size: .88rem;
  background: #fff;
}
.text-field { position: relative; }
.text-field .use-location {
  position: absolute; right: 8px; top: 8px;
  font-size: .7rem; font-weight: 700;
  color: var(--forest-700); background: var(--forest-100);
  padding: .35em .6em; border-radius: 999px; border: none;
}

.toggle-field { display: flex; align-items: center; justify-content: space-between; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.toggle-field span { margin-right: 1em; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; appearance: none; -webkit-appearance: none; }
.switch .track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--stone-200); border-radius: 999px; transition: .2s; }
.switch .track::before { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track { background: var(--forest-700); }
.switch input:checked + .track::before { transform: translateX(22px); }

.filter-panel .btn-primary { width: 100%; justify-content: center; margin-top: .4em; }
.filter-count { text-align: center; font-size: .78rem; color: var(--stone); margin-top: .8em; }

.results-col .results-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.results-head h2 { font-size: 1.3rem; }
.results-head .sort select { border: none; background: transparent; font-weight: 600; font-size: .85rem; }

.rando-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
  margin-bottom: 3rem;
}

.rando-card {
  background: var(--paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rando-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27,46,34,.22); }
.rando-card__img { position: relative; height: 190px; }
.rando-card__img img { width: 100%; height: 100%; object-fit: cover; }
.rando-card__tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--terracotta); color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  padding: .35em .7em; border-radius: 999px;
}
.rando-card__price {
  position: absolute; top: 12px; right: 12px;
  background: rgba(20,32,24,.75); color: #fff; backdrop-filter: blur(4px);
  font-size: .72rem; font-weight: 700;
  padding: .35em .7em; border-radius: 999px;
}
.rando-card__body { padding: 1.1rem 1.2rem 1.3rem; }
.rando-card__body h3 { font-size: 1.08rem; margin-bottom: .3em; }
.rando-card__meta { display: flex; flex-wrap: wrap; gap: .8em; font-size: .78rem; color: var(--stone); margin-bottom: .8em; }
.rando-card__meta span { display: flex; align-items: center; gap: .35em; }
.rando-card__foot { display: flex; align-items: center; justify-content: space-between; }
.like-btn {
  display: flex; align-items: center; gap: .4em;
  background: none; border: none; font-weight: 700; font-size: .85rem; color: var(--stone);
}
.like-btn .heart { transition: transform .2s ease; }
.like-btn.is-liked { color: var(--terracotta); }
.like-btn.is-liked .heart { transform: scale(1.2); }
.like-btn:active .heart { transform: scale(1.4); }

/* Favorites / highlights rail */
.highlights-rail {
  background: var(--forest-900);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  color: #fff;
  margin-bottom: 2rem;
}
.highlights-rail h2 { color: #fff; font-size: 1.1rem; }
.highlights-rail .sub { color: rgba(255,255,255,.6); font-size: .82rem; margin-bottom: 1.2em; }
.highlight-item {
  display: flex; gap: .9em; padding: .8em 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.highlight-item:last-child { border-bottom: none; }
.highlight-item__rank { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); width: 1.4em; flex-shrink: 0; }
.highlight-item img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.highlight-item__info h4 { color: #fff; font-size: .92rem; margin-bottom: .25em; }
.highlight-item__info .likes { font-size: .76rem; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: .35em; }

/* ==========================================================================
   Single rando page
   ========================================================================== */
.rando-hero { position: relative; height: 64vh; min-height: 420px; overflow: hidden; background: var(--forest-900); }
.rando-hero img { width: 100%; height: 100%; object-fit: cover; }
.rando-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,25,18,.1), rgba(15,25,18,.85)); }
.rando-hero__inner { position: absolute; left: 6%; right: 6%; bottom: 13%; z-index: 2; color: #fff; }
.rando-hero__inner h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: .5em; }
.rando-hero__badges { display: flex; gap: .6em; flex-wrap: wrap; margin-bottom: 1.6em; }
.badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); font-size: .75rem; font-weight: 700; padding: .4em .85em; border-radius: 999px; }

.recap-wrap { max-width: 1400px; margin: -70px auto 0; padding: 0 6% 3rem; position: relative; z-index: 5; }
.recap-card {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 2rem 2rem 1rem;
  margin-bottom: 2rem;
}
/* Randonnée recap: two explicit rows (primary stats, then secondary/smaller
   ones) instead of one flat auto-fit grid — with up to 9 possible stats,
   letting them all land in whichever row auto-fit chose made the layout
   feel random; a fixed split reads more intentional. */
.recap-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1.4rem 1rem; }
.recap-row + .recap-row { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--stone-200); }
.recap-row--secondary .recap-stat .ico { font-size: 1.05rem; }
.recap-row--secondary .recap-stat .val { font-size: .95rem; }
.recap-row--secondary .recap-stat .lbl { font-size: .62rem; }
.recap-stat { text-align: center; }
.recap-stat .ico { font-size: 1.4rem; margin-bottom: .3em; display: block; }
.recap-stat .val { font-family: var(--font-display); font-size: 1.3rem; display: block; }
.recap-stat .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--stone); }

/* Événement detail page: full-width photo, then a floated stat sidebar
   beside the text — same float-beside-flowing-text technique as the
   randonnée day card's info column (.day-card__side/.day-card__text). */
.evt-full-photo { display: block; width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); margin-bottom: 2rem; }
@media (max-width: 640px) { .evt-full-photo { height: 240px; } }
.evt-layout::after { content: ""; display: table; clear: both; }
.evt-stats {
  float: right; width: 260px; margin: 0 0 1.5rem 2rem;
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 1.4rem 1.5rem;
}
.evt-stat { display: flex; align-items: flex-start; gap: .7em; padding: .7em 0; border-bottom: 1px solid var(--stone-200); }
.evt-stat:first-child { padding-top: 0; }
.evt-stat:last-child { padding-bottom: 0; border-bottom: none; }
.evt-stat .ico { font-size: 1.15rem; line-height: 1.4; }
.evt-stat .val { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.evt-stat .lbl { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--stone); margin-top: .1em; }
.evt-body { min-width: 0; }
@media (max-width: 780px) {
  .evt-stats { float: none; width: 100%; margin: 0 0 1.5rem; }
}

.recap-map-card {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  overflow: hidden; margin-bottom: 3rem;
}
.recap-map-card__head { padding: 1.4rem 1.8rem 1.1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1em; }
.recap-map-card__head h2 { font-size: 1.2rem; margin: 0; }
.map-el { height: 380px; width: 100%; }
.map-el--locked { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--forest-100); border-radius: var(--radius-md); }
.map-el--locked p { color: var(--stone); font-weight: 600; margin: 0; padding: 0 1.5rem; }
/* Server-rendered "screenshot" (see inc/gpx-static-preview.php) standing in
   for the interactive map/profile on a locked premium day — same look at a
   glance, no live GPX file for the browser to fetch. */
.map-el--preview { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.map-el--preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-el__badge {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(20, 32, 24, .82); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .45em .9em; border-radius: 999px; white-space: nowrap;
}
.recap-map-card .download-row { padding: 1rem 1.8rem 0; display: flex; justify-content: center; gap: .8em; flex-wrap: wrap; }
.recap-map-card .includes-note { padding: .7em 1.8rem 1.6rem; font-size: .82rem; color: var(--stone); margin: 0; text-align: center; }

.section-title-row { max-width: 1400px; margin: 0 auto; padding: 0 6%; }
.section-title-row h2 { font-size: 1.5rem; }
.section-title-row .sub { color: var(--stone); max-width: 100%; text-wrap: pretty; }

.day-section-wrap {
  max-width: 1400px; margin: 0 auto 3.4rem; padding: 0 6%;
}
.day-tabs {
  display: flex; gap: .6em; margin-bottom: 1.4rem; flex-wrap: wrap;
}
.day-tab {
  border: 1.5px solid var(--stone-200); background: #fff; border-radius: 999px;
  padding: .7em 1.5em; font-size: .92rem; font-weight: 700; color: var(--stone);
}
.day-tab.is-active { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.day-tab:hover:not(.is-active) { border-color: var(--forest-700); }
.day-panel { display: none; }
.day-panel.is-active { display: block; }
.day-card {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden;
}
.day-card__head {
  padding: 1.6rem 2rem;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; flex-wrap: wrap;
  border-bottom: 1px solid var(--stone-200);
}
.day-card__head .day-num { font-family: var(--font-display); font-size: .95rem; color: var(--terracotta); font-weight: 700; }
.day-card__head h3 { font-size: 1.35rem; margin: .15em 0 .5em; }
.day-card__stats { display: flex; gap: 1.3em; flex-wrap: wrap; font-size: .82rem; color: var(--stone); }
.day-card__stats span { display: flex; align-items: center; gap: .4em; font-weight: 600; }

.map-tabs { display: flex; gap: .4em; padding: 1rem 2rem 0; }
.map-tabs button {
  border: 1.5px solid var(--stone-200); background: #fff; border-radius: 999px;
  padding: .55em 1.2em; font-size: .82rem; font-weight: 700; color: var(--stone);
}
.map-tabs button.is-active { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }

.map-tab-panels { padding: 1rem 2rem 1.5rem; position: relative; }
.map-tab-panel { display: none; }
.map-tab-panel.is-active { display: block; }
.elevation-el { height: 260px; width: 100%; background: var(--forest-100); border-radius: var(--radius-md); }
.map-tab-panel .mini-carousel { height: 380px; margin: 0; }

/* Floated (not grid) on purpose: a grid's side column runs the full height
   of the row, keeping the narrative narrow long after the info boxes have
   ended. Floating lets the text wrap around the boxes only while they
   actually last, then reclaim the full width below. */
.day-card__body { padding: 1.6rem 2rem 2rem; }
.day-card__body::after { content: ""; display: table; clear: both; }
.day-card__side { float: right; width: 260px; margin: 0 0 1.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.day-card__text { min-width: 0; overflow-wrap: break-word; }
.day-card__text::after { content: ""; display: table; clear: both; }

/* Editor-inserted images (align left/right/center + captions) — plain
   photo, no card-style shadow/frame around it, just rounded corners and
   enough margin to keep text from touching the edge. */
.day-card__text img.alignleft,
.article-body img.alignleft { float: left; max-width: 45%; margin: 0 1.4rem .8rem 0; border-radius: var(--radius-md); cursor: zoom-in; }
.day-card__text img.alignright,
.article-body img.alignright { float: right; max-width: 45%; margin: 0 0 .8rem 1.4rem; border-radius: var(--radius-md); cursor: zoom-in; }
.day-card__text img.aligncenter,
.article-body img.aligncenter { display: block; max-width: 100%; height: auto; margin: 1.2rem auto; border-radius: var(--radius-md); cursor: zoom-in; }
/* WordPress tags an unaligned image "alignnone" — not absent of an align
   class — so this can't just be :not([class*="align"]). max-width (not a
   flat width: 100%) lets a resized-up image actually get bigger, up to the
   column's width, instead of every image being forced to the exact same
   100% regardless of the size chosen in the editor. */
.day-card__text img:not(.alignleft):not(.alignright):not(.aligncenter),
.article-body img:not(.alignleft):not(.alignright):not(.aligncenter) { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1em 0; cursor: zoom-in; }

/* Blockquote: the "citation en retrait" look — a left rule + indent,
   matching the recap/stage callouts the user wants for step summaries.
   Deliberately does NOT clear a preceding float: several short quotes are
   meant to stack beside one tall photo (see the reference layout), each
   keeping its own rule sized to its own height. overflow:hidden gives
   each quote its own block-formatting-context so it narrows to sit
   beside the float instead of running full-width underneath it. */
.day-card__text blockquote, .article-body blockquote {
  position: relative;
  overflow: hidden;
  margin: 1.4em 0 1.4em 1.6rem;
  padding: .2em 0 .2em 1.3em;
  color: var(--stone);
  font-style: italic;
}
.day-card__text blockquote::before, .article-body blockquote::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--terracotta);
}
.day-card__text blockquote p, .article-body blockquote p { margin-bottom: .5em; }
.day-card__text blockquote p:last-child, .article-body blockquote p:last-child { margin-bottom: 0; }

/* Plain photo, same as the raw <img> rules above — no card-style
   background/shadow "frame" around it. */
.day-card__text .wp-caption,
.article-body .wp-caption {
  max-width: 100% !important;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 .8rem;
}
.day-card__text .wp-caption.alignleft, .article-body .wp-caption.alignleft { float: left; max-width: 45%; margin-right: 1.4rem; }
.day-card__text .wp-caption.alignright, .article-body .wp-caption.alignright { float: right; max-width: 45%; margin-left: 1.4rem; }
.day-card__text .wp-caption img, .article-body .wp-caption img { border-radius: 0; box-shadow: none; margin: 0; cursor: zoom-in; }
/* The caption itself only shows in the lightbox (see initLightbox in main.js), not inline next to the text. */
.day-card__text .wp-caption-text, .day-card__text .wp-caption dd,
.article-body .wp-caption-text, .article-body .wp-caption dd {
  display: none;
}
@media (max-width: 640px) {
  .day-card__text img.alignleft, .day-card__text img.alignright,
  .day-card__text .wp-caption.alignleft, .day-card__text .wp-caption.alignright,
  .article-body img.alignleft, .article-body img.alignright,
  .article-body .wp-caption.alignleft, .article-body .wp-caption.alignright {
    float: none; margin-left: 0; margin-right: 0; width: 100% !important;
  }
}
.day-card__text h4 { font-size: 1rem; margin-top: 1.2em; }
.day-card__text h4:first-child { margin-top: 0; }
/* Paragraphs get line-height/spacing from the global `p` rule — lists
   don't inherit that from anywhere, so without this they fall back to the
   browser's own (tighter) default and read as cramped next to the text
   around them. */
.day-card__text ul, .day-card__text ol, .article-body ul, .article-body ol {
  line-height: 1.65; margin: 0 0 1em; padding-left: 1.3em;
}
.day-card__text li, .article-body li { margin-bottom: .4em; }
.day-card__text li:last-child, .article-body li:last-child { margin-bottom: 0; }
/* WordPress collapses the blank lines an author leaves around a typed
   "---" separator, so without explicit margins here the rule ends up
   glued to whatever heading/paragraph follows it. */
.day-card__text hr, .article-body hr { border: none; border-top: 1px solid var(--stone-200); margin: 2.4em 0 2em; }
.day-card__text .stage { display: flex; gap: .8em; margin: 1em 0; padding: .9em 1em; background: var(--forest-100); border-radius: var(--radius-sm); }
.day-card__text .stage .ico { font-size: 1.2rem; }
.day-card__text .stage strong { display: block; font-size: .88rem; }
.day-card__text .stage span.detail { font-size: .8rem; color: var(--stone); }

.day-card__side { display: flex; flex-direction: column; gap: 1rem; }
/* Generic content block — reuse for water points, photo spots, weather, access info, or anything else */
.info-box { background: var(--forest-100); border-radius: var(--radius-md); padding: .7rem 1.1rem 1.1rem; }
.info-box h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--forest-800); margin-top: 0; margin-bottom: .9em; }
.info-box ul { margin: 0; padding-left: 1.1em; font-size: .84rem; }
.info-box li { margin-bottom: .4em; }
.info-box p { font-size: .84rem; margin-bottom: 0; }
.photo-spot { display: flex; gap: .6em; align-items: center; margin-bottom: .6em; }
.photo-spot img { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; }
.photo-spot span { font-size: .8rem; }

/* Paywall / premium blur */
.day-preview { margin-bottom: 1em; }
.premium-wrap { position: relative; }
.premium-blur {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  max-height: 320px;
  overflow: hidden;
  /* Multiple stops ease the fade in gradually instead of holding fully
     opaque then suddenly dropping off — that sharp kink is what read as
     "a straight line" cutting across the blurred text. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 15%, rgba(0,0,0,.8) 40%, rgba(0,0,0,.4) 65%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 15%, rgba(0,0,0,.8) 40%, rgba(0,0,0,.4) 65%, transparent 92%);
}
.paywall-cta {
  position: relative;
  margin-top: 2rem;
  text-align: center;
  padding: 2rem 1.5rem 2.2rem;
  background: var(--forest-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.paywall-cta p { max-width: 380px; margin: 0 auto .9em; font-size: .86rem; color: var(--stone); }
.paywall-cta .price { display: block; font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .5em; }
.paywall-cta .includes-title { font-weight: 700; color: var(--charcoal); margin-bottom: .5em; }
.paywall-cta .includes-list {
  list-style: none; margin: 0 auto 1.2em; padding: 0; max-width: 360px; text-align: left;
  font-size: .86rem; color: var(--stone); display: grid; gap: .5em;
}

/* Utility content sections (conseils / contact) */
.simple-page { max-width: 1100px; margin: 0 auto; padding: 3rem 6% 5rem; }

.category-row { display: flex; flex-wrap: wrap; gap: .6em; margin-bottom: 2rem; }
.cat-chip {
  border: 1.5px solid var(--stone-200); background: #fff; border-radius: 999px;
  padding: .55em 1.2em; font-size: .85rem; font-weight: 700; color: var(--stone);
}
.cat-chip.is-active { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.cat-chip:hover:not(.is-active) { border-color: var(--forest-700); }

.tip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.4rem; }
.tip-card {
  display: block;
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.tip-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27,46,34,.22); }
.tip-card__img { position: relative; height: 140px; }
.tip-card__img img { width: 100%; height: 100%; object-fit: cover; }
.tip-card__img .ico {
  position: absolute; bottom: -20px; left: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow-hard);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.tip-card__body { padding: 1.7rem 1.4rem 1.4rem; }
.tip-card__body .cat-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--terracotta); margin-bottom: .5em;
}
.tip-card__body h3 { font-size: 1.02rem; }
.tip-card__body p { font-size: .88rem; margin-bottom: 0; }

/* Article page (conseil-detail) + reusable photo-in-text patterns */
.article-wrap { max-width: 1000px; margin: 0 auto; padding: 3rem 5% 5rem; }
.article-wrap--wide { max-width: 1160px; }
.article-back {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .84rem; font-weight: 700; color: var(--forest-700);
  margin-bottom: 1.4rem;
}
.article-back:hover { color: var(--terracotta); }
.article-meta { display: flex; gap: 1.4em; font-size: .82rem; color: var(--stone); margin-bottom: 2rem; font-weight: 600; }
.article-body h2 { font-size: 1.25rem; margin-top: 1.8em; }
.article-body::after { content: ""; display: table; clear: both; }

.article-figure {
  margin: .3em 0 1.4em;
  max-width: 300px;
}
.article-figure img { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); width: 100%; }
.article-figure figcaption { font-size: .78rem; color: var(--stone); margin-top: .6em; line-height: 1.4; }
.article-figure--right { float: right; margin-left: 1.8rem; }
.article-figure--left { float: left; margin-right: 1.8rem; }

/* Full-bleed carousel: the active slide fills most of the viewport width,
   with its neighbours peeking in at either edge — no frame, no shadow, no
   dots, just the photos themselves. Each slide is only as wide as its own
   photo's aspect ratio at the shared fixed height (capped by max-width so
   one panorama can't swallow the whole row) — so a portrait photo stays
   narrow and uncropped instead of being stretched/cropped into a landscape
   box. The active slide is centered via JS (translateX computed from its
   real offset/width, which already accounts for this variable width). */
.mini-carousel { position: relative; height: 460px; margin: 1.6rem 0 2rem; clear: both; overflow: hidden; }
.mini-carousel__track { display: flex; align-items: stretch; gap: 14px; height: 100%; transition: transform .45s ease; transform: translateX(var(--carousel-offset, 0px)); }
.mini-carousel__slide { flex: 0 0 auto; height: 100%; max-width: 82%; cursor: pointer; }
.mini-carousel__slide.is-active { cursor: default; }
/* margin + height: the generic .day-card__text/.article-body img rule
   (higher specificity, thanks to its three :not() clauses) sets a vertical
   margin meant for standalone prose photos, and — since the "let a resized
   photo keep its own proportions" fix — height:auto, which would win over
   the height:100% below and break the whole slide-sizing model (each
   slide's width is derived FROM that height, at the photo's own aspect
   ratio). Both need !important to actually stick on a carousel image.
   border-radius is set explicitly here (rather than relying on that same
   generic rule) so every carousel gets rounded corners regardless of which
   container it sits in — including the "Vues" tab, which lives outside
   .day-card__text. */
.mini-carousel__slide img { height: 100% !important; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 !important; border-radius: var(--radius-md); }
.mini-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.85); font-size: 1.2rem; color: var(--forest-800);
  box-shadow: var(--shadow-hard); z-index: 2;
}
.mini-carousel__nav.prev { left: 14px; }
.mini-carousel__nav.next { right: 14px; }

@media (max-width: 640px) {
  .article-figure--right, .article-figure--left { float: none; max-width: 100%; margin: 0 0 1.4em; }
  .mini-carousel { height: 300px; }
  .mini-carousel__track { gap: 10px; }
  .mini-carousel__slide { max-width: 92%; }
}

footer.site-footer {
  background: var(--forest-900); color: rgba(255,255,255,.7);
  padding: 2.4rem 6%; text-align: center; font-size: .82rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .randos-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .day-card__side { float: none; width: 100%; margin: 0 0 1.5rem; }
  .recap-wrap { margin-top: -40px; }
}

@media (max-width: 640px) {
  .site-brand { top: 18px; left: 18px; font-size: 1rem; }
  .fan-menu { right: 18px; bottom: 18px; }
  .hero-slide__caption { left: 5%; right: 5%; bottom: 16%; }
  .hero-slide__meta { flex-wrap: wrap; gap: .8em; }
  .hero-arrows { display: none; }
  .hero-dots { left: 5%; }
  .page-banner__inner { padding: 0 5% 2em; }
  .randos-layout { padding: 2rem 5% 3rem; gap: 1.6rem; }
  .rando-grid { grid-template-columns: 1fr; }
  .recap-wrap { padding: 0 5% 2rem; }
  .recap-card { grid-template-columns: repeat(2, 1fr); padding: 1.4rem 1.4rem .6rem; }
  .day-card__head, .day-card__body, .map-tabs, .map-tab-panels { padding-left: 1.2rem; padding-right: 1.2rem; }
  .day-card__body { padding-top: 1.2rem; }
  .rando-hero__inner { left: 5%; right: 5%; bottom: 14%; }
  .section-title-row { padding: 0 5%; }
  .day-section-wrap { padding: 0 5%; margin-bottom: 2.4rem; }
}

/* Contact page: form + "qui suis-je" bio */
.contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.contact-form { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 2rem; display: grid; gap: 1.1rem; }
.contact-form label { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--forest-800); display:block; margin-bottom:.4em; }
.contact-form input, .contact-form textarea { width:100%; padding:.8em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--stone-200); font-family: inherit; font-size: .92rem; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-about { text-align: center; }
.contact-about img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-soft); margin: 0 auto 1.2rem; }
.contact-about h3 { font-size: 1.1rem; margin-bottom: .5em; }
.contact-about p { font-size: .88rem; color: var(--stone); }
.contact-about .socials { display: flex; justify-content: center; gap: .7em; margin-top: 1.2rem; }
.contact-about .socials a { background: var(--forest-100); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
@media (max-width: 780px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-about { order: -1; }
}

/* Lightbox: click a photo-spot thumbnail (or any .js-lightbox link) to view it full size */
.photo-spot { cursor: zoom-in; }
.jspg-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 20, 18, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.jspg-lightbox.is-open { opacity: 1; pointer-events: auto; }
.jspg-lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.jspg-lightbox__caption {
  color: #fff; font-size: .88rem; margin: 1.1em 0 0; max-width: 70ch; text-align: center;
  background: rgba(0,0,0,.5); padding: .6em 1.1em; border-radius: 999px;
}
.jspg-lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem;
}

/* Événements page */
.events-empty {
  max-width: 640px; margin: 0 auto 3rem; text-align: center;
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 3rem 2rem;
}
.events-empty .ico { font-size: 2.4rem; display: block; margin-bottom: .6em; }
.events-empty h2 { margin-bottom: .4em; }
.events-empty p { color: var(--stone); max-width: 46ch; margin: 0 auto; }

/* auto-fit (not auto-fill) + justify-content:center: with only 1-2 cards,
   auto-fill would leave empty phantom tracks that push real cards to the
   left; this keeps cards at a natural width and centers them as a group. */
.event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 1.6rem; max-width: 1200px; margin: 0 auto 3rem; }
.event-card { background: var(--paper); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease; }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27,46,34,.22); }
.event-card__img { position: relative; height: 170px; }
.event-card__img img { width: 100%; height: 100%; object-fit: cover; }
.event-card__date {
  position: absolute; top: 12px; left: 12px; background: var(--terracotta); color: #fff;
  font-size: .72rem; font-weight: 700; padding: .35em .7em; border-radius: 999px;
}
.event-card__badge {
  position: absolute; top: 12px; right: 12px; background: rgba(20,32,24,.75); color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .35em .7em; border-radius: 999px;
}
.event-card__body { padding: 1.1rem 1.2rem 1.3rem; }
.event-card__body h3 { font-size: 1.05rem; margin-bottom: .3em; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: .6em .8em; font-size: .78rem; color: var(--stone); }
.event-card__meta span { display: flex; align-items: center; gap: .35em; }

.newsletter-box {
  max-width: 560px; margin: 0 auto 3rem; text-align: center;
  background: var(--forest-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 2.2rem 2rem;
}
.newsletter-box h3 { margin-bottom: .4em; }
.newsletter-box p { color: var(--stone); margin-bottom: 1.2em; }
.newsletter-form { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; }
.newsletter-form input {
  flex: 1 1 260px; padding: .8em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--stone-200);
  font-family: inherit; font-size: .92rem;
}
.newsletter-feedback { margin: .8em 0 0; font-size: .85rem; color: var(--forest-800); font-weight: 600; }
.newsletter-feedback.is-error { color: var(--terracotta); }

/* WooCommerce's own empty-cart block: this site has no public shop (every
   product is hidden, reachable only via a randonnee's own "Acheter"
   button), so its default "Nouveau dans la boutique" heading + product
   grid always renders empty underneath the "panier vide" message — hide
   everything after that message instead of showing a section with nothing
   in it. The message itself gets the site's own type/spacing, an added
   subtitle pointing somewhere useful, and the site's own emoji-icon
   language (🎒 — matching the badges/stats elsewhere) instead of
   WooCommerce's mask-icon frown, swapped in by fully replacing its
   ::before rather than layering on top of it. */
.wp-block-woocommerce-empty-cart-block { text-align: center; padding: 4rem 6% 5rem; max-width: 640px; margin: 0 auto; }
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-family: var(--font-display); font-weight: 600; color: var(--charcoal); font-size: 1.5rem; margin-top: .3em;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  background-color: transparent;
  mask-image: none; -webkit-mask-image: none;
  content: "🎒";
  display: block;
  font-size: 4.5rem;
  line-height: 1;
  height: auto; width: auto;
  margin: 0 auto .25em;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::after {
  content: "Rendez-vous sur l'une de nos randos premium pour acheter le topo et les itinéraires .gpx";
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--stone);
  margin-top: .6em;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title ~ * { display: none !important; }