/*-----------------------------------------------------------------------*/
/*Reset*/
/*-----------------------------------------------------------------------*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration: none; color: inherit;}sup{vertical-align: top;}i{font-style: italic;}
b{font-weight: 700;}
strong{font-weight: 700;}

/*-----------------------------------------------------------------------*/
/*Starter - Skeleton*/
/*-----------------------------------------------------------------------*/
/*-------------------------*/
/*Margin*/
/*-------------------------*/
.my-auto{margin: auto 0;}
.mx-auto{margin: 0 auto;}
.mt--50{margin-top: -50px;}
.mt-5{margin-top: 5px;}
.mt-10{margin-top: 10px;}
.mt-15{margin-top: 15px;}
.mt-20{margin-top: 20px;}
.mt-25{margin-top: 25px;}
.mt-30{margin-top: 30px;}
.mt-35{margin-top: 35px;}
.mt-40{margin-top: 40px;}
.mt-45{margin-top: 45px;}
.mt-50{margin-top: 50px;}
.mt-70{margin-top: 70px;}
.mt-75{margin-top: 75px;}
.mt-80{margin-top: 80px;}
.mt-90{margin-top: 90px;}
.mt-100{margin-top: 100px;}

.mb-0{margin-bottom: 0;}
.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;}
.mb-25{margin-bottom: 25px;}
.mb-30{margin-bottom: 30px;}
.mb-35{margin-bottom: 35px;}
.mb-40{margin-bottom: 40px;}
.mb-50{margin-bottom: 50px;}

.ml-auto{margin-left: auto;}
.ml-5{margin-left: 5px;}
.ml-10{margin-left: 10px;}
.ml-15{margin-left: 15px;}
.ml-20{margin-left: 20px;}
.ml-25{margin-left: 25px;}
.ml-30{margin-left: 30px;}
.ml-35{margin-left: 35px;}
.ml-40{margin-left: 40px;}
.ml-45{margin-left: 45px;}
.ml-50{margin-left: 50px;}
.ml-60{margin-left: 60px;}
.ml-70{margin-left: 70px;}
.ml-80{margin-left: 80px;}
.ml-120{margin-left: 120px;}

.mr-5{margin-right: 5px;}
.mr-10{margin-right: 10px;}
.mr-15{margin-right: 15px;}
.mr-25{margin-right: 25px;}
.mr-30{margin-right: 30px;}

.mt-mb-10{margin-top: 10px;margin-bottom: 10px;}

.mar-5{margin: 5px;}
.mar-15{margin: 15px;}
.mx-30{margin: 0 30px;}
.my-15{margin: 15px 0;}

.ml-mr-auto{
    margin-left: auto;
    margin-right: auto;
}


/*-------------------------*/
/*Padding*/
/*-------------------------*/
.pt-10{padding-top: 10px;}
.pt-15{padding-top: 15px;}
.pt-20{padding-top: 20px;}
.pt-25{padding-top: 25px;}
.pt-35{padding-top: 35px;}
.pt-45{padding-top: 45px;}
.pt-50{padding-top: 50px;}
.pt-60{padding-top: 60px;}
.pt-75{padding-top: 75px;}
.pt-80{padding-top: 80px;}
.pt-120{padding-top: 120px;}

.pb-10{padding-bottom: 10px;}
.pb-15{padding-bottom: 15px;}
.pb-20{padding-bottom: 20px;}
.pb-25{padding-bottom: 25px;}
.pb-30{padding-bottom: 30px;}
.pb-35{padding-bottom: 35px;}
.pb-45{padding-bottom: 45px;}
.pb-50{padding-bottom: 50px;}
.pb-75{padding-bottom: 75px;}
.pb-100{padding-bottom: 100px;}
.pb-150{padding-bottom: 150px;}

.pl-15{padding-left: 15px;}
.pl-100{padding-left: 100px;}

.pr-5{padding-right: 5px;}
.pr-10{padding-right: 10px;}
.pr-15{padding-right: 15px;}
.pr-20{padding-right: 20px;}
.pr-25{padding-right: 25px;}
.pr-30{padding-right: 30px;}

.pl-pr-5{padding-left: 5px;padding-right: 5px;}
.pl-pr-10{padding-left: 10px;padding-right: 10px;}
.pl-pr-15{padding-left: 15px;padding-right: 15px;}
.pl-pr-20{padding-left: 20px;padding-right: 20px;}
.pl-pr-25{padding-left: 25px;padding-right: 25px;}
.pl-pr-30{padding-left: 30px;padding-right: 30px;}
.pl-pr-35{padding-left: 35px;padding-right: 35px;}
.pl-pr-50{padding-left: 50px;padding-right: 50px;}
.pl-pr-60{padding-left: 60px;padding-right: 60px;}
.pl-pr-70{padding-left: 70px;padding-right: 70px;}
.pl-pr-80{padding-left: 80px;padding-right: 80px;}

