/* PrePostPrint only css framework */

/* changer les variables largeur, hauteur (format de la page), marges et position du footer */
:root{
  --page-width: 14.85cm;
  --page-height: 21cm;
  --page-margin: 0.8cm;
  --page-footer-bottom: 0.4cm;
  --page-footer-margin: 0.8cm;
  font-size: 62,5%;
}

/*------font---------*/

@font-face {
    font-family: 'Facade-7';
    src: url('/font-rotate/Facade-7-Regular.eot');
    src: local('/font-rotate/Facade-7 Regular'), local('Facade-7-Regular'),
        url('/font-rotate/Facade-7-Regular.eot#iefix') format('embedded-opentype'),
        url('/font-rotate/Facade-7-Regular.woff2') format('woff2'),
        url('/font-rotate/Facade-7-Regular.woff') format('woff'),
        url('/font-rotate/Facade-7-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'Facade-7';
    src: url('/font-rotate/Facade-7-Bold.eot');
    src: local('/font-rotate/Facade-7 Bold'), local('Facade-7-Bold'),
        url('/font-rotate/Facade-7-Bold.eot#iefix') format('embedded-opentype'),
        url('/font-rotate/Facade-7-Bold.woff2') format('woff2'),
        url('/font-rotate/Facade-7-Bold.woff') format('woff'),
        url('/font-rotate/Facade-7-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'BC Falster Grotesk RB';
    src: url('BCFalsterGroteskRB-Regular.eot');
    src: local('BC Falster Grotesk RB Regular'), local('BCFalsterGroteskRB-Regular'),
        url('BCFalsterGroteskRB-Regular.eot?#iefix') format('embedded-opentype'),
        url('BCFalsterGroteskRB-Regular.woff2') format('woff2'),
        url('BCFalsterGroteskRB-Regular.woff') format('woff'),
        url('BCFalsterGroteskRB-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*------font---------*/

body{
	font-family: 'BC Falster Grotesk RB';
	margin:0;
}

img{
	width: 100%;
}

#logo{
width: 10%;
}

h1, h2, h3, h4, h5, h6{
	text-transform: lowercase;
	font-family: 'Facade-7';
	font-weight: bold;
	margin-top:0;
	margin-left: 5%;
	color: blue;
}

h2{
	font-size: 2em;
}



/*------js---------*/

  .rotate p{
	padding: 10px 20px;
	background: tomato;
	margin-right: 10px;
	transform: rotate(40deg);
	transition: 0.2s ease-out;
  }
  .rotate p:hover {
	transform: rotate(0deg) !important;
  }

  /*------js---------*/

/* Typo titrage */
h1{
font-size: 2em;
}

p{
	font-size: 1.2em;
	width: 42%;
	margin-left: 15%;
	color: lightslategray;
}

p:hover {
	transform: rotate(0deg) !important;
	color: black;
	padding: 1%;
	background-color:white;
	z-index:43
	
  }

 /*------sommaire---------*/


.colonnes{
  
  font-size: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
  margin-left: 20%;
}

.colonnes ul{
  grid-column: span 1;
  display: grid;
  grid-template-rows: repeat(27, 1fr);
  padding: 0;
}

.colonnes li{
	list-style: none;
  grid-row: span 1;
}
.colonne{
	text-align: right;
	width: auto;
	margin-right: 5%;
	
}
 /*------sommaire---------*/
  /*------NAV---------*/
  #menu{
	  top: 0em;
	background-color: white;
    font-size: 1.2em;
	position: fixed;
	z-index: 99;
  }
.button{
	list-style-type: none;
}

.button a {
	font-size: 1em;
	list-style-type: none;
	text-decoration: none;
	color:blue;
}

#submenu{
	display: none;
}

#menu:hover #submenu{
	list-style-type: none;
	display: block;
}




/*------colonne texte---------*/


