/* Style complet */
	html, body {
		height: 100%;
		margin: 0;
	}
#map {
	width: 100%;
	height: 100vh;
}
/* Style titre map */
#titreMap {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 20px;
	font-family: Arial, sans-serif;
	font-weight: bold;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.8);
	padding: 5px 10px;
	border-radius: 5px;
}
/* Logo */        
.logo-container {
    position: absolute;
    bottom: 48px; 
    left: 5px;
    z-index: 1000;
    pointer-events: none; /* Permet les interactions de la souris à travers le logo */
}
.logo {
    border: 2px solid black;
    width: 70px;
    height: 70px;
    object-fit: contain
}
.leaflet-popup { z-index: 1020; }'
/* Style selector search */
.centered-option {
width: 100%; /* Appliquer une largeur de 100% */
text-align: center; /* Centrer le texte */
}

/* Styles des légendes */
.info.legend {
    background-color: white;
    border: 1px solid black;
    padding: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    opacity: 1;
    z-index: 1010;
	margin-bottom: 40px;  	
}
.info.legend i, .info.legend img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}
.hidden {
	display: none;
}
.legend {
    position: absolute;
    top: 10px;
    left: 45px;
    background: white;
    padding: 10px;
    border: 1px solid black;
    z-index: 1000; /* Pour s'assurer que la légende est au-dessus des autres éléments */
    max-width: 200px; /* Définir la largeur maximale */
    max-height: 550px; /* Définir la hauteur maximale */
    overflow: auto; /* Activer le défilement si le contenu dépasse */
}
.legend img {
    width: 15px; /* Largeur de 18px */
    height: 15px; /* Hauteur de 18px */
    margin-right: 5px; /* Espace à droite de l'image */
}
.legend h4 {
    font-size: 12px; /* Taille du texte */
    color: #333; /* Couleur du texte */
    font-family: Arial, sans-serif; /* Police de caractères */
    margin-bottom: 10px; /* Espace en bas du titre */
}
.legend div {
    display: flex; /* Utiliser flexbox pour l'alignement */
    align-items: center; /* Aligner verticalement les éléments */
    font-size: 10px; /* Taille du texte */
    color: #555; /* Couleur du texte */
    font-family: Arial, sans-serif; /* Police de caractères */
    margin-bottom: 5px; /* Espace en bas de chaque élément */
    line-height: 18px; /* Hauteur de ligne pour aligner avec l'image */
}
/* Affichage du niveau de zoom */
.zoom-level {
    position: absolute;
    bottom: 25px; 
    left: 5px;
    z-index: 1002;
    width: 67px;
    height: 16px;   
    background: white;
    padding: 2px;
    border: 2px solid black;
    font-family: 'Arial', sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    font-style: italic; 
    color: red; 
    text-align: center; 
    line-height: 16px; /* Aligner verticalement le texte */
}
/* Affichage du selector par essence */
#selector-container {
    position: absolute;
    top: 140px; /* Ajuste la distance par rapport au haut de la fenêtre */
    left: 50px; /* Ajuste la distance par rapport au bord gauche de la fenêtre */
    z-index: 1005; /* Assure que le sélecteur reste au-dessus de la carte */
    background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
    padding: 10px; /* Padding interne */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Ombre portée */
    font-family: Arial, sans-serif; /* Famille de police par défaut */
    font-size: 11px; /* Taille de police par défaut */
    color: #000; /* Couleur de texte par défaut */
}
#selector-container {
    display: none;
}
#selector-container label {
    margin-right: 5px; /* Espace entre le label et le sélecteur */
    color: #000; /* Couleur de texte du label */
    font-weight: bold; /* Poids de police du label */
}
#selector-container select {
    padding: 5px; /* Padding interne du sélecteur */
    font-size: 10px; /* Taille de police du sélecteur */
    color: #000; /* Couleur de texte du sélecteur */
    background-color: #fff; /* Couleur de fond du sélecteur */
    border: 1px solid #ccc; /* Bordure du sélecteur */
    border-radius: 3px; /* Coins arrondis du sélecteur */
    outline: none; /* Supprime l'effet de contour */
    width: 140px; /* Largeur du sélecteur */    
}
/* Requêtes de média pour les écrans de smartphone */
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    #selector-container {
        top: 13px; /* Ajuste la position en fonction de la taille de l'écran */
        left: 50px; /* Ajuste la position en fonction de la taille de l'écran */
        width: 150px; /* Ajuste la largeur du conteneur */
        padding: 5px; /* Réduit le padding */
        font-size: 10px; /* Réduit la taille de la police */
    }
	#selector-container select {
		font-size: 8px; /* Réduit la taille de la police du sélecteur */
		width: 100%; /* Ajuste la largeur du sélecteur */
		max-height: 100px; /* Limite la hauteur maximale de la liste */
		overflow-y: auto; /* Active le défilement vertical si nécessaire */
	}	
}
/* Affichage du selector par parcelle PLOT */
#selector-Plot {
    position: absolute;
    top: 140px; /* Ajuste la distance par rapport au haut de la fenêtre */
    left: 50px; /* Ajuste la distance par rapport au bord gauche de la fenêtre */
    z-index: 1005; /* Assure que le sélecteur reste au-dessus de la carte */
    background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
    padding: 10px; /* Padding interne */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Ombre portée */
    font-family: Arial, sans-serif; /* Famille de police par défaut */
    font-size: 11px; /* Taille de police par défaut */
    color: #000; /* Couleur de texte par défaut */
}
#selector-Plot {
    display: none;
}
#selector-Plot label {
    margin-right: 5px; /* Espace entre le label et le sélecteur */
    color: #000; /* Couleur de texte du label */
    font-weight: bold; /* Poids de police du label */
}
#selector-Plot select {
    padding: 5px; /* Padding interne du sélecteur */
    font-size: 10px; /* Taille de police du sélecteur */
    color: #000; /* Couleur de texte du sélecteur */
    background-color: #fff; /* Couleur de fond du sélecteur */
    border: 1px solid #ccc; /* Bordure du sélecteur */
    border-radius: 3px; /* Coins arrondis du sélecteur */
    outline: none; /* Supprime l'effet de contour */
    width: 100px; /* Largeur du sélecteur */    
}

/* Affichage du popup a l'ouverture de l'application */
.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 2px solid black;
    padding: 20px;
    z-index: 1100; /* Ajuster si nécessaire */
    display: none; /* Cacher le popup par défaut */
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.popup-link {
	text-align: center;
	display: block;
}

@media print {
    #selector-container {
        display: none !important;
    }
    #selector-Plot {
        display: none !important;
    }
    .icon-container	 {
        display: none !important;		
    }
}