/* --------- 1. Reset CSS - Eric Meyer  --------- */

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;
}
/* HTML5 display en block pour les anciens fureteurs */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*** General ***/

body {
	margin: 0px;
	padding: 0px;
	font: 62.5% Arial, Verdana, sans-serif;
	background: url(img/fond-header.jpg) top center no-repeat;
	background-color: #fdfbf1;
}
article, aside, footer, header, nav, section, figure, figcaption {
	display: block;
	text-decoration: none;
}
* {
	margin: 0px;
	padding: 0px;
}
	/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,400italic,700,700italic,500italic);
@font-face {
	font-family: 'fontastique';
	src: url('fontastique.eot');
	src: url('fontastique.eot?#iefix') format('embedded-opentype'),
	      url('fontastique.woff') format('woff'),
	      url('fontastique.ttf') format('truetype'),
	      url('fontastique.svg#fontastique') format('svg');
	font-style: normal;
	font-weight: normal;
}

/* -------- Par exemple: guide des couleurs ou autres choses ----------
#8cde15 : Vert olive
#01d1b9 : Bleu turquoise
#fdfbf1 : Beige pale
#6d6e70 : Gris
*/

/* PERSONNALISER */
.nofloat {
	clear: both;
}
.plusadroite {
	padding-left: 10%;
}

/* STRUCTURE */
#wrapper {
	margin: auto;
	max-width: 960px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* PLUS HAUT DE 1024PX */
@media screen and (min-width: 1024px) {
	footer article {
		float: left;
		margin-top: 4%; 
		width: 50%;
	} 
	/* BANDE VERTE */
	#bandeVerte h1 {
		background-color: #8cde15;
	}
	
}
/* EN BAS DE 1024PX */
@media screen and (max-width: 1024px) {
	body {
		background: url(img/header-1024.jpg) top center no-repeat;
		background-color: #fdfbf1;
	}
	#wrapper {
		max-width: 1024px;
	}
	nav li {
		float: left;	
		width: 49.2%;
		border: 3px solid #01a895;
		background-color: #01d1b9;
	}
	/* IMAGES DES SPÉCIALITÉS */
	#speciaux {
		width: 100%;
	}
	#speciaux figure {
		float: left;
		margin: 5% 1% 0% 1%;
		width: 31%;
	}
	#speciaux img { 
		width: 100%;
		height: auto;
		max-width: 300px;
	}
	/* NOUVEAU ET LIVRAISON */
	#livraison {
		width: 32%;
	}
	/* FOOTER */
	footer {
		width: 100%;
		height: auto;
	}
	#bande-footer img { 
		width: 100%;
		height: auto;
		max-width: 1920px;
	}
	footer article {
		float: left;
		margin-top: 4%; 
		width: 50%;
	} 
	footer figure {
		width: 20%;
	}
}
/* ENTRE 768PX ET 930PX */
@media screen and (min-width: 768px) and (max-width: 930px) {
	section figure.photochef img {
		margin-left: 30%;
		text-align: center;
	}
	section {
		width: 100%;
	}
	#equipe {
		width: 100%;
	}
}
/* PLUS HAUT DE 768PX */
@media screen and (min-width: 768px) {
	nav {
		margin-top: 560px;
	}
	#equipe {
		float: right;
		width: 60%;
		max-width: 578px;
	}
	#equipe h1 {
		padding: 60px 0px 20px 40px;
		font: 3.2em fontastique, 'Gloria Hallelujah', cursive, Verdana;
		font-weight: bold;
	}
	/* NOUVEAU ET LIVRAISON */
	#livraison h1 {
		padding-bottom: 20px;
	}
}

/* EN BAS DE 768PX */
@media screen and (max-width: 768px) {
	body {
		background-color: #fdfbf1;
	}
	nav {
		margin-top: 560px;
	}
	nav li {
		float: left;
		width: 99%;
		border: 3px solid #01a895;
		background-color: #01d1b9;
	}
	/* IMAGE AVEC TEXTES */
	section figure.photochef {
		display: none;
	}
	#equipe {
		margin: 40px 0px;
		width: 100%;
	}
	#equipe h1 {
		margin: 20px 0px 20px 0px;
		font: 3.2em fontastique, 'Gloria Hallelujah', cursive, Verdana;
		font-weight: bold;
		text-align: center;
	}
	footer article {
		width: 100%;
	}
	footer figure {
		width: 22%;
		text-align: center;
	}
}
/* PLUS HAUT DE 480PX */
@media screen and (min-width: 480px) {
	#logopetit {
		display: none;
	}
	/* BANDE VERTE */
	#bandeVerte h1 {
		background-color: #8cde15;
	}
}
/*////////////////////////////////////////
 Téléphone 
///////////////////////////////////////*/
/* EN BAS DE 480PX */
@media screen and (max-width: 480px) {
	body {
		background-image: none;
		background-color: #fdfbf1;
	}
	#logogros {
		display: none;
	}
	#logopetit {
		display: block;
	}
	/* CONTENU DANS LE WRAPPER */
	/* MENU PRINCIPAL */
	nav {
		margin-top: 240px;
	}
	nav li {
		float: left;
		width: 99%;
		margin: 0% 0% 1% 0%;
		border: 3px solid #01a895;
		text-align: center;
		background-color: #01d1b9;
	}
	nav a:hover {
		background-color: none;
	}
	/* IMAGE AVEC TEXTES */
	section {
		display: none;
	}
	/* BANDE VERTE */
	#bandeVerte h1 {
		margin-top: 30px;
	}
	/* IMAGES DES SPÉCIALITÉS */
	#speciaux figure {
		float: left;
		display: block;
		margin: 5% 1% 0% 1%;
		width: 98%;
		text-align: center;
	}
	/* NOUVEAU ET LIVRAISON */
	#comptoirChoco {
		display: none;
	}
	#livraison {
		float: left;
		display: block;
		margin: 5% 9%;
		width: 82%;
		text-align: center;
	}
	#livraison h1 {
		margin-top: 80px;
		padding-bottom: 20px;
	}
	/* FOOTER */
	footer {
		margin-top: 50px;
		background-color: #01d1b9;
	}
	#bande-footer img { 
		display: none;
	}
	footer article {
		width: 100%;
	}
	footer figure {
		float: left;
		display: block;
		padding: 20px 20px;
		width: 18%;
		text-align: center;
	}
	/* COPY RIGHT */
	article#copy {
		padding: 2% 0% 1% 0%;
		width: 100%;
		height: 20px;
	}
	article#copy p {
		font-size: 1.4em;
		text-align: center;
	}
}

