/* ===================================================================
   Villa Les Jumelles — feuille de style
   -------------------------------------------------------------------
   Sommaire
     1.  Variables et fondations
     2.  Utilitaires (conteneur, boutons, titres)
     3.  Fond ambiant (dégradé piloté par le scroll)
     4.  Navigation
     5.  Hero miroir et logotype bicolore
     6.  Sections villa
     7.  Carrousel cinématique
     8.  Équipements et galerie
     9.  Calendrier de disponibilités
     10. Localisation
     11. Contact et pied de page
     12. Lightbox
     13. Lecteur de visite
     14. Accessibilité et préférences de mouvement
   =================================================================== */


/* ===================================================================
   1. VARIABLES ET FONDATIONS
   =================================================================== */

:root {
  /* Neutres */
  --blanc:        #FFFFFF;
  --ivoire:       #FBF9F6;
  --encre:        #22201D;
  --encre-doux:   #5E5852;
  --encre-tres-doux: #857D75;
  --ligne:        rgba(34, 32, 29, 0.12);
  --ligne-forte:  rgba(34, 32, 29, 0.22);

  /* Palette chaude — Yasmine (terracotta / pêche) */
  --y-050: #FDF4EE;
  --y-100: #F8E4D7;
  --y-200: #F1CDB6;
  --y-300: #E8B08A;
  --y-500: #C97A4E;
  --y-700: #9A5330;
  --y-900: #6B3A22;

  /* Palette froide — Jasmine (teal / menthe) */
  --j-050: #EEF7F5;
  --j-100: #D8ECE7;
  --j-200: #B6DDD5;
  --j-300: #8FC9BF;
  --j-500: #3F9084;
  --j-700: #2A6960;
  --j-900: #1B4842;

  /* États du calendrier */
  --libre:      #2F7D4F;
  --libre-fond: #E8F4EC;
  --occupe:      #B33A32;
  --occupe-fond: #FBEAE8;
  --choisi:      #D97B25;
  --choisi-fond: #FDF0E1;

  /* Typographie */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --rayon:       14px;
  --rayon-large: 22px;
  --ombre-douce: 0 1px 2px rgba(34, 32, 29, 0.05), 0 8px 24px rgba(34, 32, 29, 0.07);
  --ombre-forte: 0 2px 6px rgba(34, 32, 29, 0.08), 0 20px 50px rgba(34, 32, 29, 0.14);
  --hauteur-nav: 4.5rem;

  /* Fond ambiant : valeurs par défaut, recalculées au scroll par main.js */
  --ambiance: var(--ivoire);
  --halo-chaud: transparent;
  --halo-froid: transparent;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--encre);
  background-color: var(--ambiance);
  overflow-x: hidden;
}

/* Voile de couleur diffuse, superposé au fond uni. Piloté au scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(75rem 50rem at 10% 18%, var(--halo-chaud), transparent 62%),
    radial-gradient(70rem 48rem at 90% 82%, var(--halo-froid), transparent 60%);
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0.005em;
}

p { margin: 0; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

/* Décale l'ancre pour que le titre ne passe pas sous la barre fixe */
[id] { scroll-margin-top: calc(var(--hauteur-nav) + 1rem); }

/* Lien d'évitement clavier */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--encre);
  color: var(--blanc);
  border-radius: 0 0 var(--rayon) 0;
  text-decoration: none;
}
.lien-evitement:focus { left: 0; }

.ancre-decalee { display: block; position: relative; top: calc(var(--hauteur-nav) * -1); }


/* ===================================================================
   2. UTILITAIRES
   =================================================================== */

.conteneur {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}
.conteneur--etroit { width: min(100% - 2.5rem, 720px); }

