/* ══════════════════════════════════════════════════════════
   Casa Flava · Feuille de style
   Mobile-first strict : les valeurs de base sont celles du mobile,
   la bascule se fait à 900 px, comme le handoff l'impose.
   Aucun arrondi, aucune ombre portée : filets 1 px et aplats.
   ══════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées ─────────────────────────────── */
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrumentserif-400-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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrumentserif-400-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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrumentserif-400i-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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrumentserif-400i-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: 'Manrope'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('/assets/fonts/manrope-var-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: 'Manrope'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('/assets/fonts/manrope-var-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;
}

/* ── Jetons ─────────────────────────────────────────────── */
:root {
  /* Couleurs */
  --paper:      #F0EBE0;
  --stone:      #D9D3C7;
  --nuit:       #2D5038;
  --deep:       #3A6045;
  --abysse:     #1B3122;
  --mousse:     #5C8468;
  --pale:       #9DC4A8;
  --ink:        #1F2A22;
  --ink-strong: #3C4A3E;
  --ink-stone:  #33402F;

  --ink-82: rgba(31, 42, 34, .82);
  --ink-72: rgba(31, 42, 34, .72);
  --ink-68: rgba(31, 42, 34, .68);
  --paper-86: rgba(240, 235, 224, .86);
  --paper-78: rgba(240, 235, 224, .78);

  --line:       rgba(31, 42, 34, .14);
  --line-md:    rgba(31, 42, 34, .18);
  --line-str:   rgba(31, 42, 34, .3);
  --line-light: rgba(240, 235, 224, .2);
  --line-light-md: rgba(240, 235, 224, .4);
  --line-light-str: rgba(240, 235, 224, .55);

  /* Espacements — valeurs mobiles */
  --px: 20px;  --py: 52px;
  --glg: 28px; --gmd: 22px; --gsm: 12px; --gnav: 12px;
  --heroh: 560px; --heropad: 22px;

  /* Typographie — valeurs mobiles */
  --h1: 44px; --h2: 30px; --h3: 27px; --h4: 23px; --lead: 15px;

  --safetop: env(safe-area-inset-top, 0px);
  /* Hauteurs des deux barres basses. Elles ne coexistent jamais : la barre
     d'onglets est mobile, le bandeau de réservation est desktop. Chacune vaut
     donc 0 là où l'autre s'affiche, et le pied de page additionne les deux. */
  --appnav-h: 78px;
  --bookbar-h: 0px;

  /* Largeur maximale du CONTENU (handoff). Les aplats, eux, vont bord à bord :
     au-delà de cette largeur, ce sont les gouttières qui s'élargissent, jamais
     la section qui se rétrécit. Voir --gut / --gut-hero sur .shell. */
  --maxw: 1440px;
}

@media (min-width: 900px) {
  :root {
    --px: 48px;  --py: 96px;
    --glg: 56px; --gmd: 32px; --gsm: 20px; --gnav: 26px;
    --heroh: 720px; --heropad: 56px;
    --h1: 92px; --h2: 46px; --h3: 40px; --h4: 34px; --lead: 16px;
    --appnav-h: 0px;
    /* 64 de vignette + 2 x 10 de marge + 1 de filet. Mesuré, pas estimé : si le
       jeton et la hauteur réelle divergent, le pied de page rouvre un vide ou
       laisse le bandeau mordre sur le contenu. */
    --bookbar-h: 85px;
  }
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Le filet anti-débordement va sur <html> SEUL. Le poser aussi sur <body>
   force son overflow-y de « visible » à « auto » : body devient un second
   conteneur de défilement et réserve sa propre barre, ce qui ampute toutes
   les sections de sa largeur (15 px) sur la droite. Invisible tant que la
   coque était centrée, bien visible depuis que les fonds vont bord à bord. */
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* La feuille du navigateur pose [hidden]{display:none}, mais toute regle
   d'auteur qui fixe un display (grid, flex...) la bat. Sans ce !important,
   filtrer une liste dont les elements sont en grid ne masque rien. */
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; margin: 0; }

