/* =============================================================
   Swiss Lima Property : fiche immersive d'un bien individuel
   (première utilisation : maison de Playa Caballeros, Punta Hermosa)

   Chargée APRÈS style.min.css, uniquement par les pages qui en ont
   besoin. Elle réutilise les jetons de style.css (couleurs, polices,
   espacements, rayons) et n'en redéfinit aucun : la fiche reste dans
   l'identité du site. La visionneuse réutilise les classes .lightbox
   de style.css ; seuls quelques ajustements tactiles sont ajoutés ici.
   Script associé : assets/js/fiche-bien.js
   ============================================================= */

/* ---------- 1. Ouverture : grande photo, titre, localisation, prix, boutons ----------
   Sous 760 px, la photo est affichée seule en haut, le texte en dessous sur fond
   encre : un titre, un prix et deux boutons superposés à la photo la masqueraient
   presque entièrement sur un téléphone. Au-delà, le texte se pose sur le bas de
   la photo, sous un voile qui laisse la baie visible en haut à droite. */
.bien-hero {
  position: relative;
  isolation: isolate;
  background: var(--c-ink);
  color: var(--c-white);
  overflow: hidden;
}
.bien-hero__media { position: relative; margin: 0; aspect-ratio: 4 / 3; max-height: 62svh; min-height: 240px; width: 100%; }
.bien-hero__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
}
.bien-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27, 28, 34, 0) 55%, rgba(27, 28, 34, 0.7) 88%, var(--c-ink) 100%);
  pointer-events: none;
}
.bien-hero__inner { position: relative; width: 100%; padding-block: var(--space-md) var(--space-xl); }
.bien-hero .breadcrumb { color: rgba(255, 255, 255, 0.8); flex-wrap: wrap; row-gap: 0.25em; }
.bien-hero .breadcrumb a { color: rgba(255, 255, 255, 0.8); }
.bien-hero .breadcrumb a:hover { color: var(--c-white); }
.bien-hero h1 {
  color: var(--c-white);
  font-size: var(--fs-4xl);
  max-width: 15ch;
}
.bien-hero__eyebrow { margin-bottom: var(--space-sm); }
.bien-hero__place {
  display: flex; align-items: center; gap: 0.5em;
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.bien-hero__place svg { width: 20px; height: 20px; flex: none; color: #E8B4BB; }

.bien-hero__offer {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  max-width: 820px;
}
.bien-hero__price { display: flex; flex-direction: column; gap: 0.15rem; color: var(--c-white); }
.bien-hero__price-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; color: #E8B4BB; }
.bien-hero__price strong {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
  font-weight: 560; line-height: 1.1;
  color: var(--c-white);
  font-variant-numeric: lining-nums;
}
.bien-hero__price-note { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); }
.bien-hero__offer .btn-row { gap: 0.75rem; }

.bien-hero__photos {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.55em 1.05em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(27, 28, 34, 0.55);
  color: var(--c-white);
  font-size: var(--fs-sm); font-weight: 600;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bien-hero__photos:hover, .bien-hero__photos:focus-visible { background: rgba(27, 28, 34, 0.8); border-color: var(--c-white); }
.bien-hero__photos svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 759px) {
  .bien-hero__offer .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .bien-hero__offer .btn { width: 100%; }
}

@media (min-width: 760px) {
  .bien-hero {
    display: flex; align-items: flex-end;
    min-height: clamp(560px, calc(100svh - var(--header-h) - 2rem), 840px);
  }
  .bien-hero__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; max-height: none; }
  /* Voile : fort en bas et à gauche (texte), nul en haut à droite (la baie). */
  .bien-hero__media::after {
    background:
      linear-gradient(180deg, rgba(27, 28, 34, 0.45) 0%, rgba(27, 28, 34, 0) 20%, rgba(27, 28, 34, 0) 34%, rgba(27, 28, 34, 0.62) 62%, rgba(27, 28, 34, 0.9) 100%),
      linear-gradient(90deg, rgba(27, 28, 34, 0.55) 0%, rgba(27, 28, 34, 0.2) 45%, rgba(27, 28, 34, 0) 70%);
  }
  /* Le fil d'Ariane remonte en haut à gauche de la photo, face au bouton « photos » :
     plus bas, il tombait sur la fresque en céramique, trop chargée pour être lisible. */
  .bien-hero__inner { position: static; padding-block: 6rem clamp(2.25rem, 4vw, 3.25rem); }
  .bien-hero .breadcrumb {
    position: absolute; z-index: 2;
    top: 1.85rem;
    left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
    right: 15rem;
    margin: 0;
  }
  .bien-hero .breadcrumb, .bien-hero__eyebrow, .bien-hero__place { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
  .bien-hero h1 { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3); }
  .bien-hero__photos { top: 1.5rem; right: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad))); }
}
@media (min-width: 760px) and (max-width: 1179px) {
  /* Prix au-dessus des boutons : côte à côte, le second bouton passait sous la bulle WhatsApp. */
  .bien-hero__offer { flex-direction: column; align-items: flex-start; }
}

