/* Style personnalisé */
        .header {
            background-color: #53a57f;
            padding: 10px 0;
        }

        .header a {
            color: white;
            text-decoration: none;
            padding: 0 15px;
            font-weight: bold;
        }

        .header .active {
            text-decoration: underline;
        }

        .carousel-item {
            position: relative;
            /* Ajouté pour le positionnement du texte */
        }

        .carousel-item img {
            height: 400px;
            object-fit: cover;
            width: 100%;
        }

        .carousel-item .text-overlay {
            position: absolute;
            top: 50%;
            /* Centre verticalement */
            left: 50%;
            /* Centre horizontalement */
            transform: translate(-50%, -50%);
            /* Ajuste le positionnement au centre */
            color: white;
            /* Couleur du texte */
            font-size: 2.5em;
            /* Taille du texte */
            text-align: center;
            /* Centre le texte */
            /* white-space: nowrap; Évite le retour à la ligne */
        }

        /* Styles pour les sections sur écran PC */
.vision-section,
.recent-articles-section {
    padding: 30px 0;
}

.vision-section .card {
    border: 2px solid #53a57f;
}

.recent-articles-section .card {
    background-color: #53a57f; /* Couleur de fond verte */
    color: white; /* Couleur du texte (blanc pour contraster avec le vert) */
    margin-top: 20px;
    display: flex; /* Utiliser Flexbox */
    flex-direction: column; /* Disposer les éléments en colonne */
    justify-content: space-between; /* Espacement entre le contenu */
    height: 100%; /* Assurez-vous que la carte utilise toute la hauteur de la colonne */
    min-height: 200px; /* Hauteur minimale pour chaque carte */
}

.recent-articles-section .card a {
    color: white; /* Couleur du lien en blanc */
    text-align: right; /* Aligner le texte à droite */
    margin-top: auto; /* Pousse le lien vers le bas */
}

.recent-articles-section .card p {
    flex-grow: 1; /* Permet au paragraphe de prendre tout l'espace disponible */
}

.recent-articles-section .card h4 {
    margin: 0; /* Supprimer les marges pour uniformiser la hauteur */
}

/* Styles responsives */
@media (max-width: 768px) {
    .vision-section,
    .recent-articles-section {
        padding: 20px 0; /* Réduit le padding pour les petits écrans */
    }

    .vision-section .row,
    .recent-articles-section .row {
        flex-direction: column; /* Aligne les éléments en colonne */
    }

    .vision-section .col-md-4,
    .recent-articles-section .col-md-4 {
        width: 100%; /* Prend toute la largeur disponible */
        margin-bottom: 20px; /* Ajoute un espace entre les cartes */
    }

    .recent-articles-section .card {
        min-height: auto; /* Ajuste la hauteur minimale des cartes */
    }
}


        h2 {
            text-decoration: underline;
        }