/* ========================================================================= TCF Light Preview — overlay pour interventions-preview.html Garde la charte (bleu #0D4E7F + anis #CADC3F) mais déplace le bleu du fond vers les accents : sidebar claire, surfaces blanches, accents anis sur l'actif, bleu réservé aux titres / liens / CTA primaires. Activé via class `tcf-light` sur . ========================================================================= */ /* -------- 1. Tokens : on enrichit, on n'écrase rien d'existant -------- */ body.tcf-light{ --lp-bg: #F6F8FB; --lp-surface: #FFFFFF; --lp-surface-2: #F1F4F9; --lp-border: #E4E9F0; --lp-border-s: #CFD7E2; --lp-text: #0F172A; --lp-text-2: #475569; --lp-text-3: #94A3B8; --lp-blue: #0D4E7F; --lp-blue-d: #0A3D63; --lp-blue-soft: rgba(13,78,127,.06); --lp-blue-100: #DDE8F3; --lp-anis: #CADC3F; --lp-anis-d: #A8BC2A; --lp-anis-soft: rgba(202,220,63,.18); } /* -------- 2. Body : fond plus clair, suppression du radial bleu/anis -------- */ body.tcf-light{ background:var(--lp-bg) !important; background-image:none !important; } /* -------- 3. Sidebar : du fond bleu plein → blanc cassé avec accent anis sur l'actif -------- */ body.tcf-light .sidebar{ background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%) !important; border-right:1px solid var(--lp-border) !important; box-shadow:1px 0 0 var(--lp-border), 0 0 24px rgba(15,23,42,.04) !important; } body.tcf-light .sidebar-head{ background:linear-gradient(180deg,#FFFFFF,#FAFBFD) !important; border-bottom:1px solid var(--lp-border) !important; } body.tcf-light .sidebar-head::after{ background:linear-gradient(90deg,var(--lp-anis),transparent) !important; height:2px !important; } body.tcf-light .brand-icon{ background:linear-gradient(135deg,var(--lp-blue),var(--lp-blue-d)) !important; border:1px solid var(--lp-blue-d) !important; box-shadow:0 4px 12px rgba(13,78,127,.2) !important; } body.tcf-light .brand-name{ color:var(--lp-blue) !important; } body.tcf-light .brand-sub{ color:var(--lp-text-3) !important; } body.tcf-light .user-pill{ background:var(--lp-surface-2) !important; border:1px solid var(--lp-border) !important; backdrop-filter:none !important; } body.tcf-light .user-pill #uName{ color:var(--lp-text) !important; } body.tcf-light .user-pill #uRole{ color:var(--lp-text-2) !important; } body.tcf-light .user-av{ background:linear-gradient(135deg,var(--lp-blue),var(--lp-blue-d)) !important; color:#fff !important; border:2px solid #fff !important; box-shadow:0 0 0 1px var(--lp-border) !important; } body.tcf-light .nav-group{ color:var(--lp-text-3) !important; font-weight:700 !important; } body.tcf-light .nav-item{ color:var(--lp-text-2) !important; font-weight:500 !important; } body.tcf-light .nav-item:hover{ background:var(--lp-surface-2) !important; color:var(--lp-blue) !important; transform:none !important; } body.tcf-light .nav-item.active{ background:var(--lp-anis-soft) !important; color:var(--lp-blue) !important; font-weight:700 !important; box-shadow:none !important; } body.tcf-light .nav-item.active::before{ background:var(--lp-anis) !important; box-shadow:0 0 6px rgba(202,220,63,.45) !important; } body.tcf-light .nav-badge{ background:var(--lp-blue) !important; color:#fff !important; } body.tcf-light .sidebar-foot{ background:#FAFBFD !important; border-top:1px solid var(--lp-border) !important; } body.tcf-light .btn-portal{ background:var(--lp-anis-soft) !important; border:1px solid var(--lp-anis) !important; color:var(--lp-blue) !important; font-weight:700 !important; } body.tcf-light .btn-portal:hover{ background:var(--lp-anis) !important; color:var(--lp-blue-d) !important; } body.tcf-light .btn-logout{ background:#fff !important; border:1px solid var(--lp-border) !important; color:var(--lp-text-2) !important; } body.tcf-light .btn-logout:hover{ background:#FEE2E2 !important; border-color:#FCA5A5 !important; color:#991B1B !important; } /* -------- 3bis. Sidebar variantes (crm.html / portail.html / hyperviseur.html) -------- */ /* crm.html + portail.html utilisent .sidebar-logo / .logo-title / .logo-sub / .nav-section-label / .sidebar-bottom */ body.tcf-light .sidebar-logo{ background:linear-gradient(180deg,#FFFFFF,#FAFBFD) !important; border-bottom:1px solid var(--lp-border) !important; } body.tcf-light .sidebar-logo::after{ background:linear-gradient(90deg,var(--lp-anis),transparent) !important; } body.tcf-light .sidebar-logo .logo-title{ color:var(--lp-blue) !important; } body.tcf-light .sidebar-logo .logo-title span{ color:var(--lp-anis-d) !important; } body.tcf-light .sidebar-logo .logo-sub{ color:var(--lp-text-3) !important; } body.tcf-light .sidebar .nav-section-label{ color:var(--lp-text-3) !important; font-weight:700 !important; } body.tcf-light .sidebar .nav-item{ color:var(--lp-text-2) !important; } body.tcf-light .sidebar .nav-item:hover{ background:var(--lp-surface-2) !important; color:var(--lp-blue) !important; transform:none !important; } body.tcf-light .sidebar .nav-item.active{ background:var(--lp-anis-soft) !important; color:var(--lp-blue) !important; border:none !important; box-shadow:none !important; } body.tcf-light .sidebar .nav-item.active::before{ background:var(--lp-anis) !important; box-shadow:0 0 6px rgba(202,220,63,.45) !important; } body.tcf-light .sidebar .nav-icon{ color:inherit !important; } body.tcf-light .sidebar .nav-badge{ background:var(--lp-blue) !important; color:#fff !important; } body.tcf-light .sidebar-bottom{ background:#FAFBFD !important; border-top:1px solid var(--lp-border) !important; } body.tcf-light .sidebar-user{ background:var(--lp-surface-2) !important; border:1px solid var(--lp-border) !important; } body.tcf-light .sidebar-user-name{ color:var(--lp-text) !important; } body.tcf-light .sidebar-user-email{ color:var(--lp-text-2) !important; } /* Lien "Retour au portail" inline style override (rgba(37,99,235,...) bleu vif) */ body.tcf-light .sidebar-bottom a[href*="portail.html"]{ background:var(--lp-anis-soft) !important; border-color:var(--lp-anis) !important; color:var(--lp-blue) !important; } /* hyperviseur.html — sidebar `.sb` + items `.sb-item.on` */ body.tcf-light .sb{ background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%) !important; border-right:1px solid var(--lp-border) !important; box-shadow:1px 0 0 var(--lp-border), 0 0 24px rgba(15,23,42,.04) !important; } body.tcf-light .sb-brand{ color:var(--lp-blue) !important; } body.tcf-light .sb-logo{ background:var(--lp-blue) !important; color:#fff !important; } body.tcf-light .sb-name{ color:var(--lp-blue) !important; } body.tcf-light .sb-name b{ color:var(--lp-anis-d) !important; } body.tcf-light .sb-item{ color:var(--lp-text-2) !important; border-left-color:transparent !important; } body.tcf-light .sb-item:hover{ color:var(--lp-blue) !important; background:var(--lp-surface-2) !important; } body.tcf-light .sb-item.on{ color:var(--lp-blue) !important; background:var(--lp-anis-soft) !important; border-left-color:var(--lp-anis) !important; } body.tcf-light .sb-foot{ border-top:1px solid var(--lp-border) !important; } body.tcf-light .sb-live{ color:var(--lp-anis-d) !important; } body.tcf-light .sb-live-d{ background:var(--lp-anis-d) !important; } body.tcf-light .sb-clock{ color:var(--lp-text-3) !important; } /* ticketing.html — sidebar `.tk-sidebar` + items `.tk-nav-*` */ body.tcf-light .tk-sidebar{ background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%) !important; color:var(--lp-text) !important; border-right:1px solid var(--lp-border) !important; box-shadow:1px 0 0 var(--lp-border), 0 0 24px rgba(15,23,42,.04) !important; } body.tcf-light .tk-sidebar-logo{ border-bottom:1px solid var(--lp-border) !important; color:var(--lp-blue) !important; } body.tcf-light .tk-sidebar-logo .t{ color:var(--lp-blue) !important; } body.tcf-light .tk-sidebar-logo span{ color:var(--lp-text-3) !important; opacity:1 !important; } body.tcf-light .tk-nav-section{ color:var(--lp-text-3) !important; } body.tcf-light .tk-nav-item{ color:var(--lp-text-2) !important; border-left-color:transparent !important; } body.tcf-light .tk-nav-item:hover{ background:var(--lp-surface-2) !important; color:var(--lp-blue) !important; } body.tcf-light .tk-nav-item.active{ background:var(--lp-anis-soft) !important; color:var(--lp-blue) !important; border-left-color:var(--lp-anis) !important; } body.tcf-light .tk-nav-badge{ background:var(--lp-blue) !important; color:#fff !important; } body.tcf-light .tk-sb-toggle{ background:#fff !important; border:1px solid var(--lp-border) !important; color:var(--lp-blue) !important; } body.tcf-light .tk-sb-toggle:hover{ background:var(--lp-anis) !important; color:var(--lp-blue-d) !important; border-color:var(--lp-anis-d) !important; } /* Liseré collapse btn */ body.tcf-light #sbCollapseBtn{ background:#fff !important; border:1px solid var(--lp-border) !important; color:var(--lp-blue) !important; } body.tcf-light #sbCollapseBtn:hover{ background:var(--lp-anis) !important; color:var(--lp-blue-d) !important; border-color:var(--lp-anis-d) !important; } /* -------- 4. Topbar : déjà claire, on renforce simplement la séparation -------- */ body.tcf-light .topbar{ background:#fff !important; box-shadow:0 1px 0 var(--lp-border), 0 3px 0 0 var(--lp-anis), 0 4px 14px rgba(15,23,42,.04) !important; } body.tcf-light .topbar::before, body.tcf-light .topbar::after{ display:none !important; } /* -------- 5. KPI cards : on calme le label bleu vif et l'aura radiale -------- */ body.tcf-light .kpi-card{ background:#fff !important; border:1px solid var(--lp-border) !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important; } body.tcf-light .kpi-card:hover{ box-shadow:0 8px 24px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important; border-color:var(--lp-border-s) !important; transform:translateY(-2px) !important; } body.tcf-light .kpi-card::before{ background:linear-gradient(90deg,var(--accent-color,var(--lp-blue)) 0%,var(--lp-anis) 100%) !important; height:3px !important; } body.tcf-light .kpi-card::after{ display:none !important; } body.tcf-light .kpi-label{ color:var(--lp-text-2) !important; font-weight:600 !important; } body.tcf-light .kpi-icon{ opacity:.22 !important; } /* -------- 6. Cards génériques : bordures fines, ombres très douces -------- */ body.tcf-light .card, body.tcf-light .dash-card{ background:#fff !important; border:1px solid var(--lp-border) !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important; } body.tcf-light .card:hover, body.tcf-light .dash-card:hover{ box-shadow:0 8px 24px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important; border-color:var(--lp-border-s) !important; } /* -------- 7. Boutons primaires : on garde le bleu mais sans dégradé criard -------- */ body.tcf-light button.primary, body.tcf-light .btn-primary, body.tcf-light .btn.primary, body.tcf-light button[data-primary]{ background:var(--lp-blue) !important; box-shadow:0 1px 2px rgba(13,78,127,.18) !important; } body.tcf-light button.primary:hover, body.tcf-light .btn-primary:hover, body.tcf-light .btn.primary:hover, body.tcf-light button[data-primary]:hover{ background:var(--lp-blue-d) !important; box-shadow:0 4px 12px rgba(13,78,127,.22) !important; filter:none !important; } /* -------- 8. Wizards (création OT / BC / contrat) : alléger les fonds bleus pleins -------- */ body.tcf-light .ivwz-progress, body.tcf-light .poctWz-progress{ background:#FAFBFD !important; border-bottom:1px solid var(--lp-border) !important; } body.tcf-light .ivwz-cat-chip.selected{ background:var(--lp-blue-100) !important; color:var(--lp-blue) !important; border-color:var(--lp-blue) !important; box-shadow:none !important; } body.tcf-light .ivwz-type-card.selected{ background:linear-gradient(135deg,var(--lp-blue-soft),var(--lp-anis-soft)) !important; border-color:var(--lp-blue) !important; box-shadow:0 1px 4px rgba(13,78,127,.08) !important; } body.tcf-light .ivwz-statut-card[data-st="planifiee"].selected{ background:var(--lp-blue-100) !important; } body.tcf-light .poctWz-step.is-current .poctWz-step-dot{ background:var(--lp-blue) !important; border-color:var(--lp-blue) !important; box-shadow:0 0 0 4px var(--lp-blue-soft) !important; } body.tcf-light .poctWz-step.is-done .poctWz-step-dot{ background:var(--lp-anis) !important; border-color:var(--lp-anis-d) !important; color:var(--lp-blue) !important; } body.tcf-light .poctWz-typecard.is-selected{ background:var(--lp-blue-100) !important; border-color:var(--lp-blue) !important; box-shadow:none !important; } /* -------- 9. Tabs / chips actifs : passer du fond bleu au fond anis pâle -------- */ body.tcf-light .tech-chip.active{ background:var(--lp-anis-soft) !important; color:var(--lp-blue) !important; } body.tcf-light .td-tab.active, body.tcf-light .tech-nav-btn.active{ color:var(--lp-blue) !important; } /* -------- 10. Mode tech (sous-traitants Praxedo) : on n'y touche pas, déjà dark -------- */ body.tcf-light.tech-mode{ background:#0A1828 !important; }