/* ===== css--base (code personnalisé) ===== */
  /* ================================================================== */
  /* TOKENS                                                             */
  /* ================================================================== */
  :root {
    --smooth-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --elastic-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
    --opacity-ease: cubic-bezier(0.4, 0, 0.2, 1);

    --duration-xs: 0.3s;
    --duration-s: 0.45s;
    --duration-m: 0.6s;
    --duration-l: 0.8s;
    --duration-xl: 1.2s;

    --animation-xs: var(--duration-xs) var(--smooth-ease);
    --animation: var(--duration-s) var(--smooth-ease);
    --animation-m: var(--duration-m) var(--smooth-ease);
    --animation-l: var(--duration-l) var(--smooth-ease);

    --gr-green: linear-gradient(135deg, #11F2A0 0%, #00FB8A 100%);

    --sh-base: 0 0 0 1px rgba(6, 86, 134, 0.04), 0 1px 1px -0.5px rgba(1, 34, 54, 0.04), 0 3px 3px -1.5px rgba(1, 34, 54, 0.06), 0 6px 8px -3px rgba(1, 34, 54, 0.01), 0 6px 12px -6px rgba(6, 86, 134, 0.02), 0 24px 24px -12px rgba(6, 86, 134, 0.04), 0 0 0 2px #FFF inset;
    --sh-small: 0 8px 16px 0 rgba(1, 34, 54, 0.01), 0 4px 10px 0 rgba(1, 34, 54, 0.01), 0 2px 5px 0 rgba(1, 34, 54, 0.02), 0 0 1.1px 0 rgba(6, 12, 134, 0.20);
    --sh-xsmall: 0 0 10px 0 rgba(1, 34, 54, 0.02), 0 2px 5px 0 rgba(1, 34, 54, 0.02), 0 0 1.1px 0 rgba(6, 12, 134, 0.20);
    --sh-img: -75px 116px 39px 0 rgba(0, 0, 0, 0.00), -48px 74px 35px 0 rgba(0, 0, 0, 0.00), -27px 42px 30px 0 rgba(0, 0, 0, 0.01), -12px 18px 22px 0 rgba(0, 0, 0, 0.02), -3px 5px 12px 0 rgba(0, 0, 0, 0.02);
    --sh-btn: 0 0 0 2px rgba(255, 255, 255, 0.40) inset;
    --sh-green: 0 0 0 3px rgba(26, 230, 141, 0.12);
    --sh-dark: 0 1px 2px 0 rgba(255, 255, 255, 0.12) inset, 0 16px 8px 0 rgba(31, 31, 31, 0.01), 0 12px 6px 0 rgba(31, 31, 31, 0.02), 0 4px 4px 0 rgba(31, 31, 31, 0.05), 0 1.5px 3px 0 rgba(31, 31, 31, 0.06), 0 0 0 1px #0F0F0F;
  }

  /* ================================================================== */
  /* RESET                                                              */
  /* ================================================================== */
  /* ----- Box Sizing ----- */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  *,
  *:after,
  *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  /* ----- Document ----- */
  html {
    scroll-behavior: none;
    background-color: var(--_theme---background);
    min-height: 100vh;
  }

  html,
  body {
    -webkit-font-smoothing: antialiased;
    width: 100%;
    height: auto !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  body {
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ----- Media ----- */
  svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
    vertical-align: middle;
  }

  /* ================================================================== */
  /* LENIS                                                              */
  /* ================================================================== */
  html.lenis {
    height: auto;
  }

  .lenis.lenis-smooth {
    scroll-behavior: auto;
  }

  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }

  .lenis.lenis-stopped {
    overflow: hidden;
  }

  .lenis.lenis-scrolling iframe {
    pointer-events: none;
  }

  /* ================================================================== */
  /* SELECTION                                                          */
  /* ================================================================== */
  ::selection {
    background-color: var(--brand--green);
    color: var(--neutral--dark);
    text-shadow: none;
  }

  ::-moz-selection {
    background-color: var(--brand--green);
    color: var(--neutral--dark);
    text-shadow: none;
  }

  /* ================================================================== */
  /* SCROLLBAR                                                          */
  /* ================================================================== */
  body ::-webkit-scrollbar {
    display: none;
  }

  body {
    -ms-overflow-style: none;
  }

  html {
    scrollbar-width: none;
  }

  /* ================================================================== */
  /* WEBFLOW BASE                                                       */
  /* ================================================================== */
  /* ----- Focus Visible ----- */
  *[tabindex]:focus-visible,
  input[type='file']:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
  }

  /* ----- Webflow Fixes ----- */
  .w-tabs::before,
  .w-tabs::after {
    display: none;
  }

  .w-dropdown {
    z-index: 1;
  }

  /* ----- Links and Buttons ----- */
  a,
  button {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  /* ================================================================== */
  /* SCALING FONT SYSTEM                                                */
  /* ================================================================== */
  /* ----- Desktop ----- */
  :root {
    --size-unit: 16;
    --size-container-ideal: 1440;
    --size-container-min: 1080px;
    --size-container-max: 1440px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
    --max-width: 75em;
  }

  /* ----- Tablet ----- */
  @media screen and (max-width: 991px) {
    :root {
      --size-container-ideal: 834;
      --size-container-min: 768px;
      --size-container-max: 991px;
    }
  }

  /* ----- Mobile Landscape ----- */
  @media screen and (max-width: 767px) {
    :root {
      --size-container-ideal: 550;
      --size-container-min: 480px;
      --size-container-max: 767px;
    }
  }

  /* ----- Mobile Portrait ----- */
  @media screen and (max-width: 479px) {
    :root {
      --size-container-ideal: 390;
      --size-container-min: 320px;
      --size-container-max: 479px;
    }
  }

  /* ----- Apply to Body ----- */
  html,
  body {
    font-size: var(--size-font);
  }

  /* ================================================================== */
  /* TYPOGRAPHY                                                         */
  /* ================================================================== */
  /* ----- Headings ----- */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
  }

  h1,
  .h1 {
    font-size: var(--_responsive---font-size--h1);
    letter-spacing: var(--_typography---h1--letter-spacing);
    font-family: var(--_typography---h1--font);
    line-height: var(--_typography---h1--line-height);
    font-weight: var(--_typography---h1--font-weight);
  }

  h2,
  .h2 {
    font-size: var(--_responsive---font-size--h2);
    letter-spacing: var(--_typography---h2--letter-spacing);
    font-family: var(--_typography---h2--font);
    line-height: var(--_typography---h2--line-height);
    font-weight: var(--_typography---h2--font-weight);
  }

  h3,
  .h3 {
    font-size: var(--_responsive---font-size--h3);
    letter-spacing: var(--_typography---h3--letter-spacing);
    font-family: var(--_typography---h3--font);
    line-height: var(--_typography---h3--line-height);
    font-weight: var(--_typography---h3--font-weight);
  }

  h4,
  .h4 {
    font-size: var(--_responsive---font-size--h4);
    letter-spacing: var(--_typography---h4--letter-spacing);
    font-family: var(--_typography---h4--font);
    line-height: var(--_typography---h4--line-height);
    font-weight: var(--_typography---h4--font-weight);
  }

  h5,
  .h5 {
    font-size: var(--_responsive---font-size--h5);
    letter-spacing: var(--_typography---h5--letter-spacing);
    font-family: var(--_typography---h5--font);
    line-height: var(--_typography---h5--line-height);
    font-weight: var(--_typography---h5--font-weight);
  }

  h6,
  .h6 {
    font-size: var(--_responsive---font-size--h6);
    letter-spacing: var(--_typography---h6--letter-spacing);
    font-family: var(--_typography---h6--font);
    line-height: var(--_typography---h6--line-height);
    font-weight: var(--_typography---h6--font-weight);
  }

  /* ----- Font Family ----- */
  .font-primary {
    font-family: var(--_typography---font--primary);
  }

  .font-secondary {
    font-family: var(--_typography---font--secondary);
  }

  /* ----- Responsive Text Helpers ----- */
  @media (max-width: 767px) {
    .text-xxl.sm-xl {
      font-size: var(--_responsive---font-size--text-xl) !important;
    }

    .text-xxl.sm-l,
    .text-xl.sm-l {
      font-size: var(--_responsive---font-size--text-l) !important;
    }

    .text-xxl.sm-m,
    .text-xl.sm-m,
    .text-l.sm-m {
      font-size: var(--_responsive---font-size--text-m) !important;
    }

    .text-xxl.sm-s,
    .text-xl.sm-s,
    .text-l.sm-s,
    .text-m.sm-s {
      font-size: var(--_responsive---font-size--text-s) !important;
    }

    .text-xxl.sm-xs,
    .text-xl.sm-xs,
    .text-l.sm-xs,
    .text-m.sm-xs,
    .text-s.sm-xs {
      font-size: var(--_responsive---font-size--text-xs) !important;
    }

    .text-xxl.sm-mini,
    .text-xl.sm-mini,
    .text-l.sm-mini,
    .text-m.sm-mini,
    .text-s.sm-mini,
    .text-xs.sm-mini,
    .text-xxs.sm-mini {
      font-size: 0.625em !important;
    }
  }

