diff --git a/Vue/Detailbaremepriseencharge/index.php b/Vue/Detailbaremepriseencharge/index.php
index e0ddb417..b3e697ab 100755
--- a/Vue/Detailbaremepriseencharge/index.php
+++ b/Vue/Detailbaremepriseencharge/index.php
@@ -1,147 +1,149 @@
 <?php 
-	$this->titre = "INTER SANTE - Configurer Barème de prise en charge"; 
-	
+    $idBareme = $_SESSION['idBaremePriseEnCharge'];
+    $libelleBareme = $this->nettoyer($bareme['libelle']);
+    $isAnglais = est_anglophone();
 ?>
 
+<div class="page-content animate__animated animate__fadeIn">
+    <div class="header-section sticky-top mb-4">
+        <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-cogs fs-4"></i>
+                </div>
+                <div>
+                    <h4 class="mb-0 fw-bold text-uppercase"><?= _("Configurer le barème modèle") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Désignation :") ?> <span class="fw-bold text-primary"><?= $libelleBareme ?></span></p>
+                </div>
+            </div>
+            <div class="d-flex gap-2">
+                <button type="button" class="btn btn-light border rounded-pill px-3 fw-bold shadow-xs" onclick="retour_liste_bareme();">
+                    <i class="fas fa-arrow-left me-1"></i> <?= _("Retour") ?>
+                </button>
+            </div>
+        </div>
+    </div>
 
-<legend> <?= _("Configurer Barème prise en charge initial") ?> </legend>
+    <input type="hidden" id="nomForm" name="nomForm" value="frmDetailBareme">
+    <input type="hidden" id="idBaremePriseEnCharge" name="idBaremePriseEnCharge" value="<?= $idBareme ?>">
+    <input type="hidden" id="ligne2" name="ligne2" value="<?= count($garantiesajoutees); ?>">
+    <input type="hidden" id="masquerBareme" name="masquerBareme" value="1">
+    <input type="hidden" id="maxDateEffetBareme" name="maxDateEffetBareme" value="<?= $maxDateEffetBareme ?>">
 
-<?php 
-	
-?>
-		
-<input type="text" id="nomForm" name="nomForm" class="sr-only" value="frmDetailBareme">
+    <div class="row g-4">
+        <div class="col-12">
+            <div class="card border-0 shadow-sm overflow-hidden">
+                <div class="card-header bg-primary text-white py-2">
+                    <h6 class="mb-0 fw-bold small text-uppercase"><i class="fas fa-globe me-2"></i><?= _("Paramétrage global du barème") ?></h6>
+                </div>
+                <div class="card-body p-4 bg-light-subtle">
+                    <div class="row g-3 align-items-end">
+                        <div class="col-md-2">
+                            <label class="form-label small fw-bold text-muted">ID</label>
+                            <input type="text" class="form-control border-2 bg-white fw-bold text-center" value="<?= $idBareme ?>" readonly>
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small fw-bold text-muted required"><?= _("Date d'effet") ?></label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-calendar-alt text-primary"></i></span>
+                                <input type="text" id="dateEffetBareme" name="dateEffetBareme" 
+                                       class="form-control border-2 border-start-0 datepicker fw-bold text-center" 
+                                       onchange="controleDateEffetBareme();" required>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small fw-bold text-muted required"><?= _("Ticket Modérateur (%)") ?></label>
+                            <input type="text" id="ticketModerateurBareme" name="ticketModerateurBareme" 
+                                   class="form-control border-2 fw-bold text-center fs-5" 
+                                   value="<?= $tmBareme ?>" onkeyup="controle_numerique(this);" required>
+                        </div>
+                        <div class="col-md-4">
+                            <button type="button" id="btn_bareme" class="btn btn-primary w-100 py-2 fw-bold shadow-sm" onclick="inserer_bareme();">
+                                <i class="fas fa-plus-circle me-1"></i> <?= _("Appliquer le Ticket Global") ?>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-footer bg-white border-top-0 p-0">
+                    <button class="btn btn-light w-100 rounded-0 py-2 fw-bold text-muted border-top" onclick="afficherDetailBareme();">
+                        <i class="fas fa-history me-2"></i><?= _("Afficher l'historique des lignes globales") ?> <span id="span_bareme">[-]</span>
+                    </button>
+                    <div id="div_bareme" class="p-3 border-top" style="display:none;">
+                        </div>
+                </div>
+            </div>
+        </div>
 
