/* =========================================================
   Horizon Immobilier — luxury.css
   Inspiré du style éditorial des sites de location de chalets
   de luxe : typographie mixte sans+serif italique, hero
   carousel, sections numérotées, CTA rond.
   ========================================================= */

/* ---------- Palette affinée (plus chaleureuse) ---------- */
:root {
  --c-cream: #f7f1e6;
  --c-warm: #ede4d3;
  --c-copper: #a47148;
  --c-stone: #8a8377;
}

body { background: var(--c-bg); }

/* ---------- 1. Hero — typographie mixte ---------- */
.hero__content h1 {
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.hero__content h1 .hero__accent {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold-light);
  /* léger décalage pour l'élégance */
  margin-left: .15em;
  margin-top: -.05em;
}

/* ---------- 2. Hero — carousel d'images ---------- */
.hero__media {
  /* on autorise plusieurs images empilées */
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__media img.is-active { opacity: 1; }
/* Sans carousel : l'image unique est visible immédiatement */
.hero__media[data-no-carousel] img { opacity: 1; }

/* ---------- 3. Hero — CTA rond "Découvrir" ---------- */
.hero__discover {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  text-decoration: none;
  animation: fade-up 1s ease 1.6s both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.hero__discover-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.hero__discover-circle::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .4s ease, transform .4s ease;
}
.hero__discover:hover .hero__discover-circle {
  border-color: var(--c-gold);
  transform: scale(1.08);
}
.hero__discover:hover .hero__discover-circle::before {
  opacity: 1;
  transform: scale(1);
}
.hero__discover-arrow {
  width: 16px;
  height: 16px;
  color: #fff;
  animation: bounce-down 2.2s ease-in-out infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
.hero__discover-label {
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

/* On masque l'ancien indicateur si présent */
.hero__scroll { display: none !important; }

/* ---------- 4. Sections — labels numérotés verticaux ---------- */
.section[data-section-num] {
  position: relative;
}
.section[data-section-num]::before {
  content: attr(data-section-num) " — " attr(data-section-label);
  position: absolute;
  left: 30px;
  top: 90px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-stone);
  font-weight: 500;
  white-space: nowrap;
}
.section--dark[data-section-num]::before {
  color: rgba(216, 201, 168, .65);
}

/* ---------- 5. Section heads — gros chiffre filigrane ---------- */
.section-head {
  position: relative;
}
.section-head__number {
  position: absolute;
  top: -30px;
  right: 0;
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  font-weight: 400;
  font-style: italic;
  color: var(--c-line);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  opacity: .7;
}
.section--dark .section-head__number { color: rgba(255,255,255,.05); }
.section-head__text { position: relative; z-index: 1; }

/* On supprime le petit trait gold ajouté avant (remplacé par le chiffre) */
.section .section-head::before,
.section--soft .section-head::before,
.section--dark .section-head::before {
  display: none;
}

/* ---------- 6. Cartes biens — refresh éditorial ---------- */
.bien-card {
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.bien-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
}
.bien-card__media {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 4 / 5;
}
.bien-card__media img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.bien-card:hover .bien-card__media img { transform: scale(1.05); }

.bien-card__body { padding: 0; }
.bien-card__price {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: .01em;
  margin-bottom: 2px;
}
.bien-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--c-accent);
  margin-bottom: 4px;
  font-style: italic;
}
.bien-card__location {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--c-stone);
  margin-bottom: 14px;
  font-weight: 500;
}
.bien-card__meta {
  border-top: 1px solid var(--c-line);
  padding-top: 12px;
  font-size: .82rem;
  color: var(--c-muted);
  letter-spacing: .02em;
}
.bien-card__badge {
  background: rgba(255,255,255,.95);
  color: var(--c-accent);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  padding: 6px 14px;
}
.bien-card__cta {
  background: rgba(255,255,255,.95);
  color: var(--c-accent);
  border: 1px solid rgba(255,255,255,.5);
}

/* ---------- 7. Section split (À propos) — typographie éditoriale ---------- */
.split h2 {
  font-style: italic;
  font-weight: 400;
}
.split .prose {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #444;
  max-width: 480px;
}
.split img {
  border-radius: 4px;
  height: 540px;
}

/* ---------- 8. Eyebrow simplifié (on garde le tiret or) ---------- */
.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  font-weight: 500;
}

/* ---------- 9. Section CTA finale — pleine largeur image ---------- */
.section.cta-final {
  position: relative;
  padding: 140px 0;
  color: #fff;
  background: var(--c-accent);
  overflow: hidden;
}
.section.cta-final::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(15,31,31,.45), rgba(15,31,31,.55)),
    url('../images/cta-chalet.jpg') center/cover;
  z-index: 0;
}
.section.cta-final .container {
  position: relative;
  z-index: 1;
}
.section.cta-final h2 {
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-style: italic;
  font-weight: 400;
}
.section.cta-final .lead { color: rgba(255,255,255,.85); }
.section.cta-final .eyebrow { color: var(--c-gold-light); }

/* ---------- 10. Hero — h1 plus imposant ---------- */
.hero__content h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.4rem);
  margin-bottom: 28px;
}
.hero__content .lead { font-size: 1.15rem; max-width: 520px; }

/* ---------- 11. Searchbar — finition luxe ---------- */
.searchbar {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 900px) {
  .section[data-section-num]::before { display: none; }
  .section-head__number { font-size: 4rem; top: -20px; }
  .split img { height: 360px; }
  .hero__discover { bottom: 24px; }
  .hero__discover-circle { width: 56px; height: 56px; }
}

/* ---------- 13. Réduction mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__discover-arrow { animation: none; }
  .hero__media img { transition: none; }
}