diff --git a/Js/fonctions.js b/Js/fonctions.js
index 89364ccf..38e09f59 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -78270,53 +78270,39 @@ function modecalculeprime()
 	}
 }
 
-function trancheage()
-{
-	codeModecalculPrime  = $("#codeModecalculPrime").val();
-	codeGcAssureur 		 = $("#codeGcAssureur").val();
-		
-	codeProduit 		 = $("#codeProduit").val();
-	
-	codeEnteteTrancheAge = $("#codeEnteteTrancheAge").val();
-	
-	if(codeProduit==undefined){
-		codeProduit = '';
-	}
-	
-	if (codeEnteteTrancheAge<=" " && codeModecalculPrime=="TA") 
-	{
-		v_msg="Veuillez sélectionner un type de tranche âge!";
-		v_msgEng="Please select an age group type!";
-		alert_ebene(v_msg, v_msgEng);
+function trancheage() {
+    let codeModecalculPrime = $("#codeModecalculPrime").val();
+    let codeGcAssureur = $("#codeGcAssureur").val();
+    let codeProduit = $("#codeProduit").val() || '';
+    let codeEnteteTrancheAge = $("#codeEnteteTrancheAge").val();
+    let racineWeb = $("#racineWeb").val();
 
-		$("#codeEnteteTrancheAge").focus();
-		
-		$("#div_trancheage").empty();
-		
-		return;
-	}
-	
-	donnees = "codeGcAssureur="+codeGcAssureur+"&codeProduit="+codeProduit+"&codeEnteteTrancheAge="+codeEnteteTrancheAge;
-	//donnees +="&idProduit="+idProduit;
-	$("#div_trancheage").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()+"Ajaxprimelienparente/trancheage/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData){			
-			//alert("Erreur : "+errorData);
-		},
-		success: function(data) {
-			//alert("Success : "+data);	
-			$("#div_trancheage").html(data);
-			
-		},
-		complete: function() {
-			
-		}
-	}); 
-	
+    if (codeEnteteTrancheAge <= " " && codeModecalculPrime == "TA") {
+        alert_ebene("Veuillez sélectionner une catégorie de tranche d'âge!", "Please select an age group category!");
+        $("#codeEnteteTrancheAge").focus();
+        $("#div_trancheage").empty();
+        return;
+    }
+
+    // Loader Standard
+    $("#div_trancheage").html(
+        '<div class="d-flex justify-content-center align-items-center p-5">' +
+        '<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>' +
+        '<span class="ms-3 fw-bold text-primary">Chargement de la grille...</span></div>'
+    );
+
+    $.ajax({
+        url: racineWeb + "Ajaxprimelienparente/trancheage/",
+        type: 'post',
+        data: {
+            codeGcAssureur: codeGcAssureur,
+            codeProduit: codeProduit,
+            codeEnteteTrancheAge: codeEnteteTrancheAge
+        },
+        success: function(data) {
+            $("#div_trancheage").hide().html(data).fadeIn();
+        }
+    });
 }
 
 function ajaxprimelienparente()
