/* =====================================================================
   Villas Riviera · Location — feuille de style (refonte v12)
   Référence : maquette/ et docs/notes-alexia.md
   Anti-cache : les pages appellent styles.css?v=N. Incrémenter N dans
   generer.py (constante VERSION) à chaque modification, puis régénérer.
   ===================================================================== */

/* Polices servies par le site (Open Font License), sous-ensemble latin.
   Aucune requête vers Google : l'adresse IP des visiteurs n'est pas transmise. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/open-sans.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: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/playfair-display-italique.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: 'Playfair Display'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/playfair-display.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; }

:root {
  --vert: #16333d;          /* fonds, boutons, titres : bleu foncé de la charte d'Éric (choix de Grégory, 12 oct.) */
  --vert-2: #1f4350;
  --vert-3: #10272f;
  --vert-4: #0b1d23;
  --texte: #505c55;         /* texte courant */
  --encre: #2f3b36;         /* texte fort sur blanc */
  --sauge: #7f9a8f;
  --libelle: #5f7368;       /* libellés (contraste AA) */
  --or: #b9954e;            /* or sur blanc */
  --or-clair: #d9bc7a;      /* or sur fond foncé */
  --ivoire: #e9dfc6;
  --ivoire-2: #f2ede2;
  --sable: #e9e3d3;
  --sable-2: #e1dbc9;
  --beige: #f3efe6;
  --ligne: #e4e0db;
  --blanc: #ffffff;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --marge: 80px;            /* marge latérale desktop */
  --largeur: 1280px;
  --nav-h: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.9;
  color: var(--texte);
  background: var(--beige);   /* fond sable partout (Grégory, 12 oct.) ; les cases restent blanches */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--vert); }
a:hover { color: #2d5463; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

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

.container { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }
.section { padding: 88px 0; }

/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--vert); margin: 0; }
.titre { font-size: 46px; line-height: 1.15; }
.titre--clair { color: #f2efe8; }
.filet { width: 48px; height: 1px; background: var(--or); }

/* Sur-titre encadré de filets or (motif Emile Garcin) */
.eyebrow {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.36em; text-transform: uppercase; color: var(--or);
}
.eyebrow::before { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; opacity: 0.9; }
.eyebrow--center { justify-content: center; text-align: center; }
.eyebrow--center::before, .eyebrow--center::after { content: ""; flex: 0 0 56px; height: 1px; background: currentColor; opacity: 0.9; }
.eyebrow--clair { color: var(--or-clair); }
.eyebrow--petit { font-size: 10px; letter-spacing: 0.32em; gap: 12px; }
.eyebrow--petit.eyebrow--center::before, .eyebrow--petit.eyebrow--center::after { flex-basis: 28px; }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 26px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--vert); color: var(--blanc); text-decoration: none;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  border-bottom: 2px solid var(--or);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--vert-2); color: var(--blanc); }
.btn--blanc { background: var(--blanc); color: var(--vert); border-bottom: 0; }
.btn--blanc:hover { background: var(--ivoire-2); color: var(--vert); }
.btn--ghost { background: transparent; color: var(--blanc); border: 1px solid rgba(255,255,255,0.7); }
.btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--blanc); }
.btn--contour { background: transparent; color: var(--vert); border: 1px solid var(--vert); }
.btn--contour:hover { background: var(--vert); color: var(--blanc); }
.btn--large { width: 100%; height: 54px; font-size: 12px; letter-spacing: 0.28em; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.lien-filet {
  display: inline-block; padding-bottom: 6px; border-bottom: 1px solid var(--or);
  font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--vert); text-decoration: none; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
}
.lien-filet:hover { color: var(--or); }
.lien-filet--clair { color: var(--blanc); border-bottom-color: var(--or-clair); }
.lien-filet--clair:hover { color: var(--or-clair); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  color: var(--blanc);
  background: linear-gradient(180deg, var(--vert-2) 0%, var(--vert) 100%);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav--transparente { background: linear-gradient(180deg, rgba(0,25,28,0.35) 0%, rgba(0,25,28,0) 100%); }
.nav--transparente.nav--solide { background: var(--vert); box-shadow: 0 1px 0 rgba(217,188,122,0.18); }
.nav__inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto;
}
.nav__logo { display: flex; flex-shrink: 0; }
.nav__logo img { height: 40px; width: auto; }
.nav__logo--complet img { height: 44px; filter: saturate(0.55) brightness(1.05); }
.nav__droite { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.nav__contacts { display: flex; gap: 22px; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,0.82); }
.nav__contacts a, .nav__contacts span { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.nav__contacts a:hover { color: var(--or-clair); }
.nav__contacts svg { width: 14px; height: 14px; }
.langues { letter-spacing: 0.1em; }
.langues b { font-weight: 600; color: var(--blanc); }
.nav__menu { display: flex; align-items: center; gap: 30px; }
.nav__menu a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blanc); text-decoration: none; line-height: 1.4;
}
.nav__menu a:not(.nav__reserver):hover { color: var(--or-clair); }
.nav__reserver {
  display: inline-flex; align-items: center; height: 42px; padding: 0 22px;
  border: 1px solid rgba(255,255,255,0.75);
}
.nav__reserver:hover { background: rgba(255,255,255,0.1); }
.nav--pleine .nav__reserver { background: var(--blanc); color: var(--vert) !important; border-color: var(--blanc); }
.nav--pleine .nav__reserver:hover { background: var(--ivoire-2); }
.nav__burger {
  display: none; width: 44px; height: 44px; padding: 10px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; color: var(--blanc);
}
.nav__burger span { display: block; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform 0.25s, opacity 0.25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav__panneau { display: none; }

/* Pages sans héro : on laisse la place à la nav fixe */
.page-pleine { padding-top: var(--nav-h); }

/* ---------- Héro (accueil) ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--vert);
  height: 100vh; height: 100svh; min-height: 640px; max-height: 900px;
  color: var(--blanc);
}
.hero__diapos { position: absolute; inset: 0; }
.hero__diapo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: heroFondu 26s ease-in-out infinite; will-change: opacity, transform;
  filter: brightness(1.12) saturate(1.06); /* photos plus lumineuses (demande de Grégory, 9 oct.) */
}
/* Délai négatif : la première photo est déjà visible au chargement */
.hero__diapo:nth-child(1) { animation-delay: -1.56s; opacity: 1; }
.hero__diapo:nth-child(2) { animation-delay: 3.64s; }
.hero__diapo:nth-child(3) { animation-delay: 8.84s; }
.hero__diapo:nth-child(4) { animation-delay: 14.04s; }
.hero__diapo:nth-child(5) { animation-delay: 19.24s; }
@keyframes heroFondu {
  0% { opacity: 0; transform: scale(1.02); }
  6% { opacity: 1; }
  24% { opacity: 1; }
  32% { opacity: 0; transform: scale(1.10); }
  100% { opacity: 0; transform: scale(1.10); }
}
.hero__voile {
  position: absolute; inset: 0;
  /* Voile allégé (9 oct.) : plus sombre seulement derrière la nav, le texte du centre et le bas */
  background:
    radial-gradient(ellipse 60% 42% at 50% 54%, rgba(0,30,35,0.30) 0%, rgba(0,30,35,0) 100%),
    linear-gradient(180deg, rgba(0,35,40,0.45) 0%, rgba(0,35,40,0.12) 28%, rgba(0,35,40,0.12) 72%, rgba(0,35,40,0.45) 100%);
}
.hero__contenu {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: var(--nav-h) 24px 60px; text-align: center;
}
.hero__palmier { width: 82px; height: auto; margin-bottom: 8px; filter: drop-shadow(0 2px 10px rgba(0,20,25,0.45)); }
.hero__contenu .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.42em; gap: 16px; color: #f3dea9; text-shadow: 0 1px 2px rgba(0,20,25,0.85), 0 1px 12px rgba(0,20,25,0.8); }
.hero__contenu .eyebrow::before, .hero__contenu .eyebrow::after { flex-basis: 48px; }
.hero h1 {
  color: var(--blanc); font-size: 68px; line-height: 1.12; letter-spacing: 0.01em;
  text-shadow: 0 2px 26px rgba(0,20,25,0.6), 0 1px 3px rgba(0,20,25,0.35); max-width: 1000px;
}
.hero__entrees { display: flex; justify-content: center; gap: 96px; margin-top: 36px; }
.hero__entree { display: flex; flex-direction: column; gap: 6px; color: var(--blanc); text-decoration: none; }
.hero__entree:hover { color: var(--blanc); }
.hero__entree:hover .hero__entree-nom { color: var(--ivoire); }
.hero__entree .eyebrow { white-space: nowrap; font-size: 11px; }
.hero__entree-nom { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: 0.05em; line-height: 1.1; text-shadow: 0 2px 16px rgba(0,20,25,0.7), 0 0 3px rgba(0,20,25,0.4); transition: color 0.2s; }
.hero__decouvrir {
  position: absolute; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.8); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; line-height: 1;
}
.hero__decouvrir:hover { color: var(--blanc); }
.hero__decouvrir svg { width: 16px; height: 16px; animation: respire 2.4s ease-in-out infinite; }
@keyframes respire { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.apparait { animation: monte 1.6s ease-out both; }
.apparait-2 { animation: monte 1.6s 0.5s ease-out both; }

/* ---------- Bande de recherche ---------- */
.recherche { background: linear-gradient(180deg, var(--sable) 0%, var(--sable-2) 100%); }
.recherche__form { display: grid; grid-template-columns: 1fr 1fr 0.8fr 1.2fr 220px; }
.recherche__champ {
  display: flex; flex-direction: column; gap: 6px; padding: 24px;
  border-right: 1px solid rgba(95,115,104,0.28);
  font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: var(--libelle);
}
.recherche__champ:first-child { padding-left: 0; }
.recherche__champ:nth-child(4) { border-right: 0; }
.recherche__champ input, .recherche__champ select {
  width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none;
  font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--vert);
  line-height: 1.5; min-height: 24px;
}
.recherche__champ select {
  cursor: pointer; padding-right: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316333d' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px;
}
.recherche__bouton { margin: 18px 0; height: auto; min-height: 52px; font-size: 12px; }

