/* Version: 1.0 */
/* Auteurs: Sandra et Guillaume */
/* Description: CSS de la Page de Connexion de l'Equipe d'Administration au Site des Roses */

html
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;

	background-color: #C2E2FD;
	background: linear-gradient(45DEG,#1986E1,#0AE48C);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	font-family: Arial, Helvetica, sans-serif;
}

::selection
{
	background: #64B4F6;
	color: #5AF7B8;
}

* {
	margin: 0;
	padding: 0;

	outline: none;
}

/*******************************************************/
/*******************************************************/
/*******************************************************/



/*******************************/
/*
/* Conception de la Structure */ 
/* de la Page de Connexion Administrateur */
/*
/******************************/

.CoeurConnexion
{
	/* Les nuages du Glassmorphisme vont être positionnés */
	/* de façon "ABSOLUTE" par rapport à notre formulaire de connexion */
	/* Il faut donc que notre formulaire ait l'aptitude "RELATIVE" */
	position: relative;

	/* height: 100%;
	width: 80%;

	box-sizing: border-box;
	
	display: flex;
	flex-direction: row;

	background-color: #D4E6F1 ; */

	/* flex-wrap: wrap; */
}

/***********/
/* Stylisme du Formulaire */
/***********/
form
{
	height: 320px;
	
	padding: 3rem;

	border-radius: 20px;

	/* Ajout de luminosité */
	border-left: 1px solid rgba(255,255,255,0.3) ;
	border-top: 1px solid rgba(255,255,255,0.3) ;
	
	/* Effet qui permet d'ajouter un filtre aux élements "en dessous de NOUS" */
	/* Gradation du Blur : #JeSuisFlouDERRIERE - #JeSuisNetDEVANT */
	background: rgba(255,255,255,0.3);
	backdrop-filter: blur(10px);
	/* -webkit-backdrop-filter: blur(10px); */

	box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.3);

	text-align: center;
}
	/* TITRE du Formulaire */
	.Titre
	{
		color: white;
		font-weight: 500;
		font-size: 1.5rem;

		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 
		
		opacity: 0.8;

		margin-bottom: 60px;
	}

	/* LIEN "MdP oublié" du Formulaire */
	.MdPLoose
	{
		color: #C2E2FD;
		text-decoration: none;
		font-size: 12px;

		/*l'Aptitude "transition" permet de donner de la progression au TEXTSHADOW lors de l'HOVER */
		transition: all 0.3s;
	}
		.MdPLoose:hover
		{
			text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
		}
	
	/* INPUT du Formulaire */
	input
	{
		width: 200px;
		margin-bottom: 2em;

		padding: 1rem;
		
		background: transparent;

		border: none;
		border-left: 1px solid rgba(255,255,255,0.3);
		border-top: 1px solid rgba(255,255,255,0.3);
		border-radius: 50px;

		/* background: rgba(255,255,255,0.3); */
		backdrop-filter: blur(10px);
		/* -webkit-backdrop-filter: blur(10px); */

		box-shadow: 4px 4px 60px rgba(0,0,0,0.3);

		color: white;
		font-weight: 500;

		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 

		transition: all 0.3s;
	}
		::placeholder
		{
			color: white;
		}
	
		input:hover,
		input[type="email"]:focus,
		input[type="password"]:focus
		{
			background: rgba(255,255,255,0.1);
			box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.3);
		}

	input[type="button"]
	{
		cursor: pointer;

		margin-top: 10px;

		font-size: 0.8rem;

		width: 65%;
	}

/***********************/
/* Stylisme des Nuages */
/* Class DROP */
/**************/	

.drop
{
	background: rgba(255,255,255,0.3);
	backdrop-filter: blur(10px);
	/* -webkit-backdrop-filter: blur(10px); */
	
	position: absolute;

	border-left: 1px solid rgba(255,255,255,0.3) ;
	border-top: 1px solid rgba(255,255,255,0.3) ;
	border-radius: 10px;

	box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.3);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
	.drop-1
	{
		height: 80px;
		width: 80px;

		top:-20px;
		left:-40px;
		/*On utilise Z INDEX pour passer le drop sous le formulaire */
		z-index: -1;
	}

	.drop-2
	{
		height: 80px;
		width: 80px;

		bottom: -30px;
		right: 10px;
	}
		.Image
		{
			width: 100%;
			height: 100%;

			border-radius: 10px;
		}

	.drop-3
	{
		height: 100px;
		width: 100px;

		bottom: 120px;
		right: -50px;

		z-index: -1;
	}

	/* Positionnement du Bouton de Retour vers l'ACCUEIL */
	/* Dans un Nuage en Avant du Bloc FORM */
	/* Car je n'ai pas réussi à jouer avec le ZINDEX sur le DROP 1 pour le faire revenir vers le DEVANT */
	.drop-4
	{
		height: 100px;
		width: 100px;

		top:-60px;
		right: -50px;
	}
		.drop-4:hover
		{
			background-color: #64B4F6;
		}
		.Retour
		{
			width: 100%;
			height: 100%;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			color: white;
			text-decoration: none;
			opacity: 0.8;
			
			font-weight: 500;
			font-size: 1.2rem;

			border: none;
			border-radius: 10px;

			/*l'Aptitude "transition" permet de donner de la progression au TEXTSHADOW lors de l'HOVER */
			transition: all 0.3s;
		}
			.Retour:hover,
			.Retour:focus
			{
				background: rgba(255,255,255,0.1);
				box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.3);
			}
			.Retour:hover > p
			{
				text-shadow: 2px 2px 6px rgba(0,0,0,0.7); 
			}

	.drop-5
	{
		height: 60px;
		width: 60px;

		bottom: 100px;
		left: 40px;

		z-index: -1;
	}


/***********************/
/* Creation du CSS du bouton de RETOUR à l'ACCUEIL */
/* On souhaite le mettre en LUMIERE lors de l'HOVER sur le DROP-1 */
/* Faire passer celui en Z-INDEX supérieur et changer sa couleur*/
/**************/	

/*******************************************************/
/*******************************************************/
/*******************************************************/

@media screen and (max-width: 1000px) {

}