/* ═══════════════════════════════════════════════════════════════════════════ CenturionOS — "Elite Liquid Glass" repaint (V2) Tokens noir absolu + navy profond + cyan lumineux + alert rouge ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ═══ Tokens fixes (ADN de marque) ═══ */ --lg-cyan: #22D3EE; --lg-cyan-soft: #67E8F9; --lg-cyan-glow: rgba(34, 211, 238, .55); --lg-alert: #EF4444; --lg-amber: #F59E0B; --lg-emerald: #10B981; --lg-ease: cubic-bezier(0.23, 1, 0.32, 1); --transition-liquid: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* ═══ DUAL-THEME : valeurs DARK par défaut (Héritage Cyber) ═══ */ --bg-app: #000000; --glass-bg: rgba(15, 23, 42, 0.4); --glass-bg-hover: rgba(15, 23, 42, 0.5); --glass-border: rgba(255, 255, 255, 0.12); --glass-border-top: rgba(255, 255, 255, 0.25); --glass-inset: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --glass-shadow-hover:0 12px 40px rgba(0, 0, 0, 0.5); --text-main: #FFFFFF; --text-dim: #94A3B8; --accent-glow: rgba(34, 211, 238, 0.3); /* Aliases legacy (compatibilité avec règles existantes) */ --lg-black: var(--bg-app); --lg-navy: #020617; --lg-navy-2: #0B1220; --lg-ink: var(--text-main); --lg-muted: var(--text-dim); --lg-hair: var(--glass-border); --lg-hair-hot: rgba(34,211,238,.40); --lg-neon-cyan: 0 0 20px var(--accent-glow); --lg-neon-text: 0 0 8px rgba(34, 211, 238, 0.5); } /* ═══ MODE LIGHT (Pure & Pro) ═══ Déclenché par .dark ABSENTE sur OU data-theme='light' — les deux pour rester compatible avec le toggle actuel (classe Tailwind .dark). */ html:not(.dark), [data-theme='light'] { --bg-app: #F8FAFC; /* gris très clair */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-hover: rgba(255, 255, 255, 0.85); --glass-border: rgba(15, 23, 42, 0.08); --glass-border-top: rgba(255, 255, 255, 0.6); --glass-inset: rgba(255, 255, 255, 0.5); /* Détourage par ombre portée : la plaque de verre flotte sur la page */ --glass-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02); --glass-shadow-hover:0 20px 30px -5px rgba(0, 0, 0, 0.08), 0 10px 12px -3px rgba(0, 0, 0, 0.04); --text-main: #0F172A; --text-dim: #475569; --accent-glow: rgba(34, 211, 238, 0.15); --lg-ink: var(--text-main); --lg-muted: var(--text-dim); --lg-hair: var(--glass-border); } /* ── Base dark surface ─────────────────────────────────────────────────── */ html.dark body, body.pm-next.dark-force { background: radial-gradient(1200px 700px at 10% -10%, rgba(34,211,238,.10), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(239,68,68,.05), transparent 60%), var(--bg-app) !important; color: var(--text-main); } /* ── Base light surface ────────────────────────────────────────────────── */ html:not(.dark) body, html[data-theme='light'] body { background: radial-gradient(1200px 700px at 10% -10%, rgba(8,145,178,.06), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(34,211,238,.04), transparent 60%), var(--bg-app) !important; color: var(--text-main); } /* ── Core class : Elite Cyber-Glass (transparent + détourage laser) ───── */ .liquid-glass, .lg { background: var(--glass-bg) !important; /* SURGICAL FIX: use variable instead of hardcoded dark blue-gray */ -webkit-backdrop-filter: blur(30px) saturate(200%) !important; backdrop-filter: blur(30px) saturate(200%) !important; border: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border-top); /* reflet de lumière sur le haut */ border-radius: 16px; box-shadow: inset 0 1px 0 var(--glass-inset), var(--glass-shadow); transition: var(--pm-transition, var(--transition-liquid)); will-change: transform, box-shadow, border-color, background; } .liquid-glass:hover, .lg:hover { background: var(--glass-bg-hover, var(--glass-bg)) !important; border: 1px solid var(--accent, rgba(34, 211, 238, 0.45)); border-top: 1px solid var(--glass-border-top); /* arête lumineuse cyan */ box-shadow: inset 0 1px 0 var(--glass-inset), 0 0 20px var(--accent-glow, rgba(34, 211, 238, 0.3)), /* glow néon */ var(--glass-shadow-hover, var(--glass-shadow)); /* transform: Motion One prend le relais (spring translateY + scale) */ } /* Variante "solide" — quand on veut moins de transparence (formulaires) */ .lg-solid { background: linear-gradient(180deg, rgba(2,6,23,.85), rgba(11,18,32,.80)); -webkit-backdrop-filter: blur(25px) saturate(160%); backdrop-filter: blur(25px) saturate(160%); border: 1px solid var(--lg-hair); border-radius: 16px; } /* ── Stagger cascade : piloté par Motion One (pmMotion.cascade) ───────── */ /* FAILSAFE : les enfants sont visibles par défaut. Si Motion charge, pmMotion.cascade() les repasse à opacity:0 juste avant d'animer l'entrée. */ .lg-cascade > * { opacity: 1; } /* ── Modale Liquid Glass ──────────────────────────────────────────────── */ /* ── Modale : paint statique, animations pilotées par Motion One ──────── */ .lg-modal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); display: flex; align-items: center; justify-content: center; } .lg-modal { background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(11,18,32,.88)); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); border: 1px solid var(--lg-hair); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(34,211,238,.08); } /* ── Sidebar Tactique ─────────────────────────────────────────────────── */ .lg-sidebar { background: linear-gradient(180deg, rgba(2,6,23,.96), rgba(0,0,0,.92)); border-right: 1px solid var(--lg-hair); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .lg-nav-item { position: relative; display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 10px; color: var(--lg-muted); font-size: .82rem; font-weight: 500; letter-spacing: .01em; transition: var(--pm-transition, var(--transition-liquid)); overflow: hidden; } .lg-nav-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,211,238,.22), rgba(34,211,238,0) 70%); opacity: 0; transition: opacity .35s var(--lg-ease); pointer-events: none; } .lg-nav-item:hover, .lg-nav-item.active { color: #fff; } .lg-nav-item:hover::before, .lg-nav-item.active::before { opacity: 1; } .lg-nav-item.active { box-shadow: inset 2px 0 0 var(--lg-cyan), var(--lg-neon-cyan); } .lg-nav-item svg { width: 18px; height: 18px; stroke-width: 1.75; transition: transform .35s var(--lg-ease), color .25s; } .lg-nav-item:hover svg, .lg-nav-item.active svg { color: var(--lg-cyan); transform: translateX(2px); } /* ── KPI / Accent helpers ────────────────────────────────────────────── */ .lg-text-cyan { color: var(--lg-cyan); text-shadow: var(--lg-neon-text); } .lg-text-alert { color: var(--lg-alert); } .lg-text-amber { color: var(--lg-amber); } .lg-text-emerald{ color: var(--lg-emerald); } .lg-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.35); color: var(--lg-cyan); box-shadow: var(--lg-neon-cyan); text-shadow: var(--lg-neon-text); } .lg-chip.alert { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.3); color: #FCA5A5; } .lg-chip.amber { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.3); color: #FCD34D; } .lg-chip.emerald { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.3); color: #6EE7B7; } .lg-chip.muted { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2); color: var(--lg-muted); } /* ── Bouton tactique ─────────────────────────────────────────────────── */ .lg-btn { position: relative; padding: .55rem 1rem; border-radius: 10px; font-weight: 600; font-size: .82rem; color: #001018; background: linear-gradient(135deg, var(--lg-cyan), #0891B2); border: 0; cursor: pointer; transition: var(--pm-transition, var(--transition-liquid)); box-shadow: 0 8px 26px -8px var(--lg-cyan-glow), var(--lg-neon-cyan); } .lg-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px var(--lg-cyan-glow), 0 0 25px rgba(34, 211, 238, 0.35); } .lg-btn.ghost { background: transparent; color: var(--lg-ink); border: 1px solid var(--lg-hair); box-shadow: none; } .lg-btn.ghost:hover { border-color: var(--lg-hair-hot); color: #fff; } .lg-btn.alert { background: linear-gradient(135deg, #EF4444, #7F1D1D); color: #fff; box-shadow: 0 8px 26px -8px rgba(239,68,68,.55); } /* ── Carte Leaflet : re-aligne pin actif sur #22D3EE ─────────────────── */ .pm-pin.cyan { background: linear-gradient(180deg, #67E8F9, #22D3EE) !important; } @keyframes lg-pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,.55); } 100% { box-shadow: 0 0 0 22px rgba(34,211,238,0); } } .pm-pin.cyan ~ .pm-pin-halo { animation: lg-pin-pulse 2s ease-out infinite; } /* ── Scrollbars discrètes ────────────────────────────────────────────── */ .lg-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .lg-scroll::-webkit-scrollbar-thumb { background: rgba(34,211,238,.25); border-radius: 8px; } .lg-scroll::-webkit-scrollbar-track { background: transparent; } /* ── Bento spacing & typographie Elite ────────────────────────────────── */ .pm-bento { gap: 24px !important; } /* laisser respirer le fond noir */ /* Titres net, descriptions dimmed — dual-theme via variables */ .liquid-glass h1, .liquid-glass h2, .liquid-glass h3, .liquid-glass h4, .liquid-glass .pm-bento-label, .liquid-glass .pm-bento-value { color: var(--text-main) !important; } .liquid-glass p, .liquid-glass .pm-muted, .liquid-glass .text-slate-400, .liquid-glass .text-xs, .liquid-glass .text-sm.text-slate-400 { color: var(--text-dim) !important; } /* ── Reduced motion respect ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lg-cascade > *, .liquid-glass, .lg-modal, .lg-nav-item, .lg-btn { animation: none !important; transition-duration: .15s !important; } }