/* Version: 2.0 */
/* Auteurs: Sandra et Guillaume */
/* Description: CSS de la Page d'Inscription du Site des Roses */

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

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

	background-color: white;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	
	font-family: Arial, Helvetica, sans-serif;
}

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

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;

	outline: none;
	text-decoration: none;
}
	
	
/*******************************************************/
/*******************************************************/
/*******************************************************/


/***********************************/
/*
/* Coeur de la Page de Inscription */
/* Notamment pour accueil le fond en dégradé */ 
/* qui donne sa lumière au Glassmorphisme */
/*
/* On y place le formulaire d'inscriptin en lui même
/* Ainsi que les Nuages de décoration */
/*
/**************************************/

.CoeurInscription
{
	/* height: 100%; */
	width: 80%;
	min-height: 80vh;

	background-color:#C8C7FD ;
	background: linear-gradient(45DEG,#C8C7FD,#C2E2FD);
	background: linear-gradient(45DEG,#9997FA, #C2E2FD);

	border-radius: 10px;

	padding: 1.5rem 1.2rem;
	margin-right: 5px;
	box-sizing: border-box;

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

	/* 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; */
	z-index: 1;
}


	/**************************/
/**************************/
/*
/* Stylisme du Formulaire */
/*
/**************************/
	/**************************/
form
{
	/* height: 320px; */
	width: 80%;
	max-width: 600px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	
	/* padding: 3rem; */
	padding: 25px 30px;

	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;

	/* 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;
	/* z-index: 3; */

}
	/* TITRE du Formulaire */
	.Title
	{
		color: white;
		font-weight: 500;
		font-size: 3rem;

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

		margin-bottom: 3rem;

		position: relative;
	}
		.Title::before
		{
			content :"";
			position: absolute;
			left: 0;
			bottom: -5px;

			height: 4px;
			width: 40%;
			background: linear-gradient(45DEG,#C8C7FD,#C2E2FD);
			background: linear-gradient(45DEG,#9997FA, #C2E2FD);
		}

.UserDetails
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	background: transparent;
}
	
/* INPUT du Formulaire */
.BlocInput
{
	width: calc(100% / 2 - 20px);

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

	margin-bottom: 2.3em;

	/* background: transparent; */

	position: relative;
}
	.Mail
	{
		width: 100%;
	}

	.Details
	{
		color: #9997FA;
		font-weight: 500;
		font-size: 1rem;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
		
		margin-bottom: 5px;

		display: block;

		/***/
		position: absolute;
		top: 0.5rem;
		left: 1rem;

		transition: all 500ms;

		/* Prevents users from highlighting the label. */
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;

		pointer-events: none; 
	}

	.UserDetails input
	{
		width: 100%;
		padding: 0.5rem 1rem;

		background: transparent;

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

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

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

		color: #524EF2;
		font-weight: 500;
		font-size: 0.8rem;
		/* text-shadow: 2px 2px 4px rgba(0,0,0,0.3);  */

		transition: all 250ms;
	}
	/* IMPORTANT */
	/* Le bloc ci-dessous cache intégralement le PLACEHOLDER - Il n'existe plus */
	/* On ne voit plus que le LABEL dans l'INPUT */
	.UserDetails input::placeholder 
	{
		/* display: none; */
		color: transparent;
		opacity: 0;
		/* Prevents users from highlighting the placeholder. */
		-webkit-user-select: none; 
		-ms-user-select: none; 
		user-select: none; 
	}

		.UserDetails input:focus,
		.UserDetails input:valid
		{
			background: rgba(255,255,255,0.1);
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
		}

		.UserDetails input:hover
		{
			background: rgba(255,255,255,0.1);
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
		}

		/* Lorsque le champs d'un INPUT est FOCUS - alors on change la COLOR du LABEL */
      	/* De plus, si on ne "montre pas" le PLACEHOLDER ; c'est à dire lorsqu'il y a du contenu dans l'INPUT */
		/* On transforme le LABEL : translation au dessus de l'INPUT et on change sa couleur */
		.UserDetails input:focus + .Details,
		.UserDetails input:not(:placeholder-shown) + .Details
		{
			transform: translateY(-2rem) translateX(-1rem);
			color: #7471F7;
		}
	

			.Error
			{
				font-weight: 500;
				font-size: 0.8rem;
				/* color: #fd5949; */
				color: #d6249f;

				padding: 0.8rem 1rem;

				align-self: flex-start;
				justify-content: start;

				text-align: left;

				margin-bottom: -1.8em;
			}


	/*************************************/
/*************************************/
/*
/* Personalisation des Boutons RADIO */
/*
/*************************************/
	/*************************************/

.CalendarDetails
{
	width: 100%;

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

	margin-bottom: 1.5em;

	/* background: transparent; */
}

.CalendarTitle
{
	color: white;
	font-weight: 500;
	font-size: 1.1rem;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 

	margin-bottom: 10px;

	/* background-color: #5AF7B8; */
	opacity: 0.8;
}

.Day
{
	width: 80%;
	/* background-color: red; */

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
	.Day label
	{
		display: flex;
		flex-direction: row;
		align-items: center;

		margin-bottom: 10px;
	}
	.Dot
	{
		height: 18px;
		width: 18px;

		background-color: #C8C7FD;

		border: 1px solid #C2E2FD;
		border-radius: 50%;

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

		margin-right: 10px;
		
		transition: all 250ms;
	}
		#volunteer_availability_day1:checked ~ .Day label .Dot1
		{
			border: 1px solid #0AE48C;
			background: linear-gradient(45deg,#64B4F6,#5AF7B8);

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

		#volunteer_availability_day2:checked ~ .Day label .Dot2
		{
			background: #0AE48C;
			border-color: #5AF7B8;

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

		#volunteer_availability_day3:checked ~ .Day label .Dot3
		{
			background: #5AF7B8;
			border-color: #0AE48C;

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

		#volunteer_availability_day1:hover ~ .Day label .Dot1,
		#volunteer_availability_day2:hover ~ .Day label .Dot2,
		#volunteer_availability_day3:hover ~ .Day label .Dot3
		{
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
			cursor: pointer;
		}

		#volunteer2_availability_day1:checked ~ .Day label .Dot1
		{
			border: 1px solid #0AE48C;
			background: linear-gradient(45deg,#64B4F6,#5AF7B8);

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

		#volunteer2_availability_day2:checked ~ .Day label .Dot2
		{
			background: #0AE48C;
			border-color: #5AF7B8;

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

		#volunteer2_availability_day3:checked ~ .Day label .Dot3
		{
			background: #5AF7B8;
			border-color: #0AE48C;

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

		#volunteer2_availability_day1:hover ~ .Day label .Dot1,
		#volunteer2_availability_day2:hover ~ .Day label .Dot2,
		#volunteer2_availability_day3:hover ~ .Day label .Dot3
		{
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
			cursor: pointer;
		}
	input[type="checkbox"]
	{
		display: none;
	}

	.Jour
	{
		color: #7471F7;
		font-weight: 500;
		font-size: 1rem;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
	}


	/*************************/
/*************************/
/*
/* Intégration du BOUTON */
/*
/*************************/
	/*************************/

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

		align-self: center;

		/* background: linear-gradient(45deg,#64B4F6,#5AF7B8); */
		background: linear-gradient(45deg,#9997FA, #C2E2FD);

		font-size: 1.1rem;
		font-weight: 500;
		color: white;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 

		width: auto;
		padding: 0.8rem 3rem;
		
		border-radius: 10px;
		border: none;
		border-left: 1px solid rgba(255,255,255, 0.4);
		border-top: 1px solid rgba(255, 255, 255, 0.4);

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

		transition: all 250ms;
	}
		input[type="submit"]:hover
		{
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
			background: linear-gradient(45deg,#64B4F6,#5AF7B8);
			/* background: linear-gradient(200deg,#9997FA, #C2E2FD); */
		}

	#save_button
	{
		cursor: pointer;

		align-self: center;

		/* background: linear-gradient(45deg,#64B4F6,#5AF7B8); */
		background: linear-gradient(45deg,#9997FA, #C2E2FD);

		font-size: 1.1rem;
		font-weight: 500;
		color: white;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 

		width: auto;
		padding: 0.8rem 3rem;
		
		border-radius: 10px;
		border: none;
		border-left: 1px solid rgba(255,255,255, 0.4);
		border-top: 1px solid rgba(255, 255, 255, 0.4);

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

		transition: all 250ms;
	}
		#save_button:hover
	{
		box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
		background: linear-gradient(45deg,#64B4F6,#5AF7B8);
		/* background: linear-gradient(200deg,#9997FA, #C2E2FD); */
	}

	#accept_button
	{
		cursor: pointer;

		align-self: center;

		/* background: linear-gradient(45deg,#64B4F6,#5AF7B8); */
		background: linear-gradient(45deg,#9997FA, #C2E2FD);

		font-size: 1.1rem;
		font-weight: 500;
		color: white;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 

		width: auto;
		padding: 0.8rem 3rem;
		
		border-radius: 10px;
		border: none;
		border-left: 1px solid rgba(255,255,255, 0.4);
		border-top: 1px solid rgba(255, 255, 255, 0.4);

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

		transition: all 250ms;
	}
		#accept_button:hover
	{
		box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
		background: linear-gradient(45deg,#64B4F6,#5AF7B8);
		/* background: linear-gradient(200deg,#9997FA, #C2E2FD); */
	}

	#cancel_button
	{
		cursor: pointer;

		align-self: center;

		/* background: linear-gradient(45deg,#64B4F6,#5AF7B8); */
		background: linear-gradient(45deg,#f897fa, #ea3a13);

		font-size: 1.1rem;
		font-weight: 500;
		color: white;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 

		width: auto;
		padding: 0.8rem 3rem;
		
		border-radius: 10px;
		border: none;
		border-left: 1px solid rgba(255,255,255, 0.4);
		border-top: 1px solid rgba(255, 255, 255, 0.4);

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

		transition: all 250ms;
	}
		#cancel_button:hover
		{
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
			background: linear-gradient(45deg,#8e3650,#d713dd);
			/* background: linear-gradient(200deg,#9997FA, #C2E2FD); */
		}
	/*****************************/
/*****************************/
/*
/* Personalisation du SELECT */
/*
/*****************************/
	/*****************************/

	/* Remove IE arrow */
	select::-ms-expand 
	{
		display: none;
	}
	/* Custom Select wrapper */
	.BlocSelect 
	{
		width: 80%;
		height: 2.5em;

		margin-bottom: 3em;

		display: flex;

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

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

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

		color: #524EF2;
		font-weight: 500;
		font-size: 0.8rem;

		transition: all 250ms;

		overflow: hidden;

		position: relative;
	}
		/* Arrow */
		.BlocSelect::after 
		{
			content: '\25BC';

			/* display: none; */

			position: absolute;
			top: 0;
			right: 0;
			padding: 0.7em;

			background: linear-gradient(45deg,#9997FA, #C2E2FD);

			transition: all 250ms ease;

			pointer-events: none;
		}
			.BlocSelect:hover::after 
			{
				color: #5AF7B8;
			}

select 
{
	/* Reset Select */
	appearance: none;
	border: 0;
	box-shadow: none;

	/* Personalize */
	flex: 1;
	padding: 0.5em 1em;

	/* color: white; */
	color: #2E2BE6;
	font-weight: 500;
	font-size: 0.8rem;

	background: linear-gradient(45deg,#9997FA, #C2E2FD);

	cursor: pointer;
}

/***********************/
/* 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:-30px;
		/*On utilise Z INDEX pour passer le drop sous le formulaire */
		z-index: -1;
	}

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

		bottom: -15px;
		right: 15px;
	}

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

		bottom: 150px;
		right: -50px;

		z-index: -1;
	}

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

		top: -50px;
		right: -40px;
	}

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

		bottom: 60px;
		left: -20px;

		z-index: -1;
	}

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

@media screen and (max-width: 1000px) {
	.CoeurInscription
	{   
	  flex-direction: column;
	}
}

@media screen and (max-width: 800px) {
	.CoeurInscription
	{   
	  max-width: 100%;
	}
		form
		{
			max-width: 100%;
		}
			.BlocInput
			{
				width: 100%;
			}
			.Day
			{
				width: 100%;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
			}
}

@media screen and (max-width: 600px) {
	.CoeurInscription
	{   
		width: 90%;
		margin-bottom: 0px;
	}
		form
		{
			width: 100%;
		}

		.drop
		{
			display: none;
		}
}