diff --git a/Vue/Ajaxprimelienparente/trancheage.php b/Vue/Ajaxprimelienparente/trancheage.php
index c9a9614b..944af4af 100755
--- a/Vue/Ajaxprimelienparente/trancheage.php
+++ b/Vue/Ajaxprimelienparente/trancheage.php
@@ -1,134 +1,122 @@
-<div id="div_trancheage">	
-	<div class="row">
-		<div id="div_prime_lien" class="col-8">
-			<table id="tab_prime_categorie" class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:11pt; margin-top:5px;">
-				<thead>
-				  <tr>
-					<th style='text-align:center '><?= _("Lien Parenté") ?> </th>
-					<th style='text-align:center'> <?= _("Plafond") ?> </th>
-					<th style='text-align:center'> <?= _("Maximum par Famille") ?> </th>
-					<th style='text-align:center'> <?= _("Autoriser Plus?") ?> </th>
-					<th style='text-align:center'> <?= _("Surprime") ?> </th>
-					
-					<th style='text-align:center'> <?= _("Âge Min") ?> </th>
-					<th style='text-align:center'> <?= _("Âge Max") ?> </th>
-				  </tr>
-				</thead>
+<div id="div_trancheage_content" class="animate__animated animate__fadeIn">
+    <div class="row g-3">
+        <div id="div_prime_lien" class="col-lg-8">
+            <div class="table-responsive border rounded shadow-sm bg-white">
+                <table id="tab_prime_categorie" class="table table-hover align-middle mb-0" style="font-size: 9pt;">
+                    <thead class="bg-primary-ghost text-primary small fw-bold text-uppercase">
+                        <tr>
+                            <th class="py-3 ps-3"><?= _("Lien Parenté") ?></th>
+                            <th class="text-center"><?= _("Plafond") ?></th>
+                            <th class="text-center"><?= _("Max/Fam") ?></th>
+                            <th class="text-center"><?= _("Supp ?") ?></th>
+                            <th class="text-center"><?= _("Surprime") ?></th>
+                            <th class="text-center"><?= _("Âge Min") ?></th>
+                            <th class="text-center"><?= _("Âge Max") ?></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php
+                        $i = 0;
+                        foreach ($primeLienParente as $v):
+                            $idPrime = $this->nettoyer($v['id']);
+                            $codeLienParente = $this->nettoyer($v['codeLienParente']);
+                            $lienparente = est_anglophone() ? $this->nettoyer($v['lienparenteEng']) : $this->nettoyer($v['lienparente']);
+                            $i++;
+                        ?>
+                        <tr>
+                            <td class="ps-3 fw-bold text-dark"><?= $lienparente ?></td>
+                            
+                            <td>
+                                <input class="form-control form-control-sm text-center border-2 input-editable" type="text" 
+                                       value="<?= format_N($v['plafondBeneficiaire']) ?>"
+                                       onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
+                                       onchange="ajax_maj_plafond_produit_lienparente('<?=$idPrime?>', this.value, this);">
+                            </td>
+                            
+                            <?php if($codeLienParente != "A"): ?>
+                                <td>
+                                    <input class="form-control form-control-sm text-center border-2 input-editable" type="text" 
+                                           value="<?= $v['nbreParFamille'] ?>"
+                                           onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
+                                           onchange="ajax_maj_nbrefamille_produit_lienparente('<?=$idPrime?>', this.value, this);">
+                                </td>
+                                <td>
+                                    <select class="form-select form-select-sm border-2 input-editable" 
+                                            onchange="ajax_maj_autoriser_produit_lienparente('<?=$idPrime?>', this.value, this, <?=$i;?>);">
+                                        <?php liste_options($ouinonautoriser, $this->nettoyer($v['autoriserSupplement']), true); ?>
+                                    </select>
+                                </td>
+                                <td>
+                                    <input class="form-control form-control-sm text-center border-2 input-editable fw-bold text-primary" type="text" 
+                                           value="<?= format_N($v['primeSupplementaire']) ?>"
+                                           onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
+                                           onchange="ajax_maj_supplementaire_produit_lienparente('<?=$idPrime?>', this.value, this);">
+                                </td>
+                            <?php else: ?>
+                                <td><input class="form-control form-control-sm text-center bg-light border-0" value="<?= $v['nbreParFamille'] ?>" disabled></td>
+                                <td><input class="form-control form-control-sm text-center bg-light border-0" value="<?= ($v['autoriserSupplement'] == 1) ? 'OUI' : 'NON' ?>" disabled></td>
+                                <td><input class="form-control form-control-sm text-center bg-light border-0 fw-bold" value="<?= format_N($v['primeSupplementaire']) ?>" disabled></td>
+                            <?php endif; ?>
 
