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

body
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	
	font-family: Verdana, sans-serif;
}

::selection
{
	background: white;
	color: var(--Rose);
	
	/* color: white; */
	/* background: var(--Rose); */
}


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

.PageConnexion
{
	height: 100%;
	width: 100%;
	
	display: flex;
	justify-content: center;
	/* align-items: center; */
	padding-top: 5%;
	

	background-color: var(--Rose);
	
	background-image: url("../images/Rose3.jpg");
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	/* background-size: auto 100%; */
	background-position: bottom;
}

.BlockConnexion
{
	/* background-color: purple; */
	
	width: calc(55% - 5px);
	max-width: 600px;
	min-width: 350px;
	height: calc(40% - 5px);
	min-height: 350px;	
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	z-index: 2;
}

	.Haut
	{
		height: 80%;
				
		border-width: 5px;
		border-style: solid;
		border-color: var(--Rose);
		/* border-image: linear-gradient(20deg, green, red, yellow, blue, black, white, green, red, blue, yellow, white, green, yellow, red, black, green, white, red, blue, white, red, yellow, black, yellow) 1; */
		
		background: white;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
				
		font-family: Verdana, sans-serif;
		color: var(--Rose);	
	}
			
	.Bas
	{
		/* width: 100%; */
		height: 20%;
		
		/* background-color: red; */
				
		display: flex;
		justify-content: center;
		align-items: center;
	}

		.Titre
		{
			width: 80%;
			
			border-bottom: 3px solid var(--Rose);
			
			font-size: 3em;
			letter-spacing: 0.1em;
			
			/* background-color: red; */
			
			display: flex;
			justify-content: center;
		}

		.BlocId
		{
			width: 100%;
			height: 60%;
			
			/* background-color: green; */
			
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			
			padding-left: 10px;
			padding-right: 20px;
		}

			.Texte
			{
				width: calc(100% - 40px);
				height: 50px;
				
				background: var(--Rose);
								
				display: flex;
				
				position: relative;
				
				/* -webkit-transform:skew(-30deg); */
			}
				/* Biseau Droit */
				.Texte:after 
				{
					content:"";
					
					position: absolute;
					top: 0px;
					right: -10px;
					transform: skew(-15deg);
					
					height: 0;
					width: 0;
					
					border-style: solid;
					border-width: 25px 0 25px 25px;
				}

				.TexteIn:focus
				{
					outline: none;
				}
				
				.TexteIn
				{
					width: 100%;
					height: 100%;
					background: transparent;
					
					border: none;
					
					text-align: center;
					
					font-size: 1.2em;
					font-family: Verdana, sans-serif;
					color: white;
					/* -webkit-transform:skew(30deg); */
				}
					.TexteIn::placeholder
					{
						color: white;
					}

			.BlocId a /* Mdp Oublié*/
			{
				color: black;
				font-family: Verdana, sans-serif;
			}


/********************/
/*
/*Bouton Connexion***/
/*
/********************/

.BnConnexion
{
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	height: 50px;
	display: inline-block;
		
	background-color: var(--Rose);
	
	border: none;
	
	color: white;
	font-size: 1.3em;
	font-family: Verdana, sans-serif;
	letter-spacing: 0.1em;
	
	cursor: pointer;
	
	position: relative;
}

.BnConnexion:hover 
{
  color: white;
  background-color: red;
  
  position: relative;
  top: 5px;
}

/*Biseau droit*/
.BnConnexion:after 
{
	content:"";
					
	position: absolute;
	top: 0px;
	/* right: -10px; */
	transform: skew(-15deg);
					
	height: 0;
	width: 0;
					
	border-style: solid;
	border-width: 25px 0 25px 25px;
	border-color: var(--Rose);
}
.BnConnexion:hover:after 
{
	Border-color: red;
}

/*Biseau gauche*/
.BnConnexion:before 
{
	content:"";
					
	position: absolute;
	top: 0px;
	left:-15px;
					
	height: 0;
	width: 0;
					
	border-style: solid;
	border-width: 25px 0 25px 25px;
	border-color: var(--Rose);
}
.BnConnexion:hover:before 
{
	Border-color: red;
}

a
{
	text-decoration : none;
}

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

/*****************/
/* MEDIA QUERIES */
/*****************/

@media (max-width: 750px)
{
	.Texte
	{
		height: 30px;
	}
		.Texte:after 
		{
			border-width: 15px 0 15px 15px;
		}
}