From f401585d74aacd282a8a2e0d3847ccdd6546ff54 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Mon, 23 Feb 2026 11:50:09 +0000
Subject: [PATCH] df

---
 Bootstrap_new/css/theme-modern.css | 138 +++++++++-------------
 Vue/includes/barre-contexte.php    | 181 +++++++++++++++++++++++++----
 Vue/includes/head-meta.php         |   2 +-
 3 files changed, 212 insertions(+), 109 deletions(-)

diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index 5e4c9850..97f9b308 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1,127 +1,99 @@
+/* DESIGN SYSTEM LUXE - INTER SANTÉ 2026 */
 :root {
     --primary: #2C3E50;
     --accent: #08C5D1;
-    --accent-light: rgba(8, 197, 209, 0.1);
-    --bg-body: #F4F7FA; /* Un gris-bleu très doux */
-    --glass: rgba(255, 255, 255, 0.9);
-    --radius: 16px;
-    --shadow-sm: 0 4px 12px rgba(0,0,0,0.03);
-    --shadow-md: 0 10px 30px rgba(44, 62, 80, 0.08);
+    --bg-app: #F4F7FA; 
+    --glass-bg: rgba(255, 255, 255, 0.9);
+    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
+    --shadow-active: 0 15px 35px rgba(8, 197, 209, 0.2);
 }
 
 body {
-    background-color: var(--bg-body) !important;
-    font-family: 'Plus Jakarta Sans', sans-serif !important;
-    color: #4A5568;
+    background-color: var(--bg-app) !important;
+    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif !important;
+    color: #334155;
 }
 
-/* --- EFFET WAHOO SUR LE MAIN --- */
+/* --- MAIN CARD EFFECT --- */
 #main {
     margin: 90px 25px 25px 25px !important;
     padding: 30px !important;
-    background: white !important;
+    background: #ffffff !important;
     border-radius: 24px !important;
-    box-shadow: var(--shadow-md) !important;
-    border: 1px solid rgba(255, 255, 255, 0.6) !important;
-    transition: transform 0.3s ease;
-}
-
-/* --- HEADER TRANSPARENT & FLOU --- */
-.header {
-    background: rgba(255, 255, 255, 0.8) !important;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
-    height: 70px !important;
-}
-
-/* --- SIDEBAR : PLUS DE LIGNES, QUE DU VIDE ET DU RELIEF --- */
-.sidebar {
-    background: var(--primary) !important;
+    box-shadow: var(--shadow-soft) !important;
     border: none !important;
-    box-shadow: 15px 0 40px rgba(0,0,0,0.04) !important;
 }
 
-.sidebar-nav .nav-link {
-    background: transparent !important;
-    color: rgba(255,255,255,0.7) !important;
-    margin: 4px 15px !important;
-    border-radius: 12px !important;
-    font-weight: 500 !important;
-}
-
-.sidebar-nav .nav-link.active-main, .sidebar-nav .nav-link:hover {
-    background: var(--accent) !important;
-    color: white !important;
-    box-shadow: 0 8px 15px rgba(8, 197, 209, 0.3) !important;
-}
-
-/* --- TABLEAUX : L'EFFET "STRIPED" MODERNE --- */
+/* --- TABLEAUX : L'EFFET "WAHOO" --- */
+/* On transforme chaque ligne de tableau en carte individuelle */
 .table {
     border-collapse: separate !important;
-    border-spacing: 0 12px !important;
+    border-spacing: 0 10px !important; /* Espacement entre les lignes */
+    margin-top: -10px;
 }
 
 .table thead th {
     background: transparent !important;
-    border: none !important;
-    color: #A0AEC0 !important;
+    color: #94a3b8 !important;
     text-transform: uppercase;
     font-size: 0.75rem;
-    letter-spacing: 1px;
+    font-weight: 700;
+    border: none !important;
+    padding: 10px 20px !important;
 }
 
 .table tbody tr {
-    background: white !important;
-    box-shadow: var(--shadow-sm) !important;
-    transition: all 0.2s ease;
+    background: #ffffff !important;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
+    transition: all 0.3s ease !important;
+    cursor: pointer;
 }
 
 .table tbody tr:hover {
-    transform: scale(1.01);
-    box-shadow: var(--shadow-md) !important;
+    transform: translateY(-3px) scale(1.005);
+    box-shadow: 0 12px 20px rgba(0,0,0,0.08) !important;
+    z-index: 10;
 }
 
 .table td {
-    padding: 15px !important;
+    padding: 18px 20px !important;
     border: none !important;
     vertical-align: middle;
 }
 
