/*---Animation btn hero accueil---*/
.btn-hero:hover .image-btn-hero{
    width:150%;
    height:150%;
}
.bordure-btn-hero{
    transition-timing-function: cubic-bezier(.2,.87,.19,1);
}
.btn-hero:hover .bordure-btn-hero{
    width:100%;
    height:100%;
    /*-webkit-animation: border-up 0.4s cubic-bezier(.2,.87,.19,1) both;
	        animation: border-up 0.4s cubic-bezier(.2,.87,.19,1) both;*/
}
@-webkit-keyframes border-up {
  0% {
    -webkit-width:25%;
    -webkit-height:25%;
    width:25%;
    height:25%;
  }
  100% {
    -webkit-width:100%;
    -webkit-height:100%;
    width:100%;
    height:100%;
  }
}
@keyframes border-up {
  0% {
    -webkit-width:25%;
    -webkit-height:25%;
    width:25%;
    height:25%;
  }
  100% {
    -webkit-width:100%;
    -webkit-height:100%;
    width:100%;
    height:100%;
  }
}

/*---Animation btn global---*/
.animation-bouton {
  position:relative;
  /*width: 100px;
  height: auto;*/
  padding: 5px;
  display:flex;
  align-items:center;
  cursor:pointer;
}
.animation-bouton:hover .animation-txt-btn{
  color:#ecd350;
}
.animation-bouton-border-bottom, .animation-bouton:after{
  height:2px;
}
.animation-bouton-border-right, .animation-bouton:before{
  height:0%;
  width:2px;
}
.animation-bouton-border-bottom, .animation-bouton:after, .animation-bouton-border-right, .animation-bouton:before{
  background-color: #ecd350;
  position:absolute;
}
.animation-bouton-border-bottom{
  width:100%; 
  left:0;
  bottom:0;
}
.animation-bouton-border-right{
  right:0;
  bottom:0;
  -webkit-animation: border-right-close 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: border-right-close 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.animation-bouton:after{
  content:"";
  width:0%;
  right:0;
  top:0;
  -webkit-animation: border-top-close 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: border-top-close 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.animation-bouton:before{
  content:"";
  left:0;
  top:0;
  -webkit-animation: border-left-close 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: border-left-close 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.animation-bouton:hover .animation-bouton-border-right{
  -webkit-animation: border-right 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: border-right 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.animation-bouton:hover:after {
  -webkit-animation: border-top 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: border-top 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.animation-bouton:hover:before {
  -webkit-animation: border-left 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: border-left 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes border-right {
  0% { -webkit-height:0%; height: 0%; }
  33%{ -webkit-height:100%; height: 100%; }
  100% { -webkit-height:100%; height: 100%; }
}
@keyframes border-right {
  0% { -webkit-height:0%; height: 0%; }
  33%{ -webkit-height:100%; height: 100%; }
  100% { -webkit-height:100%; height: 100%; }
}
@-webkit-keyframes border-right-close {
  0%{ -webkit-height:100%; height: 100%;}
  66%{ -webkit-height:100%; height: 100%;}
  100% {-webkit-height:0%; height: 0%;}
}
@keyframes border-right-close {
  0%{ -webkit-height:100%; height: 100%;}
  66%{ -webkit-height:100%; height: 100%;}
  100% {-webkit-height:0%; height: 0%;}
}

@-webkit-keyframes border-top {
  0% { -webkit-width:0%; width: 0%; }
  33%{ -webkit-width:0%; width: 0%;}
  66%{ -webkit-width:100%; width: 100%; }
  100% { -webkit-width:100%; width: 100%;}
}
@keyframes border-top {
  0% { -webkit-width:0%; width: 0%;}
  33%{ -webkit-width:0%; width: 0%;}
  66%{ -webkit-width:100%; width: 100%;}
  100% { -webkit-width:100%; width: 100%;}
}
@-webkit-keyframes border-top-close {
  0% { -webkit-width:100%; width: 100%; }
  33%{ -webkit-width:100%; width: 100%;}
  66%{ -webkit-width:0%; width: 0%; }
  100% { -webkit-width:0%; width: 0%;}
}
@keyframes border-top-close {
  0% { -webkit-width:100%; width: 100%; }
  33%{ -webkit-width:100%; width: 100%;}
  66%{ -webkit-width:0%; width: 0%; }
  100% { -webkit-width:0%; width: 0%;}
}

@-webkit-keyframes border-left {
  0% { -webkit-height:0%; height: 0%;}
  66%{ -webkit-height:0%; height: 0%;}
  100% { -webkit-height:100%; height: 100%;}
}
@keyframes border-left {
  0%{ -webkit-height:0%; height: 0%;}
  66%{ -webkit-height:0%; height: 0%;}
  100% {-webkit-height:100%; height: 100%;}
}
@-webkit-keyframes border-left-close {
  0% { -webkit-height:100%; height: 100%; }
  33%{ -webkit-height:0%; height: 0%; }
  100% { -webkit-height:0%; height: 0%; }
}
@keyframes border-left-close {
  0% { -webkit-height:100%; height: 100%; }
  33%{ -webkit-height:0%; height: 0%; }
  100% { -webkit-height:0%; height: 0%; }
}