/*
======================
FEUILLE DE STYLES CSS
Auteur: Anchyse Kilian
Date : Septembre 2017
=======================
*/
@import "grid.css";
@import "form.css";
@import "yc_custom.css";

body {
    margin: 0;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
}

p {
    font-family: 'Tahoma', sans-serif;
    font-size: 14pt;
    color: #878286;
    line-height: 18px;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 32pt;
    color: white;
    font-weight: lighter;
    margin: 0;
    margin-top: 20px;
}

h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    color: white;
    font-weight: lighter;
    margin: 0;
}

h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 9pt;
    color: white;
    font-weight: lighter;
}

h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 32pt;
    color: #535057;
    font-style: italic;
    margin: 0;
}

h5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16pt;
    color: white;
    line-height: 0;
    margin-top: 50px;
}


#header {
    width: 100%;
    height: 200px;
    margin-right: auto;
    margin-left: auto;
    background-color: #545658;
}

    #logo {
        width: 15%;
        height: 200px;
        float: left;
    }

    #presentation {
        width: 25%;
        height: 200px;
        float: left;
        margin-left: 5%;
        margin-right: 2%;
        display: block;
    }

    #menu {
        width: 53%;
        height: 200px;
        float: left;
        text-align: center;
    }

        #menu ul {
            width : 93%;
            padding-top : 65px;
            list-style-type : none;
        }

        #menu ul li {
            float : left;
            display : inline;
            padding : 0 0.7em;
            text-decoration: none;
        }

        #menu a {
            font-size: 10pt;
            font-family: 'Open Sans', sans-serif;
            font-weight: lighter;
            color: white;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 10px;
            transition-property: color;
            transition-duration: 0.5s;
        }
        #menu a:hover {
            color: #A8CDFF;
        }

        #menu a:active {
            color: black;
        }

    #hamburger_logo {
        width: 50px;
        height: 50px;
        top: 20px;
        right: 150px;
        position: absolute;
        display: none;
    }

        #menu-accordeon {
            width: 180px;
            height: auto;
            padding:0;
            margin:0;
            list-style:none;
            text-align: right;
        }

            #menu-accordeon ul {
                padding: 0;
                margin: 0;
                list-style: none;
                text-align: center;
            }

            #menu-accordeon li li {
                max-height:0;
                overflow: hidden;
                transition: all .5s;
                background: #444;
                box-shadow: none;
                border:none;
                margin:0
            }

            #menu-accordeon a {
                display:block;
                text-decoration: none;
                color: #fff;
                padding: 8px 0;
                font-family: verdana;
                font-size:1.2em
            }

            #menu-accordeon ul li a, #menu-accordeon li:hover li a {
                font-size:1em
            }

            #menu-accordeon li:hover {
                background: #999
            }

            #menu-accordeon li li:hover {
                background: #999;
            }

            #menu-accordeon li:hover li {
                max-height: 15em;
            }

#bienvenue {
    width: 61%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: center;
}

    #bienvenue_suite {
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

#prestations {
    width: 70%;
    height: 730px;
    margin-left: auto;
    margin-right: auto;
}

    #equipe_service_publications {
        width: 68%;
        height: auto;
        float: left;
        text-align: center;
        margin-bottom: 20px;
    }

        #equipe_service {
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            height: 310px;
        }

            #equipe {
                width: 50%;
                height: 220px;
                float: left;
                text-align: center;
            }

                #equipe_640 {
                    width: 320px;
                    height: 220px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 20px;
                    text-align: center;
                    display: none;
                }

                .equipe_texte {
                    width: 90%;
                    height: 145px;
                    margin-right: auto;
                    margin-left: auto;
                    margin-top: 10px;
                    text-align: left;
                }

                    .equipe_texte p {
                        font-family: Tahoma, sans-serif;
                        font-size: 9pt;
                        color: #545658;
                        line-height: 16px;
                    }

            #services {
                width: 50%;
                height: 290px;
                float: left;
                text-align: center;
            }

                #services_640 {
                    width: 320px;
                    height: 290px;
                    margin-left: auto;
                    margin-right: auto;
                    text-align: center;
                    display: none;
                }

                .service_texte {
                    width: 90%;
                    height: 145px;
                    margin-right: auto;
                    margin-left: auto;
                    margin-top: 10px;
                    margin-bottom: 15px;
                    text-align: left;
                }

                    .service_texte p {
                        font-family: Tahoma, sans-serif;
                        font-size: 9pt;
                        color: #545658;
                        line-height: 16px;
                    }

                .service_image {
                    width: 90%;
                    height: auto;
                    margin-right: auto;
                    margin-left: auto;
                    text-align: left;
                }

    #publications_640 {
        width: 100%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        display: none;
        margin-bottom: 20px;
    }

    .publications {
        width: 95%;
        height: 143px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 10px;
        position: relative;
        text-align: left;
    }

        .publications_image {
            width: auto;
            height: auto;
            float: left;
            text-align: left;
            margin-right: 5px;
        }

        .publications p {
            font-family: Tahoma, sans-serif;
            font-size: 9pt;
            color: #545658;
            line-height: 14px;
            margin-top: 0px;
        }

        .lire_plus {
            width: auto;
            height: auto;
            float: left;
            margin-left: 139px;
            text-align: left;
            bottom: 0;
            position: absolute;
        }

            .lire_plus a {
                font-family: Tahoma, sans-serif;
                font-size: 13pt;
                color: #545658;
                text-decoration: none;
                margin-top: 0px;
                margin-bottom: 0px;
                transition-property: color;
                transition-duration: 0.5s;
            }

            .lire_plus a:hover {
                color: #A8CDFF;
            }

    #horaire_expertise {
        width: 32%;
        height: auto;
        float: left;
        text-align: center;
    }

        #horaire {
            width: 95%;
            margin-left: 2.5%;
            float: left;
            height: 340px;
            background-color: #808185;
            margin-bottom: 20px;
        }

            .horaire_titre {
                width: 100%;
                float: left;
                height: 40px;
                text-align: center;
            }

            .horaire_texte_1 {
                width: 32%;
                margin-left: 18%;
                float: left;
                margin-top: 25px;
                height: 210px;
                text-align: left;
            }

                .horaire_texte_1  p {
                    font-family: Tahoma, sans-serif;
                    font-size: 12pt;
                    color: white;
                    line-height: 30px;
                }

            .horaire_texte_2 {
                width: 32%;
                margin-right: 18%;
                float: right;
                margin-top: 25px;
                height: 210px;
                text-align: right;
            }

                .horaire_texte_2  p{
                    font-family: Tahoma, sans-serif;
                    font-size: 12pt;
                    color: white;
                    line-height: 30px;
                }

    .expertise {
        width: 90%;
        height: auto;
        margin-left: 5%;
        float: left;
        text-align: left;

    }

        .expertise a {
            font-size: 12.5pt;
            display: block;
            font-family: Tahoma, sans-serif;
            color: #545658;
            text-decoration: none;
            line-height: 35px;
            transition-property: color;
            transition-duration: 0.5s;
        }
        .expertise a:hover {
            color: #A8CDFF;
        }

