// DEBUT Nouvelle page FAQ - Mai 2018 //

.internal-page.page-faq {
    h4 {
        .font-size(18) !important;
        float: none;
        margin-top: 0;

        span {
            .font-size(18) !important;
        }
    }

    .faq-recherche {
        position: relative;
        margin: 15px 0;

        .faq-champs-recherche {
            position: relative;
            margin: 0 auto;
            max-width: 600px;
        }

        input {
            border-radius: 60px;
        }

        .bar {
            width: auto;
            margin: 0 15px;
        }

        .btn-recherche {
            position: relative;
            display: block;
            padding: 12px 22px !important;
            .font-size(14);
            margin-top: 15px;
        }

        .faq-datalist {
            padding: 15px 0;
            display: inline-block;
            max-width: 800px;
            text-align: left;

            li {
                font-family: 'Quicksand', sans-serif;
                .font-size(14);
                font-weight: 700;

                &:last-child {
                    border-bottom: none;
                }

                a {
                    position: relative;
                    display: block;
                    padding: 15px 75px 15px 25px;
                    margin: 10px 0;
                    border-radius: 60px;
                    background: darken(white, 2%);

                    &:after {
                        position: absolute;
                        content: "";
                        top: 50%;
                        transition: right ease .25s;
                        right: 25px;
                        margin-top: -8px;
                        width: 28px;
                        height: 16px;
                        background: url(../images/sprite_faq.png) no-repeat;
                        background-position: 0px 0px;
                        background-size: 200px 100px;
                    }

                    &:hover {
                        color: @pink;
                        background: darken(white, 4%);

                        &:after {
                            background-position: 0px -16px;
                            transition: right ease .25s;
                            right: 20px;
                        }
                    }
                }
            }
        }
    }

    .faq-categories {
        margin-bottom: 45px;

        .categorie {
            display: block;
            max-width: 400px;
            margin: 15px auto;
            padding: 15px;
            border: solid 1px @faq-categorie-border;
            outline: 2px solid transparent;
            font-family: 'Quicksand', sans-serif;
            .font-size(18);
            font-weight: 700;

            span.icone-categorie {
                display: inline-block;
                //width: 50px;
                //height: 50px;
                background-repeat: no-repeat;
                background-position: left top;
                //background-size: 100px 50px;
                width: 75px;
                height: 75px;
                background-size: 150px 60px;
            }

            p {
                .font-size(18);
                font-weight: 700;
                margin-bottom: 0;
            }

            &:hover {
                background: darken(white, 2%);
                border: solid 1px @pink;
                outline: 2px solid @pink;
                color: @pink;

                span.icone-categorie {
                    background-position: right top;
                }

                p {
                    color: @faq-categorie-text-hover;
                }
            }
        }
    }

    .block-categories {
        padding: 20px;
        max-width: 360px;
        margin: 30px auto;

        .faq-categories {
            margin-bottom: 20px;

            .categorie {
                background: white;
                position: relative;
                padding-left: 80px;
                margin: 0 0 1px 0;
                max-width: none;
                .font-size(16);
                border: none;
                outline: none;

                p {
                    .font-size(16);
                }

                .icone-categorie {
                    position: absolute;
                    top: 50%;
                    margin-top: -25px;
                    left: 15px;
                }

                &:hover {
                    color: @pink;
                    background: darken(white, 2%);
                    border: none;
                    outline: none;
                }
            }

            li.selected {
                .categorie {
                    position: relative;
                    color: @pink;
                    background: darken(white, 3%);
                    border: none;
                    outline: none;

                    * {
                        color: @pink;
                    }

                    .icone-categorie {
                        background-position: right top;
                    }
                }
            }
        }

        .block-buttons {
            margin: 0;
            max-width: none;

            li {
                a {
                    .font-size(16);
                }
            }
        }
    }

    .faq-annexe {
        padding: 15px 0;

        h4 {
            margin-bottom: 15px;
        }

        #faq-voir-tout {
            position: relative;
            background: @border-g;
            color: @globaltext;
            padding: 20px 70px 20px 30px !important;
            .font-size(16);
            font-weight: 700;
            max-width: 330px;
            border: none;
            text-transform: none;
            text-align: left;

            &:after {
                position: absolute;
                content: "";
                top: 50%;
                transition: right ease .25s;
                right: 25px;
                margin-top: -8px;
                width: 28px;
                height: 16px;
                background: url(../images/sprite_faq.png) no-repeat;
                background-position: 0px 0px;
                background-size: 200px 100px;
            }

            &:hover {
                color: @globaltext;
                background: white;

                &:after {
                    transition: right ease .25s;
                    right: 20px;
                }
            }
        }
    }

    .faq-bulles {
        li {
            margin-bottom: 15px;

            a {
                position: relative;
                background: @white;
                font-family: 'Quicksand', sans-serif;
                display: block;
                padding: 20px 80px 20px 30px;
                border-radius: 60px;
                .font-size(16);
                font-weight: 700;

                &:after {
                    position: absolute;
                    content: "";
                    top: 50%;
                    transition: right ease .25s;
                    right: 25px;
                    margin-top: -8px;
                    width: 28px;
                    height: 16px;
                    background: url(../images/sprite_faq.png) no-repeat;
                    background-position: 0px 0px;
                    background-size: 200px 100px;
                }

                &:hover {
                    color: @pink;
                    background: darken(@white, 2%);

                    &:after {
                        background-position: 0px -16px;
                        transition: right ease .25s;
                        right: 20px;
                    }
                }
            }
        }
    }

    .block-buttons {
        margin: 0 auto 45px auto;
        max-width: 360px;

        li {
            margin-bottom: 1px;
            text-align: left;

            a {
                position: relative;
                background: @white;
                font-family: 'Quicksand', sans-serif;
                display: block;
                padding: 20px 30px 20px 75px;
                .font-size(16);
                font-weight: 700;

                &:before {
                    position: absolute;
                    content: "";
                    top: 50%;
                    margin-top: -15px;
                    left: 20px;
                    width: 30px;
                    height: 30px;
                }

                &:hover {
                    color: @pink;
                    background: darken(@white, 2%);
                }

                &.facebook-icon {
                    &:before {
                        background: url(../images/sprite_faq.png) no-repeat;
                        background-position: -100px 0px;
                        background-size: 200px 100px;
                    }
                }

                &.twitter-icon {
                    &:before {
                        background: url(../images/sprite_faq.png) no-repeat;
                        background-position: -140px 0px;
                        background-size: 200px 100px;
                    }
                }

                &.contact-icon {
                    &:before {
                        background: url(../images/sprite_faq.png) no-repeat;
                        background-position: -100px -57px;
                        background-size: 200px 100px;
                    }
                }
            }
        }
    }

    .faq-resultats-recherche {
        margin-bottom: 30px;

        .lien-question {
            position: relative;
            display: block;
            padding: 20px 15px;

            &:hover {
                background: darken(@white, 2%);
                color: @pink !important;

                * {
                    color: @pink !important;
                }

                .titre-question {
                    &:before {
                        border-left: 5px solid @pink;
                    }
                }
            }
        }

        .titre-question {
            position: relative;
            z-index: 2;
            font-family: 'Quicksand', sans-serif;
            display: block;
            .font-size(16);
            font-weight: 700;
            padding-left: 30px;

            &:before {
                position: absolute;
                top: 4px;
                left: 15px;
                width: 0;
                height: 0;
                content: "";
                border-left: 6px solid @globaltext;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
            }
        }

        .description-question {
            display: none;
            margin-top: 15px;
            position: relative;
            z-index: 2;
            padding-left: 15px;

            p {
                margin: 0;
                padding: 0;
            }

            * {
                display: inline;
            }
        }
    }

    &.page-interne-faq {
        .faq-recherche {
            .faq-datalist {
                position: absolute;
                top: 80px;
                left: 0;
                right: 0;
                z-index: 3;
                background: @white;
                border: @grey 1px solid;
                padding: 0;
                background-color: @white;
                overflow-x: hidden;
                max-height: 300px;
                -webkit-box-shadow: 0px 20px 60px 0px rgba(238,240,243,1);
                -moz-box-shadow: 0px 20px 60px 0px rgba(238,240,243,1);
                box-shadow: 0px 20px 60px 0px rgba(238,240,243,1);

                li {
                    a {
                        margin: 0;
                        border-radius: 0;
                        background: @white;

                        &:hover {
                            background: darken(@white, 2%);
                        }
                    }
                }
            }
        }

        .faq-bulles {
            li {
                margin: 0;

                a {
                    position: relative;
                    padding: 20px 15px 20px 30px;
                    border-radius: 0;
                    .font-size(16);

                    &:after {
                        position: absolute;
                        top: 32px;
                        left: 15px;
                        width: 0;
                        height: 0;
                        content: "";
                        background: none;
                        border-left: 6px solid @globaltext;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                    }

                    &:hover {
                        &:after {
                            border-left: 6px solid @pink;
                        }
                    }
                }
            }
        }

        .rounded-title {
            display: inline-block;
            padding: 5px 14px;
            background: @globaltext;
            color: @white;
            border-radius: 20px;
            font-family: 'Quicksand', sans-serif;
            font-weight: 700;
            margin: 30px 0 15px 0;


            &.rounded-title-pink {
                background: @pink;
            }
        }
    }

    &.more-faq {
        h4 {
            text-align: center;
        }
    }

    .faq-content-page {
        padding-bottom: 45px;

        h1, h2, h3, h4, h5, h6 {
            color: @globaltext !important;
            text-transform: initial !important;
            font-weight: 700 !important;
            display: block !important;
            float: none !important;
            width: auto !important;
            border: none !important;
            margin: 0 0 15px 0;
            padding: 0 !important;
        }

        h1 {
            .font-size(26) !important;
        }

        h2 {
            .font-size(24) !important;
        }

        h3 {
            .font-size(20) !important;
        }

        h4 {
            .font-size(18) !important;
        }

        h5 {
            .font-size(16) !important;
        }

        h6 {
            .font-size(15) !important;
        }

        p {
            .font-size(15);
            margin: 0 0 15px 0 !important;
            padding: 0 !important;
        }

        ul {
            margin: 0 0 15px 0 !important;
        }

        ul, li {
            list-style-type: disc;
            list-style-position: inside;
        }

        ul ul, ol ul {
            list-style-type: circle;
            list-style-position: inside;
            margin-left: 15px;
        }

        ol ol, ul ol {
            list-style-type: lower-latin;
            list-style-position: inside;
            margin-left: 15px;
        }

        iframe {
            display: block;
            width: 100%;
            max-width: 500px;
            margin: 15px auto;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        a {
            color: @pink;
            text-decoration: underline;

            &:hover {
                color: lighten(@pink, 10%);
            }
        }
    }
}

// FIN Nouvelle page FAQ - Mai 2018 //