-.table td:first-child { border-radius: 12px 0 0 12px; }
-.table td:last-child { border-radius: 0 12px 12px 0; }
+/* Arrondis des lignes du tableau */
+.table td:first-child { border-radius: 15px 0 0 15px !important; }
+.table td:last-child { border-radius: 0 15px 15px 0 !important; }
 
-.btn-info, .btn-primary {
-    background: linear-gradient(135deg, #08C5D1 0%, #06A2AD 100%) !important;
-    border: none !important;
-    border-radius: 10px !important;
-    padding: 8px 20px !important;
+/* --- NAVIGATION PILLS (Niveau 3) --- */
+.scrollmenu {
+    background: #ffffff !important;
+    padding: 8px !important;
+    border-radius: 50px !important;
+    box-shadow: var(--shadow-soft) !important;
+    display: inline-flex !important;
+    gap: 5px;
+}
+
+.nav-pill-link {
+    padding: 10px 22px !important;
+    border-radius: 50px !important;
+    color: var(--primary) !important;
     font-weight: 600 !important;
-    box-shadow: 0 4px 12px rgba(8, 197, 209, 0.2) !important;
     transition: all 0.3s ease !important;
 }
 
-.btn-info:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 18px rgba(8, 197, 209, 0.3) !important;
+.nav-pill-link.active {
+    background: var(--accent) !important;
+    color: #fff !important;
+    box-shadow: 0 8px 15px rgba(8, 197, 209, 0.3) !important;
 }
 
-.context-sidebar {
-    background: white !important;
-    padding: 20px !important;
-}
-
-.context-widget {
-    background: #F8FAFC !important;
-    border-radius: 16px !important;
-    padding: 20px !important;
-    margin-bottom: 20px !important;
-    border: 1px solid #EDF2F7 !important;
-}
-
-.context-widget h6 {
-    color: #718096 !important;
-    font-size: 0.7rem !important;
-    font-weight: 800 !important;
-    margin-bottom: 12px !important;
+/* --- BOUTONS --- */
+.btn-info {
+    background: linear-gradient(135deg, #08C5D1, #06a5af) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    font-weight: 700 !important;
+    box-shadow: 0 5px 15px rgba(8, 197, 209, 0.2) !important;
 }
\ No newline at end of file
diff --git a/Vue/includes/barre-contexte.php b/Vue/includes/barre-contexte.php
index 94f8b05c..f298396d 100644
--- a/Vue/includes/barre-contexte.php
+++ b/Vue/includes/barre-contexte.php
@@ -1,36 +1,167 @@
-<div id="barre_laterale_d" class="sidenav">
-    <div class="px-4">
-        <button class="btn btn-outline-danger w-100 mb-4 rounded-pill" id="hideSideNav">
-            <i class="fa fa-angle-double-right"></i> <?= _("Cacher contexte") ?>
-        </button>
+<?php
+/**
+ * BARRE DE CONTEXTE - INTER SANTÉ 2026
+ * Widgetisation des données de session (Garant, Prospect, Assuré, Police)
+ */
+?>
 
-        <div class="card border-0 bg-light p-3 mb-3">
-            <h6 class="text-muted small fw-bold"><i class="fa fa-university"></i> GARANT</h6>
-            <div class="fw-bold text-dark"><?= $this->nettoyer($_SESSION['nomGcAssureur_C']) ?></div>
-            <div class="small text-secondary"><?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?></div>
+<input type="text" class="sr-only d-none" id="numeroClient_C" name="numeroClient_C" value="<?= $this->nettoyer($_SESSION['numeroClient_C']) ?>">
+<input type="text" class="sr-only d-none" id="codeGcAssureur_C" NAME="codeGcAssureur_C" value="<?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?>">
+
+<div id="barre_laterale_d" class="context-sidebar shadow-lg">
+    
+    <div class="context-header d-flex align-items-center justify-content-between mb-4">
+        <h5 class="fw-800 text-primary mb-0"><i class="bi bi-info-circle-fill me-2"></i><?= _("Dossier") ?></h5>
+        <button class="btn btn-soft-danger rounded-circle p-2" id="hideSideNav" title="<?= _("Cacher contexte") ?>">
+            <i class="bi bi-x-lg"></i>
+        </button>
+    </div>
+
+    <div class="context-body">
+        
+        <div class="context-widget mb-4 border-start border-4 border-primary">
+            <div class="d-flex align-items-center mb-2">
+                <div class="widget-icon bg-soft-primary text-primary me-2">
+                    <i class="bi bi-bank"></i>
+                </div>
+                <label class="widget-label"><?= _("GARANT") ?></label>
+            </div>
+            <div class="widget-content">
+                <div class="fw-bold text-dark fs-6"><?= $this->nettoyer($_SESSION['nomGcAssureur_C']) ?></div>
+                <div class="text-muted small"><?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?></div>
+            </div>
         </div>
 
         <?php if(!empty($_SESSION['numeroClient_C'])): ?>
-            <div class="card border-0 shadow-sm p-3 mb-3 border-start border-4 border-info">
-                <h6 class="text-info small fw-bold uppercase"><?= _("Assuré en cours") ?></h6>
-                <div class="d-flex align-items-center mt-2">
-                    <img src="<?= $_SESSION['photoAssureCrypte'] ?>" class="rounded-circle me-2" width="40" height="40">
-                    <div>
-                        <div class="fw-bold small"><?= substr($this->nettoyer($_SESSION['nomClient_C']), 0, 20) ?></div>
-                        <div class="badge bg-info" style="cursor:pointer" onclick="afficher_client_id();"><?= $_SESSION['numeroClient_C'] ?></div>
-                    </div>
+        <div class="context-widget mb-4 hover-shadow" onclick="javascript:afficher_client_id();" style="cursor: pointer;">
+            <div class="d-flex align-items-center mb-3">
+                <div class="widget-icon bg-soft-info text-info me-2">
+                    <i class="bi bi-person-badge"></i>
+                </div>
+                <label class="widget-label"><?= _("ASSURÉ PRINCIPAL") ?></label>
+            </div>
+            <div class="d-flex align-items-center">
+                <div class="position-relative me-3">
+                    <img src="<?= $_SESSION['photoAssureCrypte'] ?>" class="rounded-circle border border-2 border-white shadow-sm" width="50" height="50">
+                    <span class="status-indicator-online"></span>
+                </div>
+                <div>
+                    <div class="fw-800 text-dark small text-uppercase"><?= substr($this->nettoyer($_SESSION['nomClient_C']), 0, 22) ?></div>
+                    <span class="badge bg-soft-info text-info rounded-pill mt-1" style="font-size: 0.7rem;">
+                        <i class="bi bi-hash"></i> <?= $_SESSION['numeroClient_C'] ?>
+                    </span>
                 </div>
             </div>
+        </div>
+        <?php endif; ?>
+
+        <?php if(!empty($_SESSION['numeroPolice_C'])): ?>
+        <div class="context-widget mb-4" onclick="javascript:afficher_police_id_init();" style="cursor: pointer;">
+            <div class="d-flex align-items-center mb-2">
+                <div class="widget-icon bg-soft-secondary text-secondary me-2">
+                    <i class="bi bi-file-earmark-medical"></i>
+                </div>
+                <label class="widget-label"><?= _("POLICE / CONTRAT") ?></label>
+            </div>
+            <div class="ps-1">
+                <div class="fw-bold text-secondary"><?= $this->nettoyer($_SESSION['numeroPolice_C']) ?></div>
+                <div class="progress mt-2" style="height: 6px;">
+                    <div class="progress-bar bg-info" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+                <div class="text-muted small mt-1" style="font-size: 0.6rem;"><?= _("Consommation Plafond : 70%") ?></div>
+            </div>
+        </div>
         <?php endif; ?>
 
         <?php if(!empty($_SESSION['numeroClient_d_C'])): ?>
-            <div class="card border-0 bg-warning bg-opacity-10 p-3 mb-3">
-                <h6 class="text-warning small fw-bold"><?= _("GESTION DES COTATIONS") ?></h6>
-                <div class="fw-bold"><?= $this->nettoyer($_SESSION['nomClient_d_C']) ?></div>
-                <button class="btn btn-sm btn-warning mt-2 w-100" onclick="afficher_client_d_id();">
-                    <i class="fa fa-user-times"></i> <?= $_SESSION['numeroClient_d_d_C'] ?>
-                </button>
-            </div>
+        <div class="context-widget border-top-warning bg-soft-warning p-3">
+            <h6 class="text-warning fw-bold mb-3 small uppercase text-center"><?= _("GESTION DES COTATIONS") ?></h6>
+            
+            <button class="btn btn-warning w-100 text-white rounded-4 mb-2 shadow-sm" onclick="javascript:afficher_client_d_id();">
+                <i class="bi bi-person-plus-fill me-2"></i>
+                <?= substr($this->nettoyer($_SESSION['nomClient_d_C']), 0, 20) ?>
+            </button>
+
+            <button class="btn btn-outline-warning w-100 rounded-4" onclick="javascript:afficher_police_d_id_init();">
+                <i class="bi bi-file-text me-2"></i>
+                <?= $this->nettoyer($_SESSION['numeroPolice_d_C']) ?>
+            </button>
+        </div>
         <?php endif; ?>
+
     </div>
-</div>
\ No newline at end of file
+
+    <footer class="context-footer mt-auto pt-4 text-center">
+        <p class="text-muted" style="font-size: 0.65rem;">
+            &copy; <?= date('Y') ?> <strong>INTER SANTÉ</strong><br>
+            Version 2.0.4 - Premium Edition
+        </p>
+    </footer>
+</div>
+
+<style>
+/* Styles spécifiques pour le Wahoo (à intégrer ou laisser ici) */
+.context-sidebar {
+    position: fixed;
+    right: -320px;
+    top: 0;
+    width: 320px;
+    height: 100vh;
+    background: #fff;
+    z-index: 1050;
+    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+}
+
+.context-sidebar.active { right: 0; }
+
+.context-widget {
+    background: #fdfdfe;
+    border: 1px solid #f1f4f9;
+    border-radius: 20px;
+    padding: 18px;
+    transition: 0.3s ease;
+}
+
+.context-widget.hover-shadow:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 25px rgba(0,0,0,0.06);
+    border-color: var(--accent);
+}
+
+.widget-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    font-size: 1rem;
+}
+
+.widget-label {
+    font-size: 0.65rem;
+    font-weight: 800;
+    color: #94a3b8;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+}
+
+.status-indicator-online {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 12px;
+    height: 12px;
+    background: #10b981;
+    border: 2px solid #fff;
+    border-radius: 50%;
+}
+
+.bg-soft-primary { background-color: rgba(44, 62, 80, 0.08); }
+.bg-soft-info { background-color: rgba(8, 197, 209, 0.1); }
+.bg-soft-warning { background-color: rgba(255, 152, 0, 0.1); }
+.text-info { color: #08C5D1 !important; }
+</style>
\ No newline at end of file
diff --git a/Vue/includes/head-meta.php b/Vue/includes/head-meta.php
index bacf3a7a..49b54e02 100644
--- a/Vue/includes/head-meta.php
+++ b/Vue/includes/head-meta.php
@@ -15,4 +15,4 @@
 <link href="<?=$racineWeb?>Bootstrap_new/css/select2.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 
-<link href="<?=$racineWeb?>Bootstrap_new/css/theme-modern.css?ver=2026.02.23.06" rel="stylesheet">
\ No newline at end of file
+<link href="<?=$racineWeb?>Bootstrap_new/css/theme-modern.css?ver=2026.02.23.07" rel="stylesheet">
\ No newline at end of file