diff --git a/Vue/Ajaxsppolice/categorie.php b/Vue/Ajaxsppolice/categorie.php
index 459fbe3..c53042d 100644
--- a/Vue/Ajaxsppolice/categorie.php
+++ b/Vue/Ajaxsppolice/categorie.php
@@ -1,31 +1,65 @@
-<div id="div_detail_sp">	
+<div id="div_detail_sp" class="animate__animated animate__fadeIn">    
+    
+    <div class="d-flex align-items-center bg-primary text-dark p-3 rounded-top shadow-sm">
+        <i class="fas fa-layer-group me-3"></i>
+        <h6 class="mb-0 fw-bold text-uppercase"><?= _("Analyse du Rapport S / P par Catégorie") ?></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 CATEGORIE") ?>"  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 text-center" style="font-size: 0.9rem;">
+                <thead class="bg-light text-muted small fw-bold">
+                    <tr>
+                        <th class="py-3" width="10%"><?= _("Produit") ?></th>
+                        <th width="18%"><?= _("Primes Totales") ?></th>
+                        <th width="18%"><?= _("Primes Acquises") ?></th>
+                        <th width="18%"><?= _("Consommations") ?></th>
+                        <th width="18%"><?= _("S/P (Acquis)") ?></th>
+                        <th width="18%"><?= _("S/P Global") ?></th>
+                    </tr>
+                </thead>
 
-	<table class="table table-responsive table-condensed" style='font-size:10pt; text-align:center'>
-		<thead>
-			<tr>
-				<th width="10%" style='text-align:center'>Cat</th>
-				<th width="18%" style='text-align:center'> <?= _("Primes Totales") ?> </th>
-				<th width="18%" style='text-align:center'> <?= _("Primes Acquises") ?> </th>
-				<th width="18%" style='text-align:center'> <?= _("Consommations") ?> </th>
-				<th width="18%" style='text-align:center'> <?= _("Rapport S/P") ?> </th>
-				<th width="18%" style='text-align:center'> <?= _("S/P Global") ?> </th>
-			</tr>
-		</thead>
+                <tbody> 
+                    <?php foreach ($sppolices as $sppolice): 
+                        // Logique de couleur pour le ratio
+                        $ratio = (float)str_replace(',', '.', $sppolice['rapportsp']);
+                        $statusClass = ($ratio >= 100) ? 'text-danger fw-bold' : (($ratio >= 75) ? 'text-warning fw-bold' : 'text-success fw-bold');
+                        $progressColor = ($ratio >= 100) ? 'bg-danger' : (($ratio >= 75) ? 'bg-warning' : 'bg-success');
+                    ?>
+                    <tr>
+                        <td>
+                            <span class="badge bg-secondary-subtle text-dark border px-3 py-2"><?= $this->nettoyer($sppolice['codeProduit']) ?></span>
+                        </td>
 
-		<tbody>	
-			<?php foreach ($sppolices as $sppolice):
-			?>
-			<tr valign="top">
-				<td> <?= $this->nettoyer($sppolice['codeProduit']) ?> </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"><?= 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="<?= $statusClass ?> mb-1 fs-6">
+                                <?= $this->nettoyer($sppolice['rapportsp']) ?> %
+                            </div>
+                            <div class="progress mx-auto" style="height: 4px; width: 60px;">
+                                <div class="progress-bar <?= $progressColor ?>" role="progressbar" style="width: <?= min($ratio, 100) ?>%"></div>
+                            </div>
+                        </td>
+
+                        <td class="text-muted small">
+                            <?= $this->nettoyer($sppolice['rapportspgeneral']) ?> %
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<style>
+    .bg-secondary-subtle { background-color: #f8f9fa; }
+    .table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.02); }
+    .progress { background-color: #e9ecef; border-radius: 10px; }
+</style>
\ No newline at end of file