/*
 * Styles spécifiques pour mobile
 * Contient les styles responsives pour les appareils mobiles
 */

@media only screen and (max-width: 768px) {
  /* Ajustements généraux pour mobile */
  body {
    padding: 0;
  }

  .intro {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 5px !important;
  }

  .intro p {
    width: 95% !important;
    max-width: 95% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }

  /* Ajustements pour la photo de profil sur mobile */
  .profile-picture {
    width: 180px !important;
    height: 180px !important;
    display: block !important;
    margin: 20px auto !important;
    position: relative;
    z-index: 2;
    border: 4px solid var(--main-decor-color);
    visibility: visible !important;
    border-radius: 50%;
    overflow: hidden;
  }

  .profile-picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    aspect-ratio: 1/1;
    object-position: center center !important;
    border-radius: 50% !important;
  }

  .typing-effect {
    width: 95% !important;
    max-width: 95% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Ajustements pour les titres sur mobile */
  #chakra-section h3,
  #projects h3,
  section h3 {
    font-size: 24px;
    padding: 0 15px;
    word-wrap: break-word;
    white-space: normal;
    margin: 10px auto;
    max-width: 100%;
    text-align: center;
  }

  /* 
   * CONFIGURATION DU CONTENEUR DES CHAKRAS (VERSION MOBILE)
   *
   * Sur mobile, la disposition des chakras est adaptée pour :
   * 1. Prendre moins d'espace vertical (min-height réduite)
   * 2. Permettre un affichage plus compact
   * 3. Améliorer la visibilité sur petits écrans
   */
  .chakra-container {
    padding: 10px;
    height: auto; /* Hauteur automatique pour s'adapter au contenu */
    min-height: 500px; /* Hauteur minimale pour assurer visibilité de l'arbre */
  }

  /* 
   * ADAPTATIONS DE LA SECTION DES CHAKRAS
   *
   * La disposition passe d'horizontale (desktop) à verticale (mobile) :
   * - Organisation en colonne pour faciliter le défilement vertical
   * - Éléments empilés pour meilleure utilisation de l'espace limité
   */
  .chakra-section {
    flex-direction: column;
  }

  /* 
   * TAILLE ET APPARENCE DES CHAKRAS SUR MOBILE
   *
   * Les chakras sont réduits à 40px (contre 50px sur desktop), ce qui :
   * - Permet un meilleur affichage sur petits écrans
   * - Facilite le toucher sans être trop petit
   * - Maintient une bonne visibilité de la couleur et des effets
   *
   * Remarque : Le Javascript dans tree-mode.js utilise 30px pour les chakras en mode mobile.
   * Cette légère différence est intentionnelle car les chakras sont restyilisés dynamiquement.
   */
  .chakra {
    width: 40px;
    height: 40px;
  }

  /* 
   * POSITIONNEMENT DE LA LÉGENDE SUR MOBILE
   *
   * La légende est positionnée différemment sur mobile :
   * - Placée en bas de la section (ordre 2 dans flexbox)
   * - Grande marge supérieure (800px) pour céder l'espace à l'arbre
   * - Largeur réduite (90%, max 300px) pour s'adapter aux écrans étroits
   * - Préservation des marges pour assurer la lisibilité
   */
  .chakra-legend {
    margin-top: 800px; /* Grande marge pour laisser l'arbre s'afficher au-dessus */
    margin-bottom: 50px; /* Marge inférieure pour espacement en bas de page */
    width: 90%; /* Largeur relative pour s'adapter aux différentes largeurs d'écran */
    max-width: 300px; /* Largeur maximale pour maintenir la lisibilité */
    order: 2; /* Force la légende à apparaître après l'arbre dans le flux vertical */
  }

  /* 
   * CONFIGURATION DU CONTENEUR DE L'ARBRE SUR MOBILE
   *
   * L'arbre est positionné stratégiquement :
   * - Placé avant la légende (ordre 1 dans flexbox)
   * - Marge négative pour optimiser l'espace vertical
   * - Cette technique permet de superposer visuellement les éléments
   *   tout en maintenant une structure HTML sémantique
   */
  .chakra-tree-container {
    order: 1; /* Affichage avant la légende dans le flux vertical */
    margin-bottom: -700px; /* Compensation négative pour réduire l'espace vertical total */
  }

  /* Ajustements pour le modal des tooltips mobile */
  #mobile-tooltip-modal {
    font-size: 14px;
  }

  #mobile-tooltip-content {
    padding: 15px;
  }

  /* Styles pour le menu mobile */
  .mobile-menu {
    display: block;
  }

  .desktop-nav {
    display: none;
  }

  /* Styles pour le profil mobile */
  .profile-section {
    text-align: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0 0px 0px 0;
    z-index: 1000;
  }

  /* 
   * SYSTÈME DE Z-INDEX SUR MOBILE - GESTION DES COUCHES VISUELLES
   *
   * La gestion des z-index est critique pour le bon affichage des chakras sur mobile.
   * Le système est organisé en couches hiérarchiques selon l'importance visuelle.
   *
   * Voici l'ordre des couches (de l'arrière-plan vers l'avant-plan) :
   * 1. Arrière-plans (z-index: 1) - Images de fond (arbre, rafiki)
   * 2. Chakras standard (z-index: 5) - La majorité des chakras
   * 3. Chakra violet (z-index: 3) - Exception avec un z-index plus bas sur mobile
   * 4. Légende (z-index: 10) - Au-dessus des chakras pour être lisible
   * 5. Tooltips modal (z-index: 100) - Toujours au premier plan quand actif
   */
  
  /* Arrière-plans graphiques - Niveau le plus bas */
  .chakra-rafiki, .chakra-tree {
    z-index: 1; /* Couche de fond - Sous tous les autres éléments */
  }

  /* Chakras standards - Niveau intermédiaire */
  .chakra {
    z-index: 5; /* Au-dessus des arrière-plans mais sous les éléments UI */
  }

  /* Cas particulier du chakra violet (couronne) sur mobile */
  .chakra.violet {
    z-index: 3 !important; /* Légèrement plus bas que les autres chakras sur mobile
                             * pour éviter des problèmes de superposition avec la navigation.
                             * Sur desktop, ce chakra a un z-index beaucoup plus élevé (9999).
                             */
  }
  
  /* Légende des chakras - Niveau supérieur aux chakras */
  .chakra-legend {
    z-index: 10; /* Au-dessus des chakras pour assurer sa lisibilité
                  * mais sous les tooltips pour ne pas bloquer leur affichage
                  */
  }

  /* Modal des tooltips - Niveau le plus élevé */
  #mobile-tooltip-modal {
    z-index: 100; /* Au premier plan absolu - Rien ne doit apparaître par-dessus
                   * quand un tooltip est actif, garantissant une expérience
                   * utilisateur optimale sur mobile
                   */
  }
}