/* =============================================================================
   MARÉVILLA — Maquette v1 (éditorial)
   Feuille de styles unique, écrite en mobile first.

   Plan du fichier
   1.  Jetons de design (variables CSS)         -> :root
   2.  Base et réinitialisation
   3.  Utilitaires réutilisables (.wrap, .btn, .eyebrow...)
   4.  En-tête, navigation, menu mobile
   5.  Bascule des « pages » (une seule page HTML, :target)
   6.  Composants d'accueil (hero, recherche, carrousel, univers...)
   7.  Page « Nos villas » (filtres, grille éditoriale)
   8.  Page « Fiche villa » (galerie, réservation, calendrier)
   9.  Page « Services »
   10. Page « Séjours / Noël »
   11. Page « Contact »
   12. Pied de page + bouton WhatsApp flottant
   13. Points de rupture (min-width: 640 / 900 / 1100 / 1200)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. JETONS DE DESIGN
   Toutes les couleurs, la typo et le rythme vertical sont ici.
   Changer une valeur ici la change partout.
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --bleu-nuit:  #1B2B43;   /* texte principal, sections d'ancrage, pied de page */
  --bleu-clair: #3C5170;   /* texte secondaire */
  --or:         #C2975A;   /* filets, pictos, petits titres décoratifs */
  --or-texte:   #7A5A2E;   /* liens dorés lisibles sur fond clair */
  --sable:      #E4DACA;   /* bordures, filets, états désactivés */
  --selection:  #E9DFCC;   /* plage de dates sélectionnée dans le calendrier */
  --encre-faible:#B4A98F;  /* dates passées / occupées */
  --rouge:      #8C3A2B;   /* messages d'erreur de formulaire */
  --whatsapp:   #25D366;   /* vert de marque WhatsApp, réservé aux badges WhatsApp */

  --appbar-h: 64px;        /* hauteur de l'appbar mobile (bas d'écran) */

  /* Fonds : c'est ici que se joue la nuance demandée */
  --blanc:  #FFFFFF;       /* fond du contenu principal */
  --ivoire: #FFFDF9;       /* surfaces surélevées : cartes, bandeaux calmes */
  --beige:  #F6F1E8;       /* fond de l'en-tête une fois défilé, sections chaudes */

  /* Typographie */
  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Rythme et gabarit */
  --marge:   clamp(20px, 5vw, 96px);   /* gouttière horizontale de page */
  --respire: clamp(56px, 9vw, 150px);  /* respiration verticale entre sections */
  --header-h: 108px;                   /* hauteur réservée à l'en-tête fixe */

  /* Transitions communes */
  --t-doux: .45s cubic-bezier(.22, .61, .36, 1);
}

/* -----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--bleu-nuit);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

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

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
}

p { margin: 0; }

a { color: var(--or-texte); text-decoration: none; transition: color var(--t-doux); }
a:hover { color: var(--bleu-nuit); }

button,
input,
select,
textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* Toute cible d'ancre se dégage de l'en-tête fixe */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* -----------------------------------------------------------------------------
   3. UTILITAIRES
   -------------------------------------------------------------------------- */

/* Conteneur : gouttière gauche/droite homogène */
.wrap { padding-inline: var(--marge); }

/* Bloc de section avec respiration verticale */
.section { padding-block: var(--respire); }
.section--flush-top { padding-top: 0; }

/* Variantes de fond — le rythme des blocs.
   Par défaut une section est blanche (fond du body). On alterne ensuite :
   .section--beige  -> fond beige chaud, cerné d'un filet
   .section--ivoire -> blanc cassé, nuance la plus discrète
   .section--nuit   -> fond bleu nuit, texte clair (bloc d'accent)
   Pour changer le rythme d'un bloc : ajoute/retire une de ces classes
   sur la balise <section> correspondante dans le HTML. */
.section--ivoire { background: var(--ivoire); border-block: 1px solid var(--sable); }
.section--beige  { background: var(--beige);  border-block: 1px solid var(--sable); }
.section--nuit   { background: var(--bleu-nuit); color: var(--ivoire); }
.section--hairline { border-top: 1px solid var(--sable); }

/* Boutons et petits éléments posés sur un bloc bleu nuit */
.section--nuit .btn { border-color: var(--ivoire); color: var(--ivoire); }
.section--nuit .btn:hover { background: var(--ivoire); color: var(--bleu-nuit); }
.section--nuit .muted { color: rgba(255, 253, 249, .72); }

/* Petit intitulé doré en capitales */
.eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.eyebrow--light { color: var(--or); }

/* Texte secondaire */
.muted { color: var(--bleu-clair); }
.lead { font-size: clamp(17px, 2vw, 19px); line-height: 1.72; }

