df

Bootstrap_new/css/theme-modern.css

@@ -1392,16 +1392,30 @@ select[class*="selectpicker"],
     to { opacity: 1; transform: translateY(0); }
 }
 
+/* Optionnel : Réduire légèrement l'entête lors du scroll (via JS si besoin) */
 #titre-page {
-  color: var(--color-primary);
-  letter-spacing: -0.5px;
-  font-family: 'DM Sans', sans-serif; /* Ou votre police SaaS */
+    color: var(--color-primary);
+    letter-spacing: -0.5px;
+     font-family: 'DM Sans', sans-serif; /* Ou votre police SaaS */
 }
 
-/* On réduit la marge de la section pour coller davantage au contenu */
+/* ENTÊTE FIXE "STICKY" */
 .header-section {
-    width: 100%;
-    margin-bottom: 1.5rem !important; /* Ajustez cette valeur si c'est encore trop grand */
+    position: -webkit-sticky; /* Pour Safari */
+    position: sticky;
+    top: 0;
+    z-index: 1050; /* Doit être supérieur aux cartes et tableaux */
+    background-color: rgba(244, 247, 250, 0.8); /* Couleur de fond de votre page avec transparence */
+    backdrop-filter: blur(10px); /* Effet de flou moderne */
+    padding-top: 15px;
+    padding-bottom: 15px;
+    margin-bottom: 1.5rem !important;
+    transition: all 0.3s ease;
+}
+
+/* On s'assure que la carte à l'intérieur de la section fixe garde son ombre */
+.header-section > div {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
 }
 
 /* Ajustement des icônes pour plus de finesse */