@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --bgc: #17895626;
    --clr: #198754;
}
.txt-arabic {
   font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 25px;
}

.txt-arabic-login {
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 17px;
}
body{
    font-family: "Inter", sans-serif;
}

.bghero{
    background:#E0F1E0;
}

.nav-link:active{
  color:#000 !important;
}

.bggrey{
    background: rgba(235, 237, 240, 45%);
}

.degrad_txt{

    background: linear-gradient(to right, #4CAF50, #92E3A9 ); /* Ton dégradé */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-top:1.5rem;
}



.nav-link{
  color:#000;
}


.carousel-item{
  text-align:left;
}

.nav-link.active{
  color:#47b355 !important;
  font-weight:700;
}

.nav-link:hover{
  color:#000;
}

.right_fontc h4{
    margin-left: 1rem;
    font-size:20px;
}

.testimonial-section{
  border-radius:16px;
  box-shadow: 0px 5px 12px  rgba(0, 0, 0, 0.08);
}

.testimonial-info {
  display: flex;
  flex-direction: column;
  margin-left:10px;
}

.btnhero{
    padding:0.5rem 2.5rem;
}


.testimonial-footer {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}


.right_fontc p{
    margin-left: 2.5rem;
}


.bgblack{
    background:#23272F;
}

.btngreen{
    background:#4CAF50;
    border-radius:4px;
    font-size:20px;
    font-weight:600;
    color:#fff;
}

.btngreen:hover{
    background:#4CAF50 !important;
    color:#fff;
}





h1{
    font-size:40px;
    font-weight:600;
}





 .vertical-steps {
      position: relative;
      margin-left: 30px;
      border-left: 2px solid #4CAF50; /* ligne verticale */
      height:224px;
    }


.step {
      position: relative;
      padding-left: 40px;
      margin-bottom: 30px;
    }

    .step::before {
      content: attr(data-step);
      position: absolute;
      left: -16px;
      top: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color:#fff ; /* Bleu Bootstrap */
      color: white;
      text-align: center;
      line-height: 30px;
      font-weight: bold;
      color:#4CAF50;
      border:1px solid #4CAF50;

    }

    .step:last-child {
      margin-bottom: 0;
    }


     .vertical-steps h5{
        font-size:20px;
        font-weight:600;
     }


        .vertical-steps p{
        font-size:20px;
        font-weight:400;
     }


     .bgtesti{

        background:#E0F1E0;
     }




    @media (max-width: 576px) {
      .testimonial-quote {
        font-size: 1rem;
      }
    }


    .carousel-indicators button {
    background-color: #333 !important;
  }





  /***dots***/

   .carousel-indicators {
      bottom: -30px;
    }

    .carousel-indicators [data-bs-target] {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #6c757d;
      opacity: 0.5;
      transition: all 0.3s ease;
      margin: 0 5px;
    }

    .carousel-indicators .active {
      background-color: #0d6efd;
      opacity: 1;
      transform: scale(1.2);
    }

    .testimonial-quote {
      font-size: 24px;
      font-style: italic;
      color: #555;
    }

    .testimonial-author {
      font-weight: bold;
      margin-top: 15px;
      color: #333;
    }

    .testimonial-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 15px;
    }


     .testimonial-section {
      background-color: #fff;
      padding: 60px 20px;
      background-image: url("../images/testimonial.svg");
      background-repeat: no-repeat;
  background-position: 90% center;


    }

    .footer-title{
      font-size:18px;
      font-weight:700;
    }

    .footer-menu{
      padding: 0px;
    list-style: none;
    color: #fff;
    }

      .footer-menu li a {
    color: #fff;
    }

    .btnheader{
      background:#EBEDF0;
      color:#444950;
      font-size: 1rem!important;
    }


    .btnheadertwo{
      background:#4CAF50;
      color:#fff;
      font-size: 1rem!important;
    }


.bghero{
 border-bottom-right-radius:100px;
}


.card-body{
  text-align:left;
}


.cardone,.cardtwo,.cardthree{
  margin-bottom:32px;
}


