:root {
    --grid-bold:  #bfbfbf;
    --grid-light: #efefef;

    --grid-spacing: 56px;
    --steps: 5;
    --grid-position-x: 28px;
    --grid-position-y: 0px;

    --grid-subdivisions: calc(var(--grid-spacing)/var(--steps));

}


@media screen{


   
    body.grid .pagedjs_sheet {


       
        z-index: -1;
    
    
        background-image:
            /* Traits bold */
            repeating-linear-gradient(
                90deg,
                var(--grid-bold) 0 1px,
                transparent 1px var(--grid-spacing)
            ),
            repeating-linear-gradient(
                0deg,
                var(--grid-bold) 0 1px,
                transparent 1px var(--grid-spacing)
            ),
    
            /* Traits fins (3 traits → 4 carrés) */
            repeating-linear-gradient(
                90deg,
                var(--grid-light) 0 1px,
                transparent 1px var(--grid-subdivisions)
            ),
            repeating-linear-gradient(
                0deg,
                var(--grid-light) 0 1px,
                transparent 1px var(--grid-subdivisions)
            );
    
        background-position:
            var(--grid-position-x) var(--grid-position-y),
            var(--grid-position-x) var(--grid-position-y),
            var(--grid-position-x) var(--grid-position-y),
            var(--grid-position-x) var(--grid-position-y);
    }
    
    
    




    .grid-page{
        --nbr-columns: 8;
        width: var(--pagedjs-pagebox-width);
        height: var(--pagedjs-pagebox-height);
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(var(--nbr-columns), calc(100%/var(--nbr-columns)));

        box-shadow: 1px 0px 0px 0px var(--grid-color);

        --grid-color: magenta;
        z-index: -1;
    }

    .pagedjs_right_page .grid-page{
        padding-left: var(--pagedjs-margin-left);
        padding-right: var(--pagedjs-margin-right);
    }

    .pagedjs_left_page .grid-page{
        padding-left: var(--pagedjs-margin-left);
        padding-right: var(--pagedjs-margin-right);
    }


    .grid-page .grid-column{
        box-shadow: 1px 0px 0px 0px var(--grid-color);
        grid-row: 1/end;
        width: 100%;
        justify-self: right;


    }

    .grid-column-0{ 
        grid-column: 1; 
        box-shadow: -1px 0px 0px 0px var(--grid-color)!important;
        justify-self: left;
    }

    .grid-column-1{ grid-column: 1; }
    .grid-column-2{ grid-column: 2; }
    .grid-column-3{ grid-column: 3; }
    .grid-column-4{ grid-column: 4; }
    .grid-column-5{ grid-column: 5; }
    .grid-column-6{ grid-column: 6; }
    .grid-column-7{ grid-column: 7; }
    .grid-column-8{ grid-column: 8; }
    .grid-column-9{ grid-column: 9; }
    .grid-column-10{ grid-column: 10; }
    .grid-column-11{ grid-column: 11; }
    .grid-column-12{ grid-column: 12; }
}

.no-grid .grid-page{
    display: none;
}