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 */
.header {
background-color: #f8f9fa; /* Couleur de fond claire */
padding: 40px 20px; /* Espacement autour des éléments */
text-align: center; /* Centrer le texte */
border-bottom: 2px solid #e0e0e0; /* Légère bordure pour séparer du contenu suivant */
}

.entete {
font-size: 2.5rem; /* Taille de police plus grande pour le titre */
font-weight: bold;
color: #333; /* Couleur sombre pour une meilleure lisibilité */
margin-bottom: 20px;
}

.description {
font-size: 1.1rem; /* Taille de police plus petite pour la description */
color: #555; /* Couleur plus claire pour la description */
line-height: 1.6;
margin-bottom: 30px;
}

.cta-button {
font-size: 1.2rem; /* Taille de police pour le bouton */
background-color: #007bff; /* Couleur de fond bleue */
color: #fff; /* Texte blanc */
padding: 12px 30px; /* Espacement interne du bouton */
border-radius: 50px; /* Coins arrondis */
text-decoration: none;
display: inline-block;
margin-bottom: 20px;
transition: background-color 0.3s ease; /* Effet de transition pour le survol */
}

.cta-button:hover {
background-color: #0056b3; /* Couleur bleue plus foncée au survol */
}

.location-info {
font-size: 1rem; /* Taille de police modérée pour l'info supplémentaire */
color: #007bff; /* Couleur bleue pour attirer l'attention */
margin-top: 30px;
font-style: italic; /* Style en italique pour distinguer l'information */
}


   .cta-button {
       background-color: #1e1e1e;
       color: white;
       padding: 15px 30px;
       font-size: 18px;
       text-decoration: none;
       border-radius: 5px;
       transition: background-color 0.3s;
   }

   .cta-button:hover {
       background-color: #ff4f5a;
   }

   /* 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: #007bff;
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 */
}