/* ================================
   Page "Qui sommes-nous" — overrides
   ================================ */

/* Largeur des slides (utilise la même variable que biens.css) */
.about .featured-listings {
  --card-w: 534px;
}
/* Hauteur des cards */
.about .dest-card {
  height: 534px;
  min-height: 534px;
}

/* Mobile */
@media (max-width: 768px) {
  .about .carousel-viewport .swiper-slide {
    width: 70vw;
  }
  .about .dest-card {
    height: 303px;
    min-height: 303px;
  }
}
.swiper-slide-image{
  width: 100%;
}
/* ================================
   Quote section (Qui sommes-nous)
   ================================ */
.about-quote {
  background: var(--about-quote-bg, #f5f2ea);
  padding: 120px 0;
}

.about-quote__figure {
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
  position: relative;
  padding: clamp(8px, 1vw, 16px);
}

.about-quote__text {
  margin: 0;
  font-weight: 400;
  line-height: 1.35;
  font-size: clamp(22px, 2.6vw, 38px);
  color: var(--about-quote-color, #2a2a2a);
  position: relative;
  display: inline-block; /* nécessaire pour les quotes */
  padding: 0 clamp(28px, 4vw, 64px); /* espace pour les quotes */
}

/* Guillemets décoratifs gauche/droite */
.about-quote__text::before,
.about-quote__text::after {
  position: absolute;
  line-height: 1;
  font-size: 7.5rem; /* responsive */
  color: var(--about-quote-accent, #c8a46a);
  opacity: 0.9;
  pointer-events: none;
}

/* OUVRANT en haut à gauche */
.about-quote__text::before {
  content: "\201C"; /* “ */
  left: 0; /* le remonte légèrement */
}

/* FERMANT en bas à droite */
.about-quote__text::after {
  content: "\201D"; /* ” */
  right: 0; /* le descend (différent du before) */
}

/* Auteur : nom au-dessus, rôle en dessous */
.about-quote__author {
  margin: clamp(16px, 2.2vw, 28px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f6f6f;
}
.about-quote__author strong {
  font-weight: 700;
  color: #1c1c1c;
}
.about-quote__author span {
  display: block;
  line-height: 1.2;
}
.about .controls {
        right: 16.5rem;
    }

/* Petits écrans : resserrer */
@media (max-width: 600px) {
  .about-quote__figure {
    max-width: 92%;
  }
  .about-quote__text {
    padding: 0 28px;
  }
  .about-quote__text::after {
    bottom: -0.25em;
  } /* un peu moins bas sur mobile */
}

/* ==============================
   Deck "chiffres" (Swiper)
   ============================== */

/* wrap + flèches */
.vision-swiper-wrap {
  position: relative;
  padding: 12px 0 24px;
}
.vision-swiper-wrap .my-prev,
.vision-swiper-wrap .my-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
}
.vision-swiper-wrap .my-prev {
  left: -8px;
}
.vision-swiper-wrap .my-next {
  right: -8px;
}
@media (max-width: 1280px) {
  .vision-swiper-wrap .my-prev {
    left: 8px;
  }
  .vision-swiper-wrap .my-next {
    right: 8px;
  }
}

/* Swiper viewport */
.vision-swiper {
  overflow: visible; /* important pour voir le chevauchement */
}

/* Slides — taille "latérale" par défaut */
.vision-card {
  position: relative;
  width: 356px; /* latérales */
  height: 473px; /* latérales */
  border-radius: 28px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.16);
  transition: width 0.35s ease, height 0.35s ease, box-shadow 0.35s ease,
    transform 0.35s ease, z-index 0.2s;
  margin-left: -120px; /* chevauchement */
}
.vision-card:first-child {
  margin-left: 0;
}

.vision-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slide active = grande carte centrale */
.vision-swiper .swiper-slide-active {
  width: 571px !important;
  height: 755px !important;
  z-index: 3;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.22);
}

/* Overlay + texte (ton hover est déjà OK — on le garde) */
.vision-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vision-card:hover .vision-overlay {
  opacity: 1;
}

.vision-overlay__text {
  color: #fff;
  text-align: center;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  font-size: clamp(28px, 3.2vw, 56px);
}


/* --- Reset léger --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f5f5f5;
}

/* --- Container principal du carrousel --- */
.hc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  width: 100%;
  margin: 0 auto;
}

