/* Fiche d'un film et panneau de vote associé. */

.ccc-film-page {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: var(--ccc-space-10);
	align-items: start;
}

.ccc-film-page__poster .ccc-poster {
	position: sticky;
	top: var(--ccc-space-8);
}

.ccc-film-page__title {
	font-size: var(--ccc-text-3xl);
}

.ccc-film-page__original {
	font-family: var(--ccc-font-display);
	color: var(--ccc-color-text-muted);
}

.ccc-film-page__meta {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-sm);
	color: var(--ccc-color-text-faint);
}

.ccc-film-page__cast {
	font-size: var(--ccc-text-sm);
	color: var(--ccc-color-text-muted);
}

.ccc-film-page__credits {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-1);
	padding-top: var(--ccc-space-5);
	border-top: 1px solid var(--ccc-color-border);
	font-size: var(--ccc-text-sm);
	color: var(--ccc-color-text-faint);
}

/* --- Étiquettes ------------------------------------------------------------ */

.ccc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ccc-tag {
	padding: var(--ccc-space-1) var(--ccc-space-3);
	border: 1px solid var(--ccc-color-border);
	border-radius: var(--ccc-radius-full);
	font-size: var(--ccc-text-xs);
	color: var(--ccc-color-text-muted);
}

.ccc-badge {
	align-self: flex-start;
	padding: var(--ccc-space-1) var(--ccc-space-3);
	background: var(--ccc-color-accent-dim);
	border: 1px solid var(--ccc-color-accent);
	border-radius: var(--ccc-radius-full);
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-xs);
	letter-spacing: var(--ccc-tracking-wide);
	text-transform: uppercase;
	color: var(--ccc-color-accent);
}

/* --- Panneau de vote -------------------------------------------------------- */

.ccc-vote-panel__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ccc-space-5);
	padding: var(--ccc-space-5);
	background: var(--ccc-color-surface);
	border: 1px solid var(--ccc-color-border);
	border-radius: var(--ccc-radius-lg);
}

.ccc-like--lg {
	font-size: var(--ccc-text-lg);
	padding: var(--ccc-space-3) var(--ccc-space-5);
}

.ccc-vote-panel__count {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-lg);
	color: var(--ccc-color-accent);
}

.ccc-vote-panel__note {
	font-size: var(--ccc-text-sm);
	color: var(--ccc-color-text-faint);
}

@media (max-width: 46rem) {
	.ccc-film-page {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ccc-space-6);
	}

	.ccc-film-page__poster {
		max-width: 14rem;
	}

	.ccc-film-page__poster .ccc-poster {
		position: static;
	}
}