/* COULEURS */
@import "colors.css";

#loader {
  width: 120px;
  aspect-ratio: 1;
  border: 15px solid var(--blanc);
  border-radius: 50%;
  position: relative;
  transform: rotate(45deg);

  /* Styles pour centrer le loader */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Texte ajouté via un pseudo-élément */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#loader::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 15px solid #417690;
  animation: l18 2s infinite linear;
}
@keyframes l18 {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}


#loader::after {
  content: "Extraction, Transformation, Chargement"; /* Texte sous la sphère */
  margin-top: 15px;
  position: absolute;
  top: 120%; /* Place le texte sous le loader */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  pointer-events: none; /* Évite d'interférer avec le clic */

  /* Style de base pour tous les écrans */
  white-space: normal; /* Permet les retours à la ligne */
  text-align: center;  
}

/* Pour les grands écrans (min-width 768px) */
@media (min-width: 768px) {
  #loader::after {
    white-space: nowrap; /* Supprime les retours à la ligne */
  }
}

@keyframes l9 {
  33%  { background-position: 0% 33%, 100% 33%, 200% 33%; }
  66%  { background-position: -100% 66%, 0% 66%, 100% 66%; }
  100% { background-position: 0% 100%, 100% 100%, 200% 100%; }
}


/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
}