/*FONTS*/
@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700|Merriweather:300,400,700');

/*FONTS*/
html{
	font-family: 'Merriweather Sans', sans-serif;
	scroll-behavior: smooth;
}
body{
	font-size:1.2rem;
	/*--violet:#5d4777;*/
	/*-cuivre:#E1A173;*/
	/*lightgrey:#d3d3d3;*/
}
section{
	width:100%;
}
h1{
	font-family: 'Merriweather', serif;
	font-weight:400;
	font-size: 3.2rem;
	color:#5d4777;

}
h2{
	font-family: 'Merriweather Sans', sans-serif;
	font-weight:700;
	font-size: 1.8rem;
	color:black;
}
a{
	text-decoration: none;
	transition: color 0.5s ease;
}
.grid{display: grid;}
.dark{background-color: #2c2c2c;}
.light{background-color:lightgrey;} /*#d3d3d3*/
.marge-gd{
	padding-left: 5%;
	padding-right: 5%;
}
section:after, header:after, footer:after {
    content: '';
    display: block;
   	clear: both;
} 

/*---------HEADER---------*/

/*Pour le menu burger voir le fichier menuburger.css*/
header{
	width:100%;
	padding-top: 4.5rem;
	padding-bottom: .2rem;
	position: fixed;
	z-index:100;
	top: 0;
	grid-template-columns: repeat(2,1fr);
}
.menu-langues{
	font-family: 'Merriweather', serif;
	font-weight: 700;
	text-decoration: none;
	color:white;
	font-size: 1.6rem;
	line-height: 3.2rem;
}
.menu-langues>a{
	font-family: 'Merriweather', serif;
	font-weight: 700;
	text-decoration: none;
	color:white;
	font-size: 1.6rem;
	line-height: 3.2rem;
}
.menu-langues>a>img{
	width:3rem;
}
.menu-langues>span{
	margin:0 1rem;
}
#logo{
	display: block;
	width: 21.5rem;
	float:left;
}
.lien-home{
	float:right;
	margin-right: 4rem;
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 300;
	text-decoration: none;
	color:white;
	font-size: 1.6rem;
	line-height: 3.2rem;
}
.lien-home:hover, .menu-langues>a:hover{
	color:#E1A173;
	transition:all 1.5s;
}

header>label{
	float:right;
	cursor: pointer;
}
ul#navlist>li>a, ul#navlist>li>span{
	font-family: 'Merriweather', serif;
	font-weight: 300;
	text-decoration: none;
	font-size: 3vh;
	line-height: 5vh;
	color:white;
	transition: all 2s;
}
ul#navlist>li>a:hover{color:#E1A173;}

/*---------FIN HEADER---------*/



/*---------FOOTER-------------*/

footer{
	height:6rem;
	padding-top: 1rem;
}
footer>span, footer>a{
	font-family: 'Merriweather Sans', sans-serif;
	font-weight:400;
	font-size: 1.6rem;
	line-height: 3.2rem;
	color:#444444;
}
#copyright, #divider1, #footer-mentions{
	text-align: left;
	float:left;
	margin-right:1%;
}
#footer-contact, #divider2, #footer-top{
	float:right;
	margin-left: 1%;
}
footer>a>img{	
	width:30px;
}
#footer-mentions:hover, #footer-contact:hover{
	color:#E1A173;
}
#footer-top>img{
	transform : translateY(0px);
	transition:all .5s;
}
#footer-top>img:hover{
	transform : translateY(-8px);
	transition:all .5s;
}

/*---------FIN FOOTER---------*/




/*------------------------------------------------------------------------*/
/*---------------------------PAGE ACCUEIL---------------------------------*/

.navaccueil{
	visibility:hidden;
}

#hero{
	height: 100vh;
	background: url("../img/backhome1.jpg") no-repeat bottom center;
	background-size: cover;
}
#hero>h1, #hero>p{
	width:30%;
	color:white;
	font-size: .1rem;
	opacity: 0;
}
#logo-base, #logo-base-en{
	width:25%;
	position:absolute;
	bottom:29.5%;
	left:35%;
}
.bottom-fix{
	position:fixed;
	width:100%;
	bottom:0;
}
.bottom-fix>a, .bottom-fix>span{
	color:lightgrey;
}

/*------------------------------------------------------------------------*/
/*-------------------------FIN PAGE ACCUEIL-------------------------------*/


/*------------------------------------------------------------------------*/
/*--------------------------INFOBULLES------------------------------------*/

.picto-item>img:hover{
	filter:brightness(.65);
}

/*------------------------------------------------------------------------*/
/*-------------------------FIN INFOBULLES---------------------------------*/


