
.mySlides {
      display: none;
      }
.mySlides a{
    color: #fff;
}
     .mySlides img {
      vertical-align: middle;
      width: 100%;
      height: 260px;
      object-fit: cover;
      border-radius: 4px;
      }
      
      /* Slideshow container */
      .slideshow-container {
           background:#fff;
           box-shadow: var(--box-shadow);
           background-size:contain;
           margin: 6px auto;
           position: relative;
           border-radius: 4px;
           word-wrap:break-word;
           word-spacing: 0.05em;
           width: 98%;
      
      }
      
      /* Caption text */
      .text {
      color: fff;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 60px;
      left: 0;
      width: 100%;
      text-align: left;
      z-index: 1;
      }
      
      /* Number text (1/3 etc) */
      .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
      }
      
      /* The dots/bullets/indicators */
      .cont-dot{
        position: absolute;
        top: 90%;
        left: 43%;
        transform: tranlate(-50%, -50%);
      }
      .dot {
      height: 10px;
      width: 10px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
      }
      
      .active {
      background-color: #0080ff;
      }
      
      /* Fading animation */
      .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
      transition: 1.5s;
      }
      
      @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      
      @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      
      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
      .text {font-size: 11px}
      }
      
      
       .breaking-news {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e6e6e6;
            border-radius: 6px;
            color: white;
            padding: 0px;
            width: 98%;
            margin: 0 auto;
            z-index: 10;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
            overflow: hidden; /* Cache le contenu qui déborde */
        }

        .breaking-news .label {
            font-weight: bold;
            margin-right: 15px;
            background-color: #d32f2f;
            padding: 18px 10px;
            white-space: nowrap; /* Empêche le retour à la ligne */
        }

        .breaking-news .title-container {
            display: flex;
            white-space: nowrap;
            overflow: hidden;
            flex-grow: 1;
        }

        .breaking-news .title-list {
            display: flex;
            animation: scroll 50s linear infinite; /* Animation pour défilement horizontal */
        }

        .breaking-news .title-item {
            margin-right: 50px;
            color: #000;
            font-size: 16px;
        }

        /* Animation pour le défilement horizontal */
        @keyframes scroll {
            0% {
                transform: translateX(100%); /* Départ à droite */
            }
            100% {
                transform: translateX(-100%); /* Fin à gauche */
            }
        }

        .loading {
            color: gray;
            font-style: italic;
        }