body{
  font-size: 9.5pt;
  font-family: "Garabosse", serif;
  line-height: 1.4;
  --paged-layout : booklet;
}

body.mode-black figure{
	filter: grayscale(1) contrast(200%) brightness(100%);
}

h1{
	font-family: "Garabossoil", serif;
	font-weight: 400;
	text-transform: lowercase;
	font-size: 30pt;
	margin: 0;
}

h2{
  font-weight: bold;
  margin-top: 0;
  /*margin-top: 2em;*/
}

.block h2 {
  margin-top: 0;
}

.block-type-text + .comments-wrapper + .block-type-heading h2,
.block-type-text + .block-type-heading h2 {
  margin-top: 2em;
}

.chapter-title-wrapper{
  margin-bottom: 2em;
}

img{
  max-width: 100%;
  vertical-align: top;
  display: block;
}

figure{
  margin: 0;
  margin-bottom: 2em;
  margin-top: 1em;
}

figcaption{
  color: rgb(120, 120, 120);
  font-size: 7.5pt;
  margin-top: 1em;
  /*font-family: "Paragon italic", serif;*/
}

.block ul,
.block ol{
  padding-left: 8mm;
}

.block ul li{
  list-style: none;
}

.block ul li p:before{
  content: "—";
  display: inline;
  margin-left: -4.5mm;
  margin-right: 2mm ;
}

.block blockquote{
  margin-right: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  /*font-family: "Paragon", serif;*/
  /*font-size: 0.9em;*/
  /*line-height: 1.45;*/
}

.block blockquote p{
  margin-bottom: 0;
}

.block blockquote footer{
  font-style: italic;
  margin-top: 0.2em;
}

.block blockquote footer:before{
  content: "—";
  margin-right: 1mm;
}

p{
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 4;
  -ms-hyphenate-limit-chars: 7 3 4;
  hyphenate-limit-chars: 7 3 4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* veuves et orphelines (bancal) */
  widows: 3;
  orphans: 3;
}

/* ----- COVER ------- */
.cover{
  page: cover;
  height: var(--pagedjs-height);
}

@page cover{
  margin:0;
  @top-left-corner {content: none;}
  @top-left {content: none;}
  @top-center {content: none;}
  @top-right {content: none;}
  @top-right-corner {content: none;}
  @left-top {content: none;}
  @left-middle {content: none;}
  @left-bottom {content: none;}
  @right-top {content: none;}
  @right-middle {content: none;}
  @right-bottom {content: none;}
  @bottom-left-corner {content: none;}
  @bottom-left {content: none;}
  @bottom-center {content: none;}
  @bottom-right {content: none;}
  @bottom-right-corner {content: none;}
}

.cover figure.cover-image{
  position: absolute;
  z-index: -1;
  top:0;
  height: var(--pagedjs-height);
  opacity: 0.5;
  margin: 0;
}

.cover figure.cover-image img{
  height: 100%;
}

.cover h1{
  font-size: 8em;
  margin: 0;
  padding-top: 8mm;
  padding-left: 8mm;
}

.cover h1.cover-number{
  position: absolute;
  right: 8mm;
  bottom: 0mm;
}

.cover .cover-author-date{
  font-size: 2em;
  position: absolute;
  bottom: 7mm;
  left: 8mm;
}

.cover .cover-author-date p{
  margin: 0;
}

/* Interface de commentaires */
.comments{
	font-size: 21px;
	line-height: 1.4;
	width: 70%;
	max-width: 1000px;
	min-width: 300px;
	margin: auto;
}

.comments figure{
	width: 50%;
	margin: auto;
	margin-bottom: 20px;
}

