:root { --primary: #00f2fe; --danger: #ff4d4d; --bg: #050508; --glass: rgba(255, 255, 255, 0.05); }
body { margin: 0; background: var(--bg); color: white; font-family: 'Rajdhani', sans-serif; overflow: hidden; height: 100vh; }

#loader { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: 1s; }
#loader.fade-out { opacity: 0; visibility: hidden; }
.load-bar { width: 300px; height: 2px; background: #222; margin-top: 20px; }
.progress { width: 0%; height: 100%; background: var(--primary); animation: load 2.5s forwards; }
@keyframes load { to { width: 100%; } }

.video-background { position: fixed; inset: 0; z-index: -1; }
#bg-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }

#login-section { height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 10; position: relative; }
.login-card { background: rgba(10,10,15,0.9); padding: 40px; border-radius: 20px; border: 1px solid var(--primary); width: 400px; text-align: center; }
.input-group { position: relative; margin: 30px 0; }
.input-group input { width: 100%; background: none; border: none; border-bottom: 1px solid #333; color: white; padding: 10px; outline: none; }
.login-btn { width: 100%; padding: 15px; background: transparent; border: 1px solid var(--primary); color: var(--primary); cursor: pointer; font-weight: bold; transition: 0.3s; }
.login-btn:hover { background: var(--primary); color: black; }

#app-canvas { display: none; height: 100vh; } /* Caché par défaut */
.sidebar { width: 200px; background: rgba(0,0,0,0.9); border-right: 1px solid var(--primary); padding: 20px; display: flex; flex-direction: column; }
.main-content { flex: 1; padding: 40px; overflow-y: auto; }

.nexus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.nexus-box { background: var(--glass); border: 1px solid rgba(0,242,254,0.2); padding: 20px; border-radius: 10px; cursor: pointer; text-align: center; transition: 0.3s; }
.nexus-box:hover { border-color: var(--primary); transform: scale(1.02); }

.full-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000; display: none; padding: 60px; overflow-y: auto; }
.close-x { position: absolute; top: 20px; right: 20px; font-size: 2rem; color: white; background: none; border: none; cursor: pointer; }

.jauge-container { width: 200px; height: 10px; background: #222; border-radius: 5px; }
.jauge-fill { height: 100%; background: var(--primary); width: 45%; transition: 0.5s; }

body.emergency { background: #300 !important; animation: alarm 1s infinite; }
@keyframes alarm { 0% { opacity: 1; } 50% { opacity: 0.7; } }