diff --git a/Js/fonctions.js b/Js/fonctions.js
index f95dfedd..b94d19b4 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -34359,58 +34359,78 @@ function maj_duree_vie_bon(idTypebon, dureeVie)
 	});
 }
 
-function afficher_garantie_produit_cons()
-{
-	
-	
-	codeGcAssureur =$("#codeGcAssureur").val();
-	
-	
-	if(codeGcAssureur<=" ") 
-	{
-		v_msg="Veuillez s\u00e9lectionner un garant!";
-		v_msgEng="Please select a guarantor!";
-		alert_ebene(v_msg, v_msgEng);
+function afficher_garantie_produit_cons() {
+    // 1. Récupération des valeurs
+    const codeGcAssureur = $("#codeGcAssureur").val();
+    const codeProduit = $("#codeProduit").val();
+    const div_attente = $('#div_garantieproduit');
+    const racineWeb = $("#racineWeb").val();
+    const codeLangue = $("#codeLangue").val();
 
-		$("#codeGcAssureur").focus();
-		
-		$('#div_garantieproduit').html("");
-		
-		return;
-	}
+    // 2. Validation du Garant
+    if (!codeGcAssureur || codeGcAssureur.trim() === "") {
+        let v_msg = "Veuillez sélectionner un garant !";
+        let v_msg_eng = "Please select a guarantor!";
+        
+        alert_ebene(v_msg, v_msg_eng);
+        
+        $("#codeGcAssureur").focus();
+        div_attente.html("");
+        return;
+    }
 
-	codeProduit=$("#codeProduit").val();
-	
-	if (codeProduit<=" ") 
-	{
-		v_msg="Veuillez s\u00e9lectionner un produit!";
-		v_msgEng="Please select a product!";
-		alert_ebene(v_msg, v_msgEng);
-		
-		$('#div_garantieproduit').html("");
-		return;
-	}
+    // 3. Validation du Produit
+    if (!codeProduit || codeProduit.trim() === "") {
+        let v_msg = "Veuillez sélectionner un produit !";
+        let v_msg_eng = "Please select a product!";
+        
+        alert_ebene(v_msg, v_msg_eng);
+        
+        div_attente.html("");
+        return;
+    }
 
-	donnees = 'codeGcAssureur='+codeGcAssureur+'&codeProduit='+codeProduit;
+    // 4. Préparation des données et affichage du loader (Texte bilingue manuel)
+    const donnees = {
+        codeGcAssureur: codeGcAssureur,
+        codeProduit: codeProduit
+    };
 
-	var div_attente = $('#div_garantieproduit');
-	
-	div_attente.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>');
+    let loadingTxt = (codeLangue === "en_US") ? "Loading guarantees..." : "Chargement des garanties...";
 
-	$.ajax({
-		url: $("#racineWeb").val()+"Ajaxparamseuilalerte/affichergarantieproduitcons/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData) {			
-		},
-		success: function(data) {
-			div_attente.html(data);
-		},
-		complete: function() {
-		}
-	}); 
+    div_attente.html(`
+        <div class="text-center p-5">
+            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
+            <p class="mt-3 text-primary fw-bold">${loadingTxt}</p>
+        </div>
+    `);
+
+    // 5. Appel AJAX
+    $.ajax({
+        url: racineWeb + "Ajaxparamseuilalerte/affichergarantieproduitcons/",
+        type: 'post',
+        data: donnees,
+        success: function(data) {
+            div_attente.html(data);
+
+            // INITIALISATION DATATABLE
+            setTimeout(function() {
+                const nomGarant = $("#codeGcAssureur option:selected").text();
+                initSmartTable('#tableSeuils', 'Seuils d\'alerte - ' + nomGarant);
+            }, 150);
+        },
+        error: function() {
+            let errorTxt = (codeLangue === "en_US") ? "Error retrieving data." : "Erreur lors de la récupération des données.";
+            div_attente.html(`
+                <div class="alert alert-danger m-3 fw-bold text-center">
+                    <i class="fas fa-exclamation-circle me-2"></i> ${errorTxt}
+                </div>
+            `);
+        }
+    });
 }
 
