/* point ring removed — sizes are fixed below */

.cercle-points-wrapper {
    position: relative;
    /* expose sizing variables so JS can read them and compute positions precisely */
    /* fixed sizes (replacing CSS variables) */
    width: 430px;
    height: 430px;
    overflow: visible;
}

.cercle-points-wrapper .cercle-points-circle {
    width: 100%;
    height: 100%;
    border: 3px solid var(--e-global-color-secondary);
    border-radius: 50%;
    box-sizing: border-box;
    background: transparent;
    z-index: 1;
}

.cercle-points-wrapper .cercle-center-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    padding: 8px;
    max-width: 60%;
}

.cercle-points-wrapper .cercle-center-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.cercle-points-wrapper .cercle-center-body {
    font-size: 1.2rem;
}

.cercle-points-wrapper .cercle-point {
    position: absolute;
    box-sizing: border-box;
    z-index: 3;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    /* make background transparent so images aren't visually cropped by a white fill */
    background: #fff;
    padding: 21px;
    /* make the point itself a circular frame (increased to enlarge visible image) */
    width: 86px;
    height: 86px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cercle-points-wrapper .cercle-point img {
    /* make the image fill the circular frame but keep full image visible */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 0;
    background-color: transparent;
}

.cercle-points-wrapper .cercle-point.active,
.cercle-points-wrapper .cercle-point.hover,
.cercle-points-wrapper .cercle-point:hover {
    background: var(--e-global-color-accent);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

/* Safety overrides (do not disable clipping) */
.cercle-points-wrapper .cercle-point {
    /* keep clipping so the circular frame hides image overflow */
    z-index: 9999;
    background-color: #fff;
}

.cercle-points-wrapper .cercle-point img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 0;
    background-color: transparent;
    object-fit: contain;
}

/* Ensure images inside points use the configured CSS variable size
   even if the editor added width/height attributes on the <img> element. */
.cercle-points-wrapper .cercle-point img[src] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 0;
    background-color: transparent;
    object-fit: contain;
}

/* Extra safety: ensure the circle itself doesn't create a new stacking context that clips children */
.cercle-points-wrapper .cercle-points-circle {
    z-index: 1;
    position: relative;
}

/* garantir la taille de l'image du point 1 */
.cercle-points-wrapper .cercle-point[data-index="1"] img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 0;
    background-color: transparent;
    object-fit: contain;
}

/* Debug helper (temporary): uncomment to add a visible outline around the wrapper
.cercle-points-wrapper { outline: 2px dashed rgba(255,0,0,.25); } */

.cercle-points-wrapper-mobile {
    width: 100%;
}

.cercle-center-text-mobile {
    margin-bottom: 12px;
    text-align: left;
    display: none;
}


.cercle-center-title-mobile {
    margin: 0;
    font-size: 18px;
}

.cercle-center-body-mobile {
    margin: 4px 0 0;
    color: #555;
    font-size: 14px;
}

.cercle-items-grid-mobile {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.cercle-item-mobile {
    box-sizing: border-box;
    width: 50%;
    /* deux colonnes */
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.cercle-item-image-mobile {
    width: 40%;
    max-width: 100px;
}

.cercle-item-image-mobile img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.cercle-item-image-fallback-mobile {
    width: 100%;
    height: 80px;
}

.cercle-item-content-mobile {
    width: 60%;
    padding-left: 12px;
}


/* Petit ajustement pour écrans très petits : basculer en ligne unique pour chaque item */
@media (max-width: 420px) {
    .cercle-item-mobile {
        width: 100%;
    }

    .cercle-item-content-mobile {
        width: 100%;
        margin-right: 40px;
    }

    .cercle-item-image-mobile {
        width: 40px;
    }

    .cercle-item-content-mobile {
        margin-top: 0;
    }

    .cercle-item-image-mobile img {
        width: 40px;
        height: 40px;
        display: block;
        object-fit: contain;
        margin-top: 10px;
    }
}