:root {
  /* Palette « vert anglais » : on casse la saturation du vert (39 -> 27 %) et
     de l'or (47 -> 39 %) sans assombrir — ce vert est meme un point plus clair
     que l'ancien. C'est la rupture de saturation qui porte le haut de gamme. */
  --green: #1c3128;
  --green-deep: #101e18;
  --cream: #f3eee4;
  --gold: #b8975c;
  --gold-deep: #7f6537;
  --ink: #132019;
  --paper: #fbf8f2;
  --muted: #5c675f;
  --line: #e2d9c8;
  --font-sans: "Figtree", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  /* Spectral porte tous les nombres : Cormorant y est trop fine. */
  --font-figures: "Spectral", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: clamp(3.8rem, 1.2rem + 7vw, 6.4rem);
  --title: clamp(2.15rem, 1.15rem + 2.8vw, 3.65rem);
}

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

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 500; }
p { text-wrap: pretty; margin: 0; }
em { font-style: italic; font-weight: 400; }

.font-display,
.hero h1,
.inner-hero h1,
.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* Tout ce qui est chiffre : Spectral, chasse fixe. */
.weather-temp,
.contact-grid .phone {
  font-family: var(--font-figures);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Symbole meteo, reglage de base. Il doit rester AVANT les regles qui le
   specialisent : a specificite egale, c'est l'ordre du fichier qui tranche,
   et une base placee apres ecrasait silencieusement les tailles voulues. */
.wx-icon {
  height: 1rem;
  width: auto;
  color: var(--gold);
  margin: 0;
  display: block;
  flex: none;
}

.wrap {
  width: min(80rem, calc(100% - 2rem));
  margin-inline: auto;
}

.kicker {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold-deep);
}
.kicker-gold { color: var(--gold); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 150ms var(--ease);
}
.btn:active { transform: scale(0.96); }
.btn-cream { background: var(--cream); color: var(--green); }
.btn-cream:hover { background: var(--paper); }


.btn-green { background: var(--green); color: var(--cream); }
.btn-green:hover { background: var(--green-deep); }


.btn-outline-green { border: 1px solid var(--green); color: var(--green); }
.btn-outline-green:hover { background: var(--green); color: var(--cream); }
.btn-ghost {
  height: auto;
  padding: 0;
  letter-spacing: 0;
  color: var(--cream);
  text-underline-offset: 4px;
}
.btn-ghost:hover { text-decoration: underline; }


.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--cream);
  /* Retour rapide, depart lent : l'en-tete repond au doigt et s'absente sans bruit. */
  transition:
    background-color 300ms var(--ease),
    transform 260ms var(--ease),
    opacity 200ms var(--ease),
    visibility 0s;
}

/* Aplat plein : pas de flou, pas de transparence. */
.site-header.is-solid,
.site-header[data-header="solid"] { background: var(--green); }

/* Effacement : pas de claquement vers le haut. Une derive de 14 px et une
   fondue longue — l'en-tete s'absente, il ne fuit pas. */
