/* MEDIA QUERIES */

@media not all and (min-width: 1537px) {}

@media not all and (min-width: 1281px) {
  :root {
    --wp--custom--wrapper--padding: 80px !important;
    --wp--custom--wrapper--gap: 80px !important;
    --wp--custom--wrapper--gap-2: 80px !important;
    --wp--preset--font-size--h-1: 36px !important;
    --wp--preset--font-size--h-2: 32px !important;
    --wp--preset--font-size--32: 28px !important;
  }
}

@media not all and (min-width: 1025px) {
  :root {
    --wp--custom--wrapper--padding: 60px !important;
    --wp--custom--wrapper--gap: 60px !important;
  }

}

@media not all and (min-width: 769px) {
  :root {
    --wp--custom--wrapper--padding: 40px !important;
    --wp--custom--wrapper--gap: 40px !important;
    --wp--custom--wrapper--gap-2: 40px !important;
    --wp--preset--font-size--h-1: 32px !important;
    --wp--preset--font-size--h-2: 28px !important;
    --wp--preset--font-size--32: 24px !important;
    --wp--preset--font-size--20: 18px !important;
  }

  .logo-header {
    height: 86px !important;
  }
}

@media not all and (min-width: 641px) {
  :root {
    --wp--custom--wrapper--padding: 20px !important;
  }
}

@media not all and (min-width: 391px) {}

/* GENERAL */

html {
  scroll-behavior: smooth;
}

p:empty {
  display: none;
}

img {
	height: 100% !important;
}

:root {
  --color-black: var(--wp--preset--color--custom-black);
  --color-white: var(--wp--preset--color--custom-white);
  --color-brown: var(--wp--preset--color--custom-brown);
  --color-beige: var(--wp--preset--color--custom-beige);
  --color-footer: var(--wp--preset--color--background-footer);
  --color-button: var(--wp--preset--color--background-button);
  --custom-padding: var(--wp--custom--wrapper--padding);
  --custom-gap: var(--wp--custom--wrapper--gap);
  --custom-gap2: var(--wp--custom--wrapper--gap-2);
}

/* HEADER */

.nav-desktop {
  border-top: solid 7px var(--color-white);
}

.div-header {
  transition: background 0.3s ease-out, box-shadow 0.3s ease-out;
}

html[data-scroll="0"] .div-header {
  background: rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0);
  box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0);
}

html:not([data-scroll="0"]) .div-header {
  background: #613522;
  -webkit-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.05);
}

.logo-header {
  fill: var(--color-white);
  transition: fill 0.3s ease-out, height 0.3s ease-out;
}

.logo-header:hover {
  fill: var(--color-footer);
}

html[data-scroll="0"] .logo-header {
  height: 177px;
}

html:not([data-scroll="0"]) .logo-header {
  height: 100px;
}

.menu-item {
  text-transform: uppercase;
}

.menu-item:not(.menu-item-28) {
  color: var(--color-white);
  font-weight: 700;
  position: relative;
}

.menu-item:not(.menu-item-28)::after,
.current-menu-item:not(.menu-item-28)::after {
  position: absolute;
  content: '';
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 4px;
  background: var(--color-white);
  transition: width 0.3s ease-out;
}

.menu-item:not(.menu-item-28):hover::after,
.current-menu-item::after {
  width: 100% !important;
}

.icon-burger svg {
  fill: #C2814D;
  transition: fill 0.3s ease-out;
}

.icon-burger:hover svg {
  fill: var(--color-footer);
}

/* MENU MOBILE */

.menu-mobile {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100svh;
  transform: translateX(100%);

  transition: height 0.3s ease-out, transform 0.4s ease-out;
}

.menu-closed {
  transform: translateX(100%);
}

.menu-opened {
  transform: translateX(0%);
}

.icon-cross svg {
  fill: var(--color-white);
  transition: fill 0.3s ease-out;
}

.icon-cross:hover svg {
  fill: var(--color-button);
}

/* CUSTOM BTN */

.custom-btn-1,
.custom-btn-2,
.custom-btn-3,
.menu-item-28 a {
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  padding: 12px 24px;
  border: solid 1px;
  border-radius: 360px;
  transition: background 0.3s ease-out, color 0.3s ease-out;
}

.custom-btn-1,
.menu-item-28 a {
  color: var(--color-black);
  background: var(--color-button);
  border-color: var(--color-black);
}

.custom-btn-2 {
  color: var(--color-black);
  background: rgba(0, 0, 0, 0);
  border-color: var(--color-black);
}

