diff --git a/Vue/Syntheseconsopolice/index.php b/Vue/Syntheseconsopolice/index.php
index d95761c..b9b3e41 100644
--- a/Vue/Syntheseconsopolice/index.php
+++ b/Vue/Syntheseconsopolice/index.php
@@ -1,49 +1,85 @@
-<?php 
-	// $this->titre = "INTER-SANTE - SYNTHESE CONSOMMATIONS DE LA POLICE"; 
-?>
+<div class="container-fluid py-4 animate__animated animate__fadeIn">
 
-<legend> <?= _("SYNTHESE CONSOMMATIONS DE LA POLICE") . " : " . $this->nettoyer($_SESSION['numeroPolice_C'])?> </legend>
+    <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-3">
+        <h4 class="fw-bold text-secondary mb-0">
+            <i class="fas fa-microscope text-primary me-2"></i>
+            <?= _("Synthèse des Consommations") ?>
+        </h4>
+        <div class="h5 mb-0">
+            <span class="badge bg-primary shadow-sm"><?= $this->nettoyer($_SESSION['numeroPolice_C']) ?></span>
+        </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">
+        <div class="col-md-5">
+            <div class="card shadow-sm border-0 h-100">
+                <div class="card-body py-3 d-flex align-items-center justify-content-around">
+                    <div class="text-center">
+                        <div class="small text-muted text-uppercase fw-bold"><?= _("Effet") ?></div>
+                        <div class="fw-bold text-dark"><?= dateLang($this->nettoyer($sppoliceentete['dateEffet'])) ?></div>
+                    </div>
+                    <i class="fas fa-long-arrow-alt-right text-light fa-2x"></i>
+                    <div class="text-center">
+                        <div class="small text-muted text-uppercase fw-bold"><?= _("Échéance") ?></div>
+                        <div class="fw-bold text-dark"><?= dateLang($this->nettoyer($sppoliceentete['dateEcheance'])) ?></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2">
+            <div class="card shadow-sm border-0 h-100 text-center border-start border-info border-4">
+                <div class="card-body py-3">
+                    <div class="small text-muted fw-bold"><?= _("DURÉE ACQUISE") ?></div>
+                    <div class="h4 fw-bold mb-0 text-info"><?= $this->nettoyer($sppoliceentete['duree_acquise']) ?> j</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-5">
+            <div class="card shadow-sm border-0 h-100">
+                <div class="card-body py-3">
+                    <div class="d-flex justify-content-between align-items-center mb-1">
+                        <span class="small text-muted fw-bold text-uppercase"><?= _("Progression du Contrat") ?></span>
+                        <span class="fw-bold"><?= $this->nettoyer($sppoliceentete['ratio_acquise']) ?> %</span>
+                    </div>
+                    <div class="progress shadow-sm" style="height: 12px;">
+                        <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" 
+                             role="progressbar" 
+                             style="width: <?= $this->nettoyer($sppoliceentete['ratio_acquise']) ?>%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-	<tbody>	
+    <div class="card shadow-sm border-0 mb-4 bg-light">
+        <div class="card-body py-3">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <button type="button" class="btn btn-primary px-4 fw-bold shadow-sm" onclick="requetes_synthese_consommation_police();">
+                        <i class="fas fa-search me-2"></i> <?= _("Afficher les résultats") ?>
+                    </button>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <button type="button" class="btn btn-outline-success px-4 fw-bold shadow-sm bg-white" onclick="requetes_synthese_consommation_police_export();">
+                        <i class="fas fa-file-excel me-2"></i> <?= _("Exporter vers Excel") ?>
+                    </button>
+                </div>
+            </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 id="div_detail_exp" class="mb-3"></div>
+    <div id="div_detail_sp" class="min-vh-50 bg-white rounded border border-dashed d-flex align-items-center justify-content-center text-muted">
+        <div class="text-center py-5">
+            <i class="fas fa-chart-area fa-3x mb-3 opacity-25"></i>
+            <p class="fs-5"><?= _("Cliquez sur 'Afficher résultats' pour générer la synthèse") ?></p>
+        </div>
+    </div>
 
-<table class="table table-responsive table-condensed" style='font-size:10pt;' >
-	<tbody>	
-		<tr> 
-			<td>  <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:requetes_synthese_consommation_police();"> <?= _("Afficher résultats")."..." ?> </button> </td>
-			
+</div>
 
-			<td width="10%" >  </td>						
-			
-			<td>  <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:requetes_synthese_consommation_police_export();"> <?= _("Exporter vers Excel...") ?> </button> </td>
-		</tr>
-	</tbody>
-</table>	
-
-<div id="div_detail_exp">
-	
-</div>	
-
-<div id="div_detail_sp">
-	
-</div>	
+<style>
+    .border-dashed { border: 2px dashed #dee2e6 !important; }
+    .bg-indigo { background-color: #6610f2; }
+    .min-vh-50 { min-height: 400px; }
+</style>
\ No newline at end of file