/* Composants, Parc Arbre Aventure */

/* Bandeau d'annonce
   Éditable par le propriétaire : ajouter un <p>annonce...</p> dans
   #announcement-banner (partials/header.html) pour l'afficher, le
   supprimer pour le cacher. La div vide se masque toute seule. */
#announcement-banner {
  background: linear-gradient(90deg, var(--color-sky), oklch(87% 0.14 92), oklch(82% 0.105 72));
  color: var(--color-accent-ink);
  text-align: center;
  font-size: 0.875rem;
}

#announcement-banner:empty {
  display: none;
}

#announcement-banner p {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  max-width: none;
  padding: 0.5em var(--space-md);
  font-weight: 600;
  line-height: 1.4;
}

#announcement-banner p > span {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}

#announcement-banner p > .announcement-close {
  grid-column: 3;
  justify-self: end;
}

#announcement-banner p + p {
  border-top: 1px solid oklch(20% 0.04 70 / 0.25);
}

#announcement-banner a {
  color: var(--color-accent-ink);
  text-decoration: underline;
}

.announcement-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-accent-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1em 0.3em;
  margin-left: auto;
  opacity: 0.75;
}

.announcement-close:hover,
.announcement-close:focus-visible {
  opacity: 1;
}

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(98% 0.018 104 / 0.96);
  border-bottom: 1px solid oklch(72% 0.11 130 / 0.28);
  /* Le header est une bande sombre sur un site clair : on redéfinit
     localement les tokens de texte pour que tout ce qu'il contient
     (marque, liens, outils) reste clair sur ce fond foncé, sans avoir à
     retoucher chaque règle une par une. */
  --color-text: var(--color-bg-deep);
  --color-text-muted: oklch(42% 0.055 138);
  --color-border: oklch(62% 0.12 135 / 0.25);
  --color-bg-raised: oklch(92% 0.055 126);
  box-shadow: 0 10px 30px oklch(30% 0.09 145 / 0.1);
}

.site-nav {
  display: grid;
  gap: 0.45rem;
  padding-block: 0.6rem 0.75rem;
}

.site-header .container {
  max-width: 1400px;
  padding-inline: 0.85rem;
}

.site-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  color: var(--color-text);
  text-decoration: none;
  font-size: clamp(1.12rem, 1.25vw, 1.35rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-right: 0.4rem;
}

.site-nav__brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 0;
  outline: none;
}

.site-nav__menu {
  display: flex;
  justify-content: center;
  border-top: 1px solid oklch(72% 0.11 130 / 0.18);
  padding-top: 0.55rem;
}

.site-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0;
  padding: 0;
  font-size: clamp(0.95rem, 0.92vw, 1.08rem);
  font-weight: 800;
}

.site-nav__list a {
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: color var(--duration-fast) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-out-expo);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-leaf);
  opacity: 1;
}

.site-nav__tools {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  margin-left: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.75rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .site-nav {
    gap: 0.55rem;
  }

  .site-nav__top {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
  }

  .site-nav__brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-nav__brand span {
    overflow-wrap: anywhere;
  }

  .site-nav__tools {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
  }

  .site-nav__menu {
    display: none;
    justify-content: stretch;
    width: 100%;
    padding-top: var(--space-xs);
  }

  .site-nav.is-open .site-nav__menu {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    width: 100%;
    padding: var(--space-sm) 0;
  }
}

/* Sur mobile, "tools" passe sur sa propre ligne pleine largeur si besoin,
   pour ne jamais écraser les drapeaux ou la recherche. */
/* Sélecteur de langue */
.lang-switcher {
  display: flex;
  gap: 0.35rem;
  position: relative;
  flex-shrink: 0;
}

.lang-switcher__btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.25rem;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
}

.lang-switcher__btn img {
  display: block;
  height: 16px;
  width: 22px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-switcher__btn[aria-pressed="true"] {
  border-color: var(--color-accent);
}

/* Recherche */
.site-search {
  position: relative;
  display: flex;
  align-items: center;
}

.site-search__toggle {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-search__toggle:hover,
.site-search__toggle:focus-visible {
  color: var(--color-leaf);
}

.site-search input[type="search"] {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  width: 0;
  padding: 0.45rem 0;
  border-width: 1px;
  border-color: transparent;
  opacity: 0;
  transition: width var(--duration-medium) var(--ease-out-expo),
              padding var(--duration-medium) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-out-expo);
}

.site-nav__tools .btn {
  padding-inline: 1.25em;
  white-space: nowrap;
}

.site-search.is-open input[type="search"] {
  width: min(13rem, 45vw);
  padding: 0.45rem 0.8rem;
  border-color: var(--color-border);
  opacity: 1;
  margin-left: 0.35rem;
}

@media (max-width: 480px) {
  .site-search.is-open input[type="search"] {
    width: 40vw;
  }
}

.site-search__results {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(22rem, 90vw);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glow-soft);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 200;
}

.site-search__results:empty {
  display: none;
}

.site-search__result {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.site-search__result:last-child { border-bottom: none; }

.site-search__result:hover,
.site-search__result:focus-visible {
  background: var(--color-bg);
  color: var(--color-accent);
}

.site-search__result strong {
  color: var(--color-accent);
  font-weight: 700;
}

.site-search__empty {
  padding: var(--space-sm);
  color: var(--color-text-muted);
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  padding: 0.82em 1.55em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo),
              background var(--duration-fast) var(--ease-out-expo);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: oklch(45% 0.12 62 / 0.2);
  box-shadow: 0 8px 0 oklch(47% 0.13 50 / 0.24);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-ink);
  box-shadow: var(--glow-accent);
  transform: translateY(-2px);
}

.btn-ghost {
  background: oklch(98% 0.018 104 / 0.5);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-ghost:hover {
  border-color: var(--color-leaf);
  color: var(--color-leaf);
}

.hero .btn-ghost,
.fiche-activite__hero .btn-ghost,
.securite-hero .btn-ghost {
  border-color: oklch(98% 0.018 104 / 0.55);
  background: oklch(20% 0.06 150 / 0.4);
}

/* Héros accueil : défilement d'images */
/* Feuillage décoratif
   Image générée pour ce projet, puis détourage local. Les mouvements sont
   lents et amples pour suggérer une brise sans gêner la lecture. */
.leaf-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  z-index: 35;
  pointer-events: none;
  overflow: hidden;
}

/* Calque des feuilles isolées (leaf-single) : sous le contenu (images,
   tableaux, boutons...), au-dessus du simple fond de page. Un z-index
   négatif dans son propre calque ne suffirait pas : .leaf-layer est déjà
   un contexte d'empilement à part entière, il faut donc un second calque
   fixe distinct, positionné plus bas dans l'empilement global. */
.leaf-layer--back {
  z-index: -1;
}

.leaf-spray {
  position: absolute;
  width: var(--leaf-w, clamp(250px, 28vw, 520px));
  aspect-ratio: 1536 / 1024;
  background: url("/assets/images/decor/leaf-branch.png") center / 125% auto no-repeat;
  opacity: var(--leaf-opacity, 0.72);
  filter: drop-shadow(0 18px 22px oklch(20% 0.08 145 / 0.2));
  transform: translate3d(var(--leaf-x, 0px), var(--leaf-y, 0px), 0)
             translateY(var(--leaf-scroll-y, 0px))
             scaleX(var(--leaf-face, 1))
             rotate(var(--leaf-rotate, 0deg))
             rotate(var(--leaf-scroll-rotate, 0deg))
             scale(var(--leaf-scale, 1));
  transform-origin: 50% 50%;
  animation: leafBreathe var(--leaf-duration, 24s) var(--ease-out-expo) infinite alternate;
  animation-delay: var(--leaf-delay, 0s);
  will-change: transform;
}

