/* ============================================================================
   BELLEVUE VILLAS — components.css
   ----------------------------------------------------------------------------
   Blocs RÉUTILISÉS sur plusieurs pages (accueil, villas, contacts, blog…).
   Les garder ici (et non dans home.css) évite les bugs quand une page
   les utilise sans charger home.css.
   Sommaire :
     A. Bloc "Localisation" (carte navy + liste d'infos)
     B. Bande d'appel à l'action (CTA)
     C. Galerie lightbox (plein écran)
   ========================================================================== */

/* ========================================================================
   A. LOCALISATION — reproduit 1:1 du site original :
      colonne gauche = titre serif + fiche simple (fond transparent, liseré
      taupe en bas, 3 lignes icône+texte, lien fléché) ; colonne droite =
      carte Google Maps embarquée.
   ===================================================================== */
.location-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:center;
}
.location-title{ text-align:left; margin-bottom:26px; }
.location-card{
  max-width:430px;
  padding-bottom:16px;
  border-bottom:3px solid var(--taupe);   /* liseré taupe sous la fiche */
}
/* Carte Google Maps à droite */
.location-map{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  min-height:420px; background:var(--light);
}
.location-map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }
.location-list li{
  display:flex; align-items:flex-start; gap:14px; padding:16px 0;
  font-family:var(--font-body); font-size:1rem; color:var(--ink); line-height:1.4;
}
/* Un fin trait de séparation sous l'adresse (comme l'original). */
.location-list li:first-child{ border-bottom:1px solid var(--taupe); }
.location-list svg{ width:20px; height:20px; flex:0 0 auto; stroke:var(--text); fill:none; margin-top:2px; }
.location-card .link-arrow{ margin-top:18px; }

/* ========================================================================
   B. BANDE CTA — reproduit 1:1 : fond CLAIR, texte sombre aligné à gauche,
      bouton navy + lien fléché (et non plus une bande navy centrée).
   ===================================================================== */
.cta-band{ background:var(--light); color:var(--text); }
.cta-band h2{ color:var(--ink); }
.cta-band p{ color:var(--muted); max-width:64ch; margin:0 0 30px; font-size:1.1rem; }
.cta-actions{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }

/* ========================================================================
   C. LIGHTBOX (galerie plein écran)
   Ouverte par le JS quand on clique une image d'un conteneur [data-lightbox].
   ===================================================================== */
.lb-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(12,18,28,.94);
  display:none; align-items:center; justify-content:center; padding:32px;
  opacity:0; transition:opacity .3s ease;
}
.lb-overlay.open{ display:flex; opacity:1; }
.lb-overlay img{
  max-width:92vw; max-height:86vh; border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0; transform:scale(.98);
  transition:opacity .35s ease, transform .35s ease;   /* fondu à chaque changement d'image */
}
.lb-overlay img.in{ opacity:1; transform:none; }
/* Compteur "3 / 8" en bas de la lightbox */
.lb-counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color:#fff; font-family:var(--font-body); font-size:.9rem; letter-spacing:.05em;
  background:rgba(255,255,255,.12); padding:6px 16px; border-radius:var(--radius-pill);
}
.lb-close,.lb-nav{
  position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff;
  width:52px; height:52px; border-radius:50%; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.28); transform:scale(1.05); }
.lb-close{ top:24px; right:24px; }
.lb-nav.prev{ left:24px; top:50%; transform:translateY(-50%); }
.lb-nav.next{ right:24px; top:50%; transform:translateY(-50%); }
.lb-nav.prev:hover{ transform:translateY(-50%) scale(1.05); }
.lb-nav.next:hover{ transform:translateY(-50%) scale(1.05); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .location-grid{ grid-template-columns:1fr; }
  .location-card{ max-width:100%; }
  .location-map, .location-map iframe{ min-height:320px; }
}