/* Style conteneurs DIV */

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

/* Conteneur global pour les logo */
#global-logo-container {
  position: absolute;
  bottom: 73px;
  left: 5px;
  z-index: 1100;
  
  /* Définir 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;
}
/* Conteneur global pour les sélecteurs */
#global-selector-container {
  position: absolute;
  top: 13px;
  left: 50px;
  z-index: 1100;
  
  /* Définir 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 à travers le logo */
}

/* Styles communs à l'ensemble des panels inclus dans le conteneur global */
#global-selector-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  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; /* Espace entre les panels */
  display: none;  /* Par défaut, les panels sont masqués */
}

/* Labels : style commun */
#global-selector-container label {
  margin-right: 5px;
  font-weight: bold;
}
/* Listes déroulantes */
#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 {
    #global-selector-container {
        display: none !important;
    }
}
/* Légende harmonisée avec les autres panneaux */

/* Force l'harmonisation du style de la légende */
#selector-legend {
    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;
    margin-bottom: 3px !important;
    font-size: 11px !important;
}

.legend-content {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Réduit pour s'aligner sur les autres panneaux */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px; /* Réduit pour s'aligner */
}

.legend-item img {
    width: 18px; /* Même taille que les icônes des autres panneaux */
    height: 18px;
    object-fit: contain;
}

.legend-item span {
    font-size: 11px; /* Même taille que les autres textes */
    font-weight: normal; /* Plus léger pour s'harmoniser */
    font-family: Arial, sans-serif; /* Même police */
}

/* --------------------- DIV bouton printHTML --------------------------- */
.container-buttons {
	display: flex;
	flex-direction: column;  /* Les boutons sont placés 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 défaut */  
  font-size: 11px;          /* Taille de police */
  text-align: center;       /* Texte centré */
  background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
  color: #000; /* Couleur de texte par défaut */  
  padding: 3px 3px;       /* Rembourrage interne (vertical et horizontal) */
  border: 1px solid #ccc; /* Bordure du sélecteur */
  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 thème (vert) */
  border-radius: 3px;
  text-align: center;
  font-family: Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	/* Empêcher la sélection du texte */
	-webkit-user-select: none; /* Chrome, Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* IE/Edge */
	user-select: none;         /* Standard */  
}

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

/* Sélecteur variété */
#varieteSelect {
    max-height: 200px; /* Environ 10 lignes */
    overflow-y: auto;
    size: 10;
}