/* ===================================================================
   SIGNAL MONITOR — Feuille de style
   =================================================================== */

:root {
    --green: #ff2bd6;          /* accent primaire = rose néon (DA cyberpunk) */
    --cyan: #00e5ff;           /* accent secondaire = cyan néon */
    --amber: #ffb800;
    --red: #ff3b6b;
    --bg-dark: #07030f;
    --panel-bg: rgba(30, 8, 46, 0.45);
    --border: rgba(255, 43, 214, 0.42);
    --neon-pink: #ff2bd6;
    --neon-cyan: #00e5ff;
    --neon-purple: #b450ff;
}

/* fond spatial cyberpunk global */
body {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,43,214,0.10), transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(0,229,255,0.10), transparent 45%),
        radial-gradient(ellipse at 50% 50%, #120726 0%, #07030f 70%, #04020a 100%);
    background-attachment: fixed;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Space Mono', monospace;
    background: var(--bg-dark);
    color: var(--green);
    height: 100vh;
    overflow: hidden;
}

/* Scanlines CRT */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 9998;
}

[hidden] { display: none !important; }

/* ===================== BADGES ===================== */
.real-badge, .sim-badge {
    font-family: 'Space Mono', monospace;
    font-size: 0.6em;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
    vertical-align: middle;
    margin-left: 8px;
}
.real-badge {
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid var(--green);
    color: var(--green);
}
.sim-badge {
    background: rgba(255, 170, 0, 0.2);
    border: 1px solid var(--amber);
    color: var(--amber);
}

/* ===================== LOGIN ===================== */
.login-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.login-box {
    border: 3px solid var(--green);
    padding: 50px;
    background: rgba(0, 20, 50, 0.95);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.4);
    animation: slideDown 0.7s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}
.login-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2em;
    text-align: center;
    background: linear-gradient(90deg, var(--green), var(--cyan), #ff00ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
}
.login-subtitle {
    text-align: center;
    color: var(--cyan);
    margin: 10px 0 30px;
    font-size: 0.85em;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.form-input {
    width: 100%;
    padding: 12px;
    background: rgba(0, 255, 136, 0.05);
    border: 2px solid rgba(0, 255, 136, 0.3);
    color: var(--green);
    margin-bottom: 15px;
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 1em;
}
.form-input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}
.login-btn {
    width: 100%;
    padding: 14px;
    background: rgba(0, 255, 136, 0.2);
    border: 2px solid var(--green);
    color: var(--green);
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1em;
    border-radius: 4px;
    transition: all 0.3s;
}
.login-btn:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
    transform: translateY(-2px);
}
.login-error {
    color: var(--red);
    text-align: center;
    margin-top: 15px;
    min-height: 20px;
    font-size: 0.9em;
}
.login-error.shake { animation: shake 0.4s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}
.login-hint {
    text-align: center;
    color: var(--cyan);
    opacity: 0.6;
    margin-top: 20px;
    font-size: 0.8em;
}

/* ===================== LAYOUT ===================== */
.container {
    display: flex;
    height: 100vh;
    position: relative;
    z-index: 1;
}
.sidebar {
    width: 90px;
    background: rgba(0, 10, 20, 0.95);
    border-right: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 12px;
    overflow-y: auto;
}
.nav-item {
    width: 72px;
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    background: rgba(0, 255, 136, 0.05);
    color: var(--cyan);
    font-size: 0.65em;
    text-align: center;
    gap: 4px;
}
.nav-item:hover {
    background: rgba(0, 255, 136, 0.15);
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.4);
}
.nav-item.active {
    border-color: var(--green);
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.5);
}
.nav-icon { font-size: 1.8em; }

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.header {
    padding: 20px 25px;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
    background: rgba(0, 20, 50, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.header-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5em;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header-status { display: flex; align-items: center; gap: 15px; }
.conn-badge {
    padding: 8px 14px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--cyan);
    font-size: 0.85em;
}
.logout-btn {
    padding: 8px 16px;
    background: rgba(255, 0, 85, 0.2);
    border: 2px solid var(--red);
    color: var(--red);
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s;
}
.logout-btn:hover { box-shadow: 0 0 20px rgba(255, 0, 85, 0.5); }

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    background: rgba(0, 0, 0, 0.3);
}

/* ===================== TABS ===================== */
.tab { display: none; }
.tab.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===================== PANELS ===================== */
.panel {
    border: 2px solid var(--border);
    padding: 25px;
    background: var(--panel-bg);
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.12);
}
.panel-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--green);
    font-size: 1.1em;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
    padding-bottom: 12px;
}
.panel-note, .info-text {
    color: var(--cyan);
    font-size: 0.88em;
    line-height: 1.6;
    margin-top: 12px;
}
.info-panel { border-color: rgba(0, 204, 255, 0.4); }
.sim-panel { border-color: rgba(255, 170, 0, 0.4); }
.sim-warning {
    background: rgba(255, 170, 0, 0.1);
    border-left: 3px solid var(--amber);
    padding: 15px;
    border-radius: 4px;
    color: var(--amber);
    font-size: 0.88em;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ===================== GRIDS ===================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px; }

/* ===================== STAT CARDS ===================== */
.stat-card {
    background: rgba(0, 255, 136, 0.05);
    border: 2px solid rgba(0, 255, 136, 0.3);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s;
}
.stat-card:hover {
    background: rgba(0, 255, 136, 0.12);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3);
}
.stat-label { color: var(--cyan); font-size: 0.8em; text-transform: uppercase; margin-bottom: 8px; }
.stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8em;
    color: var(--green);
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
}
.stat-sub { color: var(--cyan); opacity: 0.7; font-size: 0.7em; margin-top: 6px; }

/* ===================== SIGNAL METER ===================== */
.signal-meter {
    width: 100%;
    height: 40px;
    background: rgba(0, 10, 20, 0.5);
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}
.signal-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    width: 0%;
    transition: width 0.4s, background 0.4s;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    color: #000;
    font-weight: bold;
    font-size: 0.9em;
}
.signal-bar.degrading { background: linear-gradient(90deg, var(--amber), var(--red)); }
.signal-bar.critical {
    background: linear-gradient(90deg, var(--red), #ff0000);
    animation: criticalFlash 0.4s infinite;
}
@keyframes criticalFlash {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 85, 0.5); }
    50% { box-shadow: 0 0 40px rgba(255, 0, 85, 0.9); }
}

/* ===================== CHARTS ===================== */
.chart-container {
    position: relative;
    height: 280px;
    background: rgba(0, 10, 20, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 15px;
    margin-bottom: 15px;
}

/* ===================== DEGRADATION ALERT ===================== */
.degradation-alert {
    background: rgba(255, 170, 0, 0.15);
    border-left: 4px solid var(--amber);
    padding: 15px;
    border-radius: 4px;
}
.degradation-title { color: var(--amber); font-weight: bold; margin-bottom: 8px; }
.degradation-alert div:last-child { color: var(--amber); font-size: 0.9em; line-height: 1.5; }

/* ===================== DETAIL LISTS ===================== */
.detail-list { display: flex; flex-direction: column; gap: 10px; }
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(0, 255, 136, 0.05);
    border-radius: 6px;
    border-left: 2px solid rgba(0, 255, 136, 0.4);
    font-size: 0.9em;
}
.detail-row .k { color: var(--cyan); }
.detail-row .v { color: var(--green); font-weight: bold; }

/* ===================== GEO ===================== */
.geo-status {
    padding: 12px;
    background: rgba(0, 204, 255, 0.1);
    border-radius: 6px;
    color: var(--cyan);
    font-size: 0.9em;
    margin-top: 12px;
}
.geo-status.active { background: rgba(0, 255, 136, 0.1); color: var(--green); }
.geo-status.error { background: rgba(255, 0, 85, 0.1); color: var(--red); }
.geo-field {
    background: rgba(0, 50, 100, 0.3);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 15px;
    border-radius: 8px;
}
.geo-label { color: var(--cyan); font-size: 0.8em; text-transform: uppercase; margin-bottom: 6px; }
.geo-value {
    color: var(--green);
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* ===================== BUTTONS ===================== */
.btn {
    padding: 12px 24px;
    background: rgba(0, 255, 136, 0.1);
    border: 2px solid var(--green);
    color: var(--green);
    cursor: pointer;
    border-radius: 6px;
    font-weight: bold;
    transition: all 0.3s;
    width: 100%;
    margin-bottom: 12px;
    font-family: 'Space Mono', monospace;
}
.btn:hover { background: rgba(0, 255, 136, 0.2); box-shadow: 0 0 25px rgba(0, 255, 136, 0.5); }
.btn-small {
    padding: 8px 14px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--green);
    color: var(--green);
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85em;
    transition: all 0.3s;
    font-family: 'Space Mono', monospace;
}
.btn-small:hover { background: rgba(0, 255, 136, 0.2); }

/* ===================== JAMMER CARDS (SIM) ===================== */
.jammer-card {
    border: 2px solid rgba(255, 170, 0, 0.4);
    padding: 18px;
    background: rgba(60, 40, 0, 0.2);
    margin-bottom: 15px;
    border-radius: 10px;
    transition: all 0.3s;
    position: relative;
}
.jammer-card:hover {
    border-color: var(--amber);
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.3);
    transform: translateX(4px);
}
.jammer-type { color: var(--amber); font-weight: bold; font-size: 1.05em; }
.jammer-distance { color: var(--green); font-size: 1.2em; margin: 10px 0; }
.jammer-meta { color: var(--cyan); font-size: 0.85em; }
.jammer-sig-bars { display: flex; gap: 3px; margin-top: 10px; }
.jammer-sig-bar { flex: 1; height: 6px; background: rgba(255,170,0,0.2); border-radius: 3px; }
.jammer-sig-bar.on { background: var(--amber); }

/* ===================== CONSOLE ===================== */
.console-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}
.autoscroll-label { color: var(--cyan); font-size: 0.85em; display: flex; align-items: center; gap: 6px; }
.console-output {
    background: #000;
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 6px;
    padding: 15px;
    height: 460px;
    overflow-y: auto;
    font-size: 0.82em;
    line-height: 1.5;
}
.log-line { margin-bottom: 4px; word-break: break-word; }
.log-time { color: #557; margin-right: 8px; }
.log-line.info .log-msg { color: var(--green); }
.log-line.warn .log-msg { color: var(--amber); }
.log-line.error .log-msg { color: var(--red); }
.log-line.geo .log-msg { color: var(--cyan); }
.log-line.net .log-msg { color: #88ddff; }
.log-line.sim .log-msg { color: #cc99ff; }
.log-tag {
    display: inline-block;
    min-width: 48px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 0.85em;
    background: rgba(255,255,255,0.05);
}

/* ===================== TOASTS ===================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.toast {
    background: rgba(255, 0, 85, 0.95);
    border: 2px solid var(--red);
    padding: 18px 22px;
    border-radius: 10px;
    max-width: 360px;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.6);
    animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #fff;
}
.toast.warn { background: rgba(255, 170, 0, 0.95); border-color: var(--amber); }
.toast.info { background: rgba(0, 204, 255, 0.95); border-color: var(--cyan); }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(400px); }
    to { opacity: 1; transform: translateX(0); }
}
.toast.out { animation: toastOut 0.3s ease forwards; }
@keyframes toastOut {
    to { opacity: 0; transform: translateX(400px); }
}
.toast-title { font-family: 'Orbitron', sans-serif; font-size: 1.05em; margin-bottom: 8px; text-transform: uppercase; }
.toast-body { font-size: 0.88em; line-height: 1.5; }

/* ===================== SCROLLBARS ===================== */
.scroll-area { max-height: 420px; overflow-y: auto; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 255, 136, 0.05); }
::-webkit-scrollbar-thumb { background: rgba(0, 255, 136, 0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 136, 0.7); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .sidebar { width: 72px; }
    .nav-item { width: 60px; height: 60px; }
    .header-title { font-size: 1.1em; }
}

/* ===================================================================
   AJOUTS v2 — Carte, Boussole, Batterie, Capteurs
   =================================================================== */

/* ---- Grille 4 colonnes (dashboard) ---- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 25px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .grid-4 { grid-template-columns: 1fr; } }

/* ---- CARTE LEAFLET ---- */
#mapView {
    width: 100%;
    height: 480px;
    border-radius: 10px;
    border: 2px solid var(--border);
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0, 255, 136, 0.1);
}
.map-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.map-stat {
    color: var(--green);
    font-weight: bold;
    margin-left: auto;
    font-size: 0.9em;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}
/* La carte Leaflet a un fond clair par défaut : on l'assombrit pour coller au thème */
.leaflet-tile { filter: brightness(0.7) invert(0) contrast(1.1) hue-rotate(170deg) saturate(0.6); }
.leaflet-container { background: #0a0e1a; }
.leaflet-control-attribution { background: rgba(0,0,0,0.6) !important; color: #88aacc !important; }
.leaflet-control-attribution a { color: var(--cyan) !important; }
.leaflet-bar a {
    background: rgba(0, 20, 40, 0.9) !important;
    color: var(--green) !important;
    border-color: var(--border) !important;
}
.leaflet-bar a:hover { background: rgba(0, 40, 70, 0.9) !important; }

/* Marqueur position live */
.live-marker { position: relative; }
.live-marker-dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    background: var(--green);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 12px var(--green);
    z-index: 2;
}
.live-marker-pulse {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    background: rgba(0, 255, 136, 0.4);
    border-radius: 50%;
    animation: markerPulse 1.6s ease-out infinite;
}
@keyframes markerPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(4); opacity: 0; }
}

/* ---- BOUSSOLE ---- */
.compass {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.compass-ring {
    position: relative;
    width: 200px;
    height: 200px;
    border: 3px solid var(--border);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,40,70,0.4), rgba(0,10,20,0.6));
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.2), inset 0 0 30px rgba(0,255,136,0.05);
}
.compass-mark {
    position: absolute;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    color: var(--cyan);
    font-size: 1.1em;
}
.compass-mark.n { top: 8px; left: 50%; transform: translateX(-50%); color: var(--red); }
.compass-mark.s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.compass-mark.e { right: 12px; top: 50%; transform: translateY(-50%); }
.compass-mark.o { left: 12px; top: 50%; transform: translateY(-50%); }
.compass-needle {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 80px;
    margin: -80px 0 0 -2px;
    background: linear-gradient(180deg, var(--red) 0%, var(--red) 50%, var(--green) 50%, var(--green) 100%);
    transform-origin: bottom center;
    transition: transform 0.2s ease-out;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.compass-center {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--green);
}
.compass-readout {
    margin-top: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.compass-readout #compassDeg {
    font-family: 'Orbitron', sans-serif;
    font-size: 2em;
    color: var(--green);
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
}
.compass-readout #compassCardinal {
    color: var(--cyan);
    font-size: 1.1em;
    letter-spacing: 2px;
}

/* ---- BATTERIE ---- */
.battery-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.battery-shell {
    display: flex;
    align-items: center;
    width: 160px;
    height: 70px;
    border: 3px solid var(--green);
    border-radius: 10px;
    padding: 6px;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}
.battery-cap {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 28px;
    background: var(--green);
    border-radius: 0 4px 4px 0;
}
.battery-level {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    border-radius: 5px;
    transition: width 0.5s, background 0.5s;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}
.battery-level.low { background: linear-gradient(90deg, var(--amber), var(--red)); }
.battery-level.critical { background: linear-gradient(90deg, var(--red), #ff0000); animation: criticalFlash 0.5s infinite; }
.battery-level.charging { background: linear-gradient(90deg, var(--cyan), var(--green)); animation: chargePulse 1.5s ease-in-out infinite; }
@keyframes chargePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.battery-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4em;
    color: var(--green);
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

/* ---- petit bouton danger ---- */
.danger-small {
    border-color: var(--red) !important;
    color: var(--red) !important;
    background: rgba(255, 0, 85, 0.1) !important;
}
.danger-small:hover { background: rgba(255, 0, 85, 0.2) !important; }

/* ===================================================================
   AJOUTS v3 — Sessions, alertes, capteurs avancés, thème clair, impression
   =================================================================== */

/* ---- Sélecteurs et boutons d'en-tête ---- */
.header-select {
    padding: 6px 10px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--border);
    color: var(--green);
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 0.85em;
    cursor: pointer;
}
.header-select option { background: #001428; color: var(--green); }
.icon-btn {
    width: 36px; height: 36px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--border);
    color: var(--green);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    transition: all 0.3s;
}
.icon-btn:hover { background: rgba(0, 255, 136, 0.2); box-shadow: 0 0 15px rgba(0, 255, 136, 0.4); }

/* ---- Champs de formulaire dans réglages ---- */
.field-label {
    display: block;
    color: var(--cyan);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 6px;
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cyan);
    margin: 10px 0;
    cursor: pointer;
}
.file-input {
    flex: 1;
    padding: 8px;
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid var(--border);
    color: var(--green);
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---- Result speedtest ---- */
.result-line {
    margin-top: 12px;
    padding: 12px;
    background: rgba(0, 50, 100, 0.3);
    border-radius: 6px;
    color: var(--green);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    border: 1px solid var(--border);
}

/* ---- Compteur de pas ---- */
.step-counter {
    margin-top: 20px;
    text-align: center;
    padding: 15px;
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.step-label {
    color: var(--cyan);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.step-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2em;
    color: var(--green);
    margin-top: 8px;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
}

/* ---- Niveau à bulle ---- */
.level-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}
.level-circle {
    position: relative;
    width: 200px;
    height: 200px;
    border: 3px solid var(--border);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 40, 70, 0.4), rgba(0, 10, 20, 0.6));
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.2), inset 0 0 20px rgba(0, 255, 136, 0.05);
    overflow: hidden;
}
.level-cross {
    position: absolute;
    top: 50%; left: 50%;
    width: 60%; height: 2px;
    background: rgba(0, 255, 136, 0.3);
    transform: translate(-50%, -50%);
}
.level-cross::before {
    content: '';
    position: absolute;
    top: -29px; left: 50%;
    width: 2px; height: 60px;
    background: rgba(0, 255, 136, 0.3);
    transform: translateX(-50%);
}
.level-bubble {
    position: absolute;
    top: 50%; left: 50%;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    background: radial-gradient(circle, var(--green), rgba(0, 255, 136, 0.5));
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px var(--green);
    transition: transform 0.1s ease-out;
}
.level-text {
    margin-top: 15px;
    font-family: 'Orbitron', sans-serif;
    color: var(--green);
    font-size: 1.1em;
}