:focus-visible {
  outline: 2px solid var(--nuit);
  outline-offset: 3px;
}
.section--dark :focus-visible,
.booking :focus-visible,
.site-footer :focus-visible { outline-color: var(--pale); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--nuit); color: var(--paper); padding: 12px 20px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* La coque occupe toute la largeur : ce sont les fonds qui doivent aller d'un
   bord à l'autre. Le contenu, lui, reste plafonné à --maxw grâce à une
   gouttière qui absorbe le surplus.

   max(--px, (100% - 1440px)/2 + --px) :
     · sous 1440 px → la gouttière vaut --px, rien ne change ;
     · au-delà      → elle grandit d'autant, et la colonne de texte garde
                      exactement la largeur qu'elle avait à 1440 px.
   Le « 100% » se résout sur .shell, qui est le bloc conteneur de toutes les
   sections — d'où une valeur identique partout. */
.shell {
  --gut:      max(var(--px),      calc((100% - var(--maxw)) / 2 + var(--px)));
  --gut-hero: max(var(--heropad), calc((100% - var(--maxw)) / 2 + var(--heropad)));
  background: var(--paper);
  position: relative;
  padding-top: var(--safetop);
}

/* ── Typographie ────────────────────────────────────────── */
.display {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.12;
  letter-spacing: .01em;
}
.display--sm { font-size: var(--h3); line-height: 1.16; }
.display--xs { font-size: var(--h4); line-height: 1.16; }
.display em { font-style: italic; }

.body { font-size: 15px; line-height: 1.8; color: var(--ink-82); }
.body--dense { font-size: 14.5px; line-height: 1.75; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--nuit);
}
.eyebrow--light { color: var(--paper); }
.eyebrow--pale  { color: var(--pale); }
.eyebrow__rule { width: 22px; height: 1px; background: rgba(240, 235, 224, .6); }

.mention {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pale);
}

.rule { height: 1px; background: var(--line-md); }

.link-underline {
  align-self: flex-start;
  border-bottom: 1px solid var(--nuit);
  padding-bottom: 5px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--nuit);
  transition: opacity .2s ease;
}
.link-underline:hover { opacity: .6; }

/* ── Boutons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding: 14px 24px;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
  text-align: center;
}
.btn--solid   { background: var(--nuit); color: var(--paper); padding: 11px 20px; font-weight: 600; letter-spacing: .2em; }
.btn--solid:hover { background: var(--deep); }
.btn--ghost   { border-color: var(--line-light-str); color: var(--paper); }
.btn--ghost:hover { background: rgba(240, 235, 224, .1); }
.btn--paper   { background: var(--paper); color: var(--nuit); font-weight: 600; padding: 16px 28px; }
.btn--paper:hover { background: #fff; }
.btn--outline { border-color: var(--paper); color: var(--paper); padding: 16px 28px; }
.btn--outline:hover { background: rgba(240, 235, 224, .12); }
/* Le pendant de --outline sur fond clair : --outline est bordé de « papier »
   et disparaîtrait sur l'accueil. */
.btn--line    { border-color: rgba(31, 42, 34, .3); color: var(--nuit); padding: 14px 26px; }
.btn--line:hover { background: var(--stone); border-color: var(--nuit); }
.btn--submit  { align-self: flex-start; }

/* ── En-tête collant ────────────────────────────────────── */
.site-header {
  position: sticky; top: var(--safetop); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gut);
  background: rgba(240, 235, 224, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.logo {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px; letter-spacing: .02em; color: var(--ink);
}
.site-nav { display: flex; align-items: center; gap: var(--gnav); }
.site-nav__links { display: none; }
.site-nav__links a {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-72); transition: color .2s ease;
}
.site-nav__links a:hover { color: var(--nuit); }
.site-nav__links a.is-current { color: var(--nuit); font-weight: 600; }

@media (min-width: 900px) {
  .site-nav__links { display: flex; align-items: center; gap: var(--gnav); }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: var(--heroh);
  background: var(--abysse);
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* Depuis que le hero va bord à bord, sa largeur n'est plus bornée : si la hauteur
   restait figée à 720 px, « object-fit: cover » recadrerait de plus en plus fort
   (75 % de la photo visible à 1440 px, mais 42 % à 2545 px — la maison et la
   piscine se retrouvent décapitées).
   50vw reproduit exactement le rapport 2:1 de la maquette (1440 × 720), donc le
   même cadrage à toute largeur ; le plafond en vh évite un hero plus haut que
   l'écran sur une fenêtre large et basse. Sous 1440 px, clamp() retient --heroh
   et rien ne change. */
@media (min-width: 900px) {
  .hero { min-height: clamp(var(--heroh), 50vw, 90vh); }
}
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: mlHeroFade 30s linear infinite;
}
/* La première porte le LCP : elle est visible dès la frame 0, sans attendre le
   fondu d'entrée. Sans ça, le hero reste vide 1,2 s au chargement. */
