:root {
  --bg: #f5f7fa;
  --paper: #ffffff;
  --ink: #1e293b;
  --mute: #64748b;
  --line: #e2e8f0;
  --pri: #0e3e57;
  --cta: #1d5b7a;
  --shadow: 0 10px 30px rgba(2, 12, 32, 0.08);
  --radius: 16px;
}

/* RESET & BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* CONTAINER GÉNÉRAL */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.row {
  margin-top: auto;              /* pousse le bouton vers le bas */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  border: none;
  background: #ed5434;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background: #d8432b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}


.btn--primary {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 80, 115, 0.25);
}
.btn--primary:hover { background: #0d3c55; }
.btn--dark {
  background: #1e293b;
  color: #fff;
}
.muted { color: var(--mute); }
.muted--tiny { font-size: 12px; }

/* HEADER */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header__inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand__logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0ea5e9, #0e3e57);
}
.brand__name {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.3px;
}

/* HERO */
.hero {
  padding: 60px 0 30px;
  text-align: center;
}
.hero h1 {
  font-size: 42px;
  color: var(--pri);
  margin-bottom: 10px;
}
.hero__sub {
  font-size: 18px;
  color: var(--mute);
}

/* GRID PRINCIPALE */
.main {
  margin: 40px auto 90px;
  width: 100%;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 36px;
  justify-items: center;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;        /* disposition verticale */
  height: 100%;                  /* la carte prend toute la hauteur */
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(2, 12, 32, 0.15);
}
.pic {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #cbd5e1;
}
.pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chip {
  position: absolute;
  left: 14px; top: 14px;
  background: #0f172acc;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  backdrop-filter: blur(4px);
}
.price {
  position: absolute;
  right: 14px; bottom: 14px;
  background: #0f172acc;
  color: #fff;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;                  /* remplit l’espace vertical disponible */
  padding: 16px;
}
.ttl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.ttl h3 {
  font-size: 22px;
  color: var(--pri);
  margin: 0;
}
.meta {
  color: var(--mute);
  font-size: 14px;
  margin-bottom: 10px;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.fact{ background:#f1f5f9;border-radius:10px;padding:7px 10px;font-size:13px }

.dpe{ display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 }

.pill {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  color: #000;
  border: 1px solid var(--line);
  font-weight: 600;
}
.A{background:#86efac}
.B{background:#bef264}
.C{background:#fde047}
.D{background:#facc15}
.E{background:#fb923c}
.F{background:#f87171}
.G{background:#ef4444}

/* FEUILLE DÉTAIL */
#backdrop{
  position:fixed;inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0;visibility:hidden;
  transition:.25s;z-index:49
}
#backdrop.show{opacity:1;visibility:visible}

.sheet{
  position:fixed;inset:0 0 0 auto;
  width:min(1200px,100%);           /* ← largeur augmentée */
  max-width:1200px;
  background:var(--paper);
  border-left:1px solid var(--line);
  box-shadow:-26px 0 60px rgba(2,6,23,.28);
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:50;
  display:grid;
  grid-template-rows:auto auto 1fr;
}
@media (min-width:1600px){
  .sheet{ width:min(1280px,100%); max-width:1280px; }
}
.sheet.open{ transform:translateX(0) }

.sheet__head{
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between
}
.title{ margin:4px 0 0; font-size:24px; line-height:1.2 }
.ref{ font-size:13px; color:var(--mute) }
.ask{ font-weight:800; font-size:26px; color:var(--pri) }  /* prix plus grand */

.sheet__gallery{ background:#000; position:relative }
.slides{ position:relative; aspect-ratio:16/9 }            /* ← plus panoramique */
.slides img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .25s
}
.slides img.active{ opacity:1 }
.slides__nav{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
  padding:8px
}
.gbtn{
  background:#111827cc;color:#fff;border:none;border-radius:12px;
  padding:10px 14px;cursor:pointer;font-size:18px;line-height:1
}
.thumbs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); /* vignettes plus grandes */
  gap:6px;background:#0b1220;padding:8px
}
.thumbs img{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;
  opacity:.75;border:2px solid transparent;cursor:pointer
}
.thumbs img.active{ opacity:1;border-color:#fff }

/* Corps en 2 colonnes plus confort, + espace */
.sheet__body{
  display:grid;grid-template-columns:1.2fr 1fr; /* ← colonne gauche un peu plus large */
  gap:24px;padding:22px
}
@media (max-width:1100px){ .sheet__body{ grid-template-columns:1fr } }

.box{
  border:1px solid var(--line);border-radius:14px;padding:20px;
  box-shadow:var(--shadow);background:var(--paper)
}

.ask {
  font-weight: 800;
  font-size: 22px;
  color: var(--pri);
}
.mapOne{
  height:340px;                      /* ← carte plus grande */
  border-radius:12px;overflow:hidden;border:1px solid var(--line)
}

/* === FOOTER LIORAN IMMO (version centrée et collée bas) === */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* ---- FOOTER ---- */
.site-footer{
  background:#111827;
  color:#f3f4f6;
  border-top:4px solid #ed5434;
  margin-top:auto;
}

.site-footer .container{
  max-width:1160px;
  margin:0 auto;
  padding:42px 20px 0;
}

/* Grille du haut */
.footer-top{
  display:grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr; /* 3 colonnes équilibrées */
  gap:32px;
  align-items:start;
}

.footer-col h3{
  color:#fff;
  font-size:18px;
  margin:0 0 12px;
  border-left:4px solid #ed5434;
  padding-left:10px;
  line-height:1.1;
  font-weight:700;
}

/* Logo + contact */
#logo_footer{
  width: 190px;
  height: auto;
  margin-bottom:18px;
  display:block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

#contact_details_footer{
  list-style:none;
  margin:0; padding:0;
  color:#d1d5db;
  line-height:1.6;
  font-size:14px;
}

#contact_details_footer a{
  color:#ed5434;
  text-decoration:none;
  font-weight:600;
}
#contact_details_footer a:hover{ text-decoration:underline; }

/* Bloc "Avis" */
.rating{
  color:#f3f4f6;
  font-size:16px;
  margin:0;
}
.rating span{
  color:#9ca3af;
  font-size:14px;
  margin-left:6px;
}

/* Bloc webcams */
.foot-text{
  color:#d1d5db;
  margin:0 0 12px;
  font-size:14.5px;
}

.btn_1{
  padding:10px 22px;
  background:#ed5434;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  box-shadow:0 3px 10px rgba(0,0,0,0.25);
  transition:background-color .25s ease, transform .25s ease;
}
.btn_1:hover{ background:#f35c3d; transform:translateY(-2px); }

/* Barre du bas centrée */
#social_footer{
  text-align:center;
  border-top:1px solid #374151;
  padding:16px 0;
  margin-top:34px;
}
#social_footer p{
  color:#9ca3af;
  font-size:14px;
  margin:0;
  letter-spacing:.3px;
}

/* Responsive */
@media (max-width: 990px){
  .footer-top{
    grid-template-columns:1fr 1fr; /* 2 colonnes */
  }
}
@media (max-width: 620px){
  .site-footer .container{ padding:28px 16px 0; }
  .footer-top{
    grid-template-columns:1fr;      /* 1 colonne */
    gap:26px;
  }
  .footer-col h3{
    border-left:none;
    padding-left:0;
  }
  #logo_footer{
    margin-left:auto;
    margin-right:auto;
  }
  #contact_details_footer, .foot-text, .rating{
    text-align:center;
  }
  #social_footer{ margin-top:24px; }
}


/* --- Visibilité & mise en forme du simulateur dans la fiche --- */
.sheet__body .box h3 {
  margin: 0 0 10px;
  color: var(--pri);
  font-size: 18px;
}

.sheet__body .muted { color: var(--mute); }

/* Grille du simulateur (les 4 champs) */
.sheet__body .tool__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0 6px;
}
@media (max-width: 1100px){
  .sheet__body .tool__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .sheet__body .tool__grid{ grid-template-columns: 1fr; }
}

/* Labels & inputs */
.sheet__body .tool__grid label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.sheet__body .tool__grid input{
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  font-size: 15px;
}

/* Bloc visuel du simulateur (fond léger pour le faire ressortir) */
.sheet__body .box > hr{
  border: none;
  border-top: 1px solid var(--line);
  margin: 16px 0 14px;
}
.sheet__body .simu-wrap,
.sheet__body .tool__grid{
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.sheet__body .result{ 
  margin-top: 10px;
  font-weight: 800;
  color: var(--pri);
  font-size: 18px;
}
.sheet__body #s_result2{
  margin-top: 4px;
  color: var(--mute);
}

/* S'assure que la fiche scrolle si le contenu est long (donc on voit toujours le sim.) */
.sheet{
  max-height: 100vh;
  overflow-y: auto;
}
#logo img {
  height: 35px;
  width: auto;
  margin: 8px 0;
}
  .col-md-3 {
    width:22%;
  }
  a {color: #111;text-decoration: none;-webkit-transition: all 0.2s ease;transition: all 0.2s ease; outline:none;}
  
  .logo-text {
  font-weight: bold;
}
/* === Bandeau Résidence (visible, lisible) === */
.banner{
  position: relative;
  width: 100%;
  height: 480px;               /* tu peux ajuster 420–600px */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  isolation: isolate;          /* pour gérer l’overlay proprement */
}

.banner img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%; /* remonte/descend la résidence */
  filter: brightness(.85);
  transform: scale(1);         /* reset */
  transition: transform 8s ease;
  will-change: transform;
}

/* léger zoom chic, pas destructif */
.banner:hover img{ transform: scale(1.05); }

.banner__overlay{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 24px 28px;
  border-radius: 14px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.40),
    rgba(0,0,0,.25)
  );
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  max-width: min(92vw, 980px);
}

.banner__overlay h1{
  margin: 0 0 6px;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: .2px;
}

.banner__overlay p{
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  opacity: .95;
}

/* assure que le contenu en dessous ne colle pas */
.banner + .intro-vente,
.banner + .container,
.banner + .main{
  margin-top: 24px;
}

/* si le header sticky recouvre visuellement le début, donne un petit offset */
.site-header{ z-index: 20; }