This commit is contained in:
KONE SOREL 2025-12-21 13:33:00 +00:00
parent 53ef9ff7d7
commit dd0b96d84b
2 changed files with 348 additions and 60 deletions

View File

@ -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;
}
}

View File

@ -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>