:root {
  --gap: 10px;
} 
#hook-simulateur{max-width: 100%;}
.page-tablier>#hook-simulateur,
#main>#hook-simulateur{margin-bottom: 80px;}
#expert-simulateur .page_header span{
  font: normal 800 30px / 45px 'Poppins';
  color: #323E48;
}
#expert-simulateur>.header_simulateur_desktop{display: none;}

.flex-evenly{justify-content: space-evenly;}
#hook-simulateur .pick-up-block{padding: 0;}
.box-simulation{
    border-radius: 12px;
    background-color: #F5F7F9;
    padding: 14px 20px;
    width: calc(100% - (581.5px + 12px));
    padding: 14px 19.5px;
}
.page-simulateur.ressort #hook-simulateur .recap-container{width: 100%;}
#hook-simulateur .header{margin-bottom: 14px;}
#hook-simulateur .header .title{
    font: normal 800 30px / 45px 'Poppins';
    color: #323E48;
    width: calc(100% - 200px);
}
#hook-simulateur .price{
    font: normal 800 28px / 42px 'Poppins';
    color: #F89804;
}
#hook-simulateur .commander-btn{gap: 5px;}
#hook-simulateur .commander-btn .price{
  font: normal 600 16px / 22px 'Poppins';
  color: #F89804;
}
#hook-simulateur .avis{gap: 16px;margin-bottom: 16.51px;}
#hook-simulateur .avis .images{gap: 1px;}
.box-images{
    max-width: 581.5px;
    border-radius: 12px;
    background-color: #F5F7F9;
    padding: 14px 20px;
    gap:var(--gap);

}
#hook-simulateur .box-images .slides{
  overflow: hidden;
    max-width: 100%;
}
.mini-slides{gap:var(--gap);}
.box-images img{border-radius: 12px;}
.services{
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 18px;
    gap: 29px;
}
.services img{margin-right: 6px;}
.services span{font: normal 600 12px / 18px 'Poppins';color: #383A42;}
.progress-container{
    gap: 36.5px;
    margin-bottom: 14px;
    max-width: 100%;
    justify-content: space-between;
}
.progress-container .step-line{width: calc((100% / 3) - 36.5px);}

.step-line{ gap:var(--gap);}
.step {
  display: flex;
  align-items: center;
  position: relative;
  gap:var(--gap);
}

.circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #DEEDFB; 
  color: #9DCEF3; 
  z-index: 1;
}

.step.active .circle {
  background-color: #0f172a; 
  color: #fff;
}
.step.active ~ .line{background-color: #0f172a; }  
.step .checkmark {
  display: none;
}

.step.active .checkmark {
  display: block;
}

.step.active .circle span:not(.checkmark) {
  display: none;
}

.label {
    font: normal 400 14px / 21px 'Poppins';
    color: #17243F;
}


.line {
  height: 2px;
  width: 121.5px;
  background-color: #DEEDFB;
}
.box-images .slides{
    overflow: hidden;
    max-width: 541px;
}
.box-images .slick-list{max-width: 541px;}
.box-images .slides .slick-slide{margin-right: 2px;}
.box-images .slides img{border-radius: 12px;max-width: 541px;max-height: 500px;}
.box-images .slides img:hover{transform: unset;}
.box-images .slides .slick-arrow{
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 235px;
    background: rgba(255, 255, 255, 0.7);
}
.box-images .slides .slick-prev{left: 20.5px;}
.box-images .slick-prev:after {content:url('../../img/img-new-simulation/prev.svg')}
.box-images .slides .slick-next{right: 20.5px;}
.box-images .slick-next:after {content:url('../../img/img-new-simulation/next.svg')}

.dimension-field {
  border-radius: 12px;
  overflow: hidden;
  background: white;
  width: calc((100% / 3) - 10px);
  height: 42px;
  border: 1px solid #F7F8F8;
}

.dimension-field input[type="number"] {
  border: none;
  padding: 15px 18px;
  width: calc(100% - 51px);
  outline: none;
  color: #2d3748;
  height: 100%;
  transform: unset;
}
.dimension-field:has(.question){
  border: 0.5px dashed #17243F;
  cursor: pointer;
}
.dimension-field:has(.question) .unit{
  background-color: #F7F8F8;
  width: 51px;
}
.question{
  background-color: #EDEEF1;
  width: calc(100% - 51px);
  height: 100%;
  font: normal 700 12px/16px 'Poppins';
  color: #17243F;
  padding-left: 12px;
}
.dimension-field input::placeholder {
  color:rgba(50, 62, 72, 0.32);
  font: normal 600 12px/16px 'Poppins';

}

.dimension-field .unit {
  background-color: #17243F;
  color: white;
  font: normal 600 12px/16px 'Poppins';
  padding: 14px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  width: 51px;
  height: 100%;
}
#simulation-simple .titre{
  gap:var(--gap);
  font: normal 600 16px / 24px 'Poppins';
  color: #323E48;
}
#simulation-simple  .type-lame-simulateur-simple{height: 0;}
#simulation-simple{gap: 0;}
#simulation-simple .code-ral,
#simulation-simple .step-content,
#simulation-simple{display: flex;gap: 16px;flex-direction: column;}
#simulation-simple .step-content .options,
#simulation-simple .color-grid,
#simulation-simple .poses,
#simulation-simple .manoeuvres,
#simulation-simple .cart,
#simulation-simple .fields{gap: 14px;}
#simulation-simple .accessoire ,
#simulation-simple .types-poses,
#simulation-simple .dimensions{display: grid;gap: 12px;}
#simulation-simple .left ,
#simulation-simple .right ,
#simulation-simple .securite,
#simulation-simple .manoeuvre ,
#simulation-simple .livraison,
#simulation-simple .commandes{gap: 12px;}
#simulation-simple .manoeuvre{width: calc(100% - 266px);}
#simulation-simple .pose{
    width: calc((100% / 4 ) - 14px);
    height: 173px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    display: grid;
}

