*{
    box-sizing: border-box;
    margin: 0;
}
:root {
    --bg:        #0d0f14;
    --bg2:       #13161d;
    --surface:   #181c25;
    --surface2:  #1e2330;
    --border:    #272d3d;
    --text:      #dce3f0;
    --text-dim:  #6b748a;
    --text-mid:  #9aa3b8;
    --accent:    #5b8dee;
    --green:     #3ecf74;
    --orange:    #f5a623;
    --red:       #f06060;
    --purple:    #a78bfa;
    --teal:      #2dd4bf;
    --pink:      #f472b6;
    --code-bg:   #0a0c12;
    --code-border: #1f2535;
  }
.section-hero{
    min-height: 100vh;
    background-image: linear-gradient(
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.4)
    ), url("image/image_3.png");

    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    width: 100%;
    height: 700px;
}
.navbar{
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0)
    );
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;

}
.navbar-link{
    display: flex;
    justify-content: space-between;
    align-items:center;
    list-style: none;
    gap: 3rem;
}
.icone{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.navbar-logo{
    font-size: 20px;
    font-weight: bold;
}
.xl{
    color: var(--text);
}
.auto{
    color: var(--orange)
}
ul li a{
    text-decoration: none;
    color: var(--text);
    font-size: 18px;
    font-weight: bold;
}
.navbar-link a:hover{
    color: var(--orange);
}
.navbar-link a:active{
    color: var(--orange);
    text-decoration: var(--orange);
}
a{
    text-decoration: none;
}
.bouton{
    border: 1px solid var(--text);
    background-color: var(--text);
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    gap: 0.4rem;
    color: var(--text-dim);
}
.hero{
    color: var(--text);
    padding: 100px 80px 40px;
}
.hero h1{
    font-size: 70px;
    font-weight: bold;
    line-height: 1.1;
}
.hero p{
    margin-top:20px;
    font-size: 18px;
    color: var(--text-mid)
}
.choix{
    color: var(--orange);
}
.achete-louer{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    gap: 2rem;
    margin-top: 40px;
}
.cle{
    border: 1px solid var(--orange);
    background-color: var(--orange);
    border-radius: 10px;
    padding: 0.5rem;
    font-size: 18px;
    font-weight: bold;
    color: var(--text);
    cursor: pointer;
}
.cle:hover{
    filter: brightness(1.08);
}
.achat{
    border: 1px solid var(--text);
    background-color: var(--text);
    color: var(--text-dim);
    font-size: 18px;
    font-weight: bold;
    padding: 0.5rem;
    border-radius: 10px;
    cursor: pointer;
}
.achat:hover{
    filter: brightness(1.08);
}
.recherche{
    border:1px solid white;
    background-color:white;
    border-radius: 10px;
    margin-top: 0;
    margin-left: 80px;
    margin-right: 80px;
    padding: 20px;
    margin-bottom: 40px ;
}
.container{
    margin-top: 120px;
}
.location{
    display: flex;
    justify-content: flex-start;
    margin-left: 2rem;
    gap: 40px;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--text);
    padding-bottom: 0.8rem;
    font-size: 16px;
}
.long{
    color: var(--text-dim);
}
.horaire{
    display: flex;
    margin-left: 2rem;
    justify-content: space-between;
}
.lieu, .date, .heure{
    display: flex;
    flex-direction: column;
}
.btn{
    display: flex;
    align-items: center;
    margin-top: 0.9rem;
    border-left: 1px solid var(--text);
}

label{
    margin-bottom: 0.8rem;
    font-size: 16px;
}
#lieu{
 border: 1px solid transparent;
 border-radius: 8px;
 padding: 1rem;
 text-align: left;
 width: 300px;
 padding-left: 0.2rem;
}
.cladrien{
 border: 1px solid var(--text);
 border-radius: 8px;
 text-align: left;
 display: flex;
 justify-content: end;
 align-items: center;
}
#heure{
 border: 1px solid transparent;
 border-radius: 8px;
 padding: 1rem;
 text-align: left;
 padding-left: 0.2rem;
}
.buton{
    border: 1px solid var(--orange);
    background-color: var(--orange);
    color: var(--text);
    border-radius: 8px;
    padding: 1rem 2rem;
    margin-left: 1rem;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.buton:hover{
    filter: brightness(1.05);
}
.buton:focus-visible{
    outline: 3px solid rgba(91, 141, 238, 0.8);
    outline-offset: 2px;
}

#date{
 border: 1px solid transparent;
 border-radius: 8px;
 padding: 1rem;
 text-align: left;
 padding-left: 0.2rem;
}
.info{
    border: 1px solid black;
    border-radius: 50%;  
    width: 60px; 
    height: 60px;
    background-color: #0a0c12;
    display: flex;
    justify-content: center;
    align-items: center;
}
.infos{
    display: flex;
    gap: 10px;
}
.service{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem;
    margin-left: 3rem;
    gap: 2rem;
    padding-bottom: 1rem;
}
.descrip p{
    color: var(--text-dim);
    line-height: 1.1;
}
.descrip h4{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.title{
    text-align: center;
}
.container{
    margin-top: 2rem;
}
.title h2{
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 30px;
}
.title p{
     color: var(--text-dim);
}
.titre{
    color: var(--orange);
}
/* Evite de rendre tout <p> en gras : impact global non désiré */
.hero p,
.descrip p,
.title p,
footer p{
    font-weight: bold;
}
.choix{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 4rem;
}
.tous{
    border: 1px solid var(--bg);
    background-color: var(--bg);
    border-radius: 10px;
    color: var(--text);
    padding: 0.3rem 1rem;
    cursor: pointer;
}
.tous:hover{
    filter: brightness(1.08);
}
.voiture{
    border: 1px solid transparent;
    background-color: var(--text);
    border-radius: 10px;
    padding: 0.3rem 1rem;
    cursor: pointer;
}
.voiture:hover{
    filter: brightness(0.98);
}
.card{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 2rem;
    flex-wrap: wrap;
    margin-left: 3rem;
    padding-left: 0px;
}
.article-card{
    border-radius: 8px;
}
/* Border-radius global peut casser des images spécifiques -> on garde un rendu proche */
img{
    border-radius: 5px;
}
footer{
    background: white;
    color: var(--text-dim);
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--text);
    margin-top: 1rem;
}
@media screen  and (max-width:1024px){
    .xl{
        color:var(--text-dim);
    }
    
}