#splash{ display: flex; flex: none; align-items: center; justify-content: center; padding: 1em 3em 1em; }
#splash div{ display: flex; flex: none; width: 100%; aspect-ratio: 2.75/1; background: url(images/splash.jpg) top -14em center no-repeat; background-size: cover; border-radius: 4em;  }

.sustZone{ padding: 0 24em;}
.sustZone .section{ font-size: 1.75em; padding: 0 1em; margin: 3em 0 1.5em; }
.sustZone .section h1{ font-size: 2.5em; margin: 0 }

.sustZone slider{ margin-left: -11em; width: calc( 100vw + 11em ); font-size: 2.3em; }
.sustZone slider .onglets{ bottom: auto; top: 0; left: 11em; font-size: inherit; width: auto; padding: 0 1em; }
.sustZone slider .onglets a{ 
    display: inline-block; text-decoration: none; padding: 0.12em 0.5em; margin-right: 0.5em; font-weight: bold;
    color: var(--second-text); border: 2px solid var(--second-text); border-radius: 2em;
}
.sustZone slider .onglets a:hover, .sustZone slider .onglets a.in{ color: var(--reverse-text); background: var(--second-text); }
.sustZone slide{ width: calc( 100vw + 11em ); aspect-ratio: 3.5/1; }
.sustZone slide in{ width: 50%; margin-left: 11em; background: no-repeat; background-size: contain; }
.sustZone slide h3 small{ font-size: 0.6em; }
.sustZone slide h3 small div{ font-size: 1em; }
.sustZone slide .slidetext{ height: 18em; margin-top: 3em; padding: 0 1em; border-left: 3px solid var(--second-text); }

.sustZone .figures{ display: flex; flex: none; align-items: center; width: 125%; font-weight: 500; margin-left: -2.5em; margin-top: -3em; }
.sustZone .figures .kg{ display: flex; flex: none; align-items: center; justify-content: center; aspect-ratio: 1.25/1; background: center center no-repeat; background-size: contain; }
.sustZone .figures .kg div{ display: flex; flex: none; align-items: flex-end; }
.sustZone .figures .kg img{ height: 4em; }
.sustZone .figures .egal{ width: 12%; }
.sustZone .figures .egal img{ height: 3em; }
.sustZone .figures .kg1{ background-image: url( images/elements/env_val_1.png ); width: 40%; }
.sustZone .figures .kg10{ background-image: url( images/elements/env_val_10.png ); background-size: 66%; width: 50%; }
.sustZone .figures .num{ margin-right: 0.5em; }
.sustZone .figures .detail{ white-space: nowrap; }

.sustZone.reverse{ color: var(--reverse-text); }
.sustZone.reverse slider .onglets a{ color: var(--reverse-text); border: 2px solid var(--reverse-text); }
.sustZone.reverse slide .slidetext{ border-left: 3px solid var(--reverse-text); }

#entete h1{ font-size: 2.5em; font-weight: 500; }

#env{ background: var(--main-color-grad2); }
#env slider .onglets a:hover, #env slider .onglets a.in{ color: var(--main-color-grad2); background: var(--reverse-text); }
#env .figures{ text-shadow: -2px -2px 0 var(--main-color-grad2), 2px -2px 0 var(--main-color-grad2), -2px 2px 0 var(--main-color-grad2), 2px 2px 0 var(--main-color-grad2); }

#env .env_chimie in{ background-position: right calc(50% + 2em); background-size: auto 50%; }
#env .env_sourcing in{ background-position: right bottom; background-size: auto 60%; }

#eco{ background: var(--sec-color-grad3); }

#eco .eco_opt in{ background-position: right top; background-size: auto 90%; }
#eco .eco_auto in{background-position: right bottom; background-size: auto 100%;  }

#social{ background: var(--fourth-color); }
#social slider .onglets a:hover, #social slider .onglets a.in{ color: var(--fourth-color); background: var(--reverse-text); }

#social .social_apports in{ background-position: right top; background-size: auto 90%; }
#social .social_dynamisme in{ background-position: right bottom; background-size: auto 100%; }