/* =========================================================
   MISE EN PAGE COMMUNE : SLIDESHOW + DIMA
   - slideshow à gauche
   - Dima à droite
   - alignés au même niveau
   - centrés
   - responsive sur mobile
   ========================================================= */

.media-duo {
    width: 100% !important;
    max-width: 1280px !important;

    margin: 0 auto !important;
    padding: 0 18px !important;

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

    gap: 28px !important;

    background: transparent !important;
}

/* Colonne slideshow */
.media-duo__slideshow {
    flex: 0 1 700px !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Colonne Dima */
.media-duo__dima {
    flex: 0 1 500px !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================================
   AJUSTEMENT DES DEUX BLOCS DANS LE DUO
   On ne change pas leur logique interne.
   ========================================================= */

/* Le slideshow se limite à sa colonne */
.media-duo__slideshow #fth-slideshow {
    width: 100% !important;
    max-width: 700px !important;
}

/* Dima se limite à sa colonne */
.media-duo__dima #dima-band {
    width: 100% !important;
    max-width: 500px !important;
}

/* =========================================================
   TABLETTES / PETITS ÉCRANS
   ========================================================= */

@media (max-width: 1100px) {
    .media-duo {
        gap: 20px !important;
        padding: 0 12px !important;
    }

    .media-duo__slideshow {
        flex-basis: 60% !important;
    }

    .media-duo__dima {
        flex-basis: 40% !important;
    }
}

/* =========================================================
   MOBILE
   On empile les deux blocs.
   ========================================================= */

@media (max-width: 760px) {
    .media-duo {
        flex-direction: column !important;
        align-items: center !important;
        gap: 18px !important;
    }

    .media-duo__slideshow,
    .media-duo__dima {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .media-duo__slideshow #fth-slideshow,
    .media-duo__dima #dima-band {
        width: 100% !important;
        max-width: 100% !important;
    }
}