/* Filet horizontal court */
.rule-h {
  display: block;
  width: 64px;
  height: 1px;
  margin: 28px 0;
  background: var(--or);
}

/* Chiffres alignés (prix, dates, distances) */
.nums { font-variant-numeric: lining-nums tabular-nums; }

/* Boutons */
.btn {
  display: inline-block;
  padding: 16px 38px;
  border: 1px solid var(--bleu-nuit);
  background: none;
  color: var(--bleu-nuit);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-doux), color var(--t-doux);
}
.btn:hover { background: var(--bleu-nuit); color: var(--ivoire); }

.btn--solid { background: var(--bleu-nuit); color: var(--ivoire); }
.btn--solid:hover { background: #12203a; color: var(--ivoire); }

.btn--block { display: block; width: 100%; text-align: center; }

/* Lien souligné en petites capitales — aussi posé sur des <button> (ex.
   « Tout afficher »), donc on annule explicitement l'apparence par
   défaut du bouton (fond, bordure pleine, curseur) plutôt que de ne
   garder que le filet du bas. */
.link-cap {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0 0 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or-texte);
  border-bottom: 1px solid var(--or);
  cursor: pointer;
  transition: color var(--t-doux);
}
.link-cap:hover { color: var(--bleu-nuit); }

/* Titre de section avec sous-titre à côté */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sable);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.section-head h2 { font-size: clamp(24px, 3vw, 34px); }

/* Lien d'évitement clavier */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bleu-nuit);
  color: var(--ivoire);
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--ivoire); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   4. EN-TÊTE + NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--ivoire);
  border-bottom: 1px solid transparent;
  transition: background var(--t-doux), color var(--t-doux), border-color var(--t-doux);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--marge);
  min-height: 68px;
}

/* Logo : deux lockups, chacun avec ses fichiers SVG dans maquettes/logo/,
   échangés par le script selon l'état (voir §JS) :
   - vertical (mobile, <900px)   : logo_white.svg / logo-bicolor-navy.svg
   - horizontal (desktop, ≥900px, voir le point de rupture 900px) :
     logo-inline-bicolor-white.svg / logo-inline-bicolor-bleu.svg
   Dans les deux cas : blanc sur la photo, bicolore (bleu nuit + or) une
   fois défilé. Le pied de page a son propre fichier bicolore (beige + or). */
.logo { display: block; flex: 1; text-align: center; }
.logo .brand-logo {
  display: inline-block;
  width: clamp(96px, 25vw, 122px);
  height: auto;
  filter: drop-shadow(0 1px 10px rgba(27, 43, 67, .45));
  transition: filter var(--t-doux);
}

/* Lockup horizontal : masqué par défaut, ne s'affiche qu'au-dessus de
   900px (voir ce point de rupture plus bas). Sélecteur .logo
   .brand-logo--inline (et non .brand-logo--inline seul) pour l'emporter
   sur .logo .brand-logo ci-dessus, qui fixe déjà display:inline-block
   avec la même spécificité. */
.logo .brand-logo--inline { display: none; }

/* État défilé / pages sans hero photo : fond beige, encre bleue */
.site-header.is-scrolled {
  background: var(--beige);
  color: var(--bleu-nuit);
  border-bottom-color: var(--or);
}
.site-header.is-scrolled .logo .brand-logo { filter: none; }

/* Navigation bureau : masquée en mobile (remplacée par l'appbar du bas, §4b) */
.nav { display: none; }
.nav__link {
  position: relative;
  color: inherit;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Soulignement toujours or, y compris par-dessus la photo : plus lisible
   qu'un trait blanc et cohérent avec l'accent du logo au même endroit. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-doux);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__sep { width: 1px; height: 14px; background: var(--or); opacity: .6; }

.lang { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .14em; }
.lang button { background: none; border: 0; padding: 4px; cursor: pointer; font-weight: 500; letter-spacing: .14em; color: inherit; }
.lang button[aria-pressed="false"] { opacity: .5; }

/* FR/EN affiché à droite de l'en-tête mobile (le même bloc, dans .nav,
   sert au bureau — voir le point de rupture 900px plus bas) */
.lang--mobile { display: flex; }

/* Rond WhatsApp de l'en-tête (mobile) : pas de vert de marque ici, juste
   le pictogramme dans la couleur du site — ivoire sur la photo, bleu nuit
   une fois défilé, comme le logo et la navigation à côté de lui. */
.wa-round {
  display: grid;
  place-content: center;
  width: 44px; height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
}
.wa-round svg { width: 22px; height: 22px; fill: currentColor; }

/* -----------------------------------------------------------------------------
   Badge WhatsApp vert — réservé au widget flottant (§12). Toujours juste
   le pictogramme, sans texte.
   -------------------------------------------------------------------------- */
