/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
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;
}
/* ----------------------FIN DU RESET CSS----------------------- */
/* ----------------------réglages généraux----------------------- */
html {
	box-sizing: border-box;
	font-size:62.5%;} /*definition rem*/

*, *:before, *:after {
	box-sizing: inherit;}

img{
	max-width:100%;}

a{
	text-decoration: none;
	transition: all .3s ease;}

.container{
	max-width: 960px; /*largeur de la maquette*/
	margin: 0 auto;}

.w_100{
	width: 100%;}
.w_75{
	width: 75%;}
.w_66{
	width: 66%;}
.w_60{
	width: 60%;}
.w_50{
	width: 50%;}
.w_45{
	width: 45%;}
.w_40{
	width: 40%;}	
.w_33{
	width: 33%;}
.w_30{
	width: 30%;}
.w_25{
	width:25%;}

.flex{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;}

.transpa:hover{
	opacity: 0.6;}

.pull_left{
	float:left;}

.pull_right{
	float:right;}

/* -------------------FIN réglages généraux-------------------- */

/* -------------------couleurs et typos 
font-family: 'Overlock', cursive;
font-family: 'Cookie', cursive;
font-family: 'Fredoka One', cursive;
------------------- */

:root{
--gris:#69696c;
--jaune:#eea914;
--rouge:#e84743;
--bleuvert:#29888c;
}

/* ---------------DEBUT DES REGLAGES STRUCTURELS---------------- */

body{
	color: var(--gris);
	font-family: 'Overlock', cursive;
}

/* ---------------FIN DES REGLAGES STRUCTURELS---------------- */


/* ---------------DEBUT DES REGLAGES HEADER---------------- */

.bloctop{
	background: url(../img/bg-header.gif) top center no-repeat;
	border-bottom: solid 1px lightgrey;
}

.nav2{
	text-align: right;
	position: relative;
}

.nav2 a{
	font-size: 1.2rem;
	color: var(--rouge);
	display: inline-block;
	padding: 2rem 2rem 0.5rem 2.5rem;
}

.nav2 a:nth-child(1){
	padding:0;
}

.nav2 a:nth-child(2){
	padding-left:0.5rem;
}

.nav2 a:nth-child(3){
	background: url(../img/icon-user.png) no-repeat 0 2rem;
}

.nav2 a:nth-child(4){
	background: url(../img/icon-cart.png) no-repeat 0 2rem;
}

.nav2:before{
	content:"Langues";
	font-size: 1.2rem;
	padding-right: 1rem;
}

header figure{
	position: absolute;
	left:50%;
	z-index: 10;
}

header figure img{
	position:relative;
	right:50%;
	transition: .3s all ease-in;
	top: -2rem;
}

header figure img:hover{
	top:-1rem;
}

.nav1{
	padding:2rem;
	margin-top: 1rem;
	background: url(../img/pat-menu.gif);
	position: relative;
}

.nav1:before{
	content: "";
	display: block;
	width:100%;
	height: 2rem;
	background: url(../img/ombre-nav.png) bottom no-repeat;
	position: absolute;
	left:0;
	bottom:-1rem;
}


.nav1 a{
	font-family: 'Fredoka One', cursive;
	color: var(--bleuvert);
	font-size: 1.5rem;
	text-transform: uppercase;
	position:relative;
}

.nav1 a:after{
	content: "";
	background: url(../img/img-sep.png) center no-repeat;
	display: block;
	position: absolute;
	width: 2rem;
	height: 2rem;
	right: -2.5rem;
	top:-0.25rem;
}

.nav1 a:last-child:after, .nav1 a:nth-child(3):after{
	background: none;
}

.nav1 a:nth-child(3){
	margin-right: 20%;
}

/* ----zone promotion---- */
div>article.container{
	margin-top: 3rem;
	background: url(../img/img-planche.png) bottom center no-repeat;
	background-size: contain;
	padding-bottom: 9rem;
	position: relative;
}

div>article.container:before{
	content: "";
	background: url(../img/img-pepites.png) no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	width: 18rem;
	height: 18rem;
	right: 35%;
	bottom: 6.4rem;
}

div>article>figure{
	padding-left: 6%;
}

div>article>section{
	padding-left: 6%;
	padding-top: 5%;
}

