/* ==========================================================================
   GLOBAL FIXES
========================================================================== */

html.is--locked,
body.is--locked {
  overflow: hidden !important;
}

body {
  overflow-x: hidden;
}

/* ==========================================================================
   EMPTY COLLECTIONS
   Hide Webflow empty states and the parent section when every collection
   list inside that section has no items.
========================================================================== */

.w-dyn-empty {
  display: none !important;
}

.w-dyn-list:not(:has(.w-dyn-item)) {
  display: none;
}

.section:has(.w-dyn-list):not(:has(.w-dyn-item)) {
  display: none;
}

/* ==========================================================================
   BUTTON CHARACTER HOVER
   Usage:
   <span data-button-animate-chars>Texte</span>
========================================================================== */

[data-button-animate-chars] {
  display: inline-block;
  overflow: hidden;
}

[data-button-animate-chars] span {
  position: relative;
  display: inline-block;
  text-shadow: 0 1.25em currentColor;
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover [data-button-animate-chars] span,
  .btn:hover [data-button-animate-chars] span {
    transform: translateY(-1.25em);
  }
}

/* ==========================================================================
   BUTTON ROD HOVER
   Expected structure:
   .btn--wrapper
     .btn--rod
     p
========================================================================== */

.btn--wrapper {
  cursor: pointer;
}

.btn--rod {
  transform-origin: left center;
  will-change: transform;
}

/* ==========================================================================
   NAVBAR — DESKTOP
   The desktop menu remains visible and untouched.
========================================================================== */

.navbar {
  z-index: 999;
}

.container--navbar {
  position: relative;
  z-index: 4;
}

.nav--menu {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* Decorative black bar + Union.svg — stay behind the nav content */
.navbar--mask-1,
.navbar--mask-2 {
  pointer-events: none;
  z-index: 1;
}

.navbar--mask-1 .image-2 {
  pointer-events: none;
}

/* Legacy SVG mask (hidden on mobile in Webflow) */
.navbar--mask {
  pointer-events: none;
  z-index: 1;
}

.navbar-menu-trigger {
  position: relative;
  z-index: 5;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.navbar--menu-close {
  display: none;
}

/* ==========================================================================
   NAVBAR — TABLET / MOBILE
========================================================================== */

@media screen and (max-width: 991px) {
  .navbar-menu-trigger {
    cursor: pointer;
  }

  .navbar-menu-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 0.25rem;
  }

  .navbar--mask {
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
  }

  .navbar.is--open .navbar--mask {
    pointer-events: auto;
  }

  .nav--menu {
    display: none;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .navbar.is--open .nav--menu {
    pointer-events: auto;
  }

  .navbar--link {
    will-change: transform, opacity, filter;
  }

  .navbar--menu-open,
  .navbar--menu-close {
    display: block;
    width: 100%;
    height: auto;
    color: currentColor;
    transition: none;
    will-change: transform, opacity;
  }

  .navbar--menu-close {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.75) rotate(-90deg);
  }
}

/* ==========================================================================
   NAVBAR — DESKTOP LINK HOVER
========================================================================== */

@media screen and (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .nav--menu .navbar--link {
    transition: opacity 0.35s ease;
  }

  .nav--menu:hover .navbar--link {
    opacity: 0.45;
  }

  .nav--menu .navbar--link:hover {
    opacity: 1;
  }
}

/* ==========================================================================
   FOOTER LINKS HOVER
========================================================================== */

.footer a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition:
    color 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.15em;
  left: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    transform: translateX(0.25rem);
  }

  .footer a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* ==========================================================================
   BUTTON — SMOOTH TEXT REVEAL
   Expected structure:
   .button
     .button--circle
       svg
     p
========================================================================== */

.button {
  --button-accent: #09c995;
  --button-circle-size: 5.8rem;
  --button-text-gap: 1.25rem;

  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--button-accent);
  text-decoration: none;
  overflow: visible;
}

.button--circle {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--button-circle-size);
  height: var(--button-circle-size);
  border-radius: 50%;
  overflow: hidden;
  color: var(--button-accent);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
  will-change: transform;
}

