html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Roboto', sans-serif;
}

html {
	background-color: #03979E;
	background-image: url("../img/colors.png");
}

header, div.sub_header {
	padding: 5px;
	background-color: #D5F3DF;
	max-width: 950px;
	margin: auto;
}

nav, footer {
	background-color: #003436;
	color: #03979E;
	max-width: 960px;
	margin: auto;
}

nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

nav .sub {
	position: relative;

}

nav p, nav a {
	font-size: 1.4rem;
	padding: 3px 10px;
}

nav a, nav .sub p {
	color: white;
	text-decoration: none;
}

nav .sub ul {
	list-style: none;
	position: absolute;
	top: 33px;
	left: 0;
	right: 0;
	background-color: #003436;
	z-index: 5000;
	box-shadow: 5px 5px 3px rgba(0,0,0,0.15), 3px 3px 1px rgba(0,0,0,0.15);
	display: none;
	font-size: 0.8em;
}

nav .sub.opened p {
	background-color: #83465E;
}

nav .sub.opened p:hover {
	color: #83465E;
	background-color: #003436;
}

nav .sub.opened ul {
	display: flex;
	flex-flow: column nowrap;
	gap: 5px;
}

nav .sub li {
	display: flex;
	flex-flow: row nowrap;
	justify-content: stretch;
}
nav .sub ul a {
	width: 100%;
	font-size: 1rem;
}

nav a:hover, nav .sub p:hover {
	background-color: #D5F3DF;
	color: #110306;
	cursor: pointer;
}

header {
	height: 200px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	border-bottom: 1px solid #003436;
	color: #003436;
	background-size: cover;
	background-position: center;
}

header h1 {
	text-align: center;
	font-family: 'Roboto Light', sans-serif;
	/*text-shadow: 5px 5px 3px rgba(0,0,0,0.15), 3px 3px 1px rgba(0,0,0,0.15);*/
	font-size: 3.4rem;
	color: #01676B;
	text-shadow:
			-2px -2px 3px rgba(0,0,0,0.1),
			-1px -1px 2px rgba(0,0,0,0.2),
			2px 2px 3px rgba(0,0,0,0.5),
			4px 4px 6px rgba(0,0,0,0.3)
	;
}

header p {
	font-family: 'Roboto Black', sans-serif;
	/*text-shadow: 5px 5px 3px rgba(0,0,0,0.15), 3px 3px 1px rgba(0,0,0,0.15);*/
	text-shadow:
			-2px -2px 3px rgba(0,0,0,0.1),
			-1px -1px 2px rgba(0,0,0,0.2),
			2px 2px 3px rgba(0,0,0,0.5),
			4px 4px 6px rgba(0,0,0,0.3)
;
	font-size: 1.6rem;
	color: #BC869B;
}

div.sub_header {
	font-family: 'Roboto Light', sans-serif;
	color: #003436;
}

article, .article, div.sub_header, footer {
	max-width: 910px;
	padding: 25px 30px 30px 20px;
	overflow: hidden;
}

article p,
article ul,
.article p,
.article ul,
div.sub_header p,
div.sub_header ul
{
	margin: 0 auto 20px auto;
	font-family: Gabriela,Serif;
}

article li,
.article li,
div.sub_header li {
	padding-left: 20px;
	list-style: none;
	font-family: Gabriela,Serif;
}

article li::before,
.article li::before,
div.sub_header li::before
{
	content: "•";
	color: #BC869B;
	display: inline-block;
	width: 1em;
	margin-left: -1em
}

article h2,
article h3,
.article h2,
.article h3,
div.sub_header h2,
div.sub_header h3
{
	margin: 0 auto 35px auto;
}

article h2,
.article h2,
div.sub_header h2
{
	border-bottom: 2px solid #BC869B;
	padding-bottom: 19px;
}

article, .article {
	border-bottom: 1px solid #83465E;
	margin: 15px auto;
	box-shadow: 15px 15px 7px rgba(0,0,0,0.15), 10px 10px 5px rgba(0,0,0,0.15);
	background-color: #D5F3DF;
	position: relative;
}

