/* FEUILLE DE STYLE POUR MOBILE ET TABLETTE */

@media all and (max-width : 640px) {
html, body, p, ul, form {
	margin: 0;
	padding: 0;
}

html {
	width: auto;
	margin: 0;
	padding: 0;
	font-size:62.5%;
	font-size:calc(1em * .625);
}

@font-face {
	font-family: arsenal-regular-webfont;
		src: url("polices/arsenal-regular-webfont.woff2") format("woff2"),
		url("polices/arsenal-regular-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}


body {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: justify;
	font-size: 2rem;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	line-height: 2.5rem;
	color: #28323B;
	background-color: #fff;
}


a {
	text-decoration: none;
}
a:link, a:active {
	padding: 3px 0;
	text-decoration: underline;
	color: #28323B;
}
a:hover, a:focus {
	padding: 3px 0;
	color: #ED7F10;
	text-decoration: none;
}

img {
	border: none;
}

ul {
	list-style: none;
}

.asteris {
	font-style: italic;
	font-size: 1.2rem;
}

.citation {
	font-style: italic;
}

.retourHaut {
	display: inline;
}



/* BANDE 1 */
#header {
	text-align: center;
}
h1 {
	margin: 0 auto 3rem;
	padding: 1.5rem 0 0 0;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 5rem;
	text-align: center;
	line-height: 6rem;
	font-weight: normal;
	color: fff;
}

.imgBio {
	display: block;
	max-width: 95%;
	margin: 0 auto; 
	border: 1px solid #191919;
	border-radius: 5px;
	box-shadow: 2px 2px 3px #191919;
}
/* FIN BANDE 1 (menu) _clair_ */


#main {
	max-width: 95%;
	margin: 0 auto; 
	padding: 0;
}
#main li {
	font-style: italic;
}
#main li:before {
	content: "\003E \0020";
}

h2 {
	margin: 6rem 0 1rem;
	padding: 0 3rem 1rem 0;
	text-align: left;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 4rem;
	line-height: 4rem;
	font-weight: normal;
	color: #303D45;
	border: none;
}



/* FOOTER */
#footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 1rem 2rem;
	background-color: #303D45;
	color: #fff;
}

#footer a {
	margin-bottom: 2rem;
	color: #fff;
	border: none;
	text-decoration: none;
}

#footer nav {
	width: 90%;
	margin: auto;
	font-weight: normal;
	padding: 1.5rem 0;
}

nav a {
	display: block;
	text-align: center;
	font-size: 1.7rem;
	margin-bottom: 2rem;
}




.element1 {
	padding: 3rem 0 1rem;
}

.element2 {
	order: -1;
	text-align: center;
}

.element3 {
	margin-top: 2rem;
	text-align: center;
}


form {
	margin: auto;
	padding-bottom: 2rem;
}

input[type="text"], input[type="email"]{
	min-width: 95%;
	margin: 0.5rem auto;
	padding: 0.8rem;
	font-size: 80%;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	border: 2px solid #303D45;
	border-radius: 5px;
}
input[type="text"]:focus, input[type="email"]:focus {
	border: 2px solid #ED7F10;
}

input[type="submit"] {
	margin: 2rem 0 1rem;
	padding: 1.5rem 2rem;
	font-size: 1.8rem;
	color: #fff;
	background-color: #303D45;
	border: 1px solid grey;
	transition-property: color, border-color;
	transition-duration: 260ms;
}
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
	color: #ED7F10;
	border-color: #ED7F10;
}


textarea {
	min-width: 95%;
	height: 15rem;
	margin: 0.5rem auto;
	padding: 0.8rem;
	font-size: 80%;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	border: 2px solid #fff;
	border-radius: 5px;
}
textarea:focus {
	border: 2px solid #ED7F10;
	border-radius: 5px;
}
/* FIN FOOTER */	
}




