/* ---- Header ---- */
.nt-header {
	background: var(--nt-color-header);
	color: var(--nt-color-text);
	border-bottom: 1px solid rgba(70, 80, 107, 0.5);
}
.nt-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 3vw, 2rem);
	min-height: var(--nt-header-height);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--nt-gutter);
}

/* Logo / placeholder */
.nt-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	color: inherit;
}
.nt-header__logo .custom-logo,
.nt-header__logo .nt-logo-img,
.nt-mobile-nav__logo .custom-logo,
.nt-mobile-nav__logo .nt-logo-img { height: clamp(34px, 9vw, 40px); width: auto; max-width: 104px; object-fit: contain; display: block; }
.nt-logo-ph {
	display: flex;
	flex-direction: column;
	line-height: 0.98;
	font-weight: 800;
	letter-spacing: 0.02em;
	font-size: clamp(0.68rem, 2.6vw, 0.9rem);
}
.nt-logo-ph b { display: block; }

/* Navigation */
.nt-nav--desktop { flex: 1 1 auto; min-width: 0; }
.nt-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 3vw, 1.25rem);
}
.nt-nav__link {
	color: var(--nt-color-text);
	text-decoration: none;
	font-size: clamp(1rem, 2.4vw, 1.125rem);
	font-weight: 500;
	white-space: nowrap;
}
.nt-nav__link:hover { color: #fff; }

/* Actions droite : panier + hamburger */
.nt-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
}

/* Icône panier */
.nt-cart {
	position: relative;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--nt-color-text);
	text-decoration: none;
	border-radius: 999px;
	transition: color var(--nt-motion) ease, background var(--nt-motion) ease;
}
.nt-cart:hover { color: var(--nt-color-accent); background: rgba(255, 255, 255, 0.06); }
.nt-cart:focus-visible { outline: 2px solid var(--nt-color-accent); outline-offset: 2px; }
.nt-cart__ico { display: block; }
.nt-cart__count {
	position: absolute;
	top: 5px;
	right: 3px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--nt-color-accent);
	color: #08203a;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
	display: none;
	box-shadow: 0 0 0 2px var(--nt-color-header);
}
.nt-cart__count.is-visible { display: block; }

.nt-burger {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	color: var(--nt-color-text);
	cursor: pointer;
}
.nt-burger__box { position: relative; display: block; width: 24px; height: 16px; }
.nt-burger__line {
	position: absolute;
	left: 0; right: 0;
	height: 2.5px;
	background: currentColor;
	border-radius: 2px;
}
.nt-burger__line:nth-child(1) { top: 0; }
.nt-burger__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nt-burger__line:nth-child(3) { bottom: 0; }

/* Mobile : masquer les liens secondaires dans le header fermé */
.nt-nav__item--secondary { display: none; }

/* ---- Menu mobile plein écran ---- */
.nt-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--nt-color-surface);
	color: var(--nt-color-text);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.nt-mobile-nav[hidden] { display: none !important; }

.nt-mobile-nav__bar {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 0.85rem var(--nt-gutter);
	background: var(--nt-color-header);
}
/* Le logo du menu ouvert reprend EXACTEMENT la taille du header fermé
   (même règle globale .nt-logo-img : height clamp(34–40px), width auto). */
.nt-mobile-nav__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.nt-mobile-nav__logo .nt-logo-ph { font-size: 0.55rem; }
.nt-mobile-nav__title { font-size: 1.125rem; font-weight: 400; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-mobile-nav__title strong { font-weight: 700; }
@media (max-width: 360px) {
	.nt-mobile-nav__bar { gap: 0.85rem; }
	.nt-mobile-nav__title { font-size: 1rem; }
}
.nt-close {
	margin-left: auto;
	width: 40px; height: 40px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	color: var(--nt-color-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.nt-mlist { list-style: none; margin: 0; padding: 0; }
.nt-mrow { position: relative; border-bottom: 1px solid var(--nt-color-border); }
.nt-mrow.is-active::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--nt-color-accent);
}
.nt-mrow__link,
.nt-mrow__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 1.15rem var(--nt-gutter);
	background: none;
	border: 0;
	color: var(--nt-color-text);
	font-family: inherit;
	font-size: 1.125rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.nt-mrow__toggle[aria-expanded="true"] { background: var(--nt-color-header); }
.nt-mrow.is-active > .nt-mrow__toggle,
.nt-mrow.is-active > .nt-mrow__link { background: var(--nt-color-header); }

/* Ligne « Carrito » du menu mobile : badge accent */
.nt-mrow--cart .nt-mrow__link { justify-content: flex-start; gap: 0.6rem; }
.nt-mrow__badge {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--nt-color-accent);
	color: #08203a;
	font-size: 0.82rem;
	font-weight: 800;
	line-height: 22px;
	text-align: center;
}

