html {
    color: #222;
}
html, body {
    height: 100%;
    margin: 0; padding: 0;
}
body {
    display : table;
    width: 100%;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
.centrer{
	text-align:center;
}
.aDroite{
	text-align:right;
}
.aGauche{
	text-align:left;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

body {
	font-family: 'Exo 2', sans-serif;
	font-style:normal;
	font-weight:normal;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ===================
    ALL
   =================== */

.header-container {	
	border-bottom: 20px solid #1B5A6D;
	/* ancien :	border-bottom: 20px solid #80ae9c;
	vert pomme : border-bottom: 20px solid #b4c34b;
	violet : border-bottom: 20px solid #8980ac;
	bleu-gris: border-bottom: 20px solid #6e95ac;
	bleu voyage : border-bottom: 20px solid #4fa6af;
	vert d'eau : border-bottom: 20px solid #4fb193;
	border-bottom: 20px solid #4fa1b1;*/
	font-size:1em;
	background-image:url(../img/contemporary_china.png);
	background-position:center center;
	background-repeat:repeat;
	padding:10px;
}

.footer-container {
    border-top: 15px solid #333;
	background-image:url(../img/grey_wash_wall.png);
	background-position:center center;
	background-repeat:repeat;
	clear:both; /* le place sous les flottants */
/* Pour le placer toujours en bas de page */

	display : table-row;
    height: 100px;	
	font-size:1.2em;
}


.title {
    color:#333333;
}
/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* =====================================================================
    						MOBILE
   ===================================================================== */
/* -- MOBILE MENU DEROULANT -- */
nav {
	font-size:1em;
	margin:25px 0 0 0;
	padding:0;
	float: none;
	width:100%;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
	
	max-height: 20em;
	overflow: visible;
	
	/* translate with hardware acceleration */
	transform: translateZ(0);
	-webkit-transition: max-height .4s;
	transition: max-height .4s, overflow .4s;
	will-change: max-height, overflow;
}
nav ul li {
	width:100%;
	background-color: #666666;
	color: #FFFFFF;
	display:block;
	margin:0;
	padding:0;
}
nav ul li a {	
    display: block;
    margin-bottom: 2px;
    padding: 10px 0;
    text-align: center;	
	color:#FFFFFF;
	text-decoration:none;
}
nav ul li a:focus, nav ul li a:active {
	background-color: #CCCCCC;
	color:#333333;
	border-bottom:none;
}

/* Lorsque l'on ferme nav */
	nav.is-closed ul {
	max-height: 0;
	overflow: hidden;
}

/* Style du bouton nav */	
nav > button {
	position: absolute;
	top: .8rem;
	right: 1rem;
	z-index: 1;
	height: 4rem;
	width: 4rem;
	background-color: transparent;
	padding: 0;
	outline: 0;
	border: 1px solid #333;
	border-radius: 50%;
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-transition: -webkit-transform .2s;
	transition: transform .2s;
}

/*  Pour firefox qui met une bordure */	
nav > button::-moz-focus-inner {
 border: 0;
}
nav > button::after, nav > button::before {
	content: "";
	position: absolute;
	top: 15%;
	right: 40%;
	bottom: 15%;
	left: 40%;
	background-color: #333;
	border-radius: 10px;
	-webkit-transition: -webkit-transform .2s;
	transition: transform .2s;
}
nav > button::before {
	top: 40%;
	right: 15%;
	bottom: 40%;
	left: 15%;
}
/* Theming opened nav button */	
	nav:not(.is-closed) > button,  nav:not(.is-closed) > button::before {
	-webkit-transform: rotate(90deg) translateZ(0);
	-ms-transform: rotate(90deg) translateZ(0);
	transform: rotate(90deg) translateZ(0);
}
/* Hide alternate text except from screen readers */
	.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px;
	width: 1px;
}   
   

/* -- MOBILE Main -- */
.main {
    padding: 30px 0 60px 0;
	font-size:1.1em;
}

.main p{
	text-indent:15px;	
}
.main h1 {
	text-align:center;
	font-size: 1.6em;
	/*color:#5A5AA5;*/
	color:#1789AE;
	text-shadow: 1px 1px 0 rgba(10, 100, 120, 0.5);
}
.main h1 a, .main h1 a:visited{
	color:#1789AE;
	text-decoration:none;	
}
.main h1 a:hover{
	color:#009999;
}
.main h2 {
	font-size: 1.4em;
	color:#99CC33;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
	margin:25px 0 0 0;
}
.main h3 {
	font-size: 1.3em;
	color:#333333;
}
.main header{
	font-size:1.1em;
	padding-bottom:15px;
}
.main header p{
	font-size:1.1em;
}

/* -- MOBILE Main Article et Aside -- */
.main aside {
	float: right;
	width: 50%;
	background-color:#CCCCCC;
	font-size:0.8em;
    color: #333;
    padding: 10px 15px;
}
.main aside h1{
	font-variant:small-caps;
	font-size:1.3em;
	font-weight:bold;
	color:#993300;
	background-color:#EEE;
	padding:3px 5px 5px 5px;
	text-shadow: 0 1px 1px rgba(100, 100, 100, 0.8);
}
.main aside h2{
	font-variant:normal;
	font-size:1.3em;
	font-weight:bold;
    color: #FFFFFF;
	border-bottom:2px dotted #FFFFFF;
	text-align:center;
	text-shadow: 0 1px 1px rgba(100, 100, 100, 0.8);
}

.main article {
	float: left;
	width: 48%;
	font-size:0.95em;
	font-style:normal;
	font-weight:normal;
}

.main article ul{
	padding:0 0 0 10px;
	margin:0.5em;
}
.main article h2{
	margin-top:5px;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
	text-align:center;
	font-size:0.8em;
	line-height:2em;
	font-weight:normal;
}

.footer-container footer h2 {
	font-size:1em;
	font-weight:bold;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}
.footer-container footer a, .footer-container footer a:visited{
	color:#D5FFF3;
	text-decoration:none;
	border-bottom:2px dotted #D5FFF3;
}
.footer-container footer a:focus, .footer-container footer a:hover {
	color:#91E6CA;
	border-bottom:2px dotted #FFF;
}
.footer-container footer i{
	padding-right:5px;	
	font-size:1.1em;
}
.troisColonnesFooter {
	display:block;
	width:100%;
	margin:0;
	padding:10px;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}
.colonneFooterAdresse {
	display:inline;
	width:100%;
	margin:5px;
	font-size:1.2em;
	font-weight:bold;
}
.colonneFooter {
	display:none;
}
/* MOBILE Icones rondes */

.iconesRondes {
	text-align: center;
}
.iconesRondes h2 {
	/*font-size: 2em;*/
	line-height: 1.2em;
	margin: 0.5em 0 0.75em 0;
	font-family: 'Exo 2', sans-serif;
	color:#2E8FAF;
	font-size:1.8em;
}
.iconesRondes header > p {
	margin: 0 0 1.5em 0;
	font-size:1.1em;
}
.icon {
	position: relative;
	text-decoration: none;
}
.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}
.icon > .label {
	display:none;
}

ul.special li {
	/*	margin: 0.5em;*/
	position: relative;
	display: inline-block;
	margin: 0.5em 0.5em 2em 0.5em;
	top: 0;
	font-weight:bold;
	line-height:2.5em;
}
ul.special li:hover {
	top: 0;
}
ul.special li:hover a {
		background: #b9d2ce;
	}	
ul.special a {
	display: block;
	position: relative;
	background: #c1cac5;
	width: 6em;
	height: 6em;
	border-radius: 3.75em;
	outline: 0;
}
ul.special a:before {
	/*font-size: 48px;*/
	position: absolute;
	width: 128px;
	height: 128px;
	font-size: 48px;
	line-height: 128px;
	left: 50%;
	top: 50%;
	margin-top: -64px;
	margin-left: -64px;
	color: #fff;
	text-align: center;
}

/* -- MOBILE Icones rondes de la page TECHNIQUES -- */
#techniques .special a {
	background-color: #F1AC50;
}	
#techniques .special li:hover a {
	background-color: #ED961F;
}
/* -- MOBILE Icones rondes de la page REALISATIONS -- */
#realisations .special a {
	background-color: #348CBC;
}
#realisations .special li:hover a {
	background-color: #006699;
}	

