@charset "UTF-8";
/* ==========================================================================
   cover / tools
   ========================================================================== */
/* ==========================================================================
   cover / typo
   ========================================================================== */
/* ==========================================================================
   COLORS / SETTINGS
   ========================================================================== */
:root {
  --color-white: #fff;
  --color-black: #000;
  --color-primary: #a454e0;
  --color-secondary: #0e0016;
}

/* ==========================================================================
   easing / settings
   ========================================================================== */
/* ==========================================================================
   FONTS / SETTINGS
   ========================================================================== */
:root {
  --font-primary: 'Alumni Sans', sans-serif;
  --font-secondary: 'DM Sans', sans-serif;
  --font-size-content: clamp(1rem, 0.21vw + 0.94rem, 1.13rem);
  --font-size-h1: clamp(8.75rem, 21.88vw + 2.19rem, 21.88rem);
  --font-size-h2: clamp(3.75rem, 2.08vw + 3.13rem, 5rem);
  --font-size-h3: clamp(1.88rem, 0.63vw + 1.69rem, 2.25rem);
  --font-size-h4: clamp(1.25rem, 0.42vw + 1.13rem, 1.5rem);
  --font-size-p: clamp(0.81rem, 0.73vw + 0.59rem, 1.25rem);
}

/* ==========================================================================
   DIMENSIONS / SETTINGS
   ========================================================================== */
:root {
  --spacing-xs: 5px;
  --spacing-sm: 15px;
  --spacing-md: 30px;
  --spacing-lg: 50px;
  --spacing-xl: 100px;
  --spacing-xxl: 220px;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   RESET / GENERIC
   ========================================================================== */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
}

.tt {
  align-items: center;
  color: var(--color-black);
  display: flex;
  height: 100vh;
  font: 800 75px/1.5 helvetica, sans-serif;
  justify-content: center;
  position: fixed;
  left: 0;
  margin: 0;
  top: 0;
  width: 100vw;
}

/* ==========================================================================
   BODY / ELEMENT
   Le body permet d'initialiser les propriétés générales de la page.
   Les éléments de la page vont hérités des propriétés inscrite dans body
   ========================================================================== */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-content);
  color: var(--color-black);
  line-height: 1.6;
}

/* ==========================================================================
   HEADINGS / ELEMENT
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
  line-height: 1.1;
  font-weight: bold;
  margin: 0;
}

h1 {
  font-family: var(--font-primary);
  font-size: var(--font-size-h1);
}

h2 {
  font-family: var(--font-primary);
  font-size: var(--font-size-h2);
}

h3 {
  font-family: var(--font-secondary);
  font-size: var(--font-size-h3);
}

h4 {
  font-family: var(--font-primary);
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

em {
  font-style: italic;
}

a {
  font-family: var(--font-secondary);
}

p {
  font-family: var(--font-secondary);
  font-size: var(--font-size-p);
}

/* ==========================================================================
   LINKS / ELEMENTS
   Style de base de tous les liens et bouton du site
   ========================================================================== */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   WRAPPER / ELEMENT
   ========================================================================== */
.wrapper {
  max-width: 1024px;
  width: calc(100% - var(--spacing-md));
  margin: 0 auto;
}

/**
 * Swiper 14.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 26, 2026
 */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode {
  .swiper-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}

.swiper-virtual.swiper-css-mode.swiper-horizontal {
  .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
}

.swiper-virtual.swiper-css-mode.swiper-vertical {
  .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  ::slotted(svg),
  svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
}

.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  ::slotted(.swiper-navigation-icon),
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}

.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}

.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}

.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - var(--swiper-navigation-size) / 2);
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }
  &:only-child {
    display: none !important;
  }
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition: 200ms transform, 200ms top;
    }
  }
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition: 200ms transform, 200ms left;
    }
  }
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}

.swiper-pagination-lock {
  display: none;
}

:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  .swiper-scrollbar-disabled > &,
  &.swiper-scrollbar-disabled {
    display: none !important;
  }
  .swiper-horizontal > &,
  &.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-vertical > &,
  &.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  > img,
  > svg,
  > canvas {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

/* Zoom container styles end */
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-thumbs {
  .swiper-slide-thumb-active {
    /* Styles for active thumb slide */
  }
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade {
  &.swiper-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out;
    }
  }
  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    pointer-events: auto;
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    .swiper-slide {
      pointer-events: none;
    }
  }
  &.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
  .swiper-slide-active,
  .swiper-slide-next,
  .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }
  .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
    &:before {
      content: "";
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      filter: blur(50px);
    }
  }
}

.swiper-cube {
  .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
}

/* Cube slide shadows start */
.swiper-cube {
  .swiper-slide-shadow-cube.swiper-slide-shadow-top,
  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}

/* Cube slide shadows end */
.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}

/* Flip slide shadows start */
.swiper-flip {
  .swiper-slide-shadow-flip.swiper-slide-shadow-top,
  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}

/* Flip slide shadows end */
.swiper-creative {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards {
  .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden;
  }
}

/* ==========================================================================
   icons / component
   ========================================================================== */
.icon {
  fill: currentColor;
  display: inline-block;
  flex: 0 0 auto;
  height: 1em;
  vertical-align: middle;
  width: 1em;
  stroke: transparent;
}

.icon--stroke {
  fill: transparent;
  stroke: currentColor;
}

.icon--xs {
  height: 0.75em;
  width: 0.75em;
}

.icon--sm {
  height: 0.8em;
  width: 0.8em;
}

.icon--md {
  height: 2em;
  width: 2em;
}

.icon--lg {
  height: 3em;
  width: 3em;
}

.icon--xl {
  height: 6em;
  width: 6em;
}