.wa-badge {
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: filter var(--t-doux);
}
.wa-badge:hover { filter: brightness(1.06); }
.wa-badge svg { display: block; fill: currentColor; }

/* -----------------------------------------------------------------------------
   4b. APPBAR MOBILE
   Barre de navigation fixée en bas de l'écran, façon application : les
   quatre destinations du menu (Accueil, Nos villas, Services, Contact),
   chacune avec un pictogramme et son intitulé. Remplace le menu plein
   écran en dessous de 900px ; au-dessus, .nav prend le relais et l'appbar
   disparaît (voir le point de rupture 900px).
   -------------------------------------------------------------------------- */
.appbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ivoire);
  border-top: 1px solid var(--sable);
  box-shadow: 0 -4px 18px rgba(27, 43, 67, .08);
}
.appbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--appbar-h);
  color: var(--bleu-clair);
}
.appbar__item svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.appbar__item span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}
.appbar__item.is-active { color: var(--bleu-nuit); }
.appbar__item.is-active svg { stroke-width: 1.8; }

/* La page défile derrière l'appbar : on réserve sa hauteur en bas.
   Sur la fiche villa, la barre de réservation mobile vient se poser
   juste au-dessus (voir .booking-bar plus bas). */
body { padding-bottom: var(--appbar-h); }

/* -----------------------------------------------------------------------------
   5. BASCULE DES « PAGES »
   Toutes les vues sont dans le même fichier HTML. On n'affiche que celle
   dont l'identifiant est dans l'URL (#nos-villas, #contact...).

   Deux mécanismes se complètent :
   - .page:target        -> CSS pur, marche même sans JavaScript ;
   - .page.is-shown      -> posé par le script, gère la vue par défaut
                            (#accueil) et les ancres internes (#noel-faire).
   -------------------------------------------------------------------------- */
.page { display: none; }
.page:target,
.page.is-shown { display: block; }

/* -----------------------------------------------------------------------------
   6. ACCUEIL — HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(27, 43, 67, .72) 0%,
    rgba(27, 43, 67, .28) 38%,
    rgba(27, 43, 67, .10) 62%,
    rgba(27, 43, 67, .22) 100%);
}
.hero__content {
  position: relative;
  width: 100%;
  padding: 0 var(--marge) clamp(48px, 9vh, 104px);
  color: var(--ivoire);
}
.hero__kicker {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .9;
}
.hero__title {
  max-width: 22ch;
  font-size: clamp(34px, 7vw, 84px);
  line-height: 1.04;
  letter-spacing: -.005em;
}
.hero__title small {
  display: block;
  font-size: .42em;
  letter-spacing: .2em;
  margin-bottom: .5em;
}

/* Variante hero plus sombre pour la landing Noël */
.hero--dark .hero__veil {
  background: linear-gradient(to top,
    rgba(27, 43, 67, .90) 0%,
    rgba(27, 43, 67, .72) 34%,
    rgba(27, 43, 67, .34) 72%,
    rgba(27, 43, 67, .18) 100%);
}
.hero--short { min-height: clamp(420px, 62svh, 620px); }

/* -----------------------------------------------------------------------------
   6b. BARRE DE RECHERCHE
   -------------------------------------------------------------------------- */
.searchbar {
  position: relative;
  z-index: 20;
  margin: -44px var(--marge) 0;
  background: var(--ivoire);
  border: 1px solid var(--sable);
}
.searchbar__grid { display: grid; }
.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 64px;
  padding: 12px 20px;
  background: none;
  border: 0;
  border-top: 1px solid var(--sable);
  text-align: left;
  cursor: pointer;
}
.field__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}
.field__value { font-family: var(--serif); font-size: 17px; }
.searchbar__submit {
  min-height: 64px;
  padding: 18px 34px;
  background: var(--bleu-nuit);
  color: var(--ivoire);
  border: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-doux);
}
.searchbar__submit:hover { background: #12203a; }

/* Panneau dépliable (calendrier) : <details> natif, aucun JS */
.searchbar details { border-top: 1px solid var(--sable); }
.searchbar summary {
  list-style: none;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  cursor: pointer;
}
.searchbar summary::-webkit-details-marker { display: none; }
.searchbar summary::after { content: " +"; color: var(--or-texte); }
.searchbar details[open] summary::after { content: " −"; }

/* -----------------------------------------------------------------------------
   6c. CALENDRIER (recherche + fiche villa)
   -------------------------------------------------------------------------- */
.calendar { padding: 8px 20px 28px; }
.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.calendar__nav p {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}
.calendar__btn {
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--sable);
  cursor: pointer;
}
/* justify-content: start évite qu'une colonne "auto" (non fractionnée)
   n'absorbe l'espace libre du conteneur — sinon les mois s'écartent
   quand même l'un de l'autre malgré leur largeur plafonnée. */