/*------------------------------------------------------------------------*/
/*--------------------------PAGE TRAVAUX GRAPHISME------------------------*/

#graphisme-section1{
	width:100%;
	height:70vh;
	background: url("../img/backgraphisme.jpg") no-repeat top right;
	background-size: cover;
}
#graphisme-section2{
	position:relative;
	z-index: 1;
	padding-top: 4rem;
}
#graphisme-section3{
	width:100%;
	height:10vh;
}
#graphisme-section3>p{
	font-size: .5rem;
	opacity:0;
}
/*-------------------------FIN PAGE TRAVAUX GRAPHISME---------------------*/
/*------------------------------------------------------------------------*/


/*------------------------------------------------------------------------*/
/*--------------------------PAGE TRAVAUX GRAVURE------------------------*/

#gravure-section1{
	width:100%;
	height: 70vh;
	background: url("../img/backgravure.jpg") no-repeat top center;
	background-size: cover;
}

#gravure-section2{
	position:relative;
	z-index: 1;
	padding-top: 4rem;
}
#gravure-section3{
	width:100%;
	height:10vh;
}
#gravure-section3>p{
	font-size: .5rem;
	opacity:0;
}
/*-------------------------FIN PAGE TRAVAUX GRAVURE---------------------*/
/*------------------------------------------------------------------------*/


/*------------------------------------------------------------------------*/
/*---------------------------PAGE CONTACT---------------------------------*/

#contact-section1{
	height: 70vh;
	background: url("../img/backcontact.jpg") no-repeat top center;
	background-size: cover;
}
#coordonnees{
	padding-top:4rem;
	width:100%;
	min-height:	calc(30vh - 6rem);
	background-color: rgba(255,255,255);
}
#coordonnees>h1{
	float:left;
	width:25%;
	}
#coordonnees>ul{
	float:left;
	width:75%;
	margin-top: 1rem;
}
#coordonnees>ul>li{
	float:left;
	list-style-type:none;
	text-decoration: none;
	font-family: sans-serif;
	color:#5d4777;
	font-size: 2.2rem;
	line-height: 3rem;
	margin-right: .5%;
}
#coordonnees>ul>li>a{
	color:#5d4777;
}
/*------------------------------------------------------------------------*/
/*-------------------------FIN PAGE CONTACT-------------------------------*/



/*--------------------PAGE A PROPOS---------------------*/
/*-------------------------------------------------------------------------*/
#apropos-section1:after{
	display: none;
}
#apropos-section1{
	width:100%;
	grid-template-columns: 5% auto 76rem 10% 5%;
	grid-template-rows: 65vh 35vh 60rem 30rem; 
}
#apropos-section1>div:first-child{
	width:100%;
	height:85vh;
	grid-row: 1/3;
	grid-column:1/6;
	background: url("../img/backapropos.jpg") no-repeat top right;
	background-size: cover;
}
#apropos-bio{
	grid-row: 2/3;
	grid-column:3/4;
	height: 65rem;
	background-color: white;
	padding:4rem 6rem ;
	z-index:10;
	line-height: 2.9rem;
}
#apropos-bio>h1{
	font-size:1.8rem;
	font-weight: 700;
}
#apropos-bio>h2{
	color:#5d4777;
	font-family: 'Merriweather', serif;
	font-size:1.8rem;
	font-weight: 300;
}
#apropos-bio>p{
	font-weight: 300;
	font-family: 'Merriweather Sans', serif;
	font-size:1.8rem;
}
#bio1{
	margin:3rem 0 3rem 0;
}
#bio2{
	font-style: italic;
}
#lignes-vertes{
	margin-top: 2rem;
	grid-row: 3/5;
	grid-column: 1/6;
	width:36rem;
}
#lignes{
	grid-row: 3/4;
	grid-column: 1/6;
	width:100%;
	height:60rem;
	background: url("../img/apropos-back-lignes.jpg") no-repeat top center;
	background-size: cover;
	opacity:.5;
	z-index: 2;
}
#apropos-section2{
	grid-template-columns: 5% auto minmax(40rem,80rem) 10% 5%;
	padding-top: 10rem;
	width:100%;
}
#quote-nanteuil{
	grid-column: 3/4;
	grid-row: 4/6; 
	margin-top: 10rem;
}
#quote-nanteuil>img{
	width:10rem;
}
#quote-nanteuil>p{
	padding-left: 11rem;
	font-family: 'Merriweather', serif;
	font-weight: 300;
	font-style: italic;
	font-size: 2rem;
	line-height: 3rem;
	color:#5d4777;
}
#quoique>span{
	font-size: 2.8rem;
	line-height: 4rem;
}
.marge-rem{
	margin-top: .25rem;
	margin-bottom: 2rem;
}
#quote-nanteuil>p>span{
	color:#a02b4f;
}
#quote-nanteuil>p:last-child{
	color:#5d4777;
	font-weight: 400;
	font-style: normal;
}
#quote-nanteuil>p:last-child>span{
	font-weight: 700;
	color:#5d4777;
}
#apropos-purple{
	margin-top: 20rem;
	background: url("../img/apropos-campin.jpg") no-repeat top center;
	background-size: cover;
	height: 80rem;
	padding-top: 20rem;
	padding-left: 15%;
}
#apropos-purple>a>p{
	font-family: 'Merriweather', serif;
	font-weight:400;
	font-style: italic;
	font-size: 4rem;
	color:white;
	margin-left: 3%;
}
#apropos-purple>a>p{
	opacity: 0;
	transition: all 1s;
}
#apropos-purple>a>img{
	width:10rem;
	transform: rotate(0deg);
	transition: all 1s ;
	opacity: .15;
	animation: 1s infinite alternate scintille;
}
#apropos-purple>a>img:hover{
	width:10rem;
	animation-play-state: paused;
	transform: rotate(90deg);
	opacity:1;
}
#apropos-purple>a>img:hover +p{
	opacity: .75;
	width:100%;
	transition: all 3s ;
}
#apropos-bottom{
	height: 50rem;
	padding-top: 10rem;
	padding-left: 15%;
}
#apropos-bottom>a>p{
	font-family: 'Merriweather', serif;
	font-weight:400;
	font-style: italic;
	font-size: 3rem;
	color:#a02b4f;
	margin-left: 1.75%;
}
#apropos-bottom>a>img{
	width:5rem;
}