/* ---------- Villas : carrousel ---------- */
.villas { padding: 72px 0 56px; }
.villas__entete { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 40px; }
.villas__statut { margin: 0; font-size: 14px; color: var(--libelle); }
.villas__secteur { scroll-margin-top: calc(var(--nav-h) + 8px); }
.villas__secteur + .villas__secteur { margin-top: 64px; }
.villas__groupe { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; padding-top: 28px; border-top: 1px solid var(--ligne); }
.villas__groupe-titre { display: flex; flex-direction: column; gap: 12px; }
.villas__groupe h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.15; color: var(--vert); }
.villas__groupe p { max-width: 640px; margin: 0; font-size: 15px; line-height: 1.75; color: var(--encre); }
.villas__atouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); }
.villas__atouts span + span::before { content: "·"; margin-right: 22px; color: var(--sauge); }
.villas__statut button { margin-left: 10px; }
.carrousel { position: relative; }
.carrousel__piste {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-left: max(var(--marge), calc((100% - var(--largeur)) / 2));
  padding-right: var(--marge);
  scroll-padding-left: max(var(--marge), calc((100% - var(--largeur)) / 2));
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__fleche {
  position: absolute; top: 226px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blanc); color: var(--vert); box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center; transition: opacity 0.2s;
}
.carrousel__fleche svg { width: 18px; height: 18px; }
.carrousel__fleche--prec { left: calc(max(var(--marge), (100% - var(--largeur)) / 2) - 24px); }
.carrousel__fleche--suiv { right: 40px; }
.carrousel__fleche:disabled { opacity: 0; pointer-events: none; }
.villas__pied { display: flex; justify-content: center; margin-top: 40px; }

/* Accueil : toutes les villas visibles, 3 par rangée (demande de Grégory, 9 oct.) */
.villas__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

/* Vignette : cadre sable, photo, bloc blanc (emplacement, nom, caractéristiques, « Voir la villa »).
   Si le fond de la page devient sable, passer le cadre en var(--sable). */
.carte-villa {
  display: flex; flex-direction: column; background: none;   /* pas de cadre : photo + bloc blanc sur le fond sable (Grégory, 12 oct.) */
  color: var(--vert); text-decoration: none; text-align: left;
}
.carrousel .carte-villa { flex: 0 0 360px; scroll-snap-align: start; }
.carte-villa:hover { color: var(--vert); }
.carte-villa__photo { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sable); }
.carte-villa__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.carte-villa:hover .carte-villa__photo img { transform: scale(1.04); }
.carte-villa__corps { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 24px 26px; background: var(--blanc); }
.badge {
  position: absolute; top: 18px; left: 18px; padding: 6px 12px; background: var(--blanc); color: var(--vert);
  font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase;
}
.carte-villa__lieu { font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: 0.24em; text-transform: uppercase; color: var(--or); }
.carte-villa__nom { font-family: var(--serif); font-size: 28px; line-height: 1.15; color: var(--vert); }
.carte-villa__details { font-size: 13px; line-height: 1.6; color: var(--texte); }
.carte-villa__prix { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--vert); }
.carte-villa__prix:empty { display: none; }
.carte-villa__lien {
  margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vert);
}
.carte-villa__lien::after { content: none; }
.carte-villa__lien { border-bottom: 1px solid var(--or); padding-bottom: 6px; }
.carte-villa__lien .fleche { letter-spacing: 0; transition: transform 0.2s; }
.carte-villa:hover .fleche { transform: translateX(4px); }

