body {
	background			: #F0EFE7 url('images/fond-container-nous-contacter.jpg') fixed repeat top left / cover;
}

.container-nous-contacter {
	width				: 1024px;
	height	 			: 768px;
	margin				: auto;
	padding				: 0;
	border-radius		: 15px;
	opacity				: 0.9;
	filter				: Alpha(opacity=90); /* pour IE8- */
	color				: #060;
	text-shadow			: 1.5px 1.5px yellow;
/*	border				: 2px solid red;*/
}



/*
//	Début de mise en page générale des boutons propres à la rubrique "Nous Contacter"...
*/

.bouton {
	width				: 40px;
	height				: 40px;
	margin				: 20px 10px 0 10px;
	padding				: 3px;
	font				: 14px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color				: yellow;
	background			: #DDD url('images/fond-section-250x750.png') repeat top left;
/*	opacity				: 0.5;
	filter				: Alpha(opacity=50);*/ /* pour IE8- */
}

.bouton:hover {
/*	cursor				: pointer;
	opacity				: 1;
	filter				: Alpha(opacity=100);*/ /* pour IE8- */
}

.bouton.courant {
	cursor				: default;
}

/*
//	... Fin de mise en page générale des boutons propres à la rubrique "Nous Contacter".
*/



/*
//	Début de mise en page de la zone latérale propre à la rubrique "Nous Contacter"...
*/

/*
//	... Mise en page de la barre (verticale) de navigation contextuelle...
*/

aside #nav-contextual-menu {
	position			: absolute;
	top					: 8.75%;
	left				: 0;
	width				: 100%;
	height				: 100%;
/*	border				: 2px solid white;*/
}

/*
//	Nota : La mise en page de l'élément "ul" est défini dans la feuille de style principale.
*/

#nav-contextual-menu ul {
	margin				: 0 0 0 5%;
	padding				: 0;
	width				: 95%;
	height				: 95%;
	list-style-type		: none;
	text-shadow			: none;
/*	border				: 2px solid red;*/
}

#nav-contextual-menu li {
	width				: 60%;
	height				: 10%;
	left				: 0;
	margin				: 0 0 10% 40%;
	padding				: 0;
	vertical-align		: middle;
	overflow			: hidden;
/*	border				: 2px solid red;*/
}

#nav-contextual-menu li:hover {
	width				: 100%;
	margin				: 0 0 10% 0;
}

#nav-contextual-menu li.default {
	width				: 100%;
	margin				: 0 0 10% 0;
}

#nav-contextual-menu li.courant {
	width				: 100%;
	margin				: 0 0 10% 0;
	cursor				: default;
}

#nav-contextual-menu a {
	float				: right;
	width				: 100%;
	height				: 100%;
	text-decoration		: none;
	margin				: 0;
	padding				: 0;
	background			: #DDD url('images/fond-section-250x750.png') repeat 25% 25%;
	border-radius		: 10px 0px 0px 10px;
	color				: black;
	text-align			: center;
/*	border				: 2px solid blue;*/
}

/*
//	... Mise en page des boutons de navigation...
*/

#nav-contextual-menu .bouton {
	margin				: 10px auto;
	padding				: 0;
	background			: none;
	border				: none;
	border-radius		: none;
	box-shadow			: none;
	opacity				: .4;
	filter				: Alpha(opacity=80); /* pour IE8- */
}

#nav-contextual-menu a:hover .bouton {
	opacity				: .7;
	filter				: Alpha(opacity=70); /* pour IE8- */
}

#nav-contextual-menu a.courant .bouton {
	opacity				: 1;
	filter				: Alpha(opacity=100); /* pour IE8- */
}

/*
//	... Fin de mise en page de la zone latérale propre à la rubrique "Nous Contacter".
*/



/*
//	Début de mise en page de la zone centrale propre à la rubrique "Nous Contacter".
*/

/*
//	... Mise en page de coordonnées de DomoGenius...
*/

.coordonnees {
	position			: absolute;
	top                 : 2%;
	left				: 5%;
	width				: 33%;
	height				: 40%;
	color				: black;
	font-size			: 1em; /* 1.1em; */
	font-weight			: bold;
/*	border				: 2px solid white;*/
}

