diff --git a/Vue/Spadherent/index.php b/Vue/Spadherent/index.php
index bdc4e01..be87b58 100644
--- a/Vue/Spadherent/index.php
+++ b/Vue/Spadherent/index.php
@@ -1,83 +1,147 @@
 <?php 
-	$this->titre = "INTER-SANTE - Rapport S/P Famille"; 
-
-	$adherentRetire 	= $spadherent['adherentRetire'];
-	$dateSortieAdherent = $spadherent['dateSortieAdherent'];
+    $this->titre = "INTER-SANTE - Rapport S/P Famille"; 
+    $adherentRetire = $spadherent['adherentRetire'];
+    $dateSortieAdherent = $spadherent['dateSortieAdherent'];
+    
+    // Logique de couleur pour le S/P (exemple : < 70% vert, 70-100% orange, > 100% rouge)
+    $ratioValeur = (float)$this->nettoyer($spadherent['rapportsp']);
+    $badgeColor = "bg-success";
+    if ($ratioValeur > 70) $badgeColor = "bg-warning text-dark";
+    if ($ratioValeur > 100) $badgeColor = "bg-danger";
 ?>
 
-<legend><?= _("Rapport S / P de la famille") . " : " .$this->nettoyer($spadherent['adherent'])." ( ".$this->nettoyer($spadherent['numeroAdherent'])." ) " ?> </legend>
+<div class="container-fluid py-4">
+    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
+        <div>
+            <h2 class="h4 text-primary mb-1">
+                <i class="fa-solid fa-chart-pie me-2"></i><?= _("Rapport Sinistre / Prime") ?>
+            </h2>
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb mb-0">
+                    <li class="breadcrumb-item fw-bold"><?= $this->nettoyer($spadherent['adherent']) ?></li>
+                    <li class="breadcrumb-item active"><?= $this->nettoyer($spadherent['numeroAdherent']) ?></li>
+                </ol>
+            </nav>
+        </div>
 
+        <?php if ($adherentRetire == "1") : ?>
+            <div class="alert alert-danger d-flex align-items-center mb-0 py-2 px-3 shadow-sm border-0">
+                <i class="fa-solid fa-user-slash me-2"></i>
+                <div>
+                    <small class="d-block lh-1 text-uppercase fw-bold" style="font-size: 0.65rem;"><?= _("Membre sorti le") ?></small>
+                    <span class="fw-bold"><?= dateLang($dateSortieAdherent) ?></span>
+                </div>
+            </div>
+        <?php endif; ?>
+    </div>
 
-<table class="table table-responsive table-condensed" style='font-size:10pt; text-align:center'>
-	<thead>
-		<tr>
-			<th width="20%" style='text-align:center'> <?= _("Date Effet Police") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Date Echéance Police") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Durée Police") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Ratio acquise police") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Durée Contrat") ?> </th>
-		</tr>
-	</thead>
+    <div class="row g-3 mb-4 text-center">
+        <div class="col-md-3">
+            <div class="card border-0 shadow-sm h-100">
+                <div class="card-body">
+                    <h6 class="text-muted small text-uppercase fw-bold"><?= _("Primes Totales") ?></h6>
+                    <p class="h5 mb-0 fw-bold"><?= format_N($this->nettoyer($spadherent['primestat'])) ?></p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card border-0 shadow-sm h-100 border-start border-primary border-4">
+                <div class="card-body">
+                    <h6 class="text-muted small text-uppercase fw-bold"><?= _("Primes Acquises") ?></h6>
+                    <p class="h5 mb-0 text-primary fw-bold"><?= format_N($this->nettoyer($spadherent['prime_acquise'])) ?></p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card border-0 shadow-sm h-100 border-start border-danger border-4">
+                <div class="card-body">
+                    <h6 class="text-muted small text-uppercase fw-bold"><?= _("Consommations") ?></h6>
+                    <p class="h5 mb-0 text-danger fw-bold"><?= format_N($this->nettoyer($spadherent['consommation'])) ?></p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card border-0 shadow-sm h-100 <?= $badgeColor ?> text-white">
+                <div class="card-body">
+                    <h6 class="small text-uppercase fw-bold opacity-75"><?= _("Rapport S/P Actuel") ?></h6>
+                    <p class="display-6 mb-0 fw-bold"><?= $this->nettoyer($spadherent['rapportsp']) ?> %</p>
+                </div>
+            </div>
+        </div>
+    </div>
 
