/* ══════════════════════════════════════════════════════════
   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);
  /* Hauteur du bandeau de réservation, seule barre basse du site depuis qu'il a
     remplacé la barre d'onglets. Elle sert à deux endroits couplés : le
     margin-top négatif du bandeau et le padding-bottom du pied de page. Si le
     jeton et la hauteur réelle divergent, le pied de page rouvre un vide ou le
     bandeau mord sur le contenu. Mesurer après toute modification. */
  --bookbar-h: 80px;

  /* 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;
    /* 64 de vignette + 2 x 10 de marge + 1 de filet. Mesuré, pas estimé. */
    --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; }

/* Bouton « Menu », mobile uniquement. Il prend la place du bouton d'action en
   haut à droite : la réservation est désormais portée en permanence par le
   bandeau bas, la navigation avait besoin d'une porte. */
.navtoggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-right: -14px;
  color: var(--nuit);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  /* 44 px de cible tactile, la valeur plancher des recommandations. */
  min-height: 44px;
}
.navtoggle__bars { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.navtoggle__bars span { height: 1px; background: currentColor; }
/* Le filet du milieu est plus court : le bouton se reconnaît d'un coup d'oeil
   sans ajouter ni fond ni bordure, que la charte exclut. */
.navtoggle__bars span:nth-child(2) { width: 13px; }

/* Deux classes pour battre .btn à spécificité égale : .site-nav__cta seul
   (0,0,1,0) ne l'emporterait que par l'ordre du fichier, ce qui casse dès
   qu'on déplace une règle. */
.site-nav .site-nav__cta { display: none; }

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

/* ── Menu mobile ────────────────────────────────────────── */
/* <dialog> natif ouvert par [data-open] : piège du focus, Échap et clic sur le
   fond viennent du navigateur, main.js n'a rien à ajouter.
   Il occupe toute la fenêtre plutôt qu'une carte centrée : sur un téléphone,
   une demi-fenêtre laisse croire qu'il reste du contenu derrière. */
.menu {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink);
  flex-direction: column;
}
/* Sur [open] et non sur .menu : un <dialog> vaut display:none tant qu'il est
   fermé, et une déclaration de display sans garde le rendrait visible en
   permanence, par-dessus la page. */
.menu[open] { display: flex; }
.menu::backdrop { background: rgba(10, 14, 11, .72); }
.menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--px) 16px calc(var(--px) - 2px);
  border-bottom: 1px solid var(--line);
  padding-top: calc(16px + var(--safetop));
}
.menu__brand { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; letter-spacing: .02em; }
.menu__close { display: flex; padding: 11px; margin-right: -11px; color: var(--ink-72); min-height: 44px; }
.menu__close:hover { color: var(--nuit); }

.menu__body { flex: 1; overflow-y: auto; padding: 22px var(--px) 28px; }
.menu__label {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-68); padding-bottom: 10px;
}
.menu__label + .menu__list { border-top: 1px solid var(--line); }
.menu__list + .menu__label { padding-top: 30px; }

/* Une ligne par page, en serif et grande : c'est la liste qu'on lit en
   diagonale, pas un menu déroulant de tableau de bord. */
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__list a {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 0; min-height: 56px;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 27px; line-height: 1.15;
  color: var(--ink);
}
.menu__list a.is-current { color: var(--nuit); }
.menu__list a.is-current::after {
  content: ''; width: 5px; height: 5px; background: var(--nuit); margin-left: 2px;
}
/* Les ancres de la page courante sont secondaires : plus petites, en sans. */
.menu__list--anchors a {
  font-family: inherit; font-size: 15px; letter-spacing: .01em;
  padding: 14px 0; min-height: 48px; color: var(--ink-82);
}
.menu__list--anchors svg { flex: none; color: var(--nuit); }

.menu__foot {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px var(--px) calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--stone);
}
.menu__cta { width: 100%; padding: 17px 24px; margin-bottom: 8px; }
/* Une adresse et un numéro se tapent du pouce : 44 px de haut, le plancher des
   recommandations. Sans ce padding ils ne faisaient que la hauteur du texte. */
.menu__contact {
  display: flex; align-items: center; min-height: 44px;
  font-size: 13px; color: var(--ink-72);
}
.menu__contact:hover { color: var(--nuit); }

@media (min-width: 900px) {
  .menu[open] { display: none; }
}

/* ── 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));
}
/* Le hero de l'accueil est dimensionné pour remplir la fenêtre, et son bloc de
   texte est collé en bas (justify-content: flex-end). Le bandeau de réservation,
   lui, se superpose aux 85 derniers pixels de la fenêtre : sans cette réserve,
   il recouvrait la fin de l'accroche et les libellés des trois chiffres dès
   l'arrivée sur la page, avant tout défilement (66 px mesurés à 1900x900).
   Desktop uniquement : sous 900 px le hero est figé à --heroh (560 px) et
   s'arrête bien au-dessus du bandeau, la réserve ne ferait qu'un trou.
   Les heros de pages internes (.hero--page) sont plus courts que la fenêtre et
   n'en ont pas besoin non plus. */
@media (min-width: 900px) {
  .hero:not(.hero--page) .hero__body {
    padding-bottom: calc(var(--heropad) + var(--bookbar-h));
  }
}

.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; }
/* Badge reCAPTCHA v3 masqué : fixé en bas à droite, il couvrirait le bouton du
   bandeau de réservation. La mention écrite sous la liste de diffusion le
   remplace, comme Google l'autorise (règle du parc). visibility et non
   display:none, qui couperait le contrôle. Inerte tant que le .env n'a pas de clés. */
.grecaptcha-badge { visibility: hidden !important; }

.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; }

/* ── Bandeau de réservation (toutes largeurs) ───────────── */
/* Une seule barre basse, à toutes les largeurs : elle a remplacé la barre
   d'onglets mobile, dont les cinq colonnes disaient cinq choses là où il n'y en
   a qu'une à dire. La navigation est passée dans le menu, en haut à droite.

   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: flex;
  position: sticky; bottom: 0; z-index: 30;
  align-items: center; gap: var(--gmd);
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
  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);
  /* 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));
}
/* Sous 900 px il ne reste que le prix et le bouton : 375 px ne tiennent pas la
   vignette, le nom et les trois chiffres sans devenir illisibles. Le nom du
   domaine est déjà en haut à gauche, et les chiffres sont dans le héro. */
.bookbar__id, .bookbar__facts { display: none; }

.bookbar__id { 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 { 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); }

/* En mobile le bandeau n'a que deux blocs : le prix à gauche, le bouton à
   droite. En desktop le prix repasse à droite, juste avant le bouton : le reste
   du bandeau se lit de gauche à droite et la décision est au bout. */
.bookbar__price {
  margin-right: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.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__id, .bookbar__facts { display: flex; }
  .bookbar__price {
    margin-right: 0; margin-left: auto;
    align-items: flex-end; text-align: right;
  }
}

/* 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. */
.site-footer { padding-bottom: calc(var(--py) + 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; }
}