.boite-noire
{
	display: table;
	padding: 0.5rem 1rem 0.5rem 1rem;
	border: 1px solid #000000;
}
.chevron-petit-bleu:before
{
	content: ' ' url(../images/icons/chevron-petit-bleu.png);
	margin-right: 0.5rem;
	vertical-align: middle;
}
.chevron-gros-bleu:before
{
	content: ' ' url(../images/icons/chevron-gros-bleu.png);
	margin-right: 1rem;
	vertical-align: middle;
}
.lien-bleu
{
	text-decoration: none;
	color: #02aef0;
	background-color: none;
	padding: 0px;
}
.lien-bleu:hover
{
	text-decoration: none;
	background-color: #02aef0;
	color: #ffffff;
	padding: 0.5rem 1rem 0.5rem 1rem;
}
.lien-bleu-fonds
{
	text-decoration: none;
	background-color: #02aef0;
	color: #ffffff;
	padding: 0.5rem 1rem 0.5rem 1rem;
}
.lien-bleu-fonds:hover
{
	text-decoration: none;
	background-color: none;
	color: #02aef0;
	padding: 0px;
}
.chevron-precedent:before
{
	content: url(../../../images/icons/image.gif);
	width: 1.2rem;
	margin: 0.2rem 0.5rem 0 0;
}
.bouton-rond 
{
	color: #fff;
	display: inline-block;
	width: 8.8rem;
	height: 6.8rem;/*+padding*/
	border-right: 2.5rem;
	background-color: #97c652;
	vertical-align: middle;
	padding-top:2rem;
	-webkit-border-radius:10rem;
	-moz-border-radius:10rem;
	-o-border-radius:10rem;
	border-radius:10rem;
	text-decoration: none;
}
.custom.onglet-droit
{
	position: fixed;
	right: 10px;
	top: 15rem;
	z-index: 9999;
	width: 40px;
	padding-left: 0.5rem;
	padding-top: 0.5rem;
	background: #8D9AA7;
	opacity: 0.7;
}
.moduletable.onglet-bas
{
padding-top: 1rem;
text-align: center;
}
.onglet-bas
{
display: none;
}
.onglet-droit img
{
width: 35px;
}
.onglet-bas img
{
width: 35px;
}
.onglet-gauche
{
	position: fixed;
	left: 0px;
	top: 45rem;
	z-index: 9999;
	width: 3rem;
	padding-left: 0.5rem;
	padding-top: 0.5rem;
	background: pink;
}
.moduletable.ariane
{
	position: fixed;
	top: 0.2rem;
	left: 13rem;
	z-index: 99998;
	font-size: 1.2rem;
	color: #000000;
}
.moduletable.ariane a
{
	color: #2C8D24;
}
.moduletable.ariane a:hover
{
	color: #7b7b7b;
}
/********************************************                              habillage       ********************************/
.habillage-article
{
	color: #3d3d3d;
	font-size: 1.4rem;
	padding-top: 3rem;
	font-family: 'open_sansregular';
	padding-left: 1rem;
}
.habillage-article p 
{
		line-height: 3rem;
}
.lire-la-suite
{

}

.button1 
{
color: #b7a76d;
border:2px solid #b7a76d;
font-size: 1.2rem;
padding: 0.5rem 1rem;
transition: all 0.4s ease-out;
text-transform: uppercase;
}
.button1:hover
{
	background-color:  #b7a76d !important;
	color: white !important;
}
.habillage-article .button2 
{
    color: white;
    border: 3px solid white;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    font-size: 1.4rem;
    transition: all 0.4s ease-out;
}
.button3 
{
	border: 3px solid rgba(183, 167, 109,0.9);
    font-family: 'open_sanssemibold';
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    box-shadow: 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
	-moz-box-shadow: 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
	transition: all 0.4s ease-out;
	 color: rgba(183, 167, 109,0.9);
}
.button3:hover 
{
	box-shadow: none;
	box-shadow: inset 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
background: #b7a76d;
color: white;

}
.habillage-article .button2:hover
{
background-color:  white;
color: #0f3c6c;	
}
.habillage-module
{
	padding-right: 1rem;
	box-sizing: border-box;
}