#horaire_expertise_940 {
    width: 640px;
    height: 340px;
    margin-left: auto;
    margin-right: auto;
    display: none;
}

    #horaire_940 {
        width: 320px;
        float: left;
        height: 340px;
        background-color: #808185;
        margin-bottom: 20px;
    }

    #expertise_940 {
        width: 320px;
        float: left;
        height: 340px;
        margin-bottom: 20px;
        text-align: center;
    }

#notre_expertise {
    width: 60%;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: left;
}

    #notre_expertise h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 25pt;
    color: #545658;
    font-weight: normal;
    margin-bottom: 40px;
}

    #notre_expertise p {
    font-family: 'Tahoma', sans-serif;
    font-size: 14pt;
    color: #878286;
    margin:0;
}

#services_all {
    width: 60%;
    height: 530px;
    margin-left: auto;
    margin-right: auto;
}

    .service_boite {
        width: 32%;
        height: auto;
        float: left;
        margin-bottom: 20px;
}

    .service_boite_centre {
        width: 32%;
        height: auto;
        margin-right: 2%;
        margin-left: 2%;
        margin-bottom: 20px;
        float: left;
}

    .service_boite_texte {
        width: 90%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

        .service_boite_texte p {
            font-family: Tahoma, sans-serif;
            font-size: 9pt;
            color: #545658;
            line-height: 16px;
            margin: 0;
        }

        .service_boite_texte a {
            font-family: Tahoma, sans-serif;
            font-size: 12pt;
            text-decoration: underline;
            color: #545658;
            line-height: 40px;
            margin: 0;
        }

#contactez_nous {
    width: 60%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
    text-align: right;
}

.contact_onglet {
    width: 60%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: left;
}

    .contact_onglet h1 {
        font-family: 'Open Sans', sans-serif;
        font-size: 25pt;
        color: #545658;
        font-weight: normal;
    }

#contact_all {
    width: 1000px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

    #contact_adresse {
        width: 66%;
        height: auto;
        float: left;
        margin-right: 2%;
    }

    #contact_adresse_suite {
        width: 96%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
        margin-top: 10px;
    }

        .image1 {
            display: block;
        }

        .image2 {
            display: none;
        }

        #contact_adresse_suite p {
            font-family: Tahoma, sans-serif;
            font-size: 13pt;
            color: #545658;
            line-height: 16px;
            margin-bottom: 30px;
        }

    #contact_telephone {
        width: 32%;
        height: auto;
        float: left;
    }

        .contact_telephone_suite {
            width: 96%;
            height: auto;
            margin-right: auto;
            margin-left: auto;
            margin-top: 10px;
            text-align: center;
        }

            .contact_telephone_suite p {
                font-family: Tahoma, sans-serif;
                font-size: 18pt;
                color: #545658;
                line-height: 16px;
                margin-bottom: 55px;
        }

#liens_all {
    width: 60%;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 250px;
}

#flux_all {
    width: 80%;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}


input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 2px 0;
    display: inline-block;
    box-sizing: border-box;
    background-color: #dfdada;
    border: none;
}

