@media print {

  @page {
    size: 165mm 240mm;
    margin-top: 95px;
    margin-bottom: 18mm;
    /*bleed: 6mm;*/
    /*marks: crop;*/
    --symbol-top: 1px;
    --symbol2-top: 0px;
    --running-top: 6mm;
    --running-bottom: 6mm;
    --running-left: 19px;
    --running-left-bottom: 55px;
  }

  @page:left {
    margin-left: 18mm;
    margin-right: 26mm;

    @top-left-corner {
      content: var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
      padding-left: var(--running-left);
      position: relative;
      top: var(--symbol2-top);
    }


    @top-left {
      content: element(decor);
      vertical-align: top;
      padding-top: calc(var(--running-top) - var(--symbol-top));
      width: calc(var(--unit)*2);
      font-size: var(--font-size);
      color: var(--sign-color);
      font-family: var(--sign-family);
    }



    @top-center {
      content: element(author);
      vertical-align: top;
      padding-top: calc(var(--running-top) - var(--symbol-top));
      text-align: left;
      white-space: nowrap;
      font-size: var(--font-size);
      color: var(--sign-color);
      font-family: var(--sign-family);
      /*margin-left: -12px;*/

    }


    @top-right {
      content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      width: 100%;
      white-space: nowrap;
      text-align: left;
      padding-left: 15px;
      position: relative;
      top: var(--symbol2-top);
    }

    @bottom-left-corner {
      content: counter(page) " (";
      vertical-align: bottom;
      padding-bottom: var(--running-bottom);
      white-space: nowrap;

      font-size: var(--sign-size);
      font-size: 12px;
      color: var(--sign-color);
      font-family: var(--sign-family);
      text-align: left;
      margin-left: 5mm;

      z-index: 100;
    } 






  }

  @page:right {
    margin-left: 26mm;
    margin-right: 18mm;

    @top-left-corner {
      content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
      padding-left: var(--running-left);
      position: relative;
      top: var(--symbol2-top);
    }

    @top-left {
      content: element(title);
      vertical-align: top;
      padding-top: var(--running-top);
      white-space: nowrap;
      padding-right: 1.5ch;
      font-family: var(--sign-family);
      font-size: var(--font-size);
      color: var(--sign-color);
    }

    @top-right {
      content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      width: 100%;
      white-space: nowrap;
      position: relative;
      top: var(--symbol2-top);
    }


    @bottom-right-corner {
      content: ") " counter(page);
      vertical-align: bottom;
      padding-bottom: var(--running-bottom);
      text-align: right;
      white-space: nowrap;

      font-size: var(--sign-size);
      font-size: 12px;
      color: var(--sign-color);
      font-family: var(--sign-family);
      margin-right: 5mm;

      z-index: 100;

    } 
  }


  @page:blank {
    @top-left { content: none;}
    @top-left-corner { content: none;}
    @top-right { content: none; }
    @top-center { content: none;}
    @bottom-center { content: none; }


  }
}

.nav-title, .nav-author, .nav-type, .nav-decor{
  text-transform: uppercase;
  font-size: 12px;
}

.nav-title {
  position: running(title);
}

.nav-author {
  position: running(author);

}

.nav-type {
  position: running(type);
}

.nav-decor {
  position: running(decor);
}

.pagedjs_area {
  position: relative;
}


.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after {
  content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
  font-size: var(--sign-size);
  color: var(--sign-color);
  letter-spacing: var(--sign-spacing);
  font-family: var(--sign-family);
  line-height: var(--sign-baseline);
  /* padding-left: 1ch; */
  width: calc(var(--unit) + var(--sub-unit));
  position: relative;
  top: var(--symbol2-top);
  padding-left: 11px;
}

.pagedjs_left_page .pagedjs_margin-top {
  width: calc(100% + var(--pagedjs-margin-right) - 2ch);
  overflow: hidden;
}


.pagedjs_right_page .pagedjs_margin-top{
  width: calc(100% + var(--pagedjs-margin-left) - 4ch);
  overflow: hidden;
}


.pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after {
  padding-left: 0.25ch;
  padding-right: 1.25ch;
  display: inline-block;
  background-color: white;
  min-width: 2ch;
}



.pagedjs_right_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after {
   padding-left: 1.25ch;
  padding-right: 0.25ch;
  display: inline-block;
  background-color: white;
  min-width: 2ch;
}

.pagedjs_page.pagedjs_named_page.pagedjs_essai_page.pagedjs_essai_first_page .pagedjs_margin-top-left-corner>.pagedjs_margin-content::after,
.pagedjs_page.pagedjs_named_page.pagedjs_entretien_page.pagedjs_entretien_first_page .pagedjs_margin-top-left-corner>.pagedjs_margin-content::after{
  content: none !important;
}


[data-chapter="essai"]{
    --sign-color: var(--blue);
   page: essai;
   break-before: right;
}


@page essai{
  --sign-color: var(--blue);
}

[data-chapter="entretien"]{
  --sign-color: var(--red);
  page: entretien;
  break-before: right;
}

@page entretien{
  --sign-color: var(--red);
}

[data-chapter="portfolio"]{
  --sign-color: var(--green);
  --sign-color: white;
  page: portfolio;
  break-before: left;
}

@page portfolio{
  --sign-color: var(--green);
  --sign-color: white;
  background-color: #000;
}

/* ------- TABLE OF CONTENTS --------- */
.toc{
  break-before: left;
  font-family: var(--fontTitle);
  text-align: left;
  font-size: var(--font-size);
  page: toc;
}

@page toc{
  margin-top: 10mm;
  margin-bottom: 10mm;
  @top-left { content: none;}
  @top-left-corner { content: none;}
  @top-right { content: none; }
  @top-center { content: none;}
  @bottom-center { content: none; }
  @bottom-right-corner { content: none; }
}

.toc h2{
  font-family: var(--fontTitle);
  text-align: left;
  font-size: var(--font-size);
  margin-bottom: var(--baseline);
}

/* counters */
#list-toc-generated{ 
  counter-reset: counterTocLevel1; 
  list-style: none;
  overflow-x: visible !important;
}

#list-toc-generated .toc-element-level-1{ 
  counter-increment: counterTocLevel1; 
  margin-bottom: calc(var(--baseline) * 1);
}

.toc-essai a span{
  color: var(--blue);
}

.toc-entretien a span{
  color: var(--red);
}

.toc-portfolio a span{
  color: var(--green);
}

#list-toc-generated a{
  display: block;
  text-decoration: none;
  margin-left: 70px;
  width: calc(100% - 70px);
}

#list-toc-generated .toc-element a::before{
  content: target-counter(attr(href), page);
  position: absolute;
  left:0;
  text-align: left;
}

#list-toc-generated li span{
  display: block;
  text-transform: uppercase;
}

#list-toc-generated li span::before{
  content: "//////// essai //////////////////////////////////////////";
  display: block;
  font-size: 0.8em;
  white-space: nowrap;
}

#list-toc-generated .toc-element a span::after{
  content: "— Auteur du texte";
  display: block;
}