/* =========================================================
   Village Équi-Nature — feuille de style
   Design repris de la maquette WordPress/Elementor :
   Lemon Milk (titres) + Poppins (texte), vert sapin #113233,
   crème #edebe4, cartes à coins arrondis 20px.
   ========================================================= */

/* ---------- Polices auto-hébergées ---------- */
@font-face {
  font-family: 'Lemon Milk';
  src: url('/assets/fonts/lemonmilk-bold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
  --pine:        #113233;
  --pine-dark:   #0b2223;
  --pine-light:  #1d4647;
  --cream:       #edebe4;
  --cream-dark:  #ddd9cc;
  --white:       #ffffff;
  --text:        #113233;
  --text-muted:  #4d6b6c;

  /* Accent « Ember » — ocre volcanique, en trois tons.
     Aucune teinte orangée n'étant lisible à la fois sur le vert sapin et sur
     le crème, chaque ton a un fond assigné (contrastes mesurés) :
       --ember-light sur vert sapin ......... 5,96:1
       --ember-deep  sur crème / blanc ..... 5,18 / 6,17:1
       --ember       usages non textuels ... 3,75:1
     Ne jamais poser de texte sur --ember : blanc dessus = 3,66:1, insuffisant. */
  --ember:       #d9622a;
  --ember-light: #f0954a;
  --ember-deep:  #a83f24;

  --font-display: 'Lemon Milk', 'Poppins', sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius:      20px;
  --radius-sm:   12px;
  --gutter:      64px;
  --maxw:        1280px;
  --header-h:    108px;

  /* Vocabulaire du mouvement : deux courbes, trois durées. Tout s'y aligne. */
  --ease:       cubic-bezier(.22, .61, .36, 1);   /* états : survol, focus */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);      /* entrées */
  --dur-state:  250ms;
  --dur-enter:  700ms;
  --dur-slow:   800ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 5vw, 3.4375rem); }
/* Un mot long et insécable (« CONFIDENTIALITÉ ») débordait de l'écran à
   320 px. On autorise la coupure brute en dernier recours, mais PAS la
   césure typographique (hyphens: auto) : les tirets en plein titre sont
   inesthétiques (« RAN-DONNÉES »). */
h1, h2, h3 { overflow-wrap: break-word; hyphens: none; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Anneau de focus en ember : lisible sur crème comme sur vert sapin. */
:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pine); color: var(--white);
  padding: .8rem 1.2rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- En-tête ---------- */
/* Accueil : header superposé au héros, il ne doit jamais entrer dans le flux
   (sans quoi l'ajout de --solid au défilement décalerait toute la page). */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background-color: transparent;
  /* Propriété longue obligatoire : transitionner le raccourci « background »
     avec un var() empêche Chromium de résoudre la couleur au scroll. */
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Pages internes : header dans le flux, collant en haut. */
body.is-inner .site-header { position: sticky; }

/* Bandeau plein : fond beige, contenu en vert sapin. */
.site-header--solid {
  background-color: var(--cream);
  box-shadow: 0 2px 18px rgba(17,50,51,.14);
}
.site-header--solid .nav-main a { color: var(--pine); }
.site-header--solid .nav-main a::after { background: var(--ember-deep); }
.site-header--solid .burger span { background: var(--pine); }

/* Le logo est un SVG inline : sa couleur suit celle du bandeau.
   Crème sur la vidéo, vert sapin dès que le bandeau passe en beige. */
.brand { display: block; color: var(--cream); transition: color var(--dur-state) var(--ease); }
.site-header--solid .brand { color: var(--pine); }
.logo-svg { display: block; width: 100%; height: auto; }
.site-header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brand { width: 196px; }
.site-header--solid .brand { width: 158px; }
.brand, .site-header--solid .brand { transition: width var(--dur-state) var(--ease), color var(--dur-state) var(--ease); }

