/* Le conteneur principal : il définit la zone de travail */
.news-container {
  position: relative;
  width: 80%;
  max-width: 1000px;
  height: 80px;
  margin: 40px auto;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  /*border: 1px solid #ccc;*/
  border: 2px solid #000;
  overflow: hidden; /* Très important pour isoler le contenu */
}

/* Chaque slide : ils sont tous empilés au même endroit */
.news-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* On force l'alignement horizontal interne sans Flexbox traditionnel */
  display: grid;
  grid-template-columns: 100px 1fr; /* 100px pour l'icône, le reste pour le texte */
  align-items: center;
  
  opacity: 0;
  animation: newsFade 36s infinite; /* 3 messages x 3s = 9s */
}

/* Le carré de l'icône */
.news-icon {
  width: 90%;
  height: 100%;
  /*background-color: rgba(219, 240, 245, 0.8);*/
  background-color: rgba(140, 250, 140, 0.8);
  /*background-color: #A1E8F3;
  background-opacity: 0,5;*/ 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  border-right: 1px solid rgba(0,0,0,0.1);
  border-radius: 0 15px 15px 0;
  border: 1px solid #000;
}

/* La zone de texte */
.news-text {
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.7rem;
  color: #333;
}

/* Animation de transition */
@keyframes newsFade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  15% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

/* Délais (pour 3 messages) */
.n1 { animation-delay: 0s; }
.n2 { animation-delay: 6s; }
.n3 { animation-delay: 12s; }
.n4 { animation-delay: 18s; }
.n5 { animation-delay: 24s; }
.n6 { animation-delay: 30s; }

/* Correction pour Tablettes et Mobiles */
@media (max-width: 992px) {
  .news-container { width: 95%; height: 80px; }
  .news-slide { grid-template-columns: 70px 1fr; }
  .news-icon { font-size: 1.8rem; }
  .news-text { font-size: 0.9rem; padding: 0 10px; }
}