:root {
    --headerH: 8rem;
    --footerH: 6rem;
    --lineGap: 4rem;

    /* --compassH: 4rem; */
    /* --fixedH: 30rem; */

    --lineH: 1em; /*1em*/
    --lineHtxt: 1.26em;


    /*Faire 3 styles différents pour les line-height
- Shorten Regular Footer (to sail) : Line-height : 1.3em
- Shorten Compact (Agenda, café etc) line-height : 0.9em
- Mentor petit textes line-height : 1.26em*/

    --lineHShortenReg: 1.3em;
    --lineHShortenCom: 0.9em;
    --lineHMentor: 1.26em;


    --m: 0.5rem;
    --dm: 1rem;
    --f: 2rem;
    --scrollBarsW: 8px;
    
    --compass: calc(var(--dm) + var(--dm) + var(--size88) + var(--size19) + var(--size19));
    --arrow: calc(var(--compass) / 3);
    --dateSelector: calc(var(--compass) + var(--dm));

    --column: calc((100vw - 11 * var(--m)) / 8);
    --column1: calc(var(--column) * 1 + var(--m) * 0 - 0.1px);
    --column2: calc(var(--column) * 2 + var(--m) * 1 - 0.1px);
    --column3: calc(var(--column) * 3 + var(--m) * 2 - 0.1px);
    --column4: calc(var(--column) * 4 + var(--m) * 3 - 0.1px);
    --column6: calc(var(--column) * 6 + var(--m) * 5 - 0.1px);
    --column7: calc(var(--column) * 7 + var(--m) * 6 - 0.1px);
    --column8: calc(var(--column) * 8 + var(--m) * 7 - 0.1px);

    

    --mPlates: 0.75em;
    --capsCentering: 0.25em;

    --anime: 0.5s;

    --color1: black;
    --color2: #31C50C;
    --color3: #ffff00;
    --color4: white;


    --size190: 9.5rem; 
    
    --size88: 4.4rem;
    --size50: 2.5rem;
    --size25: 1.25rem;
    --size19: 0.95rem;

    --size12: 0.6rem;
}

@media screen and (orientation: portrait) {
    :root {
        --column: calc((100vw - 7 * var(--m) - 2 * var(--f)) / 8);
    }
}