.nav-main ul {
  display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.6rem);
  list-style: none; margin: 0; padding: 0;
}
/* Soulignement qui se dessine de la gauche, en ember. */
.nav-main a {
  position: relative;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
  color: var(--white); text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; padding: .4rem 0 .5rem;
}
.nav-main a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-state) var(--ease-out);
}
.nav-main a:hover::after,
.nav-main a:focus-visible::after,
.nav-main a[aria-current="page"]::after { transform: scaleX(1); }

.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer;
  /* 14px vertical porte la cible à 44px de haut : c'est la commande de
     navigation principale sur mobile, elle doit rester confortable. */
  padding: 14px 10px;
}
.burger span { width: 26px; height: 2px; background: var(--white); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: var(--pine);
  display: grid; place-items: center;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav-overlay li + li { margin-top: 1.2rem; }
.nav-overlay a {
  font-family: var(--font-display); font-size: clamp(1.4rem, 6vw, 2.2rem);
  color: var(--white); text-transform: uppercase; text-decoration: none;
}

/* ---------- Héros (accueil) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--white);
}
/* Ken Burns : 10 % de zoom sur 24 s en aller-retour. Imperceptible image par
   image, mais le cadre n'est jamais figé. */
.hero__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.hero__video, .hero__poster {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 24s var(--ease) infinite alternate;
  will-change: transform;
}
/* Zoom volontairement réduit à 5 % : la source vidéo est en 854×430, tout
   agrandissement supplémentaire se paie en netteté. */
@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.05) translate3d(-1%, -.7%, 0); }
}

/* Respiration du voile, désynchronisée du zoom pour éviter l'effet de boucle. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,50,51,.55) 0%, rgba(17,50,51,.15) 38%, rgba(17,50,51,.75) 100%);
  animation: breathe 11s ease-in-out infinite alternate;
}
/* Ombrage propre au titre. Le voile général est volontairement léger à
   mi-hauteur pour laisser vivre la vidéo — mais c'est précisément là que se
   pose le H1, et le texte passait alors sur des zones de ciel très claires.
   Ce dégradé n'assombrit que le coin où se trouve le texte ; il ne bouge pas
   avec la respiration, pour que le contraste soit garanti à chaque instant. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(11,34,35,.82) 0%, rgba(11,34,35,.68) 35%, rgba(11,34,35,.44) 60%, transparent 85%);
  pointer-events: none;
}
@keyframes breathe { from { opacity: .86; } to { opacity: 1; } }

/* Fondu de bas de héros.
   Le voile général s'arrête à 75 % d'opacité : il restait donc un reste de
   vidéo au moment où commence le bloc vert, d'où un raccord net. Ce dégradé
   termine sur --pine plein, la même couleur que la section suivante.
   z-index 2 comme .hero__inner, mais placé avant lui dans le HTML : il
   recouvre les voiles (z-index 1) sans jamais passer sur le titre. */
.hero__fondu {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: clamp(90px, 16vh, 200px);
  background: linear-gradient(180deg, rgba(17, 50, 51, 0) 0%, var(--pine) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter) clamp(4rem, 12vh, 9rem);
}
.hero h1 { max-width: 15ch; text-transform: uppercase; text-shadow: 0 3px 24px rgba(0,0,0,.35); }
.hero__scroll {
  display: inline-flex; margin-top: 1.4rem;
  width: 34px; height: 72px;
}
.hero__scroll img { width: 100%; animation: bob 2.4s var(--ease) infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Séquence d'arrivée : logo, puis raccourcis, décalés de 150 ms.
   Le titre H1 n'est PAS animé — il doit être lisible immédiatement
   (rendu perçu et référencement). */
.is-home .brand,
.is-home .nav-main,
.is-home .hero-cards,
.is-home .hero__scroll { animation: enter var(--dur-enter) var(--ease-out) both; }
.is-home .brand           { animation-delay: 60ms; }
.is-home .nav-main        { animation-delay: 210ms; }
.is-home .hero__scroll    { animation-delay: 360ms; }
.is-home .hero-cards      { animation-delay: 360ms; }
@keyframes enter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.is-home .hero-cards { animation-name: enter-cards; }
@keyframes enter-cards { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Cartes du héros ----------
   Posées sur la vidéo, détachées de tous les bords. Photo en fond, voile
   vert sapin, filet clair pour détacher la carte de l'image, ombre portée
   généreuse : l'ensemble doit flotter au-dessus de la vidéo, pas y adhérer. */
.hero-cards {
  position: absolute; z-index: 3;
  right: var(--gutter);
  bottom: clamp(3rem, 10vh, 6.5rem);
  display: flex; gap: 1.1rem;
}
.hero-card {
  position: relative; isolation: isolate; overflow: hidden;
  width: clamp(160px, 15vw, 208px); aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
  color: var(--white); text-decoration: none;
  transition: transform var(--dur-state) var(--ease),
              box-shadow var(--dur-state) var(--ease);
}
.hero-card:hover, .hero-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(0,0,0,.5);
}

.hero-card__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.hero-card:hover .hero-card__media img,
.hero-card:focus-visible .hero-card__media img { transform: scale(1.08); }

.hero-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17,50,51,.25) 0%, rgba(17,50,51,.5) 45%, rgba(17,50,51,.88) 100%);
  transition: opacity var(--dur-state) var(--ease);
}
.hero-card:hover::after, .hero-card:focus-visible::after { opacity: .82; }

