/* Mise en page texte à gauche et image à droite sur écran large */
.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
}

.text-column {
    width: 50%;
}

.image-column {
    width: 45%;
    text-align: right;
    display: flex; /* Permet de s'adapter à la taille de l'image */
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
    flex-direction: column; /* Empile les images en colonne */
}

img {
    max-width: 100%; /* L'image ne dépasse jamais la largeur de son conteneur */
    height: auto; /* Garde le ratio d'origine sans étirement */
}

body {
    overflow: auto;
}

/* Adaptation pour les écrans étroits */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Passe tout le contenu en colonne */
        align-items: center; /* Centre le contenu en mode colonne */
    }

    .text-column,
    .image-column {
        width: 100%; /* Prend toute la largeur */
        text-align: center; /* Centre le texte et l'image */
    }

    .image-column {
        display: flex;
        flex-direction: column; /* Assure que les images s'empilent verticalement */
    }

    img {
        width: 100%; /* L'image s'adapte à la largeur de l'écran */
        max-width: 300px; /* Limite la taille maximale de l'image */
        height: auto; /* Garde le ratio de l'image intact */
        object-fit: contain; /* Assure que l'image reste entière dans son conteneur */
        margin-bottom: 10px; /* Ajoute un petit espace entre les images */
    }
}