body
{
	margin: auto;
	font-family: Arial, Verdana, "Trebuchet MS", Helvetica, "MS sans serif";
}

.corps
{
	width: 1000px;
	margin: auto;
	height: auto;
}

/* Header */

.header-top
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.logo-image
{
	flex: 1 1 1em;
	margin-top: 4px;
	margin-left: 10px;
}

.logo
{
	flex: 1 1 45em;
	margin-top: 4px;
	margin-left: 10px;
	color: rgb(0,100,150);
}

.logo a
{
	font-family: Impact, "Arial Black", Arial, Verdana, "Trebuchet MS";
	font-size: 2em;
	color: rgb(0,100,150);
	text-decoration: none;
}

.usp
{
	font-size: 1.1em;
	font-weight: normal;
}

.espace-membres
{
	flex: 1 1 6em;
	margin-top: 6px;
	margin-right: 10px;
	text-align: center;
}

.espace-membres a, .espace-membres .wyz
{
	color: rgb(0,0,0);
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}

.line-banner-top
{
	height: 1px;
	background: rgb(180,180,180);
}

.top-menu
{
	background-color: rgb(238,238,238);
	height: 50px;
}

.top-menu ul
{
	display: flex;
	flex-flow: row wrap;
	list-style-type:none;
	margin:0;
	padding:0;
}

.top-menu li
{
	flex: 1 1 5em;
}

.top-menu li a, .top-menu li .wyz
{
	display: inline-block;
	height: 48px;
	text-align: center;
	line-height: 22px;
	color: rgb(20,20,20);
	text-decoration: none;
	padding-left: 0.9em;
	padding-right: 0.9em;
	padding-top: 2px;
}

.top-menu li:hover a, .top-menu li:focus a, .top-menu li:active a, .top-menu li:hover .wyz, .top-menu li:focus .wyz, .top-menu li:active .wyz
{
	background: rgb(0,120,170);
	color: rgb(250,250,250);
	cursor: pointer;
}

/* Body of forms */

.fil-ariane
{
	margin-left: 10px;
	padding-top: 0.4em;
	font-size: 0.9em;
}

.fil-ariane a
{
	color: black;
	text-decoration: none;
}

.fil-ariane a:hover
{
    border-bottom: 1px solid rgb(0,0,0);
}

.justify
{
	text-align: justify;
	padding-left: 10px;
	padding-right: 10px;
}

.center
{
	text-align: center;
}

.form
{
	width: 820px;
	margin: auto;
	margin-top: 60px;
}

.form-box
{
	border: solid 1px rgb(220,220,220);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: rgb(245,245,245);
	padding-left: 30px;
	padding-right: 30px;
	color: rgb(20,20,20);
	margin-top: 20px;
	margin-bottom: 20px;
}

.wrapper
{
	display: flex;
	flex-flow: row wrap;
}

.text
{
	flex: 1 1 7em;
}

.field
{
	flex: 4 1 7em;
	font-size: 0.9em;
}

.text-field
{
	font-size: 0.9em;
	color: red;
}

.inputbox
{
	width: 305px;
}

.ecart
{
	border-spacing: 15px;
}

.g-recaptcha
{
	display: inline-block;
}

.submit-button
{
	font-size: 1em;
}

.alert
{
	font-size: 1.1em;
	font-weight: bold;
	color: rgb(255,0,0);
}

.alert-connected
{
	font-size: 1.1em;
}