.hero-card__eyebrow {
  display: block;
  font-family: var(--font-body); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-light);
  margin-bottom: .5rem;
}
.hero-card__title {
  display: block;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
  text-transform: uppercase; line-height: 1.28; letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
/* Filet ocre qui se dessine sous le titre */
.hero-card__body { position: relative; padding-bottom: .85rem; }
.hero-card__body::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform 450ms var(--ease-out);
}
.hero-card:hover .hero-card__body::after,
.hero-card:focus-visible .hero-card__body::after { transform: scaleX(1); }

.hero-card__arrow {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ember);
  display: grid; place-items: center;
  opacity: 0; transform: translate(-8px, 8px);
  transition: opacity 400ms var(--ease-out) 100ms, transform 400ms var(--ease-out) 100ms;
}
.hero-card__arrow img { width: 16px; height: 16px; }
.hero-card:hover .hero-card__arrow,
.hero-card:focus-visible .hero-card__arrow { opacity: 1; transform: none; }

/* ---------- Bandeau de page (pages internes) ---------- */
.page-banner {
  background: var(--pine);
  color: var(--white);
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}

/* ---------- Bandeaux de page en photo ----------
   La bibliothèque est en 500×400. Plutôt que d'étirer ces photos sur toute la
   largeur — ce qui les rendait molles, et le flou censé l'assumer donnait
   l'impression d'une image pixellisée — on les affiche à leur taille réelle :
     · au-dessus de 760 px, la photo occupe la droite du bandeau, sur 520 px
       au plus, soit son échelle native ;
     · en dessous, elle passe en pleine largeur — 500 px de source pour 375 px
       d'écran, c'est une réduction, donc net également.
   Aucun flou nulle part. */
/* Pas de fondu vers le blanc en bas : essayé, puis retiré — le site est fait
   de blocs francs, et un dégradé vers le blanc y faisait une tache délavée.
   La limite reste nette, comme partout ailleurs. */
.page-banner--photo { position: relative; overflow: hidden; }
.page-banner--photo > .wrap { position: relative; z-index: 2; }

.page-banner__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-banner__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Petits écrans : photo en pleine largeur, voile pour le texte --- */
/* Corps de texte à 16 px sur mobile : plusieurs blocs étaient à 15 px, sous
   le seuil de confort de lecture sur petit écran. */
@media (max-width: 760px) {
  .programme__body, .programme__body p, .programme__body li,
  .tile__body, .facts li, .consent__texte { font-size: 1rem; }

  .page-banner--photo::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /* Voile dense : sur petit écran le texte passe SUR la photo, alors que sur
       bureau il est sur l'aplat. Sans flou pour l'adoucir, il faut ce niveau
       pour que le mot en ocre et le fil d'Ariane tiennent le contraste
       (mesuré sur les cinq photos : blanc 8,1:1, ocre 3,5:1, fil 4,6:1).
       La photo devient une matière, ce qui est le rôle qu'on lui donne ici. */
    background: linear-gradient(180deg,
      rgba(17,50,51,.82) 0%, rgba(17,50,51,.92) 100%);
  }
}

