diff --git a/Vue/Paramlienparente/index.php b/Vue/Paramlienparente/index.php
index 9bbe632a..9204d9b6 100755
--- a/Vue/Paramlienparente/index.php
+++ b/Vue/Paramlienparente/index.php
@@ -1,62 +1,192 @@
-<?php $this->titre = "INTER SANTE - Durée de vie des bons"; ?>
 
+<div class="header-section mb-4">
+  <div class="card border-0 shadow-sm border-start border-4 border-info">
+    <div class="card-body p-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
 
-<script type="text/javascript">
+      <!-- Titre + sous-titre -->
+      <div>
+        <h4 id="titre-page" class="mb-0 fw-bold text-uppercase">
+          <i class="fa fa-sitemap me-2 text-info"></i>
+          <?= _("Liens de Parenté") ?>
+        </h4>
+        <p class="text-muted small mb-0 mt-1">
+          <i class="fa fa-cog me-1"></i>
+          <?= _("Paramétrage des liens de parenté utilisés dans les dossiers patients") ?>
+        </p>
+      </div>
 
-</script>
+      <!-- Badge de contexte -->
+      <span class="badge bg-info bg-opacity-10 text-info fw-bold px-3 py-2 rounded-pill">
+        <i class="fa fa-sliders-h me-1"></i>
+        <?= _("CONFIGURATION") ?>
+      </span>
 
-<legend> <?= _("PARAMETRES DE GESTION DES LIENS DE PARENTE") ?> </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" width="10%"> <?= _("Code") ?> </th>
-		<th style="text-align:center" > <?= _("Désignation") ?> </th>
-		<th width="10%" style="text-align:center" > <?= _("Actif") ?> </th>
-	  </tr>
-	 
-	</thead>
-	<tbody>
-		<?php foreach ($liensparente as $v):
-			$idLien 			= $this->nettoyer($v['id']);
-			$codeLienParente 	= $this->nettoyer($v['codeLienParente']);
-			$libelle 			= $this->nettoyer($v['libelle']);
-			
-			$enVigueur 			= $this->nettoyer($v['enVigueur']);
-			
-			$actif = ($enVigueur == "1") ? "Oui" : "Non";
-				
-			$btnVisible = ($codeLienParente=="A" || $codeLienParente=="C" || $codeLienParente=="E") ? "1" : "0";
-				
-				
-			
-			if (est_anglophone()){
-				$libelle 		= $this->nettoyer($v['libelleEng']);
-				$actif 			= ($enVigueur == "1") ? "Yes" : "No";
-			}
-		?>
-		  <tr valign="top">
-			<td align="center"> <?= $codeLienParente ?></td>
-			<td ><?= $libelle ?></td>
-			
-			<td align="center">
-				<?php if($enVigueur == "1"):?>
-					<?php if($btnVisible == "0"):?>
-						<input style="font-size:10pt;" class = "form-control btn btn-primary" type="button" value="<?= $actif ?>" 
-						onClick="javascript:modifier_lien_parente(<?= $idLien ?>)"> 
-					<?php else: ?>
-						<?= $actif ?>
-					<?php endif; ?>
-				<?php else: ?>
-					<input style="font-size:10pt;" class = "form-control btn btn-danger" type="button" value="<?= $actif ?>" 
-					onClick="javascript:modifier_lien_parente(<?= $idLien ?>)"> 
-				<?php endif; ?>
-			</td>		
-		  </tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
-
-<div id="div_maj_lien">
-	
+    </div>
+  </div>
 </div>