.leaf-spray::before,
.leaf-spray::after {
  content: "";
  position: absolute;
  inset: var(--leaf-layer-inset, 10%);
  background: url("/assets/images/decor/leaf-branch.png") center / 128% auto no-repeat;
  opacity: var(--leaf-layer-opacity, 0.55);
  filter: saturate(var(--leaf-layer-saturation, 1.08)) hue-rotate(var(--leaf-layer-hue, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
}

.leaf-spray::before {
  --leaf-layer-inset: 14% -4% -8% 18%;
  --leaf-layer-opacity: 0.46;
  --leaf-layer-saturation: 0.96;
  transform: rotate(var(--leaf-before-rotate, -16deg))
             translate3d(var(--leaf-before-x, -8%), var(--leaf-before-y, 6%), 0)
             scale(var(--leaf-before-scale, 0.74));
}

.leaf-spray::after {
  --leaf-layer-inset: -10% 10% 18% -6%;
  --leaf-layer-opacity: 0.38;
  --leaf-layer-saturation: 1.18;
  --leaf-layer-hue: -7deg;
  transform: scaleX(-1)
             rotate(var(--leaf-after-rotate, 20deg))
             translate3d(var(--leaf-after-x, 9%), var(--leaf-after-y, -3%), 0)
             scale(var(--leaf-after-scale, 0.58));
}

.leaf-single {
  position: absolute;
  width: var(--single-w, clamp(48px, 6vw, 96px));
  aspect-ratio: 1;
  background: var(--single-img) center / contain no-repeat;
  opacity: var(--single-opacity, 0.5);
  filter: drop-shadow(0 12px 14px oklch(20% 0.08 145 / 0.14));
  transform: translate3d(var(--leaf-x, 0px), var(--leaf-y, 0px), 0)
             translateY(var(--leaf-scroll-y, 0px))
             rotate(var(--leaf-rotate, 0deg))
             rotate(var(--leaf-scroll-rotate, 0deg))
             scale(var(--leaf-scale, 1));
  transform-origin: 50% 62%;
  animation: leafBreathe var(--leaf-duration, 30s) var(--ease-out-expo) infinite alternate;
  animation-delay: var(--leaf-delay, 0s);
  will-change: transform;
}

@keyframes leafBreathe {
  0% {
    transform: translate3d(calc(var(--leaf-x, 0px) - 6px), calc(var(--leaf-y, 0px) + 4px), 0)
               translateY(var(--leaf-scroll-y, 0px))
               scaleX(var(--leaf-face, 1))
               rotate(calc(var(--leaf-rotate, 0deg) - 1.2deg))
               rotate(var(--leaf-scroll-rotate, 0deg))
               scale(var(--leaf-scale, 1));
  }
  100% {
    transform: translate3d(calc(var(--leaf-x, 0px) + 8px), calc(var(--leaf-y, 0px) - 8px), 0)
               translateY(var(--leaf-scroll-y, 0px))
               scaleX(var(--leaf-face, 1))
               rotate(calc(var(--leaf-rotate, 0deg) + 1.5deg))
               rotate(var(--leaf-scroll-rotate, 0deg))
               scale(var(--leaf-scale, 1));
  }
}

/* Sur mobile, assets/js/feuillage.js génère lui-même moins de feuilles et
   des tailles réduites : seul le calque avant repasse sous les menus. */
@media (max-width: 760px) {
  .leaf-layer:not(.leaf-layer--back) {
    z-index: 25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-spray,
  .leaf-single {
    animation: none;
  }
}

.hero {
  position: relative;
  /* Sous les branches décoratives par défaut (petit écran : pas la place
     de les faire cohabiter proprement avec le titre), mais repasse
     devant à partir de 1200px, où elles restent dans les coins. */
  z-index: 36;
  min-height: 68vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  /* Le texte du héros est posé sur des photos : il reste clair et lisible
     quel que soit le thème du site, grâce au voile sombre en bas
     (voir ::after). On force donc localement des tokens de texte clairs. */
  --color-text: var(--color-on-deep);
  --color-text-muted: var(--color-on-deep-muted);
}

@media (min-width: 1200px) {
  .hero {
    z-index: 10;
  }
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out-expo);
}

.hero__slide.is-active {
  opacity: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    oklch(15% 0.06 150 / 0.9) 0%,
    oklch(18% 0.06 150 / 0.45) 52%,
    oklch(86% 0.07 205 / 0.06) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 40;
  padding: clamp(3.5rem, 6vw, 6rem) var(--space-sm) var(--space-lg);
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  /* Ré-résout la couleur depuis le token local (clair) du héros, pour que
     le titre et le texte, qui héritent simplement de cette couleur,
     deviennent clairs sur la photo. */
  color: var(--color-text);
  text-shadow: 0 2px 16px oklch(0% 0 0 / 0.55);
}

.hero__content > .label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--space-xs);
  padding: 0.35rem 0.65rem;
  border: 1px solid oklch(94% 0.035 112 / 0.34);
  border-radius: var(--radius-sm);
  background: oklch(18% 0.06 150 / 0.58);
  color: oklch(96% 0.04 105);
  font-weight: 800;
  text-shadow: 0 2px 10px oklch(12% 0.05 150 / 0.72);
}

.hero h1,
.fiche-activite__hero h1,
.securite-hero h1 {
  color: var(--color-on-deep);
}

.hero h1 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 6.5vw, 5.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.hero__tagline {
  color: var(--color-text-muted);
  font-size: var(--fs-title);
  margin-bottom: var(--space-xs);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Petite galerie de photos brutes (ex. section "occasion") : cadrage
   uniforme même si les photos d'origine ont des tailles différentes. */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.photo-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--glow-soft);
}

/* Page Galerie : grille responsive de photos */
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.galerie-grille .zoomable {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-leaf);
  box-shadow: 0 12px 28px oklch(30% 0.105 145 / 0.14);
}

.galerie-grille .zoomable img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-medium) var(--ease-out-expo);
}

.galerie-grille .zoomable:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .galerie-grille .zoomable img { transition: none; }
  .galerie-grille .zoomable:hover img { transform: none; }
}

/* Accueil : les étages de la forêt
   Les activités sont classées par strate, du plein ciel au lac, le long
   d'une jauge verticale dont la couleur descend du bleu ciel au bleu de
   l'eau. Chaque palier porte un grand mot-repère coloré selon sa strate
   (variable --strate posée par les modificateurs palier--*). */
.altimetre {
  position: relative;
  margin-top: var(--space-lg);
  padding-left: clamp(1.9rem, 4vw, 3rem);
}

.altimetre::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.45rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    oklch(75% 0.08 230),
    var(--color-leaf) 30%,
    oklch(48% 0.11 118) 55%,
    var(--color-wood) 78%,
    oklch(48% 0.1 235)
  );
}

.palier {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  padding-block: var(--space-lg);
  text-decoration: none;
  color: var(--color-text);
}

.palier + .palier {
  border-top: 1px solid var(--color-border);
}

