diff --git a/Vue/Garantieproduit/index.php b/Vue/Garantieproduit/index.php
index c0973c26..951b1719 100755
--- a/Vue/Garantieproduit/index.php
+++ b/Vue/Garantieproduit/index.php
@@ -1,178 +1,152 @@
-<?php $this->titre = "INTER SANTE - Garanties du Produit"; 
-
-	$produitArchive = $produit['produitArchive'];
+<?php 
+    $this->titre = "INTER SANTE - Garanties du Produit"; 
+    $isEditable = ($produit['produitArchive'] == "0");
 ?>
 
-<input class="sr-only" type="text" id="idProduit" name="idProduit" value="<?= $this->nettoyer($produit['idProduit']) ?>" >
+<div class="page-content animate__animated animate__fadeIn">
+    
+    <div class="header-section mb-1">
+        <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow border-start <?= $isEditable ? 'border-primary' : 'border-secondary' ?> border-4" style="border-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <div class="icon-shape <?= $isEditable ? 'bg-primary-ghost text-primary' : 'bg-light text-muted' ?> rounded-circle me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas <?= $isEditable ? 'fa-plus-circle' : 'fa-shield-alt' ?> fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase fs-5">
+                        <?= $isEditable ? _("Gestion des Garanties") : _("Consultation des Garanties") ?>
+                    </h4>
+                    <p class="text-muted small mb-0"><?= _("Produit :") ?> <span class="fw-bold text-dark"><?= $this->nettoyer($produit['libelle']) ?></span> (<?= $this->nettoyer($produit['codeProduit']) ?>)</p>
+                </div>
+            </div>
 
-<?php if ($produitArchive == "0"):?>
-	<legend> <?= _("Ajouter des garanties au produit") ?> </legend>
-<?php else: ?>
-		<legend> <?= _("Consulter les garanties du produit") ?> </legend>
-<?php endif; ?>
+            <div class="d-flex gap-2">
+                <button type="button" class="btn btn-light rounded-pill px-4 fw-bold text-muted border shadow-sm btn-sm" onclick="retour_liste_produits();">
+                    <i class="fas fa-arrow-left me-1"></i> <?= _("Retour") ?>
+                </button>
+                <?php if ($isEditable): ?>
+                <button type="button" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm btn-sm" onclick="location.reload();">
+                    <i class="fas fa-sync-alt me-1"></i> <?= _("Actualiser") ?>
+                </button>
+                <?php endif; ?>
+            </div>
+        </div>
+    </div>
 
-<table class="table table-responsive table-condensed" style="font-size:10pt;">
-	<tbody>	
-		<tr> 
-			<td width="5%" > Garant </td>
-			<td><INPUT style="font-size:10pt;" class="form-control" TYPE="text" value="<?=$this->nettoyer($produit['garant'])?>" readonly  ></td>
+    <input type="hidden" id="idProduit" name="idProduit" value="<?= $this->nettoyer($produit['idProduit']) ?>">
 