.title
{
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

.title a
{
	color: rgb(0,100,150);
	text-decoration: none;
}

.title a:hover
{
	color: rgb(240,160,0);
	text-decoration: underline;
}

.article a
{
	color: rgb(0,100,150);
	text-decoration: none;
}

.article a:hover
{
	color: rgb(240,160,0);
	text-decoration: underline;
}

/* rigth side : boxes and menu  */

#right-side
{
	flex: 2 0 10em;
	margin-top: 20px;
}

.right-box
{
	border: solid 1px rgb(220,220,220);
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-color: rgb(245,245,245);
	padding-left: 10px;
	padding-right: 10px;
	color: rgb(20,20,20);
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.right-box a
{
	text-decoration: none;
}

.image-book
{
	width: 200px;
	height: auto;
}

.bouton-enroll-box
{
	margin : 0px 48px;

}

.bouton-enroll
{
	color: rgb(246,246,246);
	padding: 7px 20px 10px 20px;
	text-align: center;
	background-color: rgb(0,100,150);
	background: linear-gradient(rgb(0,170,220), rgb(0,70,120));
	border-radius: 4px;
}

.bouton-enroll:hover
{
	background-color: rgb(0,100,150);
	background: linear-gradient(rgb(0,150,200), rgb(0,50,100));
}

.bouton-enroll:active
{
	background-color: rgb(0,100,150);
	background: linear-gradient(rgb(0,150,200), rgb(0,50,100));
	box-shadow: 1px 1px 10px #191970 inset, 0 1px 0 rgba(255, 255, 255, 0.4);
}

.side-menu
{
	border: solid 1px rgb(220,220,220);
	background-color: rgb(245,245,245);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1em;
	color: rgb(20,20,20);
	margin-bottom: 20px;
	margin-top: 20px;
}

.side-menu a
{
	color: rgb(20,20,20);
	text-decoration: none;
}

.side-menu a:hover
{
	text-decoration: underline;
}

.side-menu ul
{
	padding-left: 12px;
	list-style-type: square;
}

.side-menu ul li
{
	margin: 4px 0px;
}

/* footer  */

#footer
{
	padding-top: 5px;
	padding-bottom: 40px;
	background: rgb(238,238,238);
}

.line-footer
{
	height: 1px;
	background: rgb(180,180,180);
	margin-top: 20px;
}

.line-footer-bottom
{
	height: 1px;
	background: rgb(180,180,180);
}

.small-title
{
	font-size: 0.9em;
	font-weight: bold;
}

#footer a, #footer li .wyz
{
	text-decoration: none;
	color: rgb(20,20,20);
	font-size: 0.9em;
}

#footer a:hover, #footer li .wyz:hover
{
	text-decoration: underline;
	cursor: pointer;
}

.block-footer
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.block-footer ul
{
	margin:0;
	padding:0;
}

.block-footer li
{
	flex: 1 1 5em;
	list-style-type:none;
}

/* responsive design  */

@media all and (max-width: 640px)
{
	.corps{ width: auto; }
	.logo{flex: 1 1 25em;}
	.logo a{ font-size: 1.8em; font-family: Arial, Verdana, "Trebuchet MS", Helvetica, "MS sans serif"; font-weight: bold;}
	.usp{ font-size: 0.9em; }
	.header-top :nth-child(2){order: 3;}
	.header-top :nth-child(3){order: 2;}
	.espace-membres{flex: 1 1 9em;}
	.espace-membres a{ font-size: 0.9em; font-weight: normal;}
	.line-banner-top{ display: none; }
	.top-menu{ height: auto; }
	.top-menu ul{ text-align: center; }
	.top-menu li{ flex: 1 1 14em;  }
	.top-menu li a{ display: block; font-size: 0.9em; height: 25px; line-height: 25px; margin: auto; }
	.form { width: auto; margin-left:10px; margin-right:10px;}
	.inputbox { width: 150px;}
	.field { flex: 8 1 5em;}
	#right-side{ flex: 1 1 100%; }
	.bouton-enroll-box{margin: 0px 50px;}
	#footer{ height: auto; }
	#footer a, #footer li .wyz{ font-size: 1em; }
	.footer-menu {margin-left: 10px;}
}

@media all and (max-width: 820px) and (min-width: 641px)
{
	.corps{ width: 641px; margin-left: auto; margin-right: auto; }
	.logo{flex: 1 1 25em;}
	.logo a{ font-size: 1.8em;}
	.usp{ font-size: 0.9em;}
	.espace-membres{flex: 1 1 8em;}
	.espace-membres a{ font-size: 0.9em; font-weight: normal;}
	.top-menu{ height: 64px; }
	.top-menu li a{ height: 62px; font-size: 0.9em; line-height: 20px; padding-top: 2px; padding-left: 4px; padding-right: 4px; }
	.form { width: 600px; }
	.text { flex: 1 1 8em; }
	.field { flex: 3 1 4em; }
	.inputbox { width: 260px;}
	#right-side{ flex: 1 1 100%; }
	.bouton-enroll-box{margin: 0px 170px;}
	#footer{ height: auto; }
	#footer a, #footer li .wyz{ font-size: 1em; }
}

@media all and (max-width: 999px) and (min-width: 821px)
{
	.corps{ width: 821px; margin-left: auto; margin-right: auto; }
	.logo{flex: 1 1 35em;}
	.espace-membres{flex: 1 1 7em;}
	.top-menu{ height: 50px; }
	.top-menu li a{ height: 48px; font-size:0.9em; padding-left: 6px; padding-right: 7px; }
	.form { width: 800px; margin: auto;	margin-top:60px;}
	#right-side{ flex: 1 0 10em; }
	.bouton-enroll-box{margin: 0px 10px;}
	#footer{ height: auto; }
	#footer a, #footer li .wyz{ font-size: 1em; }
}