.hero__slides img:first-child { opacity: 1; animation-name: mlHeroFadeFirst; }

@keyframes mlHeroFade {
  0%   { opacity: 0 }
  4%   { opacity: 1 }
  24%  { opacity: 1 }
  28%  { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes mlHeroFadeFirst {
  0%   { opacity: 1 }
  24%  { opacity: 1 }
  28%  { opacity: 0 }
  96%  { opacity: 0 }
  100% { opacity: 1 }
}

.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 14, 11, .28), rgba(10, 14, 11, 0) 55%, rgba(10, 14, 11, .26));
}
/* Le second voile est porté par le bloc de texte, pas par le hero : l'assombrissement
   commence donc exactement où le texte commence, quelle que soit la hauteur. */
.hero__body {
  position: relative;
  padding: var(--heropad) var(--gut-hero);
  display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(to top, rgba(10, 14, 11, .82), rgba(10, 14, 11, .52) 72%, rgba(10, 14, 11, 0));
}
.hero__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400; font-size: var(--h1); line-height: .98;
  color: var(--paper); max-width: 15ch;
}
.hero__title em { font-style: italic; }
.hero__row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 28px;
}
.hero__lead {
  font-size: var(--lead); line-height: 1.7; color: var(--paper); max-width: 46ch;
}
.figures { display: flex; gap: 26px; color: var(--paper); }
.figure { display: flex; flex-direction: column-reverse; gap: 6px; }
.figure__value {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 30px; line-height: 1;
}
.figure__label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

