/*
 * Styles pour les chakras
 * Contient les styles pour les chakras et leur conteneur
 */

/* Conteneur principal des chakras */
.chakra-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: 600px;
  padding: 20px;
  z-index: 1;
  transition: all 0.5s ease;
}

/* Chakra individuel */
.chakra {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 5;
}

/* Effet de survol sur un chakra */
.chakra:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Couleurs individuelles des chakras */
.chakra.red { background-color: #F44336; }
.chakra.orange { background-color: #FF9800; }
.chakra.yellow { background-color: #FFEB3B; }
.chakra.green { background-color: #4CAF50; }
.chakra.blue { background-color: #2196F3; }
.chakra.indigo { background-color: #3F51B5; }
.chakra.violet { 
  background-color: #9C27B0;
  /* Styles standards alignés sur les autres chakras */
  z-index: 30 !important; /* Z-index standardisé, cohérent avec autres chakras */
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Pas de taille spécifique - utilise la taille standard des chakras */
  transform: scale(1) !important;
  box-shadow: 0 0 10px rgba(156, 39, 176, 0.6) !important; /* Ombre standard */
}

/* Légende des chakras */
.chakra-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10000 !important; /* Au-dessus des chakras mais en-dessous des tooltips */
  position: relative; /* Ajout de position relative pour que z-index fonctionne */
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  width: 100%;
  text-align: left;
}

.legend-color {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
}

/* Couleurs spécifiques pour la légende des chakras */
.legend-color-1 { background-color: #FF0000; box-shadow: 0 0 5px #FF0000; }
.legend-color-2 { background-color: #FFA500; box-shadow: 0 0 5px #FFA500; }
.legend-color-3 { background-color: #FFFF00; box-shadow: 0 0 5px #FFFF00; }
.legend-color-4 { background-color: #00FF00; box-shadow: 0 0 5px #00FF00; }
.legend-color-5 { background-color: #00FFFF; box-shadow: 0 0 5px #00FFFF; }
.legend-color-6 { background-color: #0000FF; box-shadow: 0 0 5px #0000FF; }
.legend-color-7 { background-color: #800080; box-shadow: 0 0 5px #800080; }

.legend-text {
  font-size: 14px;
  text-align: left;
}

.legend-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
}

/* Boutons de bascule entre les modes */
.display-toggle {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.toggle-button {
  padding: 8px 16px;
  margin: 0 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-button.active {
  background-color: var(--main-decor-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Media queries pour les appareils mobiles */
@media only screen and (max-width: 768px) {
  .chakra-container {
    height: auto;
    min-height: 500px;
  }
  
  .chakra {
    width: 30px !important; /* Taille réduite pour mobile */
    height: 30px !important;
  }
  
  .chakra::after {
    width: 10px !important; /* Point central plus petit */
    height: 10px !important;
  }
  
  .chakra-legend {
    margin-top: 30px;
    margin-bottom: 50px;
    width: 90%;
    max-width: 300px;
  }
}/* Styles pour l'arbre chakra */
/* Section dédiée aux chakras */
#chakra-section {
        margin: 0;
        padding: 50px 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--main-fonts-color);
        background: var(--main-background);
        position: relative;
        z-index: 3;
}

#chakra-section h3 {
        padding-top: 20px;
}

#chakra-section p {
        font-family: var(--main-font-family);
        font-size: 1.2rem;
        padding: 10px;
        margin-bottom: 30px;
}

.chakra-tree-container {
        position: relative;
        width: 900px; 
        height: 1000px; 
        margin: 20px auto;
        overflow: visible;
        z-index: 2;
}

.chakra-tree {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #5F4037; 

        background: url('arbre.png') no-repeat center;
        background-size: contain;

        z-index: 1;
}

.chakra {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        filter: blur(0px);
        box-shadow: 0 0 15px 5px currentColor;
        animation: chakra-glow 3s infinite alternate;
        cursor: pointer;
        z-index: 5;
        transition: all 0.3s ease;
        transform: translate(-50%, -50%);
        pointer-events: auto;
        /* Structure en couches pour permettre au tooltip d'être au-dessus */
        isolation: isolate;
}

.chakra:hover {
        /* Gardez un z-index bas pour les chakras même en hover */
        z-index: 5 !important;
}

.chakra:hover .tooltip {
        z-index: 2147483647 !important;
        pointer-events: none;
}

.chakra-tree-container .chakra:nth-of-type(6):hover {
        /* Gardez un z-index bas pour les chakras même en hover */
        z-index: 5 !important;
}

.chakra-tree-container .chakra:nth-of-type(6):hover .tooltip {
        z-index: 2147483647 !important;
}

.chakra::after {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 8px 2px white;
        z-index: 4; /* Un niveau plus bas que le chakra lui-même pour que le tooltip puisse apparaître par-dessus */
        pointer-events: none; /* Permettre aux événements de passer à travers pour que le tooltip fonctionne */
}

/* Positionnement selon la forme d'un arbre - Positions fixes par rapport à l'arbre */
.chakra-tree-container {
                position: relative;
}

.chakra-tree {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                transform-origin: center center;
}

/* 
 * POSITIONNEMENT DES CHAKRAS EN MODE ARBRE (DESKTOP)
 * Chaque chakra est positionné avec des pourcentages relatifs au conteneur de l'arbre
 * Cette méthode garantit que les chakras restent alignés même lors de redimensionnements
 *
 * Structure et organisation :
 * - Les chakras sont numérotés de 1 à 7 (de bas en haut)
 * - Ils utilisent une alternance gauche/droite/centre pour créer un effet visuel d'arbre
 * - Espacement vertical régulier (environ 10% entre chaque chakra)
 * - Ajustement des positions horizontales pour suivre une forme naturelle d'arbre
 * - Z-index standard (5) pour tous sauf le chakra couronne (violet) qui est à 9999
 *
 * Note: Ces positions sont utilisées par défaut, mais peuvent être écrasées
 * par le positionnement JavaScript dynamique dans tree-mode.js
 */

/* Chakra 1: RACINE (Rouge) - Base de l'arbre, centré en bas */
.chakra-tree-container .chakra:nth-of-type(1) { 
    top: 85%; /* Position basse pour représenter les racines */
    left: 50%; /* Centré horizontalement */
    background: #FF0000; 
    color: #FF0000; 
    box-shadow: 0 0 15px 5px #FF0000; 
    display: block !important; 
    z-index: 5 !important; 
} 

/* Chakra 2: SACRÉ (Orange) - Premier embranchement, légèrement à gauche */
.chakra-tree-container .chakra:nth-of-type(2) { 
    top: 75%; 
    left: 38%; /* Décalé vers la gauche pour créer une asymétrie naturelle */
    background: #FFA500; 
    color: #FFA500; 
    box-shadow: 0 0 15px 5px #FFA500; 
    display: block !important; 
    z-index: 5 !important; 
} 

/* Chakra 3: PLEXUS SOLAIRE (Jaune) - Milieu bas, recentré */
.chakra-tree-container .chakra:nth-of-type(3) { 
    top: 65%; 
    left: 50%; /* Retour au centre pour équilibrer */
    background: #707057; 
    color: #FFFF00; 
    box-shadow: 0 0 15px 5px #FFFF00; 
    display: block !important; 
    z-index: 5 !important; 
} 

/* Chakra 4: CŒUR (Vert) - Milieu, décalé vers la droite */
.chakra-tree-container .chakra:nth-of-type(4) { 
    top: 55%; /* Position médiane verticale */
    left: 62%; /* Décalé vers la droite pour alterner et créer un effet naturel */
    background: #00FF00; 
    color: #00FF00; 
    box-shadow: 0 0 15px 5px #00FF00; 
    display: block !important; 
    z-index: 5 !important; 
} 

/* Chakra 5: GORGE (Bleu clair) - Milieu haut, recentré */
.chakra-tree-container .chakra:nth-of-type(5) { 
    top: 45%; 
    left: 50%; /* Retour au centre pour équilibrer */
    background: #00FFFF; 
    color: #00FFFF; 
    box-shadow: 0 0 15px 5px #00FFFF; 
    display: block !important; 
    z-index: 5 !important; 
} 

/* Chakra 6: TROISIÈME ŒIL (Bleu) - Haut, décalé vers la gauche */
.chakra-tree-container .chakra:nth-of-type(6) { 
    top: 35%; 
    left: 37%; /* Décalé vers la gauche pour alterner */
    background: #0000FF; 
    color: #0000FF; 
    box-shadow: 0 0 15px 5px #0000FF; 
    display: block !important; 
    z-index: 5 !important; 
    position: relative; /* Nécessaire pour que le z-index fonctionne correctement */
} 

/* Chakra 7: COURONNE (Violet) - Sommet de l'arbre, centré tout en haut */
.chakra-tree-container .chakra:nth-of-type(7) { 
    top: 25%; /* Position haute pour représenter le sommet de l'arbre */
    left: 50%; /* Centré horizontalement */
    background: #800080; 
    color: #800080; 
    box-shadow: 0 0 15px 5px #800080; 
    display: block !important; 
    z-index: 30 !important; /* Z-index standardisé pour être cohérent avec les autres chakras */
}

/* Légende des chakras */
.chakra-legend {
        position: relative;
        transform-origin: center center;
        background: rgba(248, 243, 233, 0.95);
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1; /* Z-index positif mais bas pour être au-dessus des chakras mais en-dessous des tooltips */
        width: 80%;
        max-width: 600px;
        border-left: 4px solid var(--main-decor-color);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        order: 999; /* Position en dernier dans le flux */
        margin: 10px auto 30px auto;
        clear: both; /* Forcer à passer sous tous les éléments flottants */