/* FEUILLE DE STYLE POUR ORDI */
@media all and (min-width: 641px) and (max-width: 1366px) {
body, html, p, form, ul {
	margin: 0;
	padding: 0;
}


html {
	box-sizing: border-box;
	display: flex; 
	/*flex-direction: column;*/
	font-size:62.5%;
	font-size:calc(1em * .625);
}

@font-face {
	font-family: arsenal-regular-webfont;
		src: url("polices/arsenal-regular-webfont.woff2") format("woff2"),
		url("polices/arsenal-regular-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}


body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-align: justify;
	margin: 0;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 2rem;
	line-height: 2.5rem;
	color: #28323B;
	background-color: #fff;
}


a {
	padding: 3px 0;
	text-decoration: underline;
	color: #28323B;
	transition-property: color, text-decoration;
	transition-duration: 260ms;
}
a:hover, a:focus {
	padding: 3px 0;
	color: #ED7F10;
	text-decoration: none;
}


img {
	border: none;
}

ul {
	list-style: none;
}

.asteris {
	font-style: italic;
	font-size: 1.2rem;
}

.citation {
	font-style: italic;
}

.retourHaut {
	display: none;
}

.retourHaut {
	display: none;
}





/* BANDE 1 */
#header {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 1rem 3rem;
}
.bloc1 {
	flex: 1;
	padding-bottom: 1rem;
	background-color: #303D45;
	color: #fff;
}
h1 {
	margin: 0 auto;
	padding: 1.5rem 0 0 0;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 6rem;
	text-align: center;
	line-height: 8rem;
	font-weight: normal;
	color: fff;
}

.imgBio {
	display: block;
	max-width: 100%;
	margin: 0; 
	border: 1px solid #191919;
	border-radius: 5px;
	box-shadow: 2px 2px 3px #191919;
}
/* FIN BANDE 1 */



#main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 80%;
	margin: 0 auto;
}
#main li {
	font-style: italic;
}
#main li:before {
	content: "\003E \0020";
}


h2 {
	margin: 6rem 0 1rem;
	padding: 0 3rem 1rem 0;
	text-align: left;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 4rem;
	font-weight: normal;
	color: #303D45;
	border: none;
	transition-property: color;
	transition-duration: 500ms;
}
h2:before {
	content: "\0023 \0020";
}
h2:hover {
	color: #ED7F10;
}


/* FOOTER */
#footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 7rem 1rem 2rem;
	background-color: #303D45;
	color: #fff;
}

#footer nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#footer a {
	margin-bottom: 2rem;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #303D45;
	transition-property: color, border-color;
	transition-duration: 260ms;
}

#footer a:hover, #footer a:focus {
	color: #ED7F10;
	border-color: #ED7F10;
}


.element1 {
	flex:1;
}

.element2 {
	flex:2;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	text-align: center;
}

.element3 {
	flex:1;
	text-align: center;
}


form {
	margin: auto 1rem;
}

input[type="text"], input[type="email"]{
	min-width: 90%;
	margin: 0.5rem auto;
	padding: 0.8rem;
	font-size: 80%;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	border: 2px solid #fff;
	border-radius: 5px;
}
input[type="text"]:focus, input[type="email"]:focus {
	border: 2px solid #ED7F10;
	border-radius: 5px;
}

input[type="submit"] {
	margin: 2rem 0 1rem;
	padding: 0 1rem 1.6rem 1rem;
	font-size: 1.8rem;
	color: #fff;
	background-color: #303D45;
	border: none;
	border-bottom: 1px solid grey;
	transition-property: padding, color, border-color;
	transition-duration: 260ms;
}
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
	padding: 0 2.5rem 1.6rem 2.5rem;
	color: #ED7F10;
	border-color: #ED7F10;
}


textarea {
	min-width: 90%;
	height: 15rem;
	margin: 0.5rem auto;
	padding: 0.8rem;
	font-size: 80%;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	border: 2px solid #fff;
	border-radius: 5px;
}
textarea:focus {
	border: 2px solid #ED7F10;
	border-radius: 5px;
}
/* FIN FOOTER */	
}