/* -- MOBILE Affichage en 3 colonnes -- */
.troisColonnes {
	display:block;
	width:100%;
	margin:0;
	padding:10px;
}
/* -- MOBILE - 3 colonnes du Footer -- */
.troisColonnesFooter .colonneFooter, .troisColonnesFooter .colonneFooterAdresse, .troisColonnesFooter .colonneFooterIcones{
	font-size:1em;	
}
.colonneFooterIcones h2{
	margin-top:10px;
	padding-top:10px;
	border-top:1px dotted #FFF;
}
.colonneFooterIcones ul.special li:hover {
	top: 0px;
}
.colonneFooterIcones ul.special li:hover a {
	background: #b9d2ce;
}
.colonneFooterIcones ul.special li{
	width: 15%;
	text-align:center;
}
.colonneFooterIcones ul.special a {
	background-color: #FFFFFF;
	width: 4em;
	height: 4em;
	border-radius: 4em;
	outline: 0;
	margin:0 0 0 5px;
}
.colonneFooterIcones ul.special a:before {
	position: absolute;
	width: 30px;
	height: 30px;
	font-size: 28px;
	line-height: 10px;
	left: 50%;
	top: 50%;
	margin-top: -5px;
	margin-left: -15px;
	color:#069;
	text-align: center;
}	

