/* HEADER */
/* Navigation Custom (pour la page Options) */

.logged-in header.header-navigation {
  top: 72px;
}

.logged-in header.header-navigation.no-topbar {
  top: 32px;
}

.top-bar {
  position: fixed;
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 40px !important;
  z-index: 1001;
  box-shadow: 0px 0px 10px #0000001a;
}

.top-bar p,
.top-bar a,
.top-bar i {
  margin-bottom: 0px !important;
}

.top-bar .top-bar-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.top-bar .media-sociaux {
  display: flex;
  flex-direction: row;
  column-gap: 0px;
  align-items: center;
  justify-content: flex-end;
}

.top-bar .media-sociaux a {
  width: 50px;
  height: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--blanc);
}

.top-bar.bg-gris .media-sociaux a,
.top-bar.bg-blanc .media-sociaux a {
  border-left: 1px solid var(--noir);
}

.top-bar .media-sociaux a i {
  font-size: 18px;
}

.site-content {
  padding-top: 150px;
}

body:has(header.no-topbar) .site-content {
  padding-top: 110px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  height: 110px;
  width: 100%;
  z-index: 1000;
  box-shadow: 0px 0px 10px #0000001a;
}

header.header-navigation {
  top: 40px;
}

header .navigation {
  height: 100%;
}

header .navigation .navigation-general {
  display: flex;
  flex-direction: row;
  padding: 0px;
  justify-content: space-between;
  height: 100%;
  align-items: center;
  column-gap: 40px;
}

header .navigation .navigation-general .logo {
  max-height: 70px;
}

header .navigation .navigation-general .logo img {
  max-height: 70px;
}

header .navigation .navigation-general .navigation-main-menu {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  column-gap: 50px;
  height: 100%;
}

header .menu-menu-principal-container {
  flex: 1;
}

header .menu-menu-principal-container .menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  list-style: none;
  justify-content: flex-end;
  margin: 0px;
  column-gap: 40px;
  align-items: center;
}

header .menu-menu-principal-container .menu li a {
  color: var(--noir);
}

header .menu-menu-principal-container .menu>li:hover a {
  color: var(--accent);
}

header .menu-menu-principal-container .menu li a {
  justify-content: space-between;
  width: 100%;
  align-items: center;
  display: flex;
  column-gap: 10px;
}

header .menu-menu-principal-container .menu li:not(.btn-contact) a {
  padding: 42px 0px;
}

header .menu-menu-principal-container .menu li:is(.btn-contact) a {
  padding: 12px 30px 10px 30px;
}

header .menu-menu-principal-container .menu li.current-menu-item a {
  font-weight: bold;
  color: var(--principale);
}

header .menu-menu-principal-container .menu li.currrent-menu-item:hover a {
  color: var(--accent);
}

header .menu-menu-principal-container .menu-item-has-children {
  cursor: pointer;
  position: relative;
}

header .menu-menu-principal-container .menu-item-has-children>a i {
  color: var(--accent);
}

header .menu-menu-principal-container .menu-item-has-children:has(.current-menu-item) a {
  font-weight: bold;
  color: var(--principale);
}

header .menu-menu-principal-container .menu-item-has-children:has(.current-menu-item):hover a {
  color: var(--accent);
}

header .menu-menu-principal-container .menu-item-has-children .sub-menu {
  display: flex;
  flex-direction: column;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  position: absolute;
  margin: 0px;
  list-style: none;
  width: max-content;
  top: 110px;
}

header .menu-menu-principal-container .menu-item-has-children .sub-menu li {
  transition: all 0.2s ease-in-out;
}

header .menu-menu-principal-container .menu-item-has-children .sub-menu li a {
  font-weight: normal;
  color: var(--noir) !important;
  padding: 10px 20px !important;
}

header .menu-menu-principal-container .menu-item-has-children .sub-menu li.current-menu-item a {
  font-weight: bold;
  color: var(--principale) !important;
}

header .menu-menu-principal-container .menu-item-has-children .sub-menu li:hover {
  background-color: var(--principale) !important;
}

header .menu-menu-principal-container .menu-item-has-children .sub-menu li:hover a {
  color: var(--blanc) !important;
}

header .menu-menu-principal-container .menu-item-has-children .sub-menu.sub-menu-active {
  opacity: 1;
  max-height: fit-content;
}

header .btn-contact {
  border: none;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 50px;
  color: var(--blanc) !important;
  background-color: var(--accent);
  transition: all 0.2s;
}

header .btn-contact a {
  color: var(--blanc) !important;
  font-weight: bold;
  padding: 10px 20px;
}

header .btn-contact:hover {
  background-color: var(--principale);
  cursor: pointer;
}

/* ---------------------- Options de couleurs ---------------------- */
/* Icones - sur fond noir */
header.bg-noir .media-sociaux a i,
.top-bar.bg-noir .media-sociaux a i {
  color: var(--blanc);
}

header.bg-noir .media-sociaux a:hover i,
.top-bar.bg-noir .media-sociaux a:hover i {
  color: var(--accent);
}

