/* ================================================================
   ZIGZAGOU — STPAGEFLIP
================================================================ */


.zz-flip-section{
    padding:18px 20px 55px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(255,205,75,.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(48,180,187,.11),
            transparent 28%
        ),
        #fffaf0;
}


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

.zz-flip-heading{
    margin:0 auto 10px;
    text-align:center;
}

.zz-flip-heading > span{
    color:#d17a28;

    font-size:12px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:1.4px;
}

.zz-flip-heading h2{
    margin:3px 0;

    color:#26383d;

    font-size:27px;
}


/* ================================================================
   READER
================================================================ */

.zz-flip-reader{
    position:relative;

    max-width:1000px;

    margin:0 auto;
}


/* ================================================================
   TOOLBAR
================================================================ */

.zz-flip-toolbar{
    width:720px;
    max-width:82vw;

    margin:0 auto 6px;

    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:8px;
}


.zz-flip-counter{
    height:32px;

    padding:0 13px;

    display:flex;
    align-items:center;

    gap:4px;

    border-radius:999px;

    background:#fff;

    color:#415b5e;

    font-size:13px;
    font-weight:900;

    box-shadow:
        0 3px 12px
        rgba(50,70,70,.10);
}


.zz-flip-counter-sep{
    opacity:.35;
}


/* ================================================================
   FULLSCREEN
================================================================ */

.zz-flip-fullscreen{
    width:34px;
    height:34px;

    padding:0;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;

    background:#fff;

    color:#2ba4ab;

    cursor:pointer;

    box-shadow:
        0 3px 12px
        rgba(50,70,70,.12);
}


.zz-flip-fullscreen svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ================================================================
   SCENE
================================================================ */

.zz-flip-stage{
    display:grid;

    grid-template-columns:
        58px
        minmax(0,700px)
        58px;

    justify-content:center;
    align-items:center;

    gap:15px;
}


/* ================================================================
   ZONE DU LIVRE
================================================================ */

.zz-flip-book-wrap{
    --zz-edge-left:0px;
    --zz-edge-right:20px;

    position:relative;

    width:700px;
    max-width:100%;

    min-height:455px;

    display:flex;
    justify-content:center;
    align-items:center;
}


/* ================================================================
   CONTENEUR PAGEFLIP
================================================================ */

.zz-pageflip-book{
    position:relative;

    width:100%;

    margin:0 auto;

    filter:
        drop-shadow(
            0 13px 15px
            rgba(55,50,42,.14)
        );
}


/* ================================================================
   UNE PAGE A4
================================================================ */

.zz-pageflip-page{
    position:relative;

    overflow:hidden;

    background:#fff;

    /*
     * StPageFlip gère lui-même les dimensions,
     * mais le contenu reste strictement A4.
     */
    aspect-ratio:210 / 297;
}


/* ================================================================
   IMAGE / FILIGRANE
================================================================ */

.zz-book-watermark-target{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    isolation:isolate;

    background:#fff;
}


.zz-book-watermark-target > img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    background:#fff;

    user-select:none;

    -webkit-user-drag:none;
}


/*
 * Le filigrane reste enfermé dans UNE page.
 */

.zz-book-watermark-target >
.zz-public-watermark-overlay{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    overflow:hidden !important;

    pointer-events:none !important;

    z-index:10 !important;

    contain:paint;
}


/* ================================================================
   TRANCHES DU LIVRE
================================================================ */

.zz-flip-edge{
    position:absolute;

    top:8px;
    bottom:8px;

    z-index:0;

    width:var(--zz-edge-width);

    overflow:hidden;

    pointer-events:none;

    transition:
        width .35s ease,
        transform .35s ease,
        opacity .3s ease;
}


/* gauche */

.zz-flip-edge-left{
    --zz-edge-width:
        var(--zz-edge-left);

    left:50%;

    transform:
        translateX(
            calc(
                -315px
                - var(--zz-edge-left)
            )
        );
}


/* droite */

.zz-flip-edge-right{
    --zz-edge-width:
        var(--zz-edge-right);

    right:50%;

    transform:
        translateX(
            calc(
                315px
                + var(--zz-edge-right)
            )
        );
}


/* Texture de tranche */

.zz-flip-edge::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        repeating-linear-gradient(
            0deg,
            #f4eee2 0px,
            #f4eee2 2px,
            #d4c8b5 3px,
            #fffaf1 4px
        );
}


.zz-flip-edge-left::before{
    border-radius:
        6px 0 0 6px;

    box-shadow:
        -4px 5px 9px
        rgba(60,52,40,.13);
}


.zz-flip-edge-right::before{
    border-radius:
        0 6px 6px 0;

    box-shadow:
        4px 5px 9px
        rgba(60,52,40,.13);
}


