#globalLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Désactive toutes les barres de défilement */
  background-color: #141414;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-out;
  opacity: 1; /* Opacité pleine au départ */
  pointer-events: auto; /* Actif au départ */
}

#globalLoader.hidden {
  opacity: 0; /* Transition de fondu */
  pointer-events: none; /* Empêche l'interaction après le fondu */
}

#globalLoader > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#globalLoader > div > div {
  display: flex; /* Alignement côte à côte pour Vivid et Mind */
  gap: 0px; /* Espace entre Vivid et Mind */
}

.vivid,
.mind {
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif, Arial;
  font-size: 5rem; /* Ajuster la taille selon les besoins */
}

.vivid {
  color: white;
}

.mind {
  color: #1ed760 !important;
}

#errorMessage {
  color: red !important;
  text-align: center;
  margin-top: 10px;
  font-size: 1.2rem;
  display: block; /* Assure que le message d'erreur est visible */
}

.animate {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: auto;
  font-family: Helvetica, sans-serif, Arial;
  animation: load 1.2s infinite 0s ease-in-out;
  animation-direction: alternate;
  text-shadow: 0 0 1px white;
}

/* Animation plus fluide */
@keyframes load {
  0% {
    opacity: 0.08;
    filter: blur(5px);
    letter-spacing: 3px;
  }
  100% {
  }
}

/* Media queries pour rendre le globalLoader responsive */

/* Écrans larges (ordinateurs de bureau) */
@media (min-width: 1024px) {
  .animate {
    font-size: 8rem;
  }
}

/* Écrans moyens (tablettes) */
@media (min-width: 768px) and (max-width: 1023px) {
  .animate {
    font-size: 5rem;
  }
}

/* Petits écrans (smartphones en orientation portrait) */
@media (max-width: 767px) {
  .animate {
    font-size: 3rem;
  }
}

/* Très petits écrans (smartphones en orientation paysage) */
@media (max-width: 480px) {
  .animate {
    font-size: 2.5rem;
  }
}