.calendar__months { display: grid; gap: 24px; justify-content: start; }
/* Largeur plafonnée : sans elle, chaque case grandit avec la largeur de la
   barre de recherche ou de l'encart tarifs, et le calendrier devient
   surdimensionné sur grand écran. */
.month { max-width: 320px; }
.month__name { font-family: var(--serif); font-size: 16px; margin-bottom: 10px; }
.month__head,
.month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.month__head span {
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}
.month__head { margin-bottom: 6px; }
.day {
  aspect-ratio: 1;
  min-height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  background: none;
  font-size: 12px;
  cursor: pointer;
  transition: box-shadow .2s, background .2s;
}
.day small { font-size: 10px; opacity: .75; }
.day:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--or); }
.day--empty { visibility: hidden; }
.day--past,
.day--busy { color: var(--encre-faible); cursor: not-allowed; }
.day--busy span:first-child { text-decoration: line-through; }
.day--between { background: var(--selection); }
.day--start,
.day--end { background: var(--bleu-nuit); color: var(--ivoire); }
.calendar__note { margin-top: 18px; font-size: 14px; color: var(--bleu-clair); }

/* -----------------------------------------------------------------------------
   6d. CARROUSEL DE MAISONS
   -------------------------------------------------------------------------- */
.carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.carousel__head h2 { font-size: clamp(28px, 4.4vw, 54px); line-height: 1.1; }
.carousel__arrows { display: none; gap: 8px; flex: 0 0 auto; }
.arrow {
  width: 48px; height: 48px;
  border: 1px solid var(--or);
  background: none;
  color: var(--bleu-nuit);
  cursor: pointer;
  transition: background var(--t-doux), color var(--t-doux);
}
.arrow:hover { background: var(--bleu-nuit); color: var(--ivoire); }

.rail {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--marge);
  padding: 0 var(--marge) 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 min(86vw, 520px); scroll-snap-align: start; }

/* Carte maison (réutilisée dans plusieurs vues) */
.villa-card { color: inherit; display: block; }
.villa-card figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.villa-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .6s var(--t-doux), filter .6s;
}
.villa-card:hover img { transform: scale(1.03); filter: saturate(.92) contrast(1.04) brightness(.92); }
.villa-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sable);
}
.villa-card__row h3 { font-size: clamp(22px, 2.4vw, 28px); }
.villa-card__price { font-family: var(--serif); font-size: 17px; white-space: nowrap; }
.villa-card__meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--bleu-clair);
}
.villa-card__meta i { width: 14px; height: 1px; background: var(--or); font-style: normal; }
.villa-card__place { margin-top: 14px; font-size: 14px; color: var(--bleu-clair); }
.villa-card__hook { margin-top: 14px; font-size: 15px; line-height: 1.65; max-width: 52ch; }

/* Puces de progression du carrousel */
.dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 24px; }
.dots span {
  display: block;
  width: 18px; height: 1px;
  background: var(--sable);
}
.dots span.is-on { width: 40px; background: var(--or); }

/* -----------------------------------------------------------------------------
   6e. BANDE D'APPEL, GRILLE DE MAISONS, SERVICES, RÉASSURANCE, AVIS, LIENS
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band p {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.22;
}
.cta-band .btn { margin-top: 36px; }

/* Grille réutilisée pour présenter d'autres maisons (fiche villa, Noël) */
.univers { display: grid; gap: clamp(20px, 2.4vw, 36px); }
/* Sur fond bleu nuit (ex. « Trois maisons pour les fêtes »), la carte
   maison doit rester lisible : les couleurs fixées à .villa-card__place et
   .villa-card__meta s'éclaircissent. */
.section--nuit .villa-card__place,
.section--nuit .villa-card__meta { color: rgba(255, 253, 249, .72); }

/* Liste des prestations */
.services { display: grid; gap: 40px; }
.services__intro h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }
.services__intro p { margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--bleu-clair); max-width: 34ch; }
.services__intro .link-cap { margin-top: 28px; }
.services__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sable); }
.services__list li {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  padding: 22px 0;
  border-bottom: 1px solid var(--sable);
}
/* Carré sobre, sans fioriture — même traitement que .calendar__btn / .arrow */
.num-tag {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 1px solid var(--or);
  display: grid;
  place-content: center;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--or-texte);
}
.services__list b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; margin-bottom: 5px; }
.services__list p { font-size: 15px; line-height: 1.62; color: var(--bleu-clair); max-width: 58ch; }

