@charset "UTF-8";
/*
Theme Name: Jean-Baptiste Nore
Author: Basile Jesset
Description: Thème développé dans le cadre du site web Jean-Baptiste Nore
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: graphic design theme, portofolio, brutalist theme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Share the love <3

*/



/*      TTT - GENERAL     */


:root{
    --color-black: #000000;
    --color-grey: #F2EFEB;

    --color-white: #FFFFFF;
    --color-moka: #B2A591;
    --color-lichen: #7E8C6D;
    

    --size-grandtitre: 250px;
    --size-titre1: 50px; 
    --size-titre2: 30px;
    --size-titre3: 17px;
    --size-labeur: 17px;
    --size-mention: 12px;

    --margin-global : 90px;

    --speed : 600ms;

}

html{
    padding: 0 !important;
    margin: 0 !important;
}

body{
    margin: var(--margin-global) var(--margin-global) 0 var(--margin-global) ;
    padding: 0 !important;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: normal;  
    font-size: var(--size-labeur);
    line-height: 1.7;
    font-weight: 300;
    color: var(--color-black);
    background-color: var(--color-white);
}


::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    border-radius: 2px;
    background-color: transparent;
} 

::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color:  transparent;
    height: 0px;
}
 
::-webkit-scrollbar-thumb {
    background-color: var(--color-black);
    border-radius: 5px;
}


h1, h2, h3, h4, h5, h6{
    color: var(--color-black);
    font-family: 'scotch-display', sans-serif;
    margin: 0;
    padding: 0;
    font-weight: 400;
	line-height: 1.4;
}

h1{

}

h2 {
    font-size: var(--size-grandtitre);
    font-weight: 600;
    margin: 180px 0 98px 0;
    position: relative;
}

h2::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 48px;
    border-bottom: 1px solid var(--color-black);
}

h3{
    font-size: var(--size-titre1);
    font-weight: 600;
    margin: 180px 0 98px 0;
    text-transform: uppercase;
    position: relative;
}   

h3::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -10px;
    border-bottom: 1px solid var(--color-black);
}

h4{
    font-size: var(--size-titre2);
    font-weight: 600;
    margin: 180px 0 98px 0;
    position: relative;
    text-transform: uppercase;
}

h4::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -10px;
    border-bottom: 1px solid var(--color-black);
}

h5{
    font-size: var(--size-titre3);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 450;
    text-transform: uppercase;
    letter-spacing: 0%;
}


p i, p em{
    font-weight: 500;
}

ul, ol{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li{
    margin: 0;
    padding: 0;
}

a{
    color: var(--color-black);
}

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




hr{
    border: 0;
    border-bottom: 1px solid var(--color-black);
    margin: 80px 0;
}

p{
    padding-bottom: 10px;
    font-weight: 400;
    max-width: 600px;
    letter-spacing: 3%;
}

form p{
    padding-bottom: 0px !important;
}

b, strong{
    color: var(--color-black);
    font-weight: 600;
}




/* NAV  */

header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 50;
}

.inner_main_menu{
    display: flex;
    padding: 20px;
    justify-content: end;
}

.container_menu{
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    top: -100%;
    background-color: var(--color-grey);
    transition: all var(--speed);
    width: 100%;
    padding: 18px;
    height: 100%;
    z-index: 150;
    box-sizing: border-box;
}

.title_site img{
    width: 70vw;
}

.menu_icon_mobile{
    cursor: pointer;
}


.menu_nav_mobile{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-black);
}

.menu_nav_mobile_exit{
    width: 20px;
    cursor: pointer;
}

.container_menu_inner{
    padding-top: 87px;
    display: flex;
    gap: 50px;
    flex: 1;
}

.container_menu_inner_info{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.container_menu_inner_research{
    position: relative;
}

.corpus_search{
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--color-black);
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 50px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: var(--size-labeur);
}

.reset_search{
    position: absolute;
    right: 10px;
    top: 10px;
    text-transform: uppercase;
    cursor: pointer;
    display: none;
}

.research_result li{
    list-style-type: none;
}

.research_result h4{
    margin-top: 0;
    margin-bottom: 60px;
}

