/*
LHDSR RADAR V7.0 - CYBER-FORENSIC STYLESHEET
Design System: "Mind Control" / "Orbitron" / "Neon Grid"
*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto+Mono:wght@300;400;500;700&family=Rajdhani:wght@300;500;700&display=swap');
:root {
/* --- GRAPHITE CORE (2026 MANUFACTURE) --- */
--bg-void: #121417;
--bg-graphite: #1c1e22;
--bg-panel: rgba(35, 40, 48, 0.92);
--bg-panel-solid: #2d3139;
/* --- SIGNALS --- */
--neon-cyan: #00f3ff;
--neon-cyan-dim: rgba(0, 243, 255, 0.15);
--neon-magenta: #ff00ff;
--neon-gold: #ffc107;
--neon-red: #ff4757;
--neon-green: #2ed573;
/* --- TYPOGRAPHY (Inter-Standard) --- */
--font-display: 'Inter', -apple-system, sans-serif;
--font-tech: 'Inter', sans-serif;
--font-code: 'Roboto Mono', monospace;
/* --- UI DEPTH --- */
--border-precision: 1px solid rgba(255, 255, 255, 0.06);
--shadow-stack: 0 12px 40px rgba(0, 0, 0, 0.5);
/* --- SIZES --- */
--rail-width: 80px;
--header-height: 70px;
--panel-radius: 4px; /* Sharp corners for cyber look */
/* --- Z-INDEX --- */
--z-background: -1;
--z-grid: 0;
--z-content: 10;
--z-overlay: 100;
--z-modal: 1000;
}
/* --- GLOBAL RESET & BASE --- */
* {
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: var(--neon-cyan) var(--bg-void);
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-void);
color: #e0e0e0;
font-family: var(--font-tech);
overflow: hidden; /* App-like feel */
height: 100vh;
width: 100vw;
}
/* --- SCROLLBARS --- */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-void);
}
::-webkit-scrollbar-thumb {
background: var(--neon-cyan-dim);
border: 1px solid var(--neon-cyan);
}
::-webkit-scrollbar-thumb:hover {
background: var(--neon-cyan);
}
/* --- UTILITIES --- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
[hidden] {
display: none !important;
}
.neon-text {
color: var(--neon-cyan);
text-shadow: 0 0 5px var(--neon-cyan-glow);
}
.neon-text-magenta {
color: var(--neon-magenta);
text-shadow: 0 0 5px var(--neon-magenta-glow);
}
.neon-text-red {
color: var(--neon-red);
text-shadow: 0 0 5px var(--neon-red-glow);
}
.glitch-text {
position: relative;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-void);
}
.glitch-text::before {
left: 2px;
text-shadow: -1px 0 var(--neon-red);
clip: rect(24px, 550px, 90px, 0);
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
.glitch-text::after {
left: -2px;
text-shadow: -1px 0 var(--neon-cyan);
clip: rect(85px, 550px, 140px, 0);
animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { clip: rect(14px, 9999px, 121px, 0); }
20% { clip: rect(89px, 9999px, 96px, 0); }
40% { clip: rect(22px, 9999px, 6px, 0); }
60% { clip: rect(67px, 9999px, 13px, 0); }
80% { clip: rect(34px, 9999px, 88px, 0); }
100% { clip: rect(11px, 9999px, 111px, 0); }
}
@keyframes glitch-anim-2 {
0% { clip: rect(65px, 9999px, 100px, 0); }
20% { clip: rect(12px, 9999px, 5px, 0); }
40% { clip: rect(87px, 9999px, 33px, 0); }
60% { clip: rect(5px, 9999px, 66px, 0); }
80% { clip: rect(44px, 9999px, 12px, 0); }
100% { clip: rect(99px, 9999px, 22px, 0); }
}
/* --- LAYOUT STRUCTURE --- */
.cyber-shell {
display: flex; /* FLEXBOX FIX */
flex-direction: row;
height: 100vh;
width: 100vw;
overflow: hidden;
background-image:
linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
position: relative;
transition: filter 1s ease; /* Ensure fade out works */
}
/* --- SIDEBAR (REMOVED) --- */
.cyber-rail {
display: none;
}
/* --- GLOBAL HEADER --- */
.global-header {
height: 90px; /* Comfortable height */
border-bottom: 1px solid var(--neon-cyan-dim);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px; /* Comfortable margin */
background: rgba(5, 5, 5, 0.8);
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.header-left {
display: flex;
align-items: center;
gap: 20px;
}
.logo-container {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.header-logo {
width: 100%;
height: 100%;
object-fit: contain;
}
.header-titles {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-title {
font-family: var(--font-display);
font-size: 28px;
margin: 0;
letter-spacing: 4px;
text-transform: uppercase;
color: #fff;
line-height: 1;
}
.header-subtitle {
font-family: var(--font-tech);
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
margin: 5px 0 0 0;
letter-spacing: 2px;
text-transform: uppercase;
}
.header-right {
display: flex;
align-items: center;
}
/* --- GLOBAL FOOTER --- */
.global-footer {
height: 40px;
border-top: 1px solid var(--neon-cyan-dim);
display: flex;
align-items: center;
justify-content: center;
background: rgba(5, 5, 5, 0.9);
font-family: var(--font-code);
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
letter-spacing: 1px;
flex-shrink: 0;
}
/* --- NEON GHOST WHITE BREATHING --- */
.neon-ghost-white-breathing {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
animation: breathe-white 4s ease-in-out infinite;
}
@keyframes breathe-white {
0% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); opacity: 0.8; }
50% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); opacity: 1; }
100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); opacity: 0.8; }
}
/* --- MAIN CONTENT AREA --- */
.cyber-main {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow: hidden;
position: relative;
z-index: 10;
background: transparent; /* Remove debug bg */
flex: 1;
min-width: 0; /* Flexbox fix */
}
.desktop-decks {
flex: 1;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.desktop-deck {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0; /* Flexbox scrolling fix */
}
/* --- HEADER (REMOVED - See Global Header) --- */
.cyber-header {
display: none;
}
/* --- HEADER BRANDING (REMOVED) --- */
.header-brand {
display: none;
}
.header-metrics {
display: flex;
gap: 20px;
align-items: center;
}
.cyber-search {
position: relative;
width: 300px;
}
.cyber-search input {
width: 100%;
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--neon-cyan-dim);
color: var(--neon-cyan);
padding: 10px 15px;
font-family: var(--font-code);
font-size: 14px;
outline: none;
transition: all 0.3s ease;
}
.cyber-search input:focus {
border-color: var(--neon-cyan);
box-shadow: 0 0 15px var(--neon-cyan-dim);
}
.cyber-search::after {
content: 'SEARCH_DB';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: rgba(0, 243, 255, 0.4);
pointer-events: none;
}
/* --- DASHBOARD GRID --- */
.cyber-grid {
display: grid;
grid-template-columns: 350px 1fr 300px;
grid-template-rows: 1fr;
gap: 20px;
padding: 20px;
height: calc(100vh - var(--header-height));
overflow: hidden;
}
/* --- PANELS --- */
.cyber-panel {
background: var(--bg-panel);
border: 1px solid var(--neon-cyan-dim);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.cyber-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-top: 2px solid var(--neon-cyan);
border-left: 2px solid var(--neon-cyan);
}
.cyber-panel::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-bottom: 2px solid var(--neon-cyan);
border-right: 2px solid var(--neon-cyan);
}
.panel-header {
padding: 15px;
border-bottom: 1px solid var(--neon-cyan-dim);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 243, 255, 0.05);
}
.panel-header h2 {
font-family: var(--font-display);
font-size: 14px;
margin: 0;
color: var(--neon-cyan);
letter-spacing: 1px;
text-transform: uppercase;
}
.panel-controls {
display: flex;
gap: 10px;
}
.panel-btn {
background: transparent;
border: 1px solid var(--neon-cyan-dim);
color: var(--neon-cyan);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.panel-btn:hover {
background: var(--neon-cyan);
color: #000;
}
.panel-content {
flex: 1;
overflow-y: auto;
padding: 15px;
position: relative;
}
/* --- RADAR FEED (LEFT COLUMN) --- */
.feed-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.feed-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px;
display: flex;
gap: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.feed-item:hover {
border-color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.05);
}
.feed-item.active {
border-color: var(--neon-magenta);
background: rgba(255, 0, 255, 0.05);
box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.1);
}
.feed-thumb {
width: 80px;
height: 45px;
background: #000;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.feed-info {
flex: 1;
overflow: hidden;
}
.feed-title {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
font-weight: bold;
}
.feed-meta {
font-family: var(--font-code);
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: space-between;
}
/* --- COMMAND CENTER (MIDDLE COLUMN) --- */
#command-center {
display: flex;
flex-direction: column;
gap: 20px;
}
.video-stage {
width: 100%;
aspect-ratio: 16/9;
background: #000;
border: 1px solid var(--neon-cyan-dim);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.video-placeholder {
color: rgba(255, 255, 255, 0.2);
font-family: var(--font-display);
letter-spacing: 2px;
text-transform: uppercase;
}
.analysis-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.metric-card {
background: rgba(0, 243, 255, 0.05);
border: 1px solid var(--neon-cyan-dim);
padding: 15px;
text-align: center;
}
.metric-value {
font-family: var(--font-display);
font-size: 24px;
color: var(--neon-cyan);
margin-bottom: 5px;
}
.metric-label {
font-family: var(--font-code);
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
}
.terminal-output {
flex: 1;
background: #000;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
font-family: var(--font-code);
font-size: 12px;
color: #0f0;
overflow-y: auto;
white-space: pre-wrap;
}
/* --- ACTIVE JOB (RIGHT COLUMN) --- */
.job-status-indicator {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #555;
}
.status-dot.active {
background: var(--neon-gold);
box-shadow: 0 0 10px var(--neon-gold);
animation: pulse 1s infinite;
}
.status-text {
font-family: var(--font-display);
font-size: 12px;
color: var(--neon-gold);
}
.action-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.cyber-btn {
background: transparent;
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
padding: 8px 12px; /* Réduction padding vertical */
font-family: var(--font-display);
font-size: 11px; /* Réduction légère pour la lisibilité */
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
white-space: nowrap; /* Empêche le retour à la ligne */
text-overflow: ellipsis; /* Ajoute "..." si trop long */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#analysis-run-btn {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
#analysis-run-btn * {
margin: 0 auto;
text-align: center;
}
.cyber-btn:hover {
background: var(--neon-cyan);
color: #000;
box-shadow: 0 0 15px var(--neon-cyan-glow);
}
.cyber-btn.danger {
border-color: var(--neon-red);
color: var(--neon-red);
}
.cyber-btn.danger:hover {
background: var(--neon-red);
color: #000;
box-shadow: 0 0 15px var(--neon-red-glow);
}
.cyber-btn.primary {
background: var(--neon-cyan-dim);
border: 1px solid var(--neon-cyan);
}
.cyber-btn-glitch-gold {
background: rgba(255, 215, 0, 0.05);
border: 1px solid #FFD700;
color: #FFD700;
padding: 12px;
font-family: var(--font-display);
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
width: 100%;
letter-spacing: 0.1em;
font-weight: 700;
margin-top: 8px;
}
.cyber-btn-glitch-gold:hover {
background: #FFD700;
color: #000;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
text-shadow: none;
}
.full-width {
width: 100%;
}
/* --- NEON UTILITIES (JS HOOKS) --- */
.neon-ghost-green {
color: var(--neon-green) !important;
border-color: var(--neon-green) !important;
box-shadow: 0 0 10px var(--neon-green-dim);
}
.neon-ghost-red {
color: var(--neon-red) !important;
border-color: var(--neon-red) !important;
box-shadow: 0 0 10px var(--neon-red-dim);
}
.neon-ghost-breathing-red {
color: var(--neon-red) !important;
border-color: var(--neon-red) !important;
animation: breathe-red 2s infinite;
}
@keyframes breathe-red {
0% { box-shadow: 0 0 5px var(--neon-red-dim); opacity: 0.8; }
50% { box-shadow: 0 0 15px var(--neon-red-glow); opacity: 1; }
100% { box-shadow: 0 0 5px var(--neon-red-dim); opacity: 0.8; }
}
.neon-ghost-breathing-green {
color: var(--neon-green) !important;
border-color: var(--neon-green) !important;
animation: breathe-green 2s infinite;
}
@keyframes breathe-green {
0% { box-shadow: 0 0 5px var(--neon-green-dim); opacity: 0.8; }
50% { box-shadow: 0 0 15px rgba(0, 255, 157, 0.6); opacity: 1; }
100% { box-shadow: 0 0 5px var(--neon-green-dim); opacity: 0.8; }
}
.cc-badge {
display: inline-block;
padding: 1px 4px;
border: 1px solid currentColor;
border-radius: 2px;
font-size: 9px;
font-weight: bold;
margin-right: 5px;
vertical-align: middle;
text-shadow: 0 0 5px currentColor;
}
/* --- EFFECTS --- */
.scan-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 243, 255, 0.3);
opacity: 0;
visibility: hidden;
animation: scan 5s linear infinite;
pointer-events: none;
z-index: var(--z-overlay);
display: block;
transition: opacity 1s ease-out, visibility 1s ease-out;
}
/* Show scan line only in splash/overlay modes */
.splash-mode .scan-line,
.lhdsr-overlay-open .scan-line {
opacity: 0.7;
visibility: visible;
z-index: 90; /* Behind the modal (1000) but above content */
}
@keyframes scan {
0% { top: 0%; }
100% { top: 100%; }
}
.noise-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
z-index: var(--z-overlay);
opacity: 0.4;
}
/* --- COMPATIBILITY SHIMS FOR JS --- */
/* These styles ensure that elements required by JS but hidden in UI don't break layout */
#hidden-controls {
display: none;
}
/* Specific ID styling to match new layout */
#deck-youtube {
background: radial-gradient(circle at top left, #0d1117 0%, #05070a 100%) !important;
border: 1px solid rgba(0, 243, 255, 0.03) !important;
box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
overflow: hidden;
}
#deck-youtube .panel-header {
background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
border-bottom: 1px solid rgba(255, 215, 0, 0.1);
color: var(--neon-gold) !important;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
font-family: 'Orbitron', sans-serif;
letter-spacing: 2px;
}
.radar-player-zone {
background: rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
padding: 15px;
}
#analysis-console {
/* Main console area */
display: flex;
flex-direction: column;
/* height: 100%; REMOVED */
}
/* Modal Styling for "Analysis Lab" if it pops up */
.analysis-lab-shell {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
height: 90vh;
background: rgba(5, 10, 15, 0.98);
border: 1px solid var(--neon-cyan);
z-index: var(--z-modal);
box-shadow: 0 0 50px rgba(0, 243, 255, 0.2);
display: flex;
flex-direction: column;
}
.analysis-lab-header {
padding: 20px;
border-bottom: 1px solid var(--neon-cyan-dim);
display: flex;
justify-content: space-between;
}
.analysis-lab-scroll {
flex: 1;
overflow-y: auto;
padding: 20px;
}
/* --- UTILITY STATES --- */
.hidden, .is-hidden {
display: none !important;
}
.is-selected {
border-color: var(--neon-cyan) !important;
background: rgba(0, 243, 255, 0.1) !important;
}
.is-armed {
color: var(--neon-green) !important;
border-color: var(--neon-green) !important;
}
.is-error {
color: var(--neon-red) !important;
border-color: var(--neon-red) !important;
}
.is-highlighted {
border-color: var(--neon-cyan) !important;
box-shadow: 0 0 20px var(--neon-cyan-dim) !important;
}
.lhdsr-overlay-open {
overflow: hidden !important;
}
/* --- ANIMATIONS --- */
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.flash {
animation: flash 1s infinite;
}
/* --- ARMING DECK ROW (TEMPLATE) --- */
.arming-row {
display: flex;
gap: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.arming-row:hover {
border-color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.05);
}
.arming-row.is-selected {
border-color: var(--neon-magenta);
background: rgba(255, 0, 255, 0.05);
}
.row-thumb {
width: 80px;
height: 45px;
position: relative;
flex-shrink: 0;
}
.row-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.row-platform {
position: absolute;
bottom: 2px;
right: 2px;
font-size: 8px;
background: #000;
color: #fff;
padding: 1px 3px;
}
.row-info {
flex: 1;
overflow: hidden;
}
.row-title {
font-size: 12px;
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.row-desc {
font-size: 10px;
margin: 0;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-actions {
display: flex;
gap: 5px;
align-items: center;
}
.cyber-btn-small {
background: transparent;
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
font-size: 10px;
padding: 4px 8px;
cursor: pointer;
}
.cyber-btn-small:hover {
background: var(--neon-cyan);
color: #000;
}
.cyber-btn-small.danger {
border-color: var(--neon-red);
color: var(--neon-red);
}
.cyber-btn-small.danger:hover {
background: var(--neon-red);
color: #000;
}
.cyber-btn-small.icon-only {
padding: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.cyber-btn-small.icon-only img {
width: 14px;
height: 14px;
object-fit: contain;
}
/* --- COMMAND CENTER FORM ELEMENTS --- */
.console-grid-layout {
display: flex; /* FLEXBOX FIX */
flex-direction: row;
gap: 20px;
flex: 1; /* Take remaining height after header */
min-height: 0; /* Allow shrinking */
overflow: hidden;
padding: 20px;
}
.console-panel {
display: flex;
flex-direction: column;
flex: 0 0 320px;
min-width: 320px;
height: calc(100vh - 130px); /* Contrainte verticale stricte */
background: rgba(8, 10, 12, 0.7);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 15px 0 40px rgba(0,0,0,0.5);
overflow: hidden;
}
/* TARGET PREVIEW (RICH METADATA) */
.target-preview-card {
width: 100%;
background: #080a0c;
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
position: relative;
display: flex;
flex-direction: column;
}
.target-image-container {
width: 100%;
aspect-ratio: 16/9;
background: #000;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.target-meta-block {
padding: 12px 15px;
background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.2) 100%);
display: flex;
flex-direction: column;
gap: 4px;
min-height: 60px; /* Espace réservé pour le texte */
}
#target-title-display {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
color: #e0e0e0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2; /* Max 2 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
}
#target-meta-details {
font-family: var(--font-code);
font-size: 9px;
color: #666;
margin-top: 2px;
display: flex;
justify-content: space-between;
text-transform: uppercase;
}
/* PROTOCOL BUTTONS (STYLE "WIRE-FRAME" ÉLÉGANT) */
.protocol-plate {
position: relative;
height: 40px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255,255,255,0.1); /* Bordure très fine par défaut */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
overflow: hidden;
}
/* Effet Scanline discret au survol */
.protocol-plate::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
transform: translateX(-100%); transition: 0.5s;
}
.protocol-plate:hover::after { transform: translateX(100%); }
/* ORVEL (BLEU GLACÉ) */
.protocol-plate.forensic:hover, .protocol-plate.forensic.active {
border-color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.05); /* Fond très léger */
box-shadow: inset 0 0 15px rgba(0, 243, 255, 0.1); /* Lueur interne douce */
color: #fff;
}
.protocol-plate.forensic.active .plate-label {
text-shadow: 0 0 8px var(--neon-cyan);
letter-spacing: 2px; /* Micro-expansion */
}
/* VISION (ROUGE LASER) */
.protocol-plate.vision:hover, input#analysis-vision-mode:checked + .protocol-plate.vision {
border-color: var(--neon-red);
background: rgba(255, 42, 42, 0.05);
box-shadow: inset 0 0 15px rgba(255, 42, 42, 0.1);
color: #fff;
}
input#analysis-vision-mode:checked + .protocol-plate.vision .plate-label {
text-shadow: 0 0 8px var(--neon-red);
letter-spacing: 2px;
}
.plate-label {
font-family: 'Rajdhani', sans-serif; /* Police plus technique */
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s;
opacity: 0.7;
}
.protocol-plate:hover .plate-label { opacity: 1; }
/* COST READOUT (DIGITAL CLEAN) */
.cost-readout-box {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 15px;
}
.cost-label {
font-family: var(--font-code);
font-size: 9px;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}
.cost-value-big {
font-family: 'Orbitron', sans-serif;
font-size: 18px; /* Gros chiffres */
font-weight: 700;
color: #fff;
line-height: 1;
}
.cost-currency { font-size: 10px; color: #444; margin-left: 2px; }
/* INPUT FOCUS WATERMARK FIX */
.console-v2-input:focus::placeholder { color: transparent; }
.target-image-container {
width: 100%;
aspect-ratio: 16/9;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.target-card-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #333; font-size: 9px; font-family: var(--font-code); text-align: center; height: 100%;
}
.target-card-active img {
width: 100%; height: 100%; object-fit: cover; opacity: 0.8;
}
.target-meta-bar {
padding: 8px 10px;
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.05);
}
#target-title-display {
font-family: 'Inter', sans-serif; /* Sans Serif discret */
font-size: 9px; color: #aaa; font-weight: 400; letter-spacing: 0.5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
/* MODE BUTTONS (GRID LAYOUT - NO OVERFLOW) */
.console-mode-group {
display: grid;
grid-template-columns: 1fr 1fr; /* 50/50 Strict */
width: 100%;
margin-bottom: 20px;
}
.console-mode-btn {
height: 30px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(255,255,255,0.05); /* Ligne fine séparation image */
color: #555;
font-family: var(--font-code);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.console-mode-btn:first-child { border-right: none; } /* Soudure milieu */
.console-mode-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.console-mode-btn.is-active {
background: var(--neon-cyan);
color: #000;
border-color: var(--neon-cyan);
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
z-index: 2; /* Passe au dessus de la bordure voisine */
}
/* PROTOCOL BUTTONS (DIGITAL PLATE DESIGN) */
.protocol-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 15px;
}
.protocol-plate {
position: relative;
height: 40px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
}
/* FORENSIC STYLE */
.protocol-plate.forensic {
border-color: rgba(0, 243, 255, 0.3);
color: rgba(0, 243, 255, 0.6);
}
.protocol-plate.forensic:hover, .protocol-plate.forensic.active {
background: rgba(0, 243, 255, 0.1);
border-color: var(--neon-cyan);
color: #fff;
box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1);
text-shadow: 0 0 5px var(--neon-cyan);
}
/* VISION STYLE */
.protocol-plate.vision {
border-color: rgba(255, 42, 42, 0.3);
color: rgba(255, 42, 42, 0.6);
}
.protocol-plate.vision:hover, input#analysis-vision-mode:checked + .protocol-plate.vision {
background: rgba(255, 42, 42, 0.1);
border-color: var(--neon-red);
color: #fff;
box-shadow: inset 0 0 10px rgba(255, 42, 42, 0.1);
text-shadow: 0 0 5px var(--neon-red);
}
.plate-label {
font-family: 'Orbitron', sans-serif;
font-size: 9px; letter-spacing: 1px; font-weight: 700;
text-transform: uppercase;
z-index: 2;
}
/* INPUT GHOST PLACEHOLDER */
.console-v2-input:focus::placeholder {
color: transparent;
opacity: 0;
transition: opacity 0.2s ease;
}
/* LUX FUEL GHOST (MODERNE) */
#lux-fuel-gauge {
margin-bottom: 20px;
}
.lux-ghost-track {
height: 2px;
background: rgba(255, 255, 255, 0.05);
position: relative;
overflow: visible;
}
#lux-bar-cost {
position: absolute;
top: 0; right: 0;
height: 100%;
background: var(--neon-cyan);
box-shadow: 0 0 12px var(--neon-cyan);
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* STYLES CONSOLE V2 (MATCHING LIBRARY) */
.console-v2-input {
background: rgba(0, 0, 0, 0.3) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #e0e0e0 !important;
font-family: var(--font-code);
font-size: 11px;
padding: 10px;
transition: all 0.2s;
width: 100%;
}
.console-v2-input:focus {
border-color: var(--neon-cyan) !important;
background: rgba(0, 243, 255, 0.05) !important;
}
/* PROTOCOL GROUP (FORENSIC + VISION) */
.protocol-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px; /* Espacement plus large */
margin: 20px 0;
width: 100%;
}
/* VISION TOGGLE (RED PROTOCOL) - CSS PURE */
.vision-toggle-label {
flex: 1;
height: 40px;
background: rgba(255, 42, 42, 0.05);
border: 1px solid rgba(255, 42, 42, 0.3);
color: rgba(255, 42, 42, 0.7);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Orbitron', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.vision-toggle-label:hover {
background: rgba(255, 42, 42, 0.15);
box-shadow: 0 0 10px rgba(255, 42, 42, 0.2);
color: var(--neon-red);
}
/* État Coché (Géré via le checkbox input frère) */
input#analysis-vision-mode:checked + .vision-toggle-label {
background: rgba(255, 42, 42, 0.8);
border-color: var(--neon-red);
color: #fff;
box-shadow: 0 0 20px rgba(255, 42, 42, 0.4);
text-shadow: 0 0 5px #fff;
}
input#analysis-vision-mode:checked + .vision-toggle-label::before {
content: '';
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px);
}
/* MODE BUTTONS (A/B) - SEGMENTED CONTROL LOOK */
.console-mode-btn {
flex: 1;
padding: 10px 0;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(0,0,0,0.2);
color: #666;
font-family: 'Orbitron', sans-serif; /* Changement police pour match headers */
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
}
/* Fusion visuelle des boutons */
.console-mode-btn:first-child {
border-right: none; /* Supprime la bordure doublée au milieu */
border-radius: 4px 0 0 4px;
}
.console-mode-btn:last-child {
border-left: 1px solid rgba(255,255,255,0.1); /* Rétablit une séparation fine */
border-radius: 0 4px 4px 0;
}
.console-mode-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.console-mode-btn.is-active {
border-color: var(--neon-cyan);
color: #000; /* Texte noir sur fond cyan pour contraste max */
background: var(--neon-cyan);
box-shadow: 0 0 15px var(--neon-cyan-dim);
position: relative;
z-index: 2; /* Passe au dessus de l'autre bouton pour la bordure */
}
/* REFINED INPUTS (INCRUSTATION) */
.console-v2-input {
background: rgba(0, 0, 0, 0.4) !important; /* Fond plus sombre */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-left: 2px solid rgba(255, 255, 255, 0.1) !important; /* Accent gauche subtil */
color: #fff !important;
font-family: var(--font-code);
font-size: 11px;
padding: 12px 10px;
transition: all 0.2s;
width: 100%;
border-radius: 0 4px 4px 0; /* Coin carré à gauche, rond à droite */
}
.console-v2-input:focus {
border-color: var(--neon-cyan) !important;
border-left-color: var(--neon-cyan) !important;
background: rgba(0, 243, 255, 0.05) !important;
box-shadow: inset 0 0 20px rgba(0,0,0,0.8); /* Profondeur interne */
}
.radar-panel {
flex: 1; /* Remaining space for radar */
min-width: 0; /* Prevent overflow */
display: flex;
flex-direction: column;
}
.panel-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.cyber-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 1px;
text-transform: uppercase;
}
.cyber-input, .cyber-select {
background: #000 !important; /* Fond noir pur pour trancher */
border: 1px solid var(--neon-cyan-dim) !important;
color: #fff !important;
padding: 8px 10px;
font-family: var(--font-code);
font-size: 11px;
outline: none;
transition: all 0.3s ease;
width: 100%;
text-transform: uppercase;
cursor: pointer;
}
/* Style spécifique pour les options du menu (Chrome/Edge) */
.cyber-select option {
background: #050505;
color: #fff;
}
.cyber-input:focus, .cyber-select:focus {
border-color: var(--neon-cyan) !important;
box-shadow: 0 0 15px var(--neon-cyan-dim) !important;
}
.mode-chips-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.mode-chip {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.6);
padding: 8px 5px; /* Ajout d'une marge interne latérale */
font-size: 10px;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
white-space: nowrap; /* Verrouille sur une ligne */
overflow: hidden; /* Coupe ce qui dépasse */
text-overflow: ellipsis; /* Ajoute "..." si le texte est trop long */
display: flex;
align-items: center;
justify-content: center;
}
.mode-chip:hover {
border-color: var(--neon-cyan);
color: var(--neon-cyan);
}
.mode-chip.is-active {
background: var(--neon-cyan-dim);
border-color: var(--neon-cyan);
color: var(--neon-cyan);
box-shadow: 0 0 10px var(--neon-cyan-dim);
}
.controls-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.process-type-group {
display: flex;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.process-btn {
flex: 1;
background: transparent;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
padding: 8px 0;
font-size: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.process-btn:last-child {
border-right: none;
}
.process-btn:hover {
color: #fff;
}
.process-btn.is-active {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.toggles-row {
display: flex;
justify-content: space-between;
gap: 10px;
}
.cyber-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
}
.cyber-toggle input {
display: none;
}
.cyber-toggle .slider {
width: 30px;
height: 16px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
position: relative;
transition: all 0.3s ease;
}
.cyber-toggle .slider::before {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
transition: all 0.3s ease;
}
.cyber-toggle input:checked + .slider {
background: var(--neon-cyan-dim);
}
.cyber-toggle input:checked + .slider::before {
transform: translateX(14px);
background: var(--neon-cyan);
box-shadow: 0 0 5px var(--neon-cyan);
}
.advanced-panel {
background: rgba(0, 0, 0, 0.2);
border: 1px dashed rgba(255, 255, 255, 0.1);
padding: 10px;
display: none; /* Toggled by JS */
}
.advanced-panel.is-visible {
display: block;
}
.advanced-toggle-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 10px;
cursor: pointer;
text-decoration: underline;
align-self: flex-start;
}
.action-area {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.dry-run-box {
display: flex;
justify-content: center;
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
}
/* --- SOVEREIGN MANDATE : FILIGREE STYLE --- */
#analysis-context {
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid rgba(0, 243, 255, 0.1) !important;
color: var(--neon-cyan) !important;
font-family: var(--font-tech);
font-size: 12px;
letter-spacing: 0.5px;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#analysis-context::placeholder {
color: rgba(0, 243, 255, 0.2);
font-style: italic;
font-family: 'MedievalSharp', cursive, serif; /* Si disponible, sinon fallback serif */
text-shadow: 0 0 2px rgba(0, 243, 255, 0.1);
transition: opacity 0.3s ease;
}
@keyframes quartz-flicker {
0% { background-color: rgba(0, 243, 255, 0.0); box-shadow: inset 0 0 0 rgba(0,243,255,0); }
10% { background-color: rgba(0, 243, 255, 0.15); box-shadow: inset 0 0 20px rgba(0,243,255,0.4); }
20% { background-color: rgba(0, 243, 255, 0.02); box-shadow: inset 0 0 5px rgba(0,243,255,0.1); }
40% { background-color: rgba(0, 243, 255, 0.2); box-shadow: inset 0 0 25px rgba(0,243,255,0.5); }
50% { background-color: rgba(0, 243, 255, 0.05); box-shadow: inset 0 0 10px rgba(0,243,255,0.2); }
100% { background-color: rgba(0, 243, 255, 0.08); box-shadow: inset 0 0 15px rgba(0,243,255,0.3); }
}
#analysis-context:focus {
outline: none !important;
border-color: var(--neon-cyan) !important;
color: #fff !important;
animation: quartz-flicker 0.4s ease-out forwards;
}
#analysis-context:focus::placeholder {
opacity: 0;
}
/* --- MEDIEVAL NEON MODAL --- */
.medieval-neon-modal {
position: relative;
width: 800px;
max-width: 90vw;
max-height: 85vh;
background: rgba(5, 7, 10, 0.95);
border: 1px solid var(--neon-gold);
box-shadow: 0 0 40px rgba(255, 215, 0, 0.15), inset 0 0 20px rgba(0, 0, 0, 1);
padding: 60px;
color: #e0e0e0;
overflow-y: auto;
clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
transform: scale(0.9);
opacity: 0;
transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 200010;
}
.medieval-neon-modal.visible {
transform: scale(1);
opacity: 1;
}
.mission-title {
font-family: var(--font-display);
color: var(--neon-gold);
font-size: 28px;
letter-spacing: 8px;
text-align: center;
margin-bottom: 40px;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.main-story {
font-family: 'Inter', sans-serif;
line-height: 1.8;
font-size: 14px;
text-align: justify;
color: #8da2b5;
margin-bottom: 30px;
border-left: 1px solid var(--neon-gold);
padding-left: 25px;
}
/* --- LUX FUEL GAUGE READOUT (V9 PREMIUM) --- */
#lux-fuel-gauge {
background: rgba(0, 5, 10, 0.6);
border: 1px solid rgba(0, 243, 255, 0.05); /* Cyan très sombre */
border-radius: 2px;
padding: 15px;
margin-bottom: 20px;
position: relative;
}
/* Accent d'énergie Or (Signature Économique) */
#lux-fuel-gauge::before {
content: '';
position: absolute;
left: 0; top: 10%; height: 80%;
width: 2px;
background: var(--neon-gold);
box-shadow: 0 0 15px var(--neon-gold);
}
.cost-readout-box {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.cost-label {
font-size: 9px;
color: #444; /* Gris neutre pour ne pas polluer l'oeil */
font-family: 'Orbitron', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}
.cost-value-big {
font-family: 'Roboto Mono', monospace;
font-size: 28px;
font-weight: 700;
color: var(--neon-gold) !important; /* Or LHDSR par défaut */
text-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
margin-bottom: -5px;
}
.cost-value-big.insufficient {
color: var(--neon-red) !important;
text-shadow: 0 0 20px rgba(255, 42, 42, 0.6) !important;
}
#lux-remain-value {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
color: #fff;
opacity: 0.9;
}
/* NEUTRALISATION DU CADRE ROUGE EN BAS */
.action-area, .dry-run-box {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* LHDSR PERPETUAL LUX GAUGE V10 */
#lux-fuel-gauge {
display: block !important; /* Force la visibilité perpétuelle */
background: rgba(0, 5, 10, 0.4);
border: 1px solid rgba(255, 215, 0, 0.05);
border-radius: 2px;
padding: 15px;
margin-bottom: 20px;
position: relative;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#lux-fuel-gauge.is-active {
background: rgba(20, 15, 0, 0.8);
border-color: rgba(255, 215, 0, 0.4);
box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.8);
}
/* Accent d'énergie Or (Veille vs Actif) */
#lux-fuel-gauge::before {
content: '';
position: absolute;
left: -1px; top: 10%; height: 80%;
width: 3px;
background: #88741d; /* Mode Veille (froid) */
box-shadow: 0 0 5px rgba(136, 116, 29, 0.5);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#lux-fuel-gauge.is-active::before {
background: var(--neon-gold);
box-shadow: 0 0 15px var(--neon-gold), 0 0 30px var(--neon-gold);
}
.cost-readout-box {
display: flex;
justify-content: space-between;
align-items: flex-end;
font-family: 'Orbitron', sans-serif;
}
.cost-label {
font-size: 8px;
color: rgba(255, 215, 0, 0.3); /* Mode Veille */
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 2px;
display: block;
transition: all 0.5s ease;
}
#lux-fuel-gauge.is-active .cost-label {
color: var(--neon-gold);
text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.cost-value-big {
font-family: 'Roboto Mono', monospace;
font-size: 24px;
font-weight: 700;
color: #b39b36 !important; /* Mode Veille */
text-shadow: none;
letter-spacing: -1px;
line-height: 1;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#lux-fuel-gauge.is-active .cost-value-big {
color: var(--neon-gold) !important;
text-shadow: 0 0 15px var(--neon-gold), 0 0 30px rgba(255, 215, 0, 0.5) !important;
}
.cost-currency {
font-size: 10px;
margin-left: 2px;
color: inherit;
opacity: 0.5;
}
#lux-remain-value {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
color: #666; /* Mode Veille */
transition: all 0.5s ease;
}
#lux-fuel-gauge.is-active #lux-remain-value {
color: #e0e0e0;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
/* État d'alerte réelle (Solde insuffisant) */
.cost-value-big.insufficient {
color: var(--neon-red) !important;
text-shadow: 0 0 20px rgba(255, 66, 66, 0.8) !important;
}
/* --- RADAR PANEL --- */
.radar-panel {
display: flex;
flex-direction: column;
}
.header-actions {
display: flex;
gap: 5px;
}
/* --- NAVIGATION SYSTEM V11 (PROFESSIONAL VECTOR) --- */
.icon-btn {
position: relative;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.5); /* Background normal */
border: 1px solid rgba(0, 243, 255, 0.2);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
}
/* Le "Masque" de l'icône */
.icon-btn .nav-icon {
width: 20px;
height: 20px;
background-color: var(--neon-cyan); /* Icône Cyan Flat par défaut */
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
transition: all 0.2s ease;
}
/* État HOVER et ACTIVE-DECK */
.icon-btn:hover,
.icon-btn.active-deck {
background-color: var(--neon-cyan) !important; /* Background Cyan */
border: 1px solid #ffffff !important; /* Contour Blanc */
box-shadow: 0 0 15px #ffffff !important; /* Glow Blanc derrière */
transform: translateY(-2px);
}
/* Changement de couleur de l'icône au survol/actif */
.icon-btn:hover .nav-icon,
.icon-btn.active-deck .nav-icon {
background-color: #000000 !important; /* Icône devient NOIRE */
}
/* --- DÉFINITION DES MASQUES (Chemins SVG standards Lucide) --- */
.icon-overseer { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-radar { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-library { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-cases { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-writer { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-codex { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-broadcast { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-settings {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* --- SPECIAL OVERRIDE : CLOSE BUTTON (NEON RED GHOST) --- */
#cf-close-btn, #case-close-btn, #config-close-btn, .case-actions .icon-btn, .olympe-close-wrapper {
background: rgba(255, 42, 42, 0.1) !important;
border: 1px solid var(--neon-red) !important;
color: var(--neon-red) !important;
text-shadow: 0 0 5px var(--neon-red);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
opacity: 1;
}
#cf-close-btn:hover, #case-close-btn:hover {
background: var(--neon-red) !important;
color: #fff !important;
box-shadow: 0 0 15px var(--neon-red);
}
/* --- VARIANTES DE COULEURS SPÉCIFIQUES --- */
/* CODEX (Vert) */
#nav-btn-codex { color: var(--neon-green); border-color: var(--neon-green-dim); }
#nav-btn-codex.active-deck { background: var(--neon-green); box-shadow: 0 0 15px var(--neon-green); border-color: #fff; }
/* BROADCAST (Magenta) */
#nav-btn-broadcast { color: var(--neon-magenta); border-color: var(--neon-magenta-dim); }
#nav-btn-broadcast.active-deck { background: var(--neon-magenta); box-shadow: 0 0 15px var(--neon-magenta); border-color: #fff; }
/* RADAR / LIBRARY / CASES (Cyan par défaut) */
#nav-btn-library.active-deck, #nav-btn-radar.active-deck, #nav-btn-cases.active-deck {
background: var(--neon-cyan);
}
.radar-player-zone {
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0; /* Prevent shrinking */
}
.player-stage {
width: 100%;
/* aspect-ratio: 16/9; REMOVED to allow max-height constraint */
height: 0;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio fallback */
background: #000;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
margin-bottom: 10px;
max-height: 40vh; /* Limit height on large screens */
}
/* Modern CSS aspect-ratio support with max-height cap */
@supports (aspect-ratio: 16/9) {
.player-stage {
height: auto;
padding-bottom: 0;
aspect-ratio: 16/9;
max-height: 35vh; /* Cap the player height to 35% of viewport */
width: auto; /* Allow width to shrink to maintain aspect ratio */
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.player-stage iframe {
position: absolute; /* Ensure it fills the container */
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display: block;
z-index: 1;
}
/* GHOST CATCHER DESKTOP : Empêche l'iframe de voler le focus et le raccourci 'F' */
#global-player-overlay {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: auto; /* Capte les clics */
cursor: pointer;
}
#global-player-overlay.is-hidden {
background: transparent !important;
display: block !important;
pointer-events: auto; /* Garde le focus clavier */
}
#global-player-overlay.is-hidden .scanner-line,
#global-player-overlay.is-hidden p {
display: none !important; /* Masque la ligne rouge et le texte en lecture */
}
.player-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
.cyber-overlay {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4); /* Lighter background as requested */
z-index: 9999;
/* Blur is handled by .cyber-shell when .lhdsr-overlay-open is active */
}
/* --- SONIC TOOLTIP (VIDEO GUIDE) --- */
#sonic-reactor-tooltip {
position: absolute;
/* Positionnement relatif au bouton */
bottom: 100%; /* Juste au-dessus */
left: 50%;
transform: translateX(-50%) translateY(10px); /* Centré + Léger décalage bas pour anim */
width: 180px; /* Taille compacte */
margin-bottom: 10px; /* Espace visuel */
/* Pont invisible pour la souris */
padding-bottom: 20px;
margin-bottom: -10px; /* Compense le padding pour la position visuelle */
clip-path: none; /* Désactivé pour laisser le padding interactif */
background: #000;
border: 1px solid var(--neon-cyan);
box-shadow: 0 0 30px rgba(0, 243, 255, 0.2); /* Rétroéclairage diffus */
border-radius: 6px;
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none; /* Laisse passer le clic sauf sur input */
overflow: hidden;
}
#sonic-reactor-tooltip.visible {
opacity: 1;
visibility: visible;
/* Animation de montée légère */
transform: translateX(-50%) translateY(0);
}
#sonic-reactor-tooltip video {
width: 100%;
display: block;
mix-blend-mode: screen; /* Fusion parfaite avec le noir */
}
.sonic-tooltip-footer {
padding: 8px;
background: rgba(0, 243, 255, 0.1);
border-top: 1px solid var(--neon-cyan-dim);
display: flex;
align-items: center;
gap: 8px;
pointer-events: auto; /* Réactive le clic pour la checkbox */
}
.st-checkbox {
appearance: none;
width: 10px; height: 10px;
border: 1px solid var(--neon-cyan);
background: #000;
cursor: pointer;
}
.st-checkbox:checked { background: var(--neon-cyan); }
.st-label {
font-family: var(--font-code);
font-size: 8px;
color: var(--neon-cyan);
text-transform: uppercase;
letter-spacing: 1px;
}
/* --- SUBTITLES OVERLAY --- */
:root {
--srt-scale: 1.0;
}
.subtitles-overlay {
position: absolute;
bottom: 80px; /* Surélévation de base pour éviter les contrôles YouTube natifs */
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 1000;
width: max-content;
max-width: 85%;
text-align: center;
transition: bottom 0.3s ease;
}
.subtitles-overlay span, .srt-text {
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 8px 16px;
border-radius: 4px;
font-family: var(--font-display), sans-serif;
font-size: calc(18px * var(--srt-scale, 1.0));
font-weight: 700;
text-align: center;
white-space: pre-wrap;
text-shadow: 0 2px 4px rgba(0,0,0,1);
border: 1px solid rgba(255,255,255,0.1);
display: inline-block;
transition: font-size 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- SPLASH SCREEN EFFECTS --- */
/* Blur the main content when overlay is open */
body.lhdsr-overlay-open .cyber-shell {
filter: grayscale(100%) blur(5px);
transition: filter 1s ease;
}
/* CCTV Scan Line Effect */
body::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 243, 255, 0.3);
opacity: 0;
visibility: hidden;
animation: scan 8s linear infinite;
pointer-events: none;
z-index: var(--z-overlay);
display: block;
transition: opacity 1s ease-out, visibility 1s ease-out;
}
body.lhdsr-overlay-open::after {
opacity: 0.1;
visibility: visible;
}
@keyframes cctv-scan {
0% { top: -10%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 110%; opacity: 0; }
}
/* --- MODAL SYSTEM --- */
.cyber-modal {
background: rgba(10, 15, 20, 0.95);
border: 1px solid var(--neon-cyan);
box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
width: 90%;
max-width: 600px;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
animation: modalSlideIn 0.3s ease-out;
position: relative;
}
.modal-header {
background: rgba(0, 240, 255, 0.1);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--neon-cyan-dim);
}
.modal-header h3 {
margin: 0;
color: var(--neon-cyan);
font-family: 'Orbitron', sans-serif;
font-size: 18px;
letter-spacing: 1px;
text-shadow: 0 0 5px var(--neon-cyan-dim);
}
.modal-body {
padding: 20px;
max-height: 70vh;
overflow-y: auto;
color: #fff;
}
.modal-subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
margin-bottom: 15px;
font-family: 'Roboto Mono', monospace;
}
.modal-footer {
padding: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: flex-end;
gap: 10px;
background: rgba(0, 0, 0, 0.3);
}
@keyframes modalSlideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.scanner-line {
width: 100%;
height: 7px;
background: var(--neon-red);
box-shadow: 0 0 10px var(--neon-red);
animation: scan 4s linear infinite;
margin-bottom: 10px;
z-index: 15; /* Behind content if global, or low stack in modal */
opacity: 1;
visibility: visible;
transition: opacity 1s ease-out, visibility 1s ease-out;
}
.splash-mode .scanner-line,
.lhdsr-overlay-open .scanner-line {
opacity: 0.9;
visibility: visible;
}
.player-controls {
display: flex;
justify-content: center;
gap: 20px;
align-items: center;
margin-top: 10px;
}
.player-controls {
display: flex;
justify-content: center;
gap: 8px; /* Gap plus serré pour le style console */
align-items: center;
margin-top: 10px;
margin-bottom: 15px; /* Marge pour décoller les filtres */
}
.player-controls button {
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 243, 255, 0.3);
color: var(--neon-cyan);
height: 32px;
min-width: 40px;
border-radius: 2px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
font-family: 'Orbitron', sans-serif;
font-size: 11px;
backdrop-filter: blur(4px);
}
/* Specific overrides for Mute and CC buttons to remove circle and mask */
#global-player-mute-btn,
#global-player-cc-btn {
border-radius: 0 !important;
border: none !important;
background: transparent !important;
width: auto !important;
min-width: 36px !important;
backdrop-filter: none !important;
overflow: visible !important;
box-shadow: none !important;
/* Couleur par défaut (IDLE) - Cyan Tamisé (Visible) */
color: rgba(0, 243, 255, 0.5);
transition: color 0.3s ease, filter 0.3s ease;
}
/* --- BOUTONS ICONES NEURALES (SVG COLOR MATRIX) --- */
/* Filtres de conversion couleur (Black to Neon) */
/* Rouge Néon : invert+sepia+saturate+hue-rotate */
@keyframes slow-pulse-red-fill {
0% { opacity: 0.7; transform: scale(1); filter: invert(19%) sepia(90%) saturate(7456%) hue-rotate(357deg) brightness(102%) contrast(117%) drop-shadow(0 0 2px var(--neon-red)); }
50% { opacity: 1; transform: scale(1.05); filter: invert(19%) sepia(90%) saturate(7456%) hue-rotate(357deg) brightness(102%) contrast(117%) drop-shadow(0 0 8px var(--neon-red)); }
100% { opacity: 0.7; transform: scale(1); filter: invert(19%) sepia(90%) saturate(7456%) hue-rotate(357deg) brightness(102%) contrast(117%) drop-shadow(0 0 2px var(--neon-red)); }
}
/* Cyan Néon */
@keyframes slow-pulse-cyan-fill {
0% { opacity: 0.7; transform: scale(1); filter: invert(81%) sepia(59%) saturate(4976%) hue-rotate(151deg) brightness(102%) contrast(102%) drop-shadow(0 0 2px var(--neon-cyan)); }
50% { opacity: 1; transform: scale(1.05); filter: invert(81%) sepia(59%) saturate(4976%) hue-rotate(151deg) brightness(102%) contrast(102%) drop-shadow(0 0 8px var(--neon-cyan)); }
100% { opacity: 0.7; transform: scale(1); filter: invert(81%) sepia(59%) saturate(4976%) hue-rotate(151deg) brightness(102%) contrast(102%) drop-shadow(0 0 2px var(--neon-cyan)); }
}
/* 1. CC BUTTON (CYAN) */
#global-player-cc-btn img {
/* Application du filtre statique par défaut (Cyan) */
filter: invert(81%) sepia(59%) saturate(4976%) hue-rotate(151deg) brightness(102%) contrast(102%) drop-shadow(0 0 2px var(--neon-cyan));
animation: slow-pulse-cyan-fill 4s infinite ease-in-out;
transition: all 0.3s ease;
}
#global-player-cc-btn:hover img {
animation: none;
/* Cyan éclatant au survol */
filter: invert(81%) sepia(59%) saturate(4976%) hue-rotate(151deg) brightness(120%) contrast(102%) drop-shadow(0 0 10px var(--neon-cyan));
opacity: 1; transform: scale(1.1);
}
/* 2. MUTE BUTTON (RED) */
#global-player-mute-btn img {
/* Application du filtre statique par défaut (Rouge) */
filter: invert(19%) sepia(90%) saturate(7456%) hue-rotate(357deg) brightness(102%) contrast(117%) drop-shadow(0 0 2px var(--neon-red));
animation: slow-pulse-red-fill 5s infinite ease-in-out reverse;
transition: all 0.3s ease;
}
#global-player-mute-btn:hover img {
animation: none;
/* Rouge éclatant au survol */
filter: invert(19%) sepia(90%) saturate(7456%) hue-rotate(357deg) brightness(120%) contrast(117%) drop-shadow(0 0 10px var(--neon-red));
opacity: 1; transform: scale(1.1);
}
#global-player-mute-btn:hover {
color: var(--neon-red);
filter: drop-shadow(0 0 5px var(--neon-red));
}
/* Remove box shadow on hover for these specific buttons */
#global-player-mute-btn:hover,
#global-player-cc-btn:hover {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Apply glow directly to the SVG/Image content on hover */
#global-player-mute-btn:hover svg,
#global-player-mute-btn:hover img,
#global-player-cc-btn:hover img {
filter: drop-shadow(0 0 8px var(--neon-cyan));
transform: scale(1.1);
transition: all 0.2s ease;
}
#global-player-cc-btn:disabled {
opacity: 0.5;
filter: grayscale(100%);
/* Lighter gray than desktop (assuming desktop is very dark/black) */
color: #888;
cursor: not-allowed;
}
/* Ensure disabled CC button icon is also grayed out */
#global-player-cc-btn:disabled img {
filter: grayscale(100%) brightness(1.5); /* Make it lighter gray */
opacity: 0.5;
}
.player-controls button img {
width: 20px !important;
height: 20px !important;
object-fit: contain;
pointer-events: none;
display: block; /* Ensure no line-height issues */
}
#global-player-cc-btn img {
width: 20px !important;
height: 20px !important;
}
.player-controls button:hover {
border-color: var(--neon-cyan);
color: #fff;
background: var(--neon-cyan);
box-shadow: 0 0 15px var(--neon-cyan);
transform: scale(1.1);
}
.player-controls button:active {
transform: scale(0.95);
}
#global-player-play {
min-width: 60px;
height: 36px;
font-size: 16px;
border-color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.1);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}
/* Cyber Progress Bar */
.player-progress-container {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px 0;
width: 100%;
box-sizing: border-box;
}
.player-progress-track {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.1);
position: relative;
cursor: pointer;
border-radius: 2px;
overflow: visible !important; /* FORCE OMEGA */
z-index: 10; /* Élévation pour supporter la courbe */
}
/* --- MOTEUR TENSION VISUELLE --- */
.tension-visual-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px; /* Amplitude maximisée pour effet Oscilloscope */
pointer-events: none;
z-index: 0; /* Derrière le handle (qui sera z-2) */
transform: translateY(-25px); /* Remonte pour être au-dessus de la ligne */
opacity: 0.95;
mix-blend-mode: screen; /* Fusion lumineuse avec le fond */
}
/* --- QUANTUM TIMELINE MARKERS --- */
.timeline-marker {
position: absolute;
top: -6px; /* Lévitation au-dessus de la ligne */
width: 4px;
height: 8px;
border-radius: 4px;
z-index: 5;
cursor: pointer;
opacity: 0.8;
transition: all 0.2s ease;
/* L'effet "Energy Blob" */
filter: drop-shadow(0 0 2px currentColor);
box-shadow: 0 0 4px currentColor;
background-color: currentColor; /* Prend la couleur définie par la classe */
}
.timeline-marker:hover {
transform: scale(1.5) translateY(-2px);
z-index: 10;
opacity: 1;
filter: drop-shadow(0 0 5px currentColor);
}
/* Couleurs des variables (Matching HUD) */
.marker-propaganda { color: #ff00ff; } /* Magenta */
.marker-coherence { color: #00ff9d; } /* Green */
.marker-credibility{ color: #00f3ff; } /* Cyan */
.marker-aggression { color: #ff2a2a; } /* Red */
.marker-anxiety { color: #ff8800; } /* Orange */
.marker-gravity { color: #ffd700; } /* Gold */
.marker-generic { color: #ffffff; } /* White */
/* --- DARK TRIAD SPECTRUM (MACHIAVEL V2) --- */
.marker-dark_narcissism {
color: #a020f0; /* Violet Royal (Ego) */
filter: drop-shadow(0 0 5px #a020f0);
}
.marker-dark_machiavellian {
color: #39ff14; /* Vert Fluo (Manipulation) */
filter: drop-shadow(0 0 5px #39ff14);
}
.marker-dark_psychopathy {
color: #ff0000; /* Rouge Pur (Insensibilité) */
filter: drop-shadow(0 0 8px #ff0000);
animation: marker-strobe 0.2s infinite; /* Pulsation critique */
}
/* Petit connecteur vers la ligne (Optionnel, pour l'ancrage) */
.timeline-marker::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 4px;
background: rgba(255,255,255,0.3);
pointer-events: none;
}
.player-progress-track:hover {
background: rgba(255, 255, 255, 0.2);
}
.player-progress-fill {
height: 100%;
background: var(--neon-cyan);
width: 0%;
position: relative;
box-shadow: 0 0 5px var(--neon-cyan);
border-radius: 2px;
pointer-events: none;
}
.player-progress-handle {
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 0%;
box-shadow: 0 0 8px #fff;
pointer-events: none;
transition: left 0.1s linear;
z-index: 2;
}
.player-time-display {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
color: var(--neon-cyan);
min-width: 70px;
text-align: right;
text-shadow: 0 0 2px var(--neon-cyan-dim);
}
.player-time-display .time-sep {
color: rgba(255, 255, 255, 0.3);
}
/* Fix Context Button Hover */
.row-context-btn {
position: relative;
background: transparent;
transition: all 0.2s ease;
overflow: hidden; /* Prevent pseudo-element overflow */
}
/* The Icon (Context) - Using Background Image + Filter for robustness */
.row-context-btn::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512.000000pt' height='512.000000pt' viewBox='0 0 512.000000 512.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)' fill='%2300F0FF' stroke='none'%3E%3Cpath d='M4626 5110 c-63 -16 -153 -70 -197 -117 -22 -24 -55 -74 -72 -111 -29 -61 -32 -76 -32 -163 0 -90 2 -99 37 -171 45 -91 103 -147 196 -191 61 -29 76 -32 162 -32 86 0 101 3 162 32 93 44 151 100 196 191 35 72 37 81 37 172 0 91 -2 100 -37 172 -68 136 -188 217 -336 224 -42 2 -94 -1 -116 -6z'/%3E%3Cpath d='M3937 4152 l-187 -188 107 -107 107 -107 191 190 190 190 -25 17 c-41 28 -153 136 -168 165 -9 16 -19 28 -22 28 -3 0 -90 -85 -193 -188z'/%3E%3Cpath d='M2692 4259 c-175 -24 -360 -86 -507 -170 -129 -74 -219 -145 -326 -257 -241 -252 -370 -557 -386 -912 -14 -307 84 -626 268 -876 l37 -51 -119 -119 -119 -119 27 -20 c49 -34 130 -115 159 -156 l28 -40 120 119 121 120 45 -34 c119 -90 289 -174 442 -218 329 -95 709 -62 1008 89 76 39 250 151 250 162 0 4 -135 143 -301 309 l-301 301 -59 -24 c-83 -34 -162 -46 -249 -40 -221 17 -409 164 -482 375 -32 95 -32 249 0 344 73 211 261 358 482 375 87 6 166 -6 249 -40 l59 -24 302 302 c167 167 300 307 297 312 -11 18 -170 120 -242 156 -96 48 -228 93 -343 117 -114 24 -349 34 -460 19z'/%3E%3Cpath d='M3654 3438 l-301 -303 25 -60 c53 -128 53 -280 0 -412 l-25 -61 301 -301 c166 -166 305 -301 309 -301 16 0 147 214 186 303 166 380 159 802 -19 1172 -48 99 -147 256 -165 262 -6 2 -145 -133 -311 -299z'/%3E%3Cpath d='M2781 3103 c-88 -31 -161 -136 -161 -233 0 -132 118 -250 250 -250 60 0 130 30 175 75 188 188 -12 497 -264 408z'/%3E%3Cpath d='M3852 1881 l-103 -105 191 -191 c174 -174 192 -188 202 -170 13 25 144 156 178 178 l25 17 -190 190 c-104 105 -192 189 -195 188 -3 0 -51 -49 -108 -107z'/%3E%3Cpath d='M1109 1536 c-25 -6 -65 -24 -90 -38 -24 -15 -250 -233 -501 -485 -524 -525 -513 -511 -513 -663 0 -76 4 -93 33 -152 38 -77 92 -130 171 -167 47 -22 70 -26 141 -26 152 0 137 -12 668 518 508 507 515 516 528 643 25 236 -207 432 -437 370z'/%3E%3Cpath d='M4626 1410 c-63 -16 -153 -70 -197 -117 -22 -24 -55 -74 -72 -111 -29 -61 -32 -76 -32 -163 0 -90 2 -99 37 -171 45 -91 103 -147 196 -191 61 -29 76 -32 162 -32 86 0 101 3 162 32 93 44 151 100 196 191 35 72 37 81 37 172 0 91 -2 100 -37 172 -68 136 -188 217 -336 224 -42 2 -94 -1 -116 -6z'/%3E%3C/g%3E%3C/svg%3E");
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
transition: filter 0.2s ease;
}
.row-context-btn:hover {
background-color: var(--neon-cyan);
box-shadow: 0 0 12px var(--neon-cyan);
transform: scale(1.1);
}
.row-context-btn:hover::after {
filter: brightness(0);
}
/* Fix Case Button Hover */
.row-case-btn {
position: relative;
transition: all 0.2s ease;
}
.row-case-btn img {
transition: filter 0.2s ease;
filter: drop-shadow(0 0 4px var(--neon-green));
}
.row-case-btn:hover {
/* Fond transparent ou très sombre pour faire ressortir le néon jaune */
background-color: rgba(255, 215, 0, 0.1) !important;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
border-color: var(--neon-gold);
}
.row-case-btn:hover img {
filter: drop-shadow(0 0 8px var(--neon-gold));
}
.radar-list {
flex: 1;
overflow-y: auto;
padding: 10px;
min-height: 150px; /* Ensure at least some list is visible */
background: rgba(0, 0, 0, 0.2); /* Subtle background to distinguish area */
}
.empty-msg {
text-align: center;
color: rgba(255, 255, 255, 0.3);
font-size: 12px;
margin-top: 20px;
font-style: italic;
}
/* --- HOLOGRAM CASE SELECTION --- */
.hologram-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
padding: 10px;
max-height: 400px;
overflow-y: auto;
}
.hologram-case-btn {
background: rgba(0, 20, 40, 0.6);
border: 1px solid var(--neon-cyan-dim);
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
min-height: 120px;
text-align: center;
}
.hologram-case-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--neon-cyan);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.hologram-case-btn:hover {
background: rgba(0, 243, 255, 0.1);
border-color: var(--neon-cyan);
box-shadow: 0 0 15px var(--neon-cyan-dim);
transform: translateY(-2px);
}
.hologram-case-btn:hover::before {
transform: scaleX(1);
}
.hologram-case-btn.is-selected {
background: rgba(0, 255, 157, 0.1) !important;
border-color: var(--neon-green) !important;
box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
}
.hologram-case-btn.is-selected .case-icon {
text-shadow: 0 0 10px var(--neon-green);
transform: scale(1.1);
}
.cyber-btn-filled-gold {
background: var(--neon-gold);
border: 1px solid var(--neon-gold);
color: #000;
padding: 10px 20px;
font-family: var(--font-code);
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
margin-left: 10px;
}
.cyber-btn-filled-gold:hover {
background: #fff;
box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
transform: scale(1.05);
}
.case-icon {
font-size: 24px;
margin-bottom: 5px;
filter: drop-shadow(0 0 5px var(--neon-cyan-dim));
}
.case-name {
font-family: var(--font-display);
font-size: 12px;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
}
.case-id {
font-family: var(--font-code);
font-size: 9px;
color: var(--neon-cyan);
opacity: 0.7;
margin-top: auto;
}
.hologram-actions {
display: flex;
justify-content: center;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 10px;
}
.cyber-btn-outline {
background: transparent;
border: 1px dashed var(--neon-cyan);
color: var(--neon-cyan);
padding: 10px 20px;
font-family: var(--font-code);
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
}
.cyber-btn-outline:hover {
background: var(--neon-cyan-dim);
border-style: solid;
box-shadow: 0 0 10px var(--neon-cyan-dim);
color: #fff;
}
.cyber-btn-filled-gold {
background: var(--neon-gold);
border: 1px solid var(--neon-gold);
color: #000;
padding: 10px 20px;
font-family: var(--font-code);
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.cyber-btn-filled-gold:hover {
background: #fff;
box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
transform: scale(1.05);
}
/* Meta Mode Hologram Cards */
.hologram-case-btn.meta-mode {
border-color: #FFD700;
background: rgba(40, 30, 0, 0.6);
}
.hologram-case-btn.meta-mode .case-id {
color: #FFD700;
}
.hologram-case-btn.meta-mode:hover {
background: rgba(255, 215, 0, 0.1);
border-color: #FFD700;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.hologram-case-btn.meta-mode::before {
background: #FFD700;
}
.case-stats {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
font-size: 9px;
color: #aaa;
width: 100%;
}
.stat-badge {
background: rgba(0,0,0,0.5);
padding: 2px 4px;
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: block;
}
.case-status-bar {
height: 2px;
width: 100%;
margin-top: 8px;
background: #333;
}
.case-status-bar.active { background: #00ff00; box-shadow: 0 0 5px #00ff00; }
.case-status-bar.archived { background: #666; }
/* --- CYBER TOOLTIP --- */
/* Tooltip Global (UI standard) */
.cyber-tooltip {
position: fixed;
background: rgba(0, 10, 20, 0.95);
border: 1px solid var(--neon-cyan);
padding: 8px 12px;
color: var(--neon-cyan);
font-family: 'Roboto Mono', monospace;
font-size: 11px;
pointer-events: none;
z-index: 10000;
box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
white-space: nowrap;
transform: translate(10px, 10px);
opacity: 0;
transition: opacity 0.2s ease;
}
/* Tooltip HQ (Didactique/Memo) - DOMINATION Z-INDEX */
.cyber-tooltip.hq-memo {
white-space: pre-wrap;
max-width: 320px;
line-height: 1.5;
text-align: left;
padding: 10px 15px;
z-index: 250000 !important; /* Domine le HQ (z-index 200000) */
}
.cyber-tooltip.is-active {
opacity: 1;
}
.tooltip-cursor {
display: inline-block;
width: 6px;
height: 12px;
background: var(--neon-cyan);
margin-left: 4px;
animation: blink 1s step-end infinite;
vertical-align: middle;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* --- HOLOGRAPHIC PHYSICS (CSS VARIABLES ANIMATION) --- */
@property --x { syntax: ''; inherits: false; initial-value: 50%; }
@property --y { syntax: ''; inherits: false; initial-value: 50%; }
@property --r { syntax: ''; inherits: false; initial-value: 0px; }
/* --- TUTORIAL BEACON (APPEL VISUEL) --- */
@keyframes beacon-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8); border-color: var(--neon-gold); transform: scale(1); background: rgba(255,215,0,0.1); }
50% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); border-color: #fff; transform: scale(1.15); background: rgba(255,215,0,0.3); }
100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); border-color: var(--neon-gold); transform: scale(1); background: rgba(255,215,0,0.1); }
}
.tutorial-beacon {
animation: beacon-pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1) !important;
z-index: 1000;
position: relative;
}
/* --- MUTE OVERLAY BTN --- */
.mute-overlay-btn {
position: absolute;
top: 30px; right: 30px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 200010; /* Au-dessus de tout */
transition: all 0.2s;
font-size: 14px;
}
.mute-overlay-btn:hover {
background: #fff; color: #000; border-color: #fff;
}
/* --- DREAM MASK (NEURAL PHASE V3 - HYBRID ENGINE) --- */
#holo-distortion-layer {
position: fixed;
inset: 0;
z-index: 200000;
/* 1. LAYER OBSCURITÉ (Fallback solide si le masque de flou échoue) */
/* Crée un trou transparent au centre, sombre autour. */
background: radial-gradient(circle at var(--x, 50vw) var(--y, 50vh), transparent var(--r, 0px), rgba(2, 4, 8, 0.9) calc(var(--r, 0px) + 100px));
/* 2. LAYER RÊVE (Le Flou) */
backdrop-filter: blur(4px) grayscale(60%);
-webkit-backdrop-filter: blur(4px) grayscale(60%);
/* Le masque : Trou transparent (visible) au centre, Opaque (flou/sombre) autour */
/* Gradient lissé sur 40px pour éviter la découpe "ciseaux" */
mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent var(--r, 0px), black calc(var(--r, 0px) + 40px));
-webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent var(--r, 0px), black calc(var(--r, 0px) + 40px));
/* GESTION DU REGARD (POV MOVEMENT) */
/* On anime les coordonnées --x, --y avec une courbe fluide (Oeil humain) */
transition:
opacity 0.6s ease,
background-color 0.6s ease,
--x 1.2s cubic-bezier(0.22, 1, 0.36, 1),
--y 1.2s cubic-bezier(0.22, 1, 0.36, 1),
--r 1.2s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: all; /* Bloque tout sauf la cible z-indexée */
opacity: 0;
visibility: hidden;
}
#holo-distortion-layer.active {
opacity: 1;
visibility: visible;
}
/* SORTIE CINÉMATIQUE (2s de fondu) */
#holo-distortion-layer.fading-out {
opacity: 0 !important;
transition: opacity 2s ease-in-out !important; /* Surcharge le mouvement rapide pour une sortie lente */
pointer-events: none;
}
/* Cible mise en valeur (Z-Index Boost) */
.holo-target-focus {
position: relative;
z-index: 200005 !important; /* Au-dessus du masque */
box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.5), 0 0 50px rgba(0, 243, 255, 0.2) !important;
transition: all 0.5s ease;
border-radius: 4px; /* Adoucit les coins */
}
/* Cible mise en valeur */
.holo-target-focus {
position: relative;
z-index: 200005 !important;
box-shadow: 0 0 30px rgba(0, 243, 255, 0.2) !important;
transition: all 0.5s ease;
}
/* --- FLOW EFFECT --- */
.flow-effect {
position: relative;
overflow: hidden;
background-color: var(--shop-text-main) !important;
color: var(--shop-surface) !important;
border-color: var(--shop-text-main) !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}
/* Ensure effect is visible even if button is disabled */
.flow-effect:disabled {
opacity: 1 !important;
filter: none !important;
}
.flow-effect::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: flow-anim 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1000; /* Ensure it's on top */
display: block !important; /* Force display */
}
@keyframes flow-anim {
0% { left: -100%; }
100% { left: 100%; }
}
/* --- TACTICAL HUD ANIMATION --- */
#tactical-hud {
position: fixed;
top: 50%;
left: 50%;
/* On garde les positions, on ajoute juste la transition */
opacity: 0;
pointer-events: none;
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s ease-in;
transform: translate(-50%, -50%) scale(0.95);
z-index: 10000;
}
#tactical-hud.active {
opacity: 1;
pointer-events: all;
transform: translate(-50%, -50%) scale(1);
}
#tactical-hud.hidden {
display: none !important;
}
/* --- FORENSIC BADGE NOTIFIER --- */
#forensic-new-badge {
position: absolute; /* Relatif au bouton Library */
background: var(--neon-magenta);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-family: 'Orbitron', sans-serif;
font-size: 9px;
font-weight: bold;
box-shadow: 0 0 15px var(--neon-magenta);
z-index: 2000;
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
#forensic-new-badge svg {
width: 10px; height: 10px;
animation: spin-slow 4s linear infinite;
}
#forensic-new-badge.visible {
opacity: 1;
transform: translateY(0);
}
#forensic-new-badge.fading {
opacity: 0;
transform: translateY(-10px);
}
@keyframes spin-slow { 100% { transform: rotate(360deg); } }
/* --- SVG ICON FIX (NEON GHOST UPDATE) --- */
.row-case-btn svg {
width: 14px;
height: 14px;
stroke: var(--neon-green);
fill: none;
transition: all 0.3s ease;
filter: drop-shadow(0 0 4px var(--neon-green));
}
.row-case-btn:hover svg {
stroke: var(--neon-gold) !important;
filter: drop-shadow(0 0 8px var(--neon-gold));
transform: scale(1.15);
}
.row-case-btn img {
transition: filter 0.2s ease;
filter: drop-shadow(0 0 4px var(--neon-green));
}
.row-case-btn:hover img {
filter: drop-shadow(0 0 8px var(--neon-gold));
}
/* --- PLAYER CONTROLS ENHANCED --- */
/* Boutons Mute & CC spécifiques */
.btn-state-neon-ghost {
color: var(--neon-green) !important;
border-color: var(--neon-green) !important;
filter: drop-shadow(0 0 8px var(--neon-green));
box-shadow: 0 0 15px rgba(0, 255, 157, 0.2) inset;
pointer-events: auto !important; /* Force le clic pour le menu */
cursor: default !important;
animation: ghost-float 3s ease-in-out infinite;
}
@keyframes ghost-float {
0% { transform: translateY(0px); opacity: 0.9; }
50% { transform: translateY(-2px); opacity: 1; }
100% { transform: translateY(0px); opacity: 0.9; }
}
/* Boutons Mute & CC spécifiques */
.control-icon-svg {
width: 24px;
height: 24px;
pointer-events: none; /* Le clic passe au bouton */
transition: all 0.3s ease;
}
/* État par défaut (Son activé / CC dispo) : Rouge Breathing */
.btn-state-active {
filter: drop-shadow(0 0 5px #ff003c);
animation: neon-breathe-red 2s infinite ease-in-out;
border-color: #ff003c !important;
color: #ff003c !important;
}
/* État Muted / CC Activé : Vert Statique */
.btn-state-engaged {
filter: drop-shadow(0 0 8px #00ff9d);
animation: none;
border-color: #00ff9d !important;
color: #00ff9d !important;
}
/* État Indisponible (Pas de SRT) : Gris/Rouge foncé statique */
.btn-state-disabled {
filter: grayscale(100%) opacity(0.5);
cursor: not-allowed !important;
border-color: #444 !important;
animation: none;
}
/* Animation Breathing Rouge */
@keyframes neon-breathe-red {
0% { box-shadow: 0 0 5px #ff003c inset, 0 0 10px #ff003c; }
50% { box-shadow: 0 0 15px #ff003c inset, 0 0 20px #ff003c; }
100% { box-shadow: 0 0 5px #ff003c inset, 0 0 10px #ff003c; }
}
/* Retirer le cercle par défaut si demandé, mais garder le style bouton */
.player-controls .control-btn.no-circle {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* --- PLAYLIST CLUSTER SYSTEM (DATA HIVE) --- */
.playlist-cluster {
margin-bottom: 15px;
position: relative;
border-left: 2px solid rgba(255, 215, 0, 0.3); /* Ligne de vie du cluster */
transition: all 0.3s ease;
}
.playlist-cluster:hover {
border-left-color: var(--neon-gold);
}
/* HEADER DU CLUSTER (La boîte principale) */
.playlist-header-row {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, rgba(0,0,0,0.8) 100%);
border: 1px solid var(--neon-gold);
border-left: none; /* Collé à la ligne de vie */
position: relative;
cursor: pointer;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.05);
transition: all 0.2s ease;
}
.playlist-header-row:hover {
background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(0,0,0,0.9) 100%);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
transform: translateX(2px);
}
.playlist-header-row::before {
/* Petit connecteur cyber en haut à gauche */
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: var(--neon-gold);
opacity: 0.5;
}
/* CONTENU DU CLUSTER (Les enfants) */
.playlist-body {
display: none; /* Caché par défaut */
padding-left: 15px;
padding-top: 5px;
background: linear-gradient(180deg, rgba(255, 215, 0, 0.02) 0%, transparent 100%);
position: relative;
}
.playlist-body.is-expanded {
display: block;
animation: cluster-unfold 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes cluster-unfold {
0% { opacity: 0; transform: translateY(-10px) scaleY(0.9); }
100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
/* Connecteurs visuels pour les enfants */
.playlist-connector {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 15px;
border-bottom: 1px dashed rgba(255, 215, 0, 0.3);
pointer-events: none;
}
/* STYLE SPÉCIFIQUE DES ITEMS ENFANTS */
.playlist-body .arming-row {
border-color: rgba(255, 215, 0, 0.2);
margin-bottom: 4px;
background: rgba(0, 0, 0, 0.6);
transform-origin: left;
margin-left: 10px; /* Décalage pour l'arbre */
}
.playlist-body .arming-row:hover {
border-color: var(--neon-gold);
background: rgba(255, 215, 0, 0.05);
}
.playlist-body .arming-row::before {
/* Ligne de connexion individuelle */
content: '';
position: absolute;
left: -12px; top: 50%;
width: 10px; height: 1px;
background: var(--neon-gold);
opacity: 0.3;
}
/* COMPOSANTS INTERNES HEADER */
.cluster-icon {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--neon-gold);
color: var(--neon-gold);
font-size: 14px;
background: rgba(0,0,0,0.5);
box-shadow: 0 0 5px var(--neon-gold);
}
.cluster-info { flex: 1; overflow: hidden; }
.cluster-title {
font-family: var(--font-display);
font-size: 12px; color: var(--neon-gold);
text-transform: uppercase; letter-spacing: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cluster-meta {
font-family: var(--font-code);
font-size: 9px; color: rgba(255, 255, 255, 0.5);
display: flex; gap: 10px;
}
.cluster-actions { display: flex; gap: 5px; }
/* BOUTON DEEP SCAN (Style unique) */
.btn-deep-scan {
font-family: var(--font-code);
font-size: 9px;
background: rgba(0,0,0,0.8);
border: 1px dashed var(--neon-cyan);
color: var(--neon-cyan);
padding: 4px 8px;
cursor: pointer;
display: flex; align-items: center; gap: 5px;
transition: all 0.3s;
}
.btn-deep-scan:hover {
background: var(--neon-cyan-dim);
border-style: solid;
box-shadow: 0 0 10px var(--neon-cyan-dim);
}
.btn-deep-scan.scanning {
animation: scan-pulse 1s infinite;
border-color: var(--neon-magenta);
color: var(--neon-magenta);
pointer-events: none;
}
@keyframes scan-pulse {
0% { opacity: 1; box-shadow: 0 0 5px var(--neon-magenta); }
50% { opacity: 0.5; box-shadow: 0 0 20px var(--neon-magenta); }
100% { opacity: 1; box-shadow: 0 0 5px var(--neon-magenta); }
}
/* GROUP ANALYSIS OVERLAY */
.batch-monitor {
width: 80vw;
max-width: 800px;
background: #050505;
border: 2px solid var(--neon-gold);
box-shadow: 0 0 50px rgba(255, 215, 0, 0.15);
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.batch-monitor::before {
content: 'SEQUENCEUR TACTIQUE';
position: absolute;
top: -10px;
left: 20px;
background: #050505;
padding: 0 10px;
color: var(--neon-gold);
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 2px;
}
.batch-progress-track {
width: 100%;
height: 6px;
background: #111;
border: 1px solid #333;
margin-top: 10px;
position: relative;
}
.batch-progress-bar {
height: 100%;
background: var(--neon-gold);
width: 0%;
transition: width 0.5s ease;
box-shadow: 0 0 10px var(--neon-gold);
}
.batch-current-item {
border: 1px solid var(--neon-cyan);
padding: 20px;
background: rgba(0, 243, 255, 0.05);
display: flex;
align-items: center;
gap: 20px;
}
.batch-queue-list {
max-height: 200px;
overflow-y: auto;
border: 1px solid #333;
padding: 10px;
background: rgba(0,0,0,0.5);
}
.batch-queue-item {
padding: 8px;
border-bottom: 1px solid #222;
font-size: 11px;
color: #666;
display: flex;
justify-content: space-between;
}
.batch-queue-item.active { color: var(--neon-cyan); background: rgba(0, 243, 255, 0.1); }
.batch-queue-item.done { color: var(--neon-green); text-decoration: line-through; opacity: 0.5; }
.batch-queue-item.pending { color: #888; }
/* --- AJOUT : BOUTON SUPPRESSION GHOST RED --- */
.row-remove-ghost-btn {
width: 24px;
height: 24px;
background: rgba(255, 42, 42, 0.15); /* Fond rouge très léger */
border: 1px solid var(--neon-red);
color: #000000; /* Croix noire */
font-weight: 900;
font-family: sans-serif;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px; /* Collé à droite du bouton Armer */
box-shadow: 0 0 5px var(--neon-red-dim);
animation: ghost-pulse-red 3s infinite ease-in-out; /* Pulsation lente */
transition: all 0.2s ease;
}
.row-remove-ghost-btn:hover {
background: var(--neon-red);
color: #000;
box-shadow: 0 0 15px var(--neon-red);
animation: none; /* Arrêt de la pulsation au survol pour focus */
transform: scale(1.1);
}
@keyframes ghost-pulse-red {
0% { box-shadow: 0 0 2px var(--neon-red-dim); opacity: 0.6; }
50% { box-shadow: 0 0 8px rgba(255, 42, 42, 0.6); opacity: 1; }
100% { box-shadow: 0 0 2px var(--neon-red-dim); opacity: 0.6; }
}
/* --- LHDSR WRITER MODULE STYLES --- */
.writer-layout {
display: flex;
height: 100%;
gap: 20px;
padding: 20px;
overflow: hidden;
}
.writer-sources {
flex: 2;
display: flex;
flex-direction: column;
}
.writer-controls {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
}
.writer-tabs {
display: flex;
gap: 10px;
}
.writer-tab {
background: transparent;
border: 1px solid var(--neon-cyan-dim);
color: rgba(255,255,255,0.6);
padding: 4px 12px;
font-family: var(--font-display);
font-size: 10px;
cursor: pointer;
transition: all 0.2s;
}
.writer-tab.active, .writer-tab:hover {
background: var(--neon-cyan-dim);
color: var(--neon-cyan);
border-color: var(--neon-cyan);
box-shadow: 0 0 10px var(--neon-cyan-dim);
}
.writer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
padding: 10px;
overflow-y: auto;
height: 100%;
}
.writer-card {
background: rgba(0, 10, 20, 0.4);
border: 1px solid var(--neon-cyan-dim);
padding: 8px;
cursor: pointer;
transition: all 0.2s;
position: relative;
display: flex;
flex-direction: column;
}
.writer-card:hover {
border-color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.05);
}
.writer-card.selected {
border-color: var(--neon-magenta);
background: rgba(255, 0, 255, 0.1);
box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
}
.w-thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
margin-bottom: 6px;
background: #000;
}
.w-title {
font-size: 10px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
margin-bottom: 2px;
}
.w-meta {
font-size: 9px;
color: rgba(255,255,255,0.5);
}
.emotion-slider-group {
margin-bottom: 15px;
}
.slider-label {
display: flex;
justify-content: space-between;
font-size: 9px;
color: var(--neon-cyan);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.cyber-range {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
outline: none;
border-radius: 2px;
}
.cyber-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: var(--neon-cyan);
cursor: pointer;
box-shadow: 0 0 5px var(--neon-cyan);
border: 1px solid #000;
}
/* --- SPEED CONTROL SYSTEM (V9) --- */
.speed-control-group {
display: flex;
align-items: center;
gap: 8px;
margin-left: 15px;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
height: 30px;
}
.speed-icon-img {
width: 16px;
height: 16px;
filter: drop-shadow(0 0 5px var(--neon-cyan));
pointer-events: none;
}
.cyber-range-speed {
-webkit-appearance: none;
width: 100%; /* Prend toute la place du conteneur */
margin: 0; /* Suppression des marges fantômes */
height: 6px;
background: #000;
border: 1px solid #333;
border-radius: 3px;
outline: none;
box-shadow: 0 0 10px rgba(0, 243, 255, 0.15);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.cyber-range-speed::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #050505;
border: 1px solid var(--neon-cyan);
box-shadow: 0 0 8px var(--neon-cyan), inset 0 0 4px var(--neon-cyan);
cursor: grab;
transition: all 0.1s ease;
}
.cyber-range-speed:active::-webkit-slider-thumb {
cursor: grabbing;
transform: scale(1.2);
background: #fff;
}
.selection-box {
background: rgba(0, 0, 0, 0.2);
border: 1px dashed var(--neon-cyan-dim);
padding: 8px;
font-size: 10px;
color: var(--neon-gold);
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.writer-status-log {
margin-top: 15px;
font-size: 10px;
font-family: var(--font-code);
color: var(--neon-green);
white-space: pre-wrap;
min-height: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 10px;
}
.psyops-layer.active {
opacity: 1;
}
/* --- GAUCHE : LCD TACTIQUE --- */
.hud-column.left-column {
display: flex;
align-items: flex-end;
width: 260px;
margin-bottom: 40px;
}
.lcd-container {
background: #0b0f12;
border: 2px solid #2d3842;
border-top: 2px solid #3d4a57; /* Lumière zénithale */
border-radius: 2px;
padding: 8px;
width: 100%;
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
position: relative;
}
/* Vis de fixation */
.lcd-container::before, .lcd-container::after {
content: '+'; position: absolute; color: #1f252b; font-family: monospace; top: 3px; font-size: 10px;
}
.lcd-container::before { left: 4px; } .lcd-container::after { right: 4px; }
.lcd-screen {
/* Texture LCD Retro-Eclairé */
background-color: #001829;
background-image: linear-gradient(rgba(18, 161, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(18, 161, 255, 0.03) 1px, transparent 1px);
background-size: 4px 4px;
color: #64b5f6; /* Bleu tactique */
font-family: 'Roboto Mono', 'Consolas', monospace;
font-size: 10px;
line-height: 1.4;
height: 100px;
overflow: hidden;
padding: 10px;
border: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0 0 15px rgba(0,0,0,0.9);
text-shadow: 0 0 2px rgba(100, 181, 246, 0.5);
}
.lcd-scanline {
position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.2) 51%);
background-size: 100% 3px;
pointer-events: none; opacity: 0.3;
}
.lcd-label {
font-size: 8px; color: #455a64; margin-top: 5px; text-align: right;
font-weight: 700; letter-spacing: 1px; font-family: sans-serif;
}
/* --- DROITE : INSTRUMENTATION --- */
.hud-column.right-column {
display: flex; gap: 8px; align-items: flex-end; margin-bottom: 40px;
/* Fond de plaque instruments */
padding: 15px 15px 5px 15px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 4px;
backdrop-filter: blur(4px);
}
.bio-gauge {
display: flex; flex-direction: column; align-items: center;
width: 14px; /* Plus fin */
height: 140px;
position: relative;
}
.gauge-track {
flex: 1; width: 4px; background: #000;
border: 1px solid #222; border-radius: 2px;
position: relative; overflow: hidden;
/* Graduation fine */
background-image: repeating-linear-gradient(to top, rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.2) 1px, transparent 1px, transparent 10px);
}
.gauge-fill {
position: absolute; bottom: 0; left: 0; width: 100%;
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Palette Tactique Dé-saturée (Plus réaliste) */
.bio-gauge[data-var="propaganda"] .gauge-fill { background: #d81b60; box-shadow: 0 0 10px #d81b60; }
.bio-gauge[data-var="coherence"] .gauge-fill { background: #00bfa5; box-shadow: 0 0 10px #00bfa5; }
.bio-gauge[data-var="credibility"] .gauge-fill { background: #00bcd4; box-shadow: 0 0 10px #00bcd4; }
.bio-gauge[data-var="aggression"] .gauge-fill { background: #f44336; box-shadow: 0 0 10px #f44336; }
.bio-gauge[data-var="anxiety"] .gauge-fill { background: #ff9800; box-shadow: 0 0 10px #ff9800; }
.bio-gauge[data-var="gravity"] .gauge-fill { background: #fdd835; box-shadow: 0 0 10px #fdd835; }
.gauge-label {
font-size: 8px; color: #546e7a; margin-bottom: 8px;
writing-mode: vertical-rl; transform: rotate(180deg);
font-weight: 700; letter-spacing: 1px; font-family: sans-serif;
}
.gauge-value {
font-size: 8px; color: #eceff1; margin-top: 5px;
font-family: monospace;
}
/* Tooltip Tactique au survol */
.bio-gauge:hover::after {
content: attr(data-edu);
position: absolute; bottom: 100%; right: -10px; width: 180px;
background: rgba(10, 15, 20, 0.95); border: 1px solid var(--neon-cyan);
color: #fff; font-size: 9px; padding: 8px; margin-bottom: 10px; z-index: 100;
line-height: 1.4; box-shadow: 0 0 20px rgba(0,0,0,0.5);
pointer-events: none; text-align: left;
}
/* --- LHDSR COCKPIT SYSTEM (TRIPTYQUE) --- */
/* Conteneur Flex pour aligner GAUCHE - VIDEO - DROITE */
.cockpit-layout {
display: flex;
align-items: stretch; /* Hauteur égale pour tous */
justify-content: space-between;
gap: 15px;
margin-bottom: 15px;
height: 35vh; /* Hauteur fixe pour le cockpit */
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.05);
padding: 10px;
}
/* 1. PANNEAUX LATÉRAUX (GAUCHE & DROITE) */
.cockpit-panel {
flex: 1; /* Prend tout l'espace disponible restant */
display: flex;
flex-direction: column;
justify-content: center;
min-width: 200px; /* Sécurité pour ne pas trop écraser */
max-width: 450px; /* Limite pour ne pas avoir des instruments géants */
}
.cockpit-panel.left { align-items: stretch; margin-right: 15px; }
.cockpit-panel.right { align-items: stretch; margin-left: 15px; }
/* 2. ZONE VIDÉO CENTRALE (Ratio 16:9 Strict) */
.player-stage {
flex: 0 0 auto; /* Ne s'étire pas, suit son ratio */
height: 100% !important;
aspect-ratio: 16/9 !important;
margin: 0 !important;
border: 1px solid #333;
background: #000;
}
/* --- INSTRUMENTS : LCD (GAUCHE) --- */
.lcd-container {
width: 100%;
height: 100%;
background: #080a0c;
border: 2px solid #333;
padding: 5px;
display: flex;
flex-direction: column;
position: relative; /* Anchor for scanlines */
}
.lcd-screen {
flex: 1;
background: #001100;
color: #33ff33;
font-family: 'Courier New', monospace;
font-size: 10px;
line-height: 1.4;
padding: 10px;
/* TACTICAL SCROLL : Ancrage bas */
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
border: 1px inset #222;
text-shadow: 0 0 2px #33ff33;
white-space: pre-wrap;
transition: box-shadow 0.05s ease-out; /* Réactif pour le flash */
}
/* Scrollbar Fine pour le LCD */
.lcd-screen::-webkit-scrollbar { width: 4px; }
.lcd-screen::-webkit-scrollbar-thumb { background: #1a4d1a; border-radius: 2px; }
.lcd-screen::-webkit-scrollbar-track { background: #001100; }
/* Animation: Flash Glow Profond (Backlight Surge) */
@keyframes lcd-surge {
0% { box-shadow: inset 0 0 0 rgba(0,0,0,0); text-shadow: 0 0 2px #33ff33; }
10% { box-shadow: inset 0 0 60px rgba(50, 255, 50, 0.4); text-shadow: 0 0 8px #aaffaa; color: #fff; }
20% { box-shadow: inset 0 0 10px rgba(50, 255, 50, 0.1); text-shadow: 0 0 2px #33ff33; color: #33ff33; }
30% { box-shadow: inset 0 0 40px rgba(50, 255, 50, 0.2); }
100% { box-shadow: inset 0 0 0 rgba(0,0,0,0); }
}
.terminal-flash-active {
animation: lcd-surge 0.4s ease-out forwards;
}
/* Cursor Blink Animation */
.terminal-cursor {
display: inline-block;
width: 6px;
height: 10px;
background: #33ff33;
animation: term-blink 1s step-end infinite;
vertical-align: text-bottom;
margin-left: 2px;
}
@keyframes term-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Scrollbar Fine pour le LCD */
.lcd-screen::-webkit-scrollbar { width: 4px; }
.lcd-screen::-webkit-scrollbar-thumb { background: #1a4d1a; border-radius: 2px; }
.lcd-screen::-webkit-scrollbar-track { background: #001100; }
/* Animation: Flash Glow Profond (Backlight Surge) */
@keyframes lcd-surge {
0% { box-shadow: inset 0 0 0 rgba(0,0,0,0); text-shadow: 0 0 2px #33ff33; }
10% { box-shadow: inset 0 0 60px rgba(50, 255, 50, 0.4); text-shadow: 0 0 8px #aaffaa; color: #fff; }
20% { box-shadow: inset 0 0 10px rgba(50, 255, 50, 0.1); text-shadow: 0 0 2px #33ff33; color: #33ff33; }
30% { box-shadow: inset 0 0 40px rgba(50, 255, 50, 0.2); }
100% { box-shadow: inset 0 0 0 rgba(0,0,0,0); }
}
.terminal-flash-active {
animation: lcd-surge 0.4s ease-out forwards;
}
/* Cursor Blink Animation */
.terminal-cursor {
display: inline-block;
width: 6px;
height: 10px;
background: #33ff33;
animation: term-blink 1s step-end infinite;
vertical-align: text-bottom;
margin-left: 2px;
}
@keyframes term-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.lcd-label {
font-size: 8px; color: #555; text-align: center; margin-top: 4px; letter-spacing: 1px;
}
/* --- INSTRUMENTS : SCANNER & RADAR V9 (COCKPIT) --- */
/* DROITE : SCANNER CRT (MONITORING) */
.signal-screen-crt {
background-color: #020202;
/* Effet Grille Fine Tactique */
background-image:
linear-gradient(rgba(0, 50, 0, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 50, 0, 0.1) 1px, transparent 1px);
background-size: 4px 4px;
border: 1px solid #333;
box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
padding: 15px;
position: relative;
overflow: hidden;
font-family: 'Roboto Mono', monospace;
/* ARCHITECTURE V3.0 RESTAURÉE : FLEX COLUMN OBLIGATOIRE */
display: flex !important;
flex-direction: column !important;
height: 100%; /* Force l'occupation verticale */
}
.signal-header {
font-family: 'Orbitron', sans-serif;
color: #444; /* IDLE State (Sombre) */
letter-spacing: 2px;
font-weight: 700; /* Réduit de 900 */
text-transform: uppercase;
transition: color 0.2s, text-shadow 0.2s;
font-size: 11px; /* Réduit de 14px */
}
/* Centrage et élargissement du Type Indicator */
#sig-type {
text-align: center !important;
font-size: 14px !important;
width: 100%;
border-bottom: 1px solid #333;
padding-bottom: 5px;
margin-bottom: 10px;
color: #444;
font-weight: bold;
letter-spacing: 2px;
}
/* Curseur clignotant (Comme terminal gauche) */
.blink {
display: inline-block;
width: 6px;
height: 12px;
background: var(--neon-cyan);
margin-left: 2px;
animation: blink-cursor 1s step-end infinite;
vertical-align: middle;
}
@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.signal-body {
flex: 1;
color: var(--neon-cyan);
font-size: 13px;
line-height: 1.6;
margin-top: 15px;
white-space: pre-wrap;
overflow: hidden;
text-shadow: 0 0 2px rgba(0, 243, 255, 0.3);
border-top: 1px dashed #333;
padding-top: 10px;
min-height: 0;
}
/* Scrollbar discrète pour le texte */
.signal-body::-webkit-scrollbar { width: 4px; }
.signal-body::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
/* GAUCHE : LIVE RADAR CONTAINER */
.live-radar-box {
position: relative;
border: 1px solid #333;
background: rgba(0, 5, 10, 0.9);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 20px #000;
}
.live-radar-box canvas {
max-width: 100%;
max-height: 100%;
filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.2));
}
/* --- FORENSIC INTERROGATION MODE (NYPD STROBE) --- */
@keyframes nypd-pulse-idle {
0% { box-shadow: 0 0 5px #001133 inset; border-color: #002266; color: #004488; }
50% { box-shadow: 0 0 10px #002266 inset; border-color: #003399; color: #0066cc; }
100% { box-shadow: 0 0 5px #001133 inset; border-color: #002266; color: #004488; }
}
@keyframes nypd-strobe-active {
0% { background-color: rgba(255, 0, 0, 0.8); box-shadow: 0 0 20px red; border-color: red; color: white; }
49% { background-color: rgba(255, 0, 0, 0.8); box-shadow: 0 0 20px red; border-color: red; color: white; }
50% { background-color: rgba(0, 0, 255, 0.8); box-shadow: 0 0 20px blue; border-color: blue; color: white; }
99% { background-color: rgba(0, 0, 255, 0.8); box-shadow: 0 0 20px blue; border-color: blue; color: white; }
100% { background-color: rgba(255, 0, 0, 0.8); box-shadow: 0 0 20px red; border-color: red; color: white; }
}
.forensic-toggle-btn {
width: 100%;
box-sizing: border-box; /* Crucial pour inclure le padding dans les 100% */
margin: 0; /* On laisse le parent split-action-row gérer les marges */
padding: 10px 5px; /* Un peu plus compact pour tenir sur une ligne */
font-family: 'Orbitron', sans-serif;
font-weight: 900;
letter-spacing: 1px;
background: rgba(0, 34, 102, 0.1);
border: 2px solid #002266;
color: #004488;
cursor: pointer;
text-transform: uppercase;
transition: all 0.3s ease;
animation: nypd-pulse-idle 3s infinite;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.forensic-toggle-btn.active {
animation: nypd-strobe-active 0.6s infinite; /* Mode Strobe Rapide */
text-shadow: 0 0 5px white;
border-width: 2px;
}
.forensic-toggle-btn::before {
content: 'FORENSIC PROTOCOL';
}
.forensic-toggle-btn.active::before {
content: 'FORENSIC ANALYSIS : ENGAGED';
}
/* --- SPLIT ROW (FORENSIC + FOLDER) --- */
.split-action-row {
display: flex;
gap: 10px;
margin-top: 10px;
margin-bottom: 10px;
align-items: stretch;
}
/* Ajustement spécifique pour le bouton FORENSIC dans ce contexte */
.split-action-row .forensic-toggle-btn {
flex: 2; /* Prend 2/3 de la place */
margin: 0; /* Reset marge */
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
}
/* Le pseudo-élément 'content' est géré par JS maintenant pour le texte dynamique,
on désactive celui du CSS précédent pour éviter les conflits visuels */
.split-action-row .forensic-toggle-btn::before {
content: none !important;
}
/* Ajustement bouton Affaire */
#analysis-case-btn-large {
flex: 1; /* Prend 1/3 de la place */
border-color: var(--neon-gold);
color: var(--neon-gold);
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
#analysis-case-btn-large:hover {
background: rgba(255, 215, 0, 0.1);
box-shadow: 0 0 10px var(--neon-gold);
color: #fff;
}
.input-legend {
font-size: 9px;
color: #555;
margin-top: 4px;
font-style: italic;
}
/* --- FORENSIC MODE : CRIME SCENE IMMERSION --- */
/* 1. Le contenu devient Noir & Blanc et sombre */
body.forensic-crime-scene .cyber-main {
filter: grayscale(100%) contrast(1.5) brightness(0.3);
transition: filter 2s ease;
}
/* 2. Les Lumières de Police (Restent en couleur) */
body.forensic-crime-scene::before {
content: '';
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 9500; /* Au-dessus du contenu, sous le HUD */
pointer-events: none;
/* Gyrophare : Rouge Gauche / Bleu Droite */
background:
radial-gradient(circle at 25% 50%, rgba(255, 0, 0, 0.25) 0%, transparent 50%),
radial-gradient(circle at 75% 50%, rgba(0, 0, 255, 0.25) 0%, transparent 50%);
animation: nypd-strobe-background 0.8s infinite alternate ease-in-out;
mix-blend-mode: color-dodge; /* Mode de fusion lumineux */
}
@keyframes nypd-strobe-background {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.7; transform: scale(1.05); }
}
/* 3. Le HUD en mode FORENSIC */
.tactical-hud.forensic-active .hud-content {
border-color: #fff; /* Blanc clinique */
box-shadow: 0 0 50px rgba(0, 0, 255, 0.3);
background: rgba(5, 5, 10, 0.95);
}
.tactical-hud.forensic-active .hud-scanlines {
opacity: 0.05;
background-size: 100% 2px; /* Scanlines plus fines */
}
/* Le HUD lui-même */
.tactical-hud.forensic-active .hud-content {
border-color: #fff;
box-shadow: 0 0 30px rgba(255, 0, 0, 0.5), inset 0 0 50px rgba(0, 0, 255, 0.2);
/* Animation de vibration supprimée pour stabilité */
}
@keyframes hud-shake-subtle {
0% { transform: translate(0, 0); }
25% { transform: translate(1px, 0); }
75% { transform: translate(-1px, 0); }
100% { transform: translate(0, 0); }
}
/* --- TIMELINE FILTERS & FORENSIC MARKERS --- */
/* Barre de filtres sous le lecteur (Console Grid) */
.signal-filters {
display: flex;
flex-wrap: wrap; /* Permet le retour à la ligne propre */
justify-content: center; /* Centre les boutons */
gap: 6px;
padding: 10px;
background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 0;
}
.filter-chip {
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.1);
color: #888;
padding: 4px 12px;
font-size: 9px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
font-family: 'Orbitron', sans-serif; /* Plus technique */
letter-spacing: 1px;
border-radius: 2px;
flex: 1 1 auto; /* S'adapte à la largeur mais reste compact */
text-align: center;
display: flex;
justify-content: center;
}
.filter-chip:hover {
border-color: rgba(255,255,255,0.4);
color: #fff;
transform: translateY(-1px);
}
.filter-chip:hover { border-color: #fff; color: #fff; }
.filter-chip.active {
background: rgba(0, 243, 255, 0.1);
border-color: var(--neon-cyan);
color: var(--neon-cyan);
box-shadow: 0 0 5px rgba(0, 243, 255, 0.2);
}
/* Filtre Spécial FORENSIC */
.filter-chip[data-type="FORENSIC"] {
border-color: #002266;
color: #004488;
}
.filter-chip[data-type="FORENSIC"].active {
background: rgba(0, 0, 50, 0.5);
border-color: #3366ff;
color: #fff;
animation: nypd-pulse-text 1s infinite;
}
@keyframes nypd-pulse-text {
0%, 100% { text-shadow: 0 0 5px blue; }
50% { text-shadow: 0 0 5px red; }
}
/* --- MARKERS FORENSIC (GYROPHARE) --- */
.timeline-marker.marker-forensic {
width: 6px; /* Un peu plus gros */
height: 10px;
top: -7px;
z-index: 20;
animation: marker-strobe 0.4s infinite; /* Clignotement rapide */
}
@keyframes marker-strobe {
0% { background: #ff0000; box-shadow: 0 0 8px #ff0000; }
49% { background: #ff0000; box-shadow: 0 0 8px #ff0000; }
50% { background: #0000ff; box-shadow: 0 0 8px #0000ff; }
99% { background: #0000ff; box-shadow: 0 0 8px #0000ff; }
100% { background: #ff0000; box-shadow: 0 0 8px #ff0000; }
}
/* --- HOLO TOOLTIP (TYPING GHOST) --- */
.holo-tooltip {
position: absolute;
width: 220px; /* Largeur fixe */
min-height: 280px; /* Format Portrait ~4:5 */
background: rgba(5, 8, 10, 0.95);
border: 1px solid var(--neon-cyan);
border-top: 4px solid var(--neon-cyan); /* Accent Top */
box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px rgba(0, 243, 255, 0.15);
padding: 15px;
z-index: 99999; /* Au-dessus de tout */
pointer-events: none; /* Ne gêne pas le clic */
display: flex;
flex-direction: column;
font-family: 'Roboto Mono', monospace;
backdrop-filter: blur(5px);
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
0 100%
); /* Coin coupé en bas à droite */
transition: opacity 0.2s, transform 0.1s;
}
.holo-tooltip.hidden {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.holo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 10px;
letter-spacing: 1px;
color: var(--neon-cyan);
text-transform: uppercase;
border-bottom: 1px dashed rgba(0, 243, 255, 0.3);
padding-bottom: 5px;
}
.holo-type { font-weight: bold; }
.holo-time { color: #666; }
/* Effet Scanline Interne */
.holo-scanline {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 243, 255, 0.02) 50%);
background-size: 100% 4px;
pointer-events: none;
}
.holo-body {
flex: 1;
font-size: 11px;
line-height: 1.4;
color: #e0e0e0;
word-wrap: break-word;
position: relative;
}
/* Curseur qui clignote */
.holo-cursor {
display: inline-block;
width: 8px;
height: 12px;
background: var(--neon-cyan);
margin-left: 2px;
animation: holo-blink 0.8s steps(2, start) infinite;
vertical-align: middle;
}
@keyframes holo-blink {
to { visibility: hidden; }
}
.holo-footer {
margin-top: 15px;
font-size: 8px;
color: #444;
text-align: right;
border-top: 1px solid #222;
padding-top: 5px;
letter-spacing: 2px;
}
/* Variantes de couleur selon le type (injecté par JS) */
.holo-tooltip[data-color="red"] { border-color: var(--neon-red); }
.holo-tooltip[data-color="red"] .holo-cursor { background: var(--neon-red); }
.holo-tooltip[data-color="red"] .holo-header { color: var(--neon-red); border-bottom-color: rgba(255, 42, 42, 0.3); }
.holo-tooltip[data-color="gold"] { border-color: var(--neon-gold); }
.holo-tooltip[data-color="gold"] .holo-cursor { background: var(--neon-gold); }
.holo-tooltip[data-color="gold"] .holo-header { color: var(--neon-gold); border-bottom-color: rgba(255, 215, 0, 0.3); }
/* --- FORENSIC THEATER STYLES --- */
.library-layout {
display: flex;
height: 100%;
overflow: hidden;
/* BACKGROUND PROFOND (VOLEUR DE LUMIÈRE) */
background:
radial-gradient(circle at 15% 50%, rgba(0, 20, 40, 0.4) 0%, transparent 50%),
radial-gradient(circle at 85% 30%, rgba(20, 0, 40, 0.2) 0%, transparent 50%),
linear-gradient(180deg, #050505 0%, #080a0c 100%);
box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
}
.library-sidebar {
width: 250px;
/* SIDEBAR FLOTTANTE (GLASS) */
background: rgba(8, 10, 12, 0.6);
backdrop-filter: blur(12px);
border-right: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 10px 0 30px rgba(0,0,0,0.3);
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-header {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--neon-cyan);
border-bottom: 1px solid rgba(0, 243, 255, 0.2);
padding-bottom: 8px;
margin-top: 20px;
}
.cyber-filter-btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background: transparent;
border: none;
border-left: 2px solid transparent;
color: #555;
padding: 10px 15px;
text-align: left;
cursor: pointer;
margin-bottom: 1px;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.cyber-filter-btn:hover {
background: rgba(255, 255, 255, 0.02);
color: #ccc;
padding-left: 18px;
}
.cyber-filter-btn.active {
background: linear-gradient(90deg, rgba(0, 243, 255, 0.05) 0%, transparent 100%);
border-left-color: var(--neon-cyan);
color: var(--neon-cyan);
font-weight: bold;
padding-left: 20px;
text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
}
.library-grid-container {
flex: 1;
overflow-y: auto;
padding: 30px;
}
.forensic-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
/* --- MULTI-SELECT BATCH MODE STYLES --- */
.dossier-card.is-batch-selected {
border-color: var(--neon-magenta) !important;
background: rgba(255, 0, 255, 0.1) !important;
box-shadow: 0 0 25px rgba(255, 0, 255, 0.3), inset 0 0 15px rgba(255, 0, 255, 0.1) !important;
transform: translateY(-5px) scale(1.02);
z-index: 20;
}
.dossier-card.is-batch-selected::after {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 24px;
height: 24px;
background-color: var(--neon-magenta);
border-radius: 50%;
z-index: 30;
box-shadow: 0 0 10px var(--neon-magenta);
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
animation: batch-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes batch-pop {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.theater-fab-container {
position: absolute;
bottom: -100px;
left: calc(250px + (100% - 250px) / 2);
transform: translateX(-50%);
background: rgba(10, 15, 20, 0.95);
border: 1px solid var(--neon-magenta);
box-shadow: 0 15px 40px rgba(255, 0, 255, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.8);
padding: 15px 30px;
border-radius: 40px;
display: flex;
gap: 25px;
align-items: center;
z-index: 1000;
backdrop-filter: blur(15px);
transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: auto;
}
.theater-fab-container.visible {
bottom: 40px;
}
/* --- FORENSIC THEATER CARDS (GLASS-MORPHISM TACTICAL V2) --- */
.dossier-card {
background: rgba(20, 25, 30, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
position: relative;
cursor: pointer;
overflow: visible; /* Autorise le débordement des stacks */
height: 350px;
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* --- MOTION ENTRANCE --- */
@keyframes cardFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.dossier-card {
animation: cardFadeIn 0.4s ease-out forwards;
}
.dossier-card:nth-child(1) { animation-delay: 0.05s; }
.dossier-card:nth-child(2) { animation-delay: 0.1s; }
.dossier-card:nth-child(3) { animation-delay: 0.15s; }
.dossier-card:nth-child(4) { animation-delay: 0.2s; }
.dossier-card:nth-child(5) { animation-delay: 0.25s; }
.dossier-card:nth-child(6) { animation-delay: 0.3s; }
.dossier-card:nth-child(7) { animation-delay: 0.35s; }
.dossier-card:nth-child(8) { animation-delay: 0.4s; }
/* QUICK LOOK UX */
.dossier-card:hover .d-summary {
color: #fff !important; /* Lecture prioritaire au survol */
text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
/* --- HIVE STACK (2.5D PHYSICS) --- */
.dossier-card.is-stack::before,
.dossier-card.is-stack::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg-panel-solid);
border: var(--border-precision);
border-radius: 6px;
z-index: -1;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dossier-card.is-stack::before { transform: translate(4px, -4px); opacity: 0.6; }
.dossier-card.is-stack::after { transform: translate(8px, -8px); opacity: 0.3; }
.dossier-card.is-stack:hover::before { transform: translate(6px, -6px); }
.dossier-card.is-stack:hover::after { transform: translate(12px, -12px); }
.prism-badge {
position: absolute;
top: 12px; left: 12px;
background: var(--neon-cyan);
color: #000;
font-size: 9px;
font-weight: 900;
padding: 2px 8px;
border-radius: 3px;
z-index: 10;
letter-spacing: 1px;
box-shadow: 0 0 15px var(--neon-cyan-dim);
}
.dossier-card::before {
/* Scanline effect overlay */
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.2) 51%);
background-size: 100% 4px;
opacity: 0.3;
pointer-events: none;
z-index: 2;
}
.dossier-card:hover {
transform: translateY(-5px) scale(1.01);
background: rgba(25, 30, 35, 0.8);
border-color: var(--neon-cyan);
box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 15px rgba(0, 243, 255, 0.1);
z-index: 10;
}
/* High Gravity Variant */
.dossier-card.high-gravity {
border-top-color: var(--neon-gold);
background: rgba(20, 15, 5, 0.8); /* Slight Gold Tint */
}
.dossier-card.high-gravity:hover {
box-shadow: 0 15px 40px rgba(255, 215, 0, 0.15);
border-color: var(--neon-gold);
}
/* Thumbnail Area */
.d-thumb {
width: 100%;
height: 160px; /* Hauteur ajustée pour l'équilibre */
object-fit: cover;
filter: grayscale(80%) sepia(20%) contrast(1.1);
transition: filter 0.4s ease;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dossier-card:hover .d-thumb {
filter: grayscale(0%) contrast(1.2);
}
/* Content Area */
.d-content {
padding: 15px;
flex: 1;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
position: relative;
z-index: 3;
}
.d-title {
font-family: var(--font-display);
font-size: 14px;
color: #fff;
margin-bottom: 8px;
line-height: 1.3;
max-height: 2.6em;
overflow: hidden;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
letter-spacing: 0.5px;
}
.dossier-card:hover .d-title {
color: var(--neon-cyan);
text-shadow: 0 0 8px var(--neon-cyan-dim);
}
.dossier-card.high-gravity:hover .d-title {
color: var(--neon-gold);
text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.d-meta {
font-family: var(--font-code);
font-size: 10px;
color: rgba(255,255,255,0.5);
margin-bottom: 12px;
display: flex;
justify-content: space-between;
text-transform: uppercase;
}
.d-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: auto;
}
.d-tag {
font-family: var(--font-code);
font-size: 9px;
padding: 3px 6px;
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.3);
border-radius: 2px;
}
.d-tag.alert {
border-color: var(--neon-red);
color: var(--neon-red);
background: rgba(255, 42, 42, 0.1);
box-shadow: 0 0 5px rgba(255, 42, 42, 0.2);
}
.d-tag.gravity {
border-color: var(--neon-gold);
color: var(--neon-gold);
background: rgba(255, 215, 0, 0.1);
box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
}
/* Badge Holographique */
.gravity-badge {
position: absolute;
top: 10px; right: 10px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid var(--neon-gold);
color: var(--neon-gold);
padding: 6px 10px;
font-family: var(--font-display);
font-weight: 900;
font-size: 14px;
z-index: 5;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
backdrop-filter: blur(4px);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* NUCLEAR BUTTON (CSS Integration) */
.card-nuclear-btn {
position: absolute;
top: 10px;
left: 10px;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 60, 60, 0.5);
color: rgba(255, 60, 60, 0.8);
border-radius: 50%;
cursor: pointer;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0; /* Hidden by default */
transform: scale(0.8);
backdrop-filter: blur(2px);
}
.dossier-card:hover .card-nuclear-btn {
opacity: 1; /* Reveal on card hover */
transform: scale(1);
}
.card-nuclear-btn:hover {
background: rgba(255, 0, 0, 0.2);
border-color: var(--neon-red);
color: var(--neon-red);
box-shadow: 0 0 15px var(--neon-red);
transform: scale(1.2) rotate(90deg);
}
/* --- CASE FILE VIEWER (FORENSIC TERMINAL) --- */
.cyber-overlay.full-screen {
background: rgba(0, 5, 10, 0.85);
backdrop-filter: blur(15px); /* Flou d'arrière-plan puissant */
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
.case-file-window {
width: 100%; height: 100%;
max-width: 1600px;
background: linear-gradient(135deg, #080a0c 0%, #020203 100%);
border: 1px solid var(--neon-cyan-dim);
display: flex;
flex-direction: column;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 243, 255, 0.1);
position: relative;
overflow: hidden;
}
/* Header Tactique */
.case-header {
height: 70px;
background: rgba(0, 20, 30, 0.6);
border-bottom: 1px solid var(--neon-cyan);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
flex-shrink: 0;
}
.case-id-display {
font-family: 'Orbitron', sans-serif;
font-size: 1.8rem;
color: #fff;
text-shadow: 0 0 10px var(--neon-cyan-dim);
letter-spacing: 2px;
}
.case-id-display span { color: var(--neon-cyan); font-weight: 900; }
/* Body Grid */
.case-body {
flex: 1;
display: grid;
grid-template-columns: 320px 1fr 380px; /* 3 Colonnes distinctes */
grid-template-rows: 100%; /* [FIX] Verrouille la hauteur pour permettre le scroll */
gap: 0;
overflow: hidden;
min-height: 0; /* [FIX] Sécurité Flexbox */
}
/* Colonne Gauche (Profil) */
.case-col-left {
background: rgba(0,0,0,0.2);
border-right: 1px solid rgba(255,255,255,0.05);
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
}
/* Colonne Centre (Briefing) */
.case-col-center {
padding: 40px;
overflow-y: auto;
background: radial-gradient(circle at center, rgba(0,20,40,0.2) 0%, transparent 70%);
}
/* Colonne Droite (Preuves) */
.case-col-right {
background: rgba(0,0,0,0.3);
border-left: 1px solid rgba(255,255,255,0.05);
padding: 20px;
overflow-y: auto;
height: 100%; /* [FIX] Force la colonne à respecter la taille de la grille */
display: flex;
flex-direction: column;
gap: 15px;
}
/* Panneaux Internes */
.case-panel {
border: 1px solid rgba(255,255,255,0.05);
background: rgba(255,255,255,0.02);
padding: 15px;
position: relative;
}
.case-panel-title {
font-family: 'Rajdhani', sans-serif;
color: var(--neon-cyan);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0, 243, 255, 0.2);
padding-bottom: 5px;
font-weight: bold;
}
/* Profil Image */
.case-thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border: 1px solid #333;
filter: grayscale(50%);
margin-bottom: 10px;
}
/* Métriques Texte */
.case-meta-row {
display: flex; justify-content: space-between;
font-size: 11px; color: #888; margin-bottom: 6px;
border-bottom: 1px dashed rgba(255,255,255,0.05);
padding-bottom: 2px;
}
.case-meta-val { color: #ddd; font-weight: bold; font-family: var(--font-code); text-align: right; }
/* Chart Container Fix */
.psycho-chart-box {
position: relative;
height: 220px; /* Hauteur fixe forcee */
width: 100%;
margin-top: 10px;
}
/* Gravité Score */
.gravity-display {
font-family: 'Orbitron', sans-serif;
font-size: 4rem;
color: var(--neon-gold);
text-align: center;
line-height: 1;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
margin: 10px 0;
}
.gravity-label { text-align: center; font-size: 9px; color: #666; letter-spacing: 3px; }
/* Briefing Text */
.briefing-title {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
line-height: 1.2;
letter-spacing: -0.5px;
}
/* Suppression du titre redondant si un rapport structuré est présent */
.case-col-center:has(.report-header-card) > .briefing-title:first-child {
display: none !important;
}
.briefing-text {
font-family: 'Inter', sans-serif;
font-size: 15px;
color: #cbd5e1;
line-height: 1.8;
text-align: left;
}
.briefing-text h1 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
color: var(--neon-gold);
margin: 0 0 20px 0;
text-transform: uppercase;
}
.briefing-text h2 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--neon-cyan);
margin: 30px 0 15px 0;
border-bottom: 1px solid rgba(0, 243, 255, 0.2);
padding-bottom: 5px;
text-transform: uppercase;
}
.briefing-text h3 {
font-size: 14px;
color: #fff;
margin: 20px 0 10px 0;
}
.d-summary * {
display: inline !important;
font-size: inherit !important;
margin: 0 !important;
padding: 0 !important;
font-weight: normal !important;
}
/* --- LHDSR FORENSIC THREAD (V2 INTELLIGENCE BOARD) --- */
.cortex-synthesis-board {
display: flex;
flex-direction: column;
gap: 12px; /* Compaction maximale entre les modules */
width: 100%;
margin: 0 auto;
padding: 0; /* Suppression du padding interne inutile qui crée du vide */
}
.cortex-intel-module {
background: rgba(15, 20, 25, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 6px; /* Coins un peu plus vifs */
padding: 15px 20px; /* Resserrement horizontal interne */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre plus discrète pour coller au fond */
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.cortex-intel-module:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
background: rgba(20, 25, 30, 0.8);
}
/* Ligne de force colorée à gauche */
.cortex-intel-module::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--module-color, var(--neon-cyan));
box-shadow: 0 0 15px var(--module-color, var(--neon-cyan));
}
.cortex-module-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0; /* Suppression totale de la marge externe pour coller au texte */
padding-bottom: 10px; /* Padding interne conservé pour la ligne de séparation */
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cortex-module-header svg {
width: 18px;
height: 18px;
color: var(--module-color, var(--neon-cyan));
filter: drop-shadow(0 0 5px var(--module-color, var(--neon-cyan)));
}
.cortex-module-header span {
font-family: 'Orbitron', sans-serif;
font-size: 13px;
font-weight: 700;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
}
.cortex-module-body {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #c0d0e0;
line-height: 1.6; /* Légèrement resserré pour plus de densité */
text-align: left; /* Supprime l'étirement (justify) qui crée des trous */
white-space: normal !important; /* LE FIX CRITIQUE : Écrase le pre-wrap et force le texte à s'agencer naturellement */
padding-top: 10px;
}
.cortex-module-body p {
margin: 0 0 10px 0; /* Marge bas uniquement, clean */
}
.cortex-module-body p:last-child {
margin-bottom: 0;
}
/* PURGE NUCLÉAIRE : Cible les paragraphes vides, avec br, ou espaces insécables */
.cortex-module-body p:empty,
.cortex-module-body p:blank {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* --- TACTICAL EVIDENCE BLOCKS (LHDSR V10) --- */
.tactical-evidence-block {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-left: 2px solid var(--module-color, var(--neon-cyan));
padding: 15px;
margin-bottom: 15px;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tactical-evidence-block:hover {
background: rgba(255, 255, 255, 0.02);
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.te-text {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #e2e8f0;
line-height: 1.6;
}
.te-source {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 243, 255, 0.05);
border: 1px solid rgba(0, 243, 255, 0.2);
color: var(--neon-cyan);
padding: 6px 12px;
border-radius: 4px;
font-family: var(--font-code);
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.2s ease;
}
.te-source:hover {
background: var(--neon-cyan);
color: #000;
box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}
.theme-dissonance .te-source { background: rgba(255, 42, 42, 0.05); border-color: rgba(255, 42, 42, 0.2); color: var(--neon-red); }
.theme-dissonance .te-source:hover { background: var(--neon-red); color: #000; box-shadow: 0 0 10px rgba(255, 42, 42, 0.3); }
.theme-convergence .te-source { background: rgba(255, 215, 0, 0.05); border-color: rgba(255, 215, 0, 0.2); color: var(--neon-gold); }
.theme-convergence .te-source:hover { background: var(--neon-gold); color: #000; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
/* Pending Sources Clean UI */
.pending-sources-block {
background: rgba(255, 215, 0, 0.05);
border: 1px dashed var(--neon-gold);
padding: 15px;
margin-top: 20px;
border-radius: 4px;
}
.ps-header {
color: var(--neon-gold);
font-family: var(--font-display);
font-size: 11px;
margin-bottom: 12px;
font-weight: bold;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 8px;
}
.pending-source-item {
color: #aaa;
font-family: var(--font-code);
font-size: 10px;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
/* Thèmes d'Intelligence dynamiques */
.theme-master { --module-color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.theme-context { --module-color: var(--neon-cyan); }
.theme-convergence { --module-color: var(--neon-gold); }
.theme-dissonance { --module-color: var(--neon-red); }
.theme-void { --module-color: #64748b; }
.theme-gem { --module-color: var(--neon-magenta); }
/* Magic Links (Data Pills Interactifs) */
.thread-magic-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-code);
font-size: 11px;
font-weight: 700;
color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.08);
border: 1px solid rgba(0, 243, 255, 0.3);
border-radius: 4px;
padding: 2px 8px;
margin: 0 4px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
vertical-align: middle;
text-transform: uppercase;
}
.thread-magic-link::before {
content: '🔗';
font-size: 10px;
opacity: 0.7;
filter: grayscale(1);
}
.thread-magic-link:hover {
background: rgba(0, 243, 255, 0.2);
border-color: var(--neon-cyan);
color: #fff;
box-shadow: 0 0 12px rgba(0, 243, 255, 0.4);
transform: translateY(-2px);
}
/* Citations en ligne discrètes */
.inline-quote {
font-style: italic;
color: #fff;
background: rgba(255, 255, 255, 0.05);
padding: 0 4px;
border-radius: 2px;
}
/* Citations immersives (Blockquotes) */
.thread-quote {
display: block;
font-style: italic;
color: #fff;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
border-left: 3px solid var(--module-color, var(--neon-cyan));
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 4px 4px 0;
font-size: 15px;
box-shadow: inset 5px 0 15px rgba(0,0,0,0.2);
}
/* LISTES TACTIQUES */
.tactical-list {
list-style: none;
padding: 0;
margin: 15px 0;
display: grid;
gap: 10px;
}
.tactical-list li {
background: rgba(255, 255, 255, 0.03);
border-left: 2px solid var(--neon-cyan);
padding: 10px 15px;
font-size: 13px;
color: #fff;
font-family: var(--font-tech);
}
.tactical-list li::before {
content: "SCAN_DATA >";
font-family: var(--font-code);
font-size: 8px;
color: var(--neon-cyan);
margin-right: 10px;
opacity: 0.5;
}
.report-label {
color: var(--neon-gold);
font-family: 'Orbitron', sans-serif;
font-size: 10px;
letter-spacing: 1px;
display: block;
margin-top: 10px;
}
.briefing-text h4 {
font-family: 'Orbitron', sans-serif;
color: var(--neon-cyan);
font-size: 11px;
letter-spacing: 2px;
margin: 0 0 12px 0;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
}
.briefing-text h4::after {
content: ''; flex: 1; height: 1px; background: rgba(0, 243, 255, 0.1);
}
.briefing-text b, .briefing-text strong {
color: #fff;
font-weight: 700;
text-shadow: 0 0 5px rgba(255,255,255,0.2);
}
.briefing-text ul {
list-style-type: none;
padding-left: 15px;
margin: 15px 0;
}
.briefing-text li {
margin-bottom: 8px;
position: relative;
}
.briefing-text li::before {
content: '>';
position: absolute;
left: -15px;
color: var(--neon-cyan);
font-family: var(--font-code);
}
/* Evidence Cards (Interactive Tactical V9) */
.evidence-card {
background: rgba(0, 0, 0, 0.4);
/* Border-left géré par JS pour la couleur dynamique */
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
padding: 12px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer !important; /* Force l'affordance */
position: relative;
overflow: hidden;
margin-bottom: 8px;
flex-shrink: 0; /* [FIX] Empêche l'écrasement dans la colonne scrollable */
}
.evidence-card:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.1);
transform: translateX(6px) !important; /* Slide vers la droite (Play) */
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.5);
}
.evidence-card:active {
transform: translateX(3px) scale(0.99) !important;
background: rgba(0, 243, 255, 0.1) !important;
border-color: var(--neon-cyan);
}
/* Indicateur de lecture (Play) au survol */
.evidence-card::after {
content: 'â–¶';
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: var(--neon-cyan);
opacity: 0;
transition: all 0.2s ease;
pointer-events: none;
}
.evidence-card:hover::after {
opacity: 1;
right: 15px; /* Slide in effect */
text-shadow: 0 0 8px var(--neon-cyan);
}
.evidence-header {
display: flex; justify-content: space-between;
font-size: 9px; font-weight: bold; margin-bottom: 6px;
font-family: var(--font-code);
}
.evidence-quote {
font-style: italic; color: #e0e0e0; font-size: 11px;
border-left: 1px solid rgba(255,255,255,0.1);
padding-left: 8px; margin-bottom: 6px;
}
.evidence-desc { font-size: 10px; color: #888; line-height: 1.3; }
/* --- TRADUCTION & CC STYLES --- */
/* Notification Flottante */
.cc-notification-tooltip {
position: absolute;
background: rgba(0, 20, 0, 0.95);
border: 1px solid var(--neon-green);
color: var(--neon-green);
padding: 8px 12px;
border-radius: 4px;
font-size: 10px;
font-family: var(--font-code);
pointer-events: none;
z-index: 10000;
box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.cc-notification-tooltip.visible {
opacity: 1;
transform: translateY(0);
animation: notif-bounce 2s infinite;
}
@keyframes notif-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* État Bouton CC : Nouveau Contenu */
.btn-state-new-content {
color: var(--neon-green) !important;
border-color: var(--neon-green) !important;
box-shadow: 0 0 10px rgba(0, 255, 157, 0.4);
animation: neon-pulse-slow 3s infinite ease-in-out;
}
@keyframes neon-pulse-slow {
0% { box-shadow: 0 0 5px rgba(0, 255, 157, 0.2); opacity: 0.8; }
50% { box-shadow: 0 0 15px rgba(0, 255, 157, 0.6); opacity: 1; }
100% { box-shadow: 0 0 5px rgba(0, 255, 157, 0.2); opacity: 0.8; }
}
/* Menu Déroulant Langues (Cyberpunk) */
.cc-dropdown-menu {
position: absolute;
background: rgba(5, 5, 5, 0.95);
border: 1px solid var(--neon-cyan);
min-width: 150px;
z-index: 2000;
display: flex;
flex-direction: column;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.cc-dropdown-header {
background: rgba(0, 243, 255, 0.1);
color: var(--neon-cyan);
padding: 5px 10px;
font-size: 9px;
font-weight: bold;
border-bottom: 1px solid var(--neon-cyan-dim);
letter-spacing: 1px;
}
.cc-lang-item {
padding: 8px 10px;
font-size: 11px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: all 0.2s;
display: flex;
justify-content: space-between;
color: #888;
}
.cc-lang-item:hover {
background: rgba(255,255,255,0.1);
}
/* États des langues */
.cc-lang-available { color: #fff !important; }
.cc-lang-missing { font-style: italic; }
.cc-lang-missing:hover { color: var(--neon-cyan) !important; }
.cc-lang-new { color: var(--neon-green) !important; text-shadow: 0 0 5px var(--neon-green); font-weight: bold; }
/* Animation Dissolve */
.brain-anim-wrapper {
width: 100%;
height: 100%;
}
/* --- MACHIAVEL MARKER (HELLFIRE STYLE) --- */
.marker-machiavel {
color: #ff4d00; /* Orange Sang */
width: 6px;
height: 12px;
top: -8px;
z-index: 30; /* Au-dessus de tout */
/* Effet Flamme Fantôme */
box-shadow:
0 0 4px #ff0000,
0 -5px 10px #ff8800,
0 0 15px rgba(255, 0, 0, 0.8);
animation: hellfire-pulse 0.15s infinite alternate;
border-radius: 50% 50% 0 0; /* Forme de flamme */
}
.marker-machiavel::after {
content: '';
position: absolute;
bottom: 0; left: 1px; width: 4px; height: 6px;
background: #ffff00; /* Coeur jaune */
filter: blur(2px);
opacity: 0.8;
animation: hellfire-core 0.1s infinite;
}
@keyframes hellfire-pulse {
0% { transform: scaleY(1) skewX(0deg); opacity: 0.9; filter: hue-rotate(0deg); }
100% { transform: scaleY(1.3) skewX(2deg); opacity: 1; filter: hue-rotate(-10deg); }
}
@keyframes hellfire-core {
0% { height: 4px; opacity: 0.6; }
100% { height: 7px; opacity: 1; }
}
/* --- NEURO TAGGING HOLO-CARD --- */
.holo-annotation-card {
position: absolute;
/* Positionnement relatif au marqueur, géré par JS */
width: 320px;
background: rgba(10, 15, 20, 0.95); /* Fond très sombre */
border: 1px solid var(--neon-cyan);
border-top: 4px solid var(--neon-cyan);
box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 30px rgba(0, 243, 255, 0.2);
padding: 20px;
z-index: 999999; /* AU DESSUS DU SPIDER CHART */
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 15px;
animation: holo-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes holo-pop {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
.holo-card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px dashed rgba(0, 243, 255, 0.3);
padding-bottom: 10px;
}
.holo-card-title {
font-family: 'Orbitron', sans-serif;
color: var(--neon-cyan);
font-size: 12px;
letter-spacing: 1px;
}
.holo-card-close {
background: transparent;
border: none;
color: #666;
cursor: pointer;
font-size: 16px;
}
.holo-card-close:hover { color: var(--neon-red); }
.holo-typewriter-box {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: #e0e0e0;
min-height: 40px;
line-height: 1.4;
border-left: 2px solid var(--neon-cyan-dim);
padding-left: 10px;
}
.holo-input-wrapper {
position: relative;
}
.holo-input {
width: 100%;
background: rgba(0,0,0,0.5);
border: 1px solid #444;
color: var(--neon-gold);
padding: 10px;
font-family: var(--font-tech);
font-size: 14px;
outline: none;
transition: all 0.3s;
}
.holo-input:focus {
border-color: var(--neon-gold);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}
.holo-status-bar {
height: 2px;
background: #333;
width: 100%;
margin-top: 5px;
position: relative;
overflow: hidden;
}
.holo-status-bar.saving::after {
content: '';
position: absolute; top:0; left:0; height:100%; width:50%;
background: var(--neon-gold);
animation: scan 1s infinite linear;
}
/* --- TACTICAL INTERVENTION MODAL --- */
#tactical-intervention-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
display: flex; align-items: center; justify-content: center;
z-index: 10000;
}
.tactical-option {
background: rgba(0, 0, 0, 0.5);
border: 1px solid #333;
transition: all 0.3s ease;
}
.tactical-option:hover {
border-color: var(--neon-cyan);
box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
transform: translateY(-2px);
}
#opt-abort:hover {
border-color: var(--neon-red) !important;
box-shadow: 0 0 15px rgba(255, 42, 42, 0.2) !important;
}
#opt-resolve:hover {
border-color: var(--neon-magenta) !important;
box-shadow: 0 0 15px rgba(255, 0, 255, 0.2) !important;
}
.intervention-active .tactical-hud-container {
border-color: var(--neon-red);
box-shadow: 0 0 20px var(--neon-red);
}
/* --- DRAG & DROP TACTIQUE --- */
/* L'élément est saisissable */
.arming-row[draggable="true"] {
cursor: grab;
}
.arming-row[draggable="true"]:active {
cursor: grabbing;
}
/* L'élément en cours de déplacement (Le Fantôme) */
.arming-row.sortable-dragging {
opacity: 0.5;
background: rgba(0, 243, 255, 0.1);
border: 1px dashed var(--neon-cyan);
box-shadow: 0 0 15px var(--neon-cyan-dim);
transform: scale(0.98);
}
/* L'élément survolé (Indicateur de placement) */
/* On ne style pas l'élément survolé lui-même pour éviter le jitter,
mais on gère l'insertion visuelle via JS */
/* ==========================================================================
LHDSR OMNISCIENCE UI (V9.1 UPDATE)
Support Multi-Source & Timeline View
========================================================================== */
/* --- SOURCE IDENTITY : WEB / OSINT (THE MATRIX) --- */
.dossier-card.type-web {
border-top: 2px solid var(--neon-green);
background: linear-gradient(180deg, rgba(0, 15, 5, 0.85) 0%, rgba(0, 10, 0, 0.95) 100%);
box-shadow: 0 4px 15px rgba(0, 255, 157, 0.1);
}
.dossier-card.type-web:hover {
border-color: var(--neon-green);
box-shadow: 0 15px 40px rgba(0, 255, 157, 0.2);
transform: translateY(-5px) scale(1.02);
}
.dossier-card.type-web .d-title {
font-family: 'Roboto Mono', monospace; /* Look "Document Classifié" */
color: #e0e0e0;
font-size: 11px;
line-height: 1.5;
letter-spacing: 0;
}
.dossier-card.type-web .d-meta {
color: var(--neon-green);
opacity: 0.7;
}
.dossier-card.type-web .d-thumb {
/* Filtre "Vision Nocturne / Terminal" pour les images Web */
filter: grayscale(100%) sepia(100%) hue-rotate(80deg) saturate(300%) contrast(0.8) brightness(0.8);
border-bottom-color: var(--neon-green-dim);
opacity: 0.8;
}
.dossier-card.type-web:hover .d-thumb {
filter: grayscale(0%) sepia(0%) contrast(1.1) brightness(1);
opacity: 1;
}
/* --- SOURCE IDENTITY : X / TWITTER (THE STARK) --- */
.dossier-card.type-x {
border-top: 2px solid #ffffff;
background: #000000;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}
.dossier-card.type-x:hover {
border-color: #fff;
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.25);
}
/* ==========================================================================
LHDSR "NEURAL SPINE" TIMELINE V2 (CALIBRATED)
========================================================================== */
.forensic-layout-timeline {
display: flex;
flex-direction: column;
padding: 60px 20px;
position: relative;
max-width: 1100px; /* Plus large pour respirer */
margin: 0 auto;
min-height: 80vh;
}
/* LA COLONNE VERTÉBRALE (SPINE) */
.forensic-layout-timeline::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 2px;
background: rgba(0, 243, 255, 0.15);
transform: translateX(-50%);
z-index: 0;
box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
}
/* --- SECTION HEADER (MOIS) --- */
.timeline-month-separator {
display: flex;
align-items: center;
justify-content: center;
margin: 40px 0 60px 0;
position: relative;
z-index: 2;
}
.timeline-month-separator .tm-text {
background: #050a10;
border: 1px solid var(--neon-gold);
color: var(--neon-gold);
padding: 8px 20px;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 3px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
text-transform: uppercase;
}
/* --- ITEM WRAPPER (GRID SYSTEM) --- */
.timeline-item {
display: flex;
align-items: center; /* ALIGNEMENT VERTICAL CRITIQUE */
justify-content: center;
position: relative;
width: 100%;
margin-bottom: 40px;
z-index: 1;
}
/* CONFIGURATION CARTE */
.timeline-item .dossier-card {
width: 40%; /* Taille fixe relative */
max-width: 400px;
z-index: 5;
margin: 0; /* Reset marges parasites */
position: relative;
}
/* GAUCHE */
.timeline-item.left {
justify-content: flex-start;
padding-right: 50%; /* Pousse vers la gauche du centre */
}
.timeline-item.left .dossier-card {
margin-left: auto; /* Colle la carte vers le centre */
margin-right: 40px; /* Espace pour le connecteur */
}
/* DROITE */
.timeline-item.right {
justify-content: flex-end;
padding-left: 50%; /* Pousse vers la droite du centre */
}
.timeline-item.right .dossier-card {
margin-right: auto; /* Colle la carte vers le centre */
margin-left: 40px; /* Espace pour le connecteur */
}
/* --- CONNECTEURS (LES BRAS) --- */
.timeline-item::before {
content: '';
position: absolute;
top: 50%;
height: 1px;
background: var(--neon-cyan);
opacity: 0.5;
z-index: 1;
width: 40px; /* Longueur du bras correspondant à la margin */
box-shadow: 0 0 8px var(--neon-cyan);
}
/* Positionnement des bras */
.timeline-item.left::before { left: 50%; margin-left: -40px; } /* Part du centre vers gauche */
.timeline-item.right::before { left: 50%; } /* Part du centre vers droite */
/* Variante Web (Vert) */
.timeline-item:has(.type-web)::before {
background: var(--neon-green);
box-shadow: 0 0 8px var(--neon-green);
}
/* --- NOEUD CENTRAL (SYNAPSE) --- */
.timeline-node {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 16px; height: 16px;
background: #000;
border: 2px solid var(--neon-cyan);
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 15px var(--neon-cyan);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.timeline-item:hover .timeline-node {
transform: translate(-50%, -50%) scale(1.5);
background: var(--neon-cyan);
box-shadow: 0 0 30px var(--neon-cyan);
}
/* Variante Web */
.timeline-node.node-web { border-color: var(--neon-green); box-shadow: 0 0 15px var(--neon-green); }
.timeline-item:has(.type-web):hover .timeline-node { background: var(--neon-green); box-shadow: 0 0 30px var(--neon-green); }
/* --- DATE LABEL (TAG TACTIQUE) --- */
.timeline-day-label {
position: absolute;
top: 50%;
transform: translateY(-50%); /* Centré verticalement par défaut */
background: rgba(0, 5, 10, 0.9);
border: 1px solid #333;
color: #888;
font-family: var(--font-code);
font-size: 10px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
z-index: 4;
transition: all 0.3s;
}
/* Positionnement intelligent du label DATE */
/* Si carte à Gauche -> Date à Droite du noeud */
.timeline-item.left .timeline-day-label { left: 50%; margin-left: 25px; }
/* Si carte à Droite -> Date à Gauche du noeud */
.timeline-item.right .timeline-day-label { right: 50%; margin-right: 25px; }
.timeline-item:hover .timeline-day-label {
border-color: var(--neon-cyan);
color: var(--neon-cyan);
text-shadow: 0 0 5px var(--neon-cyan-dim);
}
.timeline-item:has(.type-web):hover .timeline-day-label {
border-color: var(--neon-green);
color: var(--neon-green);
}
/* --- VIEW SWITCHER (SIDEBAR) --- */
.view-switcher {
display: flex;
gap: 5px;
margin-bottom: 20px;
background: rgba(0,0,0,0.5);
padding: 5px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.1);
}
.view-switcher button {
flex: 1;
border: 1px solid transparent;
background: transparent;
color: #666;
transition: all 0.2s;
}
.view-switcher button:hover {
color: #fff;
background: rgba(255,255,255,0.05);
}
.view-switcher button.active {
color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.08);
filter: drop-shadow(0 0 8px var(--neon-cyan));
}
.nav-icon-mask {
width: 18px;
height: 18px;
background-color: #555;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all 0.3s ease;
}
.view-switcher button.active .nav-icon-mask {
background-color: var(--neon-cyan);
}
.nav-icon-svg {
width: 18px;
height: 18px;
opacity: 0.4;
transition: all 0.3s ease;
}
.view-switcher button.active .nav-icon-svg {
opacity: 1;
color: var(--neon-cyan);
}
/* --- NEON GHOST BREATHING GREEN --- */
@keyframes neonBreathGreen {
0% { border-color: rgba(46, 213, 115, 0.2); box-shadow: 0 0 5px rgba(46, 213, 115, 0.1); }
50% { border-color: var(--neon-green); box-shadow: 0 0 20px rgba(46, 213, 115, 0.4); }
100% { border-color: rgba(46, 213, 115, 0.2); box-shadow: 0 0 5px rgba(46, 213, 115, 0.1); }
}
.breathing-green {
animation: neonBreathGreen 2s infinite ease-in-out !important;
border-style: solid !important;
}
/* CARTE EN MOUVEMENT (GHOST) */
.drag-ghost-active {
opacity: 0.3 !important;
outline: 2px solid var(--neon-green) !important;
box-shadow: 0 0 30px var(--neon-green), inset 0 0 20px var(--neon-green) !important;
}
/* CARTE RESTANT AU SOL (SOURCE) */
.drag-source-blurred {
filter: blur(6px) grayscale(100%);
opacity: 0.4 !important;
transition: filter 0.3s ease;
}
/* Force l'état respirant sur les dossiers cibles */
.case-list-item.breathing-green {
border-color: var(--neon-green) !important;
animation: neonBreathGreen 1.5s infinite ease-in-out !important;
}
/* --- SEARCH SCOPE SLIDER --- */
.scope-slider-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.scope-labels {
display: flex;
justify-content: space-between;
font-size: 9px;
color: var(--neon-cyan);
font-family: var(--font-code);
font-weight: bold;
}
.cyber-range-scope {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: #111;
border: 1px solid #333;
border-radius: 2px;
outline: none;
}
.cyber-range-scope::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: var(--neon-cyan);
border: 1px solid #fff;
cursor: pointer;
box-shadow: 0 0 10px var(--neon-cyan);
transform: rotate(45deg); /* Losange tactique */
margin-top: -5px; /* Centrage */
}
/* Couleurs dynamiques par niveau (Géré par JS, classes d'appoint) */
.scope-level-1::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 5px #fff; }
.scope-level-4::-webkit-slider-thumb { background: var(--neon-magenta); box-shadow: 0 0 10px var(--neon-magenta); }
.scope-level-5::-webkit-slider-thumb { background: var(--neon-red); box-shadow: 0 0 15px var(--neon-red); border-color: var(--neon-red); }
.scope-ticks {
display: flex;
justify-content: space-between;
font-size: 8px;
color: #444;
padding: 0 2px;
}
/* --- 3D NEURAL VIEW STYLES & HUD --- */
/* BARRE DE RECHERCHE NEURALE (STUDIO LAYOUT) */
.neural-search-container {
position: absolute;
top: 30px; left: 50%; transform: translateX(-50%);
width: 900px; /* Plus large pour tout contenir */
height: 60px;
z-index: 2000;
display: flex;
align-items: center;
justify-content: space-between; /* Input Gauche, Filtres Droite */
background: rgba(10, 15, 20, 0.95);
border: 1px solid rgba(0, 243, 255, 0.3);
border-left: 4px solid var(--neon-cyan);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
border-radius: 4px;
padding: 0 20px;
animation: slideDown 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slideDown { from { top: -100px; opacity:0; } to { top: 30px; opacity:1; } }
.ns-wrapper {
display: flex; align-items: center;
flex: 1; /* Prend l'espace gauche */
height: 100%;
position: relative;
/* On retire les bordures/background ici car c'est le conteneur parent qui gère */
border: none;
background: transparent;
box-shadow: none;
padding: 0;
}
.ns-icon { font-size: 18px; margin-right: 15px; color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan); filter: none; }
.ns-input {
background: transparent; border: none; outline: none;
color: #fff; font-family: var(--font-display);
font-size: 14px; letter-spacing: 2px;
width: 100%; text-transform: uppercase;
}
.ns-input::placeholder { color: rgba(255,255,255,0.2); }
/* AUTOCOMPLETE (Ajusté pour le nouveau layout) */
.ns-autocomplete {
position: absolute; top: 60px; left: 0; width: 100%;
background: rgba(5, 10, 15, 0.98);
border: 1px solid rgba(0, 243, 255, 0.3);
border-top: none;
max-height: 300px; overflow-y: auto;
display: none;
z-index: 2001;
}
.ns-autocomplete.active { display: block; }
.ns-item {
padding: 10px 15px;
color: #888; font-family: var(--font-code); font-size: 12px;
cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05);
display: flex; justify-content: space-between;
}
.ns-item:hover { background: rgba(0, 243, 255, 0.1); color: #fff; }
.ns-item .match { color: var(--neon-cyan); font-weight: bold; }
/* FILTRES À DROITE (Alignés) */
.ns-layers {
display: flex; gap: 5px;
border-left: 1px solid rgba(255,255,255,0.1);
padding-left: 20px;
height: 60%;
align-items: center;
}
.ns-layer-badge {
font-family: var(--font-code); font-size: 9px;
padding: 4px 8px; border-radius: 2px;
background: rgba(0,0,0,0.4); border: 1px solid #333;
color: #666; transition: all 0.2s;
cursor: pointer; text-transform: uppercase;
}
.ns-layer-badge:hover, .ns-layer-badge.active {
border-color: var(--neon-cyan); color: var(--neon-cyan);
background: rgba(0, 243, 255, 0.05);
box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}
/* --- NAVIGATION SYSTEM V12 (FIXED HOVER & TACTICAL ICONS) --- */
.icon-btn {
position: relative;
width: 38px;
height: 38px;
background-color: rgba(0, 0, 0, 0.6) !important; /* Fond sombre par défaut */
border: 1px solid rgba(0, 243, 255, 0.3);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease-in-out;
overflow: hidden;
}
/* L'icône (Le masque) */
.icon-btn .nav-icon {
width: 22px;
height: 22px;
background-color: var(--neon-cyan); /* Couleur de l'icône OFF */
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
transition: background-color 0.15s ease;
}
/* --- ÉTAT HOVER & ACTIF (L'INVERSION) --- */
.icon-btn:hover,
.icon-btn.active-deck {
background-color: var(--neon-cyan) !important; /* LE FOND DEVIENT CYAN */
border: 1px solid #ffffff !important; /* CONTOUR BLANC */
box-shadow: 0 0 15px #ffffff !important; /* GLOW BLANC */
}
.icon-btn:hover .nav-icon,
.icon-btn.active-deck .nav-icon {
background-color: #000000 !important; /* L'ICÔNE DEVIENT NOIRE */
}
/* --- BIBLIOTHÈQUE D'ICÔNES (REMPLAÇABLES) --- */
/* RADAR : Signal Radio */
.icon-radar { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
/* LIBRARY : Grille de données */
.icon-library { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
/* CASES : Dossier de preuves */
.icon-cases { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
/* WRITER : Plume Tech */
.icon-writer { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
/* CODEX : Archive Scellée */
.icon-codex { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
/* BROADCAST : Antenne Uplink */
.icon-broadcast { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
/* SETTINGS : Engrenage */
.icon-settings { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
/* SCAN : Rotation cinétique pour le scan d'onglets */
.icon-scan {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* ARM ALL : Eclair de puissance pour l'armement massif */
.icon-arm-all {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* --- LOGIQUE DE COULEURS DÉDIÉES --- */
/* CODEX (Vert) */
#nav-btn-codex:not(.active-deck) { color: var(--neon-green); border-color: var(--neon-green-dim); }
#nav-btn-codex.active-deck { background: var(--neon-green) !important; box-shadow: 0 0 15px var(--neon-green) !important; }
/* BROADCAST (Magenta) */
#nav-btn-broadcast:not(.active-deck) { color: var(--neon-magenta); border-color: var(--neon-magenta-dim); }
#nav-btn-broadcast.active-deck { background: var(--neon-magenta) !important; box-shadow: 0 0 15px var(--neon-magenta) !important; }
/* NEURAL 3D (Blanc) */
#nav-btn-3d:not(.active-deck) { color: #fff; border-color: rgba(255,255,255,0.2); }
#nav-btn-3d.active-deck { background: #fff !important; color: #000 !important; box-shadow: 0 0 15px #fff !important; }
/* HUD 3D Overlay Elements */
#hud-3d-overlay {
pointer-events: none;
user-select: none;
}
/* --- LHDSR NEURAL BOARD (2.5D CANVAS) --- */
/* --- LHDSR NEURAL BOARD (2.5D CANVAS) --- */
/* ARCHITECTURE: COMMAND CENTER (HIGH VISIBILITY) */
/* Conteneur Principal (Viewport) - ATMOSPHERE BLUEPRINT FORCÉE */
.neural-board-wrapper {
position: absolute; /* Force l'ancrage */
top: 0; left: 0;
width: 100vw;
height: 100vh;
/* FOND SOLIDE : Bleu Nuit Technique (Code Hex sûr) */
background-color: #0f172a !important;
/* PATTERN : Grille Cyan + Vignette */
background-image:
linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px),
radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0) 0%, #020617 100%);
background-size: 100px 100px, 100px 100px, 100% 100%;
background-attachment: fixed;
overflow: hidden;
cursor: grab;
z-index: 0;
}
@keyframes matrix-drift {
0% { background-position: 0 0, 0 0, 0 0, 0 0; }
100% { background-position: 0 60px, 0 60px, 50px 50px, -50px -50px; }
}
.neural-board-wrapper:active {
cursor: grabbing;
}
/* Le Monde (Layer transformé) */
.nb-world-layer {
position: absolute;
top: 0; left: 0;
transform-origin: 0 0; /* Pivot en haut à gauche pour simplifier les maths */
will-change: transform; /* Optimisation GPU */
}
/* Couche SVG (Connecteurs) */
.nb-connections-layer {
position: absolute;
top: 0; left: 0;
overflow: visible; /* Laisser dépasser les lignes */
pointer-events: none; /* Click-through */
z-index: 0;
}
.nb-link {
stroke: #38bdf8; /* Sky Blue 400 - Teinte technique standard */
stroke-width: 2px;
opacity: 0.25; /* Arrière-plan strict : ne doit pas gêner la lecture */
vector-effect: non-scaling-stroke; /* Épaisseur constante au zoom */
fill: none;
filter: none; /* Suppression du glow pour netteté maximale */
}
/* --- SIGNALÉTIQUE DE ZONE (PALANTIR STYLE) --- */
.nb-cluster-label {
position: absolute;
pointer-events: none;
font-family: var(--font-display);
font-size: 24px;
font-weight: 900;
color: rgba(255, 255, 255, 0.15); /* Discret de près */
text-transform: uppercase;
letter-spacing: 10px;
white-space: nowrap;
z-index: 0; /* Derrière les fiches */
transform: translate(-50%, -100%);
padding-bottom: 40px;
border-bottom: 2px solid rgba(56, 189, 248, 0.1);
/* L'étiquette devient plus brillante au zoom out via JS si besoin,
ou reste constante comme un repère géographique */
}
.nb-cluster-label.high-threat {
color: rgba(239, 68, 68, 0.15);
border-bottom-color: rgba(239, 68, 68, 0.1);
}
/* --- NOEUDS DE DONNÉES (SURFACES TACTIQUES) --- */
.nb-node {
position: absolute;
width: 240px; /* Largeur confort */
height: 140px;
/* SURFACE DE VERRE (Plus claire que le fond) */
/* On utilise un bleu-gris semi-opaque très lisible */
background: rgba(30, 41, 59, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
/* CONTRASTE BORDURE (Fin et précis) */
border: 1px solid rgba(148, 163, 184, 0.3); /* Gris acier */
border-top: 2px solid rgba(255, 255, 255, 0.1); /* Reflet haut */
border-left: 4px solid var(--neon-cyan); /* Indicateur couleur */
border-radius: 6px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
/* ÉLÉVATION (L'ombre qui crée la 3D) */
/* Une ombre diffuse forte pour détacher l'élément du sol */
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.6),
0 8px 10px -6px rgba(0, 0, 0, 0.4);
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s;
user-select: none;
z-index: 10;
/* Centrage */
margin-left: -120px;
margin-top: -70px;
}
/* INTERACTION PHYSIQUE */
.nb-node:hover {
z-index: 100;
/* La carte "monte" vers l'utilisateur */
transform: scale(1.05) translateY(-5px);
/* L'ombre s'agrandit */
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.8),
0 0 0 1px var(--neon-cyan); /* Halo de sélection */
background: rgba(51, 65, 85, 1); /* S'éclaircit encore au survol */
cursor: pointer;
}
/* VARIANTE : HAUTE GRAVITÉ (ROUGE) */
.nb-node.high-threat {
border-left-color: var(--neon-red);
border-color: rgba(255, 42, 42, 0.3);
background: rgba(30, 10, 10, 0.65);
box-shadow: 0 0 15px rgba(255, 42, 42, 0.15);
}
.nb-node.high-threat:hover {
border-color: var(--neon-red);
box-shadow: 0 0 40px rgba(255, 42, 42, 0.5);
}
/* VARIANTE : WEB (VERT) */
.nb-node.type-web {
border-left-color: var(--neon-green);
border-color: rgba(0, 255, 157, 0.3);
background: rgba(5, 20, 10, 0.65);
}
/* --- NOEUDS DE DONNÉES : PREMIUM GAME CARD (V3) --- */
.nb-node-premium {
position: absolute;
width: 260px;
height: 160px; /* Plus compact verticalement pour laisser place au tiroir */
background: #020406;
border: 1px solid #334155;
border-radius: 6px;
display: flex;
flex-direction: column;
overflow: visible; /* CRITIQUE : Pour laisser sortir le tiroir */
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, border-color 0.2s;
user-select: none;
z-index: 10;
/* Centrage pivot */
margin-left: -130px;
margin-top: -80px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* ÉTAT HOVER : ACTIVATION */
.nb-node-premium:hover {
z-index: 1000; /* Passe tout devant */
transform: scale(1.1);
border-color: var(--neon-cyan);
box-shadow: 0 0 0 2px var(--neon-cyan), 0 20px 50px rgba(0,0,0,0.8);
cursor: pointer;
}
/* --- COUCHE VISUELLE (THUMBNAIL) --- */
.nb-visual {
height: 100px;
width: 100%;
background-size: cover;
background-position: center;
position: relative;
border-radius: 5px 5px 0 0;
}
.nb-gradient-overlay {
position: absolute; inset: 0;
/* Dégradé pour rendre le texte lisible en bas */
background: linear-gradient(to bottom, transparent 0%, rgba(2, 4, 6, 1) 100%);
}
.nb-id-badge {
position: absolute; top: 6px; right: 6px;
background: rgba(0,0,0,0.8);
color: #666;
font-family: var(--font-code);
font-size: 9px;
padding: 2px 4px;
border-radius: 2px;
border: 1px solid #333;
}
/* --- COUCHE INFO --- */
.nb-info {
padding: 10px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #0b1217;
border-radius: 0 0 5px 5px;
position: relative;
z-index: 2; /* Au-dessus du tiroir */
}
.nb-title-premium {
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nb-meta-row {
display: flex; justify-content: space-between; align-items: center;
margin-top: 5px;
}
.nb-channel {
font-size: 10px; color: var(--neon-cyan); text-transform: uppercase;
font-weight: bold;
}
.nb-score-badge {
background: #1e293b; color: #fff;
font-family: var(--font-display); font-size: 12px;
padding: 2px 6px; border-radius: 2px;
}
.nb-score-badge.alert { color: var(--neon-red); border: 1px solid var(--neon-red); }
/* --- LE TIROIR HOLOGRAPHIQUE (DRAWER) --- */
.nb-drawer {
position: absolute;
top: 100%; /* Juste en dessous de la carte */
left: 2px; right: 2px; /* Légèrement plus petit */
background: rgba(10, 20, 30, 0.95);
border: 1px solid var(--neon-cyan);
border-top: none;
border-radius: 0 0 6px 6px;
padding: 10px;
/* Animation State : Caché */
opacity: 0;
transform: translateY(-20px);
pointer-events: none;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 10px 20px rgba(0, 243, 255, 0.15);
backdrop-filter: blur(10px);
z-index: 1;
}
/* TRIGGER ANIMATION */
.nb-node-premium:hover .nb-drawer {
opacity: 1;
transform: translateY(0); /* Glisse vers le bas */
}
.nb-drawer-header {
display: flex; justify-content: space-between;
font-size: 9px; color: #888; border-bottom: 1px solid #333;
padding-bottom: 4px; margin-bottom: 6px;
text-transform: uppercase; letter-spacing: 1px;
}
.nb-drawer-stats {
display: flex; flex-direction: column; gap: 4px;
}
.nb-stat-row {
display: flex; justify-content: space-between;
font-family: var(--font-code); font-size: 10px; color: #ccc;
}
.nb-stat-val { color: var(--neon-cyan); font-weight: bold; }
/* VARIANTE WEB */
.nb-node-premium.type-web { border-color: #059669; }
.nb-node-premium.type-web:hover { border-color: var(--neon-green); box-shadow: 0 0 0 2px var(--neon-green), 0 20px 50px rgba(0,0,0,0.8); }
.nb-node-premium.type-web .nb-channel { color: var(--neon-green); }
.nb-node-premium.type-web .nb-drawer { border-color: var(--neon-green); box-shadow: 0 10px 20px rgba(0, 255, 157, 0.15); }
/* Intro Screen Fix (Pour être sûr qu'il disparaisse) */
#neural-intro-screen {
background: rgba(0,0,0,0.9); /* Plus opaque pour cacher le chargement */
}
/* Contenu Interne */
.holo-thumb {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.7;
transition: opacity 0.3s;
}
.holo-overlay {
position: absolute; bottom: 0; left: 0; width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
padding: 15px;
pointer-events: none;
}
.holo-title {
font-family: 'Orbitron', sans-serif;
color: #fff; font-size: 14px;
margin-bottom: 5px;
text-shadow: 0 0 5px currentColor;
}
.holo-meta {
font-size: 10px; color: #aaa;
text-transform: uppercase;
}
/* Player YouTube intégré */
.holo-player-frame {
width: 100%; height: 60%;
border: none;
background: #000;
}
.holo-dashboard {
padding: 20px;
display: flex; gap: 20px;
height: 40%;
border-top: 1px solid #333;
}
.holo-col { flex: 1; overflow-y: auto; font-size: 11px; color: #ccc; line-height: 1.4; }
.holo-col h4 { color: var(--neon-cyan); margin: 0 0 10px 0; border-bottom: 1px dashed #333; padding-bottom: 5px; }
/* COUCHE WEBGL (RENDU PARTICULES) */
.webgl-layer {
position: absolute; top: 0; left: 0;
z-index: 0;
pointer-events: none; /* Laisse passer les clics vers le CSS Renderer qui gère les controls */
}
/* COUCHE CSS3D (INTERACTION & LABELS) */
.css3d-layer {
position: absolute; top: 0; left: 0;
z-index: 1;
/* C'est ICI que OrbitControls et Raycasting écoutent */
/* Les éléments enfants (labels) auront pointer-events: none par défaut pour ne pas bloquer le raycaster */
}
/* L'ÉTIQUETTE FLOTTANTE (LABEL) */
.holo-label-3d {
/* ... styles existants ... */
pointer-events: none; /* CRITIQUE : Ne doit pas bloquer le Raycaster souris */
user-select: none;
/* ... reste du style ... */
}
/* SÉCURITÉ INTRO */
#neural-intro-screen {
z-index: 100; /* Au-dessus de tout le canvas */
pointer-events: auto; /* Doit capter le clic START */
}
#neural-intro-screen.dismissed {
pointer-events: none; /* Une fois parti, on clique au travers */
}
/* --- WRITER LAB CONTROLS --- */
/* Légendes sous les sliders */
.range-legend {
display: flex;
justify-content: space-between;
font-size: 8px;
color: #444;
margin-top: 2px;
font-family: var(--font-code);
}
/* 1. SLIDER TEMPÉRATURE (Multi-Color Gradient) */
.range-temp {
background: linear-gradient(90deg, #001133 0%, #00f3ff 33%, #ffd700 66%, #ff2a2a 100%);
height: 6px;
border-radius: 3px;
}
.range-temp::-webkit-slider-thumb {
background: #fff;
box-shadow: 0 0 10px #fff;
border: 2px solid #000;
}
/* 2. SLIDER POLITIQUE (Spectrum) */
.range-political {
background: linear-gradient(90deg, #ff4d4d 0%, #ff8888 20%, #e0e0e0 50%, #8888ff 80%, #4d4dff 100%);
height: 6px;
}
/* 3. SLIDER CYNISME (Dark) */
.range-cynism {
background: linear-gradient(90deg, #333 0%, #a020f0 100%); /* Gris vers Violet Acide */
}
/* 4. SLIDER ESPOIR (Light) */
.range-hope {
background: linear-gradient(90deg, #333 0%, #ffd700 100%); /* Gris vers Or */
}
/* --- TIME RANGE REGION --- */
#timeline-range-region {
position: absolute;
height: 100%;
top: 0;
background: repeating-linear-gradient(
45deg,
rgba(0, 243, 255, 0.2),
rgba(0, 243, 255, 0.2) 10px,
rgba(0, 243, 255, 0.3) 10px,
rgba(0, 243, 255, 0.3) 20px
);
border-top: 1px solid var(--neon-cyan);
border-bottom: 1px solid var(--neon-cyan);
pointer-events: none;
z-index: 1;
box-shadow: 0 0 10px var(--neon-cyan-dim);
animation: strip-flow 20s linear infinite;
}
@keyframes strip-flow { from { background-position: 0 0; } to { background-position: 100px 0; } }
/* --- TARGET SNIPER BUTTON --- */
.target-btn {
border-color: var(--neon-magenta) !important;
color: var(--neon-magenta) !important;
position: relative;
}
.target-btn:hover {
box-shadow: 0 0 15px var(--neon-magenta);
background: rgba(255, 0, 255, 0.1) !important;
}
.target-btn.scanning::after {
content: '';
position: absolute; inset: -2px;
border: 1px dashed var(--neon-magenta);
border-radius: 50%;
animation: rotate-target 2s infinite linear;
}
@keyframes rotate-target { to { transform: rotate(360deg); } }
/* --- THEATER LAUNCH BUTTON (PREMIUM) --- */
.theater-launch-btn {
background: linear-gradient(90deg, rgba(0, 243, 255, 0.05) 0%, rgba(0, 0, 0, 0.8) 100%);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
height: 32px;
padding: 0 15px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-family: 'Orbitron', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(0, 243, 255, 0.15), inset 0 0 5px rgba(0, 243, 255, 0.1);
position: relative;
overflow: hidden;
margin-left: 10px;
}
.theater-launch-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent);
transform: skewX(-20deg);
animation: theater-shine 4s infinite;
}
@keyframes theater-shine {
0%, 80% { left: -100%; }
100% { left: 200%; }
}
.theater-launch-btn:hover {
background: var(--neon-cyan);
color: #000;
box-shadow: 0 0 20px var(--neon-cyan);
transform: scale(1.05);
}
.theater-launch-btn:hover svg {
filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}
/* --- BOUTON D'ACTION MODIFIÉ EN MODE TARGET --- */
.cyber-btn.targeted-mode {
border-color: var(--neon-magenta);
color: var(--neon-magenta);
background: rgba(255, 0, 255, 0.05);
}
.cyber-btn.targeted-mode::before {
content: '[CIBLÉ] ';
font-weight: bold;
}
/* MARKER CINETIK (Mauve Électrique) */
.marker-kinetic_decode {
color: #b026ff; /* Neon Purple */
box-shadow: 0 0 8px #b026ff;
z-index: 50; /* Au-dessus des autres */
}
/* ÉTIQUETTE CINETIK (Badge Dossier) */
.d-tag.cinetik {
border-color: #b026ff;
color: #b026ff;
background: rgba(176, 38, 255, 0.1);
box-shadow: 0 0 10px rgba(176, 38, 255, 0.2);
animation: pulse-purple 2s infinite;
}
@keyframes pulse-purple {
0% { box-shadow: 0 0 5px rgba(176, 38, 255, 0.2); }
50% { box-shadow: 0 0 15px rgba(176, 38, 255, 0.5); }
100% { box-shadow: 0 0 5px rgba(176, 38, 255, 0.2); }
}
/* --- BROADCAST IDENTITY (MULTI-ACCOUNT) --- */
.broadcast-identity-box {
padding: 10px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--neon-magenta-dim);
margin: 0 10px;
}
.account-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-height: 120px;
overflow-y: auto;
}
.account-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #333;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
min-width: 100px;
}
.account-chip:hover {
border-color: var(--neon-magenta);
background: rgba(255, 0, 255, 0.05);
}
.account-chip.selected {
border-color: var(--neon-magenta);
background: rgba(255, 0, 255, 0.15);
box-shadow: 0 0 15px rgba(255, 0, 255, 0.2);
}
.acc-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #444;
object-fit: cover;
}
.account-chip.selected .acc-avatar {
border-color: var(--neon-magenta);
box-shadow: 0 0 5px var(--neon-magenta);
}
.acc-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.acc-handle {
font-family: var(--font-code);
font-size: 10px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.acc-name {
font-size: 8px;
color: #666;
text-transform: uppercase;
}
.account-chip.skeleton {
animation: pulse 1.5s infinite;
opacity: 0.5;
pointer-events: none;
}
/* --- BROADCAST DECK (SOCIAL COMMAND CENTER) --- */
.broadcast-layout {
display: flex;
height: 100%;
gap: 20px;
padding: 20px;
overflow: hidden;
}
.broadcast-composer {
flex: 2;
display: flex;
flex-direction: column;
}
.broadcast-sidebar {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
}
#broadcast-thread-container {
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
scroll-behavior: smooth;
flex: 1;
}
.broadcast-empty-state {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #444;
font-family: var(--font-code);
text-align: center;
}
/* TWEET CARD (Thread Segment) */
.tweet-card {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #333;
border-left: 2px solid var(--neon-magenta);
padding: 15px;
position: relative;
transition: all 0.2s;
animation: fadeIn 0.3s ease-out;
}
.tweet-card:focus-within {
border-color: var(--neon-magenta);
box-shadow: 0 0 15px rgba(255, 0, 255, 0.1);
}
.tweet-card textarea {
width: 100%;
background: transparent;
border: none;
color: #e0e0e0;
font-family: sans-serif; /* Twitter style font */
font-size: 13px;
line-height: 1.4;
resize: none;
outline: none;
min-height: 60px;
}
.tweet-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
font-size: 10px;
color: #666;
border-top: 1px dashed #222;
padding-top: 5px;
}
.tweet-counter {
font-family: var(--font-code);
}
.tweet-counter.warning { color: var(--neon-gold); }
.tweet-counter.danger { color: var(--neon-red); }
.tweet-media-preview {
margin-top: 10px;
height: 120px;
background: #000;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.tweet-media-preview img {
height: 100%;
object-fit: contain;
}
.tweet-remove-btn {
position: absolute;
top: 5px; right: 5px;
background: transparent;
border: none;
color: #444;
cursor: pointer;
font-size: 14px;
}
.tweet-remove-btn:hover { color: var(--neon-red); }
/* ASSET ARSENAL */
.asset-dropzone {
border: 1px dashed #444;
background: rgba(0,0,0,0.3);
padding: 20px;
text-align: center;
color: #666;
cursor: pointer;
transition: all 0.2s;
font-family: var(--font-code);
}
.asset-dropzone:hover {
border-color: var(--neon-magenta);
color: var(--neon-magenta);
background: rgba(255, 0, 255, 0.05);
}
/* [NEW] ÉTATS RÉACTIFS POUR MISSION IMPORT */
.asset-dropzone.is-dragover {
border-color: var(--neon-green) !important;
background: rgba(0, 255, 157, 0.1) !important;
box-shadow: 0 0 15px rgba(0, 255, 157, 0.2);
}
#import-intel-dropzone .ready {
color: var(--neon-green) !important;
border-color: var(--neon-green) !important;
opacity: 1 !important;
text-shadow: 0 0 5px var(--neon-green);
background: rgba(0, 255, 157, 0.05);
}
.asset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 5px;
overflow-y: auto;
flex: 1; /* Prend l'espace restant */
}
.asset-item {
aspect-ratio: 1;
background: #000;
border: 1px solid #333;
cursor: grab;
position: relative;
transition: all 0.2s;
}
.asset-item:hover { border-color: #fff; }
.asset-item img { width: 100%; height: 100%; object-fit: cover; }
/* UPLINK PANEL */
.broadcast-uplink-panel {
border-top: 1px solid var(--neon-magenta);
background: rgba(20, 0, 20, 0.4);
padding: 15px;
margin-top: auto;
}
.uplink-header {
font-size: 10px;
color: var(--neon-magenta);
letter-spacing: 2px;
margin-bottom: 10px;
}
.uplink-monitor {
background: #000;
border: 1px solid #333;
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-code);
}
.uplink-led {
width: 8px; height: 8px;
background: #333;
border-radius: 50%;
box-shadow: 0 0 2px #000;
}
.uplink-led.idle { background: #333; }
.uplink-led.live { background: var(--neon-red); box-shadow: 0 0 10px var(--neon-red); animation: blink 0.5s infinite; }
.uplink-led.success { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
.broadcast-footer-stats {
padding: 10px;
background: #000;
border-top: 1px solid #333;
display: flex;
justify-content: space-between;
font-size: 10px;
color: #666;
font-family: var(--font-code);
}
/* --- CASE COMMAND DECK --- */
.case-browser-layout {
display: flex;
height: 100%;
overflow: hidden;
background: #050505;
}
/* Sidebar */
.case-sidebar {
width: 300px;
background: rgba(10, 15, 20, 0.9);
border-right: 1px solid var(--neon-gold);
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.case-search-box {
padding: 10px;
border-bottom: 1px solid #333;
}
.case-list-scroll {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.case-sidebar-footer {
padding: 15px;
border-top: 1px solid #333;
background: rgba(0,0,0,0.5);
}
/* Items Liste */
.case-list-item {
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 8px;
background: rgba(255, 255, 255, 0.02);
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.case-list-item:hover {
background: rgba(255, 215, 0, 0.05);
border-color: rgba(255, 215, 0, 0.5);
}
.case-list-item.active {
background: rgba(255, 215, 0, 0.1);
border-color: var(--neon-gold);
box-shadow: inset 4px 0 0 var(--neon-gold);
}
.cli-title {
font-family: var(--font-display);
font-size: 11px;
color: #e0e0e0;
margin-bottom: 4px;
}
.case-list-item.active .cli-title { color: var(--neon-gold); }
.cli-meta {
font-family: var(--font-code);
font-size: 9px;
color: #666;
display: flex;
justify-content: space-between;
}
/* Main View */
.case-main-view {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: radial-gradient(circle at top left, #0a0f14 0%, #000 100%);
position: relative;
height: 100%;
min-height: 0; /* Vital pour le scroll Flexbox */
}
#cc-content-container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
/* --- THEME: FORENSIC BLUEPRINT (CASE DECK UPGRADE) --- */
/* 1. COMMAND RAIL (Header) */
.cc-command-rail {
height: 80px;
padding: 0 30px;
background: linear-gradient(180deg, rgba(20, 25, 30, 0.95) 0%, rgba(10, 15, 20, 0.9) 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
z-index: 20;
flex-shrink: 0;
}
.cc-rail-left { display: flex; flex-direction: column; gap: 6px; }
.cc-rail-right { display: flex; align-items: center; gap: 12px; }
/* TITRE EDITABLE */
.cc-rail-title {
font-family: 'Orbitron', sans-serif;
font-size: 20px;
font-weight: 700;
color: #e2e8f0;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.3); /* Gold Glow */
display: flex;
align-items: center;
gap: 12px;
}
.cc-rail-meta {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
color: #64748b;
display: flex;
gap: 15px;
text-transform: uppercase;
}
.cc-meta-tag {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.03);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.cc-meta-tag.active::before {
content: ''; width: 6px; height: 6px;
background: var(--neon-green);
border-radius: 50%;
box-shadow: 0 0 5px var(--neon-green);
}
/* BOUTONS ACTIONS CHIRURGICAUX (V2 NEON-GHOST) */
.cc-action-btn {
width: 38px; height: 38px;
background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.2) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px; /* Plus carré, plus tech */
color: #64748b;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
}
.cc-action-btn svg { width: 18px; height: 18px; stroke-width: 1.5; transition: transform 0.3s ease; }
/* Hover Générique (Cyan) */
.cc-action-btn:hover {
background: rgba(0, 243, 255, 0.05);
border-color: var(--neon-cyan);
color: var(--neon-cyan);
box-shadow: 0 0 20px rgba(0, 243, 255, 0.1), inset 0 0 10px rgba(0, 243, 255, 0.05);
}
.cc-action-btn:hover svg { transform: scale(1.1); filter: drop-shadow(0 0 5px var(--neon-cyan)); }
/* Variant: GOLD (Writer) */
.cc-action-btn.gold:hover {
background: rgba(255, 215, 0, 0.05);
border-color: var(--neon-gold);
color: var(--neon-gold);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
}
.cc-action-btn.gold:hover svg { filter: drop-shadow(0 0 5px var(--neon-gold)); }
/* Variant: NUCLEAR (Delete) - Design "Safety Switch" */
.cc-action-btn.danger {
border-color: rgba(255, 42, 42, 0.3);
color: rgba(255, 42, 42, 0.7);
margin-left: 10px; /* Séparation physique */
}
.cc-action-btn.danger::before {
/* Hachures de sécurité */
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,0,0,0.1) 2px, rgba(255,0,0,0.1) 4px);
opacity: 0; transition: opacity 0.3s;
}
.cc-action-btn.danger:hover {
background: rgba(20, 0, 0, 0.8);
border-color: var(--neon-red);
color: var(--neon-red);
box-shadow: 0 0 25px rgba(255, 42, 42, 0.4), inset 0 0 15px rgba(255, 0, 0, 0.2);
transform: translateY(0) scale(1.05); /* Effet de pression */
}
.cc-action-btn.danger:hover::before { opacity: 1; }
.cc-action-btn.danger:hover svg {
filter: drop-shadow(0 0 8px var(--neon-red));
transform: rotate(90deg); /* Animation mécanique */
}
/* Variant: EDIT TITLE (Ghost Pen) */
.cc-ghost-edit-btn {
width: 24px; height: 24px;
background: transparent; border: none;
color: rgba(255,255,255,0.2);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
margin-left: 8px;
}
.cc-ghost-edit-btn:hover {
color: var(--neon-cyan);
transform: scale(1.2) rotate(-15deg);
filter: drop-shadow(0 0 5px var(--neon-cyan));
}
/* 2. BRIEFING MODULE */
.cc-briefing-box {
padding: 25px 30px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
background: rgba(255, 215, 0, 0.01); /* Tint Gold very subtle */
max-height: 180px;
overflow-y: auto;
flex-shrink: 0;
position: relative;
}
.cc-section-title {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
color: var(--neon-gold);
margin-bottom: 12px;
letter-spacing: 1px;
text-transform: uppercase;
display: flex; justify-content: space-between;
}
.cc-brief-text {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
color: #cbd5e1; /* Slate 300 */
line-height: 1.6;
white-space: pre-wrap;
max-width: 900px;
}
.cc-evidence-area {
flex: 1;
overflow-y: auto;
padding: 30px;
min-height: 0;
background: radial-gradient(circle at top center, rgba(15, 23, 42, 0.4) 0%, transparent 80%);
}
/* --- CASE COMMANDER V3 : WORKSPACE REDESIGN --- */
.cc-workspace {
display: flex;
flex: 1;
overflow: hidden;
background: #050505;
}
.cc-synthesis-col {
flex: 7;
padding: 40px;
overflow-y: auto;
background: radial-gradient(circle at top left, rgba(0,20,40,0.2) 0%, transparent 80%);
}
.cc-sources-col {
flex: 3;
padding: 20px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.cc-synthesis-content {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #cbd5e1;
line-height: 1.6; /* Compaction de l'interligne */
white-space: pre-wrap;
padding: 30px 60px 80px 60px; /* Augmentation des marges latérales pour centrer le contenu */
max-width: 1000px;
margin: 0 auto;
}
.cyber-icon-thumb {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-family: 'Orbitron', sans-serif;
background: #050a0f;
}
.cyber-icon-thumb.x-thumb { color: #fff; background: #000; }
.cyber-icon-thumb.web-thumb { color: var(--neon-green); background: #001100; border-bottom: 2px solid var(--neon-green); }
/* 3. UNIFIED EVIDENCE CARDS (PRO STYLE) */
.lhdsr-card-pro {
background: rgba(15, 20, 25, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
cursor: pointer;
}
.lhdsr-card-pro::before {
/* Backlight Focus Effect */
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, var(--focus-color, rgba(0,243,255,0.15)) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
pointer-events: none;
}
.lhdsr-card-pro:hover {
border-color: var(--focus-color, var(--neon-cyan));
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
.lhdsr-card-pro:hover::before { opacity: 0.4; }
.lcp-thumb-box {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #020617;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
z-index: 1;
overflow: hidden;
}
.lcp-thumb {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(80%) contrast(1.1);
transition: filter 0.4s ease, transform 0.4s ease;
}
.lhdsr-card-pro:hover .lcp-thumb {
filter: grayscale(0%) contrast(1.1);
transform: scale(1.05);
}
.lcp-content {
padding: 14px;
flex: 1;
display: flex;
flex-direction: column;
z-index: 1;
background: rgba(2, 6, 23, 0.4);
}
.lcp-title {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
color: #e2e8f0;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lcp-meta {
font-family: 'Roboto Mono', monospace;
font-size: 9px;
color: #64748b;
display: flex;
justify-content: space-between;
margin-top: auto;
text-transform: uppercase;
}
/* Edit Badge Overlay */
.lcp-edit-badge {
position: absolute;
top: 8px; right: 8px;
background: rgba(0, 0, 0, 0.9);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
padding: 4px;
border-radius: 4px;
opacity: 0;
transform: translateY(-5px);
transition: all 0.2s ease;
cursor: pointer;
z-index: 10;
}
.lcp-edit-badge:hover { background: var(--neon-cyan); color: #000; }
.lhdsr-card-pro:hover .lcp-edit-badge { opacity: 1; transform: translateY(0); }
/* Grille compacte pour les preuves */
.forensic-grid.small-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
}
.small-grid .dossier-card {
height: 280px;
}
.small-grid .d-thumb {
height: 120px;
}
/* --- LHDSR VIEW: TRON IDENTITY --- */
.intro-screen {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 5000;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at center, transparent 0%, #000 120%); /* Vignette subtile */
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
perspective: 1000px;
}
.intro-screen.dismissed {
opacity: 0;
transform: scale(1.5); /* Effet d'entrée dans l'écran */
pointer-events: none;
}
.intro-content {
text-align: center;
z-index: 2;
pointer-events: auto;
/* Effet de profondeur UI */
transform: translateZ(50px);
}
.mega-title {
font-family: 'Orbitron', sans-serif; /* Police Tech */
font-size: 100px;
font-weight: 200; /* Très fin, élégant */
color: #fff;
margin: 0;
letter-spacing: 15px;
text-transform: uppercase;
/* TRON GLOW : Double couche de cyan */
text-shadow:
0 0 10px var(--neon-cyan),
0 0 20px var(--neon-cyan),
0 0 40px var(--neon-cyan),
0 0 80px var(--neon-cyan);
animation: electric-flicker 4s infinite alternate;
}
.chrome-text {
/* Le mot VIEW est solide */
font-weight: 900;
color: #000;
background: #fff;
padding: 0 10px;
box-shadow: 0 0 20px var(--neon-cyan);
}
.sub-title {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
letter-spacing: 12px;
color: var(--neon-cyan);
margin-top: 20px;
opacity: 0.8;
border-top: 1px solid var(--neon-cyan);
border-bottom: 1px solid var(--neon-cyan);
padding: 10px 0;
width: 100%;
animation: scan-width 3s ease-in-out infinite;
}
@keyframes scan-width {
0%, 100% { clip-path: inset(0 0 0 0); opacity: 0.8; }
50% { clip-path: inset(0 30% 0 30%); opacity: 0.4; }
}
@keyframes electric-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 10px var(--neon-cyan),
0 0 20px var(--neon-cyan),
0 0 40px var(--neon-cyan);
opacity: 1;
}
20%, 24%, 55% {
text-shadow: none;
opacity: 0.5; /* Micro coupure électrique */
}
}
.press-start-btn {
margin-top: 60px;
background: rgba(0, 243, 255, 0.1);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
padding: 15px 60px;
font-family: 'Rajdhani', sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 4px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
text-transform: uppercase;
}
.press-start-btn::before {
/* Barre de chargement énergétique */
content: '';
position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
background: var(--neon-cyan);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.press-start-btn:hover {
background: var(--neon-cyan);
color: #000;
box-shadow: 0 0 30px var(--neon-cyan);
letter-spacing: 8px; /* Expansion cinétique */
}
.press-start-btn:hover::before {
transform: scaleX(1);
}
/* Suppression des anciens éléments rétro */
.intro-scanlines, .retro-grid-floor { display: none; }
/* --- 3D TARGETING HUD --- */
/* L'étiquette flottante (Label) */
.holo-label-3d {
background: rgba(5, 10, 15, 0.95);
border: 1px solid var(--neon-cyan);
border-left: 4px solid var(--neon-cyan);
padding: 10px 15px;
font-family: 'Roboto Mono', monospace;
color: #fff;
pointer-events: none;
user-select: none;
box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
width: 250px;
font-size: 10px;
clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
/* Animation State (Invisible par défaut) */
opacity: 0;
transform: scale(0.8) translateY(20px);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* État Visible (Activé par JS) */
.holo-label-3d.visible {
opacity: 1;
transform: scale(1) translateY(0);
}
.holo-label-3d.hostile { border-color: var(--neon-red); box-shadow: 0 0 20px rgba(255, 42, 42, 0.3); border-left-color: var(--neon-red); }
.holo-label-3d.web { border-color: var(--neon-green); box-shadow: 0 0 20px rgba(0, 255, 157, 0.3); }
.hl-title {
font-family: 'Orbitron', sans-serif;
font-weight: bold;
font-size: 12px;
margin-bottom: 5px;
text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-meta {
color: #888;
display: flex; justify-content: space-between;
}
.hl-score { font-weight: bold; }
/* --- SIGNALÉTIQUE DE ZONE (MAP HEADERS) --- */
.nb-cluster-label {
position: absolute;
pointer-events: none;
font-family: var(--font-display);
font-size: 32px; /* Taille standard de titre */
font-weight: 700;
/* COULEUR : Blanc technique visible (plus de transparence excessive) */
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 0 20px rgba(0, 0, 0, 0.8); /* Ombre pour détacher du fond */
text-transform: uppercase;
letter-spacing: 4px;
white-space: nowrap;
z-index: 0;
/* Ligne de soulignement technique */
border-bottom: 2px solid rgba(56, 189, 248, 0.3);
padding-bottom: 10px;
/* Centrage visuel */
transform: translateX(-50%);
text-align: center;
}
/* VARIANTE : MENACE */
.nb-cluster-label.high-threat {
color: rgba(239, 68, 68, 0.6);
border-bottom-color: rgba(239, 68, 68, 0.4);
text-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}
/* --- DOF & FOCUS SYSTEM (CINEMATIC PHYSICS) --- */
/* LOGIQUE DE GROUPE : Quand une carte est survolée, les autres réagissent */
.nb-world-layer:has(.nb-node-premium:hover) .nb-node-premium:not(:hover) {
/* 1. Flou optique (Bokeh) */
filter: blur(4px) brightness(0.3) grayscale(90%);
/* 2. Recul physique (Les cartes non sélectionnées s'éloignent) */
transform: scale(0.9) translateZ(-200px);
opacity: 0.4;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* LOGIQUE DE CIBLE : La carte survolée (FOCUS) */
/* Note: On utilise !important pour surcharger les transformations JS inline */
.nb-node-premium:hover {
z-index: 5000 !important;
/* Avance vers la caméra (Pop-Out) */
transform: scale(1.15) translateZ(100px) !important;
/* Glow massif "Hologramme Actif" */
box-shadow:
0 0 0 2px #fff, /* Bordure blanche pure */
0 0 30px var(--neon-cyan), /* Halo couleur */
0 50px 100px rgba(0,0,0,1) !important; /* Ombre de profondeur */
border-color: #fff !important;
background: #0f172a !important; /* Fond opaque pour lisibilité */
}
/* --- LHDSR CODEX ENGINE STYLES --- */
/* Surlignage Tactique */
mark.codex-highlight {
background: rgba(0, 243, 255, 0.2);
color: #fff;
border-bottom: 2px solid var(--neon-cyan);
padding: 0 2px;
}
mark.codex-highlight.active {
background: var(--neon-cyan);
color: #000;
box-shadow: 0 0 10px var(--neon-cyan);
}
/* Liste de Fichiers */
.codex-file-item {
padding: 8px 10px;
border-bottom: 1px solid #222;
cursor: pointer;
transition: all 0.2s;
font-family: var(--font-code);
font-size: 10px;
color: #888;
display: flex;
justify-content: space-between;
}
.codex-file-item:hover {
background: rgba(255,255,255,0.05);
color: #fff;
}
.codex-file-item.active {
background: rgba(0, 243, 255, 0.1);
border-left: 2px solid var(--neon-cyan);
color: var(--neon-cyan);
}
.codex-match-badge {
background: var(--neon-gold);
color: #000;
padding: 1px 4px;
border-radius: 2px;
font-weight: bold;
font-size: 9px;
}
/* Snippets dans le Smart Tooltip */
.codex-snippet {
background: rgba(255,255,255,0.05);
padding: 5px;
border-left: 2px solid #444;
color: #aaa;
}
.codex-snippet em {
color: var(--neon-cyan);
font-style: normal;
font-weight: bold;
text-shadow: 0 0 5px var(--neon-cyan-dim);
}
/* --- LHDSR PREMIUM EVIDENCE VIEWPORTS --- */
/* Conteneur de la galeriethumbnails */
.media-evidence-grid {
display: flex;
gap: 15px;
padding: 10px;
overflow-x: auto;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid #222;
}
/* Style des vignettes avec zoom fluide */
.evidence-thumb-container {
position: relative;
flex: 0 0 180px;
height: 110px;
overflow: hidden;
border: 1px solid #333;
background: #000;
cursor: crosshair;
transition: border-color 0.3s;
}
.evidence-thumb-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* ZOOM IN FLUIDE */
.evidence-thumb-container:hover {
border-color: var(--neon-cyan);
z-index: 100;
}
.evidence-thumb-container:hover img {
transform: scale(1.6); /* Zoom puissant et fluide */
}
/* Indication de type (IMG/VID) */
.media-type-tag {
position: absolute;
top: 5px; right: 5px;
background: rgba(0,0,0,0.8);
color: var(--neon-cyan);
font-size: 8px;
padding: 2px 5px;
border: 1px solid var(--neon-cyan-dim);
pointer-events: none;
}
/* --- LHDSR FORENSIC MEDIA SUITE V9.7 --- */
.media-arsenal-bar {
display: flex;
gap: 12px;
padding: 15px;
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0, 243, 255, 0.02) 100%);
border-bottom: 1px solid #222;
overflow-x: auto;
}
.evidence-viewport {
position: relative;
flex: 0 0 160px;
height: 100px;
border: 1px solid #333;
background: #000;
overflow: hidden;
cursor: zoom-in;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.evidence-viewport img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.evidence-viewport:hover {
border-color: var(--neon-cyan);
box-shadow: 0 0 15px var(--neon-cyan-dim);
z-index: 100;
}
.evidence-viewport:hover img {
transform: scale(1.8); /* Zoom profond pour analyse de détails */
}
/* Tag de type de média */
.viewport-tag {
position: absolute;
bottom: 0; right: 0;
background: var(--neon-cyan);
color: #000;
font-size: 8px;
font-weight: bold;
padding: 1px 4px;
font-family: var(--font-code);
}
/* Bouton Satellite Spécial */
.btn-satellite {
border-color: var(--neon-magenta) !important;
color: var(--neon-magenta) !important;
transition: 0.2s;
}
.btn-satellite:hover {
background: var(--neon-magenta) !important;
color: #000 !important;
box-shadow: 0 0 15px var(--neon-magenta);
}
.dialog-modal {
width: 400px;
border: 1px solid var(--neon-cyan);
background: rgba(5, 10, 15, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 0 30px rgba(0, 243, 255, 0.1);
clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);
}
.dialog-content {
display: flex;
gap: 20px;
padding: 20px;
align-items: flex-start;
}
#cd-icon { font-size: 24px; text-shadow: 0 0 10px var(--neon-cyan); }
.dialog-text-wrapper { flex: 1; }
#cd-message {
margin: 0;
font-family: 'Roboto Mono', monospace;
font-size: 12px;
line-height: 1.5;
color: #ccc;
}
#cd-input { margin-top: 15px; width: 100%; border-color: var(--neon-cyan-dim); }
.cyber-btn-small.danger { border-color: var(--neon-red); color: var(--neon-red); }
.split-action-row {
display: flex;
gap: 8px;
margin: 10px 0;
width: 100%;
}
.split-action-row .forensic-toggle-btn,
.split-action-row .cyber-btn {
flex: 1 1 0%; /* Force une division mathématique 50/50 */
min-width: 0; /* Autorise le bouton à rétrécir sans bloquer sur le texte */
font-size: 10px;
font-weight: 600 !important; /* Réduction graisse pour gagner de la place */
letter-spacing: 0 !important; /* Suppression espacement pour compacter */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Ajoute "..." si vraiment trop long */
height: 40px;
padding: 0 5px; /* Padding minimal pour maximiser l'espace texte */
display: flex;
align-items: center;
justify-content: center;
}
/* --- PERMISSION ENGINE (LHDSR MASK V13 - LOCKDOWN MODE) --- */
/* 1. État par défaut : DISPARITION TOTALE pour la zone SOURCES/CONSOLE */
/* 1. État par défaut : DISPARITION TOTALE (Sécurité Brutale) */
/* [SUTURE OMEGA] Sélecteur par inclusion (~=) pour supporter les éléments dynamiques et multi-grades */
[data-auth~="lhdsr"],
[data-auth~="architect"] {
display: none !important;
opacity: 0.3 !important;
filter: grayscale(100%) blur(2px) !important;
pointer-events: auto !important; /* Autorise le survol pour le tooltip */
cursor: help !important;
}
/* 2. Exception pour le HEADER : VISIBLE MAIS VERROUILLÉ (Flou + Gris) */
.nav-group [data-auth="lhdsr"],
.nav-group [data-auth="architect"] {
display: flex !important;
opacity: 0.3 !important;
filter: grayscale(100%) blur(2px) !important;
pointer-events: none !important;
cursor: not-allowed !important;
border-style: dashed !important;
border-color: #444 !important;
box-shadow: none !important;
}
/* 3. Révélation Sécurisée (Tier-Based Only) */
/* [SUTURE OMEGA] Révélation basée STRICTEMENT sur le tier actif.
La classe real-architect n'écrase plus la simulation. */
body.tier-lhdsr [data-auth~="lhdsr"],
body.tier-lhdsr [data-auth~="architect"],
body.tier-architect [data-auth~="lhdsr"],
body.tier-architect [data-auth~="architect"] {
display: flex !important; /* Révélation physique */
opacity: 1 !important;
filter: none !important;
pointer-events: auto !important;
cursor: pointer !important;
border-style: solid !important;
animation: auth-unlock 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes auth-unlock {
0% { transform: scale(0.95); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
/* 3.5. OVERRIDE DE SURVIE (Sécurité Simulateur) */
/* L'Architecte originel ne perd JAMAIS l'accès à son panneau de contrôle,
même s'il simule un niveau Sentinel. */
body.real-architect .config-sidebar [data-auth~="architect"] {
display: flex !important;
opacity: 1 !important;
filter: none !important;
pointer-events: auto !important;
cursor: pointer !important;
border-style: solid !important;
}
/* 2. Règles de Révélation (Cascade Hiérarchique) */
/* L'Architecte voit TOUT (Architect + Founder + Sentinel) */
body.tier-architect [data-auth="architect"],
body.tier-architect [data-auth="founder"],
body.tier-architect [data-auth="sentinel"] {
display: flex !important; /* Flex pour boutons/row */
animation: auth-glitch-reveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Le Founder voit Founder + Sentinel */
body.tier-founder [data-auth="founder"],
body.tier-founder [data-auth="sentinel"] {
display: flex !important;
animation: auth-fade-in 0.5s ease-out forwards;
}
/* 3. Animations de Révélation */
@keyframes auth-glitch-reveal {
0% { opacity: 0; transform: translateX(-5px); clip-path: inset(0 100% 0 0); filter: invert(1); }
50% { opacity: 1; clip-path: inset(0 0 0 0); }
100% { transform: translateX(0); filter: none; }
}
@keyframes auth-fade-in {
from { opacity: 0; } to { opacity: 1; }
}
/* 4. Le Simulateur (Widget Architecte Uniquement) */
#simulacrum-widget {
margin-top: 20px; padding: 15px;
border: 1px dashed var(--neon-gold);
background: rgba(255, 215, 0, 0.05);
display: none; /* Caché pour les mortels */
}
body.real-architect #simulacrum-widget { display: block; }
.sim-btn {
background: #000; border: 1px solid #333; color: #666;
padding: 5px 10px; font-size: 9px; cursor: pointer; text-transform: uppercase;
font-family: var(--font-code); flex: 1;
}
.sim-btn:hover { color: #fff; border-color: #fff; }
.sim-btn.active { background: var(--neon-gold); color: #000; border-color: var(--neon-gold); font-weight: bold; }
/* ==========================================================================
LHDSR OLYMPE GATEWAY V8 (HYBRID MASTER + NEON SLIDER)
========================================================================== */
/* Overlay : Blur Profond & Sombre */
#olympe-overlay {
background: rgba(5, 8, 12, 0.9) !important;
backdrop-filter: blur(25px) !important;
-webkit-backdrop-filter: blur(25px) !important;
z-index: 100000 !important;
}
/* Conteneur Principal : Ombre Interne Massive & Bordures Fines */
.olympe-modal {
width: 1100px; max-width: 95vw; height: 700px;
background: linear-gradient(145deg, #080b10 0%, #020305 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 50px 100px rgba(0,0,0,0.95),
inset 0 0 150px rgba(0,0,0,0.9), /* Profondeur */
0 0 0 1px rgba(0, 243, 255, 0.05);
border-radius: 12px;
overflow: hidden;
display: flex; flex-direction: column;
}
/* Header : Tech & Épuré */
.olympe-header {
height: 80px; padding: 0 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.01);
display: flex; justify-content: space-between; align-items: center;
flex-shrink: 0;
}
.olympe-title { font-family: 'Orbitron'; font-weight: 700; color: #fff; letter-spacing: 3px; font-size: 18px; }
.olympe-meta { font-family: 'Roboto Mono'; font-size: 10px; color: #666; margin-top: 5px; text-transform: uppercase; }
/* ONGLETS PREMIUM (Glow & Underline) */
.olympe-tabs {
display: flex; padding-left: 40px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.05);
gap: 0;
}
.olympe-tab-btn {
background: transparent; border: none; padding: 18px 30px;
font-family: 'Orbitron'; font-size: 11px; letter-spacing: 1px; color: #555;
cursor: pointer; transition: all 0.3s; position: relative;
border-bottom: 2px solid transparent;
}
.olympe-tab-btn:hover { color: #aaa; background: rgba(255,255,255,0.02); }
.olympe-tab-btn.active {
color: var(--neon-gold);
background: linear-gradient(180deg, transparent 0%, rgba(255, 215, 0, 0.05) 100%);
border-bottom-color: var(--neon-gold);
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
/* LAYOUT SPLIT */
.olympe-split-layout {
display: grid; grid-template-columns: 1.6fr 1fr; height: 100%; overflow: hidden;
}
/* ZONE GAUCHE (Sélecteur) */
.olympe-panel-left {
padding: 40px; overflow-y: auto;
border-right: 1px solid rgba(255, 255, 255, 0.05);
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.01) 0%, transparent 60%);
}
/* ZONE DROITE (Terminal) */
.olympe-panel-right {
padding: 40px; background: #050608; position: relative;
display: flex; flex-direction: column;
box-shadow: inset 20px 0 80px rgba(0,0,0,0.8);
}
/* 1. INPUT MANUEL "VERRE USÉ" */
.manual-input-box {
background: #000;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 30px;
margin-top: 40px;
position: relative;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
box-shadow: inset 0 0 40px rgba(0,0,0,0.9);
}
.big-input {
background: transparent; border: none; border-bottom: 1px solid #333;
font-family: 'Inter', sans-serif; font-weight: 200; font-size: 64px; color: #fff;
width: 180px; outline: none; transition: 0.3s; padding-bottom: 5px;
}
.big-input:focus { border-color: var(--neon-gold); }
/* SLIDER NEON GLOW */
.neon-slider-container {
width: 100%; margin-top: 25px; position: relative;
}
input[type=range].neon-slider {
width: 100%; -webkit-appearance: none; background: transparent;
}
input[type=range].neon-slider::-webkit-slider-runnable-track {
width: 100%; height: 2px;
background: linear-gradient(90deg, #333 0%, #555 100%);
cursor: pointer;
}
input[type=range].neon-slider::-webkit-slider-thumb {
-webkit-appearance: none; height: 16px; width: 4px;
background: var(--neon-cyan); cursor: pointer; margin-top: -7px;
box-shadow: 0 0 15px var(--neon-cyan), 0 0 30px var(--neon-cyan);
border-radius: 1px;
}
/* INFO DUREE VIDEO */
.video-time-calc {
font-family: 'Roboto Mono'; font-size: 10px; color: var(--neon-cyan);
margin-top: 8px; text-align: right; text-transform: uppercase;
text-shadow: 0 0 5px rgba(0, 243, 255, 0.4);
}
/* 2. SWITCHER (PILULE COMPACTE) */
.switcher-box {
display: flex; background: #0e1115; padding: 4px; border-radius: 4px;
border: 1px solid #222; width: fit-content; margin-bottom: 30px;
}
.switcher-btn {
padding: 8px 20px; border: none; background: transparent;
color: #555; font-family: 'Roboto Mono'; font-size: 10px; font-weight: bold;
cursor: pointer; border-radius: 3px; transition: 0.2s; letter-spacing: 1px;
}
.switcher-btn.active {
background: #222; color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
border: 1px solid #333;
}
/* 3. TERMINAL CRYPTO (BOX JAUNE) */
.olympe-terminal-box {
border: 1px solid rgba(255, 215, 0, 0.3);
padding: 20px;
background: rgba(20, 20, 5, 0.2);
font-family: 'Roboto Mono';
position: relative; margin-top: 20px;
box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}
/* 4. PACK CARDS */
.pack-grid { display: flex; gap: 15px; margin-bottom: 20px; }
.pack-card {
flex: 1; background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05); border-radius: 6px;
padding: 20px; cursor: pointer; transition: 0.3s;
text-align: center; position: relative;
}
.pack-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.05); }
.pack-card.active { border-color: var(--neon-cyan); background: rgba(0, 243, 255, 0.05); }
.pack-card.premium.active { border-color: var(--neon-gold); background: rgba(255, 215, 0, 0.05); }
/* --- BUTTON SYSTEM --- */
.pay-action-btn {
width: 100%; height: 50px; border-radius: 6px; border: none;
background: linear-gradient(135deg, var(--neon-gold) 0%, #ffc107 100%);
color: #000; font-family: 'Rajdhani'; font-weight: 700; font-size: 14px;
letter-spacing: 2px; cursor: pointer; transition: all 0.3s;
text-transform: uppercase; text-decoration: none;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 5px 20px rgba(255, 215, 0, 0.15);
}
.pay-action-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3); }
/* --- NEON GHOST RANGE SLIDER --- */
.neon-ghost-range {
-webkit-appearance: none; width: 100%; height: 4px;
background: #111; border: 1px solid #222; outline: none; border-radius: 2px;
cursor: pointer;
}
.neon-ghost-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px !important;
height: 18px !important;
background: #fff !important;
border-radius: 50% !important;
cursor: pointer;
/* Énergie stabilisée au repos */
box-shadow:
0 0 10px #fff,
0 0 25px var(--neon-cyan),
0 0 45px var(--neon-cyan-glow);
border: 2px solid rgba(255,255,255,0.9) !important;
transition: box-shadow 0.4s ease, filter 0.4s ease;
margin-top: -7px; /* Calibrage parfait sur rail 4px */
}
.neon-ghost-range::-webkit-slider-thumb:hover {
/* On ne change plus la taille physique (scale), on augmente l'irradiation */
box-shadow:
0 0 20px #fff,
0 0 50px var(--neon-cyan),
0 0 90px var(--neon-cyan);
filter: brightness(1.3);
}
.neon-ghost-range::-webkit-slider-thumb:hover { transform: scaleY(1.5); box-shadow: 0 0 25px var(--neon-cyan); }
/* --- NEURAL SIMULATOR CARDS --- */
.sim-card { background: rgba(0,0,0,0.3); padding: 12px; border: 1px solid rgba(255,255,255,0.03); }
.sim-bar-bg { height: 2px; background: #111; width: 100%; margin-top: 10px; position: relative; }
.sim-bar-fill { height: 100%; background: var(--neon-cyan); width: 0%; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 10px currentColor; }
.network-select {
width: 100%; background: #0b0d10; border: 1px solid #333; color: #ccc;
padding: 12px; font-family: 'Roboto Mono'; font-size: 11px;
outline: none; cursor: pointer; margin-bottom: 0; border-radius: 4px;
}
.network-select:focus { border-color: var(--neon-gold); }
.olympe-close-wrapper {
z-index: 100001 !important; position: relative; pointer-events: auto !important;
width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.olympe-close { font-size: 18px; color: #8da2b5; transition: color 0.2s; }
.olympe-close-wrapper:hover .olympe-close { color: #fff; }
/* --- LHDSR HQ MODULE (ARCHITECT COMMAND) --- */
.hq-modal {
width: 1400px; max-width: 98vw; height: 85vh;
background: #05070a; border: 1px solid var(--neon-red);
box-shadow: 0 0 50px rgba(0,0,0,0.9), inset 0 0 100px rgba(0,0,0,0.8);
display: flex; flex-direction: column; overflow: hidden;
animation: hq-boot 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hq-boot { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.hq-header {
height: 60px; border-bottom: 1px solid rgba(255,255,255,0.1);
background: linear-gradient(90deg, rgba(255,42,42,0.05) 0%, transparent 100%);
display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
flex-shrink: 0;
}
.hq-title-group { display: flex; align-items: center; gap: 15px; }
.hq-title { font-family: var(--font-display); color: var(--neon-red); font-size: 14px; letter-spacing: 2px; }
.hq-subtitle { font-family: var(--font-code); color: #666; font-size: 9px; margin-top: 2px; }
.hq-tabs {
display: flex; gap: 2px; height: 100%; align-items: flex-end;
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
padding-bottom: 1px; /* Prévient la coupure de la bordure basse */
}
.hq-tabs::-webkit-scrollbar { display: none; }
.hq-tab {
background: transparent; border: none; border-top: 2px solid transparent;
color: #666; font-family: var(--font-display); font-size: 10px; padding: 0 20px; height: 40px;
cursor: pointer; transition: all 0.2s; letter-spacing: 1px;
flex-shrink: 0; /* Empêche l'écrasement */
white-space: nowrap;
}
.hq-tab:hover { color: #fff; background: rgba(255,255,255,0.02); }
.hq-tab.active { color: var(--neon-cyan); border-top-color: var(--neon-cyan); background: rgba(0,243,255,0.05); }
.hq-tab.danger.active { color: var(--neon-red); border-top-color: var(--neon-red); background: rgba(255,42,42,0.05); }
.hq-view { flex: 1; min-height: 0; padding: 20px; overflow: hidden; background: radial-gradient(circle at center, #080a0e 0%, #020304 100%); display:flex; flex-direction:column; }
/* GRID SYSTEMS */
.hq-grid-dashboard {
display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 80px 1fr 1fr; gap: 15px; height: 100%;
}
.hq-grid-finance {
display: grid; grid-template-columns: 300px 1fr; gap: 15px; height: 100%;
}
/* CARDS */
.hq-card {
background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
border-radius: 4px; padding: 15px; display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
.hq-card.full-height { height: 100%; }
.card-header {
font-family: var(--font-display); font-size: 10px; color: #888;
margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px;
display: flex; justify-content: space-between; align-items: center; letter-spacing: 1px;
}
/* KPI STYLES */
.mini-kpi { flex-direction: row !important; align-items: center; gap: 15px; padding: 0 20px; }
.kpi-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(255,255,255,0.05); }
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon.gold { color: var(--neon-gold); border: 1px solid rgba(255,215,0,0.2); }
.kpi-icon.cyan { color: var(--neon-cyan); border: 1px solid rgba(0,243,255,0.2); }
.kpi-icon.green { color: var(--neon-green); border: 1px solid rgba(0,255,157,0.2); }
.kpi-icon.red { color: var(--neon-red); border: 1px solid rgba(255,42,42,0.2); }
.kpi-data { display: flex; flex-direction: column; }
.kpi-label { font-size: 8px; color: #666; font-family: var(--font-display); }
.kpi-value { font-size: 18px; color: #fff; font-family: var(--font-code); font-weight: bold; text-shadow: 0 0 10px rgba(255,255,255,0.1); }
/* LISTS & TABLES */
.hq-scroll-list { flex: 1; overflow-y: auto; font-family: var(--font-code); font-size: 10px; }
.hq-scroll-list::-webkit-scrollbar { width: 4px; }
.hq-scroll-list::-webkit-scrollbar-thumb { background: #333; }
.feed-item {
display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.05);
color: #aaa; transition: color 0.2s;
}
.feed-item:hover { color: #fff; background: rgba(255,255,255,0.02); }
.feed-time { color: #555; margin-right: 10px; width: 60px; }
.hq-table-header {
display: grid; grid-template-columns: 100px 1fr 1fr 80px 80px 100px;
font-size: 9px; color: #555; padding-bottom: 5px; border-bottom: 1px solid #333; margin-bottom: 5px;
}
/* GRILLE SPÉCIFIQUE ACCRÉDITATIONS */
.license-grid-header, .license-row {
display: grid !important;
grid-template-columns: 110px 100px 1fr 60px 100px 80px !important;
align-items: center;
gap: 10px;
}
.license-row {
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
transition: background 0.2s;
}
.license-row:hover {
background: rgba(255,255,255,0.02);
}
.hq-table-row {
display: grid; grid-template-columns: 100px 1fr 1fr 80px 80px 100px;
padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.02); color: #ccc; align-items: center;
}
.hq-table-row:hover { background: rgba(255,255,255,0.03); color: #fff; }
/* TACTICAL ACTIONS (HOVER REVEAL) */
.hq-actions-cell {
display: flex; gap: 5px; justify-content: flex-end;
opacity: 0; transition: opacity 0.2s; /* Caché par défaut pour éviter le bruit */
position: relative; z-index: 20; /* Au-dessus de la ligne */
}
.hq-table-row:hover .hq-actions-cell { opacity: 1; pointer-events: auto; }
.btn-tx-action {
background: #000; /* Fond noir pour masquer la ligne dessous */
border: 1px solid #444; color: #666;
width: 24px; height: 20px; font-size: 10px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 2px; transition: all 0.2s;
pointer-events: auto; /* Force le clic */
}
.hq-table-row:hover .hq-actions-cell { opacity: 1; }
.btn-tx-action {
background: transparent; border: 1px solid #444; color: #666;
width: 24px; height: 20px; font-size: 10px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 2px; transition: all 0.2s;
}
.btn-tx-action:hover { transform: scale(1.1); }
.btn-tx-approve:hover { border-color: var(--neon-green); color: var(--neon-green); background: rgba(0,255,157,0.1); }
.btn-tx-adjust:hover { border-color: var(--neon-gold); color: var(--neon-gold); background: rgba(255,215,0,0.1); }
.btn-tx-reject:hover { border-color: var(--neon-red); color: var(--neon-red); background: rgba(255,42,42,0.1); }
.btn-tx-delete:hover { border-color: var(--neon-magenta); color: var(--neon-magenta); background: rgba(255,0,255,0.1); }
.btn-tx-link:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0,243,255,0.1); }
/* --- BURN RATIO GAUGE --- */
.burn-ratio-container {
width: 60px;
height: 4px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
.burn-ratio-fill {
height: 100%;
background: var(--neon-cyan);
transition: width 0.3s ease;
}
.burn-ratio-fill.high { background: var(--neon-gold); }
.burn-ratio-fill.critical { background: var(--neon-red); box-shadow: 0 0 5px var(--neon-red); }
/* INPUTS DENSE */
.hq-input-group { margin-bottom: 10px; }
/* SYSTEM MONITOR STYLES */
.sys-monitor-row { margin-bottom: 15px; }
.sys-label { font-size: 9px; color:#888; font-family:var(--font-display); letter-spacing:1px; }
.sys-val { font-size: 10px; color:var(--neon-cyan); font-family:var(--font-code); font-weight:bold; }
.sys-bar-bg { height: 4px; background:rgba(255,255,255,0.1); width:100%; border-radius:2px; overflow:hidden; }
.sys-bar-fill { height:100%; background:var(--neon-cyan); transition:width 0.5s; box-shadow:0 0 10px var(--neon-cyan); }
.sys-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sys-status-item {
background:rgba(0,0,0,0.5); padding:8px; border:1px solid #333;
font-size:9px; color:#aaa; display:flex; align-items:center; gap:8px;
}
.sys-status-item .status-dot { width:6px; height:6px; border-radius:50%; background:#444; }
.sys-status-item.online { border-color:rgba(0,255,157,0.3); color:#fff; }
.sys-status-item.online .status-dot { background:var(--neon-green); box-shadow:0 0 5px var(--neon-green); }
.sys-status-item.warning { border-color:rgba(255,165,0,0.3); color:#fff; }
.sys-status-item.warning .status-dot { background:orange; box-shadow:0 0 5px orange; }
.sys-status-item.offline { border-color:var(--neon-red); color:var(--neon-red); }
.sys-status-item.offline .status-dot { background:var(--neon-red); box-shadow:0 0 5px var(--neon-red); }
/* EMERGENCY CONTROLS */
.emergency-toggle-row {
display:flex; justify-content:space-between; align-items:center;
padding:15px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05);
}
.em-title { font-size:10px; color:#fff; font-weight:bold; font-family:var(--font-display); }
.em-desc { font-size:9px; color:#666; margin-top:2px; }
/* BLACKBOX COLOR CODING */
.log-row {
display:grid; grid-template-columns: 120px 150px 1fr;
border-bottom:1px solid rgba(255,255,255,0.05); padding:4px 0;
font-family:'Roboto Mono'; font-size:10px; color:#aaa;
transition: background 0.1s;
}
.log-row:hover { background:rgba(255,255,255,0.05); color:#fff; }
.log-row.type-error { color:var(--neon-red); border-left:2px solid var(--neon-red); padding-left:5px; }
.log-row.type-warn { color:var(--neon-gold); }
.log-row.type-success { color:var(--neon-green); }
.log-row.type-system { color:var(--neon-cyan); opacity:0.8; }
.log-row.type-money { color:var(--neon-gold); font-weight:bold; background:rgba(255,215,0,0.05); }
.hq-input-group label { display: block; font-size: 8px; color: #666; margin-bottom: 4px; }
.hq-input {
width: 100%; background: #000; border: 1px solid #333; color: var(--neon-cyan);
font-family: var(--font-code); font-size: 11px; padding: 6px; text-align: right;
}
.hq-input:focus { border-color: var(--neon-gold); }
.hq-result-box {
margin-top: 15px; padding: 15px; background: rgba(0,255,157,0.05); border: 1px solid var(--neon-green);
color: var(--neon-green); font-family: var(--font-code); font-size: 14px; font-weight: bold; text-align: center;
}
.hq-input-search {
background: transparent; border: none; border-bottom: 1px solid #333;
color: #fff; font-family: var(--font-code); font-size: 10px; width: 200px; padding: 4px;
}
.hq-input-search:focus { border-bottom-color: var(--neon-cyan); outline: none; }
.blink-dot { color: var(--neon-red); animation: blink 1s infinite; }
/* --- LEDGER ICONS (OPTIONS) --- */
.ledger-opt-icon {
width: 12px; height: 12px;
display: inline-block;
margin-left: 4px;
opacity: 0.2; /* Éteint par défaut */
filter: grayscale(100%);
transition: all 0.3s;
}
.ledger-opt-icon.active {
opacity: 1;
filter: none;
filter: drop-shadow(0 0 5px currentColor);
}
.icon-orvel { color: var(--neon-red); } /* Forensic = Rouge */
.icon-vision { color: var(--neon-cyan); } /* Vision = Cyan */
/* --- LHDSR SYNAPTIC HUB (NOTIFICATIONS V2) --- */
#notification-hub {
position: fixed; top: 90px; right: 20px;
width: 320px;
z-index: 200000;
display: flex; flex-direction: column; gap: 10px;
pointer-events: none; /* Laisse passer le clic au travers du vide */
}
.lhdsr-notif {
background: rgba(5, 10, 15, 0.95);
border: 1px solid var(--neon-cyan);
border-left: 4px solid var(--neon-cyan);
padding: 15px 20px;
color: #fff;
font-family: var(--font-code);
font-size: 11px;
/* Olympe Glow Signature */
box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 20px rgba(0, 243, 255, 0.15);
backdrop-filter: blur(15px);
pointer-events: auto;
/* GHOST ANIMATION STATE (Initial) */
opacity: 0;
filter: blur(15px); /* Le flou fantomatique */
transform: translateX(50px);
/* Transition fluide Olympe (2s pour le flou, 0.4s pour le mouvement) */
transition:
opacity 0.4s ease,
filter 0.8s ease,
transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 10px; /* Espacement naturel dans le hub */
}
/* ÉTAT VISIBLE (Net & Lumineux) */
.lhdsr-notif.visible {
opacity: 1;
filter: blur(0px);
transform: translateX(0);
}
/* --- NOTIFICATION TIMER BAR (GHOST DRAIN) --- */
.notif-timer {
position: absolute; bottom: 0; left: 0;
height: 2px; width: 100%;
background: var(--neon-cyan);
box-shadow: 0 -1px 6px var(--neon-cyan);
transform-origin: left;
animation: timer-drain linear forwards;
z-index: 10;
}
/* Couleurs contextuelles pour la barre */
.critical .notif-timer { background: var(--neon-red); box-shadow: 0 -1px 8px var(--neon-red); }
.reward .notif-timer { background: var(--neon-gold); box-shadow: 0 -1px 8px var(--neon-gold); }
@keyframes timer-drain {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
.lhdsr-notif.stack-1 { transform: scale(0.98) translateY(5px); opacity: 0.8; z-index: -1; }
.lhdsr-notif.stack-2 { transform: scale(0.95) translateY(10px); opacity: 0.5; z-index: -2; }
/* Gravité */
.lhdsr-notif.critical { border-color: var(--neon-red); box-shadow: 0 0 15px rgba(255,0,0,0.2); }
.lhdsr-notif.reward { border-color: var(--neon-gold); box-shadow: 0 0 20px rgba(255,215,0,0.2); }
/* ALERTE DÉLICATE (GLASS/BLUR) */
.lhdsr-notif.delicate {
background: rgba(5, 10, 15, 0.95);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
opacity: 0;
filter: blur(10px);
transform: translateY(-10px);
/* Intro lente (1s) */
transition: opacity 1s ease, filter 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lhdsr-notif.delicate.visible {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
.lhdsr-notif.delicate.fading {
/* Outro très lente (5s) */
opacity: 0;
filter: blur(15px);
transform: translateY(-5px);
transition: opacity 5s ease, filter 5s ease, transform 5s ease;
}
.lhdsr-notif.delicate .notif-timer {
background: var(--neon-cyan);
opacity: 0.5;
}
/* Actions */
.notif-actions {
display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 5px;
}
.notif-btn {
background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #ccc;
font-size: 9px; cursor: pointer; padding: 2px 6px; text-transform: uppercase;
transition: all 0.2s;
}
.notif-btn:hover { background: var(--neon-cyan); color: #000; border-color: var(--neon-cyan); }
.critical .notif-btn:hover { background: var(--neon-red); border-color: var(--neon-red); }
/* --- ADMISSION TABLE (WHITELIST) --- */
.admission-row {
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
align-items: center;
}
.admission-row:hover { background: rgba(0, 255, 157, 0.05); }
/* Checkbox Cyber */
.adm-chk {
appearance: none; width: 14px; height: 14px;
border: 1px solid #666; background: #000;
cursor: pointer; position: relative;
}
.adm-chk:checked { border-color: var(--neon-green); background: rgba(0, 255, 157, 0.2); }
.adm-chk:checked::after {
content: '✓'; position: absolute; top: -3px; left: 1px;
color: var(--neon-green); font-size: 12px; font-weight: bold;
}
/* --- LHDSR OG BADGE (ORIGIN GUARD) --- */
.og-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
font-family: var(--font-display);
font-weight: 900;
font-size: 9px;
color: #000;
background: var(--neon-cyan);
border: 1px solid #fff;
clip-path: polygon(
8px 0, 100% 0,
100% calc(100% - 8px),
calc(100% - 8px) 100%,
0 100%, 0 8px
);
text-transform: uppercase;
letter-spacing: 1px;
overflow: hidden;
box-shadow: 0 0 10px var(--neon-cyan);
}
/* L'effet de Reflet (Shine) */
.og-badge::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.8),
transparent
);
transform: skewX(-20deg);
animation: og-shine 3s infinite ease-in-out;
}
@keyframes og-shine {
0%, 70% { left: -100%; }
100% { left: 200%; }
}
.og-badge-icon {
width: 10px; height: 10px;
margin-right: 4px;
fill: #000;
}
/* --- FORENSIC NOTIFIER (NEW ANALYSIS) --- */
#forensic-new-badge {
position: fixed;
background: rgba(0, 10, 5, 0.95);
border: 1px solid var(--neon-green);
padding: 4px 8px;
border-radius: 3px;
box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
z-index: 100000;
pointer-events: none;
display: flex;
align-items: center;
gap: 6px;
/* État Initial (Invisible & Flou) */
opacity: 0;
filter: blur(5px);
transform: translateX(-50%); /* Centrage par rapport au point d'ancrage */
/* Transition d'entrée (1s) */
transition: opacity 1s ease, filter 1s ease;
}
#forensic-new-badge.visible {
opacity: 1;
filter: blur(0);
}
#forensic-new-badge.fading {
/* Override pour la sortie lente (5s) */
transition: opacity 5s ease, filter 5s ease;
opacity: 0;
filter: blur(5px);
}
#forensic-new-badge svg {
width: 12px; height: 12px;
stroke: var(--neon-green);
fill: none;
stroke-width: 2;
filter: drop-shadow(0 0 2px var(--neon-green));
}
#forensic-new-badge span {
font-family: 'Orbitron', sans-serif;
font-size: 9px;
color: var(--neon-green);
letter-spacing: 1px;
font-weight: 700;
text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
}
/* --- LUX GHOST ICON --- */
.lux-icon-ghost {
width: 14px;
height: 14px;
background-color: var(--neon-cyan);
-webkit-mask: url('assets/lhdsr_lux.svg') no-repeat center;
mask: url('assets/lhdsr_lux.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
filter: drop-shadow(0 0 5px var(--neon-cyan));
animation: lux-breathing 3s ease-in-out infinite;
display: inline-block;
vertical-align: middle;
}
@keyframes lux-breathing {
0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 2px var(--neon-cyan)); }
50% { opacity: 1; filter: drop-shadow(0 0 10px var(--neon-cyan)); }
}
/* --- LHDSR DRONE CARTRIDGE --- */
.drone-cartouche {
display: flex; align-items: center; gap: 10px;
padding: 0 12px; height: 32px;
background: rgba(5, 7, 10, 0.8);
border: 1px solid #333; border-radius: 4px;
margin-right: 12px; cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drone-cartouche:hover { border-color: var(--neon-cyan); background: rgba(0, 243, 255, 0.05); }
.drone-icon-svg { width: 14px; height: 14px; color: #666; transition: color 0.3s; }
.cartouche-label { font-family: 'Orbitron', sans-serif; font-size: 8px; font-weight: 900; letter-spacing: 1px; color: #444; }
.led-status {
width: 6px; height: 6px; border-radius: 50%;
background: #222; transition: all 0.5s;
}
.drone-cartouche.missing { border-color: rgba(255, 0, 255, 0.1); }
.drone-cartouche.missing .led-status {
background: var(--neon-magenta);
box-shadow: 0 0 10px var(--neon-magenta);
animation: led-breathing-magenta 1.5s infinite alternate;
}
.drone-cartouche.missing .cartouche-label { color: var(--neon-magenta); opacity: 0.7; }
/* État Orange : Drone trouvé mais licence manquante */
.drone-cartouche.pending { border-color: var(--neon-gold); }
.drone-cartouche.pending .led-status {
background: var(--neon-gold);
box-shadow: 0 0 10px var(--neon-gold);
animation: led-breathing-magenta 0.8s infinite alternate;
}
.drone-cartouche.pending .cartouche-label { color: var(--neon-gold); }
.drone-cartouche.secured { border-color: var(--neon-green-dim); }
.drone-cartouche.secured .led-status {
background: var(--neon-green);
box-shadow: 0 0 10px var(--neon-green);
animation: led-breathing-green 3s infinite alternate;
}
.drone-cartouche.secured .cartouche-label { color: var(--neon-green); }
.drone-cartouche.secured .drone-icon-svg { color: var(--neon-green); }
@keyframes led-breathing-magenta { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes led-breathing-green { from { opacity: 0.6; } to { opacity: 1; } }
/* --- HOLOGRAM OVERLAY --- */
#hologram-overlay {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(2, 4, 6, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hologram-focus {
filter: blur(8px) brightness(0.3) grayscale(0.5);
transition: all 2s ease;
}
#hologram-stage {
width: 80vw;
text-align: center;
}
#hologram-typography {
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
font-size: 22px;
color: var(--neon-cyan);
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 10px var(--neon-cyan-glow);
min-height: 100px;
}
#skip-hologram {
position: absolute;
bottom: 40px;
background: transparent;
border: none;
color: rgba(255,255,255,0.2);
font-family: 'Orbitron';
font-size: 10px;
cursor: pointer;
letter-spacing: 4px;
}
#skip-hologram:hover { color: var(--neon-red); }
.scanlines {
position: absolute;
inset: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 4px, 3px 100%;
pointer-events: none;
}
/* ==========================================================================
CASE HEADER ACTIONS (PREMIUM TOGGLE REFACTOR)
========================================================================== */
.case-actions-group {
display: flex;
align-items: center;
gap: 20px;
}
.publish-control-wrapper {
display: flex;
align-items: center;
gap: 15px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 6px 16px;
border-radius: 30px; /* Style Pilule Parfaite */
box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
transition: all 0.3s ease;
}
/* Le bouton Voir en ligne */
.external-link-btn {
background: transparent;
border: none;
color: var(--neon-cyan);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.6;
transition: all 0.2s;
padding: 0 15px 0 0;
margin-right: 5px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.external-link-btn:hover {
opacity: 1;
filter: drop-shadow(0 0 5px var(--neon-cyan));
transform: scale(1.1);
}
.external-link-btn.hidden {
display: none;
}
/* Le conteneur du Switch */
.premium-toggle {
display: flex;
align-items: center;
gap: 12px;
}
/* Les Labels Textuels */
.premium-toggle .toggle-label {
font-family: 'Orbitron', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
color: #444;
transition: all 0.3s ease;
}
.premium-toggle .toggle-label.private.active {
color: #888;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.premium-toggle .toggle-label.public.active {
color: var(--neon-cyan);
text-shadow: 0 0 10px var(--neon-cyan);
}
/* L'INTERRUPTEUR PHYSIQUE */
.premium-toggle .switch {
position: relative;
display: inline-block;
width: 36px;
height: 18px;
}
.premium-toggle .switch input {
opacity: 0;
width: 0;
height: 0;
}
.premium-toggle .slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #111;
border: 1px solid #333;
transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 18px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
/* La LED Mécanique (Le pouce) */
.premium-toggle .slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background-color: #555;
transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 50%;
}
/* ETAT PUBLIC (ACTIVÉ) : NEON GHOST BLUE */
.premium-toggle input:checked + .slider {
background-color: rgba(0, 243, 255, 0.1);
border-color: rgba(0, 243, 255, 0.5);
box-shadow: inset 0 0 8px rgba(0, 243, 255, 0.2);
}
.premium-toggle input:checked + .slider:before {
transform: translateX(18px);
background-color: #fff;
/* Effet d'irradiation Cyan */
box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px rgba(0, 243, 255, 0.6);
}
/* Séparateur discret */
.case-actions-separator {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
}
/* Nettoyage brutal du vieux bouton fermer rouge pour l'intégrer proprement */
button#cf-close-btn {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #888 !important;
width: 32px !important;
height: 32px !important;
border-radius: 4px;
box-shadow: none !important;
text-shadow: none !important;
transition: all 0.2s ease !important;
}
button#cf-close-btn:hover {
background: rgba(255, 42, 42, 0.1) !important;
border-color: var(--neon-red) !important;
color: var(--neon-red) !important;
box-shadow: 0 0 15px rgba(255, 42, 42, 0.3) !important;
transform: scale(1.05) !important;
}
/* --- LHDSR PREMIUM CODEX EDITOR --- */
.codex-editor-surface {
flex: 1;
overflow-y: auto;
padding: 60px 100px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 15px;
line-height: 1.8;
color: #cbd5e1;
background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
outline: none;
cursor: text;
white-space: pre-wrap;
transition: all 0.4s ease;
}
.codex-editor-surface:focus {
box-shadow: inset 0 0 150px rgba(0,0,0,0.9), 0 0 30px rgba(0, 243, 255, 0.05);
color: #f1f5f9;
}
/* --- GHOST MODE & KINETIC INK --- */
.md-ghost { display: none; user-select: none; pointer-events: none; }
.codex-editor-surface.edit-mode .md-ghost {
display: inline; opacity: 0.25; color: var(--neon-gold); font-family: var(--font-code); font-weight: normal;
}
.magic-link-pill {
color: var(--neon-cyan); font-weight: 700; text-decoration: none;
border-bottom: 1px dotted rgba(0, 243, 255, 0.3);
cursor: pointer; transition: all 0.2s ease; padding: 0 2px;
}
.magic-link-pill:hover {
background: rgba(0, 243, 255, 0.1); border-bottom-style: solid;
text-shadow: 0 0 8px var(--neon-cyan); border-radius: 2px;
}
.magic-link-pill .link-icon {
opacity: 0.7; margin-left: 4px; vertical-align: middle;
}
#codex-publish-beehiiv {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#codex-publish-beehiiv:hover {
background: var(--neon-green);
color: #000;
box-shadow: 0 0 20px var(--neon-green);
transform: scale(1.05) translateY(-1px);
}
/* ==========================================================================
THEME CLAIR (SILVER / HIGH VISIBILITY MODE) - HQ
========================================================================== */
body.theme-light .cyber-overlay {
background: rgba(226, 232, 240, 0.95) !important;
}
body.theme-light .hq-modal {
background: #f1f5f9 !important;
border-color: #94a3b8 !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
color: #0f172a !important;
}
body.theme-light .hq-header {
background: #e2e8f0 !important;
border-bottom-color: #cbd5e1 !important;
}
body.theme-light .hq-title,
body.theme-light .hq-title-group svg {
color: #0f172a !important;
text-shadow: none !important;
stroke: #0f172a !important;
filter: none !important;
}
body.theme-light .hq-subtitle { color: #475569 !important; }
body.theme-light .hq-tab { color: #64748b !important; }
body.theme-light .hq-tab:hover { background: rgba(0,0,0,0.05) !important; color: #0f172a !important; }
body.theme-light .hq-tab.active { background: #f8fafc !important; color: #0f172a !important; border-top-color: #0ea5e9 !important; }
body.theme-light .hq-view { background: #e2e8f0 !important; }
body.theme-light .hq-card {
background: #ffffff !important;
border-color: #cbd5e1 !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}
body.theme-light .card-header { color: #1e293b !important; border-bottom-color: #e2e8f0 !important; }
body.theme-light .kpi-label { color: #64748b !important; }
body.theme-light .kpi-value { color: #0f172a !important; text-shadow: none !important; }
body.theme-light .hq-table-header { color: #475569 !important; border-bottom-color: #cbd5e1 !important; }
body.theme-light .hq-table-row { color: #1e293b !important; border-bottom-color: #e2e8f0 !important; }
body.theme-light .hq-table-row:hover { background: #f1f5f9 !important; color: #0f172a !important; }
/* BRUTALIST INLINE STYLE OVERRIDES FOR THEME LIGHT */
body.theme-light .hq-modal [style*="color:#fff"],
body.theme-light .hq-modal [style*="color: #fff"],
body.theme-light .hq-modal [style*="color: white"],
body.theme-light .hq-modal [style*="color:#FFF"] {
color: #0f172a !important;
}
body.theme-light .hq-modal [style*="color:#ccc"],
body.theme-light .hq-modal [style*="color: #ccc"],
body.theme-light .hq-modal [style*="color:#aaa"],
body.theme-light .hq-modal [style*="color: #aaa"],
body.theme-light .hq-modal [style*="color:#888"],
body.theme-light .hq-modal [style*="color: #888"],
body.theme-light .hq-modal [style*="color:#666"],
body.theme-light .hq-modal [style*="color: #666"] {
color: #475569 !important;
}
body.theme-light .hq-modal [style*="background:rgba(0,0,0"],
body.theme-light .hq-modal [style*="background: rgba(0,0,0"],
body.theme-light .hq-modal [style*="background:rgba(255,255,255,0.0"],
body.theme-light .hq-modal [style*="background: rgba(255,255,255,0.0"] {
background: #f8fafc !important;
border-color: #e2e8f0 !important;
}
body.theme-light .hq-modal input,
body.theme-light .hq-modal select,
body.theme-light .hq-modal textarea {
background: #ffffff !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
}
body.theme-light .hq-modal ::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* Feed & Logs */
body.theme-light .feed-item {
background: #ffffff !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
border: 1px solid #e2e8f0 !important;
border-left: 4px solid #0ea5e9 !important;
color: #0f172a !important;
}
body.theme-light .feed-item:hover { background: #f8fafc !important; }
body.theme-light .sys-status-item { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
body.theme-light .log-row { border-bottom-color: #e2e8f0 !important; color: #334155 !important; }
body.theme-light .log-row:hover { background: #f1f5f9 !important; color: #0f172a !important; }
/* Inputs & LCD */
body.theme-light .lcd-container { background: #cbd5e1 !important; border-color: #94a3b8 !important; }
body.theme-light .lcd-screen {
background: #f8fafc !important;
color: #0f172a !important;
text-shadow: none !important;
border-color: #94a3b8 !important;
box-shadow: inset 0 0 10px rgba(0,0,0,0.05) !important;
}
body.theme-light .hq-input, body.theme-light .hq-input-search, body.theme-light select, body.theme-light .cyber-input {
background: #ffffff !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
}
body.theme-light .hq-input:focus, body.theme-light .hq-input-search:focus, body.theme-light .cyber-input:focus {
border-color: #0ea5e9 !important;
box-shadow: 0 0 5px rgba(14, 165, 233, 0.3) !important;
}
body.theme-light .hq-mini-action { background: #f1f5f9 !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
body.theme-light .hq-mini-action:hover { background: #e2e8f0 !important; border-color: #0ea5e9 !important; }
body.theme-light .burn-ratio-container { background: #cbd5e1 !important; }
body.theme-light .kpi-icon { background: #f1f5f9 !important; }
/* Neon Overrides for Light Mode (Darker & Less Glow) */
body.theme-light .kpi-icon.gold, body.theme-light [style*="color:var(--neon-gold)"] { color: #d97706 !important; border-color: #d97706 !important; text-shadow: none !important; }
body.theme-light .kpi-icon.cyan, body.theme-light [style*="color:var(--neon-cyan)"] { color: #0284c7 !important; border-color: #0284c7 !important; text-shadow: none !important; }
body.theme-light .kpi-icon.green, body.theme-light [style*="color:var(--neon-green)"] { color: #059669 !important; border-color: #059669 !important; text-shadow: none !important; }
body.theme-light .kpi-icon.red, body.theme-light [style*="color:var(--neon-red)"] { color: #dc2626 !important; border-color: #dc2626 !important; text-shadow: none !important; }
body.theme-light .cyber-btn { color: #0f172a !important; border-color: #94a3b8 !important; text-shadow: none !important; box-shadow: none !important; }
body.theme-light .cyber-btn:hover { background: #cbd5e1 !important; }
body.theme-light .cyber-btn-small { color: #0f172a !important; border-color: #94a3b8 !important; text-shadow: none !important; }
body.theme-light .cyber-btn-small:hover { background: #e2e8f0 !important; }
/* Specific fixes */
body.theme-light .hq-card [style*="background:rgba(0,0,0,0.5)"] { background: #f8fafc !important; border-color: #e2e8f0 !important;}
body.theme-light .hq-card [style*="background:rgba(0,0,0,0.4)"] { background: #f8fafc !important; border-color: #e2e8f0 !important;}
body.theme-light .hq-card [style*="background:rgba(0,0,0,0.3)"] { background: #f8fafc !important; border-color: #e2e8f0 !important;}
body.theme-light .hq-card [style*="background: rgba(0, 0, 0, 0.4)"] { background: #f8fafc !important; border-color: #e2e8f0 !important;}
/* Fix classes spécifiques Overview & Système */
body.theme-light .hm-val { color: #0f172a !important; }
body.theme-light .hm-label { color: #475569 !important; }
body.theme-light .em-title { color: #0f172a !important; }
body.theme-light .em-desc { color: #64748b !important; }
body.theme-light .sys-label { color: #475569 !important; }
body.theme-light .sys-val { color: #0284c7 !important; }