.pt-pb-5{padding-top: 5px;padding-bottom: 5px;}
.pt-pb-10{padding-top: 10px;padding-bottom: 10px;}
.pt-pb-15{padding-top: 15px;padding-bottom: 15px;}
.pt-pb-20{padding-top: 20px;padding-bottom: 20px;}
.pt-pb-25{padding-top: 25px;padding-bottom: 25px;}
.pt-pb-30{padding-top: 30px;padding-bottom: 30px;}
.pt-pb-35{padding-top: 35px;padding-bottom: 35px;}
.pt-pb-45{padding-top: 45px;padding-bottom: 45px;}
.pt-pb-50{padding-top: 50px;padding-bottom: 50px;}
.pt-pb-60{padding-top: 60px;padding-bottom: 60px;}

.pad-5{padding: 5px;}
.pad-10{padding: 10px;}
.pad-20{padding: 20px;}
.pad-25{padding: 25px;}
.pad-35{padding: 35px;}
.pad-50{padding: 50px;}

/*-------------------------*/
/*Fonts*/
/*-------------------------*/
.fs-0{font-size: 0;}
.fs-6{font-size: 6px;}
.fs-9{font-size: 9px;}
.fs-10{font-size: 10px;}
.fs-11{font-size: 11px;}
.fs-12{font-size: 12px;}
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-16{font-size: 16px;}
.fs-17{font-size: 17px;}
.fs-18{font-size: 18px;}
.fs-19{font-size: 19px;}
.fs-20{font-size: 20px;}
.fs-21{font-size: 21px;}
.fs-22{font-size: 22px;}
.fs-24{font-size: 24px;}
.fs-25{font-size: 25px;}
.fs-30{font-size: 30px;}
.fs-40{font-size: 40px;}
.fs-44{font-size: 44px;}
.fs-45{font-size: 45px;}
.fs-60{font-size: 60px;}

.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-700{font-weight: 700;}
.fw-900{font-weight: 900;}

.lh-15{line-height: 15px;}
.lh-20{line-height: 20px;}
.lh-22{line-height: 22px;}
.lh-25{line-height: 25px;}
.lh-28{line-height: 28px;}
.lh-30{line-height: 30px;}
.lh-35{line-height: 35px;}
.lh-40{line-height: 40px;}
.lh-60{line-height: 60px;}
.lh-70{line-height: 70px;}

.ls--05{letter-spacing: -0.5px;}
.ls-03{letter-spacing: 0.3px;}
.ls-04{letter-spacing: 0.4px;}
.ls-05{letter-spacing: 0.5px;}
.ls-06{letter-spacing: 0.6px;}
.ls-09{letter-spacing: 0.9px;}
.ls-1-2{letter-spacing: 1.2px;}

.style-italic{font-style: italic;}
.upper{text-transform: uppercase;}