@media all and (min-width : 1367px) {
body, html, p, form, ul {
	margin: 0;
	padding: 0;
}


html {
	box-sizing: border-box;
	display: flex; 
	/*flex-direction: column;*/
	font-size:62.5%;
	font-size:calc(1em * .625);
}

@font-face {
	font-family: arsenal-regular-webfont;
		src: url("polices/arsenal-regular-webfont.woff2") format("woff2"),
		url("polices/arsenal-regular-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}


body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-align: justify;
	width: 80%;
	margin: 0 auto;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 2rem;
	line-height: 2.5rem;
	color: #28323B;
	background-color: #fff;
	border-left: 1px solid #eeedf2;
	border-right: 1px solid #eeedf2;
}


a {
	padding: 3px 0;
	text-decoration: underline;
	color: #28323B;
	transition-property: color, text-decoration;
	transition-duration: 260ms;
}
a:hover, a:focus {
	padding: 3px 0;
	color: #ED7F10;
	text-decoration: none;
}


img {
	border: none;
}

ul {
	list-style: none;
}

.asteris {
	font-style: italic;
	font-size: 1.2rem;
}

.citation {
	font-style: italic;
}

.retourHaut {
	display: none;
}


ul {
	list-style: none;
}



/* BANDE 1 */
#header {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 1rem 3rem;
}
.bloc1 {
	flex: 1;
	padding-bottom: 1rem;
	background-color: #303D45;
	color: #fff;
}
h1 {
	margin: 0 auto;
	padding: 1.5rem 0 0 0;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 6rem;
	text-align: center;
	line-height: 8rem;
	font-weight: normal;
	color: fff;
}
.imgBio {
	display: block;
	max-width: 100%;
	margin: 0; 
	border: 1px solid #191919;
	border-radius: 5px;
	box-shadow: 2px 2px 3px #191919;
}
/* FIN BANDE 1 */



#main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 80%;
	margin: 0 auto;
}
#main li {
	font-style: italic;
}
#main li:before {
	content: "\003E \0020";
}


h2 {
	margin: 6rem 0 1rem;
	padding: 0 3rem 1rem 0;
	text-align: left;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 4rem;
	font-weight: normal;
	color: #303D45;
	border: none;
	transition-property: color;
	transition-duration: 500ms;
}
h2:before {
	content: "\0023 \0020";
}
h2:hover {
	color: #ED7F10;
}



/* FOOTER */
#footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 7rem 1rem 2rem;
	background-color: #303D45;
	color: #fff;
}

#footer nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#footer a {
	margin-bottom: 2rem;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #303D45;
	transition-property: color, border-color;
	transition-duration: 260ms;
}

#footer a:hover, #footer a:focus {
	color: #ED7F10;
	border-color: #ED7F10;
}


.element1 {
	flex:1;
}

.element2 {
	flex:2;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	text-align: center;
}

.element3 {
	flex:1;
	text-align: center;
}


form {
	margin: auto 1rem;
}

input[type="text"], input[type="email"]{
	min-width: 90%;
	margin: 0.5rem auto;
	padding: 0.8rem;
	font-size: 80%;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	border: 2px solid #fff;
	border-radius: 5px;
}
input[type="text"]:focus, input[type="email"]:focus {
	border: 2px solid #ED7F10;
	border-radius: 5px;
}

input[type="submit"] {
	margin: 2rem 0 1rem;
	padding: 0 1rem 1.6rem 1rem;
	font-size: 1.8rem;
	color: #fff;
	background-color: #303D45;
	border: none;
	border-bottom: 1px solid grey;
	transition-property: padding, color, border-color;
	transition-duration: 260ms;
}
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
	padding: 0 2.5rem 1.6rem 2.5rem;
	color: #ED7F10;
	border-color: #ED7F10;
}


textarea {
	min-width: 90%;
	height: 15rem;
	margin: 0.5rem auto;
	padding: 0.8rem;
	font-size: 80%;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	border: 2px solid #fff;
	border-radius: 5px;
}
textarea:focus {
	border: 2px solid #ED7F10;
	border-radius: 5px;
}
/* FIN FOOTER */
	
}