@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic-webfont.eot');
    src: url('fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic-webfont.eot');
    src: url('fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-ThinItalic-webfont.eot');
    src: url('fonts/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-ThinItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-LightItalic-webfont.eot');
    src: url('fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-LightItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium-webfont.eot');
    src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-MediumItalic-webfont.eot');
    src: url('fonts/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-MediumItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}


/* ---------- BALISES GENERALES ---------- */


body {
	font-family: Roboto;
	/*font-weight: 100;*/
	height: 100%;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	color: #888;
	background-color: #fff;
}

p {
	margin: 1em 0em;
}

img {
	text-align:center;
	vertical-align:middle;
}

a img {
	border: none;
}

a:link {
	color: #CC0000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CC0000;
}

a:hover {
	text-decoration: none;
	color: #333333;
}
a:active {
	text-decoration: none;
	color: #CC0000;
}

.active {
	background-color: #a7a9ac;
}

div {
	text-align: center;
	overflow: hidden;
}

h1 {
	color: #fff;
	font-size: 1em;
	margin: 0px;
}

h2 {
	color: #fff;
	font-size: 2em;
	text-align: left;
	width: 980px;
	padding: 0em;
    margin: 0 auto;
}

h3 {
	color: #fff;
	font-size: 1.5em;
	text-align: left;
	width: 980px;
	padding: 0em;
    margin: 0 auto;
}

h4 {
	color: #CC0000;
	font-size: 1em;
	text-align: left;
	margin: 0px;
}
h5 {
	color: #fff;
	font-size: 1em;
	text-align: left;
	width: 980px;
	padding: 0em;
    margin: 0 auto;
}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #CC0000;
}


/* ---------- MISES EN PAGE ---------- */


.fer_gch {
	text-align:left;
}

.fer_drt {
	text-align:right;
}

.fer_ctr {
	text-align:center;
}

.float_gch {
	float:left;
	margin: 1em 0;
}

.float_drt {
	float:right;
	margin: 1em 0;
}

.italique {
	color: #666666;
	font-size: 0.8em;
	font-style: italic;
	/*text-align: left;*/
	margin: 0;
}

/* ---------- CONTAINEUR ---------- */

.menu {
	/* Top fixed menu */
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #a7a9ac;
	border-bottom: 1px solid #ddd;
}

.fb-like {
	display: block;
    text-align: center;
    padding: 14px 0 16px 0;
}

.content {
	width: 980px;
	padding: 0em;
	margin: 1em auto;
}

.content_3col {
	width: 980px;
	padding: 0em;
	margin: 1em auto;
	float:left;
}

.content_menu {
	width: 980px;
	padding: 0em;
    margin: 0 auto;
}

.accueil {
	min-height: 40px;
	padding: 12% 0;
	background-image:url(pictures/bg_eleven.jpg);
	background-size:cover;
}

.tablo_noir {
	background-color: rgba(0, 0, 0, 0.7);
	cellspacing: 0px;
	cellpadding: 0px;
	border: 0px;
	padding: 1em;
	color: #fff;
}

.cadre {
	background-color: rgba(0, 0, 0, 0.7);
    color:#FFF;
	padding:1em;
	margin: auto;
}

.cadre_blc {
/*	background-color:#FFF;
	color:#666;*/
	padding:1em;
	margin: 0 0 0 0;
}

.cadre_cote {
    display: inline-block;
    vertical-align: top;
	background-color: rgba(0, 0, 0, 0.7);
    color:#FFF;
}

.div_gch {
	color:#f00;
	width: 140px;
	float: left;
	padding: 0em;
	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
 	transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}
.div_container {
	display:inline-block;
}
.div_drt {
	color:#f00;
	width: 140px;
	float: right;
	padding: 0em;
	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
 	transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}

.barre_titre {
	background-color: #CC0000;
}

.barre_sous_titre {
	background-color: #a7a9ac;
}

.txt_rouge {
	color: #CC0000;
	font-size: 1em;
	margin: 0;
}

.txt_gris {
	color: #888;
	font-size: 1em;
	margin: 0;
}

.rubrique {
	height: auto;
	padding-top: 0px;
    /*background-color: #fafbf9;*/
}

.rubrique_hdr {
	background-position: 0 30%;
	background-size:cover;
	height:500px;
}

.illus {
    background-position: center;
	background-size:cover;
	height:300px;
	padding: 1em;
}

.footer {
	height: auto;
	background-color: #a7a9ac;
	color: #FFF;
	font-size: 0.7em;
}