.site-header.est-escamote {
  transform: translateY(-14px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    background-color 300ms var(--ease),
    transform 620ms cubic-bezier(0.33, 0, 0.12, 1),
    opacity 520ms cubic-bezier(0.33, 0, 0.12, 1),
    visibility 0s 620ms;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.est-escamote { transition: none; }
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.25rem;
  width: min(80rem, calc(100% - 2rem));
  margin-inline: auto;
}
.header-bar.has-line { border-bottom: 1px solid color-mix(in oklab, var(--gold) 25%, transparent); }
/* Logo officiel : rapport 3,77 au lieu de 1,62. On le contient sur petit ecran,
   sans quoi il pousse le bouton de menu hors du bandeau. */
.logo img { height: 2.35rem; width: auto; max-width: min(58vw, 14rem); object-fit: contain; }
.nav-desk {
  display: none;
  align-items: center;
  gap: 2.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.nav-desk a { color: color-mix(in oklab, var(--cream) 75%, transparent); padding: 0.5rem 0; position: relative; }
.nav-desk a:hover { color: var(--gold); }
.nav-desk a.is-current { color: var(--cream); }
.nav-desk a.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
}
.header-cta {
  display: none;
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.site-header[data-header="transparent"] .header-cta {
  border: 1px solid color-mix(in oklab, var(--cream) 80%, transparent);
  color: var(--cream);
}
.site-header[data-header="transparent"] .header-cta:hover {
  background: var(--cream);
  color: var(--green);
}
.site-header[data-header="solid"] .header-cta,
.site-header.is-solid .header-cta {
  background: var(--cream);
  color: var(--green);
}
.menu-toggle {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-mobile {
  background: var(--green);
  border-top: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
  padding: 1.25rem 1rem;
}
.nav-mobile a {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--cream);
}
.nav-mobile .btn { width: 100%; margin-top: 0.75rem; }

/* Colonne : le bloc de texte occupe l'espace libre, la bande se pose dessous.
   Elle n'est plus en position absolue, donc plus aucun degagement a regler
   a la main — c'est ce reglage qui recouvrait le texte de 44 px sur mobile. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--cream);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--green-deep) 90%, transparent), color-mix(in oklab, var(--green-deep) 25%, transparent) 45%, color-mix(in oklab, var(--green-deep) 40%, transparent));
}
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
  flex: 1 1 auto;
  width: min(80rem, calc(100% - 2rem));
  margin-inline: auto;
  padding: 7rem 0 2.5rem;
}
.hero h1 {
  margin-top: 1rem;
  font-size: var(--display);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero-lead {
  margin-top: 1.25rem;
  max-width: 28rem;
  color: color-mix(in oklab, var(--cream) 85%, transparent);
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
/* Voile allege, lateral. Le bloc de texte est cale sur le tiers gauche de la
   photo, mesure 25 % plus sombre que le centre : un degrade de cote suffit a
   le porter, et la photo redevient une photo. A revoir si l'image change. */
.hero-overlay-b {
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--green-deep) 78%, transparent) 0%,
      color-mix(in oklab, var(--green-deep) 46%, transparent) 46%,
      color-mix(in oklab, var(--green-deep) 14%, transparent) 78%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--green-deep) 34%, transparent) 0%,
      color-mix(in oklab, var(--green-deep) 10%, transparent) 40%,
      color-mix(in oklab, var(--green-deep) 60%, transparent) 100%);
}

/* Bloc cale a gauche. Le bas degage la bande de chiffres, qui est en
   position absolue au pied du hero. */
/* Sur mobile le bloc se pose en bas, au contact de la bande de chiffres ;
   il se recentre des qu'il y a de la hauteur. */
.hero-gauche {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  gap: 0;
  padding-top: 6.25rem;
  padding-bottom: 2rem;
}
.hero-gauche h1 { max-width: 13ch; }
.hero-gauche .hero-lead { max-width: 30rem; }
.hero-filet {
  width: 3.2rem;
  height: 1px;
  margin: 1.5rem 0 0;
  border: 0;
  background: var(--gold);
}

/* Sur mobile le lien passe sous le bouton, aligne a gauche sur lui ;
   des 640 px il se pose a sa droite. */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.75rem;
}
/* Plus de boite : une bande pleine largeur, tenue par un filet or.
   Deux colonnes sous 640 px, quatre au-dela. */
.hero-bande {
  position: relative;
  z-index: 2;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid color-mix(in oklab, var(--gold) 24%, transparent);
}
.hero-bande > div { padding: 0.7rem 0.6rem; text-align: center; }
.hero-bande > div:nth-child(2n) { border-left: 1px solid color-mix(in oklab, var(--cream) 12%, transparent); }
.hero-bande > div:nth-child(n+3) { border-top: 1px solid color-mix(in oklab, var(--cream) 12%, transparent); }
.hero-bande dt {
  font-family: var(--font-figures);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hero-bande dd {
  margin: 0.2rem 0 0;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 58%, transparent);
}

