.ban_financement {
  background: linear-gradient(217deg, var(--purple-400), var(--purple-500));
  width: 96%;
  max-width: 1015px;
  padding: 20px;
  text-align: left;
  color: var(--white);
  margin: 20px auto;
  position: relative;
  z-index: 10;
  text-align: center;

  .contenu_ban_financement {
    background-color: var(--purple-600);
    padding: 15px 0 10px;

    h2 {
      position: relative;
      vertical-align: middle;
      display: inline-block;
      margin: 0;
      color: var(--white);
      text-align: left;
      font-size: 37px;
      line-height: 35px;
      padding: 0 25px 0 35px;
      border-right: 2px solid var(--white);
      font-family: Lato-Black;
    }

    .ml {
      padding: 15px 35px 0;
      font-size: 11px;
      line-height: 13px;
      text-align: left;
    }

    .cta {
      margin: 15px 0 0;
    }

    .description {
      position: relative;
      vertical-align: middle;
      display: inline-block;
      text-align: left;
      font-size: 18px;
      line-height: 25px;
      padding: 0 25px;
      width: 285px;

      p {
        padding: 0;
      }

      sup {
        line-height: 1px;
        font-size: 8px;
      }
    }

    .chiffre_financement {
      position: relative;
      vertical-align: middle;
      display: inline-block;
      top: 5px;
      text-align: left;

      p {
        padding: 0;
      }

      .encart_pourcentage {
        vertical-align: middle;
        position: relative;
        display: inline-block;
        font-size: 70px;
        line-height: 70px;
        font-family: Lato-Bold;

        .text_pourc {
          font-size: 14px;
          line-height: 16px;
          position: relative;
        }

        strong {
          vertical-align: top;
          display: inline-block;
          position: relative;
          font-family: Lato-Black;
          font-weight: normal;
        }

        .pourcentage {
          vertical-align: top;
          display: inline-block;
          position: relative;
          top: -15px;
          right: 13px;
          font-size: 25px;
        }

        .taeg {
          font-size: 14px;
          position: absolute;
          display: block;
          line-height: 15px;
          bottom: 7px;
          right: -5px;
        }

        .no_costs {
          font-family: Lato-Black;
          .num {
            font-size: 120px;
            line-height: 65px;
            position: relative;
            display: inline-block;

            sup {
              font-size: 55px;
            }

            span {
              font-size: 45px;
              position: absolute;
              bottom: -29px;
              left: 67px;
            }
          }

          .frais {
            display: inline-block;
            font-size: 45px;
            line-height: 45px;
            margin: 0 0 0 3px;
          }
        }
      }

      .infos_chiffre {
        vertical-align: middle;
        position: relative;
        display: inline-block;
        font-size: 14px;
        line-height: 16px;
        font-weight: normal;
        font-family: Lato-Regular;
        margin: 0 0 0 20px;
      }

      sup {
        font-size: 10px;
        line-height: 1px;
        top: 1px;
        position: relative;
      }
    }
  }

  &.carousel {
    width: 500px;
    display: inline-block;
    vertical-align: top;
    margin: 0 50px 0 0;

    .contenu_ban_financement {
      padding: 80px 30px 20px;
      position: relative;

      .ml {
        padding: 15px 0 0;
      }

      h2 {
        font-size: 34px;
        line-height: 39px;
        font-family: Lato-Black;
        border: none;
        padding: 0 0 15px;
        width: 100%;
      }

      .chiffre_financement {
        position: static;
        width: 100%;

        .encart_pourcentage {
          position: static;
          font-size: 89px;
          height: 89px;

          .text_pourc {
            position: absolute;
            top: 30px;
            font-size: 23px;
            font-family: Lato-Regular;
          }

          .pourcentage {
            font-size: 19px;
            top: 5px;
            line-height: 21px;
          }

          .taeg {
            position: relative;
            top: -45px;
            right: -178px;
            font-size: 19px;
            line-height: 21px;
          }
        }

        .infos_chiffre {
          font-size: 16px;
          width: 100%;
          margin: 0;
        }
      }

      .cta {
        margin: 29px 0 0;
      }
    }
  }

  &.fullWidth {
    .contenu_ban_financement {
      .chiffre_financement {
        .encart_pourcentage {
          .no_costs {
            margin: 10px 0 0;
            .frais {
              font-size: 30px;
              line-height: 35px;
              position: relative;
              top: 0px;
              text-align: left;
              left: 0px;
            }

            .num {
              font-size: 90px;

              span {
                font-size: 30px;
                bottom: -23px;
                left: 50px;
              }

              sup {
                font-size: 40px;
              }
            }
          }
        }
      }
    }
  }
}