.container_menu_inner_description{
    flex: 1;
    width: 50%;
}

.container_menu_inner_description img{
    width: 10px;
    margin-right: 20px;
}

.container_menu_inner_rs{
    display: flex;
    gap: 8px;
}


.container_menu_inner_menu{
    flex: 1;
}

.container_menu_inner_menu h3{
    margin-top: -12px;
    margin-bottom: 20px;
}

.container_menu_inner_menu h3::after{
    content: none;
}

.container_menu_inner_menu p{
    font-size: var(--size-mention);
}

.container_menu_inner_menu a{
    text-decoration: none;
}

.menu-item>a{
    display: block;
    font-family: "scotch-display";
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--size-titre2);
    letter-spacing: 0%;
    text-transform: uppercase; 
    position: relative;
    margin-bottom: 27px;
    width: 100%;
}

.menu-item>a::after{
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -6px;
    border-bottom: 1px solid var(--color-black);
}

.sub-menu .menu-item>a{
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: 45 Light;
    font-size: var(--size-mention);
    line-height: 29px;
    letter-spacing: 0%;
    text-transform: none;
    margin-bottom: 6px;
}

.sub-menu .menu-item>a::after{
    content: none;
}

.container_menu_inner_menu ul.menu_screen{
    display: grid;
    gap: 45px;
    grid-template-columns: 1fr 1fr 1fr;
}


.entree_site{
    position: absolute;
    width: 65%;
    left: 20px;
    top: 20px;
}

.main_entry{
    position: fixed;
    width: 92px;
    left: -6px;
    top: 0;
    z-index: 60;
}

.container_logo_jbnore{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
}

.logo_jbnore{
    margin-top: 100vh;
    position: sticky;
    top: 10px;
    width: 90px;
}


/* FOOTER  */



footer{
    position: relative;
    z-index: 100;
    margin: 90px calc(var(--margin-global) * -1) 0;
    width: calc(100% + var(--margin-global) + var(--margin-global));

}

footer .container_menu_footer{
    display: flex;
    gap: 50px;
    flex: 1;
    padding: 32px 20px;
    min-height: 100vh;
    box-sizing: border-box;
    flex-direction: column;
  
    background-color: var(--color-grey);
}


footer .container_menu_inner{
    padding: 0;
}

.footer_img{
    width: 200px;
    margin-bottom: 50px;
}


footer .container_menu_inner_menu{
    flex: 2;
}

footer .container_menu_inner_menu ul.menu_screen{
    display: flex;
}

footer .container_menu_inner_menu ul.menu_screen li{
    flex: 1;
}

footer .menu-item>a{
    font-size: var(--size-titre3);
}

.footer_menu_legal{
    display: flex;
    justify-content: space-between;
    font-size: var(--size-mention);
}


.footer_menu_legal img{
    display: flex;
    justify-content: space-between;
    mix-blend-mode: multiply;
    width: 122px;
}


.footer_menu_legal ul{
    display: flex;
    gap: 20px;
}

.footer_menu_legal .menu_legal .menu-item>a{
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style:normal;
    font-size: var(--size-mention);
    letter-spacing: 0%;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 0;
    width: auto;
    text-decoration: none;
}

.footer_menu_legal .menu_legal .menu-item>a::after{
    content: none;
}

.faq_list {
    max-width: 600px;
    margin: 50px auto 180px;
}

.faq_question{
    border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    padding: 10px 0;
    margin-bottom: 26px;
}

.faq_question li{
    text-transform: uppercase;
    font-size: 600;
    cursor: pointer;
}

.faq_reponse{
    display: grid;
    grid-template-rows: 0fr;
    transition: all var(--speed);
}

.faq_reponse_inner_separator{
    height: 30px;
}

.faq_reponse_inner{
    overflow: hidden;
    line-height: 22px;
}















/* CONTENT ACCUEIL  */

.slider_welcome{
    margin: 20vh calc(var(--margin-global) * -1 + 20px) 20px;
    width: calc(100% + var(--margin-global) + var(--margin-global) - 40px);
    height: 70vh;
    overflow: hidden;
    position: relative;
}

