/* Espace recette DIY */

.connect-button {
    display:inline-flex;
    background:white;
    color: #426b75;
    border: 3px solid #426b75;
    border-radius: 5px;
    font-weight: 600;
    font-size: 18px;
    height: fit-content;
    text-align: center;
    transition: 200ms ease;
}
.connect-button:hover {
    font-size: 20px;
}
/* toggle button */
.toggle-radio {
    display:inline-flex;
    background:white;
    color: #426b75;
    border: 3px solid #426b75;
    border-radius: 5px;
    font-weight: 600;
    font-size: 18px;
    height: fit-content;
    text-align: center;
    transition: 200ms ease;
}
.toggle-radio > input:checked + label {
    background: #426b75;
    color: white;
    transition: all 250ms ease-in-out;
}
.toggle-radio > input[type='radio'] {
    display:none;
}
.toggle-radio > input + label {
    padding:5px 15px;
    cursor:pointer;
    border: 0;
}


/* radio buttons */
.radio-buttons {
    display:inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    background: transparent;
    color: #e2e2e2;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    height: fit-content;

}
.radio-buttons > input + label {
    padding:5px 15px;
    cursor:pointer;
    border: 0;
    border-radius: 10px;
    background-color: #f5f5f5;
    transition: all 200ms ease-in-out;
}
.radio-buttons > input:hover + label {
    color: #426b75 ;
}
.radio-buttons > input:checked + label {
    background: #426b75;
    color: white;
}
.radio-buttons > input[type='radio'] {
    display:none;
}

/* checkbox buttons */
.checkbox-buttons {
    display:inline-flex;
    flex-wrap: wrap;
    background: transparent;
    color: #426b75;
    border-radius: 5px;
    font-size: 16px;
}

/*
.checkbox-buttons > input + label {
    margin-right: 5px;
    padding: 5px 15px;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    background-color: #f5f5f5;
    transition: all 200ms ease-in-out;
    margin-bottom: 2%;
    display: inline-flex;
    align-items: center;
}
*/
.checkbox-buttons label {
    margin-right: 5px;
    padding: 5px 15px;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    background-color: #f5f5f5;
    transition: all 200ms ease-in-out;
    margin-bottom: 2%;
    display: inline-flex;
    align-items: center;
}

.checkbox-buttons label:hover {
    background-color: #e2e2e2 ;
}
.checkbox-buttons > input:checked + label {
    background: #426b75;
    color: white;
}
.checkbox-buttons > input[type='checkbox'] {
    display:none;
}

/* Box */
.calculator-box1{
    display: inline-flex;
    height: fit-content;
    justify-content: space-between;
    border-radius: 10px;
    background: #f5f5f5 ;
    padding: 3% 4%;
    box-sizing: border-box;
}
.calculator-box2{
    display: inline-flex;
    border-radius: 10px;
    background: white;
    padding: 3% 4%;
    box-sizing: border-box;
    min-height: 200px;
}
.calculator-box3{
    display: flex;
    height: fit-content;
    border-radius: 5px;
    background: #f5f5f5 ;
    padding: 3%;
    box-sizing: border-box;
}
.composantRecetteBox{
    display: inline-flex;
    border-radius: 10px;
    background: white ;
    padding: 15px;
    box-sizing: border-box;
}


.composantRecetteBox .boxInfo {
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 26px;
}

@media screen and (max-width: 980px) {
    .calculator-box2{
        width: 100%;
        padding: 5% 7%;
        min-height: 150px;
    }
    .composantRecetteBox {
        width: 100%;
        padding: 4% 3%;
    }
}