/* -- MOBILE Bouton "revenir en haut de page" -- */
.top_link{
	position:fixed;
	right:40px;
	bottom:150px;
	display:none;
	padding:20px;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
	opacity:0.9;
	z-index:2000;
	background-color:#CCC;
	box-shadow: 3px 3px 6px #999;
}
.top_link:hover, top_link:active{
	background-color:#99CC99;
}
/* -- MOBILE : image de la page PRESENTATION --  */
.imgConception{
	float:right;
	width:30%;
	padding:10px;
}

/* -- MOBILE - Plan du site -- */
.deuxColonnes{
	display: block;
	width: 100%;
	margin:0 auto;
	border-collapse: separate;
	background-color:#ECF3F4;
	/*font-family:'Exo 2', sans-serif;*/
}
.plan{
	display:block;
	width: 100%;
	padding: 20px;
	text-align:left;
	font-size:1em;
}
ul.plan{
	list-style:none;
	line-height:2em;
}
ul.plan li{
	padding:5px 20px;
}
ul.plan li a, ul.plan li a:visited{
	color:#009999;
	text-decoration:none;
	font-weight:bold;
	font-variant:small-caps;
	font-size:1.2em;
}
ul.plan li a:hover, ul.plan li a:focus{
	color:#0CC;
}

/* Sous menu - plan */
ul.plan ul{
	list-style:none;
}
ul.plan ul li{
	padding-left:10px;
}
	
ul.plan ul li a, ul.plan  ul li a:visited{
	color:#033;
	text-decoration:none;
	font-variant:normal;
	font-weight:bold;
	font-size:1em;
}
ul.plan ul li a:hover, ul.plan  ul li a:focus{
	color:#060;	
}

/* -- MOBILE Positionnement à droite ou à gauche --*/
.droite{
	float:right;
	padding:5px;
}
.gauche{
	float:left;
	padding:5px;
}

/* -- MOBILE Formulaire contact -- */
form div + div {
    margin-top: 0.6em;
}
textarea {
    vertical-align: top; /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    height: 5em;    /* Pour donner assez d'espace pour entrer du texte */
	width:90%;
    resize:both;    /* Pour permettre de redimensionner le champ - ne marche pas avec tous les navigateurs  */

}
/* -- MOBILE Formulaire Réalisations (admin) -- */
#formReal{
	width:90%;
}
.affichageReal li{
	padding-top:10px;
	color:#006699;
	font-weight:bold;
}
.affichageReal li a,.affichageReal li a:visited{
	color:#339999;
	font-weight:normal;
}
.affichageReal li a:hover,.affichageReal li a:focus{
	color:#33CCCC;
}
.confirmation{
	padding:10px;
	background-color:#069;
	color:#FFF;
	width:90%;
	text-align:center;
}
.erreur{
	padding:10px;
	background-color:#900;
	color:#FFF;
	width:90%;
	text-align:center;
}


