/*
 * Styles de base : éléments, niveaux typographiques, liens, composants.
 *
 * Chargé après la CSS dynamique de GeneratePress, dont il neutralise la
 * palette (--contrast, --base-2, --accent) sans y toucher : même spécificité,
 * mais plus tard dans le document.
 */

/* ---------------------------------------------------------------- Socle. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	/* Ligatures et chiffres elzéviriens : ce que ces Garamond savent faire. */
	font-feature-settings: 'kern' 1, 'liga' 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background-color: var(--color-selection);
	color: var(--color-ink);
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: var(--rule);
	margin: var(--space-lg) 0;
}

/* ------------------------------------------- Niveaux typographiques (§3). */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	color: var(--color-ink);
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-md);
	text-wrap: balance;
}

/*
 * Un titre de page remplit sa ligne avant de passer à la suivante : équilibré,
 * « Association des Amis de l’œuvre de Claude Vigée » se coupait au milieu
 * alors que la ligne avait encore place, et paraissait bridé. « pretty »
 * garde seulement d’un mot orphelin sur la dernière ligne. Les titres de
 * section, courts, restent équilibrés.
 */
h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-display);
	text-wrap: pretty;
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
}

p {
	margin: 0 0 var(--space-md);
}

p:last-child {
	margin-bottom: 0;
}

/*
 * Le très fin (300) est réservé au H1 d’accueil : c’est le seul endroit où la
 * Cormorant a la place de le porter sans devenir illisible.
 */
.cvigee-titre-accueil {
	font-family: var(--font-display);
	font-weight: var(--fw-thin);
	font-size: var(--fs-h1-home);
	line-height: 0.98;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
}

.cvigee-titre-revue {
	font-size: var(--fs-h1-revue);
	line-height: var(--lh-display);
}

.cvigee-sous-titre {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: var(--fw-regular);
	font-size: var(--fs-subtitle);
	line-height: 1.4;
	color: var(--color-text-secondary);
	text-wrap: pretty;
	margin: var(--space-md) 0 0;
}

.cvigee-secondaire {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	color: var(--color-text-secondary);
}

/* Une actualité, où qu’elle paraisse : date en étiquette, texte en corps. */
.cvigee-actualite__date {
	font-family: var(--font-ui);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-xs);
}

.cvigee-actualite__texte {
	font-size: var(--fs-body);
	line-height: var(--lh-body-sm);
	color: var(--color-ink);
	margin: 0;
	max-width: var(--measure);
}

.cvigee-actualite__texte a {
	color: var(--color-accent);
}

.cvigee-actualite__texte a:hover,
.cvigee-actualite__texte a:focus {
	color: var(--color-ink);
}

/* Mentions : rôles, dates, pages. */
.cvigee-mention {
	font-size: var(--fs-meta);
	line-height: var(--lh-body-sm);
	color: var(--color-text-muted);
}

/* ------------------------------------------------------------- Liens. */

/*
 * Texte courant et listes : encre, survol accent, jamais de soulignement.
 * Le soulignement est réservé aux liens PDF, où il signale un téléchargement.
 */
a {
	color: var(--color-ink);
	text-decoration: none;
	transition: color 120ms ease;
}

a:hover,
a:focus {
	color: var(--color-accent);
}

/* Dans un paragraphe de lecture, un lien doit se voir : il prend l’accent. */
/*
 * Liens dans le texte courant : accent, souligné fin et discret, qui s’affirme
 * au survol et au focus. Ciblés par leur conteneur de contenu éditorial — texte
 * des pages et des actualités (et leurs extraits), biographies, éditoriaux,
 * résumés, bibliographies —, et seulement les liens sans classe : les liens de
 * structure qui s’y trouveraient (boutons, « Lire… (PDF) », étiquettes) gardent
 * leur habillage. Les liens visités ne changent pas de couleur.
 */
.cvigee-prose a:not([class]),
.cvigee-page-texte__corps a:not([class]),
.cvigee-editoriale__chapeau a:not([class]),
.cvigee-assoc__contenu a:not([class]),
.cvigee-projet__texte a:not([class]),
.cvigee-actualites__extrait a:not([class]),
.cvigee-biblio__reference a:not([class]) {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-accent-underline);
	text-underline-offset: 0.2em;
}

.cvigee-prose a:not([class]):visited,
.cvigee-page-texte__corps a:not([class]):visited,
.cvigee-editoriale__chapeau a:not([class]):visited,
.cvigee-assoc__contenu a:not([class]):visited,
.cvigee-projet__texte a:not([class]):visited,
.cvigee-actualites__extrait a:not([class]):visited,
.cvigee-biblio__reference a:not([class]):visited {
	color: var(--color-accent);
}

.cvigee-prose a:not([class]):hover,
.cvigee-prose a:not([class]):focus-visible,
.cvigee-page-texte__corps a:not([class]):hover,
.cvigee-page-texte__corps a:not([class]):focus-visible,
.cvigee-editoriale__chapeau a:not([class]):hover,
.cvigee-editoriale__chapeau a:not([class]):focus-visible,
.cvigee-assoc__contenu a:not([class]):hover,
.cvigee-assoc__contenu a:not([class]):focus-visible,
.cvigee-projet__texte a:not([class]):hover,
.cvigee-projet__texte a:not([class]):focus-visible,
.cvigee-actualites__extrait a:not([class]):hover,
.cvigee-actualites__extrait a:not([class]):focus-visible,
.cvigee-biblio__reference a:not([class]):hover,
.cvigee-biblio__reference a:not([class]):focus-visible {
	color: var(--color-accent);
	text-decoration-color: var(--color-accent);
}