/* Icones - sur fond blanc */
header.bg-blanc .media-sociaux a i,
.top-bar.bg-blanc .media-sociaux a i {
  color: var(--noir);
}

header.bg-blanc .media-sociaux a:hover i,
.top-bar.bg-blanc .media-sociaux a:hover i {
  color: var(--accent);
}

/* Icones - sur fond gris */
header.bg-gris-pale .media-sociaux a i,
.top-bar.bg-gris .media-sociaux a i {
  color: var(--noir);
}

header.bg-gris-pale .media-sociaux a:hover i,
.top-bar.bg-gris .media-sociaux a:hover i {
  color: var(--accent);
}

/* Icones - sur fond principale */
header.bg-principale .media-sociaux a i,
.top-bar.bg-principale .media-sociaux a i {
  color: var(--blanc);
}

header.bg-principale .media-sociaux a:hover i,
.top-bar.bg-principale .media-sociaux a:hover i {
  color: var(--accent);
}

/* Icones - sur fond accent */
header.bg-accent .media-sociaux a i,
.top-bar.bg-accent .media-sociaux a i {
  color: var(--blanc);
}

header.bg-accent .media-sociaux a:hover i,
.top-bar.bg-accent .media-sociaux a:hover i {
  color: var(--principale);
}

/* Background couleur principale */
header.bg-principale .menu-menu-principal-container .menu li a,
header.bg-principale .menu-menu-principal-container .menu-item-has-children .sub-menu li a {
  color: var(--blanc) !important;
}

header.bg-principale .menu-menu-principal-container .menu-item-has-children .sub-menu li.current-menu-item a {
  color: var(--principale) !important;
  background-color: var(--gris) !important;
}

header.bg-principale .menu-menu-principal-container .menu>li:hover a,
header.bg-principale .menu-menu-principal-container .menu-item-has-children>a i {
  color: var(--gris);
}

header.bg-principale .menu-menu-principal-container .menu>li.btn-contact:hover {
  background-color: var(--blanc) !important;
}

header.bg-principale .menu-menu-principal-container .menu>li.btn-contact:hover a {
  color: var(--accent) !important;
}

header.bg-principale .menu-menu-principal-container .menu-item-has-children .sub-menu li:hover {
  background-color: var(--accent) !important;
}

.top-bar.bg-principale p,
.top-bar.bg-principale a,
.top-bar.bg-principale ol,
.top-bar.bg-principale ul {
  color: var(--blanc);
}

/* Background couleur accent */
header.bg-accent .menu-menu-principal-container .menu li a,
header.bg-accent .menu-menu-principal-container .menu-item-has-children .sub-menu li a {
  color: var(--blanc) !important;
}

header.bg-accent .btn-contact {
  background-color: var(--principale);
}

header.bg-accent .btn-contact:hover {
  background-color: var(--blanc) !important;
}

header.bg-accent .menu-menu-principal-container .menu>li:hover a {
  color: var(--principale) !important;
}

header.bg-accent .menu-menu-principal-container .menu-item-has-children .sub-menu li.current-menu-item a {
  color: var(--accent) !important;
  background-color: var(--gris) !important;
}

header.bg-accent .menu-menu-principal-container .menu>li:hover a,
header.bg-accent .menu-menu-principal-container .menu-item-has-children>a i {
  color: var(--gris) !important;
}

.top-bar.bg-accent p,
.top-bar.bg-accent a,
.top-bar.bg-accent ol,
.top-bar.bg-accent ul {
  color: var(--blanc);
}

/* Background couleur noir */
header.bg-noir .menu-menu-principal-container .menu li a,
header.bg-noir .menu-menu-principal-container .menu-item-has-children .sub-menu li a {
  color: var(--blanc) !important;
}

header.bg-noir .btn-contact:hover {
  background-color: var(--blanc) !important;
}

header.bg-noir .menu-menu-principal-container .menu>li:hover a {
  color: var(--accent) !important;
}

header.bg-noir .menu-menu-principal-container .menu-item-has-children .sub-menu li.current-menu-item a {
  color: var(--noir) !important;
  background-color: var(--gris) !important;
}

.top-bar.bg-noir p,
.top-bar.bg-noir a,
.top-bar.bg-noir ol,
.top-bar.bg-noir ul {
  color: var(--blanc);
}

/* Background couleur blanc */
header.bg-blanc .menu-menu-principal-container .menu-item-has-children .sub-menu li.current-menu-item a {
  color: var(--noir) !important;
  background-color: var(--gris) !important;
}

.top-bar.bg-blanc p,
.top-bar.bg-blanc a,
.top-bar.bg-blanc ol,
.top-bar.bg-blanc ul {
  color: var(--noir);
}

/* Background couleur gris */
header.bg-gris-pale .menu-menu-principal-container .menu-item-has-children .sub-menu li.current-menu-item a {
  color: var(--noir) !important;
  background-color: var(--blanc) !important;
}

.top-bar.bg-gris p,
.top-bar.bg-gris a,
.top-bar.bg-gris ol,
.top-bar.bg-gris ul {
  color: var(--noir);
}

