@charset "UTF-8";
/* CSS Document */

body {
    font-family: 'Jost', sans-serif; /*"big-caslon-fb", serif*/
    font-weight: 200 /* 700 et 800 ensuite*/;
    font-style: normal;
    font-size:1rem;
    box-sizing:border-box;
}


a {text-decoration: none;color:inherit;}
a:hover {color:#666;}

.bleu {color:#002FA7;}

.d_none {display: none;}

.content {margin: 30px 30px 30px 240px;}

/* ------------------------------ HEADER  ------------------------------*/

header {
    position:fixed;
    top:30px;
    left:30px;
    width:180px;
}
h1 {font-size: 1.6rem;font-weight: 400;line-height: 1.1;margin:150px 0 50px 0;}
header h1 {font-weight: 500;margin:0 0 5px 0;}
header h2 {font-size: 0.9rem;font-weight: 400;line-height: 1.1;}

nav {margin:50px 0;}

nav a {display: block;cursor: pointer;}
nav li {box-sizing: border-box; position: relative;border-top:1px dotted #CCC;padding:5px 0;width:100%;font-weight: 400;font-size:1.1rem;}
.menu-item-has-children {padding-right:30px;}
nav ul ul {display: none;margin: 10px 0 10px 10px;}
nav li li {border:none;font-weight: 200;font-size:1rem;}

#social {display: flex;margin:0 0 20px 0;}
#social a {margin-right:20px;}
#social li:last-child a{margin:0;}
#social i {font-size:1.2rem;}

#contact {font-size:1rem;margin:0 0 30px 0;}

#legal {font-size: 0.6rem;color:#999;}

#open_menu {
    display: none;
    position: fixed;
    top:20px;right:20px;
    flex-direction: column;
    height: 40px;
    width:40px;
    justify-content:center;
    cursor: pointer;
}

.trait_haut {top: 0px;}
.trait_milieu {top: 8px;}
.trait_bas {top: 16px;}

.trait {
    width: 40px;
    height: 2px;
    background: #000;
    transition: 0.4s ease all;
    position: absolute;
}
.incline_un {transform: rotate(45deg);top:12px;}
.incline_deux {transform: rotate(-45deg);top:12px;}

.down {
    position: absolute;
    right:0;
    top:9px;
    width:30px;
    text-align: right;
    cursor: pointer;
}
/* ------------------------------ PROJETS  ------------------------------*/

.projets {display: flex;flex-wrap: wrap;align-items:center;margin:/*140px 0 -20px 0 -20px;*/ 0 -30px 0 0;}

.gutter-sizer {width:30px;}

.projet, .grid-sizer {
    width:calc(33.33% - 30px);
    margin:/*0 20px 40px 20px;*/ 0 0 30px 0;
}
.projet_img {    
    position: relative;
    overflow: hidden;
    background-size:cover;
    background-position: center;
    transition: all 0.4s ease;
    z-index: -1;
    width:100%;

}

.portrait {padding-top:calc(1.33 * (33.33vw - 110px));} /*  4:3 = 1.33 / 16:9 = 1.78 */
.paysage {padding-top:calc(0.7 * (33.33vw - 110px));} /* 3:4 = 0.75 / 9:16 = 0.56 */

.projet h3 {font-size: 1rem;font-weight: 400;text-align: center;margin:10px 0 0 0;line-height: 1.1;}

.projet_img::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    background-size: cover;
    transform-origin: center;
    transition: all 0.4s ease;
    z-index: 1;
}
.projet a:hover .projet_img::after {
    transform: scale(1.05);
}
.post-categories {display: flex;}
.post-categories li:after {content:' | ';margin:0 15px;}
.post-categories li:last-child:after {content:'';margin:0;}

.categories {margin: -30px 0 50px 0;}
.categories a {font-style: italic;}

#a-propos {display: flex;}
#a-propos h1 {margin-top:115px;}
#a-propos #portrait_dg {
    width: 300px;
    margin: 114px 30px 0 0;
    flex-shrink: 0;
}

@media(max-width:1024px) {
    header {
        top:0px;
        left:0px;
        width:100%;
        background: #FFF;
        padding:20px;
        z-index:3;
    }
    .content {margin: 100px 20px 20px 20px;}
    
    #open_menu {display: flex;}
    
    #nav, #entete h2 {display: none;}
    
    .projets {margin: 0 -20px 0 0;}

    .gutter-sizer {width:20px;}

    .projet, .grid-sizer {
        width:calc(33.33% - 20px);
        margin:/*0 10px 20px 10px;*/ 0 0 20px 0;
    }

    .portrait {padding-top:calc(1.33 * (33.33vw ));} /*  4:3 = 1.33 / 16:9 = 1.78 */
    .paysage {padding-top:calc(0.7 * (33.33vw ));} /* 3:4 = 0.75 / 9:16 = 0.56 */

}

@media(max-width:800px) {
    
    h1 {margin:30px 0;}

    .projet, .grid-sizer {
        width:calc(50% - 20px);
        margin:/*0 10px 20px 10px;*/ 0 0 20px 0;
    }
    
    .portrait {padding-top:calc(1.33 * (50vw ));} /*  4:3 = 1.33 / 16:9 = 1.78 */
    .paysage {padding-top:calc(0.7 * (50vw ));} /* 3:4 = 0.75 / 9:16 = 0.56 */

    #a-propos #portrait_dg {
        width: 30%;
        margin:  30px;
        flex-shrink: 0;
    }

}