From fa396ef6a3016332e0f5105e032e253e768da73c Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 12:44:40 +0000 Subject: [PATCH] sd --- Bootstrap_new/css/theme-modern.css | 1263 ++++++++++++++++++++++++---- 1 file changed, 1121 insertions(+), 142 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index dfc8fa3f..7e7dd555 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,205 +1,1184 @@ -/* ============================================================ - INTER SANTÉ — THEME MODERN (EDITION OUTLOOK 365 + ROUNDED) - CONSERVATION 100% DES ÉLÉMENTS DU FICHIER SOURCE - ============================================================ */ +/* ============================= + INTER SANTÉ — THEME MODERN + SaaS Premium UI v2025 + ============================= */ -/* === 1. FONTS & VARIABLES (Structure 100% conservée) === */ +/* === 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 { - /* Palette Outlook 365 */ - --color-primary: #0078d4; /* Bleu Outlook */ - --color-primary-light: #2b88d8; - --color-primary-dark: #005a9e; - --color-primary-ghost: #eff6fc; + /* Brand Colors */ + --color-primary: #1a6b4a; + --color-primary-light: #25a06e; + --color-primary-dark: #114532; + --color-primary-ghost: rgba(26, 107, 74, 0.08); - --color-accent: #0078d4; - --color-urgent: #d13438; - --color-warning: #ffaa44; - --color-success: #107c10; + /* Accent / Status */ + --color-accent: #0abf7c; + --color-urgent: #e63946; + --color-warning: #f4a261; + --color-success: #2ec4b6; --color-info: #3a86ff; --color-neutral: #6c757d; - /* Backgrounds Outlook pour faciliter la lecture */ - --bg-app: #f3f2f1; /* Gris neutre Office */ - --bg-card: #ffffff; - --text-main: #323130; /* Contraste optimal */ - --text-muted: #605e5c; - --border-light: #edebe9; + /* Backgrounds */ + --bg-base: #f4f6f9; + --bg-surface: #ffffff; + --bg-surface-2: #f8fafc; + --bg-sidebar: #0f2d20; + --bg-header: #ffffff; - /* --- TES ARRONDIS PRÉFÉRÉS (CONSERVÉS) --- */ - --radius-lg: 14px; - --radius-md: 10px; - - --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); - --shadow-md: 0 4px 12px rgba(0,0,0,0.08); - --transition-fast: 0.2s ease; - --transition-smooth: 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); + /* 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; } -/* === 2. BASE & LISIBILITÉ === */ +/* === BASE RESET & GLOBALS === */ +*, *::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: 'DM Sans', system-ui, sans-serif; + background: var(--bg-base); + color: var(--text-primary); + line-height: 1.6; + -webkit-font-smoothing: antialiased; } -h1, h2, h3, .logo-text { +h1, h2, h3, h4, h5, h6, +.fw-bold, .fw-semibold, .nav-link span { font-family: 'Syne', sans-serif; - font-weight: 700; - color: var(--color-primary-dark); } -/* === 3. HEADER (Style Outlook avec tes IDs) === */ -.header { - background-color: var(--color-primary) !important; - color: white !important; - box-shadow: var(--shadow-sm) !important; - border-bottom: none; +/* === 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); } -.header .logo span { - color: white !important; - font-weight: 700; +#header.mode-test { + background: linear-gradient(90deg, #7b2d00, #c0392b); } -/* === 4. SIDEBAR (Style Outlook + Arrondis de sélection) === */ -.sidebar { - background: #faf9f8 !important; - border-right: 1px solid var(--border-light) !important; +#header .logo { + gap: 10px; + text-decoration: none; } -.sidebar-nav .nav-link { - color: var(--text-main) !important; - font-weight: 500; - border-radius: var(--radius-md); /* Arrondis conservés ici */ - margin: 4px 12px; - transition: var(--transition-fast); +#header .logo img { + width: 34px; + height: 34px; + border-radius: var(--radius-sm); + object-fit: contain; } -.sidebar-nav .nav-link.active-main { - background-color: var(--color-primary-ghost) !important; - color: var(--color-primary) !important; - font-weight: 700; -} - -/* === 5. CARDS & KPI (Tes bordures arrondies 100%) === */ -.card { - background: var(--bg-card); - border: 1px solid var(--border-light) !important; - border-radius: var(--radius-lg) !important; /* Tes 14px */ - box-shadow: var(--shadow-sm) !important; -} - -.kpi-card { - border-left: 5px solid var(--color-primary) !important; -} - -.kpi-value { +#header .logo span { font-family: 'Syne', sans-serif; font-weight: 800; - font-size: 1.8rem; + font-size: 1.05rem; + color: var(--color-primary); + letter-spacing: -0.02em; } -/* === 6. TABLEAUX (Haute lisibilité + Rayons de courbure) === */ -.table-responsive { - border-radius: var(--radius-lg); - overflow: hidden; - background: white; +/* 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); } -.table thead th { - background-color: #faf9f8 !important; - color: var(--text-muted); +/* Breadcrumb */ +.breadcrumb { + background: transparent !important; + padding: 0 !important; + margin: 0; font-size: 0.8rem; - border-bottom: 2px solid var(--border-light) !important; +} +.breadcrumb-item a { + 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); } -.table tbody tr:hover { - background-color: #f3f2f1 !important; +.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; } -/* === 7. CONTEXTUAL PANEL & ELEMENTS SPECIFIQUES (Source: theme-modern.txt) === */ -#barre_laterale_d { - background: white; +/* 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; +} + +#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; + margin: 0; +} + +.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-item > .nav-link:hover, +.sidebar-nav > .nav-item > .nav-link.active { + background: rgba(255,255,255,0.10); + color: white; +} + +.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-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-item > .nav-link span.active-main { + color: var(--color-accent); + font-weight: 700; +} + +.sidebar-nav > .nav-item > .nav-link .bi-chevron-down { + font-size: 0.65rem; + opacity: 0.6; + transition: transform var(--transition-base); + flex-shrink: 0; +} + +/* Rotates chevron when open */ +.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down { + transform: rotate(180deg); + opacity: 1; +} + +/* 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; +} + +.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; +} + +.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; +} + +.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; +} + +/* 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); +} + +/* 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; +} + +/* ============================== + 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; +} + +@media (max-width: 1199px) { + #main { margin-left: 0 !important; } + #sidebar { transform: translateX(-100%); } + #sidebar.sidebar-open { transform: translateX(0); } +} + +/* Scroll Menu */ +.scrollmenu { + 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 { + 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.active { + background: var(--color-primary); + color: white; + box-shadow: var(--shadow-primary); +} + +/* Page content wrapper */ +.page-content { + padding: 0 16px; +} + +/* Fixed header within main */ +.fixed-div { + position: sticky; + top: var(--header-height); + z-index: 500; + background: var(--bg-base); + padding-bottom: 4px; +} + +/* 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); } -.info-box { - background: #faf9f8; - border-radius: var(--radius-md); /* Arrondis conservés */ +#barre_laterale_d .drawer-inner { + padding: 16px; +} + +/* 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(--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; +} + +/* 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; +} + +/* 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; +} + +/* ============================== + TABLES (DataTables) + ============================== */ +.table-container { + background: white; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + overflow: hidden; border: 1px solid var(--border-light); } -/* Style spécifique h6 a du fichier source */ +.table { + 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 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 { + transition: all var(--transition-fast); +} +.table tbody tr:hover { + background: var(--color-primary-ghost) !important; + font-style: normal !important; +} +.table tbody tr:hover td:first-child { + border-left: 3px solid var(--color-accent); +} + +/* 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; +} + +/* ============================== + BUTTONS + ============================== */ +.btn { + 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(--color-primary) !important; + color: white !important; + box-shadow: 0 2px 8px rgba(26,107,74,0.3); +} +.btn-primary:hover { + background: var(--color-primary-light) !important; + box-shadow: 0 4px 16px rgba(26,107,74,0.4); + transform: translateY(-1px); +} + +.btn-info { + background: var(--color-info) !important; + color: white !important; +} +.btn-info:hover { + background: #2563eb !important; + transform: translateY(-1px); +} + +.btn-warning { + background: var(--color-urgent) !important; + color: white !important; +} + +.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: 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(--color-primary-light); + box-shadow: 0 0 0 3px rgba(26,107,74,0.1); + outline: none; +} + +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: var(--radius-lg); + box-shadow: var(--shadow-xl); + overflow: hidden; +} + +.modal-header { + background: var(--color-primary) !important; + color: white !important; + padding: 16px 20px; + border-bottom: none; +} + +.modal-title { + font-family: 'Syne', sans-serif; + font-size: 0.92rem !important; + font-weight: 700; +} + +.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; } + +.modal-body { padding: 20px; } + +.modal-footer { + border-top: 1px solid var(--border-light); + padding: 12px 20px; + gap: 8px; +} + +/* 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; +} + +/* ============================== + 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; +} + +/* ============================== + 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); +} + +.hover-scale:hover { + transform: scale(1.04); + box-shadow: var(--shadow-md); + transition: all var(--transition-base); +} + +.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; } +} + +/* 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; +} + +/* 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; +} + +/* Filter option */ +.filter-option-inner-inner { + background-color: #f1f5f9 !important; +} + +/* 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-radius: 4px; + border-bottom-color: transparent; + padding: 1px 4px; + border-radius: 3px; } -/* Textarea du contexte */ +/* Textarea in context */ .mb-2 textarea { font-size: 0.78rem; - border-radius: var(--radius-md); - border: 1px solid var(--border-light); + width: 100%; + border: 1px solid var(--border-medium); + border-radius: var(--radius-sm); padding: 8px; } -/* === 8. PATTERNS AVANCÉS (Conservés du source) === */ -.skeleton { - background: linear-gradient(90deg, #f3f2f1 25%, #edebe9 50%, #f3f2f1 75%); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; - border-radius: 4px; +/* .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; } -.bulk-actions-bar { - background: #323130; - border-radius: 50px; /* Style pilule */ - color: white; - box-shadow: var(--shadow-lg); +/* ============================== + 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; } } - -.trust-badge { - background: var(--color-primary-ghost); - color: var(--color-primary); - border-radius: 100px; - font-weight: 600; -} - -/* === 9. BOUTONS & BADGES (Outlook colors + Rounded shapes) === */ -.btn-primary { - background: var(--color-primary) !important; - border-radius: var(--radius-md) !important; /* Arrondis au lieu du flat Office */ - font-weight: 600 !important; - border: none !important; -} - -.badge-saas { - border-radius: 20px; /* Tes badges arrondis */ - padding: 4px 12px; - font-size: 0.7rem; - text-transform: uppercase; -} - -.status-paid { background: #dff6dd; color: #107c10; } -.status-urgent { background: #fde7e9; color: #a80000; } - -/* === 10. MODE TEST (Zébrures conservées du source) === */ -.mode-test-banner { - background: repeating-linear-gradient( - 45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px - ); - color: white; - font-weight: 800; - text-align: center; -} \ No newline at end of file