/* -- MOBILE Mentions légales -- */
#mentions{
	font-size:0.9em;	
}

/* **************************************************************************
   ***********              ---------------------                 ***********
   ***********					MEDIA QUERIES					  ***********
   ***********              ---------------------                 ***********
   ************************************************************************** */
   
/* =========================================================
	TABLETTE: Ecrans supérieurs à 645px (menu sur 2 lignes)
   ========================================================= */
@media only screen and (min-width: 645px) {
.header-container, 
.main aside {
	-webkit-box-shadow: 0 5px 10px #aaa;
	   -moz-box-shadow: 0 5px 10px #aaa;
			box-shadow: 0 5px 10px #aaa;
}
.footer-container{
	-webkit-box-shadow: 0 -4px 8px #aaa;
	   -moz-box-shadow: 0 -4px 8px #aaa;
			box-shadow: 0 -4px 8px #aaa;
}	
.title {
	float: left;
	padding:5px;
}
.header-container .wrapper{
	width:100%;
	margin:0;
}

/* ---- TABLETTE(superieur à 645px) - Colonnes du FOOTER ---- */
.troisColonnesFooter {
	display: table;
	width: 100%;
	border-collapse: separate;
	font-family:'Exo 2', sans-serif;
}
.colonneFooter{
	display: table-cell;
	width: 28%;
	padding: 20px;
	text-align:left;
	font-size:1.1em;
}
.colonneFooter ul{
	list-style:none;
	padding:0 0 0 10px;
	line-height:2.2em;
}
.colonneFooterAdresse{
	display: table-cell;
	width: 28%;
	padding: 20px;
	text-align:left;
	font-weight:bold;
	font-size:1.2em;	
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}
.colonneFooterIcones{
	display: table-cell;
	width: 44%;
	padding: 20px;
	text-align:center;
	font-size:1em;
	line-height:2.5em;
}
.colonneFooterIcones ul.special li{
	margin:0 15%;
}
.colonneFooterIcones h2{
	margin-top:0;
	padding-top:0;
	border-top:none;
}

/* ----------- TABLETTE(superieur à 645px) - MENU sur 2 lignes ----------- */
nav {
	font-size:1em;
	margin: 0;
	padding:0;
	float: right; /* On place le menu à droite, sur le header */
	width:66%;
}
nav ul {
	margin:0;
	padding:0;
	list-style:none;/* Suppression des puces */
	transition:none;
	transform:none;
	
	/*max-height: 20em;
	overflow: visible;*/
}
nav ul li {
	/* Ajout de marges entre chaque élément, en pourcentage pour que ceux-ci s'adaptent en fonction de la largeur d'écran*/	
	width:32%;
	height:55px;
	margin:0 0 2px 2px;
	display:inline-block; /* Positionnement des éléments de liste les uns à côté des autres, sous forme de blocs */
	
	text-align:center;
	line-height: 1.3em; /* espacement entre 2 lignes */
}
nav ul li a{
	height:100%;
}
nav.is-closed ul {
	max-height: 15em;
}
/* ------ TABLETTE (supérieur à 645px) - SOUS MENU Réalisations ------ */
nav #sousMenu_real {
	font-size:1em;
	margin: 0;
	padding:0;
	float: right; /* On place le menu à droite */
	width:auto;
}
#sousMenu_real ul li {
	/* Ajout de marges entre chaque élément, en pourcentage pour que ceux-ci s'adaptent en fonction de la largeur d'écran*/	
	margin:0 0 2px 2px;
	background-color:#EEE;
	border-bottom:3px solid #CCC;
	display:inline-block; /* Positionnement des éléments de liste les uns à côté des autres, sous forme de blocs */
	height:35px;
	text-align:center;
	line-height: 1.3em; /* espacement entre 2 lignes */
	width:auto;
}
#sousMenu_real ul li a{
	padding:5px 12px;
	border:none;
	color:#333;
}
/* -- TABLETTE (supérieur à 645px) - Plan du site -- */
.deuxColonnes{
	display: table;
	width: 100%;
}
.plan{
	display: table-cell;
	width: 50%;
}

}