.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.section__entete {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__titre {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 0.75rem;
}

.section__chapeau {
  color: var(--encre-doux);
  font-size: 1.05rem;
}

.sous-titre {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 1.25rem;
}
.sous-titre--centre {
  text-align: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: 1.75rem;
}

/* Petit œil de section, en capitales espacées */
.villa__oeil {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent-700, var(--encre-tres-doux));
  margin-bottom: 0.9rem;
  font-weight: 500;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--nav {
  background: var(--encre);
  color: var(--blanc);
  padding: 0.6rem 1.35rem;
  font-size: 0.88rem;
}
.btn--nav:hover { background: #383430; }

.btn--chaud { background: var(--y-700); color: var(--blanc); }
.btn--chaud:hover { background: var(--y-900); }

.btn--froid { background: var(--j-700); color: var(--blanc); }
.btn--froid:hover { background: var(--j-900); }

/* Bouton principal aux couleurs de la villa courante */
.btn--accent {
  background: var(--accent-700);
  color: var(--blanc);
}
.btn--accent:hover { background: var(--accent-900); }
.btn--accent[disabled],
.btn--accent[aria-disabled="true"] {
  background: rgba(34, 32, 29, 0.09);
  color: var(--encre-tres-doux);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn--discret {
  border-color: var(--accent-300, var(--ligne-forte));
  color: var(--accent-700, var(--encre));
  background: rgba(255, 255, 255, 0.6);
}
.btn--discret:hover { background: var(--blanc); }

.btn--visite {
  background: rgba(255, 255, 255, 0.92);
  color: var(--encre);
  box-shadow: var(--ombre-douce);
  backdrop-filter: blur(6px);
}
.btn--visite:hover { background: var(--blanc); }

.btn--whatsapp {
  background: #1FA855;
  color: var(--blanc);
  padding: 0.95rem 2rem;
  font-size: 1rem;
}
.btn--whatsapp:hover { background: #17803F; }

.btn__icone { display: inline-flex; width: 1.15rem; height: 1.15rem; }
.btn__icone svg { width: 100%; height: 100%; }


/* ===================================================================
   3. NAVIGATION
   =================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--hauteur-nav);
  display: flex;
  align-items: center;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Au-dessus du hero : barre transparente, texte clair */
.nav__inner {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__logo {
  font-family: var(--serif);
  font-size: 1.22rem;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  gap: 0.35em;
  letter-spacing: 0.01em;
}
.nav__logo-mot--chaud { color: var(--y-500); }
.nav__logo-mot--froid { color: var(--j-500); }

.nav__liens {
  display: flex;
  gap: 1.7rem;
  margin-left: auto;
  font-size: 0.92rem;
}
.nav__liens a {
  text-decoration: none;
  padding: 0.35rem 0;
  position: relative;
  color: var(--encre);
  transition: color 0.25s ease;
}
/* Soulignement animé */
.nav__liens a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav__liens a:hover::after,
.nav__liens a:focus-visible::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.langues {
  display: flex;
  align-items: center;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  overflow: hidden;
}
.langues__btn {
  border: 0;
  background: none;
  padding: 0.3rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: var(--encre-doux);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.langues__btn.is-active {
  background: var(--encre);
  color: var(--blanc);
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  padding: 0 0.7rem;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.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(-6.5px) rotate(-45deg); }

/* Barre translucide dès que la page défile */
.nav.est-defilee {
  background: rgba(251, 249, 246, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--ligne);
}

/* Au-dessus du hero (haut de page), on éclaircit le texte */
.nav.est-sur-hero:not(.est-defilee) {
  color: var(--blanc);
}
.nav.est-sur-hero:not(.est-defilee) .nav__liens a,
.nav.est-sur-hero:not(.est-defilee) .langues__btn { color: rgba(255, 255, 255, 0.92); }
.nav.est-sur-hero:not(.est-defilee) .langues { border-color: rgba(255, 255, 255, 0.4); }
.nav.est-sur-hero:not(.est-defilee) .langues__btn.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--encre);
}
.nav.est-sur-hero:not(.est-defilee) .nav__burger { border-color: rgba(255, 255, 255, 0.4); }
.nav.est-sur-hero:not(.est-defilee) .btn--nav {
  background: rgba(255, 255, 255, 0.94);
  color: var(--encre);
}
/* Au-dessus des photos du hero, les teintes pâles du logo se noient dans
   le ciel : on les éclaircit encore et on ajoute une ombre portée. */
.nav.est-sur-hero:not(.est-defilee) .nav__logo-mot--chaud { color: #FBE3D2; }
.nav.est-sur-hero:not(.est-defilee) .nav__logo-mot--froid { color: #D5F0EA; }
.nav.est-sur-hero:not(.est-defilee) .nav__logo,
.nav.est-sur-hero:not(.est-defilee) .nav__liens a {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}


/* ===================================================================
   4. HERO MIROIR
   =================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  isolation: isolate;
  overflow: hidden;
}

.hero__moitie {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* Zoom très lent et continu, pour donner vie à l'image fixe */
  animation: hero-respire 26s ease-in-out infinite alternate;
}
.hero__moitie--jasmine .hero__fond { animation-delay: -13s; }

@keyframes hero-respire {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14); }
}

/* Voile coloré : assombrit la photo pour la lisibilité et pose la teinte */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__moitie--yasmine .hero__voile {
  background: linear-gradient(180deg,
    rgba(60, 30, 15, 0.34) 0%,
    rgba(107, 58, 34, 0.30) 45%,
    rgba(107, 58, 34, 0.68) 100%);
}
.hero__moitie--jasmine .hero__voile {
  background: linear-gradient(180deg,
    rgba(10, 45, 42, 0.34) 0%,
    rgba(27, 72, 66, 0.30) 45%,
    rgba(27, 72, 66, 0.68) 100%);
}

/* Fine couture lumineuse entre les deux moitiés */
.hero__moitie--jasmine::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(255, 255, 255, 0.55) 60%,
    rgba(255, 255, 255, 0) 100%);
  z-index: 2;
}

.hero__texte {
  position: relative;
  text-align: center;
  color: var(--blanc);
  max-width: 22rem;
}

.hero__sur-titre {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.hero__nom {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero__accroche {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero__lieu {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Flèche de défilement */
.hero__descendre {
  position: absolute;
  left: 50%;
  bottom: 3.4rem;
  transform: translateX(-50%);
  z-index: 4;
  width: 1.5rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 0.45rem;
}
.hero__descendre span {
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  animation: descendre 2s ease-in-out infinite;
}
@keyframes descendre {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(7px); opacity: 0.25; }
}


/* --- Logotype bicolore à cheval sur la couture --------------------- */

.logotype {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.logotype__gabarit,
.logotype__calque {
  display: block;
}

/* Exemplaire invisible : il ne sert qu'à donner ses dimensions au bloc,
   les deux calques colorés se superposant dessus en position absolue. */
.logotype__gabarit { visibility: hidden; }

.logotype__calque {
  position: absolute;
  inset: 0;
}

/* La découpe tombe exactement au milieu du logotype, donc sur la couture
   entre les deux moitiés du hero — y compris au milieu d'une lettre. */
.logotype__calque--gauche {
  color: var(--y-200);
  clip-path: inset(0 50% 0 0);
}
.logotype__calque--droite {
  color: var(--j-200);
  clip-path: inset(0 0 0 50%);
}

.logotype__l1,
.logotype__l2 {
  display: block;
  font-family: var(--serif);
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.logotype__l1 {
  font-size: clamp(0.7rem, 1.5vw, 1.05rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;   /* compense l'espacement final, recentre le mot */
  margin-bottom: 0.35em;
  font-weight: 600;
}
.logotype__l2 {
  font-size: clamp(2rem, 6.4vw, 5.2rem);
  letter-spacing: 0.07em;
  text-indent: 0.07em;
  font-weight: 500;
}


/* ===================================================================
   5. SECTIONS VILLA
   =================================================================== */

.villa {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  position: relative;
}

/* Chaque villa expose sa palette sous des noms neutres : les composants
   internes (boutons, calendrier, galerie) s'y réfèrent sans savoir de
   quelle villa il s'agit. */
.villa--yasmine {
  --accent-050: var(--y-050);
  --accent-100: var(--y-100);
  --accent-200: var(--y-200);
  --accent-300: var(--y-300);
  --accent-500: var(--y-500);
  --accent-700: var(--y-700);
  --accent-900: var(--y-900);
}
.villa--jasmine {
  --accent-050: var(--j-050);
  --accent-100: var(--j-100);
  --accent-200: var(--j-200);
  --accent-300: var(--j-300);
  --accent-500: var(--j-500);
  --accent-700: var(--j-700);
  --accent-900: var(--j-900);
}

.villa__intro {
  max-width: 44rem;
  margin-bottom: 2.25rem;
}

.villa__titre {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  margin-bottom: 1rem;
}

.villa__description {
  color: var(--encre-doux);
  font-size: 1.06rem;
  max-width: 38rem;
}

.villa__prix {
  margin-top: 1.4rem;
  font-size: 1rem;
  color: var(--encre-doux);
}
.villa__prix strong {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--accent-700);
  margin-inline: 0.15em;
  vertical-align: -0.06em;
}

/* --- Badges caractéristiques --------------------------------------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--accent-050);
  border: 1px solid var(--accent-100);
  color: var(--accent-900);
  font-size: 0.87rem;
  font-weight: 500;
}
.badge__icone {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent-700);
  flex-shrink: 0;
}
.badge__icone svg { width: 100%; height: 100%; }


/* ===================================================================
   6. VITRINE : carrousel + équipements
   =================================================================== */

.vitrine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.vitrine__media { position: relative; }

.vitrine__media .btn--visite {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 3;
}
.vitrine__media .btn--visite:hover { transform: translateX(-50%) translateY(-1px); }

/* --- Carrousel cinématique (fondu enchaîné + Ken Burns) ------------- */

.carrousel {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--rayon-large);
  overflow: hidden;
  background: var(--accent-050);
  box-shadow: var(--ombre-forte);
}

.carrousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;
}
.carrousel__slide.est-active { opacity: 1; }

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

/* Le zoom lent ne démarre qu'à l'apparition de la diapositive : une
   diapositive inactive garde une image figée, ce qui évite de faire
   tourner une douzaine d'animations en même temps. */
.carrousel__slide.est-active img {
  animation: kenburns 11s ease-out both;
}
.carrousel__slide.est-active.sens-inverse img {
  animation-name: kenburns-inverse;
}

@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.2%, -1.4%, 0); }
}
@keyframes kenburns-inverse {
  from { transform: scale(1.13) translate3d(1.2%, 1%, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}

/* Points de progression du carrousel */
.carrousel__points {
  position: absolute;
  left: 50%;
  bottom: 4.4rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 3;
}
.carrousel__point {
  width: 6px;
  height: 6px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease;
}
.carrousel__point.est-active {
  width: 20px;
  background: rgba(255, 255, 255, 0.95);
}


/* --- Équipements ---------------------------------------------------- */

.equipements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.1rem 1.5rem;
}

.equipement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.95rem;
}
.equipement__icone {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-700);
  flex-shrink: 0;
}
.equipement__icone svg { width: 100%; height: 100%; }