/* ---------- Bandeau Gregory ---------- */
.gregory { position: relative; min-height: 620px; overflow: hidden; background: var(--vert); color: var(--blanc); display: flex; align-items: center; margin-top: 24px; }
.gregory__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.gregory__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,39,47,0.92) 0%, rgba(16,39,47,0.78) 42%, rgba(16,39,47,0.15) 75%, rgba(16,39,47,0) 100%); }
.gregory__contenu { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 72px 0; }
.gregory__contenu > * { max-width: 640px; }
.gregory h2 { font-size: 46px; line-height: 1.2; color: #f2efe8; }
.gregory__equipe { display: flex; flex-direction: column; gap: 22px; }
.gregory__signature { display: flex; align-items: center; gap: 24px; }
.portrait {
  flex-shrink: 0; width: 132px; height: 132px; padding: 5px; border: 1px solid var(--or-clair); border-radius: 50%;
}
.portrait img, .portrait span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.portrait span { display: flex; align-items: center; justify-content: center; background: rgba(16,39,47,0.85); }
.portrait span img { width: 58%; height: auto; border-radius: 0; }
.portrait--petit { width: 80px; height: 80px; padding: 3px; }
.gregory__nom { display: flex; flex-direction: column; gap: 6px; }
.gregory__nom b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: #f2efe8; line-height: 1.3; }
.gregory__nom span { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: var(--or-clair); }
.gregory .lien-filet { align-self: flex-start; }

/* ---------- Destination : cartes satellite ---------- */
.destination { padding: 88px 0 64px; }
.destination__entete { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 80px; align-items: end; margin-bottom: 36px; }
.destination__titre { display: flex; flex-direction: column; gap: 18px; }
.destination__entete p { margin: 0; }
.destination__cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.destination__pied { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-top: 36px; }
.partenaires { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 40px; align-items: start; margin-top: 24px; padding: 28px 32px; background: var(--blanc); }
.partenaires .eyebrow { padding-top: 6px; }
.partenaires__item { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.7; color: var(--encre); }
.partenaires__nom { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--vert); text-decoration: none; }
.partenaires__nom:hover { color: var(--or); }
.partenaires__nom { display: inline-flex; align-items: center; gap: 12px; }
.partenaires__logo { height: 40px; width: auto; flex-shrink: 0; }

.zone { position: relative; height: 560px; overflow: hidden; background: var(--vert); isolation: isolate; }
.zone__carte { position: absolute; inset: 0; z-index: 0; background: #1e3b33; }
.zone__voile { position: absolute; inset: 0; z-index: 400; pointer-events: none; background: linear-gradient(180deg, rgba(0,20,25,0) 40%, rgba(0,20,25,0.5) 68%, rgba(0,20,25,0.86) 100%); }
.zone__cartouche {
  position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 401; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; color: var(--ivoire-2);
}
.zone__nom { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--blanc); text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.zone__secteur { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.26em; text-transform: uppercase; color: #ecd49b; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.zone__infos { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--blanc); text-shadow: 0 1px 8px rgba(0,0,0,0.8); padding-top: 2px; }
.zone .leaflet-control-attribution {
  background: transparent !important; box-shadow: none; margin: 8px 10px 0 0 !important;
  font-family: var(--sans); font-size: 9px; letter-spacing: 0.06em; color: rgba(242,237,226,0.75);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.zone .leaflet-control-attribution a { color: inherit; }
.zone .leaflet-container { background: #1e3b33; font-family: var(--sans); }
.zone--villa { height: 480px; }
/* Fiche : voile surtout à gauche, sous le texte ; le secteur encerclé, à droite, reste clair */
.zone--villa .zone__voile { background: linear-gradient(90deg, rgba(0,20,25,0.8) 0%, rgba(0,20,25,0.45) 34%, rgba(0,20,25,0) 60%), linear-gradient(180deg, rgba(0,20,25,0) 60%, rgba(0,20,25,0.35) 100%); }
/* Noms sur les cartes : plages et secteurs encerclés */
.zone__libelle { background: none; border: 0; }
.zone__libelle span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; color: var(--blanc); text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.55); }
.zone__libelle--plage span { font-family: var(--serif); font-style: italic; font-size: 16px; color: #f3e3b8; }
.zone__libelle--secteur span { padding: 3px 10px; background: var(--blanc); color: var(--vert); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: none; }
.zone__google { pointer-events: auto; align-self: flex-start; margin-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--or-clair); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blanc); text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.zone__google:hover { color: #ecd49b; }
.zone__lien { position: absolute; inset: 0; z-index: 402; }
.zone__lien:focus-visible { outline: 2px solid var(--or-clair); outline-offset: -4px; }
.zone__voir { align-self: flex-start; margin-top: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--or-clair); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blanc); text-shadow: 0 1px 6px rgba(0,0,0,0.7); transition: color 0.2s; }
.zone:hover .zone__voir { color: #ecd49b; }

/* ---------- Bandeau réservation deux tons ---------- */
.direct { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(160deg, var(--vert-2) 0%, var(--vert) 60%, var(--vert-3) 100%); color: var(--blanc); }
.direct__gauche { padding: 72px 64px; background: linear-gradient(160deg, #7a8a7f 0%, #5f6e64 100%); display: flex; align-items: center; }
.direct__gauche h2 { color: var(--blanc); font-size: 44px; line-height: 1.2; }
.direct__droite { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.direct__droite p { margin: 0; font-size: 14px; line-height: 1.9; color: rgba(255,255,255,0.88); }
.direct__avantage { display: flex; align-items: center; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(217,188,122,0.7); }
.direct__chiffre { font-family: var(--serif); font-size: 72px; line-height: 1; font-variant-numeric: lining-nums; color: var(--or-clair); white-space: nowrap; }
.direct__avantage-texte { font-size: 12px; font-weight: 700; line-height: 1.8; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivoire); }
.direct__boutons { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.direct__boutons .btn { height: 44px; padding: 0 24px; }

/* ---------- Avis ---------- */
.avis { margin-top: 72px; padding: 88px 0; background: linear-gradient(180deg, var(--beige) 0%, var(--sable) 100%); text-align: center; }
.avis__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 1040px; margin-inline: auto; padding-inline: 20px; }
.etoiles { display: flex; align-items: center; gap: 16px; font-size: 14px; letter-spacing: 0.3em; color: var(--or); line-height: 1; }
.etoiles::before, .etoiles::after { content: ""; width: 40px; height: 1px; background: var(--or); opacity: 0.9; }
.avis__liste { width: 100%; overflow: hidden; }
/* Les avis glissent l'un après l'autre (Grégory, 13 oct.) : une piste horizontale, un avis par écran */
.avis__piste { display: flex; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); touch-action: pan-y; }
.avis__item { flex: 0 0 100%; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-inline: 8px; }
.avis__nav { display: flex; align-items: center; gap: 18px; }
.avis__fleche { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--or); border-radius: 50%; background: none; color: var(--vert); cursor: pointer; transition: background 0.2s, color 0.2s; }
.avis__fleche svg { width: 18px; height: 18px; }
.avis__fleche:hover { background: var(--vert); color: var(--blanc); }
.avis__airbnb { margin-top: 4px; }

/* Visite virtuelle (accueil) : bandeau compact, sans photo ; les boutons mènent à la fiche de la villa (Alexias, 13 oct.) */
.visite-maison { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; margin: 8px 0 64px; padding: 36px 44px;
  background: linear-gradient(135deg, var(--vert-2) 0%, var(--vert) 55%, var(--vert-3) 100%); color: var(--blanc); border-bottom: 2px solid var(--or); box-shadow: 0 18px 40px rgba(16,39,47,0.18); }
.visite-maison__texte { display: flex; flex-direction: column; gap: 10px; }
.visite-maison__texte h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.25; color: var(--blanc); }
.visite-maison__texte p { margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.86); }
.visite-maison__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.avis blockquote { margin: 0; font-family: var(--serif); font-size: 30px; line-height: 1.45; color: var(--vert); max-width: 980px; }
.avis__signature { font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 0.24em; text-transform: uppercase; color: var(--libelle); }

