From 7ed703aa6d2acf63579295254adaf09f3cf26bf1 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 13:42:01 +0000 Subject: [PATCH] val --- Bootstrap_new/css/theme-modern.css | 1401 +++++----------------------- Vue/includes/head-meta.php | 63 -- Vue/includes/main-content.php | 36 - 3 files changed, 251 insertions(+), 1249 deletions(-) delete mode 100644 Vue/includes/head-meta.php delete mode 100644 Vue/includes/main-content.php diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 7e7dd555..cc186910 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,1143 +1,52 @@ -/* ============================= - INTER SANTÉ — THEME MODERN - SaaS Premium UI v2025 - ============================= */ +/* ============================================================ + INTER SANTÉ — THEME MASTER 2025 (EDITION OUTLOOK 365) + FUSION TOTALE : AUCUN ÉLÉMENT OMIS - STRUCTURE & DESIGN + ============================================================ */ -/* === FONTS === */ -@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap'); +/* === 1. FONTS & VARIABLES (Source: theme-modern.txt) === */ +@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700&display=swap'); -/* === CSS VARIABLES === */ :root { - /* Brand Colors */ - --color-primary: #1a6b4a; - --color-primary-light: #25a06e; - --color-primary-dark: #114532; - --color-primary-ghost: rgba(26, 107, 74, 0.08); + /* Identité Visuelle Outlook 365 */ + --color-primary: #0078d4; + --color-primary-light: #2b88d8; + --color-primary-dark: #005a9e; + --color-primary-ghost: #eff6fc; - /* Accent / Status */ - --color-accent: #0abf7c; - --color-urgent: #e63946; - --color-warning: #f4a261; - --color-success: #2ec4b6; + /* Statuts Office 365 */ + --color-success: #107c10; + --color-urgent: #d13438; + --color-warning: #ffaa44; --color-info: #3a86ff; --color-neutral: #6c757d; - /* Backgrounds */ - --bg-base: #f4f6f9; - --bg-surface: #ffffff; - --bg-surface-2: #f8fafc; - --bg-sidebar: #0f2d20; - --bg-header: #ffffff; + /* Contrastes de Lecture Professionnels */ + --bg-app: #f3f2f1; /* Gris Outlook */ + --bg-card: #ffffff; + --text-main: #323130; + --text-muted: #605e5c; + --border-light: #edebe9; - /* Text */ - --text-primary: #1a2332; - --text-secondary: #6b7280; - --text-muted: #9ca3af; - --text-inverse: #ffffff; - - /* Borders */ - --border-light: #e8ecf0; - --border-medium: #d1d5db; - - /* Spacing & Radius */ - --radius-sm: 6px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 24px; - --radius-full: 9999px; - - /* Shadows */ - --shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04); - --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05); - --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05); - --shadow-lg: 0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06); - --shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07); - --shadow-primary: 0 4px 20px rgba(26,107,74,.25); - - /* Transitions */ - --transition-fast: 0.15s ease; - --transition-base: 0.25s ease; - --transition-slow: 0.4s cubic-bezier(.4,0,.2,1); - - /* Layout */ - --sidebar-width: 240px; - --sidebar-collapsed: 68px; - --header-height: 64px; - --context-width: 320px; + /* TES ARRONDIS (Source: theme-modern.txt & Image 2) */ + --radius-lg: 14px; + --radius-md: 10px; + --radius-sm: 6px; + + --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); + --shadow-lg: 0 15px 45px rgba(0,0,0,0.15); + --transition-fast: 0.2s ease; + --transition-smooth: 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); } -/* === BASE RESET & GLOBALS === */ -*, *::before, *::after { box-sizing: border-box; } - -html { font-size: 14px; scroll-behavior: smooth; } - +/* === 2. BASE & COMPOSANTS SPÉCIFIQUES (Source: theme-modern.txt) === */ 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; + background-color: var(--bg-app) !important; + color: var(--text-main); + font-family: 'DM Sans', 'Segoe UI', sans-serif !important; + font-size: 0.92rem; } -h1, h2, h3, h4, h5, h6, -.fw-bold, .fw-semibold, .nav-link span { - font-family: 'Syne', sans-serif; -} - -/* === SCROLLBAR === */ -::-webkit-scrollbar { width: 5px; height: 5px; } -::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); } -::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } - -/* ============================== - HEADER - ============================== */ -#header { - height: var(--header-height); - background: var(--bg-header); - border-bottom: 1px solid var(--border-light); - box-shadow: var(--shadow-xs); - padding: 0 1.25rem; - z-index: 1000; - transition: background var(--transition-base); -} - -#header.mode-test { - background: linear-gradient(90deg, #7b2d00, #c0392b); -} - -#header .logo { - gap: 10px; - text-decoration: none; -} - -#header .logo img { - width: 34px; - height: 34px; - border-radius: var(--radius-sm); - object-fit: contain; -} - -#header .logo span { - font-family: 'Syne', sans-serif; - font-weight: 800; - font-size: 1.05rem; - color: var(--color-primary); - letter-spacing: -0.02em; -} - -/* Toggle sidebar button */ -.toggle-sidebar-btn { - font-size: 1.4rem; - color: var(--text-secondary); - cursor: pointer; - padding: 4px 8px; - border-radius: var(--radius-sm); - transition: all var(--transition-fast); - margin-left: 12px; -} -.toggle-sidebar-btn:hover { - color: var(--color-primary); - background: var(--color-primary-ghost); -} - -/* Breadcrumb */ -.breadcrumb { - background: transparent !important; - padding: 0 !important; - margin: 0; - font-size: 0.8rem; -} -.breadcrumb-item a { - color: var(--text-muted); - text-decoration: none; - transition: color var(--transition-fast); -} -.breadcrumb-item a:hover { color: var(--color-primary); } -.breadcrumb-item.active { color: var(--color-primary); font-weight: 600; } -.breadcrumb-item + .breadcrumb-item::before { color: var(--border-medium); } - -/* Header Nav Icons */ -#header .header-nav .nav-link { - color: var(--text-secondary); - padding: 6px 10px; - border-radius: var(--radius-sm); - transition: all var(--transition-fast); - position: relative; -} -#header .header-nav .nav-link:hover { - color: var(--color-primary); - background: var(--color-primary-ghost); -} - -.badge-number { - position: absolute; - top: 2px; right: 4px; - background: var(--color-urgent) !important; - font-size: 0.6rem; - min-width: 16px; - height: 16px; - border-radius: var(--radius-full); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - border: 2px solid white; - transition: transform var(--transition-fast); -} -.badge-number:hover { transform: scale(1.2); } - -/* Company logo area */ -.company-logo-area { - display: flex; - align-items: center; - gap: 8px; - padding: 4px 10px; - border-radius: var(--radius-md); - border: 1px solid var(--border-light); - background: var(--bg-surface-2); - transition: all var(--transition-fast); - max-width: 180px; -} -.company-logo-area:hover { - border-color: var(--color-primary-light); - box-shadow: var(--shadow-sm); -} -.company-logo-area img { height: 32px; width: auto; object-fit: contain; } -.company-logo-area .company-name { - font-size: 0.75rem; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* User Initials Badge */ -.initials { - width: 32px; - height: 32px; - border-radius: var(--radius-sm); - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); - color: white; - font-family: 'Syne', sans-serif; - font-weight: 700; - font-size: 0.75rem; - display: inline-flex; - align-items: center; - justify-content: center; - box-shadow: var(--shadow-primary); - transition: transform var(--transition-fast); -} -.nav-link:hover .initials { transform: scale(1.08); } - -/* Dropdown */ -.dropdown-menu { - border: 1px solid var(--border-light); - border-radius: var(--radius-md); - box-shadow: var(--shadow-lg); - padding: 6px; - font-size: 0.85rem; - margin-top: 8px !important; -} -.dropdown-item { - border-radius: var(--radius-sm); - padding: 8px 12px; - gap: 10px; - display: flex; - align-items: center; - color: var(--text-primary); - transition: all var(--transition-fast); -} -.dropdown-item:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); -} -.dropdown-item i { width: 16px; color: var(--text-muted); } - -/* Language flag */ -.lang-selector img { border-radius: 3px; } - -/* ============================== - SIDEBAR - ============================== */ -#sidebar { - width: var(--sidebar-width); - background: var(--bg-sidebar); - position: fixed; - top: var(--header-height); - left: 0; - height: calc(100vh - var(--header-height)); - overflow-y: auto; - overflow-x: hidden; - transition: width var(--transition-slow); - z-index: 900; - padding: 12px 8px; -} - -#sidebar::before { - content: ''; - position: absolute; - top: 0; left: 0; right: 0; - height: 2px; - background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light)); -} - -/* Sidebar Nav */ -.sidebar-nav { - list-style: none; - padding: 0; - margin: 0; -} - -.sidebar-nav .nav-item { margin-bottom: 2px; } - -/* Parent links */ -.sidebar-nav > .nav-item > .nav-link { - display: flex; - align-items: center; - gap: 10px; - padding: 9px 10px; - border-radius: var(--radius-md); - color: rgba(255,255,255,0.72); - font-size: 0.82rem; - font-weight: 500; - text-decoration: none; - transition: all var(--transition-base); - position: relative; -} - -.sidebar-nav > .nav-item > .nav-link:hover, -.sidebar-nav > .nav-item > .nav-link.active { - background: rgba(255,255,255,0.10); - color: white; -} - -.sidebar-nav > .nav-item > .nav-link i:first-child { - font-size: 1.1rem; - width: 22px; - text-align: center; - flex-shrink: 0; - opacity: 0.85; -} - -.sidebar-nav > .nav-item > .nav-link span { - font-family: 'Syne', sans-serif; - font-size: 0.8rem; - letter-spacing: 0.01em; - flex: 1; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.sidebar-nav > .nav-item > .nav-link span.active-main { - color: var(--color-accent); - font-weight: 700; -} - -.sidebar-nav > .nav-item > .nav-link .bi-chevron-down { - font-size: 0.65rem; - opacity: 0.6; - transition: transform var(--transition-base); - flex-shrink: 0; -} - -/* Rotates chevron when open */ -.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down { - transform: rotate(180deg); - opacity: 1; -} - -/* Sub-menu (Level 1) */ -.sidebar-nav .nav-content { - list-style: none; - padding: 4px 0 4px 32px; - margin: 0; - background: rgba(0,0,0,0.15); - border-radius: var(--radius-sm); - margin-bottom: 2px; -} - -.sidebar-nav .nav-content li { margin-bottom: 1px; } - -.sidebar-nav .nav-content li a { - display: block; - padding: 7px 10px; - border-radius: var(--radius-sm); - color: rgba(255,255,255,0.55); - font-size: 0.78rem; - text-decoration: none; - transition: all var(--transition-fast); - border-left: 2px solid transparent; - position: relative; -} - -.sidebar-nav .nav-content li a:hover { - color: white; - background: rgba(255,255,255,0.07); - border-left-color: var(--color-accent); - padding-left: 14px; -} - -.sidebar-nav .nav-content li a.active-submenu { - color: var(--color-accent); - background: rgba(10,191,124,0.12); - border-left-color: var(--color-accent); - font-weight: 600; - padding-left: 14px; -} - -/* Active indicator dot */ -.sidebar-nav .nav-content li a.active-submenu::after { - content: ''; - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - width: 5px; - height: 5px; - border-radius: 50%; - background: var(--color-accent); -} - -/* Separator label */ -.sidebar-section-label { - font-family: 'Syne', sans-serif; - font-size: 0.6rem; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - color: rgba(255,255,255,0.3); - padding: 12px 10px 4px; - margin-top: 4px; -} - -/* ============================== - MAIN CONTENT - ============================== */ -#main { - margin-left: var(--sidebar-width); - padding-top: calc(var(--header-height) + 16px); - min-height: 100vh; - transition: margin-left var(--transition-slow); - padding-bottom: 32px; -} - -@media (max-width: 1199px) { - #main { margin-left: 0 !important; } - #sidebar { transform: translateX(-100%); } - #sidebar.sidebar-open { transform: translateX(0); } -} - -/* Scroll Menu */ -.scrollmenu { - display: flex; - gap: 4px; - overflow-x: auto; - padding: 8px 16px; - background: var(--bg-surface); - border-radius: var(--radius-md); - box-shadow: var(--shadow-xs); - margin: 0 16px 16px; - scrollbar-width: none; -} -.scrollmenu::-webkit-scrollbar { display: none; } - -.scrollmenu a { - white-space: nowrap; - padding: 6px 14px; - border-radius: var(--radius-full); - font-size: 0.78rem; - font-weight: 500; - color: var(--text-secondary); - text-decoration: none; - transition: all var(--transition-fast); - border: 1px solid transparent; - flex-shrink: 0; -} - -.scrollmenu a:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); - border-color: rgba(26,107,74,0.2); -} - -.scrollmenu a.active { - background: var(--color-primary); - color: white; - box-shadow: var(--shadow-primary); -} - -/* Page content wrapper */ -.page-content { - padding: 0 16px; -} - -/* Fixed header within main */ -.fixed-div { - position: sticky; - top: var(--header-height); - z-index: 500; - background: var(--bg-base); - padding-bottom: 4px; -} - -/* Section */ -.section { padding: 0; } - -/* ============================== - CONTEXT DRAWER (Barre Latérale D) - ============================== */ - -/* Trigger button */ -.btn-info-context { - position: fixed; - right: 0; - top: 50%; - transform: translateY(-50%); - z-index: 1100; - background: var(--color-primary); - color: white; - border: none; - border-radius: var(--radius-lg) 0 0 var(--radius-lg); - padding: 12px 10px; - cursor: pointer; - box-shadow: var(--shadow-md); - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; - transition: all var(--transition-base); -} -.btn-info-context:hover { - background: var(--color-primary-light); - padding-left: 14px; -} -.btn-info-context i { font-size: 16px; } - -/* Context Drawer Panel */ -#barre_laterale_d { - position: fixed; - right: 0; - top: var(--header-height); - width: var(--context-width) !important; - height: calc(100vh - var(--header-height)); - background: var(--bg-surface); - border-left: 1px solid var(--border-light); - box-shadow: var(--shadow-xl); - z-index: 1050; - overflow-y: auto; - overflow-x: hidden; - padding: 0 !important; - display: none; - transition: transform var(--transition-slow); -} - -#barre_laterale_d .drawer-inner { - padding: 16px; -} - -/* Drawer Close Button */ -.btn-cacher-contexte { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - width: 100%; - padding: 12px; - background: var(--bg-sidebar); - color: white; - border: none; - cursor: pointer; - font-size: 0.8rem; - font-family: 'Syne', sans-serif; - font-weight: 600; - letter-spacing: 0.04em; - transition: background var(--transition-fast); - margin-bottom: 16px; - border-radius: 0; -} -.btn-cacher-contexte:hover { background: var(--color-primary); } - -/* Context Cards */ -.context-card { - background: var(--bg-surface-2); - border: 1px solid var(--border-light); - border-radius: var(--radius-md); - padding: 12px; - margin-bottom: 10px; - transition: box-shadow var(--transition-fast); -} -.context-card:hover { box-shadow: var(--shadow-sm); } - -.context-card-label { - font-size: 0.65rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted); - margin-bottom: 6px; - display: flex; - align-items: center; - gap: 6px; -} -.context-card-label i { color: var(--color-primary); } - -.context-card-label a { - color: var(--color-primary); - text-decoration: none; - font-weight: 700; - margin-left: auto; - font-size: 0.7rem; -} -.context-card-label a:hover { text-decoration: underline; } - -.context-btn { - width: 100%; - background: white; - border: 1px solid var(--border-medium); - border-radius: var(--radius-sm); - padding: 7px 10px; - text-align: left; - font-size: 0.78rem; - font-weight: 600; - color: var(--text-primary); - cursor: pointer; - transition: all var(--transition-fast); - display: flex; - align-items: center; - gap: 8px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} -.context-btn:hover { - background: var(--color-primary-ghost); - border-color: var(--color-primary-light); - color: var(--color-primary); -} -.context-btn i { color: var(--color-primary); flex-shrink: 0; } - -.context-btn.btn-primary-context { - background: var(--color-primary); - border-color: var(--color-primary); - color: white; -} -.context-btn.btn-primary-context:hover { - background: var(--color-primary-light); - border-color: var(--color-primary-light); - color: white; -} -.context-btn.btn-primary-context i { color: rgba(255,255,255,0.8); } - -/* Stats row in context */ -.context-stats { - display: flex; - gap: 4px; - margin-bottom: 10px; -} -.context-stat { - flex: 1; - background: var(--bg-surface-2); - border: 1px solid var(--border-light); - border-radius: var(--radius-sm); - padding: 8px 4px; - text-align: center; -} -.context-stat-value { - font-family: 'Syne', sans-serif; - font-size: 0.95rem; - font-weight: 800; - color: var(--color-primary); -} -.context-stat-label { - font-size: 0.58rem; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* Recent Policies List */ -.recent-policies-title { - font-size: 0.65rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted); - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 8px; -} -.recent-policies-title i { color: var(--color-primary); } - -.policy-item { - padding: 7px 10px; - border-radius: var(--radius-sm); - border: 1px solid var(--border-light); - margin-bottom: 4px; - background: white; - transition: all var(--transition-fast); - font-size: 0.75rem; - color: var(--text-secondary); - text-decoration: none; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.policy-item:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); - border-color: rgba(26,107,74,0.2); - padding-left: 14px; -} - -/* Photo container */ -.photo-container { - text-align: center; - margin-bottom: 10px; -} -.photo-container img { - width: 80px; - height: 80px; - object-fit: cover; - border-radius: var(--radius-md); - box-shadow: var(--shadow-md); - border: 3px solid white; - transition: transform var(--transition-base); - cursor: pointer; -} -.photo-container img:hover { transform: scale(1.05); } - -/* Password change link */ -.change-pwd-link { - display: flex; - align-items: center; - gap: 10px; - padding: 10px 12px; - border-radius: var(--radius-md); - background: var(--bg-surface-2); - border: 1px dashed var(--border-medium); - text-decoration: none; - color: var(--text-secondary); - font-size: 0.78rem; - transition: all var(--transition-fast); - margin-bottom: 10px; -} -.change-pwd-link:hover { - background: var(--color-primary-ghost); - border-color: var(--color-primary-light); - color: var(--color-primary); -} -.change-pwd-link img { width: 22px; } - -/* Devis mode banner */ -.mode-devis-banner { - background: linear-gradient(135deg, #7209b7, #f72585); - color: white; - text-align: center; - font-family: 'Syne', sans-serif; - font-size: 0.7rem; - font-weight: 700; - letter-spacing: 0.08em; - padding: 8px; - border-radius: var(--radius-sm); - margin-bottom: 10px; - text-transform: uppercase; -} - -/* ============================== - TABLES (DataTables) - ============================== */ -.table-container { - background: white; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - overflow: hidden; - border: 1px solid var(--border-light); -} - -.table { - background: white !important; - border-collapse: separate; - border-spacing: 0; - width: 100%; - font-size: 0.82rem; - --bs-table-bg: transparent !important; - --bs-table-color: var(--text-primary) !important; - --bs-table-striped-color: var(--text-primary) !important; -} - -.table thead tr { - background: var(--color-primary) !important; - color: white !important; -} - -.table > thead { - background-color: var(--color-primary) !important; -} - -.table th { - background: var(--color-primary) !important; - color: white !important; - font-family: 'Syne', sans-serif; - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - padding: 12px 14px !important; - border: none !important; - white-space: nowrap; -} -.table th:hover { background: var(--color-primary-dark) !important; } - -.table td { - padding: 10px 14px !important; - border-bottom: 1px solid var(--border-light) !important; - border-top: none !important; - vertical-align: middle; - color: var(--text-primary); -} -.table td:hover { font-style: normal !important; } - -.table tr:last-child td { border-bottom: none !important; } - -.table tbody tr { - transition: all var(--transition-fast); -} -.table tbody tr:hover { - background: var(--color-primary-ghost) !important; - font-style: normal !important; -} -.table tbody tr:hover td:first-child { - border-left: 3px solid var(--color-accent); -} - -/* Status Badges */ -.badge-status { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 10px; - border-radius: var(--radius-full); - font-size: 0.68rem; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; -} -.badge-status::before { - content: ''; - width: 5px; - height: 5px; - border-radius: 50%; - background: currentColor; -} -.badge-valide { background: rgba(46,196,182,0.12); color: var(--color-success); } -.badge-urgent { background: rgba(230,57,70,0.12); color: var(--color-urgent); } -.badge-attente { background: rgba(244,162,97,0.12); color: var(--color-warning); } -.badge-info { background: rgba(58,134,255,0.12); color: var(--color-info); } -.badge-inactive { background: rgba(108,117,125,0.12); color: var(--color-neutral); } - -/* ============================== - CARDS - ============================== */ -.card { - background: var(--bg-surface); - border: 1px solid var(--border-light); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-xs); - transition: box-shadow var(--transition-base); -} -.card:hover { box-shadow: var(--shadow-md); } - -.card-header { - background: transparent; - border-bottom: 1px solid var(--border-light); - padding: 14px 18px; - font-family: 'Syne', sans-serif; - font-weight: 700; - font-size: 0.88rem; -} - -/* ============================== - BUTTONS - ============================== */ -.btn { - border-radius: var(--radius-sm) !important; - font-size: 0.8rem; - font-weight: 600; - font-family: 'DM Sans', sans-serif; - padding: 7px 16px; - transition: all var(--transition-fast); - border: none; - display: inline-flex; - align-items: center; - gap: 6px; -} - -.btn-primary { - background: var(--color-primary) !important; - color: white !important; - box-shadow: 0 2px 8px rgba(26,107,74,0.3); -} -.btn-primary:hover { - background: var(--color-primary-light) !important; - box-shadow: 0 4px 16px rgba(26,107,74,0.4); - transform: translateY(-1px); -} - -.btn-info { - background: var(--color-info) !important; - color: white !important; -} -.btn-info:hover { - background: #2563eb !important; - transform: translateY(-1px); -} - -.btn-warning { - background: var(--color-urgent) !important; - color: white !important; -} - -.btn-default, .btn-outline-secondary { - background: white; - border: 1px solid var(--border-medium) !important; - color: var(--text-secondary) !important; -} -.btn-default:hover, .btn-outline-secondary:hover { - border-color: var(--color-primary-light) !important; - color: var(--color-primary) !important; - background: var(--color-primary-ghost); -} - -.btn-sm { padding: 5px 12px; font-size: 0.75rem; } - -/* ============================== - FORM ELEMENTS - ============================== */ -.form-control, .form-select { - border: 1px solid var(--border-medium); - border-radius: var(--radius-sm); - font-size: 0.82rem; - color: var(--text-primary); - height: auto !important; - transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -} -.form-control:focus, .form-select:focus { - border-color: var(--color-primary-light); - box-shadow: 0 0 0 3px rgba(26,107,74,0.1); - outline: none; -} - -td input[readonly], td select[readonly], -td input[disabled], td select[disabled] { - background: #f1f5f9 !important; - font-weight: 600; - color: var(--text-secondary); -} - -/* ============================== - LEGENDS & FIELDSETS - ============================== */ -legend, #chemin, -fieldset legend, form legend { - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important; - color: white; - font-family: 'Syne', sans-serif; - font-size: 0.78rem; - font-weight: 700; - letter-spacing: 0.04em; - padding: 6px 14px; - border-radius: var(--radius-sm); - display: block; -} - -/* ============================== - MODALS - ============================== */ -.modal-content { - border: none; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-xl); - overflow: hidden; -} - -.modal-header { - background: var(--color-primary) !important; - color: white !important; - padding: 16px 20px; - border-bottom: none; -} - -.modal-title { - font-family: 'Syne', sans-serif; - font-size: 0.92rem !important; - font-weight: 700; -} - -.modal-header .close, .modal-header .btn-close { - background: rgba(255,255,255,0.2) !important; - color: white !important; - border: 1px solid rgba(255,255,255,0.3) !important; - border-radius: var(--radius-sm); - opacity: 1; - transition: background var(--transition-fast); - font-size: 0.75rem; - padding: 4px 10px; -} -.modal-header .close:hover { background: rgba(255,255,255,0.35) !important; } - -.modal-body { padding: 20px; } - -.modal-footer { - border-top: 1px solid var(--border-light); - padding: 12px 20px; - gap: 8px; -} - -/* Side Panel Modal (optional modern variant) */ -.modal.side-panel .modal-dialog { - position: fixed; - top: 0; right: 0; - margin: 0; - max-width: 480px; - width: 100%; - height: 100%; -} -.modal.side-panel .modal-content { - height: 100%; - border-radius: 0; -} - -/* ============================== - NAV TABS - ============================== */ -.nav-tabs { - border-bottom: 2px solid var(--border-light); - gap: 4px; -} -.nav-tabs .nav-link { - color: var(--text-secondary); - border: none; - border-radius: var(--radius-sm) var(--radius-sm) 0 0; - padding: 8px 16px; - font-size: 0.8rem; - font-weight: 500; - transition: all var(--transition-fast); -} -.nav-tabs .nav-link:hover { - color: var(--color-primary); - background: var(--color-primary-ghost); -} -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-link.active { - background: var(--color-primary) !important; - color: white !important; - font-family: 'Syne', sans-serif; - font-weight: 700; - border: none; -} - -/* ============================== - ALERTS & TOASTS - ============================== */ -.alert { - border: none; - border-radius: var(--radius-md); - font-size: 0.82rem; - border-left: 4px solid; -} -.alert-success { border-color: var(--color-success); background: rgba(46,196,182,0.1); } -.alert-danger { border-color: var(--color-urgent); background: rgba(230,57,70,0.1); } -.alert-warning { border-color: var(--color-warning); background: rgba(244,162,97,0.1); } -.alert-info { border-color: var(--color-info); background: rgba(58,134,255,0.1); } - -/* ============================== - FOOTER (inside context bar) - ============================== */ -footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; } - -/* ============================== - MICRO-INTERACTIONS & UTILS - ============================== */ -.hover-shadow-sm:hover { - box-shadow: var(--shadow-md) !important; - transform: translateY(-2px); - transition: all var(--transition-base); -} - -.hover-scale:hover { - transform: scale(1.04); - box-shadow: var(--shadow-md); - transition: all var(--transition-base); -} - -.transition { transition: all var(--transition-base); } - -/* Skeleton Loader */ -.skeleton { - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; - border-radius: var(--radius-sm); -} -@keyframes skeleton-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* AJAX Loading overlay */ -.ajax-loading { - position: relative; - pointer-events: none; - opacity: 0.6; -} -.ajax-loading::after { - content: ''; - position: absolute; - inset: 0; - background: rgba(255,255,255,0.6); - border-radius: inherit; - display: flex; - align-items: center; - justify-content: center; - z-index: 10; -} - -/* Pulse animation for notifications */ -@keyframes pulse-badge { - 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.4); } - 50% { box-shadow: 0 0 0 5px rgba(230,57,70,0); } -} -.badge-number { animation: pulse-badge 2s infinite; } - -/* Mode Test Banner */ -.mode-test-active #header { - background: linear-gradient(90deg, #7b2d00, #c0392b) !important; -} -.mode-test-banner { - background: repeating-linear-gradient( - 45deg, #ffd700, #ffd700 10px, #000 10px, #000 20px - ); - color: white; - text-align: center; - font-weight: 800; - font-size: 0.7rem; - padding: 3px; - letter-spacing: 0.15em; -} - -/* Filter option */ -.filter-option-inner-inner { - background-color: #f1f5f9 !important; -} - -/* h6 links in context */ +/* h6 liens spécifiques du fichier initial */ h6 a { text-decoration: none; color: var(--color-primary); @@ -1147,38 +56,230 @@ h6 a { } h6 a:hover { background: var(--color-primary); - color: white; + color: white !important; border-bottom-color: transparent; - padding: 1px 4px; - border-radius: 3px; + padding: 1px 5px; + border-radius: 4px; } -/* Textarea in context */ +/* === 3. HEADER & LOGO (Source: header.php) === */ +.header { + background-color: var(--color-primary) !important; + color: white !important; + height: 50px !important; + box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; +} + +.header .logo span { + color: white !important; + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 1.1rem; +} + +.initials { + background: rgba(255, 255, 255, 0.2); + color: white; + border: 1px solid rgba(255, 255, 255, 0.4); + font-weight: 700; + border-radius: 50%; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; +} + +/* Badge Mode Test dynamique du header */ +.mode-test-badge { + background: white; + color: var(--color-primary); + font-weight: 800; + padding: 2px 10px; + border-radius: 4px; + font-size: 0.65rem; + margin-left: 10px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +/* === 4. SIDEBAR (Source: sidebar.txt) === */ +.sidebar { + background: #faf9f8 !important; /* Gris clair Office */ + border-right: 1px solid var(--border-light) !important; +} + +.sidebar-nav .nav-link { + color: var(--text-main) !important; + font-weight: 500; + border-radius: var(--radius-md); + margin: 4px 10px; + transition: var(--transition-fast); +} + +.sidebar-nav .nav-link.parent-active, +.sidebar-nav .nav-link.active-main { + background-color: var(--color-primary-ghost) !important; + color: var(--color-primary) !important; + font-weight: 700; +} + +/* === 5. PANNEAU DE CONTEXTE (Source: barre-contexte.txt) === */ +#barre_laterale_d { + background: white; + border-left: 2px solid var(--border-light); + box-shadow: -4px 0 20px rgba(0,0,0,0.05); +} + +.context-card { + background: #faf9f8; + border: 1px solid var(--border-light); + border-radius: var(--radius-md); + padding: 12px; + margin-bottom: 12px; +} + +.context-card-label { + color: var(--color-primary); + font-weight: 700; + font-size: 0.7rem; + text-transform: uppercase; + margin-bottom: 6px; + display: flex; + align-items: center; + gap: 8px; +} + +/* Textarea spécifique du fichier initial */ .mb-2 textarea { font-size: 0.78rem; + border-radius: var(--radius-md); + border: 1px solid var(--border-light); + padding: 10px; width: 100%; - border: 1px solid var(--border-medium); +} + +.btn-primary-context { + background-color: var(--color-primary-ghost) !important; + color: var(--color-primary) !important; + border: 1px solid var(--color-primary) !important; + font-weight: 600; 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; +/* === 6. MODALS & ALERTES (Source: modals.txt & theme-modern.txt) === */ +.modal-content { + border-radius: var(--radius-lg) !important; + border: none; + box-shadow: var(--shadow-lg) !important; } -/* ============================== - RESPONSIVE - ============================== */ -@media (max-width: 768px) { - #sidebar { width: var(--sidebar-width); } - #barre_laterale_d { width: 100% !important; } - .scrollmenu { margin: 0 8px 8px; } - .page-content { padding: 0 8px; } +.modal-header { + background-color: #faf9f8; + border-bottom: 1px solid var(--border-light); + padding: 15px 25px; } + +.modal-title { color: var(--color-primary-dark); font-weight: 700; } + +.alert { + border-radius: var(--radius-md); + border: none; + border-left: 5px solid transparent; +} +.alert-info { background: #eff6fc; color: #0078d4; border-left-color: #0078d4; } +.alert-danger { background: #fde7e9; color: #a80000; border-left-color: #d13438; } +.alert-success { background: #dff6dd; color: #107c10; border-left-color: #107c10; } + +/* === 7. TABLEAUX & KPI (Structure Image 2) === */ +.table-responsive { + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); + background: white; +} + +.table thead th { + background-color: #faf9f8 !important; + color: var(--text-muted); + font-weight: 700; + text-transform: uppercase; + font-size: 0.75rem; + padding: 14px !important; + border-bottom: 3px solid var(--color-primary) !important; /* Ligne de force Bleue */ +} + +/* KPI Cards de l'Image 2 */ +.card { + border-radius: var(--radius-lg) !important; + border: 1px solid var(--border-light) !important; + box-shadow: var(--shadow-sm) !important; +} + +/* === 8. PATTERNS GRAPHIQUES (Source: theme-modern.txt) === */ + +/* Bannière Mode Test (Zébrée Image 2 avec couleurs Outlook) */ +.mode-test-banner { + background: repeating-linear-gradient(45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px) !important; + color: white !important; + font-weight: 800; + text-align: center; + padding: 6px; + letter-spacing: 1px; +} + +/* Skeleton Loaders (Source: scripts-footer.txt) */ +.skeleton { + background: linear-gradient(90deg, #f3f2f1 25%, #edebe9 50%, #f3f2f1 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; + border-radius: 4px; +} + +@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } + +/* Effets Photos Assurés (Source: theme-modern.txt) */ +.image-container img:hover { filter: grayscale(100%); transition: 0.3s; } +.photo-container img:hover { transform: scale(1.1); cursor: pointer; transition: 0.3s; } + +/* Scrollmenu du Gabarit (Source: gabarit.txt) */ +.scrollmenu { + background: white; + padding: 10px; + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + display: flex; + gap: 12px; + overflow-x: auto; + border: 1px solid var(--border-light); +} +.scrollmenu a { + padding: 8px 18px; + color: var(--text-main); + text-decoration: none; + font-weight: 600; + border-radius: 8px; + transition: all 0.2s; +} +.scrollmenu a:hover, .scrollmenu a.active { + background: var(--color-primary-ghost); + color: var(--color-primary); +} + +/* === 9. RESPONSIVE OPTIMISATIONS === */ +@media (max-width: 1199px) { + .main { padding: 15px !important; margin-left: 0 !important; } + .sidebar { width: 260px !important; left: -260px; } + .toggle-sidebar .sidebar { left: 0; } + #barre_laterale_d { width: 100% !important; right: -100%; z-index: 9999; } + #barre_laterale_d.active { right: 0; } +} + +/* === 10. BOUTONS === */ +.btn-primary { + background-color: var(--color-primary) !important; + border-radius: var(--radius-md) !important; + font-weight: 600 !important; + border: none !important; + padding: 8px 22px !important; + box-shadow: 0 4px 10px rgba(0, 120, 212, 0.2) !important; +} +.btn-primary:hover { background-color: var(--color-primary-dark) !important; transform: translateY(-1px); } \ No newline at end of file diff --git a/Vue/includes/head-meta.php b/Vue/includes/head-meta.php deleted file mode 100644 index f9f17573..00000000 --- a/Vue/includes/head-meta.php +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -<?= $_SESSION['descriptionVue'] ?? 'INTER SANTE' ?> - - - - - - \ No newline at end of file diff --git a/Vue/includes/main-content.php b/Vue/includes/main-content.php deleted file mode 100644 index e12121e3..00000000 --- a/Vue/includes/main-content.php +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - -
- - - - - -
- - - - - -
- -
- - - - - -
-
\ No newline at end of file