:root {
    --neon-blue: #00f2ff;
    --neon-gold: #ffb700;
    --neon-red: #ff0055;
    --glass-bg: rgba(0, 5, 10, 0.7);
    --glass-border: rgba(0, 242, 255, 0.3);
    --glow-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    --accent: var(--neon-gold);
    --danger: var(--neon-red);
    --warning: #cca000;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes silver-pulse {
    0% { box-shadow: 0 0 5px var(--silver-glow); }
    50% { box-shadow: 0 0 20px var(--silver-glow); }
    100% { box-shadow: 0 0 5px var(--silver-glow); }
}

.silver-edition {
    color: var(--silver) !important;
    text-shadow: 0 0 10px var(--silver-glow);
}

@keyframes neon-pulse {
    0% { box-shadow: 0 0 5px var(--accent-glow); }
    50% { box-shadow: 0 0 20px var(--accent-glow); }
    100% { box-shadow: 0 0 5px var(--accent-glow); }
}

.neon-border {
    border: 1px solid var(--neon-yellow) !important;
    animation: neon-pulse 3s infinite ease-in-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* GOD-VIEW SPACE-TIME GRID */
.space-time-grid {
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: rotateX(60deg) translateZ(-500px);
    animation: grid-move 20s linear infinite;
    z-index: -2;
    mask-image: radial-gradient(circle, black, transparent 80%);
    pointer-events: none;
}

@keyframes grid-move {
    from { background-position: 0 0; }
    to { background-position: 0 1000px; }
}

body, html {
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: #05080f;
    color: #fff;
    overflow: hidden;
    perspective: 1500px;
}

/* CARTE PRINCIPALE */
#map {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: #060913;
    z-index: 1;
    filter: contrast(1.1) brightness(0.9) saturate(1.2);
}

.cyber-grid-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 2;
    animation: grid-pulse 8s infinite alternate;
}

@keyframes grid-pulse {
    0% { opacity: 0.3; }
    100% { opacity: 0.6; }
}


/* --- PREMIUM LOADER SYSTEM --- */
#app-loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(204, 160, 0, 0.15) 0%, transparent 70%),
        radial-gradient(circle at 20% 30%, rgba(0, 210, 255, 0.05) 0%, transparent 50%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 20000;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
    overflow: hidden;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 10000;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
    overflow: hidden;
}

#app-loader::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(0deg, rgba(204, 160, 0, 0.03) 0px, transparent 1px, transparent 2px);
    pointer-events: none;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.loader-content { 
    text-align: center; 
    z-index: 1;
}

/* Dashboard Gauge */
.dashboard-gauge {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 30px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(204, 160, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.gauge-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 10;
    stroke-dasharray: 440;
    stroke-dashoffset: 110; /* 3/4 circle */
}

/* NEURAL & DIGITAL HORIZON */
#digital-horizon {
    position: absolute;
    width: 200px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    opacity: 0.4;
}

.horizon-line {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
    box-shadow: 0 0 10px var(--neon-blue);
    transition: transform 0.1s ease-out;
}

/* Neural Speed Transparency & Ultra Glass */
#hud {
    position: fixed;
    top: 50%; left: 50%; width: 96vw; height: 96vh;
    transform: translate(-50%, -50%) translateZ(100px);
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    pointer-events: none;
    z-index: 1000;
}

#hud > * { pointer-events: auto; }

.hud-item {
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--glow-shadow);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.hud-item {
    text-shadow: 0 0 10px var(--neon-blue);
    animation: neural-pulse-glow 4s infinite alternate ease-in-out;
}

@keyframes neural-pulse-glow {
    0% { filter: drop-shadow(0 0 2px var(--neon-blue)); opacity: 0.8; }
    100% { filter: drop-shadow(0 0 10px var(--neon-blue)); opacity: 1; }
}


.ultra-battery-saver #map, 
.ultra-battery-saver #guardian-halo, 
.ultra-battery-saver .compass-ring {
    animation: none !important;
    filter: grayscale(1);
}

.ultra-battery-saver body, 
.ultra-battery-saver .glassmorphism {
    background: #000000 !important;
    border-color: #333 !important;
}

.ultra-battery-saver #speed-container {
    color: #ff4444 !important; /* Rouge haute visibilité sur fond noir */
}

.ultra-battery-saver .btn-circular {
    background: #111 !important;
    border: 1px solid #333 !important;
}

.gauge-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 2s cubic-bezier(0.1, 0, 0.3, 1);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.gauge-needle {
    position: absolute;
    width: 4px;
    height: 120px;
    background: linear-gradient(to top, transparent, var(--accent), #fff);
    bottom: 50%;
    left: calc(50% - 2px);
    transform-origin: bottom center;
    transform: rotate(-120deg);
    transition: transform 2s cubic-bezier(0.1, 0, 0.3, 1);
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 0 15px var(--accent-glow);
}

.gauge-center {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 10px #fff;
}

.gauge-digital {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.gauge-speed {
    font-size: 4rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    font-family: 'JetBrains Mono', monospace;
}

.gauge-unit {
    font-size: 0.8rem;
    color: var(--accent);
    letter-spacing: 2px;
    font-weight: 700;
}

.loader-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 8px;
    background: linear-gradient(180deg, #fff, #ccc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-top: 20px;
    text-shadow: 0 0 30px rgba(255,255,255,0.3);
    animation: title-glow 4s infinite alternate;
    color: white;
    font-size: 1.4rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.loader-status {
    color: var(--accent);
    font-size: 0.75rem;
    letter-spacing: 2px;
    height: 20px;
    font-family: monospace;
    text-transform: uppercase;
    opacity: 0.8;
}

.system-check-list {
    position: absolute;
    bottom: 40px;
    left: 20px;
    text-align: left;
    font-family: monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* Google Maps specific UI overrides can go here */

/* Glassmorphism utility */
.glassmorphism {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(255,255,255,0.02);
}

/* Neural Core - The heart of the revolutionary HUD */
.neural-core {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.25;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    mix-blend-mode: screen;
}

.core-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--neon-blue);
    border-radius: 50%;
    animation: core-rotate 20s linear infinite;
    box-shadow: 0 0 30px var(--neon-blue), inset 0 0 30px var(--neon-blue);
}

.core-ring-outer {
    position: absolute;
    width: 120%;
    height: 120%;
    border: 1px dashed rgba(255, 183, 0, 0.3);
    border-radius: 50%;
    animation: core-rotate-reverse 30s linear infinite;
}

.core-inner {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.4) 0%, transparent 80%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

#quantum-wave-canvas {
    width: 100%;
    height: 100%;
    filter: blur(2px);
}

.core-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
    opacity: 0.3;
    animation: core-glow-pulse 4s infinite alternate ease-in-out;
}

@keyframes core-rotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes core-rotate-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes core-glow-pulse {
    0% { transform: scale(0.8); opacity: 0.2; }
    100% { transform: scale(1.2); opacity: 0.5; }
}

/* Scanline Effect Overlay */
.scanline-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
}

/* Holographic Mode v2 - Windshield Projection Mode (Flipped for reflection) */
.holographic-mode {
    transform: scaleY(-1);
    filter: brightness(1.4) contrast(1.2);
}

