/* ============================================
 * Layout générique (commun desktop / mobile)
 * ============================================ */

.app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.boot-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .4s ease;
}
.boot-screen.fade-out { opacity: 0; pointer-events: none; }
.boot-logo { width: 120px; height: 120px; }
.boot-title {
  margin-top: 20px;
  color: var(--text-strong);
  font-size: 14px;
  letter-spacing: 0.1em;
  border-right: 2px solid var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typewriter 1.2s steps(20, end) forwards, blinkCursor 0.7s step-end infinite;
}
@keyframes typewriter { from { width: 0; } to { width: 100%; } }
@keyframes blinkCursor { 50% { border-color: transparent; } }

main.view {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.view-header h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.view-content {
  padding: 20px;
  flex: 1;
}

/* Sidebar (desktop) */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sidebar-logo {
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-logo .logo-svg { width: 28px; height: 28px; }
.sidebar-logo .logo-text {
  font-size: 18px; letter-spacing: 0.15em; font-weight: 700; color: var(--text-strong);
}
.sidebar-nav { flex: 1; padding: 10px 0; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all 150ms;
}
.sidebar-nav a:hover { color: var(--text); background: var(--bg-3); }
.sidebar-nav a.active {
  color: var(--text-strong);
  border-left-color: var(--accent);
  background: var(--bg-3);
}
.sidebar-nav .nav-section {
  padding: 12px 16px 4px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: 10px;
}

/* Top header (mobile) */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-header .logo-svg { width: 28px; height: 28px; }

/* Bottom nav (mobile) */
.bottom-bar {
  display: flex;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bottom-bar a.active { color: var(--text-strong); }
.bottom-bar a svg { width: 22px; height: 22px; }

/* Conteneurs principaux */
.app-shell { display: flex; flex: 1; min-height: 0; }
.app-shell main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }