/* ================================================================
   Sourdosphère — mobile.css  (max-width: 768px)
   ================================================================ */

@media (max-width: 768px) {

    /* ── Nav ────────────────────────────────────────────────────── */
    .desktop-only { display: none !important; }
    .mobile-only  { display: flex !important; }
    .mobile-nav   { display: flex; }

    /* ── Topbar ─────────────────────────────────────────────────── */
    .topbar { padding: 0 0.85rem; }

    /* ── Main content ───────────────────────────────────────────── */
    .main-content { padding: 1rem 0.75rem; }

    /* ── Auth ───────────────────────────────────────────────────── */
    .auth-wrapper { padding: 1rem 0.75rem; }
    .auth-card    { padding: 1.5rem 1.25rem; border-radius: var(--radius-lg); }

    .form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* ── Flash ──────────────────────────────────────────────────── */
    .flash {
        top: calc(var(--topbar-h) + 0.5rem);
        width: calc(100% - 2rem);
        left: 1rem;
        transform: none;
    }
}

@media (max-width: 480px) {
    :root { --topbar-h: 54px; }

    .logo-text   { font-size: 1.1rem; }
    .btn--sm     { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
    .auth-card   { padding: 1.25rem 1rem; }
}