diff --git a/Js/fonctions.js b/Js/fonctions.js
index 8bd792fa..db9c150c 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -92954,13 +92954,28 @@ async function chargerContenuDetailActe(idInitial, lettre, mode = 'complet') {
 
 // Petite fonction pour éviter de dupliquer le code DataTable
 function initDataTableDetail() {
+    const codeLangue = document.getElementById("codeLangue")?.value || 'fr_FR';
+
     if ($.fn.DataTable.isDataTable('#table_detail_actes')) {
         $('#table_detail_actes').DataTable().destroy();
     }
+
     $('#table_detail_actes').DataTable({
-        "language": { "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json" },
+        "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,
-        "dom": "lfrtip"
+        "responsive": true,
+        /* Explication du DOM :
+           - <'row' ... > : On crée une ligne Bootstrap
+           - <'col-md-6'l> : La colonne de gauche (50%) pour le 'l' (Length / Sélecteur de nombre de lignes)
+           - <'col-md-6 text-end'f> : La colonne de droite (50%) avec 'text-end' pour le 'f' (Filter / Recherche)
+        */
+        "dom": "<'row mb-2'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6 text-end'f>>" +
+               "<'row'<'col-sm-12'tr>>" +
+               "<'row mt-3'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 text-end'p>>"
     });
 }
 
diff --git a/Vue/Ajaxbaremelettrecle/detailactes.php b/Vue/Ajaxbaremelettrecle/detailactes.php
index 8515275b..37b5e655 100644
--- a/Vue/Ajaxbaremelettrecle/detailactes.php
+++ b/Vue/Ajaxbaremelettrecle/detailactes.php
@@ -111,6 +111,19 @@
         border-radius: 4px;
     }
     
+    .dataTables_filter label {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+    }
+
+    .dataTables_filter input {
+        margin-left: 0.5rem !important; /* Espace entre le texte et le champ */
+        width: 200px !important; /* Largeur fixe pour la barre de recherche */
+    }
+
     .border-dashed { border: 2px dashed #dee2e6 !important; }
     .modal-xl { max-width: 90% !important; }
+
+
 </style>
\ No newline at end of file