.button--circle svg,
.button--circle path,
.button--circle line,
.button--circle rect {
  color: var(--button-accent);
  stroke: currentColor;
}

.button p {
  max-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--button-accent);
  white-space: nowrap;
  transform: translateX(-0.75rem);
  transition:
    max-width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease 0.05s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: max-width, opacity, transform;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .button--circle {
    transform: scale(1.04);
  }

  .button:hover p {
    max-width: 18rem;
    margin-left: var(--button-text-gap);
    opacity: 1;
    transform: translateX(0);
  }
}

/* On touch devices, keep the text visible because there is no hover. */

@media (hover: none), (pointer: coarse) {
  .button p {
    max-width: 18rem;
    margin-left: var(--button-text-gap);
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   LOAD ANIMATIONS
   Usage:
   animation="load"
   animation="load-up"
   animation="load-left"
   animation="load-right"
   animation="load-split"
========================================================================== */

[animation="load"],
[animation="load-up"],
[animation="load-left"],
[animation="load-right"],
[animation="load-split"] {
  will-change: transform, opacity;
}

[animation="load-split"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.load-split__line-mask {
  display: block;
  overflow: hidden;
}

.load-split__line {
  display: block;
}

/* ==========================================================================
   FULL PAGE LOADING ANIMATION
   Usage:
   animation="loading"
========================================================================== */

[animation="loading"] {
  will-change: transform, opacity;
}

/* ==========================================================================
   SCROLL ANIMATIONS
   Usage:
   animation="fade"
   animation="fade-up"
   animation="fade-left"
   animation="fade-right"
   animation="fade-stagger"
   animation="fade-split"
========================================================================== */

[animation="fade"],
[animation="fade-up"],
[animation="fade-left"],
[animation="fade-right"],
[animation="fade-stagger"] > *,
[animation="fade-split"] {
  will-change: transform, opacity;
}

[animation="fade-split"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.fade-split__line-mask {
  display: block;
  overflow: hidden;
}

.fade-split__line {
  display: block;
}

/* Fix for the custom attribute found in the project. */

[animation="fade--fromright"] {
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* ==========================================================================
   HERO TITLE HOVER
   Expected structure:
   .hero--title
     div > p
     a > .brand--hero
     div > p
========================================================================== */

.hero--title {
  --text-gap: 1.5rem;
  --animation-duration: 0.85s;
  --logo-width: 2.8rem;

  position: relative;
  display: inline-block;
  width: var(--logo-width);
  overflow: visible;
  cursor: pointer;
}

.hero--title > a {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  transform: none !important;
  transition: none !important;
}

.hero--title .brand--hero {
  display: block;
  width: 100%;
  height: auto;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

.hero--title > div {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  width: max-content;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

.hero--title > div p {
  margin: 0;
  opacity: 0;
  filter: blur(4px);
  transition:
    transform var(--animation-duration) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter var(--animation-duration) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
}

.hero--title > div:first-child {
  right: calc(100% + var(--text-gap));
  justify-content: flex-end;
}

.hero--title > div:first-child p {
  transform: translateX(calc(100% + var(--text-gap)));
}

.hero--title > div:last-child {
  left: calc(100% + var(--text-gap));
  justify-content: flex-start;
}

.hero--title > div:last-child p {
  transform: translateX(calc(-100% - var(--text-gap)));
}

@media (hover: hover) and (pointer: fine) {
  .hero--title:hover > div p {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

/* ==========================================================================
   VIMEO VISUAL STATES
========================================================================== */

.vimeo-player__placeholder,
.vimeo-bg__placeholder,
.vimeo-player__dark,
.vimeo-player__interface,
.vimeo-player__loading,
.vimeo-player__play,
.vimeo-player__pause,
.vimeo-bg__play,
.vimeo-bg__pause {
  transition: opacity 0.45s ease;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__placeholder,
.vimeo-bg[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-bg__placeholder {
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="false"] .vimeo-player__dark {
  opacity: 0.33;
}

.vimeo-player[data-vimeo-activated="false"][data-vimeo-playing="false"]
  .vimeo-player__dark,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__dark {
  opacity: 0;
}

.vimeo-player .vimeo-player__loading,
.vimeo-player .vimeo-player__interface {
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__loading {
  opacity: 1;
}

.vimeo-player[data-vimeo-playing="true"][data-vimeo-loaded="true"]
  .vimeo-player__loading {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="false"]
  .vimeo-player__interface,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover
  .vimeo-player__interface {
  opacity: 1;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__play,
.vimeo-player[data-vimeo-playing="false"] .vimeo-player__pause {
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="false"] .vimeo-player__play,
.vimeo-player[data-vimeo-playing="true"] .vimeo-player__pause {
  opacity: 1;
}

.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__play,
.vimeo-bg[data-vimeo-playing="false"] .vimeo-bg__pause {
  opacity: 0;
}

.vimeo-bg[data-vimeo-playing="false"] .vimeo-bg__play,
.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__pause {
  opacity: 1;
}

/* ==========================================================================
   REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  [data-button-animate-chars] span,
  .nav--menu .navbar--link,
  .hero--title > div p,
  .vimeo-player__placeholder,
  .vimeo-bg__placeholder,
  .vimeo-player__dark,
  .vimeo-player__interface,
  .vimeo-player__loading,
  .vimeo-player__play,
  .vimeo-player__pause,
  .vimeo-bg__play,
  .vimeo-bg__pause {
    transition-duration: 0.01ms !important;
  }
}
/* ==========================================================================
   BUTTON ARROW HOVER
========================================================================== */
/* ==========================================================================
   BUTTON HOVER
========================================================================== */

.button {
  --button-accent: #09C995;
  --button-text-gap: .55rem;
}

.button--circle {
  position: relative;
  overflow: hidden;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}

.button--circle svg,
.button--circle img,
.button--circle i {
  transform: translateX(0);
  color: var(--button-accent);
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    color .35s ease,
    stroke .35s ease,
    fill .35s ease;
}

.button--circle svg * {
  stroke: currentColor;
}

/* Texte */

.button p {
  color: var(--button-accent);
  margin: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;

  opacity: 0;
  margin-left: 0;
  transform: translateX(-.4rem);

  transition:
    max-width .7s cubic-bezier(.22,1,.36,1),
    margin-left .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1),
    opacity .35s ease;
}

/* Hover */

@media (hover: hover) and (pointer: fine) {

  .button:hover .button--circle {
    transform: scale(1.04);
  }

  .button:hover .button--circle svg,
  .button:hover .button--circle img,
  .button:hover .button--circle i {
    transform: translateX(.7rem);
  }

  .button:hover p {
    max-width: 18rem;
    margin-left: var(--button-text-gap);
    opacity: 1;
    transform: translateX(-.15rem);
  }

}

/* ==========================================================================
   BACK BUTTON HOVER
   `scale` (not transform) keeps Webflow's rotateY(180deg) on .is--return.
========================================================================== */

.button--circle-bg {
  transition: scale .55s cubic-bezier(.22,1,.36,1);
}

@media (hover: hover) and (pointer: fine) {

  .button-isback:hover .button--circle-bg {
    scale: 1.04;
  }

}

/* ==========================================================================
   STICKY CORNERS
   Usage: data-sticky-corners on the wrapper of a rounded card.
   The corner markup is injected by script.js, which also sets the
   --sticky-corner-top-* offsets from the navbar shape.

   Every corner spans the full height of the overlay so its sticky range
   covers the whole card (a grid item's sticky range is its grid area).
========================================================================== */

:root {
  --sticky-corner-size: 1.25rem;
  --sticky-corner-color: var(--_colors---black, #000);
  --sticky-corner-frame: 0.625rem;
}

[data-sticky-corners] {
  position: relative;
}

/* Top and bottom frame strips (script.js reads the top one's height) */
body:has([data-sticky-corners])::before,
body:has([data-sticky-corners])::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: 998;
  height: var(--sticky-corner-frame);
  background: var(--sticky-corner-color);
  pointer-events: none;
}

body:has([data-sticky-corners])::before {
  top: 0;
}

body:has([data-sticky-corners])::after {
  bottom: 0;
}

.sticky-corners {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  pointer-events: none;
}

/* Corners overhang the card by 1px on their outer sides so sub-pixel
   rounding never leaves a light seam between the card edge and the corner. */
.sticky-corners__corner {
  position: sticky;
  grid-row: 1;
  width: calc(var(--sticky-corner-size) + 1px);
  height: calc(var(--sticky-corner-size) + 1px);
  --corner-fill: radial-gradient(
    circle at var(--corner-center),
    transparent calc(var(--sticky-corner-size) - 0.5px),
    var(--sticky-corner-color) var(--sticky-corner-size)
  );
  background: var(--corner-fill);
}

.sticky-corners__corner.is--tl {
  --corner-center: 100% 100%;
  grid-column: 1;
  place-self: start start;
  margin: -1px 0 0 -1px;
  top: calc(var(--sticky-corner-top-left, 0px) - 1px);
}

.sticky-corners__corner.is--tr {
  --corner-center: 0 100%;
  grid-column: 2;
  place-self: start end;
  margin: -1px -1px 0 0;
  top: calc(var(--sticky-corner-top-right, 0px) - 1px);
}

.sticky-corners__corner.is--bl {
  --corner-center: 100% 0;
  grid-column: 1;
  place-self: end start;
  margin: 0 0 -1px -1px;
  bottom: calc(var(--sticky-corner-frame) - 1px);
}

.sticky-corners__corner.is--br {
  --corner-center: 0 0;
  grid-column: 2;
  place-self: end end;
  margin: 0 -1px -1px 0;
  bottom: calc(var(--sticky-corner-frame) - 1px);
}

/* ==========================================================================
   NAVBAR CORNERS
   Same CSS corner as the cards instead of Union.svg (.image-2):
   rounded bottom-right on the left black block, and the inverted corner
   where it meets the 0.625rem top strip.
   script.js sets .is--split / .is--no-notch when the content under the
   block's right edge is two separate cards, which bring their own corners.
========================================================================== */

.navbar.is--split .navbar--mask-1 {
  border-bottom-right-radius: 0;
}

.navbar.is--no-notch .navbar--mask-1::after {
  display: none;
}

.navbar--mask-1 {
  border-bottom-right-radius: var(--sticky-corner-size);
}

.navbar--mask-1 .image-2 {
  display: none;
}

/* ==========================================================================
   LANGUAGE TAB CORNERS ("Global / languages": .div-2 > .div-3)
   Same CSS corners instead of the two Subtract.svg images: inverted corner
   left of the tab at the bottom, and above the tab on the right edge.
   The tab overhangs the hero by 1px so no sub-pixel seam shows below it.
========================================================================== */

.div-2 {
  right: -1px;
  bottom: -1px;
}

.div-2 > .image.is--lng--bottom-left {
  display: none;
}

.div-3 {
  border-top-left-radius: var(--sticky-corner-size);
}

.div-3::before,
.div-3::after {
  content: "";
  position: absolute;
  width: var(--sticky-corner-size);
  height: var(--sticky-corner-size);
  background: radial-gradient(
    circle at 0 0,
    transparent calc(var(--sticky-corner-size) - 0.5px),
    var(--sticky-corner-color) var(--sticky-corner-size)
  );
  pointer-events: none;
}

.div-3::before {
  right: 100%;
  bottom: 0;
}

.div-3::after {
  right: 0;
  bottom: 100%;
}

.navbar--mask-1::after {
  content: "";
  position: absolute;
  top: var(--sticky-corner-frame);
  left: 100%;
  width: var(--sticky-corner-size);
  height: var(--sticky-corner-size);
  background: radial-gradient(
    circle at 100% 100%,
    transparent calc(var(--sticky-corner-size) - 0.5px),
    var(--sticky-corner-color) var(--sticky-corner-size)
  );
  pointer-events: none;
}