/************ BODY *************/
html {width: 100vw; overflow-x: hidden;}
body.site {padding: 0; border: none !important; color: var(--color-dark-blue); width: 100vw; overflow-x: hidden; font-family: basic-sans,sans-serif;}

a {transition: .2s ease-in-out all; color: var(--color-yellow); text-decoration: none;}
a:hover {text-decoration: underline;}

h2 {position: relative; font-size: 1.5em; padding: 40px 0 20px; text-align: center;}
h2::after {content: ''; position: absolute; height: 4px; width: 100px; background-color: var(--color-yellow); bottom: 0; left: 50%; transform: translateX(-50%);}
h3 {font-size: 1em; font-weight: bold; color: var(--color-dark-blue);}

.bold {font-size: 26px; line-height: 30px; letter-spacing: 1px; margin: 60px auto 30px; font-weight: 700; max-width: 600px;}

.btn-primary {background-color: var(--color-dark-blue); color: var(--color-yellow); transition: all .3s ease-in-out; padding: 10px 40px; border-radius: 30px; border: none; text-decoration: none; text-transform: uppercase; font-weight: 600;}
.btn-primary:hover {background-color: var(--color-yellow); color: var(--color-dark-blue); text-decoration: none;}

/************ HEADER *************/
header{ position: fixed; top: 0; left: 0; width: 100vw; z-index: 100; display: flex; flex-direction: column; align-items: center;}
header .header-inner, header .contact-header {max-width: 1110px; justify-content: flex-end;}

    /* Logo */
#logo {display: flex; justify-content: center; width: 15%; margin-right: 20px;}
#logo svg {width: 140px; transition: all .2s ease-in-out;}
#logo svg path {fill: #FFF; transition: .2s ease-in-out all;}

    /* Nav */
#navmenu { display: flex; align-items: center; justify-content: space-between; width: 100%; background-color: rgba(255,255,255,.397); -webkit-box-shadow: 0 0 40px rgba(0,0,0,.219); box-shadow: 0 0 40px rgba(0,0,0,.219); border-radius: 4px; } 
#navmenu .nav {width: 100%; display: flex; justify-content: space-between; height: 100%; padding: 25px 40px; }
#navmenu .nav li {height: 100%;}
#navmenu a {text-decoration: none; color: #FFF; text-transform: uppercase; font-weight: 600; font-size: 14px; height: 100%; display: block; align-content: center; position: relative; padding: 0 10px;}
#navmenu a::after {content: ""; position: absolute; height: 8px; width: 100%; left: 0; background-color: var(--color-dark-blue); opacity: 0;  -webkit-transition: .3s ease-in-out opacity; transition: .3s ease-in-out opacity; bottom: -25px; }
#navmenu a:hover, #navmenu li.active a {color: var(--color-dark-blue);}
#navmenu a:hover::after, #navmenu li.active a::after {opacity: 1;}

    /* Contact header */
