ebene/radiantassure
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

qxze

Browse Source
This commit is contained in:
KONE SOREL 2026-03-31 17:29:45 +00:00
parent b522de77a7
commit 88c68714f8
1 changed files with 99 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
Vue/Fichebeneficiaire/index.php
View File

@ -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">