diff --git a/Js/fonctions.js b/Js/fonctions.js
index 3ac9674d..03b26e02 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -83411,32 +83411,57 @@ function afficher_tauxajustement_garant(){
 	
 }
 
-function affiche_garants_territoire()
-{
-	var codeTerritoire = $('#codeTerritoire').val();
-	
-	donnees = 'codeTerritoire='+codeTerritoire;
-	
-	div_garant=$("#div_garant");
-	
-	div_garant.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()+"Ajaxgarantterritoire/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData){			
-			//alert("Erreur : "+errorData);
-		},
-		success: function(data) {
-			
-			$('#div_garant').html(data);
-			datatab_plus();
-		},
-		complete: function() {
-			
-		}
-	}); 
+/**
+ * Charge les accessoires associés à un territoire et initialise la table
+ */
+function affiche_garants_territoire() {
+    var codeTerritoire = $('#codeTerritoire').val();
+    var racineWeb = $("#racineWeb").val();
+    var $divGarant = $("#div_garant");
+    
+    if (!codeTerritoire) return;
+
+    // 1. Loader moderne (ESI Style)
+    $divGarant.html(`
+        <div class="d-flex flex-column align-items-center justify-content-center p-5 text-primary animate__animated animate__fadeIn">
+            <div class="spinner-border mb-3" role="status" style="width: 3rem; height: 3rem;"></div>
+            <h6 class="fw-bold text-uppercase small"><?= _("Chargement des données...") ?></h6>
+        </div>
+    `);
+
+    // 2. Appel AJAX
+    $.ajax({
+        url: racineWeb + "Ajaxgarantterritoire/",
+        type: 'post',
+        data: { codeTerritoire: codeTerritoire },
+        success: function(data) {
+            // Injection du contenu avec une transition fluide
+            $divGarant.hide().html(data).fadeIn(400);
+
+            // 3. Initialisation de la SmartTable
+            // Paramètre 2 : Titre de la table
+            // Paramètre 3 : false (on garde l'ordre SQL du serveur)
+            // Paramètre 4 : false (MASQUER les boutons Excel et PDF)
+            setTimeout(function() {
+                if (typeof initSmartTable === 'function') {
+                    initSmartTable('#tableLister', 'Liste Garants Territoire', false, false);
+                }
+                
+                // On réactive les styles de focus sur les nouveaux éléments
+                if (typeof stylechampsRequis === 'function') {
+                    stylechampsRequis();
+                }
+            }, 100);
+        },
+        error: function(xhr) {
+            $divGarant.html(`
+                <div class="alert alert-danger border-0 shadow-sm d-flex align-items-center">
+                    <i class="fas fa-exclamation-triangle me-2"></i>
+                    <?= _("Erreur lors du chargement des garants.") ?>
+                </div>
+            `);
+        }
+    });
 }
 
 function ajouter_un_garant_territoire(codeGcAssureur)
