/*--------------------------------------------

1. common
    - main
    - typography
    - layout
    - button
2. components
    - marquee
    - outline text
    - slider
    - contact form
    - flipbox
    - realisations
    - toggle image
    - lightbox

--------------------------------------------*/



/* ===============================
   COMMON - MAIN
================================= */
/* --- VARIABLES --- */
:root { --wp--preset--gradient--header: linear-gradient(90deg, var(--wp--preset--color--dark) 100%, var(--wp--preset--color--opacity-dark-20) 100%); --header-height: 121px;}
@media (min-width: 640px) { :root { --wp--preset--gradient--header: linear-gradient(90deg, var(--wp--preset--color--dark) 260px, var(--wp--preset--color--opacity-dark-20) 260px) !important; } }
@media (min-width: 1024px) { :root { --wp--preset--gradient--header: linear-gradient(90deg, var(--wp--preset--color--dark) 324px, var(--wp--preset--color--opacity-dark-20) 324px) !important; } }

/* --- GLOBAL --- */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { background: var(--wp--preset--color--dark) }

/* --- HEADER --- */
:root.header-scrolled {
  --wp--preset--gradient--header: var(--wp--preset--color--dark) !important;
}

/* --- Navigation container --- */
.wp-block-navigation__responsive-container {
  transition: opacity .25s ease;
}

.wp-block-navigation:not(.has-background)
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--dark) !important;
  height: fit-content !important;
  top: var(--header-height) !important;
}

.wp-block-navigation__responsive-container-content {
  padding: 20px !important;
}

@media (max-width: 640px) {
  .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
    margin-top: -25px !important;
  }
}

/* --- Navigation items --- */
.wp-block-navigation-link {
  font-size: 18px;
}

a.wp-block-navigation-item__content:hover span.wp-block-navigation-item__label,
a.wp-block-navigation-item__content[aria-current]:not([aria-current="false"]) {
  color: var(--wp--preset--color--secondary);
}

/* --- Bouton hamburger --- */
button.wp-block-navigation__responsive-container-open {
  padding: 12px 24px;
  border: solid 1px var(--wp--preset--color--light);
  background: transparent;
  color: var(--wp--preset--color--light);
  cursor: pointer;
}

button.wp-block-navigation__responsive-container-open:hover {
  border: solid 1px #E6E7E8;
  background: #E6E7E8;
  color: var(--wp--preset--color--dark);
}

.wp-block-navigation__responsive-container-close {
  visibility: hidden;
}

@media (min-width:600px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown){
    display:flex !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display:none !important;
  }
}

@media (min-width:1280px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown){
    display:none !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display:block !important;
    position:relative;
    width:100%;
  }
}

/* --- FOOTER --- */
.netdev-footer { border-top: 1px solid var(--wp--preset--color--light); }
.netdev-footer .netdev-footer-content .logo { position: relative;top: -9px; }
ul.wp-block-list li::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M9 6L15 12L9 18' stroke='%23F6F6F6'/></svg>");
  margin-right: 10px;
}



/* ===============================
   COMMON - TYPOGRAPHY
================================= */
.has-text-align-center { text-align: center !important; }



/* ===============================
   COMMON - LAYOUT
================================= */
/* .grid-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  @media(min-width: 390px) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  @media(min-width: 768px) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
} */



/* ===============================
   COMMON - BUTTON
================================= */
/* --- FILL --- */
.wp-block-button.is-style-fill .wp-block-button__link {
  --btn-color-start: var(--wp--preset--color--secondary);
  --btn-color-end: var(--wp--preset--color--primary);
  background-image: linear-gradient(45deg, var(--btn-color-start) 0%, var(--btn-color-end) 100%);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
  --btn-color-start: #2E8195;
  --btn-color-end: #184474;
}

/* --- OUTLINE --- */
.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--light);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #E6E7E8 !important;
  border-color: #E6E7E8 !important;
  color: var(--wp--preset--color--dark);
}

/* --- OUTLINE FIGMA --- */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #B4B6B9;
}

/* --- TABS --- */
.nd-realisations__tab a.wp-element-button {
  background: transparent;
  border: solid 1px var(--wp--preset--color--light);
  padding: 12px 24px;
}

