*,::after,::before{
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.switch{
    position:relative;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:60px;
    height:34px
}
.switch p{
    position:absolute;
    right:70px;
    text-align:right;
    min-width:100px
}
.switch input{
    opacity:0;
    width:0;
    height:0
}
.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#a7d4c3;
    -webkit-transition:.4s;
    transition:.4s
}
.slider:before{
    position:absolute;
    content:"";
    height:26px;
    width:26px;
    left:4px;
    bottom:4px;
    background-color:#fff;
    -webkit-transition:.4s;
    transition:.4s
}
input:checked+.slider{
    background-color:#4cb58d
}
input:focus+.slider{
    -webkit-box-shadow:0 0 1px #4cb58d;
    box-shadow:0 0 1px #4cb58d
}
input:checked+.slider:before{
    -webkit-transform:translateX(26px);
    transform:translateX(26px)
}
.slider.round{
    border-radius:34px
}
.slider.round:before{
    border-radius:50%
}
.switch{
    width:50px;
    height:25px
}
.slider:before{
    height:16px;
    width:16px
}
.devs{
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin:5vh 0
}
.devs select{
    margin-left:1em;
    border:1px solid #fff;
    border-radius:20px;
    font-size: .8em;
    background:#4cb58d;
    color:#fff;
    padding:5px
}

.prix{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:normal;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    font-family:Rubik;
    width:100%;
    margin:0 auto;
}
.prix .pack{
    background:rgba(255,255,255,.5);
    -webkit-box-shadow:0px 54px 99px 0px rgba(51.99999999999999, 78.00000000000001, 169.99999999999997, 0.07058823529411765);
    box-shadow:0px 54px 99px 0px rgba(51.99999999999999, 78.00000000000001, 169.99999999999997, 0.07058823529411765);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    color:#1c453d;
    border: 1px solid #74747417;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:24%;
    min-height:250px;
    position:relative;
    border-radius:36px
}
.prix .pack.fire{
    border:1px solid #1c453d
}
.prix .pack .title{
    text-align:center;
    line-height:1.25;
    margin-top:50px
}
.prix .pack h3{
    font-size:1.4em;
    font-weight:700
}
.prix .pack .subtitle{
    font-size:.8em
}
.prix .pack .price{
    background:#fff;
    padding:5px;
    font-weight:700;
    border-radius:10px;
    text-align:center;
    width: 70%;
    text-wrap:balance;
    margin:0;
    font-size: 20px;
    line-height:1.25
}
.prix .pack .price .small{
    font-size:.8em
}
.prix .pack .price.free{
    background:0 0;
    font-size:1.1em;
    width:80%
}
.prix .pack .fire{
    background:#1c453d;
    padding:2px 6px;
    border-radius:10px;
    font-size:.8em;
    color:#fff;
    position:absolute;
    top:0;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%)
}
.prix .pack .simulate{
    background:#1c453d;
    color:#fff;
    font-family:Rubik;
    font-size:18px;
    border:2px solid #1c453d;
    border-radius:30px;
    width:clamp(120px,40%,300px);
    text-align:center;
    padding:5px;
    -webkit-transform:translateY(50%);
    transform:translateY(50%);
    height:2em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    cursor:pointer
}
.prix .pack .simulate:hover{
    background:#fff;
    color:#1c453d
}
.simulateur p{
    margin-bottom: 0;
}
.simulateur{
    font-family:Rubik;
    width:100%;
    height:85vh;
    min-height:800px;
    margin:15vh auto 5vh;
    color:#1c453d;
    border-radius:36px;
    background:rgba(255,255,255,.5);
    -webkit-box-shadow:0px 54px 99px 0px rgba(51.99999999999999, 78.00000000000001, 169.99999999999997, 0.07058823529411765);
    box-shadow:0px 54px 99px 0px rgba(51.99999999999999, 78.00000000000001, 169.99999999999997, 0.07058823529411765);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border: 1px solid #74747417;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    font-size: 16px;
    padding:40px
}
.simulateur>div{
    width:40%;
    margin:0 auto
}
.simulateur .left h2{
    font-size:2.2em;
    line-height:1.1;
    font-weight:700;
    text-wrap: balance;
    width:80%
}
.simulateur .left .count{
    margin:2.5vh 0;
    font-size:1.2em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start
}
.simulateur .left .count>div{
    background: #4cb58d;
    padding: 1px 6px;
    border-radius: 20px;
}
.simulateur .left .count p{
    width:280px;
}

