#splash{ display: flex; flex: none; align-items: center; justify-content: center; padding: 4em; }
#splash .pic{ width: 33%; aspect-ratio: 6/4; background: url(images/splash.jpg) center center no-repeat; background-size: cover; border-radius: 4em; }
#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) 100%);
    background-repeat: no-repeat;
}
#splash .texte{ 
    width: 35%; font-size: 2em; text-align: center; margin-left: -7%;
    /*text-shadow: -2px -2px 0 var(--main-back), 2px -2px 0 var(--main-back), -2px 2px 0 var(--main-back), 2px 2px 0 var(--main-back); */
}

#slideMid slide{ width: 100vw; aspect-ratio: 2.8/1; background: no-repeat; background-size: cover; }
#slideMid .slidetext{ font-size: 2.5em; padding: 2em 8em; color: var(--reverse-text); }
#slideMid .slidetext nav{ margin-top: 1em; }
#slideMid nav.onglets a{ font-size: 2em; border: 3px solid var(--reverse-text); }
#slideMid nav.onglets a.in{ background: var(--reverse-text); }

#chiffrescle{ background: var(--sec-color-grad); padding: 2em 14em;  }
#chiffrescle h1{ text-align: center; font-size: 4em; }
#chiffrescle .figures{ display: flex; flex: none; flex-wrap: wrap; align-items: stretch; justify-content: space-between; font-size: 2em; }
#chiffrescle .figures article{ display: flex; flex: none; flex-direction: column; align-items: center; width: 33%; text-align: center; margin-bottom: 1em; }
#chiffrescle .figures article .chiffre{ font-size: 3.2em; font-weight: 800; }
#chiffrescle .logos{ display: flex; flex: none; align-items: center; justify-content: center; padding: 4em; }
#chiffrescle .logos span{ margin: 0 1em; }
#chiffrescle .logos span img{ height: 8em; }



#apropos{ position: relative; }
#apropos .background{ display: flex; flex: none; align-items: center; justify-content: space-between; height: 46em; overflow: hidden; }
#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: none; flex-direction: column; align-items: center; justify-content: center; height: 46em; position: relative; margin-top: -46em; }
#apropos .foreground div{ text-align: center; font-size: 2em; /*text-shadow: -2px -2px 0 var(--main-back), 2px -2px 0 var(--main-back), -2px 2px 0 var(--main-back), 2px 2px 0 var(--main-back);*/ }
#apropos .foreground div h2{ color: var(--main-color); }
#apropos .foreground div nav{ margin-top: 1.5em; }


#contactForm{ display: flex; flex: none; justify-content: space-around; padding: 8em 16em; color: var(--reverse-text); background: var(--main-color); }
#contactForm .texte{ font-size: 1.75em; width: 40%; }
#contactForm .texte h1{ font-size: 2em; }
#contactForm .texte nav{ margin-top: 1em; }


#contactForm .form{ width: 45%; font-size: 1.25em; }
#contactForm .contactForm input:not([type="checkbox"]), #contactForm .contactForm select, #contactForm .contactForm textarea{
    border-bottom: 3px solid var(--reverse-text); color: var(--reverse-text);
}
#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); }
#contactForm .contactForm .cta{ color: var(--reverse-text); border: 3px solid var(--reverse-text); }