:root {
    /* ---------------------------------------------------- */
    /* Components Primitive                                 */
    /* ---------------------------------------------------- */
    --grid-col: clamp(2.5rem, 0.263rem + 9.94vw, 8.75rem);
    
    --bezier-smooth: cubic-bezier(0.79, 0.09, 0.59, 0.89);

    --mask-image--to-bottom: linear-gradient(to bottom, black 50%, transparent 100% );
    --mask-image--to-top: linear-gradient(to top, black 100%, transparent 0%);

    /* ---------------------------------------------------- */
    /* Components Main                                      */
    /* ---------------------------------------------------- */

    /* --The Header */
    --header-logo-size: clamp(7.5rem, 6.173rem + 5.897vw, 13.25rem);
    --header-color: var(--color-primary-dark);
    --header-height: clamp(7.5rem, 6.635rem + 3.846vw, 11.25rem);
    --header-z-index: 10;
    /* --- */

    /* --The Footer */
    --the-footer-fs: 1.5rem;
    --the-footer-col-gap: .75rem;
    --the-footer-copyright-padding: 1.5em; /* Desktop - 1em*/
    /* --- */

    /* ---------------------------------------------------- */
    /* Components Elements                                  */
    /* ---------------------------------------------------- */

    /* --Common Button */
    --common-button-icon-size: 2.5rem;
    --common-button-fs: 14px;
    --common-button-border-radius: 5px;
    --common-button-w-base: 250px;
    --common-button-gap: var(--spacing-xxs);

    /* --Common Image -----------------------------------   */
    --common-image-border-radius: 10px;
    /* --- */

    /* --Review Card - Rating Stars ---------------------   */
    --rating-stars-width: clamp(
        7.5rem,
        6.923rem + 2.564vw,
        10rem
    ); /* 120 -> 230 */
    /* --- */

    /* --Aside Counter ----------------------------------   */
    --aside-counter-width: calc(
        clamp(5rem, 4.423rem + 2.564vw, 7.5rem) + 40px
    ); /* 80 -> 120 */
    --aside-counter-fs: var(--text-lead--md);
    /* --- */

    /* --Form -------------------------------------------   */
    --form-input-fs: calc(var(--text-lead) + 2px);
    --form-label-fs: var(--text-micro);
    --form-step-header-spacing: var(--spacing-xxs);
    /* --- */
}

@media (min-width: 1366px) {
    /*12 colonne*/
    :root {
        --grid-col: clamp(6.25rem, -2.996rem + 10.83vw, 10rem);
        --the-footer-copyright-padding: 1em;
    }
}