/* Imports */

    /* Rubik */@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
    /* Quicksand */@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
    /* Bebas Neue */@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* Fin des imports */

/* Table des couleurs */
    /* Texte / Noir principal : #111 */
    /* Second noir : #222 */
    /* Bleu principal (Bleu clair) : #bee2fb */
    /* Second bleu (intermédiaire) : #9fd3f8 */
    /* Troisième bleu (plus foncé) : #87c9f8 */
/* Fin de la table des couleurs */

/* Base */
*{
    list-style-type: none;
    text-decoration: none;
    color: #111;
    margin: 0;
    padding: 0;
    font-family: 'Rubik';
    scroll-behavior: smooth;
    box-sizing: border-box;
}
html{
    background-color: #f5f5f5;
    overflow-x: hidden;
}
/* Loader */
.loaderContainer{
    position: fixed;
    z-index: 6;
    height: 100vh;
    width: 100vw;
    top: 0;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
}
.globalLoader{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* Cercle */
.loader {
    animation: animate 3s linear infinite;
    clip: rect(0, 80px, 80px, 40px); 
    height: 80px;
    width: 80px;
  }
  @keyframes animate {
    0% { 
      transform: rotate(0deg)
    }
    100% { 
      transform: rotate(360deg)
    }
  }
  .loader:after {
    animation: animate2 3s ease-in-out infinite;
    clip: rect(0, 80px, 80px, 40px);
    content:'';
    border-radius: 50%; 
    height: 80px;
    width: 80px;
    position: absolute; 
  } 
  @keyframes animate2 {
    0% {
      box-shadow: inset #bee2fb 0 0 0 0.1em;
      transform: rotate(0deg);
    }
    50% {
      box-shadow: inset #9fd3f8 0 0 0 0.3em;
    }
    100% {
      box-shadow: inset #87c9f8 0 0 0 0.1em;
      transform: rotate(360deg);
    }
  }
/* Fin du cercle */
/* Texte */
.globalLoader h4{
    margin-top: 2vh;
    font-size: 1.8rem;
    font-family: 'Quicksand', 'Rubik', sans-serif;
    text-align: center;
    color: #f5f5f5;
}
.globalLoader h4 span{
    color: #bee2fb;
    font-size: 2.5rem;
}
.deux{
    color: #9fd3f8 !important;
    animation: deux 6s infinite linear;
}
.trois{
    color: #87c9f8 !important;
    animation: trois 6s infinite linear;
}
@keyframes deux {
    0%{
        opacity: 0%;
    }
    16.67%{
        opacity: 1%;
    }
    50%{
        opacity: 100%;
    }
    88.3%{
        opacity: 100%;
    }
    100%{
        opacity: 0%;
    }
}
@keyframes trois {
    0%{
        opacity: 0%;
    }
    33.3%{
        opacity: 1%;
    }
    50%{
        opacity: 100%;
    }
    66.67%{
        opacity: 100%;
    }
    100%{
        opacity: 0%;
    }
}
/* Fin du texte */
/* Fin du loader */
/* Fin de la base */

/* Srollbar */
body::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-left: solid 1px transparent;
    width: 15px;
}
body::-webkit-scrollbar-track {
    position: relative;
}
body::-webkit-scrollbar-thumb {
    background: #bee2fb;
    border-top: solid 2px #f5f5f5;
    border-bottom: solid 2px #f5f5f5;
}
body::-webkit-scrollbar-thumb:hover{
    background-color: #87c9f8;
}
body::-webkit-scrollbar-button:single-button {
    display: block;
    border-style: solid;
    height: auto;
    width: auto;
}
body::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0 8px 12px 8px;
    border-color: transparent transparent #87c9f8 transparent;
    transition: 0.3s all;
}
body::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    border-color: transparent transparent #9fd3f8 transparent;
}
body::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 12px 8px 0 8px;
    border-color: #87c9f8 transparent transparent transparent;
    transition: 0.3s all;
}
body::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    border-color: #9fd3f8 transparent transparent transparent;
}
/* Fin de la scrollbar */



/* Main */
/* Base */
h1,h2,h3{
    font-family: 'Quicksand', 'Bebas Neue', 'Rubik', sans-serif;
}
.mainContainer{
    margin-top: 12vh;
}
body{
    background: linear-gradient(45deg, #87c9f8, #f5f5f5);
    background-size: 200% 200%;
    animation: bgk 5s infinite;
}
@keyframes bgk {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 50% 0%;
    }
    100%{
        background-position: 0% 50%;
    }
}
/* Fin de la base */