/* ===================================================================
   7. GALERIE ET LIGHTBOX
   =================================================================== */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(9rem, 18vw, 13rem), 1fr));
  gap: 0.75rem;
}

.galerie__vignette {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--accent-050);
  aspect-ratio: 3 / 4;
}
.galerie__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.galerie__vignette:hover img { transform: scale(1.06); }

/* Au-delà de huit vignettes, le reste est masqué jusqu'au clic sur
   « voir toutes les photos ». */
.galerie:not(.est-depliee) .galerie__vignette:nth-child(n + 9) { display: none; }

.galerie__plus {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}


/* ===================================================================
   8. CALENDRIER DE DISPONIBILITÉS
   =================================================================== */

.calendrier {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-large);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--ombre-douce);
  max-width: 56rem;
  margin-inline: auto;
}

.calendrier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.calendrier__fleche {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: var(--blanc);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.calendrier__fleche:hover:not([disabled]) {
  background: var(--accent-050);
  border-color: var(--accent-300);
}
.calendrier__fleche[disabled] { opacity: 0.35; cursor: not-allowed; }

.calendrier__mois-titre {
  font-family: var(--serif);
  font-size: 1.35rem;
  text-align: center;
  text-transform: capitalize;
  flex: 1;
}

.calendrier__grilles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.mois__nom {
  font-family: var(--serif);
  font-size: 1.15rem;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 0.75rem;
}

.mois__jours,
.mois__entetes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.mois__entetes {
  margin-bottom: 0.4rem;
}
.mois__entete {
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--encre-tres-doux);
  padding-block: 0.25rem;
}