-			<td width="5%" align="center" > Code </td>
-			<td width="10%"><INPUT style="font-size:10pt;" id="codeProduit" name="codeProduit" class="form-control" TYPE="text" value="<?=$this->nettoyer($produit['codeProduit'])?>" readonly  ></td>
+    <div id="div_garantieproduit">
+        <div class="row g-4">
+            
+            <div class="col-lg-5">
+                <div class="card border-0 shadow-sm h-100">
+                    <div class="card-header bg-light 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><?= _("Garanties Disponibles") ?></h6>
+                        <?php if ($isEditable): ?>
+                            <button class="btn btn-xs btn-outline-primary rounded-pill fw-bold" onclick="ajouter_tous_garantie_produit();">
+                                <?= _("Tout ajouter") ?> <i class="fas fa-angle-double-right ms-1"></i>
+                            </button>
+                        <?php endif; ?>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
+                            <table class="table table-hover align-middle mb-0" style="font-size: 9.5pt;">
+                                <thead class="bg-white sticky-top">
+                                    <tr>
+                                        <th class="ps-3 py-2 border-bottom"><?= _("Libellé Garantie") ?></th>
+                                        <?php if ($isEditable): ?><th class="text-center border-bottom" width="15%"><?= _("Action") ?></th><?php endif; ?>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <?php foreach ($garanties_sans_seuils as $v): $code = $v['codeGarantie']; ?>
+                                    <tr>
+                                        <td class="ps-3"><?= $this->nettoyer($v['garantie']) ?></td>
+                                        <?php if ($isEditable): ?>
+                                        <td class="text-center">
+                                            <button class="btn btn-sm btn-primary-ghost rounded-circle action-btn" onclick="ajouter_un_garantie_produit('<?=$code?>');" title="<?= _("Ajouter") ?>">
+                                                <i class="fas fa-chevron-right"></i>
+                                            </button>
+                                        </td>
+                                        <?php endif; ?>
+                                    </tr>
+                                    <?php endforeach; ?>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-			<td width="8%" align="center" > <?= _("Libellé") ?> </td>
-			<td ><INPUT style="font-size:10pt;" class="form-control" TYPE="text" value="<?=$this->nettoyer($produit['libelle'])?>" readonly ></td>
-		</tr>
-	</tbody>
-</table>	
+            <div class="col-lg-7">
+                <div class="card border-0 shadow-sm h-100 border-start border-primary border-4">
+                    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom border-2">
+                        <h6 class="mb-0 fw-bold text-primary text-uppercase small"><i class="fas fa-check-circle me-2"></i><?= _("Garanties affectées au produit") ?></h6>
+                        <?php if ($isEditable): ?>
+                            <button class="btn btn-xs btn-outline-danger rounded-pill fw-bold" onclick="retirer_tous_garantie_produit();">
+                                <i class="fas fa-angle-double-left me-1"></i> <?= _("Tout retirer") ?>
+                            </button>
+                        <?php endif; ?>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
+                            <table class="table table-hover align-middle mb-0" style="font-size: 9pt;">
+                                <thead class="bg-primary-ghost text-primary sticky-top">
+                                    <tr>
+                                        <?php if ($isEditable): ?><th class="ps-3 py-2 border-bottom" width="10%"><?= _("Retirer") ?></th><?php endif; ?>
+                                        <th class="py-2 border-bottom"><?= _("Libellé") ?></th>
+                                        <th class="text-center border-bottom" width="20%"><?= _("Seuil Taux (%)") ?></th>
+                                        <th class="text-center border-bottom" width="25%"><?= _("Seuil Valeur") ?></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <?php foreach ($garanties_avec_seuils as $v): $id = $v['id']; ?>
+                                    <tr>
+                                        <?php if ($isEditable): ?>
+                                        <td class="ps-3 text-center">
+                                            <button class="btn btn-sm btn-danger-light rounded-circle action-btn" onclick="retirer_un_garantie_produit('<?=$id?>');" title="<?= _("Retirer") ?>">
+                                                <i class="fas fa-chevron-left"></i>
+                                            </button>
+                                        </td>
+                                        <?php endif; ?>
+                                        <td class="fw-bold"><?= $this->nettoyer($v['garantie']) ?></td>
+                                        
+                                        <td>
+                                            <div class="input-group input-group-sm">
+                                                <input class="form-control text-center border-2 fw-bold <?= $isEditable ? 'input-editable' : 'bg-light' ?>" 
+                                                       type="number" value="<?= $v['tauxSeuilAlerte'] ?>" 
+                                                       <?= $isEditable ? '' : 'disabled' ?>
+                                                       onchange="this.value=supprimer_espace_nombre(this.value); if(controle_numerique(this)){maj_taux_seuil_alerte_garantie('<?=$id?>', this.value);}">
+                                                <span class="input-group-text bg-white border-2 border-start-0">%</span>
+                                            </div>
+                                        </td>
 
-<div id="div_garantieproduit">
-	<?php if ($produitArchive == "0"):?>
-	<div class="row">
-		<div id="div_sans_seuil" class="col-5" >
-			<legend> <?= _("Garanties Disponibles") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-				<thead>
-				  <tr>
-					<th style='text-align:center'> <?= _("Libellé") ?> </th>
-					<th width="20%" style='text-align:center'> => </th>
-				  </tr>
+                                        <td class="pe-3">
+                                            <input class="form-control form-control-sm text-center border-2 fw-bold text-primary <?= $isEditable ? 'input-editable' : 'bg-light' ?>" 
+                                                   type="text" value="<?= format_N($v['seuilAlerte']) ?>" 
+                                                   <?= $isEditable ? '' : 'disabled' ?>
+                                                   onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" 
+                                                   onblur="formatMonetaire(this); maj_seuil_alerte_garantie('<?=$id?>', supprimer_espace_string(this.value));">
+                                        </td>
+                                    </tr>
+                                    <?php endforeach; ?>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-				  <tr>
-					<th colspan="2"> <button type="button" style="font-size:10pt;" class="form-control btn btn-primary" onclick="javascript:ajouter_tous_garantie_produit();" > <?= _("Ajouter tous"). " ==>" ?> </button> </th> 
-				  </tr>
-				  
-				</thead>
+        </div>
+    </div>
+</div>
 