/* Titres */
.titlesContainer{
    width: 100%;
    text-align: center;
    margin-top: 15vh;
}
.titlesContainer h1{
    font-size: 2.5rem;
}
/* Fin des titres */

/* Menu */
/* Base */
.navContainer{
    display: flex;
    flex-direction: row;
    width: 100vw;
    justify-content: space-between;
    height: 12vh;
    align-items: center;
    background-color: #bee2fb;
    position: fixed;
    top: 0;
    z-index: 15;
    box-shadow: 0px 5px 5px #1111113c;
}
.menuH{
    position: absolute;
    left: 3vw;
    display: none;
    transition: 1.35s all;
    width: 50px;
    cursor: pointer;
}
.rotateIcon{
    will-change: transform;
    transform: rotate(450deg);

}
/* Fin de la base */
/* Logo */
.navLogoContainer{
    display: flex;
    align-items: center;
}
.navLogo{
    width: 11vh;
    height: 11vh;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 2vw;
}
/* Fin du logo */
/* Liste */
.navList{
    display: flex;
}
.navList1,
.navList2,
.navList3,
.navList4,
.accLink{
    padding: 15px;
    margin-right: 1.5vw;
    font-size: 1.2em;
    transition: 0.5s all;
    align-items: center;
    border-radius: 15px;
}
.navList1,
.navList2,
.navList3,
.navList4,
.accLink{
    text-align: center;
}
.navList1:hover,
.navList2:hover,
.navList3:hover,
.navList4:hover{
    background-color: #9fd3f8;
    text-decoration: underline #111;
}
.accLink{
    display: none !important;
}
/* Bouton Contact */
.btnContact{
    background-color: #9fd3f8;
    padding: 12px;
    margin-right: 1.5vw;
    font-size: 1.2em;
    transition: 0.5s all;
    align-items: center;
    border-radius: 50px;
    border: solid 3px #9fd3f8;
}
.btnContact:hover{
    box-shadow: -5px 5px #87c9f8;
    background: transparent;
}
/* Fin du bouton contact */
/* Fin de la liste */

@media screen and (max-width: 1040px) {
    .navContainer{
        flex-direction: row-reverse;
    }
    .navLogo{
        margin-left: 0vw;
        margin-right: 3vw;
    }
    .navList {
        z-index: 3;
        position: fixed;
        display: flex;
        background-color: #f5f5f538;
        backdrop-filter: blur(10px);
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        margin-left: -100vw;
        transition: all 1.0s cubic-bezier(0.34, 0.6, 0.45, 0.94);
        flex-direction: column;
        align-items: center;
    }
    .navList.mobile-menu{
        margin-left: 0vw !important;
    }
    .navList.marginTog{
        margin-left: 0vw !important;
    }
    .navList1,
    .navList2,
    .navList3,
    .navList4,
    .accLink{
        background-color: #f5f5f59f;
        min-height: 10vh;
        min-width: 40vw;
        max-width: 90% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border: solid 3px #87c9f8;
    }
    .navList1,
    .navList2,
    .navList3,
    .navList4
    .accLink,
    .navList a{
        font-size: 1.2em;
        font-weight: 700;
        margin: 2vh 0px;
        color: #222;
        font-family: 'Quicksand', 'Rubik', 'Bebas Neue', sans-serif;
    }
    .menuH{
        display: block;
        z-index: 3;
    }
    .btnContactFixed{
        display: none;
    }
    .accLink{
        display: flex !important;
    }
    .navList a:hover{
        background-color: #f5f5f5e9;
        text-decoration: none; 
    }
    .navList1:hover,
    .navList2:hover,
    .navList3:hover,
    .navList4:hover,
    .accLink:hover{
        text-decoration: none;
    }
    .btnContact{
        background-color: #bee2fb !important;
        min-height: 10vh;
        min-width: 40vw;
        max-width: 90% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border: solid 3px #87c9f8;
        margin: 2vh 0px;
    }
    .btnContact:hover{
        box-shadow: none;
    }
    .navList4{
        margin-right: 0px;
    }
}
@media screen and (max-width:700px) {
    .navList li{
        min-width: 70%;
    }
}
@media screen and (max-width:450px) {
    .navList li{
        min-width: 90%;
        min-height: 15vh;
    }
}
/* Fin du menu */