.jour {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  background: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.12s ease;
}
.jour--vide { visibility: hidden; cursor: default; }

/* Disponible */
.jour--libre {
  background: var(--libre-fond);
  color: #205536;
  border-color: rgba(47, 125, 79, 0.22);
}
.jour--libre:hover { transform: scale(1.06); border-color: var(--libre); }

/* Occupé */
.jour--occupe {
  background: var(--occupe-fond);
  color: var(--occupe);
  border-color: rgba(179, 58, 50, 0.24);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Passé */
.jour--passe {
  color: var(--encre-tres-doux);
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sélection : arrivée, départ, et nuits intermédiaires */
.jour--choisi {
  background: var(--choisi);
  color: var(--blanc);
  border-color: var(--choisi);
  font-weight: 600;
}
.jour--intervalle {
  background: var(--choisi-fond);
  color: #8A4A11;
  border-color: rgba(217, 123, 37, 0.28);
}

.calendrier__legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ligne);
  font-size: 0.82rem;
  color: var(--encre-doux);
}
.legende__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.legende__pastille {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 5px;
  border: 1px solid;
}
/* Rappel permanent de la durée minimum de séjour, détaché des trois
   pastilles de couleur par un filet vertical. */
.legende__info {
  padding-left: 1.1rem;
  border-left: 1px solid var(--ligne);
  color: var(--accent-900, var(--encre-doux));
  font-weight: 500;
}

