nav ul li img.logo {
    width: 120px; /* Ajustez la largeur selon vos préférences */
    height: auto; /* Maintient les proportions de l'image */
    }
    /* Global Styles */
    body {
        font-family: 'Poppins', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-color: #f4f4f4;
    }
 
 /* Navbar */
 nav {
 position: fixed;
 top: 0;
 width: 100%;
 background-color: #ffffff;
 color: black;
 padding: 10px 0;
 z-index: 1000;
 }
 
 nav ul {
 list-style: none;
 display: flex;
 justify-content: space-between; /* Change de 'flex-end' à 'space-between' */
 margin: 0;
 padding: 0;
 }
 
 nav ul li {
 margin: 0 20px;
 }
 
 nav ul li a {
 color: black;
 text-decoration: none;
 font-size: 18px;
 transition: color 0.3s;
 }
 
 nav ul li a:hover {
 color: #ff4f5a; /* Highlight color on hover */
 }
 
 /* Pour centrer le logo à gauche */
 nav ul li:first-child {
 margin-left: 20px; /* Espacement à gauche du logo */
 }
 
 nav ul li:not(:first-child) {
 margin-left: auto; /* Place les autres éléments à droite */
 }
 
    nav ul li {
        margin: 0 20px;
    }
 
    nav ul li a {
        color: black;
        text-decoration: none;
        font-size: 18px;
        transition: color 0.3s;
    }
 
    nav ul li a:hover {
        color: #ff4f5a; /* Highlight color on hover */
    }
 
    /* Add some padding to content to prevent it from being covered by the navbar */
    main {
        padding-top: 60px;
    }
 
    /* Header */
 /* Style global pour le header */
 
 
    /* Hero Section */
    .hero {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60px 20px;
        background-color: #ffffff;
    }
 
    .hero img {
        max-width: 500px;
        width: 100%;
        border-radius: 10px;
    }
 
    .hero-text {
        max-width: 600px;
        margin-left: 50px;
    }
 
    .hero-text h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }
 
    .hero-text p {
        font-size: 18px;
        margin-bottom: 20px;
    }
 
    /* Advantages Section */
    .advantages {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        padding: 60px 20px;
        background-color: #f9f9f9;
        text-align: center;
    }
 
    .advantage {
        background-color: #ffffff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
 
    .advantage h3 {
        margin-bottom: 15px;
        color: #ff4f5a;
    }
 
    .advantage p {
        font-size: 16px;
        color: #666666;
    }
 
    /* Form Section */
    .form-sections {
        display: flex;
        justify-content: center;
        padding: 60px 20px;
    }
 
    .form-container {
        background-color: #ffffff;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        max-width: 600px;
        width: 100%;
    }
 
    .form-container h3 {
        margin-bottom: 20px;
        font-size: 28px;
        color: #333;
    }
 
    .form-container input {
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
 
    .form-container input[type="submit"] {
        background-color: #ff4f5a;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 18px;
    }
 
    .form-container input[type="submit"]:hover {
        background-color: #1e1e1e;
    }
 
    /* Testimonials Section */
    .testimonials {
        padding: 60px 20px;
        background-color: #fff;
        text-align: center;
    }
 
    .testimonials h2 {
        font-size: 30px;
        margin-bottom: 30px;
        color: #333;
    }
 
    .testimonial {
        margin-bottom: 20px;
        font-size: 18px;
        font-style: italic;
        color: #555;
    }
 
    .testimonial-author {
        font-weight: bold;
        color: #333;
    }
 
    /* Footer */
    footer {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
    }
 
    footer a {
        color: #ff4f5a;
        text-decoration: none;
    }
 
    footer a:hover {
        text-decoration: underline;
    }
 
    /* Responsive */
    @media (max-width: 768px) {
        .hero {
            flex-direction: column;
            text-align: center;
        }
 
        .hero-text {
            margin-left: 0;
            margin-top: 20px;
        }
 
        .advantages {
            grid-template-columns: 1fr;
        }
 
        nav ul {
            flex-direction: column;
            padding: 10px 0;
        }
 
        nav ul li {
            margin: 10px 0;
        }
    }
 
 
 /* Carte Types Section */
 .carte-types {
 padding: 10px 20px;
 background-color: #f9f9f9;
 text-align: center;
 }
 
 .carte-types h2 {
 font-size: 24px;
 margin-bottom: 30px;
 color: #333;
 }
 
 .carte-type {
 background-color: #ffffff;
 padding: 30px;
 border-radius: 10px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
 flex-wrap: wrap;
 }
 
 .carte-type h3 {
 color: #ff4f5a;
 font-size: 24px;
 margin-bottom: 20px;
 width: 100%;
 }
 
 .carte-info {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 max-width: 1000px;
 }
 
 .carte-image {
 width: 250px;
 height: auto;
 border-radius: 10px;
 margin-right: 30px;
 }
 
 .carte-description {
 max-width: 500px;
 text-align: left;
 }
 
 .carte-type p {
 font-size: 16px;
 color: #666666;
 margin-bottom: 20px;
 }
 
 .carte-type ul {
 list-style: none;
 padding: 0;
 font-size: 16px;
 color: #666666;
 text-align: left;
 }
 
 .carte-type ul li {
 margin-bottom: 10px;
 }
 
 .carte-type .cta-button {
 margin-top: 20px;
 }
 
 
 
 
 /* Styles pour le bouton de connexion */
 nav ul li .login-btn {
 font-size: 18px;
 padding: 10px;
 color: black;
 text-decoration: none;
 background-color: #ff4f5a;
 border-radius: 5px;
 transition: background-color 0.3s;
 }
 
 nav ul li .login-btn:hover {
 background-color: #1e1e1e;
 margin-left: auto
 }
 
 
 
 /* Styles du menu hamburger */
 .hamburger-menu {
 display: none;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;
 width: 30px;
 height: 30px;
 cursor: pointer;
 }
 
 .hamburger-menu span {
 width: 25px;
 height: 4px;
 background-color: #333;
 border-radius: 5px;
 }
 
 /* Menu mobile */
 .mobile-menu {
 display: none;
 position: fixed;
 top: 0;
 right: 0;
 width: 200px;
 height: 100%;
 background-color: #fff;
 box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
 z-index: 999;
 }
 
 .mobile-menu ul {
 list-style: none;
 padding: 20px;
 margin: 0;
 }
 
 .mobile-menu ul li {
 margin-bottom: 20px;
 }
 
 .mobile-menu ul li a {
 text-decoration: none;
 color: black;
 font-size: 18px;
 }
 
 /* Afficher le menu hamburger et mobile en mode responsive */
 @media (max-width: 768px) {
 nav ul {
    display: none; /* Cacher le menu par défaut sur mobile */
 }
 
 .hamburger-menu {
    display: flex; /* Afficher le hamburger uniquement sur mobile */
 }
 
 .mobile-menu.show {
    display: block; /* Afficher le menu mobile lorsqu'il est actif */
 }
 }
 
 /* Pour les petits écrans */
 @media (max-width: 768px) {
 .connexion-form-container {
    top: 60px; /* Déplacer le formulaire pour éviter qu'il ne soit masqué par le menu */
    right: 20px;
    max-width: 90%; /* Redimensionner le formulaire */
 }
 }
 
 
 
 /* Styles pour les informations de location de véhicule */
 .location-info {
 color: black; /* Bleu (vous pouvez changer la couleur selon votre préférence) */
 font-size: 18px;
 margin-top: 20px; /* Espacement entre le texte et les éléments précédents */
 }
 
 
 
 /* Sur les petits écrans */
 @media screen and (max-width: 768px) {
 .carte-type {
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center;
 }
 
 .carte-description {
    width: 200px; /* Ajuste la taille de l'image */
    margin-bottom: 20px; /* Ajoute un espace entre l'image et le texte */
 }
 
 .cta-button {
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 20px;
 }
 }
 
 /* Sur les très petits écrans */
 @media screen and (max-width: 480px) {
 .carte-info {
    padding: 10px;
 }
 
 h3 {
    font-size: 20px;  /* Réduit la taille du titre */
 }
 
 .carte-description p {
    font-size: 14px; /* Réduit la taille du texte */
 }
 }
 
 
 /* Titre de chaque section */
 .section-title {
 text-align: center;
 font-size: 2rem; /* Taille du texte */
 color: #ff4f5a;  /* Couleur du texte, vous pouvez la modifier */
 margin-bottom: 30px; /* Espacement sous le titre */
 font-weight: bold;
 }
 
 /* Carte Section */
 .cards-section .row {
 display: flex;
 justify-content: space-between;
 }
 
 /* Assurez-vous que les cartes occupent toute la largeur de la colonne */
 .card {
 width: 100%;
 margin: 10px 0;
 }
 
 /* Normaliser la taille des images */
 .card-img-top {
 width: 100%; /* Occupe toute la largeur du conteneur de la carte */
 height: 200px; /* Hauteur fixe pour toutes les images */
 object-fit: cover; /* L'image couvrira toute la zone sans déformation */
 }
 
 .prices {
 font-size: 1.5em; /* Agrandir la taille de la police */
 margin-top: 10px;
 font-weight: bold;
 }
 
 .original-price {
 color: #d9534f; /* Couleur rouge pour le prix barré */
 text-decoration: line-through; /* Ligne barrée */
 margin-right: 10px; /* Espacement entre les prix */
 font-size: 1.2em;
 }
 
 .discounted-price {
 color: #28a745; /* Couleur verte pour le prix promotionnel */
 font-size: 1.5em; /* Taille de police plus grande pour le prix promotionnel */
 font-weight: 700; /* Mettre en gras pour plus de visibilité */
 background-color: #fff3cd; /* Fond jaune pâle pour faire ressortir le prix */
 padding: 5px 10px; /* Ajout de padding autour du prix pour le mettre en évidence */
 border-radius: 5px; /* Bord arrondi pour le fond */
 }
 
 
 
 .commande {
 background-color: #FF5733; /* Choisissez la couleur de fond */
 border-color: #FF5733;     /* Choisissez la couleur de bordure */
 color: white;              /* Choisissez la couleur du texte */
 }
 
 .commande:hover {
 background-color: #C0392B; /* Couleur de fond au survol */
 border-color: #C0392B;     /* Couleur de bordure au survol */
 }
 
 
 .card-title {
 font-size: 1.5rem;  /* Augmenter la taille de la police */
 font-weight: bold;  /* Rendre le texte en gras */
 color:#C0392B;        /* Changer la couleur du texte */
 }
 
 
 
 .contact-section {
 padding: 20px;
 background-color: #f8f9fa; /* Couleur de fond de la section */
 border-top: 2px solid #ddd; /* Bordure en haut de la section */
 }
 
 .contact-section h4 {
 margin-bottom: 20px;
 font-size: 1.5rem;
 font-weight: bold;
 color: #333;
 }
 
 .contact-icons {
 display: flex;
 justify-content: center;
 gap: 20px;  /* Espace entre les icônes */
 }
 
 .contact-icon {
 font-size: 50px;         /* Taille des icônes */
 color: #333;             /* Couleur par défaut des icônes */
 text-decoration: none;   /* Supprimer le soulignement */
 }
 
 .contact-icon:hover {
 color: #007bff;          /* Couleur au survol */
 }
 
 .contact-icon i {
 transition: color 0.3s; /* Transition douce pour le changement de couleur */
 }
 
 /* Couleurs spécifiques pour chaque icône */
 .contact-icon.whatsapp {
 color: #25D366; /* Couleur verte officielle de WhatsApp */
 }
 
 .contact-icon.facebook {
 color: #1877F2; /* Couleur bleue officielle de Facebook */
 }
 
 .contact-icon.tiktok {
 color: #69C9D0; /* Couleur bleu-vert pour TikTok */
 }
 
 .contact-icon.phone {
 color: #34b7f1; /* Couleur bleu clair pour le téléphone */
 }
 
 
 .container {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    .map-container,
    .image-container {
        flex: 1 1 100%; /* Par défaut, chaque section prend 100% de la largeur */
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    /* Dimensions fixes pour la carte et l'image */
    .map-container,
    .image-container {
        width: 100%;
        height: 300px; /* Taille fixe pour la carte et l'image */
        border-radius: 8px;
    }
 
    /* Style de l'iframe de Google Maps */
    iframe {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 8px;
    }
 
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Permet à l'image de couvrir l'espace sans déformation */
        border-radius: 8px;
    }
 
    h3 {
        text-align: center;
        color: #4CAF50;
        font-size: 24px;
    }
 
    /* Mise en page sur les grands écrans */
    @media (min-width: 768px) {
        .map-container,
        .image-container {
            flex: 1 1 48%; /* Sur les grands écrans, chaque section occupe 48% de la largeur */
            margin-right: 20px;
        }
    }
 
    /* Ajustements pour les très petits écrans */
    @media (max-width: 600px) {
        h3 {
            font-size: 20px;
        }
    }
    
 
 /* Panier mobile dans le coin opposé du menu hamburger */
 .panier-mobile {
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;  /* Positionner par rapport à son parent */
 right: 10px;         /* Déplace le panier à droite */
 top: 50%;            /* Aligne verticalement avec le hamburger */
 transform: translateY(-50%); /* Centrer verticalement */
 font-size: 18px;
 }
 
 /* Cacher le panier mobile sur les écrans de taille supérieure */
 @media (min-width: 768px) {
 .panier-mobile {
    display: none;
 }
 }
 
 
 
 
 
 
 
 
 
 /* Styles pour le conteneur du panier */
 #cart-display {
 display: none;
 position: fixed;
 top: 20px;
 right: 20px;
 background-color: #f8f9fa;
 padding: 20px;
 width: 400px;
 border-radius: 8px;
 border: 1px solid #ddd;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 font-family: 'Arial', sans-serif;
 z-index: 9999;  /* Assurez-vous que le panier soit au-dessus des autres éléments */
 }
 
 /* Styles pour le titre du panier */
 #cart-display h3 {
 text-align: center;
 font-size: 24px;
 margin-bottom: 20px;
 color: #333;
 }
 
 /* Styles pour le tableau du panier */
 #cart-table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 20px;
 }
 
 /* Styles pour les en-têtes du tableau */
 #cart-table thead {
 background-color: #C0392B;
 color: white;
 text-align: left;
 }
 
 #cart-table th {
 padding: 10px;
 font-weight: bold;
 }
 
 /* Styles pour le corps du tableau */
 #cart-table tbody {
 background-color: #f9f9f9;
 }
 
 #cart-table td {
 padding: 10px;
 border-bottom: 1px solid #ddd;
 text-align: left;
 }
 
 /* Styles au survol des lignes du tableau */
 #cart-table tbody tr:hover {
 background-color: #f1f1f1;
 }
 
 /* Styles pour les boutons dans le tableau */
 #cart-table button {
 background-color: #dc3545;
 color: white;
 border: none;
 padding: 5px 10px;
 cursor: pointer;
 border-radius: 4px;
 transition: background-color 0.3s;
 }
 
 #cart-table button:hover {
 background-color: #c82333;
 }
 
 /* Styles pour le total du panier */
 #cart-total {
 font-size: 18px;
 font-weight: bold;
 color: #28a745;
 }
 
 /* Styles pour le bouton fermer */
 #close-cart {
 background-color: #007bff;
 color: white;
 padding: 10px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 transition: background-color 0.3s;
 font-size: 16px;
 }
 
 #close-cart:hover {
 background-color: #0056b3;
 }
 
 
 
 /* Icône de fermeture dans le coin supérieur droit */
 #close-cart-icon {
 position: absolute;
 top: 10px;
 right: 10px;
 background: none;
 border: none;
 font-size: 20px;
 color: #333;
 cursor: pointer;
 }
 
 #close-cart-icon:hover {
 color: #ff0000; /* Change la couleur en rouge au survol */
 }