body {
	background-color: #EEF5EE;
}



.content {
    display: flex;
    background-color: #6C9A8C; /* Couleur de fond de la zone de contenu */
    color: white; /* Couleur du texte */
    font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px; /* Taille de la police */
    text-align: justify;
    flex-wrap: wrap; /* Permettre le retour à la ligne des éléments */
}

.column-left {
    flex: 2; /* Prendre 2/3 de l'espace */
    padding-right: 20px; /* Marge entre les colonnes */
    margin-right: 20px; /* Marge à droite */
    margin-left: 30px; /* Marge à gauche */
    margin-top: 20px;
    margin-bottom: 20px;
}

.column-right {
    flex: 1; /* Prendre 1/3 de l'espace */
    padding-left: 20px; /* Marge entre les colonnes */
    margin-top: 20px;
    margin-bottom: 20px;
}

.logo-container {
    margin-top: 20px; /* Marge entre le texte et le logo */
    display: flex; /* Utilisation de flexbox pour aligner le contenu */
    justify-content: flex-start; /* Aligner le contenu à gauche */
}

.logo-container img {
    width: 100px !important; /* Largeur du logo */
    height: 100px !important; /* Hauteur du logo */
    object-fit: contain; /* S'assure que l'image est entièrement visible dans le conteneur */
}

/* Media Queries pour les tablettes et smartphones */
@media screen and (max-width: 768px) {
    .content {
        flex-direction: column; /* Afficher en colonne pour les petits écrans */
    }
    
    .column-left {
        flex: 1; /* Prendre tout l'espace disponible */
        margin: 20px 0; /* Marges en haut et en bas */
        padding: 0 20px; /* Ajouter un padding à gauche et à droite */
    }
    
    .column-right {
        flex: 1; /* Prendre tout l'espace disponible */
        margin: 20px 0; /* Marges en haut et en bas */
        padding: 0 20px; /* Ajouter un padding à gauche et à droite */
    }
}