/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author: UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/* ==========================================================================
   Navbar Metronomi – Barre fixe haut gauche avec remplissage au scroll
   ========================================================================== */

/* Container principal : fixe en haut, prend toute la largeur */
.metronomi-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	pointer-events: none;
}

/* Wrap : contient la barre + le hover menu, reçoit le :hover
   Padding-bottom crée une zone invisible entre barre et menu
   pour que la souris ne quitte jamais le wrap */
.metronomi-navbar__wrap {
	position: relative;
	width: var(--metronomi-navbar-width);
	margin: var(--metronomi-navbar-margin-top) 0 0 var(--metronomi-navbar-margin-left);
	pointer-events: auto;
	isolation: isolate;
	padding-bottom: 11px; /* = l'écart entre barre et menu */
}

/* Inner : la barre fermée */
.metronomi-navbar__inner {
	position: relative;
	width: 100%;
	padding: var(--metronomi-navbar-padding-y) var(--metronomi-navbar-padding-x);
	box-sizing: border-box;
	
	background: var(--metronomi-navbar-bg);
	backdrop-filter: blur(var(--metronomi-navbar-blur));
	-webkit-backdrop-filter: blur(var(--metronomi-navbar-blur));
	border-radius: var(--metronomi-navbar-radius);
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 2;
	isolation: isolate;
}

/* Barre de remplissage au scroll — barre fermée
   Pas de transition : mis à jour via rAF pour 0 latence */
.metronomi-navbar__inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: var(--metronomi-navbar-fill);
	border-radius: var(--metronomi-navbar-radius);
	width: calc(var(--metronomi-navbar-fill-progress, 0) * 1%);
	max-width: 100%;
	z-index: -1;
	pointer-events: none;
	will-change: width;
}

/* Barre de remplissage au scroll — hover menu */
.metronomi-hover::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: var(--metronomi-navbar-fill);
	border-radius: 10px;
	width: calc(var(--metronomi-navbar-fill-progress, 0) * 1%);
	max-width: 100%;
	z-index: -1;
	pointer-events: none;
	will-change: width;
}

/* ==========================================================================
   Hover Menu (Figma node 91:3038)
   465×601px, bg rgba(255,255,255,0.2), blur 10px, radius 10px
   Séparé de la barre par 11px, padding 40px
   ========================================================================== */