/* --- À partir de 760 px : la photo se cale à droite --- */
@media (min-width: 761px) {
  .page-banner__media {
    left: auto; right: 0;
    /* 620 px pour une source de 500 : 1,24× seulement, la photo reste nette.
       Cette largeur donne surtout de la place au dégradé. */
    width: min(56%, 620px);
    /* Elle se dissout vers la gauche pour rejoindre le vert du bandeau.
       Le dégradé est découpé en dix paliers formant une courbe en S plutôt
       qu'une rampe droite : une rampe linéaire laisse voir son point de
       départ et son point d'arrivée, ce qui se lit comme deux bords. Ici la
       transition n'a ni début ni fin visibles. */
    -webkit-mask-image: var(--fondu-photo);
            mask-image: var(--fondu-photo);
    --fondu-photo: linear-gradient(90deg,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,.03) 12%,
      rgba(0,0,0,.09) 22%,
      rgba(0,0,0,.20) 31%,
      rgba(0,0,0,.35) 39%,
      rgba(0,0,0,.53) 47%,
      rgba(0,0,0,.70) 55%,
      rgba(0,0,0,.84) 63%,
      rgba(0,0,0,.94) 71%,
      rgba(0,0,0,1)   80%);
  }
}

/* ---------- Accent des titres ----------
   Deux traitements complémentaires :
   — .accent met en ocre le mot porteur du sens d'un titre (pages de contenu) ;
   — sur les pages légales et les repères de lecture, le titre passe
     entièrement en ocre : il sert alors d'onglet dans un texte dense.
   Le ton suit le fond : clair sur vert sapin (5,96:1), foncé sur crème et
   blanc (5,18 et 6,17:1). */
.accent { color: var(--ember-deep); }
.page-banner .accent,
.section--pine .accent,
.hero .accent { color: var(--ember-light); }

.legal h2 { color: var(--ember-deep); }
.programme__body h3 { color: var(--ember-deep); }
.section--pine .programme__body h3 { color: var(--ember-light); }
.detail__body h3 { color: var(--ember-deep); }
.section--pine .detail__body h3 { color: var(--ember-light); }
.page-banner p { max-width: 68ch; color: var(--cream); margin: 0; }
.breadcrumb {
  font-size: .8125rem; color: var(--cream); opacity: .75;
  margin-bottom: 1.2rem; list-style: none; padding: 0;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.breadcrumb li + li::before { content: '›'; margin-right: .5rem; }
.breadcrumb a { text-decoration: none; display: inline-block; padding-block: .2rem; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.section--pine  { background: var(--pine);  color: var(--cream); }
.section--pine h2, .section--pine h3 { color: var(--cream); }
.section--cream { background: var(--cream); color: var(--pine); }
.section--white { background: var(--white); }

.section__head { max-width: 74ch; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.section__head h2 { text-transform: uppercase; }
.section__head p:last-child { margin-bottom: 0; }

.lead { font-size: 1.0625rem; line-height: 1.8; }

/* ---------- Grandes cartes (accueil) ---------- */
.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.card-big {
  position: relative; display: flex; align-items: flex-end;
  min-height: 460px; padding: 2rem;
  border-radius: var(--radius); overflow: hidden;
  color: var(--white); text-decoration: none;
  isolation: isolate;
}
/* Enfant DIRECT uniquement : sans le « > », cette règle attrapait aussi la
   flèche de la pastille et la renvoyait derrière le fond (z-index: -2). */
.card-big > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card-big::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17,50,51,0) 35%, rgba(17,50,51,.82) 100%);
}
.card-big h3 { margin: 0; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0,0,0,.4); }

/* Chorégraphie en trois gestes décalés : l'image s'approche (800 ms), le trait
   ember se dessine (450 ms), la flèche arrive en diagonale (400 ms). */
