diff --git a/Vue/Ajaxfactureconspop/index.php b/Vue/Ajaxfactureconspop/index.php
index daee010..ed1fb40 100644
--- a/Vue/Ajaxfactureconspop/index.php
+++ b/Vue/Ajaxfactureconspop/index.php
@@ -1,127 +1,161 @@
-<div id="div_consulter_facture_pop">	
-	<table class="table table-responsive table-condensed" style="font-size:7pt;">
-		<tbody>
-			<tr>
-				<td width="7%"> <?= _("ID Facture") ?> </td>
-				<td width="13%"> <INPUT style="font-size:7pt;" class="form-control" id="idFacture" name="idFacture" value="<?= $this->nettoyer($facture['idFacture']) ?>" readonly></td>
-				
-				<td width="7%" style='text-align:center'> <?= _("No Bénéf") ?> </td>
-				<td width="10%" ><INPUT style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['numeroBeneficiaire']) ?>" readonly></td>
+<div id="div_consulter_facture_pop" class="p-2 bg-light">
+    <div class="card border-0 shadow-sm mb-3">
+        <div class="card-header bg-white py-2">
+            <div class="row align-items-center">
+                <div class="col-md-4">
+                    <span class="text-muted small text-uppercase fw-bold"><?= _("ID Facture") ?> :</span>
+                    <span class="h6 mb-0 text-primary ms-2"><?= $this->nettoyer($facture['idFacture']) ?></span>
+                </div>
+                <div class="col-md-4 text-center">
+                    <span class="badge bg-primary px-3 rounded-pill"><?= $this->nettoyer($facture['etatfacture']) ?></span>
+                </div>
+                <div class="col-md-4 text-end small">
+                    <span class="text-muted"><?= _("Saisie par") ?> :</span>
+                    <span class="fw-bold"><?= $this->nettoyer($facture['codeUtilisateur']) ?></span>
+                </div>
+            </div>
+        </div>
+        <div class="card-body py-3">
+            <div class="row g-3">
+                <div class="col-md-3">
+                    <label class="small text-muted mb-1"><?= _("Bénéficiaire") ?></label>
+                    <div class="fw-bold border-bottom pb-1"><?= $this->nettoyer($facture['numeroBeneficiaire']) ?> - <?= $this->nettoyer($facture['beneficiaire']) ?></div>
+                </div>
+                <div class="col-md-3">
+                    <label class="small text-muted mb-1"><?= _("Adhérent / Police") ?></label>
+                    <div class="text-truncate small fw-bold"><?= $this->nettoyer($facture['adherent']) ?></div>
+                    <div class="extra-small text-muted">Pol: <?= $this->nettoyer($facture['numeroPolice']) ?> | Cat: <?= $this->nettoyer($facture['codeProduit']) ?></div>
+                </div>
+                <div class="col-md-3">
+                    <label class="small text-muted mb-1"><?= _("Prestataire") ?></label>
+                    <div class="fw-bold text-primary small"><?= $this->nettoyer($facture['prestataire']) ?></div>
+                </div>
+                <div class="col-md-3">
+                    <label class="small text-muted mb-1"><?= _("Contact Adhérent") ?></label>
+                    <div class="small text-truncate"><?= $this->nettoyer($facture['emailAdherent']) ?></div>
+                    <div class="small fw-bold"><?= $this->nettoyer($facture['telAdherent']) ?></div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-				<td width="7%"  style='text-align:center'> <?= _("Bénéficiaire") ?> </td>
-				<td width="25%" ><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['beneficiaire']) ?>" readonly></td>
+    <div class="row g-3 mb-3">
+        <div class="col-md-8">
+            <div class="card border-0 shadow-sm h-100">
+                <div class="card-body">
+                    <h6 class="card-title small fw-bold text-uppercase border-bottom pb-2 mb-3"><i class="fa-solid fa-calculator me-2"></i><?= _("Décompte Financier") ?></h6>
+                    <div class="row text-center g-2">
+                        <div class="col-3">
+                            <div class="small text-muted italic"><?= _("Frais Réels") ?></div>
+                            <div class="fw-bold"><?= format_N($this->nettoyer($facture['fraisReel'])) ?></div>
+                        </div>
+                        <div class="col-3 border-start">
+                            <div class="small text-muted"><?= _("Ticket Modérateur") ?></div>
+                            <div class="fw-bold text-danger"><?= format_N($this->nettoyer($facture['montantTm'])) ?></div>
+                        </div>
+                        <div class="col-3 border-start">
+                            <div class="small text-muted"><?= _("Dépassement") ?></div>
+                            <div class="fw-bold text-warning"><?= format_N($this->nettoyer($facture['fraisExclu'])) ?></div>
+                        </div>
+                        <div class="col-3 border-start">
+                            <div class="small text-muted"><?= _("A Rembourser") ?></div>
+                            <div class="h6 mb-0 fw-bold text-success"><?= format_N($this->nettoyer($facture['montantArembourser'])) ?></div>
+                        </div>
+                    </div>
+                    <hr class="my-3 opacity-10">
+                    <div class="row text-center g-2">
+                        <div class="col-3">
+                            <div class="small text-muted"><?= _("Retenu") ?></div>
+                            <div class="fw-bold small text-muted"><?= format_N($this->nettoyer($facture['fraisRetenu'])) ?></div>
+                        </div>
+                        <div class="col-3">
+                            <div class="small text-muted"><?= _("Redressé") ?></div>
+                            <div class="fw-bold small"><?= format_N($this->nettoyer($facture['montantRedresse'])) ?></div>
+                        </div>
+                        <div class="col-3 border-start bg-light rounded py-1">
+                            <div class="small text-muted fw-bold"><?= _("Net à Payer") ?></div>
+                            <div class="h6 mb-0 fw-bold text-primary"><?= format_N($this->nettoyer($facture['montantApayer'])) ?></div>
+                        </div>
+                        <div class="col-3 border-start bg-primary bg-opacity-10 rounded py-1">
+                            <div class="small text-primary fw-bold"><?= _("Montant Payé") ?></div>
+                            <div class="h6 mb-0 fw-bold text-primary"><?= format_N($this->nettoyer($facture['montantPaye'])) ?></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card border-0 shadow-sm h-100">
+                <div class="card-body">
+                    <h6 class="card-title small fw-bold text-uppercase border-bottom pb-2 mb-3"><?= _("Indicateurs") ?></h6>
+                    <ul class="list-group list-group-flush small">
+                        <li class="list-group-item d-flex justify-content-between px-0 py-1 border-0">
+                            <span><?= _("Tiers-Payant") ?></span>
+                            <span><?= ($facture['tiersPayant']=="1") ? '<i class="fa-solid fa-square-check text-success fs-5"></i>' : '<i class="fa-solid fa-square text-muted opacity-25 fs-5"></i>' ?></span>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between px-0 py-1 border-0">
+                            <span><?= _("Gestion Conf.") ?></span>
+                            <span><?= ($facture['gc']=="1") ? '<i class="fa-solid fa-square-check text-info fs-5"></i>' : '<i class="fa-solid fa-square text-muted opacity-25 fs-5"></i>' ?></span>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between px-0 py-1 border-0 border-top mt-2">
+                            <span class="text-muted small"><?= _("N° Décompte") ?></span>
+                            <span class="fw-bold"><?= $this->nettoyer($facture['numeroDecompte']) ?></span>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between px-0 py-1 border-0">
+                            <span class="text-muted small"><?= _("N° Lot") ?></span>
+                            <span class="fw-bold"><?= $this->nettoyer($facture['numeroLotDecompte']) ?></span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
 
