:root {
    --couleur0:grey;
    --couleur1: #34373c;
    --couleur2: #33cccc;
    --couleur3: #e74c3c;
    --couleur4: #ffffff;
    --couleur5: #2c3e50;
    --widthMax:500px;
}

#map { 
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	
}


.card {
            background-color: red;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            padding: 20px;
            margin: 20px;
            text-align: left;
            position: relative;
        }

        .card h2 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }

        .card p {
            margin: 5px 0;
            color: #666;
        }

        .card i {
            margin-right: 8px;
            color: #007bff;
        }

        .card strong {
            display: block;
            margin-top: 20px;
            color: #000;
        }

        .card a {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 15px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .card a:hover {
            background-color: #0056b3;
        }

        .card .info-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card .info-section span {
            font-weight: bold;
        }

        .tarif-item {
            display: flex;
            justify-content: space-between;
        }

        @media (max-width: 600px) {
            .card {
                max-width: 100%;
                margin: 10px;
            }
        }

         .marker-label {
            background: white;
            border: 1px solid #ddd;
            padding: 2px 5px;
            border-radius: 3px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            font-size: 12px;
        }
       
            .custom-popup {
            background-color: transparent; /* Ajustez l'opacité ici */
            border-radius: 5px;
            padding: 10px;
            height: 250px;
        } 
        /**/
              /* Style global de la popup */
.custom-popup_1 {
    background-color: var(--couleur4);
    border-radius: 25px;
    padding: 20px;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Bouton de fermeture */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 30px;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: #e74c3c;
}

/* Titre de la popup */
.popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.popup_icon_title {
    font-size: 35px;
    margin-right: 10px;
    color:var(--couleur1);
    
}

.popup_title {
    font-size: 28px;
    font-weight: bold;
    color:var(--couleur1);
    font-family:'TypoPrincipal';
    font-stretch: expanded;
}



/* Disposition des éléments dans le corps de la popup */
.popup-body {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

/* Div gauche : image du parking */
.popup-image {
    flex: 1;
    width: 100%; /* Utilise toute la largeur disponible */
    height: 200px; /* Augmente la hauteur du conteneur pour l'image */
    overflow: hidden; /* Cache l'excédent de l'image qui dépasse */
    border-radius: 8px; /* Coins arrondis */
}

/* L'image elle-même */
.parking-img {
    width: 100%;
    height: 300px; /* Occupe toute la hauteur du conteneur */
    object-fit: cover; /* Recadre l'image pour qu'elle remplisse le conteneur tout en maintenant son ratio */
    object-position: 50% calc(50% - 50px); /* Déplace l'image de 10px vers le haut */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Div droite : informations du parking */
.popup-info {

    flex: 2;
    width: 50%; /* Utilise toute la largeur disponible */
}

/* Détail des informations */
.popup-details {
    margin-bottom: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    color:var(--couleur0);
}

.popup-details i {
    margin-right: 10px;
    color:var(--couleur1);
    
}

.popup-details span {
    font-weight: bold;
    font-size: 13px;
    color:var(--couleur0);
    text-align: left;

}

/* Disposition des boutons */
.DivButton {
    display: flex;
    flex-direction: row; /* Disposition des boutons en ligne */
    gap: 10px; /* Réduit l'espace entre les boutons */
    margin-top: 20px;
}

.Btn_Itineraire_Popup {
    width: 50px; /* Réduit la largeur pour que les deux boutons tiennent côte à côte */
    height: 50px;
    background-color: var(--couleur1);
    color: white;
    border-radius: 10px;
    display: flex; /* Pour aligner l'image et le texte */
    align-items: center;
    justify-content: center; /* Centrer le texte et l'image dans le bouton */
    flex-direction: column; /* Pour empiler l'icône et le texte verticalement */
    border-color: var(--couleur1);
    margin: 0; /* Pour s'assurer qu'il n'y a pas de marges sur les boutons */
}

.Btn_Itineraire_Popup img {
    margin: 0; /* Supprime les marges */
    padding: 0; /* Supprime les paddings si nécessaire */
}

.Btn_Itineraire_Popup:hover {
    background-color: var(--couleur1);
    color: var(--couleur2);
}

.hr_esp{
    border: 1px solid var(--couleur1); /* Définit la couleur de la bordure en rouge */
    margin: 10px 0px; /* Ajoute un espacement au-dessus et en dessous */

}