:root {
	--color-brand: #7ee2a7;
	--color-brand-darker: #6dc591;
	--color-error: red;
	--color-input-border: #ccc;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

.main-form {
	margin: 10vh auto;
	width: 600px;
	max-width: 100%;
}

.main-header {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-block-end: 2rem;
	gap: 1rem;
}

.main-header img {
	display: block;
	max-width: 100%;
}

.main-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.main-title__title {
	font-size: 1.5rem;
}

.header__date {
	margin: 0;
	inset: 0 0 auto auto;
	font-size: 0.75rem;
}

.title-bar {
	margin-block-end: 2rem;
	padding: 1rem;
	background: var(--color-brand);
	display: flex;
	justify-content: space-between;
}

.title-bar__title {
	margin: 0;
	font-size: 1rem;
}

.btn--primary {
	display: inline-block;
	color: #000;
	background: var(--color-brand);
	padding: 1rem;
	text-decoration: none;
	font-size: 1rem;
	border: 0;
	cursor: pointer;
}

.btn--primary:hover {
	font-weight: normal;
	background: var(--color-brand-darker);
}

.btn--secondary {
	font-size: 1rem;
	display: inline-block;
	color: #000;
	background: #ddd;
	padding: 1rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.btn--secondary:hover {
	font-weight: normal;
	background-color: #ccc;
}

.login__action {
	display: flex;
	justify-content: space-between;
}

.login-form .form-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-block-end: 1rem;
}

.login-form .form-item input {
	font-size: 1rem;
	padding: 0.5rem 1rem;
	border-radius: 0;
	border: 1px solid var(--color-input-border)
}

.habeologo {
	margin-block: 3rem 1rem;
	display: flex;
	justify-content: center;
}

.textdate {
	FONT-SIZE: 8pt; COLOR: #384450; FONT-STYLE: normal; FONT-FAMILY: arial
}
.textsociete {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #384450; FONT-STYLE: normal; FONT-FAMILY: arial
}
.textblanc {
	FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #ffffff; FONT-FAMILY: verdana
}
.textnom {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: underline
}
.textorange {
	FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #ff6528; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
.textorgras {
	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #ff7640; FONT-FAMILY: verdana
}
.textorsl {
	FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #ff7640; FONT-FAMILY: verdana; TEXT-DECORATION: underline
}
.textnsou {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: underline
}
.textgrfs {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #384450; FONT-STYLE: normal; FONT-FAMILY: arial; TEXT-DECORATION: underline
}
.textnoir {
	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}
.texttitre {
	FONT-WEIGHT: bold; FONT-SIZE: 11pt; COLOR: #384450; FONT-FAMILY: verdana
}
.textbleu {
	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #004786; FONT-FAMILY: verdana
}
.cssFormField {
	BORDER-RIGHT: #384450 1px solid; BORDER-TOP: #384450 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #384450 1px solid; BORDER-BOTTOM: #384450 1px solid; FONT-FAMILY: verdana
}
.textrouge {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ff3300; FONT-FAMILY: arial
}
.textgrisf {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #384450; FONT-FAMILY: arial; TEXT-DECORATION: underline
}
A:link {

}
A:hover {
	FONT-WEIGHT: bold
}
A:active {
	FONT-WEIGHT: bold
}
.textgris {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #384450; FONT-FAMILY: arial; TEXT-DECORATION: none
}
.textgrisbold {
	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #384450; FONT-FAMILY: arial
}
.textgrisboldsous {
	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #384450; FONT-FAMILY: arial; TEXT-DECORATION: underline
}
.textrouges {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ff4800; FONT-FAMILY: arial; TEXT-DECORATION: underline
}
.texttitre2 {
	FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #384450; FONT-FAMILY: verdana
}
.textnoir2 {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}
.CSSTopTD {
	BACKGROUND-IMAGE: url(../img/fond.gif); BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #ffffff
}
.textmenu {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #ff6528; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
.textmenug {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ff6528; FONT-STYLE: normal; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
.lienorange {
	FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #ff6528; FONT-FAMILY: verdana; TEXT-DECORATION: underline
}
.normal {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.zone1 {
	FONT-WEIGHT: normal; FONT-SIZE: 9px; WIDTH: 100px
}
.zone2 {
	WIDTH: 300px
}
.textrougeNorm {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #ff4800; FONT-FAMILY: arial
}
.textBleu {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #003399; FONT-FAMILY: arial
}
.textrouge2 {
	FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #ff4800; FONT-FAMILY: arial; TEXT-DECORATION: none
}
.zone3 {
	WIDTH: 300px
}
.obligatoire {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #ff3300; FONT-FAMILY: arial
}
.dateexemple {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #999999; FONT-FAMILY: arial
}
.formulaire {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.formTextarea {
	FONT-WEIGHT: normal; FONT-SIZE: 10pt; COLOR: #000000; FONT-STYLE: italic; FONT-FAMILY: arial
}
.traite {
	FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #ff3300; FONT-FAMILY: arial
}
.textrougeGras {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ff4800; FONT-FAMILY: arial
}
.textblancaide {
	FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #ffffff; FONT-FAMILY: arial
}
.itemliste4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #004E90;
	background-color: #FFFFFF;

}
.itemliste1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #004E90;
	background-color: #E4F2FE;
}