@keyframes scintille {
  from { opacity: .25;}
  to { opacity: .75; }
}
/*-------------------------------------------------------------------------*/
/*-------------------------FIN PAGE A PROPOS-------------------------------*/




/*-----------------------------PAGE PROJETS--------------------------------*/
/*-------------------------------------------------------------------------*/

.projets-section1{
	width:100%;
	height:70vh;
}
.projets-section2{
	padding-top: 4rem;
	min-height: 30vh;
}
.projets-graphisme-section2{
	padding-top: 4rem;
	min-height: 20vh;
}
.projets-graphisme-section2>p{
	margin-top: 3rem;
	width:30%;
	font-family: 'Merriweather Sans', sans-serif;
	font-weight:300;
	font-size: 1.6rem;
	line-height: 2.2rem;
	color:black;
	/*uniquement pour les pages projets graphisme*/
}
.projets-section3{
	grid-template-columns: 25% 50% 25%;
	align-items:center;
}
.projets-section3>p{
	grid-column: 1/2;
	grid-row: 1/2;
	font-family: 'Merriweather Sans', sans-serif;
	font-weight:300;
	font-size: 1.6rem;
	line-height: 2.2rem;
	color:black;
	border-left: 2px solid gray;
	padding-left: 2rem;
	
	margin-right:20%;
}
.projets-section3>a{
	grid-column: 2/3;
	grid-row: 1/2;
}
.projets-section3>a>img{
	width:100%;
}

.projets-section3>div{
	grid-column: 3/4;
	grid-row: 1/2;
	border-right: 2px solid gray;
	padding-right: 2rem;
}
.projets-section3>div>p, .projets-section3>div>h2{
	text-align:right;
}
.projets-section3>div>h2{
	margin-bottom:1.5rem;
}
.projets-section3>div>p{
	font-family: 'Merriweather-sans', sans-serif;
	font-weight:300;
	font-style: italic;
	font-size: 1.6rem;
	color:black;
	line-height: 2.4rem;
}
.projets-gallery{
	display:grid;
	width:75%;
	grid-template-columns: repeat(3,1fr);
	grid-gap:2%;
	margin:7vh auto 7vh auto;
}
.projets-gallery>a>img{
	width:100%;
}
.projets-section5{
	width:100%;
	text-align:center;
	margin-bottom: 7vh;
}
.projets-section5>a>img{
	width:50px;
	transform : scale(1);
	transition:all .5s;
}
.projets-section5>a>img:hover{
	transform : scale(1.2);
	transition:all .5s;
}

