diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index 2b2415c..194a783 100755
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -157,199 +157,279 @@
             </div>
         </div>
         
-        <div class="card-body">
-            <!-- Photo et informations principales -->
-            <div class="row">
-                <!-- Photo -->
-                <div class="col-12 col-md-3 text-center mb-4">
-                    <?php if ($beneficiaire['faceRegistered']=="1"): ?>
-                        <img 
-							 src="<?=$photoAssureCrypte?>"
-                             class="img-fluid rounded-circle shadow" 
-                             style="width: 120px; height: 120px; object-fit: cover; cursor:pointer;" 
-                             data-bs-toggle="modal" 
-                             data-bs-target="#pop_photo"
-                             alt="Photo du bénéficiaire">
-                    <?php else: ?>
-                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" 
-                             style="width: 120px; height: 120px; border:1px solid #000 !important;">
-                            <i class="fas fa-user fa-3x text-secondary photo-vide"></i>
-                        </div>
-						<?php if ($faceRegistered!="1" && $_SESSION['assureAjoutPhoto']=="1"):
-						?>
-							<!-- Boutons radios - Version mobile first avec largeur réduite -->
+        <div class="card-body p-4">
+			<!-- ===== SECTION PRINCIPALE : Photo + Infos personnelles ===== -->
+			<div class="row g-4 align-items-start">
+
+				<!-- ── Photo / Avatar ── -->
+				<div class="col-12 col-md-3 text-center">
+
+					<?php if ($beneficiaire['faceRegistered'] == "1"): ?>
+						<!-- Photo enregistrée → cliquable pour agrandissement -->
+						<img
+							src="<?= $photoAssureCrypte ?>"
+							class="rounded-circle shadow-sm object-fit-cover border border-2 border-primary-subtle"
+							style="width:120px; height:120px; cursor:pointer;"
+							data-bs-toggle="modal"
+							data-bs-target="#pop_photo"
+							alt="<?= _('Photo du bénéficiaire') ?>">
+
+					<?php else: ?>
+						<!-- Avatar vide -->
+						<div class="rounded-circle border d-flex align-items-center justify-content-center bg-light mx-auto mb-3"
+							style="width:120px; height:120px;">
+							<i class="fas fa-user fa-3x text-secondary photo-vide"></i>
+						</div>
+
+						<?php if ($faceRegistered != "1" && $_SESSION['assureAjoutPhoto'] == "1"): ?>
+							<!-- ── Choix du mode d'ajout de photo ── -->
 							<div class="mb-3">
-								<div class="d-grid gap-2 mx-auto" style="max-width: 400px;">
-									<div class="form-check form-check-card py-2 px-3 rounded border">
-										<input class="form-check-input" type="radio" name="photo_choice" id="prendre_photo_radio" value="" checked>
-										<label class="form-check-label w-100 d-block fw-medium" for="prendre_photo_radio">
-											<i class="fas fa-camera me-2 text-primary"></i><?= _("Prendre une photo") ?>
+
+								<!-- Boutons radio : Prendre / Choisir -->
+								<div class="d-grid gap-2 mx-auto" style="max-width:360px;">
+
+									<div class="form-check form-check-card border rounded px-3 py-2 text-start">
+										<input class="form-check-input"
+											type="radio"
+											name="photo_choice"
+											id="prendre_photo_radio"
+											value=""
+											checked>
+										<label class="form-check-label fw-medium w-100" for="prendre_photo_radio">
+											<i class="fas fa-camera me-2 text-primary"></i>
+											<?= _("Prendre une photo") ?>
 										</label>
 									</div>
-									<div class="form-check form-check-card py-2 px-3 rounded border">
-										<input class="form-check-input" type="radio" name="photo_choice" id="choisir_photo_radio" value="choisir">
-										<label class="form-check-label w-100 d-block fw-medium" for="choisir_photo_radio">
-											<i class="fas fa-folder-open me-2 text-primary"></i><?= _("Choisir une photo") ?>
+
+									<div class="form-check form-check-card border rounded px-3 py-2 text-start">
+										<input class="form-check-input"
+											type="radio"
+											name="photo_choice"
+											id="choisir_photo_radio"
+											value="choisir">
+										<label class="form-check-label fw-medium w-100" for="choisir_photo_radio">
+											<i class="fas fa-folder-open me-2 text-primary"></i>
+											<?= _("Choisir une photo") ?>
 										</label>
 									</div>
