/* VARIABLES CSS */
:root {
    /* Couleurs principales */
    --primary-color: #3d0e44;
    --fg-color: green;
    --bg-color: #998EC5;
    --bg-colorWhite: #FFFFFF;

    /* Mode 1 Brand Colors */
    --color-brand-50: #fbf6fd;
    --color-brand-100: #f7ebfc;
    --color-brand-200: #eed6f8;
    --color-brand-300: #e3b6f1;
    --color-brand-400: #d48be7;
    --color-brand-500: #be5dd8;
    --color-brand-600: #a33ebb;
    --color-brand-700: #89309b;
    --color-brand-800: #792c87;
    --color-brand-900: #602768;
    --color-brand-950: #3d0e44;

    /* Secondary Colors */
    --color-secondary-50: #f8f7fb;
    --color-secondary-100: #f1f0f7;
    --color-secondary-200: #e5e3f1;
    --color-secondary-300: #d1cde5;
    --color-secondary-400: #bcb5d8;
    --color-secondary-500: #9c8fc3;
    --color-secondary-600: #8975b2;
    --color-secondary-700: #77639e;
    --color-secondary-800: #635285;
    --color-secondary-900: #53456d;
    --color-secondary-950: #342c49;

    /* Title sizes */
    --h1: 3rem;      /* 48px */
    --h2: 2.25rem;   /* 36px */
    --h3: 1.5rem;    /* 24px */
    --h4: 1.25rem;   /* 20px */

    /* Text sizes */
    --font-size-xsmall: 0.625rem;  /* 10px */
    --font-size-small: 0.75rem;   /* 12px */
    --font-size-normal: 0.875rem;  /* 14px */
    --font-size-medium: 1rem;      /* 16px */
    --font-size-large: 1.125rem;  /* 18px */

    /* autres */
    --ease-out-max: cubic-bezier(0, .33, 0, 1);
}

/* Tablet sizes (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --h1: 2.5rem;      /* 40px */
        --h2: 2rem;        /* 32px */
        --h3: 1.375rem;    /* 22px */
        --h4: 1.125rem;    /* 18px */

        --font-size-xsmall: 0.625rem;  /* 10px */
        --font-size-small: 0.75rem;   /* 12px */
        --font-size-normal: 0.875rem;  /* 14px */
        --font-size-medium: 0.9375rem; /* 15px */
        --font-size-large: 1rem;      /* 16px */
    }
}

/* Mobile sizes (max-width: 700px) */
@media (max-width: 700px) {
    :root {
        --h1: 2rem;        /* 32px */
        --h2: 1.75rem;     /* 28px */
        --h3: 1.25rem;     /* 20px */
        --h4: 1rem;        /* 16px */

        --font-size-xsmall: 0.625rem;  /* 10px */
        --font-size-small: 0.6875rem; /* 11px */
        --font-size-normal: 0.75rem;   /* 12px */
        --font-size-medium: 0.875rem;  /* 14px */
        --font-size-large: 1rem;      /* 16px */
    }
}

/* CLASSES DE BASE */

/* STRUCTURE ET LAYOUT */