.slider_welcome_arrow_left{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(0, -50%);
    transform-origin: 50% 50%;
    z-index: 5;
    cursor: pointer;
}

.slider_welcome_arrow_right{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(-50%, 0);
    transform-origin: 50% 50%;
    z-index: 5;
    cursor: pointer;
}

.slider_welcome_about{
    position: relative;
    text-align: right;
    font-weight: 450;
    font-size: 25px;
    line-height: 32px;
    letter-spacing: 0%;
     margin: 10px calc(var(--margin-global) * -1 + 20px) 20px;
    width: calc(100% + var(--margin-global) + var(--margin-global) - 40px);
}


.slider_welcome_inner{
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 20px);
    display: flex;
    flex-wrap: nowrap;
    transition: left var(--speed);
}


.projet_container_img{
    flex: 1 0 auto;
    height: 70vh;
    margin-right: 20px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;

}

.projet_container_img img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.projet_container_img.container_portrait{
    width: calc(25% - 20px);
}

.projet_container_img.container_paysage{
    width: calc(50% - 20px);
}


.wp-block-query{
    margin-bottom: 20px;
}

.wp-block-group{
    margin: 0px calc(var(--margin-global) * -1);
    width: 100%;
    padding: 24px var(--margin-global) 10px;
    box-sizing: content-box;
}

.wp-block-image{
    max-width: 50vw;
    margin: 50px auto;
}

.wp-block-column .wp-block-image{
    width: 100%;
    margin: 0;
    max-width: none;
}

.wp-block-image.is-style-bg-image{
    margin: 0 calc(var(--margin-global) * -1);
    width: calc(100% + var(--margin-global) + var(--margin-global));
    box-sizing: content-box;
    max-width: none;
}

.taxonomy-category a{
    font-family: 'scotch-display', sans-serif;
    font-weight: 300;
    font-style: Light;
    font-size: var(--size-titre3);
    line-height: 23px;
    letter-spacing: 0%;
    text-decoration: none;
}

.page-template-page-welcome .wp-block-column{
    display: flex;
    flex-direction: column;
}

.page-template-page-welcome .wp-block-column .wp-block-buttons{
    flex: 1;
}

.page-template-page-welcome .wp-block-column .wp-block-buttons>.wp-block-button{
    margin-bottom: 30px;
}

body main .wp-block-buttons>.wp-block-button {
    margin-top: 30px;
    margin-bottom: 100px;
}

body main .wp-block-button .wp-element-button{
    font-weight: 400;
    border-radius: 0;
    font-style: 45 Light;
    text-transform: uppercase;
    background-color: transparent;
    padding: 0 0px 4px 0;
    border-bottom: 1px solid var(--color-moka);
    color: var(--color-black);
    transition: all var(--speed);

    display: flex;
    gap: 30px;
    justify-content: space-between;
}

body main .wp-block-button .wp-element-button .arrow_button{
    margin-top: 3px;
    margin-bottom: -3px;
}


body main .wp-block-button:hover .wp-element-button{
    color: grey;
    padding-left: 10px;
    margin-right: 10px;
}


body main .wp-block-button:hover .wp-element-button .arrow_button{
    opacity: 0.7;
}

body main .wp-block-button .wp-element-button .arrow_button .barre_arrow{
    transition: all var(--speed);
    transform-origin: right;
}

body main .wp-block-button:hover .wp-element-button .arrow_button .barre_arrow{
    transform: scaleX(0);
}




.grid_collaboration{
    font-family: 'scotch-display', sans-serif;
    font-weight: 400;
    font-size: var(--size-titre2);
    letter-spacing: 0%;
    text-transform: capitalize;
}

.grid_collaboration li{
    margin-left: 20px;
    padding-bottom: 50px;
    list-style-type: none;
}

.grid_collaboration li:before {
    content:"·";
    font-size: 24px;
    vertical-align:middle;
    line-height: 20px;
    margin-left: -20px;
    margin-right: 20px;
}

.wp-block-columns .wp-block-column h4:first-child, .wp-block-columns .wp-block-column h3:first-child{
    margin-top: 0;
}


