/*------------------------------*\
    #COMPOSANT loader tableau
/*------------------------------*/

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes rotate_missions {
	0% {
		transform: rotate(0deg);
		border-top-color: var(--main-color_mission);
	}
	50% {
		transform: rotate(180deg);
		border-top-color: var(--secondary-color_mission);
	}
	100% {
		transform: rotate(360deg);
		border-top-color: var(--main-color_mission);
	}
}
@keyframes rotate_profils {
	0% {
		transform: rotate(0deg);
		border-top-color: var(--main-color_profil);
	}
	50% {
		transform: rotate(180deg);
		border-top-color: var(--secondary-color_profil);
	}
	100% {
		transform: rotate(360deg);
		border-top-color: var(--main-color_profil);
	}
}
@keyframes rotate_AO {
	0% {
		transform: rotate(0deg);
		border-top-color: var(--main-color_ao);
	}
	50% {
		transform: rotate(180deg);
		border-top-color: var(--secondary-color_ao_rgb);
	}
	100% {
		transform: rotate(360deg);
		border-top-color: var(--main-color_ao);
	}
}
@keyframes rotate_messagerie {
	0% {
		transform: rotate(0deg);
		border-top-color: var(--main-color_esn-forfait);
	}
	50% {
		transform: rotate(180deg);
		border-top-color: var(--draggable-bleu-vert);
	}
	100% {
		transform: rotate(360deg);
		border-top-color: var(--main-color_esn-forfait);
	}
}
@keyframes rotate_formation {
	0% {
		transform: rotate(0deg);
		border-top-color: var(--main-color_formation);
	}
	50% {
		transform: rotate(180deg);
		border-top-color: rgba(var(--main-color_formation_rgb), .5);
	}
	100% {
		transform: rotate(360deg);
		border-top-color: var(--main-color_formation);
	}
}

/*------------------------------*\
    #COMPOSANT pulse notification - "mise en lumière"
/*------------------------------*/

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--secondary-color_ao_rgb), 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(var(--secondary-color_ao_rgb), 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--secondary-color_ao_rgb), 0);
	}
}
/* uniquement dans paramètre notification couleur activé/non activé */
@keyframes pulsePushYes {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--main-color_mission_rgb), 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(var(--main-color_mission_rgb), 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--main-color_mission_rgb), 0);
	}
}
@keyframes pulsePushNo {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--secondary-color_ao_rgb), 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(var(--secondary-color_ao_rgb), 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--secondary-color_ao_rgb), 0);
	}
}

/*------------------------------*\
    #COMPOSANT animation en fadeIn changement de page page/step
/*------------------------------*/

@keyframes fadeInQuick {
	0% {
	  opacity:  0;
	}
	
	50% {
	  opacity: 0.5
	}
	100% {
	  opacity: 1; 
	}
}
  @keyframes fadeOutQuick {
	0% {
	  opacity: 1;
	}
	50% {
		  opacity: 0.5
	}
	100% {
	  opacity: 0;
	}
}