diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index 9e1806f..6acf743 100755
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -332,198 +332,124 @@
 		</div>
     </div>
 
-    <!-- Section des plafonds et consommations -->
-    <div class="row">
-        <!-- Plafond Famille -->
-        <div class="col-12 col-lg-9 mb-4">
-            <div class="card shadow-sm 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="fas fa-users me-2"></i>
-							<?= _("Dépenses familiales")." ".$_SESSION['exercieReference_C'] ?>
-						</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="fa fa-file-invoice-dollar me-2"></i><i class="fas fa-users me-2"></i>
-							<?= _("Dépenses familiales")." ".$_SESSION['exercieReference_C'] ?>
+	<!-- Section des plafonds et consommations -->
+    <div class="row g-4">
+		<div class="col-12 col-xl-8">
+			<div class="card shadow-sm border-0 h-100">
+				<div class="card-header bg-dark text-white py-3">
+					<div class="d-flex justify-content-between align-items-center">
+						<h6 class="mb-0 fw-bold">
+							<i class="fas fa-users-cog me-2 text-info"></i>
+							<?= _("Consommation Familiale") ?>
 						</h6>
+						<span class="badge bg-secondary"><?= $_SESSION['exercieReference_C'] ?></span>
 					</div>
 				</div>
 				
-                <div class="card-body text-center">
-                    <?php
-/*
- plafondOut
- consommationOut
- soldeConsommationOut
- consommation_individuOut
- plafondInp
- consommationInp
- soldeConsommationInp
- consommation_individuInp 
-*/
-                        $plafondGlobalFamilleOut = $this->nettoyer($police['plafondOut']);
-                        $consommationGlobaleFamilleOut = $this->nettoyer($police['consommationOut']);
-                        $niveauGlobalConsoFamilleOut = ($consommationGlobaleFamilleOut*100)/$plafondGlobalFamilleOut;
-						$soldeConsommationOut        = $this->nettoyer($police['soldeConsommationOut']);
+				<div class="card-body p-4">
+					<?php
+						// Logique de calcul centralisée
+						$types = [
+							'OUT' => [
+								'label' => _("Soins Ambulatoires (OUTPATIENT)"),
+								'conso' => $this->nettoyer($police['consommationOut']),
+								'plafond' => $this->nettoyer($police['plafondOut']),
+								'solde' => $this->nettoyer($police['soldeConsommationOut']),
+								'percent' => ($police['plafondOut'] > 0) ? ($police['consommationOut'] * 100) / $police['plafondOut'] : 0
+							],
+							'INP' => [
+								'label' => _("Hospitalisation (INPATIENT)"),
+								'conso' => $this->nettoyer($police['consommationInp']),
+								'plafond' => $this->nettoyer($police['plafondInp']),
+								'solde' => $this->nettoyer($police['soldeConsommationInp']),
+								'percent' => ($police['plafondInp'] > 0) ? ($police['consommationInp'] * 100) / $police['plafondInp'] : 0
+							]
+						];
 
-						$consommationGlobaleBenefOut = $this->nettoyer($college['consommation_individuOut']);
-                        $niveauGlobalConsoBenefOut = ($consommationGlobaleBenefOut*100)/$plafondGlobalFamilleOut;
+						foreach ($types as $key => $data): 
+							$colorClass = ($data['percent'] >= 90) ? 'danger' : (($data['percent'] >= 70) ? 'warning' : 'success');
+					?>
+						<div class="consumption-block mb-5">
+							<div class="d-flex justify-content-between align-items-end mb-2">
+								<h6 class="text-uppercase fw-bold text-muted small mb-0"><?= $data['label'] ?></h6>
+								<span class="fw-bold text-<?= $colorClass ?>"><?= number_format($data['percent'], 1) ?>%</span>
+							</div>
+							
+							<div class="progress mb-3" style="height: 10px;">
+								<div class="progress-bar bg-<?= $colorClass ?> progress-bar-striped progress-bar-animated" 
+									role="progressbar" 
+									style="width: <?= min($data['percent'], 100) ?>%"></div>
+							</div>
 
