From 88c68714f81dd173ac46f60f650a4f27d8cf7bbf Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Tue, 31 Mar 2026 17:29:45 +0000
Subject: [PATCH] qxze

---
 Vue/Fichebeneficiaire/index.php | 160 ++++++++++++++++++++------------
 1 file changed, 99 insertions(+), 61 deletions(-)

diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index d159bbd..9e1806f 100755
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -60,69 +60,107 @@
 ?>
 
 <style>
-.form-check-card {
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: 2px solid #dee2e6 !important;
-}
-
-.form-check-card:hover {
-    border-color: #0d6efd !important;
-    background-color: #f8f9fa;
-}
-
-.form-check-input:checked + .form-check-label {
-    color: #0d6efd;
-	
-}
-
-.form-check-input {
-	border-color: #0d6efd !important;
-}
-
-.form-check-card:has(.form-check-input:checked) {
-    border-color: #0d6efd !important;
-    background-color: #e7f1ff;
-}
-
-/* Amélioration tactile pour mobile */
-@media (max-width: 768px) {
-    .mx-auto[style*="max-width: 400px"] {
-        max-width: 95% !important;
-        padding: 5px 10px;
-    }
-	
-	.form-check-label, .form-check-label i {
-		font-size: 1.8rem !important;
+	.form-check-card {
+		cursor: pointer;
+		transition: all 0.2s ease;
+		border: 2px solid #dee2e6 !important;
 	}
-    
-    .form-check-card {
-        padding: 1rem !important;
-        min-height: 54px;
-    }
-    
-    .btn, .form-control-lg {
-        min-height: 54px;
-        font-size: 1.1rem;
-    }
-    
-    .fs-5 {
-        font-size: 1.2rem !important;
-    }
-}
 
-/* Pour les très petits écrans */
-@media (max-width: 480px) {
-    .form-check-card {
-        padding: 0.75rem !important;
-        min-height: 50px;
-    }
-    
-    .btn, .form-control-lg {
-        min-height: 50px;
-        font-size: 1rem;
-    }
-}
+	.form-check-card:hover {
+		border-color: #0d6efd !important;
+		background-color: #f8f9fa;
+	}
+
+	.form-check-input:checked + .form-check-label {
+		color: #0d6efd;
+		
+	}
+
+	.form-check-input {
+		border-color: #0d6efd !important;
+	}
+
+	.form-check-card:has(.form-check-input:checked) {
+		border-color: #0d6efd !important;
+		background-color: #e7f1ff;
+	}
+
+	/* Amélioration tactile pour mobile */
+	@media (max-width: 768px) {
+		.mx-auto[style*="max-width: 400px"] {
+			max-width: 95% !important;
+			padding: 5px 10px;
+		}
+		
+		.form-check-label, .form-check-label i {
+			font-size: 1.8rem !important;
+		}
+		
+		.form-check-card {
+			padding: 1rem !important;
+			min-height: 54px;
+		}
+		
+		.btn, .form-control-lg {
+			min-height: 54px;
+			font-size: 1.1rem;
+		}
+		
+		.fs-5 {
+			font-size: 1.2rem !important;
+		}
+	}
+
+	/* Pour les très petits écrans */
+	@media (max-width: 480px) {
+		.form-check-card {
+			padding: 0.75rem !important;
+			min-height: 50px;
+		}
+		
+		.btn, .form-control-lg {
+			min-height: 50px;
+			font-size: 1rem;
+		}
+	}
+
+	/* Le Cercle Parfait */
+	.avatar-circle {
+		width: 130px;
+		height: 130px;
+		border-radius: 50% !important;
+		overflow: hidden; /* Coupe ce qui dépasse */
+		transition: all 0.3s ease;
+	}
+
+	.avatar-circle img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover; /* Remplit le cercle sans déformer */
+	}
+
+	.avatar-circle:hover {
+		border-color: var(--bs-primary) !important;
+		transform: scale(1.02);
+	}
+
+	/* Bordure responsive uniquement sur large écran */
+	@media (min-width: 992px) {
+		.border-end-lg {
+			border-right: 1px solid #dee2e6 !important;
+		}
+	}
+
+	/* Zone d'ombre légère pour les blocs d'info */
+	.info-box {
+		border-left: 3px solid transparent;
+		transition: background 0.2s;
+	}
+
+	.info-box:hover {
+		background-color: #f8f9fa;
+		border-left-color: var(--bs-primary);
+	}
 </style>
 
 <div class="container-fluid mt-3">