/* ==========================================================================
   Domaine d'Éden — styles globaux
   Charte : docs/CHARTE-GRAPHIQUE.md  (v4 — « rond, vert, familial »)

   Le client a demandé le virage : plus d'angles vifs, des formes pleines et
   généreuses, et ses grands disques verts en fond. Deux systèmes portent
   toute la direction et sont déclarés ici, une seule fois :

     — l'échelle de rayons  (--r-*)      : aucun coin droit ailleurs dans le
       fichier ; un composant choisit un barreau de l'échelle, jamais une
       valeur en dur ;
     — la famille des verts (--vert-*)   : c'est une échelle de CONTRASTE, pas
       une palette décorative. Chaque teinte dit ce qu'elle sait porter.
   ========================================================================== */

:root {
  /* — Fonds : des blancs, très légèrement verdis — */
  --blanc: #FAFAF8;
  --blanc-vert: #F2F5EC;
  --gris-vert: #E4E9DA;
  --ivoire: #FDFDFB;

  /* — Encres — */
  --encre: #161B14;
  --foret: #22301A;

  /* — Les verts : la couleur de la maison (#74963D, relevée sur l'identité du client) —
     Ratios mesurés sur l'ivoire #FDFDFB, sauf mention contraire. */
  --vert: #74963D;        /* vert de marque : disques décoratifs, filets, italiques.
                             3,34:1 sur ivoire → GRANDS titres et aplats seulement */
  --vert-doux: #8FB25C;   /* le vert clair des disques du client. 2,37:1 sur ivoire :
                             DÉCORATIF ou porteur d'encre (7,2:1), jamais de blanc */
  --vert-fonce: #5C7A2E;  /* aplats et boutons : ivoire plein dessus, 4,82:1 ✔ */
  --vert-profond: #40571E;/* les blocs verts qui portent du TEXTE COURANT blanc :
                             7,93:1 sur ivoire plein, 5,97:1 sur ivoire à 82 % */
  --vert-txt: #4F6B26;    /* texte accentué sur fond clair : AA 5,95:1 */
  --vert-clair: #9DBA6A;  /* accents sur --foret (6,42:1) ; sur --vert-profond,
                             3,72:1 → grands textes seulement */
  --vert-tendre: #D7E5B8; /* petits accents sur --vert-profond : 6,07:1 ✔, et 4,79:1
                             au point le plus clair du pied de page (mesuré au pixel) */
  --sauge: #4F5F38;       /* labels secondaires : 6,64:1 sur blanc et 4,95:1 sur le
                             point le plus dense des disques de la page réservation.
                             L'ancien #5E7048 y tombait à 4,01:1, l'étape
                             intermédiaire #55663E à 4,46:1 — mesuré au pixel. */

  /* — L'échelle de rayons —
     Rien n'a de coin droit. Les grands barreaux sont en clamp : un rayon fixe
     de 48 px avale une carte de 300 px sur un téléphone. */
  --r-xs: 0.55rem;                        /* case à cocher, micro-éléments */
  --r-sm: 0.95rem;                        /* petites tuiles — barreau libre, gardé
                                             pour que l'échelle reste continue */
  --r-md: clamp(1rem, 2.2vw, 1.5rem);     /* lignes de liste, récapitulatif */
  --r-lg: clamp(1.4rem, 3.4vw, 2.2rem);   /* cartes, photos, encadrés */
  --r-xl: clamp(1.8rem, 5vw, 3.2rem);     /* blocs et conteneurs de section */
  --r-2xl: clamp(2.2rem, 7vw, 4.5rem);    /* grands médias, hero, pied de page */
  --r-pilule: 999px;                      /* boutons, badges, puces, jauges */
  --r-cercle: 50%;                        /* médaillons, pastilles, icônes */

  /* — Les disques : voiles réglés une fois pour toutes —
     Ce sont des fonds décoratifs ; le texte ne se pose jamais dessus sans
     passer par --vert-profond (cf. .bloc-vert). */
  --disque-vert: rgba(116, 150, 61, 0.92);
  --disque-doux: rgba(143, 178, 92, 0.85);
  --disque-pale: rgba(116, 150, 61, 0.13);
  --disque-tendre: rgba(198, 217, 162, 0.34);
  /* Sur les fonds sombres, l'alpha est plafonné par le contraste, pas par le
     goût : au-delà de 0,2 le disque éclaircit assez la forêt pour faire passer
     l'eyebrow en --vert-clair sous les 4,5:1 (4,17:1 mesuré à 0,3). */
  --disque-nuit: rgba(116, 150, 61, 0.2);
  --disque-nuit-clair: rgba(157, 186, 106, 0.14);

  /* — Fonctionnel (hors charte : seuls les états d'erreur) — */
  --erreur: #9E3B2B;

  /* — Alphas — */
  --encre-06: rgba(22, 27, 20, 0.06);
  --encre-12: rgba(22, 27, 20, 0.12);
  --encre-24: rgba(22, 27, 20, 0.24);
  --encre-45: rgba(22, 27, 20, 0.45);
  --encre-72: rgba(22, 27, 20, 0.72);
  --encre-88: rgba(22, 27, 20, 0.88);
  --vert-08: rgba(116, 150, 61, 0.08);
  --vert-16: rgba(116, 150, 61, 0.16);
  --ivoire-96: rgba(253, 253, 251, 0.96);
  --ivoire-82: rgba(253, 253, 251, 0.82);
  --ivoire-56: rgba(253, 253, 251, 0.56);
  --ivoire-16: rgba(253, 253, 251, 0.16);

  --serif: "Cormorant Garamond", "Cormorant secours", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Jost secours", "Futura", "Century Gothic", -apple-system, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --section-pad: clamp(5.5rem, 11vw, 9.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- Polices auto-hébergées ----------
   Sous-ensembles latin et latin-ext seulement : le site est francophone, les
   plages cyrillique / grec / vietnamien de Google ne seraient jamais lues.

   Servies depuis le domaine du site plutôt que depuis Google Fonts. Le
   chargement passait auparavant par deux allers-retours en cascade —
   fonts.googleapis.com pour la feuille, puis fonts.gstatic.com pour les
   woff2 — que les preconnect ne masquaient qu'à moitié : les polices
   n'arrivaient qu'à 5,2 s en 3G bridée, contre 3,0 s une fois hébergées ici.

   Déclarées dans cette feuille et non dans une feuille séparée : styles.css
   bloque déjà le rendu, une seconde requête n'aurait fait qu'ajouter un
   aller-retour. Ne pas les précharger non plus (`<link rel=preload as=font>`) :
   mesuré, cela retarde le CSS et l'image de tête, qui pèsent plus lourd —
   le LCP de chambres.html passait de 3,0 à 5,1 s. Les doublures métriques
   ci-dessous rendent le texte lisible sans attendre. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Polices de secours calees sur les metriques reelles ---------- */
/* Cormorant est 12 % plus etroite que Georgia, Jost 5 % plus etroite qu'Arial :
   sans cela, tout le texte se remet en page a l'arrivee des webfonts. Ces deux
   familles servent de doublure et occupent exactement la meme place. Valeurs
   relevees au canvas (avance moyenne, fontBoundingBox) sur les vraies polices. */

@font-face {
  font-family: "Cormorant secours";
  src: local("Georgia");
  size-adjust: 87.2%;
  ascent-override: 105.5%;
  descent-override: 33.26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Cormorant secours";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia");
  size-adjust: 76.6%;
  ascent-override: 120.1%;
  descent-override: 37.86%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Jost secours";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 94.82%;
  ascent-override: 112.85%;
  descent-override: 40.08%;
  line-gap-override: 0%;
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.09rem;
  line-height: 1.7;
  color: var(--encre-88);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain papier — la page n'est plus une surface plate */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.055;
  mix-blend-mode: multiply;
}

/* height:auto laisse le ratio des attributs width/height piloter la place reservee ;
   les regles plus specifiques (height:100% + object-fit) le surchargent sans souci */
img { max-width: 100%; height: auto; display: block; }

/* Le <picture> ne doit produire aucune boite : sans cela il s'interpose entre
   l'image et son conteneur, et les height:100% + object-fit:cover comme les
   .photo-inset en absolu perdent leur reference de calcul. */
picture { display: contents; }

a { color: var(--vert-fonce); text-decoration: none; }

::selection { background: var(--vert); color: var(--ivoire); }

/* Le contour de focus épouse le rayon de l'élément (les navigateurs suivent
   `border-radius`), d'où un focus rond partout sans règle supplémentaire. */
:focus-visible { outline: 2.5px solid var(--vert-txt); outline-offset: 3px; }
.section--dark :focus-visible,
.final-cta :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.bloc-vert :focus-visible,
.site-footer :focus-visible { outline-color: var(--vert-tendre); }

/* Complément de libellé réservé aux lecteurs d'écran (« — faire une
   demande » derrière le titre d'une carte format). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

.container--wide { max-width: 1480px; }

/* ---------- Les disques ----------
   Le motif du client : de larges cercles verts qui débordent du cadre, se
   chevauchent et sortent par les bords. Deux disques qui se recouvrent
   dessinent une silhouette en pétale — c'est le seul « ornement » du site.

   Tout est en CSS (`border-radius: 50%` sur un span vide) : aucune image,
   aucun SVG répété. Les tailles sont en `clamp(px, vw, px)` pour qu'un disque
   qui fait 620 px sur un 1440 n'écrase pas un écran de 390.

   Débordement : le conteneur `.disques` est en `overflow: hidden` ET les
   sections qui l'accueillent le sont déjà. Les disques peuvent donc sortir
   franchement du cadre sans jamais créer de défilement horizontal — c'est
   la seule raison pour laquelle on peut se passer d'un `overflow-x` global,
   qui casserait le repère de calcul du header. */

.disques {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.disque {
  position: absolute;
  display: block;
  border-radius: var(--r-cercle);
  aspect-ratio: 1;
  background: var(--disque-pale);
}

/* — Tailles — */
.disque--s  { width: clamp(110px, 22vw, 230px); }
.disque--m  { width: clamp(190px, 34vw, 400px); }
.disque--l  { width: clamp(280px, 48vw, 620px); }
.disque--xl { width: clamp(380px, 68vw, 900px); }

/* — Encres — */
.disque--vert   { background: var(--disque-vert); }
.disque--doux   { background: var(--disque-doux); }
.disque--pale   { background: var(--disque-pale); }
.disque--tendre { background: var(--disque-tendre); }
.disque--anneau { background: none; border: clamp(6px, 1.4vw, 14px) solid var(--disque-pale); }

/* Sur les fonds sombres et sur les photos, les mêmes disques passent en voile :
   opaques, ils feraient un pâté ; à cette densité ils réchauffent le fond. */
.section--dark .disque--vert, .final-cta .disque--vert, .hero .disque--vert,
.page-hero .disque--vert, .site-footer .disque--vert { background: var(--disque-nuit); }
.section--dark .disque--doux, .final-cta .disque--doux, .hero .disque--doux,
.page-hero .disque--doux, .site-footer .disque--doux { background: var(--disque-nuit-clair); }
.section--dark .disque--anneau, .final-cta .disque--anneau, .hero .disque--anneau,
.page-hero .disque--anneau, .site-footer .disque--anneau {
  background: none;
  border-color: var(--disque-nuit-clair);
}

/* — Ancrages. Le débord se fait par `translate` et NON par un `top`/`left`
     négatif : en pourcentage, `top` se mesure sur la hauteur du conteneur et
     `left` sur sa largeur, si bien qu'un même réglage sortirait un disque de
     30 px d'une section courte et de 300 px d'une section longue. Un
     `translate` en pourcentage, lui, se mesure sur la boîte du disque : le
     débord reste proportionnel à sa taille, à toutes les tailles d'écran.

     `translate` est la propriété autonome, pas `transform` : la dérive
     (.disque--flotte) garde ainsi `transform` pour elle seule. — */
.pos-hg { top: 0; left: 0; translate: -36% -42%; }
.pos-hd { top: 0; right: 0; translate: 36% -42%; }
.pos-bg { bottom: 0; left: 0; translate: -36% 42%; }
.pos-bd { bottom: 0; right: 0; translate: 36% 42%; }
.pos-g  { top: 50%; left: 0; translate: -46% -50%; }
.pos-d  { top: 50%; right: 0; translate: 46% -50%; }
.pos-h  { top: 0; left: 50%; translate: -50% -56%; }
.pos-b  { bottom: 0; left: 50%; translate: -50% 56%; }

/* Le pétale : deux disques de tailles différentes décalés d'environ un tiers.
   Leur recouvrement dessine la forme organique de la maquette du client. */
.pos-petale-hd-1 { top: 0; right: 0; translate: 30% -48%; }
.pos-petale-hd-2 { top: 0; right: 0; translate: -14% -6%; }
.pos-petale-bg-1 { bottom: 0; left: 0; translate: -32% 46%; }
.pos-petale-bg-2 { bottom: 0; left: 0; translate: 12% 4%; }

/* Une dérive très lente : le fond respire sans jamais attirer l'œil.
   Purement décorative, elle disparaît en mouvement réduit (bloc global en
   fin de fichier), et n'anime que `translate` — pas de reflow. */
@media (prefers-reduced-motion: no-preference) {
  .disque--flotte { animation: disqueFlotte 22s ease-in-out infinite alternate; }
  .disque--flotte.disque--lent { animation-duration: 31s; animation-delay: -6s; }
}

@keyframes disqueFlotte {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -3.5%, 0) scale(1.045); }
}

/* ---------- Les blocs verts ----------
   Un aplat vert qui porte du texte courant en blanc n'a qu'une teinte
   possible : --vert-profond (7,9:1). Le vert de marque, à 3,3:1, ne tient
   que sous un grand titre — d'où ce composant, et non un `background: var(--vert)`
   posé au cas par cas. Les disques plus clairs se contentent d'y jouer en
   fond, sous le texte, jamais derrière lui. */
