From ee57d7fb0ee3eb1de523f9f1d5d158d976bbffda Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Tue, 31 Mar 2026 16:06:10 +0000
Subject: [PATCH] aqw

---
 Vue/Fichebeneficiaire/index.php | 361 ++++++++++++++++----------------
 1 file changed, 181 insertions(+), 180 deletions(-)

diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index f1fdea2..03beda7 100755
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -60,7 +60,6 @@
 ?>
 
 <style>
-
 .form-check-card {
     cursor: pointer;
     transition: all 0.2s ease;
@@ -124,48 +123,6 @@
         font-size: 1rem;
     }
 }
-
-/* Taille fixe et comportement de la photo de profil */
-.profile-img {
-    width: 120px;
-    height: 120px;
-    object-fit: cover;
-    cursor: pointer;
-    transition: transform 0.2s;
-}
-.profile-img:hover {
-    transform: scale(1.05);
-}
-
-/* Placeholder quand il n'y a pas de photo */
-.profile-placeholder {
-    width: 120px;
-    height: 120px;
-    background-color: #f8f9fa;
-    border: 2px dashed #dee2e6;
-}
-
-/* Utilitaires de texte spécifiques */
-.x-small {
-    font-size: 0.75rem;
-}
-
-/* Bordure verticale uniquement sur tablette/desktop */
-@media (min-width: 768px) {
-    .border-end-md {
-        border-right: 1px solid #dee2e6 !important;
-    }
-    .border-start-md {
-        border-left: 1px solid #dee2e6 !important;
-    }
-}
-
-/* Amélioration des inputs de type radio version bouton */
-.btn-check:checked + .btn-outline-primary {
-    background-color: rgba(13, 110, 253, 0.1);
-    color: #0d6efd;
-    font-weight: bold;
-}
 </style>
 
 <div class="container-fluid mt-3">
@@ -201,153 +158,197 @@
         </div>
         
         <div class="card-body">
-			<div class="row g-4">
-				<div class="col-12 col-md-4 col-lg-3 border-end-md">
-					<div class="profile-photo-container text-center mb-4">
-						<?php if ($beneficiaire['faceRegistered'] == "1"): ?>
-							<img src="<?= $photoAssureCrypte ?>" 
-								class="img-thumbnail rounded-circle shadow-sm profile-img" 
-								data-bs-toggle="modal" 
-								data-bs-target="#pop_photo"
-								alt="Photo du bénéficiaire">
-						<?php else: ?>
-							<div class="profile-placeholder rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">
-								<i class="fas fa-user fa-3x text-secondary"></i>
+            <!-- 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="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") ?>
+										</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") ?>
+										</label>
+									</div>
+								</div>
 							</div>
 
-							<?php if ($faceRegistered != "1" && $_SESSION['assureAjoutPhoto'] == "1"): ?>
-								<div class="photo-upload-selector mx-auto">
-									<div class="btn-group-vertical w-100" role="group">
-										<input type="radio" class="btn-check" name="photo_choice" id="prendre_photo_radio" checked>
-										<label class="btn btn-outline-primary text-start px-3" for="prendre_photo_radio">
-											<i class="fas fa-camera me-2"></i> <?= _("Prendre une photo") ?>
-										</label>
+							<!-- 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>
 
-										<input type="radio" class="btn-check" name="photo_choice" id="choisir_photo_radio" value="choisir">
-										<label class="btn btn-outline-primary text-start px-3" for="choisir_photo_radio">
-											<i class="fas fa-folder-open me-2"></i> <?= _("Choisir une photo") ?>
-										</label>
-									</div>
-
-									<div id="div_prendre_photo" class="mt-3">
-										<button class="btn btn-primary w-100 py-2 fw-bold" type="button" onClick="ebene_init_photo_face();">
-											<?= _("Lancer l'appareil photo") ?>
-										</button>
-									</div>
-
-									<div id="div_choisir_photo" class="mt-3 d-none">
-										<form enctype="multipart/form-data" action="Fichebeneficiaire/<?= $_SESSION['idBeneficiaire_C'] ?>/" method="post" class="d-grid gap-2">
-											<input class="form-control form-control-sm" name="fichier_upload" type="file" id="fichier_upload" accept="image/*" />
-											<button type="submit" name="submit" class="btn btn-success w-100">
-												<i class="fas fa-upload me-1"></i> <?= _("Envoyer") ?>
+							<!-- 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>
 									</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>