#simulation-simple .accessoire .moteur{width: 250px;}
#simulation-simple .item input,
#simulation-simple .moteur input,
#simulation-simple .option input,
#simulation-simple .commande input,
#simulation-simple .pose input{
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    min-width: 0;
}
.pose .label::before{visibility: hidden;}
.pose .label{gap:var(--gap);}
#simulation-simple .pose .label img{
    width: auto;
    height: auto;
    max-width: 100%;
}
.pose .text{
  font: normal 400 12px / 18px 'Poppins';
    color: #111827;
}
.page-simulateur .ral-field{
  border: 1px solid #F7F8F8;
  width: 161px;
  height: 42px;
  gap: 2px;
}
.page-simulateur .ral-field input{
    height: 100%;
    border: none;
    width: calc(100% - 45px);
    border-radius: 12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font: normal 600 12px / 18px 'Poppins';
    margin: 0;

} 
.page-simulateur .ral-field .ral{
    width: 45px;
    background: #ffffff;
    height: 100%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
} 
#simulation-simple .color-container{
    width: calc((100% / 5 ) - 12px);
    height: 122px;
    padding: 8px 14.5px;
    border-radius: 16px;
    background: #ffffff;
}
#simulation-simple .color-box{
    width: 98px;
    max-width: 100%;
    height: 53px;
    border-radius: 12px;
}
#simulation-simple .color-info{display: grid;}
#simulation-simple .ref{font: normal 700 16px / 24px 'Poppins';color: #111827;}
#simulation-simple .color-info .description{font: normal 400 12px / 18px 'Poppins';color: #111827;margin-bottom: 6px;}
#simulation-simple .action-step button{
    width: 178.5px;
    height: 43px;
    background: #FF9800;
    color: #fff;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font:normal 500 16px/22px 'Poppins';
    letter-spacing: 0.2px;
  }
