/* custom page Ecologie */ 

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
/* font-family: 'Maven Pro', sans-serif; */

@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:300,400,500,600,700,800');
/* font-family: 'Montserrat Alternates', sans-serif; */

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
/* font-family: 'Montserrat', sans-serif; */

.brown-medium { color: #9b7362; }
.green-dark { color: #28a371; }
.bg-green { background-color: #2cb789; }
.green-light { color: #76e7b9; }
.bg-green-light { background-color: #76e7b9; }

body { 
	font-size: 16px; line-height: 22px;
	color: black;
	font-family: 'Maven Pro', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	cursor: default;
	background-image: 
		url('images/bg-flower-top-left.png'),
		url('images/bg-flower-top-right.png'),
		url('images/bg-petales-middle-left.png'),
		url('images/bg-flower-middle-right.png'),
		url('images/bg-flower-bottom-left.png'),
		url('images/bg-petales-bottom-right.png');
	background-position: 2% 0, 100% 2%, 5% 50%, 100% 70%, 0 85%, 90% 95%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
a { color: #28a371; text-decoration: none; } 
a:hover { text-decoration: underline; }
h1 { font-size: 52px; line-height: 55px; font-weight: 400; font-family: 'Montserrat', sans-serif; margin-top: 130px; margin-bottom: 0; }
h2 { font-size: 20px; line-height: 24px; font-weight: 400; font-family: 'Montserrat alternates', sans-serif; margin-top: 0; }
h3 { font-size: 28px; line-height: 30px; font-weight: 500; margin: 50px 0 10px 0; text-align: center; }
strong { font-weight: bold; }

.divider-line { 
	width: 50px; 
	height: 5px; 
	border-bottom: 5px solid #76e7b9; 
	margin: 40px auto; 
}
.clear { clear: both; }

#page {
	width: 100%;
    position: relative;
	margin: 0;
}

#content { 
	margin: 0 auto; 
	padding: 0 0 15px 0;
}

#titre { 
	margin: 30px auto; 
	padding: 30px;
	height: 335px;
	text-align: center;
	background-image: url('images/bg-macaron-mandala.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
#titre h1 { color: black; text-transform: uppercase; }
#titre h2 { color: black; text-align: center; }

#intro { 
	padding: 40px 0; 
}
#intro div { 
	max-width: 600px; 
	text-align: center; 
	color: white;
	font-size: 18px; line-height: 22px;
	background-image: 
		url('images/bg-intro-petales-left.png'),
		url('images/bg-intro-petale-right.png');
	background-position: 0 0, 100% 100%;
	background-repeat: no-repeat, no-repeat;
	margin: -80px auto; 
	padding: 80px 120px;
}
#intro p { margin-top: 0; }
#intro small { color: black; }

#presentation { max-width: 600px; margin: 50px auto; text-align: center; }
#presentation strong  { font-weight: 500; }

.content-text  { max-width: 700px; margin: 0 auto; padding: 0 15px; }
.content-text p { 
	margin-top: 0; 
	margin-bottom: 10px; 
}
.content-text p:last-child { margin-bottom: 0; }
.content-text strong { 
	font-weight: normal; 
	background-color: rgba(195,252,222,0.4); /* équivalent #c3fcde en plus pâle */
}

.citation { margin: 0; padding: 20px 0; }
.citation div { 
	width: 65%; 
	padding: 15px 0;  
	background-image: url('images/bg-frise-mandala.png');
	background-size: cover;
}
.citation .position-right { margin-left: 35%; text-align: left; }
.citation .position-left { margin-right: 35%; text-align: right; }
.citation blockquote { 
	font-size: 18px; 
	line-height: 22px; 
	font-style: italic; 
	color: black; 
	margin: 0 15px;
}

.citation .position-right blockquote { 
	background-image: url('images/guillemets-open.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	margin-left: -10px;
	padding-left: 60px;
}
.citation .position-left blockquote { 
	background-image: url('images/guillemets-close.png');
	background-position: 100% 0;
	background-repeat: no-repeat;
	margin-right: -10px;
	padding-right: 60px;
}
.citation small { color: #9b7362; font-style: normal; }

#links  { 
	margin-bottom: 30px; 
	display: flex;
    justify-content: center;
}
#links  .icon { 
	width: 60px; 
	height: 60px; 
	border-radius: 50%; 
	text-align: center; 
	margin: 10px;	
	background-color: #76e7b9;
}
#links  .icon:first-child { margin-left: 0; }
#links .icon:hover { background-color: #2cb789; }
#links  img { width: 100%; }

#question { max-width: 600px; margin: 50px auto 40px auto; text-align: center; }
#question strong { font-size: 26px; line-height: 30px; font-weight: 400; font-style: italic; /*margin: 10px 0; text-align: center; */}

#menu { 
	text-align: center; 
	border-top: 5px solid #76e7b9;
	padding-top: 20px;
}
#menu ul { padding: 0; margin: 0; }
#menu ul li { display: inline; padding: 0 5px; border-left: 1px solid black; }
#menu ul li:first-child { padding-left: 0; border-left: 0; }
#menu a { color: #9b7362 !important; text-decoration: none; }
#menu a:hover { text-decoration: underline; text-underline-position: under; }

#footer { padding: 20px; text-align: center; color: black; font-size: 14px; }

/* RESPONSIVE */
@media (max-width: 1000px) {
	body { 
		background-image: 
			url('images/bg-flower-top-left.png'),
			url('images/bg-flower-top-right.png'),
			url('images/bg-petales-middle-left.png'),
			url('images/bg-flower-middle-right.png'),
			url('images/bg-flower-bottom-left.png'),
			url('images/bg-petales-bottom-right.png');
		background-position: 2% 0, 100% 2%, -2% 50%, 100% 68%, 0 85%, 90% 95%;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;	
		background-size: 15%, 10%, 12%, 8%, 10%, 10%; 
	}
	#intro div { background-size: 10%, 10%; }
	.content-text  { max-width: 600px; }
}
@media (max-width: 800px) {
	body { 
		background-image: 
			url('images/bg-flower-top-left.png'),
			url('images/bg-flower-top-right.png'),
			url('images/bg-flower-bottom-left.png'),
			url('images/bg-petales-bottom-right.png');
		background-position: 2% 0, 100% 2%, 0 92%, 98% 95%;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;	
		background-size: 15%, 10%, 10%, 10%; 
	}
	#titre { background-size: 260px; }
	#titre h1 { font-size: 42px; line-height: 47px; }
	#titre h2 { font-size: 16px; line-height: 22px; }
	.citation div { width: 80%; }
	.citation .position-right { margin-left: 20%; }
	.citation .position-left { margin-right: 20%; }
}
@media (max-width: 600px) {
	#titre { margin: 0 auto; }
	#intro div { 
		background-size: 10%, 10%; 
		margin: -60px auto;
		padding: 40px 50px;
	}
	#presentation { margin: 30px auto; padding: 0 15px; }
	.divider-line { margin: 30px auto; }
}
@media (max-width: 480px) {
	body { 
		background-image: 
			url('images/bg-flower-top-left.png'),
			url('images/bg-flower-top-right.png'),
			url('images/bg-flower-bottom-left.png'),
			url('images/bg-petales-bottom-right.png');
		background-position: 20px 0, 100% 30px, 0 93%, 98% 96%;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;	
		background-size: 15%, 10%, 10%, 10%; 
	}
	#titre { 
		padding: 30px;
		height: 200px;
		background-size: 180px; 
	}
	#titre h1 { font-size: 28px; line-height: 35px; margin-top: 65px; }
	#titre h2 { padding: 0 30px; }
	h3 { font-size: 25px; line-height: 27px; }
	.citation div { width: 85%; }
	.citation .position-right { margin-left: 15%; }
	.citation .position-left { margin-right: 15%; }
	.citation blockquote { font-size: 17px; line-height: 20px; }
	#links .icon { width: 50px; height: 50px; margin: 5px; }
	#menu ul li { display: block; border-left: none; padding: 0 !important; }
}