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

@media print{

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

	@page :left {
		margin: 12mm 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;
	  }*/
	  @bottom-left{
	 		font-family: var(--fontFamily);
	    content: counter(page);
	    font-size: 20pt;
	    color: var(--vert);
	    margin-top:-5mm;
	    margin-left: 0mm;
	  }
	  @bottom-right{
	  	font-family: var(--fontFamily);
	    content: "D6cor >  essai";
	    font-size: 8pt;
	    color: var(--bleu);
	    text-align: left;
	    margin-top:-5mm;
	  }
	}

	@page :right {
		margin: 12mm 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: 20pt;
	    color: var(--vert);
	    margin-top:-5mm;
	    margin-right: 0mm;
	  }
	  @bottom-left{
	 		content: string(chapter);
	    font-family: var(--fontFamily);
	    font-size: 8pt;
	    color: var(--bleu);
	    margin-top:-5mm;
	  }
	}

	.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) + 8mm);
    margin-bottom: 0;
	  width: 100%;
	}

	/* ---- PAGE DE TITRE ------ */
	/* --- test 1 font 1 taille typo */
	.test .chapter-title{
		page-break-before: always;
		position: relative;
	}

	.test .chapter-title h2,
	.test .chapter-title h3{
	  margin: 0;
		font-size: var(--textSize);
		/*text-align: center;*/
		/*font-family: var(--fontTitle);*/
		text-align: left;
	}

	.test .chapter-title h2:before{
		content: "# # # # # # # # # # # # # # # # # # # # # # # # # # # # #";
		display: block;
		margin-bottom: 1rem;
	}

	.test .chapter-title h2:after{
		content: "+ + + + + + + + + + + + + + + + + + + + + + + +	+ + + + + + + + + + + + + + + + + + + + + + + +	+ + + + + + + + + + + + + + + + + + + + + + + +	+ + + + + + + + + + + + + + + + + + + + + + + +	+ + + + + + + + + +	+ + + + + + + + + +	";
		display: block;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.test .chapter-title h3{
		font-size: var(--fontSize);
		text-transform: none;
		font-weight: 500;
	}

	.test .chapter-title h3:after{
		content: "⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱	⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱	⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱	⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱	⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱	⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ ⋱	";
		display: block;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.test .chapter-title .type{
		position: absolute;
		left: -2.2cm;
		top: 0mm;
		font-family: var(--fontTitle);
		font-size: 8pt;
		/*color: var(--bleu);*/
	}

	.test .chapter-title .type:before{
		content: "[";
	}

	.test .chapter-title .type:after{
		content: "]";
	}

	/* -- test mix ocr / jetbrains  --- */
	.chapter-title{
		page-break-before: always;
		margin-bottom: 2cm;
		position: relative;

		/*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{
/*	  display: inline-block;
	  position: relative;*/
	  margin: 0;
		font-size: 24pt;
		/*text-align: center;*/
		font-family: var(--fontTitle);
		text-align: left;
	}

	.chapter-title h3{
		font-size: 10.5pt;
		margin-top: 2cm;
		text-transform: none;
		font-weight: 500;
	}

	.chapter-title .type{
		position: absolute;
		left: -2.2cm;
		top: 1.5mm;
		font-family: var(--fontTitle);
		/*color: var(--bleu);*/
		font-size: 8pt;

	}

	.chapter-title .type:before{
		content: "[";
	}

	.chapter-title .type:after{
		content: "]";
	}

	.interview-block strong{
		font-weight: normal;
		margin-right: 0mm;
		display: inline-block;
	}

	.interview-block strong:before{
		content: "[";
	}
	.interview-block strong:after{
		content: "]";
	}

	.interview-block p{
		margin-top: 0;
		margin-bottom: 0;
		text-align-last: left;
	}

	.interview-block p:nth-of-type(odd) {
	  /*color: var(--rouge);*/
	}

	.interview-block p:nth-of-type(2n) {
	  margin-left: 2cm;
	}

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

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

  /* ------- TITLES ------- */

  /* test titres couleurs */
  .chapter-content h3{
  	/*text-align: center;*/
  	/*background: var(--vert);*/
  	/*display: inline-block;*/
  	font-size: 12pt;
  	color: var(--bleu);
  	font-family: var(--fontTitle);
  	margin-left: 1cm;
  	letter-spacing: 0.1px;
  }

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

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

  .test .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;*/
  	font-family: var(--fontTitle);
  	color: var(--rouge);
  	font-size: 12pt;
  }


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

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

  /* ----- PORTFOLIO ----- */
  .portfolio .block-type-gallery{
  	page-break-before: always;
  }

  .portfolio .block-type-gallery{
  	page: portfolio;
  }

  @page portfolio{
  	margin: 12mm 14mm 18mm;
	 	@bottom-left{
  		content: none;
  	}
  	@bottom-right{
  		content: none;
  	}
  }

  /* portfolio, grande image pleine page */
  .portfolio .block-type-gallery li.landscape{
  	page-break-after: always;
    width: var(--pagedjs-height);
    height: var(--pagedjs-width);
    transform: rotate(90deg);
    transform-origin: center center;
    position: absolute;
    top: 2.5cm;
    left: -38%;
    overflow: hidden;
  }

  .portfolio .block-type-gallery li.landscape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .portfolio[data-id="jose-fa-ntjam-portfolio"] .block-type-gallery li.landscape img {
    width: 100%;
    height: auto;
    object-fit: none;
  }

  /*.portfolio .block-type-gallery li{
  	margin-bottom: 2rem;
  }

  .portfolio .block-type-gallery .small{
  	width: 40%;
  }

  .portfolio .block-type-gallery .medium{
  	width: 70%;
  }

  .portfolio .block-type-gallery .big{
  	width: 100%;
  }*/

  /* portfolio removed borders */
	.pagedjs_portfolio_page .pagedjs_margin-top-left-corner-holder:before,
	.pagedjs_portfolio_page .pagedjs_margin-left:before,
	.pagedjs_portfolio_page .pagedjs_margin-right:after,
	.pagedjs_portfolio_page .pagedjs_margin-bottom:after{
		content: none;
	}

	/* portfolio test version image sens de lecture, texte en bas */
	.portfolio[data-id="jose-fa-ntjam-portfolio-copier"],
	.portfolio[data-id="everything-is-real-copier"]{
		page: portfoliosans;
	}

	@page portfoliosans{
  	margin: 0;
	 	@bottom-left{
  		content: none;
  	}
  	@bottom-right{
  		content: none;
  	}
  }

  .pagedjs_portfoliosans_page .pagedjs_margin-top-left-corner-holder:before,
	.pagedjs_portfoliosans_page .pagedjs_margin-left:before,
	.pagedjs_portfoliosans_page .pagedjs_margin-right:after,
	.pagedjs_portfoliosans_page .pagedjs_margin-bottom:after{
		content: none;
	}

	.portfolio .chapter-title .type{
		right: 0;
		left: auto;
	} 

	.portfolio .web-image{
		display: block;
	}

	.portfolio .print-image{
		display: none;
	}

	.pagedjs_portfoliosans_page {
		position: relative;
	}

	.pagedjs_portfoliosans_page .chapter-title{
		display: none;
	}

	.portfolio .block-type-image + .block-type-text{
		page-break-after: always;
	}

	.pagedjs_portfoliosans_page .block-type-text{
		position: absolute;
		width: calc(100% - (36mm + 8mm));
		bottom: 0mm;
	}

	.pagedjs_portfoliosans_page .block-type-text p{
		text-align: left;
	}

	.pagedjs_portfoliosans_page.pagedjs_left_page .block-type-text{
		right: 36mm;
	}	

	.pagedjs_portfoliosans_page.pagedjs_right_page .block-type-text{
		left: 36mm;
	}

  /* -------- 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: 7pt;
		font-family: var(--fontNotes);
		text-align: left;
	}

	.float-image figcaption p{
		color: var(--bleu);
		font-size: 7pt;
		font-family: var(--fontNotes);
		text-align: left;
		line-height: 1.3;
	}

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

  .margin-note{
  	font-size: 7pt;
  	line-height: 1.3;
  	font-family: var(--fontNotes);
  	/*font-weight: 400;*/
  	/*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{
		font-size: 0.7em;
	}

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