:root {
    /* TODO : add div's dimension */
    --size-button-open-sidebar: 35px;
    /* TODO : add var padding/margin/gap */
    --space-20: 20px;
    --space-10: 10px;
    /* TODO : add var font-size */
    /* Petites tailles : variation limitée */
    --fs-12: clamp(0.75rem, 0.70rem + 0.3vw, 0.85rem);          /* 12px → max ~13.6px */
    --fs-14: clamp(0.875rem, 0.84rem + 0.4vw, 0.95rem);         /* 14px → max ~15.2px */
    --fs-15: clamp(0.938rem, 0.90rem + 0.4vw, 1rem);            /* 15px → max 16px */
    --fs-16: clamp(1rem, 0.96rem + 0.5vw, 1.125rem);            /* 16px → max 18px */

    /* Grandes tailles : variation plus large */
    --fs-18: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);             /* 18px → max 24px */
    --fs-24: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);               /* 24px → max 32px */
    --fs-28: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);            /* 28px → max 40px */
    --fs-32: clamp(2rem, 1.5rem + 2.5vw, 3rem);                 /* 32px → max 48px */
    --fs-48: clamp(3rem, 2.2rem + 3.5vw, 4.5rem);               /* 48px → max 72px */

    /* Variable : variation très large */
    --ffs-12: clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem);           /* 12px → max 24px */
    --ffs-14: clamp(0.875rem, 0.625rem + 1.5vw, 1.75rem);       /* 14px → max 28px */
    --ffs-15: clamp(0.938rem, 0.688rem + 1.5vw, 1.875rem);      /* 15px → max 30px */
    --ffs-16: clamp(1rem, 0.75rem + 1.5vw, 2rem);               /* 16px → max 32px */
    --ffs-18: clamp(1.125rem, 0.875rem + 1.5vw, 2.25rem);       /* 18px → max 36px */

    /* Variable : Homepage, min -> infini */
    --hp-ffs-18: calc(1.125rem + 2vw);
    --hp-ffs-14: calc(.875rem + 1vw);

    /* TODO : add color background */
    --white: #fafafa;
    --white-dark: #ebebeb;
    --black: #222222;
    --black-dark: #181818;

    --blue: #1188be;
    --green: #14aa52;
    --orange: #c45c17;
    --yellow: #e7ad0e;

    --gradient-purple-blue: linear-gradient(45deg, var(--font-purple), var(--blue));
    /* TODO : add color border */
    --border-global: .1px solid var(--border-gray); 
    --border-gray: #3a3a3a;

    /* TODO : add color text */
    --font-white: #e2e2e2;
    --font-black: #272323;
    --font-blue: #35a2d4;
    --font-green: #14aa52;
    --font-orange: #c45c17;
    --font-purple: #b54bf1;
    --font-yellow: #e7ad0e;

    /* TODO : add transition time */
    --transition-1: .15s;
    --transition-2: .2s;
    --transition-3: .3s;
    --transition-4: .4s;
    --transition-10: 1s;
    /* TODO : add z-index */
    --z-index-loading-screen: 1001;
    --z-index-iframe: 102;
    --z-index-description-projet: 51;
    --z-index-fixed-bar: 21;
    --z-index-sidebar: 20;
    --z-index-header: 11;
    /* --z-index-main: 10; */
    /* --z-index-behind-page: 1; */
}

@media (prefers-color-scheme: dark) {
}