.bouton-jaune{
  display: inline-block;
  min-width: 200px;
  border-radius: 29.5px;
  padding: 2px 0 2px 0;
  background-image: linear-gradient(to bottom, #efc137, #e0a904);
  position: relative;
  text-align: center;
  cursor: pointer;
}
.bouton-jaune span{
  display: inline-block;
  padding: 15px 2% 15px 2%;
  width: 90%;
  font-weight: bold;
  border-radius: 25px;
  z-index: 20;
  color:#ffffff;
  font-family: 'HelveticaNeuBold', sans-serif;
  background-image: linear-gradient(to bottom, #eab927, #fada7b 50%, #e0a904 108%);
  position: relative;
}

.bouton-jaune p{
  font-family: 'HelveticaNeuBold', sans-serif;
  margin:0;
  padding:0;
  z-index: 20;
  position: relative;
  font-size: 0.9em;
  line-height: 0.9em;
}


.bouton-jaune span::after {
  position: absolute;
  content: "";
  inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
  background-image: linear-gradient(to bottom, #e1aa08, #eebf33);
  z-index: 0;
  border-radius: 25px;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.bouton-jaune:hover span::after{
  opacity: 1;
}

.bouton-bleu{
  display: inline-block;
  min-width: 200px;
  border-radius: 29.5px;
  padding: 2px 0 2px 0;
  background-image: linear-gradient(to top, #70cbd0, #03878d);
  position: relative;
  text-align: center;
  cursor: pointer;
}
.bouton-bleu span{
  display: inline-block;
  padding: 15px 2% 15px 2%;
  width: 90%;
  font-weight: bold;
  border-radius: 25px;
  z-index: 20;
  color:#ffffff;
  font-family: 'HelveticaNeu', sans-serif;
  background-image: linear-gradient(to bottom, #4e979b, #82dee3 47%, #03878d);
  position: relative;
}

.bouton-bleu p{
  font-family: 'HelveticaNeuBold', sans-serif;
  margin:0 !important;
  padding:0;
  z-index: 20;
  font-size: 0.9em;
  line-height: 0.9em;
  position: relative;
}


.bouton-bleu span::after {
  position: absolute;
  content: "";
  inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
  background-image: linear-gradient(to bottom, #67c5c9, #188a8f);
  z-index: 0;
  border-radius: 25px;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.bouton-bleu:hover span::after{
  opacity: 1;
}

.bouton-generique{
  margin:3% 0 3% 0;
  width: 100%;
  text-align: center;
}

.bouton-generique.left{
  text-align: left;
}

.bouton-generique.right{
  text-align: right;
}

@media screen and (max-width: 800px){

  .bouton-jaune{
    display: inline-block;
    min-width: 150px;
    border-radius: 29.5px;
    padding: 2px 0 2px 0;
    background-image: linear-gradient(to bottom, #efc137, #e0a904);
    position: relative;
    text-align: center;
    cursor: pointer;
  }
  .bouton-jaune span{
    display: inline-block;
    padding: 10px 2% 10px 2%;
    width: 90%;
    font-weight: bold;
    border-radius: 25px;
    z-index: 20;
    color:#ffffff;
    font-family: 'HelveticaNeu', sans-serif;
    font-size: 0.6em;
    background-image: linear-gradient(to bottom, #eab927, #fada7b 50%, #e0a904 108%);
    position: relative;
  }

  .bouton-jaune p{
    margin:0;
    padding:0;
    z-index: 20;
    position: relative;
  }


  .bouton-jaune span::after {
    position: absolute;
    content: "";
    inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
    background-image: linear-gradient(to bottom, #e1aa08, #eebf33);
    z-index: 0;
    border-radius: 25px;
    opacity: 0;
    transition: opacity 0.5s linear;
  }
}

@media screen and (max-width: 500px){

  .bouton-jaune{
    display: inline-block;
    min-width: 130px;
    border-radius: 29.5px;
    padding: 2px 0 2px 0;
    background-image: linear-gradient(to bottom, #efc137, #e0a904);
    position: relative;
    text-align: center;
    cursor: pointer;
  }
  .bouton-jaune span{
    display: inline-block;
    padding: 5px 2% 5px 2%;
    width: 90%;
    font-weight: bold;
    border-radius: 25px;
    z-index: 20;
    color:#ffffff;
    font-family: 'HelveticaNeu', sans-serif;
    font-size: 0.6em;
    background-image: linear-gradient(to bottom, #eab927, #fada7b 50%, #e0a904 108%);
    position: relative;
  }

  .bouton-jaune p{
    margin:0;
    padding:0;
    z-index: 20;
    position: relative;
  }


  .bouton-jaune span::after {
    position: absolute;
    content: "";
    inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
    background-image: linear-gradient(to bottom, #e1aa08, #eebf33);
    z-index: 0;
    border-radius: 25px;
    opacity: 0;
    transition: opacity 0.5s linear;
  }
}