/* ===== Haras de la Baronnie — « L'affiche et le registre » ===== */

:root{
  --chaux:#F0F1EA;        /* limewash of the stable walls: main background */
  --chaux-clair:#F9F9F5;  /* form fields, dialog panels */
  --sauge:#DFE4D6;        /* second light surface */
  --ardoise:#17231C;      /* body text, dark sections */
  --ardoise-2:#0E1611;
  --mousse:#4F5A4C;       /* secondary text */
  --vert:#1F4A2E;         /* logo green: headings, buttons, strong rules */
  --vert-fonce:#163A23;
  --cuivre:#B0703C;       /* logo copper: ornament only, never text under 24px */
  --cuivre-texte:#8A5326; /* small copper text, focus ring on light */
  --laiton:#DDB684;       /* on dark: prices, labels, buttons, focus */
  --trait:#6F776B;        /* field borders */
  --alerte:#A03A2C;
  --filet:rgb(23 35 28 / .16);
  --filet-clair:rgb(240 241 234 / .18);
  --serif:"Besley", Georgia, "Times New Roman", serif;
  --sans:"Libre Franklin", "Segoe UI", Arial, sans-serif;
  --gut:clamp(20px, 3vw, 32px);
  --section:clamp(64px, 8vw, 120px);
  --r-ctrl:2px; --r-modal:4px;
  --ombre-modal:0 30px 60px -20px rgb(23 35 28 / .45);
  /* aliases still read by cgv.html, confidentialite.html, 404.html */
  --cream:var(--chaux); --cream-dark:var(--sauge); --brown:var(--ardoise);
  --gold:var(--cuivre-texte); --gold-light:var(--laiton);
  --green-deep:var(--vert); --green:var(--vert); --green-soft:var(--mousse);
  --white:#FFFFFF; --radius:var(--r-ctrl); --shadow:var(--ombre-modal);
  /* painted brush strokes of the poster */
  --pinceau:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cg fill='%231F4A2E'%3E%3Cpath d='M9 8 30 5 78 7 150 3 262 6 348 2 391 6 384 12 397 19 386 26 395 33 383 40 394 48 372 54 290 57 180 53 90 58 30 54 6 57 14 49 2 42 12 34 0 27 11 19 3 12Z'/%3E%3Cpath d='M0 3h24v2H0zM374 56h26v2h-26z'/%3E%3C/g%3E%3C/svg%3E");
  --pinceau-panneau:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' preserveAspectRatio='none'%3E%3Cpath d='M12 10 44 6 98 10 150 5 204 9 233 6 228 30 237 58 229 86 236 116 230 152 188 155 128 151 70 156 22 152 6 155 11 124 3 96 10 66 4 36Z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; }