.bloc-vert {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--vert-profond);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(143, 178, 92, 0.12), transparent 46%),
    radial-gradient(circle at 92% 96%, rgba(116, 150, 61, 0.16), transparent 52%);
  color: var(--ivoire-82);
  border-radius: var(--r-xl);
}

.bloc-vert h2, .bloc-vert h3, .bloc-vert h4, .bloc-vert blockquote { color: var(--ivoire); }
.bloc-vert .eyebrow { color: var(--vert-tendre); }
.bloc-vert .eyebrow::before { background: linear-gradient(90deg, transparent, var(--vert-tendre)); }
.bloc-vert .eyebrow--center::after { background: linear-gradient(90deg, var(--vert-tendre), transparent); }
.bloc-vert .em-italic, .bloc-vert em { color: var(--vert-tendre); }
.bloc-vert > * { position: relative; z-index: 1; }

/* ---------- Typographie ---------- */

h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--encre);
}

h1 { font-size: clamp(3.4rem, 9vw, 7.5rem); font-weight: 300; }
h2 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); font-weight: 300; }
h3 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); }

/* Le fragment italique du titre passait au vert de marque. Sur un blanc nu il
   tenait 3,09:1, soit tout juste les 3:1 des grands textes — mais dès qu'un
   disque, même très pâle, passe dessous, il tombe à 2,67:1 (mesuré). --vert-txt
   donne 5,80:1 sur le blanc et 4,76:1 sous le disque le plus dense : le titre
   garde sa marge quelle que soit la place du disque. */
h2 em, h1 em, .em-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--vert-txt);
}

.section--dark h2 em, .final-cta h2 em, .hero h1 em { color: var(--vert-clair); }

/* Titres à masque : chaque ligne monte depuis son propre cadre */
.ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.ln > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--ln-delay, 0ms);
}

.is-visible .ln > span,
.is-loaded .hero .ln > span,
.is-loaded .page-hero .ln > span { transform: none; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vert-txt);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

/* Le filet de l'eyebrow est arrondi comme tout le reste : 2 px pleins plutôt
   qu'un cheveu d'1 px, sinon le rayon ne se voit pas. */
.eyebrow::before {
  content: "";
  width: 3rem;
  height: 2px;
  border-radius: var(--r-pilule);
  background: linear-gradient(90deg, transparent, var(--vert));
  flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 3rem;
  height: 2px;
  border-radius: var(--r-pilule);
  background: linear-gradient(90deg, var(--vert), transparent);
  flex: none;
}

/* Sur la forêt, --vert-clair tient 6,4:1. Sur le CTA final, dont le fond est
   une photo voilée de vert, il descendait à 3,1:1 : l'eyebrow y passe au vert
   tendre, qui reste au-dessus de 4,5:1 sur les zones les plus claires. */
.section--dark .eyebrow { color: var(--vert-clair); }
.final-cta .eyebrow { color: var(--vert-tendre); }
.hero .eyebrow { color: var(--ivoire-96); }

/* sur fond sombre, le filet passe au vert clair pour rester lisible */
.section--dark .eyebrow::before, .final-cta .eyebrow::before, .hero .eyebrow::before,
.aside-band-text .eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--vert-clair));
}
.section--dark .eyebrow--center::after, .final-cta .eyebrow--center::after,
.hero .eyebrow--center::after {
  background: linear-gradient(90deg, var(--vert-clair), transparent);
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--encre-72);
}

.prose { max-width: 60ch; }
.prose p + p { margin-top: 1.15em; }
.prose strong {
  font-weight: 500;
  color: var(--vert-txt);
}

/* Lettrine */
.dropcap::first-letter {
  font-family: var(--serif);
  font-size: 3.6em;
  font-weight: 400;
  line-height: 0.8;
  float: left;
  margin: 0.02em 0.09em 0 0;
  color: var(--vert);
}

.section-index {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--vert-txt);
}

.section--dark .section-index { color: var(--vert-clair); }

/* Folio géant en filigrane */
.folio {
  position: absolute;
  top: -0.75em;
  right: var(--gutter);
  font-family: var(--serif);
  font-size: clamp(6.5rem, 13vw, 12rem);
  line-height: 0.72;
  font-weight: 300;
  font-style: italic;
  color: var(--vert);
  opacity: 0.085;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.folio--left { right: auto; left: var(--gutter); }
.section--dark .folio { color: var(--vert-clair); opacity: 0.13; }

/* Cibles des liens d'ancre de la nav (index.html#galerie…). Le header est
   fixe sur deux rangs : sans cette marge, l'arrivée depuis une autre page
   posait le titre de la section juste dessous. Même valeur que .room-detail. */
.section[id],
#top { scroll-margin-top: clamp(6.5rem, 12vw, 10rem); }

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

/* Des pilules, plus des rectangles : c'est le geste le plus visible du virage.
   Le voile de survol reste, mais il ne monte plus — il s'ouvre en cercle depuis
   le centre, ce qui va avec la forme. */
.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.25em 2.9em;
  border: 1.5px solid transparent;
  border-radius: var(--r-pilule);
  cursor: pointer;
  text-align: center;
  isolation: isolate;
  transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}

.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

/* Voile qui s'épanouit au survol. Le cercle est dimensionné en `%` du bouton
   et centré : à 250 % il couvre toujours les quatre coins, quel que soit le
   rapport largeur/hauteur du libellé. */
.btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  border-radius: var(--r-cercle);
  transform: scale(0);
  transition: transform 0.55s var(--ease-out);
}

.btn:hover::before, .btn:focus-visible::before { transform: scale(1); }

.btn--primary { background: var(--vert-fonce); color: var(--ivoire); }
.btn--primary::before { background: var(--vert-profond); }
.btn--primary:hover { color: var(--ivoire); }

.btn--ghost { border-color: rgba(116, 150, 61, 0.45); color: var(--vert-txt); }
.btn--ghost::before { background: var(--vert-fonce); }
.btn--ghost:hover { color: var(--ivoire); border-color: var(--vert-fonce); }

.btn--ghost-light { border-color: var(--ivoire-56); color: var(--ivoire); }
.btn--ghost-light::before { background: var(--ivoire); }
.btn--ghost-light:hover { color: var(--encre); border-color: var(--ivoire); }

.btn--light { background: var(--ivoire); color: var(--vert-profond); }
.btn--light::before { background: var(--vert-fonce); }
.btn--light:hover { color: var(--ivoire); }

.btn--vert { background: var(--vert-fonce); color: var(--ivoire); }
.btn--vert::before { background: var(--vert-profond); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre);
  transition: color 0.4s var(--ease-out);
}

.link-arrow::after {
  content: "";
  width: 2.4rem;
  height: 2px;
  border-radius: var(--r-pilule);
  background: var(--vert);
  transition: width 0.5s var(--ease-out);
}

.link-arrow:hover { color: var(--vert-txt); }
.link-arrow:hover::after { width: 4rem; }

.section--dark .link-arrow { color: var(--ivoire); }
.section--dark .link-arrow::after { background: var(--vert-clair); }

/* ---------- Header ---------- */
/* Deux rangs : une barre de service (réseaux · signature · téléphone),
   puis la navigation. Transparent sur le hero, blanc translucide au scroll. */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
              transform 0.55s var(--ease-out);
}

.site-header.is-hidden { transform: translateY(-102%); }

.site-header .container { max-width: 1480px; }

/* — Rang 1 : service — */
.header-top { border-bottom: 1px solid var(--ivoire-16); transition: border-color 0.5s var(--ease-out); }

.header-top .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 74px;
  gap: 1.5rem;
}

/* Réseaux — pictogrammes cliquables */
.header-social { display: flex; align-items: center; gap: 0.6rem; list-style: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ivoire-56);
  border-radius: 50%;
  color: var(--ivoire);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vert);
  transform: scale(0);
  border-radius: 50%;
  transition: transform 0.45s var(--ease-out);
}

.icon-btn:hover, .icon-btn:focus-visible { color: var(--ivoire); border-color: var(--vert); }
.icon-btn:hover::before, .icon-btn:focus-visible::before { transform: scale(1); }

.icon-btn svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Téléphone en haut à droite */
.header-phone {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  letter-spacing: 0.06em;
  color: var(--ivoire);
  white-space: nowrap;
  transition: color 0.4s var(--ease-out);
}

.header-phone svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.75; }
.header-phone:hover { color: var(--vert-clair); }

/* — La marque — */
/* Le château du client, vectorisé depuis son fichier (tools/generer-logo.py).
   Chaque page en porte une seule copie, en <symbol> ; en-tête, pied de page et
   rideau l'appellent par <use>.

   Le dessin est bichrome et se règle par deux variables, l'une et l'autre
   héritées jusque dans l'arbre du <use> :

     `color`          donne sa teinte au trait du château — comme le texte voisin ;
     `--eden-feuille` celle de l'arbre et des toits. Non définie, le feuillage
                      suit le trait et la marque est monochrome.

   `--eden-trait` compense optiquement la réduction : le trait du dessin descend
   à 2 px sur une source large de 404, soit un demi-pixel une fois la marque
   ramenée à 26 px de haut — le château virerait au gris. La variable cerne alors
   chaque aplat d'un liseré de sa propre couleur. Elle s'exprime en pixels
   d'écran (`vector-effect: non-scaling-stroke` sur les tracés), donc en valeurs
   lisibles : 0,9 px d'épaississement dans l'en-tête, rien au-delà de 90 px. */
.eden-marque {
  display: block;
  width: auto;
  height: 100%;
  overflow: visible;
  /* doublure : le <symbol> porte déjà stroke-width="var(--eden-trait, 0)", mais
     si un moteur refusait la variable dans un attribut de présentation, la
     valeur retomberait sur celle héritée d'ici plutôt que sur 1. */
  stroke-width: var(--eden-trait, 0);
}

/* — Signature centrée : la marque, puis le nom sur deux lignes — */
.brand {
  display: grid;
  justify-items: center;
  line-height: 1.2;
  position: relative;
  text-align: center;
}

/* L'emblème coiffe la signature sans jamais toucher le filet du rang : 26 + 3 +
   deux lignes à 17,3 = 64 px dans un rang de 74. Il descend sous les 40 px de la
   charte, d'où l'épaississement à 0,9 px pour qu'il ne vire pas au gris. */
.brand-mark {
  height: 26px;
  margin-bottom: 3px;
  --eden-trait: 0.9;
  transition: color 0.5s var(--ease-out);
}

/* Sur le hero sombre : trait ivoire, feuillage dans le vert clair de la charte
   (AA sur forêt). Le feuillage passe par une propriété personnalisée, qui ne
   sait pas s'interpoler : il bascule net là où le trait fond en 0,5 s. À 26 px,
   les deux teintes changeant dans le même sens, la bascule ne se voit pas. */
.brand-mark { color: var(--ivoire); --eden-feuille: var(--vert-clair); }

.brand-name {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivoire);
  transition: color 0.5s var(--ease-out);
}

.brand-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ivoire-82);
  transition: color 0.5s var(--ease-out);
}

/* — Rang 2 : navigation — */
.header-nav .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
}

.main-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); }

.main-nav > a {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ivoire-96);
  position: relative;
  padding: 0.45em 0;
  transition: color 0.4s var(--ease-out);
}

.main-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--r-pilule);
  background: var(--vert-clair);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-out);
}

.main-nav > a:hover::after,
.main-nav > a.is-current::after,
.main-nav > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.main-nav > a.is-current,
.main-nav > a[aria-current="page"] { color: var(--vert-clair); }

.main-nav[data-spy] > a[aria-current="page"] { color: var(--ivoire-96); }
.site-header.is-solid .main-nav[data-spy] > a[aria-current="page"] { color: var(--encre-88); }
.main-nav[data-spy] > a[aria-current="page"]::after { transform: scaleX(0); }
.main-nav[data-spy] > a[aria-current="page"]:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.main-nav .nav-cta {
  border: 1.5px solid var(--ivoire-56);
  border-radius: var(--r-pilule);
  padding: 0.75em 1.7em;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease-out), border-color 0.5s var(--ease-out);
}

.main-nav .nav-cta::after { display: none; }

.main-nav .nav-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  border-radius: var(--r-cercle);
  background: var(--vert-fonce);
  transform: scale(0);
  transition: transform 0.5s var(--ease-out);
}

.main-nav .nav-cta:hover { color: var(--ivoire); border-color: var(--vert-fonce); }
.main-nav .nav-cta:hover::before { transform: scale(1); }

/* Jauge de lecture. Elle est rentrée du rayon des coins du header : posée à
   `left: 0`, elle dépasserait de l'arrondi par les deux bouts. `width: auto`
   parce que la paire left/right pilote désormais la largeur — la jauge se
   remplit toujours par `scaleX` depuis son bord gauche. */
.scroll-progress {
  position: absolute;
  left: var(--r-lg);
  right: var(--r-lg);
  bottom: 2px;
  height: 3px;
  width: auto;
  border-radius: var(--r-pilule);
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--vert-clair), var(--vert));
  opacity: 0;
  transition: opacity 0.4s;
}

.site-header.is-solid .scroll-progress { opacity: 1; }

/* — Header au scroll —
   Coins bas arrondis : la barre devient une tuile posée sur la page plutôt
   qu'un bandeau qui la coupe. Le filet d'1 px qui la soulignait de bord à bord
   passe en ombre douce — un trait droit sous un coin rond se voit tout de suite.
   Pas d'`overflow: hidden` ici : `backdrop-filter` fait déjà de l'en-tête le
   bloc conteneur de ses descendants fixes, et le menu plein écran en dépend. */
