diff --git a/Vue/Ajaxtblisterbaremeaccessoireavenant/index.php b/Vue/Ajaxtblisterbaremeaccessoireavenant/index.php
index 6eb632b9..09d94aef 100755
--- a/Vue/Ajaxtblisterbaremeaccessoireavenant/index.php
+++ b/Vue/Ajaxtblisterbaremeaccessoireavenant/index.php
@@ -16,7 +16,7 @@
 <div class="card border-0 shadow-sm animate__animated animate__fadeInUp">
     <div class="card-body p-0">
         <div class="table-responsive">
-            <table id="tableLister" class="table table-hover align-middle mb-0 datatable-inter compact">
+            <table id="tableLister" class="table table-hover align-middle mb-0 datatable-inter compact" style="width:100%">
                 <thead class="table-light">
                     <tr class="text-uppercase small">
                         <th class="text-center py-3 ps-3"><?= _("Centre") ?></th>
@@ -42,7 +42,7 @@
                         <td class="text-center text-primary fw-bold"><?= format_N($this->nettoyer($v['primeMax'])); ?></td>
                         <td class="text-center">
                             <span class="badge bg-light text-dark border">
-                                <?= number_format($this->nettoyer($v['tauxAccessoire']),2); ?> %
+                                <?= number_format($this->nettoyer($v['tauxAccessoire']), 2); ?> %
                             </span>
                         </td>
                         <td class="text-center text-success fw-bold"><?= format_N($this->nettoyer($v['accessoireForfait'])); ?></td>
@@ -63,20 +63,22 @@
 </div>
 
 <style>
-    /* Harmonisation avec le style ESI */
+    /* Styles spécifiques au tableau inclus */
     #tableLister.compact tbody td { padding: 10px 8px !important; }
     #tableLister.compact thead th { font-size: 0.7rem; font-weight: 700; color: #495057; }
     .bg-light.text-primary.border { border-color: rgba(13, 110, 253, 0.2) !important; }
 </style>
 
 <script>
-    $(document).ready(function() {
-        const titreExport = "<?= _('Tableau des tranches accessoires') ?>";
-        
-        /* Tri multi-colonnes :
-           [1, 'desc'] -> Type Contrat (2ème colonne) décroissant
-           [2, 'asc']  -> Minimale (3ème colonne) croissant
-        */
-        initSmartTable('#tableLister', titreExport, [[1, 'desc'], [2, 'asc']], true);
-    });
+    /** * IMPORTANT : Ce script s'exécute quand le tableau est chargé via AJAX.
+     * Si chargé via require, le $(document).ready du fichier parent prendra le relais.
+     */
+    if ($.fn.DataTable.isDataTable('#tableLister')) {
+        $('#tableLister').DataTable().destroy();
+    }
+    
+    // On ré-initialise au cas où c'est un retour AJAX
+    if (typeof initSmartTable === 'function') {
+        initSmartTable('#tableLister', "<?= _('Tableau des tranches accessoires') ?>", [[1, 'desc'], [2, 'asc']], true);
+    }
 </script>
\ No newline at end of file
diff --git a/Vue/Tranchesaccessoires/index.php b/Vue/Tranchesaccessoires/index.php
index 5bae0d37..1a0c9d5d 100755
--- a/Vue/Tranchesaccessoires/index.php
+++ b/Vue/Tranchesaccessoires/index.php
@@ -7,9 +7,7 @@
                 </div>
                 <div>
                     <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Grille des accessoires") ?></h4>
-                    <p class="text-muted small mb-0">
-                        <?= _("Gestion des barèmes de frais accessoires par tranche de prime") ?> 
-                    </p>
+                    <p class="text-muted small mb-0"><?= _("Gestion des barèmes de frais accessoires par tranche de prime") ?></p>
                 </div>
             </div>
             <div class="d-flex gap-2">
@@ -18,17 +16,33 @@
         </div>
     </div>
 
-    <div id="div_entete_table" class="mb-2"></div>
-    <div id="div_maj_table" class="mb-3"></div>
+    <div id="div_entete_table" class="mb-2 animate__animated animate__fadeIn"></div>
+    <div id="div_maj_table" class="mb-3 animate__animated animate__fadeIn"></div>
 
-    <div id="div_lister_table" class="card border-0 shadow-sm animate__animated animate__fadeInUp">
-        <?php require "Vue/Ajaxtblisterbaremeaccessoireavenant/index.php";?>
+    <div id="div_lister_table">
+        <?php require "Vue/Ajaxtblisterbaremeaccessoireavenant/index.php"; ?>
     </div>
 </div>
 
 <style>
     .bg-primary-ghost { background-color: rgba(13, 110, 253, 0.1); }
-    /* Optimisation du tableau pour DataTables */
-    .datatable-inter.compact tbody td { padding: 12px 8px !important; }
-    .datatable-inter.compact thead th { font-size: 0.75rem; letter-spacing: 0.5px; }
+    /* Ajustements pour que le tableau remplisse bien sa carte */
+    #div_lister_table .card { border: none; }
 </style>
+
+<script>
+    $(document).ready(function() {
+        // Fonction d'initialisation dédiée pour éviter les conflits
+        function chargerDataTableAccessoires() {
+            const titreExport = "<?= _('Tableau des tranches accessoires') ?>";
+            
+            // On vérifie si la table existe dans le DOM (via le require)
+            if ($('#tableLister').length > 0) {
+                initSmartTable('#tableLister', titreExport, [[1, 'desc'], [2, 'asc']], true);
+            }
+        }
+
+        // Appel au chargement initial
+        chargerDataTableAccessoires();
+    });
+</script>
\ No newline at end of file