/* Web4WP Carousel Cercle — à la une, formats préservés */

.web4wp-ccc-outer {
    touch-action: manipulation;
    overflow: visible;
    -webkit-perspective: 2800px;
    perspective: 2800px;
    -webkit-perspective-origin: 50% 45%;
    perspective-origin: 50% 45%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    padding-left: 0;
    padding-right: 0;
    /*margin: 2.5em auto;*/
	margin: 0.5em auto -3em auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
}

/* Téléphone : pas de marge latérale imposée par le widget (aligné avec le JS, breakpoint <576px). */
@media (max-width: 575px) {
    .web4wp-ccc-outer {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }

    .web4wp-ccc-drag.web4wp-ccc-drag--tel {
        margin: 20px auto;
    }
}

.web4wp-ccc-outer.web4wp-ccc-outer--solid {
    background-color: var(--w4cc-c1, transparent) !important;
    background-image: none !important;
}

.web4wp-ccc-drag {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
    /* Resserre la boîte sur le carrousel (évite une « bande » vide pleine largeur). */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 80px auto 0;
    padding: 0;
    overflow: visible;
}

.web4wp-ccc-spin {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-sizing: border-box;
    padding: 0;
    overflow: visible;
}

.web4wp-ccc-spin .web4wp-ccc-face {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: visible;
    background: var(--w4cc-face-bg, rgba(255, 255, 255, 0.06));
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    -webkit-box-reflect: below 2px linear-gradient(to bottom, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.06) 85%, rgba(0, 0, 0, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-image: linear-gradient(145deg, #a8aeb6 0%, #d5d9df 55%, #ffffff 100%) 1;
}

.web4wp-ccc-spin .web4wp-ccc-face.web4wp-ccc-face--nolink {
    cursor: default;
}

.web4wp-ccc-spin .web4wp-ccc-face.web4wp-ccc-face--empty {
    pointer-events: none;
}

/* Masqué côté JS selon la largeur (nombre max par media query). */
.web4wp-ccc-spin .web4wp-ccc-face.web4wp-ccc-face--hidden-responsive {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.web4wp-ccc-outer.web4wp-ccc-outer--noborder .web4wp-ccc-spin .web4wp-ccc-face {
    border: none;
    border-image: none;
}

.web4wp-ccc-spin .web4wp-ccc-face-half {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

.web4wp-ccc-spin .web4wp-ccc-face-half--front {
    -webkit-transform: rotateY(0deg) translateZ(1px);
    transform: rotateY(0deg) translateZ(1px);
}

.web4wp-ccc-spin .web4wp-ccc-face-half--back {
    -webkit-transform: rotateY(180deg) translateZ(1px);
    transform: rotateY(180deg) translateZ(1px);
}

.web4wp-ccc-spin .web4wp-ccc-face-half img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    -webkit-box-reflect: none;
    object-fit: contain;
    object-position: center center;
    vertical-align: middle;
    background: transparent;
}

.web4wp-ccc-spin .web4wp-ccc-face:hover {
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    -webkit-box-reflect: below 2px linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.08) 90%, rgba(0, 0, 0, 0.12) 100%);
}

.web4wp-ccc-ground {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    background: radial-gradient(circle at center, farthest-side, rgba(200, 204, 210, 0.14), transparent);
}

@-webkit-keyframes web4wp-ccc-spin {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes web4wp-ccc-spin {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@-webkit-keyframes web4wp-ccc-spin-revert {
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes web4wp-ccc-spin-revert {
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}