/* Vocabulaire cinéma : tête d'affiche, bobine, ticket, perforations. */

/* --- Tête d'affiche ---------------------------------------------------------
 * Le film en tête n'est pas une carte. Il a son propre fond, sa propre
 * échelle : un classement où le premier ressemble au dixième est un tableau.
 */

.ccc-lead {
	position: relative;
	overflow: hidden;
	border-radius: var(--ccc-radius-lg);
	border: 1px solid var(--ccc-color-border);
	isolation: isolate;
}

.ccc-lead__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center 30%;
	opacity: 0.28;
	filter: blur(2px) saturate(0.7);
	transform: scale(1.06);
}

/* Le texte doit rester lisible quelle que soit l'image derrière. */
.ccc-lead::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		var(--ccc-color-bg) 8%,
		color-mix(in srgb, var(--ccc-color-bg) 88%, transparent) 46%,
		color-mix(in srgb, var(--ccc-color-bg) 55%, transparent) 100%
	);
}

.ccc-lead__inner {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	gap: var(--ccc-space-8);
	align-items: center;
	padding: var(--ccc-space-8);
}

.ccc-lead__poster {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	border-color: color-mix(in srgb, var(--ccc-color-accent) 30%, transparent);
}

.ccc-lead__body {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-3);
	min-width: 0;
}

.ccc-lead__rank {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-xs);
	letter-spacing: var(--ccc-tracking-wider);
	text-transform: uppercase;
	color: var(--ccc-color-accent);
}

.ccc-lead__title {
	font-family: var(--ccc-font-title);
	font-weight: 400;
	font-size: var(--ccc-text-3xl);
	line-height: var(--ccc-leading-tight);
}

.ccc-lead__title a {
	color: var(--ccc-color-text);
	text-decoration: none;
}

.ccc-lead__title a:hover {
	color: var(--ccc-color-accent);
}

.ccc-lead__meta {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-sm);
	color: var(--ccc-color-text-muted);
}

.ccc-lead__overview {
	max-width: 52ch;
	color: var(--ccc-color-text-muted);
}

.ccc-lead__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ccc-space-4);
	margin-top: var(--ccc-space-2);
}

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

@media (max-width: 48rem) {
	.ccc-lead__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ccc-space-5);
		padding: var(--ccc-space-5);
	}

	.ccc-lead__poster {
		max-width: 9rem;
	}

	.ccc-lead__title {
		font-size: var(--ccc-text-2xl);
	}
}

/* --- Bobine -----------------------------------------------------------------
 * Les suivants défilent horizontalement, comme des photogrammes. Le défilement
 * horizontal remplace une grille qui, elle, criait « tableau de bord ».
 */

.ccc-reel {
	display: flex;
	gap: var(--ccc-space-4);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block: var(--ccc-space-2) var(--ccc-space-5);
	margin-inline: calc(var(--ccc-shell-gutter) * -1);
	padding-inline: var(--ccc-shell-gutter);
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--ccc-color-border-strong) transparent;
}

.ccc-reel > li {
	flex: 0 0 9.5rem;
	scroll-snap-align: start;
	display: flex;
}

.ccc-reel::-webkit-scrollbar {
	height: 6px;
}

.ccc-reel::-webkit-scrollbar-thumb {
	background: var(--ccc-color-border-strong);
	border-radius: var(--ccc-radius-full);
}

/* --- Perforations -----------------------------------------------------------
 * Le bord d'une pellicule. Purement décoratif, donc jamais annoncé.
 */

.ccc-perfs {
	height: 18px;
	background-image: radial-gradient(
		circle at center,
		var(--ccc-color-border) 0 3.5px,
		transparent 3.6px
	);
	background-size: 22px 18px;
	background-repeat: repeat-x;
	opacity: 0.7;
}

.ccc-perfs--tight {
	background-size: 16px 18px;
}

/* --- Ticket -----------------------------------------------------------------
 * La séance devient un billet : encoches sur les côtés, ligne de déchirure.
 */

.ccc-ticket {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--ccc-space-6);
	align-items: center;
	padding: var(--ccc-space-10);
	background:
		radial-gradient(circle at left center, transparent 0 12px, var(--ccc-color-surface) 12.5px) left / 51% 100% no-repeat,
		radial-gradient(circle at right center, transparent 0 12px, var(--ccc-color-surface) 12.5px) right / 51% 100% no-repeat;
	border-radius: var(--ccc-radius-lg);
	filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45));
}

