/****************************************Mis en forme du menu MED*/
.header_navbar{ /********** le conteneur du menu*****************************/
	height: 100%;
}
.menu_deroulant ul{
	box-shadow: 0px 1px 2px #CCC;
	background: rgb(0, 131, 143);
}
.header-med{
	height: 80px;
}
.header_navbar-menu-link{
	/*line-height: 25px;*/
	padding-bottom: -5px;
}

/*************************************corps de la page - apres le menu*/
#separateur1,
#separateur2{
	position: relative;
	width: 100%;
	display: block;
	background: transparent;
	margin: 0;
	padding: 0;
}

.body_doc{
	position: relative;
	width: 100%;
	background-color: rgb(238, 250, 247);
}

.body_section1-mask{
    position: absolute;
    width: 40%;
	height: 500px;
	right: 0;
    -webkit-mask-image: url(../img/svg/hero-mask-desktop.svg);
    -webkit-mask-position: left center;
}
.body_section1-filtre{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; left: 0;
	background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.4));
}
.marque_logo{
	position: absolute;
    width: 40%;
	height: 500px;
	top: 0;
	right: 0;
	margin: 0;
	background: transparent;
	background-color: transparent;
}
.marque_logo-contenu{
	position: absolute;
	margin: 0;
	bottom: 10px;
	right: 40px;
	color: #002845;
}
.body_section1{
	position: relative;
	display: block;
	margin: 0; padding: 0;
	width: 100%;
	height: auto;
	background: transparent;
}
.body_section1 .container_med{
	width: 90%;
	margin: 0 auto;
	display: block;
	border: 1px solid transparent;
	transition: all 0.9s ease-in-out;
}
.body_section1 .div1, .body_section1 .div2,
.body_section1 .container_med .Pconnexion{
	position: relative;
	display: block;
	width: 100%;
	margin: 36px 0;
    order: 2;
}
.body_section1 .container_med .Pconnexion{
	width: 500px;
	order: 1;
}
.body_section1 .container_med .Pconnexion p{
	font-family: Saira, Open Sans, Segoe UI, Roboto;
	font-size: 20px;
	font-weight: 400;
	text-align: justify;
}

.container_med .Pconnexion a{
	position: relative;
	display: inline-block;
	height: 25px;
	cursor: pointer;
	text-decoration: none;
	color: #000;
	z-index: 999;
}

.container_med .Pconnexion a::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 2px;
	border: none;
	background:  RGBA(46, 125, 50, 0.5); /*RGBA(10, 126, 133, 0.4); #2E7D32;*/
	border-radius: 3px;
	bottom: -2px;
	left: 0px;
	transition: all 0.280s ease-in-out;
}

.container_med .Pconnexion a:hover:before {
	background:  RGBA(46, 125, 50, 0.2);
	padding: 0 4px;
	left: -4px;
	height: 25px;
}
.body_section1 .div2{
	position: relative;
    order: 3;
}

/******************************************zone responsive de la page*/
@media only screen and (max-width: 850px){
	.body_section1-mask{
		position: relative;
		width: 100%;
		height: 400px;
	    left: 0;
	    background-position: center top;
	    -webkit-mask-image: url(../img/svg/hero-mask-mobile.svg);
	    -webkit-mask-position: center bottom;
	    -webkit-mask-size: cover;
	    order: 2;
	}
	.marque_logo{
		position: absolute;
		width: 100%;
		height: 400px;
	    left: 0;
	    top:0;
	}
	.marque_logo-contenu{
		bottom: 38px;
		right: 15px;
	}
	.body_section1 .container_med{
		position: relative;
		/*flex-direction: column;*/
	}
	.body_section1-left{
		position: relative;
		width: 100%;
		height: auto;
	    order: 2;
	}
	.body_section1-right{
		display: none;
	}
}

@media only screen and (max-width: 575px){
	.body_section1-mask{
		height: 300px;
	}
	.marque_logo{
		height: 300px;
	}
	.marque_logo-contenu{
		bottom: 24px;
	}
}