:root {
  /* -------- PRIMITIVES (dédup) -------- */
  --ls-0: 0;                 /* letter-spacing: 0px */
  --fs-18: 1.125rem;         /* 18px */
  --fs-24: 1.5rem;           /* 24px */
  --fw-semibold: 600;        /* Semibold */
  --fw-bold: 700;            /* Bold */

  /* Typo base */
  --fs-body: 1.125rem;     /* 18px */
  --lh-body: 1.625rem;     /* 26px */

  /* -------- TYPO TOKENS (composites `font:`) -------- */
  /* H2 — Big Caslon “medium” 48/normal
     (Big Caslon FB n’a pas de vraie graisse 500 → mappé) */
  --h2-font-family: "cormorant-infant", serif;
  --h2-font-weight: 500;
  --h2-font-size: 3rem;       /* 48px */
  --h2-line-height: normal;
  --h2-font:
    var(--h2-font-weight) var(--h2-font-size)/var(--h2-line-height) var(--h2-font-family);

  /* H3 — Big Caslon “medium” 40/normal */
  --h3-font-family: "cormorant-infant", serif;
  --h3-font-weight: 500;
  --h3-font-size: 2.5rem;     /* 40px */
  --h3-line-height: normal;
  --h3-font:
    var(--h3-font-weight) var(--h3-font-size)/var(--h3-line-height) var(--h3-font-family);
}

/* =========================================
   GRILLE DE 4 CARDS
========================================= */
.luxury__cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 534px);
  grid-template-rows: repeat(2, 732px);
  gap: 40px 40px; /* row-gap / column-gap */
  justify-content: center;
  margin-top: 4rem;
}

.luxury__card {
  position: relative;
  /* width: 534px;
  height: 732px; */
  border-radius: 24px;
  overflow: hidden;
  background: center/cover no-repeat var(--card-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* contenu en bas */
  color: #fff;
}

/* Décalage des cards de droite */
.luxury__card--offset {
  margin-top: 80px;
}

.luxury__card_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0.3) 50%,
    rgba(0,0,0,0) 100%
  );
}

.luxury__card_content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  text-align: left; /* ✅ alignement gauche */
}

.luxury__card-title {
  margin: 0 0 1rem;
  font: var(--h3-font);
}

.luxury__card-text {
  margin: 0 0 1rem;
  font: 400 16px/24px Montserrat, sans-serif;
  max-width: 90%;
}

.luxury__card-link {
  font: 600 16px Montserrat, sans-serif;
  color: #fff;
}

.luxury__card-link:hover {
  opacity: 0.9;
  text-decoration: underline;
  color: #f1f1f1;

}


/* Optionnel : petits ajustements responsives */
@media (max-width: 1023.98px){
  body .bloc__intro div.luxury__cards-ellipses{
    --ellipse-size: 20rem;
    --ellipse-left-top: 25rem;      /* descend encore un peu sur tablette */
    --ellipse-right-bottom: 0rem;
  }
}


/* =========================================================
   ≤ 1024px — Tablette paysage
   ========================================================= */
@media (max-width: 1024px) {
  .immobilier--service-louer .luxury__cards-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: clamp(12px, 4vw, 24px);
    width: 100vw;
    max-width: none;
    padding: 0 clamp(16px, 5vw, 36px) 1.25rem;
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    scroll-padding-left: clamp(16px, 5vw, 36px);
    scroll-padding-right: clamp(16px, 5vw, 36px);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .immobilier--service-louer .luxury__cards-grid::-webkit-scrollbar {
    display: none;
  }

  .immobilier--service-louer .luxury__card,
  .immobilier--service-louer .luxury__card--offset {
    flex: 0 0 auto;
    width: min(78vw, 360px);
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: 22px;
    transform: none;
    background: center / cover no-repeat var(--card-bg);
    scroll-snap-align: start;
  }
}

/* =========================
   ≤ 768px — ajustements
   ========================= */
@media (max-width: 768px) {
  .immobilier--service-louer .luxury__cards-grid {
    padding-inline: clamp(16px, 8vw, 56px);
  }

  .immobilier--service-louer .luxury__card,
  .immobilier--service-louer .luxury__card--offset {
    min-height: 420px;
    border-radius: 20px;
  }
  .bloc__intro { padding: 4.5rem 0 3.5rem; }

}

/* =========================
   ≤ 440px — mobile compact
   ========================= */
@media (max-width: 440px) {
  .immobilier--service-louer .luxury__cards-grid {
    padding-inline: clamp(12px, 6vw, 24px);
    gap: 14px;
  }
  .immobilier--service-louer .luxury__card,
  .immobilier--service-louer .luxury__card--offset {
    min-height: 360px;
    border-radius: 16px;
  }
  .immobilier--service-louer .luxury__card-title {font-size: 1.625rem;} /* 26px */ 
  .featured-listings {padding: 3.25rem 0 1.25rem;}
}

/* =========================
   ≤ 375px — mobile
   ========================= */
@media (max-width: 440px) {
  .immobilier--service-louer .luxury__card-title {font-size: 1.25rem;} /* 26px */ 
  .immobilier--service-louer .luxury__card-link {font-size: 0.875rem; } /* 14px */
  .immobilier--service-louer .luxury__card-text {font-size: 0.875rem;} /* 14px */
}

@media (max-width: 1024px) {
  .luxury__cards-grid,
  .luxury__cards-grid.six_cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: clamp(12px, 4vw, 24px);
    padding: 0 clamp(16px, 5vw, 36px) 1.25rem;
    width: 100vw;
    max-width: none;
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    scroll-padding-left: clamp(16px, 5vw, 36px);
    scroll-padding-right: clamp(16px, 5vw, 36px);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .luxury__cards-grid::-webkit-scrollbar,
  .luxury__cards-grid.six_cards::-webkit-scrollbar {
    display: none;
  }

  .luxury__cards-grid .luxury__card,
  .luxury__cards-grid .luxury__card--offset,
  .luxury__cards-grid.six_cards .luxury__card {
    flex: 0 0 auto;
    width: min(78vw, 360px);
    max-width: none;
    height: auto;
    margin: 0;
    transition: none;
    transform: none !important;
    background-size: cover;
    scroll-snap-align: start;
  }

  .luxury__cards-grid .luxury__card--offset,
  .luxury__cards-grid.six_cards .luxury__card--offset {
    margin-top: 0;
  }
}