html {
    margin: 0;
}

/* Image de fond */

    body {
        background-image: url(../../images/general/image_fond.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        margin: 0;
    }

/* Barre de menu */

    /* Fond noir */

        header {
            background-color: rgba(0,0,0,0.90);
            margin: 0px;
            margin-top: 15px;
            position: fixed;
            min-width: 100%;
            height: 111.078px;
        }

    /* Liens */

        nav {
            /* margin-top: 15.9925px; */
            height: 111.078px;
        }

        /* Liste de base */

            nav > ol {
                margin: 0;
                height: 111.078px;
                padding-left: 20px;
                list-style: none;
                padding: 0;
                text-align: center;
            }

            /* Enlever le fond bleu entre les liens quand ils sont sélectionnés */

                nav > ol::selection {
                    background: rgba(255, 255, 255, 0);
                }

            nav > ol > li {
                padding: 5px;
                display: inline-block;
                width: 10%;
                box-sizing: border-box;
                font-family: Maiandra GD;
                text-align: center;
                vertical-align: middle;
            }

            /* Logo */

                nav > ol > li:nth-of-type(5) > a {
                    padding: 0;
                }

                nav > ol > li > a > img {
                    max-width: 100%;
                }

                /* Enlever le fond bleu quand le logo est sélectionné */

                    nav > ol >li > a > img::selection {
                        background: rgba(255, 255, 255, 0);
                    }

        /* Liste dans la liste */

            /* "Avis et partenaires" */

                #dropdown > p {
                    color: white;
                    display: inline-block;
                    box-sizing: border-box;
                    padding-top: 30.539px;
                    padding-bottom: 30.539px;
                    margin: 0;
                    font-family: Maiandra GD;
                    font-size: 16px;
                    text-align: center;
                    vertical-align: middle;
                    line-height: 20px;
                }

                #dropdown > p:hover {
                    color: orange;
                }

                /* Liste */

                    li > ol {
                        background-color: rgba(0,0,0,0.90);
                        border-bottom-left-radius: 15px;
                        border-bottom-right-radius: 15px;
                        display: none;
                        margin-top: 5px;
                        padding-left: 15px;
                        padding-right: 15px;
                        padding-bottom: 5px;
                        list-style: none;
                        text-align: left;
                    }

                    li:hover {
                        cursor: pointer;
                    }

                    li:hover > ol {
                        display: block;
                        position: absolute;
                    }

                    li > ol > li {
                        box-sizing: border-box;
                        line-height: 25px;
                    }

                    li > ol > li > a {
                        font-size: 15px;
                        padding: 0;
                    }

        /* Liens de la barre de menu */

            a {
                font-size: 16px;
                text-decoration: none;
                padding-top: 30.539px;
                padding-bottom: 30.539px;
            }

            /* Enlever le fond bleu quand les liens sont sélectionnés */

                a::selection {
                    background: rgba(255, 255, 255, 0);
                }

            a:link {
                color: white;
            }

            a:visited {
                color: white;
            }

            a:hover {
                color: orange;
            }

/* Fin barre de menu */

/* Section */

    main > section {
        display: grid;
        grid-template-areas: none;
    }

/* Fin section */

/* Blocs noirs transparents/fond de texte */

    article {
        background-color: rgba(0,0,0,0.70);
        font-family: Maiandra GD;
        margin-top: 150px;
        margin-left: 200px;
        margin-right: 200px;
        border-radius:25px;
    }

/* Fin blocs noirs transparents/fond de texte */

/* Liste avec les images */

    ul {
        list-style: none;
        cursor: auto;
    }

    /* Enlever le fond bleu de la liste quand elle est sélectionnée */

        ul::selection {
            background: rgba(255, 255, 255, 0);
        }

    ul > li {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 15px;
        padding-bottom: 15px;
        display: inline-block;
        width: 30%;
        box-sizing: border-box;
        font-family: Maiandra GD;
        text-align: center;
        vertical-align: middle;
        cursor: auto;
    }

    /* Images */

        li > a > img {
            max-width: 75%;
        }

        li > a > img:hover {
            max-width: 78%;
        }

        /* Images plus petites */

            li > #petite > img {
                max-width: 90%;
            }

            li > #petite > img:hover {
                max-width: 93%;
            }

/* Fin liste */

/* Footer */

    /* Fond noir */

        footer {
            background-color: rgba(0,0,0,0.90);
            margin-top: 150px;
            padding-top: 10px;
            padding-bottom: 10px;
            display: grid;
            grid-template-columns: 28% 44% 28%;
            grid-template-rows: 0% 70% 30%;
        }

    /* Image 1 (Avantages jeunes) */

        #avantages {
            color: white;
            max-width: 30%;
            min-width: 30%;
            display: block;
            grid-column: 1;
            grid-row-start: 2;
            grid-row-end: span 2;
            justify-self: left;
            align-self: center;
            margin-left: 15%;
        }

    /* Image 2 (Logo) */

        #logo {
            color: white;
            max-width: 40%;
            min-width: 40%;
            display: block;
            grid-column: 1;
            grid-row-start: 2;
            grid-row-end: span 2;
            justify-self: right;
            align-self: center;
            margin-right: 5%;
        }

    /* Tél. et adresse mail */

        footer > p {
            color: orange;
            text-align: center;
            font-size: 21px;
            margin: 0;
            line-height: 42px;
            grid-column: 2;
            grid-row: 2;
            justify-self: center;
            align-self: center;
        }

        /* Enlever le fond bleu des paragraphes quand ils sont sélectionnés */

            p::selection {
                background: rgba(255, 255, 255, 0);
            }

    /* Copyright / lien conditions générales de vente */

        footer > p:nth-of-type(2) {
            color: white;
            text-align: center;
            font-size: 18px;
            margin: 0;
            line-height: 35px;
            grid-column: 2;
            grid-row: 3;
            justify-self: center;
            align-self: center;
        }

        /* "39" écrit en orange */

            footer > p span {
                color: orange;
                font-size: 18px;
            }

            /* Enlever le fond bleu quand "39" est sélectionné */

                footer > p span::selection {
                    background: rgba(255, 255, 255, 0);
                }

    /* Logo facebook */

        /* Lien */

            footer > a {
                cursor: auto;
                height: 50px;
                width: 50px;
                grid-column: 3;
                grid-row-start: 2;
                grid-row-end: span 2;
                justify-self: center;
                align-self: center;
            }
        
        /* Image logo */

            footer > a > img {
                color: white;
                display: block;
                margin: auto;
                cursor: pointer;
            }

/* Fin footer */