.coordonnees p.raison-sociale {
	margin				: 0;
	color				: #060;
	font-size			: 1.5em;
	font-weight			: bold;
	text-shadow			: 0.5px 1.5px #FF0;
	letter-spacing		: 0.3em;
/*	border				: 2px solid red;*/
}

.coordonnees p.adresse {
	margin				: 0.5em 0;
/*	border				: 2px solid red;*/
}

.coordonnees p.telephone {
	margin				: 0;
	padding				: 0;
	font-style			: italic;
/*	border				: 2px solid red;*/
}

.coordonnees p.courriel {
	margin				: 0;
	font-style			: italic;
/*	border				: 2px solid red;*/
}

/*
//	... Mise en page du QR Code DomoGenius...
*/

.qrcode {
	position			: absolute;
	top                 : 9%;
	left				: 33%;
	width				: 15%;
	height				: 15%;
	color				: black;
	font-size			: 1em; /* 1.1em; */
	font-weight			: bold;
/*	border				: 2px solid white;*/
}

.qrcode img {
	width				: 100%;
/*	border				: 2px solid white;*/
}

/*
//	... Mise en page des instructions pour contacter DomoGenius par téléphone...
*/

.instruction {
	position			: absolute;
	top                 : 4%;
	right				: 5%;
	width				: 40%;
	height				: 40%;
	color				: black;
	font-size			: 1.1em;
	font-weight			: bold;
/*	border				: 2px solid white;*/
}

.instruction p {
	margin				: 0.5em 0;
	text-align			: justify;
/*	border				: 2px solid red;*/
}

/*
//	... Mise en page de la zone de dialogue propre à l'opération courante sur le compte de l'internaute..
*/

.compte {
	position			: absolute;
	top                 : 36%;
	left				: 5%;
	width				: 86%;
	height				: 53%;
	padding				: 2%;
	color				: black;
	font-size			: 1.1em;
	font-weight			: bold;
	border				: 2px solid black;
	border-radius		: 8px;
	box-shadow			: 7px 7px 5px #222;
	overflow			: hidden; 
}

/*
//	... Mise en page de la zone d'instruction propre à l'opération courante sur le compte de l'internaute...
*/

.compte-instruction {
	position			: absolute;
	top                 : 1%;
	left				: 2%;
	width				: 96%;
	height				: 20%;
	margin				: 0;
	padding				: 0;
	overflow			: hidden;
/*	border				: 2px solid white;*/
}

.compte-instruction p {
	padding				: 0;
	color				: black;
/*	border				: 1px solid black;*/
}

	/*
	//	... Mise en page du formulaire propre à l'opération courante sur le compte de l'internaute...
	*/

.compte-form {
	position			: absolute;
	top                 : 21%;
	left				: 2%;
	width				: 96%;
	height				: 48%;
	margin				: 0;
	padding				: 0;
	overflow			: hidden;
/*	border				: 2px solid green;*/
}

		/*
		//	... Mise en page des champs de saisie de type "input"...
		*/

.compte-form input {
	width				: 100%;
	height				: 100%;
	font-size			: 1em;
	border-radius		: 5px;
}

		/*
		//	... Mise en page des champs de saisie de type "select"...
		*/

.compte-form select {
	height				: 100%;
	font-size			: 1em;
	border-radius		: 5px;
}

		/*
		//	... Mise en page des champs de saisie de type "textarea"...
		*/

.compte-form textarea {
	width				: 100%;
	height				: 100%;
	margin				: 0;
	padding				: 0;
	font-size			: 1em;
	border-radius		: 8px;
}

		/*
		//	... Mise en page des évènements concernant les champs de saisie...
		*/

.compte-form input:disabled, select:disabled, textarea:disabled {
	opacity				: 0.75;
	filter				: Alpha(opacity=75); /* pour IE8- */
/*	background-color	: #DDD;*/
}

.compte-form input:focus, select:focus, textarea:focus {
	border				: 2px solid blue;
	box-shadow			: none;
}