/* --- Piste contenant les slides --- */
.hc-track {
  position: relative;
  width: 90%;
  height: 755px; /* hauteur fixe = height des cards desktop */

  /* 👉 pour le drag/swipe */
  touch-action: pan-y; /* on laisse le scroll vertical, on gère l'horizontal en JS */
  cursor: grab;
}

.hc-track.is-dragging {
  cursor: grabbing;
}

/* --- Slide de base --- */
.hc-slide {
  position: absolute;
  top: 50%;          /* centre verticalement dans .hc-track */
  left: 50%;
  border-radius: 24px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.8); /* centre X + Y */
  opacity: 0;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease,
    box-shadow 0.5s ease;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  will-change: transform, opacity;
  aspect-ratio: 3 / 4;
}

.hc-slide__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* 👉 évite le drag d’image par défaut qui peut gêner le swipe souris */
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Overlay + texte sur chaque slide (masqué par défaut) --- */
.hc-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.75)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: #fff;
  opacity: 0; /* caché par défaut */
  transition: opacity 0.35s ease;
  pointer-events: none; /* pas de clics capturés */
}

.hc-slide__headline {
  margin: 0;
  font: var(--h2-font);
  font-size: 3rem;
}

/* .hc-slide__headline span:first-child {
  margin: 0;
  font-family: "cormorant-infant",serif;
  font-size: 5rem;
} */
.hc-slide__headline span {
  display: block;
}

/* --- États de position relatifs (gérés par JS) --- */

/* Slide centrale */
.hc-slide.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);  /* centre X + Y */
  z-index: 5;
}

/* 👉 Overlay uniquement sur la slide active */
.hc-slide.is-active .hc-slide__overlay {
  opacity: 1;
}

/* Slides adjacentes – même logique, Y centrée */

.hc-slide.is-left {
  opacity: 1;
  transform: translate(calc(-100% - 20%), -50%) scale(0.7);
  z-index: 4;
}

.hc-slide.is-right {
  opacity: 1;
  transform: translate(calc(100% - 80%), -50%) scale(0.7);
  z-index: 4;
}

.hc-slide.is-left-2 {
  opacity: 1;
  transform: translate(calc(-100% - 55%), -50%) scale(0.55);
  z-index: 3;
}

.hc-slide.is-right-2 {
  opacity: 1;
  transform: translate(calc(100% - 45%), -50%) scale(0.55);
  z-index: 3;
}

/* --- Boutons flèches --- */
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);   /* centrage vertical seulement */
  border: none;
  background: transparent;       /* pas de fond */
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;              /* pas d'ombre */
  border-radius: 0;              /* pas de cercle */
  color: #004c66;
  z-index: 10;
}

/* Distance horizontale RESPONSIVE */
.hc-arrow--prev {
  left: calc(-1 * clamp(3rem, 8vw, 10rem));
}

.hc-arrow--next {
  right: calc(-1 * clamp(3rem, 8vw, 10rem));
}

.hc-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}

.hc-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.hc-arrow:focus-visible {
  outline: 2px solid #004c66;
  outline-offset: 4px;
}
.luxury-cards-agents .swiper-wrapper .swiper-slide{
  width:calc(33% - 14px);
}

/* --- Responsive simple --- */
@media (max-width: 768px) {
  .hc-track {
    height: 352px; /* hauteur mobile */
  }
  .intro__cta{
    font-size: 1rem;
  }
  .hc-slide {
    width: 267px;
    height: 352px;
    aspect-ratio: auto; /* on suit la height */
  }

  /* mêmes offsets adaptés mobile, avec Y centrée */
  .hc-slide.is-left,
  .hc-slide.is-right {
    transform: translate(calc(-50% - 185px), -50%) scale(0.9);
  }

  .hc-slide.is-right {
    transform: translate(calc(-50% + 185px), -50%) scale(0.9);
  }

  .hc-slide.is-left-2,
  .hc-slide.is-right-2 {
    opacity: 0; /* on cache les cartes les plus éloignées sur mobile */
  }

  /* 👉 flèches cachées en mobile */
  .hc-arrow {
    display: none;
  }
}

/* Responsive – garder les proportions */
@media (max-width: 1024px) {
  .vision-card {
    width: 300px;
    height: 400px;
    margin-left: -80px;
  }
  .vision-swiper .swiper-slide-active {
    width: 460px !important;
    height: 610px !important;
  }
}
@media (max-width: 768px) {
  .vision-card {
    width: 240px;
    height: 320px;
    margin-left: -56px;
  }
  .vision-swiper .swiper-slide-active {
    width: 360px !important;
    height: 480px !important;
  }
}