.legende__pastille--libre  { background: var(--libre-fond);  border-color: rgba(47, 125, 79, 0.35); }
.legende__pastille--occupe { background: var(--occupe-fond); border-color: rgba(179, 58, 50, 0.35); }
.legende__pastille--choisi { background: var(--choisi);      border-color: var(--choisi); }

/* Récapitulatif du séjour choisi + bouton WhatsApp */
.calendrier__resume {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.calendrier__dates {
  font-size: 0.95rem;
  color: var(--encre-doux);
}
.calendrier__dates strong { color: var(--encre); font-weight: 600; }

.calendrier__message {
  width: 100%;
  font-size: 0.85rem;
  color: var(--encre-tres-doux);
}
.calendrier__message--alerte { color: var(--occupe); }


/* ===================================================================
   9. LOCALISATION
   =================================================================== */

.section--neutre { position: relative; }

.lieu {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.lieu__carte {
  border-radius: var(--rayon-large);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  border: 1px solid var(--ligne);
  aspect-ratio: 4 / 3;
  background: var(--ivoire);
}
.lieu__carte iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.reperes { display: grid; gap: 0.5rem; }

.repere {
  display: flex;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
}
.repere__icone {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  color: var(--encre-doux);
  margin-top: 0.15rem;
}
.repere__icone svg { width: 100%; height: 100%; }
.repere__titre { font-size: 1.08rem; margin-bottom: 0.15rem; }
.repere__texte { font-size: 0.9rem; color: var(--encre-doux); line-height: 1.55; }

/* --- Activités et sorties ------------------------------------------- */

.section__chapeau--centre {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.activites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
}

.activite {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.4rem 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.activite:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-douce);
}

.activite__icone {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--encre-doux);
  margin-bottom: 0.75rem;
}
.activite__icone svg { width: 100%; height: 100%; }

