:root
{
	--principal:#29adba;
	--unnamed-color-f0abbe: #F0ABBE;
	--unnamed-color-c885b1: #C885B1;
	--unnamed-color-a562a5: #A562A5;
	--unnamed-color-695269: #695269;
	--unnamed-color-fac873: #FAC873;
	--unnamed-color-f09661: #F09661;
	--unnamed-color-e66851: #E66851;
	--unnamed-color-6c5b59: #6C5B59;
	--unnamed-color-eaf6aa: #EAF6AA;
	--unnamed-color-6fc8b6: #6FC8B6;
	--unnamed-color-29adba: #29ADBA;
	--unnamed-color-578084: #578084;
	--unnamed-color-242430: #242430;
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("../font/Roboto-Regular.ttf");
}

@media only screen and (max-width: 1300px)
{
	.accroche_mobile
	{
		margin-top:60px;
	}
	.input 
	{
		font-family: Arial;
		font-size:12px;
		color:var(--gris-3);
		padding:10px;
		border-radius:2px;
		border:1px solid #D5DBDB;
		width : calc(100% - 22px);
		margin-bottom : 10px;
	}

	.label
	{
		font-size : 12px;
		color : #808B96;
		text-decoration : none;
		margin-bottom : 7px;
		display : inline-block;
	}

	a 
	{
		text-decoration:none;
		font-size : 12px;
		color : #808B96;
	}

	.btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 1rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.50rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	color: #fff;
	background-color: var(--unnamed-color-29adba);
	font-size : 12px;
	width : 100%;
	margin-top : 10px;
	}

	.btn:hover {
	color: #fff;
	background-color: #27868d;
	cursor : pointer; 
	}
	.formLogin
	{
		margin-top:10px;
		width : 50%;
		height: 30%;
		align-items : center;
	}

	.titreLogin
	{
		margin-top:10px;
		width : 90%;
		height: 10%;
		display : flex;
		flex-direction : column;
		align-items : center;
		justify-content : center;
	}

	.titreLogin h3
	{
		margin : 0;
		font-weight: normal;
		color : var(--unnamed-color-29adba);
	}
	body {
		width : 100%;
		display : block;
		height: 100vh;
		margin: 0;
		z-index : auto;
		font: 1.2em "Roboto-Regular";
		overflow: hidden;
	}
	.logo
	{
		margin-top : 50px;
		height:30%;

	}

	.logo img
	{
		width: 100%;
		height:100%;
		scale:1;
	}

	.cadreGauche
	{
		position:absolute;
		width:100%;
		background-color : white;
		height : 100%;
		display : flex;
		flex-direction : column;
		align-items : center;
		overflow: hidden;
	}

	.background-haut
	{
		display:none;
	}
	
	.background-bas
	{
		display:none;
	}
	.cadreDroite
	{
		display:none;
	}
}



@media only screen and (min-width: 1300px)
{
	.accroche_mobile
	{
		display:none;
	}
	body {
		max-width : 100vw;
		display : block;
		height: 100vh;
		margin: 0;
		z-index : auto;
		font: 1.2em "Roboto-Regular";
		overflow: hidden;
	}

	.background-haut
	{
		height: 50vh;
		align-content: flex-start;
		width: 100vw;
		z-index:-1;
		top: 0;
		background: linear-gradient(106deg,rgba(234, 246, 170, 1), rgba(111, 200, 182, 1),rgba(41, 173, 186, 1));
	}

	.background-bas
	{
		z-index:-1;
		height: 45vh;
		align-content: flex-start;
		width: 100vw;
		top: 55%;
	}

	.bgd-up-logo
	{
		position: absolute;
		top: -8.5vh;
		left:57.6vw;
		scale:1.3;
	}
	.bgd-down-logo
	{
		margin-top:8%;
		margin-left:-450px;
		scale:1.2;
		z-index:-1;
	}
	.imgRight
	{
		width:80%;
	
	}
	.container_formulaire{
		position:absolute;
		width: 60vw;
		height: 70vh;
		border-radius: 50px;
		display : flex;
		left:20%;
		top:15%;
		box-shadow: 0px 0px 30px #00000029;
		z-index: 0;
	}



	.cadreGauche {
		background-color : white;
		width : 50%;
		height : 100%;
		border-radius: 30px 0px 0px 50px;
		display : flex;
		flex-direction : column;
		align-items : center;
		overflow: hidden;
	}

	.cadreDroite 
	{
		background-color : #f0f3f6;
		width : 50%;
		height : 100%;
		border-radius: 0px 50px 50px 0px;
		display : flex;	
		flex-direction : column;
		align-items : center;
	}

	.logo
	{
		margin-top : 50px;
		display : flex;
		flex-direction : column;
		align-items : center;
		justify-content : center;
		height: 31%;
		width: 27%;
	}

	.logo img
	{
		width: 100%;
	}

	.titreLogin
	{
		width : 90%;
		height: 15%;
		display : flex;
		flex-direction : column;
		align-items : center;
		justify-content : center;
	}

	.titreLogin h3
	{
		margin : 0;
		font-weight: normal;
		color : var(--unnamed-color-29adba);
	}

	.formLogin
	{
		width : 50%;
		height: 45%;
		display : flex;
		align-items : center;
	}

	.imgDroite
	{
		width : 75%;
		height: 90%;
		display : flex;
		flex-direction : column;
		justify-content : center;
		align-items: center;
	}

	.footerDroite
	{
		width : 90%;
		height: 10%;
		margin-bottom : 10px;
		margin-top : 10px;
		font-size : 11px;
		text-align : center;
		color : #808B96;
	}

	.acrroche
	{
		width : 100%;
		height: 15%;
		margin-bottom : 10px;
		margin-top : 10px;
		display : flex;
		flex-direction : column;
		align-items : center;
		justify-content : center;
	}

	.acrroche h3
	{
		margin : 0;
		color : var(--principal);
	}


	.input 
	{
		font-family: Arial;
		font-size:12px;
		color:var(--gris-3);
		padding:10px;
		border-radius:2px;
		border:1px solid #D5DBDB;
		width : calc(100% - 22px);
		margin-bottom : 10px;
	}

	.label
	{
		font-size : 12px;
		color : #808B96;
		text-decoration : none;
		margin-bottom : 7px;
		display : inline-block;
	}

	a 
	{
		text-decoration:none;
		font-size : 12px;
		color : #808B96;
	}

	.btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 1rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.50rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	color: #fff;
	background-color: var(--unnamed-color-29adba);
	font-size : 12px;
	width : 100%;
	margin-top : 10px;
	}

	.btn:hover {
	color: #fff;
	background-color: #27868d;
	cursor : pointer; 
	}

	.formulaire 
	{
		width : 100%;
		/* height: 64%; */
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		/* overflow: hidden; */
	}

	.alert {
		width: 85.6%;
		border-radius : 10px;
		padding : 10px;
		font-size : 12px;
		height : auto;
		color : var(--principal);
		border: 1px solid transparent;
	}

	.alert.alert-danger{
		color: #721c24;
		background-color: #f8d7da;
		border-color: #f5c6cb;
	}

	.alert.alert-success{
		color: #155724;
		background-color: #d4edda;
		border-color: #c3e6cb;
	}
}