.holographic-mode #hud {
    perspective: 1200px;
    transform: translateX(-50%) rotateX(15deg);
}

.holographic-mode .hud-item {
    transform: translateZ(60px);
    text-shadow: 0 5px 15px var(--neon-blue);
}

/* Immersive 3D HUD Mode */
.immersive-mode #map {
    transform: rotateX(25deg) translateY(-40px) translateZ(-100px) scale(1.1);
    filter: invert(100%) hue-rotate(180deg) brightness(0.6) contrast(1.5) saturate(0.5);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.immersive-mode .cyber-grid-overlay {
    transform: rotateX(25deg);
    opacity: 0.8;
}

.immersive-mode #hud {
    transform: translate(-50%, -55%) translateZ(150px) rotateX(10deg);
}

/* Oracle Tactical Console */
#oracle-console {
    position: absolute;
    bottom: -150px;
    left: -20px;
    width: 140px;
    height: 100px;
    padding: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    color: var(--neon-blue);
    overflow: hidden;
    border-left: 2px solid var(--neon-blue);
    display: flex;
    flex-direction: column;
}

.console-header {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 3px;
    margin-bottom: 5px;
    font-weight: 900;
    opacity: 0.8;
}

#console-logs .log {
    margin-bottom: 2px;
    animation: log-slide 0.3s ease-out;
}

@keyframes log-slide {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Biometric Scanner */
#biometric-scanner {
    position: absolute;
    bottom: -150px;
    right: -20px;
    width: 120px;
    height: 80px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 2px solid var(--neon-pink);
    overflow: hidden;
}

.scan-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
    animation: bio-scan 2s linear infinite;
    opacity: 0.5;
}

@keyframes bio-scan {
    0% { top: 0; }
    100% { top: 100%; }
}

.bio-item {
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--text-light);
    margin: 2px 0;
}

#bio-bpm { color: var(--neon-pink); }
#bio-focus { color: var(--accent); }

/* Glitch Effect */
.glitch-active {
    animation: screen-glitch 0.2s infinite;
}

@keyframes screen-glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
    40% { transform: translate(2px, -1px); filter: invert(0.1); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
    100% { transform: translate(0); }
}

/* Radar Sweep Animation */
.radar-sweep { display: none; opacity: 0; 
    position: fixed;
    top: 50%; left: 50%;
    width: 200vw; height: 200vw;
    background: conic-gradient(from 0deg, transparent, rgba(0, 210, 255, 0.1) 10deg, transparent 90deg);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    animation: radar-spin 8s linear infinite;
}

@keyframes radar-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pilot XP Ranking */
.xp-rank-badge {
    position: absolute;
    top: 55px; left: 0;
    background: linear-gradient(90deg, var(--neon-blue), transparent);
    color: white;
    padding: 2px 10px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    border-left: 3px solid white;
}

.grid-status-active {
    position: absolute;
    top: 75px; left: 0;
    color: var(--neon-blue);
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 1px;
    opacity: 0.8;
}

.grid-status-active::before {
    content: "●";
    margin-right: 5px;
    animation: status-blink 1s steps(2) infinite;
}

@keyframes status-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* HEADS UP DISPLAY (HUD) */
#hud {
    position: absolute;
    top: 20px;
    top: calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + 20px);
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
}

/* Scanline Effect Overlay */
.scanline-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
}

/* Holographic Mode v2 - Windshield Projection Mode (Flipped for reflection) */
.holographic-mode {
    transform: scaleY(-1);
    filter: brightness(1.4) contrast(1.2);
}

.holographic-mode #hud {
    perspective: 1200px;
    transform: translateX(-50%) rotateX(15deg);
}

.holographic-mode .hud-item {
    transform: translateZ(60px);
    text-shadow: 0 5px 15px var(--neon-blue);
}

/* Immersive 3D HUD Mode */
.immersive-mode #map {
    transform: rotateX(25deg) translateY(-40px) translateZ(-100px) scale(1.1);
    filter: invert(100%) hue-rotate(180deg) brightness(0.6) contrast(1.5) saturate(0.5);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.immersive-mode .cyber-grid-overlay {
    transform: rotateX(25deg);
    opacity: 0.8;
}

.immersive-mode #hud {
    transform: translate(-50%, -55%) translateZ(150px) rotateX(10deg);
}

/* Oracle Tactical Console */
#oracle-console {
    position: absolute;
    bottom: -150px;
    left: -20px;
    width: 140px;
    height: 100px;
    padding: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    color: var(--neon-blue);
    overflow: hidden;
    border-left: 2px solid var(--neon-blue);
    display: flex;
    flex-direction: column;
}

.console-header {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 3px;
    margin-bottom: 5px;
    font-weight: 900;
    opacity: 0.8;
}

#console-logs .log {
    margin-bottom: 2px;
    animation: log-slide 0.3s ease-out;
}

@keyframes log-slide {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Biometric Scanner */
#biometric-scanner {
    position: absolute;
    bottom: -150px;
    right: -20px;
    width: 120px;
    height: 80px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 2px solid var(--neon-pink);
    overflow: hidden;
}

.scan-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
    animation: bio-scan 2s linear infinite;
    opacity: 0.5;
}

@keyframes bio-scan {
    0% { top: 0; }
    100% { top: 100%; }
}

.bio-item {
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--text-light);
    margin: 2px 0;
}

#bio-bpm { color: var(--neon-pink); }
#bio-focus { color: var(--accent); }

/* Glitch Effect */
.glitch-active {
    animation: screen-glitch 0.2s infinite;
}

@keyframes screen-glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
    40% { transform: translate(2px, -1px); filter: invert(0.1); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
    100% { transform: translate(0); }
}

/* Radar Sweep Animation */
.radar-sweep { display: none; opacity: 0; 
    position: fixed;
    top: 50%; left: 50%;
    width: 200vw; height: 200vw;
    background: conic-gradient(from 0deg, transparent, rgba(0, 210, 255, 0.1) 10deg, transparent 90deg);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    animation: radar-spin 8s linear infinite;
}

@keyframes radar-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pilot XP Ranking */
.xp-rank-badge {
    position: absolute;
    top: 55px; left: 0;
    background: linear-gradient(90deg, var(--neon-blue), transparent);
    color: white;
    padding: 2px 10px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    border-left: 3px solid white;
}

.grid-status-active {
    position: absolute;
    top: 75px; left: 0;
    color: var(--neon-blue);
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 1px;
    opacity: 0.8;
}

.grid-status-active::before {
    content: "●";
    margin-right: 5px;
    animation: status-blink 1s steps(2) infinite;
}

@keyframes status-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* HEADS UP DISPLAY (HUD) - Replaced by .tactical-layout */
.speed-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hud-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

#compass-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    border: 1px solid var(--glass-border);
}

#compass-needle {
    font-size: 1.2rem;
    color: var(--accent);
    transition: transform 0.2s ease-out;
}

#compass-dir {
    font-size: 0.6rem;
    font-weight: 900;
    margin-top: -2px;
}

#compass-needle {
    display: inline-block;
    transition: transform 0.1s linear;
}