/* Feuilles individuelles */

.zz-flip-edge i{
    position:absolute;

    top:0;
    bottom:0;

    width:1px;

    z-index:2;

    background:#c8bda9;

    box-shadow:
        1px 0
        rgba(255,255,255,.8);
}


.zz-flip-edge-left i:nth-child(1){right:2px}
.zz-flip-edge-left i:nth-child(2){right:4px}
.zz-flip-edge-left i:nth-child(3){right:6px}
.zz-flip-edge-left i:nth-child(4){right:8px}
.zz-flip-edge-left i:nth-child(5){right:10px}
.zz-flip-edge-left i:nth-child(6){right:12px}
.zz-flip-edge-left i:nth-child(7){right:14px}
.zz-flip-edge-left i:nth-child(8){right:16px}
.zz-flip-edge-left i:nth-child(9){right:18px}
.zz-flip-edge-left i:nth-child(10){right:20px}
.zz-flip-edge-left i:nth-child(11){right:22px}
.zz-flip-edge-left i:nth-child(12){right:24px}
.zz-flip-edge-left i:nth-child(13){right:26px}
.zz-flip-edge-left i:nth-child(14){right:28px}


.zz-flip-edge-right i:nth-child(1){left:2px}
.zz-flip-edge-right i:nth-child(2){left:4px}
.zz-flip-edge-right i:nth-child(3){left:6px}
.zz-flip-edge-right i:nth-child(4){left:8px}
.zz-flip-edge-right i:nth-child(5){left:10px}
.zz-flip-edge-right i:nth-child(6){left:12px}
.zz-flip-edge-right i:nth-child(7){left:14px}
.zz-flip-edge-right i:nth-child(8){left:16px}
.zz-flip-edge-right i:nth-child(9){left:18px}
.zz-flip-edge-right i:nth-child(10){left:20px}
.zz-flip-edge-right i:nth-child(11){left:22px}
.zz-flip-edge-right i:nth-child(12){left:24px}
.zz-flip-edge-right i:nth-child(13){left:26px}
.zz-flip-edge-right i:nth-child(14){left:28px}


/* ================================================================
   FLECHES
================================================================ */

.zz-flip-arrow{
    position:relative;

    width:50px;
    height:50px;

    padding:0;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff7e4
        );

    color:#2ba5ad;

    cursor:pointer;

    z-index:100;

    box-shadow:
        0 7px 18px
        rgba(53,78,78,.15),
        inset 0 0 0 1px
        rgba(41,159,167,.12);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.zz-flip-arrow::before{
    content:"";

    position:absolute;

    inset:6px;

    border-radius:50%;

    background:
        rgba(45,174,181,.08);
}