/* ---------- Guides ---------- */
.guides { padding: 88px 0 96px; }
.guides__entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.guides__titre { display: flex; flex-direction: column; gap: 14px; }
.guides__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.carte-guide { display: flex; flex-direction: column; gap: 16px; color: var(--vert); text-decoration: none; }
.carte-guide:hover { color: var(--vert); }
.carte-guide__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sable); }
.carte-guide__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
a.carte-guide:hover .carte-guide__photo img { transform: scale(1.04); }
.carte-guide__cat { font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.32em; text-transform: uppercase; color: var(--libelle); }
.carte-guide__titre { font-family: var(--serif); font-size: 24px; line-height: 1.3; }
.carte-guide .badge { top: 14px; left: 14px; }

/* ---------- Pied de page « Nous écrire » ---------- */
.pied { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--vert) 0%, var(--vert-4) 100%); color: var(--blanc); }
.pied__filigrane { position: absolute; left: -40px; bottom: -80px; width: 420px; opacity: 0.08; pointer-events: none; }
.pied__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 80px; align-items: start; padding: 80px 0 56px; }
.pied__texte { display: flex; flex-direction: column; gap: 22px; }
.pied h2 { color: var(--blanc); font-size: 44px; line-height: 1.2; }
.pied__contacts { display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 13px; color: rgba(255,255,255,0.85); padding-top: 8px; }
.pied__contacts a { color: inherit; text-decoration: none; }
.pied__contacts a:hover { color: var(--or-clair); }
.pied__form { display: flex; flex-direction: column; gap: 10px; }
.pied__form input, .pied__form textarea {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid rgba(255,255,255,0.35); border-radius: 0;
  background: transparent; color: var(--blanc); font-family: var(--sans); font-size: 14px; line-height: 1.4;
}
.pied__form textarea { height: 96px; padding: 12px 14px; resize: vertical; }
.pied__form ::placeholder { color: rgba(255,255,255,0.62); }
.pied__form input:focus, .pied__form textarea:focus { outline: none; border-color: var(--or-clair); }
.pied__form .btn { height: 48px; }
.pied__note { margin: 4px 0 0; font-size: 11px; line-height: 1.6; color: rgba(255,255,255,0.6); }
.pied__note a { color: rgba(255,255,255,0.8); }
.pied__marque { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; }
.pied__marque img { height: 40px; width: auto; opacity: 0.9; filter: saturate(0.55) brightness(1.05); }
.pied__bas {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.6);
}
.pied__bas a { color: rgba(255,255,255,0.75); text-decoration: none; }
.pied__bas a:hover { color: var(--or-clair); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Bulle WhatsApp (discrète, dans la palette) */
.wa-bulle {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--vert); border: 1px solid var(--or-clair); box-shadow: 0 6px 20px rgba(0,30,30,0.28);
  transition: transform 0.2s;
}
.wa-bulle:hover { transform: translateY(-2px); }
.wa-bulle svg { width: 26px; height: 26px; }

/* =====================================================================
   PAGE VILLA
   ===================================================================== */
.villa-haut { padding-top: 32px; }

