diff --git a/Js/fonctions.js b/Js/fonctions.js
index dc7f71c4..e6f56812 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -52313,90 +52313,58 @@ function actualisercollege_temp(){
 
 // 17/11/2020
 //afficher_tauxajustement_garant
-function afficher_bareme_accessoire_garant(){
-	
-	var codeGcAssureur = $('#codeGcAssureur').val();
-	var codeLangue 	= $("#codeLangue").val();
-	
-	afficheBoutons(0);
-	
-	donnees = 'codeGcAssureur='+codeGcAssureur;
-	
-	
-	
-	$.ajax({
-		url: $("#racineWeb").val()+"Ajaxlisterbaremeaccessoiregarant/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData){			
-			//alert("Erreur : "+errorData);
-		},
-		success: function(data) {
-			$('#div_lister_table').html(data);
-			
-			if(codeLangue=="en_US")
-			{
-				$('#tableLister').DataTable({
-					responsive: true,
-					"order": [[ 1, "desc" ],[6, "asc"],[2, "asc"]],
-					"lengthMenu": [ 20, 50, 100],
-					"language": {
-					"lengthMenu":"Display _MENU_ records per page",
-					"zeroRecords": "Nothing found - sorry",
-					"info": "Showing page _PAGE_ of _PAGES_",
-					"infoEmpty": "No records available",
-					"search": "Search:",
-					"paginate": {
-						"next":       "►",
-						"previous":   "◄",
-						"first":      "|◄",
-						"last":       "►|"
-					},
-					"infoFiltered": "(filtered from _MAX_ total records)",
-					"aoColumnDefs": [
-					  { "bSearchable": false, "aTargets": [ 0 ] }
-					]
-					}
-				});
-			}
-			else
-			{
-				$('#tableLister').DataTable({
-					responsive: true,
-					"order": [[ 1, "desc" ],[6, "asc"],[2, "asc"]],
-					"lengthMenu": [ 20, 50, 100],
-					"language": {
-					  "lengthMenu":"Affiche _MENU_ par page",
-					  "zeroRecords": "Désolé - Aucune donnée trouvée",
-					  "info": "_PAGE_ sur _PAGES_ pages",
-					  "infoEmpty": "Pas d'enregistrement valable",
-					  "search": "Recherche:",
-					  "paginate": {
-						"next":       "►",
-						"previous":   "◄",
-						"first":      "|◄",
-						"last":       "►|"
-					  },
-					  "infoFiltered": "(filtré de _MAX_ total enregistrements)",
-					  "aoColumnDefs": [
-						  { "bSearchable": false, "aTargets": [ 0 ] }
-						]
-					}
-				});
-			}
-			
-				
-		},
-		complete: function() {
-			
-		}
-	}); 
-	
+/**
+ * Charge et affiche le barème des accessoires pour le garant sélectionné
+ */
+function afficher_bareme_accessoire_garant() {
+    const codeGcAssureur = $('#codeGcAssureur').val();
+    const codeLangue = $("#codeLangue").val();
+    const racineWeb = $("#racineWeb").val();
+    const $divLister = $('#div_lister_table');
+
+    if (!codeGcAssureur) return;
+
+    // 1. Feedback visuel (SaaS UX)
+    const loadingMsg = (codeLangue === "en_US") ? "Loading schedule..." : "Chargement du barème...";
+    $divLister.html(`
+        <div class="d-flex flex-column align-items-center justify-content-center p-5 text-primary">
+            <div class="spinner-border mb-3" role="status"></div>
+            <h6 class="fw-bold text-uppercase small">${loadingMsg}</h6>
+        </div>
+    `);
+
+    // 2. Appel AJAX
+    $.ajax({
+        url: racineWeb + "Ajaxlisterbaremeaccessoiregarant/",
+        type: 'post',
+        data: { codeGcAssureur: codeGcAssureur },
+        success: function(data) {
+            // Injection des données
+            $divLister.hide().html(data).fadeIn(300);
+
+            // 3. Initialisation via SmartTable (Gestion auto de la langue et du style)
+            const titreExport = (codeLangue === "en_US") ? "Guarantee Fees Schedule" : "Barème Accessoires Garant";
+            
+            /**
+             * Tri multi-colonnes demandé :
+             * [1, 'desc'] -> Type Contrat
+             * [6, 'asc']  -> Application
+             * [2, 'asc']  -> Minimale
+             */
+            const multiOrder = [[1, "desc"], [6, "asc"], [2, "asc"]];
+
+            setTimeout(() => {
+                //initSmartTable('#tableLister', titreExport, multiOrder, true);
+				initSmartTable('#tableLister', titreExport, false, true);
+            }, 100);
+        },
+        error: function() {
+            $divLister.html('<div class="alert alert-danger">Erreur de chargement.</div>');
+        }
+    });
 }
 
 
-
-
 // 23/11/2020
 
 function changer_lien_parente_consulter_college_temp()
diff --git a/Vue/Ajaxlisterbaremeaccessoiregarant/index.php b/Vue/Ajaxlisterbaremeaccessoiregarant/index.php
index 5905f47e..b5d1cb54 100755
--- a/Vue/Ajaxlisterbaremeaccessoiregarant/index.php
+++ b/Vue/Ajaxlisterbaremeaccessoiregarant/index.php
@@ -1,58 +1,86 @@
 <?php 
-	$nbreTotal = count($bareme);
-	
-	if($nbreTotal < 10){
-		$nbreTotal = '0'.$nbreTotal;	
-	}else{
-		$nbreTotal =  format_N($nbreTotal);
-	}
-	
-	$superUser = $_SESSION['superUser'];
+    $nbreTotal = count($bareme);
+    $nbreAffiche = ($nbreTotal < 10) ? '0'.$nbreTotal : format_N($nbreTotal);
+    $superUser = $_SESSION['superUser'];
 ?>
 
-<table style="margin: auto" class="table-responsive">
-	<tbody>
-		<td><input class="form-control" style="text-align: center; font-size:10pt;" type="text" id="nbreTotal" name="nbreTotal" value="<?= _("Lignes Total").": ". $nbreTotal; ?>" readonly> </td>
-	</tbody>
-</table>
+<div class="d-flex justify-content-start mt-1 mb-2 animate__animated animate__fadeIn">
+    <div class="badge bg-light text-primary border px-3 py-2 shadow-sm" style="border-radius: var(--radius-md);">
+        <i class="fas fa-list-ul me-2"></i><?= _("Total") ?> : <span class="fw-bold"><?= $nbreAffiche ?></span> <?= _("lignes") ?>
+    </div>
+</div>
+
 <input type="hidden" id="total" value="<?= $nbreTotal; ?>">
-<table id="tableLister" class="table table-striped table-bordered table-hover table-condensed table-responsive compact">
-	<thead>
-	  <tr>
-	    <th class="text-center"><?=_("Centre gestion")?></th>
-	    <th class="text-center"><?=_("Type Contrat")?></th>
-		<th class="text-center"><?=_("Prime Mini")?></th>
-		<th class="text-center"><?=_("Prime Maxi")?></th>
-		<th class="text-center"><?=_("Taux")?></th>
-		<th class="text-center"><?=_("Accessoire")?></th>
-		<th class="text-center"><?=_("Application")?></th>
-		<th class="text-center">Action</th>
-		<!--<th class="text-center">Supprimer</th>-->
-	  </tr>
-	</thead>
-	<tbody>
-		<?php foreach ($bareme as $v):
-			$idData = $this->nettoyer($v['id']);
-			$typecontrat = $this->nettoyer($v['typecontrat']);
-			$appli 		 = $this->nettoyer($v['appli']);
-			if (est_anglophone()){
-				$typecontrat = $this->nettoyer($v['typecontratEng']);
-				$appli 		 = $this->nettoyer($v['appliEng']);
-			}
-		?>
-		  <tr valign="top">
-			<td class="text-center" ><?= $this->nettoyer($v['codeSociete']); ?></td>
-			<td class="text-center" width="15%"><?= $typecontrat; ?></td>
-		  	<td class="text-center" width="10%"><?= format_N($this->nettoyer($v['primeMin'])); ?></td>
-			<td class="text-center" width="10%"><?= format_N($this->nettoyer($v['primeMax'])); ?></td>
-			<td class="text-center" width="5%"><?= number_format($this->nettoyer($v['tauxAccessoire']),2); ?></td>
-			<td class="text-center" width="10%"><?= format_N($this->nettoyer($v['accessoireForfait'])); ?></td>
-			<td class="text-center" width="20%"><?= $appli; ?></td>
-			<td class="text-center" width="10%">
-				<button style="width:100%" class ="form-control btn btn-primary" type="button" id="btn-editer" name="Modifier"
-				onclick="JAVASCRIPT:formModifTableRef(<?= $idData; ?>);" ><?= _("Modifier") ?></button>
-			</td>
-			</tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
\ No newline at end of file
+
+<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" style="width:100%">
+                <thead class="table-light">
+                    <tr class="text-uppercase small">
+                        <th class="text-center py-3 ps-3"><?= _("Centre") ?></th>
+                        <th class="text-center"><?= _("Type Contrat") ?></th>
+                        <th class="text-center"><?= _("Prime Mini") ?></th>
+                        <th class="text-center"><?= _("Prime Maxi") ?></th>
+                        <th class="text-center"><?= _("Taux") ?></th>
+                        <th class="text-center"><?= _("Accessoire") ?></th>
+                        <th class="text-center"><?= _("Application") ?></th>
+                        <th class="text-center no-export pe-3" width="120px">Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($bareme as $v):
+                        $idData = $this->nettoyer($v['id']);
+                        $typecontrat = est_anglophone() ? $this->nettoyer($v['typecontratEng']) : $this->nettoyer($v['typecontrat']);
+                        $appli = est_anglophone() ? $this->nettoyer($v['appliEng']) : $this->nettoyer($v['appli']);
+                    ?>
+                    <tr>
+                        <td class="text-center fw-bold text-dark ps-3"><?= $this->nettoyer($v['codeSociete']); ?></td>
+                        <td class="text-center small"><?= $typecontrat; ?></td>
+                        <td class="text-center text-primary fw-bold"><?= format_N($this->nettoyer($v['primeMin'])); ?></td>
+                        <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); ?> %
+                            </span>
+                        </td>
+                        <td class="text-center text-success fw-bold"><?= format_N($this->nettoyer($v['accessoireForfait'])); ?></td>
+                        <td class="text-center small text-muted"><?= $appli; ?></td>
+                        <td class="text-center pe-3">
+                            <button type="button" 
+                                    class="btn btn-outline-primary btn-sm rounded-pill px-3 shadow-sm fw-bold w-100" 
+                                    onclick="formModifTableRef(<?= $idData; ?>);">
+                                <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
+                            </button>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<style>
+    #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>
+    /**
+     * Cette vue étant chargée dynamiquement en AJAX après sélection du Garant,
+     * nous réinitialisons le DataTable avec les paramètres ESI.
+     */
+    $(document).ready(function() {
+        if ($.fn.DataTable.isDataTable('#tableLister')) {
+            $('#tableLister').DataTable().destroy();
+        }
+
+        if (typeof initSmartTable === 'function') {
+            const titreExport = "<?= _('Tableau des tranches accessoires Garant') ?>";
+            // defaultOrder est mis à false car le tri est géré par la requête SQL
+            initSmartTable('#tableLister', titreExport, false, true);
+        }
+    });
+</script>
\ No newline at end of file