/* Gestion de la classe Carte */
  .carte {
    position: relative;
    margin-bottom: 10px;
      padding: 10px;      //a pour effet de décaler les enfants de 10px
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      background-color: #fff;
  }
  .carte.dark {
      background-color: #313b50;
  }
  .carte.inner {
    text-align: center;
  }

  .carte.action {
      background-color: #ffd783;
  }

  .action a{
    display: block;
    text-align: center;
  }

  .carte .carte-title{
      letter-spacing: 0.03rem;
      color: #212529;
  }

  .carte .text{
      color: #6c757d;
  }
  .carte.dark p{
    color: #fff;
  }

  .carte .surtitle{
      color: #6c757d;
  }

  .carte.cachee {

    transform: translateY(200px);
    transition: transform 0.8s ease;
}

  .carte.visible {
    transform: translateY(0);
}

  /*** form dans une carte ***/
  .carte form label {
    margin-bottom: 0px;
    margin-top: 10px; /* espace au-dessus */
    color: #313b50;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
  }

  /*il existe un classe générale input dans style.css avec 10 px de margin*/
  .carte form input{
    width: calc(100% - 20px);
    margin-bottom: 16px;
    background-color: transparent;
    border: 1px solid #e5e5e5;
    color: #313b50;
    font-size: 14px;
    outline: none;
    border-radius: 15px;
  }

  .carte form textarea{
    width: calc(100% - 20px);
    margin-bottom: 16px;
    background-color: transparent;
    border: 1px solid #e5e5e5;
    color: #313b50;
    font-size: 14px;
    outline: none;
    border-radius: 15px;
  }

  .carte .badge {

    display: inline-flex;         /* flex en ligne pour aligner les spans horizontalement */
    flex-wrap: wrap;              /* permet de revenir à la ligne si nécessaire */
    gap: 5px;                     /* espace horizontal et vertical entre les spans */

    margin: 2px 20px 3px 0px;    /* marge autour du bloc */
    padding: 5px 5px;             /* padding interne */

    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02rem;
    text-transform: capitalize;

    color: #313b50;            /* texte du bloc (sera héritée par les spans) */
    background-color: transparent; /* bloc principal transparent */
    border-radius: 5px;
  }

  .carte .badge span {
    padding: 3px 6px;
    background-color: #e0dfe4;
    border-radius: 8px;
    display: inline-block;
  }

  .carte .badge a:hover {
    background-color: #ffd783;
    border: 1px solid #ffd783;
  }

  .carte .input-wrap .input{
    background-color: #ffd783;
    color: #313b50;
  }

  .carte .switch-container label{
    margin: 0;
  }

  .carte .switch-container .switch-text{
      color: white;
  }

  /* le switch visible */
  .carte .switch-container .switch-label {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 35px;
    background-color: #ccc;  /* couleur du switch éteint */
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .carte .switch-container.elegant .switch-label{
    width: 50px;
    height: 25px;
  }

  .carte .switch-container.switch-container-dark .switch-label {
    background-color: #333;  /* nouvelle couleur pour le mode sombre */
  }

  .badge-small {
  font-size: 0.75rem;   /* texte plus petit */
  font-weight: 400;     /* texte normal (pas gras) */
}

  /* le "bouton" à l’intérieur */
  .switch-label::before {
    content: '';
    position: absolute;
    width: 21px;
    height: 31px;
    left: 2px;
    top: 2px;
    background-color: white;
    border-radius: 5px;
    transition: transform 0.3s;
  }

  .switch-label.elegant::before {
    height: 21px;
  }

  /* état checked */
  .form-check-input:checked + .switch-label {
    background-color: #ffd783; /* couleur du switch allumé */
  }

  .form-check-input:checked + .switch-label::before {
    transform: translateX(25px); /* déplace le bouton vers la droite */
  }

    .qr_code {
    width: 400px;      /* largeur fixe */
    height: 400px;     /* hauteur fixe */
    max-width: 100%;   /* ne dépasse jamais le conteneur */
    display: block;    /* pour centrer facilement */
    margin: 0 auto;    /* centre horizontalement */
  }
  .my-btn-qrcode {
    width: 100%;        /* prend toute la largeur du parent */
    max-width: 200px;   /* mais ne dépasse pas 200px */
    padding: 10px 20px;
    font-size: 16px;
    margin: 10px 0 20px 0;
  }

  /* boutons */
.mn-btn-submit {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 7px 12px;
  background-color: #ffd783;
  color: #333;
  border-radius: 10px;
  border: 0;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
}
.mn-btn-submit span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  z-index: 2;
}
.mn-btn-submit:after {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
  width: 200px;
  height: 200px;
  background-color: #ffd783;
  position: absolute;
  left: -240px;
  top: -75px;
  -webkit-transform: rotate(145deg);
          transform: rotate(145deg);
}
.mn-btn-submit:hover {
  color: #313b50;
  background-color: #ffd783;
}
.mn-btn-submit:hover:active {
  color: #313b50;
}
.mn-btn-submit:hover:after {
  left: -25px;
  top: -75px;
}
.mn-btn-submit:focus {
  outline: none;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/** account **/
.mn-accordion.style-app .mn-accordion-item {
  border: 1px solid;
  border-color: #fff;
  overflow: hidden;
  border-bottom: 0;
}

.mn-accordion.style-app .mn-accordion-item:is(:first-child) {
  border-radius: 10px 10px 0px 0px;
}

.mn-accordion.style-app .mn-accordion-item:is(:last-child) {
  border-radius: 0px 0px 10px 10px;
  margin-bottom: 10px;

}

.mn-accordion.style-app .mn-accordion-item:not(:last-child) {
  margin-bottom: 0px;
}

.mn-accordion.style-app .mn-accordion-item .mn-accordion-header {
  margin: 0;
  padding: 12px 35px 12px 15px;
  background-color: #e1e5e9;
  color: #313b50;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  position: relative;
  font-family: "Poppins, sans-serif";

}

.mn-accordion.style-app .mn-accordion-item .mn-accordion-header:after {
  content: ">";
  width: 15px;
  height: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "remixicon";
  cursor: pointer;
  font-size: 24px;
  color: #313b50;
  font-weight: 400;
  position: absolute;
  top: 20px;
  right: 20px;
}

.mn-accordion.style-app .mn-accordion-body {
  padding: 15px;
  font-size: 14px;
  color: #777;
  display: none;
  line-height: 24px;
  background-color: rgba(119, 119, 119, 0.09);
}

.mn-accordion.style-app .mn-accordion-body code {
  font-weight: 600;
  font-size: 14px;
  color: #ffd783;
}

.mn-accordion.style-app .mn-accordion-body.show {
  display: block;
}

.borrow-pro-content .mn-product-box{
  margin-bottom: 10px;
  padding-right: 5px;
  padding-left: 5px;

}