div article h1{
	font-family: 'Fredoka One', cursive;
	font-size: 7.2rem;
	text-transform: uppercase;
	color: var(--rouge);
}

div.bloctop article.flex h1+h2{
	font-family: 'Cookie', cursive;
	font-size: 5.4rem;
	color: var(--jaune);
}

div article p{
	font-size: 1.4rem;
	padding-left: 2%;
	line-height: 1.6rem;
}

div>article>section>a{
	background: url(../img/btn-gocart.png) no-repeat;
	font-size: 1.3rem;
	font-family: 'Fredoka One', cursive;
	padding: 1.3rem 0 0 5rem;
	text-transform: uppercase;
	color: white;
	position: relative;
	top: 3rem;
	right:1rem;
	width: 270px;
    height: 40px;
}


/* ---------------FIN DES REGLAGES HEADER---------------- */

/* ---------------DEBUT DES REGLAGES MAIN---------------- */

/* ----partie 1 nouveau---- */

article.nouveau{
	padding: 2% 0;
}

article.nouveau h2{
	font-family: 'Fredoka One', cursive;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--rouge);
	text-align: center;
	padding: 2% 0;
	position: relative;
}

article.nouveau h2:before{
	content: "";
	width:12%;
	height: 6px;
	left:0;
	position: absolute;
	border:solid grey;
	border-width: 1px 0 1px 0;
	top:45%;
}
article.nouveau h2:after{
	content: "";
	width:12%;
	height: 6px;
	right:0;
	position: absolute;
	border:solid grey;
	border-width: 1px 0 1px 0;
	top:45%;
}

article.nouveau figure{
	width: 23%;
	text-align: center;
	padding: 2%;
}

article.nouveau img{
	border-bottom: solid 1px red;
	margin-bottom: 5%;
	transition: 1s;
}

article.nouveau h4>a{
	font-family: 'Fredoka One', cursive;
	font-size: 1.6rem;
	color: var(--rouge);
}

article.nouveau h4>a:hover{
	color: var(--jaune);
}

article.nouveau p{
	margin: 15px 0;
	font-size: 1.5rem;
}

article.nouveau p>a{
	padding: 5px;
	background-color: var(--rouge);
	color: white;
	margin-right: 7px;
}

article.nouveau h4+p{
	font-weight: bold;
}
article.nouveau h4+p>a:hover{
	background-color: var(--jaune);
	border-radius: 25%;
}

/* ----partie 2 secret---- */

article.secret{
	padding: 2% 0;
	background-color:var(--rouge);
	position:relative;
}

article.secret:before{
	content: "";
	background: url(../img/bg-down-arrow.jpg) no-repeat;
	background-size: contain;
	width:50px;
	height:50px;
	position: absolute;
	top:0;
	left:50%;
}

article.secret:after{
	content: "";
	background: url(../img/img-down-arrow-red.jpg) no-repeat;
	background-size: contain;
	width:50px;
	height:50px;
	position: absolute;
	bottom:-50px;
	left:50%;
}

article.secret h2{
	font-family: 'Fredoka One', cursive;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--jaune);
	text-align: center;
	padding: 2% 0;
	position: relative;
}

article.secret h2>span{
	text-transform: none;
	color: white;
}

article.secret figure{
	width: 25%;
	text-align: center;
	padding: 2%;
	color: white;
	z-index: 3;
	position: relative;
}

article.secret img{
	margin-bottom: 15%;
	transition: 1s;
	position: relative;
}

article.secret>div{
	position:relative;
}

article.secret>div:after{
	content: "";
	background: url(../img/sprite-fleches.png) center no-repeat;
	background-size: 100% auto;
	width: 50%;
	height: 10%;
	position: absolute;
	display: block;
	z-index: 6;
	top: 45%;
	left: 25%;
	overflow: hidden;
}

article.secret>div div{
	text-align: center;
	width:35px;
	height:35px;
	padding-top:3%;
	border-radius: 100%;
	background: url(../img/icon-bulle-num.png);
	background-size: contain;
	font-family: 'Fredoka One', cursive;
	font-size: 1.8rem;
	position: absolute;
	left: 44%;
	top: 48%;
	z-index: 10;
}

article.secret h4{
	font-family: 'Fredoka One', cursive;
	font-size: 1.6rem;
	line-height: 2rem;
}