.cardone .card{
  border-radius:16px;
  border:1px solid #C0DDC1;
  background: linear-gradient(to bottom, #E6F4E6, #fff);

}

.cardone a{
  background:#4CAF50;
  color:#fff;
  width:100%;
  border:none;

}


.cardtwo .card{
  border-radius:16px;
  border:1px solid #ACD3E8;
  background: linear-gradient(to bottom, #E7F5FE, #fff);
}


.cardtwo a{
  background:#4FBEFB;
  color:#fff;
  width:100%;
  border:none;

}
.card-gratuit{
    border: 2px solid #178956;
}

.cardthree .card{
  border-radius:16px;
  border:1px solid #DABCEA;
  background: linear-gradient(to bottom, #F8EDFF, #fff);
}

.cardthree a{
  background:#B85DE9;
  color:#fff;
  width:100%;
  border:none;

}

.smalltxt{
  font-size:14px;
  font-weight:400;
}

.card-price{
  font-size:30px;
  font-weight:700;
}

.card-text{
  padding-left:0px;
  margin-top:24px;
}

.card-text li{
  list-style:none;
  margin-top:8px;

}

.social_footer li{
list-style:none;
display:inline-block;
margin-left:16px;
margin-top:18px;
}


.liheight{
  line-height:61px;
}

.txtgras{
  font-size:15px;
  color:#23272F;
  margin-bottom:3rem;
  padding:0 25%;
}


/*****loginpage**************/


.loginpage{
  background:
  #FAFAFA url("../images/loginbg.png") no-repeat top center;
  background-size:100%;
}


.boxform{
padding:3rem;
width:550px;
border-radius:32px;
box-shadow:0px 8px 30px rgba(212, 212, 212, 0.7);

}


 input, button{
  height:54px;
  }


.boxform button{
background:#4CAF50;
border:none;
}







.boxform h4{
font-weight:600;
font-size:32px;

}
/* .txt_vert{
  padding-left:4%;
} */

.boxform input:focus {
  border-color: #111111; /* Couleur bleue Bootstrap */
  outline: none;          /* Pour supprimer le contour par défaut */
  box-shadow: 0 0 0 3px  rgba(76, 175, 80, 0.2) /* Optionnel */
}




   .form-floating label {
      transition: 0.2s ease all;
      pointer-events: none;
    }

    .form-floating input:focus + label,
    .form-floating input:not(:placeholder-shown) + label {
      transform: scale(0.85) translateY(-1.5rem);
      opacity: 0.8;
    }



    .txt_vert{
      color:#4CAF50;
      font-size:18px;
      font-weight:600;
      text-align: center;
    }


@media (max-width: 576px) {

.boxform{
padding:1.5rem;
width:90%
}
.fs-7
{
    font-size: 14px;
}
.txt_vert{
  padding-top:10%;
}

.txt_vert{
  padding-left:0;
  padding-right:0;
}
    }




    .bg-topheader{
      background:#E0F1E0;

    }

       .bg-topheader span{
        color:#4CAF50;

       }

       .bg-topheader a{
        background:#4CAF50;
        color:#fff;
       }


       .header_dashboard{
        position:relative;
        z-index:999;
       }


       .vertical_menu a {

        margin-bottom:14px;
        background:#F3F4F3;
        border-radius:4px;
        width:170px;
        font-size:14px;
       }

        .vertical_menu a.active{
          background:#E6F4E6;
          color:#4CAF50 !important;
         }

         .vertical_menu a img{
         margin-right:8px;
         }




   .traitebg{
    background:url('../images/traite.png') center center no-repeat;
    background-size:contain;
    aspect-ratio: 9/7;
    width:100%;
    position:relative;

   }




   .traitebgvide{

     background:url('../images/bgtraitevide.png') center center no-repeat;
    background-size:contain;
    height:800px;
   }


   .traitebg input{
    background:#fff;
    border:1px solid #000;
    border-radius:0px !important;
   }


   .form-overlay {
      position: relative;
      width: 100%;
      max-width: 900px;
      height:700px;
      aspect-ratio: 9/7;
    }



.h-53
{
  height: 53px;
}

.h-45px{
    height: 45px;
}
.print_btn .btn{

 background:#4CAF50;
 color:#fff;
 padding:0rem 3rem;
 font-size:20px;
 font-weight:600;
 margin-top:16px;
}
.save_btn.btn, .save_btn.btn:hover, .save_btn.btn:active, .save_btn.btn:focus{

 background:#4CAF50;
 color:#fff;
 padding:0rem 2rem;
 font-size:16px;
 font-weight:500;
 margin-top:16px;
 height: 45px;
}
.print_btn .btn:focus{

 background:#4CAF50;
 color:#fff;
 padding:0rem 3rem;
 font-size:20px;
 font-weight:600;
}


.guide{
  position:relative;
  top:30%;
}

.print_btn .btn i{
margin-right:8px;

}

.modal-dialog {
      max-width: fit-content;
      margin: auto;
    }

    .modal-body {
      padding: 1rem;
    }

    .modal-body img {
      display: block;
      max-width: none;
      height: auto;
    }


    .zoom-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  a:hover .zoom-icon {
    transform: scale(1.3) rotate(2deg);
    opacity: 0.8;
  }


   .table-no-vertical-borders td,
  .table-no-vertical-borders th {
    border-left: none;
    border-right: none;
  }

  .exp_btn{
    height:36px;
    background:#263238;
    font-size:12px;
    font-weight:600;
    color:#fff;
  }


    .exp_btn:hover , .exp_btn:focus{
      background:#263238;
      color:#fff;

    }


    .inputtable{
      height:36px;
    }

    .impsmall{
      background:#4CAF50;
      height:36px;
      color:#fff;
    }

    .suivcbtn,.precbtn{
height:36px;
border:1px solid #E2E2E2 !important;
    }

    .pagination  a {
      border:none;
      color:#000 !important;
    }

        .pagination .active .page-link{
          background:#F3F4F3;
          border-radius:3px !important;
          font-weight:800;
        }

        .pagination .disabled .page-link{
          background:#fff;

        }




        .bgdate input{
          height:36px;
        }


        .traitebgvide form{
          padding:5rem 3rem;
        }

        .traitebgvide input{
          height:30px;
          border:1px solid #000;
          border-radius:0px;

        }

          .traitebgvide  label{
             font-weight:600;
             margin-bottom:0px;

          }


            .traitebgvide select{
          height:30px;
          border:1px solid #000;
          border-radius:0px;
          line-height:16px;

        }


        #tableModal .modal-content {
          width:700px;
        }

        .table-light th{
          border:none;
        }

        .modal-header{
          border:none;
        }

        .modal-header .btn-close:active, .modal-header .btn-close:focus
        {
            box-shadow:none!important;
        }

        .sizetxt{
          font-size:36px;
          font-weight:500;
        }


        .bgguide{
          background:#F3F4F3;
        }


        .box_guide{
          background:#fff;
          box-shadow:0 4px 4px rgba(0,0,0,10%);
          margin-bottom:16px;
          border-radius:6px;
        }


        .number_guide{

          font-size:32px !important;
          font-weight:900 !important;
          /* -webkit-text-stroke:1px  #4CAF50; */
          color:#E6F4E6 !important;
           text-shadow:
    -1px -1px 0 #4CAF50,
    1px -1px 0 #4CAF50,
    -1px 1px 0 #4CAF50,
    1px 1px 0 #4CAF50;

        }


       .box_guide .text-muted{
        color:#000 !important;
       }




       .tariteprint{
        background: url('../images/tvide.png') center center no-repeat;
    background-size: contain;
    height: 600px;
    width: 100%;
    max-width: 740px;
    margin:0 auto;


       }

       .form_result{
        width:100%;
        position:relative;
       }


       .lieu_result{
        position:absolute;
        top: 106px;
    left: 362px;
       }


       .date_result{
         position:absolute;
        top: 126px;
        left: 228px;
       }


       .fdate_result{
        position:absolute;
        top: 126px;
        left: 362px;


       }

       .rib_result{
        position:absolute;
        top: 168px;
        left: 228px;
       }


       .montant_result{
  position:absolute;
        top: 168px;
        left: 580px;

       }



       .name_result{
          position:absolute;
        top: 238px;
        left: 228px;
       }


       .montant_result_two{
        position:absolute;
        top: 238px;
        left: 580px;
       }



       .montantletter_result{
          position:absolute;
        top: 260px;
    left: 328px;

       }



       .lieucrea_result{
         position:absolute;
        top: 300px;
    left: 39px;

       }


       .datecrea_result{
         position:absolute;
        top: 300px;
    left: 143px;
       }

       .echecrea_result{
        position:absolute;
        top: 300px;
    left: 256px;
       }


       .ribfin-result{
         position:absolute;
        top: 346px;
        left: 39px;
       }

       .addree-result{
        position: absolute;
    top: 373px;
    left: 333px;

       }


       .bank-result{
        position:absolute;
        top:373px;
        left:520px;
       }


       .closebtn{
        background:#E6F4E6;
        border:1px solid #4CAF50;
        border-radius:4px;
        color:#4CAF50;
        padding: 0.1rem 1rem !important;
        height:36px;
       }

       .closebtn:hover{
        background:#E6F4E6;
        border:1px solid #4CAF50;
        color:#4CAF50;

       }



        @media (max-width: 767px){

          h1{
            font-size:26px;
          }

          .bghero{
            padding:1rem !important;
          }

          .btngreen{
            font-size:16px;
          }

          .numbersectionhero{

            margin-bottom:1rem;
          }

          .vertical_menu a{
            width:100%;
          }

          .vertical-steps{
            height:auto;
          }

          .social_footer{
            padding-left:0px;
          }

   .traitebg{
    background:none;
   }

.field,.date_debut,.date_fin,.rib,.montant,.fournisseur,.payeur,.addresse,
.addressbanque,.banque{

  position:relative;
  left:0px !important;
  width:100% !important;
  top:initial !important;
  margin-bottom:16px;

}

.form-overlay{
  height:auto;
}


.traitebgvide{
  background:none;
}
.traitebgvide form{
  padding:0px;
}


.traitebgvide input{
  margin-bottom:16px;
}
   .traitebgvide select{
  margin-bottom:16px;
}



        }


        .addree-result {
  white-space: normal;
}








@media print {
  /* Masquer les éléments inutiles à l'impression */
  button,
  .bgguide,
  h3,
  .btn,
  .text-center.mt-5 {
    display: none !important;
  }

  /* Empêcher que plusieurs traites soient sur la même page */
  .tariteprint {
    page-break-before: always;
    break-before: page;
  }

  /* Supprimer les marges du body pour utiliser tout l'espace */
  body {
    margin: 0;
    padding: 0;
  }

  /* Optionnel : Agrandir la zone à imprimer si besoin */
  #liste_traites_print {
    width: 100%;
  }
}


.retourbtn{
  background:#E6F4E6;
  border:1px solid #4CAF50;
  border-radius:4px;
  color:#4CAF50;
  height:38px;
}

.retourbtn:hover{
  background:#E6F4E6;
  border:1px solid #4CAF50;
  color:#4CAF50;
}


.vertbtn{
  color:#fff;
  background:#4CAF50;
  border:none;
  padding: 0px 15px !important;
    height: 38px;
}


.vertbtn:hover{
  color:#fff;
  background:#4CAF50;
  border:none;
}

div.dataTables_wrapper div.dataTables_filter{
  text-align:left !important;
}






#datatable-traites_wrapper .buttons-excel{
  background:#fff;
}

