/* ==========================================
   DOC MODAL MOBILE — doc-modal-mobile.css
   Modal description document E-KOULIBA
   Auteur : Axelle — Projet E-KOULIBA
   ========================================== */

/* ==========================================
   ANIMATIONS MODAL
   ========================================== */

@keyframes slideUpModal {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}


@media (max-width: 768px) {

    /* Overlay — fond flouté animé */
    .doc-overlay {
        padding: 70px 14px 14px;
        align-items: flex-end;
        animation: fadeInModal 0.25s ease both;
    }

    /* Panel — bottom sheet qui monte depuis le bas */
    .doc-panel {
        padding: 24px 20px;
        gap: 14px;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        width: 100%;
        margin-bottom: 100px; /* ← monte le panel */
        animation: slideUpModal 0.35s ease both;
    }

    /* ==========================================
       EN-TÊTE — label + bouton X
       ========================================== */

    .doc-panel__header {
        margin-bottom: 4px;
        animation: fadeInModal 0.4s ease 0.1s both;
    }

    /* Trait label réduit */
    .doc-panel__label .label-line {
        width: 16px;
        height: 1.5px;
    }

    /* Texte label réduit */
    .doc-panel__label .label-text {
        font-size: 0.65rem;
    }

    /* Bouton fermer X — rotation au clic */
    .doc-panel__close {
        width: 28px;
        height: 28px;
        transition: transform 0.3s ease, opacity 0.2s ease;
    }

    .doc-panel__close:active {
        transform: rotate(90deg) scale(0.9);
    }

    .doc-panel__close svg {
        width: 13px;
        height: 13px;
    }

    /* ==========================================
       TITRE DOCUMENT
       ========================================== */

    .doc-panel__title {
        font-size: 1rem;
        line-height: 1.3;
        animation: fadeInModal 0.4s ease 0.15s both;
    }

    /* ==========================================
       MÉTA — format + taille + catégorie
       ========================================== */

    /* Colonne sur mobile */
    .doc-panel__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.75rem;
        animation: fadeInModal 0.4s ease 0.2s both;
    }

    .doc-panel__meta-item {
        gap: 6px;
    }

    /* Badge PDF */
    .doc-panel__format-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
        animation: popIn 0.3s ease 0.25s both;
    }

    /* ==========================================
       ONGLET DESCRIPTION
       ========================================== */

    .doc-panel__tab {
        animation: fadeInModal 0.4s ease 0.25s both;
    }

    .doc-panel__tab-item {
        font-size: 0.82rem;
    }

    /* ==========================================
       TEXTE DESCRIPTION
       ========================================== */

    .doc-panel__desc {
        font-size: 0.80rem;
        line-height: 1.65;
        text-align: left;
        animation: fadeInModal 0.4s ease 0.3s both;
    }

    /* ==========================================
       BOUTON TÉLÉCHARGER — pleine largeur
       ========================================== */

    .doc-panel__dl-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.85rem;
        text-align: center;
        animation: popIn 0.4s ease 0.35s both;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Légère pression au tap */
    .doc-panel__dl-btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    /* ==========================================
       SUPPRESSION HOVER — mobile tactile
       ========================================== */

    @media (hover: none) {
        .doc-panel__close:hover  { transform: none; opacity: 1; }
        .doc-panel__dl-btn:hover { transform: none; box-shadow: none; }
    }

} /* fin @media 768px */