div.article-habillage 
{
font-family: 'open_sansbold';
padding: 1rem;
}
div.article-habillage h1 
{
text-align: center;
color: #13203d;
font-size: 3rem;
line-height: 4rem;
text-transform: uppercase;
}
div.habillage-article hr.trait 
{
width:20%;
border: 2px solid  #766b45;
margin: auto;
}
div.habillage-article hr.trait2
{
width:10%;
border: 2px solid  #0f3c6c;
margin: auto;
}
img.article-img-grande
{
float:none !important;
width: 100% !important;
margin: 1rem !important;	
}
div.article-fond-gris 
{
width: 75%;
text-align: center;
background: rgba(162, 162, 162, 0.28);
padding: 2rem;
margin: 1rem auto;
}
div.habillage-article h3
{
font-size: 4.5rem;
text-transform: uppercase;
text-align: left;
color: #3d3d3d;
font-family: 'open_sanslight';
line-height: 5rem;
margin-bottom: 0.5rem;
}
div.habillage-article h3 span
{
font-family: 'open_sanssemibold';
color:#b7a76d;
}
div.habillage-article h1
{
font-size: 4.5rem;
text-transform: uppercase;
text-align: left;
color: #3d3d3d;
font-family: 'open_sanslight';
line-height: 5rem;
margin-bottom: 0.5rem;
}
div.habillage-article h1 span
{
font-family: 'open_sanssemibold';
color:#b7a76d;
}
div.habillage-article .titre2 
{
text-align: center;
color: #0f3c6c;
}
div.habillage-article .titre2 span 
{
color: #0f3c6c;
}
div.habillage-article h4 
{
font-family: 'open_sansbold';
font-size:2rem;
text-transform: uppercase;
color: #0f3c6c;
margin-bottom: 0.5rem;
line-height: 2.5rem;
}
div.habillage-article h4 span
{
	font-family: 'open_sansregular';
}
div.habillage-article h5
{
font-size: 4.5rem;
text-transform: uppercase;
text-align: left;
color: #0f3c6c;
font-family: 'open_sanslight';
line-height: 5rem;
}
div.habillage-article h5 span
{
font-family: 'open_sanssemibold';
color: #0f3c6c;	
}
#wrapper .habillagefloat 
{
box-sizing: border-box;
padding-left: 3rem;
float: left;
width: 50%;
background: ;
border: ;
}
#wrapper .habillagefloat2 
{
	width: auto;
	float: left;
}
#wrapper .habillagefloat3 
{
float: left;
}
#wrapper .habillagefloat4 
{
float: left;
    margin-top: 2rem;
    width: 70%;
    background: #dadada;
    box-sizing: border-box;
    padding: 3rem;
    border-radius: 0px 10px 10px 10px;
}
#wrapper .habillagefloat5
{
float: left;
width: 45%;
box-sizing: border-box;;
}
#wrapper .habillagefloat6
{
float: left;
width: 55%;
 padding-left: 10rem;
 box-sizing: border-box;
}
#wrapper .habillagefloat5 .span1
{
font-family: 'open_sanssemibold';
font-size: 1.4rem;
}
#wrapper .habillagefloat2 h3 
{
    padding-right: 2rem;
    margin-right: 2rem;
}
#wrapper .habillagefloat img 
{
	float: right;
}
#wrapper .habillagefloatcentrer
{
box-sizing: border-box;
padding: 25px;
float: left;
width: 50%;
background: rgba(162, 162, 162, 0.28);
border: 8px solid white;
}
div.habillageCentrer 
{
text-align: center;
padding: 2rem;
box-sizing: border-box;
padding-bottom: 3rem;
}
div.habillageCentrer p
{
	text-align: justify;
}
div.habillageCentrer h4 a
{
	font-size: 1.6rem;
	color: #766b45;
	font-family: 'open_sansbold';
	transition: all 0.4s ease-out;
}
div.habillageCentrer h4 a:hover
{
	    border-bottom: 3px solid #766b45;
	    padding-bottom: 0.6rem;
}
div.habillageCentrer h4 span
{
	font-family: 'open_sansregular';
}
div.habillageCentrer figure 
{
	height: 180px;
}
#wrapper .habillageCentrer p
{
margin-top:10px;
}

#wrapper .habillage2 span 
{
font-family: 'open_sanssemibold';
color: #13203d;
font-size: 1.4rem;
}
div.article-habillage p
{
font-family: 'open_sansregular';
font-size: 1.4rem;
}
#wrapper .habillagefloat p
{
line-height: 31px;
}
#wrapper .habillagefloat p span 
{
	font-family: 'open_sanssemibold';
}
#wrapper .main_cat_title 
{
font-family: 'open_sansbold';
color: #13203d;
text-align: center;
margin: 0 auto;
width: 60%;
font-size: 3rem;
text-transform: uppercase;
margin-bottom: 33px;
}