/* Réassurance */
.trust { display: grid; gap: 8px clamp(28px, 4vw, 64px); }
.trust > div { padding: 24px 0; border-top: 1px solid var(--or); }
.trust b { display: block; margin-bottom: 10px; font-family: var(--serif); font-weight: 400; font-size: 19px; }
.trust p { font-size: 15px; line-height: 1.62; color: var(--bleu-clair); max-width: 30ch; }
/* Ce bloc vit maintenant sur fond bleu nuit (voir §1) : b et h2 récupèrent
   déjà la couleur claire par héritage, seul p a une couleur fixe à corriger. */
.section--nuit .trust p { color: rgba(255, 253, 249, .72); }

/* Avis */
.reviews { display: grid; gap: clamp(24px, 3vw, 44px); }
.review { margin: 0; padding-top: 22px; border-top: 1px solid var(--or); }
.review p { font-size: 16px; line-height: 1.72; }
.review footer { margin-top: 18px; font-size: 13px; letter-spacing: .06em; color: var(--bleu-clair); }
.review footer b { display: block; font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--bleu-nuit); }

/* Listes de liens (maillage SEO, « à voir aussi ») */
.linklist { display: grid; gap: 0 clamp(32px, 5vw, 88px); }
.linklist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sable);
  color: var(--bleu-nuit);
}
.linklist a span:first-child { font-family: var(--serif); font-size: clamp(17px, 1.9vw, 21px); }
.linklist a span:last-child {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-texte);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   7. NOS VILLAS
   -------------------------------------------------------------------------- */
.crumbs {
  margin-bottom: 28px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--bleu-clair);
}
.crumbs a { color: var(--bleu-clair); }
.crumbs i {
  display: inline-block;
  width: 12px; height: 1px;
  background: var(--or);
  vertical-align: middle;
  margin: 0 10px;
}

.page-intro { padding: calc(var(--header-h) + clamp(40px, 6vw, 88px)) var(--marge) clamp(32px, 4vw, 56px); }
.page-intro h1 { font-size: clamp(32px, 5.4vw, 64px); line-height: 1.06; max-width: 18ch; }
.page-intro p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--bleu-clair); max-width: 62ch; }

/* Barre de filtres collante */
.filters {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--beige);
  border-bottom: 1px solid var(--sable);
  padding: 14px var(--marge);
}
/* Groupes de premier niveau (Disponibilité, Capacité), toujours visibles */
.filters__primary { display: flex; flex-wrap: wrap; gap: 20px 40px; }
.filters__dates { display: flex; flex-wrap: wrap; gap: 8px; }
.filters__dates input[type="date"] {
  min-height: 38px;
  padding: 8px 12px;
  background: var(--ivoire);
  border: 1px solid var(--sable);
  color: var(--bleu-nuit);
  font-size: 13px;
  font-variant-numeric: lining-nums tabular-nums;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 38px;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--sable);
  color: var(--bleu-nuit);
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s;
}
.chip[aria-pressed="true"] { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: var(--ivoire); }

.filters details { margin-top: 14px; }
.filters details > summary {
  list-style: none;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-texte);
  border-bottom: 1px solid var(--or);
  cursor: pointer;
  display: inline-block;
}
.filters details > summary::-webkit-details-marker { display: none; }
.filters__panel {
  display: grid;
  gap: 20px 34px;
  align-items: start;
  padding-top: 16px;
  margin-top: 12px;
  border-top: 1px solid var(--sable);
}
.filters__panel p.eyebrow { font-size: 10px; letter-spacing: .16em; color: var(--bleu-clair); margin-bottom: 9px; }
.filters__panel input[type="range"] { width: 100%; max-width: 260px; accent-color: var(--bleu-nuit); }

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--marge);
}
.results-bar p { font-family: var(--serif); font-size: 19px; }
.results-bar select {
  min-height: 44px;
  padding: 8px 12px;
  background: var(--ivoire);
  border: 1px solid var(--sable);
  font-size: 14px;
}

/* Grille éditoriale des maisons */
.villa-grid {
  display: grid;
  gap: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 72px);
  padding: 8px var(--marge) clamp(48px, 6vw, 88px);
}
.villa-grid article > a { display: block; color: inherit; }
.villa-grid figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.villa-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .6s var(--t-doux);
}
.villa-grid article:hover img { transform: scale(1.03); }

/* Filtrage (voir le script) : une carte qui ne correspond pas aux
   critères disparaît complètement ; une carte indisponible aux dates
   choisies reste affichée, juste atténuée — on ne la cache pas, on
   signale son indisponibilité. */