article h2, .article h2 {
	text-align: center;
	font-size: 1.8rem;
	font-family: 'Roboto Thin', sans-serif;
	color: #01676B;
}

article h3,.article h3 {
	text-align:left;
	font-size: 1.4rem;
	font-family:'Gabriela',sans-serif;
	color: #83465E;
}
article p, .article p {
	text-align: justify;
	padding: 3px 5px;
}

article q, .article q, div.sub_header q {
	font-size: 1.2rem;
	font-style: italic;
	text-align: justify;
}

article blockquote, .article blockquote, div.sub_header blockquote {
	font-size: 1.4rem;
	font-style: italic;
	text-align: justify;
}

article blockquote:before, .article blockquote:before, div.sub_header blockquote:before {
	content: "«";
	color: #01676B;
}

article blockquote:after, .article blockquote:after, div.sub_header blockquote:after {
	content: "»";
	color: #01676B;
}

article .author, .article .author, div.sub_header .author {
	text-align: right;
	font-size: 1rem;
	font-weight: bold;
	font-style: italic;
	color: #01676B;
}

article .ombrage, .article .ombrage, div.sub_header .ombrage {
	box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
	border-bottom: 1px solid #03979E;
	border-right: 1px solid #03979E;
	padding: 5px;
	margin: 15px auto;
}

img {
	box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
	border-bottom: 1px solid #03979E;
	border-right: 1px solid #03979E;
}

article b, .article b, div.sub_header b {
	color: #BC869B;
	font-weight: bold;
	font-family: Gabriela, Serif;
}

article i, .article i, div.sub_header i {
	font-style: italic;
	font-family: Gabriela, Serif;
}

article ul, .article ul, article ol, .article ol {
	padding-left: 20px;
	padding-right: 5px;
}

img.left-img {
	max-width: 300px;
	width: 100%;
	float: left;
	margin: 10px;
}

img.right-img {
	max-width: 300px;
	width: 100%;
	float: right;
	margin: 10px;
}

img.w-50 {
	max-width: 50px !important;
}

img.w-100 {
	max-width: 100px !important;
}

img.w-150 {
	max-width: 150px !important;
}

img.w-200 {
	max-width: 200px !important;
}

img.w-250 {
	max-width: 250px !important;
}

div.img-centered {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin-bottom: 15px;
}

div.img-centered > img {
	margin: 5px;
	max-width: 300px;
	width: 100%;
}

footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: stretch;
	padding-bottom: 50px;
}

