@font-face {
font-family: 'wicon';
src: url('wicon.eot?#iefix') format('embedded-opentype'),  url('wicon.woff') format('woff'), url('wicon.ttf')  format('truetype'), url('wicon.svg#wicon') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'CenturyGothic';
src: url('CenturyGothic.eot?#iefix') format('embedded-opentype'),  url('CenturyGothic.woff') format('woff'), url('CenturyGothic.ttf')  format('truetype'), url('CenturyGothic.svg#CenturyGothic') format('svg');
font-weight: normal;
font-style: normal;
}

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
body{ margin:0; padding:0; width:100%;background:#fff;}
div,td{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:14px;line-height:24px;color:#4c4b4b;-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s  ease-in-out;-o-transition: all 0.5s  ease-in-out;-ms-transition: all 0.5s  ease-in-out;transition: all 0.5s  ease-in-out;}
a{ text-decoration:none;  color:#f58217;-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s  ease-in-out;-o-transition: all 0.5s  ease-in-out;-ms-transition: all 0.5s  ease-in-out;transition: all 0.5s  ease-in-out;}
img{ border:none;}
p{ padding:0; margin:0;}
h1,h2,h3,h4{ margin:0; padding:0; font-weight:normal;}
h2{font-size:20px; color:#343434;font-family: 'CenturyGothic';}
h3{ font-weight:700; font-size:16px; color:hsl(180, 2%, 31%);}

.clear,p.clear{ clear:both; height:0; padding:0;}
.clear p{ display:none;}
.none{ display:none;}


/* ---- Par-défaut CMS ---- */
p.plabel{ padding-bottom:10px; margin-top:20px;}
input[type="text"],textarea,select{ font-family: Trebuchet MS,Tahoma,sans-serif,Verdana; font-size: 13px; color:#3C3F3B;}
.msgErreurs{ background-color:#F9ABA2; padding:5px; color:#BF2413; border-radius:5px; font-weight:bold; border:1px solid #BF2413;}
.plansite ul li{ list-style:none; margin-bottom:20px;}
.plansite li:before{ content:"*"; font-family:'wicon',Arial, helvetica, sans-serif; font-size:14px;color: #5e5e5e; display:inline-block; vertical-align:middle; padding:0 10px;}
.plansite ul li a{color: #5e5e5e;}
.c#ed960ditsPhotos{ margin:0; padding:20px;}
.googleMAP{ text-align: center; margin: 20px 0px 0;}
.googleMAP iframe{ width: 100%; height: 450px;}
.btSubmit1{    background: #231f20;    font-size: 1.5em;    border: 2px solid #231f20;border-radius: 30px;padding: 5px 40px;color: white;cursor: pointer;
  text-transform: uppercase;-webkit-box-shadow: 3px 2px 5px #000 inset;-moz-box-shadow: 3px 2px 5px #000 inset;box-shadow: 3px 2px 5px #000 inset;text-shadow: 1px 2px 3px #000;}
.btSubmit2{ background: url("../images/bgbt.jpg") repeat-x scroll left top transparent; border: 2px solid grey; border-radius: 5px; padding: 5px; color:white; cursor:pointer;}
.contactsite{ width:64%; margin:0 auto;}
.tit#ed960diapo{ font-size:25px; height:42px; line-height:42px; padding-left: 5px; color:#411A15;}
.rubDiapo{ display:inline-block; margin:4px;    background: #343434;
  border: 2px solid #343434;text-align:center; padding: 5px; border-radius: 10px; width: 166px;height: 158px;overflow: hidden;text-shadow: 1px 1px 3px #000;-moz-box-shadow:1px 1px 5px #000;-webkit-box-shadow: 1px 1px 5px #000; box-shadow:1px 1px 5px #000;}
.rubDiapo .img{ height:100px;  width: 100px; background-color:black; margin: auto;}
.rubDiapo img{ height:auto;}
.rubDiapo .lien{ text-align:center; line-height:50px; height:50px;}
.rubDiapo .lien a{ color: #FFF; text-transform: uppercase; font-weight: bold; font-size:12px; line-height:16px; vertical-align: middle; text-decoration: none; display:inline-block;}
.titreDiapo{ display: none;}

.extraitArt{ border: 2px solid #aaa; -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75); -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75); border-radius: 10px; padding: 5px; margin-top: 18px;}
.extraitArt .intitule a{ font-size: 20px; text-decoration: none;}
.extraitArt .date{ text-align: right; font-style: italic; font-size: 11px;}
#infoHeader{ float: right;}
#infoHeader .info2{ font-size: 18px;}
.cOrange{ color:#F29142;}
.cCuivre{ color:#867462;}
/* realisation */
#pagerealisation ul,#pagerealisation ul li{  margin:0;  padding:0;  list-style:none;}
#pagerealisation .menuDiapo{  float:right; width:28%;  margin-left:2%; background: #343434;}
#pagerealisation .menuDiapo ul li {  border-bottom:1px solid #FFF; }
#pagerealisation .menuDiapo ul li:first-child{  border-top:1px solid #FFF;}
#pagerealisation .menuDiapo ul li a{     display: block;    padding: 0;    text-transform: uppercase;    text-align: right;    line-height: 25px;
  font-size: 11px;    color: #fff; padding-right:15px;}
#pagerealisation .menuDiapo ul li a:hover{ background:#ce171f;}
#diapoREA{margin: 0;    width: 70%;    float: left;}
.guillemets{ text-align:justify; padding:5px; margin-top:20px; clear: both;}
.search2{ float:right;}
.search2 input[type="text"]{ height: 22px;}
.search2 .txt1{ font-size: 18px;}
.pcontactf{ width:100%;}
.pcontactftxt{ text-align:center;color:#ed960d;}
.lecteurVideo{ width:640px; height:360px; margin:auto;}
.formRemerc{ width:640px; margin:auto; padding: 8px; border: 2px solid #aaa; -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75); -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75); border-radius: 10px;}
.formRemerc .titre{ font-size: 18px; text-align: center;}
.formRemerc .libelle{ font-weight: bold; margin-top: 5px;}
.formRemerc .inputTxt1 input[type="text"]{ width: 100%;}
.formRemerc .inputTxt2 textarea{ width: 100%;}
.signatureSC{ margin-bottom: 10px; clear: right;}

.suivreRS{ width: 140px; float:right; padding-bottom: 5px;}
.suivreRS ul li{ list-style: none; display: inline; margin-right: 7px;}
.suivreRS p{ background: url("../images/flecheRS.png") no-repeat left top; font-size: 14px;}
#background_clic{ width:100%; height:900px; text-align:center; z-index:-100; cursor:pointer;}
#escpub p{ width:100%; text-align:center; padding:5px 0px;}
.pubColonne{ text-align:center; padding:5px 0px;}
.cookies{ position: fixed;
  z-index:800; bottom: 0px; background-color: #000; opacity: 0.8; padding: 5px; color: #fff; width: 100%; text-align: center;}
.cookies a{ color: pink;}
.btCookies{ margin-left: 15px; padding: 5px; background-color: green#fb731f; color: #000; display: inline-block; cursor:pointer;}
.btCookiesNON{ margin-left: 15px; padding: 5px; background-color: #ed960d; color: #000; display: inline-block; cursor:pointer;}

/* ---- Menu Resp ---- */
#cssmenu #menu-button{ display:none;}


/*CSS*/
#wrapper{ overflow:hidden;}
#top{ padding-bottom:16px;}
#cont-logo{ background:#343434; padding:20px 0;}
.cont-logo { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-around; align-items: center; }
#logo{ height:181px;}
.slogan-top { color: #ce171f; font-weight: bold; font-size: 30px; line-height: 36px; max-width: 480px; text-align: center; }
.adr, .tel{ margin:15px; color:#fff; padding-left:50px; font-family: 'CenturyGothic'; font-size:22px; line-height:26px; position:relative;}
.adr:before { content: '\e011'; font-family: 'wicon'; font-size: 30px;    line-height: 30px;    display: block;    position: absolute;    left: 0;}
.tel:before { content: '\e00b'; font-family: 'wicon'; font-size: 50px; position: absolute; left: 0; top: 8px; }
.tel a { font-size: 60px; line-height: 36px; color: #ce171f; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
#menu{ position:relative; z-index:99; background:#ce171f;}
#menu ul{ margin:0; padding:0; text-align:center;  position:relative;}
#menu > ul > li{ display: inline-block; vertical-align: top; margin:0 -4px 0 0; padding:0; width: 140px;   }
#menu > ul > li > a{ padding:48px 0 0 0; line-height:48px;text-align:center; color:#fff; display: block; position:relative; font-size:14px; }
#menu > ul > li > a span{ vertical-align:middle; display: inline-block; line-height:16px; color:#fff;  }
#menu > ul > li > a::before{position:absolute; left:0; top:12px; right:0; bottom:0; width:100%; height:38px; z-index:9999; -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s  ease-in-out;-o-transition: all 0.5s  ease-in-out;-ms-transition: all 0.5s  ease-in-out;transition: all 0.5s  ease-in-out;}
#menu > ul > li:first-child > a::before{ content: url(../images/mn_0.png); }
#menu > ul > li:nth-child(2) > a::before{ content: url(../images/mn_1.png); }
#menu > ul > li:nth-child(3) > a::before{ content: url(../images/mn_2.png); }
#menu > ul > li:nth-child(4) > a::before{ content: url(../images/mn_3.png); }
#menu > ul > li:nth-child(5) > a::before{ content: url(../images/mn_4.png); }
#menu > ul > li:nth-child(6) > a::before{ content: url(../images/mn_5.png); }
#menu > ul > li:nth-child(7) > a::before{ content: url(../images/mn_6.png); }
#menu > ul > li:nth-child(8) > a::before{ content: url(../images/mn_7.png); }
#menu > ul > li:nth-child(9) > a::before{ content: url(../images/mn_8.png); }
#menu > ul > li:nth-child(10) > a::before{ content: url(../images/mn_9.png); }
#menu > ul > li:nth-child(11) > a::before{ content: url(../images/mn_10.png); }
#menu > ul > li:nth-child(12) > a::before{ content: url(../images/mn_11.png); }
#menu > ul > li:last-child > a::before{ content: url(../images/mn_12.png); }
#menu > ul > li > a:hover, #menu > ul > li:hover > a{ background:#231f20;}

#menu li{ position: relative; list-style: none;}
#menu ul ul{ position: absolute; left: -9999px; z-index: 999; background:#231f20; width: 200px;}
#menu li:hover ul{ left: 0;}
#menu ul ul li{ margin: 0; padding: 0; border-top: 1px solid;}
#menu ul ul a{ color: #fff; display: block; padding: 5px; line-height: 16px; text-align: left;}
#menu ul ul a:hover{ background:#ce171f;}

#flash{ position:relative; max-width:1920px; width:100%; margin:0 auto ; z-index:20}
#anim{ width:1920px; height:306px; margin-left:-960px; left:50%; position:relative; z-index:20}
.coords{ position:relative; z-index:22; width:1246px; margin:-44px auto 0; text-align:center; background:rgba(25,25,25,0.6);}
.coords:before{ content:''; display:block; top:0;bottom:0; width:100%; left:-100%; position:absolute; background:rgba(25,25,25,0.6);}
.coords:after{ content:''; display:block; top:0;bottom:0; width:100%; right:-100%; position:absolute; background:rgba(25,25,25,0.6);}
.coord{ text-align:center; line-height:40px; display:inline-block; vertical-align:middle; color:#fff; padding-right:116px;}
.coord a{ color:#fff; font-size:28px;}
.coord.tel{ left:0; position:relative;}
.coord.tel:before{ content:''; width:69px; height:69px; background:url(../images/picto_tel.png) center no-repeat; position:absolute; right:0; top:-12px;}
.coord.adr{ right:0; position:relative; margin-left:110px;}
.coord.adr:before{ content:''; width:69px; height:69px; background:url(../images/picto_adr.png) center no-repeat; position:absolute; right:0; top:-12px;}

/*CENTRAL*/

#central{ width:1246px; margin:0 auto; position:relative;}
#acvideo{position:absolute; width: 176px; height: 350px;     left: 150px;    top: -266px;z-index: 999;}

#relancevid{position: absolute; left:0; top:60px;}
.nav{ text-align:center;}
#corps{ padding-bottom:20px}
.cont-nav{ background:#eaeaea; padding:7px 10px;}
p.navigation{ font-size:14px; color:#333; line-height:32px; float:left; text-align:left; }
p.navigation a{ color:#555;}
.rezo{ float:right; text-align:right;}
.youtube, .addthis_sharing_toolbox{ display: inline-block; vertical-align:middle; height:32px;}
.ttl{ padding:26px 0; background:url(../images/picto_ttl.png) center no-repeat;}
.ttl h1{ font-size:40px; line-height:40px; color:#343434;font-family: 'CenturyGothic';}

.texte{ text-align:center;}
.texte p{ padding-bottom:24px;}

.prestations{ text-align:center; padding-bottom:50px;}
.prest{ display:inline-block;vertical-align:top; background:url(../images/01.png) top center no-repeat; padding-top:172px; width:149px; margin: 0 50px;}
.prest ul{ text-align:center; margin:0; padding:0 0 33px 0; border-bottom:24px solid #eaeaea;}
.prest ul li{ list-style:none;}
.prest.prest1{ background:url(../images/02.png) top center no-repeat;}
.prest.prest2{ background:url(../images/03.png) top center no-repeat;}
.prest.prest3{ background:url(../images/04.png) top center no-repeat;}
.elec h2{ text-align:center; padding:64px 0 27px 0; background:url(../images/deco.png) top center no-repeat;}

ul.galerie{ margin:0; padding:0 0 30px 0; line-height:0; text-align:center; letter-spacing:-0.69em;}
ul.galerie li{ display:inline-block; vertical-align:top; letter-spacing:normal; width:402px; height:225px; overflow:hidden;}
ul.galerie li img{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; max-width: 100%;}
ul.galerie li img:hover{-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25);}
ul.galerie li:nth-child(2){ margin:0 20px;}
.texte.textbot{ text-align:left;}
.textbot ul{ margin:0 0 20px 0;}
.textbot ul li{ list-style: none;}
.textbot ul li:before{ content:"*"; font-family:'wicon',Arial, helvetica, sans-serif; font-size:12px;color: #5e5e5e; display:inline-block; vertical-align:middle; padding:0 10px;}
.marie{ padding:10px 0; text-align:center;}
.logos-part {    padding: 15px 0;    text-align: center; }
.logos-part ul{ margin:0; padding:0;  }
.logos-part ul li{ display: inline-block; padding:0 10px; height:59px; margin:0 -4px 0 0; }

#presta, #presta1{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 0}
.presta{max-width:49.5%; width: 100%; margin: 10px 0; background: #eaeaea; overflow: hidden}
.presta a{ position: relative; display: block; display: flex; justify-content: space-between; flex-wrap:wrap }
.imag{  font-size: 0; line-height: 0; max-width: 49%; width: 100%; margin-right: 5px; overflow: hidden}
.text{padding: 10px ; max-width: 49%; width: 100%; }
.imag img{height: 254px}
.text p{ line-height: 20px}
.presta a:hover img:hover{-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25); transition: all ease 0.5s}
p.title{text-transform: uppercase; text-align: center; font-size: 16px; padding-bottom: 10px; line-height: 16px}

p.lien{ padding: 10px 20px; background:#000; color: #fff;  display: inline-block; border-radius: 0 10px 0 10px; position: absolute; bottom: 10px; right: 20px}
.presta:hover p.txt{display: block}
.presta a:hover p.ttl{display: none;}
/*FOOTER*/

#footer{ background:#343434; padding-bottom:30px;}
.link-foot{ background:#ce171f;}
.link-foot ul{ padding:20px 0; letter-spacing:-0.69em; text-align:center; width:1246px; margin:0 auto;}
.link-foot ul li{ display:inline-block; vertical-align:top; letter-spacing:normal; margin:0 0 0 5px; background:url(../images/trait.png) right center no-repeat; padding-right:10px;}
.link-foot ul li:last-child{ background:none;}
.link-foot ul li a{ display:block; font-size:16px; color:#fff;}
.link-foot a:hover{ color:#343434;}
.logofoot{ text-align:center; line-height:0;}
.mtc{ text-align:center; padding:0 0 30px; line-height:0;}


.contactsite p{ text-align: left; padding:0;}
.plansite { margin:0 auto; width:60%; text-align:left;}
.mentions{ text-align: left;}
.mentions p{ line-height:22px; padding:0 0 7px 0;}
.mentions h2, .texte h2{ padding:10px 0 20px 0; color:#343434;}
.btn-list {    width: 320px;    margin: 20px auto 0 auto;    padding:  0;    text-align: center;    background: #231f20;    color: #fff;}
.btn-list a{ display: block; color:#fff; text-transform: uppercase; padding: 15px 0; }
.btn-list a:hover{     background: #ce171f;}
.cont-hor{    background: #eaeaea; margin-bottom:30px; padding:10px;}
.hor{ width:50%; float:left;}
.hor h2{ text-transform: uppercase; font-family: 'CenturyGothic'; font-size:22px; color:#ce171f; padding-bottom:10px; border-bottom:1px solid; position:relative; padding-left:40px; line-height:30px; margin-bottom:10px; }
.hor h2::before{content: '\e06e';    font-family: 'wicon';    font-size: 30px;    line-height: 30px; position: absolute; top:0; left:0;   }
.part{ width:50%; float:right; text-align:center;}
.part ul{ margin:0; padding:0;}
.part ul li{ display: inline-block; vertical-align:top; padding:0; margin:0;}

.vid-yu { padding-bottom: 24px; }

/*RESPONSIVE*/
#cssmenu {
  background: #ce171f !important;
}

@media only screen and (max-width:1919px){
  #menu > ul > li{ width: 120px;}
}
@media only screen and (max-width:1679px){
  #menu > ul > li{ width: 116px;}
}
@media only screen and (max-width:1519px){
  #menu > ul > li{ width: 102px;}
  #menu > ul > li > a{ font-size: 12px;}
}
@media only screen and (max-width:1439px){
  .slogan-top{ font-size: 24px; line-height: 28px; max-width: 380px;}
  .tel a{ font-size: 40px;}
  .tel:before{ font-size: 36px; top: 5px;}
}
@media only screen and (max-width:1365px){
  .cont-logo, .link-foot ul, #central{ width:98%;}
  .cont-logo{ padding: 0;}
  .link-foot ul, #menu ul{letter-spacing: normal;}
  ul.galerie li{ width:32%; height:auto;}
  ul.galerie li img{ width:100%; height:auto;}
  #menu{ width:100%;}
  #menu > ul > li{ width: 90%;}
  #menu > ul > li > a{ font-size: 11px;}
}
@media only screen and (max-width:1279px){
  .slogan-top{ max-width: 320px; font-size: 20px; line-height: 28px;}
  .adr, .tel{ font-size: 18px; padding-left:36px;}
  .tel:before{ font-size: 26px; top: 5px;}
  .adr:before{ font-size: 22px;}
  #menu ul li{ width:128px;}
}
@media only screen and (max-width:1151px){
  #logo { max-width: 300px; height: auto; }
  #logo img { max-width: 100%; height: auto; }
  .adr, .tel{ margin: 10px; font-size: 16px; line-height:20px;}
  #menu ul li {    width: 118px;}
  #menu ul li a{ font-size:12px;}
  .prest{ margin: 0 20px;}
}
@media only screen and (max-width:1059px){
  .tel a{ font-size:30px;}
  #menu ul li{ width:113px;}
  #menu ul li a{ font-size:12px;}
}
@media only screen and (max-width:1023px){
  #menu ul li{ width:108px;}
  ul.galerie li:nth-child(2) {    margin: 0;}
  ul.galerie li {    width: 33%;    height: auto;}
  ul.galerie li img {    width: 94%;    height: auto;}
  #pagerealisation .menuDiapo ul li a{ font-size:10px;}
}
@media only screen and (max-width:979px){
    #cssmenu #menu-button{ display:block;}
  #menu, .link-foot{ display:none;}
  .imag{max-width: 100%; margin: 0; text-align: center}
  .imag img{text-align: center; height: auto}
  .text{max-width: 100%; min-height: 200px}
  
}
@media only screen and (max-width:899px){
  .slogan-top{ display:none;}
  .prest{ margin: 0 12px;}
  
}
@media only screen and (max-width:799px){
  .hor, .part {    width: 100%;    float: none;}
  .part { padding-top:10px; text-align:left;}
}
@media only screen and (max-width:767px){
  .prest{ margin-bottom: 20px;}
  .rubDiapo{ width:23%;}
  .vid-yu iframe{ height: 400px;}
}
@media only screen and (max-width:719px){
  #logo {    float: none;    height: auto;    width: 100%;    text-align: center;    border-bottom: 1px solid #fff;    padding-bottom: 18px;}
  #cont-logo{ padding:20px 0 0 0;}
  #pagerealisation .menuDiapo ul li a {    font-size: 10px;    line-height: 13px;    padding: 2px 15px 2px 0;}
  .text{min-height: 210px}
}
@media only screen and (max-width:639px){
  .cont-logo{ flex-direction:column;}
  .ttl h1{ font-size:26px; line-height:30px;}
  .contactsite{ width:97%;}
  .contactsite > form > p:first-of-type{ font-size:11px;}
  .text + p{ padding:0 10px; font-size:11px;}
}
@media only screen and (max-width:599px){
  .prest{  background-size:60% !important; padding-top: 102px;}
  .rubDiapo{ width:31%;}
  .presta{ max-width: 100%}
  .imag{max-width: 49%;}
  .text{max-width: 50%;}
  .imag img{height: 250px}
  .vid-yu iframe{ height: 280px;}
}
@media only screen and (max-width:532px){
  #cont-logo {    padding: 20px 0 10px 0;}
  #pagerealisation .menuDiapo {    float: none;    width: 100%;    margin-left: 0;    background: #343434;}
  #pagerealisation .menuDiapo ul li a {    font-size: 10px;    line-height: 25px;    padding: 0;    text-align: center;}
  #diapoREA {    margin: 20px auto 0 auto;    width: 100%;    float: none;}
}
@media only screen and (max-width:479px){
  #logo img{ width:100%; height:auto;}
  .prest{ margin-bottom:20px;}
  .adr, .tel{ width:90%; font-size:16px;}
  ul.galerie li {    width: 100%;    height: auto;    padding-bottom: 10px;}
  .rubDiapo {    width: 46%;}
  p.navigation, .rezo{ float:none; text-align:center;}	.presta{max-width: 100%}
  .imag{max-width: 100%}
  .imag img{height: auto;}
  .text{max-width: 100%; }
  .vid-yu iframe{ height: 240px;}
}
@media only screen and (max-width:379px){
.vid-yu iframe{ height: 220px;}
}