@media only screen and (max-width: 768px) {
    /* Style de base pour le header */
    #sourceHeader {
        background-color: #EEEEEE;
        padding: 10px;
    }
    
    .progress .bg-success {
    	background: #4cae4c !important;
    }
    
    .booking-form .submit-btn, .btn-outline-secondary {
    	background: #5cb85c !important;
    	-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;	
    }

    /* Section logo */
    #sourceHeader div:first-child {
        width: 100%; /* Prendre toute la largeur sur mobile */
        text-align: center; /* Centrer le logo sur mobile */
    }

    #sourceHeader div:first-child img {
        max-height: 40px; /* Réduire la taille du logo sur mobile */
        height: auto;
        max-width: 100%; /* S'assurer que l'image ne déborde pas */
    }

    /* Section liens et boutons */
    #sourceHeader div:last-child {
        width: 100%; /* Prendre toute la largeur sur mobile */
        text-align: center; /* Centrer les boutons */
    }

	#sourceHeader a img {
        max-height: 30px !important;	
	}

    /* Style des boutons sur mobile */
    #sourceHeader a {
        display: inline-block;
        margin: 5px 0; /* Espacement entre les boutons */
        font-size: 14px; /* Réduire la taille de la police sur mobile */
    }
    
    #sourceHeaderButtons {
    	display:none;
    }

    /* Styles généraux pour améliorer l'apparence sur mobile */
    body {
        font-size: 14px;
    }

	#bookingSearchVehicle {
		display:none;	
	}

    /* Largeur complète pour les boutons */
    .btn {
        width: 100%;
        margin-bottom: 10px;
        font-size: 13px;
        padding: 10px;
    }
    
    .list-group.shadow {
    	box-shadow: none !important;	
    }

	.autocomplete-result {
		font-size: 13px !important;
		padding: 5px 10px;
		
	}


    /* Ajustement du titre du formulaire */
    h3 {
        font-size: 22px;
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* Les champs de texte prennent toute la largeur */
    .form-control {
        width: 100%;
        margin-bottom: 0px !important;
    }

    /* Amélioration de l'affichage des groupes de sélection */
    .input-group-prepend {
        display: flex;
        justify-content: space-around;
    }

    .input-group-prepend a {
        width: 30%;
        font-size: 14px;
        padding: 10px;
        text-align: center;
    }

    /* Largeur complète pour les champs d'adresse */
    .form-group {
        width: 100%;
    }

    /* Étiquettes des formulaires */
    .form-label {
        font-size: 14px;
        display: block;
        margin-bottom: 5px;
    }


	.booking-form .form-control {
		background: #fafafa;	
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		height: 65px;
		padding-top: 25px !important;		
	    padding-left: 10px !important;
	    padding-right: 10px !important;
	}

    /* Ajustement des listes */
    .list-group-item {
        padding: 15px;
        font-size: 14px;
    }

    /* Ajustement des sélecteurs de passagers et de bagages */
    select.form-control,
    input.form-control {
        font-size: 16px !important;
    }

    /* Réduction de la taille des images */
    img {
        max-width: 100%;
        height: auto;
    }
	
	#pricePreview {
		display:none;	
	}
	
	.iconsShortcuts {
		display:none;	
	}

    /* Masquer les éléments non nécessaires sur mobile */
    .hidden-xs {
        display: none;
    }

    /* Ajustement pour les cartes Google Maps */
    #map_canvas {
        height: 300px;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Pied de page en mode mobile */
    .footer {
        text-align: center;
        font-size: 12px;
    }

    /* Réduction de la taille du logo dans le pied de page */
    .footer img {
        height: 30px;
    }
    

	
}