-								</div>
+
+								</div><!-- /d-grid -->
+							</div><!-- /mb-3 -->
+
+							<!-- ── Panneau : Prendre une photo (visible par défaut) ── -->
+							<div id="div_prendre_photo" class="mx-auto" style="max-width:360px;">
+								<!-- Bouton caché déclenché par JS pour ouvrir la modal de reconnaissance faciale -->
+								<button id="btn_pop_save_face"
+										name="btn_pop_save_face"
+										type="button"
+										class="sr-only visually-hidden"
+										data-bs-toggle="modal"
+										data-bs-target="#pop_rec_faciale">
+								</button>
+								<button type="button"
+										class="btn btn-primary w-100 py-3 fw-bold btn_autre"
+										onclick="javascript:ebene_init_photo_face();">
+									<i class="fas fa-camera me-2 fs-5"></i>
+									<?= _("Lancer l'appareil photo") ?>
+								</button>
 							</div>
 
-							<!-- Div pour "Prendre une photo" -->
-							<div id="div_prendre_photo" class="mt-2 mb-2">
-								<div class="mx-auto" style="max-width: 400px;">
-									<button class="sr-only" id="btn_pop_save_face" name="btn_pop_save_face" type="button" data-bs-toggle="modal" data-bs-target="#pop_rec_faciale"></button>
-									<button class="btn btn-primary w-100 py-3 fw-bold btn_autre" type="button" onClick="javascript:ebene_init_photo_face();">
-										<i class="fas fa-camera me-2 fs-5"></i><?= _("Lancer l'appareil photo") ?>
-									</button>
-								</div>
-							</div>
-
-							<!-- Div pour "Choisir une photo" -->
-							<div id="div_choisir_photo" class="d-none">
-								<div class="mx-auto" style="max-width: 400px;">
-									<div class="d-grid gap-2 mt-2 mb-2">
-										<form enctype="multipart/form-data" action="Fichebeneficiaire/<?= $_SESSION['idBeneficiaire_C'] ?>/" method="post">
-											<input class="form-control form-control-lg" name="fichier_upload" type="file" id="fichier_upload" accept="image/*" />
-											<button type="submit" name="submit" class="btn btn-success btn-lg w-100 py-3 btn_autre">
-												<i class="fas fa-upload me-2 fs-5"></i><?= _("Envoyer la photo") ?>
-											</button>
-										</form>
+							<!-- ── Panneau : Choisir une photo (masqué par défaut) ── -->
+							<div id="div_choisir_photo" class="d-none mx-auto" style="max-width:360px;">
+								<form enctype="multipart/form-data"
+									action="Fichebeneficiaire/<?= $_SESSION['idBeneficiaire_C'] ?>/"
+									method="post">
+									<div class="d-grid gap-2 mt-2">
+										<input class="form-control form-control-lg"
+											type="file"
+											name="fichier_upload"
+											id="fichier_upload"
+											accept="image/*">
+										<button type="submit"
+												name="submit"
+												class="btn btn-success btn-lg w-100 py-3 btn_autre">
+											<i class="fas fa-upload me-2 fs-5"></i>
+											<?= _("Envoyer la photo") ?>
+										</button>
 									</div>
