diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css
index 7a6a5a5..74d8e6b 100644
--- a/Bootstrap_new/css/style_office.css
+++ b/Bootstrap_new/css/style_office.css
@@ -697,6 +697,9 @@ body {
     z-index: 1055 !important;
 }
 
+.modal.show { z-index: 2000; }
+.modal-backdrop.show { z-index: 1999; }
+
 /* ============================================
    RESPONSIVE DESIGN
    ============================================ */
@@ -708,7 +711,6 @@ body {
         margin-left: var(--sidebar-collapsed);
     }
 
-    
     .nav-text,
     .nav-title,
     .nav-badge,
diff --git a/Vue/Ajaxlisteadherent/index.php b/Vue/Ajaxlisteadherent/index.php
index 4c6b379..647498c 100644
--- a/Vue/Ajaxlisteadherent/index.php
+++ b/Vue/Ajaxlisteadherent/index.php
@@ -1,110 +1,110 @@
 <?php 
     $codeTypeAvenant = $_SESSION['codeTypeAvenant_C'];
     $numeroPolice = $this->nettoyer($_SESSION['numeroPolice_C']);
+    
+    // On extrait la liste unique des collèges pour le filtre
+    $colleges = array_unique(array_column($adherents, 'libelleCollege'));
+    sort($colleges);
 ?>
 