+
 function afficher_garantie_produit()
 {
 	codeGcAssureur =$("#codeGcAssureur").val();
diff --git a/Vue/Ajaxparamseuilalerte/affichergarantieproduitcons.php b/Vue/Ajaxparamseuilalerte/affichergarantieproduitcons.php
index 39b3d3dd..7f874ab3 100755
--- a/Vue/Ajaxparamseuilalerte/affichergarantieproduitcons.php
+++ b/Vue/Ajaxparamseuilalerte/affichergarantieproduitcons.php
@@ -1,31 +1,73 @@
-<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-	<thead>
-	
-	  <tr>
-		<th rowspan="2" style='text-align:center'> <?= _("Garantie") ?> </th>
-		<th colspan="2" style='text-align:center'> <?= _("Seuil") ?> </th>
-	  </tr>
-	  
-	  <tr>
-		<th style='text-align:center'> <?= _("Taux") ?> </th>
-		<th style='text-align:center'> <?= _("Forfait") ?> </th>
-	  </tr>
-	</thead>
+<div class="card border-0 shadow-sm overflow-hidden" style="border-radius: var(--radius-md);">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table id="tableSeuils" class="table table-hover align-middle mb-0 datatable-inter" style="font-size: 10pt;">
+                <thead class="bg-light text-muted small text-uppercase">
+                    <tr>
+                        <th rowspan="2" class="ps-4 text-dark fw-bold border-bottom-0" style="vertical-align: middle;">
+                            <i class="fas fa-shield-alt me-2"></i><?= _("Garantie") ?>
+                        </th>
+                        <th colspan="2" class="text-center border-bottom text-dark fw-bold">
+                            <?= _("Paramètres du Seuil d'Alerte") ?>
+                        </th>
+                    </tr>
+                    <tr>
+                        <th class="text-center border-top-0"><?= _("Taux (%)") ?></th>
+                        <th class="text-center border-top-0"><?= _("Forfait (Montant)") ?></th>
+                    </tr>
+                </thead>
 
-	<tbody>
-		<?php foreach ($garanties_avec_seuils as $garanties_avec_seuil):
-			$id					= $garanties_avec_seuil['id'];
-			$tauxSeuilAlerte	= $garanties_avec_seuil['tauxSeuilAlerte'];
-			$seuilAlerte		= $garanties_avec_seuil['seuilAlerte'];
-		?>
-		<tr valign="top">
-			<td align='center'><?=  $this->nettoyer($garanties_avec_seuil['garantie']) ?></td>
+                <tbody>
+                    <?php foreach ($garanties_avec_seuils as $garanties_avec_seuil):
+                        $id              = $garanties_avec_seuil['id'];
+                        $tauxSeuilAlerte = $garanties_avec_seuil['tauxSeuilAlerte'];
+                        $seuilAlerte     = $garanties_avec_seuil['seuilAlerte'];
+                    ?>
+                    <tr>
+                        <td class="ps-4 fw-medium text-dark">
+                            <?= $this->nettoyer($garanties_avec_seuil['garantie']) ?>
+                        </td>
 
-			<td width="15%" align='center'><?= $tauxSeuilAlerte ?></td>
-			
-			<td width="20%" align='center'><?= format_N($seuilAlerte) ?></td>
-		</tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
+                        <td width="20%" class="text-center">
+                            <span class="badge bg-info-ghost text-info px-3 py-2 fw-bold" style="min-width: 60px;">
+                                <?= $tauxSeuilAlerte ?> %
+                            </span>
+                        </td>
+                        
+                        <td width="20%" class="text-center">
+                            <div class="fw-bold text-primary">
+                                <?= format_N($seuilAlerte) ?> <small class="text-muted fw-normal">FCFA</small>
+                            </div>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    
+    <div class="card-footer bg-white border-top-0 py-3">
+        <div class="d-flex align-items-center text-muted small">
+            <i class="fas fa-info-circle me-2 text-primary"></i>
+            <?= _("Ces seuils déclenchent une alerte automatique lors de la saisie des prestations si la consommation dépasse les limites fixées.") ?>
+        </div>
+    </div>
+</div>
 
+<style>
+/* Style local pour l'alignement des colonnes à double entête */
+#tableSeuils thead th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    border-color: #f1f4f6 !important;
+}
+
+#tableSeuils tbody td {
+    border-color: #f1f4f6;
+}
+
+.bg-info-ghost {
+    background: rgba(0, 184, 212, 0.1) !important;
+    color: #00b8d4 !important;
+}
+</style>
\ No newline at end of file