diff --git a/Controleur/ControleurAjaxgraphiquesinistres.php b/Controleur/ControleurAjaxgraphiquesinistres.php
index b80fbc5..a732cc8 100755
--- a/Controleur/ControleurAjaxgraphiquesinistres.php
+++ b/Controleur/ControleurAjaxgraphiquesinistres.php
@@ -3,56 +3,52 @@ require_once 'Framework/Controleur.php';
 require_once 'Modele/Synthese.php';
 
 class ControleurAjaxgraphiquesinistres extends Controleur {
-    private $menuvue;
     private $synthese;
 	
     public function __construct() {
-
         $this->synthese = new Synthese();
     }
 
     public function index() {
-
         // Répartition sinistres
-        $claims             = $this->synthese->getClaims();
-
-        $tabclaims          = [
-            'claimsLabels'  => array_column($claims, 'claimsLabels'),
-            'claimsValues'  => array_column($claims, 'claimsValues')
+        $claims = $this->synthese->getClaims();
+        $tabclaims = [
+            'claimsLabels' => array_column($claims, 'claimsLabels'),
+            'claimsValues' => array_column($claims, 'claimsValues')
         ];
 
-        $dataTabClaims      = json_encode($tabclaims, JSON_NUMERIC_CHECK);
-
-
         // Evolution des sinistres
-        $claimsMonth        = $this->synthese->getClaimsMonth();
-        $claimsSingleMonth  = $this->synthese->getClaimsSingleMonth();
-
-        $tabclaimsMonth     = [
+        $claimsMonth       = $this->synthese->getClaimsMonth();
+        $claimsSingleMonth = $this->synthese->getClaimsSingleMonth();
+        $tabclaimsMonth    = [
             'months'        => array_column($claimsMonth, 'months'),
             'monthlyClaims' => array_column($claimsMonth, 'monthlyClaims'),
             'singleClaims'  => array_column($claimsSingleMonth, 'singleClaims')
         ];
 
-        $dataTabClaimsMonth = json_encode($tabclaimsMonth, JSON_NUMERIC_CHECK);
-
-        // SINISTRALITÉ
-        $claimsLossRatio      = $this->synthese->getClaimsLossRatio();
-
-        $tabLossRatio         = [
+        // Sinistralité
+        $claimsLossRatio = $this->synthese->getClaimsLossRatio();
+        $tabLossRatio    = [
             'lossRatioLabels' => array_column($claimsLossRatio, 'months'),
             'lossRatioValues' => array_column($claimsLossRatio, 'ratio')
         ];
 
-        $dataLossRatio        = json_encode($tabLossRatio, JSON_NUMERIC_CHECK);
+        // --- Mode API JSON brut ---
+        if (isset($_GET['api']) && $_GET['api'] == '1') {
+            header('Content-Type: application/json');
+            echo json_encode([
+                'claims'      => $tabclaims,
+                'claimsMonth' => $tabclaimsMonth,
+                'lossRatio'   => $tabLossRatio
+            ], JSON_NUMERIC_CHECK);
+            exit;
+        }
 
-        $this->genererVueAjax(
-            array
-			(
-                'dataTabClaims'         => $dataTabClaims,
-                'dataTabClaimsMonth'    => $dataTabClaimsMonth,
-                'dataLossRatio'         => $dataLossRatio
-			)
-        );   
+        // --- Mode Vue Ajax HTML ---
+        $this->genererVueAjax([
+            'dataTabClaims'      => json_encode($tabclaims, JSON_NUMERIC_CHECK),
+            'dataTabClaimsMonth' => json_encode($tabclaimsMonth, JSON_NUMERIC_CHECK),
+            'dataLossRatio'      => json_encode($tabLossRatio, JSON_NUMERIC_CHECK)
+        ]);
     }
-}
+}
\ No newline at end of file
diff --git a/Js/fonctions.js b/Js/fonctions.js
index 9e2b8d4..e26d73a 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -808,8 +808,8 @@ function afficher_adherents_police()
 	}); 
 }
 
