html,body {margin:0; padding:0; width:100%; -webkit-font-smoothing: antialiased;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
body {color:#116b97; font-family:truenolight,Arial; font-size:16px; background:#fff;}
h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-weight:normal;}
.left {float:left;}
.right {float:right;}
.right img {vertical-align:middle;}
.right::after {clear:both;}
.tright {float:right;}
.clear {clear:both;}
a, .msg {text-decoration:none; cursor:pointer;}
img {border-radius:8px;}
#main {position:relative; margin:20px auto 0 auto; width:100%; max-width:1440px; font-size:0;}

#header {position:relative; width:100%; text-align:center; height:400px; overflow:hidden;}
#logo_ccse {position:absolute; top:0; left:calc(50% - 110px); z-index:99; width:160px; height:100px; background:#fff; padding:15px 30px 20px 30px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;}
#logo_ccse img {border-radius:0;}
#annuaire {position:relative; margin-top:170px; line-height:59px; font-size:59px; color:#fff; z-index:99; text-shadow: 0px 1px 5px #116b97}
#annuaire span {display:block; font-family: 'truenoregular'; font-size:70px; line-height:60px;}
#sep {position:absolute; width:100%; height:50px; bottom:0; z-index:60;}

.diapo {position:absolute; width:100%; height:100%; top:0; left:0;}
.diapo img {position:absolute; min-width:100%; min-height:100%; width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%);}
.leaves {animation: leaves 8s ease-in-out infinite alternate; display:block; overflow:hidden;}
@keyframes leaves { 0% { transform: scale(1.0); -webkit-transform: scale(1.0);} 100% {transform: scale(1.05);-webkit-transform: scale(1.05);}}
.fixdiapo {height:400px;}

#recherche {position:relative; background:#3382a2; padding:20px; border-radius:8px; font-size:0; margin:0 20px;}
.fixrecherche {position:fixed !important; top:0px; z-index:99; width:calc(100% - 80px); max-width:1360px; border-top-left-radius:0 !important; border-top-right-radius:0 !important;}
#recherche h1 {font-size:30px; font-weight:bold; color:#fff; margin:0 0 10px 0;}
.select, .input {position:relative; display:inline-block; vertical-align:top; overflow:hidden; width:calc(33.33% - 35px); margin-right:10px;}
select {width:100% !important; background:#fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; color:#3382a2; font-size:18px; padding:10px 40px 10px 20px; border-radius:4px;}
.select::after {content: ''; position:absolute; top:50%; margin-top:-3px; right:15px; display:block; width:0; height:0; border-color:transparent; border-top-color:#3382a2; border-width:8px; border-style:solid; pointer-events:none;}
.text {width:calc(100% - 40px) !important; background:#fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; color:#3382a2; font-size:18px; padding:10px 20px; border-radius:4px;}
.ok {display:inline-block; vertical-align:top; text-align:center; position:relative; cursor:pointer; background:#0daf50; border:0; color:#fff; padding:10px 20px; width:35px; height:22px; border-radius:4px; font-size:20px; font-weight:bold;}
input:focus, textarea:focus, select:focus, *:focus {outline:none;}

.ac_results {position:relative; font-size:18px; margin-top:5px; z-index: 15000!important; min-height:100px;}
.ac_results ul {list-style-position:outside; list-style:none; padding:0; margin:0;}
.ac_results li {margin:0 0 2px 0; padding:10px 20px; cursor:default; display:block; overflow:hidden; background:#fff; border-radius:4px; border:1px solid #3382a2;}
.ac_odd {color:#3382a2;}
.ac_over {background:#3382a2 !important; color:#fff;}

#page {position:relative; margin:20px 0; font-size:16px;}
.fixpage {margin-top:170px !important;}

.message {position:relative; background:#a32219; padding:20px; border-radius:8px; font-size:16px; color:#fff;width:calc(100% - 40px);}
.info {position:relative; background:#ebf2f6; margin:20px; border-radius:8px; font-size:16px; color:#333;}

#carte {position:relative; margin:20px; width:calc(100% - 40px); border-radius:8px; overflow:hidden;}
.nav {position:relative; width:280px; height:600px; top:0; left:0; overflow:hidden;}
.listings {height:100%; overflow:auto; background:#3382a2; color:#fff;}
.listings .item {display:block;border-bottom:1px solid #fff; padding:12px 20px; text-decoration:none; font-size:14px; transition:0.3s;}
.listings .item a {color:#fff;}
.listings .item:hover a {color:#fff;}

.listings .item .title {display:block;font-weight:bold; font-size:16px;}
.listings .item .title small {font-weight:normal;}
.listings .item:hover, .listings .item.active, .listings .item.active a {background:#69bad7; color:#fff;}

.map {position:absolute; left:280px; width:calc(100% - 280px); top:0;bottom:0;}
.marker {position:absolute; display:block; cursor:pointer; width:30px; height:30px; border-radius:50% 50% 50% 0; background:#000;}
.marker::after {content:''; position:absolute; width:16px; height:16px; background:#fff; left:7px; top:7px; border-radius:50%;}

.clearfix {display:block;}
.clearfix:after {content:'.'; display:block; height:0; clear:both;visibility:hidden;}
.mapboxgl-popup {padding:20px; font-family:truenoregular,Arial;}
.mapboxgl-popup-close-button {display:none;}
.mapboxgl-popup-content {font-size:14px;padding:0; width:250px;overflow:hidden;}
.mapboxgl-popup-content-wrapper {padding:1%;}
.mapboxgl-popup-content h3 {background:#3382a2;color:#fff; margin:0;display:block; padding:10px; font-size:16px;}
.mapboxgl-popup-content h4 {margin:0;display:block; padding:10px; font-weight:normal; font-size:14px;}
.mapboxgl-popup-content div {padding:10px;}
.mapboxgl-popup-content a {color:#3382a2;}
.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: #3382a2;}

@font-face {font-family: 'truenoregular'; src: url('/fonts/truenorg-webfont.woff2') format('woff2'),url('/fonts/truenorg-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'truenolight'; src: url('/fonts/truenolt-webfont.woff2') format('woff2'),url('/fonts/truenolt-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;}

#bas {position:relative; background:#173c49; color:#fff; border-top-left-radius:8px; border-top-right-radius:8px; font-size:16px; margin:0 20px;}
#bas a:link, #bas a:visited {color:#fff;}





@media screen and (max-width:768px)
  {
  .select, .input {width:100%; margin:0 0 2px 0;}
  .input {margin:0 0 2px 0;}
  .ok {display:block; -webkit-appearance:none; width:calc(100% - 40px);}
  .nav {width:100%; height:220px; margin-bottom:10px; border-radius: 8px;}
  .map {position:relative; width:100%; height:400px; left:0; border-radius: 8px; overflow:hidden;}
  #annuaire {font-size:50px;}
  #annuaire span {font-size:60px; line-height:60px;}
  }