.compte-form input:invalid:focus, select:invalid:focus, textarea:invalid:focus,
			 input.invalid:focus, select.invalid:focus, textarea.invalid:focus {
	border				: 2px solid red;
	color				: red;
	background-color	: #FFC;
	box-shadow			: none;
}

.compte-form input:invalid, select:invalid, textarea:invalid,
			 input.invalid, select.invalid, textarea.invalid {
	border				: 1.2px solid red;
	color				: red;
	background-color	: #FF9;
	box-shadow			: none;
}

	/*
	//	... Mise en page des tableaux...
	*/

.compte-form table {
	width				: 99%;
}

	/*
	//	... Mise en page des paragraphes...
	*/

.compte p {
	margin				: 0;
	padding				: 0 0 5px 0;
	text-align			: justify;
}

/*
//	... Mise en page des paragraphes de type "message"...
*/

p.message {
	padding				: 0;
	font-size			: 1em;
	font-weight			: bold;
	color				: black;
/*	border				: 1px solid black;*/
}

/*
//	... Mise en page des paragraphes de la barre d'état résultat...
*/

#barre-etat-resultat p {
	margin				: 3px 5px 0 5px;
	padding				: 0 10px 0 10px;
	font-size			: 0.95em;
	font-weight			: normal;
	font-style			: italic;
	display				: none;
}

/*
//	... Mise en page des paragraphes de type "erreur"...
*/

p.echec {
	color				: red;
}

/*
//	... Mise en page des paragraphes de type "exécution réussie"...
*/

p.succes {
	color				: #000;
}

/*
//	... Mise en page des paragraphes de type "notes"...
*/

p.notes {
	padding				: 0;
	font-size			: .9em;
	font-weight			: normal;
	font-style			: italic;
	color				: black;
/*	border				: 1px solid black;*/
}

/*
//	... Mise en page de la mentions légales CNIL...
*/

#mentions-legales-CNIL {
	position			: absolute;
	top                 : 63%;
	left				: 3%;
	width				: 48%;
	height				: 33%;
	margin				: 0;
	padding				: 0;
	overflow			: hidden;
	font-size			: .7em;
/*	border				: 2px solid black;*/
}

#mentions-legales-CNIL:hover {
	top                 : 55%; /*59%;*/
	width				: 92%;
	height				: 38%; /*33%;*/
	padding				: 5px 10px;
	font-size			: .95em;
	background			: #DDD url('images/fond-section-250x750.png') repeat 25% 25%;
	opacity				: 1;
	filter				: Alpha(opacity=100); /* pour IE8- */
	border-radius		: 15px;
	box-shadow			: 10px 10px 5px #222;
	z-index				: 100; 
	border				: 1px solid black;
}

/*
//	... Mise en page du message résultant de l'exécution de l'opération courante sur le compte de l'internaute...
*/

#barre-etat-resultat {
	position			: absolute;
	display				: none;
	top                 : 71%;
	left				: 3%;
	width				: 48%;
	height				: 0%;
	margin				: 0;
	padding				: 0;
	border-radius		: 0 0 25px 0;
	box-shadow			: 10px 10px 5px #222;
	overflow			: hidden;
/*	border				: 2px solid green;*/
}

/*
//	... L'opération courante s'est terminée avec succès...
*/

#barre-etat-resultat.succes {
	background-color	: #6CF;
/*	border				: 2px solid green;*/
}

/*
//	... L'opération courante s'est terminée par un échec ...
*/

#barre-etat-resultat.echec {
	background-color	: #FF9;
/*	border				: 2px solid green;*/
}


/*
//	... Mise en page de l'historique...
*/

.historique {
	width				: 100%;
	height				: 90%;
/*	border				: 2px solid green;*/
}

.item-historique {
	position			: relative;
	top					: 1em;
	width				: 98%;
/*	border				: 2px solid green;*/
}

.item-historique:nth-of-type(2n) {
	color				: #039;
	font-weight			: normal;
	border	 			: none;
/*	border-top			: 2px solid #039;*/
}

.item-historique:nth-of-type(2n+1) {
	color				: #000;
	font-weight			: normal;
	border-top			: 2px solid #000;
	border-bottom		: 2px solid #000;
}

.item-historique:nth-last-of-type(1) {
	border-bottom		: 2px solid #000;
}

.num-item-historique {
	float				: left;
	width				: 38%;
	height				: 1.5em;
/*	border				: 2px solid green;*/
}

.date-item-historique {
	float				: left;
	width				: 45%;
	height				: 1.5em;
/*	border				: 2px solid green;*/
}

.etat0-item-historique {
	float				: left;
	width				: 15%;
	height				: 1.5em;
	color				: red;
/*	border				: 2px solid green;*/
}

.etat1-item-historique {
	float				: left;
	width				: 15%;
	height				: 1.5em;
/*	border				: 2px solid green;*/
}

.etat2-item-historique {
	float				: left;
	width				: 15%;
	height				: 1.5em;
	color				: green;
/*	border				: 2px solid green;*/
}

.contenu-item-historique {
	clear				: both;
	width				: 99%;
	height				: 1.5em;
	overflow			: hidden;
/*	border				: 2px solid green;*/
}

.open-close-symbol {
	clear				: both;
	width				: 18%px;
	min-height			: 1em; 
	margin				: .5% 40% 2% 40%;
	opacity				: 0.5;
	filter				: Alpha(opacity=50); /* pour IE8- */
/*	border				: 2px solid green;*/
}

.open-close-symbol:hover {
	opacity				: 1;
	filter				: Alpha(opacity=100); /* pour IE8- */
	cursor				: pointer;
/*	border				: 2px solid green;*/
}

/*
//	... Mise en page des notes propres à l'opération courante sur le compte de l'internaute...
*/

#barre-etat-notes {
	position			: absolute;
	top                 : 71%;
	left				: 54%;
	width				: 42%;
	height				: 13%;
	margin				: 0;
	overflow			: hidden;
/*	border				: 2px solid green;*/
}

/*
//	... Mise en page de la barre (horizontale) de navigation propre à l'opération courante sur le compte de l'internaute...
*/

#nav-actions {
	position			: absolute;
	top                 : 85%;
	left				: 54%;
	width				: 42%;
	height				: 12%;
	margin				: 0;
	padding				: 0;
	overflow			: hidden;
/*	border				: 2px solid white;*/
}

#nav-actions nav {
	position			: absolute;
	top					: 0;
	right				: 0;
	margin				: 0;
	padding				: 0;
	width				: 100%;
	height				: 100%;
/*	border				: 2px solid red;*/
}

#nav-actions nav ul {
	float				: right;
	top					: 0;
	right				: 0;
	margin				: 0;
	padding				: 0;
	width				: 100%;
	height				: 100%;
	list-style-type		: none;
/*	border				: 2px solid blue;*/
}

#nav-actions nav li {
	display				: inline;
	height				: 100%;
/*	opacity				: 0.5;
	filter				: Alpha(opacity=50);*/ /* pour IE8- */
}

#nav-actions nav li.default {
/*	opacity				: 1;
	filter				: Alpha(opacity=100);*/ /* pour IE8- */
}

#nav-actions nav li:hover {
/*	opacity				: 1;
	filter				: Alpha(opacity=100);*/ /* pour IE8- */
}

#nav-actions nav a {
	float				: right;
	width				: 20%;
	height				: 100%;
	text-decoration		: none;
	margin				: 0 6% 0 6%;
	padding				: 0;
	border-radius		: 10px 0px 0px 0px;
	color				: black;
	text-align			: center;
/*	border				: 2px solid blue;*/
}

#nav-actions .bouton {
	margin				: auto;
	padding				: 0;
	background			: none;
	border				: none;
	border-radius		: none;
	box-shadow			: none;
	opacity				: .4;
	filter				: Alpha(opacity=40); /* pour IE8- */
}

#nav-actions a:hover .bouton {
	opacity				: .8;
	filter				: Alpha(opacity=100); /* pour IE8- */
	cursor				: pointer;
}

#nav-actions a.default .bouton {
	opacity				: 1;
	filter				: Alpha(opacity=70); /* pour IE8- */
}
#nav-actions a.default:hover .bouton {
	opacity				: 1;
	filter				: Alpha(opacity=70); /* pour IE8- */
}