.ban_financement {
  @media (max-width: 1460px) {
    &.carousel {
      width: 45%;
      margin: 0 3% 0 0;

      .contenu_ban_financement {
        padding: 75px 30px 20px;

        h2 {
          font-size: 29px;
          line-height: 34px;
          width: 100%;
          padding: 0 0 10px;

          br {
            display: none;
          }
        }

        .chiffre_financement {
          .encart_pourcentage {
            .pourcentage {
              top: 5px;
            }

            .taeg {
              top: -45px;
            }
          }

          .infos_chiffre {
            margin: 0;
            line-height: 21px;

            br {
              display: none;
            }

            .conditions {
              br {
                display: block;
              }
            }
          }
        }

        .cta {
          margin: 18px 0 0;
        }
      }
    }
  }

  @media (max-width: 1240px) {
    .contenu_ban_financement {
      h2 {
        font-size: 25px;
        line-height: 30px;
        padding: 0px 30px;
      }

      .description {
        font-size: 16px;
      }

      .chiffre_financement {
        .encart_pourcentage {
          .no_costs {
            .num {
              font-size: 100px;

              sup {
                font-size: 50px;
              }

              span {
                font-size: 40px;
                bottom: -24px;
                left: 56px;
              }
            }

            .frais {
              font-size: 40px;
              line-height: 40px;
            }
          }
        }
      }
    }

    &.carousel {
      .contenu_ban_financement {
        padding: 65px 25px 10px;

        .chiffre_financement {
          text-align: left;
          margin: 0px auto 0;

          .encart_pourcentage {
            .text_pourc {
              left: 25px;
              top: 25px;
            }
          }

          .infos_chiffre {
            font-size: 15px;
          }
        }
      }
    }
  }

  @media (max-width: 1139px) {
    width: 600px;

    .contenu_ban_financement {
      .chiffre_financement {
        display: block;
        margin: 17px auto 0;
        text-align: center;

        .encart_pourcentage {
          text-align: left;
          .no_costs {
            .num {
              span {
                font-size: 33px;
                bottom: -26px;
              }
            }
            .frais {
              font-size: 33px;
              line-height: 35px;
              margin: 0;
              left: -4px;
              position: relative;
            }
          }
        }

        .infos_chiffre {
          text-align: left;
        }
      }

      .ml {
        text-align: center;
      }
    }
  }

  @media (max-width: 1050px) {
    &.carousel {
      width: 100%;
      max-width: 465px;
      margin: 0 auto 30px;

      .contenu_ban_financement {
        .chiffre_financement {
          .infos_chiffre {
            display: block;
          }
        }

        .cta {
          margin: 0;
          padding: 0 25px;
        }
      }
    }
  }

  @media (max-width: 935px) {
    margin: 20px;
    width: auto;

    &.carousel {
      .contenu_ban_financement {
        padding: 50px 25px 10px;

        h2 {
          font-size: 24px;
          line-height: 30px;
        }

        .chiffre_financement {
          .encart_pourcentage {
            font-size: 89px;
            line-height: 89px;
            height: 93px;

            .pourcentage {
              font-size: 19px;
              line-height: 21px;
              top: 15px;
            }

            .text_pourc {
              font-size: 16px;
              top: 20px;
            }

            .taeg {
              right: -180px;
              font-size: 15px;
              line-height: 16px;
              top: -50px;
            }
          }

          .infos_chiffre {
            font-size: 14px;
            line-height: 17px;
          }
        }
      }
    }
  }

  @media (max-width: 700px) {
    .contenu_ban_financement {
      padding: 20px 0;

      h2 {
        text-align: center;
        padding: 0;
        margin: 0 0 20px;
        border-right: none;
      }

      .description {
        font-size: 15px;
        margin: 0 40px;
        text-align: center;
        width: auto;
        font-family: Lato-Bold;
        line-height: 18px;
        border-bottom: 2px solid var(--white);
        display: inline-block;
        padding: 0 0 20px;
      }

      .chiffre_financement {
        .encart_pourcentage {
          text-align: center;

          .text_pourc {
            font-size: 13px;
            line-height: 16px;
          }

          .pourcentage {
            font-size: 25px;
            top: -12px;
          }

          .taeg {
            right: 0;
            font-size: 12px;
            line-height: 12px;

            br {
              display: block;
            }
          }
        }

        .infos_chiffre {
          text-align: center;
          font-size: 13px;
          line-height: 16px;
          margin: 0 0 0 25px;
        }
      }
    }

    &.carousel {
      width: auto;
      max-width: 100%;
      display: block;

      .contenu_ban_financement {
        height: 360px;

        h2 {
          text-align: left;
          border-bottom: 0;
          margin: 0;
        }

        .chiffre_financement {
          .encart_pourcentage {
            overflow: hidden;
            width: 100%;
            text-align: left;

            .taeg {
              text-align: left;
            }
          }
        }

        .infos_chiffre {
          text-align: left;
        }
      }
    }
  }

  @media (max-width: 580px) {
    .contenu_ban_financement {
      padding: 20px 25px 15px;

      h2 {
        margin: 0 0 15px;
        width: auto;
      }

      .description {
        margin: 0;
      }

      .chiffre_financement {
        .infos_chiffre {
          margin: 0;
          display: block;
        }
      }

      .cta {
        margin: 0;
      }
    }

    &.carousel {
      .contenu_ban_financement {
        padding: 50px 20px 20px;
        height: 424px;

        .ml {
          text-align: left;
        }

        .chiffre_financement {
          .encart_pourcentage {
            .text_pourc {
              font-size: 15px;
              left: 20px;
            }
          }

          .infos_chiffre {
            width: auto;
            padding: 10px 0 0;

            br {
              display: block;
            }
          }

          .conditions {
            padding: 10px 0 0;
          }
        }
      }
    }

    &.fullWidth {
      contenu_ban_financement {
        .chiffre_financement {
          .encart_pourcentage {
            .no_costs {
              margin: 10px 0;
            }
          }
        }
      }
    }
  }

  @media (max-width: 470px) {
    padding: 15px;

    .contenu_ban_financement {
      .ml {
        font-size: 10px;
      }

      .chiffre_financement {
        sup {
          font-size: 7px;
        }
      }
    }

    &.carousel {
      padding: 15px;

      .contenu_ban_financement {
        .chiffre_financement {
          .conditions {
            padding: 0;
          }
        }
      }
    }
  }

  @media (max-width: 420px) {
    &.carousel {
      .contenu_ban_financement {
        height: 442px;
      }
    }
  }
}

@media (max-width: 580px) {
  .contenu_ban_financement {
    h2 {
      padding: 0 20px 10px;
    }

    .chiffre_financement {
      margin: 0;

      .infos_chiffre {
        display: block;
        margin: 10px 0 0;
      }
    }

    .cta {
      margin: 0;
    }

    .ml {
      padding: 15px 0 0;
    }
  }
}

.ban_financement_no_costs {
  .contenu_ban_financement {
    .chiffre_financement {
      .infos_chiffre {
        margin: 40px 0 0 20px;
      }
    }
  }

  @media (max-width: 580px) {
    .contenu_ban_financement {
      .chiffre_financement {
        .infos_chiffre {
          margin: 0;
        }
      }
    }
  }
}