.site-header.is-solid {
  background: rgba(250, 250, 248, 0.93);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 14px 34px -26px rgba(22, 27, 20, 0.55);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.site-header.is-solid .header-top { border-bottom-color: var(--encre-12); }
.site-header.is-solid .brand-mark { color: var(--foret); --eden-feuille: var(--vert); }
.site-header.is-solid .brand-name { color: var(--encre); }
.site-header.is-solid .brand-sub { color: var(--vert-txt); }
.site-header.is-solid .header-phone { color: var(--encre); }
.site-header.is-solid .header-phone:hover { color: var(--vert-txt); }
.site-header.is-solid .icon-btn { border-color: var(--encre-24); color: var(--encre); }
.site-header.is-solid .icon-btn:hover { color: var(--ivoire); border-color: var(--vert); }
.site-header.is-solid .main-nav > a { color: var(--encre-88); }
.site-header.is-solid .main-nav > a::after { background: var(--vert); }
.site-header.is-solid .main-nav > a.is-current,
.site-header.is-solid .main-nav > a[aria-current="page"] { color: var(--vert-txt); }
.site-header.is-solid .nav-cta { border-color: var(--encre-24); }


/* — Pages sans hero (réservation, mentions légales, confidentialité) —
   Pas de photo sombre sous le header, donc pas de header transparent : il
   prend d'emblée l'apparence « au scroll » des autres pages. Sans cela la
   signature et le téléphone, dessinés en ivoire pour le hero, disparaissent
   sur le blanc. `.scroll-progress` est déjà couvert plus haut par `.is-solid`. */
.resa-page .site-header ,
.legal-page .site-header {
  background: rgba(250, 250, 248, 0.93);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 14px 34px -26px rgba(22, 27, 20, 0.55);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.resa-page .site-header .header-top ,
.legal-page .site-header .header-top { border-bottom-color: var(--encre-12); }
.resa-page .site-header .brand-mark ,
.legal-page .site-header .brand-mark { color: var(--foret); --eden-feuille: var(--vert); }
.resa-page .site-header .brand-name ,
.legal-page .site-header .brand-name { color: var(--encre); }
.resa-page .site-header .brand-sub ,
.legal-page .site-header .brand-sub { color: var(--vert-txt); }
.resa-page .site-header .header-phone ,
.legal-page .site-header .header-phone { color: var(--encre); }
.resa-page .site-header .header-phone:hover ,
.legal-page .site-header .header-phone:hover { color: var(--vert-txt); }
.resa-page .site-header .icon-btn ,
.legal-page .site-header .icon-btn { border-color: var(--encre-24); color: var(--encre); }
.resa-page .site-header .icon-btn:hover ,
.legal-page .site-header .icon-btn:hover { color: var(--ivoire); border-color: var(--vert); }
.resa-page .site-header .main-nav > a ,
.legal-page .site-header .main-nav > a { color: var(--encre-88); }
.resa-page .site-header .main-nav > a::after ,
.legal-page .site-header .main-nav > a::after { background: var(--vert); }
.resa-page .site-header .main-nav > a[aria-current="page"] ,
.legal-page .site-header .main-nav > a[aria-current="page"] { color: var(--vert-txt); }
.resa-page .site-header .nav-cta ,
.legal-page .site-header .nav-cta { border-color: var(--encre-24); }

/* Burger */
.nav-toggle {
  display: none;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 120;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2.5px;
  border-radius: var(--r-pilule);
  background: var(--ivoire);
  margin: 5.5px 0;
  transition: transform 0.45s var(--ease-out), opacity 0.3s, background-color 0.5s;
}

.site-header.is-solid .nav-toggle span,
.site-header.nav-open .nav-toggle span { background: var(--encre); }

.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Bloc réseaux + téléphone repris dans le menu plein écran */
.nav-extra { display: none; }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .header-top .container { grid-template-columns: 1fr; justify-items: center; height: 74px; }
  .header-social, .header-phone { display: none; }
  /* le rang de nav ne prend plus de place, mais reste dans le flux :
     c'est lui qui porte le menu plein écran */
  .header-nav, .header-nav .container { height: 0; padding: 0; overflow: visible; }

  /* Menu plein écran. Il est centré par des marges auto, pas par
     `justify-content: center` : centré, un contenu plus haut que le menu
     déborde des DEUX côtés, et le débord du haut passe avant l'origine du
     défilement — « Accueil » devenait alors inatteignable dès que l'écran
     était court (tout téléphone hors iPhone récent, ou l'écran en paysage).
     La flexbox ne donne aux marges auto que l'espace libre positif : elles
     retombent à zéro quand le contenu déborde, le menu se cale en haut et
     tout redevient accessible en défilant.

     `100dvh` et non la seule paire `top/bottom` : sur mobile la barre
     d'outils du navigateur mange la hauteur, et le viewport dynamique est
     le seul à suivre son escamotage. Les navigateurs qui l'ignorent
     retombent sur `inset: 0`. */
  .main-nav {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: var(--blanc);
    background-repeat: no-repeat;
    background-position: calc(100% + 14vmax) -16vmax, -20vmax calc(100% + 10vmax);
    background-size: 58vmax 58vmax, 46vmax 46vmax;
    background-image:
      radial-gradient(circle closest-side, rgba(116, 150, 61, 0.18), rgba(116, 150, 61, 0.18) 99%, transparent),
      radial-gradient(circle closest-side, rgba(143, 178, 92, 0.2), rgba(143, 178, 92, 0.2) 99%, transparent);
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(0.45rem, 1.7vh, 1.5rem);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.75s var(--ease-out), visibility 0.75s;
    z-index: 110;
    /* le rang 1 du header (74 px) garde la signature lisible par-dessus */
    padding: calc(74px + clamp(0.4rem, 2.4vh, 1.5rem)) 1.5rem
             calc(clamp(1rem, 3vh, 3rem) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav > a:first-child { margin-top: auto; }

  /* Bandeau sous la signature. Sur un écran court — ou en paysage — le menu
     défile, et les liens passaient alors à travers « Domaine d'Éden », qui le
     surplombe (z-index 120 contre 110). Ce bandeau fixe, lui, ne défile pas :
     il reprend exactement le fond du menu, donc le texte disparaît dessous au
     lieu de s'y superposer. `background-size` en unités de viewport recale le
     dégradé sur la même boîte que celle du menu — sans quoi il serait redessiné
     dans les 74 px du bandeau et laisserait une couture. */
  .main-nav::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 74px;
    background-color: var(--blanc);
    background-repeat: no-repeat;
    background-position: calc(100vw + 14vmax) -16vmax, -20vmax calc(100dvh + 10vmax);
    background-size: 58vmax 58vmax, 46vmax 46vmax;
    background-image:
      radial-gradient(circle closest-side, rgba(116, 150, 61, 0.18), rgba(116, 150, 61, 0.18) 99%, transparent),
      radial-gradient(circle closest-side, rgba(143, 178, 92, 0.2), rgba(143, 178, 92, 0.2) 99%, transparent);
    z-index: 1;
    pointer-events: none;
  }
  .nav-open .main-nav { clip-path: inset(0 0 0 0); visibility: visible; }
  .main-nav > a {
    color: var(--encre) !important;
    border-radius: var(--r-pilule);
    padding-inline: 1.2rem;
    font-family: var(--serif);
    /* `flex: none` : sans lui les liens sont comprimés dès que le menu
       déborde, et le cadre du bouton « Réserver » se retrouve tranché. */
    flex: none;
    font-size: clamp(1.15rem, 3.9vh, 1.75rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: none;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms + 180ms);
  }
  .nav-open .main-nav > a { opacity: 1; transform: none; }
  /* la signature reste visible par-dessus le menu plein écran */
  .nav-open .brand { z-index: 120; }
  .nav-open .brand-mark { color: var(--foret); --eden-feuille: var(--vert); }
  .nav-open .brand-name { color: var(--encre); }
  .nav-open .brand-sub { color: var(--vert-txt); }
  .main-nav .nav-cta {
    font-family: var(--sans);
    font-size: 0.78rem !important;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-color: var(--encre-24);
    margin-top: clamp(0.3rem, 1.4vh, 0.6rem);
  }

  .nav-extra {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.7rem, 2vh, 1.2rem);
    margin-top: clamp(0.9rem, 2.8vh, 2.2rem);
    /* pendant du `margin-top: auto` du premier lien : ensemble ils centrent
       le menu tant qu'il tient, et s'effacent dès qu'il déborde */
    margin-bottom: auto;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out) 0.55s, transform 0.6s var(--ease-out) 0.55s;
  }
  .nav-open .nav-extra { opacity: 1; transform: none; }
  .nav-extra .header-phone {
    display: inline-flex;
    color: var(--encre);
    font-size: clamp(1.05rem, 3vh, 1.35rem);
  }
  .nav-extra .header-social { display: flex; }
  .nav-extra .icon-btn { border-color: var(--encre-24); color: var(--encre); }
  .nav-extra .icon-btn:hover { color: var(--ivoire); border-color: var(--vert); }
}

/* ---------- Hero ---------- */

/* Le hero reste plein cadre — ses `sizes="100vw"` en dépendent — mais ses deux
   coins bas s'arrondissent largement : la photo devient une grande tuile posée
   sur la page, et la section suivante remonte dessous. `overflow: hidden` était
   déjà là, c'est lui qui découpe le diaporama. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ivoire);
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

/* Les disques du hero se glissent entre la photo (z-index -1) et le texte :
   posés après `.hero-media` dans le flux, ils passent au-dessus de son voile
   tout en restant sous la signature. */
.hero .disques { z-index: -1; }
.hero-inner { position: relative; z-index: 1; }

/* — Diaporama du hero : fondu enchaîné + dérive lente sur la vue active — */

.hero-media { position: absolute; inset: -6% 0; z-index: -1; }

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.7s var(--ease-soft);
  will-change: opacity;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.06);
}

/* la vue affichée dérive doucement, les autres attendent, immobiles */
.hero-slide.is-active img { animation: heroDrift 9.5s linear forwards; }

@keyframes heroDrift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.085) translate3d(-1%, -0.8%, 0); }
}

/* première arrivée : le voile d'ouverture se lève sur une image qui se pose */
.is-loaded .hero-slide.is-active:first-child img { animation: heroIn 2.6s var(--ease-out) forwards, heroDrift 9.5s linear 2.6s forwards; }

@keyframes heroIn {
  from { transform: scale(1.14); }
  to   { transform: scale(1.03); }
}

/* Repères de lecture du diaporama */
.hero-dots {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.25rem);
  bottom: 3.2rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  --in: 1250ms;
}

/* Les repères du diaporama : des pastilles rondes qui s'étirent en pilule sur
   la vue courante. La cible tactile fait 44 px (le bouton), le dessin 9. */
.hero-dots button {
  width: 1.4rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  display: block;
  border-radius: var(--r-pilule);
}

.hero-dots button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pilule);
  background: var(--ivoire-56);
  transition: background-color 0.5s var(--ease-out), width 0.45s var(--ease-out);
}

.hero-dots button:hover::after { background: var(--ivoire); }
.hero-dots button[aria-current="true"]::after { background: var(--vert-clair); width: 1.4rem; }

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Le voile a été redensifié : la signature et l'eyebrow du hero tombaient à
     2,7:1 sur les parties claires de la façade (mesuré au pixel, capture à
     l'encre transparente). Il vire aussi au vert profond plutôt qu'au gris —
     une seule famille de teintes sur tout le site. */
  background:
    radial-gradient(ellipse 68% 58% at 50% 50%, rgba(20, 30, 10, 0.6) 0%, rgba(20, 30, 10, 0) 74%),
    linear-gradient(180deg, rgba(20, 30, 10, 0.72) 0%, rgba(20, 30, 10, 0.4) 40%, rgba(20, 30, 10, 0.86) 100%);
}

.hero-inner {
  padding: 8rem var(--gutter) 7rem;
  max-width: 64rem;
  text-shadow: 0 2px 32px rgba(10, 16, 8, 0.5);
}

.hero .eyebrow { justify-content: center; }
.hero .eyebrow::after { content: ""; width: 3rem; height: 1px; background: linear-gradient(90deg, var(--vert-clair), transparent); flex: none; }

.hero h1 { color: var(--ivoire); letter-spacing: -0.005em; }

.hero-rule {
  width: 0;
  height: 3px;
  border-radius: var(--r-pilule);
  margin: 2.4rem auto 0;
  background: linear-gradient(90deg, transparent, var(--vert-clair), transparent);
  transition: width 1.4s var(--ease-out) 0.9s;
}

.is-loaded .hero-rule { width: min(340px, 60%); }

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  color: var(--ivoire-96);
  margin-top: 1.6rem;
}

.hero-actions {
  margin-top: 3.2rem;
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Cascade d'entrée du hero */
.hero-inner > *, .hero-scroll, .hero-dots {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--in, 0ms);
}

.is-loaded .hero-inner > *, .is-loaded .hero-scroll, .is-loaded .hero-dots { opacity: 1; transform: none; }
.hero-inner .hero-rule { opacity: 1; transform: none; }

.hero-scroll {
  position: absolute;
  bottom: 2.6rem;
  left: 50%;
  margin-left: -3rem;
  width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  color: var(--ivoire-96);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(10, 16, 8, 0.8);
  --in: 1100ms;
}

.hero-scroll::after {
  content: "";
  width: 3px;
  height: 3.6rem;
  border-radius: var(--r-pilule);
  background: linear-gradient(var(--vert-clair), transparent);
  transform-origin: 50% 0;
  animation: scrollhint 2.6s ease-in-out infinite;
}

@keyframes scrollhint {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.5); opacity: 0.45; }
}

/* ---------- Rideau d'ouverture ---------- */
/* Deux volets VERTS qui s'écartent sur le château, chacun avec son bord
   intérieur arrondi : à l'ouverture, ce n'est plus une déchirure droite mais
   deux formes pleines qui glissent hors de l'écran. Le rideau ne joue qu'à
   l'arrivée sur le site : la classe .no-curtain, posée sur <html> par le
   script de garde avant le premier paint, l'escamote sur toute navigation
   interne. Le vert du fond est --vert-profond, seul aplat vert qui porte du
   texte blanc (7,9:1) — la signature s'y pose en toutes lettres. */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
}

.no-curtain .curtain { display: none; }

