From be2fe98b468bad45f62a7c3c2f362852f2e4201b Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 12:07:27 +0000 Subject: [PATCH] vd --- Bootstrap_new/css/theme-modern.css | 1643 +++++++++++++--------------- Vue/gabarit.php | 4 +- 2 files changed, 759 insertions(+), 888 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 16d6d3a6..9ea73fb0 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,1203 +1,1074 @@ /* ============================================================ - INTER SANTÉ — THEME MODERN - Portail Gestionnaire — v2025 - Inspiré Microsoft Outlook / Fluent Design System - Palette : Bleu #0A64AD · Gris #F3F6F9 · Turquoise #00A3E0 + INTER SANTÉ — THÈME OUTLOOK 365 PREMIUM + Inspiration Microsoft 365 - Élégant, professionnel, moderne ============================================================ */ -/* === FONTS : Segoe UI → Inter (meilleure compatibilité web) === */ +/* === 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'); -/* ============================================================ - VARIABLES — DESIGN TOKEN SYSTEM - ============================================================ */ +/* === 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; - /* ── Palette principale Fluent / Outlook ── */ - --color-primary: #0A64AD; /* Bleu Outlook profond */ - --color-primary-light: #1A7DC4; /* Hover / survol */ - --color-primary-dark: #064F8C; /* Pressed / actif fort */ - --color-primary-ghost: rgba(10, 100, 173, 0.07); - --color-primary-tint: rgba(10, 100, 173, 0.12); + /* Statuts */ + --status-success: #107c41; + --status-warning: #ffaa44; + --status-error: #d13438; + --status-info: #0078d4; + --status-urgent: #e81123; - /* ── Accent turquoise Outlook ── */ - --color-accent: #00A3E0; /* Turquoise Fluent */ - --color-accent-light: rgba(0, 163, 224, 0.12); + /* 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); - /* ── Status ── */ - --color-urgent: #C4314B; /* Rouge Fluent (Teams/Outlook) */ - --color-warning: #FFB74D; /* Orange doux */ - --color-success: #107C10; /* Vert Fluent */ - --color-success-bg: rgba(16, 124, 16, 0.08); - --color-info: #00A3E0; - --color-neutral: #8A8886; /* Gris Fluent exact */ + /* 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; - /* ── Backgrounds épurés ── */ - --bg-base: #F3F6F9; /* Gris clair Outlook */ - --bg-surface: #FFFFFF; - --bg-surface-2: #F7F9FC; - --bg-surface-hover: #EEF3F8; - --bg-sidebar: #FAFBFC; /* Sidebar CLAIR style Outlook */ - --bg-header: #0A64AD; /* Header bleu Outlook */ - - /* ── Texte ── */ - --text-primary: #1B1B1F; - --text-secondary: #484644; - --text-muted: #8A8886; - --text-inverse: #FFFFFF; - --text-on-primary: #FFFFFF; - - /* ── Bordures fines ── */ - --border-light: #E1E5EA; - --border-medium: #C8CDD4; - --border-focus: #0A64AD; - - /* ── Radius Fluent ── */ - --radius-xs: 4px; - --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; + /* 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; --radius-full: 9999px; - /* ── Ombres douces Fluent ── */ - --shadow-xs: 0 1px 2px rgba(0,0,0,.04); - --shadow-sm: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); - --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); - --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.05); - --shadow-xl: 0 16px 40px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06); - --shadow-primary: 0 4px 14px rgba(10, 100, 173, 0.30); - - /* ── Transitions Fluent ── */ - --transition-fast: 0.12s cubic-bezier(.33,1,.68,1); - --transition-base: 0.20s cubic-bezier(.33,1,.68,1); - --transition-slow: 0.35s cubic-bezier(.33,1,.68,1); - - /* ── Layout ── */ - --sidebar-width: 220px; - --sidebar-collapsed: 52px; - --header-height: 48px; - --context-width: 300px; + /* Layout */ + --header-height: 48px; + --sidebar-width: 280px; + --context-width: 320px; + + /* 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); } -/* ============================================================ - BASE - ============================================================ */ -*, *::before, *::after { box-sizing: border-box; } +/* === BASE === */ +* { box-sizing: border-box; } -html { - font-size: 14px; - scroll-behavior: smooth; - -webkit-text-size-adjust: 100%; +html { + font-size: 14px; + -webkit-font-smoothing: antialiased; } body { - font-family: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif; - background: var(--bg-base); + font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif; + background: var(--bg-page); color: var(--text-primary); line-height: 1.5; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + overflow: hidden; } -h1, h2, h3, h4, h5, h6 { - font-family: 'Inter', 'Segoe UI', sans-serif; - font-weight: 600; - line-height: 1.3; - color: var(--text-primary); -} - -/* Scrollbar Fluent */ -::-webkit-scrollbar { width: 4px; height: 4px; } +/* === SCROLLBAR STYLE OUTLOOK === */ +::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { - background: var(--border-medium); +::-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(--color-neutral); } +::-webkit-scrollbar-thumb:hover { background: var(--neutral-60); background-clip: padding-box; } +::-webkit-scrollbar-corner { background: transparent; } -/* ============================================================ - HEADER — Bleu Outlook #0A64AD - ============================================================ */ +/* =================================================== + HEADER - Style Outlook (compact et efficace) + =================================================== */ #header { height: var(--header-height); background: var(--bg-header); - border-bottom: none; - padding: 0 12px; - z-index: 1000; - position: fixed; - top: 0; left: 0; right: 0; + border-bottom: 1px solid var(--border-default); + padding: 0 8px; display: flex; align-items: center; - box-shadow: 0 1px 0 rgba(255,255,255,0.08), - 0 2px 8px rgba(10,100,173,0.25); -} - -/* Liseré turquoise bas du header */ -#header::after { - content: ''; - position: absolute; - bottom: 0; left: 0; right: 0; - height: 2px; - background: linear-gradient(90deg, - transparent 0%, - var(--color-accent) 20%, - rgba(0,163,224,0.5) 60%, - transparent 100% - ); -} - -#header.mode-test { - background: linear-gradient(90deg, #8B0000, #C4314B) !important; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; } /* Logo */ -#header .logo { gap: 8px; text-decoration: none; flex-shrink: 0; } -#header .logo img { - width: 28px; height: 28px; - object-fit: contain; - filter: brightness(0) invert(1); - opacity: 0.92; -} -#header .logo span { - font-weight: 600; - font-size: 0.93rem; - color: rgba(255,255,255,0.95); - letter-spacing: 0.01em; - white-space: nowrap; +#header .logo { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 8px; + text-decoration: none; + border-radius: var(--radius-sm); + transition: background var(--transition-fast); } -/* Toggle */ +#header .logo:hover { + background: var(--bg-surface-hover); +} + +#header .logo img { + width: 24px; + height: 24px; +} + +#header .logo span { + font-weight: 600; + font-size: 1rem; + color: var(--text-primary); + letter-spacing: 0.3px; +} + +/* Toggle sidebar */ .toggle-sidebar-btn { font-size: 1.2rem; - color: rgba(255,255,255,0.78); - cursor: pointer; - padding: 4px 7px; + color: var(--text-secondary); + padding: 6px 8px; border-radius: var(--radius-sm); + cursor: pointer; transition: all var(--transition-fast); - margin-left: 8px; - line-height: 1; + margin-left: 4px; } + .toggle-sidebar-btn:hover { - color: #fff; - background: rgba(255,255,255,0.15); + background: var(--bg-surface-hover); + color: var(--text-primary); } /* Breadcrumb */ .breadcrumb { - background: transparent !important; - padding: 0 !important; + background: transparent; + padding: 0 16px; margin: 0; - font-size: 0.75rem; -} -.breadcrumb-item a { - color: rgba(255,255,255,0.62); - text-decoration: none; - display: flex; - align-items: center; - gap: 4px; - transition: color var(--transition-fast); -} -.breadcrumb-item a:hover { color: #fff; } -.breadcrumb-item.active { - color: rgba(255,255,255,0.94); - font-weight: 500; -} -.breadcrumb-item + .breadcrumb-item::before { - content: "›"; - color: rgba(255,255,255,0.35); - font-size: 1rem; - line-height: 1; + font-size: 0.85rem; } -/* Nav icons header */ -#header .header-nav .nav-link { - color: rgba(255,255,255,0.78); - padding: 5px 8px; +.breadcrumb-item a { + color: var(--text-secondary); + text-decoration: none; + padding: 4px 6px; border-radius: var(--radius-sm); transition: all var(--transition-fast); - position: relative; - font-size: 0.88rem; -} -#header .header-nav .nav-link:hover { - color: #fff; - background: rgba(255,255,255,0.14); + display: inline-flex; + align-items: center; + gap: 4px; } -/* Badge notification */ +.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-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: 1px; right: 3px; - background: var(--color-urgent) !important; - font-size: 0.55rem; - font-weight: 700; - min-width: 15px; - height: 15px; + top: 8px; + right: 4px; + background: var(--status-error); + color: white; + font-size: 0.65rem; + font-weight: 600; + min-width: 16px; + height: 16px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; - border: 1.5px solid var(--bg-header); - animation: pulse-badge 2.5s infinite; - cursor: pointer; + border: 1px solid white; } -.badge-number:hover { transform: scale(1.15); } -/* Zone société — verre dépoli */ -.company-logo-area { +/* Company logo area */ +.entity-info { display: flex; align-items: center; - gap: 7px; - padding: 4px 10px; - border-radius: var(--radius-md); - border: 1px solid rgba(255,255,255,0.20); - background: rgba(255,255,255,0.10); - backdrop-filter: blur(4px); - transition: all var(--transition-fast); - max-width: 175px; + gap: 8px; + padding: 4px 12px; + border-radius: var(--radius-sm); + transition: background var(--transition-fast); text-decoration: none; -} -.company-logo-area:hover { - background: rgba(255,255,255,0.20); - border-color: rgba(255,255,255,0.38); -} -.company-logo-area img { height: 28px; width: auto; object-fit: contain; } -.company-logo-area .company-name { - font-size: 0.72rem; - font-weight: 500; - color: rgba(255,255,255,0.95); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + color: var(--text-primary); + height: 100%; } -/* Initiales — turquoise sur bleu */ +.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 */ .initials { - width: 28px; height: 28px; - border-radius: var(--radius-md); - background: var(--color-accent); - color: #fff; - font-weight: 700; - font-size: 0.68rem; - display: inline-flex; + width: 32px; + height: 32px; + background: var(--primary); + color: white; + font-weight: 600; + font-size: 0.85rem; + display: flex; align-items: center; justify-content: center; - box-shadow: 0 1px 4px rgba(0,0,0,0.2); - transition: transform var(--transition-fast), box-shadow var(--transition-fast); - flex-shrink: 0; -} -.nav-link:hover .initials { - transform: scale(1.06); - box-shadow: 0 2px 8px rgba(0,163,224,0.45); + border-radius: var(--radius-full); + transition: all var(--transition-fast); } -/* Dropdown */ +.nav-link:hover .initials { + background: var(--primary-hover); + transform: scale(1.05); +} + +/* Dropdown - style Outlook */ .dropdown-menu { - border: 1px solid var(--border-light); - border-radius: var(--radius-lg); + border: 1px solid var(--border-default); + border-radius: var(--radius-md); box-shadow: var(--shadow-lg); - padding: 4px; - font-size: 0.82rem; - margin-top: 6px !important; + padding: 4px 0; + margin-top: 4px !important; + min-width: 200px; background: var(--bg-surface); } + .dropdown-item { - border-radius: var(--radius-sm); - padding: 7px 11px; - gap: 9px; + padding: 8px 16px; + font-size: 0.85rem; + color: var(--text-primary); display: flex; align-items: center; - color: var(--text-secondary); + gap: 10px; transition: all var(--transition-fast); - font-size: 0.81rem; } + .dropdown-item:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); + background: var(--bg-surface-hover); + color: var(--text-primary); } -.dropdown-item i { width: 15px; color: var(--text-muted); font-size: 0.82rem; } -.dropdown-divider { border-color: var(--border-light); margin: 3px 0; } -.lang-selector img { border-radius: 2px; } +.dropdown-item i { + width: 18px; + color: var(--text-secondary); + font-size: 0.9rem; +} -/* ============================================================ - SIDEBAR — Navigation Pane Outlook (fond clair, épuré) - ============================================================ */ +/* =================================================== + SIDEBAR - Style Outlook (Fluent UI) + =================================================== */ #sidebar { width: var(--sidebar-width); background: var(--bg-sidebar); - border-right: 1px solid var(--border-light); position: fixed; top: var(--header-height); left: 0; height: calc(100vh - var(--header-height)); overflow-y: auto; - overflow-x: hidden; + border-right: 1px solid var(--border-default); + transition: width var(--transition-slow), transform var(--transition-slow); z-index: 900; - padding: 8px 6px; } -#sidebar::before { display: none; } /* Pas d'ornement — épuré Fluent */ +/* Sidebar brand */ +.sidebar-brand { + padding: 16px 20px; + display: flex; + align-items: center; + gap: 12px; + border-bottom: 1px solid var(--border-default); +} -.sidebar-nav { list-style: none; padding: 0; margin: 0; } -.sidebar-nav .nav-item { margin-bottom: 1px; } +.sidebar-brand img { + width: 28px; + height: 28px; +} -.sidebar-section-label { - font-size: 0.60rem; +.sidebar-brand span { font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-muted); - padding: 10px 10px 3px; - display: block; + font-size: 1rem; + color: var(--text-primary); } -/* Liens parent */ +/* Sidebar nav */ +.sidebar-nav { + list-style: none; + padding: 8px 0; + margin: 0; +} + +.sidebar-nav .nav-item { + margin: 2px 0; +} + +/* Parent links */ .sidebar-nav > .nav-item > .nav-link { display: flex; align-items: center; - gap: 9px; - padding: 7px 10px; - border-radius: var(--radius-md); - color: var(--text-secondary); - font-size: 0.81rem; - font-weight: 400; + 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); - color: var(--text-primary); + border-left-color: var(--neutral-80); } + +.sidebar-nav > .nav-item > .nav-link.active { + background: var(--primary-soft); + border-left-color: var(--primary); + font-weight: 500; +} + .sidebar-nav > .nav-item > .nav-link i:first-child { - font-size: 0.95rem; width: 20px; - text-align: center; - flex-shrink: 0; - color: var(--text-muted); - transition: color var(--transition-fast); -} -.sidebar-nav > .nav-item > .nav-link:hover i:first-child { color: var(--color-primary); } -.sidebar-nav > .nav-item > .nav-link span { - font-size: 0.80rem; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: 400; -} -.sidebar-nav > .nav-item > .nav-link span.active-main { - color: var(--color-primary); - font-weight: 600; + color: var(--text-secondary); + font-size: 1.1rem; } + .sidebar-nav > .nav-item > .nav-link .bi-chevron-down { - font-size: 0.60rem; - color: var(--text-muted); - transition: transform var(--transition-base), color var(--transition-fast); - flex-shrink: 0; + margin-left: auto; + font-size: 0.8rem; + color: var(--text-tertiary); + transition: transform var(--transition-fast); } + .sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); - color: var(--color-primary); } -/* Actif — accent bleu à gauche, style Outlook */ -.sidebar-nav > .nav-item > .nav-link.parent-active, -.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] { - background: var(--color-primary-ghost); - color: var(--color-primary); -} -.sidebar-nav > .nav-item > .nav-link.parent-active i:first-child, -.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] i:first-child { - color: var(--color-primary); -} -.sidebar-nav > .nav-item > .nav-link.parent-active::before { - content: ''; - position: absolute; - left: 0; top: 20%; bottom: 20%; - width: 3px; - background: var(--color-primary); - border-radius: 0 var(--radius-full) var(--radius-full) 0; -} - -/* Sous-menu */ +/* Sub-menu */ .sidebar-nav .nav-content { list-style: none; - padding: 2px 0 2px 29px; - margin: 0 0 2px 0; + padding: 4px 0 4px 44px; + margin: 0; + background: var(--bg-page); } + .sidebar-nav .nav-content li a { display: block; - padding: 5px 10px; - border-radius: var(--radius-sm); - color: var(--text-muted); - font-size: 0.77rem; - font-weight: 400; + padding: 8px 16px; + color: var(--text-secondary); text-decoration: none; + font-size: 0.85rem; transition: all var(--transition-fast); - border-left: 2px solid transparent; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.sidebar-nav .nav-content li a:hover { - color: var(--text-primary); - background: var(--bg-surface-hover); -} -/* Sous-lien actif — accent turquoise */ -.sidebar-nav .nav-content li a.active-submenu { - color: var(--color-primary); - background: var(--color-primary-tint); - border-left-color: var(--color-accent); - font-weight: 500; + border-radius: var(--radius-sm); + margin: 2px 0; } -/* ============================================================ - MAIN - ============================================================ */ +.sidebar-nav .nav-content li a:hover { + background: var(--bg-surface-hover); + color: var(--text-primary); +} + +.sidebar-nav .nav-content li a.active-submenu { + color: var(--primary); + font-weight: 500; + background: var(--primary-soft); +} + +/* =================================================== + MAIN CONTENT - Style Outlook + =================================================== */ #main { margin-left: var(--sidebar-width); - padding-top: calc(var(--header-height) + 12px); + padding-top: var(--header-height); min-height: 100vh; transition: margin-left var(--transition-slow); - padding-bottom: 28px; + background: var(--bg-page); } -@media (max-width: 1199px) { - #main { margin-left: 0 !important; } - #sidebar { - transform: translateX(-100%); - width: var(--sidebar-width) !important; - background: var(--bg-surface); - box-shadow: var(--shadow-xl); - } - #sidebar.sidebar-mobile-open { transform: translateX(0); } +/* Page content */ +.page-content { + padding: 24px; } -/* Scroll menu */ +/* Scroll Menu - style onglets Outlook */ .scrollmenu { display: flex; - gap: 0; + gap: 2px; overflow-x: auto; - padding: 0 16px; - background: var(--bg-surface); - border-bottom: 1px solid var(--border-light); - margin: 0 0 14px 0; - scrollbar-width: none; - box-shadow: var(--shadow-xs); + background: transparent; + border-bottom: 1px solid var(--border-default); + margin-bottom: 24px; + padding: 0; } -.scrollmenu::-webkit-scrollbar { display: none; } + .scrollmenu a { white-space: nowrap; - padding: 10px 14px; - font-size: 0.78rem; - font-weight: 500; + padding: 8px 16px; + font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; transition: all var(--transition-fast); - flex-shrink: 0; border-bottom: 2px solid transparent; + margin-bottom: -1px; } + .scrollmenu a:hover { - color: var(--color-primary); - border-bottom-color: rgba(10,100,173,0.30); - background: var(--color-primary-ghost); + color: var(--text-primary); + background: var(--bg-surface-hover); + border-bottom-color: var(--neutral-80); } + .scrollmenu a.active { - color: var(--color-primary); - border-bottom-color: var(--color-primary); - font-weight: 600; + color: var(--primary); + font-weight: 500; + border-bottom-color: var(--primary); } -.page-content { padding: 0 16px; } -.fixed-div { - position: sticky; - top: var(--header-height); - z-index: 500; - background: var(--bg-base); -} -.section { padding: 0; } - -/* ============================================================ - CONTEXT DRAWER - ============================================================ */ +/* =================================================== + CONTEXT DRAWER - Style Outlook + =================================================== */ .btn-info-context { position: fixed; - right: 0; + right: 16px; 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: 11px 9px; + 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; cursor: pointer; box-shadow: var(--shadow-md); display: flex; - flex-direction: column; align-items: center; - gap: 5px; - transition: all var(--transition-base); + gap: 6px; + transition: all var(--transition-fast); + font-size: 0.85rem; } -.btn-info-context:hover { - background: var(--color-primary-light); - padding-left: 13px; -} -.btn-info-context i { font-size: 14px; } +.btn-info-context:hover { + background: var(--bg-surface-hover); + color: var(--text-primary); + box-shadow: var(--shadow-lg); + right: 14px; +} + +.btn-info-context i { + font-size: 1rem; +} + +/* Context Drawer */ #barre_laterale_d { position: fixed; - right: 0; + right: -380px; top: var(--header-height); - width: var(--context-width) !important; + width: var(--context-width); height: calc(100vh - var(--header-height)); background: var(--bg-surface); - border-left: 1px solid var(--border-light); - box-shadow: var(--shadow-xl); - z-index: 1050; + border-left: 1px solid var(--border-default); + box-shadow: var(--shadow-lg); + z-index: 950; overflow-y: auto; - overflow-x: hidden; - padding: 0 !important; - display: none; + transition: right var(--transition-slow); } -#barre_laterale_d .drawer-inner { padding: 14px; } +#barre_laterale_d.show { + right: 0; +} +/* Drawer header */ .btn-cacher-contexte { display: flex; align-items: center; justify-content: space-between; width: 100%; - padding: 10px 14px; - background: var(--color-primary); - color: white; + padding: 16px 20px; + background: var(--bg-surface); border: none; + border-bottom: 1px solid var(--border-default); cursor: pointer; - font-size: 0.74rem; - font-weight: 600; - letter-spacing: 0.03em; + font-size: 0.9rem; + font-weight: 500; + color: var(--text-primary); transition: background var(--transition-fast); - margin-bottom: 14px; } -.btn-cacher-contexte:hover { background: var(--color-primary-light); } +.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); +} + +/* Context Cards */ .context-card { - background: var(--bg-surface-2); - border: 1px solid var(--border-light); + background: var(--bg-page); + border: 1px solid var(--border-default); border-radius: var(--radius-md); - padding: 10px; - margin-bottom: 8px; - transition: box-shadow var(--transition-fast); + padding: 16px; + margin: 16px; + transition: all var(--transition-fast); } -.context-card:hover { box-shadow: var(--shadow-sm); } -.context-card-label { - font-size: 0.61rem; +.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; text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted); - margin-bottom: 5px; + letter-spacing: 0.5px; + color: var(--text-tertiary); + margin-bottom: 12px; display: flex; align-items: center; - gap: 5px; + gap: 8px; } -.context-card-label i { color: var(--color-primary); font-size: 0.70rem; } -.context-card-label a { - color: var(--color-accent); - text-decoration: none; - font-weight: 600; - margin-left: auto; - font-size: 0.69rem; + +.context-card-header i { + color: var(--primary); } -.context-card-label a:hover { text-decoration: underline; } .context-btn { width: 100%; - background: white; - border: 1px solid var(--border-light); + background: var(--bg-surface); + border: 1px solid var(--border-default); border-radius: var(--radius-sm); - padding: 6px 10px; + padding: 10px 12px; text-align: left; - font-size: 0.76rem; - font-weight: 500; - color: var(--text-secondary); + font-size: 0.85rem; + color: var(--text-primary); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; - gap: 7px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + gap: 8px; } + .context-btn:hover { - background: var(--color-primary-ghost); - border-color: rgba(10,100,173,0.25); - color: var(--color-primary); + background: var(--bg-surface-hover); + border-color: var(--border-hover); + transform: translateX(2px); } -.context-btn i { color: var(--color-primary); flex-shrink: 0; font-size: 0.77rem; } -.context-btn.btn-primary-context { - background: var(--color-primary); - border-color: var(--color-primary); - color: white; +.context-btn i { + color: var(--primary); + width: 18px; } -.context-btn.btn-primary-context:hover { - background: var(--color-primary-light); - border-color: var(--color-primary-light); -} -.context-btn.btn-primary-context i { color: rgba(255,255,255,0.85); } -.context-stats { display: flex; gap: 4px; margin-bottom: 8px; } -.context-stat { - flex: 1; +/* Stats badges */ +.family-stats { + display: flex; + gap: 8px; + margin-top: 8px; +} + +.family-stats .badge { background: var(--bg-surface); - border: 1px solid var(--border-light); + border: 1px solid var(--border-default); + color: var(--text-secondary); + font-weight: 500; + padding: 4px 8px; border-radius: var(--radius-sm); - padding: 7px 4px; - text-align: center; -} -.context-stat-value { - font-size: 1rem; - font-weight: 700; - color: var(--color-primary); - line-height: 1; -} -.context-stat-label { - font-size: 0.57rem; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.05em; - margin-top: 2px; + font-size: 0.75rem; } +/* Photo container */ +.photo-container { + text-align: center; + margin: 16px; +} + +.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.61rem; + font-size: 0.7rem; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted); - display: flex; - align-items: center; - gap: 5px; - margin-bottom: 6px; + color: var(--text-tertiary); + padding: 16px 16px 8px; + letter-spacing: 0.5px; } -.recent-policies-title i { color: var(--color-primary); font-size: 0.67rem; } .policy-item { display: block; - padding: 6px 10px; - border-radius: var(--radius-sm); - border: 1px solid var(--border-light); + padding: 8px 16px; + color: var(--text-secondary); + text-decoration: none; + font-size: 0.85rem; + transition: all var(--transition-fast); border-left: 2px solid transparent; - margin-bottom: 3px; - background: white; - font-size: 0.74rem; - color: var(--text-secondary); - text-decoration: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - transition: all var(--transition-fast); } + .policy-item:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); - border-left-color: var(--color-accent); + background: var(--bg-surface-hover); + color: var(--text-primary); + border-left-color: var(--primary); } -.photo-container { text-align: center; margin-bottom: 8px; } -.photo-container img { - width: 72px; height: 72px; - object-fit: cover; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-md); - border: 2px solid var(--border-light); - transition: transform var(--transition-base); - cursor: pointer; -} -.photo-container img:hover { transform: scale(1.04); } - -.change-pwd-link { - display: flex; - align-items: center; - gap: 9px; - padding: 8px 10px; - border-radius: var(--radius-md); - background: var(--bg-surface-2); - border: 1px solid var(--border-light); - text-decoration: none; - color: var(--text-secondary); - font-size: 0.76rem; - transition: all var(--transition-fast); - margin-bottom: 8px; -} -.change-pwd-link:hover { - background: var(--color-primary-ghost); - border-color: rgba(10,100,173,0.20); - color: var(--color-primary); -} -.change-pwd-link img { width: 18px; opacity: 0.65; } - -.mode-devis-banner { - background: linear-gradient(135deg, #6B21A8, #C026D3); - color: white; - text-align: center; - font-size: 0.67rem; - font-weight: 700; - letter-spacing: 0.07em; - padding: 7px; - border-radius: var(--radius-sm); - margin-bottom: 8px; - text-transform: uppercase; -} - -/* ============================================================ - TABLES — DataTables épurées Fluent - ============================================================ */ +/* =================================================== + TABLES - Style Outlook (Fluent UI) + =================================================== */ .table-container { - background: white; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); + background: var(--bg-surface); + border-radius: var(--radius-md); + border: 1px solid var(--border-default); overflow: hidden; - border: 1px solid var(--border-light); } .table { - background: white !important; - border-collapse: collapse; width: 100%; - font-size: 0.80rem; - --bs-table-bg: transparent !important; - --bs-table-color: var(--text-primary) !important; - --bs-table-striped-color: var(--text-primary) !important; + border-collapse: collapse; + font-size: 0.85rem; + background: var(--bg-surface); } -.table > thead, -.table thead tr { background: var(--color-primary) !important; } -.table th { - background: var(--color-primary) !important; - color: white !important; - font-size: 0.70rem; +.table thead th { + background: var(--bg-page); + color: var(--text-secondary); font-weight: 600; - letter-spacing: 0.04em; + font-size: 0.8rem; + padding: 12px 16px; + border-bottom: 1px solid var(--border-default); text-transform: uppercase; - padding: 10px 12px !important; - border: none !important; + letter-spacing: 0.3px; white-space: nowrap; + text-align: left; } -.table th:hover { background: var(--color-primary-dark) !important; } -.table td { - padding: 9px 12px !important; - border-bottom: 1px solid var(--border-light) !important; - border-top: none !important; - vertical-align: middle; +.table tbody td { + padding: 12px 16px; + border-bottom: 1px solid var(--border-default); 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); } -.table tbody tr:hover { background: var(--bg-surface-hover) !important; } -.table tbody tr:hover td:first-child { - box-shadow: inset 3px 0 0 var(--color-accent); + vertical-align: middle; } -/* Badges statut */ +.table tbody tr { + transition: background var(--transition-fast); +} + +.table tbody tr:hover { + background: var(--bg-surface-hover); +} + +.table tbody tr:last-child td { + border-bottom: none; +} + +/* Status badges - style Outlook */ .badge-status { display: inline-flex; align-items: center; - gap: 4px; - padding: 2px 9px; + padding: 4px 10px; border-radius: var(--radius-full); - font-size: 0.67rem; + font-size: 0.7rem; font-weight: 600; - letter-spacing: 0.03em; + text-transform: uppercase; + letter-spacing: 0.3px; } -.badge-status::before { - content: ''; - width: 5px; height: 5px; - border-radius: 50%; - background: currentColor; - flex-shrink: 0; -} -.badge-valide { background: rgba(16,124,16,0.10); color: #107C10; } -.badge-urgent { background: rgba(196,49,75,0.10); color: #C4314B; } -.badge-attente { background: rgba(255,183,77,0.15); color: #8A5000; } -.badge-info { background: rgba(0,163,224,0.12); color: #0078A8; } -.badge-inactive { background: rgba(138,136,134,0.12); color: #6B6966; } -/* ============================================================ - CARDS - ============================================================ */ +.badge-success { + background: #dff6dd; + color: var(--status-success); +} + +.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 + =================================================== */ .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), transform var(--transition-base); -} -.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } -.card-header { - background: transparent; - border-bottom: 1px solid var(--border-light); - padding: 12px 16px; - font-weight: 600; - font-size: 0.84rem; + border: 1px solid var(--border-default); + border-radius: var(--radius-md); + box-shadow: var(--shadow-card); + transition: all var(--transition-fast); + overflow: hidden; } -/* ============================================================ - BOUTONS — Fluent - ============================================================ */ +.card:hover { + box-shadow: var(--shadow-sm); + border-color: var(--border-hover); +} + +.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; +} + +.card-header i { + color: var(--primary); +} + +.card-body { + padding: 20px; +} + +/* =================================================== + BUTTONS - Style Outlook + =================================================== */ .btn { - border-radius: var(--radius-md) !important; - font-size: 0.79rem; + padding: 8px 20px; + border-radius: var(--radius-sm); + font-size: 0.85rem; font-weight: 500; - font-family: 'Inter', 'Segoe UI', sans-serif; - padding: 6px 14px; - transition: all var(--transition-fast); border: 1px solid transparent; + transition: all var(--transition-fast); display: inline-flex; align-items: center; - gap: 5px; - line-height: 1.4; + 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); } .btn-primary { - background: var(--color-primary) !important; - border-color: var(--color-primary) !important; - color: white !important; - box-shadow: 0 1px 4px rgba(10,100,173,0.22); + background: var(--primary); + border-color: var(--primary); + color: white; } + .btn-primary:hover { - background: var(--color-primary-light) !important; - border-color: var(--color-primary-light) !important; - box-shadow: 0 2px 8px rgba(10,100,173,0.28); + background: var(--primary-hover); + border-color: var(--primary-hover); transform: translateY(-1px); -} -.btn-primary:active { background: var(--color-primary-dark) !important; transform: none; } - -.btn-info { - background: var(--color-accent) !important; - border-color: var(--color-accent) !important; - color: white !important; -} -.btn-info:hover { - background: #0090C8 !important; - border-color: #0090C8 !important; - transform: translateY(-1px); -} - -.btn-warning { - background: var(--color-warning) !important; - border-color: var(--color-warning) !important; - color: #1B1B1F !important; -} - -.btn-default, .btn-secondary, .btn-outline-secondary { - background: white !important; - border: 1px solid var(--border-medium) !important; - color: var(--text-secondary) !important; -} -.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover { - background: var(--bg-surface-hover) !important; - border-color: var(--color-primary) !important; - color: var(--color-primary) !important; + box-shadow: var(--shadow-sm); } .btn-outline-primary { - background: transparent !important; - border: 1px solid var(--color-primary) !important; - color: var(--color-primary) !important; + background: transparent; + border-color: var(--primary); + color: var(--primary); } -.btn-outline-primary:hover { background: var(--color-primary-ghost) !important; } -.btn-sm { padding: 4px 11px; font-size: 0.73rem; } -.btn-lg { padding: 9px 20px; font-size: 0.88rem; } +.btn-outline-primary:hover { + background: var(--primary-soft); +} -/* ============================================================ - FORMULAIRES - ============================================================ */ +.btn-sm { + padding: 4px 12px; + font-size: 0.75rem; +} + +.btn-lg { + padding: 10px 24px; + font-size: 0.95rem; +} + +/* =================================================== + FORMS - Style Outlook + =================================================== */ .form-control, .form-select { - border: 1px solid var(--border-medium); - border-radius: var(--radius-md); - font-size: 0.80rem; - font-family: 'Inter', 'Segoe UI', sans-serif; + border: 1px solid var(--border-default); + border-radius: var(--radius-sm); + padding: 8px 12px; + font-size: 0.85rem; color: var(--text-primary); - background: white; - height: auto !important; - padding: 6px 10px; - transition: border-color var(--transition-fast), box-shadow var(--transition-fast); + background: var(--bg-surface); + transition: all var(--transition-fast); + width: 100%; + height: auto; } + +.form-control:hover, .form-select:hover { + border-color: var(--border-hover); +} + .form-control:focus, .form-select:focus { - border-color: var(--color-primary); - box-shadow: 0 0 0 2px rgba(10,100,173,0.15); + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1); outline: none; } -.form-control::placeholder { color: var(--text-muted); } -.form-label { font-size: 0.77rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; } -td input[readonly], td select[readonly], -td input[disabled], td select[disabled] { - background: var(--bg-surface-2) !important; - color: var(--text-secondary); +.form-label { font-weight: 500; -} - -/* ============================================================ - LÉGENDES - ============================================================ */ -legend, #chemin, fieldset legend, form legend { - background: var(--color-primary) !important; - color: white !important; - font-size: 0.74rem; - font-weight: 600; - letter-spacing: 0.03em; - padding: 5px 12px; - border-radius: var(--radius-sm); + color: var(--text-secondary); + margin-bottom: 6px; + font-size: 0.8rem; display: block; } -/* ============================================================ - MODALS — Fluent Dialog - ============================================================ */ +/* =================================================== + MODALS - Style Outlook + =================================================== */ .modal-content { - border: none; - border-radius: var(--radius-xl); - box-shadow: var(--shadow-xl); + border: 1px solid var(--border-default); + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); overflow: hidden; } + .modal-header { - background: var(--color-primary) !important; - color: white !important; - padding: 14px 18px; - border-bottom: none; + background: var(--bg-page); + border-bottom: 1px solid var(--border-default); + padding: 16px 20px; } + .modal-title { - font-size: 0.88rem !important; font-weight: 600; + color: var(--text-primary); + font-size: 1rem; } -.modal-header .close, .modal-header .btn-close { - background: rgba(255,255,255,0.18) !important; - color: white !important; - border: 1px solid rgba(255,255,255,0.25) !important; - border-radius: var(--radius-sm); - opacity: 1; - font-size: 0.72rem; - padding: 3px 9px; - transition: background var(--transition-fast); -} -.modal-header .close:hover { background: rgba(255,255,255,0.30) !important; } -.modal-body { padding: 18px; font-size: 0.81rem; } -.modal-footer { border-top: 1px solid var(--border-light); padding: 10px 18px; gap: 7px; } -.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; } - -/* ============================================================ - ONGLETS — Style Outlook (soulignement bleu) - ============================================================ */ -.nav-tabs { - border-bottom: 1px solid var(--border-light); - gap: 0; - background: var(--bg-surface); - padding: 0 4px; -} -.nav-tabs .nav-link { +.modal-header .btn-close { + background: transparent; + border: none; + font-size: 1.2rem; color: var(--text-secondary); - border: none; - border-bottom: 2px solid transparent; - border-radius: 0; - padding: 8px 14px; - font-size: 0.78rem; - font-weight: 500; + padding: 4px; + border-radius: var(--radius-sm); transition: all var(--transition-fast); - margin-bottom: -1px; -} -.nav-tabs .nav-link:hover { - color: var(--color-primary); - background: var(--color-primary-ghost); - border-bottom-color: rgba(10,100,173,0.30); -} -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-link.active { - color: var(--color-primary) !important; - background: transparent !important; - border-bottom: 2px solid var(--color-primary) !important; - font-weight: 600; + cursor: pointer; } -/* ============================================================ - ALERTES - ============================================================ */ -.alert { - border: none; - border-radius: var(--radius-md); - font-size: 0.79rem; - border-left: 3px solid; - padding: 10px 14px; +.modal-header .btn-close:hover { + background: var(--bg-surface-hover); + color: var(--text-primary); } -.alert-success { border-color: var(--color-success); background: var(--color-success-bg); color: #0A5C0A; } -.alert-danger { border-color: var(--color-urgent); background: rgba(196,49,75,0.08); color: #8B0023; } -.alert-warning { border-color: var(--color-warning); background: rgba(255,183,77,0.12); color: #7A4800; } -.alert-info { border-color: var(--color-accent); background: var(--color-accent-light); color: #005878; } -/* ============================================================ - FOOTER - ============================================================ */ -footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.70rem; } - -/* ============================================================ - MICRO-INTERACTIONS & UTILITAIRES - ============================================================ */ -.hover-shadow-sm:hover { - box-shadow: var(--shadow-md) !important; - transform: translateY(-1px); - transition: all var(--transition-base); +.modal-body { + padding: 20px; } -.hover-scale:hover { - transform: scale(1.03); - box-shadow: var(--shadow-md); - transition: all var(--transition-base); -} -.transition { transition: all var(--transition-base); } -/* Skeleton */ +.modal-footer { + border-top: 1px solid var(--border-default); + padding: 16px 20px; + background: var(--bg-page); + 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; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* Skeleton loader */ .skeleton { - background: linear-gradient(90deg, - var(--bg-surface-2) 25%, - var(--border-light) 50%, - var(--bg-surface-2) 75% + 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.6s infinite; - border-radius: var(--radius-sm); + animation: skeleton-loading 1.5s infinite; } + @keyframes skeleton-loading { - 0% { background-position: 200% 0; } + 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } -/* AJAX overlay */ -.ajax-loading { position: relative; pointer-events: none; opacity: 0.55; } -.ajax-loading::after { - content: ''; +/* =================================================== + UTILS + =================================================== */ +.sr-only { position: absolute; - inset: 0; - background: rgba(255,255,255,0.55); - border-radius: inherit; - z-index: 10; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; } -/* Pulse notification */ -@keyframes pulse-badge { - 0%, 100% { box-shadow: 0 0 0 0 rgba(196,49,75,0.40); } - 50% { box-shadow: 0 0 0 4px rgba(196,49,75,0.00); } +/* Hover effects */ +.hover-lift { + transition: transform var(--transition-fast), box-shadow var(--transition-fast); +} + +.hover-lift:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.hover-scale { + transition: transform var(--transition-fast); +} + +.hover-scale:hover { + transform: scale(1.02); } /* Mode test */ .mode-test-active #header { - background: linear-gradient(90deg, #8B0000, #C4314B) !important; + background: #fff4ce; + border-bottom-color: #ffaa44; } + .mode-test-banner { - background: repeating-linear-gradient( - 45deg, #FFD700, #FFD700 10px, #1B1B1F 10px, #1B1B1F 20px - ); - color: white; + background: repeating-linear-gradient(45deg, #ffaa44, #ffaa44 10px, #fff4ce 10px, #fff4ce 20px); + color: var(--text-primary); text-align: center; - font-weight: 700; - font-size: 0.67rem; - padding: 3px; - letter-spacing: 0.12em; -} - -/* Bootstrap-Select */ -.filter-option-inner-inner { background-color: var(--bg-surface-2) !important; } - -/* Liens h6 contexte */ -h6 a { - text-decoration: none; - color: var(--color-primary); + font-size: 0.7rem; font-weight: 600; - transition: all var(--transition-fast); -} -h6 a:hover { - color: var(--color-accent); - text-decoration: underline; + padding: 2px; } -/* Textarea */ -.mb-2 textarea { - font-size: 0.77rem; - width: 100%; - border: 1px solid var(--border-medium); - border-radius: var(--radius-sm); - padding: 7px; - font-family: 'Inter', 'Segoe UI', sans-serif; -} - -/* sr-only */ -.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; -} - -/* ============================================================ - SIDEBAR TOGGLE — déclaré en dernier pour override Bootstrap - ============================================================ */ -#sidebar { - transition: width 0.28s cubic-bezier(.33,1,.68,1), - transform 0.28s cubic-bezier(.33,1,.68,1) !important; - overflow: hidden !important; - will-change: width; -} -#main { - transition: margin-left 0.28s cubic-bezier(.33,1,.68,1) !important; - will-change: margin-left; -} - -body.toggle-sidebar #sidebar { width: var(--sidebar-collapsed) !important; } -body.toggle-sidebar #main { margin-left: var(--sidebar-collapsed) !important; } - -body.toggle-sidebar #sidebar .nav-link span, -body.toggle-sidebar #sidebar .nav-link .bi-chevron-down, -body.toggle-sidebar #sidebar .sidebar-section-label { - opacity: 0; width: 0; overflow: hidden; - display: inline-block; - transition: opacity 0.18s ease, width 0.18s ease; -} -body:not(.toggle-sidebar) #sidebar .nav-link span, -body:not(.toggle-sidebar) #sidebar .nav-link .bi-chevron-down { - opacity: 1; width: auto; - transition: opacity 0.22s ease 0.06s, width 0.22s ease; -} -body.toggle-sidebar #sidebar .nav-link { justify-content: center !important; padding: 9px 0 !important; } -body.toggle-sidebar #sidebar .nav-link i:first-child { font-size: 1.1rem !important; width: auto !important; margin: 0 !important; } -body.toggle-sidebar #sidebar .nav-link.parent-active::before { display: none; } -body.toggle-sidebar #sidebar .nav-content { display: none !important; } - -/* ============================================================ +/* =================================================== RESPONSIVE - ============================================================ */ -@media (max-width: 768px) { - #barre_laterale_d { width: 100% !important; } - .scrollmenu { margin: 0; } - .page-content { padding: 0 8px; } - .modal-content { border-radius: var(--radius-md); } + =================================================== */ +@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 diff --git a/Vue/gabarit.php b/Vue/gabarit.php index 968e895d..edec6a99 100755 --- a/Vue/gabarit.php +++ b/Vue/gabarit.php @@ -72,7 +72,7 @@ $descriptionVue = $_SESSION['descriptionVue']; - + @@ -105,7 +105,7 @@ $descriptionVue = $_SESSION['descriptionVue']; - +