.loader-container {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .loader-container .globe {
    width: 400px;
    height: 400px;
    object-fit: contain;
  }

  .loader-container .loading-text {
    margin-top: 20px;
    color: #000;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
  }



  /* === Animations pour le texte de chargement === */

/* 1. Pulse : fait grossir/rétrécir et changer l'opacité */
@keyframes pulse {
0%, 100% {
  opacity: 1;
  transform: scale(1);
}
50% {
  opacity: 0.6;
  transform: scale(1.05);
}
}

/* 2. Dot : fait défiler les points après le mot */
@keyframes dots {
0%, 100% { content: ''; }
25%       { content: '.'; }
50%       { content: '..'; }
75%       { content: '...'; }
}

.loading-text {
/* conserve ton style existant */
margin-top: 20px;
color: #000;
font-size: 18px;

/* on ajoute la pulsation */
animation: pulse 1.2s ease-in-out infinite;
position: relative;  /* nécessaire pour pseudo-élément */
}

/* Pseudo-élément pour les points animés */
.loading-text::after {
content: '';
/* on positionne les points juste après le mot */
display: inline-block;
width: 1.2em;         /* suffisamment large pour 3 points */
text-align: left;     
animation: dots 2s steps(4,end) infinite;
}