.conteneur {
    width: 100%;
    height: 600px;
    margin-bottom: 50px;
}

.d3[target="ImagePatEcr"] {
    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: FonduPatEcr 20s infinite both;
}

@keyframes FonduPatEcr {
0% { background-image: url("imagescss/PatEcr1.png"); background-repeat: no-repeat;}
14.2% { background-image: url("imagescss/PatEcr2.JPG"); background-repeat: no-repeat;}
28.4% { background-image: url("imagescss/PatEcr3.JPG"); background-repeat: no-repeat;}
42.6% { background-image: url("imagescss/PatEcr4.png"); background-repeat: no-repeat;}
56.8% { background-image: url("imagescss/PatEcr5.JPG"); background-repeat: no-repeat;}
71% { background-image: url("imagescss/PatEcr6.jpg"); background-repeat: no-repeat;}
85.2% { background-image: url("imagescss/PatEcr7.jpg"); background-repeat: no-repeat;}
100% { background-image: url("imagescss/PatEcr8.JPG"); background-repeat: no-repeat;}
}

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

    .d3[target="ImagePatEcr"] {
        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;
    }

    .d3[target="ImagePatEcr"] {
        height: 300px;
    }
}