body{
  margin: 0; background: var(--chaux); color: var(--ardoise);
  font: 400 1rem/1.6 var(--sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 761px){ body{ font-size: 1.0625rem; } }
body.dialog-open{ overflow: hidden; }
main:focus{ outline: none; }
/* height:auto keeps the ratio when width/height attributes are set (they only reserve space) */
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4{
  font-family: var(--serif); font-weight: 700; color: var(--vert);
  margin: 0 0 .5em; line-height: 1.15; text-wrap: balance;
}
h2{ font-size: clamp(1.875rem, 1.25rem + 2vw, 2.75rem); line-height: 1.12; letter-spacing: -.005em; max-width: 22ch; }
h3{ font-size: 1.25rem; line-height: 1.25; }
h4{ font-size: 1.125rem; line-height: 1.3; }
p{ margin: 0 0 1em; text-wrap: pretty; }
::placeholder{ color: var(--mousse); opacity: 1; }

.wrap{ max-width: 1200px; margin: 0 auto; padding-inline: var(--gut); }
.section{ padding-block: var(--section); }
.section-sauge{ background: var(--sauge); }
.section-dark{ background: var(--ardoise); color: var(--chaux); }
.section-dark :is(h2, h3, h4){ color: var(--chaux); }
.section-dark .section-lead{ color: rgb(240 241 234 / .78); }

/* Section head: title left, lead right, bottom-aligned */
.section-head{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(32px, 5vw, 80px); align-items: end;
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.section-head h2, .section-lead{ margin: 0; }
.section-lead{ color: var(--mousse); font-size: 1.125rem; line-height: 1.55; max-width: 56ch; }
.section-head--sub{ margin-top: clamp(56px, 7vw, 96px); }
.h2-sub{ font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
@media (max-width: 760px){ .section-head{ grid-template-columns: 1fr; row-gap: 12px; } }

.skip-link{
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--vert); color: var(--chaux); padding: 12px 18px;
  border-radius: var(--r-ctrl); font-weight: 600;
}
.skip-link:focus{ top: 12px; }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- buttons & links ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 24px;
  border: 1.5px solid transparent; border-radius: var(--r-ctrl);
  font: 600 1rem/1.2 var(--sans); letter-spacing: 0; text-align: center;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary{ background: var(--vert); color: var(--chaux); }
.btn-primary:hover{ background: var(--vert-fonce); }
.btn-ligne{ background: transparent; border-color: var(--vert); color: var(--vert); min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.btn-ligne:hover{ background: var(--vert); color: var(--chaux); }
:is(.section-dark, .section-cta) .btn-primary{ background: var(--laiton); color: var(--ardoise); }
:is(.section-dark, .section-cta) .btn-primary:hover{ background: var(--chaux); }
.section-dark .btn-ligne{ border-color: var(--laiton); color: var(--laiton); }
.section-dark .btn-ligne:hover{ background: var(--laiton); color: var(--ardoise); }
.btn-block{ width: 100%; }

:focus-visible{ outline: 3px solid var(--cuivre-texte); outline-offset: 3px; }
:is(.section-dark, .section-cta, .site-footer, .topbar) :focus-visible{ outline-color: var(--laiton); }

.prose a, .note a, .tarifs-intro a{
  color: var(--vert); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--cuivre);
  text-decoration-thickness: 1.5px; text-underline-offset: .2em;
}
.note{ margin: 24px 0 0; color: var(--mousse); }
.section-dark .note{ color: rgb(240 241 234 / .78); }

/* Notched corners (pension plates, footer logo plate) */
.echancre{
  --e: 8px;
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 var(--e), #000 calc(var(--e) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--e), #000 calc(var(--e) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--e), #000 calc(var(--e) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--e), #000 calc(var(--e) + .5px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, #0000 var(--e), #000 calc(var(--e) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--e), #000 calc(var(--e) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--e), #000 calc(var(--e) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--e), #000 calc(var(--e) + .5px)) bottom right / 51% 51% no-repeat;
}

/* ---------- top bar ---------- */
.topbar{ background: var(--ardoise); color: rgb(240 241 234 / .85); font: 500 .875rem/1.4 var(--sans); }
.topbar-inner{ display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; }
.topbar-contact{ display: flex; gap: 24px; }
.topbar a{ color: var(--laiton); }
.topbar a:hover{ text-decoration: underline; }
.t-court{ display: none; }
@media (max-width: 760px){
  .topbar-phrase, .t-long{ display: none; }
  .t-court{ display: inline; }
  .topbar-contact{ width: 100%; justify-content: space-between; }
  .topbar a{ min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- header ---------- */
.site-header{ position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--filet); }
/* The blur lives on a pseudo-element: on the header itself it would become the
   containing block of the fixed mobile menu and widen the page. */
.site-header::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(240 241 234 / .94); backdrop-filter: blur(8px);
}
.header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding-block: 10px; }
.logo{ display: flex; align-items: center; gap: 14px; color: var(--vert); transition: opacity .2s, visibility .2s; }
.logo-img{ display: block; height: 48px; width: auto; }
.header--logo-cache .header-inner > .logo{ opacity: 0; visibility: hidden; }
.logo-tagline{ font: 500 .8125rem/1.35 var(--sans); color: var(--mousse); max-width: 150px; }

.main-nav{ display: flex; align-items: center; gap: 20px; font: 500 .9375rem var(--sans); color: var(--ardoise); }
.main-nav a{ white-space: nowrap; }
.main-nav a:not(.btn){ position: relative; padding: 4px 0; }
.main-nav a:not(.btn)::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--cuivre); transition: right .25s ease;
}
.main-nav a:not(.btn):hover::after{ right: 0; }
.btn-nav{ min-height: 44px; padding: 10px 20px; background: var(--vert); color: var(--chaux); }
.btn-nav:hover{ background: var(--vert-fonce); }
.nav-groupe, .nav-coordonnees{ margin: 0; }

.burger{
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 0;
}
.burger span{ width: 26px; height: 2px; background: var(--vert); display: block; 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); }

@media (min-width: 1201px){
  .nav-panneau, .nav-groupe, .nav-coordonnees{ display: none; }
  .main-nav .nav-debut{ margin-left: 14px; }
}
/* Just above the burger breakpoint the full menu needs the tagline's room */
@media (min-width: 1201px) and (max-width: 1340px){ .header-inner .logo-tagline{ display: none; } }

@media (max-width: 1200px){
  .main-nav{
    position: fixed; top: 0; right: 0; height: 100vh; width: min(86vw, 360px);
    background: var(--chaux); flex-direction: column; align-items: stretch;
    padding: 88px 24px 32px; gap: 0; font: 700 1.25rem/1.2 var(--serif);
    transform: translateX(100%); z-index: 35; overflow-y: auto;
    visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s;
  }
  .main-nav.is-open{
    transform: translateX(0); visibility: visible; transition: transform .3s ease;
    box-shadow: -10px 0 40px rgb(0 0 0 / .15), 0 0 0 100vmax rgb(14 22 17 / .45);
  }
  .main-nav a:not(.btn){ display: flex; align-items: center; width: 100%; min-height: 48px; border-bottom: 1px solid var(--filet); }
  .main-nav a:not(.btn)::after{ display: none; }
  .nav-groupe{ margin: 20px 0 2px; font: 600 .875rem var(--sans); color: var(--mousse); }
  .btn-nav{ width: 100%; margin-top: 24px; min-height: 48px; font-family: var(--sans); }
  .nav-coordonnees{ margin: 20px 0 0; font: 400 .9375rem/1.7 var(--sans); color: var(--mousse); }
  .nav-coordonnees a{ color: var(--vert); font-weight: 600; }
  .burger{ display: flex; position: relative; z-index: 50; }
}
@media (max-width: 760px){ .header-inner{ min-height: 60px; } .logo-img{ height: 40px; } }
@media (max-width: 480px){ .logo-tagline{ display: none; } }