#nextBtn[disabled],#prevBtnSimple[disabled]{visibility: hidden;}
#prevBtn[disabled],#nextBtnSimple[disabled]{visibility: hidden;}
.step-content[hidden] {
  display: none !important;
}
#simulation-simple .action-step .prevBtn{
    background: transparent;
    border: none;
    color: #17243F;
    padding: 0;
}
.commande label,
.securite .item label,
.moteur label,
.option label,
.pose label{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
#simulation-simple .moteur{
    height:131px;
    width: calc((100% / 3 ) - 10px);
    border-radius: 12px;
    padding: 24.13px;
    background: #ffffff;
    box-shadow: 0px 0px 4.83px 0px rgba(23, 36, 63, 0.2);
}
#simulation-simple .option{
    height:131px;
    width: 142px  ;
    border-radius: 12px;
    padding: 8px 16px;
    background: #ffffff;
    box-shadow: 0px 0px 4.83px 0px rgba(23, 36, 63, 0.2);
    margin: 0;
}
#simulation-simple .right{width: calc(100% - (249px + 60px));}
#simulation-simple .option{width: 100% !important;}
#simulation-simple .right{width: 249px;}
#simulation-simple .commande{
  width: 148px !important;
  height: 109px;
  padding:12px 8px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0px 0px 4.83px 0px rgba(23, 36, 63, 0.2);
}
#simulation-simple .securite .item{
  width: calc(( 100% / 4 ) - 10px);
  height: 121px;
  padding:12px 8px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0px 0px 4.83px 0px rgba(23, 36, 63, 0.2);
}
#simulation-simple .text{
  font: normal 400 12px / 16px 'Poppins';
  color: #111827;
  text-align: center;
}
#simulation-simple .commandes .slick-slide{min-width:148px !important;margin-right: 14px;width:148px !important}
#simulation-simple .commandes .slick-track{width: 100% !important}
#simulation-simple .commandes .slick-list{padding: 2px;}
#simulation-simple .commandes{overflow: hidden;}
#toggle-simple-mode,
#toggle-expert-mode{
  gap:10px;
  width: 155px;
  height: 30px;
  padding: 6px 8px;
  background-color: #ffffff;
  border: none;
  border-radius: 40px;
}
#simulation-simple .cart .devis {gap:var(--gap);}
#simulation-simple .cart .info{
  background-color: rgba(255, 152, 0, 0.08);
  border: 1px dashed rgba(255, 152, 0, 0.1);
  width: 281px;
  height: 134px;
  padding: 14px 26px;
  border-radius: 8px;
  gap: 4px;
}
#simulation-simple .cart .panier{
  width: calc(100% - 291px);
  gap: 19px;
}
#simulation-simple .info .pro{
  font: normal 600 16px/24px 'Poppins';
  color: #323E48;
}
#simulation-simple .info .remise{
  font: normal 400 14px/24px 'Poppins';
  color: #323E48;
}
#simulation-simple .info .remise span{
  font-weight: 700;
  color: #FF9800;
}
#simulation-simple .info .link{
  font: normal 700 16px/24px 'Poppins';
  color: #323E48;
  text-decoration: underline;
}
#simulation-simple .panier button{
    width: calc(2 * (100%/3));
    height: 56px;
    background: #FF9800;
    color: #fff;
    border: none;
    border-radius: 8px;
    font:normal 600 15px/24px 'Poppins';
    letter-spacing: 0.2px;
}
#simulation-simple .panier .btn-devis{
    width: calc(100%/3);
    background: #ffffff;
    color: #17243F;
    gap:var(--gap);
}
#simulation-simple .alma{gap: 8px;}
#simulation-simple .qte{
  width: 134px;
  height: 56px;
  background: #ffffff;
  border-radius: 8px;
  margin: 0 !important;
}
#simulation-simple .option-alma{
  width: 244px;
  height: 56px;
  background: #ffffff;
  border-radius: 8px;
}
#simulation-simple .add-panier{
  width: 92px;
  height: 56px;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
}
#simulation-simple .alma button{
    border: none !important;
    background: transparent;
    border-radius: unset;
    color: #17243F;
    width: 20px;
    height: 28px;
    font: normal 600 16px/28px 'Poppins';
}
#simulation-simple .alma .qte input{
    width: 30px;
    height: 28px;
    border: none !important;
    text-align: center;
    font: normal 600 16px/28px 'Poppins';
        color: #17243F;


}
#simulation-simple .mdm_sfdelivery-shipping{width: 100%;}
#simulation-simple .mdm_sfdelivery-cart-details{display: none;}
#simulation-simple .mdm_sfdelivery-delivery-option-radio{gap: 14px;}
#simulation-simple .mdm_sfdelivery-delivery-section{width: calc((100% / 3) - 7px); min-width: 103px;}
#simulation-simple .mdm_sfdelivery-delivery-section label{
  width: 100%;
  height: 131px;
  border-radius: 12px;
    padding: 8px 16px;
    background: #ffffff;
    box-shadow: 0px 0px 4.83px 0px rgba(23, 36, 63, 0.2);
}
#simulation-simple .popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.25);
    z-index: 999;
}
#simulation-simple #popup-pose {
    padding: 36px 21.5px;
    width:658px;
    height: auto;
    border: 1px solid #F3F4F6;
    border-radius: 8px;
}
#simulation-simple .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px 30px;
    width:938px;
    z-index: 1000;
}
#simulation-simple .close-popup {
    float: right;
    cursor: pointer;
    font-size: 10px;
    color: #17243F;
    top: 19px;
    right: 19px;
    position: absolute;
}
#popup-mesure .titre{
  font: normal 700 20px / 45px 'Poppins';
  color: #17243F;
}