.activite__titre {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.activite__texte {
  font-size: 0.88rem;
  color: var(--encre-doux);
  line-height: 1.55;
}


/* ===================================================================
   10. CONTACT ET PIED DE PAGE
   =================================================================== */

.section--contact { text-align: center; padding-bottom: clamp(3.5rem, 7vw, 6rem); }

.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.contact__numero {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--encre-doux);
}

.contact__raccourcis {
  margin-top: 2rem;
  font-size: 0.92rem;
  color: var(--encre-doux);
}
.contact__raccourcis a {
  color: var(--encre);
  text-underline-offset: 3px;
}

.contact__adresse {
  margin-top: 1.5rem;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--encre-doux);
}
.contact__adresse .repere__icone { width: 1.05rem; height: 1.05rem; margin: 0; }

.pied {
  border-top: 1px solid var(--ligne);
  padding-block: 2.5rem;
  background: rgba(255, 255, 255, 0.45);
}
.pied__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--encre-doux);
}
.pied__marque {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--encre);
}


/* ===================================================================
   11. LIGHTBOX
   =================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(18, 16, 14, 0.94);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  animation: apparition 0.25s ease;
}
.lightbox[hidden] { display: none; }

@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

.lightbox__figure {
  margin: 0;
  display: grid;
  place-items: center;
  gap: 0.9rem;
  min-height: 0;
  height: 100%;
}
.lightbox__image {
  max-width: 100%;
  max-height: calc(100svh - 9rem);
  object-fit: contain;
  border-radius: 8px;
}
.lightbox__legende {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  text-align: center;
}

.lightbox__nav,
.lightbox__fermer {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanc);
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease;
}
.lightbox__nav:hover,
.lightbox__fermer:hover { background: rgba(255, 255, 255, 0.2); }

.lightbox__nav {
  width: 3rem;
  height: 3rem;
  font-size: 1.7rem;
  line-height: 1;
}
.lightbox__fermer {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.6rem;
  line-height: 1;
  z-index: 2;
}
.lightbox__compteur {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}


/* ===================================================================
   12. LECTEUR DE VISITE
   Diaporama plein écran présenté comme un lecteur vidéo. La structure
   est identique si l'on remplace les diapositives par une balise
   <video> : mêmes contrôles, même emplacement.
   =================================================================== */

.visite {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: #0B0A09;
  animation: apparition 0.3s ease;
}
.visite[hidden] { display: none; }

.visite__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.visite__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.visite__slide.est-active { opacity: 1; }

.visite__slide img,
.visite__scene video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.visite__slide.est-active img {
  animation: visite-zoom 7s ease-out both;
}
.visite__slide.est-active.sens-inverse img {
  animation-name: visite-zoom-inverse;
}
/* En pause, le zoom se fige au lieu de continuer à ramper */
.visite.est-en-pause .visite__slide.est-active img { animation-play-state: paused; }

@keyframes visite-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
@keyframes visite-zoom-inverse {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Voile pour détacher les contrôles du bas de l'image */
.visite::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 9rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.visite__entete {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
  z-index: 2;
}
.visite__titre {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--blanc);
}
.visite__fermer {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanc);
  border-radius: 999px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.visite__fermer:hover { background: rgba(255, 255, 255, 0.2); }

.visite__controles {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 1.5rem;
}

.visite__bouton {
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanc);
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.visite__bouton:hover { background: rgba(255, 255, 255, 0.22); }