/* La ligne de déchirure, en pointillés, comme un talon détachable. */
.ccc-ticket::after {
	content: "";
	position: absolute;
	inset-block: var(--ccc-space-6);
	right: 13.5rem;
	width: 1px;
	background: repeating-linear-gradient(
		to bottom,
		var(--ccc-color-border-strong) 0 5px,
		transparent 5px 11px
	);
}

.ccc-ticket__main {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-2);
}

.ccc-ticket__stub {
	width: 11rem;
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-1);
	text-align: center;
}

.ccc-ticket__stub-label {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-2xs);
	letter-spacing: var(--ccc-tracking-wider);
	text-transform: uppercase;
	color: var(--ccc-color-text-faint);
}

@media (max-width: 44rem) {
	.ccc-ticket {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--ccc-space-5);
	}

	.ccc-ticket::after {
		inset: auto var(--ccc-space-5) auto var(--ccc-space-5);
		top: auto;
		bottom: 5.4rem;
		width: auto;
		height: 1px;
		background: repeating-linear-gradient(
			to right,
			var(--ccc-color-border-strong) 0 5px,
			transparent 5px 11px
		);
	}

	.ccc-ticket__stub {
		width: auto;
		text-align: left;
	}
}

/* --- Compte à rebours dans le talon -----------------------------------------
 * Quatre unités sur une ligne débordent d'un talon de 11rem et retombent en
 * « 3 + 1 ». Une grille 2×2 reste stable quel que soit le nombre d'unités.
 */

.ccc-ticket__stub .ccc-countdown__units {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ccc-space-2) var(--ccc-space-3);
	margin-top: var(--ccc-space-1);
	justify-items: center;
}

.ccc-ticket__stub .ccc-countdown__unit b {
	font-size: var(--ccc-text-xl);
}

.ccc-ticket__stub .ccc-countdown.is-past .ccc-countdown__units {
	display: block;
}

@media (max-width: 44rem) {
	.ccc-ticket__stub .ccc-countdown__units {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		justify-items: start;
	}
}

/* --- Note du proposant -------------------------------------------------------
 * Ce qu'un membre a écrit pour donner envie. Traitée comme une citation,
 * parce que c'en est une.
 */

.ccc-pitch {
	margin: 0;
	color: var(--ccc-color-text-muted);
	border-left: 2px solid var(--ccc-color-accent);
	padding-left: var(--ccc-space-3);
}

.ccc-pitch--tight {
	font-size: var(--ccc-text-sm);
	line-height: var(--ccc-leading-snug);
	color: var(--ccc-color-text-faint);
	border-left-width: 1px;
	padding-left: var(--ccc-space-2);
}

.ccc-pitch--lead {
	max-width: 52ch;
	font-size: var(--ccc-text-lg);
	line-height: var(--ccc-leading-snug);
	color: var(--ccc-color-text);
}

.ccc-pitch--lead p::before { content: "« "; color: var(--ccc-color-accent); }
.ccc-pitch--lead p::after  { content: " »"; color: var(--ccc-color-accent); }

.ccc-pitch--lead footer {
	margin-top: var(--ccc-space-2);
	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-text-faint);
}

.ccc-pitch--lead footer::before { content: "— "; }

/* --- Volet de rédaction ------------------------------------------------------ */

.ccc-compose {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-5);
	padding: var(--ccc-space-6);
	background: var(--ccc-color-surface);
	border: 1px solid var(--ccc-color-border-strong);
	border-radius: var(--ccc-radius-lg);
}

.ccc-compose[hidden] {
	display: none;
}

.ccc-compose__film {
	display: flex;
	align-items: center;
	gap: var(--ccc-space-4);
}

.ccc-compose__poster {
	width: 4.5rem;
	height: auto;
	border-radius: var(--ccc-radius-sm);
	border: 1px solid var(--ccc-color-border);
	flex-shrink: 0;
}

.ccc-compose__title {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-lg);
	font-weight: 700;
}

.ccc-compose__meta {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-xs);
	color: var(--ccc-color-text-faint);
}

.ccc-compose__count {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-2xs);
	color: var(--ccc-color-text-faint);
	text-align: right;
}