/* Styles globaux */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

main {
    flex: 1;
	display: flex;
    width: 65%; /* S'assure que main occupe toute la largeur */
    max-width: 1200px; /* Largeur maximum pour éviter que le contenu soit trop large sur les grands écrans */
    margin: 0 auto; /* Centre l'élément main horizontalement */
    padding: 2vw; /* Padding dynamique basé sur la taille de l'écran */
}

#sidebar {
	margin-left: 3%;
}

/* Section Article */
.article-section {
    flex: 0 0 70%;
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.article-title {
    font-size: 1.8rem;
    color: #002B5B;
    margin-top: 20px;
    border-bottom: 2px solid #C5A880;
    padding-bottom: 10px;
}

.article-section {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 15px;
}

.article-conclusion {
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 20px;
}

/* Mise en page des images */
.article-section img {
    max-width: 600px; /* Limite la largeur de l'image à 600px */
    height: auto; /* Maintient les proportions */
    border-radius: 8px; /* Bordures arrondies */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Ombre douce */
    margin-top: 20px; /* Espacement entre le texte et l'image */
    margin-bottom: 20px; /* Espacement entre l'image et le texte suivant */
}

/* Pour l'image principale de l'article */
.article-section img.main-image {
    max-width: 100%; /* L'image principale prend toute la largeur disponible */
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée pour l'image principale */
}

/* Responsive design */
@media (max-width: 900px) {
    main {
        flex-direction: column;
        margin: 10px;
    }

    section#article {
        flex: 0 0 100%;
        margin-right: 0;
    }

    aside#sidebar {
        flex: 0 0 100%;
        margin-top: 20px;
    }
}

.carre {
    width: 200px; /* Taille moyenne pour l'image carrée */
    height: 200px; /* Garder l'image carrée */
    object-fit: cover; /* Recadre l'image sans distorsion */
    float: left; /* Aligne l'image à gauche */
    margin-right: 15px; /* Espace entre l'image et le texte */
    margin-bottom: 15px; /* Espace en bas pour éviter de toucher le texte suivant */
}

/* Style pour les images rectangulaires avec une hauteur max et centrées */
.rect {
    max-height: 250px; /* Hauteur maximale pour les images rectangulaires */
    width: auto; /* Largeur ajustée automatiquement pour maintenir le ratio */
    display: block; /* Cela permet de centrer l'image */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    margin-bottom: 15px; /* Espace entre l'image et le texte suivant */
}