/*** IMPORTATION DES POLICES EXTERNES ***/
@font-face{
    font-family: kaushan;
    src: url("../polices/KaushanScript-Regular.otf");
}
@font-face{
    font-family: josefin;
    src: url("../polices/JosefinSans-Light.ttf") format("truetype");
}
@font-face {
    font-family: cooperHewitt;
    src: url("../polices/CooperHewitt-Book.otf");
}
@font-face{
    font-family: cooperHewitt_gras;
    src: url("../polices/CooperHewitt-Bold.otf");
}

/*** GENERAL ***/
body, main, div, button, a, span, p, section, aside, header, footer, article, nav, img, h1, h2, form, input, label
{
/*
    margin: 2px;
    border: cornflowerblue solid 2px;
*/
    font-family: "cooperHewitt", sans-serif;

}

/* COULEURS DE LA PALETTE */
span /* que j'utilise jamais */
{
    color: #2B2E4A;
    color: #E84545;
    color: #903749;
    color: #53354A;

    color: #7451EB;
    color: #13E29B;
}


mark
{
    color: #7451EB;
    font-weight: bold;
    background: none;
}
/* POUR CLEAN LES ANCRES */
a
{
    text-decoration: none;
    color: inherit;
}
a:visited
{
    color: inherit;
}

/* TOUT POUR STRUCTURE */
body
{
    display: flex;
    background-color: whitesmoke;
    margin: 0;
}
main
{
    width: 82.5%;

    color: #2B2E4A;
}
main section
{
    min-height: 100px;
}

h1
{
    text-align: center;
    font-size: 2.5em;
}
h2
{
    text-align: center;
    margin-left: 30px;
}

/* POUR LA NAV */
nav
{
    position: fixed;
    width: 12.5%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    background-color: #53354A;
    color: whitesmoke;

    text-align: center;
    z-index: 9;

    /*transition: width 2s, height 2s;*/
}
nav div
{
    padding: 10px 0;

    margin-left: 25%;
    text-align: left;

    cursor: pointer;
}
nav > div:hover
{
    color: #53354A;
    background-color: whitesmoke;
}
div#fausseNav
{
    width: 12.5%;
}

/* POUR LE FOOTER */
footer
{
    position: fixed;
    width: 5%;
    height: 100%;

    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
div#fauxFooter
{
    width: 5%;
}

/* CLASSES */
.section_A
{
    /* RIEN POUR LE MOMENT */
}
.section_B
{
    background-color: #903749;
    color: whitesmoke;
    border-radius: 0 50px 50px 0;
    padding: 10px;
    margin-right: 20px;
}
.boutonNavClair
{
    background-color: whitesmoke;
    color: #53354A;
}
/*** FAUSSE CLASSE POUR LE PLACEMENT DES TEXTES EN DIFFERENTES LANGUES ***/
.texte
{

}



/* POUR LE FOOTER */
footer a
{
    display: flex;
    aspect-ratio: 1/1;
    margin-left: 10%;
    margin-right: 10%;
}
footer a:last-child
{
    margin-bottom: 100px;
}
footer img
{
    width: 75%;
    margin: auto;
    aspect-ratio: 1/1;
}
/****************** SERIE DE MISES EN FORME NOMINATIVES POUR BACKGROUND IMAGES DES ANCRES AVEC RS DANS FOOTER ******/
a#ancreFacebook
{
    background: url("../images/logos_RS/facebook_logo.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreFacebook:hover
{
    background: url("../images/logos_RS/logo_facebook_couleur.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreLinkedin
{
    background: url("../images/logos_RS/linkedin_logo.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreLinkedin:hover
{
    background: url("../images/logos_RS/linkedin_logo_couleur.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreInstagram
{
    background: url("../images/logos_RS/instagram_logo.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreInstagram:hover
{
    background: url("../images/logos_RS/logo_instagram_couleur.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreYoutube
{
    background: url("../images/logos_RS/youtube_logo.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreYoutube:hover
{
    background: url("../images/logos_RS/logo_youtube_couleur.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreTwitter
{
    background: url("../images/logos_RS/twitter_logo.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}
a#ancreTwitter:hover
{
    background: url("../images/logos_RS/logo_twitter_couleur.png") no-repeat;
    background-size: 100%;
    transition: background 0.5s;
}










/*** TEST DE RESPONSIVE ***/
@media (max-width: 1024px) {

    body
    {
        flex-direction: column;
    }

    main
    {
        width: 100%;
    }

    /* CORRIGER NAV ET FAUSSE NAV */
    nav
    {
        width: 100%;
        top: 0;
        height: 150px;
        flex-direction: row;

        /*transition: width 2s, height 2s;*/
    }
    nav div
    {
        padding: 2px;
        margin: 0;
        display: flex;
    }
    div#fausseNav
    {
        width: 100%;
        height: 150px;
    }

    /* CORRIGER FOOTER ET FAUX FOOTER */
    footer
    {
        width: 100%;
        height: 100px;
        bottom: 0;

        flex-direction: row;
        background-color: whitesmoke;
    }
    div#fauxFooter
    {
        width: 100%;
        height: 100px;
    }
    /* TRUC A MODIFIER */
    footer a
    {
        height: 80%;
        margin: auto 0;
    }

    /* MODIF SUR CLASSES ET AUTRES */
    .section_B
    {
        border-radius: 0;
    }


}