/*-----------------------------------------------------------------*/
/* SLIDE IN		                                                  */
/*-----------------------------------------------------------------*/
@keyframes slideInFromRight 
{
  from { transform: translateX(120%)}
  to {transform: translateX(0)}
}

@keyframes slideInFromLeft 
{
  from { transform: translateX(-120%)}
  to {transform: translateX(0)}
}

@keyframes slideInFromLeftCourt 
{
  from { transform: translateX(-20%)}
  to {transform: translateX(0)}
}

@keyframes slideInFromTop
{
  from { transform: translateY(-120%)}
  to {transform: translateY(0)}
}

@keyframes slideInFromBottom
{
  from { transform: translateY(120%)}
  to {transform: translateY(0)}
}

/*-----------------------------------------------------------------*/
/* SLIDE OUT		                                               */
/*-----------------------------------------------------------------*/

@keyframes slideOutToRight
{
  from { transform: translateX(0%)}
  to {transform: translateX(120%)}
}

@keyframes slideOutToBottom
{
  from { transform: translateY(0)}
  to {transform: translateY(120%)}
}

@keyframes slideToBottom
{
  from { transform: translateY(0)}
  to {transform: translateY(120%)}
}

@keyframes txtSlideIn 
{
  from { transform: translateX(10%)}
  to {transform: translateX(0)}
}

@keyframes slideOutToLeft
{
  from { transform: translateX(0)}
  to {transform: translateX(-120%)}
}

@keyframes fadeIn 
{
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeOut
{
  from { opacity: 1; }
  to { opacity: 0; }
}

.fadeIn{ animation: fadeIn .5s ease forwards; opacity: 0}

@keyframes fadeOut
{
	from { opacity: 1; }
	to { opacity: 0; }
}



/*-----------------------------------------------------------------*/
/* CHARGEMENT 		                                               */
/*-----------------------------------------------------------------*/

@keyframes shimmer2 
{
  to { background-position: -150% 0;}
}

:host([chargement]) .chargement
{
  transition: background .5s ease;
}
:host([chargement="1"]) .chargement
{
  background-image: var(--couleurSkeleton); 
  animation: shimmer2 1s infinite;
  background-size: 200%;

}