#datatable-traites_wrapper .buttons-pdf{
   background:#fff;
}

#datatable-traites_wrapper .buttons-print{
   background:#fff;
}




#datatable-traites_wrapper .buttons-excel:hover{
  background:#198754 !important;
}

#datatable-traites_wrapper .buttons-pdf:hover{
   background:#dc3545 !important;
}

#datatable-traites_wrapper .buttons-print:hover{
   background:#0d6efd !important;
}



table.dataTable.table-striped>tbody>tr.odd>*{
  box-shadow:none !important
}

.odd td{
  text-align:left;
}

.even td{
  text-align:left;
}


.dt-buttons{
  margin-bottom:16px;
}

.dt-buttons button{
  height:40px;
}

#datatable-fournisseurs_filter input{
  height:40px;
}
#datatable-banques_filter input{
  height:40px;
}

#datatable-traites_filter input{
  height:40px;
}


#dateStart{
  height:40px;
}

#dateEnd{
  height:40px;
}



.nubr_hero{
  font-weight:900;
  color:#4CAF50;
  font-size:20px;
}

.vr{
  color:#4caf50;
}


.soushero{
  font-weight:600;
  font-size:14px;
}



.bgvido{
  background: #000000;
  border-radius: 40px;
  box-shadow: 0 5px 0px #4caf50;
    height: 412px;
    border:2px solid #4caf50;

}

