/* ============================================
   BOOK-DETAIL-MOBILE.CSS
   Responsive pour le composant book-detail
   Design Iktisar - mobile-first puis tablette
   ============================================ */

/* ===== MOBILE <= 768px ===== */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    /* Conteneur principal */
    .book-detail {
        padding: 0;
        margin: 0;
        min-height: auto;
        background: transparent;
    }

    /* Layout -> colonne centree */
    .book-detail-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: auto;
        padding-bottom: 0;
    }

    /* Left + Right transparents : leurs enfants participent directement au flex de .book-detail-top */
    .book-detail-left,
    .book-detail-right {
        display: contents;
    }

    /* Titre (order 1) — au-dessus de la couverture */
    .book-detail-right .title {
        order: 1;
        font-size: 1.25rem;
        line-height: 1.35;
        text-align: center;
        padding: 16px 20px 4px;
        margin: 0;
    }

    /* Auteur (order 2) */
    .author-container {
        order: 2;
        justify-content: center;
        padding: 0 20px 14px;
        margin: 0;
    }

    /* Couverture (order 3) */
    .book-cover {
        order: 3;
        width: 220px;
        height: auto;
        /* 2:3, pas le format papier A4 (210×297) — ratio réel des couvertures
           recadrées côté serveur (COVER_LARGE, voir lib/imgTransform.js). */
        aspect-ratio: 2 / 3;
        border-radius: var(--cover-radius, 4px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
        align-self: center;
    }

    /* Actions fav/share/download (order 4) — identiques au desktop, sans labels */
    .book-detail-left .actions {
        order: 4;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .book-detail-left .icon-group {
        display: flex;
        gap: 32px;
        align-items: center;
        justify-content: center;
        padding: 12px 0 16px;
    }

    /* Pas de tooltips sur mobile */
    .icon-tooltip {
        display: none !important;
    }

    /* Cacher les titres de section dans les onglets sur mobile */
    .book-detail-main .info-heading,
    .bd-tab-panel .info-heading {
        display: none;
    }

    /* ---- Barre d'onglets mobiles ---- */
    .bd-mobile-tabs {
        order: 5;
        display: flex;
        width: 100%;
        border-bottom: 1px solid var(--border-color);
        gap: 0;
        margin-top: 0;
    }

    .bd-tab-btn {
        flex: 1;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 10px 4px 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        margin-bottom: -1px;
        transition: color 0.2s, border-color 0.2s;
    }

    .bd-tab-btn.active {
        color: var(--text-primary);
        border-bottom-color: var(--accent);
    }

    /* ---- Panneaux d'onglets ---- */

    /* Dans book-detail-main -> remettre en bloc (pas display:contents) */
    .book-detail-main {
        order: 7;
        display: block;
        grid-template-columns: unset;
        width: 100%;
    }

    .book-detail-main .bd-tab-panel {
        display: none;
        width: 100%;
        padding-top: 16px;
    }

    .book-detail-main .bd-tab-panel.active {
        display: block;
    }

    /* Panneau Contenu (hors book-detail-main) */
    .bd-tab-panel[data-panel="contenu"] {
        order: 6;
        display: none;
        width: 100%;
        padding: 16px 0 0;
    }

    .bd-tab-panel[data-panel="contenu"].active {
        display: block;
    }

    /* ---- Grille de boutons : lire + pdf/mindmap ---- */
    .buttons-grid-new {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    /* min-width fixe des boutons (160px desktop) empêche les cellules grid de
       se réduire sur mobile → contenu qui déborde (visible dans la popup auteur).
       On retire cette contrainte : la cellule 1fr s'occupe du sizing. */
    .buttons-grid-new .btn-card {
        min-width: 0;
        overflow: hidden;
    }

    /* Texte du bouton : ellipsis géré dans book-detail.css (global).
       Réduction de taille sur mobile uniquement. */
    .buttons-grid-new .btn-card span {
        font-size: 12px;
    }

    /* Bouton "Lire en ligne" -> pleine largeur, style primaire */
    .btn-card.btn-read {
        grid-column: 1 / -1;
        background: var(--accent);
        border-color: var(--accent);
        justify-content: center;
        padding: 14px;
        border-radius: 12px;
    }

    .btn-card.btn-read span {
        color: #fff;
        font-size: 15px;
        font-weight: 600;
    }

    .btn-card.btn-read .icon-circle {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

    .btn-card.btn-view-pdf {
        display: none !important; /* PDF non disponible sur mobile */
    }

    .btn-card.btn-xmind,
    .btn-card.bd-yt-mobile,
    .btn-card.btn-quiz {
        justify-content: center;
    }

    /* Liens YouTube dans la grille : visibles sur mobile */
    .book-detail .bd-yt-mobile {
        display: flex;
    }

    /* Touch feedback */
    .btn-card:hover {
        transform: none;
    }

    .btn-card:active {
        transform: scale(0.97);
    }

    /* Masquer le container youtube desktop (detail-col) sur mobile */
    .detail-col .youtube-links-container {
        display: none !important;
    }

    /* ---- Flèches de navigation : position unifiée sur tous les contextes (accueil, bibliothèque, auteur, profil) ---- */
    #prevBtnDetail,
    #nextBtnDetail {
        display: flex;
        position: absolute;
        top: 27%;               /* % relatif au container — s'adapte à toutes les hauteurs */
        margin-top: 0;          /* annule le margin-top: 112px de .arrow dans accueil */
        transform: translateY(-50%);
        z-index: 20;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.18);
        font-size: 13px;
    }
    #prevBtnDetail { left: 2px; }
    #nextBtnDetail { right: 2px; }

    /* Back button (icon only) */
    .book-detail .back-button {
        align-self: flex-start;
        padding: 8px;
        margin-bottom: 8px;
    }
}

/* ===== PETITS MOBILES <= 480px ===== */
@media (max-width: 480px) {

    .book-cover {
        width: 150px;
    }

    .book-detail-right .title {
        font-size: 1.1rem;
    }

    .book-detail-right .icon-group {
        gap: 24px;
    }
}

/* ===== TABLETTE 769-1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    .book-detail {
        padding: 32px 24px;
    }

    .book-detail-top {
        gap: 36px;
    }

    .book-cover {
        width: 200px;
        height: auto;
    }

    .book-detail-right .title {
        font-size: 1.6rem;
    }

    .buttons-grid-new {
        gap: 8px;
    }

    .btn-card {
        min-width: 140px;
    }
}

/* ===== THÈMES — Flèches nav mobile ===== */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    body.theme-beige #prevBtnDetail,
    body.theme-beige #nextBtnDetail {
        background: rgba(235, 216, 180, 0.94);
        border-color: rgba(196, 165, 114, 0.4);
    }

    body.theme-noir #prevBtnDetail,
    body.theme-noir #nextBtnDetail {
        background: rgba(34, 50, 53, 0.94);
        color: var(--text-primary);
        border-color: rgba(255, 255, 255, 0.12);
    }
}