@charset "UTF-8";
/*
Theme Name: Melasun
Author: Basile Jesset
Description: Thème développé dans le cadre du site web Melasun
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-white: #FFFFFF;
    --color-gris: rgba(89, 89, 89, 1);
    --color-grisline: rgba(166, 166, 166, 1);

    --size-huge: 40px;
    --size-medium: 20px; 
    --size-labeur: 17px;



    --speed : 400ms;

}

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

body{
    margin: 0 !important;
    padding: 8px !important;
    position: relative;
    font-family:"BrutGrotest", sans-serif;    
    font-size: var(--size-labeur);
    line-height: 1.35;
    font-weight: 300;
    color: var(--color-black);
}


::-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-brown); 
    border-radius: 5px;
}



h1, h2, h3, h4, h5, h6{
    color: var(--color-black);
    margin: 0;
    padding: 0;
    font-weight: 700;
	line-height: 1.15;
}


h1{
    font-weight: 700;
    text-transform: uppercase;
}

h2 {
    text-transform: uppercase;
    font-size: var(--size-huge);
    font-weight: 500;
}

h3{
    text-transform: uppercase;
    font-size: var(--size-medium);
    font-weight: 500;
}

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

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

li{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: var(--color-brown);
}

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




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

p{
    padding-bottom: 40px !important;
    font-weight: 300;
}

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

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






/* NAV  */



header{
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-white);
    padding: 10px 5px 5px 5px;
    z-index: 10;
    width: 100%;
    font-weight: 400;
    box-sizing: border-box;
	backdrop-filter: blur(5px);
}

.main_menu{
    text-transform: uppercase;
}

.inner_main_menu{
    display: flex;
    justify-content: space-around;
}


.menu_global{
    position: relative;
}

.menu_icon_desk{
    cursor: pointer;
}

.container_menu{
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 40vw;
    background-color: var(--color-white);
    display: grid;
    grid-template-rows: 0fr;
    transition: all var(--speed);
}

.container_menu_inner{
    overflow: hidden;
}

.container_menu_inner ul{
    margin: 30px 120px 50px 50px; 
}

.container_menu_inner .current-menu-item a{
	font-weight: 500;
	pointer-events: none;
}

.container_menu_inner a{
    display: block;
    position: relative;
    padding: 8px 0;
    text-transform: none;
    font-weight: 300;
    margin-bottom: 20px;
	width: fit-content;
}

.container_menu_inner a::after{
    content: "";
    position: absolute;
    width: calc(40vw - 200px);
    bottom: 0;
    left: 0;
    border-bottom: 1px solid var(--color-gris);
    transition: all var(--speed);
}

.container_menu_inner a::before {
	content: "";
    position: absolute;
    z-index: -1;
    top: 20px;
    left: 12px;
    width: calc(100% - 20px);
    height: calc(100% - 40px);
    background-color: var(--color-white);
    box-shadow: 0px 0px 12px 12px var(--color-white);
	pointer-events: none;
}

.container_menu_inner a:hover::after, .container_menu_inner a:active::after{
    width: calc(40vw - 100px);
}

.title_site{
    width: 50%;
    text-align: center;
    font-size: 30px;
    height: 20px;
    z-index: 50;
}

.title_site h1{
    transition: all var(--speed);
}

.title_site h1:hover, .title_site h1:active{
    letter-spacing: 3px;
}




.sign_up{

}




/* ACCUEIL  */


.list_blog{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 90px 0;
	gap: 10px;
}

.blog{

}

.blog_img{
    height: 33vw;
    position: relative;
    overflow: hidden;
    transition: all 800ms;
}



.blog_img:hover img, .blog_img:active img{
    filter: blur(10px);
}

.blog_img:hover a, .blog_img:active a{
    bottom: 20px;
}



.blog_img a{
    position: absolute;
    bottom: -50px;
    left: 30px;
    border-radius: 45px;
    border: 1px solid var(--color-black);
    padding: 4px 10px 2px;
    width: calc(100% - 60px);
    display: block;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: all var(--speed), bottom 800ms;
}