.navbar-collapse
{
  flex-grow: unset;
}

/* Fixed: convert SCSS to valid plain CSS for production */

.slider {
  background: white;
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
  pointer-events: none;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slide-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: calc(250px * 14);
}

.slide {
  height: 100px;
  width: 250px;
  flex-shrink: 0;
}


.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  color: #23272f;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  padding: 10px 15px;
}

.arrow:hover {
  background: rgba(0, 0, 0, 0.125);
}

.arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.arrow.prev {
  left: 10px;
}

.arrow.next {
  right: 10px;
}


.slider-container {
  position: relative;
  margin: 0 auto;
}

.slider {
  margin: 0 10px;
}

.slide {
  padding: 0 15px;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.arrow:hover {
  background: rgb(224 241 224 / 37%);
}
.slick-list
{
  padding:14px!important;
}
.btn-topheader:hover,.btn-topheader:active,.btn-topheader, .btn-topheader:focus
{
  color:#fff!important;
  border-color: #4CAF50!important;
  background-color: #4CAF50!important;
}
.print_btn
{
   margin-top: 1rem;


}
.bloc-guide
{
  margin-top: 13rem;

}
.icon-bank, .icon-fournisseur, .icon-traite, .icon-order
{
  text-align: center;
    padding-right: 5px;
    font-size: 17px;
}
.icon-logout
{
  color:#ff0b0b;
}
.configuration.form-overlay
{
  max-width: 900px;

}



#configuration .select2-container--default .select2-selection--single
{
  border: 1px solid #dee2e6!important;
  border-radius: 6px!important;
}
#configuration .select2-container--default .select2-selection--single .select2-selection__rendered
{
  line-height: 73px!important;
}
#configuration .select2-container--default .select2-selection--single .select2-selection__arrow
{
  top: 17px!important;
}
 .btn.btn-create, .btn.btn-create:hover, .btn.btn-create:active, .btn.btn-create:focus
 {
  background:#4CAF50;
  color:#fff;
  font-size:14px;
  font-weight:400;
  height:40px;
 }
 .danger-btn, .danger-btn:hover, .danger-btn:active, .danger-btn:focus
 {
  background-color: #dc3545;
  color: white;
  border: none;
  height: 38px;
 }
 .edit-btn,.edit-btn:hover, .edit-btn:active, .edit-btn:focus
 {
  background-color:#ffc107;
  color: white;
  border: none;
  height: 38px;
 }
 /* .save_btn .btn{
  height: 45px;
  background: #4CAF50;
  color: #fff;
  padding: 0rem 2rem;
  font-size: 16px;
  font-weight: 400;
  margin-top: 16px;
 } */

 /* .save_btn .btn:focus{
  background: #4CAF50;
  color: #fff;
  padding: 0rem 2rem;
  font-size: 16px;
  font-weight: 400;
 } */

 #nouveauBanque .modal-content, #nouveauFournisseur  .modal-content{
  border: none !important;
  border-radius: 20px !important;
  width:500px;
 }
 #client  .modal-content, #nouveauFacture .modal-content
 {
   border: none !important;
  border-radius: 20px !important;
  width:700px;
 }
 .modal-header {
  border-bottom: transparent !important;
  padding: 2rem 1.5rem!important;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}