.nd-realisations__tab a.wp-element-button:hover {
  background: #E6E7E8;
  border-color: #E6E7E8;
  color: var(--wp--preset--color--dark);
}

.nd-realisations__tab.is-active a.wp-element-button {
  background: var(--wp--preset--gradient--pbs);
  border: none;
  color: #ffffff;
  cursor: default;
}

.nd-realisations__tab.is-active a.wp-element-button:hover {
  color: #ffffff;
}



/* ===============================
   COMPONENTS - MARQUEE
================================= */
#marquee { will-change: transform; animation: marquee 25s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}



/* ===============================
   COMPONENTS - OUTLINE TEXT
================================= */
.has-text-border-light {
  -webkit-text-stroke: 1px var(--wp--preset--color--light);
  paint-order: stroke fill;
}



/* ===============================
   COMPONENTS - SLIDER
================================= */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.nd-slider__viewport {
  overflow-y: hidden;
}

.nd-slider__item {
  margin-block-start: 0 !important;
}

.nd-slider__controls .wp-block-button__link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --- CARDS --- */
.card-wrapper {
  /* position: relative; */
  /* background: var(--wp--preset--gradient--pbs); */
  /* padding-top: 10px; */
  border-radius: 28px 28px 0 0;
}

.card {
  /* background: #1F252E; */
  /* padding: 40px; */
  border-radius: 18px 18px 0 0;
}



/* ===============================
   COMPONENTS - CONTACT FORM
================================= */
/* --- WP FORMS --- */
.wpforms-container.wpforms-container-full.wpforms-block {margin-top: 0 !important;}
form .wpforms-required-label {display: none;}
form .wpforms-field-label {
  font-family: var(--wp--preset--font-family--raleway) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
#wpforms-1069-field_6-container legend {display: none;}
#wpforms-1069-field_6-container label {
  font-family: var(--wp--preset--font-family--raleway) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
li.choice-1.depth-1 {align-items: center !important;}
li.choice-1.depth-1 label {padding-left: 20px !important;}
button#wpforms-submit-1069 {
  background-color: transparent !important;
  background: var(--wp--preset--gradient--pbs) !important;
  border: none !important;
}

button#wpforms-submit-1069:hover {
  background: linear-gradient(45deg, #2E8195 0%, #184474 100%) !important;
}

/* --- MODAL --- */
.nd-modal[data-nd-init="1"] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  transform: translateZ(0);
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 20px;
}

.nd-modal[data-nd-init="1"] .nd-modal__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nd-modal[data-nd-init="1"] .nd-modal__panel {
  position: relative;
  width: 100%;
  border-radius: 18px 18px 0 0;
  background: var(--wp--preset--color--dark);
  padding: 50px;
  text-align: center;
  box-sizing: border-box;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .nd-modal[data-nd-init="1"] .nd-modal__panel {
    width: var(--nd-container-current);
  }
}

@media (min-width: 640px) {
  .nd-modal[data-nd-init="1"] .nd-modal__panel {
    padding: 80px;
  }
}

@media (min-width: 1024px) {
  .nd-modal[data-nd-init="1"] .nd-modal__panel {
    padding: 100px;
  }
}

.nd-modal[data-nd-init="1"] .nd-modal__panel h2 {
  color: #ffffff;
  font-size: 32px !important;
  line-height: 1.2;
  margin-top: 0 !important;
  margin-bottom: var(--wp--preset--spacing--50) !important;
}

@media (min-width: 640px) {
  .nd-modal[data-nd-init="1"] .nd-modal__panel h2 {
    font-size: 44px !important;
  }
}

@media (min-width: 1024px) {
  .nd-modal[data-nd-init="1"] .nd-modal__panel h2 {
    font-size: 56px !important;
  }
}

.nd-modal[data-nd-init="1"] .nd-modal__panel p {
  color: #ffffff !important;
  margin-bottom: var(--wp--preset--spacing--50) !important;
}

.nd-modal[data-nd-init="1"] .nd-modal__panel .is-style-fill a {
  border-radius: 0;
}