-<input type="hidden" id="idBaremePriseEnCharge" name="idBaremePriseEnCharge" value="<?=$_SESSION['idBaremePriseEnCharge']?>">
-<input type="hidden" id="ligne2" name="ligne2" value="<?= count($garantiesajoutees);?>">
-
-<input class="form-control" style='text-align:center; font-size:11pt; font-weight:bold; background-color:#027BE3;color:white;'  type="text" value="<?= _("PARAMETRAGE GLOBAL DU BAREME"); ?>" disabled >
-
-<div id="div_detailbareme" style="margin: 0px 0px 15px 0px;">
-
-	<table class="table table-responsive table-condensed" style="font-size:10pt;">
-		<tbody>	
-			<tr> 
-				<td width="5%" align="center" > <?= _("ID") ?> </td>
-				<td width="19%"><INPUT style="font-size:10pt; text-align:center;" class="form-control" TYPE="text" value="<?= $_SESSION['idBaremePriseEnCharge'] ?>" readonly></td>
-				
-				<td width="10%" align="center" > <?= _("Désignation") ?> </td>
-				<td colspan="3"><INPUT style="font-size:10pt;" class="form-control" TYPE="text" value="<?= $this->nettoyer($bareme['libelle'])?>" readonly></td>
-			
-			</tr> 
-			
-			<tr >
-				<td width="5%" align="center" class="required"> <?= _("Effet") ?> </td>
-				<td >
-					<INPUT style='text-align:center; font-size:12pt; height:30px;' class="form-control datepicker" TYPE="text" id="dateEffetBareme" 
-					NAME="dateEffetBareme" value="" onChange="javascript:controleDateEffetBareme();" required>
-				</td>
-				
-				<td width="10%" align="center" class="required"> <?= _("Ticket Modérateur") ?> </td>
-				<td width="10%">
-					<INPUT style='font-size:12pt; height:30px;' class="form-control text-center" TYPE="text" value="<?= $tmBareme ?>" onkeyup="controle_numerique(this);"
-					id="ticketModerateurBareme" name="ticketModerateurBareme" required>
-				</td>
-				
-				<td width="2%"></td>
-				<td >
-					<input style='font-size:14pt;' id="btn_bareme" name="btn_bareme" 
-					class = "form-control btn btn-primary" type="button" value="<?= _("Insérer un ticket modérateur global") ?>"
-					onclick="javascript:inserer_bareme();">
-				</td>
-			</tr>
-		</tbody>
-	</table>
-	
-	<p class="text-center" style="margin-bottom: 10px; font-size:13pt; font-weight: bold; color: #000; border-top: 2px solid #939597; border-left: 2px solid #939597; border-right: 2px solid #939597;">
-		<?= _("LIGNES GLOBALES PARAMETREES") ?> 
-		&nbsp 
-		<span id="detailbareme" ></span>
-		&nbsp &nbsp
-		<a href="javascript:afficherDetailBareme();">
-			<span id="span_bareme" title="Cliquez sur le lien pour afficher ou masquer" style="font-size:13pt;">[-]</span>	
-		</a>
-		
-		<INPUT 	class="sr-only" TYPE="text" id="masquerBareme" NAME="masquerBareme" value="1">
-	</p>
-	
-	<div id="div_bareme" style="border-bottom: 2px solid #939597; border-left: 2px solid #939597; border-right: 2px solid #939597;">
-		<INPUT 	class="sr-only" TYPE="text" id="maxDateEffetBareme" NAME="maxDateEffetBareme" value="<?=$maxDateEffetBareme?>">	
-	</div>
+        <div class="col-12">
+            <div class="card border-0 shadow-sm border-top border-primary border-4">
+                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
+                    <h6 class="mb-0 fw-bold text-primary text-uppercase small">
+                        <i class="fas fa-list-ul me-2"></i><?= _("Paramétrage des garanties du barème") ?>
+                    </h6>
+                    <div id="div_patienter"></div>
+                </div>
+                <div class="card-body p-0">
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle mb-0" style="font-size: 10pt;">
+                            <thead class="bg-light">
+                                <tr>
+                                    <th class="ps-4 py-3" width="150px"><?= _("Code") ?></th>
+                                    <th class="py-3"><?= _("Désignation de la Garantie") ?></th>
+                                    <th class="text-center py-3"><?= _("Lignes Actives") ?></th>
+                                    <th class="text-center py-3"><?= _("Lignes Inactives") ?></th>
+                                    <th class="text-center py-3" width="100px"><?= _("Action") ?></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($garantiesajoutees as $v):
+                                    $codeG = $this->nettoyer($v['codeGarantie']);      
+                                    $nomG  = $isAnglais ? $this->nettoyer($v['libelleEng']) : $this->nettoyer($v['libelle']);
+                                    $actives = (int)$v['nbre_lignes_actives'];
+                                    $inactives = (int)$v['nbre_lignes_inactives'];
+                                ?>
+                                <tr class="cursor-pointer" ondblclick="afficher_actes_garantiebareme(<?= $idBareme ?>,'<?= $codeG ?>');">
+                                    <td class="ps-4">
+                                        <span class="badge bg-primary-ghost text-primary px-3 py-2 fw-bold border border-primary-subtle w-100">
+                                            <?= $codeG ?>
+                                        </span>
+                                    </td>
+                                    <td>
+                                        <div class="fw-bold text-dark text-uppercase"><?= $nomG ?></div>
+                                    </td>
+                                    <td class="text-center">
+                                        <span class="badge <?= $actives > 0 ? 'bg-success' : 'bg-light text-muted border' ?> rounded-pill px-3 py-2 fs-6">
+                                            <?= str_pad($actives, 2, "0", STR_PAD_LEFT) ?>
+                                        </span>
+                                    </td>
+                                    <td class="text-center">
+                                        <span class="badge <?= $inactives > 0 ? 'bg-danger-light text-danger' : 'bg-light text-muted border' ?> rounded-pill px-3 py-2 fs-6">
+                                            <?= str_pad($inactives, 2, "0", STR_PAD_LEFT) ?>
+                                        </span>
+                                    </td>
+                                    <td class="text-center pe-4">
+                                        <button class="btn btn-sm btn-primary rounded-circle action-icon shadow-sm" 
+                                                onclick="afficher_actes_garantiebareme(<?= $idBareme ?>,'<?= $codeG ?>');">
+                                            <i class="fas fa-chevron-right"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
-<input class="form-control" style='text-align:center; font-size:11pt; font-weight:bold; background-color:#027BE3;color:white;'  type="text" value="<?= _("PARAMETRAGE DES GARANTIES DU BAREME"); ?>" disabled >
-<div id="div_garantiesbareme" class="table-responsive">
-		
-		<div id="div_tab_garantie" >
-			<table >
-				<tbody>
-					<td >
-						<div id="div_patienter">
-						</div>
-					</td >
-				</tbody>
-			</table>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:12pt;">
-				<thead>
-				  <tr>
-					<th rowspan="2" style='text-align:center' width="15%"> <?= _("Code") ?> </th>
-					<th rowspan="2" style='text-align:center' width="65%"> <?= _("Libellé") ?> </th>
-					<th colspan="3" style='text-align:center'> <?= _("Lignes Paramétrées Garanties") ?> </th>
-				  </tr>
-				  <tr>
-					<th style='text-align:center'><?= _("Actives") ?></th>
-					<th style='text-align:center'><?= _("Inactives") ?></th>
-				  </tr>
-				</thead>
-				<tbody>
-					<?php foreach ($garantiesajoutees as $v):
-						$codeGarantie		= $this->nettoyer($v['codeGarantie']);		
-						$nomGarantie		= $this->nettoyer($v['libelle']);
-						
-						$nbre_lignes_parametrees = $this->nettoyer($v['nbre_lignes_parametrees']);
-						$nbre_lignes_actives 	 = $this->nettoyer($v['nbre_lignes_actives']);
-						$nbre_lignes_inactives 	 = $this->nettoyer($v['nbre_lignes_inactives']);
-						
-						if ($nbre_lignes_actives < 9)
-						{
-							$nbre_lignes_actives = "0".$nbre_lignes_actives;
-						}
-						
-						if ($nbre_lignes_inactives < 9)
-						{
-							$nbre_lignes_inactives = "0".$nbre_lignes_inactives;
-						}
-						
-						if (est_anglophone())
-						{
-							$nomGarantie = $this->nettoyer($v['libelleEng']);
-						}
-					?>
-						<tr valign="top" ondblclick="javascript:afficher_actes_garantiebareme(<?=$_SESSION['idBaremePriseEnCharge']?>,'<?=$codeGarantie?>');">
-							<td align="center">
-								<input type="button" style='font-size:10pt;' class="form-control btn btn-primary" id="btn_garantie" value="<?= $codeGarantie ?>" 
-								onClick="javascript:afficher_actes_garantiebareme(<?=$_SESSION['idBaremePriseEnCharge']?>,'<?=$codeGarantie?>');" > 
-							</td>
-							<td><?= $nomGarantie ?></td>
-							
-							<td align="center" style="font-size:14pt"><?= $nbre_lignes_actives ?></td>
-							<td align="center" style="font-size:14pt"><?= $nbre_lignes_inactives ?></td>
-						</tr>
-
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-</div>	
-
-<div class="modal fade" id="div_actesgarantiebareme" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
-	
-</div>
-
-
-
-
-
-
+<div class="modal fade" id="div_actesgarantiebareme" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false"></div>
 
+<style>
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    .btn-primary-ghost { background-color: rgba(33, 46, 83, 0.05); color: #212e53; border: 1px solid rgba(33, 46, 83, 0.1); }
+    .btn-danger-light { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; border: none; }
+    .action-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
+    .action-icon:hover { transform: scale(1.1); background-color: #0056b3; }
+    .cursor-pointer { cursor: pointer; }
+</style>
\ No newline at end of file