/* ---- Cartes de session ---- */
.session-card {
    border: 2px solid var(--border);
    background: rgba(0, 50, 100, 0.2);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 12px;
    transition: all 0.3s;
}
.session-card:hover {
    border-color: var(--green);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
    transform: translateX(4px);
}
.session-date {
    color: var(--cyan);
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 0.95em;
}
.session-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.85em;
    color: var(--green);
}
.session-grid span {
    padding: 6px 10px;
    background: rgba(0, 255, 136, 0.05);
    border-radius: 4px;
    border-left: 2px solid var(--green);
}
@media (max-width: 700px) {
    .session-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Alertes (journal) ---- */
.alert-row {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 3px solid;
    background: rgba(0, 255, 136, 0.04);
    font-size: 0.88em;
}
.alert-row .k { color: var(--cyan); margin-right: 10px; font-weight: bold; }
.alert-row.warn { border-left-color: var(--amber); color: var(--amber); }
.alert-row.critical { border-left-color: var(--red); color: var(--red); background: rgba(255, 0, 85, 0.08); }

/* ---- Bouton heatmap actif ---- */
.btn-small.active {
    background: rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

/* ---- Marqueur de rejeu ---- */
.replay-marker { pointer-events: none; }
.replay-dot {
    width: 16px; height: 16px;
    background: var(--amber);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 18px var(--amber);
    animation: replayPulse 0.6s ease-in-out infinite;
}
@keyframes replayPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ---- Carte plein écran ---- */
#mapView:fullscreen, #mapView:-webkit-full-screen { height: 100vh; border-radius: 0; }

/* ===================================================================
   THÈME CLAIR — variables surchargées sous [data-theme="light"]
   =================================================================== */
[data-theme="light"] {
    --bg-dark: #f0f3f7;
    --panel-bg: rgba(255, 255, 255, 0.85);
    --border: rgba(0, 120, 80, 0.4);
}
[data-theme="light"] body { background: linear-gradient(135deg, #f0f3f7 0%, #e1e8f0 100%); color: #1a3a2a; }
[data-theme="light"] body::before { opacity: 0; }
[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.9); border-right-color: rgba(0, 120, 80, 0.3); }
[data-theme="light"] .nav-item { color: #2a5a4a; background: rgba(0, 120, 80, 0.05); }
[data-theme="light"] .nav-item:hover { background: rgba(0, 120, 80, 0.15); }
[data-theme="light"] .nav-item.active { background: rgba(0, 180, 100, 0.25); border-color: #00a86b; box-shadow: 0 0 20px rgba(0, 168, 107, 0.3); }
[data-theme="light"] .header { background: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(0, 120, 80, 0.3); }
[data-theme="light"] .header-title {
    background: linear-gradient(90deg, #00a86b, #0088cc);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .content-area { background: rgba(255, 255, 255, 0.4); }
[data-theme="light"] .panel { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 120, 80, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
[data-theme="light"] .panel-title { color: #006644; border-bottom-color: rgba(0, 120, 80, 0.2); text-shadow: none; }
[data-theme="light"] .panel-note, [data-theme="light"] .info-text { color: #335; }
[data-theme="light"] .stat-card { background: rgba(0, 168, 107, 0.05); border-color: rgba(0, 168, 107, 0.3); }
[data-theme="light"] .stat-label { color: #006644; }
[data-theme="light"] .stat-value { color: #00633e; text-shadow: none; }
[data-theme="light"] .stat-sub { color: #557; }
[data-theme="light"] .detail-row { background: rgba(0, 168, 107, 0.05); border-left-color: #00a86b; }
[data-theme="light"] .detail-row .k { color: #335; }
[data-theme="light"] .detail-row .v { color: #006644; }
[data-theme="light"] .form-input {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 120, 80, 0.3);
    color: #1a3a2a;
}
[data-theme="light"] .console-output { background: #fafdfa; color: #1a3a2a; border-color: rgba(0, 120, 80, 0.3); }
[data-theme="light"] .console-output .log-time { color: #889; }
[data-theme="light"] .signal-meter { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 120, 80, 0.3); }
[data-theme="light"] .chart-container { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 120, 80, 0.2); }
[data-theme="light"] .geo-status { background: rgba(0, 168, 107, 0.1); color: #006644; }
[data-theme="light"] .geo-field { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 120, 80, 0.3); }
[data-theme="light"] .geo-label { color: #335; }
[data-theme="light"] .geo-value { color: #00633e; text-shadow: none; }
[data-theme="light"] .compass-ring, [data-theme="light"] .level-circle {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(240, 248, 245, 0.9));
    border-color: rgba(0, 120, 80, 0.5);
}
[data-theme="light"] .compass-readout #compassDeg, [data-theme="light"] .level-text { color: #00633e; text-shadow: none; }
[data-theme="light"] .btn, [data-theme="light"] .btn-small {
    background: rgba(0, 168, 107, 0.1); border-color: #00a86b; color: #00633e;
}
[data-theme="light"] .btn:hover { background: rgba(0, 168, 107, 0.25); box-shadow: 0 0 20px rgba(0, 168, 107, 0.4); }
[data-theme="light"] .header-select, [data-theme="light"] .icon-btn {
    background: rgba(0, 168, 107, 0.1); color: #00633e; border-color: rgba(0, 120, 80, 0.3);
}
[data-theme="light"] .conn-badge { background: rgba(0, 168, 107, 0.1); color: #006644; }
[data-theme="light"] .user-badge { background: rgba(0, 168, 107, 0.1); color: #006644; border-color: rgba(0, 168, 107, 0.3); }
[data-theme="light"] .session-card { background: rgba(255, 255, 255, 0.7); }
[data-theme="light"] .session-date { color: #006644; }
[data-theme="light"] .session-grid span { background: rgba(0, 168, 107, 0.08); color: #00633e; }

/* user-badge dans header */
.user-badge {
    padding: 6px 12px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan);
    font-size: 0.85em;
}

/* ===================================================================
   IMPRESSION PDF — masquer l'app, afficher le rapport
   =================================================================== */
.print-only { display: none; }
@media print {
    body { background: #fff !important; color: #000 !important; }
    body::before { display: none !important; }
    .container, .toast-container, .login-screen { display: none !important; }
    .print-only { display: block !important; padding: 30px; font-family: Arial, sans-serif; color: #000; }
    .print-only h1 { color: #006644; border-bottom: 2px solid #006644; padding-bottom: 10px; }
    .print-only h2 { color: #006644; margin-top: 20px; }
    .print-only ul { line-height: 1.8; }
}

/* ===================================================================
   AJOUTS v4 — Animations & polish visuel + auth
   =================================================================== */

/* ---- Transition douce lors du changement de thème ---- */
body, .panel, .stat-card, .sidebar, .header, .nav-item, .btn, .btn-small {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* ---- ÉCRAN DE DÉMARRAGE (boot) ---- */
#bootOverlay {
    position: fixed; inset: 0; z-index: 100000;
    background: radial-gradient(circle at 50% 50%, #001428, #000);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; transition: opacity 0.6s ease;
}
#bootOverlay.done { opacity: 0; pointer-events: none; }
.boot-logo { font-size: 4em; animation: bootPulse 1.2s ease-in-out infinite; filter: drop-shadow(0 0 20px var(--green)); }
.boot-title {
    font-family: 'Orbitron', sans-serif; font-size: 1.4em; letter-spacing: 4px;
    background: linear-gradient(90deg, var(--green), var(--cyan), #ff00ff, var(--green));
    background-size: 300% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: gradientFlow 3s linear infinite;
}
.boot-bar { width: 220px; height: 4px; background: rgba(0,255,136,0.15); border-radius: 2px; overflow: hidden; }
.boot-bar-fill { height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--green), transparent); animation: bootScan 1s ease-in-out infinite; }
@keyframes bootPulse { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes bootScan { 0% { transform: translateX(-160px); } 100% { transform: translateX(220px); } }
@keyframes gradientFlow { 0% { background-position: 0% center; } 100% { background-position: 300% center; } }

/* ---- FOND ANIMÉ LOGIN ---- */
.login-screen { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.login-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.6; }
.login-box { position: relative; z-index: 1; animation: slideDown 0.7s ease, floatBox 6s ease-in-out 0.7s infinite; }
@keyframes floatBox { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.login-title { background-size: 200% auto; animation: gradientFlow 4s linear infinite; }

/* ---- BADGE SERVEUR ---- */
.server-badge {
    margin-top: 18px; text-align: center; font-size: 0.8em; letter-spacing: 0.5px;
    padding: 6px 10px; border-radius: 20px; display: inline-block; width: 100%;
}
.server-badge.on  { color: var(--green); background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.4); }
.server-badge.off { color: var(--amber); background: rgba(255,170,0,0.1); border: 1px solid rgba(255,170,0,0.3); }

/* ---- BOUTON LOGIN : état chargement ---- */
.login-btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.login-btn.loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
    margin: -10px 0 0 -10px; border: 3px solid rgba(0,255,136,0.3); border-top-color: var(--green);
    border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- RIPPLE ---- */
.btn, .btn-small, .nav-item, .login-btn { position: relative; overflow: hidden; }
.ripple {
    position: absolute; border-radius: 50%; background: rgba(0,255,136,0.4);
    transform: scale(0); animation: rippleAnim 0.6s ease-out; pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(2.5); opacity: 0; } }

/* ---- SIDEBAR : entrée en cascade + indicateur actif ---- */
.sidebar .nav-item { animation: navIn 0.5s ease backwards; }
.sidebar .nav-item:nth-child(1) { animation-delay: 0.05s; }
.sidebar .nav-item:nth-child(2) { animation-delay: 0.10s; }
.sidebar .nav-item:nth-child(3) { animation-delay: 0.15s; }
.sidebar .nav-item:nth-child(4) { animation-delay: 0.20s; }
.sidebar .nav-item:nth-child(5) { animation-delay: 0.25s; }
.sidebar .nav-item:nth-child(6) { animation-delay: 0.30s; }
.sidebar .nav-item:nth-child(7) { animation-delay: 0.35s; }
.sidebar .nav-item:nth-child(8) { animation-delay: 0.40s; }
.sidebar .nav-item:nth-child(9) { animation-delay: 0.45s; }
@keyframes navIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
.nav-item.active::after {
    content: ''; position: absolute; left: -2px; top: 15%; height: 70%; width: 4px;
    background: var(--green); border-radius: 0 4px 4px 0; box-shadow: 0 0 12px var(--green);
    animation: indicatorIn 0.3s ease;
}
@keyframes indicatorIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.nav-item:hover .nav-icon { animation: iconBounce 0.5s ease; }
@keyframes iconBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-4px) scale(1.1); } }

/* ---- PANELS : bordure animée subtile + entrée ---- */
.tab.active .panel { animation: panelIn 0.5s ease backwards; }
.tab.active .panel:nth-child(2) { animation-delay: 0.08s; }
.tab.active .panel:nth-child(3) { animation-delay: 0.16s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.panel { position: relative; }
.panel::after {
    content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 1px;
    background: linear-gradient(130deg, transparent 30%, rgba(0,255,136,0.25), transparent 70%);
    background-size: 200% 200%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    animation: borderFlow 6s linear infinite; opacity: 0.6;
}
@keyframes borderFlow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }

/* ---- STAT CARDS : entrée en cascade + valeur qui pulse ---- */
.grid-4 .stat-card, .grid-3 .stat-card { animation: cardIn 0.5s ease backwards; }
.grid-4 .stat-card:nth-child(1) { animation-delay: 0.05s; }
.grid-4 .stat-card:nth-child(2) { animation-delay: 0.12s; }
.grid-4 .stat-card:nth-child(3) { animation-delay: 0.19s; }
.grid-4 .stat-card:nth-child(4) { animation-delay: 0.26s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---- SIGNAL BAR : shimmer ---- */
.signal-bar { position: relative; overflow: hidden; }
.signal-bar::after {
    content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { 0% { transform: translateX(-80px); } 100% { transform: translateX(120vw); } }

/* ---- CONN BADGE pulse quand bon signal ---- */
.conn-badge { transition: all 0.4s; }

/* ---- Boussole : halo tournant ---- */
.compass-ring::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(0,255,136,0.25), transparent 30%);
    animation: spin 8s linear infinite; z-index: -1;
}

/* ---- Toasts : barre de progression ---- */
.toast { position: relative; overflow: hidden; }
.toast::after {
    content: ''; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%;
    background: rgba(255,255,255,0.5); animation: toastBar 5s linear forwards;
}
@keyframes toastBar { from { width: 100%; } to { width: 0; } }

/* ---- Accessibilité : réduire les animations si demandé ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* ===================================================================
   AJOUTS v5 — Auth avancée, profil/admin, météo, sync, néon, transitions
   =================================================================== */

/* ---- Transitions directionnelles entre onglets ---- */
.tab.active.slide-right { animation: slideFromRight 0.45s cubic-bezier(0.22,1,0.36,1); }
.tab.active.slide-left  { animation: slideFromLeft 0.45s cubic-bezier(0.22,1,0.36,1); }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideFromLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Login : remember + forgot ---- */
.login-remember { justify-content: center; color: var(--cyan); margin: 4px 0 0; }
.forgot-link { display: block; text-align: center; color: var(--cyan); margin-top: 14px; font-size: 0.85em; text-decoration: none; opacity: 0.8; }
.forgot-link:hover { opacity: 1; text-decoration: underline; }

/* ---- Input couleur ---- */
.color-input { height: 44px; padding: 4px; cursor: pointer; }

/* ---- Widget météo ---- */
.weather-widget { display: flex; align-items: center; gap: 20px; }
.weather-icon { font-size: 3.4em; filter: drop-shadow(0 0 12px rgba(0,255,136,0.3)); animation: floatBox 5s ease-in-out infinite; }
.weather-temp { font-family: 'Orbitron', sans-serif; font-size: 2em; color: var(--green); text-shadow: 0 0 12px rgba(0,255,136,0.4); }
.weather-desc { color: var(--cyan); margin: 4px 0; }
.weather-meta { font-size: 0.82em; color: var(--cyan); opacity: 0.75; }

/* ---- Profil / Admin ---- */
.admin-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; margin-bottom: 8px; background: rgba(0,255,136,0.05); border-radius: 8px; border-left: 3px solid var(--border); }
.admin-user em { color: var(--cyan); font-style: normal; opacity: 0.8; }
.admin-actions { display: flex; gap: 8px; }

/* ---- Sync status ---- */
#syncStatus { font-size: 0.9em; }

/* ---- Comparaison de sessions ---- */
.cmp-label { font-size: 0.75em; color: var(--cyan); margin-right: 8px; cursor: pointer; }
.cmp-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.cmp-table th, .cmp-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(0,255,136,0.15); font-size: 0.9em; }
.cmp-table th { color: var(--green); font-family: 'Orbitron', sans-serif; font-size: 0.8em; text-transform: uppercase; }
.cmp-table td:first-child { color: var(--cyan); }
.cmp-table td { color: var(--green); }

/* ---- Modale ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: none; align-items: center; justify-content: center; z-index: 99999; backdrop-filter: blur(4px); }
.modal.visible { display: flex; animation: fadeIn 0.3s ease; }
.modal-box { background: rgba(0,20,40,0.97); border: 2px solid var(--green); border-radius: 14px; padding: 28px; width: 92%; max-width: 420px; box-shadow: 0 0 50px rgba(0,255,136,0.3); animation: slideDown 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.modal-head { display: flex; justify-content: space-between; align-items: center; font-family: 'Orbitron', sans-serif; color: var(--green); margin-bottom: 16px; font-size: 1.05em; }

/* ===================================================================
   THÈME NÉON
   =================================================================== */
[data-theme="neon"] {
    --bg-dark: #07000f;
    --panel-bg: rgba(30, 0, 50, 0.45);
    --border: rgba(255, 0, 200, 0.5);
    --cyan: #00e5ff;
}
[data-theme="neon"] body {
    background: linear-gradient(135deg, #0a0018 0%, #1a0033 50%, #00131f 100%);
    color: #ff2bd6;
}
[data-theme="neon"] body::before { opacity: 0.06; }
[data-theme="neon"] .sidebar { background: rgba(15,0,30,0.92); border-right-color: rgba(255,0,200,0.4); }
[data-theme="neon"] .nav-item { color: #ff7be8; background: rgba(255,0,200,0.06); }
[data-theme="neon"] .nav-item.active { background: rgba(255,0,200,0.2); border-color: var(--green); box-shadow: 0 0 25px var(--green); }
[data-theme="neon"] .header { background: rgba(15,0,30,0.7); border-bottom-color: rgba(255,0,200,0.4); }
[data-theme="neon"] .header-title { background: linear-gradient(90deg, var(--green), #00e5ff, #ff2bd6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="neon"] .panel { background: rgba(30,0,50,0.5); border-color: rgba(255,0,200,0.35); box-shadow: 0 0 30px rgba(255,0,200,0.15), inset 0 0 25px rgba(0,229,255,0.05); }
[data-theme="neon"] .panel-title { color: #00e5ff; border-bottom-color: rgba(255,0,200,0.3); text-shadow: 0 0 10px rgba(0,229,255,0.5); }
[data-theme="neon"] .stat-card { background: rgba(255,0,200,0.06); border-color: rgba(255,0,200,0.3); }
[data-theme="neon"] .stat-label, [data-theme="neon"] .geo-label, [data-theme="neon"] .stat-sub { color: #00e5ff; }
[data-theme="neon"] .detail-row { background: rgba(255,0,200,0.06); border-left-color: var(--green); }
[data-theme="neon"] .detail-row .k { color: #00e5ff; }
[data-theme="neon"] .console-output { background: #0a0014; }
[data-theme="neon"] .compass-ring, [data-theme="neon"] .level-circle {
    background: radial-gradient(circle, rgba(40,0,70,0.6), rgba(10,0,20,0.7)); border-color: rgba(255,0,200,0.5);
}

/* ---- accent appliqué au scrollbar ---- */
::-webkit-scrollbar-thumb { background: var(--green); opacity: 0.5; }

/* ---- responsive admin ---- */
@media (max-width: 600px) {
    .admin-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .weather-widget { flex-direction: column; text-align: center; }
}

/* ===================================================================
   AJOUTS v6 — Cartes cliquables & fenêtre de détail
   =================================================================== */

/* ---- Indice "cliquable" ---- */
.clickable { cursor: pointer; position: relative; }
.stat-card.clickable, .jammer-card.clickable { transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.stat-card.clickable:hover, .jammer-card.clickable:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 255, 136, 0.25);
    border-color: var(--green);
}
.card-hint {
    position: absolute; top: 10px; right: 12px;
    font-size: 0.7em; color: var(--cyan); opacity: 0;
    transition: opacity 0.25s; letter-spacing: 0.5px;
}
.clickable:hover .card-hint { opacity: 0.9; }
.jammer-card.clickable .card-hint { position: static; display: inline-block; margin-top: 8px; opacity: 0.7; }

/* ---- Modale de détail ---- */
.detail-modal-box {
    max-width: 520px; width: 94%; max-height: 88vh; overflow-y: auto;
    border-width: 2px;
}
.detail-modal .modal-head { font-size: 1.15em; }
#detailBody { animation: fadeIn 0.35s ease; }

/* ---- Sections dans la fiche ---- */
.detail-section-title {
    font-family: 'Orbitron', sans-serif; font-size: 0.78em; letter-spacing: 1px;
    text-transform: uppercase; color: var(--cyan); margin: 20px 0 10px;
    padding-bottom: 6px; border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}
.detail-note {
    font-size: 0.88em; line-height: 1.55; color: var(--cyan); opacity: 0.85;
    background: rgba(0, 255, 136, 0.04); padding: 12px 14px; border-radius: 8px;
    border-left: 3px solid var(--border);
}
.detail-note strong { color: var(--green); }

/* ---- Gauge circulaire ---- */
.detail-gauge { display: flex; justify-content: center; margin: 8px 0 18px; }
.gauge-arc { transition: stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1); filter: drop-shadow(0 0 6px currentColor); }
.gauge-val { font-family: 'Orbitron', sans-serif; font-size: 30px; fill: var(--green); font-weight: 700; }
.gauge-unit { font-size: 11px; fill: var(--cyan); letter-spacing: 1px; }

/* ---- Sparkline ---- */
.detail-spark { display: block; background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 6px; }
.detail-spark polyline { filter: drop-shadow(0 0 4px currentColor); animation: sparkDraw 1s ease; }
@keyframes sparkDraw { from { opacity: 0; } to { opacity: 1; } }

/* ---- Barre horizontale ---- */
.detail-bar { height: 12px; background: rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; margin: 6px 0; }
.detail-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; box-shadow: 0 0 10px currentColor; }

/* ===================================================================
   AJOUTS v7 — Radar, outils, stats, tour, glassmorphism, animations
   =================================================================== */

/* ---- Fond animé global ---- */
.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.container { position: relative; z-index: 1; }
.login-screen { z-index: 10000; }

/* ---- Glassmorphism (reflet sur les panels) ---- */
.panel { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.panel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    pointer-events: none;
}

/* ---- Icônes sidebar : flottement subtil de l'icône active ---- */
.nav-item.active .nav-icon { animation: iconFloat 2.5s ease-in-out infinite; }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---- Pulse de valeur ---- */
.value-pulse { animation: valPulse 0.6s ease; }
@keyframes valPulse {
    0% { transform: scale(1); text-shadow: 0 0 8px var(--green); }
    40% { transform: scale(1.18); text-shadow: 0 0 22px var(--green); }
    100% { transform: scale(1); }
}

/* ---- Vibration d'écran (alerte critique) ---- */
.shake-screen { animation: shakeScreen 0.5s; }
@keyframes shakeScreen {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

/* ---- RADAR ---- */
.radar-wrap { display: flex; justify-content: center; margin: 10px 0 18px; }
#radarCanvas { max-width: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(0,30,20,0.6), rgba(0,10,8,0.85)); box-shadow: 0 0 40px rgba(0,255,136,0.15), inset 0 0 30px rgba(0,255,136,0.05); }

/* ---- Outils : débit ---- */
.speed-readout { text-align: center; padding: 16px; background: rgba(0,255,136,0.05); border: 1px solid var(--border); border-radius: 10px; }
.speed-label { color: var(--cyan); font-size: 0.85em; }
.speed-val { font-family: 'Orbitron', sans-serif; font-size: 1.8em; color: var(--green); margin-top: 6px; text-shadow: 0 0 12px rgba(0,255,136,0.4); }

/* ---- Trace hops ---- */
.trace-hop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 6px; background: rgba(0,255,136,0.05); border-radius: 8px; border-left: 3px solid var(--border); animation: panelIn 0.4s ease; }
.trace-num { width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: var(--green); color: #001; font-weight: bold; font-family: 'Orbitron'; }
.trace-name { flex: 1; color: var(--cyan); }
.trace-ms { font-family: 'Orbitron', sans-serif; }

/* ---- Heatmap horaire ---- */
.hour-heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 10px; }
.heat-cell { aspect-ratio: 1; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 0.7em; color: #001824; font-weight: bold; cursor: default; transition: transform 0.2s; }
.heat-cell:hover { transform: scale(1.15); z-index: 2; }
@media (max-width: 600px) { .hour-heatmap { grid-template-columns: repeat(8, 1fr); } }

/* ---- Zones mortes ---- */
.deadzone-row { display: flex; justify-content: space-between; padding: 10px 14px; margin-bottom: 6px; background: rgba(255,0,85,0.06); border-left: 3px solid var(--red); border-radius: 8px; font-size: 0.88em; color: var(--cyan); }
.deadzone-row:hover { background: rgba(255,0,85,0.12); }

/* ---- Badges ---- */
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.badge { text-align: center; padding: 16px 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,255,136,0.04); transition: transform 0.25s; }
.badge.got { box-shadow: 0 0 18px rgba(0,255,136,0.25); }
.badge.got:hover { transform: translateY(-4px) scale(1.04); }
.badge.locked { opacity: 0.45; filter: grayscale(0.6); }
.badge-icon { font-size: 2em; }
.badge-name { font-family: 'Orbitron', sans-serif; font-size: 0.8em; color: var(--green); margin-top: 6px; }
.badge-goal { font-size: 0.7em; color: var(--cyan); opacity: 0.7; margin-top: 4px; }

/* ---- Notes épinglées ---- */
.pin-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-bottom: 6px; background: rgba(0,229,255,0.06); border-left: 3px solid var(--cyan); border-radius: 6px; font-size: 0.85em; color: var(--cyan); }

/* ---- Aide ---- */
.help-list { margin-top: 12px; }
.help-item { padding: 14px; margin-bottom: 10px; background: rgba(0,255,136,0.04); border-radius: 10px; border-left: 3px solid var(--border); }
.help-item strong { color: var(--green); display: block; margin-bottom: 6px; font-family: 'Orbitron', sans-serif; font-size: 0.9em; }
.help-item p { color: var(--cyan); opacity: 0.85; font-size: 0.88em; line-height: 1.5; margin: 0; }

/* ---- Fiche : carte miniature + actions ---- */
.detail-minimap { width: 100%; border-radius: 10px; border: 1px solid var(--border); margin-top: 6px; }
.detail-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.gps-fields { transition: transform 0.2s, box-shadow 0.2s; border-radius: 10px; padding: 4px; }
.gps-fields:hover { box-shadow: 0 0 20px rgba(0,255,136,0.2); }

/* ---- VISITE GUIDÉE ---- */
.tour-overlay {
    position: fixed; inset: 0; z-index: 100000; pointer-events: auto;
    background: rgba(0,0,0,0.72);
    -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0);
}
.tour-overlay::after {
    content: ''; position: absolute;
    left: var(--hx); top: var(--hy); width: var(--hw); height: var(--hh);
    border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 25px rgba(0,255,136,0.6);
    border: 2px solid var(--green); transition: all 0.3s ease;
}
.tour-box {
    position: fixed; z-index: 100001; width: 300px; max-width: 90vw;
    background: rgba(0,20,40,0.98); border: 2px solid var(--green); border-radius: 14px;
    padding: 18px; box-shadow: 0 0 40px rgba(0,255,136,0.35); animation: slideDown 0.35s ease;
}
.tour-title { font-family: 'Orbitron', sans-serif; color: var(--green); margin-bottom: 8px; }
.tour-text { color: var(--cyan); font-size: 0.9em; line-height: 1.5; }
.tour-actions { display: flex; justify-content: space-between; margin-top: 14px; }
.tour-progress { text-align: center; color: var(--cyan); opacity: 0.6; font-size: 0.75em; margin-top: 8px; }
.tour-target { position: relative; z-index: 100000 !important; }

/* ---- Infobulles (data-tip) ---- */
[data-tip] { position: relative; }
[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
    background: rgba(0,20,40,0.97); color: var(--green); border: 1px solid var(--border);
    padding: 6px 10px; border-radius: 6px; font-size: 0.75em; white-space: nowrap; z-index: 9999;
    pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

/* ---- Cascade dans les fiches ---- */
#detailBody .detail-list, #detailBody .detail-section-title, #detailBody .detail-note, #detailBody .detail-gauge, #detailBody .chart-container {
    animation: panelIn 0.4s ease backwards;
}
#detailBody .detail-section-title:nth-of-type(1) { animation-delay: 0.05s; }
#detailBody .detail-section-title:nth-of-type(2) { animation-delay: 0.12s; }
#detailBody .detail-section-title:nth-of-type(3) { animation-delay: 0.19s; }

/* ===================================================================
   AJOUTS v8 — Temps réel, intelligence, social, gamification
   =================================================================== */

/* ---- Météo prévisions ---- */
.weather-forecast { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.fc-cell { flex: 0 0 auto; text-align: center; padding: 8px 10px; background: rgba(0,255,136,0.05); border-radius: 8px; border: 1px solid var(--border); }
.fc-h { font-size: 0.75em; color: var(--cyan); }
.fc-i { font-size: 1.4em; margin: 2px 0; }
.fc-t { font-family: 'Orbitron', sans-serif; color: var(--green); font-size: 0.9em; }

/* ---- Panneau intelligence ---- */
.intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intel-cell { background: rgba(0,255,136,0.05); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.intel-wide { grid-column: 1 / -1; }
.intel-label { color: var(--cyan); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.5px; }
.intel-val { font-family: 'Orbitron', sans-serif; color: var(--green); font-size: 1.1em; margin-top: 6px; }
.risk-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-top: 14px; }
.risk-fill { height: 100%; width: 0; background: var(--green); border-radius: 4px; transition: width 0.6s, background 0.4s; }

/* ---- Overlay temps réel flottant ---- */
.rt-overlay {
    position: fixed; bottom: 20px; right: 20px; z-index: 9000; width: 210px;
    background: rgba(0,18,34,0.95); border: 1px solid var(--green); border-radius: 12px;
    padding: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 20px rgba(0,255,136,0.2);
    backdrop-filter: blur(6px); animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.rt-head { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', sans-serif; font-size: 1.3em; color: var(--green); }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: bootPulse 1.5s infinite; }
.rt-close { margin-left: auto; background: none; border: none; color: var(--cyan); cursor: pointer; font-size: 0.7em; }
.rt-graph { margin: 6px 0; }
.rt-sub { font-size: 0.75em; color: var(--cyan); opacity: 0.8; }

/* ---- Mode tableau de bord ---- */
.data-mode { position: fixed; inset: 0; z-index: 99998; background: radial-gradient(circle at 50% 40%, #001528, #000); display: flex; align-items: center; justify-content: center; }
.dm-exit { position: absolute; top: 20px; right: 20px; background: rgba(255,0,85,0.15); border: 1px solid var(--red); color: var(--red); padding: 10px 16px; border-radius: 8px; cursor: pointer; }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.dm-cell { text-align: center; }
.dm-label { color: var(--cyan); letter-spacing: 3px; font-size: 1em; }
.dm-big { font-family: 'Orbitron', sans-serif; font-size: 6em; color: var(--green); text-shadow: 0 0 30px rgba(0,255,136,0.5); line-height: 1.1; }
.dm-mid { font-family: 'Orbitron', sans-serif; font-size: 2.5em; color: var(--green); margin-top: 20px; }
@media (max-width: 600px) { .dm-big { font-size: 3.5em; } .dm-grid { gap: 20px; } }

/* ---- Score de session ---- */
.session-grade { float: right; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 6px; color: #001; font-weight: bold; font-family: 'Orbitron', sans-serif; }
.session-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.session-group-day { font-family: 'Orbitron', sans-serif; color: var(--cyan); font-size: 0.85em; margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(0,255,136,0.15); }

/* ---- QR ---- */
.qr-img { width: 220px; height: 220px; border-radius: 12px; border: 4px solid #fff; background: #fff; }

/* ---- Gamification ---- */
.xp-head { display: flex; justify-content: space-between; font-family: 'Orbitron', sans-serif; color: var(--green); margin-bottom: 8px; }
.xp-bar { height: 14px; background: rgba(255,255,255,0.08); border-radius: 7px; overflow: hidden; }
.xp-bar.small { height: 8px; }
.xp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 7px; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 0 12px rgba(0,255,136,0.4); }
.xp-fill.week { background: linear-gradient(90deg, var(--amber), var(--green)); }
.xp-sub { color: var(--cyan); font-size: 0.82em; margin-top: 6px; }
.xp-week { margin-top: 14px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 5px; background: rgba(0,255,136,0.05); border-radius: 8px; }
.lb-rank { font-family: 'Orbitron'; color: var(--cyan); width: 32px; }
.lb-grade { font-family: 'Orbitron', sans-serif; font-weight: bold; font-size: 1.2em; width: 28px; }
.lb-info { flex: 1; color: var(--cyan); font-size: 0.85em; }
.lb-score { font-family: 'Orbitron'; color: var(--green); }

/* ---- Thèmes perso ---- */
.theme-row { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; background: rgba(0,255,136,0.04); border-radius: 8px; }
.theme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; }
.theme-name { flex: 1; color: var(--cyan); }

/* ===================================================================
   AJOUTS v9 — Clusters, succès, lieux, profils, historique images
   =================================================================== */

/* ---- Clusters carte ---- */
.cluster-bubble { background: radial-gradient(circle, rgba(0,255,136,0.95), rgba(0,180,100,0.85)); color: #001; text-align: center; border-radius: 50%; font-family: 'Orbitron', sans-serif; font-weight: bold; border: 2px solid #fff; box-shadow: 0 0 14px rgba(0,255,136,0.6); }

/* ---- Succès débloqué (popup animé) ---- */
.achievement-pop {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-40px) scale(0.8);
    z-index: 100002; display: flex; align-items: center; gap: 14px;
    background: rgba(0,20,40,0.98); border: 2px solid var(--green); border-radius: 14px;
    padding: 14px 22px; box-shadow: 0 8px 40px rgba(0,255,136,0.5); opacity: 0;
    transition: all 0.5s cubic-bezier(0.22,1,0.36,1);
}
.achievement-pop.show { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
.ach-icon { font-size: 2.6em; animation: achSpin 0.8s ease; }
@keyframes achSpin { from { transform: rotate(-30deg) scale(0); } to { transform: rotate(0) scale(1); } }
.ach-title { color: var(--cyan); font-size: 0.8em; letter-spacing: 1px; }
.ach-name { color: var(--green); font-family: 'Orbitron', sans-serif; font-size: 1.1em; }

/* ---- Défi hebdo ---- */
.challenge-card { display: flex; gap: 14px; align-items: center; }
.challenge-icon { font-size: 2.4em; }
.challenge-body { flex: 1; }

/* ---- Lieux ---- */
.place-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px; background: rgba(0,255,136,0.05); border-radius: 8px; }
.place-name { flex: 1; color: var(--cyan); }
.place-q { font-family: 'Orbitron', sans-serif; font-weight: bold; }
.place-n { font-size: 0.78em; color: var(--cyan); opacity: 0.7; }
.danger-small { background: rgba(255,0,85,0.12) !important; border-color: var(--red) !important; color: var(--red) !important; }
.best-slot { margin-top: 10px; padding: 10px 12px; background: rgba(0,229,255,0.08); border-left: 3px solid var(--cyan); border-radius: 8px; color: var(--cyan); font-size: 0.88em; }

/* ---- Historique images ---- */
.image-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.img-hist-item { text-align: center; }
.img-hist-item img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.img-hist-date { font-size: 0.7em; color: var(--cyan); opacity: 0.7; margin-top: 4px; }

/* ===================================================================
   AJOUTS v10 — Porte PIN admin
   =================================================================== */
.pin-gate { display: flex; justify-content: center; align-items: center; min-height: 400px; }
.pin-box {
    text-align: center; max-width: 340px; width: 100%; padding: 30px 24px;
    background: rgba(0,18,34,0.6); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4); backdrop-filter: blur(8px);
}
.pin-icon { font-size: 3em; margin-bottom: 10px; animation: bootPulse 2s infinite; }
.pin-title { font-family: 'Orbitron', sans-serif; color: var(--green); font-size: 1.1em; margin-bottom: 8px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 22px 0; }
.pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); transition: all 0.2s; }
.pin-dots span.filled { background: var(--green); border-color: var(--green); box-shadow: 0 0 12px var(--green); transform: scale(1.1); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.pin-key {
    aspect-ratio: 1; border: 1px solid var(--border); background: rgba(0,255,136,0.05);
    color: var(--green); font-family: 'Orbitron', sans-serif; font-size: 1.4em; border-radius: 12px;
    cursor: pointer; transition: all 0.15s; user-select: none;
}
.pin-key:hover { background: rgba(0,255,136,0.15); transform: translateY(-2px); }
.pin-key:active { transform: scale(0.94); }
.pin-key.pin-ok { color: var(--cyan); border-color: var(--cyan); }
.pin-key.pin-del { color: var(--amber); }
.pin-error { color: var(--red); margin-top: 14px; min-height: 20px; font-size: 0.9em; }
.pin-shake { animation: shakeScreen 0.45s; }

/* ===================================================================
   AJOUTS v12 — Console d'opérations du Scanner
   =================================================================== */

/* ---- Contrôles ---- */
.op-controls { display: grid; grid-template-columns: 160px 1fr auto; gap: 16px; align-items: end; margin-bottom: 14px; }
.op-control label { display: block; font-size: 0.78em; color: var(--cyan); margin-bottom: 6px; }
.op-control-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.op-range { width: 100%; accent-color: var(--green); }
@media (max-width: 700px) { .op-controls { grid-template-columns: 1fr; } }

/* ---- Barre de statut + progression ---- */
.op-statusbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.scan-status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: 0 0 auto; }
.scan-status-dot.busy { background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: bootPulse 0.8s infinite; }
.scan-status-dot.warn { background: var(--red); box-shadow: 0 0 10px var(--red); animation: bootPulse 0.8s infinite; }
.scan-status-dot.ok { background: var(--green); box-shadow: 0 0 10px var(--green); }
.scan-status-text { font-family: 'Orbitron', sans-serif; font-size: 0.85em; letter-spacing: 1px; color: var(--cyan); min-width: 180px; }
.scan-status-text.busy { color: var(--amber); }
.scan-status-text.warn { color: var(--red); }
.scan-status-text.ok { color: var(--green); }
.op-progress-main { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.op-progress-main-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 4px; transition: width 0.1s linear; box-shadow: 0 0 10px var(--green); }

/* ---- Disposition principale ---- */
.op-layout { display: grid; grid-template-columns: 200px 1fr 260px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .op-layout { grid-template-columns: 1fr; } }
.op-side { background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.op-side-title { font-family: 'Orbitron', sans-serif; font-size: 0.8em; letter-spacing: 1px; color: var(--cyan); margin-bottom: 10px; text-transform: uppercase; }
.op-center { display: flex; justify-content: center; }

/* ---- Métriques système ---- */
.op-metric { display: flex; justify-content: space-between; font-size: 0.82em; padding: 5px 0; border-bottom: 1px solid rgba(0,255,136,0.08); color: var(--cyan); }
.op-metric span:last-child { font-family: 'Orbitron', sans-serif; color: var(--green); }
.op-power-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin: 8px 0 14px; }
.op-power-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--green)); transition: width 0.8s; }
.op-counters { display: flex; gap: 10px; }
.op-counter { flex: 1; text-align: center; background: rgba(0,255,136,0.05); border-radius: 8px; padding: 8px; }
.op-counter-val { font-family: 'Orbitron', sans-serif; font-size: 1.6em; color: var(--green); }
.op-counter-lbl { font-size: 0.68em; color: var(--cyan); opacity: 0.8; }
.op-threat { margin-top: 12px; text-align: center; font-size: 0.85em; color: var(--cyan); }

/* ---- Journal d'opérations ---- */
.op-log { height: 280px; overflow-y: auto; font-family: 'Space Mono', monospace; font-size: 0.74em; line-height: 1.5; }
.op-line { padding: 2px 0; color: var(--cyan); opacity: 0.9; animation: opLineIn 0.25s ease; border-bottom: 1px dotted rgba(0,255,136,0.06); }
.op-line .op-time { color: var(--green); opacity: 0.6; margin-right: 6px; }
.op-line.info { color: #8fd3ff; }
.op-line.ok { color: var(--green); }
.op-line.warn { color: var(--amber); }
@keyframes opLineIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 0.9; transform: translateX(0); } }

/* ---- Sources détectées ---- */
.op-source-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.op-source { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 10px; padding: 12px; transition: all 0.3s; position: relative; overflow: hidden; }
.op-source.locked { border-left-color: var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,0.2); }
.op-source.neutralized { opacity: 0.55; border-left-color: var(--green); filter: grayscale(0.4); }
.op-source-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.op-source-type { font-family: 'Orbitron', sans-serif; font-weight: bold; flex: 1; }
.op-neutralized-tag { font-size: 0.7em; color: var(--green); border: 1px solid var(--green); border-radius: 4px; padding: 1px 5px; }
.op-source-meta { font-size: 0.78em; color: var(--cyan); opacity: 0.85; margin-bottom: 8px; }
.op-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.op-btn { font-size: 0.72em; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: rgba(0,255,136,0.06); color: var(--green); cursor: pointer; transition: all 0.15s; }
.op-btn:hover:not(:disabled) { background: rgba(0,255,136,0.18); transform: translateY(-1px); }
.op-btn:active:not(:disabled) { transform: scale(0.95); }
.op-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.op-btn.danger { color: var(--red); border-color: var(--red); background: rgba(255,0,85,0.08); }
.op-btn.danger:hover:not(:disabled) { background: rgba(255,0,85,0.2); }

/* ---- Barre de progression par source ---- */
.op-progress { display: none; align-items: center; gap: 8px; margin-top: 8px; height: 18px; }
.op-progress.active { display: flex; }
.op-progress-fill { height: 6px; flex: 1; background: linear-gradient(90deg, var(--amber), var(--red)); border-radius: 3px; width: 0; box-shadow: 0 0 8px var(--red); transition: width 0.1s linear; }
.op-progress-label { font-size: 0.7em; color: var(--amber); font-family: 'Space Mono', monospace; min-width: 90px; }

/* ---- Animations de neutralisation ---- */
.op-source.scanning-fx { animation: opScanFx 0.8s ease-in-out infinite; }
@keyframes opScanFx { 0%,100% { box-shadow: 0 0 0 rgba(0,229,255,0); } 50% { box-shadow: 0 0 18px rgba(0,229,255,0.5); } }
.op-source.neutralizing { border-left-color: var(--amber); }
.op-source.neutralizing::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(255,170,0,0.08) 0 8px, transparent 8px 16px);
    animation: opSweepBg 0.6s linear infinite;
}
@keyframes opSweepBg { from { background-position: 0 0; } to { background-position: 32px 0; } }
.op-source.neutralized-flash { animation: opNeutralized 0.7s ease; }
@keyframes opNeutralized {
    0% { box-shadow: 0 0 0 rgba(0,255,136,0); transform: scale(1); }
    40% { box-shadow: 0 0 30px rgba(0,255,136,0.8); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 rgba(0,255,136,0); transform: scale(1); }
}

/* ---- Source fraîchement injectée (détection forcée) ---- */
.op-source-new { animation: opNewSource 1.5s ease; }
@keyframes opNewSource {
    0% { transform: scale(0.85); box-shadow: 0 0 0 rgba(255,0,85,0); opacity: 0.4; }
    30% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,0,85,0.8); opacity: 1; }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,0,85,0); }
}

/* ===================================================================
   AJOUTS v14 — Options avancées, effets & thèmes du Scanner
   =================================================================== */

/* ---- Barre d'options ---- */
.op-options-wrap { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,0.2); }
.op-options-wrap > summary { cursor: pointer; padding: 10px 14px; font-family: 'Orbitron', sans-serif; font-size: 0.8em; letter-spacing: 1px; color: var(--cyan); list-style: none; }
.op-options-wrap > summary::-webkit-details-marker { display: none; }
.op-options-wrap[open] > summary { border-bottom: 1px solid var(--border); }
.op-options { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 14px; }
.op-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8em; color: var(--cyan); cursor: pointer; }
.op-opt select, .op-opt input[type="range"] { margin-left: 4px; }
.op-opt select.form-input { width: auto; padding: 4px 8px; font-size: 0.9em; }
.op-filter-label { font-size: 0.8em; color: var(--green); font-family: 'Orbitron', sans-serif; }

/* ---- Badges sur les sources ---- */
.op-prio-tag { font-size: 0.62em; background: var(--red); color: #fff; border-radius: 4px; padding: 1px 6px; letter-spacing: 1px; animation: prioBlink 1s infinite; }
@keyframes prioBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.op-decoy-tag { font-size: 0.65em; color: var(--amber); border: 1px solid var(--amber); border-radius: 4px; padding: 1px 5px; }
.op-source.decoyed { border-left-color: var(--amber); }

/* ---- Effet glitch (menaces élevées) ---- */
.op-glitch { position: relative; }
.op-glitch::before, .op-glitch::after {
    content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;
}
.op-glitch::before { color: #0ff; animation: glitchTop 1.1s infinite linear alternate-reverse; clip-path: inset(0 0 55% 0); }
.op-glitch::after { color: #f0a; animation: glitchBot 0.9s infinite linear alternate-reverse; clip-path: inset(55% 0 0 0); }
@keyframes glitchTop { 0% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 100% { transform: translateX(1px); } }
@keyframes glitchBot { 0% { transform: translateX(0); } 25% { transform: translateX(2px); } 50% { transform: translateX(-2px); } 75% { transform: translateX(1px); } 100% { transform: translateX(-1px); } }

/* ---- Échantillons capturés ---- */
.captured-row { display: flex; justify-content: space-between; font-size: 0.8em; color: var(--cyan); padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; background: rgba(0,255,136,0.04); }
.captured-time { color: var(--green); opacity: 0.7; font-family: 'Space Mono', monospace; }

/* ---- Vignette d'alerte (bords clignotants) ---- */
.op-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0; transition: opacity 0.4s;
    box-shadow: inset 0 0 120px 30px rgba(255,0,85,0.55); }
.op-vignette.active { opacity: 1; animation: vignettePulse 1.4s ease-in-out infinite; }
@keyframes vignettePulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }

/* ---- Scanlines CRT ---- */
#scanner.scanlines { position: relative; }
#scanner.scanlines::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50; border-radius: 16px;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
    animation: scanlineMove 8s linear infinite;
}
@keyframes scanlineMove { from { background-position: 0 0; } to { background-position: 0 100px; } }

/* ---- Thèmes du scanner ---- */
#scanner[data-scan-theme="ambre"] { --green: #ffb000; --cyan: #ffd27f; }
#scanner[data-scan-theme="ambre"] .scan-status-dot { background: #ffb000; box-shadow: 0 0 10px #ffb000; }
#scanner[data-scan-theme="bleu"] { --green: #29b6ff; --cyan: #9fd8ff; }
#scanner[data-scan-theme="bleu"] .scan-status-dot { background: #29b6ff; box-shadow: 0 0 10px #29b6ff; }

/* ===================================================================
   AJOUTS v15 — Intro cinématique (cyberpunk néon rose/cyan)
   =================================================================== */
body.intro-active { overflow: hidden; }

.intro-scene {
    position: fixed; inset: 0; z-index: 100000; overflow: hidden;
    background: radial-gradient(ellipse at 50% 30%, #1a0830 0%, #0a0418 55%, #04020c 100%);
    transform-origin: center center; will-change: transform, opacity;
}
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Titre néon */
.intro-title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    text-align: center; pointer-events: none; will-change: transform, opacity; z-index: 3;
}
.intro-logo {
    font-family: 'Orbitron', sans-serif; font-weight: 900;
    font-size: clamp(2.4rem, 9vw, 6rem); line-height: 0.95; letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 8px #ff2bd6, 0 0 24px #ff2bd6, 0 0 48px #ff2bd6;
    animation: introFlicker 3.5s infinite;
}
.intro-logo span {
    display: block; color: #00e5ff;
    text-shadow: 0 0 8px #00e5ff, 0 0 24px #00e5ff, 0 0 48px #00e5ff;
}
.intro-sub {
    margin-top: 16px; font-family: 'Space Mono', monospace; font-size: clamp(0.7rem, 2.2vw, 1rem);
    letter-spacing: 6px; color: #9fd8ff; opacity: 0.9; text-shadow: 0 0 10px rgba(0,229,255,0.7);
}
@keyframes introFlicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.6; } 94% { opacity: 1; } 96% { opacity: 0.7; } 97% { opacity: 1; }
}

/* Nuage néon */
.intro-cloud {
    position: absolute; left: 50%; bottom: 8%; width: min(120vw, 1100px); height: 380px;
    transform: translateX(-50%); pointer-events: none; z-index: 2; will-change: transform, opacity;
    background:
        radial-gradient(closest-side at 30% 60%, rgba(255,43,214,0.55), transparent 70%),
        radial-gradient(closest-side at 55% 45%, rgba(0,229,255,0.45), transparent 70%),
        radial-gradient(closest-side at 72% 62%, rgba(180,80,255,0.5), transparent 70%);
    filter: blur(26px);
}

/* Indice de scroll */
.intro-scrollcue {
    position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
    text-align: center; color: #9fd8ff; font-family: 'Space Mono', monospace;
    font-size: 0.8rem; letter-spacing: 3px; z-index: 4; transition: opacity 0.4s;
    text-shadow: 0 0 10px rgba(0,229,255,0.6);
}
.intro-chevrons { font-size: 2rem; line-height: 1; animation: introBounce 1.6s infinite; color: #ff2bd6; }
@keyframes introBounce { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } }

/* Bouton passer */
.intro-skip {
    position: absolute; top: 22px; right: 22px; z-index: 5;
    background: rgba(255,255,255,0.06); border: 1px solid #ff2bd6; color: #fff;
    padding: 8px 16px; border-radius: 20px; cursor: pointer; font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem; letter-spacing: 2px; transition: all 0.2s; text-shadow: 0 0 8px #ff2bd6;
}
.intro-skip:hover { background: #ff2bd6; color: #04020c; box-shadow: 0 0 20px #ff2bd6; }

/* Barre de progression de l'intro */
.intro-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.08); z-index: 5; }
.intro-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ff2bd6, #00e5ff); box-shadow: 0 0 12px #ff2bd6; transition: width 0.1s linear; }

@media (prefers-reduced-motion: reduce) { .intro-scene { display: none !important; } }

/* ===================================================================
   AJOUTS v16 — Refonte graphique CYBERPUNK NÉON (rose/cyan)
   =================================================================== */

/* ---- Glassmorphism néon sur les panneaux ---- */
.panel {
    background: var(--panel-bg) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,43,214,0.06);
    position: relative;
}
/* liseré néon animé en haut du panneau */
.panel::before {
    content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-cyan), transparent);
    background-size: 200% 100%; animation: neonSlide 4s linear infinite; opacity: 0.8;
}
@keyframes neonSlide { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.panel-title { text-shadow: 0 0 12px rgba(255,43,214,0.6); }

/* ---- Boutons néon ---- */
.btn, .btn-small {
    position: relative; border-radius: 10px;
    border: 1px solid var(--neon-pink);
    background: linear-gradient(180deg, rgba(255,43,214,0.14), rgba(255,43,214,0.04));
    color: #fff; text-shadow: 0 0 8px rgba(255,43,214,0.7);
    transition: all 0.18s ease; overflow: hidden;
}
.btn:hover, .btn-small:hover {
    box-shadow: 0 0 18px var(--neon-pink), inset 0 0 12px rgba(255,43,214,0.3);
    transform: translateY(-1px);
}
.btn:active, .btn-small:active { transform: scale(0.97); }
.btn::after, .btn-small::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg); transition: left 0.5s;
}
.btn:hover::after, .btn-small:hover::after { left: 140%; }

/* ---- Champs de saisie néon ---- */
.form-input {
    background: rgba(10,4,20,0.6) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px; color: #fff !important;
    transition: all 0.2s;
}
.form-input:focus {
    outline: none; border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,229,255,0.25), 0 0 18px rgba(0,229,255,0.3);
}

/* ---- Navigation (onglets) néon ---- */
.nav-item { transition: all 0.2s ease; border-radius: 12px; position: relative; }
.nav-item.active {
    background: linear-gradient(180deg, rgba(255,43,214,0.22), rgba(0,229,255,0.12)) !important;
    box-shadow: 0 0 18px rgba(255,43,214,0.4), inset 0 0 0 1px rgba(0,229,255,0.3);
}
.nav-item.active .nav-icon { filter: drop-shadow(0 0 8px var(--neon-pink)); }
.nav-item:hover { transform: translateY(-2px); }

/* ---- Login box néon ---- */
.login-box {
    background: linear-gradient(160deg, rgba(40,10,60,0.85), rgba(10,4,24,0.92)) !important;
    border: 2px solid var(--neon-pink) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 50px rgba(255,43,214,0.5), inset 0 0 30px rgba(0,229,255,0.06) !important;
    backdrop-filter: blur(10px);
}
.login-title {
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan), var(--neon-pink)) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: gradientFlow 4s linear infinite;
    filter: drop-shadow(0 0 14px rgba(255,43,214,0.6));
}

