/* Styles de base */
.content {
    text-align: center;
}

/* Styles de base */
.content {
    text-align: center;
   background-color: #C9DFD7; /* Couleur de fond de la zone de contenu */
    height: 350px; /* Hauteur de 300 pixels pour le conteneur */
    padding: 20px; /* Espacement interne pour le contenu */
}

.left-image {
    float: left; /* Pour que l'image soit alignée à gauche */
    border-radius: 10px; /* Pour ajouter des coins arrondis à l'image */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Pour ajouter une ombre à l'image */
    width: 180px; /* Changer la largeur de l'image selon vos besoins */
    height: auto; /* Garder le rapport hauteur/largeur de l'image */
    margin-left: 10px; /* Marge à gauche */
    margin-top: 10px; /* Marge en haut */
    margin-right: 50px; /* Marge à droite */
    margin-bottom: 10px; /* Marge en bas */
}

.content .paragraph-wrapper {
    margin-top: 10px; /* Marge en haut (10px) */
	margin-left: 10px;
    padding: 10px; /* Espacement interne pour le paragraphe */
}

.content .paragraph-wrapper p {
    max-width: 100%; /* Largeur maximale du paragraphe */
	padding: 10px;
    text-align: left; /* Centrer le contenu horizontalement */
	line-height: 1.6;
	font-family:'Proxima Nova', Arial, sans-serif; /* Police de caractère */
	font-size: 20px;
	font-weight: bold;
	color: #1F4325;
}

.content .paragraph-wrapper 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 */
	 float: left; /* Alignement à gauche */
}







/* Media queries pour tablettes et smartphones */
@media only screen and (max-width: 1024px) {
    .left-image {
        float: none; /* Annuler le flottement */
        margin: 10px auto; /* Centrer l'image horizontalement avec une marge de 10px */
    }
}

@media only screen and (max-width: 768px) {
    .content {
        height: auto; /* Ajuster la hauteur automatiquement */
    }

    .content .paragraph-wrapper {
        margin-left: 0; /* Annuler la marge à gauche */
    }

    .content .paragraph-wrapper p {
        font-size: 16px; /* Réduire la taille de la police pour les écrans plus petits */
    }
}
/* Media query pour les écrans de petite taille */
@media screen and (max-width: 768px) {
    .btn {
        padding: 0.8em 1.5em;
        font-size: 0.9rem;
    }
}

/* Media query pour les écrans de très petite taille */
@media screen and (max-width: 480px) {
    .btn {
        padding: 0.6em 1em;
        font-size: 0.8rem;
    }
}
.btn:hover {
    background-color: #ffffff; /* Changement de couleur d'arrière-plan au survol */
    color: white; /* Changement de couleur de texte au survol */
}

.content {
    text-align: center; /* Centrer le texte à l'intérieur de la section */
}

.content p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #000000;
    margin: 20px auto; /* Ajouter une marge de 20px en haut et en bas, et auto sur les côtés pour centrer le paragraphe horizontalement */
    max-width: 1000px; /* Définir une largeur maximale pour le paragraphe */
    text-align: justify;
    font-style: italic;
}

/* Media queries pour les tablettes */
@media screen and (max-width: 768px) {
    .content p {
        font-size: 16px; /* Réduire la taille de la police pour les tablettes */
        max-width: 90%; /* Réduire la largeur maximale du paragraphe pour les tablettes */
    }
}

/* Media queries pour les smartphones */
@media screen and (max-width: 480px) {
    .btn {
        display: block; /* Afficher le bouton en bloc pour une meilleure lisibilité sur les smartphones */
        width: 80%; /* Définir la largeur du bouton à 80% pour les smartphones */
        margin: 20px auto; /* Ajouter une marge pour centrer le bouton horizontalement */
    }

    .content p {
        font-size: 14px; /* Réduire encore la taille de la police pour les smartphones */
    }
}



.content .paragraph-wrapper img {
    max-width: 100%; /* La largeur maximale de l'image est de 100% de la largeur de son conteneur */
    height: auto; /* La hauteur s'ajuste automatiquement pour conserver les proportions de l'image */
    object-fit: contain; /* S'assure que l'image est entièrement visible dans le conteneur */
    float: left; /* Alignement à gauche */
    margin-right: 10px; /* Espacement entre le paragraphe et le logo */
}

@media screen and (max-width: 768px) {
    .content .paragraph-wrapper img {
        float: none; /* Supprime l'alignement à gauche lorsque la taille de l'écran est inférieure à 768px */
        margin-right: 0; /* Supprime l'espacement entre le paragraphe et le logo lorsque la taille de l'écran est inférieure à 768px */
        display: block; /* Assure que l'image occupe toute la largeur disponible */
        margin-bottom: 10px; /* Ajoute un espacement en bas de l'image pour une meilleure lisibilité */
    }
}