/*
 * Lecteur long mobile : le pied d'interaction est fixe et recouvre le flux.
 * Un espace terminal mesuré est donc créé APRES les commentaires, dans le
 * conteneur qui défile réellement. Le correctif ne repose plus sur la seule
 * hauteur du texte de l'article.
 */
@media (max-width: 820px) {
    .is-mode-long.post-display-overlay {
        --post-display-mobile-footer-height: 190px;
        --post-display-mobile-tail-space: 210px;
    }

    .is-mode-long .post-display-content {
        padding-bottom: 0 !important;
        scroll-padding-bottom: calc(
            var(--post-display-mobile-tail-space, 210px)
            + env(safe-area-inset-bottom)
        );
    }

    .is-mode-long .post-display-reader {
        padding-bottom: 0 !important;
    }

    /*
     * La mise en page mobile est une colonne flex : ce pseudo-élément se place
     * après .post-display-interactions et garantit que le dernier commentaire,
     * ses actions et « Tous les commentaires sont chargés » peuvent remonter
     * entièrement au-dessus du pied fixe.
     */
    .is-mode-long .post-display-layout::after {
        content: "";
        display: block;
        order: 4;
        width: 100%;
        height: var(--post-display-mobile-tail-space, 210px);
        flex: 0 0 var(--post-display-mobile-tail-space, 210px);
        pointer-events: none;
    }

    .is-mode-long .post-display-interactions,
    .is-mode-long .post-display-interactions .blog-modal-comments {
        scroll-margin-bottom: var(--post-display-mobile-tail-space, 210px);
    }

    .is-mode-long .post-display-comments-fab {
        bottom: calc(
            var(--post-display-mobile-footer-height, 190px)
            + 20px
            + env(safe-area-inset-bottom)
        );
    }
}