/* Styles généraux */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    text-align: center; /* Centre tout le texte de la page */
}

/* En-tête avec le logo */
header {
    background-color: #222;
    padding: 15px;
    text-align: center;
}

header img {
    width: 120px;
    display: block;
    margin: 0 auto 10px;
}

/* Navigation */
nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background 0.3s;
}

nav ul li a:hover {
    background-color: #555;
}

/* Contenu principal */
main {
    width: 80%;
    margin: 30px auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Formulaire de réservation */
form {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

label {
    font-weight: bold;
    display: block;
    margin: 10px 0 5px;
}

input, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Boutons en rouge avec texte blanc */
button, .link-button {
    background-color: #e63946; /* Rouge */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    text-decoration: none; /* Enlever la décoration de lien */
    display: inline-block;
    margin-top: 10px;
}

button:hover, .link-button:hover {
    background-color: #d62828; /* Rouge foncé au survol */
}

/* Liens du pied de page en rouge avec fond blanc au clic */
footer .footer-links a {
    color: #e63946; /* Rouge */
    text-decoration: none;
    font-size: 14px;
    padding: 5px 10px;
    display: inline-block;
    transition: background 0.3s, color 0.3s;
}

footer .footer-links a:hover {
    background-color: #e63946; /* Rouge au survol */
    color: white; /* Texte blanc au survol */
}

footer .footer-links a:active {
    background-color: white; /* Fond blanc au clic */
    color: #e63946; /* Texte rouge au clic */
}

/* Adresse email en rouge avec fond blanc au clic */
footer .footer-email a {
    color: #e63946; /* Rouge */
    text-decoration: none;
    font-size: 14px;
    padding: 5px 10px;
    display: inline-block;
    transition: background 0.3s, color 0.3s;
}

footer .footer-email a:hover {
    background-color: #e63946; /* Rouge au survol */
    color: white; /* Texte blanc au survol */
}

footer .footer-email a:active {
    background-color: white; /* Fond blanc au clic */
    color: #e63946; /* Texte rouge au clic */
}

/* Pied de page */
footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 20px;
    font-size: 14px;
}

/* Formulaire de Contact */
.contact-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.contact-form h2 {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin: 10px 0 5px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-form button {
    background-color: #e63946;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #d62828;
}

/* Informations de Contact */
.contact-info {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.contact-info p {
    margin-bottom: 10px;
}

/* Réseaux Sociaux */
.social-media {
    text-align: center;
    margin-top: 30px; /* Ajout d'un espacement */
}

.social-media a {
    display: inline-block;
    margin: 10px; /* Espacement entre les logos */
}

.social-icon {
    width: 30px; /* Taille ajustée des icônes */
    transition: transform 0.3s ease-in-out;
}

.social-icon:hover {
    transform: scale(1.2); /* Agrandissement des icônes au survol */
}

/* Formulaire d'inscription et de connexion */
.register-form, .login-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 30px auto;
}

.register-form input, .login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.register-form button, .login-form button {
    background-color: #e63946;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}

.register-form button:hover, .login-form button:hover {
    background-color: #d62828; /* Rouge foncé au survol */
}

/* Lien vers l'inscription et la connexion */
a {
    color: #e63946;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Boutons sur la page Espace Client */
.account-actions button {
    background-color: #e63946; /* Rouge */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin: 10px;
    transition: background 0.3s;
    width: 200px; /* Ajuster la largeur des boutons */
}

.account-actions button:hover {
    background-color: #d62828; /* Rouge foncé au survol */
}




/* Styles généraux */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    padding: 10px;
    text-align: center;
}

header img {
    width: 150px;
}

/* Navigation */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 5px;
    background-color: #222;
}

nav ul li a:hover {
    background-color: #555;
}

/* Styles pour les véhicules */
.car-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.car {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 300px;
    width: 100%;
}

.slider-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.slider img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Boutons pour les sliders */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

/* Vidéo */
.video-container {
    margin-top: 20px;
    text-align: center;
}

.video-container video {
    width: 100%;
    max-width: 600px;
    border-radius: 5px;
}

/* Footer */
footer {
    text-align: center;
    padding: 15px;
    background-color: #222;
    color: white;
    margin-top: 20px;
}

/* Media Query pour les petits écrans (téléphones) */
@media (max-width: 768px) {
    /* Navigation pour mobile */
    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 10px 0;
    }

    /* Ajuster la taille des images et des vidéos sur mobile */
    .slider img, .video-container video {
        width: 100%;
    }

    .car {
        max-width: 90%;
        margin: 10px;
    }

    .car-list {
        flex-direction: column;
        align-items: center;
    }
}

/* Media Query pour les très petits écrans (téléphones portrait) */
@media (max-width: 480px) {
    /* Réduire la taille des polices pour mobile */
    h1 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1rem;
    }

    nav ul li a {
        font-size: 16px;
        padding: 6px 10px;
    }
}