#nouveauBanque .modal-dialog, #nouveauFournisseur .modal-dialog, #client .modal-dialog, #nouveauFacture .modal-dialog
{
  margin-top: 6.75rem!important;
}
.closebtn{
  background:#303038d9;
  color:#fff;
  font-size:14px;
  font-weight:400;
  height:40px;
  border:none;
}
.icon-insert
{
  font-size: 18px;
  color: #18181c;
}
#nouveauFournisseur .icon-insert
{
  font-size: 20px!important;
}
.required {
  color: #dc3545;
}
.is-invalid {
  border-color: #dc3545 !important;

}
.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 0.95em;
  margin-top: 5px;
}

.custom-confirm-btn, .custom-succes-btn,
.custom-cancel-btn {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    height: 45px;
}

.custom-confirm-btn,
.custom-cancel-btn,
.swal2-actions .custom-confirm-btn:hover {
    background-color: #dc3545 !important;
    color: white !important;
    background-image: unset !important;
}

.custom-cancel-btn,
.swal2-actions .custom-cancel-btn:hover {
    background-color: #6c757d !important;
    color: white !important;
    background-image: unset !important;
}

.custom-text-alert,
.custom-title-alert {
    color: #18181c !important;
}

.custom-title-alert {
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 29.25px !important;
}

.custom-text-alert {
    font-weight: 300 !important;
    font-size: 16px !important;
    line-height: 26px !important;
}

.delete-alert {
    width: 476px !important;
}

.delete-alert .swal2-footer {
    margin: unset !important;
    padding: unset !important;
    border-top: unset !important;
}

div:where(.swal2-container) div:where(.swal2-html-container)
{
  font-size: 1rem!important;
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #4caf50;
  outline: 0;
   box-shadow: unset!important;
}
@media (min-width: 992px) {

    .boxform a{
        color:#4CAF50;
        text-decoration: underline !important;

        }
         .bloc-guide{
            overflow:auto;
            width:35%;
             position:absolute;
             right:0;
             bottom:0;
             top:0;
             padding:30px;
        }
        .print_btn
        {
            width:65%;
            display:inline-block;
        }
.notif-config
{
  top: 8%;
  left: 25%;
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: #ff9000;
  z-index: 11;
}
.animate-circle {
  position: absolute;
  bottom: 15%;
  left: 25%;
  height: 25px;
  width: 25px;
  z-index: 10;
  border: 6px solid #ff9000b8;
  border-radius: 70px;
  -webkit-animation: heartbit 1s ease-out;
  animation: heartbit 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  pointer-events: none;
}
    #configuration .select2-container .select2-selection--single
    {
    height: 59px!important;
    width:438px!important;
    }
    #imp_paiement .field {
        position: absolute;
        top: 18.8%;       /* 132 / 700 */
        left: 48.9%;      /* 440 / 900 */
        width: 16.9%;     /* 152 / 900 */
        height: 4.3%;     /* 30 / 700 */
      }

      #imp_paiement .date_fin {
        position: absolute;
        top: 22.4%;       /* 164 / 700 */
        left: 29.8%;      /* 268 / 900 */
        width: 16.1%;     /* 145 / 900 */
        height: 4.3%;
      }

      #imp_paiement .date_debut {
        position: absolute;
        top: 23.4%;       /* 164 / 700 */
        left: 48.9%;      /* 440 / 900 */
        width: 16.9%;
        height: 4.3%;
      }

      #imp_paiement .rib {
        position: absolute;
        top: 29.1%;       /* 204 / 700 */
        left: 30.5%;      /* 275 / 900 */
        width: 37.1%;     /* 334 / 900 */
        height: 4.3%;
      }

      #imp_paiement .montant {
        position: absolute;
        top: 29.1%;
        left: 73.3%;      /* 660 / 900 */
        width: 20%;       /* 180 / 900 */
        height: 4.3%;
      }

      #imp_paiement .fournisseur {
        position: absolute;
        top: 41%;         /* 287 / 700 */
        left: 30.5%;
        width: 37.1%;
        height: 4.3%;
      }

      #imp_paiement .payeur {
        position: absolute;
        top: 62.4%;       /* 437 / 700 */
        left: 44.4%;      /* 400 / 900 */
        width: 19.3%;     /* 174 / 900 */
        height: 4.3%;
      }

      #imp_paiement .addresse {
        position: absolute;
        top: 66.8%;       /* 468 / 700 */
        left: 44.4%;
        width: 19.3%;
        height: 4.5%;     /* 32 / 700 */
      }

      #imp_paiement .banque {
        position: absolute;
        top: 59.9%;       /* 419 / 700 */
        left: 65.7%;      /* 592 / 900 */
        width: 27.4%;     /* 247 / 900 */
        height: 4.5%;
      }

      #imp_paiement .addressbanque {
        position: absolute;
        top: 66.8%;
        left: 65.7%;
        width: 27.4%;
        height: 4.5%;
      }

  #imp_paiement .select2-container .select2-selection--single {
    height:31px!important;
  }
  #imp_paiement .select2-container--default .select2-selection--single {
    border: 1px solid #000000 !important;
    border-radius: unset !important;
  }
  #imp_paiement .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #595c5f!important;
    line-height: 28px!important;
  }
  #imp_paiement .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 2px !important;
  }
  #imp_paiement #selectRib .select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    top: 12.75rem!important;
    left: 16.5rem!important;
    width: 331.984px!important;
  }
  #imp_paiement #selectFour .select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    top: 16rem!important;
    left: 16.5rem!important;
    width: 331.984px!important;
  }
  #imp_paiement .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #000000 transparent transparent transparent!important;
  }
}
@media(max-width:767px)
{
    #configuration .select2-container .select2-selection--single
    {
    height: 59px!important;
    width:none!important;
    }
    .print_btn {
        margin-top: 2rem;
        align-items: center;
        margin-left: 4.5rem;
    }

    #imp_paiement .select2-container .select2-selection--single {
        height:59px!important;
      }
      #imp_paiement .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 54px !important;
      }
      #imp_paiement .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 74px!important;
      }
      #imp_paiement .select2-container--default .select2-selection--single {
        background-color: #fff;
        border: 1px solid #edeef1!important;
        border-radius: 4px;
    }
}
body .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #000000!important;
  height: 31px!important;
}

