/* CSS for Paged.js interface – v0.4 */

/* Change the look */
:root {
    --color-background: var(--couleur1);
    --color-pageSheet: var(--couleur1);
    --color-pageBox: violet;
    --color-paper: white;
    --color-marginBox: transparent;
    --pagedjs-crop-color: black;
    --pagedjs-crop-shadow: white;
    --pagedjs-crop-stroke: 1px;
}

@font-face{
    font-family: "BasicallySans";
    src: url("../fonts/BasicallySans-Regular.woff2");
    font-family: normal;
}
@font-face {
    font-family: "ReadyActive";
    src: url("../fonts/ReadyActive-Regular.otf");
  }
  @font-face {
    font-family: "ReadyActiveBold";
    src: url("../fonts/ReadyActive-Bold.otf");
  }
  @font-face {
    font-family: "PetitFrere";
    src: url("../fonts/PetitFrereWide-Regular.otf");
    font-weight: normal;
  }
  @font-face {
    font-family: "PetitFrere";
    src: url("../fonts/PetitFrereWide-Black.otf");
    font-weight: bold;
  }
  @font-face {
    font-family: "PetitFrereNarrow";
    src: url("../fonts/PetitFrereNarrow-Regular.otf");
  }
  
.interface{
    position:fixed !important;
    top:1em;
    left:1em;
    font-size:9.5pt;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.bout-interface{
    padding:.3rem .6rem;
    border-radius:.2rem;
    background:white;
    font-family:"BasicallySans";
}
.interface:hover{
    z-index: 9999;
}
.firstpage_hidden{
    display:none;
}
.testest{
    background:red;
    position:absolute;
    top:0;
    left:0;
    width:1px;
    height:1px;
}
.interface ul{
    display:block;
    margin:0;
}
.baselinewhite {
    background: repeating-linear-gradient(
        white 0,
        white calc(10.575pt - 1px),
        white calc(10.575pt - 1px),
        white 10.575pt
    );
}
.reperewhite{
    outline: 0px solid rgba(255, 0, 0, 0.4);
}
.ouv-menu{
    display:inline-block;
    font-family:"ReadyActive";
    font-size: 2em;
    padding:0.08rem .5rem 0.08rem .3rem;
}
.bout-interface{
    transition: .2s background;
}
.bout-interface:hover{
    cursor:pointer;
    background:lightgrey;
}
.bout-interface:not(.ouv-menu){
    display: none;
}
.interface ul{
    list-style-type: none;
    padding-left:1em;
}
.navbook-onload, .fonctions-onload{
    display:none;
}
.navbook-loaded{
    bottom:1em;
    left:1em;
    display:block !important;
}
.fonctions-loaded{
    left:1em;
    top:1em;
    display:block !important;
}
.menus{
    padding:1em;
    display:none;
    cursor:pointer;
    background:lightgrey;
    opacity:.1;
    transition: .3s opacity;
    font-family: "PetitFrere";
    color:var(--couleur2);
    background: var(--couleur1);
    border:1px solid var(--couleur3);
    line-height: 1.5;
    width:14em;
}
.menus h1{
    font-size:1em;
    transform:none;
    font-family: inherit;
    margin:0 0 .5em 0;
    font-family: "PetitFrere";
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--couleur3);
}
.menus a, .menus div{
    color:inherit;
    text-decoration: none;
    margin-left:1em;
    font-family: "PetitFrereNarrow";
}
div[class*="bouton-"],span[class*="bouton-"],a[class*="bouton-"]{
    margin-left:1em;
}
div[class*="bouton-"]:hover,span[class*="bouton-"]:hover,a[class*="bouton-"]:hover{
    color:var(--couleur3);
}
.menus:hover{
    opacity:1;
    z-index: 9999;
}
a.bouton-book-nav-title{
    display: block;
    text-decoration: underline !important;
}

