diff --git a/Vue/Recherche/index copy.php b/Vue/Recherche/index copy.php
deleted file mode 100755
index eb62a25e..00000000
--- a/Vue/Recherche/index copy.php	
+++ /dev/null
@@ -1,108 +0,0 @@
-
-<div class="container-fluid py-4">
-    <div class="card border-0 shadow-sm mb-4">
-        <div class="card-header bg-white py-3">
-            <h5 class="mb-0 text-primary fw-bold">
-                <i class="fas fa-search me-2"></i><?= _("Critères de recherche de l'assuré") ?>
-            </h5>
-        </div>
-        <div class="card-body">
-            <form id="frmrecherche" name="frmrecherche" method="post" action="Recherche/index/">
-                <div class="row g-3">
-                    <div class="col-md-3">
-                        <label class="form-label small fw-bold"><?= _("Numéro Bénéficiaire") ?></label>
-                        <input class="form-control" type="text" id="numeroBeneficiaire" name="numeroBeneficiaire" autofocus>
-                    </div>
-                    <div class="col-md-3">
-                        <label class="form-label small fw-bold"><?= _("Numéro Famille") ?></label>
-                        <input class="form-control" type="text" id="numeroAdherent" name="numeroAdherent">
-                    </div>
-                    <div class="col-md-3">
-                        <label class="form-label small fw-bold"><?= _("Nom") ?></label>
-                        <input class="form-control" type="text" id="nomBeneficiaire" name="nomBeneficiaire">
-                    </div>
-                    <div class="col-md-3">
-                        <label class="form-label small fw-bold"><?= _("Prénoms") ?></label>
-                        <input class="form-control" type="text" id="prenomsBeneficiaire" name="prenomsBeneficiaire">
-                    </div>
-                    
-                    <div class="col-md-3">
-                        <label class="form-label small fw-bold">Tel</label>
-                        <div class="input-group">
-                            <span class="input-group-text bg-light"><i class="fa fa-phone fa-xs"></i></span>
-                            <input class="form-control" type="text" id="telephonePortable" name="telephonePortable">
-                        </div>
-                    </div>
-                    <div class="col-md-3">
-                        <label class="form-label small fw-bold">E-mail</label>
-                        <input class="form-control" type="email" id="email" name="email">
-                    </div>
-                    
-                    <div class="col-md-6 d-flex align-items-end justify-content-end">
-                        <button type="submit" class="btn btn-primary px-4 shadow-sm">
-                            <i class="fa fa-search me-2"></i> <?= _("Rechercher") ?>
-                        </button>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <?php if (is_array($derniernumerobeneficiaires) && $derniernumerobeneficiaires['nouveau'] > 0): ?>
-        <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center" role="alert">
-            <i class="fa-solid fa-triangle-exclamation fs-4 me-3 text-danger"></i>
-            <div>
-                <strong><?= _("Alerte de remplacement") ?> :</strong> 
-                <?= _("Carte") ?> <span class="badge bg-danger"><?= $derniernumerobeneficiaires['ancien'] ?></span> 
-                <?= _("remplacée par") ?> <span class="badge bg-success"><?= $derniernumerobeneficiaires['nouveau'] ?></span>.
-            </div>
-        </div>
-    <?php endif; ?>
-
-    <div class="card border-0 shadow-sm">
-        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
-            <h5 class="mb-0 fw-bold"><?= _("Résultats de la recherche") ?></h5>
-            <span class="badge bg-info"><?= count($beneficiaires) ?> <?= _("trouvés") ?></span>
-        </div>
-        <div class="table-responsive">
-            <table class="table table-hover align-middle mb-0">
-                <thead class="table-light">
-                    <tr class="small text-uppercase text-muted">
-                        <th><?= _("Bénéficiaire") ?></th>
-                        <th><?= _("Identité") ?></th>
-                        <th><?= _("Parenté") ?></th>
-                        <th class="text-center"><?= _("Infos") ?></th>
-                        <th><?= _("Souscripteur") ?></th>
-                        <th class="text-center"><?= _("État") ?></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <?php foreach ($beneficiaires as $beneficiaire): ?>
-                        <tr class="cursor-pointer" onclick="..." style="cursor: pointer;">
-                            <td>
-                                <span class="fw-bold text-primary">#<?= $beneficiaire['numeroBeneficiaire'] ?></span><br>
-                                <small class="text-muted">Fam: <?= $beneficiaire['numeroAdherent'] ?></small>
-                            </td>
-                            <td>
-                                <div class="fw-bold"><?= strtoupper($beneficiaire['nomBeneficiaire']) ?></div>
-                                <div class="small"><?= $beneficiaire['prenomsBeneficiaire'] ?></div>
-                            </td>
-                            <td><span class="badge bg-light text-dark border"><?= $beneficiaire['codeLienParente'] ?></span></td>
-                            <td class="small text-center">
-                                <?= $beneficiaire['sexe'] ?> | <?= dateLang($beneficiaire['dateNaissance']) ?><br>
-                                <i class="fa fa-phone text-muted me-1"></i><?= $beneficiaire['telephonePortable'] ?>
-                            </td>
-                            <td class="small fw-bold"><?= $beneficiaire['nomClient'] ?></td>
-                            <td class="text-center">
-                                <?php 
-                                    $statusClass = ($beneficiaire['codeEtatBeneficiaire'] == 'ACTIF') ? 'bg-success' : 'bg-secondary';
-                                ?>
-                                <span class="badge rounded-pill <?= $statusClass ?>"><?= $beneficiaire['codeEtatBeneficiaire'] ?></span>
-                            </td>
-                        </tr>
-                    <?php endforeach; ?>
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>
diff --git a/Vue/Recherche/index.php b/Vue/Recherche/index.php
index 74f19e4c..eb62a25e 100755
--- a/Vue/Recherche/index.php
+++ b/Vue/Recherche/index.php
@@ -1,115 +1,73 @@
-<div class="container-fluid py-3 px-3">
-    <!-- SECTION: HEADER -->
-    <div class="mb-3">
-        <nav aria-label="breadcrumb">
-            <ol class="breadcrumb mb-1" style="font-size:12px">
-                <li class="breadcrumb-item text-secondary">INTER-SANTÉ</li>
-                <li class="breadcrumb-item active text-dark"><?= _("Recherche assuré") ?></li>
-            </ol>
-        </nav>
-        <h5 class="fw-semibold text-dark mb-0"><?= _("Recherche assuré") ?></h5>
-    </div>
 
