.banner {
    width: 333px;
    height: 135px;
transform: translateX(-50%); /* Centrage horizontal précis */
   margin-left: 166px;
   text-align: center;
   box-sizing: border-box;
   align-items: center;
   overflow: hidden;
   justify-content: center;
   align-items: center;
   display: flex;
   align-content: center;
   text-align: center;
}

.banner img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute; /* Ajouté pour positionner correctement les images */
    top: 0;
    left: 0;
    transition: transform 1s ease-in-out;
}

.banner img.next {
    transform: translateX(100%);
}

.banner img.current {
    transform: translateX(0);
}

@media (min-width: 700px) and (max-width: 899px) {
    /* Zoom: 170% */
    .banner {
      width: 225px;
      height: 70px;
     margin-left: 125px;
     flex-shrink: 0;

  }
  }
  
  @media (min-width: 900px) and (max-width: 1099px) {
    /* Zoom: 150% */
    .banner {
      width: 225px;
      height: 90px;
     margin-left: 125px;
     flex-shrink: 0;

  }
  }
  
  @media (min-width: 1100px) and (max-width: 1199px) {
    /* Zoom: 130% */
    .banner {
        width: 290px;
        height: 95px;
       margin-left: 140px;
       flex-shrink: 0;

    }
  }
  
  @media (min-width: 1200px) and (max-width: 1299px) {
    /* Zoom: 120% */
    .banner {
        width: 300px;
        height: 105px;
       margin-left: 145px;
       flex-shrink: 0;

    }
  }
  
  @media (min-width: 1300px) and (max-width: 1449px) {
    /* Zoom: 110% */
    .banner {
        width: 333px;
        height: 125px;
       margin-left: 166px;
  
    }
    
    
  }
  
  @media (min-width: 1450px) {
    /* Zoom: 100%*/
  }
  
  @media (min-width: 1650px) {
    /*Zoom: 90% */
  }
  
  @media (min-width: 1850px) {
    /*Zoom: 80% */
  }
  
  @media (min-width: 2050px) {
    /*Zoom: 60%*/
  }