/* ---- Transitions d'onglets ---- */
.tab.active, section.tab.active { animation: tabFadeIn 0.4s ease; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Barres de défilement néon ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,43,214,0.05); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--neon-pink), var(--neon-cyan)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 10px var(--neon-pink); }

/* ---- Titres de section ---- */
.op-side-title, .panel-title { letter-spacing: 1px; }

/* ===================================================================
   AJOUTS v17 — Correctifs login néon (titre, bouton, fond)
   =================================================================== */

/* Titre SIGNAL MONITOR : texte plein néon (fini le clip qui le masquait) */
.login-title {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900;
    text-shadow: 0 0 8px var(--neon-pink), 0 0 22px var(--neon-pink), 0 0 40px rgba(255,43,214,0.6);
    animation: loginTitleFlicker 4s infinite;
}
@keyframes loginTitleFlicker { 0%,93%,100% { opacity: 1; } 94% { opacity: 0.65; } 95% { opacity: 1; } 97% { opacity: 0.8; } 98% { opacity: 1; } }

/* Bouton CONNEXION : refonte néon rose/cyan */
.login-btn {
    background: linear-gradient(135deg, rgba(255,43,214,0.25), rgba(0,229,255,0.18)) !important;
    border: 2px solid var(--neon-pink) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,43,214,0.8);
    border-radius: 12px !important;
    letter-spacing: 2px;
    box-shadow: 0 0 18px rgba(255,43,214,0.35), inset 0 0 14px rgba(0,229,255,0.1);
}
.login-btn:hover {
    box-shadow: 0 0 34px var(--neon-pink), inset 0 0 18px rgba(0,229,255,0.25) !important;
    border-color: var(--neon-cyan) !important;
    transform: translateY(-2px);
}

