/* ==========================================================
   V1.1.6 — VUE EN PERSPECTIVE JUSTE SOUS LA BARRE
========================================================== */

:root {
    --lpe-toolbar-height: 56px;
    --lpe-preview-width: 410px;
}

/*
 * On fixe le panneau à la fenêtre afin qu'il ne dépende plus
 * du padding ou du positionnement interne de #lumise-main.
 */
body.lpe-ready #lorrpack-preview-engine {
    position: fixed !important;
    top: var(--lpe-toolbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: var(--lpe-preview-width) !important;
    height: calc(100vh - var(--lpe-toolbar-height)) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    z-index: 2147482000 !important;
}

/* Le titre commence immédiatement en haut du panneau. */
body.lpe-ready #lorrpack-preview-engine .lpe-preview-header {
    flex: 0 0 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;
}

/* La zone contenant le sac prend tout l'espace restant. */
body.lpe-ready #lorrpack-preview-engine .lpe-preview-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* On conserve la place réservée à droite du canvas Lumise. */
body.lpe-ready #lumise-main.lpe-app-active {
    padding-right: var(--lpe-preview-width) !important;
}