-				<tbody>
-					<?php
-						$i = 0;
-						foreach ($primeLienParente as $v):
-						$idPrime=$this->nettoyer($v['id']);
-						$codeLienParente=$this->nettoyer($v['codeLienParente']);
-						$lienparente = $this->nettoyer($v['lienparente']);
-						
-						if (est_anglophone()){
-							$lienparente = $this->nettoyer($v['lienparenteEng']);
-						}
-						
-						$ageMin = $this->nettoyer($v['ageMinimum']);
-						$ageMax = $this->nettoyer($v['ageMaximum']);
-						
-						++$i;
-					?>
-					<tr valign="top">
-						<td width="20%"><?= $lienparente ?></td>
-						
-						<td align='center'>
-							<INPUT class="form-control text-center" TYPE="text" id="tabPlafond<?=$i;?>" value="<?= format_N($v['plafondBeneficiaire']);  ?>" 
-							onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
-							onChange="ajax_maj_plafond_produit_lienparente('<?=$idPrime?>', this.value, this);" onfocus="formatNumerique(this);">
-						</td>
-						
-						<?php if($codeLienParente!="A"):?>
-						<td align='center'>
-							<INPUT class="form-control text-center" TYPE="text" id="tabnbreParFamille<?=$i;?>" value="<?= $v['nbreParFamille'];  ?>" 
-							onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
-							onChange="ajax_maj_nbrefamille_produit_lienparente('<?=$idPrime?>', this.value, this);" onfocus="formatNumerique(this);">
-						</td>
-						
-						<td align='center'>
-							<select class="form-select text-center" id="tabAutoriser<?=$i;?>" onChange="ajax_maj_autoriser_produit_lienparente('<?=$idPrime?>', this.value, this, <?=$i;?>);">
-								<?php liste_options($ouinonautoriser, $this->nettoyer($v['autoriserSupplement']), true); ?>						
-							</SELECT>
-						</td>
-						
-						<td align='center'>
-							<INPUT class="form-control text-center" TYPE="text" id="tabprimeSupplementaire<?=$i;?>" value="<?= format_N($v['primeSupplementaire']);  ?>" 
-							onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
-							onChange="ajax_maj_supplementaire_produit_lienparente('<?=$idPrime?>', this.value, this);" onfocus="formatNumerique(this);">
-						</td>
-						<?php else:?>
-						<td align='center'>
-							<INPUT class="form-control text-center" TYPE="text" value="<?= $v['nbreParFamille']; ?>" disabled>
-						</td>
-						
-						
-						<td align='center'>
-							<select class="form-select text-center" disabled>
-								<?php liste_options($ouinonautoriser, $this->nettoyer($v['autoriserSupplement']), true); ?>						
-							</SELECT>
-						
-						</td>
-						
-						<td align='center'>
-							<INPUT class="form-control text-center" TYPE="text" id="tabprimeSupplementaire<?=++$i;?>" 
-							value="<?= format_N($v['primeSupplementaire']);  ?>" disabled>
-						</td>
-						
-						<?php endif;?>
-						
-						<td align='center'>
-							<INPUT class="form-control text-center" TYPE="text" id="tabAgeMin<?=$i;?>" value="<?= $ageMin; ?>" 
-							onkeyup="controle_numerique(this);" onChange="ajax_maj_Agemin_produit_lienparente('<?=$idPrime?>', this.value, this);">
-						</td>
-						
-						<td align='center'>
-							<INPUT class="form-control text-center" TYPE="text" id="tabAgeMax<?=$i;?>" value="<?= $ageMax;  ?>" 
-							onkeyup="controle_numerique(this);" onChange="ajax_maj_Agemax_produit_lienparente('<?=$idPrime?>', this.value, this);">
-						</td>
-						
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-		
-		<div id="div_prime_trancheage" class="col-4">
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:11pt; margin-top:5px;" >
-				<thead>
-					<tr>
-						<th style="text-align:center" > <?= _("Tranche Âge") ?> </th>
-						<th style="text-align:center" > <?= _("Prime de Base") ?> </th>
-					</tr>
-				</thead>
-				<tbody>
-					<?php 
-					$i=0;
-					foreach ($primeTrancheage as $v):
-						$idPrime = $this->nettoyer($v['id']);
-						
-						$libelle = $this->nettoyer($v['libelleTrancheAge']);
-						
-						if (est_anglophone()){
-							$libelle = $this->nettoyer($v['libelleTrancheAgeEng']);
-						}
-						
-						$i++;
-					?>
-					<tr  valign="top">
-						<td style="text-align:center" width="50%"> <?= $libelle ?>  </td>
-						<td style='text-align:center' >
-							
-							<INPUT style='text-align:center; font-size:10pt;' class="form-control text-center" TYPE="text" id="prime<?=$i;?>" value="<?= format_N($this->nettoyer($v['prime']));  ?>" 
-							onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);" onChange="ajax_maj_prime_produit('<?=$idPrime?>', this.value, this);" onfocus="formatNumerique(this);">
-						
-						</td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-	</div>
+                            <td>
+                                <input class="form-control form-control-sm text-center border-2 input-editable" type="text" 
+                                       value="<?= $this->nettoyer($v['ageMinimum']) ?>"
+                                       onkeyup="controle_numerique(this);" 
+                                       onchange="ajax_maj_Agemin_produit_lienparente('<?=$idPrime?>', this.value, this);">
+                            </td>
+                            <td class="pe-2">
+                                <input class="form-control form-control-sm text-center border-2 input-editable" type="text" 
+                                       value="<?= $this->nettoyer($v['ageMaximum']) ?>"
+                                       onkeyup="controle_numerique(this);" 
+                                       onchange="ajax_maj_Agemax_produit_lienparente('<?=$idPrime?>', this.value, this);">
+                            </td>
+                        </tr>
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div id="div_prime_trancheage" class="col-lg-4">
+            <div class="table-responsive border rounded shadow-sm bg-white">
+                <table class="table table-hover align-middle mb-0" style="font-size: 9.5pt;">
+                    <thead class="bg-primary text-white small fw-bold text-uppercase">
+                        <tr>
+                            <th class="py-3 ps-3"><?= _("Tranche d'Âge") ?></th>
+                            <th class="py-3 text-center pe-3"><?= _("Prime de Base") ?></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php 
+                        $j = 0;
+                        foreach ($primeTrancheage as $v):
+                            $idPrimeBase = $this->nettoyer($v['id']);
+                            $libAge = est_anglophone() ? $this->nettoyer($v['libelleTrancheAgeEng']) : $this->nettoyer($v['libelleTrancheAge']);
+                            $j++;
+                        ?>
+                        <tr>
+                            <td class="ps-3 fw-bold text-muted"><?= $libAge ?></td>
+                            <td class="pe-3">
+                                <input class="form-control form-control-sm text-center border-2 input-editable fw-bold text-primary" 
+                                       style="font-size: 10pt;" type="text" 
+                                       value="<?= format_N($this->nettoyer($v['prime'])) ?>"
+                                       onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"
+                                       onchange="ajax_maj_prime_produit('<?=$idPrimeBase?>', this.value, this);">
+                            </td>
+                        </tr>
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
 </div>
