@media (min-device-aspect-ratio: 16/11) and (max-device-aspect-ratio: 16/10) { /*MACBOOK*/
    /* site{ font-size: 0.78rem; } */
    footer #summup{ flex: 1.5; }
}



@media (min-width: 1200px) { /* Desktop */
    .biggerFont{ font-size: 1.5em; }
}

/* Tablette */
/*@media (min-width: 768px) and (max-width: 1024px) {*/
@media (min-width: 768px) and (max-width: 1199.98px) {
    header{ height: 4em; }
    header #titre{ font-size: 1.5em; }
    header #btZone{ font-size: 1em; }
    mainct{ padding-top: 4em; }
    #socialBar #acessibility menu{ width: 33vw; transform: translate(-6em, -12em); }

    footer #logo{ flex: 0.33; }
    footer #summup{ flex: 1.66; }
}

/* Mobile */
@media (max-width: 767px) {
    header{ height: 4em; justify-content: space-between;  }
    header #titre{ font-size: 1.5em; }
    header #btZone{ font-size: 1em; }
    header #btZone .cta::before{ display: inline-block; font-family: 'Material Icons'; font-size: 1.75em; }
    header #btZone .cnx::before{ content: '\ea77'; }
    header #btZone .inscr::before{ content: '\e7fe'; }
    mainct{ padding-top: 4em; }
    
    #socialBar{ font-size: 0.88em; width: 5em; }
    #socialBar #acessibility menu{ width: 92vw; transform: translate(0, -12em); }

    header #mainMenu{ 
        position: absolute; top: 4em; left: 0; 
        font-size: 1em; width: 100vw; height: calc( 100vh - 4em); margin-left: -100vw; 
        background: var(--main-color); transition: margin-left 1s; }
    header #mainMenu in{ width: 100vw; }
    header #mainMenu.unfolded{ margin-left: 0; }
    header #mainMenu a{
        display: flex; flex: none; padding: 1em; margin: 0; align-items: center; justify-content: space-between; 
        text-decoration: none; font-size: 1.5em; font-family: "Chakra Petch", serif; color: var(--reverse-text);
        background-image: linear-gradient(to right, #0007, #0000, #0000 ); border-bottom: 2px solid #000b;
    }
    header #mainMenu a:hover, header #mainMenu a.in{ color: var(--sec-color); }
    header #mainMenu a:hover:after, header #mainMenu a.in:after{ display: inline-block; content: '\e5cc'; font-family: 'Material Icons'; font-size: 1.5em; margin: -0.25em 0; }
    header #mainMenu a.bt_close{ font-size: 0.88em; background: #c332 }

    footer{ flex-direction: column; }
    footer #summup nav{ flex-direction: column; }
    footer #summup nav a{ width: 100%; }

}