body {
	font-family             : Arial, serif;
	font-size               : 1em;
	background-color        : #eee;
	overflow-x              : hidden;
	-webkit-font-smoothing  : antialiased;
	-moz-osx-font-smoothing : grayscale;
}
.pure-g-sizing, .content {
	width  : 1170px;
	margin : 0 auto;
}
p { margin : 15px 0; line-height : 1.6em; }
a, .bouton { transition : all 0.3s ease; }
img { max-width : 100%; height : auto; }
ul { margin : 0; padding : 0; list-style-type : none; }
.bouton {
	background-color : #ffffff;
	color            : #00aae7 !important;
	text-decoration  : none !important;
	font-weight      : bold;
	display          : inline-block;
	margin           : 0 5px 5px 0;
	padding          : 18px 40px;
	border           : 0;
}
.bouton:hover { background-color : #235c87; color : #ffffff; }
.clear { clear : both; }
/*
    BARRE HAGER
*/

#barre-hager {
	height           : 50px;
	background-color : #00aae7;
	color            : #FFFFFF;
	transition       : background 0.5s ease-out;
}
#barre-hager #logo-hager {
	width            : 89px;
	height           : 30px;
	margin           : 10px 0;
	background-image : url("gfx/logo-hager.png");
	text-indent      : 100%;
	white-space      : nowrap;
	overflow         : hidden;
	float            : left;
}
/*
    BARRE SEPIO
*/

#header { position : relative; z-index : 9999; }
#barre {
	height           : 50px;
	background-color : #ffffff;
}
#barre-sepio {
	height           : 50px;
	background-color : #ffffff;
	text-align       : right;
}
#logo-sepio {
	width            : 76px;
	height           : 28px;
	background-image : url("gfx/logo-sepio.png");
	text-indent      : 100%;
	white-space      : nowrap;
	overflow         : hidden;
	float            : left;
}
#barre-sepio #logo-sepio { background-position : top center; margin : 11px 0 5px 0; }
/*
    BARRE COVIVA
*/

#barre-coviva {
	height           : 50px;
	background-color : #ffffff;
	text-align       : right;
}
#logo-coviva {
	width            : 89px;
	height           : 22px;
	background-image : url("gfx/logo-coviva.png");
	text-indent      : 100%;
	white-space      : nowrap;
	overflow         : hidden;
	float            : left;
}
#barre-coviva #logo-coviva { background-position : top center; margin : 11px 0 5px 0; }
/*
    BARRE DOMOVEA
*/

#barre-domovea {
	height           : 50px;
	background-color : #ffffff;
	text-align       : right;
}
#logo-domovea {
	width            : 128px;
	height           : 22px;
	background-image : url("gfx/logo-domovea.png");
	text-indent      : 100%;
	white-space      : nowrap;
	overflow         : hidden;
	float            : left;
}
#barre-domovea #logo-domovea { background-position : top center; margin : 11px 0 5px 0; }
/*
    ACCUEIL
*/

#contenu {
	min-height      : calc(100vh - 145px);
	color           : #ffffff;
	padding         : 70px 0;
	background      : url("gfx/contenu.jpg") center center;
	background-size : cover;
	display         : flex;
	flex-direction  : column;
	justify-content : center;
	box-sizing      : border-box;
}
h2 { font-size : 3.6em; margin : 0 0 25px 0; }
a { color : #ffffff; text-decoration : underline; }
a:hover { color : #235c87; }
.formulaire input[type="text"], .formulaire input[type="password"], .formulaire select {
	width         : 100%;
	max-width     : 360px;
	margin        : 15px 0;
	padding       : 15px 0;
	border        : none;
	border-bottom : 1px solid #ffffff;
	background    : transparent;
	color         : #ffffff;
	display       : block;
	outline       : none;
	box-sizing    : border-box;
}
::-webkit-input-placeholder { color : #ffffff; }
:-moz-placeholder { color : #ffffff; opacity : 1; }
::-moz-placeholder { color : #ffffff; opacity : 1; }
:-ms-input-placeholder { color : #ffffff; }
.formulaire input:disabled { opacity : 0.6; }
.formulaire input[type="submit"] { border : none; }
.formulaire input[type="submit"].resize { border : none; width : 100%; max-width : 360px; }
.formulaire label { display : block; font-size : 0.85em; padding-left : 20px; }
.formulaire label.checkboxtext { display : block; font-size : 1em; padding-left : 0px; }
.forgot-password { font-size : 0.9em; margin-top : 25px; }
/*
    FOOTER
*/

#footer {
	height           : 45px;
	background-color : #ffffff;
	text-align       : right;
	color            : #00aae7;
	font-size        : 0.75em;
	position         : relative;
}
#footer p {
	margin       : 0;
	padding-left : 20px;
	line-height  : 45px;
	font-weight  : bold;
	float        : right;
	background   : url("gfx/lock.png") 0 11px no-repeat;
}
.footer__menu li {
	color           : #00aae7;
	float           : left;
	font-weight     : bold;
	line-height     : 45px;
	margin          : 0;
	padding-right   : 20px;
}
.footer__menu li a {
	color : #00aae7;
	text-decoration : none;
}
/* RESPONSIVE - DESKTOP */

@media (min-width : 1170px) {

	body { font-size : 1.2em; }
	p { margin : 20px 0; }

}
@media (min-width : 981px) and (max-width : 1170px) {

	.pure-g-sizing, .content { width : 960px; }

}
/* RESPONSIVE - TABLET */

@media screen and (min-width : 769px) and (max-width : 980px) {

	.pure-g-sizing, .content { width : 768px; }

}
/* RESPONSIVE - MOBILE */

@media screen and (max-width : 768px) {

	.pure-g-sizing, .content { max-width : calc(100% - 30px); margin : 0 15px; }
	.pure-u-1-2 { width : 100%; }
	h2 { font-size : 2.8em; }

}
/* RETINA */

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min--moz-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

	#barre-hager #logo-hager {
		background-image : url("gfx/logo-hager@2x.png");
		background-size  : 89px 30px;
	}
	#logo-sepio {
		background-image : url("gfx/logo-sepio@2x.png");
		background-size  : 76px 28px;
	}
	#barre-sepio #logo-sepio { background-size : 100% auto !important; }
	#footer p {
		background-image : url("gfx/lock@2x.png");
		background-size  : 13px 17px;
	}

}