body{
  font-size: 9pt;
  font-family: "Garabosse", serif;
  line-height: 1.3;
  /*--paged-layout : booklet;*/
}

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

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

figure{
  margin: 0;
}

figcaption{
  font-family: "Paragon italic", serif;
}

/* 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: 34mm;
    margin-right: 16mm;
    margin-top: 24mm;
    margin-bottom: 48mm;
  }

  @page:right{
    margin-right: 34mm;
    margin-left: 16mm;
    margin-top: 24mm;
    margin-bottom: 48mm;
  }

  /* ------ */

  /* 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;*/
  }

/*  .tableau .fragment:nth-child(3n){
  	color: red;
    break-after: always;
  }*/

  .tableau .fragment{
  	position: absolute;
  }

  .tableau .fragment-inner{
  	/*position: relative;*/
 	}

  .tableau .fragment figure{
  	width: 70%;
  }

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

  .tableau .comment{
  	font-family: "Whois", sans-serif;
    line-height: 1.2;
    font-size: 7.5pt;
    padding: 2mm;
    color: rgb(70, 70, 70);
    width: 47mm;
    z-index: 100;
    position: absolute;
  	top: 0;
  	background: rgba(255, 255, 255, 0.8);
  	
  	word-break: break-word;
  }

  .pagedjs_left_page .comment{
  	/*left: -35mm;*/
  	/*text-align: right;*/
  }

  .pagedjs_right_page .comment{
  	/*right: -35mm;*/
  	/*text-align: left;*/
  }

  .syne .comment,
  .syne .comment-note {
    font-family: "Syne Tactile", sans-serif;
    border: none;
  }

  .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%;
	}


}