diff --git a/Js/fonctions.js b/Js/fonctions.js
index 1191d4a0..4cbbdfe0 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -46035,6 +46035,15 @@ $(function(){
 	dataTab();
 	datafiltre();
 	filtreTab();
+
+	// Ecouteur pour nettoyer la modale de détail des actes
+    $(document).on('hidden.bs.modal', '#div_detail_bareme_actes', function () {
+        if ($.fn.DataTable.isDataTable('#table_detail_actes')) {
+            console.log("Destruction de DataTable...");
+            $('#table_detail_actes').DataTable().destroy();
+        }
+        $(this).empty(); 
+    });
 	
 	// Initialiser Select2
     $('.js-example-basic-single').select2();
@@ -92889,23 +92898,21 @@ function actualiser_bareme_acte_lettre_cle() {
  * @param {number} idActesbaremeinitiallettrecle 
  * @param {string} lettreCle 
  */
+/**
+ * Récupère et affiche le détail des actes avec DataTables
+ */
 async function detail_baremeacte_lettre_cle(idActesbaremeinitiallettrecle, lettreCle) {
     const racineWeb = document.getElementById("racineWeb").value;
     const codeLangue = document.getElementById("codeLangue")?.value || 'fr_FR';
     const modalContainer = document.getElementById("div_detail_bareme_actes");
     const url = `${racineWeb}Ajaxbaremelettrecle/detailactes/`;
 
-    // 1. Préparation des données
-    const formData = new FormData();
-    formData.append("idActesbaremeinitiallettrecle", idActesbaremeinitiallettrecle);
-    formData.append("lettreCle", lettreCle);
-
-    // 2. Feedback visuel avant l'appel (Loader dans la modale)
+    // 1. Loader de pré-chargement
     modalContainer.innerHTML = `
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content shadow-lg border-0">
                 <div class="modal-body text-center p-5">
-                    <div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;"></div>
+                    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
                     <p class="mt-3 text-uppercase fw-bold small text-muted">
                         ${codeLangue === "en_US" ? "Loading details..." : "Chargement du détail..."}
                     </p>
@@ -92914,41 +92921,50 @@ async function detail_baremeacte_lettre_cle(idActesbaremeinitiallettrecle, lettr
         </div>
     `;
     
-    // On affiche la modale immédiatement pour montrer le loader
     $(modalContainer).modal("show");
 
     try {
-        // 3. Exécution de la requête Fetch
+        const formData = new FormData();
+        formData.append("idActesbaremeinitiallettrecle", idActesbaremeinitiallettrecle);
+        formData.append("lettreCle", lettreCle);
+
         const response = await fetch(url, {
             method: "POST",
             body: formData
         });
 
-        if (!response.ok) {
-            throw new Error(`Erreur HTTP : ${response.status}`);
-        }
+        if (!response.ok) throw new Error(`Erreur HTTP : ${response.status}`);
 
         const html = await response.text();
-
-        // 4. Injection du contenu reçu (La vue PHP du détail)
         modalContainer.innerHTML = html;
 
+        // 2. Initialisation DataTables après injection HTML
+        setTimeout(() => {
+            if ($.fn.DataTable.isDataTable('#table_detail_actes')) {
+                $('#table_detail_actes').DataTable().destroy();
+            }
+
+            $('#table_detail_actes').DataTable({
+                "language": {
+                    "url": codeLangue === "en_US" 
+                           ? "//cdn.datatables.net/plug-ins/1.13.6/i18n/en-GB.json" 
+                           : "//cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
+                },
+                "pageLength": 10,
+                "lengthMenu": [5, 10, 25, 50],
+                "order": [[0, "asc"]],
+                "columnDefs": [
+                    { "orderable": false, "targets": 5 } // Désactive le tri sur la colonne Actions
+                ],
+                "dom": "<'row mb-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
+                       "<'row'<'col-sm-12'tr>>" +
+                       "<'row mt-3 text-muted small'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
+                "responsive": true
+            });
+        }, 200);
+
     } catch (error) {
-        console.error("Erreur lors du chargement du détail :", error);
-        
-        // Affichage de l'erreur dans la modale
-        modalContainer.innerHTML = `
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-body alert alert-danger m-3 shadow-sm">
-                        <i class="fas fa-exclamation-triangle me-2"></i>
-                        ${codeLangue === "en_US" ? "Unable to load data." : "Impossible de charger les données."}
-                    </div>
-                    <div class="modal-footer border-0">
-                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Fermer</button>
-                    </div>
-                </div>
-            </div>
-        `;
+        console.error("Erreur :", error);
+        modalContainer.innerHTML = `<div class="modal-dialog"><div class="modal-content"><div class="modal-body alert alert-danger m-3">${codeLangue === "en_US" ? "Error loading data." : "Erreur lors du chargement."}</div></div></div>`;
     }
-}
\ No newline at end of file
+}
diff --git a/Vue/Ajaxbaremelettrecle/detailactes.php b/Vue/Ajaxbaremelettrecle/detailactes.php
index 9555841d..4f69ebbc 100644
--- a/Vue/Ajaxbaremelettrecle/detailactes.php
+++ b/Vue/Ajaxbaremelettrecle/detailactes.php
@@ -2,9 +2,6 @@
     $adminProd = $_SESSION['adminProd'];
     $lettreCle = $_SESSION['lettreCle'];
 ?>
-<input type="hidden" id="idActesbaremeinitiallettrecle" name="idActesbaremeinitiallettrecle" value="<?= $_SESSION['idActesbaremeinitiallettrecle'] ?>">
-<input type="hidden" id="lettreCle" name="lettreCle" value="<?= $lettreCle ?>">
-
 <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
     <div class="modal-content shadow-lg border-0">
         <div class="modal-header bg-light border-bottom-0 py-3">
@@ -16,17 +13,15 @@
         </div>
         
         <div class="modal-body p-4">
-            <input class="sr-only" type="text" id="datejour" name="datejour" value="<?= datelang(date('Y/m/d'), $_SESSION['lang']); ?>">
-            
-            <div class="mb-3 border-start border-4 border-primary ps-3 py-1">
-                <p class="text-muted small mb-0 fw-bold">
-                    <?= _("Liste chronologique des actes associés à cette lettre clé pour ce barème.") ?>
+            <div class="mb-4 border-start border-4 border-primary ps-3 py-1 bg-primary bg-opacity-10 rounded-end">
+                <p class="text-primary small mb-0 fw-bold">
+                    <i class="fas fa-info-circle me-1"></i> <?= _("Utilisez la barre de recherche pour filtrer un acte spécifique.") ?>
                 </p>
             </div>
 
             <?php if(count($detailactes) > 0): ?>
-                <div class="table-responsive rounded border shadow-sm">
-                    <table class="table table-sm table-hover align-middle mb-0" style="font-size: 0.85rem;">
+                <div class="table-responsive p-1">
+                    <table id="table_detail_actes" class="table table-sm table-hover align-middle border shadow-sm" style="width:100%;">
                         <thead class="table-dark">
                             <tr class="text-center small">
                                 <th class="py-2 ps-3 text-start"><?= _("Libellé de l'Acte") ?></th>
@@ -44,37 +39,23 @@
                                 $libelle  = est_anglophone() ? $this->nettoyer($v['libelleEng']) : $this->nettoyer($v['libelle']);
                                 $isActif  = ($this->nettoyer($v['actif']) == "1");
                             ?>
-                            
-                            <tr class="text-center <?= ($supprime == '1') ? 'table-danger opacity-50' : ''; ?>">
+                            <tr class="text-center <?= ($supprime == '1') ? 'table-danger opacity-50 text-decoration-line-through' : ''; ?>">
                                 <td class="text-start ps-3 fw-bold text-dark border-end"><?= $libelle ?></td>
-                                
                                 <td class="fw-bold"><?= $this->nettoyer($v['coefficient']); ?></td>
-                                
                                 <td class="text-primary fw-bold"><?= format_N($this->nettoyer($v['forfaitPlafond']));?></td>
-                                
-                                <td class="text-danger"><?= $this->nettoyer($v['ticketModerateur']);?>%</td>
-                                
+                                <td class="text-danger fw-bold"><?= $this->nettoyer($v['ticketModerateur']);?>%</td>
                                 <td>
-                                    <?php if($isActif): ?>
-                                        <span class="badge bg-success-subtle text-success rounded-pill px-2" style="font-size: 0.7rem;">
-                                            <?= _("Oui") ?>
-                                        </span>
-                                    <?php else: ?>
-                                        <span class="badge bg-secondary-subtle text-secondary rounded-pill px-2" style="font-size: 0.7rem;">
-                                            <?= _("Non") ?>
-                                        </span>
-                                    <?php endif; ?>
+                                    <span class="badge <?= $isActif ? 'bg-success' : 'bg-secondary' ?> rounded-pill">
+                                        <?= $isActif ? _("Oui") : _("Non") ?>
+                                    </span>
                                 </td>
-
                                 <td class="pe-3">
                                     <?php if($supprime == '0'): ?>
-                                        <button type="button" class="btn btn-sm btn-outline-danger border-0" 
+                                        <button type="button" class="btn btn-sm text-danger border-0 p-0" 
                                                 onClick="javascript:supprimer_baremeacte_lettre_cle_detail('<?= $adminProd?>', <?= $idActe ?>);"
                                                 title="<?= _("Supprimer") ?>">
                                             <i class="fas fa-trash-alt"></i>
                                         </button>
-                                    <?php else: ?>
-                                        <span class="text-muted small italic" style="font-size: 0.7rem;"><?= _("Supprimé") ?></span>
                                     <?php endif; ?>
                                 </td>
                             </tr>
@@ -83,9 +64,9 @@
                     </table>
                 </div>
             <?php else: ?>
-                <div class="alert alert-warning border-dashed text-center p-5">
+                <div class="alert alert-warning text-center p-5 border-dashed">
                     <i class="fas fa-search fa-3x mb-3 opacity-25"></i>
-                    <p class="mb-0 fw-bold"><?= _("Aucun acte trouvé pour ce détail.") ?></p>
+                    <p class="mb-0 fw-bold"><?= _("Aucun acte trouvé.") ?></p>
                 </div>
             <?php endif; ?>     
         </div>
@@ -99,8 +80,28 @@
 </div>
 
 <style>
-    .border-dashed { border: 2px dashed #dee2e6 !important; background: none; }
     .opacity-50 { text-decoration: line-through rgba(220, 53, 69, 0.3); }
+    
+    /* Correction de la largeur DataTables en modale */
+    #table_detail_actes { width: 100% !important; border-collapse: collapse !important; }
+    
+    /* Design du champ de recherche */
+    .dataTables_filter input {
+        border: 1px solid #0d6efd;
+        border-radius: 5px;
+        padding: 4px 10px;
+        font-size: 0.85rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+    
+    /* Pagination personnalisée */
+    .dataTables_paginate .paginate_button.current {
+        background: #0d6efd !important;
+        color: white !important;
+        border: none;
+        border-radius: 4px;
+    }
+    
+    .border-dashed { border: 2px dashed #dee2e6 !important; background: none; }
     .modal-xl { max-width: 90% !important; }
-    .btn-outline-danger:hover { background-color: #dc3545; color: white; }
 </style>
\ No newline at end of file