/*
 * RAFIKI-CONTAINER-STYLES.CSS
 * 
 * Ce fichier définit les styles du mode Rafiki - une visualisation alternative des chakras 
 * où ils sont alignés verticalement le long d'une silhouette humaine.
 * 
 * STRUCTURE GÉNÉRALE DU MODE RAFIKI:
 * 1. Un conteneur principal (.rafiki-image) positionné de manière relative
 * 2. Une image de silhouette humaine centrée verticalement et horizontalement
 * 3. Des chakras positionnés par JavaScript, alignés verticalement au centre
 *    (voir fichier rafiki-mode.js pour l'algorithme complet de positionnement)
 */

/* 
 * CONTENEUR DE LA SILHOUETTE RAFIKI
 *
 * Points clés du conteneur:
 * - Position relative pour servir de référence au positionnement absolu des chakras
 * - Débordement visible pour permettre aux chakras de s'étendre au-delà des limites
 * - z-index 4 pour être au-dessus du fond mais sous les chakras (z-index 5+)
 * - Disposition flexible (flex) avec alignement centré pour positionner l'image
 *
 * Note: Le positionnement final des chakras est géré par JavaScript dans rafiki-mode.js
 * qui utilise des pourcentages (top/left) relatifs à ce conteneur.
 */
.rafiki-image {
    position: relative;         /* Point de référence pour les chakras positionnés absolument */
    overflow: visible;          /* Permettre un débordement contrôlé pour les chakras */
    background-color: transparent !important; /* Garantir la transparence du fond */
    z-index: 4;                 /* Niveau intermédiaire entre le fond (1-3) et les chakras (5+) */
    display: flex;              /* Disposition en flexbox pour centrer facilement l'image */
    justify-content: center;    /* Centrage horizontal de l'image */
    align-items: center;        /* Centrage vertical de l'image */
    width: 100%;                /* Prendre toute la largeur du conteneur parent */
    height: 100%;               /* Prendre toute la hauteur du conteneur parent */
    box-sizing: border-box;
}

/* 
 * IMAGE DE LA SILHOUETTE RAFIKI
 *
 * Propriétés principales:
 * - Largeur maximale limitée à 80% pour préserver de l'espace pour les chakras
 * - Hauteur automatique pour conserver les proportions
 * - Isolation pour éviter les interférences avec les chakras superposés
 * - Pas de filtres appliqués pour préserver la visibilité originale
 *
 * Sur mobile, le JavaScript (rafiki-mode.js) ajuste dynamiquement:
 * - La hauteur maximale à 500px pour éviter les problèmes d'échelle
 * - La marge verticale pour un meilleur espacement
 * - L'espacement des chakras pour s'adapter à la taille réduite
 */
.rafiki-image img {
    background-color: transparent !important; /* Garantir la transparence du fond de l'image */
    max-width: 100%;             /* Limiter la largeur pour laisser de l'espace aux chakras */
    height: auto;               /* Hauteur automatique pour préserver les proportions */
    object-fit: contain;        /* Garantir que l'image s'adapte sans déformation */
    mix-blend-mode: normal !important; /* Mode de fusion normal pour éviter des effets indésirables */
    filter: none !important;    /* Supprimer les filtres qui pourraient affecter la visibilité */
    -webkit-filter: none !important; /* Compatibilité avec les navigateurs WebKit */
    isolation: isolate;         /* Créer un nouveau contexte d'empilement pour éviter les interférences */
}

/* 
 * PSEUDO-ÉLÉMENT POUR EFFETS VISUELS (SURVOL)
 *
 * Cet élément ::before sert à ajouter des effets visuels subtils à l'image Rafiki:
 * - Couvre toute la zone de l'image avec position absolue
 * - Utilise z-index -1 pour rester sous l'image elle-même
 * - Fond transparent par défaut, potentiellement modifiable par JavaScript
 *
 * Ce pseudo-élément peut être utilisé pour:
 * - Ajouter un léger effet de lueur ou d'ombre autour de l'image
 * - Créer un effet d'interaction lors du survol (hover)
 * - Ajouter une couche visuelle sans modifier l'image elle-même
 */
.rafiki-image::before {
    content: "";                /* Requis pour que le pseudo-élément s'affiche */
    position: absolute;         /* Positionnement absolu par rapport au conteneur parent */
    top: 0;                     /* Aligné avec le bord supérieur */
    left: 0;                    /* Aligné avec le bord gauche */
    width: 100%;                /* Occupe toute la largeur du conteneur */
    height: 100%;               /* Occupe toute la hauteur du conteneur */
    background-color: transparent; /* Fond transparent par défaut */
    z-index: -1;                /* Placé derrière l'image mais devant le fond de page */
}