.degrad_txt {
  background: linear-gradient(to right, #4CAF50, #92E3A9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 1.5rem;
}
/* .txtgras {
  font-size: 24px;
  color: #23272F;
  margin-bottom: 3rem;
} */
.pricing-card {
  padding:0px !important;
}

.prictop{

  color:#fff;
  border-radius:15px 15px 0px 0px;
}

.smalltxt {
  font-size: 0.7rem;
}

/* .prictopent{

background: #61B3ED;
background: linear-gradient(178deg,rgba(97, 179, 237, 1) 1%, rgb(0 243 176) 100%);
  color:#fff;
  border-radius:15px 15px 0px 0px;


} */


/* .pricrecom {
background: #C762ED;
background: linear-gradient(178deg, rgb(212 3 221) 1%, rgb(75 103 255) 100%);
  color:#fff;
  border-radius:15px 15px 0px 0px;


} */

#tarifsection{
  background:#f2fff2;
}

/* Le contenu prend la hauteur restante */
.restcontent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Le bouton reste toujours en bas */
.restcontent button {
  margin-top: auto !important;
}

/* Amélioration du rendu visuel */
.prictop, .prictopent, .pricrecom, .viptit {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.features-list li {
  font-size: 14px;
  margin-bottom: 6px;
}

.btnent {
  background:#5ebfd7;
  border:none;
}



.btnpl, .btnpl:active, .btnpl:focus, .btnpl:hover{
   background-color:#a26de9!important;
  border:none;
}


.ps {
  font-weight: 600;
  margin-left: 5px;
  font-size: 20px;
  position: relative;
  top: 5px;
}
.center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 1.5rem; */
}
/* Active séparation en colonnes */
.pricing-table {
  border-collapse: separate;
  border-spacing: 20px 0; /* Espace entre les colonnes uniquement */
}

/* Style commun aux colonnes (plans) */
.pricing-table td:not(:first-child) {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 0 10px #0000000a;
  padding: 18px 12px;
}

.pricing-section .pricing-card {
  border-radius: 15px;
  background: #fff;
  transition: 0.3s ease-in-out;
  height: 100%;

}
.card-gratuit{
    border: 2px solid #178956;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.recommended {
  border: 2px solid #0d6efd;
  background: #e8f1ff;
}

/* .vip {
  border: 2px solid #FCBC27;
} */

.price {
  font-size: 3rem;
  font-weight: 600;
  color: #000;
  text-align: left;
}