.zz-flip-arrow svg{
    position:relative;

    z-index:2;

    width:24px;
    height:24px;

    fill:none;

    stroke:currentColor;

    stroke-width:2.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.zz-flip-arrow:hover:not(:disabled){
    transform:
        translateY(-1px)
        scale(1.08);

    box-shadow:
        0 10px 24px
        rgba(53,78,78,.21);
}


.zz-flip-arrow-prev:hover:not(:disabled) svg{
    transform:translateX(-2px);
}


.zz-flip-arrow-next:hover:not(:disabled) svg{
    transform:translateX(2px);
}


.zz-flip-arrow:disabled{
    opacity:.16;

    cursor:default;

    box-shadow:none;
}


/* ================================================================
   AIDE
================================================================ */

.zz-flip-help{
    margin-top:14px;

    text-align:center;

    color:#819092;

    font-size:12px;
    font-weight:700;
}


.zz-flip-help .mobile{
    display:none;
}


/* ================================================================
   PLEIN ECRAN
================================================================ */

.zz-flip-reader:fullscreen{
    max-width:none;

    padding:20px;

    background:#f8f1df;

    overflow:auto;
}


.zz-flip-reader:fullscreen
.zz-flip-book-wrap{
    width:900px;

    min-height:620px;
}


.zz-flip-reader:fullscreen
.zz-flip-stage{
    grid-template-columns:
        60px
        minmax(0,900px)
        60px;
}


/* ================================================================
   PETIT ECRAN PC
================================================================ */

@media(max-height:720px) and (min-width:761px){

    .zz-flip-book-wrap{
        width:600px;

        min-height:390px;
    }


    .zz-flip-stage{
        grid-template-columns:
            52px
            minmax(0,600px)
            52px;
    }

}


/* ================================================================
   MOBILE
================================================================ */

@media(max-width:760px){

    .zz-flip-section{
        padding-left:4px;
        padding-right:4px;
        overflow:hidden;
    }


    .zz-flip-reader{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }


    .zz-flip-toolbar{
        width:100%;
        max-width:100%;

        padding:0 8px;

        box-sizing:border-box;
    }


    .zz-flip-stage{
        width:100%;

        display:grid;

        grid-template-columns:
            36px
            minmax(0,1fr)
            36px;

        gap:2px;

        align-items:center;
        justify-content:center;

        overflow:visible;
    }


    /*
     * IMPORTANT :
     * plus de min-height forcé à 430px.
     *
     * StPageFlip calcule sa propre hauteur.
     */

    .zz-flip-book-wrap{
        width:100%;
        max-width:310px;

        min-width:0;
        min-height:0;

        height:auto;

        margin:0 auto;

        display:flex;
        justify-content:center;
        align-items:center;

        overflow:visible;
    }


    .zz-pageflip-book{
        width:100%;
        max-width:310px;

        margin:0 auto;
    }


    .zz-pageflip-page{
        aspect-ratio:210 / 297;
    }


    .zz-flip-edge{
        display:none;
    }


    .zz-flip-arrow{
        width:34px;
        height:34px;

        min-width:34px;
        min-height:34px;
    }


    .zz-flip-arrow svg{
        width:18px;
        height:18px;
    }


    .zz-flip-help .desktop{
        display:none;
    }


    .zz-flip-help .mobile{
        display:inline;
    }

}


/* ============================================================
   ZZ_BOOK_READER_CART_V2
   ============================================================ */

.zz-reader-buy-section{
    width:100%;
    padding:8px 20px 34px;
    box-sizing:border-box;
}

.zz-reader-buy-card{
    width:min(700px,100%);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:17px 20px;
    box-sizing:border-box;

    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;

    box-shadow:
        0 8px 25px rgba(65,48,20,.08);
}

.zz-reader-buy-info{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.zz-reader-buy-label{
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    color:#d78028;
}

.zz-reader-buy-name{
    font-size:16px;
    color:#193945;
}

.zz-reader-buy-price{
    font-size:19px;
    font-weight:900;
    color:#193945;
}

.zz-reader-buy-form{
    margin:0;
    flex:0 0 auto;
}

.zz-reader-buy-button{
    border:0;
    cursor:pointer;
    white-space:nowrap;
    padding:13px 20px;
    font-weight:900;
    font-size:15px;
}

@media(max-width:760px){

    .zz-reader-buy-section{
        padding:8px 10px 25px;
    }

    .zz-reader-buy-card{
        display:block;
        padding:15px;
    }

    .zz-reader-buy-info{
        justify-content:center;
        text-align:center;
        margin-bottom:13px;
    }

    .zz-reader-buy-form{
        width:100%;
    }

    .zz-reader-buy-button{
        width:100%;
    }
}



/* ================================================================
   ZZ_BOOK_READER_CART_V3
================================================================ */

.zz-reader-purchase{
    width:100%;
    padding:12px 16px 30px;
    box-sizing:border-box;
}

.zz-reader-purchase-card{
    width:min(700px,100%);
    margin:0 auto;
    padding:16px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;

    box-sizing:border-box;

    background:#fff;
    border:1px solid rgba(27,64,74,.10);
    border-radius:18px;

    box-shadow:
        0 8px 24px rgba(50,45,25,.08);
}

.zz-reader-purchase-left{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.zz-reader-purchase-type{
    color:#e18a2b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.11em;
}

.zz-reader-purchase-title{
    color:#173945;
    font-size:17px;
}

.zz-reader-purchase-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.zz-reader-purchase-price{
    color:#173945;
    font-size:21px;
    white-space:nowrap;
}

.zz-reader-cart-form{
    margin:0;
}

.zz-reader-cart-btn{
    border:0;
    cursor:pointer;
    padding:13px 19px;
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
}

.zz-reader-no-product{
    width:min(700px,100%);
    margin:0 auto;
    padding:13px 16px;
    box-sizing:border-box;

    text-align:center;

    background:#fff3cd;
    border:1px solid #e3b34c;
    border-radius:13px;

    color:#73530d;
    font-weight:700;
}

@media(max-width:760px){

    .zz-reader-purchase{
        padding:8px 8px 24px;
    }

    .zz-reader-purchase-card{
        display:block;
        padding:15px;
    }

    .zz-reader-purchase-left{
        text-align:center;
        margin-bottom:12px;
    }

    .zz-reader-purchase-right{
        display:block;
        text-align:center;
    }

    .zz-reader-purchase-price{
        display:block;
        margin-bottom:11px;
    }

    .zz-reader-cart-form{
        width:100%;
    }

    .zz-reader-cart-btn{
        width:100%;
    }
}