/* ── Sections ───────────────────────────────────────────── */
.section {
  padding: var(--py) var(--gut);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 72px;
}
.section--split {
  display: grid; gap: var(--glg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.section--middle { align-items: center; }
.section--stone { background: var(--stone); }
.section--stone .body { color: rgba(31, 42, 34, .84); }
.section--dark {
  background: var(--abysse); color: var(--paper); border-bottom-color: transparent;
}
.section--dark .body { color: var(--paper-86); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: var(--gmd);
}
.section-head__main { display: flex; flex-direction: column; gap: 14px; max-width: 52ch; }
.section-head__aside {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-strong);
}
.stack { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.stack--head { gap: 14px; max-width: 52ch; margin-bottom: var(--gmd); }
.stack > .body { max-width: 52ch; }

/* ── Emplacements photo ─────────────────────────────────── */
.ph {
  position: relative; width: 100%;
  background: var(--stone);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph__label {
  padding: 16px; text-align: center;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-stone);
}

/* ── Cartes (chambres) ──────────────────────────────────── */
.cards {
  display: grid; gap: var(--gmd);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card__body { display: flex; flex-direction: column; gap: 7px; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__title {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 24px; line-height: 1.1;
}
.card__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-68); }
.card__text { font-size: 13px; line-height: 1.6; color: rgba(31, 42, 34, .78); }

/* ── Les trois offres (accueil) ─────────────────────────── */
/* Grille propre, et non .cards : celle-ci est en auto-FILL, qui fabrique une
   quatrième piste vide au-delà de 1392 px. Invisible avec les sept chambres,
   flagrant avec trois cartes. Ici le nombre de colonnes est fixé. */
.offres__list {
  display: grid; gap: var(--gmd);
  grid-template-columns: 1fr;
}
.offre { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
/* L'image et le titre forment une seule cible : le bouton reste là pour
   l'affordance, mais toute la carte est cliquable. */
.offre__link { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.offre__link .ph img { transition: transform .4s ease; }
.offre__link:hover .ph img { transform: scale(1.03); }
.offre__title {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: var(--h4); line-height: 1.1;
}
.offre__link:hover .offre__title { color: var(--deep); }
.offre__text {
  font-size: 13px; line-height: 1.6; color: rgba(31, 42, 34, .78);
  max-width: 34ch; flex: 1;
}

@media (min-width: 900px) {
  .offres__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Équipements ────────────────────────────────────────── */
.amenities {
  display: grid; gap: var(--gmd) var(--glg);
  grid-template-columns: minmax(0, 1fr);
}
/* Quatre colonnes fixes en desktop, et non auto-fit : quatre groupes dans une
   grille auto-fit laissent un orphelin sur une deuxième ligne. */
@media (min-width: 900px) {
  .amenities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.amenity-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.amenity-group__title {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-light-md);
  font-family: 'Manrope', sans-serif; font-weight: 400;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--pale);
}
.amenity-group__title svg { flex: none; color: var(--pale); }
.amenity {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid var(--line-light); min-width: 0;
}
.amenity svg { flex: none; margin-top: 1px; color: var(--paper); }
.amenity__label { display: block; font-size: 14.5px; line-height: 1.35; }
.amenity__note  { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--paper-78); }

/* ── Galerie ────────────────────────────────────────────── */
.gallery {
  display: grid; gap: var(--gsm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.gallery__col { display: flex; flex-direction: column; gap: var(--gsm); min-width: 0; }

/* ── Onglets « Pour votre groupe » ──────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--gmd); }
.tab {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--line-str); color: var(--ink-82);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tab svg { flex: none; }
.tab:hover { border-color: var(--nuit); color: var(--nuit); }
.tab.is-active { background: var(--nuit); color: var(--paper); border-color: var(--nuit); }

.panel {
  display: grid; gap: var(--glg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.panel[hidden] { display: none; }
.crew-list {
  display: grid; gap: 0 24px; width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.crew-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid rgba(31, 42, 34, .16);
  font-size: 13.5px; line-height: 1.5;
}
.crew-list svg { flex: none; color: var(--nuit); }

/* ── Lignes tabulaires ──────────────────────────────────── */
.rows { display: flex; flex-direction: column; width: 100%; }
.row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid rgba(31, 42, 34, .2);
}
.row__label { font-size: 15px; line-height: 1.5; }
.row__meta {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-stone); white-space: nowrap;
}
.rows--access .row { padding: 14px 0; border-bottom: 0; border-top: 1px solid rgba(31, 42, 34, .2); }
.rows--access .row:last-child { border-bottom: 1px solid rgba(31, 42, 34, .2); }
.row__label--key {
  display: flex; align-items: center; gap: 8px; min-width: 96px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--nuit);
}
.row__value { margin: 0; font-size: 14px; text-align: right; }

/* Carte du secteur — SVG inline, donc typographie et couleurs du site. */
.map { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.map svg {
  width: 100%; aspect-ratio: 4 / 3; height: auto;
  background: var(--stone);
  border: 1px solid var(--line-md);
}
.map text {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}
.map figcaption {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-68);
}

/* ── Réservation ────────────────────────────────────────── */
.booking { background: var(--nuit); color: var(--paper); scroll-margin-top: 72px; }
.booking .body { color: var(--paper); max-width: 48ch; }
.booking__band {
  padding: var(--py) var(--gut);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px;
}
.booking__band .stack { gap: 12px; }
.booking__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Formulaire ─────────────────────────────────────────── */
.form {
  padding: 0 var(--gut) var(--py);
  display: flex; flex-direction: column; gap: 22px;
  scroll-margin-top: 72px;
}
.form__grid {
  display: grid; gap: 18px 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--pale);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px;
  color: var(--paper);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-light-md);
  padding: 10px 0;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(240, 235, 224, .45); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-bottom-color: var(--paper);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--pale); outline-offset: 4px;
}
/* Les options sont rendues par l'OS : elles ne peuvent pas hériter du fond sombre. */
.field select option { color: var(--ink); background: var(--paper); }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-bottom-color: #E8B4A0; }