.card-big:hover > img, .card-big:focus-visible > img { transform: scale(1.07); }

.card-big h3::after {
  content: ''; display: block; height: 2px; width: 100%; margin-top: .7rem;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform 450ms var(--ease-out) 60ms;
}
.card-big:hover h3::after, .card-big:focus-visible h3::after { transform: scaleX(1); }

/* Pastille ember avec une flèche dédiée (ic-arrow-right.svg).
   Deux écueils évités ici :
   — le fond est porté par le <span>, jamais par l'<img> : un filtre de
     blanchiment appliqué au même élément décolorerait aussi l'ocre ;
   — ic-fleche.svg (l'indicateur de défilement du héros) n'est pas réutilisable
     à cette taille : son viewBox de 124 px de haut réduit son trait de 2 px
     sous le pixel, la flèche devenait invisible. */
.card-big__arrow {
  position: absolute; top: 1.3rem; right: 1.3rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ember);
  display: grid; place-items: center;
  opacity: 0; transform: translate(-8px, 8px);
  transition: opacity 400ms var(--ease-out) 120ms, transform 400ms var(--ease-out) 120ms;
}
.card-big__arrow img { width: 18px; height: 18px; }
.card-big:hover .card-big__arrow, .card-big:focus-visible .card-big__arrow {
  opacity: 1; transform: none;
}

/* ---------- Grille de vignettes ---------- */
.tiles { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.tile {
  background: var(--white); color: var(--pine);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 24px rgba(17,50,51,.09);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 12px 34px rgba(17,50,51,.16); }
.tile > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tile__body { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; }
.tile__body h3, .tile__body h2 { text-transform: uppercase; font-size: 1.125rem; }
.tile__body p { font-size: .9375rem; }
.tile__body p:last-of-type { margin-bottom: 0; }
/* Le chiffre que le visiteur cherche : prix, durée, tarif. */
.tile__meta {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--font-display); font-size: .875rem; color: var(--ember-deep);
  border-top: 1px solid var(--cream-dark);
}
.section--cream .tile { box-shadow: 0 4px 24px rgba(17,50,51,.06); }

/* ---------- Fiches détaillées (randonnées) ---------- */
.detail { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1.15fr .85fr; align-items: start; }
.detail + .detail { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--cream-dark); }
.section--pine .detail + .detail { border-top-color: var(--pine-light); }
.detail__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.detail__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem; }
.detail__gallery img { border-radius: var(--radius-sm); aspect-ratio: 4/3; object-fit: cover; }
.detail h3 { text-transform: uppercase; }

.facts { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.facts li { display: flex; gap: .6rem; font-size: .9375rem; }
.facts dt, .facts .facts__k {
  font-family: var(--font-display); font-size: .8125rem; text-transform: uppercase;
  letter-spacing: .03em; min-width: 11ch; flex-shrink: 0; opacity: .85;
}

.programme { margin: 1.4rem 0 0; }
.programme summary {
  font-family: var(--font-display); text-transform: uppercase; font-size: .9375rem;
  cursor: pointer; padding: .9rem 0; border-top: 1px solid currentColor;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.programme summary::-webkit-details-marker { display: none; }
/* Le « + » pivote en croix à l'ouverture (voir la transition plus bas). */
.programme summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--ember); }
.programme__body { padding-bottom: 1rem; font-size: .9375rem; }
.programme__body h3 { font-family: var(--font-display); text-transform: uppercase; font-size: .875rem; margin: 1.2rem 0 .35em; }
.programme__body h3:first-child { margin-top: 0; }

/* ---------- Tarifs ---------- */
.price-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.price-table caption {
  font-family: var(--font-display); text-transform: uppercase; text-align: left;
  font-size: 1rem; padding-bottom: .8rem;
}
.price-table th, .price-table td { padding: .85rem 1rem; text-align: left; font-size: .9375rem; }
.price-table thead th {
  font-family: var(--font-display); font-size: .8125rem; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 2px solid currentColor;
}
.price-table tbody tr + tr td { border-top: 1px solid var(--cream-dark); }
.section--pine .price-table tbody tr + tr td { border-top-color: var(--pine-light); }
.price-table td:last-child { text-align: right; font-family: var(--font-display); white-space: nowrap; }

