/**
 * Menu principal header — calage Figma HEADER / ONGLET (Story 2.2).
 *
 * Frame Figma 1440 = logos 389×150 ; chrome sticky = échelle ~0.48 (~70–76 px H)
 * pour rester lisible sans écraser la nav. Nav 18px, gap 50px, baseline unique.
 * Breakpoint : 782px. Mobile front-page : UX-DR9 (-rotate-90, bord droit Hero).
 */

/* Tokens : proportions Figma, hauteur chrome raisonnable. */
.techniconcept-site-header {
	--cheval-logo-h: clamp( 3.25rem, 5vw, 4.75rem ); /* ~52–76 px */
	--cheval-logo-left-w: calc( var( --cheval-logo-h ) * 389 / 150 );
	--cheval-logo-right-w: calc( var( --cheval-logo-h ) * 375 / 150 );
	--cheval-nav-gap: clamp( 1.5rem, 3.5vw, 50px );
	/* ONGLET y=67 vs logo y=24 → 43/150 de la hauteur logo. */
	--cheval-nav-top: calc( var( --cheval-logo-h ) * 43 / 150 );
	--cheval-nav-lh: 27px;
}

/* Rangée : wordmark | nav | wordmark — top-align, pas de wrap. */
.techniconcept-site-header > .wp-block-group.is-layout-flex,
.techniconcept-site-header .techniconcept-site-header__inner.is-layout-flex,
.techniconcept-site-header__inner {
	display: grid;
	grid-template-columns:
		minmax(0, var( --cheval-logo-left-w ))
		minmax(0, 1fr)
		minmax(0, var( --cheval-logo-right-w ));
	align-items: start;
	justify-content: space-between;
	column-gap: clamp( 0.75rem, 2vw, 1.5rem );
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.techniconcept-site-header__wordmark {
	display: block;
	min-width: 0;
	max-width: 100%;
	line-height: 0;
	text-decoration: none;
	color: inherit;
}

.techniconcept-site-header__wordmark img {
	display: block;
	width: auto;
	height: var( --cheval-logo-h );
	max-width: 100%;
}

.techniconcept-site-header__wordmark--left {
	width: min( 100%, var( --cheval-logo-left-w ) );
}

.techniconcept-site-header__wordmark--right {
	width: min( 100%, var( --cheval-logo-right-w ) );
	justify-self: end;
	margin-left: 0;
}

.techniconcept-site-primary-nav {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-self: start;
	position: relative;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding-top: var( --cheval-nav-top );
	box-sizing: border-box;
}

.techniconcept-site-primary-nav__toggle {
	display: none;
	appearance: none;
	margin: 0;
	padding: 0.5rem;
	min-height: 44px;
	min-width: 44px;
	border: 1px solid var( --wp--preset--color--secondary, #757575 );
	border-radius: 3px;
	background: var( --wp--preset--color--background, #fff );
	color: inherit;
	font: inherit;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.techniconcept-site-primary-nav__toggle:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary, #2f2f2f );
	outline-offset: 2px;
}

.techniconcept-site-primary-nav__icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.25rem;
	height: 0.875rem;
}

.techniconcept-site-primary-nav__icon span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.techniconcept-site-primary-nav.is-nav-open .techniconcept-site-primary-nav__icon span:nth-child( 1 ) {
	transform: translateY( 6px ) rotate( 45deg );
}

.techniconcept-site-primary-nav.is-nav-open .techniconcept-site-primary-nav__icon span:nth-child( 2 ) {
	opacity: 0;
}

.techniconcept-site-primary-nav.is-nav-open .techniconcept-site-primary-nav__icon span:nth-child( 3 ) {
	transform: translateY( -6px ) rotate( -45deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.techniconcept-site-primary-nav__icon span {
		transition: none;
	}
}

.techniconcept-site-primary-nav__panel {
	display: block;
	max-width: 100%;
}

.techniconcept-site-primary-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --cheval-nav-gap );
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: baseline;
	justify-content: center;
	max-width: 100%;
}

.techniconcept-site-primary-nav__list > li {
	margin: 0;
	padding: 0;
	line-height: var( --cheval-nav-lh );
}

.techniconcept-site-primary-nav__list ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
}

