/* Table des couleurs */
    /* Noir - #050505 */
    /* Blanc - #EEF0F2 */
    /* Bleu principal - #289ed8 */
    /* Bleu marine - #23408e */
    /* Jaune annexe - #C1B24E */
/* Fin de la table des couleurs */

/* Tables des polices */
    /* Polices principales */
        /* Comfortaa - Textes */ @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
        /* Jost - Titre */ @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
    /* Fin des polices principales */
    /* Polices de secours */
        /* PdS 1 *//* Oswald */@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
        /* PdS 2 *//* sans-serif */
    /* Fin des polices de secours */
/* Fin de la table des polices */


/* Base du site */
*{
    color: #111;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    list-style-type: none;
    font-family: 'Comfortaa';
    cursor: url(images/cursorDefault.png) 16 16, default;
}
::selection{
    color: var(--bc);
    background-color: var(--bm);
}
h1, h2, h3, h4, h5, h6, p, span, li{
    cursor: url(images/cursorText.png) 16 16, text;
}
a, button{
    cursor: url(images/cursorLinks.png) 16 16, pointer;
}
:root{
    --bc: #289ed8;
    --bcf: #D7E6EF;
    --bm: #23408e;
    --ja: #C1B24E;
    --blanc: #EEF0F2;
    --noir: #050505;
    --nC: #222;
}
html{
    scroll-behavior: smooth;
    background-color: var(--blanc);
    overflow-x: hidden !important;
}
body{
    overflow-x:hidden;
}

/* Fin des bases */


/* Animation Triple bulle */
@keyframes tBRotate {
    0%{
        rotate: 0deg;
        margin: 0;
    }
    30%{
        margin: 10px 50px 20px 30px;
    }
    60%{
        margin: 20px 30px 50px 10px;
    }
    80%{
        margin: 50px 20px 30px 10px;
    }
    100%{
        rotate: 360deg;
        margin: 0px;
    }
}
@keyframes tBRotateMenu {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes TBR {
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
/* Fin de l'animation des triples bulles */

/* Footer */
.footer{
    background: linear-gradient(90deg, var(--bc) 50%, #9fc6e6 50%);
    border-top-right-radius: 50px;
}
footer{
    width: calc(100% - 6rem);
    min-height: 60svh;
    background-color: #255FA7;
    border-radius: 50px 50px 0px 0px;
    border: solid 3rem #255FA7;
    outline: solid 3rem var(--bm);
    border-bottom: none;
    box-sizing:border-box;
    margin-left: 3rem;
    z-index: 5;
}
.footerContainer{
    width: 100%;
    min-height: 60svh;
    border-radius: 50px 50px 0px 0px;
    background-color: var(--blanc);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
/* Titre */
.footerTitle{
    width: 100%;
    text-align: center;
    font-size: 42px;
    font-family: "Jost", "Comfortaa", sans-serif;
    font-weight: 300;
    margin-top: 10svh;
}
.titleFooter{
    font-family: "Jost", "Comfortaa", sans-serif;
    font-weight: 500;
    color: var(--bm);
    text-decoration: underline 2px var(--bm);
    transition: color 0.2s ease;
}
.titleFooter:hover{
    color: var(--bc);
}
/* Fin du titre */

/* Fenêtres */
.footerListElements{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.footerElement{
    background-color: #dfdfdf;
    width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    border-radius: 50px 50px 0px 0px;
}
.footerList{
    height: 20vh;
    width: 300px;
    border-radius: 50px 50px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}
footer li{
    margin-top: 10px;
    text-decoration: underline 2px transparent;
    transition: text-decoration 0.2s linear ;
}
footer li:hover{
    text-decoration: underline 2px var(--bm);
}
/* Titres*/
.footerElement h4{
    font-size: 22px;
    margin: 3vh 0vw 2vh 0vw;
    font-family: "Jost", "Comfortaa", sans-serif;
    font-weight: 400;
}
/* Fin du titre */

/* Lien */
.contactFooterLink{
    display: flex;
    width: 100%;
    background-color: var(--bm);
    justify-content: center;
    align-items: center;
    margin-top: 2vh;
    padding: 1vh 0vw;
    border-radius: 100px;
    color: var(--blanc);
    transition: background-color 0.5s linear, color 0.2s linear, box-shadow 0.5s linear;
}
.contactFooterLink:hover{
    background-color: var(--blanc);
    box-shadow: 12px 12px #289dd8a5, -7px -7px #289dd8a8, -12px 7px #233f8edb, 12px -7px #233f8ed4;
    color: var(--bm);
}
/* Fin du lien */
/* Fin des fenêtres */

/* RESPONSIVE */
@media screen and (max-width: 715px) {
    .footer{
        border-top-right-radius: 0px;
    }
}
@media screen and (max-width: 1000px) {
    .footerTitle{
        font-size: 36px;
        margin-bottom: 10svh;
    }

    .footerListElements{
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        gap: 50px;
    }
    .footerElement:first-child{
        width: 90%;
        border-radius: 0px 50px 50px 0px;
        margin-right: 10%;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 5svh 0vw;
    }
    .footerElement:first-child div{
        border-radius: 0px 50px 50px 0px;
        width: 65%;
    }
    .footerElement:last-child div{
        border-radius: 50px 0px 0px 50px;
        width: 65%;
    }
    .footerElement:last-child h4,
    .footerElement:first-child h4{
        font-size: 28px;
        width: 35%;
        text-align: center;    
    }
    .footerElement:last-child{
        width: 90%;
        border-radius: 50px 0px 0px 50px;
        margin-left: 10%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 5svh 0vw;
        margin-bottom: 10svh;
    }
}
@media screen and (max-width: 900px) {
    .footerElement:last-child h4,
    .footerElement:first-child h4{
        font-size: 22px;
    }
    .footerTitle{
        font-size: 30px;
    }
    footer{
        border-width: 2rem;
        outline-width: 2rem;
        margin-left: 2rem;
        width: calc(100% - 4rem);
    }
}
@media screen and (max-width: 600px) {
    footer{
        border-left: none;
        border-bottom: none;
        border-right: none;
        border-top: solid 20px #255FA7;
        background-color: #255FA7;
        width: 100% !important;
        margin-left: 0px !important;
        outline-width: 20px;
    }
    .footerElement{
        border-top: solid 15px var(--bm);
        border-bottom: solid 15px var(--bm);
        outline: solid 15px #255FA7;
    }
    .footerElement:first-child{
        border-right: solid 15px var(--bm);
    }
    .footerElement:last-child{
        border-left: solid 15px var(--bm);
    }
    .footerListElements{
        gap: 75px !important;
    }
}
@media screen and (max-width: 520px) {
    .footerElement:first-child,
    .footerElement:last-child{
        flex-direction: column;
        padding-top: 0px;
    }
    .footerElement:last-child h4,
    .footerElement:first-child h4{
        width: 100%;
        text-align: center;
    }
    /* First */
    .footerElement:first-child{
        align-items: start;
        border-radius: 0px 75px 75px 0px;
    }
    .footerElement:first-child .footerList{
        width: 90%;
    }
    /* Second */
    .footerElement:last-child{
        align-items: end;
        border-radius: 75px 0px 0px 75px;
    }
    .footerElement:last-child .footerList{
        width: 90%;
    }
}
/* FIN DU RESPONSIVE */
/* Fin du footer */

/* Animation bgk */
@keyframes bgkServ {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 0%;
    }
    100%{
        background-position: 0% 50%;
    }
}
/* Fin de l'animation bgk */