#slideshow {
    width: 100%;
    height: 100%;
    max-width: var(--slideshow-max-width);
    max-height: var(--slideshow-max-height);

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
}

/* images de base */
#slideshow img {
    opacity: 0;
    transition: opacity var(--transition-speed) ease-in-out;
}

#slideshow img.active {
    opacity: 1;
}

#live-container[data-mode="qr"] #slideshow {
    opacity: 0;
    pointer-events: none;
}

#live-container[data-mode="playing"] #slideshow {
    opacity: 1;
}

/* photo standard */
.live-photo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;

    border-radius: var(--photo-radius);
    box-shadow: var(--photo-shadow);

    /* 🔥 bordure dynamique */
    border: var(--photo-border-width) var(--photo-border-style) var(--photo-border-color);

    /* 🔥 futur mode cadre */
    padding: var(--photo-padding);
    background: var(--photo-bg);

    will-change: opacity;
}

/* mode stack (pêle-mêle) */
.live-photo.stack {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;

    border-radius: 0;
    border: none;
    padding: 0;
    background: transparent;
}

.qr-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;

    display: flex;
    justify-content: center;
    align-items: center;

    background: radial-gradient(
        circle at center,
        rgba(var(--qr-overlay-color-start), var(--qr-overlay-opacity-start)),
        rgba(var(--qr-overlay-color-end), var(--qr-overlay-opacity-end))
    );

    backdrop-filter: blur(6px);
}

@keyframes qrPulse {
    0% {
        transform: scale(1);
        box-shadow: var(--qr-box-shadow);
    }
    50% {
        transform: scale(1.03);
        box-shadow: var(--qr-box-shadow);
        filter: brightness(1.05);
    }
    100% {
        transform: scale(1);
        box-shadow: var(--qr-box-shadow);
    }
}

.qr-box {
    text-align: center;
    color: var(--qr-text-color);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    padding: 30px 40px;

    background: var(--qr-box-bg);
    border: var(--qr-box-border-width) solid var(--qr-box-border);

    border-radius: var(--qr-box-radius);

    box-shadow: var(--qr-box-shadow);

    animation: qrPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.qr-box::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        to bottom,
        transparent,
        var(--qr-scan),
        transparent
    );

    animation: qrScan 3s ease-in-out infinite;
    will-change: transform;
}

@keyframes qrScan {
    0% {
        transform: translateY(-140%) translateZ(0);
    }
    100% {
        transform: translateY(140%) translateZ(0);
    }
}

.qr-box .wrapperQr {
    width: 260px;
    height: 260px;

    background: white;

    padding: var(--qr-image-padding, 14px);
    border-radius: var(--qr-image-radius, 16px);
    border: var(--qr-image-border-width) var(--qr-image-border-style) var(--qr-image-border-color);

    box-shadow: var(--qr-image-shadow, 0 10px 30px rgba(0,0,0,0.3));

    /* 🔥 CENTRAGE */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateZ(0);

    will-change: transform;
}

.qr-box img {
    width: var(--qr-image-size, 100%);
    height: var(--qr-image-size, 100%);

    object-fit: contain; /* important si tailles variables */

    background: white;
    display: block;
    backface-visibility: hidden;
}

.qr-box h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.qr-box p {
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.9;
}

.live-badge {
    position: absolute;
    top: 8px;
    left: 8px;

    z-index: 5;

    width: clamp(18px, 6%, 42px);
    height: auto;

    pointer-events: none;

    transform: translateZ(0);
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

/* styles */
.live-badge.new {
    background: #00c853;
    color: white;
}

.live-badge.hot {
    background: #ff3d00;
    color: white;
}

.live-badge.heart::before {
    content: "❤️";
}

.live-badge.fade-out {
    opacity: 0;
}

/* animation */
@keyframes pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.fade-wrapper {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    padding:30px;
}

.photo-frame {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
}

/* 👇 IMPORTANT : conteneur relatif pour badge */
.fade-wrapper img {
    display: block;
    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.stack-item {
    position: absolute;
    transform-origin: center center;

    /* 👇 NOUVEAU : devient le "cadre photo" */
    border-radius: var(--photo-radius);
    padding: var(--photo-padding);
    background: var(--photo-bg);
    border: var(--photo-border-width) var(--photo-border-style) var(--photo-border-color);
    box-shadow: var(--photo-shadow);

    overflow: hidden;
}

.stack-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}