/* On masque l'ancien fond animé (points/lignes verts) derrière le login */
.login-canvas { display: none !important; }

/* ===================================================================
   AJOUTS v18 — Spectre FFT/Spectrogramme, Boot terminal, Logging néon
   =================================================================== */

/* ---- Analyseur FFT + spectrogramme ---- */
.op-spectrum { margin-top: 12px; width: 100%; }
.op-spectrum-label { font-family: 'Orbitron', sans-serif; font-size: 0.68em; letter-spacing: 1px; color: var(--neon-cyan); margin: 8px 0 4px; text-shadow: 0 0 8px rgba(0,229,255,0.5); }
.op-fft, .op-spectro { width: 100%; display: block; border: 1px solid var(--border); border-radius: 10px; background: rgba(8,2,18,0.7); box-shadow: inset 0 0 20px rgba(255,43,214,0.08); }
.op-fft { height: 120px; }
.op-spectro { height: 90px; image-rendering: pixelated; }

/* ---- Boot terminal néon ---- */
#bootOverlay {
    background: radial-gradient(ellipse at 50% 40%, #14062b 0%, #07030f 70%) !important;
}
.boot-terminal {
    width: min(92vw, 520px); padding: 26px 28px; border: 1px solid var(--neon-pink); border-radius: 14px;
    background: rgba(10,4,22,0.85); box-shadow: 0 0 40px rgba(255,43,214,0.35), inset 0 0 30px rgba(0,229,255,0.05);
    backdrop-filter: blur(8px);
}
.boot-head { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.3em; letter-spacing: 3px; color: #fff; text-shadow: 0 0 14px var(--neon-pink); margin-bottom: 16px; }
.boot-head span { color: var(--neon-cyan); font-size: 0.6em; text-shadow: 0 0 10px var(--neon-cyan); }
.boot-lines { font-family: 'Space Mono', monospace; font-size: 0.82em; min-height: 170px; }
.boot-line { color: #9fd8ff; opacity: 0; animation: bootLineIn 0.25s forwards; text-shadow: 0 0 6px rgba(0,229,255,0.4); padding: 1px 0; }
.boot-line.boot-ok { color: var(--neon-pink); font-weight: bold; text-shadow: 0 0 12px var(--neon-pink); letter-spacing: 2px; }
@keyframes bootLineIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.boot-bar { margin-top: 16px; height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.boot-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)); animation: bootFill 1.7s ease forwards; box-shadow: 0 0 12px var(--neon-pink); }
@keyframes bootFill { to { width: 100%; } }

