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-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font-family: Helvetica, Arial, sans-serif;
}
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;
}
 #btn-nav {
      display: none;
    }

/*=================================font==================================*/
@font-face {
    font-family:'saginaw_light';
    src: url('saginawlight.eot');
    src: url('saginawlight.eot?#iefix') format('embedded-opentype'),
         url('saginawlight.woff') format('woff'),
         url('saginawlight.ttf') format('truetype'),
         url('saginawlight.svg#saginaw_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*=================================gabarit==================================*/

* {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
}

#wrapper {
	max-width: 960px;
	margin:auto;
	overflow: hidden;
}

.w50 {
	width:50%;
	float:left;
	padding:0 10px;
}

.w60 {
	width:60%;
	float:left;
	padding:0 10px;
}

.w40 {
	width:40%;
	float:left;
	padding:0 10px;
}

.w33 {
	width:33.333333%;
	float:left;
	padding:0 10px;
}

.w70 {
	width:70%;
	float:left;
	padding:0 10px;
}

.w30 {
	width:30%;
	float:left;
	padding:0 10px;
}

.w100 {
	width:100%;
	float:left;
	padding:0 10px;
}

.overflow {
	position:relative;
	overflow:hidden;
}
/*=================================header==================================*/
#logo {
	margin-top:5%;
	margin-left:80px;
}

#logo a {
	display:block;
	background: url(../img/logoPlat.jpg)center no-repeat;
	width:153px;
	height:153px;
	overflow: hidden;
	text-indent:-300px;
	box-shadow: 3px 3px 5px rgb(235, 235, 235);
}

/*------------------nav-------------*/

nav ul li {
	margin-bottom:1px;
}

nav ul li a {
	display:block;
	background: #333333;
	color:#ffffff;
	text-decoration: none;
	text-align: center;
	line-height: 28px;
	margin-bottom:1px;
	font-size: 14px;
}

nav ul li a:hover {
	background: #ec008c
}

nav ul li ul {
	display:none;
}

nav ul li ul li a {
	text-align: left;
	padding-left: 22px;
}

.fruti {background: #ed7300;}
.love {background: #cb8e9c;}
.spicy {background: #c81e23;}

/*=================================content==================================*/

h2 {
	font-size:47px;
	font-family:'saginaw';
	font-weight:lighter;
	margin-top:30px;
	margin-bottom:25px;
}

p {
	font-size:16px;
	line-height: 18px;
	margin-top:15px;
	margin-bottom:25px;
}
h3 {
	font-weight: bold;
	font-size: 17px;
}
img {
	max-width: 100%;
	height:auto;
	width: auto;
}
.bando1:hover{
	background-color: #ed7300;
}
.bando2:hover{
	background: #cb8e9c;
}
.bando3:hover{
	background: #c81e23;
}
.decalage {
	padding-left:30px;
	padding-top: 25px;
	padding-bottom: 25px;
}

.legende h3 {
	color:#ffffff;
	padding:5px 15px;
	font-size:18px;
	cursor:pointer;
	text-shadow: 1px 1px #000000;
}
.legende {
	position:absolute;
	bottom:-190px;
	cursor:pointer;
}
.legende p{
	opacity: 0.8;
}

p span.description{
    width:300px;
    height:auto;
    font-size: 14px;
    background-color:#fff;
    border:1px solid #fff;
    color:#000;
    display:block;
    padding:10px 10px 60px 10px;
    -moz-box-shadow:0px -1px 7px #000;
    -webkit-box-shadow:0px -1px 7px #000;
    box-shadow:0px -1px 7px #000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.legende a{
	margin-right:35px;
	margin-top: 15px;
	float:right;
}
/*=================================footer==================================*/
footer {
	background: black;
	content: "";
	display: table;
	clear: both;
	width:100%;
	padding-left:20px
}
footer ul li {
	display:inline-block;
	margin-right: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
}
footer a {
	color: #ffffff;
	text-decoration: none;
}
footer a:hover{
	opacity: 0.8;
}
footer p {
	color: #ffffff;
	padding-right: 5px;
	font-size: 14px;
}
footer .mentions{
	padding-left: 15px;
	padding-right:10px;
}
.icon {
	width:46px;
	height:46px;
	display:inline-block;
}
.facebook {
	background: url(../img/picto-Facebook.png) left top no-repeat;
}
.twitter {
	background: url(../img/pictoTwitter.png) left top no-repeat;
}
.pinterest {
	background: url(../img/pictoPinterest.png) left top no-repeat;
}
/* ----------------------------------------
   == Médias queries
------------------------------------------- */
/* iPad */
@media (max-width:768px){
#logo {
    margin-left: 45px;
}
 #btn-nav {
	display: none;
}
.w50 nav{
	display: inline-block;
}
.w40 {
	display: none;
}
.w60{
	width: 100%;
}
}

/*--------------------------------------------*/
@media (min-width:760px){
.nav{
	display: block !important;
}
}
@media (max-width:750px){
.w40 {
	display: none;
}
.w60{
	width: 90%;
}
#btn-nav {
	display: block;
	background: #000000;
	color:#ec008c;
	float: right;
	margin-right: 5px;
	margin-top: 25px;
	width: 65px;
}
.nav{
	display:none;
}

}

/*--------------------------------------------*/

@media (max-width:320px){
.w50,
.w60,
.w40,
.w70,
.w30,
.w33,
.w100 {
	width: 100%;
	float:none;
}
.nav{
	display: none;
}
#btn-nav {
	float: none;
    margin: 10px auto;

}
.icon {
max-width: 100%;
display: inline-block;
}

.overflow {
	float: none;
	clear: both;
	width: 100%;
}
p span.description{
    width:265px;
}
.decalage {
	padding-left:30px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.w70{
	display: none;
}
.w33{
	width: 100%;
	float:none;
}
.w30{
	width: 100%
}
#logo {
text-align:center;