.select-recipe{
    max-height: 350px;
}
.shadow-selectRecipe{
    background: linear-gradient( 0deg, rgba(66, 107, 117, 0.10), transparent);
    z-index: 1;
    border-radius: 10px;
}
.shadow-selectRecipeBox{
}
@media screen and (max-width: 980px){
    .shadow-selectRecipeBox{
        width: 100%;
        margin-bottom: 5%;
    }
}
.calculator-informationBox{
    display: inline-flex;
    align-items: center;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    right: -3% ;
    bottom: -22px;
    transition: all 200ms ease-in-out;
    cursor: pointer;
}
.calculator-informationBox:hover{
    background-color: #426b75;
    color: white;
}
.calculator-stepIcon{
    display: inline-flex;
    align-items: center;
    border-radius: 100%;
    border: 5px solid white;
    color: white;
    height: 35px;
    width: 35px;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    top: -50px;
}
.calculator-stepIconEmpty{
    display: inline-flex;
    align-items: center;
    border-radius: 100%;
    border: 5px solid #f5f5f5;
    color: #f5f5f5;
    height: 35px;
    width: 35px;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    top: -50px;
}
.step-Box-Padding{
    padding:15px;
}
.calculator-stepBox{}
@media screen and (max-width: 980px){
    .calculator-stepIcon{
        top: -45px;
    }
    .calculator-stepIconEmpty{
        top: -45px;
    }
    .calculator-stepBox .calculator-box2:nth-child(n){
        padding-top: 5%;
        margin-top: 40px;
    }
    .calculator-informationBox{
        bottom: -10%;
    }
}
.calculator-productBox{
    border-radius: 10px;
    box-sizing: border-box;
    padding: 2% 3%;
    width: 210px;
    height: 210px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.calculator-addArome{
    box-sizing: border-box;
    border-radius: 10px;
    border: 3px dashed #e2e2e2;
    padding: 2% 3%;
    width: 210px;
    height: 210px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    margin-top: 2%;
}
@media screen {
    .calculator-addArome{
        margin-top: 5%;
    }
}
.calculator-emptyAdditif{
    box-sizing: border-box;
    border-radius: 10px;
    border: 3px dashed #e2e2e2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 200ms ease;
}
.calculator-emptyAdditif:hover{
    font-size: 20px;
}
@media screen and (max-width: 600px) {
    .calculator-emptyProductBox{
        width: 210px;
        height: 35px;
    }
}
@media screen and (max-width: 980px) {
    .calculator-emptyAdditif{
        width: 100%;
        padding-top: 5%;
        margin-top: 40px;
    }
}
.calculator-productIconsBox{
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 3px;
    align-items: flex-start;
}
.calculator-BoxSwipeArrow{
    display: inline-flex;
    align-items: center;
    height: 100%;
    width: 7%;
    /* background: linear-gradient( 90deg ,rgba(66, 107, 117, 0.40), transparent); */
    opacity: 0.2;
    background-position: left;
    background-size:50% 100%;
    background-repeat: no-repeat;
    transition: all 300ms ease-in-out;
    cursor: pointer;
    color: black ;
}
.calculator-BoxSwipeArrow:hover{
    opacity: 0.3;
    background-size:100% 200%;
}
.calculator-produitBoxWidth{
    width: 210px;
}
.calculator-Resumé{
    display: inline-flex;
    border-radius: 5px;
    font-size: 18px;
    padding: 3% 2%;
    flex-wrap: wrap;
    width: 170px;
}
.calculator-titre{
    font-size: 28px;
    font-weight: 600;
    color: #383f43;
}

@media screen and (max-width: 980px){
    .calculator-titre{
        font-size: 22px;
    }
}

/* Scroll Bar */
.calculator-box2::-webkit-scrollbar {
    width: 15px;
}
.calculator-box2::-webkit-scrollbar-track {
    background: #f5f5f5;
    border: 5px solid white;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}
.calculator-box2::-webkit-scrollbar-thumb {
    background-color: #e2e2e2;
    border-radius: 10px;
}
.calculator-box2::-webkit-scrollbar-thumb:hover {
    background-color: #426b75;
}

/* Slider arômes */
/*Slider arômes enabled */
.slider-arome {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background: #e2e2e2;
    outline: none;
}
.slider-arome::-webkit-slider-thumb:hover {
    border-radius: 50%;
    width: 25px ;
    height: 25px ;
}
.slider-arome::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #eb5d61 ;
    cursor: pointer;
    transition: all 250ms;
}
/* Slider aromes disabled */
.slider-arome-disabled {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background: #f5f5f5;
    outline: none;
}
.slider-arome-disabled ::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #e2e2e2 ;
}

