/* MEDIA QUERIES */
  
@media not all and (min-width: 1280px) {
    :root {
      --wp--custom--wrapper--padding: 60px !important;
      --wp--custom--wrapper--gap: 60px !important;
      --wp--preset--font-size--60: 44px !important;
      --wp--preset--font-size--44: 36px !important;
      --wp--preset--font-size--40: 24px !important;
      --wp--preset--font-size--36: 28px !important;
      --wp--preset--font-size--32: 24px !important;
      --wp--preset--font-size--28: 24px !important;
      --wp--preset--font-size--24: 20px !important;
      --wp--preset--font-size--p: 16px !important;
    }
    h3 {
      line-height: 28px !important;
    }
}
  
@media not all and (min-width: 768px) {
    :root {
      --wp--custom--wrapper--gap: 40px !important;
      --wp--preset--font-size--60: 36px !important;
      --wp--preset--font-size--44: 28px !important;
      --wp--preset--font-size--36: 24px !important;
      --wp--preset--font-size--24: 18px !important;
    }
    h3 {
      line-height: 24px !important;
    }
}
  
@media not all and (min-width: 640px) {
    :root {
      --wp--custom--wrapper--padding: 20px !important;
    }
}

/* GENERAL */

p:empty {
    display: none;
}

a [name="map1"] {
  display: none !important;
}

.font-la-belle {
  font-family: "La Belle Aurore";
}

html {
  scroll-behavior: smooth;
}

:root {
  --color-black : #1D1D1B;
  --color-white : #FFF;
  --color-orange : #EE7D00;
  --color-header : #696963
}

.conteneur-menu-mobile::-webkit-scrollbar {
  width: 4px;
  height: 10px;
}

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

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

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

/* HEADER */

.div-header {
  border-bottom: solid 1px;
  transition: border-color 0.3s ease-out, background 0.3s ease-out, top 0.1s ease-out;
}

html[data-scroll="0"] .div-header {
  border-color: var(--color-white);
  background: rgba(0, 0, 0, 0);
  top: 20px;
}

html:not([data-scroll="0"]) .div-header {
  border-color: var(--color-header);
  background: var(--color-header);
  top: 0px;
}

.nav-desktop .menu-item:not(.menu-item-36) a {
  color: var(--color-white);
}

.nav-mobile .menu-item:not(.menu-item-36) a {
  position: relative;
  color: var(--color-black);
  font-family: var(--wp--preset--font-family--gabarito);
  font-size: 24px;
  font-weight: 700;
}

.nav-mobile .menu-item-36 a {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
}

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

.menu-item:not(.menu-item-36) a::after {
  width: 0%;
}

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

.wrapper-nav-part {
  display: flex;
  gap: 20px;
  width: 50%;
  justify-content: space-between;
  align-items: center;
}

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

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

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

.icon-burger:hover {
  transform: scale(0.8);
}

.icon-burger div {
  background: var(--color-white);
  transition: background 0.3s ease-out;
}

.icon-burger:hover div {
  background: var(--color-orange);
}

/* MENU MOBILE */

.nav-menu-mobile {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100dvh;
  transform: translateX(-100%);
  background: #FBFEFF;
  transition: height 0.3s ease-out, transform 0.4s ease-out;
}

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

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

.icon-cross svg , .icon-close svg{
  transform: scale(1);
  fill: var(--color-black);
  transition: fill 0.3s ease-out , transform 0.3s ease-out;
}

.icon-cross:hover svg , .icon-close:hover svg{
  fill: var(--color-orange);
  transform: scale(0.8);
}

/* CUSTOM BTN */

.custom-btn-1 , .nav-desktop .menu-item a, .custom-btn-2, .custom-btn-3 {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  width: max-content;
}

.custom-btn-1, .menu-item-36 a, .custom-btn-2, .custom-btn-3, .btn-gallery{
  position: relative;
  display: block;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 360px;
  background-size: 210% ;
  background-position: right;
  transition: background-position 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
}

