From f2cce73a93e2413bd01fc1d5a180bcee2c812bb3 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 08:25:47 +0000 Subject: [PATCH] vd --- Bootstrap_new/css/theme-modern.css | 1652 +++++++++++++++++----------- 1 file changed, 1036 insertions(+), 616 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 045e48ad..7e7dd555 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,764 +1,1184 @@ -/* ------------------------------------------------------------------- - THEME MODERN - INTER SANTE - Style SaaS Premium, épuré, professionnel. - ------------------------------------------------------------------- */ +/* ============================= + INTER SANTÉ — THEME MODERN + SaaS Premium UI v2025 + ============================= */ -/* 1. Variables et réinitialisations */ +/* === FONTS === */ +@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap'); + +/* === CSS VARIABLES === */ :root { - --primary: #0b5e7c; /* Bleu médical profond */ - --primary-light: #e6f0f5; - --secondary: #6c757d; - --success: #28a745; - --info: #17a2b8; - --warning: #ffc107; - --danger: #dc3545; - --light: #f8f9fa; - --dark: #343a40; - --body-bg: #f2f5f9; - --card-bg: #ffffff; - --border-color: rgba(0,0,0,0.08); - --sidebar-width: 260px; - --header-height: 70px; - --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - --border-radius: 14px; - --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); + /* Brand Colors */ + --color-primary: #1a6b4a; + --color-primary-light: #25a06e; + --color-primary-dark: #114532; + --color-primary-ghost: rgba(26, 107, 74, 0.08); + + /* Accent / Status */ + --color-accent: #0abf7c; + --color-urgent: #e63946; + --color-warning: #f4a261; + --color-success: #2ec4b6; + --color-info: #3a86ff; + --color-neutral: #6c757d; + + /* Backgrounds */ + --bg-base: #f4f6f9; + --bg-surface: #ffffff; + --bg-surface-2: #f8fafc; + --bg-sidebar: #0f2d20; + --bg-header: #ffffff; + + /* Text */ + --text-primary: #1a2332; + --text-secondary: #6b7280; + --text-muted: #9ca3af; + --text-inverse: #ffffff; + + /* Borders */ + --border-light: #e8ecf0; + --border-medium: #d1d5db; + + /* Spacing & Radius */ + --radius-sm: 6px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-xl: 24px; + --radius-full: 9999px; + + /* Shadows */ + --shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04); + --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05); + --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05); + --shadow-lg: 0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06); + --shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07); + --shadow-primary: 0 4px 20px rgba(26,107,74,.25); + + /* Transitions */ + --transition-fast: 0.15s ease; + --transition-base: 0.25s ease; + --transition-slow: 0.4s cubic-bezier(.4,0,.2,1); + + /* Layout */ + --sidebar-width: 240px; + --sidebar-collapsed: 68px; + --header-height: 64px; + --context-width: 320px; } +/* === BASE RESET & GLOBALS === */ +*, *::before, *::after { box-sizing: border-box; } + +html { font-size: 14px; scroll-behavior: smooth; } + body { - font-family: var(--font-family); - background-color: var(--body-bg); - color: #1e293b; - font-size: 0.95rem; + font-family: 'DM Sans', system-ui, sans-serif; + background: var(--bg-base); + color: var(--text-primary); + line-height: 1.6; + -webkit-font-smoothing: antialiased; } -/* 2. Header */ -.header { - height: var(--header-height); - background-color: white; - border-bottom: 1px solid var(--border-color); - padding: 0 1.5rem; - box-shadow: 0 2px 10px rgba(0,0,0,0.02); +h1, h2, h3, h4, h5, h6, +.fw-bold, .fw-semibold, .nav-link span { + font-family: 'Syne', sans-serif; } -.logo span { - font-weight: 600; - color: var(--primary); - letter-spacing: -0.3px; +/* === SCROLLBAR === */ +::-webkit-scrollbar { width: 5px; height: 5px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); } +::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } + +/* ============================== + HEADER + ============================== */ +#header { + height: var(--header-height); + background: var(--bg-header); + border-bottom: 1px solid var(--border-light); + box-shadow: var(--shadow-xs); + padding: 0 1.25rem; + z-index: 1000; + transition: background var(--transition-base); } -.breadcrumb-nav { - margin-left: 2rem; +#header.mode-test { + background: linear-gradient(90deg, #7b2d00, #c0392b); } +#header .logo { + gap: 10px; + text-decoration: none; +} + +#header .logo img { + width: 34px; + height: 34px; + border-radius: var(--radius-sm); + object-fit: contain; +} + +#header .logo span { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 1.05rem; + color: var(--color-primary); + letter-spacing: -0.02em; +} + +/* Toggle sidebar button */ +.toggle-sidebar-btn { + font-size: 1.4rem; + color: var(--text-secondary); + cursor: pointer; + padding: 4px 8px; + border-radius: var(--radius-sm); + transition: all var(--transition-fast); + margin-left: 12px; +} +.toggle-sidebar-btn:hover { + color: var(--color-primary); + background: var(--color-primary-ghost); +} + +/* Breadcrumb */ .breadcrumb { - background: transparent; - padding: 0; - font-size: 0.9rem; + background: transparent !important; + padding: 0 !important; + margin: 0; + font-size: 0.8rem; } - .breadcrumb-item a { - color: var(--secondary); + color: var(--text-muted); + text-decoration: none; + transition: color var(--transition-fast); +} +.breadcrumb-item a:hover { color: var(--color-primary); } +.breadcrumb-item.active { color: var(--color-primary); font-weight: 600; } +.breadcrumb-item + .breadcrumb-item::before { color: var(--border-medium); } + +/* Header Nav Icons */ +#header .header-nav .nav-link { + color: var(--text-secondary); + padding: 6px 10px; + border-radius: var(--radius-sm); + transition: all var(--transition-fast); + position: relative; +} +#header .header-nav .nav-link:hover { + color: var(--color-primary); + background: var(--color-primary-ghost); } -.breadcrumb-item.active { - color: var(--primary); - font-weight: 500; +.badge-number { + position: absolute; + top: 2px; right: 4px; + background: var(--color-urgent) !important; + font-size: 0.6rem; + min-width: 16px; + height: 16px; + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border: 2px solid white; + transition: transform var(--transition-fast); +} +.badge-number:hover { transform: scale(1.2); } + +/* Company logo area */ +.company-logo-area { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 10px; + border-radius: var(--radius-md); + border: 1px solid var(--border-light); + background: var(--bg-surface-2); + transition: all var(--transition-fast); + max-width: 180px; +} +.company-logo-area:hover { + border-color: var(--color-primary-light); + box-shadow: var(--shadow-sm); +} +.company-logo-area img { height: 32px; width: auto; object-fit: contain; } +.company-logo-area .company-name { + font-size: 0.75rem; + font-weight: 600; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -/* Badge mode test */ -.test-badge { - background-color: #ffc107; - color: #1e1e1e; - font-size: 0.7rem; - font-weight: 600; - padding: 0.2rem 0.8rem; - border-radius: 30px; - letter-spacing: 0.3px; - text-transform: uppercase; +/* User Initials Badge */ +.initials { + width: 32px; + height: 32px; + border-radius: var(--radius-sm); + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); + color: white; + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 0.75rem; + display: inline-flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-primary); + transition: transform var(--transition-fast); +} +.nav-link:hover .initials { transform: scale(1.08); } + +/* Dropdown */ +.dropdown-menu { + border: 1px solid var(--border-light); + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + padding: 6px; + font-size: 0.85rem; + margin-top: 8px !important; +} +.dropdown-item { + border-radius: var(--radius-sm); + padding: 8px 12px; + gap: 10px; + display: flex; + align-items: center; + color: var(--text-primary); + transition: all var(--transition-fast); +} +.dropdown-item:hover { + background: var(--color-primary-ghost); + color: var(--color-primary); +} +.dropdown-item i { width: 16px; color: var(--text-muted); } + +/* Language flag */ +.lang-selector img { border-radius: 3px; } + +/* ============================== + SIDEBAR + ============================== */ +#sidebar { + width: var(--sidebar-width); + background: var(--bg-sidebar); + position: fixed; + top: var(--header-height); + left: 0; + height: calc(100vh - var(--header-height)); + overflow-y: auto; + overflow-x: hidden; + transition: width var(--transition-slow); + z-index: 900; + padding: 12px 8px; } -/* Infos entité */ -.entity-info { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.entity-logo { - width: 80px; - max-height: 40px; - object-fit: contain; -} - -.entity-name { - font-weight: 500; - color: var(--dark); - max-width: 150px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* Initiales utilisateur */ -.user-initials { - display: inline-flex; - align-items: center; - justify-content: center; - width: 38px; - height: 38px; - background: var(--primary); - color: white; - font-weight: 600; - font-size: 1rem; - border-radius: 10px; - text-transform: uppercase; - transition: var(--transition); -} - -.user-initials:hover { - transform: scale(1.05); - box-shadow: 0 4px 12px rgba(11, 94, 124, 0.3); -} - -/* ================================================= */ -/* SIDEBAR - Version corrigée */ -/* ================================================= */ - -.sidebar { - width: 260px; - background: linear-gradient(180deg, #1e2b3a 0%, #15232e 100%); - color: #fff; - position: fixed; - left: 0; - top: 0; - height: 100vh; - overflow-y: auto; - transition: all 0.3s; - z-index: 1000; - box-shadow: 2px 0 10px rgba(0,0,0,0.1); -} - -.sidebar-brand { - padding: 25px 20px; - display: flex; - align-items: center; - gap: 10px; - border-bottom: 1px solid rgba(255,255,255,0.1); - margin-bottom: 20px; -} - -.sidebar-brand img { - width: 40px; - height: 40px; -} - -.sidebar-brand span { - font-size: 1.2rem; - font-weight: 600; - color: white; - letter-spacing: 0.5px; +#sidebar::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light)); } +/* Sidebar Nav */ .sidebar-nav { - list-style: none; - padding: 0 10px; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } -.sidebar-nav .nav-item { - margin-bottom: 5px; +.sidebar-nav .nav-item { margin-bottom: 2px; } + +/* Parent links */ +.sidebar-nav > .nav-item > .nav-link { + display: flex; + align-items: center; + gap: 10px; + padding: 9px 10px; + border-radius: var(--radius-md); + color: rgba(255,255,255,0.72); + font-size: 0.82rem; + font-weight: 500; + text-decoration: none; + transition: all var(--transition-base); + position: relative; } -.sidebar-nav .nav-link { - display: flex; - align-items: center; - padding: 12px 15px; - color: rgba(255,255,255,0.8); - text-decoration: none; - border-radius: 10px; - transition: all 0.3s; - gap: 12px; - font-size: 0.95rem; +.sidebar-nav > .nav-item > .nav-link:hover, +.sidebar-nav > .nav-item > .nav-link.active { + background: rgba(255,255,255,0.10); + color: white; } -.sidebar-nav .nav-link i { - width: 24px; - font-size: 1.2rem; - color: rgba(255,255,255,0.6); - transition: all 0.3s; +.sidebar-nav > .nav-item > .nav-link i:first-child { + font-size: 1.1rem; + width: 22px; + text-align: center; + flex-shrink: 0; + opacity: 0.85; } -.sidebar-nav .nav-link:hover { - background: rgba(255,255,255,0.1); - color: white; +.sidebar-nav > .nav-item > .nav-link span { + font-family: 'Syne', sans-serif; + font-size: 0.8rem; + letter-spacing: 0.01em; + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.sidebar-nav .nav-link:hover i { - color: white; +.sidebar-nav > .nav-item > .nav-link span.active-main { + color: var(--color-accent); + font-weight: 700; } -.sidebar-nav .nav-link.active { - background: #0b5e7c; - color: white; - box-shadow: 0 4px 10px rgba(11,94,124,0.3); +.sidebar-nav > .nav-item > .nav-link .bi-chevron-down { + font-size: 0.65rem; + opacity: 0.6; + transition: transform var(--transition-base); + flex-shrink: 0; } -.sidebar-nav .nav-link.active i { - color: white; +/* Rotates chevron when open */ +.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down { + transform: rotate(180deg); + opacity: 1; } -/* Sous-menus */ -.nav-content { - list-style: none; - padding-left: 45px; - margin: 5px 0 10px 0; +/* Sub-menu (Level 1) */ +.sidebar-nav .nav-content { + list-style: none; + padding: 4px 0 4px 32px; + margin: 0; + background: rgba(0,0,0,0.15); + border-radius: var(--radius-sm); + margin-bottom: 2px; } -.nav-content li { - margin-bottom: 3px; +.sidebar-nav .nav-content li { margin-bottom: 1px; } + +.sidebar-nav .nav-content li a { + display: block; + padding: 7px 10px; + border-radius: var(--radius-sm); + color: rgba(255,255,255,0.55); + font-size: 0.78rem; + text-decoration: none; + transition: all var(--transition-fast); + border-left: 2px solid transparent; + position: relative; } -.nav-content a { - display: flex; - align-items: center; - padding: 8px 15px; - color: rgba(255,255,255,0.7); - text-decoration: none; - border-radius: 8px; - font-size: 0.9rem; - gap: 8px; +.sidebar-nav .nav-content li a:hover { + color: white; + background: rgba(255,255,255,0.07); + border-left-color: var(--color-accent); + padding-left: 14px; } -.nav-content a i { - font-size: 0.5rem; - color: rgba(255,255,255,0.5); +.sidebar-nav .nav-content li a.active-submenu { + color: var(--color-accent); + background: rgba(10,191,124,0.12); + border-left-color: var(--color-accent); + font-weight: 600; + padding-left: 14px; } -.nav-content a:hover { - background: rgba(255,255,255,0.05); - color: white; +/* Active indicator dot */ +.sidebar-nav .nav-content li a.active-submenu::after { + content: ''; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--color-accent); } -/* Styles pour le main content */ -.main { - margin-left: 260px; - padding: 100px 30px 30px 30px; - transition: margin-left 0.3s; - min-height: 100vh; - background: #f8fafc; +/* Separator label */ +.sidebar-section-label { + font-family: 'Syne', sans-serif; + font-size: 0.6rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(255,255,255,0.3); + padding: 12px 10px 4px; + margin-top: 4px; } -/* Style pour le breadcrumb */ -.breadcrumb { - background: transparent; - padding: 0; - margin: 0; +/* ============================== + MAIN CONTENT + ============================== */ +#main { + margin-left: var(--sidebar-width); + padding-top: calc(var(--header-height) + 16px); + min-height: 100vh; + transition: margin-left var(--transition-slow); + padding-bottom: 32px; } -.breadcrumb-item a { - color: #64748b; - text-decoration: none; - font-size: 0.95rem; +@media (max-width: 1199px) { + #main { margin-left: 0 !important; } + #sidebar { transform: translateX(-100%); } + #sidebar.sidebar-open { transform: translateX(0); } } -.breadcrumb-item a:hover { - color: #0b5e7c; -} - -.breadcrumb-item.active { - color: #0b5e7c; - font-weight: 500; -} - -/* Badge notifications */ -.badge-notification { - position: absolute; - top: 5px; - right: 5px; - background: #dc3545; - color: white; - border-radius: 50%; - padding: 2px 6px; - font-size: 0.7rem; - min-width: 18px; - text-align: center; -} - -/* Logo entité */ -.entity-logo { - height: 35px; - width: auto; - max-width: 100px; - object-fit: contain; -} - -.entity-name { - font-weight: 500; - color: #1e293b; - margin-left: 8px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 150px; -} - -/* Initiales utilisateur */ -.user-initials { - display: flex; - align-items: center; - justify-content: center; - width: 38px; - height: 38px; - background: #0b5e7c; - color: white; - font-weight: 600; - border-radius: 10px; - font-size: 1rem; - text-transform: uppercase; -} - -/* Mode test */ -.test-badge { - background: #ffc107; - color: #1e293b; - padding: 4px 12px; - border-radius: 20px; - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 0.5px; -} - -/* Scrollmenu (si présent dans la page) */ +/* Scroll Menu */ .scrollmenu { - background: white; - border-radius: 40px; - padding: 4px; - display: inline-flex; - border: 1px solid #e2e8f0; - margin-bottom: 25px; + display: flex; + gap: 4px; + overflow-x: auto; + padding: 8px 16px; + background: var(--bg-surface); + border-radius: var(--radius-md); + box-shadow: var(--shadow-xs); + margin: 0 16px 16px; + scrollbar-width: none; } +.scrollmenu::-webkit-scrollbar { display: none; } .scrollmenu a { - padding: 8px 24px; - border-radius: 30px; - color: #64748b; - text-decoration: none; - transition: all 0.2s; - font-weight: 500; + white-space: nowrap; + padding: 6px 14px; + border-radius: var(--radius-full); + font-size: 0.78rem; + font-weight: 500; + color: var(--text-secondary); + text-decoration: none; + transition: all var(--transition-fast); + border: 1px solid transparent; + flex-shrink: 0; +} + +.scrollmenu a:hover { + background: var(--color-primary-ghost); + color: var(--color-primary); + border-color: rgba(26,107,74,0.2); } -.scrollmenu a:hover, .scrollmenu a.active { - background: #0b5e7c; - color: white; + background: var(--color-primary); + color: white; + box-shadow: var(--shadow-primary); } - -/* Quand la sidebar est réduite */ -.sidebar-collapsed .main { - margin-left: 80px; +/* Page content wrapper */ +.page-content { + padding: 0 16px; } - -/* 5. Cartes et conteneurs */ -.card { - background: var(--card-bg); - border: none; - border-radius: var(--border-radius); - box-shadow: var(--box-shadow); - transition: transform 0.2s, box-shadow 0.2s; +/* Fixed header within main */ +.fixed-div { + position: sticky; + top: var(--header-height); + z-index: 500; + background: var(--bg-base); + padding-bottom: 4px; } -.card:hover { - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); +/* Section */ +.section { padding: 0; } + +/* ============================== + CONTEXT DRAWER (Barre Latérale D) + ============================== */ + +/* Trigger button */ +.btn-info-context { + position: fixed; + right: 0; + top: 50%; + transform: translateY(-50%); + z-index: 1100; + background: var(--color-primary); + color: white; + border: none; + border-radius: var(--radius-lg) 0 0 var(--radius-lg); + padding: 12px 10px; + cursor: pointer; + box-shadow: var(--shadow-md); + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + transition: all var(--transition-base); +} +.btn-info-context:hover { + background: var(--color-primary-light); + padding-left: 14px; +} +.btn-info-context i { font-size: 16px; } + +/* Context Drawer Panel */ +#barre_laterale_d { + position: fixed; + right: 0; + top: var(--header-height); + width: var(--context-width) !important; + height: calc(100vh - var(--header-height)); + background: var(--bg-surface); + border-left: 1px solid var(--border-light); + box-shadow: var(--shadow-xl); + z-index: 1050; + overflow-y: auto; + overflow-x: hidden; + padding: 0 !important; + display: none; + transition: transform var(--transition-slow); } -/* 6. Barre de contexte (Drawer) */ -.btn-context-toggle { - position: fixed; - right: 20px; - top: 50%; - transform: translateY(-50%); - z-index: 1040; - background: var(--primary); - color: white; - border: none; - width: 48px; - height: 48px; - border-radius: 30px 0 0 30px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 0.2rem; - box-shadow: -4px 4px 15px rgba(0,0,0,0.1); - cursor: pointer; - transition: all 0.3s; - font-size: 1.1rem; - border-right: none; +#barre_laterale_d .drawer-inner { + padding: 16px; } -.btn-context-toggle:hover { - background: #094c66; - right: 15px; -} - -.context-drawer { - position: fixed; - top: 0; - right: -450px; /* Caché par défaut */ - width: 400px; - height: 100vh; - background: white; - box-shadow: -5px 0 30px rgba(0,0,0,0.1); - z-index: 1050; - transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); - border-left: 1px solid var(--border-color); -} - -.context-drawer.show { - right: 0; -} - -.context-drawer-content { - display: flex; - flex-direction: column; - height: 100%; -} - -.drawer-header { - padding: 1.2rem 1.5rem; - border-bottom: 1px solid var(--border-color); - display: flex; - align-items: center; - justify-content: space-between; -} - -.drawer-title { - font-weight: 600; - color: var(--primary); - margin: 0; - font-size: 1.1rem; -} - -.drawer-body { - flex: 1; - overflow-y: auto; - padding: 1.5rem; - display: flex; - flex-direction: column; - gap: 1.5rem; +/* Drawer Close Button */ +.btn-cacher-contexte { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + padding: 12px; + background: var(--bg-sidebar); + color: white; + border: none; + cursor: pointer; + font-size: 0.8rem; + font-family: 'Syne', sans-serif; + font-weight: 600; + letter-spacing: 0.04em; + transition: background var(--transition-fast); + margin-bottom: 16px; + border-radius: 0; } +.btn-cacher-contexte:hover { background: var(--color-primary); } +/* Context Cards */ .context-card { - background: var(--light); - border-radius: 16px; - overflow: hidden; - border: 1px solid var(--border-color); + background: var(--bg-surface-2); + border: 1px solid var(--border-light); + border-radius: var(--radius-md); + padding: 12px; + margin-bottom: 10px; + transition: box-shadow var(--transition-fast); +} +.context-card:hover { box-shadow: var(--shadow-sm); } + +.context-card-label { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted); + margin-bottom: 6px; + display: flex; + align-items: center; + gap: 6px; +} +.context-card-label i { color: var(--color-primary); } + +.context-card-label a { + color: var(--color-primary); + text-decoration: none; + font-weight: 700; + margin-left: auto; + font-size: 0.7rem; +} +.context-card-label a:hover { text-decoration: underline; } + +.context-btn { + width: 100%; + background: white; + border: 1px solid var(--border-medium); + border-radius: var(--radius-sm); + padding: 7px 10px; + text-align: left; + font-size: 0.78rem; + font-weight: 600; + color: var(--text-primary); + cursor: pointer; + transition: all var(--transition-fast); + display: flex; + align-items: center; + gap: 8px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.context-btn:hover { + background: var(--color-primary-ghost); + border-color: var(--color-primary-light); + color: var(--color-primary); +} +.context-btn i { color: var(--color-primary); flex-shrink: 0; } + +.context-btn.btn-primary-context { + background: var(--color-primary); + border-color: var(--color-primary); + color: white; +} +.context-btn.btn-primary-context:hover { + background: var(--color-primary-light); + border-color: var(--color-primary-light); + color: white; +} +.context-btn.btn-primary-context i { color: rgba(255,255,255,0.8); } + +/* Stats row in context */ +.context-stats { + display: flex; + gap: 4px; + margin-bottom: 10px; +} +.context-stat { + flex: 1; + background: var(--bg-surface-2); + border: 1px solid var(--border-light); + border-radius: var(--radius-sm); + padding: 8px 4px; + text-align: center; +} +.context-stat-value { + font-family: 'Syne', sans-serif; + font-size: 0.95rem; + font-weight: 800; + color: var(--color-primary); +} +.context-stat-label { + font-size: 0.58rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; } -.context-card-header { - background: rgba(0,0,0,0.02); - padding: 0.6rem 1rem; - font-weight: 600; - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 0.3px; - color: var(--secondary); - border-bottom: 1px solid var(--border-color); +/* Recent Policies List */ +.recent-policies-title { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted); + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; +} +.recent-policies-title i { color: var(--color-primary); } + +.policy-item { + padding: 7px 10px; + border-radius: var(--radius-sm); + border: 1px solid var(--border-light); + margin-bottom: 4px; + background: white; + transition: all var(--transition-fast); + font-size: 0.75rem; + color: var(--text-secondary); + text-decoration: none; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.policy-item:hover { + background: var(--color-primary-ghost); + color: var(--color-primary); + border-color: rgba(26,107,74,0.2); + padding-left: 14px; } -.context-card-header i { - margin-right: 0.5rem; - color: var(--primary); +/* Photo container */ +.photo-container { + text-align: center; + margin-bottom: 10px; +} +.photo-container img { + width: 80px; + height: 80px; + object-fit: cover; + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + border: 3px solid white; + transition: transform var(--transition-base); + cursor: pointer; +} +.photo-container img:hover { transform: scale(1.05); } + +/* Password change link */ +.change-pwd-link { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border-radius: var(--radius-md); + background: var(--bg-surface-2); + border: 1px dashed var(--border-medium); + text-decoration: none; + color: var(--text-secondary); + font-size: 0.78rem; + transition: all var(--transition-fast); + margin-bottom: 10px; +} +.change-pwd-link:hover { + background: var(--color-primary-ghost); + border-color: var(--color-primary-light); + color: var(--color-primary); +} +.change-pwd-link img { width: 22px; } + +/* Devis mode banner */ +.mode-devis-banner { + background: linear-gradient(135deg, #7209b7, #f72585); + color: white; + text-align: center; + font-family: 'Syne', sans-serif; + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.08em; + padding: 8px; + border-radius: var(--radius-sm); + margin-bottom: 10px; + text-transform: uppercase; } -.context-card-body { - padding: 1rem; +/* ============================== + TABLES (DataTables) + ============================== */ +.table-container { + background: white; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + overflow: hidden; + border: 1px solid var(--border-light); } -.context-link { - font-weight: 600; - color: var(--primary); - text-decoration: none; - font-size: 1rem; -} - -.context-link:hover { - text-decoration: underline; -} - -.family-stats { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-top: 0.5rem; -} - -.family-stats .badge { - background: white !important; - color: var(--dark) !important; - border: 1px solid var(--border-color); - font-weight: 400; - padding: 0.4rem 0.6rem; -} - -.beneficiary-photo { - width: 60px; - height: 60px; - object-fit: cover; - border: 2px solid white; - box-shadow: 0 4px 8px rgba(0,0,0,0.05); - cursor: pointer; -} - -/* 7. Tableaux modernes */ .table { - --bs-table-bg: transparent; - border-collapse: separate; - border-spacing: 0 8px; - margin-top: -8px; + background: white !important; + border-collapse: separate; + border-spacing: 0; + width: 100%; + font-size: 0.82rem; + --bs-table-bg: transparent !important; + --bs-table-color: var(--text-primary) !important; + --bs-table-striped-color: var(--text-primary) !important; } -.table thead th { - background: transparent; - color: var(--secondary); - font-weight: 500; - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 0.3px; - border: none; - padding: 0.75rem 1rem; +.table thead tr { + background: var(--color-primary) !important; + color: white !important; } +.table > thead { + background-color: var(--color-primary) !important; +} + +.table th { + background: var(--color-primary) !important; + color: white !important; + font-family: 'Syne', sans-serif; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + padding: 12px 14px !important; + border: none !important; + white-space: nowrap; +} +.table th:hover { background: var(--color-primary-dark) !important; } + +.table td { + padding: 10px 14px !important; + border-bottom: 1px solid var(--border-light) !important; + border-top: none !important; + vertical-align: middle; + color: var(--text-primary); +} +.table td:hover { font-style: normal !important; } + +.table tr:last-child td { border-bottom: none !important; } + .table tbody tr { - background: white; - border-radius: 16px; - box-shadow: 0 2px 8px rgba(0,0,0,0.02); - transition: all 0.2s; + transition: all var(--transition-fast); } - .table tbody tr:hover { - box-shadow: 0 8px 20px rgba(0,0,0,0.06); - transform: translateY(-2px); + background: var(--color-primary-ghost) !important; + font-style: normal !important; +} +.table tbody tr:hover td:first-child { + border-left: 3px solid var(--color-accent); } -.table tbody td { - padding: 1rem 1rem; - border: none; - vertical-align: middle; +/* Status Badges */ +.badge-status { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 10px; + border-radius: var(--radius-full); + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; +} +.badge-status::before { + content: ''; + width: 5px; + height: 5px; + border-radius: 50%; + background: currentColor; +} +.badge-valide { background: rgba(46,196,182,0.12); color: var(--color-success); } +.badge-urgent { background: rgba(230,57,70,0.12); color: var(--color-urgent); } +.badge-attente { background: rgba(244,162,97,0.12); color: var(--color-warning); } +.badge-info { background: rgba(58,134,255,0.12); color: var(--color-info); } +.badge-inactive { background: rgba(108,117,125,0.12); color: var(--color-neutral); } + +/* ============================== + CARDS + ============================== */ +.card { + background: var(--bg-surface); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xs); + transition: box-shadow var(--transition-base); +} +.card:hover { box-shadow: var(--shadow-md); } + +.card-header { + background: transparent; + border-bottom: 1px solid var(--border-light); + padding: 14px 18px; + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 0.88rem; } -.table tbody td:first-child { - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; -} - -.table tbody td:last-child { - border-top-right-radius: 16px; - border-bottom-right-radius: 16px; -} - -/* Badges de statut */ -.badge-statut { - padding: 0.35rem 1rem; - border-radius: 30px; - font-weight: 500; - font-size: 0.75rem; - display: inline-block; -} - -.badge-statut.valide { - background: #d4edda; - color: #155724; -} - -.badge-statut.rejete { - background: #f8d7da; - color: #721c24; -} - -.badge-statut.attente { - background: #fff3cd; - color: #856404; -} - -/* 8. Boutons personnalisés */ +/* ============================== + BUTTONS + ============================== */ .btn { - border-radius: 12px; - padding: 0.5rem 1.2rem; - font-weight: 500; - transition: all 0.2s; + border-radius: var(--radius-sm) !important; + font-size: 0.8rem; + font-weight: 600; + font-family: 'DM Sans', sans-serif; + padding: 7px 16px; + transition: all var(--transition-fast); + border: none; + display: inline-flex; + align-items: center; + gap: 6px; } .btn-primary { - background: var(--primary); - border-color: var(--primary); + background: var(--color-primary) !important; + color: white !important; + box-shadow: 0 2px 8px rgba(26,107,74,0.3); } - .btn-primary:hover { - background: #094c66; - border-color: #094c66; - transform: translateY(-2px); - box-shadow: 0 8px 16px rgba(11, 94, 124, 0.2); + background: var(--color-primary-light) !important; + box-shadow: 0 4px 16px rgba(26,107,74,0.4); + transform: translateY(-1px); } -.btn-outline-primary { - border-color: var(--primary); - color: var(--primary); +.btn-info { + background: var(--color-info) !important; + color: white !important; +} +.btn-info:hover { + background: #2563eb !important; + transform: translateY(-1px); } -.btn-outline-primary:hover { - background: var(--primary); - color: white; - transform: translateY(-2px); +.btn-warning { + background: var(--color-urgent) !important; + color: white !important; } -/* 9. Formulaires */ +.btn-default, .btn-outline-secondary { + background: white; + border: 1px solid var(--border-medium) !important; + color: var(--text-secondary) !important; +} +.btn-default:hover, .btn-outline-secondary:hover { + border-color: var(--color-primary-light) !important; + color: var(--color-primary) !important; + background: var(--color-primary-ghost); +} + +.btn-sm { padding: 5px 12px; font-size: 0.75rem; } + +/* ============================== + FORM ELEMENTS + ============================== */ .form-control, .form-select { - border-radius: 12px; - border: 1.5px solid #e9ecef; - padding: 0.5rem 1rem; - transition: all 0.2s; + border: 1px solid var(--border-medium); + border-radius: var(--radius-sm); + font-size: 0.82rem; + color: var(--text-primary); + height: auto !important; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } - .form-control:focus, .form-select:focus { - border-color: var(--primary); - box-shadow: 0 0 0 4px rgba(11, 94, 124, 0.1); + border-color: var(--color-primary-light); + box-shadow: 0 0 0 3px rgba(26,107,74,0.1); + outline: none; } -/* 10. Modals */ +td input[readonly], td select[readonly], +td input[disabled], td select[disabled] { + background: #f1f5f9 !important; + font-weight: 600; + color: var(--text-secondary); +} + +/* ============================== + LEGENDS & FIELDSETS + ============================== */ +legend, #chemin, +fieldset legend, form legend { + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important; + color: white; + font-family: 'Syne', sans-serif; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.04em; + padding: 6px 14px; + border-radius: var(--radius-sm); + display: block; +} + +/* ============================== + MODALS + ============================== */ .modal-content { - border: none; - border-radius: 24px; - box-shadow: 0 30px 60px rgba(0,0,0,0.2); + border: none; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xl); + overflow: hidden; } .modal-header { - background: white; - color: var(--dark); - border-bottom: 1px solid var(--border-color); - padding: 1.2rem 1.5rem; + background: var(--color-primary) !important; + color: white !important; + padding: 16px 20px; + border-bottom: none; } -.modal-header .close { - background: transparent; - color: var(--secondary); - border: none; - font-size: 1.5rem; +.modal-title { + font-family: 'Syne', sans-serif; + font-size: 0.92rem !important; + font-weight: 700; } -/* ================================================= */ -/* AMÉLIORATIONS SPÉCIFIQUES POUR LES MODALS */ -/* ================================================= */ +.modal-header .close, .modal-header .btn-close { + background: rgba(255,255,255,0.2) !important; + color: white !important; + border: 1px solid rgba(255,255,255,0.3) !important; + border-radius: var(--radius-sm); + opacity: 1; + transition: background var(--transition-fast); + font-size: 0.75rem; + padding: 4px 10px; +} +.modal-header .close:hover { background: rgba(255,255,255,0.35) !important; } -/* Animation d'entrée des modals */ -.modal.fade .modal-dialog { - transform: scale(0.95); - transition: transform 0.2s ease-out, opacity 0.2s ease-out; - opacity: 0; +.modal-body { padding: 20px; } + +.modal-footer { + border-top: 1px solid var(--border-light); + padding: 12px 20px; + gap: 8px; } -.modal.show .modal-dialog { - transform: scale(1); - opacity: 1; +/* Side Panel Modal (optional modern variant) */ +.modal.side-panel .modal-dialog { + position: fixed; + top: 0; right: 0; + margin: 0; + max-width: 480px; + width: 100%; + height: 100%; +} +.modal.side-panel .modal-content { + height: 100%; + border-radius: 0; } -/* Style des boutons dans les modals */ -.modal-footer .btn-light { - background: white; - border: 1px solid var(--border-color); - border-radius: 10px; - padding: 0.6rem 1.5rem; - font-weight: 500; +/* ============================== + NAV TABS + ============================== */ +.nav-tabs { + border-bottom: 2px solid var(--border-light); + gap: 4px; +} +.nav-tabs .nav-link { + color: var(--text-secondary); + border: none; + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + padding: 8px 16px; + font-size: 0.8rem; + font-weight: 500; + transition: all var(--transition-fast); +} +.nav-tabs .nav-link:hover { + color: var(--color-primary); + background: var(--color-primary-ghost); +} +.nav-tabs .nav-item.show .nav-link, +.nav-tabs .nav-link.active { + background: var(--color-primary) !important; + color: white !important; + font-family: 'Syne', sans-serif; + font-weight: 700; + border: none; } -.modal-footer .btn-light:hover { - background: var(--light); - border-color: var(--secondary); +/* ============================== + ALERTS & TOASTS + ============================== */ +.alert { + border: none; + border-radius: var(--radius-md); + font-size: 0.82rem; + border-left: 4px solid; +} +.alert-success { border-color: var(--color-success); background: rgba(46,196,182,0.1); } +.alert-danger { border-color: var(--color-urgent); background: rgba(230,57,70,0.1); } +.alert-warning { border-color: var(--color-warning); background: rgba(244,162,97,0.1); } +.alert-info { border-color: var(--color-info); background: rgba(58,134,255,0.1); } + +/* ============================== + FOOTER (inside context bar) + ============================== */ +footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; } + +/* ============================== + MICRO-INTERACTIONS & UTILS + ============================== */ +.hover-shadow-sm:hover { + box-shadow: var(--shadow-md) !important; + transform: translateY(-2px); + transition: all var(--transition-base); } -/* Zone de contenu des messages */ -.messagerie-container { - min-height: 200px; - max-height: 60vh; - overflow-y: auto; +.hover-scale:hover { + transform: scale(1.04); + box-shadow: var(--shadow-md); + transition: all var(--transition-base); } -/* Style des messages individuels (si chargés dynamiquement) */ -.message-item { - padding: 1rem; - border-bottom: 1px solid var(--border-color); - transition: background 0.2s; +.transition { transition: all var(--transition-base); } + +/* Skeleton Loader */ +.skeleton { + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; + border-radius: var(--radius-sm); +} +@keyframes skeleton-loading { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } } -.message-item:hover { - background: var(--primary-light); +/* AJAX Loading overlay */ +.ajax-loading { + position: relative; + pointer-events: none; + opacity: 0.6; +} +.ajax-loading::after { + content: ''; + position: absolute; + inset: 0; + background: rgba(255,255,255,0.6); + border-radius: inherit; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; } -.message-item.unread { - background: #f0f7ff; - border-left: 3px solid var(--primary); +/* Pulse animation for notifications */ +@keyframes pulse-badge { + 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.4); } + 50% { box-shadow: 0 0 0 5px rgba(230,57,70,0); } +} +.badge-number { animation: pulse-badge 2s infinite; } + +/* Mode Test Banner */ +.mode-test-active #header { + background: linear-gradient(90deg, #7b2d00, #c0392b) !important; +} +.mode-test-banner { + background: repeating-linear-gradient( + 45deg, #ffd700, #ffd700 10px, #000 10px, #000 20px + ); + color: white; + text-align: center; + font-weight: 800; + font-size: 0.7rem; + padding: 3px; + letter-spacing: 0.15em; } -.message-date { - font-size: 0.8rem; - color: var(--secondary); +/* Filter option */ +.filter-option-inner-inner { + background-color: #f1f5f9 !important; } -/* ================================================= */ -/* AMÉLIORATIONS POUR LE SCROLLMENU */ -/* ================================================= */ - -.scrollmenu-wrapper { - margin-bottom: 2rem; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: thin; - padding-bottom: 0.5rem; +/* h6 links in context */ +h6 a { + text-decoration: none; + color: var(--color-primary); + font-weight: 600; + border-bottom: 1px dashed var(--color-primary); + transition: all var(--transition-fast); +} +h6 a:hover { + background: var(--color-primary); + color: white; + border-bottom-color: transparent; + padding: 1px 4px; + border-radius: 3px; } -.scrollmenu { - display: inline-flex; - background: white; - border-radius: 50px; - padding: 0.3rem; - gap: 0.2rem; - border: 1px solid var(--border-color); - box-shadow: 0 2px 8px rgba(0,0,0,0.02); - min-width: min-content; +/* Textarea in context */ +.mb-2 textarea { + font-size: 0.78rem; + width: 100%; + border: 1px solid var(--border-medium); + border-radius: var(--radius-sm); + padding: 8px; } -.scrollmenu-item { - padding: 0.6rem 1.5rem; - border-radius: 40px; - font-size: 0.9rem; - font-weight: 500; - color: var(--secondary); - text-decoration: none; - transition: all 0.2s; - white-space: nowrap; +/* .sr-only (keep accessible but hidden visually) */ +.sr-only { + position: absolute; + width: 1px; height: 1px; + padding: 0; margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + border-width: 0; } -.scrollmenu-item:hover { - background: var(--primary-light); - color: var(--primary); +/* ============================== + RESPONSIVE + ============================== */ +@media (max-width: 768px) { + #sidebar { width: var(--sidebar-width); } + #barre_laterale_d { width: 100% !important; } + .scrollmenu { margin: 0 8px 8px; } + .page-content { padding: 0 8px; } } - -.scrollmenu-item.active { - background: var(--primary); - color: white; -} - -/* ================================================= */ -/* ZONE DES INPUTS CACHÉS (invisible mais présents) */ -/* ================================================= */ - -.hidden-inputs { - display: none; -} - -/* Alternative pour garder les inputs accessibles mais invisibles */ -.hidden-inputs input[type="hidden"] { - display: none; -} \ No newline at end of file