/*
 * Styles pour le conteneur de l'arbre des chakras
 * Ce fichier contient les styles spécifiques au conteneur qui affiche l'arbre des chakras
 * Utilisé par les deux modes d'affichage (arbre et rafiki)
 */

/* Conteneur principal de l'arbre des chakras */
.chakra-tree-container {
    position: relative;
    width: 100%;
    height: calc(100% - 100px); /* Prendre la hauteur moins les paddings du conteneur parent */
    margin: 0 auto;
    overflow: hidden; /* Empêcher le débordement strict */
    background-color: transparent;
    box-sizing: border-box;
    top: 0; /* Position depuis le haut du conteneur parent */
}

/* Media queries pour la version desktop du conteneur */
/* Remarque: Ces règles sont désormais overridden par celles de fixed-chakra-layout.css */
@media only screen and (min-width: 769px) {
    /* Ces règles ne sont plus actives car fixed-chakra-layout.css prend priorité */
    /* Elles sont conservées ici pour référence et compatibilité */
}

/* Media queries pour la version mobile du conteneur */
@media only screen and (max-width: 768px) {
    .chakra-tree-container {
        height: calc(100% - 60px); /* Prendre la hauteur disponible moins les paddings */
        width: 100%;
        order: 0;
        margin: 0;
        position: relative;
        z-index: 2;
        overflow: hidden; /* Empêcher le débordement strict sur mobile */
    }

    /* Styles spécifiques pour l'image de l'arbre en mobile */
     /* ICI ON REGLE LA HAUTEUR DE LARBRE */
    .chakra-tree {
        transform-origin: center top !important;
        top: 0 !important; /* Position normale, au début du conteneur */
        position: relative !important;
        width: 100%; /* S'assurer que la div prend toute la largeur */
        height: 100%; /* S'assurer que la div prend toute la hauteur */
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: none !important; /* Éviter les doublons d'affichage */
    }

    /* Style spécifique pour l'image à l'intérieur du div */
    .tree-img {
        width: 100%;
        height: auto;
        max-width: 100%;
        transform: scale(1, 1.5); /* Étirer l'image verticalement */
        transform-origin: center top;
        display: block !important; /* S'assurer que l'image est toujours visible */
    }

    /* Ajustements spécifiques pour le mode arbre sur mobile */
    .tree-mode .chakra-tree-container {
        height: auto; /* Hauteur adaptative pour éviter les problèmes de débordement */
        min-height: 600px; /* Hauteur minimale pour afficher correctement l'arbre */
        position: relative !important;
        order: 0 !important; /* S'assurer qu'il apparaît en premier */
    }

    /* Ajustements spécifiques pour le mode rafiki sur mobile */
    .rafiki-mode .chakra-tree-container {
        height: calc(100% - 80px); /* Hauteur adaptative en prenant compte des paddings augmentés */
        min-height: 620px; /* Hauteur minimale pour contenir tous les chakras */
    }
}