From 5aaef9bc99e603e804cd3ad9beb9a7774f914cd7 Mon Sep 17 00:00:00 2001
From: KANE LAZENI <lkane@ebene.info>
Date: Tue, 30 Dec 2025 18:44:35 +0000
Subject: [PATCH] a

---
 Vue/Accueilassure/index copy 2.php | 1317 -------------------------
 Vue/Accueilassure/index copy.php   | 1437 ----------------------------
 2 files changed, 2754 deletions(-)
 delete mode 100755 Vue/Accueilassure/index copy 2.php
 delete mode 100755 Vue/Accueilassure/index copy.php

diff --git a/Vue/Accueilassure/index copy 2.php b/Vue/Accueilassure/index copy 2.php
deleted file mode 100755
index e139191..0000000
--- a/Vue/Accueilassure/index copy 2.php	
+++ /dev/null
@@ -1,1317 +0,0 @@
-
-<?php
-/*
-	$plafondGlobalFamille 		= $limite_adherent['plafond'];
-	$consommationGlobaleFamille = $limite_adherent['consommation'];
-	$niveauGlobalConsoFamille 	= ($consommationGlobaleFamille*100)/$plafondGlobalFamille;
-*/	
-	$plafondGlobalFamilleOut 		= $limite_adherent['plafondOut'];
-	$consommationGlobaleFamilleOut = $limite_adherent['consommationOut'];
-	$niveauGlobalConsoFamilleOut 	= ($consommationGlobaleFamilleOut*100)/$plafondGlobalFamilleOut;
-
-	$plafondGlobalFamilleInp 		= $limite_adherent['plafondInp'];
-	$consommationGlobaleFamilleInp = $limite_adherent['consommationInp'];
-	$niveauGlobalConsoFamilleInp 	= ($consommationGlobaleFamilleInp*100)/$plafondGlobalFamilleInp;
-
-?>
-
-<style>
-	/* === Correctifs affichage textes et tables === */
-	body, h1, h2, h3, h4, h5, h6, p, span, a, label, td, th, strong, em, button, input {
-	  -webkit-font-smoothing: antialiased;
-	  text-rendering: optimizeLegibility;
-	  transform: none !important;
-	}
-
-	/* Tables responsive fallback - web par défaut */
-	.table.table-responsive, table.table-responsive {
-	  display: table;
-	  width: 100%;
-	}
-
-	#div_membre{
-	  background-color: #f1f5fc;  
-	}
-
-	.whatsapp-link {
-	  display: inline-flex;
-	  align-items: center;
-	  gap: 8px;
-	  font-size: 22px;
-	  color: #25D366; /* couleur officielle WhatsApp */
-	  text-decoration: none;
-	  transition: transform 0.2s ease, color 0.2s ease;
-	  cursor: pointer; /* curseur en forme de main */
-	}
-
-	.whatsapp-link:hover {
-	  color: #128C7E;  /* vert plus foncé au survol */
-	  transform: scale(1.1); /* léger zoom */
-	}
-	  
-	.card-header {
-		padding: 0.5rem 1rem !important;
-	}
-
-	.align-same-line {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-	}
-
-	.left-content {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-	}
-
-	.badge {
-		font-size: 0.9rem;
-	}
-
-	.exercice {
-		font-size: 1.8rem !important;
-		margin: 0;
-	}
-
-	/* Amélioration de la lisibilité sur desktop */
-	@media (min-width: 768px) {
-		.table {
-			font-size: 0.9rem;
-		}
-	}
-
-	/* Style pour les icônes */
-	.bi {
-		font-size: 1.1rem;
-	}
-
-	/* Amélioration de l'affichage mobile */
-	@media (max-width: 767.98px) {
-		.card.mb-3 {
-			margin-bottom: 1rem !important;
-		}
-		
-		.card-header {
-			padding: 0.5rem 1rem;
-		}
-		
-		.card-body {
-			padding: 0.75rem;
-		}
-		
-		.accordion-button {
-			font-size: 0.8rem;
-			padding: 0.5rem;
-		}
-		
-		.accordion-body {
-			padding: 0.5rem;
-			font-size: 0.85rem;
-		}
-		
-		.btn-sm {
-			padding: 0.2rem 0.4rem;
-			font-size: 0.75rem;
-		}
-		
-		/* Style pour la modal en mode mobile */
-		.modal-dialog {
-			margin: 0.5rem;
-		}
-		
-		/* Amélioration de l'affichage des badges */
-		.badge {
-			font-size: 0.7rem;
-		}
-	}
-
-	/* Style pour les types de facture */
-	.badge.bg-primary {
-		font-size: 0.75rem;
-	}
-
-	/* Style pour les lignes du tableau desktop */
-	.table-hover tbody tr:hover {
-		background-color: rgba(0, 0, 0, 0.075);
-	}
-	
-</style>
-
-<?php 
-	$this->titre = "Intersanté - Accueil"; 
-	
-	$pourcentageOut = round((100*$limite_adherent['consommationOut'])/$limite_adherent['plafondOut'],2);
-	$pourcentageInp = round((100*$limite_adherent['consommationInp'])/$limite_adherent['plafondInp'],2);
-
-?>
-	<input type="text" id="nomForm" name="nomForm" class="sr-only" value="frmaccueil">
-	
-	<div class="card shadow-lg border-0 mb-4" style="border-radius: 15px;">
-        <div class="card-header bg-primary text-white py-3" style="border-radius: 15px 15px 0 0;">
-			<div class="row align-items-center">
-                <div class="col-8">
-					<div class="d-none d-md-block">
-						<h4 id="h4_titre" class="mb-0 text-center text-truncate">
-							<i class="fas fa-home me-2"></i>
-							<?= _("Bonjour Famille") ?> <?= $adherent['nomAdherent'] ?>
-						</h4>
-					</div>
-
-					<!-- Affichage mobile (cartes) -->
-
-					<div class="d-md-none">
-						<h4 id="h4_titre" class="mb-0 text-center text-truncate" style="max-width: 200px;">
-							<i class="fas fa-home me-2"></i>
-							<?= _("Famille") ?> <?= $adherent['nomAdherent'] ?>
-						</h4>
-					</div>
-					
-                </div>
-                <div class="col-4 text-end">
-                    <span class="badge bg-light text-dark fs-8">
-                        <?= $_SESSION['numeroAdherent_C'] ?>
-                    </span>
-                </div>
-            </div>
-		</div>
-		
-		<!-- Message d'information -->
-		<?php if($_SESSION['envoismswhatsappactif'] =='1'): ?>
-			<div class="alert alert-info mt-3" style="margin-bottom:10px;">
-				<small> 
-					<i class="fas fa-info-circle me-2"></i>
-					<?= _("En cas de réclamation ou tout autre sujet lié à votre police d'assurance, cliquez ici")." " ?>
-					<a class="whatsapp-link" href="javascript:envoyer_message();">
-						<i class="fab fa-whatsapp"></i>
-					</a>
-					
-				</small>
-			</div>
-		<?php endif; ?>
-			
-		<!-- Cards Section -->
-		<div class="row">
-			<!-- Taux de couverture -->
-			<h1 class="fw-bold w100 text-center text-dark" style="margin-top:-10px;"><?= _("Année")." : ".$_SESSION['exercieReference_C']?></h1>
-
-			<!-- Plafond annuel -->
-			<div class="col-xl-4 col-6 mb-4">
-				<div class="card shadow h-100 border border-primary">
-					<div class="card-body p-3">
-						<div class="d-flex align-items-center">
-							<div class="flex-grow-1">
-								<div class="h4 text-primary text-uppercase mb-1" >
-									<?= _("Plafond") ?>
-								</div>
-								<div class="h4 mb-0" style="font-weight:bold">
-									<?= format_N($limite_adherent['plafondOut'])." ".substr($_SESSION['devise_C'],0,1) ?>
-								</div>
-							</div>
-							<div class="ml-2">
-								<i class="fas fa-minus-circle fa-2x text-primary"></i>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			
-			<!-- Consommation Annuelle -->
-			<div class="col-xl-4 col-6 mb-4">
-				<div class="card shadow h-100 border border-info">
-					<div class="card-body p-3">
-						<div class="d-flex flex-column">
-							<div class="h4 text-info text-uppercase mb-1" >
-								<?= _("Dépenses") ?>
-							</div>
-							<div class="d-flex align-items-center">
-								<div class="h4 mb-0 mr-2 me-2" style="font-weight:bold">
-									<?= format_N($limite_adherent['consommationOut'])." ".substr($_SESSION['devise_C'],0,1) ?>
-								</div>
-								<div class="progress flex-grow-1" style="height: 6px;">
-									<div class="progress-bar bg-info border border-info" role="progressbar" 
-										style="width: <?= $pourcentage; ?>%" 
-										aria-valuenow="<?= $pourcentageOut; ?>" 
-										aria-valuemin="0"
-										aria-valuemax="100">
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Solde Annuel -->
-			<div class="col-xl-4 col-6 mb-4">
-				<div class="card shadow h-100 border border-danger">
-					<div class="card-body p-3">
-						<div class="d-flex align-items-center">
-							<div class="flex-grow-1">
-								<div class="h4 text-danger text-uppercase mb-1" >
-									<?= _("Solde") ?>
-								</div>
-								<div class="h4 mb-0" style="font-weight:bold">
-									<?= format_N($limite_adherent['soldeConsommationOut'])." ".substr($_SESSION['devise_C'],0,1) ?>
-								</div>
-							</div>
-							<div class="ml-2">
-								<i class="fas fa-money-bill-wave fa-2x text-danger"></i>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-		</div>
-
-		<!-- progress-bar -->
-		<div class="progress mb-3" >
-			<div class="progress-bar <?= $niveauGlobalConsoFamilleOut >= 80 ? 'bg-danger' : ($niveauGlobalConsoFamilleOut >= 50 ? 'bg-warning' : 'bg-success') ?>" 
-					style="width: <?= min($niveauGlobalConsoFamilleOut, 100) ?>%">
-				<?= number_format($niveauGlobalConsoFamilleOut, 1) ?>%
-			</div>
-		</div>
-
-	</div>
-
-	
-	<div class="inter-sante-container mb-4">
-		<!-- Section des garanties et dépenses de la famille -->
-		<section class="accordion-section">
-			<h2 class="accordion-header">
-				<i class="fas fa-file-medical text-primary"></i> 
-				<span class="accordion-title"><?= _("Garanties")?></span>
-				<i class="accordion-icon bi bi-chevron-down"></i>
-			</h2>
-			
-			<div class="accordion-content">
-				<div class="legend-container d-none d-lg-inline">
-					<table class="legend-table">
-						<tbody>
-							<tr>
-								<td class="text-cell"><?= _('Légende').':'?></td>
-								<td class="text-cell"><?= _('Consommation').' >= 50%'?></td>	
-								<td class="spacer-cell"></td>
-								<td class="color-cell color-1"></td>
-								<td class="spacer-cell"></td>
-								<td class="text-cell"><?= _('Consommation').' >= 80%'?></td>
-								<td class="spacer-cell"></td>
-								<td class="color-cell color-2"></td>	
-								<td class="spacer-cell"></td>	
-								<td class="text-cell"><?= _('Consommation').' = 100% / '._('Transaction').' = 100%'?></td>
-								<td class="spacer-cell"></td>
-								<td class="color-cell color-3"></td>
-							</tr>
-						</tbody>
-					</table>
-				</div>	
-				
-				<div class="tab-container">
-					<fieldset>
-						<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
-						<div class="d-none d-md-block">
-							<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:9pt; white-space:nowrap;">
-								<thead class="table-dark">
-									<tr>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-success text-center"> <?= _("Exercice") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-success text-center"> <?= _("Garantie") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-success text-center"> <?= _("Limites") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-secondary text-center"> <?= _("Consommations") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-secondary text-center"> <?= _("Solde") ?> </th>
-									</tr>
-								</thead>
-
-								<tbody>
-								<?php foreach ($garantieadherents as $v):
-									$champApplication = $this->nettoyer($v['champApplication']);
-									$pourcentConsoFamille = $this->nettoyer($v['pourcentConsoFamille']);
-									$idAdherent = $this->nettoyer($v['idAdherent']);
-									$codeGarantie = $this->nettoyer($v['codeGarantie']);
-									$exercieReference = $this->nettoyer($v['exercieReference']);
-									$plafondFamille = format_N($this->nettoyer($v['plafondFamille']));
-									$plafondFamille = format_N($this->nettoyer($v['plafondFamille']));
-								?>
-								<?php if($pourcentConsoFamille>='50' && $pourcentConsoFamille<'80'): ?>
-								<tr class="color-1" valign="top">
-								<?php elseif($pourcentConsoFamille>='80' && $pourcentConsoFamille <'100'): ?>
-								<tr class="color-2" valign="top">
-								<?php elseif($pourcentConsoFamille >='100'): ?>
-								<tr class="color-3"valign="top">
-								<?php else: ?>
-								<tr valign="top">
-								<?php endif; ?>
-									<td align='center'> <?= $this->nettoyer($v['exercieReference'])?> </td>
-									<td align='center'> 
-									<?php if($pourcentConsoFamille >='95'): ?>
-										<a title="<?= _("Plafond atteint pour cette garantie.")?>" href="javascript:alert('Plafond atteint pour cette garantie!');">
-											<span style="color:blue; background-color:#eeeeee; border:1px solid #000; border-radius:3px;">
-											<?= $this->nettoyer($v['garantie'])?> 
-											</span>
-										</a>
-									<?php else: ?>
-										<?= $this->nettoyer($v['garantie'])?>
-									<?php endif; ?>
-									</td>
-									<td align='center' ><?= $plafondFamille ?></td>
-									<td align='center'><?= format_N($this->nettoyer($v['consommationFamille'])) ?></td>
-									<td align='center' ><?= format_N($this->nettoyer($v['soldeGarantieFamille'])) ?></td>
-								</tr>
-								<?php endforeach; ?>
-								</tbody>
-							</table>
-						</div>
-						<!-- Affichage mobile (cartes) -->
-						<div class="d-md-none">
-							<?php foreach ($garantieadherents as $v):
-								$champApplication = $this->nettoyer($v['champApplication']);
-								$pourcentConsoFamille = $this->nettoyer($v['pourcentConsoFamille']);
-								$idAdherent = $this->nettoyer($v['idAdherent']);
-								$codeGarantie = $this->nettoyer($v['codeGarantie']);
-								$exercieReference = $this->nettoyer($v['exercieReference']);
-								$plafondFamille = format_N($this->nettoyer($v['plafondFamille']));
-								$garantie = $this->nettoyer($v['garantie']);
-								$exercice = $this->nettoyer($v['exercieReference']);
-							?>
-							<div class="container mt-5">
-								<div class="card mb-3 shadow-sm">
-									<div class="card-header bg-light py-2">
-										<div class="align-same-line">
-											<div class="left-content">
-												<?php if($pourcentConsoFamille>='50' && $pourcentConsoFamille<'80'): ?>
-												<span class="badge me-2 color-1"><?= $garantie ?></span>
-												<?php elseif($pourcentConsoFamille>='80' && $pourcentConsoFamille <'100'): ?>
-												<span class="badge me-2 color-2"><?= $garantie ?></span>
-												<?php elseif($pourcentConsoFamille >='100'): ?>
-												<a title="<?= _("Plafond ou nombre de transaction atteint pour cette garantie.")?>" href="javascript:alert_limite('G');">
-													<span class="badge me-2 color-3"><?= $garantie ?></span>
-												</a>
-												<?php else: ?>
-												<span class="badge bg-success me-2" ><?= $garantie ?></span>
-												<?php endif; ?>
-											</div>
-											<small class="text-muted exercice"><?= $exercice ?></small>
-										</div>
-									</div>
-								</div>
-								<div class="row mb-2">
-									<div class="col-6">
-										<div class="d-flex justify-content-between align-items-center">
-											<span class="text-muted small"><?= _("Plafond") ?></span>
-											<span class="fw-bold"><?= $plafondFamille ?></span>
-										</div>
-									</div>
-									
-									<div class="col-6">
-										<div class="d-flex justify-content-between align-items-center">
-											<span class="text-muted small"><?= _("Dépenses") ?></span>
-											<span class="fw-bold"><?= format_N($this->nettoyer($v['consommationFamille'])) ?></span>
-										</div>
-									</div>
-									
-									<div class="col-6">
-										<div class="d-flex justify-content-between align-items-center">
-											<span class="text-muted small"><?= _("Solde") ?></span>
-											<span class="fw-bold text-danger"><?= format_N($this->nettoyer($v['soldeGarantieFamille']))  ?></span>
-										</div>
-									</div>
-								</div>
-								
-								 <!-- Détails supplémentaires (accordéon) -->
-								<!-- Dans la section mobile des garanties -->
-								<div class="accordion" id="accordionGarantie<?= $codeGarantie ?>">
-									<div class="accordion-item">
-										<h2 class="accordion-header" id="heading<?= $codeGarantie ?>">
-											<button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" 
-													data-bs-target="#collapse<?= $codeGarantie ?>" aria-expanded="false" 
-													aria-controls="collapse<?= $codeGarantie ?>" style="font-size: 1.5rem !important;">
-												<i class="bi bi-chevron-down me-2"></i><?= _("Plus de détails...") ?>
-											</button>
-										</h2>
-									</div>
-								</div>
-							</div>
-							<?php endforeach; ?>
-						</div>
-					</fieldset>
-				</div>
-			</div>
-		</section>
-		
-		<hr style="border:none; border-top: 3px double #333; color:#333; overflow: visible; text-align:center; height:5px;">
-
-		<!-- Section historique des prestations -->
-		<section class="accordion-section">
-			<h2 class="accordion-header">
-				<i class="fas fa-procedures"></i> 
-				<span class="accordion-title"><?= _("Historique des dépenses de la famille") ?></span>
-				<i class="accordion-icon bi bi-chevron-down"></i>
-			</h2>
-			
-			<div class="accordion-content">
-				<div class="container mt-3">
-					<div class="form-container">
-						<div class="form-section">
-							<div class="form-label"><?= _("Période du") ?></div>
-							<div class="date-input-group">
-								<input style='text-align:center; font-size:10pt;' class="form-control datepicker" type="text" id="d1" name="d1" value="<?= dateLang($_SESSION['dateEffetAdherent_C'], $_SESSION['lang']) ?>" required autocomplete="off" placeholder="Date début">
-								<span class="date-separator" style="font-weight:bold; font-size:10pt;"><?= _("au") ?></span>
-								<input style='text-align:center; font-size:10pt;' class="form-control datepicker" type="text" id="d2" name="d2" value="<?= dateCouranteLang($_SESSION['lang']) ?>" required autocomplete="off" placeholder="Date fin">
-							</div>
-						</div>
-						
-						<div class="form-section btn-section">
-							<button type="button" class="btn btn-primary btn-actualiser" onclick="javascript:afficherhistoriquefactures('<?= $adherent['numeroAdherent'] ?>');">
-								<i class="fa fa-search me-2"></i> <?=_("Rechercher")?>
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<div id="div_prestation" class="tab-container"></div>	
-			</div>
-		</section>
-		
-		<hr style="border:none; border-top: 3px double #333; color:#333; overflow: visible; text-align:center; height:5px;">
-
-	</div>
-	
-	<!-- Table Section -->
-		<fieldset class="mb-8">
-			<div class="d-none d-md-block">
-				<div class="card-header bg-secondary py-2">
-					<h6 class="mb-0 text-center text-light">
-						<i class="fas fa-users me-2"></i>
-						<?= _("Membres de la famille") ?>
-					</h6>
-				</div>
-			</div>
-			<!-- Affichage mobile (cartes) -->
-			<div class="d-md-none">
-				<div class="card-header bg-dark py-2">
-					<h6 class="mb-0 text-center text-light">
-						<i class="fas fa-users me-2"></i>
-						<?= _("Membres de la famille") ?>
-					</h6>
-				</div>
-			</div>
-					
-			
-			<div id="div_patientez" style="background-color:#fff;"></div>
-			
-			<div id="div_membre" class="p-4 rounded-lg shadow-md tab-container bg-light">
-				<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
-				<div class="d-none d-md-block">
-					<div class="table-responsive">
-						<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:9pt; white-space: nowrap;">
-							<thead class="table-dark">
-								<tr>
-									<th class="text-center"> <?= _("Photo") ?> </th>
-									<th class="text-center"> <?= _("Numéro") ?> </th>
-									<th class="text-center"> <?= _("Nom et prénoms") ?> </th>
-									<th class="text-center"> <?= _("Naissance") ?> </th>
-									<th class="text-center"> <?= _("Lien") ?> </th>
-									<!--
-									<th class="text-center"> <?= ("Plafond") ?> </th>
-									<th class="text-center"> <?= ("Dépenses") ?> </th>
-									<th class="text-center"> <?= ("Solde") ?> </th>
-									<th class="text-center"> % </th>
-									-->
-									<th class="text-center"> <?= ("Impayé ?") ?> </th>
-									<th class="text-center"> <?= ("Dépenses") ?> </th>
-								</tr>
-							</thead>
-							<tbody style="color: #000;">
-								<?php foreach ($beneficiaires as $beneficiaire):
-									$idBeneficiaire = $this->nettoyer($beneficiaire['idBeneficiaire']);
-									$numeroBeneficiaire = $this->nettoyer($beneficiaire['numeroBeneficiaire']);
-									$pourcent = round((100*$beneficiaire['consommation'])/$beneficiaire['plafond'],1);
-									
-									$faceRegistered = $this->nettoyer($beneficiaire['faceRegistered']);
-									$lienPhoto 		= $this->nettoyer($beneficiaire['lienPhoto']);
-									
-									// vérifier que la photo du bénéficiaire existe
-									$photo 	= "";
-									$photoAssureCrypte = "";
-
-									if($faceRegistered == "1" && $lienPhoto>" ")
-									{
-										$photo = $_SESSION['dossierPhoto_C'].$_SESSION['dossierSociete'].'/Photos/'.$lienPhoto;
-
-										$photoAssureCrypte = $photo;
-
-									}	
-
-									$prestationPossible = $this->nettoyer($beneficiaire['prestationPossibleEncaissement']);
-									
-									$impaye = ($prestationPossible=="0") ? 1 : 0;
-								?>
-									<tr onclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>, '<?= $numeroBeneficiaire ?>');"
-										ondblclick="afficher_beneficiaire_id();" valign="top">
-										<td align="center" style="position: relative; z-index: 1;">
-											<?php if($faceRegistered == "1"): ?>
-												<div class="photo-zoom-container" style="display: inline-block;">
-													<img class="photoId rounded-circle photo-zoom" 
-														 src="<?=$photoAssureCrypte?>"
-														 alt="<?= _("Photo Bénéficiaire") ?>" 
-													>
-												</div>
-											<?php else: ?>
-												<div class="photo-zoom-container" style="display: inline-block;">
-													<i class="fas fa-user-circle photo-vide"></i>
-												</div>
-											<?php endif; ?>
-										</td>
-										<td class="text-center">
-											<button type="button" 
-													onclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>,'<?= $numeroBeneficiaire ?>');afficher_beneficiaire_id();" 
-													class="btn btn-primary form-control">
-												<?= $numeroBeneficiaire ?>
-											</button>
-										</td>
-										<?php if($impaye == 0): ?>
-										<td>
-											<?= $this->nettoyer($beneficiaire['nomBeneficiaire'])." ".$this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?>
-										</td>
-										<?php else: ?>
-										<td style="text-decoration: line-through; text-decoration-color: red;">
-											<?= $this->nettoyer($beneficiaire['nomBeneficiaire'])." ".$this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?>
-										</td>
-										<?php endif; ?>
-										<td class="text-center"><?= dateLang($this->nettoyer($beneficiaire['dateNaissance']), $_SESSION['lang']) ?></td>
-										<td class="text-center"><?= $this->nettoyer($beneficiaire['lienparente']) ?></td>
-										<!--
-										<td class="text-center" data-label="Plafond"><?= format_N($this->nettoyer($beneficiaire['plafond'])) ?></td>
-										<td class="text-center" data-label="Dépenses"><?= format_N($this->nettoyer($beneficiaire['consommation'])) ?></td>
-										<td class="text-center" data-label="Solde"><?= format_N($this->nettoyer($beneficiaire['soldeConsommation'])) ?></td>
-										<td class="text-center" data-label="%"><?=$pourcent?></td>
-										-->
-										<td class="text-center" >									
-											<?= ebene_check_box_disabled($impaye) ?>
-										</td>
-										<td class="text-center" data-label="Dépenses"><?= format_N($this->nettoyer($beneficiaire['consommation'])) ?></td>
-									</tr>
-								<?php endforeach; ?>
-							</tbody>
-						</table>
-					</div>
-				</div>
-				
-				<!-- Affichage mobile (cartes) -->
-				<div class="d-md-none">
-					<?php foreach ($beneficiaires as $beneficiaire):
-						$idBeneficiaire = $this->nettoyer($beneficiaire['idBeneficiaire']);
-						$numeroBeneficiaire = $this->nettoyer($beneficiaire['numeroBeneficiaire']);
-						$pourcent = round((100*$beneficiaire['consommation'])/$beneficiaire['plafond'],1);
-						
-						$faceRegistered = $this->nettoyer($beneficiaire['faceRegistered']);
-						$lienPhoto 		= $this->nettoyer($beneficiaire['lienPhoto']);
-						
-						$prestationPossible = $this->nettoyer($beneficiaire['prestationPossibleEncaissement']);
-						
-						// vérifier que la photo du bénéficiaire existe
-						$photo 	= "";
-						$photoAssureCrypte = "";
-
-						if($faceRegistered == "1" && $lienPhoto>" ")
-						{
-							$photo = $_SESSION['dossierPhoto_C'].$_SESSION['dossierSociete'].'/Photos/'.$lienPhoto;
-
-							$photoAssureCrypte = $photo;
-
-						}	
-					?>
-					<div class="card-body py-2">
-						<!-- Informations principales -->
-						<div class="row">
-							<?php if($faceRegistered == "1"): ?>
-								<div class="photo-zoom-container text-center mb-2" style="display: inline-block;">
-									<img class="photoId rounded-circle photo-zoom" 
-										 src="<?=$photoAssureCrypte?>"
-										 alt="<?= _("Photo Bénéficiaire") ?>" 
-										 >
-								</div>
-							<?php else: ?>
-								<div class="photo-zoom-container text-center mb-2" style="display: inline-block;">
-									<i class="fas fa-user-circle photo-vide"></i>
-								</div>
-							<?php endif; ?>
-							<div class="col-12">
-								<button type="button" style="font-size: 2rem !important; font-weight: bold;" 
-									onclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>,'<?= $numeroBeneficiaire ?>');afficher_beneficiaire_id();" 
-									class="btn btn-info form-control">
-									<?= $numeroBeneficiaire ?>
-								</button>
-							</div>
-							
-							<div class="col-12" >
-								<p class="text-center fw-bold text-truncate" style="max-width: 300px;"><?= $this->nettoyer($beneficiaire['nomBeneficiaire'])." ".$this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?></p>
-							</div>
-						</div>
-						
-						<div class="row mb-2">
-							<div class="col-6">
-								<div class="d-flex justify-content-between align-items-center">
-									<span class="text-muted small"><?= _("Âge") ?></span>
-									<span class="fw-bold"><?= $this->nettoyer($beneficiaire['ageBeneficiaire'])." "._("ans") ?></span>
-								</div>
-							</div>
-							
-							<div class="col-6">
-								<div class="d-flex justify-content-between align-items-center">
-									<span class="text-muted small"><?= _("Lien") ?></span>
-									<span class="fw-bold"><?= $this->nettoyer($beneficiaire['lienparente']) ?></span>
-								</div>
-							</div>
-						</div>
-						
-
-						<?php if($prestationPossible == "0"): ?>
-						<div class="col-12">
-							<div class="d-flex justify-content-between align-items-center">
-								<span class="badge bg-danger text-light"><?= _("Prime impayée") ?>
-							</div>
-						</div>
-						
-						<?php endif; ?>
-					</div>
-					<?php endforeach; ?>
-				</div>
-			</div>
-		</fieldset>
-		
-    <div class="col-12 tab-container">
-		<!-- Enhanced Charts Section -->
-		<div class="row mt-4">
-			<!-- Responsive Area Chart -->
-			<div class="col-xl-8 col-lg-7 mb-4">
-				<div class="card shadow h-100">
-					
-					<div class="d-none d-md-block">
-						<div class="card-header bg-secondary py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-calendar-alt me-2"></i>
-								<?= _("Dépenses familiales par mois") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="d-md-none">
-						<div class="card-header bg-dark py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-calendar-alt me-2"></i>
-								<?= _("Dépenses familiales par mois") ?>
-							</h6>
-						</div>
-					</div>
-			
-					<div class="card-header py-3 d-flex flex-column flex-md-row justify-content-between align-items-center">
-	
-						<div class="mt-2 mt-md-0">
-							<button id="exportTrendBtn" class="btn btn-sm btn-danger mr-2">
-								<i class="fas fa-download"></i> PDF
-							</button>
-							<small class="text-muted" style="color:#000; font-weight:bold"><?= _("Évolution sur 12 mois") ?></small>
-						</div>
-					</div>
-					<div class="card-body">
-						<div class="chart-container" style="position: relative; height:300px; width:100%">
-							<canvas id="expenseTrendChart"></canvas>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Responsive Pie Chart -->
-			<div class="col-xl-4 col-lg-5 mb-4">
-				<div class="card shadow h-100">
-					
-					<div class="d-none d-md-block">
-						<div class="card-header bg-secondary py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-users me-2"></i>
-								<?= _("Dépenses familiales par lien parenté") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="d-md-none">
-						<div class="card-header bg-dark py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-users me-2"></i>
-								<?= _("Dépenses familiales par lien parenté") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="card-header py-3 d-flex justify-content-between align-items-center">
-						<button id="exportPieBtn" class="btn btn-sm btn-danger">
-							<i class="fas fa-download"></i> PDF
-						</button>
-					</div>
-					<div class="card-body d-flex flex-column">
-						<div class="chart-container" style="position: relative; height:250px; width:100%">
-							<canvas id="expenseDistributionChart"></canvas>
-						</div>
-						<div id="pieChartLegend" class="mt-3 text-center"></div>
-						<div class="mt-auto pt-3">
-							<small class="text-muted" style="font-weight:bold"><?= _("Répartition en pourcentage") ?></small>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<script>
-			// Configuration commune
-			(function() {
-				// Récupération de la devise depuis PHP
-				const userCurrency = '<?= isset($_SESSION['devise_C']) ? substr($_SESSION['devise_C'],0,1) : 'F' ?>';
-				
-				// Configuration des devises
-				const currencyFormats = {
-					'F CFA': {
-						symbol: 'F CFA',
-						format: (value) => new Intl.NumberFormat('fr-FR').format(value) + ' F'
-					},
-					'€': {
-						symbol: '€',
-						format: (value) => new Intl.NumberFormat('fr-FR', {style: 'currency', currency: 'EUR'}).format(value)
-					},
-					'$': {
-						symbol: '$',
-						format: (value) => new Intl.NumberFormat('fr-FR', {style: 'currency', currency: 'USD'}).format(value)
-					},
-					'XOF': {
-						symbol: 'F CFA',
-						format: (value) => new Intl.NumberFormat('fr-FR').format(value) + ' F'
-					}
-				};
-
-				// Format monétaire dynamique
-				const formatMoney = (value) => {
-					const currencyConfig = currencyFormats[userCurrency] || currencyFormats['F CFA'];
-					return currencyConfig.format(value);
-				};
-
-				// Format pourcentage
-				const formatPercentage = (value, total) => {
-					const percentage = (value * 100 / total).toFixed(1);
-					return percentage + '%';
-				};
-
-				// Détection mobile
-				const isMobile = window.matchMedia("(max-width: 768px)").matches;
-				
-				// Génération des couleurs
-				const generateColors = (count) => {
-					const palette = [
-						'#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', 
-						'#e74a3b', '#858796', '#5a5c69', '#3a3b45',
-						'#2e59a9', '#17a673', '#2c9faf', '#dda20a'
-					];
-					return palette.slice(0, count).concat(
-						Array.from({length: Math.max(0, count - palette.length)}, (_, i) => {
-							const hue = Math.floor(360 * (i / Math.max(1, count - palette.length)));
-							return `hsl(${hue}, 70%, 60%)`;
-						})
-					);
-				};
-
-				// Fonction pour générer une légende personnalisée
-				function generateCustomLegend(chart, containerId) {
-					const legendContainer = document.getElementById(containerId);
-					legendContainer.innerHTML = '';
-					
-					const items = chart.data.datasets[0].data.map((value, i) => {
-						const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
-						const percentage = formatPercentage(value, total);
-						
-						return `
-							<div class="d-inline-block mx-2 my-1">
-								<span class="legend-color" style="
-									display: inline-block;
-									width: 12px;
-									height: 12px;
-									background-color: ${chart.data.datasets[0].backgroundColor[i]};
-									border: 1px solid #fff;
-									vertical-align: middle;
-								"></span>
-								<span class="legend-text small ml-1">
-									${chart.data.labels[i]}: ${formatMoney(value)} (${percentage})
-								</span>
-							</div>
-						`;
-					});
-					
-					legendContainer.innerHTML = items.join('');
-				}
-
-				// Fonction pour exporter un graphique en PDF
-				function exportChartToPDF(chartId, fileName) {
-					const { jsPDF } = window.jspdf;
-					const canvas = document.getElementById(chartId);
-					
-					html2canvas(canvas).then(canvasImage => {
-						const imgData = canvasImage.toDataURL('image/png');
-						const pdf = new jsPDF({
-							orientation: canvasImage.width > canvasImage.height ? 'landscape' : 'portrait'
-						});
-						
-						const pageWidth = pdf.internal.pageSize.getWidth();
-						const pageHeight = pdf.internal.pageSize.getHeight();
-						
-						const ratio = canvasImage.height / canvasImage.width;
-						let imgWidth = pageWidth - 20;
-						let imgHeight = imgWidth * ratio;
-						
-						if (imgHeight > pageHeight - 20) {
-							imgHeight = pageHeight - 20;
-							imgWidth = imgHeight / ratio;
-						}
-						
-						pdf.addImage(imgData, 'PNG', 
-							(pageWidth - imgWidth) / 2, 
-							(pageHeight - imgHeight) / 2, 
-							imgWidth, 
-							imgHeight
-						);
-						
-						pdf.save(fileName + '.pdf');
-					});
-				}
-
-				// Graphique d'évolution des dépenses
-				const trendCtx = document.getElementById('expenseTrendChart').getContext('2d');
-				const trendChart = new Chart(trendCtx, {
-					type: 'line',
-					data: {
-						labels: <?= $labels_mois; ?>,
-						datasets: [{
-							label: '<?= _("Montant dépensé") ?>',
-							data: <?= $data_consos; ?>,
-							backgroundColor: 'rgba(78, 115, 223, 0.05)',
-							borderColor: 'rgba(78, 115, 223, 1)',
-							borderWidth: 2,
-							pointBackgroundColor: 'rgba(78, 115, 223, 1)',
-							pointRadius: isMobile ? 3 : 4,
-							pointHoverRadius: 6,
-							fill: true,
-							tension: 0.3
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						plugins: {
-							legend: {
-								display: false
-							},
-							tooltip: {
-								mode: 'index',
-								intersect: false,
-								callbacks: {
-									label: function(context) {
-										return context.dataset.label + ': ' + formatMoney(context.parsed.y);
-									}
-								}
-							}
-						},
-						scales: {
-							x: {
-								grid: {
-									display: false
-								},
-								ticks: {
-									maxRotation: isMobile ? 45 : 0,
-									autoSkip: true,
-									maxTicksLimit: isMobile ? 6 : 12
-								}
-							},
-							y: {
-								beginAtZero: false,
-								ticks: {
-									callback: function(value) {
-										return formatMoney(value);
-									}
-								},
-								grid: {
-									color: 'rgba(0, 0, 0, 0.05)'
-								}
-							}
-						},
-						interaction: {
-							mode: 'nearest',
-							axis: 'x',
-							intersect: false
-						}
-					}
-				});
-
-				// Graphique de répartition
-				const distributionCtx = document.getElementById('expenseDistributionChart').getContext('2d');
-				const distributionChart = new Chart(distributionCtx, {
-					type: 'pie',
-					data: {
-						labels: <?= $labels_liens; ?>,
-						datasets: [{
-							data: <?= $data_liens; ?>,
-							backgroundColor: generateColors(<?= $nbreLienParente; ?>),
-							borderColor: '#fff',
-							borderWidth: 2
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						plugins: {
-							legend: {
-								display: false,
-							},
-							datalabels: {
-								formatter: (value, ctx) => {
-									const sum = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
-									return formatPercentage(value, sum);
-								},
-								color: '#fff',
-								font: {
-									weight: 'bold',
-									size: isMobile ? 10 : 12
-								}
-							},
-							tooltip: {
-								callbacks: {
-									label: function(context) {
-										const label = context.label || '';
-										const value = context.raw || 0;
-										const sum = context.dataset.data.reduce((a, b) => a + b, 0);
-										const percentage = formatPercentage(value, sum);
-										return `${label}: ${formatMoney(value)} (${percentage})`;
-									}
-								}
-							}
-						},
-						cutout: isMobile ? '60%' : '50%'
-					},
-					plugins: [ChartDataLabels]
-				});
-
-				// Générer la légende au chargement et lors du redimensionnement
-				generateCustomLegend(distributionChart, 'pieChartLegend');
-				window.addEventListener('resize', function() {
-					generateCustomLegend(distributionChart, 'pieChartLegend');
-				});
-
-				// Boutons d'export PDF
-				document.getElementById('exportTrendBtn').addEventListener('click', () => {
-					exportChartToPDF('expenseTrendChart', 'evolution_depenses_mensuelles');
-				});
-
-				document.getElementById('exportPieBtn').addEventListener('click', () => {
-					exportChartToPDF('expenseDistributionChart', 'repartition_depenses_parente');
-				});
-
-				document.getElementById('exportBarBtn').addEventListener('click', () => {
-					exportChartToPDF('depensesChart', 'depenses_par_garantie');
-				});
-			})();
-		</script>
-		
-		<style>
-			/* Styles communs pour tous les graphiques */
-			.chart-container {
-				position: relative;
-				width: 100%;
-				min-height: 300px;
-			}
-			
-			#pieChartLegend {
-				font-size: 0.8rem;
-				line-height: 1.4;
-				white-space: normal !important;
-				word-wrap: break-word !important;
-			}
-			
-			.legend-text {
-				vertical-align: middle;
-			}
-			
-			.btn-export {
-				padding: 0.25rem 0.5rem;
-				font-size: 0.75rem;
-			}
-			
-			@media (max-width: 768px) {
-				#pieChartLegend {
-					font-size: 0.7rem;
-				}
-				
-				.chart-container {
-					height: 60vh;
-				}
-				
-				.card-header {
-					flex-direction: column;
-					align-items: flex-start !important;
-				}
-				
-				.btn-export {
-					margin-top: 0.5rem;
-					align-self: flex-end;
-				}
-				
-				
-				.legend-table {
-					font-size: 8pt; /* Légère réduction de la taille de police */
-				}
-				
-				.color-cell {
-					width: 25px;
-					min-width: 25px;
-					height: 18px;
-				}
-			}
-			
-			
-			.legend-container {
-            width: 100%;
-            margin: 5px;
-            overflow-x: auto;
-        }
-        
-        .legend-table {
-            width: 100%;
-            margin: auto;
-            background-color: #f8f8ff;
-            font-size: 9pt;
-            white-space: nowrap;
-            border-collapse: collapse;
-            min-width: 500px; /* Largeur minimale pour assurer la lisibilité */
-        }
-        
-        .legend-table td {
-            padding: 5px 3px;
-        }
-        
-        .text-cell {
-            font-weight: bold;
-            text-align: right;
-            background-color: #f8f8ff;
-            padding-right: 5px;
-        }
-        
-        .color-cell {
-            width: 30px; /* Largeur fixe pour les carrés de couleur */
-            min-width: 30px;
-            height: 20px; /* Hauteur fixe pour mieux voir les couleurs */
-            border: 1px solid #ddd; /* Contour pour mieux distinguer les couleurs claires */
-        }
-        
-        .spacer-cell {
-            width: 1%;
-            background-color: #f8f8ff;
-        }
-        
-		.form-container {
-				background-color: #f8f9fa;
-				padding: 15px;
-				border-radius: 5px;
-				margin-bottom: 20px;
-			}
-			
-			.form-section {
-				margin-bottom: 15px;
-			}
-			
-			.form-label {
-				font-weight: bold;
-				margin-bottom: 5px;
-				font-size: 9pt;
-			}
-			
-			.date-input-group {
-				display: flex;
-				align-items: center;
-				gap: 10px;
-			}
-			
-			.btn-actualiser {
-				margin-top: 25px;
-				width: 100%;
-				font-size: 12pt !important;
-			}
-			
-			/* Pour les écrans plus larges */
-			@media (min-width: 768px) {
-				.form-container {
-					display: flex;
-					flex-wrap: wrap;
-					gap: 15px;
-					align-items: end;
-				}
-				
-				.form-section {
-					flex: 1;
-					margin-bottom: 0;
-					min-width: 180px;
-				}
-				
-				.btn-section {
-					flex: 0 0 auto;
-				}
-				
-				.btn-actualiser {
-					margin-top: 0;
-					width: auto;
-					min-width: 140px;
-				}
-				
-			}
-			
-			/* Pour les très petits écrans */
-			@media (max-width: 380px) {
-				.date-input-group {
-					flex-direction: column;
-					align-items: stretch;
-					gap: 5px;
-				}
-				
-				.date-separator {
-					text-align: center;
-				}
-				
-				.btn-actualiser i{
-					font-size: 1.5rem !important;
-				}
-			}
-			
-			/* Correction du z-index pour Bootstrap SelectPicker */
-			.bootstrap-select .dropdown-menu {
-				z-index: 1060 !important;
-			}
-
-			.bootstrap-select {
-				z-index: 1060 !important;
-			}
-
-			/* Pour les modales ou autres éléments avec z-index élevé */
-			.modal .bootstrap-select .dropdown-menu {
-				z-index: 1060 !important;
-			}
-        
-		</style>
-		
-		
-
-		<style>
-		.accordion-section {
-			margin-bottom: 2px;
-			border: 1px solid #ddd;
-			border-radius: 5px;
-			overflow: hidden;
-		}
-
-		.accordion-header {
-			display: flex;
-			align-items: center;
-			padding: 12px 15px;
-			background-color: #f1f5fc;
-			cursor: pointer;
-			font-weight: bold;
-			font-size: 1.1rem;
-			transition: background-color 0.3s;
-			margin: 0;
-		}
-
-		.accordion-header:hover {
-			background-color: #e9ecef;
-		}
-
-		.accordion-header.active {
-			background-color: #e2e6ea;
-		}
-
-		.accordion-header i:first-child {
-			margin-right: 10px;
-			font-size: 1.2rem;
-		}
-
-		.accordion-title {
-			flex-grow: 1;
-		}
-
-		.accordion-icon {
-			margin-left: auto;
-			transition: transform 0.3s ease;
-		}
-
-		.accordion-header.active .accordion-icon {
-			transform: rotate(180deg);
-		}
-
-		.accordion-content {
-			display: none;
-			padding: 2px;
-			background-color: #fff;
-			border-top: 1px solid #ddd;
-		}
-
-		/* Styles pour la responsivité */
-		@media (max-width: 768px) {
-			.accordion-header, .accordion-header i, .accordion-header span  {
-				font-size: 1.8rem !important;
-				font-weight: bold !important;
-			}
-			
-		}
-		</style>
-
-		<script>
-			document.addEventListener('DOMContentLoaded', function() {
-				// Laisser Bootstrap gérer les accordéons - suppression du script conflictuel
-				// Bootstrap s'occupe déjà du fonctionnement des accordéons
-				
-				// Si vous voulez garder votre système personnalisé pour les grandes sections,
-				// assurez-vous qu'il ne cible pas les mêmes éléments que Bootstrap
-				
-				const sectionHeaders = document.querySelectorAll('.accordion-section .accordion-header');
-				
-				sectionHeaders.forEach(header => {
-					header.addEventListener('click', function() {
-						// Vérifier si cet accordéon est géré par Bootstrap
-						if (!this.querySelector('[data-bs-toggle="collapse"]')) {
-							const content = this.nextElementSibling;
-							const isCurrentlyActive = this.classList.contains('active');
-							
-							// Fermer toutes les sections d'abord
-							document.querySelectorAll('.accordion-section .accordion-content').forEach(content => {
-								content.style.display = 'none';
-							});
-							document.querySelectorAll('.accordion-section .accordion-header').forEach(header => {
-								header.classList.remove('active');
-							});
-							
-							// Si la section n'était pas active, l'ouvrir
-							if (!isCurrentlyActive) {
-								this.classList.add('active');
-								content.style.display = 'block';
-							}
-						}
-					});
-				});
-			});
-
-			// Correction pour les icônes Bootstrap des accordéons
-			document.querySelectorAll('.accordion-button').forEach(button => {
-				button.addEventListener('click', function() {
-					const icon = this.querySelector('.bi');
-					if (icon) {
-						// Bootstrap gère déjà l'animation des icônes
-						// Cette fonctionnalité est incluse dans Bootstrap 5
-					}
-				});
-			});
-		</script>
-	</div>
-
diff --git a/Vue/Accueilassure/index copy.php b/Vue/Accueilassure/index copy.php
deleted file mode 100755
index e58218b..0000000
--- a/Vue/Accueilassure/index copy.php	
+++ /dev/null
@@ -1,1437 +0,0 @@
-<?php
-	$plafondGlobalFamille 		= $limite_adherent['plafond'];
-	$consommationGlobaleFamille = $limite_adherent['consommation'];
-	$niveauGlobalConsoFamille 	= ($consommationGlobaleFamille*100)/$plafondGlobalFamille;
-?>
-
-<style>
-	/* === Correctifs affichage textes et tables === */
-	body, h1, h2, h3, h4, h5, h6, p, span, a, label, td, th, strong, em, button, input {
-	  -webkit-font-smoothing: antialiased;
-	  text-rendering: optimizeLegibility;
-	  transform: none !important;
-	}
-
-	/* Tables responsive fallback - web par défaut */
-	.table.table-responsive, table.table-responsive {
-	  display: table;
-	  width: 100%;
-	}
-
-	#div_membre{
-	  background-color: #f1f5fc;  
-	}
-
-	.whatsapp-link {
-	  display: inline-flex;
-	  align-items: center;
-	  gap: 8px;
-	  font-size: 22px;
-	  color: #25D366; /* couleur officielle WhatsApp */
-	  text-decoration: none;
-	  transition: transform 0.2s ease, color 0.2s ease;
-	  cursor: pointer; /* curseur en forme de main */
-	}
-
-	.whatsapp-link:hover {
-	  color: #128C7E;  /* vert plus foncé au survol */
-	  transform: scale(1.1); /* léger zoom */
-	}
-	  
-	.card-header {
-		padding: 0.5rem 1rem !important;
-	}
-
-	.align-same-line {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-	}
-
-	.left-content {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-	}
-
-	.badge {
-		font-size: 0.9rem;
-	}
-
-	.exercice {
-		font-size: 1.8rem !important;
-		margin: 0;
-	}
-
-	/* Amélioration de la lisibilité sur desktop */
-	@media (min-width: 768px) {
-		.table {
-			font-size: 0.9rem;
-		}
-	}
-
-	/* Style pour les icônes */
-	.bi {
-		font-size: 1.1rem;
-	}
-
-	/* Amélioration de l'affichage mobile */
-	@media (max-width: 767.98px) {
-		.card.mb-3 {
-			margin-bottom: 1rem !important;
-		}
-		
-		.card-header {
-			padding: 0.5rem 1rem;
-		}
-		
-		.card-body {
-			padding: 0.75rem;
-		}
-		
-		.accordion-button {
-			font-size: 0.8rem;
-			padding: 0.5rem;
-		}
-		
-		.accordion-body {
-			padding: 0.5rem;
-			font-size: 0.85rem;
-		}
-		
-		.btn-sm {
-			padding: 0.2rem 0.4rem;
-			font-size: 0.75rem;
-		}
-		
-		/* Style pour la modal en mode mobile */
-		.modal-dialog {
-			margin: 0.5rem;
-		}
-		
-		/* Amélioration de l'affichage des badges */
-		.badge {
-			font-size: 0.7rem;
-		}
-	}
-
-	/* Style pour les types de facture */
-	.badge.bg-primary {
-		font-size: 0.75rem;
-	}
-
-	/* Style pour les lignes du tableau desktop */
-	.table-hover tbody tr:hover {
-		background-color: rgba(0, 0, 0, 0.075);
-	}
-	
-</style>
-
-<?php 
-	$this->titre = "Intersanté - Accueil"; 
-	
-	$pourcentage = round((100*$limite_adherent['consommation'])/$limite_adherent['plafond']);
-
-	// var_dump($garantieadherents);
-?>
-	<input type="text" id="nomForm" name="nomForm" class="sr-only" value="frmaccueil">
-    
-	<div class="card shadow-lg border-0 mb-4" style="border-radius: 15px;">
-        <div class="card-header bg-primary text-white py-3" style="border-radius: 15px 15px 0 0;">
-			<div class="row align-items-center">
-                <div class="col-8">
-					<div class="d-none d-md-block">
-						<h4 id="h4_titre" class="mb-0 text-center text-truncate">
-							<i class="fas fa-home me-2"></i>
-							<?= _("Bonjour Famille") ?> <?= $adherent['nomAdherent'] ?>
-						</h4>
-					</div>
-					<!-- Affichage mobile (cartes) -->
-					<div class="d-md-none">
-						<h4 id="h4_titre" class="mb-0 text-center text-truncate" style="max-width: 200px;">
-							<i class="fas fa-home me-2"></i>
-							<?= _("Famille") ?> <?= $adherent['nomAdherent'] ?>
-						</h4>
-					</div>
-					
-                </div>
-                <div class="col-4 text-end">
-                    <span class="badge bg-light text-dark fs-8">
-                        <?= $_SESSION['numeroAdherent_C'] ?>
-                    </span>
-                </div>
-            </div>
-		</div>
-		
-		<!-- Message d'information -->
-		<div class="alert alert-info mt-3" style="margin-bottom:10px;">
-			<small> 
-				<i class="fas fa-info-circle me-2"></i>
-				<?= _("En cas de réclamation ou tout autre sujet lié à votre police d'assurance, cliquez ici")." " ?>
-				<a class="whatsapp-link" href="javascript:envoyer_message();">
-					<i class="fab fa-whatsapp"></i>
-				</a>
-				
-			</small>
-		</div>
-			
-		<!-- Cards Section -->
-		<div class="row">
-			<!-- Taux de couverture -->
-			<h1 class="fw-bold w100 text-center text-dark" style="margin-top:-10px;"><?= _("Année")." : ".$_SESSION['exercieReference_C']?></h1>
-
-			<!-- Plafond annuel -->
-			<div class="col-xl-4 col-6 mb-4">
-				<div class="card shadow h-100 border border-primary">
-					<div class="card-body p-3">
-						<div class="d-flex align-items-center">
-							<div class="flex-grow-1">
-								<div class="h4 text-primary text-uppercase mb-1" >
-									<?= _("Plafond") ?>
-								</div>
-								<div class="h4 mb-0" style="font-weight:bold">
-									<?= format_N($limite_adherent['plafond'])." ".substr($_SESSION['devise_C'],0,1) ?>
-								</div>
-							</div>
-							<div class="ml-2">
-								<i class="fas fa-minus-circle fa-2x text-primary"></i>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			
-			<!-- Consommation Annuelle -->
-			<div class="col-xl-4 col-6 mb-4">
-				<div class="card shadow h-100 border border-info">
-					<div class="card-body p-3">
-						<div class="d-flex flex-column">
-							<div class="h4 text-info text-uppercase mb-1" >
-								<?= _("Dépenses") ?>
-							</div>
-							<div class="d-flex align-items-center">
-								<div class="h4 mb-0 mr-2 me-2" style="font-weight:bold">
-									<?= format_N($limite_adherent['consommation'])." ".substr($_SESSION['devise_C'],0,1) ?>
-								</div>
-								<div class="progress flex-grow-1" style="height: 6px;">
-									<div class="progress-bar bg-info border border-info" role="progressbar" 
-										style="width: <?= $pourcentage; ?>%" 
-										aria-valuenow="<?= $pourcentage; ?>" 
-										aria-valuemin="0"
-										aria-valuemax="100">
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Solde Annuel -->
-			<div class="col-xl-4 col-6 mb-4">
-				<div class="card shadow h-100 border border-danger">
-					<div class="card-body p-3">
-						<div class="d-flex align-items-center">
-							<div class="flex-grow-1">
-								<div class="h4 text-danger text-uppercase mb-1" >
-									<?= _("Solde") ?>
-								</div>
-								<div class="h4 mb-0" style="font-weight:bold">
-									<?= format_N($limite_adherent['soldeConsommation'])." ".substr($_SESSION['devise_C'],0,1) ?>
-								</div>
-							</div>
-							<div class="ml-2">
-								<i class="fas fa-money-bill-wave fa-2x text-danger"></i>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-		</div>
-
-		<!-- progress-bar -->
-		<div class="progress mb-3" >
-			<div class="progress-bar <?= $niveauGlobalConsoFamille >= 80 ? 'bg-danger' : ($niveauGlobalConsoFamille >= 50 ? 'bg-warning' : 'bg-success') ?>" 
-					style="width: <?= min($niveauGlobalConsoFamille, 100) ?>%">
-				<?= number_format($niveauGlobalConsoFamille, 1) ?>%
-			</div>
-		</div>
-
-	</div>
-
-	
-	<div class="inter-sante-container mb-4">
-		<!-- Section des garanties et dépenses de la famille -->
-		<section class="accordion-section">
-			<h2 class="accordion-header">
-				<i class="fas fa-file-medical text-primary"></i> 
-				<span class="accordion-title"><?= _("Garanties")?></span>
-				<i class="accordion-icon bi bi-chevron-down"></i>
-			</h2>
-			
-			<div class="accordion-content">
-				<div class="legend-container d-none d-lg-inline">
-					<table class="legend-table">
-						<tbody>
-							<tr>
-								<td class="text-cell"><?= _('Légende').':'?></td>
-								<td class="text-cell"><?= _('Consommation').' >= 50%'?></td>	
-								<td class="spacer-cell"></td>
-								<td class="color-cell color-1"></td>
-								<td class="spacer-cell"></td>
-								<td class="text-cell"><?= _('Consommation').' >= 80%'?></td>
-								<td class="spacer-cell"></td>
-								<td class="color-cell color-2"></td>	
-								<td class="spacer-cell"></td>	
-								<td class="text-cell"><?= _('Consommation').' = 100% / '._('Transaction').' = 100%'?></td>
-								<td class="spacer-cell"></td>
-								<td class="color-cell color-3"></td>
-							</tr>
-						</tbody>
-					</table>
-				</div>	
-				
-				<div class="tab-container">
-					<fieldset>
-						<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
-						<div class="d-none d-md-block">
-							<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:9pt; white-space:nowrap;">
-								<thead class="table-dark">
-									<tr>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-success text-center"> <?= _("Exercice") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-success text-center"> <?= _("Garantie") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-success text-center"> <?= _("Limites") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-secondary text-center"> <?= _("Consommations") ?> </th>
-										<th style='border-right:1px solid #ddd !important;' width="10%" class="bg-secondary text-center"> <?= _("Solde") ?> </th>
-									</tr>
-								</thead>
-
-								<tbody>
-								<?php foreach ($garantieadherents as $v):
-									$champApplication = $this->nettoyer($v['champApplication']);
-									$pourcentConsoFamille = $this->nettoyer($v['pourcentConsoFamille']);
-									$idAdherent = $this->nettoyer($v['idAdherent']);
-									$codeGarantie = $this->nettoyer($v['codeGarantie']);
-									$exercieReference = $this->nettoyer($v['exercieReference']);
-									$plafondFamille = format_N($this->nettoyer($v['plafondFamille']));
-									$plafondFamille = format_N($this->nettoyer($v['plafondFamille']));
-								?>
-								<?php if($pourcentConsoFamille>='50' && $pourcentConsoFamille<'80'): ?>
-								<tr class="color-1" valign="top">
-								<?php elseif($pourcentConsoFamille>='80' && $pourcentConsoFamille <'100'): ?>
-								<tr class="color-2" valign="top">
-								<?php elseif($pourcentConsoFamille >='100'): ?>
-								<tr class="color-3"valign="top">
-								<?php else: ?>
-								<tr valign="top">
-								<?php endif; ?>
-									<td align='center'> <?= $this->nettoyer($v['exercieReference'])?> </td>
-									<td align='center'> 
-									<?php if($pourcentConsoFamille >='95'): ?>
-										<a title="<?= _("Plafond atteint pour cette garantie.")?>" href="javascript:alert('Plafond atteint pour cette garantie!');">
-											<span style="color:blue; background-color:#eeeeee; border:1px solid #000; border-radius:3px;">
-											<?= $this->nettoyer($v['garantie'])?> 
-											</span>
-										</a>
-									<?php else: ?>
-										<?= $this->nettoyer($v['garantie'])?>
-									<?php endif; ?>
-									</td>
-									<td align='center' ><?= $plafondFamille ?></td>
-									<td align='center'><?= format_N($this->nettoyer($v['consommationFamille'])) ?></td>
-									<td align='center' ><?= format_N($this->nettoyer($v['soldeGarantieFamille'])) ?></td>
-								</tr>
-								<?php endforeach; ?>
-								</tbody>
-							</table>
-						</div>
-						<!-- Affichage mobile (cartes) -->
-						<div class="d-md-none">
-							<?php foreach ($garantieadherents as $v):
-								$champApplication = $this->nettoyer($v['champApplication']);
-								$pourcentConsoFamille = $this->nettoyer($v['pourcentConsoFamille']);
-								$idAdherent = $this->nettoyer($v['idAdherent']);
-								$codeGarantie = $this->nettoyer($v['codeGarantie']);
-								$exercieReference = $this->nettoyer($v['exercieReference']);
-								$plafondFamille = format_N($this->nettoyer($v['plafondFamille']));
-								$garantie = $this->nettoyer($v['garantie']);
-								$exercice = $this->nettoyer($v['exercieReference']);
-							?>
-							<div class="container mt-5">
-								<div class="card mb-3 shadow-sm">
-									<div class="card-header bg-light py-2">
-										<div class="align-same-line">
-											<div class="left-content">
-												<?php if($pourcentConsoFamille>='50' && $pourcentConsoFamille<'80'): ?>
-												<span class="badge me-2 color-1"><?= $garantie ?></span>
-												<?php elseif($pourcentConsoFamille>='80' && $pourcentConsoFamille <'100'): ?>
-												<span class="badge me-2 color-2"><?= $garantie ?></span>
-												<?php elseif($pourcentConsoFamille >='100'): ?>
-												<a title="<?= _("Plafond ou nombre de transaction atteint pour cette garantie.")?>" href="javascript:alert_limite('G');">
-													<span class="badge me-2 color-3"><?= $garantie ?></span>
-												</a>
-												<?php else: ?>
-												<span class="badge bg-success me-2" ><?= $garantie ?></span>
-												<?php endif; ?>
-											</div>
-											<small class="text-muted exercice"><?= $exercice ?></small>
-										</div>
-									</div>
-								</div>
-								<div class="row mb-2">
-									<div class="col-6">
-										<div class="d-flex justify-content-between align-items-center">
-											<span class="text-muted small"><?= _("Plafond") ?></span>
-											<span class="fw-bold"><?= $plafondFamille ?></span>
-										</div>
-									</div>
-									
-									<div class="col-6">
-										<div class="d-flex justify-content-between align-items-center">
-											<span class="text-muted small"><?= _("Dépenses") ?></span>
-											<span class="fw-bold"><?= format_N($this->nettoyer($v['consommationFamille'])) ?></span>
-										</div>
-									</div>
-									
-									<div class="col-6">
-										<div class="d-flex justify-content-between align-items-center">
-											<span class="text-muted small"><?= _("Solde") ?></span>
-											<span class="fw-bold text-danger"><?= format_N($this->nettoyer($v['soldeGarantieFamille']))  ?></span>
-										</div>
-									</div>
-								</div>
-								
-								 <!-- Détails supplémentaires (accordéon) -->
-								<!-- Dans la section mobile des garanties -->
-								<div class="accordion" id="accordionGarantie<?= $codeGarantie ?>">
-									<div class="accordion-item">
-										<h2 class="accordion-header" id="heading<?= $codeGarantie ?>">
-											<button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" 
-													data-bs-target="#collapse<?= $codeGarantie ?>" aria-expanded="false" 
-													aria-controls="collapse<?= $codeGarantie ?>" style="font-size: 1.5rem !important;">
-												<i class="bi bi-chevron-down me-2"></i><?= _("Plus de détails...") ?>
-											</button>
-										</h2>
-									</div>
-								</div>
-							</div>
-							<?php endforeach; ?>
-						</div>
-					</fieldset>
-				</div>
-			</div>
-		</section>
-		
-		<hr style="border:none; border-top: 3px double #333; color:#333; overflow: visible; text-align:center; height:5px;">
-
-		<!-- Section historique des prestations -->
-		<section class="accordion-section">
-			<h2 class="accordion-header">
-				<i class="fas fa-procedures"></i> 
-				<span class="accordion-title"><?= _("Historique des soins de la famille") ?></span>
-				<i class="accordion-icon bi bi-chevron-down"></i>
-			</h2>
-			
-			<div class="accordion-content">
-				<div class="container mt-3">
-					<div class="form-container">
-						<div class="form-section">
-							<div class="form-label"><?= _("Période du") ?></div>
-							<div class="date-input-group">
-								<input style='text-align:center; font-size:10pt;' class="form-control datepicker" type="text" id="d1" name="d1" value="<?= dateLang($_SESSION['dateEffetAdherent_C'], $_SESSION['lang']) ?>" required autocomplete="off" placeholder="Date début">
-								<span class="date-separator" style="font-weight:bold; font-size:10pt;"><?= _("au") ?></span>
-								<input style='text-align:center; font-size:10pt;' class="form-control datepicker" type="text" id="d2" name="d2" value="<?= dateCouranteLang($_SESSION['lang']) ?>" required autocomplete="off" placeholder="Date fin">
-							</div>
-						</div>
-						
-						<div class="form-section btn-section">
-							<button type="button" class="btn btn-primary btn-actualiser" onclick="javascript:afficherhistoriqueadherent('<?= $adherent['numeroAdherent'] ?>');">
-								<i class="fa fa-search me-2"></i> <?=_("Rechercher")?>
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<div id="div_prestation" class="tab-container"></div>	
-			</div>
-		</section>
-		
-		<hr style="border:none; border-top: 3px double #333; color:#333; overflow: visible; text-align:center; height:5px;">
-
-	</div>
-	
-	<!-- Table Section -->
-		<fieldset class="mb-8">
-			<!--
-			<legend>
-				
-				<?= _("") ?>
-			</legend>
-			-->
-			<div class="d-none d-md-block">
-				<div class="card-header bg-secondary py-2">
-					<h6 class="mb-0 text-center text-light">
-						<i class="fas fa-users me-2"></i>
-						<?= _("Membres de la famille") ?>
-					</h6>
-				</div>
-			</div>
-			<!-- Affichage mobile (cartes) -->
-			<div class="d-md-none">
-				<div class="card-header bg-dark py-2">
-					<h6 class="mb-0 text-center text-light">
-						<i class="fas fa-users me-2"></i>
-						<?= _("Membres de la famille") ?>
-					</h6>
-				</div>
-			</div>
-					
-			
-			<div id="div_patientez" style="background-color:#fff;"></div>
-			
-			<div id="div_membre" class="p-4 rounded-lg shadow-md tab-container bg-light">
-				<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
-				<div class="d-none d-md-block">
-					<div class="table-responsive">
-						<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:9pt; white-space: nowrap;">
-							<thead class="table-dark">
-								<tr>
-									<th class="text-center"> <?= _("Photo") ?> </th>
-									<th class="text-center"> <?= _("Numéro") ?> </th>
-									<th class="text-center"> <?= _("Nom et prénoms") ?> </th>
-									<th class="text-center"> <?= _("Naissance") ?> </th>
-									<th class="text-center"> <?= _("Lien") ?> </th>
-									<!--
-									<th class="text-center"> <?= ("Plafond") ?> </th>
-									<th class="text-center"> <?= ("Dépenses") ?> </th>
-									<th class="text-center"> <?= ("Solde") ?> </th>
-									<th class="text-center"> % </th>
-									-->
-									<th class="text-center"> <?= ("Impayé ?") ?> </th>
-									<th class="text-center"> <?= ("Dépenses") ?> </th>
-								</tr>
-							</thead>
-							<tbody style="color: #000;">
-								<?php foreach ($beneficiaires as $beneficiaire):
-									$idBeneficiaire = $this->nettoyer($beneficiaire['idBeneficiaire']);
-									$numeroBeneficiaire = $this->nettoyer($beneficiaire['numeroBeneficiaire']);
-									$pourcent = round((100*$beneficiaire['consommation'])/$beneficiaire['plafond'],1);
-									
-									$faceRegistered = $this->nettoyer($beneficiaire['faceRegistered']);
-									$lienPhoto 		= $this->nettoyer($beneficiaire['lienPhoto']);
-									
-									// vérifier que la photo du bénéficiaire existe
-									$photo 	= "";
-									$photoAssureCrypte = "";
-
-									if($faceRegistered == "1" && $lienPhoto>" ")
-									{
-										$photo = $_SESSION['dossierPhoto_C'].$_SESSION['dossierSociete'].'/Photos/'.$lienPhoto;
-
-										$photoAssureCrypte = $photo;
-
-									}	
-
-									$prestationPossible = $this->nettoyer($beneficiaire['prestationPossibleEncaissement']);
-									
-									$impaye = ($prestationPossible=="0") ? 1 : 0;
-								?>
-									<tr onclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>, '<?= $numeroBeneficiaire ?>');"
-										ondblclick="afficher_beneficiaire_id();" valign="top">
-										<td align="center" style="position: relative; z-index: 1;">
-											<?php if($faceRegistered == "1"): ?>
-												<div class="photo-zoom-container" style="display: inline-block;">
-													<img class="photoId rounded-circle photo-zoom" 
-														 src="<?=$photoAssureCrypte?>"
-														 alt="<?= _("Photo Bénéficiaire") ?>" 
-													>
-												</div>
-											<?php else: ?>
-												<div class="photo-zoom-container" style="display: inline-block;">
-													<i class="fas fa-user-circle photo-vide"></i>
-												</div>
-											<?php endif; ?>
-										</td>
-										<td class="text-center">
-											<button type="button" 
-													onclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>,'<?= $numeroBeneficiaire ?>');afficher_beneficiaire_id();" 
-													class="btn btn-primary form-control">
-												<?= $numeroBeneficiaire ?>
-											</button>
-										</td>
-										<?php if($impaye == 0): ?>
-										<td>
-											<?= $this->nettoyer($beneficiaire['nomBeneficiaire'])." ".$this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?>
-										</td>
-										<?php else: ?>
-										<td style="text-decoration: line-through; text-decoration-color: red;">
-											<?= $this->nettoyer($beneficiaire['nomBeneficiaire'])." ".$this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?>
-										</td>
-										<?php endif; ?>
-										<td class="text-center"><?= dateLang($this->nettoyer($beneficiaire['dateNaissance']), $_SESSION['lang']) ?></td>
-										<td class="text-center"><?= $this->nettoyer($beneficiaire['lienparente']) ?></td>
-										<!--
-										<td class="text-center" data-label="Plafond"><?= format_N($this->nettoyer($beneficiaire['plafond'])) ?></td>
-										<td class="text-center" data-label="Dépenses"><?= format_N($this->nettoyer($beneficiaire['consommation'])) ?></td>
-										<td class="text-center" data-label="Solde"><?= format_N($this->nettoyer($beneficiaire['soldeConsommation'])) ?></td>
-										<td class="text-center" data-label="%"><?=$pourcent?></td>
-										-->
-										<td class="text-center" >									
-											<?= ebene_check_box_disabled($impaye) ?>
-										</td>
-										<td class="text-center" data-label="Dépenses"><?= format_N($this->nettoyer($beneficiaire['consommation'])) ?></td>
-									</tr>
-								<?php endforeach; ?>
-							</tbody>
-						</table>
-					</div>
-				</div>
-				
-				<!-- Affichage mobile (cartes) -->
-				<div class="d-md-none">
-					<?php foreach ($beneficiaires as $beneficiaire):
-						$idBeneficiaire = $this->nettoyer($beneficiaire['idBeneficiaire']);
-						$numeroBeneficiaire = $this->nettoyer($beneficiaire['numeroBeneficiaire']);
-						$pourcent = round((100*$beneficiaire['consommation'])/$beneficiaire['plafond'],1);
-						
-						$faceRegistered = $this->nettoyer($beneficiaire['faceRegistered']);
-						$lienPhoto 		= $this->nettoyer($beneficiaire['lienPhoto']);
-						
-						$prestationPossible = $this->nettoyer($beneficiaire['prestationPossibleEncaissement']);
-						
-						// vérifier que la photo du bénéficiaire existe
-						$photo 	= "";
-						$photoAssureCrypte = "";
-
-						if($faceRegistered == "1" && $lienPhoto>" ")
-						{
-							$photo = $_SESSION['dossierPhoto_C'].$_SESSION['dossierSociete'].'/Photos/'.$lienPhoto;
-
-							$photoAssureCrypte = $photo;
-
-						}	
-					?>
-					<div class="card-body py-2">
-						<!-- Informations principales -->
-						<div class="row">
-							<?php if($faceRegistered == "1"): ?>
-								<div class="photo-zoom-container text-center mb-2" style="display: inline-block;">
-									<img class="photoId rounded-circle photo-zoom" 
-										 src="<?=$photoAssureCrypte?>"
-										 alt="<?= _("Photo Bénéficiaire") ?>" 
-										 >
-								</div>
-							<?php else: ?>
-								<div class="photo-zoom-container text-center mb-2" style="display: inline-block;">
-									<i class="fas fa-user-circle photo-vide"></i>
-								</div>
-							<?php endif; ?>
-							<div class="col-12">
-								<button type="button" style="font-size: 2rem !important; font-weight: bold;" 
-									onclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>,'<?= $numeroBeneficiaire ?>');afficher_beneficiaire_id();" 
-									class="btn btn-info form-control">
-									<?= $numeroBeneficiaire ?>
-								</button>
-							</div>
-							
-							<div class="col-12" >
-								<p class="text-center fw-bold text-truncate" style="max-width: 300px;"><?= $this->nettoyer($beneficiaire['nomBeneficiaire'])." ".$this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?></p>
-							</div>
-						</div>
-						
-						<div class="row mb-2">
-							<div class="col-6">
-								<div class="d-flex justify-content-between align-items-center">
-									<span class="text-muted small"><?= _("Âge") ?></span>
-									<span class="fw-bold"><?= $this->nettoyer($beneficiaire['ageBeneficiaire'])." "._("ans") ?></span>
-								</div>
-							</div>
-							
-							<div class="col-6">
-								<div class="d-flex justify-content-between align-items-center">
-									<span class="text-muted small"><?= _("Lien") ?></span>
-									<span class="fw-bold"><?= $this->nettoyer($beneficiaire['lienparente']) ?></span>
-								</div>
-							</div>
-						</div>
-						
-
-						<?php if($prestationPossible == "0"): ?>
-						<div class="col-12">
-							<div class="d-flex justify-content-between align-items-center">
-								<span class="badge bg-danger text-light"><?= _("Prime impayée") ?>
-							</div>
-						</div>
-						
-						<?php endif; ?>
-					</div>
-					<?php endforeach; ?>
-				</div>
-			</div>
-		</fieldset>
-		
-    <div class="col-12 tab-container">
-		<!-- Enhanced Charts Section -->
-		<div class="row mt-4">
-			<!-- Responsive Area Chart -->
-			<div class="col-xl-8 col-lg-7 mb-4">
-				<div class="card shadow h-100">
-					
-					<div class="d-none d-md-block">
-						<div class="card-header bg-secondary py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-calendar-alt me-2"></i>
-								<?= _("Dépenses familiales par mois") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="d-md-none">
-						<div class="card-header bg-dark py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-calendar-alt me-2"></i>
-								<?= _("Dépenses familiales par mois") ?>
-							</h6>
-						</div>
-					</div>
-			
-					<div class="card-header py-3 d-flex flex-column flex-md-row justify-content-between align-items-center">
-	
-						<div class="mt-2 mt-md-0">
-							<button id="exportTrendBtn" class="btn btn-sm btn-danger mr-2">
-								<i class="fas fa-download"></i> PDF
-							</button>
-							<small class="text-muted" style="color:#000; font-weight:bold"><?= _("Évolution sur 12 mois") ?></small>
-						</div>
-					</div>
-					<div class="card-body">
-						<div class="chart-container" style="position: relative; height:300px; width:100%">
-							<canvas id="expenseTrendChart"></canvas>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Responsive Pie Chart -->
-			<div class="col-xl-4 col-lg-5 mb-4">
-				<div class="card shadow h-100">
-					
-					<div class="d-none d-md-block">
-						<div class="card-header bg-secondary py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-users me-2"></i>
-								<?= _("Dépenses familiales par lien parenté") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="d-md-none">
-						<div class="card-header bg-dark py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-users me-2"></i>
-								<?= _("Dépenses familiales par lien parenté") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="card-header py-3 d-flex justify-content-between align-items-center">
-						<button id="exportPieBtn" class="btn btn-sm btn-danger">
-							<i class="fas fa-download"></i> PDF
-						</button>
-					</div>
-					<div class="card-body d-flex flex-column">
-						<div class="chart-container" style="position: relative; height:250px; width:100%">
-							<canvas id="expenseDistributionChart"></canvas>
-						</div>
-						<div id="pieChartLegend" class="mt-3 text-center"></div>
-						<div class="mt-auto pt-3">
-							<small class="text-muted" style="font-weight:bold"><?= _("Répartition en pourcentage") ?></small>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Bar Chart Section -->
-		<div class="row mt-4">
-			<div class="col-12 mb-4">
-				<div class="card shadow h-100">
-					<div class="d-none d-md-block">
-						<div class="card-header bg-secondary py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-chart-bar me-2"></i>
-								<?= _("Dépenses familiales par garantie") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="d-md-none">
-						<div class="card-header bg-dark py-2">
-							<h6 class="mb-0 text-center text-light">
-								<i class="fa fa-file-invoice-dollar me-2"></i><i class="fa fa-chart-bar me-2"></i>
-								<?= _("Dépenses familiales par garantie") ?>
-							</h6>
-						</div>
-					</div>
-					
-					<div class="card-header py-3 d-flex justify-content-between align-items-center">
-						<button id="exportBarBtn" class="btn btn-sm btn-danger">
-							<i class="fas fa-download"></i> PDF
-						</button>
-					</div>
-					<div class="card-body">
-						<div class="chart-container" style="position: relative; height:400px; width:100%">
-							<canvas id="depensesChart"></canvas>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		
-		<script>
-			// Configuration commune
-			(function() {
-				// Récupération de la devise depuis PHP
-				const userCurrency = '<?= isset($_SESSION['devise_C']) ? substr($_SESSION['devise_C'],0,1) : 'F' ?>';
-				
-				// Configuration des devises
-				const currencyFormats = {
-					'F CFA': {
-						symbol: 'F CFA',
-						format: (value) => new Intl.NumberFormat('fr-FR').format(value) + ' F'
-					},
-					'€': {
-						symbol: '€',
-						format: (value) => new Intl.NumberFormat('fr-FR', {style: 'currency', currency: 'EUR'}).format(value)
-					},
-					'$': {
-						symbol: '$',
-						format: (value) => new Intl.NumberFormat('fr-FR', {style: 'currency', currency: 'USD'}).format(value)
-					},
-					'XOF': {
-						symbol: 'F CFA',
-						format: (value) => new Intl.NumberFormat('fr-FR').format(value) + ' F'
-					}
-				};
-
-				// Format monétaire dynamique
-				const formatMoney = (value) => {
-					const currencyConfig = currencyFormats[userCurrency] || currencyFormats['F CFA'];
-					return currencyConfig.format(value);
-				};
-
-				// Format pourcentage
-				const formatPercentage = (value, total) => {
-					const percentage = (value * 100 / total).toFixed(1);
-					return percentage + '%';
-				};
-
-				// Détection mobile
-				const isMobile = window.matchMedia("(max-width: 768px)").matches;
-				
-				// Génération des couleurs
-				const generateColors = (count) => {
-					const palette = [
-						'#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', 
-						'#e74a3b', '#858796', '#5a5c69', '#3a3b45',
-						'#2e59a9', '#17a673', '#2c9faf', '#dda20a'
-					];
-					return palette.slice(0, count).concat(
-						Array.from({length: Math.max(0, count - palette.length)}, (_, i) => {
-							const hue = Math.floor(360 * (i / Math.max(1, count - palette.length)));
-							return `hsl(${hue}, 70%, 60%)`;
-						})
-					);
-				};
-
-				// Fonction pour générer une légende personnalisée
-				function generateCustomLegend(chart, containerId) {
-					const legendContainer = document.getElementById(containerId);
-					legendContainer.innerHTML = '';
-					
-					const items = chart.data.datasets[0].data.map((value, i) => {
-						const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
-						const percentage = formatPercentage(value, total);
-						
-						return `
-							<div class="d-inline-block mx-2 my-1">
-								<span class="legend-color" style="
-									display: inline-block;
-									width: 12px;
-									height: 12px;
-									background-color: ${chart.data.datasets[0].backgroundColor[i]};
-									border: 1px solid #fff;
-									vertical-align: middle;
-								"></span>
-								<span class="legend-text small ml-1">
-									${chart.data.labels[i]}: ${formatMoney(value)} (${percentage})
-								</span>
-							</div>
-						`;
-					});
-					
-					legendContainer.innerHTML = items.join('');
-				}
-
-				// Fonction pour exporter un graphique en PDF
-				function exportChartToPDF(chartId, fileName) {
-					const { jsPDF } = window.jspdf;
-					const canvas = document.getElementById(chartId);
-					
-					html2canvas(canvas).then(canvasImage => {
-						const imgData = canvasImage.toDataURL('image/png');
-						const pdf = new jsPDF({
-							orientation: canvasImage.width > canvasImage.height ? 'landscape' : 'portrait'
-						});
-						
-						const pageWidth = pdf.internal.pageSize.getWidth();
-						const pageHeight = pdf.internal.pageSize.getHeight();
-						
-						const ratio = canvasImage.height / canvasImage.width;
-						let imgWidth = pageWidth - 20;
-						let imgHeight = imgWidth * ratio;
-						
-						if (imgHeight > pageHeight - 20) {
-							imgHeight = pageHeight - 20;
-							imgWidth = imgHeight / ratio;
-						}
-						
-						pdf.addImage(imgData, 'PNG', 
-							(pageWidth - imgWidth) / 2, 
-							(pageHeight - imgHeight) / 2, 
-							imgWidth, 
-							imgHeight
-						);
-						
-						pdf.save(fileName + '.pdf');
-					});
-				}
-
-				// Graphique d'évolution des dépenses
-				const trendCtx = document.getElementById('expenseTrendChart').getContext('2d');
-				const trendChart = new Chart(trendCtx, {
-					type: 'line',
-					data: {
-						labels: <?= $labels_mois; ?>,
-						datasets: [{
-							label: '<?= _("Montant dépensé") ?>',
-							data: <?= $data_consos; ?>,
-							backgroundColor: 'rgba(78, 115, 223, 0.05)',
-							borderColor: 'rgba(78, 115, 223, 1)',
-							borderWidth: 2,
-							pointBackgroundColor: 'rgba(78, 115, 223, 1)',
-							pointRadius: isMobile ? 3 : 4,
-							pointHoverRadius: 6,
-							fill: true,
-							tension: 0.3
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						plugins: {
-							legend: {
-								display: false
-							},
-							tooltip: {
-								mode: 'index',
-								intersect: false,
-								callbacks: {
-									label: function(context) {
-										return context.dataset.label + ': ' + formatMoney(context.parsed.y);
-									}
-								}
-							}
-						},
-						scales: {
-							x: {
-								grid: {
-									display: false
-								},
-								ticks: {
-									maxRotation: isMobile ? 45 : 0,
-									autoSkip: true,
-									maxTicksLimit: isMobile ? 6 : 12
-								}
-							},
-							y: {
-								beginAtZero: false,
-								ticks: {
-									callback: function(value) {
-										return formatMoney(value);
-									}
-								},
-								grid: {
-									color: 'rgba(0, 0, 0, 0.05)'
-								}
-							}
-						},
-						interaction: {
-							mode: 'nearest',
-							axis: 'x',
-							intersect: false
-						}
-					}
-				});
-
-				// Graphique de répartition
-				const distributionCtx = document.getElementById('expenseDistributionChart').getContext('2d');
-				const distributionChart = new Chart(distributionCtx, {
-					type: 'pie',
-					data: {
-						labels: <?= $labels_liens; ?>,
-						datasets: [{
-							data: <?= $data_liens; ?>,
-							backgroundColor: generateColors(<?= $nbreLienParente; ?>),
-							borderColor: '#fff',
-							borderWidth: 2
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						plugins: {
-							legend: {
-								display: false,
-							},
-							datalabels: {
-								formatter: (value, ctx) => {
-									const sum = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
-									return formatPercentage(value, sum);
-								},
-								color: '#fff',
-								font: {
-									weight: 'bold',
-									size: isMobile ? 10 : 12
-								}
-							},
-							tooltip: {
-								callbacks: {
-									label: function(context) {
-										const label = context.label || '';
-										const value = context.raw || 0;
-										const sum = context.dataset.data.reduce((a, b) => a + b, 0);
-										const percentage = formatPercentage(value, sum);
-										return `${label}: ${formatMoney(value)} (${percentage})`;
-									}
-								}
-							}
-						},
-						cutout: isMobile ? '60%' : '50%'
-					},
-					plugins: [ChartDataLabels]
-				});
-
-				// Graphique des dépenses par garantie
-				const dataConso = <?= $dataConsoParGaranties ?>;
-				const barCtx = document.getElementById('depensesChart').getContext('2d');
-				const barChart = new Chart(barCtx, {
-					type: 'bar',
-					data: {
-						labels: dataConso.garanties,
-						datasets: [{
-							label: 'Dépenses',
-							data: dataConso.depenses,
-							backgroundColor: 'rgba(54, 162, 235, 0.7)',
-							borderColor: 'rgba(54, 162, 235, 1)',
-							borderWidth: 1
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						plugins: {
-							annotation: {
-								annotations: dataConso.plafonds.map((plafond, index) => {
-									if (plafond === null) return null;
-									
-									return {
-										type: 'line',
-										yMin: plafond,
-										yMax: plafond,
-										borderColor: 'rgba(255, 99, 132, 0.7)',
-										borderWidth: 2,
-										borderDash: [6, 6],
-										label: {
-											content: `Plafond: ${formatMoney(plafond)}`,
-											enabled: true,
-											position: 'right'
-										}
-									};
-								}).filter(annotation => annotation !== null)
-							},
-							legend: {
-								display: false
-							},
-							tooltip: {
-								callbacks: {
-									label: function(context) {
-										const plafond = dataConso.plafonds[context.dataIndex];
-										let tooltip = `Dépenses: ${formatMoney(context.parsed.y)}`;
-										
-										if (plafond !== null) {
-											const pourcentage = Math.min(100, Math.round((context.parsed.y / plafond) * 100));
-											tooltip += ` (${pourcentage}% du plafond)`;
-										} else {
-											tooltip += ' (plafond illimité)';
-										}
-										
-										return tooltip;
-									}
-								}
-							}
-						},
-						scales: {
-							y: {
-								beginAtZero: true,
-								title: {
-									display: true,
-									text: `Montant des dépenses`,
-									font: {
-										weight: 'bold'
-									}
-								},
-								ticks: {
-									callback: function(value) {
-										return formatMoney(value);
-									}
-								},
-								suggestedMax: Math.max(...dataConso.depenses) * 1.5
-							},
-							x: {
-								title: {
-									display: true,
-									text: 'Garanties',
-									font: {
-										weight: 'bold'
-									}
-								},
-								grid: {
-									display: false
-								}
-							}
-						}
-					}
-				});
-
-				// Générer la légende au chargement et lors du redimensionnement
-				generateCustomLegend(distributionChart, 'pieChartLegend');
-				window.addEventListener('resize', function() {
-					generateCustomLegend(distributionChart, 'pieChartLegend');
-				});
-
-				// Boutons d'export PDF
-				document.getElementById('exportTrendBtn').addEventListener('click', () => {
-					exportChartToPDF('expenseTrendChart', 'evolution_depenses_mensuelles');
-				});
-
-				document.getElementById('exportPieBtn').addEventListener('click', () => {
-					exportChartToPDF('expenseDistributionChart', 'repartition_depenses_parente');
-				});
-
-				document.getElementById('exportBarBtn').addEventListener('click', () => {
-					exportChartToPDF('depensesChart', 'depenses_par_garantie');
-				});
-			})();
-		</script>
-		
-		<style>
-			/* Styles communs pour tous les graphiques */
-			.chart-container {
-				position: relative;
-				width: 100%;
-				min-height: 300px;
-			}
-			
-			#pieChartLegend {
-				font-size: 0.8rem;
-				line-height: 1.4;
-				white-space: normal !important;
-				word-wrap: break-word !important;
-			}
-			
-			.legend-text {
-				vertical-align: middle;
-			}
-			
-			.btn-export {
-				padding: 0.25rem 0.5rem;
-				font-size: 0.75rem;
-			}
-			
-			@media (max-width: 768px) {
-				#pieChartLegend {
-					font-size: 0.7rem;
-				}
-				
-				.chart-container {
-					height: 60vh;
-				}
-				
-				.card-header {
-					flex-direction: column;
-					align-items: flex-start !important;
-				}
-				
-				.btn-export {
-					margin-top: 0.5rem;
-					align-self: flex-end;
-				}
-				
-				
-				.legend-table {
-					font-size: 8pt; /* Légère réduction de la taille de police */
-				}
-				
-				.color-cell {
-					width: 25px;
-					min-width: 25px;
-					height: 18px;
-				}
-			}
-			
-			
-			.legend-container {
-            width: 100%;
-            margin: 5px;
-            overflow-x: auto;
-        }
-        
-        .legend-table {
-            width: 100%;
-            margin: auto;
-            background-color: #f8f8ff;
-            font-size: 9pt;
-            white-space: nowrap;
-            border-collapse: collapse;
-            min-width: 500px; /* Largeur minimale pour assurer la lisibilité */
-        }
-        
-        .legend-table td {
-            padding: 5px 3px;
-        }
-        
-        .text-cell {
-            font-weight: bold;
-            text-align: right;
-            background-color: #f8f8ff;
-            padding-right: 5px;
-        }
-        
-        .color-cell {
-            width: 30px; /* Largeur fixe pour les carrés de couleur */
-            min-width: 30px;
-            height: 20px; /* Hauteur fixe pour mieux voir les couleurs */
-            border: 1px solid #ddd; /* Contour pour mieux distinguer les couleurs claires */
-        }
-        
-        .spacer-cell {
-            width: 1%;
-            background-color: #f8f8ff;
-        }
-        
-		.form-container {
-				background-color: #f8f9fa;
-				padding: 15px;
-				border-radius: 5px;
-				margin-bottom: 20px;
-			}
-			
-			.form-section {
-				margin-bottom: 15px;
-			}
-			
-			.form-label {
-				font-weight: bold;
-				margin-bottom: 5px;
-				font-size: 9pt;
-			}
-			
-			.date-input-group {
-				display: flex;
-				align-items: center;
-				gap: 10px;
-			}
-			
-			.btn-actualiser {
-				margin-top: 25px;
-				width: 100%;
-				font-size: 12pt !important;
-			}
-			
-			/* Pour les écrans plus larges */
-			@media (min-width: 768px) {
-				.form-container {
-					display: flex;
-					flex-wrap: wrap;
-					gap: 15px;
-					align-items: end;
-				}
-				
-				.form-section {
-					flex: 1;
-					margin-bottom: 0;
-					min-width: 180px;
-				}
-				
-				.btn-section {
-					flex: 0 0 auto;
-				}
-				
-				.btn-actualiser {
-					margin-top: 0;
-					width: auto;
-					min-width: 140px;
-				}
-				
-			}
-			
-			/* Pour les très petits écrans */
-			@media (max-width: 380px) {
-				.date-input-group {
-					flex-direction: column;
-					align-items: stretch;
-					gap: 5px;
-				}
-				
-				.date-separator {
-					text-align: center;
-				}
-				
-				.btn-actualiser i{
-					font-size: 1.5rem !important;
-				}
-			}
-			
-			/* Correction du z-index pour Bootstrap SelectPicker */
-			.bootstrap-select .dropdown-menu {
-				z-index: 1060 !important;
-			}
-
-			.bootstrap-select {
-				z-index: 1060 !important;
-			}
-
-			/* Pour les modales ou autres éléments avec z-index élevé */
-			.modal .bootstrap-select .dropdown-menu {
-				z-index: 1060 !important;
-			}
-        
-		</style>
-		
-		
-
-		<style>
-		.accordion-section {
-			margin-bottom: 2px;
-			border: 1px solid #ddd;
-			border-radius: 5px;
-			overflow: hidden;
-		}
-
-		.accordion-header {
-			display: flex;
-			align-items: center;
-			padding: 12px 15px;
-			background-color: #f1f5fc;
-			cursor: pointer;
-			font-weight: bold;
-			font-size: 1.1rem;
-			transition: background-color 0.3s;
-			margin: 0;
-		}
-
-		.accordion-header:hover {
-			background-color: #e9ecef;
-		}
-
-		.accordion-header.active {
-			background-color: #e2e6ea;
-		}
-
-		.accordion-header i:first-child {
-			margin-right: 10px;
-			font-size: 1.2rem;
-		}
-
-		.accordion-title {
-			flex-grow: 1;
-		}
-
-		.accordion-icon {
-			margin-left: auto;
-			transition: transform 0.3s ease;
-		}
-
-		.accordion-header.active .accordion-icon {
-			transform: rotate(180deg);
-		}
-
-		.accordion-content {
-			display: none;
-			padding: 2px;
-			background-color: #fff;
-			border-top: 1px solid #ddd;
-		}
-
-		/* Styles pour la responsivité */
-		@media (max-width: 768px) {
-			.accordion-header, .accordion-header i, .accordion-header span  {
-				font-size: 1.8rem !important;
-				font-weight: bold !important;
-			}
-			
-		}
-		</style>
-
-		<script>
-			document.addEventListener('DOMContentLoaded', function() {
-				// Laisser Bootstrap gérer les accordéons - suppression du script conflictuel
-				// Bootstrap s'occupe déjà du fonctionnement des accordéons
-				
-				// Si vous voulez garder votre système personnalisé pour les grandes sections,
-				// assurez-vous qu'il ne cible pas les mêmes éléments que Bootstrap
-				
-				const sectionHeaders = document.querySelectorAll('.accordion-section .accordion-header');
-				
-				sectionHeaders.forEach(header => {
-					header.addEventListener('click', function() {
-						// Vérifier si cet accordéon est géré par Bootstrap
-						if (!this.querySelector('[data-bs-toggle="collapse"]')) {
-							const content = this.nextElementSibling;
-							const isCurrentlyActive = this.classList.contains('active');
-							
-							// Fermer toutes les sections d'abord
-							document.querySelectorAll('.accordion-section .accordion-content').forEach(content => {
-								content.style.display = 'none';
-							});
-							document.querySelectorAll('.accordion-section .accordion-header').forEach(header => {
-								header.classList.remove('active');
-							});
-							
-							// Si la section n'était pas active, l'ouvrir
-							if (!isCurrentlyActive) {
-								this.classList.add('active');
-								content.style.display = 'block';
-							}
-						}
-					});
-				});
-			});
-
-			// Correction pour les icônes Bootstrap des accordéons
-			document.querySelectorAll('.accordion-button').forEach(button => {
-				button.addEventListener('click', function() {
-					const icon = this.querySelector('.bi');
-					if (icon) {
-						// Bootstrap gère déjà l'animation des icônes
-						// Cette fonctionnalité est incluse dans Bootstrap 5
-					}
-				});
-			});
-		</script>
-	</div>
-