.wp-block-column .wp-block-image.column_reduc_height{
    margin-bottom: -300px;
}


.wp-block-post .wp-block-post-featured-image{
    overflow: hidden;
}

.wp-block-post img{
    transition: all var(--speed);
    transform-origin: 50% 50%;
    transform:  scale3d(1, 1, 1);
}

.wp-block-post:hover img{
    transform: scale3d(1.05, 1.05, 1);
}

.wp-block-post .wp-block-post-title, .wp-block-post .wp-block-post-title a, .wp-block-post .wp-block-post-terms, .wp-block-post .wp-block-post-terms a{
    transition: all var(--speed);
    transform-origin: 50% 50%;
}

.wp-block-post:hover .wp-block-post-title, .wp-block-post:hover .wp-block-post-terms{
    transform: translateX(50%);
}

.wp-block-post:hover .wp-block-post-terms.has-text-align-right{
        transform: translateX(-50%);
}

.wp-block-post .wp-block-post-terms a{
    display: inline-block;
}

.wp-block-post:hover .wp-block-post-title a, .wp-block-post:hover .wp-block-post-terms a{
    transform: translateX(-50%);
}

.wp-block-post:hover .wp-block-post-terms.has-text-align-right a{
        transform: translateX(50%);
}


p.wp-block-paragraph {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-column p.wp-block-paragraph {
    margin-left: 0;
    margin-right: 0;
}



.wpcf7-form div{
    display: flex;
    gap: 20px;
}

.wpcf7-form p{
    max-width: none;
}

.wpcf7-form div *{
   flex: 1;
}

.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select, .wpcf7-form label{
    width: 100%;
    box-sizing: border-box;
}

.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select{
    padding: 6px 0;
    font-size: var(--size-mention);
    border: 1px solid var(--color-moka);
    border-radius: 5px;
}


.wpcf7-form .wpcf7-submit{
    display: block;
    position: relative;
    font-size: var(--size-labeur);
    text-transform: uppercase;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-moka) ;
    width: 50%;
    margin-left: auto;
    margin-top: 40px;
    padding: 0 0 10px 0;
    text-align: right;
    border-radius: 0;
    cursor: pointer;
}

.wpcf7-form .wpcf7-submit .arrow_button{
    position: absolute;
    left: 0;
    top: 3px;
}





/* PROJECT  */


.choice_client{
    display: flex;
    justify-content: space-between;
    margin-top: -30px;
    margin-bottom: 80px;
}


.choice_display{
    display: flex;
    gap: 6px;
    position: relative;
}

.selector_choice{
    position: absolute;
    z-index: -1;
    border-top: 1px solid var(--color-moka);
    border-bottom: 1px solid var(--color-moka);
    height: 22px;
    width: 18px;
    left: 24px;
    transition: all var(--speed);
}


.element_block{
    height: 22px;
    width: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}


.element_block .element_grid_block{
    height: 12px;
    width: 12px;
    background-color: var(--color-black);
    border-radius: 2px;
    border: 1px solid var(--color-black);
    box-sizing: border-box;
    transition: all var(--speed);
}


.element_block.is_active_display .element_grid_block{
    height: 22px;
    width: 18px;
    background-color: transparent;
    border: 1px solid var(--color-moka);
}

.element_block:hover .element_grid_block{
    height: 22px;
    width: 18px;
    background-color: transparent;
    border: 1px solid var(--color-moka);
}


.element_grid{
    height: 22px;
    width: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}


.element_grid_block_container{
    display: grid;
    height: 13px;
    width: 13px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    justify-items: center;
    align-items: center;
    transition: all var(--speed);
}


.element_grid .element_grid_block{
    height: 100%;
    background-color: var(--color-black);
    border-radius: 2px;
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-black);
    box-sizing: border-box;
    transition: all var(--speed);
}

.element_grid.is_active_display .element_grid_block_container{
    height: 17px;
    width: 17px;
}

.element_grid.is_active_display .element_grid_block{
    height: 8px;
    width: 8px;
    background-color: transparent;
    border: 1px solid var(--color-moka);
}