-						$plafondGlobalFamilleInp = $this->nettoyer($police['plafondInp']);
-						$consommationGlobaleFamilleInp = $this->nettoyer($police['consommationInp']);
-						$niveauGlobalConsoFamilleInp = ($consommationGlobaleFamilleInp*100)/$plafondGlobalFamilleInp;
-						$soldeConsommationInp        = $this->nettoyer($police['soldeConsommationInp']);
+							<div class="row g-2 text-center">
+								<div class="col-4">
+									<div class="p-2 border rounded bg-light">
+										<small class="text-muted d-block"><?= _("Consommé") ?></small>
+										<span class="fw-bold fs-5"><?= format_N($data['conso']) ?></span>
+									</div>
+								</div>
+								<div class="col-4">
+									<div class="p-2 border rounded bg-light">
+										<small class="text-muted d-block"><?= _("Plafond") ?></small>
+										<span class="fw-bold fs-5 text-dark"><?= format_N($data['plafond']) ?></span>
+									</div>
+								</div>
+								<div class="col-4">
+									<div class="p-2 border rounded border-<?= $colorClass ?>-subtle bg-<?= $colorClass ?>-subtle">
+										<small class="text-<?= $colorClass ?> d-block fw-bold"><?= _("Solde") ?></small>
+										<span class="fw-bold fs-5 text-<?= $colorClass ?>"><?= format_N($data['solde']) ?></span>
+									</div>
+								</div>
+							</div>
 
-						$consommationGlobaleBenefInp = $this->nettoyer($college['consommation_individuInp']);
-						$niveauGlobalConsoBenefInp = ($consommationGlobaleBenefInp*100)/$plafondGlobalFamilleInp;
-
-                    ?>
-
-					<!-- OUTPATIENT -->
-                    <div class="row mb-2 mt-2">
-                        <div class="col-4">
-                            <div class="rounded p-2 border border-primary">
-                                <small class="text-muted d-block"><?= _("Dépenses OUTPATIENT") ?></small>
-                                <h4 class="text-primary mb-0"><?= format_N($consommationGlobaleFamilleOut) ?></h4>
-                            </div>
-                        </div>
-                        <div class="col-4">
-                            <div class="rounded p-2 border border-success">
-                                <small class="text-muted d-block"><?= _("Plafond") ?></small>
-                                <h4 class="text-success mb-0"><?= format_N($plafondGlobalFamilleOut) ?></h4>
-                            </div>
-                        </div>
-
-						<div class="col-4">
-                            <div class="rounded p-2 border border-danger">
-                                <small class="text-muted d-block"><?= _("Solde") ?></small>
-                                <h4 class="text-danger mb-0"><?= format_N($soldeConsommationOut) ?></h4>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <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>
-                    
-                    <?php if($police['soldeConsommationOut']<="0") :?>
-						<div class="alert alert-danger py-1 mb-0">
-							<i class="fas fa-exclamation-triangle me-1"></i>
-							<?= _("Plafond familial atteint!") ?>
+							<?php if($data['solde'] <= 0): ?>
+								<div class="alert alert-danger py-2 mt-2 mb-0 small border-0 shadow-sm">
+									<i class="fas fa-exclamation-circle me-2"></i><?= _("Plafond atteint pour ce poste") ?>
+								</div>
+							<?php endif; ?>
 						</div>
-                    <?php endif; ?>
+					<?php endforeach; ?>
+				</div>
+			</div>
+		</div>
 
-					<!-- INPATIENT -->
-                    <div class="row mb-2 mt-2">
-                        <div class="col-4">
-                            <div class="rounded p-2 border border-primary">
-                                <small class="text-muted d-block"><?= _("Dépenses INPATIENT") ?></small>
-                                <h4 class="text-primary mb-0"><?= format_N($consommationGlobaleFamilleInp) ?></h4>
-                            </div>
-                        </div>
-                        <div class="col-4">
-                            <div class="rounded p-2 border border-success">
-                                <small class="text-muted d-block"><?= _("Plafond") ?></small>
-                                <h4 class="text-success mb-0"><?= format_N($plafondGlobalFamilleInp) ?></h4>
-                            </div>
-                        </div>
-						
-						<div class="col-4">
-                            <div class="rounded p-2 border border-danger">
-                                <small class="text-muted d-block"><?= _("Solde") ?></small>
-                                <h4 class="text-danger mb-0"><?= format_N($soldeConsommationInp) ?></h4>
-                            </div>
-                        </div>
-                    </div>
-
-					<div class="progress mb-3" >
-                        <div class="progress-bar <?= $niveauGlobalConsoFamilleInp >= 80 ? 'bg-danger' : ($niveauGlobalConsoFamilleInp >= 50 ? 'bg-warning' : 'bg-success') ?>" 
-                             style="width: <?= min($niveauGlobalConsoFamilleInp, 100) ?>%">
-                            <?= number_format($niveauGlobalConsoFamilleInp, 1) ?>%
-                        </div>
-                    </div>
-                    
-                    <?php if($police['soldeConsommationInp']<="0") :?>
-						<div class="alert alert-danger py-1 mb-0">
-							<i class="fas fa-exclamation-triangle me-1"></i>
-							<?= _("Plafond familial atteint!") ?>
+		<div class="col-12 col-xl-4">
+			<div class="card shadow-sm border-0 border-top border-primary border-4 h-100">
+				<div class="card-header bg-white py-3">
+					<h6 class="mb-0 fw-bold text-primary">
+						<i class="fas fa-user-tag me-2"></i><?= _("Dépenses Individuelles") ?>
+					</h6>
+				</div>
+				<div class="card-body">
+					<?php 
+						$indiv = [
+							['label' => 'OUTPATIENT', 'val' => $consommationGlobaleBenefOut, 'percent' => $niveauGlobalConsoBenefOut],
+							['label' => 'INPATIENT', 'val' => $consommationGlobaleBenefInp, 'percent' => $niveauGlobalConsoBenefInp]
+						];
+						foreach($indiv as $item):
+					?>
+					<div class="mb-4 p-3 border rounded shadow-xs bg-light-subtle">
+						<div class="d-flex justify-content-between mb-1">
+							<small class="fw-bold"><?= $item['label'] ?></small>
+							<small class="text-primary fw-bold"><?= format_N($item['val']) ?></small>
 						</div>
