/**
 * 🔄 FIXED-CHAKRA-LAYOUT.CSS 🔄
 * 
 * Ce fichier gère la disposition fixe de la section des chakras en version desktop.
 * Il maintient un espacement constant entre les boutons de bascule, la silhouette (arbre/rafiki) et la légende.
 * 
 * 📱 STRUCTURE RESPONSIVE DES CHAKRAS:
 * 
 * 1. ÉCRANS LARGES (> 1024px):
 *    - Container: max-width 600px (Arbre) / 700px (Rafiki), height 700px
 *    - Images à 100% du container
 *    - Chakras positionnés individuellement dans tree-mode.js et rafiki-mode.js
 * 
 * 2. ÉCRANS DESKTOP INTERMÉDIAIRES (769px - 1024px):
 *    - Container: width 80%, height 600px
 *    - Images à 95% du container
 *    - Chakras ajustés dynamiquement par rapport au centre dans le code JavaScript
 * 
 * 3. PETITS ÉCRANS DESKTOP (769px - 900px):
 *    - Container: width 75%, height 550px
 *    - Images à 90% du container
 *    - Chakras redimensionnés proportionnellement dans le code JavaScript
 * 
 * 4. MOBILE (≤ 768px):
 *    - Styles complètement différents définis dans les fichiers de script
 *    - Image centrée et chakras positionnés dessus
 * 
 * 🔧 COMMENT MODIFIER:
 * - Pour ajuster les tailles des conteneurs: modifier les valeurs width/height ci-dessous
 * - Pour modifier les positions des chakras: voir les fichiers tree-mode.js et rafiki-mode.js
 */

/* Styles spécifiques pour la version desktop (écrans larges) */
@media only screen and (min-width: 769px) {
    /* Structure globale de la section chakra */
    #chakra-section {
        position: relative;
        height: auto;
        min-height: 1100px; /* Hauteur minimale fixe pour la section entière */
        display: flex;
        flex-direction: column;
        padding-bottom: 50px;
    }

    /* Contrôles du mode d'affichage (boutons de bascule) */
    .display-toggle {
        position: relative;
        margin: 0 auto 40px auto; /* Plus d'espace en bas */
        padding-bottom: 30px; /* Plus de padding en bas */
        width: 100%;
        max-width: 600px;
        text-align: center;
        z-index: 10;
    }

    /* Conteneur principal avec hauteur fixe - élément clé pour maintenir l'espacement */
    .chakra-tree-container {
        position: relative;
        width: 90%; /* Réduit de 100% à 90% pour éviter les débordements */
        max-width: 600px;
        height: 650px !important; /* Hauteur légèrement réduite pour un meilleur contrôle */
        margin: 0 auto 30px auto;
        padding: 0 !important;
        overflow: hidden; /* Changé de visible à hidden pour empêcher le débordement */
    }

    /* Mode Arbre - hauteur fixe pour l'arbre */
    .tree-mode .chakra-tree-container {
        height: 700px !important;
    }

    /* Mode Rafiki - hauteur fixe pour Rafiki */
    .rafiki-mode .chakra-tree-container {
        max-width: 700px;
        height: 700px !important;
    }

    /* Légende des chakras avec position fixe */
    .chakra-legend {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 30px auto 0 auto;
        z-index: 5;
    }

    /* Positionnement des images à l'intérieur du conteneur */
    .chakra-tree, .rafiki-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Styles des images elles-mêmes */
    .tree-img, .rafiki-img {
        max-height: 100%;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    /* Chakras avec position absolue relative au conteneur */
    .chakra {
        position: absolute;
        transform: translate(-50%, -50%);
    }
}

/* Styles pour les écrans de taille moyenne (entre les tablettes et les petits écrans desktop) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .chakra-tree-container {
        width: 80%; /* Encore plus étroit pour les tailles intermédiaires */
        height: 600px !important; /* Hauteur légèrement réduite */
    }
    
    .tree-mode .chakra-tree-container,
    .rafiki-mode .chakra-tree-container {
        height: 600px !important;
    }
    
    /* Amélioration du containment de l'image */
    .tree-img, .rafiki-img {
        max-width: 95%;
        max-height: 95%;
    }
}

/* Ajustements pour les très petits écrans desktop */
@media only screen and (min-width: 769px) and (max-width: 900px) {
    .chakra-tree-container {
        width: 75%; /* Encore plus étroit pour les petits écrans desktop */
        height: 550px !important;
    }
    
    .tree-mode .chakra-tree-container,
    .rafiki-mode .chakra-tree-container {
        height: 550px !important;
    }
    
    /* Amélioration supplémentaire pour assurer le containment */
    .tree-img, .rafiki-img {
        max-width: 90%;
        max-height: 90%;
    }
}