/* Domaine Passiflorart — Azimut Agency
   Mot directeur : grand air.
   Palette « Pierre et forêt » : le beige pierre et l'ivoire portent les
   surfaces, le vert sapin est réservé aux titres, aux traits et aux boutons. */

:root {
  --color-primary: #2C4034;        /* vert sapin */
  --color-primary-light: #435C4B;
  --color-accent: #C9B79C;         /* beige pierre */
  --color-accent-dark: #A8906F;
  --color-cream: #F4F0E8;          /* ivoire */
  --color-cream-dim: #E8E1D4;
  --color-text: #1C2620;           /* encre */
  --color-text-soft: #4A564E;
  --color-white: #FFFFFF;

  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 2px;
  --radius-media: 14px;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --container: 1200px;
  --header-h: 96px;
}

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

html { scroll-behavior: auto; }

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

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--color-primary);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* `pretty` empêche le mot ou le bout de phrase isolé en dernière ligne. Le
   `balance` des titres ne couvrait que h1/h2/h3 : c'est ce qui avait laissé
   « à minuit. » tout seul sous le titre du hero. */
p { margin: 0 0 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Les paragraphes courts posés sur une photo ou centrés sous un titre sont
   équilibrés ligne à ligne, pas seulement protégés de l'orphelin. */
.hero-content p, .page-hero-content p, .section-intro p, .cta-band p { text-wrap: balance; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container { width: min(100% - 3rem, var(--container)); margin-inline: auto; }

.eyebrow {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--color-text-soft); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-cream);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); }

.btn--outline { background: transparent; color: var(--color-primary); }

/* Bouton posé sur une photo : toujours rempli, jamais un simple contour.
   Un contour clair se noie dès que le visuel est chargé ou lumineux. */
.btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.btn--accent:hover { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-primary); }

/* Vert plein, mais cerclé de clair. Sur une photo, le contour décolle le
   bouton du fond sans lui retirer son poids, et lui donne la même présence
   qu'un .btn--accent posé juste à côté. */
.btn--edged {
  border-color: var(--color-cream);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.btn--edged:hover { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-primary); }

.btn--ghost { background: rgba(244, 240, 232, 0.14); color: var(--color-cream); border-color: rgba(244, 240, 232, 0.75); backdrop-filter: blur(3px); }
.btn--ghost:hover { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-primary); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  padding: 1.7rem 0;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.site-header.is-solid,
.page-header {
  background: rgba(244, 240, 232, 0.96);
  backdrop-filter: blur(10px);
  padding: 0.8rem 0;
  box-shadow: 0 1px 0 rgba(44, 64, 52, 0.12);
}

/* Sur les pages intérieures le header reste dans le flux (sticky) plutôt que
   fixe : sinon il faut compenser sa hauteur par une marge sur la bannière, et
   toute erreur d'estimation laisse une bande vide visible sous le header. */
.page-header { position: sticky; top: 0; }

/* 5 zones : langue → 3 liens → logo → 3 liens → CTA.
   Colonnes extérieures de largeur fixe IDENTIQUE (jamais auto) : sans ça le
   logo ne peut pas être réellement centré, un sélecteur de langue et un bouton
   n'ayant jamais la même largeur naturelle. */
/* Ce site a SEPT liens (Hébergement en plus des six habituels), donc quatre à
   gauche et trois à droite. Conséquence : la colonne centrale ne peut pas
   rester en `auto`, sinon les deux groupes de liens réclament toute la largeur
   et écrasent le logo jusqu'à 0 pixel (constaté à 1440px). Elle reçoit donc une
   largeur minimale garantie, les colonnes extérieures sont réduites, et le
   basculement vers le menu mobile est remonté à 1200px. */
/* Le header n'est pas contraint au conteneur de contenu (1200px) : le
   sélecteur de langue va chercher le bord gauche et le bouton le bord droit,
   ce qui libère la largeur nécessaire au centre pour que le logo soit
   réellement centré au lieu d'être poussé par le groupe de liens le plus long. */
.site-header .header-row { width: min(100% - 3rem, 1660px); }

