/* MEDIA QUERIES */

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

@media not all and (min-width: 1281px) {
  :root {
    --wp--custom--wrapper--py: 100px !important;
    --wp--preset--font-size--88: 80px !important;
  }
}

@media not all and (min-width: 1025px) {
  :root {
    --wp--custom--wrapper--py: 80px !important;
    --wp--preset--font-size--88: 72px !important;
    --wp--preset--font-size--44: 36px !important;
  }
}

@media not all and (min-width: 769px) {
  :root {
    --wp--custom--wrapper--px: 40px !important;
    --wp--custom--wrapper--py: 60px !important;
    --wp--preset--font-size--88: 60px !important;
    --wp--preset--font-size--44: 28px !important;
    --wp--preset--font-size--32: 20px !important;
  }

  .div-article .img-article {
    aspect-ratio: unset !important;
  }

  .div-article.active .img-article {
    width: 100% !important;
  }

  .div-article.active .content-article {
    width: 100% !important;
  }
}

@media not all and (min-width: 641px) {
  :root {
    --wp--custom--wrapper--px: 20px !important;
    --wp--custom--wrapper--py: 40px !important;
    --wp--custom--wrapper--gap: 40px !important;
    --wp--preset--font-size--88: 36px !important;
  }

  .icon-burger {
    padding: 16px !important;
  }

  .menu-mobile {
    top: 94px !important;
    width: calc(100% - 40px) !important;
  }

  .nav-ul {
    max-height: calc(100svh - (114px + 80px)) !important;
  }

  .sub-menu {
    padding-left: 20px !important;
  }

  .logo-header,
  .logo-footer {
    gap: 6px !important;
  }

  .btn-nav-prev,
  .btn-nav-next {
    width: 40px !important;
    height: 40px !important;
  }

}

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

/* GENERAL */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 166px;
}

p:empty {
  display: none;
}

:root {
  --black: var(--wp--preset--color--custom-black);
  --white: var(--wp--preset--color--custom-white);
  --yellow: var(--wp--preset--color--custom-yellow);
  --px: var(--wp--custom--wrapper--px);
  --py: var(--wp--custom--wrapper--py);
  --gap: var(--wp--custom--wrapper--gap);
}

/* HEADER */

.div-header {
  transition: all 0.3s ease-out;
}

html[data-scroll="0"] .div-header {
  background: rgba(0, 0, 0, 0);
}

html:not([data-scroll="0"]) .div-header {
  background: rgba(255, 255, 255, 0.95);
}

.icon-burger {
  padding: 20px 24px;
  border-radius: 360px;
  border: solid 1px;
  cursor: pointer;
  width: auto;
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s ease-out;
}

html[data-scroll="0"] .icon-burger {
  border-color: var(--white);
}

html:not([data-scroll="0"]) .icon-burger {
  border-color: var(--black);
}

html[data-scroll="0"] .icon-burger:hover {
  background: #E8EAEC;
  border-color: #E8EAEC;
}

html:not([data-scroll="0"]) .icon-burger:hover {
  background: #E8EAEC;
  border-color: var(--black);
}

html[data-scroll="0"] .icon-burger.active,
html:not([data-scroll="0"]) .icon-burger.active {
  background: var(--black);
  border-color: var(--black);
}

html[data-scroll="0"] .icon-burger.active:hover,
html:not([data-scroll="0"]) .icon-burger.active:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

.icon-burger span {
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  transition: color 0.3s ease-out;
}

html[data-scroll="0"] .icon-burger span {
  color: var(--white);
}

html:not([data-scroll="0"]) .icon-burger span,
html[data-scroll="0"] .icon-burger:hover span,
html:not([data-scroll="0"]) .icon-burger:hover span {
  color: var(--black);
}

html[data-scroll="0"] .icon-burger.active span,
html:not([data-scroll="0"]) .icon-burger.active span {
  color: var(--yellow);
}

html[data-scroll="0"] .icon-burger.active:hover span,
html:not([data-scroll="0"]) .icon-burger.active:hover span {
  color: var(--black);
}

.icon-burger .arrow-burger {
  transition: fill 0.3s ease-out;
}

html[data-scroll="0"] .icon-burger .arrow-burger {
  fill: var(--white);
}

html:not([data-scroll="0"]) .icon-burger .arrow-burger,
html[data-scroll="0"] .icon-burger:hover .arrow-burger,
html[data-scroll="0"] .icon-burger.active:hover .arrow-burger,
html:not([data-scroll="0"]) .icon-burger.active:hover .arrow-burger {
  fill: var(--black)
}

html[data-scroll="0"] .icon-burger.active .arrow-burger,
html:not([data-scroll="0"]) .icon-burger.active .arrow-burger {
  fill: var(--yellow);
}

.icon-burger .line-burger {
  transform: translateY(0) rotate(0);
  transition: all 0.3s ease-out;
}