/* Slider etapes */
.slider-etapes {
    position: relative;
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    border-radius: 5px;
    background: rgba(226, 226, 226, 0.9);
    outline: none;
    z-index: 1;
}
.slider-etapes::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 35px;
    border-radius: 8px;
    background: #eb5d61 ;
    cursor: pointer;
    transition: all 200ms ease-in-out;
    z-index: 10;
}
.slider-etapes::-webkit-slider-thumb:hover {
    border-radius: 8px;
    width: 12px ;
    height: 40px ;
    z-index: 10;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.list-range{
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 92%;
    bottom: 10px;
}
.list-range > option{
    background-color: black;
    border-radius: 10px;
    width: 3px;
    min-height: 0;
    height: 5px;
}


/* input numbers */
.input-numbers{
    font-size: 18px;
    border-radius: 8px;
    text-align: center;
    /*width: 35px;*/
    padding: 2% 4%;
    background-color: #f5f5f5;
    color: #426b75;
    transition: all 250ms ease-in-out;
    -moz-appearance: textfield;
    border: solid 2px white;
    width: 100%;
}
.input-numbers::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-numbers:hover{
    background-color: #e2e2e2;
}
.input-numbers:focus{
    outline: none;
    border: solid 2px #426b75;
}
/*  input number Disabled */
.input-numbers-disabled{
    font-size: 18px;
    border-radius: 8px;
    text-align: center;
    width: 35px;
    padding: 2% 4%;
    background-color: #f5f5f5;
    color: #426b75;
    -moz-appearance: textfield;
    border: solid 2px white;
}
.input-numbers-disabled::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* plus/minus */
.plus-minus{
    display: inline-flex;
    margin: 0;
    background-color: #426b75;
    color: white;
    border-radius: 5px;
    padding: 5px;
    font-size: 18px;
    width: 20px;
    cursor: pointer;
    user-select: none;
}

/* input text */
.calculator-textField{
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #f5f5f5;
    color: #383f43;
    width: 100%;
    text-align: center;
    border: solid 3px white;
    transition: all 250ms ease-in-out;
}
.calculator-textField:focus{
    outline: none;
    border: solid 3px #426b75;
}
.calculator-textField:hover{
    background-color: #e2e2e2;
}

/* calculator Collapsible */

.tab {
    overflow: hidden;
}
.tab-content{
    transition: all 500ms ease;
}
.tab .tab-content {
    max-height: 2px;
}
.tab-label{
    cursor: pointer;
}
.tab-icon{
    transition: all 500ms ease;
    height: 20px;
    width: 20px;
}
/*
fit-content pas encore compatible sur tous les navigateurs
et basé sur les grilles CSS
.collapsible-input:checked ~ .tab-content {
    max-height: fit-content;
}
*/


.collapsible-input:checked ~ .tab-content {
    max-height: fit-content;
    max-height: 2000px;
}

.collapsible-input ~ .tab-label > div > .tab-icon{
    transform: rotate(0deg);
}
.collapsible-input:checked ~ .tab-label > div > .tab-icon{
    transform: rotate(90deg);
}
.collapsible-input{
    width: 100%;
    display: none;
    pointer-events: auto;
}

/* Icones*/
.huge-icon{
    height: 120px;
    width: 120px;
}
.big-icon{
    height: 90px;
    width: 90px;
    padding: 10px;
    box-sizing: border-box;
}
/*
.medium-icon{
    height: 60px;
    width: 60px;
}
*/
.medium-icon{
    height: 70px;
    width: 70px;
}
.small-icon{
    height: 24px;
    width: 24px;
}
.extraSmall-icon{
    height: 16px;
    width: 16px;
}
.icon-hover{
    transition: 200ms ease;
}
.icon-hover:hover{
    height: 28px;
    width: 28px;
}


/* Autre */
.overflow-hidden{
    overflow-x: hidden;
}
.align-content-start{
    align-content: flex-start;
}
.align-content-spaceBetween{
    align-content: space-between;
}
.align-content-spaceEvenly{
    align-content: space-evenly;
}
.align-content-center{
    align-content: center;
}
.align-content-stretch{
    align-content: stretch;
}
.align-selfStretch{
    align-self: stretch;
}
.align-selfEnd{
    align-self: end;
}
.BgGrey{
    background-color: #e2e2e2;
}
.space-evenly{
    justify-content: space-evenly;
}
.grey{
    color: #e2e2e2;
}
.content-box{
    box-sizing: content-box;
}
.border-box{
    box-sizing: border-box;
}
.width95 {
    width: 95%;
    box-sizing: border-box
}
.text-addArome{
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    transition: 200ms ease;
}
.text-addArome:hover{
    font-size: 20px;
}
.text-size18{
    font-size: 18px;
}
.text-size14{
    font-size: 14px;
}
.border-radius5px{
    border-radius: 5px;
}
.calculator-border{
    border: 3px solid #e2e2e2;
}
.height-auto{
    height: auto;
}
.height-fitContent{
    height: fit-content;
}
.height-10{
    height: 10%;
}
.height-20{
    height: 20%;
}
.height-30{
    height: 30%;
}
.height-50{
    height: 50%;
}
.height-80{
    height: 80%;
}
.height-100{
    height: 100%;
}
.height-7px{
    height: 7px;
}
.width-7px{
    width: 7px;
}
.width2dot5{
    width: 2.5%;
}
.width-fitContent{
    width: fit-content;
}
.flipHorizontally{
    transform: scaleX(-1);
}
.flipVerticaly{
    transform: scaley(-1);
}
.pointer-eventNone{
    pointer-events: none;
}
.border-none{
    border: none ;
}
.marginMobileBottom{
    margin-bottom: 3%;
}
.marginMobiletop{
    margin-top: 2%;
}
.margintopNosAromes{
    margin-top: 0%;
}
.marginBottom1{
    margin-bottom: 1%;
}
.width100Mobile{}
.mobileDisplayNone{}
@media screen and (max-width: 980px){
    .marginMobileBottom{
        margin-bottom: 7%;
    }
    .marginMobiletop{
        margin-top: 5%;
    }
    .marginMobileNosAromes{
        margin-top: 5%;
    }
    .width100Mobile{
        width: 100%;
    }
    .mobileDisplayNone{
        display: none !important;
    }
}
.noWrapLine{
    white-space: pre;
}


/* lignes de liaisons */
.ligne-liaison-box{
    display: inline-flex;
    align-items: center;
}
.ligne-liaison{
    height: 7px;
    background-color: #e2e2e2;
    width: 100%;
}
.ligne-verticalLiaisonTop{
    position: absolute;
    width: 7px;
    height: 300%;
    z-index: 1;
    background-color: #e2e2e2;
    right: 0;
}
.ligne-verticalLiaisonBottom{
    position: absolute;
    width: 7px;
    height: 80%;
    z-index: 1;
    background-color: #e2e2e2;
    right: 0;
    bottom: 50%;
}
/* + */
.plus-box{
    display: inline-flex;
    width: 90%;
    font-size: 28px;
    color: #426b75;
    justify-content: center;
    align-items: center;
}


/*  La partie recette DIY */

.rcteContainer {
    max-width: 32%;
    border: 1px solid #eaeaea;
    margin-bottom: 20px;
    margin-right: 1%;
}

.formFiltreRcte {
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

form[name="formFiltreRcte"] {
    border-right: 1px solid #e1e1e1;
    padding-right: 20px;
}

.rcteTexte {
    height: 60px;
}

.rcteContainer .avis {
    margin-top: 25px;
    /* margin-bottom: 25px; */
    border-top: 1px solid #dedede;
    padding-top: 15px;
    /* padding-bottom: 10px; */
}

.marginLeft5.formSearchRcte form input, .marginLeft5.formSearchRcte form select {
    flex-grow: 1;
    background-color: #e1e1e1;
    border: 0;
    border-radius: 3px;
    padding: 5px 10px;
    max-width: calc(100% - 110px);
    width: 215px;
}



@media screen and (max-width: 980px){
    .rcteContainer {
        max-width: 49%;
        margin-right: 0;
    }
    .rcteContainer.info {
        max-width: inherit;
        width: 100%;
    }
    .ligne-liaison-box{
        justify-content: center;
        justify-items: end;
        height: 35px;
        width: 20%;
    }
    .ligne-liaison{
        height: 100%;
        background-color: #e2e2e2;
        width: 7px;
    }
    .ligne-verticalLiaisonTop{
        display: none;
    }
    .ligne-verticalLiaisonBottom{
        display: none;
    }
    .plus-box{
        width: 60%;
    }
}
@media screen and (max-width: 852px){

    form[name="formFiltreRcte"].col-3 {
        columns: unset;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        border: none;
        margin-bottom: 10px;
    }

    form[name="formFiltreRcte"].col-3 > label {
        width:25%;
    }

    form[name="formFiltreRcte"] label.block {
        text-align: center;
    }

    form[name="formFiltreRcte"] select{
        flex-grow: 3;
    }


    svg.icon-gamme {
        display: block;
        margin: auto;
    }

    .formFiltreRcte {
        flex-wrap: wrap;
        padding-left: 0;
        padding-right: 0;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .marginLeft5.formSearchRcte {
        margin-left: 0;
        padding-top: 20px;
        border-top: 1px solid #dedede;
        width: 100%;
        justify-content: space-between;
    }

    .marginLeft5.formSearchRcte form {
        width: 100%;
        margin-bottom: 10px;
    }


}
@media screen and (max-width: 550px) {
    .rcteContainer {
        max-width: 100%;
    }
}



.InfosSaveRCTE label {
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
}
.InfosSaveRCTE input {
    width: 100%;
    height: 30px;
    margin-bottom: 25px;
    box-sizing: border-box;
}


.rcteContainer-big, .rcteImageHead {
    max-height: 300px;
}




.info .rcteHeader {
    height: 128px;
}

.info .rcteHeader img {
    height: auto;
    width: fit-content;
    width: -moz-fit-content;
}


.rcteHeader {
    overflow: hidden;
    /*height: 160px;*/
}

.rcteTitle {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.rcteInfoHeader {
    display: flex;
    flex-wrap: wrap;
}

.rcteInfoHeader p {
    margin-right:15px;
}
.rcteInfoHeader p.small-text {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 5px;
}
.rcteInfo {
    padding: 20px;
    padding-top: 0;
    padding-bottom: 30px;
}



.rcteInfoHeader {
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 10px;
    padding: 5px 0px;
}
/*
.rcteHeader img {
    height: 100%;
    width: auto;
}
*/
.rcteHeader img {
    height: auto;
    width: 100%;
}


.rcteInfoHeader p {
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #eaeaea;
    padding-right: 10px;
    text-transform: uppercase;
    font-size: 11px;
}

.rcteInfoHeader p:last-child{
    border: none;
    margin: 0;
    text-transform: none;
}
.rcteLien button, .rcteLien a {
    border-radius: 5px;
    border: none;
    padding: 8px 10px;
    /*width: calc(49% - 25px);*/
    width: 50%;

}

.rcteLien .boutton {
    font-size: 12px;
}

.rcteLien img{
    margin-left: 10px;
}

.rcteHeader.info p {
    padding: 2px 10px;
    font-size: 22px;
    margin: 0;
    margin-left: 5px;
    background-color: #0a0a0a;
    margin-bottom: 2px;
    color:#c3c7c7;
}

/* Recette seule */

.rcteImageHead {
    flex-grow: 3;
    overflow: hidden;
    width: calc(100% - 40%);
}

.rcteImageHead img {
    /*height: 100%;*/
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /*width: auto;*/
}



.rcteDescri .rcteTexte {
    font-style: italic;
    font-size: 20px;
    height: initial;
}




.afficheRcte .rcteTitle {
    font-size: 20px;
    margin-bottom: 8px;
    margin-top: 0;
}

.afficheRcte .rcteInfoHeader p {
    font-size: 14px;
}
.afficheRcte .rcteInfoHeader, .rcteInfoHeader p {
    border-color: #3c3737;
}

.afficheRcte .rcteInfo {
    padding: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.rcteList {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 25px;
    font-size: 14px;
    max-height: 140px;
    overflow: auto;
}

.rcteList li {
    margin-top:5px;
}

.rcteInput {
    background-color: #f5f5f5;
    display: flex;
    height: 45px;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-transform: initial;
}
.rcteInput .quantity-btn {
    width: 40px;
    font-size: 18px;
    color: black;
    text-align: center;
}
.rcteInput input {
    font-size: 18px;
    font-weight: 100;
    border: none;
    background-color: #f5f5f5;
    padding: 0;
    text-align: center;
}
.rcteInput .quantity-btn {
    width: 40px;
    font-size: 18px;
    color: black;
    text-align: center;
    cursor: pointer;
}
.rcteStep .box-color {
    width: 40%;
    padding: 25px;
    margin-bottom: 25px;
    align-self: stretch;
    border-radius: 8px;
    counter-increment: h2counter;
}
@media screen and (max-width: 630px) {
    .rcteStep .box-color {
        width: 100%;
    }
}

.rcteStep .box-color .title {
    margin-top: 0;
    font-weight: bold;
}
.rcteStep .box-color .title::after {
    content: counter(h2counter);
}


#lesAvis {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    -webkit-column-rule: 1px solid #dedede;
    -moz-column-rule: 1px solid #dedede;
    column-rule: 1px solid #dedede;
}


.comRcte {
    padding: 20px;
    /* display: inline-flex; */
    flex-wrap: wrap;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}
.comRcte img{
    margin-right: 15px;
}
#plusAvis {
    column-span: all;
}

/* // Patch 22/06/2021 partie adresse dans panier*/
.adressePanier {
    position: relative;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
    padding: 25px;
    margin: 0;
    background-color: white;
    margin-right: 20px;
    margin-bottom: 20px;
    flex-grow: 1;
    box-shadow: white;
    transition: all ease 350ms;
}
.adressePanier.active {
    box-shadow: 10px 10px 17px -5px rgba(0,0,0,0.20);
    -webkit-box-shadow: 10px 10px 17px -5px rgba(0,0,0,0.20);
    -moz-box-shadow: 10px 10px 17px -5px rgba(0,0,0,0.20);
}
.creationAdresse {
    border: 1px solid #f5f5f5;
}
.arrow18 {
    position: absolute;
    right: 20px;
    top: 0px;
}
.arrow18.left {
    right: inherit;
    left: -20px;
    top: -20px;
}
.slideSetRCTE  .slick-next {
    right: 0;
}
.slideSetRCTE  .slick-prev {
    left: 0;
}


@media screen and (max-width: 799px) {

    .rcteContainer-big.width40 {
        width: 100%;
        order: 0;
    }
    .rcteImageHead img {
        width: 100%;
        height: auto;
        position: relative;
        left: initial;
        top:50%;
        transform: translateY(-50%);
    }
    .rcteImageHead {
        order: -1;
    }
    .rcteList {
        columns: 2;
    }

}

@media screen and (max-width: 640px){
    .arrow18.left {
        left: -30px;
    }
}
@media screen and (max-width: 640px){
    .arrow18, .arrow18.left {
        display: none;
    }
}


@media screen and (max-width: 540px){
    .rcteList {
        columns: initial;
    }
}


#prodRCTE .slick-track {
    margin-left: initial;
}

/* Les gallerie dans les recettes */
.choixCompo > div {
    width: 24%;
    max-width: 228px;
    margin:0 auto;
}

.choixCompo .produit-gallerie {
    width: 100%;
    max-width: inherit;
    margin-right: 5px;
    margin-left: 5px;
}
.compoPanier .slick-prev {
    left: 15px;
    z-index: 99;
    top: 34%;
}
.compoPanier .slick-next{
    right: 15px;
    z-index: 99;
    top: 34%;

}


.produit-gallerie-lien {
    padding-bottom: 0;
}

.calculator-box2 .select {
    width: 135px;
    margin: auto;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;

}
.calculator-box2  .input-quantite {
    width: 70px;
    max-width: 70%;
    border-radius: 5px;
    border: none;
    background-color: #e2e2e2;
    margin-right: 5px;
    margin-left: 5px;
    text-align: center;

}

.calculator-box2  .quantity-btn {
    border-radius: 5px;
    text-align: center;
    background-color: #426b75;
}

.nbNec {
    max-width: 75%;
    margin: auto;
    margin-top: 10px;
    text-align: center;
}

.boxAromes .slick-slide a {
    display: block;
    overflow: hidden;
    border: 3px solid #e2e2e2;
    border-radius: 10px;
    margin-bottom: 10px;
}
.matosDIY {
    padding: 30px;
    padding-top: 50px;
}
.matosDIY .produit-gallerie {
    margin-left: 20px;
    margin-right: 20px;
    border:1px solid #dedede;
}

.matosDIY .cat-achat-vol {
    display: none;
}

.heartBeat {
    animation-name: heartBeat;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;
}
/*
.price.active {
    animation-name: heartBeat;
    animation-delay: 0.3s;
    animation-duration: 0.5s;
    animation-fill-mode: both;

}
*/

.price {
    display: inline-block;
    transition: all ease 250ms;
}

.price.active {
    -webkit-animation:change-color 1s ease 0s 1 normal;
    -moz-animation:change-color 1s ease 0s 1 normal;
    -ms-animation:change-color 1s ease 0s 1 normal;
    animation:change-color 1s ease 0s 1 normal;


}


@keyframes change-color {
    0%{ transform: scale(1);}
    14%{ transform: scale(1.2) }
    28%{ transform: scale(1) }
    42%{ transform: scale(1.3) }
    70%{ transform: scale(1);}
}
.gallerieRCTE.inactive {
    opacity: 0.4;
}




/* Les labels dans les filtres de chercher des recette */
.formFiltreRcte label {
    transition: all ease-in 250ms;
    cursor: pointer;
}

.formFiltreRcte label:hover {
    transform: scale(1.08);
}


.star-label.active {
    color :#38c38a;
}