.header-row {
  display: grid;
  grid-template-columns: 10rem 1fr minmax(230px, auto) 1fr 10rem;
  align-items: center;
  gap: 1.5rem;
}

.header-row > .lang-switch { justify-self: start; }
.header-row > .header-cta { justify-self: end; }

.nav-group { display: flex; align-items: center; gap: 1.5rem; }
.nav-group--left { justify-content: flex-end; }
.nav-group--right { justify-content: flex-start; }

.nav-link {
  position: relative;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
/* Trait qui se déploie sous le lien au survol, jamais un simple changement
   d'opacité. `currentColor` fait suivre automatiquement la bascule crème sur
   le hero et vert sur le header plein. */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}
.nav-link:hover::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .nav-link::after { transition: none; }
}

.site-header.is-solid .nav-link,
.page-header .nav-link { color: var(--color-primary); text-shadow: none; }

.logo { justify-self: center; }
/* Le logo est blanc tant que le header est transparent au-dessus du hero, et
   reprend son encre verte native dès que le header devient plein. Le
   drop-shadow est le pendant du text-shadow : sans lui, un logo en trait fin
   disparaît sur un visuel hero clair. */
.logo img {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  transition: filter 0.35s var(--ease), height 0.35s var(--ease);
}
.site-header.is-solid .logo img,
.page-header .logo img { height: 44px; filter: none; }

.lang-switch { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; letter-spacing: 0.1em; font-weight: 600; }
.lang-switch a { color: var(--color-cream); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); opacity: 0.65; }
.lang-switch a.is-current { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.site-header.is-solid .lang-switch a,
.page-header .lang-switch a { color: var(--color-primary); text-shadow: none; }

.header-cta .btn { padding: 0.7rem 1.15rem; font-size: 0.7rem; white-space: nowrap; }
.site-header .header-cta .btn--outline { color: var(--color-cream); border-color: rgba(244, 240, 232, 0.75); }
.site-header.is-solid .header-cta .btn--outline,
.page-header .header-cta .btn--outline { color: var(--color-primary); border-color: var(--color-primary); }

/* Remplissage au survol par balayage, plus vivant qu'un simple fondu. */
.header-cta .btn--outline { position: relative; overflow: hidden; z-index: 0; }
.header-cta .btn--outline::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
  z-index: -1;
}
/* Spécificité volontairement plus forte que les règles is-solid/page-header
   qui mettent le texte en vert : sinon au survol on obtient vert sur vert. */
.site-header .header-cta .btn--outline:hover,
.page-header .header-cta .btn--outline:hover {
  background: transparent;
  color: var(--color-cream);
  border-color: var(--color-primary);
}
.header-cta .btn--outline:hover::before { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer; padding: 0.4rem;
  color: var(--color-cream);
}
.site-header.is-solid .nav-toggle, .page-header .nav-toggle { color: var(--color-primary); }
.nav-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 5px 0; }

/* Le tiroir mobile est un SIBLING du header, jamais un enfant : le
   backdrop-filter du header en position fixe crée un contexte de
   positionnement qui casserait un position:fixed à l'intérieur. */
