<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* Mise en page texte Ã&nbsp; gauche et image Ã&nbsp; droite sur Ã©cran large */
.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Permet aux Ã©lÃ©ments de passer Ã&nbsp; la ligne si nÃ©cessaire */
}

.text-column {
    width: 50%;
}

.image-column {
    width: 45%;
    text-align: right;
    display: flex; /* Permet de s'adapter Ã&nbsp; 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 Ã&nbsp; 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 */
    }
}
</pre></body></html>