html.nd-modal-open,
body.nd-modal-open {
  overflow: hidden;
  height: 100%;
}

body.nd-modal-open {
  position: fixed;
  width: 100%;
  overscroll-behavior: none;
}

div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: transparent;
  border: transparent;
}



/* ===============================
   COMPONENTS - FLIPBOX
================================= */
.nd-flipbox {
  position: relative;
  overflow: hidden;
  aspect-ratio: 8 / 7;
  cursor: pointer;
}

.nd-flipbox__bg {
  z-index: 1;
  pointer-events: none;
}

.nd-flipbox__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nd-flipbox__overlay {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 13, 23, 0.10) 0%,
    rgba(6, 13, 23, 0.55) 100%
  );
  transition: opacity 0.3s ease, background 0.3s ease;
}

.nd-flipbox__content {
  position: relative;
  z-index: 3;
  min-height: 100%;
  padding: 24px;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.nd-flipbox__title,
.nd-flipbox__more {
  margin: 0 !important;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nd-flipbox__title {
  color: var(--wp--preset--color--light);
}

.nd-flipbox__more {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, calc(-50% + 8px), 0);
  opacity: 0;
  color: var(--wp--preset--color--light);
  width: max-content;
  margin: 0 !important;
  z-index: 5;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Lien pleine carte */
.nd-flipbox__link {
  position: absolute !important;
  inset: 0;
  z-index: 4;
  margin: 0 !important;
  display: block !important;
  pointer-events: auto;
}

.nd-flipbox__link .wp-block-button {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.nd-flipbox__link .wp-block-button__link {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0;
  line-height: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: auto;
}

.nd-flipbox:hover .nd-flipbox__overlay,
.nd-flipbox:focus-within .nd-flipbox__overlay {
  background: var(--wp--preset--gradient--pbs);
}

.nd-flipbox:hover .nd-flipbox__title,
.nd-flipbox:focus-within .nd-flipbox__title {
  opacity: 0;
  transform: translateY(-8px);
}

.nd-flipbox:hover .nd-flipbox__more,
.nd-flipbox:focus-within .nd-flipbox__more {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

.nd-flipbox__link .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--light);
  outline-offset: -2px;
}



/* ===============================
   COMPONENTS - REALISATIONS
================================= */
.nd-realisations__grid.is-loading {
  opacity: 0.2;
  transition: opacity 0.2s ease;
}

img[src*="20251220_153438"] {
  object-position: center 20%;
}

/* ===============================
   COMPONENTS - TOGGLE IMAGE
================================= */
.nd-toggle-image figure {
  transition: opacity 0.3s linear;
}

.nd-toggle-image figure:first-child {
    animation: swap-image-in 2400ms infinite;
}

.nd-toggle-image figure:last-child {
    animation: swap-image-out 2400ms infinite;
}

/* @keyframes swap-image-in {
    0%, 49.9% { opacity: 1; }
    50%, 100%  { opacity: 0; }
}

@keyframes swap-image-out {
    0%, 49.9% { opacity: 0; }
    50%, 100%  { opacity: 1; }
} */

@keyframes swap-image-in {
    0%   { opacity: 1; }
    40%  { opacity: 1; }
    60%  { opacity: 0; }
    80%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes swap-image-out {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    60%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ===============================
   COMPONENTS - LIGHTBOX
================================= */
.nd-realisations__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nd-realisations__trigger img {
  display: block;
  width: 100%;
}

.nd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

.nd-lightbox.is-open {
  display: block;
}

.nd-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 23, 0.9);
}

.nd-lightbox__dialog {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.nd-lightbox__image {
  display: block;
  max-width: min(1200px, 100%);
  max-height: calc(100vh - 40px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.nd-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 1px solid var(--wp--preset--color--light);
  background: transparent;
  color: var(--wp--preset--color--light);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.nd-lightbox__close:hover {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--dark);
}








/* ===============================
   MODIFS - CHECK DESIGN
================================= */
@media (max-width: 1023px) {
  .wp-block-group.has-radius-left-gradient-background.has-background {
    background: var(--wp--preset--color--dark) !important;
  }
}