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

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

      .front-root, .front-container {
        --title-font: 'Lato', sans-serif;
        --text-font: 'Lato', sans-serif;
        --primary-color: #111111;
        --secondary-color: #ed4623;
        --text-color: #111111;
        --button-color: #ed4623;
        --background-color: white;

        /* Radius tokens derived from CMS setting */
        --radius-none: 0;
        --radius-medium: 0.5rem; /* Tailwind rounded-lg */
        --radius-full: 9999px; /* Pill shape */

        /* Global policy:
           - If rounded-none: everything is square
           - If rounded-full: only buttons and form controls are full; others are medium
           - If rounded-md: everything uses medium */
        --global-radius: 
        var(--radius-medium);
        --button-radius: 
        var(--radius-full);
        --input-radius: 
        var(--radius-full);

        /* Header */
        --header-text: #111111;
        --header-link: #111111;
        --header-link-hover: #111111;
  
        /* Footer */
        --footer-text: #111111;
        --footer-link: #111111;
        --footer-link-hover: #111111;

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

        /* Default font family applied via CSS variables */

      /* 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: 3rem; /* Mobile */
        font-weight: 700; /* font-bold */
      }
      @media (min-width: 768px) {
        h1 {
          font-size: 3.7rem; /* Tablette */
        }
      }

      h2 {
        font-size: 2.5rem; /* Mobile & Tablette */
        font-weight: 600; /* font-semibold */
      }
      @media (min-width: 1024px) {
        h2 {
          font-size: 3rem; /* Desktop */
        }
      }

      h3 {
        font-size: 2.2rem; /* Mobile & Tablette */
        font-weight: 600; /* font-semibold */
      }
      @media (min-width: 1024px) {
        h3 {
          font-size: 2.4rem; /* Desktop */
        }
      }

      h4 {
        font-size: 1.7rem; /* All sizes */
        font-weight: 600; /* font-semibold */
      }
      
      /* Styles for links */
      a:not(where(header, footer), button) {
        color: var(--button-color);
        text-decoration: underline;
      }
      a:not(button):hover, a:not(button):focus, header a.active:hover, header a.active:focus {
        color: var(--secondary-color)!important;
        text-decoration:underline;
      }

      /* Styles for buttons */
      button:not(.video-container), .button {
        border-radius: calc(infinity * 1px);
        text-decoration:none!important;
      }
      button:not(.video-container):hover, .button:hover, button:not(.video-container):focus, .button:focus {
        text-decoration:none!important;
        color: var(--button-color)!important;
      }

        /* 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(--button-color);
          text-decoration: underline;
        }   
          
        .ql-editor a {
          color: var(--button-color);
          text-decoration: underline;
        }

      /* Use Tailwind arbitrary values like rounded-[var(--global-radius)] in components. */

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