Connexion réussie    <header>
      <!-- Header desktop -->
      <div class="container-menu-desktop">
        <!-- <div class="topbar">
				<div class="content-topbar container h-100">
					<div class="left-topbar">
						<span class="left-topbar-item flex-wr-s-c">
							<span>
								New York, NY
							</span>

							<img class="m-b-1 m-rl-8" src="images/icons/icon-night.png" alt="IMG">

							<span>
								HI 58° LO 56°
							</span>
						</span>

						<a href="#" class="left-topbar-item">
							About
						</a>

						<a href="#" class="left-topbar-item">
							Contact
						</a>

						<a href="#" class="left-topbar-item">
							Sing up
						</a>

						<a href="#" class="left-topbar-item">
							Log in
						</a>
					</div>

					<div class="right-topbar">
						<a href="#">
							<span class="fab fa-facebook-f"></span>
						</a>

						<a href="#">
							<span class="fab fa-twitter"></span>
						</a>

						<a href="#">
							<span class="fab fa-pinterest-p"></span>
						</a>

						<a href="#">
							<span class="fab fa-vimeo-v"></span>
						</a>

						<a href="#">
							<span class="fab fa-youtube"></span>
						</a>
					</div>
				</div>
			</div> -->

        <!-- Header Mobile -->
        <div class="wrap-header-mobile">
          <!-- Logo moblie -->
          <div class="logo-mobile">
            <a href="index.php"
              ><img src="images/logo/trefle.png" alt="IMG-LOGO"
            /></a>
          </div>

          <!-- Button show menu -->
          <div class="btn-show-menu-mobile hamburger hamburger--squeeze m-r--8">
            <span class="hamburger-box">
              <span class="hamburger-inner"></span>
            </span>
          </div>
        </div>

        <!-- Menu Mobile -->
        <div class="menu-mobile">
          <!-- <ul class="topbar-mobile">
            <li class="left-topbar">
              <span class="left-topbar-item flex-wr-s-c">
                <span> New York, NY </span>

                <img
                  class="m-b-1 m-rl-8"
                  src="images/icons/icon-night.png"
                  alt="IMG"
                />

                <span> HI 58° LO 56° </span>
              </span>
            </li>

            <li class="left-topbar">
              <a href="#" class="left-topbar-item"> About </a>

              <a href="#" class="left-topbar-item"> Contact </a>

              <a href="#" class="left-topbar-item"> Sing up </a>

              <a href="#" class="left-topbar-item"> Log in </a>
            </li>

            <li class="right-topbar">
              <a href="#">
                <span class="fab fa-facebook-f"></span>
              </a>

              <a href="#">
                <span class="fab fa-twitter"></span>
              </a>

              <a href="#">
                <span class="fab fa-pinterest-p"></span>
              </a>

              <a href="#">
                <span class="fab fa-vimeo-v"></span>
              </a>

              <a href="#">
                <span class="fab fa-youtube"></span>
              </a>
            </li>
          </ul> -->

          <ul class="main-menu-m">
            <li>
              <a href="index.php">À la une</a>
              <!-- <ul class="sub-menu-m">
                <li><a href="index.html">Homepage v1</a></li>
                <li><a href="home-02.html">Homepage v2</a></li>
                <li><a href="home-03.html">Homepage v3</a></li>
              </ul>

              <span class="arrow-main-menu-m">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
              </span> -->
            </li>

            <li>
              <a href="environnement.php">Qui sommes - nous?</a>
            </li>

            <li>
              <a href="about.php">Services </a>
            </li>
            <li>
              <a href="service.php">Impact</a>
            </li>

            <li>
              <a href="communication.php">Partenariat</a>
            </li>

            <!-- <li>
              <a href="#">Discours</a>
              <ul class="sub-menu-m">
                <li><a href="category-01.html">Category Page v1</a></li>
                <li><a href="category-02.html">Category Page v2</a></li>
                <li><a href="blog-grid.html">Blog Grid Sidebar</a></li>
                <li><a href="blog-list-01.html">Blog List Sidebar v1</a></li>
                <li><a href="blog-list-02.html">Blog List Sidebar v2</a></li>
                <li><a href="blog-detail-01.html">Blog Detail Sidebar</a></li>
                <li>
                  <a href="blog-detail-02.html">Blog Detail No Sidebar</a>
                </li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact Us</a></li>
              </ul>

              <span class="arrow-main-menu-m">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
              </span>
            </li> -->
            <li>
              <a href="blog.php">Blog</a>
            </li>
            <li>
              <a href="about.php">Contact</a>
            </li>
          </ul>
        </div>

        <!--  -->
        <div class="wrap-main-nav">
          <div class="main-nav">
            <!-- Menu desktop -->
            <nav class="menu-desktop">
              <a class="logo-stick" href="index.php">
                <img src="images/logo/logo_blancs.png" alt="LOGO" />
              </a>

              <ul class="main-menu">
                <li class="">
                  <a href="index.php">A la une</a>
                  <!-- <ul class="sub-menu">
									<li><a href="index.html">Homepage v1</a></li>
									<li><a href="home-02.html">Homepage v2</a></li>
									<li><a href="home-03.html">Homepage v3</a></li>
								</ul> -->
                </li>

                <li class="mega-menu-item">
                  <a href="about.php">Qui sommes - nous?</a>
                </li>

                <li class="mega-menu-item">
                  <a href="service.php">Services</a>
                </li>

                <li class="mega-menu-item">
                  <a href="nutrition.php">Impact</a>

                  <div class="sub-mega-menu">
                    <div class="tab-content">
                      <div
                        class="tab-pane show active"
                        id="news-0"
                        role="tabpanel"
                      >
                        <div class="row">

                                                  <div class="col-3">
                            <!-- Item post -->
                            <div>
                              <a
                                href="#"
                                class="wrap-pic-w hov1 trans-03"
                              >
                                <img src="article/1756416890_reve-de-riz-blanc-signification.jpeg" alt="IMG" />
                              </a>

                              <div class="p-t-10">
                                <h5 class="p-b-5">
                                  <a
                                    href="#"
                                    class="f1-s-5 cl1 hov-cl10 trans-03"
                                  >
                                    Focus nutritionnel : Un riz noble, riche en valeurs et en goût                                  </a>
                                </h5>

                                <span class="cl8">
                                  <a
                                    href="#"
                                    class="f1-s-6 cl8 hov-cl10 trans-03"
                                  >
                                    Nutrition                                  </a>

                                  <span class="f1-s-3 m-rl-3"> - </span>

                                  <span class="f1-s-3">01 Aug 2025 </span>
                                </span>
                              </div>
                            </div>
                          </div>
                          

                        </div>
                      </div>
                    </div>
                  </div>
                </li>

                <li class="mega-menu-item">
                  <a href="communication.php">Partenariat</a>

                    <div class="sub-mega-menu">
                    <div class="tab-content">
                      <div
                        class="tab-pane show active"
                        id="news-0"
                        role="tabpanel"
                      >
                        <div class="row">

                                                  <div class="col-3">
                            <!-- Item post -->
                            <div>
                              <a
                                href="#"
                                class="wrap-pic-w hov1 trans-03"
                              >
                                <img src="article/1781612189_images.jpg" alt="IMG" />
                              </a>

                              <div class="p-t-10">
                                <h5 class="p-b-5">
                                  <a
                                    href="#"
                                    class="f1-s-5 cl1 hov-cl10 trans-03"
                                  >
                                    Comment les entreprises peuvent réduire leur empreinte carbone ?                                  </a>
                                </h5>

                                <span class="cl8">
                                  <a
                                    href="#"
                                    class="f1-s-6 cl8 hov-cl10 trans-03"
                                  >
                                    Communication                                  </a>

                                  <span class="f1-s-3 m-rl-3"> - </span>

                                  <span class="f1-s-3">16 Jun 2026 </span>
                                </span>
                              </div>
                            </div>
                          </div>
                                                  <div class="col-3">
                            <!-- Item post -->
                            <div>
                              <a
                                href="#"
                                class="wrap-pic-w hov1 trans-03"
                              >
                                <img src="article/1757677477_WhatsApp Image 2025-09-12 à 11.43.54_4c66d20d.jpg" alt="IMG" />
                              </a>

                              <div class="p-t-10">
                                <h5 class="p-b-5">
                                  <a
                                    href="#"
                                    class="f1-s-5 cl1 hov-cl10 trans-03"
                                  >
                                    ? La RSE, un levier de confiance et de durabilité,                                  </a>
                                </h5>

                                <span class="cl8">
                                  <a
                                    href="#"
                                    class="f1-s-6 cl8 hov-cl10 trans-03"
                                  >
                                    Communication                                  </a>

                                  <span class="f1-s-3 m-rl-3"> - </span>

                                  <span class="f1-s-3">12 Sep 2025 </span>
                                </span>
                              </div>
                            </div>
                          </div>
                         
                          
                        </div>
                      </div>
                    </div>
                  </div>
                </li>

                <li class="mega-menu-item">
                  <a href="blog.php">Blog</a>
                </li>
                <li>
                  <a href="contact.php">Contact</a>

                </li>
              </ul>
            </nav>
          </div>
        </div>
        <!--  -->
        <div class="wrap-logo container">
          <!-- Logo desktop -->
          <div class="logo">
            <a href="index.php"
              ><img src="images/icons/logo-01.png" alt="LOGO"
            /></a>
          </div>

          <!-- Banner -->
          
            <div class="banner-header">
                <a href="#">
                    <img src="https://www.trefleci.com/images/az.png" alt="IMG" />
                </a>
            </div>

          <!--  -->
          <div class="pos-relative size-a-2 of-hidden m-tb-6">
            <!-- From Uiverse.io by adeladel522 -->
             <a href="contact.php">
              <button class="button btnxx">
                NOS CONTACTS
                <svg fill="currentColor" viewBox="0 0 24 24" class="icon">
                  <path
                    clip-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
                    fill-rule="evenodd"
                  ></path>
                </svg>
              </button>
            </a>
          </div>
        </div>
      </div>
    </header><head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Blog - TREFLE-ECOLO</title>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="images/logo/symbole blancs.png" />

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />

  <!-- Font Awesome & Font Awesome 5 -->
  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="fonts/fontawesome-5.0.8/css/fontawesome-all.min.css" />

  <!-- Material Design Iconic Font -->
  <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css" />

  <!-- Animate -->
  <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css" />

  <!-- Hamburgers -->
  <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css" />

  <!-- Animsition -->
  <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css" />

  <!-- Tailwind (si nécessaire uniquement sur certaines pages) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" />

  <!-- Util & Main CSS -->
  <link rel="stylesheet" type="text/css" href="css/util.min.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <!-- <script src="https://cdn.tailwindcss.com?plugins=line-clamp"></script> -->

