/* Clone 3D Overflow — coverflow repeater (d2d6d3ed) */
.c3o-container-d2d6d3ed { width: 100%; overflow: hidden; padding: 40px 0 20px; }

/* Stage */
.c3o-stage-d2d6d3ed {
    position: relative;
    height: 440px;
    perspective: 1400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 26px;
}

/* Slide (positionné/transformé, overflow visible pour le logo) */
.c3o-slide-d2d6d3ed {
    position: absolute;
    width: 300px;
    height: 400px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.4,0,.2,1), opacity 0.55s cubic-bezier(.4,0,.2,1), z-index 0s 0.28s;
    will-change: transform, opacity;
}
.c3o-slide-inner-d2d6d3ed {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.c3o-overlay-d2d6d3ed {
    position: absolute; inset: 0; z-index: 1;
    background-color: rgba(0,0,0,0.45);
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: 14px;
}
/* Badge */
.c3o-badge-d2d6d3ed {
    position: absolute; top: 15px; right: 15px; z-index: 2;
    padding: 6px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    border-radius: 20px; letter-spacing: 0.6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none;
}
/* Logo qui déborde (au-dessus de la carte) */
.c3o-logo-d2d6d3ed {
    position: absolute; top: -26px; left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
    pointer-events: none;
}
.c3o-logo-d2d6d3ed img { width: 100%; height: 100%; object-fit: contain; }
.c3o-logo-d2d6d3ed i, .c3o-logo-d2d6d3ed svg { color: #ffffff; fill: #ffffff; }

/* Positions coverflow */
.c3o-slide-d2d6d3ed.c3o-pos-0 {
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1) !important;
    opacity: 1 !important;
    z-index: 10 !important;
    pointer-events: auto;
}
.c3o-slide-d2d6d3ed.c3o-pos-0 .c3o-overlay-d2d6d3ed { opacity: 0 !important; }
.c3o-slide-d2d6d3ed.c3o-side {
    transform: translateX(var(--c3o-tx,0)) translateZ(var(--c3o-tz,0)) rotateY(var(--c3o-ry,0deg)) scale(var(--c3o-sc,0.85));
    opacity: var(--c3o-op, 0.7);
    z-index: var(--c3o-zi, 1);
    pointer-events: auto;
}
.c3o-slide-d2d6d3ed.c3o-side .c3o-overlay-d2d6d3ed { opacity: 1 !important; }
.c3o-slide-d2d6d3ed.c3o-hidden {
    transform: translateX(var(--c3o-tx,0)) translateZ(-600px) rotateY(var(--c3o-ry,0deg)) scale(0.6);
    opacity: 0; z-index: 0; pointer-events: none;
}

/* Infos (item actif) */
.c3o-info-d2d6d3ed { text-align: center; max-width: 860px; margin: 0 auto 18px; padding: 0 15px; }
.c3o-subtitle-d2d6d3ed { display: block; color: #3b82f6; font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; margin-bottom: 6px; }
.c3o-title-d2d6d3ed { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #1e293b; }
.c3o-desc-d2d6d3ed { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #555; }
.c3o-btn-d2d6d3ed {
    display: inline-block; padding: 11px 24px; background-color: #ffffff; color: #1e293b;
    border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12); transition: background-color 0.2s, transform 0.2s;
}
.c3o-btn-d2d6d3ed:hover { transform: translateY(-2px); }

/* Barre de progression (nav) */
.c3o-progress-d2d6d3ed { display: flex; justify-content: center; align-items: center; gap: 10px; }
.c3o-bar-d2d6d3ed {
    position: relative; width: 46px; height: 5px; border-radius: 5px;
    background-color: rgba(0,0,0,0.12); border: none; padding: 0; cursor: pointer; overflow: hidden;
    transition: width 0.3s ease;
}
.c3o-bar-fill-d2d6d3ed { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background-color: #3b82f6; }
.c3o-bar-d2d6d3ed.is-active { width: 64px; }

/* Sous 1024px : on masque description et badge */
@media (max-width: 1024px) {
    .c3o-desc-d2d6d3ed { display: none !important; }
    .c3o-badge-d2d6d3ed { display: none !important; }
}

/* Responsive : peek des cartes voisines */
@media (min-width: 768px) and (max-width: 1024px) {
    .c3o-stage-d2d6d3ed { height: 380px; }
    .c3o-slide-d2d6d3ed { width: 260px; height: 360px; }
    .c3o-slide-d2d6d3ed.c3o-side {
        transform: translateX(calc(var(--c3o-tx,0) * 0.75)) translateZ(calc(var(--c3o-tz,0) * 1.2)) rotateY(var(--c3o-ry,0deg)) scale(calc(var(--c3o-sc,0.85) * 0.9)) !important;
    }
}
@media (max-width: 767px) {
    .c3o-stage-d2d6d3ed { height: 340px; }
    .c3o-slide-d2d6d3ed { width: 220px; height: 300px; }
    .c3o-slide-d2d6d3ed.c3o-side {
        transform: translateX(calc(var(--c3o-tx,0) * 0.5)) translateZ(calc(var(--c3o-tz,0) * 1.5)) rotateY(calc(var(--c3o-ry,0deg) * 0.7)) scale(calc(var(--c3o-sc,0.85) * 0.85)) !important;
        opacity: 0.5 !important;
    }
    .c3o-logo-d2d6d3ed { width: 56px; height: 56px; top: -20px; }
    .c3o-title-d2d6d3ed { font-size: 19px; }
    .c3o-desc-d2d6d3ed { font-size: 13px; }
}