/**
 * En-tête des pages internes — même langage visuel que le header du hero
 * (template-parts/hero-v2.php, assets/css/hero-v2.css), demande du 25/09 :
 * un seul système de navigation pour tout le site. Jetons de couleur
 * dupliqués volontairement (mêmes valeurs, scope différent) plutôt que
 * modifier hero-v2.css : le hero reste intouché et verrouillé.
 *
 * Chargé uniquement hors accueil (voir inc/enqueue.php) — l'accueil garde
 * son propre header intégré au hero.
 */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo-variable.woff2') format('woff2-variations'), url('../fonts/archivo-variable.woff2') format('woff2');
}

.site-header-v2 {
	--vg-night:          #07111F;
	--vg-surface:        #101D33;
	--vg-surface-sunken: #0A1421;
	--vg-blue:           #175CD3;
	--vg-blue-hover:     #2F72E8;
	--vg-light:          #4C8DFF;
	--vg-white:          #F5F7FA;
	--vg-nav:            #DCE3EC;
	--vg-faint:          #7D8B9E;
	--vg-border:         #2A3E60;
	--vg-border-soft:    #1B2A40;
	--vg-font-body: 'Archivo', system-ui, sans-serif;
	--vg-radius:    6px;
	--vg-radius-lg: 8px;
	--vg-radius-sm: 4px;

	position: relative; z-index: 20;
	background: var(--vg-night);
	font-family: var(--vg-font-body);
}

.site-header-v2__inner {
	display: flex; align-items: center;
	max-width: 1440px; margin: 0 auto;
	padding: 20px 64px; gap: 28px;
}

.site-header-v2__logo-link { display: block; flex: none; margin-right: 12px; }
.site-header-v2__logo { height: 46px; width: auto; display: block; }

.site-header-v2__nav { display: flex; align-items: center; gap: 28px; font-size: 15px; color: var(--vg-nav); flex: 1; }
.site-header-v2__nav a {
	color: var(--vg-nav); padding-bottom: 4px; border-bottom: 1px solid transparent; text-decoration: none;
	white-space: nowrap; transition: color .16s ease, border-color .16s ease;
}
.site-header-v2__nav a:hover, .site-header-v2__nav a:focus-visible, .site-header-v2__nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--vg-light); }

.site-header-v2__phone {
	flex: none; display: flex; align-items: center; gap: 7px; color: var(--vg-nav); text-decoration: none;
	font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .16s ease;
}
.site-header-v2__phone:hover, .site-header-v2__phone:focus-visible { color: #FFFFFF; }
.site-header-v2__phone-icon { font-size: 15px; }

.site-header-v2__cta {
	flex: none;
	background: var(--vg-blue); color: #FFFFFF !important; border: 0; border-radius: var(--vg-radius);
	padding: 12px 22px; text-decoration: none; font-size: 14.5px; font-weight: 600; white-space: nowrap;
	transition: background .16s ease;
}
.site-header-v2__cta:hover, .site-header-v2__cta:focus-visible { background: var(--vg-blue-hover); }

.site-header-v2__phone-compact {
	display: none; flex: none; align-items: center; justify-content: center;
	width: 36px; height: 36px; margin-left: auto;
	color: var(--vg-white); text-decoration: none; font-size: 16px;
	border: 1px solid var(--vg-border); border-radius: 999px;
}

.site-header-v2__menu-toggle {
	display: none; flex-direction: column; gap: 5px; padding: 8px 4px; background: none; border: none; cursor: pointer; margin-left: auto;
}
.site-header-v2__menu-toggle span { width: 22px; height: 1px; background: var(--vg-white); }
.site-header-v2__mobile-nav { display: none; }

/* Écran intermédiaire : resserrer avant de passer au hamburger, jamais de
   retour à la ligne sur un intitulé (même règle que le hero). */
@media (min-width: 1280px) and (max-width: 1439px) {
	.site-header-v2__inner { padding: 18px 36px; gap: 18px; }
	.site-header-v2__nav { gap: 16px; }
	.site-header-v2__logo { height: 40px; }
	.site-header-v2__phone-text { display: none; }
}

@media (max-width: 1279px) {
	.site-header-v2__inner { padding: 16px 22px; }
	.site-header-v2__logo { height: 38px; }
	.site-header-v2__nav, .site-header-v2__cta, .site-header-v2__phone { display: none; }
	.site-header-v2__phone-compact { display: flex; margin-left: auto; margin-right: 14px; }
	.site-header-v2__menu-toggle { display: flex; margin-left: 0; }
	.site-header-v2__mobile-nav {
		position: relative; z-index: 4; margin: 0 22px 12px;
		background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg);
		padding: 10px; display: none; flex-direction: column;
	}
	.site-header-v2__mobile-nav.is-open { display: flex; }
	.site-header-v2__mobile-nav-head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--vg-border-soft);
		font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-faint);
	}
	.site-header-v2__mobile-nav-close {
		background: none; border: none; color: var(--vg-white); font-size: 22px; line-height: 1;
		width: 32px; height: 32px; cursor: pointer; border-radius: var(--vg-radius-sm);
	}
	.site-header-v2__mobile-nav-close:hover, .site-header-v2__mobile-nav-close:focus-visible { background: var(--vg-surface-sunken); }
	.site-header-v2__mobile-nav a {
		color: var(--vg-nav); text-decoration: none; font-size: 15px; padding: 13px 10px;
		border-bottom: 1px solid var(--vg-border-soft);
	}
	.site-header-v2__mobile-nav a:last-child { border-bottom: none; }
	.site-header-v2__mobile-nav a.site-header-v2__cta-mobile {
		color: var(--vg-white); font-weight: 600; text-align: center; margin-top: 8px;
		background: var(--vg-blue); border-radius: var(--vg-radius);
	}
}

@media (max-width: 480px) {
	.site-header-v2__inner { padding: 14px 16px; }
	.site-header-v2__logo { height: 34px; }
}