.versions.active{
    background: red;
    color: #fff;
}

#choixOptions_ek{
    max-width: 100% !important;
    padding: 0;
}

#choixOptions_ek .container-title{
    text-align: center;
}

#choixOptions_ek .h3{
    /*font-family: "Proxima Nova", sans-serif;*/
    font-weight: bold;
    font-size: 20px;
	text-transform: uppercase;
    text-align: center;
    color: #000;
    display: inline-block;
    position: relative;
    margin-bottom: 60px;
}
#choixOptions_ek .h4{
    /*font-family: "Proxima Nova", sans-serif;*/
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    color: #000;
}

#choixOptions_ek .h4 span{
    font-weight: 300;
    font-style: italic;
    font-size: 13px;
    padding: 0;
}


#choixOptions_ek .h3:after{
    content:"";
    width: 100%;
    height: 5px;
    background: linear-gradient(to left, rgba(162, 25, 91, 0) 0%, #7f1448 38.92%, #a2195b 66.5%, rgba(81, 13, 46, 0) 100%);
    position: absolute;
    bottom: -20px;
    left: 0;
}

#choixOptions_ek .versions,
#choixOptions_ek .diametre,
#choixOptions_ek .longueur{
    margin-bottom: 40px;
}

#choixOptions_ek .versions button{
    border-radius: 6px;
    background: transparent;
    border: 1px solid #000;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-family: "Proxima Nova", sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #000;
    margin-right: 6px;

}

#choixOptions_ek .versions button.active{
    background: #000;
    color: #fff;
}

#choixOptions_ek  ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    padding: 0 !important;
}
#choixOptions_ek  ul li{
    list-style: none;
    z-index: 10;
}

button.hexagon{
    border: none;
    background: transparent;
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    font-size: 11px;
    justify-content: center;
    padding: 0 !important;
}
button.hexagon svg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

button.hexagon[disabled="disabled"],
button.hexagon.active[disabled="disabled"]
{
   color: #D9D9D9;
}

button.hexagon[disabled="disabled"] img,
button.hexagon.active[disabled="disabled"] img{
    opacity: 0.1;
}

button.hexagon[disabled="disabled"] svg path,
button.hexagon.active[disabled="disabled"] svg path
{
    stroke: #D9D9D9;
    fill: #fff;
}


.diametre button.hexagon.active {
    color: #fff;
}

button.hexagon.active svg path{
    fill: #000;
}

.tile-longueur{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tile-longueur .infos span{
    padding: 3px 15px !important;
    border-radius: 30px;
    margin-left: 10px;
    display: inline-block;
    font-weight: bold;
    font-size: 13px !important;
}

.tile-longueur .infos .stock{
    background: #A2195B;
    color:#fff;
}
.tile-longueur .infos .court{
    background: #F0F0F0;
    color:#000;
}
.tile-longueur .infos .demande{
    background: #F6E7EE;
    color:#A2195B;
}

.longueur button[stock="0"] svg path{

}
.longueur button[stock="1"] svg path{
    fill:#A2195B;
    stroke: #A2195B;
}
.longueur button[stock="2"] svg path{
    fill:#F0F0F0;
    stroke: #F0F0F0;
}
.longueur button[stock="3"] svg path{
    fill:#F6E7EE;
    stroke: #F6E7EE;
}

.longueur button[stock="3"] {
    color: #A2195B;
}

.longueur button[stock="1"] {
    color: #fff;
}

.longueur button.active{
    position: relative;
}


.longueur button.active[disabled="disabled"]:before{
    display: none;
}


.longueur button:not([disabled="disabled"]):before {
    content: "";
    width: 71px;
    height: 71px;
    left: 50%;
    top: 50%;
    background-image: url(img/np_hexagon_grey.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    transform: translate(-50% , -50%);
}

.longueur button:not([disabled="disabled"]).active:before{
    content:"";
    width: 71px;
    height: 71px;
    left: 50%;
    top: 50%;
    background-image: url("img/np_hexagon_hover.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    transform: translate(-50% , -50%);
}

.conditionnement button:not([disabled="disabled"]){
    color: #fff;
}
.conditionnement button:not([disabled="disabled"]) svg path{
    fill: #000;
}

.conditionnement button:not([disabled="disabled"]) img{
    filter: invert(1);
}

#choixOptions_ek button[disabled="disabled"]{
    position:relative;
}

#choixOptions_ek button[disabled="disabled"]:after{
    content: "";
    width: 30px;
    height: 1px;
    background: #d9d9d9;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    position: absolute;
}

.infos.active span:not(.active){
    opacity: 0.4;
}