.nav-drawer {
  position: fixed; inset: 0; z-index: 400;
  background: var(--color-primary);
  color: var(--color-cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer .nav-link { color: var(--color-cream); font-size: 1rem; text-shadow: none; }
.nav-drawer-close { position: absolute; top: 1.6rem; right: 1.6rem; background: none; border: 0; color: var(--color-cream); font-size: 2rem; cursor: pointer; line-height: 1; }
.nav-drawer .lang-switch a { color: var(--color-cream); text-shadow: none; }

/* ---------- Hero plein écran (accueil uniquement) ---------- */

.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim renforcé en bas, là où se pose le texte, et présent en haut pour que
   le header blanc tienne sur les visuels clairs. */
/* Le voile du haut doit être franc, pas décoratif : le header pose un logo
   blanc en trait fin et des liens clairs par-dessus, et un visuel de ciel en
   plein soleil les fait disparaître si le calque est trop léger. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(16, 26, 20, 0.72) 0%, rgba(16, 26, 20, 0.34) 14%, rgba(16, 26, 20, 0) 30%),
    linear-gradient(to top, rgba(16, 26, 20, 0.7) 0%, rgba(16, 26, 20, 0.14) 55%, rgba(16, 26, 20, 0.12) 100%);
}

/* Voile central, réservé au bandeau de l'accueil.
   Les deux dégradés ci-dessus n'assombrissent que le haut (0 à 30 %) et le bas
   (55 à 100 %). Sur les pages intérieures le titre est posé en bas, donc il est
   couvert : mesuré entre 8,8:1 et 14,5:1. Sur l'accueil en revanche, le titre et
   l'accroche sont centrés verticalement, en pleine bande médiane laissée à nu,
   et un visuel clair les efface : la slide de la cour et sa terrasse tombait à
   1,8:1 pour un minimum lisible de 4,5:1.
   L'ellipse est centrée sur le bloc de texte, donc elle rattrape le contraste là
   où il manque sans ternir les bords de la photo. Elle ne s'applique pas aux
   pages intérieures, qui n'en ont pas besoin et dont elle ternirait le visuel. */
.hero > .hero-scrim {
  background:
    radial-gradient(ellipse 62% 46% at 50% 47%, rgba(16, 26, 20, 0.54) 0%, rgba(16, 26, 20, 0.36) 52%, rgba(16, 26, 20, 0) 100%),
    linear-gradient(to bottom, rgba(16, 26, 20, 0.72) 0%, rgba(16, 26, 20, 0.34) 14%, rgba(16, 26, 20, 0) 30%),
    linear-gradient(to top, rgba(16, 26, 20, 0.7) 0%, rgba(16, 26, 20, 0.14) 55%, rgba(16, 26, 20, 0.12) 100%);
}

.hero-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 1.5rem;
  color: var(--color-cream);
}
.hero-content .eyebrow { color: var(--color-cream); opacity: 0.9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.hero-content h1 { color: var(--color-cream); max-width: 17ch; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.hero-content p { color: rgba(244, 240, 232, 0.92); max-width: 46ch; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.hero-content .eyebrow, .hero-content h1, .hero-content p, .hero-content .btn { opacity: 0; transform: translateY(24px); }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

.hero-dots { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 0.6rem; }
.hero-dot { width: 34px; height: 3px; border: 0; padding: 0; background: rgba(244, 240, 232, 0.4); cursor: pointer; transition: background 0.3s var(--ease); }
.hero-dot.is-active { background: var(--color-cream); }

/* ---------- Bannière compacte des pages intérieures ---------- */

/* Bannière des pages intérieures : elle porte désormais le titre ET le texte
   d'introduction, donc elle est nettement plus haute et la photo se voit
   immédiatement, sans zone blanche entre le header et elle. */
.page-hero {
  position: relative;
  height: 66vh; min-height: 460px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  margin-top: 0;
}
.page-hero .parallax-img {
  position: absolute; top: -25%; left: 0;
  width: 100%; height: 150%;
  object-fit: cover;
  will-change: transform;
}
.page-hero .hero-scrim { z-index: 2; }
.page-hero-content { position: relative; z-index: 3; padding-bottom: 2.6rem; color: var(--color-cream); }
.page-hero-content h1 { color: var(--color-cream); font-size: clamp(1.9rem, 3.4vw, 2.6rem); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
/* Jamais de couleur héritée d'un style pensé pour fond clair sur un texte
   posé sur photo : l'eyebrow a sa propre couleur claire et son ombre. */
.page-hero-content .eyebrow { color: var(--color-cream); opacity: 0.9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
/* Texte d'introduction posé sur la photo : couleur claire et ombre définies
   explicitement, jamais héritées d'un style pensé pour un fond crème. */
.page-hero-lead {
  color: rgba(244, 240, 232, 0.94);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  max-width: 46ch;
  margin-top: 0.4rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  text-wrap: balance;
}

.page-hero-content .eyebrow, .page-hero-content h1, .page-hero-content p { opacity: 0; transform: translateY(24px); }

/* ---------- Sections ---------- */

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--tight { padding: clamp(2.4rem, 4vw, 3.4rem) 0; }
.section--cream { background: var(--color-cream); }
.section--dim { background: var(--color-cream-dim); }
.section--dark { background: var(--color-primary); color: var(--color-cream); }
.section--dark h2, .section--dark h3 { color: var(--color-cream); }
.section--dark p { color: rgba(244, 240, 232, 0.86); }

.section-intro { max-width: 62ch; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); text-align: center; }
.section-intro--left { margin-inline: 0; text-align: left; }
/* Le titre n'a pas à subir la mesure de lecture du paragraphe : à 62ch,
   « Trois hébergements sur place » se coupait en deux lignes. */
.section-intro--wide { max-width: none; }
.section-intro--wide p { max-width: 62ch; margin-inline: auto; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.grid-2 img { border-radius: var(--radius-media); }
.grid-2 .parallax-wrap { height: clamp(320px, 34vw, 480px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.4vw, 2.2rem); }

.card {
  background: var(--color-white);
  border: 1px solid rgba(44, 64, 52, 0.1);
  border-radius: var(--radius-media);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
}
.card h3 { margin-bottom: 0.6rem; }
.card ul { margin: 0; padding-left: 1.1rem; color: var(--color-text-soft); }
.card li { margin-bottom: 0.5rem; }

.feature { text-align: left; }
.feature h3 { font-size: 1.2rem; }
.feature p { color: var(--color-text-soft); }

/* ---------- Bandeau de statistiques ---------- */

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-item { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-value { font-family: var(--font-title); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--color-cream); line-height: 1; }
.stat-label { font-size: 0.78rem; color: rgba(244, 240, 232, 0.75); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Photos : pin, parallax, bandes, duo ---------- */

.pin-wrap { position: relative; height: 100vh; overflow: hidden; }
.pin-wrap img { width: 100%; height: 100%; object-fit: cover; }
.pin-caption {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Voile plus dense au centre, derrière le texte, plus léger sur les bords
     pour ne pas éteindre la photo. Nécessaire sur les visuels très clairs. */
  background: radial-gradient(ellipse at center, rgba(20, 30, 24, 0.74) 0%, rgba(20, 30, 24, 0.66) 45%, rgba(20, 30, 24, 0.48) 100%);
  color: var(--color-cream); text-align: center; padding: 2rem;
}
.pin-caption h2 { color: var(--color-cream); max-width: 20ch; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75); }

.parallax-wrap { position: relative; overflow: hidden; border-radius: var(--radius-media); }
.parallax-wrap .parallax-img {
  position: absolute; top: -25%; left: 0;
  width: 100%; height: 150%;
  object-fit: cover;
  will-change: transform;
}

/* Position de départ du parallaxe posée dès le CSS : le script ne charge
   qu'après le premier rendu, et sans ça l'image saute à sa position GSAP une
   fois le script exécuté (visible à chaque changement de page). -12% ici =
   yPercent -12 côté GSAP, la reprise est invisible. Desktop seulement : sur
   mobile le parallaxe est désactivé et la translation resterait figée. */
@media (min-width: 901px) {
  .parallax-wrap .parallax-img, .page-hero .parallax-img { transform: translateY(-12%); }
}

.photo-band { position: relative; height: clamp(320px, 46vw, 560px); overflow: hidden; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
.photo-band-caption {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Voile plus dense au centre, derrière le titre, plus léger sur les bords :
     la vue aérienne est très détaillée, et un voile uniforme obligeait à tout
     assombrir pour que le texte tienne. Mesuré à 9,9:1 au centre, pour un
     minimum lisible de 4,5:1. */
  background: radial-gradient(ellipse at center, rgba(20, 30, 24, 0.72) 0%, rgba(20, 30, 24, 0.62) 45%, rgba(20, 30, 24, 0.44) 100%);
  color: var(--color-cream); text-align: center; padding: 2rem;
}
.photo-band-caption h2 { color: var(--color-cream); max-width: 22ch; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }

/* Bandeau de respiration pleine largeur, avec le même vrai parallax que les
   médias de section. Déclaré après .parallax-wrap pour en annuler l'arrondi. */
.photo-strip { height: clamp(240px, 30vw, 420px); border-radius: 0; }

/* ---------- Citation mise en exergue ---------- */
/* Une phrase attribuée, pas un paragraphe : elle doit se lire d'un coup d'œil
   et se distinguer du corps de texte sans crier. */
.pull-quote {
  max-width: 34ch;
  margin: 0 auto;
  text-align: center;
}
.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.25;
  color: var(--color-primary);
  text-wrap: balance;
}
.section--dark .pull-quote blockquote { color: var(--color-cream); }
.pull-quote cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.section--dark .pull-quote cite { color: var(--color-accent); }

/* ---------- Slider de section ---------- */
/* Les vues défilent en fondu, comme le hero, plutôt qu'en translation : pas de
   piste à mesurer, donc rien à recalculer au redimensionnement. */
.slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 4 / 3;
  background: var(--color-cream-dim);
}
.slider-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.slider-slide.is-active { opacity: 1; }
.slider-slide img { width: 100%; height: 100%; object-fit: cover; }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(244, 240, 232, 0.75);
  background: rgba(28, 38, 32, 0.35);
  backdrop-filter: blur(4px);
  color: var(--color-cream);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.slider-arrow:hover { background: var(--color-cream); color: var(--color-primary); }
.slider-arrow--prev { left: 1rem; }
.slider-arrow--next { right: 1rem; }

.slider-dots {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 0.6rem;
}
/* Un slider de galerie n'a pas à occuper toute la largeur du conteneur : à
   1200px, un cadre 4/3 ferait 900px de haut et écraserait le reste de la page. */
.slider--compact { max-width: 820px; margin-inline: auto; }

.slider-dot {
  width: 22px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(244, 240, 232, 0.45);
  transition: background 0.3s var(--ease);
}
.slider-dot.is-active { background: var(--color-cream); }

.slider-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 3.5rem 1.6rem 2.6rem;
  background: linear-gradient(to top, rgba(20, 30, 24, 0.72), transparent);
  color: var(--color-cream);
  font-size: 0.9rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .slider-slide { transition: none; }
}

.media-duo { position: relative; }
.media-duo .media-duo-main { height: clamp(340px, 36vw, 500px); }
/* Variante sans recadrage : le cadre suit le format natif du visuel (posé en
   aspect-ratio inline). Nécessaire pour les panoramiques, qu'une hauteur
   imposée ampute des deux tiers. */
.media-duo .media-duo-main--natural { height: auto; }
.media-duo .media-duo-main--natural img { width: 100%; height: auto; border-radius: var(--radius-media); }
.media-duo-inset {
  position: absolute; bottom: -26px;
  width: 44%; max-width: 232px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 3px solid var(--color-cream);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}
.media-duo--inset-left .media-duo-inset { left: -26px; }
.media-duo--inset-right .media-duo-inset { right: -26px; }
.media-duo-inset img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Rangée à photo verticale. Le recadrage ne dépend que du RAPPORT du cadre,
   jamais de sa taille : un cadre paysage sur un visuel portrait coupe le haut
   et le bas quoi qu'il arrive. Le cadre principal adopte donc un format
   portrait, et la colonne média est légèrement resserrée pour que la hauteur
   gagnée reste tenable. Le texte passe en colonne flex pour se répartir sur
   toute la hauteur au lieu de flotter au centre. */
/* Sauts de ligne rédactionnels. Ils ne tiennent que si la colonne de texte
   fait au moins ~615px, ce qui demande une fenêtre d'environ 1250px. En
   dessous, les lignes forcées débordent et se replient à leur tour, laissant
   des bouts de phrase seuls sur une ligne (mesuré à 1024px : six orphelines).
   On les neutralise donc en dessous de ce seuil, et le texte se replie seul. */
@media (max-width: 1249px) { .br-wide { display: none; } }


.grid-2--tall { grid-template-columns: 1.08fr 0.92fr; }
/* Variante média à gauche : c'est la colonne photo qui reçoit la part large. */
.grid-2--media-first.grid-2--tall { grid-template-columns: 1.15fr 0.85fr; }
/* Cadre libre (hors media-duo) : il adopte le format NATIF de la photo, donc
   aucun recadrage. `>` pour ne pas toucher au media-duo de la rangée 1, qui a
   sa propre règle en 4/5. */
.grid-2--tall > .parallax-wrap { height: auto; aspect-ratio: 4 / 3; }
.grid-2--tall .media-duo .media-duo-main { height: auto; aspect-ratio: 4 / 5; }
.grid-2--tall .grid-2-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 1.9vw, 1.9rem);
}
/* Les marges basses natives feraient double emploi avec le gap et casseraient
   la régularité de l'espacement. */
.grid-2--tall .grid-2-text > * { margin-bottom: 0; }
.grid-2--tall .grid-2-text .btn { align-self: flex-start; }

/* Bandeau au format de sa photo : la hauteur découle du visuel au lieu d'être
   imposée, donc l'image est entière quelle que soit la largeur d'écran. Le
   plafond en vh évite qu'il devienne envahissant sur un écran étroit. */
.page-hero--fit {
  /* width:100% est indispensable : sans largeur définie, quand max-height mord,
     le navigateur préserve le rapport en RÉTRÉCISSANT la largeur, ce qui laisse
     une bande vide à droite (constaté : 1323px au lieu de 1920 à 1920x800).
     Largeur figée, c'est la hauteur qui cède, et object-fit gère le reste. */
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 890 / 445;
  max-height: 62vh;
}
/* Le parallaxe surdimensionne l'image à 150 % de son cadre pour avoir de la
   matière à faire dériver. Incompatible avec un cadre au format exact de la
   photo : les deux se cumulent et on obtient un zoom, plus un bord vide quand
   la translation entre en jeu. L'image reprend donc sa taille de cadre. */
.page-hero--fit .parallax-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  top: 0;
  transform: none !important;
}

.zoom-frame { position: relative; overflow: hidden; border-radius: var(--radius-media); height: clamp(280px, 32vw, 460px); }
.zoom-frame img { width: 100%; height: 100%; object-fit: cover; will-change: transform; border-radius: 0; }

.scroll-split-text, .scroll-split-media { will-change: transform; }
.converge > * { will-change: transform; }

/* ---------- Galerie ---------- */

.gallery-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.2rem; }
.gallery-filter button {
  font-family: var(--font-body);
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 0.6rem 1.2rem;
  border: 1px solid rgba(44, 64, 52, 0.25);
  border-radius: var(--radius);
  background: transparent; color: var(--color-primary); cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.gallery-filter button.is-active, .gallery-filter button:hover { background: var(--color-primary); color: var(--color-cream); border-color: var(--color-primary); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-media); height: 340px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); border-radius: 0; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item.tall { grid-row: span 2; height: 100%; }

