﻿@font-face{font-family:'montserratbold';src:url('../font/montserrat-bold-webfont.woff2') format('woff2'), url('montserrat-bold-webfont.woff') format('woff');font-weight:normal;font-style:normal;}
@font-face{font-family:'montserratmedium';src:url('../font/montserrat-medium-webfont.woff2') format('woff2'), url('montserrat-medium-webfont.woff') format('woff');font-weight:normal;font-style:normal;}
@font-face{font-family:'montserratregular';src:url('../font/montserrat-regular-webfont.woff2') format('woff2'), url('montserrat-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal;}
@font-face{font-family:'montserratsemibold';src:url('../font/montserrat-semibold-webfont.woff2') format('woff2'), url('montserrat-semibold-webfont.woff') format('woff');font-weight:normal;font-style:normal;}
@font-face{font-family:'montserratsemibold_italic';src:url('../font/montserrat-semibolditalic-webfont.woff2') format('woff2'), url('../font/montserrat-semibolditalic-webfont.woff') format('woff');font-weight:normal;font-style:normal;}
@font-face{font-family:'IndieFlower';src:local('IndieFlower'), url('../font/indie-flower-v12-latin-regular.woff2') format('woff2');font-style:normal;}
@font-face {
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 100;
  src: url('../font/open-sans-v28-latin-regular.eot'); 
  src: local(''),
       url('../font/open-sans-v28-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('../font/open-sans-v28-latin-regular.woff2') format('woff2'), 
       url('../font/open-sans-v28-latin-regular.woff') format('woff'),
       url('../font/open-sans-v28-latin-regular.ttf') format('truetype'),
       url('../font/open-sans-v28-latin-regular.svg#OpenSans') format('svg'); 
}

/* --- Commun ---*/
*,html{margin:0;padding:0}
body,html{margin:0;padding:0;width:100%;height:100%}
body{font-size:120%;font-family:'OpenSans';color:#333;font-style:normal;font-variant:normal;font-weight:100;outline:0;line-height:1.3}
a{white-space:nowrap;color:#000;text-decoration:none;-webkit-transition:color 0.15s ease-out;-moz-transition:color 0.15s ease-out}
a:hover{color:#555}
.cur{cursor:pointer}
.img100{width:100%}
.tab{border:0;cellpadding:0;border-collapse:collapse}
.cent{display:table;width:100%}
.center{text-align:center}
.left{text-align:left}
.right{text-align:right}
.v10{width:100%;height:10px}
.v20{width:100%;height:20px}
.bulle-red{float:left;width:20px;padding:3px 8px 3px 8px;background:#C1272D;border-radius:25px;text-align:center;color:#fff;font-weight:bold}
.prix{width:100%;text-align:center;color:#F52948;font-family:'Lucida Calligraphy';font-weight:bold;font-size:135%}
.red{color:red}
.liseret{width:100%;height:3px;background:#C70039}
.containerfull{display:table;max-width:100%;width:calc(100% - 40px);padding:10px;margin-left:auto;margin-right:auto}
.container300{display:table;max-width:300px;width:100%;margin-left:auto;margin-right:auto}
.container400{display:table;max-width:400px;width:100%;margin-left:auto;margin-right:auto}
.container600{display:table;max-width:600px;width:100%;margin-left:auto;margin-right:auto}
.container800{display:table;max-width:800px;width:100%;margin-left:auto;margin-right:auto}
.container1024{display:cell;max-width:1024px;width:100%;margin-left:auto;margin-right:auto}
.container1200{display:table;max-width:1200px;width:100%;margin-left:auto;margin-right:auto}
.container1440{display:table;max-width:1440px;width:100%;margin-left:auto;margin-right:auto}
.container1920{display:table;max-width:1920px;width:100%;margin-left:auto;margin-right:auto}
.box-2{display:flex;flex-wrap:wrap;text-align:center;width:100%;border:1px solid #ccc}
.box-2>*{flex:1 1 600px;padding:3px;margin:3px}
.box-3{display:flex;flex-wrap:wrap;text-align:center;width:100%}
.box-3>*{flex:1 1 400px;padding:3px;margin:3px}
.box-4{display:flex;flex-wrap:wrap;text-align:left;width:100%}
.box-4>*{flex:1 1 180px;padding:3px}
.titre{font-family:'IndieFlower';color:#555;font-size:180%}
.titre-xl{font-family:'IndieFlower';color:#fff;font-size:350%;text-shadow: 1px 1px 2px #000, 0 0 1em #000, 0 0 0.2em #000;letter-spacing:10px}
.titre-pt{color:#fff;font-size:180%}
.fond{background-image:url(../../images/vitrine/fond.jpg);background-size:100% 100%;background-repeat: no-repeat;background-attachment:fixed;background-position:bottom}
@media(max-width:992px){.titre-xl{font-size:160%}.titre-pt{font-size:130%}.titre{font-size:130%}.fond{background-image:none}}
.btn-plus{width:200px;margin-top:20px;margin-bottom:20px;padding:15px 10px 10px 10px;background:#FF5733;color:#fff;font-weight:bold;border-radius:20px;margin:auto;font-family:'montserratsemibold';text-shadow: 1px 1px 2px #000, 0 0 1em #000, 0 0 0.2em #000}
.btn-fin{width:160px;font-size:100%;background:#0075ff;border:none;color:#fff;padding:10px;border-radius:5px;margin:5px}.btn-fin:hover{opacity:0.8}
/* Menu Famille */
.list-menu::-webkit-scrollbar{height:10px}
.list-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px grey;border-radius:5px;}
.list-menu::-webkit-scrollbar-thumb{background:orange;border-radius:5px;}
.list-menu::-webkit-scrollbar-thumb:hover{background:#b30000;}
.flex-center{display:flex;align-items:center;}
.menu-wrapper{background:#fff}
.menu-container{max-width:1200px;margin:auto;}
.menu1 .menu-container{letter-spacing:.5px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#222;padding:2.5px 10px;}
.menu1 .content-left{display:flex;align-items:center;}
.menu1 .text-commande{margin-left:11px;font-family:'montserratbold';}
.menu1 .account{position:relative;cursor:pointer;font-family:'montserratsemibold';}
.menu1 .acount-option{left:auto;right:0px;top:26px;box-shadow:rgb(204 204 204) 1px 0px;}
.menu2{background:#ddd;}/*#ccc*/
.menu2 .menu-container{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:20px 10px;}
.menu2 .cart-container{font-size:12px;color:#000;font-family:'montserratsemibold';line-height:1.7em;}
.menu2 .logo{max-width:336px;max-height:67px;}
.menu2 .form-search{height:50px;position:relative;}
.menu2 .input-field{outline:none;border:none;padding-left:18px;padding-right:131px;height:100%;width:342px;border-radius:5px;color:#000;font-family:'montserratsemibold_italic';letter-spacing:1px;}
.menu2 .btn-search{color:#fff;background:orange;position:absolute;top:50%;right:6px;font-family:'montserratsemibold';font-size:12px;padding:14px 16px 12px;border-radius:9px;transform:translateY(-50%);border:none;outline:none;cursor:pointer;}
.menu2 .input-field::placeholder{color:rgb(118, 118, 118);}
.toggle-menu{display:none;cursor:pointer;}
.group-icon-sm > *:not(:last-child){display:none;font-size:23px;color:red;margin-right:26px;cursor:pointer;}
.menu3-1-responsive{display:none;}
.menu3-1-container{font-family:'montserratsemibold';display:flex;align-items:center;justify-content:flex-end;}
.menu3-1-container ul{margin:0;padding:0;display:flex;align-items:center;}
.menu3-1-container ul li{list-style:none;letter-spacing:normal;}
.menu3-1-container .menu-item a{text-decoration:none;padding:17px 26px 17px 0;display:inline-block;color:#222;}
.menu3{background:#E8ECE7;box-shadow:2px 2px 2px 0px #ebebeb;}
.menu3 .menu-item-container{display:none;position:absolute;left:0;right:0;width:100%;top:54px;background:#E8ECE7;color:#222;padding:23px 5px;padding-top:0;margin:0;z-index:1000}
.menu-item-container a{text-decoration:none;color:#222;line-height:29px;letter-spacing:normal;}
.menu3 .menu-item-container ul{margin:0;padding:0}
/*.menu3 .menu-item-container li{width:200px;list-style:none;letter-spacing:normal;padding:0 13px;}*/
.menu3 .menu-item-container li{width:auto;list-style:none;letter-spacing:normal;padding:0 13px;}
.menu3 .menu-container{position:relative;font-size:14px;letter-spacing:3px;max-width:max-content;}
.menu3 .list-menu{display:flex;align-items:center;font-family:'montserratregular';margin:0;padding:0;overflow-x:auto;}
.menu3 .menu-item{padding:20px 30px;cursor:pointer;list-style:none;}
.menu3 .menu-item:hover{background:#ccc}
.menu3 .menu3-1-responsive .menu-item:hover a{color:#fff;}
.menu3 .menu-item .menu-name{text-overflow:ellipsis;white-space:nowrap;}
.menu3 .menu-item.active > ul{display:flex;flex-wrap:wrap;}
.menu3 .menu-name .chevron{display:none;position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:17px;}
.menu3 .ss-title{font-family:'montserratsemibold';margin-bottom:10px;display:inline-block;font-size:15px;padding:0 13px}
.menu3 .dir{margin-top:25px;padding-top:0;}
.menu3 .ss-title + ul li:hover{background:#ffa500;}
.menu3 .ss-title + ul li:hover a{color:#fff;}
.menu3 .btn-close-menu{display:none;}
.acount-option{background:#fff;font-size:12px;position:absolute;padding:9px 15px 8px;border-radius:3px;top:100%;left:0px;box-shadow:0px 2px 4px 0px #ccc;width:200px;font-family:'montserratregular';line-height:22px;display:none;z-index:9;}
.acount-option ul{padding:0;margin:0;}
.acount-option ul li{list-style:none;}
.acount-option ul li a{color:#222;text-decoration:none;}
@media(min-width:992px){.menu2 .form-search{display:block!important;}.menu3-1-container{display:flex;}.menu3{display:block;}}
@media(max-width:1024px){.menu2 .logo{max-width:145px;}}
@media(max-width:992px){.menu2 .logo{display:block;}
.menu2 .menu-container{padding:10px 25px}
.toggle-menu{color:#000;font-size:25px;}
.toggle-menu{display:block;}
.group-icon-sm > *:not(:last-child){display:block;}
.menu1, .menu3{display:none;}
.menu2 .form-search{display:none;position:absolute;top:100%;z-index:9;box-shadow:0px 2px 4px 0px #ccc;width:100%;background:#fff;left:0;right:0;}
.menu2 .input-field{width:calc(100% - 80px);border-radius:0;padding-right:7px;padding-left:16px;height:94%;}
.menu2{position:fixed;top:0;left:0;right:0;z-index:999;box-shadow:0px 2px 4px 0px #ccc;}
.menu3-1-responsive{display:block;}
.menu3-1-container{display:none;}
.menu3-1-responsive-container{margin:0;padding:0;}
.menu3-1-responsive-container .menu-item a{padding:17px 22px;display:inline-block;font-weight:bold;font-size:14px;text-decoration:none;color:#222;font-family:'montserratsemibold';}
.menu3 .menu-container{max-width:1200px}
.menu3{overflow-x:hidden;}
.menu3 .menu-item.active > ul{display:block;}
.menu3{position:fixed;top:0;left:0;right:0;z-index:9999;height:100vh;overflow-y:auto;}
.menu3 .list-menu{display:block;padding:0;margin:0;}
.menu3 .menu-item{padding:0}
.menu3 .menu-item-container{position:relative;padding:22px 4px 6px 0px;top:auto;left:auto;right:auto;}
.menu3{padding-top:44px;}
.menu3 .menu-item-container li{width:100%;padding:0;margin-bottom:20px;}
.menu3 .menu-item-container .dir li, .menu3 .ss-title{padding:0 23px;}
.menu3 .menu-item{position:relative;}
.menu3 .menu-item .menu-name{padding:17px 22px;display:inline-block;font-weight:bold;font-size:14px;}
.menu3 .btn-close-menu{display:inline-block;color:#222;position:fixed;right:19px;top:10px;cursor:pointer;}
.menu3 .menu-name .chevron{display:inline-block;}}
/*--- Carrousel ---*/
/* .owl-theme .owl-nav{margin:0;line-height:0;height:0;position:absolute;top:50%;transform:translateY(-50%);width:100%;font-size:40px;font-family:'montserratsemibold'}
 .owl-carousel .owl-nav button.owl-prev{position:absolute;left:-30px;}
 .owl-carousel .owl-nav button.owl-next{position:absolute;right:-30px;}
 .owl-carousel .owl-stage{margin:auto;}
 .clearfix{display:table;clear:both;content:"";}
 .carousel-wrapper{padding:32px;}
 .products-list{}
 .products-list .product-item{}
 .products-list .product-item-container{padding:15px 14px;background-color:#fff;border:1px solid #e8e4e4;border-radius:15px;}
 .products-list .product-item-container:hover{-webkit-box-shadow:5px 5px 15px rgb(0 0 0 / 5%);box-shadow:5px 5px 15px rgb(0 0 0 / 5%);border:1px solid #BCE3C9;transition:.2s;-moz-transition:.2s;-webkit-transition:.2s;-o-transition:.2s;}
 .product-item-container .img-wrapper{height:210px}
 .product-item-container .img-wrapper img{max-width:100%;object-fit:contain;max-height:100%;display:block;margin:auto;position:relative;top:50%;transform:translateY(-50%);}
 .product-item-container .description-wrapper{height:129px;margin-top:23px;}
 .product-item-container .libelle{text-align:center;font-size:13px;line-height:1.5em;max-height:calc(1.5em*2);text-transform:uppercase;font-family:'montserratbold';overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
 .product-item-container .prise-cart{margin-top:16px;padding:0 5px;display:flex;align-items:center;justify-content:space-between;}
 .product-item-container .prise{font-size:18px;font-family:montserratbold;}
 .product-item-container .cart-picto{display:inline-block;color:#183153;font-size:25px;cursor:pointer;}
 .product-item-container .conditionnement{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:center;margin-top:15px;}
*/
 /* --- Connect ---*/
*{box-sizing:border-box;}
.popup-connect{font-size:100%;color:#000;font-family:'montserratsemibold';line-height:1.7em;}
.open-btn-connect{display:flex;justify-content:flex-start;}
.open-button-connect{background-color:#1c87c9;color:white;padding:12px 20px;border:none;border-radius:5px;cursor:pointer;opacity:0.8;position:fixed;}
.login-popup-connect{position:relative;text-align:left;width:100%;}
.form-popup-connect{display:none;position:fixed;left:50%;top:calc(50% - 300px);transform:translate(-45%, 5%);border:2px solid #666;z-index:9;}
.form-container-connect{width:400px;max-width:400px;padding:20px;background-color:#fff;}
.form-container-connect input[type=text], .form-container-connect input[type=password]{width:100%;padding:10px;margin:5px 0 22px 0;border:none;background:#eee;}
.form-container-connect input[type=text]:focus, .form-container-connect input[type=password]:focus{background-color:#ddd;outline:none;}
.form-container-connect .btn-connect{background-color:#23BB05;color:#fff;padding:12px 20px;border:none;cursor:pointer;width:100%;margin-bottom:10px;opacity:0.8;}
.form-container-connect .cancel-connect{background-color:#cc0000;}
.form-container-connect .btn-connect:hover, .open-button-connect:hover{opacity:1;}
 /*--- Hautde page --*/
 a#cRetour{border-radius:3px;padding:12px;font-size:32px;text-align:center;color:#fff;background:#0075ff;position:fixed;right:5px;opacity:1;z-index:9998;transition:all ease-in 0.2s;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-decoration:none}
 a#cRetour:before{content:"\25b2"}
 a#cRetour:hover{background:rgba(0, 0, 0, 1);transition:all ease-in 0.2s}
 a#cRetour.cInvisible{bottom:-65px;opacity:0;transition:all ease-in 0.5s}
 a#cRetour.cVisible{bottom:5px}