input[type=submit] {
    width: 100px;
    float: right;
    background-color: #7f8184;
    color: white;
    padding: 15px 19px;
    margin-right: 3px;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    color: #A8CDFF;
}


textarea {
    background-color: #dfdada;
    margin: 2px 0;
    background-color: #dfdada;
    border: none;
    padding: 12px 20px;
    font-family: arial;
}

#publications_all {
    width: 60%;
    height: auto;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 500px;
}

#publications_all a {
    font-family: 'Tahoma', sans-serif;
    font-size: 14pt;
    color: #878286;
    line-height: 18px;
    text-decoration: underline;
}

#mentions_all {
    width: 60%;
    height: auto;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

    #mentions_all p {
        font-family: Tahoma, sans-serif;
        font-size: 14pt;
        color: #545658;
        line-height: 22px;
    }


#footer {
    width: 100%;
    height: auto;
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    text-align: center;
    font: normal 18px sans-serif;
    padding-top: 22px;
    padding-bottom: 22px;
}

    #footer h1 {
        font-family: 'Open Sans', sans-serif;
        font-size: 20pt;
        color: white;
        font-weight: bold;
    }

    #footer p {
        color:  #8f9296;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 0;
    }

    #footer a {
        display:inline-block;
        text-decoration: none;
        color:  #8f9296;
        font-size: 14px;
        margin: 0;
    }

#footer-links {
    width: 100%;
    height: auto;
}

#footer-links a {
    display:inline-block;
    text-decoration: none;
    color: white;
    padding : 0 0.5em;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    transition-property: color;
    transition-duration: 0.5s;
}

#footer-links a:hover {
    color:#A8CDFF;
}

.container{
    width: 61%;
    height: auto;
    margin: 0 auto;
}
.card, .card h2{
    color:  #878286;
}
.columns-2{
    display: grid;
    grid-template-columns: auto auto;
}
.columns-2 .column{}

.login-box{
    width:40%;
    margin:2rem auto;
}
.login-title{
    font-size:1.2em;
    font-weight: bold;
    display: block;
    padding-bottom: .8em;
}

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

    #services_all {
        width: 100%;
    }

    #contactez_nous {
        width: 100%;
    }

    #liens_all {
        width: 100%;
    }

    #flux_all {
        width: 100%;
    }
}

@media screen and (max-width:1350px) {
    #menu {
        width: 51%;
    }

    #presentation {
        width: 29%;
        margin-right: 0%;
    }

    #prestations {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
}
}

@media screen and (max-width:1135px) {
    #menu {
        width: 63.5%;
    }

    #presentation {
        width: 36.5%;
        margin-left: 0%;
    }

    #logo {
        display: none;
    }

}

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

    #contact_all {
        width: 100%;
        height: 1100px;
    }

    #contact_telephone {
        width: 320px;
        float: none;
        margin-right: auto;
        margin-left: auto;
    }

    #contact_adresse {
        width: 660px;
        float: none;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 20px;
    }
}


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

    #hamburger_logo {
        display: block;
    }

    #menu {
        display: none;
    }

    #presentation {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width:940px) {
    #horaire_expertise {
        display: none;
    }

    #equipe_service_publications {
        width: 100%;
    }

    #horaire_expertise_940 {
        display: block;
    }

    #prestations {
        height: 1080px;
    }
}
@media screen and (max-width:880px) {

    .service_boite {
        width: 320px;
        margin-right: 2%;
        margin-left: 2%;
    }

    .service_boite_centre {
        width: 320px;
    }

    #liens_all {
        width: 100%;
        height: 280px;
    }

    #flux_all {
        height: 1200px;
    }
}

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

    .service_boite {
        float: none;
        margin-right: auto;
        margin-left: auto;
    }

    .service_boite_centre {
        float: none;
        margin-right: auto;
        margin-left: auto;
    }

    #services_all {
        height: 1550px;
    }

    #notre_expertise {
        width: 100%;
        height: auto;
    }

    #liens_all {
        height: 530px;
    }

    #flux_all {
        height: 1800px;
    }
}

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

        #contact_adresse {
        width: 100%;
        float: none;
        margin-right: auto;
        margin-left: auto;
    }
}


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

    #bienvenue {
    width: 95%;
    }

    #equipe_service_publications {
        display: none;
    }

    #equipe_640 {
        display: block;
    }

    #services_640 {
        display: block;
    }

    #publications_640 {
        display: block;
    }

    #horaire_expertise_940 {
        height: 700px;
        width: 100%;
    }

    #horaire_940 {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    #expertise_940 {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
    }

    #prestations {
        height: 1650px;
    }

    h4 {
        font-size: 22pt;
    }

    p {
        font-family: 'Tahoma', sans-serif;
        font-size: 13pt;
        color: #878286;
        line-height: 18px;
}
}

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

    h1 {
        font-size: 20pt;
    }

    h2 {
    font-size: 8pt;
    }

    h3 {
    font-size: 6pt;
    }

    #header {
        height: 135px;
    }
}

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

    .image1 {
        display: none;
    }

    .image2 {
        display: block;
    }
}