/* Liens d’action : accent, survol encre. */
.cvigee-lien-action {
	font-family: var(--font-ui);
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-nav);
	color: var(--color-accent);
}

.cvigee-lien-action:hover,
.cvigee-lien-action:focus {
	color: var(--color-ink);
}

/*
 * Lien-étiquette : la seule forme d’« appel à l’action » du site. Pas de
 * bouton plein — parti pris de la maquette, à conserver.
 */
/*
 * Étiquette de l’échelle « action » : petites capitales espacées, sourdes. Les
 * onglets de la page « Vie et œuvre » et les dénombrements sous la titraille des
 * index la partagent — c’est la même voix, celle d’une indication de service, et
 * elle ne doit se régler qu’à un seul endroit.
 */
/*
 * Exergue : une citation mise en tête, retenue par un filet vertical plutôt que
 * par des guillemets ou un fond. Le trait dit « ceci n’est pas de nous » sans
 * rien peser, et l’attribution ferme le bloc en petites capitales sourdes.
 */
.cvigee-exergue {
	margin: 0 0 28px;
	padding: 0 0 0 26px;
	border-left: 1px solid var(--color-rule);
}

.cvigee-exergue__citation {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 21px;
	line-height: 1.45;
	color: var(--color-text);
	margin: 0;
	padding: 0;
	border: 0;
	text-wrap: pretty;
}

.cvigee-exergue__citation > p { margin: 0 0 var(--space-sm); }
.cvigee-exergue__citation > p:last-child { margin-bottom: 0; }

.cvigee-exergue__source {
	font-family: var(--font-ui);
	font-style: normal;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 14px 0 0;
}

.cvigee-etiquette-action {
	font-family: var(--font-ui);
	font-size: var(--fs-action);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-action);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/*
 * L’étiquette de la section où l’on se trouve : accent et graisse. L’onglet
 * ouvert y arrive par son attribut, les index par la classe — c’est le même
 * état, et il se règle ici.
 */
.cvigee-etiquette-action--courante,
.cvigee-onglet[aria-selected="true"] {
	color: var(--color-accent);
	font-weight: var(--fw-semibold);
}

.cvigee-lien-etiquette {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--color-accent);
	border-bottom: 1px solid var(--color-accent-underline);
	padding-bottom: 3px;
}

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

/*
 * Lien-étiquette encadré : même registre que .cvigee-lien-etiquette, mais posé
 * dans un filet. Réservé aux actions principales d’une page — le téléchargement
 * d’un numéro complet.
 *
 * Bordé et non plein : au repos la surface reste le papier. Le survol inverse
 * le contraste comme dans la maquette — un état passager, pas un aplat de fond.
 */
.cvigee-lien-encadre {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--fs-action);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-action);
	text-transform: uppercase;
	color: var(--color-accent);
	background: transparent;
	border: 1px solid var(--color-accent);
	padding: 13px 26px;
	transition: color 120ms ease, background-color 120ms ease;
}

/* Au repos le bouton reste creux ; l’aplat n’apparaît qu’au survol. */
.cvigee-lien-encadre:hover,
.cvigee-lien-encadre:focus {
	color: var(--color-bg);
	background-color: var(--color-accent);
}

/* Lien vers un PDF : capitales, souligné discret qui s’affirme au survol. */
.cvigee-lien-pdf {
	font-family: var(--font-body);
	/* Un demi-point de plus et une graisse moyenne : ce lien se cherchait. */
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--color-accent);
	border-bottom: 1px solid var(--color-accent-underline);
	padding-bottom: 2px;
}

.cvigee-lien-pdf:hover,
.cvigee-lien-pdf:focus {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* ------------------------------------------- Étiquette de rubrique (kicker). */

.cvigee-rubrique {
	font-family: var(--font-ui);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--space-md);
}

/* Variante sourde, pour les libellés de service (« Actualité »). */
.cvigee-rubrique--sourde {
	color: var(--color-text-muted);
}

/*
 * Filet accent de 2px sous une étiquette de rubrique : il ouvre le bloc qu’elle
 * annonce, plutôt que de le fermer par le haut.
 */
.cvigee-rubrique--filet {
	border-bottom: var(--rule-accent);
	padding-bottom: var(--space-xs);
}

/*
 * Libellé de section en bas de casse : « Tous les numéros », « Sommaire »,
 * « Éditorial ». Même registre que les étiquettes, mais sans capitales ni
 * interlettrage large, qui n’ont de sens que sur des capitales.
 */
.cvigee-rubrique--titre {
	/*
	 * Un cran au-dessus des étiquettes en capitales : en bas de casse, 13px
	 * s’efface, d’autant que ces libellés ouvrent une section entière.
	 */
	font-size: var(--fs-meta);
	text-transform: none;
	letter-spacing: var(--ls-nav);
}

/* ------------------------------------------------------- Accessibilité. */

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* Lien d’évitement de GeneratePress : rendu conforme à la charte. */
.screen-reader-text:focus {
	background-color: var(--color-bg);
	color: var(--color-accent);
	font-family: var(--font-ui);
	font-size: var(--fs-meta);
	border: 1px solid var(--color-accent);
	padding: var(--space-sm) var(--space-md);
	z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/*
 * Mot soudé par le module de typographie (« peut-être ») : jamais coupé au
 * trait d’union.
 */
.cvigee-insecable {
	white-space: nowrap;
}