#sensor-overlay:not(.hidden) {
    display: flex !important;
}
.hud-item.timer {
    font-family: monospace;
    font-size: 1.1rem;
}
#speed-meter {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 30px var(--neon-blue);
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.3s ease;
}

#speed-meter.fast {
    color: var(--danger);
    text-shadow: 0 0 40px var(--neon-red);
    animation: speed-vibrate 0.1s infinite;
}

@keyframes speed-vibrate {
    0% { transform: translate(0,0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
    100% { transform: translate(0,0); }
}

/* Quantum Sync Bar */
.quantum-sync-bar {
    position: absolute;
    bottom: -15px;
    width: 80%;
    height: 4px;
    display: flex;
    gap: 4px;
}

.sync-segment {
    flex: 1;
    background: rgba(0, 242, 255, 0.2);
    border-radius: 2px;
    height: 100%;
    transition: all 0.2s ease;
}

.sync-segment.active {
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
}

.lean-meter {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: -35px;
    width: 100px;
}

.lean-bar-bg {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    display: flex;
}

.lean-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.1s linear;
}

#lean-fill-L { transform: scaleX(-1); transform-origin: right; }

.lean-angle-val {
    font-size: 0.7rem;
    font-weight: 900;
    margin-top: 2px;
    font-family: 'JetBrains Mono';
}

/* G-FORCE METER (NEW v29) */
.g-force-meter {
    position: absolute;
    bottom: -35px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--glass-border);
}

.g-force-val {
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--neon-blue);
    font-family: 'JetBrains Mono';
}

.g-force-label {
    font-size: 0.5rem;
    text-transform: uppercase;
    color: #666;
}

/* PILOT LEVEL TAG */
.pilot-level-tag {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--accent);
    color: black;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 1px;
    box-shadow: 0 0 10px var(--accent-glow);
}

.rodage-badge {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    background: #f39c12;
    color: white;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
    animation: alert-pulse 1s infinite alternate;
    white-space: nowrap;
}

.rodage-active-btn {
    color: #f39c12 !important;
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.6);
}

.weather-alert {
    color: #ff4d4d !important;
    animation: alert-pulse 1s infinite alternate;
}

/* Bouton Menu Intégré au HUD */
.btn-hud-menu {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, background 0.2s;
}
.btn-hud-menu:active {
    transform: scale(0.9);
    background-color: rgba(255, 183, 3, 0.3);
}

/* NAVIGATION PANEL & BARS */
#nav-instruction {
    position: absolute;
    top: 120px;
    top: calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + 120px);
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 380px;
    padding: 15px 20px;
    border-radius: 15px;
    z-index: 999;
    display: flex;
    border-left: 5px solid var(--accent);
}

/* --- LOGIN & ADVANTAGES --- */
.login-body {
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-overlay {
    width: 100%;
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .login-overlay { grid-template-columns: 1fr; }
}

.login-container {
    padding: 40px;
    text-align: center;
}

.advantages-container {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.advantages-container h3 {
    color: var(--neon-gold);
    letter-spacing: 3px;
    margin-bottom: 25px;
    font-size: 1.2rem;
    text-align: center;
}

.advantage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.adv-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.adv-item:hover {
    transform: translateY(-50px);
    background: rgba(255, 255, 255, 0.05);
}

.adv-item i {
    font-size: 1.5rem;
    color: var(--neon-blue);
    margin-bottom: 10px;
}

.adv-item h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #fff;
}

.adv-item p {
    font-size: 0.7rem;
    color: #888;
    line-height: 1.4;
}

/* --- BOTTOM NAVIGATION BAR (V8 ERGONOMICS) --- */
#bottom-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    height: calc(70px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px env(safe-area-inset-bottom, 0px);
    z-index: 5000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
}

.nav-item i {
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.nav-item span {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-item.active {
    color: var(--neon-gold);
}

.nav-map-btn {
    width: 60px;
    height: 60px;
    background: var(--neon-gold);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -45px;
    border: 5px solid #000;
    box-shadow: 0 5px 20px rgba(255, 183, 3, 0.5);
    transition: transform 0.2s;
}

.nav-map-btn i {
    font-size: 1.8rem;
    margin-bottom: 0;
}

.nav-item.active .nav-map-btn {
    transform: scale(1.1);
}

/* FLOATING TACTICAL BUTTONS */
#floating-actions {
    position: fixed;
    bottom: 90px;
    left: 0;
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 4000;
}

.fab-tactical {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    transition: transform 0.2s, background 0.2s;
}

.fab-tactical:active { transform: scale(0.9); }

.btn-danger { background: rgba(231, 76, 60, 0.9); }
.btn-warning { background: rgba(255, 183, 3, 0.9); color: black; }
.btn-guardian { background: rgba(0, 242, 255, 0.9); color: black; }

.advantage-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.adv-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.adv-box i {
    font-size: 1.8rem;
    color: var(--neon-blue);
    margin-bottom: 10px;
}

.adv-box h4 {
    font-size: 0.8rem;
    color: var(--neon-gold);
    margin-bottom: 5px;
}

.adv-box p {
    font-size: 0.65rem;
    color: #ccc;
    line-height: 1.3;
}

#safety-banner {
    position: fixed;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ff4d4d;
    border: 2px solid #ff4d4d;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* NIGHT VISION AR OVERLAY */
#ar-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.night-vision-active #ar-overlay {
    opacity: 1;
    filter: sepia(1) hue-rotate(70deg) brightness(1.2) contrast(1.4);
}

.night-vision-active #map {
    opacity: 0.3;
}

.night-vision-active .cyber-grid-overlay {
    background-image: linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
}

@keyframes alert-flash {
    0% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    100% { transform: translateX(-50%) scale(1.05); opacity: 1; box-shadow: 0 0 40px #ff4d4d; }
}

.nav-icon {
    font-size: 1.5rem;
    color: var(--accent);
}

.nav-text {
    display: flex;
    flex-direction: column;
}

#next-step-name {
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
}

#next-step-dist {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
}

#nav-info-bar {
    position: absolute;
    bottom: 120px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 450px;
    height: 70px;
    border-radius: 15px;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.info-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-group label {
    font-size: 0.65rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 900;
}

.info-group span {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

/* PREMIUM CONTROL ROW */
#control-row {
    position: absolute;
    bottom: 30px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 450px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 4000;
    pointer-events: auto;
}