+
+<style>
+    .input-editable { border-color: #eee; transition: all 0.2s; }
+    .input-editable:focus { border-color: var(--bs-primary); background-color: #fff !important; }
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.05) !important; }
+    
+    /* Animation lors de la modification réussie (à appeler dans vos fonctions AJAX de maj) */
+    .save-success { border-color: #198754 !important; background-color: rgba(25, 135, 84, 0.1) !important; }
+</style>
\ No newline at end of file
diff --git a/Vue/Modifierproduit/index.php b/Vue/Modifierproduit/index.php
index 09e68ff8..7e849d5e 100755
--- a/Vue/Modifierproduit/index.php
+++ b/Vue/Modifierproduit/index.php
@@ -35,7 +35,7 @@
 
         <div class="card border-0 shadow-sm mb-1">
             <div class="card-header bg-white py-3 border-bottom border-2 border-primary-light">
-                <h6 class="mb-0 fw-bold text-primary text-uppercase small"><i class="fas fa-cog me-2"></i><?= _("Paramètres Généraux") ?></h6>
+                <h6 class="mb-0 fw-bold text-primary text-uppercase"><i class="fas fa-cog me-2"></i><?= _("Paramètres Généraux") ?></h6>
             </div>
             <div class="card-body p-4">
                 <div class="row g-3">
@@ -62,13 +62,13 @@
                     </div>
                     <div class="col-md-4">
                         <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Garant") ?></label>
-                        <select class="form-select bg-light border-2" disabled>
+                        <select class="form-control bg-light border-2" disabled>
                             <?php liste_options($garant,$this->nettoyer($produit['codeGcAssureur'])); ?>
                         </select>
                     </div>
                     <div class="col-md-4">
                         <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Mode Calcul Prime") ?></label>
-                        <select class="form-select bg-light border-2" disabled>
+                        <select class="form-control bg-light border-2" disabled>
                             <?php liste_options($calculprime,$this->nettoyer($produit['codeModecalculPrime']),false); ?>
                         </select>
                     </div>
@@ -78,7 +78,7 @@
 
         <div class="card border-0 shadow-sm mb-1">
             <div class="card-header bg-light py-3 border-bottom border-2 border-primary-light">
-                <h6 class="mb-0 fw-bold text-muted text-uppercase small"><i class="fas fa-calculator me-2"></i><?= _("Grille Tarifaire") ?></h6>
+                <h6 class="mb-0 fw-bold text-primary text-uppercase"><i class="fas fa-calculator me-2"></i><?= _("Grille Tarifaire") ?></h6>
             </div>
             <div class="card-body p-4">
                 <div id="div_modeprime">