body {
  margin: 0;
}

.body-loader {
	background: linear-gradient(-45deg, #65326d, #65326d, #65326d, #7b316f,#9e2a70, #b9236a, #d81b63, #ed672b, #f68713, #faa11b, #faa11b, #faa11b, #faa11b);
	  background-size: 244% 333%;
	  animation: gradient 5s linear infinite;
	  height: 100vh;
	overflow: hidden;
  }
  
  @keyframes gradient {
	  0% {
		  background-position: 50% 0%;
	  }
	  50% {
		  background-position: 50% 100%;
	  }
	  100% {
		  background-position: 50% 0%;
	  }
  }
  
  .container-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  
  .logo-feuille {
	width: 180px;
	animation: zoom-t 1s linear;
	animation-delay: 6s;
	animation-fill-mode: forwards;
  }
  
  .path {
	stroke-dasharray: 300;
	animation: dash 5s linear;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	opacity: 0;
  }
  
  
  .logo-texte {
	margin-top: 20px;
  }
  
  .lettre {
	animation: opacity 1s ease-out;
	animation-delay: 6.8s;
	animation-fill-mode: forwards;
	opacity: 0;
  }
  
  @keyframes dash {
	0% {
	  stroke-dashoffset: 822;
	  fill: rgba(255, 255, 255, 0);
	  stroke-width: 3;
	  opacity: 0;
	}
	10% {
	  fill: rgba(255, 255, 255, 0);
	  stroke-width: 3;
	  opacity: 1;
	}
	50% {
	  fill: rgba(255, 255, 255, 0.2);
	  stroke-width: 3;
	  opacity: 1;
	}
	70% {
	  fill: rgba(255, 255, 255, 0.3);
	  stroke-width: 2;
	  opacity: 1;
	}
	90% {
	  fill: rgba(255, 255, 255, 0.6);
	  stroke-width: 1;
	  opacity: 1;
	}
	100% {
	  stroke-dashoffset: 0;
	  fill: white;
	  stroke-width: 0;
	  opacity: 1;
	  
	}
  }
  
  
  @keyframes zoom-t {
	from {
	  width: 180px;
	}
	to {
	  width: 200px;
	}
  }
  
  
  @keyframes opacity {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }