#visionneuse-document {

    transition: transform .5s ease-in-out, left .5s ease-in-out;

    position: fixed;
    top: 0;

    >nav {
        width: calc(100% - 2rem);
        position: absolute;
        bottom: 1rem;
        display: flex;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        color: white;
        font-family: monospace;

        &:has([data-pages="false"]) {
            display: none !important;
        }
    }

    .buttons {
        background-color: rgba(0, 0, 0);
        width: calc(100% - 2rem);
        position: absolute;
        top: 1rem;
        display: flex;
        gap: 1rem;

        .titre {
            color: white;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            /* flex: 1 seul ne suffit pas, min-width auto empêcherait le
               rétrécissement et le titre pousserait les boutons hors écran. */
            min-width: 0;

            >span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .buttons,
    nav {
        button {
            /* Les glyphes Font Awesome sont plus denses que les caractères
               unicode utilisés auparavant : taille réduite pour un rendu égal. */
            font-size: 1.4rem;
            background: none;
            border: none;
            width: 32px;
            height: 32px;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            color: white;
        }
    }

    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Sous l'omnisearch (z-index 20000, cf. nav.inc.php), au-dessus du reste. */
    z-index: 19000;

    width: 100vw;

    @media (min-width: 1000px) {
        width: 50vw;
    }

    padding: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;

    figure {
        width: 100%;
        height: 100%;
        position: relative;
        /* Le zoom agrandit l'image à l'intérieur du cadre qui lui est alloué :
           rien ne déborde, le layout de la visionneuse ne bouge pas. */
        overflow: hidden;
    }

    /* Indicateur de chargement, en superposition : pages demandées au serveur,
       ou image pas encore chargée. */
    .chargement {
        display: none;
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, .35);

        >.fa {
            color: white;
            font-size: 3rem;
        }
    }

    &[data-chargement] .chargement {
        display: flex;
    }

    img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        cursor: zoom-in;
        transition: transform .2s ease-out;

        &[data-zoom] {
            cursor: zoom-out;
        }
    }

    &:not([data-visible]) {
        transform: translateX(-100vw);

        .buttons {
            display: none;
        }
    }

    @media (max-width: 1000px) {

        [data-action="to-left"],
        [data-action="to-right"] {
            display: none;
        }
    }
}

@media (min-width: 1000px) {


    body:not([data-visionneuse-fullscreen]):not([data-visionneuse-position="right"]) {
        #visionneuse-document {
            left: 0;

            [data-action="to-left"] {
                display: none;
            }

            .buttons {
                right: 1rem;
            }
        }
    }

    body:not([data-visionneuse-fullscreen])[data-visionneuse-position="right"] {
        #visionneuse-document {
            left: 50vw;

            /* Ouverture à droite : la fenêtre entre par la droite. */
            &:not([data-visible]) {
                transform: translateX(100vw);
            }

            [data-action="to-right"] {
                display: none;
            }

            .buttons {
                left: 1rem;
            }
        }
    }


    body:not([data-visionneuse-fullscreen]) {
        [data-action="exit-fullscreen"] {
            display: none;
        }
    }

    body[data-visionneuse-fullscreen] {
        #visionneuse-document {
            width: 100vw;

            [data-action="fullscreen"] {
                display: none;
            }

            [data-action="to-right"] {
                display: none;
            }

            [data-action="to-left"] {
                display: none;
            }

            .buttons {
                left: 1rem;
            }
        }
    }
}

/* Ligne dont le document est ouvert dans la visionneuse : repère générique,
   posé par js/visionneuse.js sur la ligne (ou l'élément) parente du lien.
   Les notes de frais gardent leur propre style (ndf.css). */
tr[data-clicked]:not(.ligne-depense) > td {
    background-color: #fff8e1 !important;
}

/* Message affiché quand l'aperçu est impossible (conversion en échec, droits). */
#visionneuse-document figure .message {
    color: white;
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
}