diff --git a/Vue/Facturesfamilleadh/index.php b/Vue/Facturesfamilleadh/index.php
index bb8960d..e4559ac 100644
--- a/Vue/Facturesfamilleadh/index.php
+++ b/Vue/Facturesfamilleadh/index.php
@@ -1,119 +1,123 @@
-<?php 
-	$this->titre = "INTER-SANTE - Factrures famille"; 
-?>
+<?php $this->titre = "INTER-SANTE - Factures famille"; ?>
 
-<legend> <?= _("Historique de factures de la famille") ?> </legend>
-<table class="table table-responsive table-condensed" style='font-size:10pt;'>
-	<tbody>	
-		<tr> 
-			<td  width="10%" > <?= _("Période du") ?> </td>
-			<td  width="20%" ><INPUT style='text-align:center; font-size:10pt;' class="form-control datepicker" TYPE="text" id="d1" NAME="d1" value="<?= dateLang($_SESSION['dateEffetAdherent_C'], $_SESSION['lang']) ?>"   required></td>
+<div id="div_adherent" class="container-fluid py-1 animate__animated animate__fadeIn">
+	
+	<h1 class="text-primary"><i class="fa-solid fa-clock-rotate-left me-2"></i><?= _('Historique Factures') ?></h1>
 
-			<td  width="10%" align="center" > <?= _("au") ?> </td>
-			<td width="20%" ><INPUT style='text-align:center; font-size:10pt;'  class="form-control datepicker" TYPE="text" id="d2" NAME="d2" value="<?= dateCouranteLang($_SESSION['lang']) ?>" required></td>
+    <div class="card shadow-sm border-0 mb-4">
+        <div class="card-body py-3">
+            <div class="row align-items-center g-3">
+                <div class="col-md">
+                    <div class="input-group shadow-sm">
+                        <span class="input-group-text bg-light"><i class="fa-solid fa-calendar-days me-2"></i> <?= _("Du") ?></span>
+                        <input type="text" id="d1" name="d1" class="form-control datepicker text-center fw-bold" 
+                               value="<?= dateLang($_SESSION['dateEffetAdherent_C'], $_SESSION['lang']) ?>" required>
+                        
+                        <span class="input-group-text bg-light"><?= _("au") ?></span>
+                        <input type="text" id="d2" name="d2" class="form-control datepicker text-center fw-bold" 
+                               value="<?= dateCouranteLang($_SESSION['lang']) ?>" required>
+                        
+                        <button class="btn btn-primary px-4" type="button" onclick="listerfacturefamille();">
+                            <i class="fa-solid fa-rotate me-2"></i><?= _("Actualiser") ?>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-			<td> </td>
-			<td>  <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:listerfacturefamille();"><?= _("Actualiser...") ?></button> </td>
-		</tr>			
-	</tbody>
-</table>	
+    <div id="div_dossiers" class="card shadow-sm border-0">
+        <div class="table-responsive">
+            <table class="table table-hover align-middle mb-0" style="font-size: 0.85rem;">
+                <thead class="table-dark">
+                    <tr>
+                        <th class="ps-3"><?= _("Type") ?></th>
+                        <th><?= _("Référence / Bon") ?></th>
+                        <th class="text-center"><?= _("ID Fact") ?></th>
+                        <th><?= _("Date") ?></th>
+                        <th><?= _("Prestataire / Bénéficiaire") ?></th>
+                        <th class="text-end"><?= _("Frais Réel") ?></th>
+                        <th class="text-end"><?= _("Part Patient (TM)") ?></th>
+                        <th class="text-end text-warning"><?= _("A Rembourser") ?></th>
+                        <th class="text-end pe-3 small text-uppercase opacity-75"><?= _("Exclu/Ret") ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($factures as $facture):
+                        $idFacture = $this->nettoyer($facture['idFacture']);
+                        $codeType = $this->nettoyer($facture['codeTypeFacture']);
+                        
+                        // Définition des couleurs par type
+                        $badgeClass = "bg-secondary";
+                        switch($codeType) {
+                            case 'PHAR': $badgeClass = "bg-success"; break;
+                            case 'OPT' : $badgeClass = "bg-info text-dark"; break;
+                            case 'LAB' : $badgeClass = "bg-warning text-dark"; break;
+                            case 'SEA' : $badgeClass = "bg-primary"; break;
+                        }
 