header .contact-header {padding: 20px 20px 0 20px; display: flex; justify-content: flex-end; align-items: center; color: #FFF;}
header .contact-header .reseaux-sociaux {display: flex; align-items: center;}
header .contact-header a {margin: 0 0 0 15px; padding: 5px 10px; border-radius: 20px; font-size: 12px; display: flex; align-items: center; justify-content: flex-start; color: #FFF; background-color: transparent; text-decoration: none;}
header .contact-header a:hover {color: var(--color-yellow); background-color: var(--color-dark-blue);}
header .contact-header .tel a svg, header .contact-header .mail a svg {margin-right: .5em;}

    /* Sticky header */
header.is-sticky {-webkit-box-shadow: 0 0 40px rgba(0,0,0,.219); box-shadow: 0 0 40px rgba(0,0,0,.219); background-color: #FFF; padding: 20px; }
header.is-sticky .contact-header {display: none;}
header.is-sticky #logo svg {width: 80px;}
header.is-sticky #logo svg path {fill: var(--color-dark-blue);}
header.is-sticky #navmenu {background-color: transparent; box-shadow: none; border-radius: 0; height: 100%;}
header.is-sticky #navmenu a {color: var(--color-dark-blue);}
header.is-sticky #navmenu a::after {bottom: -45px;}
header.is-sticky #navmenu a:hover, header.is-sticky #navmenu li.active a {color: var(--color-yellow);}

    /* Menu burger */
#menuburger {display: none;}

/************ COMPONENT *************/
#flexicontent {background: #FFF; position: relative; z-index: 1; margin-bottom: 600px;}
#services, #contact, #actualite {scroll-margin-top: 100px;}
#references, #presentation {scroll-margin-top: 200px;}
#equipements {scroll-margin-top: 50px;}


/* Bannière */
#home {height: calc(100vh - 50px); border-bottom: 6px solid #11626d; position: relative;}
#home::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(180deg,rgba(0,0,0,.452819) 0,rgba(255,255,255,0) 66%); z-index: 5; }
#home .field_banniere {height: 100%;}
#home .field_banniere div.gf_container {height: 100%;}
#home .field_banniere div.gf_container div.slideshow img {width: 100%; height: 100%; object-fit: cover; object-position: top;}
#home .field_banniere div.gf_container > div.navigation.no_pagination {display: none !important; opacity: 0 !important;}
#home #gf_container_es_banniere_fcitem1 div.slideshow-container, #home #gf_container_es_banniere_fcitem1 span.image-wrapper a {max-height: unset;}

/* Présentation */
.field_presentation {text-align: center; max-width: 800px; width: 100%; margin: auto;}

/* Vidéo */
#video {max-width: 800px; margin: 80px auto 0 auto; text-align: center;}
.field_video iframe {max-width: 800px; aspect-ratio: 16/9; width: 100%; height: auto;}

/* Clients et partenaires */
#clients-et-partenaires {text-align: center; margin: 100px 0;}
.logo-client.slick-slide {height: 150px; display: flex !important; justify-content: center; align-items: center;}
.logo-client img {width: 150px; max-height: 80px; height: 100%; object-fit: contain; filter: grayscale(1); transition: .3s ease-in-out all; margin: 0;}
.logo-client:hover img {filter: grayscale(0);}

/* Carte références */
#carte-references {height: 500px;}
    /* Filtres */
.filtres-carte-references { padding:0 20px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.filtres-carte-references > div { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.filtres-carte-references .clearFilter { visibility:hidden; opacity:0; cursor:pointer; font-size:10px; -webkit-transition:.3s 0s ease-in-out all; transition:.3s 0s ease-in-out all; margin-bottom:-5px;}
.filtres-carte-references .refFilterTrigger { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; padding:20px 7px 20px 10px; margin-left:10px; -webkit-filter:grayscale(1); filter:grayscale(1); cursor:pointer; -webkit-transition:.3s ease-in-out all; transition:.3s ease-in-out all; opacity: .5;}
.filtres-carte-references .refFilterTrigger:hover,
.filtres-carte-references .refFilterTrigger.is-active { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1;}
.filtres-carte-references .refFilterTrigger.is-active + .clearFilter {visibility: visible; opacity: 1; -webkit-transition: .3s .6s ease-in-out all; transition: .3s .6s ease-in-out all;}
.filtres-carte-references .refFilterTrigger.is-active span {padding: 5px 10px 3px; background-color: var(--color-dark-blue); color: #FFF;}
.filtres-carte-references .refFilterTrigger img {width: 35px;}
.filtres-carte-references .refFilterTrigger span {background-color: #FFF; display: inline-block; padding: 5px 0 3px; margin: 0 0 0 8px; border-radius: 20px; color: var(--color-dark-blue); -webkit-transition: .5s ease-in-out all; transition: .5s ease-in-out all;}
    /* Popup */
#carte-references.leaflet-container {font: 13px basic-sans,sans-serif;}
#carte-references .leaflet-popup-content {padding: 1.5rem;}
#carte-references .leaflet-popup-content .info-client { color:var(--color-dark-blue); font-weight:700; text-transform:uppercase; }
#carte-references .leaflet-popup-content .info-title {color:var(--color-yellow); margin-top:5px; }
#carte-references .leaflet-popup-content .info-description { margin-top:10px; }
#carte-references.leaflet-container a.leaflet-popup-close-button {border-radius: 50% !important; border: solid 2px var(--color-dark-blue); transition: .3s ease-in-out; width: 14px; text-align: center; color: var(--color-dark-blue);}
#carte-references.leaflet-container a.leaflet-popup-close-button:hover {background: var(--color-dark-blue) !important; color: #FFF;}
    /* Marker */
.marker-cluster {background: none ;}
.marker-cluster > div {background-color: var(--color-yellow) ; transition: .3s ease-in-out all; position: relative; transform: scale(.8); width: 40px ; height: 40px; border-radius: 50%;}
.marker-cluster > div::after, .marker-cluster > div::before {content: ""; position: absolute; width: 50%; height: 4px; background-color: var(--color-dark-blue); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.marker-cluster > div::after {transform: translate(-50%,-50%) rotate(90deg);}
.marker-cluster:hover > div {background-color: var(--color-dark-blue) ; transform: scale(1);}
.marker-cluster:hover > div::after, .marker-cluster:hover > div::before {background-color: #FFF;}
.marker-cluster > div > span {display: none;}
.hidden {display: none;}

/* Services */
#services {text-align: center; margin-top: 100px;}
.field_services .services-map { position:relative; height:800px; margin-top:50px; text-align: initial; margin-bottom: -100px;}
.services-map .display,
.services-map .map-default { position:absolute; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:70%; height:600px; margin:0 auto;}
.services-map .display .map,
.services-map .map-default .map { position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width:100%; height:100%; text-align:center; display:none; z-index:0; display:-webkit-box; display:-ms-flexbox; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; display:none;}
.services-map .display .map.is-active, 
.services-map .map-default .map.default { display:-webkit-box; display:-ms-flexbox; display:flex;}
.services-map .display .map img,
.services-map .map-default .map img { max-width:100%; max-height:100%; margin:0 auto;}
.services-map .display .handle,
.services-map .map-default .handle { position:absolute; max-width:140px; text-align:center; display: flex; flex-direction: column;  cursor:pointer; z-index:1; -webkit-transition:.3s ease-in-out all; transition:.3s ease-in-out all; }
.services-map .display .handle img,
.services-map .map-default .handle img { width:50px; display:block; margin:0 auto; pointer-events:none;}
.services-map .display .handle span,
.services-map .map-default .handle span { display:inline-block; font-size:16px; font-weight:600; margin-top:10px; line-height:20px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events:none; }
.services-map .display .handle.audit-environnemental,
.services-map .map-default .handle.audit-environnemental,
.services-map .display .handle.diagnostic-environnemental,
.services-map .map-default .handle.diagnostic-environnemental { top:25px; left:100px; }
.services-map .display .handle.suivi-environnemental,
.services-map .map-default .handle.suivi-environnemental { top:225px; left:15px; }
.services-map .display .handle.pollution,
.services-map .map-default .handle.pollution { top:425px; left:150px; }
.services-map .display .handle.dragage,
.services-map .map-default .handle.dragage { bottom:-90px; left:350px; }
.services-map .display .handle.mouillage,
.services-map .map-default .handle.mouillage,
.services-map .display .handle.mouillages,
.services-map .map-default .handle.mouillages  { top:25px; right:150px; }
.services-map .display .handle.dossier-reglementaire,
.services-map .map-default .handle.dossier-reglementaire { top:250px; right:25px; }
.services-map .display .handle.is-active,
.services-map .display .handle:hover,
.services-map .map-default .handle.is-active,
.services-map .map-default .handle:hover { -webkit-transform:scale(1.2); transform:scale(1.2); -webkit-filter:grayscale(0); filter:grayscale(0); opacity:1; }
.services-map .display .handle.is-active span,
.services-map .display .handle:hover span,
.services-map .map-default .handle.is-active span,
.services-map .map-default .handle:hover span { color:var(--color-dark-blue); }
.services-map .display .handle.off,
.services-map .map-default .handle.off { opacity:.4; -webkit-transform:scale(.9); transform:scale(.9); -webkit-filter:grayscale(.5); filter:grayscale(.5); }
.services-map .display .handle.off:hover,
.services-map .map-default .handle.off:hover { -webkit-transform:scale(1); transform:scale(1); -webkit-filter:grayscale(0); filter:grayscale(0); opacity:1;}
.services-map .display .handle.off:hover span,
.services-map .map-default .handle.off:hover span { color:var(--color-dark-blue); }
.services-map .map-default { display:none; }
.services-map .map-default.is-active { display:-webkit-box; display:-ms-flexbox; display:flex; }
.services-map .descriptions { position:absolute; width:35%; min-height:200px; background-color: var(--color-dark-blue); border-left:6px solid var(--color-yellow); border-radius:3px 0 0 3px; color:#fff; padding:40px; -webkit-transition:.2s ease-in-out all; transition:.2s ease-in-out all; margin-left:auto;  top: calc(100% - 250px); right:0; z-index:1; -webkit-transition:.3s ease-in-out all; transition:.3s ease-in-out all; }
.services-map .descriptions .default,
.services-map .descriptions .description { position:relative; background-color: var(--color-dark-blue); }
.services-map .descriptions .default,
.services-map .descriptions .description .desc { display:none; }
.services-map .descriptions .default.is-active { display:block; }
.services-map .descriptions .default span,
.services-map .descriptions .description span { margin-bottom:10px; display:inline-block; font-size:20px; max-width:200px; line-height:22px; font-size: bold; }
.section-prestation .descriptions .default p,
.section-prestation .descriptions .description p { font-weight:200; letter-spacing:1px; }

/* Équipements */
#equipements {text-align: center; background-color: var(--color-lightgrey); padding: 80px 0;}
.field_equipements.value {padding: 80px 0 0 0; max-width: 800px; margin: auto;}
.field_equipements .slick-list {overflow: visible;}
.field_equipements .slick-slide {opacity: .2; margin: 0 40px; background-color: transparent; transition: all .3s ease-in-out;}
.field_equipements .slick-slide.slick-center {opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05);}
.field_equipements .equipement .img {height: 500px; position: relative; overflow: hidden; }
.field_equipements .equipement img {width: 100%; height: 100% !important; object-fit: cover;}
.field_equipements .equipement .desc-equipement {position: absolute; width: 100%; text-align: center; color: #FFF; opacity: 0; bottom: -20px; padding: 20px; background-color: rgba(12, 44, 54, .9); transition: all .1s ease-in-out; }
.field_equipements .slick-slide.slick-center.equipement .desc-equipement {opacity: 1; -webkit-transition:.3s 1s ease-in-out all; transition:.3s 1s ease-in-out all; bottom: 0;}
.field_equipements .slick-dots {margin-top: 50px; position: initial;}
.field_equipements .slick-dots li {border: 2px solid var(--color-dark-blue); display: inline-block; margin: 0 10px; width: 12px; height: 12px; border-radius: 50%; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; cursor: pointer;}
.field_equipements .slick-dots li.slick-active {background-color: var(--color-dark-blue);}
.field_equipements .slick-dots li button {display: none;}
.field_equipements .slick-dotted.slick-slider {margin-bottom: 0;}

/* Actualités */
.field_actualite {max-width: 1110px; margin: 100px auto; text-align: center;}
.field_actualite .timeline {position: relative; margin-top: 80px; margin-bottom: 100px;}
.field_actualite .timeline::before { content:"...."; font-size:19px; margin-top:3px; margin-left:3px; position:absolute; left: calc(50% + 1px); top:-10px; -webkit-transform:translateX(-50%) rotate(90deg);transform:translateX(-50%) rotate(90deg); height:1px; line-height:0; color:#b3b3b3;}
.field_actualite .timeline::after {  content:"...."; font-size:19px; margin-left:3px; line-height:0; height:1px; position:absolute; left: calc(50% + 1px); bottom:-7px; -webkit-transform:translateX(-50%) rotate(90deg); transform:translateX(-50%) rotate(90deg); color:#b3b3b3;}
.field_actualite .item-timeline {  display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center;  justify-content:center;  height:180px; text-align: initial;}
.field_actualite .item-timeline:nth-last-of-type(even){-webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.field_actualite .item-timeline-date {margin-top: 20px; font-weight: 700; width: 40%; text-align: right; color: var(--color-dark-blue);}
.field_actualite .item-timeline:nth-last-of-type(even) .item-timeline-date {text-align: left;}
.field_actualite .item-timeline-dot {width: 3px; height: 100%; background-color: #b3b3b3; margin: 0 30px; position: relative;}
.field_actualite .item-timeline-dot::after,
.field_actualite .item-timeline-dot::before { content:""; position:absolute; border-radius:50%; top:20px; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
.field_actualite .item-timeline-dot::before { width:20px; height:20px; background-color:#fff;  border:2px solid #58abae; }
.field_actualite .item-timeline-dot::after { width:12px; height:12px; background-color:var(--color-blue-flashy);
  top:24px; }
.field_actualite .item-timeline-detail {  margin:10px 0; border-radius:5px; width:40%;display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center;-ms-flex-align:center; align-items:center; padding:10px; background-color:#fff; -webkit-box-shadow:0 0 15px rgba(0,0,0,.267);  box-shadow:0 0 15px rgba(0,0,0,.267); -webkit-transition:.2s ease-in-out all; transition:.2s ease-in-out all; cursor:pointer;}
.field_actualite .item-timeline-detail:hover {-webkit-transform: scale(1.03); transform: scale(1.03);}
.field_actualite .item-timeline-detail .img {width: 30%; height: 100%; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; background-size: cover; background-position: center; overflow: hidden;}
.field_actualite .item-timeline-detail .img img {height: 100% !important; object-fit: cover;}
.field_actualite .item-timeline-detail .text {  -webkit-box-flex:0; -ms-flex:0 1 auto; flex:0 1 auto; width:70%; padding:10px;}
.field_actualite .item-timeline-detail .text .title {color: var(--color-yellow); font-weight: 600; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.field_actualite .item-timeline-detail .text .body {color: var(--color-darkgrey); font-weight: 100; height: 100px; overflow: hidden; font-size: 14px;}

/* Infos contact */
.infos_contact {background-color: var(--color-dark-blue); color: #FFF; box-shadow: 0 5px 10px rgba(0,0,0,.178); position: relative; text-align: center; padding: 50px 0; z-index: 10;}
.infos_contact-inner {max-width: 1110px; margin: auto;}
.field_equipe {text-align: start; margin-bottom: 40px;}
.field_equipe .membre-equipe {display: flex; flex-direction: row-reverse; width: calc(50% - 20px); margin: 0 10px; align-items: center; text-align: right;}
.field_equipe .membre-equipe:nth-of-type(even) {flex-direction: row; margin-left: auto; margin-top: -40px; margin-bottom: -40px; text-align: left;}
.field_equipe .membre-equipe .photo {position: relative; display: block; width: 140px;}
.field_equipe .membre-equipe .photo .linkedin {position: absolute; bottom: 10px; right: 20px; transition: all .3s ease-in-out; background-color: #fff; border-radius: 50%; text-align: end; width: 1.5em; height: 1.5em; opacity: 0;}
.field_equipe .membre-equipe .photo:hover .linkedin {opacity: 1;}
.field_equipe img {width: 100px; height: 100px !important; object-fit: cover; border-radius: 50%; margin: 20px; display: block;}
.field_equipe .fonction {background-color: #FFF; color: var(--color-dark-blue); padding: 0 10px; width: fit-content; display: inline-block;}
.field_telephone a, .field_adresse-mail a, .field_reseaux-sociaux a {color: #FFF; text-decoration: none;}
.field_telephone a:hover, .field_adresse-mail a:hover, .field_reseaux-sociaux a:hover {color: var(--color-yellow);}
.field_telephone a svg, .field_adresse-mail a svg {display: none;}
.field_reseaux-sociaux a {margin: 10px;}
.field_siege-social {display: flex; justify-content: center; gap: .25em;}
.field_carte-siege-social {display: flex; justify-content: center; gap: .5em; height: 100%;}
.field_carte-siege-social .map_actions_box {display: none;}
.field_carte-siege-social .mod_fleximap, .field_carte-siege-social .map_contents_box, .field_carte-siege-social .map_contents_box > div {height: 100%; width: 100%;}
.infos_contact .reseaux-sociaux {margin-top: 20px;}
#map-bounds-box115.map-bounds-box, #fc_module_map_115.fc_module_map {min-width: 100%;}

/* Formulaire de contact */
#contact-footer {position: fixed; bottom: 0; left: 0; width: 100vw; z-index: 0;}
.field_formulaire-de-contact {height: 100%; background-color: var(--color-lightgrey);}
#cf1 {background-color: var(--color-lightgrey); width: 80%; margin: auto;}
.convertforms .cf-input, .convertforms .cf-input:focus, .convertforms .cf-input:invalid:focus {border-top: 0; border-right: 0; border-left: 0;}
#flexicontent ::placeholder, .mod_flexifilter_wrapper ::placeholder {font-weight: 100; color: var(--color-dark-blue); font-size: 1em;}

/* Mentions légales */
.eb-1.eb-inst {padding: 0;}
.eb-1.eb-inst .eb-content {max-width: 1110px; margin: auto;}
.eb-1.eb-inst .eb-content h2 {margin-top: 0;}
.eb-1 .eb-dialog {padding: 30px !important;}

/* Offline */
.offline-page h1 img {width: 200px;}
.offline-page input[type="submit"] {margin: 1em auto; display: block;}

/************ FOOTER *************/
footer {background-color: var(--color-dark-blue); color: #FFF; font-size: .75em; padding: 10px; height: 40px; position: fixed; bottom: 0; left: 0; width: 100vw; z-index: 0;}
footer .footer-inner {display: flex; justify-content: center;}
footer button {background: none; border: none; color: #FFF; transition: all .3s ease-in-out;}
footer button:hover {color: var(--color-yellow);}