/* =========================================================
   STANDALONE CAROUSEL
   Voor: #carrouselEdito02
   ========================================================= */

#carrouselEdito02 {
    position: relative;
    width: 100%;
}

/* Viewport van de slider */
#carrouselEdito02 > .masque {
    position: relative;
    width: 100%;
    overflow: hidden;

    /* Hoogte wordt door JavaScript automatisch aangepast */
    transition: height 500ms ease-in-out;
}

/* Container waarin de slides horizontaal bewegen */
#carrouselEdito02 > .masque > .items {
    display: flex;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 500ms ease-in-out;
    will-change: transform;
}

/* Iedere afzonderlijke slide */
#carrouselEdito02 > .masque > .items > .item {
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 100%;
    box-sizing: border-box;
}

/*
 * De originele AOX HTML gebruikt .hidden.
 * Die mag de slide hier NIET display:none geven,
 * anders kan de carousel hem niet horizontaal positioneren.
 */
#carrouselEdito02 .item.hidden {
    display: block;
}

/* =========================================================
   NAVIGATIE
   ========================================================= */

#carrouselEdito02 > .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Vorige / volgende */
#carrouselEdito02 > .nav > button {
    cursor: pointer;
}

#carrouselEdito02 > .nav > button:disabled {
    cursor: default;
    opacity: 0.35;
}

/* Bolletjes / tabs */
#carrouselEdito02 > .nav ul {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#carrouselEdito02 > .nav li {
    margin: 0;
    padding: 0;
}

#carrouselEdito02 > .nav a {
    display: block;

    width: 10px;
    height: 10px;

    border: 1px solid currentColor;
    border-radius: 50%;

    cursor: pointer;

    /* Verberg "Panneau 1", "Panneau 2", etc. visueel */
    overflow: hidden;
    text-indent: -9999px;
}

#carrouselEdito02 > .nav li.active a {
    background: currentColor;
}

/* =========================================================
   VIDEO
   ========================================================= */

#carrouselEdito02 video {
    width: 100%;
    height: auto;
    display: block;
}

/* Reduce motion respecteren */
@media (prefers-reduced-motion: reduce) {
    #carrouselEdito02 > .masque,
    #carrouselEdito02 > .masque > .items {
        transition: none;
    }
}