/* Adaptation des dimensions images/vidéos selon le contenu texte */

/* Container média adaptatif - s'adapte à la hauteur du contenu texte */
.section-media-modern,
.section-media-13,
.section-media-15,
.section-media-right {
    height: 100%;
    min-height: 300px;
    max-height: 800px; /* Limite pour éviter les images trop grandes */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Suppression du ratio fixe pour permettre l'adaptation */
.section-media-modern .ratio,
.section-media-13 .ratio,
.section-media-15 .ratio,
.section-media-right .ratio {
    height: 100%;
    width: 100%;
    position: relative;
}

.section-media-modern .ratio::before,
.section-media-13 .ratio::before,
.section-media-15 .ratio::before,
.section-media-right .ratio::before {
    content: none;
    padding-bottom: 0;
}

/* Images et vidéos avec adaptation - contain pour éviter les coupures */
.section-media-modern img,
.section-media-modern video,
.section-media-13 img,
.section-media-13 video,
.section-media-15 img,
.section-media-15 video,
.section-media-right img,
.section-media-right video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Background images avec adaptation */
.media-bg-modern {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 100% !important;
    width: 100% !important;
}

/* Wrapper vidéo adaptatif */
.media-wrap-modern {
    height: 100% !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alignement stretch pour les colonnes - permet l'adaptation */
section .row.align-items-stretch {
    align-items: stretch !important;
}

section .row.align-items-stretch > .col-lg-6,
section .row.align-items-stretch > .col-md-6 {
    display: flex;
    flex-direction: column;
}

/* Colonnes avec flex pour permettre l'adaptation */
section .row.align-items-stretch > .col-lg-6.d-flex,
section .row.align-items-stretch > .col-md-6.d-flex {
    display: flex !important;
}

/* Colonnes texte pour qu'elles déterminent la hauteur */
section .row.align-items-stretch > .col-lg-6.d-flex.flex-column > .flex-grow-1,
section .row.align-items-stretch > .col-md-6.d-flex.flex-column > .flex-grow-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Responsive : sur mobile, garder le ratio pour un meilleur rendu */
@media (max-width: 991.98px) {
    .section-media-modern,
    .section-media-13,
    .section-media-15,
    .section-media-right {
        min-height: 250px;
        height: auto;
    }
    
    /* Sur mobile, on peut utiliser un ratio fixe pour éviter les images trop petites */
    .section-media-modern .ratio,
    .section-media-13 .ratio,
    .section-media-15 .ratio,
    .section-media-right .ratio {
        padding-bottom: 56.25%; /* 16:9 */
    }
    
    .section-media-modern .ratio::before,
    .section-media-13 .ratio::before,
    .section-media-15 .ratio::before,
    .section-media-right .ratio::before {
        content: '';
        padding-bottom: 56.25%;
    }
    
    .section-media-modern img,
    .section-media-modern video,
    .section-media-13 img,
    .section-media-13 video,
    .section-media-15 img,
    .section-media-15 video,
    .section-media-right img,
    .section-media-right video {
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .media-bg-modern {
        background-size: contain !important;
    }
    
    /* Sur mobile, les colonnes ne s'étirent plus */
    section .row.align-items-stretch > .col-lg-6,
    section .row.align-items-stretch > .col-md-6 {
        display: block;
    }
}

/* Gestion des conflits CSS potentiels - Priorité sur les autres styles */
section .section-media-modern,
section .section-media-13,
section .section-media-15,
section .section-media-right {
    /* Priorité sur les styles inline qui pourraient forcer un ratio */
    min-height: 300px !important;
    max-height: 800px !important;
}

/* Assure que les images ne débordent pas et s'adaptent */
section .section-media-modern img,
section .section-media-modern video,
section .section-media-13 img,
section .section-media-13 video,
section .section-media-15 img,
section .section-media-15 video,
section .section-media-right img,
section .section-media-right video {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Override des styles de ratio Bootstrap qui pourraient interférer */
section .section-media-modern .ratio,
section .section-media-13 .ratio,
section .section-media-15 .ratio,
section .section-media-right .ratio {
    height: 100% !important;
    padding-bottom: 0 !important;
}

section .section-media-modern .ratio::before,
section .section-media-13 .ratio::before,
section .section-media-15 .ratio::before,
section .section-media-right .ratio::before {
    content: none !important;
    padding-bottom: 0 !important;
}

/* Background images - override pour contain */
section .media-bg-modern {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 100% !important;
    width: 100% !important;
}