/* Style conteneurs DIV */

/* Style pour le conteneur global des icones */
.icon-container {
	position: absolute;
	top: 80px;
	left: 10px;	
	width: 32px; /* Ajustez la largeur si necessaire */
	height: 280px; /* Ajustez la hauteur si necessaire */
	z-index: 1000; 
}
@media print {
    .icon-container {
        display: none !important;
    }
}

/* Conteneur global pour les logo */
#global-logo-container {
  position: absolute;
  bottom: 85px;
  left: 5px;
  z-index: 1100;
  
  /* Definir le conteneur en mode flex vertical */
  display: flex;
  flex-direction: column;
  gap: 0px; /* Espace entre chaque DIV */
}
@media print {
    #global-logo-container {
        display: none !important;
    }
}
.logo {
    border: 2px solid black;
    width: 40px;
    height: 40px;
    object-fit: contain;
	padding: 3px;
	background-color: white;
}
/* Conteneur global pour les selecteurs */
#global-selector-container {
  position: absolute;
  top: 45px;
  left: 50px;
  z-index: 1100;
  
  /* Definir le conteneur en mode flex vertical */
  display: flex;
  flex-direction: column;
  gap: 0px; /* Espace entre chaque DIV */
  pointer-events: auto; /* Permet les interactions de la souris a travers le logo */
}

/* Labels : style commun */
#global-selector-container label {
  margin-right: 5px;
  font-weight: bold;
}
/* Listes deroulantes */
#global-selector-container select {
  padding: 5px;
  font-size: 10px;
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  outline: none;
  width: 150px;
}
@media print {
    /* Masquer tous les selecteurs explicitement */
    #selector-yearPhoto,
    #selector-container1,
    #selector-container2,
    #selector-container3,
    #selector-printHTML {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Repositionner le conteneur global a 45px, 50px */
    #global-selector-container {
        position: fixed !important;
        top: 45px !important;
        left: 50px !important;
        z-index: 9999 !important;
    }
    
    /* Forcer l'affichage de la legende */
    #selector-legend {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        background-color: white !important;
        border: 2px solid black !important;
        padding: 10px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    #selector-legend .color-box {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* --------------------- DIV bouton printHTML --------------------------- */
.container-buttons {
	display: flex;
	flex-direction: column;  /* Les boutons sont places l'un sous l'autre */
	align-items: stretch; 
	gap: 5px;              /* Espace de 10px entre chaque bouton */  
}
/* Styles pour les boutons de printHTML */
.container-buttons button {
  font-family: Arial, sans-serif; /* Famille de police par defaut */  
  font-size: 11px;          /* Taille de police */
  text-align: center;       /* Texte centre */
  background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
  color: #000; /* Couleur de texte par defaut */  
  padding: 3px 3px;       /* Rembourrage interne (vertical et horizontal) */
  border: 1px solid #ccc; /* Bordure du selecteur */
  border-radius: 5px;       /* Coins arrondis */
  cursor: pointer;          /* Curseur en pointeur au survol */
  transition: background-color 0.3s ease; /* Transition douce pour le hover */
}
/* Changement de couleur au survol */
.container-buttons button:hover {
  background-color: #7ae95c; 
  }
/* --------------------- TITRES DE SECTION --------------------------- */
.section-title {
  margin: 0 0 8px 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  background-color: #f5f5f5;
  border-left: 3px solid #7ae95c; /* Utilise la couleur de votre theme (vert) */
  border-radius: 3px;
  text-align: center;
  font-family: Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	/* Empecher la selection du texte */
	-webkit-user-select: none; /* Chrome, Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* IE/Edge */
	user-select: none;         /* Standard */  
}

/* Selecteur arbotag */
#numArbreSelect {
    max-height: 200px; /* Environ 10 lignes */
    overflow-y: auto;
    size: 10;
}

/* Selecteur variete */
#varieteSelect {
    max-height: 200px; /* Environ 10 lignes */
    overflow-y: auto;
    size: 10;
}

/* =========================================================================
   STYLES CSS SPECIFIQUES POUR LA LEGENDE - a ajouter a la fin de stylesDIV.css
   ========================================================================= */

/* Override des styles de .legend quand elle est dans le conteneur global */
#global-selector-container .legend {
    /* Supprimer le positionnement absolu qui cause le probleme */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    
    /* Utiliser les styles du conteneur global */
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 5px !important;
    border-radius: 5px !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    color: #000 !important;
    margin-bottom: 3px !important;
    
    /* Taille appropriee */
    max-width: 180px !important;
    max-height: none !important;
    overflow: visible !important;
    
    /* Bordure coherente */
    border: 2px solid black !important;
}

/* Titre uniforme pour la legende, nominatim-search et tous les selecteurs dans le conteneur global */
#global-selector-container .legend h4,
#global-selector-container #nominatim-search-container h4,
#global-selector-container .selector-title {
    font-size: 12px !important;
    font-weight: bold !important;
    color: #333 !important;
    font-family: Arial, sans-serif !important;
    margin: 0 0 5px 0 !important;
    padding: 6px 10px !important;
    background-color: #f5f5f5 !important;
    border-left: 3px solid #7ae95c !important;
    border-radius: 3px !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Elements de la legende dans le conteneur global */