article.secret p{
	margin: 15px 0;
	font-size: 1.5rem;
	line-height: 1.7rem;
}

/* ----partie 3 catalogue---- */

article.catalogue{
	padding: 2% 0;
}

article.catalogue>section{
	display:grid;
	grid-template-columns:33% 33% 33%;
	grid-template-rows: auto;
	grid-template-areas:
	"titre titre titre"
	"prod1 prod2 prod3"
	"prod4 prod4 prod5"
	"prod4 prod4 prod6"
	". . lien";
	align-items: end;
	text-align: center;
}

article.catalogue h2{
	font-family: 'Fredoka One', cursive;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--rouge);
	text-align: center;
	padding: 2% 0;
	position: relative;
	grid-area: titre;
}

article.catalogue figure{
	position: relative;
	overflow: hidden;
}

article.catalogue figcaption{
	background: var(--rouge);
	text-align: center;
	color: white;
	position: absolute;
	bottom:-100px;
	transition:1s;
	background: url(../img/bg-hover-product-min.png) center no-repeat;
	width: 100%;
	padding:5px;
}

article.catalogue figure:hover figcaption{
	bottom:2px;
	height:50px;
}

article.catalogue h5{
	font-family: 'Fredoka One', cursive;
	font-size: 1.2rem;
	padding: 0.5rem 0;
}

article.catalogue img{
	border-bottom: solid 1px red; 
}

article.catalogue section figure:nth-child(2){
	grid-area: prod1;
}

article.catalogue section figure:nth-child(3){
	grid-area: prod2;
}

article.catalogue section figure:nth-child(4){
	grid-area: prod3;
}

article.catalogue section figure:nth-child(5){
	grid-area: prod4;
}

article.catalogue section figure:nth-child(5) figcaption{
	grid-area: prod4;
	background: url(../img/bg-hover-product-big.png) center no-repeat;
	left:-1px;
}

article.catalogue section figure:nth-child(6){
	grid-area: prod5;
}

article.catalogue section figure:nth-child(7){
	grid-area: prod6;
}

article.catalogue>section>a{
	grid-area: lien;
	width: 100%;
	font-size: 1.3rem;
	text-align: center;
	margin-top:20px;
	color:white;
	font-family: 'Fredoka One', cursive;
	background-color: var(--rouge);
	border-radius: 8px;
	padding:5%;
	border: solid 2px red;
	border-color: #F0524E #CD2925 #CD2925 #CD2925;
}


aside{
	padding-top: 20px;
}

aside>h3{
	font-family: 'Cookie', cursive;
	font-size: 3.5rem;
	color: var(--jaune);
	text-align: center;
	position: relative;
	width: 100%;

}

aside>h3:before{
	content: "";
	width:16%;
	height: 4px;
	left:0;
	position: absolute;
	border:solid var(--jaune);
	border-width: 1px 0 1px 0;
	bottom:1.5rem;
}
aside>h3:after{
	content: "";
	width:16%;
	height: 4px;
	right:0;
	position: absolute;
	border:solid var(--jaune);
	border-width: 1px 0 1px 0;
	bottom:1.5rem;
}


aside>section{
	height: 350px;
	padding: 10% 3% 12% 3%;
	text-align: center;
	margin: 10px 1% 10px 1%;
}

aside>section:nth-child(2){
	background: url(../img/bg-etiquette-argu-livraison.jpg) center no-repeat;
}

aside>section:nth-child(3){
	background: url(../img/bg-etiquette-argu-boxlivraison.jpg) center no-repeat;
}

aside>section:nth-child(4){
	background: url(../img/bg-etiquette-argu-ticket.jpg) center no-repeat;
}

article.catalogue aside section>h5{
	font-family: 'Fredoka One', cursive;
	color: var(--bleuvert);
	font-size: 1.4rem;
	text-transform: uppercase;
	line-height: 1.6rem;
	height: 30%;
	width: 80%;
	margin: 0 auto;
}

article.catalogue aside section>a{

	color: var(--rouge);
	font-size: 1rem;
	text-decoration: underline;
	position: relative;
	top:175px;
}

