diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css
index fc00bd3..27b8821 100644
--- a/Bootstrap_new/css/style_office.css
+++ b/Bootstrap_new/css/style_office.css
@@ -743,6 +743,15 @@ body {
   .content-card { border-radius: 8px;  margin: 8px 0 16px 0; /* 8px en haut, 16px en bas */ }
   .header-content { padding: 0 16px; }
   .user-info { display: none; }
+
+  .accordion-header, .accordion-header i, .accordion-header span  {
+    font-size: 1.8rem !important;
+    font-weight: bold !important;
+  }
+
+  .accordion-title {
+	font-size: 0.9rem !important;
+  }
 }
 
 /* Écrans larges : mêmes insets pour nav-tabs et content-area */
@@ -856,4 +865,62 @@ li i { margin-right:10px; color:#007bff; }
 
 .sub-item strong {
     color: #333;
-}
\ No newline at end of file
+}
+
+.accordion-section {
+    margin-bottom: 2px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    padding: 12px 15px;
+    background-color: #f1f5fc;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 1.1rem;
+    transition: background-color 0.3s;
+    margin: 0;
+}
+
+.accordion-header:hover {
+    background-color: #e9ecef;
+}
+
+.accordion-header.active {
+    background-color: #e2e6ea;
+}
+
+.accordion-header i:first-child {
+    margin-right: 10px;
+    font-size: 1.2rem;
+}
+
+.accordion-title {
+    flex-grow: 1;
+}
+
+.accordion-icon {
+    margin-left: auto;
+    transition: transform 0.3s ease;
+}
+
+.accordion-header.active .accordion-icon {
+    transform: rotate(180deg);
+}
+
+.accordion-content {
+    display: none;
+    padding: 2px;
+    background-color: #fff;
+    border-top: 1px solid #ddd;
+}
+
+		/* Styles pour la responsivité */
+		@media (max-width: 768px) {
+			
+			
+		}
diff --git a/Vue/Accueil/index.php b/Vue/Accueil/index.php
index 75d27c0..10f47e2 100644
--- a/Vue/Accueil/index.php
+++ b/Vue/Accueil/index.php
@@ -81,17 +81,22 @@
         </div>
     </div>
 
-    <!-- Graphiques (placeholders) -->
-   
     <div class="grid-1">
         <div class="card">
-            <h3><?= _('Évolution des cotisations / primes') ?></h3>
-            <div class="chart">
-                <canvas id="cotisationLine"></canvas>
-            </div>
+            <section class="accordion-section">
+                <h2 class="accordion-header">
+                    <i class="fas fa-file-medical text-primary"></i> 
+                    <span class="accordion-title"><?= _("Liste des contrats")?></span>
+                    <i class="accordion-icon bi bi-chevron-down"></i>
+                </h2>
+                <div class="accordion-content">
+
+                </div>
+            </section>
         </div>
     </div>
-   
+
+    <!-- Graphiques (placeholders) -->
     <div class="grid-2">
         <div class="card">
             <h3><?= _('Sinistralité') ?></h3>
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 6f186b2..1d3c6c5 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -145,7 +145,7 @@ console.groupEnd();
         <link rel="manifest" href="<?= $racineWeb ?>manifest.json">
         
         <!-- 4. VOS STYLES PERSONNALISÉS (en dernier pour qu'ils dominent) -->
-        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.24.16" rel="stylesheet">
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.24.17" rel="stylesheet">
         <link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
 
         <!-- ============================================