.mileage-badge {
    position: absolute;
    bottom: 105px; /* Ajusté pour être au-dessus du bouton PTT (qui fait 65px + 30px bottom) */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: var(--neon-blue);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(0, 242, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
    pointer-events: none;
    z-index: 4001;
    white-space: nowrap;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-circular {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: var(--shadow-premium);
    transition: transform 0.2s, background 0.2s;
}

.btn-circular span {
    font-size: 0.5rem;
    font-weight: 900;
    margin-top: 3px;
}

.btn-red { background: #b40000; border: 2px solid #ff4444; }
.btn-neon { 
    background: #000; 
    border: 3px solid var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
    color: var(--accent);
}
#btn-reroute {
    width: 85px;
    height: 85px;
    font-size: 1.8rem;
    border-width: 4px;
}
.btn-dark { background: rgba(30, 30, 30, 0.8); border: 1px solid #444; color: #888; }

.btn-circular:active { transform: scale(0.9); }
.btn-guardian {
    background: rgba(0, 210, 255, 0.1);
    border: 2px solid var(--neon-blue);
    color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
    animation: guardian-glow 4s infinite alternate;
}

.btn-guardian.active {
    background: var(--neon-blue);
    color: black;
    box-shadow: 0 0 30px var(--neon-blue);
    animation: guardian-pulse 1.5s infinite alternate;
}

#guardian-halo {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 210, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--neon-blue);
    font-size: 1.5rem;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
    animation: halo-rotation 10s linear infinite;
    z-index: 100;
}

@keyframes guardian-glow {
    0% { opacity: 0.7; box-shadow: 0 0 10px rgba(0, 210, 255, 0.3); }
    100% { opacity: 1; box-shadow: 0 0 25px rgba(0, 210, 255, 0.6); }
}

@keyframes guardian-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

@keyframes halo-rotation {
    0% { transform: rotate(0deg); border: 1px solid transparent; }
    50% { border: 1px solid var(--neon-blue); }
    100% { transform: rotate(360deg); border: 1px solid transparent; }
}


.fab {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: none;
    outline: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.fab:active {
    transform: scale(0.85);
}

.btn-danger {
    background-color: var(--danger);
    font-size: 1.2rem;
    font-weight: 900;
    flex-direction: column;
}
.btn-danger i { font-size: 1.6rem; margin-bottom: 2px;}
.btn-danger:hover { background-color: var(--danger-hover); }

.btn-warning {
    background-color: var(--warning);
    font-size: 2.2rem;
    color: #222;
}
.btn-warning:hover { background-color: var(--warning-hover); }

/* VUE ALERTE CHUTE */
#fall-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(180, 0, 0, 0.9); /* Rouge transparent très intense */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

#fall-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.alert-box {
    background: #0a0a0a;
    border-radius: 25px;
    padding: 50px 30px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.9);
    border: 2px solid #ff4444;
    animation: alert-pulse 1.2s infinite alternate;
}

@keyframes alert-pulse {
    0% { transform: scale(1); box-shadow: 0 0 30px rgba(255,0,0,0.4); }
    100% { transform: scale(1.03); box-shadow: 0 0 80px rgba(255,0,0,1); }
}

.alert-box h1 {
    color: #ff4444;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.alert-box p {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 30px;
}

#countdown {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    color: white;
    margin-bottom: 40px;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
}

.btn-cancel {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 20px;
    font-size: 1.3rem;
    font-weight: 900;
    border-radius: 35px;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(255,255,255,0.2);
    transition: background 0.2s;
}

.btn-cancel:active { background: #d4d4d4; }

/* --- SIDEBAR & SERVICES --- */
/* Sidebar Slide-in Logic (Side Menu) */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: var(--bg-dark);
    z-index: 5000;
    padding: 20px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 40px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
}
.sidebar-hidden {
    transform: translateX(-105%);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
}
.sidebar-header h2 { font-size: 1.3rem; color: #fff; }

.btn-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
}
.user-info i { color: var(--accent); font-size: 1.5rem; }

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-list li {
    padding: 14px 15px;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ccc;
}

.menu-list li:active {
    background: rgba(255, 183, 3, 0.2);
    transform: scale(0.97);
}

.menu-list li i {
    width: 20px;
    text-align: center;
}

