@media (min-device-aspect-ratio: 16/11) and (max-device-aspect-ratio: 16/10) { /*MACBOOK*/

}


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

}

/* Tablette */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* Mobile */
@media (max-width: 767px) {
    #splash{ padding: 1em; }
    #splash div{ aspect-ratio: 1/1; border-radius: 2em; background-position: calc(100% + 2.5em) center; }

    .sustZone{ padding: 0 1rem; font-size: 0.5em; }
    .sustZone .section h1{ text-align: center; }
    .sustZone slider{ margin-left: -1rem; width: 100vw; }
    .sustZone slider .onglets{ left: 0; width: 100%; justify-content: center; padding: 0; }
    .sustZone slider .onglets a{ margin: 0 0.5em; }
    .sustZone slidein{ margin-top: 2em; }
    .sustZone slide{ width: 100vw; aspect-ratio: 1.5/1; }
    .sustZone slide in{ width: 100%; margin-left: 0; }
    .sustZone slide .slidetext, .sustZone.reverse slide .slidetext{ padding: 0 3em 1em 1em; margin-top: 0; font-size: 1.2em; border-left: none; }
    .sustZone slide .slidetext br{ display: none; }

    .sustZone .figures{ width: 100%; margin: 0; }
    .sustZone .figures .kg{  aspect-ratio: 1/1.5; background-size: contain;  }
    .sustZone .figures .kg div{ flex-direction: column;}
    .sustZone .figures .detail{ white-space: normal; }
    .sustZone .figures .egal{ width: 30%; margin-left: -50%; padding-bottom: 1em; }
    .sustZone .figures .egal img{ height: 2.25em; }
    .sustZone .figures .kg1{ background-position: top left; width: 75%; justify-content: flex-start; }
    .sustZone .figures .kg1 .detail{ width: 5em; }
    .sustZone .figures .kg10{ background-position: bottom right; width: 75%; margin-left: -10%; padding-left: 10%; justify-content: flex-start; }
    .sustZone .figures .kg10 .detail{ width: 8em; }


    #entete{ font-size: 1.75em; text-align: center; }
    #entete br{ display: none; }

    #env slide{ aspect-ratio: 1/1.25; }
    #env small{ display: block; margin-top: 1em; }
    
    #env .env_chimie in{ background-size: 75% auto; }
    #env .env_sourcing in{ background-size: 75% auto; }

    #social .social_apports in{ background-position: right calc( 100% - 1em ); background-size: auto 75%; }
    #social .social_dynamisme in{ background-size: auto 88%; }
    #social .social_dynamisme .slidetext{ padding: 0 8em 1em 1em; }
}