/* Les deux volets. Les dégradés, dimensionnés à 200 % de chaque volet et ancrés
   sur son bord extérieur, se recomposent en un seul fond continu — d'où les
   deux disques clairs qui semblent traverser la couture centrale. */
.curtain__panel {
  position: absolute;
  top: -1px;
  bottom: -1px;
  /* 56 % et non 50,3 : les deux volets doivent se recouvrir d'au moins un rayon
     de coin, sinon leurs bords intérieurs arrondis laissent une encoche au
     centre, en haut et en bas, par où la page apparaît avant l'ouverture.
     Condition : 2·L ≥ 100 % + rayon — vérifiée à 390 comme à 1440 px. */
  width: 56%;
  background-color: var(--vert-profond);
  background-image:
    radial-gradient(ellipse 26% 30% at 20% 22%, rgba(143, 178, 92, 0.22) 97%, transparent 100%),
    radial-gradient(ellipse 34% 40% at 86% 86%, rgba(116, 150, 61, 0.3) 97%, transparent 100%),
    radial-gradient(ellipse 58% 46% at 50% 43%, rgba(116, 150, 61, 0.16), transparent 76%);
  /* 178,57 % = 100 / 56 : le fond de chaque volet fait exactement la largeur du
     viewport. Calé à gauche sur le volet gauche et à droite sur le volet droit,
     il se recompose en une seule image continue — sans quoi les disques se
     couperaient net sur la couture, les deux volets se recouvrant de 12 %. */
  background-size: 178.5714% 100%;
  background-repeat: no-repeat;
  transition: transform 1.2s var(--ease-out);
  will-change: transform;
}

/* Le bord intérieur de chaque volet est arrondi ; le bord extérieur reste droit,
   sans quoi on verrait le fond de la page dans les coins avant l'ouverture. */
.curtain__panel--l {
  left: 0;
  background-position: 0 50%;
  border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
}
.curtain__panel--r {
  right: 0;
  background-position: 100% 50%;
  border-radius: var(--r-2xl) 0 0 var(--r-2xl);
}

/* Grain : la même matière que le reste du site, le rideau passant au-dessus du
   voile global. Il est porté par le RIDEAU et non par chaque volet : ceux-ci se
   recouvrent de 12 %, et deux couches de bruit superposées y dessinaient une
   bande verticale plus claire. `::after` peint après les volets, donc dessus. */
.curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: soft-light;
  transition: opacity 0.5s ease;
}

.is-loaded .curtain::after { opacity: 0; }

/* Plus de liseré de couture : les deux volets se recouvrent désormais de 12 %,
   il en dessinerait deux, l'un et l'autre à côté du centre. C'est le médaillon
   qui tient le milieu de l'écran. */

.is-loaded .curtain__panel--l { transform: translateX(-101%); }
.is-loaded .curtain__panel--r { transform: translateX(101%); }

/* Le contenu : le dessin, la signature, le filet */
.curtain__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
  text-align: center;
  transition: opacity 0.4s ease, transform 0.9s var(--ease-out);
}

/* Le médaillon : un grand cercle clair posé derrière la marque, qui s'ouvre
   avant elle. C'est lui qui donne au rideau la forme du site — et il vit dans
   `.curtain__inner`, donc il s'efface avec elle sans rien ajouter au balisage. */
.curtain__inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: clamp(270px, 46vw, 480px);
  aspect-ratio: 1;
  border-radius: var(--r-cercle);
  background: radial-gradient(circle at 50% 44%, rgba(215, 229, 184, 0.22), rgba(215, 229, 184, 0.08) 62%, transparent 71%);
  box-shadow: inset 0 0 0 2px rgba(215, 229, 184, 0.34);
  transform: scale(0.72);
  opacity: 0;
  animation: cd-medaillon 1.1s var(--ease-out) forwards;
}

@keyframes cd-medaillon { to { transform: scale(1); opacity: 1; } }

.is-loaded .curtain__inner { opacity: 0; transform: translateY(-12px); }

/* Le château se lève à l'ouverture : un front horizontal remonte du sol jusqu'à
   la pointe des tourelles, l'arbre poussant avec lui.

   Le dessin est fait d'aplats, pas de tracés — il n'y a donc plus de longueur de
   trait à dérouler comme dans la version au trait. L'animation porte sur le
   `clip-path` du <svg> hôte, ce qui laisse la marque partagée avec l'en-tête
   parfaitement intacte : rien à dupliquer, rien à animer dans l'arbre du <use>.
   Le liseré optique est coupé ici (--eden-trait: 0) : à plus de 200 px, le trait
   du dessin se suffit, et l'épaissir boucherait les fenêtres. */
.curtain__draw {
  width: clamp(160px, 18vw, 224px);
  height: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--ivoire);
  --eden-feuille: var(--vert-tendre);
  --eden-trait: 0;
  position: relative;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  animation: cd-lever 1.15s var(--ease-soft) 60ms forwards,
             cd-parait 0.4s ease 60ms forwards;
}

@keyframes cd-lever { to { clip-path: inset(0 0 0 0); } }
@keyframes cd-parait { to { opacity: 1; } }

.curtain__mark {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ivoire);
  position: relative;
  opacity: 0;
  animation: curtain-in 0.55s var(--ease-out) 0.5s forwards;
}

.curtain__rule {
  width: clamp(88px, 12vw, 130px);
  height: 3px;
  border-radius: var(--r-pilule);
  position: relative;
  margin-block: clamp(0.95rem, 2vw, 1.35rem);
  background: linear-gradient(90deg, transparent, var(--vert-tendre), transparent);
  transform: scaleX(0);
  animation: curtain-rule 0.6s var(--ease-out) 0.56s forwards;
}

/* --ivoire-56 tombait à 3,7:1 sur le vert du rideau. Le sous-titre passe à
   l'ivoire à 82 %, qui tient 4,66:1 jusque sur la tache la plus claire du fond
   (le vert tendre, lui, y descendrait à 4,04:1). */
.curtain__sub {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivoire-82);
  position: relative;
  opacity: 0;
  animation: curtain-in 0.45s var(--ease-out) 0.68s forwards;
}

@keyframes curtain-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes curtain-rule { to { transform: scaleX(1); } }

/* une fois écarté, le rideau ne doit plus rien intercepter */
.is-loaded .curtain {
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 1.35s;
}

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

.section { padding-block: var(--section-pad); position: relative; overflow: hidden; }

/* Les bandes de couleur deviennent de grandes tuiles aux quatre coins arrondis.
   Elles restent pleine largeur : arrondir des coins ne change pas la largeur du
   contenu, donc aucun `sizes` d'image n'est à remesurer. */
.section--lin, .section--sable, .section--dark { border-radius: var(--r-2xl); }

/* Deux bandes de même teinte qui se suivent (le cadre puis le déroulé, sur
   evenements.html) : on soude la couture, sinon le fond de page apparaît en
   accolade entre les deux. Sans `:has()`, il ne reste qu'une encoche de coin. */
.section--dark + .section--dark { border-start-start-radius: 0; border-start-end-radius: 0; }
.section--dark:has(+ .section--dark) { border-end-start-radius: 0; border-end-end-radius: 0; }
.section--lin + .section--lin { border-start-start-radius: 0; border-start-end-radius: 0; }
.section--lin:has(+ .section--lin) { border-end-start-radius: 0; border-end-end-radius: 0; }

.section--lin {
  background: var(--blanc-vert);
  background-image: radial-gradient(ellipse 60% 55% at 85% 8%, rgba(116, 150, 61, 0.07), transparent 62%);
}
.section--sable { background: var(--gris-vert); }

/* Crème réchauffée : évite les longues plages d'aplat mort sans toucher aux contrastes */
.section--warm {
  background-image:
    radial-gradient(ellipse 55% 45% at 12% 4%, rgba(116, 150, 61, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 50% at 92% 96%, rgba(92, 122, 46, 0.055), transparent 62%);
}

.section--dark {
  background: var(--foret);
  color: var(--ivoire-82);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(116, 150, 61, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(157, 186, 106, 0.12), transparent 60%);
}

.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ivoire); }
.section--dark .lede { color: var(--ivoire-82); }

.section-head { max-width: 48rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); position: relative; z-index: 1; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Filet ornemental entre sections */
.rule-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  color: var(--vert);
}

.rule-orn::before, .rule-orn::after {
  content: "";
  height: 2px;
  border-radius: var(--r-pilule);
  width: clamp(3rem, 12vw, 9rem);
  background: linear-gradient(90deg, transparent, currentColor);
}

.rule-orn::after { background: linear-gradient(90deg, currentColor, transparent); }

/* Le balisage porte un « ✦ » : on le laisse en place (il est décoratif et
   aria-hidden) mais on le rend en point plein — le motif du site est le rond. */
.rule-orn span {
  font-size: 0;
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--r-cercle);
  background: currentColor;
}

/* ---------- Bandeau défilant ---------- */

/* Une grande pilule verte plutôt qu'un bandeau qui coupe la page en deux.
   Elle rentre des gouttières : c'est ce qui rend l'arrondi visible. Le vert
   reste --vert-fonce — le texte défilant est en Cormorant 18 à 26 px, mais il
   passe vite et gagne à garder les 4,8:1 d'un corps de texte. */
.marquee {
  background: var(--vert-fonce);
  /* Uniquement des accents SOMBRES : --vert-fonce donne tout juste ses 4,82:1
     à l'ivoire, et le texte défilant descend à 18,4 px sur téléphone — donc
     petit texte au sens AA. Toute touche plus claire le ferait passer dessous. */
  background-image:
    radial-gradient(ellipse 65% 65% at 6% 50%, rgba(64, 87, 30, 0.55), transparent 72%),
    radial-gradient(ellipse 65% 65% at 94% 50%, rgba(64, 87, 30, 0.55), transparent 72%);
  color: var(--ivoire);
  padding: 1.35rem 0;
  margin-inline: var(--gutter);
  border-radius: var(--r-pilule);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}

.marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.12;
  z-index: -1;
}

.marquee__track { display: inline-flex; animation: marquee 42s linear infinite; }

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: inline-flex;
  align-items: center;
  gap: 3.2rem;
  padding-right: 3.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: 0.01em;
}

/* Le séparateur passe de l'étoile au point : le motif du site est le rond. */
.marquee__group span::before {
  content: "";
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  border-radius: var(--r-cercle);
  background: var(--vert-tendre);
  margin-right: 3.2rem;
  vertical-align: middle;
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Esprit des lieux ---------- */

.editorial {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.editorial-media { position: relative; padding-bottom: 5rem; }

/* Le rayon se pose sur l'<img>, pas sur le <picture> : celui-ci est en
   `display: contents` et n'a pas de boîte à découper (cf. CLAUDE.md). */
.editorial-media .photo-main {
  width: 88%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-2xl);
}

/* Le médaillon : la seconde vue devient un cercle parfait. Sa LARGEUR ne
   change pas (54 % de la colonne média) — seule sa hauteur suit —, donc les
   `sizes` du balisage restent justes. */
.editorial-media .photo-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid var(--blanc);
  border-radius: var(--r-cercle);
}

.section--lin .editorial-media .photo-inset { border-color: var(--blanc-vert); }

/* L'équerre du coin haut-gauche devient un anneau : le même rôle de repère,
   dans le vocabulaire rond du site. */
.editorial-media::before {
  content: "";
  position: absolute;
  left: -2.2rem;
  top: -2.2rem;
  width: clamp(120px, 20vw, 210px);
  aspect-ratio: 1;
  height: auto;
  border: clamp(8px, 1.6vw, 16px) solid var(--disque-pale);
  border-radius: var(--r-cercle);
  pointer-events: none;
  z-index: -1;   /* sous la photo : c'est un repère, pas un cadre posé dessus */
}

.signature {
  margin-top: 2.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--vert-fonce);
}

.signature small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sauge);
  margin-top: 0.5rem;
}

/* ---------- Citation hôtes ---------- */
/* Le moment vert de l'accueil : la parole des hôtes se pose sur un grand aplat
   arrondi, deux disques plus clairs remontant derrière elle. C'est le seul
   endroit de la page où du texte courant s'écrit en blanc sur du vert, d'où le
   --vert-profond (ivoire plein 7,9:1, ivoire à 82 % 5,97:1). Le vert de marque
   y ferait 3,3:1 — bon pour la citation, illisible pour le crédit dessous. */

.quote-band {
  text-align: center;
  overflow: hidden;
  background: none;
  background-image: none;
  padding-block: clamp(2.2rem, 5vw, 4rem);
  border-radius: 0;
}

.quote-band .container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.4rem, 8vw, 6.5rem) clamp(1.8rem, 6vw, 5rem);
  border-radius: var(--r-2xl);
  background-color: var(--vert-profond);
  background-image:
    radial-gradient(ellipse 46% 46% at 14% 6%, rgba(143, 178, 92, 0.12), transparent 62%),
    radial-gradient(ellipse 52% 52% at 88% 100%, rgba(116, 150, 61, 0.16), transparent 64%);
}

/* L'eyebrow est le seul enfant du panneau resté statique : sans ce rappel,
   il passerait sous les disques, qui sont positionnés. */
/* Les disques du panneau sont francs — --vert et --vert-doux pleins —, mais le
   texte ne doit jamais s'y poser : l'ivoire n'y tient que 3,3:1 sur l'un et
   2,4:1 sur l'autre, et le crédit sous la citation est en petit corps.
   Ce voile de --vert-profond passe AU-DESSUS des disques (il vient après eux
   dans l'ordre de peinture) et SOUS le texte (z-index 1) : la zone de lecture
   retrouve le fond porteur — ivoire à 82 % mesuré à 4,86:1 — et les coins
   gardent le vert vif. */
.quote-band .container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 86% at 50% 50%,
              rgba(64, 87, 30, 0.94) 0%, rgba(64, 87, 30, 0.9) 62%, rgba(64, 87, 30, 0) 100%);
}

.quote-band .eyebrow { color: var(--vert-tendre); position: relative; z-index: 1; }
.quote-band .eyebrow::before { background: linear-gradient(90deg, transparent, var(--vert-tendre)); }
.quote-band .eyebrow--center::after { background: linear-gradient(90deg, var(--vert-tendre), transparent); }