/* ---- Refonte du logging (console néon) ---- */
.log-line { padding: 2px 0; border-bottom: 1px dotted rgba(255,43,214,0.08); display: flex; gap: 8px; align-items: baseline; animation: logIn 0.2s ease; }
@keyframes logIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }
.log-time { color: rgba(159,216,255,0.5); font-size: 0.85em; flex: 0 0 auto; }
.log-line.info  { color: #9fd8ff; }
.log-line.warn  { color: var(--amber); text-shadow: 0 0 8px rgba(255,184,0,0.4); }
.log-line.error { color: var(--red); text-shadow: 0 0 8px rgba(255,59,107,0.5); }
.log-line.geo   { color: #7bffcf; }
.log-line.net   { color: var(--neon-cyan); }
.log-line.sim   { color: var(--neon-pink); }
.log-line::before { content: '▸'; opacity: 0.5; }
.log-line.warn::before { content: '⚠'; }
.log-line.error::before { content: '✖'; }
.log-line.sim::before { content: '◈'; }
.log-line.net::before { content: '⇅'; }
.log-line.geo::before { content: '◉'; }

/* badge de niveau dans le log */
.log-tag { font-size: 0.62em; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; padding: 1px 6px; border-radius: 4px; flex: 0 0 auto; border: 1px solid currentColor; opacity: 0.85; }
.log-msg { flex: 1; }

/* ===================================================================
   AJOUTS v18 — Re-skin NÉON GLOBAL (tous les onglets)
   =================================================================== */

/* Cartes de stats */
.stat-card {
    background: linear-gradient(160deg, rgba(255,43,214,0.08), rgba(0,229,255,0.05)) !important;
    border: 1px solid var(--border) !important; border-radius: 14px !important;
    backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0,0,0,0.4); transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 0 22px rgba(255,43,214,0.3); }
.stat-value, .geo-value, .intel-val, .speed-val { color: var(--neon-cyan) !important; text-shadow: 0 0 10px rgba(0,229,255,0.5); }
.stat-label, .geo-label, .intel-label, .field-label, .speed-label { color: #d7b8ff !important; letter-spacing: .5px; }

/* Champs geo / intel (mini-cartes) */
.geo-field, .intel-cell {
    background: rgba(20,6,34,0.5) !important; border: 1px solid var(--border) !important;
    border-radius: 12px; transition: all .2s;
}
.geo-field:hover, .intel-cell:hover { border-color: var(--neon-cyan) !important; box-shadow: 0 0 14px rgba(0,229,255,0.2); }

/* Badges */
.real-badge { background: linear-gradient(90deg, var(--neon-cyan), #6ad8ff) !important; color: #04020c !important; box-shadow: 0 0 10px rgba(0,229,255,0.5); border: none !important; }
.sim-badge { background: linear-gradient(90deg, var(--neon-pink), #ff7be8) !important; color: #fff !important; box-shadow: 0 0 10px rgba(255,43,214,0.5); }

/* Boutons icônes */
.icon-btn { border: 1px solid var(--border) !important; background: rgba(255,43,214,0.06) !important; border-radius: 10px; transition: all .18s; }
.icon-btn:hover { box-shadow: 0 0 14px var(--neon-pink); transform: translateY(-1px); }

/* Listes de détail / aide */
.detail-list, .help-item { border-radius: 12px; }
.help-item { background: rgba(20,6,34,0.4) !important; border: 1px solid var(--border) !important; transition: all .2s; }
.help-item:hover { border-color: var(--neon-cyan) !important; box-shadow: 0 0 16px rgba(0,229,255,0.18); }

/* Zones défilantes */
.scroll-area { border-radius: 12px; }

/* Curseurs (range) néon */
input[type="range"] { accent-color: var(--neon-pink); }

/* Cases à cocher néon */
.checkbox-row input[type="checkbox"], .op-opt input[type="checkbox"] { accent-color: var(--neon-pink); }

/* Selects */
select.form-input { background: rgba(10,4,20,0.7) !important; }
select.form-input:focus { border-color: var(--neon-cyan) !important; }

/* Barres XP / jauges génériques */
.xp-bar { background: rgba(255,43,214,0.08) !important; border-radius: 8px; overflow: hidden; }
.xp-fill { background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)) !important; box-shadow: 0 0 12px var(--neon-pink); }

/* Cartes cliquables (effet hover commun) */
.clickable { transition: transform .2s, box-shadow .2s; }
.clickable:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(255,43,214,0.25); }

/* Boutons dangereux */
.danger-small { border-color: var(--red) !important; color: var(--red) !important; background: rgba(255,59,107,0.08) !important; }
.danger-small:hover { box-shadow: 0 0 14px var(--red) !important; }

/* En-têtes de section générique */
.field-label { text-transform: uppercase; font-size: .72em; }

/* Compas / repères */
.compass-mark { color: var(--neon-cyan) !important; }

/* Modale de détail (Detail.open) */
.detail-modal, .modal-box, .detail-content { backdrop-filter: blur(16px); }

/* ===================================================================
   AJOUTS v19 — Refonte du logging / console
   =================================================================== */
.log-toolbar { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.log-search { flex: 1; min-width: 180px; }
.log-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.log-filter {
    font-size: 0.72em; padding: 5px 11px; border-radius: 20px; cursor: pointer;
    border: 1px solid var(--border); background: rgba(255,43,214,0.05); color: var(--cyan); transition: all .15s;
}
.log-filter:hover { border-color: var(--neon-cyan); }
.log-filter.active { background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)); color: #04020c; font-weight: bold; box-shadow: 0 0 12px rgba(255,43,214,0.4); }

.console-output { font-family: 'Space Mono', monospace; font-size: 0.8em; }
.log-line {
    display: flex; gap: 10px; align-items: baseline; padding: 4px 8px; border-radius: 6px;
    border-left: 3px solid var(--border); margin-bottom: 3px;
    background: rgba(255,255,255,0.015);
}
@keyframes logIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.log-time { color: var(--neon-cyan); opacity: 0.65; flex: 0 0 auto; }
.log-tag { font-size: 0.7em; font-weight: bold; padding: 1px 6px; border-radius: 4px; flex: 0 0 auto; letter-spacing: 1px; }
.log-msg { color: #e8d5ff; flex: 1; }
.log-line.info { border-left-color: var(--neon-cyan); }
.log-line.info .log-tag { background: rgba(0,229,255,0.18); color: var(--neon-cyan); }
.log-line.warn { border-left-color: var(--amber); }
.log-line.warn .log-tag { background: rgba(255,184,0,0.18); color: var(--amber); }
.log-line.error { border-left-color: var(--red); }
.log-line.error .log-tag { background: rgba(255,59,107,0.2); color: var(--red); }
.log-line.error .log-msg { color: #ffb3c4; }
.log-line.net { border-left-color: var(--neon-purple); }
.log-line.net .log-tag { background: rgba(180,80,255,0.18); color: var(--neon-purple); }
.log-line.geo { border-left-color: #00ff9d; }
.log-line.geo .log-tag { background: rgba(0,255,157,0.15); color: #00ff9d; }
.log-line.sim { border-left-color: var(--neon-pink); }
.log-line.sim .log-tag { background: rgba(255,43,214,0.18); color: var(--neon-pink); }
.log-empty { color: var(--cyan); opacity: 0.6; padding: 16px; text-align: center; font-style: italic; }

/* ===================================================================
   AJOUTS v20 — Dashboard : jauge de santé réseau
   =================================================================== */
.health-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.health-gauge { width: 200px; height: 200px; flex: 0 0 auto; }
.health-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.health-track { fill: none; stroke: rgba(255,43,214,0.12); stroke-width: 14; }
.health-arc { fill: none; stroke: url(#healthGrad); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1s ease; filter: drop-shadow(0 0 8px rgba(255,43,214,0.6)); }
.health-num { fill: #fff; font-family: 'Orbitron', sans-serif; font-size: 48px; font-weight: 900; text-anchor: middle; transform: rotate(90deg); transform-origin: 100px 100px; }
.health-unit { fill: var(--neon-cyan); font-size: 16px; text-anchor: middle; transform: rotate(90deg); transform-origin: 100px 100px; opacity: 0.7; }
.health-info { flex: 1; min-width: 180px; }
.health-grade { font-family: 'Orbitron', sans-serif; font-size: 1.8em; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 14px currentColor; }
.health-tip { color: #d7b8ff; margin-top: 8px; font-size: 0.9em; }

/* ===================================================================
   AJOUTS v21 — Finitions néon par onglet (carte, capteurs, sessions, stats)
   =================================================================== */

/* --- Boussole (capteurs) --- */
.compass-ring { border: 2px solid var(--neon-pink) !important; box-shadow: 0 0 24px rgba(255,43,214,0.35), inset 0 0 30px rgba(0,229,255,0.08); }
.compass-needle { filter: drop-shadow(0 0 8px var(--neon-pink)); }
.compass-center { background: var(--neon-cyan) !important; box-shadow: 0 0 14px var(--neon-cyan); }
.compass-mark { color: var(--neon-cyan) !important; text-shadow: 0 0 6px rgba(0,229,255,0.5); }
.compass-readout { color: #fff !important; text-shadow: 0 0 10px var(--neon-pink); }

/* --- Lecture vitesse / accéléro --- */
.speed-readout { background: rgba(20,6,34,0.5); border: 1px solid var(--border); border-radius: 12px; }
.speed-val { color: var(--neon-cyan) !important; text-shadow: 0 0 12px rgba(0,229,255,0.5); }

/* --- Signal bar (signal/dashboard) --- */
.signal-meter { background: rgba(255,43,214,0.06); border-radius: 10px; overflow: hidden; }
.signal-bar { background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)) !important; box-shadow: 0 0 14px var(--neon-pink); color: #04020c !important; font-weight: bold; }

/* --- Risque / prédiction --- */
.risk-bar { background: rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; height: 10px; }
.risk-fill { background: linear-gradient(90deg, #00e5ff, var(--amber), var(--red)) !important; box-shadow: 0 0 10px rgba(255,59,107,0.4); height: 100%; }

/* --- Graphiques (chart.js) cadre --- */
.chart-container { background: rgba(10,4,20,0.4); border: 1px solid var(--border); border-radius: 14px; padding: 10px; }

/* --- Carte Leaflet : habillage néon --- */
.map-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.map-stat { background: rgba(20,6,34,0.5); border: 1px solid var(--border); border-radius: 10px; color: var(--neon-cyan); }
#mapContainer, .leaflet-container { border-radius: 16px !important; border: 1px solid var(--border); box-shadow: 0 0 26px rgba(255,43,214,0.18); }
.leaflet-container { background: #0a0418 !important; }
.leaflet-control-zoom a { background: rgba(20,6,34,0.9) !important; color: var(--neon-cyan) !important; border-color: var(--border) !important; }
.leaflet-control-zoom a:hover { box-shadow: 0 0 10px var(--neon-cyan); }
.leaflet-bar { border-color: var(--border) !important; }

/* --- Heatmap horaire (stats) --- */
.hour-heatmap { gap: 3px; }

/* --- Météo (dashboard) --- */
.weather-temp { color: var(--neon-cyan) !important; text-shadow: 0 0 14px rgba(0,229,255,0.5); }
.weather-icon { filter: drop-shadow(0 0 12px rgba(255,43,214,0.5)); }
.weather-panel { overflow: hidden; }

/* --- Sessions --- */
.session-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ===================================================================
   AJOUTS v22 — Palette de commandes (Ctrl+K) + accessibilité
   =================================================================== */
.cmd-palette {
    position: fixed; inset: 0; z-index: 100001; display: none;
    background: rgba(4,2,12,0.7); backdrop-filter: blur(6px);
    align-items: flex-start; justify-content: center;
}
.cmd-palette.show { display: flex; animation: cmdFade .15s ease; }
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd-box {
    margin-top: 12vh; width: min(560px, 92vw);
    background: linear-gradient(160deg, rgba(40,10,60,0.96), rgba(10,4,24,0.98));
    border: 1px solid var(--neon-pink); border-radius: 16px; overflow: hidden;
    box-shadow: 0 0 50px rgba(255,43,214,0.4); animation: cmdSlide .2s ease;
}
@keyframes cmdSlide { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cmd-input {
    width: 100%; padding: 18px 20px; background: transparent; border: none;
    border-bottom: 1px solid var(--border); color: #fff; font-size: 1.05em; font-family: 'Space Mono', monospace; outline: none;
}
.cmd-input::placeholder { color: rgba(215,184,255,0.5); }
.cmd-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: #e8d5ff; cursor: pointer; font-size: 0.92em; }
.cmd-item:hover, .cmd-item.active { background: linear-gradient(90deg, rgba(255,43,214,0.25), rgba(0,229,255,0.12)); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,229,255,0.3); }
.cmd-ico { font-size: 1.1em; flex: 0 0 auto; }
.cmd-empty { padding: 18px; text-align: center; color: var(--cyan); opacity: 0.6; }
.cmd-hint { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 0.72em; color: var(--cyan); opacity: 0.7; font-family: 'Space Mono', monospace; }

/* Accessibilité : réduction des animations */
body.reduce-anim *, body.reduce-anim *::before, body.reduce-anim *::after {
    animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.05s !important;
}

/* ===================================================================
   AJOUTS v24 — DA PROFESSIONNELLE & ÉPURÉE (intérieur de l'app)
   Scopé à #appContainer : l'intro et le login conservent leur style.
   =================================================================== */
#appContainer {
    --green: #22c55e;      /* "bon" */
    --cyan: #38bdf8;       /* accent principal (bleu signal) */
    --amber: #f59e0b;      /* alerte */
    --red: #ef4444;        /* critique */
    --bg-dark: #0d1017;
    --panel-bg: #151a22;
    --border: #232a36;
    --neon-pink: #38bdf8;  /* on neutralise le rose en bleu accent */
    --neon-cyan: #38bdf8;
    --neon-purple: #818cf8;
    --txt: #e6e9ef;
    --txt-dim: #94a3b8;
    background: #0d1017;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    color: var(--txt);
}

/* Fond global sobre (sans halos colorés) derrière l'app */
body { background: #0a0d12 !important; }
#appContainer .bg-canvas, #appContainer ~ .bg-canvas { opacity: 0.12; }

/* --- Panneaux : plats, propres, sans bordure animée ni glow --- */
#appContainer .panel {
    background: var(--panel-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#appContainer .panel::before { display: none !important; }   /* supprime le liseré animé */
#appContainer .panel-title {
    text-shadow: none !important;
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600; font-size: 1.05em; letter-spacing: 0;
    color: var(--txt); display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px;
}

/* --- Boutons : sobres, sans reflet qui balaie --- */
#appContainer .btn, #appContainer .btn-small {
    background: #1e2530 !important;
    border: 1px solid var(--border) !important;
    color: var(--txt) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    font-family: inherit; font-weight: 500;
    transition: background .15s, border-color .15s;
}
#appContainer .btn::after, #appContainer .btn-small::after { display: none !important; }
#appContainer .btn:hover, #appContainer .btn-small:hover {
    background: #252d3a !important; border-color: var(--cyan) !important; transform: none !important;
}
/* bouton principal (accent) */
#appContainer .btn { background: var(--cyan) !important; border-color: var(--cyan) !important; color: #04121f !important; font-weight: 600; }
#appContainer .btn:hover { background: #5cb6ff !important; }

/* --- Champs --- */
#appContainer .form-input, #appContainer select.form-input {
    background: #0f141c !important; border: 1px solid var(--border) !important;
    border-radius: 8px; color: var(--txt) !important;
}
#appContainer .form-input:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 2px rgba(56,189,248,0.2) !important; }

/* --- Sidebar / navigation : liste claire --- */
#appContainer .sidebar { background: #0f141c !important; border-right: 1px solid var(--border); }
#appContainer .nav-item {
    border-radius: 8px !important; color: var(--txt-dim) !important;
    box-shadow: none !important; background: transparent !important; transition: background .15s, color .15s;
}
#appContainer .nav-item:hover { background: #1a212c !important; color: var(--txt) !important; transform: none !important; }
#appContainer .nav-item.active {
    background: #161d27 !important; color: var(--txt) !important;
    box-shadow: inset 3px 0 0 var(--cyan) !important;
}
#appContainer .nav-item.active .nav-icon { filter: none !important; }

/* --- Header --- */
#appContainer .header { background: #0f141c !important; border-bottom: 1px solid var(--border); }
#appContainer .header-title {
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 600 !important; letter-spacing: 0 !important; color: var(--txt) !important;
    background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}

/* --- Cartes de stats : flat, hover discret --- */
#appContainer .stat-card {
    background: var(--panel-bg) !important; border: 1px solid var(--border) !important;
    border-radius: 10px !important; box-shadow: none !important; backdrop-filter: none !important;
}
#appContainer .stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; border-color: #2c3645 !important; }
#appContainer .stat-value { color: var(--txt) !important; text-shadow: none !important; font-weight: 700; }
#appContainer .stat-label, #appContainer .field-label { color: var(--txt-dim) !important; text-transform: none; letter-spacing: 0; }

/* --- Badges sobres --- */
#appContainer .real-badge { background: rgba(34,197,94,0.15) !important; color: #4ade80 !important; box-shadow: none !important; border: 1px solid rgba(34,197,94,0.3) !important; font-weight: 600; }
#appContainer .sim-badge { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; box-shadow: none !important; border: 1px solid rgba(245,158,11,0.3) !important; }

/* --- On coupe les effets "gadget" dans l'app --- */
#appContainer .op-glitch::before, #appContainer .op-glitch::after { display: none !important; }
#appContainer .op-glitch { animation: none !important; }
#appContainer.scanlines::after, #scanner.scanlines::after { display: none !important; }
#appContainer .op-prio-tag { animation: none !important; background: var(--red) !important; }

/* --- Valeurs / monospace là où c'est pertinent --- */
#appContainer .stat-value, #appContainer .health-num, #appContainer .geo-value, #appContainer .log-time, #appContainer .console-output {
    font-family: 'Space Mono', ui-monospace, monospace;
}

/* --- Jauge santé : accent bleu sobre --- */
#appContainer .health-arc { filter: none !important; }
#appContainer .health-grade { text-shadow: none !important; }

/* --- Scrollbars sobres --- */
#appContainer ::-webkit-scrollbar-thumb { background: #2c3645 !important; box-shadow: none !important; }
#appContainer ::-webkit-scrollbar-track { background: transparent !important; }

/* ===================================================================
   AJOUTS v25 — Menu profil déroulant (en-tête)
   =================================================================== */
.profile-menu { position: relative; }
#appContainer .user-badge {
    background: #1e2530; border: 1px solid var(--border); color: var(--txt);
    padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 0.9em; display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, border-color .15s;
}
#appContainer .user-badge:hover { background: #252d3a; border-color: var(--cyan); }
.user-badge .caret { font-size: 0.7em; opacity: 0.7; }
.profile-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); width: 240px; z-index: 500;
    background: #161b24; border: 1px solid var(--border); border-radius: 10px; padding: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.profile-dd-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.profile-avatar { width: 42px; height: 42px; border-radius: 50%; background: #1e2530; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.3em; }
.profile-dd-name { font-weight: 600; color: var(--txt); }
.profile-dd-role { font-size: 0.78em; color: var(--txt-dim); }
.profile-dd-row { display: flex; justify-content: space-between; font-size: 0.82em; color: var(--txt-dim); padding: 4px 0; }
.profile-dd-row span:last-child { color: var(--txt); }

/* ===================================================================
   AJOUTS v26 — Scanner : radar + FFT + spectrogramme (pro, visibles)
   =================================================================== */
#appContainer .op-center { flex-direction: column; gap: 18px; width: 100%; }

/* Bloc radar avec grand titre */
.op-radar-block { width: 100%; display: flex; flex-direction: column; align-items: center; }
.op-radar-title {
    font-family: 'Orbitron', sans-serif; font-size: 1.15em; font-weight: 700; letter-spacing: 3px;
    color: var(--cyan); margin-bottom: 12px; text-align: center;
    text-shadow: 0 0 14px rgba(56,189,248,0.5);
}
#appContainer .radar-wrap { display: flex; justify-content: center; margin: 0; }
#appContainer #radarCanvas {
    width: 340px; height: 340px; max-width: 90vw; border-radius: 50%;
    background: radial-gradient(circle, #0f1620 0%, #0a0e15 80%);
    border: 1px solid var(--border);
    box-shadow: 0 0 30px rgba(56,189,248,0.12), inset 0 0 40px rgba(0,0,0,0.6);
}

/* Analyseurs plus grands et lisibles */
#appContainer .op-spectrum { width: 100%; max-width: 720px; margin: 0 auto; }
#appContainer .op-spectrum-label {
    font-family: 'Orbitron', sans-serif; font-size: 0.8em; letter-spacing: 2px;
    color: var(--cyan); margin: 12px 0 6px; text-shadow: none; display: flex; align-items: center; gap: 8px;
}
#appContainer .op-fft, #appContainer .op-spectro {
    width: 100%; display: block; border: 1px solid var(--border); border-radius: 8px;
    background: #0a0e15; box-shadow: none;
}
#appContainer .op-fft { height: 140px; }
#appContainer .op-spectro { height: 110px; image-rendering: pixelated; }

/* ===================================================================
   AJOUTS v27 — Switch de compte (menu profil)
   =================================================================== */
.profile-switch { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.profile-switch-title { font-size: 0.72em; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.profile-switch-item {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: #1e2530; border: 1px solid var(--border); color: var(--txt);
    padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 0.85em; margin-bottom: 5px; transition: background .15s, border-color .15s;
}
.profile-switch-item:hover { background: #252d3a; border-color: var(--cyan); }
.profile-switch-role { font-size: 0.72em; color: var(--txt-dim); }

/* ===================================================================
   AJOUTS v28 — Finition "panel pro" (style admin / OVH-like)
   =================================================================== */
/* Marque dans la sidebar */
.sidebar-brand {
    display: flex; align-items: center; gap: 9px; padding: 6px 12px 20px;
    font-family: 'Orbitron', sans-serif; font-size: 1.05em; letter-spacing: 1px; color: var(--txt);
    border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.sidebar-brand strong { color: var(--cyan); font-weight: 700; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex: 0 0 auto; }

/* Sidebar plus aérée */
#appContainer .sidebar { padding: 18px 12px; min-width: 210px; }
#appContainer .nav-item { padding: 11px 14px; margin-bottom: 4px; font-size: 0.92em; display: flex; align-items: center; gap: 11px; }
#appContainer .nav-icon { font-size: 1.05em; width: 22px; text-align: center; }

/* Header plus sobre */
#appContainer .header { padding: 14px 24px; }
#appContainer .header-title { font-size: 1.15em; }
#appContainer .conn-badge { background: #1a212c; border: 1px solid var(--border); color: var(--txt-dim); padding: 5px 11px; border-radius: 6px; font-size: 0.8em; }

/* Contenu : respiration */
#appContainer .content-area { padding: 24px; }
#appContainer .panel { padding: 20px 22px; margin-bottom: 20px; }
#appContainer .grid-4 { gap: 16px; margin-bottom: 20px; }
#appContainer .grid-2 { gap: 16px; }

/* Cartes de stats façon widgets de panel */
#appContainer .stat-card { padding: 18px 20px; }
#appContainer .stat-label { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
#appContainer .stat-value { font-size: 1.9em; line-height: 1.1; }
#appContainer .stat-sub { font-size: 0.78em; color: var(--txt-dim); margin-top: 4px; }
#appContainer .card-hint { opacity: 0; transition: opacity .15s; font-size: 0.72em; color: var(--cyan); margin-top: 8px; }
#appContainer .stat-card:hover .card-hint { opacity: 1; }

/* Titres de panneaux : nets, fins */
#appContainer .panel-title { font-size: 1em; font-weight: 600; padding-bottom: 14px; margin-bottom: 18px; }

/* Boutons un peu plus compacts */
#appContainer .btn { padding: 11px 18px; font-size: 0.9em; }
#appContainer .btn-small { padding: 8px 13px; font-size: 0.82em; }

/* Scrollbar fine */
#appContainer ::-webkit-scrollbar { width: 8px; height: 8px; }

/* ===================================================================
   AJOUTS v29 — Sidebar pro élargie, profil épuré, page Abonnement
   =================================================================== */
/* Sidebar en colonne, abonnement collé en bas */
#appContainer .sidebar {
    min-width: 248px; width: 248px; display: flex; flex-direction: column;
    padding: 20px 14px; height: 100vh; position: sticky; top: 0;
}
.sidebar-brand { font-size: 1.08em; padding: 4px 10px 22px; }
.nav-section { display: flex; flex-direction: column; gap: 6px; }
.nav-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }

/* Items de nav plus grands et lisibles */
#appContainer .nav-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 16px; border-radius: 9px; font-size: 0.98em; font-weight: 500;
    color: var(--txt-dim); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
#appContainer .nav-item:hover { background: #1a212c; color: var(--txt); }
#appContainer .nav-item.active { background: #1a2230; color: #fff; box-shadow: inset 3px 0 0 var(--cyan); }
.nav-svg { width: 21px; height: 21px; flex: 0 0 auto; stroke: currentColor; }
#appContainer .nav-item.active .nav-svg { stroke: var(--cyan); }

/* Onglet abonnement (avec plan) */
.nav-item.nav-sub { align-items: center; }
.nav-sub-text { display: flex; flex-direction: column; line-height: 1.25; }
.nav-plan { font-size: 0.72em; color: var(--cyan); font-weight: 600; }

/* Avatar lettre */
.user-avatar-mini, .profile-avatar {
    background: linear-gradient(135deg, var(--cyan), #6366f1); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.user-avatar-mini { width: 26px; height: 26px; border-radius: 50%; font-size: 0.8em; }
.profile-avatar { width: 44px; height: 44px; border-radius: 50%; font-size: 1.1em; border: none; }
#appContainer .user-badge { gap: 9px; padding: 6px 10px 6px 6px; }

/* Profil déroulant épuré */
.profile-dropdown { width: 270px; padding: 16px; }
.profile-dd-plan {
    display: flex; align-items: center; justify-content: space-between;
    background: #0f141c; border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; margin: 12px 0; font-size: 0.82em; color: var(--txt-dim);
}
.profile-dd-plan strong { color: var(--cyan); font-size: 1.05em; }
.profile-dd-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.profile-dd-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: #1e2530; border: 1px solid var(--border); color: var(--txt);
    padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 0.88em; font-family: inherit; transition: background .15s, border-color .15s;
}
.profile-dd-btn:hover { background: #252d3a; border-color: var(--cyan); }
.profile-dd-btn.danger:hover { border-color: var(--red); color: #fca5a5; }
.profile-dd-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- PAGE ABONNEMENT ---------- */
.sub-hero { text-align: center; max-width: 640px; margin: 8px auto 32px; }
.sub-title { font-size: 1.9em; font-weight: 700; color: var(--txt); margin: 0 0 10px; letter-spacing: -0.5px; }
.sub-subtitle { color: var(--txt-dim); font-size: 1em; line-height: 1.5; margin: 0 0 16px; }
.sub-current { display: inline-block; background: #0f141c; border: 1px solid var(--border); border-radius: 20px; padding: 6px 16px; font-size: 0.85em; color: var(--txt-dim); }
.sub-current strong { color: var(--cyan); }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.sub-card {
    position: relative; background: var(--panel-bg); border: 1px solid var(--border);
    border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.sub-card:hover { transform: translateY(-4px); border-color: #2c3645; box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
.sub-card-featured { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 8px 30px rgba(56,189,248,0.18); }
.sub-card-active { border-color: var(--green); }
.sub-badge-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--cyan); color: #04121f; font-size: 0.72em; font-weight: 700; padding: 4px 14px; border-radius: 20px; white-space: nowrap; }
.sub-plan-name { font-size: 1.15em; font-weight: 700; color: var(--txt); }
.sub-price { margin: 14px 0 6px; }
.sub-amount { font-size: 2.4em; font-weight: 800; color: var(--txt); }
.sub-period { color: var(--txt-dim); font-size: 0.9em; margin-left: 4px; }
.sub-plan-desc { color: var(--txt-dim); font-size: 0.88em; line-height: 1.5; min-height: 40px; margin: 0 0 18px; }
.sub-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.sub-features li { position: relative; padding-left: 26px; color: var(--txt); font-size: 0.88em; line-height: 1.4; }
.sub-features li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(34,197,94,0.15); }
.sub-features li::after { content: '✓'; position: absolute; left: 4px; top: 1px; color: var(--green); font-size: 0.78em; font-weight: 700; }
.sub-btn {
    width: 100%; padding: 12px; border-radius: 9px; font-size: 0.92em; font-weight: 600; cursor: pointer;
    background: #1e2530; border: 1px solid var(--border); color: var(--txt); font-family: inherit; transition: background .15s, border-color .15s;
}
.sub-btn:hover:not(:disabled) { background: #252d3a; border-color: var(--cyan); }
.sub-btn-primary { background: var(--cyan); border-color: var(--cyan); color: #04121f; }
.sub-btn-primary:hover:not(:disabled) { background: #5cb6ff; }
.sub-btn-current { background: transparent; border-color: var(--green); color: var(--green); cursor: default; }
.sub-btn:disabled { opacity: 0.85; cursor: default; }
.sub-note { text-align: center; color: var(--txt-dim); font-size: 0.8em; margin-top: 28px; }

/* ===================================================================
   AJOUTS v30 — Correctif définitif de la navigation (taille/lisibilité)
   =================================================================== */
#appContainer .sidebar { min-width: 252px !important; width: 252px !important; }
#appContainer .sidebar .nav-item {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    gap: 14px !important;
    padding: 15px 16px !important;
    font-size: 1em !important;
    border: none !important;
    border-radius: 9px !important;
    background: transparent !important;
    white-space: nowrap !important;
}
#appContainer .sidebar .nav-item span { font-size: 1em !important; line-height: 1.2 !important; }
#appContainer .sidebar .nav-item:hover { background: #1a212c !important; transform: none !important; box-shadow: none !important; }
#appContainer .sidebar .nav-item.active { background: #1a2230 !important; box-shadow: inset 3px 0 0 var(--cyan) !important; color: #fff !important; }
#appContainer .sidebar .nav-svg { width: 22px !important; height: 22px !important; }

/* onglet abonnement : plus grand, texte sur deux lignes lisible */
#appContainer .sidebar .nav-item.nav-sub { padding: 14px 16px !important; }
.nav-sub .nav-sub-text span:first-child { font-size: 1em !important; }
.nav-sub .nav-plan { font-size: 0.78em !important; }

/* on neutralise les animations d'entrée qui pouvaient masquer le texte */
.sidebar .nav-item { animation: none !important; }

/* ===================================================================
   AJOUTS v31 — Modale de détail en DA pro (épurée)
   =================================================================== */
.detail-modal { background: rgba(6,9,14,0.7); backdrop-filter: blur(6px); }
.detail-modal .detail-modal-box {
    background: #151a22 !important; border: 1px solid var(--border) !important;
    border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important;
    max-width: 440px; width: 92%; padding: 0; overflow: hidden;
}
.detail-modal .modal-head {
    padding: 18px 22px; border-bottom: 1px solid var(--border);
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 1.05em;
    color: #e6e9ef; text-shadow: none; letter-spacing: 0;
}
.detail-modal .modal-head .icon-btn { background: transparent; border: none; color: #94a3b8; font-size: 1.1em; }
.detail-modal .modal-head .icon-btn:hover { color: #e6e9ef; }
.detail-modal #detailBody { padding: 22px; }

/* jauge */
.detail-gauge { display: flex; justify-content: center; margin-bottom: 18px; }
.detail-modal .gauge-val { fill: #e6e9ef; font-size: 30px; font-weight: 700; font-family: 'Space Mono', monospace; }
.detail-modal .gauge-unit { fill: #94a3b8; font-size: 12px; }
.detail-modal .gauge-arc { transition: stroke-dashoffset 0.6s ease; }

/* lignes clé/valeur */
.detail-modal .detail-list { display: flex; flex-direction: column; gap: 0; }
.detail-modal .detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.92em;
}
.detail-modal .detail-row:last-child { border-bottom: none; }
.detail-modal .detail-row .k { color: #94a3b8; }
.detail-modal .detail-row .v { color: #e6e9ef; font-weight: 500; font-family: 'Space Mono', monospace; }

/* sparkline */
.detail-modal .detail-spark { margin-top: 16px; background: #0f141c; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }

/* note */
.detail-modal .detail-note { color: #94a3b8; font-size: 0.85em; line-height: 1.5; margin: 12px 0 0; }
.detail-modal .detail-section-title { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin: 18px 0 6px; }

/* on neutralise tout liseré coloré de la box */
.detail-modal .detail-modal-box[style] { border-color: var(--border) !important; }

/* ===================================================================
   AJOUTS v32 — Checkout fictif + verrous de fonctionnalités
   =================================================================== */
.checkout-modal { background: rgba(6,9,14,0.75); backdrop-filter: blur(7px); }
.checkout-modal .checkout-box {
    background: #151a22 !important; border: 1px solid var(--border) !important;
    border-radius: 16px !important; max-width: 420px; width: 92%; padding: 0; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6) !important;
}
.checkout-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.checkout-title { font-size: 1.1em; font-weight: 700; color: #e6e9ef; }
.checkout-sub { font-size: 0.85em; color: #94a3b8; margin-top: 3px; }
.checkout-sub strong { color: var(--cyan); }
.checkout-head .icon-btn { background: transparent; border: none; color: #94a3b8; font-size: 1.1em; cursor: pointer; }
.checkout-body { padding: 20px 22px; }
.co-demo-banner { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24; font-size: 0.78em; line-height: 1.4; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; }
.co-label { display: block; font-size: 0.78em; color: #94a3b8; margin: 12px 0 5px; text-transform: uppercase; letter-spacing: 0.4px; }
.co-input { width: 100%; background: #0f141c; border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; color: #e6e9ef; font-family: 'Space Mono', monospace; font-size: 0.95em; }
.co-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(56,189,248,0.2); }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-pay-btn { width: 100%; margin-top: 20px; padding: 14px; border: none; border-radius: 9px; background: var(--cyan); color: #04121f; font-weight: 700; font-size: 1em; cursor: pointer; font-family: inherit; transition: background .15s; }
.co-pay-btn:hover:not(:disabled) { background: #5cb6ff; }
.co-pay-btn:disabled { opacity: 0.8; cursor: default; }
.co-pay-btn.co-processing { background: #475569; }
.co-secure { text-align: center; font-size: 0.74em; color: #94a3b8; margin-top: 12px; }

/* Verrou sur bloc (FFT/spectro) */
.feature-locked { position: relative; }
.lock-overlay { position: absolute; inset: 0; background: rgba(13,16,23,0.82); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; border-radius: 8px; z-index: 5; }
.lock-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.8em; }
.lock-inner span { font-size: 0.42em; color: #cbd5e1; max-width: 240px; line-height: 1.4; }
.lock-cta { font-size: 0.4em; background: var(--cyan); color: #04121f; border: none; padding: 8px 16px; border-radius: 7px; font-weight: 700; cursor: pointer; }
.feature-locked-btn { opacity: 0.5; cursor: not-allowed; position: relative; }
.feature-locked-btn::after { content: '🔒'; margin-left: 6px; font-size: 0.85em; }

/* ===================================================================
   AJOUTS v33 — Paiement pro (3-D Secure), notifications, photo profil
   =================================================================== */
/* Box paiement : retirer tout liseré rose/néon */
.checkout-modal .checkout-box, #checkoutModal .modal-box { border: 1px solid var(--border) !important; box-shadow: 0 24px 70px rgba(0,0,0,0.6) !important; }
.checkout-modal .checkout-box::before { display: none !important; }
.co-card-wrap { position: relative; }
.co-card-brand { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.72em; font-weight: 700; letter-spacing: 1px; color: #5b8def; }

/* Étape 3-D Secure */
.tds-bankbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: #0f141c; border-bottom: 1px solid var(--border); }
.tds-bank-name { font-size: 0.85em; font-weight: 600; color: #e6e9ef; }
.tds-secure-badge { font-size: 0.7em; font-weight: 700; letter-spacing: 0.5px; color: #04121f; background: var(--cyan); padding: 3px 9px; border-radius: 5px; }
.tds-icon { text-align: center; font-size: 2.4em; margin: 6px 0 10px; }
.tds-title { text-align: center; font-size: 1.1em; font-weight: 700; color: #e6e9ef; margin-bottom: 10px; }
.tds-text { text-align: center; color: #94a3b8; font-size: 0.88em; line-height: 1.55; margin: 0 0 14px; }
.tds-text strong { color: #e6e9ef; }
.tds-hint { text-align: center; font-size: 0.8em; color: #94a3b8; background: #0f141c; border: 1px dashed var(--border); border-radius: 8px; padding: 8px; margin-bottom: 14px; }
.tds-hint strong { color: var(--cyan); letter-spacing: 2px; }
.tds-code-input { width: 100%; text-align: center; font-family: 'Space Mono', monospace; font-size: 1.6em; letter-spacing: 10px; padding: 12px; background: #0f141c; border: 1px solid var(--border); border-radius: 10px; color: #e6e9ef; }
.tds-code-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(56,189,248,0.2); }
.tds-error { color: #f87171; font-size: 0.82em; text-align: center; margin-top: 8px; }
.tds-cancel { width: 100%; margin-top: 10px; background: transparent; border: none; color: #94a3b8; font-size: 0.85em; cursor: pointer; padding: 8px; }
.tds-cancel:hover { color: #e6e9ef; }

/* ---------- NOTIFICATIONS PRO ---------- */
.toast-container { position: fixed; top: 18px; right: 18px; z-index: 100002; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.toast {
    display: flex; align-items: flex-start; gap: 12px;
    background: #161b24; border: 1px solid var(--border); border-left: 3px solid var(--txt-dim);
    border-radius: 10px; padding: 13px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    animation: toastIn .22s ease; color: #e6e9ef; min-width: 280px;
}
.toast.out { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }
.toast-ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.toast-ico svg { width: 20px; height: 20px; }
.toast-content { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; font-size: 0.9em; margin-bottom: 2px; }
.toast-body { font-size: 0.82em; color: #94a3b8; line-height: 1.4; }
.toast-close { background: transparent; border: none; color: #64748b; cursor: pointer; font-size: 0.9em; padding: 0 2px; flex: 0 0 auto; }
.toast-close:hover { color: #e6e9ef; }
.toast.success { border-left-color: var(--green); } .toast.success .toast-ico { color: var(--green); }
.toast.info { border-left-color: var(--cyan); } .toast.info .toast-ico { color: var(--cyan); }
.toast.warn { border-left-color: var(--amber); } .toast.warn .toast-ico { color: var(--amber); }
.toast.error { border-left-color: var(--red); } .toast.error .toast-ico { color: var(--red); }

/* ---------- AVATAR PHOTO ---------- */
.user-avatar-mini.has-photo, .profile-avatar.has-photo { background-size: cover; background-position: center; color: transparent; }
.profile-avatar { cursor: pointer; border: none; padding: 0; overflow: hidden; }
.profile-avatar:hover { box-shadow: 0 0 0 2px var(--cyan); }
.profile-photo-link { background: none; border: none; color: var(--cyan); font-size: 0.76em; cursor: pointer; padding: 4px 0 0; font-family: inherit; }
.profile-photo-link:hover { text-decoration: underline; }

/* ===================================================================
   AJOUTS v34 — Paiement & 3-D Secure minimalistes, notifs bleues
   =================================================================== */
/* Box plus neutre, coins plus doux, typo système */
#checkoutModal .checkout-box {
    background: #12161d !important; border: 1px solid #232a36 !important; border-radius: 12px !important;
    max-width: 400px; box-shadow: 0 30px 80px rgba(0,0,0,0.55) !important;
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
.checkout-head { padding: 22px 24px 18px; border-bottom: 1px solid #1d242e; }
.checkout-title { font-size: 1.05em; font-weight: 600; color: #f1f5f9; letter-spacing: -0.2px; }
.checkout-sub { font-size: 0.84em; color: #8b95a5; margin-top: 4px; }
.checkout-sub strong { color: #e6e9ef; font-weight: 600; }
.checkout-body { padding: 22px 24px 24px; }

/* Bandeau démo discret */
.co-demo-banner {
    background: rgba(56,189,248,0.07); border: 1px solid rgba(56,189,248,0.18); color: #7dd3fc;
    font-size: 0.76em; line-height: 1.45; padding: 9px 11px; border-radius: 7px; margin-bottom: 18px;
}
/* Champs : épurés, monospace seulement pour la carte */
.co-label { display: block; font-size: 0.74em; color: #8b95a5; margin: 14px 0 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.co-input {
    width: 100%; background: #0c1016; border: 1px solid #232a36; border-radius: 8px;
    padding: 11px 13px; color: #f1f5f9; font-size: 0.92em; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
#coNumber, #coExp, #coCvc { font-family: 'Space Mono', monospace; letter-spacing: 0.5px; }
.co-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.co-card-brand { color: #60a5fa; font-weight: 600; letter-spacing: 0.5px; }

/* Bouton payer : bleu plein, sobre */
.co-pay-btn {
    width: 100%; margin-top: 22px; padding: 13px; border: none; border-radius: 8px;
    background: #2563eb; color: #fff; font-weight: 600; font-size: 0.95em; cursor: pointer;
    font-family: inherit; transition: background .15s; letter-spacing: 0.2px;
}
.co-pay-btn:hover:not(:disabled) { background: #1d4ed8; }
.co-pay-btn:disabled { opacity: 0.7; cursor: default; }
.co-pay-btn.co-processing { background: #334155; }
.co-secure { text-align: center; font-size: 0.74em; color: #64748b; margin-top: 14px; }

/* 3-D Secure : barre banque neutre */
.tds-bankbar { padding: 14px 24px; background: #0c1016; border-bottom: 1px solid #1d242e; }
.tds-bank-name { font-size: 0.82em; font-weight: 600; color: #cbd5e1; }
.tds-secure-badge { font-size: 0.66em; font-weight: 600; letter-spacing: 0.4px; color: #93c5fd; background: rgba(37,99,235,0.18); border: 1px solid rgba(37,99,235,0.35); padding: 3px 8px; border-radius: 4px; }
.tds-icon { text-align: center; color: #38bdf8; margin: 14px 0 12px; }
.tds-icon svg { width: 44px; height: 44px; }
.tds-title { font-size: 1.02em; font-weight: 600; color: #f1f5f9; margin-bottom: 10px; }
.tds-text { color: #8b95a5; font-size: 0.85em; line-height: 1.55; }
.tds-text strong { color: #e6e9ef; font-weight: 600; }
.tds-hint { font-size: 0.78em; color: #8b95a5; background: #0c1016; border: 1px solid #232a36; border-radius: 7px; padding: 9px; }
.tds-hint strong { color: #60a5fa; letter-spacing: 3px; }
.tds-code-input {
    width: 100%; text-align: center; font-family: 'Space Mono', monospace; font-size: 1.5em;
    letter-spacing: 12px; padding: 13px; background: #0c1016; border: 1px solid #232a36; border-radius: 9px; color: #f1f5f9; text-indent: 12px;
}
.tds-code-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.tds-error { color: #f87171; font-size: 0.8em; text-align: center; margin-top: 10px; }
.tds-cancel { width: 100%; margin-top: 8px; background: transparent; border: none; color: #64748b; font-size: 0.84em; cursor: pointer; padding: 9px; font-family: inherit; }
.tds-cancel:hover { color: #cbd5e1; }

/* ---------- NOTIFICATIONS : encore plus épurées, bleu par défaut ---------- */
.toast {
    background: #12161d; border: 1px solid #232a36; border-left: 3px solid #38bdf8;
    border-radius: 9px; padding: 12px 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    min-width: 260px; gap: 11px;
}
.toast-title { font-weight: 600; font-size: 0.86em; color: #f1f5f9; }
.toast-body { font-size: 0.8em; color: #8b95a5; }
.toast-ico { width: 18px; height: 18px; } .toast-ico svg { width: 18px; height: 18px; }
/* tout en bleu sauf erreurs/alertes */
.toast.success { border-left-color: #38bdf8; } .toast.success .toast-ico { color: #38bdf8; }
.toast.info { border-left-color: #38bdf8; } .toast.info .toast-ico { color: #38bdf8; }
.toast.warn { border-left-color: #f59e0b; } .toast.warn .toast-ico { color: #f59e0b; }
.toast.error { border-left-color: #ef4444; } .toast.error .toast-ico { color: #ef4444; }

/* ===================================================================
   AJOUTS v35 — Modale détail 100% pro + nav épurée (anti-néon)
   =================================================================== */
/* Palette pro injectée dans la modale (elle est hors de #appContainer) */
.detail-modal {
    --green: #22c55e; --cyan: #38bdf8; --amber: #f59e0b; --red: #ef4444;
}
/* Box : neutre, sans glow, sans liseré coloré (même si JS pose un border inline) */
.detail-modal .detail-modal-box,
.detail-modal .modal-box {
    background: #12161d !important;
    border: 1px solid #232a36 !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55) !important;
    padding: 0 !important;
    animation: detailIn .2s ease !important;
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
@keyframes detailIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* En-tête : texte sobre, pas d'Orbitron, pas de ligne fluo */
.detail-modal .modal-head {
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    color: #f1f5f9 !important; font-weight: 600 !important; font-size: 1.02em !important;
    padding: 18px 22px !important; margin: 0 !important;
    border-bottom: 1px solid #1d242e !important; text-shadow: none !important;
}
.detail-modal .modal-head .icon-btn { background: transparent !important; border: none !important; color: #64748b !important; box-shadow: none !important; }
.detail-modal .modal-head .icon-btn:hover { color: #e6e9ef !important; }
.detail-modal #detailBody { padding: 22px !important; }

/* Jauge sobre */
.detail-modal .gauge-arc { filter: none !important; }
.detail-modal .gauge-val { fill: #f1f5f9 !important; font-family: 'Space Mono', monospace !important; }
.detail-modal .gauge-unit { fill: #8b95a5 !important; }

/* Lignes clé/valeur : plates, sans liseré vert à gauche */
.detail-modal .detail-list { background: transparent !important; border: none !important; border-radius: 0 !important; }
.detail-modal .detail-row {
    border: none !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: transparent !important; padding: 12px 2px !important; box-shadow: none !important;
}
.detail-modal .detail-row::before { display: none !important; }
.detail-modal .detail-row:last-child { border-bottom: none !important; }
.detail-modal .detail-row .k { color: #8b95a5 !important; font-family: inherit !important; }
.detail-modal .detail-row .v { color: #f1f5f9 !important; font-family: 'Space Mono', monospace !important; }

/* Mini-graphe : cadre sobre */
.detail-modal .detail-spark { background: #0c1016 !important; border: 1px solid #232a36 !important; border-radius: 8px !important; box-shadow: none !important; margin-top: 16px !important; }
.detail-modal .detail-note { color: #8b95a5 !important; }

/* ---------- NAV : suppression de la barre verte fluo ---------- */
#appContainer .nav-item.active::after,
#appContainer .nav-item.active::before { display: none !important; content: none !important; }
#appContainer .sidebar .nav-item.active {
    background: #1a2230 !important;
    box-shadow: inset 2px 0 0 #2563eb !important;   /* fin liseré bleu sobre */
    color: #fff !important;
}
#appContainer .sidebar .nav-item.active .nav-svg { stroke: #38bdf8 !important; filter: none !important; }

/* ===================================================================
   AJOUTS v36 — Détail ultra-pro, photo sans scanlines, modale profil
   =================================================================== */
/* Bordure/contour détail : neutralisation forte (anti rose/violet) */
#detailModal .detail-modal-box, #detailModal .modal-box {
    border: 1px solid #232a36 !important; box-shadow: 0 24px 70px rgba(0,0,0,0.55) !important;
    border-radius: 12px !important; animation: detailIn .2s ease !important;
}
#detailModal .detail-modal-box::before, #detailModal .detail-modal-box::after,
#detailModal .modal-box::before, #detailModal .modal-box::after { display: none !important; content: none !important; }
#detailModal .detail-section-title { font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important; color: #8b95a5 !important; border-bottom: 1px solid #1d242e !important; }
#detailModal .detail-note { background: #0c1016 !important; border-left: 3px solid #232a36 !important; color: #8b95a5 !important; }

/* Avatars : aucune surcouche (scanlines/shine/anim = effet "vieille télé") */
.user-avatar-mini, .profile-avatar, .profile-view-avatar { position: relative; overflow: hidden; }
.user-avatar-mini::before, .user-avatar-mini::after,
.profile-avatar::before, .profile-avatar::after,
.profile-view-avatar::before, .profile-view-avatar::after { display: none !important; content: none !important; }
.user-avatar-mini.has-photo, .profile-avatar.has-photo, .profile-view-avatar.has-photo {
    background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
    image-rendering: auto !important; animation: none !important; filter: none !important;
}

/* ---------- MODALE PROFIL (agrandie, style OVH) ---------- */
.profile-view-modal { background: rgba(6,9,14,0.72); backdrop-filter: blur(7px); }
.profile-view-box {
    position: relative; background: #12161d !important; border: 1px solid #232a36 !important;
    border-radius: 14px !important; max-width: 380px; width: 92%; padding: 0 0 24px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6) !important; overflow: hidden; text-align: center;
    animation: detailIn .2s ease !important; font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important;
}
.profile-view-close { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(0,0,0,0.3) !important; border: none !important; color: #cbd5e1 !important; }
.profile-view-banner { height: 88px; background: linear-gradient(120deg, #1d4ed8, #0ea5e9); }
.profile-view-avatar {
    width: 96px; height: 96px; border-radius: 50%; margin: -48px auto 14px; position: relative; z-index: 2;
    background: linear-gradient(135deg, #38bdf8, #6366f1); color: #fff; font-size: 2.2em; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 4px solid #12161d;
}
.profile-view-name { font-size: 1.25em; font-weight: 700; color: #f1f5f9; }
.profile-view-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 20px 0; }
.pv-tag { font-size: 0.72em; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.pv-tag.tag-role { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.pv-tag.tag-pro { background: rgba(56,189,248,0.18); color: #7dd3fc; }
.pv-tag.tag-free { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.pv-tag.tag-local { background: rgba(34,197,94,0.15); color: #4ade80; }
.profile-view-meta { margin: 20px; background: #0c1016; border: 1px solid #232a36; border-radius: 10px; overflow: hidden; }
.pv-row { display: flex; justify-content: space-between; padding: 11px 14px; font-size: 0.85em; border-bottom: 1px solid #1d242e; }
.pv-row:last-child { border-bottom: none; }
.pv-row span:first-child { color: #8b95a5; }
.pv-row span:last-child { color: #f1f5f9; font-weight: 500; }
.profile-view-actions { display: flex; gap: 10px; margin: 0 20px; }
.pv-btn { flex: 1; padding: 11px; border-radius: 8px; border: 1px solid #232a36; background: #1a212c; color: #e6e9ef; font-size: 0.85em; font-weight: 500; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.pv-btn:hover { background: #232c39; border-color: #38bdf8; }
.pv-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.pv-btn-primary:hover { background: #1d4ed8; }

/* ===================================================================
   AJOUTS v37 — Login professionnel (style OVH) + bleu
   =================================================================== */
.login-screen { background: radial-gradient(ellipse at top, #0e1420 0%, #090c12 70%) !important; }
.login-box {
    background: #12161d !important; border: 1px solid #232a36 !important; border-radius: 16px !important;
    padding: 38px 36px !important; width: 380px; max-width: 92vw;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55) !important;
    animation: slideDown 0.5s ease !important; font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important;
}
.login-brand {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    font-family: 'Orbitron', sans-serif; font-size: 1.15em; letter-spacing: 1px; color: #f1f5f9;
    background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important;
}
.login-brand strong { color: #38bdf8; font-weight: 700; }
.login-brand-dot { width: 9px; height: 9px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.login-heading { text-align: center; font-size: 1.25em; font-weight: 600; color: #f1f5f9; margin: 22px 0 4px; }
.login-subtitle {
    text-align: center; color: #8b95a5 !important; font-size: 0.85em !important; margin-bottom: 26px !important;
    font-family: inherit !important; letter-spacing: 0 !important; text-shadow: none !important;
}
.login-field-label { display: block; font-size: 0.76em; color: #8b95a5; margin: 14px 0 6px; font-weight: 500; }
.login-box .form-input {
    width: 100%; background: #0c1016 !important; border: 1px solid #232a36 !important; border-radius: 8px !important;
    padding: 12px 14px !important; color: #f1f5f9 !important; font-size: 0.95em; font-family: inherit !important;
    box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
.login-box .form-input:focus { outline: none; border-color: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.15) !important; }
.login-remember { margin: 16px 0 4px; font-size: 0.85em; color: #8b95a5; }
.login-btn {
    width: 100%; margin-top: 18px; padding: 13px !important; border-radius: 9px !important; border: none !important;
    background: #2563eb !important; color: #fff !important; font-weight: 600 !important; font-size: 0.98em !important;
    letter-spacing: 0.2px !important; cursor: pointer; font-family: inherit !important;
    box-shadow: none !important; text-shadow: none !important; transition: background .15s !important;
}
.login-btn::after { display: none !important; }
.login-btn:hover { background: #1d4ed8 !important; transform: none !important; box-shadow: none !important; }
.forgot-link { display: block; text-align: center; margin-top: 18px; color: #60a5fa !important; font-size: 0.84em; text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }
.login-foot { text-align: center; color: #64748b; font-size: 0.74em; margin-top: 22px; padding-top: 18px; border-top: 1px solid #1d242e; }
.login-error { color: #f87171; font-size: 0.84em; text-align: center; margin-top: 12px; }
/* on coupe l'ancien fond de points animé */
#loginCanvas { display: none !important; }

/* ===================================================================
   AJOUTS v38 — Transitions sobres, étoile abo remplie, modale reset pro
   =================================================================== */
/* Onglets : plus de slide/whoosh, juste un fondu discret */
#appContainer .tab.active,
#appContainer .tab.active.slide-left,
#appContainer .tab.active.slide-right { animation: tabFadePro .18s ease !important; }
@keyframes tabFadePro { from { opacity: 0; } to { opacity: 1; } }
/* Panneaux : plus d'entrée animée décalée */
#appContainer .tab.active .panel,
#appContainer .tab.active .panel:nth-child(n) { animation: none !important; }
#appContainer .stat-card { animation: none !important; }

/* Nav : plus de zoom ni de rebond d'icône */
#appContainer .sidebar .nav-item:hover { transform: none !important; box-shadow: none !important; }
#appContainer .sidebar .nav-item:hover .nav-svg,
#appContainer .sidebar .nav-item:hover .nav-icon { animation: none !important; transform: none !important; }
#appContainer .sidebar .nav-item { transition: background .15s, color .15s !important; }

/* Étoile Abonnement : remplie quand l'onglet est actif */
#appContainer .nav-item.nav-sub.active .nav-svg { fill: #38bdf8 !important; stroke: #38bdf8 !important; }
#appContainer .nav-item.nav-sub.active .nav-plan { color: #7dd3fc !important; }

/* ---------- MODALE RESET (mot de passe) en DA pro ---------- */
#resetModal .modal-box {
    background: #12161d !important; border: 1px solid #232a36 !important; border-radius: 12px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55) !important; padding: 0 !important; max-width: 380px;
    animation: detailIn .2s ease !important; font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important;
}
#resetModal .modal-box::before, #resetModal .modal-box::after { display: none !important; content: none !important; }
#resetModal .modal-head {
    font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important; color: #f1f5f9 !important;
    font-weight: 600 !important; font-size: 1.02em !important; padding: 18px 22px !important; margin: 0 !important;
    border-bottom: 1px solid #1d242e !important; text-shadow: none !important;
}
#resetModal .modal-head .icon-btn { background: transparent !important; border: none !important; color: #64748b !important; box-shadow: none !important; }
#resetModal .modal-head .icon-btn:hover { color: #e6e9ef !important; }
.pro-modal-body { padding: 20px 22px 22px; }
.pro-label { display: block; font-size: 0.76em; color: #8b95a5; margin: 14px 0 6px; font-weight: 500; }
.pro-label:first-child { margin-top: 0; }
#resetModal .form-input {
    width: 100%; background: #0c1016 !important; border: 1px solid #232a36 !important; border-radius: 8px !important;
    padding: 11px 13px !important; color: #f1f5f9 !important; font-family: inherit !important; box-shadow: none !important;
}
#resetModal .form-input:focus { outline: none; border-color: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.15) !important; }
.pro-btn-ghost {
    width: 100%; margin-top: 10px; background: #1a212c !important; border: 1px solid #232a36 !important;
    color: #e6e9ef !important; border-radius: 8px !important; padding: 10px !important; font-family: inherit !important;
    box-shadow: none !important; text-shadow: none !important;
}
.pro-btn-ghost::after { display: none !important; }
.pro-btn-ghost:hover { background: #232c39 !important; border-color: #38bdf8 !important; transform: none !important; }
#resetModal .pro-btn-primary {
    width: 100%; margin-top: 16px; background: #2563eb !important; border: none !important; color: #fff !important;
    border-radius: 8px !important; padding: 12px !important; font-weight: 600 !important; font-family: inherit !important;
    box-shadow: none !important; text-shadow: none !important;
}
#resetModal .pro-btn-primary::after { display: none !important; }
#resetModal .pro-btn-primary:hover { background: #1d4ed8 !important; transform: none !important; }
.pro-modal-note { color: #8b95a5; font-size: 0.8em; line-height: 1.5; margin: 14px 0 0; }

/* ===================================================================
   AJOUTS v39 — Uniformisation bleue : ripple, qualité, speedtest, croix
   =================================================================== */
/* Vague (ripple) au clic : bleue, discrète */
.ripple { background: rgba(56,189,248,0.22) !important; }
@keyframes rippleAnim { to { transform: scale(2.2); opacity: 0; } }

/* Notifications : TOUTES en bleu sobre (même alertes/erreurs) */
.toast, .toast.success, .toast.info, .toast.warn, .toast.error { border-left-color: #38bdf8 !important; }
.toast .toast-ico, .toast.success .toast-ico, .toast.info .toast-ico, .toast.warn .toast-ico, .toast.error .toast-ico { color: #38bdf8 !important; }

/* ---------- QUALITÉ DU SIGNAL : barre pro plate ---------- */
#appContainer .signal-meter {
    background: #0c1016 !important; border: 1px solid #232a36 !important; border-radius: 8px !important;
    height: 30px !important; overflow: hidden; box-shadow: none !important;
}
#appContainer .signal-bar {
    background: #2563eb !important; box-shadow: none !important; color: #fff !important;
    font-weight: 600 !important; font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important;
    border-radius: 0 !important; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 0.82em;
    transition: width .5s ease, background .3s;
}
#appContainer .signal-bar::after { display: none !important; }   /* plus de scintillement */
#appContainer .signal-bar.degrading { background: #f59e0b !important; }
#appContainer .signal-bar.critical { background: #ef4444 !important; animation: none !important; }

/* ---------- TEST DE DÉBIT : résultat sobre ---------- */
#appContainer .result-line {
    background: #0c1016 !important; border: 1px solid #232a36 !important; border-radius: 8px !important;
    color: #cbd5e1 !important; font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important;
    font-size: 0.9em !important; padding: 14px !important; text-shadow: none !important;
}
#appContainer .result-line strong, #appContainer .result-line .speed-val { color: #38bdf8 !important; font-family: 'Space Mono', monospace !important; }
/* barres/jauges éventuelles du speedtest */
#appContainer .speed-readout { background: #0c1016 !important; border: 1px solid #232a36 !important; border-radius: 8px !important; }
#appContainer .speed-val { color: #38bdf8 !important; text-shadow: none !important; font-family: 'Space Mono', monospace !important; }
#appContainer .speed-bar, #appContainer .speed-fill { background: #2563eb !important; box-shadow: none !important; }

/* ---------- Croix de fermeture : plus de halo violet ---------- */
.profile-view-close, #appContainer .icon-btn, .detail-modal .icon-btn, .checkout-head .icon-btn {
    outline: none !important; box-shadow: none !important; border: none !important;
}
.profile-view-close:focus, .profile-view-close:focus-visible { outline: none !important; box-shadow: none !important; }
.profile-view-close {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px !important; background: rgba(0,0,0,0.35) !important; color: #cbd5e1 !important;
    transition: background .15s, color .15s;
}
.profile-view-close:hover { background: rgba(0,0,0,0.55) !important; color: #fff !important; }

/* ===================================================================
   AJOUTS v40 — Listes de détails (dashboard) propres style OVH
   =================================================================== */
/* Lignes clé/valeur du dashboard : plates, séparateurs fins, sans violet/vert */
#appContainer .detail-list {
    gap: 0 !important; background: #0f141c; border: 1px solid #232a36; border-radius: 10px; overflow: hidden;
}
#appContainer .detail-row {
    background: transparent !important; border: none !important; border-left: none !important;
    border-bottom: 1px solid #1b212b !important; border-radius: 0 !important;
    padding: 12px 16px !important; font-size: 0.88em !important; align-items: center;
}
#appContainer .detail-row:last-child { border-bottom: none !important; }
#appContainer .detail-row .k { color: #8b95a5 !important; font-weight: 400 !important; }
#appContainer .detail-row .v { color: #e6e9ef !important; font-weight: 500 !important; font-family: 'Space Mono', monospace !important; }
/* Historique qualité : la valeur reste discrète (plus de vert fluo partout) */
#appContainer #qualityHistory .detail-row .v, #appContainer #connDetails .detail-row .v { color: #e6e9ef !important; }

/* Panneaux du dashboard : titres homogènes */
#appContainer .panel-title { color: #f1f5f9 !important; }

/* ===================================================================
   AJOUTS v41 — Assistant IA (chat support) style pro
   =================================================================== */
.ai-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 130px); }
.ai-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #12161d; border: 1px solid #232a36; border-radius: 12px 12px 0 0; }
.ai-header-avatar { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #38bdf8); display: flex; align-items: center; justify-content: center; color: #fff; }
.ai-header-avatar svg { width: 22px; height: 22px; }
.ai-header-title { font-weight: 600; color: #f1f5f9; font-size: 0.98em; }
.ai-header-status { font-size: 0.78em; color: #8b95a5; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }

.ai-messages { flex: 1; overflow-y: auto; padding: 20px; background: #0c1016; border-left: 1px solid #232a36; border-right: 1px solid #232a36; display: flex; flex-direction: column; gap: 14px; }
.ai-msg { display: flex; gap: 10px; max-width: 88%; }
.ai-msg-bot { align-self: flex-start; }
.ai-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.ai-msg-avatar { width: 30px; height: 30px; border-radius: 8px; background: #1a212c; border: 1px solid #232a36; color: #38bdf8; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ai-msg-avatar svg { width: 17px; height: 17px; }
.ai-bubble { padding: 11px 14px; border-radius: 12px; font-size: 0.9em; line-height: 1.5; }
.ai-msg-bot .ai-bubble { background: #161b24; border: 1px solid #232a36; color: #e6e9ef; border-top-left-radius: 4px; }
.ai-msg-user .ai-bubble { background: #2563eb; color: #fff; border-top-right-radius: 4px; }
.ai-typing { display: flex; gap: 4px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: #64748b; animation: aiBlink 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: .2s; } .ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

.ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; background: #0c1016; border-left: 1px solid #232a36; border-right: 1px solid #232a36; }
.ai-chip { background: #1a212c; border: 1px solid #232a36; color: #cbd5e1; font-size: 0.82em; padding: 7px 12px; border-radius: 18px; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.ai-chip:hover { background: #232c39; border-color: #38bdf8; color: #fff; }

.ai-input-bar { display: flex; gap: 10px; padding: 14px 18px; background: #12161d; border: 1px solid #232a36; border-radius: 0 0 12px 12px; }
.ai-input { flex: 1; background: #0c1016; border: 1px solid #232a36; border-radius: 9px; padding: 12px 14px; color: #f1f5f9; font-family: inherit; font-size: 0.92em; }
.ai-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.ai-send { width: 44px; flex: 0 0 auto; background: #2563eb; border: none; border-radius: 9px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.ai-send:hover { background: #1d4ed8; }
.ai-send svg { width: 19px; height: 19px; }
.ai-disclaimer { text-align: center; font-size: 0.74em; color: #64748b; margin-top: 12px; }

/* ===================================================================
   AJOUTS v42 — Passe "entreprise" : sobriété, anti-gamification
   =================================================================== */
/* Bandeau de stats : un seul bloc, colonnes séparées par des filets */
#appContainer .stat-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: #12161d; border: 1px solid #232a36; border-radius: 12px; overflow: hidden; margin-bottom: 20px;
}
#appContainer .stat-strip .stat-card {
    background: transparent !important; border: none !important; border-right: 1px solid #1b212b !important;
    border-radius: 0 !important; box-shadow: none !important; padding: 20px 22px !important;
}
#appContainer .stat-strip .stat-card:last-child { border-right: none !important; }
#appContainer .stat-strip .stat-card:hover { transform: none !important; box-shadow: none !important; background: #161b24 !important; }
@media (max-width: 760px) { #appContainer .stat-strip { grid-template-columns: repeat(2, 1fr); } #appContainer .stat-strip .stat-card:nth-child(2) { border-right: none !important; } }

/* Cartes & panneaux : zéro flottement / glow / animation d'entrée */
#appContainer .panel, #appContainer .stat-card, #appContainer .sub-card {
    box-shadow: none !important; backdrop-filter: none !important;
    transition: border-color .15s, background .15s !important;
}
#appContainer .panel:hover { transform: none !important; }
#appContainer .sub-card:hover { transform: none !important; box-shadow: none !important; border-color: #2c3645 !important; }
#appContainer * { animation-name: none !important; }   /* coupe les bounces/floats résiduels (le fondu d'onglet est géré à part) */
#appContainer .tab.active { animation: tabFadePro .18s ease !important; }

/* Titres de panneaux : style "section d'admin" */
#appContainer .panel-title {
    font-size: 0.82em !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.6px;
    color: #8b95a5 !important; border-bottom: 1px solid #1d242e !important; padding-bottom: 12px !important; margin-bottom: 16px !important;
}
#appContainer .stat-label { text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.74em !important; color: #8b95a5 !important; }
#appContainer .stat-value { font-weight: 700 !important; color: #f1f5f9 !important; }

/* Card-hint discret (plus de loupe emoji) */
#appContainer .card-hint { color: #5b8def !important; font-size: 0.74em; }

/* Score de santé : libellé sobre, sans glow */
#appContainer .health-grade { text-shadow: none !important; letter-spacing: 0.5px; }
#appContainer .health-num { text-shadow: none !important; }

/* Badges RÉEL/SIM : discrets, pas criards */
#appContainer .real-badge, #appContainer .sim-badge { font-size: 0.62em !important; padding: 2px 7px !important; vertical-align: middle; }

/* Scanner : titre de section sobre */
#appContainer .op-radar-title { text-shadow: none !important; letter-spacing: 1.5px; color: #cbd5e1 !important; font-size: 0.95em; }
#appContainer .op-spectrum-label { color: #8b95a5 !important; }

/* Réactivation des animations intentionnelles (après la coupe globale v42) */
#appContainer .ai-typing span { animation: aiBlink 1.2s infinite !important; }
#appContainer .ai-dot { animation: none !important; }
#appContainer .tab.active { animation: tabFadePro .18s ease !important; }
#appContainer .lock-overlay { animation: none !important; }

/* ===================================================================
   AJOUTS v43 — Dashboard homogène : jauge santé sobre
   =================================================================== */
#appContainer .health-arc { filter: none !important; stroke: url(#healthGrad) !important; }
#appContainer .health-track { stroke: #1b212b !important; }
#appContainer .health-num { fill: #f1f5f9 !important; text-shadow: none !important; }
#appContainer .health-unit { fill: #8b95a5 !important; }
#appContainer .health-grade { color: #38bdf8 !important; text-shadow: none !important; font-weight: 700 !important; letter-spacing: 0.5px; }
#appContainer .health-tip { color: #8b95a5 !important; }
#appContainer .health-panel .health-wrap { display: flex; align-items: center; gap: 24px; }
/* Test de débit : bloc bien aligné avec la santé */
#appContainer #speedtestResult { margin-top: 14px; }
#appContainer .health-panel, #appContainer .grid-2 > .panel { min-height: 0; }

/* ===================================================================
   AJOUTS v44 — Fiche brouilleur : encadré sim sobre
   =================================================================== */
#detailModal .sim-warning {
    background: rgba(245,158,11,0.08) !important; border: 1px solid rgba(245,158,11,0.25) !important;
    border-radius: 8px !important; color: #fbbf24 !important; font-size: 0.8em !important; line-height: 1.5 !important;
    padding: 11px 13px !important; margin-bottom: 16px !important; box-shadow: none !important;
}
#detailModal .sim-badge { font-size: 0.6em !important; vertical-align: middle; }

/* ===================================================================
   AJOUTS v45 — Landing page professionnelle (style entreprise)
   =================================================================== */
.landing {
    position: fixed; inset: 0; z-index: 9000; overflow-y: auto;
    background: radial-gradient(ellipse at top, #0e1420 0%, #090c12 60%);
    color: #e6e9ef; font-family: -apple-system,'Segoe UI',Roboto,sans-serif;
}
.lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 6vw; position: sticky; top: 0; background: rgba(9,12,18,0.8); backdrop-filter: blur(10px); border-bottom: 1px solid #1b212b; z-index: 5; }
.lp-brand { display: flex; align-items: center; gap: 9px; font-family: 'Orbitron', sans-serif; font-size: 1.05em; letter-spacing: 1px; color: #f1f5f9; }
.lp-brand strong { color: #38bdf8; }
.lp-nav-links { display: flex; align-items: center; gap: 26px; }
.lp-nav-links a { color: #cbd5e1; text-decoration: none; font-size: 0.9em; transition: color .15s; }
.lp-nav-links a:hover { color: #fff; }
.lp-login-btn { background: #1a212c; border: 1px solid #232a36; color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 0.88em; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.lp-login-btn:hover { background: #232c39; border-color: #38bdf8; }

.lp-hero { text-align: center; padding: 90px 6vw 80px; max-width: 820px; margin: 0 auto; }
.lp-eyebrow { display: inline-block; font-size: 0.8em; letter-spacing: 1px; text-transform: uppercase; color: #60a5fa; background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.25); padding: 6px 14px; border-radius: 20px; margin-bottom: 24px; }
.lp-title { font-size: 3em; line-height: 1.12; font-weight: 800; letter-spacing: -1px; color: #f8fafc; margin: 0 0 20px; }
.lp-sub { font-size: 1.12em; line-height: 1.6; color: #94a3b8; max-width: 640px; margin: 0 auto 34px; }
.lp-cta-row { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lp-cta-primary { background: #2563eb; color: #fff; border: none; padding: 15px 30px; border-radius: 10px; font-size: 1em; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s; }
.lp-cta-primary:hover { background: #1d4ed8; }
.lp-cta-ghost { color: #cbd5e1; text-decoration: none; padding: 15px 22px; border-radius: 10px; border: 1px solid #232a36; font-size: 0.95em; transition: border-color .15s, color .15s; }
.lp-cta-ghost:hover { border-color: #38bdf8; color: #fff; }
.lp-trust { margin-top: 26px; font-size: 0.82em; color: #64748b; }

.lp-section { max-width: 1080px; margin: 0 auto; padding: 70px 6vw; }
.lp-section-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.lp-section-head h2 { font-size: 1.9em; font-weight: 700; color: #f1f5f9; margin: 0 0 12px; letter-spacing: -0.5px; }
.lp-section-head p { color: #94a3b8; line-height: 1.6; margin: 0; }
.lp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.lp-feature { background: #12161d; border: 1px solid #232a36; border-radius: 14px; padding: 26px 24px; transition: border-color .15s; }
.lp-feature:hover { border-color: #2c3645; }
.lp-feature-ico { width: 44px; height: 44px; border-radius: 11px; background: rgba(37,99,235,0.12); color: #60a5fa; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lp-feature-ico svg { width: 22px; height: 22px; }
.lp-feature h3 { font-size: 1.05em; color: #f1f5f9; margin: 0 0 8px; }
.lp-feature p { font-size: 0.9em; color: #94a3b8; line-height: 1.55; margin: 0; }

.lp-pricing { border-top: 1px solid #161b24; }
.lp-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto; }
.lp-price-card { position: relative; background: #12161d; border: 1px solid #232a36; border-radius: 14px; padding: 30px 26px; display: flex; flex-direction: column; }
.lp-price-featured { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.lp-price-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #2563eb; color: #fff; font-size: 0.7em; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.lp-price-name { font-size: 1.05em; font-weight: 700; color: #f1f5f9; }
.lp-price-amount { font-size: 2.2em; font-weight: 800; color: #f8fafc; margin: 12px 0 18px; }
.lp-price-amount span { font-size: 0.4em; font-weight: 500; color: #94a3b8; margin-left: 4px; }
.lp-price-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lp-price-card li { position: relative; padding-left: 24px; font-size: 0.88em; color: #cbd5e1; }
.lp-price-card li::before { content: '✓'; position: absolute; left: 0; color: #38bdf8; font-weight: 700; }
.lp-price-btn { padding: 12px; border-radius: 9px; border: 1px solid #232a36; background: #1a212c; color: #e6e9ef; font-weight: 600; font-size: 0.9em; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.lp-price-btn:hover { background: #232c39; border-color: #38bdf8; }
.lp-price-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.lp-price-btn-primary:hover { background: #1d4ed8; }

.lp-footer { border-top: 1px solid #161b24; padding: 36px 6vw; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; max-width: 1080px; margin: 0 auto; }
.lp-footer-links { display: flex; gap: 22px; }
.lp-footer-links a { color: #94a3b8; text-decoration: none; font-size: 0.88em; }
.lp-footer-links a:hover { color: #fff; }
.lp-copy { color: #64748b; font-size: 0.8em; width: 100%; text-align: center; padding-top: 10px; border-top: 1px solid #11151c; }
@media (max-width: 600px) { .lp-title { font-size: 2.1em; } .lp-nav-links a { display: none; } }

/* ===================================================================
   AJOUTS v46 — Test de débit pro (phases + tuiles)
   =================================================================== */
.st-area { min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.st-idle { text-align: center; }
.st-idle-text { color: #94a3b8; font-size: 0.9em; margin: 0 0 16px; }
.st-running { text-align: center; padding: 8px 0; }
.st-phase { font-size: 0.82em; color: #8b95a5; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.st-live { margin-bottom: 16px; }
.st-live #stLiveVal { font-size: 2.6em; font-weight: 800; color: #f1f5f9; font-family: 'Space Mono', monospace; }
.st-live-unit { font-size: 0.9em; color: #8b95a5; margin-left: 6px; }
.st-progress { height: 6px; background: #0c1016; border-radius: 4px; overflow: hidden; }
.st-progress-bar { height: 100%; width: 0; background: #2563eb; border-radius: 4px; transition: width .3s ease; }
.st-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #0c1016; border: 1px solid #232a36; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.st-tile { padding: 14px 10px; text-align: center; border-right: 1px solid #1b212b; }
.st-tile:last-child { border-right: none; }
.st-tile-label { font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.5px; color: #8b95a5; margin-bottom: 6px; }
.st-tile-val { font-size: 1.5em; font-weight: 700; color: #f1f5f9; font-family: 'Space Mono', monospace; line-height: 1; }
.st-tile-unit { font-size: 0.7em; color: #64748b; margin-top: 4px; }
.st-result { text-align: center; }
@media (max-width: 520px) { .st-tiles { grid-template-columns: repeat(2, 1fr); } .st-tile:nth-child(2) { border-right: none; } }

/* ===================================================================
   AJOUTS v47 — Page Mon compte / Facturation
   =================================================================== */
.acct-wrap { max-width: 1000px; margin: 0 auto; }
.acct-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 760px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-id { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.acct-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; font-weight: 700; font-size: 1.3em; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.acct-avatar.has-photo { color: transparent; }
.acct-name { font-size: 1.1em; font-weight: 700; color: #f1f5f9; }
.acct-role { font-size: 0.82em; color: #8b95a5; }
.acct-plan-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.acct-plan-name { font-size: 1.3em; font-weight: 700; color: #f1f5f9; }
.acct-plan-price { font-size: 0.85em; color: #8b95a5; margin-top: 2px; }
.acct-plan-status { font-size: 0.72em; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: rgba(34,197,94,0.15); color: #4ade80; }
.acct-plan-actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
.acct-plan-actions .btn { width: auto; padding: 10px 18px; }
.acct-empty { color: #8b95a5; font-size: 0.88em; padding: 14px 4px; text-align: center; }
.acct-invoices { display: flex; flex-direction: column; }
.acct-invoice-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.4fr 0.7fr 0.7fr; align-items: center; gap: 8px; padding: 13px 4px; border-bottom: 1px solid #1b212b; font-size: 0.85em; }
.acct-invoice-row:last-child { border-bottom: none; }
.ai-date { color: #cbd5e1; }
.ai-ref { color: #8b95a5; font-family: 'Space Mono', monospace; font-size: 0.92em; }
.ai-plan { color: #cbd5e1; }
.ai-amount { color: #f1f5f9; font-weight: 600; text-align: right; font-family: 'Space Mono', monospace; }
.ai-status { text-align: center; font-size: 0.72em; font-weight: 600; padding: 3px 8px; border-radius: 5px; }
.ai-status.paid { background: rgba(34,197,94,0.15); color: #4ade80; }
@media (max-width: 640px) { .acct-invoice-row { grid-template-columns: 1fr 1fr; } .ai-ref, .ai-plan { display: none; } }

/* ===================================================================
   AJOUTS v48 — Retour login + landing enrichie (stats, témoignages, CTA)
   =================================================================== */
.login-back { position: absolute; top: 16px; left: 16px; background: transparent; border: none; color: #8b95a5; font-size: 0.82em; cursor: pointer; font-family: inherit; padding: 4px; transition: color .15s; }
.login-back:hover { color: #e6e9ef; }
.login-box { position: relative; padding-top: 46px !important; }

/* Bandeau de chiffres clés */
.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 920px; margin: 0 auto; padding: 0 6vw; }
.lp-stat { text-align: center; padding: 36px 14px; border-right: 1px solid #161b24; }
.lp-stat:last-child { border-right: none; }
.lp-stat-num { font-size: 2.2em; font-weight: 800; color: #38bdf8; letter-spacing: -1px; }
.lp-stat-label { font-size: 0.82em; color: #94a3b8; margin-top: 6px; }
@media (max-width: 640px) { .lp-stats { grid-template-columns: repeat(2, 1fr); } .lp-stat:nth-child(2) { border-right: none; } }

/* Témoignages */
.lp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.lp-quote { background: #12161d; border: 1px solid #232a36; border-radius: 14px; padding: 26px 24px; }
.lp-quote p { color: #cbd5e1; line-height: 1.6; font-size: 0.95em; margin: 0 0 20px; }
.lp-quote-author { display: flex; align-items: center; gap: 12px; }
.lp-quote-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lp-quote-author strong { display: block; color: #f1f5f9; font-size: 0.9em; }
.lp-quote-author span { color: #8b95a5; font-size: 0.8em; }

/* CTA final */
.lp-final { text-align: center; padding: 70px 6vw 80px; max-width: 620px; margin: 0 auto; }
.lp-final h2 { font-size: 1.9em; font-weight: 700; color: #f1f5f9; margin: 0 0 12px; }
.lp-final p { color: #94a3b8; margin: 0 0 28px; }

/* ===================================================================
   AJOUTS v49 — Vouchers (admin) + code promo (abonnement)
   =================================================================== */
.vch-wrap { max-width: 920px; margin: 0 auto; }
.vch-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.vch-field { display: flex; flex-direction: column; gap: 6px; }
.vch-field label { font-size: 0.76em; color: #8b95a5; font-weight: 500; }
.vch-field .form-input { min-width: 130px; }
.vch-form .btn { width: auto; padding: 11px 22px; }
.vch-list { display: flex; flex-direction: column; }
.vch-empty { color: #8b95a5; font-size: 0.88em; text-align: center; padding: 16px; }
.vch-item { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr auto; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid #1b212b; }
.vch-item:last-child { border-bottom: none; }
.vch-item.used { opacity: 0.55; }
.vch-code { font-family: 'Space Mono', monospace; color: #f1f5f9; font-size: 0.92em; letter-spacing: 0.5px; }
.vch-meta { color: #8b95a5; font-size: 0.82em; }
.vch-state { font-size: 0.72em; font-weight: 600; text-align: center; padding: 3px 8px; border-radius: 5px; background: rgba(34,197,94,0.15); color: #4ade80; }
.vch-item.used .vch-state { background: rgba(148,163,184,0.15); color: #94a3b8; }
.vch-copy { background: #1a212c; border: 1px solid #232a36; color: #cbd5e1; font-size: 0.78em; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.vch-copy:hover { background: #232c39; border-color: #38bdf8; color: #fff; }

/* Code promo dans l'abonnement */
.sub-voucher { max-width: 480px; margin: 28px auto 0; background: #12161d; border: 1px solid #232a36; border-radius: 12px; padding: 20px 22px; }
.sub-voucher-title { font-size: 0.9em; font-weight: 600; color: #f1f5f9; margin-bottom: 12px; }
.sub-voucher-row { display: flex; gap: 10px; }
.sub-voucher-row .form-input { flex: 1; font-family: 'Space Mono', monospace; }
.sub-voucher-row .btn { width: auto; padding: 11px 20px; }
.sub-voucher-msg { font-size: 0.82em; margin-top: 10px; min-height: 1em; }
.sub-voucher-msg.ok { color: #4ade80; }
.sub-voucher-msg.err { color: #f87171; }
@media (max-width: 540px) { .vch-item { grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   AJOUTS v50 — Easter egg //sys.404 (apparition douce, DA pro)
   =================================================================== */
.nav-egg .nav-svg { opacity: 0.55; }
.nav-egg span { opacity: 0.7; font-family: 'Space Mono', monospace; font-size: 0.92em; letter-spacing: 0.5px; }

.egg-screen {
    min-height: calc(100vh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.egg-code { font-family: 'Space Mono', monospace; font-size: 2.4em; font-weight: 700; color: #2c3645; letter-spacing: 2px; }
.egg-sub { font-size: 0.85em; color: #5b6573; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 26px; }
.egg-btn {
    background: #12161d; border: 1px solid #232a36; color: #8b95a5; padding: 14px 30px; border-radius: 10px;
    font-family: inherit; font-size: 0.95em; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .15s, color .15s;
}
.egg-btn:hover { border-color: #38bdf8; color: #e6e9ef; }
.egg-hint { font-size: 0.78em; color: #3a4250; margin-top: 18px; font-style: italic; }

/* Overlay apparition — fondu doux, sans flash brutal */
.lenovo-reveal {
    position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center;
    background: rgba(6,9,14,0); backdrop-filter: blur(0px); opacity: 0; transition: opacity .5s ease, backdrop-filter .5s ease, background .5s ease;
    padding: 24px;
}
.lenovo-reveal.show { opacity: 1; background: rgba(6,9,14,0.82); backdrop-filter: blur(6px); }
.lenovo-card {
    max-width: 520px; width: 100%; background: #12161d; border: 1px solid #232a36; border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,0.6); transform: scale(0.96) translateY(8px); transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.lenovo-reveal.show .lenovo-card { transform: scale(1) translateY(0); }
.lenovo-img { width: 100%; display: block; max-height: 60vh; object-fit: cover; }
.lenovo-caption { padding: 20px 22px; text-align: center; }
.lenovo-name { font-family: 'Orbitron', sans-serif; font-size: 1.1em; color: #f1f5f9; letter-spacing: 1px; }
.lenovo-text { color: #94a3b8; font-style: italic; margin-top: 6px; font-size: 0.95em; }
.lenovo-close {
    display: block; margin: 0 auto 22px; background: #2563eb; border: none; color: #fff; padding: 11px 26px; border-radius: 9px;
    font-family: inherit; font-size: 0.9em; font-weight: 600; cursor: pointer; transition: background .15s;
}
.lenovo-close:hover { background: #1d4ed8; }

/* ===================================================================
   AJOUTS v51 — Chatbot flottant + page CGU
   =================================================================== */
.fab-chat { position: fixed; bottom: 24px; right: 24px; z-index: 12000; font-family: -apple-system,'Segoe UI',Roboto,sans-serif; }
.fab-btn { width: 56px; height: 56px; border-radius: 50%; border: none; background: #2563eb; color: #fff; cursor: pointer; box-shadow: 0 10px 30px rgba(37,99,235,0.4); display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; position: relative; z-index: 2; margin-left: auto; }
.fab-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.fab-btn svg { width: 24px; height: 24px; position: absolute; transition: opacity .2s, transform .2s; }
.fab-ico-close { opacity: 0; transform: rotate(-90deg); }
.fab-chat.open .fab-ico-open { opacity: 0; transform: rotate(90deg); }
.fab-chat.open .fab-ico-close { opacity: 1; transform: rotate(0); }

.fab-panel { position: absolute; bottom: 70px; right: 0; width: 360px; max-width: calc(100vw - 40px); height: 480px; max-height: calc(100vh - 130px); background: #0f141c; border: 1px solid #232a36; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.fab-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: #12161d; border-bottom: 1px solid #1d242e; }
.fab-head-av { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; display: flex; align-items: center; justify-content: center; }
.fab-head-av svg { width: 20px; height: 20px; }
.fab-head-title { font-weight: 600; color: #f1f5f9; font-size: 0.92em; }
.fab-head-status { font-size: 0.74em; color: #8b95a5; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.fab-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.fab-msg { display: flex; max-width: 90%; }
.fab-msg-bot { align-self: flex-start; }
.fab-msg-user { align-self: flex-end; }
.fab-bubble { padding: 10px 13px; border-radius: 12px; font-size: 0.88em; line-height: 1.5; }
.fab-msg-bot .fab-bubble { background: #161b24; border: 1px solid #232a36; color: #e6e9ef; border-top-left-radius: 4px; }
.fab-msg-user .fab-bubble { background: #2563eb; color: #fff; border-top-right-radius: 4px; }
.fab-suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 4px; }
.fab-chip { background: #1a212c; border: 1px solid #232a36; color: #cbd5e1; font-size: 0.78em; padding: 6px 11px; border-radius: 16px; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.fab-chip:hover { background: #232c39; border-color: #38bdf8; color: #fff; }
.fab-input-bar { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #1d242e; }
.fab-input { flex: 1; background: #0c1016; border: 1px solid #232a36; border-radius: 8px; padding: 10px 12px; color: #f1f5f9; font-family: inherit; font-size: 0.88em; }
.fab-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.fab-send { width: 40px; flex: 0 0 auto; background: #2563eb; border: none; border-radius: 8px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fab-send:hover { background: #1d4ed8; }
.fab-send svg { width: 17px; height: 17px; }
@media (max-width: 480px) { .fab-panel { height: 70vh; } }

/* CGU / pages légales */
.legal-modal { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,9,14,0); backdrop-filter: blur(0); opacity: 0; transition: opacity .3s ease, background .3s ease, backdrop-filter .3s ease; }
.legal-modal.show { opacity: 1; background: rgba(6,9,14,0.8); backdrop-filter: blur(6px); }
.legal-box { background: #0f141c; border: 1px solid #232a36; border-radius: 16px; max-width: 760px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.6); font-family: -apple-system,'Segoe UI',Roboto,sans-serif; }
.legal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #1d242e; }
.legal-brand { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; color: #f1f5f9; font-size: 0.95em; }
.legal-brand strong { color: #38bdf8; }
.legal-close { background: rgba(0,0,0,0.3); border: none; color: #cbd5e1; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.legal-close:hover { background: rgba(0,0,0,0.5); color: #fff; }
.legal-body { overflow-y: auto; padding: 28px 32px 34px; }
.legal-body h1 { font-size: 1.5em; color: #f1f5f9; margin: 0 0 6px; }
.legal-meta { color: #64748b; font-size: 0.82em; margin: 0 0 26px; }
.legal-body h2 { font-size: 1.02em; color: #38bdf8; margin: 26px 0 8px; }
.legal-body p { color: #b8c0cc; line-height: 1.7; font-size: 0.92em; margin: 0 0 10px; }
.legal-body strong { color: #e6e9ef; }
.legal-copy { margin-top: 30px !important; padding-top: 18px; border-top: 1px solid #1d242e; color: #64748b !important; font-size: 0.82em !important; text-align: center; }
.brand-dot { width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px #38bdf8; display: inline-block; }

/* ===================================================================
   AJOUTS v52 — Section Téléchargement + Documentation (landing)
   =================================================================== */
.lp-download { border-top: 1px solid #161b24; }
.lp-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.lp-dl-card { background: #12161d; border: 1px solid #232a36; border-radius: 14px; padding: 26px 22px; text-align: center; transition: border-color .15s, transform .15s; }
.lp-dl-card:hover { border-color: #2c3645; transform: translateY(-2px); }
.lp-dl-web { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.lp-dl-ico { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 12px; background: rgba(37,99,235,0.12); color: #60a5fa; display: flex; align-items: center; justify-content: center; }
.lp-dl-ico svg { width: 24px; height: 24px; }
.lp-dl-name { font-size: 1.05em; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }
.lp-dl-meta { font-size: 0.78em; color: #8b95a5; margin-bottom: 18px; }
.lp-dl-btn { width: 100%; padding: 11px; border-radius: 9px; border: 1px solid #232a36; background: #1a212c; color: #e6e9ef; font-weight: 600; font-size: 0.88em; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.lp-dl-btn:hover { background: #232c39; border-color: #38bdf8; }
.lp-dl-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.lp-dl-btn-primary:hover { background: #1d4ed8; }

.lp-docs { margin-top: 52px; }
.lp-docs-head { text-align: center; margin-bottom: 26px; }
.lp-docs-head h3 { font-size: 1.3em; color: #f1f5f9; margin: 0 0 6px; }
.lp-docs-head p { color: #94a3b8; margin: 0; font-size: 0.92em; }
.lp-docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.lp-doc { display: flex; align-items: center; gap: 14px; background: #12161d; border: 1px solid #232a36; border-radius: 12px; padding: 18px 20px; text-decoration: none; transition: border-color .15s, background .15s; }
.lp-doc:hover { border-color: #38bdf8; background: #161b24; }
.lp-doc-ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; background: rgba(56,189,248,0.1); color: #38bdf8; display: flex; align-items: center; justify-content: center; }
.lp-doc-ico svg { width: 19px; height: 19px; }
.lp-doc-title { color: #f1f5f9; font-weight: 600; font-size: 0.92em; }
.lp-doc-sub { color: #8b95a5; font-size: 0.8em; margin-top: 2px; }
.lp-dl-note { text-align: center; color: #64748b; font-size: 0.8em; margin-top: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* Modale téléchargement */
.dl-box { position: relative; background: #0f141c; border: 1px solid #232a36; border-radius: 16px; max-width: 400px; width: 100%; padding: 34px 30px 30px; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,0.6); font-family: -apple-system,'Segoe UI',Roboto,sans-serif; }
.dl-box-ico { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px; background: rgba(37,99,235,0.12); color: #60a5fa; display: flex; align-items: center; justify-content: center; }
.dl-box-ico svg { width: 28px; height: 28px; }
.dl-box-kind { font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.6px; color: #8b95a5; }
.dl-box-os { font-size: 1.3em; font-weight: 700; color: #f1f5f9; margin: 2px 0 14px; }
.dl-box-text { color: #94a3b8; font-size: 0.88em; line-height: 1.6; margin: 0 0 22px; }
.dl-modal .lp-cta-primary { width: 100%; }

/* ===================================================================
   AJOUTS v53 — Hero mockup + logos confiance + comparatif + cookies
   =================================================================== */
/* Mockup navigateur dans le hero */
.lp-hero-preview { max-width: 880px; margin: 50px auto 0; perspective: 1600px; }
.lp-browser { background: #0f141c; border: 1px solid #232a36; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.55); transform: rotateX(6deg); transform-origin: center top; }
.lp-browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #12161d; border-bottom: 1px solid #1d242e; }
.lp-dot { width: 11px; height: 11px; border-radius: 50%; }
.lp-dot.r { background: #f25f57; } .lp-dot.y { background: #fabd2f; } .lp-dot.g { background: #28c840; }
.lp-browser-url { flex: 1; margin-left: 10px; background: #0c1016; border: 1px solid #232a36; border-radius: 6px; padding: 5px 12px; font-size: 0.74em; color: #8b95a5; font-family: 'Space Mono', monospace; }
.lp-shot { display: grid; grid-template-columns: 150px 1fr; min-height: 280px; text-align: left; }
.lp-shot-side { background: #0c1016; border-right: 1px solid #1b212b; padding: 16px 12px; }
.lp-shot-brand { display: flex; align-items: center; gap: 7px; font-family: 'Orbitron', sans-serif; font-size: 0.72em; color: #f1f5f9; letter-spacing: 1px; margin-bottom: 18px; }
.lp-shot-nav { font-size: 0.76em; color: #8b95a5; padding: 8px 10px; border-radius: 7px; margin-bottom: 3px; }
.lp-shot-nav.active { background: rgba(37,99,235,0.14); color: #cfe0ff; border-left: 2px solid #2563eb; }
.lp-shot-main { padding: 18px; }
.lp-shot-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #12161d; border: 1px solid #232a36; border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.lp-shot-metric { padding: 12px; border-right: 1px solid #1b212b; }
.lp-shot-metric:last-child { border-right: none; }
.lp-shot-metric span { display: block; font-size: 0.6em; text-transform: uppercase; letter-spacing: 0.5px; color: #8b95a5; margin-bottom: 5px; }
.lp-shot-metric b { font-size: 1.05em; color: #f1f5f9; font-family: 'Space Mono', monospace; }
.lp-shot-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; }
.lp-shot-gauge { position: relative; background: #12161d; border: 1px solid #232a36; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 14px; }
.lp-shot-gauge svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.lp-shot-gauge .g-track { fill: none; stroke: #1b212b; stroke-width: 9; }
.lp-shot-gauge .g-arc { fill: none; stroke: #38bdf8; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 301; stroke-dashoffset: 24; }
.lp-shot-gauge-num { position: absolute; font-size: 1.5em; font-weight: 800; color: #f1f5f9; }
.lp-shot-chart { background: #12161d; border: 1px solid #232a36; border-radius: 10px; padding: 14px; display: flex; align-items: center; }
.lp-shot-chart svg { width: 100%; height: 90px; }
.lp-spark { fill: none; stroke: #2563eb; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .lp-shot { grid-template-columns: 1fr; } .lp-shot-side { display: none; } .lp-browser { transform: none; } }

/* Logos confiance */
.lp-logos { max-width: 900px; margin: 0 auto; padding: 30px 6vw 10px; text-align: center; }
.lp-logos-label { font-size: 0.74em; text-transform: uppercase; letter-spacing: 1px; color: #5b6573; margin-bottom: 20px; }
.lp-logos-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; align-items: center; }
.lp-logo { font-family: 'Orbitron', sans-serif; font-size: 1.05em; letter-spacing: 1px; color: #475063; opacity: 0.8; }

/* Tableau comparatif */
.lp-compare { margin-top: 50px; max-width: 820px; margin-left: auto; margin-right: auto; }
.lp-compare-title { text-align: center; font-size: 1.1em; color: #f1f5f9; font-weight: 600; margin-bottom: 18px; }
.lp-compare-table { width: 100%; border-collapse: collapse; background: #12161d; border: 1px solid #232a36; border-radius: 12px; overflow: hidden; }
.lp-compare-table th, .lp-compare-table td { padding: 13px 16px; text-align: center; font-size: 0.86em; border-bottom: 1px solid #1b212b; }
.lp-compare-table th { background: #0f141c; color: #8b95a5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.76em; }
.lp-compare-table th.hl, .lp-compare-table td.hl { background: rgba(37,99,235,0.07); color: #cfe0ff; }
.lp-compare-table td:first-child, .lp-compare-table th:first-child { text-align: left; color: #cbd5e1; }
.lp-compare-table tbody tr:last-child td { border-bottom: none; }
.lp-compare-table td { color: #e6e9ef; }

/* Bandeau cookies */
.cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 12500; background: rgba(15,20,28,0.97); backdrop-filter: blur(10px); border-top: 1px solid #232a36; padding: 16px 24px; display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; }
.cookie-text { color: #b8c0cc; font-size: 0.84em; max-width: 720px; line-height: 1.5; }
.cookie-actions { display: flex; align-items: center; gap: 16px; }
.cookie-btn { background: #2563eb; border: none; color: #fff; padding: 9px 20px; border-radius: 8px; font-size: 0.85em; font-weight: 600; cursor: pointer; font-family: inherit; }
.cookie-btn:hover { background: #1d4ed8; }
.cookie-link { color: #60a5fa; font-size: 0.82em; text-decoration: none; }
.cookie-link:hover { text-decoration: underline; }

/* ===================================================================
   AJOUTS v54 — Bascule tarifs annuelle + bouton thème + THÈME CLAIR
   =================================================================== */
/* Bascule mensuel / annuel */
.lp-billing-toggle { display: inline-flex; margin: 0 auto 30px; background: #12161d; border: 1px solid #232a36; border-radius: 10px; padding: 4px; gap: 4px; }
.lp-pricing { text-align: center; }
.lp-pricing .lp-price-grid { text-align: left; }
.lp-bt-opt { background: transparent; border: none; color: #94a3b8; padding: 9px 20px; border-radius: 7px; font-family: inherit; font-size: 0.88em; cursor: pointer; transition: background .15s, color .15s; }
.lp-bt-opt.active { background: #2563eb; color: #fff; }
.lp-bt-save { font-size: 0.78em; color: #4ade80; font-weight: 700; margin-left: 4px; }
.lp-bt-opt.active .lp-bt-save { color: #bbf7d0; }
.lp-price-num { font-size: 1em; }
.lp-price-per { font-size: 0.4em; font-weight: 500; color: #94a3b8; margin-left: 4px; }
.lp-price-yearnote { font-size: 0.78em; color: #4ade80; margin: -10px 0 16px; min-height: 1em; }

/* Bouton thème */
.lp-theme-toggle { width: 36px; height: 36px; border-radius: 8px; background: #1a212c; border: 1px solid #232a36; color: #cbd5e1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.lp-theme-toggle:hover { border-color: #38bdf8; color: #fff; }
.lp-theme-toggle svg, .theme-toggle-btn svg { width: 18px; height: 18px; }

/* ============ THÈME CLAIR (pro, sobre) ============ */
body[data-theme="light"] { background: #f4f6fa; }
body[data-theme="light"] .landing { background: radial-gradient(ellipse at top, #ffffff 0%, #eef1f6 70%); color: #1e2530; }
body[data-theme="light"] .lp-nav { background: rgba(255,255,255,0.85); border-bottom-color: #e2e7ee; }
body[data-theme="light"] .lp-brand, body[data-theme="light"] .lp-title, body[data-theme="light"] .lp-section-head h2, body[data-theme="light"] .lp-feature h3, body[data-theme="light"] .lp-price-name, body[data-theme="light"] .lp-final h2, body[data-theme="light"] .lp-docs-head h3, body[data-theme="light"] .lp-dl-name { color: #131922; }
body[data-theme="light"] .lp-nav-links a { color: #475063; }
body[data-theme="light"] .lp-nav-links a:hover { color: #0f1620; }
body[data-theme="light"] .lp-sub, body[data-theme="light"] .lp-section-head p, body[data-theme="light"] .lp-feature p, body[data-theme="light"] .lp-final p, body[data-theme="light"] .lp-docs-head p, body[data-theme="light"] .lp-dl-meta { color: #5a6575; }
body[data-theme="light"] .lp-feature, body[data-theme="light"] .lp-price-card, body[data-theme="light"] .lp-quote, body[data-theme="light"] .lp-dl-card, body[data-theme="light"] .lp-doc, body[data-theme="light"] .lp-browser, body[data-theme="light"] .lp-billing-toggle, body[data-theme="light"] .lp-compare-table, body[data-theme="light"] .login-box, body[data-theme="light"] .lp-login-btn, body[data-theme="light"] .lp-theme-toggle, body[data-theme="light"] .lp-cta-ghost { background: #ffffff; border-color: #e2e7ee; }
body[data-theme="light"] .lp-browser-bar, body[data-theme="light"] .lp-shot-side, body[data-theme="light"] .lp-compare-table th { background: #f4f6fa; border-color: #e2e7ee; }
body[data-theme="light"] .lp-shot-main .lp-shot-strip, body[data-theme="light"] .lp-shot-gauge, body[data-theme="light"] .lp-shot-chart, body[data-theme="light"] .lp-shot-metric { background: #fff; border-color: #e7ebf1; }
body[data-theme="light"] .lp-shot-metric b, body[data-theme="light"] .lp-shot-gauge-num, body[data-theme="light"] .lp-shot-brand, body[data-theme="light"] .lp-compare-table td, body[data-theme="light"] .lp-doc-title, body[data-theme="light"] .lp-dl-name { color: #1a2230; }
body[data-theme="light"] .lp-compare-table td:first-child, body[data-theme="light"] .lp-compare-table th:first-child { color: #3a4656; }
body[data-theme="light"] .lp-browser-url, body[data-theme="light"] .lp-shot-nav, body[data-theme="light"] .lp-doc-sub, body[data-theme="light"] .lp-trust, body[data-theme="light"] .lp-copy, body[data-theme="light"] .lp-dl-note, body[data-theme="light"] .lp-logos-label { color: #6b7686; }
body[data-theme="light"] .lp-feature-ico, body[data-theme="light"] .lp-dl-ico, body[data-theme="light"] .lp-doc-ico { background: rgba(37,99,235,0.08); }
body[data-theme="light"] .login-box .form-input, body[data-theme="light"] .login-field-label { color: #1a2230; }
body[data-theme="light"] .login-box .form-input { background: #f4f6fa; border-color: #e2e7ee; }
body[data-theme="light"] .login-heading { color: #131922; }
body[data-theme="light"] .login-screen { background: radial-gradient(ellipse at top, #ffffff, #eef1f6) !important; }
body[data-theme="light"] .lp-footer, body[data-theme="light"] .lp-pricing, body[data-theme="light"] .lp-download { border-color: #e7ebf1; }
body[data-theme="light"] .lp-footer-links a { color: #5a6575; }
body[data-theme="light"] .cookie-bar { background: rgba(255,255,255,0.97); border-top-color: #e2e7ee; }
body[data-theme="light"] .cookie-text { color: #475063; }
body[data-theme="light"] .legal-box, body[data-theme="light"] .dl-box { background: #ffffff; border-color: #e2e7ee; }
body[data-theme="light"] .legal-body h1, body[data-theme="light"] .dl-box-os { color: #131922; }
body[data-theme="light"] .legal-body p, body[data-theme="light"] .dl-box-text { color: #475063; }
body[data-theme="light"] .legal-body strong { color: #1a2230; }
body[data-theme="light"] .legal-head, body[data-theme="light"] .fab-head { border-color: #e7ebf1; }
/* App en clair */
body[data-theme="light"] #appContainer { background: #f4f6fa; color: #1e2530; }
body[data-theme="light"] #appContainer .sidebar, body[data-theme="light"] #appContainer .app-header { background: #ffffff; border-color: #e2e7ee; }
body[data-theme="light"] #appContainer .panel, body[data-theme="light"] #appContainer .stat-strip, body[data-theme="light"] #appContainer .detail-list { background: #ffffff; border-color: #e7ebf1; }
body[data-theme="light"] #appContainer .stat-value, body[data-theme="light"] #appContainer .health-num { color: #131922 !important; fill: #131922 !important; }
body[data-theme="light"] #appContainer .nav-item { color: #475063; }
body[data-theme="light"] #appContainer .detail-row { border-color: #eef1f6 !important; }
body[data-theme="light"] #appContainer .detail-row .v { color: #1a2230 !important; }
body[data-theme="light"] #appContainer .fab-panel, body[data-theme="light"] #appContainer .modal-box { background: #ffffff; }

/* ===================================================================
   AJOUTS v55 — THÈME CLAIR : rattrapage lisibilité (texte sombre)
   =================================================================== */
body[data-theme="light"] {
  --txt: #1e2530; --txt-dim: #5a6575;
}
/* Texte sombre par défaut sur toutes les surfaces claires */
body[data-theme="light"] #appContainer,
body[data-theme="light"] .landing,
body[data-theme="light"] .legal-box,
body[data-theme="light"] .dl-box,
body[data-theme="light"] .login-box,
body[data-theme="light"] .modal-box,
body[data-theme="light"] .fab-panel,
body[data-theme="light"] .detail-modal-box { color: #1e2530; }

/* Titres / valeurs / libellés -> sombre */
body[data-theme="light"] #appContainer h1,
body[data-theme="light"] #appContainer h2,
body[data-theme="light"] #appContainer h3,
body[data-theme="light"] #appContainer h4,
body[data-theme="light"] #appContainer .stat-value,
body[data-theme="light"] #appContainer .stat-sub,
body[data-theme="light"] #appContainer .detail-row .k,
body[data-theme="light"] #appContainer .detail-row .v,
body[data-theme="light"] #appContainer .health-grade,
body[data-theme="light"] #appContainer .health-tip,
body[data-theme="light"] #appContainer .st-tile-val,
body[data-theme="light"] #appContainer .st-tile-label,
body[data-theme="light"] #appContainer .st-tile-unit,
body[data-theme="light"] #appContainer .st-phase,
body[data-theme="light"] #appContainer .st-live #stLiveVal,
body[data-theme="light"] #appContainer .st-idle-text,
body[data-theme="light"] #appContainer .sub-card,
body[data-theme="light"] #appContainer .sub-card *,
body[data-theme="light"] #appContainer .sub-price,
body[data-theme="light"] #appContainer .sub-plan-name,
body[data-theme="light"] #appContainer .acct-name,
body[data-theme="light"] #appContainer .acct-plan-name,
body[data-theme="light"] #appContainer .acct-plan-price,
body[data-theme="light"] #appContainer .ai-amount,
body[data-theme="light"] #appContainer .ai-date,
body[data-theme="light"] #appContainer .ai-plan,
body[data-theme="light"] #appContainer .vch-code,
body[data-theme="light"] #appContainer .vch-meta,
body[data-theme="light"] #appContainer .sub-voucher-title,
body[data-theme="light"] #appContainer .profile-view-name,
body[data-theme="light"] #appContainer .pv-row span:last-child,
body[data-theme="light"] #appContainer .ai-msg-bot .ai-bubble,
body[data-theme="light"] #appContainer .fab-msg-bot .fab-bubble,
body[data-theme="light"] #appContainer .op-log,
body[data-theme="light"] #appContainer .console-line,
body[data-theme="light"] #appContainer .log-line,
body[data-theme="light"] #appContainer .form-input,
body[data-theme="light"] #appContainer select,
body[data-theme="light"] #appContainer label,
body[data-theme="light"] #appContainer p,
body[data-theme="light"] #appContainer li,
body[data-theme="light"] #appContainer td,
body[data-theme="light"] #appContainer .ai-header-title,
body[data-theme="light"] #appContainer .fab-head-title { color: #1a2230 !important; }

/* Champs en clair */
body[data-theme="light"] #appContainer .form-input,
body[data-theme="light"] #appContainer select,
body[data-theme="light"] #appContainer .ai-input,
body[data-theme="light"] #appContainer .fab-input,
body[data-theme="light"] .login-box .form-input,
body[data-theme="light"] .legal-box .form-input {
  background: #f4f6fa !important; border-color: #dfe4ec !important;
}
body[data-theme="light"] #appContainer .ai-msg-bot .ai-bubble,
body[data-theme="light"] #appContainer .fab-msg-bot .fab-bubble,
body[data-theme="light"] #appContainer .ai-chip,
body[data-theme="light"] #appContainer .fab-chip { background: #f1f4f9 !important; border-color: #e2e7ee !important; }

/* Surfaces internes claires */
body[data-theme="light"] #appContainer .stat-strip,
body[data-theme="light"] #appContainer .detail-list,
body[data-theme="light"] #appContainer .st-tiles,
body[data-theme="light"] #appContainer .st-progress,
body[data-theme="light"] #appContainer .acct-invoices,
body[data-theme="light"] #appContainer .vch-list,
body[data-theme="light"] #appContainer .sub-voucher,
body[data-theme="light"] #appContainer .ai-messages,
body[data-theme="light"] #appContainer .fab-messages,
body[data-theme="light"] #appContainer .ai-suggestions { background: #ffffff !important; }
body[data-theme="light"] #appContainer .st-tile, body[data-theme="light"] #appContainer .detail-row { border-color: #eef1f6 !important; }

/* On REIMPOSE le blanc sur fonds bleus/colorés (boutons, badges, bulles) */
body[data-theme="light"] .btn,
body[data-theme="light"] .login-btn,
body[data-theme="light"] .lp-cta-primary,
body[data-theme="light"] .lp-price-btn-primary,
body[data-theme="light"] .lp-dl-btn-primary,
body[data-theme="light"] .lp-login-btn,
body[data-theme="light"] .cookie-btn,
body[data-theme="light"] .pv-btn-primary,
body[data-theme="light"] .fab-send,
body[data-theme="light"] .lp-bt-opt.active,
body[data-theme="light"] .lp-price-badge,
body[data-theme="light"] .acct-avatar,
body[data-theme="light"] .profile-view-avatar,
body[data-theme="light"] .lp-quote-avatar,
body[data-theme="light"] .ai-header-av,
body[data-theme="light"] .fab-head-av,
body[data-theme="light"] .fab-btn,
body[data-theme="light"] #appContainer .ai-msg-user .ai-bubble,
body[data-theme="light"] #appContainer .fab-msg-user .fab-bubble,
body[data-theme="light"] .legal-close,
body[data-theme="light"] .dl-box .lp-cta-primary { color: #ffffff !important; }
body[data-theme="light"] .lp-login-btn, body[data-theme="light"] .lp-theme-toggle { color: #1a2230 !important; }

/* En-tête appli clair */
body[data-theme="light"] #appContainer .app-header, body[data-theme="light"] #appContainer .sidebar { background:#fff !important; }
body[data-theme="light"] #appContainer .session-user, body[data-theme="light"] #appContainer .page-title { color:#1a2230 !important; }

/* ===================================================================
   AJOUTS v56 — Bascule mensuel/annuel dans l'abonnement (in-app)
   =================================================================== */
.sub-billing-toggle { display: inline-flex; margin: 16px auto 0; background: #0c1016; border: 1px solid #232a36; border-radius: 10px; padding: 4px; gap: 4px; }
.sub-bt-opt { background: transparent; border: none; color: #94a3b8; padding: 8px 18px; border-radius: 7px; font-family: inherit; font-size: 0.85em; cursor: pointer; transition: background .15s, color .15s; }
.sub-bt-opt.active { background: #2563eb; color: #fff; }
.sub-bt-save { font-size: 0.78em; color: #4ade80; font-weight: 700; margin-left: 4px; }
.sub-bt-opt.active .sub-bt-save { color: #bbf7d0; }
body[data-theme="light"] .sub-billing-toggle { background: #f4f6fa; border-color: #e2e7ee; }
body[data-theme="light"] .sub-bt-opt:not(.active) { color: #5a6575; }

/* ===================================================================
   AJOUTS v57 — Mode application (Tauri) : login + dashboard uniquement
   =================================================================== */
body.app-mode .login-back { display: none !important; }   /* pas de landing en mode app */
body.app-mode .fab-chat { display: none !important; }      /* la bulle support reste côté site web */
body.app-mode #landingScreen { display: none !important; }
body.app-mode #bootScreen, body.app-mode #introScreen, body.app-mode #introCanvas { display: none !important; }