.features-list li {
  padding: 6px 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.smalltxt {
  font-size: 0.7rem;
}


/* Carte même hauteur */
.pricing-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Badge positionné au centre, en haut */
.badge-custom {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

/* Alignement bouton en bas */
.pricing-card button {
  margin-top: auto !important;
}



/* Même hauteur pour toutes les cartes */
.pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Le contenu prend la hauteur restante */
.restcontent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Le bouton reste toujours en bas */
.restcontent button {
  margin-top: auto !important;
}

/* Amélioration du rendu visuel */
.prictop, .prictopent, .pricrecom, .viptit {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}



.btnent, .btnent:active, .btnent:focus, .btnent:hover {
  background-color:#5ebfd7!important;
  border:none;
}

.viptit img{
  color:#fff;
  fill: #fff;
}




.vipbtn, .vipbtn:hover, .vipbtn:active, .vipbtn:focus{
  background-color:#d79a10!important;
  border:none;
}




.vippack {
  background: #fff;
  text-transform: uppercase;
  border-radius: 40px;
  color: #000;
  padding: 4px;
  text-align: left;
}

.pricefree {
  color: #198754;
}

/* Même espace interne pour toutes les cartes */
.pricing-card {
  padding:0px !important;
}

.prictop {
    color: #fff;
    border-radius: 15px 15px 0px 0px;
}




/* .pricrecom {
background: #C762ED;
background: linear-gradient(178deg, rgb(212 3 221) 1%, rgb(75 103 255) 100%);
  color:#fff;
  border-radius:15px 15px 0px 0px;


} */


/* .viptit{

  color:#fff;
  border-radius:15px 15px 0px 0px;
background: #ffcf5e;
background: linear-gradient(178deg,rgba(255, 207, 94, 1) 0%, rgba(252, 188, 39, 1) 22%, rgba(215, 167, 56, 1) 82%);

} */
#tarifsection hr{
  margin: 0.5rem 0!important;
}
.btngratuit
{
  background:#198754;
  border:none;
  color:#fff;
  padding: 0px 15px !important;

}

.btngratuit:hover{
  background:#198754;
  border:none;
  color:#fff;
  padding: 0px 15px !important;

}
.bg-topheaderdanger
{
  background-color: #dc354529;
}
.bg-topheaderorange
{
  background-color: #ff900030;
}
.btn-topheader-warning:hover, .btn-topheader-warning:active, .btn-topheader-warning
{
  background: #ff9000;
  border: #d79a10;
}
.btn-topheader-danger:hover, .btn-topheader-danger:active, .btn-topheader-danger
{
  background: #dc3545;
  border: #dc3545;
  color: white;
}

[data-tooltip] {
  --arrow-size: 5px;
  position: relative;
  z-index: 10;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top:50%;
  bottom: calc(100% + var(--arrow-size));
  pointer-events: none;
  transition: 0.2s;
  will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 10px 18px;
  min-width: 50px;
  max-width: 300px;
  width: max-content;
  width: -moz-max-content;
  border-radius: 6px;
  font-size: 14px;
  background-color: rgb(252, 240, 227);
  background-image: linear-gradient(30deg,
  rgb(252, 240, 227),
  rgb(252, 240, 227),
  rgb(252, 240, 227));
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
  color: #443302;
  text-align: left;
  white-space: pre-wrap;
  transform: translate(-50%,  calc(0px - var(--arrow-size))) scale(0.5);
}

/* Tooltip arrow */
[data-tooltip]:after {
  content: '';
  border-style: solid;
  border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); /* CSS triangle */
  border-color: rgb(252, 240, 227)transparent transparent transparent;
  transition-duration: 0s; /* If the mouse leaves the element,
                              the transition effects for the
                              tooltip arrow are "turned off" */
  transform-origin: top;   /* Orientation setting for the
                              slide-down effect */
  transform: translateX(-50%) scaleY(0);
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
  transition-delay: 0.3s;
  transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
}
/*
  Arrow slide down effect only on mouseenter (NOT on mouseleave)
*/
[data-tooltip]:hover:after {
  transition-delay: 0.5s;
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}



/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
  top: calc(100% + var(--arrow-size));
  bottom: auto;
}

[data-tooltip-location="bottom"]:before {
  transform: translate(-50%, var(--arrow-size)) scale(0.5);
}

[data-tooltip-location="bottom"]:hover:before {
  transform: translate(-50%, var(--arrow-size)) scale(1);
}

[data-tooltip-location="bottom"]:after {
  border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size);
  border-color: transparent transparent rgb(252, 240, 227) transparent;
  transform-origin: bottom;
  transform: translateX(-50%) scaleY(0);
}


[data-tooltip-location="bottom"]:hover:after {
  transform: translateX(-50%) scaleY(1);
}



.notif-config[data-tooltip-location="bottom"]:before {
  left: auto;
  right: 0;
  transform: translate(0, var(--arrow-size)) scale(0.5);
}

.notif-config[data-tooltip-location="bottom"]:hover:before {
  transform: translate(0, var(--arrow-size)) scale(1);
}

.notif-config[data-tooltip-location="bottom"]:after {
  left: auto;
  right: 2px; /* Position arrow near the right side */
  transform: translateX(0) scaleY(0);
}

.notif-config[data-tooltip-location="bottom"]:hover:after {
  transform: translateX(0) scaleY(1);
}

@keyframes heartbit{
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  25% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: .1;
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: .3;
  }
  75% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: .5;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.config-btn
{
  display: flex;
  align-items: baseline;
  vertical-align: middle;
}
table input
{
  height:unset!important;
}
.dataTables_filter input{
    height:unset!important;
}
.btn.btn-multi-print, .btn.btn-multi-print:focus, .btn.btn-multi-print:active, .btn.btn-multi-print:hover
{
    background: #47b355;
    color: white;
    font-size: 18px;
    height: 45px;
    font-weight: 600;
}
.bloc-traite
{
    background: #eeede754;border: 1px solid #f9f9f7;
    border-radius: 9px;
}
#generateBtn
{
    background: #E0F1E0;
    color: #41b65a;
    font-size: 18px;
    border: 1px solid #41b65a;
}
.detail-traite .select2-container .select2-selection--single
{
    height: 45px!important;
    border:1px solid #dfe1e6;
    border-radius: 6px!important;
}
.detail-traite .select2-container--default .select2-selection--single .select2-selection__arrow
{
    top:9px!important;
}
.detail-traite .select2-container--default .select2-selection--single .select2-selection__rendered{
 line-height: 41px!important;
}
 .detail-traite input{
    height: 45px!important;
 }
