/* =========================
   HERO AUTOMOBILE
========================= */

.car-hero{
  background:
  linear-gradient(
    135deg,
    rgba(200,155,60,.12),
    rgba(200,155,60,.03)
  );

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

  border-radius:34px;

  padding:35px;

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

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

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

/* =========================
   CATEGORIES
========================= */

.car-category-grid{

  max-width:1300px;

  margin:25px auto;

  padding:0 25px;

  display:grid;

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

  gap:18px;

}

.car-category-grid button{

  background:var(--card);

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

  border-radius:28px;

  min-height:165px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:14px;

  cursor:pointer;

  color:var(--text);

  transition:.25s;

}

.car-category-grid button:hover{

  transform:translateY(-5px);

}

.car-category-grid button.active{

  background:
  linear-gradient(
    135deg,
    rgba(200,155,60,.18),
    rgba(200,155,60,.05)
  );

}

.car-category-grid img{

  width:68px;
  height:68px;

  object-fit:contain;

}

.car-category-grid span{

  font-weight:900;

  text-align:center;

}

/* =========================
   FILTRES
========================= */

.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;

}

/* =========================
   TITRE SECTION
========================= */

.section-title{

  max-width:1300px;

  margin:25px auto;

  padding:0 25px;

}

.section-title h2{

  margin-bottom:8px;

}

.section-title p{

  color:var(--muted);

}

/* =========================
   GRID VOITURES
========================= */

.items-grid{

  max-width:1300px;

  margin:0 auto 60px;

  padding:0 25px;

  display:grid;

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

  gap:24px;

}

/* =========================
   CARTE
========================= */

.item-card{

  background:var(--card);

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

  border-radius:30px;

  overflow:hidden;

  box-shadow:var(--shadow);

  transition:.25s;

}

.item-card:hover{

  transform:translateY(-6px);

}

.item-card img{

  width:100%;

  height:240px;

  object-fit:cover;

  background:var(--card2);

}

.item-body{

  padding:20px;

}

.item-body h3{

  font-size:24px;

  margin-bottom:12px;

}

.item-meta{

  color:var(--muted);

  line-height:1.8;

}

/* =========================
   PRIX
========================= */

.price{

  margin-top:15px;

  font-size:30px;

  font-weight:900;

  color:var(--gold2);

}

/* =========================
   BADGES
========================= */

.status{

  display:inline-flex;

  padding:8px 14px;

  border-radius:999px;

  font-size:12px;

  font-weight:800;

}

.status.disponible{

  background:#ccfbf1;

  color:#0f766e;

}

.status.indisponible{

  background:#e5e7eb;

  color:#374151;

}

.status.reserve{

  background:#fef3c7;

  color:#92400e;

}

.status.vendu{

  background:#fee2e2;

  color:#991b1b;

}

.chauffeur-badge{

  display:inline-flex;

  margin-left:8px;

  padding:8px 14px;

  border-radius:999px;

  background:#dbeafe;

  color:#1e40af;

  font-size:12px;

  font-weight:800;

}

/* =========================
   ACTIONS
========================= */

.item-actions{

  display:grid;

  gap:10px;

  margin-top:18px;

}

.item-actions a{

  padding:14px;

  text-align:center;

  border-radius:16px;

  font-weight:900;

  transition:.25s;

}

.item-actions a:hover{

  transform:translateY(-2px);

}

.whatsapp-btn{

  background:#22c55e;

  color:white;

}

.reservation-btn{

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

  color:#111;

}

.detail-btn{

  background:var(--card2);

}

/* =========================
   VIDE
========================= */

.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);

  }

  .car-category-grid{

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

  }

  .filter-panel{

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

  }

}

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

@media(max-width:700px){

  .page-hero,
  .car-category-grid,
  .filter-panel,
  .items-grid,
  .section-title{

    padding-left:18px;
    padding-right:18px;

  }

  .car-hero{

    padding:25px;

  }

  .car-hero h2{

    font-size:32px;

  }

  .items-grid{

    grid-template-columns:1fr;

  }

  .car-category-grid{

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

  }

  .filter-panel{

    grid-template-columns:1fr;

  }

  .item-card img{

    height:220px;

  }

}


/*CSS pour tout ce qui touche le logo et le texte Accuil*/

/* =========================
   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;

  }

}