-				<td width="7%"  style='text-align:center'> <?= _("Adhérent") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['adherent']) ?>" readonly></td>
-			</tr>
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-body py-2">
+            <div class="row align-items-center text-center small">
+                <div class="col-md-3">
+                    <span class="text-muted"><?= _("Saisie le") ?> :</span>
+                    <span class="fw-bold ms-1"><?= dateheureLang($this->nettoyer($facture['dateSysteme'])) ?></span>
+                </div>
+                <div class="col-md-3 border-start">
+                    <span class="text-muted"><?= _("Vérifié par") ?> :</span>
+                    <span class="fw-bold ms-1"><?= $this->nettoyer($facture['userControle']) ?></span>
+                </div>
+                <div class="col-md-3 border-start">
+                    <span class="text-muted"><?= _("Date Décompte") ?> :</span>
+                    <span class="fw-bold ms-1"><?= dateLang($this->nettoyer($facture['dateDecompte'])) ?></span>
+                </div>
+                <div class="col-md-3 border-start">
+                    <span class="text-muted"><?= _("Règlement") ?> :</span>
+                    <span class="fw-bold ms-1 text-success"><?= dateheureLang($this->nettoyer($facture['heureReglement'])) ?></span>
+                </div>
+            </div>
+        </div>
+    </div>
 
-			<tr>
-				<td > <?= _("Police") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['numeroPolice']) ?>" readonly></td>
+    <div class="d-flex flex-wrap justify-content-center gap-2">
+        <button type="button" class="btn btn-outline-info flex-grow-1 shadow-sm" onclick="consulterfacturefeuillemaladie_pop();">
+            <i class="fa-solid fa-file-medical me-2"></i><?= _("Feuille Maladie") ?>
+        </button>
+        <button type="button" class="btn btn-outline-info flex-grow-1 shadow-sm" onclick="consulterfactureprestationactes_pop();">
+            <i class="fa-solid fa-stethoscope me-2"></i><?= _("Prestations") ?>
+        </button>
+        <button type="button" class="btn btn-outline-info flex-grow-1 shadow-sm" onclick="consulterfacturemedicaments_pop();">
+            <i class="fa-solid fa-pills me-2"></i><?= _("Médicaments") ?>
+        </button>
+        <button type="button" class="btn btn-outline-info flex-grow-1 shadow-sm" onclick="consulterfactureverres_pop();">
+            <i class="fa-solid fa-glasses me-2"></i><?= _("Verres") ?>
+        </button>
+        <button type="button" class="btn btn-outline-dark flex-grow-1 shadow-sm" onclick="consulterfactureged_pop();">
+            <i class="fa-solid fa-folder-open me-2"></i><?= _("GED (Documents)") ?>
+        </button>
+    </div>
+</div>
 
