/* ===================================================
   PAGES VILLA — Layout spécifique
   =================================================== */

/* BREADCRUMB */
.breadcrumb-wrap {
  padding: 140px 0 0;
  background: var(--c-bone);
}
.breadcrumb {
  display: flex;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-graphite);
  list-style: none;
  padding: 0;
}
.breadcrumb li:not(:last-child)::after {
  content: "—";
  margin-left: 12px;
  opacity: 0.5;
}
.breadcrumb a {
  color: var(--c-graphite);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.breadcrumb a:hover { border-bottom-color: currentColor; }
.breadcrumb li[aria-current="page"] { color: var(--c-ink); font-weight: 500; }

/* VILLA HERO */
.villa-hero {
  padding: 60px 0 120px;
  background: var(--c-bone);
}
.villa-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
  min-height: 70vh;
}
.villa-hero-text { padding: 40px 0; }
.villa-hero-title {
  font-family: var(--f-display);
  font-size: clamp(60px, 9vw, 140px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  margin-bottom: 32px;
}
.villa-hero-title em {
  font-style: italic;
  display: block;
  color: var(--c-graphite);
}
.villa-hero-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--c-graphite);
  margin-bottom: 64px;
  max-width: 480px;
}
.villa-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 48px;
  border-top: 1px solid var(--c-sand);
}
.vstat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vstat-num {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 200;
  color: var(--c-ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.vstat-num sup {
  font-size: 14px;
  font-weight: 300;
  vertical-align: top;
  margin-left: 2px;
  color: var(--c-graphite);
}
.vstat-label {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 400;
}
.villa-hero-image {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.vh-img {
  width: 100%;
  height: 100%;
  background: var(--img),
    linear-gradient(135deg, #8a7f70 0%, #4a4238 100%);
  background-size: cover;
  background-position: center;
}

/* GALERIE — mosaïque éditoriale */
.villa-gallery {
  padding: 120px 0 200px;
  background: var(--c-bone);
}
.villa-gallery .section-header {
  margin-bottom: 80px;
  padding: 0 60px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 0 8px;
  max-width: 1920px;
  margin: 0 auto;
  grid-auto-flow: dense;
}
/* Item par défaut : 2 colonnes, ratio portrait */
.gallery-item {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  aspect-ratio: 4/3;
  background: var(--c-sand);
}
/* Item large : 3 colonnes, ratio paysage large */
.gallery-item-large {
  grid-column: span 3;
  aspect-ratio: 16/10;
}
.gallery-item-tall {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 3/4;
}
/* Le plan : petit, contained (fond blanc), pas de scale */
.gallery-item-plan {
  grid-column: span 2;
  aspect-ratio: 4/3;
  background: #ffffff;
  padding: 24px;
}
.gallery-item-plan img {
  object-fit: contain;
  transition: none;
}
.gallery-item-plan:hover img {
  transform: none;
}
/* Image dans l'item */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--easing);
  display: block;
}
.gallery-item:hover img {
  transform: scale(1.04);
}
/* Support ancien style background --img (rétro-compat) */
.gallery-img {
  width: 100%;
  height: 100%;
  background:
    var(--img, none),
    linear-gradient(135deg, #8a7f70 0%, #4a4238 100%);
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--easing);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

/* DESCRIPTION */
.villa-description {
  padding: 200px 0;
  background: var(--c-paper);
}
.description-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 120px;
  align-items: start;
}
.description-text .section-title-big {
  margin-bottom: 56px;
}
.description-text p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-graphite);
  margin-bottom: 24px;
  font-weight: 300;
  max-width: 580px;
}
.description-text p em {
  color: var(--c-ink);
}
.features-list {
  list-style: none;
  margin-top: 40px;
  border-top: 1px solid var(--c-sand);
}
.features-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-sand);
  font-size: 14px;
}
.feat-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 400;
}
.feat-value {
  font-family: var(--f-display);
  font-size: 17px;
  color: var(--c-ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* IMAGE BREAK — surcharge pour les pages villa */
.villa-description + .image-break .image-break-img,
.image-break .image-break-img[style*="--bg"] {
  background:
    linear-gradient(180deg, rgba(26,24,21,0.15) 0%, rgba(26,24,21,0.3) 100%),
    var(--bg, linear-gradient(135deg, #6b6358 0%, #2a2722 100%));
  background-size: cover;
  background-position: center;
}

/* AMENITIES */
.villa-amenities {
  padding: 200px 0;
  background: var(--c-bone);
}
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 120px;
}
.amenity-group {
  padding-top: 32px;
  border-top: 1px solid var(--c-sand);
}
.amenity-title {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--c-ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.amenity-group ul {
  list-style: none;
  columns: 2;
  column-gap: 60px;
}
.amenity-group li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 8px 0;
  font-size: 15px;
  color: var(--c-graphite);
  font-weight: 300;
  position: relative;
  padding-left: 24px;
}
.amenity-group li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-stone);
}

/* VILLA LOCATION */
.villa-location {
  padding: 200px 0;
  background: var(--c-paper);
}
.vloc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: start;
}
.vloc-text p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-graphite);
  font-weight: 300;
  margin-top: 32px;
  max-width: 480px;
}
.vloc-distances {
  border-top: 1px solid var(--c-sand);
}
.vloc-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 40px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-sand);
  transition: padding-left 0.4s var(--easing);
}
.vloc-row:hover { padding-left: 12px; }
.vloc-time {
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 200;
  color: var(--c-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.vloc-time sup {
  font-size: 13px;
  color: var(--c-graphite);
  vertical-align: top;
  margin-left: 2px;
}
.vloc-place {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

/* BOOKING IFRAME */
.villa-booking {
  padding: 200px 0;
  background: var(--c-sand);
}
.booking-header {
  text-align: center;
  margin-bottom: 80px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.booking-sub {
  font-size: 17px;
  color: var(--c-graphite);
  margin-top: 32px;
  font-weight: 300;
}
.booking-iframe-wrap {
  background: var(--c-paper);
  padding: 32px;
  border-radius: 4px;
  max-width: 920px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(26, 24, 21, 0.08);
}
.booking-iframe-wrap iframe {
  display: block;
  width: 100%;
  border: none;
  background: var(--c-paper);
}
.booking-help {
  text-align: center;
  margin-top: 48px;
  font-size: 14px;
  color: var(--c-graphite);
}

/* OTHER VILLAS */
.other-villas {
  padding: 200px 0;
  background: var(--c-bone);
}
.other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 80px;
}
.other-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.6s var(--easing);
}
.other-card:hover {
  transform: translateY(-8px);
}
.other-img {
  width: 100%;
  aspect-ratio: 4/5;
  background:
    var(--img),
    linear-gradient(135deg, #8a7f70 0%, #4a4238 100%);
  background-size: cover;
  background-position: center;
  margin-bottom: 28px;
  overflow: hidden;
  transition: transform 0.6s var(--easing);
}
.other-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.other-num {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--c-graphite);
  font-weight: 400;
}
.other-name {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.other-cap {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-graphite);
  margin-top: 6px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .villa-hero-grid, .description-grid, .amenities-grid, .vloc-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .villa-hero-title { font-size: clamp(48px, 12vw, 100px); }
  .villa-stats { grid-template-columns: 1fr 1fr; gap: 24px; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-item { grid-column: span 2; }
  .gallery-item-large { grid-column: span 4; aspect-ratio: 16/9; }
  .gallery-item-tall { grid-column: span 2; grid-row: auto; aspect-ratio: 1/1; }
  .gallery-item-plan { grid-column: span 2; }
  .other-grid { grid-template-columns: 1fr; gap: 40px; }
  .vloc-row { grid-template-columns: 100px 1fr; gap: 20px; }
  .vloc-time { font-size: 28px; }
  .vloc-place { font-size: 18px; }
}
@media (max-width: 640px) {
  .amenity-group ul { columns: 1; }
  .breadcrumb-wrap { padding-top: 100px; }
  .villa-hero { padding: 40px 0 80px; }
  .villa-stats { grid-template-columns: 1fr 1fr; }
  .vstat-num { font-size: 32px; }
  .villa-description, .villa-amenities, .villa-location, .villa-booking, .other-villas {
    padding: 100px 0;
  }
  .gallery-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .gallery-item, .gallery-item-large, .gallery-item-tall, .gallery-item-plan { aspect-ratio: 4/3; grid-column: auto; grid-row: auto; }
  .booking-iframe-wrap { padding: 16px; }
  .features-list li { flex-direction: column; gap: 4px; align-items: flex-start; padding: 16px 0; }
}

/* ===================================================
   RÉSERVATION — calendrier BookingSync
   Le widget affiche plusieurs mois côte à côte : sur
   un écran étroit il déborde. On le laisse défiler
   horizontalement dans son cadre plutôt que de le
   rogner, et on ne lui impose PAS une hauteur fixe
   (source du grand vide blanc en bas de page).
   =================================================== */
.booking-iframe-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.booking-iframe-wrap iframe {
  min-height: 680px;
  height: 680px;
}
.booking-scroll-hint {
  display: none;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-stone);
  text-align: center;
  margin: 0 0 14px;
}
@media (max-width: 900px) {
  .booking-iframe-wrap { padding: 16px; }
  .booking-iframe-wrap iframe { min-height: 620px; height: 620px; }
  .booking-scroll-hint { display: block; }
}

/* Bouton de réservation directe sous le calendrier */
.booking-direct {
  text-align: center;
  margin-top: 48px;
}

/* Complement du H1 : porte les mots-cles sans alourdir le visuel */
.villa-hero-h1-sub {
  display: block;
  margin-top: 18px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1.6;
  opacity: 0.8;
}
@media (max-width: 640px) {
  .villa-hero-h1-sub { font-size: 11px; letter-spacing: 1.5px; margin-top: 12px; }
}