.metronomi-hover {
	position: absolute;
	top: 100%;  /* le padding-bottom du wrap crée l'écart de 11px */
	left: 0;
	width: 100%;
	height: 601px;
	box-sizing: border-box;
	
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 10px;
	z-index: 1;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	/* Fermé par défaut */
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	padding: 0 40px;
	transform: translateY(-8px);
	
	transition:
		opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Au hover : menu s'ouvre */
.metronomi-navbar__wrap:hover .metronomi-hover {
	opacity: 1;
	pointer-events: auto;
	padding: 40px;
	transform: translateY(0);
}

/* Header du hover : caché (la barre reste visible au dessus) */
.metronomi-hover__header {
	display: none;
}

/* ==========================================================================
   Nav items (Figma node 85:2568)
   flex-col, gap 30px, couleur #EFEFEF, jaune au hover
   ========================================================================== */

.metronomi-hover__nav {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

/* Chaque item : flex row, baseline, gap 12px */
.metronomi-hover__item,
.metronomi-hover__item:link,
.metronomi-hover__item:visited {
	display: flex;
	align-items: baseline;
	gap: 12px;
	text-decoration: none !important;
	color: #EFEFEF;
	transition: color 0.15s ease;
}

.metronomi-hover__item:hover {
	color: #FBEB33;
}

/* Titre : Bauziet-wide Regular 38px, line-height = font-size */
.metronomi-hover__title {
	font-family: "Bauziet-wide", var(--metronomi-font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
	color: inherit;
	flex-shrink: 0;
	transition: color 0.15s ease;
}

/* Sous-label : Bauziet-wide Light 16px, tracking 1.6px — reste gris au hover */
.metronomi-hover__subtitle {
	font-family: "Bauziet-wide", var(--metronomi-font-display);
	font-size: 16px;
	font-weight: 300;
	line-height: 1;
	color: #EFEFEF !important;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	white-space: nowrap;
}

/* ==========================================================================
   Footer (Figma node 85:2581)
   / CONTACT + CTA row (bordure jaune + bouton play)
   ========================================================================== */

.metronomi-hover__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 17px;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
}

/* / CONTACT */
.metronomi-hover__contact {
	font-family: "Bauziet-wide", var(--metronomi-font-display);
	font-size: 16px;
	font-weight: 300;
	line-height: 14px;
	color: #EFEFEF !important;
	text-transform: uppercase;
	letter-spacing: 1.6px;
}

/* CTA row : texte + bouton play, bordure jaune en bas */
.metronomi-hover__cta-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 20px;
	border-bottom: 2px solid #FBEB33;
}

/* CTA texte : Bauziet-wide Regular 38px, jaune, leading 38px */
.metronomi-hover__cta,
.metronomi-hover__cta:link,
.metronomi-hover__cta:visited {
	font-family: "Bauziet-wide", var(--metronomi-font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 38px;
	color: #FBEB33 !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease;
}

.metronomi-hover__cta:hover {
	opacity: 0.6;
	color: #FBEB33 !important;
}

/* Bouton play : cercle jaune 41px */
.metronomi-hover__play {
	width: 41px;
	height: 41px;
	border-radius: 50%;
	background: #FBEB33;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.metronomi-hover__play:hover {
	transform: scale(1.08);
	opacity: 0.9;
}
.metronomi-hover__play-icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #0B1315;
	margin-left: 2px;
}

/* ==========================================================================
   Animation staggered des items au hover — apparition fluide en cascade
   ========================================================================== */

.metronomi-hover__item,
.metronomi-hover__footer {
	opacity: 0;
	transform: translateY(15px);
	transition:
		opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
		transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
		color 0.05s ease;
}

.metronomi-navbar__wrap:hover .metronomi-hover__item:nth-child(1) {
	opacity: 1; transform: translateY(0); transition-delay: 0.06s;
}
.metronomi-navbar__wrap:hover .metronomi-hover__item:nth-child(2) {
	opacity: 1; transform: translateY(0); transition-delay: 0.12s;
}
.metronomi-navbar__wrap:hover .metronomi-hover__item:nth-child(3) {
	opacity: 1; transform: translateY(0); transition-delay: 0.18s;
}
.metronomi-navbar__wrap:hover .metronomi-hover__item:nth-child(4) {
	opacity: 1; transform: translateY(0); transition-delay: 0.24s;
}
.metronomi-navbar__wrap:hover .metronomi-hover__footer {
	opacity: 1; transform: translateY(0); transition-delay: 0.32s;
}

/* ==========================================================================
   Logo + Icône + Toggle
   ========================================================================== */

/* Logo : 146px × 21.1px — blanc */
.metronomi-navbar__logo,
.metronomi-navbar__logo:link,
.metronomi-navbar__logo:visited,
.metronomi-navbar__logo:active {
	width: var(--metronomi-navbar-logo-width);
	height: var(--metronomi-navbar-logo-height);
	display: flex;
	align-items: center;
	flex-shrink: 0;
	
	color: #FFFFFF !important;
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-navbar-logo-size);
	font-weight: var(--metronomi-navbar-logo-weight);
	line-height: var(--metronomi-navbar-logo-line-height);
	letter-spacing: var(--metronomi-navbar-logo-spacing);
	text-decoration: none !important;
	text-transform: lowercase;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: none;
}

.metronomi-navbar__logo:hover {
	color: #FFFFFF !important;
	opacity: 0.9;
}