/* ---------- Bandeau CTA ---------- */

.cta-band { background: var(--color-primary); color: var(--color-cream); text-align: center; padding: clamp(3.4rem, 6vw, 5rem) 0; }
.cta-band h2 { color: var(--color-cream); }
.cta-band p { color: rgba(244, 240, 232, 0.86); max-width: 52ch; margin-inline: auto; }

/* ---------- Formulaire ---------- */

.contact-form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--color-text-soft); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 0.95rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(44, 64, 52, 0.22);
  border-radius: var(--radius);
  background: var(--color-white); color: var(--color-text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.field textarea { min-height: 140px; resize: vertical; }
.form-feedback { display: none; font-size: 0.92rem; padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--color-cream-dim); }
.form-feedback.is-visible { display: block; }
.form-feedback.is-success { background: rgba(44, 64, 52, 0.1); color: var(--color-primary); }
.form-feedback.is-error { background: rgba(150, 60, 40, 0.1); color: #8c3a26; }

.contact-map { border: 0; width: 100%; height: 380px; border-radius: var(--radius-media); }

/* ---------- Footer ---------- */

.site-footer { background: var(--color-primary); color: rgba(244, 240, 232, 0.82); padding: clamp(3rem, 5vw, 4.2rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
.footer-grid h4 { color: var(--color-cream); font-size: 1rem; margin-bottom: 0.9rem; }
.footer-grid a:hover { color: var(--color-cream); text-decoration: underline; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.logo-footer img { height: 96px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1rem; }
.footer-bottom { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(244, 240, 232, 0.18); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.82rem; }

/* ---------- Bandeau cookies ---------- */

.cookie-banner {
  position: fixed;
  left: 1.5rem; right: 1.5rem; bottom: 1.5rem;
  z-index: 400;
  background: var(--color-primary);
  color: var(--color-cream);
  border-radius: var(--radius);
  padding: 1.2rem 1.6rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(140%);
  transition: transform 0.5s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 0.9rem; color: rgba(244, 240, 232, 0.9); max-width: 640px; }
.cookie-banner a { color: var(--color-cream); text-decoration: underline; }
.cookie-banner .btn { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); }
.cookie-banner .btn:hover { background: var(--color-cream); border-color: var(--color-cream); }

/* ---------- Animations ---------- */

.reveal { opacity: 0; transform: translateY(28px); }
/* Le masque doit descendre plus bas que la ligne de base, sinon il rogne les
   jambages (g, p, j, q) : avec une interligne de 1,05, la boîte s'arrête juste
   sous la base. Le padding agrandit la zone visible vers le bas, la marge
   négative annule son effet sur la mise en page. 0,22em suffit aux jambages et
   reste très au-dessus du mot en attente, décalé de 1,2em. */
.split-line { display: inline-block; overflow: hidden; vertical-align: top;
              padding-bottom: 0.22em; margin-bottom: -0.22em; }
.split-word { display: inline-block; opacity: 0; transform: translateY(1.2em); }

/* ---------- Pages légales ---------- */

.legal { max-width: 78ch; }
.legal h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-top: 2.4rem; }
.legal p, .legal li { color: var(--color-text-soft); }

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {
  .header-row { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .nav-group, .header-cta { display: none; }
  .nav-toggle { display: block; justify-self: end; }
  .logo { justify-self: center; }
  .logo img { height: 38px; }
  .site-header.is-solid .logo img, .page-header .logo img { height: 32px; }
}

@media (max-width: 900px) {
  .grid-2, .grid-3, .footer-grid, .form-row { grid-template-columns: 1fr; }
  /* Rappel indispensable : `.grid-2--media-first.grid-2--tall` compte DEUX
     classes, donc l'emporte sur le `.grid-2` ci-dessus quel que soit l'ordre.
     Sans cette ligne, la section « Dormir sur place » de l'accueil restait sur
     deux colonnes en mobile : la photo se superposait au texte, qui débordait
     hors de l'écran à droite. */
  .grid-2--tall,
  .grid-2--media-first.grid-2--tall { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item { height: 260px; }
  .gallery-item.tall { grid-row: span 1; height: 260px; }
  .media-duo .media-duo-main { height: clamp(300px, 62vw, 420px); }
  /* Une fois les colonnes empilées, le cadre prend toute la largeur : un 4/5
     donnerait près de 1000px de haut sur une tablette. On le plafonne. */
  .grid-2--tall .media-duo .media-duo-main { max-height: 68vh; }
  .media-duo-inset { width: 38%; bottom: -18px; }
  .media-duo--inset-left .media-duo-inset { left: 14px; }
  .media-duo--inset-right .media-duo-inset { right: 14px; }
  .grid-2 .parallax-wrap { height: clamp(260px, 56vw, 380px); }
  /* Une fois empilé, le cadre doit occuper toute la largeur de la colonne.
     Sans `width:100%`, `aspect-ratio: 4/3` combiné à la hauteur imposée
     ci-dessus DÉDUIT la largeur du rapport : 280px de haut donnaient 373px de
     large dans une colonne de 452, soit une photo plus étroite que le texte et
     calée à gauche. Mesuré à 500px de viewport. */
  .grid-2--tall > .parallax-wrap { width: 100%; height: auto; }
}

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .cookie-banner { left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem 1.2rem; }
  .pin-wrap { height: 62vh; }
  .hero { height: 100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .split-word { opacity: 1 !important; transform: none !important; }
  .hero-content .eyebrow, .hero-content h1, .hero-content p, .hero-content .btn,
  .page-hero-content .eyebrow, .page-hero-content h1, .page-hero-content p { opacity: 1 !important; transform: none !important; }
  .cookie-banner, .header-cta .btn--outline::before, .hero-slide { transition: none; }
  .parallax-wrap .parallax-img, .page-hero .parallax-img { transform: none !important; }
}