/* Hook pour les animations "focus" */

.focustext .surligne {
	background-image: linear-gradient(45deg,#f6671f, #544fff);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 0% 75px;
  transition: all 500ms ease-in-out;
  /*transition: color 250ms ease-in-out;*/

  color: #f6f2ea;
  padding-left:10px;
  padding-right:10px;
  
  animation-duration: 10s;
  animation-name: fuite;
  animation-iteration-count: infinite;
  
}

.focustext .surligne:nth-child(1) {animation-delay: 0s;}
.focustext .surligne:nth-child(2) {animation-delay: 100ms;}
.focustext .surligne:nth-child(3) {animation-delay: 200ms;}

.focustext:hover .surligne {
  
  background-image: linear-gradient(90deg,#000000, #000000);
  
  /*background-size: 100% 90px;
  background-image: linear-gradient(90deg,red, blue);
  color: inherit;*/
  
  /*animation-duration: 2s;
  animation-delay: 0s;
  animation-name: fuite;
  animation-iteration-count: infinite;*/
}

@keyframes fuite {
  0% {
    background-size: 0% 75px;
    color: #000000;
  }
  
  40% {
    background-size: 0% 75px;
    color: #000000;
  }
  
  42% {
    background-size: 100% 75px;
    color: #f6f2ea;
  }
  
  80% {
    background-size: 100% 75px;
    color: #f6f2ea;
  }
  
  82% {
    background-size: 0% 75px;
    color: #000000;
  }
  
  100% {
    background-size: 0% 75px;
    color: #000000;
  }
}

@keyframes iddle {
  0% {
    margin-left:10px;
  }
  
  50% {
    margin-left:20px;
  }
  
  100% {
    margin-left:10px;
  }
}

@keyframes respire {
  0% {
    background-size: 100% 90px;
    padding-left:10px;
  	padding-right:10px;
  }
  
  50% {
    background-size: 90% 70px;
    padding-left:15px;
  	padding-right:15px;
  }
  
  100% {
    background-size: 100% 90px;
    padding-left:10px;
  	padding-right:10px;
  }
}

#sd-cmp svg {
  display: none;
}