html,body {margin:0; padding:0; width:100%; height:100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; font-weight: normal;}
body {font-family:'Montserrat-Regular',Arial; font-size:15px; color:#111; background:#fff;}
.s {margin:auto; width:1400px;}
.smax {margin:auto; width:1430px;}
.zero {font-size:0;}
.clear {clear:both;}
a {outline:none; text-decoration: none;}
a:link, a:visited {color:#111;}
a:hover {color:#000;}
ul {margin:10px 0;}
h1 {font-size:40px; margin:0; padding:0; font-family:'Montserrat-Bold'; color:#0b6e73; line-height:40px;}
h2 {font-size:26px; margin:0; padding:0; font-family:'Montserrat-Bold';}
h3 {font-size:22px; margin:0 0 10px 0; padding:0; font-family:'Montserrat-Bold'; color:#0b6e73;}


#load {position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; background:rgba(11,110,115,0.9);}
#empty {position:relative; width:100%; height:80px;}
#top {position:fixed; width:100%; top:0; z-index:99; font-size:0; transition:0.2s; padding:30px 0 0 0;}
.fixtop, .int {background:#fff; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1); padding:10px 0 !important;}
#logo {display:inline-block; vertical-align:middle; width:110px;}
#logoimg, #menur {opacity:0; max-width:100%; box-shadow:none;}
.fixtop #logoimg, .int #logoimg {opacity:1; padding:0 !important;}
.fixtop #menur, .int #menur {opacity:1;}
#menu, #rmenu {display:inline-block; vertical-align:middle; width:calc(100% - 110px); text-align:right;}
.item {position:relative; font-family:'Montserrat-SemiBold'; font-size:18px; display:inline-block; vertical-align:top; margin-left:10px;}
.item a {color:#fff; display:block; transition:0.2s; padding:8px 12px;}
.item a:hover, .item:hover a, .item.on a {background:#009c99; border-radius:2px;}
.fixtop .item a, .int .item a {color:#0b6e73;}
.fixtop .item a:hover, .fixtop .item:hover a, .int .item a:hover, .int .item:hover a, .fixtop .item.on a, .int .item.on a {color:#fff;}
.smenu {position:absolute; display:none; padding-top:6px; z-index:99;}
.sitem a:link, .sitem a:visited {display:inline-block; width:200px; letter-spacing:0; text-align:left; font-size:16px; color:#fff !important; margin:2px 0; cursor:pointer; background:#0b6e73; padding:8px 12px; border-radius:2px;}
.sitem a:hover {background:#009c99;}
#rmenu {display:none;}

#home {position:relative; width:100%; height:100%;}
#logo_cdje {position:absolute; left:50px; top:100px; z-index:3;}
#intro_cdje {position:absolute; left:50px; transform:translateY(-50%); top:60%; z-index:3;}
#intro_cdje h1 {padding:20px 20px 20px 0; font-size:30px; display:inline-block; background:#fff; border-radius:2px;}
#intro_cdje h2 {padding:0 20px 20px 0; font-size:22px; display:inline-block; background:#fff; font-family: 'Montserrat-Regular'; font-weight:normal; border-radius:2px; max-width:600px;}
#triangle_cdje {position:absolute; left:20%; bottom:100px; z-index:3; display:inline-block; height:0; width:0; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:87px solid #009c99; animation-name:start; animation-duration:0.5s; animation-direction:alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transition:0.2s;}
@keyframes start { from {opacity:1} to {opacity:0;} }

#tri_cdje {position:absolute; width:550px; height:100%; left:20%; background:url('/ima/tri_cdje.png') no-repeat; z-index:2;}
#diapo {position:relative; left:20%; width:80%; height:100%; background:#0b6e73; z-index:1; overflow:hidden;}
#diapo img {position:absolute; width:100%; height:100%; top:0; left:0; object-fit:cover !important;}

#page {position:relative; width:100%; z-index:60; padding:30px 0; max-width:1430px; margin:auto;}
#page img {vertical-align:middle; max-width:100%; border-radius:2px;}
.same {display:inline-block; margin:0 10px 2px 0; background:#0b6e73; padding:10px 20px; transition:0.2s; border-radius:2px;}
.same:hover {background:#009c99;}
.same a {color:#fff;word-break: break-all;}
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('/fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.case {position:relative; display:inline-block; vertical-align:top; margin:15px; padding:10px; font-size:16px; width:calc(20% - 54px); border-radius:2px; border:2px solid #eee; transition:0.2s; overflow:hidden;}
.case:hover {border:2px solid #0b6e73;}
.case img {width:100%; margin-bottom:10px;}
.case h2 {font-family:'Montserrat-Bold'; margin:0; font-weight:bold; font-size:18px; text-align:center; display:block; padding:0; color:#0b6e73;}
.case h3 {font-family:'Montserrat-Bold'; margin:0; font-weight:normal; font-size:15px; text-align:center; display:block; padding:0; min-height:36px; color:#444;}
.case h4 {font-family:'Montserrat-Regular'; margin:0; font-weight:normal; font-size:15px; text-align:left; display:block; padding:4px 0 0 0; min-height:38px;}
#carte {position:relative; height:650px; margin:15px 0; border-radius:2px;}
.map {position:relative; height:100%; width:100%; top:0; bottom:0;}
.marker {border:none; cursor:pointer; height:26px; width:32px; background-image: url('/ima/marker.png');}
.clearfix {display:block;}
.clearfix:after {content:'.'; display:block; height:0; clear:both;visibility:hidden;}
.mapboxgl-popup {padding-bottom: 50px; border-radius:2px;}
.mapboxgl-popup-close-button {display:none;}
.mapboxgl-popup-content {padding:0; width:280px; overflow:hidden;}
.mapboxgl-popup-content-wrapper {padding:1%;}
.mapboxgl-popup-content p {background:#0b6e73; color:#fff; margin:0; font-size:20px; display:block; padding:10px; font-family: 'Montserrat-SemiBold';}
.mapboxgl-popup-content cite {margin:0; display:block; padding:10px 0; font-weight:normal; font-size:15px; font-style:normal;}
.mapboxgl-popup-content div {padding:10px;}
.mapboxgl-container .leaflet-marker-icon {cursor:pointer;}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {margin-top:0px;}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {border-bottom-color: #111;}
.mapboxgl-popup-content .voir {color:#0b6e73; margin:0; font-size:15px; display:block; font-weight:bold;}
.highslide-dimming{background:rgba(11,110,115,0.9);;}
.highslide-caption, .highslide-number, .highslide-controls {display:none;}
.highslide, .highslide highslide-active-anchor{outline:none;text-decoration:none;transition:all 0.2s;}
#bas {position:relative; padding:20px 0; width:100%; color:#fff; background:#0b6e73;}
#bas a:link, #bas a:visited {color:#fff;}







#fic-gauche {float:left; width:calc(33.33% - 30px); margin:0 15px; font-size:0;}
#fic-gauche img {width:calc(100% - 20px);}
#fic-gauche .thumb {display:inline-block; margin:20px 20px 0 0; width:calc(33.33% - 20px);}
#fic-gauche .thumb img {width:100%;}
#fic-droite {float:right; margin:0 15px 0 0; width:calc(66.66% - 15px); text-align:justify;}
#adh {position:relative; padding:50px 0 80px 0; width:100%; color:#111; background:linear-gradient(#fff,#feca06);}
.columns {position:relative; -webkit-columns:5; -moz-columns:5; columns:5; width:calc(100% - 30px); margin:0 15px;}
.columns p {margin:0 0 4px 0; font-size:14px;} 
.columns p a {color:#111;}
#svg2 {position:relative; width:100%; z-index:55; height:50px; margin:-50px 0 0 0;}

.text, .textj {outline:none; border:1px solid #ddd; width:calc(100% - 20px); font-family:'museo500',Arial; font-size:16px; color:#000; padding:10px; margin:2px 0; border-radius:2px;}
.textj {background:#fffbe9;}
.g-recaptcha{margin:5px 0;text-align:center;display:inline-block;}
.bouton {font-family:'museo500',Arial;-webkit-appearance:none;border:0;background:#00b002;color:#ffffff;padding:10px 20px;font-size:20px;cursor:pointer;transition:0.2s all ease; border-radius:2px;}
.bouton:hover{background:#10d413;}
.erreur{color:red;font-size:16px;}






@media screen and (max-width:1430px)
  {
  .s {width:calc(100% - 30px); margin:0 15px;}
  #page {width:100%; padding:30px 0;}
  .smax {width:100%;}
  #diapo, #tri_cdje {left:25%; width:75%;}
  }
@media screen and (max-width:1160px)
  {
  .case {width:calc(25% - 54px);}
  #diapo, #tri_cdje {left:30%; width:70%;}
  }

@media screen and (max-width:950px)
  {
  #logo_cdje {top:15px; left:15px;}
  #logo_cdje img {height:180px;}
  #intro_cdje {left:0; top:50%;}
  #intro_cdje h1 {padding:15px;}
  #intro_cdje h2 {padding:0 15px 15px 15px; font-size:15px;}
  #diapo, #tri_cdje {left:40%; width:60%;}
  #triangle_cdje {bottom:15px;}

  .case {width:calc(33.33% - 54px);}
  #rmenu {display:inline-block;}

  #menu {display:none; position:absolute; top:80px; left:0; right:0; width:100%; text-align:center; margin:0;}
  .item {display:block; margin:0 15px 5px 15px; background:#009c99; padding:20px 15px; font-size:20px; border-radius:2px;}
  .item a, .item a:hover, .item:hover a {color:#fff !important;}
  .smenu {position:relative; top:0px !important; padding:20px 0 0 0; margin:0;}
  .sitem a:link, .sitem a:visited {display:block; width:auto; text-align:center; padding:15px 10px; margin:0 0 4px 0; font-size:18px;}

  h1 {font-size:30px; line-height:30px;}
  table {width:100%;}
  td {display:block; width:auto;}
  .text {width:100% !important; -webkit-appearance:none;}
  .same {display:block; margin:4px 0 0 0;}
  #bas div, #bas p {text-align:center !important;}

  #fic-gauche, #fic-droite {float:none; margin:0 15px 30px 15px; width:calc(100% - 30px);}
  #fic-gauche img {width:100%;}
  #fic-gauche .thumb {display:block;margin:15px 0; width:100%;}
  .case h3, .case h4 {min-height:auto;}
  }

@media screen and (max-width:700px)
  {
  .case {width:calc(50% - 54px);}
  #intro_cdje h1 {background:none;}
  #intro_cdje h2 {padding-top:20px; text-align:justify; margin-top:-10px;}
  #diapo, #tri_cdje {left:50%; width:50%;}
  #carte {height:400px;}
  }
@media screen and (max-width:450px)
  {
  .case {width:calc(100% - 54px);}
  }