body{
	height: auto;
    width: 100%;
 	background-color: #fffaf0;
    }

    header{
    	width: 100%;
    	height: 200px;

    }

nav{
	width:auto; 
  	background: silver;
}

.navbar-brand{
	display: flex;
	margin-left: 5px;
	border: 1px solid black;
	font-size: 80%;
	background-image: linear-gradient(to right,#3300cc,#339966);
	padding: 3px;
}

.cure{
	color: red;
}

.code{
	color: gold;
}

.alliance{
	color: white;
}


.dropdown-toggle, .dropdown-item{
	color: #333366;
}


h3{
	text-align: center;
	justify-content: center;
	color: navy;
}


.presentation, .description, .blog, .lumiere, .boutique{
	height: 260px;
	width: 300px;
	border: 2px solid navy;	
	border-radius: 10px;
	margin-bottom: 10px;
	margin-top: 20px;
	box-shadow: 6px 6px 6px gray;
}

.img1{
	width: 80%;
	height: 40%;
}


.img2{
	width: 40%;
	height: 15%;
}
.presentation:hover, .description:hover,.blog:hover,.lumiere:hover, .boutique:hover{
	transform: scale(1.1);

}

.presentation:hover{
	background-image: linear-gradient(ivory,LavenderBlush);
}

.description:hover{
	background-image: linear-gradient(LavenderBlush, LightCyan);
}

.blog:hover{
	background-image: linear-gradient(LightCyan,lightYellow);
}

.lumiere:hover{
	background-image: linear-gradient(lightYellow, plum);
}

.boutique:hover{
  	background-image: linear-gradient(plum, ivory);

}

.row{
	justify-content: center;

}

article{
	width: 250px;
	height: 250px;
	justify-content: center;
	text-align: center;
}

.presentation{
	background: LavenderBlush; 
}

.description{
	background: LightCyan; 
}

.blog{
	background: LightYellow; 
}

.lumiere{
	background: plum; 
}


.boutique{
	background: ivory; 
  justify-content: center;
}


 footer div a{
	 	color: yellow;
	 }

footer div a:hover{
	color: red;
}


/*-------------animation du titre de la page-----------*/

 @import url('https://fonts.googleapis.com/css?family=Lobster+Two');
h1{
	font-family: "Lobster Two",cursive;
	text-align: center;
	justify-content: center;
	color: lavenderBlush;
	text-shadow: 2px 2px 4px black;
}
.element {
  height: 100px;
  width: 100%;
  margin: 0 auto;
  background-color: lavenderBlush;
  animation-name: stretch;
  animation-duration: 3.5s; 
  animation-timing-function: linear; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: 3;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(0.1);
    background-color: plum;
   
  }

  30%{
  	 background-color: LightCyan; 
  }

  60% {
    background-color: LightYellow;
  }

  90% {
  	background-color: LavenderBlush;
  }

  100% {
    transform: scale(1);
    background-color: LavenderBlush;
  }
}

/*----------de moyen à petit écran----------------------*/

@media all and ( max-width: 1023px){

	.banniere{
		width: 100%;
		height: 180px;
	}

.banniere_gauche,.banniere_droit{
	display: none;
	}

	nav{
		margin-top: -10px;
	}

footer{
	background: gray; 
	height:200px ;
	color: white;
	margin-top: 20%;
	text-align: center;
  padding-top: 10px;
}

 }

/*-----------------Grand écran---------------------------*/

@media all and ( min-width: 1024px) and  (max-width: 2000px){

	header{
		width: 100%;
		height: 200px;
		background: LavenderBlush;
	}



	.container-fluid{
		display: flex;
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.banniere_gauche, .banniere_droit{
		height: 180px;
		width: 100%;
	}

	.banniere{
		height: 180px;
		width: 100%;
	}

	nav{
		margin-top: -20px;
	}

footer{        
	background: gray; 
	height: 150px ;
	color: white;
	margin-top: 20%;
	text-align: center;
  padding-top: 10px;

	 }


}