.villa-grid article.is-cachee { display: none; }
.villa-grid article.is-indispo > a { opacity: .5; }
.villa-grid article.is-indispo img { filter: saturate(.5) contrast(1.04); }
.villa-grid .avail-tag {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 1;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.avail-tag--on { background: var(--or); color: var(--bleu-nuit); }
.avail-tag--off { background: rgba(27, 43, 67, .8); color: var(--ivoire); }

.villa-grid__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sable);
}
.villa-grid__row h2 { font-size: clamp(22px, 2.6vw, 30px); }
.villa-grid__row p { font-family: var(--serif); font-size: 17px; white-space: nowrap; }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--marge) var(--respire); }
.pager span {
  display: grid;
  place-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--sable);
  color: var(--encre-faible);
  font-size: 14px;
}
.pager span[aria-current] { border-color: var(--bleu-nuit); color: var(--bleu-nuit); }

/* -----------------------------------------------------------------------------
   8. FICHE VILLA
   -------------------------------------------------------------------------- */
.villa-title { padding: calc(var(--header-h) + clamp(32px, 4vw, 56px)) var(--marge) 0; }
.villa-title__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}
.villa-title h1 { font-size: clamp(32px, 5vw, 60px); line-height: 1.06; }

.gallery { display: grid; gap: 8px; padding: 0 var(--marge); }
.gallery__main {
  position: relative;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery__grid button {
  position: relative;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .6s var(--t-doux);
}
.gallery button:hover img { transform: scale(1.03); }

/* Légende posée sur chaque photo : identifie la pièce (cuisine, chambre 1…) */
.gallery__tag {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 1;
  padding: 6px 12px;
  background: rgba(27, 43, 67, .68);
  color: var(--ivoire);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.villa-layout { display: grid; gap: 48px; padding: clamp(40px, 5vw, 72px) var(--marge) var(--respire); }
.villa-body > p { font-size: 17px; line-height: 1.72; max-width: 70ch; }
.villa-body > p + p { margin-top: 18px; }
.villa-body__chapo { font-size: clamp(19px, 2.2vw, 24px); font-family: var(--serif); line-height: 1.5; max-width: 46ch; }
.villa-body h2 { margin: clamp(48px, 5vw, 72px) 0 24px; font-size: clamp(24px, 2.8vw, 32px); }

.equip { display: grid; gap: 28px clamp(32px, 4vw, 64px); }
.equip h3 {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.equip ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.8; }

.proximity { list-style: none; margin: 0; padding: 0; }
.proximity li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sable);
  font-size: 16px;
}
.proximity li span:last-child { color: var(--bleu-clair); }

.avail { border: 1px solid var(--sable); background: var(--ivoire); padding: 24px 20px; }
.services-here { display: grid; gap: 18px clamp(32px, 4vw, 64px); }
.services-here p { padding-top: 16px; border-top: 1px solid var(--or); font-size: 16px; line-height: 1.65; }

.review-stack { display: flex; flex-direction: column; gap: 26px; }
.review-stack blockquote { margin: 0; padding-top: 20px; border-top: 1px solid var(--sable); }
.review-stack p { font-size: 16px; line-height: 1.7; max-width: 70ch; }
.review-stack footer { margin-top: 14px; font-size: 13px; color: var(--bleu-clair); }
.review-stack footer b { font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--bleu-nuit); }

/* Accordéon FAQ : <details>/<summary> natifs */
.faq { border-top: 1px solid var(--sable); }
.faq details { border-bottom: 1px solid var(--sable); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--bleu-nuit);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; color: var(--or-texte); font-size: 20px; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 22px; }
.faq details p { font-size: 16px; line-height: 1.72; max-width: 70ch; color: var(--bleu-clair); }

/* Encart réservation */
.booking { background: var(--ivoire); border: 1px solid var(--sable); padding: 26px 24px; }
.booking__price { font-family: var(--serif); font-size: 26px; }
.booking__unit { margin: 4px 0 22px; font-size: 13px; letter-spacing: .06em; color: var(--bleu-clair); }
.booking__fields { border: 1px solid var(--sable); }
.booking__fields button {
  width: 100%;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sable);
  cursor: pointer;
  text-align: left;
}
.booking__fields button:last-child { border-bottom: 0; }
.booking__fields span:first-child {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}
.booking__fields span:last-child { font-family: var(--serif); font-size: 16px; }
.booking__total { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--or); }
.booking__total p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--bleu-clair);
}
.booking__total p.grand { margin-top: 10px; font-family: var(--serif); font-size: 20px; color: var(--bleu-nuit); }
.booking .btn { margin-top: 22px; }
.booking__fine { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--bleu-clair); }
.booking__free { margin-top: 14px; font-size: 13px; text-align: center; color: var(--or-texte); }

/* Barre de réservation mobile fixe — posée juste au-dessus de l'appbar */
.booking-bar {
  position: fixed;
  inset: auto 0 var(--appbar-h) 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: var(--ivoire);
  border-top: 1px solid var(--or);
}
.booking-bar b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; }
.booking-bar small { display: block; font-size: 12px; color: var(--bleu-clair); }
.booking-bar .btn { padding: 14px 24px; }