/* Bouton unique : rectangle, aplat or, petites capitales espacees. */
.btn-hero {
  height: auto;
  padding: 0.95rem 2rem;
  border-radius: 0;
  background: var(--gold);
  color: var(--green-deep);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.btn-hero:hover { background: color-mix(in oklab, var(--gold) 88%, white); }













/* Panneau meteo. Angles droits, filets d'or, chiffres en Spectral :
   meme vocabulaire que le hero, pas celui d'une application. */
.weather {
  border: 1px solid color-mix(in oklab, var(--gold) 22%, transparent);
  /* Meme vert que le bandeau : le panneau appartient au meme plan. */
  background: var(--green);
  color: var(--cream);
}
/* Une seule colonne, du telephone au grand ecran : le moment en haut,
   les trois jours dessous, separes par un filet d'or. */
.weather-corps {
  display: grid;
  grid-template-columns: 1fr;
}
.weather-moment { padding: 1.9rem 1.8rem; }
.weather-jours {
  padding: 1.7rem 0 0.9rem;
  border-top: 1px solid color-mix(in oklab, var(--gold) 16%, transparent);
}
.weather-jours .kicker { padding: 0 1.6rem; }
.weather-sub {
  margin-top: 0.45rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 50%, transparent);
}
.weather-releve {
  margin-top: 1.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.weather-maintenant {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.weather-detail { text-align: right; }
/* Le nuage n'occupe que 49 % de son viewBox : a cadre egal il parait deux
   fois plus petit qu'un soleil. On agrandit le cadre et on rattrape le vide
   par des marges negatives, pour que la ligne ne gonfle pas. */
.weather-maintenant-icone { height: 2.6rem; width: auto; margin: 0; flex: none; display: block; }
.weather-temp {
  font-family: var(--font-figures);
  font-weight: 500;
  font-size: 4.2rem;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.weather-ciel {
  margin-top: 0;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 62%, transparent);
}
.weather-vent-ligne {
  margin-top: 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 45%, transparent);
}



/* Un jour par ligne : nom, symbole, temperatures, vent. Quatre colonnes
   verticales qui s'alignent d'une ligne a l'autre. */
.weather-lignes { margin-top: 0.4rem; }
.weather-ligne {
  display: grid;
  grid-template-columns: 3rem 2.3rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.6rem;
}
.weather-ligne + .weather-ligne {
  border-top: 1px solid color-mix(in oklab, var(--cream) 9%, transparent);
}
.weather-jour {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 62%, transparent);
}
.weather-ligne-icone { height: 1.1rem; width: auto; margin: 0; flex: none; display: block; }
.weather-deg {
  font-family: var(--font-figures);
  font-weight: 500;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.weather-deg small { font-size: 0.8em; color: color-mix(in oklab, var(--cream) 48%, transparent); }
.weather-kmh {
  text-align: right;
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 45%, transparent);
}
.weather-empty {
  padding: 0 1.6rem 1.6rem;
  font-size: 0.8rem;
  color: color-mix(in oklab, var(--cream) 62%, transparent);
}










.intro {
  background: var(--paper);
  padding: 6rem 0;
}
.intro-grid { display: grid; gap: 2rem; }
.intro h2 {
  margin-top: 1rem;
  font-size: var(--title);
  line-height: 1.12;
  color: var(--green);
}
.intro-quote {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--green);
}
.intro-body {
  margin-top: 2rem;
  max-width: 42rem;
  color: var(--muted);
}

.feature {
  position: relative;
}
.media-zoom { overflow: hidden; }
.media-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.feature-photo { height: 20rem; }
.feature-card {
  background: var(--cream);
  padding: 3rem 1.5rem;
}
.feature-card h2 {
  margin-top: 0.75rem;
  font-size: var(--title);
  color: var(--green);
}
.feature-card .lede { margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.feature-card .price { margin-top: 1rem; font-size: 0.875rem; color: var(--green); }
.feature-card .btn { margin-top: 2rem; }

.play-grid { display: grid; }
.play-card {
  position: relative;
  min-height: 24rem;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}
.play-card .bg {
  position: absolute;
  inset: 0;
}
.play-card .bg img { width: 100%; height: 100%; object-fit: cover; }
.play-card .veil {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--green-deep) 50%, transparent);
  transition: background-color 300ms;
}
.play-card:hover .veil { background: color-mix(in oklab, var(--green-deep) 60%, transparent); }
.play-card .content { position: relative; }
.play-card h2 { margin-top: 0.75rem; font-size: 1.875rem; }
.play-card p { margin-top: 0.75rem; max-width: 24rem; font-size: 0.875rem; color: color-mix(in oklab, var(--cream) 80%, transparent); }
.play-card .meta { margin-top: 1.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gold); }