/* ===== css--grid (code personnalisé) ===== */
  /* ----------------------- START GRID ----------------------- */
  :root {
    --site--max-width: min(var(--_layout---site--width), 100vw);
    --site--gutter-total: calc(var(--_layout---site--gutter) * (var(--_layout---site--column-count) - 1));
    --column-width--1: calc((var(--site--max-width) - var(--site--gutter-total)) / var(--_layout---site--column-count));
    --column-width--plus-gutter: calc(var(--column-width--1) + var(--_layout---site--gutter));
    --column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--_layout---site--gutter));
    --column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--_layout---site--gutter));
    --column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--_layout---site--gutter));
    --column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--_layout---site--gutter));
    --column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--_layout---site--gutter));
    --column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--_layout---site--gutter));
    --column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--_layout---site--gutter));
    --column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--_layout---site--gutter));
    --column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--_layout---site--gutter));
    --column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--_layout---site--gutter));
    --column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--_layout---site--gutter));
    --column-margin--1: calc(var(--column-width--plus-gutter) * 1);
    --column-margin--2: calc(var(--column-width--plus-gutter) * 2);
    --column-margin--3: calc(var(--column-width--plus-gutter) * 3);
    --column-margin--4: calc(var(--column-width--plus-gutter) * 4);
    --column-margin--5: calc(var(--column-width--plus-gutter) * 5);
    --column-margin--6: calc(var(--column-width--plus-gutter) * 6);
    --column-margin--7: calc(var(--column-width--plus-gutter) * 7);
    --column-margin--8: calc(var(--column-width--plus-gutter) * 8);
    --column-margin--9: calc(var(--column-width--plus-gutter) * 9);
    --column-margin--10: calc(var(--column-width--plus-gutter) * 10);
    --column-margin--11: calc(var(--column-width--plus-gutter) * 11);
    --column-margin--12: calc(var(--column-width--plus-gutter) * 12);
    --grid-main: repeat(var(--_layout---site--column-count), minmax(0, 1fr));
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-11: repeat(11, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));
  }
  /* ----------------------- END GRID ----------------------- */

  /* ----------------------- START FLEXBOX ----------------------- */
  .flex-col,
  .flex-row {
    &.align-start {
      align-items: flex-start;
    }
    &.align-center {
      align-items: center;
    }
    &.align-end {
      align-items: flex-end;
    }
    &.stretch {
      align-items: stretch;
    }
    &.justify-start {
      justify-content: flex-start;
    }
    &.justify-center {
      justify-content: center;
    }
    &.justify-end {
      justify-content: flex-end;
    }
    &.between {
      justify-content: space-between;
    }
    &.around {
      justify-content: space-around;
    }
    &.evenly {
      justify-content: space-evenly;
    }
    &.center {
      align-items: center;
      justify-content: center;
    }
  }
  /* ----------------------- END FLEXBOX ----------------------- */

