From dd0b96d84b684bfa483570eb1ab832f311fc0cc7 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Sun, 21 Dec 2025 13:33:00 +0000
Subject: [PATCH] Valide

---
 Bootstrap_new/css/override.css | 208 +++++++++++++++++++++++++++++++++
 Vue/gabarit.php                | 200 +++++++++++++++++++++----------
 2 files changed, 348 insertions(+), 60 deletions(-)
 create mode 100644 Bootstrap_new/css/override.css

diff --git a/Bootstrap_new/css/override.css b/Bootstrap_new/css/override.css
new file mode 100644
index 0000000..f43d300
--- /dev/null
+++ b/Bootstrap_new/css/override.css
@@ -0,0 +1,208 @@
+/* ============================================
+   OVERRIDE BOOTSTRAP 5 - AGGRESSIF
+   ============================================ */
+
+:root {
+    --office-primary: #b7472a;
+    --office-secondary: #2b579a;
+    --office-light: #f3f2f1;
+    --office-common: #e6e6e6;
+    --office-dark: #323130;
+    --office-border: #d0d0d0;
+}
+
+/* 1. RESET BOOTSTRAP SUR LE BODY */
+body {
+    background-color: var(--office-common) !important;
+    color: var(--office-dark) !important;
+    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-height: 100vh !important;
+    overflow-x: hidden !important;
+}
+
+/* 2. APP-HEADER - OVERRIDE COMPLET */
+.app-header {
+    background-color: var(--office-light) !important;
+    height: 64px !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100vw !important;
+    z-index: 1030 !important;
+    display: flex !important;
+    align-items: center !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* Override Bootstrap header defaults */
+header:not([class*="bg-"]) {
+    background-color: var(--office-light) !important;
+}
+
+/* 3. HEADER CONTENT INTERNE */
+.header-content {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    height: 100% !important;
+    width: 100% !important;
+    padding: 0 24px !important;
+    margin: 0 !important;
+}
+
+/* 4. APP-SIDEBAR */
+.app-sidebar {
+    width: 260px !important;
+    background: linear-gradient(180deg, var(--office-primary) 0%, #a53e24 100%) !important;
+    position: fixed !important;
+    top: 64px !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    height: calc(100vh - 64px) !important;
+    z-index: 1020 !important;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* Override Bootstrap aside defaults */
+aside:not([class*="bg-"]) {
+    background: linear-gradient(180deg, var(--office-primary) 0%, #a53e24 100%) !important;
+}
+
+/* 5. APP-MAIN */
+.app-main {
+    margin-left: 260px !important;
+    padding-top: 64px !important;
+    min-height: 100vh !important;
+    background-color: var(--office-light) !important;
+    width: calc(100vw - 260px) !important;
+    position: relative !important;
+    z-index: 1 !important;
+}
+
+/* 6. CONTENT AREA */
+.content-area {
+    padding: 24px !important;
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    width: 100% !important;
+}
+
+.content-card {
+    background-color: white !important;
+    border-radius: 8px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+    border: 1px solid var(--office-border) !important;
+    margin-bottom: 24px !important;
+    overflow: hidden !important;
+    width: 100% !important;
+}
+
+/* 7. SIDEBAR NAVIGATION */
+.sidebar-nav {
+    padding: 24px 0 !important;
+    background: transparent !important;
+}
+
+.nav-section {
+    margin-bottom: 32px !important;
+    padding: 0 20px !important;
+}
+
+.nav-item {
+    margin-bottom: 4px !important;
+}
+
+.nav-link {
+    display: flex !important;
+    align-items: center !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+    padding: 12px 16px !important;
+    text-decoration: none !important;
+    border-radius: 6px !important;
+    transition: all 0.2s ease !important;
+    background: transparent !important;
+    border: none !important;
+    width: 100% !important;
+}
+
+.nav-link:hover {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    color: white !important;
+}
+
+.nav-link.active {
+    background-color: rgba(255, 255, 255, 0.15) !important;
+    color: white !important;
+    font-weight: 500 !important;
+}
+
+/* 8. LOGO */
+.app-logo {
+    display: flex !important;
+    align-items: center !important;
+    color: #313c4c !important;
+    text-decoration: none !important;
+    font-weight: 600 !important;
+    font-size: 20px !important;
+}
+
+.app-logo img {
+    height: 36px !important;
+}
+
+/* 9. OVERRIDE BOOTSTRAP UTILITY CLASSES CONFLICT */
+.bg-light, .bg-white, .bg-transparent {
+    background-color: transparent !important;
+}
+
+/* 10. DEBUG INDICATOR (supprimer après) */
+.css-override-active {
+    position: fixed !important;
+    top: 10px !important;
+    right: 10px !important;
+    background: #27ae60 !important;
+    color: white !important;
+    padding: 10px 15px !important;
+    border-radius: 5px !important;
+    z-index: 99999 !important;
+    font-weight: bold !important;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
+    border: 3px solid white !important;
+    cursor: pointer;
+}
+
+.debug-border {
+    outline: 2px solid #ff6b6b !important;
+    outline-offset: 2px !important;
+}
+
+/* 11. RESPONSIVE */
+@media (max-width: 768px) {
+    .app-sidebar {
+        width: 70px !important;
+        transform: translateX(0) !important;
+    }
+    
+    .app-main {
+        margin-left: 70px !important;
+        width: calc(100vw - 70px) !important;
+    }
+    
+    .nav-text {
+        display: none !important;
+    }
+}
\ No newline at end of file
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index dd5eacf..9f8fafe 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -29,56 +29,162 @@ foreach ($menus as $key0 => $menuParent) {
 
 <!DOCTYPE html>
 <html lang="fr" data-bs-theme="light">
-    <head>
+   <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <base href="<?= $racineWeb ?>">
 
-        <title><?= htmlspecialchars($_SESSION['vue'] ?? 'INTER SANTE') ?> | Portail Santé RH</title>
+        <title><?= htmlspecialchars($_SESSION['vue'] ?? 'INTER SANTÉ') ?> | Portail Santé</title>
 
         <!-- Meta pour UX améliorée -->
         <meta name="description" content="Portail professionnel de gestion santé Inter Santé">
         <meta name="theme-color" content="#b7472a">
-        <meta name="apple-mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-        <!-- Icône -->
-        <link rel="apple-touch-icon" href="/Bootstrap_new/images/new/favicon.png">
-        <link rel="icon" href="/Bootstrap_new/images/new/favicon.png" type="image/png">
-
-        <!-- Bootstrap 5 -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-
-        <!-- Bootstrap Icons -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
-
-        <!-- Font Awesome -->
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
-        <!-- Select2 -->
-        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
-        <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap5-theme@1.3.0/dist/select2-bootstrap5.min.css" rel="stylesheet">
-
-        <!-- DataTables -->
-        <link href="https://cdn.datatables.net/v/bs5/dt-1.13.6/datatables.min.css" rel="stylesheet">
-
-        <!-- SweetAlert2 -->
-        <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
-
-        <!-- Animate.css -->
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
-
-        <!-- PWA Meta Tags CORRIGÉS -->
+        
+        <!-- PWA Meta Tags -->
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
         <meta name="apple-mobile-web-app-title" content="INTER-SANTÉ">
 
+        <!-- Icône -->
+        <link rel="apple-touch-icon" href="<?= $racineWeb ?>Bootstrap_new/images/new/favicon.png">
+        <link rel="icon" href="<?= $racineWeb ?>Bootstrap_new/images/new/favicon.png" type="image/png">
+
+        <!-- ============================================
+            ORDRE CRITIQUE : CSS
+            ============================================ -->
+        
+        <!-- 1. BOOTSTRAP 5 (DOIT ÊTRE EN PREMIER) -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" 
+            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
+            crossorigin="anonymous">
+        
+        <!-- 2. OVERRIDE BOOTSTRAP (DOIT ÊTRE IMMÉDIATEMENT APRÈS) -->
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/override.css?ver=2025.12.21.01" rel="stylesheet">
+        
+        <!-- 3. AUTRES CDN (après l'override) -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+        
+        <!-- Select2 -->
+        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
+        <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
+        
+        <!-- DataTables -->
+        <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.0.3/datatables.min.css" rel="stylesheet">
+        
+        <!-- SweetAlert2 -->
+        <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.5/dist/sweetalert2.min.css" rel="stylesheet">
+        
+        <!-- Animate.css -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+        
+        <!-- jQuery UI -->
+        <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+        
+        <!-- Progressive Web App -->
+        <link rel="manifest" href="<?= $racineWeb ?>manifest.json">
+        
+        <!-- 4. VOS STYLES PERSONNALISÉS (en dernier pour qu'ils dominent) -->
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.21.02" rel="stylesheet">
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
+
+        <!-- ============================================
+            SCRIPTS ET CONFIGURATION
+            ============================================ -->
+        
+        <script>
+            // Mode développeur
+            const modeDev = <?= $_SESSION['modeDev_C'] ?? 0 ?>;
+            if (modeDev !== 1) {
+                document.addEventListener('contextmenu', e => e.preventDefault());
+            }
+
+            // Variables globales
+            window.appConfig = {
+                activeParentId: '<?= $activeParentId ?>',
+                activeChildId: '<?= $activeChildId ?>',
+                activeLink: '<?= $activeLink ?>',
+                racineWeb: '<?= $racineWeb ?>',
+                baseUrl: '<?= $racineWeb ?>',
+                isAnglophone: <?= est_anglophone() ? 'true' : 'false' ?>,
+                modeTest: <?= $_SESSION['bdTests_C'] == "1" ? 'true' : 'false' ?>,
+                userInitials: '<?= $_SESSION['userInitials_C'] ?? 'U' ?>',
+                // Debug info
+                debugMode: true,
+                cssOverride: true
+            };
+            
+            // Debug CSS loading
+            console.log('[App] Configuration chargée:', window.appConfig);
+            
+            // Vérifier le chargement CSS
+            document.addEventListener('DOMContentLoaded', function() {
+                setTimeout(function() {
+                    const overrideLoaded = Array.from(document.styleSheets).some(sheet => 
+                        sheet.href && sheet.href.includes('override.css')
+                    );
+                    
+                    console.log('[CSS] Override.css chargé:', overrideLoaded);
+                    
+                    if (!overrideLoaded) {
+                        console.warn('[CSS] Override.css manquant!');
+                        // Charger dynamiquement
+                        const link = document.createElement('link');
+                        link.rel = 'stylesheet';
+                        link.href = window.appConfig.baseUrl + 'Bootstrap_new/css/override.css?nocache=' + Date.now();
+                        document.head.appendChild(link);
+                    }
+                }, 100);
+            });
+        </script>
+        
+        <!-- ============================================
+            CSS DE SECOURS INLINE (garanti de fonctionner)
+            ============================================ -->
+        <style>
+            /* CSS DE SECOURS - S'applique immédiatement */
+            :root {
+                --office-primary: #b7472a;
+                --office-secondary: #2b579a;
+                --office-light: #f3f2f1;
+            }
+            
+            /* Styles de base garantis */
+            body {
+                font-family: 'Segoe UI', Arial, sans-serif !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                min-height: 100vh !important;
+            }
+            
+            /* Debug visuel */
+            .css-loaded-indicator {
+                position: fixed !important;
+                top: 10px !important;
+                right: 10px !important;
+                background: #27ae60 !important;
+                color: white !important;
+                padding: 8px 12px !important;
+                border-radius: 4px !important;
+                z-index: 99999 !important;
+                font-size: 12px !important;
+                font-weight: bold !important;
+                display: none;
+            }
+            
+            /* Forcer la visibilité pendant le chargement */
+            [class*="app-"] {
+                min-height: 20px !important;
+                min-width: 20px !important;
+            }
+        </style>
+        
         <!-- Open Graph pour le partage -->
         <meta property="og:title" content="INTER-SANTÉ Portail RH">
         <meta property="og:description" content="Portail professionnel de gestion santé">
-        <meta property="og:image" content="<?= $racineWeb ?>/Bootstrap_new/images/new/favicon.png">
+        <meta property="og:image" content="<?= $racineWeb ?>Bootstrap_new/images/new/favicon.png">
         <meta property="og:url" content="<?= $racineWeb ?>">
         <meta property="og:type" content="website">
 
@@ -86,33 +192,7 @@ foreach ($menus as $key0 => $menuParent) {
         <meta name="twitter:card" content="summary">
         <meta name="twitter:title" content="INTER-SANTÉ Portail RH">
         <meta name="twitter:description" content="Portail professionnel de gestion santé">
-        <meta name="twitter:image" content="<?= $racineWeb ?>/Bootstrap_new/images/new/favicon.png">
-
-        <!-- jQuery UI (pour Datepicker) -->
-        <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
-
-        <!-- Styles personnalisés -->
-        <link href="/Bootstrap_new/css/style_office.css?ver=2025.12.21.01" rel="stylesheet">
-        <link href="/Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.01" rel="stylesheet">
-
-        <script>
-            // Mode développeur
-            const modeDev = 1; /*<?= $_SESSION['modeDev_C'] ?? 0 ?>;*/
-            if (modeDev !== 1) {
-                document.addEventListener('contextmenu', e => e.preventDefault());
-            }
-
-            // Variables globales accessibles par tous les scripts
-            window.appConfig = {
-                activeParentId: '<?= $activeParentId ?>',
-                activeChildId: '<?= $activeChildId ?>',
-                activeLink: '<?= $activeLink ?>',
-                racineWeb: '<?= $racineWeb ?>',
-                isAnglophone: <?= est_anglophone() ? 'true' : 'false' ?>,
-                modeTest: <?= $_SESSION['bdTests_C'] == "1" ? 'true' : 'false' ?>,
-                userInitials: '<?= $_SESSION['userInitials_C'] ?? 'U' ?>'
-            };
-        </script>
+        <meta name="twitter:image" content="<?= $racineWeb ?>Bootstrap_new/images/new/favicon.png">
     </head>
 
     <body>