.team {
  background: var(--paper);
  padding: 6rem 0;
}
.team-grid { display: grid; gap: 3rem; align-items: center; }
.team-photo { height: 20rem; }
.team h2 {
  margin-top: 1rem;
  font-size: var(--title);
  color: var(--green);
}
.team .body { margin-top: 1.5rem; color: var(--muted); }
.team dl {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
}
.team dt { font-size: 0.875rem; color: var(--gold-deep); }
.team dd { margin: 0.5rem 0 0; color: var(--green); }
.team .rule { border-top: 1px solid var(--line); padding-top: 1rem; }
.team .btn { margin-top: 2.5rem; }

.venir {
  background: var(--green-deep);
  color: var(--cream);
  padding: 5rem 0;
}
.venir-grid { display: grid; gap: 3rem; }
.venir h2 { margin-top: 1rem; font-size: var(--title); }
.venir .hours { margin-top: 1.25rem; font-size: 1.125rem; }
.venir .hours span { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: color-mix(in oklab, var(--cream) 60%, transparent); }
.venir h3 { margin-top: 2.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gold); }
.venir .addr { margin-top: 0.75rem; }
.venir .gps { margin-top: 0.25rem; font-size: 0.875rem; color: color-mix(in oklab, var(--cream) 55%, transparent); }
.venir .phones { margin-top: 2rem; font-size: 0.875rem; }
.venir .phones a { color: var(--gold); }
.venir .phones a:hover { text-decoration: underline; }
.venir-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.5rem; }
.map-frame {
  min-height: 20rem;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--cream) 15%, transparent);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 20rem; border: 0; }

.site-footer {
  background: var(--green);
  color: var(--cream);
  padding-bottom: 3.5rem;
}
.footer-grid {
  display: grid;
  gap: 3rem;
  padding: 4rem 0;
  width: min(80rem, calc(100% - 2rem));
  margin-inline: auto;
}
.footer-logo { height: 3.4rem; width: auto; max-width: min(80vw, 18rem); object-fit: contain; }
.footer-grid p { margin-top: 0.25rem; font-size: 0.875rem; color: color-mix(in oklab, var(--cream) 70%, transparent); }
.footer-grid .kicker { margin-bottom: 1rem; }
.footer-grid a:hover { color: var(--gold); }
.footer-bar {
  border-top: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
}
.footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  width: min(80rem, calc(100% - 2rem));
  margin-inline: auto;
  padding: 1.25rem 0;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--cream) 45%, transparent);
}
.footer-bar nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bar a:hover { color: var(--cream); }

.inner-hero {
  background: var(--green);
  color: var(--cream);
  padding: 8rem 0 4rem;
}
.inner-hero h1 {
  margin-top: 1rem;
  font-size: var(--display);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.inner-hero .lead {
  margin-top: 1.25rem;
  max-width: 42rem;
  color: color-mix(in oklab, var(--cream) 80%, transparent);
}

.page-block {
  width: min(80rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 0;
}
.full-photo { height: 20rem; width: 100%; object-fit: cover; }
.split { display: grid; gap: 3rem; align-items: center; }
.split h2 { font-size: var(--title); color: var(--green); }
.split p { margin-top: 1.25rem; color: var(--muted); }

.tarifs-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  padding: 4rem 1rem;
}
.tarifs-card { background: var(--paper); padding: 2.5rem 1.5rem; }
.tarifs-card h2 { font-size: 1.5rem; color: var(--green); }
.tarifs-card dl { margin: 2rem 0 0; }
.tarifs-card .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.tarifs-card dt { color: var(--muted); }
.tarifs-card dd {
  margin: 0;
  font-family: var(--font-figures);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}

.dates { max-width: 36rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.dates li { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }

.people { display: grid; gap: 3rem; }
.people > div { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.people h2 { font-size: 0.875rem; color: var(--gold-deep); }
.people p { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--green); }

.contact-grid { display: grid; gap: 3rem; }
.contact-grid .phone {
  font-size: 1.875rem;
  color: var(--green);
}
.contact-grid .lbl { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); }


.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 60;
  background: var(--cream);
  color: var(--green);
  padding: 0.5rem 0.75rem;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: rise 700ms var(--ease) both; }
