body {
      overflow-x: hidden;
    }
    {
      font-family: 'Inter', sans-serif;
    }
    .typing-text::after {
      content: '|';
      animation: blink 1s step-start infinite;
    }
    @keyframes blink {
      50% { opacity: 0; }
    }
    .fancy-slide {
      display: inline-block;
      position: relative;
      width: 100%;
      height: 1.5em;
      overflow: hidden;
      vertical-align: bottom;
    }

    .fancy-slide .word {
      position: absolute;
      opacity: 0;
      transform: translateX(-100%);
      transition: all 0.6s ease;
      white-space: nowrap;
    }

    .fancy-slide .word.active {
      opacity: 1;
      transform: translateX(0%);
    }
    a.underline-hover {
      display: inline-block;
      position: relative;
      text-decoration: none;
      padding-bottom: 3px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: inherit;
      background-clip: border-box;
    }

    a.underline-hover::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(to right, #FD35E2, #FF791A);
      transform: scaleX(0);
      transform-origin: bottom right;
      transition: transform 0.25s ease-out;
    }

    a.underline-hover:hover {
      background-image: linear-gradient(to right, #FD35E2, #FF791A);
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

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

    .card-hover {
      transition: transform 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-8px);
    }
    .btn-text-slide {
      position: relative;
      display: inline-block;
      overflow: hidden;
    }
    .btn-text-slide span,
    .btn-text-slide::after {
      display: block;
      transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s;
    }
    .btn-text-slide span {
      transform: translateY(0);
    }
    .btn-text-slide::after {
      content: attr(data-hover);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 100%);
      color: inherit;
      white-space: nowrap;
    }
    .btn-text-slide:hover span {
      transform: translateY(-100%);
      opacity: 0;
    }
    .btn-text-slide:hover::after {
      transform: translate(-50%, -50%);
      opacity: 1;
    }
    .tagline-box {
      display: inline-block;
      padding: 2px 10px;
      border: 1px solid #E7E7E7;
      border-radius: 10px;
      font-weight: 500;
      font-size: 14px;
    }
    .accent-slide {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      animation: typing 2.4s steps(80, end), blink-caret 0.5s;
    }
    .mask-container {
      container-type: inline-size;
      --mask-head-size: calc(0.1 * 100cqw);
      --mask-foot-size: calc(0.09 * 100cqw);
    }
    .mask-box,
    .mask-box-white,
    .mask-box-gray,
    .mask-box-gradient {
      margin-block: calc(-1 * var(--mask-head-size) - 1px) calc(-1 * var(--mask-foot-size) - 1px);
      padding-block: calc(var(--mask-head-size) + 1px) calc(var(--mask-foot-size) + 1px);
      mask-image:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g transform="scale(-1,-1)" transform-origin="50%"><path d="M0 50V0h1000v2L0 50z">"></path></g></svg>'),
        linear-gradient(transparent calc(var(--mask-head-size) - 1px), black calc(var(--mask-head-size) - 1px), black calc(100% - var(--mask-foot-size) + 1px), transparent calc(100% - var(--mask-foot-size) + 1px)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="90"><g transform="scale(1.5,1)" transform-origin="12.5% 50%"><path d="M0 50V0h1000v2L0 50z"></path></g></svg>');
      mask-repeat: no-repeat;
      mask-position: top, center, bottom;
      mask-size: 100%;
    }
    .mask-box { 
      background-color: #f9fafb; 
    }
    .mask-box-white { 
      background-color: #fff; 
    }
    .mask-box-gray { 
      background-color: rgb(249 250 251); 
    }
    .mask-box-gradient {
      background-image: linear-gradient(130deg, #FD35E2, #FF791A);
      background-size: cover;
      background-position: center;
    }
    .mask-black-top {
      margin-block: calc(-1 * var(--mask-head-size) - 1px) 0;
      padding-block: calc(var(--mask-head-size) + 1px) 0;
      mask-image:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g transform="scale(-1,-1)" transform-origin="50%"><path d="M0 50V0h1000v2L0 50z"></path></g></svg>'),
        linear-gradient(transparent calc(var(--mask-head-size) - 1px), black calc(var(--mask-head-size) - 1px));
      mask-repeat: no-repeat;
      mask-position: top, center;
      mask-size: 100%;
      background-color: #000;
    }

    .swiper-slide {
      width: auto;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
    }

    .swiper-wrapper {
      display: flex;
      align-items: stretch;
      max-width: 100%;
    }

    @property --border-angle {
      syntax: "<angle>";
      inherits: true;
      initial-value: 0turn;
    }

    .feature-card {
      width: 100%;
      max-width: 360px;
      border: solid 2px transparent;
      border-radius: 0.75rem;
      background: #F5F5F7; /* couleur de fond classique */
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    /* Effet animé déclenché uniquement au hover */
    .feature-card:hover {
      background:
        conic-gradient(from var(--border-angle), #F5F5F7, #F5F5F7) padding-box,
        conic-gradient(from var(--border-angle), transparent 25%, #FD35E2, #FF791A, transparent) border-box;
      animation: border-rotate 3s linear infinite;
      transform: translateY(-4px);
    }

    @keyframes border-rotate {
      to {
        --border-angle: 1turn;
      }
    }

    .custom-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background-color: #F5F5F7;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      cursor: pointer;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
      transition: transform 0.2s ease;
    }

    .left-arrow {
      left: -50px;
    }

    .right-arrow {
      right: -50px;
    }

    .custom-arrow:hover {
      transform: translateY(-50%) scale(1.05);
    }
    .swiper-pagination-bullet-active {
      background-color: #FD35E2;
    }

    #chatbot-input {
      font-size: 16px;
    }