/* Print style */
@media print{
  
  @page {
    size: A5;
    margin: 8mm;
    @bottom-center{
      content: counter(page);
      align-items: flex-end;
      padding-bottom: 7mm;
    }
  }

  @page:left{
    margin-left: 40mm;
    margin-right: 16mm;
    margin-top: 20mm;
    margin-bottom: 40mm;
  }

  @page:right{
    margin-right: 40mm;
    margin-left: 16mm;
    margin-top: 20mm;
    margin-bottom: 40mm;
  }

  /* ------ */

  /* Exemple d’utilisation du plugin fullPage */
  .fullpage{
    --pagedjs-full-page: page;
    width: 100%;
    height: 100%;
    margin: 0px;
  }

  .fullpage img {
      object-fit: cover;
      object-position: 0px 0px;
      width: 100%;
      height: 100%;
  }

  /* ------ */

  /* Exemple d‘utilisation du plugin createIndex */
  .book-index{background: yellow;}
  .link-page a::after{ content: target-counter(attr(href), page); }
  .link-page::after{ content: ", "; }
  .link-page:last-of-type::after{ content: none; }
  .index-value::after{ content: " – "; }


  /* ------ */

  /* Exemple d‘utilisation du plugin footnotes */
  ::footnote-call {
    vertical-align: super;
    font-size: 65%;
    line-height: normal;
  }

  ::footnote-marker{
    font-weight: bold;
  }

  /* TABLEAU */
  .pagedjs_page_content {
    position: relative;
  }

  .fragment-page-container {
	  position: relative;
	  width:  var(--pagedjs-width);
	  height: calc(var(--pagedjs-height) - 20mm);
	  /*overflow: hidden;*/
	}

	.page-spacer{
		height: var(--pagedjs-height); // ou la hauteur de votre page
    width: 1px;
    visibility: hidden;
	}

  .tableau {
    display: flex;
    page-break-after: always;
    flex-wrap: wrap;
    page: tableau;
  }

  @page tableau{
    margin: 8mm;
    margin-bottom: 20mm;
  }

  li{
    margin: 0;
    padding: 0;
    /*list-style: none;*/
  }

  .comment{
  	font-family: "Whois", sans-serif;
    line-height: 1.2;
    font-size: 7.5pt;
    padding: 2mm;
    color: rgb(70, 70, 70);
  	word-break: break-word;
  }

  .layout-item {
    /*position: absolute;*/
    /*width: 47mm;*/
    z-index: 100;
    position: relative;
  }

  .layout-item p{
    text-align: left;
    hyphens: none;
  }

  .layout-item.block-type-image{
    z-index: 99;
  }

  .layout-item figure{
    margin:0;
  }

  .layout-item blockquote{
    margin: 0;
  }

  .layout-item.comment{
    width: 47mm;
    z-index: 101;
    background: rgba(255, 255, 255, 0.8);
  }

/*  .tableau .comment{
    width: 47mm;
    z-index: 100;
    position: absolute;
  	top: 0;
  	background: rgba(255, 255, 255, 0.8);
  }*/

  .comments-in-margin .fragment-inner{
    position: relative;
  }

  .comments-in-margin .block{
  	/*width: calc(100% - 40mm);*/
  }

  .comments-in-margin .comments-wrapper{
  	width: 35mm;
    position: absolute;
    top: -1.5mm;
  }

  .pagedjs_left_page .comments-in-margin .comments-wrapper{
    left: -37mm;
    text-align: right;
  }

  .pagedjs_right_page .comments-in-margin .comments-wrapper{
    right: -37mm;
  }



  .note-marker,
  .note-call{
    display: none;
  }

  .comment-note{
    transform: translateY(-100%);
  }


  .col-6{
    width: 50%;
  }

  .col-8{
    width: 65%;
  }

  .page{
    page: default;
    break-before: right;
    font-size: 12.5pt;
    line-height: 1.5;
  }

  .page h2{
    font-size: 35pt;
    text-align: center;
    margin-top: 0;
  }

  @page default{
    margin: 8mm;
  }

  .interpage{
    --pagedjs-full-page: page;
    height: calc(var(--pagedjs-height) + 12mm);
  }

 .interpage img{
    object-fit: cover;
    object-position: 0px 0px;
    width: 100%;
    height: 100%;
 }

  .garabosse{
    font-family: "Garabosse Perle";
    text-transform: uppercase;
  }

  .note-below{
    font-family: "Syne Tactile", sans-serif;
    line-height: 1.3;
    font-size: 8pt;
    padding-left: 10mm;
    color: grey;
  } 

  .entrance{
		page: entrance;
		break-before: left;
		display: flex;
		flex-wrap: wrap;
	}

	@page entrance{
		margin: 0;
		@top-left-corner {content: none;}
		@top-left {content: none;}
		@top-center {content: none;}
		@top-right {content: none;}
		@top-right-corner {content: none;}
		@left-top {content: none;}
		@left-middle {content: none;}
		@left-bottom {content: none;}
		@right-top {content: none;}
		@right-middle {content: none;}
		@right-bottom {content: none;}
		@bottom-left-corner {content: none;}
		@bottom-left {content: none;}
		@bottom-center {content: none;}
		@bottom-right {content: none;}
		@bottom-right-corner {content: none;}
	}

	.entrance figure{
		width: 50%;
		height: calc(var(--pagedjs-height) / 2);
	}

	.entrance figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}


}