/* Accueil : bloc séance, compte à rebours, renvois de section. */

.ccc-screening {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-3);
	padding: var(--ccc-space-6);
	background: var(--ccc-color-surface);
	border: 1px solid var(--ccc-color-border);
	border-left: 3px solid var(--ccc-color-accent);
	border-radius: var(--ccc-radius-lg);
}

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

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

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

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

/* ::first-letter ne s'applique qu'aux blocs : cibler <time>, qui est en
   ligne, ne fait rien. C'est le paragraphe qui porte la capitale. */
.ccc-screening__when::first-letter {
	text-transform: uppercase;
}

.ccc-screening__pending {
	color: var(--ccc-color-text-faint);
	font-style: italic;
}

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

/* --- Compte à rebours ------------------------------------------------------ */

.ccc-countdown__units {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-5);
	margin-top: var(--ccc-space-2);
}

.ccc-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}

.ccc-countdown__unit b {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-2xl);
	color: var(--ccc-color-accent);
	/* Les chiffres ne doivent pas faire danser la ligne à chaque seconde. */
	font-variant-numeric: tabular-nums;
}

.ccc-countdown__unit small {
	font-size: var(--ccc-text-2xs);
	letter-spacing: var(--ccc-tracking-wide);
	text-transform: uppercase;
	color: var(--ccc-color-text-faint);
}

.ccc-countdown.is-past .ccc-countdown__units {
	font-family: var(--ccc-font-display);
	color: var(--ccc-color-accent);
}

/* --- Renvoi en bas de section ---------------------------------------------- */

.ccc-section__more {
	font-family: var(--ccc-font-display);
	font-size: var(--ccc-text-sm);
	letter-spacing: var(--ccc-tracking-wide);
	text-transform: uppercase;
}

/* Les chiffres glissent : l'ancien monte, le nouveau arrive d'en bas. */
.ccc-countdown__unit b {
	position: relative;
	display: inline-block;
	overflow: hidden;
	line-height: 1.05;
}

.ccc-countdown__digits {
	display: inline-block;
}

/* Le chiffre sortant est superposé au nouveau le temps de la transition. */
.ccc-countdown__unit b > .ccc-countdown__digits:not(:last-child) {
	position: absolute;
	inset: 0;
}