+<style>
+    /* Pagination style */
+    .dataTables_paginate { margin-top: 15px; }
+    .paginate_button { padding: 5px 10px; margin: 0 2px; border: 1px solid #dee2e6; border-radius: 4px; cursor: pointer; }
+    .paginate_button.current { background: #0d6efd !important; color: white !important; border-color: #0d6efd; }
+    
+    /* Vos styles existants */
+    .cursor-pointer { cursor: pointer; transition: all 0.2s; }
+    .cursor-pointer:hover { background-color: #f8f9fa !important; }
+    .status-actif { border-left: 4px solid #0dcaf0 !important; }
+    .status-archive { border-left: 4px solid #ffc107 !important; background-color: #fffdf5; }
+    .x-small { font-size: 0.72rem; }
+    .btn-white { background: #fff; }
+</style>
+
 <div id="div_liste_adherent" class="container-fluid py-0 animate__animated animate__fadeIn">
     
-    <h1 class="text-primary"><i class="fas fa-users me-2"></i></i> <?= _('Gestion des Adhérents') ?></h1>
+    <h1 class="text-primary mb-4"><i class="fas fa-users me-2"></i> <?= _('Gestion des Adhérents') ?></h1>
     
     <div class="card-header d-flex justify-content-between align-items-center py-3">
         <h4 class="fw-bold text-secondary mb-0">
             <?= _("POLICE") ?> : <span class="badge bg-white text-primary ms-2"><?= $this->nettoyer($_SESSION['numeroPolice_C']) ?></span>
         </h4>
     </div>
-
-    <div class="card shadow-sm border-0 mb-4 bg-office-primary-lighter text-white">
-        <div class="card-body d-flex align-items-center justify-content-between p-3">
-            <button type="button" class="btn btn-light btn-sm fw-bold shadow-sm w-100" onclick="javascript:afficher_adherents_police();">
-                <i class="fas fa-sync-alt me-2 text-primary"></i> <?= _("Actualiser la liste") ?>
+    
+    <div class="row mb-3 g-3">
+        <div class="col-md-4">
+            <div class="input-group shadow-sm">
+                <span class="input-group-text bg-white border-end-0 text-muted"><i class="fas fa-search"></i></span>
+                <input type="text" id="customSearch" class="form-control border-start-0 ps-0" placeholder="<?= _('Recherche globale...') ?>">
+            </div>
+        </div>
+        <div class="col-md-3">
+            <select class="form-select shadow-sm" id="collegeFilter">
+                <option value=""><?= _("Tous les collèges") ?></option>
+                <?php foreach($colleges as $coll): ?>
+                    <option value="<?= $this->nettoyer($coll) ?>"><?= $this->nettoyer($coll) ?></option>
+                <?php endforeach; ?>
+            </select>
+        </div>
+        <div class="col-md-3">
+            <select class="form-select shadow-sm" id="statusFilter">
+                <option value=""><?= _("Tous les statuts") ?></option>
+                <option value="status-actif">🟢 <?= _("Actifs") ?></option>
+                <option value="status-archive">🟠 <?= _("Archivés") ?></option>
+            </select>
+        </div>
+        <div class="col-md-2 text-end">
+            <button class="btn btn-outline-primary shadow-sm w-100" onclick="javascript:afficher_adherents_police();">
+                <i class="fas fa-sync-alt"></i>
             </button>
         </div>
     </div>
 
-    <div class="row mb-3 g-3">
-        <div class="col-md-7">
-            <div class="input-group shadow-sm">
-                <span class="input-group-text bg-white border-end-0 text-muted">
-                    <i class="fas fa-search"></i>
-                </span>
-                <input type="text" id="filterInput" class="form-control border-start-0 ps-0" 
-                       placeholder="<?= _('Rechercher par nom, prénom ou n° adhérent...') ?>" 
-                       onkeyup="filtrerTableauAdherents()">
-            </div>
-        </div>
-        <div class="col-md-3">
-            <select class="form-select shadow-sm" id="statusFilter" onchange="filtrerTableauAdherents()">
-                <option value="all">🔍 <?= _("Tous les statuts") ?></option>
-                <option value="actif">🟢 <?= _("Actifs (Modifiables)") ?></option>
-                <option value="archive">🟠 <?= _("Archivés") ?></option>
-            </select>
-        </div>
-        <div class="col-md-2">
-            <div class="dropdown w-100">
-                <button class="btn btn-primary w-100 dropdown-toggle shadow-sm" type="button" data-bs-toggle="dropdown">
-                    <i class="fas fa-download me-2"></i><?= _("Exporter") ?>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow">
-                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#pop_liste_assures"><i class="fas fa-file-pdf me-2 text-danger"></i><?= _("Format PDF") ?></a></li>
-                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#pop_exporter_liste_assures"><i class="fas fa-file-excel me-2 text-success"></i><?= _("Format Excel") ?></a></li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <div id="div_liste_adherent" class="table-responsive shadow-sm rounded-3 border bg-white">
-        <table class="table table-hover align-middle mb-0" id="tableAdherents" style="font-size: 0.9rem;">
+    <div class="table-responsive shadow-sm rounded-3 border bg-white p-3">
+        <table class="table table-hover align-middle mb-0" id="tableAdherents" style="width:100%; font-size: 0.9rem;">
             <thead class="table-light">
                 <tr>
-                    <th class="ps-3 py-3 text-center" width="10%"><?= _("N° Adhérent") ?></th>
-                    <th><?= _("Identité de l'assuré") ?></th>
+                    <th class="text-center"><?= _("N° Adhérent") ?></th>
+                    <th><?= _("Identité") ?></th>
                     <th class="text-center"><?= _("Collège") ?></th>
-                    <th class="text-center"><?= _("Période Couverture") ?></th>
-                    <th class="text-center" width="8%"><?= _("Actions") ?></th>
-                </tr>
+                    <th class="text-center"><?= _("Période") ?></th>
+                    <th class="text-center no-export"><?= _("Actions") ?></th>
+                    <th class="d-none">StatusClass</th> </tr>
             </thead>
             <tbody>
                 <?php foreach ($adherents as $adherent):
                     $idAdh = $adherent['id'];
                     $noAdh = $this->nettoyer($adherent['numeroAdherent']);
+                    $libelleColl = $this->nettoyer($adherent['libelleCollege']);
                     $estsupprimable = ($this->nettoyer($adherent['primeArchive']) == "0");
                     $statusClass = $estsupprimable ? 'status-actif' : 'status-archive';
                 ?>
-                <tr class="<?= $statusClass ?> cursor-pointer" 
-                    onclick="selectionner_adherent(<?= $idAdh ?>,'<?= $noAdh ?>');" 
-                    ondblclick="afficher_adherent_id();">
-                    
+                <tr class="<?= $statusClass ?> cursor-pointer" onclick="selectionner_adherent(<?= $idAdh ?>,'<?= $noAdh ?>');">
                     <td class="text-center">
-                        <span class="badge bg-light text-dark border fw-bold px-2 py-2">
-                            <?= $noAdh ?>
-                        </span>
+                        <span class="badge bg-light text-dark border fw-bold"><?= $noAdh ?></span>
                     </td>
-                    
                     <td>
                         <div class="fw-bold text-dark text-uppercase"><?= $this->nettoyer($adherent['nom']) ?></div>
                         <div class="small text-muted"><?= $this->nettoyer($adherent['prenoms']) ?></div>
                     </td>
-                    
                     <td class="text-center">
                         <span class="badge bg-primary-subtle text-primary mb-1"><?= $this->nettoyer($adherent['codeProduit']) ?></span>
-                        <div class="x-small text-muted text-truncate" title="<?= $this->nettoyer($adherent['libelleCollege']) ?>" style="max-width: 140px;">
-                            <?= $this->nettoyer($adherent['libelleCollege']) ?>
-                        </div>
+                        <div class="x-small text-muted"><?= $libelleColl ?></div>
                     </td>
-                    
                     <td class="text-center">
-                        <div class="d-flex justify-content-center align-items-center small">
+                        <div class="small">
                             <span class="text-success fw-bold"><?= dateLang($this->nettoyer($adherent['dateEntree'])) ?></span>
-                            <i class="fas fa-arrow-right mx-2 text-muted" style="font-size: 0.7rem;"></i>
+                            <i class="fas fa-arrow-right mx-1 text-muted"></i>
                             <span class="text-danger fw-bold"><?= $adherent['dateSortie'] ? dateLang($this->nettoyer($adherent['dateSortie'])) : '--' ?></span>
                         </div>
                     </td>
-                    
-                    <td class="text-center pe-3">
-                        <button class="btn btn-white border-0" title="<?= _("Voir la fiche") ?>" onclick="selectionner_adherent(<?= $idAdh ?>,'<?= $noAdh ?>'); afficher_adherent_id();">
+                    <td class="text-center">
+                        <button class="btn btn-sm btn-white border shadow-sm" onclick="afficher_adherent_id();">
                             <i class="fas fa-user-edit text-primary"></i>
                         </button>
                     </td>
+                    <td class="d-none"><?= $statusClass ?></td>
                 </tr>
                 <?php endforeach; ?>
             </tbody>
@@ -112,32 +112,34 @@
     </div>
 </div>
 
-<style>
-    .cursor-pointer { cursor: pointer; transition: all 0.2s; }
-    .cursor-pointer:hover { background-color: #f8f9fa !important; }
-    .status-actif { border-left: 4px solid #0dcaf0 !important; }
-    .status-archive { border-left: 4px solid #ffc107 !important; background-color: #fffdf5; }
-    .x-small { font-size: 0.72rem; }
-    .btn-white { background: #fff; }
-    .btn-white:hover { background: #f0f0f0; }
-</style>
-
 <script>
-function filtrerTableauAdherents() {
-    const input = document.getElementById("filterInput").value.toUpperCase();
-    const status = document.getElementById("statusFilter").value;
-    const tr = document.querySelectorAll("#tableAdherents tbody tr");
+    $(document).ready(function() {
+        // Initialisation de DataTable
+        var table = $('#tableAdherents').DataTable({
+            "pageLength": 10,
+            "language": {
+                "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
+            },
+            "dom": 'rtp', // 'rtp' cache la barre de recherche par défaut pour utiliser la nôtre
+            "columnDefs": [
+                { "orderable": false, "targets": [4] } // Désactive le tri sur la colonne Actions
+            ]
+        });
 
-    tr.forEach(row => {
-        const text = row.textContent.toUpperCase();
-        const estArchive = row.classList.contains('status-archive');
-        
-        const matchText = text.includes(input);
-        const matchStatus = (status === 'all') || 
-                           (status === 'actif' && !estArchive) || 
-                           (status === 'archive' && estArchive);
+        // Recherche personnalisée
+        $('#customSearch').on('keyup', function() {
+            table.search(this.value).draw();
+        });
 
-        row.style.display = (matchText && matchStatus) ? "" : "none";
+        // Filtre par Collège (Colonne 2 - index base 0)
+        $('#collegeFilter').on('change', function() {
+            table.column(2).search(this.value).draw();
+        });
+
+        // Filtre par Statut (Colonne 5 - cachée)
+        $('#statusFilter').on('change', function() {
+            table.column(5).search(this.value).draw();
+        });
     });
-}
-</script>
\ No newline at end of file
+</script>
+
diff --git a/Vue/Listeadherent/index.php b/Vue/Listeadherent/index.php
index 3d09d0c..0bc62c3 100644
--- a/Vue/Listeadherent/index.php
+++ b/Vue/Listeadherent/index.php
@@ -27,13 +27,7 @@
     <button class="d-none" id="btn_exporter_liste_assures" data-bs-toggle="modal" data-bs-target="#pop_exporter_liste_assures"></button>
     <button class="d-none" id="btn_liste_assures_sans_format" data-bs-toggle="modal" data-bs-target="#pop_liste_liste_assures_sans_format"></button>
 
-    <div id="div_liste_adherent" class="min-vh-50 rounded bg-white shadow-sm p-3">
-        <div class="text-center py-5 text-muted">
-            <i class="fas fa-spinner fa-spin fa-2x mb-3"></i>
-            <p><?= _("Cliquez sur le bouton au dessus pour charger de la liste des adhérents...") ?></p>
-        </div>
-    </div>
-
+    
     <div id="div_export_a"></div>
 </div>
 
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 565932d..3e76d1e 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -119,7 +119,7 @@ $activeChildId = $menuData['child'];
         <link rel="manifest" href="<?= $racineWeb ?>manifest.json">
         
         <!-- 4. VOS STYLES PERSONNALISÉS (en dernier pour qu'ils dominent) -->
-        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2026.01.03.01" rel="stylesheet">
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2026.01.03.02" rel="stylesheet">
         <link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
 
         <!-- ============================================
@@ -682,32 +682,33 @@ $activeChildId = $menuData['child'];
 
         <script>
             document.addEventListener('DOMContentLoaded', function () {
-                // 1) Pass initial: déplacer tous les modals existants sous <body>
-                document.querySelectorAll('.modal').forEach(function (m) {
-                    if (m.parentNode !== document.body) document.body.appendChild(m);
-                });
+            // 1) Déplacer immédiatement tous les modals existants sous <body>
+            document.querySelectorAll('.modal').forEach(function (m) {
+                if (m.parentNode !== document.body) document.body.appendChild(m);
+            });
 
-                // 2) Intercepter tous les clics sur triggers avant Bootstrap (capture)
-                document.addEventListener('click', function (e) {
-                    const trigger = e.target.closest('[data-bs-toggle="modal"][data-bs-target]');
-                    if (!trigger) return;
-                    const targetSelector = trigger.getAttribute('data-bs-target');
-                    const modal = document.querySelector(targetSelector);
-                    if (modal && modal.parentNode !== document.body) {
-                    document.body.appendChild(modal);
-                    }
-                }, true);
+            // 2) Intercepter tous les clics sur triggers AVANT Bootstrap (phase capture)
+            document.addEventListener('click', function (e) {
+                const trigger = e.target.closest('[data-bs-toggle="modal"][data-bs-target]');
+                if (!trigger) return;
+                const targetSelector = trigger.getAttribute('data-bs-target');
+                const modal = document.querySelector(targetSelector);
+                if (modal && modal.parentNode !== document.body) {
+                document.body.appendChild(modal);
+                }
+            }, true);
 
-                // 3) Fallback: si un modal s'ouvre autrement, garantir le déplacement
-                document.addEventListener('show.bs.modal', function (event) {
-                    const modal = event.target;
-                    if (modal && modal.parentNode !== document.body) {
-                    document.body.appendChild(modal);
-                    }
-                });
+            // 3) Fallback: si un modal s'ouvre autrement, garantir le déplacement
+            document.addEventListener('show.bs.modal', function (event) {
+                const modal = event.target;
+                if (modal && modal.parentNode !== document.body) {
+                document.body.appendChild(modal);
+                }
+            });
             });
         </script>
 
+
     </body>
 </html>