.rise-2 { animation: rise 700ms var(--ease) 90ms both; }
.rise-3 { animation: rise 700ms var(--ease) 180ms both; }

@media (min-width: 640px) {
  .hero-gauche { justify-content: center; padding-bottom: 3rem; }
  /* Quatre colonnes : « Green-fee des » tient sur une ligne a partir d'ici. */
  .hero-bande { grid-template-columns: repeat(4, 1fr); }
  .hero-bande > div { padding: 1rem 0.75rem; }
  .hero-bande > div + div { border-left: 1px solid color-mix(in oklab, var(--cream) 12%, transparent); }
  .hero-bande > div:nth-child(n+3) { border-top: 0; }
  .hero-bande dt { font-size: 1.5rem; }
  .header-bar { height: 4.75rem; }
  .logo img { height: 2.8rem; max-width: none; }
  .header-cta { display: inline-flex; align-items: center; }
  .site-footer { padding-bottom: 0; }
  
  .feature-photo { height: 28rem; }
  .play-card { min-height: 28rem; padding: 3rem; }
  .play-card h2 { font-size: 2.25rem; }
  .team-photo { height: 28rem; }
  .full-photo { height: 28rem; }
}

@media (min-width: 768px) {
  .nav-desk { display: flex; }
  .menu-toggle { display: none; }
  
  
  
  
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .tarifs-grid { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .split { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .hero-inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 4rem;
    padding-bottom: 5rem;
  }
  .hero.hero-b .hero-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    padding-bottom: 4rem;
  }
  .hero.hero-b .hero-inner.hero-gauche {
    align-items: flex-start;
    text-align: left;
    padding-bottom: 3rem;
  }
  
  
  
  .intro { padding: 8rem 0; }
  .intro-grid {
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
  }
  .intro-quote { font-size: 1.875rem; }
  .feature-photo { height: min(100svh, 44rem); }
  .feature-card {
    position: absolute;
    right: 3rem;
    bottom: 4rem;
    max-width: 28rem;
    padding: 3.5rem 3rem;
  }
  .play-grid { grid-template-columns: 1fr 1fr; }
  .team { padding: 8rem 0; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .team dl { grid-template-columns: repeat(3, 1fr); }
  .venir { padding: 7rem 0; }
  .venir-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (hover: hover) {
  .media-zoom:hover img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .rise-2, .rise-3 { animation: none; }
  .media-zoom img, .media-zoom:hover img { transition: none; transform: none; }
  .btn:active { transform: none; }
}

/* ── Bouton meteo flottant ────────────────────────────────────────────────
   En bas a droite. Au survol le libelle se decouvre ; au clic le panneau
   complet se deplie au-dessus. */
.wx-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
@media (min-width: 640px) {
  .wx-fab { right: 1.5rem; bottom: 1.5rem; }
}

.wx-fab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--cream) 24%, transparent);
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.6);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.wx-fab-btn:hover { background: var(--green-deep); border-color: var(--gold); transform: translateY(-2px); }
.wx-fab-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wx-fab-icon { margin: 0; height: 1.05rem; width: auto; flex: none; }
.wx-fab-temp {
  font-family: var(--font-figures);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Le libelle : replie au repos, decouvert au survol et au clavier. */
.wx-fab-word {
  display: grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transition: grid-template-columns 0.28s var(--ease), opacity 0.2s var(--ease);
}
.wx-fab-word > span { overflow: hidden; white-space: nowrap; }
.wx-fab-btn:hover .wx-fab-word,
.wx-fab-btn:focus-visible .wx-fab-word,
.wx-fab-btn[aria-expanded="true"] .wx-fab-word {
  grid-template-columns: 1fr;
  opacity: 1;
}

/* Le panneau s'ancre sur la fenetre, pas sur la pastille. Une seule variable
   tient l'ecart : la marge de droite vaut exactement celle du bas. */
.wx-fab-panel {
  --wx-marge: 1rem;
  position: fixed;
  right: var(--wx-marge);
  bottom: calc(var(--wx-marge) + env(safe-area-inset-bottom));
  width: min(38rem, calc(100vw - 2 * var(--wx-marge)));
  max-height: min(78svh, 40rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 80px -24px rgba(0, 0, 0, 0.85);
  animation: wx-fab-in 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 640px) {
  .wx-fab-panel {
    --wx-marge: 1.5rem;
    bottom: var(--wx-marge);
  }
}
.wx-fab-panel[hidden] { display: none; }
.wx-fab-panel .weather { border-radius: 0; }

@keyframes wx-fab-in {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: none; }
}
/* Le contenu suit le panneau avec un leger decalage : la colonne du moment,
   puis les trois jours l'un apres l'autre. */
@keyframes wx-contenu-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.wx-fab-panel .weather-moment { animation: wx-contenu-in 460ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards; }
.wx-fab-panel .weather-jours .kicker { animation: wx-contenu-in 460ms cubic-bezier(0.22, 1, 0.36, 1) 180ms backwards; }
.wx-fab-panel .weather-ligne { animation: wx-contenu-in 460ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.wx-fab-panel .weather-ligne:nth-child(1) { animation-delay: 230ms; }
.wx-fab-panel .weather-ligne:nth-child(2) { animation-delay: 290ms; }
.wx-fab-panel .weather-ligne:nth-child(3) { animation-delay: 350ms; }

.wx-fab-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  border: 1px solid color-mix(in oklab, var(--gold) 24%, transparent);
  background: none;
  color: color-mix(in oklab, var(--cream) 62%, transparent);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wx-fab-close svg { width: 0.95rem; height: 0.95rem; }
.wx-fab-close:hover { color: var(--gold); border-color: var(--gold); }
.wx-fab-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wx-fab-panel,
  .wx-fab-panel .weather-moment,
  .wx-fab-panel .weather-jours .kicker,
  .wx-fab-panel .weather-ligne { animation: none; }
  .wx-fab-btn { transition: none; }
  .wx-fab-btn:hover { transform: none; }
  .wx-fab-word { transition: none; }
}


/* ── Relais entre la meteo du hero et le bouton flottant ────────────────── */
.wx-fab[data-suspendu="1"] .wx-fab-btn {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 420ms cubic-bezier(0.33, 0, 0.12, 1),
    transform 520ms cubic-bezier(0.33, 0, 0.12, 1),
    visibility 0s 520ms;
}
.wx-fab-btn {
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease),
    visibility 0s, background 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* Le conteneur ne doit pas intercepter les clics quand il est vide. */
.wx-fab { pointer-events: none; }
.wx-fab > * { pointer-events: auto; }


/* ── Meteo, cinquieme colonne de la bande ─────────────────────────────────
   Colonne plus large que les autres : elle porte deux informations, le ciel
   a cote de la temperature et le vent en dessous. */
.bande-meteo { position: relative; padding-right: 1.5rem; cursor: pointer; }
/* Chevron toujours visible, a droite de la colonne : c'est lui qui dit que
   la colonne s'ouvre. Il avance de 3 px au survol, sans changer de couleur. */
.bande-meteo::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1px solid color-mix(in oklab, var(--gold) 75%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--gold) 75%, transparent);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.28s var(--ease);
}
.bande-meteo dt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.bande-meteo-icone { height: 1rem; width: auto; margin: 0; flex: none; display: block; color: var(--gold); }
.bande-meteo-temp { font-variant-numeric: tabular-nums; }
.bande-meteo-ciel {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 72%, transparent);
}
.bande-meteo dd { letter-spacing: 0.16em; white-space: nowrap; }