#projets-gravure-garnier-hero{
	background: url("../img/projets-garnier-back.jpg") no-repeat center center;
	background-size: cover;
}
#projets-gravure-bolza-hero{
	background: url("../img/projets-bolza-back.jpg") no-repeat center center;
	background-size: cover;
}
#projets-gravure-campin-hero{
	background: url("../img/projets-campin-back.jpg") no-repeat center center;
	background-size: cover;
}
#projets-gravure-florence-hero{
	background: url("../img/projets-florence-back.jpg") no-repeat center center;
	background-size: cover;
}
#projets-gravure-monogramme-hero{
	background: url("../img/projets-monogramme-back.jpg") no-repeat center center;
	background-size: cover;
}
#projets-gravure-lempicka-hero{
	background: url("../img/projets-lempicka-back.jpg") no-repeat top center;
	background-size: cover;
}
#projets-graphisme-marianne-hero{
	background: url("../img/projets-marianne-back.jpg") no-repeat center center;
	background-size: cover;
}
#projets-graphisme-theatre-hero{
	background: url("../img/projets-theatre-back.jpg") no-repeat bottom center;
	background-size: cover;
}
#projets-graphisme-partitions-hero{
	background: url("../img/projets-partitions-back.jpg") no-repeat center center;
	background-size: cover;
}
#projets-graphisme-rameau-hero{
	background: url("../img/projets-rameau-back.jpg") no-repeat top center;
	background-size: cover;
}
#projets-graphisme-pologne-hero{
	background: url("../img/projets-pologne-back.jpg") no-repeat top center;
	background-size: cover;
}
#projets-graphisme-vitalis-hero{
	background: url("../img/projets-vitalis-back2.jpg") no-repeat center center;
	background-size: cover;
}



#projets-graphisme-rameau-title>p>a>strong{
	color:#5d4777;
}
#projets-graphisme-rameau-title>p>a:visited>strong{
	color:#E1A173;
}

/*------------------------------------------------------------------------*/
/*-------------------------FIN PAGE PROJETS-------------------------------*/


/*---------------------------PAGE CHAPEAUX--------------------------------*/
/*------------------------------------------------------------------------*/

#projets-graphisme-chapeaux-hero{
	background: url("../img/projets-chapeaux-back.jpg") no-repeat bottom center;
	background-size: cover;
}
#projets-graphisme-chapeaux-title{
	
}
#ancre-anim{
	height: 15vh;
}
#projets-graphisme-chapeaux-timbres{
	background: url("../img/projets-chapeaux-back-anim.jpg") top left;
}
#container-anim-timbres{
	width:100%;
	grid-template-columns: 40% 20% 40%;
	grid-template-rows: 10rem 10rem 1fr 10rem 10rem;
}
#container-anim-timbres>div>img{
	width:20rem;
	height: 30.8rem;
}
#anim-timbre-1{
	grid-column: 1/2;
	grid-row: 2/4;
	justify-self:end;
	width:20rem;
	height: 30.8rem;
	background-image: url("../anim/projets-chapeaux-back-timbre-cloche2.jpg");
	background-size: cover;
}
#anim-timbre-2{
	grid-column: 3/4;
	grid-row: 3/5;
	width:20rem;
	height: 30.8rem;
	background-image: url("../anim/projets-chapeaux-back-timbre-toque2.jpg");
	background-size: cover;
}
#projets-graphisme-chapeaux-carnet{
	margin-top:15vh;
	margin-bottom:15vh;
	text-align: center;
}
#projets-graphisme-chapeaux-carnet>img{
	width: 60%;
}

/*------------------------------------------------------------------------*/
/*-------------------------FIN PAGE CHAPEAUX------------------------------*/





/*---------------------------ARTICLE IBDA---------------------------------*/
/*------------------------------------------------------------------------*/
#presse-ibda-gal{
	margin-top: 100px;
	width:100%;
}
#presse-ibda-gal>h1, #presse-ibda-gal>p{
	opacity: 0
}
#presse-ibda-gal>div{
	width:100%;
}
#presse-ibda-gal>div>img{
	display: block;
	width:100%;
}
.pressehead{
	background-color: white;
}

/*------------------------------------------------------------------------*/
/*-------------------------FIN ARTICLE IBDA-------------------------------*/



/*---------------------------MENTIONS LEGALES-----------------------------*/
/*------------------------------------------------------------------------*/

#mentions-section1{
	width:60%;
	margin: 10vh 20% 10vh 20%;
}
#mentions-section1>h2{
	margin: 5% 0 1% 0;
}
#mentions-section1>p{
	font-size: 1.4rem;
	line-height: 2rem;
	padding-left: 5rem;
}

/*------------------------------------------------------------------------*/
/*-------------------------FIN MENTIONS LEGALES---------------------------*/



/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*--------------------------RESPONSIVE------------------------------------*/