/* Formulaire */
/* Base */
.formContainer{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 7vh 3vw;
    border: solid 3px #222;
    border-radius: 20px;
    background-color: #f5f5f5;
}
/* Fin de la base */
/* Message */
/* Base */
.messageContainer{
    margin: 2vh 0vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 3px transparent;
    border-radius: 20px;
    border-bottom-color: #222 !important;
    padding-bottom: 3vh;
}
/* Fin de la base */
/* Type */
.typeContainer{
    margin: 2vh 0vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.typeContainer label{
    font-size: 1.1rem;
}
.select{
    border: solid 2px #222;
    border-radius: 5px;
    text-align: center;
    width: 15vw;
    margin-left: 2vw;
    min-width: 100px;
}
.select:hover{
    cursor: pointer;
}
/* Fin du type */
/* Textarea */
.textContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.textContainer textarea{
    min-width: 80%;
    max-width: 80%;
    width: 80%;
    border: solid 3px #222;
    border-radius: 20px;
    padding: 1%;
    font-size: 1rem;
    text-align: center;
}
.textContainer textarea:focus,
.textContainer textarea:focus-visible{
    border: solid 3px #87c9f8;
    outline: solid 3px #222;
}
.textContainer label{
    font-size: 1.1rem;
}
/* Fin du textarea */

/* Reponsif */
@media screen and (max-width: 440px){
    .typeContainer label{
        font-size: 0.9rem;
    }
}
@media screen and (max-width: 375px){
    .typeContainer{
        margin: 5vh 0vw;
    }
    .titlesContainer{
        display: none;
    }
    .formContainer{
        margin-top: 20vh;
    }
}
@media screen and (max-width: 440px){
    .typeContainer{
        flex-direction: column;
    }
    .typeContainer label{
        margin-bottom: 2vh;
    }
}

/* Fin du responsif */
/* Fin du message */

/* Infos */
.infosContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.info{
    margin-top: 2vh;
}
.info h3{
    margin-bottom: 1vh;
    text-decoration: underline;
    text-decoration-color: #87c9f8;
    text-decoration-thickness: 0.5vh;
}
.info input{
    padding: 5px;
    text-align: center;
    border: solid 3px #222;
    border-radius: 20px;
    width: 20vw;
    min-width: 205px;
}
.info input:focus,
.info input:focus-visible{
    border: solid 3px #87c9f8;
    outline: solid 3px #222;
}

.adresseContainer{
    display: flex;
    flex-direction: column;
}
.adresseContainer label{
    margin-top: 1.2vh;
    margin-bottom: 0.3vh;
}

.miniStar{
    color: #eb3a3a;
    font-size: 1rem;
    font-weight: 100;
}
/* Fin des infos */

/* Bouton Envoyer */
#button{
    padding: 10px;
    margin: 5vh 0vw;
    width: 15vw;
    min-width: 205px;
    border: solid 3px #222;
    border-radius: 20px;
    background-color: #bee2fb;
    font-size: 1rem;
    transition: 0.3s all;
    outline: solid 3px transparent;
}
#button:hover{
    background-color: #87c9f8;
    border-color: #f5f5f5;
    outline: solid 3px #87c9f8;
    color: #f5f5f5;
    cursor: pointer;
}
/* Fin de ce bouton */
/* Fin du formulaire */

