diff --git a/Vue/Recherche/index copy.php b/Vue/Recherche/index copy.php
new file mode 100755
index 00000000..eb62a25e
--- /dev/null
+++ b/Vue/Recherche/index copy.php	
@@ -0,0 +1,108 @@
+
+<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 eb62a25e..851b546c 100755
--- a/Vue/Recherche/index.php
+++ b/Vue/Recherche/index.php
@@ -1,73 +1,115 @@
+<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>
 
-<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>
+    <!-- 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 class="card-body">
+    </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/">
-                <div class="row g-3">
+
+                <!-- Groupe : Identifiants -->
+                <div class="group-label"><?= _("Identifiants") ?></div>
+                <div class="row g-2 mb-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>
+                        <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 small fw-bold"><?= _("Numéro Famille") ?></label>
-                        <input class="form-control" type="text" id="numeroAdherent" name="numeroAdherent">
+                        <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 small fw-bold"><?= _("Nom") ?></label>
-                        <input class="form-control" type="text" id="nomBeneficiaire" name="nomBeneficiaire">
+                        <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 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">
+                        <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 small fw-bold">E-mail</label>
-                        <input class="form-control" type="email" id="email" name="email">
+                        <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 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") ?>
+                    <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>
 
-    <?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>
+    <!-- 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-hover align-middle mb-0">
+            <table class="table table-sm table-hover align-middle mb-0">
                 <thead class="table-light">
-                    <tr class="small text-uppercase text-muted">
+                    <tr>
                         <th><?= _("Bénéficiaire") ?></th>
                         <th><?= _("Identité") ?></th>
                         <th><?= _("Parenté") ?></th>
@@ -77,32 +119,62 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <?php foreach ($beneficiaires as $beneficiaire): ?>
-                        <tr class="cursor-pointer" onclick="..." style="cursor: pointer;">
+                    <?php if (!empty($beneficiaires)): ?>
+                        <?php foreach ($beneficiaires as $beneficiaire): ?>
+                        <tr class="clickable-row" onclick="...">
                             <td>
-                                <span class="fw-bold text-primary">#<?= $beneficiaire['numeroBeneficiaire'] ?></span><br>
-                                <small class="text-muted">Fam: <?= $beneficiaire['numeroAdherent'] ?></small>
+                                <span class="fw-semibold text-dark">
+                                    #<?= $beneficiaire['numeroBeneficiaire'] ?>
+                                </span><br>
+                                <small class="text-secondary">
+                                    Fam: <?= $beneficiaire['numeroAdherent'] ?>
+                                </small>
                             </td>
                             <td>
-                                <div class="fw-bold"><?= strtoupper($beneficiaire['nomBeneficiaire']) ?></div>
-                                <div class="small"><?= $beneficiaire['prenomsBeneficiaire'] ?></div>
+                                <div class="fw-semibold">
+                                    <?= strtoupper($beneficiaire['nomBeneficiaire']) ?>
+                                </div>
+                                <div class="text-secondary" style="font-size:12px">
+                                    <?= $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>
+                                <span class="badge border text-secondary fw-normal">
+                                    <?= $beneficiaire['codeLienParente'] ?>
+                                </span>
                             </td>
-                            <td class="small fw-bold"><?= $beneficiaire['nomClient'] ?></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 
-                                    $statusClass = ($beneficiaire['codeEtatBeneficiaire'] == 'ACTIF') ? 'bg-success' : 'bg-secondary';
-                                ?>
-                                <span class="badge rounded-pill <?= $statusClass ?>"><?= $beneficiaire['codeEtatBeneficiaire'] ?></span>
+                                <?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 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>
+
+</div><!-- /container -->
\ No newline at end of file