/* ----------------------------------------------- */
/* Menu Mobile */
.menu-toggle:before {
  display: none !important;
}

header.header-mobile .menu-soustitre>a {
  padding: 0px 20px;
}

header.header-mobile .menu-item-object-page:not(.btn-contact) {
  padding: 0px 20px;
}

header.header-mobile .btn-contact {
  /* margin: 0px 20px; */
  margin: auto;
}

header.header-mobile .menu-menu-principal-container .menu-item-has-children .sub-menu {
  opacity: 1;
  max-height: 500px;
  position: relative;
  padding-top: 10px;
  width: 100%;
}

header.header-mobile .menu-menu-principal-container .menu-item-has-children .sub-menu li {
  width: 100%;
}

header.header-mobile li:not(.btn-contact) a {
  font-size: 20px;
  line-height: 24px;
}

header.header-mobile .sub-menu {
  font-size: 20px;
  line-height: 24px;
}

header.header-mobile .menu-toggle {
  display: block;
  padding: 0px;
}

header.header-mobile .menu-toggle i {
  font-size: 30px;
}

header.header-mobile.bg-accent .menu-toggle i,
header.header-mobile.bg-principale .menu-toggle i,
header.header-mobile.bg-noir .menu-toggle i {
  color: var(--blanc);
}

header.header-mobile.bg-blanc .menu-toggle i,
header.header-mobile.bg-gris .menu-toggle i,
header.header-mobile.bg-gris-pale .menu-toggle i {
  color: var(--noir);
}

header.header-mobile .navigation-mobile-menu {
  display: flex;
  height: calc(100vh - 110px);
  width: 100%;
  padding-top: 40px;
}

header.header-mobile .navigation-mobile-menu .navigation-main-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 20px;
  height: 100%;
}

header.header-mobile .menu-menu-principal-container {
  flex: none;
}

header.header-mobile .menu-menu-principal-container .menu {
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 20px;
}

header.header-mobile .menu-menu-principal-container .menu-item-has-children {
  cursor: pointer;
  position: relative;
  width: 100%;
}

header.header-mobile .media-sociaux {
  justify-content: center;
  padding: 0px 20px;
  display: flex;
  flex-direction: row;
  column-gap: 0px;
  align-items: center;
  padding-top: 10px !important;
}

header.header-mobile .media-sociaux a {
  width: 50px;
  height: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--blanc);
}

header.header-mobile .media-sociaux a:first-of-type {
  border-left: 0px !important;
}

header.header-mobile.bg-gris .media-sociaux a,
header.header-mobile.bg-blanc .media-sociaux a {
  border-left: 1px solid var(--noir);
}

header.header-mobile .media-sociaux a i {
  font-size: 25px;
}

/* ------------------------------------------------------------------- */
/* RESPONSIVE */
@media screen and (max-width: 1480px) {
  header .navigation {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media screen and (max-width: 1270px) {
  header .menu-menu-principal-container {
    display: flex;
  }

  header .menu-menu-principal-container .menu li:not(.btn-contact) a {
    padding: 0px;
  }

  header .menu-menu-principal-container .menu-item-has-children .sub-menu {
    top: 68px;
  }
}

@media screen and (max-width: 1024px) {

  .logged-in header.header-navigation {
    top: 32px;
    height: 110px;
  }

  .logged-in .entete-pleine-hauteur,
  .logged-in .entete-pleine-hauteur .entete-contenu {
    min-height: calc(100vh - 142px);
  }

  .site-content {
    padding-top: 110px;
  }

  header.header-desktop {
    display: none;
  }

  header.header-mobile {
    display: block !important;
  }

  .top-bar {
    display: none;
  }

  header.header-navigation {
    top: 0px;
  }

  header .navigation {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  header .navigation .navigation-general {
    padding: 0px 40px;
  }

  header .menu-menu-principal-container .menu-item-has-children .sub-menu li a {
    padding: 10px 20px !important;
  }

  header .menu-menu-principal-container .menu-item-has-children .sub-menu li:last-of-type a {
    padding: 10px 20px 0px 20px !important;
  }

  header.header-mobile .menu-menu-principal-container .menu-item-has-children {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  header.header-mobile .menu-menu-principal-container .menu-item-has-children .sub-menu {
    max-height: fit-content;
    top: 0px;
    padding-top: 0px;
  }

  header .menu-menu-principal-container .menu li:not(.btn-contact) a {
    padding: 0px 20px;
  }

  header.header-mobile .menu-item-object-page:not(.btn-contact) {
    padding: 0px;
  }
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 820px) {}

@media screen and (max-width: 768px) {
  .logged-in header.header-navigation {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {

  header .navigation .navigation-general {
    padding: 0px 20px;
  }

  header .navigation .navigation-general .logo {
    max-height: 50px;
  }

  header .navigation .navigation-general .logo img {
    max-height: 50px;
  }

  header.header-mobile .navigation-mobile-menu {
    padding-top: 20px;
  }
}

@media screen and (max-width: 450px) {}