html[data-scroll="0"] .icon-burger .line-burger,
html:not([data-scroll="0"]) .icon-burger.active .line-burger {
  background: var(--white);
}

html:not([data-scroll="0"]) .icon-burger .line-burger,
html[data-scroll="0"] .icon-burger:hover .line-burger,
html:not([data-scroll="0"]) .icon-burger.active:hover .line-burger {
  background: var(--black);
}

.icon-burger.active .line-burger:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.icon-burger.active .line-burger:nth-child(2) {
  opacity: 0;
}

.icon-burger.active .line-burger:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.logo-header,
.logo-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-title {
  transition: all 0.3s ease-out;
}

html[data-scroll="0"] .logo-header .logo-title,
.logo-footer .logo-title {
  fill: var(--white);
}

html:not([data-scroll="0"]) .logo-header .logo-title {
  fill: var(--black);
}

html[data-scroll="0"] .logo-header .logo-header:hover .logo-title,
html:not([data-scroll="0"]) .logo-header .logo-header:hover .logo-title,
.logo-footer:hover .logo-title {
  fill: var(--yellow);
}

.logo-circle {
  transform: rotate(0);
  transition: all 0.8s cubic-bezier(.28, 1.12, .84, .97);
}

.logo-header:hover .logo-circle,
.logo-footer:hover .logo-circle {
  transform: rotate(360deg);
}

/* MENU MOBILE */

.menu-mobile {
  position: fixed;
  display: grid;
  z-index: 2;
  top: 146px;
  left: var(--px);
  overflow: hidden;
  transition: grid-template-rows 0.4s ease-out;
}

.menu-closed {
  grid-template-rows: 0fr;
}

.menu-opened {
  grid-template-rows: 1fr;
}

.expandable-collapse,
.sub-menu {
  min-height: 0;
}

.nav-ul {
  overflow-y: auto;
  max-height: calc(100svh - 126px - 160px);
  scrollbar-width: thin;
  scrollbar-color: var(--black) var(--yellow);
}

.menu-item a {
  position: relative;
  display: block;
  width: fit-content;
  font-family: "Fira Sans";
  font-size: 16px;
  font-style: italic;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--black);
  transition: color 0.3s ease-out;
}

.menu-item a:hover,
.current-menu-item>a:nth-child(1) {
  color: var(--white);
}

.title-sub-menu>a::after {
  position: absolute;
  content: '';
  right: -26px;
  top: 0;
  width: 20px;
  height: 20px;
  transform: rotate(0);
  transform-origin: center;
  background-image: url(/wp-content/uploads/2025/11/Expand_down.svg);
  background-repeat: no-repeat;
  background-position: right;
  filter: brightness(0);
  transition: transform 0.3s ease-out;
}

.title-sub-menu.active>a::after {
  transform: rotate(-180deg);
}


.sub-menu {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 60px;
  min-height: 0;
}

.title-sub-menu .div-collapse {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease-out;
}

.title-sub-menu.active .div-collapse {
  grid-template-rows: 1fr;
}

.sub-menu li:first-child {
  padding-top: 32px;
}

/* FOOTER */

.div-img-footer {
  position: relative;
  mask-image: linear-gradient(black 0%, black 100%), url(/wp-content/uploads/2025/11/mask-wave-21.svg);
  mask-composite: subtract;
  mask-size: cover, 105%;
  mask-repeat: repeat, repeat-x;
  mask-position: center, 0% -1px;
}

.div-img-footer::before {
  position: absolute;
  z-index: 1;
  content: '';
  width: 100%;
  height: 100%;
  bottom: -1px;
  left: 0;
  background-image: url(/wp-content/uploads/2025/11/mask-wave2.svg);
  background-repeat: repeat-x;
  background-size: 105%;
  background-position: 0% 100%;
}

.div-img-footer::after {
  position: absolute;
  content: '';
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 19, 19, 0.20);
}

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

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

.fan-footer {
  position: absolute;
  z-index: 1;
  bottom: 5%;
  left: 13%;
  width: 17%;
  padding: 2%;
  border-radius: 100%;
  background: var(--black);
}

.fan-footer svg {
  fill: var(--yellow);
}

/* CUSTOM BTN */

.custom-btn-1,
.custom-btn-2,
.custom-btn-3,
.custom-btn-4 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  border-radius: 360px;
  transition: background 0.3s ease-out;
}

.custom-btn-1 span,
.custom-btn-2 span,
.custom-btn-3 span,
.custom-btn-4 span {
  font-family: "Fira Sans";
  font-size: 16px;
  font-style: italic;
  text-transform: uppercase;
  font-weight: 700;
  transition: color 0.3s ease-out;
}

.custom-btn-1,
.custom-btn-2 {
  background: var(--yellow);
}

.custom-btn-3,
.custom-btn-4 {
  background: var(--black);
}

.custom-btn-1 span,
.custom-btn-2 span {
  color: var(--black);
}

.custom-btn-3 span,
.custom-btn-4 span {
  color: var(--white);
}