/* Apres Envoi */
/* Base */
.ifError,
.afterSending{
    display: none;
    flex-direction: row;
    height: 50vh;
    justify-content: space-around;
    align-items: center;
    border: double 5px #222;
    outline: double 5px #f5f5f5;
    border-radius: 20px;
    margin: 15vh 5vw;
    background: linear-gradient(72deg, #f5f5f5, #87c9f8);
    background-size: 200% 200%;
    animation: bgk 5s infinite;
}
.ifErrorB{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
/* Fin de la base */
/* Image */
.ifErrorImg{
    width: 25%;
}
.afterSendingImg{
    width: 40vh;
    height: 40vh;
    object-fit: cover;
    border-radius: 50%;
}
/* Fin de l'image */
/* Textes */
.ifErrorText,
.afterSendingText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ifErrorText h1,
.afterSendingText h1{
    font-size: 4rem;
    font-family: 'Quicksand','Rubik', 'Bebas Neue', sans-serif;
    letter-spacing: 0.6vw;
    text-align: center;
}
.ifErrorText h3,
.afterSendingText h3{
    text-align: center;
}
/* Fin des textes */
/* Liens */
.ifErrorLinks{
    margin-top: 5vh;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.ifErrorLinks a{
    background-color: #87c9f8;
    border: solid 3px #222;
    border-radius: 20px;
    padding: 1.5vh 3vw;
    text-align: center;
    font-size: 1.2rem;
    margin: 0vh 2vw;
    transition: 0.35s all;
}
.ifErrorLinks a:hover{
    background: linear-gradient(225deg, #87c9f8, #bee2fb);
    background-size: 200% 200%;
    animation: bgk 2s infinite;
    box-shadow: 10px 10px #222;
}
/* Fin des liens */

/* Responsive */
@media screen and (max-width: 800px) {
    .afterSending{
        flex-direction: column;
        padding: 10vh 5vw;
        height: auto;
    }
    .afterSendingImg{
        margin-top: 10vh;
    }
}
@media screen and (max-width: 345px) {
    .afterSendingText h1{
        font-size: 3rem;
    }
    .afterSendingText h3{
        font-size: 1rem;
    }
    .afterSendingImg{
        width: 30vh;
        height: 30vh;
    }
}
@media screen and (max-width: 260px) {
    .afterSendingText h1{
        font-size: 2rem;
    }
    .afterSendingText h3{
        font-size: 0.9rem;
    }
    .afterSendingImg{
        width: 20vh;
        height: 20vh;
    }
}
@media screen and (max-width: 880px) {
    .ifError{
        flex-direction: column;
        padding: 10vh 5vw;
        height: auto;
    }
    .ifErrorImg{
        margin-top: 10vh;
        width: 40vh;
    }
}
@media screen and (max-width: 700px) {
    .ifErrorLinks{
        flex-direction: column;
    }
    .ifErrorLinks a{
        margin: 2vh 0vw;
        min-width: 350px;
    }
}
@media screen and (max-width: 460px) {
    .ifErrorImg{
        display: none;
    }
    .ifErrorLinks a{
        min-width: 300px;
    }
}
@media screen and (max-width: 380px) {
    .ifErrorLinks a{
        min-width: 250px;
        font-size: 1rem;
    }
    .ifErrorText h3{
        font-size: 1rem;
    }
}
@media screen and (max-width: 380px) {
    .ifErrorLinks a{
        width: 90%;
        font-size: 0.8rem;
        min-width: 50px;
        padding: 1vh;
    }
    .ifErrorText h1{
        font-size: 2.5rem;
    }
    .ifErrorText h3{
        font-size: 0.8rem;
    }
}
/* Fin du responsive */
/* Fin de apres envoi */
/* Fin du main */
*

/* Footer */
/* Base */
.footerContainer{
    background-color: #111;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    min-height: 30vh;
    height: auto;
    padding: 5vh 2vw;
}
.footerContainer section{
    background-color: #f5f5f5;
    min-height: 25vh;
    height: auto;
    min-width: 25vw;
    width: auto;
    padding: 2vh 2vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center;
    text-align: center;
    border-radius: 20px;
}
/* Fin de la base */
/* Titres */
.titleFooter{
    font-family: 'Quicksand', 'Rubik', sans-serif ;
}
/* Fin des titres */
/* Bouton Contact */
.btnContactFooter{
    margin-top: 4vh;
}
.btnContactFooter a{
    background-color: #87c9f8;
    padding: 1vh 2vw;
    border-radius: 18px;
    font-size: 1.2rem;
    transition: 0.5s all;
}
.btnContactFooter a:hover{
    box-shadow: 6px 6px #222;
}
/* Fin du bouton contact */
/* ML */
.legalBtn{
    margin-top: 1vh;
    font-size: 0.7em;
    text-decoration: underline 1px #bee2fb;
}
/* Fin de ML */
/* RESPONSIVE */
@media screen and (max-width: 540px) {
    .footerContainer{
        flex-direction: column;
    }
    .footerContainer section{
        margin-top: 2vh;
        min-width: 70vw;
    }
}
@media screen and (max-width: 440px) {
    .footerContainer section{
        min-width: 90vw;
    }
}
/* FIN DU RESPONSIVE */
/* Fin du footer */