#global-selector-container .legend div {
    display: flex !important;
    align-items: center !important;
    font-size: 11px !important;
    color: #000 !important;
    font-family: Arial, sans-serif !important;
    margin-bottom: 4px !important;
    line-height: 16px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

#global-selector-container .legend div:last-child {
    margin-bottom: 0 !important;
}

#global-selector-container .legend div:hover {
    background-color: rgba(122, 233, 92, 0.2) !important;
}

/* Images de la legende dans le conteneur global */
#global-selector-container .legend img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}
/* =====================================================================
   BARRE D'OUTILS HORIZONTALE - a ajouter a la fin de stylesDIV.css
   ===================================================================== */

/* Style pour le conteneur horizontal des icones */
.icon-container-hz {
	position: absolute;
	top: 10px;
	left: 50px;	
	height: 32px; /* Hauteur fixe pour une rangee */
	display: flex;
	flex-direction: row; /* Disposition horizontale */
	gap: 0px; /* Pas d'espace entre les boutons */
	z-index: 1100; /* Plus eleve que les autres elements pour etre au-dessus */
}

@media print {
    .icon-container-hz {
        display: none !important;
    }
}

/* Style commun pour tous les boutons situes dans .icon-container-hz */
.icon-container-hz button {
  background-color: white;
  border: 1px solid black;
  padding: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  text-align: center;
  font: bold 18px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: #333;
  text-shadow: 0 1px 0 #fff;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Appliquer a la fois a <img> et aux <svg> contenus dans le bouton horizontal */
.icon-container-hz button img,
.icon-container-hz button svg {
  width: 26px;
  height: 26px;
}

/* Effet hover commun pour boutons horizontaux */
.icon-container-hz button:hover {
  border-color: rgba(0, 0, 0, 0.4);
  color: #000;
  background-color: #f4f4f4;
}

/* Classe pour les boutons actifs/selectionnes dans la barre horizontale */
.icon-container-hz button.btn-active {
  background-color: #7ae95c !important;
  border-color: #5cb85c !important;
}

.icon-container-hz button.btn-active:hover {
  background-color: #5cb85c !important;
}
/* Ancien style .selector-title supprime - utilise maintenant le style h4 uniforme */
/* Styles communs a l'ensemble des panels, SAUF yearPhoto */
#global-selector-container > div:not(#selector-yearPhoto) {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border: 2px solid black;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #000;
  margin-bottom: 3px;
  display: none;
}

/* Regle specifique pour yearPhoto */
#selector-yearPhoto {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border: 2px solid black;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #000;
  margin-bottom: 3px;
  /* Pas de display: none ici, laissons le JS le gerer */
}
/* =====================================================================
   CORRECTION Z-INDEX - A ajouter a la fin de stylesDIV.css
   ===================================================================== */

/* Augmenter le z-index de la barre horizontale pour qu'elle soit 
   toujours au-dessus des panneaux de selection */
.icon-container-hz {
    position: absolute;
    top: 10px;
    left: 50px;	
    height: 32px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    z-index: 1200 !important; /* Augmente pour etre au-dessus des panneaux */
    pointer-events: none; /* Permet le passage des clics a travers le conteneur */
}

/* Les boutons eux-memes doivent capturer les clics */
.icon-container-hz button {
    pointer-events: auto !important; /* Les boutons captent les clics */
}

/* S'assurer que les panneaux de selection restent sous la barre d'icones */
#global-selector-container {
    position: absolute;
    top: 45px; /* Descendre legerement pour eviter chevauchement */
    left: 50px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0px;
    pointer-events: auto;
}
/* Ajouter a stylesDIV.css a la fin du fichier */

/* Styles specifiques pour le panneau d'impression de photos */
/* IMPORTANT: Ne pas utiliser position:absolute, le panneau doit rester dans le flux du global-selector-container */

#selector-printHTML {
    /* Pas de position absolute - reste dans le flux flex du container */
    width: 180px; /* Largeur fixe comme les autres selecteurs */
    /* Les styles de base (background, padding, border, etc.) sont herites de #global-selector-container > div */
}

/* Styles obsoletes pour selector-printHTML .selector-title supprimes - utilise le style h4 uniforme */

#photo-list {
    padding: 0;
    max-height: 150px;
    overflow-y: auto;
    font-size: 11px;
}
/* Ancienne regle d'uniformisation supprimee - utilise le style h4 uniforme */
/* Masquer le photo-list s'il est vide pour ne pas prendre d'espace */
#photo-list:empty {
    display: none;
}

/* Disposition verticale des boutons d'impression - utilise .container-buttons existant */
#selector-printHTML .container-buttons {
    padding: 0;
    gap: 5px; /* Reduire l'espace entre les boutons */
    margin-top: 0; /* Supprimer la marge du haut */
}

#selector-printHTML .container-buttons button {
    width: 100%;
    padding: 8px 12px;
    font-size: 11px;
}

@media print {
    #selector-printHTML {
        display: none !important;
    }
}

/* Reduire l'espace entre la liste des arbres et les boutons dans selector-ViewData */
#selector-ViewData .container-buttons {
    margin-top: -15px;
}