-				<td style='text-align:center'> <?= _("Catégorie") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['codeProduit']) ?>" readonly></td>
-
-				<td style='text-align:center'> E-mail / Tel </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['emailAdherent']) ?> / <?= $this->nettoyer($facture['telAdherent']) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("Client") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['souscripteur']) ?>" readonly></td>
-			</tr>
-
-			<tr>
-				<td > Date </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= dateheureLang($this->nettoyer($facture['dateSysteme'])) ?>" readonly></td>
-
-				<td style='text-align:center'> User </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['codeUtilisateur']) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("Prestataire") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['prestataire']) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("Etat") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['etatfacture']) ?>" readonly></td>
-			</tr>
-
-			
-			<tr>
-				<td> <?= _("Frais") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['fraisReel'])) ?>" readonly></td>
-				
-				<td style='text-align:center'> <?= _("T M") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['montantTm'])) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("A Remb") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['montantArembourser'])) ?>" readonly></td>
-				
-				<td style='text-align:center'> <?= _("Dépas") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['fraisExclu'])) ?>" readonly></td>
-			</tr>
-				
-			<tr>
-				<td> <?= _("Retenu") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['fraisRetenu'])) ?>" readonly></td>
-				
-				<td style='text-align:center'> <?= _("Forcé") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['montantForce'])) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("Redressé") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['montantRedresse'])) ?>" readonly></td>
-				
-				<td style='text-align:center'> <?= _("A payer") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['montantApayer'])) ?>" readonly></td>
-			</tr>
-			
-			<tr>
-				<td > <?= _("T P") ?> </td>
-				<?php if ($facture['tiersPayant']=="1"): ?>
-					<td align='center'> <input type="checkbox" checked disabled></td>
-				<?php else: ?>
-					<td align='center'> <input type="checkbox" disabled></td>
-				<?php endif; ?>
-
-				<td style='text-align:center'> <?= _("Gest Conf") ?> </td>
-				<?php if ($facture['gc']=="1"): ?>
-					<td align='center'> <input type="checkbox" checked disabled></td>
-				<?php else: ?>
-					<td align='center'> <input type="checkbox" disabled></td>
-				<?php endif; ?>
-
-				<td style='text-align:center'> <?= _("No Décpte") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['numeroDecompte']) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("No Lot") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['numeroLotDecompte']) ?>" readonly></td>
-			</tr>
-			
-			<tr>
-				<td > <?= _("Vérif") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= $this->nettoyer($facture['userControle']) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("Date Décpte") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= dateLang($this->nettoyer($facture['dateDecompte'])) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("Date Rgt") ?> </td>
-				<td><INPUT  style="font-size:7pt;" class="form-control" value="<?= dateheureLang($this->nettoyer($facture['heureReglement'])) ?>" readonly></td>
-
-				<td style='text-align:center'> <?= _("Réglé") ?> </td>
-				<td><INPUT style="font-size:7pt;" class="form-control" value="<?= format_N($this->nettoyer($facture['montantPaye'])) ?>" readonly></td>
-			</tr>
-			
-		</tbody>
-	</table>
-	
-
-		<table class="table table-responsive table-condensed" style='font-size:12pt;' >
-			<tbody>	
-				<tr> 
-					<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-info" onclick="javascript:consulterfacturefeuillemaladie_pop();" > <?= _("Feuille Maladie...") ?> </button> </td>						
-					<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-info" onclick="javascript:consulterfactureprestationactes_pop();" > <?= _("Prestations...") ?> </button> </td>						
-					<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-info" onclick="javascript:consulterfacturemedicaments_pop();" > <?= _("Medicaments...") ?> </button> </td>				
-					<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-info" onclick="javascript:consulterfactureverres_pop();" > <?= _("Verres...") ?> </button> </td>	
-					<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-info" onclick="javascript:consulterfactureged_pop();" > <?= _("GED...") ?> </button> </td>						
-				</tr>
-			</tbody>
-		</table>	
-	
-</div>	
+<style>
+    .extra-small { font-size: 0.65rem; }
+    .italic { font-style: italic; }
+    .card-header { border-bottom: 1px solid rgba(0,0,0,0.05); }
+    #div_consulter_facture_pop label { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
+</style>