/*
Theme Name: SoHappy Theme Astra Gutenberg
Theme URI: https://www.sohappy-studio.com
Author: Agence So'Happy
Author URI: hhttps://www.sohappy-studio.com
Description: Astra child theme
Template: astra
License: Proprietary - All Rights Reserved
Version: 2.3.1
*/

#ast-scroll-top {
	background-color: var(--third-color);
	border-radius: 50px;
	border-color: var(--main-color);
  	border-width: 2px;
}

/*********BOUTON**********/
.wp-block-button .wp-element-button, .wp-block-buttons .wp-block-button.is-style-outline > .wp-element-button.wp-block-button__link, #masthead .cta-btn {
	--ico-size: .8lh;

	position: relative;
	display: block;
	padding: 10px calc(30px + var(--ico-size)) 10px 20px;
	background-color: var(--main-color);
	border: 2px solid transparent;
	border-radius: 100px;
	box-sizing: border-box;
	line-height: 1.2;
	font-size: 2rem;
	color: var(--third-color);
	font-family: var(--montserrat);
	font-weight: 500;
	white-space: pre-wrap;
	text-decoration: none!important;
	
	transition: all .2s ease-out;
}
.wp-block-button .wp-element-button:hover, .wp-block-buttons .wp-block-button.is-style-outline > .wp-element-button.wp-block-button__link:hover, #masthead .cta-btn:hover {
	background-color: var(--main-color);
	border: 2px solid transparent;
	color: var(--black);
	border-radius: 100px;
}
.wp-block-button .wp-element-button::after, .wp-block-buttons .wp-block-button.is-style-outline > .wp-element-button.wp-block-button__link:after, #masthead .cta-btn:after {
	position: absolute;
	display: block;
	content: "";

	top: 50%;
	right: 15px;
	transform: translate(0, -50%);

	width: var(--ico-size);
	height: var(--ico-size);

	color: inherit;
	background-color: currentColor;

	mask: url(./assets/svg/picto-arrow.svg) center / contain no-repeat;
	-webkit-mask: url(./assets/svg/picto-arrow.svg) center / contain no-repeat;
	transition: inherit;
}
.wp-block-button .wp-element-button:hover::after, .wp-block-buttons .wp-block-button.is-style-outline > .wp-element-button.wp-block-button__link:hover::after, #masthead .cta-btn:hover::after {
	right: 10px;
}

/* OUTLINE BUTTON */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-element-button.wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--white);
	color: var(--white);
}

/****************************/
/********** HEADER **********/
/****************************/
/* #masthead {
	position: fixed!important;
	top: 0;
	left: 0;
	width: 100%;
} */
#masthead {
	position: fixed!important;
	width: 100vw;
	background-color: transparent;
	padding-top: 30px;
	-webkit-box-shadow: 0px 0px 10px 0px transparent; 
	box-shadow: 0px 0px 10px 0px transparent;

	transition: all .2s ease-out;
}
body:is(.scroll0, .mob_scroll0) #masthead {
	background-color: var(--white);
	padding-top: 0px;

	-webkit-box-shadow: 0px 0px 10px 0px oklch(from var(--third-color) l c h / .3); 
	box-shadow: 0px 0px 10px 0px oklch(from var(--third-color) l c h / .3);
}
#masthead .ast-container {
	max-width: 100%!important;
}
#masthead .main-header-menu {
	background-color: var(--white);
	border-radius: 50px;
	padding: 10px;
	box-sizing: border-box;
}
#masthead .main-header-menu li a.menu-link {
	--padding: 15px;
	
	position: relative;
	padding: 3px var(--padding);
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--third-color);
	transition: all .2s ease-out;
}
#masthead .main-header-menu li.cta-btn a.menu-link {
	--padding: 0;
	padding: 0;
}
#masthead .main-header-menu li a.menu-link::after {
	position: absolute;
	display: block;
	content: "";

	bottom: 3px;
	left: var(--padding);
	height: 2px;
	width: 0;
	background-color: var(--main-color);
	transition: inherit;
}
#masthead .main-header-menu li a.menu-link:hover::after, #masthead .main-header-menu li.current-menu-item a.menu-link::after {
	width: calc(100% - 2 * var(--padding));
}

#main-header .fullheight {
	padding-top: calc(var(--masthead-height) + 30px);
	min-height: min(700px, 70vh);
}
body.home #main-header .fullheight {
	min-height: min(900px, 90vh);
}
#main-header .wp-block-group > figure > a[href="#contenu"] {
	padding-right: 7vw;
}