.print-booklet-option{
    display: none;
}
/* To define how the book look on the screen: */
@media screen, pagedjs-ignore {
    body {
        background-color: var(--color-background);
    }
    

.menu-interface{
  position: fixed;
  top:0;
  left:0;
  background:red;
}
    .pagedjs_pages {
        display: flex;
        width: calc(var(--pagedjs-width) * 2);
        flex: 0;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .pagedjs_page {
        background-color: var(--color-paper);
        box-shadow: 0 0 0 1px var(--color-pageSheet);
        margin: 0;
        flex-shrink: 0;
        flex-grow: 0;
        margin-top: 10mm;
    }

    .pagedjs_first_page {
        margin-left: var(--pagedjs-width);
    }

    .pagedjs_page:last-of-type {
        margin-bottom: 10mm;
    }

    .pagedjs_pagebox{
        box-shadow: 0 0 0 1px var(--color-pageBox);
    }

    .pagedjs_left_page{
        z-index: 20;
        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
    }

    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
        border-color: transparent;
    }

    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
        width: 0;
    }

    .pagedjs_right_page{
        z-index: 10;
        position: relative;
        left: calc(var(--pagedjs-bleed-left)*-1);
    }

    /* show the margin-box */

    .pagedjs_margin-top-left-corner-holder,
    .pagedjs_margin-top,
    .pagedjs_margin-top-left,
    .pagedjs_margin-top-center,
    .pagedjs_margin-top-right,
    .pagedjs_margin-top-right-corner-holder,
    .pagedjs_margin-bottom-left-corner-holder,
    .pagedjs_margin-bottom,
    .pagedjs_margin-bottom-left,
    .pagedjs_margin-bottom-center,
    .pagedjs_margin-bottom-right,
    .pagedjs_margin-bottom-right-corner-holder,
    .pagedjs_margin-right,
    .pagedjs_margin-right-top,
    .pagedjs_margin-right-middle,
    .pagedjs_margin-right-bottom,
    .pagedjs_margin-left,
    .pagedjs_margin-left-top,
    .pagedjs_margin-left-middle,
    .pagedjs_margin-left-bottom {
        box-shadow: 0 0 0 1px inset var(--color-marginBox);
    }

    /* uncomment this part for recto/verso book : ------------------------------------ */

    /*
    .pagedjs_pages {
        flex-direction: column;
        width: 100%;
    }

    .pagedjs_first_page {
        margin-left: 0;
    }

    .pagedjs_page {
        margin: 0 auto;
        margin-top: 10mm;
    }

    .pagedjs_left_page{
        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
    }

    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
        border-color: var(--pagedjs-crop-color);
    }

    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
        width: var(--pagedjs-cross-size)!important;
    }

    .pagedjs_right_page{
        left: 0;
    }
    */



    /*--------------------------------------------------------------------------------------*/



    /* uncomment this par to see the baseline : -------------------------------------------*/


    /* .pagedjs_pagebox {
        --pagedjs-baseline: 22px;
        --pagedjs-baseline-position: 5px;
        --pagedjs-baseline-color: cyan;
        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
        background-size: 100% var(--pagedjs-baseline);
        background-repeat: repeat-y;
        background-position-y: var(--pagedjs-baseline-position);
    }  */


    /*--------------------------------------------------------------------------------------*/
}





/* Marks (to delete when merge in paged.js) */

.pagedjs_marks-crop{
    z-index: 999999999999;

}

.pagedjs_bleed-top .pagedjs_marks-crop,
.pagedjs_bleed-bottom .pagedjs_marks-crop{
    box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
}

.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
    box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
}

.pagedjs_bleed-left .pagedjs_marks-crop,
.pagedjs_bleed-right .pagedjs_marks-crop{
    box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
}

.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
    box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
}

/* .pagedjs_left_page .pagedjs_sheet {
  background:linear-gradient(90deg, rgba(199,199,199,0) 80%, rgba(48,52,15,.3) 100%);
}
.pagedjs_right_page .pagedjs_sheet {
  background:linear-gradient(-90deg, rgba(199,199,199,0) 80%, rgba(48,52,15,.3) 100%);
} */

@media print {
  /* All your print styles go here */
  .menus {
    display: none !important;
  }
}