/* Toute la colonne est cliquable, sans casser la liste de definitions. */
.bande-meteo-lien {
  position: absolute;
  inset: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.bande-meteo-lien:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
/* Pulsation lente du chevron : il part a droite, revient, puis se tait
   pendant plus de la moitie du cycle. Un rappel, pas un clignotant. */
@keyframes chevron-pulsation {
  0%, 55%, 100% { transform: translateY(-50%) translateX(0) rotate(45deg); }
  70%           { transform: translateY(-50%) translateX(4px) rotate(45deg); }
  85%           { transform: translateY(-50%) translateX(0) rotate(45deg); }
}
.bande-meteo::after { animation: chevron-pulsation 2.8s var(--ease) infinite; }
/* Au survol la pulsation s'arrete et le chevron reste avance. */
.bande-meteo:hover::after {
  animation: none;
  transform: translateY(-50%) translateX(4px) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .bande-meteo::after { animation: none; }
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sous 640 px la bande est en deux colonnes : la meteo prend la ligne entiere. */
.hero-bande .bande-meteo { grid-column: 1 / -1; border-left: 0; }

@media (min-width: 640px) {
  /* Quatre colonnes egales, plus une cinquieme elargie pour le vent. */
  .hero-bande { grid-template-columns: repeat(4, 1fr) 1.55fr; }
  .hero-bande .bande-meteo {
    grid-column: auto;
    border-left: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  }
  .bande-meteo-icone { height: 1.3rem; }
  .bande-meteo-ciel { font-size: 0.66rem; }
}

/* ── Barre d'actions mobile ───────────────────────────────────────────────
   Trois actions, trois poids differents : un aplat or pour la reservation,
   un cadre chiffre pour la meteo, une icone seule pour l'appel. Un degrade
   plutot qu'un aplat, pour que la barre ne coupe pas la page.
   Elle ne parait qu'une fois le hero entierement sorti de l'ecran. */
.barre-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom));
  /* Fond plein, pas de fondu : la barre s'assume comme un bandeau. */
  background: var(--green);
  border-top: 1px solid color-mix(in oklab, var(--gold) 26%, transparent);
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 380ms cubic-bezier(0.33, 0, 0.12, 1),
    transform 480ms cubic-bezier(0.33, 0, 0.12, 1),
    visibility 0s 480ms;
}
.barre-actions.est-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 260ms var(--ease),
    transform 300ms var(--ease),
    visibility 0s;
}