.nt-mrow__chevron {
	width: 9px; height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--nt-motion) ease;
	flex: 0 0 auto;
	margin-top: -3px;
}
.nt-mrow__toggle[aria-expanded="true"] .nt-mrow__chevron { transform: rotate(225deg); margin-top: 3px; }

.nt-submenu[hidden] { display: none; }
.nt-submenu__list { list-style: none; margin: 0; padding: 0 0 0.5rem; background: var(--nt-color-header); }
.nt-submenu__link {
	display: block;
	padding: 0.7rem var(--nt-gutter) 0.7rem calc(var(--nt-gutter) + 1rem);
	color: var(--nt-color-text);
	text-decoration: none;
	font-size: 1rem;
}
.nt-submenu__link.is-disabled { color: var(--nt-color-muted); cursor: default; }
.nt-submenu__empty { padding: 0.7rem var(--nt-gutter) 0.7rem calc(var(--nt-gutter) + 1rem); color: var(--nt-color-muted); }

/* Bas du menu : zone sponsors — emplacements administrables (filtre nt/sponsors),
   SANS logos de tiers par défaut (marques déposées). */
.nt-mobile-nav__footer { margin-top: auto; padding: 1.75rem var(--nt-gutter) 2rem; text-align: center; }
.nt-mobile-nav__sponsors-title { margin: 0 0 1rem; color: var(--nt-color-text); font-size: 0.95rem; font-weight: 400; }
.nt-sponsors { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; justify-content: center; align-items: center; }
.nt-sponsor { flex: 0 0 auto; width: clamp(56px, 17vw, 78px); height: 46px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--nt-color-border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nt-sponsor img { width: 100%; height: 100%; object-fit: contain; }
/* Emplacement portant un vrai logo (tuile deja cadree) : pas de double-cadre. */
.nt-sponsor--filled { background: none; border-color: transparent; }

/* ---- Desktop ---- */
@media (min-width: 1024px) {
	.nt-header__inner { min-height: 64px; gap: 2rem; }
	.nt-nav__list { justify-content: center; gap: clamp(1.25rem, 3vw, 3rem); }
	.nt-nav__item--secondary { display: list-item; }
	.nt-burger { display: none; }
	.nt-mobile-nav { display: none !important; }
}

/* ---- En-tête fixe pendant le défilement ---- */
/* On rend « sticky » l'élément <header> (wrapper du template-part) qui
   contient .nt-header : il reste collé en haut, le contenu défile dessous,
   sans variation de hauteur ni décalage de mise en page. Le carrousel et la
   page défilent sous l'en-tête. z-index < menu mobile (1000). */
header:has(> .nt-header),
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ---- Déroulant « Partidos / Matchs » de la barre de navigation ---- */
/* Le lien « Matchs » déploie la liste des matches (titres produits → fiches
   produits). Fonctionne desktop (survol/clic) et mobile en ligne (clic). */
.nt-nav__item--has-children { position: relative; }
.nt-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	font-size: clamp(1rem, 2.4vw, 1.125rem);
	color: var(--nt-color-text);
	white-space: nowrap;
}
.nt-nav__toggle:hover { color: #fff; }
.nt-nav__toggle:focus-visible { outline: 2px solid var(--nt-color-accent); outline-offset: 3px; border-radius: 4px; }
.nt-nav__chevron {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	transition: transform var(--nt-motion) ease;
}
.nt-nav__toggle[aria-expanded="true"] .nt-nav__chevron { transform: rotate(225deg); margin-top: 2px; }
.nt-nav__dropdown {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	min-width: 300px;
	max-width: min(440px, 92vw);
	background: var(--nt-color-header);
	border: 1px solid var(--nt-color-border);
	border-radius: 12px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
	padding: 0.35rem 0;
	z-index: 300;
	overflow: hidden;
}
.nt-nav__dropdown[hidden] { display: none; }
.nt-nav__dropdown .nt-submenu__list { padding: 0; background: transparent; }
.nt-nav__dropdown .nt-submenu__link {
	padding: 0.62rem 1.05rem;
	font-size: 0.98rem;
	line-height: 1.3;
	white-space: normal;
}
.nt-nav__dropdown .nt-submenu__link:hover { background: var(--nt-color-surface); color: #fff; }

@media (min-width: 1024px) {
	/* Ouverture au survol/focus (fonctionne même sans JavaScript). */
	.nt-nav__item--has-children:hover > .nt-nav__dropdown,
	.nt-nav__item--has-children:focus-within > .nt-nav__dropdown { display: block; }
	.nt-nav__item--has-children:hover .nt-nav__chevron,
	.nt-nav__item--has-children:focus-within .nt-nav__chevron { transform: rotate(225deg); margin-top: 2px; }
}