.quote-band blockquote {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  max-width: 46rem;
  margin-inline: auto;
  color: var(--ivoire);
  position: relative;
  z-index: 1;
}

.quote-band blockquote .em-italic { color: var(--vert-tendre); }

.quote-band .quote-mark {
  position: absolute;
  top: -0.05em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(9rem, 20vw, 17rem);
  line-height: 1;
  color: var(--vert-tendre);
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;   /* au-dessus du voile, comme le texte : sinon il s'éteindrait */
}

.quote-band cite {
  display: block;
  margin-top: 2.2rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivoire-82);
  line-height: 2;
  position: relative;
  z-index: 1;
}

.quote-band cite b { color: var(--vert-tendre); font-weight: 500; }

/* ---------- Chambres ---------- */

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  row-gap: clamp(3rem, 5vw, 4.2rem);
  position: relative;
  z-index: 1;
}

.room-card { display: block; color: var(--encre); }

/* Le rayon est porté par la <figure>, pas par le <picture> : celui-ci est en
   `display: contents`. C'est la règle pour toutes les photos du site. */
.room-card figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--gris-vert);
  border-radius: var(--r-lg);
}

.room-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.7s var(--ease-out);
}

.room-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(12, 18, 10, 0.68));
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.room-card .room-hover {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.3rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivoire);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.room-card .room-hover::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: var(--r-pilule);
  background: var(--vert-clair);
}

.room-card img.focus-suite { object-position: 5% 30%; }
.room-card img.focus-nuit { object-position: 62% 55%; }
.room-card img.focus-songes { object-position: 50% 15%; }

.room-card:hover img, .room-card:focus-visible img { transform: scale(1.07); }
.room-card:hover figure::after, .room-card:focus-visible figure::after { opacity: 1; }
.room-card:hover .room-hover, .room-card:focus-visible .room-hover { opacity: 1; transform: none; }

.room-card h3 { margin-top: 1.5rem; transition: color 0.4s; }
.room-card:hover h3 { color: var(--vert-txt); }

.room-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sauge);
  font-size: 1.15rem;
}

.room-meta {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-72);
  line-height: 1.75;
}

.room-price {
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--vert-txt);
}

.rooms-cta {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

/* — La table d'hôtes, sixième case de la grille —
   Un service et non une chambre : l'aplat forêt la sépare des cinq cartes
   photo sans introduire de teinte étrangère (c'est le fond de l'encart qu'elle
   remplace). Pas de lien, donc aucun état de survol — la carte se lit, elle
   ne se clique pas. Elle occupe la même case que les autres, d'où la hauteur
   alignée sur ses voisines et le texte centré verticalement. */
/* Elle passe du forêt au vert profond : c'est la même famille que les disques,
   et elle porte du texte courant en ivoire (5,97:1 à 82 %, 7,9:1 en plein).
   Le vert-clair de l'eyebrow, à 3,7:1 sur ce fond, n'y tiendrait pas à 11 px —
   il descend au vert tendre (5,33:1). */
.room-card--service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 3.4vw, 2.9rem);
  background-color: var(--vert-profond);
  background-image:
    radial-gradient(ellipse 55% 55% at 100% 0%, rgba(143, 178, 92, 0.12), transparent 62%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(116, 150, 61, 0.16), transparent 64%);
  color: var(--ivoire-82);
  border-radius: var(--r-lg);
}

.room-card--service .eyebrow { color: var(--vert-tendre); }
.room-card--service .eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--vert-tendre));
}

.room-card--service h3 {
  margin-top: 1.1rem;
  color: var(--ivoire);
}

.service-text {
  margin-top: 1.2rem;
  font-size: 0.94rem;
  line-height: 1.85;
}

.room-card--service .room-price {
  margin-top: 1.5rem;
  color: var(--vert-tendre);
}

/* La mention du gîte 2027 vivait dans l'encart supprimé : elle reste seule,
   centrée sous la grille, avant les boutons. */
.rooms-2027 {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.badge-2027 {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivoire);
  background: var(--vert-fonce);
  padding: 0.8em 1.6em;
  border-radius: var(--r-pilule);
}

/* La pastille du badge : un vrai rond plein, pas une étoile. */
.badge-2027::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: var(--r-cercle);
  background: var(--vert-tendre);
  flex: none;
}

/* ---------- Encart illustré (table d'hôtes, formule traiteur) ----------
   `.aside-band` n'avait jusqu'ici aucune règle : la photo et le texte se
   posaient nus l'un sous l'autre. C'est désormais une grande tuile ronde —
   photo en tête, panneau vert dessous.

   Elle reste sur UNE colonne, volontairement : les `sizes` du balisage
   déclarent 1 140 px au desktop, c'est-à-dire toute la largeur du conteneur.
   La passer en deux colonnes ferait rendre la photo à ~520 px et le navigateur
   téléchargerait deux fois trop d'octets sans qu'on touche au HTML. */
.aside-band {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background-color: var(--vert-profond);
  background-image:
    radial-gradient(ellipse 50% 50% at 6% 100%, rgba(143, 178, 92, 0.12), transparent 60%),
    radial-gradient(ellipse 55% 55% at 96% 40%, rgba(116, 150, 61, 0.16), transparent 62%);
  color: var(--ivoire-82);
}

.aside-band figure { margin: 0; }

.aside-band figure img {
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
  display: block;
}

.aside-band-text { padding: clamp(2rem, 4.5vw, 3.4rem); }
.aside-band-text h3 { color: var(--ivoire); }
.aside-band-text .eyebrow { color: var(--vert-tendre); }
.aside-band-text .eyebrow::before { background: linear-gradient(90deg, transparent, var(--vert-tendre)); }

/* Le badge s'inverse : sur un fond déjà vert, un badge --vert-fonce se
   fondrait dedans. Encre verte profonde sur vert tendre : 7,9:1. */
.aside-band-text .badge-2027 {
  margin-top: 1.8rem;
  background: var(--vert-tendre);
  color: var(--vert-profond);
}
.aside-band-text .badge-2027::before { background: var(--vert-profond); }

/* ---------- Événementiel ---------- */

.events-wrap {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.events-media { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-2xl); }

.events-media img { width: 100%; height: 100%; object-fit: cover; }

.events-list { margin: 2.2rem 0 2.8rem; list-style: none; display: grid; gap: 0.6rem; }

/* Les trois formats deviennent des tuiles arrondies plutôt que trois lignes
   séparées par des filets — même contenu, forme du nouveau langage. */
.events-list li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.4rem;
  border: none;
  border-radius: var(--r-pilule);
  background: rgba(253, 253, 251, 0.06);
  font-weight: 400;
  color: var(--ivoire-82);
  transition: color 0.4s, background-color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.events-list li:first-child { border-top: none; }
.events-list li:hover {
  color: var(--ivoire);
  background: rgba(253, 253, 251, 0.12);
  transform: translateX(0.5rem);
}

/* Le numéro prend sa pastille ronde. */
.events-list .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--foret);
  background: var(--vert-clair);
  font-size: 1rem;
  line-height: 1;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-cercle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.events-actions { display: flex; gap: 1.1rem; flex-wrap: wrap; }

/* ---------- Alentours ---------- */

.around-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  z-index: 1;
}

/* Trois tuiles rondes plutôt que trois colonnes soulignées d'un filet. Le
   filet vert qui s'allongeait à l'apparition reste — il est devenu la barre
   arrondie posée au-dessus de la distance. */
.around-item {
  border-top: none;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  position: relative;
  background: var(--ivoire);
  border: 1.5px solid rgba(116, 150, 61, 0.16);
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}

.around-item:hover {
  transform: translateY(-4px);
  border-color: rgba(116, 150, 61, 0.42);
  box-shadow: 0 24px 44px -32px rgba(64, 87, 30, 0.7);
}

.around-item::before {
  content: "";
  position: absolute;
  top: clamp(1.8rem, 3.2vw, 2.6rem);
  left: clamp(1.8rem, 3.2vw, 2.6rem);
  width: 0;
  height: 4px;
  border-radius: var(--r-pilule);
  background: var(--vert);
  transition: width 1.1s var(--ease-out) 0.2s;
}

.around-item.is-visible::before { width: 3.5rem; }

.around-item .dist {
  font-family: var(--serif);
  font-style: italic;
  color: var(--vert-txt);
  font-size: 1.15rem;
  margin-top: 1.4rem;
}

.around-item h3 { margin: 0.45rem 0 0.8rem; }

.around-item p { font-size: 1rem; color: var(--encre-72); max-width: 38ch; }

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

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 16vw, 235px);
  gap: 0.9rem;
  position: relative;
  z-index: 1;
}

/* Mosaïque : 4 colonnes × 4 rangées, 9 photos, remplissage exact */
.gallery figure:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery figure:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.gallery figure:nth-child(3) { grid-column: 3; grid-row: 2; }
.gallery figure:nth-child(4) { grid-column: 4; grid-row: 2; }
.gallery figure:nth-child(5) { grid-column: 1; grid-row: 3; }
.gallery figure:nth-child(6) { grid-column: 2 / 4; grid-row: 3; }
.gallery figure:nth-child(7) { grid-column: 4; grid-row: 3; }
.gallery figure:nth-child(8) { grid-column: 1 / 3; grid-row: 4; }
.gallery figure:nth-child(9) { grid-column: 3 / 5; grid-row: 4; }

.gallery figure {
  overflow: hidden;
  margin: 0;
  position: relative;
  cursor: zoom-in;
  background: var(--gris-vert);
  border-radius: var(--r-lg);
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.6s;
}

.gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(116, 150, 61, 0.34);
  opacity: 0;
  transition: opacity 0.5s;
}

/* Le réticule se pose dans une pastille ronde : le même geste que les
   boutons d'action de la visionneuse. */
.gallery figure::before {
  content: "⤢";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--r-cercle);
  background: var(--vert-profond);
  color: var(--ivoire);
  font-size: 1.35rem;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.gallery figure:hover img { transform: scale(1.07); }
.gallery figure:hover::after { opacity: 1; }
.gallery figure:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 16, 10, 0.97);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.5s;
}

.lightbox.is-open img { transform: none; opacity: 1; }

.lightbox__cap {
  position: absolute;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ivoire-82);
  font-size: 1.05rem;
}

/* Trois pastilles rondes de 46 px : même cible confortable que la visionneuse
   des chambres, et le vocabulaire du site. */
.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: var(--r-cercle);
  background: rgba(64, 87, 30, 0.6);
  backdrop-filter: blur(3px);
  color: var(--ivoire);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}

.lightbox button:hover { background: var(--vert-fonce); color: var(--ivoire); }
.lb-close { top: 1rem; right: 1.2rem; font-size: 1.8rem; }
.lb-prev { left: 0.6rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0.6rem; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) translateX(-4px); }
.lb-next:hover { transform: translateY(-50%) translateX(4px); }

/* ---------- Espace Soreï ---------- */

/* L'encart Soreï : une grande tuile ronde. Le liseré vertical de 3 px qui la
   marquait à gauche a disparu — un trait droit sur un coin rond se voit — et
   c'est le disque du fond qui tient désormais ce rôle. */
.sorei {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 3.5rem);
  flex-wrap: wrap;
  background: var(--blanc-vert);
  border: 1.5px solid rgba(116, 150, 61, 0.26);
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.8rem, 4vw, 3.4rem);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Deux disques francs dans le coin droit de l'encart : ils tiennent le rôle du
   liseré vertical supprimé. `z-index: 0` + le rappel sur les enfants, sans quoi
   le pseudo-élément — positionné — passerait au-dessus du texte, qui ne l'est pas. */
.sorei::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  width: clamp(150px, 30vw, 340px);
  aspect-ratio: 1;
  translate: 32% 40%;
  border-radius: var(--r-cercle);
  background: var(--disque-doux);
  pointer-events: none;
}

.sorei::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: clamp(120px, 18vw, 200px);
  aspect-ratio: 1;
  translate: -34% 40%;
  border-radius: var(--r-cercle);
  background: var(--disque-pale);
  pointer-events: none;
}

.sorei > * { position: relative; z-index: 1; }

.sorei .eyebrow { color: var(--vert-txt); }
.sorei h3 { color: var(--vert-txt); }
.sorei p { max-width: 56ch; color: var(--encre-72); }
.sorei .btn { flex: none; }

/* petite flèche sortante sur les liens vers un autre site */
.btn--out::after {
  content: "↗";
  font-size: 0.95em;
  margin-left: 0.7em;
  vertical-align: baseline;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  position: relative;
  z-index: 1;
}

.contact-rows { list-style: none; margin-top: 2.6rem; }

.contact-rows { display: grid; gap: 0.5rem; }

/* Chaque coordonnée devient une tuile ronde qui s'allume au survol. */
.contact-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  background: rgba(253, 253, 251, 0.55);
  transition: border-color 0.4s, background-color 0.4s;
}

.contact-rows li:hover { border-color: rgba(116, 150, 61, 0.42); background: var(--ivoire); }

.contact-rows .label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sauge);
  flex: none;
}

.contact-rows .value { text-align: right; font-weight: 300; color: var(--encre); }

.contact-rows a.value {
  background-image: linear-gradient(var(--vert), var(--vert));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s var(--ease-out), color 0.4s;
}

.contact-rows a.value:hover { color: var(--vert-txt); background-size: 0 1px; background-position: 100% 100%; }

.contact-media { overflow: hidden; border-radius: var(--r-2xl); }
.contact-media img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }

/* ---------- CTA final ---------- */

.final-cta {
  position: relative;
  isolation: isolate;
  text-align: center;
  color: var(--ivoire);
  padding-block: clamp(6.5rem, 13vw, 11rem);
  overflow: hidden;
  border-radius: var(--r-2xl);
}

.final-cta .bg { position: absolute; inset: -8% 0; z-index: -1; }

