* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background: #050505;
  color: white;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

img {
  width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: min(1400px, 92%);
  margin: auto;
}

.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  backdrop-filter: blur(20px);
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
}

.logo h1 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .35em;
}

.logo span {
  color: #666;
  font-size: 10px;
  letter-spacing: .4em;
}

nav {
  display: flex;
  gap: 35px;
}

nav a {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .2em;
  color: #aaa;
}

nav a:hover {
  color: white;
}

.hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: end;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, black, rgba(0,0,0,.45));
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 100px;
}

.hero-content p,
.section-label {
  color: #888;
  letter-spacing: .4em;
  font-size: 12px;
  margin-bottom: 20px;
}

.hero-content h1 {
  font-size: clamp(60px, 10vw, 140px);
  line-height: .9;
  font-weight: 500;
  margin-bottom: 20px;
}

.hero-content span {
  display: block;
  max-width: 700px;
  color: #ccc;
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

.btn {
  padding: 18px 35px;
  border-radius: 999px;
  font-weight: 700;
  transition: .3s;
}

.btn.white {
  background: white;
  color: black;
}

.btn.white:hover {
  transform: scale(1.05);
}

.btn.transparent {
  border: 1px solid rgba(255,255,255,.15);
}

.btn.transparent:hover {
  background: white;
  color: black;
}

.stats {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

.stats-grid div {
  padding: 60px 20px;
  text-align: center;
}

.stats-grid h2 {
  font-size: 42px;
  margin-bottom: 10px;
}

.stats-grid p {
  color: #777;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
}

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  padding: 140px 0;
}

.about h2,
.services-preview h2,
.vehicles h2 {
  font-size: clamp(45px,5vw,75px);
  line-height: 1.1;
  margin-bottom: 30px;
  font-weight: 900;
}

.about span {
  color: #aaa;
  line-height: 2;
  font-size: 18px;
}

.about img {
  border-radius: 40px;
  height: 700px;
  object-fit: cover;
}

.services-preview {
  background: #090909;
  padding: 140px 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 30px;
  margin-top: 60px;
}

.card {
  padding: 50px;
  border-radius: 35px;
  border: 1px solid rgba(255,255,255,.08);
  transition: .4s;
}

.card:hover {
  background: rgb(206, 206, 206);
  color: black;
}

.card h3 {
  font-size: 40px;
  margin-bottom: 20px;
}

.card p {
  color: #999;
  line-height: 1.8;
}

.card:hover p {
  color: #444;
}

.vehicles {
  padding: 140px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 70px;
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
}

.vehicle-card {
  background: #0c0c0c;
  border-radius: 35px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.vehicle-card img {
  height: 300px;
  object-fit: cover;
  transition: .6s;
}

.vehicle-card:hover img {
  transform: scale(1.08);
}

.vehicle-info {
  padding: 35px;
}

.vehicle-info h3 {
  font-size: 32px;
  margin-bottom: 12px;
 text-align: center;
}

.vehicle-info p {
  color: #888;
  text-align: center;
}

footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 40px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-content h3 {
  margin-bottom: 8px;
}

.footer-content p,
.footer-content span {
  color: #666;
}

@media(max-width:1100px){
  .about,
  .services-grid,
  .vehicle-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  nav {
    display: none;
  }

  .section-head,
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
}

.logo img{

width:180px;

height:auto;

display:block;

transition:.3s;

}

.logo img:hover{

transform:scale(1.03);

}

/* DEPOT VENTE */

.demande-btn{

margin-top:40px;

padding:18px 40px;

background:white;

color:black;

border:none;

border-radius:999px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.demande-btn:hover{

transform:scale(1.05);

}


/* POPUP */

.popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.88);

backdrop-filter:blur(12px);

justify-content:center;

align-items:center;

padding:30px;

z-index:99999;

}


.popup-content{

background:#0b0b0b;

border:1px solid rgba(255,255,255,.08);

border-radius:35px;

padding:50px;

width:min(700px,95%);

max-height:90vh;

overflow-y:auto;

position:relative;

box-shadow:

0 0 80px rgba(255,255,255,.03);

}


.popup-content h2{

font-size:42px;

margin-bottom:35px;

font-weight:900;

}


.close{

position:absolute;

top:25px;

right:30px;

font-size:34px;

cursor:pointer;

color:#888;

transition:.3s;

}

.close:hover{

color:white;

transform:scale(1.15);

}


/* FORMULAIRE */

.form{

display:flex;

flex-direction:column;

gap:18px;

}


.form input,
.form select,
.form textarea{

background:#141414;

border:1px solid rgba(255,255,255,.05);

padding:18px 22px;

border-radius:16px;

color:white;

font-size:15px;

outline:none;

transition:.25s;

}


.form textarea{

height:140px;

resize:none;

}


.form input:focus,
.form select:focus,
.form textarea:focus{

border-color:rgba(255,255,255,.25);

background:#1a1a1a;

}


.form select{

cursor:pointer;

}


.form button{

margin-top:10px;

padding:18px;

background:white;

color:black;

font-weight:800;

border:none;

border-radius:999px;

cursor:pointer;

transition:.3s;

}


.form button:hover{

transform:scale(1.03);

}


/* RESPONSIVE */

@media(max-width:900px){

.popup-content{

padding:35px;

}

.popup-content h2{

font-size:32px;

}

}

.vehicle-page{

padding-top:180px;

display:grid;

grid-template-columns:1.2fr 1fr;

gap:70px;

align-items:start;

}


.vehicle-gallery img{

border-radius:35px;

}


.vehicle-details h1{

font-size:60px;

margin:20px 0;

}


.vehicle-details h2{

font-size:40px;

margin-bottom:40px;

}


.specs{

display:grid;

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

gap:25px;

margin-bottom:40px;

}


.specs div{

padding:25px;

background:#0d0d0d;

border-radius:20px;

}


.description{

color:#aaa;

line-height:2;

margin-bottom:50px;

}


@media(max-width:1800px){

.vehicle-page{

grid-template-columns:1fr;

}

}

.vehicle-gallery{

position:relative;

overflow:hidden;

border-radius:35px;

}


.slider-container{

overflow:hidden;

border-radius:35px;

}


.slider{

display:flex;

transition:.55s ease;

}


.slider img{

width:100%;

height:550px;

object-fit:cover;

flex-shrink:0;

display:block;

}


.slider-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:60px;

height:60px;

border:none;

border-radius:50%;

background:rgba(0,0,0,.45);

backdrop-filter:blur(10px);

color:white;

font-size:28px;

cursor:pointer;

z-index:10;

transition:.25s;

}


.slider-btn:hover{

background:white;

color:black;

}


.left{

left:20px;

}


.right{

right:20px;

}


@media(max-width:1100px){

.slider img{

height:420px;

}

}