:root {
    --cols: 8;
    --rows: 8;
    --guts: 4mm;
}

@page {
    size: 165mm 230mm;
    margin-top: 16mm;
    margin-bottom: 16mm;
    bleed: 0mm;
    color: black;
    marks: crop;
}

@page:left {
    margin-left: 16mm;
    margin-right: 8mm;

    @left-middle {
        content: counter(page); /* ICI À HARDCODER */
        display: flex;
        justify-content: center;
        align-items: center; 
        font-family: 'Ortica';
        font-weight: bold;
        font-size: 8pt;
        height: 30mm;
    }

    @left-top {
        content: '';
        white-space: nowrap;
        font-family: 'Ortica';
        font-weight: lighter;
        font-size: 7pt;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: right;
    }

    @left-bottom {
        content: '';
        white-space: nowrap;
        font-family: 'Ortica';
        font-weight: lighter;
        font-size: 7pt;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }
}

.pagedjs_margin-left-top div, .pagedjs_margin-left-bottom div {
    display: block;
    min-width: max-content;
    transform: rotate(-90deg);
}

@page:right {
    margin-left: 8mm;
    margin-right: 16mm;
}
  
body {
    font-family: 'Public';
}

.breakbefore {
    break-before: page;
}

.breakafter {
    break-after: page;
}