/* ↓ Variantes ↓ */

.clochette-titre{
  font-family: "Krona One","Verdana","Arial",sans-serif;
  color: #f27712;
}

.clochette-btn{
  background: #f27712;
}

.chevron-clochette{
  fill: white;
}

.icon-clochette{
  fill: white;
}

/* ↑ Variantes ↑ */

.clochette-contenu {
  position: absolute;
  left: 20px;
  top: 200px;
  width: 350px;
  z-index: 100;
  box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.8);
  border-radius: 25px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 15px;
  background: white;
}

.clochette-contenu a{
  text-decoration: none;
  color : none;
}

.clochette-btn {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  left: 370px;
  box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.8);
  border-radius: 24px;
  padding: 0 16px;
  width: max-content;
  z-index: 101;
  top: 170px;
  transform : scaleX(-1);
}

.clochette-btn:hover {
  cursor: pointer;
}

.clochette-fermeture{
  animation-name: clochette-fermeture;
  animation-duration: 400ms;
  left: -350px;
  top: 200px;
}

@keyframes clochette-fermeture {
  0%   {left:20px;}
  100% {left:-350px;}
}

.bouton-fermeture{
  animation-name: bouton-fermeture;
  animation-duration: 400ms;
  transform : scaleX(1);
  left: 0px;
  top: 170px;
}

@keyframes bouton-fermeture {
  0%   {left:370px;}
  100% {left: 0px;}
}

.clochette-ouverture{
  animation-name: clochette-ouverture;
  animation-duration: 400ms;
}

@keyframes clochette-ouverture {
  0%   { left:-350px;}
  100% {left:20px;}
}

.bouton-ouverture{
  animation-name: bouton-ouverture;
  animation-duration: 400ms;
}

@keyframes bouton-ouverture {
  0%   { left: 0px;}
  100% {left:370px;  transform : scaleX(-1);}
}


.icon-clochette{
  width: 24px;
}

.chevron-clochette{
  width: 12px;
}

.clochette-btn:hover svg {
    transform: scale(1.1)
  }

.clochette-titre {
  text-align: center;
  padding-top: 15px;
  font-size: 1em;
  font-weight: 600;
  margin-right: 50px;
}

.clochette-contenu img {
  padding-top: 15px;
  border-radius: 15px:
}

.clochette-descriptif {
  padding-top: 15px;
  font-size: 0.9em;
}

.clochette-descriptif p {
  margin: none;
  line-height: none;
}


@media screen and (max-width: 550px) {
  .clochette-contenu {
    width: 200px;
    left: 10px;
    top: 150px;
  }

  .clochette-btn {
    left: 210px;
    top: 130px;
  }

  .clochette-fermeture{
    left: -200px;
  }

  .bouton-fermeture {
    left: 0px;
  }

  @keyframes clochette-fermeture {
    0%   {left:10px;}
    100% {left:-200px;}
  }

  @keyframes clochette-ouverture {
    0%   { left:-200px;}
    100% {left:10px;}
  }

  @keyframes bouton-fermeture {
    0%   {left: 210px;}
    100% {left: 0px;}
  }

  @keyframes bouton-ouverture {
    0%   {left: 0px;}
    100% {left: 210px;}
  }

}