/**
 * Page « Vie et œuvre » : en-tête à portrait, barre d’onglets, œuvre en
 * rubriques sur deux colonnes.
 *
 * Chargée sur le seul gabarit template-vigee.php.
 */

/* ------------------------------------------------- Colonne de lecture. */

/*
 * La page se compose sur une colonne centrée, à la mesure de lecture : en-tête
 * (titre et portrait), barre d’onglets et biographie s’y alignent, filet
 * compris, au lieu de s’arrêter aux deux tiers d’un conteneur plus large. Une
 * grille à trois pistes plutôt qu’une marge automatique, pour que la
 * bibliographie puisse s’étendre aux deux bords : liste de références qu’on
 * parcourt sur deux colonnes, elle n’a pas besoin de mesure. La barre la suit
 * quand elle est ouverte (attribut posé par onglets.js), afin que le filet ait
 * toujours la largeur de ce qu’il surplombe.
 */
.cvigee-vigee {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
}

.cvigee-vigee > * {
	grid-column: 2;
}

/* Le bloc d’onglets s’efface : barre et panneaux sont placés par la grille. */
.cvigee-onglets {
	display: contents;
}

.cvigee-onglets__barre,
.cvigee-panneau,
.cvigee-onglets > .cvigee-mention {
	grid-column: 2;
}

#bibliographie,
.cvigee-onglets[data-cvigee-actif="bibliographie"] .cvigee-onglets__barre {
	grid-column: 1 / -1;
}

/* ------------------------------------------------------------- En-tête. */

.cvigee-vigee__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-lg);
	padding: clamp(36px, 5vw, 64px) 0 var(--space-lg);
}

/*
 * Le portrait passe à droite par l’ordre, non par la source : dans le flux du
 * document l’identité vient d’abord, ce qui est l’ordre de lecture juste — et
 * l’ordre où l’image retombe quand la ligne se replie.
 */
.cvigee-vigee__identite {
	order: 1;
	min-width: 0;
	flex: 1 1 22rem;
}

.cvigee-vigee__portrait {
	order: 2;
	flex: 0 0 auto;
}

.cvigee-vigee__image {
	display: block;
	width: clamp(120px, 14vw, 180px);
	height: auto;
}

.cvigee-vigee__titre {
	font-family: var(--font-display);
	font-weight: var(--fw-thin);
	font-size: var(--fs-h1);
	line-height: 1;
	margin: 0;
}

.cvigee-vigee__dates {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: var(--fw-thin);
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.2;
	color: var(--color-text-secondary);
	margin: var(--space-sm) 0 0;
}

/* ----------------------------------------------------------- Biographie. */

/*
 * Un seul fil de lecture, à la mesure du site (la piste centrale de la grille,
 * et .cvigee-prose). La maquette met ce texte sur deux colonnes ; une
 * biographie plus haute qu’un écran obligerait alors à remonter en haut de
 * page pour lire la seconde colonne.
 */

/* -------------------------------------------------------- Bibliographie. */

.cvigee-oeuvre + .cvigee-oeuvre {
	margin-top: var(--space-lg);
}

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

/*
 * Deux colonnes, avec une largeur plancher : sous 280px par colonne le CSS
 * repasse de lui-même sur une seule, ce qui règle le petit écran sans requête
 * de média.
 */
.cvigee-oeuvre__liste {
	columns: 2 280px;
	column-gap: var(--space-lg);
	/* Deux points au-dessus de --fs-donnee : même corps que les noms de la
	   table des auteurs, dont ces listes partagent la fonction d’index. */
	font-size: 18px;
	line-height: var(--lh-body-sm);
	color: var(--color-text);
}

.cvigee-oeuvre__liste ul,
.cvigee-oeuvre__liste ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Une entrée ne se coupe jamais entre deux colonnes : une référence
 * bibliographique dont la fin réapparaît en haut de la colonne voisine est
 * illisible.
 */
.cvigee-oeuvre__liste li,
.cvigee-oeuvre__liste p {
	margin: 0;
	padding: 7px 0;
	break-inside: avoid;
}

.cvigee-oeuvre__liste em,
.cvigee-oeuvre__liste i {
	font-style: italic;
}

@media (max-width: 600px) {

	.cvigee-vigee__entete {
		gap: var(--space-md);
		padding-bottom: var(--space-sm);
	}

	.cvigee-onglets__barre {
		gap: var(--space-sm);
	}
}