.blog_img a:hover{
    background-color: var(--color-white);
    border: 1px solid var(--color-white);

}


.blog_img img{
    max-height: 100%;
    max-width: 100%;
	height: 100%;
    object-fit: cover;
    transition: all 800ms;
}

.blog_img img.product{
	 object-fit: contain;
}

.blog_desc{
    margin: 17px 30px;
}

.blog_title{
    font-size: var(--size-medium);
}

.blog_decouvrir{
    font-style: 300;
    color: var(--color-gris);
}


.encarte_thumbnail{
    position: absolute;
    bottom: 20px;
    right: 10%;
    width: 20%;
    padding: 10px;
    color: var(--color-white);
    z-index: 2;
}

.encarte_thumbnail_inner{
    position: relative;
    z-index: 10;
}

.encarte_thumbnail::before{
    content: "";
    pointer-events: none;
    position: absolute;
    bottom: 0px;
    right: 0;
    height: 100%;
    width: 100%;
    border-radius: 32px;
    background-color: rgba(72, 9, 1, 0.35);
    filter: blur(10px);
}

.encarte_thumbnail h4{
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--color-white);
}

.encarte_thumbnail a{
    border-radius: 45px;
    border: 1px solid var(--color-white);
    padding: 4px 10px 2px;
    width: 100%;
    margin-top: 30px;
    display: block;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: all var(--speed);
}

.encarte_thumbnail a:hover, .encarte_thumbnail a:active{
    background-color: var(--color-white);
    color: var(--color-black);
}

/* CONTENT  */

.thumnail_img{
    position: relative;
    width: 100%;
    margin-top: 0;
    height: calc(100vh - 16px);
}

.starting_article{
    width: 100%;
    height: 20px;
}

.thumnail_img img{
    max-height: 100%;
    max-width: 100%;
	height: 100%;
    object-fit: cover;
}


.wp-block-image.size-full{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 0;
    height: calc(100vh - 46px);
}

.wp-block-image.size-full img{
    max-height: 100%;
    max-width: 100%;
	height: 100%;
    object-fit: cover;
}






.content_main_page{
    max-width: 1100px;
    margin: 20px auto;
}


.content_main_page h2{
    margin: 120px auto 120px auto;
    position: relative;
    font-weight: 400;
    padding-bottom: 20px;
}


.content_main_page h3{
    max-width: 700px;
    margin: 50px auto;
    padding-bottom: 10px;
    position: relative;
}


.content_main_page h2::after, .content_main_page h3::after{
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid var(--color-gris);
}

.content_main_page p{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}





.rail_pillars{
	position: relative;
	left: 50%;
	transform-origin: 50% 50%;
	transform: translate(-50%, 0);
	overflow: hidden;
	width: 100vw;
	height: 70vh;
	cursor: pointer;
}

.all_pillars{
	position: absolute;
	left: -12.5%;
	top: 0;
	width: fit-content;
	display: flex;
	transition: left var(--speed);
}



.all_pillars li{
	width: calc(25vw - 10px);
	margin-right: 10px;
	position: relative;
	transform-origin: 50% 50%;
	transform: translate(0%, -100%);
	transition: all var(--speed);
}

.all_pillars li h4{
	margin-top: 8px;
}


.all_pillars li p{
	margin-bottom: 0;
	padding-bottom: 0 !important;
}

.all_pillars li figure{
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	height: calc(25vw - 10px);
	width: 100%;
}

.all_pillars li figure img{
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
	height: 100%;
}


/* FOOTER  */

footer{
    max-width: 550px;
    margin: auto;
    padding: 50px 50px 0 50px;
	text-align: center;
}

.all_logo{
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 70px 0;
}

.all_logo img{
    height: 24px;
    width: auto;
}