/* Conteneur des véhicules */
.car-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Augmenter l'espacement entre les véhicules */
    margin-top: 20px; /* Ajouter un espace entre l'en-tête et les véhicules */
}

/* Style des véhicules */
.car {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 300px;
    margin-bottom: 20px; /* Ajouter un espacement entre les véhicules */
    width: 100%;
}

/* Media Query pour les petits écrans (téléphones) */
@media (max-width: 768px) {
    .car-list {
        gap: 20px; /* Espacement réduit pour les petits écrans */
    }

    .car {
        max-width: 90%; /* Réduire la largeur du véhicule pour mieux s'adapter à l'écran */
        margin: 15px 0; /* Ajouter un peu d'espace entre les véhicules */
    }
}

/* Media Query pour les très petits écrans (téléphones portrait) */
@media (max-width: 480px) {
    .car-list {
        gap: 15px; /* Espacement réduit encore pour les très petits écrans */
    }

    .car {
        margin: 10px 0; /* Espacement encore plus réduit entre les véhicules */
    }
}
/* Style pour la barre de navigation */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;  /* Augmenter l'espacement entre les onglets */
    margin: 0; /* S'assurer qu'il n'y a pas de marge par défaut autour de la liste */
}

/* Style pour chaque élément de menu */
nav ul li {
    margin: 0; /* Aucune marge autour des éléments de menu */
}

/* Style pour les liens des onglets */
nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 15px;  /* Ajouter du padding autour du texte pour plus d'espace */
    border-radius: 5px;
    background-color: #222;
    transition: background-color 0.3s ease;
}

/* Style au survol des onglets */
nav ul li a:hover {
    background-color: #555;
}

/* Media Query pour les petits écrans (téléphones) */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Met les onglets en colonne sur les petits écrans */
        align-items: center; /* Centre les éléments de la navigation */
        gap: 15px;  /* Réduit l'espacement entre les onglets */
    }

    nav ul li a {
        font-size: 16px; /* Réduit la taille de la police sur les petits écrans */
        padding: 12px 18px;  /* Un peu plus de padding pour mieux espacer les onglets */
    }
}

/* Media Query pour les très petits écrans (téléphones portrait) */
@media (max-width: 480px) {
    nav ul li a {
        font-size: 14px; /* Réduit encore la taille de la police */
        padding: 10px 15px;  /* Ajuste le padding pour les très petits écrans */
    }
}



/* Espacement général pour les titres de la page */
h1, h2 {
    margin-top: 30px;  /* Augmenter l'espace au-dessus des titres */
    margin-bottom: 20px;  /* Ajouter un espace sous les titres */
}

/* Espacement spécifique pour les titres dans la liste des véhicules */
.car-list h2 {
    margin-top: 30px;   /* Espacement au-dessus des titres des véhicules */
    margin-bottom: 15px; /* Espacement sous les titres des véhicules */
}

/* Espacement spécifique pour les titres des onglets (p. ex. "Véhicules vendus") */
.car h2 {
    margin-top: 30px;  /* Espacement supérieur pour les titres des véhicules */
    margin-bottom: 20px;  /* Espacement sous le titre */
}

/* Ajout d'un espacement supplémentaire entre les éléments */
.car-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;  /* Espacement entre les véhicules */
}

/* Media Query pour les petits écrans (tablettes et téléphones) */
@media (max-width: 768px) {
    h1, h2 {
        font-size: 1.4rem;  /* Ajuster la taille des titres sur mobile */
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .car-list h2 {
        font-size: 1.2rem;
        margin-top: 25px;
        margin-bottom: 15px;
    }

    .car {
        max-width: 90%;  /* Réduire la taille des véhicules sur mobile */
    }

    nav ul {
        flex-direction: column; /* Les onglets deviennent verticaux sur mobile */
        gap: 15px;  /* Ajouter de l'espace entre les onglets */
    }
}

.review-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #555;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
    color: white;
}

.rating {
    font-size: 26px;
    font-weight: bold;
    flex: 1;
    min-width: 150px;
}

.stars {
    font-size: 18px;
    color: hsl(50, 100%, 50%);
    font-family: "Arial", sans-serif;
    letter-spacing: 2px;
}

.stats {
    flex: 2;
    padding: 10px;
    text-align: left;
}

.stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.stats .bar {
    width: 75%;
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.stats .bar span {
    display: block;
    height: 100%;
    background: red;
    border-radius: 5px;
}

.images {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.images img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.images img:hover {
    transform: scale(1.1);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .review-summary {
        flex-direction: column;
        width: 95%;
    }

    .rating, .stats {
        text-align: center;
        width: 100%;
    }

    .stats .bar {
        width: 100%;
    }

    .images img {
        width: 60px;
        height: 60px;
    }
}