/* Jaym Équitation — feuille unique.
   Palette tirée de l'affiche et du logo : vert profond, feuille, écorce,
   cuir, papier. Aucune couleur n'existe qu'ici : tout passe par les jetons. */
:root {
  --papier: #f6f1e7;
  --papier-2: #ece5d5;
  --encre: #1e2a24;
  --encre-2: #4a5a50;
  --mousse: #2e5e4e;
  --mousse-2: #24483c;
  --feuille: #7a9a3b;
  --ecorce: #6b4a2b;
  --cuir: #b9713f;
  --trait: #d8cfbd;
  --ciel-haut: #cfe4f1;
  --ciel-bas: #f3ead8;
  --tete-h: 76px;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --script: "Caveat", "Segoe Script", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mousse); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; color: var(--mousse-2); text-wrap: balance; margin: 0 0 .6em; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.8rem); line-height: 1.02; font-variation-settings: "opsz" 144; }
h1 em { font-style: italic; font-weight: 300; color: var(--ecorce); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.12; }
h3 { font-size: 1.45rem; line-height: 1.2; margin-bottom: .4em; }
p { margin: 0 0 1em; }
.sur { font: 700 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cuir); margin-bottom: .9em; }
.chapo { font-size: 1.15rem; color: var(--encre-2); max-width: 38em; }
.main { font-family: var(--script); font-size: 1.15em; color: var(--cuir); font-weight: 600; }
.petit { font-size: .95rem; color: var(--encre-2); }

