/* Zone pêle-mêle avec badges. */

.wp-block-columns:has(.zone-pele-mele-badges) {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
}

.wp-block-columns:has(.zone-pele-mele-badges) > .wp-block-column:has(.zone-pele-mele-badges) {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 1;
}

.zone-pele-mele-badges {
    position: relative !important;
    width: 350px !important;
    height: 400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.zone-pele-mele-badges .wp-block-group__inner-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html:not(:has(.is-root-container)) .wp-block-columns:has(.zone-pele-mele-badges) > .wp-block-column:not(:has(.zone-pele-mele-badges)) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.wp-block-columns:has(.zone-pele-mele-badges) > .wp-block-column:not(:has(.zone-pele-mele-badges)) {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    min-width: 0;
    box-sizing: border-box;
    z-index: 2;
}

.wp-block-columns:has(.zone-pele-mele-badges) > .wp-block-column:not(:has(.zone-pele-mele-badges)):first-child {
    padding: 0 0 0 6% !important;
}

.wp-block-columns:has(.zone-pele-mele-badges) > .wp-block-column:not(:has(.zone-pele-mele-badges)):last-child {
    padding: 0 6% 0 0 !important;
}

.zone-pele-mele-badges .wp-block-image {
    position: absolute !important;
    margin: 0 !important;
    border-radius: var(--site-image-border-radius, 8px) !important;
    box-shadow: var(--card-shadow, 0 10px 25px rgba(0,0,0,0.12)) !important;
    transition: transform 0.25s ease, z-index 0.2s ease, box-shadow 0.25s ease !important;
}

.zone-pele-mele-badges .wp-block-image:nth-of-type(1) {
    top: 3.75%;
    right: 2%;
    width: 71.43%;
    aspect-ratio: 4 / 3;
    transform: rotate(10deg);
    z-index: 1;
}

.zone-pele-mele-badges .wp-block-image:nth-of-type(1) img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

.zone-pele-mele-badges .wp-block-image:nth-of-type(2) {
    bottom: 5.25%;
    left: 2%;
    width: 57.14%;
    aspect-ratio: 3 / 4;
    transform: rotate(-10deg);
    z-index: 3;
}

.zone-pele-mele-badges .wp-block-image:nth-of-type(2) img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

.zone-pele-mele-badges .wp-block-image:nth-of-type(3) {
    top: 3.75%;
    left: 7.14%;
    width: 115px !important;
    height: 115px !important;
    aspect-ratio: 1 / 1 !important;
    z-index: 4;
    transform: none !important;
    border-radius: 50% !important;
    box-sizing: border-box;
}

.zone-pele-mele-badges .wp-block-image:nth-of-type(4) {
    bottom: 11.25%;
    right: 15.71%;
    width: 115px !important;
    height: 115px !important;
    aspect-ratio: 1 / 1 !important;
    z-index: 4;
    transform: none !important;
    border-radius: 50% !important;
    box-sizing: border-box;
}

.zone-pele-mele-badges .wp-block-image:nth-of-type(3) img,
.zone-pele-mele-badges .wp-block-image:nth-of-type(4) img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 50% !important;
}

.zone-pele-mele-badges .wp-block-image:hover {
    transform: scale(1.05) !important;
    box-shadow: var(--card-shadow-hover, 0 15px 35px rgba(0,0,0,0.2)) !important;
}

@media (max-width: 767px) {
    .wp-block-columns:has(.zone-pele-mele-badges) {
        flex-direction: column !important;
    }

    .wp-block-columns:has(.zone-pele-mele-badges) > .wp-block-column:not(:has(.zone-pele-mele-badges)) {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .wp-block-columns:has(.zone-pele-mele-badges) > .wp-block-column:has(.zone-pele-mele-badges) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .zone-pele-mele-badges .wp-block-group__inner-container {
        display: block !important;
        position: relative !important;
    }

    .zone-pele-mele-badges .wp-block-image:nth-of-type(1) {
        right: 0%;
    }

    .zone-pele-mele-badges .wp-block-image:nth-of-type(2) {
        left: 0%;
    }

    .zone-pele-mele-badges {
        transform: scale(0.95) !important;
        transform-origin: center center !important;
    }
}

html:not(:has(.is-root-container)) .zone-pele-mele-badges .wp-block-image:has(img[src*="placeholder"]),
html:not(:has(.is-root-container)) .zone-pele-mele-badges .wp-block-image:not(:has(img)) {
    display: none !important;
}