/* Galerie 1 + 4 */
.galerie { display: grid; grid-template-columns: 2.16fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: clamp(380px, 42vw, 600px); }
.galerie__item { position: relative; display: block; overflow: hidden; padding: 0; border: 0; background: var(--sable); cursor: zoom-in; }
.galerie__item:first-child { grid-row: 1 / 3; }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.galerie__item:hover img { transform: scale(1.03); }
.galerie--seule { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.galerie--seule .galerie__item:first-child { grid-row: auto; }
.galerie__tout {
  position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; background: rgba(255,255,255,0.92); color: var(--vert);
  font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; pointer-events: none;
}
.galerie__compteur { display: none; }
.galerie-cadre { position: relative; }
.galerie__boutons { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.galerie__video { text-decoration: none; position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; border-bottom: 2px solid var(--or); background: var(--vert); color: var(--blanc); cursor: pointer; font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; }
.galerie__video span { font-size: 9px; letter-spacing: 0; color: var(--or-clair); }
.galerie__video:hover { background: var(--vert-2); }
.villa-video { display: flex; flex-direction: column; gap: 14px; padding-top: 72px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.villa-video .titre { margin-bottom: 10px; }
.villa-video__cadre { background: #000; }
.villa-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
/* Visite virtuelle 3D (Matterport) : image et bouton, la visite ne se charge qu'au clic */
.villa-3d { position: relative; aspect-ratio: 16 / 9; background: var(--vert); overflow: hidden; }
.villa-3d img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.villa-3d__lancer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.villa-3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.villa-video .note-fine a { color: inherit; text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }
.galerie__item--mobile { display: none; }

/* Fiche + calendrier (à gauche), carte de réservation (à droite, collante) */
.villa-cartes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "fiche resa" "cal resa"; gap: 16px; align-items: start; margin-top: 24px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.carte-fiche { grid-area: fiche; border: 1px solid var(--ligne); background: var(--blanc); padding: 36px 40px 40px; display: flex; flex-direction: column; gap: 22px; }
.carte-fiche__tete { display: flex; flex-direction: column; gap: 8px; }
.carte-fiche h1 { font-style: italic; font-size: 44px; line-height: 1.1; }
.carte-fiche__faits { display: flex; flex-wrap: wrap; gap: 12px 22px; padding-bottom: 22px; border-bottom: 1px solid var(--ligne); font-size: 13px; line-height: 1.5; color: var(--texte); }
.carte-fiche__faits span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.carte-fiche__faits svg { width: 20px; height: 20px; flex-shrink: 0; }
.carte-fiche__accroche { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.65; color: var(--encre); }
.carte-fiche .btn--contour { align-self: flex-start; height: 46px; }

.carte-resa {
  grid-area: resa; position: sticky; top: calc(var(--nav-h) + 16px);
  border: 1px solid var(--ligne); padding: 28px; display: flex; flex-direction: column; gap: 18px; background: var(--blanc);
}
.carte-resa__titre { font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--vert); }
.resa-boutons { display: flex; flex-direction: column; gap: 10px; }
.resa-boutons .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--clair { background: var(--beige); color: var(--vert); }
.btn--clair:hover { background: var(--sable); color: var(--vert); }
.carte-resa__direct { margin: -4px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.45; text-align: center; color: var(--vert); }
.carte-resa__direct span { color: var(--or); border-bottom: 1px solid var(--or); white-space: nowrap; }
.resa-champs { border: 1px solid var(--ligne); }
.resa-dates { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ligne); }
.resa-date {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 0;
  font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: var(--libelle);
}
.resa-date + .resa-date { border-left: 1px solid var(--ligne); }
.resa-date span { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--vert); white-space: nowrap; }
.resa-date[aria-expanded="true"] { background: var(--beige); }
.resa-voyageurs { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.resa-voyageurs__lib { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: var(--libelle); }
.resa-voyageurs__lib output { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--vert); }
.stepper { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--vert); }
.stepper button {
  width: 28px; height: 28px; border: 1px solid var(--vert); border-radius: 50%; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--vert); padding: 0; line-height: 1;
}
.stepper button:disabled { border-color: #c9d0cc; color: #9aa8a1; cursor: default; }
.carte-resa__petit { margin: 0; font-size: 12px; line-height: 1.7; color: var(--libelle); text-align: center; }
.resa-ou { display: flex; align-items: center; gap: 12px; margin: -6px 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--libelle); }
.resa-ou::before, .resa-ou::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.carte-resa .btn--contour.btn--large { height: 50px; font-size: 11px; letter-spacing: 0.24em; }
.resa-statut { margin: -4px 0 0; font-size: 12px; line-height: 1.6; color: var(--libelle); text-align: center; }
.resa-statut--ok { color: #2f6b4f; }
.resa-prix { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--texte); }
.resa-prix__ligne, .resa-prix__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resa-prix__ligne span:last-child, .resa-prix__total span:last-child { white-space: nowrap; }
.resa-prix__detail { margin-top: -5px; font-size: 12px; color: var(--libelle); }
.resa-prix__rabais span:last-child { color: #2f6b4f; }
.resa-prix__total { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--ligne); font-family: var(--serif); font-size: 20px; color: var(--vert); }
.resa-prix__note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--libelle); }
.resa-prix__note strong { font-weight: 600; color: var(--or); }


/* Calendrier des disponibilités, toujours visible sous la fiche */
.calendrier {
  grid-area: cal; scroll-margin-top: calc(var(--nav-h) + 16px);
  background: var(--blanc); border: 1px solid var(--ligne); padding: 28px 40px 26px;
}
.cal__tete { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.cal__tete .eyebrow { font-size: 11px; }
.cal__consigne { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--encre); }
.cal__fermer { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--vert); }
.cal__corps { position: relative; }
.cal__mois-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cal__mois h3 { font-family: var(--serif); font-size: 18px; text-align: center; margin-bottom: 10px; text-transform: capitalize; }
.cal__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal__jour-nom { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--libelle); padding: 4px 0; }
.cal__jour {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: none;
  font-size: 13px; line-height: 1; color: var(--vert); cursor: default;
}
button.cal__jour { cursor: pointer; }
button.cal__jour:hover { background: var(--beige); }
.cal__jour--passe { color: #b9c2bd; }
.cal__jour--min { background: #f9f6f0; }
.cal__alerte { margin: -4px 0 14px; padding: 10px 14px; border-left: 2px solid var(--or); background: var(--beige); font-size: 13px; line-height: 1.5; color: var(--vert); }
.cal__jour--occupe { color: #a7b0ab; text-decoration: line-through; background: repeating-linear-gradient(135deg, #f4f3f0 0 4px, #ecebe7 4px 8px); }
button.cal__jour--occupe { text-decoration: line-through; cursor: help; }
button.cal__jour--occupe:hover { background: repeating-linear-gradient(135deg, #efeee9 0 4px, #e4e2dc 4px 8px); }
.cal__jumelles { margin-top: 16px; padding: 12px 16px; background: var(--beige); border-left: 2px solid var(--or); font-size: 13px; line-height: 1.6; color: var(--encre); }
.cal__jumelles p { margin: 0; }
.cal__jumelles a { color: var(--vert); font-weight: 600; }
.cal__jumelles-dispo:empty { display: none; }
.cal__jumelles-dispo { margin-top: 6px !important; color: var(--vert); }
.cal__jour--entre { background: var(--beige); }
.cal__jour--sel { background: var(--vert) !important; color: var(--blanc); text-decoration: none; }
.cal__nav { position: absolute; top: -4px; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--vert); display: flex; align-items: center; justify-content: center; }
.cal__nav svg { width: 18px; height: 18px; }
.cal__nav:disabled { opacity: 0.25; cursor: default; }
.cal__nav--prec { left: -6px; }
.cal__nav--suiv { right: -6px; }
.cal__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.cal__legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--libelle); }
.cal__legende i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--ligne); }
.cal__legende .l-occupe { background: repeating-linear-gradient(135deg, #f4f3f0 0 3px, #e3e2dd 3px 6px); }
.cal__legende .l-sel { background: var(--vert); border-color: var(--vert); }
.cal__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; }
.cal__message { margin: 10px 0 0; font-size: 12px; color: var(--libelle); }

/* Demande de réservation (fenêtre) : prépare un message WhatsApp ou un courriel */
.demande { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,25,30,0.55); }
.demande__boite { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--blanc); padding: 34px 36px 30px; border-bottom: 2px solid var(--or); }
.demande__fermer { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 28px; line-height: 1; color: var(--vert); }
.demande h2 { margin: 8px 0 6px; font-size: 30px; font-style: italic; }
.demande__resume { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--encre); }
.demande__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.demande__form label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--libelle); }
.demande__form label small { font-size: 10px; font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.demande__form input, .demande__form select, .demande__form textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--ligne); border-radius: 0; background: var(--blanc);
  font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--encre);
}
.demande__form input:focus, .demande__form select:focus, .demande__form textarea:focus { outline: none; border-color: var(--vert); }
.demande__form [aria-invalid="true"] { border-color: #b3261e; }
.demande__large { grid-column: 1 / -1; }
.demande__erreur { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #b3261e; }
.demande__note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--libelle); text-align: center; }
.demande__secours { margin-top: 18px; padding: 14px 16px; background: var(--beige); border-left: 2px solid var(--or); font-size: 13px; line-height: 1.6; }
.demande__secours p { margin: 0 0 8px; }