.element_grid:hover .element_grid_block_container{
    height: 17px;
    width: 17px;
}

.element_grid:hover .element_grid_block{
    height: 8px;
    width: 8px;
    background-color: transparent;
    border: 1px solid var(--color-moka);
}




.select_active .select_choice_inner{
    color: var(--color-lichen) !important;
}

.select_client{
    font-family: 'scotch-display', sans-serif;
    font-weight: 300;
    font-style: Light;
    font-size: var(--size-titre2);
    line-height: 38px;
    letter-spacing: 0%;
    width: 25%;
    padding: 0 0 24px 0;
    border-bottom: 2px solid var(--color-lichen);
    cursor: pointer;
    transition: all var(--speed);
}

.select_personnal{
    font-family: 'scotch-display', sans-serif;
    font-weight: 300;
    font-style: Light;
    font-size: var(--size-titre2);
    line-height: 38px;
    letter-spacing: 0%;
    width: 25%;
    padding: 0 0 24px 0;
    text-align: right;
    border-bottom: 2px solid var(--color-lichen);
    cursor: pointer;
    transition: all var(--speed);
    display: flex;
    justify-content: end;
}

.select_client:hover, .select_personnal:hover{
    color: var(--color-lichen);
    font-weight: 500;
    border-bottom: 3px solid var(--color-lichen);
}

.select_choice_inner{
    position: relative;
    display: flex;
    align-items: start;
    transition: all var(--speed);
}

.select_choice_compteur{
    position: relative;
    font-size: var(--size-mention);
    font-family: "neue-haas-grotesk-display", sans-serif;
    line-height: 14px;
}

.all_cat_project{
    font-family: 'scotch-display', sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 32px;
    text-align: center;
    padding: 0 30px 20px 30px;
    border-bottom: 1px solid var(--color-black);
    margin-bottom: 30px;
}

.all_cat_project a{
    cursor: pointer;
    transition: all var(--speed);
}

.all_cat_project a:hover{
    color: var(--color-lichen);
}

.all_cat_project .cat_currently_selected{
    color: var(--color-lichen);
}

.list_blog_content{
    max-width: 600px;
    margin: 20px auto 80px;
}

.list_blog_content h4{
    margin-top: 0;
    margin-bottom: 30px;
}

.list_blog_content h4::after{
    content: none;
}

.list_blog_solo{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px 45px;
    margin-bottom: 120px;
}

.blog{
    overflow: hidden;
}

.blog_img{
    overflow: hidden;
    margin-bottom: 10px;
}


.blog_img img{
    transition: all var(--speed);
    transform-origin: 50% 50%;
    transform:  scale3d(1, 1, 1);
    margin-bottom: -10px;
}


.blog:hover .blog_img img{
    transform: scale3d(1.05, 1.05, 1);
}


.list_blog_solo a{
    text-decoration: none;
}

