:root {

	--header-font: Urbanist, Sans-serif;

	--header-padding-mobile: 0;
	--header-padding-tablet: 0;
	--header-padding-laptop: 0;
	--header-padding-desktop: 0;
	--header-padding-sm-laptop: 0;

	--header-row-padding-mobile: 1em 5%;
	--header-row-padding-tablet: 1em 5%;
	--header-row-padding-laptop: 0.5em 6%;
	--header-row-padding-desktop: 0.5em 8%;
	--header-row-padding-sm-laptop: 0.5em 5%;

}

/*Widget parents rules*/
div.elementor:has(.site-header) > div.elementor-element {
	padding: 0 !important;
}

div.elementor:has(.site-header) > div.elementor-element > div {
	padding: 0 !important;
	max-width: 100% !important;
}

div.elementor-location-header > div.elementor-element,
div.elementor-location-header > div.elementor-element > div {
	padding: 0 !important;
	max-width: 100% !important;
}

/*Widget parents rules*/


body.menu-opened {
	height: 100%;
	overflow: hidden;
	margin: 0 !important;
}

.site-header {
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	position: fixed;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	transition: background-color 0.35s ease-in-out;
}

.site-header.scrolled {
	backdrop-filter: blur(10px);
	box-shadow: 0 0 15px rgb(0 0 0 / 10%);
	background-color: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(10px); /* Safari support */
}

.site-header::after {
	top: 0;
	left: 0;
	right: 0;
	content: "";
	opacity: 0;
	height: 100vh;
	z-index: -100;
	position: fixed;
	visibility: hidden;
	transform: translateX(-100%);
	background: rgba(56, 75, 99, .3);
	transition: all 0.3s ease-in-out;
}

body.menu-opened .site-header::after {
	opacity: 1;
	z-index: -1;
	visibility: visible;
	transform: translateX(0);
}

