/* ════════════════════════════════════════════════════════════════════ VECTIA · Platinum Design System v1.0 ──────────────────────────────────────────────────────────────────── Système de design "Silicon Valley" scopé. S'active via : Toggle clair/sombre via : data-theme="light" sur À AJOUTER dans web/styles.css (en bas du fichier) ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ───────────────────────────────────────────────────────────────────── PALETTE PLATINUM ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app { /* Mode Platinum (dark par défaut) */ --p-bg-deep: #0a0f1e; --p-bg-elev-1: #0f1729; --p-bg-elev-2: #131c33; --p-surface-glass: rgba(255, 255, 255, 0.04); --p-surface-glass-hover: rgba(255, 255, 255, 0.07); --p-border-glass: rgba(255, 255, 255, 0.08); --p-border-glass-strong: rgba(255, 255, 255, 0.14); /* Texte */ --p-text-primary: #f1f5f9; --p-text-secondary: #cbd5e1; --p-text-tertiary: #94a3b8; --p-text-faint: #64748b; /* Accents */ --p-cyan: #00d2ff; --p-cyan-glow: rgba(0, 210, 255, 0.4); --p-cyan-soft: rgba(0, 210, 255, 0.08); --p-purple: #a855f7; --p-purple-glow: rgba(168, 85, 247, 0.4); --p-amber: #fbbf24; --p-amber-glow: rgba(251, 191, 36, 0.5); --p-green: #34d399; --p-green-glow: rgba(52, 211, 153, 0.3); --p-red: #f87171; --p-red-glow: rgba(248, 113, 113, 0.3); /* Spacing */ --p-radius-sm: 6px; --p-radius-md: 10px; --p-radius-lg: 14px; --p-radius-xl: 20px; /* Transitions */ --p-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --p-transition: all 0.3s var(--p-ease-out); } /* Mode Clair-Pro (override) */ .vectia-platinum-app[data-theme="light"] { --p-bg-deep: #f8fafc; --p-bg-elev-1: #ffffff; --p-bg-elev-2: #ffffff; --p-surface-glass: rgba(15, 23, 42, 0.03); --p-surface-glass-hover: rgba(15, 23, 42, 0.06); --p-border-glass: rgba(15, 23, 42, 0.08); --p-border-glass-strong: rgba(15, 23, 42, 0.15); --p-text-primary: #0f172a; --p-text-secondary: #334155; --p-text-tertiary: #64748b; --p-text-faint: #94a3b8; --p-cyan: #0891b2; --p-cyan-soft: rgba(8, 145, 178, 0.08); --p-cyan-glow: rgba(8, 145, 178, 0.3); } /* ───────────────────────────────────────────────────────────────────── BASE ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--p-bg-deep); color: var(--p-text-primary); letter-spacing: -0.011em; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; -webkit-font-smoothing: antialiased; transition: background 0.5s ease; min-height: 100vh; } /* Aurores cyan/purple en arrière-plan */ .vectia-platinum-app::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0, 210, 255, 0.12), transparent 50%), radial-gradient(ellipse 60% 40% at 80% 30%, rgba(168, 85, 247, 0.08), transparent 50%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0, 210, 255, 0.06), transparent 50%); pointer-events: none; z-index: 0; transition: opacity 0.5s ease; } .vectia-platinum-app[data-theme="light"]::before { opacity: 0.3; } /* Grain texture */ .vectia-platinum-app::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 1; mix-blend-mode: overlay; } /* Layout : assure que le contenu reste au-dessus des décorations */ .vectia-platinum-app > * { position: relative; z-index: 2; } /* ───────────────────────────────────────────────────────────────────── SIDEBAR PLATINUM (sélecteurs alignés sur sidebar.js v3.3.0) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vectia-sidebar-root { background: rgba(10, 15, 30, 0.6); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-right: 1px solid var(--p-border-glass); padding: 1.75rem 0 1rem; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; overflow-y: auto; } .vectia-platinum-app[data-theme="light"] .vectia-sidebar-root { background: rgba(255, 255, 255, 0.7); } .vectia-platinum-app .vectia-sidebar-brand { padding: 0 1.5rem 1.75rem; border-bottom: 1px solid var(--p-border-glass); margin-bottom: 1.25rem; } .vectia-platinum-app .vectia-sidebar-logo { display: flex; align-items: center; gap: 0.625rem; } .vectia-platinum-app .vectia-sidebar-logo-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--p-cyan), var(--p-purple)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: white; box-shadow: 0 0 0 1px var(--p-border-glass-strong), 0 4px 16px rgba(0, 210, 255, 0.3); } .vectia-platinum-app .vectia-sidebar-logo-text { display: flex; flex-direction: column; line-height: 1.1; } .vectia-platinum-app .vectia-sidebar-logo-name { font-weight: 700; font-size: 15px; color: var(--p-text-primary); letter-spacing: -0.02em; } .vectia-platinum-app .vectia-sidebar-logo-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; color: var(--p-cyan); letter-spacing: 0.1em; text-transform: uppercase; } /* Plan badge avec shimmer */ .vectia-platinum-app .vectia-sidebar-plan-badge { margin: 0 1.25rem 1.5rem; padding: 0.625rem 0.875rem; background: linear-gradient(135deg, rgba(0, 210, 255, 0.12) 0%, rgba(168, 85, 247, 0.08) 100%); border: 1px solid var(--p-border-glass-strong); border-radius: var(--p-radius-md); display: flex; align-items: center; gap: 0.625rem; position: relative; overflow: hidden; } .vectia-platinum-app .vectia-sidebar-plan-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.2), transparent); transform: translateX(-100%); animation: vectiaShimmer 4s ease-in-out infinite; } @keyframes vectiaShimmer { 50% { transform: translateX(100%); } } .vectia-platinum-app .vectia-sidebar-plan-icon { font-size: 16px; filter: drop-shadow(0 0 6px var(--p-cyan-glow)); } .vectia-platinum-app .vectia-sidebar-plan-info { flex: 1; min-width: 0; } .vectia-platinum-app .vectia-sidebar-plan-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--p-text-faint); letter-spacing: 0.12em; text-transform: uppercase; } .vectia-platinum-app .vectia-sidebar-plan-name { font-size: 13px; font-weight: 600; color: var(--p-text-primary); margin-top: 1px; letter-spacing: -0.01em; } /* Sections */ .vectia-platinum-app .vectia-sidebar-section { padding: 0 0.75rem; margin-bottom: 1.25rem; } .vectia-platinum-app .vectia-sidebar-section h3, .vectia-platinum-app .vectia-sidebar-section-title { font-family: 'JetBrains Mono', monospace !important; font-size: 9.5px !important; font-weight: 600 !important; color: var(--p-text-faint) !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 0 0.875rem 0.5rem !important; margin: 0 !important; border: none !important; } .vectia-platinum-app .vectia-sidebar-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Items */ .vectia-platinum-app .vectia-sidebar-item { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 0.5rem 0.875rem !important; margin: 0.125rem 0 !important; border-radius: var(--p-radius-sm) !important; color: var(--p-text-secondary) !important; text-decoration: none !important; font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; transition: var(--p-transition) !important; position: relative !important; cursor: pointer !important; background: transparent !important; opacity: 1 !important; } .vectia-platinum-app .vectia-sidebar-item:hover { background: var(--p-surface-glass-hover) !important; color: var(--p-text-primary) !important; } .vectia-platinum-app .vectia-sidebar-item.is-active, .vectia-platinum-app .vectia-sidebar-item[data-active="1"] { background: linear-gradient(90deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 210, 255, 0.04) 100%) !important; color: var(--p-text-primary) !important; box-shadow: inset 2px 0 0 var(--p-cyan) !important; font-weight: 600 !important; } .vectia-platinum-app .vectia-sidebar-item.is-active .vectia-sidebar-item-icon, .vectia-platinum-app .vectia-sidebar-item[data-active="1"] .vectia-sidebar-item-icon { color: var(--p-cyan); opacity: 1; filter: drop-shadow(0 0 4px var(--p-cyan-glow)); } .vectia-platinum-app .vectia-sidebar-item-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; stroke-width: 1.5; transition: var(--p-transition); color: currentColor; } .vectia-platinum-app .vectia-sidebar-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit !important; } .vectia-platinum-app .vectia-sidebar-item[data-locked="1"] { color: var(--p-text-tertiary) !important; opacity: 0.85 !important; } .vectia-platinum-app .vectia-sidebar-item[data-locked="1"] .vectia-sidebar-item-icon { opacity: 0.4; } /* Cadenas néon ambre */ .vectia-platinum-app .vectia-sidebar-lock { width: 12px !important; height: 12px !important; color: var(--p-amber) !important; filter: drop-shadow(0 0 4px var(--p-amber-glow)) !important; flex-shrink: 0 !important; stroke-width: 2 !important; margin-left: auto !important; font-size: inherit !important; background: transparent !important; } /* Footer (theme toggle) */ .vectia-platinum-app .vectia-sidebar-footer { margin-top: auto; padding: 1rem 1.25rem 0; border-top: 1px solid var(--p-border-glass); } .vectia-platinum-app .vectia-theme-toggle { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-sm); color: var(--p-text-secondary); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--p-transition); width: 100%; } .vectia-platinum-app .vectia-theme-toggle:hover { background: var(--p-surface-glass-hover); border-color: var(--p-border-glass-strong); color: var(--p-text-primary); } .vectia-platinum-app .vectia-theme-toggle-track { width: 32px; height: 18px; background: var(--p-bg-elev-2); border: 1px solid var(--p-border-glass-strong); border-radius: 999px; position: relative; flex-shrink: 0; } .vectia-platinum-app .vectia-theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: linear-gradient(135deg, var(--p-cyan), var(--p-purple)); border-radius: 50%; transition: var(--p-transition); box-shadow: 0 0 8px var(--p-cyan-glow); } .vectia-platinum-app[data-theme="light"] .vectia-theme-toggle-thumb { transform: translateX(14px); background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 0 8px var(--p-amber-glow); } /* ───────────────────────────────────────────────────────────────────── COCKPIT C-LEVEL (composants) ───────────────────────────────────────────────────────────────────── */ /* Header */ .vectia-platinum-app .vp-cockpit-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--p-border-glass); animation: vpFadeInUp 0.6s var(--p-ease-out); flex-wrap: wrap; gap: 1rem; } .vectia-platinum-app .vp-cockpit-title-wrap { display: flex; flex-direction: column; gap: 0.25rem; } .vectia-platinum-app .vp-meta-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--p-cyan); letter-spacing: 0.18em; text-transform: uppercase; } .vectia-platinum-app .vp-cockpit-title { font-size: 32px; font-weight: 700; letter-spacing: -0.035em; color: var(--p-text-primary); line-height: 1.1; margin: 0; } .vectia-platinum-app .vp-cockpit-title em { font-style: normal; background: linear-gradient(135deg, var(--p-cyan) 0%, var(--p-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .vectia-platinum-app .vp-cockpit-subtitle { color: var(--p-text-tertiary); font-size: 14px; font-weight: 400; margin-top: 0.5rem; letter-spacing: -0.005em; } /* Period selector */ .vectia-platinum-app .vp-period-selector { display: flex; gap: 0.25rem; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-sm); padding: 0.25rem; } .vectia-platinum-app .vp-period-btn { padding: 0.5rem 0.875rem; background: transparent; border: none; color: var(--p-text-tertiary); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; border-radius: 4px; cursor: pointer; transition: var(--p-transition); } .vectia-platinum-app .vp-period-btn:hover { color: var(--p-text-primary); } .vectia-platinum-app .vp-period-btn.is-active { background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(168, 85, 247, 0.12)); color: var(--p-text-primary); box-shadow: 0 0 0 1px var(--p-border-glass-strong), 0 0 12px rgba(0, 210, 255, 0.15); } /* KPI Grid */ .vectia-platinum-app .vp-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } .vectia-platinum-app .vp-kpi-card { position: relative; padding: 1.25rem 1.25rem 1rem; background: var(--p-surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-lg); overflow: hidden; transition: var(--p-transition); animation: vpFadeInUp 0.6s var(--p-ease-out) backwards; } .vectia-platinum-app .vp-kpi-card:nth-child(1) { animation-delay: 0.1s; } .vectia-platinum-app .vp-kpi-card:nth-child(2) { animation-delay: 0.15s; } .vectia-platinum-app .vp-kpi-card:nth-child(3) { animation-delay: 0.2s; } .vectia-platinum-app .vp-kpi-card:nth-child(4) { animation-delay: 0.25s; } .vectia-platinum-app .vp-kpi-card:hover { transform: translateY(-2px); border-color: var(--p-border-glass-strong); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--p-border-glass-strong); } .vectia-platinum-app .vp-kpi-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, var(--vp-glow, rgba(0, 210, 255, 0.15)) 0%, transparent 60%); opacity: 0.6; pointer-events: none; } .vectia-platinum-app .vp-kpi-card.cyan { --vp-glow: rgba(0, 210, 255, 0.18); } .vectia-platinum-app .vp-kpi-card.purple { --vp-glow: rgba(168, 85, 247, 0.18); } .vectia-platinum-app .vp-kpi-card.green { --vp-glow: rgba(52, 211, 153, 0.18); } .vectia-platinum-app .vp-kpi-card.amber { --vp-glow: rgba(251, 191, 36, 0.18); } .vectia-platinum-app .vp-kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; position: relative; } .vectia-platinum-app .vp-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; color: var(--p-text-faint); letter-spacing: 0.15em; text-transform: uppercase; } .vectia-platinum-app .vp-kpi-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); display: flex; align-items: center; justify-content: center; font-size: 14px; } .vectia-platinum-app .vp-kpi-card.cyan .vp-kpi-icon { color: var(--p-cyan); } .vectia-platinum-app .vp-kpi-card.purple .vp-kpi-icon { color: var(--p-purple); } .vectia-platinum-app .vp-kpi-card.green .vp-kpi-icon { color: var(--p-green); } .vectia-platinum-app .vp-kpi-card.amber .vp-kpi-icon { color: var(--p-amber); } .vectia-platinum-app .vp-kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; color: var(--p-text-primary); line-height: 1; font-feature-settings: 'tnum'; position: relative; } .vectia-platinum-app .vp-kpi-value-suffix { font-size: 14px; font-weight: 500; color: var(--p-text-tertiary); margin-left: 0.25rem; letter-spacing: -0.01em; } .vectia-platinum-app .vp-kpi-trend { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; font-size: 12px; font-weight: 500; position: relative; } .vectia-platinum-app .vp-kpi-trend.up { color: var(--p-green); } .vectia-platinum-app .vp-kpi-trend.down { color: var(--p-red); } .vectia-platinum-app .vp-kpi-trend-bar { flex: 1; height: 3px; background: var(--p-surface-glass); border-radius: 999px; overflow: hidden; margin-left: auto; max-width: 60px; } .vectia-platinum-app .vp-kpi-trend-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p-cyan), var(--p-purple)); transition: width 1s var(--p-ease-out); } /* Section */ .vectia-platinum-app .vp-section-title-row { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0 1rem; } .vectia-platinum-app .vp-section-title { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; color: var(--p-text-primary); display: flex; align-items: center; gap: 0.625rem; margin: 0; } .vectia-platinum-app .vp-section-pulse { width: 6px; height: 6px; background: var(--p-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--p-cyan-glow); animation: vpPulse 2s ease-in-out infinite; } @keyframes vpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* Agents */ .vectia-platinum-app .vp-agents-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: 2rem; } .vectia-platinum-app .vp-agent-card { padding: 0.875rem; background: var(--p-surface-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-md); text-align: center; transition: var(--p-transition); cursor: pointer; position: relative; overflow: hidden; } .vectia-platinum-app .vp-agent-card:hover { border-color: var(--p-border-glass-strong); background: var(--p-surface-glass-hover); transform: translateY(-1px); } .vectia-platinum-app .vp-agent-card.is-active { animation: vpBreathe 4s ease-in-out infinite; } @keyframes vpBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--p-cyan-soft); } 50% { transform: scale(1.02); box-shadow: 0 0 0 4px var(--p-cyan-soft); } } .vectia-platinum-app .vp-agent-card.is-locked { opacity: 0.55; } .vectia-platinum-app .vp-agent-orb { width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 0.625rem; display: flex; align-items: center; justify-content: center; font-size: 16px; background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(168, 85, 247, 0.1)); border: 1px solid var(--p-border-glass-strong); color: var(--p-cyan); } .vectia-platinum-app .vp-agent-card.is-active .vp-agent-orb { box-shadow: 0 0 16px var(--p-cyan-glow); } .vectia-platinum-app .vp-agent-card.is-locked .vp-agent-orb { background: var(--p-surface-glass); color: var(--p-text-faint); box-shadow: none; } .vectia-platinum-app .vp-agent-name { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.25rem; } .vectia-platinum-app .vp-agent-label { font-size: 12px; font-weight: 500; color: var(--p-text-secondary); letter-spacing: -0.005em; } .vectia-platinum-app .vp-agent-card.is-active .vp-agent-label { color: var(--p-text-primary); } /* Glass card générique */ .vectia-platinum-app .vp-glass-card { background: var(--p-surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-lg); overflow: hidden; } .vectia-platinum-app .vp-glass-card-header { padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--p-border-glass); display: flex; justify-content: space-between; align-items: center; } .vectia-platinum-app .vp-glass-card-title { font-size: 14px; font-weight: 600; color: var(--p-text-primary); letter-spacing: -0.01em; } .vectia-platinum-app .vp-glass-card-action { color: var(--p-cyan); font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: var(--p-transition); background: transparent; border: none; padding: 0; } .vectia-platinum-app .vp-glass-card-action:hover { text-shadow: 0 0 6px var(--p-cyan-glow); } /* Split row */ .vectia-platinum-app .vp-split-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; margin-bottom: 2rem; } /* Activity table */ .vectia-platinum-app .vp-activity-table { width: 100%; border-collapse: collapse; } .vectia-platinum-app .vp-activity-table thead th { padding: 0.75rem 1.25rem; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--p-border-glass); background: rgba(0, 0, 0, 0.15); } .vectia-platinum-app[data-theme="light"] .vp-activity-table thead th { background: rgba(0, 0, 0, 0.025); } .vectia-platinum-app .vp-activity-table tbody tr { transition: var(--p-transition); } .vectia-platinum-app .vp-activity-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); } .vectia-platinum-app[data-theme="light"] .vp-activity-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); } .vectia-platinum-app .vp-activity-table tbody tr:hover { background: linear-gradient(90deg, rgba(0, 210, 255, 0.06) 0%, rgba(0, 210, 255, 0.02) 100%); box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.15); } .vectia-platinum-app .vp-activity-table td { padding: 0.875rem 1.25rem; font-size: 13px; color: var(--p-text-secondary); letter-spacing: -0.005em; } .vectia-platinum-app .vp-activity-table .col-numeric { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; color: var(--p-text-primary); text-align: right; font-weight: 500; } /* Status pills */ .vectia-platinum-app .vp-status-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.625rem; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid; } .vectia-platinum-app .vp-status-pill.success { color: var(--p-green); background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.25); } .vectia-platinum-app .vp-status-pill.pending { color: var(--p-amber); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.25); } .vectia-platinum-app .vp-status-pill.alert { color: var(--p-red); background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.25); } .vectia-platinum-app .vp-status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } /* Cash thermometer */ .vectia-platinum-app .vp-thermo-card { padding: 1.25rem; } .vectia-platinum-app .vp-thermo-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--p-text-faint); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; } .vectia-platinum-app .vp-thermo-value { font-size: 36px; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 0.25rem; font-feature-settings: 'tnum'; background: linear-gradient(135deg, var(--p-text-primary), var(--p-cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .vectia-platinum-app .vp-thermo-label { font-size: 12px; color: var(--p-text-tertiary); letter-spacing: -0.005em; margin-bottom: 1.25rem; } .vectia-platinum-app .vp-thermo-bars { display: flex; flex-direction: column; gap: 0.875rem; } .vectia-platinum-app .vp-thermo-bar { display: flex; flex-direction: column; gap: 0.375rem; } .vectia-platinum-app .vp-thermo-bar-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 500; color: var(--p-text-tertiary); } .vectia-platinum-app .vp-thermo-bar-value { font-family: 'JetBrains Mono', monospace; color: var(--p-text-primary); font-weight: 600; } .vectia-platinum-app .vp-thermo-bar-track { height: 4px; background: var(--p-surface-glass); border-radius: 999px; overflow: hidden; } .vectia-platinum-app .vp-thermo-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p-cyan), var(--p-purple)); box-shadow: 0 0 8px var(--p-cyan-glow); transition: width 1s var(--p-ease-out); } .vectia-platinum-app .vp-thermo-bar-fill.amber { background: linear-gradient(90deg, var(--p-amber), #f59e0b); box-shadow: 0 0 8px var(--p-amber-glow); } .vectia-platinum-app .vp-thermo-bar-fill.red { background: linear-gradient(90deg, var(--p-red), #dc2626); box-shadow: 0 0 8px var(--p-red-glow); } /* Buttons */ .vectia-platinum-app .vp-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; border: none; border-radius: var(--p-radius-sm); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: var(--p-transition); text-decoration: none; } .vectia-platinum-app .vp-btn-primary { background: linear-gradient(135deg, var(--p-cyan) 0%, #0098cc 100%); color: #0a0f1e; box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.4), 0 4px 16px rgba(0, 210, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .vectia-platinum-app .vp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.6), 0 6px 24px rgba(0, 210, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .vectia-platinum-app .vp-btn-ghost { background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); color: var(--p-text-secondary); } .vectia-platinum-app .vp-btn-ghost:hover { background: var(--p-surface-glass-hover); color: var(--p-text-primary); border-color: var(--p-border-glass-strong); } /* Oracle Flash card */ .vectia-platinum-app .vp-flash-card { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(0, 210, 255, 0.04) 100%); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: var(--p-radius-lg); padding: 1.5rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .vectia-platinum-app .vp-flash-card::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 60%); pointer-events: none; } .vectia-platinum-app .vp-flash-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; position: relative; } .vectia-platinum-app .vp-flash-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--p-purple), var(--p-cyan)); display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; box-shadow: 0 4px 16px var(--p-purple-glow); } .vectia-platinum-app .vp-flash-title { font-size: 14px; font-weight: 600; color: var(--p-text-primary); letter-spacing: -0.01em; } .vectia-platinum-app .vp-flash-meta { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--p-text-faint); letter-spacing: 0.1em; text-transform: uppercase; } .vectia-platinum-app .vp-flash-list { display: flex; flex-direction: column; gap: 0.625rem; position: relative; } .vectia-platinum-app .vp-flash-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.875rem; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-sm); font-size: 13px; color: var(--p-text-secondary); line-height: 1.5; transition: var(--p-transition); } .vectia-platinum-app .vp-flash-item:hover { border-color: var(--p-border-glass-strong); background: var(--p-surface-glass-hover); } .vectia-platinum-app .vp-flash-item-icon { flex-shrink: 0; margin-top: 1px; font-size: 14px; } .vectia-platinum-app .vp-flash-item.info .vp-flash-item-icon { color: var(--p-cyan); filter: drop-shadow(0 0 4px var(--p-cyan-glow)); } .vectia-platinum-app .vp-flash-item.warn .vp-flash-item-icon { color: var(--p-amber); filter: drop-shadow(0 0 4px var(--p-amber-glow)); } .vectia-platinum-app .vp-flash-item.bad .vp-flash-item-icon { color: var(--p-red); filter: drop-shadow(0 0 4px var(--p-red-glow)); } /* Animations */ @keyframes vpFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Scrollbar */ .vectia-platinum-app ::-webkit-scrollbar { width: 8px; height: 8px; } .vectia-platinum-app ::-webkit-scrollbar-track { background: transparent; } .vectia-platinum-app ::-webkit-scrollbar-thumb { background: var(--p-surface-glass-hover); border-radius: 999px; border: 2px solid var(--p-bg-deep); } .vectia-platinum-app ::-webkit-scrollbar-thumb:hover { background: var(--p-border-glass-strong); } /* Responsive */ @media (max-width: 1100px) { .vectia-platinum-app .vp-kpi-grid { grid-template-columns: repeat(2, 1fr); } .vectia-platinum-app .vp-agents-grid { grid-template-columns: repeat(3, 1fr); } .vectia-platinum-app .vp-split-row { grid-template-columns: 1fr; } } @media (max-width: 768px) { .vectia-platinum-app .vp-kpi-grid { grid-template-columns: 1fr; } .vectia-platinum-app .vp-agents-grid { grid-template-columns: repeat(2, 1fr); } .vectia-platinum-app .vp-cockpit-title { font-size: 24px; } } /* ════════════════════════════════════════════════════════════════════ VECTIA · Platinum CSS Patch v3.3.2 (FINAL) ──────────────────────────────────────────────────────────────────── FIX DÉFINITIF : - Spécificité augmentée pour battre Tailwind (bg-vectia-bg) - Sélecteurs html[data-theme] (pas body) - !important sur le fond critique ════════════════════════════════════════════════════════════════════ */ /* ─── 1. FOND : force Deep Night Blue avec haute spécificité ─── */ html body.vectia-platinum-app { background: #0a0f1e !important; background-color: #0a0f1e !important; color: #f1f5f9 !important; min-height: 100vh; } /* Mode Clair-Pro : data-theme sur html */ html[data-theme="light"] body.vectia-platinum-app { background: #f8fafc !important; background-color: #f8fafc !important; color: #0f172a !important; } /* ─── 2. AURORES en arrière-plan ─── */ body.vectia-platinum-app::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0, 210, 255, 0.15), transparent 50%), radial-gradient(ellipse 60% 40% at 80% 30%, rgba(168, 85, 247, 0.12), transparent 50%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0, 210, 255, 0.08), transparent 50%); pointer-events: none; z-index: 0; transition: opacity 0.5s ease; } html[data-theme="light"] body.vectia-platinum-app::before { opacity: 0.3; } /* Grain texture */ body.vectia-platinum-app::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 1; mix-blend-mode: overlay; } /* ─── 3. Conteneurs transparents pour laisser passer le fond ─── */ body.vectia-platinum-app #app, body.vectia-platinum-app main, body.vectia-platinum-app .app-container, body.vectia-platinum-app .main-content, body.vectia-platinum-app .view-container, body.vectia-platinum-app .layout-grid { background: transparent !important; position: relative; z-index: 2; } /* ─── 4. Override Tailwind bg-vectia-bg + bg-white sur cards ─── */ body.vectia-platinum-app .v-card, body.vectia-platinum-app .bg-white, body.vectia-platinum-app [class*="bg-vectia-"] { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #f1f5f9 !important; } html[data-theme="light"] body.vectia-platinum-app .v-card, html[data-theme="light"] body.vectia-platinum-app .bg-white { background: rgba(255, 255, 255, 0.95) !important; color: #0f172a !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; } /* ─── 5. Force le texte lisible sur tout contenu ─── */ body.vectia-platinum-app, body.vectia-platinum-app h1, body.vectia-platinum-app h2, body.vectia-platinum-app h3, body.vectia-platinum-app h4, body.vectia-platinum-app p, body.vectia-platinum-app .page-title, body.vectia-platinum-app .page-meta, body.vectia-platinum-app label, body.vectia-platinum-app .text-vectia-ink { color: #f1f5f9 !important; } body.vectia-platinum-app .text-vectia-soft, body.vectia-platinum-app .text-vectia-faint { color: #94a3b8 !important; } /* Mode Clair-Pro : texte foncé */ html[data-theme="light"] body.vectia-platinum-app, html[data-theme="light"] body.vectia-platinum-app h1, html[data-theme="light"] body.vectia-platinum-app h2, html[data-theme="light"] body.vectia-platinum-app h3, html[data-theme="light"] body.vectia-platinum-app .page-title, html[data-theme="light"] body.vectia-platinum-app .text-vectia-ink { color: #0f172a !important; } html[data-theme="light"] body.vectia-platinum-app .text-vectia-soft, html[data-theme="light"] body.vectia-platinum-app .text-vectia-faint { color: #64748b !important; } /* ─── 6. Sidebar en glassmorphism ─── */ body.vectia-platinum-app .vectia-sidebar-root { background: rgba(10, 15, 30, 0.6) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] body.vectia-platinum-app .vectia-sidebar-root { background: rgba(255, 255, 255, 0.7) !important; border-right: 1px solid rgba(15, 23, 42, 0.08) !important; } /* ─── 7. Variables CSS sur body au lieu de la div ─── */ /* Permet aux classes vp-* de fonctionner partout dans le body */ body.vectia-platinum-app { --p-bg-deep: #0a0f1e; --p-bg-elev-1: #0f1729; --p-bg-elev-2: #131c33; --p-surface-glass: rgba(255, 255, 255, 0.04); --p-surface-glass-hover: rgba(255, 255, 255, 0.07); --p-border-glass: rgba(255, 255, 255, 0.08); --p-border-glass-strong: rgba(255, 255, 255, 0.14); --p-text-primary: #f1f5f9; --p-text-secondary: #cbd5e1; --p-text-tertiary: #94a3b8; --p-text-faint: #64748b; --p-cyan: #00d2ff; --p-cyan-glow: rgba(0, 210, 255, 0.4); --p-cyan-soft: rgba(0, 210, 255, 0.08); --p-purple: #a855f7; --p-purple-glow: rgba(168, 85, 247, 0.4); --p-amber: #fbbf24; --p-amber-glow: rgba(251, 191, 36, 0.5); --p-green: #34d399; --p-green-glow: rgba(52, 211, 153, 0.3); --p-red: #f87171; --p-red-glow: rgba(248, 113, 113, 0.3); --p-radius-sm: 6px; --p-radius-md: 10px; --p-radius-lg: 14px; --p-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --p-transition: all 0.3s var(--p-ease-out); } html[data-theme="light"] body.vectia-platinum-app { --p-bg-deep: #f8fafc; --p-bg-elev-1: #ffffff; --p-bg-elev-2: #ffffff; --p-surface-glass: rgba(15, 23, 42, 0.03); --p-surface-glass-hover: rgba(15, 23, 42, 0.06); --p-border-glass: rgba(15, 23, 42, 0.08); --p-border-glass-strong: rgba(15, 23, 42, 0.15); --p-text-primary: #0f172a; --p-text-secondary: #334155; --p-text-tertiary: #64748b; --p-text-faint: #94a3b8; --p-cyan: #0891b2; } /* ════════════════════════════════════════════════════════════════════ VECTIA · Platinum Extension - Subscription Page (v3.3.3) ──────────────────────────────────────────────────────────────────── Composants spécifiques à la page Mon Abonnement : - Cartes des plans (joyaux technologiques) - Ribbon "Le plus choisi" - Liste de features avec icônes ✓ / × - Highlight du plan actuel À AJOUTER À LA FIN de web/vectia-platinum.css ════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── GRILLE DES PLANS ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; } @media (max-width: 1100px) { .vectia-platinum-app .vp-plans-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────── CARTE D'UN PLAN - Joyau technologique ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-plan-card { position: relative; padding: 2rem 1.75rem 1.75rem; background: var(--p-surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-xl); overflow: hidden; transition: var(--p-transition); animation: vpFadeInUp 0.6s var(--p-ease-out) backwards; display: flex; flex-direction: column; } .vectia-platinum-app .vp-plan-card:nth-child(1) { animation-delay: 0.1s; } .vectia-platinum-app .vp-plan-card:nth-child(2) { animation-delay: 0.2s; } .vectia-platinum-app .vp-plan-card:nth-child(3) { animation-delay: 0.3s; } .vectia-platinum-app .vp-plan-card:hover { transform: translateY(-4px); border-color: var(--p-border-glass-strong); } /* Halo radial coloré par accent */ .vectia-platinum-app .vp-plan-card::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient( ellipse at top, var(--vp-plan-glow, rgba(0, 210, 255, 0.15)) 0%, transparent 50% ); opacity: 0.7; pointer-events: none; z-index: 0; transition: opacity 0.5s ease; } .vectia-platinum-app .vp-plan-card:hover::before { opacity: 1; } .vectia-platinum-app .vp-plan-card.vp-plan-green { --vp-plan-glow: rgba(52, 211, 153, 0.18); } .vectia-platinum-app .vp-plan-card.vp-plan-cyan { --vp-plan-glow: rgba(0, 210, 255, 0.22); } .vectia-platinum-app .vp-plan-card.vp-plan-purple{ --vp-plan-glow: rgba(168, 85, 247, 0.20); } /* ─── Bordure néon sur la carte featured ─── */ .vectia-platinum-app .vp-plan-card.vp-plan-cyan { border: 1px solid rgba(0, 210, 255, 0.4); box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.2), 0 16px 48px rgba(0, 210, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .vectia-platinum-app .vp-plan-card.vp-plan-cyan:hover { border-color: rgba(0, 210, 255, 0.6); box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.3), 0 20px 64px rgba(0, 210, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ─── Animation breathing sur la carte featured ─── */ .vectia-platinum-app .vp-plan-card.vp-plan-cyan::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient( 135deg, rgba(0, 210, 255, 0.4), rgba(168, 85, 247, 0.3), rgba(0, 210, 255, 0.4) ); background-size: 200% 200%; z-index: -1; animation: vpPlanShimmer 4s ease-in-out infinite; opacity: 0.6; } @keyframes vpPlanShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ─── État : plan actuel ─── */ .vectia-platinum-app .vp-plan-card.is-current { border-color: rgba(52, 211, 153, 0.5) !important; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3), 0 12px 40px rgba(52, 211, 153, 0.2); } .vectia-platinum-app .vp-plan-card.is-current::after { background: linear-gradient(135deg, rgba(52, 211, 153, 0.4), rgba(0, 210, 255, 0.3)); } /* ─── Ribbon "Le plus choisi" ─── */ .vectia-platinum-app .vp-plan-ribbon { position: absolute; top: 1rem; right: 1rem; padding: 0.3rem 0.75rem; background: linear-gradient(135deg, var(--p-cyan), var(--p-purple)); color: white; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 210, 255, 0.4); z-index: 2; } /* ───────────────────────────────────────────────────────────────────── HEADER DU PLAN ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-plan-header { position: relative; z-index: 1; margin-bottom: 1.25rem; } .vectia-platinum-app .vp-plan-name { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; color: var(--p-text-primary) !important; line-height: 1; margin: 0.5rem 0 0.375rem !important; } .vectia-platinum-app .vp-plan-card.vp-plan-cyan .vp-plan-name { background: linear-gradient(135deg, var(--p-text-primary) 0%, var(--p-cyan) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vectia-platinum-app .vp-plan-tagline { font-size: 13px; color: var(--p-text-tertiary) !important; margin: 0 !important; letter-spacing: -0.005em; } /* ───────────────────────────────────────────────────────────────────── PRIX ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-plan-price-block { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--p-border-glass); position: relative; z-index: 1; } .vectia-platinum-app .vp-plan-price { font-size: 42px; font-weight: 800; letter-spacing: -0.04em; color: var(--p-text-primary); line-height: 1; font-feature-settings: 'tnum'; } .vectia-platinum-app .vp-plan-price::before { content: '$'; font-size: 22px; font-weight: 600; color: var(--p-text-tertiary); margin-right: 0.125rem; vertical-align: super; } .vectia-platinum-app .vp-plan-price-suffix { font-size: 13px; color: var(--p-text-tertiary); font-weight: 500; letter-spacing: -0.005em; } /* ───────────────────────────────────────────────────────────────────── FEATURES LIST ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-plan-features { list-style: none !important; padding: 0 !important; margin: 0 0 1.75rem !important; flex: 1; position: relative; z-index: 1; } .vectia-platinum-app .vp-plan-feature { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0; font-size: 13px; line-height: 1.4; letter-spacing: -0.005em; transition: var(--p-transition); } .vectia-platinum-app .vp-plan-feature.included { color: var(--p-text-secondary); } .vectia-platinum-app .vp-plan-feature.excluded { color: var(--p-text-faint); opacity: 0.6; } .vectia-platinum-app .vp-plan-feature-icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-top: 1px; } .vectia-platinum-app .vp-plan-feature.included .vp-plan-feature-icon { background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(0, 210, 255, 0.2)); border: 1px solid rgba(52, 211, 153, 0.4); color: var(--p-green); box-shadow: 0 0 8px rgba(52, 211, 153, 0.3); } .vectia-platinum-app .vp-plan-feature.excluded .vp-plan-feature-icon { background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); color: var(--p-text-faint); } /* ───────────────────────────────────────────────────────────────────── BOUTON CTA DU PLAN ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-plan-cta { width: 100%; justify-content: center; padding: 0.875rem 1.25rem; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; border: none; border-radius: var(--p-radius-md); cursor: pointer; transition: var(--p-transition); display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Inter', sans-serif; position: relative; z-index: 1; } .vectia-platinum-app .vp-plan-cta.is-current { background: rgba(52, 211, 153, 0.1) !important; color: var(--p-green) !important; border: 1px solid rgba(52, 211, 153, 0.4) !important; cursor: default; } .vectia-platinum-app .vp-plan-cta.is-current:hover { transform: none; } /* Bouton primary pour upgrade */ .vectia-platinum-app .vp-plan-card.vp-plan-cyan .vp-plan-cta.vp-btn-primary { background: linear-gradient(135deg, var(--p-cyan) 0%, #0098cc 100%); color: #0a0f1e; box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.4), 0 6px 24px rgba(0, 210, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .vectia-platinum-app .vp-plan-card.vp-plan-purple .vp-plan-cta.vp-btn-primary { background: linear-gradient(135deg, var(--p-purple) 0%, #7e22ce 100%); color: white; box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4), 0 6px 24px rgba(168, 85, 247, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .vectia-platinum-app .vp-plan-card.vp-plan-green .vp-plan-cta.vp-btn-primary { background: linear-gradient(135deg, var(--p-green) 0%, #10b981 100%); color: #0a0f1e; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.4), 0 6px 24px rgba(52, 211, 153, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .vectia-platinum-app .vp-plan-cta.vp-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); } /* ───────────────────────────────────────────────────────────────────── AGENT DETAILED CARD (grille pleine page) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-agent-detailed { padding: 1.25rem 1rem !important; text-align: center; cursor: default !important; animation: none !important; } .vectia-platinum-app .vp-agent-detailed:hover { transform: translateY(-2px); border-color: var(--p-border-glass-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } /* Mode Clair-Pro : adaptations */ html[data-theme="light"] body.vectia-platinum-app .vp-plan-card { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(15, 23, 42, 0.08) !important; color: #0f172a; } html[data-theme="light"] body.vectia-platinum-app .vp-plan-name { color: #0f172a !important; } html[data-theme="light"] body.vectia-platinum-app .vp-plan-price { color: #0f172a; } html[data-theme="light"] body.vectia-platinum-app .vp-plan-card.vp-plan-cyan .vp-plan-cta.vp-btn-primary { color: white; } /* ════════════════════════════════════════════════════════════════════ VECTIA · Platinum Extension - Admin Control & Master (v3.3.4) ──────────────────────────────────────────────────────────────────── Composants spécifiques : - Grille d'agents avec toggles néon - Toggle néon (style switch iOS) avec lueur cyan - Halos par accent de plan ════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── GRILLE DES AGENTS (admin_control) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-agents-toggle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 1100px) { .vectia-platinum-app .vp-agents-toggle-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .vectia-platinum-app .vp-agents-toggle-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────── CARTE D'AGENT AVEC TOGGLE ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-agent-toggle-card { padding: 1.125rem; background: var(--p-surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-lg); transition: var(--p-transition); position: relative; overflow: hidden; animation: vpFadeInUp 0.5s var(--p-ease-out) backwards; } .vectia-platinum-app .vp-agent-toggle-card.is-on { border-color: rgba(0, 210, 255, 0.3); background: linear-gradient(135deg, rgba(0, 210, 255, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%); } .vectia-platinum-app .vp-agent-toggle-card.is-on::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--p-cyan), transparent); opacity: 0.6; } .vectia-platinum-app .vp-agent-toggle-card.is-off { opacity: 0.55; } .vectia-platinum-app .vp-agent-toggle-card:hover { transform: translateY(-2px); border-color: var(--p-border-glass-strong); } .vectia-platinum-app .vp-agent-toggle-card.is-on:hover { border-color: rgba(0, 210, 255, 0.5); box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.2), 0 8px 24px rgba(0, 210, 255, 0.15); } /* Header de la carte agent */ .vectia-platinum-app .vp-agent-toggle-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .vectia-platinum-app .vp-agent-toggle-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(168, 85, 247, 0.1)); border: 1px solid var(--p-border-glass-strong); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .vectia-platinum-app .vp-agent-toggle-card.is-on .vp-agent-toggle-icon { box-shadow: 0 0 16px var(--p-cyan-glow); } .vectia-platinum-app .vp-agent-toggle-code { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.125rem; } .vectia-platinum-app .vp-agent-toggle-name { font-size: 14px; font-weight: 600; color: var(--p-text-primary); letter-spacing: -0.01em; line-height: 1.2; } .vectia-platinum-app .vp-agent-toggle-desc { font-size: 12px; color: var(--p-text-tertiary); line-height: 1.4; margin-bottom: 0.875rem; letter-spacing: -0.005em; } .vectia-platinum-app .vp-agent-toggle-status { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.625rem; border-top: 1px solid var(--p-border-glass); } .vectia-platinum-app .vp-agent-toggle-status.is-active { color: var(--p-cyan); text-shadow: 0 0 4px var(--p-cyan-glow); } /* ───────────────────────────────────────────────────────────────────── TOGGLE NÉON (style switch iOS bleu électrique) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-neon-toggle { flex-shrink: 0; cursor: pointer; transition: var(--p-transition); } .vectia-platinum-app .vp-neon-toggle-track { width: 40px; height: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--p-border-glass); border-radius: 999px; position: relative; transition: var(--p-transition); } .vectia-platinum-app .vp-neon-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--p-text-faint); border-radius: 50%; transition: var(--p-transition); } /* État ON : bleu électrique avec glow */ .vectia-platinum-app .vp-neon-toggle.is-on .vp-neon-toggle-track { background: linear-gradient(135deg, var(--p-cyan) 0%, #0098cc 100%); border-color: var(--p-cyan); box-shadow: 0 0 12px var(--p-cyan-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .vectia-platinum-app .vp-neon-toggle.is-on .vp-neon-toggle-thumb { transform: translateX(18px); background: white; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2); } /* Hover */ .vectia-platinum-app .vp-neon-toggle:hover .vp-neon-toggle-track { border-color: var(--p-border-glass-strong); } .vectia-platinum-app .vp-neon-toggle.is-on:hover .vp-neon-toggle-track { box-shadow: 0 0 16px var(--p-cyan-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* ───────────────────────────────────────────────────────────────────── HALOS PAR ACCENT (utilisé dans renderCurrentPlan) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app { --vp-glow-green: rgba(52, 211, 153, 0.18); --vp-glow-cyan: rgba(0, 210, 255, 0.22); --vp-glow-purple: rgba(168, 85, 247, 0.20); --vp-glow-amber: rgba(251, 191, 36, 0.18); } /* ───────────────────────────────────────────────────────────────────── MODE CLAIR-PRO : adaptations ───────────────────────────────────────────────────────────────────── */ html[data-theme="light"] body.vectia-platinum-app .vp-agent-toggle-card { background: rgba(255, 255, 255, 0.7) !important; border-color: rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body.vectia-platinum-app .vp-agent-toggle-card.is-on { background: rgba(8, 145, 178, 0.05) !important; border-color: rgba(8, 145, 178, 0.3) !important; } html[data-theme="light"] body.vectia-platinum-app .vp-neon-toggle-track { background: rgba(15, 23, 42, 0.1); border-color: rgba(15, 23, 42, 0.2); } html[data-theme="light"] body.vectia-platinum-app .vp-neon-toggle.is-on .vp-neon-toggle-track { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); border-color: #0891b2; } /* ════════════════════════════════════════════════════════════════════ VECTIA · Platinum Extension - Finance Module (v3.4.0) ──────────────────────────────────────────────────────────────────── Composants spécifiques au Pôle Finance : - Tableaux financiers (bilan, P&L) avec totaux lumineux - Chronologie verticale pour prêts (timeline futuriste) - Cartes de soldes bancaires - Pills de statut comptable (validé, brouillon, payé) À AJOUTER À LA FIN de web/vectia-platinum.css ════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── TABLEAUX FINANCIERS · Lueurs sur totaux ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-fin-table { width: 100%; border-collapse: collapse; } .vectia-platinum-app .vp-fin-table thead th { padding: 0.875rem 1.25rem; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--p-border-glass); background: rgba(0, 0, 0, 0.2); } .vectia-platinum-app[data-theme="light"] .vp-fin-table thead th { background: rgba(0, 0, 0, 0.025); } .vectia-platinum-app .vp-fin-table tbody tr { transition: var(--p-transition); } .vectia-platinum-app .vp-fin-table tbody tr:hover { background: linear-gradient(90deg, rgba(0, 210, 255, 0.06) 0%, rgba(0, 210, 255, 0.02) 100%); box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.15); } .vectia-platinum-app .vp-fin-table td { padding: 0.75rem 1.25rem; font-size: 13px; color: var(--p-text-secondary); letter-spacing: -0.005em; border-bottom: 1px solid var(--p-border-glass); } .vectia-platinum-app .vp-fin-table .col-amount { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; color: var(--p-text-primary); text-align: right; font-weight: 500; } /* Lignes de section (groupes) */ .vectia-platinum-app .vp-fin-table tr.is-section td { background: rgba(255, 255, 255, 0.02); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.12em; text-transform: uppercase; padding-top: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--p-border-glass-strong); } .vectia-platinum-app .vp-fin-table tr.is-subsection td { color: var(--p-text-tertiary); font-style: italic; padding-top: 0.5rem; } /* ⭐ Lignes TOTALES avec lueur cyan */ .vectia-platinum-app .vp-fin-table tr.is-total td { background: linear-gradient(90deg, rgba(0, 210, 255, 0.08) 0%, rgba(168, 85, 247, 0.04) 50%, rgba(0, 210, 255, 0.06) 100%); border-top: 1px solid rgba(0, 210, 255, 0.3); border-bottom: 1px solid rgba(0, 210, 255, 0.3); font-weight: 700; font-size: 14px; color: var(--p-text-primary); padding-top: 0.875rem; padding-bottom: 0.875rem; box-shadow: inset 0 0 20px rgba(0, 210, 255, 0.05); } .vectia-platinum-app .vp-fin-table tr.is-total .col-amount { color: var(--p-cyan); text-shadow: 0 0 8px var(--p-cyan-glow); font-size: 15px; font-weight: 700; } /* ⭐⭐ Ligne GRAND TOTAL (résultat net) avec lueur intense */ .vectia-platinum-app .vp-fin-table tr.is-grand-total td { background: linear-gradient(90deg, rgba(0, 210, 255, 0.15) 0%, rgba(168, 85, 247, 0.10) 50%, rgba(0, 210, 255, 0.12) 100%); border-top: 2px solid var(--p-cyan); border-bottom: 2px solid var(--p-cyan); font-size: 16px; font-weight: 800; color: var(--p-text-primary); padding: 1.125rem 1.25rem; box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.1), 0 0 24px rgba(0, 210, 255, 0.15); } .vectia-platinum-app .vp-fin-table tr.is-grand-total .col-amount { color: var(--p-cyan); text-shadow: 0 0 12px var(--p-cyan-glow); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .vectia-platinum-app .vp-fin-table tr.is-grand-total.is-negative .col-amount { color: var(--p-red); text-shadow: 0 0 12px var(--p-red-glow); } .vectia-platinum-app .vp-fin-table tr.is-grand-total.is-positive .col-amount { color: var(--p-green); text-shadow: 0 0 12px var(--p-green-glow); } /* Indentation pour comptes enfants */ .vectia-platinum-app .vp-fin-table .indent-1 { padding-left: 2.5rem; } .vectia-platinum-app .vp-fin-table .indent-2 { padding-left: 3.75rem; } /* Cellules numériques colorées */ .vectia-platinum-app .col-amount.positive { color: var(--p-green); } .vectia-platinum-app .col-amount.negative { color: var(--p-red); } .vectia-platinum-app .col-amount.neutral { color: var(--p-text-tertiary); } /* ───────────────────────────────────────────────────────────────────── CARTES DE RÉSUMÉ FINANCIER (KPIs Bilan/P&L) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-fin-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; } @media (max-width: 900px) { .vectia-platinum-app .vp-fin-summary-grid { grid-template-columns: 1fr; } } .vectia-platinum-app .vp-fin-summary-card { padding: 1.5rem 1.5rem 1.25rem; background: var(--p-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-lg); position: relative; overflow: hidden; animation: vpFadeInUp 0.5s var(--p-ease-out) backwards; } .vectia-platinum-app .vp-fin-summary-card:nth-child(1) { animation-delay: 0.05s; } .vectia-platinum-app .vp-fin-summary-card:nth-child(2) { animation-delay: 0.1s; } .vectia-platinum-app .vp-fin-summary-card:nth-child(3) { animation-delay: 0.15s; } .vectia-platinum-app .vp-fin-summary-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--p-cyan), transparent); opacity: 0.5; } .vectia-platinum-app .vp-fin-summary-card.is-positive::before { background: linear-gradient(90deg, transparent, var(--p-green), transparent); } .vectia-platinum-app .vp-fin-summary-card.is-negative::before { background: linear-gradient(90deg, transparent, var(--p-red), transparent); } .vectia-platinum-app .vp-fin-summary-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.625rem; } .vectia-platinum-app .vp-fin-summary-value { font-size: 32px; font-weight: 700; letter-spacing: -0.04em; color: var(--p-text-primary); line-height: 1; font-feature-settings: 'tnum'; background: linear-gradient(135deg, var(--p-text-primary), var(--p-cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vectia-platinum-app .vp-fin-summary-card.is-positive .vp-fin-summary-value { background: linear-gradient(135deg, var(--p-text-primary), var(--p-green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vectia-platinum-app .vp-fin-summary-card.is-negative .vp-fin-summary-value { background: linear-gradient(135deg, var(--p-text-primary), var(--p-red)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vectia-platinum-app .vp-fin-summary-suffix { font-size: 14px; color: var(--p-text-tertiary); font-weight: 500; margin-left: 0.375rem; } .vectia-platinum-app .vp-fin-summary-meta { margin-top: 0.625rem; font-size: 12px; color: var(--p-text-tertiary); } /* ───────────────────────────────────────────────────────────────────── CHRONOLOGIE FUTURISTE (Plan d'amortissement de prêt) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-timeline { position: relative; padding-left: 2rem; } .vectia-platinum-app .vp-timeline::before { content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.5rem; width: 2px; background: linear-gradient(180deg, var(--p-cyan) 0%, var(--p-purple) 50%, var(--p-cyan) 100%); box-shadow: 0 0 8px var(--p-cyan-glow); border-radius: 2px; } .vectia-platinum-app .vp-timeline-item { position: relative; padding: 0.75rem 1rem; margin-bottom: 0.75rem; background: var(--p-surface-glass); backdrop-filter: blur(10px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-md); transition: var(--p-transition); } .vectia-platinum-app .vp-timeline-item:hover { border-color: var(--p-border-glass-strong); transform: translateX(4px); } .vectia-platinum-app .vp-timeline-item::before { content: ''; position: absolute; left: -1.875rem; top: 1.125rem; width: 12px; height: 12px; border-radius: 50%; background: var(--p-bg-deep); border: 2px solid var(--p-cyan); box-shadow: 0 0 8px var(--p-cyan-glow); z-index: 1; } .vectia-platinum-app .vp-timeline-item.is-paid::before { background: var(--p-green); border-color: var(--p-green); box-shadow: 0 0 8px var(--p-green-glow); } .vectia-platinum-app .vp-timeline-item.is-due::before { background: var(--p-amber); border-color: var(--p-amber); box-shadow: 0 0 8px var(--p-amber-glow); animation: vpPulse 2s ease-in-out infinite; } .vectia-platinum-app .vp-timeline-item.is-overdue::before { background: var(--p-red); border-color: var(--p-red); box-shadow: 0 0 8px var(--p-red-glow); } .vectia-platinum-app .vp-timeline-item.is-future::before { background: var(--p-bg-deep); border-color: var(--p-text-faint); box-shadow: none; } .vectia-platinum-app .vp-timeline-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .vectia-platinum-app .vp-timeline-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--p-text-faint); letter-spacing: 0.05em; text-transform: uppercase; } .vectia-platinum-app .vp-timeline-label { font-size: 14px; font-weight: 600; color: var(--p-text-primary); letter-spacing: -0.01em; } .vectia-platinum-app .vp-timeline-amount { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--p-text-primary); font-feature-settings: 'tnum'; } .vectia-platinum-app .vp-timeline-detail { margin-top: 0.375rem; font-size: 12px; color: var(--p-text-tertiary); display: flex; gap: 1rem; flex-wrap: wrap; } .vectia-platinum-app .vp-timeline-detail span { font-family: 'JetBrains Mono', monospace; } /* ───────────────────────────────────────────────────────────────────── BARRES DE PROGRESSION (gauges) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-progress { height: 6px; background: var(--p-surface-glass); border-radius: 999px; overflow: hidden; position: relative; } .vectia-platinum-app .vp-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p-cyan), var(--p-purple)); box-shadow: 0 0 8px var(--p-cyan-glow); transition: width 1s var(--p-ease-out); } .vectia-platinum-app .vp-progress-fill.green { background: linear-gradient(90deg, var(--p-green), #10b981); box-shadow: 0 0 8px var(--p-green-glow); } .vectia-platinum-app .vp-progress-fill.amber { background: linear-gradient(90deg, var(--p-amber), #f59e0b); box-shadow: 0 0 8px var(--p-amber-glow); } .vectia-platinum-app .vp-progress-fill.red { background: linear-gradient(90deg, var(--p-red), #dc2626); box-shadow: 0 0 8px var(--p-red-glow); } /* ───────────────────────────────────────────────────────────────────── FORMULAIRES PLATINUM (modal-friendly) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-input, .vectia-platinum-app .vp-select, .vectia-platinum-app .vp-textarea { width: 100%; padding: 0.625rem 0.875rem; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-sm); color: var(--p-text-primary); font-family: 'Inter', sans-serif; font-size: 13.5px; transition: var(--p-transition); letter-spacing: -0.005em; } .vectia-platinum-app .vp-input:focus, .vectia-platinum-app .vp-select:focus, .vectia-platinum-app .vp-textarea:focus { outline: none; border-color: rgba(0, 210, 255, 0.5); background: var(--p-surface-glass-hover); box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.1); } .vectia-platinum-app .vp-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.375rem; } .vectia-platinum-app .vp-form-row { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .vectia-platinum-app .vp-form-col { flex: 1; min-width: 180px; } /* ───────────────────────────────────────────────────────────────────── ACTION BAR (boutons d'actions au-dessus des tableaux) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-action-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .vectia-platinum-app .vp-action-bar-left, .vectia-platinum-app .vp-action-bar-right { display: flex; gap: 0.5rem; align-items: center; } /* ───────────────────────────────────────────────────────────────────── EMPTY STATE (Platinum) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-empty-state { padding: 3rem 2rem; text-align: center; color: var(--p-text-tertiary); } .vectia-platinum-app .vp-empty-state-icon { font-size: 40px; margin-bottom: 1rem; opacity: 0.5; } .vectia-platinum-app .vp-empty-state-title { font-size: 16px; font-weight: 600; color: var(--p-text-primary); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .vectia-platinum-app .vp-empty-state-text { font-size: 13px; color: var(--p-text-tertiary); line-height: 1.5; max-width: 480px; margin: 0 auto; } /* ───────────────────────────────────────────────────────────────────── TABS NAVIGATION ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-tabs { display: flex; gap: 0.25rem; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-sm); padding: 0.25rem; margin-bottom: 1.5rem; width: fit-content; } .vectia-platinum-app .vp-tab { padding: 0.5rem 1rem; background: transparent; border: none; color: var(--p-text-tertiary); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; border-radius: 4px; cursor: pointer; transition: var(--p-transition); letter-spacing: -0.005em; } .vectia-platinum-app .vp-tab:hover { color: var(--p-text-primary); } .vectia-platinum-app .vp-tab.is-active { background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(168, 85, 247, 0.12)); color: var(--p-text-primary); box-shadow: 0 0 0 1px var(--p-border-glass-strong), 0 0 12px rgba(0, 210, 255, 0.15); } /* Mode Clair-Pro */ html[data-theme="light"] body.vectia-platinum-app .vp-fin-summary-value, html[data-theme="light"] body.vectia-platinum-app .vp-fin-table tr.is-grand-total .col-amount { -webkit-text-fill-color: #0f172a; color: #0f172a; text-shadow: none; } html[data-theme="light"] body.vectia-platinum-app .vp-fin-table tr.is-total .col-amount { color: #0891b2; text-shadow: none; } /* ════════════════════════════════════════════════════════════════════ VECTIA · Platinum Extension - Operations Module (v3.5.0) ──────────────────────────────────────────────────────────────────── Composants spécifiques Inventaire / Logistique / Production : - Stock badges (niveaux : OK / faible / critique / rupture) - Pipeline de livraison (étapes visuelles) - Tracking pulse (point qui pulse pour items en transit) - Recipe cards (cartes recettes) ════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── STOCK LEVEL BADGES ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-stock-level { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; } .vectia-platinum-app .vp-stock-level-bar { width: 4px; height: 14px; border-radius: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; } .vectia-platinum-app .vp-stock-ok { color: var(--p-green); background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.3); } .vectia-platinum-app .vp-stock-low { color: var(--p-amber); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); animation: vpAmberPulse 2.5s ease-in-out infinite; } @keyframes vpAmberPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } 50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15); } } .vectia-platinum-app .vp-stock-critical { color: var(--p-red); background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.4); animation: vpRedPulse 1.5s ease-in-out infinite; } @keyframes vpRedPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } 50% { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.2); } } .vectia-platinum-app .vp-stock-empty { color: var(--p-text-faint); background: var(--p-surface-glass); border-color: var(--p-border-glass); text-decoration: line-through; } /* Niveau de stock visuel (jauge horizontale) */ .vectia-platinum-app .vp-stock-gauge { height: 4px; background: var(--p-surface-glass); border-radius: 999px; overflow: hidden; width: 100px; } .vectia-platinum-app .vp-stock-gauge-fill { height: 100%; border-radius: 999px; transition: width 0.6s var(--p-ease-out); } .vectia-platinum-app .vp-stock-gauge-fill.ok { background: linear-gradient(90deg, var(--p-green), #10b981); box-shadow: 0 0 6px var(--p-green-glow); } .vectia-platinum-app .vp-stock-gauge-fill.low { background: linear-gradient(90deg, var(--p-amber), #f59e0b); box-shadow: 0 0 6px var(--p-amber-glow); } .vectia-platinum-app .vp-stock-gauge-fill.critical { background: linear-gradient(90deg, var(--p-red), #dc2626); box-shadow: 0 0 6px var(--p-red-glow); } /* ───────────────────────────────────────────────────────────────────── PIPELINE DE LIVRAISON (Logistique) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-pipeline { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0; overflow-x: auto; } .vectia-platinum-app .vp-pipeline-step { flex: 1; min-width: 80px; padding: 0.5rem 0.625rem; text-align: center; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-sm); transition: var(--p-transition); position: relative; } .vectia-platinum-app .vp-pipeline-step.is-done { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.4); color: var(--p-green); } .vectia-platinum-app .vp-pipeline-step.is-current { background: rgba(0, 210, 255, 0.12); border-color: rgba(0, 210, 255, 0.5); color: var(--p-cyan); box-shadow: 0 0 12px var(--p-cyan-glow); animation: vpPipelinePulse 2s ease-in-out infinite; } @keyframes vpPipelinePulse { 0%, 100% { box-shadow: 0 0 12px rgba(0, 210, 255, 0.3); } 50% { box-shadow: 0 0 20px rgba(0, 210, 255, 0.5); } } .vectia-platinum-app .vp-pipeline-step.is-future { color: var(--p-text-faint); opacity: 0.5; } .vectia-platinum-app .vp-pipeline-step-icon { font-size: 16px; margin-bottom: 0.25rem; } .vectia-platinum-app .vp-pipeline-step-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .vectia-platinum-app .vp-pipeline-arrow { color: var(--p-text-faint); font-size: 14px; flex-shrink: 0; } /* ───────────────────────────────────────────────────────────────────── TRACKING PULSE (point qui pulse pour items en transit) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-tracking-pulse { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; } .vectia-platinum-app .vp-tracking-pulse-dot { width: 8px; height: 8px; background: var(--p-cyan); border-radius: 50%; box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7); animation: vpTrackingPulse 1.5s ease-in-out infinite; } @keyframes vpTrackingPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(0, 210, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); } } /* ───────────────────────────────────────────────────────────────────── WAREHOUSE CARDS ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-warehouse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .vectia-platinum-app .vp-warehouse-card { padding: 1.25rem; background: var(--p-surface-glass); backdrop-filter: blur(12px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-lg); transition: var(--p-transition); position: relative; overflow: hidden; animation: vpFadeInUp 0.5s var(--p-ease-out) backwards; } .vectia-platinum-app .vp-warehouse-card:hover { border-color: var(--p-border-glass-strong); transform: translateY(-2px); } .vectia-platinum-app .vp-warehouse-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(168, 85, 247, 0.1)); border: 1px solid var(--p-border-glass-strong); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 0.75rem; box-shadow: 0 0 12px var(--p-cyan-glow); } /* ───────────────────────────────────────────────────────────────────── RECIPE CARDS (Production) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .vectia-platinum-app .vp-recipe-card { padding: 1.25rem; background: var(--p-surface-glass); backdrop-filter: blur(12px); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-lg); transition: var(--p-transition); position: relative; overflow: hidden; animation: vpFadeInUp 0.5s var(--p-ease-out) backwards; } .vectia-platinum-app .vp-recipe-card:hover { border-color: rgba(0, 210, 255, 0.3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 210, 255, 0.1); } .vectia-platinum-app .vp-recipe-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; } .vectia-platinum-app .vp-recipe-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(0, 210, 255, 0.15)); border: 1px solid var(--p-border-glass-strong); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 0 12px var(--p-purple-glow); flex-shrink: 0; } .vectia-platinum-app .vp-recipe-name { font-size: 15px; font-weight: 600; color: var(--p-text-primary); letter-spacing: -0.01em; line-height: 1.2; } .vectia-platinum-app .vp-recipe-code { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; color: var(--p-text-faint); letter-spacing: 0.12em; text-transform: uppercase; } .vectia-platinum-app .vp-recipe-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.75rem 0; margin-top: 0.5rem; border-top: 1px solid var(--p-border-glass); } .vectia-platinum-app .vp-recipe-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--p-text-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; } .vectia-platinum-app .vp-recipe-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--p-text-primary); font-feature-settings: 'tnum'; } /* ───────────────────────────────────────────────────────────────────── ASSET / EQUIPMENT STATUS ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-asset-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: var(--p-radius-md); margin-bottom: 0.5rem; transition: var(--p-transition); } .vectia-platinum-app .vp-asset-row:hover { border-color: var(--p-border-glass-strong); background: var(--p-surface-glass-hover); } .vectia-platinum-app .vp-asset-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .vectia-platinum-app .vp-asset-status-dot.operational { background: var(--p-green); box-shadow: 0 0 8px var(--p-green-glow); } .vectia-platinum-app .vp-asset-status-dot.maintenance { background: var(--p-amber); box-shadow: 0 0 8px var(--p-amber-glow); animation: vpAmberPulse 2s ease-in-out infinite; } .vectia-platinum-app .vp-asset-status-dot.down { background: var(--p-red); box-shadow: 0 0 8px var(--p-red-glow); animation: vpRedPulse 1.5s ease-in-out infinite; } /* ───────────────────────────────────────────────────────────────────── FILTER BAR (filtres rapides) ───────────────────────────────────────────────────────────────────── */ .vectia-platinum-app .vp-filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .vectia-platinum-app .vp-filter-chip { padding: 0.4rem 0.875rem; background: var(--p-surface-glass); border: 1px solid var(--p-border-glass); border-radius: 999px; color: var(--p-text-tertiary); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: var(--p-transition); } .vectia-platinum-app .vp-filter-chip:hover { color: var(--p-text-primary); border-color: var(--p-border-glass-strong); } .vectia-platinum-app .vp-filter-chip.is-active { background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(168, 85, 247, 0.1)); border-color: rgba(0, 210, 255, 0.4); color: var(--p-text-primary); box-shadow: 0 0 8px var(--p-cyan-glow); } .vectia-platinum-app .vp-filter-chip-count { margin-left: 0.375rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--p-text-faint); } .vectia-platinum-app .vp-filter-chip.is-active .vp-filter-chip-count { color: var(--p-cyan); } /* Mode Clair-Pro */ html[data-theme="light"] body.vectia-platinum-app .vp-warehouse-card, html[data-theme="light"] body.vectia-platinum-app .vp-recipe-card, html[data-theme="light"] body.vectia-platinum-app .vp-asset-row { background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 23, 42, 0.08); }