#promo {
  position: relative;
  max-width: 1220px;
  height: 125px;
  margin: 0 auto;
  background: url(image.jpg) left top no-repeat #f5ebe1;
  font-family: Muli;
  display: flex;
  justify-content: flex-end;
  align-items: center
}

#promo .left {
  background-color: #f5ebe1;
  width: 100%;
  max-width: 170px;
  text-align: center;
  height: 100%
}

#promo .left .studio_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  font-size: 1.4rem;
  color: #2d2a29;
  line-height: 1.8rem;
  padding-top: 30px
}

#promo .left .bloc_reduc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative
}

#promo .left .bloc_reduc .bloc_textuel {
  color: #2d2a29
}

#promo .left .bloc_reduc .std_juska {
  color: #2d2a29;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
  position: relative;
  padding-top: 15px
}

#promo .left .bloc_reduc .montantreduc .montant_signe {
  font-size: 60px;
  margin-top: -15px
}

#promo .left .bloc_reduc .montantreduc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  letter-spacing: -2px;
  color: #2d2a29;
  height: 50px
}

#promo .left .bloc_reduc .montantreduc .montant_asterisque,#promo .left .bloc_reduc .montantreduc .montant_chiffre,#promo .left .bloc_reduc .montantreduc .montant_exposant {
  display: inline-block;
  font-family: Muli,sans-serif;
  font-weight: 500
}

#promo .left .bloc_reduc .montantreduc .montant_chiffre {
  font-size: 60px;
  line-height: 55px;
  font-family: Muli,Arial,Helvetica,sans-serif;
  font-weight: 600
}

#promo .left .bloc_reduc .montantreduc .montant_exposant {
  font-size: 28px;
  line-height: 40px
}

#promo .left .bloc_reduc .montantreduc .montant_asterisque {
  font-size: 12px;
  line-height: 26px
}

#promo .left .studio_title span {
  display: block
}

#promo .left .studio_title svg {
  fill: #444;
  width: 22px;
  height: 22px;
  padding: 0;
  vertical-align: bottom;
  display: inline-block;
  margin: 0 -2px 0 2px
}

#promo .left .conditions {
  color: #2d2a29;
  font-size: .65rem;
  display: none;
  bottom: 0;
  left: unset;
  margin: 0;
  padding-top: 5px
}

#promo .right {
  height: 100%;
  max-width: 440px;
  width: 100%;
  text-align: center;
  background: #f5ebe1;
  display: flex
}

#promo .right .studio_title_mob {
  display: none
}

#promo .right .ctas {
  text-align: center;
  padding: 0;
  float: right;
  margin: auto;
  width: 340px;
  height: 100px
}

#promo .right .ctas li {
  display: inline-block;
  margin: 5px
}

#promo .right .ctas .active-cta a {
  background-color: #333;
  color: #2d2a29
}

#promo .right .ctas li a {
  border: 1px solid #2d2a29;
  color: #2d2a29;
  display: block;
  border-radius: 5px;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
  font-weight: 500;
  font-size: .75rem;
  line-height: 40px;
  width: 130px;
  height: 40px
}

#promo .right .ctas li a:hover {
  background-color: #2d2a29;
  color: #ffffff;
}

#promo .right span {
  font-size: .75rem;
  text-align: center;
  line-height: .7rem
}

#promo .right span .break {
  display: block
}

div#puHoneTitle {
  display: none
}

@media only screen and (max-width: 63.9375rem) {
  .media.listehaut #bann_PR,.media.listehaut .tetiere,.media.listehaut>article[id^=tet] {
      display:block!important
  }
}

@media screen and (max-width: 768px) {
  #promo {
      background-color:#ece1d1;
      height: auto;
      flex-direction: column;
      align-items: flex-end
  }

  #promo .left {
      margin: 0;
      height: 100px
  }

  #promo .left .studio_title span {
      display: inline-block
  }

  #promo .left .studio_title svg {
      fill: #2d2a29
  }

  #promo .left .bloc_reduc {
      margin-top: 10px
  }

  #promo .left .bloc_reduc .std_juska {
      padding-top: 0
  }

  #promo .left .conditions {
      display: block
  }

  #promo .right {
      display: block;
      margin: 0 auto;
      max-width: 768px;
      width: 100%;
      float: none
  }

  #promo .right .studio_title_mob {
      color: #2d2a29;
      display: block;
      font-size: 1.2rem;
      font-weight: 500;
      line-height: 1.3rem;
      margin: 10px 0;
      width: 100%
  }

  #promo .right .ctas li {
      margin-top: 2px;
      margin-bottom: 6px
  }

  #promo .right .ctas {
      padding: 5px;
      float: none
  }

  #promo .right span {
      display: block;
      height: auto;
      padding: 0;
      line-height: .9rem
  }
}

@media screen and (max-width: 555px) {
  #promo .right span {
      font-size:.75rem
  }

  #promo .right span .break {
      display: initial;
      padding: 0
  }
}

@media screen and (max-width: 520px) {
  #promo {
        background-position: -200px 0;

    }
}

@media screen and (max-width: 450px) {
  #promo .right {
        height: 120px;

    }

  #promo .right .ctas {
      width: 100%;
      padding: 0;
      margin-top: 10px
  }

  #promo .right .ctas li a {
      width: auto;
      padding: 0 5px;
      min-width: 120px;
      font-size: .7rem;
  }
}

.CatSwiper-wrapper {
  display: none !important;
}