@media (min-device-aspect-ratio: 16/11) and (max-device-aspect-ratio: 16/10) { /*MACBOOK*/
    /* site{ font-size: 0.78rem; } */
    #newsite in div{ width: 50%; }
}



@media (min-width: 1200px) { /* Desktop */

}

/* Tablette */
/*@media (min-width: 768px) and (max-width: 1024px) {*/
@media (min-width: 768px) and (max-width: 1199.98px) {
    .calendrier{ padding: 2em; }
    .calendrier article .flag{ left: -1em; }
    .calendrier article .flag img{ height: 2em; }

    #faire span div{ font-size: 1.25em; }

    #branches{ padding: 2em; }
    #branches div span { width: 31%; }

    #bulle .left{ width: 15em; }
    #bulle .right{ width: 10em; margin-right: 0; }

    #newsite in div{ width: 50%; font-size: 1.5em; }

}

/* Mobile */
@media (max-width: 767px) {
    #splash_home .in{ padding: 1em; height: 38em; }
    #splash_home .vimeo iframe{ height: auto; width: 100%; }

    #bulle{ position: relative; }
    #bulle .left{ width: 10em; margin-right: -8em; background-position: left bottom; }
    #bulle .right{ width: 5em; margin-left: -5em; margin-right: 0; }
    #bulle .main{ flex: none; width: 98%; padding: 0 6em 0 1em; z-index: 2;  }
    #bulle .main .p2{ padding: 0 0 8em 5em; }

    #newsite .philigranne{ height: 22em; }
    #newsite in{ height: 22em; }
    #newsite in div{ width: 88%; }

    .calendrier{ padding: 2em 11% 2em 1.5em; }
    .calendrier section{ flex-direction: column; }
    .calendrier article{ width: 84%; margin-bottom: 2em;  }
    .calendrier nav{ width: 84%; }
    #calendrier_events article{ width: 92%; }

    #branches{ padding: 2em 11% 2em 1.5em; }
    #branches div{ flex-direction: column; }
    #branches div span { width: 94%; }

    #contact{ padding: 2em 1.88em; }
    #contact div{ flex-direction: column; }
    #contact .sidepanel{ width: 94%; }
    #contact .form{ width: 94%; }


    #faire in{ flex-direction: column; }
    #faire in span{ width: 100%; }
    #faire in span div{ font-size: 1.25em; }  
    #faire .faireBas{ aspect-ratio: 4/3; }

}