diff --git a/Vue/Ajaxsppolice/college.php b/Vue/Ajaxsppolice/college.php
index b005e6a..0ea1298 100644
--- a/Vue/Ajaxsppolice/college.php
+++ b/Vue/Ajaxsppolice/college.php
@@ -1,32 +1,72 @@
-<div id="div_detail_sp">	
+<div id="div_detail_sp" class="animate__animated animate__fadeIn">    
+    
+    <div class="d-flex align-items-center bg-indigo text-light p-3 rounded-top shadow-sm">
+        <i class="fas fa-users-cog me-3"></i>
+        <h6 class="mb-0 fw-bold text-uppercase"><?= _("Analyse S / P détaillée par Collège") ?></h6>
+    </div>
 
-	<input style='text-align:center; font-size:11pt; background-color:blue;color:white;' class="form-control" type="text" value="<?= _("RAPPORT S / P POLICE PAR COLEGGE") ?>"  disabled >
+    <div class="card border-0 shadow-sm rounded-0 rounded-bottom">
+        <div class="table-responsive">
+            <table class="table table-hover align-middle mb-0" style="font-size: 0.88rem;">
+                <thead class="bg-light text-muted small fw-bold text-center">
+                    <tr>
+                        <th class="py-3 text-start ps-3" colspan="2"><?= _("Identification du Collège") ?></th>
+                        <th><?= _("Primes Totales") ?></th>
+                        <th><?= _("Primes Acquises") ?></th>
+                        <th><?= _("Consommations") ?></th>
+                        <th width="15%"><?= _("Ratio S/P (Acquis)") ?></th>
+                        <th width="12%"><?= _("S/P Global") ?></th>
+                    </tr>
+                </thead>
 
-	<table class="table table-responsive table-condensed" style='font-size:10pt; text-align:center'>
-		<thead>
-			<tr>
-				<th colspan="2" width="20%" style='text-align:center'> <?= _("Collège") ?> </th>
-				<th width="16%" style='text-align:center'> <?= _("Primes Totales") ?> </th>
-				<th width="16%" style='text-align:center'> <?= _("Primes Acquises") ?> </th>
-				<th width="16%" style='text-align:center'> <?= _("Consommations") ?> </th>
-				<th width="16%" style='text-align:center'> <?= _("Rapport S/P") ?> </th>
-				<th width="16%" style='text-align:center'> <?= _("S/P Global") ?> </th>
-			</tr>
-		</thead>
+                <tbody> 
+                    <?php foreach ($sppolices as $sppolice): 
+                        $ratio = (float)str_replace(',', '.', $sppolice['rapportsp']);
+                        
+                        // Logique d'alerte visuelle
+                        $bgRatio = 'bg-success';
+                        $textRatio = 'text-success';
+                        if ($ratio >= 100) { $bgRatio = 'bg-danger'; $textRatio = 'text-danger'; }
+                        elseif ($ratio >= 80) { $bgRatio = 'bg-warning'; $textRatio = 'text-warning'; }
+                    ?>
+                    <tr class="text-center">
+                        <td class="text-start ps-3" width="8%">
+                            <span class="badge bg-indigo-subtle text-indigo border border-indigo-subtle"><?= $this->nettoyer($sppolice['codeProduit']) ?></span>
+                        </td>
+                        
+                        <td class="text-start fw-bold">
+                            <?= $this->nettoyer($sppolice['libelleCollege']) ?>
+                        </td>
 
-		<tbody>	
-			<?php foreach ($sppolices as $sppolice):
-			?>
-			<tr valign="top">
-				<td> <?= $this->nettoyer($sppolice['codeProduit']) ?> </td> 
-				<td> <?= $this->nettoyer($sppolice['libelleCollege']) ?> </td> 			
-				<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>
-			<?php endforeach; ?>
-		</tbody>
-	</table>	
-</div>	
+                        <td class="text-muted small"><?= format_N($this->nettoyer($sppolice['primestat'])) ?></td>
+                        <td class="fw-semibold text-dark"><?= format_N($this->nettoyer($sppolice['prime_acquise'])) ?></td>
+                        <td class="text-danger fw-semibold"><?= format_N($this->nettoyer($sppolice['consommation'])) ?></td>
+
+                        <td>
+                            <div class="d-flex align-items-center justify-content-center">
+                                <span class="me-2 <?= $textRatio ?> fw-bold"><?= $this->nettoyer($sppolice['rapportsp']) ?>%</span>
+                                <div class="progress flex-grow-1 d-none d-lg-flex" style="height: 6px; max-width: 50px;">
+                                    <div class="progress-bar <?= $bgRatio ?>" role="progressbar" style="width: <?= min($ratio, 100) ?>%"></div>
+                                </div>
+                            </div>
+                        </td>
+
+                        <td class="text-muted italic small">
+                            <?= $this->nettoyer($sppolice['rapportspgeneral']) ?>%
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<style>
+    .bg-indigo { background-color: #6610f2; }
+    .text-indigo { color: #6610f2; }
+    .bg-indigo-subtle { background-color: #e0d1ff; }
+    .border-indigo-subtle { border-color: #c2a6ff !important; }
+    .italic { font-style: italic; }
+    .table-hover tbody tr:hover { background-color: #f8f9ff; }
+</style>
\ No newline at end of file