/* ---- Hero de la page produit-match (fond bleu, affiche des équipes) ---- */
.nt-phero {
	position: relative;
	overflow: hidden;
	color: var(--nt-color-text);
	isolation: isolate;
}

/* Fond pleine largeur (motif de la charte ; remplaçable par une image via filtre). */
.nt-phero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #10203a;
	background-image:
		radial-gradient(60% 45% at 50% 42%, rgba(87, 196, 244, 0.12), transparent 62%),
		repeating-radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 62px),
		linear-gradient(180deg, #21304f 0%, #16233c 55%, #0f1b30 100%);
	background-size: cover;
	background-position: center;
}

.nt-phero__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(1.5rem, 6vw, 3rem) var(--nt-gutter) clamp(1.75rem, 6vw, 3.25rem);
	text-align: center;
}

.nt-phero__top {
	margin: 0;
	color: var(--nt-color-muted);
	font-size: clamp(0.9rem, 3.2vw, 1.05rem);
	font-weight: 500;
}

.nt-phero__sep {
	height: 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin: clamp(0.9rem, 3vw, 1.25rem) auto;
	max-width: 620px;
}

.nt-phero__meta {
	margin: 0 0 clamp(1.1rem, 4vw, 1.6rem);
	color: var(--nt-color-muted);
	font-size: clamp(0.95rem, 3.2vw, 1.1rem);
	line-height: 1.5;
}
.nt-phero__venue,
.nt-phero__comp { display: block; }

/* Affiche : nom · drapeau · heure · drapeau · nom — TOUJOURS sur une seule
   ligne (nowrap) ; les tailles se réduisent via clamp() pour tenir sans
   couper ni déborder, de 320 px au desktop. */
.nt-phero__match {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.3rem, 1.6vw, 1.15rem);
}
.nt-phero__team {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.3rem, 1.4vw, 0.9rem);
	min-width: 0;
	flex: 0 1 auto;
}
.nt-phero__team--home { justify-content: flex-end; }
.nt-phero__team--away { justify-content: flex-start; }
.nt-phero__name {
	font-weight: 700;
	font-size: clamp(0.95rem, 4.9vw, 2.6rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.nt-phero__time {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: clamp(0.95rem, 4.2vw, 2.2rem);
	color: var(--nt-color-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Pastille losange (drapeau/écusson), même technique que l'en-tête. */
.nt-phero__badge {
	flex: 0 0 auto;
	width: clamp(22px, 6vw, 46px);
	height: clamp(22px, 6vw, 46px);
	background: var(--nt-color-border);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	overflow: hidden;
	display: inline-block;
}
.nt-phero__badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.nt-phero__match { gap: clamp(1rem, 3vw, 2rem); }
}