header {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.header-overlay::before {
  background-repeat: no-repeat;
  background-size: cover;
}

.header-filter::before {
  background-color: transparent;
}

.header-overlay::before,
.header-filter::before {
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
}

.header-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDE1MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGcgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj48cGF0aCBkPSJNMCAzMGwxNjAgMTMuMzc1QzMyMCA1Ni4yNSA2NDAgODMuNzUgOTYwIDk2LjYyNSAxMjgwIDExMCAxNjAwIDExMCAxNzYwIDExMGgxNjB2NDBIMFYzMHoiIG9wYWNpdHk9Ii4zMDEiLz48cGF0aCBkPSJNMCAwbDE2MCAxNi43MTlDMzIwIDMyLjgxMiA2NDAgNjcuMTg3IDk2MCA4My4yOCAxMjgwIDEwMCAxNjAwIDEwMCAxNzYwIDEwMGgxNjB2NTBIMFYweiIgb3BhY2l0eT0iLjE1Ii8+PHBhdGggZD0iTTAgNjBsMTYwIDEwLjAzMWMxNjAgOS42NTYgNDgwIDMwLjI4MSA4MDAgMzkuOTM4QzEyODAgMTIwIDE2MDAgMTIwIDE3NjAgMTIwaDE2MHYzMEgwVjYweiIvPjwvZz48L3N2Zz4=);
  width: 100%;
  height: 80px;
  background-size: 100% 80px;
}

.inner-header {
  position: relative;
  /* padding: 0 1%; */
  overflow: hidden;
  margin: 0 auto 0 auto;
  width: 100%;
  max-width: 1920px;
  max-height: 960px;
  display: flex;
  flex-flow: column;
  align-items: normal;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
}

.diaporama {
  display: block;
  width: 100%;
  text-align: right;
  margin-top: 0;
  overflow: hidden;
  height: auto;
  margin-bottom: 15px;
  position: absolute;
  top: 0;
  left: 0;
  max-height: 350px;
}

.icon-header {
  max-width: 60px;
  min-width: 40px;
}

/* logo */
.logo {
  /* flex: 2; */
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  /* text-align: right; */
  border-radius: inherit;
  width: 13.33%;
  /* width: 33.33%; quand css slider wrapper */
  height: auto;
  font-size: 1em;
  line-height: 1;
  min-width: 120px !important;
  max-width: 795px !important;
  margin: 0;
  z-index: 2;
}

.logo-mobile {
  display: none;
}

.logo img,
.logo-2 img {
  width: 90%;
  height: auto;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  transition: 0.5s;
}

.logo-texte {
  font-size: 1em;
  color: #d9d9d9;
  font-family: font1, sans-serif;
  display: inline-block;
}

.slogan {
  color: #414141;
  display: inline-block;
  font-size: 1rem;
  font-family: font1, sans-serif;
  text-align: center;
  /* text-shadow: 4px 4px 5px RGBA(0, 0, 0, 1); */
}

