From befee4a3743ee79e5837f2743da84441f8a0603d Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 14:31:26 +0000 Subject: [PATCH] val --- Bootstrap_new/css/theme-modern.css | 169 +++++++++++++++-------------- 1 file changed, 90 insertions(+), 79 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 7e7dd555..6cf09ea7 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,6 +1,7 @@ /* ============================= - INTER SANTÉ — THEME MODERN - SaaS Premium UI v2025 + INTER SANTÉ — THEME NEUTRAL PRO + SaaS Minimal UI v2025 + Palette : Charcoal · Gris · Blanc ============================= */ /* === FONTS === */ @@ -8,36 +9,36 @@ /* === CSS VARIABLES === */ :root { - /* Brand Colors */ - --color-primary: #1a6b4a; - --color-primary-light: #25a06e; - --color-primary-dark: #114532; - --color-primary-ghost: rgba(26, 107, 74, 0.08); + /* Brand Colors — Charcoal / Gris neutre (zéro vert) */ + --color-primary: #2e3440; /* charcoal foncé */ + --color-primary-light: #4c566a; /* slate moyen */ + --color-primary-dark: #1a1d24; /* quasi-noir */ + --color-primary-ghost: rgba(46, 52, 64, 0.07); - /* Accent / Status */ - --color-accent: #0abf7c; - --color-urgent: #e63946; - --color-warning: #f4a261; - --color-success: #2ec4b6; - --color-info: #3a86ff; - --color-neutral: #6c757d; + /* Accent / Status — conservés pour lisibilité fonctionnelle */ + --color-accent: #5e6e82; /* gris-bleu neutre */ + --color-urgent: #c0392b; + --color-warning: #e67e22; + --color-success: #27ae60; + --color-info: #2980b9; + --color-neutral: #7f8c8d; /* Backgrounds */ - --bg-base: #f4f6f9; + --bg-base: #f2f3f5; --bg-surface: #ffffff; - --bg-surface-2: #f8fafc; - --bg-sidebar: #0f2d20; + --bg-surface-2: #f8f9fa; + --bg-sidebar: #1e2228; /* charcoal très sombre */ --bg-header: #ffffff; - /* Text */ - --text-primary: #1a2332; - --text-secondary: #6b7280; - --text-muted: #9ca3af; + /* Text — contraste maximal */ + --text-primary: #1a1d24; + --text-secondary: #4c566a; + --text-muted: #7b8a99; --text-inverse: #ffffff; /* Borders */ - --border-light: #e8ecf0; - --border-medium: #d1d5db; + --border-light: #e3e6ea; + --border-medium: #c8cdd4; /* Spacing & Radius */ --radius-sm: 6px; @@ -46,13 +47,13 @@ --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); + /* Shadows — neutres, sans teinte colorée */ + --shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); + --shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); + --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); + --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07); + --shadow-xl: 0 16px 48px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08); + --shadow-primary: 0 4px 20px rgba(30,34,40,.20); /* Transitions */ --transition-fast: 0.15s ease; @@ -104,7 +105,7 @@ h1, h2, h3, h4, h5, h6, } #header.mode-test { - background: linear-gradient(90deg, #7b2d00, #c0392b); + background: linear-gradient(90deg, #5d0000, #c0392b); } #header .logo { @@ -276,12 +277,13 @@ h1, h2, h3, h4, h5, h6, padding: 12px 8px; } +/* Liseré supérieur discret — gris clair */ #sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; - background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light)); + background: linear-gradient(90deg, #4c566a, #7b8a99); } /* Sidebar Nav */ @@ -333,8 +335,9 @@ h1, h2, h3, h4, h5, h6, white-space: nowrap; } +/* Active item : blanc brillant */ .sidebar-nav > .nav-item > .nav-link span.active-main { - color: var(--color-accent); + color: #ffffff; font-weight: 700; } @@ -345,7 +348,6 @@ h1, h2, h3, h4, h5, h6, flex-shrink: 0; } -/* Rotates chevron when open */ .sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); opacity: 1; @@ -356,7 +358,7 @@ h1, h2, h3, h4, h5, h6, list-style: none; padding: 4px 0 4px 32px; margin: 0; - background: rgba(0,0,0,0.15); + background: rgba(0,0,0,0.18); border-radius: var(--radius-sm); margin-bottom: 2px; } @@ -378,19 +380,19 @@ h1, h2, h3, h4, h5, h6, .sidebar-nav .nav-content li a:hover { color: white; background: rgba(255,255,255,0.07); - border-left-color: var(--color-accent); + border-left-color: rgba(255,255,255,0.5); padding-left: 14px; } +/* Sous-menu actif : fond blanc translucide + bordure blanche */ .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); + color: #ffffff; + background: rgba(255,255,255,0.12); + border-left-color: #ffffff; font-weight: 600; padding-left: 14px; } -/* Active indicator dot */ .sidebar-nav .nav-content li a.active-submenu::after { content: ''; position: absolute; @@ -400,7 +402,7 @@ h1, h2, h3, h4, h5, h6, width: 5px; height: 5px; border-radius: 50%; - background: var(--color-accent); + background: rgba(255,255,255,0.8); } /* Separator label */ @@ -410,7 +412,7 @@ h1, h2, h3, h4, h5, h6, font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; - color: rgba(255,255,255,0.3); + color: rgba(255,255,255,0.28); padding: 12px 10px 4px; margin-top: 4px; } @@ -462,7 +464,7 @@ h1, h2, h3, h4, h5, h6, .scrollmenu a:hover { background: var(--color-primary-ghost); color: var(--color-primary); - border-color: rgba(26,107,74,0.2); + border-color: rgba(46,52,64,0.15); } .scrollmenu a.active { @@ -485,14 +487,13 @@ h1, h2, h3, h4, h5, h6, padding-bottom: 4px; } -/* Section */ .section { padding: 0; } /* ============================== CONTEXT DRAWER (Barre Latérale D) ============================== */ -/* Trigger button */ +/* Trigger button — gris charcoal */ .btn-info-context { position: fixed; right: 0; @@ -560,7 +561,7 @@ h1, h2, h3, h4, h5, h6, margin-bottom: 16px; border-radius: 0; } -.btn-cacher-contexte:hover { background: var(--color-primary); } +.btn-cacher-contexte:hover { background: var(--color-primary-light); } /* Context Cards */ .context-card { @@ -584,7 +585,8 @@ h1, h2, h3, h4, h5, h6, align-items: center; gap: 6px; } -.context-card-label i { color: var(--color-primary); } +/* Icône label — gris moyen */ +.context-card-label i { color: var(--color-primary-light); } .context-card-label a { color: var(--color-primary); @@ -619,7 +621,7 @@ h1, h2, h3, h4, h5, h6, border-color: var(--color-primary-light); color: var(--color-primary); } -.context-btn i { color: var(--color-primary); flex-shrink: 0; } +.context-btn i { color: var(--color-primary-light); flex-shrink: 0; } .context-btn.btn-primary-context { background: var(--color-primary); @@ -672,7 +674,7 @@ h1, h2, h3, h4, h5, h6, gap: 6px; margin-bottom: 8px; } -.recent-policies-title i { color: var(--color-primary); } +.recent-policies-title i { color: var(--color-primary-light); } .policy-item { padding: 7px 10px; @@ -692,7 +694,7 @@ h1, h2, h3, h4, h5, h6, .policy-item:hover { background: var(--color-primary-ghost); color: var(--color-primary); - border-color: rgba(26,107,74,0.2); + border-color: rgba(46,52,64,0.18); padding-left: 14px; } @@ -737,7 +739,7 @@ h1, h2, h3, h4, h5, h6, /* Devis mode banner */ .mode-devis-banner { - background: linear-gradient(135deg, #7209b7, #f72585); + background: linear-gradient(135deg, #3a3a4a, #55556a); color: white; text-align: center; font-family: 'Syne', sans-serif; @@ -772,6 +774,7 @@ h1, h2, h3, h4, h5, h6, --bs-table-striped-color: var(--text-primary) !important; } +/* En-tête : charcoal sombre */ .table thead tr { background: var(--color-primary) !important; color: white !important; @@ -813,8 +816,9 @@ h1, h2, h3, h4, h5, h6, background: var(--color-primary-ghost) !important; font-style: normal !important; } +/* Bordure gauche gris moyen au survol */ .table tbody tr:hover td:first-child { - border-left: 3px solid var(--color-accent); + border-left: 3px solid var(--color-primary-light); } /* Status Badges */ @@ -836,11 +840,11 @@ h1, h2, h3, h4, h5, h6, 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); } +.badge-valide { background: rgba(39,174,96,0.10); color: #1e8449; } +.badge-urgent { background: rgba(192,57,43,0.10); color: var(--color-urgent); } +.badge-attente { background: rgba(230,126,34,0.10); color: #b9720a; } +.badge-info { background: rgba(41,128,185,0.10); color: #1a6898; } +.badge-inactive { background: rgba(127,140,141,0.10); color: var(--color-neutral); } /* ============================== CARDS @@ -879,14 +883,15 @@ h1, h2, h3, h4, h5, h6, gap: 6px; } +/* Bouton primaire : charcoal */ .btn-primary { background: var(--color-primary) !important; color: white !important; - box-shadow: 0 2px 8px rgba(26,107,74,0.3); + box-shadow: 0 2px 8px rgba(30,34,40,.22); } .btn-primary:hover { background: var(--color-primary-light) !important; - box-shadow: 0 4px 16px rgba(26,107,74,0.4); + box-shadow: 0 4px 16px rgba(30,34,40,.30); transform: translateY(-1px); } @@ -895,7 +900,7 @@ h1, h2, h3, h4, h5, h6, color: white !important; } .btn-info:hover { - background: #2563eb !important; + background: #1f6fa0 !important; transform: translateY(-1px); } @@ -930,13 +935,13 @@ h1, h2, h3, h4, h5, h6, } .form-control:focus, .form-select:focus { border-color: var(--color-primary-light); - box-shadow: 0 0 0 3px rgba(26,107,74,0.1); + box-shadow: 0 0 0 3px rgba(46,52,64,0.10); outline: none; } td input[readonly], td select[readonly], td input[disabled], td select[disabled] { - background: #f1f5f9 !important; + background: #f1f4f6 !important; font-weight: 600; color: var(--text-secondary); } @@ -967,6 +972,7 @@ fieldset legend, form legend { overflow: hidden; } +/* Header modal : charcoal */ .modal-header { background: var(--color-primary) !important; color: white !important; @@ -981,16 +987,16 @@ fieldset legend, form legend { } .modal-header .close, .modal-header .btn-close { - background: rgba(255,255,255,0.2) !important; + background: rgba(255,255,255,0.18) !important; color: white !important; - border: 1px solid rgba(255,255,255,0.3) !important; + border: 1px solid rgba(255,255,255,0.28) !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; } +.modal-header .close:hover { background: rgba(255,255,255,0.32) !important; } .modal-body { padding: 20px; } @@ -1000,7 +1006,7 @@ fieldset legend, form legend { gap: 8px; } -/* Side Panel Modal (optional modern variant) */ +/* Side Panel Modal */ .modal.side-panel .modal-dialog { position: fixed; top: 0; right: 0; @@ -1034,6 +1040,7 @@ fieldset legend, form legend { color: var(--color-primary); background: var(--color-primary-ghost); } +/* Onglet actif : charcoal */ .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background: var(--color-primary) !important; @@ -1052,13 +1059,13 @@ fieldset legend, form legend { 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); } +.alert-success { border-color: var(--color-success); background: rgba(39,174,96,0.08); } +.alert-danger { border-color: var(--color-urgent); background: rgba(192,57,43,0.08); } +.alert-warning { border-color: var(--color-warning); background: rgba(230,126,34,0.08); } +.alert-info { border-color: var(--color-info); background: rgba(41,128,185,0.08); } /* ============================== - FOOTER (inside context bar) + FOOTER ============================== */ footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; } @@ -1081,7 +1088,7 @@ footer { background: transparent !important; color: var(--text-muted) !important /* Skeleton Loader */ .skeleton { - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background: linear-gradient(90deg, #ebebeb 25%, #dcdcdc 50%, #ebebeb 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius-sm); @@ -1111,18 +1118,18 @@ footer { background: transparent !important; color: var(--text-muted) !important /* 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); } + 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.4); } + 50% { box-shadow: 0 0 0 5px rgba(192,57,43,0); } } .badge-number { animation: pulse-badge 2s infinite; } /* Mode Test Banner */ .mode-test-active #header { - background: linear-gradient(90deg, #7b2d00, #c0392b) !important; + background: linear-gradient(90deg, #5d0000, #c0392b) !important; } .mode-test-banner { background: repeating-linear-gradient( - 45deg, #ffd700, #ffd700 10px, #000 10px, #000 20px + 45deg, #cccccc, #cccccc 10px, #333333 10px, #333333 20px ); color: white; text-align: center; @@ -1134,7 +1141,7 @@ footer { background: transparent !important; color: var(--text-muted) !important /* Filter option */ .filter-option-inner-inner { - background-color: #f1f5f9 !important; + background-color: #f1f4f6 !important; } /* h6 links in context */ @@ -1142,7 +1149,7 @@ h6 a { text-decoration: none; color: var(--color-primary); font-weight: 600; - border-bottom: 1px dashed var(--color-primary); + border-bottom: 1px dashed var(--color-primary-light); transition: all var(--transition-fast); } h6 a:hover { @@ -1162,7 +1169,7 @@ h6 a:hover { padding: 8px; } -/* .sr-only (keep accessible but hidden visually) */ +/* .sr-only */ .sr-only { position: absolute; width: 1px; height: 1px; @@ -1173,6 +1180,10 @@ h6 a:hover { border-width: 0; } +/* ============================== + SCROLLBAR hover — gris neutre */ +::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } + /* ============================== RESPONSIVE ============================== */