.page-hero{
  max-width:1300px;
  margin:30px auto;
  padding:0 25px;
}

.immo-hero{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:34px;
  padding:35px;
  box-shadow:var(--shadow);
}

.immo-hero h2{
  font-size:42px;
  margin:15px 0;
}

.immo-hero p{
  color:var(--muted);
  max-width:850px;
  line-height:1.8;
}

.immo-category-grid{
  max-width:1300px;
  margin:25px auto;
  padding:0 25px;

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.immo-category-grid button{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:28px;
  min-height:160px;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;

  color:var(--text);

  transition:.25s;
}

.immo-category-grid button:hover{
  transform:translateY(-5px);
}

.immo-category-grid button.active{
  background:
  linear-gradient(
    135deg,
    rgba(200,155,60,.18),
    rgba(200,155,60,.05)
  );
}

.immo-category-grid img{
  width:65px;
  height:65px;
  object-fit:contain;
}

.immo-category-grid span{
  font-weight:900;
  text-align:center;
}

.filter-panel{
  max-width:1300px;
  margin:30px auto;
  padding:0 25px;

  display:grid;
  grid-template-columns:
  repeat(4,1fr);

  gap:15px;
}

.filter-panel input,
.filter-panel select,
.filter-panel button{
  width:100%;

  padding:15px;

  border-radius:18px;

  border:1px solid var(--border);

  background:var(--card);

  color:var(--text);

  outline:none;
}

.filter-panel button{
  background:
  linear-gradient(
    135deg,
    var(--gold),
    var(--gold2)
  );

  color:#111;

  font-weight:900;

  cursor:pointer;
}

.section-title{
  max-width:1300px;
  margin:25px auto;
  padding:0 25px;
}

.section-title h2{
  margin-bottom:8px;
}

.section-title p{
  color:var(--muted);
}

.items-grid{
  max-width:1300px;
  margin:0 auto 50px;
  padding:0 25px;

  display:grid;
  grid-template-columns:
  repeat(3,1fr);

  gap:22px;
}

.item-card{
  background:var(--card);

  border:1px solid var(--border);

  border-radius:30px;

  overflow:hidden;

  transition:.25s;

  box-shadow:var(--shadow);
}

.item-card:hover{
  transform:translateY(-6px);
}

.item-card img{
  width:100%;
  height:250px;
  object-fit:cover;
}

.item-body{
  padding:20px;
}

.item-body h3{
  margin:10px 0;
  font-size:22px;
}

.item-meta{
  color:var(--muted);
  line-height:1.8;
}

.price{
  margin-top:15px;

  font-size:28px;

  font-weight:900;

  color:var(--gold2);
}

.status{
  display:inline-flex;

  padding:8px 14px;

  border-radius:999px;

  font-size:12px;

  font-weight:800;
}

.status.disponible{
  background:#ccfbf1;
  color:#0f766e;
}

.status.reserve{
  background:#fef3c7;
  color:#92400e;
}

.status.loue{
  background:#dbeafe;
  color:#1e40af;
}

.status.vendu{
  background:#fee2e2;
  color:#991b1b;
}

.item-actions{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.item-actions a{
  padding:14px;
  text-align:center;
  border-radius:16px;
  font-weight:900;
}

.whatsapp-btn{
  background:#22c55e;
  color:white;
}

.visit-btn{
  background:
  linear-gradient(
    135deg,
    var(--gold),
    var(--gold2)
  );

  color:#111;
}

.detail-btn{
  background:var(--card2);
}

.empty{
  grid-column:1/-1;

  background:var(--card);

  border:1px solid var(--border);

  border-radius:28px;

  padding:40px;

  text-align:center;
}

/* TABLETTE */

@media(max-width:1050px){

  .items-grid{
    grid-template-columns:
    repeat(2,1fr);
  }

  .immo-category-grid{
    grid-template-columns:
    repeat(3,1fr);
  }

  .filter-panel{
    grid-template-columns:
    repeat(2,1fr);
  }

}

/* MOBILE */

@media(max-width:700px){

  .page-hero,
  .immo-category-grid,
  .filter-panel,
  .items-grid,
  .section-title{
    padding-left:18px;
    padding-right:18px;
  }

  .immo-hero h2{
    font-size:32px;
  }

  .immo-category-grid{
    grid-template-columns:
    repeat(2,1fr);
  }

  .items-grid{
    grid-template-columns:1fr;
  }

  .filter-panel{
    grid-template-columns:1fr;
  }

  .item-card img{
    height:220px;
  }

}

/* =========================
   HEADER IMMOBILIER
========================= */

.topbar{

  position:sticky;
  top:0;
  z-index:999;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:15px 25px;

  background:
  rgba(5,5,5,.92);

  backdrop-filter:blur(15px);

  border-bottom:
  1px solid var(--border);

  box-shadow:
  0 10px 30px rgba(0,0,0,.25);

}

.logo-zone{

  display:flex;
  align-items:center;
  gap:15px;

}

.logo{

  width:65px;
  height:65px;

  object-fit:contain;

  border-radius:50%;

  background:
  rgba(255,255,255,.04);

  padding:6px;

  border:
  1px solid var(--border);

}

.logo-zone h1{

  margin:0;

  font-size:28px;

  font-weight:900;

  color:var(--gold2);

  line-height:1;

}

.logo-zone p{

  margin-top:6px;

  color:var(--muted);

  font-size:14px;

  font-weight:600;

}

.back-btn{

  padding:13px 22px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    var(--gold),
    var(--gold2)
  );

  color:#111;

  font-weight:900;

  transition:.25s;

  box-shadow:
  0 10px 25px
  rgba(200,155,60,.25);

}

.back-btn:hover{

  transform:
  translateY(-3px);

}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  .topbar{

    padding:12px 15px;

  }

  .logo{

    width:52px;
    height:52px;
  }

  .logo-zone h1{

    font-size:21px;

  }

  .logo-zone p{

    font-size:12px;

  }

  .back-btn{

    padding:10px 16px;

    font-size:13px;

  }

}