/* -----------------------------------------------------------------------------
   9. SERVICES (vue dédiée)
   -------------------------------------------------------------------------- */
.alt-blocks { padding: 0 var(--marge) var(--respire); display: flex; flex-direction: column; gap: clamp(56px, 7vw, 120px); }
.alt-block { display: grid; gap: clamp(24px, 3vw, 56px); align-items: center; }
.alt-block figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.alt-block figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .6s var(--t-doux);
}
.alt-block:hover figure img { transform: scale(1.03); }
.alt-block h2 { margin: 0 0 18px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; }
.alt-block p { font-size: 17px; line-height: 1.72; max-width: 52ch; }
.alt-block p + p { margin-top: 14px; }

.steps { display: grid; gap: 0 clamp(24px, 3vw, 48px); }
.steps > div { padding: 22px 0; border-top: 1px solid var(--or); }
.steps .num-tag { margin-bottom: 16px; }
.steps h3 { margin: 0 0 10px; font-size: 20px; }
.steps p { font-size: 15px; line-height: 1.65; color: var(--bleu-clair); }

/* -----------------------------------------------------------------------------
   10. SÉJOURS / NOËL
   -------------------------------------------------------------------------- */
.article-layout { display: grid; gap: 40px; padding: var(--respire) var(--marge); }
.article-toc { align-self: start; }
.article-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.article-body h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.14; }
.article-body h2:not(:first-child) { margin-top: 44px; }
.article-body h3 { margin: 32px 0 14px; font-size: 22px; }
.article-body p { font-size: 17px; line-height: 1.72; max-width: 70ch; }
.article-body p + p,
.article-body h2 + p,
.article-body h3 + p { margin-top: 16px; }
.article-body .btn { margin-top: 16px; }

/* -----------------------------------------------------------------------------
   11. CONTACT
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; gap: 48px; padding: 0 var(--marge) var(--respire); }
/* Le formulaire est plafonné : sans ça, sur un écran large, il s'étire
   dans toute la colonne flexible et la colonne de coordonnées paraît
   étriquée à côté. */
.contact-form { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.contact-form__grid { display: grid; gap: 22px; }
/* Nom et prénom occupe sa ligne à lui seul ; téléphone et e-mail se
   partagent la suivante (uniquement à partir de 640px, voir plus bas —
   en mobile tout reste empilé, une ligne par champ). */
.contact-form__full { grid-column: 1 / -1; }
.contact-form label { display: block; }
.contact-form label > span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--ivoire);
  border: 1px solid var(--sable);
}
.contact-form textarea { resize: vertical; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.contact-form__note { font-size: 13px; line-height: 1.6; color: var(--bleu-clair); max-width: 60ch; }

.contact-aside { display: flex; flex-direction: column; gap: 28px; }
.contact-card { background: var(--ivoire); border: 1px solid var(--sable); padding: 24px; }
.contact-card p { font-size: 16px; line-height: 1.7; }
.contact-card p + p { margin-top: 12px; }
.contact-card .btn { margin-top: 18px; padding: 14px 26px; }
.contact-hours p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sable);
}
.contact-hours p + p { margin-top: 8px; }
.contact-hours p:last-child { border-bottom: 0; color: var(--bleu-clair); font-size: 14px; }

/* -----------------------------------------------------------------------------
   12. PIED DE PAGE + WHATSAPP FLOTTANT
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bleu-nuit);
  color: rgba(255, 253, 249, .8);
  padding: clamp(56px, 7vw, 96px) var(--marge) 40px;
}
.site-footer__grid { display: grid; gap: clamp(32px, 4vw, 56px); }
.site-footer .brand-logo { display: block; width: 156px; height: auto; margin-bottom: 24px; }
.site-footer h2 {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
/* Un lien se reconnaît à sa couleur — or, comme partout ailleurs sur le
   site pour un élément interactif (eyebrow, link-cap, puces actives…) —
   plutôt qu'à un soulignement : le texte simple (adresse, description)
   reste dans le blanc cassé du pied de page, plus sourd. */