footer ul {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

footer li {
	flex: 0 0 250px;
	border: 1px solid #03979E;
	padding: 10px;
	margin: 10px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: start;
}

footer p {
	text-align: center;
}

footer a {
	color: white;
	text-decoration: none;
	padding: 3px 10px;
}


.mobile_menu {
	height: 40px;
	width: 100%;
	background-color: #83465E;
	border-bottom: 2px solid #BC869B;
	padding: 5px;
	display: none;
}

.mobile_menu .open_mobile_menu {
	float: right;
	width: 40px;
	height: 40px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: stretch;
	cursor: context-menu;
}

.mobile_menu .open_mobile_menu.opened {
	flex-flow: row nowrap;
}

.mobile_menu .open_mobile_menu > div {
	height: 6px;
	width: 100%;
	background-color: white;
}

.mobile_menu .open_mobile_menu:hover > div {
	background-color: #e6c9d4;
}

.mobile_menu .open_mobile_menu.opened > div {
	width: 6px;
	height: 100%;
}

.left {
	text-align: left !important;
}

.right {
	text-align: right !important;
}

.center {
	text-align: center !important;
}

.justify {
	text-align: justify !important;
}

ul.more_space {
	margin-top: 15px;
	margin-bottom: 15px;
}

ul.more_space li {
	margin-top: 15px;
	margin-bottom: 15px;
}

form {
	display: flex;
	flex-flow: column nowrap;

}

form > div {
	display: flex;
	flex-flow: column nowrap;
	margin: 5px 0;
	align-items: stretch;
}

form label {
	color: #83465E;
}

form label.required:after {
	content: ' (requis)';
	color: #BC869B;
}

input, textarea {
	border: 2px solid #83465E;
	padding: 3px;
	border-radius: 3px;
}

textarea {
	resize: vertical;
}

input[type="submit"] {
	background-color: #83465E;
	color: white;
	font-weight: bold;
	box-shadow: 5px 5px 3px rgba(0,0,0,0.1);
	cursor: pointer;
}

input[type="submit"]:hover {
	background-color: #BC869B;
	color: #83465E;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}

form .error {
	color: red;
	font-style: italic;
}

form div.captcha {
	display: flex;
	flex-flow: column wrap;
	justify-content: stretch;
}

form div.captcha span {
	font-size: 2rem;
	color: #003436;
}

form div.captcha img {
	border: 2px solid #003436;
	width: 300px;
	height: 30px;
}

.centered_with_image {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
	gap: 10px;
}

.crenolib {
	display: block;
	text-align: center;
	background-color: #83465E;
	color: #ffffff;
	font-size: 15px;
	overflow: hidden;
	width: 315px;
	height: 50px;
	border-bottom-right-radius: none;
	border-bottom-left-radius: none;
	position: fixed;
	bottom: 0;
	right: 5px;
	z-index: 1000;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	line-height: 50px;
	box-shadow:
			-7px -7px 3px rgba(0,0,0,0.1),
			7px -7px 3px rgba(0,0,0,0.1),
			7px 7px 3px rgba(0,0,0,0.1),
			-7px 7px 3px rgba(0,0,0,0.1)
	;
}

@media screen  and (max-width: 960px) {
	body {
		position: relative;
	}

	header {
		margin-top: 50px;
	}

	header p {
		text-align: center;
	}

	.sub_header p,
	div p,
	div li
	{
		font-size: 1.1rem;
	}

	.mobile_menu {
		display: inline-block;
		box-shadow: 0 8px 4px rgba(0,0,0,0.15), 0 5px 2px rgba(0,0,0,0.2);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;
	}

	.centered_with_image {
		flex-flow: column nowrap;
	}

	nav {
		flex-flow: column nowrap;
		align-items: stretch;
		justify-content: start;
		padding: 10px 0;
		display: none;
	}

	nav div p {
		font-size: 1.4rem;
	}

	nav .sub ul {
		position: relative;
		top: 0;
		left: 25px;
		box-shadow: 0 0 0 #003436;
		width: 80%;
	}

	nav .sub ul a {
		font-size: 1.3rem;
	}

	nav.opened {
		top: 52px;
		bottom: 0;
		right: 0;
		left: 35px;
		/*width: 80%;*/
		z-index: 5000;
		position: fixed;
		display: flex;
		/*max-width: 300px;*/
		box-shadow: -15px 0 5px rgba(0,0,0,0.15), -10px 0 3px rgba(0,0,0,0.15);
		overflow: scroll;
	}
}

/* Rose : e6c9d4 */
/*.color-primary-0 { color: #E6C9D4 }	!* Main Primary color *!*/
/*.color-primary-1 { color: #FFFFFF }*/
/*.color-primary-2 { color: #F9F4F6 }*/
/*.color-primary-3 { color: #BC869B }*/
/*.color-primary-4 { color: #83465E }*/


/* Vert bleu : 03989e */
/*.color-primary-0 { color: #03979E }	!* Main Primary color *!*/
/*.color-primary-1 { color: #73D5DA }*/
/*.color-primary-2 { color: #32AEB4 }*/
/*.color-primary-3 { color: #01676B }*/
/*.color-primary-4 { color: #003436 }*/


/* Vert : 9ed4b1 */
/*.color-primary-0 { color: #9ED4B0 }	!* Main Primary color *!*/
/*.color-primary-1 { color: #FFFFFF }*/
/*.color-primary-2 { color: #D5F3DF }*/
/*.color-primary-3 { color: #5DA274 }*/
/*.color-primary-4 { color: #246239 }*/