/* Détails : description, équipements, bon à savoir */
.villa-details { display: grid; grid-template-columns: 2.1fr 2fr; gap: 80px; align-items: start; padding-top: 72px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.villa-details__texte { display: flex; flex-direction: column; gap: 18px; }
.villa-details__texte h2 { font-size: 40px; line-height: 1.15; }
.villa-details__texte p { margin: 0; }
.villa-details__cote { display: flex; flex-direction: column; gap: 28px; }
.bloc-liste { display: flex; flex-direction: column; gap: 14px; }
.bloc-liste + .bloc-liste { padding-top: 24px; border-top: 1px solid var(--ligne); }
/* Deux colonnes qui se lisent l'une après l'autre (de haut en bas, puis colonne suivante ; Grégory, 13 oct.) */
.liste-2col { columns: 2; column-gap: 24px; margin: 0 0 -10px; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; color: var(--encre); }
.liste-2col li { break-inside: avoid; margin-bottom: 10px; }
.liste-points { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--encre); }
.liste-points li { position: relative; padding-left: 26px; }
.liste-points li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 1px; background: var(--or); }
.villa-details__points { margin-top: 10px; }
.villa-details__points h3 { font-size: 22px; }
.note-fine { margin: 0; font-size: 12px; line-height: 1.7; color: var(--libelle); }

/* Emplacement */
.villa-lieu { padding-top: 88px; }
.villa-lieu__entete { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 80px; align-items: end; margin-bottom: 28px; }
.villa-lieu__entete p { margin: 0; }
.villa-travaux { scroll-margin-top: calc(var(--nav-h) + 24px); display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; margin-top: 28px; padding: 32px 40px; background: var(--blanc); border-left: 2px solid var(--or); }
.villa-travaux__titre { display: flex; flex-direction: column; gap: 10px; }
.villa-travaux h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--vert); }
.villa-travaux p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--encre); }
.liste-2col a { color: inherit; text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }

/* Bandeau Gregory court */
.gregory-court {
  margin-top: 88px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 36px 48px; background: linear-gradient(160deg, var(--vert-2) 0%, var(--vert) 100%); color: var(--blanc);
}
.gregory-court__gauche { display: flex; align-items: center; gap: 24px; }
.gregory-court__portraits { display: flex; flex-shrink: 0; }
.gregory-court__portraits .portrait + .portrait { margin-left: -14px; }
.gregory-court__texte { display: flex; flex-direction: column; gap: 6px; }
.gregory-court__texte b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.35; color: #f2efe8; }
.gregory-court__texte span { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.8); }
.gregory-court .btn { flex-shrink: 0; }

/* Autres villas */
.autres { padding: 88px 0 96px; }
.autres .villas__entete { margin-bottom: 36px; }
.autres .carrousel .carte-villa { flex-basis: 320px; }
.autres .carte-villa__nom { font-size: 24px; }
.autres .carrousel__fleche { top: 120px; }

/* Barre de réservation collante */
.barre-resa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--blanc); border-top: 1px solid var(--ligne); box-shadow: 0 -8px 30px rgba(0,40,40,0.08);
  transform: translateY(110%); transition: transform 0.3s ease;
}
.barre-resa--visible { transform: translateY(0); }
.barre-resa__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.barre-resa__nom { font-family: var(--serif); font-size: 20px; color: var(--vert); line-height: 1.2; }
.barre-resa__nom small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--libelle); }
.barre-resa .btn { height: 46px; }
.avec-barre .wa-bulle { bottom: 90px; }

/* Visionneuse plein écran */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(0,20,20,0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 70px 110px; }
.vis__image { max-width: 100%; max-height: 100%; object-fit: contain; }
.vis__fermer { position: absolute; z-index: 2; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; background: none; color: var(--blanc); font-size: 34px; line-height: 1; cursor: pointer; }
.vis__compteur { position: absolute; top: 24px; left: 70px; right: 70px; pointer-events: none; text-align: center; color: rgba(255,255,255,0.75); font-size: 12px; letter-spacing: 0.24em; }
.vis__fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; background: rgba(0,0,0,0.2); color: var(--blanc); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vis__fleche svg { width: 20px; height: 20px; }
.vis__prec { left: 14px; }
.vis__suiv { right: 14px; }
.vis__vignettes { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; gap: 8px; overflow-x: auto; padding: 0 20px; scrollbar-width: thin; justify-content: safe center; }
.vis__vignettes button { flex: 0 0 auto; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: 0.55; }
.vis__vignettes button[aria-current="true"] { border-color: var(--or-clair); opacity: 1; }
.vis__vignettes img { width: 88px; height: 62px; object-fit: cover; }

/* =====================================================================
   GUIDES ET PAGES DE TEXTE
   ===================================================================== */