/* menu */
.menus {
  position: relative;
  /* postion: absolute; quand slider wrapper */
  top: 0;
  left: 0;
  width: 100%;
  background: var(--couleur1);
  padding: 0;
  z-index: 1500;
  /* box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px; */
  /* background-image: url(../../../images/_images/headers/accueil/Saint-Martin.webp); */
  /* background:none; quand slider wrapper */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.navbar {
  display: flex;
  flex-flow: row;
  /* grid-template-columns: auto 1fr; */
  align-items: center;
  align-content: start;
  gap: 10px;
  overflow: inherit;
  border-radius: 0;
  margin: 0 auto;
  position: relative;
  max-width: none;
  height: 100%;
  padding: 10px 2%;
  /* padding: 2%; quand slider wrapper */
  width: 100%;
  max-width: 1680px;
  justify-content: space-between;
}

.menu-principal .logo a {
  border: none;
}

.menu-principal {
  width: 13.33%;
  /* width: 33.33%; quand css slider wrapper */
  min-width: 120px;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: transparent;
  font-family: font2, sans-serif;
  font-size: 26px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.menu-principal ul {
  position: relative;
  text-align: left;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  padding: 0;
  /* margin: 0 auto; */
  max-width: 100%;
  background-color: transparent;
  display: flex;
  flex-flow: row wrap;
  justify-content: right;
  /* align-items: flex-start; */
  gap: 6px 0.5em;
}

.menu-principal ul h1 {
  font-size: 1em;
  margin: 0;
  text-transform: none;
}

.menu-principal ul li {
  text-align: center;
  padding: 0;
  margin: 0 !important;
  display: inline-block;
  list-style: none;
  border-radius: 6px;
  font-size: 1rem;
}

/* .menu-principal li.divider {
  visibility: hidden;
  display: block;
  margin: 0 !important;
}

.menu-principal li.divider span.mod-menu__separator.separator {
  display: none;
} */
.menu-principal a {
  font-family: font1, sans-serif;
  display: block;
  color: var(--texte);
  width: 100%;
  height: 100%;
  padding: 5px 12px;
  font-size: 1.2rem;
  font-weight: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-principal li a img {
  height: auto;
  vertical-align: bottom;
}

.menu-principal .active a,
.menu-principal .current a,
.menu-principal .current.parent ul a,
.menu-principal .ancre a {
  color: #ffffff;
}

.menu-principal .parent ul a,
.menu-principal .current.active.parent ul a {
  color: #ffffff;
}

.menu-principal .parent ul .active a {
  color: #000;
}

.menu-principal a:hover,
.menu-principal li ul a:hover {
  opacity: 0.8;
}

.menu-principal li:hover {
  background-color: var(--fond-vert);
}

.menu-principal ul.nav-child {
  display: block;
}

.menu-principal li ul {
  position: fixed;
  margin-left: 0;
  margin-top: 0;
  padding: 8px 10px 10px 10px;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  background-color: #fff;
  visibility: hidden;
}

.menu-principal li ul.afficher {
  visibility: visible;
}

.menu-principal li ul li {
  font-size: 0.8em;
  line-height: 1.1;
  margin: 0;
}

/* ****************************** */
.menu-principal span.lang-switcher-menu>div {
  position: absolute;
  bottom: 0;
  right: 5%;
}

.menu-principal .lang-switcher-mobile {
  display: none;
}

.menu-principal .lang-switcher-menu ul {
  width: inherit;
  overflow: hidden;
  margin: 0;
}

.menu-principal .lang-switcher-menu li {
  line-height: 1;
  padding: 0.5em 1em;
  margin: 0;
  width: auto;
  min-width: inherit;
  display: inline-block;
}

.menu-principal .lang-switcher-menu li a {
  padding: 0.8em;
  margin: 0;
  border: none;
  width: auto;
}

.menu-principal .lang-switcher-menu li:hover {
  background-color: transparent;
  opacity: 0.75;
}

.menu-principal .lang-switcher-menu li a img {
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

/* ******** reducto ******** */
.reducto .logo,
.reducto .logo-2 {
  transition: 0.5s;
}

.reducto img {
  max-width: 180px;
  transition: 0.5s;
}

.reducto .menu-principal {
  font-size: 20px;
  transition: 0.5s;
}

.reducto .menu-principal ul {
  text-align: center;
  justify-content: center;
  transition: 0.5s;
}

.reducto .menu-principal ul a {
  padding: 4px;
  transition: 0.5s;
}

/* ****** slider ****** */
.slider-wrapper,
.slider-wrapper>div {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: space-between !important;
  align-content: flex-start !important;
}

.logoslider,
.logoslider>div,
.burger-slider {
  display: flex;
  flex-flow: row wrap;
}

.logoslider {
  width: 48% !important;
  justify-content: flex-start;
}

.logoslider>div {
  width: 100% !important;
}

.logosliderlien {
  display: inline-flex !important;
  width: 100%;
}

.logoslider img {
  min-width: 120px !important;
  max-width: 200px !important;
  width: 33% !important;
}

.burger-slider {
  width: 15% !important;
  justify-content: flex-end;
  align-self: center !important;
}

/* *************************** */
@media screen and (min-width: 1920px) {
  .inner-header {
    border-radius: 0 0 10px 10px;
  }
}

@media screen and (max-width: 1000px) {
  .menu-principal {
    font-size: 22px;
  }
}

@media screen and (max-width: 970px) {
  @media screen and (max-width: 1000px) {
    .menu-principal {
      font-size: 22px;
    }
  }

  .reducto .menu-principal ul a {
    padding: 4px;
  }
}

@media screen and (max-width: 830px) {
  .menu-principal {
    font-size: 21px;
  }
}

@media screen and (max-width: 768px) {
  header {
    display: block;
  }

  .logo img,
  .logo-2 img {
    width: 66%;
  }

  .menu-principal .lang-switcher-menu {
    position: relative;
    top: inherit;
    left: inherit;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
    z-index: 500;
  }

  .menu-principal .lang-switcher-mobile {
    display: block;
    position: absolute;
    top: 18px;
    left: 0;
    padding: 0;
    margin: 0 0 0 25%;
  }

  .menu-principal .lang-switcher-mobile ul {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 auto;
    background-color: transparent;
  }

  .menu-principal .lang-switcher-mobile li {
    display: inline-block;
    width: 86px;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .menu-principal .lang-switcher-mobile li a {
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 640px) {
  .menu-principal {
    font-size: 20px;
  }
}