#popup-mesure .sous-titre{
  font: normal 600 20px / 30px 'Poppins';
  color:#17243F;
  margin-bottom: 6px;

}
#popup-mesure .text{
  font: normal 400 14px / 22px 'Poppins';
  color:#2A2929;
  margin-bottom: 15px;

}
#popup-mesure .images{
    background: #F5F7F9;
    border-radius: 19px;
    padding: 20px 39.35px;
    gap: 48px;
    margin-bottom: 20px;
    justify-content: space-around;
}
#popup-mesure .images img{
    max-height: 215px;
    width: auto;
}
#popup-mesure .image-poses{gap: 15.27px;}
#popup-mesure .image{
  background-color: #F5F7F9;
  padding: 15.36px 19.2px;
  border-radius: 12px;
  gap: 28.8px;
}
#popup-mesure .image span{
    display: grid;
    gap: 5.76px;
    text-align: center;
}
#simulation-simple .color-grid{overflow: hidden;}
#simulation-simple .slide-ral .slick-slide{margin-right: 14px;}
#simulation-simple  .recap-container  {
    flex-direction: unset;
    min-width: unset;
    max-width: unset;
}
#simulation-simple .color-grid .slick-slide[data-slick-index="0"] .color-info .description{font: normal 700 14px / 21px 'Poppins';}
#simulation-simple .color-grid .slick-slide.hidden{width: 0 !important;}
#simulation-simple #popup-pose .image{
  width: 180px;
  height: 173px;
  border:2px solid #FF9800 !important;
  border-radius: 8px;
  box-shadow: 0px 0px 4.83px 0px rgba(23, 36, 63, 0.2);
}
#simulation-simple #popup-pose .content-pose{
  width: calc((100% - (180px + 14px)));
  font: normal 500 13px/22px 'Poppins';
  
}
#hook-simulateur .mdm-ajax-loader{justify-content: center;}
#simulation-simple #popup-pose .content-pose ul{
  list-style: disc;
  padding-left: 20px;
  gap: 10px;
  display: grid;
}
#simulation-simple .commandes span.title {
  font: normal 400 11px / 16px 'Poppins';
  text-align: center;
  color: #383A42;
}
#simulation-simple .styled-option img{max-width: 65px;}
#simulation-simple .loader-container:has(.loader.d-none) {
  background: transparent;
}
#simulation-simple .loader-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}
.loader {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: absolute;
        animation: rotate 1s linear infinite;
      }
      .loader::before , .loader::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 5px solid #23324C;
        animation: prixClipFix 2s linear infinite ;
      }
      .loader::after{
        inset: 8px;
        transform: rotate3d(90, 90, 0, 180deg );
        border-color: rgba(255, 158, 41, 1);
      }

      @keyframes rotate {
        0%   {transform: rotate(0deg)}
        100%   {transform: rotate(360deg)}
      }

      @keyframes prixClipFix {
          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
          75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      }
