/* ==========================================================================
   En-tête fixe
   - body.header-transparent : transparent sur la bannière, logo blanc.
   - .is-scrolled (ajouté par header.js) ou body.header-clair : fond blanc flouté,
     liseré vert, logo couleur.
   - html.menu-open : seuls le logo couleur et le bouton de fermeture restent visibles,
     au-dessus du menu plein écran.
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: transparent;
	transition: background .25s ease, box-shadow .25s ease;
}

.site-header__line {
	height: 4px;
	background: var(--g-green-line);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .25s ease;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 82px;
}

/* Logo : deux versions superposées, l'une ou l'autre visible */
.site-header__logo {
	display: grid;
	flex-shrink: 1;
	min-width: 0;
}

.site-logo {
	grid-area: 1 / 1;
	width: auto;
	max-width: 100%;
	height: 52px;
	object-fit: contain;
	object-position: left center;
}

.site-logo--couleur {
	visibility: hidden;
}

.site-header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 22px;
}

/* Bouton du menu (burger) */
.burger {
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 14px;
	background: var(--c-ink);
	cursor: pointer;
}

.burger:hover {
	background: var(--c-green);
}

.burger__bars {
	position: relative;
	display: block;
	width: 24px;
	height: 16px;
}

.burger__bars span {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--c-white);
	transition: transform .32s ease, opacity .2s ease;
}

.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 6.7px; }
.burger__bars span:nth-child(3) { top: 13.4px; }

/* État « défilé » ou en-tête clair */
.site-header.is-scrolled,
.header-clair .site-header {
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 2px 24px rgba(0, 0, 0, .04);
}

.site-header.is-scrolled .site-header__line,
.header-clair .site-header .site-header__line {
	transform: scaleY(1);
}

.site-header.is-scrolled .site-logo--blanc,
.header-clair .site-logo--blanc {
	visibility: hidden;
}

.site-header.is-scrolled .site-logo--couleur,
.header-clair .site-logo--couleur {
	visibility: visible;
}

/* Menu ouvert : l'en-tête passe au-dessus du menu, sans fond ni bouton Contact */
.menu-open .site-header,
.menu-open .site-header.is-scrolled,
.menu-open.header-clair .site-header {
	z-index: 400;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}

.menu-open .site-header .site-header__line,
.menu-open.header-clair .site-header .site-header__line {
	transform: scaleY(0);
}

.menu-open .site-logo--blanc {
	visibility: hidden;
}

.menu-open .site-logo--couleur {
	visibility: visible;
}

.menu-open .site-header__cta {
	visibility: hidden;
	opacity: 0;
}

.menu-open .burger__bars span:nth-child(1) { transform: translateY(6.7px) rotate(45deg); }
.menu-open .burger__bars span:nth-child(2) { opacity: 0; }
.menu-open .burger__bars span:nth-child(3) { transform: translateY(-6.7px) rotate(-45deg); }

/* Tablette et mobile */
@media (max-width: 760px) {
	.site-header__inner {
		gap: 12px;
		height: 68px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-logo {
		height: 36px;
	}

	.site-header__actions {
		gap: 10px;
	}

	.site-header__cta {
		padding: 10px 14px;
		font-size: 12px;
		box-shadow: none;
	}

	.burger {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}
}

@media (max-width: 600px) {
	.site-header__cta {
		display: none;
	}

	.site-logo {
		height: 32px;
	}
}