/* Tir d'Amitié - page TV (écran de régie publique).
   Consomme les tokens de design partagés avec ta-front.css.
   Le :root est dupliqué ici car la page TV ne charge pas ta-front.css. */

:root {
	/* Palette de marque */
	--ta-red:        #DC2321;
	--ta-red-dark:   #b51c1a;
	--ta-red-soft:   #fde8e8;

	/* Texte & surfaces */
	--ta-text:        #1F1F1F;
	--ta-text-muted:  #5e5e5e;
	--ta-border:      #ebebeb;
	--ta-bg:          #ffffff;
	--ta-bg-alt:      #fafafa;

	/* Sémantique (utilisé pour le live indicator) */
	--ta-success:     #2e7d32;

	/* Spacing 4/8 */
	--ta-space-1: 0.25rem;
	--ta-space-2: 0.5rem;
	--ta-space-3: 0.75rem;
	--ta-space-4: 1rem;
	--ta-space-5: 1.5rem;
	--ta-space-6: 2rem;

	/* Type scale */
	--ta-text-xs:   0.75rem;
	--ta-text-sm:   0.875rem;
	--ta-text-base: 1rem;
	--ta-text-lg:   1.25rem;
	--ta-text-xl:   1.75rem;
	--ta-text-2xl:  2.5rem;

	/* Weights */
	--ta-fw-regular: 400;
	--ta-fw-medium:  500;
	--ta-fw-semi:    600;
	--ta-fw-bold:    700;

	/* Typo & transitions */
	--ta-font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--ta-transition-fast: 150ms ease;

	/* Tokens spécifiques à la TV (couleurs podium ; pas réutilisés ailleurs) */
	--tv-row-alt:  #f7f7f7;
	--tv-podium-1: #fff7d6;
	--tv-podium-2: #f0f0f0;
	--tv-podium-3: #fde7d3;
	--tv-line:     #e5e7eb;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background: var(--ta-bg);
	color: var(--ta-text);
	font-family: var(--ta-font-family);
}

.tv {
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Indicateur "live" : timestamp du dernier reload + point vert pulsant. */
.tv-updated {
	position: absolute;
	bottom: var(--ta-space-3);
	right: var(--ta-space-5);
	display: flex;
	align-items: center;
	gap: var(--ta-space-2);
	font-size: var(--ta-text-sm);
	color: var(--ta-text-muted);
	pointer-events: none;
	z-index: 10;
}
.tv-updated__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ta-success);
	animation: tv-pulse 1.5s ease-in-out infinite;
}
@keyframes tv-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(0.85); }
}

/* ─── Header ──────────────────────────────────────────────────────── */
.tv-header {
	display: flex;
	align-items: center;
	gap: var(--ta-space-5);
	padding: 1.25rem var(--ta-space-6);
	border-top: 8px solid var(--ta-red);
	border-bottom: 2px solid var(--ta-red);
	background: var(--ta-bg);
}
.tv-header__logo {
	height: 64px;
	width: auto;
}
.tv-header__title {
	font-size: 2.4rem;
	font-weight: var(--ta-fw-bold);
	color: var(--ta-text);
	flex: 1;
	line-height: 1;
}
.tv-header__edition {
	font-size: 1.4rem;
	color: var(--ta-text);
}