-    <!-- SECTION: ALERTE REMPLACEMENT CARTE -->
-    <?php if (is_array($derniernumerobeneficiaires) && $derniernumerobeneficiaires['nouveau'] > 0): ?>
-    <div class="d-flex align-items-center gap-2 mb-3 p-3 bg-white rounded"
-         style="border: 1px solid #DEE2E6; border-left: 3px solid #DC3545;">
-        <i class="fa-solid fa-triangle-exclamation text-danger" style="font-size:14px"></i>
-        <div style="font-size:13px">
-            <strong><?= _("Alerte remplacement") ?> :</strong>
-            <?= _("Carte") ?>
-            <span class="badge border text-danger fw-normal ms-1"><?= $derniernumerobeneficiaires['ancien'] ?></span>
-            <?= _("remplacée par") ?>
-            <span class="badge border text-success fw-normal ms-1"><?= $derniernumerobeneficiaires['nouveau'] ?></span>
+<div class="container-fluid py-4">
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-header bg-white py-3">
+            <h5 class="mb-0 text-primary fw-bold">
+                <i class="fas fa-search me-2"></i><?= _("Critères de recherche de l'assuré") ?>
+            </h5>
         </div>
-    </div>
-    <?php endif; ?>
-
-    <!-- SECTION: FORMULAIRE RECHERCHE -->
-    <div class="card mb-3">
-        <div class="card-header d-flex align-items-center gap-2">
-            <i class="fa-solid fa-magnifying-glass" style="font-size:12px;color:#6C757D"></i>
-            <span class="section-label"><?= _("Critères de recherche") ?></span>
-        </div>
-        <div class="card-body p-3">
+        <div class="card-body">
             <form id="frmrecherche" name="frmrecherche" method="post" action="Recherche/index/">
-
-                <!-- Groupe : Identifiants -->
-                <div class="group-label"><?= _("Identifiants") ?></div>
-                <div class="row g-2 mb-3">
+                <div class="row g-3">
                     <div class="col-md-3">