/* Bouton toggle */
.metronomi-navbar__toggle {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.metronomi-navbar__toggle:hover {
	opacity: 0.9;
}

/* Icône SVG : 39px × 33.915px */
.metronomi-navbar__icon {
	width: var(--metronomi-navbar-icon-width);
	height: var(--metronomi-navbar-icon-height);
	flex-shrink: 0;
	color: var(--metronomi-navbar-icon-color);
	fill: var(--metronomi-navbar-icon-color);
	display: block;
	filter: none !important;
	-webkit-filter: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.metronomi-navbar__toggle,
.metronomi-navbar__toggle:focus,
.metronomi-navbar__toggle:active {
	filter: none !important;
	box-shadow: none !important;
	outline: none;
}

/* ==========================================================================
   Body + Reset
   ========================================================================== */

body.metronomi-design-system {
	background-color: #0B1315 !important;
	color: #FFFFFF;
}

#metronomi-navbar *,
#metronomi-navbar *::before,
#metronomi-navbar *::after {
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
}

/* Bloquer le scroll quand le menu mobile est ouvert */
body.metronomi-menu-open {
	overflow: hidden !important;
}

/* ==========================================================================
   Menu ouvert au clic (.is-open) — fonctionne sur tous les écrans
   ========================================================================== */

.metronomi-hover.is-open {
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: translateY(0) !important;
}

.metronomi-hover.is-open .metronomi-hover__item:nth-child(1) {
	opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.06s;
}
.metronomi-hover.is-open .metronomi-hover__item:nth-child(2) {
	opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.12s;
}
.metronomi-hover.is-open .metronomi-hover__item:nth-child(3) {
	opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.18s;
}
.metronomi-hover.is-open .metronomi-hover__item:nth-child(4) {
	opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.24s;
}
.metronomi-hover.is-open .metronomi-hover__footer {
	opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.32s;
}

/* ==========================================================================
   Mobile (< 768px) — Pleine largeur, ouverture au clic
   ========================================================================== */

@media (max-width: 767px) {
	/* Navbar : centrée, pas de marge gauche */
	.metronomi-navbar__wrap {
		width: calc(100% - 28px);
		margin: 14px auto 0;
		padding-bottom: 0;
	}
	
	/* Barre mobile : 294px centrée, padding 16px 26px, radius 10px */
	.metronomi-navbar__inner {
		border-radius: 10px;
		padding: 16px 26px;
	}
	
	/* Logo mobile : 96px × 13.874px */
	.metronomi-navbar__logo,
	.metronomi-navbar__logo:link,
	.metronomi-navbar__logo:visited {
		width: 96px !important;
		height: 14px !important;
		font-size: 14px !important;
	}
	
	/* Icône mobile : 28px × 24.349px */
	.metronomi-navbar__icon {
		width: 28px !important;
		height: 24px !important;
	}
	
	/* Désactiver le hover sur mobile — uniquement clic */
	.metronomi-navbar__wrap:hover .metronomi-hover:not(.is-open) {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateY(-8px) !important;
	}
	
	/* Menu mobile : même style que desktop, positionné sous la barre */
	.metronomi-hover {
		position: absolute !important;
		top: calc(100% + 11px) !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 500px !important;
		border-radius: 10px !important;
		padding: 0 30px !important;
		margin: 0 !important;
		background: rgba(255, 255, 255, 0.2) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		z-index: 9998 !important;
	}
	
	/* Fill mobile : même radius */
	.metronomi-hover::before {
		border-radius: 10px !important;
	}
	
	/* Ouvert via JS : classe .is-open */
	.metronomi-hover.is-open {
		opacity: 1 !important;
		pointer-events: auto !important;
		padding: 40px 30px !important;
		transform: translateY(0) !important;
		overflow-y: auto !important;
	}
	
	/* Animations staggered quand .is-open */
	.metronomi-hover.is-open .metronomi-hover__item:nth-child(1) {
		opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.06s;
	}
	.metronomi-hover.is-open .metronomi-hover__item:nth-child(2) {
		opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.12s;
	}
	.metronomi-hover.is-open .metronomi-hover__item:nth-child(3) {
		opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.18s;
	}
	.metronomi-hover.is-open .metronomi-hover__item:nth-child(4) {
		opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.24s;
	}
	.metronomi-hover.is-open .metronomi-hover__footer {
		opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.32s;
	}
	
	/* Titres mobile : taille réduite proportionnellement */
	.metronomi-hover__title { font-size: 28px !important; }
	.metronomi-hover__subtitle { font-size: 14px !important; letter-spacing: 1.2px !important; }
	.metronomi-hover__cta { font-size: 28px !important; line-height: 30px !important; }
	.metronomi-hover__contact { font-size: 14px !important; }
	
	/* Barre fixe au dessus de l'overlay quand menu ouvert */
	body.metronomi-menu-open .metronomi-navbar__inner {
		z-index: 10000;
	}
}


/* =====================================================
   FOND ANIMÉ BLOBS — désactivé sur mobile/tablette
   Les blobs GPU (filter:blur + will-change) causent
   des stutters visuels sur iOS Safari/Chrome
   ===================================================== */
@media (max-width: 1024px) {
	.cp-blob,
	.cp-grain-overlay {
		display: none !important;
		visibility: hidden !important;
	}
}