@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");


*,
*::before,
*::after {
  box-sizing: border-box;
}

html,body{
		margin: 0;
		padding: 0;
		scroll-behavior: smooth; /* permet de scroller l'élément */
	}

	body{
		background-color: #020064;
		background-image:  url("images/fond_home.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 100vh;
	}

	header{
		height: 120px;
		padding: 10px 0;
		margin: 0 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.336);
	}

	.btn-connexion{
		font-size: 18px;
		color: #0400ec;
		background-color: rgb(255, 217, 0);
		border-bottom: 2px solid white;
		padding: 15px 20px;
		border-radius: 50Px;
		text-decoration: none;
		font-weight: 900;
	}

	#logo{
		width: 80px;
		height: 80px;
		border: 1px solid rgb(255, 217, 0);
	}
	
	#logo-img{
		width: 200px;
		height: 80px;
		border: 1px solid rgb(255, 217, 0);
	}

	.contain{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 10px;
		padding: 10px;
		height: auto;
	}

	.contain h2{
		font-family: Arial, Helvetica, sans-serif;
		color: red;
		margin-bottom: 30px;
		font-size: 25px;
		font-weight: 700;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.514);
		text-align: center;
		line-height: 25px;
		border-radius: 10px;
	}

	.contain h3{
		color: rgb(255, 217, 0);
		font-size: 20px;
		padding: 10px;
		font-family: Arial, Helvetica, sans-serif;
		border-top: 2px solid white;
		text-align: center;
		border-radius: 10px;
		margin-bottom: 15px;
	}

	.contain .image-pre{
		width: 300px;
		height: auto;
		animation: danse 10s infinite;
	}

	.contain .contact{
		font-size: 16px;
		padding: 10px;
		margin-top: 10px;
		color: white;
		text-align: center;
		text-decoration: none;
		font-weight: 500;
		transition: all .5s ease;
	}

	.contain .contact:hover{
		color: red;
	}

	@keyframes danse{
		0%{
			opacity: 1;
		}
		50%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}

	.contact-reseaux{
		color: #0400ec;
		padding: 10px;
		background-color: white;
		border: 2px solid rgb(255, 217, 0);
		border-radius: 5px;
		margin: 5px;
		text-decoration: none;
		font-size: 20px;
	}

	form{
		width: 350px;
		height: auto;
		background-color: rgba(255, 255, 255, 0.514);
		padding: 20px;
		border-radius: 10px;
	}

	form input,button{
		width: 100%;
		height: 40px;
		margin: 10px 0;
		border: none;
		padding: 5px;
		font-size: 16px;
	}

	form button{
		font-size: 16px;
		font-weight: 700;
		background-color: #0e2184;
		color: white;
		transition: all .3s ease;
		cursor: pointer;
	}

	form button:hover{
		background-color: #0e2284bb;
	}

	form .check{
		width: 18px !important;
		height: 18px !important;
		border: 2px solid yellow;
	}

	.mdp{
		text-decoration: none;
		color: #0e2184;
	}

	.mdp:hover{
		color:  #0e2284bb;
	}

	h4{
		font-size: 30px;
		font-weight: 500;
		text-align: center;
	    color: white;
		margin-bottom: 40px;
	}

	@media screen and (max-width: 620px){
		header{
			margin: 0 10px;
		}
	}

	@media screen and (max-width: 300px){
		.contain .image-pre{
			width: 100%;
			height: auto;
		}

		form{
			width: 100%;
			margin: 0 10px;
			padding: 10px;
		}
	}