-                        <label class="form-label" for="numeroBeneficiaire"><?= _("N° Bénéficiaire") ?></label>
-                        <input class="form-control form-control-sm" type="text"
-                               id="numeroBeneficiaire" name="numeroBeneficiaire" autofocus>
+                        <label class="form-label small fw-bold"><?= _("Numéro Bénéficiaire") ?></label>
+                        <input class="form-control" type="text" id="numeroBeneficiaire" name="numeroBeneficiaire" autofocus>
                     </div>
                     <div class="col-md-3">
-                        <label class="form-label" for="numeroAdherent"><?= _("N° Famille") ?></label>
-                        <input class="form-control form-control-sm" type="text"
-                               id="numeroAdherent" name="numeroAdherent">
-                    </div>
-                </div>
-
-                <!-- Groupe : Identité -->
-                <div class="group-label"><?= _("Identité") ?></div>
-                <div class="row g-2 mb-3">
-                    <div class="col-md-3">
-                        <label class="form-label" for="nomBeneficiaire"><?= _("Nom") ?></label>
-                        <input class="form-control form-control-sm" type="text"
-                               id="nomBeneficiaire" name="nomBeneficiaire">
+                        <label class="form-label small fw-bold"><?= _("Numéro Famille") ?></label>
+                        <input class="form-control" type="text" id="numeroAdherent" name="numeroAdherent">
                     </div>
                     <div class="col-md-3">
-                        <label class="form-label" for="prenomsBeneficiaire"><?= _("Prénoms") ?></label>
-                        <input class="form-control form-control-sm" type="text"
-                               id="prenomsBeneficiaire" name="prenomsBeneficiaire">
+                        <label class="form-label small fw-bold"><?= _("Nom") ?></label>
+                        <input class="form-control" type="text" id="nomBeneficiaire" name="nomBeneficiaire">
                     </div>
-                </div>
-
-                <!-- Groupe : Contact + Action -->
-                <div class="group-label"><?= _("Contact") ?></div>
-                <div class="row g-2 align-items-end">
                     <div class="col-md-3">
-                        <label class="form-label" for="telephonePortable"><?= _("Téléphone") ?></label>
-                        <div class="input-group input-group-sm">
-                            <span class="input-group-text">
-                                <i class="fa-solid fa-phone" style="font-size:11px"></i>
-                            </span>
-                            <input class="form-control form-control-sm" type="text"
-                                   id="telephonePortable" name="telephonePortable">
+                        <label class="form-label small fw-bold"><?= _("Prénoms") ?></label>
+                        <input class="form-control" type="text" id="prenomsBeneficiaire" name="prenomsBeneficiaire">
+                    </div>
+                    
+                    <div class="col-md-3">
+                        <label class="form-label small fw-bold">Tel</label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-light"><i class="fa fa-phone fa-xs"></i></span>
+                            <input class="form-control" type="text" id="telephonePortable" name="telephonePortable">
                         </div>
                     </div>
                     <div class="col-md-3">
-                        <label class="form-label" for="email">E-mail</label>
-                        <div class="input-group input-group-sm">
-                            <span class="input-group-text">
-                                <i class="fa-solid fa-envelope" style="font-size:11px"></i>
-                            </span>
-                            <input class="form-control form-control-sm" type="email"
-                                   id="email" name="email">
-                        </div>
+                        <label class="form-label small fw-bold">E-mail</label>
+                        <input class="form-control" type="email" id="email" name="email">
                     </div>
-                    <div class="col-md-6 d-flex justify-content-end">
-                        <button type="submit" class="btn btn-dark btn-sm px-4">
-                            <i class="fa-solid fa-magnifying-glass me-2"></i><?= _("Rechercher") ?>
+                    
+                    <div class="col-md-6 d-flex align-items-end justify-content-end">
+                        <button type="submit" class="btn btn-primary px-4 shadow-sm">
+                            <i class="fa fa-search me-2"></i> <?= _("Rechercher") ?>
                         </button>
                     </div>
                 </div>
-
             </form>
         </div>
     </div>
 