@media screen and (max-width:1440px){
  #simulation-simple .right{width: calc(100% - (157px + 60px));}
  #simulation-simple .right{width: 157px;}
  .progress-container{gap: 16.5px;}
  .progress-container .step-line{width: calc((100% / 3) - 16.5px);}
  #hook-simulateur .header .title {font: normal 800 27px / 45px 'Poppins';}
}
@media screen and (max-width:768px) {
  .box-images .slides, .slide-item{min-width: 540px !important;}
  .page-product .breadcrumb{
    display: flex;
    flex-wrap: wrap;
  }
   .mini-slides{width: 100%;}
  .mini-slides .thumb-item{min-width: calc((100% / 4) - 8.5px);}
  .page-product .breadcrumb ol{
    width: calc(100% - 110px);
    flex-wrap: wrap;
    font-size: 10px;
  }
  .page-product .product-detail .breadcrumb-separator{margin: 0;}
  #toggle-expert-mode,#toggle-simple-mode{
    gap: 5px;
    width: 103px;
    font-size: 10px;
  }
   #toggle-expert-mode img,#toggle-simple-mode img{
    width: 19px;
    height: 19px;
  }
  .box-simulation,
  .box-images{
    padding: 10px;
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
  }
  .box-images .slides{max-width: 100%;}
  .box-images .slides img{
    max-width: 100%;
    height: auto;
  }
  .box-images .slides .slick-arrow{top: 50%;}
  .mini-slides img{
      width: 100%;
      height: auto;
  }
  .services span {
    font: normal 600 10px / 12px 'Poppins';
  }
  .services{    
    padding: 12px 10px;
    gap: 10px;
  }
  .progress-container{flex-wrap: wrap;}
  .line{width: 38px;}
  .circle{width: 20px;height: 20px;}
  .progress-container{gap: 10px;}
  .page-tablier ~ .h1-title,
  .axe-container-wrapper ~ .h1-title,
  .page-simulateur ~ .h1-title,
  #hook-simulateur .header .title {
    font: normal 700 18px / 27px 'Poppins';
    width: 100%;
  }
  #hook-simulateur .avis{
    width: 100%;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  #hook-simulateur .price{
    width: unset;
    font: normal 800 18px / 24px 'Poppins';
  }
  .progress-container,
  #hook-simulateur .header{margin-bottom: 0;width: 100%;}
  .mini-slides{gap: 8.5px;}
   #hook-simulateur .slide-item{min-width: 100%;}
   #hook-simulateur{gap: 14px;}
  .dimension-field:last-of-type{width: 54px;}
  .dimension-field .question{display: none;}
  .dimension-field{width: calc(((100% - 54px) / 2) - 15px);}
.dimension-field .unit{width: 39px;}
.dimension-field input[type="number"]{width:calc(100% - 39px);padding: 15px;}
#simulation-simple .pose{width:calc((100% / 2 ) - 7px)}
#simulation-simple .titre{font: normal 600 14px / 21px 'Poppins';margin-bottom: 15px;}
.page-simulateur .ral-field{width: 156px;}
#simulation-simple .color-container{width: calc((100% / 2) - 7px);}
#simulation-simple .moteur{width: calc((100% / 3) - 5px);}
#simulation-simple .accessoire .moteur,
#simulation-simple .accessoire,
#simulation-simple .right,
#simulation-simple .cart .info,
#simulation-simple .cart .panier,
#simulation-simple .manoeuvre{width: 100%;}
#simulation-simple .moteur img{max-width: 100%;height: auto;}
#simulation-simple .text{text-align: center;}
#simulation-simple .slide-ral .slick-slide{min-width: 117px;margin-right: 8px;}
#simulation-simple .commandes .slick-slide{min-width:116px !important;}
#simulation-simple .slide-ral .slick-list,
#simulation-simple .slide-securite .slick-list{padding: 2px;}
#simulation-simple .slide-securite .slick-slide{
    min-width: 128px;
    margin-right: 14px;
}
#simulation-simple .installations {gap: 20px;}
#simulation-simple .cart{flex-direction: column-reverse;}
#simulation-simple .panier button{font:normal 600 13px / 20px 'Poppins';}
#simulation-simple .mdm_sfdelivery-delivery-option-radio{gap: 10px;}
/*#simulation-simple .panier button{width: calc(2 * (100%/3))}*/
#simulation-simple .qte{width: 82px;}
#popup-mesure{
    width: 100%;
    max-height: 600px;
    overflow: scroll;
    max-width: 95%;
    padding: 15px;
}
#popup-mesure .content{
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}
#popup-mesure .images img{
  max-width: 100%;
  height: auto;
  }