.w-15
{
    width:15%;
}
.img-new
{

   animation: pulse 1.5s  infinite;
   box-shadow: 0 0 0 0 rgb(0, 0, 0);
   width: 8.5%;
    height: 8.5%;
    border-radius: 50%;
   cursor:pointer;
}


        @keyframes pulse {
            100% {
                box-shadow: 0 0 0 5px rgba(0, 123, 255, 0);
              }
        }
#facture_form .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px!important;
}
#facture_form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #25282b!important;
    line-height: 38px!important;
}
#facture_form .select2-container .select2-selection--single
{
    height: 38px!important;

}
#facture_form .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
}


.dropdown .dropdown-item:active {
   background-color: unset!important;
}
#facture_form input{
    height:unset!important;
}
.cancel-config.btn, .cancel-config.btn:hover, .cancel-config.btn:focus, .cancel-config.btn:active
{
  background:#303038d9;
  color:#fff;
  font-size:16px;
  font-weight:500;
  margin-top:16px;
  height: 45px;
  border:none;
}
.error
{
    border: 1px solid #dc3545 !important;
    border-radius: 6px;
}
.btn-pulse-compte {
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 1);
  }

  @keyframes pulse {
    100% {
      box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
    }
  }

 .btn.bg-green, .btn.bg-green:active, .btn.bg-green:focus, .btn.bg-green:hover
 {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
 }
.btn.btn-auth:active, .btn.btn-auth:hover, .btn.btn-auth:focus
{
    background:#4CAF50;
    border:none;
}
.btn.inscription.btn-dark,.btn.inscription.btn-dark:active, .btn.inscription.btn-dark:hover, .btn.inscription.btn-dark:focus
{
    background:#212529;
    color: white;
    font-size: 1rem;
    border:none;
}

.card-business
{
    border: 2px solid #6abbd5;
}

.btn.btngratuit:disabled{
     background-color: #198754;
     color:white;
     border-color: #198754;
}

/*style modal VIP */

    #versionPCModal .ico-vip
    {
        position: absolute;
        top:2.75%;
    }
    #versionPCModal .modal-content {
      border-radius: 15px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }


    #versionPCModal .btn-close {
      padding: 0.5rem;
      opacity: 0.5;
    }

    #versionPCModal .btn-close:hover {
      opacity: 1;
    }

    #versionPCModal ul li {
      padding-left: 0.5rem;
      transition: transform 0.2s;
    }

    #versionPCModal ul li:hover {
      transform: translateX(5px);
    }

    #versionPCModal .bg-light {
      background-color: #f8f9fa !important;
      border: 2px dashed #dee2e6;
    }

    #versionPCModal a {
      font-weight: 600;
      color: #4CAF50;
    }

    #versionPCModal a:hover {
      color: #4CAF50;
      text-decoration: underline !important;
    }
    #versionPCModal .text-title
    {
        color:#4CAF50;
    }
    @media (max-width: 768px) {

    .boxform a
    {
        color:#4CAF50;
        text-decoration: underline !important;
        font-size: 14px!important;
    }
        .notif-config {
            top: 8%;
            right: 9%;
            width: 14px;
            height: 14px;
            display: inline-block;
            background-color: #ff9000;
            z-index: 11;
        }
        .animate-circle {
            position: absolute;
            bottom: 15%;
            left: 63%;
            height: 25px;
            width: 25px;
            z-index: 10;
            border: 6px solid #ff9000b8;
            border-radius: 70px;
            -webkit-animation: heartbit 1s ease-out;
            animation: heartbit 1s ease-out;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            pointer-events: none;
          }
        #client .modal-content, #nouveauFacture .modal-content, #nouveauBanque .modal-content, #nouveauFournisseur .modal-content
        {
            width:370px!important;
        }

      #versionPCModal .modal-dialog {
        margin: 0.5rem;
      }

      #versionPCModal .modal-body {
        padding: 1.5rem 1rem;
      }
    }
    /* end style modal VIP */
/*style 404 */
.bgvert{
    background:#E6F4E6;
  }
  .btneror , .btneror:active, .btneror:hover, .btneror:focus{
    background:#4CAF50!important;
    display:block;
    color:#fff!important;
    width:300px;
    margin:20px auto;
  }
  .content-404 a{
    text-decoration: none!important;
    color:#fff;
  }
/* end style 404 */

/* Style pour le menu mobile */
.offcanvas {
    max-width: 280px;
}

.offcanvas-body .nav-link {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.offcanvas-body .nav-link.active {

    color: #4caf50!important;
    font-weight: 500;

}

.offcanvas-body .nav-link.active svg {
    fill: #4caf50;
}

.offcanvas-body .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background-color: white;
    border-radius: 0 4px 4px 0;
}

.offcanvas-body .nav-link svg {
    flex-shrink: 0;
}

.btn-link:hover {
    opacity: 0.7;
}

@media (max-width: 576px) {
    header .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    header img {
        width: 120px !important;
    }
}
/* end style pour le menu mobile */
.boxform .plan-badge {
    background: var(--bgc);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--clr);

}