#wrapper .habillageTexte2 h5 
{
font-size: 1.5rem;
text-transform: uppercase;
color: #314a82;
font-family: 'open_sansbold';
}
.habillage-article-blog 
{
font-family: 'open_sansregular';
font-size: 1.2rem;
color:#3d3d3d;
}
.habillage-article-blog .trait
{
	width: 10%;
	border-bottom: 3px solid #0f3c6c;
	margin: auto;
}

.habillage-article .titre-bandeau 
{
	  width: 50%;
    margin: auto;
}

.habillage-article .titre-bandeau h3 
{
	text-align: right;
	padding-right: 2rem;
	color: white;
}
.habillage-article .titre-bandeau h3 span
{
	color: white;
}

.habillage-liste ul 
{
	font-family: 'open_sanslight';
	color: white;
	text-transform: uppercase;
	font-size: 1.2rem;
}
.habillage-liste ul li 
{
	list-style: none;
	color: white;
	margin-bottom: 2rem;
}
.habillage-liste ul li a
{
	color: white;
}
.habillage-liste ul li a:hover 
{
	color:#b7a76d;
}
.habillage-liste span 
{
	font-family: 'open_sansregular';
	font-size: 1.4rem;
	color: white;
}
.habillage-liste p 
{
	color: #a7a7a7;
	font-family: 'open_sanslight';
}
.habillage-article-largeur 
{
	width: 76%;
	margin: auto;
}
.habillage-article ul 
{
	padding-left: 5rem;
    margin-top: 0.5rem;
}
.habillage-article ul li 
{
	margin-bottom: 0.6rem;
}
.habillage-article ul span
{
	font-family: 'open_sanssemibold';
}
.habillage-article video 
{
	width: 100%;
	height: auto;
}
.habillage-article-blog
{

}
.habillage-article-blog figure 
{
	
	text-align: center;
}
.habillage-article-blog p
{
	width:auto;
	box-sizing: border-box;
	padding-top: 1rem;
	font-family: 'open_sansregular';
	font-size: 1.2rem;
	line-height: 26px !important;	
}
.renitialisation
{
	font-family: "open_sanslight";
    font-size: 1.5rem;
    margin-right: 2rem;
    background: #b7a76d;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    color: white;
    transition: all .4s ease-out;
    box-shadow: 0px 1px 0px 1px rgba(121, 111, 74, 0.64);
    -moz-box-shadow: 0px 1px 0px 1px rgba(121, 111, 74, 0.64);
    -webkit-box-shadow: 0px 1px 0px 1px rgba(121, 111, 74, 0.64);
}
.renitialisation:hover
{

	 box-shadow: inset 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(121, 111, 74, 0.5);
    color:#796f4a; 
}
.signup, .login
{
	/*color: white;*/
	color: #b7a76d;
	text-transform: uppercase;
	font-size: 1.5rem;
	font-family: 'open_sansbold';
	margin-right: 2rem;
	-webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .4s ease-out;
    margin-bottom: 2rem;
}
/*.signup:hover, .login:hover 
{
	/*color: grey;*/
	/*color: #b7a76d;*/
	color: white;
}*/
.habillage-article .span2 
{
	font-family: 'open_sanssemibold';
	font-size: 1.3rem;
	text-transform: uppercase;
}
.habillage-article .span3
{
	font-family: 'open_sanssemibold';
    font-size: 2rem;
    color: #796f4a;
}
.habillage-fond
{
	padding-left: 5rem;
    border-left: 1px solid #a09f9f;
}
.habillage-fond2
{
	border-radius: 4px;
    padding-bottom: 2.5rem;
    margin-top: 3rem;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px 1px rgba(121, 111, 74, 0.64);
    -moz-box-shadow: 0px 2px 4px 1px rgba(121, 111, 74, 0.64);
    -webkit-box-shadow: 0px 2px 4px 1px rgba(121, 111, 74, 0.64);
    text-align: center;
    width: 90%;
}
.habillage-article .p3 
{
	color: white;
    font-family: 'open_sanslight';
    font-size: 1.4rem;
}
.habillage-article .p3 span
{
	font-family: 'open_sanssemibold';
	font-size: 1.4rem;
	color: white;
}
.trait3
{
	width: 15%;
    border: 1px solid #796f4a;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
 .trait4
{
	border:1px solid #0f3c6c;
	width: 15%;
	margin-top: 1rem;
}
.habillage-article .icones 
{
	vertical-align: middle;
}
.habillage-fond3
{
	background:rgba(183, 167, 109,0.9); 
	padding:1rem;
}
.connexion p
{
    font-size: 2.5rem;
    font-family: 'open_sanssemibold';
    text-transform: uppercase;
    margin-top: 1rem;
    color: #0f3c6c;
}
.habillage-article .marge
{
	padding-left: 2rem;
}
.habillageCentrer .newsletter
{
color: white;
 text-align: center;
 font-size: 2.8rem;
 font-family: 'open_sansregular';
}
/********************************************                             Xtableau               *******************************************************/
/*
	Chaque tableau porte un numéro
	L'adresse de chaque div comporte l'adresse de son parent en première place
	La div Gilles a le parent Cloutier: (Nom de famille et prénom)
	div.cloutier div.gilles
	{
	est son adresse;
	}
	div.xtableau1 div.xt
	[
	est son adresse;
	}
*/

div.xtableau1 
{
width: 60%;
border-top:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
font-family: 'open_sansbold';
margin: auto;
margin-bottom: 4rem;
}
div.xtableau1 hr
{
border: 0px;
height: 1px;
background-color: #ffffff;
}

div.xtableau1 span.xc1
, div.xtableau1 span.xc2
, div.xtableau1 span.xc3
{
width: 33%;
margin-left: 0.5rem;
margin-right: 0.5rem;
padding: 1rem;

}
div.xtableau1 div.xt span.xc1
, div.xtableau1 div.xt span.xc2
, div.xtableau1 div.xt span.xc3
{
padding: 25px 30px;
background: #CCCCCC;
color: white;
font-family: 'open_sanssemibold';
text-transform: uppercase;
font-size: 2rem;
}
div.xtableau1 span.xc2
{
font-family: 'open_sanslight' !important;
}
div.xtableau1 span.xc3
{
font-family: 'open_sanslight' !important;
}

div.xtableau1 div.xt
{
display: flex;
text-align: center;
font-size: 1.5rem;
background-color: #CCCCCC;
}
div.xtableau1 div.xt span.xc1
, div.xtableau1 div.xt span.xc2
, div.xtableau1 div.xt span.xc3
{
color: #ffffff !important;
}
div.xtableau1 div.xl
{
display: flex;
text-align: left;
font-size: 1.3rem;
border-bottom: 1px solid #CCCCCC;
}
div.xtableau1 div.xl:last-child 
{
background: red;
}
/*
xtableau1:	pour tableau fleXible et responsive
xt:			xt est la div ligne de titre
xl:			xl est la div ligne de tableau
xc1-2 et 3	xc1 xc2 et xc3 sont les " colonnes span dans chaque ligne du tableau

Voici donc le format de texte qu'il faut copier dans un article pour utiliser
ce tableau flexible.
*/
/*
<div class="xtableau1">
	<div class="xt">
		<span class="xc1">Titre1
			</span>
		<span class="xc2">Titre2
			</span>
		<span class="xc3">Titre3
			</span>
		</div>
	<hr />
	<div class="xl">
		<span class="xc1">1. Ligne1 col1
			</span>
		<span class="xc2">Ligne1 col2
			</span>
		<span class="xc3">Ligne1 col3
			</span>
		</div>
	<hr />
	<div class="xl">
		<span class="xc1">2. Ligne2 col1
			</span>
		<span class="xc2">Ligne2 col2
			</span>
		<span class="xc3">Ligne2 col3
			</span>
		</div>
	<hr />
	<div class="xl">
		<span class="xc1">3. Ligne3 col1
			</span>
		<span class="xc2">Ligne3 col2
			</span>
		<span class="xc3">Ligne3 col3
			</span>
		</div>
	<hr />
	<div class="xl">
		<span class="xc1">4. Ligne4 col1
			</span>
		<span class="xc2">Ligne4 col2
			</span>
		<span class="xc3">Ligne4 col3
			</span>
		</div>
	<hr />
	<div class="xl">
		<span class="xc1">5. Ligne5 col1
			</span>
		<span class="xc2">Ligne5 col2
			</span>
		<span class="xc3">Ligne5 col3
			</span>
		</div>
	<hr />
	<div class="xl">
		<span class="xc1">6. Ligne6 col1
			</span>
		<span class="xc2">Ligne6 col2
			</span>
		<span class="xc3">Ligne6 col3
			</span>
		</div>
	<hr />
	<div class="xl">
		<span class="xc1">7. Ligne7 col1
			</span>
		<span class="xc2">Ligne7 col2
			</span>
		<span class="xc3">Ligne7 col3
			</span>
		</div>
	<hr />
	</div>
*/