.field__error { font-size: 12px; line-height: 1.5; color: #E8B4A0; }

.form__status:empty { display: none; }
.form__status {
  font-size: 14px; line-height: 1.6;
  padding: 14px 16px;
  border: 1px solid var(--line-light-md);
  background: rgba(240, 235, 224, .08);
}

/* Case RGPD — la native est masquée, le carré est redessiné. */
.rgpd-checkbox { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; max-width: 62ch; }
.rgpd-checkbox input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.rgpd-check {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 1px solid var(--line-light-str);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
  margin-top: 1px;
}
.rgpd-check svg { opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .2s ease; color: var(--nuit); }
.rgpd-checkbox:hover .rgpd-check { border-color: var(--paper); }
.rgpd-checkbox input:focus-visible + .rgpd-check { outline: 2px solid var(--pale); outline-offset: 3px; }
.rgpd-checkbox input:checked + .rgpd-check { background: var(--paper); border-color: var(--paper); }
.rgpd-checkbox input:checked + .rgpd-check svg { opacity: 1; transform: scale(1); }
.rgpd-text { font-size: 13px; color: var(--paper-86); line-height: 1.6; }
.rgpd-text a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ── Fenêtres (équipements, galerie) ────────────────────── */
.dlg {
  width: min(1100px, calc(100vw - 2 * var(--px)));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--line-md);
  background: var(--paper);
  color: var(--ink);
}
.dlg::backdrop { background: rgba(10, 14, 11, .72); }
.dlg__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px var(--px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.dlg__close {
  display: flex; padding: 8px; margin: -8px;
  color: var(--ink-72); transition: color .2s ease;
}
.dlg__close:hover { color: var(--nuit); }
.dlg__body { padding: var(--px); overflow-y: auto; }

/* Dans la fenêtre, le fond est clair : les équipements reprennent l'encre. */
.amenities--full .amenity-group__title { color: var(--nuit); border-bottom-color: var(--line-md); }
.amenities--full .amenity-group__title svg { color: var(--nuit); }
.amenities--full .amenity { border-bottom-color: var(--line); }
.amenities--full .amenity svg { color: var(--ink); }
.amenities--full .amenity__note { color: var(--ink-68); }

.gallery-full {
  display: grid; gap: var(--gsm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.gallery-full figcaption {
  padding-top: 10px;
  font-size: 12px; line-height: 1.5; color: var(--ink-68);
}

/* ── Pied de page ───────────────────────────────────────── */
.site-footer {
  background: var(--abysse); color: var(--paper);
  padding: var(--py) var(--gut);
  display: flex; flex-direction: column; gap: 32px;
}
.footer-grid {
  display: grid; gap: 28px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--paper-86); }
.footer-col a { transition: color .2s ease; }
.footer-col a:hover { color: var(--pale); }
.footer-logo { font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; }
.footer-baseline { font-size: 12px; line-height: 1.7; color: rgba(240, 235, 224, .76); }
.footer-title {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--pale); margin-bottom: 4px;
}
.newsletter {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line-light-md); padding-bottom: 9px;
}
.newsletter input {
  font: inherit; font-size: 12.5px; color: var(--paper);
  background: transparent; border: 0; padding: 2px 0; min-width: 0; flex: 1;
}
.newsletter input::placeholder { color: rgba(240, 235, 224, .6); }
.newsletter input:focus { outline: 0; }
.newsletter button {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transition: color .2s ease;
}
.newsletter button:hover { color: var(--pale); }
.newsletter__status:empty { display: none; }
.newsletter__status { font-size: 12px; line-height: 1.5; color: var(--pale); }
.newsletter__legal { font-size: 11px; line-height: 1.6; color: rgba(240, 235, 224, .62); }
.newsletter__legal a { text-decoration: underline; text-underline-offset: 2px; }

.footer-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding-top: 20px; border-top: 1px solid rgba(240, 235, 224, .22);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240, 235, 224, .66);
}
.footer-bar__links { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--pale); }
.footer-credit { letter-spacing: .12em; }

/* ── Barre d'onglets basse (mobile) ─────────────────────── */
.app-nav {
  position: sticky; bottom: 0; z-index: 30;
  /* Les colonnes suivent le NOMBRE d'entrees rendues : les liens vers une page
     pas encore deployee sont ecartes, la barre ne doit pas rester en cinq. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
  background: rgba(240, 235, 224, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(31, 42, 34, .16);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 10px));
  /* L'espaceur est porté par le footer : la barre se superpose au bas du contenu
     sans créer de vide sous lui. */
  margin-top: calc(-1 * var(--appnav-h));
}
.app-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 2px; min-height: 52px;
  font-size: 10px; letter-spacing: .04em; font-weight: 500;
  color: var(--ink-72);
}
.app-nav a.is-cta { color: var(--nuit); font-weight: 600; }

