@font-face {
    font-family: 'ralewayblack';
    src: url('../fonts/raleway-black.eot');
    src: url('../fonts/raleway-black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-black.woff2') format('woff2'),
         url('../fonts/raleway-black.woff') format('woff'),
         url('../fonts/raleway-black.ttf') format('truetype'),
         url('../fonts/raleway-black.svg#ralewayblack') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ralewaybold';
    src: url('../fonts/raleway-bold.eot');
    src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-bold.woff2') format('woff2'),
         url('../fonts/raleway-bold.woff') format('woff'),
         url('../fonts/raleway-bold.ttf') format('truetype'),
         url('../fonts/raleway-bold.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ralewayextralight';
    src: url('../fonts/raleway-extralight.eot');
    src: url('../fonts/raleway-extralight.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-extralight.woff2') format('woff2'),
         url('../fonts/raleway-extralight.woff') format('woff'),
         url('../fonts/raleway-extralight.ttf') format('truetype'),
         url('../fonts/raleway-extralight.svg#ralewayextralight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ralewaylight';
    src: url('../fonts/raleway-light.eot');
    src: url('../fonts/raleway-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-light.woff2') format('woff2'),
         url('../fonts/raleway-light.woff') format('woff'),
         url('../fonts/raleway-light.ttf') format('truetype'),
         url('../fonts/raleway-light.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular.woff2') format('woff2'),
         url('../fonts/raleway-regular.woff') format('woff'),
         url('../fonts/raleway-regular.ttf') format('truetype'),
         url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ralewaysemibold';
    src: url('../fonts/raleway-semibold.eot');
    src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-semibold.woff2') format('woff2'),
         url('../fonts/raleway-semibold.woff') format('woff'),
         url('../fonts/raleway-semibold.ttf') format('truetype'),
         url('../fonts/raleway-semibold.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ralewayitalic';
    src: url('../fonts/raleway-italic.eot');
    src: url('../fonts/raleway-italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-italic.woff2') format('woff2'),
         url('../fonts/raleway-italic.woff') format('woff'),
         url('../fonts/raleway-italic.ttf') format('truetype'),
         url('../fonts/raleway-italic.svg#ralewayitalic') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*{font-family: ralewayregular, Arial, Helvetica, sans-serif;}
img {max-width: 100%;}
strong {font-family: ralewaybold, Arial, Helvetica, sans-serif;}
p {font-size: 15px;margin-bottom: 15px;}
ul{padding: 0;}
ul li{font-size: 15px;font-family: ralewaybold, Arial, Helvetica, sans-serif;}
.magnify>.magnify-lens{z-index: 1000 !important;transform: scale(1.3); /*cursor: default !important;*/ cursor: url('../images/cursor-reticule1.png') 14 18, default !important;}
.magnify>img{ width: 100%; }

@keyframes opacity {
  from {
    opacity: 1;
  }

  to {
     opacity: 0;
  }
}


@keyframes opacity2 {
  from {
    opacity: 0;
  }

  to {
     opacity: 1;
  }
}

@keyframes slide {
  from {
    bottom: auto;
  }

  to {
    bottom: 20px;
  }
}

.error::placeholder {color: #fd4f4f;}
:focus::placeholder {color: #2da5d0;}
::placeholder {color:  #a9a9a9;font-family: ralewaybold, Arial, Helvetica, sans-serif;text-transform: uppercase}
 @keyframes bateau {
  100% {
    transform: rotateY(360deg);
  }
}
#bodyHeader {position: relative;z-index: 3;background: white;height: 12vh;line-height: 12vh;}
#bodyHeader .logo img {max-height: 12vh;}
#bodyHeader .menu ul {padding: 0;margin: 0;list-style: none;display: flex;align-items: center;height: 100%;justify-content: flex-end;}
#bodyHeader .menu ul li {padding: 0px 25px 0 35px;background: url(../images/dots.png) no-repeat center left;}
#bodyHeader .menu ul li:first-child {background: none;padding-left: 0;}
#bodyHeader .menu ul li:last-child {padding-right: 0;}
#bodyHeader .menu ul li a{font-family: ralewaysemibold, Arial, Helvetica, sans-serif;text-transform: uppercase;color:#000000;display: inline-block;vertical-align: middle;transition: all 0.2s;line-height: 1.2;}
#bodyHeader .menu ul li a.selected, #bodyHeader .menu ul li a:hover {color: #ff3131;text-decoration: none;transition: all 0.2s;}
#bodyHeader .lang {display: flex;align-items: center;height: 100%;justify-content: flex-end;}
#bodyHeader .lang a {padding: 0px 10px;font-family: ralewaylight, Arial, Helvetica, sans-serif;color:#000000}
#bodyHeader .lang a.bold span{font-family: ralewayblack, Arial, Helvetica, sans-serif;}
#bodyHeader .lang a:hover{text-decoration: none;color: #ff3131;}
#bodyHeader .lang span{display: inline-block;vertical-align: middle;}
#bodyHeader .lang a.separator {padding: 0;}
#bodyHeader .lang a.separator:hover {color: #000;}
#bodyHeader .affichesearch img{height: 20px;margin-top: -9px;}
/*#bodyHeader form.recherche.hide{display: none;}
#bodyHeader form.recherche {position: absolute;left: 0;right: 55px;top: 0px;}*/
#bodyHeader form.recherche.hide{/* display: none; */overflow: hidden;width: 0%;transition: all 0.5s;right: 6%;left: 93%;}
#bodyHeader form.recherche {position: absolute;left: 0;right: 55px;top: 0px;width: 93%;transition: all 0.5s;height: 12vh;display: flex;align-items: center;}
#bodyHeader form.recherche input {height: 45px;border-radius: 10px;border: 1px solid #a9a9a9a9;padding: 0px 15px;width: 100%;font-size: 14px;outline: 0;}
#bodyHeader form.recherche input[type=submit] {width: 35px;height: 35px;position: absolute;right: 6px;border-radius: 30px;background: none;color: #2da5d0;border: 1px solid #2da5d0;padding: 0;font-size: 14px;display: inline-block;line-height: 35px;transition: all 0.5s;}
#bodyHeader form.recherche input[type=submit]:hover {color: white;background: #2da5d0;transition: all 0.5s;}

#video {height: 88vh;overflow: hidden;align-items: center;display: flex;justify-content: center;}
/*#video video {display: block;position: absolute;bottom: 0;filter: brightness(70%);top: 0;height: 100%;width: auto;}*/
#video video {display: block;position: absolute;bottom: 0;left: 0;filter: brightness(70%);width: 100%;}
#video img {position: absolute;z-index: 1;height: 52vh;animation-duration: 2s;animation-name: opacity;animation-delay: 1s;animation-fill-mode: forwards;}
/*#video:hover .blocAccueil{animation-duration: 2s;animation-name: opacity2;animation-delay: 0s;animation-fill-mode: forwards;}*/
/*#video .blocAccueil.{animation-duration: 2s;animation-direction: reverse;animation-name: opacity2;animation-delay: 0s;animation-fill-mode: forwards;}*/
#video .blocAccueil {
  z-index: 2;
  text-align: center;
  color: white;
  
  animation-duration: 2s;
  animation-name: opacity;
  animation-delay: 3s;
  animation-fill-mode: forwards;  
}
#video .blocAccueil h2 {font-family: ralewaylight, Arial, Helvetica, sans-serif;letter-spacing: 2px;}
#video .blocAccueil h1 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase;margin: 35px 0px;letter-spacing: 2px;padding: 0 15px;}
#video .blocAccueilLien {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  width: 100%;
  height: auto;

  position: absolute;
  left: 50%;
  margin-left: -50%;
  bottom: auto;
}

#video .blocAccueilLien a {display: inline-block;color: white;background: #2da5d0;padding: 10px 50px;font-family: ralewayblack, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 1px solid #2da5d0;letter-spacing: 1px;transition: all 0.5s;}
#video .blocAccueilLien a:hover {color: #2da5d0;background: white;border: 1px solid #2da5d0;}

#bandeauVideo video {display: block;}

#baton hr {border-top: 6px solid #ff3131;transform: rotate(90deg);margin: 0;width: 260px;position: absolute;left: 15px;z-index: 10;}

#search{padding: 80px 0;margin-bottom: 60px;}
#search ul {list-style: none;}
#search ul li {background: url(../images/dots-red.png) no-repeat 0px 5px;background-size: 12px;padding-left: 25px;}
#search ul li a{color: #000000;}
#search ul li a:hover{color: #ff3131;text-decoration: none;}
#search form {position: relative;}
#search form input[type="text"] {display: inline-block;height: 45px;border-radius: 0px;border: 1px solid #a9a9a9a9;padding: 0px 45px 0 15px;width: 100%;font-size: 14px;outline: 0;}
#search form input[type="submit"] {width: 35px;height: 35px;position: absolute;right: 5px;top: 5px;border-radius: 30px;background: none;color: #2da5d0;border: 1px solid #2da5d0;padding: 0;font-size: 14px;display: inline-block;line-height: 35px;}

#page404 {padding: 80px 0;margin-bottom: 60px;}
#page404 .contenu {padding-right: 45px;}
#page404 .contenu h1 {font-family: ralewayblack;font-size: 30px;margin-bottom: 15px;}

#page {padding: 80px 0;background: linear-gradient(to right, #fff 50%, #ff3131 50%);margin-bottom: 60px;}
#page{margin-bottom: 0;}
#page .contenu {padding-right: 45px;}
#page .contenu h1 {font-family: ralewayblack;font-size: 30px;margin-bottom: 15px;}
#page .contenu ul {list-style: none;}
#page .contenu ul li {background: url(../images/dots-red.png) no-repeat 0px 5px;background-size: 12px;padding-left: 25px;}
#page .images {display: flex;flex-direction: column;/*align-items: flex-end;*/}
/* #page .images .img1 {margin-left: -60px;}
#page .images .img2 {margin-top: -65px;} */
#page .images .img1 { width: 90%; }
#page .images .img2 { width: 70%; margin-top: -65px; margin-left: 180px; }
#page .images .img3 { width: 50%; margin-top: -40px; margin-left: 20px; }
#page .images .img4 { width: 60%; margin-top: -40px; margin-left: 210px; }
#page .images .img5 { width: 70%; margin-top: -40px; margin-left: 70px; }


#iso {margin-bottom: 0px;}
#iso .padding {padding: 0;}
#iso picture {font-size: 0;display: block;}
/*#iso .contenuIso {position: absolute;z-index: 10;left: 50%;top: 70px;}*/
#iso .contenuIso {position: absolute;z-index: 10;right: 50%; top: 70px; width: 570px;}
#iso .contenuIso h2 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-align: center;margin: 0;font-size: 24px;}
#iso .contenuIso h3 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 24px;margin-bottom: 30px;}
#iso .map {position: relative;/*cursor: url('../images/cursor-zoom.png'), default;*/}

#iso .map .isoPoints {position: absolute;height: 28px;width: 28px; margin-left: -14px; margin-top: -14px;z-index: 1200;background: transparent url('../images/plus-inactive2.png') no-repeat;background-size: 28px;transform: rotate(0deg);transition: transform 0.5s, background 0.5s, z-index 0.5s 0.5s; animation: background 400ms linear; border-radius: 50%;}
#iso .map .isoPoints:hover { background-image: url('../images/plus-survol2.png'); background-color: #2da5d0; }

#iso .map .isoPoints.active {z-index: 1202;background: url('../images/plus-active.png') no-repeat;background-size: 28px;transform: rotate(45deg);transition: transform 0.5s, background 0.5s;}
#iso .map .isoPoints.point26 { left: 58.6%; top: 38.0%; }
#iso .map .isoPoints.point24 { left: 53.6%; top: 46.9%; }
#iso .map .isoPoints.point23 { left: 49.0%; top: 35.8%; }
#iso .map .isoPoints.point25 { left: 48.7%; top: 49.3%; }
#iso .map .isoPoints.point31 { left: 40.8%; top: 41.0%; }
#iso .map .isoPoints.point46 { left: 44.1%; top: 56.2%; }
#iso .map .isoPoints.point47 { left: 41.8%; top: 63.4%; }
#iso .map .isoPoints.point48 { left: 33.1%; top: 50.1%; }
#iso .map .isoPoints.point50 { left: 32.7%; top: 59.5%; }
#iso .map .isoPoints.point51 { left: 29.4%; top: 60.3%; }
#iso .map .isoPoints.point27 { left: 26.5%; top: 70.4%; }
#iso .map .isoPoints.point28 { left: 38.9%; top: 73.8%; }
#iso .map .isoPoints.point52 { left: 34.1%; top: 76.4%; }
#iso .map .isoPoints.point53 { left: 50.1%; top: 66.9%; } /*left: 49.1%; top: 64.9%;*/
#iso .map .isoPoints.point54 { left: 37.0%; top: 81.6%; }
#iso .map .isoPoints.point29 { left: 45.1%; top: 85.2%; }
#iso .map .isoPoints.point55 { left: 45.3%; top: 71.9%; }
#iso .map .isoPoints.point57 { left: 41.5%; top: 70.1%; }
#iso .map .isoPoints.point30 { left: 57.9%; top: 60.1%; }
#iso .map .isoPoints.point56 { left: 48%; top: 54.1%; } /*left: 50.0%; top: 61.1%;*/
#iso .map .isoPoints.point22 { left: 49.3%; top: 30.5%; }
#iso .map .isoPoints.active + .bloc {/*display: flex;*/width: 520px;}

#iso .map .bloc {position: absolute; padding: 0; background: rgba(255, 255, 255, 0.8);box-shadow: 3px 3px rgba(200, 201, 201, 0.8);z-index: 1201;width: 0;overflow: hidden;transition: width 0.5s;}

#iso .map .bloc h4 {font-size: 18px;color: #2da5d0;font-family: ralewayblack, Arial, Helvetica, sans-serif;}
#iso .map .bloc ul {margin: 0;list-style: none;}
#iso .map .bloc ul li {font-size: 13px;font-family: ralewayregular, Arial, Helvetica, sans-serif;background: url(../images/dots-blue.png) no-repeat 0px 5px;background-size: 10px;padding-left: 15px;}

#iso .map .bloc .contentBloc { width: 520px; height: 100%; padding: 15px; display: flex; align-items: center; justify-content: left; }
#iso .map .bloc .contentBloc .img {margin-right: 15px; height: 100%;}
#iso .map .bloc .contentBloc .img img { max-width: 240px; max-height: 200px; }

/*
#iso .map .bloc .contentBloc {position: relative; width: 520px; height: 100%; padding: 15px;}
#iso .map .bloc .contentBloc .img {margin-right: 15px; height: 100%; float: left;}
#iso .map .bloc .contentBloc .img img { max-width: 240px; max-height: 200px; }
#iso .map .bloc .contenu { height: 100%; display: flex; flex-direction: column; justify-content: center; background: #f00; }
#iso .map .bloc .contenu.full { width: 100%; }  
#iso .map .bloc .clear { clear: both; }
*/

#iso .map .bloc.bloc26 { right: 41.4%; top:38.0%; box-shadow: -3px 3px rgba(200, 201, 201, 0.8); }
#iso .map .bloc.bloc24 { right: 46.4%; top:46.9%; box-shadow: -3px 3px rgba(200, 201, 201, 0.8); }
#iso .map .bloc.bloc23 { left: 49.0%; top:35.8%; }
#iso .map .bloc.bloc25 { left: 48.7%; top:49.3%; }
#iso .map .bloc.bloc31 { left: 40.8%; top:41.0%; }
#iso .map .bloc.bloc46 { left: 44.1%; top:56.2%; }
#iso .map .bloc.bloc47 { left: 41.8%; top:63.4%; }
#iso .map .bloc.bloc48 { left: 33.1%; top:50.1%; }
#iso .map .bloc.bloc50 { left: 32.7%; top:59.5%; }
#iso .map .bloc.bloc51 { left: 29.4%; top:60.3%; }
#iso .map .bloc.bloc27 { left: 26.5%; top:70.4%; }
#iso .map .bloc.bloc28 { left: 38.9%; top:73.8%; }
#iso .map .bloc.bloc52 { left: 34.1%; top:76.4%; }
#iso .map .bloc.bloc53 { left: 50.1%; top: 66.9%; } /*left: 49.1%; top: 64.9%;*/
#iso .map .bloc.bloc54 { left: 37.0%; top:81.6%; }
#iso .map .bloc.bloc29 { left: 45.1%; top:85.2%; }
#iso .map .bloc.bloc55 { left: 45.3%; top:71.9%; }
#iso .map .bloc.bloc57 { left: 41.5%; top:70.1%; }
#iso .map .bloc.bloc30 { right: 42.1%; top:60.1%; box-shadow: -3px 3px rgba(200, 201, 201, 0.8); }
#iso .map .bloc.bloc56 { left: 48%; top: 54.1%; } /*left: 50.0%; top: 61.1%;*/
#iso .map .bloc.bloc22 { left: 49.3%; top:30.5%; }




/*
#iso .map .bloc.bloc22 {top: calc(33% - 170px/2);left: 53%;}
#iso .map .bloc.bloc23 {top: calc(46% - 170px/2);left: 54%;}
#iso .map .bloc.bloc24 {top: calc(47% - 170px/2);left: 57%;}
#iso .map .bloc.bloc25 {top: calc(49% - 170px/2);right: 54%;box-shadow: -3px 3px rgba(200, 201, 201, 0.8);}
#iso .map .bloc.bloc26 {top: calc(51% - 170px/2);left: 39%;}
#iso .map .bloc.bloc27 {top: calc(62% - 170px/2);left: 28%;}
#iso .map .bloc.bloc28 {top: calc(74% - 170px/2);left: 40%;}
#iso .map .bloc.bloc29 {top: calc(79% - 170px/2);left: 50%;}
#iso .map .bloc.bloc30 {top: calc(66% - 170px/2);left: 56%;}
#iso .map .bloc.bloc31 {top: calc(79% - 170px/2);right: 39%;box-shadow: -3px 3px rgba(200, 201, 201, 0.8);}
*/

#page2 {padding: 60px 0;background-image: url('../images/bg2.jpg'); background-attachment: fixed;background-position: center center;background-repeat: no-repeat;background-size: cover;position: relative}
.webp #page2 {background-image: url('../images/bg2.webp'); background-attachment: fixed;background-position: top;background-repeat: no-repeat;background-size: cover}
#page2 h2 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-align: center;margin: 0;font-size: 24px;}
#page2 h3 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 24px;margin-bottom: 30px;}
#page2 .bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(255,255,255, 0.8);}
#page2 .contenu { display: flex;flex-direction: column;align-items: center;text-align: center;}
/*#page2 .contenu .lien {display: inline-block;color: white;background: #2da5d0;border:1px solid #2da5d0;padding: 10px 50px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;margin-top: 40px;transition: all 0.5s;}
#page2 .contenu .lien:hover {color: #2da5d0;background: white;border:1px solid #2da5d0;transition: all 0.5s;}*/
#page2 .contenu .lien {display: inline-block;color: #2da5d0;background: white;border: 1px solid #2da5d0;padding: 10px 50px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;margin-top: 40px;transition: all 0.5s;}
#page2 .contenu .lien:hover {color: white;background: #2da5d0;border:1px solid #2da5d0;transition: all 0.5s;}

#bodyFooter{background: #ff3232}
#bodyFooter .img { 
  padding-right: 0;
  background: left center url('../images/imgFooter.jpg') no-repeat;
  background-size: cover;

}
#bodyFooter .webp .img {
  padding-right: 0;
  background: left center url('../images/imgFooter.webp') no-repeat;
  background-size: cover;
}





#bodyFooter .infos {display: flex;align-items: flex-end;justify-content: center;flex-direction: column;}
#bodyFooter .logo {margin-bottom: 30px;/* width: 70%; */width: 100%;}
#bodyFooter .logo img {max-width: 70%;}
#bodyFooter .adresse {margin-bottom: 30px;font-size: 0;width: 100%;min-height: 63px;}
#bodyFooter .adresse img {display: block;width: 33px;margin: 0 auto;}
#bodyFooter .adresse p {display: inline-block;margin: 0;color:#fff;}
#bodyFooter .adresse strong {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase}
#bodyFooter .contact {margin-bottom: 30px;font-size: 0;width: 100%;min-height: 63px;}
#bodyFooter .contact img {display: block;margin: 0 auto;}
#bodyFooter .contact p {display: inline-block;margin: 0;color:#fff;}
#bodyFooter .contact strong {margin-bottom: 5px;display: inline-block;font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase}
#bodyFooter .contact a {display: block;color: white;background: #ff3232;border: 1px solid white;padding: 6px 20px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 20px;text-transform: uppercase;font-size: 14px;text-decoration: none;width: 100%;text-align: center;transition: all 0.5s}
#bodyFooter .contact a:hover {color: #ff3232;border:1px solid #ff3232;background: white;transition: all 0.5s}
#bodyFooter .contact .mail{display: none;padding: 6px 0px;}
#bodyFooter .tel {margin-bottom: 30px;font-size: 0;width: 100%;min-height: 63px;}
#bodyFooter .tel img {display: block;width: 30px;margin: 0 auto;}
#bodyFooter .tel strong {margin-bottom: 5px;display: inline-block;font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase}
#bodyFooter .tel p {display: inline-block;margin: 0;color:#fff;}
#bodyFooter .tel a {display: block;color: white;background: #ff3232;border: 1px solid white;padding: 6px 20px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 20px;text-transform: uppercase;font-size: 14px;text-decoration: none;width: 80%;text-align: center;transition: all 0.5s}
#bodyFooter .tel a:hover {color: #ff3232;border:1px solid #ff3232;background: white;transition: all 0.5s}
#bodyFooter .tel .telephone{display: none;font-family: Arial, Helvetica, sans-serif;padding: 6px 0px;}
#bodyFooter .tel .telephone a { border: none; padding: 0; text-align: left; }
#bodyFooter .tel .telephone a:hover{ background: none; color: inherit; }

#bodyFooter .hr {font-size: 0;width: 100%;}
#bodyFooter .hr hr {border-top: 2px solid white;margin-top: 0;margin-bottom: 20px;}
#bodyFooter .rs {font-size: 0;width: 100%;}
#bodyFooter .rs .lien img {width: 30px;margin-right: 10px;}
#bodyFooter .rs ul {display: inline-block;margin: 0;vertical-align: middle;float: right;list-style: none;}
#bodyFooter .rs ul a {display: block;font-size: 16px;color: white;}

#baton2 hr {border-top: 6px solid #ff3131;transform: rotate(90deg);margin: 0;width: 260px;position: absolute;right: 15px;z-index: 10;}

#bandeauVideo picture{display:none;}

#footer {padding: 45px 0;}
#footer .dsoft {text-align: center;}
#footer .dsoft span {font-size: 14px;}
#footer .dsoft img  { margin-bottom: 5px }
#footer .dsoft a:hover { text-decoration: none; }

#horaires {padding: 110px 0;position: relative;    background-image: url(../images/bg3.jpg);background-attachment: fixed;background-position: top;background-repeat: no-repeat;background-size: cover;position: relative;}
.webp #horaires {background-image: url(../images/bg3.webp);background-attachment: fixed;background-position: 0 -100px;background-repeat: no-repeat;background-size: cover;}
#horaires h1 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-align: center;margin: 0;font-size: 28px;}
#horaires h2 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 28px}
#horaires .bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(255,255,255, 0.8);}

#infoContact {background: #ff3232;padding: 40px 0;}
#infoContact .adresse {font-size: 0;width: 100%;min-height: 63px;}
#infoContact .adresse img {display: block;width: 33px;margin: 0 auto;}
#infoContact .adresse p {display: inline-block;margin: 0;color:#fff;}
#infoContact .adresse strong {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase}
#infoContact .contact {font-size: 0;width: 100%;min-height: 63px;}
#infoContact .contact img {display: block;margin: 0 auto;width: 40px;}
#infoContact .contact p {display: inline-block;margin: 0;color:#fff;}
#infoContact .contact strong {margin-bottom: 5px;display: inline-block;font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase}
#infoContact .contact a {display: block;color: white;background: #ff3232;border: 1px solid white;padding: 6px 20px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 20px;text-transform: uppercase;font-size: 14px;text-decoration: none;width: 100%;text-align: center;transition: all 0.5s}
#infoContact .contact a:hover {color: #ff3232;background: white;transition: all 0.5s}
#infoContact .contact .mail{display: none;padding: 6px 0px;}
#infoContact .tel {font-size: 0;width: 100%;min-height: 63px;}
#infoContact .tel img {display: block;width: 35px;margin: 0 auto;}
#infoContact .tel strong {margin-bottom: 5px;display: inline-block;font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase;}
#infoContact .tel p {display: inline-block;margin: 0;color:#fff;}
#infoContact .tel a {display: block;color: white;background: #ff3232;border: 1px solid white;padding: 6px 20px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 20px;text-transform: uppercase;font-size: 14px;text-decoration: none;width: 80%;text-align: center;transition: all 0.5s}
#infoContact .tel a:hover {color: #ff3232;background: white;transition: all 0.5s}
#infoContact .tel .telephone{display: none;font-family: Arial, Helvetica, sans-serif;padding: 6px 0px;}
#infoContact .tel .telephone a { border: none; padding: 0; text-align: left; }
#infoContact .tel .telephone a:hover{ background: none; color: inherit; }

#contact {padding: 110px 0;}
#contact h2 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-align: center;margin: 0;font-size: 28px;}
#contact h3 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 28px;margin-bottom: 30px;}
#contact .inputForm {width: 100%;margin-bottom: 30px;padding: 12px 15px;border-radius: 25px;border: 2px solid #a9a9a9;font-family: ralewayregular, Arial, Helvetica, sans-serif;background: transparent;}
#contact .inputForm:focus {outline: 0;border: 2px solid #2da5d0 !important;}
#contact .inputForm.error {border: 2px solid #fd4f4f;}
#contact .eltForm span {position: absolute;right: 30px;top: 16px;color: #fd4f4f;font-size: 12px;font-family: ralewayitalic, Arial, Helvetica, sans-serif;z-index: -1;}
#contact .eltForm.submit {display: flex;justify-content: flex-end;}
#contact .eltForm.submit input[type="submit"] {display: inline-block;color: #2da5d0;background: white;border: 2px solid #2da5d0;padding: 10px 50px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;margin-top: 40px;outline: 0;transition: all 0.5s}
#contact .eltForm.submit input[type="submit"]:hover {background: #2da5d0;color: white;border: 2px solid #2da5d0;transition: all 0.5s}
#contact .eltForm.contenuPage {display: flex;justify-content: center;align-items: flex-end;}
#contact .eltForm.contenuPage p {margin: 0;}
#contact .eltForm.contenuPage p.warning {font-family: ralewaybold, Arial, Helvetica, sans-serif;background: #fd4f4f;width: 100%;text-align: center;color: #fff;margin-bottom: 30px;padding: 10px;}
#contact .eltForm.contenuPage p.success {font-family: ralewaybold, Arial, Helvetica, sans-serif;background: #32CD32;width: 100%;text-align: center;color: #fff;margin-bottom: 30px;padding: 10px;}
#contact .eltFormCheck {height: 50px;}
#contact .eltFormFile{align-items: flex-end;display: flex;}

#hide_file {margin: 0;display: flex;align-items: center;align-self: center;}
.display_file {font-family: ralewayregular, Arial, Helvetica, sans-serif;font-weight: normal;margin-left: 30px;}
.joindre-fichier {border: 2px solid #2da5d0;border-radius: 30px;}
input#selectedfile {background: url(../images/plus-fichier.png) no-repeat white 175px center;background-size: 15px;display: inline-block;padding: 7px 50px 7px 20px;border: 0;text-align: center;font-family: ralewaybold, Arial, Helvetica, sans-serif;text-transform: uppercase;color: #2da5d0;text-decoration: none;border-radius: 30px;font-size: 14px;transition: all 0.5s}
input#selectedfile:hover {background: url(../images/plus-fichier-white.png) no-repeat #2da5d0 175px center;background-size: 15px;color: white;transition: all 0.5s}
.display_file p {font-family: ralewayitalic, Arial, Helvetica, sans-serif;display: block;color: #2da5d0;margin: 0;}
.display_file a {font-family: ralewayitalic, Arial, Helvetica, sans-serif;text-decoration: underline;color: #000;font-size: 14px;}
.mapboxgl-canvas {filter: grayscale(100%) invert(0%);}
#list_file {display: flex;align-items: flex-end;}
.tailleFichier {font-size: 12px;padding-left: 22px;}


.planAcces {margin: 20px auto;display: block;text-align: center;}
.planAcces a {display: inline-block;color: #2da5d0;background: white;padding: 10px 50px;font-family: ralewaysemibold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 1px solid #2da5d0;transition: all 0.5s;}
.planAcces a:hover {color: white;background: #2da5d0;text-decoration: none;transition: all 0.5s;border: 1px solid white;}

#produit {background: #f5f5f5;padding: 25px 0 80px 0;}
#produit h1 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-align: center;margin: 0;font-size: 28px;}
#produit h2 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 28px;margin-bottom: 30px;}
/*
#produit .lienPDF {display: inline-block;color: white;background: #2da5d0;padding: 10px 50px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 0;transition: all 0.5s;border: 1px solid #2da5d0;}
#produit .lienPDF:hover {color: #2da5d0;background: white;border: 1px solid #2da5d0;transition: all 0.5s;}
*/
#produit .lienPDF {display: inline-block;color: #2da5d0;background: white;padding: 10px 50px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 0;transition: all 0.5s;border: 1px solid #2da5d0;}
#produit .lienPDF:hover {color: white;background:  #2da5d0;border: 1px solid #2da5d0;transition: all 0.5s;}
#produit ul {list-style: none;}
#produit ul li {background: url(../images/dots-red.png) no-repeat 0px 5px;background-size: 12px;padding-left: 25px;}

/*NEW CAROUSEL*/
div.carousel { box-sizing: border-box; position: relative; width: 100%; max-width: 1200px; overflow: hidden; height: auto; max-height: 350px;  margin: 0 auto; padding-bottom: 70px; }
div.carousel>ul { box-sizing: border-box;margin: 0; padding: 0; list-style: none; display: block;}
div.carousel>ul>li{ box-sizing: border-box;margin: 0; padding: 0; float: left; width: 33.33333%; display: block; padding: 0 10px 0 10px !important; background: none !important; }
div.carousel>ul>li>a>img{ width: 100%; height: auto; max-width: 100%;}
div.carousel>span.prev { box-sizing: border-box;display: block; position: absolute; width: 50px; height: 50px; left: 50%; bottom: 0; margin-left: -60px; 
  
  border: 1px solid  #2da5d0;
  background-color:  #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  text-align: center;
  font-size: 30px;
  line-height: 45px;
  color: #2da5d0;

  transition: background-color 400ms linear;
}
div.carousel>span.prev:hover{ cursor: pointer; background-color: #2da5d0; color: #ffffff; }
div.carousel>span.next { box-sizing: border-box;display: block; position: absolute; width: 50px; height: 50px; left: 50%; bottom: 0; margin-left: 10px; 

  border: 1px solid  #2da5d0;
  background-color:  #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  text-align: center;
  font-size: 30px;
  line-height: 45px;
  color: #2da5d0;

  transition: background-color 400ms linear;
}
div.carousel>span.next:hover{ cursor: pointer;  background-color: #2da5d0; color: #ffffff; }
div.carousel>span.none { opacity: 0.5; transition: opacity 200ms linear; }
div.carousel>span.none:hover { cursor: default; background-color: #ffffff; color: #2da5d0; }
@media screen and (max-width: 700px){
  div.carousel>ul>li { width: 50%; }
}
@media screen and (max-width: 500px){
  div.carousel>ul>li { width: 100%; padding: 0 !important; }
} 
/* .owlMap.owl-carousel .owl-nav button.owl-prev span {color: transparent;background: url('../images/a-left.png') no-repeat center;height: 45px;width: 30px;position: absolute;background-size: contain;left: -60px;}
.owlMap.owl-carousel .owl-nav button.owl-next span {color: transparent;background: url(../images/a-right.png) no-repeat center;height: 45px;width: 30px;position: absolute;background-size: contain;right: -60px;} */



.retourRealisations,#produit .retourRealisations2 {display: inline-block;color: #a9a9a9;background: #f5f5f5;padding: 10px 50px;font-family: ralewaysemibold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 1px solid #a9a9a9;transition: all 0.5s;/*float: right;*/margin-bottom: 12px;}
.retourRealisations:hover,#produit .retourRealisations2:hover {color: white;background: #2da5d0;border: 1px solid #2da5d0;text-decoration: none;}
#produit .retourRealisations2 {float: left;}

.retourRealisations { background: url('../images/ag-leftx2.png') 6% center no-repeat;background-size: 14px; transition: background 500ms linear; }
.retourRealisations:hover{ background: #2da5d0 url('../images/aw-leftx2.png') 6% center no-repeat; background-size: 14px; color: #f5f5f5; }

.retourRealisations.bottom { position: absolute; left: 15px; bottom: 0; margin-bottom: 0; }
@media screen and (max-width: 1200px){
  .retourRealisations.bottom { position: relative; width: 100%; margin-top: 40px; left: auto; }
}

#produit .selections {margin-bottom: 30px;}
#produit .selections .ok {width: 23px;height: 23px;border: 1px solid #a9a9a9;background: #2da5d0;margin-right: 5px;border-radius: 30px;}
#produit .selections .ko {width: 23px;height: 23px;border: 1px solid #a9a9a9;margin-right: 5px;border-radius: 30px;}
#produit .selections span {display: inline-block;vertical-align: middle;font-size: 16px;font-family: ralewaybold, Arial, Helvetica, sans-serif;}



#produit .ref {display: block;font-size: 14px;margin-bottom: 15px;margin-top: 15px;}

#videoProduit{padding:80px 0}
/*#videoProduit h2 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 28px;margin-bottom: 30px;}*/
#videoProduit h2 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-align: center;margin: 0;font-size: 28px;}
#videoProduit h3 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 28px;margin-bottom: 30px;}

#videoProduit .video-container {position: relative;margin-top: 20px;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;margin-bottom: 30px;}
#videoProduit .video-container iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#videoProduit .dateCreation {text-align: center;margin-bottom: 20px;}

#videoProduit .produitPrec {display: inline-block;color: #a9a9a9;background: white;padding: 10px 50px;font-family: ralewaysemibold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 1px solid #a9a9a9;transition: all 0.5s;background: url(../images/ag-left.png) 6% center no-repeat;background-size: 8px;}
#videoProduit span.produitPrec { opacity: 0.5; } 
#videoProduit .produitSuiv {display: inline-block;color: #a9a9a9;background: white;padding: 10px 50px;font-family: ralewaysemibold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 1px solid #a9a9a9;transition: all 0.5s;background: url(../images/ag-right.png) 94% center no-repeat;background-size: 8px;}
#videoProduit span.produitSuiv { opacity: 0.5; } 
#videoProduit a.produitSuiv:hover, #videoProduit a.produitPrec:hover, #videoProduit a.produitRetour:hover {color: white;background: #2da5d0;border: 1px solid #2da5d0;transition: all 0.5s;}
#videoProduit a.produitSuiv:hover{background: #2da5d0;background: #2da5d0 url(../images/aw-right.png) 94% center no-repeat;background-size: 8px;}
#videoProduit a.produitPrec:hover{background: #2da5d0;background: #2da5d0 url(../images/aw-left.png) 6% center no-repeat;background-size: 8px;}
#videoProduit .nav .suiv {display: flex;justify-content: flex-end;}
#videoProduit .produitRetour {display: inline-block;color: #a9a9a9;background: white;padding: 10px 50px;font-family: ralewaysemibold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 1px solid #a9a9a9;transition: all 0.5s;}
#videoProduit .nav .middle {display: flex;justify-content: center;}

#categorie {padding: 80px 0;}
#categorie h1 {font-family: ralewayblack, Arial, Helvetica, sans-serif;text-align: center;margin: 0;font-size: 28px;}
#categorie h2 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 28px;margin-bottom: 30px;}
#categorie .blocRealisations:first-child{border-top:1px solid #a9a9a9;}
#categorie .blocRealisations {transition: all 0.5s;padding: 20px 0px;border-bottom:1px solid #a9a9a9;}
#categorie .blocRealisations:hover {transition: all 0.5s;background: #2da5d0;}
#categorie .blocRealisations .contenu {margin-left: 15px;transition: all 0.5s;height: 100%;border-left: 5px solid #2da5d0;display: flex;align-items: end;justify-content: center;padding-left: 30px;font-family: ralewayextralight, Arial, Helvetica, sans-serif;flex-direction: column;}
#categorie .blocRealisations .contenu h5 { font-size: 17px; font-weight: normal; font-family: ralewayblack, Arial, Helvetica, sans-serif;}
#categorie .blocRealisations:hover .contenu{color:white;transition: all 0.5s;}
#categorie .blocRealisations .lien {height: 100%;display: flex;align-items: center;justify-content: center;}
/*#categorie .blocRealisations .lien a {transition: all 0.5s;background: #2da5d0;color: white;padding: 12px 40px;border-radius: 20px;border: 1px solid;font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase;font-size: 14px;}
#categorie .blocRealisations .lien a:hover {text-decoration:none;transition: all 0.5s;background: white;color: #2da5d0;border: 1px solid white;}*/
#categorie .blocRealisations .lien a {transition: all 0.5s;background: white;color: #2da5d0;padding: 12px 40px;border-radius: 20px;border: 1px solid;font-family: ralewayblack, Arial, Helvetica, sans-serif;text-transform: uppercase;font-size: 14px;}
#categorie .blocRealisations .lien a:hover {text-decoration:none;transition: all 0.5s;background: #2da5d0;color: white;border: 1px solid white;}
#categorie .center{text-align: center}
.retourMosaique {display: inline-block;margin-bottom: 30px;border: 1px solid #a9a9a9;padding: 12px 40px;border-radius: 20px;color: #a9a9a9;font-family: ralewaybold, Arial, Helvetica, sans-serif;text-transform: uppercase;font-size: 14px;transition: all 0.5s;}
.retourMosaique:hover{text-decoration:none;color: white;background: #2da5d0;border: 1px solid #2da5d0;transition: all 0.5s;}
#categorie .clickPlusProduitCenter {text-align: center;}
#categorie .clickPlusProduitButton {display: inline-block;color: #ababab;background: white;border-radius: 20px;border: 1px solid #ababab;transition: all 0.5s;font-size: 12px;padding: 12px 40px;}
#categorie .clickPlusProduitButton:hover {color: white;background: #2da5d0;text-decoration:none;transition: all 0.5s;border: 1px solid white;}
#categorie .clickPlusProduitButton span{ font-family: ralewaybold, Arial, Helvetica, sans-serif;text-transform: uppercase}
#categorie .size0 {font-size: 0;}
#categorie .pagination {text-align: center;margin: 0 auto;display: inline-block;width: 80%;margin-top :20px}
#categorie .pagination li {display: inline-block;}
/*#categorie .pagination li a {font-size: 16px;margin: 0px 5px;padding: 11px;display: block;border: 1px solid #a9a9a9;width: 50px;height: 50px;border-radius: 28px;color: #a9a9a9;}
#categorie .pagination li a:hover {color: #2da5d0;border: 1px solid #2da5d0;text-decoration: none;}*/
#categorie .pagination li a {font-size: 16px;margin: 0px 5px;padding: 11px;display: block;border: 1px solid #a9a9a9;width: 50px;height: 50px;border-radius: 28px;color: #a9a9a9;transition: all 0.5s;}
#categorie .pagination li.active a {color: white;background:#2da5d0;border: 1px solid #2da5d0;text-decoration: none;transition: all 0.5s;}
#categorie .pagination li a:hover {color: #2da5d0; background:transparent; border: 1px solid #2da5d0;text-decoration: none;transition: all 0.5s;}


#categorie .paginationPrev.pagination {width: 10%;}
#categorie .paginationNext.pagination {width: 10%;}
#categorie .pagination.paginationPrev li a {padding: 0;border: 0;}
#categorie .pagination.paginationNext li a {padding: 0;border: 0;}
/*#categorie .pagination li a:hover img {transition: all 0.5s;filter: brightness(0) invert(1);}*/
#categorie .pagination li a:hover img { transition: all 0.5s; opacity: 0.5; transition: all 0.5s;}
#categorie .blocRealisation {margin: 10px -7.5px 0 -7.5px;position: relative;}
#categorie .blocRealisation .back {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(48,157, 199, 0.8);color: white;display: flex;justify-content: center;align-items: center;text-align: center;padding: 15px;opacity: 0;transition: opacity 0.5s;}
#categorie .blocRealisation:hover .back{opacity: 1;transition: opacity 0.5s;}
#categorie .blocRealisation .back .voir {display: inline;color: white;background: transparent;border: 1px solid;padding: 6px 20px;font-family: ralewaybold, Arial, Helvetica, sans-serif;border-radius: 20px;text-transform: uppercase;font-size: 14px;text-decoration: none;text-align: center;transition: all 0.5s;}
#categorie .blocRealisation .back .voir:hover {transition: all 0.5s;background: white;color: rgb(48,157, 199);}
#categorie .blocRealisation .back h4 {font-family: ralewayblack, Arial, Helvetica, sans-serif; font-weight: normal; text-align: center;margin: 0;font-size: 19px;}
#categorie .blocRealisation .back h5 {font-family: ralewayextralight, Arial, Helvetica, sans-serif;text-align: center;font-size: 18px;margin-bottom: 15px;}
.owlMap {display: flex !important;align-items: center;}
.owlMap .contenu h4 {font-family: ralewayblack;font-size: 16px;}
.owlMap .contenu ul li {background: url(../images/dots-red.png) no-repeat 0px 5px;background-size: 9px;padding-left: 12px;font-family: ralewayregular, Arial, Helvetica, sans-serif;font-size: 12px;}
.owlMap .contenu ul {list-style: none;margin: 0;}
.owlMap.owl-carousel .owl-nav button.owl-prev span {color: transparent;background: url('../images/a-left.png') no-repeat center;height: 45px;width: 30px;position: absolute;background-size: contain;left: -60px;}
.owlMap.owl-carousel .owl-nav button.owl-next span {color: transparent;background: url(../images/a-right.png) no-repeat center;height: 45px;width: 30px;position: absolute;background-size: contain;right: -60px;}
.owlMap .blocGauche .contenu {padding-left: 0;display: flex;align-self: center;flex-direction: column;}
.owlMap .blocDroite .contenu {padding-right: 0;display: flex;align-self: center;flex-direction: column;}
.owlMap .contentBloc {margin-bottom: 15px;}
.owlMap.owl-carousel .owl-item img {display: block;max-width: 99%;width: auto;}






@media (max-width: 1399.98px) {
  #baton hr, #baton2 hr{display: none}

}
@media (min-width: 1200px)  and (max-width: 1399.98px) {
  #bodyFooter .picto { padding: 0; }
}
@media (max-width: 1199.98px) {
#iso .padding {padding: 0 15px;}
  #video video {display: none;}
  #iso .contenuIso{position: relative;top: inherit;right: inherit;padding: 30px 0 0 0; width: 100%;}
  #video {background: url('../images/bg-mobile.jpg') no-repeat center 0;background-size: cover;}
  #bodyFooter .img{display: flex;align-items: center}
  #page .blocImages{display: flex;align-items: center}
  #produit .meca{padding-right: 0;}
  #produit .selections span{font-size: 14px;}
  #produit .retourRealisations, #produit .retourRealisations2{font-size:12px;}
  #videoProduit .produitPrec {padding: 10px 15px 10px 30px;}
  #videoProduit .produitSuiv {padding: 10px 30px 10px 15px;}
  #videoProduit .produitRetour, #videoProduit .produitPrec, #videoProduit .produitSuiv{display: flex;align-self: flex-end; font-size: 12px;width: 100%;justify-content: center;}

  #page .images .img1 { width: 90%; }
  #page .images .img2 { width: 70%; margin-top: -25px; margin-left: 30%; }
  #page .images .img3 { width: 50%; margin-top: -25px; margin-left: 10%; }
  #page .images .img4 { width: 60%; margin-top: -25px; margin-left: 40%; }
  #page .images .img5 { width: 70%; margin-top: -25px; margin-left: 20%; }

}

@media (min-width: 900px) and (max-width: 1199.98px) {
  .blocGauche { padding-left: 15%; padding-right: 15%; }
  .blocDroite { padding-left: 15%; padding-right: 15%; }
  .blocDroite .contenu { padding-left: 20%; } /*decalage pour rapprocher le texte de l'image*/
}
@media (min-width: 700px) and (max-width: 900px) {
  .blocGauche { padding-left: 5%; padding-right: 5%; }
  .blocDroite { padding-left: 5%; padding-right: 5%; }
  .blocDroite .contenu { padding-left: 10%; } /*decalage pour rapprocher le texte de l'image*/
}

@media (max-width: 991.98px) {  
  #search {padding: 25px 0 50px 0;margin-bottom: 0px;}
   #search form{margin-bottom: 25px;}
  #bodyHeader .logo {z-index: 5;}
  .menuMobile {width: 100%;position: absolute;top: 0;right: 0;left: 0;bottom: 0;display: flex !important;justify-content: flex-end;align-items: center;padding: 0 15px;}
  .menuMobile #navMobile {margin: 0;}
  .menuMobile #navMobile li {list-style: none;width: 90%;text-align: center;}
  .menuMobile #navMobile li .sousMenuMobile {z-index: 100;height: 0;overflow: hidden;position: absolute;transition: height 0.5s;left: 0;right: 0;bottom: 0;top: 0;background: rgba(0, 0, 0, 0.9);padding: 0 15px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
  .menuMobile #navMobile li .btnMobile span {position: relative;border-bottom: 3px solid #1d1d1b;display: block;height: 10px;width: 30px;clear: both;transition: transform 0.4s ease;transition: transform 0.5s ease, border-bottom 0.2s linear 0.5s;}
  .menuMobile #navMobile li .btnMobile {width: 30px;display: block;position:relative;z-index: 101;}
  .menuMobile #navMobile li .btnMobile span.trois {margin: 0;}
  .menuMobile #navMobile li .btnMobile.open span{top: 10px;transform: rotate(45deg);border-color: white;transition: transform 0.5s ease;}
  .menuMobile #navMobile li .btnMobile.open span.trois{top: -10px;left: -5px;transform: rotate(-45deg);transition: transform 0.5s ease;border-color: white;}
  .menuMobile #navMobile li .btnMobile.open span.deux{border-bottom: 0;}
  .menuMobile #navMobile li .btnMobile.open + .sousMenuMobile {height: 100vh;transition: height 0.5s;}
  .menuMobile #navMobile li .sousMenuMobile li a {border-top: 1px solid #383838;padding: 0px 0;display: block;width: 100%;height: 60px;line-height: 60px;color: white;font-family: ralewayregular;letter-spacing: 2px;font-size: 18px;}
  .menuMobile #navMobile li .sousMenuMobile li:last-child a {border-bottom: 1px solid #383838;}

  #bodyHeader .langMobile {z-index: 1001;padding: 0;}
  #bodyHeader .langMobile .lang {display: inline-block;height: 34px;vertical-align: middle;list-style: none;line-height: 34px;width: 100%;text-align: right;margin: 0;font-size: 0;}
  #bodyHeader .langMobile .lang span {vertical-align: middle;height: 30px;width: 30px;line-height: 30px;border: 1px solid;text-align: center;border-radius: 30px;font-size: 14px;color: white;}
  #bodyHeader .listLangue {text-align: center;width: 36px;height: 38px;overflow: hidden;display: inline-block;margin-right: 0px;padding: 0px;transition: height 0.5s, background 0.5s ease 0.5s;border-radius: 30px;background:transparent;line-height: 30px;}
  #bodyHeader .lang a{padding: 0;}
  #bodyHeader .listLangue.open {height: calc(35px*3);transition: height 0.5s;background: #3e3e3e;}
  #bodyHeader .lang a:hover span {background: white;color: #3e3e3e;display: inline-block;transition: all 0.2s}
  #bodyHeader .langMobile .lang .firstLangue span {background: white;color:#3e3e3e}

  #bodyFooter .infos {padding-top: 20px;padding-bottom: 20px;}
  input#selectedfile {width: 100%;text-align: left;padding: 7px 50px 7px 20px;background: url(../images/plus-fichier.png) no-repeat white 96% center;background-size: 15px;}
  .display_file p {display: inline-block;width: 50%;}
  .last.display_file {margin-left: 15px;}
  .display_file a {width: 50%;display: inline-block;text-align: right;padding-left: 10px;}
 }
@media (max-width: 767.98px) {
  
  #video .blocAccueil h2 {font-size: 26px;}
  #video .blocAccueil h1 {font-size: 30px;}

  #bandeauVideo video{display: none}
  #bandeauVideo picture{display:block;}

  #horaires {padding: 50px 0;}
  #horaires h1 {font-size: 24px;}
  #horaires h2 {font-size: 24px;}

  #infoContact{display:none;}

  #contact {padding: 50px 0;}
  #contact h2 {font-size: 24px;}
  #contact h3 {font-size: 24px;}
  #contact .eltFormCheck{height: inherit;margin-bottom: 30px;}
  #contact .inputForm {font-size: 14px;}
  #contact .eltForm.submit input[type="submit"]{width: 100%;margin-top: 30px;}
  #contact .eltFormFile {display: block;margin-bottom: 30px;}
  #contact .eltFormFile label {display: block;}
  .eltForm .g-recaptcha {text-align: center;margin: 0 auto;display: block;}
  .eltForm .g-recaptcha > div {display: inline-block;}
  
  #bodyFooter .img{padding-left: 0;}
  #bodyFooter .infos {padding-top: 30px;padding-bottom: 30px;display: block;}
  #bodyFooter .logo {text-align: center;width: auto;}
  #bodyFooter .rs, #bodyFooter .hr, #bodyFooter .tel, #bodyFooter .contact, #bodyFooter .adresse {width: auto;}
  #bodyFooter .logo img {max-width: 60%;}
  #bodyFooter p {font-size: 12px;}
  #bodyFooter .tel a, #bodyFooter .contact a {font-size: 12px;}
  
  #categorie {padding: 50px 0;}
  #categorie .blocRealisation .back {position: relative;color: black;opacity: 1;background: none;}
  #categorie .blocRealisation .back .voir {background: white; color:#2da5d0;padding: 12px 40px;font-size: 12px;}
  #categorie .blocRealisation {margin: 0 0 20px 0px;}
  #categorie .blocRealisation .back h4 {font-size: 16px;}
  #categorie .blocRealisation .back h5 {font-size: 16px;}
  #categorie .blocRealisations:hover {background: none;}
  #categorie .blocRealisations:hover .contenu {color: black;}
  #categorie .blocRealisations .contenu {border-left: 0px;text-align: center;padding: 0;display: block;margin: 10px 0;height: auto;font-size: 14px;}
  #categorie .blocRealisations .contenu h5 {margin: 0;font-size: 16px;}
  #categorie .pagination li a {width: 30px;height: 30px;padding: 0;}
  #categorie .blocRealisations .lien a {font-size: 12px;}
  #categorie h1 {font-size: 24px;}
  #categorie h2 {font-size: 24px;}
  #categorie .blocRealisations{border: 0;}
  #categorie .blocRealisations:first-child{border: 0}
  .retourMosaique {font-size: 12px;}
  
  #produit .retourRealisations{width: 70%;text-align: center;float: none;display: block;margin: 0px auto 12px auto;padding: 10px 20px;font-size: 12px;}
  #produit .retourRealisations2{display: none;}
  #produit h1, #produit h2 {font-size: 24px;}
  #produit .selections .ok, #produit .selections .ko {width: 18px;height: 18px;}
  #produit .lienPDF {margin-bottom: 30px;width: 100%;text-align: center;margin-top: 15px;}
  #produit img{margin-bottom:15px;}
  #produit {padding: 25px 0 50px 0;}
  
  #videoProduit {padding: 50px 0;}
  #videoProduit h2 {font-size: 24px;}
  #videoProduit h3 {font-size: 24px;margin: 0;}
  #videoProduit .produitSuiv {font-size: 12px;width: 100%;padding: 10px 8px;text-align: center;}
  #videoProduit .produitPrec {width: 100%;text-align: center;margin-bottom: 15px;font-size: 12px;}

  #page {padding-bottom: 30px;background: #ff3131;margin-top: 30px;padding-top: 0;margin-bottom: 20px;}
  #page .contenu {padding-right: 0;margin: 0px -15px;background: white;padding: 15px;}
  #page .contenu h1 {font-size: 24px;}
  #page .images {padding-top: 30px;}
  /* #page .images .img1 {margin-left: 0px;width: 90%;}
  #page .images .img2 {margin-top: -65px;width: 75%;float: right;} */
  #page .images .img1 { width: 80%; }
  #page .images .img2 { width: 60%; margin-top: -35px; margin-left: 40%; }
  #page .images .img3 { display: none; }
  #page .images .img4 { display: none; }
  #page .images .img5 { display: none; }


  #page2 .contenu .lien {font-size: 12px;}
  #page2{padding: 50px 0;}
  #page .contenu ul li {font-size: 14px;background-size: 9px;padding-left: 15px;}
  #iso {margin-bottom: 20px;}
  #page404{padding: 50px 0;}
  .owlMap .contenu ul li {font-size: 12px;}
  .owlMap .contenu h4 {font-size: 14px;}
  .owlMap.owl-carousel .owl-nav button.owl-next span {height: 30px;width: 15px;right: -30px;}
  .owlMap.owl-carousel .owl-nav button.owl-prev span {height: 30px;width: 15px;left: -30px;}

}
@media (max-width: 575.98px) { 
  #footer .dsoft span {display: block;}
  #footer .dsoft img {margin: 10px 0;}
  #footer {padding: 30px 0;}
}
@media screen and (max-width: 380px) { 
  #produit .selections .ok {width: 16px;height: 16px;border-radius: 50%; margin-right: 1px;}
  #produit .selections .ko {width: 16px;height: 16px;border-radius: 50%; margin-right: 1px;}
  #produit .selections span {font-size: 13px;}
}

/*MAPBOX*/
.marker {
  width: 80px;
  height: 156px;
  background: url('../images/icon-map.png') 0 0 no-repeat;
  background-size: 80px auto;
  cursor: pointer; 
}
.mapboxgl-popup {
  max-width: 200px;
}
.mapboxgl-popup-content {
  text-align: center;
  background: #f00;
}

.mapboxgl-popup-content p{
  font-family: arial;
  font-size: 14px;
  color: #000000 !important;
}
.mapboxgl-popup-content h3{
  font-size: 35px;
  color: #ff3131;


}
.mapboxgl-popup-content a{
  color: inherit;
  font-size: 12px;
}
.mapboxgl-popup-content a:hover{
  color: #ff3131;
}

#mapContainer{
  position: relative;
}
#mapContainer #map{
  pointer-events: none; /*desactivation des evenement souris et reactivation an JS*/
}

#mapContainer .planAcces { 
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 20px auto;
  text-align: center;
}
#mapContainer .planAcces a {display: inline-block;color: #2da5d0;background: white;padding: 10px 50px;font-family: ralewaysemibold, Arial, Helvetica, sans-serif;border-radius: 30px;text-transform: uppercase;font-size: 14px;text-decoration: none;border: 1px solid #2da5d0;transition: all 0.5s;}
#mapContainer .planAcces a:hover {color: white;background: #2da5d0;text-decoration: none;transition: all 0.5s;border: 1px solid white;}

/*CAROUSEL OWL*/

.owl-carousel-realisations .owl-nav { margin-top: 10px; text-align: center; }
.owl-carousel-realisations .owl-nav button.owl-prev{ margin: 10px 5px 0 5px;  border: 1px solid #2da5d0 !important; background-color: #fff !important; width: 50px; height: 50px; border-radius: 50%; }
.owl-carousel-realisations .owl-nav button.owl-prev.disabled{ opacity: 0.5; }
.owl-carousel-realisations .owl-nav button.owl-prev:hover{ background: #2da5d0 !important; }
.owl-carousel-realisations .owl-nav button.owl-prev.disabled:hover{ background-color: #fff !important; cursor: default; }
.owl-carousel-realisations .owl-nav button.owl-prev span{ font-size: 40px; line-height: 25px; color: #2da5d0; }
.owl-carousel-realisations .owl-nav button.owl-prev:hover span{ color: #fff; }
.owl-carousel-realisations .owl-nav button.owl-prev.disabled:hover span{ color: #2da5d0;}
.owl-carousel-realisations .owl-nav button.owl-next{ border: 1px solid #2da5d0 !important; background-color: #fff !important; width: 50px; height: 50px; border-radius: 50%; }
.owl-carousel-realisations .owl-nav button.owl-next.disabled{ opacity: 0.5; }
.owl-carousel-realisations .owl-nav button.owl-next:hover{ background: #2da5d0 !important; }
.owl-carousel-realisations .owl-nav button.owl-next.disabled:hover{ background-color: #fff !important; cursor: default; }
.owl-carousel-realisations .owl-nav button.owl-next span{ font-size: 40px; line-height: 25px; color: #2da5d0; }
.owl-carousel-realisations .owl-nav button.owl-next:hover span{ color: #fff; }
.owl-carousel-realisations .owl-nav button.owl-next.disabled:hover span{ color: #2da5d0;}
.owl-carousel-realisations  img { width: auto !important; max-height: 270px; }