/* ---------- Blocs d'appel ---------- */
.callout {
  background: var(--cream); color: var(--pine);
  border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem);
}
.section--cream .callout { background: var(--white); }
.callout h2, .callout h3 { text-transform: uppercase; margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* Boutons en ember-deep : blanc dessus = 6,17:1. La teinte moyenne ne
   conviendrait pas (3,66:1 en 14 px gras). */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  padding: .95rem 1.7rem; border-radius: 999px;
  background: var(--ember-deep); color: var(--white);
  border: 2px solid var(--ember-deep);
  transition: background-color var(--dur-state) var(--ease),
              color var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease);
}
.btn:hover { background-color: transparent; color: var(--ember-deep); transform: translateY(-2px); }
.btn:active { transform: none; }

/* Variante sur fond vert sapin : le contour clair reste plus lisible. */
.btn--light { background: var(--cream); color: var(--pine); border-color: var(--cream); }
.btn--light:hover { background-color: transparent; color: var(--cream); }
.section--pine .btn:not(.btn--light) { border-color: var(--ember); background: var(--ember-deep); }
.section--pine .btn:not(.btn--light):hover { background-color: transparent; color: var(--ember-light); }
.page-banner .btn:not(.btn--light) { border-color: var(--ember); }
.page-banner .btn:not(.btn--light):hover { color: var(--ember-light); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; }

/* ---------- Agenda ---------- */
.agenda-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.agenda-head h2 { margin: 0; text-transform: uppercase; }

.news { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.news__item {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 24px rgba(17,50,51,.08);
}
.news__item img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.news__body { padding: 1.6rem; }
.news__date {
  font-family: var(--font-display); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-bottom: .5rem;
}
.news__body h3 { font-size: 1.0625rem; text-transform: uppercase; }
.news__body p { font-size: .9375rem; margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr 1fr; align-items: start; }
.contact-card { background: var(--cream); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.4rem); }
.contact-card h3, .contact-card h2 { text-transform: uppercase; margin-top: 0; font-size: 1.25rem; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.contact-list a { text-decoration: none; display: inline-block; padding-block: .2rem; }
.contact-list a:hover { text-decoration: underline; }
.contact-list strong {
  font-family: var(--font-display); font-size: .8125rem; text-transform: uppercase;
  display: block; opacity: .8;
}

/* ---------- Contenu légal ---------- */
.legal { max-width: 78ch; }
.legal h2 { text-transform: uppercase; margin-top: 2.4rem; font-size: 1.25rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .4rem; }

/* ---------- Pied de page ---------- */
.site-footer { position: relative; background: var(--pine); color: var(--cream); overflow: hidden; }
.site-footer__map {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: min(420px, 38vw); opacity: .12; pointer-events: none;
}
.site-footer__map img { width: 100%; filter: brightness(0) invert(1); }
.site-footer__inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3rem, 7vw, 4.5rem) var(--gutter) 2rem;
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.1fr 1.2fr 1fr 1fr;
}
.footer-col h2 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--white); margin-bottom: 1rem;
}
.footer-col__second { margin-top: 1.8rem; }
.footer-col .logo-svg { width: 230px; }
.footer-col--brand { color: var(--cream); }
.footer-baseline { font-size: .875rem; margin-top: 1rem; opacity: .8; }
.footer-col address { font-style: normal; font-size: .9375rem; margin-bottom: 1rem; }
.footer-contact, .footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9375rem; }
.footer-contact a, .footer-nav a {
  text-decoration: none; opacity: .9;
  display: inline-block; padding-block: .25rem;
}
.footer-contact a:hover, .footer-nav a:hover { text-decoration: underline; opacity: 1; }
.site-footer__legal {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.4rem var(--gutter) 2.2rem;
  border-top: 1px solid var(--pine-light);
  font-size: .8125rem; opacity: .7; margin-bottom: 0;
}