.final-cta .bg img { width: 100%; height: 100%; object-fit: cover; }

/* Le voile passe du gris-encre au vert profond : la photo garde sa lumière,
   mais la page reste dans une seule famille de teintes. Le titre en ivoire
   plein y tient largement (au-delà de 7:1 dans les zones claires). */
.final-cta .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24, 34, 12, 0.9), rgba(18, 26, 9, 0.84)),
    radial-gradient(ellipse 55% 55% at 50% 46%, rgba(116, 150, 61, 0.24), transparent 66%);
}

/* Les disques de la section passent au-dessus du voile mais sous le texte. */
.final-cta .disques { z-index: -1; }

.final-cta h2 { color: var(--ivoire); max-width: 22ch; margin-inline: auto; }

.final-cta .lede { color: var(--ivoire-82); margin-top: 1.4rem; }

.final-cta .btn { margin-top: 3rem; }

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

/* Le pied de page ferme la colonne par deux grands coins ronds, et il est vert
   plutôt qu'encre : c'est la dernière image qu'on emporte du site. --vert-profond
   est la seule teinte de la famille qui porte tout le texte du pied (liens à
   82 % : 5,97:1). Il lui faut son `overflow: hidden` — contrairement aux
   sections, il n'en avait pas, et ses disques sortiraient de la page. */
.site-footer {
  background-color: var(--vert-profond);
  /* Plafonds mesurés : au-delà de 0,16 (--vert) et 0,12 (--vert-doux), le fond
     s'éclaircit assez pour faire passer les intertitres en vert tendre sous
     4,5:1. Le vert franc, sur cette page, est dans les disques — pas sous le texte. */
  background-image:
    radial-gradient(ellipse 46% 46% at 88% 4%, rgba(116, 150, 61, 0.16), transparent 62%),
    radial-gradient(ellipse 40% 40% at 6% 92%, rgba(143, 178, 92, 0.12), transparent 60%);
  color: var(--ivoire-82);
  padding: clamp(5rem, 9vw, 7rem) 0 2.5rem;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}

.site-footer .container { position: relative; z-index: 1; }

/* Les disques du pied sont plus discrets que partout ailleurs, et c'est mesuré :
   le pied porte du petit texte sur toute sa largeur, et les deux disques s'y
   recouvrent sous la ligne de crédits — là où l'ivoire à 82 % tombait à 4,42:1
   sur téléphone. À 0,1 / 0,08, le pire cas relevé remonte à 4,8:1. */
.site-footer .disque--vert { background: rgba(116, 150, 61, 0.1); }
.site-footer .disque--doux { background: rgba(143, 178, 92, 0.08); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--ivoire-16);
}

/* Sur le vert du pied, --vert-clair tombe à 3,7:1 : tout ce qui était en
   vert clair y passe au vert tendre (5,33:1). Le liseré optique de la marque
   ne bouge pas — c'est une compensation de taille, pas une couleur. */
.footer-mark {
  height: 30px;
  margin-bottom: 1.1rem;
  color: var(--ivoire);
  --eden-feuille: var(--vert-tendre);
  --eden-trait: 0.85;
}

.footer-brand .brand-name { color: var(--ivoire); }
.footer-brand .brand-sub { color: var(--vert-tendre); }

.footer-brand p { margin-top: 1.5rem; max-width: 34ch; font-weight: 300; }

.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vert-tendre);
  margin-bottom: 1.5rem;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 0.8rem; }

.footer-col a { color: var(--ivoire-82); transition: color 0.3s; }
.footer-col a:hover { color: var(--vert-tendre); }

.footer-social { display: inline-flex; gap: 0.6rem; }

/* Le rond des réseaux se remplit de vert tendre et rend l'encre : sur un fond
   déjà vert, un remplissage en --vert ne se détacherait pas. */
.site-footer .icon-btn:hover, .site-footer .icon-btn:focus-visible {
  color: var(--vert-profond);
  border-color: var(--vert-tendre);
}
.site-footer .icon-btn::before { background: var(--vert-tendre); }

/* --ivoire-56 passait sous AA sur le vert (3,7:1) : on remonte à 82 %, qui
   tient encore 5,2:1 au point le plus clair du fond (disque + dégradé). */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ivoire-82);
}

/* Le pied de page est sombre : les liens légaux s'y soulignent en clair,
   sinon --vert-txt (calé pour du texte sur fond blanc) y passe sous AA. */
.footer-legal a {
  color: var(--ivoire-82);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ivoire-16);
  transition: color 0.35s var(--ease-out), text-decoration-color 0.35s var(--ease-out);
}

.footer-legal a:hover {
  color: var(--ivoire);
  text-decoration-color: var(--vert-tendre);
}

/* ---------- Révélations au scroll ---------- */

[data-reveal="up"], .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="up"].is-visible, .reveal.is-visible { opacity: 1; transform: none; }

/* Volet : l'image se dévoile par le bas */
[data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }

[data-reveal="mask"] img {
  transform: scale(1.18);
  transition: transform 1.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="mask"].is-visible img { transform: scale(1); }

/* Fondu simple */
[data-reveal="fade"] { opacity: 0; transition: opacity 1.2s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal="fade"].is-visible { opacity: 1; }

/* Parallaxe douce */
[data-parallax] { will-change: transform; }

/* ==========================================================================
   Page réservation
   ========================================================================== */

.resa-page,
.legal-page { background: var(--blanc); min-height: 100vh; }

/* Des disques nets plutôt qu'un dégradé mou : deux cercles verts francs, l'un
   en haut à gauche, l'autre en bas à droite, fixés au viewport. Le
   `background-repeat: no-repeat` + une taille en `vmax` les garde ronds à tout
   format d'écran (un `radial-gradient` en pourcentage s'ovaliserait). */
.resa-page::before,
.legal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: -18vmax -20vmax, calc(100% + 16vmax) calc(100% + 14vmax);
  background-size: 62vmax 62vmax, 52vmax 52vmax;
  background-image:
    radial-gradient(circle closest-side, rgba(116, 150, 61, 0.16), rgba(116, 150, 61, 0.16) 99%, transparent),
    radial-gradient(circle closest-side, rgba(143, 178, 92, 0.18), rgba(143, 178, 92, 0.18) 99%, transparent);
}

.resa-main {
  max-width: 48rem;
  margin-inline: auto;
  /* Le header est fixe et fait deux rangs (74 + 54) : le formulaire commence
     dessous. Sous 940 px le second rang s'efface, il ne reste que 74. */
  padding: calc(128px + clamp(2.5rem, 5vw, 4rem)) var(--gutter) 6rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 940px) {
  .resa-main { padding-top: calc(74px + clamp(2rem, 5vw, 3.5rem)); }
}

.resa-intro { text-align: center; margin-bottom: 3.5rem; }

.resa-intro .lede { margin-top: 1rem; }
.resa-intro .rule-orn { margin-top: 2.4rem; }

/* Progression */
.steps-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* --encre-45 donnait 2,8:1 : sous AA pour un libellé de 8,8 px. */
  color: var(--sauge);
  transition: color 0.5s;
  flex: 1;
  max-width: 10rem;
  position: relative;
  text-align: center;
}

.step-dot + .step-dot::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: 50%;
  left: -50%;
  height: 3px;
  border-radius: var(--r-pilule);
  background: rgba(116, 150, 61, 0.2);
  z-index: 0;
}

.step-dot .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1;
  color: inherit;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: var(--r-cercle);
  background: var(--blanc);
  position: relative;
  z-index: 1;
  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

.step-dot.is-active { color: var(--vert-txt); }
.step-dot.is-active .n { background: var(--vert-fonce); color: var(--ivoire); border-color: var(--vert-fonce); }
.step-dot.is-done { color: var(--vert-fonce); }
.step-dot.is-done .n { background: var(--vert-fonce); color: var(--ivoire); border-color: var(--vert-fonce); }

/* Panneaux d'étapes */
.step-panel { display: none; }
.step-panel.is-active { display: block; animation: panelin 0.6s var(--ease-out); }

@keyframes panelin {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.field { margin-bottom: 2.3rem; }

.field > label, .field-legend {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sauge);
  margin-bottom: 0.85rem;
}

/* Les champs deviennent des pilules pleines : plus de simple filet bas. Une
   saisie sur une ligne est en `--r-pilule`, le message libre en `--r-lg` — une
   pilule de 120 px de haut ferait un stade. */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--encre);
  background: var(--ivoire);
  border: 1.5px solid rgba(116, 150, 61, 0.28);
  padding: 0.85em 1.3em;
  border-radius: var(--r-pilule);
  transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
  border-radius: var(--r-lg);
  padding: 1em 1.3em;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--vert-fonce);
  box-shadow: 0 0 0 4px rgba(116, 150, 61, 0.16);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.field .hint { font-size: 0.85rem; color: var(--encre-72); margin-top: 0.55rem; padding-inline: 1.3em; }

.field .error-msg {
  display: none;
  font-size: 0.85rem;
  color: var(--erreur);
  margin-top: 0.5rem;
  padding-inline: 1.3em;
}

.field.has-error .error-msg { display: block; }
.field.has-error input, .field.has-error select { border-color: var(--erreur); }
.field.has-error input:focus, .field.has-error select:focus { box-shadow: 0 0 0 4px rgba(158, 59, 43, 0.16); }

/* Le libellé se cale sur le retrait des champs pour que la colonne reste droite. */
.field > label, .field-legend { padding-inline: 1.3em; }

/* Cartes de choix */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.choice-card { position: relative; cursor: pointer; }

.choice-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

.choice-card .card-body {
  display: block;
  border: 1.5px solid rgba(116, 150, 61, 0.28);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.8rem;
  transition: border-color 0.4s, background-color 0.4s, transform 0.4s var(--ease-out);
  height: 100%;
  background: rgba(253, 253, 251, 0.7);
}

.choice-card:hover .card-body { border-color: var(--vert); transform: translateY(-3px); }

.choice-card .card-title { display: block; font-family: var(--serif); font-size: 1.45rem; }

.choice-card .card-sub { display: block; font-size: 0.85rem; color: var(--encre-72); margin-top: 0.35rem; line-height: 1.55; }

.choice-card input:checked + .card-body {
  border-color: var(--vert-fonce);
  background: rgba(116, 150, 61, 0.1);
  box-shadow: inset 0 0 0 2px var(--vert-fonce);
}

.choice-card input:focus-visible + .card-body { outline: 2.5px solid var(--vert-txt); outline-offset: 3px; }

/* Cartes chambres du formulaire */
.room-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.room-choice { position: relative; cursor: pointer; }

.room-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

.room-choice .rc-body {
  display: flex;
  gap: 1rem;
  align-items: center;
  border: 1.5px solid rgba(116, 150, 61, 0.28);
  border-radius: var(--r-pilule);
  padding: 0.75rem 1.3rem 0.75rem 0.75rem;
  background: rgba(253, 253, 251, 0.7);
  transition: border-color 0.4s, background-color 0.4s, transform 0.4s var(--ease-out);
}

.room-choice:hover .rc-body { border-color: var(--vert); transform: translateY(-3px); }

/* La vignette devient un médaillon rond. Sa largeur ne change pas (78 px), donc
   la variante 240 px du srcset reste la bonne à tous les DPR. */
.room-choice img { width: 78px; height: 78px; object-fit: cover; flex: none; border-radius: var(--r-cercle); }

.room-choice .rc-name { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }

.room-choice .rc-sub { display: block; font-size: 0.78rem; color: var(--encre-72); margin-top: 0.3rem; line-height: 1.5; }

.room-choice input:checked + .rc-body {
  border-color: var(--vert-fonce);
  background: rgba(116, 150, 61, 0.1);
  box-shadow: inset 0 0 0 2px var(--vert-fonce);
}

.room-choice input:focus-visible + .rc-body { outline: 2.5px solid var(--vert-txt); outline-offset: 3px; }

/* Récapitulatif */
.recap-rows { list-style: none; margin-bottom: 2.5rem; display: grid; gap: 0.45rem; }

.recap-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.85rem 1.4rem;
  border: none;
  border-radius: var(--r-md);
  background: rgba(116, 150, 61, 0.07);
}

.recap-rows .label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sauge);
  flex: none;
}

.recap-rows .value { text-align: right; font-family: var(--serif); font-size: 1.25rem; color: var(--encre); }

.consent {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--encre-72);
  background: rgba(116, 150, 61, 0.07);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.4rem;
}

/* La case à cocher native est carrée : on lui donne le rayon du reste.
   `appearance: none` demanderait de redessiner la coche à la main — le rayon
   suffit à l'accorder, et l'accessibilité native reste intacte. */
.consent input {
  margin-top: 0.25rem;
  accent-color: var(--vert-fonce);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--r-xs);
  flex: none;
}

/* Navigation étapes */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  gap: 1rem;
}

.btn-prev {
  background: none;
  border: 1.5px solid transparent;
  border-radius: var(--r-pilule);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-72);
  padding: 1.1em 1.8em;
  transition: color 0.35s, border-color 0.35s, background-color 0.35s;
}

.btn-prev:hover { color: var(--vert-txt); border-color: rgba(116, 150, 61, 0.35); background: rgba(116, 150, 61, 0.07); }

/* Confirmation */
.confirm-panel { text-align: center; padding: 3rem 0; }

/* Le fleuron d'arrivée prend son médaillon : un disque vert plein, la seule
   récompense visuelle de la page. */
.confirm-panel .orn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--ivoire);
  line-height: 1;
  width: 5.5rem;
  height: 5.5rem;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-cercle);
  background: var(--vert-fonce);
}

.confirm-panel h2 { margin-top: 1.5rem; }

.confirm-panel p { max-width: 46ch; margin: 1.4rem auto 0; color: var(--encre-72); }

/* ==========================================================================
   Pages intérieures (chambres, événements)
   ========================================================================== */