/* Le nœud sur la jauge : un point de la couleur de la strate. */
.palier__noeud {
  position: absolute;
  top: 50%;
  left: calc(-1 * clamp(1.9rem, 4vw, 3rem) + 0.45rem + 1.5px);
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--strate);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--strate);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.palier:hover .palier__noeud {
  transform: translate(-50%, -50%) scale(1.35);
}

.palier__zone {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--strate);
}

.palier__cote {
  display: block;
  margin-top: 0.35em;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.palier__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.palier__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--duration-medium) var(--ease-out-expo);
}

.palier:hover .palier__media img {
  transform: scale(1.045);
}

.palier__body h3 {
  margin: 0 0 0.2em;
  font-size: var(--fs-title);
  color: var(--color-bg-deep);
}

.palier__hook {
  margin: 0.6em 0 0;
  max-width: 42ch;
}

.palier__cta {
  display: inline-block;
  margin-top: var(--space-sm);
  font-weight: 700;
  color: var(--color-leaf);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.palier:hover .palier__cta {
  transform: translateX(4px);
}

@media (min-width: 800px) {
  .palier {
    grid-template-columns: minmax(11rem, 0.85fr) 1.05fr 1.15fr;
  }
}

/* Apparition douce au défilement : l'état masqué n'est appliqué que si
   main.js a posé data-reveal sur .altimetre (donc jamais sans JS, et
   jamais si prefers-reduced-motion est actif). */
.altimetre[data-reveal] .palier {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}

.altimetre[data-reveal] .palier.is-visible {
  opacity: 1;
  transform: none;
}

/* Chaque strate a sa couleur, du ciel vers l'eau (même dégradé que la
   jauge). */
.palier--ciel { --strate: oklch(58% 0.1 230); }
.palier--canopee { --strate: var(--color-leaf); }
.palier--sousbois { --strate: oklch(48% 0.11 118); }
.palier--clairiere { --strate: oklch(55% 0.14 132); }
.palier--pasdetir { --strate: var(--color-berry); }
.palier--parc { --strate: oklch(55% 0.13 62); }
.palier--sentiers { --strate: var(--color-wood); }
.palier--lac { --strate: oklch(48% 0.1 235); }

/* Page Nos activités : liste en rangées alternées */
.activites-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.activite-rangee {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid oklch(78% 0.075 128);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--duration-medium) var(--ease-out-expo),
              box-shadow var(--duration-medium) var(--ease-out-expo);
}

.activite-rangee:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-soft);
  border-color: var(--color-leaf-bright);
}

.activite-rangee__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.activite-rangee__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.activite-rangee__title {
  margin: 0;
}

.activite-rangee__text {
  margin: 0;
}

.activite-rangee__cta {
  margin-top: var(--space-xs);
  font-weight: 600;
  color: var(--color-leaf);
}

@media (min-width: 800px) {
  .activite-rangee {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .activites-liste .activite-rangee:nth-child(even) .activite-rangee__media {
    order: 2;
  }

  .activites-liste .activite-rangee:nth-child(even) .activite-rangee__body {
    order: 1;
  }
}

/* Fiche activité (page détail) */
.fiche-activite__hero {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  /* Titre et badges posés sur une photo : texte clair, voile sombre en bas. */
  --color-text: var(--color-on-deep);
  --color-text-muted: var(--color-on-deep-muted);
}

.fiche-activite__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, oklch(15% 0.06 150 / 0.86) 12%, oklch(17% 0.06 150 / 0.4) 55%, transparent 88%);
}

.fiche-activite__hero .container {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-md);
  color: var(--color-text);
  text-shadow: 0 2px 12px oklch(0% 0 0 / 0.6);
}

.fiche-activite__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

/* Texte à côté d'une photo, empilés sur mobile. */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 800px) {
  .split-layout {
    grid-template-columns: 3fr 2fr;
  }
}

.split-layout .zoomable img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Deux photos côte à côte (une seule colonne sur mobile). */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