/* =========================================================
   RESPONSIVE - about.css (desktop-first, max-width)
   Base = 2560-1920 ; correctifs en dessous | PAGES CIBLEES UNIQUEMENT
========================================================= */
@media (max-width: 1680px) {
  /* Reduit la taille des cards destination et du slider chiffre */
  .about .dest-card {
    height: 480px;
    min-height: 480px;
  }
  .vision-card {
    margin-left: -80px;
  }
      .about .controls {
        right: 21.5rem;
    }
}

@media (max-width: 1280px) {
  /* Limite le chevauchement du slider vision */
  .vision-card {
    width: 320px;
    height: 420px;
    margin-left: -48px;
  }
  .vision-swiper .swiper-slide-active {
    width: 480px !important;
    height: 620px !important;
  }
}

@media (max-width: 1024px) {
  /* Ajuste la section quote et les cards */
  .about-quote {
    padding: clamp(80px, 12vw, 100px) 0;
  }
  .about .dest-card {
    height: 420px;
    min-height: 420px;
  }
  .vision-card {
    width: 280px;
    height: 360px;
    margin-left: -32px;
  }
  .vision-swiper .swiper-slide-active {
    width: 420px !important;
    height: 540px !important;
  }
}

@media (max-width: 768px) {
  /* Mono-colonne et slider recentre */
  .about .featured-listings {
    --card-w: 267px;
  }
  .vision-card {
    margin-left: -20px;
  }
  .vision-swiper-wrap .my-prev,
  .vision-swiper-wrap .my-next {
    top: auto;
    bottom: -48px;
    transform: none;
  }
  .section-title {
    font: var(--h3-font);
    margin: 0 2.5rem 2.5rem;
  }
  .hc-slide__headline {
   font-size: 2em;
  }
}

@media (max-width: 640px) {
  /* Quote compacte et boutons repositionnes */
  .about-quote {
    padding: clamp(64px, 14vw, 84px) 0;
  }
  .about-quote__text {
    font-size: clamp(20px, 7vw, 28px);
    padding: 0 20px;
  }
  .vision-swiper-wrap .my-prev,
  .vision-swiper-wrap .my-next {
    bottom: -40px;
  }
  .hc-slide__headline span:first-child {
    font-size: 3rem;
  }
}

@media (max-width: 480px) {
  /* Ajustements fins pour les cards */
  .about .dest-card {
    height: 360px;
    min-height: 360px;
    border-radius: 20px;
  }
  .vision-card {
    width: 220px;
    height: 300px;
    margin-left: -12px;
  }
  .vision-swiper .swiper-slide-active {
    width: 320px !important;
    height: 420px !important;
  }
  .btn--primary {
    font-size: 1rem;
    padding: 0.625rem 1rem;
  }
}

@media (max-width: 375px) {
  /* Compacter l'espacement vertical */
  .vision-swiper-wrap {
    padding-bottom: 56px;
  }
}

@media (max-width: 320px) {
  /* Dernier garde-fou contre le scroll horizontal */
  .vision-card {
    margin-left: 0;
  }
}
.hc-slide,
.hc-slide.is-active,
.hc-slide.is-left,
.hc-slide.is-right,
.hc-slide.is-left-2,
.hc-slide.is-right-2 {
  transition: transform 0.5s ease !important;
  transition-property: transform, opacity, box-shadow !important;
  will-change: transform, opacity !important;
}


/* === Scroll animations overrides === */
.about-quote {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.about-quote.is-visible {
  opacity: 1;
  transform: none;
}
.about-quote__text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.about-quote.is-visible .about-quote__text {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}

.hc-track {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hc-track.is-visible {
  opacity: 1;
}
.hc-track .hc-slide {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.hc-track.is-visible .hc-slide:nth-child(3) {
  transition-delay: 0s;
}
.hc-track.is-visible .hc-slide:nth-child(2),
.hc-track.is-visible .hc-slide:nth-child(4) {
  transition-delay: 0.15s;
}
.hc-track.is-visible .hc-slide:nth-child(1),
.hc-track.is-visible .hc-slide:nth-child(5) {
  transition-delay: 0.3s;
}