From df6a4896d3f9da8b7368742865baa3aea5f38147 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 11:01:58 +0000 Subject: [PATCH] d --- Bootstrap_new/css/theme-modern.css | 515 +++++++++++++++-------------- 1 file changed, 263 insertions(+), 252 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 40b1dded..261179c4 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,306 +1,317 @@ -/* ============================================================ - INTER SANTÉ — THEME MODERN (STRATEGIC UX EDITION) - SaaS Premium UI v2025 - High-End HealthTech B2B - ============================================================ */ +/* ================================================== + INTER SANTÉ — GLOBAL HEALTH DESIGN SYSTEM 2026 + Full Harmonized Edition + ================================================== */ -/* === 1. TYPOGRAPHIE & FONT-FACE === */ -@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap'); +/* ================================ + FONTS +================================ */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&display=swap'); +/* ================================ + CSS VARIABLES +================================ */ :root { - /* --- Palette Chromatique "Trust & Health" --- */ - --color-primary: #1a6b4a; /* Vert émeraude profond (Stabilité) */ - --color-primary-light: #25a06e; - --color-primary-dark: #114532; - --color-primary-ghost: rgba(26, 107, 74, 0.08); - --color-accent: #0abf7c; /* Cyan/Vert médical */ - - /* --- Status Colors (Clarté décisionnelle) --- */ - --color-success: #2ec4b6; /* Validé / Payé */ - --color-warning: #f4a261; /* En attente / À compléter */ - --color-urgent: #e63946; /* Rejeté / Anomalie / Retard */ - --color-info: #3a86ff; /* Information / Courtier */ - /* --- Neutres & Surfaces --- */ - --bg-app: #f8fafc; /* Fond très clair "Lumière" */ - --bg-card: #ffffff; - --text-main: #0f172a; /* Bleu-noir pour contraste maximal */ - --text-muted: #64748b; - --border-light: #e2e8f0; + /* ===== BRAND ===== */ + --color-primary: #1463FF; + --color-primary-light: #4C8DFF; + --color-primary-dark: #0E47B5; + --color-accent: #20C997; - /* --- Design Tokens --- */ - --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); - --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03); - --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); - --radius-lg: 14px; - --radius-md: 8px; - --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); - --transition-smooth: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); + --color-success: #22C55E; + --color-urgent: #EF4444; + --color-warning: #F59E0B; + --color-info: #3B82F6; + --color-neutral: #64748B; + + /* ===== BACKGROUNDS ===== */ + --bg-base: #F7F9FC; + --bg-surface: #FFFFFF; + --bg-surface-2: #F1F5F9; + --bg-sidebar: #0F172A; + --bg-header: rgba(255,255,255,0.85); + + /* ===== TEXT ===== */ + --text-primary: #0F172A; + --text-secondary: #64748B; + --text-muted: #94A3B8; + --text-inverse: #FFFFFF; + + /* ===== BORDERS ===== */ + --border-light: #E2E8F0; + --border-medium: #CBD5E1; + + /* ===== RADIUS ===== */ + --radius-sm: 8px; + --radius-md: 14px; + --radius-lg: 20px; + --radius-xl: 28px; + --radius-full: 9999px; + + /* ===== SHADOWS ===== */ + --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); + --shadow-sm: 0 4px 12px rgba(15,23,42,0.05); + --shadow-md: 0 8px 24px rgba(15,23,42,0.08); + --shadow-lg: 0 16px 40px rgba(15,23,42,0.12); + --shadow-glow: 0 0 0 3px rgba(20,99,255,0.15); + + --transition-fast: 0.15s ease; + --transition-base: 0.25s cubic-bezier(.4,0,.2,1); + --transition-slow: 0.4s cubic-bezier(.4,0,.2,1); + + --sidebar-width: 260px; + --sidebar-collapsed: 72px; + --header-height: 72px; + --context-width: 360px; } -/* === 2. RESET & FONDATION === */ +/* ================================ + GLOBAL RESET +================================ */ +*, *::before, *::after { box-sizing: border-box; } + +html { font-size: 14px; scroll-behavior: smooth; } + body { - background-color: var(--bg-app) !important; - color: var(--text-main); - font-family: 'DM Sans', sans-serif !important; + font-family: 'Inter', sans-serif; + background: var(--bg-base); + color: var(--text-primary); + line-height: 1.6; -webkit-font-smoothing: antialiased; - letter-spacing: -0.01em; } -h1, h2, h3, .logo-text { - font-family: 'Syne', sans-serif; +h1,h2,h3,h4,h5,h6, +.fw-bold,.fw-semibold,.nav-link span { + font-family: 'Plus Jakarta Sans', sans-serif; +} + +/* ================================ + HEADER +================================ */ +#header { + height: var(--header-height); + backdrop-filter: blur(14px); + background: var(--bg-header); + border-bottom: 1px solid var(--border-light); + padding: 0 1.5rem; + z-index: 1000; +} + +#header .logo span { font-weight: 700; - color: var(--color-primary-dark); + font-size: 1.1rem; + color: var(--color-primary); } -/* === 3. PATTERN : NAVIGATION (SIDEBAR) === */ -.sidebar { - background: white !important; - border-right: 1px solid var(--border-light) !important; - box-shadow: none !important; - width: 260px; +/* ================================ + SIDEBAR +================================ */ +#sidebar { + width: var(--sidebar-width); + background: var(--bg-sidebar); + position: fixed; + top: var(--header-height); + left: 0; + height: calc(100vh - var(--header-height)); + padding: 18px 12px; + overflow-y: auto; } -.sidebar-nav .nav-link { - color: var(--text-muted) !important; - font-weight: 500; +.sidebar-nav { list-style: none; padding: 0; margin: 0; } + +.sidebar-nav > .nav-item > .nav-link { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; border-radius: var(--radius-md); - margin: 4px 15px; - padding: 10px 15px; + color: rgba(255,255,255,0.75); + font-weight: 500; + transition: var(--transition-base); +} + +.sidebar-nav > .nav-item > .nav-link:hover { + background: rgba(255,255,255,0.08); + color: white; +} + +.sidebar-nav > .nav-item > .nav-link.active { + background: rgba(20,99,255,0.2); + color: white; + box-shadow: var(--shadow-glow); +} + +/* Submenu */ +.sidebar-nav .nav-content { + list-style: none; + padding-left: 28px; +} + +.sidebar-nav .nav-content li a { + display: block; + padding: 8px 10px; + border-radius: var(--radius-sm); + color: rgba(255,255,255,0.6); + font-size: 0.8rem; transition: var(--transition-fast); } -.sidebar-nav .nav-link i { - font-size: 1.25rem; - color: var(--text-muted); +.sidebar-nav .nav-content li a:hover, +.sidebar-nav .nav-content li a.active-submenu { + color: var(--color-accent); + background: rgba(255,255,255,0.08); } -.sidebar-nav .nav-link:hover, -.sidebar-nav .nav-link.active-main { - background-color: var(--color-primary-ghost) !important; - color: var(--color-primary) !important; +/* ================================ + MAIN +================================ */ +#main { + margin-left: var(--sidebar-width); + padding-top: calc(var(--header-height) + 20px); + padding-bottom: 40px; + min-height: 100vh; } -.sidebar-nav .nav-link.active-main { - position: relative; -} - -.sidebar-nav .nav-link.active-main::before { - content: ""; - position: absolute; - left: -15px; - top: 15%; - height: 70%; - width: 4px; - background: var(--color-primary); - border-radius: 0 4px 4px 0; -} - -/* === 4. PATTERN : DATA CARDS & KPI === */ +/* ================================ + CARDS +================================ */ .card { - background: var(--bg-card); - border: 1px solid var(--border-light) !important; - border-radius: var(--radius-lg) !important; - box-shadow: var(--shadow-sm) !important; - transition: var(--transition-smooth); + background: var(--bg-surface); + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); + box-shadow: var(--shadow-sm); + transition: var(--transition-base); } .card:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-md) !important; + transform: translateY(-3px); + box-shadow: var(--shadow-md); } -.kpi-card { - border-left: 4px solid var(--color-primary) !important; -} - -.kpi-value { - font-size: 1.8rem; - font-weight: 800; - font-family: 'Syne', sans-serif; - color: var(--text-main); -} - -/* === 5. PATTERN : TABLEAUX ÉPURÉS (STRIPE STYLE) === */ -.table-responsive { - border-radius: var(--radius-lg); - background: white; +.card-header { + border-bottom: 1px solid var(--border-light); + padding: 16px 20px; + font-weight: 600; } +/* ================================ + TABLES +================================ */ .table { - margin-bottom: 0; + background: var(--bg-surface); + border-collapse: separate; + border-spacing: 0; + font-size: 0.85rem; } -.table thead th { - background-color: #f8fafc !important; +.table th { + background: var(--bg-surface); color: var(--text-muted); font-weight: 600; - font-size: 0.75rem; - text-transform: uppercase; - padding: 16px !important; - border-bottom: 1px solid var(--border-light) !important; -} - -.table tbody tr { - transition: var(--transition-fast); -} - -.table tbody tr:hover { - background-color: #f1f5f9 !important; -} - -.table td { - padding: 16px !important; - vertical-align: middle; - border-bottom: 1px solid #f1f5f9 !important; -} - -/* === 6. PATTERN : CONTEXTUAL SIDE DRAWER (BARRE DROITE) === */ -#barre_laterale_d { - position: fixed; - top: 0; - right: -350px; - width: 350px; - height: 100vh; - background: white; - z-index: 1050; - border-left: 1px solid var(--border-light); - box-shadow: var(--shadow-lg); - transition: var(--transition-smooth); - padding: 24px; -} - -#barre_laterale_d.active { - right: 0; -} - -.info-box { - background: #f1f5f9; - border-radius: var(--radius-md); - padding: 12px; - margin-bottom: 12px; -} - -.info-box label { - display: block; - font-size: 0.65rem; - font-weight: 700; - text-transform: uppercase; - color: var(--text-muted); - margin-bottom: 4px; -} - -.info-box span { - font-weight: 600; - color: var(--color-primary-dark); -} - -/* === 7. PATTERN : SKELETON LOADING ANIMATION === */ -.skeleton { - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; - border-radius: 4px; -} - -@keyframes skeleton-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* === 8. PATTERN : BULK ACTIONS BAR (FLOATING) === */ -.bulk-actions-bar { - position: fixed; - bottom: 30px; - left: 50%; - transform: translateX(-50%); - background: var(--text-main); - color: white; - padding: 12px 24px; - border-radius: 50px; - display: flex; - align-items: center; - gap: 20px; - box-shadow: var(--shadow-lg); - z-index: 2000; - animation: slideUp 0.3s ease-out; -} - -@keyframes slideUp { - from { bottom: -100px; } - to { bottom: 30px; } -} - -/* === 9. PATTERN : COMMAND BAR (CMD+K) === */ -.command-bar-wrapper { - background: rgba(15, 23, 42, 0.8); - backdrop-filter: blur(8px); - position: fixed; - inset: 0; - z-index: 9999; - display: flex; - justify-content: center; - padding-top: 100px; -} - -.command-bar { - width: 600px; - background: white; - border-radius: var(--radius-lg); - overflow: hidden; - box-shadow: var(--shadow-lg); -} - -.command-input { - width: 100%; - border: none; - padding: 20px; - font-size: 1.1rem; - outline: none; border-bottom: 1px solid var(--border-light); } -/* === 10. BOUTONS & MICRO-INTERACTIONS === */ +.table td { + border-bottom: 1px solid var(--border-light); +} + +.table tbody tr:hover { + background: rgba(20,99,255,0.05); +} + +/* ================================ + BUTTONS +================================ */ +.btn { + border-radius: var(--radius-md); + font-weight: 600; + font-size: 0.85rem; +} + .btn-primary { - background: var(--color-primary) !important; - border: none !important; - border-radius: var(--radius-md) !important; - padding: 10px 24px !important; - font-weight: 600 !important; - box-shadow: 0 4px 6px rgba(26, 107, 74, 0.2) !important; - transition: var(--transition-fast) !important; + background: var(--color-primary); + border: none; + color: white; } .btn-primary:hover { - background: var(--color-primary-light) !important; + background: var(--color-primary-dark); transform: translateY(-1px); } -.badge-saas { - padding: 6px 12px; - border-radius: 20px; - font-weight: 700; +/* ================================ + FORMS +================================ */ +.form-control, .form-select { + border-radius: var(--radius-sm); + border: 1px solid var(--border-medium); +} + +.form-control:focus, +.form-select:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(20,99,255,0.15); +} + +/* ================================ + BADGES +================================ */ +.badge-status { + padding: 4px 10px; + border-radius: var(--radius-full); font-size: 0.7rem; - text-transform: uppercase; + font-weight: 600; } -.status-paid { background: #dcfce7; color: #166534; } -.status-urgent { background: #fee2e2; color: #991b1b; } -.status-warning { background: #fef9c3; color: #854d0e; } +.badge-valide { background: rgba(34,197,94,0.1); color: var(--color-success); } +.badge-urgent { background: rgba(239,68,68,0.1); color: var(--color-urgent); } +.badge-attente { background: rgba(245,158,11,0.1); color: var(--color-warning); } +.badge-info { background: rgba(59,130,246,0.1); color: var(--color-info); } -/* TRUST BADGE (Pattern de confiance) */ -.trust-badge { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.7rem; - color: var(--color-primary); - background: var(--color-primary-ghost); - padding: 4px 10px; - border-radius: 100px; - font-weight: 600; +/* ================================ + MODALS +================================ */ +.modal-content { + border-radius: var(--radius-xl); + box-shadow: var(--shadow-lg); } -/* MODE TEST INDICATOR */ -.mode-test-active .header { - border-bottom: 3px solid var(--color-warning) !important; +.modal-header { + border-bottom: 1px solid var(--border-light); +} + +/* ================================ + CONTEXT DRAWER +================================ */ +#barre_laterale_d { + position: fixed; + right: 0; + top: var(--header-height); + width: var(--context-width); + height: calc(100vh - var(--header-height)); + background: var(--bg-surface); + border-left: 1px solid var(--border-light); + box-shadow: var(--shadow-lg); +} + +/* ================================ + ALERTS +================================ */ +.alert { + border-radius: var(--radius-md); + border-left: 4px solid; +} + +.alert-success { border-color: var(--color-success); } +.alert-danger { border-color: var(--color-urgent); } +.alert-warning { border-color: var(--color-warning); } +.alert-info { border-color: var(--color-info); } + +/* ================================ + RESPONSIVE +================================ */ +@media (max-width: 1199px) { + #main { margin-left: 0; } + #sidebar { transform: translateX(-100%); } } \ No newline at end of file