.custom-btn-1, .menu-item-36 a {
  color: var(--color-white);
  background-image: linear-gradient(120deg, #C26804 0%, #C26804 49%, var(--color-orange) 50%, var(--color-orange) 100%);
}

.custom-btn-3, .btn-gallery {
  color: var(--color-black);
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(120deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, #E8E8E8   50%, #E8E8E8   100%);
}

.custom-btn-1 span {
  display: block;
  width: max-content;
}

.custom-btn-2 {
  width: fit-content;
  border: solid 1px;
  border-color: var(--color-white);
  background-image: linear-gradient(120deg, #E8E8E8 0%, #E8E8E8 49%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}

.custom-btn-1:hover, .menu-item-36 a:hover , .custom-btn-2:hover, .custom-btn-3:hover , .btn-gallery:hover {
  background-position: left;
  border-color: var(--color-black);
}

.custom-btn-2:hover {
  color: var(--color-black);
  border-color: #E8E8E8 ;
}

/* FOOTER */ 

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

.lien-footer:hover {
  color: var(--color-orange);
}

.logo-footer {
  fill : #EE7D00;
  transition: fill 0.3s ease-out;
}

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

/* HERO */

.container-bg-hero::after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(6, 12, 26, 0.24) 0%, rgba(6, 12, 26, 0.60) 100%);
}

@keyframes opacityHero {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.logo-hero {
  animation: opacityHero 0.6s forwards;
}

h1 {
  animation: opacityHero 0.6s forwards 0.4s;
}

/* VIDEO */

.video-frame, .video-realisation {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* CARDS HOME */

.card-link-container .card-link-bg::before {
  position: absolute;
  content: '';
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 29, 27, 0.00) 0%, rgba(29, 29, 27, 0.40) 100%);
} 

.card-link-container .card-link-bg::after {
  position: absolute;
  content: '';
  inset: 0;
  opacity: 0;
  background: linear-gradient(0deg, rgba(29, 29, 27, 0.80) 0%, rgba(29, 29, 27, 0.80) 100%);
  transition: opacity 0.3s ease-out;
}

.card-link-container:hover .card-link-bg::after {
  opacity: 1;
}

.container-cards {
  scrollbar-color: rgba(0,0,0,0) rgba(0,0,0,0);
  scrollbar-width: thin;
}

/* SLIDER REALISATION */

@keyframes animRealisation {
  0% {
    transform : translateX(0%)
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-slider-realisation {
  animation: animRealisation linear infinite;
}

.div-modal {
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

@keyframes openModal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.div-modal.opened {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  gap: 40px;
  animation: openModal 0.3s ease-out forwards;
}

.image-modal {
  max-width: 100%;
  max-height: calc(100% - 82px);
  height: inherit;
  object-fit: contain;
}

/* REALISATIONS */

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

.logo-insta:hover {
  fill: var(--color-black);
}

.overlay-loading {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px);
}

.overlay-loading.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,var(--color-orange) 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

.btn-gallery {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.btn-gallery.active {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: unset;
  cursor: auto;
}

html {
  overflow-y: auto;
}

html.blocked {
  overflow-y: hidden;
}

@keyframes fadeInProjects {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeUpGallery {
    0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOutProjects {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.container-div-img {
  height: 100%;
}

.div-img-modale {
  height: 100%;
  display: flex;
  justify-content: center;
}

.img-modale {
  object-fit: cover;
}

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

.btn-play:hover svg{
  fill: var(--color-orange);
}

.btn-play {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.btn-play.onplay {
  opacity: 0;
}

.container-videos-real::-webkit-scrollbar {
  inset: 0;
}

.container-videos-real {
  scrollbar-color: rgba(0,0,0,0) rgba(0,0,0,0)
}

/* CONTACT */

#popup-contact {
  box-shadow: -4px 4px 64px 0px rgba(0, 0, 0, 0.16);
}

/* MENTIONS LEGALES */

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

.netdev-mentions-legales h2 {
  padding-top: 40px;
  padding-bottom: 20px;
}

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

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