@charset "utf-8";

/*
@Author : Nicolas Bocquet
@Version : 1.1
@Date : 31 10 2017
*/


/* ---------------------- */
/* &  SUMMARY             */
/* ---------------------- */

/*
	1 - Declaration des polices
	2 - Styles generaux
	3 - Structure
	4 - Elements Generiques
	5 - Elements Specifiques
	6 - Media queries
*/


/* ------------------------------- */
/* &  1 - DECLARACTION DES POLICES */
/* ------------------------------- */

	/* Des déclarations de type "Bullet-proof" (+ eot/ttf/svg) ne sont pas utiles dans le cas de ce site web */
	
	@font-face {
	  font-family: "Open Sans";
	  font-weight: 400;
	  src:  local("Open Sans Regular"), local("OpenSans-Regular"),
			url("fonts/OpenSans-Regular.woff2") format("woff2"),
	  		url("fonts/OpenSans-Regular.woff") format("woff");
	}
	
	@font-face {
	  font-family: "Open Sans";
	  font-weight: 700;
	  src:  local("Open Sans Bold"), local("OpenSans-Bold"),
	  		url("fonts/OpenSans-Bold.woff2") format("woff2"),
			url("fonts/OpenSans-Bold.woff") format("woff");
	}
	
	@font-face {
	  font-family: Oswald;
	  font-weight: 400;
	  src: local("Oswald Regular"), local("Oswald-Regular"),
		   url("fonts/Oswald-regular.woff2") format("woff2"),
		   url("fonts/Oswald-regular.woff") format("woff");
	}