@media (min-width: 640px) {
  .photo-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.photo-pair .zoomable img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.badge {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: oklch(90% 0.09 128);
  border: 1px solid oklch(65% 0.13 135 / 0.36);
  color: oklch(30% 0.1 145);
  padding: 0.3em 0.7em;
  border-radius: var(--radius-sm);
}

.fiche-activite__section {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* Lecteur vidéo (Bungy)
   La vidéo est filmée en vertical (téléphone) : le lecteur garde donc le
   format naturel de la vidéo (pas de recadrage forcé en 16:9) et se limite
   en largeur pour ne pas devenir démesuré sur grand écran. */
.video-player {
  position: relative;
  background: var(--color-bg-deep);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 420px;
  margin-inline: auto;
}

.video-player video {
  display: block;
  width: 100%;
  height: auto;
}

/* Encart d'avertissement */
.notice {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  background: oklch(90% 0.095 82 / 0.72);
  border: 1px solid oklch(78% 0.16 75 / 0.42);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-sm);
}

.notice::before {
  content: "!";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  font-family: var(--font-display);
}

.notice p {
  margin: 0;
  max-width: none;
  text-align: center;
}

/* Tableau horaires */
.horaires-wrapper {
  overflow-x: auto;
}

.horaires-table {
  min-width: 640px;
}

.horaires-table caption {
  text-align: left;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.horaires-table th,
.horaires-table td {
  /* Fond opaque (même couleur que la page) : les cellules n'ont sinon
     aucun fond propre, et les feuilles isolées (voir .leaf-layer--back),
     placées derrière le contenu, se voyaient quand même à travers elles. */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.65em 0.9em;
  text-align: left;
}

.horaires-table thead th {
  background: var(--color-leaf);
  color: var(--color-on-deep);
}

/* Colonne/ligne correspondant au jour et créneau courants (JS, voir
   renderHighlight() dans horaires.js). Pas de transform:scale ici : ça
   agrandit la boîte SYMÉTRIQUEMENT depuis son centre, donc ses bords
   débordent visuellement sur les cellules voisines (essayé, rejeté).
   L'emphase se fait à la place "vers l'intérieur" : fond teinté + anneau
   animé qui tourne le long du bord, strictement contenu dans la cellule
   (inset:0, jamais au-delà), via le classique conic-gradient + masque en
   "creux" (mask-composite: exclude ne garde visible que l'anneau, pas le
   centre). Responsive par construction : tout est en unités relatives à
   la cellule elle-même, aucune valeur figée. */
.horaires-table .jour-actuel {
  position: relative;
  z-index: 2;
  /* Liseré de base discret : l'anneau animé ci-dessous (::after), lui
     pleinement saturé, doit rester le seul signal net "en mouvement" —
     un liseré de base trop opaque le recouvrirait et l'annulerait. */
  outline: 2px solid oklch(72% 0.17 58 / 0.35);
  outline-offset: -2px;
  background: oklch(72% 0.17 58 / 0.12);
  font-weight: 700;
}

.horaires-table .jour-actuel::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  background: conic-gradient(
    from var(--jour-actuel-angle, 0deg),
    transparent 0deg,
    var(--color-accent) 35deg,
    transparent 90deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: horaires-jour-actuel-vague 3.2s linear infinite;
}

@property --jour-actuel-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes horaires-jour-actuel-vague {
  from { --jour-actuel-angle: 0deg; }
  to { --jour-actuel-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .horaires-table .jour-actuel::after {
    animation: none;
  }
}

/* Grille tarifaire : catégories + vue carte mobile */
/* La ligne de catégorie reste une vraie cellule de tableau (table-cell)
   pour que son colspan="3" couvre toute la largeur : passer en display:flex
   annulerait le colspan et la barre ne couvrirait que la 1re colonne. */
.tarifs-table__categorie th {
  background: var(--color-leaf);
  color: var(--color-on-deep);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  padding-block: 0.8em;
}

/* Pendant le défilement, une catégorie qui sort met un instant à être
   repoussée hors champ pendant que la suivante est déjà accrochée : sans
   ça, les deux se chevauchent. assets/js/tarifs-sticky.js calcule la
   catégorie courante et pose cette classe sur toutes les autres qui ont
   déjà atteint la ligne d'accroche, pour qu'une seule soit jamais
   visible à la fois. */
.tarifs-table__categorie--fantome {
  visibility: hidden;
}

/* En-tête de colonnes + barre de catégorie flottants au scroll (vue
   tableau, ≥641px) : deux niveaux de position sticky empilés, pour que la
   catégorie en cours reste visible juste sous l'en-tête. --tarifs-sticky-1
   et --tarifs-sticky-2 sont calculées par assets/js/tarifs-sticky.js
   (hauteur réelle du header du site + du thead, qui varient selon le
   bandeau d'annonce et la largeur d'écran : impossible à figer en dur). */
@media (min-width: 641px) {
  .tarifs-table thead th {
    position: sticky;
    top: var(--tarifs-sticky-1, 0px);
    z-index: 6;
  }

  .tarifs-table__categorie th {
    position: sticky;
    top: var(--tarifs-sticky-2, 0px);
    z-index: 5;
    box-shadow: 0 2px 6px oklch(20% 0.06 145 / 0.18);
  }
}

/* Sous-tableau durée/prix (VTT, e-VTT...) : une cellule "Individuel" avec
   trop de valeurs séparées par des "/" devient illisible. On la remplace
   par une petite grille durée -> prix, sans utiliser de <table> imbriquée
   (les sélecteurs génériques .horaires-table th/td/tr, dont le
   redécoupage en carte mobile, s'appliqueraient sinon aussi à ses
   cellules internes). Sélecteurs à 2 classes pour l'emporter sur
   .tarifs-table td:nth-child(2/3) (poids égal, mais définie avant dans
   la feuille de style). */
/* La cellule a besoin de plus de respiration horizontale que les autres
   (padding standard 0.9em, cf. .horaires-table th/td) : avec 9 lignes
   durée/prix collées aux bords de la cellule, le sous-tableau donnait
   l'impression de déborder. On reprend le même 0.9em et on l'accentue
   d'un facteur régulier (x1.6) plutôt qu'une valeur arbitraire. */
.tarifs-table td.tarifs-table__cell--detail {
  padding-inline: 1.45em;
}

.tarifs-table .tarifs-detail {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75em 1em;
  margin: 0;
  font-weight: 400;
}

.tarifs-table .tarifs-detail dt {
  color: var(--color-text-muted);
  font-weight: 400;
}

.tarifs-table .tarifs-detail dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tarifs-table .tarifs-detail dt:nth-of-type(n + 2),
.tarifs-table .tarifs-detail dd:nth-of-type(n + 2) {
  border-top: 1px solid var(--color-border);
  padding-top: 0.65em;
}

.tarifs-table .tarifs-detail__note {
  margin: 1.1em 0 0;
  font-size: 0.85em;
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  /* En carte mobile, la cellule "Individuel" devient normalement une
     ligne flex [étiquette | valeur] : trop étroit pour une grille de 9
     lignes. On l'empile à la place (étiquette au-dessus, sous-tableau en
     pleine largeur en dessous). */
  .horaires-table tbody td.tarifs-table__cell--detail {
    display: block;
  }

  .horaires-table tbody td.tarifs-table__cell--detail::before {
    display: block;
    text-align: left;
    margin-bottom: 0.4em;
  }
}

/* "Toise du parc" : comparatif visuel des paliers de taille, à la place
   d'une liste à puces. Barres proportionnelles à la vraie taille en cm
   (échelle commune : 180cm de référence, cf. valeur --toise-pct posée en
   ligne sur chaque .toise__bar). Couleurs choisies et validées (contraste,
   daltonisme) pour ce fond vert foncé avec le validateur du skill dataviz
   (scripts/validate_palette.js) — ne pas les changer sans le refaire tourner. */
.toise {
  background: var(--color-bg-deep);
  color: var(--color-on-deep);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  margin-top: var(--space-sm);
}

.toise__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-sm);
}

@media (min-width: 720px) {
  .toise__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.toise__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.toise__track {
  height: clamp(90px, 16vw, 140px);
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.35rem, 2vw, 0.75rem);
  margin-bottom: var(--space-sm);
}

.toise__bar {
  flex-shrink: 0;
  width: min(2.5rem, 40%);
  height: var(--toise-pct);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 0.9s var(--ease-out-expo);
}

/* Silhouette bras levés à côté de la barre : rend explicite que la taille
   indiquée se mesure bras tendus vers le haut (comme à la vraie toise du
   parc), pas debout normalement. Le tracé (path unique, dessiné à la main
   dans un repère 200x500, ratio 2:5 comme l'aspect-ratio ci-dessous) est
   défini une seule fois dans le HTML (#toise-personnage) et réutilisé par
   <use> ; sa hauteur suit exactement la même échelle --toise-pct que la
   barre voisine, donc les deux grandissent au même rythme. */
.toise__silhouette {
  flex-shrink: 0;
  height: var(--toise-pct);
  width: auto;
  aspect-ratio: 2 / 5;
  overflow: visible;
  fill: var(--color-on-deep-muted);
  transition: height 0.9s var(--ease-out-expo);
}

/* État de départ posé uniquement par assets/js/tarifs-toise.js : sans JS,
   ou si la réduction de mouvement est activée, les barres et silhouettes
   restent simplement à leur hauteur finale (rien n'est jamais caché). */
.toise[data-toise-animate] .toise__bar,
.toise[data-toise-animate] .toise__silhouette {
  height: 0%;
}

.toise[data-toise-animate].is-revealed .toise__bar,
.toise[data-toise-animate].is-revealed .toise__silhouette {
  height: var(--toise-pct);
}

.toise__bar--ecureuil { background: oklch(65% 0.16 75); }
.toise__bar--aventurier { background: oklch(65% 0.13 240); }
.toise__bar--jeune { background: oklch(65% 0.14 350); }
.toise__bar--adulte { background: oklch(65% 0.13 300); }

.toise__value {
  display: block;
  margin-bottom: 0.4em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-on-deep);
}

.toise__tier h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--color-on-deep);
  margin: 0 0 0.2em;
}

.toise__age {
  font-weight: 600;
  color: var(--color-on-deep-muted);
  margin: 0 0 0.3em;
}

.toise__note {
  font-size: 0.85em;
  color: var(--color-on-deep-muted);
  margin: 0;
  min-height: 1em;
}

/* Le tarif groupe n'est pas un palier de taille (c'est une question de
   nombre de personnes) : volontairement à part du comparatif ci-dessus,
   pas de barre. */
.toise-groupe {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
}

.toise-groupe h3 {
  margin: 0 0 0.2em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
}

.toise-groupe p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Balise de catégorie : même langage de balisage que le sentier des formules. */
.balise-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  vertical-align: -0.5em;
  margin-right: 0.5em;
  background: oklch(97% 0.025 112);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.balise-inline::after {
  content: "";
  display: block;
  transform: scale(0.72);
}