.saut { position: absolute; left: -999px; top: 8px; background: var(--mousse); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.saut:focus { left: 12px; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.35em; border-radius: 999px;
  font: 700 .95rem/1 var(--sans); text-decoration: none;
  border: 1.5px solid transparent; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible { outline: 3px solid var(--cuir); outline-offset: 3px; }
.btn.grand { padding: .95em 1.6em; font-size: 1.02rem; }
.btn-plein { background: var(--mousse); color: #fff; }
.btn-plein:hover { background: var(--mousse-2); transform: translateY(-1px); }
.btn-clair { background: rgba(255,255,255,.72); color: var(--mousse-2); border-color: rgba(46,94,78,.25); backdrop-filter: blur(6px); }
.btn-clair:hover { background: #fff; transform: translateY(-1px); }
.btn-ligne { color: var(--mousse); border-color: var(--mousse); background: transparent; }
.btn-ligne:hover { background: var(--mousse); color: #fff; }
.actes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.tete {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.tete.pose { border-color: var(--trait); background: color-mix(in srgb, var(--papier) 94%, transparent); }
.tete .rang { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 1.5rem; min-height: var(--tete-h); }
.marque { color: var(--encre); display: flex; align-items: center; }
.marque .logo { height: 54px; width: auto; display: block; }
.nav { display: flex; gap: 1.4rem; margin-left: auto; }
.nav a { font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--encre); padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="true"] { border-bottom-color: var(--cuir); }
.tete > .rang > .btn { margin-left: .5rem; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.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); }
.menu { display: none; flex-direction: column; gap: 4px; padding: 8px 20px 20px; border-top: 1px solid var(--trait); }
.menu a:not(.btn) { padding: 12px 6px; font-weight: 600; text-decoration: none; color: var(--encre); border-bottom: 1px solid var(--trait); }
.menu .btn { margin-top: 12px; justify-content: center; }
.menu.ouvert { display: flex; }
@media (max-width: 860px) {
  .nav, .tete > .rang > .btn { display: none; }
  .burger { display: flex; }
}

/* ── Le paysage ──────────────────────────────────────────────────────────── */
/* La scène fait trois écrans de haut ; le paysage, collé en haut, reste le
   temps qu'on la traverse. C'est le défilement qui fait avancer la jument. */
.scene { height: 320vh; position: relative; }
.paysage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; align-items: end;
  overflow: hidden; isolation: isolate;
  padding: calc(var(--tete-h) + env(safe-area-inset-top, 0px) + 3vh) 20px 0;
}
/* Sans script, ou si l'on veut moins de mouvement : un écran, pas trois. */
html:not(.js) .scene, html.calme .scene { height: auto; }
html:not(.js) .paysage, html.calme .paysage { position: relative; }
.plan { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; pointer-events: none; }
.plan.ciel { background: linear-gradient(180deg, var(--ciel-haut) 0%, #e6ecdf 55%, var(--ciel-bas) 100%); z-index: 0; }
.plan.soleil { z-index: 1; }
.plan.soleil span { position: absolute; right: 12%; top: 14%; width: 18vmin; height: 18vmin; border-radius: 50%; background: radial-gradient(circle, #fff4d6 0%, #f9dfa4 45%, rgba(249,223,164,0) 72%); }
/* Les plans du sol s'ancrent en BAS, chacun à sa hauteur : c'est l'étagement
   qui fait la profondeur. `slice` sur un viewBox 4:1 ancré en bas remplit la
   largeur et rogne le haut, transparent — les chevaux gardent leurs
   proportions. */
/* Un quart de largeur de marge de chaque côté : c'est ce que le plan le
   plus proche peut glisser sans découvrir le bord. */
.paysage svg.plan { top: auto; bottom: -2px; left: -25%; width: 150%; }
.paysage .plan.collines-loin { z-index: 2; height: 42%; }
.paysage .plan.lisiere { z-index: 3; height: 36%; }
.paysage .plan.pre { z-index: 4; height: 34%; }
.paysage .plan.herbe { z-index: 6; height: 11%; }

.galop {
  position: absolute; z-index: 5; bottom: 7.5%; left: 0;
  width: clamp(230px, 26vw, 440px); height: auto;
  color: #2b1d12; will-change: transform;
  filter: drop-shadow(0 18px 14px rgba(30,42,36,.25));
  transform: translate3d(-120%, 0, 0);
}
html:not(.js) .galop, html.calme .galop { transform: translate3d(58vw, 0, 0); }
@media (max-width: 700px) { .galop { width: 58vw; bottom: 6%; } }

.legendes { position: absolute; z-index: 5; left: 0; right: 0; top: 30%; padding: 0 20px; pointer-events: none; }
.legende {
  max-width: 1180px; margin: 0 auto; opacity: 0; transform: translateY(18px);
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.1; color: var(--mousse-2);
  transition: opacity .35s ease, transform .35s ease; position: absolute; left: 20px; right: 20px;
}
.legende .sur { display: block; margin-bottom: .5rem; }
.legende.vue { opacity: 1; transform: none; }
html:not(.js) .legendes, html.calme .legendes { display: none; }

.progres { position: fixed; z-index: 45; left: 0; top: 0; width: 100%; height: 3px; pointer-events: none; }
.progres span { display: block; height: 100%; width: 0; background: var(--cuir); transform-origin: left; }
html:not(.js) .progres { display: none; }

.accroche {
  position: relative; z-index: 5;
  will-change: transform, opacity;
  max-width: 1180px; margin: 0 auto; width: 100%;
  /* Le texte vit au-dessus du sol : il s'arrête là où commencent les
     collines lointaines (46 % de la hauteur), plus une marge. */
  padding-bottom: 40vh;
  text-align: left;
}
.accroche .chapo { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--encre-2); max-width: 34em; }
.note-main { font-family: var(--script); font-size: 1.35rem; color: var(--ecorce); margin: 1.1rem 0 0 .2rem; transform: rotate(-2deg); display: inline-block; }
.descendre { position: absolute; z-index: 7; left: 50%; bottom: 3.5vh; transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.6); color: var(--mousse-2); text-decoration: none; font-size: 1.2rem; animation: flotte 2.6s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (prefers-reduced-motion: reduce) { .descendre { animation: none; } }
@media (max-width: 700px) {
  /* Sur un téléphone le texte prend plus de hauteur : le sol se tasse. */
  .paysage .plan.collines-loin { height: 34%; }
  .paysage .plan.lisiere { height: 29%; }
  .paysage .plan.pre { height: 24%; }
  .paysage .plan.herbe { height: 11%; }
  .accroche { padding-bottom: 36vh; }
  .plan.soleil span { right: 6%; top: 12%; width: 26vmin; height: 26vmin; }
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.bloc { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 20px; }
.bloc > .colonne, .bloc > .offres, .bloc > .duo, .bloc > .reseaux { max-width: 1180px; margin-left: auto; margin-right: auto; }
.colonne { max-width: 760px; margin-bottom: 3rem; }

.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.offre {
  display: grid; grid-template-rows: auto 1fr;
  background: #fff; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--trait);
  box-shadow: 0 1px 0 rgba(30,42,36,.04), 0 18px 40px -28px rgba(30,42,36,.35);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.offre:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(30,42,36,.04), 0 28px 48px -26px rgba(30,42,36,.4); }
.offre figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-2); }
.offre figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
#balades figure img { object-position: 30% 20%; }
#pension figure img { object-position: center 45%; }
.offre:hover figure img { transform: scale(1.04); }
.offre .corps { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; }
.offre .num { font-family: var(--serif); font-style: italic; color: var(--cuir); font-size: .95rem; margin: 0 0 .35rem; }
.offre p:not(.num):not(.tarif) { color: var(--encre-2); font-size: .98rem; flex: 1; }
.tarif { margin: .6rem 0 0; font-weight: 700; font-size: .92rem; color: var(--mousse-2); border-top: 1px solid var(--trait); padding-top: .8rem; }
.tarif a { text-decoration: none; }

/* ── Citation ────────────────────────────────────────────────────────────── */
.citation { position: relative; background: var(--mousse); color: #fff; padding: clamp(4.5rem, 10vw, 8rem) 20px; overflow: hidden; isolation: isolate; text-align: center; }
.fond-feuilles { position: absolute; inset: -20% 0; width: 100%; height: 140%; z-index: 0; will-change: transform; }
.citation blockquote { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.citation p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.3; color: #fff; margin-bottom: 1.2rem; text-wrap: balance; }
.citation footer { font: 700 .8rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #cfe0c3; }

/* ── La photo pleine largeur ─────────────────────────────────────────────── */
.photo-large { position: relative; margin-top: clamp(1.5rem, 4vw, 3rem); }
.photo-large .cadre { overflow: hidden; height: clamp(300px, 56vh, 600px); }
.photo-large img { width: 100%; height: 124%; object-fit: cover; object-position: center 40%; will-change: transform; }
.photo-large .mot {
  max-width: 1180px; margin: -3.5rem auto 0; position: relative; z-index: 2;
  background: var(--papier); border-radius: 22px 22px 0 0;
  padding: clamp(1.6rem, 4vw, 2.8rem) 20px 0; max-inline-size: min(1180px, 100%);
}
.photo-large .mot h2 { max-width: 16em; }
.photo-large .mot p:last-child { max-width: 44em; color: var(--encre-2); }
@media (max-width: 700px) { .photo-large .mot { margin-top: -2rem; border-radius: 16px 16px 0 0; } }

/* ── Julie ───────────────────────────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.portrait { margin: 0; position: relative; }
.portrait img { border-radius: 46% 54% 50% 50% / 50% 44% 56% 50%; box-shadow: 0 30px 60px -30px rgba(30,42,36,.45); width: min(100%, 460px); margin: 0 auto; }
.portrait::after { content: ""; position: absolute; inset: 8% -6% -6% 8%; border-radius: inherit; border: 2px solid var(--feuille); opacity: .5; z-index: -1; border-radius: 50% 46% 54% 50% / 46% 54% 46% 54%; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } .portrait img { width: min(100%, 360px); } }

/* ── Réseaux ─────────────────────────────────────────────────────────────── */
.suivre { background: var(--papier-2); }
.reseaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.reseau { display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 1.4rem; background: #fff; border: 1px solid var(--trait); border-radius: 18px; text-decoration: none; color: var(--encre); transition: transform .3s ease, border-color .3s ease; }
.reseau:hover { transform: translateY(-3px); border-color: var(--feuille); }
.reseau svg { width: 40px; height: 40px; flex: 0 0 auto; color: var(--mousse); }
.reseau b { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--mousse-2); }
.reseau small { display: block; color: var(--encre-2); font-size: .92rem; }

/* ── Venir ───────────────────────────────────────────────────────────────── */
.venir { background: var(--papier); padding-top: 0; }
.collines-bas { display: block; width: 100%; height: 80px; margin-bottom: clamp(2rem, 5vw, 4rem); background: var(--papier-2); }
address { font-style: normal; font-size: 1.05rem; }
address p { margin-bottom: .8em; }
address a { text-decoration: none; font-weight: 600; }
.carte svg { width: 100%; height: auto; border-radius: 18px; filter: drop-shadow(0 24px 40px rgba(30,42,36,.18)); }
/* Les noms de la carte suivent les polices du site et grossissent sur un
   téléphone, où la carte n'occupe plus que 370 px de large. */
.carte svg text { font-family: var(--sans); }
.carte .c-pact { font-family: var(--serif); font-size: 21px; }
.carte .c-nom { font-size: 14px; }
.carte .c-chemin { font-family: var(--script); font-size: 21px; }
.carte .c-ech { font-size: 11px; }
.carte .c-attr { font-size: 10px; }
@media (max-width: 800px) {
  .carte .c-pact { font-size: 27px; }
  .carte .c-nom { font-size: 18px; }
  .carte .c-chemin { font-size: 26px; }
  .carte .c-ech { font-size: 14px; }
  .carte .c-attr { font-size: 13px; }
}

/* ── Pied ────────────────────────────────────────────────────────────────── */
.pied { background: var(--mousse-2); color: #cfe0c3; padding: 2.4rem 20px calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: .92rem; }
.pied .rang { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }
.pied p { margin: 0; }
.logo-pied { height: 52px; width: auto; filter: invert(1) brightness(1.6); opacity: .9; }
.pied .liens { margin-left: auto; display: flex; gap: 1.2rem; }
.pied a { color: #fff; text-decoration: none; font-weight: 600; }
.pied a:hover { text-decoration: underline; }

/* ── Apparition au défilement ────────────────────────────────────────────
   L'état de repos est VISIBLE : sans JavaScript, rien n'est caché. Le script
   pose `.js` sur la racine, puis chaque .reveal glisse de 14 px à l'entrée. */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
html.js .reveal.vu { opacity: 1; transform: none; }
html.js .offres .offre:nth-child(2) { transition-delay: .08s; }
html.js .offres .offre:nth-child(3) { transition-delay: .16s; }
html.js .offres .offre:nth-child(4) { transition-delay: .24s; }
/* La citation arrive mot à mot, chaque mot avec un retard qui suit sa place. */
html.js .citation .mot { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 45ms); }
html.js .citation.vue .mot { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .plan, .fond-feuilles { transform: none !important; }
}