article.catalogue aside a.facebook{
	font-family: 'Fredoka One', cursive;
	width: 48%;
	height: 90px;
	color: white;
	font-size: 1.4rem;
	padding:6% 3% 0 15%;
	background: url(../img/icon-facebook.png) 25px 25px #3b5998 no-repeat;
	text-transform: uppercase;
	border-radius: 5px;
}
article.catalogue aside a.twitter{
	font-family: 'Fredoka One', cursive;
	width: 48%;
	height: 90px;
	color: white;
	font-size: 1.4rem;
	padding:8% 3% 0 17%;
	background: url(../img/icon-twitter.png) 14px 28px #00aced no-repeat;
	text-transform: uppercase;
	border-radius: 5px;
}


/* ---------------FIN DES REGLAGES MAIN---------------- */

/* ---------------DEBUT DES REGLAGES FOOTER---------------- */

footer{
	text-align: center;
	background: url(../img/bg-rayures.jpg) repeat;
	padding-bottom: 30px;
	position: relative;
	margin-top: 100px;
}

footer:before{
	content: "";
	width:100%;
	height: 30px;
	background: url(../img/img-planche-footer.jpg);
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
	overflow: hidden;
}

footer figure img{
	height: 150px;
	position: absolute;
	top:-65px;
	left:18%;
	z-index: 11;
}

footer figure.etiquette{
	background: url(../img/pat-menu.gif) repeat;
	width: 300px;
	margin: 0 auto 30px auto;
	padding: 100px 0 30px 0;
	position: relative;
}

footer figure.etiquette:after{
	content: "";
	width:100%;
	height: 10px;
	background: url(../img/bg-ombre-address.png) center no-repeat;
	position: absolute;
	bottom:-10px;
	left:0;
}

footer h6{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.7rem;
	margin-bottom: 15px;
}

footer address{
	font-size: 1.4rem;
	line-height: 1.6rem;
	max-width: 12rem;
	text-align: center;
	margin: 0 auto;
}

footer a{
	display: block;
	margin-top: 1rem;
	color: var(--gris);
}

footer p{
	font-size: 1.2rem;
	line-height: 1.4rem;
	font-weight: bold;
	margin: 0 auto;
	width:  80%;
}

footer p + p{
	font-weight:400;
}

/* ---------------FIN DES REGLAGES FOOTER---------------- */
/* ---------------media query---------------- */

@media screen and (min-width: 1000px) {
	header nav.nav, header div.nav-toggle{
		display: none;
	}
}


@media screen and (max-width: 1000px) {	
	header nav.nav1{
		display:none;
	}
	.nav2 a:nth-child(3), .nav2 a:nth-child(4){
		background: none;
	}
	.nav2 a:not(:last-child):after{
		content: "|";
		margin-left: 2.5rem;
	}
	.nav2:before{
	content:"";
	display:none;
	}
	div.bloctop>header>nav.nav2>a{
		padding:  0rem;
		margin: 1.5rem 0.5rem;
		text-align: center;
	}
	div>article.container{
		margin-top: 12rem;
	}
	div>article.container{
		background: none;
	}
	div>article.container:before{
		background: none;
	}
	div>article>section>a.pull_right.transpa{
		float: left;
		margin-left: 4%;
	}
	header>figure{
		margin-top: 30px;
	}
	.bloctop article section{
		padding-right: 3%;
	}
	article.nouveau h2:before, article.nouveau h2:after{
		display: none;
	}
	article.nouveau h2{
		width: 80%;
		margin: 0 auto;
	}
	div.bloctop{
		background: url(../img/bg-rayures.jpg) repeat;
	}
	.container{
		max-width: 90%;
		margin: 0 auto;
	}
	article.secret>div:after {
 	  background: none;
	}
	article.catalogue figcaption, article.catalogue section figure:nth-child(5) figcaption{
		background: rgba(232,71,67,0.65);
		bottom:2px;
		height: 50px;
		border: solid white 1px;
		border-radius: 20px 20px 0 0;
	}
	article.catalogue>section.w_50, aside.w_45{
		width: 80%;
		margin: 5% auto;
	}
	article.catalogue aside a.twitter,article.catalogue aside a.facebook{
		width: 30%;
		margin: 3rem auto 0 auto;
		padding: 3% 3% 3% 10%;
	}
	article.catalogue aside a.twitter{
		padding: 3% 5% 3% 12%;
	}
}



