/* ==================== TOPBAR ==================== */ .topbar { position: sticky; top: 0; z-index: 100; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 32px; background: var(--bg-glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border-subtle); } .topbar__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .topbar__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; } .topbar__nav { display: flex; align-items: center; gap: 6px; background: var(--bg-surface); padding: 6px; border-radius: var(--radius-full); border: 1px solid var(--border-subtle); } .topbar__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* ==================== ZONE DE CONTENU ==================== */ .app-root { max-width: var(--content-max-width); margin: 0 auto; padding: 32px 24px calc(var(--bottom-nav-height) + 40px); min-height: calc(100dvh - var(--topbar-height)); } /* ==================== BOTTOM NAV (mobile) ==================== */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: none; align-items: center; justify-content: space-around; height: var(--bottom-nav-height); padding-bottom: env(safe-area-inset-bottom, 0); background: var(--bg-glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-top: 1px solid var(--border-subtle); } .bottom-nav__item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; padding: 8px 4px; color: var(--text-tertiary); transition: color var(--transition-fast), transform var(--transition-fast); } .bottom-nav__icon { font-size: 1.3rem; transition: transform var(--transition-fast); } .bottom-nav__label { font-size: 0.68rem; font-weight: 600; } .bottom-nav__item[aria-current="page"] { color: var(--accent-secondary); } .bottom-nav__item[aria-current="page"] .bottom-nav__icon { transform: translateY(-2px) scale(1.1); } .bottom-nav__item:active { transform: scale(0.92); } /* ==================== MODE AUTHENTIFICATION ==================== */ /* Tant que porte cette classe (aucune session active), la topbar et la bottom-nav sont masquées et #app-root affiche uniquement l'écran de connexion / inscription, centré. */ body.is-auth .topbar, body.is-auth .bottom-nav { display: none; } body.is-auth .app-root { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }