.mpec-circle-container-wrapper {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

.mpec-circle-container {
    position: relative;
    width: 100%;
    height: auto; /* La hauteur sera définie par JavaScript */
    margin-top: 20px;
}

.mpec-circle-element {
    position: absolute;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 0;
}

.mpec-circle-element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Ajout de media queries pour adapter le widget sur différents appareils */
@media (max-width: 768px) {
    .mpec-circle-container {
        /* La hauteur sera calculée par JavaScript, donc nous n'avons pas besoin de padding-bottom ici */
    }
}

@media (max-width: 480px) {
    .mpec-circle-container {
        /* La hauteur sera calculée par JavaScript */
    }
}