.color-white{color: #fff;}
.color-black{color: #000;}


/*-------------------------*/
/*Général CSS*/
/*-------------------------*/
.noscroll{overflow: hidden;}
.noscroll-y{overflow-y: hidden; height: 100vh}

.show-m, .showm{display: none;}
.show-t, .showt{display: none;}

.w50{width: 50px;}

.w30p{width: 30%;}
.w48p{width: 48%;}
.w75p{width: 75%;}
.w90p{width: 90%;}
.w100p{width: 100%;}
.midsize{width: calc(50% - 1rem);}

.h10{height: 10px;}
.h50{height: 50px;}
.h-auto{height: auto;}
.h100p{height: 100%;}

.maxw-90p{max-width: 90%;}

.d-block{display: block;}
.d-inlineblock{display: inline-block;}
.d-none{display: none;}
.d-grid{
    display: -ms-grid;
    display: grid;
}

.pointer{cursor: pointer;}
.no-underline{text-decoration: none;}
.underline{text-decoration: underline;}
.line-through{text-decoration: line-through;}

.align-center{text-align: center;}
.align-left{text-align: left;}
.align-right{text-align: right;}
.align-justify{text-align: justify;}

.pos-absolute{position: absolute;}
.pos-relative{position: relative;}
.pos-fixed{position: fixed;}

.borderbox{box-sizing: border-box}

.flex{display: flex;}
.inline-flex{display: inline-flex;}
.justify-center{justify-content: center;}
.justify-between{justify-content: space-between;}
.justify-around{justify-content: space-around;}
.justify-evenly{justify-content: space-evenly;}
.justify-start{justify-content: flex-start;}
.justify-end{justify-content: flex-end;}
.item-center{align-items: center;}
.item-start{align-items: flex-start;}
.item-end{align-items: flex-end;}
.self-center{align-self: center;}
.dir-column{flex-direction: column;}
.flex-wrap{flex-wrap: wrap;}
.flex1{flex: 1;}
.flex-all-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.inlineflex-all-center{
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.bottom-0{bottom: 0}
.vertical-align-middle{vertical-align: middle;}
@media screen and (min-width: 1024px) {
    .d-none-d{display: none;}
    .show-d{display: block;}

    .show-d.flex,
    .show-d.flex-all-center {
        display: flex;
    }
    .show-m-t{display: none;}
    .show-m{display: none;}
}

@media screen and (max-width: 1023.98px) {
    /*-------------------------*/
    /*Margin*/
    /*-------------------------*/
    .mt-0-m-t{margin-top: 0 !important;}
    .mt-5-m-t{margin-top: 5px;}
    .mt-10-m-t{margin-top: 10px;}
    .mt-15-m-t{margin-top: 15px;}
    .mt-20-m-t{margin-top: 20px;}
    .mt-25-m-t{margin-top: 25px;}
    .mt-30-m-t{margin-top: 30px;}
    .mt-40-m-t{margin-top: 40px;}
    .mt-50-m-t{margin-top: 50px;}
    .mt-75-m-t{margin-top: 75px;}

    .ml-0-m-t{margin-left: 0 !important;}
    .ml-10-m-t{margin-left: 10px;}
    .ml-15-m-t{margin-left: 15px;}
    .ml-30-m-t{margin-left: 30px;}

    .mb-0-m-t{margin-bottom: 0;}
    .mb-15-m-t{margin-bottom: 15px;}
    .mb-35-m-t{margin-bottom: 35px;}


    /*-------------------------*/
    /*Padding*/
    /*-------------------------*/
    .pt-0-m-t{padding-top: 0px;}
    .pt-15-m-t{padding-top: 15px;}
    .pt-20-m-t{padding-top: 20px;}
    .pt-25-m-t{padding-top: 25px;}
    .pt-50-m-t{padding-top: 50px;}

    .pb-0-m-t{padding-bottom: 0;}
    .pb-15-m-t{padding-bottom: 15px;}
    .pb-20-m-t{padding-bottom: 20px;}
    .pb-25-m-t{padding-bottom: 25px;}
    .pb-50-m-t{padding-bottom: 50px;}
    .pb-75-m-t{padding-bottom: 75px;}

    .pl-pr-0-m-t{padding-left: 0;padding-right: 0;}
    .pl-pr-15-m-t{padding-left: 15px;padding-right: 15px;}

    .pt-pb-15-m-t{padding-top: 15px;padding-bottom: 15px;}


    /*-------------------------*/
    /*Général CSS*/
    /*-------------------------*/
    .show-d{display: none !important;}
    .show-m-t{display: block;}
    .show-t{display: block;}

    .pos-static-m-t{position: static;}
    .d-block-m-t{display: block;}
    .mygrid.d-block-m-t{display: block;}
    .flex-m-t{display: flex;}
    .dir-column-m-t{flex-direction: column;}
    .justify-center-m-t{justify-content: center;}
    .justify-start-m-t{justify-content: flex-start;}
    .justify-between-m-t{justify-content: space-between;}
    .item-center-m-t{align-items: center;}
    .item-start-m-t{align-items: flex-start;}
    .flex1-m-t{flex: 1;}
    .no-align-self-m-t{align-self: auto;}
    .self-end-m-t{align-self: flex-end;}

    .w100p-m-t{width: 100%;}
    .w48p-m-t{width: 48%;}
    .h-auto-m-t{height: auto;}
    .h-100p-m-t{height: 100%;}
}

@media screen and (max-width: 575.98px) {
    /*-------------------------*/
    /*Fonts*/
    /*-------------------------*/
    .fs-13-m {font-size: 13px;}
    .fs-15-m {font-size: 15px;}
    .fs-18-m {font-size: 18px;}
    .fs-22-m {font-size: 22px;}

    .lh-18-m{line-height: 18px;}
    .lh-20-m{line-height: 20px;}
    .lh-25-m{line-height: 25px;}
    .lh-30-m{line-height: 30px;}
    .lh-32-m{line-height: 32px;}

    .ls-05-m{letter-spacing: 0.5px}

    /*-------------------------*/
    /*Margin*/
    /*-------------------------*/
    .mt-0-m{margin-top: 0;}
    .mt-10-m{margin-top: 10px;}
    .mt-15-m{margin-top: 15px;}
    .mt-20-m{margin-top: 20px;}
    .mt-25-m{margin-top: 25px;}
    .mt-35-m{margin-top: 35px;}
    .mt-40-m{margin-top: 40px;}
    .mt-50-m{margin-top: 50px;}
    .mt-60-m{margin-top: 60px;}
    .mt-75-m{margin-top: 75px;}
    .mt-120-m{margin-top: 120px;}

    .mb-0-m{margin-bottom: 0;}
    .mb-35-m{margin-bottom: 35px;}

    .ml-0-m{margin-left: 0;}
    .ml-10-m{margin-left: 10px;}
    .ml-15-m{margin-left: 15px;}
    .ml-40-m{margin-left: 40px;}

    /*-------------------------*/
    /*Padding*/
    /*-------------------------*/
    .pt-0-m{padding-top: 0;}
    .pt-10-m{padding-top: 10px;}
    .pt-15-m{padding-top: 15px;}
    .pt-25-m{padding-top: 25px;}

    .pb-0-m{padding-bottom: 0;}
    .pb-20-m{padding-bottom: 20px;}
    .pb-25-m{padding-bottom: 25px;}
    .pb-50-m{padding-bottom: 50px;}

    .pt-pb-15-m{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .pt-pb-25-m{
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .pt-pb-35-m{
        padding-top: 35px;
        padding-bottom: 35px;
    }
    .pt-pb-45-m{
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .pl-pr-15-m{
        padding-left: 15px;
        padding-right: 15px;
    }

    .ml-mr-15-m{
        margin-left: 15px;
        margin-right: 15px;
    }
    .pl-pr-25-m{
        padding-left: 25px;
        padding-right: 25px;
    }

    .pad-0-m{padding: 0;}

    /*-------------------------*/
    /*Général CSS*/
    /*-------------------------*/
    .show-t{display: none;}
    .show-m{display: block;}

    .w50p-m{width: 50%;}
    .w90p-m{width: 90%;}
    .w100p-m{width: 100%;}
    .w48p-m{width: 48%;}
    .h-auto-m{height: auto;}
    .h-100p-m{height: 100%;}

    .d-block-m{display: block;}
    .flex-m{display: flex;}
    .justify-between-m{justify-content: space-between;}
    .justify-start-m{justify-content: flex-start;}
    .dir-column-m{flex-direction: column;}
    .dir-columnreverse-m{flex-direction: column-reverse;}
    .self-end-m{align-self: flex-end;}
    .item-start-m{align-items: flex-start;}
    .item-center-m{align-items: center;}

    .align-left-m{text-align: left;}
    .align-center-m{text-align: center;}

    .pos-static-m{position: static;}

    .order1-m{order: 1;}
    .order2-m{order: 2;}
}


/*-----------------------------------------------------------------------*/
/*Fonts Yooji*/
/*-----------------------------------------------------------------------*/
@font-face {
    font-family: 'hello-headline';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/hello-headline/Hello-Headline-Regular.eot');
    src: url('../fonts/hello-headline/Hello-Headline-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/hello-headline/Hello-Headline-Regular.woff2') format('woff2'),
    url('../fonts/hello-headline/Hello-Headline-Regular.woff') format('woff'),
    url('../fonts/hello-headline/Hello-Headline-Regular.ttf') format('truetype'),
    url('../fonts/hello-headline/Hello-Headline-Regular.svg#Hello-Headline-Regular') format('svg');
}
.ff-helloheadline{font-family: 'hello-headline'}


/*-----------------------------------------------------------------------*/
/*Starter - Specifique Yooji*/
/*-----------------------------------------------------------------------*/
body{
    font-family: 'Roboto';
}
.mycontainer{
    max-width: 1312px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.sitepad{
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

.mygrid{
    display: grid;
    grid-template-columns: repeat(16,minmax(0,1fr));
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 2rem;
}

.hr-color-lightgrey{
    height: 1px;
    background-color: #E6E6E6;
    border: none;
}


.bg-white{background-color: #fff;}
.bg-blue{background-color: #306EEC;}
.bg-green{background-color: #008273;}
.bg-green2{background-color: #03934E;}
.bg-lightgrey{background-color: #F6F6F6;}
.bg-red{background-color: #D12100;}
.bg-orange{background-color: #FF7764;}
.bg-chronofresh{background-color: #98BEB7;}
.bg-salmon2{background-color: #E56A54;}

.color-green{color:#317E6F;}
.color-green,.price-color-green{color:#317E6F;}
.color-green2{color:#03934E;}
.color-salmon{color:#ff7764;}
.color-grey{color: #939393;}
.color-blue{color: #306EEC;}
.color-yellow{color: #EAA517;}
.color-pink{color: #D07BC3;}
.color-pink2{color: #D28DD3;}
.color-white{color: #ffffff;}
.color-salmon2{color: #E56A54;}

.border-grey{border: 1px solid #DBDBDB;}
.bt-grey{border-top: 1px solid #DBDBDB;}
.bb-grey{border-bottom: 1px solid #DBDBDB;}
.border-green{border: 1px solid #317E6F;}

.radius-3{border-radius: 3px;}
.radius-5{border-radius: 5px;}
.radius-8{border-radius: 8px;}
.radius-20{border-radius: 20px;}
.radius-circle{border-radius: 50%;}

.inactive{opacity: .4;}

@media screen and (max-width: 1311.98px){
    .sitepad,
    .sitepad-m-t{
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    .sitepad.nopad-m-t{
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (max-width: 1023.98px){
    .mygrid{
        grid-template-columns: repeat(8,minmax(0,1fr));
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}
@media screen and (max-width: 575.98px){
    .mygrid{
        grid-template-columns: repeat(4,minmax(0,1fr));
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
    }
    .sitepad,
    .sitepad-m{
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    .sitepad.nopad-m{
        padding-left: 0;
        padding-right: 0;
    }
    .sitepad-left-m{
        padding-left: 16px;
        padding-right: 0;
    }
}

/*-----------------------------------------------------------------------*/
/*Général Yooji*/
/*-----------------------------------------------------------------------*/
.submiter {
    display: none;
}

.backgroundhover::before {
    content: ' ';
    width: 100vw;
    height: 100vh;
    min-height: calc(100vh - 78px);
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: .7s;
}
.backgroundhover.open::before {
    opacity: 1;
    visibility: visible;
}
.backgroundhover.open {
    z-index: 10;
    position: relative;
}

@media screen and (min-width: 1024px){
    .bubble-grey-hover{
        transition: .3s;
    }
    .bubble-grey-hover:hover{
        background-color: #DBDBDB;
    }
}

/*-----------------------------------------------------------------------*/
/*Header*/
/*-----------------------------------------------------------------------*/
.header {
    position: relative;
    z-index: 11;
}
.header .header-picto{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #DBDBDB;
    z-index: 1;
}
.header .header-picto .pellet{
    top: 10px;
    right: 5px;
    width: 14px;
    height: 14px;
}
.header .header-picto .pellet.pellet-account svg {
    width: 8px;
    height: 8px;
}
.header .header-picto .pellet.pellet-account svg path{
    fill: #317E6F;
}
.header .header-picto.localisation{
    background-color: #98BEB7;
    border-color: #98BEB7;
}
.header .separation-pictos{
    width: 1px;
    height: 20px;
    background-color: #D8D8D8;
    display: block;
    z-index: 1;
}
.header .f_search input{
    width: 340px;
}
.header .f_search input::-webkit-search-cancel-button{
    display: none;
}
.header .f_search .loupe{
    right: 15px;
    top: 14px;
}
.header .f_search .picto-arrow {
    left: 15px;
    top: 19px;
    opacity: 0;
    transition: .3s;
}
.header .f_search.focus .picto-arrow {
    opacity: 1;
}
.header .f_search .picto-arrow {
    left: 15px;
    top: 19px;
    opacity: 0;
}
.header .f_search .picto-arrow svg{
    transform: rotate(180deg);
}

.header .categories{
    opacity: 0;
    visibility: hidden;
    left: 0;
    top: 110px;
    background-color: #fff;
}
.header .categories li{
    width: calc((100% - 100px) / 5);
}
.header .categories li .text{
    top: 0;
    left: 0;
}
.header .categories li .text span{
    text-shadow: 0 0 5px rgba(0,0,0,.85);
}

.header .localisation-m{
    display: none;
}
.header .picto-search-m{
    display: none;
}

.header .search-layer{
    background-color: #fff;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.header .search-layer.showed{
    opacity: 1;
    visibility: visible;
}
.header .f_search{
    z-index: 1;
}
.header .search-layer li a{
    transition: .5s;
}
.header .search-layer li:hover a{
    color: #008273;
}
.header .search-layer li svg{
    width: 14px;
    height: 14px;
}
.header .search-layer li svg path{
    fill: #000;
}
.header .search-container.focus{
    z-index: 11;
}
.header .back-product{
    display: none;
}
.header .main{
    height: 110px;
}

.header .main .tostick{
    transition: .3s;
}
.header .main .tostick.sticky{
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-bottom: solid 1px rgba(0,0,0,.07);
    z-index: 1000;
}
.header .main .tostick.sticky.visible{
    top: 0;
}
.header .logo{
    z-index: 1;
}
.header .f_search .picto-close {
    right: 45px;
    top: 15px;
}
.header .f_search .picto-close .close{
    height: 20px;
    width: 20px;
    background-color: #EAEAEA;
    display: none;
}
.header .f_search .picto-close .separation{
    height: 20px;
    width: 1px;
    background-color: #DBDBDB;
    display: none;
}
.header .f_search .picto-close .close .close-cross{
    width: 10px;
    height: 10px;
}
.header .f_search .picto-close .close .close-cross:before,
.header .f_search .picto-close .close .close-cross:after{
    background-color: #939393;
    height: 10px;
    left: 4px;
    top: 1px;
}
.header .f_search.filled .picto-close .close {
    display: flex;
}
.header .f_search.filled .picto-close .separation {
    display: block;
}
.header .search-layer.visible{
    opacity: 1;
    visibility: visible;
}

@media screen and (min-width: 1024px){
    .header nav > ul > li > a{
        position: relative;
        padding-bottom: 20px;
    }
    .header nav > ul > li > a::after{
        content: '';
        display: inline-block;
        bottom: 0;
        border-bottom: 2px solid #000;
        width: 0;
        -webkit-transition: all .2s;
        -o-transition: all .2s;
        transition: all .2s;
        left: 50%;
        text-align: center;
        position: absolute;
        z-index: 1;
    }
    .header nav > ul > li:hover > a::after{
        content: '';
        bottom: 0;
        border-bottom: 2px solid #000;
        width: 100%;
        left: 0;
    }
    .header nav > ul > li.with-categories:hover > a::after{
        border-bottom: 2px solid #317E6F;
    }
    .header .header-picto.localisation{
        transition: .3s;
    }
    .header .header-picto.localisation:hover{
        background-color: #008273;
        border-color: #008273;
    }

    .header .categories{
        visibility: hidden;
        z-index: 100;
        transform: scaleY(0);
        opacity: 0;
        transition: transform .2s ease,opacity 0ms linear .2s,visibility 0ms linear .2s;
        transform-origin: top center;
    }
    .header li.with-categories:hover .categories{
        visibility: visible;
        transform: scaleY(1);
        opacity: 1;
        transition: transform .25s ease .3s,opacity 0ms,visibility 0ms;
    }
    .header li.with-categories:hover + li a,
    .header li.with-categories:hover + li + li a,
    .header li.with-categories:hover + li + li + li a{
        color: #939393;
    }
    .header .categories .see-all{
        transition: .3s;
    }
    .header .categories .see-all:hover{
        font-weight: 700;
    }
    .header .categories li .background{
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 5px;
        width: 100%;
        height: 0;
        background-color: #008273;
        opacity: .7;
        transition: .3s;
    }
    .header .categories li:hover .background{
        height: calc(100% - 2px);
    }

    .header:not(.transparent) .main{
        background-color: #fff;
    }
}

@media screen and (max-width: 1199.98px){
    /*-------------------------*/
    /*Burger menu*/
    /*-------------------------*/
    .burger-menu {
        border: 1px solid #317E6F;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .burger-menu .icon .bar{
        background-color: #317E6F;
        border-radius: 20px;
        width: 22px;
        height: 3px;
        transition: .2s;
    }
    .burger-menu .icon .bar:not(:first-child){
        margin-top: 5px;
    }
    .header.open .burger-menu {
        border: 0;
    }
    .header.open .burger-menu .bar1{
        transform: rotate(45deg) translate3d(5px, 6px, 10px);
        background-color: #D35B5B;
    }
    .header.open .burger-menu .bar2{
        transform: rotate(-45deg) translate3d(0, 0, 10px);
        background-color: #D35B5B;
    }
    .header.open .burger-menu .bar3{
        transform: rotate(45deg) translate3d(-5px, -5px, 10px);
        background-color: #D35B5B;
    }

    .header .logo{
        margin-left: 10px;
    }
    .header nav{
        position: absolute;
        top: 110px;
        left: 0;
        width: 100%;
        height: calc(100vh - 103px);
        background-color: #fff;
        z-index: 10;
        padding: 16px;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        overflow-y: scroll;
    }
    .header.open nav{
        opacity: 1;
        visibility: visible;
    }
    .header .categories{
        position: static;
    }
    .header nav > ul > li{
        width: 100%;
        border-bottom: 1px solid #DBDBDB;
    }
    .header .categories li{
        width: 100%;
        max-width: 350px;
        height: 80px;
        border-radius: 5px;
    }
    .header .categories li:not(:first-child){
        margin-top: 10px;
    }
    .header .categories li .img-container{
        height: 100%;
    }
    .header .categories li img{
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 5px;
    }
    .header .categories .sitepad{
        padding: 0;
    }
    .header .categories .see-all{
        border: 1px solid #317E6F;
        height: 40px;
        width: 100%;
        max-width: 328px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        margin: auto;
    }

    .header nav > ul > li:not(.with-categories) a{
        color: #317E6F;
        padding: 26px 0;
        display: block;
    }

    .header li.with-categories > a{
        display: block;
    }
    .header .categories li{
        transition-duration: .4s;
        transition-timing-function: ease-in-out;
        opacity: 0;
        transition-delay: 0s;
    }
    .header.open .categories li{
        opacity: 1;
    }
}

@media screen and (max-width: 747.98px){
    .header .header-picto.localisation,
    .header .separation-pictos{
        display: none;
    }

    .header .mycontainer.pt-pb-30{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .header nav{
        top: 74px;
        display: none;
    }
    .header.open nav{
        display: inline-block;
    }
    .header nav .localisation-m{
        display: flex;
        align-items: center;
        padding: 35px 0 70px;
    }
    .header nav .header-picto.localisation{
        display: flex;
    }
    .header .picto-search-m{
        display: block;
    }
    .header .picto-search-m svg path{
        fill: #000;
    }
    .header .f_search{
        background-color: #fff;
        position: fixed;
        left: 0;
        top: calc( -100vh - 30px);
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        transition: .3s;
        z-index: 11;
        height: 100vh;
    }
    .header .f_search.visible{
        top: 0;
    }
    .header .f_search .f_el-pictoright,
    .header .f_search input{
        width: 100%;
    }
    .header .container-all {
        position: relative;
    }

    body.body-product .header  .main{
        position: absolute;
        width: 100%;
        z-index: 10;
    }
    body.body-product .header .burger-menu,
    body.body-product .header .logo{
        display: none;
    }
    body.body-product .header .back-product{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    body.body-product .header .back-product .arrow{
        padding: 4px;
    }
    body.body-product .header .header-picto{
        background-color: #fff;
    }
    .header .search-layer{
        top: 60px;
        left: 15px;
        width: calc(100% - 30px);
        z-index: 101;
        padding: 0;
    }
    .header .main{
        height: 75px;
    }
    .header .f_search .picto-arrow{
        opacity: 1;
    }
    .header .f_search input{
        padding-left: 50px!important;
    }
}

/*-----------------------------------------------*/
/*Special header*/
/*-----------------------------------------------*/
.special-header{
    margin-top: -110px;
    position: relative;
}
@media screen and (min-width: 1024px){
    .header.transparent .logo svg path{
        fill: #fff;
    }
    .header.transparent .color-green,
    .header.transparent nav > ul > li > a{
        color: #fff;
    }
    .header.transparent .header-picto:not(.localisation){
        border-color: #fff;
    }
    .header.transparent .header-picto:not(.localisation) svg path{
        fill: #fff;
    }
    .header.transparent .header-picto .pellet.pellet-account svg path{
        fill: #317E6F;
    }
    .header.transparent .separation-pictos{
        background-color: #fff;
    }
    .header.transparent nav > ul > li > a::after{
        border-color: #fff;
    }
    .header.transparent nav > ul > li:hover > a::after{
        border-color: #fff;
    }
    .header.transparent li.with-categories:hover + li a,
    .header.transparent li.with-categories:hover + li + li a,
    .header.transparent li.with-categories:hover + li + li + li a{
        color: #fff;
    }
}

@media screen and (max-width: 1023.98px){
    .header.transparent.open .main{
        background-color: #fff;
    }
    .header.transparent:not(.open) .burger-menu{
        border-color: #fff;
    }
    .header.transparent:not(.open) .burger-menu .icon .bar{
        background-color: #fff;
    }
    .header.transparent:not(.open) .logo svg path{
        fill: #fff;
    }
    .header.transparent:not(.open) .header-picto{
        border-color: #fff;
    }
    .header.transparent:not(.open) .header-picto svg path{
        fill: #fff;
    }
    .header.transparent{
        z-index: 20;
    }
}
@media screen and (max-width: 767.98px){
    .special-header{
        margin-top: -75px;
    }
}
@media screen and (max-width: 820.02px){
    .header .categories{
        opacity: 1;
        visibility: visible;
    }
}

/*-----------------------------------------------------------------------*/
/*header tunnel*/
/*-----------------------------------------------------------------------*/
.header-order .back-product{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #DBDBDB;
}
.header-order .back-product .arrow{
    padding: 4px;
    left: 1px;
}
.steps li .number{
    width: 30px;
    height: 30px;
    background-color: #DBDBDB;
}
.steps li.active .number{
    background-color: #939393;
}
.steps li:not(:last-child)::after{
    content: '';
    width: 10px;
    height: 2px;
    background-color: #DBDBDB;
}


/*-----------------------------------------------------------------------*/
/*Forms*/
/*-----------------------------------------------------------------------*/
.f_el-pictoright{
    position: relative;
}
.f_el-pictoright .picto-cta{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
}
.f_el-pictoright .picto-cta svg{
    position: relative;
    top: 1px;
}
.f_el-pictoright.bg-green-focus input:focus + .picto-cta{
    background-color: #317E6F;
}
.f_el-pictoright.bg-green-focus input:focus + .picto-cta svg path{
    fill: #fff;
}


/*-----------------------------------------------------------------------*/
/*Breadcrumb*/
/*-----------------------------------------------------------------------*/
.breadcrumb li:not(:last-child)::after{
    content: '/';
    color: #939393;
    font-size: 13px;
    margin: 0 5px;
}
.breadcrumb {
    display: flex;
    align-items: center;
}
.breadcrumb li a,.breadcrumb li span{
    color: #939393;
    font-size: 13px;
    letter-spacing: 0.4px;
    line-height: 15px;
    font-weight: 500;
}
.breadcrumb.product li a,.breadcrumb.product li span {
    color: #939393;
}
.breadcrumb.white li a,.breadcrumb li span{
    color: #fff;
}
.breadcrumb.white li:not(:last-child)::after{
    color: #fff;
}
.category .breadcrumb,
.search-page .breadcrumb{
    top: 15px;
    left: 0;
}
.blog-article .breadcrumb {
    z-index: 1;
    margin-top: 15px;
}
.breadcrumb li span{
    color: #000;
}
.blog-article .breadcrumb.white li a,.breadcrumb li span{
    color: #fff;
}
.blog-article .breadcrumb.white li:not(:last-child)::after{
    color: #fff;
}

/*-----------------------------------------------------------------------*/
/*CTA*/
/*-----------------------------------------------------------------------*/
[class^="mycta-"]{
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    max-width: 100%;
    cursor: pointer;
    border: 1px solid #fff;
    border-radius: 28px;
    min-height: 40px;
    padding: 10px 15px;
    box-sizing: border-box;
    position: relative;
    transition: .3s;
    z-index: 1;
}
[class^="mycta-"].inline-flex{
    display: inline-flex;
}
[class^="mycta-"].w180{
    width: 180px;
}
[class^="mycta-"].h-40{height: 40px;}
[class^="mycta-"].h-50{height: 50px;}
.h-50{height: 50px;}

[class^="mycta-"].w240{width: 240px;}
[class^="mycta-"].w280{width: 280px;}
[class^="mycta-"].w290{width: 290px;}
[class^="mycta-"].w360{width: 360px;}

[class^="mycta-"].fs-13{font-size: 13px;}


[class^="mycta-"]::before{
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: "";
    background-color: #fff;
    z-index: -2;
    border-radius: 28px;
    height: 40px;
}
[class^="mycta-"].h-50::before{
    height: 50px;
}

.mycta-salmon-empty{
    border-color: #ff7764;
    color: #ff7764;
}
.mycta-salmon-empty::before{
    background-color: #ff7764;
}
.mycta-salmon-empty:hover{
    color: #FFF;
}
.mycta-pink-empty{
    border-color: #D07BC3;
    color: #D07BC3;
}
.mycta-pink-empty::before{
    background-color: #D07BC3;
}
.mycta-salmon2-empty{
    border-color: #E56A54;
    color: #E56A54;
}
.mycta-salmon2-empty::before{
    background-color: #E56A54;
}
.mycta-salmon2-empty:hover{
    color: #fff;
}
.mycta-pink-filled{
    border-color: #D07BC3;
    background-color: #D07BC3;
    color: #fff;
}
.mycta-salmon2-filled{
    border-color: #E56A54;
    background-color: #E56A54;
    color: #fff;
}
.mycta-salmon2-filled:hover{
    color: #E56A54;
    border-color: #E56A54;
}
.mycta-green-empty{
    border-color: #008273;
    color: #008273;
}
.mycta-green-empty::before{
    background-color: #008273;
}
.mycta-green-filled{
    border-color: #008273;
    background-color: #008273;
    color: #fff;
}
.mycta-green-filled::before{
    background-color: #fff;
}
.mycta-green2-empty{
    border-color: #03934E;
    color: #03934E;
}
.mycta-green2-empty::before{
    background-color: #03934E;
}
.mycta-white-empty{
    border-color: #fff;
    color: #fff;
}
.mycta-white-empty::before{
    background-color: #fff;
}

.mycta-white-filled{
    border-color: #fff;
    background-color: #fff;
    color: #317E6F;
}
.mycta-white-filled::before{
    background-color: #317E6F;
}

.mycta-white-filled-black{
    border-color: #000;
    background-color: #fff;
    color: #000;
}
.mycta-white-filled-black::before{
    background-color: #fff;
    top: -1px;
}

.mycta-black-filled{
    border-color: #000;
    background-color: #000;
    color: #fff;
}
.mycta-black-filled:hover{
    color: #000;
}
.mycta-black-filled::before{
    background-color: #fff;
    border: 1px solid #000;
    top: -1px;
}



@media screen and (min-width: 1024px){
    [class^="mycta-"].show-m-t {
        display: none;
    }
    [class^="mycta-"]:hover:before {
        -webkit-transition: 0.3s all ease;
        transition: 0.3s all ease;
        left: -2px;
        right: -2px;
        opacity: 1;
    }

    .mycta-pink-empty:hover,
    .mycta-green-empty:hover,
    .mycta-green2-empty:hover{
        color: #fff;
    }
    .mycta-green-filled::before,
    .mycta-pink-filled::before{
        display: none;
    }
    .mycta-green-filled:hover,
    .mycta-pink-filled:hover{
        opacity: .8;
    }
    .mycta-white-empty:hover{
        color: #000;
    }
    .mycta-white-filled:hover{
        color: #fff;
        border-color: #317E6F;
    }
}
@media screen and (max-width: 575.98px){
    [class^="mycta-"].w100p-m{width: 100%;}
    [class^="mycta-"].w130-m{width: 130px;}
}


/*-----------------------------------------------------------------------*/
/*Pellet offer*/
/*-----------------------------------------------------------------------*/
.pelletoffer{
    bottom: 30px;
    left: 30px;
    width: 208px;
    height: 208px;
    background-color: #D28DD3;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s;
    z-index: 10;
}
.pelletoffer svg{
    position: absolute;
    top: 0;
    left: 0;
}
.pelletoffer .close-cross{
    position: absolute;
    top: 0;
    right: 0;
}
.pelletoffer .close-cross:before,
.pelletoffer .close-cross:after{
    background-color: #FFF;
    width: 3px;
}

.pelletoffer.clicked{
    width: 368px;
    height: 368px;
    background-color: #fff;
}
.pelletoffer.clicked .color-white{
    color: #D28DD3;
}
.pelletoffer.clicked .close-cross:before,
.pelletoffer.clicked .close-cross:after{
    background-color: #fff;
}
.pelletoffer.clicked .textblock{
    margin-top: 60px;
}
.pelletoffer .plusque{
    border-radius: 20px;
}
.pelletoffer .useit{
    display: inline-flex;
}

@media screen and (max-width: 575.98px){
    .pelletoffer {
        bottom: -23%;
        left: -20%;
        width: 140%;
        height: 35%;
    }
    .pelletoffer svg {
        left: 20%;
    }
    .pelletoffer .close-cross {
        right: 17%;
        top: 45px;
    }
    .pelletoffer.clicked{
        height: 410px;
        left: -40%;
        width: 180%;
    }
    .pelletoffer.clicked svg {
        left: 25%;
    }
    .pelletoffer.clicked .close-cross {
        right: 25%;
    }
    .pelletoffer.clicked .textblock {
        margin-top: 50px;
    }
    .pelletoffer.clicked .reduction {
        font-size: 22px;
    }
}

/*-----------------------------------------------------------------------*/
/*Shipping free line*/
/*-----------------------------------------------------------------------*/
.shipping-free-line .line{
    width: 100%;
    height: 5px;
    background-color: #E6E6E6;
    position: relative;
    border-radius: 5px;
    display: block;
}
.shipping-free-line .line .progression{
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    background-color: #306EEC;
    border-radius: 5px;
    animation: blinker 2s linear infinite;
    /*width: 60%;*/
}