h2 {
    font-size: 2em;
    font-weight: 300;
}

.more-button {
    width: fit-content;
    font-weight: bold;
}


#splash {
    display: flex;
    align-items: center;
    padding: 8em 4em 4em 4em;
}

    #splash .pic {
        width: 50%;
        aspect-ratio: 6/4;
        background: url(images/splash.jpg) center center no-repeat;
        background-size: cover;
        border-radius: 4em;
        margin-left: 8em;
    }

        #splash .pic gradient{ 
            display: flex; flex: none; width: 100%; height: 100%; 
            background-image: radial-gradient(
                circle at 150% 150%,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0) 70%);
            background-repeat: no-repeat;
        }

    #splash .texte{ 
        width: 55%;
        text-align: center;
        margin-left: -15%;
        display: flex;
        flex-direction: column;
        gap: 2em;
    }




#slideMid slide { width: 100vw; aspect-ratio: 2.8/1; background: no-repeat; background-size: cover; }

#slideMid .slide-content {
    display: flex; flex-direction: column; gap: 1em;
    height: 100%;
    padding: 8% 16%;
    color: var(--reverse-text);
}
        
    #slideMid .slide-content .more-button {
        margin-top: 0.5em;
    }

#slideMid nav.onglets a {
    font-size: 3em;
    border: 3px solid var(--reverse-text);
    margin-bottom:1em;
}
    #slideMid nav.onglets a.in { background: var(--reverse-text); }



#chiffrescle {
    display: flex;
    flex-direction: column;
    gap: 4em;
    background: var(--sec-color-grad);
    padding: 4em 14em 2em;
    z-index: 0;
}
.chiffre-title { width: 100%; text-align: center; }
#chiffrescle .figures { display: flex; flex: none; flex-wrap: wrap; align-items: stretch; justify-content: space-between; row-gap: 2em; }
#chiffrescle .figures .figure { display: flex; flex: none; flex-direction: column; align-items: center; width: 33%; text-align: center; }
#chiffrescle .figures .figure .chiffre { font-size: 8em; font-weight: 800; }
#chiffrescle .logos {
    display: flex; flex: none; align-items: center; justify-content: center; gap: 3em;
    padding: 4em; }
#chiffrescle .logos .logo img { width: 16em; }



#apropos { position: relative; }
#apropos .background {
    display: flex; flex: none; align-items: center; justify-content: space-between;
    height: 54em; overflow: hidden; z-index: -10; position: absolute; padding-top: 20em; /*left: 25%;*/
}
#apropos .background span { width: 25%; transform: translateY(100%); }
#apropos .background span img { width: 100%; transform-origin: center; }
#apropos .background .left { margin-left: -4%; }
#apropos .background .right { margin-right: -8%; }
#apropos .background .right img { transform: rotate(90deg); }

#apropos .foreground {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2em;
    height: 54em; position: relative; padding: 4em 0;
    text-align: center;
}

#apropos .foreground .heavy-texts { color: var(--main-color); }
#apropos .foreground a:hover { 
    color: var(--reverse-text); background: var(--main-color);
    transition:0.2s ease;
}


#contactForm {
    display: flex; flex: none; justify-content: space-around;
    padding: 8em 16em;
    color: var(--reverse-text); background: var(--main-color);
    z-index: 0;
}
#contactForm .texte {
    display: flex; flex-direction: column; gap: 2em;
    width: 40%;
}


#contactForm .form { width: 45%; }

#contactForm .contactForm input:not([type="checkbox"]),
#contactForm .contactForm select,
#contactForm .contactForm textarea {
    border-bottom: 3px solid var(--reverse-text); color: var(--reverse-text);
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}

#contactForm .contactForm input::placeholder,
#contactForm .contactForm textarea::placeholder {
    opacity: 1;
}

#contactForm .contactForm input:focus,
#contactForm .contactForm textarea:focus {
    outline: none;
    background-color: var(--reverse-text);
    color: var(--main-color);
}

#contactForm .contactForm option { color: var(--main-text); }
#contactForm .contactForm .accept dom a { border: 3px solid var(--reverse-text); }
#contactForm .contactForm .accept dom a.checked {
  background: var(--reverse-text);
}
#contactForm .contactForm .inline { color: var(--third-color); }

.send-button { margin-top: 0.5em; padding: .25em .75em; }