.entete-page { padding: 72px 0 8px; }
.entete-page__inner { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.page-texte .entete-page__inner { margin-inline: auto; }
.entete-page h1 { font-size: 52px; line-height: 1.12; }
.entete-page p { margin: 0; font-size: 16px; }
.texte-page { max-width: 820px; margin-inline: auto; padding: 40px 0 96px; }
.texte-page h2 { font-size: 28px; margin: 40px 0 12px; }
.texte-page p, .texte-page li { font-size: 15px; }
.texte-page ul { padding-left: 20px; }
.texte-page a { color: var(--vert); }

/* =====================================================================
   ARTICLES DE GUIDE
   ===================================================================== */
.fil { display: flex; gap: 10px; font-size: 12px; letter-spacing: 0.04em; color: var(--libelle); margin-bottom: 8px; }
.fil a { color: var(--libelle); text-decoration: none; }
.fil a:hover { color: var(--vert); }
.article__entete { display: flex; flex-direction: column; gap: 16px; max-width: 760px; padding-top: 56px; }
.article__entete h1 { font-size: 48px; line-height: 1.12; }
.article__chapo { margin: 6px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.6; color: var(--encre); }
.article__meta { margin: 0; font-size: 12px; letter-spacing: 0.04em; color: var(--libelle); }
.article__couverture { margin-top: 40px; margin-bottom: 0; }
.article__couverture img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.article__corps { max-width: 760px; padding: 24px 0 72px; }
.article__corps h2 { font-size: 32px; line-height: 1.2; margin: 56px 0 14px; }
.article__corps h3 { font-size: 22px; margin: 32px 0 10px; }
.article__corps p { font-size: 16px; line-height: 1.85; margin: 0 0 16px; color: var(--texte); }
.article__corps a:not(.lien-filet) { color: var(--vert); text-decoration-color: var(--or); text-underline-offset: 3px; }
.article__corps strong { color: var(--encre); font-weight: 600; }
.article__corps .liste-points { margin: 0 0 20px; font-size: 16px; line-height: 1.75; gap: 12px; color: var(--texte); }
.article__corps .liste-points li::before { top: 0.9em; }
.article__repere { font-size: 11px !important; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or) !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
.article__figure { margin: 36px 0; }
.article__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article__figure figcaption { margin-top: 10px; font-size: 13px; color: var(--libelle); font-style: italic; }
.tableau-cadre { overflow-x: auto; margin: 8px 0 12px; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 560px; }
.tableau th { background: var(--vert); color: var(--blanc); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-align: left; padding: 10px 12px; }
.tableau td { padding: 10px 12px; border-bottom: 1px solid var(--ligne); color: var(--encre); vertical-align: top; }
.tableau tbody tr:nth-child(odd) td { background: var(--blanc); }
.tableau td:first-child { font-weight: 600; color: var(--vert); }
.encadre { margin: 28px 0; padding: 24px 26px; background: var(--blanc); border-left: 2px solid var(--or); }
/* Partenaires du guide des excursions : logo devant le nom (Grégory, 14 oct.) */
.encadre--partenaire { display: flex; align-items: center; gap: 24px; }
.encadre--partenaire .partenaire__logo { flex: 0 0 auto; width: 96px; height: auto; }
.encadre--partenaire p { margin-top: 0; }
.encadre p { margin-bottom: 12px; }
.article__faq { margin-top: 64px; padding-top: 8px; border-top: 1px solid var(--ligne); }
.faq__item { border-bottom: 1px solid var(--ligne); }
.faq__item summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--vert); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: var(--sans); font-size: 22px; color: var(--or); }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin: 0 0 20px; }
.guides__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  :root { --marge: 48px; }
  .hero h1 { font-size: 56px; }
  .recherche__form { grid-template-columns: 1fr 1fr 0.7fr 1.1fr 180px; }
  .destination__entete, .villa-lieu__entete { grid-template-columns: 1fr; gap: 20px; }
  .villa-cartes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .calendrier { padding: 24px 28px 22px; }
  .villa-details { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 900px) {
  .villas__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .partenaires { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
  :root { --nav-h: 76px; }
  .nav__droite { display: none; }
  .nav__burger { display: block; }
  .nav__logo img { height: 30px; }
  .nav__logo--complet img { height: 34px; }
  .nav__panneau {
    display: flex; flex-direction: column; gap: 28px;
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 49;
    padding: 36px 24px 40px; background: var(--vert); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
  }
  .nav__panneau.ouvert { opacity: 1; visibility: visible; }
  .nav__panneau a.nav__lien { font-family: var(--serif); font-size: 30px; color: var(--blanc); text-decoration: none; line-height: 1.3; }
  .nav__panneau .btn { align-self: flex-start; }
  .nav__panneau-contacts { display: flex; flex-direction: column; gap: 10px; margin-top: auto; font-size: 14px; color: rgba(255,255,255,0.8); }
  .nav__panneau-contacts a { color: inherit; text-decoration: none; }
  .nav-ouverte .nav { background: var(--vert); }
  .nav-ouverte { overflow: hidden; }

  .hero__entrees { gap: 40px; }
  .recherche__form { grid-template-columns: 1fr 1fr; }
  .recherche__champ { padding: 18px 16px; border-bottom: 1px solid rgba(95,115,104,0.28); }
  .recherche__champ:first-child { padding-left: 0; }
  .recherche__champ:nth-child(2) { border-right: 0; }
  .recherche__champ:nth-child(3) { padding-left: 0; }
  .recherche__bouton { grid-column: 1 / -1; margin: 16px 0 20px; }

  .direct { grid-template-columns: 1fr; }
  .guides__grille { grid-template-columns: 1fr 1fr; }
  .page-accueil .guides__grille > :nth-child(3) { display: none; }
  .pied__grille { grid-template-columns: 1fr; gap: 48px; }
  .gregory-court { flex-direction: column; align-items: flex-start; padding: 32px; }
}

@media (max-width: 700px) {
  .zone--villa .zone__voile { background: linear-gradient(180deg, rgba(0,20,25,0) 45%, rgba(0,20,25,0.6) 70%, rgba(0,20,25,0.88) 100%); }
  .villas__grille { grid-template-columns: 1fr; }
  :root { --marge: 20px; }
  body { font-size: 15px; line-height: 1.8; }
  .section { padding: 64px 0; }
  .titre { font-size: 32px; }
  .eyebrow { font-size: 11px; letter-spacing: 0.3em; }
  .eyebrow--center::before, .eyebrow--center::after { flex-basis: 32px; }

  /* Héro : les mêmes photos que sur ordinateur, au même rythme, sans zoom (Alexias, 13 oct.) */
  .hero { min-height: 600px; }
  .hero__diapo { animation-name: heroFonduMobile; }
  .hero__palmier { width: 64px; }
  .hero h1 { font-size: 38px; }
  .hero__contenu .eyebrow { font-size: 10px; letter-spacing: 0.32em; }
  .hero__contenu .eyebrow::before, .hero__contenu .eyebrow::after { flex-basis: 28px; }
  .hero__entrees { flex-direction: column; gap: 22px; margin-top: 20px; }
  .hero__entree-nom { font-size: 22px; }

  .recherche__champ { font-size: 9px; }
  .recherche__champ input, .recherche__champ select { font-size: 15px; }

  .villas { padding: 56px 0 40px; }
  .carrousel .carte-villa { flex-basis: 78vw; }
  .carte-villa__corps { padding: 20px 18px 22px; }
  .carte-villa__nom { font-size: 24px; }
  .villas__atouts { font-size: 10px; letter-spacing: 0.14em; }
  .villas__atouts span + span::before { margin-right: 12px; }
  .carrousel__fleche { display: none; }

  .gregory { min-height: 0; }
  .gregory__voile { background: linear-gradient(180deg, rgba(16,39,47,0.88) 0%, rgba(16,39,47,0.8) 100%); }
  .gregory__contenu { padding: 64px 0; gap: 22px; }
  .gregory h2 { font-size: 30px; }
  .portrait { width: 96px; height: 96px; padding: 4px; }

  .destination { padding: 64px 0 48px; }
  .destination__cartes { grid-template-columns: 1fr; gap: 16px; }
  .zone, .zone--villa { height: 420px; }
  .zone__cartouche { left: 20px; right: 20px; bottom: 20px; }
  .zone__nom { font-size: 24px; }

  .direct__gauche, .direct__droite { padding: 44px 24px; }
  .direct__gauche h2 { font-size: 30px; }
  .direct__chiffre { font-size: 56px; }
  .direct__avantage-texte { font-size: 11px; letter-spacing: 0.18em; }
  .avis { margin-top: 48px; padding: 64px 0; }
  .avis blockquote { font-size: 21px; }
  .guides { padding: 64px 0 72px; }
  .guides__entete { flex-direction: column; align-items: flex-start; }
  .guides__grille { grid-template-columns: 1fr; }
  .page-accueil .guides__grille > :nth-child(3) { display: flex; }
  .pied__grille { padding: 64px 0 40px; }
  .pied h2 { font-size: 30px; }
  .pied__filigrane { width: 280px; }
  .wa-bulle { right: 16px; bottom: 16px; width: 50px; height: 50px; }

  /* Page villa */
  .villa-haut { padding-top: 0; }
  .villa-haut > .container:first-child { width: 100%; }
  .galerie { display: flex; height: 62vw; min-height: 260px; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
  .galerie::-webkit-scrollbar { display: none; }
  .galerie__item, .galerie__item--mobile { display: block; flex: 0 0 100%; scroll-snap-align: start; }
  .galerie__item img { transition: none; }
  .galerie__tout { display: none; }
  .galerie-cadre { position: relative; }
  .galerie__compteur { display: block; position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; background: rgba(0,30,30,0.6); color: var(--blanc); font-size: 11px; letter-spacing: 0.12em; pointer-events: none; }
  .villa-cartes { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "fiche" "cal" "resa"; margin-top: 20px; }
  .carte-resa { position: static; }
  .carte-fiche { padding: 28px 22px 30px; }
  .carte-fiche h1 { font-size: 36px; }
  .carte-fiche__faits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .carte-fiche__faits span { white-space: normal; align-items: flex-start; line-height: 1.4; }
  .carte-resa { padding: 22px; }
  .calendrier { padding: 22px 18px 20px; }
  .cal__consigne { font-size: 17px; }
  .cal__mois-grille { grid-template-columns: 1fr; gap: 20px; }
  .cal__mois + .cal__mois { display: none; }
  .cal__pied { flex-direction: column; align-items: stretch; }
  .cal__actions { justify-content: space-between; }
  .demande { padding: 0; align-items: flex-end; }
  .demande__boite { max-height: 92vh; padding: 28px 20px 24px; }
  .demande__form { grid-template-columns: 1fr; }
  .villa-details { padding-top: 56px; gap: 44px; }
  .villa-details__texte h2 { font-size: 30px; }
  .liste-2col { columns: 1; }
  .encadre--partenaire { flex-direction: column; align-items: flex-start; gap: 14px; }
  .encadre--partenaire .partenaire__logo { width: 84px; }
  .visite-maison { grid-template-columns: 1fr; gap: 20px; margin: 0 0 48px; padding: 28px 22px; }
  .visite-maison__texte h2 { font-size: 24px; }
  .villa-lieu { padding-top: 64px; }
  .villas__groupe h3 { font-size: 30px; }
  .villas__secteur + .villas__secteur { margin-top: 48px; }
  .villa-travaux { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
  .gregory-court { margin-top: 64px; padding: 28px 22px; }
  .gregory-court__gauche { flex-direction: column; align-items: flex-start; gap: 16px; }
  .gregory-court__texte b { font-size: 21px; }
  .autres { padding: 64px 0 72px; }
  .autres .carrousel .carte-villa { flex-basis: 78vw; }
  .barre-resa__nom { font-size: 17px; }
  .visionneuse { padding: 56px 0 100px; }
  .vis__fleche { display: none; }
  .entete-page { padding: 48px 0 0; }
  .article__entete { padding-top: 36px; }
  .article__entete h1 { font-size: 32px; }
  .article__chapo { font-size: 18px; }
  .article__couverture { width: 100%; margin-top: 28px; }
  .article__couverture img { aspect-ratio: 4 / 3; }
  .article__corps h2 { font-size: 26px; margin-top: 44px; }
  .guides__grille--2 { grid-template-columns: 1fr; }
  .entete-page h1 { font-size: 36px; }
}

@keyframes heroFonduMobile {
  0% { opacity: 0; }
  6% { opacity: 1; }
  24% { opacity: 1; }
  32% { opacity: 0; }
  100% { opacity: 0; }
}

/* Mouvement réduit : image fixe, pas d'animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__diapo { animation: none !important; opacity: 0; }
  .hero__diapo:nth-child(1) { opacity: 1; }
  .apparait, .apparait-2, .hero__decouvrir svg { animation: none; }
  .carte-villa__photo img, .galerie__item img, .carte-guide__photo img { transition: none; }
}