/* 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;
        }

        /* Styles de la bannière */
        /* Styles de la bannière */
        .banner {
            text-align: center;
            padding: 0;
            /* Supprimez le padding pour que l'image prenne toute la hauteur */
            height: 300px;
            /* Augmentez la hauteur de la section de bannière */
            overflow: hidden;
            /* Masque le débordement éventuel */
        }

        .banner-image {
            height: 100%;
            /* Prend toute la hauteur de la section */
            background: url('/images/E1.jpg') no-repeat center center;
            background-size: cover;
            /* Assure que l'image couvre tout l'espace disponible */
            position: relative;
            /* Nécessaire pour le positionnement absolu du texte */
        }

        .banner-image h1 {
            position: absolute;
            /* Positionnement absolu pour centrer le texte */
            top: 50%;
            /* Déplace le texte au milieu verticalement */
            left: 50%;
            /* Déplace le texte au milieu horizontalement */
            transform: translate(-50%, -50%);
            /* Centre le texte parfaitement */
            color: white;
            /* Couleur du texte (ajustez selon votre image) */
            font-size: 2.5em;
            /* Ajustez la taille de la police si nécessaire */
            margin: 0;
            /* Supprime la marge par défaut */
        }

        /* Styles de la barre de recherche */
        .search-bar {
            margin: 20px 0;
            text-align: center;
        }

        .search-bar input[type="text"] {
            width: 400px;
            /* Largeur sur PC */
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .search-bar button {
            padding: 10px 20px;
            margin-left: 10px;
            background-color: #53a57f;
            color: white;
            border: none;
            border-radius: 5px;
        }

        /* Styles des articles */
        .blog-posts {
            padding: 20px 0;
        }

        .post {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 35px;
            /* Bordures plus arrondies */
            background-color: #53a57f;
            /* Fond vert */
            color: white;
            /* Texte en blanc pour le contraste */
            height: 100%;
            /* Assurez-vous que la carte utilise toute la hauteur de la colonne */
            min-height: 130px;
            /* Hauteur minimale pour chaque carte */
        }

        .post h2 {
            font-size: 1.8em;
            margin: 10px 0;
        }

        .post .btn-read-more {
            background-color: white;
            color: #53a57f;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            text-decoration: none;
        }

        /* Styles responsives */
        @media (max-width: 768px) {
            .search-bar input[type="text"] {
                width: 90%;
                /* Largeur de 90% sur mobile */
                margin-bottom: 10px;
                /* Espace sous le champ de recherche */
            }

            .search-bar {
                margin: 15px 0;
                /* Réduit la marge pour les petits écrans */
            }

            .blog-posts .row {
                flex-direction: column;
                /* Aligne les articles en colonne */
            }

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

            .post {
                padding: 15px;
                /* Réduit le padding pour les petits écrans */
                border-radius: 20px;
                /* Arrondit les coins pour les petits écrans */
            }

            .post h2 {
                font-size: 1.5em;
                /* Réduit la taille de la police du titre */
            }
        }


        /* Pagination */
        .pagination {
            margin: 20px 0;
        }

        .page-number {
            padding: 5px 10px;
            margin: 0 5px;
            background-color: #53a57f;
            /* Fond vert pour les nombres */
            color: white;
            /* Texte en blanc pour le contraste */
            border-radius: 5px;
            /* Bordures arrondies */
            text-decoration: none;
        }

        .page-number:hover {
            background-color: #45a049;
            /* Couleur au survol */
        }

        .social-icons {
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            padding: 20px 0;
        }

        .social-icons img {
            width: 40px;
            height: 40px;
            margin: 0 10px;
        }