/****************************/
/********** CONTENT *********/
/****************************/
.pretitle {
	position: relative;
	font-weight: 500;
}
.pretitle::before {
	position: relative;
	display: inline-block;
	content:'';

	width: .4lh;
	height: .4lh;
	margin-right: 5px;
	transform: translateX(-5px);
	background-color: var(--main-color);
	border-radius: 50px;
}
.has-outline-overlay {
	position: relative;
}

.has-outline-overlay::after {
	position: absolute;
	display: block;
	content: "";

	border: 2px solid var(--third-color);

	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: inherit;
	pointer-events: none;
	transform: translate(15px, -15px);
}

/* TABS */
.wp-block-tabs .wp-block-tab-list {
	border-bottom: 2px solid var(--grey);
}
.wp-block-tabs .wp-block-tab-list > * {
	--ico-size: 60px;
	position: relative;
	transform: translateY(2px);
	font-family: var(--montserrat);
	font-size: 2rem;
	text-align: center;
	font-weight: 600;
	color: var(--third-color);
	background: transparent;
	border: none;
	box-shadow: none;
	padding: calc(var(--ico-size) + 10px) 20px 20px 20px;
}
.wp-block-tabs .wp-block-tab-list > *[aria-selected="true"]::before {
	border-bottom-width: 4px;
}
.wp-block-tabs .wp-block-tab-list > *::after {
	position: absolute;
	display: block;
	content: "";

	width: var(--ico-size);
	height: var(--ico-size);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(https://jlvilliers.fr/wp-content/uploads/2026/10/picto-onglet-peinture-exterieure.png);
}
.wp-block-tabs .wp-block-tab-list > *:first-child::after {
	background-image: url(https://jlvilliers.fr/wp-content/uploads/2026/10/picto-onglet-peinture-interieure.png);
}
.wp-block-tabs .wp-block-tab-list > *:last-child:after {
	background-image: url(https://jlvilliers.fr/wp-content/uploads/2026/10/picto-onglet-peinture-ravalement-de-facade.png);
}


.slider-realisations [class*='arrow'] {
	cursor: pointer;
}
/****************************/
/***********FOOTER***********/
/****************************/
.get-menu.footer-big-menu li a.menu-link{
	padding: 5px 0;
}

.get-menu.footer-menu li{
	display: flex;
	align-items: center;
}
.get-menu.footer-menu li a.menu-link{
	font-size: 1.6rem;
}
.get-menu.footer-menu img {
	width: auto;
	height: 1.3lh;
	margin: 0 6px;
}

/****************************/
/********DESKTOP ONLY********/
/****************************/
@media (min-width: 981px) {
	
	
}
/****************************/
/**********TABLETTE**********/
/****************************/
@media (max-width: 980px) {
	/* menu toggle */
	#masthead {
		padding-top: 0px;
	}
	#masthead .menu-toggle {
		--btn-color : var(--third-color);
		position: relative;
		transform: translateY(-10px);
	}
	body:is(.scroll0, .mob_scroll0) #masthead .menu-toggle {
		--btn-color: var(--third-color);
	}
	#masthead .menu-toggle:focus {
		border: none!important;
		outline: none!important;
	}
	#masthead .menu-toggle svg {
		fill: var(--btn-color);
		scale: 1.5;
	}
	#masthead .menu-toggle::after {
		position: absolute;
		content: "MENU";
		font-size: 1.2rem;
		width: max-content;
		height: 1lh;
		text-transform: uppercase;
		color: var(--btn-color);
		bottom: 0px;
		left: 50%;
		transform: translate(-50%, 50%);
		pointer-events: none;
	}
	#masthead .menu-toggle.toggled::after {
		content: "FERMER";
	}
	#masthead .main-header-menu {
		padding: 20px;
		width: 100%;
		max-width: 350px;
		margin: auto;
		gap: 0;
		background-color: transparent!important;
	}
	#masthead .main-header-menu li a.menu-link {
		padding: 15px 20px;
		background-color: transparent!important;
		color: var(--black);
		text-align: center;
	}
	#masthead .main-header-menu li:first-child a.menu-link::before {
		display: block;
	}
	#masthead .ast-mobile-header-content {
		display: block!important;
		transition: all .3s ease-out;
		border-radius: 0 0 10px 10px;
		box-shadow: 0px 20px 18px 0px #00000050;
	}
	body:not(.ast-main-header-nav-open) #masthead .ast-mobile-header-content {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50px);
	}

	.wp-block-tabs .wp-block-tab-list > * {
		--ico-size: 40px;
	}
	
}
/****************************/
/*********SMARTPHONE*********/
/****************************/
@media (max-width: 768px) { 
	#main-header .wp-block-group > figure > a[href="#contenu"] {
		display: none;
	}
	
}
@media (max-width: 480px) {
	

}
/****************/
/** KEYFRAMES ***/
/****************/