/* =========================
RESET GLOBAL
========================= */

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

body{
font-family:'Poppins',sans-serif;
background:#181818;
color:#f5f5f5;
line-height:1.6;
}


/* =========================
CONTAINER
========================= */

.container{
width:90%;
max-width:1200px;
margin:auto;
}


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

.header{
background:#0f0f0f;
border-bottom:1px solid #222;
position:sticky;
top:0;
z-index:100;
height:90px;
display:flex;
align-items:center;
}

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


/* =========================
LOGO
========================= */

.logo{
height:110px;
object-fit:contain;
}


/* =========================
NAVIGATION
========================= */

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

.nav a{
text-decoration:none;
color:white;
font-size:18px;
font-weight:600;
letter-spacing:0.5px;
position:relative;
transition:0.3s;
}

/* ligne animation */

.nav a::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0%;
height:2px;
background:#25D366;
transition:0.3s;
}

.nav a:hover::after{
width:100%;
}


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

.hero{
height:55vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;

background-image:url("https://images.unsplash.com/photo-1502602898657-3e91760cbb34");
background-size:cover;
background-position:center;
}

.hero-content{
background:rgba(0,0,0,0.65);
padding:50px;
border-radius:12px;
max-width:600px;
}

.hero h1{
font-size:48px;
margin-bottom:15px;
}

.hero p{
opacity:0.9;
}


/* =========================
BOUTON PRINCIPAL
========================= */

.btn-primary{
display:inline-block;
margin-top:20px;
padding:14px 28px;
background:#25D366;
color:white;
text-decoration:none;
border-radius:30px;
font-weight:600;
transition:0.3s;
}

.btn-primary:hover{
background:#1ebe5b;
transform:scale(1.06);
}


/* =========================
SECTION AVANTAGES
========================= */

.advantages{
padding:90px 0;
text-align:center;
}

.advantages h2{
font-size:36px;
margin-bottom:20px;
}

.advantages-grid{
margin-top:50px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:35px;
}

.adv{
background:#202020;
padding:35px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.4);
transition:0.3s;
}

.adv:hover{
transform:translateY(-8px);
background:#252525;
}

.adv h3{
margin-bottom:10px;
}


/* =========================
SECTION VOITURES
========================= */

.cars-section{
padding:90px 0;
text-align:center;
}

.cars-section h2{
font-size:36px;
}

.cars{
margin-top:50px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:35px;
}


/* carte voiture */

.car{
background:#202020;
border-radius:14px;
overflow:hidden;
box-shadow:0 12px 30px rgba(0,0,0,0.5);
transition:0.35s;
}

.car:hover{
transform:translateY(-10px);
}

.car img{
width:100%;
height:220px;
object-fit:cover;
}

.car-info{
padding:25px;
}

.car-info h3{
margin-bottom:10px;
}

.price{
color:#25D366;
font-size:20px;
font-weight:600;
margin-bottom:10px;
}

/* =========================
BADGE VEHICULE POPULAIRE
========================= */

.car{
position:relative;
}

.badge{

position:absolute;
top:15px;
left:15px;

background:#25D366;
color:white;

font-size:13px;
font-weight:600;

padding:6px 12px;
border-radius:20px;

z-index:10;

box-shadow:0 4px 10px rgba(0,0,0,0.3);

}


/* =========================
SECTION PARIS
========================= */

.paris{
padding:120px 20px;
text-align:center;

background-image:url("https://images.unsplash.com/photo-1499856871958-5b9627545d1a");
background-size:cover;
background-position:center;
}

.paris-content{
background:rgba(0,0,0,0.65);
padding:45px;
border-radius:12px;
display:inline-block;
max-width:600px;
}


/* =========================
FOOTER
========================= */

footer{
background:#0f0f0f;
padding:50px 20px;
text-align:center;
}

footer p{
color:#aaa;
margin-bottom:25px;
}


/* =========================
SOCIALS
========================= */

.socials{
display:flex;
justify-content:center;
gap:25px;
}

.socials img{
width:36px;
filter:invert(1);
transition:0.3s;
}

.socials img:hover{
transform:scale(1.2);
}
.snapchat-icon {
  filter: none !important;
  background: radial-gradient(circle, #FFE234, #FFA700);
  border-radius: 50%;
  padding: 2px;
  width: 50px;
}

/* =========================
WHATSAPP FLOAT
========================= */

.whatsapp-float{
position:fixed;
bottom:30px;
right:30px;
width:65px;
transition:0.3s;
}

.whatsapp-float:hover{
transform:scale(1.1);
}


/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.hero{
height:60vh;
}

.hero h1{
font-size:32px;
}

.logo{
height:70px;
}

.nav{
gap:18px;
}

.nav a{
font-size:16px;
}

}