</head>

<!DOCTYPE html>
<html lang="fr">
<body class="animsition">
    
    <!-- Breadcrumb -->
    <div class="container">
        <div class="bg0 flex-wr-sb-c p-rl-20 p-tb-8">
            <div class="f2-s-1 p-r-30 m-tb-6">
                <a href="index.php" class="breadcrumb-item f1-s-3 cl9">Accueil</a>
                <span class="breadcrumb-item f1-s-3 cl9">Blog</span>
            </div>
        </div>
    </div>

    <!-- Page heading -->
    <div class="container p-t-4 p-b-40">
        <h2 class="f1-l-1 cl2">Notre Blog</h2>
    </div>

    <!-- Blog Content -->
    <section class="bg0 p-b-55">
        <div class="container">
            <div class="row justify-content-center">
                
                <!-- ZONE DE RAFRAICHISSEMENT AJAX -->
                <div class="col-md-10 col-lg-8 p-b-80">
                    <div id="blog-content-area">
                        <!-- Le contenu de fetch_articles.php sera injecté ici -->
                        <div class="text-center p-t-50">
                            <p>Chargement des articles...</p>
                        </div>
                    </div>
                </div>
    
                <!-- Sidebar (ne bouge jamais) -->
                <div class="col-md-10 col-lg-4 p-b-80">
                    <div class="p-l-10 p-rl-0-sr991">
                        <div class="bg10 p-rl-35 p-t-28 p-b-35 m-b-50">
                            <h5 class="f1-m-5 cl0 p-b-10">Newsletters</h5>
                            <p class="f1-s-1 cl0 p-b-25">Recevez les dernières actualités par e-mail.</p>
                            <form class="size-a-9 pos-relative" action="newsadd.php" method="POST">
                                <input class="s-full f1-m-6 cl6 plh9 p-l-20 p-r-55" type="email" name="email" placeholder="Email" required>
                                <button class="size-a-10 flex-c-c ab-t-r fs-16 cl9 hov-cl10 trans-03" type="submit">
                                    <i class="fa fa-arrow-right"></i>
                                </button>
                            </form>
                        </div>
                        <div class="flex-c-s p-b-50">
                            <a href="#"><img class="max-w-full" src="images/banner-02.jpg" alt="Bannière"></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

        <footer>
      <div class="bg2 p-t-40 p-b-25">
        <div class="container">
          <div class="row">
            <div class="col-lg-5 p-b-20" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-right: 1rem;">
              <div class="size-h-3 flex-s-c">
                <a href="index.html">
                  <img
                    class="max-s-full"
                    src="images/icons/logo-02.png"
                    alt="LOGO"
                  />
                </a>
              </div>

              <div>
                <p class="f1-s-1 cl11 p-b-16" style="text-align:justify;">Nous sommes naturellement créatifs. Nous avons donc choisi notre ambition :
