/* RESPONSIVE *****************************************************/

@media only screen and (max-width: 376px) {
 	main{
 		width: 100vw;
 	}
 	
 	header{
		background-color: var(--noir);
		z-index: 10;
	}
	
 	article#intro{
		display: block;
		height: auto;
	}  
	
	article#intro div.gauche, article#intro div.droite {
    height: 40vh;
}

article#intro div.droite img{
	width: 20%;
}

	article#intro div.droite p{   
		font-size: 2.5rem;
		margin: 1.8rem 0  ;
	}

	article#intro div.droite nav > ul {
		font-size: 1rem;
		/*line-height: 2rem;*/
		margin: 0;
	}
	
	article#intro div.droite nav ul li a{
		padding: 0;
		margin: 0;
	}
	
/* Savoir-faire  *****************************************************/

	article#savoir-faire{
		display: block;
		margin: 0 auto;
		/*height: auto;
		width: 100vw;
		padding: 0*/
	} 
	
	article#savoir-faire .box-pictos {
  		display: block;
  		width: 100vw;
  		margin: 0 auto;
	}

	
	article#savoir-faire div.txt {
  		display: block;
  		width: 100vw;
  		margin: 2rem 0;
	} 		

	.anim-avance {
 		display: none;
	}

	article#savoir-faire div.txt p {

		padding: 1rem;
		margin-bottom: 1rem;
		font-size: .9rem;
		line-height: 1.1rem;
	}
	
	
	
/* booK *************************************/

	section#book {
	  display: block;
	  width: 90vw;
	}
	
	aside {
		padding: 1rem 0;
	}
	
	aside p{
		font-size: .9rem;
		line-height: 1.2rem;
		padding: 0;
		text-align: center;
	}
	
	aside nav.menu-book ul{
		margin: 1em  2rem;
		padding: 0;
	}
	
	article.masonry-book, article.masonry-book.logo {
	flex-basis: 75%;
	columns: 1;
	margin: 0 ;
	/*padding: 50px 0;*/
}

	article.grid-book, article.grid-web {
	display: block
	}

	.slide {
	  min-width: 100%;
	  flex-shrink: 1;
	}


	footer {
  		flex-direction: column;
  	}
  
	footer a {
    margin: .2rem 0;
	}
	
	.menu-liens {
    bottom: 165px;
    left: 0;
	}
}