-                    <?php endif; ?>
+						<div class="progress" style="height: 6px;">
+							<div class="progress-bar bg-primary" style="width: <?= min($item['percent'], 100) ?>%"></div>
+						</div>
+						<div class="text-end mt-1">
+							<small class="text-muted small" style="font-size: 0.7rem;"><?= _("Part du plafond familial") ?> : <?= number_format($item['percent'], 1) ?>%</small>
+						</div>
+					</div>
+					<?php endforeach; ?>
 
-                </div>
-            </div>
-        </div>
-
-        <!-- Plafond Bénéficiaire -->
-        <div class="col-12 col-lg-3 mb-4">
-            <div class="card shadow-sm 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="fas fa-user me-2"></i>
-							<?= _("Dépenses individuelles") ?> 
-						</h6>
+					<div class="alert alert-info border-0 small">
+						<i class="fas fa-info-circle me-1"></i>
+						<?= _("Ces montants représentent votre consommation personnelle au sein du plafond familial.") ?>
 					</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="fa fa-file-invoice-dollar me-2"></i><i class="fas fa-user me-2"></i>
-							<?= _("Dépenses individuelles") ?> 
-						</h6>
-					</div>
-				</div>
-				
-                <div class="card-body text-center">
-					<!-- OUPATIENT-->
-                    <div class="row mb-2 mt-2">
-                        <div class="col-12">
-                            <div class="border rounded p-2 border-primary">
-                                <small class="text-muted d-block"><?= _("Dépenses OUPATIENT") ?></small>
-                                <h4 class="text-primary mb-0"><?= format_N($consommationGlobaleBenefOut) ?></h4>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="progress mb-3">
-                        <div class="progress-bar <?= $niveauGlobalConsoBenefOut >= 80 ? 'bg-danger' : ($niveauGlobalConsoBenefOut >= 50 ? 'bg-warning' : 'bg-success') ?>" 
-                             style="width: <?= min($niveauGlobalConsoBenefOut, 100) ?>%">
-                            <?= number_format($niveauGlobalConsoBenefOut, 1) ?>%
-                        </div>
-                    </div>
-
-					<!-- INPATIENT -->
-                    <div class="row mb-2 mt-2">
-                        <div class="col-12">
-                            <div class="border rounded p-2 border-primary">
-                                <small class="text-muted d-block"><?= _("Dépenses INPATIENT") ?></small>
-                                <h4 class="text-primary mb-0"><?= format_N($consommationGlobaleBenefInp) ?></h4>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="progress mb-3">
-                        <div class="progress-bar <?= $niveauGlobalConsoBenefInp >= 80 ? 'bg-danger' : ($niveauGlobalConsoBenefInp >= 50 ? 'bg-warning' : 'bg-success') ?>" 
-                             style="width: <?= min($niveauGlobalConsoBenefInp, 100) ?>%">
-                            <?= number_format($niveauGlobalConsoBenefInp, 1) ?>%
-                        </div>
-                    </div>
-					
-                </div>
-            </div>
-        </div>
-    </div>
+			</div>
+		</div>
+	</div>
 
     <!-- Message si aucune donnée -->
     <div class="card shadow-sm mb-4">