/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 3, 2022 */

/*CE FICHIER CSS EST EXCLUSIVEMENT POUR CE QUI EST COMMUN A TOUTES LES PAGES
Il contiendra les styles communs à toutes les pages, à savoir les polices, les tailles de textes, le HEADER et le FOOTER
Il n'est pas nécéssaire de recopier son contenu sur les autres fichier CSS
 */

@font-face {
    font-family: 'Astral Sisters';
    src: url('../Ressources/POLICES/Astral_Sister/astral_sisters-webfont.woff2') format('woff2'),
    url('../Ressources/POLICES/Astral_Sister/astral_sisters-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Louis George Café';
    src: url('../Ressources/POLICES/Louis_George_Cafe/louis_george_cafe-webfont.woff2') format('woff2'),
    url('../Ressources/POLICES/Louis_George_Cafe/louis_george_cafe-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Louis George Café';
    src: url('../Ressources/POLICES/Louis_George_Cafe/louis_george_cafe_bold-webfont.woff2') format('woff2'),
    url('../Ressources/POLICES/Louis_George_Cafe/louis_george_cafe_bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

body {
    font-family: "Louis George Café", Arial, sans-serif;
    font-size: 20px;
}

h1 {
    font-family: "Astral Sisters", Arial, sans-serif;
    font-size: 4.5em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 3em;
    font-weight: bold;
}
/*Les h3 sont des textes de niveau 1 par souci de taille*/
h3 {
    font-size: 1.8em;
}

p,li {
    font-size: 1.2em;
}

header {
    background: #d0e1f9;
    padding: 1em;
    margin: 1em;
    box-shadow: #283655 0 2.5px 8px;
}

header > nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    align-items: center;
}

.dropdown {
    position: relative;
}

.dropdown > button {
    padding: 0.5em 1.5em 0.4em 1.5em;
    background: rgba(255, 255, 255, 0.73);
    border-radius: 50px;
    font-family: "Louis George Café", Arial, sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
    background: #283655;
    color: white;
    margin: 0 1em;
    border: solid 3px #283655;

    transition-duration: 100ms;
}

.dropdown > button:hover {
    border: solid #283655;
    color: #283655;
    background-color: white;
    transform: scale(1.05);
    transition-duration: 100ms;
}

.dropdown-menu {
    position: absolute;
    top: 1em;
    left: 5em;
    width: 88%;
    text-align: center;
}

.titre-dropdown {
    font-size: 1.2em;
}

.dropdown-menu > li {
    color: black;
    text-decoration: none;
    font-family: "Louis George Café", Arial, sans-serif;

    transition-duration: 100ms;
}

.dropdown-menu > li > a:hover {
    background-color: #d0e1f9;
    color: #283655;
    padding: 4px;
    border-radius: 4px;
    transition-duration: 100ms;
}

footer {
    background: #283655;
    font-size: 0.8em;
    color: white;
    padding: 1em;
    margin-bottom: 1.3em;
    box-shadow: #283655 0 2.5px 8px;

}

footer > div > section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: end;
    align-items: start;
}

footer > div > section > * {
    margin: 1em;
}

footer > div + div > section {
    justify-content: start;
}

footer > div > section > img {
    height: 6.5em;
    margin-bottom: 1em;
}

footer > div > section > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: start;

}

footer > div > section > ul > li {
    margin-bottom: 1em;
}

button {
    font-size: 1.2em;
    padding: 0.5em 1.5em 0.4em 1.5em;
    border: 2px solid Black;
    background: rgba(255, 255, 255, 0.73);
    border-radius: 50px;
    font-family: "Louis George Café", Arial, sans-serif;
    text-transform: uppercase;
    transition-duration: 100ms;
}

button:hover {
    background-color: #283655;
    color: #d0e1f9;
    border: solid #283655;
    transition-duration: 100ms;
}

nav > button {
    font-size: 1.2em;
    background: #283655;
    color: white;
    margin: 0 1em;
    border: solid 3px #283655;
    transition-duration: 100ms;
}

nav > button:hover {
    color: #283655;
    background-color: white;
    transform: scale(1.05);
    transition-duration: 100ms;
}

/*.dropbut {*/
/*    font-size: 1.2em;*/
/*    background: #283655;*/
/*    color: white;*/
/*    margin: 0 1em;*/
/*    border: solid 3px #283655;*/
/*    transition-duration: 100ms;*/
/*}*/

/*.dropbut:hover {*/
/*    color: #283655;*/
/*    background-color: white;*/
/*    transform: scale(1.05);*/
/*    transition-duration: 100ms;*/
/*}*/

strong {
    font-size: 1.1em;
}

a {
    color: white;
    text-decoration: none;
    transition-duration: 100ms;
}

a:hover {
    background-color: #d0e1f9;
    color: #283655;
    padding: 4px;
    border-radius: 4px;
    transition-duration: 100ms;
}

/*nav > button > a:hover {*/
/*    background-color: white;*/
/*    color: #283655;*/
/*}*/

@media screen and (max-width: 576px) {

    header > section > nav > div > button:hover {
        background: none;
    }

    .hmobile > section > nav {
        box-shadow: none;
    }

    /*.hmobile > nav > button > a:hover {*/
    /*    background-color: white;*/
    /*    color: #283655;*/
    /*}*/

    .hmobile > section > nav > div > button > img {
        height: 3em;
    }

    .hmobile > section > nav > div > button:hover {
        border: solid black;
    }

    .dropdown-toggle {
        position: relative;
        left: -0.8em;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 2.3em;
    }

    .dropdown {
        margin: 0.25em 0;
    }

    .hmbutton {
        font-size: 1.2em;
        color: white;
        background-color: #283655;
        border-radius: 40px;
        text-decoration: none;
        border: solid #283655;
    }

    /*.hmbutton:hover {*/
    /*    color: #283655;*/
    /*}*/

    /*.hmbutton > a:hover {*/
    /*    background-color: white;*/
    /*    color: #283655;*/
    /*}*/

    footer > section {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    footer > section > img {
        height: 5em;
        margin-bottom: 1em;

    }
    footer > .presentation {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/*@media screen and (min-width: 576px) and (max-width: 768px) {*/
/*@media screen and (aspect-ratio: 18.5/9) and (aspect-ratio: 20/9) {*/

/*    .hmobile > section > nav {*/
/*        box-shadow: none;*/
/*    }*/

/*    .hmobile > section > nav > div > button > img {*/
/*        height: 3em;*/
/*    }*/

/*    .hmobile > section > nav > div > button:hover {*/
/*        border: solid black;*/
/*    }*/

/*    .hmbutton {*/
/*        color: white;*/
/*        background-color: #283655;*/
/*        border-radius: 20px;*/
/*        text-decoration: none;*/
/*        border: solid #283655;*/
/*    }*/

/*    .hmbutton:hover {*/
/*        color: #283655;*/
/*    }*/

/*    footer > section {*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        align-items: start;*/
/*    }*/

/*    footer > section > img {*/
/*        height: 5em;*/
/*        margin-bottom: 1em;*/

/*    }*/
/*    footer > .presentation {*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        align-items: center;*/
/*    }*/
/*}*/