diff --git a/Vue/Sppolice/index.php b/Vue/Sppolice/index.php
index 3c2763c..ddb5f3c 100644
--- a/Vue/Sppolice/index.php
+++ b/Vue/Sppolice/index.php
@@ -1,40 +1,99 @@
 <?php $this->titre = "INTER-SANTE - Rapport S/P police"; ?>
 
-<legend> <?= _("Rapport S / P de la police") . " : " . $this->nettoyer($_SESSION['numeroPolice_C'])?> </legend>
+<div class="container-fluid py-4 animate__animated animate__fadeIn">
+    
+    <div class="d-flex align-items-center justify-content-between mb-4">
+        <h4 class="fw-bold text-secondary mb-0">
+            <i class="fas fa-chart-line me-2 text-primary"></i>
+            <?= _("Rapport S / P de la police") ?> : 
+            <span class="text-primary"><?= $this->nettoyer($_SESSION['numeroPolice_C']) ?></span>
+        </h4>
+        <div class="badge bg-dark px-3 py-2 fs-6">
+            <?= _("Durée Contrat") ?> : <?= $this->nettoyer($sppoliceentete['dureePolice']) ?> <?= _("jours") ?>
+        </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") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Date Echéance") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Durée Acquise") ?> </th>
-			<th width="20%" style='text-align:center'> <?= _("Ratio Acquise") ?> </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 shadow-sm border-0 h-100">
+                <div class="card-body">
+                    <h6 class="text-muted small fw-bold text-uppercase"><?= _("Période du Contrat") ?></h6>
+                    <div class="d-flex justify-content-around align-items-center mt-2">
+                        <div>
+                            <div class="small text-muted"><?= _("Effet") ?></div>
+                            <div class="fw-bold"><?= dateLang($this->nettoyer($sppoliceentete['dateEffet'])) ?></div>
+                        </div>
+                        <i class="fas fa-arrow-right text-light"></i>
+                        <div>
+                            <div class="small text-muted"><?= _("Échéance") ?></div>
+                            <div class="fw-bold"><?= dateLang($this->nettoyer($sppoliceentete['dateEcheance'])) ?></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-	<tbody>	
+        <div class="col-md-3">
+            <div class="card shadow-sm border-0 h-100 border-start border-info border-4">
+                <div class="card-body">
+                    <h6 class="text-muted small fw-bold text-uppercase"><?= _("Durée Acquise") ?></h6>
+                    <h3 class="fw-bold mb-0 mt-2 text-info"><?= $this->nettoyer($sppoliceentete['duree_acquise']) ?></h3>
+                    <span class="text-muted small"><?= _("jours écoulés") ?></span>
+                </div>
+            </div>
+        </div>
 
-	<tr> 
-			<td> <?= dateLang($this->nettoyer($sppoliceentete['dateEffet'])) ?> </td> 
-			<td> <?= dateLang($this->nettoyer($sppoliceentete['dateEcheance'])) ?> </td> 
-			<td> <?= $this->nettoyer($sppoliceentete['duree_acquise']) ?> </td> 
-			<td> <?= $this->nettoyer($sppoliceentete['ratio_acquise']) ?> </td> 
-			<td> <?= $this->nettoyer($sppoliceentete['dureePolice']) ?> </td> 
-		</tr>
-	</tbody>
-</table>	
+        <div class="col-md-6">
+            <?php 
+                $ratio = (float)$this->nettoyer($sppoliceentete['ratio_acquise']); 
+                $color = $ratio > 100 ? 'danger' : ($ratio > 70 ? 'warning' : 'success');
+            ?>
+            <div class="card shadow-sm border-0 h-100 bg-<?= $color ?> text-white">
+                <div class="card-body">
+                    <h6 class="text-white-50 small fw-bold text-uppercase"><?= _("Ratio de Temps Écoule (Prorata)") ?></h6>
+                    <div class="d-flex align-items-center justify-content-center mt-2">
+                        <h2 class="fw-bold mb-0 me-3"><?= number_format($ratio, 2) ?> %</h2>
+                        <div class="progress w-50 bg-white bg-opacity-25" style="height: 10px;">
+                            <div class="progress-bar bg-white" role="progressbar" style="width: <?= $ratio ?>%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<table class="table table-responsive table-condensed" style='font-size:10pt;' >
-	<tbody>	
-		<tr> 
-			<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-primary" onclick="javascript:sinistres_a_prime_police();" > <?= _("Police entière...") ?> </button> </td>						
-			<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-primary" onclick="javascript:sinistres_a_prime_categorie();" > <?= _("Par Catégorie...") ?> </button> </td>						
-			<td> <button type="button" style="font-size:10pt;" class="form-control btn btn-primary" onclick="javascript:sinistres_a_prime_college();" > <?= _("Par Collège...") ?> </button> </td>						
-		</tr>
-	</tbody>
-</table>	
+    <div class="card shadow-sm border-0 mb-4">
+        <div class="card-body p-2 bg-light">
+            <div class="row g-2">
+                <div class="col-md-4">
+                    <button type="button" class="btn btn-primary w-100 fw-bold shadow-sm py-2" onclick="sinistres_a_prime_police();">
+                        <i class="fas fa-file-contract me-2"></i> <?= _("Vue Police entière") ?>
+                    </button>
+                </div>
+                <div class="col-md-4">
+                    <button type="button" class="btn btn-outline-primary w-100 fw-bold shadow-sm py-2 bg-white" onclick="sinistres_a_prime_categorie();">
+                        <i class="fas fa-layer-group me-2"></i> <?= _("Analyse par Catégorie") ?>
+                    </button>
+                </div>
+                <div class="col-md-4">
+                    <button type="button" class="btn btn-outline-primary w-100 fw-bold shadow-sm py-2 bg-white" onclick="sinistres_a_prime_college();">
+                        <i class="fas fa-users-cog me-2"></i> <?= _("Analyse par Collège") ?>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<div id="div_detail_sp">
-	
-</div>	
+    <div id="div_detail_sp" class="rounded min-vh-25 shadow-inner bg-white p-3 border">
+        <div class="text-center py-5 text-muted">
+            <i class="fas fa-chart-bar fa-3x mb-3 opacity-25"></i>
+            <p><?= _("Sélectionnez un niveau d'analyse pour afficher les détails du S/P") ?></p>
+        </div>
+    </div>
+
+</div>
+
+<style>
+    .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
+    .min-vh-25 { min-height: 250px; }
+</style>
\ No newline at end of file