/* ===== css--components (code personnalisé) ===== */
  /* ================================================================== */
  /* DROPDOWN                                                           */
  /* ================================================================== */
  [data-dropdown='item'] {
    & [data-dropdown='content'] {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows var(--animation);
    }

    & [data-dropdown='icon'] {
      transition: transform var(--animation);
    }

    &[data-state='open'] {
      [data-dropdown='content'] {
        grid-template-rows: 1fr;
      }

      [data-dropdown='icon'] {
        transform: rotateX(180deg);
      }
    }
  }

  /* ================================================================== */
  /* MODALS                                                             */
  /* ================================================================== */
  /* ----- Group ----- */
  [data-modal='group'] {
    visibility: hidden;
    transition: visibility 0s var(--duration-m);

    &:has([data-modal-target][data-modal-state='open']) {
      visibility: visible;
      transition: visibility 0s 0s;
    }
  }

  /* ----- Background ----- */
  .modal__bg {
    transition: opacity var(--animation);
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
  }

  [data-modal='group']:has([data-modal-target][data-modal-state='open']) .modal__bg {
    opacity: 1;
    pointer-events: auto;
  }

  /* ----- Modal ----- */
  .modal__body {
    overflow: hidden;
    transform: translate(0%, 0%) scale(0.9);
    opacity: 0;
    transition: transform var(--animation-m), opacity var(--animation-m);
    will-change: transform;
  }

  [data-modal-state='open'] {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
    transition: transform var(--animation-m), opacity var(--animation-m);
  }

  /* ================================================================== */
  /* BUTTONS                                                            */
  /* ================================================================== */
  /* ----- Button Animation ----- */
  .btn_wrap {
    & .btn_arrow {
      &:nth-child(1) {
        transform: translate(0%, 0%);
        opacity: 1;
      }

      &:nth-child(2) {
        transform: translate(-200%, 0%);
        opacity: 0;
      }
    }

    & .btn_bg {
      transition: inset var(--animation), transform var(--animation);
    }

    &:active {
      & .btn_bg {
        transform: scale(0.95);
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .btn_wrap {
      & .btn_arrow {
        transition: transform var(--animation), opacity var(--animation);
      }

      & .btn_play {
        transition: transform var(--animation);
      }

      & .btn_text_span {
        transition: transform var(--animation);
      }

      &:hover {
        & .btn_arrow {
          &:nth-child(1) {
            transform: translate(200%, 0%);
            opacity: 0;
          }

          &:nth-child(2) {
            transform: translate(0%, 0%);
            opacity: 1;
          }
        }

        & .btn_play {
          transform: rotate(360deg);
        }

        & .btn_bg {
          inset: 0.125em;
        }

        & .btn_text_span {
          transform: translateY(-100%);
        }
      }
    }
  }

  /* ----- Button Style ----- */
  .btn_wrap {
    --btn-text-color: var(--neutral--dark);
    --btn-bg-color: var(--gr-green);
    --btn-outline-color: var(--brand--green);
    --btn-text-size: 1em;
    --btn-shadow: var(--sh-btn);
    --btn-radius: 1.25em;
    --btn-outline-icon: color-mix(in srgb, currentColor 6%, transparent);
    --btn-size-icon: 1em;
    --btn-gap: 0.625em;

    & .btn_bg {
      background: var(--btn-bg-color);
    }

    &:has(.btn_play:not(.w-condition-invisible)) {
      --btn-outline-icon: transparent;
      --btn-gap: 0.25em;
    }

    &:has(.btn_icon:not(.w-condition-invisible)) {
      padding: 0.5em 0.5em 0.5em 1.125em;
    }

    &[data-size='small'] {
      --btn-text-size: 0.875em;
      --btn-radius: 0.875em;
      --btn-size-icon: 0.875em;
      padding: 0.375em 0.75em;

      &:has(.btn_icon:not(.w-condition-invisible)) {
        padding: 0.375em 0.375em 0.375em 0.75em;
      }
    }

    &[data-size='default'] {
      min-height: 2.875em;
    }


    &[data-wf--interactive-button--settings-variant='white'] {
      --btn-text-color: var(--neutral--dark);
      --btn-bg-color: var(--neutral--white);
      --btn-outline-color: transparent;
      --btn-shadow: var(--sh-xsmall);
    }

    &[data-wf--interactive-button--settings-variant='outline'] {
      --btn-text-color: currentColor;
      --btn-bg-color: transparent;
      --btn-outline-color: color-mix(in srgb, currentColor 5%, transparent);
      --btn-shadow: none;
    }

    &[data-wf--interactive-button--settings-variant='neutral'] {
      --btn-text-color: var(--neutral--dark);
      --btn-bg-color: var(--neutral--smoke);
      --btn-outline-color: transparent;
      --btn-shadow: none;
    }
  }

  @media screen and (max-width: 991px) {
    .nav_button_row .btn_wrap {
      &[data-size='small'] {
        min-height: 2.375em;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  /* ================================================================== */
  /* TEXT LINKS                                                         */
  /* ================================================================== */
  @media (hover: hover) and (pointer: fine) {

    .footer-link,
    [data-text-link] {
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0px;
        left: 0px;
        transform-origin: center right;
        transition: transform var(--animation);
        background: currentColor;
        transform: scale(0, 1);
      }

      &:hover {
        &::after {
          transform: scale(1, 1);
          transform-origin: center left;
        }
      }
    }
  }

  /* ================================================================== */
  /* NAVBAR                                                             */
  /* ================================================================== */
  /* ----- Navbar Height ----- */
  :root {
    --nav-height: 9.574375em;
    --nav-height-no-bar: 5.036875em;

  }

  @media screen and (max-width: 991px) {
    :root {
      --nav-height: 9.599375em;
      --nav-height-no-bar: 5.4375em;
    }
  }

  @media screen and (max-width: 767px) {
    :root {
      --nav-height: 7.915625em;
      --nav-height-no-bar: 4.4375em;
    }
  }

  @media screen and (max-width: 479px) {
    :root {
      --nav-height: 8.9875em;
      --nav-height-no-bar: 4.4375em;
    }
  }

  .section.cc-space {
    padding-top: var(--nav-height);
  }

  body:not(:has(.announce_wrap)),
  body:has(.announce_wrap.w-condition-invisible) {
    & .section.cc-space {
      padding-top: var(--nav-height-no-bar);
    }
  }

  /* ----- Navbar Scroll ----- */
  .announce_wrap,
  .nav_wrap {
    transition: padding var(--animation-xs);
  }

  body[data-scrolling-started='true'][data-nav-status='closed'] {
    & .announce_wrap {
      padding: 0.625em
    }

    & .nav_wrap {
      padding: 1em;
    }
  }

  @media screen and (max-width: 767px) {
    body[data-scrolling-started='true'][data-nav-status='closed'] {
      & .announce_wrap {
        padding: 0.45em
      }

      & .nav_wrap {
        padding: 0.75em;
      }
    }
  }

  /* ----- Navlink Hover ----- */
  @media (hover: hover) and (pointer: fine) {
    .navlink {
      &::after {
        content: '';
        position: absolute;
        inset: 0%;
        border-radius: inherit;
        background: color-mix(in srgb, currentColor 8%, transparent);
        transition: transform var(--animation), opacity var(--animation);
        transform: scale(0.9);
        opacity: 0;
        isolation: isolate;
      }

      & .navlink_text {
        transition: transform var(--animation);
        --text-distance: 1.2em;
        text-shadow: 0px var(--text-distance) currentColor;
      }

      &:hover {
        & .navlink_text {
          transform: translate(0px, calc(-1 * var(--text-distance)));
        }

        &::after {
          transform: scale(1);
          opacity: 1;
        }
      }
    }
  }

  /* ----- Navbar Theme ----- */
  .header {
    --nav-text-color: inherit;
    --nav-text-menu: inherit;
    --nav-bg-menu: var(--neutral--eerie);
    --nav-shadow-menu: inherit;
    --nav-outline-menu: color-mix(in srgb, currentColor 8%, transparent);
  }

  .header {
    & .navlink {
      transition: color var(--animation);
      color: var(--nav-text-color);
    }

    & .menu-button {
      transition: color var(--animation), background-color var(--animation), outline-color var(--animation), transform var(--animation);
      outline: 1px solid var(--nav-outline-menu);
      outline-offset: -1px;
      color: var(--nav-text-menu);
      background-color: var(--nav-bg-menu);
      box-shadow: var(--nav-shadow-menu);
      outline-color: var(--nav-outline-menu);
    }
  }

  [data-theme-nav='base'] .header {
    --nav-text-color: var(--neutral--white);
    --nav-text-menu: var(--neutral--white);
    --nav-bg-menu: var(--neutral--eerie);
    --nav-shadow-menu: none;
    --nav-outline-menu: color-mix(in srgb, currentColor 8%, transparent);
  }

  [data-theme-nav='invert'] .header {
    --nav-text-color: var(--neutral--dark);
    --nav-text-menu: var(--neutral--dark);
    --nav-bg-menu: var(--neutral--white);
    --nav-shadow-menu: none;
    --nav-outline-menu: color-mix(in srgb, currentColor 8%, transparent);
  }

  @media screen and (max-width: 991px) {

    [data-theme-nav='base'] .header,
    [data-theme-nav='invert'] .header,
    .header {
      --nav-text-color: var(--neutral--dark);
    }
  }

  /* ----- Menu Mobile ----- */
  @media screen and (max-width: 991px) {
    .header {
      --menu-speed: 0.75s;
      --stagger-fast: 0.01s;
      --stagger-default: 0.04s;
      --reveal-delay: 0.25s;
      --menu-open-text-color: var(--neutral--white);
      --menu-open-bg-color: var(--neutral--dark);
      --menu-open-shadow: none;
      --menu-open-outline-color: color-mix(in srgb, currentColor 8%, transparent);
      --menu-translate: -4.3125em;
    }

    body:not(:has(.announce_wrap)) {
      & .header {
        --menu-translate: 0em;
      }
    }

    .nav_menu_outer {
      visibility: hidden;
    }

    .menu_bg {
      transition: opacity var(--animation);
    }

    .nav_menu_container {
      transition: transform var(--menu-speed) var(--smooth-ease);
      transform: translateY(calc(-100% - 2em));
    }

    [data-nav-button] {
      transition: transform var(--animation), opacity var(--animation);
      transform: translateY(0em);
      opacity: 1;
    }

    [data-menu-reveal] {
      transition: transform var(--animation), opacity var(--animation);
      transform: translateY(-1em) scale(1) translateZ(0);
      opacity: 0;
    }

    .menu-button {
      & .menu-button-line {
        transition: transform var(--animation);

        &:first-child {
          transform: translateY(-3px) scaleY(0.8);
        }

        &:last-child {
          transform: translateY(3px) scaleY(0.8);
        }
      }
    }

    .nav_menu_outer[data-state='open']:not(.is-closing) {
      visibility: visible;

      .nav_menu_container {
        transform: translateY(0%);
      }

      .menu_bg {
        opacity: 1;
      }

      [data-menu-reveal] {
        transition: transform var(--animation), opacity var(--animation);
        transition-delay: calc((var(--index) * var(--stagger-default)) + var(--reveal-delay));
        transform: translateY(0em) scale(1) translateZ(0);
        opacity: 1;
      }
    }

    [data-nav-status='open']:has(.nav_menu_outer:not(.is-closing)) {
      .menu-button {
        transform: translateY(var(--menu-translate));
        color: var(--menu-open-text-color);
        background-color: var(--menu-open-bg-color);
        box-shadow: var(--menu-open-shadow);
        outline-color: var(--menu-open-outline-color);

        & .menu-button-line {
          &:first-child {
            transform: translateY(0px) rotate(45deg) scaleY(0.8);
          }

          &:last-child {
            transform: translateY(0px) rotate(-45deg) scaleY(0.8);
          }
        }
      }

      [data-nav-button] {
        will-change: transform, opacity;
        transition: transform var(--animation), opacity var(--animation);
        transition-delay: calc((var(--index) * var(--stagger-fast)));
        transform: translateY(-3em);
        opacity: 0;
      }
    }

    .nav_menu_outer.is-closing {
      visibility: visible;

      & .nav_menu_container {
        will-change: transform;
        transform: translateY(calc(-100% - 2em));
        transition-duration: var(--duration-s);
      }

      & .menu_bg {
        opacity: 0;
      }
    }
  }

  /* ================================================================== */
  /* FORMS                                                              */
  /* ================================================================== */
  /* ----- General ----- */
  .form-input {
    transition: outline-color var(--animation-xs);

    &::placeholder {
      color: color-mix(in srgb, currentColor 50%, transparent);
    }

    &:focus {
      outline-color: color-mix(in srgb, currentColor 50%, transparent);
    }
  }

  /* ----- Radio ----- */
  .radio_input__item {
    transition: transform var(--duration-s) var(--elastic-ease);

    & .radio_input__label {
      transition: color var(--duration-s) var(--smooth-ease);
    }

    .radio_input__bg {
      transition: background-color var(--duration-s) var(--smooth-ease);
    }

    &:has(input:active) {
      transform: scale(0.92);
    }

    &:has(input:checked) {
      & .radio_input__label {
        color: var(--neutral--dark);
      }

      .radio_input__bg {
        background-color: var(--neutral--white);
      }
    }
  }

  /* ----- Checkbox ----- */
  .checkbox_input__item {
    & .checkbox_input__svg {
      transition: opacity var(--animation-xs), transform var(--animation-xs);
      transform: scale(0.5);
      opacity: 0;
    }

    &:has(input:checked) {
      & .checkbox_input__svg {
        transform: scale(1);
        opacity: 1;
      }
    }
  }

  /* ----- Error State ----- */
  .form-input.has-error {
    outline-color: var(--system--red);
  }

  .checkbox_input__item:has(input.has-error) {
    & .checkbox_input__custom {
      outline-color: var(--system--red);
    }
  }

  .radio_input__item:has(input.has-error) {
    & .radio_input__bg {
      outline-color: var(--system--red);
    }
  }

  /* ================================================================== */
  /* Triangle                                                           */
  /* ================================================================== */
  .triangle {
    width: 0.625em;
    height: 0.625em;
    background: var(--neutral--platine);
    position: absolute;
    pointer-events: none;

    &[data-position='top-left'] {
      clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
      top: 0;
      left: 0;
    }

    &[data-position='top-right'] {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
      top: 0;
      right: 0;
    }

    &[data-position='bottom-right'] {
      clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
      bottom: 0;
      right: 0;
    }

    &[data-position='bottom-left'] {
      clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
      bottom: 0;
      left: 0;
    }

    &[data-desktop='true'] {
      display: block;
    }

    &[data-desktop='false'] {
      display: none;
    }
  }

  @media screen and (max-width: 767px) {
    .triangle {
      &[data-mobile='true'] {
        display: block;
      }

      &[data-mobile='false'] {
        display: none;
      }
    }
  }

  /* ================================================================== */
  /* EYEBROWS                                                           */
  /* ================================================================== */
  .eyebrow {
    &[data-theme='invert'] {
      background: color-mix(in srgb, currentColor 8%, transparent);
    }
  }

  .eyebrow_bar {
    &::after {
      content: '';
      position: absolute;
      background: var(--gr-green);
      width: 0.1875em;
      border-radius: 9em;
      height: 100%;
    }
  }

  /* ================================================================== */
  /* TESTIMONIALS                                                       */
  /* ================================================================== */
  @media (min-width: 992px) {
    .testi_item_wrap {
      &:nth-child(2n) {
        & .testi_visual_col {
          grid-column: 9 / span 4;
          grid-row: 1 / span 1;
        }

        & .testi_content_wrap {
          grid-column: 1 / span 8;
          grid-row: 1 / span 1;
          padding-left: 2.75em;
          padding-right: 0;
        }
      }
    }
  }

  /* ================================================================== */
  /* FOOTER                                                             */
  /* ================================================================== */
  .footer_status_dot {

    &::before,
    &::after {
      position: absolute;
      content: '';
      border-radius: 50%;
      aspect-ratio: 1/1;
    }

    &::before {
      width: 40%;
      background-color: currentColor;
    }

    &::after {
      width: 100%;
      background-color: color-mix(in srgb, currentColor 12%, transparent);
      animation: pulse 1.2s ease-in-out infinite;
    }
  }

/* ===== css--content (code personnalisé) ===== */
  /* ================================================================== */
  /* BUNNY PLAYER                                                       */
  /* ================================================================== */
  /* ----- FIXED PLAYER ----- */
  .fixed_reel {
    visibility: hidden;
    pointer-events: none;
    pointer-events: none !important;

    & .fixed_bg {
      transition: opacity var(--animation-s);
      opacity: 0;
    }

    & .fixed_reel__video {
      border-radius: 1.25em;
      transform: scale(0.9) translateY(10%);
      filter: blur(4px);
      opacity: 0;
      transition: transform var(--animation-m), opacity var(--animation-m), filter var(--animation-m);
    }

    &:has([data-player-open='true']) {
      visibility: visible;

      & .fixed_reel__video {
        transform: scale(1) translateY(0%);
        opacity: 1;
        filter: blur(0px);
      }

      & .fixed_bg {
        opacity: 1;
      }
    }

    &:has([data-player-open='false']) {
      transition: visibility 0s linear var(--duration-m);
    }
  }

  /* VARIANTES */
  .bunny-player {
    &[data-player-update-size='false'] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;

      & video {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }

  /* RESET */
  [data-player-control="reset"].rotating svg {
    animation: rotate-reverse 0.3s ease-out;
  }

  @keyframes rotate-reverse {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(-360deg);
    }
  }

  /* Animation */
  [data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) {
    transition: opacity 0.3s linear, visibility 0.3s linear;
  }

  /* Placeholder */
  [data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
  [data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
  [data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
    opacity: 0;
    visibility: hidden;
  }

  /* Dark Overlay */
  [data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
  [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark {
    opacity: 0.3;
  }

  [data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
    opacity: 0;
  }

  /* Play/Pause */
  [data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause,
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause {
    opacity: 0;
  }

  [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause {
    opacity: 1;
  }

  [data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
    display: none;
  }

  [data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg {
    display: block;
  }

  /* Loading */
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
    opacity: 1;
    visibility: visible;
  }

  /* Interface */
  .bunny-player__interface {
    transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  }

  [data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__interface {
    opacity: 0;
    transform: translateY(1em) rotate(0.001deg);
  }

  [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
  [data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
    opacity: 1;
    transform: translateY(0em) rotate(0.001deg);
  }

  /* Timeline */
  [data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
  [data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
    pointer-events: none;
  }

  /* Timeline Handle */
  [data-bunny-player-init] .bunny-player__timeline-handle {
    transition: transform 0.15s ease-in-out;
  }

  [data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
    transform: translate(-50%, -50%) scale(1);
  }

  /* Fullscreen */
  [data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
    display: block;
  }

  [data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
    display: none;
  }

  /* Mute */
  [data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg {
    display: block;
  }

  [data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg {
    display: none;
  }

  /* Cover Mode */
  [data-bunny-player-init][data-player-update-size="cover"] {
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }

  [data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
    display: none;
  }

  [data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
    object-fit: cover;
  }

  /* ================================================================== */
  /* RICH TEXT                                                          */
  /* ================================================================== */
  /* ----- Variables ----- */
  .rich-text {
    --h1: 2.25em;
    --h2: 2em;
    --h3: 1.5em;
    --h4: 1.25em;
    --h5: 1.125em;
    --h6: 1.075em;
    --p: 1em;
    --fade-color: inherit;
  }

  /* ----- Headings ----- */
  .rich-text h1,
  .rich-text h2,
  .rich-text h3,
  .rich-text h4,
  .rich-text h5,
  .rich-text h6 {
    margin-top: 1.125em;
    margin-bottom: 0.5625em;
    text-wrap: balance;
    color: var(--_theme---text);
  }

  .rich-text h1 {
    font-size: var(--h1);
  }

  .rich-text h2 {
    font-size: var(--h2);
  }

  .rich-text h3 {
    font-size: var(--h3);
  }

  .rich-text h4 {
    font-size: var(--h4);
  }

  .rich-text h5 {
    font-size: var(--h5);
  }

  /* ----- Paragraph ----- */
  .rich-text p {
    margin-bottom: 0.9em;
    text-wrap: pretty;
    font-size: var(--p);
  }

  .rich-text strong {
    font-weight: 600;
  }

  /* ----- Links ----- */
  .rich-text a {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: var(--brand--orange);
    font-style: normal;

    &::after {
      content: "";
      position: relative;
      display: inline-block;
      background-color: currentcolor;
      mask: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%202.59082C4.43989%203.06109%202.5%205.30394%202.5%208C2.5%2011.0376%204.96243%2013.5%208%2013.5C10.6961%2013.5%2012.9389%2011.5601%2013.4092%209H14.9287C14.4435%2012.3923%2011.5265%2015%208%2015C4.13401%2015%201%2011.866%201%208C1%204.47355%203.60773%201.55654%207%201.07129V2.59082ZM15%207H13.5V3.56055L8.53027%208.53027L7.46973%207.46973L12.4395%202.5H9V1H15V7Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
      -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%202.59082C4.43989%203.06109%202.5%205.30394%202.5%208C2.5%2011.0376%204.96243%2013.5%208%2013.5C10.6961%2013.5%2012.9389%2011.5601%2013.4092%209H14.9287C14.4435%2012.3923%2011.5265%2015%208%2015C4.13401%2015%201%2011.866%201%208C1%204.47355%203.60773%201.55654%207%201.07129V2.59082ZM15%207H13.5V3.56055L8.53027%208.53027L7.46973%207.46973L12.4395%202.5H9V1H15V7Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
      mask-size: contain;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      margin-left: 0.125em;
      width: 0.75em;
      height: 0.75em;
      top: 0.025em;
      right: 0em;
      opacity: 1;
      transition: opacity var(--duration-xs) var(--smooth-ease);
    }
  }

  /* ----- Lists ----- */
  .rich-text ul,
  .rich-text ol {
    overflow: hidden;
    position: relative;
    padding-top: 0.25em;
    padding-left: 1.25em;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;

    & li::marker {
      color: color-mix(in srgb, currentcolor 60%, transparent);
    }
  }

  /* ----- Figures ----- */
  .rich-text figure {
    margin: 1em auto 1.25em;
    width: 100%;
    max-width: 100%;

    & img {
      width: 100%;
      max-width: 100%;
      height: auto;
      border-radius: 0.75rem;
    }
  }

  .rich-text figure>div:first-child {
    max-width: 100%;
    width: 100%;
  }

  .rich-text figcaption {
    opacity: 0.67;
    font-size: 0.75em;
    text-align: center;
    text-wrap: balance;
    margin-top: 0.5em;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    position: relative;
  }

  /* ----- Blockquote ----- */
  .rich-text {
    & blockquote {
      font-family: Georgia, "Times New Roman", Times, serif;
      color: var(--_theme---text-fade);
      font-size: var(--p);
      padding: 0em;
      border-left: none;
      margin-bottom: 1em;
      text-indent: -0.75em;

      &::before,
      &::after {
        content: "";
        position: relative;
        display: inline-block;
        background-color: color-mix(in srgb, currentcolor 70%, transparent);
        mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.09091%206.40912H7.27273C6.15021%206.40912%205.10645%206.74755%204.23917%207.32887C4.3404%207.32213%204.44251%207.31822%204.54545%207.31822C7.05584%207.31822%209.09091%209.35329%209.09091%2011.8637C9.09091%2014.374%207.05584%2016.4091%204.54545%2016.4091C2.03507%2016.4091%200%2014.374%200%2011.8637C0%207.84705%203.25611%204.59094%207.27273%204.59094H9.09091V6.40912ZM20%206.40912H18.1818C17.0593%206.40912%2016.0155%206.74755%2015.1483%207.32887C15.2495%207.32213%2015.3516%207.31822%2015.4545%207.31822C17.9649%207.31822%2020%209.35329%2020%2011.8637C20%2014.374%2017.9649%2016.4091%2015.4545%2016.4091C12.9442%2016.4091%2010.9091%2014.374%2010.9091%2011.8637C10.9091%207.84705%2014.1652%204.59094%2018.1818%204.59094H20V6.40912Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.09091%206.40912H7.27273C6.15021%206.40912%205.10645%206.74755%204.23917%207.32887C4.3404%207.32213%204.44251%207.31822%204.54545%207.31822C7.05584%207.31822%209.09091%209.35329%209.09091%2011.8637C9.09091%2014.374%207.05584%2016.4091%204.54545%2016.4091C2.03507%2016.4091%200%2014.374%200%2011.8637C0%207.84705%203.25611%204.59094%207.27273%204.59094H9.09091V6.40912ZM20%206.40912H18.1818C17.0593%206.40912%2016.0155%206.74755%2015.1483%207.32887C15.2495%207.32213%2015.3516%207.31822%2015.4545%207.31822C17.9649%207.31822%2020%209.35329%2020%2011.8637C20%2014.374%2017.9649%2016.4091%2015.4545%2016.4091C12.9442%2016.4091%2010.9091%2014.374%2010.9091%2011.8637C10.9091%207.84705%2014.1652%204.59094%2018.1818%204.59094H20V6.40912Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
        mask-size: cover;
        -webkit-mask-size: cover;
        mask-position: center;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        margin-left: 0em;
        margin-right: 0.25em;
        width: 0.75em;
        height: 0.75em;
        top: 0.1em;
        right: 0em;
      }

      &::after {
        margin-left: 0.25em;
        margin-right: 0em;
        mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.9091%2014.5909H12.7273C13.8498%2014.5909%2014.8935%2014.2525%2015.7608%2013.6712C15.6596%2013.6779%2015.5575%2013.6819%2015.4545%2013.6819C12.9442%2013.6819%2010.9091%2011.6468%2010.9091%209.1364C10.9091%206.62603%2012.9442%204.59094%2015.4545%204.59094C17.9649%204.59094%2020%206.62603%2020%209.1364C20%2013.153%2016.7439%2016.4091%2012.7273%2016.4091L10.9091%2016.4091V14.5909ZM4.76851e-07%2014.5909H1.81818C2.94073%2014.5909%203.98446%2014.2525%204.85173%2013.6712C4.75055%2013.6779%204.64836%2013.6819%204.54545%2013.6819C2.03509%2013.6819%202.19465e-07%2011.6468%200%209.1364C-2.19463e-07%206.62603%202.03509%204.59094%204.54545%204.59094C7.05582%204.59094%209.09091%206.62603%209.09091%209.1364C9.09091%2013.153%205.83482%2016.4091%201.81818%2016.4091L6.35802e-07%2016.4091L4.76851e-07%2014.5909Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.9091%2014.5909H12.7273C13.8498%2014.5909%2014.8935%2014.2525%2015.7608%2013.6712C15.6596%2013.6779%2015.5575%2013.6819%2015.4545%2013.6819C12.9442%2013.6819%2010.9091%2011.6468%2010.9091%209.1364C10.9091%206.62603%2012.9442%204.59094%2015.4545%204.59094C17.9649%204.59094%2020%206.62603%2020%209.1364C20%2013.153%2016.7439%2016.4091%2012.7273%2016.4091L10.9091%2016.4091V14.5909ZM4.76851e-07%2014.5909H1.81818C2.94073%2014.5909%203.98446%2014.2525%204.85173%2013.6712C4.75055%2013.6779%204.64836%2013.6819%204.54545%2013.6819C2.03509%2013.6819%202.19465e-07%2011.6468%200%209.1364C-2.19463e-07%206.62603%202.03509%204.59094%204.54545%204.59094C7.05582%204.59094%209.09091%206.62603%209.09091%209.1364C9.09091%2013.153%205.83482%2016.4091%201.81818%2016.4091L6.35802e-07%2016.4091L4.76851e-07%2014.5909Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
      }
    }
  }

  @media screen and (max-width: 479px) {
    .rich-text {
      & blockquote {
        text-indent: -0.5em;

        &::before,
        &::after {
          width: 0.5em;
          height: 0.5em;
          margin-bottom: 0.35em;
        }
      }
    }
  }

  /* ----- First and Last Child ----- */
  .rich-text>*:first-child,
  .rich-text>div:first-child h2:first-child {
    margin-top: 0em !important;
  }

  .rich-text>*:last-child {
    margin-bottom: 0em !important;
  }

  /* ================================================================== */
  /* TOC                                                                */
  /* ================================================================== */
  .toc_link {
    transition: transform var(--animation);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, currentcolor 8%, transparent);
      border: 1px solid color-mix(in srgb, currentcolor 8%, transparent);
      border-radius: inherit;
      transition: transform var(--animation-xs), opacity var(--animation-xs);
      transform: scale(0.5);
      transform-origin: left center;
      opacity: 0;
    }

    &:hover {
      &::after {
        transform: scale(1);
        opacity: 0.5;
      }
    }

    &:active {
      transform: scale(0.95);
    }

    &.w--current {
      &::after {
        transform: scale(1);
        opacity: 0.5;
      }
    }
  }

  .blog_toc_wrap::-webkit-scrollbar {
    width: 0.3rem !important;
    display: block !important;
  }

  .blog_toc_wrap::-webkit-scrollbar-track {
    background: color-mix(in srgb, currentcolor 4%, transparent) !important;
    border-radius: 1em !important;
  }

  .blog_toc_wrap::-webkit-scrollbar-thumb {
    background: currentcolor !important;
    border-radius: 1em !important;
  }

/* ===== css--pages (code personnalisé) ===== */
  /* ================================================================== */
  /* HOME                                                               */
  /* ================================================================== */
  /* ----- Hero ----- */

  /* ================================================================== */
  /* BLOG                                                               */
  /* ================================================================== */
  .form-group {
    & .blog_clear__btn {
      transition: transform var(--animation-xs);

      &:active {
        transform: scale(0.97);
      }

      &::before,
      &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        user-select: none;
        transition: transform var(--animation-xs), opacity var(--animation-xs);
      }

      &::before {
        border: 1px solid color-mix(in srgb, currentColor 4%, transparent);
        opacity: 0;
        transform: scale(1.04);
      }

      &::after {
        background: color-mix(in srgb, currentColor 4%, transparent);
      }
    }

    &:has(.filter_box.cc-active) {
      & .blog_clear__btn {
        &::before {
          opacity: 1;
          transform: scale(1);
        }
      }

      & .blog_clear__btn {
        &::after {
          opacity: 0;
          transform: scale(0.96);
        }
      }
    }
  }


  .filter_box {
    transition: transform var(--animation-xs);

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      user-select: none;
      transition: transform var(--animation-xs), opacity var(--animation-xs);
    }

    &::before {
      border: 1px solid color-mix(in srgb, currentColor 4%, transparent);
    }

    &::after {
      background: color-mix(in srgb, currentColor 4%, transparent);
      opacity: 0;
      transform: scale(0.96);
    }

    &:active {
      transform: scale(0.97);
    }

    &.cc-active {
      &::after {
        opacity: 1;
        transform: scale(1);
      }

      &::before {
        opacity: 0;
        transform: scale(1.04);
      }
    }
  }

  .blog_list__item {
    transition: transform var(--animation-xs), opacity var(--animation-xs);

    &.cc-started {
      transform: translateY(1em);
      opacity: 0;
    }

    &.cc-load {
      transform: translateY(0em);
      opacity: 1;
    }
  }

  .cc-filter {
    & .blog_list__item {
      transform: scale(0.96);
      opacity: 0;
    }
  }



  /* ================================================================== */
  /* OTHER PAGES                                                        */
  /* ================================================================== */

/* ===== css--prevent (code personnalisé) ===== */
  /* ================================================================== */
  /* WEBFLOW PREVENT                                                    */
  /* ================================================================== */
  /* ----- Custom Code ----- */
  .custom--code * {
    width: 0px;
    height: 0px;
    position: absolute;
    margin: 0px !important;
    padding: 0px !important;
    visibility: hidden;
  }

  /* ----- Designer Overrides ----- */
  .wf-design-mode {
    & [data-w-prevent] {
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: none !important;
    }

    & [data-w-hide] {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }
  }

  /* ----- FOUC Prevention ----- */
  html:not(.wf-design-mode) {
    & .your---element {
      opacity: 0;
    }
  }

/* ===== css--utilities (code personnalisé) ===== */
  /* ================================================================== */
  /* ATTRIBUTES                                                         */
  /* ================================================================== */
  /* ----- Border ----- */
  [data-bt] {
    border-top: 1px solid var(--_theme---border);
  }

  [data-bb] {
    border-bottom: 1px solid var(--_theme---border);
  }

  [data-bl] {
    border-left: 1px solid var(--_theme---border);
  }

  [data-br] {
    border-right: 1px solid var(--_theme---border);
  }

  [data-bx] {
    border-right: 1px solid var(--_theme---border);
    border-left: 1px solid var(--_theme---border);
  }

  [data-by] {
    border-top: 1px solid var(--_theme---border);
    border-bottom: 1px solid var(--_theme---border);
  }

  [data-b] {
    border: 1px solid var(--_theme---border);
  }

  /* ----- GRID BORDER ----- */
  [data-grid-border] {
    border-right: 1px solid var(--_theme---border);
  }

  @media screen and (max-width: 767px) {
    [data-grid-border] {
      border-right: none;
      border-bottom: 1px solid var(--_theme---border);
    }
  }

  /* ----- BORDER MASKED ----- */
  [data-border-mask] {
    &::before {
      content: '';
      position: absolute;
      inset: -0.5px;
      border-radius: inherit;
      border-right: 1px solid var(--_theme---border);
      border-left: 1px solid var(--_theme---border);
      pointer-events: none;
      user-select: none;
      mask: linear-gradient(to bottom, #FFF 0%, transparent 100%);
      -webkit-mask: linear-gradient(to bottom, #FFF 0%, transparent 100%);
    }

    &[data-border-mask='reverse'] {
      &::before {
        mask: linear-gradient(to bottom, transparent 0%, #FFF 100%);
        -webkit-mask: linear-gradient(to bottom, transparent 0%, #FFF 100%);
      }
    }
  }

  @media screen and (max-width: 767px) {
    [data-border-mask] {
      &[data-mobile='false'] {
        &::before {
          display: none;
        }
      }
    }
  }

  /* ----- Gradient ----- */
  [data-bg='green'] {
    background: var(--gr-green);
  }

  /* ----- CORNER SHAPE ----- */
  [data-corner] {
    corner-shape: superellipse(1.125);
  }

  /* ================================================================== */
  /* DIVIDER                                                            */
  /* ================================================================== */
  .divider_dashed {
    background: linear-gradient(to right, color-mix(in srgb, currentColor var(--alpha, 16%), transparent) 50%, transparent 50%);
    background-size: 0.375em 100%;
    background-position: top center;
  }

  /* ================================================================== */
  /* ANIMATIONS                                                         */
  /* ================================================================== */
  @keyframes pulse {
    0% {
      transform: scale(0.2);
      opacity: 0;
    }

    50% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.2);
      opacity: 0;
    }
  }

  /* ================================================================== */
  /* DISPLAY UTILITIES                                                  */
  /* ================================================================== */
  /* ----- Hide ----- */
  .hide {
    display: none !important;
  }

  @media screen and (min-width: 992px) {
    .hide-dd {
      display: none !important;
    }
  }

  @media screen and (max-width: 991px) {
    .hide-td {
      display: none !important;
    }

    .td-block {
      display: block !important;
    }
  }

  @media screen and (max-width: 767px) {
    .hide-ld {
      display: none !important;
    }

    .ld-block {
      display: block !important;
    }
  }

  @media screen and (max-width: 479px) {
    .hide-md {
      display: none !important;
    }

    .md-block {
      display: block !important;
    }
  }

  /* ================================================================== */
  /* TEXT UTILITIES                                                     */
  /* ================================================================== */
  /* ----- Text Clamp ----- */
  .u-text-clamp-1 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .u-text-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .u-text-clamp-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* ----- Text Alignment ----- */
  .text-center {
    text-align: center;
  }

  /* ----- Text Alpha ----- */
  .text-a73 {
    color: color-mix(in srgb, currentColor 73%, transparent);
  }

  .text-a50 {
    color: color-mix(in srgb, currentColor 50%, transparent);
  }

  /* ================================================================== */
  /* MARGIN                                                             */
  /* ================================================================== */
  /* ----- Margin Auto ----- */
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- Margin Top ----- */
  .mt-2 {
    margin-top: 0.125em;
  }

  .mt-4 {
    margin-top: 0.25em;
  }

  .mt-8 {
    margin-top: 0.5em;
  }

  .mt-12 {
    margin-top: 0.75em;
  }

  .mt-16 {
    margin-top: 1em;
  }

  .mt-20 {
    margin-top: 1.25em;
  }

  .mt-24 {
    margin-top: 1.5em;
  }

  .mt-32 {
    margin-top: 2em;
  }

  .mt-40 {
    margin-top: 2.5em;
  }

  .mt-48 {
    margin-top: 3em;
  }

  /* ----- Margin Bottom ----- */
  .mb-2 {
    margin-bottom: 0.125em;
  }

  .mb-4 {
    margin-bottom: 0.25em;
  }

  .mb-8 {
    margin-bottom: 0.5em;
  }

  .mb-12 {
    margin-bottom: 0.75em;
  }

  .mb-16 {
    margin-bottom: 1em;
  }

  .mb-20 {
    margin-bottom: 1.25em;
  }

  .mb-24 {
    margin-bottom: 1.5em;
  }

  .mb-32 {
    margin-bottom: 2em;
  }

  .mb-40 {
    margin-bottom: 2.5em;
  }

  .mb-48 {
    margin-bottom: 3em;
  }

  /* ================================================================== */
  /* GAP                                                                */
  /* ================================================================== */
  /* ----- Gap Values ----- */
  .gap-2 {
    gap: 0.125em;
  }

  .gap-4 {
    gap: 0.25em;
  }

  .gap-8 {
    gap: 0.5em;
  }

  .gap-12 {
    gap: 0.75em;
  }

  .gap-16 {
    gap: 1em;
  }

  .gap-20 {
    gap: 1.25em;
  }

  .gap-24 {
    gap: 1.5em;
  }

  .gap-32 {
    gap: 2em;
  }

  .gap-40 {
    gap: 2.5em;
  }

  .gap-48 {
    gap: 3em;
  }

  /* ================================================================== */
  /* MAIN CONTAINER                                                     */
  /* ================================================================== */
  /* ----- Default ----- */
  .main-container {
    width: 100%;
    max-width: calc(var(--max-width) + (var(--_responsive---padding--padding-horizontal) * 2)) !important;
    padding-left: var(--_responsive---padding--padding-horizontal);
    padding-right: var(--_responsive---padding--padding-horizontal);
  }

  /* ----- Padding Vertical ----- */
  .main-container[data-pb='0'] {
    padding-bottom: var(--_responsive---padding--section-0) !important;
  }

  .main-container[data-pt='0'] {
    padding-top: var(--_responsive---padding--section-0) !important;
  }

  .main-container[data-pb='s'] {
    padding-bottom: var(--_responsive---padding--section-s) !important;
  }

  .main-container[data-pt='s'] {
    padding-top: var(--_responsive---padding--section-s) !important;
  }

  .main-container[data-pb='m'] {
    padding-bottom: var(--_responsive---padding--section-m) !important;
  }

  .main-container[data-pt='m'] {
    padding-top: var(--_responsive---padding--section-m) !important;
  }

  .main-container {
    padding-bottom: var(--_responsive---padding--section);
    padding-top: var(--_responsive---padding--section);
  }

  .main-container[data-pb='xl'] {
    padding-bottom: var(--_responsive---padding--section-xl);
  }

  .main-container[data-pt='xl'] {
    padding-top: var(--_responsive---padding--section-xl);
  }

  .main-container[data-pb='xxl'] {
    padding-bottom: var(--_responsive---padding--section-xxl);
  }

  .main-container[data-pt='xxl'] {
    padding-top: var(--_responsive---padding--section-xxl);
  }

  /* ----- Padding Horizontal ----- */
  .main-container[data-ph='0'] {
    padding-left: 0em !important;
    padding-right: 0em !important;
    max-width: var(--max-width) !important;
  }

  .main-container[data-ph='s'] {
    max-width: calc(var(--max-width) + var(--_responsive---padding--padding-horizontal)) !important;
    padding-left: calc(var(--_responsive---padding--padding-horizontal) / 2) !important;
    padding-right: calc(var(--_responsive---padding--padding-horizontal) / 2) !important;
  }

  /* ----- Max Width ----- */
  .main-container[data-max='none'] {
    --max-width: 100vw;
  }

  .main-container[data-max='1440'] {
    --max-width: 90em;
  }

  .main-container[data-max='1200'] {
    --max-width: 75em;
  }

  .main-container[data-max='996'] {
    --max-width: 62.25em;
  }

  .main-container[data-max='980'] {
    --max-width: 61.25em;
  }

  .main-container[data-max='792'] {
    --max-width: 49.5em;
  }