@media (max-width: 1024px){
	/*PAGE ACCUEIL*/
	#logo-base, #logo-base-en{
		width:60%;
		left:20%;
		right:20%;
	}

	/*PAGE CONTACT*/
		#coordonnees>h1, #coordonnees>ul{
			width:100%;
	}

	/*PAGE PROJETS*/
		.projets-section2{
			height:20vh;
			margin-bottom: 5vh;
		}
		.projets-graphisme-section2>p{
			width:100%;
		}
		.projets-section2>h1{
			margin-bottom: 20vh;
		}

		.projets-section3{
			display:block;
		}
		.projets-section3>div{
			display: none;
		}
		.projets-section3>div>p, .projets-section3>div>h2{
			text-align:left;
		}
		.projets-section3>p{
			margin-right:0%;
		}
		.projets-section3>p, .projets-section3>div{
			margin-right:0%;
			border:none;
			padding-left:0;
			padding-right:0;
		}
		.projets-gallery{
			width:100%;
		}
		.projets-gallery>a>img{
			margin-top:10%;
		}
		
	/*PAGE TIMBRES*/
		#projets-graphisme-chapeaux-carnet>img{
			width: 100%;
		}
		
	/*PAGE A PROPOS*/
		#lignes-vertes{
			display: none;
		}
		#apropos-section1{
			width:100%;
			grid-template-columns: 4% 1% auto 1% 4%;
			grid-template-rows: 65vh 35vh 60rem 30rem; 
		}
		#apropos-purple>a>p{
			opacity: .75;
		}
}

@media (max-width: 960px){
	/*PAGE A PROPOS*/	
		#apropos-bio{
			line-height: 3rem;
			padding:5rem 5rem;
		}
		#apropos-bio>h1, #apropos-bio>h2{
			font-size:2rem;
		}
		#apropos-bio>p{
			font-size:2rem;
		}
		#bio1{
			margin:1rem 0 1rem 0;
		}
		#quote-nanteuil>p{
			padding-left: 7rem;
			font-size: 1.8rem;
			line-height: 3rem;
			
		}
		#quoique>span{
			font-size: 2.8rem;
			line-height: 3.6rem;
		}
	
	/*PAGE MENTIONS LEGALES*/
		#mentions-section1{
		width:90%;
		margin: 15vh 5% 10vh 5%;
		}	
}

@media (max-width: 700px){
	/*PAGE ACCUEIL*/
		.menu-langues{
			width:100%;
			margin-top: 10vh;
			text-align: right;
			
		}
		#logo-base, #logo-base-en{
			width:75%;
			left:12.5%;
			right:12.5%;
		}
		footer>span, #footer-contact{
			display: none;
		}

	/*PAGE PROJETS*/
		.projets-gallery{
				display:block;
				width:80%;
				margin-left:auto;
				margin-right:auto;
		}

	/*PAGE PROJETS CHAPEAUX*/
		#projets-graphisme-chapeaux-timbres{
			padding: 10rem;
		}
		#container-anim-timbres{
			display:block;
		}
		#container-anim-timbres>div{
			margin:auto;
		}
		#container-anim-timbres>div:first-child{
			display: block;
			margin-bottom: 10rem;
		}


	/*PAGE CONTACT*/
		#coordonnees{
			text-align:center;
		}
		#coordonnees>ul>li{
			width:100%;
		}
		#coordonnees>ul>li:nth-child(2), #coordonnees>ul>li:nth-child(4){
			display:none;
		}
		#graphisme-section1{
			width:100%;
			height:70vh;
			background: url("../img/backgraphismemobile.jpg") no-repeat top right;
			background-size: cover;
		}

	/*PAGE A PROPOS*/	
		#apropos-bio{
			line-height: 2.4rem;
			padding:2rem 2rem ;
			height: 75rem;
		}
		#apropos-bio>h1, #apropos-bio>h2{
			font-size:1.8rem;
		}
		#apropos-bio>p{
			font-size:1.6rem;
		}
		#bio1{
			margin:1rem 0 1rem 0;
		}
		#quote-nanteuil>img{
			width: 7rem;
		}
		#quote-nanteuil>p{
			padding-left: 5rem;
			font-size: 1.4rem;
			line-height: 2rem;
		}
		#quoique>span{
			font-size: 2rem;
			line-height: 2.8rem;
		}
		#apropos-purple>a>p{
			font-size: 2rem;
		}
		#apropos-bottom>a>p{
			font-size: 2.2rem;
}

@media (max-width: 360px){
		#apropos-bio{
			line-height: 2.4rem;
			padding:2rem 2rem ;
			height: 85rem;
		}
}