/* Le losange combine rotation et réduction (la règle générique ci-dessus
   écraserait sa rotation). */
.balise-inline.balise--losange::after {
  transform: rotate(45deg) scale(0.72);
}

/* Le tableau tarifaire n'a besoin ni d'un plancher de largeur ni de
   défilement horizontal (3 colonnes seulement, le texte passe à la ligne
   sans problème dans les cellules) : on annule ici le overflow-x et le
   min-width génériques de .horaires-wrapper/.horaires-table. C'est
   indispensable pour que position:sticky (plus bas) s'accroche à la page
   plutôt qu'à ce conteneur : tout overflow non "visible" posé sur un
   ancêtre casse sticky, même quand aucun défilement ne se produit
   réellement. */
.horaires-wrapper.tarifs-wrapper {
  overflow-x: visible;
}

.horaires-table.tarifs-table {
  min-width: 0;
  width: 100%;
  /* Largeurs de colonnes fixes (déclarées sur le thead, seule ligne prise
     en compte par le layout fixe) : la colonne Individuel a besoin de
     bien plus de place que les deux autres pour ses sous-tableaux
     durée/prix (VTT, e-VTT). Sans table-layout:fixed, le navigateur
     recalcule les largeurs colonne par colonne selon leur contenu et
     ignore ces valeurs. */
  table-layout: fixed;
}

.tarifs-table thead th:nth-child(1) {
  width: 32%;
}

.tarifs-table thead th:nth-child(2) {
  width: 42%;
}

.tarifs-table thead th:nth-child(3) {
  width: 26%;
}

/* Prix alignés et affirmés */
.tarifs-table td:nth-child(2),
.tarifs-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tarifs-table tbody tr:not(.tarifs-table__categorie):hover td {
  background: var(--color-bg-raised);
}

@media (max-width: 640px) {
  /* S'applique à tous les tableaux "horaires-table" (grille tarifaire ET
     tableau horaires d'accès) : chaque ligne devient une petite carte au
     lieu de forcer un défilement horizontal. */
  .horaires-table {
    min-width: 0;
    width: 100%;
  }

  .horaires-table caption {
    display: block;
    width: 100%;
  }

  .horaires-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .horaires-table, .horaires-table tbody, .horaires-table tr, .horaires-table td, .horaires-table th {
    display: block;
    width: 100%;
  }

  /* La ligne de catégorie garde son alignement icône + texte en flex, même
     en vue carte mobile (sinon la règle générique ci-dessus l'emporte, à
     spécificité égale, car elle vient après dans la cascade). */
  .tarifs-table__categorie th {
    display: flex;
    align-items: center;
  }

  /* La règle générique "première cellule = en-tête de carte" (fond clair)
     ci-dessous rattraperait aussi la cellule de catégorie et la peindrait
     en clair (texte clair sur clair) : on réaffirme ici son fond sombre
     avec une spécificité équivalente. */
  .horaires-table tbody tr.tarifs-table__categorie > :first-child {
    background: var(--color-bg-deep);
    color: var(--color-on-deep);
  }

  .horaires-table tbody tr:not(.tarifs-table__categorie) {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    overflow: hidden;
  }

  .horaires-table tbody td,
  .horaires-table tbody th[scope="row"] {
    border: none;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    text-align: right;
    font-weight: 400;
  }

  .horaires-table tbody tr > :last-child {
    border-bottom: none;
  }

  .horaires-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    color: var(--color-text-muted);
  }

  /* Première cellule de chaque ligne (nom d'activité ou de période) :
     traitée comme l'en-tête de la carte, pas comme une paire label/valeur. */
  .horaires-table tbody tr > :first-child {
    background: var(--color-bg-raised);
    text-align: left;
    font-weight: 700;
  }

  .horaires-table tbody tr > :first-child::before {
    display: none;
  }

  /* Flotte sous le header au scroll : pas d'en-tête de colonnes en vue
     carte, donc un seul niveau sticky suffit (--tarifs-sticky-1, voir
     assets/js/tarifs-sticky.js). Posé sur la ligne <tr> elle-même, pas sur
     son <th> : en vue carte chaque <tr> redevient une simple boîte de bloc
     d'une seule ligne, donc c'est elle qui doit rester à l'intérieur de la
     hauteur du <tbody> de la catégorie pour que le sticky ait de la marge
     (le poser sur le <th> le bornerait à la hauteur de son propre <tr>,
     soit une seule ligne : il se décollerait aussitôt). */
  .tarifs-table__categorie {
    position: sticky;
    top: var(--tarifs-sticky-1, 0px);
    z-index: 5;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
    overflow: hidden;
    box-shadow: 0 2px 6px oklch(20% 0.06 145 / 0.18);
  }
}

.statut-parc {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0.6em 1.25em;
  border-radius: var(--radius-md);
  border: 1px solid currentColor;
  margin-block: var(--space-sm);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

a.statut-parc:hover,
a.statut-parc:focus-visible {
  transform: translateY(-2px);
  text-decoration: none;
}

.statut-parc__prochaine {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-xs));
  margin-bottom: var(--space-sm);
}

.statut-parc__prochaine:empty {
  display: none;
}

.statut-parc[data-statut="ouvert"] {
  background: oklch(87% 0.1 142 / 0.8);
  color: var(--color-open);
}

.statut-parc[data-statut="ferme"] {
  background: oklch(62% 0.18 25 / 0.15);
  color: var(--color-closed);
}

.hero .statut-parc[data-statut="ouvert"],
.fiche-activite__hero .statut-parc[data-statut="ouvert"],
.securite-hero .statut-parc[data-statut="ouvert"] {
  background: oklch(91% 0.055 145 / 0.9);
  border-color: oklch(91% 0.055 145 / 0.35);
  color: oklch(33% 0.095 150);
  text-shadow: none;
}

.hero .statut-parc[data-statut="ferme"],
.fiche-activite__hero .statut-parc[data-statut="ferme"],
.securite-hero .statut-parc[data-statut="ferme"] {
  background: oklch(90% 0.06 32 / 0.9);
  border-color: oklch(90% 0.06 32 / 0.35);
  color: oklch(35% 0.12 28);
  text-shadow: none;
}

.statut-parc::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Page Accès : le statut devient le moment fort de la page. */
.statut-hero {
  text-align: center;
}

.statut-hero .statut-parc {
  font-size: 1.5rem;
  padding: 0.8em 1.75em;
}

.statut-hero .statut-parc__prochaine {
  margin-inline: auto;
}

.statut-hero .statut-parc[data-statut="ouvert"]::before {
  animation: statut-pulse 2.2s var(--ease-out-expo) infinite;
}

