/**
 * 2h
 * 3/4 d'heure (formulaire)
 * 1h
  * 20mn
 */

body {
	margin: 0;
	padding: 0;
	font-family: arial;
	margin-bottom: 120px;
}

header, header > a {
	display : flex;
	justify-content: center;
	align-items: center;
	background-color: #579c87; /* Vert background */
	font-family: arial;
	flex-direction: column;
	padding: 20px 0 20px 0;	
}


a {
	text-decoration: none;
}

.imgLogo {
	max-width: 30%;
}

.menuContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

/**
 * Global pour tous les menus
 */
.menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 2% 2% 2% 2%;
	padding: 2%;
	height: 400px;
	width: 300px;
	font-size: 1.4em;
	box-shadow: 0px 0px 15px lightgrey;
}


.menu > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 5%;
}
.menu a {
	font-size: 2em;
}

/* Animation au survol */
.menuContent {
	transition: all 0.5s;
}

.menu:hover > .menuContent {
	transform: scale(1.20);
	transition: all 0.5s;
	opacity: 0.8;
}


/** 
 * Spécifique à chaque menu
 */

/** Menu 1 **/ 

.content1 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content1 > i {
	background: -webkit-gradient(linear, left bottom, right top, from(#f04a5e), to(#f78f6a));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.menu1 {
	background-color: #fcdfdb;
	color: #3c1218;
	font-family: 'Kalam', cursive;
}
.menu1 a {
	font-family: 'Kalam', cursive;
	font-style: italic;
	color: #3c1218
}

.bgColorMenu1 {
	background-color: #3c1218;
}

.bgColorMenu2-1 {
	background-color: #c67412;
}

.bgColorMenu2-2 {
	background-color: #a56799;
}

.bgColorMenu2-3 {
	background-color: #6e4ccc;
}

.colorMenu2-1 {
	color: #c67412;
}

.colorMenu2-2 {
	color: #a56799;
}

.colorMenu2-3 {
	color: #6e4ccc;
}

.bgColorMenu3-1 {
	background-color: #0228dd;
}

.bgColorMenu3-2 {
	background-color: #0670f3;
}

.bgColorMenu3-3 {
	background-color: #229df9;
}

.bgColorMenu4-1 {
	 background-image: linear-gradient(to right, #41963c, #bafc7d);
}

.bgColorMenu4-2 {
	 background-image: linear-gradient(to right, #bafc7d, #41963c);
}

/** Menu 2 **/
.menu2 {
	background-color: #fff5fe;
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;	
}

.menu2 a {
	color: #c77412;
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

.content2 {
	background: -webkit-gradient(linear, left bottom, right top, from(#c77412), to(#905bfd));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/** Menu 3 **/
.menu3 {
	background-color: #f9f9f9;
	font-family: Niconne;		
}

.menu3 a {
	color: #0887fb;
	font-family: Niconne;	
}

.content3 {
	background: -webkit-gradient(linear, left bottom, right top, from(#0431df), to(#0887fb));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/** Menu 4 **/
.menu4 {
	background-color: #fdfffd;
	font-family: 'Parisienne', cursive;
}

.menu4 a {
	color: #72bf56;
	font-family: 'Parisienne', cursive;
}

.content4 {
	background: -webkit-gradient(linear, left bottom, right top, from(#3d9339), to(#d9fdb8));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/**
 * Boutons
 */
.buttonStyle {
	width: 150px;
	height: 40px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #579c87;
	border-radius: 5px;
	color: #fdcb46;
	padding: 5px 20px 5px 20px;
	font-size: 1.3em;
	margin: auto;
	font-weight: bold;
}



/**
 * Animations
 */

.buttonStyle > i {
	display: none;
}

.buttonStyle:hover > span {
	display: none;;
}

.buttonStyle:hover > i{
	display: block;
}

.buttonStyle:hover > .fadeLoop {	
  	animation: fadeloopAnimation 1.3s infinite;
  	animation-delay: 0s;
}

.buttonStyle:hover > .fadeLoop1 {	
  	animation: fadeloopAnimation 1.3s infinite;
  	animation-delay: 0.2s;
}

.buttonStyle:hover > .fadeLoop2 {	
  	animation: fadeloopAnimation 1.3s infinite;
  	animation-delay: 0.4s;
}



@keyframes fadeloopAnimation {
	0% {
    	opacity: 1;
  	}
  	
  	50% {
  		opacity: 0;
  	}
  	
  	100% {
  		opacity: 1;
  	}
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}



.soulignement {
  text-decoration: none;  
  transition: background-size .5s;
}

.soulignementMenu1 {
	background: linear-gradient(to top, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.5) 10%, transparent 10.01%) no-repeat left bottom / 0 100%;/**/
}

.soulignementMenu2 {
	background: linear-gradient(to top, rgba(190, 150, 190, 0.5) 0%, rgba(190, 150, 190, 0.5) 10%, transparent 10.01%) no-repeat left bottom / 0 100%;/**/
}

.soulignementMenu3 {
	background: linear-gradient(to top, rgba(6, 110, 240, 0.5) 0%, rgba(6, 110, 240, 0.5) 10%, transparent 10.01%) no-repeat left bottom / 0 100%;/**/
}

.soulignementMenu4 {
	background: linear-gradient(to top, rgba(160, 230, 110, 0.5) 0%, rgba(160, 230, 110, 0.5) 10%, transparent 10.01%) no-repeat left bottom / 0 100%;/**/
}

.soulignement:hover {
  background-size: 100% 100%;
}




/**
 * Détail d'un menu.
 */
.sectionMenu {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 40px auto 40px auto;
}


.detailMenu {
	width: 90%;
	box-shadow: 0px 0px 15px lightgrey;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 30px;
}


.menu4 {
	font-size: x-large;
}

.menu4 .detailMenuPrix {
	font-size: smaller;
}

.detailMenuTitre {
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}

.detailMenuTitre > h3 {
	font-weight: normal;
}

.trait {
	height: 3px;
	width: 30%;
}

.detailMenuContenuGlobal {
	width:80%;
}
.detailMenuContenuGlobal > div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.detailMenuContenu {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	font-style: italic;
}

.detailMenuPrix {
	font-weight: bold;
	width: 20%;
	display: flex;
	justify-content: flex-end;
}

.endDetailMenu {
	display: flex;
	flex-direction: row;
}
.endDetailMenu > i {
	padding: 10px;
}


/**
 * Mentions légales
 */
.mention {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: 120px;
}

.mention > p {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 80%;
}


/** 
 * Footer
 */
footer {
	display : flex;
	justify-content: space-around;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #579c87; /* Vert background */	
}

footer a {
	color: #fdcb46;
	margin: 30px;
	font-weight: bold;
}
footer p:hover {
  	animation: wiggle 0.3s infinite;
}


/**
 * Responsive
 */
@media only screen and (max-device-width:480px) {
	
	footer a {
		margin : 0px;
		font-size: smaller;
	}
	
	body {
		font-size: x-large;
	}

	h1 {
		font-size: smaller;
	}


	.buttonStyle {
		width: 200px;
	}

	.imgLogo {
		max-width: 60%;
		height: auto;
	}
	
	.sectionMenu {
		width: 80%;
		margin: 10px auto 10px auto;
	}
	
	.detailMenu {
		width: 100%;
		padding: 10px;
	}
	
	.content1,
	.content2,
	.content3,
	.content4 {
		text-align: center;
	}
	
}