.header .wrapper {
  left: 50%;
  transform: translate(-50%, 20%);
  position: fixed;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dfa1fa;
  height: 61px;
  border-radius: 50px;
  padding: 5px 20px;
}
.header nav {
  color: var(--color-white);
}
.header ul {
  display: flex;
  gap: 20px;
  list-style-type: none;
  align-items: center;
}
.header img:hover {
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}
.header .icon {
  color: var(--color-white);
}
.header a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.header a:hover {
  color: var(--color-primary);
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}
.header a:hover .icon {
  color: var(--color-primary);
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}
.header .menu_hamburger {
  display: none;
  cursor: pointer;
}
.header .menu_hamburger .icon {
  transition: color 0.25s ease, filter 0.25s ease;
}
.header .menu_hamburger:hover {
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}
.header {
  /* ---------- Mobile : le menu est une extension de la pilule du header ---------- */
}
@media (width <= 830px) {
  .header {
    /* Pilule : coins de 30px, qui s'aplatissent en bas quand le menu s'ouvre (le menu s'y raccorde) */
  }
  .header .wrapper {
    border-radius: 30px;
    transition: border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
  }
  .header .menu_hamburger {
    display: block;
  }
  .header {
    /* Panneau collé sous la pilule, exactement de sa largeur, qui "pousse" vers le bas (0fr -> 1fr) */
  }
  .header nav {
    position: absolute;
    top: calc(100% + 1px);
    left: -1px;
    right: -1px;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    border: 1px solid #dfa1fa;
    border-top: 0;
    border-radius: 0 0 30px 30px;
    background: linear-gradient(180deg, rgba(28, 10, 46, 0.97), rgba(10, 4, 18, 0.97));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(168, 85, 247, 0.28);
    /* fermé */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease 0.15s, visibility 0s linear 0.5s;
  }
  .header nav ul {
    flex-direction: column;
    align-items: stretch; /* chaque ligne prend toute la largeur du menu */
    gap: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  .header nav li {
    width: 100%;
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .header nav li:first-child {
    margin-top: 6px;
  }
  .header nav li:last-child {
    margin-bottom: 6px;
  }
  .header nav li {
    /* ligne de séparation sur toute la largeur */
  }
  .header nav li + li {
    border-top: 1px solid rgba(223, 161, 250, 0.22);
  }
  .header nav a {
    width: 100%;
    justify-content: center; /* centré */
    gap: 10px;
    padding: 16px 22px;
    border-radius: 0;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  }
  .header nav a:hover, .header nav a:focus-visible {
    background: rgba(168, 85, 247, 0.16);
  }
  .header {
    /* ouvert : même classe que ta logique actuelle */
  }
  .nav-is-active .header .wrapper {
    border-radius: 30px 30px 0 0;
    border-bottom-color: transparent;
  }
  .nav-is-active .header nav {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s;
  }
  .nav-is-active .header li {
    opacity: 1;
    transform: none;
  }
  .nav-is-active .header li:nth-child(1) {
    transition-delay: 0.17s;
  }
  .nav-is-active .header li:nth-child(2) {
    transition-delay: 0.22s;
  }
  .nav-is-active .header li:nth-child(3) {
    transition-delay: 0.27s;
  }
  .nav-is-active .header li:nth-child(4) {
    transition-delay: 0.32s;
  }
  .nav-is-active .header li:nth-child(5) {
    transition-delay: 0.37s;
  }
  .nav-is-active .header li:nth-child(6) {
    transition-delay: 0.42s;
  }
  .nav-is-active .header li:nth-child(7) {
    transition-delay: 0.47s;
  }
  .nav-is-active .header li:nth-child(8) {
    transition-delay: 0.52s;
  }
  .nav-is-active .header li:nth-child(9) {
    transition-delay: 0.57s;
  }
  .nav-is-active .header li:nth-child(10) {
    transition-delay: 0.62s;
  }
  .nav-is-active .header .menu_hamburger .icon {
    color: var(--color-primary);
    filter: drop-shadow(0 0 8px #bb62ff);
  }
}

.hero {
  position: relative;
  background-color: black;
}
.hero .hero_card {
  z-index: 2;
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: min(1024px, 100% - var(--spacing-md));
  translate: -50% 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
}
@media (width <= 830px) {
  .hero .hero_card {
    grid-template-columns: 1fr;
    gap: 0px;
    left: 50%;
    top: 40%;
    text-align: center;
    translate: -50% 0;
  }
}
.hero .hero_media {
  align-self: flex-end;
  justify-self: end;
}
@media (width <= 830px) {
  .hero .hero_media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
}
@media (width <= 830px) {
  .hero h2 {
    display: flex;
    align-items: center;
    width: 300px;
    justify-content: center;
  }
}
@media (width <= 830px) {
  .hero h3 {
    display: flex;
    align-items: center;
    width: 300px;
    justify-content: center;
  }
}
.hero .hero_content {
  color: white;
  font-size: 50px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.hero .hero_content span {
  display: flex;
  align-items: flex-start;
}
@media (width <= 830px) {
  .hero .hero_content span {
    align-items: center;
  }
}
@media (width > 830px) {
  .hero .canvas {
    scale: 0.92;
  }
}
.hero .title {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
@media (width <= 830px) {
  .hero .title {
    grid-template-columns: 1fr;
    top: 10%;
    transform: translate(-50%, 0%);
  }
}

a:hover {
  color: var(--color-white);
}

@media (width <= 830px) {
  .hero {
    --ball: min(
        124vw,
        600px
    );
    --text-h: 220px;
    --gap: 30px;
    --group: calc(var(--ball) * 0.7 + var(--gap) + var(--text-h));
    --hero-h: min(100svh, calc(var(--group) + 210px));
    --group-top: max(84px, calc((var(--hero-h) - var(--group)) / 2));
    --ball-top: calc(var(--group-top) - var(--ball) * 0.15);
    position: relative;
    overflow: hidden;
    min-height: max(var(--hero-h), var(--group-top) + var(--group) + 60px);
  }
  .hero .canvas {
    position: absolute !important;
    top: var(--ball-top);
    left: calc(50% - var(--ball) / 2);
    width: var(--ball);
    height: var(--ball) !important;
  }
  .hero .title {
    position: absolute;
    top: calc(var(--ball-top) + var(--ball) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--ball) * 0.235);
    white-space: nowrap;
    z-index: 1;
  }
  .hero .hero_card {
    position: absolute;
    top: calc(var(--group-top) + var(--ball) * 0.7 + var(--gap));
    bottom: auto;
    left: 50%;
    translate: -50% 0;
    width: min(92vw, 420px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    text-align: center;
  }
  .hero .hero_content {
    align-items: center;
    width: 100%;
  }
  .hero .hero_content h2,
  .hero .hero_content h3 {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero .hero_media {
    align-self: auto;
    display: flex;
    justify-content: center;
  }
}
.about h3 {
  filter: none;
}
.about h4 {
  filter: none;
}
.about span {
  font-weight: bold;
}
.about {
  background-color: black;
  padding: 100px 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.about .wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (width <= 830px) {
  .about .wrapper {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .about .wrapper ul {
    justify-content: center;
    flex-wrap: wrap;
  }
  .about .wrapper .about_media {
    order: -1;
  }
  .about .wrapper .about_content {
    align-items: center;
  }
  .about .wrapper h3 {
    filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
  }
  .about .wrapper h4 {
    filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
  }
}
.about .canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
}
.about h2 {
  border-bottom: 1px solid var(--color-primary);
}
.about .about_content {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.about .skills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.about ul {
  display: flex;
  list-style-type: none;
  padding: 0;
}
.about .softskills {
  gap: 10px;
}
.about .softskills li p {
  background: rgba(113, 74, 135, 0.8);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 7px 15px;
  margin: 0px;
}
.about .logiciel {
  gap: 20px;
}
.about .icon {
  color: var(--color-primary);
}
.about button {
  justify-self: flex-start;
}
.about .about_media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.about .about_media img {
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}

.about_media {
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about_media .tilted-card-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
}
.about_media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  will-change: transform;
  transform: translateZ(0);
}

.about .skills.is-ready li {
  opacity: 0;
  translate: 0 22px;
  scale: 0.85;
}

.about .skills.is-ready.is-in li {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}

.about .skills.is-visible .logiciel li > svg {
  animation: skills-float 4.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.9s);
}

@keyframes skills-float {
  from {
    translate: 0 -1px;
  }
  to {
    translate: 0 2px;
  }
}
.about .skills .logiciel li {
  position: relative;
}
.about .skills .logiciel li > svg {
  transition: scale 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.about .skills .logiciel li::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  translate: -50% 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(187, 98, 255, 0.55);
  background: rgba(20, 8, 32, 0.94);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  transition: opacity 0.2s ease, translate 0.2s ease;
}
.about .skills .logiciel li.is-hot > svg, .about .skills .logiciel li.is-tip > svg {
  scale: 1.14;
  color: #e9d5ff;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.95));
}
.about .skills .logiciel li.is-hot::after, .about .skills .logiciel li.is-tip::after {
  opacity: 1;
  translate: -50% 0;
}

.about .skills .softskills li p {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.about .skills .softskills li.is-hot p {
  background: rgba(150, 95, 190, 0.95);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .about .skills.is-ready li {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
  .about .skills .logiciel li > svg {
    animation: none;
  }
}
@media (width <= 830px) {
  .about {
    padding: 110px 0 120px;
  }
  .about .wrapper {
    width: calc(100% - 48px);
    gap: 0;
  }
  .about .about_media {
    order: -1;
    width: min(68vw, 280px);
    margin: 0 auto 36px;
    position: relative;
    z-index: 0;
  }
  .about .about_media img {
    aspect-ratio: 1/1.1;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 50% 12%;
       object-position: 50% 12%;
    border-radius: 22px;
  }
  .about .about_content {
    align-items: center;
    gap: 40px;
  }
  .about .about_content > [data-component=BorderGlow] {
    width: 100%;
  }
  .about .about_content p {
    font-size: 0.98rem;
    line-height: 1.7;
  }
  .about .skills {
    width: 100%;
    align-items: center;
    gap: 16px;
    padding: 32px 22px 36px;
    border-radius: 22px;
    border: 1px solid rgba(187, 98, 255, 0.28);
    background: linear-gradient(160deg, rgba(60, 22, 96, 0.5), rgba(14, 4, 24, 0.7));
  }
  .about .skills h3 {
    font-size: 2rem;
    margin-bottom: 4px;
  }
  .about .skills h4 {
    font-family: var(--font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #cfa8ff;
    margin-top: 10px;
    filter: none;
  }
  .about .softskills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: min(100%, 300px);
  }
  .about .softskills li p {
    width: 100%;
    padding: 12px 10px;
    font-size: 0.88rem;
    line-height: 1.2;
    text-align: center;
  }
  .about .logiciel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: min(100%, 300px);
    margin-top: 4px;
  }
  .about .logiciel li {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 16px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(187, 98, 255, 0.25);
  }
}
.projects h4 span {
  font-size: clamp(1.25rem, 0.52vw + 1.09rem, 1.56rem);
}
.projects span:not([class*=specular-button]) {
  font-weight: bold;
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}
.projects {
  background-color: black;
  text-align: center;
  padding: 100px 0px;
  color: var(--color-white);
}
.projects > .bg-tunnel {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.projects .wrapper {
  position: relative;
  z-index: 1;
}
.projects .canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
}
.projects {
  /* ---------- Carrousel FlexCarousel ---------- */
}
.projects .flex-projects {
  position: relative;
  width: min(100%, 1100px);
  height: clamp(380px, 68vh, 640px);
  margin: 0 auto;
}
.projects .flex-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.projects .flex-carousel[data-hover] {
  cursor: pointer;
}
.projects .flex-carousel[data-dragging] {
  cursor: grabbing;
}
.projects .flex-carousel:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(187, 98, 255, 0.55);
}
.projects .flex-carousel__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.projects .flex-projects__slides[hidden] {
  display: none;
}
.projects .flex-projects__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(var(--card-h, 0.6) * 100%);
  aspect-ratio: var(--card-aspect, 1.3333);
  transform: translate(-50%, -50%) scale(var(--flex-carousel-lift, 1));
  border-radius: calc(var(--card-radius, 0px) / var(--flex-carousel-lift, 1));
  overflow: hidden;
  pointer-events: none;
}
.projects .card_content {
  position: absolute;
  inset: 0;
  background: rgba(22, 6, 40, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.projects .card_content p {
  margin: 0;
}
.projects .card_content span:not([class*=specular-button]) {
  filter: drop-shadow(0 0 6px rgba(187, 98, 255, 0.55));
}
.projects .card_content.is-open {
  opacity: 1;
  pointer-events: auto;
}
.projects .card_content a,
.projects .card_content button {
  cursor: pointer;
}
.projects {
  /* ---------- Flèches ---------- */
}
.projects .swiper-button-prev,
.projects .swiper-button-next {
  color: var(--color-primary);
  scale: 1.5;
  z-index: 10;
}
.projects .swiper-button-prev:hover,
.projects .swiper-button-next:hover {
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}
.projects {
  /* ---------- Pagination ---------- */
}
.projects .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.projects .swiper-pagination-bullet {
  width: 54px;
  height: 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.25s ease, scale 0.25s ease;
}
.projects .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  box-shadow: 0 2px 4px 0 #9100ff;
  scale: 1.2;
}
.projects {
  /* ---------- Texte ---------- */
}
.projects img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.projects span:not([class*=specular-button]) {
  color: white;
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
  font-weight: bold;
}
.projects h4 {
  font-weight: 600;
}
.projects button {
  scale: 0.8;
}
@media (width <= 830px) {
  .projects .flex-projects {
    height: clamp(360px, 62vh, 520px);
  }
  .projects .card_content {
    gap: 16px;
    padding: 0.75rem;
  }
  .projects .card_content p {
    font-size: 0.72rem;
    line-height: 1.35;
  }
}

.flex-projects {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: 40px 0 0 calc(50% - 50vw);
  max-width: none;
  height: clamp(420px, 75vh, 720px);
}

.flex-projects {
  height: clamp(520px, 85vh, 820px);
}

.card_content {
  position: absolute;
  inset: 0;
  background: rgba(22, 6, 40, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 1rem 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.card_content h4 {
  font-size: 0.95rem;
  line-height: 1.25;
}
.card_content p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
}
.card_content button {
  scale: 0.65;
  margin: -6px 0;
}
.card_content.is-open {
  opacity: 1;
  pointer-events: auto;
}
.card_content a,
.card_content button {
  cursor: pointer;
}

body {
  background-color: #000;
}

/* ---------- Bouton son ---------- */
.sound-toggle {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 100;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(187, 98, 255, 0.5);
  border-radius: 50%;
  background: rgba(20, 8, 32, 0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.sound-toggle:hover, .sound-toggle:focus-visible {
  border-color: #bb62ff;
  box-shadow: 0 0 16px rgba(187, 98, 255, 0.7);
}
.sound-toggle svg {
  grid-area: 1/1;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.2s ease;
}
.sound-toggle .icon-on {
  opacity: 0;
}
.sound-toggle .icon-off {
  opacity: 1;
}
.sound-toggle[aria-pressed=true] .icon-on {
  opacity: 1;
}
.sound-toggle[aria-pressed=true] .icon-off {
  opacity: 0;
}

/* ---------- Modale vidéo ---------- */
.video-modal {
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 3, 14, 0.92);
  backdrop-filter: blur(6px);
  color: #fff;
}
.video-modal[open] {
  display: grid;
  place-items: center;
  animation: modal-in 0.3s ease;
}
.video-modal::backdrop {
  background: transparent;
}

.video-modal__frame {
  width: min(92vw, 152.8888888889vh);
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 60px rgba(151, 41, 214, 0.4);
}
.video-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: max(1.5rem, env(safe-area-inset-top));
  right: max(1.5rem, env(safe-area-inset-right));
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(187, 98, 255, 0.5);
  border-radius: 50%;
  background: rgba(20, 8, 32, 0.6);
  color: #fff;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.video-modal__close:hover, .video-modal__close:focus-visible {
  border-color: #bb62ff;
  box-shadow: 0 0 16px rgba(187, 98, 255, 0.7);
}
.video-modal__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

html:has(.video-modal[open]) {
  overflow: hidden;
}

@keyframes modal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(187, 98, 255, 0.5);
  border-radius: 50%;
  background: rgba(20, 8, 32, 0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.back-to-top:hover, .back-to-top:focus-visible {
  border-color: #bb62ff;
  box-shadow: 0 0 16px rgba(187, 98, 255, 0.7);
}
.back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer {
  --footer-muted: #9a9a9a;
  --footer-line: rgba(255, 255, 255, 0.12);
  padding: 100px 0 40px;
  background-color: var(--color-black);
  color: white;
}
.footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer a:hover, .footer a:focus-visible {
  color: var(--color-primary);
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer .footer_cta {
  padding-bottom: 60px;
  border-bottom: 1px solid var(--footer-line);
}
.footer .footer_eyebrow {
  margin: 0 0 12px;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.footer .footer_title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
}
.footer .footer_email {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
}
.footer .footer_grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding: 50px 0;
}
@media (width <= 830px) {
  .footer .footer_grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.footer .footer_heading {
  margin: 0 0 16px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--footer-muted);
}
.footer .footer_text {
  margin: 0;
  max-width: 38ch;
  line-height: 1.6;
  color: var(--footer-muted);
}
.footer .footer_links {
  display: grid;
  gap: 10px;
}
.footer .footer_social {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.footer .footer_social a {
  display: inline-flex;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.footer .footer_social a:hover, .footer .footer_social a:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 8px var(--color-primary));
}
.footer .icon {
  color: var(--color-primary);
}
.footer .footer_cv {
  font-size: 0.9rem;
  color: var(--footer-muted);
}
.footer .footer_ai {
  padding: 20px 0;
  border-top: 1px solid var(--footer-line);
  color: var(--footer-muted);
  font-size: 0.85rem;
}
.footer .footer_ai summary {
  color: var(--color-primary);
  font-size: var(--font-size-h4);
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
}
.footer .footer_ai summary .icon {
  transform: translateY(-2px);
}
.footer .footer_ai summary:hover {
  color: var(--color-white);
  filter: drop-shadow(0 0 12px #bb62ff) drop-shadow(0 0 60px #bb62ff);
}
.footer .footer_ai summary:hover .icon {
  color: var(--color-white);
}
.footer .footer_ai p {
  margin: 12px 0 0;
  max-width: 70ch;
  line-height: 1.6;
}
.footer .footer_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--footer-line);
  font-size: 0.85rem;
  color: var(--footer-muted);
}
@media (width <= 830px) {
  .footer .footer_bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}
.footer .copyright {
  margin: 0;
}
@media (width <= 830px) {
  .footer {
    text-align: left;
    padding-bottom: 104px;
  }
  .footer .footer_links {
    justify-items: start;
  }
  .footer .footer_social {
    justify-content: flex-start;
  }
}

.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;
  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--card-bg, #120f17);
  overflow: visible;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 2px 4px, rgba(0, 0, 0, 0.1) 0px 4px 8px, rgba(0, 0, 0, 0.1) 0px 8px 16px, rgba(0, 0, 0, 0.1) 0px 16px 32px, rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card--light {
  border-color: rgba(24, 24, 27, 0.12);
  box-shadow: rgba(24, 24, 27, 0.04) 0 1px 2px, rgba(24, 24, 27, 0.05) 0 8px 24px;
}

.border-glow-card--light::after,
.border-glow-card--light > .edge-light {
  mix-blend-mode: normal;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background: linear-gradient(var(--card-bg, #120f17) 0 100%) padding-box, linear-gradient(rgba(255, 255, 255, 0) 0% 100%) border-box, var(--gradient-one, radial-gradient(at 80% 55%, hsl(268, 100%, 76%) 0px, transparent 50%)) border-box, var(--gradient-two, radial-gradient(at 69% 34%, hsl(349, 100%, 74%) 0px, transparent 50%)) border-box, var(--gradient-three, radial-gradient(at 8% 6%, hsl(136, 100%, 78%) 0px, transparent 50%)) border-box, var(--gradient-four, radial-gradient(at 41% 38%, hsl(192, 100%, 64%) 0px, transparent 50%)) border-box, var(--gradient-five, radial-gradient(at 86% 85%, hsl(186, 100%, 74%) 0px, transparent 50%)) border-box, var(--gradient-six, radial-gradient(at 82% 18%, hsl(52, 100%, 65%) 0px, transparent 50%)) border-box, var(--gradient-seven, radial-gradient(at 51% 4%, hsl(12, 100%, 72%) 0px, transparent 50%)) border-box, var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
          mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background: var(--gradient-one, radial-gradient(at 80% 55%, hsl(268, 100%, 76%) 0px, transparent 50%)) padding-box, var(--gradient-two, radial-gradient(at 69% 34%, hsl(349, 100%, 74%) 0px, transparent 50%)) padding-box, var(--gradient-three, radial-gradient(at 8% 6%, hsl(136, 100%, 78%) 0px, transparent 50%)) padding-box, var(--gradient-four, radial-gradient(at 41% 38%, hsl(192, 100%, 64%) 0px, transparent 50%)) padding-box, var(--gradient-five, radial-gradient(at 86% 85%, hsl(186, 100%, 74%) 0px, transparent 50%)) padding-box, var(--gradient-six, radial-gradient(at 82% 18%, hsl(52, 100%, 65%) 0px, transparent 50%)) padding-box, var(--gradient-seven, radial-gradient(at 51% 4%, hsl(12, 100%, 72%) 0px, transparent 50%)) padding-box, var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;
  -webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
          mask-image: linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
          mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
          mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--glow-color, hsl(40, 80%, 80%)), inset 0 0 1px 0 var(--glow-color-60, hsla(40, 80%, 80%, 0.6)), inset 0 0 3px 0 var(--glow-color-50, hsla(40, 80%, 80%, 0.5)), inset 0 0 6px 0 var(--glow-color-40, hsla(40, 80%, 80%, 0.4)), inset 0 0 15px 0 var(--glow-color-30, hsla(40, 80%, 80%, 0.3)), inset 0 0 25px 2px var(--glow-color-20, hsla(40, 80%, 80%, 0.2)), inset 0 0 50px 2px var(--glow-color-10, hsla(40, 80%, 80%, 0.1)), 0 0 1px 0 var(--glow-color-60, hsla(40, 80%, 80%, 0.6)), 0 0 3px 0 var(--glow-color-50, hsla(40, 80%, 80%, 0.5)), 0 0 6px 0 var(--glow-color-40, hsla(40, 80%, 80%, 0.4)), 0 0 15px 0 var(--glow-color-30, hsla(40, 80%, 80%, 0.3)), 0 0 25px 2px var(--glow-color-20, hsla(40, 80%, 80%, 0.2)), 0 0 50px 2px var(--glow-color-10, hsla(40, 80%, 80%, 0.1));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}

.tilted-card-figure {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tilted-card-mobile-alert {
  position: absolute;
  top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  display: none;
}

@media (max-width: 640px) {
  .tilted-card-mobile-alert {
    display: block;
  }
  .tilted-card-caption {
    display: none;
  }
}
.tilted-card-inner {
  position: relative;
  transform-style: preserve-3d;
}

.tilted-card-img {
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
  will-change: transform;
  transform: translateZ(0);
}

.tilted-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  will-change: transform;
  transform: translateZ(30px);
}

.tilted-card-caption {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 8px;
  background: var(--card-bg, #120f17);
  border: 1px solid var(--color-primary);
  padding: 10px 22px;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0;
  z-index: 3;
}

/* SpecularButton — fonctionne sur <button> et <a> */
.specular-button {
  --sb-radius: 18px;
  --sb-tint: #ffffff;
  --sb-tint-opacity: 0;
  --sb-blur: 0px;
  --sb-text-color: #f5f5f5;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  margin: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--sb-text-color);
  /* Fond du portfolio, avec la teinte optionnelle (data-tint / data-tint-opacity) par-dessus */
  background: linear-gradient(color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent), color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent)), var(--card-bg, #120f17);
  border-radius: var(--sb-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease;
}

.specular-button:active {
  transform: scale(0.97);
}

.specular-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sb-text-color) 60%, transparent);
  outline-offset: 3px;
}

.specular-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.specular-button:disabled:active {
  transform: none;
}

.specular-button--sm {
  font-size: 0.85rem;
  padding: 10px 22px;
}

.specular-button--md {
  font-size: 1rem;
  padding: 14px 30px;
}

.specular-button--lg {
  font-size: 1.15rem;
  padding: 18px 40px;
}

/* Canvas extends past the button so the rim glow can bleed outside the edge */
.specular-button__fx {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 1;
}

.specular-button__fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.specular-button__label {
  position: relative;
  z-index: 2;
}

.depth-text {
  display: inline-block;
  perspective: var(--depth-text-perspective);
  perspective-origin: 50% 48%;
  isolation: isolate;
}

.depth-text__stage {
  position: relative;
  display: inline-grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-2.4deg) rotateY(3.15deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.depth-text__layer,
.depth-text__face {
  grid-area: 1/1;
  display: inline-block;
  font-size: var(--depth-text-font-size);
  font-weight: var(--depth-text-font-weight);
  line-height: 0.86;
  letter-spacing: -0.065em;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

.depth-text__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.depth-text__face {
  position: relative;
  z-index: 1;
  color: var(--depth-text-face-color);
  text-shadow: var(--depth-text-shadow);
  transform: translateZ(0.6px);
}

@media (hover: hover) and (pointer: fine) {
  .depth-text {
    cursor: default;
  }
}
@media (prefers-reduced-motion: reduce) {
  .depth-text__stage {
    will-change: auto;
  }
}
.depth-text__layer,
.depth-text__face {
  /* ... tes règles existantes ... */
  padding: 0.08em 0.14em;
}

:root {
  --cursor-default:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='2.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Cpolygon points='10,10 34,22 22,25 16.7,36.7' fill='none' stroke='%23A855F7' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/g%3E%3Cpolygon points='10,10 34,22 22,25 16.7,36.7' fill='none' stroke='%23f3e0ff' stroke-width='0.7' stroke-linejoin='round'/%3E%3C/svg%3E")
          10 10,
      auto;
  --cursor-pointer:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='3.0' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M22 7 Q25 7 25 10 V19 Q25 18 27.5 18 Q30.5 18 30.5 20.5 Q30.5 20 33 20 Q36 20 36 22.5 Q38.5 22 40 24 Q41 25 41 27 V32 Q41 36 38 39.5 V42 H25 V39.5 Q22 37 19 33 L13.5 26.5 Q12.5 24.5 14.5 23.8 Q16.5 23.5 19 26.5 V10 Q19 7 22 7 Z' fill='%23A855F7' fill-opacity='0.18' stroke='%23A855F7' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M30.5 20.5 V26 M36 22.5 V27 M25 19 V23' fill='none' stroke='%23A855F7' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cpath d='M22 7 Q25 7 25 10 V19 Q25 18 27.5 18 Q30.5 18 30.5 20.5 Q30.5 20 33 20 Q36 20 36 22.5 Q38.5 22 40 24 Q41 25 41 27 V32 Q41 36 38 39.5 V42 H25 V39.5 Q22 37 19 33 L13.5 26.5 Q12.5 24.5 14.5 23.8 Q16.5 23.5 19 26.5 V10 Q19 7 22 7 Z' fill='none' stroke='%23f3e0ff' stroke-width='0.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M30.5 20.5 V26 M36 22.5 V27 M25 19 V23' fill='none' stroke='%23f3e0ff' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E")
          22 7,
      pointer;
  --cursor-text:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='2.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M20 12h8M24 12v24M20 36h8' fill='none' stroke='%23A855F7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cpath d='M20 12h8M24 12v24M20 36h8' fill='none' stroke='%23f3e0ff' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
          24 24,
      text;
  --cursor-grab:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='2.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M13 30 V19.5 Q13 17 15.25 17 Q17.5 17 17.5 19.5 V14.5 Q17.5 12 19.75 12 Q22 12 22 14.5 V12.5 Q22 10 24.25 10 Q26.5 10 26.5 12.5 V14.5 Q26.5 12 28.75 12 Q31 12 31 14.5 V25 L33 23 Q35 21.5 36.7 23 Q37.7 24.5 36.7 26.5 L32.5 35 Q29.5 40.5 24 40.5 H20 Q14.5 40 13 32 Z' fill='%23A855F7' fill-opacity='0.1' stroke='%23A855F7' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='' fill='none' stroke='%23A855F7' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cpath d='M13 30 V19.5 Q13 17 15.25 17 Q17.5 17 17.5 19.5 V14.5 Q17.5 12 19.75 12 Q22 12 22 14.5 V12.5 Q22 10 24.25 10 Q26.5 10 26.5 12.5 V14.5 Q26.5 12 28.75 12 Q31 12 31 14.5 V25 L33 23 Q35 21.5 36.7 23 Q37.7 24.5 36.7 26.5 L32.5 35 Q29.5 40.5 24 40.5 H20 Q14.5 40 13 32 Z' fill='none' stroke='%23f3e0ff' stroke-width='0.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='' fill='none' stroke='%23f3e0ff' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E")
          24 24,
      grab;
  --cursor-grabbing:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='3.0' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M12.5 30 V26.5 Q12.5 22.5 16 22.5 Q16.5 19 20 19 Q22 16.8 24.5 19 Q27.8 17.5 29.8 20.3 Q33.5 19.8 34 23.5 Q36.5 24.5 36.5 27.5 V31 Q36.5 38 30.5 40.5 H21 Q13.5 39 12.5 30 Z' fill='%23A855F7' fill-opacity='0.25' stroke='%23A855F7' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M19 23 V27.5 M24.3 21.5 V27.5 M29.5 22.5 V27.5' fill='none' stroke='%23A855F7' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cpath d='M12.5 30 V26.5 Q12.5 22.5 16 22.5 Q16.5 19 20 19 Q22 16.8 24.5 19 Q27.8 17.5 29.8 20.3 Q33.5 19.8 34 23.5 Q36.5 24.5 36.5 27.5 V31 Q36.5 38 30.5 40.5 H21 Q13.5 39 12.5 30 Z' fill='none' stroke='%23f3e0ff' stroke-width='0.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M19 23 V27.5 M24.3 21.5 V27.5 M29.5 22.5 V27.5' fill='none' stroke='%23f3e0ff' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E")
          24 26,
      grab;
  --cursor-not-allowed:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='2.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Ccircle cx='24' cy='24' r='10' fill='none' stroke='%23A855F7' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='10' fill='none' stroke='%23f3e0ff' stroke-width='0.7'/%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M17 31L31 17' fill='none' stroke='%23A855F7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cpath d='M17 31L31 17' fill='none' stroke='%23f3e0ff' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
          24 24,
      not-allowed;
  --cursor-wait:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='2.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M24 13a11 11 0 1 1-11 11' fill='none' stroke='%23A855F7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cpath d='M24 13a11 11 0 1 1-11 11' fill='none' stroke='%23f3e0ff' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
          24 24,
      wait;
}

html,
html * {
  cursor: var(--cursor-default) !important;
}

html a,
html a *,
html button,
html button *,
html label,
html summary,
html select,
html [role=button],
html [role=button] *,
html [data-cursor=pointer],
html input[type=submit],
html input[type=button],
html input[type=checkbox],
html input[type=radio],
html .js-toggle,
html .menu_hamburger,
html .menu_hamburger * {
  cursor: var(--cursor-pointer) !important;
}

html input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html textarea,
html [contenteditable=true] {
  cursor: var(--cursor-text) !important;
}

html .swiper,
html .swiper *,
html [draggable=true],
html [data-cursor=grab] {
  cursor: var(--cursor-grab) !important;
}

html .swiper:active,
html .swiper:active *,
html .swiper-grabbing,
html .swiper-grabbing *,
html [draggable=true]:active,
html .is-grabbing,
html .is-grabbing * {
  cursor: var(--cursor-grabbing) !important;
}

html .flex-carousel[data-hover],
html .flex-carousel[data-hover] * {
  cursor: var(--cursor-pointer) !important;
}

html :disabled,
html [aria-disabled=true] {
  cursor: var(--cursor-not-allowed) !important;
}

html.is-loading,
html.is-loading * {
  cursor: var(--cursor-wait) !important;
}

.true-focus {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.true-focus--lines {
  flex-direction: column;
  align-items: var(--tf-align, flex-start);
  row-gap: calc(var(--tf-gap, 8px) * 1.6);
}

.true-focus--words {
  flex-flow: row wrap;
  justify-content: var(--tf-align, flex-start);
  align-items: center;
  -moz-column-gap: 0.4em;
       column-gap: 0.4em;
  row-gap: calc(var(--tf-gap, 8px) * 1.6);
}

.true-focus--manual .true-focus__word {
  cursor: pointer;
}

.true-focus__word {
  position: relative;
  display: block;
  will-change: filter, transform;
}

.true-focus__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.true-focus__frame {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  --tf-duration: 0.5s;
  --tf-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.true-focus__frame > * {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--tf-duration) var(--tf-ease), width var(--tf-duration) var(--tf-ease), height var(--tf-duration) var(--tf-ease), opacity 0.4s ease;
  filter: drop-shadow(0 0 6px var(--tf-glow, transparent));
}

.true-focus.is-ready .true-focus__frame > * {
  opacity: 1;
}

.true-focus__frame.no-anim > * {
  transition: none !important;
}

.true-focus__corner {
  width: var(--tf-corner, 14px);
  height: var(--tf-corner, 14px);
  border: var(--tf-border, 3px) solid var(--tf-color, currentColor);
  border-radius: 3px;
}

.true-focus__corner--tl {
  border-right: none;
  border-bottom: none;
}

.true-focus__corner--tr {
  border-left: none;
  border-bottom: none;
}

.true-focus__corner--bl {
  border-right: none;
  border-top: none;
}

.true-focus__corner--br {
  border-left: none;
  border-top: none;
}

.true-focus__box {
  border: var(--tf-border, 3px) solid var(--tf-color, currentColor);
  border-radius: 6px;
}

.true-focus__underline {
  border-radius: calc(var(--tf-border, 3px) / 2);
  background: var(--tf-color, currentColor);
}

.true-focus__highlight {
  border-radius: 6px;
  background: var(--tf-highlight, rgba(168, 85, 247, 0.3));
  filter: none;
}

html.no-preloader .preloader {
  display: none;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.preloader__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.preloader__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
  animation: preloader-breathe 3.2s ease-in-out infinite;
}

.preloader__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: min(86vw, 360px);
}

.preloader__logo {
  display: block;
  width: clamp(72px, 14vw, 120px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.65));
  animation: preloader-logo-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, preloader-pulse 2.6s ease-in-out 0.9s infinite;
}

.preloader__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

.preloader__status {
  min-width: 0;
}
.preloader__status::after {
  content: "";
  animation: preloader-dots 1.4s steps(1, end) infinite;
}

.preloader__percent {
  color: #d8b4fe;
}

.preloader__bar {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: -14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.preloader__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #7c3aed, #a855f7, #e9d5ff);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.9);
}

html.is-loading .preloader:not(.is-active) .preloader__fill {
  animation: preloader-wait 6s cubic-bezier(0.1, 0.6, 0.2, 1) forwards;
}

@keyframes preloader-wait {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(0.85);
  }
}
@keyframes preloader-logo-in {
  from {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(10px) drop-shadow(0 0 0 rgba(168, 85, 247, 0));
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 0 18px rgba(168, 85, 247, 0.65));
  }
}
@keyframes preloader-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.95));
  }
}
@keyframes preloader-breathe {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes preloader-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader__logo,
  .preloader__glow,
  .preloader__status::after {
    animation: none;
  }
}
/* Dissolve : un trou circulaire flou qui s'agrandit depuis le centre */
.preloader {
  --reveal: -25;
}

.preloader.is-dissolving {
  -webkit-mask-image: radial-gradient(circle farthest-corner at 50% 50%, transparent calc(var(--reveal) * 1%), #000 calc(var(--reveal) * 1% + 25%));
  mask-image: radial-gradient(circle farthest-corner at 50% 50%, transparent calc(var(--reveal) * 1%), #000 calc(var(--reveal) * 1% + 25%));
}

.erreur .hero_media button,
.erreur .hero_media a {
  white-space: nowrap;
}
@media (width <= 830px) {
  .erreur .hero_content h2 {
    display: block;
    font-size: clamp(30px, 9.5vw, 42px);
  }
}

/* ==========================================================================
   scrolly / component
   ========================================================================== */
.has-js [data-scrolly=fromBottom] {
  opacity: 0;
  transform: translateY(140px);
  filter: blur(0px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-js [data-scrolly=fromBottom].is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=flipFromBottom] {
  opacity: 0;
  transform: translateY(100px) scale(0.98);
  filter: blur(10px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-js [data-scrolly=flipFromBottom].is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=fromLeft] {
  opacity: 0;
  transform: translateX(-160px);
  filter: blur(8px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-js [data-scrolly=fromLeft].is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=fromRight] {
  opacity: 0;
  transform: translateX(160px);
  filter: blur(8px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-js [data-scrolly=fromRight].is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=fromTop] {
  opacity: 0;
  transform: translateY(-140px);
  filter: blur(0px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-js [data-scrolly=fromTop].is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=zoomOut] {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(6px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-js [data-scrolly=zoomOut].is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=zoomOut] {
  transition-duration: 2s;
}
.has-js [data-scrolly=reveal] {
  clip-path: inset(0 0 100% 0);
  transform: translateY(30%);
  transition: clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.has-js [data-scrolly=reveal].is-active {
  clip-path: inset(0 0 -10% 0);
  transform: none;
}
.has-js [data-scrolly=highlight] {
  opacity: 0.15;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.has-js [data-scrolly=highlight].is-active {
  opacity: 1;
}
.has-js [data-scrolly=stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-js [data-scrolly=stagger] > *.is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=stagger].is-active > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-js [data-scrolly=stagger] > *:nth-child(1) {
  transition-delay: 0s;
}
.has-js [data-scrolly=stagger] > *:nth-child(2) {
  transition-delay: 0.16s;
}
.has-js [data-scrolly=stagger] > *:nth-child(3) {
  transition-delay: 0.32s;
}
.has-js [data-scrolly=stagger] > *:nth-child(4) {
  transition-delay: 0.48s;
}
.has-js [data-scrolly=stagger] > *:nth-child(5) {
  transition-delay: 0.64s;
}
.has-js [data-scrolly=stagger] > *:nth-child(6) {
  transition-delay: 0.8s;
}
.has-js [data-scrolly=stagger] > *:nth-child(7) {
  transition-delay: 0.96s;
}
.has-js [data-scrolly=stagger] > *:nth-child(8) {
  transition-delay: 1.12s;
}
.has-js [data-scrolly=stagger] > *:nth-child(9) {
  transition-delay: 1.28s;
}
.has-js [data-scrolly=stagger] > *:nth-child(10) {
  transition-delay: 1.44s;
}

@media (prefers-reduced-motion: reduce) {
  .has-js [data-scrolly],
  .has-js [data-scrolly=stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}
/*# sourceMappingURL=main.css.map */