/* Définition des styles pour les balises <section> */
section {
    padding: 2em;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
}

/* Définition des styles pour les balises <h2> à l'intérieur des balises <section> */
section h2 {
    margin-bottom: 1em;
    color:#333;
}

/* Définition des styles pour les éléments de classe "image" */
.image {
    margin-left: auto;
    flex-basis: 50%;
    width: 500px;
    height: 300px;
}

/* Définition des styles pour les écrans dont la largeur est inférieure ou égale à 780px */
@media (max-width: 780px) {
    section {
        flex-direction: column;
    }

    /* Redéfinition des styles pour les éléments de classe "image" */
    .image {
        margin: 2em auto;
        flex-basis: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain; /* Utilisation de la valeur "contain" */
        box-sizing: border-box;
    }
}

/* Définition des styles pour les écrans dont la largeur est inférieure ou égale à 480px */
@media (max-width: 480px) {
    section {
        flex-direction: column;
    }

    /* Redéfinition des styles pour les éléments de classe "image" */
    .image {
        margin: 2em auto;
        flex-basis: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain; /* Utilisation de la valeur "contain" */
        box-sizing: border-box;
    }

    /* Définition des styles pour les éléments de classe "menu-déroulant" */
    .menu-déroulant {
        width: 7em;
        font-size: 0.8em;
    }

    /* Redéfinition des styles pour les balises <h2> à l'intérieur des balises <section> */
    section h2 {
        font-size: 20px;
    }

    /* Redéfinition des styles pour les balises <p> à l'intérieur des balises <section> */
    section p {
        font-size: 1.2em;
        line-height: 1.2em;
    }
}