#popup-mesure .text{text-align: left;}
#popup-mesure .sous-titre{font: normal 600 14px / 20px 'Poppins';}
#popup-mesure .image {
    padding: 15px;
    gap: 25px;
    flex-wrap: wrap;
  justify-content: center;
}
#popup-mesure .image-poses{flex-direction: column;max-width: 100%;}
#simulation-simple .commande {width: 100% !important;}
#simulation-simple #popup-pose{max-width: 95%;padding: 30px 10px;}
#simulation-simple #popup-body{flex-direction: column;gap: 20px;}
#simulation-simple #popup-pose .content-pose{width: 100%;}
#hook-simulateur #simulation-simple .step-content .tabs-motorsations ul li{
  width: 100% !important;
}
#hook-simulateur #simulation-simple .step-content .tabs-motorsations ul {
    flex-wrap: wrap !important;
}

#hook-simulateur #simulation-simple .form-input-options {
    flex-wrap: wrap !important;
}
#hook-simulateur #simulation-simple .form-input-options .form-option{
      width: calc((100% / 3) - 8px) !important;
}
#hook-simulateur #simulation-simple .flex.sens-enroulements.flex-wrap {
    flex-wrap: wrap !important;
    width: 100%;
}
#hook-simulateur #simulation-simple .form-option.enroulement-form-option {
      width: calc(((100% / 2) - 8px)) !important;
}
#hook-simulateur #simulation-simple .motoriser-manuelle-option {
        flex-direction: row;
        width: 100% !important;
        gap: 12px;
}
#hook-simulateur #simulation-simple .sens-enroulements.flex.flex-column {
    width: 100%;
}
#hook-simulateur #simulation-simple .col-6.sous-options.central-sous-options.moteur-central-section-style.central-motorisation-item {
    width: calc(100% / 2) !important;
    min-width: calc(100% / 2 - 8px) !important;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier{
  flex-direction: column !important;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-input-options,
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-option.support-option, 
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-option.agrafe-form-option,
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-option.part-container-white.diametre-bobines-option{
  width: 100% !important;
  max-width: 100% !important;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-input-options{
   width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-input-options .form-option .radio-inputs-group {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#hook-simulateur #simulation-simple .axe-accessoires.axe-tubulaire-options .form-option {
    min-width: 100% !important;

}
#hook-simulateur #simulation-simple .form-input-options.part-container-white.diametre-bobines-option .radio-inputs-group.flex.flex-gap {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}
}
@media screen and (max-width:480px){
  #simulation-simple .mdm_sfdelivery-delivery-option-radio{flex-wrap: wrap;}
  #simulation-simple .mdm_sfdelivery-delivery-section{width: 100%;}
  .progress-container .step-line { width: unset;}
  .progress-container{justify-content: flex-start;}
}
.box-images .slides img {
    border-radius: 12px;
    max-width: 541px;
    max-height: 500px;
    width: 100% !important;
    height: 100% !important;
}
.box-images .slides, .slide-item{
  width: 100%;
  height: 100%;
  min-width: 540px;
}
/**** axe mode expert***/

#hook-simulateur #simulation-simple .step-content .tabs-motorsations ul{
  flex-wrap: nowrap;
}
#hook-simulateur #simulation-simple .step-content .tabs-motorsations ul li{
  width:calc(100% / 3 - 18px);
}
#hook-simulateur #simulation-simple .step-content .tabs-motorsations button{
  min-width:calc(100% / 3);
  background-color: #fff;
}
#hook-simulateur #simulation-simple .type-lame-container.part-container.type-tablier-container label{
      gap: var(--gap);
    font: normal 600 16px / 24px 'Poppins';
    color: #323E48;
}
#hook-simulateur #simulation-simple .type-lame-container.part-container.type-tablier-container label.hide-checkbock{
     gap:20px;
    font: normal 400 12px / 24px 'Poppins';
    color: #111827;
    order: 3;
    outline-color: transparent;
    background-color: #fff !important;
}
.motorise .motorisation-enroulement-section input:checked + label{
    outline-color: #fff !important;
    background-color: #fff !important;
}
.motoriser-manuelle-option>.form-option{
  padding: 10px;
}

