#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;  }

#entete { margin: 1em 0 3em; }
#entete p { font-weight: 500; }

/* écart par rapport à la bordure du paragraphe  */
#entete p, .sustZone h2, .sustZone slider .onglets  { padding: 0 1.5rem; }

.sustZone { padding: 0 23em;}
.sustZone h2 { margin: 1em 0 0.5em; }

.sustZone slider {
    flex-direction: column; gap: 3em;
    overflow: visible;
}
.sustZone slider nav.onglets { font-size: 0.9em; gap: 1em; }
.sustZone slider .onglets { position: initial; }
.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 ); height: 30em; }
.sustZone #slideEnv slide { height: 40em; }
.sustZone slide in { width: 50%; position: relative;}
.sustZone slide .slidetext {
    display: flex; flex-direction: column; gap: 1em;
    padding: 0 1em;
    border-left: 3px solid var(--second-text); z-index: -10;
    height: 100%;
}

.sustZone slide .slidetext .large-texts { font-weight: 500; }
.sustZone slide .slidetext .basdepage { font-size: 0.5em; margin-top: 1em; width: 70%; }

.sustZone slide .slide-background {
    position: absolute; bottom: 0; right: 0;
    max-width: 100%; max-height: 130%; z-index: -15;
    object-fit: scale-down;
}

.sustZone .figures { display: flex; flex: none; align-items: center; width: 125%; font-weight: 500; margin-top: -3em; }
.sustZone .figures .kg {
    display: flex; flex: none; align-items: last baseline; justify-content: center;
    aspect-ratio: initial; background: center center no-repeat; background-size: contain; }
.sustZone .figures .kg img { position: absolute; z-index: -5; transform: translateX(-5em);}
.sustZone .figures .kg1 img { height: 20em; }
.sustZone .figures .kg10 img { height: 30em; bottom: 5em; }

.sustZone .figures .num, .sustZone .figures .egal {
    font-size: 14em;
    font-family: 'Krona One', sans-serif;
 }
.sustZone .figures .num {
    position: relative;
    font-size: 14em;
    margin-right: .45em;
    letter-spacing: -0.02em;
 }
 .sustZone .figures .egal { font-size: 18em; align-self:flex-end; }
.sustZone .figures .num::after {
    font-size: 0.25em;
    content: "KG";
    letter-spacing: initial;
    position: absolute; top: 25%;
}
.sustZone .figures .detail {
    width: 8em;
    line-height: 1;
}

.sustZone .figures .kg1 .detail {
    width: 6em;
}

.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); }

#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 { }

#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%; }