/* Sidebar Cards */
.card {
    background: #1e1e1e;
    border-radius: 15px;
    padding: 18px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.card h3 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Maintenance */
.card-maintenance h3 { color: #ffb703; }
.alert-list { list-style: none; }
.alert-item {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}
.warning { background: rgba(255, 183, 3, 0.15); border-left: 4px solid #ffb703; color: #ffc233; }
.danger { background: rgba(207, 26, 26, 0.15); border-left: 4px solid #cf1a1a; color: #ff5c5c; }
.ok { background: rgba(46, 204, 113, 0.1); border-left: 4px solid #2ecc71; color: #2ecc71; }

.card-hazards {
    background: rgba(220, 20, 20, 0.1);
    border-left: 4px solid var(--danger);
    margin-top: 10px;
}
.card-hazards h3 { color: var(--danger); font-size: 0.9rem; }

.hazard-alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 0.8rem;
    border: 1px solid rgba(255,255,255,0.05);
}
.hazard-alert i { color: var(--danger); margin-right: 8px; }
.hazard-alert strong { color: #fff; }
.hazard-alert span { color: #aaa; font-size: 0.7rem; }


/* Advice */
.card-advice h3 { color: #ffb703; }
.advice-item { margin-bottom: 15px; }
.advice-item h4 { font-size: 0.95rem; color: #fff; margin-bottom: 5px; }
.advice-item p { font-size: 0.85rem; color: #aaa; line-height: 1.4;}

/* Insurance */
.card-insurance {
    background: linear-gradient(135deg, #1d2b64, #f8cdda);
    border: 1px solid #7a6e8f;
    position: relative;
    color: #fff;
}
.card-insurance h3 { color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.insurance-badge {
    position: absolute;
    top: -12px;
    right: 15px;
    background: #ffb703;
    color: #000;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 900;
    border-radius: 12px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.card-insurance p {
    font-size: 0.9rem;
    margin-bottom: 20px;
    color: #f0f0f0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    line-height: 1.4;
}
.btn-insurance {
    display: block;
    text-align: center;
    background: #ffb703;
    color: #000;
    text-decoration: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1.1rem;
    transition: transform 0.2s;
    box-shadow: 0 5px 15px rgba(255, 183, 3, 0.4);
}
.btn-insurance:active { transform: scale(0.95); }

/* Promo Box */
.card-insurance .promo-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.5);
}
.card-insurance .promo-box span { display: block; font-size: 0.8rem; color: #ddd; margin-bottom: 5px; }
.card-insurance .promo-box strong { font-size: 1.3rem; color: #ffb703; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

/* Broker Contact */
.broker-contact {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    border-left: 4px solid #ffb703;
}
.broker-contact strong { font-size: 1.1rem; color: #fff; display: block; margin-bottom: 5px; text-transform: uppercase; }
.broker-contact a { color: #ffb703; text-decoration: none; display: block; }
.broker-contact a:hover { text-decoration: underline; }
.broker-contact span { color: #f0f0f0; display: block; margin-top: 5px; font-size: 0.85rem; }

/* --- LOGIN & AUTH VIEWS --- */
.login-body {
    background: url('https://images.unsplash.com/photo-1558981403-c5f9899a28bc?q=80&w=2670&auto=format&fit=crop') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-overlay { 
    background: rgba(0,0,0,0.6); 
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center; 
}
.login-container {
    width: 90%;
    max-width: 400px;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    background: rgba(20,20,20,0.4);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
}
.login-logo { font-size: 3rem; color: #ffb703; margin-bottom: 10px; }
.login-title { font-size: 2rem; color: #fff; text-transform: uppercase; letter-spacing: 2px; }
.login-subtitle { font-size: 1rem; color: #bbb; margin-bottom: 30px; }
.auth-form input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid #555;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 1rem;
    outline: none;
}
.auth-form input:focus { border-color: #ffb703; }
.btn-auth {
    width: 100%; padding: 15px; border-radius: 10px; border: none;
    background: #ffb703; color: #000; font-weight: bold; font-size: 1.1rem;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,225,255,0.4);
}
.btn-auth-alt { background: #ffb703; box-shadow: 0 4px 15px rgba(255,183,3,0.4); }
.switch-link { margin-top: 20px; color: #aaa; cursor: pointer; font-size: 0.9rem; }
.switch-link strong { color: #fff; border-bottom: 1px solid var(--accent); }

/* --- ADMIN PANEL --- */
.admin-body { background: #0f172a; color: white; display: block; overflow-y: auto; padding-bottom: 50px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: 25px; background: #1e293b; border-bottom: 1px solid #334155; }
.admin-header h1 { font-size: 1.5rem; color: #0ea5e9; }
.btn-admin-link { color: #fff; text-decoration: none; margin-right: 15px; background: #334155; padding: 10px 15px; border-radius: 8px; }
.btn-admin-logout { background: #ef4444; color: white; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; }
.admin-dashboard { padding: 30px; display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1200px; margin: auto;}
@media(min-width: 800px){ .admin-dashboard{ grid-template-columns: 1fr 1fr; } }
.admin-panel { background: #1e293b; border-radius: 15px; padding: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.admin-panel h2 { color: #cbd5e1; margin-bottom: 20px; font-size: 1.2rem; border-bottom: 1px solid #334155; padding-bottom: 10px; }
.admin-list { list-style: none; }
.admin-list li { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #334155; margin-bottom: 10px; border-radius: 8px; }
.role-badge { background: #0ea5e9; padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; text-transform: uppercase; margin-left: 10px; }
.btn-delete { background: #ef4444; border: none; width: 35px; height: 35px; border-radius: 50%; color: white; cursor: pointer; transition: 0.2s; }
.btn-delete:hover { background: #dc2626; transform: scale(1.1);}
.btn-clear-all { width: 100%; padding: 15px; background: #7f1d1d; border: none; border-radius: 10px; color: white; font-weight: bold; margin-top: 20px; cursor: pointer; }

/* Select for Brand */
.scooter-brand-select {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #555;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 1rem;
    outline: none;
    appearance: none;
}
.scooter-brand-select option { background: #1e1e1e; }

/* Floating action buttons logic handled by IDs #btn-hazard-main and #btn-radar-main */

/* --- TICKER D'ACTUALITÉ --- */
#news-ticker {
    position: absolute;
    bottom: 20px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: 15px;
    width: calc(100% - 100px); /* Laisse de la place pour les boutons FAB à droite */
    max-width: 380px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.ticker-content {
    white-space: nowrap;
    animation: ticker-slide 18s linear infinite;
    color: #e0e0e0;
    font-size: 0.9rem;
    font-weight: 500;
}
.ticker-content strong { color: #ffb703; margin-right: 5px;}
.ticker-content span.marque { color: #ffb703; font-size: 0.8rem; font-weight: 800; margin-right: 5px; }
@keyframes ticker-slide {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-150vw); }
}

/* --- MOOD POPUP --- */
#mood-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 10001; transition: opacity 0.3s;
}
#mood-overlay.hidden { opacity: 0; pointer-events: none; }
.mood-box {
    width: 90%; max-width: 380px; padding: 30px; border-radius: 20px;
    text-align: center; border: 1px solid #ffb703;
    box-shadow: 0 10px 40px rgba(0,225,255,0.2);
}
.mood-box h2 { color: #fff; margin-bottom: 5px; font-size: 1.6rem; }
.mood-box p { color: #aaa; font-size: 0.95rem; margin-bottom: 25px; }
.mood-buttons { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.btn-mood {
    flex: 1; padding: 12px 5px; border-radius: 10px; border: none; cursor: pointer;
    font-weight: 900; font-size: 0.85rem; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}
.btn-mood:active { transform: scale(0.92); }
.btn-mood.good { background: #2ecc71; color: #000; }
.btn-mood.avg { background: #ffb703; color: #000; }
.btn-mood.bad { background: #e74c3c; }
#mood-comment {
    width: 100%; padding: 15px; border-radius: 10px; border: 1px solid #444;
    background: #0f0f0f; color: #fff; outline: none; margin-bottom: 10px;
}
#mood-comment:focus { border-color: #ffb703; }

/* --- BADGES ET TROPHEES --- */
.card-badges { background: rgba(30, 25, 10, 0.4); border-top: 2px solid #ffd700; margin-bottom: 15px;}
.badges-container { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.badge { padding: 10px; border-radius: 8px; font-weight: bold; font-size: 0.85rem; display: flex; gap: 10px; align-items: center; transition: 0.3s; }
.badge i { font-size: 1.2rem; }
.badge.locked { background: rgba(100,100,100,0.3); color: #777; filter: grayscale(100%); }
.badge.unlocked { background: linear-gradient(45deg, #ffd700, #ff8c00); color: #000; box-shadow: 0 0 10px rgba(255,215,0,0.6); }

/* Feature verrouillée (Mode Invité) */
.locked-feature {
    position: relative;
    overflow: hidden;
    filter: grayscale(80%);
}
.locked-feature::after {
    content: "🔒 Fonction réservée aux membres inscrits";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffb703;
    font-weight: 900;
    font-size: 1.1rem;
    text-align: center;
    padding: 20px;
    z-index: 10;
    backdrop-filter: blur(3px);
}


/* Animation Trophée */
@keyframes unlock-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); filter: brightness(1.5); }
    100% { transform: scale(1); }
}
.unlocked-now { animation: unlock-anim 1s ease; }

/* Garage Dynamic */
.garage-item { display: flex; flex-direction: column; background: #222; padding: 10px; border-radius: 8px; margin-bottom: 8px; border-left: 4px solid #ffb703; }
.garage-item.warning { border-left-color: #e74c3c; background: rgba(231, 76, 60, 0.1); }
.garage-header { display: flex; justify-content: space-between; font-weight: bold; font-size: 0.9rem; }
.garage-bar-bg { width: 100%; height: 6px; background: #444; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.garage-bar-fill { height: 100%; background: #ffb703; transition: width 0.5s; }
.garage-bar-fill.warning { background: #e74c3c; }
.btn-reset-garage { background: #333; color: white; border: none; padding: 5px; border-radius: 4px; font-size: 0.75rem; cursor: pointer; text-align: center; margin-top: 5px; transition: 0.2s;}
.btn-reset-garage:hover { background: #444; }

/* Roadbook list */
.rb-item { display:flex; justify-content:space-between; align-items:center; background:#2a2a2a; padding:10px; margin-bottom:5px; border-radius:5px; font-size:0.85rem; border-left: 3px solid #ffb703;}
.rb-item button { background:#ffb703; border:none; padding:6px 12px; border-radius:3px; cursor:pointer; color:black; font-weight:bold; }

/* --- BARRE DE RECHERCHE ITINÉRAIRE --- */
#search-container {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + 180px);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    background: rgba(15,15,15,0.9);
    border: 1px solid rgba(255, 183, 3, 0.4);
    animation: neon-pulse 4s infinite ease-in-out;
    -webkit-app-region: no-drag;
}

/* --- MENU SIDEBAR --- */
#btn-menu-toggle {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + 20px);
    left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: 0.3s;
    -webkit-app-region: no-drag;
}

/* Floating Map Controls */
#btn-hazard-main, #btn-radar-main {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    font-size: 1.5rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    box-shadow: var(--shadow-premium);
    transition: transform 0.2s;
    cursor: pointer;
}

#btn-hazard-main { left: 25px; background: rgba(220, 20, 20, 0.8) !important; color: white !important; }
#btn-radar-main { right: 25px; background: rgba(255, 183, 3, 0.8) !important; color: black !important; }

#hazard-options, #radar-options {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2500;
    transition: opacity 0.3s, transform 0.3s;
}

#hazard-options { left: 25px; }
#radar-options { right: 25px; align-items: flex-end; }

#hazard-options button, #radar-options button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}

#radar-options button {
    width: auto;
    border-radius: 25px;
    padding: 0 20px;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--warning);
    color: black;
}

#hazard-options button:active, #radar-options button:active { transform: scale(0.9); }

/* Remove old Sidebar definitions below to avoid conflicts */
#sidebar-placeholder { display: none; }


/* Remove Redundant sidebar header/toggle logic below */

/* EFFECTS: Route Glow */
.route-glow {
    filter: drop-shadow(0 0 8px #ffb703);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.route-glow-pink {
    filter: drop-shadow(0 0 8px #e91e63);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.route-glow-cyan {
    filter: drop-shadow(0 0 8px #ffb703);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hidden { display: none !important; }

/* .search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2px 5px;
}

#route-search {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
    outline: none;
    padding: 8px;
}
#route-search::placeholder { color: #666; }

.search-bar button {
    background: transparent;
    border: none;
    color: #ffb703;
    font-size: 1.3rem;
    cursor: pointer;
    margin-left: 8px;
    padding: 5px;
    transition: transform 0.2s, color 0.2s;
}

.search-bar button:active {
    transform: scale(0.8);
}

.search-bar button#btn-cancel-route {
    color: #ff4444;
} */

/* Scrollbar Style for Sidebar */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}
.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 183, 3, 0.3);
    border-radius: 3px;
}
.night-theme {
    filter: brightness(0.8) contrast(1.1) saturate(1.2);
}
.night-theme #map {
    filter: brightness(0.6) contrast(1.2) saturate(0.8);
}

.hazard-toast {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10002;
    padding: 15px 20px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--danger);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    animation: slideUpToast 0.4s ease-out;
}
.hazard-toast p { margin-bottom: 12px; font-weight: bold; }
.hazard-toast button {
    padding: 8px 15px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
}

#perf-hud {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + 95px);
    right: 20px;
    padding: 10px 15px;
    border-radius: 12px;
    z-index: 1000;
    font-weight: bold;
    color: #ffb703;
    border: 1px solid #ffb703;
    animation: neon-pulse 2s infinite ease-in-out;
    -webkit-app-region: no-drag;
}

#odometer-container {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
    right: 25px;
    padding: 10px 15px;
    border-radius: 15px;
    z-index: 1000;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
}

.parking-active {
    color: #2ecc71 !important;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

@keyframes slideUpToast {
    from { transform: translate(-50%, 30px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* PTT BUTTON STYLES */
#btn-ptt {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid var(--neon-blue) !important;
    color: var(--neon-blue) !important;
}
#btn-ptt.active {
    background: var(--neon-blue) !important;
    color: black !important;
    box-shadow: 0 0 20px var(--neon-blue);
}
#btn-ptt.talking {
    background: #ff4d4d !important;
    border-color: #ff4d4d !important;
    color: white !important;
    transform: scale(1.2);
    box-shadow: 0 0 30px #ff4d4d;
}

/* NEURAL PARTICLES FLOW */
#neural-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 0 10px #fff;
    filter: blur(1px);
}

/* BIOMETRIC SCANNER */
.biometric-scan {
    position: relative;
    overflow: hidden;
}
.biometric-scan::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 5px;
    background: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue);
    animation: scan-laser 2s infinite linear;
}
@keyframes scan-laser {
    0% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
@keyframes sentinel-scan {
    0% { left: -30%; }
    100% { left: 100%; }
}
.promo-badge-gold { background: linear-gradient(45deg, #ffb703, #fff200); color: #000; padding: 10px; border-radius: 10px; font-weight: 900; font-size: 1rem; text-align: center; margin-bottom: 10px; box-shadow: 0 0 20px rgba(255, 183, 3, 0.6); animation: gold-pulse 2s infinite; } @keyframes gold-pulse { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 183, 3, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 183, 3, 0.8); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 183, 3, 0.4); } } @keyframes silver-pulse { 0% { opacity: 0.8; } 50% { opacity: 1; filter: brightness(1.2); } 100% { opacity: 0.8; } }
/* --- NAVIGATION SYSTEM (SIDEBAR & OVERLAY) --- */
#sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    background: rgba(0, 5, 10, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    z-index: 10005;
    transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow-y: auto;
    padding: 0;
}

#sidebar.active {
    left: 0;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    z-index: 10004;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#overlay.active {
    display: block;
    opacity: 1;
}

.sidebar-header {
    padding: 25px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h2 {
    font-size: 1.2rem;
    color: var(--neon-gold);
    letter-spacing: 2px;
}

.menu-list {
    list-style: none;
    padding: 10px;
}

.menu-list li {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    color: #eee;
}

.menu-list li:active {
    background: rgba(255, 255, 255, 0.1);
}

.menu-list li i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 900;
    margin-left: auto;
}

/* --- SENTINEL TACTICAL HUD --- */
.tactical-layout {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tactical-panel {
    background: rgba(10, 15, 20, 0.6);
    border: 1px solid rgba(0, 210, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    pointer-events: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* TOP BAR */
.tactical-top-bar {
    margin: calc(env(safe-area-inset-top, 0px) + 20px) 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tactical-speed-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 30px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.tactical-speed-val {
    font-size: 4.5rem;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(180deg, #fff200, #ffb703);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 20px rgba(255, 183, 3, 0.8);
    line-height: 1;
}

.tactical-speed-unit {
    color: white;
    font-size: 1rem;
    font-weight: 700;
    margin-top: -5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tactical-sentinel-badge {
    background: rgba(10, 15, 20, 0.8);
    border-radius: 15px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(46, 204, 113, 0.2);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    cursor: pointer;
    pointer-events: auto;
}

.tactical-sentinel-badge i {
    font-size: 2rem;
    color: #2ecc71;
    filter: drop-shadow(0 0 10px #2ecc71);
    margin-bottom: 5px;
}

.tactical-sentinel-badge .sentinel-text {
    color: #2ecc71;
    font-size: 0.75rem;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 0 5px #2ecc71;
    line-height: 1.2;
}

/* DESTINATION PILL */
.tactical-dest-pill {
    align-self: center;
    margin-top: 15px;
    padding: 10px 25px;
    border-radius: 25px;
    color: #888;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.tactical-dest-pill span {
    color: #00d2ff;
}

/* BOTTOM PANEL */
.tactical-bottom-panel {
    margin: 0 20px 20px;
    padding: 15px 20px;
}

.tactical-route-header {
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.tactical-route-header .route-title {
    color: #00d2ff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

.tactical-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.stat-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.7rem;
    color: #888;
    font-weight: 600;
}

.stat-group.center-align { text-align: center; }
.stat-group.right-align { text-align: right; }

.stat-group span {
    color: white;
    font-weight: 800;
    margin-left: 3px;
}

/* BOTTOM NAV BAR */
.tactical-nav-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: transparent;
    padding: 0 15px 25px;
    pointer-events: auto;
}

.t-nav-btn {
    background: transparent;
    border: none;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.3s;
}

.t-nav-btn i { font-size: 1.5rem; }
.t-nav-btn span { font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; }

.t-nav-btn.active, .t-nav-btn:hover {
    color: #00d2ff;
}

.t-nav-btn.active i {
    filter: drop-shadow(0 0 10px #00d2ff);
}
.fullscreen-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 15, 20, 0.95);
    z-index: 10002;
    overflow-y: auto;
    pointer-events: auto;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(255,0,0,0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(255,0,0,0.8); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(255,0,0,0.5); }
}

@keyframes sound-bar {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1.5); }
}

@keyframes wave-pulse {
    0% { transform: translateX(-50%); opacity: 0.5; }
    50% { opacity: 1; }
    100% { transform: translateX(0%); opacity: 0.5; }
}

/* TACTICAL HUD OVERLAY */
#hud.tactical-layout {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    padding: env(safe-area-inset-top, 40px) 20px env(safe-area-inset-bottom, 20px) 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    pointer-events: none; /* Let clicks pass through the HUD container */
    z-index: 10005;
    box-shadow: none;
    background: transparent;
    transform: none;
    border-radius: 0;
}

#hud.tactical-layout > * {
    pointer-events: auto; /* Re-enable clicks for actual HUD elements */
}

/* TOP ROW */
.tactical-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.tactical-speed-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
}

.tactical-speed-val {
    font-size: 6rem;
    font-weight: 900;
    color: var(--neon-gold, #ffb700);
    text-shadow: 0 0 20px rgba(255, 183, 0, 0.5);
    line-height: 0.9;
    font-family: 'Inter', sans-serif;
}

.tactical-speed-unit {
    font-size: 1.2rem;
    color: #ccc;
    font-weight: 600;
    letter-spacing: 1px;
}

.tactical-sentinel-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 20, 30, 0.6);
    border: 1px solid rgba(0, 242, 255, 0.3);
    border-radius: 20px;
    padding: 10px 15px;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
    cursor: pointer;
}

.tactical-sentinel-badge i {
    font-size: 2.2rem;
    color: var(--neon-blue, #00d2ff);
    filter: drop-shadow(0 0 10px var(--neon-blue, #00d2ff));
    margin-bottom: 5px;
}

.tactical-sentinel-badge .sentinel-text {
    font-size: 0.75rem;
    color: #00d2ff;
    text-align: center;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

/* DESTINATION PILL */
.tactical-dest-pill {
    align-self: center;
    background: rgba(10, 20, 30, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 8px 20px;
    font-size: 0.8rem;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: auto; /* Push bottom panel down */
}

/* BOTTOM STATS PANEL */
.tactical-bottom-panel {
    background: rgba(5, 8, 15, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

.tactical-route-header {
    border-bottom: 1px solid rgba(0, 242, 255, 0.3);
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.tactical-route-header .route-title {
    color: var(--neon-blue, #00d2ff);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.tactical-stats-grid {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #aaa;
    line-height: 2;
}

.tactical-stats-grid span {
    color: #fff;
    font-weight: 700;
    margin-left: 5px;
}

.stat-group {
    display: flex;
    flex-direction: column;
}

.stat-group.left-align { text-align: left; }
.stat-group.center-align { text-align: center; }
.stat-group.right-align { text-align: right; }

/* NAV BAR REWRITE */
.tactical-nav-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(5, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 40px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 10px;
}

.t-nav-btn {
    background: transparent;
    border: none;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.3s;
    flex: 1;
}

.t-nav-btn i { font-size: 1.4rem; }
.t-nav-btn span { font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; }

.t-nav-btn.active, .t-nav-btn:hover {
    color: var(--neon-blue, #00d2ff);
}

.t-nav-btn.active i {
    filter: drop-shadow(0 0 10px var(--neon-blue, #00d2ff));
}

#search-container {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 100px);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    z-index: 10006;
    pointer-events: auto;
    display: block !important;
}

/* --- TELEMETRY DIAGNOSTIC HUD --- */
.telemetry-glass {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 250px;
    max-height: 300px;
    background: rgba(0, 10, 20, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 242, 255, 0.4);
    border-radius: 8px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    font-family: "JetBrains Mono", monospace;
    color: #00f2ff;
    font-size: 0.65rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 242, 255, 0.2);
    pointer-events: auto;
    overflow: hidden;
}

.telemetry-header {
    background: rgba(0, 242, 255, 0.1);
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0, 242, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 900;
    letter-spacing: 1px;
}

.telemetry-header button {
    background: none;
    border: none;
    color: #ff0055;
    cursor: pointer;
    font-weight: bold;
}

.telemetry-stats {
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.telemetry-stats div {
    display: flex;
    justify-content: space-between;
}

.telemetry-stats span {
    color: #fff;
    font-weight: bold;
}

.telemetry-logs {
    flex: 1;
    overflow-y: auto;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.3);
}

.log-entry {
    margin-bottom: 3px;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 2px;
}

.log-time { color: #666; }
.log-info { color: #00f2ff; }
.log-warn { color: #ffb700; }
.log-error { color: #ff0055; font-weight: bold; }

.telemetry-logs::-webkit-scrollbar { width: 4px; }
.telemetry-logs::-webkit-scrollbar-track { background: transparent; }
.telemetry-logs::-webkit-scrollbar-thumb { background: rgba(0, 242, 255, 0.3); border-radius: 2px; }

/* --- TELEMETRY & DIAGNOSTICS CONSOLE --- */
#telemetry-console {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 280px;
    max-height: 400px;
    background: rgba(5, 12, 22, 0.85);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 242, 255, 0.1);
    border-radius: 12px;
    z-index: 30000;
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    color: #fff;
    pointer-events: auto;
}

.telemetry-header {
    background: rgba(0, 242, 255, 0.1);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 242, 255, 0.2);
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.telemetry-header button {
    background: transparent;
    border: none;
    color: var(--neon-red);
    cursor: pointer;
    font-weight: bold;
}

.telemetry-stats {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    font-size: 0.6rem;
    background: rgba(0,0,0,0.2);
}

.telemetry-stats div {
    color: rgba(255,255,255,0.6);
}

.telemetry-stats span {
    color: var(--neon-blue);
    font-weight: bold;
}

.telemetry-actions {
    padding: 5px 10px;
    display: flex;
    gap: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.telemetry-actions button {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    font-size: 0.5rem;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.telemetry-actions button:hover {
    background: rgba(0, 242, 255, 0.1);
    color: var(--neon-blue);
}

.telemetry-logs {
    flex: 1;
    padding: 5px 10px;
    overflow-y: auto;
    font-size: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(0,0,0,0.3);
}

.log-entry {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}

.log-time {
    color: #666;
    margin-right: 5px;
}

.log-info { color: #fff; }
.log-warn { color: var(--neon-gold); }
.log-error { color: var(--neon-red); }
.log-success { color: #00ff88; }

/* --- ULTIMATE SIDEBAR FIX --- */
#sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 20000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    border-right: 1px solid var(--neon-blue) !important;
    overflow-y: auto !important;
    display: block !important;
}

#sidebar.active {
    transform: translateX(0) !important;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.8) !important;
}

#overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 19999 !important;
    display: none !important;
    backdrop-filter: blur(5px) !important;
}

#overlay.active {
    display: block !important;
}

.menu-list li {
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* CARTES HORS LIGNE — Styles                                      */
/* ═══════════════════════════════════════════════════════════════ */

/* Carte Leaflet : même position que Google Maps */
#leaflet-map {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0a131c;
    z-index: 1;
    filter: contrast(1.05) brightness(0.85) saturate(0.9);
}

/* Thème sombre pour Leaflet (override) */
.leaflet-tile-pane {
    filter: brightness(0.6) saturate(0.8) hue-rotate(190deg) contrast(1.2);
}

/* Supprime le fond blanc Leaflet */
.leaflet-container {
    background: #0a131c !important;
}

/* Attribution Leaflet — discrète */
.leaflet-control-attribution {
    background: rgba(0,0,0,0.6) !important;
    color: rgba(255,255,255,0.3) !important;
    font-size: 0.5rem !important;
    border-radius: 5px 0 0 0 !important;
}
.leaflet-control-attribution a {
    color: rgba(0,210,255,0.5) !important;
}

/* Badge hors ligne — animation d'entrée */
#offline-mode-badge {
    animation: offline-badge-in 0.5s ease-out;
}

@keyframes offline-badge-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Toast réseau — animation */
@keyframes toast-slide-in {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

/* Panneau hors ligne — animation d'ouverture */
#offline-panel:not(.hidden) > div {
    animation: panel-slide-up 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes panel-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Badge statut hors ligne dans le sidebar */
#offline-status-dot {
    transition: background 0.5s ease;
}

/* Barre de progression du téléchargement */
#offline-download-progress {
    animation: toast-slide-in 0.3s ease-out;
}

/* Input dans le panneau offline */
#offline-zone-name:focus {
    border-color: rgba(0,242,255,0.5) !important;
    box-shadow: 0 0 10px rgba(0,242,255,0.2);
}

#offline-radius-select option {
    background: #050f1a;
    color: #fff;
}

/* Marqueur Leaflet personnalisé (pas de shadow par défaut) */
.leaflet-marker-icon {
    filter: drop-shadow(0 0 8px rgba(255,183,0,0.6));
}

/* Popup Leaflet style HUD */
.leaflet-popup-content-wrapper {
    background: rgba(5,10,20,0.95) !important;
    border: 1px solid rgba(0,242,255,0.4) !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(0,242,255,0.2) !important;
}

.leaflet-popup-tip {
    background: rgba(0,242,255,0.3) !important;
}

.leaflet-popup-close-button {
    color: #00f2ff !important;
}

/* Route Leaflet (polyline) */
.leaflet-offline-route {
    stroke: #00f2ff;
    stroke-width: 4;
    stroke-dasharray: 8, 4;
    fill: none;
    filter: drop-shadow(0 0 4px rgba(0,242,255,0.6));
}

/* --- SHADOW MODE --- */
body.shadow-mode {
    background: #000 !important;
}
body.shadow-mode .tactical-nav-bar,
body.shadow-mode #search-container,
body.shadow-mode .tactical-sentinel-badge,
body.shadow-mode #menu-container {
    display: none !important;
}
body.shadow-mode #map {
    filter: grayscale(1) contrast(1.5) brightness(0.4) !important;
}
body.shadow-mode .tactical-speed-panel {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
}
body.shadow-mode .tactical-speed-val {
    color: #444 !important;
    text-shadow: none !important;
}

/* --- SONAR COMMUNAUTAIRE --- */
.sonar-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid #9b59b6;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    animation: sonar-ping 4s ease-out infinite;
}
@keyframes sonar-ping {
    0% { width: 0; height: 0; opacity: 1; border-width: 5px; }
    100% { width: 500px; height: 500px; opacity: 0; border-width: 1px; }
}

/* --- ALLY MARKER --- */
.ally-marker {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #9b59b6;
    border-radius: 50%;
    box-shadow: 0 0 15px #9b59b6;
    z-index: 10000;
    pointer-events: none;
    animation: ally-fade 6s forwards;
}
@keyframes ally-fade {
    0% { opacity: 0; transform: scale(0); }
    10% { opacity: 1; transform: scale(1.5); }
    20% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}


@keyframes title-glow {
    0% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.2)); letter-spacing: 8px; }
    100% { filter: drop-shadow(0 0 15px rgba(204,160,0,0.5)); letter-spacing: 12px; }
}


/* --- INSURANCE PORTAL STYLES --- */
.insurance-portal-container {
    padding: 20px;
    background: rgba(10, 10, 15, 0.95);
    border-radius: 15px;
    color: white;
}

.wallet-status {
    display: flex;
    justify-content: space-between;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid #2ecc71;
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#portal-balance {
    color: #2ecc71;
    font-family: 'Orbitron', sans-serif;
}

.case-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.case-status {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 5px;
}

.status-pending_payment { background: #e67e22; color: white; }
.status-pending_verification { background: #3498db; color: white; }
.status-unlocked { background: #2ecc71; color: white; }

.payment-option {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-blue);
    transform: translateX(5px);
}

.option-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    width: 40px;
    text-align: center;
    color: var(--neon-blue);
}

.option-details {
    flex: 1;
}

.option-details strong {
    display: block;
    font-size: 0.9rem;
}

.option-details span {
    font-size: 0.7rem;
    color: #888;
}

.option-price {
    font-weight: bold;
    color: #2ecc71;
}

.unlocked-view {
    text-align: center;
    padding: 20px 0;
}

.success-msg {
    color: #2ecc71;
    margin-bottom: 20px;
}

.btn-download-report, .btn-replay-report {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.btn-download-report { background: #2ecc71; color: #000; }
.btn-replay-report { background: #3498db; color: white; }

.btn-close-portal {
    background: none;
    border: 1px solid #555;
    color: #888;
    width: 100%;
    margin-top: 20px;
    padding: 8px;
    border-radius: 8px;
    font-size: 0.75rem;
}

.status-waiting_for_funds { background: #8e44ad; color: white; }

.transaction-history {
    margin-top: 25px;
    border-top: 1px solid #333;
    padding-top: 15px;
}

.transaction-history h5 {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.transaction-list {
    max-height: 120px;
    overflow-y: auto;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.03);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 5px;
}

.t-amount {
    color: #e74c3c;
    font-weight: bold;
}