@media (max-width: 768px) {
    /* Adapter les tailles des colonnes */
    .col-md-3, .col-md-4, .col-md-5 {
        width: 100%;
        padding: 0;
    }

    /* Centrer les images sur mobile */
    .carImage {
        display: block;
        margin: 0 auto 10px;
    }

    /* Centrer les textes et éléments de prix */
    .media-body {
        text-align: center;
    }

    .text-right {
        text-align: center;
    }

    /* Ajuster les marges et tailles de police */
    h2 {
        font-size: 18px;
        margin-top: 10px;
    }

    .font-weight-bold {
        font-size: 16px;
    }
    
    .booking-form .form-group {
    	margin-bottom:0px;	
    }

    .car_price {
        font-size: 16px;
    }

    .btn-lg {
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Réduire la taille des images des cartes de paiement */
    .cards {
        width: 80%;
        margin: 10px auto;
    }

    /* Réduire les marges et ajuster l'alignement des éléments */
    .media.align-items-lg-center {
        flex-direction: column;
        padding: 15px;
    }

    /* Réduire la taille des boutons */
    .btn-success {
        font-size: 14px;
        width: 100%;
        margin-top: 10px;
    }

    /* Style pour l'avis Google */
    .review-item {
        text-align: center;
        margin-top: 10px;
    }

    .review-text {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .review-stars ul {
        padding-left: 0;
    }

    .review-author {
        display: block;
        font-size: 14px;
        margin-top: 5px;
    }

    /* Ajustement des icônes et de la police */
    .fa {
        margin-right: 5px;
    }

    .car_type, .car_luggage {
        font-size: 14px;
    }

    /* Suppression des marges inutiles sur mobile */
    .list-group-item {
        margin-bottom: 15px;
        padding: 10px 20px;
    }

    /* Adaptation du conteneur général */
    .col-lg-9 {
        padding: 0;
    }

    /* Ajustement du conteneur du prix */
    .total_price {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    /* Adapter la taille de la colonne */
    .col-lg-3 {
        width: 100%;
        padding: 0;
    }

    /* Centrer et espacer les boutons */
    .btn-block {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Réduire la taille de la police pour les petites résolutions */
    .list-group-item-summary {
        font-size: 12px;
    }

    .list-group-item-summary strong {
        font-size: 15px;
        color:green;
    }

    /* Centrer le texte des éléments pour une meilleure lisibilité */
    .ui-bar {
        text-align: center;
    }

    /* Ajuster les marges des éléments de liste */
    .list-group-item {
        padding: 10px 15px;
        margin-bottom: 10px;
    }

    /* Adapter les icônes pour les petites résolutions */
    .fa {
        font-size: 16px;
        margin-right: 5px;
    }

    /* Espacer les blocs dans le résumé de réservation */
    #bookingSummary {
        margin-top: 15px;
    }

    /* Cacher certains éléments sur mobile si nécessaire */
    .hidden-xs {
        display: none !important;
    }

    /* Ajuster la taille des boutons sur mobile */
    .btn-xs {
        font-size: 12px;
        padding: 5px 10px;
        margin-top: 5px;
    }

    /* Centrer les éléments des boutons d'assistance et des liens */
    .btn-primary {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Ajuster l'affichage des éléments de texte long */
    .ui-bar-b {
        word-wrap: break-word;
    }
}

@media (max-width: 576px) {
    /* Adapter encore plus les petits écrans */
    .list-group-item-summary {
        font-size: 11px;
    }

    .btn-block {
        font-size: 14px;
    }

    .btn-xs {
        font-size: 10px;
    }

    /* Affichage centré et ajustement des espaces pour les plus petites résolutions */
    .ui-bar {
        text-align: center;
        margin-bottom: 10px;
    }
}


@media (max-width: 768px) {
    .list-group-item-summary .ui-bar {
        display: flex;
        flex-direction: column;
    }

    .list-group-item-summary .btn {
        width: 100%;
        text-align: center;
    }

    /* Spécifique pour cacher ou ajuster les éléments sur mobile */
    .hidden-lg, .hidden-md {
        display: block !important;
    }

    /* Optionnel : ajuster les marges et padding pour un meilleur espacement sur mobile */
    .list-group-item {
        padding: 10px;
    }

    .list-group-item-summary {
        font-size: 14px; /* Ajustement pour améliorer la lisibilité sur mobile */
    }
    
    #google-reviews .review-text {
    	width: 100% !important;
    }
    
    .booking-form .form-label, .booking-form .value {
    	font-size: 12px !important;	
    	line-height: 35px;
    }
    
    .booking-form .submit-btn {
    	margin-top: 15px;	
    }
}


@media (max-width: 768px) {
	
	form {
		margin-bottom: 150px;	
	}
	
    #finalBookingSummary {
        padding: 10px;
        margin-bottom:200px;
    }
    #finalBookingSummary .col-md-8, #finalBookingSummary .col-md-4 {
        width: 100%;
        padding: 10px;
    }
    #finalBookingSummary .list-group-item-summary {
        font-size: 14px;
        padding: 10px 10px;;
        margin-bottom: 0px;
    }
    #finalBookingSummary .fa {
        font-size: 16px;
        margin-right: 8px;
    }
    #finalBookingSummary img {
        width: 100%;
        height: auto;
    }
    #finalBookingSummary .btn-block {
        width: 100%;
        margin-bottom: 10px;
    }
    
    #finalBookingSummary .booking-form .value {
    	height: auto;	
    }
    #finalBookingSummary .ui-bar {
        font-size: 14px;
        padding: 0px 0;
    }
    #finalBookingSummary .form-group {
        padding: 5px 0;
        border-bottom: solid 1px #AAA;
    }
    #finalBookingSumamry .list-group {
    	margin-bottom: 0px;	
    }
    #finalBookingSummary .submit-btn {
        width: 100%;
        font-size: 16px;
        padding: 12px;
    }
    
    #finalBookingSummary .booking-form .form-label, #finalBookingSummary .booking-form .value {
    	left: 0px;
    	position: static;
    	line-height: 16px;	
    }
    
    #finalBookingSummary .cgvRow .col-md-12 {
    	padding: 0px 5px;	
    }
    
    #finalBookingSummary .cgvRow input,
    #finalBookingSummary .cgvRow label {
		float:left;
    }
    
    #finalBookingSummary .cgvRow label {
		width: 90%;
    }
    
    #finalBookingSummary #cgvbox {
    	padding: 10px !important;
	    border: solid 1px #AAA;
	    margin-top: 0px;
	    -webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 0px !important;
    }
    #finalBookingSummary #cgv-container {
        font-size: 12px;
        padding: 15px;
        line-height: 1.5;
    }
    #finalBookingSumamry .booking-form .form-group {
    	margin-bottom: auto;	
    }
    #finalBookingSummary img.cards {
        margin: 0 auto;
        display: block;
        max-width: 100%;
    }
    #finalBookingSummary .list-group.shadow {
        box-shadow: none;
    }
    
    .booking-form-details h3 {
	    font-size: 15px; /* Ajuste la taille du texte */
	    font-weight: bold;
	    text-transform: uppercase;
	}
	
	#finalBookingSummary .list-group {
		margin-bottom: 0px;	
	}

		/* Container for the bottom navigation */
		.bottom-nav {
		    position: fixed;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    height: 60px;
		    background-color: #ffffff;
		    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		    border-top: 1px solid #cccccc;
		    z-index: 1000;
		}
		
		/* Each navigation item */
		.nav-item {
		    text-align: center;
		    flex: 1;
		    text-decoration: none;
		    color: #333;
		    font-size: 10px;
		    outline: none; /* Remove the default blue outline on click */
		    transition: color 0.3s ease;
		    font-weight:bold;
		    text-transform: uppercase;
		}
		
		.nav-item:hover {
			text-decoration:none;	
		}
		
		/* Icon style */
		.nav-item i {
		    font-size: 20px;
		    display: block;
		    margin-bottom: 5px;
		    color: #5cb85c;
		}
		
		.nav-item .fa {
			margin-right: 0px;	
		}


}