/* ---------- Bandeau de titre ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(48svh, 60vw, 66svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--ivoire);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

.page-hero .bg { position: absolute; inset: -5% 0; z-index: -1; }
.page-hero .disques { z-index: -1; }

.page-hero .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.1);
  animation: heroIn 2.8s var(--ease-out) forwards;
}

.page-hero .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Même densification que le hero : le fil d'Ariane et l'italique du titre
     passaient sous les seuils sur les fonds de ciel clair. */
  background:
    radial-gradient(ellipse 74% 64% at 40% 60%, rgba(20, 30, 10, 0.5) 0%, rgba(20, 30, 10, 0) 76%),
    linear-gradient(180deg, rgba(24, 34, 12, 0.8) 0%, rgba(24, 34, 12, 0.66) 42%, rgba(24, 34, 12, 0.93) 100%);
}

/* `.page-hero` est un conteneur flex (pour coller le texte en bas) : sans
   `width: 100%`, le `.container` se réduit à la largeur de son plus large
   enfant puis se recentre — le titre décrochait alors de 286 px de la
   colonne de texte du reste de la page. */
.page-hero .container { width: 100%; padding-block: clamp(3.5rem, 8vw, 6rem); padding-top: 11rem; }

.page-hero .eyebrow { color: var(--ivoire); }
.page-hero .eyebrow::before { background: linear-gradient(90deg, transparent, var(--vert-clair)); }
.page-hero h1 { color: var(--ivoire); font-size: clamp(2.9rem, 7vw, 5.6rem); }
/* Sur une façade de pierre au soleil, --vert-clair descendait à 2,1:1 même sous
   le voile : l'italique du bandeau passe au vert tendre (4,8:1 mesuré). */
.page-hero h1 em { color: var(--vert-tendre); }

.page-hero .lede {
  color: var(--ivoire-96);
  margin-top: 1.6rem;
  max-width: 46ch;
  text-shadow: 0 2px 24px rgba(10, 16, 8, 0.55);
}

/* Fil d'Ariane discret — mais en ivoire PLEIN : à 10,9 px sur une photo, même
   voilée, l'ivoire à 82 % passait sous 4,5:1. La discrétion vient de la taille
   et de l'interlettrage, pas d'une transparence. */
.crumb {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivoire);
  margin-bottom: 1.4rem;
}

.crumb a { color: var(--ivoire); transition: color 0.35s; }
.crumb a:hover { color: var(--vert-tendre); }
.crumb span { opacity: 0.5; margin: 0 0.55rem; }

/* ---------- Chambre en pleine largeur ---------- */

/* Le folio « 02 » déborde vers le haut dans la marge de la section et vient
   mourir juste au-dessus du conteneur. Les photos étant désormais alignées en
   haut, il tombait à 6 px du coin de la première — et à quelques pixels du
   « i. » posé dedans. On rend l'air au filigrane — en `padding`, car une
   marge se fusionnerait à travers le `.container` et emporterait le folio
   avec elle. */
.rooms-detail-list { padding-top: clamp(2rem, 3.5vw, 3rem); }

.room-detail {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2.2rem, 5.5vw, 5.5rem);
  /* Haut, pas centre : la colonne de texte est toujours plus haute que la
     photo (davantage encore équipements dépliés), et centrer laissait la
     photo flotter dans 150 à 250 px de vide en haut comme en bas. */
  align-items: start;
  position: relative;
  z-index: 1;
  /* Cible des liens profonds depuis l'accueil : sans ça le titre de la
     chambre arrivait sous l'en-tête fixe. */
  scroll-margin-top: clamp(6.5rem, 12vw, 10rem);
}

.room-detail + .room-detail { margin-top: clamp(4.5rem, 9vw, 8rem); }

/* Alternance : on inverse aussi le gabarit de colonnes, sinon les rangs pairs
   héritaient de la colonne étroite — photo rétrécie d'un rang sur deux et
   colonne de texte élargie d'autant. */
.room-detail:nth-child(even) { grid-template-columns: 5fr 6fr; }
.room-detail:nth-child(even) .room-detail-media { order: 2; }

.room-detail-media { position: relative; overflow: hidden; border-radius: var(--r-2xl); }

.room-detail-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Le folio romain de la chambre passe dans une pastille verte : posé nu sur la
   photo, il se perdait dans les zones claires, et le site n'a plus de coin
   droit où l'accrocher. */
.room-detail-media .num {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1;
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-cercle);
  background: var(--vert-fonce);
  color: var(--ivoire);
  z-index: 2;
}

.room-detail h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.room-detail .room-note { margin-top: 0.5rem; }
.room-detail p.intro { margin-top: 1.4rem; color: var(--encre-72); max-width: 50ch; }

.spec-list {
  list-style: none;
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sauge);
}

.spec-list li { display: inline-flex; align-items: center; gap: 0.6rem; }
.spec-list li::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--r-cercle);
  background: var(--vert);
  flex: none;
}

/* Prix + bouton. `space-between` faisait sauter le bouton d'un bord à l'autre
   selon que la ligne tenait ou non : à gauche sous le prix quand elle passait
   à la ligne, collé au bord droit sinon. Aligné à gauche, le bloc est le même
   dans les cinq chambres. */
/* Le pied de bloc devient une tuile verte pâle : le filet d'1 px qui le
   séparait du texte n'avait plus sa place. */
.room-detail-foot {
  margin-top: 2.2rem;
  padding: 1.4rem 1.7rem;
  border-top: none;
  border-radius: var(--r-lg);
  background: rgba(116, 150, 61, 0.09);
  display: flex;
  align-items: center;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
}

.room-detail-foot .room-price { margin-top: 0; }

/* « petit-déjeuner compris » — était répété en style inline dans les cinq
   chambres, et dans les autres pages. */
.room-price small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sauge);
}

/* ---------- Galerie par chambre (2 vues : chambre + salle de bains) ---------- */

.room-detail-media { cursor: pointer; }

.room-detail-media .room-media-btn {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.2rem;
  background: var(--ivoire-96);
  color: var(--vert-profond);
  border: none;
  border-radius: var(--r-pilule);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.room-detail-media .room-media-btn:hover,
.room-detail-media .room-media-btn:focus-visible { background: var(--vert-fonce); color: var(--ivoire); }

.room-detail-media .room-media-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; display: block; }

/* Précisions factuelles, sous le texte d'ambiance : le détail que le voyageur
   vérifie avant de réserver, sans casser le ton du paragraphe qui précède. */
.room-detail p.room-facts {
  margin-top: 0.9rem;
  max-width: 50ch;
  font-size: 0.94rem;
  color: var(--sauge);
}

/* Pictogrammes de caractéristiques (m², vue, sdb, terrasse…) */
.room-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.room-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid rgba(116, 150, 61, 0.24);
  border-radius: var(--r-pilule);
  background: rgba(116, 150, 61, 0.06);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--encre-72);
}

.room-tags svg { width: 16px; height: 16px; fill: none; stroke: var(--vert-txt); stroke-width: 1.5; flex-shrink: 0; }

/* Équipements — repliable, deux colonnes, coche verte */
.room-amenities { margin-top: 1.6rem; }

.room-amenities summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid rgba(116, 150, 61, 0.3);
  border-radius: var(--r-pilule);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vert-txt);
  transition: background-color 0.35s, border-color 0.35s;
}

.room-amenities summary:hover { background: rgba(116, 150, 61, 0.09); border-color: var(--vert); }

.room-amenities summary::-webkit-details-marker { display: none; }

.room-amenities summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}

.room-amenities[open] summary::after { transform: rotate(-135deg); }

.room-amenities-groups {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 2rem;
}

.room-amenities-groups h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sauge);
  margin-bottom: 0.7rem;
}

.room-amenities-groups ul { list-style: none; }

.room-amenities-groups li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--encre-72);
  padding: 0.28rem 0;
}

.room-amenities-groups svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--vert);
  stroke-width: 2.2;
  flex-shrink: 0;
  margin-top: 0.28rem;
}

/* ---------- Lightbox chambre (2 vues, flèches, bullets, vignettes) ---------- */

.room-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 16, 10, 0.97);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}

.room-lightbox.is-open { opacity: 1; visibility: visible; }

.room-lightbox__frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.5s;
}

.room-lightbox.is-open .room-lightbox__frame { transform: none; opacity: 1; }

.room-lightbox__stage { position: relative; width: 100%; }

.room-lightbox img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: var(--r-lg);
}

.room-lightbox__cap {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ivoire-82);
  font-size: 1.02rem;
  text-align: center;
}

.room-lightbox__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.room-lightbox__dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--ivoire-56);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.room-lightbox__dots button.is-active { background: var(--vert-clair); transform: scale(1.25); }

.room-lightbox__thumbs {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

/* Vignettes en médaillons ronds — mêmes vignettes 240 px, cadre circulaire. */
.room-lightbox__thumbs button {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2.5px solid transparent;
  border-radius: var(--r-cercle);
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s, border-color 0.3s;
}

.room-lightbox__thumbs button.is-active { opacity: 1; border-color: var(--vert-clair); }
.room-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-cercle); }

/* Les trois commandes se posent sur la photo : sans fond elles disparaissaient
   dans les zones claires (mur rouge de la Suite, fenêtres) et débordaient à
   moitié hors du cadre. Pastille sombre, taille de cible confortable. */
.room-lightbox button.lb-close,
.room-lightbox button.lb-prev,
.room-lightbox button.lb-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(64, 87, 30, 0.62);
  backdrop-filter: blur(3px);
  color: var(--ivoire);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out);
  z-index: 3;
}

.room-lightbox button.lb-close:hover,
.room-lightbox button.lb-prev:hover,
.room-lightbox button.lb-next:hover { background: var(--vert-fonce); color: var(--ivoire); }

.room-lightbox button.lb-close:focus-visible,
.room-lightbox button.lb-prev:focus-visible,
.room-lightbox button.lb-next:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; }

.room-lightbox .lb-close { top: 0.9rem; right: 0.9rem; font-size: 1.75rem; }
.room-lightbox .lb-prev { left: 0.9rem; top: 50%; transform: translateY(-50%); }
.room-lightbox .lb-next { right: 0.9rem; top: 50%; transform: translateY(-50%); }
.room-lightbox .lb-prev:hover { transform: translateY(-50%) translateX(-4px); }
.room-lightbox .lb-next:hover { transform: translateY(-50%) translateX(4px); }

@media (max-width: 640px) {
  .room-amenities-groups { grid-template-columns: 1fr; }
  .room-lightbox .lb-prev { left: 0.5rem; }
  .room-lightbox .lb-next { right: 0.5rem; }
  .room-lightbox .lb-close { top: 0.5rem; right: 0.5rem; }
  .room-lightbox__thumbs button { width: 46px; height: 46px; }
}

/* ---------- Bandeau d'infos pratiques ---------- */

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  position: relative;
  z-index: 1;
}

/* Les trois faits deviennent des tuiles rondes ; le chiffre prend son
   médaillon vert, qui remplace le filet horizontal du haut. */
.fact {
  border-top: none;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  border-radius: var(--r-lg);
  background: rgba(116, 150, 61, 0.07);
  border: 1.5px solid rgba(116, 150, 61, 0.16);
}

.fact .k {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ivoire);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 4.6rem;
  height: 4.6rem;
  padding-inline: 1rem;
  border-radius: var(--r-pilule);
  background: var(--vert-fonce);
  margin-bottom: 1.1rem;
}

.fact h3 { font-size: 1.25rem; margin: 0.5rem 0 0.6rem; }
.fact p { font-size: 0.98rem; color: var(--encre-72); max-width: 34ch; }

.section--dark .fact {
  border-color: var(--ivoire-16);
  background: rgba(253, 253, 251, 0.06);
}
.section--dark .fact .k { color: var(--foret); background: var(--vert-clair); }
.section--dark .fact p { color: var(--ivoire-82); }

/* ---------- Formats d'événements ---------- */

.formats-grid {
  display: grid;
  /* trois formats, un rang : le mariage-privatisation absorbe l'ancienne
     quatrième carte, et deux colonnes laisseraient une carte orpheline */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.4rem);
  position: relative;
  z-index: 1;
}

/* Le filet vert de 2 px en tête de carte est remplacé par le chiffre en
   médaillon (`.idx`) : sur un coin rond, une barre droite en haut ne tient pas. */
.format-card {
  background: var(--blanc-vert);
  border: 1.5px solid rgba(116, 150, 61, 0.2);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 3.4vw, 2.8rem);
  /* La carte entière est cliquable : le lien du titre s'étend ici par
     ::after — d'où le contexte de positionnement, et la place réservée en
     bas à droite pour le bouton flèche. */
  position: relative;
  padding-bottom: clamp(4.4rem, 6vw, 5.4rem);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}

.format-card:hover {
  transform: translateY(-4px);
  border-color: rgba(116, 150, 61, 0.45);
  box-shadow: 0 26px 48px -30px rgba(64, 87, 30, 0.65);
}

/* Un seul lien réel par carte, porté par le titre. Son ::after recouvre la
   carte : pas d'imbrication de liens, un seul arrêt au clavier, et le libellé
   annoncé reste explicite grâce au complément en .sr-only. */
.format-card__link { color: inherit; transition: color 0.4s var(--ease-out); }

.format-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Le focus clavier doit cerner la carte, pas le seul titre : on neutralise le
   contour par défaut et on le redessine sur la carte. */
.format-card__link:focus-visible { outline: none; }
.format-card:has(.format-card__link:focus-visible) {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
}

/* Repli pour les moteurs sans :has() — le contour retombe sur le titre. */
@supports not selector(:has(*)) {
  .format-card__link:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
}

/* Bouton flèche : le vocabulaire du site — cercle fin façon .icon-btn, voile
   vert qui monte façon .btn. Décoratif, il ne reçoit jamais le focus. */
.format-card__go {
  position: absolute;
  left: clamp(1.8rem, 3.4vw, 2.8rem);
  bottom: clamp(1.7rem, 3vw, 2.3rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--encre-24);
  border-radius: 50%;
  color: var(--vert-txt);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.format-card__go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vert-fonce);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s var(--ease-out);
}

