/* ─── Responsiveness (Global) ───────────────────────────── */

/* Tablets & Small Desktops */
@media (max-width: 1024px) {
    .music-player-layout {
        grid-template-columns: 1fr 300px;
    }

    .reader-content {
        max-width: calc(var(--book-content-max, var(--book-max-width)) + 80px);
    }
}

/* Tablets & Mobiles (768px) */
@media (max-width: 768px) {
    .app-header {
        padding: 0 1rem;
    }

    .library-container {
        padding: 1.5rem 1rem 3rem;
    }

    .resume-banner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .resume-btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    .library-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1.25rem;
    }

    .music-player-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .music-controls-side {
        border-left: none;
        border-top: 1px solid var(--app-card-border);
        padding: 1.5rem;
        max-height: 400px;
    }

    .reader-container {
        padding: 0 1.25rem 3rem;
    }

    .reader-content {
        padding: 0 0 3rem;
    }

    .book-home {
        padding: 1.25rem 1rem 2rem;
    }

    .book-home-content {
        grid-template-columns: 1fr;
    }

    .chapter-main-title {
        font-size: 2.2rem;
    }

    .sidebar {
        width: 280px;
        left: -280px;
    }
}

/* Small Mobiles (480px) */
@media (max-width: 480px) {
    .chapter-main-title {
        font-size: 1.8rem;
    }

    .reader-toolbar {
        padding: 0.5rem 1rem;
    }

    .chapter-nav {
        padding: 0.5rem 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .nav-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-height: 600px) {
    .current-track-cover-container {
        width: 120px;
        height: 120px;
    }
}

/* ─── Header Responsive (Mobile Portrait) ───────────────────── */

/* ≤ 640px : compresser les espaces du header */
@media (max-width: 640px) {
    .app-header {
        padding: 0 0.75rem;
    }

    .header-actions {
        gap: 0.2rem;
    }

    .music-mini-bar {
        padding: 0.3rem 0.5rem;
        gap: 0.35rem;
        margin-right: 0.2rem;
    }

    .mini-title {
        max-width: 70px;
    }
}

/* ≤ 480px (portrait smartphone) : masquer les éléments non critiques */
@media (max-width: 480px) {
    .music-mini-bar {
        display: none;
    }

    .btn-theme-toggle {
        display: none;
    }

    .header-actions {
        gap: 0.15rem;
    }
}

/* ≤ 360px : cacher le label texte du bouton Nouveau, rester icône seule */
@media (max-width: 360px) {
    .btn-new-label {
        display: none;
    }
}