/*
 * Styles pour les tooltips
 * Contient les styles pour les tooltips des chakras
 */

/* Style général des tooltips */
.tooltip {
  position: absolute;
  background-color: white;
  color: #333;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  max-width: 250px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  text-align: center;
  z-index: 2147483647 !important; /* Valeur maximale pour s'assurer que les tooltips sont toujours au-dessus */
  border: 2px solid transparent;
}

/* Flèche du tooltip pointant vers le bas */
.tooltip:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid white;
  z-index: 51;
}

/* État visible du tooltip */
.tooltip.visible {
  opacity: 1;
  visibility: visible;
}

/* Styles spécifiques pour les couleurs des tooltips */
.tooltip.red-tooltip { border-color: #F44336; }
.tooltip.orange-tooltip { border-color: #FF9800; }
.tooltip.yellow-tooltip { border-color: #FFEB3B; }
.tooltip.green-tooltip { border-color: #4CAF50; }
.tooltip.blue-tooltip { border-color: #2196F3; }
.tooltip.indigo-tooltip { border-color: #3F51B5; }
.tooltip.violet-tooltip { border-color: #9C27B0; }

/* Flèches colorées pour les tooltips */
.tooltip.red-tooltip:after { border-top-color: #F44336; }
.tooltip.orange-tooltip:after { border-top-color: #FF9800; }
.tooltip.yellow-tooltip:after { border-top-color: #FFEB3B; }
.tooltip.green-tooltip:after { border-top-color: #4CAF50; }
.tooltip.blue-tooltip:after { border-top-color: #2196F3; }
.tooltip.indigo-tooltip:after { border-top-color: #3F51B5; }
.tooltip.violet-tooltip:after { border-top-color: #9C27B0; }

/* Style spécifique pour les tooltips desktop */
.desktop-tooltip {
  z-index: 2147483647 !important; /* S'assurer qu'ils sont toujours au premier plan */
  position: fixed !important;
  pointer-events: auto !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
  border: 2px solid rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* Style pour les tooltips avec flèches */
.tooltip[data-position="right"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: -10px !important;
  margin-top: -10px !important;
  border-width: 10px 10px 10px 0 !important;
  border-style: solid !important;
  border-color: transparent var(--arrow-color, currentColor) transparent transparent !important;
  z-index: 2147483647 !important;
}

.tooltip[data-position="left"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -10px !important;
  margin-top: -10px !important;
  border-width: 10px 0 10px 10px !important;
  border-style: solid !important;
  border-color: transparent transparent transparent var(--arrow-color, currentColor) !important;
  z-index: 2147483647 !important;
}

/* Styles spéciaux pour les tooltips desktop - surcharger les styles mobiles */
.tooltip[data-tooltip-type="desktop"] {
  display: block !important; /* Toujours afficher les tooltips desktop */
  pointer-events: auto !important;
  opacity: 0; /* Par défaut invisible mais présent */
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0.95) !important;
  padding: 15px !important;
  border-radius: 10px !important;
  box-shadow: 0 0 20px 5px rgba(0,0,0,0.3) !important;
  z-index: 2147483647 !important;
}

/* Styles pour les tooltips externes créés en JS */
.desktop-tooltip-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
}

.desktop-tooltip-element {
  position: fixed !important;
  background-color: white !important;
  color: #000 !important;
  padding: 15px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25) !important;
  min-width: 200px !important;
  max-width: 300px !important;
  z-index: 2147483647 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  font-family: Arial, sans-serif !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}

/* Flèches pour les tooltips externes */
.desktop-tooltip-element[data-position="right"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: -12px !important;
  margin-top: -12px !important;
  border-width: 12px 12px 12px 0 !important;
  border-style: solid !important;
  border-color: transparent var(--arrow-color, white) transparent transparent !important;
}

.desktop-tooltip-element[data-position="left"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -12px !important;
  margin-top: -12px !important;
  border-width: 12px 0 12px 12px !important;
  border-style: solid !important;
  border-color: transparent transparent transparent var(--arrow-color, white) !important;
}

/* Styles pour le contenu du tooltip */
.desktop-tooltip-element h4 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #333 !important;
}

.desktop-tooltip-element p {
  margin: 5px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Style spécial pour le tooltip du chakra violet */
.desktop-tooltip-element.violet-chakra-tooltip {
  z-index: 999999999 !important; /* Z-index maximal pour être toujours au premier plan */
  box-shadow: 0 0 25px 8px rgba(128, 0, 128, 0.5) !important; /* Ombre plus visible */
  pointer-events: auto !important;
}

/* Styles pour optimiser l'affichage sur les appareils mobiles */
@media only screen and (max-width: 768px) {
  .tooltip:not([data-tooltip-type="desktop"]) {
    display: none !important; /* Ne pas afficher les tooltips standards sur mobile */
  }
  
  /* Masquer les tooltips externes sur mobile */
  .desktop-tooltip-container {
    display: none !important;
  }
  
  /* Mais toujours permettre l'affichage des tooltips mobiles */
  .mobile-tooltip {
    display: block !important;
  }
}

/* Style spécial pour le tooltip du chakra violet */
.desktop-tooltip-element.violet-chakra-tooltip {
  z-index: 999999999 !important; /* Z-index maximal pour être toujours au premier plan */
  box-shadow: 0 0 25px 8px rgba(128, 0, 128, 0.5) !important; /* Ombre plus visible */
  pointer-events: auto !important;
}


.tooltip {
        position: absolute;
        width: 300px;
        background: rgba(255, 255, 255, 0.98) !important;
        color: #000 !important;
        padding: 15px;
        border-radius: 12px;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: auto;
        z-index: 2147483647 !important; /* z-index maximum possible */
        text-align: left;
        border-left: 4px solid;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.9) !important;
        backdrop-filter: blur(5px);
        will-change: transform, opacity;
        border: 1px solid rgba(0, 0, 0, 0.2);
        transform: translate(-50%, -100%);
        top: -20px;
        left: 50%;
}

@media only screen and (max-width: 768px) {
        .tooltip {
                position: fixed !important;
                width: 85vw !important;
                max-width: 400px !important;
                left: 50% !important;
                top: 40% !important;
                transform: translate(-50%, -50%) !important;
                font-size: 14px !important;
                padding: 20px !important;
                margin: 0 !important;
                height: auto !important;
                max-height: 70vh !important;
                overflow-y: auto !important;
                background: rgba(255, 255, 255, 0.98) !important;
                z-index: 2147483647 !important;
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
                border-radius: 12px !important;
                border: 2px solid var(--main-decor-color) !important;
                pointer-events: auto !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
        }

        .tooltip h4 {
                font-size: 18px !important;
                margin-bottom: 15px !important;
        }

        .tooltip p {
                font-size: 14px !important;
                margin: 10px 0 !important;
                line-height: 1.5 !important;
        }
}

.chakra:hover .tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        z-index: 2147483647 !important; /* z-index maximum possible */
        pointer-events: none;
        position: absolute !important;
        transform: translate(-50%, -120%) !important;
        top: -20px !important;
        left: 50% !important;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
}

/* Styles spécifiques aux infobulles sur mobile */
@media only screen and (max-width: 768px) {
        /* Par défaut, les infobulles sont cachées sur mobile */
        .tooltip {
                display: none !important;
                opacity: 0 !important;
                visibility: hidden !important;
        }
        
        /* Infobulles visibles seulement au click sur mobile */
        .chakra.touched .tooltip {
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                position: fixed !important;
                left: 50% !important;
                top: 50% !important; /* Parfaitement centré verticalement */
                transform: translate(-50%, -50%) !important;
                width: 85% !important;
                max-width: 400px !important;
                max-height: 80vh !important; /* Un peu plus grand pour s'assurer que tout le contenu est visible */
                min-height: fit-content !important;
                height: auto !important;
                overflow-y: auto !important;
                background: rgba(255, 255, 255, 0.98) !important; 
                box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important; 
                padding: 25px !important;
                border-radius: 12px !important;
                z-index: 2147483647 !important; /* Valeur z-index maximale possible pour s'assurer qu'il est au-dessus de tout */
                font-size: 18px !important;
                line-height: 1.7 !important;
                text-align: left !important;
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                opacity: 1 !important;
                border-left: 8px solid !important; 
                border: 3px solid var(--main-decor-color) !important; /* Utiliser la couleur principale du thème */
                background: rgba(255, 255, 255, 1) !important; 
                transform-origin: center !important;
                transition: none !important;
                /* Ajout d'un fond semi-transparent pour assombrir le reste de la page */
                -webkit-backdrop-filter: blur(5px) !important;
                backdrop-filter: blur(5px) !important;
        }
}

        .tooltip h4 {
                font-size: 24px !important;
                margin-bottom: 18px !important;
                text-align: center !important;
                color: var(--main-fonts-color) !important;
                font-weight: bold !important;
                /* Texte plus visible avec ombre */
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        }

        .tooltip p {
                margin: 14px 0 !important;
                font-size: 18px !important;
                color: var(--main-fonts-color) !important;
                /* Meilleure lisibilité */
                line-height: 1.8 !important;
        }
}

.chakra:not(:hover) .tooltip {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important;
        border-left: 4px solid;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        pointer-events: auto !important;
}

.tooltip:hover {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        z-index: 2147483647 !important;
}

.tooltip h4 {
        margin: 0 0 5px;
        font-size: 16px;
}

.tooltip p {
        margin: 5px 0;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}


.chakra:nth-child(1) .tooltip { border-color: #FF0000; color: #333; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px rgba(255, 0, 0, 0.4); }
.chakra:nth-child(2) .tooltip { border-color: #FFA500; color: #333; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px rgba(255, 165, 0, 0.4); }
.chakra:nth-child(3) .tooltip { border-color: #FFFF00; color: #333; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px rgba(255, 255, 0, 0.4); }
.chakra:nth-child(4) .tooltip { border-color: #00FF00; color: #333; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px rgba(0, 255, 0, 0.4); }
.chakra:nth-child(5) .tooltip { border-color: #00FFFF; color: #333; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); }
.chakra:nth-child(6) .tooltip { border-color: #0000FF; color: #333; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px rgba(0, 0, 255, 0.4); }
.chakra:nth-child(7) .tooltip { border-color: #800080; color: #333; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px rgba(128, 0, 128, 0.4); }

/* Animations de typing (effet geek) */