.techniconcept-site-primary-nav__list a {
	text-decoration: none;
	color: inherit;
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	padding: 0;
	margin: 0;
	/* Figma ONGLET : 18px / hauteur 27 — pas de min-height 44 qui décale le rang. */
	min-height: 0;
	font-family: var( --wp--preset--font-family--mono, 'ABC Daily Slab Mono', monospace );
	font-size: var( --wp--preset--font-size--nav, 18px );
	font-weight: 300;
	line-height: var( --cheval-nav-lh );
	letter-spacing: normal;
	text-transform: uppercase;
	white-space: nowrap;
	outline: none;
	box-shadow: none;
}

/* Trait 1px sous le libellé (hover / clavier) — pas le stroke gradient interdit. */
.techniconcept-site-primary-nav__list a::after {
	content: '';
	display: block;
	height: 1px;
	width: 100%;
	margin-top: 0.1em;
	background-color: currentColor;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.2s ease;
	pointer-events: none;
}

.techniconcept-site-primary-nav__list a:focus-visible::after {
	transform: scaleX( 1 );
}

@media ( hover: hover ) {
	.techniconcept-site-primary-nav__list a:hover::after {
		transform: scaleX( 1 );
	}
}

@media ( forced-colors: active ) {
	.techniconcept-site-primary-nav__list a:focus-visible {
		outline: 2px solid CanvasText;
		outline-offset: 2px;
	}
}

.techniconcept-site-primary-nav__list a:focus,
.techniconcept-site-primary-nav__list a:focus-visible {
	outline: none;
	box-shadow: none;
	background-color: transparent;
}

@media ( prefers-reduced-motion: reduce ) {
	.techniconcept-site-primary-nav__list a::after {
		transition: none;
	}
}

