@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
    /* Couleurs*/
    --fondBase: #3587ca;
    --orangeBase: tomato;
    --borderBase: #d9d9d9;
    --headerGradient: linear-gradient(90deg, #466fff 1%, #8ca4ff 100%);
    --headerGradient: linear-gradient(90deg, #3687c9 1%, #45bfde 100%);
    --headerGradient: linear-gradient(90deg, #2b6cb0 1%, #3182ce 100%);
    /* --headerGradient: linear-gradient(161.46deg,#466fff 48.89%,#8ca4ff 90.91%); */
    --footerColor: #0b4575;
    --pColor: rgb(154, 169, 180);
    --titreGris: #969696;

    /* Dimensions*/
    --headerHauteur: 5rem;
    --bandeauHauteur: 24rem;
    --mobileVH: 0;  /* je calcule le VH à cause des navbar sur IOS*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Permet de coller le footer toujours en bas*/
    height: 100%;   
    /* font-size: 62.5%; -> Passe le rem à 62.5% de sa valeur*/
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    /* body est un enfant de html - il fait  100% de son parent (html), et permet de coller le footer en bas */
    min-height: 100%;
}

/*****************************/
/* Interface
/*****************************/
.btn-submit {
    font-size: 1rem;
    padding: 1rem 0;
    background-color: var(--fondBase);
    color: white;
    border-radius: 3rem;
    border: none;
    outline: none;
    box-shadow: 0px 9px 23px rgba(0, 0, 0,0.25);
    cursor: pointer;
}

.lien-bouton {
    font-size: 1rem;
    padding: 1rem 3.75rem;
    background-color: var(--fondBase);
    color: white;
    border-radius: 3rem;
    border: none;
    outline: none;
    text-decoration: none;
    box-shadow: 0px 9px 23px rgba(0, 0, 0,0.25);
    transition: 0.3s;
}

.lien-bouton:hover {
    background-color: #0b67b3;
}


/*****************************/
/* HEADER
/*****************************/
header {
    width: 100%;
    height: var(--headerHauteur);
    background: var(--headerGradient);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    margin-left: 7rem;
}

.logo a {
    text-decoration: none;
}

.logo h1 {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

.logo h1 span {
    color: var(--orangeBase);
    font-weight: 900;
}

.connect {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19rem;
    height: 100%;
}

.connect a {
    font-size: 1rem;
    color: white;
    text-decoration: none;
    border-radius: 3.5rem;
    padding: 0.5rem 2.2rem;
    transition: box-shadow 0.2s linear;
    /* Transition ne fonctionne pas sur border, sauf si border est déjà déclaré ici */
}

.connect a:hover {
    /* border: 1px solid #fff; */
    box-shadow: 0 0 0 0.125rem #fff;
}

.connect img {
    width: 2rem;
    display: none;
}


/*****************************/
/* BANDEAU
/*****************************/
.bandeau-contenu, .bandeau-sign {
    width: 100%;
    height: var(--bandeauHauteur);
    background: var(--headerGradient);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3rem;
}

.bandeau-sign {
    --bandeauHauteur: 10rem;
}

.bandeau-contenu img {
    width: 22rem;
    margin-right: 4rem;
}

.bandeau-lib {
    color: white;
}

.bandeau-lib h3 {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: 0.2rem;
    margin-bottom: 1.25rem;
}

.bandeau-lib p {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 2.2rem;
}


/*****************************/
/* WAVE
/*****************************/
.wave {
    /* position: absolute; */
    /* bottom: 0;
    left: 0; */
    width: 100%;
    overflow: hidden;
    line-height: 0;
    /* transform: rotate(180deg); */
    background: var(--headerGradient);
}

.wave svg {
    position: relative;
    display: block;
    width: calc(126% + 1.3px);
    height: 172px;
}

.wave .shape-fill {
    fill: #fff;
}


/*****************************/
/* MAIN
/*****************************/
main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
}

.main__container {
    width: 80%;
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem;
}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4rem;
}

/*  CERCLES  */
.cercle {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset .2em -.2em rgba(0, 0, 0, .2);
    margin-bottom: 1.25rem;
}

#cercle1 {
    background-color: #FF6584;
}

#cercle2 {
    background-color: #FFA363;
}

#cercle3 {
    background-color: #9BCA35;
}

#cercle4 {
    background-color: var(--fondBase);
}

/*  Titre  */
section h3 {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1.2px;
    margin-bottom: 1.25rem;
}

.section__text p {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--pColor);
    text-align: center;
} 

section a {
    margin-top: 5rem;
}

/*xxxxxxxxxxxxxxxxx*/


/*****************************/
/* FOOTER
/*****************************/
footer {
    background-color: var(--footerColor);
    height: 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer p {
    color: white;
    font-size: .9rem;
    text-align: center;
}

/*****************************/
/* MEDIA
/*****************************/
@media (max-width: 800px) {

    /*****************************/
    /* HEADER
    /*****************************/
    header {
        --headerHauteur: 4rem;
    }

    .logo {
        margin-left: 3rem;
    }

    .logo h1 {
        font-size: 1.5rem;
    }

    .connect {
        width: auto;
        margin-right: 0.8rem;
    }
    
    .connect a > div {
        display: none;
    }

    .connect a:hover {
        box-shadow: 0px 0px 0px 0px #fff;
    }
    
    .connect img {
        display: unset;
    }

    /*****************************/
    /* BANDEAU
    /*****************************/
    .bandeau-contenu {
        align-items: center;
        flex-direction: column;
        --bandeauHauteur: 30rem;
    }
    
    .bandeau-contenu img {
        width: 15rem;
        margin-right: 0;
        margin-bottom: 3rem;
    }

    .bandeau-lib {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .bandeau-lib h3 {
        font-size: 2rem;
    }

    .bandeau-lib p {
        font-size: 1rem;
    }

    /*****************************/
    /* WAVE
    /*****************************/
    .wave svg {
        width: calc(171% + 1.3px);
        height: 180px;
        height: 120px;
    }

    /*****************************/
    /* MAIN
    /*****************************/
    .main__container {
        width: 90%;
    }

}

@media (max-height: 600px) {

    .btn-submit {
        font-size: 1rem;
        padding: 0.8rem 0;
    }

}