diff --git a/Js/fonctions.js b/Js/fonctions.js
index 7135cefe..bd0df09d 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -46709,43 +46709,56 @@ function ctrlkeypress_liste_garants(ev)
 	}
 }
 
-function afficher_liste_garants()
-{
-	donnees = "";
-	donnees_retour = "";
+function afficher_liste_garants() {
+    // 1. Récupération des critères
+    const typeGarant     = $("#typeGarant").val() || 0;
+    const libelle        = $("#libelle").val();
+    const codeGcAssureur = $("#codeGcAssureur").val();
+    const racineWeb      = $("#racineWeb").val();
 
-	typeGarant	= $("#typeGarant").val();
-	libelle 	= $("#libelle").val();
-	codeGcAssureur 	= $("#codeGcAssureur").val();
-	
-	if(typeGarant==''){
-		typeGarant=0;
-	}
-	
-	donnees += 'typeGarant=' + typeGarant;
-	donnees += '&libelle=' + libelle;	
-	donnees += '&codeGcAssureur=' + codeGcAssureur;	
-	
-	//alert(donnees);
-	//return;
-	
-	$("#div_gcs").html('<div style="padding-top:80px; text-align:center; font-size:14px; color: #0088cf; "><span><i class="fa fa-spinner fa-spin fa-5x" >' + '</span></div>');
-	
-	$.ajax({
-		url: $("#racineWeb").val()+"Ajaxlistegarantsparametrage/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData) {			
-		},
-		success: function(data) {
-			donnees_retour = data;
-		},
-		complete: function() {
-			$("#div_gcs").html(donnees_retour);
-			dataTableSpeciale();
-			$("#nbligne").val("Nbre Lignes : "+$("#nbligne_info").val());
-		}
-	}); 
+    // 2. Préparation des données (Objet propre)
+    const donnees = {
+        typeGarant: typeGarant,
+        libelle: libelle,
+        codeGcAssureur: codeGcAssureur
+    };
+
+    // 3. Feedback Visuel Neutral Pro
+    const loaderHtml = `
+        <div class="text-center p-5 my-5">
+            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
+            <p class="mt-3 text-muted fw-bold animate__animated animate__fadeIn animate__infinite">
+                ${(typeof _ !== 'undefined') ? _("Chargement des porteurs de risque...") : "Chargement des porteurs de risque..."}
+            </p>
+        </div>`;
+    
+    $("#div_gcs").html(loaderHtml);
+
+    // 4. Appel AJAX
+    $.ajax({
+        url: racineWeb + "Ajaxlistegarantsparametrage/",
+        type: 'post',
+        data: donnees,
+        success: function(data) {
+            // Injection des résultats
+            $("#div_gcs").html(data);
+            
+            // Initialisation DataTables Standard Neutral Pro
+            if (typeof initDataTableReference === 'function') {
+                initDataTableReference('#tableGarants', 'Liste_Garants');
+            } else if (typeof dataTableSpeciale === 'function') {
+                dataTableSpeciale();
+            }
+
+            // Mise à jour du compteur (Badge dynamique au lieu de l'input)
+            const nbre = $("#nbligne_info").val() || 0;
+            $("#badge-total-garants").text(nbre + " " + (nbre > 1 ? "Lignes" : "Ligne"));
+        },
+        error: function(xhr) {
+            toastr.error("Erreur lors de la récupération des données");
+            $("#div_gcs").html('<div class="alert alert-danger mx-3 mt-3">Erreur de connexion au serveur.</div>');
+        }
+    });
 }
 
 function desactive_gc_assureur(idGarant){
diff --git a/Vue/Ajaxlistegarantsparametrage/index.php b/Vue/Ajaxlistegarantsparametrage/index.php
index b7fe5bc6..4d9b6534 100755
--- a/Vue/Ajaxlistegarantsparametrage/index.php
+++ b/Vue/Ajaxlistegarantsparametrage/index.php
@@ -1,46 +1,88 @@
 <?php 
-	$nbligne = count($garants); 
-	$superUser = $_SESSION['superUser'];
+    $nbligne = count($garants); 
+    $superUser = $_SESSION['superUser'] ?? "0";
 ?>
 
+<div class="card border-0 shadow-sm overflow-hidden animate__animated animate__fadeIn">
+    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
+        <h6 class="mb-0 fw-bold text-muted text-uppercase small">
+            <i class="fas fa-list me-2"></i><?= _("Liste des Porteurs de Risque") ?>
+        </h6>
+        <span class="badge bg-primary-ghost text-primary rounded-pill px-3 py-2 fw-bold" id="badge-total-garants">
+            <?= $nbligne ?> <?= ($nbligne > 1) ? _("Lignes") : _("Ligne") ?>
+        </span>
+    </div>
 
-
-<div id="div_gcs">	
-	<table class="table table-striped table-bordered table-hover table-condensed table-responsive tabspeciale compact" style="font-size:8pt;">
-		<thead>
-		  <tr>
-				<th style="text-align:center" width="10%" > Code </th>
-				<th width="50%" style="text-align:center" > <?= _("Nom") ?> </th>
-				<th width="30%" style="text-align:center" > <?= _("Type Garant") ?> </th>
-				<th width="10%" style="text-align:center" > <?= _("Nombre Police") ?> </th>
-				<!--
-				<?php if($superUser=="1"):?>
-				<th width="10%" style="text-align:center" > <?= _("Action") ?> </th>
-				<?php endif;?>
-				-->
-		  </tr>
-		</thead>
-		<tbody>
-			<?php foreach ($garants as $gc):
-				$idGc	= $this->nettoyer($gc['id']);
-				$codeGcAssureur	= $this->nettoyer($gc['codeGcAssureur']);
-				$nbPoliceGarant = $this->nettoyer($gc['nbPoliceGarant']);
-			?>
-			  <tr ondblclick="javascript:afficher_gc_assureur('<?=$idGc?>');" valign="top">				
-				<td align="center"> <input type="button" style='font-size:10pt;' class = "form-control btn btn-primary" value="<?= $codeGcAssureur ?>" onClick="javascript:afficher_gc_assureur('<?=$idGc?>');" title="Fiche Garant"> </td>
-				<td align="center"> <?= $this->nettoyer($gc['libelle']) ?> </td>
-				<td align="center"> <?= $this->nettoyer($gc['typegc']) ?> </td>
-				<td align="center"> <?= $nbPoliceGarant ?> </td>
-				<!--
-				<?php if($superUser=="1"):?>
-				<td align="center">
-					<button type="button" class="form-control  btn btn-danger" onclick="javascript:desactive_gc_assureur('<?=$idGc?>');" style='font-size:10pt;'  > <?= _("Désactiver") ?> </button>
-				</td>
-				<?php endif;?>
-				-->
-			  </tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
-	<input class="sr-only" type="text" id="nbligne_info" name="nbligne_info" value="<?= $nbligne ?>" >
+    <div class="table-responsive">
+        <table id="tableGarants" class="table table-hover align-middle mb-0" style="font-size: 9pt;">
+            <thead class="bg-light">
+                <tr>
+                    <th class="text-center py-3" width="12%"><?= _("Code") ?></th>
+                    <th class="py-3" width="40%"><?= _("Nom / Raison Sociale") ?></th>
+                    <th class="py-3" width="28%"><?= _("Type") ?></th>
+                    <th class="text-center py-3" width="10%"><?= _("Polices") ?></th>
+                    <?php if($superUser == "1"): ?>
+                    <th class="text-center py-3" width="10%"><?= _("Action") ?></th>
+                    <?php endif; ?>
+                </tr>
+            </thead>
+            <tbody>
+                <?php foreach ($garants as $gc):
+                    $idGc = $this->nettoyer($gc['id']);
+                    $code = $this->nettoyer($gc['codeGcAssureur']);
+                    $libelle = $this->nettoyer($gc['libelle']);
+                    $type = $this->nettoyer($gc['typegc']);
+                    $nbPolice = (int)$gc['nbPoliceGarant'];
+                ?>
+                <tr ondblclick="afficher_gc_assureur('<?= $idGc ?>');" style="cursor: pointer;">
+                    <td class="text-center">
+                        <span class="badge bg-primary px-3 py-2 rounded-pill shadow-xs" 
+                              onclick="afficher_gc_assureur('<?= $idGc ?>');" 
+                              title="<?= _("Voir la fiche") ?>" style="cursor: pointer;">
+                            <?= $code ?>
+                        </span>
+                    </td>
+                    <td class="fw-bold text-dark text-uppercase"><?= $libelle ?></td>
+                    <td>
+                        <span class="text-muted"><i class="fas fa-tag me-1 opacity-50"></i> <?= $type ?></span>
+                    </td>
+                    <td class="text-center">
+                        <span class="badge bg-light text-dark border fw-normal px-2">
+                            <?= $nbPolice ?>
+                        </span>
+                    </td>
+                    <?php if($superUser == "1"): ?>
+                    <td class="text-center">
+                        <button type="button" class="btn btn-outline-danger btn-sm rounded-pill" 
+                                onclick="desactive_gc_assureur('<?= $idGc ?>');" 
+                                title="<?= _("Désactiver") ?>">
+                            <i class="fas fa-ban"></i>
+                        </button>
+                    </td>
+                    <?php endif; ?>
+                </tr>
+                <?php endforeach; ?>
+            </tbody>
+        </table>
+    </div>
 </div>
+
+<input type="hidden" id="nbligne_info" value="<?= $nbligne ?>">
+
+<style>
+    /* Table Styling Neutral Pro */
+    #tableGarants thead th {
+        border-bottom: 2px solid #f1f4f6;
+        color: #6c757d;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    #tableGarants tbody tr {
+        transition: background-color 0.2s ease;
+    }
+    #tableGarants tbody tr:hover {
+        background-color: rgba(33, 46, 83, 0.02) !important;
+    }
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+</style>
\ No newline at end of file