+
+<!-- ============================================================
+     CARTE PRINCIPALE — Tableau des liens de parenté
+     ============================================================ -->
+<div class="card border-0 shadow-sm rounded-3">
+
+  <!-- En-tête de carte -->
+  <div class="card-header card-header-neutral d-flex align-items-center justify-content-between flex-wrap gap-2 py-3 px-4">
+
+    <div class="d-flex align-items-center gap-2">
+      <i class="fa fa-list-alt text-info"></i>
+      <span class="fw-bold text-primary"><?= _("Liste des liens de parenté") ?></span>
+      <!-- Compteur dynamique -->
+      <span class="badge bg-primary-ghost fw-bold rounded-pill" id="counter-badge">
+        <?= count($liensparente) ?> <?= _("entrées") ?>
+      </span>
+    </div>
+
+    <!-- Barre de recherche live -->
+    <div class="input-group" style="max-width:260px;">
+      <span class="input-group-text bg-light border-end-0">
+        <i class="fa fa-search text-muted" style="font-size:.8rem;"></i>
+      </span>
+      <input
+        type="text"
+        id="searchInput"
+        class="form-control form-control-sm border-start-0 bg-light"
+        placeholder="<?= _("Filtrer les liens…") ?>"
+        onkeyup="filterTable()"
+      >
+    </div>
+
+  </div>
+
+  <!-- Corps de carte -->
+  <div class="card-body p-0">
+    <div class="table-responsive">
+      <table class="table table-hover align-middle mb-0" id="tableParente">
+
+        <!-- En-têtes -->
+        <thead class="table-light">
+          <tr>
+            <th class="text-center text-uppercase small fw-bold text-muted ps-4" style="width:10%;">
+              <?= _("Code") ?>
+            </th>
+            <th class="text-uppercase small fw-bold text-muted">
+              <?= _("Désignation") ?>
+            </th>
+            <th class="text-center text-uppercase small fw-bold text-muted pe-4" style="width:14%;">
+              <?= _("Statut") ?>
+            </th>
+          </tr>
+        </thead>
+
+        <!-- Corps dynamique -->
+        <tbody>
+          <?php foreach ($liensparente as $v):
+            $idLien          = $this->nettoyer($v['id']);
+            $codeLienParente = $this->nettoyer($v['codeLienParente']);
+            $libelle         = $this->nettoyer($v['libelle']);
+            $enVigueur       = $this->nettoyer($v['enVigueur']);
+
+            $actif = ($enVigueur == "1") ? _("Oui") : _("Non");
+
+            /* Liens système non modifiables (A, C, E) */
+            $btnVisible = ($codeLienParente == "A"
+                        || $codeLienParente == "C"
+                        || $codeLienParente == "E") ? "1" : "0";
+
+            if (est_anglophone()) {
+              $libelle = $this->nettoyer($v['libelleEng']);
+              $actif   = ($enVigueur == "1") ? "Yes" : "No";
+            }
+
+            /* Classes badge selon statut */
+            $badgeClass = ($enVigueur == "1") ? "bg-success-ghost" : "bg-danger-ghost";
+            $badgeIcon  = ($enVigueur == "1") ? "fa-check-circle"  : "fa-times-circle";
+          ?>
+          <tr class="searchable-row" valign="top">
+
+            <!-- Code — badge neutre -->
+            <td class="text-center ps-4">
+              <span class="badge bg-primary-ghost fw-bold rounded-pill px-2">
+                <?= $codeLienParente ?>
+              </span>
+            </td>
+
+            <!-- Désignation -->
+            <td class="text-dark fw-bold">
+              <?= $libelle ?>
+            </td>
+
+            <!-- Statut + bouton conditionnel -->
+            <td class="text-center pe-4">
+              <?php if ($btnVisible == "0"): ?>
+                <!-- Lien modifiable → bouton interactif -->
+                <button
+                  class="btn-toggle-status <?= ($enVigueur == '1') ? 'active' : 'inactive' ?>"
+                  onclick="modifier_lien_parente(<?= $idLien ?>)"
+                  title="<?= _("Cliquer pour modifier le statut") ?>"
+                >
+                  <i class="fa <?= $badgeIcon ?> me-1"></i>
+                  <?= strtoupper($actif) ?>
+                </button>
+              <?php else: ?>
+                <!-- Lien système → badge statique non cliquable -->
+                <span class="badge <?= $badgeClass ?> badge-pill px-3 py-1 fw-bold text-uppercase">
+                  <i class="fa <?= $badgeIcon ?> me-1"></i>
+                  <?= $actif ?>
+                </span>
+              <?php endif; ?>
+            </td>
+
+          </tr>
+          <?php endforeach; ?>
+        </tbody>
+
+      </table>
+    </div><!-- /table-responsive -->
+  </div><!-- /card-body -->
+
+  <!-- Pied de carte -->
+  <div class="card-footer bg-white border-top-0 px-4 py-2 d-flex justify-content-between align-items-center">
+    <span class="text-muted small">
+      <i class="fa fa-info-circle me-1 text-info"></i>
+      <?= _("Les liens marqués en bleu sont des liens système non modifiables.") ?>
+    </span>
+    <span class="text-muted small" id="footer-count"></span>
+  </div>
+
+</div><!-- /card -->
+
+<!-- ============================================================
+     ZONE DE MISE À JOUR (inchangée — reçoit le formulaire AJAX)
+     ============================================================ -->
+<div id="div_maj_lien" class="mt-3"></div>
+
+
+<!-- ============================================================
+     JS — Filtrage live du tableau
+     ============================================================ -->
+<script>
+  function filterTable() {
+    const input  = document.getElementById('searchInput').value.toLowerCase();
+    const rows   = document.querySelectorAll('#tableParente .searchable-row');
+    let visible  = 0;
+
+    rows.forEach(row => {
+      const text = row.textContent.toLowerCase();
+      const show = text.includes(input);
+      row.style.display = show ? '' : 'none';
+      if (show) visible++;
+    });
+
+    /* Mise à jour du compteur */
+    document.getElementById('footer-count').textContent =
+      visible + ' / ' + rows.length + ' <?= _("résultats") ?>';
+  }
+
+  /* Initialisation du pied de tableau */
+  document.addEventListener('DOMContentLoaded', () => {
+    const total = document.querySelectorAll('#tableParente .searchable-row').length;
+    document.getElementById('footer-count').textContent =
+      total + ' <?= _("entrées au total") ?>';
+  });
+</script>