+							
+							<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-2">
+                                <small class="text-muted"><?= _("Mobile") ?></small>
+                                <p class="fw-bold mb-0"><?= $beneficiaire['telephonePortable'] ?></p>
+                            </div>
+							<?php else : ?>
+							<div class="mb-2">
+                                <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="mb-1">
+                                <label class="form-label small"><?= _("E-mail") ?></label>
+                                <div class="input-group">
+                                    <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; ?>
-						<?php endif; ?>
-						
-						<?php if (!empty($message)): ?>
-							<div class="alert alert-danger mt-3 small p-2"><?= $message ?></div>
-						<?php endif; ?>
-					</div>
-				</div>
-
-				<div class="col-12 col-md-8 col-lg-9">
-					<div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
-						<div>
-							<h2 class="h3 text-primary mb-0"><?= $beneficiaire['nomBeneficiaire'] . ' ' . $beneficiaire['prenomsBeneficiaire'] ?></h2>
-							<p class="text-muted small">
-								<i class="fas fa-birthday-cake me-1"></i>
-								<?= _("Né(e) le") ?> : <?= dateLang($this->nettoyer($beneficiaire['dateNaissance'])) ?> 
-								<span class="badge bg-light text-dark ms-2 border"><?= $this->nettoyer($beneficiaire['age']) ?> ans</span>
-							</p>
-						</div>
-						<div class="status-badge">
-							<?php if ($estcouvert) : ?>
-								<span class="badge rounded-pill bg-success px-3 py-2 lh-base shadow-sm">
-									<i class="fas fa-check-circle me-1"></i> <?= $etatbeneficiaire ?>
-								</span>
-							<?php else: ?>
-								<span class="badge rounded-pill bg-danger px-3 py-2 lh-base shadow-sm">
-									<i class="fas fa-times-circle me-1"></i> <?= _("Non couvert") ?>
-								</span>
-							<?php endif; ?>
-						</div>
-					</div>
-
-					<div class="row g-3">
-						<div class="col-md-6">
-							<div class="p-3 bg-light rounded-3 h-100">
-								<h6 class="text-uppercase text-muted small fw-bold mb-3 border-bottom pb-2"><?= _("Identification") ?></h6>
-								<div class="mb-2">
-									<label class="text-muted x-small d-block"><?= _("N° Adhérent") ?></label>
-									<span class="fw-bold"><?= $beneficiaire['numeroAdherent'] ?></span>
-								</div>
-								<div class="mb-2">
-									<label class="text-muted x-small d-block"><?= _("Lien Parenté") ?></label>
-									<span class="fw-bold"><?= $lienparente ?></span>
-								</div>
-								<div>
-									<label class="text-muted x-small d-block"><?= _("Genre") ?></label>
-									<span class="fw-bold"><?= $sexe ?></span>
-								</div>
 							</div>
-						</div>
 
-						<div class="col-md-6">
-							<div class="p-3 border rounded-3 h-100">
-								<h6 class="text-uppercase text-muted small fw-bold mb-3 border-bottom pb-2"><?= _("Coordonnées") ?></h6>
-								
-								<?php if($codeLienParente != "A"): ?>
-									<div class="mb-3">
-										<label class="text-muted x-small d-block"><?= _("Mobile") ?></label>
-										<span class="fw-bold text-primary"><i class="fas fa-phone-alt me-1"></i> <?= $beneficiaire['telephonePortable'] ?></span>
-									</div>
-									<div>
-										<label class="text-muted x-small d-block"><?= _("Email") ?></label>
-										<span class="fw-bold"><?= $beneficiaire['emailBeneficiaire'] ?></span>
-									</div>
-								<?php else: ?>
-									<div class="mb-3">
-										<div class="d-flex justify-content-between">
-											<label class="form-label small mb-1"><?= _("Mobile") ?></label>
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" id="ignorerFormat" name="ignorerFormat">
-												<label class="form-check-label x-small" for="ignorerFormat"><?= _("Format libre") ?></label>
-											</div>
-										</div>
-										<input type="tel" class="form-control form-control-sm" id="telephonePortable" name="telephonePortable" 
-											onchange="maj_mobile_beneficiaire();" value="<?= $beneficiaire['telephonePortable'] ?>">
-									</div>
-									<div>
-										<label class="form-label small mb-1"><?= _("E-mail") ?></label>
-										<input type="email" class="form-control form-control-sm" id="emailBeneficiaire" name="emailBeneficiaire" 
-											onchange="maj_mobile_beneficiaire();" value="<?= $beneficiaire['emailBeneficiaire'] ?>">
-									</div>
-								<?php endif; ?>
-							</div>
-						</div>
-
-						<div class="col-12 mt-3">
-							<div class="d-flex align-items-center p-3 bg-primary bg-opacity-10 rounded-3 border-start border-primary border-4">
-								<i class="fas fa-file-contract fa-2x text-primary me-3"></i>
-								<div class="row w-100">
-									<div class="col-md-6">
-										<small class="text-muted d-block"><?= _("Souscripteur") ?></small>
-										<span class="fw-bold"><?= $beneficiaire['nomClient'] ?></span>
-									</div>
-									<div class="col-md-6 border-start-md">
-										<small class="text-muted d-block"><?= _("Collège / N° Police") ?></small>
-										<span class="fw-bold"><?= $beneficiaire['libelleCollege'] ?> / <?= $beneficiaire['numeroPolice'] ?></span>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</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>
 
     <!-- Section des plafonds et consommations -->