@font-face {
      font-family: 'Roboto';
      src: url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roboto';
      src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
  

      /* Blinking cursor animation */
      @keyframes blink-caret {
        from,
        to {
          border-color: transparent;
        }

        50% {
          border-color: black;
        }
      }

      /* Typing animation */
      @keyframes typing {
        from {
          width: 0;
        }

        to {
          width: 100%;
        }
      }

      /* Disappear animation */
      @keyframes disappear {
        from {
          width: 100%;
        }

        to {
          width: 0;
        }
      }

      html {
        scroll-behavior: smooth;
      }
  
      body {
        font-family: var(--text-font);
        color: var(--text-color);
      }

      .front-root, .front-container {
        --title-font: 'Roboto', sans-serif;
        --text-font: 'Roboto', sans-serif;
        --primary-color: #3B82F6;
        --secondary-color: #1E40AF;
        --text-color: #1F2937;
        --button-color: #50E3C2;
        --background-color: white;

        /* Header */
        --header-text: #3B82F6;
        --header-link: #1E40AF;
  
        /* Footer */
        --footer-text: #3B82F6;
        --footer-link: #1E40AF;

        /* Fonts */
        font-family: var(--text-font);

        /* Styles for buttons */
        button, .button {
          border-radius: rounded-md;
        }

      /* Application de la font de titre aux éléments de titre */
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: var(--title-font);
      }

        h1 {
          font-size: 2.25rem; /* text-4xl */
          font-weight: 700; /* font-bold */

          /* Responsive */
        }
        @media (min-width: 768px) {
          h1 {
            font-size: 3rem; /* text-5xl */
          }
        }
        @media (min-width: 1024px) {
          h1 {
            font-size: 3.75rem; /* text-6xl */
          }
        }

        h2 {
          font-size: 1.875rem; /* text-3xl */
          font-weight: 600; /* font-semibold */
        }
        @media (min-width: 768px) {
          h2 {
            font-size: 2.25rem; /* text-4xl */
          }
        }

        h3 {
          font-size: 1.5rem; /* text-2xl */
          font-weight: 600; /* font-semibold */
        }
        @media (min-width: 768px) {
          h3 {
            font-size: 1.875rem; /* text-3xl */
          }
        }

        h4 {
          font-size: 1.25rem; /* text-xl */
          font-weight: 600; /* font-semibold */
        }
        @media (min-width: 768px) {
          h4 {
            font-size: 1.5rem; /* text-2xl */
          }
        }

        /* Styles for RichText */
        .rich-text ul {
          list-style-type: disc;
          margin-left: 1.5rem;
          margin-bottom: 1rem;
        }

        .rich-text ol {
          list-style-type: decimal;
          margin-left: 1.5rem;
          margin-bottom: 1rem;
        }

        .rich-text li {
          margin-bottom: 0.5rem;
        }

        .rich-text p {
          margin-bottom: 1rem;
        }

        .rich-text a {
          color: var(--secondary-color);
          text-decoration: underline;
        }

        /* Styles for buttons */
      button, .button {
        border-radius: 0.375rem;

      }

      .swiper-slide {
  height: auto !important;
}
}

      .typing,
      .disappear {
        overflow: hidden;
        white-space: nowrap;
        border-right: 0.1em solid black;
        animation: typing 2s steps(30, end), blink-caret 1s step-end infinite;
      }

      .disappear {
        animation: disappear 0.5s steps(30, end) forwards, blink-caret 1s step-end infinite;
      }