.arrow_back{
	position: fixed;
	z-index: 100;
	bottom: 50px;
	right: 20px;
	padding: 6px 6px 6px 6px;
    width: 20px;
    height: 20px;
	border-bottom: 1px solid var(--color-gris);
	transition: all 500ms;
	cursor: pointer;
    transition: all var(--speed);
}


.arrow_back:hover, .arrow_back:hover{
    padding-bottom: 20px;
}

.wp-block-column h3{
	margin-top: 0;
}



#mc_embed_signup form{
	display: flex;
	gap: 6px;
	margin: 12px 0;
	position: relative;
}

#mc_embed_signup input{
	padding: 10px 18px;
	font-family:"BrutGrotest", sans-serif; 
	font-weight: 300;
	border-radius: 20px;
	border: 1px solid var(--color-gris);
}

#mc_embed_signup input[type=submit]{
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--speed);
}

#mc_embed_signup input[type=submit]:hover{
	background-color: var(--color-black);
	color: var(--color-white);
}

#mc_embed_signup div.mce_inline_error{
	background: transparent !important;
	color: red !important;
	font-weight: 300;
	font-size: 14px;
}

#mce-success-response{
position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    left: 0;
    text-align: center;
}

/* PREPA MOBILE  */
.menu_icon_mobile, .menu_nav_mobile, .menu_global_footer{
    display: none;
}


.thumnail_img_portable{
	display: none;
}



@media (max-width: 1200px){
	.all_pillars li {
    	width: calc(50vw - 10px);
	}
	
	.all_pillars li figure {
    	height: calc(40vw - 10px);
	}
}





@media (max-width: 900px){
	.encarte_thumbnail {
		right: 20px;
		width: 50%;
	}
	
	
	.list_blog {
		display: flex;
		flex-direction: column; 
	}
	
	.blog_desc {
		max-width: 500px;
		margin: 30px auto;
	}
	
	.container_menu{
		width: 60vw;
	}
	
	.blog_img {
    	height: 50vh; 
	}

}




@media (max-width: 820px){

	:root{

    --size-huge:30px;
    --size-medium: 18px; 
    --size-labeur: 14px;

}
	
	.all_pillars li {
    	width: calc(75vw - 10px);
	}
	
	.all_pillars li figure {
    	height: calc(75vw - 10px);
	}
	
	.title_site h1{
		margin-top: 3px;
		font-size: 35px;
	}
	
	.encarte_thumbnail {
        right: 30px;
        width: calc(100% - 60px);
    }
	
	.content_main_page p{
		padding: 0 20px;
	}
	
	.menu_icon_desk{
		display: none;
	}
	
	.menu_icon_mobile, .menu_nav_mobile{
		display: block;
	}
	
	
	.container_menu{
		left: auto;
		z-index: 999;
		position: fixed;
		display: flex;
		flex-direction: column;
		right: 100%;
		top: 0;
		padding: 5px;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		backdrop-filter: blur(5px);
	}
	
	
	.menu_nav_mobile_title{
		font-weight: 500;
	}
	
	.menu_nav_mobile{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--color-gris);
		padding: 10px 0;
		
	}
	
	.container_menu_inner{
		flex: 1;
	}
	
	.inner_main_menu {
		justify-content: space-between;
	}
	
	.container_menu_inner ul{
		margin: 30px 50px 50px 50px;
	}
	
	header{
		padding: 10px 5px 0 5px;
	}
	
	.menu_global_footer{
		margin: 50px 50px 50px 50px;
		display: block;
		text-align: center;
	}
		
	.menu_global_footer h4{
		margin-bottom: 20px;
	}
	.menu_global_footer .all_logo{
		margin: 10px 10px;	
	}
	
	.thumnail_img_portable{
		display: block;
	}

	.attachment-post-thumbnail{
		display: none;
	}
	
	#mc_embed_signup form{
		flex-direction: column;
	}
	
	.content_main_page .all_pillars p{
		padding: 0;
	}
}



@media (max-width: 340px){

	.title_site h1{
		margin-top: 10px;
		font-size: 25px;
	}
}