* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-ui); background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.2s, color 0.2s; }

/* top décalé sous le bandeau réseau (fixed, ignore le padding du body) — même
   patron que .hdr ci-dessous : sinon le bandeau flotte par-dessus l'écran de
   login au lieu de le pousser. */
#loginScreen { position: fixed; inset: 0; top: var(--bp-ban-h, 0px); background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.login-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 20% 50%, #0EA5E914 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, #0EA5E90a 0%, transparent 60%); }
.login-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.1; }
.login-box { position: relative; width: 420px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; box-shadow: 0 8px 40px rgba(14,165,233,0.14); }
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo svg { width: 64px; height: 64px; margin-bottom: 12px; }
.login-logo h1 { font-family: var(--font-brand); font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.login-logo p { color: var(--muted); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.login-field input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; color: var(--text); font-size: 0.9rem; transition: border-color 0.2s; }
.login-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.login-btn { width: 100%; padding: 13px; background: var(--blue); color: white; border: none; border-radius: var(--radius-md); font-family: var(--font-brand); font-size: 1rem; font-weight: 700; letter-spacing: 2px; cursor: pointer; margin-top: 8px; transition: all 0.2s; }
.login-btn:hover { background: var(--blue-dim); box-shadow: 0 0 20px var(--blue-glow); }
.login-error { color: var(--red); font-size: 0.82rem; text-align: center; margin-top: 12px; display: none; }

#app { display: none; flex-direction: column; min-height: 100vh; }
.hdr { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(16,37,58,0.06); }
.hdr-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.hdr-logo { display: flex; align-items: center; gap: 10px; }
.hdr-logo svg { width: 32px; height: 32px; }
.hdr-logo span { font-family: var(--font-brand); font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: 3px; }
.nav-tabs { display: flex; gap: 4px; margin-left: 24px; flex: 1; align-items: center; }
.nav-tab { padding: 6px 16px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
.nav-tab:hover { color: var(--text); background: var(--bg3); }
.nav-tab.active { color: var(--blue-dim); background: var(--bg3); border-color: var(--border); }
.nav-tab.nav-more { margin-left: auto; position: relative; }
.nav-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(16,37,58,0.14); z-index: 200; padding: 4px; }
.nav-dropdown.open { display: block; }
.nav-dropdown-item { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text); font-size: 0.85rem; cursor: pointer; transition: background 0.15s; }
.nav-dropdown-item:hover { background: var(--bg3); color: var(--blue-dim); }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.user-badge { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.user-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.theme-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-size: 0.9rem; transition: all 0.15s; }
.theme-btn:hover { border-color: var(--blue); }
.logout-btn { padding: 6px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
.logout-btn:hover { border-color: var(--red); color: var(--red); }