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

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

.corps a
{
	text-decoration: none;
}

.article h1
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(240,160,0);
	font-size: 2.9em;
	text-align: center;
	margin: 0;
	padding: 0.5em 0.5em 0 0.5em;
}

.article h2
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(0,150,200);
	font-size: 2.6em;
	text-align: center;
	margin: 0;
	padding: 0.3em 0.5em 0 0.5em;
}

.article h3
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(240,160,0);
	font-size: 1.5em;
	text-align: center;
	margin: 0;
	padding: 0.5em;
}

.book-presentation
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.book-image
{
	flex: 1 1 1em;
	padding-left: 0.5em;
	margin-top: 1.4em;
}

.book-text
{
	flex: 1 1 10em;
	font-size: 1.3em;
	padding-right: 1.5em;
}

/* Form */

.inputbox
{
	width: 300px;
}

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

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

.text-field
{
	font-weight: bold;
	color: red;
}

.form-text
{
	font-size: 1.3em;
	text-align: center;
}

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

.center
{
	text-align: center;
}

.confidentiality
{
	padding: 0 1.5em;
	text-align: justify;
}

.footer
{
	padding: 0 0.2em; 
	text-align: center;
	color: rgb(40,40,40);
	margin-top: 40px;
}

.footer a
{
	color: rgb(102,102,153);
	text-decoration: none;
}

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

/* thank you part of the page after the ebook is sent : Header + texte + Footer */

.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
{
	color: rgb(0,0,0);
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
}

.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
{
	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
{
	background: rgb(0,120,170);
	color: rgb(250,250,250);
}

.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;
}

#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
{
	text-decoration: none;
	color: rgb(20,20,20);
	font-size: 0.9em;
}

#footer a:hover
{
	text-decoration: underline;
}

.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;}
	.article h1 {font-size: 1.8em;}
	.article h2 {font-size: 1.4em;}
	.article h3 {font-size: 1.1em;}
	.book-image	{flex: 1 1 30em; padding: 1em; text-align: center;}
	.book-image img {width: 250px; height: auto;}
	.book-text, .form-text {flex: 1 1 1em; font-size: 1em; padding: 0 1.5em;}
	.footer {padding: 0 0.4em;}
}

@media all and (max-width: 820px) and (min-width: 641px)
{
	.corps {width: 641px; margin-left: auto; margin-right: auto;}
	.article h1 {font-size: 1.85em;}
	.article h2 {font-size: 1.6em;}
	.article h3 {font-size: 1.2em;}
	.book-image {padding-top: 1em;}
	.book-text, .form-text {font-size: 1em; padding: 0 1.5em;}
	.footer {padding: 0 0.4em;}
}

@media all and (max-width: 999px) and (min-width: 821px)
{
	.corps {width: 821px; margin-left: auto; margin-right: auto;}
	.article h1 {font-size: 2.4em;}
	.article h2 {font-size: 2.1em;}
	.article h3 {font-size: 1.4em;}
	.book-text, .form-text {font-size: 1.2em; padding: 0 1.5em;}
	.footer {padding: 0 0.4em;}
}