.colonnestxt{
  
	font-size: 10px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding: 0;
	margin-left: 20%;
  }
  
  .colonnestxt ul{
	grid-column: span 1;
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	padding: 0;
  }
  
  .colonnestxt li{
	  list-style: none;
	grid-row: span 1;
  }
  .colonnetxt{
	  width: auto;
  }

  li p {
	  font-size: 1.2em;
	  width: 70%;
  }
   /*------colonne texte---------*/


   /*------NAV---------*/

/* ajouter la classe .print pour n'afficher que les éléments à l'impression*/
.print{
	display:none;
}

/* ajouter la classe .screen pour n'afficher les éléments seulement à l'écran */
.screen{
	display:block;
}

/* ajouter la classe .center pour centrer un élément horizontalement sur la page */
.center, h1{
	text-align: center;
	margin:auto;
}

/* ajouter la classe .center-top pour centrer un élément verticalement sur la page */
.center-top, h1{
	margin-top: 50vh;
	transform: translateY(-100%);
}



@media print{

/* paramètres de la page, choisir le format d'export */
	@page{
		size: A5;
    padding: var(--page-margin);
	}

	body{
		margin:0;
		padding:0;
		/* permet d'ajouter un counter pour la pagination */
		counter-reset: page-counter;
	}
	/* paramètres de la page */
	.page{
		width: calc(var(--page-width) + 1);
		height: calc(calc(var(--page-height) - var(--page-margin) * 2) - 1mm);
		padding: var(--page-margin);
		page-break-after: always;
		position: relative;
	}

	/* affiche les éléments ayant la classe print */
	.print{
		display: block;
	}

	/* n'affiche pas les éléments ayant la classe screen */
	.screen{
		display: none;
	}

	/* exemple d'en-tête, toutes les pages avec la classe .introhearder auront le header "Les voyages de Capitaine Futur" */
	.introheader::before{
		content: ""; /*titre courant*/
	}

	/* ajoute la pagination aux pages */
  .page::after{
		counter-increment: page-counter;
		content:counter(page-counter);
		position: absolute;
		bottom: var(--page-footer-bottom);
	}

  /* pagination à gauche pour les pages paires */
	.page:nth-child(even)::after{
		left: var(--page-footer-margin);
	}

  /*pagination à droite pour les pages impaires */
  .page:nth-child(odd)::after{
    right: var(--page-footer-margin);
  }

	/* toutes les pages avec la class .nopagination n'ont pas de pagination */
	.page.nopagination::after{
		content:"";
	}

	/* ajouter une class plainimage pour avoir une image plein pot sur la page */
	img.plainimage{
	  width: calc(var(--page-width) - var(--page-margin) * 4);
		height: calc(var(--page-height)- var(--page-margin) * 4);
		margin: auto;
	  -o-object-fit: contain;
	  object-fit: contain;
	}


p{
	width: 95mm;
	margin-left: 20mm;
}

img{
	display: block;
}

#logo{
	margin-left: 55mm;
		width: 20mm;
}
.couv{
	position: relative;
	height: 100mm;

}
.img-couv{
position: absolute;
height: 200mm;
page-break-after: always;
z-index: 1;
}

.txt-couv {
	width: 120mm;
	mix-blend-mode: difference;
transform: rotate(-90deg);
	font-family: 'BC Falster Grotesk RB';
	font-weight: 900;
	text-align: left;
	
	padding-left: 80mm;
	position: absolute;
	z-index: 2;
	font-size: 7em;
}


h2,h3 {
   color: blue;
   text-transform: lowercase;
}

h1{
   text-transform: lowercase;
   color:teal;
   
}


/*------colonne texte print---------*/


.colonnestxt{
  
	font-size: 10px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	padding: 0;
	margin: 0;
	
  }
  
  .colonnestxt ul{
	grid-column: span 1;
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	padding: 0;
  }
  
  .colonnestxt li{
	list-style: none;
	grid-row: span 1;
  }
  
  

   /*------colonne texte print ---------*/


  li p{
	   margin-left: 10mm;
  }



	
}