.simulateur .left .count #decrease,.simulateur .left .count #increase{
    cursor: pointer;
    font-size: 0.7em;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0;
}
.simulateur .left .count input[type=number]{
    -moz-appearance:textfield
}
.simulateur .left .count input{
    background: 0 0;
    border: 0;
    text-align: center;
    width: 48px;
    font-family: Rubik;
    font-size: .8em;
    color: #fff;
}
.simulateur .left .count input::-webkit-inner-spin-button,.simulateur .left .count input::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0
}
.simulateur .left .count input:focus{
    outline:0
}
.simulateur .left .count+p{
    font-size:1.2em;
    margin-top:5vh;
    margin-bottom:2.5vh
}
.simulateur .left .modules{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.simulateur .left .modules input{
    display:none
}
.simulateur .left .modules input:checked+label{
    opacity:1!important
}
.simulateur .left .modules label{
    width:25%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    margin-bottom:50px;
    position:relative;
    cursor:pointer;
    opacity:.5;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out
}
.simulateur .left .modules label:hover{
    -webkit-transform:scale(1.03);
    transform:scale(1.03);
    opacity:1
}
.simulateur .left .modules label .img{
    background:#23b7d9;
    border-radius:50%;
    height:60px;
    width:60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.simulateur .left .modules label .img img{
    height: 50%;
    width: auto;
}
.simulateur .left .modules label span{
    position:absolute;
    top:65px;
    font-size:.8em;
    text-align:center;
    left:-10px;
    width:80px;
    line-height: 1.1;
}
.simulateur .left .modules label:nth-of-type(2) .img{
    background:forestgreen
}
.simulateur .left .modules label:nth-of-type(3) .img{
    background:gold
}
.simulateur .left .modules label:nth-of-type(4) .img{
    background:#655ae2
}
.simulateur .left .modules label:nth-of-type(5) .img{
    background:#fd4848
}
.simulateur .left .modules label:nth-of-type(6) .img{
    background:#0d72f1
}
.simulateur .left .modules label:nth-of-type(7) .img{
    background:#5ec771
}
.simulateur .left .modules label:nth-of-type(8) .img{
    background:#ecaa01
}
.simulateur .left .modules+p{
    font-style:italic;
    margin-top: 1vh;
    font-size:.8em;
    margin-bottom: 0;
}
.simulateur .left .modules+p strong{
    font-weight:700;
}
.simulateur .left .simulate{
    border:2px solid #e4f2ec;
    font-family:Rubik;
    font-weight: 500;
    color:#1c453d;
    font-size:1em;
    margin-top:2.5vh;
    background:#e4f2ec;
    padding:8px 20px;
    cursor:pointer;
    border-radius:40px
}
.simulateur .left .simulate:hover{
    color:#4BB58D
}
.simulateur .left .pack{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    height:90%
}
.simulateur .left .pack>span{
    font-size:2em;
    line-height:1.15;
    font-weight:700;
    display:block;
    margin-bottom:30px
}
.simulateur .left .pack>span span{
    color:#4cb58d
}
.simulateur .left .pack p{
    font-size:1.2em;
    line-height:1.15
}
.simulateur .left .pack a{
    border:2px solid #e4f2ec;
    font-family:Rubik;
    font-weight: 500;
    color:#1c453d;
    font-size:1em;
    margin-top:2.5vh;
    background:#e4f2ec;
    padding:8px 20px;
    text-decoration:none;
    cursor:pointer;
    border-radius:40px;
    display:inline-block
}
.simulateur .left .pack a:hover{
    color:#4BB58D
}
.simulateur .right{
    background:#f7f7ff;
    border-radius:36px;
    -webkit-box-shadow:0px 54px 99px 0px rgba(51.99999999999999, 78.00000000000001, 169.99999999999997, 0.07058823529411765);
    box-shadow:0px 54px 99px 0px rgba(51.99999999999999, 78.00000000000001, 169.99999999999997, 0.07058823529411765);
    display:-webkit-box;
    border: 1px solid #74747417;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.simulateur .right .loading{
    text-align:center;
    font-size:1.2em;
    line-height:1.15;
    width:80%
}
.simulateur .right .devs{
    margin:0
}
.simulateur .right .pack{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:100%;
    width:100%
}
.simulateur .right .pack .partir{
    font-size: .8em;
    color: #1c453d;
}
.simulateur .right .pack .partir .pricepack{
    margin-left: .3em;
}
.simulateur .right .pack .packname{
    font-size:2em;
    line-height:1.15;
    font-weight:700;
    width:80%;
    margin-top:20px;
    text-align:center
}
.simulateur .right .pack .options{
    height:70%;
    margin:0 20% 0 30%;
    margin-right:20%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
.simulateur .right .pack .options .mobile{
    display:none
}
.simulateur .right .pack .options .ordi{
    display:inline
}
.simulateur .right .pack .options li{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    margin-left:50px;
    align-items:center
}
.simulateur .right .pack .options .switch p{
    width: max-content;
    line-height: 1.1;
    min-width: unset;
    color:#fff;
    padding: 3px 6px;
    border-radius: 10px;
}
.simulateur .right .pack .options li:nth-child(1) .switch p{
    background: #23b7d9;
}
.simulateur .right .pack .options li:nth-child(2) .switch p{
    background: forestgreen
}
.simulateur .right .pack .options li:nth-child(3) .switch p{
    background:gold
}
.simulateur .right .pack .options li:nth-child(4) .switch p{
    background: #665be3;
}
.simulateur .right .pack .options li:nth-child(5) .switch p{
    background: #fc4747;
}
.simulateur .right .pack .options li:nth-child(6) .switch p{
    background: #0c74f2;
}
.simulateur .right .pack .options li:nth-child(7) .switch p{
    background: #5dc771;
}
.simulateur .right .pack .options li:nth-child(8) .switch p{
    background: #edaa00;
}
@media screen and (max-width:1200px) {
    .simulateur .right .pack .options .switch p{
        font-size: .85em;
    } 
}
.simulateur .right .pack .options input[type=number]{
    -moz-appearance:textfield
}
.simulateur .right .pack .options input{
    background:#fff;
    border:0;
    border-radius:20px;
    text-align:center;
    width:50px;
    margin:10px 15px;
    font-family:Rubik;
    font-size:1em;
    color:#1c453d
}
.simulateur .right .pack .options input::-webkit-inner-spin-button,.simulateur .right .pack .options input::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0
}
.simulateur .right .pack .options input:focus{
    outline:0
}
.simulateur .right .pack .options input+p{
    min-width:100%
}
.simulateur .right .pack .total{
    font-size:1.5em;
    color:#1c453d;
    font-weight:700;
    margin-top:15px
}
.simulateur .right .pack .simulate{
    border:2px solid #1c453d;
    font-family:Rubik;
    color:#fff;
    font-size:18px;
    background:#1c453d;
    height: 2em;
    width: 120px;
    -webkit-transform:translateY(50%);
    transform:translateY(50%);
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:30px
}
.simulateur .right .pack .simulate:hover{
    background:#fff;
    color:#1c453d
}
.loader{
    width:48px;
    height:48px;
    position:absolute;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
    border:3px solid #4cb58d;
    border-radius:50%;
    display:inline-block;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-animation:rotation 1s linear infinite;
    animation:rotation 1s linear infinite
}
.loader::after{
    content:"";
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    border:3px solid;
    border-color:#1c453d transparent
}
@-webkit-keyframes rotation{
    0%{
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
@keyframes rotation{
    0%{
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
.fadeOut{
    -webkit-animation:fadeOut .5s ease-out forwards;
    animation:fadeOut .5s ease-out forwards
}
@-webkit-keyframes fadeOut{
    from{
        opacity:1
    }
    to{
        opacity:0;
        display:none
    }
}
@keyframes fadeOut{
    from{
        opacity:1
    }
    to{
        opacity:0;
        display:none
    }
}
.hidden{
    display:none!important
}
.fadeIn{
    -webkit-animation:fadeIn .5s ease-in forwards;
    animation:fadeIn .5s ease-in forwards
}
@-webkit-keyframes fadeIn{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes fadeIn{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
@media screen and (max-width:1700px){
    .simulateur{
        height:85vh
    }
    .simulateur .right .pack .options{
        height:63%
    }
    .simulateur .right{
        width:50%
    }
}
@media screen and (max-width:1000px){
    .simulateur .right .pack .options{
        font-size:.9em
    }
    .simulateur .right .pack .total{
        font-size:1.35em
    }
}
@media screen and (max-width:900px){
    .prix .pack{
        width:45%;
        margin-bottom:50px
    }
    .simulateur{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        height:auto
    }
    .simulateur .left{
        width:100%;
        min-height:250px
    }
    .simulateur .right{
        -ms-flex-item-align:center;
        align-self:center;
        width:60%;
        min-width:350px;
        margin-top:20px
    }
    .simulateur .right .devs,.simulateur .right .packname,.simulateur .right .total{
        margin:5px
    }
    .simulateur .right .loading{
        display:none
    }
    .simulateur .right .pack .options .mobile{
        display:inline
    }
    .simulateur .right .pack .options .ordi{
        display:none
    }
    .switch{
        width:50px;
        height:25px
    }
    .slider:before{
        height:16px;
        width:16px
    }
}
.simulateur .left .employe200{
    display:none
}
.simulateur .left .employe200 a{
    text-decoration:underline;
    background:0 0;
    color:#1c453d;
    border:none;
    padding:0;
    display:inline
}