faire rayonner votre image tout en renforçant votre impact auprès de vos
publics. Clover transforme vos idées et
vos engagements en leviers de visibilité, de crédibilité et d’impact.
Une agence de communication engagée qui accompagne les organisations désireuses
de performer durablement, en conciliant créativité, innovation et
responsabilité.</p>
                <p class="f1-s-1 cl11 p-b-16" >
                  <a href="contact.php">
                  <button class="button btnxx">
                    NOS CONTACTS
                    <svg fill="currentColor" viewBox="0 0 24 24" class="icon">
                      <path
                        clip-rule="evenodd"
                        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
                        fill-rule="evenodd"
                      ></path>
                    </svg>
                  </button>
                </a>
                </p>

                <div class="p-t-15">
                                            <a href="https://www.linkedin.com/company/trefle-cote-d-ivoire/" 
                           class="fs-18 cl11 hov-cl10 trans-03 m-r-8" 
                           target="_blank" rel="noopener noreferrer">
                            <span class="fab fa-linkedin-in"></span>
                        </a>
                    
                </div>
              </div>
            </div>

            <div class="col-sm-6 col-lg-4 p-b-20">
              <div class="size-h-3 flex-s-c">
                <h5 class="f1-m-7 cl0">Postes Récents</h5>
              </div>

              <ul>

                                <li class="flex-wr-sb-s p-b-20">
                  <a href="#" class="size-w-4 wrap-pic-w hov1 trans-03">
                    <img src="article/1781612189_images.jpg" alt="IMG" />
                  </a>

                  <div class="size-w-5">
                    <h6 class="p-b-5">
                      <a href="index.php" class="f1-s-5 cl11 hov-cl10 trans-03">
                        Comment les entreprises peuvent réduire leur empreinte carbone ?                      </a>
                    </h6>

                    <span class="f1-s-3 cl6">16 Jun 2026 </span>
                  </div>
                </li>
                                <li class="flex-wr-sb-s p-b-20">
                  <a href="#" class="size-w-4 wrap-pic-w hov1 trans-03">
                    <img src="article/1781612139__OHA0312.jpg" alt="IMG" />
                  </a>

                  <div class="size-w-5">
                    <h6 class="p-b-5">
                      <a href="index.php" class="f1-s-5 cl11 hov-cl10 trans-03">
                        Agriculture durable : préserver les sols pour nourrir les générations futures                      </a>
                    </h6>

                    <span class="f1-s-3 cl6">16 Jun 2026 </span>
                  </div>
                </li>
                                <li class="flex-wr-sb-s p-b-20">
                  <a href="#" class="size-w-4 wrap-pic-w hov1 trans-03">
                    <img src="article/1781612068_images.jpg" alt="IMG" />
                  </a>

                  <div class="size-w-5">
                    <h6 class="p-b-5">
                      <a href="index.php" class="f1-s-5 cl11 hov-cl10 trans-03">
                        Le recyclage du plastique, un enjeu majeur pour les villes ivoiriennes                      </a>
                    </h6>

                    <span class="f1-s-3 cl6">16 Jun 2026 </span>
                  </div>
                </li>
                
              </ul>
            </div>

            <div class="col-sm-6 col-lg-2 p-b-20">
              <div class="size-h-3 flex-s-c">
                <h5 class="f1-m-7 cl0">Catégorie(s)</h5>
              </div>

              <ul class="m-t--12">

              
                <li class="how-bor1 p-rl-5 p-tb-10">
                  <a href="communication.php" class="f1-s-5 cl11 hov-cl10 trans-03 p-tb-8">
                    Communication                  </a>
                </li>

               
                <li class="how-bor1 p-rl-5 p-tb-10">
                  <a href="agriculture.php" class="f1-s-5 cl11 hov-cl10 trans-03 p-tb-8">
                    Agriculture                  </a>
                </li>

               
                <li class="how-bor1 p-rl-5 p-tb-10">
                  <a href="nutrition.php" class="f1-s-5 cl11 hov-cl10 trans-03 p-tb-8">
                    Nutrition                  </a>
                </li>

               
                <li class="how-bor1 p-rl-5 p-tb-10">
                  <a href="environnement.php" class="f1-s-5 cl11 hov-cl10 trans-03 p-tb-8">
                    Environnement                  </a>
                </li>

               
                <li class="how-bor1 p-rl-5 p-tb-10">
                  <a href="edito.php" class="f1-s-5 cl11 hov-cl10 trans-03 p-tb-8">
                    Edito                  </a>
                </li>

                             </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="bg11">
        <div class="container size-h-4 flex-c-c p-tb-15">
          <span class="f1-s-1 cl0 txt-center">
            Copyright © 2025

            <a href="#" class="f1-s-1 cl10 hov-link1"> Trèfle Écolo.</a>

            All rights reserved.
          </span>
        </div>
      </div>
    </footer>
    <!-- Scripts JQuery (Assurez-vous qu'ils sont bien là) -->
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="vendor/animsition/js/animsition.min.js"></script>
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>

    <!-- SCRIPT AJAX POUR LA PAGINATION -->
    <script>
    $(document).ready(function() {
        
        // Fonction pour charger les données
        function loadBlogData(page) {
            // Effet visuel de chargement
            $('#blog-content-area').css('opacity', '0.5');

            $.ajax({
                url: "fetch_articles.php",
                method: "GET",
                data: { page: page },
                success: function(response) {
                    // On remplace le contenu
                    $('#blog-content-area').html(response);
                    $('#blog-content-area').css('opacity', '1');
                    
                    // Optionnel : Remonter en haut de la liste doucement
                    $('html, body').animate({
                        scrollTop: $("#blog-content-area").offset().top - 100
                    }, 400);
                },
                error: function() {
                    alert("Erreur lors du chargement des articles.");
                }
            });
        }

        // Chargement initial (Page 1)
        loadBlogData(1);

        // Ecoute du clic sur les boutons de pagination
        // On utilise $(document).on car les boutons sont créés dynamiquement
        $(document).on('click', '.pagi-btn', function(e) {
            e.preventDefault();
            var pageId = $(this).data('page');
            loadBlogData(pageId);
        });
    });
    </script>

</body>
</html>