/* ===== Block: Video Autoplay ===== */

.block-video-autoplay {
    width: 100%;
    margin: 0 auto;
}

/* ── Largeurs max ── */
.video-autoplay--width-full .video-autoplay__wrapper {
    max-width: 100%;
}

.video-autoplay--width-1200 .video-autoplay__wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.video-autoplay--width-960 .video-autoplay__wrapper {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.video-autoplay--width-800 .video-autoplay__wrapper {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.video-autoplay--width-640 .video-autoplay__wrapper {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Wrapper avec ratio responsive ── */
.video-autoplay__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Ratios */
.video-autoplay--ratio-16-9 .video-autoplay__wrapper {
    padding-bottom: 56.25%; /* 9/16 */
}

.video-autoplay--ratio-4-3 .video-autoplay__wrapper {
    padding-bottom: 75%; /* 3/4 */
}

.video-autoplay--ratio-21-9 .video-autoplay__wrapper {
    padding-bottom: 42.857%; /* 9/21 */
}

.video-autoplay--ratio-1-1 .video-autoplay__wrapper {
    padding-bottom: 100%;
}

.video-autoplay--ratio-9-16 .video-autoplay__wrapper {
    padding-bottom: 177.78%; /* 16/9 */
}

/* ── Coins arrondis ── */
.video-autoplay--radius-none .video-autoplay__wrapper {
    border-radius: 0;
}

.video-autoplay--radius-small .video-autoplay__wrapper {
    border-radius: 8px;
}

.video-autoplay--radius-medium .video-autoplay__wrapper {
    border-radius: 16px;
}

.video-autoplay--radius-large .video-autoplay__wrapper {
    border-radius: 24px;
}

/* ── Player (iframe & video) ── */
.video-autoplay__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* ── Placeholder (mode édition) ── */
.video-autoplay__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

body.theme-dark .video-autoplay__placeholder {
    background: linear-gradient(180deg, #060B21 0%, #372C3B 100%);
    color: #888;
}

body:not(.theme-dark) .video-autoplay__placeholder {
    background: linear-gradient(180deg, #E3E5EF 0%, #FFF 100%);
    color: #999;
}

.video-autoplay__placeholder svg {
    opacity: 0.5;
}

.video-autoplay__placeholder p {
    margin: 0;
}

/* ── Erreur ── */
.video-autoplay__error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    color: #c0392b;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 20px;
}

body.theme-dark .video-autoplay__error {
    background: rgba(255, 255, 255, 0.05);
    color: #e74c3c;
}

.video-autoplay__error p {
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .video-autoplay--width-1200 .video-autoplay__wrapper,
    .video-autoplay--width-960 .video-autoplay__wrapper,
    .video-autoplay--width-800 .video-autoplay__wrapper,
    .video-autoplay--width-640 .video-autoplay__wrapper {
        max-width: 100%;
    }
}