<?php
header ("Refresh: 5;URL=/pages/formulaire_accueil.php?erreur=1");
?>

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Courtail - Portail des courriels</title>
		<!-- Ajouter le favicon <link rel="icon" href="/fichiers/images/favicon.ico" /> -->
		<style>
			/* Base */
			body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			font-size: 40px;
			color: #FFF;
			background-color: #1F527D;
			text-align: center; }

			.chargements{
			position: absolute;
			top:40%;
			margin: 0 auto;
			width: 100%;
			}

			.section {
			height: 100%;
			line-height: 100%; }

			.section-2 {
			}

			.section-3 {
			background-color: #e74c3c; }

			.section-4 {
			background-color: #8e44ad; }

			.chargement {
			width: 50px;
			height: 50px;
			display: inline-block;
			vertical-align: middle;
			position: relative; }

			/* chargements */
			.chargement-quart {
			border-radius: 50px;
			border: 6px solid rgba(255, 255, 255, 0.4); }

			.chargement-quart:after {
			content: '';
			position: absolute;
			top: -6px;
			left: -6px;
			bottom: -6px;
			right: -6px;
			border-radius: 50px;
			border: 6px solid transparent;
			border-top-color: #FFF;
			-webkit-animation: spin 1s linear infinite;
			-moz-animation: spin 1s linear infinite;
			animation: spin 1s linear infinite; }

			.chargement-double {
			border-radius: 50px;
			border: 6px solid transparent;
			border-top-color: #FFF;
			border-bottom-color: #FFF;
			-webkit-animation: spin 1s linear infinite;
			-moz-animation: spin 1s linear infinite;
			animation: spin 1s linear infinite; }
			.chargement-double:after {
				content: '';
				position: absolute;
				top: 5px;
				left: 5px;
				bottom: 5px;
				right: 5px;
				border-radius: 50px;
				border: 6px solid transparent;
				border-top-color: #FFF;
				border-bottom-color: #FFF;
				opacity: 0.6;
				-webkit-animation: spinreverse 2s linear infinite;
				-moz-animation: spinreverse 2s linear infinite;
				animation: spinreverse 2s linear infinite; }

			.chargement-cercles {
			border-radius: 50px;
			border: 3px solid transparent;
			border-top-color: #FFF;
			-webkit-animation: spin 1s linear infinite;
			-moz-animation: spin 1s linear infinite;
			animation: spin 1s linear infinite; }
			.chargement-cercles:before, .chargement-cercles:after {
				content: '';
				position: absolute;
				top: 5px;
				left: 5px;
				bottom: 5px;
				right: 5px;
				border-radius: 50px;
				border: 3px solid transparent;
				border-top-color: #FFF;
				opacity: 0.8;
				-webkit-animation: spin 10s linear infinite;
				-moz-animation: spin 10s linear infinite;
				animation: spin 10s linear infinite; }
			.chargement-cercles:before {
				top: 12px;
				left: 12px;
				bottom: 12px;
				right: 12px;
				opacity: .5;
				-webkit-animation: spin 5s linear infinite;
				-moz-animation: spin 5s linear infinite;
				animation: spin 5s linear infinite; }

			.chargement-barres:before, .chargement-barres:after,
			.chargement-barres span {
			content: '';
			display: block;
			position: absolute;
			left: 0px;
			top: 0;
			width: 10px;
			height: 30px;
			background-color: #FFF;
			-webkit-animation: grow 1s linear infinite;
			-moz-animation: grow 1s linear infinite;
			animation: grow 1s linear infinite; }
			.chargement-barres:after {
			left: 15px;
			-webkit-animation-delay: -0.66s;
			-moz-animation-delay: -0.66s;
			animation-delay: -0.66s; }
			.chargement-barres span {
			left: 30px;
			-webkit-animation-delay: -0.33s;
			-moz-animation-delay: -0.33s;
			animation-delay: -0.33s; }

			/* Animations */
			@-webkit-keyframes spin {
			from {
				-webkit-transform: rotate(0deg); }

			to {
				-webkit-transform: rotate(360deg); } }
			@-moz-keyframes spin {
			from {
				-moz-transform: rotate(0deg); }

			to {
				-moz-transform: rotate(360deg); } }
			@keyframes spin {
			from {
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg); }

			to {
				-webkit-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				transform: rotate(360deg); } }
			@-webkit-keyframes spinreverse {
			from {
				-webkit-transform: rotate(0deg); }

			to {
				-webkit-transform: rotate(-360deg); } }
			@-moz-keyframes spinreverse {
			from {
				-moz-transform: rotate(0deg); }

			to {
				-moz-transform: rotate(-360deg); } }
			@keyframes spinreverse {
			from {
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg); }

			to {
				-webkit-transform: rotate(-360deg);
				-moz-transform: rotate(-360deg);
				-ms-transform: rotate(-360deg);
				-o-transform: rotate(-360deg);
				transform: rotate(-360deg); } }
			@-webkit-keyframes grow {
			0% {
				-webkit-transform: scaleY(0);
				opacity: 0; }

			50% {
				-webkit-transform: scaleY(1);
				opacity: 1; }

			100% {
				-webkit-transform: scaleY(0);
				opacity: 0; } }
			@-moz-keyframes grow {
			0% {
				-moz-transform: scaleY(0);
				opacity: 0; }

			50% {
				-moz-transform: scaleY(1);
				opacity: 1; }

			100% {
				-moz-transform: scaleY(0);
				opacity: 0; } }
			@keyframes grow {
			0% {
				-webkit-transform: scaleY(0);
				-moz-transform: scaleY(0);
				-ms-transform: scaleY(0);
				-o-transform: scaleY(0);
				transform: scaleY(0);
				opacity: 0; }

			50% {
				-webkit-transform: scaleY(1);
				-moz-transform: scaleY(1);
				-ms-transform: scaleY(1);
				-o-transform: scaleY(1);
				transform: scaleY(1);
				opacity: 1; }

			100% {
				-webkit-transform: scaleY(0);
				-moz-transform: scaleY(0);
				-ms-transform: scaleY(0);
				-o-transform: scaleY(0);
				transform: scaleY(0);
				opacity: 0; } }
		</style>
	</head>
	<body>
		<div class="chargements">
			<section class="section section-2">
				<span class="chargement chargement-double"></span>
				Traitement...
			</section>
		</div>
	</body>
</html>