-	<tbody>	
+    <div class="row g-4">
+        <div class="col-lg-6">
+            <div class="card border-0 shadow-sm">
+                <div class="card-header bg-white fw-bold py-3">
+                    <i class="fa-solid fa-file-contract text-primary me-2"></i><?= _("Détails du Contrat (Police)") ?>
+                </div>
+                <div class="table-responsive">
+                    <table class="table table-sm mb-0 align-middle">
+                        <tbody class="small">
+                            <tr>
+                                <td class="ps-3 text-muted"><?= _("Effet / Échéance") ?></td>
+                                <td class="text-end pe-3 fw-bold">
+                                    <?= dateLang($this->nettoyer($spadherent['dateEffet'])) ?> 
+                                    <i class="fa-solid fa-arrow-right mx-1 text-muted"></i> 
+                                    <?= dateLang($this->nettoyer($spadherent['dateEcheance'])) ?>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="ps-3 text-muted"><?= _("Durée Écoulée (Jours)") ?></td>
+                                <td class="text-end pe-3 fw-bold"><?= $this->nettoyer($spadherent['duree_acquise']) ?> / <?= $this->nettoyer($spadherent['dureePolice']) ?></td>
+                            </tr>
+                            <tr>
+                                <td class="ps-3 text-muted"><?= _("Ratio Temporel") ?></td>
+                                <td class="text-end pe-3">
+                                    <div class="progress" style="height: 6px; width: 100px; display: inline-flex;">
+                                        <div class="progress-bar bg-primary" style="width: <?= $this->nettoyer($spadherent['ratio_acquise']) ?>%"></div>
+                                    </div>
+                                    <span class="ms-2 fw-bold text-primary"><?= $this->nettoyer($spadherent['ratio_acquise']) ?> %</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
 
-		<tr> 
-			<td> <?= dateLang($this->nettoyer($spadherent['dateEffet'])) ?> </td> 
-			<td> <?= dateLang($this->nettoyer($spadherent['dateEcheance'])) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['duree_acquise']) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['ratio_acquise']) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['dureePolice']) ?> </td> 
-		</tr>
-	</tbody>
-</table>	
+        <div class="col-lg-6">
+            <div class="card border-0 shadow-sm">
+                <div class="card-header bg-white fw-bold py-3">
+                    <i class="fa-solid fa-users text-primary me-2"></i><?= _("Détails de l'Adhésion Famille") ?>
+                </div>
+                <div class="table-responsive">
+                    <table class="table table-sm mb-0 align-middle">
+                        <tbody class="small">
+                            <tr>
+                                <td class="ps-3 text-muted"><?= _("Effet Famille") ?></td>
+                                <td class="text-end pe-3 fw-bold">
+                                    <?= dateLang($this->nettoyer($spadherent['dateEffetAdherent'])) ?>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="ps-3 text-muted"><?= _("Durée Acquise Famille") ?></td>
+                                <td class="text-end pe-3 fw-bold"><?= $this->nettoyer($spadherent['duree_acquise_adherent']) ?> jours</td>
+                            </tr>
+                            <tr>
+                                <td class="ps-3 text-muted"><?= _("Ratio Temporel Famille") ?></td>
+                                <td class="text-end pe-3">
+                                    <div class="progress" style="height: 6px; width: 100px; display: inline-flex;">
+                                        <div class="progress-bar bg-info" style="width: <?= $this->nettoyer($spadherent['ratio_acquise_adherent']) ?>%"></div>
+                                    </div>
+                                    <span class="ms-2 fw-bold text-info"><?= $this->nettoyer($spadherent['ratio_acquise_adherent']) ?> %</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<table class="table table-responsive table-condensed" style='font-size:10pt; text-align:center'>
-	<thead>
-		<tr>
-			<th width="20%" style='text-align:center'> <?= _("Date Effet Famille") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Date Echéance Famille") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Durée acquise Famille") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Ratio acquise Famille") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Durée Contrat") ?> </th>
-		</tr>
-	</thead>
-
-	<tbody>	
-
-		<tr> 
-			<td> <?= dateLang($this->nettoyer($spadherent['dateEffetAdherent'])) ?> </td> 
-			<td> <?= dateLang($this->nettoyer($spadherent['dateEcheance'])) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['duree_acquise_adherent']) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['ratio_acquise_adherent']) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['dureePolice']) ?> </td> 
-		</tr>
-	</tbody>
-</table>	
-
-<table class="table table-responsive table-condensed" style='font-size:10pt; text-align:center'>
-	<thead>
-		<tr>
-			<th width="20%" style='text-align:center'> <?= _("Primes Totales") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Primes Acquises") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Consommations") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Rapport S/P") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("S/P Global") ?> </th>
-		</tr>
-	</thead>
-
-	<tbody>	
-		<tr> 
-			<td> <?= format_N($this->nettoyer($spadherent['primestat'])) ?> </td> 			
-			<td> <?= format_N($this->nettoyer($spadherent['prime_acquise'])) ?> </td> 
-			<td> <?= format_N($this->nettoyer($spadherent['consommation'])) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['rapportsp']) ?> </td> 
-			<td> <?= $this->nettoyer($spadherent['rapportspgeneral']) ?> </td> 			
-		</tr>
-	</tbody>
-</table>	
-
-<?php if ($adherentRetire=="1") : ?>
-	<div class="alert alert-danger" style="height:30px; padding:5px; margin-bottom:5px; text-align:center;" >
-	  <H4><?= _("Date sortie") . " : " . dateLang($dateSortieAdherent)  ?></H4>
-	</div>	
-<?php endif; ?>
+    <div class="mt-4 p-3 bg-light rounded d-flex justify-content-between align-items-center shadow-sm">
+        <span class="text-muted small text-uppercase fw-bold"><?= _("Indicateur de Sinistralité Global (Groupe)") ?></span>
+        <span class="h5 mb-0 fw-bold text-secondary"><?= $this->nettoyer($spadherent['rapportspgeneral']) ?> %</span>
+    </div>
+</div>
\ No newline at end of file