-				<tbody>
-					<?php foreach ($garanties_sans_seuils as $garanties_sans_seuil):
-						$codeGarantie	= $garanties_sans_seuil['codeGarantie'];
-					?>
-					<tr valign="top">
-						<td align='center'><?=  $this->nettoyer($garanties_sans_seuil['garantie']) ?></td>
-						<td align='center'> <input type="button" value="=>" onClick="javascript:ajouter_un_garantie_produit('<?=$codeGarantie?>');" ></td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-
-		<div id="div_avec_seuil" class="col-7" >
-			<legend> <?= _("Garanties de")." ".$produit['libelle'] ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-				<thead>
-				
-				  <tr>
-					<th rowspan="2" width="10%" style='text-align:center'> <= </th>
-					<th rowspan="2" style='text-align:center'> <?= _("Libellé") ?> </th>
-					<th colspan="4" style='text-align:center'> <?= _("Seuil") ?> </th>
-				  </tr>
-				  
-				  <tr>
-					<th colspan="2" style='text-align:center'> <?= _("Taux") ?> </th>
-					<th colspan="2"  style='text-align:center'> <?= _("Valeurs") ?> </th>
-				  </tr>
-				  
-				  <tr>
-					<td colspan="6"> <button type="button" style="font-size:10pt;" class="form-control btn btn-danger" onclick="javascript:retirer_tous_garantie_produit();" > <?= "<== " . _("Retirer tous") ?> </button> </td>						
-				  </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'> <input type="button" value="<=" onClick="javascript:retirer_un_garantie_produit('<?=$id?>');" ></td>
-						
-						<td align='center'><?=  $this->nettoyer($garanties_avec_seuil['garantie']) ?></td>
-
-						<td width="10%" align='center'><?= $tauxSeuilAlerte ?></td>
-						<td width="15%" >
-							<INPUT style="font-size:10pt; text-align:center;" class="form-control"  TYPE="number"  value="<?= $tauxSeuilAlerte ?>" 
-							onChange="this.value=supprimer_espace_nombre(this.value);if(controle_numerique(this)){maj_taux_seuil_alerte_garantie('<?=$id?>', this.value);}">
-						</td>
-						
-						<td width="15%" align='center'><?= format_N($seuilAlerte) ?></td>
-						<td width="20%" >
-							<INPUT style="font-size:10pt; text-align:center;" class="form-control"  TYPE="number"  value="<?= $seuilAlerte ?>" 
-							onChange="this.value=supprimer_espace_nombre(this.value);if(controle_numerique(this)){maj_seuil_alerte_garantie('<?=$id?>', this.value);}">
-						</td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-	</div>	
-	
-	<?php else: ?>
-	<div class="row">
-		<div id="div_sans_seuil" class="col-5" >
-			<legend> <?= _("Garanties Disponibles") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-				<thead>
-				  <tr>
-					<th style='text-align:center'> <?= _("Libellé") ?> </th>
-				  </tr>
-				</thead>
-
-				<tbody>
-					<?php foreach ($garanties_sans_seuils as $garanties_sans_seuil):
-						$codeGarantie	= $garanties_sans_seuil['codeGarantie'];
-					?>
-					<tr valign="top">
-						<td align='center'><?=  $this->nettoyer($garanties_sans_seuil['garantie']) ?></td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-
-		<div id="div_avec_seuil" class="col-7" >
-			<legend> <?= _("Garanties de")." ".$produit['libelle'] ?> </legend>
-			<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'> <?= _("Libellé") ?> </th>
-					<th colspan="4" style='text-align:center'> <?= _("Seuil") ?> </th>
-				  </tr>
-				  
-				  <tr>
-					<th colspan="2" style='text-align:center'> <?= _("Taux") ?> </th>
-					<th colspan="2"  style='text-align:center'> <?= _("Valeurs") ?> </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>
-
-						<td width="10%" align='center'><?= $tauxSeuilAlerte ?></td>
-						<td width="15%" >
-							<INPUT style="font-size:10pt; text-align:center;" class="form-control"  TYPE="number"  value="<?= $tauxSeuilAlerte ?>" disabled>
-						</td>
-						
-						<td width="15%" align='center'><?= format_N($seuilAlerte) ?></td>
-						<td width="20%" >
-							<INPUT style="font-size:10pt; text-align:center;" class="form-control"  TYPE="number"  value="<?= $seuilAlerte ?>" disabled>
-						</td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-	</div>	
-	<?php endif;?>
-	
-</div>	
+<style>
+    .header-section.sticky-top { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.05) !important; }
+    .btn-primary-ghost { color: var(--bs-primary); background-color: rgba(33, 46, 83, 0.1); border: none; }
+    .btn-danger-light { color: var(--bs-danger); background-color: rgba(220, 53, 69, 0.1); border: none; }
+    .action-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s; }
+    .action-btn:hover { transform: scale(1.1); }
+    .input-editable:focus { border-color: var(--bs-primary) !important; background-color: #fff !important; }
+    .table-hover tbody tr:hover { background-color: rgba(33, 46, 83, 0.02); }
+    .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
+</style>
\ No newline at end of file