/* ════════════════════════════════════════════════════════════════
   gite.css — Styles spécifiques pages gîte
   Corrections typographiques + grille équipements responsive
   Carrousel galerie
════════════════════════════════════════════════════════════════ */

/* ── TITRE DE PAGE ─────────────────────────────────────────────
   SVG: zone 387px=22.4vw, titre h≈100px=5.8vw + sous-titre
   Calibrage clamp corrigé : pref_vw = valeur à 1440px desktop
── */
.gite-title-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Zone totale: 387px/1728px = 22.4vw → entre 120 et 300px */
  min-height: clamp(120px, 22.4vw, 300px);
  padding: clamp(1.5rem, 3.5vw, 4rem) var(--px) clamp(1rem, 2vw, 2.5rem);
  text-align: center;
}

.gite-title-zone h1 {
  font-family: var(--font-display);
  font-weight: 300;
  /* Corrigé : 5.8vw → à 1440px = 83px ✓, à 375px = 22px ✓
     clamp(min=1.6rem, pref=5.8vw, max=5.5rem) */
  font-size: clamp(1.8rem, 5.21vw, 4.5rem);  /* h1 gite title — 90px SVG */
  letter-spacing: 0.1em;
  color: var(--olive);
  line-height: 1;
}

.gite-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  /* Sous-titre petit, bien proportionné */
  font-size: clamp(0.75rem, 1.74vw, 1.4rem);  /* gite subtitle — 30px SVG */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: 0.75rem;
  opacity: 0.65;
}

/* ── HERO 2 PHOTOS ─────────────────────────────────────────────
   SVG: y=648 h=1166/1728=67.5vw, photo1=49.4%, gap=2.6vw
── */
.gite-hero {
  display: grid;
  grid-template-columns: 49.4% 1fr;
  gap: clamp(4px, 2.6vw, 40px);
  height: clamp(300px, 67.5vw, 1000px);
  overflow: hidden;
}
.gite-hero__photo { overflow: hidden; }
.gite-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ── TEXTE INTRO ───────────────────────────────────────────────
   SVG: w=68.2%, h=157px, centré, Cormorant italic
   Corrigé : 3.5vw était trop large desktop, trop petit mobile
── */
.gite-intro {
  padding: clamp(36px, 9vw, 150px) var(--px) clamp(24px, 5vw, 80px);
}
.gite-intro p {
  font-family: var(--font-display);
  font-weight: 300;
  /* Corrigé : clamp(1.25rem, 2.4vw, 2.2rem) → 34px à 1440px ✓ */
  font-size: clamp(1.2rem, 3.01vw, 2.6rem);  /* intro — 52px SVG */
  line-height: 1.6;
  color: var(--olive);
  text-align: center;
  /* Largeur SVG: 68.2% mais bornée */
  max-width: clamp(280px, 68vw, 1100px);
  margin: 0 auto;
}

/* ── GRILLE ÉQUIPEMENTS ────────────────────────────────────────
   CORRECTION RESPONSIVE : toujours 3 cols jusqu'à 420px.
   Le problème 2-1-2-1 venait du grid-template-columns: 1fr 1fr
   à 960px qui crée un orphelin si count=3.
   Solution : 3 cols fixes jusqu'à mobile strict.
── */
.gite-equip {
  padding: clamp(2rem, 4vw, 5.5rem) clamp(0.75rem, 7vw, 7rem);
}
.gite-equip + .gite-equip {
  padding-top: 0;
}

.gite-equip__grid {
  display: grid;
  /* TOUJOURS 3 colonnes — resize gracieux via gap + padding */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 4vw, 5rem);
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}

.gite-equip__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Container icône — hauteur fixe pour aligner les titres */
.gite-equip__icon {
  height: clamp(70px, 12vw, 190px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: clamp(0.6rem, 1.2vw, 1.25rem);
}
.gite-equip__icon img {
  max-height: 100%;
  max-width: clamp(70px, 14vw, 220px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* Désactive le filtre pour garder les couleurs d'origine */
}

.gite-equip__title {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.15vw, 1rem);  /* col title uppercase — 32px SVG (small caps) */
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.25rem;
}

.gite-equip__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  /* Sous-titre proportionnel */
  font-size: clamp(0.8rem, 1.62vw, 1.3rem);  /* col subtitle — 28px SVG */
  color: var(--olive);
  margin-bottom: clamp(0.6rem, 1.2vw, 1.1rem);
}

.gite-equip__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.78rem, 1.39vw, 1.12rem);  /* col body Inter — 24px SVG */
  line-height: 2;
  color: var(--text-mid);
}