/* ---------- hero: the poster ---------- */
.hero{
  --pad: clamp(40px, 5vw, 80px);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(640px, calc(100svh - 108px), 880px);
  padding: var(--pad); color: var(--ardoise);
}
.hero-media{ position: absolute; inset: 0; z-index: -3; }
.hero-media picture{ display: contents; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* limewash veil over the oak on the left; the horses stay sharp on the right */
.hero-voile{
  position: absolute; inset: 0 auto 0 0; z-index: -2;
  width: min(100%, calc(var(--pad) + 660px + 220px));
  background: rgb(240 241 234 / .9);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 220px), #0000);
  mask-image: linear-gradient(90deg, #000 calc(100% - 220px), #0000);
}
/* copper frame with notched corners, as on the poster */
.hero-cadre{
  --r: 20px; --w: 1.5px; --c: var(--cuivre);
  position: absolute; inset: clamp(10px, 1.6vw, 24px); z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) top / calc(100% - 2 * var(--r)) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) bottom / calc(100% - 2 * var(--r)) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) left / var(--w) calc(100% - 2 * var(--r)) no-repeat,
    linear-gradient(var(--c) 0 0) right / var(--w) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(circle at 0 0, #0000 calc(var(--r) - var(--w)), var(--c) calc(var(--r) - var(--w)) var(--r), #0000 var(--r)) top left / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 100% 0, #0000 calc(var(--r) - var(--w)), var(--c) calc(var(--r) - var(--w)) var(--r), #0000 var(--r)) top right / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 0 100%, #0000 calc(var(--r) - var(--w)), var(--c) calc(var(--r) - var(--w)) var(--r), #0000 var(--r)) bottom left / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 100% 100%, #0000 calc(var(--r) - var(--w)), var(--c) calc(var(--r) - var(--w)) var(--r), #0000 var(--r)) bottom right / var(--r) var(--r) no-repeat;
}
.hero-content{ width: min(100%, 660px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-marque{ display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.hero-logo img{ width: clamp(112px, 9vw, 140px); height: auto; }
.rameau{ width: clamp(56px, 6vw, 96px); height: auto; color: var(--vert); transform: rotate(-14deg); flex: none; }
.rameau--gauche{ transform: scaleX(-1) rotate(-14deg); }
.hero h1{ margin: 0; font: inherit; color: inherit; max-width: none; }
.hero-bande{
  display: block; font: 700 clamp(1.75rem, .6rem + 2.6vw, 3rem)/1.55 var(--serif);
  letter-spacing: .02em; text-transform: uppercase; color: var(--chaux); text-wrap: balance;
}
/* one brush stroke per line */
.hero-bande .ligne{
  padding: .06em .5em .1em;
  background: var(--pinceau) left center / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fer{ display: block; width: 160px; height: 24px; margin: 14px auto 10px; color: var(--cuivre); }
.hero-lieu{ display: block; font: italic 500 clamp(1.125rem, 1rem + .45vw, 1.375rem)/1.35 var(--serif); color: var(--vert); }
.hero-sub{ margin: 14px 0 0; max-width: 34rem; font: 500 1.0625rem/1.55 var(--sans); }
.hero-panneaux{ margin: 26px 0 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panneau{
  position: relative; isolation: isolate; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 18px 24px; color: var(--chaux); text-align: center;
}
.panneau::before{
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vert);
  -webkit-mask: var(--pinceau-panneau) center / 100% 100% no-repeat;
  mask: var(--pinceau-panneau) center / 100% 100% no-repeat;
  transition: background-color .2s;
}
.panneau:hover::before{ background: var(--ardoise); }
.panneau-ico{
  width: 44px; height: 44px; padding: 10px; flex: none;
  border: 1.5px solid var(--laiton); border-radius: 50%; color: var(--laiton);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.panneau-titre{ font: 700 1.125rem/1.2 var(--serif); }
.panneau-info{ font: 500 .9375rem/1.35 var(--sans); color: var(--laiton); }
.hero-aussi{ margin: 16px 0 0; font-size: .9375rem; }
.hero-aussi a{ color: var(--vert); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cuivre); text-underline-offset: .2em; }
/* double ring, visible on the veil as on the photo */
.hero :focus-visible{ outline: 3px solid var(--ardoise); outline-offset: 2px; box-shadow: 0 0 0 6px var(--chaux); }

@media (min-width: 760px) and (max-width: 1099px){
  .hero{ justify-items: center; }
  .hero-voile{
    width: 100%;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 60%, #0000);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 60%, #0000);
  }
}
/* mobile: the whole photo on top, the poster on limewash below */
@media (max-width: 759.98px){
  .hero{ display: block; min-height: 0; padding: 0 0 32px; background: var(--chaux); }
  .hero-media{ position: relative; inset: auto; z-index: auto; aspect-ratio: 3 / 2; overflow: hidden; }
  .hero-media::after{ content: ""; position: absolute; inset: auto 0 0; height: 56px; background: linear-gradient(#0000, var(--chaux)); }
  .hero-voile{ display: none; }
  .hero-cadre{ inset: 10px; --r: 12px; z-index: 1; }
  .hero-content{ position: relative; width: auto; margin-top: -24px; padding: 0 26px; }
  .hero-marque{ gap: 12px; }
  .hero-bande br{ display: none; }
  .hero-panneaux{ grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .panneau{
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px;
    align-items: center; text-align: left; min-height: 76px; padding: 14px 24px;
  }
  .panneau-ico{ grid-row: 1 / 3; }
  .hero-sub{ order: 1; margin-top: 20px; }
  .hero-aussi{ order: 2; }
}

/* ---------- event banner (until 28/09/2026) ---------- */
.event-banner{ background: var(--vert); }
.event-banner img{ display: block; width: 100%; height: auto; }

/* ---------- Le Haras ---------- */
.haras{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "photos texte" "fiche texte";
  gap: 40px clamp(40px, 5vw, 80px); align-items: start;
}
.haras-photos{ grid-area: photos; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: end; }
.haras-photos img{ width: 100%; height: auto; }
.haras-texte{ grid-area: texte; }
.haras-texte p{ max-width: 62ch; }
.haras-fiche{ grid-area: fiche; }
.engagements{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-top: 28px; }
.engagements li{ padding-top: 12px; border-top: 2px solid var(--cuivre); font: 700 1.0625rem/1.35 var(--serif); color: var(--ardoise); }
.fiche{ margin: 0; border-block: 2px solid var(--vert); }
.fiche div{ display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.fiche div + div{ border-top: 1px solid var(--filet); }
.fiche dt{ flex: 1; display: flex; align-items: baseline; gap: 12px; }
.fiche dt::after{ content: ""; flex: 1; border-bottom: 2px dotted rgb(23 35 28 / .3); transform: translateY(-.25em); }
.fiche dd{ margin: 0; font: 700 1.25rem/1.2 var(--serif); color: var(--vert); font-variant-numeric: lining-nums tabular-nums; }
.fiche dd a{ font: 600 1rem var(--sans); text-decoration: underline; text-decoration-color: var(--cuivre); text-underline-offset: .2em; }
@media (max-width: 900px){ .haras{ grid-template-columns: 1fr; grid-template-areas: "photos" "texte" "fiche"; } }
@media (max-width: 480px){ .engagements{ grid-template-columns: 1fr; } }

/* ---------- Pensions ---------- */
.pensions{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 2px solid var(--vert); }
.pension{
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; align-items: start;
  padding: 28px clamp(16px, 2.4vw, 32px) 32px;
}
.pension + .pension{ border-left: 1px solid rgb(23 35 28 / .18); }
.plaque{
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: 0;
  padding: .55em 1.4em; font: 700 .9375rem/1.25 var(--serif);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise);
  background: var(--laiton); outline: 1px solid rgb(23 35 28 / .35); outline-offset: -5px;
}
.pension-desc{ margin: 0; }
.pension-liste li{ position: relative; padding-left: 18px; font-size: .9375rem; color: var(--mousse); }
.pension-liste li + li{ margin-top: 6px; }
.pension-liste li::before{ content: ""; position: absolute; left: 0; top: .75em; width: 9px; height: 1.5px; background: var(--cuivre); }
.pension-prix{ align-self: end; margin: 0; font: 700 2.25rem/1 var(--serif); color: var(--vert); font-variant-numeric: lining-nums tabular-nums; }
.pension-prix small{ font: 500 .9375rem var(--sans); color: var(--mousse); }
.pension .btn{ width: 100%; }
.pension-surmesure{
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) auto auto;
  gap: 12px 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid rgb(23 35 28 / .18);
}
.pension-surmesure h3{ margin: 0; }
.pension-surmesure p{ margin: 0; }
.pension-prix--devis{ font-size: 1.375rem; white-space: nowrap; }
.pension-liste--ligne{ display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; }
.pension-liste--ligne li + li{ margin-top: 0; }
@media (max-width: 860px){
  .pensions{ grid-template-columns: 1fr; }
  .pension{ grid-row: auto; grid-template-rows: none; padding-inline: 0; }
  .pension + .pension{ border-left: 0; border-top: 1px solid rgb(23 35 28 / .18); }
  .pension-surmesure{ grid-template-columns: 1fr; }
  .pension-surmesure .btn{ justify-self: start; }
}

/* ---------- Installations ---------- */
.installations{
  display: grid; grid-template-columns: 3fr 2fr;
  grid-template-areas: "ecuries carriere" "ecuries manege";
  gap: 28px 32px; align-items: start;
}
.inst{ margin: 0; }
.inst--ecuries{ grid-area: ecuries; }
.inst--carriere{ grid-area: carriere; }
.inst--manege{ grid-area: manege; }
.inst picture{ display: block; }
.inst img{ width: 100%; height: auto; }
.inst--carriere img, .inst--manege img{ aspect-ratio: 16 / 9; object-fit: cover; }
.inst figcaption{ padding-top: 12px; }
.inst h3{ margin: 0 0 4px; }
.inst p{ margin: 0; font-size: .9375rem; color: var(--mousse); }
@media (max-width: 860px){
  .installations{ grid-template-columns: 1fr; grid-template-areas: "ecuries" "carriere" "manege"; }
  .inst img{ aspect-ratio: 3 / 2; object-fit: cover; }
}

/* ---------- Price lines (location, courses, cards, rides) ---------- */
.tarifs{ margin: 0; padding: 0; border-block: 2px solid var(--vert); }
.tarif{
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "nom prix action" "detail note action";
  column-gap: 24px; row-gap: 2px; align-items: baseline; padding: 16px 0;
}
.tarif + .tarif{ border-top: 1px solid var(--filet); }
.tarif-nom{ grid-area: nom; display: flex; align-items: baseline; gap: 12px; font: 700 1.1875rem/1.3 var(--serif); color: var(--ardoise); }
.tarif-nom::after{ content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted rgb(23 35 28 / .3); transform: translateY(-.25em); }
.tarif-prix{ grid-area: prix; margin: 0; text-align: right; white-space: nowrap; font: 700 1.3125rem/1.2 var(--serif); color: var(--vert); font-variant-numeric: lining-nums tabular-nums; }
.tarif-prix small{ font: 500 .9375rem var(--sans); color: var(--mousse); }
.tarif-detail{ grid-area: detail; margin: 0; font-size: .9375rem; color: var(--mousse); }
.tarif-note{ grid-area: note; margin: 0; text-align: right; font-size: .875rem; color: var(--mousse); }
.tarif .btn{ grid-area: action; align-self: center; }
.tarifs-intro{ margin: -4px 0 16px; color: var(--mousse); }
.tarifs--location{ max-width: 820px; }
@media (max-width: 600px){
  .tarif{ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom nom" "detail detail" "prix action" "note action"; row-gap: 6px; }
  .tarif-nom::after{ display: none; }
  .tarif-prix, .tarif-note{ text-align: left; }
}
.section-dark .tarifs{ border-color: var(--laiton); }
.section-dark .tarif + .tarif{ border-color: var(--filet-clair); }
.section-dark .tarif-nom{ color: var(--chaux); }
.section-dark .tarif-nom::after{ border-color: rgb(240 241 234 / .3); }
.section-dark .tarif-prix{ color: var(--laiton); }
.section-dark :is(.tarif-prix small, .tarif-detail, .tarif-note, .tarifs-intro){ color: rgb(240 241 234 / .78); }

/* ---------- Gallery carousel ---------- */
.carousel:focus-visible{ outline: 3px solid var(--laiton); outline-offset: 6px; }
.carousel-viewport{
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ardoise-2); cursor: grab; touch-action: pan-y;
}
.carousel-viewport.is-dragging{ cursor: grabbing; }
.carousel-track{ display: flex; height: 100%; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.carousel-track.no-transition{ transition: none; }
.carousel-slide{ position: relative; flex: 0 0 100%; height: 100%; }
.carousel-slide picture{ display: contents; }
.carousel-slide img, .carousel-slide video{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.carousel-badge{
  position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: var(--r-ctrl);
  background: rgb(23 35 28 / .8); color: var(--laiton); font: 600 .875rem var(--sans); pointer-events: none;
}
.carousel-pause{
  position: absolute; top: 12px; right: 12px; z-index: 5; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-ctrl); border: 1px solid rgb(240 241 234 / .4); background: rgb(23 35 28 / .8);
  color: var(--chaux); font: 600 .875rem var(--sans); cursor: pointer;
}
.carousel-pause:hover{ background: var(--laiton); border-color: var(--laiton); color: var(--ardoise); }
.carousel-pause[hidden]{ display: none; }
.carousel-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctrl); background: rgb(23 35 28 / .72); border: 1px solid rgb(240 241 234 / .35);
  font-size: 0; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.carousel-arrow::before{
  content: ""; width: 11px; height: 11px; border: solid var(--chaux); border-width: 0 0 2px 2px;
  transform: translateX(2px) rotate(45deg);
}
.carousel-next::before{ transform: translateX(-2px) rotate(-135deg); }
.carousel-arrow:hover{ background: var(--laiton); border-color: var(--laiton); }
.carousel-arrow:hover::before{ border-color: var(--ardoise); }
.carousel-prev{ left: 16px; }
.carousel-next{ right: 16px; }
.carousel-caption-bar{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  min-height: 3.4em; padding: 14px 0 0; color: var(--chaux);
}
.carousel-caption{ font: italic 500 1.0625rem/1.4 var(--serif); }
.carousel-counter{ font: 600 .9375rem var(--sans); color: var(--laiton); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carousel-dots{ display: flex; gap: 4px; max-width: 560px; margin: 4px auto 0; }
.dot{ flex: 1; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.dot::before{ content: ""; width: 100%; height: 3px; background: rgb(240 241 234 / .4); transition: background-color .25s; }
.dot:hover::before{ background: rgb(240 241 234 / .7); }
.dot.is-active::before{ background: var(--laiton); }
@media (max-width: 640px){
  .carousel-viewport{ aspect-ratio: 4 / 3; }
  .carousel-arrow{ width: 44px; height: 44px; }
  .carousel-prev{ left: 10px; }
  .carousel-next{ right: 10px; }
  .carousel-caption-bar{ flex-direction: column; gap: 4px; }
}

/* ---------- La vie au Haras ---------- */
.masonry{ column-count: 3; column-gap: 24px; }
.masonry-item{ display: block; break-inside: avoid; margin-bottom: 28px; cursor: zoom-in; }
.masonry-item picture{ display: block; overflow: hidden; }
.masonry-item img{ width: 100%; transition: transform .4s ease; }
.masonry-item:hover img{ transform: scale(1.03); }
.masonry-item::after{ content: attr(data-caption); display: block; padding: 8px 0 0; color: var(--mousse); font: italic 500 .9375rem/1.4 var(--serif); }
.masonry-item:focus-visible{ outline: 3px solid var(--cuivre-texte); outline-offset: 4px; }
@media (max-width: 760px){ .masonry{ column-count: 2; column-gap: 12px; } }

/* ---------- Courses: « Quel groupe ? » ---------- */
.cours-question{ margin: clamp(48px, 6vw, 80px) 0 16px; font-size: 1.5rem; line-height: 1.2; }
.section-dark .cours-question{ color: var(--laiton); }
.reprises{
  --cols: 48px minmax(0, 1.3fr) minmax(0, .8fr) 160px minmax(0, 1fr) 7.5rem;
  border-block: 2px solid var(--laiton);
}
.reprises-entete{
  display: grid; grid-template-columns: var(--cols); column-gap: 20px; padding: 12px;
  font: 600 .875rem var(--sans); color: var(--laiton);
}
.regle{ display: flex; justify-content: space-between; }
.reprises-groupe{ margin: 20px 12px 4px; font: 700 1.125rem var(--serif); }
.section-dark .reprises-groupe{ color: var(--laiton); }
.course-card{
  display: grid; grid-template-columns: var(--cols);
  grid-template-areas: "ico nom public jauge creneaux cta" "ico desc public jauge creneaux cta";
  column-gap: 20px; row-gap: 2px; align-items: center; width: 100%;
  padding: 18px 12px; margin: 0; text-align: left; font: inherit; color: var(--chaux);
  background: none; border: 0; border-top: 1px solid var(--filet-clair); border-radius: 0;
  cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
.course-card:hover, .course-card:focus-visible{ background: rgb(240 241 234 / .05); box-shadow: inset 3px 0 0 var(--laiton); }
.course-card:focus-visible{ outline: 3px solid var(--laiton); outline-offset: -3px; }
.course-icon{
  grid-area: ico; font-size: 1.5rem; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.course-title{ grid-area: nom; font: 700 1.375rem/1.15 var(--serif); color: var(--chaux); }
.course-desc{ grid-area: desc; font-size: .9375rem; color: rgb(240 241 234 / .78); }
.course-level{ grid-area: public; display: block; font: 600 .9375rem/1.35 var(--sans); color: var(--laiton); }
.jauge{
  grid-area: jauge; --seg: 20px; position: relative; display: block;
  width: calc(8 * var(--seg) - 3px); height: 8px;
  background: repeating-linear-gradient(90deg, rgb(240 241 234 / .3) 0 calc(var(--seg) - 3px), #0000 0 var(--seg));
}
.jauge::before{
  content: ""; position: absolute; inset-block: 0;
  left: calc(var(--de) * var(--seg)); width: calc((var(--a) - var(--de) + 1) * var(--seg) - 3px);
  background: repeating-linear-gradient(90deg, var(--laiton) 0 calc(var(--seg) - 3px), #0000 0 var(--seg));
}
.course-slots{ grid-area: creneaux; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.slot{ display: grid; grid-template-columns: 5.5rem auto; }
.course-cta{
  grid-area: cta; font: 600 .875rem/1.3 var(--sans); color: var(--laiton);
  text-decoration: underline; text-underline-offset: .2em;
}
@media (max-width: 1023.98px){
  .reprises-entete{ display: none; }
  .course-card{
    grid-template-columns: 40px auto minmax(0, 1fr);
    grid-template-areas: "ico nom nom" ". public jauge" ". desc desc" ". creneaux creneaux" ". cta cta";
    column-gap: 14px; row-gap: 6px;
  }
  .jauge{ justify-self: start; align-self: center; }
}

/* ---------- Courses: « Quand ? » weekly board ---------- */
.semaine summary{ list-style: none; margin-bottom: 20px; }
.semaine summary::-webkit-details-marker{ display: none; }
.planning{ --rang: 26px; --entete: 44px; display: grid; grid-template-columns: 3.25rem repeat(var(--jours), minmax(0, 1fr)); column-gap: 8px; }
.planning-heures{ margin: 0; padding: var(--entete) 0 0; display: grid; grid-template-rows: repeat(var(--rangs), var(--rang)); }
.planning-heures li{
  grid-row: var(--r) / span 2; transform: translateY(-.55em);
  font: 500 .875rem/1 var(--sans); color: rgb(240 241 234 / .78); font-variant-numeric: tabular-nums;
}
.planning-jour h4{
  height: var(--entete); margin: 0; display: flex; align-items: center;
  font-size: 1.0625rem; color: var(--chaux); border-bottom: 2px solid var(--laiton);
}
.planning-jour ul{
  margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--rangs), var(--rang));
  background: repeating-linear-gradient(to bottom, rgb(240 241 234 / .14) 0 1px, #0000 1px calc(2 * var(--rang)));
}
.planning-jour li{ grid-row: var(--debut) / span var(--duree); padding: 2px 0; }
.creneau{
  width: 100%; height: 100%; min-height: 44px; display: flex; flex-direction: column; justify-content: center;
  padding: 4px 10px; text-align: left; border: 0; border-left: 3px solid var(--laiton); border-radius: 0;
  background: rgb(240 241 234 / .07); color: var(--chaux); font: 600 .9375rem/1.2 var(--sans); cursor: pointer;
}
.creneau time{ font-weight: 400; font-size: .875rem; color: rgb(240 241 234 / .78); font-variant-numeric: tabular-nums; }
.creneau:hover{ background: rgb(240 241 234 / .13); }
@media (max-width: 1023.98px){
  .planning{ display: block; }
  .planning-heures{ display: none; }
  .planning-jour + .planning-jour{ margin-top: 20px; }
  .planning-jour ul{ display: block; background: none; }
  .planning-jour li{ padding: 0 0 6px; }
  .creneau{ display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; min-height: 48px; }
  .creneau time{ grid-row: 1; grid-column: 1; }
}

/* ---------- Courses: « Combien ? » ---------- */
.formules{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; margin-top: 32px; }
.formules h4{ margin-bottom: 14px; }
@media (max-width: 900px){ .formules{ grid-template-columns: 1fr; } }

/* ---------- Stages + Balades ---------- */
.bande-sauge{ background: var(--sauge); padding-block: var(--section); }
.duo{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.duo .section-head{ display: block; }
.duo .section-lead{ margin-top: 12px; }
@media (max-width: 960px){ .duo{ grid-template-columns: 1fr; } }

.matrice{ width: 100%; border-collapse: collapse; border-block: 2px solid var(--vert); }
.matrice th, .matrice td{ padding: 16px 12px 16px 0; text-align: left; vertical-align: top; border-top: 1px solid rgb(23 35 28 / .18); }
.matrice thead th{ padding-block: 12px; font: 600 .9375rem var(--sans); color: var(--mousse); }
.matrice thead td{ border-top: 0; }
.matrice tbody th{ width: 40%; font-weight: 400; }
.matrice-titre{ display: block; font: 700 1.25rem/1.2 var(--serif); color: var(--vert); }
.journee{ display: flex; gap: 3px; margin: 8px 0 6px; }
.journee span{ flex: 1; padding: 3px 6px; border: 1px solid var(--vert); font: 600 .875rem var(--sans); color: var(--vert); text-align: center; }
.journee .plein{ background: var(--vert); color: var(--chaux); }
.matrice-detail, .matrice-note{ display: block; font-size: .875rem; color: var(--mousse); }
.matrice-prix{ display: block; font: 700 1.5rem/1.1 var(--serif); color: var(--vert); font-variant-numeric: lining-nums tabular-nums; }
.matrice .btn{ margin-top: 10px; }
@media (max-width: 480px){
  .matrice tbody th{ width: 36%; }
  .matrice-prix{ font-size: 1.25rem; }
  .matrice .btn{ width: 100%; padding-inline: 8px; }
  .journee{ flex-direction: column; }
}

/* ---------- Visit call-to-action (the only green block) ---------- */
.section-cta{ background: var(--vert); color: var(--chaux); padding-block: clamp(56px, 7vw, 88px); }
.cta-inner{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: end; }
.cta-inner h2{ color: var(--chaux); margin: 0; }
.cta-inner p{ color: rgb(240 241 234 / .85); margin: 0 0 20px; }
.cta-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta-actions .cta-tel{ margin: 0; }
.cta-tel a{ display: block; font: 700 1.75rem/1.2 var(--serif); color: var(--laiton); }
@media (max-width: 760px){ .cta-inner{ grid-template-columns: 1fr; } .cta-actions .btn{ width: 100%; } }

/* ---------- Contact ---------- */
.split{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.split-text p{ max-width: 62ch; }
@media (max-width: 980px){ .split{ grid-template-columns: 1fr; } }
.coordonnees{ margin: 24px 0 28px; border-block: 2px solid var(--vert); }
.coordonnees div{ display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; }
.coordonnees div + div{ border-top: 1px solid var(--filet); }
.coordonnees dt{ font: 600 .875rem/1.6 var(--sans); color: var(--mousse); }
.coordonnees dd{ margin: 0; }
.coordonnees a{ color: var(--vert); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cuivre); text-underline-offset: .2em; overflow-wrap: anywhere; }
.map-wrap{ border: 1px solid var(--filet); }
.map-wrap iframe{ display: block; width: 100%; height: 300px; border: 0; }
@media (max-width: 760px){ .coordonnees div{ grid-template-columns: 1fr; gap: 2px; } }

.contact-form{ display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 2px solid var(--vert); }
.contact-form h2{ font-size: 1.75rem; margin: 0; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
:is(.contact-form, #booking-form) label{ display: flex; flex-direction: column; gap: 6px; font: 600 .9375rem var(--sans); color: var(--ardoise); }
#booking-form label[hidden]{ display: none; }
:is(.contact-form, #booking-form) :is(input, select, textarea){
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 1rem var(--sans); color: var(--ardoise); background: var(--chaux-clair);
  border: 1px solid var(--trait); border-radius: var(--r-ctrl); resize: vertical;
}
:is(.contact-form, #booking-form) :is(input, select, textarea):focus{ outline: 3px solid var(--cuivre-texte); outline-offset: 1px; border-color: var(--vert); }
.honeypot{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.req{ color: var(--alerte); margin-left: 2px; }
.form-hint{ font-size: .875rem; color: var(--mousse); margin: 0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ardoise); color: rgb(240 241 234 / .85); padding-top: clamp(48px, 6vw, 72px); }
.footer-inner{
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 64px;
  padding-bottom: 40px; border-bottom: 1px solid var(--filet-clair);
}
.plaque-logo{ --e: 10px; display: inline-block; padding: 10px 18px; background: var(--chaux); outline: 1px solid var(--cuivre); outline-offset: -5px; }
.logo-footer{ flex-direction: column; align-items: flex-start; gap: 12px; }
.logo-footer .logo-img{ height: 72px; }
.logo-footer .logo-tagline{ color: rgb(240 241 234 / .7); max-width: none; }
.site-footer address{ margin-top: 16px; font-style: normal; line-height: 1.7; }
.site-footer address a{ color: var(--laiton); }
.footer-nav{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-nav div{ display: flex; flex-direction: column; }
.footer-titre{ margin: 0 0 8px; font: 600 .875rem var(--sans); color: var(--laiton); }
.footer-nav a{ min-height: 36px; display: flex; align-items: center; font: 500 .9375rem var(--sans); }
.footer-nav a:hover, .footer-legal a:hover{ color: var(--laiton); }
.footer-bottom{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 18px; font-size: .875rem; color: rgb(240 241 234 / .65);
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 760px){
  .footer-inner, .footer-nav{ grid-template-columns: 1fr; }
  .footer-nav a, .footer-legal a{ min-height: 44px; }
}

/* ---------- Dialogs ---------- */
.course-modal{
  position: fixed; inset: 0; z-index: 100; background: rgb(14 22 17 / .78);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.course-modal[hidden]{ display: none; }
.course-modal-panel{
  position: relative; width: 100%; max-width: 520px; padding: 40px 32px 28px; text-align: center;
  background: var(--chaux-clair); border-radius: var(--r-modal); box-shadow: var(--ombre-modal);
}
.lightbox-close{
  position: absolute; top: 10px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--mousse); font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover{ color: var(--vert); }
.course-modal-icon{ display: block; font-size: 2.25rem; margin-bottom: 8px; }
.course-modal-panel h3{ font-size: 1.75rem; margin-bottom: 8px; }
.course-modal-panel .course-level{ display: block; margin-bottom: 20px; font: 600 1rem var(--sans); color: var(--cuivre-texte); }
.schedule-table{ width: 100%; border-collapse: collapse; margin-bottom: 18px; text-align: left; border-top: 2px solid var(--vert); }
.schedule-table th{ padding: 8px 10px; font: 600 .875rem var(--sans); color: var(--mousse); border-bottom: 1px solid var(--filet); }
.schedule-table td{ padding: 10px; border-bottom: 1px solid var(--filet); font-variant-numeric: tabular-nums; }
.schedule-table tr.is-choisi td{ background: var(--sauge); font-weight: 600; }
#course-modal-reserve{ margin: 4px 0 16px; }
.course-modal-note{ font-size: .875rem; color: var(--mousse); margin: 0; }

.booking-panel{ max-width: 560px; text-align: left; max-height: 88vh; overflow-y: auto; }
.modal-label{ text-align: center; margin: 0 0 4px; font: 600 .9375rem var(--sans); color: var(--mousse); }
.booking-panel h3{ text-align: center; margin-bottom: 6px; }
.booking-offer-detail{ text-align: center; color: var(--mousse); font-size: .9375rem; margin-bottom: 20px; }
.booking-panel .form-hint{ text-align: center; margin: -8px 0 18px; }
#booking-form{ display: flex; flex-direction: column; gap: 14px; }
#booking-form .form-row{ gap: 14px; }
.booking-note{ font-size: .875rem; color: var(--mousse); text-align: center; margin: 4px 0 0; }

.success-panel{ max-width: 460px; padding: 48px 40px 40px; }
.success-icon{
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--vert); color: var(--chaux); font-size: 2rem; font-weight: 700;
}
.success-panel h3{ font-size: 1.6rem; margin-bottom: 14px; }
.success-panel p{ color: var(--mousse); margin-bottom: 26px; }
.success-panel .btn{ min-width: 160px; }

.photo-lightbox{
  position: fixed; inset: 0; z-index: 100; background: rgb(14 22 17 / .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px;
}
.photo-lightbox[hidden]{ display: none; }
.photo-lightbox img{ max-width: min(90vw, 1000px); max-height: 78vh; width: auto; }
.photo-lightbox p{ margin: 0; color: var(--chaux); text-align: center; font: italic 500 1.0625rem/1.4 var(--serif); }
.photo-lightbox .lightbox-close{ color: var(--chaux); }
.photo-lightbox .lightbox-close:hover{ color: var(--laiton); }

.cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90; max-width: 640px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 24px;
  background: var(--ardoise); color: var(--chaux); border-radius: var(--r-ctrl); box-shadow: var(--ombre-modal);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner p{ margin: 0; flex: 1 1 260px; font-size: .875rem; color: rgb(240 241 234 / .85); }
.cookie-banner a{ color: var(--laiton); font-weight: 600; }
.cookie-actions{ display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .btn{ min-height: 44px; padding: 10px 18px; font-size: .875rem; }
.btn-ghost-dark{ background: transparent; border-color: rgb(240 241 234 / .35); color: var(--chaux); }
.btn-ghost-dark:hover{ background: rgb(240 241 234 / .1); }

@media (max-width: 760px){ .form-row{ grid-template-columns: 1fr; } }

/* ---------- Motion: one gesture, in the poster ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-bande .ligne{ animation: peindre .6s cubic-bezier(.3, .7, .2, 1) .1s both; }
  .panneau::before{ animation: peindre-panneau .55s cubic-bezier(.3, .7, .2, 1) both; }
  .hero-panneaux li:nth-child(1) .panneau::before{ animation-delay: .35s; }
  .hero-panneaux li:nth-child(2) .panneau::before{ animation-delay: .43s; }
  .hero-panneaux li:nth-child(3) .panneau::before{ animation-delay: .51s; }
}
@keyframes peindre{ from{ background-size: 0% 100%; } }
@keyframes peindre-panneau{ from{ clip-path: inset(0 100% 0 0); } }

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