.format-card__go svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}

/* Le survol de la carte — et le focus clavier du lien — animent la flèche :
   le cercle se remplit de vert, la flèche glisse et passe à l'ivoire. */
.format-card:hover .format-card__go,
.format-card:focus-within .format-card__go {
  color: var(--ivoire);
  border-color: var(--vert-fonce);
}

.format-card:hover .format-card__go::before,
.format-card:focus-within .format-card__go::before { transform: scale(1); }

.format-card:hover .format-card__go svg,
.format-card:focus-within .format-card__go svg { transform: translateX(3px); }

.format-card:hover h3, .format-card:focus-within h3 { color: var(--vert-txt); }

.format-card .idx {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ivoire);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-cercle);
  background: var(--vert-fonce);
}

.format-card h3 { margin: 0.9rem 0 0.9rem; }
.format-card p { color: var(--encre-72); font-size: 1rem; }

.format-card ul {
  list-style: none;
  margin-top: 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sauge);
  line-height: 2.1;
}

.format-card li { display: flex; align-items: baseline; gap: 0.7rem; }
.format-card li::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--r-cercle);
  background: var(--vert);
  flex: none;
  translate: 0 -0.15em;
}

/* ---------- Frise en 4 temps ---------- */

.steps-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  counter-reset: flow;
  position: relative;
  z-index: 1;
}

.steps-flow > div {
  counter-increment: flow;
  border-top: none;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  background: rgba(253, 253, 251, 0.06);
  border: 1.5px solid var(--ivoire-16);
}

/* Le numéro du temps prend sa pastille : encre forêt sur vert clair (6,4:1). */
.steps-flow > div::before {
  content: counter(flow, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-cercle);
  background: var(--vert-clair);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--foret);
  margin-bottom: 1rem;
}

.steps-flow h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.steps-flow p { font-size: 0.97rem; color: var(--ivoire-82); }

/* ---------- Carrousels : la primitive unique ----------
   Sous le seuil que porte `data-rail`, une grille devient un rail qui défile
   au pouce. Le mécanisme est le défilement natif avec accroche par vue ; les
   puces que pose main.js sont un repère et un raccourci, pas le moteur — sans
   JavaScript le rail fonctionne déjà.

   Le rail ressort des gouttières pour toucher le bord de l'écran : une carte
   coupée au bord dit « ça continue » mieux que n'importe quelle flèche. La
   marge négative est exactement compensée par le padding, si bien que la
   première vue reste alignée sur la colonne de texte.

   C'est le CSS seul qui décide si un rail est actif, dans le bloc média
   ci-dessous ; main.js lit ensuite l'état calculé pour savoir s'il doit
   poser ses puces. Une seule source de vérité, donc, et le rail marche
   même si le script ne tourne pas. */

@media (max-width: 900px) {
  /* `etroit` : les rails qui ne prennent que sous 640 px, et qui ont leur
     propre bloc plus bas. Sur une tablette, une galerie doit rester une
     grille — on ne la met pas en file indienne à 768 px. */
  /* le sélecteur double l'emporte sur le `display: grid` de la grille
     remplacée, quel que soit l'ordre des règles dans le fichier */
  [data-rail]:not([data-rail="etroit"])[data-rail] {
    display: flex;
    gap: var(--rail-espace, clamp(0.9rem, 3vw, 1.4rem));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  [data-rail]:not([data-rail="etroit"])::-webkit-scrollbar { display: none; }

  [data-rail]:not([data-rail="etroit"]) > * {
    /* une vue large mais plafonnée : un téléphone n'en montre qu'une et
       l'amorce de la suivante, une tablette en aligne deux ou trois */
    flex: 0 0 var(--rail-vue, min(78%, 320px));
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Le rail est un conteneur défilant : il prend le focus pour rester
     parcourable aux flèches du clavier (WCAG 2.1.1). */
  [data-rail]:focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 5px;
  }


  /* Les cartes formats sont du texte, pas des photos : il leur faut plus de
     largeur qu'à une chambre pour que le paragraphe ne se hache pas. Le
     padding vertical laisse passer les 4 px dont le survol soulève la carte,
     que le conteneur défilant rognerait sinon. */
  .formats-grid {
    --rail-vue: min(86%, 380px);
    padding-block: 5px;
  }

  /* Les deux photos d'une chambre. Ce rail-là ne sort pas des gouttières :
     le numéro « i. » et le bouton de visionneuse sont posés en absolu sur le
     bloc média, et les envoyer au bord de l'écran les décrocherait de la
     colonne de texte à laquelle ils appartiennent. */
  .room-photos {
    --rail-vue: min(88%, 460px);
    --rail-espace: 0.6rem;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  /* Les puces de ce rail-là se posent sur la photo, en bas à gauche, face au
     bouton de visionneuse. En flux elles allongeaient le bloc média et
     poussaient le bouton — ancré en bas — hors de l'image. */
  .room-detail-media .rail-puces {
    position: absolute;
    left: 0.35rem;
    bottom: 0.25rem;
    z-index: 2;
    margin: 0;
  }

  .room-detail-media .rail-puce::before {
    background: var(--ivoire-56);
    /* un point clair sur une photo a besoin de son ombre pour exister */
    box-shadow: 0 1px 3px rgba(10, 16, 8, 0.55);
  }

  .room-detail-media .rail-puce[aria-current="true"]::before { background: var(--ivoire); }

  /* Le doigt a droit à ses 44 px : les deux commandes de la fiche chambre
     étaient les plus petites cibles du site (35 px et 20 px de haut). */
  .room-detail-media .room-media-btn { min-height: 44px; }

  .room-amenities summary {
    min-height: 48px;
    /* `inline-flex` collerait la cible au seul texte ; on l'étire sur la
       largeur pour que le pouce n'ait pas à viser. La pilule s'étire avec. */
    display: flex;
    justify-content: flex-start;
    padding-block: 0.7rem;
  }

  .room-amenities summary::after { margin-left: auto; }
}

/* Hors rail, les deux photos s'empilent — donc on n'en montre qu'une, celle
   qui illustre la chambre. La seconde reste dans la page pour le rail et pour
   la visionneuse ; `loading="lazy"` sous un parent masqué empêche son
   téléchargement. */
@media (min-width: 901px) {
  .room-photo + .room-photo { display: none; }
}

/* Au-dessus du seuil la grille reprend ses droits : plus de puces. */
@media (min-width: 901px) {
  .rail-puces { display: none; }
}

.rail-puces {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(1.1rem, 3vw, 1.8rem);
}

.rail-puce {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  /* le point ne fait que 7 px, la cible en fait 44 : c'est le doigt qui
     décide de la taille, pas le dessin */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.rail-puce::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--encre-24);
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.rail-puce[aria-current="true"]::before {
  background: var(--vert-txt);
  transform: scale(1.6);
}

.rail-puce:focus-visible { outline: 2px solid var(--vert); outline-offset: -6px; border-radius: 50%; }

/* Sur les fonds sombres le point s'inverse. */
.section--dark .rail-puce::before { background: var(--ivoire-16); }
.section--dark .rail-puce[aria-current="true"]::before { background: var(--vert-clair); }

@media (prefers-reduced-motion: reduce) {
  [data-rail].is-rail { scroll-behavior: auto; }
  .rail-puce::before { transition: none; }
  .rail-puce[aria-current="true"]::before { transform: none; box-shadow: 0 0 0 3px var(--vert-16); }
}

/* ---------- Responsive des pages intérieures ---------- */

@media (max-width: 940px) {
  .page-hero .container { padding-top: 9rem; }
  /* le sélecteur pair doit être répété : il l'emporte sinon en spécificité
     et les rangs pairs resteraient sur deux colonnes */
  .room-detail,
  .room-detail:nth-child(even) { grid-template-columns: 1fr; }
  .room-detail:nth-child(even) .room-detail-media { order: 0; }
  .facts-grid, .steps-flow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .facts-grid, .formats-grid, .steps-flow { grid-template-columns: 1fr; }
  .room-detail-foot { flex-direction: column; align-items: flex-start; }
  .hero-dots { display: none; }
}

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

@media (max-width: 1024px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 26vw, 210px); }
  .gallery figure { grid-column: auto !important; grid-row: auto !important; }
  .gallery figure:nth-child(1) { grid-column: 1 / 3 !important; }
}

@media (max-width: 900px) {
  .editorial, .events-wrap, .contact-grid { grid-template-columns: 1fr; }
  .aside-band { grid-template-columns: 1fr; }
  .aside-band figure { min-height: 260px; }
  .around-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-media img { min-height: 320px; }
  .events-media { aspect-ratio: 16 / 11; }
  .editorial-media::before { display: none; }
  .folio { font-size: clamp(7rem, 30vw, 12rem); opacity: 0.045; }
}

@media (max-width: 640px) {
  .rooms-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .choice-grid, .room-choice-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  /* La galerie ne s'empile plus : elle défile sur deux rangs. Neuf photos
     en file indienne demanderaient neuf puces, soit 396 px de cibles
     tactiles sur un écran qui en fait 390 ; sur deux rangs elles forment
     cinq colonnes, donc cinq puces — et on voit deux photos à la fois au
     lieu d'une. La section passe de 2 100 px de haut à environ 330. */
  .gallery[data-rail="etroit"] {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, clamp(128px, 33vw, 190px));
    grid-auto-columns: min(78%, 300px);
    gap: 0.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .gallery[data-rail="etroit"]::-webkit-scrollbar { display: none; }

  .gallery[data-rail="etroit"] > figure {
    /* les placements de la mosaïque sont posés en !important par le palier
       1024 : il faut le même poids pour les rendre au flux automatique */
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start;
  }

  .gallery[data-rail="etroit"]:focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 5px;
  }

  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery figure:nth-child(1) { grid-column: auto !important; }
  .sorei { flex-direction: column; align-items: flex-start; }
  .contact-rows li { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .contact-rows .value { text-align: left; }
  .step-dot { font-size: 0.55rem; letter-spacing: 0.12em; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="mask"] img { transform: none !important; }
  .ln > span { transform: none !important; }
  .curtain { display: none; }
  .hero-inner > *, .hero-scroll, .hero-dots { opacity: 1; transform: none; }
  .hero-slide { transition: none; }
  .hero-slide.is-active img, .is-loaded .hero-slide.is-active:first-child img { animation: none; }
  .hero-rule { width: min(340px, 60%); }
  .marquee__track { animation: none; }
  /* Les cartes formats : plus de glissement ni d'élévation, mais le
     remplissage du bouton flèche reste (c'est un état, pas un mouvement). */
  .format-card:hover { transform: none; }
  .format-card:hover .format-card__go svg,
  .format-card:focus-within .format-card__go svg { transform: none; }
}

/* ==========================================================================
   Pages légales (mentions-legales.html, politique-confidentialite.html)
   Une colonne de lecture, pas une page de composition : les titres display du
   site (h1 jusqu'à 7,5 rem) écraseraient un texte qu'on lit au paragraphe.
   On les ramène donc à une échelle de document, sans toucher au reste du site.
   ========================================================================== */

.legal-main {
  /* Même calage que .resa-main : header fixe à deux rangs (74 + 54).
     Pas de fond opaque : il masquerait les disques fixés derrière la page. */
  padding: calc(128px + clamp(2.5rem, 5vw, 4rem)) 0 clamp(4rem, 8vw, 7rem);
  position: relative;
  z-index: 1;
}

@media (max-width: 940px) {
  .legal-main { padding-top: calc(74px + clamp(2rem, 5vw, 3.5rem)); }
}

/* La colonne de lecture se pose dans une grande fiche ronde : les pages
   légales sont les seules sans photo, c'est la forme qui les rattache au site. */
.legal {
  /* 44 rem de ligne de lecture + le rembourrage de la fiche */
  max-width: 51rem;
  margin-inline: auto;
  background: var(--ivoire);
  border: 1.5px solid rgba(116, 150, 61, 0.18);
  border-radius: var(--r-2xl);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4.5vw, 3.6rem);
  position: relative;
  z-index: 1;
}

.legal h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
  margin-bottom: 1.2rem;
}

/* Le filet de séparation devient un court trait arrondi vert, posé au-dessus
   du titre : même rôle de respiration, sans coupure droite de bord à bord. */
.legal h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  margin-top: 3.2rem;
  margin-bottom: 0.9rem;
  padding-top: 2rem;
  border-top: none;
  position: relative;
}

.legal h2::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 0;
  width: 3.2rem;
  height: 4px;
  border-radius: var(--r-pilule);
  background: var(--vert);
}

.legal h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  margin-top: 2rem;
  margin-bottom: 0.7rem;
  color: var(--vert-txt);
}

.legal p,
.legal li {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--encre-88);
}

.legal p + p { margin-top: 1.1em; }

.legal ul {
  margin: 1.1em 0;
  padding-left: 1.4rem;
  list-style: none;
}

.legal li { position: relative; margin-bottom: 0.7em; }

.legal li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.68em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-cercle);
  background: var(--vert);
}

.legal strong { font-weight: 500; color: var(--encre); }
.legal em { font-style: italic; }

.legal a {
  color: var(--vert-txt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--vert-16);
  transition: text-decoration-color 0.35s var(--ease-out);
}

.legal a:hover { text-decoration-color: var(--vert); }

/* L'introduction : même corps, encre plus légère — c'est une date, pas du fond.
   --encre-45 y descendait à 2,9:1 ; --sauge garde la nuance en tenant 5,2:1. */
.legal__updated {
  color: var(--sauge) !important;
  margin-bottom: 0.5rem;
}

/* Le retour à l'accueil garde la graisse des liens de navigation, mais sans le
   filet de .link-arrow, qui pointe à droite alors que la flèche va à gauche. */
.legal .legal__back {
  margin-bottom: 2.6rem;
  text-decoration: none;
}

.legal .legal__back::after { display: none; }

.legal__foot {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1.5px solid rgba(116, 150, 61, 0.18);
}

.legal__foot .legal__back { margin-bottom: 0; }