#hook-simulateur #simulation-simple .moteur-part-one span.simulator-container-label {
    width: 100%;
    gap: var(--gap);
    font: normal 600 16px / 24px 'Poppins';
    color: #323E48;
   
}
#hook-simulateur #simulation-simple .col-6.sous-options.central-sous-options.tubulaire-sous-options.tubular-motorisation-item .moteur-part-one span.simulator-container-label{
 text-align: center;
}
#hook-simulateur #simulation-simple .form-input-options {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;
    gap: 12px;
}
#hook-simulateur #simulation-simple .form-input-options .form-option{
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    border: 0.6px solid #f3f4f6;
    border-radius: 12px;
    padding: 0px;
    flex-wrap: wrap;
    flex-direction: column;
    width: calc(((100% - 0px) / 6) - 8px);
    gap: 20px;
}

#hook-simulateur #simulation-simple input[name="lame-epaisseur-option"] {
    order: 2;
}
#hook-simulateur #simulation-simple  .form-input-options .form-option .image {
    order: 1;
}

#hook-simulateur #simulation-simple .form-option.enroulement-form-option{
      background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 122px;
    border: 0.6px solid #f3f4f6;
    border-radius: 12px;
    flex-wrap: wrap;
    width: 137px;
    padding: 8px;
    flex-direction: column-reverse;
    gap:12px;
}
#hook-simulateur #simulation-simple .form-option.enroulement-form-option img{
      height: 90px;
    width: 85px;
}

#hook-simulateur #simulation-simple .motorise.flex.flex-column {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
   width: 100%;
}
#hook-simulateur #simulation-simple .motorisation-enroulement-section{
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hook-simulateur #simulation-simple .flex.sens-enroulements.flex-wrap {
    gap: 25px;
    flex-wrap: nowrap;
    width: 100%;
}
#hook-simulateur #simulation-simple .motorise .titre{
  margin-bottom: 15px;
}
#hook-simulateur #simulation-simple .flex.type-moto .central-motorisation-item.motorisation-item label{
      gap: var(--gap);
    font: normal 600 16px / 24px 'Poppins';
    color: #323E48;
    margin-bottom:15px;
}
#hook-simulateur #simulation-simple .flex.type-moto .col-6.sous-options.central-sous-options.moteur-central-section-style.central-motorisation-item,
#hook-simulateur #simulation-simple .flex.type-moto .col-12.motor-dimension.moteur-central-section-style.central-motorisation-item {
    /*width: calc(100%/3) !important;
    max-width: calc(100%/3) !important;*/
    padding: 0;
    flex: 1;
    height: 105px;
}
#hook-simulateur #simulation-simple .type-lame-container.part-container.type-tablier-container .form-input-options .form-option {
    min-height: 190px !important;
}
#hook-simulateur #simulation-simple .tubular-motorisation-item .enroulements-container.part-container.motor-side-container .form-option {
    min-height: 135px;
}
#hook-simulateur #simulation-simple .enroulements-container.part-container.motor-side-container label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
     gap: var(--gap);
    font: normal 600 16px / 24px 'Poppins';
    color: #323E48;
}
#hook-simulateur #simulation-simple .form-input-options .form-option label{
   font: normal 400 13px / 20px 'Poppins' !important;
}
#hook-simulateur #simulation-simple .form-input-options .form-option{
    
          min-height: 122px;
}
#hook-simulateur #simulation-simple .form-input-options.flex-gap.flex-center-elements {
    background: #fff;
    border: 0.6px solid #f3f4f6;
    border-radius: 12px;
    display: flex;
    justify-content: space-around !important;
}
#hook-simulateur #simulation-simple .form-input-options.flex-gap.flex-center-elements .form-option.form-option-transparent{
  border: none !important;
}
#hook-simulateur #simulation-simple .tubular-motorisation-item.flex-grow-1 {
    width: 100%;
}
#hook-simulateur #simulation-simple .flex.type-moto.flex-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap:5px;
}
div#axe-step-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#hook-simulateur #simulation-simple .col-12.central-motorisation-item.motorisation-item.hide-for-type {
    display: block !important;
}

.color-box.active {
    border: 0.5rem solid #007bff !important;
}

.color-box.active::after {
    content: "✓ Sélectionné";
    position: absolute;
    top: 0;
    right: 0;
    background: #007bff;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.2rem 0.4rem;
    border-bottom-left-radius: 10rem;
}

 #hook-simulateur #simulation-simple .flex.type-moto .col-12.motor-dimension.moteur-central-section-style.central-motorisation-item .moteur-part-tow{
  display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    align-content: center;
    
 }