-function graphique_sinistre()
-{
+function graphique_sinistre() {
+    // Spinner pendant le chargement
     $("#div_graphique").html(`
         <div class="text-center my-5 py-5">
             <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
@@ -818,16 +818,109 @@ function graphique_sinistre()
             <p class="mt-3 text-muted fw-bold">Affichage des graphiques en cours...</p>
         </div>
     `);
-	
 
-	$.ajax({
-		url: $("#racineWeb").val()+"Ajaxgraphiquesinistres/",
-		type : 'post',
-		// data: donnees,
-		error: function(errorData) {			
-		},
-		success: function(data) {
-			$("#div_graphique").html(data);
-		}
-	});
-}
\ No newline at end of file
+    $.ajax({
+        url: $("#racineWeb").val() + "Ajaxgraphiquesinistres/",
+        type: 'post',
+        success: function(data, textStatus, jqXHR) {
+            let contentType = jqXHR.getResponseHeader("Content-Type");
+
+            if (contentType && contentType.indexOf("application/json") !== -1) {
+                // --- Mode JSON ---
+                $("#div_graphique").empty();
+
+                // Layout responsive Bootstrap
+                $("#div_graphique").append(`
+                    <div class="row">
+                        <div class="col-md-6 mb-4">
+                            <div class="card shadow-sm">
+                                <div class="card-body">
+                                    <h5 class="card-title text-primary">Répartition des sinistres</h5>
+                                    <canvas id="claimsChart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6 mb-4">
+                            <div class="card shadow-sm">
+                                <div class="card-body">
+                                    <h5 class="card-title text-success">Évolution mensuelle</h5>
+                                    <canvas id="claimsMonthChart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-12 mb-4">
+                            <div class="card shadow-sm">
+                                <div class="card-body">
+                                    <h5 class="card-title text-danger">Ratio de sinistralité</h5>
+                                    <canvas id="lossRatioChart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `);
+
+                // Graphique 1 : répartition
+                new Chart(document.getElementById('claimsChart'), {
+                    type: 'bar',
+                    data: {
+                        labels: data.claims.claimsLabels,
+                        datasets: [{
+                            label: 'Nombre de sinistres',
+                            data: data.claims.claimsValues,
+                            backgroundColor: 'rgba(54, 162, 235, 0.6)'
+                        }]
+                    }
+                });
+
+                // Graphique 2 : évolution mensuelle
+                new Chart(document.getElementById('claimsMonthChart'), {
+                    type: 'line',
+                    data: {
+                        labels: data.claimsMonth.months,
+                        datasets: [
+                            {
+                                label: 'Sinistres mensuels',
+                                data: data.claimsMonth.monthlyClaims,
+                                borderColor: 'rgba(255, 99, 132, 0.8)',
+                                fill: false
+                            },
+                            {
+                                label: 'Sinistres uniques',
+                                data: data.claimsMonth.singleClaims,
+                                borderColor: 'rgba(75, 192, 192, 0.8)',
+                                fill: false
+                            }
+                        ]
+                    }
+                });
+
+                // Graphique 3 : ratio
+                new Chart(document.getElementById('lossRatioChart'), {
+                    type: 'line',
+                    data: {
+                        labels: data.lossRatio.lossRatioLabels,
+                        datasets: [{
+                            label: 'Ratio de sinistralité',
+                            data: data.lossRatio.lossRatioValues,
+                            borderColor: 'rgba(255, 206, 86, 0.8)',
+                            fill: false
+                        }]
+                    }
+                });
+
+            } else {
+                // --- Mode Vue HTML ---
+                $("#div_graphique").html(data);
+            }
+        },
+        error: function(err) {
+            console.error("Erreur AJAX:", err);
+            $("#div_graphique").html(`
+                <div class="alert alert-danger">
+                    Impossible de charger les graphiques.
+                </div>
+            `);
+        }
+    });
+}
+
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 7ac3dcb..42231e8 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -599,7 +599,7 @@ $activeChildId = $menuData['child'];
         <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
         <!-- Application Scripts -->
-        <script src="/Js/fonctions.js?ver=2025.12.30.06"></script>
+        <script src="/Js/fonctions.js?ver=2025.12.30.08"></script>
 
         <?php if (est_anglophone()): ?>
             <script src="/Js/datepicker-eng.js"></script>