diff --git a/Vue/Ajaxgarantterritoire/index.php b/Vue/Ajaxgarantterritoire/index.php
index c5207a3c..ebb721b2 100755
--- a/Vue/Ajaxgarantterritoire/index.php
+++ b/Vue/Ajaxgarantterritoire/index.php
@@ -1,71 +1,95 @@
-<div id="div_garant">
-	<div class="row">	
-		<div id="div_sans_territoire" class="col-5" >
-			<legend> <?= _("Sans accessoires etendu du territoire") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive datatabplus compact" style="font-size:10pt;">
-				<thead>
-				  <tr>
-					<th style='text-align:center'> <?= _("Garants") ?> </th>
-					<th width="20%" style='text-align:center'> => </th>
-				  </tr>
-				
-				  <tr>
-					<th colspan="2"> <button type="button" style="font-size:10pt;" class="form-control btn btn-primary" onclick="javascript:ajouter_tous_garants_territoire();" > <?= _("Ajouter tous"). " ==>" ?> </button> </th> 
-				  </tr>
-				
-				</thead>
+<div id="div_garant" class="animate__animated animate__fadeIn">
+    <div class="row g-4"> 
+        <div id="div_sans_territoire" class="col-md-5">
+            <div class="card border-0 shadow-sm h-100">
+                <div class="card-header bg-light py-3">
+                    <h6 class="card-title mb-0 fw-bold text-muted text-uppercase small">
+                        <i class="fas fa-list me-2"></i><?= _("Sans accessoires étendu") ?>
+                    </h6>
+                </div>
+                <div class="card-body p-0">
+                    <div class="p-2 border-bottom">
+                        <button type="button" class="btn btn-primary btn-sm w-100 fw-bold rounded-pill shadow-sm" onclick="javascript:ajouter_tous_garants_territoire();">
+                            <?= _("Ajouter tous") ?> <i class="fas fa-angle-double-right ms-1"></i>
+                        </button>
+                    </div>
+                    <div class="table-responsive">
+                        <table id="tableSansTerritoire" class="table table-hover align-middle mb-0 compact" style="width:100%">
+                            <thead class="table-light small text-uppercase">
+                                <tr>
+                                    <th class="ps-3"><?= _("Garants") ?></th>
+                                    <th class="text-center" width="80px">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($garants_sans_territoire as $v):
+                                    $codeGcAssureur = $v['codeGcAssureur'];
+                                ?>
+                                <tr>
+                                    <td class="ps-3 fw-bold small"><?= $this->nettoyer($v['garant']) ?></td>
+                                    <td class="text-center">
+                                        <button class="btn btn-outline-primary btn-sm rounded-circle" title="Ajouter" onClick="javascript:ajouter_un_garant_territoire('<?=$codeGcAssureur?>');">
+                                            <i class="fas fa-chevron-right"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-				<tbody>
-					<?php foreach ($garants_sans_territoire as $v):
-						$codeGcAssureur	= $v['codeGcAssureur'];
-					?>
-					<tr valign="top">
-						<td align='center'><?=  $this->nettoyer($v['garant']) ?></td>
-						<td align='center'> <input type="button" value="=>" onClick="javascript:ajouter_un_garant_territoire('<?=$codeGcAssureur?>');" ></td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-
-		<div id="div_avec_seuil" class="col-7" >
-			<legend> <?= _("Avec accessoires etendu du territoire") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-				<thead>
-				
-				  <tr>
-					<th width="10%" style='text-align:center'> <= </th>
-					<th style='text-align:center'> <?= _("Garant") ?> </th>
-					<th style='text-align:center'> <?= _("Montant") ?> </th>
-				  </tr>
-				  
-				  
-				  
-				  <tr>
-					<td colspan="3"> <button type="button" style="font-size:10pt;" class="form-control btn btn-danger" onclick="javascript:retirer_tous_garants_territoire();" > <?= "<== " . _("Retirer tous") ?> </button> </td>						
-				  </tr>
-				  
-				</thead>
-
-				<tbody>
-					<?php foreach ($garants_avec_territoire as $v):
-						$id					= $v['id'];
-						$montantAccessoire = $this->nettoyer($v['montantAccessoire'])
-					?>
-					<tr valign="top">
-						<td align='center'> <input type="button" value="<=" onClick="javascript:retirer_un_garant_territoire('<?=$id?>');" ></td>
-						
-						<td align='center'><?=  $this->nettoyer($v['garant']) ?></td>
-						
-						<td  width="20%" >
-							<INPUT style="font-size:10pt; text-align:center;" class="form-control"  TYPE="text" value="<?= format_N($montantAccessoire) ?>" 
-							onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
-							onchange="javascript:maj_montant_accessoire_territoire(<?= $id ?>, this.value, this)">
-						</td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-	</div>	
-</div>	
+        <div id="div_avec_seuil" class="col-md-7">
+            <div class="card border-0 shadow-sm h-100 border-start border-primary border-4">
+                <div class="card-header bg-white py-3">
+                    <h6 class="card-title mb-0 fw-bold text-primary text-uppercase small">
+                        <i class="fas fa-check-circle me-2"></i><?= _("Avec accessoires étendu") ?>
+                    </h6>
+                </div>
+                <div class="card-body p-0">
+                    <div class="p-2 border-bottom">
+                        <button type="button" class="btn btn-danger btn-sm w-100 fw-bold rounded-pill shadow-sm" onclick="javascript:retirer_tous_garants_territoire();">
+                            <i class="fas fa-angle-double-left me-1"></i> <?= _("Retirer tous") ?>
+                        </button>
+                    </div>
+                    <div class="table-responsive">
+                        <table id="tableAvecTerritoire" class="table table-hover align-middle mb-0 compact" style="width:100%">
+                            <thead class="table-light small text-uppercase">
+                                <tr>
+                                    <th class="text-center" width="60px">Retrait</th>
+                                    <th class="ps-3"><?= _("Garant") ?></th>
+                                    <th class="text-center" width="150px"><?= _("Montant") ?></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($garants_avec_territoire as $v):
+                                    $id = $v['id'];
+                                    $montantAccessoire = $this->nettoyer($v['montantAccessoire']);
+                                ?>
+                                <tr>
+                                    <td class="text-center">
+                                        <button class="btn btn-outline-danger btn-sm rounded-circle" title="Retirer" onClick="javascript:retirer_un_garant_territoire('<?=$id?>');">
+                                            <i class="fas fa-chevron-left"></i>
+                                        </button>
+                                    </td>
+                                    <td class="ps-3 small fw-bold text-primary"><?= $this->nettoyer($v['garant']) ?></td>
+                                    <td class="pe-3">
+                                        <div class="input-group input-group-sm">
+                                            <input class="form-control text-center fw-bold border-primary-subtle" type="text" value="<?= format_N($montantAccessoire) ?>" 
+                                                onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
+                                                onchange="javascript:maj_montant_accessoire_territoire(<?= $id ?>, this.value, this)">
+                                            <span class="input-group-text bg-light"><i class="fas fa-coins text-muted"></i></span>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div> 
+</div>
\ No newline at end of file