From 8e8a91ca889485ddc5d8416ecfc31b78b9b2a5e1 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 12:10:09 +0000 Subject: [PATCH] df --- Bootstrap_new/css/theme-modern.css | 1548 +++++++++++++++------------- Vue/gabarit.php | 2 +- 2 files changed, 830 insertions(+), 720 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 9ea73fb0..7e7dd555 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,342 +1,267 @@ -/* ============================================================ - INTER SANTÉ — THÈME OUTLOOK 365 PREMIUM - Inspiration Microsoft 365 - Élégant, professionnel, moderne - ============================================================ */ +/* ============================= + INTER SANTÉ — THEME MODERN + SaaS Premium UI v2025 + ============================= */ /* === FONTS === */ -@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); +@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'); -/* === VARIABLES === */ +/* === CSS VARIABLES === */ :root { - /* Couleurs principales - Palette Outlook */ - --outlook-blue: #0078d4; - --outlook-blue-light: #50b0f0; - --outlook-blue-dark: #106ebe; - --outlook-blue-soft: #deecf9; - --outlook-bg: #f5f5f5; - - /* Neutres */ - --neutral-10: #1e1e1e; - --neutral-20: #323130; - --neutral-30: #3b3a39; - --neutral-40: #484644; - --neutral-50: #605e5c; - --neutral-60: #797775; - --neutral-70: #8a8886; - --neutral-80: #b3b0ad; - --neutral-90: #d2d0ce; - --neutral-95: #eaeaea; - --neutral-98: #f5f5f5; - --neutral-white: #ffffff; + /* Brand Colors */ + --color-primary: #1a6b4a; + --color-primary-light: #25a06e; + --color-primary-dark: #114532; + --color-primary-ghost: rgba(26, 107, 74, 0.08); - /* Statuts */ - --status-success: #107c41; - --status-warning: #ffaa44; - --status-error: #d13438; - --status-info: #0078d4; - --status-urgent: #e81123; - - /* Sémantique */ - --primary: var(--outlook-blue); - --primary-hover: var(--outlook-blue-dark); - --primary-soft: var(--outlook-blue-soft); - --text-primary: #252423; - --text-secondary: #605e5c; - --text-tertiary: #8a8886; - --text-disabled: #b3b0ad; - --border-default: #edebe9; - --border-hover: #c8c6c4; - --border-focus: var(--outlook-blue); + /* Accent / Status */ + --color-accent: #0abf7c; + --color-urgent: #e63946; + --color-warning: #f4a261; + --color-success: #2ec4b6; + --color-info: #3a86ff; + --color-neutral: #6c757d; /* Backgrounds */ - --bg-page: #f5f5f5; - --bg-surface: #ffffff; - --bg-surface-hover: #f3f2f1; - --bg-surface-pressed: #e1dfdd; - --bg-sidebar: #faf9f8; - --bg-header: #ffffff; - --bg-menu-hover: #f3f2f1; + --bg-base: #f4f6f9; + --bg-surface: #ffffff; + --bg-surface-2: #f8fafc; + --bg-sidebar: #0f2d20; + --bg-header: #ffffff; - /* Shadows */ - --shadow-sm: 0 1.6px 3.6px rgba(0, 0, 0, 0.08), 0 0.3px 0.9px rgba(0, 0, 0, 0.1); - --shadow-md: 0 6.4px 14.4px rgba(0, 0, 0, 0.08), 0 1.2px 3.6px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 25.6px 57.6px rgba(0, 0, 0, 0.12), 0 4.8px 14.4px rgba(0, 0, 0, 0.1); - --shadow-card: 0 0.4px 0.8px rgba(0, 0, 0, 0.06), 0 1.6px 3.6px rgba(0, 0, 0, 0.04); - - /* Radius */ - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 8px; - --radius-xl: 12px; + /* 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; - /* Layout */ - --header-height: 48px; - --sidebar-width: 280px; - --context-width: 320px; - + /* 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.1s ease; - --transition-base: 0.2s cubic-bezier(0.1, 0.9, 0.2, 1); - --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --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 === */ -* { box-sizing: border-box; } +/* === BASE RESET & GLOBALS === */ +*, *::before, *::after { box-sizing: border-box; } -html { - font-size: 14px; +html { font-size: 14px; scroll-behavior: smooth; } + +body { + font-family: 'DM Sans', system-ui, sans-serif; + background: var(--bg-base); + color: var(--text-primary); + line-height: 1.6; -webkit-font-smoothing: antialiased; } -body { - font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif; - background: var(--bg-page); - color: var(--text-primary); - line-height: 1.5; - margin: 0; - overflow: hidden; +h1, h2, h3, h4, h5, h6, +.fw-bold, .fw-semibold, .nav-link span { + font-family: 'Syne', sans-serif; } -/* === SCROLLBAR STYLE OUTLOOK === */ -::-webkit-scrollbar { width: 12px; height: 12px; } +/* === SCROLLBAR === */ +::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { - background: var(--neutral-80); - border-radius: var(--radius-full); - border: 3px solid transparent; - background-clip: padding-box; -} -::-webkit-scrollbar-thumb:hover { background: var(--neutral-60); background-clip: padding-box; } -::-webkit-scrollbar-corner { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); } +::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } -/* =================================================== - HEADER - Style Outlook (compact et efficace) - =================================================== */ +/* ============================== + HEADER + ============================== */ #header { height: var(--header-height); background: var(--bg-header); - border-bottom: 1px solid var(--border-default); - padding: 0 8px; - display: flex; - align-items: center; - position: fixed; - top: 0; - left: 0; - right: 0; + 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.mode-test { + background: linear-gradient(90deg, #7b2d00, #c0392b); } -/* Logo */ #header .logo { - display: flex; - align-items: center; - gap: 8px; - padding: 4px 8px; + gap: 10px; text-decoration: none; - border-radius: var(--radius-sm); - transition: background var(--transition-fast); -} - -#header .logo:hover { - background: var(--bg-surface-hover); } #header .logo img { - width: 24px; - height: 24px; + width: 34px; + height: 34px; + border-radius: var(--radius-sm); + object-fit: contain; } #header .logo span { - font-weight: 600; - font-size: 1rem; - color: var(--text-primary); - letter-spacing: 0.3px; + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 1.05rem; + color: var(--color-primary); + letter-spacing: -0.02em; } -/* Toggle sidebar */ +/* Toggle sidebar button */ .toggle-sidebar-btn { - font-size: 1.2rem; + font-size: 1.4rem; color: var(--text-secondary); - padding: 6px 8px; - border-radius: var(--radius-sm); cursor: pointer; + padding: 4px 8px; + border-radius: var(--radius-sm); transition: all var(--transition-fast); - margin-left: 4px; + margin-left: 12px; } - .toggle-sidebar-btn:hover { - background: var(--bg-surface-hover); - color: var(--text-primary); + color: var(--color-primary); + background: var(--color-primary-ghost); } /* Breadcrumb */ .breadcrumb { - background: transparent; - padding: 0 16px; + background: transparent !important; + padding: 0 !important; margin: 0; - font-size: 0.85rem; + font-size: 0.8rem; } - .breadcrumb-item a { - color: var(--text-secondary); + color: var(--text-muted); text-decoration: none; - padding: 4px 6px; + 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); - display: inline-flex; - align-items: center; - gap: 4px; -} - -.breadcrumb-item a:hover { - background: var(--bg-surface-hover); - color: var(--text-primary); -} - -.breadcrumb-item.active { - color: var(--text-primary); - font-weight: 500; - padding: 4px 6px; -} - -/* Header Icons */ -.header-nav { - height: 100%; -} - -.header-nav ul { - display: flex; - align-items: center; - height: 100%; - margin: 0; - padding: 0; - list-style: none; -} - -.header-nav .nav-link { - display: flex; - align-items: center; - padding: 0 12px; - height: 100%; - color: var(--text-secondary); - text-decoration: none; - font-size: 0.9rem; - transition: all var(--transition-fast); position: relative; - border-bottom: 2px solid transparent; +} +#header .header-nav .nav-link:hover { + color: var(--color-primary); + background: var(--color-primary-ghost); } -.header-nav .nav-link:hover { - background: var(--bg-surface-hover); - color: var(--text-primary); - border-bottom-color: var(--primary); -} - -/* Badge notifications */ .badge-number { position: absolute; - top: 8px; - right: 4px; - background: var(--status-error); - color: white; - font-size: 0.65rem; - font-weight: 600; + 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; - border: 1px solid white; + cursor: pointer; + border: 2px solid white; + transition: transform var(--transition-fast); } +.badge-number:hover { transform: scale(1.2); } /* Company logo area */ -.entity-info { +.company-logo-area { display: flex; align-items: center; gap: 8px; - padding: 4px 12px; - border-radius: var(--radius-sm); - transition: background var(--transition-fast); - text-decoration: none; + 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); - height: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.entity-info:hover { - background: var(--bg-surface-hover); -} - -.entity-logo { - height: 28px; - width: auto; - max-width: 100px; - object-fit: contain; -} - -.entity-name { - font-weight: 500; - font-size: 0.85rem; - color: var(--text-secondary); -} - -/* User initials - style Outlook */ +/* User Initials Badge */ .initials { width: 32px; height: 32px; - background: var(--primary); + border-radius: var(--radius-sm); + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: white; - font-weight: 600; - font-size: 0.85rem; - display: flex; + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 0.75rem; + display: inline-flex; align-items: center; justify-content: center; - border-radius: var(--radius-full); - transition: all var(--transition-fast); + box-shadow: var(--shadow-primary); + transition: transform var(--transition-fast); } +.nav-link:hover .initials { transform: scale(1.08); } -.nav-link:hover .initials { - background: var(--primary-hover); - transform: scale(1.05); -} - -/* Dropdown - style Outlook */ +/* Dropdown */ .dropdown-menu { - border: 1px solid var(--border-default); + border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); - padding: 4px 0; - margin-top: 4px !important; - min-width: 200px; - background: var(--bg-surface); -} - -.dropdown-item { - padding: 8px 16px; + padding: 6px; font-size: 0.85rem; - color: var(--text-primary); + margin-top: 8px !important; +} +.dropdown-item { + border-radius: var(--radius-sm); + padding: 8px 12px; + gap: 10px; display: flex; align-items: center; - gap: 10px; + color: var(--text-primary); transition: all var(--transition-fast); } - .dropdown-item:hover { - background: var(--bg-surface-hover); - color: var(--text-primary); + background: var(--color-primary-ghost); + color: var(--color-primary); } +.dropdown-item i { width: 16px; color: var(--text-muted); } -.dropdown-item i { - width: 18px; - color: var(--text-secondary); - font-size: 0.9rem; -} +/* Language flag */ +.lang-selector img { border-radius: 3px; } -/* =================================================== - SIDEBAR - Style Outlook (Fluent UI) - =================================================== */ +/* ============================== + SIDEBAR + ============================== */ #sidebar { width: var(--sidebar-width); background: var(--bg-sidebar); @@ -345,730 +270,915 @@ body { left: 0; height: calc(100vh - var(--header-height)); overflow-y: auto; - border-right: 1px solid var(--border-default); - transition: width var(--transition-slow), transform var(--transition-slow); + overflow-x: hidden; + transition: width var(--transition-slow); z-index: 900; + padding: 12px 8px; } -/* Sidebar brand */ -.sidebar-brand { - padding: 16px 20px; - display: flex; - align-items: center; - gap: 12px; - border-bottom: 1px solid var(--border-default); +#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-brand img { - width: 28px; - height: 28px; -} - -.sidebar-brand span { - font-weight: 600; - font-size: 1rem; - color: var(--text-primary); -} - -/* Sidebar nav */ +/* Sidebar Nav */ .sidebar-nav { list-style: none; - padding: 8px 0; + padding: 0; margin: 0; } -.sidebar-nav .nav-item { - margin: 2px 0; -} +.sidebar-nav .nav-item { margin-bottom: 2px; } /* Parent links */ .sidebar-nav > .nav-item > .nav-link { display: flex; align-items: center; - gap: 12px; - padding: 10px 20px; - color: var(--text-primary); - text-decoration: none; - font-size: 0.9rem; - font-weight: 400; - transition: all var(--transition-fast); - position: relative; - border-left: 3px solid transparent; -} - -.sidebar-nav > .nav-item > .nav-link:hover { - background: var(--bg-surface-hover); - border-left-color: var(--neutral-80); -} - -.sidebar-nav > .nav-item > .nav-link.active { - background: var(--primary-soft); - border-left-color: var(--primary); + 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 { - width: 20px; - color: var(--text-secondary); 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 { - margin-left: auto; - font-size: 0.8rem; - color: var(--text-tertiary); - transition: transform var(--transition-fast); + 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 */ +/* Sub-menu (Level 1) */ .sidebar-nav .nav-content { list-style: none; - padding: 4px 0 4px 44px; + padding: 4px 0 4px 32px; margin: 0; - background: var(--bg-page); + 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: 8px 16px; - color: var(--text-secondary); - text-decoration: none; - font-size: 0.85rem; - transition: all var(--transition-fast); + padding: 7px 10px; border-radius: var(--radius-sm); - margin: 2px 0; + 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 { - background: var(--bg-surface-hover); - color: var(--text-primary); + 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(--primary); - font-weight: 500; - background: var(--primary-soft); + color: var(--color-accent); + background: rgba(10,191,124,0.12); + border-left-color: var(--color-accent); + font-weight: 600; + padding-left: 14px; } -/* =================================================== - MAIN CONTENT - Style Outlook - =================================================== */ +/* 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: var(--header-height); + padding-top: calc(var(--header-height) + 16px); min-height: 100vh; transition: margin-left var(--transition-slow); - background: var(--bg-page); + padding-bottom: 32px; } -/* Page content */ -.page-content { - padding: 24px; +@media (max-width: 1199px) { + #main { margin-left: 0 !important; } + #sidebar { transform: translateX(-100%); } + #sidebar.sidebar-open { transform: translateX(0); } } -/* Scroll Menu - style onglets Outlook */ +/* Scroll Menu */ .scrollmenu { display: flex; - gap: 2px; + gap: 4px; overflow-x: auto; - background: transparent; - border-bottom: 1px solid var(--border-default); - margin-bottom: 24px; - padding: 0; + 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: 8px 16px; - font-size: 0.85rem; + 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-bottom: 2px solid transparent; - margin-bottom: -1px; + border: 1px solid transparent; + flex-shrink: 0; } .scrollmenu a:hover { - color: var(--text-primary); - background: var(--bg-surface-hover); - border-bottom-color: var(--neutral-80); + background: var(--color-primary-ghost); + color: var(--color-primary); + border-color: rgba(26,107,74,0.2); } .scrollmenu a.active { - color: var(--primary); - font-weight: 500; - border-bottom-color: var(--primary); + background: var(--color-primary); + color: white; + box-shadow: var(--shadow-primary); } -/* =================================================== - CONTEXT DRAWER - Style Outlook - =================================================== */ +/* 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: 16px; + right: 0; top: 50%; transform: translateY(-50%); - z-index: 950; - background: var(--bg-surface); - color: var(--text-secondary); - border: 1px solid var(--border-default); - border-radius: var(--radius-full); - padding: 8px 12px; + 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-fast); - font-size: 0.85rem; + transition: all var(--transition-base); } - .btn-info-context:hover { - background: var(--bg-surface-hover); - color: var(--text-primary); - box-shadow: var(--shadow-lg); - right: 14px; + background: var(--color-primary-light); + padding-left: 14px; } +.btn-info-context i { font-size: 16px; } -.btn-info-context i { - font-size: 1rem; -} - -/* Context Drawer */ +/* Context Drawer Panel */ #barre_laterale_d { position: fixed; - right: -380px; + right: 0; top: var(--header-height); - width: var(--context-width); + width: var(--context-width) !important; height: calc(100vh - var(--header-height)); background: var(--bg-surface); - border-left: 1px solid var(--border-default); - box-shadow: var(--shadow-lg); - z-index: 950; + border-left: 1px solid var(--border-light); + box-shadow: var(--shadow-xl); + z-index: 1050; overflow-y: auto; - transition: right var(--transition-slow); + overflow-x: hidden; + padding: 0 !important; + display: none; + transition: transform var(--transition-slow); } -#barre_laterale_d.show { - right: 0; +#barre_laterale_d .drawer-inner { + padding: 16px; } -/* Drawer header */ +/* Drawer Close Button */ .btn-cacher-contexte { display: flex; align-items: center; - justify-content: space-between; + justify-content: center; + gap: 8px; width: 100%; - padding: 16px 20px; - background: var(--bg-surface); + padding: 12px; + background: var(--bg-sidebar); + color: white; border: none; - border-bottom: 1px solid var(--border-default); cursor: pointer; - font-size: 0.9rem; - font-weight: 500; - color: var(--text-primary); + 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(--bg-surface-hover); -} - -.btn-cacher-contexte i { - color: var(--text-secondary); - transition: transform var(--transition-fast); -} - -.btn-cacher-contexte:hover i { - transform: translateX(4px); -} +.btn-cacher-contexte:hover { background: var(--color-primary); } /* Context Cards */ .context-card { - background: var(--bg-page); - border: 1px solid var(--border-default); + background: var(--bg-surface-2); + border: 1px solid var(--border-light); border-radius: var(--radius-md); - padding: 16px; - margin: 16px; - transition: all var(--transition-fast); + padding: 12px; + margin-bottom: 10px; + transition: box-shadow var(--transition-fast); } +.context-card:hover { box-shadow: var(--shadow-sm); } -.context-card:hover { - background: var(--bg-surface); - box-shadow: var(--shadow-sm); - border-color: var(--border-hover); -} - -.context-card-header { - font-size: 0.7rem; - font-weight: 600; +.context-card-label { + font-size: 0.65rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--text-tertiary); - margin-bottom: 12px; + letter-spacing: 0.08em; + color: var(--text-muted); + margin-bottom: 6px; display: flex; align-items: center; - gap: 8px; + gap: 6px; } +.context-card-label i { color: var(--color-primary); } -.context-card-header i { - color: var(--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: var(--bg-surface); - border: 1px solid var(--border-default); + background: white; + border: 1px solid var(--border-medium); border-radius: var(--radius-sm); - padding: 10px 12px; + padding: 7px 10px; text-align: left; - font-size: 0.85rem; + 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(--bg-surface-hover); - border-color: var(--border-hover); - transform: translateX(2px); + 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 i { - color: var(--primary); - width: 18px; +.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 badges */ -.family-stats { +/* Stats row in context */ +.context-stats { display: flex; - gap: 8px; - margin-top: 8px; + 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; } -.family-stats .badge { - background: var(--bg-surface); - border: 1px solid var(--border-default); - color: var(--text-secondary); - font-weight: 500; - padding: 4px 8px; +/* 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: 16px; + margin-bottom: 10px; } - .photo-container img { width: 80px; height: 80px; object-fit: cover; - border-radius: var(--radius-sm); - border: 2px solid var(--bg-surface); - box-shadow: var(--shadow-sm); - cursor: pointer; - transition: all var(--transition-fast); -} - -.photo-container img:hover { - transform: scale(1.05); - box-shadow: var(--shadow-md); - border-color: var(--primary); -} - -/* Recent policies */ -.recent-policies-title { - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; - color: var(--text-tertiary); - padding: 16px 16px 8px; - letter-spacing: 0.5px; -} - -.policy-item { - display: block; - padding: 8px 16px; - color: var(--text-secondary); - text-decoration: none; - font-size: 0.85rem; - transition: all var(--transition-fast); - border-left: 2px solid transparent; -} - -.policy-item:hover { - background: var(--bg-surface-hover); - color: var(--text-primary); - border-left-color: var(--primary); -} - -/* =================================================== - TABLES - Style Outlook (Fluent UI) - =================================================== */ -.table-container { - background: var(--bg-surface); border-radius: var(--radius-md); - border: 1px solid var(--border-default); + 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); } .table { + background: white !important; + border-collapse: separate; + border-spacing: 0; width: 100%; - border-collapse: collapse; - font-size: 0.85rem; - background: var(--bg-surface); + 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: var(--bg-page); - color: var(--text-secondary); - font-weight: 600; - font-size: 0.8rem; - padding: 12px 16px; - border-bottom: 1px solid var(--border-default); +.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; - letter-spacing: 0.3px; + padding: 12px 14px !important; + border: none !important; white-space: nowrap; - text-align: left; } +.table th:hover { background: var(--color-primary-dark) !important; } -.table tbody td { - padding: 12px 16px; - border-bottom: 1px solid var(--border-default); - color: var(--text-primary); +.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: background var(--transition-fast); + transition: all var(--transition-fast); } - .table tbody tr:hover { - background: var(--bg-surface-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); } -.table tbody tr:last-child td { - border-bottom: none; -} - -/* Status badges - style Outlook */ +/* Status Badges */ .badge-status { display: inline-flex; align-items: center; - padding: 4px 10px; + gap: 4px; + padding: 3px 10px; border-radius: var(--radius-full); - font-size: 0.7rem; - font-weight: 600; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.04em; text-transform: uppercase; - letter-spacing: 0.3px; } - -.badge-success { - background: #dff6dd; - color: var(--status-success); +.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); } -.badge-warning { - background: #fff4ce; - color: #8e7000; -} - -.badge-error { - background: #fde7e9; - color: var(--status-error); -} - -.badge-info { - background: #deecf9; - color: var(--primary); -} - -.badge-urgent { - background: #fde7e9; - color: var(--status-urgent); - animation: pulse-subtle 1.5s infinite; -} - -@keyframes pulse-subtle { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.8; } -} - -/* =================================================== - CARDS - Style Outlook - =================================================== */ +/* ============================== + CARDS + ============================== */ .card { background: var(--bg-surface); - border: 1px solid var(--border-default); - border-radius: var(--radius-md); - box-shadow: var(--shadow-card); - transition: all var(--transition-fast); - overflow: hidden; -} - -.card:hover { - box-shadow: var(--shadow-sm); - border-color: var(--border-hover); + 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 { - padding: 16px 20px; - border-bottom: 1px solid var(--border-default); - background: var(--bg-page); - font-weight: 600; - color: var(--text-primary); - display: flex; - align-items: center; - gap: 8px; + background: transparent; + border-bottom: 1px solid var(--border-light); + padding: 14px 18px; + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 0.88rem; } -.card-header i { - color: var(--primary); -} - -.card-body { - padding: 20px; -} - -/* =================================================== - BUTTONS - Style Outlook - =================================================== */ +/* ============================== + BUTTONS + ============================== */ .btn { - padding: 8px 20px; - border-radius: var(--radius-sm); - font-size: 0.85rem; - font-weight: 500; - border: 1px solid transparent; + 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: 8px; - cursor: pointer; - background: var(--bg-surface); - border-color: var(--border-default); - color: var(--text-primary); -} - -.btn:hover { - background: var(--bg-surface-hover); - border-color: var(--border-hover); + gap: 6px; } .btn-primary { - background: var(--primary); - border-color: var(--primary); - color: white; + background: var(--color-primary) !important; + color: white !important; + box-shadow: 0 2px 8px rgba(26,107,74,0.3); } - .btn-primary:hover { - background: var(--primary-hover); - border-color: var(--primary-hover); + background: var(--color-primary-light) !important; + box-shadow: 0 4px 16px rgba(26,107,74,0.4); transform: translateY(-1px); - box-shadow: var(--shadow-sm); } -.btn-outline-primary { - background: transparent; - 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-soft); +.btn-warning { + background: var(--color-urgent) !important; + color: white !important; } -.btn-sm { - padding: 4px 12px; - font-size: 0.75rem; +.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-lg { - padding: 10px 24px; - font-size: 0.95rem; -} +.btn-sm { padding: 5px 12px; font-size: 0.75rem; } -/* =================================================== - FORMS - Style Outlook - =================================================== */ +/* ============================== + FORM ELEMENTS + ============================== */ .form-control, .form-select { - border: 1px solid var(--border-default); + border: 1px solid var(--border-medium); border-radius: var(--radius-sm); - padding: 8px 12px; - font-size: 0.85rem; + font-size: 0.82rem; color: var(--text-primary); - background: var(--bg-surface); - transition: all var(--transition-fast); - width: 100%; - height: auto; + height: auto !important; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } - -.form-control:hover, .form-select:hover { - border-color: var(--border-hover); -} - .form-control:focus, .form-select:focus { - border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1); + border-color: var(--color-primary-light); + box-shadow: 0 0 0 3px rgba(26,107,74,0.1); outline: none; } -.form-label { - font-weight: 500; +td input[readonly], td select[readonly], +td input[disabled], td select[disabled] { + background: #f1f5f9 !important; + font-weight: 600; color: var(--text-secondary); - margin-bottom: 6px; - font-size: 0.8rem; +} + +/* ============================== + 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 - Style Outlook - =================================================== */ +/* ============================== + MODALS + ============================== */ .modal-content { - border: 1px solid var(--border-default); - border-radius: var(--radius-md); - box-shadow: var(--shadow-lg); + border: none; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xl); overflow: hidden; } .modal-header { - background: var(--bg-page); - border-bottom: 1px solid var(--border-default); + background: var(--color-primary) !important; + color: white !important; padding: 16px 20px; + border-bottom: none; } .modal-title { - font-weight: 600; - color: var(--text-primary); - font-size: 1rem; + font-family: 'Syne', sans-serif; + font-size: 0.92rem !important; + font-weight: 700; } -.modal-header .btn-close { - background: transparent; - border: none; - font-size: 1.2rem; - color: var(--text-secondary); - padding: 4px; +.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); - transition: all var(--transition-fast); - cursor: pointer; + 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 .btn-close:hover { - background: var(--bg-surface-hover); - color: var(--text-primary); -} - -.modal-body { - padding: 20px; -} +.modal-body { padding: 20px; } .modal-footer { - border-top: 1px solid var(--border-default); - padding: 16px 20px; - background: var(--bg-page); + border-top: 1px solid var(--border-light); + padding: 12px 20px; gap: 8px; } -/* =================================================== - LOADERS & PROGRESS - =================================================== */ -.spinner-outlook { - width: 32px; - height: 32px; - border: 3px solid var(--border-default); - border-top-color: var(--primary); - border-radius: 50%; - animation: spin 1s linear infinite; +/* 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; } -@keyframes spin { - to { transform: rotate(360deg); } +/* ============================== + 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; } -/* Skeleton loader */ -.skeleton { - background: linear-gradient(90deg, - var(--border-default) 25%, - var(--bg-surface-hover) 50%, - var(--border-default) 75% - ); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; +/* ============================== + 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); } -@keyframes skeleton-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} +/* ============================== + FOOTER (inside context bar) + ============================== */ +footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; } -/* =================================================== - UTILS - =================================================== */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0,0,0,0); - border: 0; -} - -/* Hover effects */ -.hover-lift { - transition: transform var(--transition-fast), box-shadow var(--transition-fast); -} - -.hover-lift:hover { +/* ============================== + MICRO-INTERACTIONS & UTILS + ============================== */ +.hover-shadow-sm:hover { + box-shadow: var(--shadow-md) !important; transform: translateY(-2px); - box-shadow: var(--shadow-md); -} - -.hover-scale { - transition: transform var(--transition-fast); + transition: all var(--transition-base); } .hover-scale:hover { - transform: scale(1.02); + transform: scale(1.04); + box-shadow: var(--shadow-md); + transition: all var(--transition-base); } -/* Mode test */ +.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: #fff4ce; - border-bottom-color: #ffaa44; + background: linear-gradient(90deg, #7b2d00, #c0392b) !important; } - .mode-test-banner { - background: repeating-linear-gradient(45deg, #ffaa44, #ffaa44 10px, #fff4ce 10px, #fff4ce 20px); - color: var(--text-primary); + 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; - padding: 2px; + 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; } -/* =================================================== +/* 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; +} + +/* .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; +} + +/* ============================== RESPONSIVE - =================================================== */ -@media (max-width: 1199px) { - #main { margin-left: 0; } - #sidebar { transform: translateX(-100%); } - #sidebar.sidebar-open { transform: translateX(0); } -} - + ============================== */ @media (max-width: 768px) { - .page-content { padding: 16px; } - #barre_laterale_d { width: 100%; } - .scrollmenu { flex-wrap: nowrap; } -} \ No newline at end of file + #sidebar { width: var(--sidebar-width); } + #barre_laterale_d { width: 100% !important; } + .scrollmenu { margin: 0 8px 8px; } + .page-content { padding: 0 8px; } +} diff --git a/Vue/gabarit.php b/Vue/gabarit.php index edec6a99..9f2c0ad2 100755 --- a/Vue/gabarit.php +++ b/Vue/gabarit.php @@ -72,7 +72,7 @@ $descriptionVue = $_SESSION['descriptionVue']; - +