* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.image-presentation img {
    display: block;        /* enlève le inline par défaut */
    margin: 0 auto;        /* centre horizontalement */
    padding-top: 16px;
    max-width: 50%;
    border-radius: 40px;
    box-shadow: 0px 15px 15px 5px rgba(0, 0, 0, 0.1);
}

.message p {
    text-align: center;
    margin: 20px auto;
    padding: 16px;
    max-width: 50%;
    background-color: #001031;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
}

.message a {
    color: orange;
    font-style: italic;
}

.sio {
    display: flex; /* Active le mode flexbox pour organiser les enfants horizontalement */
    justify-content: space-between; /* Ajoute de l'espace entre les sections */
    align-items: flex-start; /* Aligne les sections en haut */
    max-width: 1000px; /* Largeur maximale du conteneur */
    width: 50%; /* Occupe toute la largeur disponible */
    margin: 50px auto; /* Centrer le conteneur */
    gap: 25px; /* Ajoute de l'espace entre les sections */
}

#annee1 img, #annee2 img {
    width: 100%; /* Image prend toute la largeur de son conteneur */
    height: 10%; /* Respecte les proportions de l'image */
    border-radius: 40px;
    transition: transform 0.33s ease, box-shadow 0.33s ease;
}

#annee1 img:hover, #annee2 img:hover {
    transform: scale(1.05);
}

@media (max-width:700px) {
     .sio {
        max-width: 90%;
        width: 100%;
        margin: 20px 20px;
        }

    .image-presentation img {
        max-width: 90%;
    }

    .message p {
        max-width: 90%;
        width: 100%;
    }

}