.custom-btn-3 {
  color: var(--color-white);
  background: rgba(0, 0, 0, 0);
  border-color: #EBE8E7;
}

.custom-btn-1:hover,
.menu-item-28 a:hover {
  color: var(--color-white);
  background: var(--color-black);
}

.custom-btn-2:hover {
  background: #C3BAB7;
}

.custom-btn-3:hover {
  background: #EBE8E7;
  color: var(--color-black);
}

.ul-mobile .menu-item:not(.menu-item-28) a {
  font-size: 24px !important;
}

.ul-mobile {
  scrollbar-width: thin;
  scrollbar-color: var(--color-white) var(--color-black);
}

.ul-mobile ul::-webkit-scrollbar {
  display: block;
  width: 4px;
  height: 10px;
}

.ul-mobile ul::-webkit-scrollbar-track {
  background: var(--color-black) !important;
  border-radius: 10px;
}

.ul-mobile ul::-webkit-scrollbar-thumb {
  background: var(--color-white) !important;
  border-radius: 10px;
}

/* FOOTER */

.logo-footer {
  fill: var(--color-black);
  transition: fill 0.3s ease-out;
}

.logo-footer:hover {
  fill: var(--color-white);
}

.logo-synergie {
  filter: brightness(1);
  transition: filter 0.3s ease-out;
}

.logo-synergie:hover {
  filter: brightness(0);
}

.link-footer {
  color: var(--color-black);
  transition: color 0.3s ease-out;
}

.link-footer:hover {
  color: var(--color-white);
}

/* HERO */

.div-img-hero::after,
.div-img-hero-2::after,
.div-img-hero-3::after,
.div-img-hero-4::after,
.div-img-hero-5::after,
.div-img-hero-6::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.div-img-hero::after {
  background: linear-gradient(214deg, rgba(250, 247, 236, 0.20) 28.97%, #FAF7EC 85.7%);
}

.div-img-hero-2::after {
  background: linear-gradient(234deg, rgba(250, 247, 236, 0.2) 42.41%, #FAF7EC 88.26%);
}

.div-img-hero-3::after {
  background: linear-gradient(214deg, rgba(250, 247, 236, 0.2) 33.98%, #FAF7EC 82.8%);
}

.div-img-hero-4::after {
  background: linear-gradient(216deg, rgba(250, 247, 236, 0.2) 51.72%, #FAF7EC 89.98%)
}

.div-img-hero-5::after {
  background: linear-gradient(215deg, rgba(250, 247, 236, 0.2) 39.55%, #FAF7EC 88.38%);
}

.div-img-hero-6::after {
  background: linear-gradient(228deg, rgba(250, 247, 236, 0.2) 33.98%, #FAF7EC 87.59%);
}

/* MISC */

.link-logo {
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.link-logo:hover {
  transform: scale(1.05);
}

/* GALLERIE */

.active-page-pagination {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  pointer-events: none;
}

.gallery-navigation {
  opacity: 1;
  pointer-events: visible;
  transition: opacity 0.3s ease-out;
}

.gallery-navigation.hide-pagination {
  opacity: 0.5;
  pointer-events: none;
}

.modal-image {
  position: fixed;
  z-index: 9999;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.icon-cross-modal {
  width: fit-content;
  align-self: end;
  cursor: pointer;
  margin-bottom: auto !important;
}

.icon-cross-modal svg {
  stroke: var(--color-beige);
  transition: stroke 0.3s ease-out;
}

.icon-cross-modal:hover svg {
  stroke: var(--color-black);
}

.img-modal {
  margin-bottom: auto !important;
  height: calc(100% - 80px);
  width: fit-content;
  object-fit: contain;
  align-self: center;
}

/* CONTACT */

.link-contact p,
.link-contact {
  color: var(--color-black);
  transition: color 0.3s ease-out;
}

.link-contact:hover p,
.link-contact:hover {
  color: var(--color-brown);
}

/* MENTIONS LEGALES */

.netdev-mentions-legales h2 {
  padding-top: 40px;
  padding-bottom: 20px;
  color: var(--color-brown);
}

.netdev-mentions-legales p {
  color: var(--color-white);
}

.netdev-mentions-legales a {
  font-weight: 700;
  text-decoration: underline;
  color: var(--color-white);
  transition: color 0.3s ease-out;
}

.netdev-mentions-legales a:hover {
  color: var(--color-brown);
}