/* ── SECTION FOND OLIVE ────────────────────────────────────────
   SVG: y=3943 h=763px=44.1vw, titre + corps
── */
.gite-olive {
  background: var(--olive);
  padding: clamp(50px, 11vw, 180px) var(--px) clamp(50px, 13vw, 200px);
}
.gite-olive__inner {
  max-width: clamp(280px, 79vw, 1300px);
  margin: 0 auto;
  text-align: center;
}
.gite-olive__title {
  font-family: var(--font-display);
  font-weight: 300;
  /* Titre principal — grand et lisible sur fond sombre */
  font-size: clamp(1.4rem, 3.59vw, 3rem);  /* olive title — 62px SVG */
  line-height: 1.35;
  color: var(--olive-light);
  margin-bottom: clamp(1rem, 2.5vw, 2.5rem);
}
.gite-olive__body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.82rem, 1.39vw, 1.12rem);  /* olive body — 24px SVG */
  line-height: 1.9;
  color: var(--olive-light);
  opacity: 0.88;
}

/* ── GALERIE (titre) ───────────────────────────────────────────
   SVG: GALERIE uppercase, Cormorant, spaced letters
── */
.gite-gallery {
  padding-top: clamp(40px, 8vw, 130px);
}
.gite-gallery__title {
  font-family: var(--font-display);
  font-weight: 300;
  /* Corrigé : uppercase + tracking généreux */
  font-size: clamp(1.5rem, 3.76vw, 3.2rem);  /* gallery title GALERIE — 65px SVG */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--olive);
  text-align: center;
  margin-bottom: clamp(30px, 6vw, 100px);
}

/* ── CARROUSEL ─────────────────────────────────────────────────
   Desktop: 3 slides | Tablet: 2 slides | Mobile: 1 slide
── */
.carousel {
  position: relative;
  overflow: hidden;
  /* Débordement contrôlé : full-bleed */
  margin: 0;
}

.carousel__track-wrap {
  overflow: hidden;
  cursor: grab;
}
.carousel__track-wrap:active { cursor: grabbing; }

.carousel__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 calc(100% / var(--slides-visible, 3));
  padding: 0 clamp(3px, 0.6vw, 8px);
  box-sizing: border-box;
}

.carousel__slide img {
  width: 100%;
  /* Aspect portrait 2:3 */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}

/* Boutons prev / next */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--olive-light);
  color: var(--olive);
  width: clamp(36px, 3.5vw, 52px);
  height: clamp(36px, 3.5vw, 52px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  box-shadow: 0 2px 8px rgba(76,70,46,.12);
}
.carousel__btn:hover {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--white);
}
.carousel__btn--prev { left:  clamp(0.5rem, 1.5vw, 1.5rem); }
.carousel__btn--next { right: clamp(0.5rem, 1.5vw, 1.5rem); }
.carousel__btn:disabled { opacity: 0.3; cursor: default; }
.carousel__btn svg { pointer-events: none; }

/* Dots (mobile) */
.carousel__dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive-light);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.carousel__dot.is-active {
  background: var(--olive);
  transform: scale(1.3);
}

/* ── BOUTON RÉSERVER ───────────────────────────────────────────
   SVG: w=36.1vw, h=7.35vw, centré
── */
.gite-cta {
  padding: clamp(40px, 6vw, 100px) var(--px);
  text-align: center;
}
.gite-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(200px, 36vw, 580px);
  min-height: clamp(48px, 7.3vw, 115px);
  border: 1px solid var(--olive);
  color: var(--olive);
  background: transparent;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.74vw, 1.4rem);  /* CTA button — 30px SVG */
  letter-spacing: 0.07em;
  padding: clamp(0.75rem, 2vw, 1.75rem) clamp(2rem, 5vw, 5rem);
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.gite-cta__btn:hover {
  background: var(--olive);
  color: var(--white);
}

/* ── RESPONSIVE GÎTE ───────────────────────────────────────────── */

/* Tablet large : 2 slides dans carrousel, équipements 3 cols */
@media (max-width: 900px) {
  .gite-hero {
    grid-template-columns: 1fr;
    height: auto;
  }
  .gite-hero__photo { height: clamp(240px, 48vw, 520px); }
  .gite-hero__photo:last-child { display: none; }

  .carousel { --slides-visible: 2; }
}

/* Mobile : 1 slide, équipements toujours 3 cols mais compacts */
@media (max-width: 600px) {
  .gite-equip {
    padding-left: clamp(0.5rem, 4vw, 2rem);
    padding-right: clamp(0.5rem, 4vw, 2rem);
  }
  .gite-equip__grid {
    gap: clamp(0.5rem, 3vw, 1.5rem);
  }
  /* Icônes plus petites sur mobile */
  .gite-equip__icon {
    height: clamp(50px, 16vw, 100px);
  }

  .carousel { --slides-visible: 1; }
  .carousel__btn { display: none; }
  .carousel__dots { display: flex; }
}

/* Très petit mobile (< 380px) : 1 col équipements */
@media (max-width: 380px) {
  .gite-equip__grid { grid-template-columns: 1fr; }
}