/* Layout primitives. Composed by templates, never restyled by components. */

/* --- Shell : la gouttière et la largeur max de tout le site -------------- */

.ccc-shell {
	width: 100%;
	max-width: var(--ccc-shell-max);
	margin-inline: auto;
	padding-inline: var(--ccc-shell-gutter);
}

.ccc-shell--narrow {
	max-width: var(--ccc-shell-narrow);
}

/* --- Stack : espacement vertical entre enfants directs ------------------- */

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

.ccc-stack--sm { gap: var(--ccc-space-3); }
.ccc-stack--lg { gap: var(--ccc-space-10); }
.ccc-stack--xl { gap: var(--ccc-space-16); }

/* --- Cluster : suite d'éléments sur une ligne, qui passe à la ligne ------ */

.ccc-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ccc-space-3);
}

/* --- Grille d'affiches --------------------------------------------------- */

.ccc-poster-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--ccc-poster-min), 1fr));
	gap: var(--ccc-space-6) var(--ccc-space-4);
	list-style: none;
	padding: 0;
	margin: 0;
}

/*
 * Les cellules d'une meme rangee ont deja la meme hauteur ; encore faut-il que
 * la carte la remplisse, sinon le margin-top:auto de son pied n'a rien contre
 * quoi pousser et les compteurs se desalignent des qu'un titre passe sur deux
 * lignes.
 */
.ccc-poster-grid > li {
	display: flex;
}

/* --- En-têtes de section ------------------------------------------------- */

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

.ccc-page-eyebrow,
.ccc-hero__eyebrow {
	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-page-title {
	font-family: var(--ccc-font-title);
	font-weight: 400;
	font-size: var(--ccc-text-3xl);
}

.ccc-page-header__description {
	color: var(--ccc-color-text-muted);
	max-width: 60ch;
}

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

/*
 * Le titre de section est une ardoise de tournage : bande rayée, texte, puis
 * le trait qui file jusqu'au bord. Ce trait remplace l'ancienne
 * border-bottom, qui aurait traversé le clap.
 */
.ccc-section__title {
	display: flex;
	align-items: center;
	gap: var(--ccc-space-4);
	font-size: var(--ccc-text-xl);
	letter-spacing: var(--ccc-tracking-wide);
	text-transform: uppercase;
	padding-bottom: var(--ccc-space-3);
}

.ccc-section__title::before {
	content: "";
	flex: 0 0 auto;
	width: 2.75rem;
	height: 0.9rem;
	border-radius: 2px;
	background: repeating-linear-gradient(
		115deg,
		var(--ccc-color-text) 0 7px,
		var(--ccc-color-bg) 7px 14px
	);
	box-shadow: 0 0 0 1px var(--ccc-color-border-strong);
}

.ccc-section__title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ccc-color-border);
}

/* Découpage lettre à lettre. Les lettres sont masquées aux lecteurs d'écran,
   le titre portant son texte complet en aria-label. */
.ccc-letter {
	display: inline-block;
	white-space: pre;
}

/* --- Hero ---------------------------------------------------------------- */

.ccc-hero {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-4);
	padding-block: var(--ccc-space-8) var(--ccc-space-4);
}

.ccc-hero__title {
	font-family: var(--ccc-font-title);
	font-weight: 400;
	font-size: var(--ccc-text-4xl);
	letter-spacing: -0.01em;
}

.ccc-hero__lede {
	font-size: var(--ccc-text-lg);
	color: var(--ccc-color-text-muted);
	max-width: 52ch;
}

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

/* --- États vides --------------------------------------------------------- */

.ccc-empty {
	padding: var(--ccc-space-10) var(--ccc-space-6);
	border: 1px dashed var(--ccc-color-border);
	border-radius: var(--ccc-radius-lg);
	text-align: center;
	color: var(--ccc-color-text-muted);
	font-family: var(--ccc-font-display);
}

/* --- Texte courant ------------------------------------------------------- */

.ccc-prose {
	max-width: 68ch;
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-4);
}

.ccc-prose :is(h2, h3, h4) {
	margin-top: var(--ccc-space-4);
}

/* --- Entrées génériques et pagination ------------------------------------ */

.ccc-entry {
	padding-bottom: var(--ccc-space-6);
	border-bottom: 1px solid var(--ccc-color-border);
}

.ccc-entry__title a {
	text-decoration: none;
}

.ccc-entry__excerpt {
	color: var(--ccc-color-text-muted);
	margin-top: var(--ccc-space-2);
}

.ccc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-2);
	font-family: var(--ccc-font-display);
}

.ccc-pagination .page-numbers {
	padding: var(--ccc-space-2) var(--ccc-space-3);
	border: 1px solid var(--ccc-color-border);
	border-radius: var(--ccc-radius-md);
	text-decoration: none;
}

.ccc-pagination .page-numbers.current {
	background: var(--ccc-color-accent-deep);
	border-color: var(--ccc-color-accent-deep);
	color: var(--ccc-color-on-accent);
}

/*
 * Posée par la chorégraphie pendant qu'elle écrit des styles inline.
 *
 * Sans elle, écrire un transform sur un élément qui a déjà
 * « transition: transform » pour son survol déclenche cette transition : on
 * voyait l'entrée jouer, puis une seconde animation de 160 ms au moment où
 * les styles inline étaient retirés.
 */
.ccc-no-transition,
.ccc-no-transition::before,
.ccc-no-transition::after {
	transition: none !important;
}