.custom-btn-1 svg,
.custom-btn-2 svg {
  fill: var(--black);
  transition: fill 0.3s ease-out;
}

.custom-btn-3 svg,
.custom-btn-4 svg {
  fill: var(--white);
  transition: fill 0.3s ease-out;
}

.custom-btn-1:hover {
  background: var(--white);
}

.custom-btn-2:hover {
  background: var(--black);
}

.custom-btn-3:hover {
  background: var(--white);
}

.custom-btn-2:hover span {
  color: var(--yellow);
}

.custom-btn-2:hover svg {
  fill: var(--yellow);
}

.custom-btn-3:hover span {
  color: var(--black);
}

.custom-btn-3:hover svg {
  fill: var(--black);
}

.custom-btn-4:hover {
  background: var(--yellow);
}

.custom-btn-4:hover span {
  color: var(--black);
}

.custom-btn-4:hover svg {
  fill: var(--black);
}

/* CALLOUT */

.callout-1 {
  font-size: var(--wp--preset--font-size--20);
  font-weight: 500;
  font-style: italic;
}

/* MISCELANEOUS */

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

.img-link:hover {
  transform: scale(1);
}

mark.has-custom-yellow-color {
  font-weight: 700 !important;
  color: var(--yellow) !important;
}

.img-bg-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: linear-gradient(black 0%, black 100%), url(/wp-content/uploads/2025/11/mask-wave2.svg);
  mask-composite: subtract;
  mask-size: cover, 101%;
  mask-repeat: repeat, no-repeat;
  mask-position: center, 100% 100.1%;
}

.img-bg-wave img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-bg-wave::after {
  position: absolute;
  content: '';
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 19, 19, 0.40);
}

.img-banner::after {
  position: absolute;
  content: '';
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 19, 19, 0.80);
}

.img-circle {
  mask-image: url(/wp-content/uploads/2025/11/Vector.svg);
  mask-repeat: no-repeat;
  mask-position: right;
}

.img-block {
  position: relative;
}

.img-block::after {
  position: absolute;
  content: '';
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 19, 19, 0.60);
}

/* HERO */

.img-hero::after {
  position: absolute;
  content: '';
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 19, 19, 0.70);
}

/* SLIDER IMAGE */

.btn-nav-prev,
.btn-nav-next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
}

.btn-nav-prev svg,
.btn-nav-next svg {
  fill: var(--black);
  transition: fill 0.3s ease-out
}

.btn-nav-prev:hover svg,
.btn-nav-next:hover svg {
  fill: var(--yellow);
}

/* CONTACT */

.wpforms-container {
  width: 100% !important;
  margin: 0 !important;
}

.wpforms-field-medium {
  max-width: 100% !important;
}

#wpforms-537 .wpforms-required-label {
  display: none !important;
}

#wpforms-form-581 .wpforms-required-label {
  color: var(--white) !important;
}

.wpforms-field-container label,
legend,
.modern-title {
  font-size: var(--wp--preset--font-size--p) !important;
  font-family: var(--wp--preset--font-family--fira-sans) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.wpforms-field-container label:not(.wpforms-field-label-inline),
legend {
  padding-bottom: 6px !important;
}

.wpforms-container .wpforms-field {
  padding-bottom: 16px !important;
  padding-top: 0 !important;
}

.wpforms-submit::after {
  border: none !important;
  position: inherit !important;
}

.choice-1 {
  align-items: center !important;
}

#wpforms-581-field_10 {
  border-radius: 36px !important;
}

.btn-envoi-form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 24px !important;
  border-radius: 360px !important;
  background: var(--yellow) !important;
  transition: background 0.3s ease-out !important;
}

.btn-envoi-form span {
  font-family: "Fira Sans" !important;
  font-size: 16px !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  transition: color 0.3s ease-out !important;
}

.btn-envoi-form svg {
  fill: var(--black) !important;
  transition: fill 0.3s ease-out !important;
}

.btn-envoi-form:hover {
  background: var(--white) !important;
}

.modern-title {
  color: var(--white) !important;
}

.wpforms-uploader {
  border-style: solid !important;
  border-radius: 36px !important;
  padding: 15px 10px !important;
}

/* NEWS */

.div-article .img-article,
.div-article .content-article,
.div-article .article-collapse {
  transition: all 0.4s ease-out;
}

.div-article .img-article {
  aspect-ratio: 1150/670;
}

.div-article.active .img-article {
  width: 33%;
  aspect-ratio: unset;
}

.div-article.active .content-article {
  width: 66%;
}

.div-article.active .article-collapse {
  grid-template-rows: 1fr;
  min-width: 100%;
}

@keyframes rotateFan {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.spinner-fan {
  animation: rotateFan 2s infinite linear, fadein 0.25s ease-out forwards;
}

/* MENTIONS LEGALES */

.netdev-mentions-legales {
  width: 100%;
}

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

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

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

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