body{
    background-repeat: no-repeat; /* l'image ne se répète pas */
    margin: 0; /* enlève les marges */
    padding: 0;
    background-color: #8b8989; /* couleur de la page */
    background-position: center;
    padding-bottom: -150px;
}


a{
    text-decoration: none;
}

.main-content{
    padding: 40px 20px;
}

.cars-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.vehicle-card{
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0, 4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.card-header{
    position: relative; /* Permet de servir de "repère" pour éléments enfants*/
    background-color: #1a1a1a;
    padding: 20px 24px;
}

.header-top{
    margin-bottom: 15px;
}

.card-title{
    color: white;
    font-size: 24px;
    font-weight: 700;
}

.card-subtitle{
    color: white;
    font-size: 13px;
    margin: 4px 0 16px 0;
}

.image-section{
    display: flex;
    background: linear-gradient(180deg, #1a1a1a 0%, #53575c 50%, #1a1a1a 100%);
    padding: 40px 20px;
    margin-left: -100px;
    margin-right: -100px;
    justify-content: center;
    align-items: center;
    max-height: 20rem;
}


.vehicle-image {
    height: 300px; /* Hauteur fixe pour toutes les images */
    width: auto;   /* La largeur s'ajuste automatiquement en fonction de la hauteur */
    object-fit: contain; /* Maintenir les proportions sans déformation */
}

.vehicle-specs{
    display: flex;
    gap: 20px;
}

.card-footer{
    padding: 10px;
}
/* ///////////////////////////////////////////////////////////// */

.vehicle-specs{
    padding: 8px 8px 8px;
}


.rental-price{
    font-family: "afacad";
    color: white;
}



/* ///////////////////////////////////////////////////////////// */

.modal-title{
    color: white;
    font-family: "Afacad", sans-serif;
}


.modal-xcross{
    cursor: pointer;
    color: white;
    transform: translateX(53em);
}



.modal-content-custom{
    display: grid;
    background-color: #1a1a1a;
    border-radius: 20px;
    padding: 20px 24px;
}



.image-container{
    background: linear-gradient(180deg, #1a1a1a 0%, #53575c 50%, #1a1a1a 100%);
    border-radius: 20px;
}

.modal-car-price{
    font-family: "Afacad", sans-serif;
    font-weight: 700;
    color: darkgoldenrod;
    font-size: 32px;
}

.modal-car-specs{
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 5px 0;
    gap: 10px;
}


.modal-car-specs i{
    position: relative;
    top: 18px;
    padding: 5px;
    color: goldenrod;
}



.modal-car-detail-text{
    font-family: "Afacad", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: gray;
    margin: 0;
}

.modal-car-detail-value{
    font-family: "Afacad", sans-serif;
    font-weight: 500;
    color: whitesmoke;
    
}

/* ///////////// BOUTON RESERVER ///////////////////*/

.modal-car-rental-button{
    display: flex;
    background-color: rgba(218, 165, 32, 0.8);
    color: white;
    margin: 4px;
    padding: 20px 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-family: "Afacad", sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.modal-car-rental-button-text{
    margin: auto;
}

.modal-car-rental-button:hover{
    cursor: pointer;
    transform: translateY(2px);
}
/* ///////////////////////////////////////////////////////////// */


/* ///////////// BOUTON NOUS CONTACTER ///////////////////*/

.modal-car-contact-button{
    display: flex;
    background-color: rgba(141, 140, 139, 0.8);
    color: white;
    margin: 3px;
    padding: 20px 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-family: "Afacad", sans-serif;
    font-weight: 700;
    font-size: 18px;
    transform: translateY(1px);
}

.modal-car-contact-button-text{
    margin: auto;
}

.modal-car-contact-button:hover{
    cursor: pointer;
    transform: translateY(3px);
}

/* ///////////////////////////////////////////////////////////// */


/* ///////// DIFFERENTS BADGES (CARBU) ///////// */


.badge-diesel{
    position: absolute;
    background-color: #c04e02;
    color: white;
    border-radius: 20px;
    padding: 6px 10px;
    top: 18px;
    right: 10px;
    font-family: "afacad";
    
}

.badge-essence{
    position: absolute;
    background-color: #219404;
    color: white;
    border-radius: 20px;
    padding: 6px 10px;
    top: 18px;
    right: 10px;
    font-family: "afacad";
    
}

.badge-electrique{
    position: absolute;
    background-color: #033aaf;
    color: white;
    border-radius: 20px;
    padding: 6px 10px;
    top: 18px;
    right: 10px;
    font-family: "afacad";
    
}

.badge-hybride{
    position: absolute;
    background-color: #6502b6;
    color: white;
    border-radius: 20px;
    padding: 6px 10px;
    top: 18px;
    right: 10px;
    font-family: "afacad";
    
}


/* ///////// DIFFERENTS BADGES (AUTRES) ///////// */

.car-seat{
    color: white;
    margin-left: -10px;
} 

.car-doors{
    color: white;
}

.car-boite-vitesse{
    color: white;
}

.view-eye{
    color: white;
    position: absolute;
    background-color: goldenrod;
    padding: 6px 10px 6px ;
    right: 35px;
    bottom: 35px;
    border-radius: 20px;
}

.view-eye:hover{
    opacity: 0.8;
    cursor: pointer
}




/* ///////// FOOTER ///////// */

.footer-aurus {
    background-color: #ddd7d6;
    padding: 45px 0 20px;
    margin-top: 100px;
    
}

/* Mini texte en bas */
.footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #a6a6a4;
    font-family: "Afacad", sans-serif;
    color: black;
}