/* ─── Panneaux ────────────────────────────────────────────────────── */
.tv-panels {
	flex: 1;
	position: relative;
	overflow: hidden;
}
.tv-panel {
	position: absolute;
	inset: 0;
	padding: var(--ta-space-5) var(--ta-space-6) var(--ta-space-6);
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.tv-panel.is-active {
	opacity: 1;
	pointer-events: auto;
}
.tv-panel__title {
	font-size: 2rem;
	font-weight: var(--ta-fw-bold);
	margin: 0 0 var(--ta-space-4);
	color: var(--ta-text);
}
.tv-panel__title small {
	font-size: inherit;
	color: var(--ta-text);
	font-weight: inherit;
	margin-left: var(--ta-space-2);
}
.tv-panel__scroll {
	flex: 1;
	overflow: hidden;
	position: relative;
}
.tv-panel__scroll-inner {
	will-change: transform;
}

/* ─── Tableau ─────────────────────────────────────────────────────── */
.tv-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.6rem;
	line-height: 1.3;
}
.tv-table th {
	text-align: left;
	padding: var(--ta-space-2) var(--ta-space-3);
	background: var(--ta-red);
	color: #fff;
	font-weight: var(--ta-fw-semi);
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.tv-table th.tv-num,
.tv-table td.tv-num {
	text-align: center;
	width: 5rem;
}
.tv-table th.tv-total,
.tv-table td.tv-total {
	text-align: right;
	width: 8rem;
	padding-right: 1.25rem;
}
.tv-table td {
	padding: var(--ta-space-2) var(--ta-space-3);
	border-bottom: 1px solid var(--tv-line);
}
.tv-table tbody tr:nth-child(even) { background: var(--tv-row-alt); }
.tv-table tbody tr:nth-child(1) td { font-weight: var(--ta-fw-bold); background: var(--tv-podium-1); }
.tv-table tbody tr:nth-child(2) td { background: var(--tv-podium-2); }
.tv-table tbody tr:nth-child(3) td { background: var(--tv-podium-3); }
.tv-rang { font-weight: var(--ta-fw-bold); }

/* ─── Résumé ──────────────────────────────────────────────────────── */
.tv-resume {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ta-space-5) 3rem;
	font-size: 1.6rem;
	align-content: start;
}
.tv-resume__block h3 {
	margin: 0 0 var(--ta-space-2);
	color: var(--ta-text);
	font-size: 1.5rem;
	border-bottom: 2px solid var(--ta-red);
	padding-bottom: var(--ta-space-1);
}
.tv-resume__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tv-resume__list li {
	display: flex;
	justify-content: space-between;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--tv-line);
}
.tv-resume__list li:last-child { border-bottom: none; }
.tv-resume__list .tv-rank {
	font-weight: var(--ta-fw-bold);
	color: var(--ta-text);
	width: 2rem;
}
.tv-resume__list .tv-name { flex: 1; }
.tv-resume__list .tv-total {
	font-weight: var(--ta-fw-bold);
	color: var(--ta-text);
}
.tv-empty {
	color: var(--ta-text-muted);
	font-size: 1.4rem;
	padding: var(--ta-space-6) 0;
}

/* ─── Barre de progression ────────────────────────────────────────── */
.tv-progress {
	height: 4px;
	background: var(--tv-podium-2);
	position: relative;
	overflow: hidden;
}
.tv-progress__bar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background: var(--ta-red);
	transition: width 12s linear;
}

/* ─── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.tv-panel { transition: none !important; }
	.tv-panel__scroll-inner { transform: none !important; transition: none !important; }
	.tv-progress__bar { transition: none !important; }
}

/* ─── Slide partenaires (slide finale, logos côte à côte) ─────────── */
.tv-partenaires {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ta-space-8, 4rem);
	flex-wrap: wrap;
	min-height: 60vh;
	padding: var(--ta-space-6, 2rem);
}
.tv-partenaires__item {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	padding: var(--ta-space-5, 1.5rem) var(--ta-space-6, 2rem);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	flex: 0 1 600px;
	max-width: 45vw;
	height: 35vh;
}
/* Layouts spécialisés selon le nombre de donateurs. */
.tv-partenaires--count-1 .tv-partenaires__item { flex-basis: 60vw; max-width: 70vw; height: 50vh; }
.tv-partenaires--count-3 .tv-partenaires__item,
.tv-partenaires--count-4 .tv-partenaires__item { flex-basis: 30vw; max-width: 32vw; height: 28vh; }
.tv-partenaires--count-5 .tv-partenaires__item,
.tv-partenaires--count-6 .tv-partenaires__item { flex-basis: 24vw; max-width: 26vw; height: 24vh; }
.tv-partenaires__logo {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
@media (max-width: 900px) {
	.tv-partenaires { gap: var(--ta-space-5, 1.5rem); }
	.tv-partenaires__item { flex-basis: 80vw; max-width: 80vw; }
}

/* ─── Breakpoint mobile pour TV (staff qui consulte sur téléphone) ─── */
@media (max-width: 600px) {
	.tv-header {
		flex-wrap: wrap;
		padding: var(--ta-space-3) var(--ta-space-4);
		gap: var(--ta-space-3);
	}
	.tv-header__title {
		font-size: 1.6rem;
		flex-basis: 100%;
		order: 1;
	}
	.tv-header__edition {
		font-size: 1rem;
	}
	.tv-header__logo {
		height: 40px;
	}
	.tv-panel {
		padding: var(--ta-space-3) var(--ta-space-4);
	}
	.tv-panel__title {
		font-size: 1.3rem;
	}
	.tv-table {
		font-size: 1.05rem;
	}
	.tv-table th {
		font-size: 0.85rem;
		padding: var(--ta-space-1) var(--ta-space-2);
	}
	.tv-table td {
		padding: var(--ta-space-1) var(--ta-space-2);
	}
	/* Résumé en 1 colonne sur mobile. */
	.tv-resume {
		grid-template-columns: 1fr;
		gap: var(--ta-space-3);
		font-size: 1rem;
	}
	.tv-resume__block h3 {
		font-size: 1.1rem;
	}
}