.site-header__row {
	gap: 2em;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.site-header__row--top {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background-color: var(--e-global-color-primary);
}

/* narrow variant (nouveau-et-myotte.fr) : header sans fond, image de la banner derrière */
.site-header--narrow .site-header__row--top {
	background-color: transparent;
}

.header-row__column {
	display: flex;
	align-items: center;
}

.header-row__column--rows {
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
}

.header-row__column-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-row__column.column-logo .header-logo {
	width: 200px;
	height: 68px;
	display: flex;
	position: relative;
	align-items: center;
	transition: all 0.5s ease-in-out;
}

.header-row__column.column-logo .header-logo img {
	height: auto;
	max-width: 100%;
	position: absolute;
	transition: all 0.5s ease-in-out;
}


/* menu socials */

.site-menu__cta {
	gap: 2em;
	width: 100%;
	display: flex;
	list-style: none;
	align-items: center;
	margin: 0 !important;
	justify-content: flex-end;
}

.site-menu__cta .menu-item a {
	color: #ffffff;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.025rem;
	font-family: var(--header-font);
}

.site-menu__cta .menu-item:last-child a {
	padding: 0.8em 2em;
	border: solid 1px #ffffff;
}

.site-header.scrolled .site-menu__cta .menu-item a {
	color: var(--e-global-color-primary);
}

.site-header.scrolled .site-menu__cta .menu-item:last-child a {
	border: solid 1px var(--e-global-color-primary);
}

/* menu socials */


/*	burger */
.header-burger {
	height: 24px;
	width: 36px;
	cursor: pointer;
	position: relative;
	transform: scale(0.7);
}

.header-burger__line {
	width: 100%;
	height: 2px;
	animation: none;
	position: absolute;
	transform: rotate(0deg);
	animation-duration: 0.65s;
	background-color: var(--e-global-color-primary);
	animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

body.menu-opened .header-burger__line {
	background-color: var(--e-global-color-primary) !important;
}

.header-burger__line:nth-child(1) {
	top: 0;
	animation-name: topreverse;
	animation-fill-mode: forwards;
}

.header-burger__line:nth-child(2) {
	bottom: 10px;
	width: 80%;
	animation-name: bottomreverse;
}

.header-burger__line:nth-child(3) {
	bottom: 0;
	animation-name: bottomreverse;
}

.header-burger.is-active > .header-burger__line {
	animation-duration: 0.65s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.header-burger.is-active .header-burger__line:nth-child(1) {
	top: 45.8333333333%;
	animation-name: top;
}

.header-burger.is-active .header-burger__line:nth-child(2) {
	visibility: hidden;
}

.header-burger.is-active .header-burger__line:nth-child(3) {
	bottom: 45.8333333333%;
	animation-name: bottom;
}


@keyframes top {
	0% {
		top: 0;
	}
	60% {
		top: 45.8333333333%;
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}

@keyframes bottom {
	0% {
		bottom: 0;
	}
	60% {
		bottom: 45.8333333333%;
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-45deg);
	}
}

@keyframes topreverse {
	0% {
		transform: rotate(45deg);
		top: 45.8333333333%;
	}
	60% {
		transform: rotate(0deg);
		top: 45.8333333333%;
	}
	100% {
		top: 0;
	}
}

@keyframes bottomreverse {
	0% {
		transform: rotate(-45deg);
		bottom: 45.8333333333%;
	}
	60% {
		transform: rotate(0deg);
		bottom: 45.8333333333%;
	}
	100% {
		bottom: 0;
	}
}

/*	burger */


/*CTA Myotte*/

.cta__bouton{
	background-color: #0058A7;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0.025rem;
	font-family: var(--header-font);
	display: flex;
	position:fixed;
	right: 15px;
	bottom: 90px;
	z-index: 401;
	align-items: center;
	padding: 15px 40px;

}
.cta__bouton::after{
	background-color: #0174C9;
	content:'';
	height: 100%;
	width: 100%;
	position:absolute;
	left: 0;
	clip-path: polygon(0 0, 100% 0, 100% 75%, 90% 100%, 0 100%);

}
.cta__bouton:hover,
.cta__bouton:focus{
	color: #fff;
}
.cta__bouton span{
	width:130px;
	z-index: 402;
}
.icon-file-cta{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 26px;
	height: 33px;
	background-image: url('https://lmh-groupe.fr/myottecie/wp-content/uploads/sites/4/2025/01/Groupe-1625.png');
	margin-right: 10px;
	z-index: 402;
}


/*RESPONSIVE*/

/*phone*/
@media (max-width: 767px) {

	.hide-mobile {
		display: none !important;
	}

	.site-header {
		background-color: #ffffff !important;
		padding: var(--header-padding-mobile);
	}

	.column-menu__cta,
	.site-menu__primary,
	.site-header__row {
		padding: var(--header-row-padding-mobile);
	}

	.header-row__column.column-logo .header-logo {
		width: 100%;
		height: 55px;
	}

	.site-header .header-logo--w {
		opacity: 0;
	}
	.cta__bouton span{
		width: 100%;
	}
	.cta__bouton{
		background-color: #0058A7;
		color: #fff;
		font-size: 1.2rem;
		font-weight: 400;
		letter-spacing: 0.025rem;
		font-family: var(--header-font);
		display: flex;
		position: fixed;
		width: 90%;
		right:unset;
		bottom: 50px;
		z-index: 401;
		align-items: center;
		padding: 15px 40px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.CaptchaHide{
		display: none;
	}


}

/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {

	.hide-tablet {
		display: none !important;
	}

	.site-header {
		padding: var(--header-padding-tablet);
	}

	.column-menu__cta,
	.site-menu__primary,
	.site-header__row {
		padding: var(--header-row-padding-tablet);
	}

	.site-header__row--top {
		z-index: 999;
	}

	.header-row__column.column-logo .header-logo {
		height: unset;
		min-height: 58px;
	}


	.site-header .header-burger__line,
	body.menu-opened .header-burger__line {
		background-color: #ffffff;
	}

	.site-header.scrolled .header-burger__line {
		background-color: var(--e-global-color-primary);
	}

	.header-row__column.column-logo .header-logo .header-logo--c {
		opacity: 0;
	}

	.site-header.scrolled .header-row__column.column-logo .header-logo .header-logo--c {
		opacity: 1;
	}

	.site-header.scrolled .header-row__column.column-logo .header-logo .header-logo--w {
		opacity: 0;
	}


}

/*mobile and tablet*/
@media (max-width: 1024px) {

	.site-header::before {
		z-index: 9999;
	}

	.header-row__column {
		flex: 1 1 0;
	}

	.header-row__column.column-logo,
	.header-row__column.column-burger {
		z-index: 999;
	}

	.header-row__column.column-logo {
		justify-content: flex-end;
	}

	.header-row__column--rows {
		justify-content: flex-start;
	}

	.header-row__column.column-menu {
		top: 0;
		left: -5px;
		gap: 1em;
		opacity: 0;
		z-index: -1;
		width: 105vw;
		height: 100vh;
		display: flex;
		position: fixed;
		visibility: hidden;
		flex-direction: column;
		align-items: flex-start;
		align-content: flex-start;
		transition: 0.5s ease all;
		background-color: #ffffff;
		backdrop-filter: blur(10px);
		clip-path: circle(0px at 0 0px);
	}

	.header-row__column.column-menu.is-opened {
		opacity: 1;
		z-index: 100;
		visibility: visible;
		clip-path: circle(100%);
	}

	.header-row__column.column-menu .column-menu_content > * {
		width: fit-content;
	}

	.header-row__column.column-menu > .column-menu_content {
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.column-logo img {
		height: auto;
		max-width: 100%;
	}

	.header-row__column-row {
		gap: 1em;
		align-items: flex-start;
		flex-direction: column;
	}

	body.menu-opened .header-logo .header-logo--c {
		opacity: 1 !important;
	}

	body.menu-opened .header-logo .header-logo--w {
		opacity: 0 !important;
	}

	.site-menu__cta {
		justify-content: center;
	}

	.site-menu__cta .menu-item a {
		color: var(--e-global-color-primary) !important;
	}

	.site-menu__cta .menu-item:last-child a {
		border: solid 1px var(--e-global-color-primary) !important;
	}

	.column-menu__cta,
	.site-menu__primary,
	.column-menu__subsidiaries {
		width: 100%;
	}

	.column-menu__subsidiaries {
		left: 0;
		bottom: 0;
		padding: 3em 5% 5em 5%;
		position: absolute;
		background-color: var(--e-global-color-primary);
	}


}


/*desktop*/
@media (min-width: 1025px) {

	.hide-desktop {
		display: none !important;
	}

	.site-header {
		padding: var(--header-padding-desktop);
	}

	.site-header__row {
		padding: var(--header-row-padding-desktop);
	}

	.header-row__column {
		flex: 1 1 0;
	}

	.header-row__column-row {
		gap: 4em;
		padding-left: 2%;
		padding-right: 2%;
		flex-direction: row;
	}

	.header-row__column.column-menu {
		flex-basis: 30%;
	}

	.header-row__column.column-logo .header-logo .header-logo--c {
		opacity: 0;
	}

	.site-header.scrolled .header-row__column.column-logo .header-logo {
		max-width: 170px;
	}

	.site-header.scrolled .header-row__column.column-logo .header-logo .header-logo--c {
		opacity: 1;
	}

	.site-header.scrolled .header-row__column.column-logo .header-logo .header-logo--w {
		opacity: 0;
	}


}

/*laptop 1*/
@media (min-width: 1025px) and (max-width: 1439px) {

	.site-header {
		padding: var(--header-padding-sm-laptop);
	}

	.site-header__row {
		padding: var(--header-row-padding-sm-laptop);
	}

}

/*laptop 2*/
@media (min-width: 1440px) and (max-width: 1700px) {

	.site-header {
		padding: var(--header-padding-laptop);
	}

	.site-header__row {
		padding: var(--header-row-padding-laptop);
	}

}

/*RESPONSIVE*/