.ba-meteo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  padding: 0.6rem 0.65rem;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  background: none;
  color: var(--cream);
  cursor: pointer;
  font-family: var(--font-sans);
}
.ba-meteo b {
  font-family: var(--font-figures);
  font-weight: 500;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.ba-meteo-icone { height: 0.95rem; }
.ba-meteo:focus-visible,
.ba-appeler:focus-visible,
.ba-reserver:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ba-reserver {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--green-deep);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 0.6rem;
}
.ba-appeler {
  width: 2.7rem;
  height: 2.7rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  color: var(--gold);
}
.ba-appeler svg { width: 1.05rem; height: 1.05rem; }

@media (min-width: 640px) {
  /* Sur grand ecran l'en-tete revient des qu'on remonte : pas besoin de barre. */
  .barre-actions { display: none; }
}
@media (max-width: 639.98px) {
  /* La pastille flottante ferait doublon avec la barre. Le panneau, lui,
     reste en place : c'est la meteo de la barre qui l'ouvre. */
  .wx-fab-btn { display: none; }
  /* Le panneau se pose au-dessus de la barre. */
  .wx-fab-panel { bottom: calc(var(--wx-marge) + 3.6rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .barre-actions { transition: none; }
}

/* ── « Voir le parcours » : un lien, pas un bouton ────────────────────────
   Petites capitales et chevron — le meme chevron que la colonne meteo, pour
   ne pas apprendre deux signes differents au visiteur. En creme, pas en or :
   l'or reste la couleur de l'action principale. */
.hero-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-lien-chevron {
  height: 0.72rem;
  width: auto;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.hero-lien:hover .hero-lien-chevron { transform: translateX(3px); }
.hero-lien:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lien-chevron { transition: none; }
}