-									<h4 style="text-align: center">
-										<?php if ($message>" "): ?>
-											<div class="col-12 alert alert-danger">
-											  <?= $message ?>
-											</div>	
-										<?php endif; ?>  
-									</h4>
-								</div>
-							</div>
-						<?php endif;?>
-                    <?php endif; ?>
-                    
-                </div>
-                
-                <!-- Informations personnelles -->
-                <div class="col-12 col-md-9">
-                    <div class="row">
-                        <div class="col-12 mb-2">
-                            <h3 class="text-primary mb-1"><?= $beneficiaire['nomBeneficiaire'] . ' ' . $beneficiaire['prenomsBeneficiaire'] ?></h3>
-                            <p class="text-muted mb-0"><?= _("Né(e) le").": ".dateLang($this->nettoyer($beneficiaire['dateNaissance']))." => ".$this->nettoyer($beneficiaire['age'])." "._("an(s)") ?></p>
-                        </div>
-                        
-                        <div class="col-12 col-md-6">
-                            <div class="mb-2">
-                                <small class="text-muted"><?= _("N° Adhérent") ?></small>
-                                <p class="fw-bold mb-0"><?= $beneficiaire['numeroAdherent'] ?></p>
-                            </div>
-                            
-                            <div class="mb-2">
-                                <small class="text-muted"><?= _("Lien Parenté") ?></small>
-                                <p class="fw-bold mb-0"><?= $lienparente ?></p>
-                            </div>
-							
+								</form>
+
+								<?php if ($message > " "): ?>
+									<div class="alert alert-danger mt-2 small" role="alert">
+										<?= $message ?>
+									</div>
+								<?php endif; ?>
+							</div><!-- /div_choisir_photo -->
+
+						<?php endif; ?>
+					<?php endif; ?>
+
+				</div><!-- /col Photo -->
+
+
+				<!-- ── Informations personnelles ── -->
+				<div class="col-12 col-md-9">
+					<div class="row g-3">
+
+						<!-- Nom complet + Date de naissance -->
+						<div class="col-12">
+							<h3 class="text-primary mb-1 fw-bold">
+								<?= $beneficiaire['nomBeneficiaire'] . ' ' . $beneficiaire['prenomsBeneficiaire'] ?>
+							</h3>
+							<p class="text-muted mb-0 small">
+								<i class="fas fa-birthday-cake me-1"></i>
+								<?= _("Né(e) le") . " : " . dateLang($this->nettoyer($beneficiaire['dateNaissance']))
+									. " — " . $this->nettoyer($beneficiaire['age']) . " " . _("an(s)") ?>
+							</p>
+						</div>
+
+						<!-- Colonne gauche : N° Adhérent / Lien Parenté / Genre -->
+						<div class="col-12 col-sm-6">
+
 							<div class="mb-2">
-                                <small class="text-muted"><?= _("Genre") ?></small>
-                                <p class="fw-bold mb-0"><?= $sexe ?></p>
-                            </div>
-                        </div>
-                        
-                        <div class="col-12 col-md-6">
-							<?php if($codeLienParente != "A"): ?>
-                            <div class="mb-4">
-                                <small class="text-muted"><?= _("Mobile") ?></small>
-                                <p class="fw-bold mb-0"><?= $beneficiaire['telephonePortable'] ?></p>
-                            </div>
-							<?php else : ?>
-							<div class="mb-4">
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <label class="form-label text-muted small">
-                                        <?= _("Mobile") ?>
-                                    </label>
-                                    <div class="form-check mb-1">
-                                        <input class="form-check-input" type="checkbox" id="ignorerFormat" name="ignorerFormat">
-                                        <label class="form-check-label small text-muted" for="ignorerFormat">
-                                            <?= est_anglophone() ? "Free format" : "Format libre"; ?>
-                                        </label>
-                                    </div>
-                                </div>
-                                
-                                <div class="input-group">
-                                    <span class="input-group-text bg-white text-muted"><i class="fas fa-mobile-alt"></i></span>
-                                    <input type="tel" 
-                                        class="form-control" 
-                                        id="telephonePortable" 
-                                        name="telephonePortable" 
-                                        placeholder="Ex:250700000001"
-                                        required 
-                                        pattern="^250[0-9]{9,}$"
-                                        title="<?= est_anglophone() ? "The number must start with 250 and contain at least 12 digits." : "Le numéro doit commencer par 250 et comporter au moins 12 chiffres.";?>"
-                                        oninput="this.setCustomValidity('')"
-                                        oninvalid="validerMessageTelephone(this)"
-										onchange="javascript:maj_mobile_beneficiaire();"
-										value="<?= $beneficiaire['telephonePortable'] ?>">
-                                </div>
-                                <div id="aideTelephone" class="form-text text-muted small">
-                                    <i class="fas fa-info-circle"></i> <?= est_anglophone() ? 'Required format: 250XXXXXXXXX (min. 12 digits)' : 'Format requis : 250XXXXXXXXX (min. 12 chiffres)'; ?>
-                                </div>
-                            </div>
-                            <?php endif; ?>
-							
-							<div class="mb-1">
-							<?php if($codeLienParente != "A"): ?>
-                            <div class="mb-1">
-                                <small class="text-muted"><?= _("Email") ?></small>
-                                <p class="fw-bold mb-0"><?= $beneficiaire['emailBeneficiaire'] ?></p>
-                            </div>
-							<?php else : ?>
-							<div class="input-group">
-                                <label class="form-label fw-bold small text-uppercase mb-1"><?= _("E-mail") ?></label>
-                                <div class="input-group pt-1">
-                                    <span class="input-group-text bg-white text-muted"><i class="fas fa-envelope"></i></span>
-                                    <input type="email" 
-										class="form-control" 
-										id="emailBeneficiaire" 
-										name="emailBeneficiaire" 
-										placeholder="exemple@mail.com"
-										onchange="javascript:maj_mobile_beneficiaire();"
-										value="<?= $beneficiaire['emailBeneficiaire'] ?>">>
-                                </div>
-							<?php endif; ?>
+								<small class="text-muted d-block"><?= _("N° Adhérent") ?></small>
+								<span class="fw-bold"><?= $beneficiaire['numeroAdherent'] ?></span>
 							</div>
 
