/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {	line-height: 1;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
audio,canvas,progress,video {
  display: inline-block;
  vertical-align: baseline;
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
a:active,a:hover {
  outline: 0;
}
sub,sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {  top: -.5em;}
sub {  bottom: -.25em;}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
button,input,optgroup,select,textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button {  overflow: visible;}
button,select {  text-transform: none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}




/* footer */
html, body {height: 100%}
#wrap {min-height: 100%}
#main {overflow:auto; }
#footer {font-size: 11px; color:#bdbdbd; padding-top: 20px; padding-bottom: 20px; }
body:before { /*Opera Fix*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;}



/* generaux */

body{color:#393939; font-family: arial, sans-serif; background-color: #f1f1f1;}
.container{ width: 922px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background-color: #fff;}

.container-fluid{ width: 100%;  background-color: #fff;}
.container .row {margin:0 -15px;}


h1, h2, h4, h5{
  font-family: 'Vollkorn', serif; font-weight: 800;
}


section{width: 615px; display:inline-block; vertical-align: top;  padding: 15px}

em{font-style: italic;}
strong{font-weight: bold;}
a{color:#fff; text-decoration: none;}

header{ width: 970px; position: relative;
  padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background-color: #fff; }


nav ul{text-align: left; background-color:#20170f;}
nav ul li{display: inline-block; vertical-align: middle;}
nav ul li a{background-color:#20170f; color:#fff; height: 40px;line-height: 40px; display: inline-block; font-weight: bold;
  font-size: 12px; padding:0 25px;}
nav ul li:first-child a{background: url(img/arrow.png) right center no-repeat transparent; padding:0 25px;}
nav ul li a:hover{opacity: .7}
a.smallMenu{color:#cdcdcd; font-size: 14px; display: inline-block;
    vertical-align: top;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    margin:0 5px;
}
a.smallMenu:hover{color:#393939;}


.fa{margin-right: 5px;}

#logo{height: 100px; padding-top: 10px;}
.txtc{text-align: center; }



#barTop{height: 40px; line-height: 40px; border-bottom: 1px solid #e2dfd8; vertical-align: middle;}
#barTop .container{height: 39px; line-height: 39px;}
#barTop img{margin-top: 5px;}

.sociaux{float: right; height: 40px; line-height: 40px;}
.sociaux a{ -webkit-filter: saturate(1); filter: saturate(1);}
.sociaux a:hover{ -webkit-filter: saturate(0); filter: saturate(0);}

h3{text-transform: uppercase;color:#fff; background-color: #4797f5; height: 30px; line-height: 30px; 
  font-size: 12px; font-weight: bold; padding: 0 20px}
h3 span{color: rgba(255,255,255,.75)}
h3.advertising{background-color: #9C9C9C;}
h3.advertising + img{width: 100%;height: auto; margin-bottom: 15px;}


/* ------------------------------------------------------ contenu principal */

#superContenu{margin-top: 30px;}
h1{font-size: 36px;}
p{margin:10px 0 15px 0;     font-size: 15px;    line-height: 1.25em;}

article>a{color:#393939; position: relative;}
article>a:hover{color:#717171;}
article>a:hover span:not(.com){background-color:#69a9f4;}
article>a:hover img{border: 1px solid #d3d6d0;}
article>a > div{position: relative;}
article>a > div .fa{position: absolute; right: 10px; bottom: 15px; font-size: 24px; color:#696969;}
article>a > div .fa.top{ right: none; bottom: none;   left: 10px; top: 15px; }
.half{display: inline-block; vertical-align: top; width: 50%;}
.half + .half{padding-left: 8px;}
.illus{border-radius: 2px; border:1px solid #edf0e9;}
h4{ font-size: 22px; margin: 10px 0 0; line-height: 23px;}
h4 span{display: inline-block; vertical-align: middle; background-color: #4797f5;
color:#fff; font-family:arial, sans-serif; text-transform: uppercase;
font-weight: 600; font-size: 11px; padding:0 5px;}

span.com{display: inline-block; border: none; position: relative;  top: 4px; left:4px}
a:hover span.com img{border: none;}


/* ----------------------------------------------------sidebar */

section.sidebar{width: 290px;padding: 15px 0}
section.sidebar > div{width: 100%; background-color: #f1f1f1; padding: 0}
#bd{display: block; width: 100%; text-align: center; margin: 15px 0;}
.advert a{margin: 0 0 15px 0}

a.btn{display: inline-block; background-color: #4797f5;  line-height: 14px; margin: 0 auto 15px; text-align: left; padding:5px; }
a.btn span{display: inline-block; vertical-align: middle; margin:5px;}


#vine{margin-top: 15px;}

.lesTweets{margin-top: 13px;}


/* ---------------------------------------------------- footer */
#footer a{margin-top: 5px; display: inline-block;}
.footAd{    padding: 20px 20px 12px; background-color: #696969;}
.footAd{font-size: 12px; color:#cdcdcd;}
.footAd ul{display: inline-block; vertical-align: top; text-align: left; padding-right: 15px; width: 25%;}
.footAd ul li{width: 100%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; margin: 5px 0 }
.footAd ul li a{color:#cdcdcd;}
.footAd ul li strong{text-transform: uppercase; color:#fff;}
.footAd ul li a:hover{color:#fff;}