@keyframes statut-pulse {
  0% { box-shadow: 0 0 0 0 oklch(75% 0.16 145 / 0.55); }
  70% { box-shadow: 0 0 0 10px oklch(75% 0.16 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(75% 0.16 145 / 0); }
}

/* Ruban des saisons (page Accès) */
.ruban-saisons {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

.ruban-saisons__piste-wrapper {
  position: relative;
  padding-block: 0.5rem;
}

.ruban-saisons__piste {
  position: relative;
  height: 2.25rem;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ruban-segment {
  position: absolute;
  top: 0;
  bottom: 0;
}

.ruban-hiver {
  background: repeating-linear-gradient(
    45deg,
    var(--color-bg-raised) 0 10px,
    var(--color-bg-deep) 10px 20px
  );
}

.ruban-ambre { background: oklch(78% 0.16 75); }
.ruban-rose { background: oklch(70% 0.14 350); }
.ruban-bleu { background: oklch(70% 0.12 240); }
/* Vert volontairement plus foncé que le fond de page (même famille de
   teinte) pour que le segment reste identifiable sur le fond feuillage. */
.ruban-vert { background: oklch(52% 0.13 150); }
.ruban-jaune { background: oklch(82% 0.14 95); }
.ruban-violet { background: oklch(68% 0.12 300); }

/* Le repère "aujourd'hui" chevauche la piste sombre et le fond clair
   au-dessus : l'accent ambré est le seul ton qui ressort nettement sur
   les deux, et il souligne à juste titre un repère important. */
.ruban-aujourdhui {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent);
  box-shadow: var(--glow-accent);
}

.ruban-aujourdhui::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-accent);
}

/* Repères de mois : traits discrets sur la piste + libellés en dessous. */
.ruban-mois__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: oklch(100% 0 0 / 0.18);
}

.ruban-saisons__mois {
  position: relative;
  height: 1.1rem;
  margin-top: 0.3rem;
}

.ruban-mois__label {
  position: absolute;
  transform: translateX(-2px);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-transform: capitalize;
}

@media (max-width: 640px) {
  .ruban-mois__label--secondaire {
    display: none;
  }
}

.ruban-saisons__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
}

.ruban-legende__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-label);
  color: var(--color-text-muted);
}

.ruban-legende__puce {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Photo agrandissable (lightbox) */
.zoomable {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.zoomable img {
  display: block;
  border-radius: var(--radius-md);
}

.zoomable__expand {
  position: absolute;
  right: var(--space-xs);
  bottom: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid oklch(98% 0.018 104 / 0.9);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  cursor: pointer;
  box-shadow: 0 8px 22px oklch(20% 0.08 145 / 0.28);
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-expo);
}

.zoomable__expand:hover,
.zoomable__expand:focus-visible {
  background: var(--color-leaf-bright);
  color: var(--color-accent-ink);
  transform: translateY(-2px) scale(1.04);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: oklch(10% 0.02 155 / 0.92);
  padding: var(--space-lg);
}

.lightbox-overlay.is-open {
  display: flex;
}

.lightbox-overlay__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
}

.lightbox-close {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-raised);
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-raised);
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.lightbox-nav--prev {
  left: var(--space-md);
}

.lightbox-nav--next {
  right: var(--space-md);
}

.lightbox-compteur {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-on-deep, oklch(98% 0.018 112));
}

/* Lecteur PDF intégré */
.pdf-embed {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-deep);
}

@media (min-width: 720px) {
  .pdf-embed { aspect-ratio: 16 / 10; }
}

/* Ressources (cartes documents) */
.ressources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-md);
}

.ressource-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.brochure-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

@media (min-width: 800px) {
  .brochure-panel {
    grid-template-columns: 2fr 3fr;
  }
}

.brochure-panel__cover {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--glow-soft);
}

.brochure-langs {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.brochure-langs__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 600;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.brochure-langs__link:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-raised);
}

.brochure-langs__link img {
  border-radius: 2px;
  flex-shrink: 0;
}

/* Footer */
.site-footer {
  background:
    radial-gradient(900px 260px at 12% 0%, oklch(58% 0.14 132 / 0.32), transparent 70%),
    var(--color-bg-deep);
  padding-block: var(--space-lg) var(--space-md);
  margin-top: var(--space-xl);
  /* Bande sombre en pied de page clair : mêmes redéfinitions locales que
     le header pour garder un texte clair et des séparateurs discrets. */
  --color-text: var(--color-on-deep);
  --color-text-muted: var(--color-on-deep-muted);
  --color-border: oklch(100% 0 0 / 0.15);
  color: var(--color-text);
  border-top: 1px solid oklch(100% 0 0 / 0.12);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.site-footer__grid > div {
  min-width: 0;
}

.site-footer h3 {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.site-footer a {
  color: var(--color-text);
  overflow-wrap: break-word;
}

.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-links a {
  color: var(--color-text);
}

.site-footer__bottom {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-label);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
}

/* Page Sécurité */
.securite-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-lg);
  /* Titre posé sur une photo : texte clair, voile sombre en bas. */
  --color-text: var(--color-on-deep);
  --color-text-muted: var(--color-on-deep-muted);
}

.securite-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, oklch(20% 0.05 152 / 0.88) 15%, oklch(20% 0.05 152 / 0.35) 55%, transparent 100%);
}

.securite-hero .container {
  position: relative;
  z-index: 2;
  padding-block: var(--space-lg);
  color: var(--color-text);
  text-shadow: 0 2px 16px oklch(0% 0 0 / 0.65);
}

.securite-hero .label {
  color: var(--color-accent);
}

.securite-hero h1 {
  max-width: 16ch;
  margin-top: var(--space-xs);
}

.securite-hero p {
  max-width: 52ch;
  font-size: var(--fs-title);
  color: var(--color-text);
  margin-top: var(--space-sm);
}

/* Section numérotée (motif éditorial partagé entre pages) */
.section-numerotee {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.section-numerotee__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.section-numerotee__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--color-border);
  line-height: 1;
  flex-shrink: 0;
}

.section-numerotee__head h2 {
  margin: 0;
}

.section-numerotee__text {
  max-width: 68ch;
}

.section-numerotee__banner {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
}

.section-numerotee__banner img {
  width: 100%;
  object-fit: cover;
}

.section-quote {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  color: var(--color-accent);
  max-width: 32ch;
  margin-bottom: var(--space-md);
}

.securite-team__layout {
  margin-top: var(--space-md);
}

.securite-team__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.securite-normes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
}

@media (min-width: 720px) {
  .securite-normes {
    grid-template-columns: 1fr 1fr;
  }
}

.securite-normes__plate {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.securite-normes__code {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.securite-normes__plate p {
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.securite-normes__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.securite-normes__details .vignette-normes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.securite-normes__details img {
  max-height: 220px;
  width: auto;
  border-radius: var(--radius-md);
}

/* Page Partenaires : annuaire en rangées à initiales */
.partenaires-groupe {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.partenaires-groupe:first-of-type {
  border-top: none;
  padding-top: 0;
}

.partenaires-groupe__head {
  position: relative;
  margin-bottom: var(--space-xs);
}

.partenaires-groupe__head h2 {
  margin-bottom: 0;
}

.partenaires-groupe__head::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-accent);
  margin-top: var(--space-xs);
}

.partenaire-liste {
  margin-top: var(--space-md);
}

.partenaire-rangee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-medium) var(--ease-out-expo);
}

.partenaire-liste .partenaire-rangee:last-child {
  border-bottom: none;
}

.partenaire-rangee:hover {
  background: var(--color-bg-raised);
}

.partenaire-rangee__lettre {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--color-border);
  line-height: 1;
  transition: color var(--duration-medium) var(--ease-out-expo);
}

.partenaire-rangee:hover .partenaire-rangee__lettre {
  color: var(--color-accent);
}

/* Page contact : infos rapides + formulaire */

.contact-quickinfo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
}

.contact-quickinfo__item {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-family: var(--font-display);
  font-size: var(--fs-h4, 1.3rem);
  font-weight: 700;
  color: var(--color-text);
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-expo);
}