/* ======================================================
	STANDARD: Ecrans supérieurs à 865px (menu horizontal)
   ====================================================== */
@media only screen and (min-width: 865px) {
.header-container .wrapper {
    width: 100%;
}
/* -- STANDARD (Ecrans supérieurs à 865px) : Menu horizontal -- */
nav {
	font-size:1.15em;
	margin: 40px 2px 2px 2px;
	width:72%;
	max-width:85%;	/* La largeur d'adapte à l'écran mais ne doit jamais faire plus de 85% du header, pour ne pas empiéter sur le logo */
}

nav ul li {
	width:auto;
	background-color:transparent;
	margin: 0;
	padding:5px;
}
nav ul li a {
	display:block; /* Pour que le lien se comporte comme un bloc et qu'il ne soit pas uniquement cliquable sur le texte */
	color: #333333;
	text-shadow: 0 1px 0 rgba(102, 102, 102, 0.6);/* Effet d'ombre sur le lien */
	background-color:none;
	border-bottom:3px dotted #CCC;
	/* Animation : la couleur changera en 0.5s, lorsque le curseur passera sur le lien, mais aussi quand il sortira du lien */
	 
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;

}
nav ul li a:hover, nav ul li a:focus, nav ul li a:active {
	color: #43B67C;
	text-shadow: 0 1px 0 rgba(20, 20, 20, 0.6);
	border-bottom:3px double #80ae9c;
}
nav.is-closed ul {
	max-height: 5em;
}
/* -- STANDARD (Ecrans supérieurs à 865px) : SOUS-MENU Réalisations -- */
#sousMenu_real {
	font-size:1em;
	margin: 0 0 30px 0;
	padding:0;
	float: right; /* On place le menu à droite*/
	width:98%;
}
#sousMenu_real span{
	font-size:1.1em;
	font-variant:small-caps;
	color:#099;
}
#sousMenu_real ul{
	display:inline;	
}
#sousMenu_real ul li {
	/* Ajout de marges entre chaque élément, en pourcentage pour que ceux-ci s'adaptent en fonction de la largeur d'écran*/	
	margin:0 0 2px 2px;
	background:none;
	border-bottom:none;
	border-right:2px solid #EEE;
	display:inline-block; /* Positionnement des éléments de liste les uns à côté des autres, sous forme de blocs */
	
	height:40px;
	text-align:center;
	line-height: 1.3em; /* espacement entre 2 lignes */
}
#sousMenu_real ul li a, #sousMenu_real ul li a:visited{
	padding:5px 15px;
	border:none;
	color:#066;
}
#sousMenu_real ul li a:hover, #sousMenu_real ul li a:active{
	color:#99CC33;
	border-bottom:2px dotted #99CC33;
	transform : translate(0, -3px);
	-webkit-transform : translate(0, -3px);
	-moz-transform : translate(0, -3px);
	-ms-transform : translate(0, -3px);
	-o-transform : translate(0, -3px);
}

/* -- STANDARD (Ecrans supérieurs à 865px) : MAIN --*/
.main h1 {
font-size: 2em;
color:#1789AE;
text-shadow: 1px 1px 0 rgba(10, 100, 120, 0.5);
}
/* -- STANDARD (Ecrans supérieurs à 865px) : MAIN Article et Aside --*/
.main aside {
	width: 43%;
	font-size:0.9em;
    padding: 10px 20px;
}
.main article {
	width: 55%;
	font-size:1em;
}
.main article ul{
	padding:0 0 0 20px;
	margin:0.8em;
}
/* -- STANDARD (Ecrans supérieurs à 865px) : Icones rondes -- */
.icon {
	position: relative;
	text-decoration: none;
}
.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}
.icon > .label {
	display:none;
}
.iconesRondes {
	text-align: center;
}
.iconesRondes .special {
	margin: 0 0 2em 0;
}
.iconesRondes h1 {
	font-family: 'Exo 2', sans-serif;
	margin: 0.4em 0 1em 0;
	color:#2E8FAF;
}
.iconesRondes header > p {
	margin: 0 0 3.5em 0;
}
.iconesRondes p {
	font-size: 1.05em;
	line-height:1.6em;
}