-    <!-- SECTION: RÉSULTATS -->
-    <div class="card">
-        <div class="card-header d-flex align-items-center justify-content-between">
-            <span class="section-label"><?= _("Résultats") ?></span>
-            <span class="badge border text-secondary fw-normal">
-                <?= count($beneficiaires) ?> <?= _("trouvé(s)") ?>
-            </span>
+    <?php if (is_array($derniernumerobeneficiaires) && $derniernumerobeneficiaires['nouveau'] > 0): ?>
+        <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center" role="alert">
+            <i class="fa-solid fa-triangle-exclamation fs-4 me-3 text-danger"></i>
+            <div>
+                <strong><?= _("Alerte de remplacement") ?> :</strong> 
+                <?= _("Carte") ?> <span class="badge bg-danger"><?= $derniernumerobeneficiaires['ancien'] ?></span> 
+                <?= _("remplacée par") ?> <span class="badge bg-success"><?= $derniernumerobeneficiaires['nouveau'] ?></span>.
+            </div>
+        </div>
+    <?php endif; ?>
+
+    <div class="card border-0 shadow-sm">
+        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
+            <h5 class="mb-0 fw-bold"><?= _("Résultats de la recherche") ?></h5>
+            <span class="badge bg-info"><?= count($beneficiaires) ?> <?= _("trouvés") ?></span>
         </div>
         <div class="table-responsive">
-            <table class="table table-sm table-hover align-middle mb-0">
+            <table class="table table-hover align-middle mb-0">
                 <thead class="table-light">
-                    <tr>
+                    <tr class="small text-uppercase text-muted">
                         <th><?= _("Bénéficiaire") ?></th>
                         <th><?= _("Identité") ?></th>
                         <th><?= _("Parenté") ?></th>
@@ -119,83 +77,32 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <?php if (!empty($beneficiaires)): ?>
-                        <?php foreach ($beneficiaires as $beneficiaire): ?>
-                        <tr class="clickable-row" onclick="...">
+                    <?php foreach ($beneficiaires as $beneficiaire): ?>
+                        <tr class="cursor-pointer" onclick="..." style="cursor: pointer;">
                             <td>
-                                <span class="fw-semibold text-dark">
-                                    #<?= $beneficiaire['numeroBeneficiaire'] ?>
-                                </span><br>
-                                <small class="text-secondary">
-                                    Fam: <?= $beneficiaire['numeroAdherent'] ?>
-                                </small>
+                                <span class="fw-bold text-primary">#<?= $beneficiaire['numeroBeneficiaire'] ?></span><br>
+                                <small class="text-muted">Fam: <?= $beneficiaire['numeroAdherent'] ?></small>
                             </td>
                             <td>
-                                <div class="fw-semibold">
-                                    <?= strtoupper($beneficiaire['nomBeneficiaire']) ?>
-                                </div>
-                                <div class="text-secondary" style="font-size:12px">
-                                    <?= $beneficiaire['prenomsBeneficiaire'] ?>
-                                </div>
+                                <div class="fw-bold"><?= strtoupper($beneficiaire['nomBeneficiaire']) ?></div>
+                                <div class="small"><?= $beneficiaire['prenomsBeneficiaire'] ?></div>
                             </td>
-                            <td>
-                                <span class="badge border text-secondary fw-normal">
-                                    <?= $beneficiaire['codeLienParente'] ?>
-                                </span>
+                            <td><span class="badge bg-light text-dark border"><?= $beneficiaire['codeLienParente'] ?></span></td>
+                            <td class="small text-center">
+                                <?= $beneficiaire['sexe'] ?> | <?= dateLang($beneficiaire['dateNaissance']) ?><br>
+                                <i class="fa fa-phone text-muted me-1"></i><?= $beneficiaire['telephonePortable'] ?>
                             </td>
-                            <td class="text-center" style="font-size:12px">
-                                <span class="text-secondary"><?= $beneficiaire['sexe'] ?></span>
-                                <span class="text-secondary mx-1">·</span>
-                                <?= dateLang($beneficiaire['dateNaissance']) ?><br>
-                                <i class="fa-solid fa-phone text-secondary me-1"
-                                   style="font-size:10px"></i>
-                                <span class="text-secondary">
-                                    <?= $beneficiaire['telephonePortable'] ?>
-                                </span>
-                            </td>
-                            <td class="fw-semibold"><?= $beneficiaire['nomClient'] ?></td>
+                            <td class="small fw-bold"><?= $beneficiaire['nomClient'] ?></td>
                             <td class="text-center">