/* HEADER Logo */
header#entete_logo{
	float: left;
	position: absolute;
	top: 0px;
	margin-top: 2%;
	width: 100%;
	background: url('img/bande-bleu.jpg') center center repeat-x;
	z-index: 100;

}
header#entete_logo figure{
	margin: auto;
	max-width: 370px;
	height: auto;
}

/* CONTENU DANS LE WRAPPER */
	/* MENU PRINCIPAL */
nav {
	width: 100%;
	text-align: center;
}
nav ul {
	list-style-type: none;
	background-color: #01d1b9;
}
nav li { 	
	display: inline-block; 
	list-style: none; 
	text-decoration: none; 
	position: relative; 
}
nav li a {
	display: block;
	padding: 12px 41px;
	font: 3.0em fontastique, 'Gloria Hallelujah', cursive;
	text-decoration: none;
	text-align: center;
	color: #000;
}
nav a:hover {
	background-color: #8cde15;
}

	/* IMAGE AVEC TEXTES */
section {
	width: 100%;
}
section img { 
	width: 100%;
	height: auto;
	max-width: 300px;
}
section figure.photochef img {
	float: left;
	margin: 5% 0% 5% 7%;
	-webkit-box-shadow: 0px 0px 0px 10px rgba(109,110,112,0.97);
	   -moz-box-shadow: 0px 0px 0px 10px rgba(109,110,112,0.97);
		  box-shadow: 0px 0px 0px 10px rgba(109,110,112,0.97);
}
#equipe p {
	padding: 0px 60px 10px 40px;
	font: 1.6em 'Roboto', sans-serif;
	-webkit-columns: 100px 2; /* Chrome, Safari, Opera */
       -moz-columns: 100px 2; /* Firefox */
            columns: 100px 2;
}

	/* BANDE VERTE */
#bandeVerte h1 {
	padding: 20px 0px;
	font: 3.6em fontastique, 'Gloria Hallelujah', cursive, Verdana;
	font-weight: bold;
	text-align: center;
}

	/* IMAGES DES SPÉCIALITÉS */
#speciaux {
	width: 100%;
}
#speciaux figure {
	float: left;
	margin: 5% 1% 0% 1%;
}
#speciaux img { 
	width: 100%;
	height: auto;
	max-width: 300px;
}
#speciaux figcaption {
	padding: 20px 0px 10px 0px;
	font: 1.6em 'Roboto', sans-serif;
	font-weight: bold;
	text-align: center;
}

	/* NOUVEAU ET LIVRAISON */
#comptoirChoco {
	float: left;
	margin: 5% 9%;
	width: 32%;
}
#comptoirChoco h1 {
	padding-bottom: 20px;
	font: 4.0em fontastique, 'Gloria Hallelujah', cursive, Verdana;
	font-weight: bold;
	color: #01d1b9;
	text-align: center;
}
#comptoirChoco figcaption {
	padding-top: 5%;
	font: 1.6em 'Roboto', sans-serif;
	font-weight: bold;
	text-align: center;
}
#comptoirChoco img { 
	width: 100%;
	height: auto;
	max-width: 300px;
}
#livraison {
	float: left;
	margin: 5% 9%;
}
#livraison h1 {
	font: 4.0em fontastique, 'Gloria Hallelujah', cursive, Verdana;
	font-weight: bold;
	color: #01d1b9;
	text-align: center;
}
#livraison figcaption {
	padding-top: 12%;
	font: 1.6em 'Roboto', sans-serif;
	font-weight: bold;
	text-align: center;
}
#livraison img { 
	width: 100%;
	height: auto;
	max-width: 300px;
}

/* FOOTER */
footer {
	width: 100%;
	height: auto;
}
#bande-footer img { 
	width: 100%;
	height: auto;
	max-width: 1920px;
}
footer article {
	float: left;
	margin-top: 4%; 
	/*width: 50%;*/
} 
footer h1 {
	padding: 2% 0% 4% 0%;
	font: 3.0em fontastique, 'Gloria Hallelujah', cursive, Verdana;
	font-weight: bold;
	text-align: center;
}
footer article p {
	padding-bottom: 2%;
	font: 1.8em 'Roboto', sans-serif;
	text-align: center;
}
footer figure {
	float: left;
	padding: 20px 20px;
}
	/* COPY RIGHT */
article#copy {
	padding: 2% 0% 1% 0%;
	width: 100%;
	height: 20px;
}
article#copy p {
	font: 1.4em 'Roboto', sans-serif;
	text-align: center;
}