/* ---------- 2. Présentation courte, caractéristiques ---------- */
.bien-intro { padding-block: var(--space-xl) var(--space-2xl); background: var(--c-paper); }
.bien-intro__text { max-width: 72ch; }
.bien-intro__text > * + * { margin-top: 1em; }
.bien-intro__text .lead { color: var(--color-text-body); }

/* style.css remet les marges à zéro, pas le retrait par défaut des listes (40 px). */
.bien-facts, .bien-spaces, .bien-steps { padding-left: 0; }
.bien-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.bien-fact {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.25rem 1rem 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.bien-fact:nth-last-child(-n+2) { border-bottom: 0; }
.bien-fact svg { width: 26px; height: 26px; color: var(--c-red); margin-bottom: 0.3rem; }
.bien-fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 560; line-height: 1.1;
  color: var(--c-ink);
}
.bien-fact__label { font-size: var(--fs-xs); line-height: 1.45; color: var(--color-text-soft); }
/* Huit caractéristiques : 2 colonnes sur téléphone, 2 rangées de 4 au-delà. */
@media (min-width: 700px) {
  .bien-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bien-fact { padding: 1.4rem 1.25rem; }
  .bien-fact:nth-child(4n+1) { padding-left: 0; }
  .bien-fact:not(:nth-child(4n)) { border-right: 1px solid var(--color-border); }
  .bien-fact:nth-last-child(-n+4) { border-bottom: 0; }
}
.bien-note { margin-top: var(--space-sm); font-size: var(--fs-xs); line-height: 1.6; color: var(--color-text-soft); max-width: 88ch; }

/* ---------- 3. Présentation : texte + duo de photos ---------- */
.bien-duo { position: relative; margin: 0; }
.bien-duo a { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-mist); cursor: zoom-in; }
.bien-duo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow, 900ms) var(--ease); }
.bien-duo a:hover img { transform: scale(1.03); }
.bien-duo a:focus-visible { outline: 3px solid var(--c-red); outline-offset: 3px; }
.bien-duo__main { width: 88%; margin-left: auto; aspect-ratio: 4 / 3; }
/* Médaillon : dans le flux, remonté sur l'angle bas gauche de la grande photo. */
.bien-duo__inset {
  position: relative;
  width: 46%; aspect-ratio: 4 / 3;
  margin-top: -22%;
  border: 6px solid var(--c-white);
  box-shadow: var(--shadow-lg);
}
.bien-duo figcaption { margin-top: var(--space-sm); font-size: var(--fs-xs); color: var(--color-text-soft); }

/* ---------- 4. Respiration : photo pleine largeur ---------- */
.bien-band { position: relative; margin: 0; background: var(--c-ink); }
.bien-band a { display: block; }
.bien-band img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 640px;
  object-fit: cover;
  object-position: 50% 58%;
}
.bien-band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-block: 2.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(27, 28, 34, 0) 0%, rgba(27, 28, 34, 0.7) 100%);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  pointer-events: none;
}
.bien-band figcaption .container { display: block; }
@media (min-width: 760px) { .bien-band img { aspect-ratio: 21 / 8; } }

/* ---------- 5. Galerie ---------- */
.bien-gallery__nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: var(--space-md);
}
.bien-gallery__nav a {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bien-gallery__nav a:hover, .bien-gallery__nav a:focus-visible { border-color: var(--c-red); color: var(--c-red); }
.bien-gallery__nav span { font-size: var(--fs-xs); color: var(--color-text-soft); }

.bien-gallery__group { margin-top: var(--space-xl); scroll-margin-top: calc(var(--header-h) + 1rem); }
.bien-gallery__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.9em;
  font-size: var(--fs-xl);
  margin-bottom: var(--space-md);
}
.bien-gallery__count { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-slate-2); }

/* Mosaïque : 2 colonnes sur téléphone, 6 colonnes dès 700 px (les classes
   de position sont posées par .devserver/galerie-bien.py). */
.bien-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bien-shot { position: relative; margin: 0; aspect-ratio: 4 / 3; min-width: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-mist); }
.bien-shot--feature, .bien-shot--m-full { grid-column: span 2; }
.bien-shot--feature { aspect-ratio: 3 / 2; }
.bien-shot__link { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.bien-shot__link img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow, 900ms) var(--ease);
}
.bien-shot__link:hover img { transform: scale(1.035); }
.bien-shot__link:focus-visible { outline: 3px solid var(--c-red); outline-offset: -3px; }
.bien-shot__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 0.9rem 0.7rem;
  background: linear-gradient(180deg, rgba(27, 28, 34, 0) 0%, rgba(27, 28, 34, 0.72) 100%);
  color: var(--c-white);
  font-size: var(--fs-xs); line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.bien-shot--feature .bien-shot__caption,
.bien-shot:hover .bien-shot__caption,
.bien-shot:focus-within .bien-shot__caption { opacity: 1; }
@media (hover: none) { .bien-shot:not(.bien-shot--feature) .bien-shot__caption { display: none; } }