#hook-simulateur #simulation-simple  .moteur-part-tow .simulator-label{
      padding: 2px;
      margin: 0px 10px;
}
#hook-simulateur #simulation-simple .moteur-part-tow.acm.hidden{
  display: none !important;
}
#hook-simulateur #simulation-simple .moteur-part-one {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#hook-simulateur #simulation-simple .part-container-white{
  border: 0 !important;
}
/*#simulation-simple .step-content{
  margin-bottom: 10px;
}*/

#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-input-options .form-option{
  width: calc(100%  - 8px);
  min-height: 170px;
  border: 0;
  flex-wrap: nowrap;
  gap: 8px;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-input-options .form-option .radio-inputs-group .form-option{
  min-height: 0;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-input-options .form-option .radio-inputs-group{
   width: 100%;
}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-option.support-option,
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-option.agrafe-form-option {
    display: flex;
    flex-direction: column-reverse !important;
}
#hook-simulateur #simulation-simple .form-input-options.part-container-white.diametre-bobines-option {
      flex-direction: column !important;
      align-items: center;
}
#hook-simulateur #simulation-simple .col-6.sous-options.central-sous-options.tubulaire-sous-options.tubular-motorisation-item .part-container-white{
 align-items: center;

}
#hook-simulateur #simulation-simple .lame-finale-options-container.accessoires-tablier .form-input-options{
    height: 150px;
    gap:14px;
}
#hook-simulateur #simulation-simple .axe-accessoires.axe-tubulaire-options .form-option {
    min-width: calc(100% / 2);
    gap: 14px;
    display: flex;
    flex-direction: column-reverse;
}
#hook-simulateur #simulation-simple .axe-accessoires.axe-tubulaire-options{
  width: 100%;
}
#hook-simulateur #simulation-simple .axe-accessoires.axe-central-options.flex.flex-column {
    width: 100%;
}
#hook-simulateur #simulation-simple .form-input-options.part-container-white.diametre-bobines-option .radio-inputs-group.flex.flex-gap {
    width: 100%;
}
#hook-simulateur #simulation-simple .info-cmd .cart.flex{
  width: 100%;
  max-width: 100% !important;
    padding: 0;
    flex: 1;
}
#hook-simulateur #simulation-simple .info-cmd .cart .info,
#hook-simulateur #simulation-simple .info-cmd .cart .panier {
   width: 100%;
  max-width: 100% !important;
    padding: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
#hook-simulateur #simulation-simple .info-cmd .cart .panier .devis,
#hook-simulateur #simulation-simple .info-cmd .cart .panier .recap-container{
  width: 100%;
}

#hook-simulateur #simulation-simple .info-cmd .cart .panier .recap-container .qte,
#hook-simulateur #simulation-simple .info-cmd .cart .panier .recap-container .option-alma,
#hook-simulateur #simulation-simple .info-cmd .cart .panier .recap-container .add-panier{
  width: calc(100%/3) !important;
  max-width: calc(100%/3) !important;
}
#hook-simulateur #simulation-simple .axe-step-content .dimensions {
    margin-bottom: 25px;
}
#hook-simulateur #simulation-simple .info-cmd .cart .info{
  padding: 20px 45px;
  border:1px dashed #FF9800;
}
#hook-simulateur #simulation-simple .col-6.sous-options.central-sous-options.tubulaire-sous-options.tubular-motorisation-item {
    padding: 0;
    height: 118px;
        width: 50% !important;
    max-width: 50% !important;
    flex: 1;
}
/* Border pour la section quand l'input est checked */
#hook-simulateur #simulation-simple .mdm_sfdelivery-delivery-section.selected {
    outline-color: #FF9800;
    background-color: #fff5e6 !important;
    transform: scale(1.05);
    border: unset !important;
}

.simulation input:checked+label {
    outline-color: orange !important;
    background-color: #fff5e6 !important;
    transform: scale(1.05);
    border: unset !important;
}
#axe-step-content .form-option input:checked ~ label[for] {
    background-color: #fff !important;
    outline-color: transparent !important;
}
#axe-step-content .info-cmd{
    margin-top: 20px;
}