/*
 * Styles pour le mode Arbre
 * Styles spécifiques au mode d'affichage des chakras en arbre uniquement
 * Les styles communs sont dans display-modes-styles.css
 */

/* Conteneur pour le mode arbre */
.tree-mode {
  background-color: transparent;
}

/* Élément de l'arbre chakra */
.chakra-tree {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: none; /* Supprimé pour éviter le doublon avec l'élément img */
  z-index: 1 !important; /* Assurons-nous que l'arbre a un z-index inférieur aux chakras */
  pointer-events: none; /* Cette propriété garantit que l'arbre ne bloque pas les événements de souris */
}

/* Afficher l'arbre en mode arbre */
.tree-mode .chakra-tree {
  opacity: 1;
  visibility: visible;
}

/* Styles spécifiques au mode arbre sur mobile */
@media only screen and (max-width: 768px) {
  .tree-mode .chakra-tree-container {
    margin-top: -80px; /* Marge négative plus importante pour rapprocher davantage */
  }
  
  /* Positionnement de l'image de l'arbre plus haut */
  .tree-mode .chakra-tree {
    top: -40px; /* Placer l'image plus haut dans son conteneur */
  }
}

/* Autres styles spécifiques au mode arbre sont dans chakra-tree-container-styles.css */

/* Style spécifique pour le chakra violet en mode arbre */
.tree-mode .chakra:nth-child(7) {
  z-index: 9999 !important; 
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: absolute !important;
}