-                                <?php $isActif = ($beneficiaire['codeEtatBeneficiaire'] == 'ACTIF'); ?>
-                                <span class="badge border fw-normal
-                                    <?= $isActif ? 'text-success' : 'text-secondary' ?>"
-                                    style="font-size:11px">
-                                    <i class="fa-solid fa-circle fa-2xs me-1"></i>
-                                    <?= $beneficiaire['codeEtatBeneficiaire'] ?>
-                                </span>
+                                <?php 
+                                    $statusClass = ($beneficiaire['codeEtatBeneficiaire'] == 'ACTIF') ? 'bg-success' : 'bg-secondary';
+                                ?>
+                                <span class="badge rounded-pill <?= $statusClass ?>"><?= $beneficiaire['codeEtatBeneficiaire'] ?></span>
                             </td>
                         </tr>
-                        <?php endforeach; ?>
-                    <?php else: ?>
-                        <tr>
-                            <td colspan="6" class="text-center text-secondary py-3">
-                                <i class="fa-solid fa-inbox me-2"></i><?= _("Aucun résultat") ?>
-                            </td>
-                        </tr>
-                    <?php endif; ?>
+                    <?php endforeach; ?>
                 </tbody>
             </table>
         </div>
     </div>
-
-</div><!-- /container -->
-
-<style>
-        body                { background: #F5F5F5; font-size: 13px; color: #212529; }
-        .card               { border: 1px solid #DEE2E6 !important; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
-        .card-header        { background: #fff; border-bottom: 1px solid #DEE2E6; padding: .5rem .75rem; }
-        .group-label        { font-size: 10px; font-weight: 600; text-transform: uppercase;
-                              letter-spacing: .07em; color: #ADB5BD;
-                              border-bottom: 1px solid #F0F0F0; padding-bottom: 4px; margin-bottom: 6px; }
-        .form-label         { font-size: 11px; font-weight: 500; text-transform: uppercase;
-                              letter-spacing: .04em; color: #6C757D; margin-bottom: 3px; }
-        .section-label      { font-size: 11px; font-weight: 500; text-transform: uppercase;
-                              letter-spacing: .06em; color: #6C757D; }
-        .table th           { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
-                              font-weight: 500; color: #6C757D; }
-        .table td           { font-size: 13px; vertical-align: middle; }
-        .clickable-row      { cursor: pointer; }
-        .clickable-row:hover td { background: #F8F9FA; }
-        .input-group-text   { background: #fff; border-color: #DEE2E6; color: #6C757D; }
-        .btn-dark           { background: #343A40; border-color: #343A40; }
-        .btn-dark:hover     { background: #23272b; border-color: #23272b; }
-    </style>
\ No newline at end of file
+</div>
diff --git a/Vue/Recherche/index_test.php b/Vue/Recherche/index_test.php
new file mode 100755
index 00000000..74f19e4c
--- /dev/null
+++ b/Vue/Recherche/index_test.php
@@ -0,0 +1,201 @@
+<div class="container-fluid py-3 px-3">
+    <!-- SECTION: HEADER -->
+    <div class="mb-3">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb mb-1" style="font-size:12px">
+                <li class="breadcrumb-item text-secondary">INTER-SANTÉ</li>
+                <li class="breadcrumb-item active text-dark"><?= _("Recherche assuré") ?></li>
+            </ol>
+        </nav>
+        <h5 class="fw-semibold text-dark mb-0"><?= _("Recherche assuré") ?></h5>
+    </div>
+
+    <!-- SECTION: ALERTE REMPLACEMENT CARTE -->
+    <?php if (is_array($derniernumerobeneficiaires) && $derniernumerobeneficiaires['nouveau'] > 0): ?>
+    <div class="d-flex align-items-center gap-2 mb-3 p-3 bg-white rounded"
+         style="border: 1px solid #DEE2E6; border-left: 3px solid #DC3545;">
+        <i class="fa-solid fa-triangle-exclamation text-danger" style="font-size:14px"></i>
+        <div style="font-size:13px">
+            <strong><?= _("Alerte remplacement") ?> :</strong>
+            <?= _("Carte") ?>
+            <span class="badge border text-danger fw-normal ms-1"><?= $derniernumerobeneficiaires['ancien'] ?></span>
+            <?= _("remplacée par") ?>
+            <span class="badge border text-success fw-normal ms-1"><?= $derniernumerobeneficiaires['nouveau'] ?></span>
+        </div>
+    </div>
+    <?php endif; ?>
+
+    <!-- SECTION: FORMULAIRE RECHERCHE -->
+    <div class="card mb-3">
+        <div class="card-header d-flex align-items-center gap-2">
+            <i class="fa-solid fa-magnifying-glass" style="font-size:12px;color:#6C757D"></i>
+            <span class="section-label"><?= _("Critères de recherche") ?></span>
+        </div>
+        <div class="card-body p-3">
+            <form id="frmrecherche" name="frmrecherche" method="post" action="Recherche/index/">
+
+                <!-- Groupe : Identifiants -->
+                <div class="group-label"><?= _("Identifiants") ?></div>
+                <div class="row g-2 mb-3">
+                    <div class="col-md-3">
+                        <label class="form-label" for="numeroBeneficiaire"><?= _("N° Bénéficiaire") ?></label>
+                        <input class="form-control form-control-sm" type="text"
+                               id="numeroBeneficiaire" name="numeroBeneficiaire" autofocus>
+                    </div>
+                    <div class="col-md-3">
+                        <label class="form-label" for="numeroAdherent"><?= _("N° Famille") ?></label>
+                        <input class="form-control form-control-sm" type="text"
+                               id="numeroAdherent" name="numeroAdherent">
+                    </div>
+                </div>
+
+                <!-- Groupe : Identité -->
+                <div class="group-label"><?= _("Identité") ?></div>
+                <div class="row g-2 mb-3">
+                    <div class="col-md-3">
+                        <label class="form-label" for="nomBeneficiaire"><?= _("Nom") ?></label>
+                        <input class="form-control form-control-sm" type="text"
+                               id="nomBeneficiaire" name="nomBeneficiaire">
+                    </div>
+                    <div class="col-md-3">
+                        <label class="form-label" for="prenomsBeneficiaire"><?= _("Prénoms") ?></label>
+                        <input class="form-control form-control-sm" type="text"
+                               id="prenomsBeneficiaire" name="prenomsBeneficiaire">
+                    </div>
+                </div>
+
+                <!-- Groupe : Contact + Action -->
+                <div class="group-label"><?= _("Contact") ?></div>
+                <div class="row g-2 align-items-end">
+                    <div class="col-md-3">
+                        <label class="form-label" for="telephonePortable"><?= _("Téléphone") ?></label>
+                        <div class="input-group input-group-sm">
+                            <span class="input-group-text">
+                                <i class="fa-solid fa-phone" style="font-size:11px"></i>
+                            </span>
+                            <input class="form-control form-control-sm" type="text"
+                                   id="telephonePortable" name="telephonePortable">
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <label class="form-label" for="email">E-mail</label>
+                        <div class="input-group input-group-sm">
+                            <span class="input-group-text">
+                                <i class="fa-solid fa-envelope" style="font-size:11px"></i>
+                            </span>
+                            <input class="form-control form-control-sm" type="email"
+                                   id="email" name="email">
+                        </div>
+                    </div>
+                    <div class="col-md-6 d-flex justify-content-end">
+                        <button type="submit" class="btn btn-dark btn-sm px-4">
+                            <i class="fa-solid fa-magnifying-glass me-2"></i><?= _("Rechercher") ?>
+                        </button>
+                    </div>
+                </div>
+
+            </form>
+        </div>
+    </div>
+
+    <!-- SECTION: RÉSULTATS -->
+    <div class="card">
+        <div class="card-header d-flex align-items-center justify-content-between">
+            <span class="section-label"><?= _("Résultats") ?></span>
+            <span class="badge border text-secondary fw-normal">
+                <?= count($beneficiaires) ?> <?= _("trouvé(s)") ?>
+            </span>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-sm table-hover align-middle mb-0">
+                <thead class="table-light">
+                    <tr>
+                        <th><?= _("Bénéficiaire") ?></th>
+                        <th><?= _("Identité") ?></th>
+                        <th><?= _("Parenté") ?></th>
+                        <th class="text-center"><?= _("Infos") ?></th>
+                        <th><?= _("Souscripteur") ?></th>
+                        <th class="text-center"><?= _("État") ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php if (!empty($beneficiaires)): ?>
+                        <?php foreach ($beneficiaires as $beneficiaire): ?>
+                        <tr class="clickable-row" onclick="...">
+                            <td>
+                                <span class="fw-semibold text-dark">
+                                    #<?= $beneficiaire['numeroBeneficiaire'] ?>
+                                </span><br>
+                                <small class="text-secondary">
+                                    Fam: <?= $beneficiaire['numeroAdherent'] ?>
+                                </small>
+                            </td>
+                            <td>
+                                <div class="fw-semibold">
+                                    <?= strtoupper($beneficiaire['nomBeneficiaire']) ?>
+                                </div>
+                                <div class="text-secondary" style="font-size:12px">
+                                    <?= $beneficiaire['prenomsBeneficiaire'] ?>
+                                </div>
+                            </td>
+                            <td>
+                                <span class="badge border text-secondary fw-normal">
+                                    <?= $beneficiaire['codeLienParente'] ?>
+                                </span>
+                            </td>
+                            <td class="text-center" style="font-size:12px">
+                                <span class="text-secondary"><?= $beneficiaire['sexe'] ?></span>
+                                <span class="text-secondary mx-1">·</span>
+                                <?= dateLang($beneficiaire['dateNaissance']) ?><br>
+                                <i class="fa-solid fa-phone text-secondary me-1"
+                                   style="font-size:10px"></i>
+                                <span class="text-secondary">
+                                    <?= $beneficiaire['telephonePortable'] ?>
+                                </span>
+                            </td>
+                            <td class="fw-semibold"><?= $beneficiaire['nomClient'] ?></td>
+                            <td class="text-center">
+                                <?php $isActif = ($beneficiaire['codeEtatBeneficiaire'] == 'ACTIF'); ?>
+                                <span class="badge border fw-normal
+                                    <?= $isActif ? 'text-success' : 'text-secondary' ?>"
+                                    style="font-size:11px">
+                                    <i class="fa-solid fa-circle fa-2xs me-1"></i>
+                                    <?= $beneficiaire['codeEtatBeneficiaire'] ?>
+                                </span>
+                            </td>
+                        </tr>
+                        <?php endforeach; ?>
+                    <?php else: ?>
+                        <tr>
+                            <td colspan="6" class="text-center text-secondary py-3">
+                                <i class="fa-solid fa-inbox me-2"></i><?= _("Aucun résultat") ?>
+                            </td>
+                        </tr>
+                    <?php endif; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+</div><!-- /container -->
+
+<style>
+        body                { background: #F5F5F5; font-size: 13px; color: #212529; }
+        .card               { border: 1px solid #DEE2E6 !important; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
+        .card-header        { background: #fff; border-bottom: 1px solid #DEE2E6; padding: .5rem .75rem; }
+        .group-label        { font-size: 10px; font-weight: 600; text-transform: uppercase;
+                              letter-spacing: .07em; color: #ADB5BD;
+                              border-bottom: 1px solid #F0F0F0; padding-bottom: 4px; margin-bottom: 6px; }
+        .form-label         { font-size: 11px; font-weight: 500; text-transform: uppercase;
+                              letter-spacing: .04em; color: #6C757D; margin-bottom: 3px; }
+        .section-label      { font-size: 11px; font-weight: 500; text-transform: uppercase;
+                              letter-spacing: .06em; color: #6C757D; }
+        .table th           { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
+                              font-weight: 500; color: #6C757D; }
+        .table td           { font-size: 13px; vertical-align: middle; }
+        .clickable-row      { cursor: pointer; }
+        .clickable-row:hover td { background: #F8F9FA; }
+        .input-group-text   { background: #fff; border-color: #DEE2E6; color: #6C757D; }
+        .btn-dark           { background: #343A40; border-color: #343A40; }
+        .btn-dark:hover     { background: #23272b; border-color: #23272b; }
+    </style>
\ No newline at end of file