decor-6-site/assets/css/print.css

@media print{

/* --------- Paramètres de base ---------- */
	@page{
		size: 165mm 240mm;
/*		bleed: 6mm; 
	  marks: crop;*/
	}

	@page :left {
		margin: 20mm 36mm 18mm 14mm;
/*		@top-left-corner {
			content: counter(page);
			font-size: 11pt;
			text-align: center;
			font-family: "Bilzig Trial";
	 	}*/
	 	@top-center{
	 		font-family: var(--fontFamily);
	    content: "D6cor >  essai";
	    font-size: 8pt;
	    color: var(--bleu);
	    text-align: left;
	    margin-top: 4mm;
	    /*text-align: center;*/
	    /*text-transform: uppercase;*/
	    /*width: 105%;*/
	    /*margin-left: 0%;*/
	  }
	  @bottom-left{
	 		font-family: var(--fontFamily);
	    content: counter(page);
	    font-size: 11pt;
	    color: var(--vert);
	    margin-top:-5mm;
	    margin-left: 0mm;
	  }
	}

	@page :right {
		margin: 20mm 14mm 18mm 36mm;
		/*@top-right-corner {
			content: counter(page);
			font-size: 7pt;
			text-align: center;
			font-family: var(--fontFamily);
	 	}*/
	 	@top-center{
	    content: string(chapter);
	    font-family: var(--fontFamily);
	    font-size: 8pt;
	    color: var(--bleu);
	    text-align: right;
	    margin-top: 4mm;
	  }
	  @bottom-right{
	 		font-family: var(--fontFamily);
	    content: counter(page);
	    font-size: 11pt;
	    color: var(--vert);
	    margin-top:-5mm;
	    margin-right: 0mm;
	  }
	}

	.chapter{
		break-before: right;
		counter-reset: callNote_marginNote markerNote_marginNote;
	}

	/* borders */
	.pagedjs_margin-top-left-corner-holder:before{
		content: " ";
		background: var(--vert);
		width: 100%;
		height: var(--border);
		position: absolute;
	}

	.pagedjs_margin-left:before{
		content: " ";
		position: absolute;
		top:0;
		background: var(--bleu);
		width: var(--border);
		height: var(--pagedjs-height);
		z-index: 2;
	}

	.pagedjs_right_page .pagedjs_margin-left:before{
		content: none;
	}

	.pagedjs_margin-right:after{
		content: " ";
		position: absolute;
		top:0;
		right: 0;
		background: var(--bleu);
		width: var(--border);
		height: var(--pagedjs-height);
		z-index: 2;
	}

	.pagedjs_left_page .pagedjs_margin-right:after{
		content: none;
	}

	.pagedjs_margin-bottom:after{
		content: " ";
		background: var(--rouge);
		width: 100%;
		height: var(--border);
		position: absolute;
		bottom: 0;
		left: 0;
	}

	/* ---- TOC ---- */
	.toc{
  	break-before: right;
	}

	#list-toc-generated .toc-element a::after{
	  font-size: 13pt;
	}

	#list-toc-generated .toc-element-level-2 a::after{
	  font-size: 10pt;
	}

	#list-toc-generated .toc-element-level-1{
	  font-size: 13pt;
	}

	#list-toc-generated .toc-element-level-2{
	    font-weight: bold;
	    margin-bottom: 20px;
	}

	/* ---- INTERPAGES ------ */
	.interpage figure{
	  height: calc(var(--pagedjs-height) - (var(--border) * 2)) !important;
	  margin-top: calc(var(--border) + 3mm);
	  width: 100%;
	}

	/* ---- PAGE DE TITRE ------ */

	.chapter-title{
		page: chapterTitle;
		display: flex;
	  flex-direction: column;
	  align-items: center;
	}

	@page chapterTitle{
		background: var(--bleu);
		margin: 12mm 0mm;
		@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;}
	}

	.chapter-title h2,
	.chapter-title h3,
	.chapter-title p {
	  display: inline-block;
	  position: relative;
	  margin: 0;
	  color: #FFF;
		font-size: var(--textSize);
		text-align: center;
	}

	/* ascii-fill : pas de flex:1, hauteur fixée par JS */
  .ascii-fill {
    white-space: pre;
    overflow: hidden;
    line-height: 1.5;
    flex-shrink: 0;
    color: #FFF;
		font-size: var(--textSize);
		text-align: center;
		font-family: var(--fontFamily);
		width: 100%;
  }

  .chapter-title,
  .biographie {
    font-family: var(--fontFamily);
    color: #FFF;
    text-align: center;
  	width: 90%;
  	margin: auto;
  	/*padding: 30px;*/
  }

  pre {
    font-family: var(--fontFamily);
    font-size: var(--textSize);
    line-height: 1.5;
    white-space: pre-wrap;
  }

  /* ------- TITLES ------- */
  .chapter-content h3{
  	/*width: calc(var(--pagedjs-width) - 12mm);*/
  	text-align: center;
  }

  .chapter-content h3:before{
  	content: "+------------------------------------------------+";
  	display: block;
  	margin-bottom: 2mm;
  }

  .chapter-content h3:after{
  	content: "+------------------------------------------------+";
  	display: block;
  	margin-top: 1mm;
  	margin-bottom: 1mm;
  }

  .pagedjs_right_page .chapter-content h3{
  	/*margin-left: calc((var(--pagedjs-margin-left) - 16mm) * -1);*/
  }

  .chapter-content h4{
  	text-align: center;
  }


  .chapter-content h4:before{
  	content: "> > > > > > < < < < < < \a > > > >  ";
  	white-space: pre;
  }

  .chapter-content h4:after{
  	content: " < < < < \a > > > > > > < < < < < <";
  	white-space: pre;
  }

  /* -------- IMAGES ------- */
  .float-image{
  	position: relative !important;
	  top: auto !important;
	  left: auto !important;
	  width: auto !important;
	  float: right; /* ou left selon la position souhaitée */
	  clear: right;
	  width: 45% !important;

	  margin-top: 2mm;
	  
  }

  .pagedjs_left_page .float-image{
	  float: right;
	  margin-right: calc(var(--pagedjs-margin-right) / 2 * -1);
	 	margin-left: 5mm;
	}

	.pagedjs_right_page .float-image{
	  float: left;
	  margin-left: calc(var(--pagedjs-margin-left) / 2 * -1);
	  margin-right: 5mm;
	}

	.float-image figcaption{
		position: relative;
		color: var(--bleu);
		font-size: 8.5pt;
		font-family: "Bilzig Trial";
		text-align: left;
	}

	.float-image figcaption p{
		color: var(--bleu);
		font-size: 8.5pt;
		font-family: "Bilzig Trial";
		text-align: left;
	}

  /* ------- NOTES ------- */

  .margin-note{
  	font-size: 8.5pt;
  	line-height: 1.41;
  	font-family: "Bilzig Trial";
  	color: var(--bleu);
  	text-align: left;
  	position: relative !important;
	  top: auto !important;
	  left: auto !important;
	  width: auto !important;
	  float: right; /* ou left selon la position souhaitée */
	  clear: right;
	  
	  /* Largeur de la note dans le corps du texte */
	  width: 45% !important;
	  
	  padding: 1mm 3mm 0mm;
	  
  }

  .margin-note a{
  	color: var(--bleu);
  }

  .pagedjs_left_page .margin-note {
	  float: right;
	  margin-right: calc(var(--pagedjs-margin-right) / 2 * -1);
	  padding: 1mm 0mm 0mm 3mm;
	}

	.pagedjs_right_page .margin-note {
	  float: left;
	  margin-left: calc(var(--pagedjs-margin-left) / 2 * -1);
	  text-align: right;
	  padding: 1mm 3mm 0mm 0mm;
	}

	.note-call_margin-note::before{
		content: "{";
		margin-right: 0.5mm;
	}

	.note-call_margin-note::after{
		content: "}";
		margin-left: 0.5mm;
	}

	.note-marker_margin-note{
		margin-right: 2mm;
	}

	.note-marker_margin-note::before{
		content: "{";
		margin-right: 1mm;
	}

	.note-marker_margin-note::after{
		content: "}";
		margin-left: 1mm;
	}

	/* ----- IMAGES (SEPARATION DES COUCHES) ----- */
	.print-image{
		position: relative;
	}

	.print-image div{
		position: absolute;
		top: 0;
		left: 0;
		mix-blend-mode: multiply;
		vertical-align: top;
	}

	.print-image figcaption{
		position: absolute;
		bottom: 0;
	}

	.print-image .print-red{
		position: relative;
		background: var(--rouge);
	}

	.print-image .print-green{
		background: var(--vert);
	}

	.print-image .print-blue{
		background: var(--bleu);
	}

	.print-image > div > img{
		mix-blend-mode: screen;
	  -webkit-filter: grayscale(100%) contrast(200%);
	  filter: grayscale(100%) contrast(200%);
	  opacity: 1;
	}

	.print-image { display: block;}
	.web-image { display: none;}

}


/* Gestion des couches */
body.isolate-red-layer .green-layer,
body.isolate-red-layer .blue-layer,
body.isolate-red-layer .black-layer { display: none; }

body.isolate-green-layer .red-layer,
body.isolate-green-layer .blue-layer,
body.isolate-green-layer .black-layer { display: none; }

body.isolate-blue-layer .red-layer,
body.isolate-blue-layer .green-layer,
body.isolate-blue-layer .black-layer { display: none; }

body.isolate-black-layer .red-layer,
body.isolate-black-layer .green-layer,
body.isolate-black-layer .blue-layer { display: none; }

/* Noir et blanc */
body.mode-black .print-image > div {
	background: transparent;
}