-<button id="btn_pop_consulter_facture" NAME="btn_pop_consulter_facture" type="button" class="sr-only" data-toggle="modal" data-target="#pop_consulter_facture"> </button>
-
-<div id="div_dossiers">	
-	<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:8pt;">
-		<thead>
-		  <tr>
-			<th style='text-align:center'> Type </th>
-			<th style='text-align:center'> <?= _("No Bon") ?> </th>
-			<th style='text-align:center'> <?= _("Id Fact") ?> </th>
-			<th style='text-align:center'> Date </th>
-			<th> <?= _("Prestataire") ?> </th>
-			<th> <?= _("Bénéficiaire") ?> </th>
-			<th style='text-align:center'> <?= _("Frais") ?> </th>
-			<th style='text-align:center'> <?= _("T M") ?> </th>
-			<th style='text-align:center'> <?= _("A Remb") ?> </th>
-			<th style='text-align:center'> <?= _("Dépas") ?> </th>
-			<th style='text-align:center'> <?= _("Ret") ?> </th>
-		  </tr>
-		</thead>
-		
-		<tbody>
-			<?php foreach ($factures as $facture):
-				$idFacture=$this->nettoyer($facture['idFacture']);
-				$numeroFeuilleMaladie=$this->nettoyer($facture['numeroFeuilleMaladie']);
-				$tiersPayant = $facture['tiersPayant'];			
-				
-				$codeTypeFacture		= $this->nettoyer($facture['codeTypeFacture']);
-
-				$numeroBon				= $this->nettoyer($facture['numeroBonConsultation']);
-
-				if($codeTypeFacture=="PHAR")
-				{
-					$numeroBon = $this->nettoyer($facture['numeroBonOrdonnance']);
-				}
-				elseif($codeTypeFacture=="OPT")
-				{
-					$numeroBon = $this->nettoyer($facture['numeroBonOptique']);
-				}
-				elseif($codeTypeFacture=="LAB")
-				{
-					$numeroBon = $this->nettoyer($facture['numeroBonExamen']);
-				}
-				elseif($codeTypeFacture=="SEA")
-				{
-					$numeroBon = $this->nettoyer($facture['numeroBonKine']);
-				}
-				
-			?>
-			<tr valign="top">
-			
-				<td align='center'> <?= $codeTypeFacture ?> </td>		
-				<td align='center'> <?= $numeroBon ?> </td>		
-
-				<td align='center'>
-					<input style='font-size:7pt;' type="button" value="<?= $idFacture ?>" 
-					onClick="javascript:consulter_facture_pop('<?= $idFacture ?>');"> 
-				</td> 
-				
-				<td align='center'><?= dateheureLang($this->nettoyer($facture['dateSysteme'])) ?></td>
-				<td><?= $this->nettoyer($facture['prestataire']) ?></td>
-				<td><?= $this->nettoyer($facture['beneficiaire']) ?></td>				
-				<td align='center'><?= format_N($this->nettoyer($facture['fraisReel'])) ?></td>
-				<td align='center'><?= format_N($this->nettoyer($facture['montantTm'])) ?></td>
-				<td align='center'><?= format_N($this->nettoyer($facture['montantArembourser'])) ?></td>
-				<td align='center'><?= format_N($this->nettoyer($facture['fraisExclu'])) ?></td>
-				<td align='center'><?= format_N($this->nettoyer($facture['fraisRetenu'])) ?></td>
-			</tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
-</div>	
-
-<div class="modal fade" id="pop_consulter_facture" role="dialog">
-	<div class="modal-dialog modal-lg">
-		<div class="modal-content">
-		
-			<div class="modal-header">
-				<button id="btn_close_pop" name="btn_close_pop" type="button" class="close" data-dismiss="modal"> <?= _("Fermer") ?> </button>
-				<h4 class="modal-title"> <?= _("Consultation facture...") ?> </h4>
-			</div>
-		
-			<div class="modal-body">
-				<div id="div_consulter_facture_pop">
-					
-				</div>	
-				
-				<div id="div_facture_detail">
-					
-				</div>	
-				
-			</div>
-			
-		  <div class="modal-footer">
-			<button id="close_pop" name="close_pop" type="button" class="btn btn-default" data-dismiss="modal"> <?= _("Fermer") ?> </button>
-		  </div>
-			
-		</div>
-	</div>
+                        // Logique du numéro de bon
+                        $numeroBon = $this->nettoyer($facture['numeroBonConsultation']);
+                        if($codeType=="PHAR") $numeroBon = $this->nettoyer($facture['numeroBonOrdonnance']);
+                        elseif($codeType=="OPT") $numeroBon = $this->nettoyer($facture['numeroBonOptique']);
+                        elseif($codeType=="LAB") $numeroBon = $this->nettoyer($facture['numeroBonExamen']);
+                        elseif($codeType=="SEA") $numeroBon = $this->nettoyer($facture['numeroBonKine']);
+                    ?>
+                    <tr>
+                        <td class="ps-3">
+                            <span class="badge <?= $badgeClass ?> w-100"><?= $codeType ?></span>
+                        </td>
+                        <td>
+                            <small class="fw-bold text-muted"><?= $numeroBon ?></small>
+                        </td>
+                        <td class="text-center">
+                            <button class="btn btn-sm btn-outline-primary py-0" style="font-size: 0.75rem;"
+                                    onClick="consulter_facture_pop('<?= $idFacture ?>');">
+                                <i class="fa-solid fa-magnifying-glass me-1"></i><?= $idFacture ?>
+                            </button>
+                        </td>
+                        <td>
+                            <div class="small lh-1"><?= dateheureLang($this->nettoyer($facture['dateSysteme'])) ?></div>
+                        </td>
+                        <td>
+                            <div class="fw-bold text-truncate" style="max-width: 200px;"><?= $this->nettoyer($facture['prestataire']) ?></div>
+                            <div class="small text-muted italic">👤 <?= $this->nettoyer($facture['beneficiaire']) ?></div>
+                        </td>
+                        <td class="text-end text-monospace fw-bold"><?= format_N($this->nettoyer($facture['fraisReel'])) ?></td>
+                        <td class="text-end text-monospace text-danger small"><?= format_N($this->nettoyer($facture['montantTm'])) ?></td>
+                        <td class="text-end text-monospace fw-bold text-primary"><?= format_N($this->nettoyer($facture['montantArembourser'])) ?></td>
+                        <td class="text-end pe-3">
+                            <div class="small text-muted text-monospace"><?= format_N($this->nettoyer($facture['fraisExclu'])) ?></div>
+                            <div class="small text-muted text-monospace border-top pt-1"><?= format_N($this->nettoyer($facture['fraisRetenu'])) ?></div>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
 </div>
+
+<div class="modal fade" id="pop_consulter_facture" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable">
+        <div class="modal-content border-0 shadow-lg">
+            <div class="modal-header bg-primary text-white">
+                <h5 class="modal-title"><i class="fa-solid fa-file-invoice me-2"></i><?= _("Détails de la Facture") ?></h5>
+                <button type="button" class="btn-close btn-close-white" data-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body bg-light">
+                <div id="div_consulter_facture_pop" class="mb-3"></div>
+                <div id="div_facture_detail" class="bg-white p-3 rounded shadow-sm"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary fw-bold px-4" data-dismiss="modal"><?= _("Fermer") ?></button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .text-monospace { font-family: 'Courier New', Courier, monospace; }
+    .table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.04); }
+    .italic { font-style: italic; }
+</style>
\ No newline at end of file