ul.special {
	cursor: default;
}
ul.special li {
	-moz-transition: top .15s ease-in-out;
	-webkit-transition: top .15s ease-in-out;
	-ms-transition: top .15s ease-in-out;
	transition: top .15s ease-in-out;
	position: relative;
	display: inline-block;
	margin: 0 1.5em 2.5em 1.5em;
	top: 0;
	font-weight:bold;
	line-height:3em;
}
ul.special li:hover {
	top: -10px;
}
ul.special li:hover a {
	background: #b9d2ce;
}
ul.special a {
	-moz-transition: background-color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out;
	-ms-transition: background-color .2s ease-in-out;
	transition: background-color .2s ease-in-out;
	display: block;
	position: relative;
	background-color: #c1cac5;
	width: 10em;
	height: 10em;
	border-radius: 6em;
	outline: 0;
}
ul.special a:before {
	position: absolute;
	width: 128px;
	height: 128px;
	font-size: 90px;
	line-height: 128px;
	left: 50%;
	top: 50%;
	margin-top: -64px;
	margin-left: -64px;
	color: #fff;
	text-align: center;
}

/* ----- STANDARD (Ecrans supérieurs à 865px) - Affichage en 3 colonnes ---- */
.troisColonnes {
	display: table;
	width: 100%;
	border-collapse: separate;
	font-family:'Exo 2', sans-serif;
}
.colonne{
	display: table-cell;
	width: 33.3333%; /* 100%/3 = 3 colonnes */
	padding: 20px;
	text-align:left;
	font-size:1em;
}
.colonneAdresse{
	display: table-cell;
	width: 33.3333%; /* 100%/3 = 3 colonnes */
	padding: 20px;
	text-align:left;
	font-weight:bold;
	font-size:1.2em;	
}
/* -- STANDARD (Ecrans supérieurs à 865px) : image de la page Presentation --  */
.imgConception{
	float:none;
	width:auto;
}

/* -- STANDARD (Ecrans supérieurs à 865px) : 3 Colonnes du FOOTER -- */
.troisColonnesFooter .colonneFooter, .troisColonnesFooter .colonneFooterAdresse, .troisColonnesFooter .colonneFooterIcones{
	font-size:1.1em;	
}

.colonneFooterIcones ul.special li:hover {
	top: 0px;
}
.colonneFooterIcones ul.special li:hover a {
	background: #b9d2ce;
}
.colonneFooterIcones ul.special li{
	/*width: 15%;*/
	margin:0 10px;
	text-align:center;
}
.colonneFooterIcones ul.special a {
	background-color: #FFFFFF;
	width: 4em;
	height: 4em;
	border-radius: 4em;
	outline: 0;
	margin:0 0 0 0px;
}
.colonneFooterIcones ul.special a:before {
	position: absolute;
	width: 30px;
	height: 30px;
	font-size: 28px;
	line-height: 10px;
	left: 50%;
	top: 50%;
	margin-top: -5px;
	margin-left: -15px;
	color:#069;
	text-align: center;
}	

/* -- STANDARD (Ecrans supérieurs à 865px) - Plan du site -- */
.deuxColonnes{
	width: 80%;
	/*ackground:none;*/
}
.plan{
	width: 40%;
}

}

/* =====================================================
	WIDE: Ecrans supérieurs à 1140px (menu horizontal)
   ===================================================== */

@media only screen and (min-width: 1140px) {
.wrapper, .header-container .wrapper {
	  width: 1026px; /* 1140px - 10% for margins */
	  margin: 0 auto;
}
/* -- WIDE (Ecrans supérieurs à 1140px) : Menu horizontal -- */
nav {
	font-size:1.15em;
	margin: 45px 2px 2px 2px;
	width:72%;
	text-align:right;
	max-width:85%;	/* La largeur d'adapte à l'écran mais ne doit jamais faire plus de 85% du header, pour ne pas empiéter sur le logo */
}
nav ul li {
	width:auto;
	background-color:transparent;
	margin: 0;
	padding:5px 12px;
}
.title{
	padding-top:10px;
	padding-bottom:0px;
}
}

/* =====================================================
   ========			HELPERS classes				========
   ===================================================== */
/*
.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

*/
.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* =====================================================
   ====				Print styles					====
   ===================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}