/* ------------------------------ */
/* &  2 - STYLES GENERAUX (reset) */
/* ------------------------------ */

	html, body {margin:0; padding:0;}	
	html {font-size:62.5%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
	body {font-size: 150%; line-height:170%; font-family:"Open Sans", Arial, Helvetica, sans-serif; background:#f8f7f0 url(images/background.png);}
	abbr[title], acronym[title], dfn[title], .help[title] {border-bottom:1px dotted; cursor:help;}
	dfn {font-style:normal;}
	em {font-size: 1.2rem;}
	figure {margin:0;}
	del {color:#999;}
	img {max-width:100%;}
	
	form {margin:2em 0 3em;}
	label {display:block; font-size:1.4rem; margin:0.3em 0;}
	fieldset {border:0; padding:0; margin:1em 0;}
	input, textarea {display:block; box-sizing:border-box; border: 1px solid #BBBBBB; border-radius: 4px; box-shadow: 0 0 5px #BBBBBB; margin-right: 6px; padding:10px 14px; font:100% "Open Sans", Arial, Helvetica, sans-serif;}
	input[type=text], input[type=email], textarea {width:100%;}
	input:focus, textarea:focus {border:1px solid #333;}
	input:focus:required:valid, textarea:focus:required:valid {border:1px solid green;}
	button {display: inline-block; border: 0; border-radius: 3px; padding:18px 0; color: white; font-size: 1.6rem; text-transform: uppercase; cursor: pointer; background: #61811D; font-family:"Open Sans", Arial, Helvetica, sans-serif;}
	button:hover, button:focus {background:#4B7212;}
		
	h1 {font-size:3rem; margin-top:2em; line-height:1.3em; font-family:Oswald, "Open Sans", sans-serif; font-weight:400;}
	h2 {font-size:1.3em; margin-top:2em; line-height:1em;}
	h3 {font-size:1em; margin:0; margin-bottom:0.2em; line-height:1em;}
	
	a {color:#43682B; text-decoration-skip:ink;}
	a:hover {color:#263A18;}
	a img {border:none;}

	/* HELPERS */
	.visuallyHidden, .formUse {position: absolute; clip: rect(1px, 1px, 1px, 1px);}
	.uppercase {text-transform:uppercase;}


/* -------------------- */
/* &  3 - STRUCTURE     */
/* -------------------- */
	.skipLink {position:absolute; z-index:999; left:-9999px; top:-9999px; white-space:nowrap;}
	.skipLink:focus, .skipLink:active {position:absolute; top:10px; left:10px; border:2px solid #F0F0F0; background:#333; color:white; padding:14px 22px; font-size:1.4em;}
	
	.banner, .main {position:relative; max-width:680px; padding:0 20px; margin:30px auto;}
	.main {margin-bottom:10rem;}
	
	.banner {border-bottom: 1px solid rgba(0,0,0,0.2); box-shadow: 0 1px 0 rgba(255,255,255,1);}
	.logo {display:flex; align-items:center; font-size:2em; margin:1rem 0; text-transform:uppercase; line-height:1.3em; font-family:Oswald, "Open Sans", sans-serif; font-weight:400; text-decoration: none; color:black;}
	.logo::before {content: ""; width: 1.2em; height: 1.2em; background: white url(/images/nico.jpg) no-repeat; background-size: cover; border-radius: 6px; border: 2px solid white; margin-right: 9px; box-shadow: 0 0 2px 0px rgba(0,0,0,0.4);}

	.navigation ul {list-style:none; padding:0; margin:0;}
	.navigationItem {display:block; text-decoration:none; color:black; font-size:1.3em;}
	.navigationItem:hover, .navigationItem:focus, .navOn.navigationItem {color:#43682B;}
	.navOn.navigationItem {box-shadow:0 2px 0 #43682B;}
	
	.tagline {font-style:italic; color:rgba(0,0,0,0.7);}
	

/* ----------------------------- */
/* &  4 - ELEMENTS GENERIQUES    */
/* ----------------------------- */

	.mea {margin-bottom:4em;}
	.meaImg {box-sizing:border-box; margin:0 20px 1.5em 0; padding:5px; background:white; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.1); border-radius:4px;}
	.meaImg img {display:block;}
	
	.info {margin:2em 0; padding:12px 38px 14px 17px; background:#D9EDF7; border:1px solid #BCE8F1; border-radius:4px; color:#3A87AD;}
	.info.succes {background-color: #DAEDD2; border-color: #CAE0B7; color:#385238;}
	.info.error {background-color: #F2DEDE; border-color: #EED3D7; color: #B94A48;}
	.info .heading {font-size: 1.2em; font-weight: bold; margin: 0 0.2em 0.1em 0; padding: 0;}
	
	.list {columns:2 auto; margin-left:6px; padding-left:0;}
	.list li {margin-left:10px;}
	
	.formUnit {margin: 2em 0;}


/* ------------------------------ */
/* &  5 - ELEMENTS SPECIFIQUES    */
/* ------------------------------ */

	.dispo  {position:fixed; bottom:0; left:0; right:0; z-index:1; margin:0; text-align:center; border-radius:0; font-weight:bold;}
	
	
/* ----------------------- */
/* &  6 - MEDIA QUERIES    */
/* ----------------------- */
@media screen and (max-width: 640px) {
	button {width:100%;}	
	.navigation {margin-bottom:2em;}
	.navigationItem {padding:0.6em;}
	.navOn.navigationItem {background:#43682B; color:white;}	
	.tagline {margin:1em 0 2em;}
}

@media screen and (min-width: 640px) and (max-width: 980px) {
	button {width:100%;}
	.banner {display:flex; align-items:center; flex-wrap:wrap;}
	.logo {flex:1;}
	.navigation {flex:2; flex-basis: 100%; margin: 1rem 0;}
	.navigation ul {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
	.navigationItem {padding:0.4em;}
	.tagline {flex-basis:100%; order:3; margin:2.6em 0;}
}

@media screen and (min-width: 980px) {
	button {padding: 16px 34px;}
	input[type=text], input[type=email] {width:32rem;}
	textarea {width:80%;}

	.banner, .main {max-width:980px;}
	.banner {display:flex; align-items:center; flex-wrap:wrap;}
	.logo {flex:1 1 auto;}
	
	.navigation {flex:2 1 auto; margin: 1rem 0;}
	.navigation ul {display:flex; align-items:center;}
	.navigation li {margin-left:auto;}
	.navigationItem {padding:0.4em;}
	.tagline {flex-basis:100%; order:3; margin:2.6em 0;}
	
	.mea {display:flex;}
	.mea .meaImg {flex:3;}
	.mea .meaText {flex:2;}
	.list {columns:3 auto;}	
}