-                            <div class="mb-2">
-                                <small class="text-muted"><?= _("État") ?></small>
-                                <?php if ($estcouvert) : ?>
-                                    <span class="badge bg-success"><?= $etatbeneficiaire ?></span>
-                                <?php else: ?>
-                                    <span class="badge bg-danger"><?= _("Non couvert") ?></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <hr>
-            
-            <!-- Informations de police -->
-            <div class="row">
-                <div class="col-12 col-md-6">
-                    <div class="mb-2">
-                        <small class="text-muted"><?= _("Souscripteur") ?></small>
-                        <p class="fw-bold mb-0"><?= $beneficiaire['nomClient'] ?></p>
-                    </div>
-                </div>
-                
-                <div class="col-12 col-md-6">
-                    <div class="mb-2">
-                        <small class="text-muted"><?= _("Collège / N° Police") ?></small>
-                        <p class="fw-bold mb-0"><?= $beneficiaire['libelleCollege'] ?> / <?= $beneficiaire['numeroPolice'] ?></p>
-                    </div>
-                </div>
-            </div>
-        </div>
+							<div class="mb-2">
+								<small class="text-muted d-block"><?= _("Lien Parenté") ?></small>
+								<span class="fw-bold"><?= $lienparente ?></span>
+							</div>
+
+							<div class="mb-2">
+								<small class="text-muted d-block"><?= _("Genre") ?></small>
+								<span class="fw-bold"><?= $sexe ?></span>
+							</div>
+
+						</div><!-- /col gauche -->
+
+
+						<!-- Colonne droite : Mobile / Email / État -->
+						<div class="col-12 col-sm-6">
+
+							<!-- Mobile -->
+							<div class="mb-2">
+								<?php if ($codeLienParente != "A"): ?>
+									<!-- Lecture seule pour les non-adhérents principaux -->
+									<small class="text-muted d-block"><?= _("Mobile") ?></small>
+									<span class="fw-bold"><?= $beneficiaire['telephonePortable'] ?></span>
+
+								<?php else: ?>
+									<!-- Champ éditable pour l'adhérent principal -->
+									<div class="d-flex justify-content-between align-items-center mb-1">
+										<label class="form-label small text-muted mb-0" for="telephonePortable">
+											<?= _("Mobile") ?>
+										</label>
+										<div class="form-check mb-0">
+											<input class="form-check-input"
+												type="checkbox"
+												id="ignorerFormat"
+												name="ignorerFormat">
+											<label class="form-check-label small text-muted" for="ignorerFormat">
+												<?= est_anglophone() ? "Free format" : "Format libre" ?>
+											</label>
+										</div>
+									</div>
+									<div class="input-group input-group-sm">
+										<span class="input-group-text bg-white text-muted">
+											<i class="fas fa-mobile-alt"></i>
+										</span>
+										<input type="tel"
+											class="form-control"
+											id="telephonePortable"
+											name="telephonePortable"
+											placeholder="Ex : 250700000001"
+											required
+											pattern="^250[0-9]{9,}$"
+											title="<?= est_anglophone()
+												? "The number must start with 250 and contain at least 12 digits."
+												: "Le numéro doit commencer par 250 et comporter au moins 12 chiffres." ?>"
+											oninput="this.setCustomValidity('')"
+											oninvalid="validerMessageTelephone(this)"
+											onchange="javascript:maj_mobile_beneficiaire();"
+											value="<?= $beneficiaire['telephonePortable'] ?>">
+									</div>
+									<div class="form-text text-muted small mt-1">
+										<i class="fas fa-info-circle me-1"></i>
+										<?= est_anglophone()
+											? "Required format: 250XXXXXXXXX (min. 12 digits)"
+											: "Format requis : 250XXXXXXXXX (min. 12 chiffres)" ?>
+									</div>
+								<?php endif; ?>
+							</div><!-- /Mobile -->
+
+
+							<!-- Email -->
+							<div class="mb-2">
+								<?php if ($codeLienParente != "A"): ?>
+									<!-- Lecture seule -->
+									<small class="text-muted d-block"><?= _("Email") ?></small>
+									<span class="fw-bold"><?= $beneficiaire['emailBeneficiaire'] ?></span>
+
+								<?php else: ?>
+									<!-- Champ éditable -->
+									<label class="form-label small text-muted mb-1" for="emailBeneficiaire">
+										<?= _("E-mail") ?>
+									</label>
+									<div class="input-group input-group-sm">
+										<span class="input-group-text bg-white text-muted">
+											<i class="fas fa-envelope"></i>
+										</span>
+										<input type="email"
+											class="form-control"
+											id="emailBeneficiaire"
+											name="emailBeneficiaire"
+											placeholder="exemple@mail.com"
+											onchange="javascript:maj_email_beneficiaire();"
+											value="<?= $beneficiaire['emailBeneficiaire'] ?>">
+									</div>
+								<?php endif; ?>
+							</div><!-- /Email -->
+
+
+							<!-- État / Couverture -->
+							<div class="mb-2">
+								<small class="text-muted d-block"><?= _("État") ?></small>
+								<?php if ($estcouvert): ?>
+									<span class="badge bg-success fs-6 px-3 py-1">
+										<i class="fas fa-check-circle me-1"></i><?= $etatbeneficiaire ?>
+									</span>
+								<?php else: ?>
+									<span class="badge bg-danger fs-6 px-3 py-1">
+										<i class="fas fa-times-circle me-1"></i><?= _("Non couvert") ?>
+									</span>
+								<?php endif; ?>
+							</div><!-- /État -->
+
+						</div><!-- /col droite -->
+
+					</div><!-- /row infos -->
+				</div><!-- /col Infos personnelles -->
+
+			</div><!-- /row principale -->
+
+
+			<hr class="my-4">
+
+
+			<!-- ===== SECTION : Informations de police ===== -->
+			<div class="row g-3">
+
+				<div class="col-12 col-sm-6">
+					<small class="text-muted d-block"><?= _("Souscripteur") ?></small>
+					<span class="fw-bold"><?= $beneficiaire['nomClient'] ?></span>
+				</div>
+
+				<div class="col-12 col-sm-6">
+					<small class="text-muted d-block"><?= _("Collège / N° Police") ?></small>
+					<span class="fw-bold">
+						<?= $beneficiaire['libelleCollege'] ?> / <?= $beneficiaire['numeroPolice'] ?>
+					</span>
+				</div>
+
+			</div><!-- /row police -->
+
+		</div><!-- /card-body -->
     </div>
 
     <!-- Section des plafonds et consommations -->