/*
 * Page d’un article de la revue.
 *
 * Reprend le vocabulaire du sommaire (revue.css : fil de retour, étiquette de
 * rubrique titrée, exergue, crédits, lien PDF) et le pose à la mesure de
 * lecture, comme une page de texte. Ne définit que ce qui lui est propre.
 */

/*
 * Grille de la page d’un numéro (revue.css : 826 / 238, gouttière --space-xl) :
 * la tête (retour, rubrique, titre) à gauche ; dessous, le corps à gauche et,
 * en regard du résumé, les crédits puis la couverture à droite. Le titre prend
 * toute la colonne de gauche ; seul le résumé est à la mesure de lecture.
 */
.cvigee-article {
	display: grid;
	grid-template-columns: minmax(0, 826fr) minmax(0, 238fr);
	grid-template-areas:
		"tete    ."
		"corps   credits"
		"corps   couverture";
	grid-template-rows: auto auto 1fr;
	column-gap: var(--space-xl);
	align-items: start;
	padding-bottom: var(--space-section);
}

.cvigee-article__tete       { grid-area: tete; min-width: 0; }
.cvigee-article__credits    { grid-area: credits; min-width: 0; }
.cvigee-article__corps      { grid-area: corps; min-width: 0; }
.cvigee-article__couverture { grid-area: couverture; min-width: 0; }

.cvigee-article__entete {
	padding-top: clamp(28px, 4vw, 48px);
}

/*
 * Crédits, alignés sur le haut du résumé (même retrait que lui) ; une ligne
 * pour les noms, une pour la référence.
 */
.cvigee-article__credits {
	padding-top: var(--space-lg);
}

.cvigee-article__credits p {
	margin: 0 0 var(--space-xs);
}

.cvigee-article__reference {
	font-size: 18px;
	line-height: var(--lh-body-sm);
	color: var(--color-text-muted);
}

.cvigee-article__couverture {
	margin: var(--space-lg) 0 0;
}

.cvigee-article__couverture img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--rule);
}

/* Une colonne : l’ordre du document — tête, crédits, corps, couverture. */
@media (max-width: 900px) {

	.cvigee-article {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"tete"
			"credits"
			"corps"
			"couverture";
		grid-template-rows: auto;
	}

	.cvigee-article__credits {
		padding-top: 0;
	}

	.cvigee-article__couverture {
		max-width: 200px;
	}
}

/* L’étiquette de rubrique, et le titre du dossier s’il y en a un. */
.cvigee-article__rubrique {
	margin-bottom: var(--space-md);
}

.cvigee-article__rubrique .cvigee-rubrique__titre {
	display: inline-block;
	margin-top: 8px;
	background: none;
	box-shadow: none;
}

.cvigee-article__titre {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.08;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
	/*
	 * Ni mesure de lecture ni équilibrage : un titre n’est pas un texte de
	 * lecture (comme sur la page Association). Il remplit sa ligne.
	 */
}

.cvigee-article__resume {
	max-width: var(--measure);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	padding-top: var(--space-lg);
	text-wrap: pretty;
}

.cvigee-article__resume > .cvigee-rubrique,
.cvigee-article__themes > .cvigee-rubrique {
	margin-bottom: var(--space-sm);
}

.cvigee-article__resume p {
	margin: 0 0 var(--space-sm);
}

.cvigee-article__resume p:last-child {
	margin-bottom: 0;
}

.cvigee-article__themes {
	padding-top: var(--space-lg);
}

/* Étiquettes de thèmes : des pastilles, chacune un lien vers l’index. */
.cvigee-etiquettes {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
}

.cvigee-etiquette {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-nav);
	color: var(--color-accent);
	border: 1px solid var(--color-accent-underline);
	border-radius: 999px;
	padding: 5px 14px;
	text-decoration: none;
}

.cvigee-etiquette:hover,
.cvigee-etiquette:focus {
	color: var(--color-bg);
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.cvigee-article__pdf {
	margin: var(--space-lg) 0 0;
}