FF

Bootstrap_new/css/theme-modern.css

@@ -1,66 +1,67 @@
+/* --- BASE --- */
 :root {
-    --primary: #1e293b;
+    --primary: #2C3E50;
     --accent: #08C5D1;
-    --bg-body: #edf2f7; /* Gris bleuté pour le fond */
-    --shadow-wahoo: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --bg-body: #F4F7FB;
 }
 
-body {
-    background-color: var(--bg-body) !important;
-    font-family: 'Plus Jakarta Sans', sans-serif !important;
+body { background: var(--bg-body); color: #444; }
+
+/* --- HEADER FLOATING --- */
+#header {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    margin: 10px 15px;
+    width: calc(100% - 30px);
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
 }
 
-/* LE SECRET : On ne touche pas au bord de l'écran */
+/* --- LE "WAHOO" : MAIN CARD --- */
 #main {
-    margin: 85px 25px 25px 285px !important; /* Sidebar large + marge */
-    background: #ffffff !important;
-    border-radius: 30px !important; /* Arrondi très fort */
-    box-shadow: var(--shadow-wahoo) !important;
-    border: none !important;
-    min-height: calc(100vh - 110px);
-    padding: 40px !important;
+    margin: 95px 20px 20px 320px; /* Espace pour la sidebar */
+    background: white;
+    border-radius: 20px;
+    min-height: 80vh;
+    padding: 30px;
+    border: 1px solid #edf2f7;
+    /* On évite les ombres lourdes, on mise sur la netteté */
 }
 
-/* SIDEBAR : Elle doit être détachée ou très sombre */
-.sidebar {
-    background: var(--primary) !important;
-    width: 260px !important;
-    border: none !important;
+/* --- SIDEBAR : UNITÉ VISUELLE --- */
+#sidebar {
+    background: var(--primary);
+    border-right: none;
+    margin: 10px 0 10px 15px;
+    height: calc(100vh - 20px);
+    border-radius: 15px;
 }
 
-/* HEADER : On le rend invisible ou très léger */
-.header {
-    background: rgba(248, 250, 252, 0.8) !important;
-    backdrop-filter: blur(8px);
-    border: none !important;
-    box-shadow: none !important;
+/* --- CONTEXTE (Sidenav) --- */
+.sidenav-context {
+    position: fixed;
+    right: -340px;
+    top: 10px;
+    height: calc(100vh - 20px);
+    width: 320px;
+    background: white;
+    border-radius: 20px 0 0 20px;
+    box-shadow: -10px 0 40px rgba(0,0,0,0.05);
+    z-index: 1060;
+    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    padding: 25px;
 }
+.sidenav-context.active { right: 0; }
 
-/* --- LES TABLEAUX "WAHOO" (Effet Liste de Cartes) --- */
-.table {
-    border-collapse: separate !important;
-    border-spacing: 0 12px !important; /* Espace entre les lignes */
-    background: transparent !important;
-}
+/* --- WIDGETS DE DONNÉES --- */
+.context-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px; }
+.context-value-box { padding: 12px; background: #f8fafc; border-radius: 10px; border: 1px solid #eef2f7; display: flex; align-items: center; }
+.assured-card { cursor: pointer; transition: 0.3s; padding: 10px; border-radius: 12px; }
+.assured-card:hover { background: #f0f9fa; transform: translateY(-2px); }
 
-.table tbody tr {
-    background: white !important;
-    border-radius: 15px !important;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
-    transition: all 0.3s ease !important;
-}
-
-.table tbody tr:hover {
-    transform: translateY(-4px) scale(1.01);
-    box-shadow: 0 15px 30px rgba(8, 197, 209, 0.15) !important;
-}
-
-.table td {
-    padding: 20px !important;
-    border: none !important;
-    vertical-align: middle;
-}
-
-/* Arrondis pour chaque ligne */
-.table td:first-child { border-radius: 15px 0 0 15px !important; }
-.table td:last-child { border-radius: 0 15px 15px 0 !important; }
+/* Avatar initials */
+.initials-circle {
+    width: 40px; height: 40px; background: var(--accent); color: white;
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%; font-weight: bold;
+}