@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding: 0; margin: 0; border: 0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none;}
article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display: block;}  
input, textarea								{ -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance :none; border-radius: 0;}
*          									{ outline: none; box-sizing: border-box;}
strong, b									{ font-weight: 500;}
ul											{ list-style-type: none;}
body										{ min-width: 320px; font: 400 15px/30px "Poppins"; letter-spacing: 0.4px; color: #000; background: #000; position: relative;}
a											{ text-decoration: none; color: #85c700; position: relative;}
img											{ border: none;}
#wrapper 									{ min-width: 320px; background: #fff; position: relative;}

@media (max-width:700px) { 
body										{ font-size: 12px; line-height: 24px;}
}


/***** scollbar *****/
::-webkit-scrollbar 						{ width: 6px; background-color: #eee;}
::-webkit-scrollbar-thumb					{ background-color: #444;}


/***** transition *****/
@media (min-width:1201px) {
.link, a, a span 							{ transition: all 300ms ease-in-out;}
}


/***** class *****/
.wrapper 									{ width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;}
.anchor 									{ position: absolute; left: 0; top: -100px;}
.titre_main	 								{ font: 500 40px/50px "Cormorant Garamond"; text-transform: uppercase; letter-spacing: 0.2px; position: relative; margin-bottom: 20px;}
.sous_titre 								{ font: 400 20px/28px "Poppins"; position: relative; color: #85c700; margin-bottom: 15px;}
.link  										{ font: 400 15px/58px "Poppins"; height: 60px; display: inline-block; color: #fff; padding: 0 30px; border-radius: 5px; background: linear-gradient(to top, #444 0% 50%, #333 50% 100%); background-size: 100% 200%; background-position: 0 100%; letter-spacing: 0.4px;}

@media (max-width:600px) { 
.wrapper 									{ width: 85vw;}
.link  										{ font-size: 13px; line-height: 48px; height: 50px;}
}


/***** header carte *****/
#carte header 								{ background: #000; position: relative; text-align: right; padding: 30px 60px;}
#carte header .logo							{ width: 175px; height: auto; position: absolute; left: 60px; top: 50%; transform: translateY(-50%);}
#carte header .logo img						{ width: 100%; height: auto; display: block;}
#carte header .titre_main					{ display: none;}
#carte header .link							{ padding-left: 65px; font-size: 14px; line-height: 60px;}
#carte header .link:before 					{ width: 20px; height: 100%; background: url("../images/close.svg") 50% no-repeat; position: absolute; left: 30px; top: 0; content: "";}
#carte main 								{ padding-bottom: 20px;}

@media (min-width:1201px) { 
#carte header .link:hover 					{ background-position: 0 0;}
}
@media (max-width:1200px) { 
#carte header 								{ padding: 30px 5vw;}
#carte header .logo							{ left: 5vw;}
}
@media (max-width:600px) { 
#carte header 								{ padding: 15px 7.5vw;}
#carte header .logo							{ width: 100px; left: 7.5vw;}
#carte header .link							{ padding: 0 35px 0 0; font-size: 12px; line-height: 44px; height: 44px; background: none;}
#carte header .link:before 					{ left: auto; right: 0;}
#carte main 								{ padding-bottom: 0;}
}


/***** filtres carte *****/
#carte .filtres 									{ width: 100%; background: #eee; margin: 60px 0; z-index: 50; font-size: 14px; position: sticky; top: 0;}
#carte .filtres:before 								{ width: 16px; height: 100%; background: url("../images/arrow_down.svg") 50% no-repeat; position: absolute; right: 30px; top: 0; content: "";}
#carte .filtres.active:before 						{ transform: rotate(-180deg);}
#carte .filtres div.active							{ background: url("../images/filtre.svg") 30px center no-repeat; padding: 0 75px 0 90px; height: 61px; line-height: 61px; cursor: pointer; position: relative; z-index: 5;}
#carte .filtres .choice 							{ position: absolute; left: 0; top: 61px; width: 100%; background: #000; padding: 30px; display: none;}
#carte .filtres .wrap 								{ max-height: 350px; overflow-y: scroll;}
#carte .filtres .wrap::-webkit-scrollbar 			{ width: 2px; background-color: #555;}
#carte .filtres .wrap::-webkit-scrollbar-thumb 		{ background-color: #85c700;}
#carte .filtres .choice a 							{ display: block; line-height: 40px; padding: 0 5px; color: #fff;}
#carte .filtres .choice a:first-child 				{ margin-top: -5px;}
#carte.sticky .filtres .choice a.active				{ color: #85c700;}

@media (min-width:1201px) { 
#carte .filtres .choice a:hover 					{ color: #85c700;}
}
@media (max-width:600px) { 
#carte .filtres 									{ width: 100vw; margin: 0 0 30px 0; font-size: 12px; margin-left: -7.5vw;}
#carte .filtres:before 								{ right: 7.5vw;}
#carte .filtres div.active							{ background: url("../images/filtre.svg") 7.5vw center no-repeat; padding: 0 75px 0 calc(30px + 13vw); height: 55px; line-height: 55px;}
#carte .filtres .choice 							{ top: 55px; padding: 30px 7.5vw;}
#carte .filtres .wrap 								{ max-height: 60vh;}
#carte .filtres .choice a 							{ line-height: 35px;}
}


/***** carte *****/
#carte .main_category 						{ margin-bottom: 100px; position: relative;}
#carte .main_category>.titre_main			{ font-size: 40px; line-height: 50px; border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 60px;}
#carte .main_category>.desc_cat				{ margin: -40px 0 60px 0;}

#carte .sub_category 						{ display: grid; grid-template-columns: 25% 1fr; grid-gap: 60px; margin-bottom: 60px;}
#carte .sub_category.no_photo				{ display: block;}
#carte .sub_category .titre_main			{ font-size: 25px; line-height: 35px; color: #85c700;}
#carte .sub_category .photo img				{ width: 100%; height: auto; display: block; border-radius: 10px;}
#carte .sub_category .item 					{ display: grid; grid-template-columns: 1fr 100px; grid-gap: 5px 20px; border-bottom: 1px solid #ccc; margin-bottom: 22px; padding-bottom: 20px; line-height: 26px;}
#carte .sub_category .name 					{ font-size: 16px; line-height: 26px; letter-spacing: 0.6px; font-weight: 500;}
#carte .sub_category .name span 			{ color: #85c700;}
#carte .sub_category .name a 				{ display: inline-block; vertical-align: middle; margin: -5px 0 0 6px; width: 25px; height: 25px; border-radius: 50%; background: url("../images/info.svg") 50% no-repeat #eee; cursor: pointer;}
#carte .sub_category .prix 					{ text-align: right; font-weight: 500;}
#carte .sub_category .desc 					{ font-size: 13px; line-height: 22px; /*grid-column: span 2;*/}

@media (max-width:1200px) { 
#carte .main_category>.titre_main			{ font-size: 35px; line-height: 45px; margin-bottom: 50px;}
#carte .main_category>.desc_cat				{ margin: -30px 0 50px 0;}
#carte .sub_category 						{ grid-template-columns: 28% 1fr; grid-gap: 50px; margin-bottom: 50px;}
#carte .sub_category .titre_main			{ font-size: 20px; line-height: 30px;}
}
@media (max-width:1000px) { 
#carte .sub_category 						{ display: block;}
#carte .sub_category .photo  				{ display: none;}
}
@media (max-width:600px) { 
#carte .main_category 						{ margin-bottom: 60px;}
#carte .main_category>.titre_main			{ font-size: 25px; line-height: 35px; padding-bottom: 5px; margin-bottom: 25px;}
#carte .main_category>.desc_cat				{ margin: -5px 0 25px 0;}

#carte .sub_category .titre_main			{ font-size: 18px; line-height: 26px; margin-bottom: 15px;}
#carte .sub_category .item 					{ grid-template-columns: 1fr 50px; grid-gap: 8px 14px; line-height: 22px;}
#carte .sub_category .name 					{ font-size: 14px; line-height: 22px;}
#carte .sub_category .prix 					{ text-align: right; font-weight: 500;}
#carte .sub_category .desc 					{ font-size: 12px; line-height: 20px; grid-column: span 2;}
}


/***** commande *****/
#carte header.order .link								{ margin-right: 550px;}
#order 													{ padding: 0 600px 0 60px;}
#order .wrapper											{ width: 100%;}

#order .main_category>.titre_main						{ margin-bottom: 40px;}
#order .main_category>.desc_cat							{ display: none;}
#order .sub_category 									{ margin-bottom: 50px;}
#order .sub_category .titre_main 						{ margin-top: -5px;}
#order .sub_category .item 								{ display: block; border: 1px solid #ccc; margin-bottom: 15px; padding: 20px 100px 20px 20px; border-radius: 8px; position: relative; cursor: pointer;}
#order .sub_category .item:after						{ width: 36px; height: 36px; border-radius: 50px; background: url("../images/plus.svg") 50% no-repeat #eee; position: absolute; right: 20px; top: 50%; margin-top: -18px; content: "";}
#order .sub_category .name span 						{ display: none;}
#order .sub_category .prix 								{ text-align: left; margin: 4px 0 -2px 0;}
#order .sub_category .desc 								{ margin: 6px 0;}

#order #card											{ width: 540px; position: fixed; right: 0; top: 0; bottom: 0; background: #fff; box-shadow: 0 0 40px 0 rgb(0 0 0 / 10%); padding: 40px 60px;}
#order #card .row										{ position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr;}
#order #card .titre_main 								{ font-size: 35px; line-height: 35px; font-weight: 700; margin-top: -5px; position: relative;}

#order #card .order 									{ margin-right: -20px; padding: 5px 20px 0 0; overflow-y: auto;}
#order #card .order::-webkit-scrollbar 					{ width: 3px;}

#order #card .order .item 								{ padding: 5px 0 15px 0; border-bottom: 1px solid #ccc; margin-bottom: 15px;}
#order #card .order .product 							{ display: grid; grid-template-columns: 15px 1fr auto auto; grid-gap: 10px; font-size: 15px; line-height: 25px; letter-spacing: 0.6px;}
#order #card .order .product .name 						{ font-weight: 500; font-size: 15px; padding-right: 5px;}
#order #card .order .product .qty 						{ display: grid; grid-template-columns: 36px 36px; grid-gap: 10px; margin-top: -7px; padding-left: 10px;}
#order #card .order .product .qty div					{ width: 36px; height: 36px; border-radius: 50px; display: block; cursor: pointer;}
#order #card .order .product .qty .less					{ background: url("../images/less.svg") 50% no-repeat #eee;}
#order #card .order .product .qty .more					{ background: url("../images/plus.svg") 50% no-repeat #eee;}
#order #card .order .disclaimer							{ font-size: 12px; line-height: 20px; margin: 30px 0 0 0; background: #eee; padding: 15px 25px; border-radius: 5px;}

#order #card .total .prix 								{ margin: 30px 0 20px 0; font-size: 14px; line-height: 22px;}
#order #card .total .prix .item 						{ display: grid; grid-template-columns: 70% 30%; margin-bottom: 10px;}
#order #card .total .prix .item div:last-child			{ text-align: right;}
#order #card .total .prix .disclaimer_delivery			{ font-size: 12px; color: #ca2d2d; margin: -5px 0 10px 0;}
#order #card .total .prix .disclaimer_delivery .orange	{ color: #fd8d42;}
#order #card .total .link_order 						{ background-image: linear-gradient(to top, #85c700 0% 50%, #000 50% 100%); display: block; text-align: center; border-radius: 8px;}
#order #card .total .link_cancel 						{ display: block; text-align: center; border: 1px solid #ccc; color: #000; line-height: 30px; font-size: 12px; margin-top: 15px; border-radius: 5px;}
#order #card .display_card								{ display: none;}
#order #card .hide_card									{ display: none;}

#carte.no_scroll 										{ overflow: hidden;}
#carte .livraison 										{ width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 999; background: rgba(0,0,0,0.75); display: block;}
#carte .livraison ::-webkit-scrollbar 					{ display: none;}
#carte .livraison .infos 								{ width: 600px; border-radius: 10px; background: #fff; padding: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;}
#carte .livraison .infos .titre_main					{ font-size: 35px; line-height: 30px; font-weight: 700;}
#carte .livraison .infos ul								{ padding: 15px 20px; border-radius: 8px; line-height: 26px; margin: 25px 0; border: 1px solid #85c700;}
#carte .livraison .infos select 						{ -webkit-appearance: none; appearance: none; display: block; background: url("../images/arrow_down.svg") calc(100% - 25px) 50% no-repeat #f1f1f1; border: none; font: 400 14px/20px "Poppins"; letter-spacing: 0.4px; padding: 0 30px; width: 100%; height: 60px; border-radius: 8px; margin: 10px 0 20px 0;}
#carte .livraison .infos .close							{ cursor: pointer; width: 100%; text-align: center; border-radius: 8px; background-image: linear-gradient(to top, #000 0% 50%, #85c700 50% 100%);}

@media (min-width:1201px) { 
#carte header.order .link:hover 						{ background-color: #000;}
#order #card .total .link_cancel:hover					{ background: #eee; border-color: #eee;}
}
@media (max-width:1800px) { 
#carte header.order .link 								{ margin-right: 440px;}
#order 													{ padding: 0 500px 0 60px;}
#order #card											{ width: 440px; padding: 40px;}
#order #card .total .disclaimer 						{ padding: 12px 20px; font-size: 11px;}
}
@media (max-width:1200px) { 
#carte header.order .link 								{ margin: 0;}
#order .main_category>.titre_main						{ margin-bottom: 30px;}
#order 													{ padding: 0 5vw;}
#order .sub_category 									{ margin-bottom: 40px;}
#order #card											{ width: 100%; z-index: 999; padding: 40px; top: 100%; box-shadow: none; transition: top 400ms ease-in-out;}
#order #card.active										{ top: 0;}
#order #card .titre_main 								{ line-height: 60px; margin: -10px 0 30px 0;}
#order #card .display_card								{ display: block; width: 100%; height: 70px; background: #000; position: absolute; left: 0; top: -70px; text-align: center;}
#order #card .display_card span							{ display: inline-block; font-size: 14px; line-height: 70px; color: #fff; background: url(../images/panier.svg) 0 45% no-repeat; padding-left: 40px;}
#order #card .hide_card									{ display: block; width: 60px; height: 60px; background: url("../images/close.svg") 50% no-repeat #000; border-radius: 5px; position: absolute; right: 0; top: 0;}
}
@media (max-width:600px) { 
#order .main_category>.titre_main						{ margin-bottom: 25px;}
#order 													{ padding: 0 7.5vw;}
#order .sub_category 									{ margin-bottom: 30px;}
#order .sub_category .titre_main 						{ margin-top: 0;}
#order .sub_category .item 								{ border-radius: 5px; padding: 15px 70px 15px 15px; margin-bottom: 10px;}
#order .sub_category .item:after 						{ width: 30px; height: 30px; right: 15px; margin-top: 0; top: 15px; background-size: 12px auto;}
#order #card .display_card								{ height: 50px; top: -50px;}
#order #card .display_card span							{ font-size: 12px; line-height: 50px; background-size: 18px auto;  padding-left: 30px;}
}



/***** recap order *****/
#order_recap 											{ padding: 100px 0 20px 0;}
#order_recap .formulaire								{ max-width: 1000px;}
#order_recap .titre_main 								{ margin-bottom: 10px;}
#order_recap .bloc_form									{ margin-bottom: 40px;}
#order_recap .order  									{ margin: 25px 0;}
#order_recap .order .item:not(:last-child) 				{ margin-bottom: 20px;}
#order_recap .order .product 							{ display: grid; grid-template-columns: auto 1fr auto auto; grid-gap: 10px; font-size: 16px; line-height: 26px; font-weight: 500; letter-spacing: 0.6px;}
#order_recap .order .product .name 						{ font-weight: 500; font-size: 16px;}
#order_recap .order .description 						{ font-size: 14px; line-height: 24px; margin-top: 5px;}
#order_recap .order input[type="text"]					{ margin: -5px 0 20px 0;}
#order_recap .order .total  							{ margin: 30px 0 50px 0; border: 1px solid #ccc; padding: 20px 30px; border-radius: 8px;}
#order_recap .order .total .item 						{ margin: 5px 0;}
#order_recap .order .total .product 					{ grid-template-columns: 1fr auto; font-weight: 400;}
#order_recap .order .total .product .name				{ font-weight: 400;}
#order_recap .order .total .product .prix				{ text-align: right;}
#order_recap #rgpdForm 									{ padding: 0;}
#order_recap .link										{ border-radius: 8px; background-image: linear-gradient(to top, #85c700 0% 50%, #000 50% 100%);}
#order_recap .sous_titre 								{ padding-top: 40px; border-top: 1px solid #000;}
#order_recap .link_cancel 								{ display: inline-block; text-align: center; border: 1px solid #ccc; color: #000; line-height: 60px; font-size: 14px; border-radius: 8px; padding: 0 30px; float: left;}

#order_recap .confirmation_form 						{ display: grid; min-height: 60vh; align-items: center; padding-bottom: 20px;}

@media (min-width:1201px) { 
#carte .livraison .infos .close:hover,
#order #card .link_order:hover,
#order_recap .link:hover 								{ background-position: 0 0;}
#order_recap .link_cancel:hover							{ background: #eee; border-color: #eee;}
}
@media (max-width:1600px) { 
#order_recap 											{ padding: 80px 0 0 0;}
}
@media (max-width:1200px) { 
#order_recap 											{ padding: 50px 0 0 0;}
#order_recap .titre_main 								{ font-size: 35px; line-height: 45px;}
}
@media (max-width:600px) { 
#order_recap 											{ padding: 30px 0 40px 0;}
#order_recap .titre_main 								{ font-size: 25px; line-height: 35px; margin-bottom: 5px;}
#order_recap .bloc_form									{ margin-bottom: 30px;}
#order_recap .order  									{ margin: 15px 0;}
#order_recap .order .product 							{ font-size: 14px; line-height: 22px;}
#order_recap .order .product .name 						{ font-size: 14px;}
#order_recap .order .description 						{ font-size: 12px; line-height: 20px;}
#order_recap .order input[type="text"]					{ margin: -10px 0 20px 0; height: 46px;}
#order_recap .order .total  							{ margin: 20px 0 35px 0; padding: 10px 20px; border-radius: 5px;}
#order_recap .sous_titre 								{ padding-top: 25px; font-size: 16px; line-height: 22px;}
#order_recap .link										{ border-radius: 5px;}
#order_recap .link_cancel 								{ display: block; line-height: 30px; font-size: 12px; border-radius: 5px; float: none; margin-top: 10px;}
}










/**** allergenes ****/
.allergene 									{ width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 999; display: none;}
.allergene ::-webkit-scrollbar  			{ display: none;}
.allergene .close_bg						{ width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.75; cursor: url(../images/close_cursor.svg), auto;}
.allergene .infos							{ width: 85vw; max-width: 500px; background: #fff; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); padding: 45px 60px; overflow-y: scroll; z-index: 20;}
.allergene .infos .titre_main				{ font-size: 25px; line-height: 35px; color: #85c700;}
.allergene .infos ul li 					{ padding: 0 0 0 30px; background: url("../images/check.svg") 0 5px no-repeat;}
.allergene .infos .close 					{ cursor: pointer; width: 20px; height: 20px; background: url("../images/close.svg") 50% no-repeat; filter: invert(1); position: absolute; right: 35px; top: 35px;}

/* open close animation*/
.allergene .infos							{ opacity: 0; transition: all 300ms ease-in-out 100ms;}
.allergene .infos.active					{ opacity: 1; transition-delay: 300ms;}

@media (max-width:1200px) { 
.allergene .infos .titre_main				{ font-size: 20px; line-height: 30px;}
}
@media (max-width:600px) { 
.allergene .infos							{ padding: 20px 7.5vw;}
.allergene .infos .titre_main				{ margin-bottom: 10px;}
.allergene .infos ul li 					{ padding: 0 0 0 25px; background-size: 16px auto; background-position: 0 4px;}
.allergene .infos .close 					{ right: 20px; top: 20px;}
}



/***** footer carte *****/
#carte footer 								{ background: #000; color: #fff; position: relative;}
#carte footer ul   							{ padding: 20px 0; line-height: 0; margin-top: 80px;}
#carte footer ul li 						{ display: inline-block; font-size: 11px; line-height: 20px; margin-right: 25px; letter-spacing: 1px; position: relative;}
#carte footer ul li a 						{ color: #fff;}
#carte footer ul li:after					{ width: 1px; height: 8px; content: ""; position: absolute; right: -13px; top: 6px; background: #85c700;}
#carte footer ul li:last-child:after 		{ display: none;}
#carte footer .toponweb						{ display: block; z-index: 85; position: absolute; right: 0; bottom: 0; transition: bottom 400ms ease-in-out;}
#carte footer .toponweb span				{ width: auto; height: 60px; display: block; padding: 20px; background: linear-gradient(to left, #222 0% 50%, #000 50% 100%); background-size: 200% 100%; background-position: 100% 0;}
#carte footer .toponweb img					{ width: 76px; height: auto; display: block; margin: 0 auto; filter: invert(1); transition: all 400ms ease-in-out;}
#carte footer .toponweb.show				{ bottom: 0;}

@media (max-width:1600px) { 
#carte footer ul   							{ margin-top: 60px;}
}
@media (max-width:1200px) { 
#carte footer ul   							{ margin-top: 40px;}
}
@media (max-width:600px) { 
#carte footer ul 	 						{ text-align: left; padding: 20px 0; margin: 0;}
#carte footer ul li 						{ display: block; margin: 0; font-size: 10px; line-height: 22px;}
#carte footer ul li:after					{ display: none;}
}