/* base.html */
/*
Body
    -->corps
        -->header
            -->logo
            -->navbar
                -->nav
*/

.body {
    display: grid;
    background: #e1e1e1;
    grid-template-columns: auto 1000px auto;
    grid-template-rows: 900px;
    grid-template-areas: ". corps .";
}

.corps {
    display: grid;
    grid-template-rows: 138px 735px 27px;
    /*grid-template-columns: 100px auto 100px;*/
    grid-template-columns: auto;
    grid-template-areas: "header"
                         "section"
                        "footer";
    grid-area: corps;
}

.header {
    display: grid;
    grid-area: header;
    /*border:  1px dashed black;*/
    background-color: #d6edff;
    grid-template-columns: auto;
    grid-template-rows: auto 30px;
    grid-template-areas: "zonelogo" "navbar";

}

.zonelogo {
    display: grid;
    /*grid-template-columns: 244px auto 120px;*/
    grid-template-columns: 244px auto 170px;
    grid-template-rows: auto;
    grid-template-areas: "logoladhyx . logotutelles";
    /*border: 1px dashed black;*/

}

.logotutelles {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1f 1fr;
    grid-template-areas: "logox logocnrs"
                            ". langue";
    grid-area: logotutelles;
    margin-top: 10px;
    margin-right: 10px;
    justify-items:center;
}
.logoladhyx {
    grid-area: logoladhyx;
    margin-left: 10px;
    margin-top: 10px;
}

.logocnrs {
    grid-area: logocnrs;
    padding-left: 1px;
}

.logox {
    padding-right: 1px;
    grid-area: logox;
}

.langue {
    grid-area: langue;
    line-height: 16.00px;
    font-family: "Tahoma", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: transparent;
    text-decoration: none;
    font-variant: normal;
    font-size: 13.3px;
}


.navbar {
    display: grid;
    grid-area: navbar;
    grid-template-rows:auto;
    grid-template-columns: 100px auto 100px;
    grid-template-areas: ". nav .";
}

.nav {
    display: flex;
    justify-content: space-between;
    flex-direction:row;
    grid-area: nav;
    font-family: "Trebuchet MS",sans-serif;
    font-size: 13px;
}

.nav > .dropdown {
    color: #777777;
    position:relative;
}
.nav > a {
    display: block;
    /*border-bottom: #5f3f3f;*/
    text-decoration: none;
    color: #777777;
    padding-right: 13px;
    padding-left: 13px;
    padding-top: 5px;
    border-bottom: 4px solid rgb(189, 112, 44);
}

.nav > a:hover {
    text-decoration: none;
    color: #777777;
}
.dropbtn > a, .dropbtn > a:hover {
    text-decoration: none;
    color: #777777;
}
.nav > a:hover {
    border-bottom: 4px solid rgb(31, 105, 140);
     /*cursor: pointer;*/
}
.nav .dropdown {
    border-bottom: 4px solid rgb(189, 112, 44);
    padding-right: 13px;
    padding-left: 13px;
    padding-top: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    /*margin-top: 10px;*/
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: white;
    z-index: 1;
    top: 30px;
    left:0px;
    /*right: 10px;*/
}

.dropdown-content >  a{
    margin: 5px;
    display: block;
    text-decoration: none;
    color: #777777;
    white-space: nowrap;

}

.dropdown-content >  a:hover {
    color: rgb(223, 99, 61);
    /*color: red;*/
}
.dropdown:hover .dropdown-content {
    display:block;
    text-align: center;
    /*background-color: red;*/
}

.nav .dropdown:hover {
    border-bottom: 4px solid rgb(31, 105, 140);
}


.footer {
    grid-area: footer;
    display: grid;
    align-items: center;
    justify-items: center;

    /*border:  1px dashed black;*/
    background-color: #1D698C;
}

.footer > span > a {
    color: #e1e1e1;
    font-family: "Trebuchet MS",sans-serif;
    font-weight: normal;
    text-decoration: none;

    text-transform: capitalize;
    font-style: normal;

    width: 117px;
    height: 18px;
    line-height: 18px;
    font-size: 13px;
}

a {
    color: #28aae2;
    text-decoration: none;
}

a:hover {
    color: #28aae2;
    text-decoration: none;
}