/*Animation fondu acceuil*/
.d1{
    width: 100%;
    height: 300px;
    box-shadow: 0px 15px 10px -5px #777;
    background-color: #ededed;
    background-size: contain;
    animation: fondu 15s ease-in-out infinite both;
  }
  .conteneur{
    width: 100%;
    height: 600px;
  }
  .d2[target="Presentationlocaux"]{
    width: 100%;
    height: 600px;
    box-shadow: 0px 0px 10px #777;
    background-color: #EDEDED;
    background-size: contain; /* Meilleur rendu pour les petits écrans */
    background-repeat: no-repeat;
    background-position: center;
    animation: Fondulocaux 20s infinite both;
  }

  @keyframes Fondulocaux{
    0%{background-image: url("imagescss/Presentation_locaux1.JPG");background-repeat: no-repeat;}
    33.33%{background-image: url("imagescss/PresentationLocaux2.JPG");background-repeat: no-repeat;}
    66.67%{background-image: url("imagescss/PresentationLocaux3.JPG");background-repeat: no-repeat;}
    100%{background-image: url("imagescss/VitrineCommemorative.JPG");background-repeat: no-repeat;}
  }

  @media (max-width: 768px) {
    .conteneur {
        height: 400px; /* Réduction de la hauteur pour les petits écrans */
        margin-bottom: 30px;
    }

    .d2[target="Presentationlocaux"] {
        height: 400px;
        background-size: cover; /* Assure un bon ajustement des images */
    }
}

@media (max-width: 480px) {
    .conteneur {
        height: 300px; /* Hauteur encore réduite pour très petits écrans */
        margin-bottom: 20px;
    }

    .d2[target="Presentationlocaux"] {
        height: 300px;
    }
}