/* Conteneur principal */
.message-slider {
  width: 50%;           /* 50% de la largeur de l'écran */
  margin: 40px auto;    /* Centré horizontalement */
  height: 70px;        /* Hauteur fixe pour éviter les sauts de mise en page */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  /*background-color: #f8f9fa; /* Fond léger pour le pavé */
}

/* Style commun à tous les messages */
.msg-slide {
  position: absolute;
  width: 100%;
  opacity: 0;           /* Caché par défaut */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Ta police globale */
  font-size: 1.7rem;    /* Taille de la police adaptée */
  font-weight: bold;
  animation: slideAnimation 30s infinite; /* = durée totale du cycle */
}

/* --- Configuration spécifique par message --- */

/* Message 1 */
.msg-1 { 
  color: #2c3e50; 
  animation-delay: 0s; 
}

/* Message 2 */
.msg-2 { 
  color: #e74c3c; /* Rouge */
  animation-delay: 6s; 
}

/* Message 3 */
.msg-3 { 
  color: #27ae60; /* Vert */
  animation-delay: 12s; 
}

/* Message 4 */
.msg-4 { 
  color: #2980b9; /* Bleu */
  animation-delay: 18s; 
}
/* Message 5 */
.msg-5 { 
  color: #27ae60; /* Vert */
  animation-delay: 24s; 
}
/* L'animation de succession (Opacité) */
@keyframes slideAnimation {
  0% { opacity: 0; }
  5% { opacity: 1; }  /* Apparition rapide */
  20% { opacity: 1; } /* Reste visible */
  25% { opacity: 0; } /* Disparition */
  100% { opacity: 0; }
}

/* Adaptabilité Smartphone */
@media (max-width: 768px) {
  .message-slider {
    width: 90%; /* Prend plus de place sur petit écran */
    font-size: 1.1rem;
  }
}