/* PrePostPrint only css framework */


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

}

nav{
  padding: 100px;
  margin-top: 0;
  padding-top: 5px;
  padding-left: 13px;

}

nav a{
  text-decoration: none;
}

nav ul{
   list-style-type: none;

}

.colonnes{
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 100px;
  margin: 0;
  line-height: 1.6rem;
  padding-top:0;
}

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

.colonnes li{
  grid-row: span 1;
}


body{
	font-family: 'TradeGothic';
  /* src:url("font/TradeGothicLTPro.otf"); */
  font-style: normal;
	margin:0;
}


.logo{
	width: 200px;
	position: fixed;
  margin-left:33px;
  z-index: 99;
}

figure{
  position: absolute;
  margin: 0;
}

img{
	width: 100%;
}

figcaption{
  /*margin-top: -100px;
  */
padding-bottom:0px;
}

h1, h3, h4, h6{
	margin-top:0;
	margin-left: 5%;
	font-family: 'Facade';
  /* src:url("font/Facade-7-Regular.otf"); */
	text-transform: lowercase;
	font-weight: normal;
	font-style: normal;
}

h2{
  margin-top:2%;
	margin-left: 5%;
	font-family: 'Facade';
  /* src:url("font/Facade-7-Regular.otf"); */
	text-transform: lowercase;
	font-weight: normal;
	font-style: normal;
  font-size:40px;
}

/* "menu" */
h5{
	font-family: Facade-7;
  src:url("font/Facade-7-Regular.otf");
  font-size:40px;
  text-transform: lowercase;
  font-weight: normal;
	font-style: normal;
  padding-left: 40px;
  margin-bottom:7px;
}

h5:hover{
  font-style: italic;
	color:black;
}


h1:hover{
  font-style: italic;
	color:black;
  font-size:100px;

}

h2:hover{
	font-style: italic;
	color:black;
  font-size:90px;
}

h3:hover{
	font-style: italic;
	color:black;

}

/* Typo titrage */


p{
	width: 35%;
	margin-left: 250px;
}

a{
	color: black;
  text-decoration: none;
}

a:hover{
  font-style:italic;
}


/*TYPO VARIABLE*/

@font-face {
  src: url("font/Facade-6GX.ttf");
  format("truetype");
  font-family: "Facade-6GX";
}

h6{
  font-weight: normal;
	font-family: Facade-6GX;
	font-variation-settings:"wght" 10;
	font-size: 130px;
}

#titrePoliceVariable{
  width: 200px;
	position: fixed;
  margin-left:33px;
  z-index: 99;
}


/* 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{
	text-align: center;
	margin: auto;
}

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



/*école supérieure d'art et de design d'orléans*/

.entete{
  margin-left:200px;
  padding-bottom:1Opx;
  padding-top:10px;
  width:60%;
  padding-left:60px;
}


.etablissement{
  margin-bottom:10%;
}

/*images holder en NB et couleur*/

.couleur{
  z-index: 1;
}

.NB{
  opacity:100%;
  z-index: -1;
}

.NB:hover{
  opacity:0%;
}

.couleur:hover{
  opacity:100%;
}

.image{
  width: 400px;
  height: 300px;
  position: relative;
  margin-left: 250px;
}

.imagelongue{
  width: 400px;
  height: 570px;
  position: relative;
  margin-left: 250px;
}

.imagecarree{
  width: 400px;
  height: 400px;
  position: relative;
  margin-left: 250px;
}


@media print{

/* paramètres de la page, choisir le format d'export */
	@page{
		size: A4;
    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: "";
	}*/

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

	.int{
		display:block;
    size:5%;
	}

  .logo{
    display:none;
  }

  #titrePoliceVariable{
  width: 200px;
	position: relative;
  margin-left:33px;
  z-index: 99;
}




  /* texte collé */
  .paragraphe{
    font-size: 0;
    margin: 0;
    padding: 0;
  }

	.paragraphe span{
    font-size: 24px;
    font-style: normal;
	}

  /*sert pour les span qui ont la class="ouvre"*/
    .ouvert span{
    visibility:visible !important;
      /*color: rgb(130,130,130);*/
  }

  /*sert pour les <p> qui ont la class="espace" MALARME*/
  .ouvert{
    visibility:hidden;
  }

  /*Figure{
    border: 1px solid;
  }*/

  .screenimage{
    visibility : hidden;
  }
  figure{
    border: 1px solid;
    padding: 0;

  }

  .printimage{
    visibility: visible;
    font-style: italic;
    font-size: 15px;
    margin: 0;
    padding-left: 0;

  }
  .couverture{
    margin-top:75%;
    margin-left:65%;
    padding: 5%;
    width: 30%;
  }
  .txcouv{
    margin-left:28%;
    margin-bottom: 65%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg)
  }

 p{
	width: 35%;
	margin-left: 15%;
}

 }

  .entete{
  margin-left:150px;
  top:0px;

}