diff --git a/Vue/Ajaxsppolice/police.php b/Vue/Ajaxsppolice/police.php
index 2b62abe..e5de4a3 100644
--- a/Vue/Ajaxsppolice/police.php
+++ b/Vue/Ajaxsppolice/police.php
@@ -1,26 +1,79 @@
-<div id="div_detail_sp">	
+<div id="div_detail_sp" class="animate__animated animate__fadeIn">    
+    <div class="alert alert-dark border-0 shadow-sm d-flex justify-content-between align-items-center py-2 px-3 mb-4">
+        <h6 class="mb-0 fw-bold text-uppercase small text-white">
+            <i class="fas fa-microscope me-2"></i><?= _("Analyse détaillée : Police Entière") ?>
+        </h6>
+        <span class="badge bg-white text-dark small"><?= date('d/m/Y H:i') ?></span>
+    </div>
 
-	<input style='text-align:center; font-size:11pt; background-color:blue;color:white;' class="form-control" type="text" value="<?= _("RAPPORT S / P POLICE ENTIERE") ?>"  disabled >
+    <div class="row g-3 mb-4">
+        <div class="col-md-4">
+            <div class="card h-100 border-0 shadow-sm bg-white">
+                <div class="card-body text-center">
+                    <div class="text-muted small fw-bold text-uppercase mb-2"><?= _("Primes Totales (Stat)") ?></div>
+                    <h4 class="fw-bold mb-0 text-dark"><?= format_N($this->nettoyer($sppolice['primestat'])) ?></h4>
+                    <div class="x-small text-muted mt-1 italic"><?= _("Volume global") ?></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'> <?= _("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>
+        <div class="col-md-4">
+            <div class="card h-100 border-0 shadow-sm bg-white border-bottom border-primary border-4">
+                <div class="card-body text-center">
+                    <div class="text-primary small fw-bold text-uppercase mb-2"><?= _("Primes Acquises") ?></div>
+                    <h4 class="fw-bold mb-0"><?= format_N($this->nettoyer($sppolice['prime_acquise'])) ?></h4>
+                    <div class="x-small text-muted mt-1"><?= _("Quote-part au prorata") ?></div>
+                </div>
+            </div>
+        </div>
 
-		<tbody>	
-			<tr> 
-				<td> <?= format_N($this->nettoyer($sppolice['primestat'])) ?> </td> 			
-				<td> <?= format_N($this->nettoyer($sppolice['prime_acquise'])) ?> </td> 
-				<td> <?= format_N($this->nettoyer($sppolice['consommation'])) ?> </td> 
-				<td> <?= $this->nettoyer($sppolice['rapportsp']) ?> </td> 
-				<td> <?= $this->nettoyer($sppolice['rapportspgeneral']) ?> </td> 			
-			</tr>
-		</tbody>
-	</table>	
-</div>	
+        <div class="col-md-4">
+            <div class="card h-100 border-0 shadow-sm bg-white border-bottom border-danger border-4">
+                <div class="card-body text-center">
+                    <div class="text-danger small fw-bold text-uppercase mb-2"><?= _("Consommations") ?></div>
+                    <h4 class="fw-bold mb-0 text-danger"><?= format_N($this->nettoyer($sppolice['consommation'])) ?></h4>
+                    <div class="x-small text-muted mt-1"><?= _("Sinistres payés + Provisions") ?></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-3">
+        <div class="col-md-6">
+            <?php 
+                $sp_acquis = (float)str_replace(',', '.', $sppolice['rapportsp']);
+                $color_acquis = $sp_acquis > 80 ? 'danger' : ($sp_acquis > 60 ? 'warning' : 'success');
+            ?>
+            <div class="card border-0 shadow-sm bg-<?= $color_acquis ?> text-white">
+                <div class="card-body d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h6 class="small fw-bold text-uppercase opacity-75"><?= _("Rapport S/P (Acquises)") ?></h6>
+                        <h2 class="fw-bold mb-0"><?= $this->nettoyer($sppolice['rapportsp']) ?> %</h2>
+                    </div>
+                    <div class="fs-1 opacity-25">
+                        <i class="fas fa-chart-pie"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-6">
+            <div class="card border-0 shadow-sm bg-secondary text-white">
+                <div class="card-body d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h6 class="small fw-bold text-uppercase opacity-75"><?= _("S/P Global (Stat)") ?></h6>
+                        <h2 class="fw-bold mb-0"><?= $this->nettoyer($sppolice['rapportspgeneral']) ?> %</h2>
+                    </div>
+                    <div class="fs-1 opacity-25">
+                        <i class="fas fa-percentage"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .x-small { font-size: 0.75rem; }
+    .italic { font-style: italic; }
+</style>
\ No newline at end of file