.contact-quickinfo__item:hover {
  color: var(--color-leaf);
  border-color: var(--color-leaf);
}

.contact-quickinfo__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-form-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
}

.contact-form-section__head h2 {
  margin: 0;
}

.contact-form {
  max-width: 42rem;
  margin-top: 0;
}

/* Chaque étape reprend le motif "section numérotée" du reste du site
   (grand chiffre en font-display, cf. securite.html/ressources.html)
   plutôt qu'un bloc de formulaire générique. */
.form-etape {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.contact-form > .form-etape:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.form-etape__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.form-etape__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--color-border);
  line-height: 1;
  flex-shrink: 0;
}

.form-etape__head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md) var(--space-lg);
}

@media (min-width: 640px) {
  .contact-form__grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__souscaption {
  margin-top: var(--space-md);
  margin-bottom: 0;
}

/* Champs en soulignement (motif "on remplit un carnet"), pas de case
   grise façon formulaire d'admin : seul le trait s'anime au focus. */
.champ {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
}

.champ label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.champ input,
.champ select,
.champ textarea {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0.35em 0.1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
}

.champ input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.65;
}

/* Le trait de focus grandit depuis le centre (transform, pas de largeur
   animée) : détail délibéré plutôt qu'un simple changement de couleur. */
.champ::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--duration-medium) var(--ease-out-expo);
}

.champ:focus-within::after {
  transform: scaleX(1);
}

.champ--message::after {
  display: none;
}

.champ--message textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: 0.75em 0.9em;
  resize: vertical;
  min-height: 14rem;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.champ--message textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.champ__compteur {
  align-self: flex-end;
  font-size: var(--fs-label);
  color: var(--color-text-muted);
}

.champ__erreur {
  display: block;
  min-height: 1.3em;
  font-size: 0.85rem;
  font-weight: 600;
  color: oklch(50% 0.19 25);
}

.champ__erreur:empty {
  display: none;
}

.champ.is-invalide input,
.champ.is-invalide .champ-picker__saisie {
  border-bottom-color: oklch(50% 0.19 25);
}

/* Choix par pastilles : remplace les <select> "vous êtes"/"vous
   souhaitez", plus rapide à remplir (un clic contre ouvrir/parcourir un
   menu) et visuellement distinct entre les deux groupes (vert = identité,
   accent = intention) plutôt que deux menus identiques côte à côte. */
.choix-groupe {
  margin-top: var(--space-md);
}

.choix-groupe:first-child {
  margin-top: 0;
}

.choix-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 0.6em;
}

.pastille {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-expo);
}

.pastille input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* :has() couvre les navigateurs récents ; la classe .pastille--selectionnee
   (posée par contact.js sur "change") assure le même rendu sur un
   navigateur plus ancien qui ne supporte pas :has(). */
.pastille:has(input:checked),
.pastille.pastille--selectionnee {
  background: var(--color-leaf);
  border-color: var(--color-leaf);
  color: var(--color-bg);
}

.pastille--accent:has(input:checked),
.pastille--accent.pastille--selectionnee {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.pastille:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Compteurs +/- : remplace 4 champs number identiques par un seul bloc
   cohérent, plus rapide au clic (familles) tout en restant saisissable
   au clavier (groupes nombreux). */
.compteurs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: 0.6em;
}

.compteur {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.compteur__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.compteur__control {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.compteur__btn {
  width: 1.9em;
  height: 1.9em;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-leaf);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo);
}

.compteur__btn:hover {
  border-color: var(--color-leaf);
}

.compteur__btn:active {
  transform: scale(0.88);
}

.compteur__control input {
  width: 2.2em;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  padding: 0.2em 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.compteur__control input::-webkit-outer-spin-button,
.compteur__control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.compteur__control input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Calendrier et liste d'horaires : deux composants custom (le natif
   <input type=date/time> ne peut pas être stylé dans le thème du site),
   partageant la même coquille de popover (.champ-picker__panneau). */
.champ-picker {
  position: relative;
}

/* Ligne saisie libre + bouton icône : la date/l'heure reste tapable
   directement (utile si on la connaît déjà), le popover est une aide en
   plus, pas la seule voie possible. */
.champ-picker__ligne {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.champ-picker__saisie {
  flex: 1;
  min-width: 0;
}

.champ-picker__icone-bouton {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-leaf);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.champ-picker__icone-bouton:hover,
.champ-picker__icone-bouton[aria-expanded="true"] {
  border-color: var(--color-leaf);
}

.champ-picker__panneau {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.6em);
  left: 0;
  width: max-content;
  min-width: 17rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px oklch(30% 0.06 145 / 0.18);
  padding: var(--space-sm);
}

.calendrier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.calendrier__mois {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: capitalize;
}

.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25em;
}

.calendrier__jour-nom {
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: center;
  color: var(--color-text-muted);
  padding-bottom: 0.3em;
}

.calendrier__jour {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-expo);
}

.calendrier__jour--vide {
  visibility: hidden;
  cursor: default;
}

.calendrier__jour:hover:not(:disabled) {
  background: var(--color-bg-raised);
}

.calendrier__jour[aria-current="date"] {
  border-color: var(--color-leaf);
}

.calendrier__jour[aria-selected="true"] {
  background: var(--color-leaf);
  color: var(--color-bg);
}

.calendrier__jour:disabled {
  color: var(--color-border);
  cursor: not-allowed;
}

.calendrier__jour:focus-visible,
.horaire-liste__item:focus-visible,
.champ-picker__icone-bouton:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Cibles tactiles plus grandes sur mobile (les cases du calendrier
   étaient trop petites pour un doigt, ~30px). */
@media (max-width: 480px) {
  .champ-picker__panneau {
    min-width: min(23rem, 94vw);
  }

  .calendrier__jour {
    min-height: 2.75rem;
    font-size: 1rem;
  }
}

.champ-picker__panneau--horaire {
  min-width: 10rem;
  padding: 0.4em;
}

.horaire-liste {
  max-height: 14rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.horaire-liste__item {
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  text-align: left;
  padding: 0.5em 0.8em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-expo);
}

.horaire-liste__item:hover {
  background: var(--color-bg-raised);
}

.horaire-liste__item[aria-selected="true"] {
  background: var(--color-leaf);
  color: var(--color-bg);
}

.contact-form__check {
  display: flex;
  margin-top: var(--space-md);
}

.contact-form__check label {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
}

/* Case à cocher personnalisée : le carré natif reste l'élément cliqué
   (transparent, superposé exactement sur .contact-form__check-box) plutôt
   que d'être masqué et remplacé, pour ne jamais désynchroniser la zone
   cliquable réelle de sa représentation visuelle. */