.site-footer a { color: var(--or); }
.site-footer a:hover { color: var(--ivoire); }
.site-footer p { font-size: 15px; line-height: 1.7; }
.site-footer__social { display: flex; gap: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 18px; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgba(196, 151, 90, .4);
  font-size: 12px;
  letter-spacing: .06em;
}
.site-footer__copy { color: rgba(255, 253, 249, .65); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* Widget flottant : uniquement le pictogramme, rond, vert WhatsApp —
   posé au-dessus de l'appbar mobile pour ne jamais la chevaucher. */
.wa-float.wa-badge {
  position: fixed;
  right: 20px;
  bottom: calc(var(--appbar-h) + 16px);
  z-index: 66;
  width: 56px; height: 56px;
  transition: bottom var(--t-doux), filter var(--t-doux);
}
.wa-float.wa-badge svg { width: 30px; height: 30px; }
/* Fiche villa (mobile) : la barre de réservation fixe s'intercale entre
   l'appbar et le widget, qui remonte d'autant. */
body.has-booking-bar .wa-float.wa-badge { bottom: calc(var(--appbar-h) + 84px); }

/* =============================================================================
   13. POINTS DE RUPTURE
   Base = mobile. On élargit ensuite.
   ========================================================================== */

/* ---- 640 px : on passe en deux colonnes sur les grilles simples --------- */
@media (min-width: 640px) {
  .searchbar__grid { grid-template-columns: 1fr 1fr; }
  .univers { grid-template-columns: repeat(3, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .villa-grid { grid-template-columns: repeat(2, 1fr); }
  .linklist { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .equip { grid-template-columns: repeat(2, 1fr); }
  .filters__panel { grid-template-columns: repeat(2, auto); }
  .contact-form__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 900 px : mise en page « bureau » ---------------------------------- */
@media (min-width: 900px) {
  :root { --header-h: 128px; }

  .site-header__inner { min-height: 88px; }
  .logo { flex: 0 0 auto; text-align: left; }

  /* Au-dessus de 900px, le lockup horizontal remplace le vertical dans
     les deux états (photo et défilé) — seul le fichier change (voir §JS),
     pas la taille. Son ratio bien plus plat (3,75:1 contre ~1,2:1 pour le
     vertical) le rend naturellement plus bas à largeur égale : on le
     dimensionne donc en hauteur plutôt qu'en largeur. */
  .logo .brand-logo:not(.brand-logo--inline) { display: none; }
  .logo .brand-logo--inline {
    display: inline-block;
    width: auto;
    height: clamp(76px, 6.5vw, 92px);
  }

  /* La navigation bureau apparaît ; le rond WhatsApp de l'en-tête, le
     sélecteur de langue mobile et l'appbar du bas partent avec elle. */
  .nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; }
  .site-header .wa-round,
  .lang--mobile,
  .appbar { display: none; }
  .booking-bar { display: none; }
  body { padding-bottom: 0; }
  .wa-float.wa-badge,
  body.has-booking-bar .wa-float.wa-badge { bottom: 20px; }

  .searchbar__grid { grid-template-columns: 1.15fr 1.15fr 1fr auto; }
  .searchbar .field { border-top: 0; border-left: 1px solid var(--sable); }
  .searchbar .field:first-child { border-left: 0; }

  .carousel__arrows { display: flex; }

  .services { grid-template-columns: 320px 1fr; gap: 64px; }
  .services__intro { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
  .trust { grid-template-columns: repeat(4, 1fr); }

  /* Chemin de fer du listing : 2 portraits, puis 1 pleine largeur */
  .villa-grid { grid-template-columns: repeat(12, 1fr); }
  .villa-grid article { grid-column: span 6; }
  .villa-grid article.is-wide { grid-column: span 12; }
  .villa-grid article.is-wide > a {
    display: grid;
    grid-template-columns: 1.9fr 1fr;
    column-gap: clamp(28px, 3vw, 56px);
    align-items: end;
  }
  .villa-grid article.is-wide figure { grid-column: 1; grid-row: 1 / -1; aspect-ratio: 16 / 9; }
  .villa-grid article.is-wide > a > *:not(figure) { grid-column: 2; }

  .gallery { grid-template-columns: 2fr 1fr; }
  .gallery__main { aspect-ratio: auto; }

  .alt-block { grid-template-columns: 1fr 1fr; }
  .alt-block:nth-child(even) figure { order: 2; }
  .steps { grid-template-columns: repeat(4, 1fr); }

  .article-layout { grid-template-columns: 320px 1fr; gap: 64px; }

  .contact-layout { grid-template-columns: minmax(0, 1fr) 400px; }

  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

/* ---- 1100 px : fiche villa en deux colonnes avec encart collant ------- */
@media (min-width: 1100px) {
  .villa-layout { grid-template-columns: minmax(0, 1fr) 372px; gap: 64px; align-items: start; }
  .booking { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---- 1200 px : deux mois de calendrier côte à côte -------------------
   Colonnes "auto" plutôt que 1fr : chaque mois (plafonné à 320px, voir §6c)
   garde sa largeur naturelle au lieu de s'étirer sur la moitié du
   conteneur — sinon, sur une barre de recherche pleine largeur, l'écart
   entre juillet et août devient un vide énorme. */
@media (min-width: 1200px) {
  .calendar__months { grid-template-columns: repeat(2, auto); }
  .hero__title { max-width: 15ch; }
}