/* Icônes lecture / pause dessinées en CSS */
.visite__icone-pause {
  width: 0.85rem;
  height: 0.95rem;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.visite__icone-lecture {
  width: 0;
  height: 0;
  border-left: 0.85rem solid currentColor;
  border-top: 0.52rem solid transparent;
  border-bottom: 0.52rem solid transparent;
  margin-left: 0.2rem;
}

.visite__progression { flex: 1; display: flex; align-items: center; }

.visite__barre {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.visite__barre-remplie {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--blanc);
  border-radius: 999px;
}

.visite__compteur {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  min-width: 3.5rem;
  text-align: right;
}


/* ===================================================================
   13. RESPONSIVE
   =================================================================== */

/* Tablette */
@media (max-width: 1000px) {
  .vitrine { grid-template-columns: 1fr; }
  .vitrine__media { max-width: 32rem; margin-inline: auto; width: 100%; }
  .lieu { grid-template-columns: 1fr; }
  .lieu__carte { aspect-ratio: 16 / 10; }
}

/* Menu replié */
@media (max-width: 880px) {
  .nav__burger { display: flex; }

  .nav__liens {
    position: fixed;
    inset: var(--hauteur-nav) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(251, 249, 246, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ligne);
    padding: 0.5rem 1.25rem 1.25rem;
    transform: translateY(-130%);
    transition: transform 0.35s cubic-bezier(0.3, 0.8, 0.3, 1);
    box-shadow: var(--ombre-douce);
    margin-left: 0;
  }
  .nav__liens.est-ouvert { transform: translateY(0); }
  .nav__liens a {
    color: var(--encre);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--ligne);
    font-size: 1rem;
  }
  .nav__liens a:last-child { border-bottom: 0; }
  .nav__liens a::after { display: none; }

  .nav .btn--nav { display: none; }
}

/* Téléphone : le hero passe d'une couture verticale à une couture
   horizontale, et le logotype se découpe en haut/bas au lieu de
   gauche/droite. */
@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .hero__moitie {
    align-items: flex-end;
    padding-bottom: 2rem;
  }
  .hero__moitie--yasmine { align-items: flex-start; padding-top: calc(var(--hauteur-nav) + 1rem); }
  .hero__moitie--jasmine::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 35%,
      rgba(255, 255, 255, 0.5) 65%,
      rgba(255, 255, 255, 0) 100%);
  }

  .hero__accroche { display: none; }
  .hero__nom { font-size: clamp(1.6rem, 8vw, 2.2rem); }

  .logotype { top: 50%; }
  .logotype__calque--gauche { clip-path: inset(0 0 50% 0); }
  .logotype__calque--droite { clip-path: inset(50% 0 0 0); }
  .logotype__l2 { font-size: clamp(1.9rem, 11vw, 3rem); }
  .logotype__l1 { font-size: 0.68rem; letter-spacing: 0.5em; text-indent: 0.5em; }

  .hero__descendre { display: none; }

  .villa__prix strong { font-size: 1.6rem; }
  .galerie { gap: 0.5rem; }
  .calendrier__legende { gap: 0.75rem; font-size: 0.78rem; }

  .lightbox { grid-template-columns: 1fr; padding: 3.5rem 1rem 3rem; }
  .lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
  }
  .lightbox__nav--prec { left: 0.6rem; }
  .lightbox__nav--suiv { right: 0.6rem; }

  .visite__compteur { min-width: 3rem; font-size: 0.75rem; }
  .visite__titre { font-size: 1rem; }
}

/* Deux mois côte à côte dès qu'il y a la place */
@media (min-width: 760px) {
  .calendrier__grilles { grid-template-columns: 1fr 1fr; }
}


/* ===================================================================
   14. ACCESSIBILITÉ
   =================================================================== */

/* Anneau de focus visible et cohérent sur tous les éléments cliquables */
:focus-visible {
  outline: 2px solid var(--accent-700, var(--encre));
  outline-offset: 3px;
  border-radius: 4px;
}
.lightbox :focus-visible,
.visite :focus-visible,
.hero :focus-visible {
  outline-color: var(--blanc);
}

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

/* Respect du réglage système « réduire les animations » : on supprime
   les mouvements, on garde les fondus, qui ne gênent pas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }

  .carrousel__slide.est-active img,
  .visite__slide.est-active img,
  .hero__fond {
    animation: none !important;
    transform: none !important;
  }
  .carrousel__slide,
  .visite__slide { transition-duration: 0.4s !important; }
  .btn:hover { transform: none; }
}