@media (min-width: 700px) {
  .bien-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .bien-shot { grid-column: span 2; }
  .bien-shot--m-full { grid-column: span 2; }
  .bien-shot--feature { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
  .bien-shot--half { grid-column: span 3; aspect-ratio: 3 / 2; }
  .bien-shot--full { grid-column: span 6; aspect-ratio: 3 / 1; }
  .bien-shot--feature .bien-shot__caption { font-size: var(--fs-sm); padding: 3rem 1.2rem 1rem; }
}

/* ---------- 6. Distribution ---------- */
.bien-layout { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); }
@media (min-width: 960px) { .bien-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); } }
.bien-layout h3 { font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
.bien-layout__src { font-size: var(--fs-xs); color: var(--color-text-soft); margin-bottom: var(--space-md); }

.bien-spaces { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.bien-spaces li {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
}
.bien-spaces li::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-red);
  transform: translateY(-1px);
}
@media (min-width: 560px) and (max-width: 959px) {
  .bien-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
}

.bien-levels { border-top: 1px solid var(--color-border); }
.bien-level {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.bien-level__name { font-weight: 650; color: var(--c-ink); }
.bien-level__area { font-family: var(--font-display); font-size: var(--fs-md); color: var(--c-ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.bien-level__rooms { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--color-text-body); line-height: 1.55; }
.bien-level--total { background: var(--c-cream); padding-inline: 1rem; border-bottom: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.bien-level--total .bien-level__rooms { color: var(--color-text-soft); }

/* ---------- 7. Localisation ---------- */
.bien-map { height: auto; }
.bien-map .map-card__frame { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  /* Dans le .split, la carte s'étire sur la hauteur du texte : le cadre suit. */
  .bien-map { height: 100%; }
  .bien-map .map-card__frame { flex: 1; aspect-ratio: auto; min-height: 340px; }
}
.bien-map .map-card__head span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.bien-marks { display: grid; gap: 0; margin-top: var(--space-md); border-top: 1px solid var(--color-border); }
.bien-marks div { display: grid; grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.bien-marks dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-slate-2); padding-top: 0.2em; }
.bien-marks dd { margin: 0; color: var(--color-text-body); }

/* ---------- 8. Notre lecture ---------- */
.bien-reading { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); }
@media (min-width: 960px) { .bien-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }
.bien-reading h3 { font-size: var(--fs-lg); margin-bottom: var(--space-md); }
.bien-uses > div + div { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.bien-uses h4 { font-size: var(--fs-md); margin-bottom: 0.35rem; }
.bien-uses p { font-size: var(--fs-sm); }
.bien-watch { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius); background: var(--c-cream); }
.bien-watch p { font-size: var(--fs-sm); }
.bien-watch a, .bien-reading a:not(.btn), .bien-link { color: var(--c-red); text-decoration: underline; text-underline-offset: 0.18em; }
.bien-watch a:hover, .bien-reading a:not(.btn):hover, .bien-link:hover { color: var(--c-red-bright); }

/* ---------- 9. Accompagnement (fond sombre) ---------- */
.bien-steps { display: grid; gap: var(--space-md); margin-top: var(--space-lg); counter-reset: etape; }
@media (min-width: 760px) { .bien-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); } }
.bien-steps li { position: relative; padding-left: 3.1rem; counter-increment: etape; }
.bien-steps li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: -0.1rem;
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  color: #C9A96E;
}
.bien-steps strong { display: block; color: var(--c-white); margin-bottom: 0.2rem; }
.bien-steps p { font-size: var(--fs-sm); }
.section--dark .bien-note { color: rgba(255, 255, 255, 0.62); }
.section--dark .bien-link { color: #E8B4BB; }
.section--dark .bien-link:hover { color: var(--c-white); }

/* ---------- 10. Contact final ---------- */
.bien-cta__micro { margin-top: 0.8rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.78); }
/* Lien avec classe : la règle générale « main p … a:not([class]) » le colorerait
   en rouge, invisible sur le bandeau rouge. */
.cta-banner .bien-cta__mail { color: var(--c-white); text-decoration: underline; text-underline-offset: 0.18em; }
.cta-banner .bien-cta__mail:hover { color: var(--c-red-wash); }

/* ---------- 11. Visionneuse : ajustements tactiles ---------- */
.lightbox[data-bien] { overscroll-behavior: contain; touch-action: pan-y; }
.lightbox[data-bien] .lightbox__inner { margin: 0; }
.lightbox[data-bien] .lightbox__img { user-select: none; -webkit-user-drag: none; max-height: 78vh; background: rgba(255, 255, 255, 0.04); }
@media (max-width: 640px) {
  .lightbox[data-bien] .lightbox__inner { max-width: 100vw; padding-inline: 0.5rem; }
  .lightbox[data-bien] .lightbox__img { max-height: 70vh; border-radius: var(--radius-sm); }
  .lightbox[data-bien] .lightbox__btn { top: auto; bottom: 1rem; transform: none; }
  .lightbox[data-bien] .lightbox__counter { bottom: 1.9rem; }
}