/* Desktop : liens horizontaux, pas de hamburger. */
@media ( min-width: 782px ) {
	.techniconcept-site-primary-nav__toggle {
		display: none !important;
	}

	.techniconcept-site-primary-nav__panel {
		display: block !important;
	}

	.techniconcept-site-primary-nav__list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.techniconcept-site-primary-nav__list > li {
		position: relative;
		flex: 0 0 auto;
	}

	.techniconcept-site-primary-nav__list > li > ul {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 12rem;
		padding: 0.5rem 0.75rem;
		background: var( --wp--preset--color--background, #fff );
		border: 1px solid var( --wp--preset--color--secondary, #757575 );
		display: none;
		flex-direction: column;
		gap: 0.25rem;
		z-index: 210;
	}

	.techniconcept-site-primary-nav__list > li:hover > ul,
	.techniconcept-site-primary-nav__list > li:focus-within > ul {
		display: flex;
	}
}

/*
 * Mobile homepage produit (UX-DR9) : onglets verticaux collés au bord droit du Hero.
 */
@media ( max-width: 781px ) {
	/* Tous les items nav mobile : majuscules (Hero + panneau hamburger). */
	.techniconcept-site-primary-nav__list a {
		text-transform: uppercase;
	}

	.techniconcept-site-header {
		/* Figma mobile ~181×70 / 175×70 */
		--cheval-logo-h: 2.75rem; /* 44 px — compact sous hamburger / onglets */
		--cheval-nav-top: 0;
	}

	/*
	 * Mobile : meme rythme desktop — logo gauche | (nav) | logo droite.
	 * Les deux wordmarks restent visibles et collés aux bords.
	 */
	.techniconcept-site-header > .wp-block-group.is-layout-flex,
	.techniconcept-site-header .techniconcept-site-header__inner.is-layout-flex,
	.techniconcept-site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: 0.5rem;
	}

	.techniconcept-site-header__wordmark--left {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		width: min( 100%, var( --cheval-logo-left-w ) );
	}

	.techniconcept-site-header__wordmark--right {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		width: min( 100%, var( --cheval-logo-right-w ) );
	}

	.techniconcept-site-primary-nav {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		margin-left: 0;
	}

	/*
	 * Front-page : 2 colonnes logos L/R (nav hors flux).
	 * Specifite >= .techniconcept-site-header … is-layout-flex (sinon 3 cols restent).
	 */
	body.is-cheval-product-nav .techniconcept-site-header > .wp-block-group.is-layout-flex,
	body.is-cheval-product-nav .techniconcept-site-header .techniconcept-site-header__inner.is-layout-flex,
	body.is-cheval-product-nav .techniconcept-site-header__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Hors Hero : hors flux header (width/height 0). Sur Hero : règle on-hero. */
	body.is-cheval-product-nav
		.techniconcept-site-primary-nav:not( .is-cheval-nav-on-hero ) {
		padding-top: 0;
		position: static;
		width: 0;
		height: 0;
		overflow: visible;
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: stretch;
		pointer-events: none;
	}

	body.is-cheval-product-nav .techniconcept-site-header__wordmark--left {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		z-index: 1;
		min-width: 0;
		max-width: 100%;
	}

	body.is-cheval-product-nav .techniconcept-site-header__wordmark--right {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		z-index: 1;
		/* Reste dans la colonne / gouttière au scroll. */
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	body.is-cheval-product-nav .techniconcept-site-header__wordmark--right img {
		width: auto;
		max-width: 100%;
		height: var( --cheval-logo-h );
	}

	body.is-cheval-product-nav .techniconcept-site-primary-nav__toggle {
		display: none !important;
	}

	/*
	 * Mobile product (UX-DR9 / Figma) :
	 * - CARTES en haut près du header
	 * - écart égal et compact entre onglets (pas space-between sur tout le Hero)
	 * - inset droit : dans le média, pas collé au bord
	 * Ordre visuel : row + rotate(-90) origin top right → CARTES, RÉSERVER, BON CADEAU
	 */
	body.is-cheval-product-nav .techniconcept-site-primary-nav {
		/* Écart vertical égal après rotate(-90) de la liste. */
		--cheval-nav-mobile-gap: 1.25rem;
		/* Air sous le header avant le 1er onglet (CARTES). */
		--cheval-nav-mobile-top: 1.75rem;
		/* Marge intérieure droite : glyphe tourné reste dans le média (~12–16 px). */
		--cheval-nav-mobile-inset-x: calc(
			var( --cheval-chrome-pad-x, 12px ) + 2rem
		);
	}

	body.is-cheval-product-nav .techniconcept-site-primary-nav__panel {
		display: block !important;
		position: fixed;
		top: calc(
			var( --techniconcept-header-offset, 4.5rem ) +
				var( --cheval-nav-mobile-top )
		);
		right: var( --cheval-nav-mobile-inset-x );
		bottom: auto;
		left: auto;
		transform: none;
		min-width: 0;
		max-width: calc( 100vw - 2rem );
		padding: 0;
		margin: 0;
		background: transparent;
		border: 0;
		z-index: 180;
		box-sizing: border-box;
		pointer-events: none;
		overflow: visible;
	}

	/* Nav montée sur la vidéo Hero (site-header.js) — #hero ou figure média. */
	body.is-cheval-product-nav #hero.has-cheval-product-nav,
	body.is-cheval-product-nav
		#hero:has( > .techniconcept-site-primary-nav.is-cheval-nav-on-hero ),
	body.is-cheval-product-nav
		.wp-block-techniconcept-video.has-cheval-product-nav,
	body.is-cheval-product-nav
		.wp-block-techniconcept-video:has(
			> .techniconcept-site-primary-nav.is-cheval-nav-on-hero
		) {
		position: relative;
		overflow: visible;
	}

	body.is-cheval-product-nav
		.techniconcept-site-primary-nav.is-cheval-nav-on-hero {
		display: block;
		position: absolute;
		top: var( --cheval-nav-mobile-top );
		right: var( --cheval-nav-mobile-inset-x );
		bottom: auto;
		left: auto;
		width: auto;
		height: auto !important;
		margin: 0;
		padding: 0;
		transform: none;
		z-index: 5;
		overflow: visible;
		pointer-events: none;
		grid-column: unset;
		grid-row: unset;
		justify-self: unset;
	}

	body.is-cheval-product-nav
		.techniconcept-site-primary-nav.is-cheval-nav-on-hero
		.techniconcept-site-primary-nav__panel {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		height: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		transform: none;
		z-index: auto;
	}

	/*
	 * Rangée horizontale puis -90° : le gap devient l’écart vertical égal.
	 * justify flex-end + origin top right → CARTES collé en haut (DOM last).
	 */
	body.is-cheval-product-nav .techniconcept-site-primary-nav__list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: var( --cheval-nav-mobile-gap );
		width: max-content;
		height: auto;
		margin: 0;
		padding: 0;
		transform: rotate( -90deg );
		transform-origin: top right;
		pointer-events: none;
	}

	body.is-cheval-product-nav .techniconcept-site-primary-nav__list > li {
		pointer-events: auto;
		position: static;
		flex: 0 0 auto;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		transform: none;
		list-style: none;
		white-space: nowrap;
	}

	/*
	 * Figma ONGLET mobile : 15px, majuscules, blanc sur le Hero.
	 * Spécificité + !important : bat color:inherit post-intro (header CSS).
	 */
	body.is-cheval-product-nav .techniconcept-site-primary-nav__list a,
	html.is-cheval-arrival-complete
		body.is-cheval-product-nav
		.techniconcept-site-primary-nav__list
		a,
	body.is-cheval-arrival-complete.is-cheval-product-nav
		.techniconcept-site-primary-nav__list
		a {
		position: static;
		display: inline-block;
		transform: none;
		white-space: nowrap;
		min-height: 0;
		padding: 0;
		font-size: var( --wp--preset--font-size--nav-mobile, 15px );
		line-height: 1.2;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var( --wp--preset--color--background, #fff ) !important;
	}

	body.is-cheval-product-nav .techniconcept-site-primary-nav__list ul {
		display: none;
	}

	/* Hors homepage : hamburger centré entre les deux logos (Story 8.1). */
	body:not( .is-cheval-product-nav ) .techniconcept-site-primary-nav {
		padding-top: 0;
	}

	body:not( .is-cheval-product-nav ) .techniconcept-site-primary-nav__toggle {
		display: inline-flex;
	}

	body:not( .is-cheval-product-nav ) .techniconcept-site-primary-nav__panel {
		display: none;
		position: absolute;
		top: calc( 100% + 0.5rem );
		right: 0;
		left: auto;
		min-width: min( 100vw - 2rem, 20rem );
		max-width: calc( 100vw - 1.5rem );
		padding: 0.75rem 1rem;
		background: var( --wp--preset--color--background, #fff );
		border: 1px solid var( --wp--preset--color--secondary, #757575 );
		z-index: 220;
		box-sizing: border-box;
	}

	body:not( .is-cheval-product-nav )
		.techniconcept-site-primary-nav.is-nav-open
		.techniconcept-site-primary-nav__panel {
		display: block;
	}

	body:not( .is-cheval-product-nav ) .techniconcept-site-primary-nav__list {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0.25rem;
	}

	body:not( .is-cheval-product-nav ) .techniconcept-site-primary-nav__list a {
		min-height: 44px;
		padding: 0.25rem 0;
		line-height: 1.4;
		text-transform: uppercase;
	}

	body:not( .is-cheval-product-nav ) .techniconcept-site-primary-nav__list ul {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		padding-left: 1rem;
		margin-top: 0.15rem;
	}
}