.blog_desc{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.blog_title{
    text-align: left;
}

.blog_separator{
    flex: 1;
    transition: all var(--speed);
}

.blog:hover .blog_separator{
    flex: 0;
}

.blog_decouvrir{
    font-family: 'scotch-display', sans-serif;
    font-weight: 300;
    text-align: right;
    margin-top: -4px;
}



.single_header h3{
    margin-top: 35vh;
    margin-bottom: 50px;
    max-width: 70%;
}

.single_header h3::after{
    width: calc(100vw - var(--margin-global) * 2);
}



.single_header_info{
    display: flex;
    gap : 30px;
    justify-content: space-between;
    font-size: var(--size-mention);
}

.single_header_info div{
    max-width: 50%;
}

.single_header_info h5, .single_header_info_year{
    font-size: var(--size-titre2);
    text-transform: none;
}



.main_article .choice_client{
    margin-top: 0px;
    margin-bottom: 40px;
}

.img_thumnail_banner{
    margin: 0 calc(var(--margin-global) * -1);
    width: calc(100% + var(--margin-global) + var(--margin-global));
    box-sizing: content-box;
    max-width: none;

}

.img_thumnail_banner{
    margin: 85px calc(var(--margin-global) * -1);
    width: calc(100% + var(--margin-global) + var(--margin-global));
    box-sizing: content-box;
    max-width: none;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.img_thumnail_banner img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.all_img_to_grid{
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 90px 30px;
    margin: 50px 0 90px;
}

.all_img_to_grid img{
    height: 27vw;
    width: auto;
}

.contexte_keep{
    display: flex;
    gap: 30px;
}

.to_block_display_button{
    width: fit-content;
    margin-left: auto;
    display: none;
}

.contexte_keep_content{
    flex: 3;
}

.contexte_keep_content h3:first-of-type{
    margin-top: 0;
}

.contexte_keep_data{
    margin-top: 80px;
    flex: 1;
    border-top: 1px solid var(--color-black);
}


.contexte_keep_data_single{
    border-bottom: 1px solid var(--color-lichen);
    display: flex;
    font-size: var(--size-mention);
    padding: 14px 0;
}

.contexte_keep_data .contexte_keep_data_single:last-of-type{
    border-bottom: 1px solid var(--color-black);
}

.contexte_keep_data_single_intitule{
    width: 33%;
}

.contexte_keep_data_single_content{
    font-family: 'scotch-display', sans-serif;
}

.wp-group-as-end-project{
    margin-top: 120px;
    margin-bottom: 120px;
}

.wp-group-as-end-project h4{
    margin-top: 20px;
}

.main_article h3{
    width: calc(50vw + 300px - var(--margin-global));
}

.list_blog_project{
    margin: 50px 0 80px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 45px;
}

.list_blog_project a{
    text-decoration: none;
}

.list_blog_project .blog_desc{
    flex-direction: column;
    /* justify-content: start; */
    align-items: start;
    gap: 0;
}

.list_blog_project .blog_decouvrir{
    text-align: left;
}



.list_blog_project .blog_desc, .list_blog_project .blog_title, .list_blog_project .blog_decouvrir{
    transition: all var(--speed);
    transform-origin: 50% 50%;
}

.list_blog_project .blog:hover .blog_desc{
    transform: translateX(50%);
}

.list_blog_project .blog:hover .blog_title, .list_blog_project .blog:hover .blog_decouvrir{
    transform: translateX(-50%);
}


.main_article .wp-block-image{
    margin-top: 80px;
    margin-bottom: 80px;
}





/* JOURNAL  */

.list_blog_solo.list_journal{
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    grid-template-columns: 1fr;
}

.list_blog_solo.list_journal .blog_img{
    height: 47vw;
    position: relative;
}

.list_blog_solo.list_journal .blog_img img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.list_blog_project.list_blog_journal .blog_img{
    height: 18vw;
    position: relative;
}

.list_blog_project.list_blog_journal .blog_img img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.container_content_blog{
    position: relative;
}

.container_content_blog .contexte_keep_data{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50vw - 300px - var(--margin-global) - 20px);
}


.contexte_keep_data.contexte_keep_data_journal{
    border-top: 0;
    max-width: 280px;
    /* position: sticky; */
    /* top: 20px; */
}


.mention_journal{
    font-size: var(--size-labeur);
    padding-bottom: 30px;
}

.summary_item{
    list-style: none;
    position: relative;
    padding-left: 10px;
    font-weight: 400;
    border-top: 1px solid var(--color-grey);
    border-bottom : 1px solid var(--color-grey);
    padding: 14px 0 14px 16px;
    font-size: var(--size-mention);
}


.summary_item:first-of-type{
    border-top: 2px solid var(--color-black);
}

.summary_item:last-of-type{
    border-bottom: 2px solid var(--color-black);
}

.summary_item strong{
    font-weight: 400;
}
.summary_key{
    right: calc(100% - 8px);
    top: 14px;
    position: absolute;
}

contexte_keep_data{

}




.projets_to_display, .journal_to_display{
    position: relative;
}

h2 .compteur_projet{
    position: absolute;
    bottom: 46px;
    left: calc(100% + 10px);
    font-size: var(--size-mention);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
}

li .compteur_projet{
    position: absolute;
    top: 0;
    right: 0;
    font-size: var(--size-mention);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
}