@media (min-width: 900px) {
  .app-nav { display: none; }
}

/* ── Bandeau de réservation (desktop) ───────────────────── */
/* Le pendant de la barre d'onglets : celle-ci disparaît au-dessus de 900 px et
   plus rien ne rappelait le geste de réservation une fois le héro passé.
   Les deux sont frères, collés en bas, et jamais visibles en même temps.

   Collant et NON fixe, volontairement : --gut contient un « 100% » qui se
   résout sur le bloc conteneur. Pour un élément fixed, ce bloc est le viewport
   et non .shell, ce qui décale le bandeau de la largeur de la barre de
   défilement par rapport à toutes les sections. En sticky dans .shell, le
   calcul est exactement celui des sections. */
.bookbar {
  display: none;
  position: sticky; bottom: 0; z-index: 30;
  align-items: center; gap: var(--gmd);
  padding: 10px var(--gut);
  min-height: var(--bookbar-h);
  background: rgba(240, 235, 224, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(31, 42, 34, .16);
  /* Comme .app-nav : l'espaceur est porté par le pied de page, le bandeau se
     superpose au bas du contenu sans creuser un vide sous lui. */
  margin-top: calc(-1 * var(--bookbar-h));
}
.bookbar__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bookbar__thumb { width: 96px; height: 64px; object-fit: cover; flex: none; }
.bookbar__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bookbar__title {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 21px; line-height: 1.1;
}
.bookbar__place { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-68); }

/* Les trois chiffres que ce marché compare en premier. */
.bookbar__facts { display: flex; align-items: baseline; gap: 22px; margin: 0; }
.bookbar__fact { display: flex; align-items: baseline; gap: 6px; }
.bookbar__fact dt { font-size: 15px; font-weight: 600; color: var(--nuit); }
.bookbar__fact dd { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-68); }

/* Le prix est poussé à droite : le reste du bandeau se lit de gauche à droite,
   la décision est au bout. */
.bookbar__price { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.bookbar__lead { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-68); }
.bookbar__amount { font-size: 19px; font-weight: 600; color: var(--nuit); }
.bookbar__unit  { font-size: 11px; color: var(--ink-68); }
.bookbar .btn { flex: none; }

@media (min-width: 900px) {
  .bookbar { display: flex; }
}

/* Espaceur du pied de page. Cette règle doit rester la DERNIÈRE à toucher le
   padding-bottom de .site-footer : une autre déclaration écrite plus haut
   serait écrasée sans avertissement. Les deux jetons s'annulent mutuellement,
   --appnav-h valant 0 au-dessus de 900 px et --bookbar-h en dessous. */
.site-footer { padding-bottom: calc(var(--py) + var(--appnav-h) + var(--bookbar-h)); }

/* ── Pages de texte (légales, 404) ──────────────────────── */
.legal { display: flex; flex-direction: column; gap: var(--glg); }
.legal__head { display: flex; flex-direction: column; gap: 14px; }
.legal__body { max-width: 68ch; }
.legal__body h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: var(--h4); line-height: 1.2;
  margin: 40px 0 14px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body p { font-size: 15px; line-height: 1.8; color: var(--ink-82); margin-bottom: 14px; }
.legal__body ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.legal__body li {
  position: relative; padding-left: 22px;
  font-size: 15px; line-height: 1.8; color: var(--ink-82);
}
.legal__body li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 6px; height: 6px; background: var(--nuit);
}
.legal__body strong { font-weight: 600; color: var(--ink); }
.legal__body a { color: var(--nuit); text-decoration: underline; text-underline-offset: 3px; }
.legal__update {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-68);
}

.section--error { min-height: 52vh; display: flex; align-items: center; }
.error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }

/* ── Mouvement réduit ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Le diaporama se fige sur la première image plutôt que de disparaître. */
  .hero__slides img { animation: none !important; opacity: 0; }
  .hero__slides img:first-child { opacity: 1; }
}