/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{

background:linear-gradient(
180deg,
#f7f8fc 0%,
#eef1f7 100%
);

color:#1c1c1c;

min-height:100vh;

overflow-x:hidden;

}


/* GRAND FOND ARRONDI */

.background-shape{

position:absolute;

top:380px;

left:0;

width:100%;

height:700px;

background:white;

border-top-left-radius:60px;
border-top-right-radius:60px;

z-index:-1;

box-shadow:
0 -30px 80px rgba(0,0,0,0.05);

}



/* NAVBAR */

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 60px;

background:rgba(255,255,255,0.75);

backdrop-filter:blur(12px);

box-shadow:0 8px 30px rgba(0,0,0,0.05);

}

.logo{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

font-size:18px;

color:#333;

}

.logo i{

color:#FFC533;

font-size:22px;

}

.menu{

display:flex;

gap:40px;

}

.menu a{

text-decoration:none;

color:#6b6b6b;

font-weight:500;

position:relative;

cursor:pointer;

}

.menu a.active{

color:#111;

}

.menu a.active::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:100%;

height:3px;

background:#FFC533;

border-radius:4px;

}



.nav-right{

display:flex;

align-items:center;

gap:18px;

}

.icon{

font-size:18px;

color:#545454;

padding:8px;

border-radius:50%;

cursor:pointer;

transition:0.2s;

}

.icon:hover{

background:#f1f3f7;

color:#000;

}



.btn-publish{

background:#FFC533;

border:none;

padding:12px 20px;

border-radius:12px;

font-weight:600;

cursor:pointer;

transition:0.2s;

}

.btn-publish:hover{

background:#ffb700;

transform:translateY(-1px);

}



/* HERO */

.hero{

height:350px;

background:url("https://i.pinimg.com/originals/3c/05/71/3c05716d80249529424e1a05b9f414c1.jpg") center/cover;

display:flex;

align-items:center;

justify-content:center;

position:relative;

}

.overlay{

position:absolute;

width:100%;
height:100%;

background:rgba(255, 255, 255, 0.132);
backdrop-filter:blur(3px);

}

.hero-content{

text-align:center;

position:relative;

}

.hero h1{

font-size:40px;

font-weight:800PX;

margin-bottom:10px;

}

.hero p{

color: #ffffff;

margin-bottom:25px;

}



/* BARRE RECHERCHE */

.search-bar{

display:flex;

align-items:center;

gap:10px;

background:rgba(255,255,255,0.65);

 backdrop-filter:blur(10px); 

padding:12px;

border-radius:18px;

box-shadow:
0 20px 40px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);

}

.search-bar input,
.search-bar select{

border:none;

padding:12px;

border-radius:10px;

background:transparent;

font-size:14px;

outline:none;

}



.filter-btn{

border:none;

background:#f3f4f8;

padding:10px 14px;

border-radius:10px;

cursor:pointer;

font-weight:500;

display:flex;

gap:6px;

align-items:center;

}



.search-btn{

background:#FFC533;

border:none;

padding:12px 20px;

border-radius:12px;

font-weight:600;

display:flex;

align-items:center;

gap:8px;

cursor:pointer;

transition:0.2s;

}

.search-btn:hover{

background:#ffb700;

transform:translateY(-1px);

}



/* CATEGORIES */

.categories{

display:flex;

justify-content:space-between;

align-items:center;

width:75%;

margin:auto;

margin-top:-50px;

padding:18px;

background:rgba(255,255,255,0.7);

backdrop-filter:blur(10px);

border-radius:20px;

box-shadow:
0 30px 50px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.6);

}

.category{

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

color:#6b6b6b;

font-size:14px;

cursor:pointer;

padding:12px 18px;

border-radius:12px;

transition:0.25s;

}

.category i{

font-size:20px;

}

.category:hover{

background:#f3f5f8;

}

.category.active{

background:white;

color:#f5a623;

box-shadow:0 10px 20px rgba(0,0,0,0.08);

}



/* SECTIONS */

.section{

padding:60px 80px;
border-top: 3;

}

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.section h2{

font-size:22px;

font-weight:600;

}



/* CARTES */

.cards{

display:grid;

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

gap:25px;

}

.card{

background:white;

border-radius:18px;

overflow:hidden;

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

transition:0.25s;

cursor:pointer;

}

.card:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,0.12);

}

.card img{

width:100%;

height:180px;

object-fit:cover;

}

.card-content{

padding:16px;

}

.card-content h3{

font-size:16px;

font-weight:600;

margin-bottom:4px;

}

.location{

color:#8a8a8a;

font-size:13px;

margin-bottom:6px;

}

.price{

font-weight:600;

font-size:15px;

margin-top:6px;

}



/* FOOTER */

footer{

display:flex;

justify-content:space-between;

align-items:center;

padding:40px 80px;

margin-top:40px;

background:rgba(255,255,255,0.8);

backdrop-filter:blur(10px);

}

.footer-left{

display:flex;

gap:22px;

font-size:14px;

color:#6b6b6b;

}

.footer-left a{

cursor:pointer;

}

.footer-right img{

height:40px;

margin-left:10px;

}