/* section 1 : Conteneur Flex */
.synexta-media-flex-container {
    display: flex;
    flex-wrap: wrap; 
    
    /* CORRECTION : La hauteur est supprimée d'ici pour permettre au conteneur de grandir. */
    /* La hauteur fixe empêchait le retour à la ligne de fonctionner. */
    
    gap: 15px;
}

/* section 2 : Items dans le conteneur Flex */
.synexta-media-flex-container .synexta-media-item {
    /* flex-basis est maintenant défini en inline dans le PHP pour la largeur proportionnelle. */
    /* flex-grow permet aux images de grandir pour remplir la ligne. */
    flex-grow: 1;
    
    /* CORRECTION : On applique la hauteur (variable) directement sur l'item. */
    /* L'item n'essaie plus de faire 100% d'un conteneur qui n'a plus de hauteur. */
    height: var(--media-max-height, 40vh);
    min-height: 300px; /* On garde la contrainte minimale ici. */
    
    overflow: hidden; 
    border-radius: 4px;
    background-color: #f0f0f0;
}

/* section 3 : Style des images et vidéos */
.synexta-media-item img,
.synexta-media-item video {
    width: 100%;
    height: 100%;
    /* On utilise object-fit: contain pour ne pas "zoomer" mais afficher le média en entier. */
    /* Cela respecte le ratio original à l'intérieur de son conteneur. */
    object-fit: cover; 
    display: block;
}