/* ---------- Apparition au défilement, en cascade ---------- */
/* --i est posé par main.js : rang de l'élément dans son groupe. */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Crêtes du Cantal, en séparateur de sections ---------- */
.crete { display: block; line-height: 0; }
.crete svg { display: block; width: 100%; height: clamp(26px, 4vw, 44px); }
.crete polyline { fill: none; stroke: var(--ember); stroke-width: 1.5; opacity: .5; }
.crete--cream { background: var(--cream); }
.crete--white { background: var(--white); }
.crete--pine  { background: var(--pine); }
.crete--pine polyline { stroke: var(--ember-light); opacity: .45; }

/* ---------- Bandeau de chiffres ---------- */
.figures {
  display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.figure__n {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1;
  color: var(--ember-light); font-variant-numeric: tabular-nums;
}
.figure__u {
  display: block; margin-top: .6rem;
  font-family: var(--font-display); font-size: .8125rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--cream);
  opacity: .75;
}


/* ---------- Accordéon fluide (programmes jour par jour) ---------- */
.programme summary { transition: color var(--dur-state) var(--ease); }
.programme summary:hover { color: var(--ember-light); }
.section--white .programme summary:hover,
.section--cream .programme summary:hover { color: var(--ember-deep); }
.programme summary::after { transition: transform var(--dur-state) var(--ease); }
.programme[open] summary::after { transform: rotate(45deg); }
.programme__body { animation: unfold 450ms var(--ease-out); }
@keyframes unfold {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Adaptatif ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  /* Le titre s'élargit : les cartes descendent sous lui plutôt que de le croiser. */
  .hero-cards { bottom: clamp(2rem, 5vh, 3rem); gap: .8rem; }
  .hero-card { padding: 1.2rem 1.1rem; }
  .cards { grid-template-columns: 1fr; }
  .card-big { min-height: 340px; }
  .detail { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; --header-h: 84px; }
  .nav-main { display: none; }
  .burger { display: flex; }
  .brand, .site-header--solid .brand { width: 150px; }
  /* Le héros passe en colonne : le titre au-dessus, les raccourcis en bande pleine largeur. */
  .hero { min-height: 92svh; }
  /* Réserve pour les cartes posées dessous. Leur hauteur ne dépend PAS de la
     hauteur de l'écran mais de sa LARGEUR : elles font la moitié de la largeur
     utile, en 5/4. Une réserve exprimée en vh laissait donc le titre passer
     derrière les cartes entre 700 et 860 px. On calcule la vraie hauteur :
     (largeur utile / 2) × 4/5, soit × 0,4, plus la marge du bas. */
  .hero__inner {
    width: 100%;
    padding-bottom: calc((100vw - 2 * var(--gutter) - .75rem) * .4 + 4.5rem);
  }
  /* Les cartes restent sur la vidéo, en deux colonnes, marges sur tous les côtés. */
  .hero-cards {
    left: var(--gutter); right: var(--gutter);
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  }
  .hero-card {
    width: auto; aspect-ratio: 5 / 4;
    padding: 1rem .95rem;
    border-radius: var(--radius-sm);
  }
  .hero-card__arrow { display: none; }
  .hero-card__eyebrow { font-size: .625rem; letter-spacing: .1em; margin-bottom: .3rem; }
  .hero-card__title { font-size: .8125rem; }
  .hero__scroll { display: none; }
  /* Le bandeau n'est plus centré verticalement : la séquence d'arrivée ne doit
     donc pas réintroduire translateY(-50%). */
  /* Sans survol possible, la pastille reste visible. */
  .card-big__arrow { opacity: 1; transform: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__map { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Héros : relais poster → vidéo ---------- */
.hero__poster { position: absolute; inset: 0; }
.hero__video  { position: absolute; inset: 0; }
.hero__video[hidden] { display: none; }
.hero--video-ready .hero__poster { opacity: 0; transition: opacity 600ms var(--ease-out); }

/* ---------- Actualités : bouton, popups ---------- */
.news__more {
  /* Cible tactile : le bouton ne faisait que 22 px de haut, sous le minimum
     de 24 px. Les marges intérieures verticales l'amènent à 44 px sans rien
     changer à son allure ; le trait de soulignement, lui, reste calé sur le
     texte grâce au décalage de son ::after. */
  min-height: 44px; display: inline-flex; align-items: flex-end;
  margin-top: .5rem; align-self: flex-start;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ember-deep); background: none; border: 0;
  padding: .7rem 0 .5rem;
  cursor: pointer; position: relative;
}
.news__more::after {
  content: ''; position: absolute; left: 0; bottom: .3rem; width: 100%; height: 2px;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-state) var(--ease-out);
}
.news__more:hover::after, .news__more:focus-visible::after { transform: scaleX(1); }

/* Actualités au-delà des trois premières */
.news__item--cachee { display: none; }
.news--depliee .news__item--cachee { display: flex; }

/* ---------- Popup d'actualité ---------- */
.actu-modale {
  width: min(680px, calc(100vw - 2rem));
  max-height: min(88vh, 900px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--white); color: var(--text);
  box-shadow: 0 30px 80px rgba(17,50,51,.4);
  overflow: hidden;
}
.actu-modale::backdrop { background: rgba(11,34,35,.72); backdrop-filter: blur(3px); }
.actu-modale[open] { display: flex; flex-direction: column; animation: modale-entre 350ms var(--ease-out); }
@keyframes modale-entre {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.actu-modale__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; flex-shrink: 0; }
.actu-modale__corps { padding: clamp(1.5rem, 4vw, 2.4rem); overflow-y: auto; }
.actu-modale__corps h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem); text-transform: uppercase; margin-bottom: 1rem;
}
.actu-modale__corps h3 {
  font-size: 1rem; text-transform: uppercase; margin: 1.8rem 0 .6em; color: var(--ember-deep);
}
.actu-modale__corps ul { padding-left: 1.2rem; margin-bottom: 1.1em; }
.actu-modale__corps li { margin-bottom: .4rem; }
.actu-modale__corps .news__date { color: var(--text-muted); }