@media screen and (max-width: 750px) {	
		article.catalogue aside a.twitter,article.catalogue aside a.facebook{
		padding: 2%;
		text-align: center;
		font-size: 1rem;
		height: 130px;

	}
	article.catalogue aside a.twitter{
		background: url(../img/icon-twitter.png) center #00aced no-repeat;
	}
	article.catalogue aside a.facebook{
		background: url(../img/icon-facebook.png) center #3b5998 no-repeat;
	}




@media screen and (max-width: 650px) {	
	body > div > article > figure{
		display: none;
	}
	body > div > article > section.w_60{
		text-align: center;
		margin: 0 auto;
		width: 80%;
	}
	div>article>section>a.pull_right.transpa {
		background: var(--rouge);
		float: none;
		margin: 0 auto;
		padding: 2rem;
		border-radius: 20px;
	}
	body > div > article > section > h1{
		text-align: center;
		margin: 0 auto;
	}
	body > div > article > section > p{
		margin: 1.5rem auto;
		padding: 0;
	}
	article.nouveau div{
		width:  90%;
		margin: 0 auto;
	}
	article.nouveau div figure{
		width:  45%;
		margin: 0 auto;
	}
	.secret div.flex figure {
		width:  60%;
		margin: 0 auto;
	}
	article.secret h2 {
		width:  60%;
		margin: 3rem auto;
		line-height: 3rem;
		font-size: 3rem;
	}
	article.secret img.transpa{
		margin-bottom: 3%;
	}
	article.catalogue aside section>h5{
		width: 80%;
		margin: 0 auto;
	}
	aside>section{
		padding: 10% 0 12% 0;
	}
}

@media screen and (max-width: 550px) {	
	article.catalogue>section.w_50, aside.w_45{
		width: 100%;
	}
}

@media screen and (max-width: 450px) {	
	aside>h3:before, aside>h3:after{
		display: none;
	}
	article.catalogue aside a.twitter,article.catalogue aside a.facebook{
		font-size: 1rem;
	}
}

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

.nav {
	-webkit-transition: left 0.5s cubic-bezier(1,.08,.22,.96);
	-moz-transition: left 0.5s cubic-bezier(1,.08,.22,.96);
	-ms-transition: left 0.5s cubic-bezier(1,.08,.22,.96);
	-o-transition: left 0.5s cubic-bezier(1,.08,.22,.96);
	transition: left 0.5s cubic-bezier(1,.08,.22,.96);
	background: url(../img/pat-menu.gif);
	font-size: 1.6rem;
	line-height: 2;
	height: 80vh;
	left: -30rem;
	padding: 6rem 2rem 2rem 2rem;
	position: absolute;
	top: 0;
	width: 30rem;
	z-index: 11;
	border-radius: 0 0 30px 0;
}

.nav a{
	color: var(--bleuvert);
	font-family: 'Fredoka One', cursive;
	text-transform: uppercase;
	line-height: 5rem;
}

.nav a:hover, .nav a.activ{
	color: var(--rouge);
}

.nav .separ{
	border-top: 1px solid white;
	margin-top: 2rem;
	padding-top: 2rem;
}

.nav.expanded { 
	left: 0; 
	box-shadow: 3px 0 5px rgba(0,0,0,.3);
}

.nav ul {
	position: absolute;
	top: 7rem;
}

.nav-toggle {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	height: 2rem;
	left: 2rem;
	position: absolute;
	top: 2rem;
	width: 3.6rem;
	z-index: 12;
}
 
.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 0.5s cubic-bezier(1,.08,.22,.96);
	-moz-transition: all 0.5s cubic-bezier(1,.08,.22,.96);
	-ms-transition: all 0.5s cubic-bezier(1,.08,.22,.96);
	-o-transition: all 0.5s cubic-bezier(1,.08,.22,.96);
	transition: all 0.5s cubic-bezier(1,.08,.22,.96);
	background: var(--rouge);
	content: '';
	height: 0.4rem;
	width: 100%;
}

.nav-toggle .nav-toggle-bar { margin-top: 0; }

.nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; }

.nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; }

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
	margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before,.nav-toggle.expanded .nav-toggle-bar::after{
	background: var(--rouge)
}