.contact-form__check input[type="checkbox"] {
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.contact-form__check-box {
  position: relative;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.15em;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  pointer-events: none;
  transition: background-color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
}

.contact-form__check-box::after {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0.18em;
  width: 0.3em;
  height: 0.55em;
  border-right: 2px solid var(--color-bg);
  border-bottom: 2px solid var(--color-bg);
  transform: rotate(45deg) scale(0);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.contact-form__check input[type="checkbox"]:checked + .contact-form__check-box {
  background: var(--color-leaf);
  border-color: var(--color-leaf);
}

.contact-form__check input[type="checkbox"]:checked + .contact-form__check-box::after {
  transform: rotate(45deg) scale(1);
}

.contact-form__check input[type="checkbox"]:focus-visible + .contact-form__check-box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Piège à robots : masqué visuellement mais lisible par un lecteur
   d'écran ou un robot naïf qui remplirait tous les champs sans regarder
   le rendu, donc pas de display:none. */
.contact-form__leurre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-form__submit {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.btn-envoyer {
  min-width: 13rem;
  justify-content: center;
  padding: 1em 1.9em;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.btn-envoyer svg {
  transition: transform var(--duration-medium) var(--ease-out-expo);
}

.btn-envoyer:hover svg {
  transform: translate(2px, -2px);
}

.contact-form__submit .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.contact-form__submit .btn:disabled svg {
  transform: none;
}

.contact-form__status {
  margin: 0;
  font-weight: 600;
  min-height: 1.5em;
}

.contact-form__status[data-state="succes"] {
  color: oklch(45% 0.13 145);
}

.contact-form__rgpd {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.contact-form__status[data-state="erreur"] {
  color: oklch(50% 0.19 25);
}

.partenaire-rangee__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xs);
}

.partenaire-rangee__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partenaire-rangee__body h3 {
  margin: 0 0 0.35em;
}

.partenaire-rangee__body p {
  margin: 0 0 0.5em;
}

.partenaire-rangee__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .partenaire-liste .partenaire-rangee:nth-child(even) {
    grid-template-columns: 1fr auto;
  }

  .partenaire-liste .partenaire-rangee:nth-child(even) .partenaire-rangee__lettre {
    order: 2;
    text-align: right;
  }

  .partenaire-liste .partenaire-rangee:nth-child(even) .partenaire-rangee__logo {
    order: 2;
  }

  .partenaire-liste .partenaire-rangee:nth-child(even) .partenaire-rangee__body {
    order: 1;
  }
}

/* Le sentier des formules (balisage façon sentiers vosgiens) */
.sentier {
  position: relative;
  margin-top: var(--space-lg);
  padding-left: 3.5rem;
}

/* Le tracé du sentier : une ligne pointillée verticale. */
.sentier::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.25rem;
  border-left: 2px dashed var(--color-border);
}

.sentier-etape {
  position: relative;
  padding-bottom: var(--space-lg);
}

.sentier-etape:last-child {
  padding-bottom: 0;
}

/* La balise, posée sur le tracé comme une marque peinte sur un arbre. */
.sentier-etape__balise {
  position: absolute;
  left: -3.5rem;
  top: 0.1em;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sentier-etape__balise::after {
  content: "";
  display: block;
}

/* Formes de balise */
.balise--rect::after {
  width: 1.4rem;
  height: 0.7rem;
}

.balise--disque::after {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
}

.balise--triangle::after {
  width: 1.3rem;
  height: 1.15rem;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.balise--losange::after {
  width: 1rem;
  height: 1rem;
  transform: rotate(45deg);
}

.balise--anneau::after {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: transparent !important;
  border: 0.3rem solid;
}

.balise--barres::after {
  width: 1.4rem;
  height: 0.9rem;
  background: repeating-linear-gradient(to bottom, currentColor 0 0.3rem, transparent 0.3rem 0.6rem) !important;
}

/* Couleurs de balise (appliquées à la forme, pas au cadre) */
.balise-ambre::after { background: oklch(78% 0.16 75); border-color: oklch(78% 0.16 75); color: oklch(78% 0.16 75); }
.balise-rose::after { background: oklch(70% 0.14 350); border-color: oklch(70% 0.14 350); color: oklch(70% 0.14 350); }
.balise-bleu::after { background: oklch(70% 0.12 240); border-color: oklch(70% 0.12 240); color: oklch(70% 0.12 240); }
.balise-vert::after { background: oklch(52% 0.13 150); border-color: oklch(52% 0.13 150); color: oklch(52% 0.13 150); }
.balise-jaune::after { background: oklch(82% 0.14 95); border-color: oklch(82% 0.14 95); color: oklch(82% 0.14 95); }
.balise-violet::after { background: oklch(68% 0.12 300); border-color: oklch(68% 0.12 300); color: oklch(68% 0.12 300); }

.sentier-etape__corps h3 {
  margin-bottom: 0.4em;
}

.sentier-etape__corps > p {
  max-width: 62ch;
}

/* Les PDF d'une formule : des jalons cliquables en bout d'étape. */
.sentier-etape__pdfs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.sentier-etape__pdfs a {
  display: inline-block;
  padding: 0.6em 1.2em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 600;
  transition: border-color var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-expo);
}

.sentier-etape__pdfs a::after {
  content: " PDF";
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  vertical-align: 0.15em;
}

.sentier-etape__pdfs a:hover,
.sentier-etape__pdfs a:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.sentier-etape__pdfs a:hover::after,
.sentier-etape__pdfs a:focus-visible::after {
  color: var(--color-accent-ink);
}

/* Le refuge : les infos annexes à la fin du sentier. */
.sentier-refuge {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

@media (min-width: 720px) {
  .sentier-refuge {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

.sentier-refuge h3 {
  font-size: var(--fs-title);
}

.sentier-refuge p {
  margin-bottom: var(--space-sm);
}

/* Sur écran large, le sentier serpente : les étapes paires glissent vers la droite. */
@media (min-width: 900px) {
  .sentier {
    padding-left: 0;
  }

  .sentier::before {
    left: 50%;
  }

  .sentier-etape {
    width: calc(50% - 3.5rem);
  }

  .sentier-etape:nth-child(odd) {
    text-align: right;
  }

  .sentier-etape:nth-child(odd) .sentier-etape__balise {
    left: auto;
    right: calc(-3.5rem - 1.25rem);
  }

  .sentier-etape:nth-child(odd) .sentier-etape__corps > p,
  .sentier-etape:nth-child(odd) .sentier-etape__corps h3 {
    margin-left: auto;
  }

  .sentier-etape:nth-child(odd) .sentier-etape__pdfs {
    justify-content: flex-end;
  }

  .sentier-etape:nth-child(even) {
    margin-left: calc(50% + 3.5rem);
  }

  .sentier-etape:nth-child(even) .sentier-etape__balise {
    left: calc(-3.5rem - 1.25rem);
  }
}

/* Questions fréquentes (page Accès) : <details>/<summary> natifs, pas de
   JS nécessaire pour ouvrir/fermer. */
.faq {
  max-width: 68ch;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-sm);
}

.faq__item:first-of-type {
  border-top: 1px solid var(--color-border);
}

.faq__item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-bg-deep);
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::before {
  content: "+";
  flex-shrink: 0;
  color: var(--color-leaf);
  font-family: var(--font-display);
  font-size: 1.2em;
  width: 1em;
}

.faq__item[open] summary::before {
  content: "−";
}

.faq__item p {
  margin: var(--space-xs) 0 0 1.6em;
  max-width: 60ch;
}

/*
  Activité masquée temporairement (ex. Tir à l'arc hors-saison, Archery
  Aventure). Cette règle est volontairement placée tout à la fin du fichier
  pour toujours l'emporter sur les styles d'affichage de tout composant
  utilisé sur une carte ou une rangée d'activité.
  Pour remettre une activité en ligne : supprimer la classe
  "activite-cachee" de sa balise, et retirer le <meta name="robots"
  content="noindex"> en haut de sa page dédiée dans activites/.
*/
.activite-cachee {
  display: none;
}