.actu-modale__fermer { position: absolute; top: .9rem; right: .9rem; z-index: 2; margin: 0; }
.actu-modale__fermer button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(17,50,51,.72); color: var(--white);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
  transition: background var(--dur-state) var(--ease);
}
.actu-modale__fermer button:hover { background: var(--ember-deep); }

@media (prefers-reduced-motion: reduce) { .actu-modale[open] { animation: none; } }

/* =========================================================
   Bandeau de consentement à la mesure d'audience
   Posé en bas, il ne masque jamais le contenu : le site reste
   entièrement utilisable sans y répondre.
   ========================================================= */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--pine);
  color: var(--cream);
  border-top: 3px solid var(--ember);
  box-shadow: 0 -8px 30px rgba(11, 34, 35, .3);
  transform: translateY(100%);
  transition: transform var(--dur-enter) var(--ease-out);
}
.consent.est-visible { transform: none; }

.consent__corps {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.2rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.consent__texte {
  flex: 1;
  min-width: min(320px, 100%);
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
}
.consent__texte a { color: var(--ember-light); }

.consent__choix { display: flex; gap: .8rem; flex-wrap: wrap; }
/* Les deux boutons partagent exactement la même forme et la même taille :
   refuser doit demander le même effort qu'accepter. */
.consent__btn {
  min-width: 148px;
  padding: .8rem 1.6rem;
  font-size: .9375rem;
}
.consent__btn[data-consent="refus"]  { background: transparent; color: var(--cream); border-color: var(--cream); }
.consent__btn[data-consent="refus"]:hover  { background: var(--cream); color: var(--pine); }
.consent__btn[data-consent="accord"] { background: var(--ember-deep); color: #fff; border-color: var(--ember-deep); }
.consent__btn[data-consent="accord"]:hover { background: var(--ember); border-color: var(--ember); }

@media (max-width: 760px) {
  .consent__corps { padding: 1.1rem 1.2rem; gap: 1rem; }
  .consent__choix { width: 100%; }
  .consent__btn { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}