:root {
    /*
    Fonction affine :
        f(x) = y_0 + (x - x_0) * m

        x: Taille
        y_0: Taille minimale
        x_0: Taille de référence
        m: Taux de variation


    Taux de variation :
            y_2 - y_1
        m = ---------
            x_2 - x_1

        x_1: Plus petite valeur de départ
        x_2: Plus grande valeur de départ
        y_1: Plus petite valeur souhaitée
        y_2: Plus grande valeur souhaitée
    */

    --base-min: 10;
    --base: 16;
    --base-max: 64;

    --low-ratio: calc((var(--scale-base, var(--base)) - var(--scale-base-min, var(--base-min))) / (var(--base) - var(--base-min)));
    --default-ratio: calc((var(--scale-base-max, var(--base-max)) - var(--scale-base, var(--base))) / (var(--base-max) - var(--base)));

    --low-ref: calc(var(--base-min) * 1px);
    --ref: calc(var(--base) * 1px);

    --low-offset: calc(var(--scale-base-min, var(--base-min)) * 1px);
    --offset: calc(var(--scale-base, var(--base)) * 1px);

    --10px: calc(var(--low-offset) + (10px - var(--low-ref)) * var(--low-ratio));
    --11px: calc(var(--low-offset) + (11px - var(--low-ref)) * var(--low-ratio));
    --12px: calc(var(--low-offset) + (12px - var(--low-ref)) * var(--low-ratio));
    --13px: calc(var(--low-offset) + (13px - var(--low-ref)) * var(--low-ratio));
    --14px: calc(var(--low-offset) + (14px - var(--low-ref)) * var(--low-ratio));
    --15px: calc(var(--low-offset) + (15px - var(--low-ref)) * var(--low-ratio));
    --16px: calc(var(--offset) + (16px - var(--ref)) * var(--default-ratio));

    --17px: calc(var(--offset) + (17px - var(--ref)) * var(--default-ratio));
    --18px: calc(var(--offset) + (18px - var(--ref)) * var(--default-ratio));
    --19px: calc(var(--offset) + (19px - var(--ref)) * var(--default-ratio));
    --20px: calc(var(--offset) + (20px - var(--ref)) * var(--default-ratio));
    --21px: calc(var(--offset) + (21px - var(--ref)) * var(--default-ratio));
    --22px: calc(var(--offset) + (22px - var(--ref)) * var(--default-ratio));
    --23px: calc(var(--offset) + (23px - var(--ref)) * var(--default-ratio));
    --24px: calc(var(--offset) + (24px - var(--ref)) * var(--default-ratio));
    --25px: calc(var(--offset) + (25px - var(--ref)) * var(--default-ratio));
    --26px: calc(var(--offset) + (26px - var(--ref)) * var(--default-ratio));
    --27px: calc(var(--offset) + (27px - var(--ref)) * var(--default-ratio));
    --28px: calc(var(--offset) + (28px - var(--ref)) * var(--default-ratio));
    --29px: calc(var(--offset) + (29px - var(--ref)) * var(--default-ratio));
    --30px: calc(var(--offset) + (30px - var(--ref)) * var(--default-ratio));
    --31px: calc(var(--offset) + (31px - var(--ref)) * var(--default-ratio));
    --32px: calc(var(--offset) + (32px - var(--ref)) * var(--default-ratio));

    --33px: calc(var(--offset) + (33px - var(--ref)) * var(--default-ratio));
    --34px: calc(var(--offset) + (34px - var(--ref)) * var(--default-ratio));
    --35px: calc(var(--offset) + (35px - var(--ref)) * var(--default-ratio));
    --36px: calc(var(--offset) + (36px - var(--ref)) * var(--default-ratio));
    --37px: calc(var(--offset) + (37px - var(--ref)) * var(--default-ratio));
    --38px: calc(var(--offset) + (38px - var(--ref)) * var(--default-ratio));
    --39px: calc(var(--offset) + (39px - var(--ref)) * var(--default-ratio));
    --40px: calc(var(--offset) + (40px - var(--ref)) * var(--default-ratio));
    --41px: calc(var(--offset) + (41px - var(--ref)) * var(--default-ratio));
    --42px: calc(var(--offset) + (42px - var(--ref)) * var(--default-ratio));
    --43px: calc(var(--offset) + (43px - var(--ref)) * var(--default-ratio));
    --44px: calc(var(--offset) + (44px - var(--ref)) * var(--default-ratio));
    --45px: calc(var(--offset) + (45px - var(--ref)) * var(--default-ratio));
    --46px: calc(var(--offset) + (46px - var(--ref)) * var(--default-ratio));
    --47px: calc(var(--offset) + (47px - var(--ref)) * var(--default-ratio));
    --48px: calc(var(--offset) + (48px - var(--ref)) * var(--default-ratio));

    --49px: calc(var(--offset) + (49px - var(--ref)) * var(--default-ratio));
    --50px: calc(var(--offset) + (50px - var(--ref)) * var(--default-ratio));
    --51px: calc(var(--offset) + (51px - var(--ref)) * var(--default-ratio));
    --52px: calc(var(--offset) + (52px - var(--ref)) * var(--default-ratio));
    --53px: calc(var(--offset) + (53px - var(--ref)) * var(--default-ratio));
    --54px: calc(var(--offset) + (54px - var(--ref)) * var(--default-ratio));
    --55px: calc(var(--offset) + (55px - var(--ref)) * var(--default-ratio));
    --56px: calc(var(--offset) + (56px - var(--ref)) * var(--default-ratio));
    --57px: calc(var(--offset) + (57px - var(--ref)) * var(--default-ratio));
    --58px: calc(var(--offset) + (58px - var(--ref)) * var(--default-ratio));
    --59px: calc(var(--offset) + (59px - var(--ref)) * var(--default-ratio));
    --60px: calc(var(--offset) + (60px - var(--ref)) * var(--default-ratio));
    --61px: calc(var(--offset) + (61px - var(--ref)) * var(--default-ratio));
    --62px: calc(var(--offset) + (62px - var(--ref)) * var(--default-ratio));
    --63px: calc(var(--offset) + (63px - var(--ref)) * var(--default-ratio));
    --64px: calc(var(--offset) + (64px - var(--ref)) * var(--default-ratio));

    --1pxrem: 0.0625rem;
    --2pxrem: 0.125rem;
    --3pxrem: 0.1875rem;
    --4pxrem: 0.25rem;
    --5pxrem: 0.3125rem;
    --6pxrem: 0.375rem;
    --7pxrem: 0.4375rem;
    --8pxrem: 0.5rem;
    --9pxrem: 0.5625rem;
    --10pxrem: 0.625rem;
    --11pxrem: 0.6875rem;
    --12pxrem: 0.75rem;
    --13pxrem: 0.8125rem;
    --14pxrem: 0.875rem;
    --15pxrem: 0.9375rem;
    --16pxrem: 1rem;

    --17pxrem: 1.0625rem;
    --18pxrem: 1.125rem;
    --19pxrem: 1.1875rem;
    --20pxrem: 1.25rem;
    --21pxrem: 1.3125rem;
    --22pxrem: 1.375rem;
    --23pxrem: 1.4375rem;
    --24pxrem: 1.5rem;
    --25pxrem: 1.5625rem;
    --26pxrem: 1.625rem;
    --27pxrem: 1.6875rem;
    --28pxrem: 1.75rem;
    --29pxrem: 1.8125rem;
    --30pxrem: 1.875rem;
    --31pxrem: 1.9375rem;
    --32pxrem: 2rem;

    --33pxrem: 2.0625rem;
    --34pxrem: 2.125rem;
    --35pxrem: 2.1875rem;
    --36pxrem: 2.25rem;
    --37pxrem: 2.3125rem;
    --38pxrem: 2.375rem;
    --39pxrem: 2.4375rem;
    --40pxrem: 2.5rem;
    --41pxrem: 2.5625rem;
    --42pxrem: 2.625rem;
    --43pxrem: 2.6875rem;
    --44pxrem: 2.75rem;
    --45pxrem: 2.8125rem;
    --46pxrem: 2.875rem;
    --47pxrem: 2.9375rem;
    --48pxrem: 3rem;

    --49pxrem: 3.0625rem;
    --50pxrem: 3.125rem;
    --51pxrem: 3.1875rem;
    --52pxrem: 3.25rem;
    --53pxrem: 3.3125rem;
    --54pxrem: 3.375rem;
    --55pxrem: 3.4375rem;
    --56pxrem: 3.5rem;
    --57pxrem: 3.5625rem;
    --58pxrem: 3.625rem;
    --59pxrem: 3.6875rem;
    --60pxrem: 3.75rem;
    --61pxrem: 3.8125rem;
    --62pxrem: 3.875rem;
    --63pxrem: 3.9375rem;
    --64pxrem: 4rem;

    --65pxrem: 4.0625rem;
    --66pxrem: 4.125rem;
    --67pxrem: 4.1875rem;
    --68pxrem: 4.25rem;
    --69pxrem: 4.3125rem;
    --70pxrem: 4.375rem;
    --71pxrem: 4.4375rem;
    --72pxrem: 4.5rem;
    --73pxrem: 4.5625rem;
    --74pxrem: 4.625rem;
    --75pxrem: 4.6875rem;
    --76pxrem: 4.75rem;
    --77pxrem: 4.8125rem;
    --78pxrem: 4.875rem;
    --79pxrem: 4.9375rem;
    --80pxrem: 5rem;

    --normalize: calc(var(--scale-base, var(--base)) / 16);
}

@media screen and (max-width: 1199px) {
    :root {
        --scale-base-min: 10;
        --scale-base: 15;
        --scale-base-max: 54;
    }
}

@media screen and (max-width: 575px) {
    :root {
        --scale-base-min: 9;
        --scale-base: 14;
        --scale-base-max: 42;
    }
}

html {
    font-size: var(--16px);
}