/*
 * Page Artworks : barre de filtres au-dessus des vignettes, et typographie
 * cohérente avec l'accueil et le Journal : IBM Plex Sans, titres en 600 et en
 * majuscules, le reste en 400. Le texte courant garde la police du site.
 * Fond noir du site conservé. Ce fichier est chargé sur les rubriques hors
 * Journal et les pages tag (body.is-artworks-grid), les articles hors Journal
 * (body.is-artwork) et les pages News et infos (body.is-black-page).
 */

/* IBM Plex Sans (licence OFL, fichiers officiels d'IBM dans le dossier fonts/
   du plugin) : SemiBold 600 pour les titres, Regular 400 pour le reste. */
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/IBMPlexSans-Italic.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
}

/* IBM Plex Sans Condensed : titres des sommaires (vignettes) */
@font-face {
	font-family: "IBM Plex Sans Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
}

/* IBM Plex Serif : texte courant (vrais italiques et vrai gras) */
@font-face {
	font-family: "IBM Plex Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/IBMPlexSerif-Italic.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Serif";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/IBMPlexSerif-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Serif";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/IBMPlexSerif-SemiBoldItalic.woff2") format("woff2");
}

/* ------------------------------------------------------------------
   Titre de la page
   ------------------------------------------------------------------ */

body.is-artworks-grid .page-heading .page-heading__title {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 44px;
	line-height: 1;
	color: #fff;
	margin: 0;
	padding-bottom: 0;
	text-transform: uppercase;
	letter-spacing: .02em;
}

body.is-artworks-grid .page-heading .page-heading__title span,
body.is-artworks-grid .page-heading .page-heading__title a {
	color: #fff;
}

/* Une seule ligne de séparation, fine et grise (50 %), sous le titre et l'éventuelle description */
body.is-artworks-grid .page-heading .page-heading__title-section {
	padding-bottom: 18px;
	border-bottom: 1px solid #808080;
}

/* Pages tag : un tag est un projet ou un thème, pas une rubrique ; son titre
   prend la taille des titres d'œuvres (26 px) plutôt que celle des rubriques. */
body.tag.is-artworks-grid .page-heading .page-heading__title {
	font-size: 26px;
	line-height: 1.15;
	padding-bottom: 0;
}

@media (max-width: 768px) {
	body.tag.is-artworks-grid .page-heading .page-heading__title {
		font-size: 20px;
		padding-bottom: 0;
	}
}

/* Description (pages tag) : police du texte courant, gris clair lisible sur noir */
body.is-artworks-grid .page-heading .page-heading__description {
	margin-top: 18px;
	padding-bottom: 0;
}

body.is-artworks-grid .page-heading .page-heading__description p {
	max-width: 680px;
	margin: 0;
	font-family: "IBM Plex Serif", serif;
	font-size: 15px;
	line-height: 1.6;
	color: #bdbdbd;
	background: transparent;
}

body.is-artworks-grid .page-heading .page-heading__description a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.is-artworks-grid .page-heading .page-heading__description a:after {
	display: none;
}

/* Pages tag : pas de barre de filtres, un peu d'air au-dessus de la grille */
body.tag.is-artworks-grid #blog-posts-main.blog-posts {
	margin-top: 40px;
}

/* ------------------------------------------------------------------
   Barre de filtres
   ------------------------------------------------------------------ */

.artworks-filter {
	margin: 0 0 40px;
	padding: 0 0 20px;
	border-bottom: 1px solid #333;
	font-family: "IBM Plex Sans", sans-serif;
}

.artworks-filter__group {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid #333;
}

.artworks-filter__label {
	flex: 0 0 90px;
	color: #8c8c8c;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.artworks-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.artworks-filter li {
	margin: 0;
	padding: 0;
}

.artworks-filter a {
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	text-decoration: none;
	background: transparent;
	padding: 0 3px;
	transition: color .15s ease, background .15s ease;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Le soulignement animé de Kalium n'a pas sa place ici */
.wrapper .artworks-filter a:after {
	display: none;
}

.artworks-filter a:hover,
.wrapper .artworks-filter a:hover {
	color: #9000f6;
}

.artworks-filter a.is-active,
.wrapper .artworks-filter a.is-active:hover {
	color: #000;
	background: #fff;
}

.artworks-filter sup {
	margin-left: 3px;
	font-size: 10px;
	letter-spacing: 0;
	opacity: .55;
}

/* ------------------------------------------------------------------
   Vignettes : date au-dessus, titre en IBM Plex Sans 600 majuscules
   ------------------------------------------------------------------ */

body.is-artworks-grid #blog-posts-main .post-details {
	display: flex;
	flex-direction: column;
	margin-top: 14px;
	padding: 0;
	background: transparent;
}

body.is-artworks-grid #blog-posts-main .post-details .entry-header {
	margin: 0;
}

body.is-artworks-grid #blog-posts-main .post-title {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .02em;
}

body.is-artworks-grid #blog-posts-main .post-title a {
	color: #fff;
	text-decoration: none;
}

body.is-artworks-grid #blog-posts-main .post-title a:after {
	display: none;
}

body.is-artworks-grid #blog-posts-main .post-item:hover .post-title a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* Date : ligne de rubrique discrète mais lisible (contraste suffisant sur noir) */
body.is-artworks-grid #blog-posts-main .post-details .post-meta {
	order: -1;
	margin: 0 0 8px;
	padding: 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8c8c8c;
}

body.is-artworks-grid #blog-posts-main .post-details .post-meta .icon {
	display: none;
}

/* Vignettes carrées, image recadrée, pour des lignes régulières */
body.is-artworks-grid #blog-posts-main .image-placeholder {
	position: relative;
	display: block;
	padding-bottom: 100% !important;
	overflow: hidden;
}

body.is-artworks-grid #blog-posts-main .image-placeholder img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.is-artworks-grid #blog-posts-main .post-hover {
	display: none;
}

body.is-artworks-grid #blog-posts-main .post-thumbnail img {
	transition: opacity .2s ease;
}

body.is-artworks-grid #blog-posts-main .post-item:hover .post-thumbnail img {
	opacity: .85;
}

@media (max-width: 768px) {
	body.is-artworks-grid .page-heading .page-heading__title {
		font-size: 32px;
		padding-bottom: 0;
	}

	body.is-artworks-grid #blog-posts-main .post-title {
		font-size: 13px;
	}

	.artworks-filter__group {
		flex-direction: column;
		gap: 6px;
	}

	.artworks-filter__label {
		flex: none;
	}

	.artworks-filter ul {
		gap: 2px 12px;
	}

	.artworks-filter a {
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------
   Pages d'œuvres (body.is-artwork) : même mise en page que les articles
   du Journal, en version noire.
   ------------------------------------------------------------------ */

body.is-artwork {
	--a-ink: #fff;
	--a-muted: #8c8c8c;
	--a-rule: #333;
}

body.is-artwork #main-wrapper .single-post {
	padding-top: 64px;
	padding-bottom: 96px;
}

body.is-artwork #main-wrapper .single-post .post-body {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	float: none;
	width: auto;
	padding: 0;
}

body.is-artwork #main-wrapper .single-post .journal-back {
	display: inline-block;
	margin: 0 0 28px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-muted);
	text-decoration: none;
}

body.is-artwork #main-wrapper .single-post .journal-back:hover {
	color: var(--a-ink);
}

body.is-artwork #main-wrapper .single-post .journal-back:after {
	display: none;
}

body.is-artwork #main-wrapper .single-post .entry-header {
	margin: 0;
}

body.is-artwork #main-wrapper .single-post .post-title {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.12;
	color: var(--a-ink);
	background: transparent;
	margin: 0 0 24px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Date et rubriques entre deux filets */
body.is-artwork #main-wrapper .single-post .post-meta-only {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0 0 40px;
	padding: 0 0 12px;
	border-bottom: 1px solid #808080;
}

body.is-artwork #main-wrapper .post-meta {
	margin: 0;
	padding: 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-muted);
}

body.is-artwork #main-wrapper .post-meta .icon {
	display: none;
}

body.is-artwork #main-wrapper .post-meta a {
	color: var(--a-muted);
	text-decoration: none;
}

body.is-artwork #main-wrapper .post-meta a:hover {
	color: var(--a-ink);
}

body.is-artwork #main-wrapper .post-meta a:after {
	display: none;
}

/* Texte : colonne de lecture plus étroite que les images */
body.is-artwork #main-wrapper .post-formatting p,
body.is-artwork #main-wrapper .post-formatting ul,
body.is-artwork #main-wrapper .post-formatting ol,
body.is-artwork #main-wrapper .post-formatting blockquote {
	max-width: 680px;
}

body.is-artwork #main-wrapper .post-formatting p {
	background: transparent;
	color: #e8e8e8;
	line-height: 1.7;
	margin: 0 0 1.25em;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

body.is-artwork #main-wrapper .post-formatting ul,
body.is-artwork #main-wrapper .post-formatting ol {
	color: #e8e8e8;
	line-height: 1.7;
	padding-left: 1.4em;
}

/* Liens blancs soulignés (le violet du thème est peu lisible sur noir) */
body.is-artwork #main-wrapper .post-formatting a {
	color: var(--a-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

body.is-artwork #main-wrapper .post-formatting a:hover {
	color: #9000f6;
}

body.is-artwork #main-wrapper .post-formatting a:after {
	display: none;
}

body.is-artwork #main-wrapper .post-formatting h2,
body.is-artwork #main-wrapper .post-formatting h3,
body.is-artwork #main-wrapper .post-formatting h4,
body.is-artwork #main-wrapper .post-formatting h5,
body.is-artwork #main-wrapper .post-formatting h6 {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	color: var(--a-ink);
	background: transparent;
	text-transform: none;
	line-height: 1.25;
	margin: 2em 0 .7em;
}

body.is-artwork #main-wrapper .post-formatting h2 { font-size: 22px; }
body.is-artwork #main-wrapper .post-formatting h3 { font-size: 18px; }
body.is-artwork #main-wrapper .post-formatting h4 { font-size: 16px; }
body.is-artwork #main-wrapper .post-formatting h5,
body.is-artwork #main-wrapper .post-formatting h6 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* Images pleine largeur, légendes discrètes */
body.is-artwork #main-wrapper .post-formatting figure {
	margin: 2.2em 0;
}

body.is-artwork #main-wrapper .post-formatting img {
	max-width: 100%;
	height: auto;
}

body.is-artwork #main-wrapper .post-formatting figcaption,
body.is-artwork #main-wrapper .post-formatting .wp-caption-text {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--a-muted);
	margin-top: 8px;
}

body.is-artwork #main-wrapper .post-formatting hr,
body.is-artwork #main-wrapper .post-formatting .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--a-ink);
	width: 64px;
	margin: 3em 0;
	opacity: 1;
	background: none;
}

body.is-artwork #main-wrapper .post-formatting blockquote {
	margin: 2em 0;
	padding: 0 0 0 24px;
	border-left: 3px solid var(--a-ink);
	background: transparent;
}

/* Mots-clés */
body.is-artwork #main-wrapper .single-post .post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 56px;
	padding-top: 20px;
	border-top: 1px solid #808080;
}

body.is-artwork #main-wrapper .single-post .post-tags a {
	display: inline-block;
	padding: 4px 10px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--a-muted);
	background: transparent;
	border: 1px solid var(--a-rule);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

body.is-artwork #main-wrapper .single-post .post-tags a:hover {
	color: var(--a-ink);
	border-color: var(--a-ink);
}

body.is-artwork #main-wrapper .single-post .post-tags a:after {
	display: none;
}

@media (max-width: 768px) {
	body.is-artwork #main-wrapper .single-post {
		padding-top: 32px;
		padding-bottom: 64px;
	}

	body.is-artwork #main-wrapper .single-post .post-title {
		font-size: 20px;
	}

	body.is-artwork #main-wrapper .post-formatting p {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------------
   Pages News et infos (body.is-black-page)
   ------------------------------------------------------------------ */

body.is-black-page #main-wrapper .container.default-margin {
	padding-top: 48px;
	padding-bottom: 96px;
}

body.is-black-page #main-wrapper .container.default-margin p {
	max-width: 680px;
	margin: 0 0 1.25em;
	color: #e8e8e8;
	background: transparent;
	line-height: 1.7;
}

body.is-black-page #main-wrapper .container.default-margin p.has-small-font-size {
	font-size: 14px;
}

/* Paragraphes en grande taille (mots-clés de la page infos) : traités comme
   des titres, à l'échelle des titres d'articles */
body.is-black-page #main-wrapper .container.default-margin p.has-large-font-size,
body.is-black-page #main-wrapper .container.default-margin p.has-large-font-size strong {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff !important;
}

/* Mises en avant (dates des nouvelles, intitulés) : IBM Plex Sans, blanc */
body.is-black-page #main-wrapper .container.default-margin strong,
body.is-black-page #main-wrapper .container.default-margin mark,
body.is-black-page #main-wrapper .container.default-margin .has-inline-color {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	color: #fff !important;
	background: transparent;
}

body.is-black-page #main-wrapper .container.default-margin a {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

body.is-black-page #main-wrapper .container.default-margin a:hover {
	color: #9000f6;
}

body.is-black-page #main-wrapper .container.default-margin a:after {
	display: none;
}

body.is-black-page #main-wrapper .container.default-margin hr,
body.is-black-page #main-wrapper .container.default-margin .wp-block-separator {
	border: 0;
	border-top: 1px solid #fff;
	width: 64px;
	margin: 2.5em 0;
	opacity: 1;
	background: none;
}

body.is-black-page #main-wrapper .container.default-margin img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	body.is-black-page #main-wrapper .container.default-margin {
		padding-top: 24px;
		padding-bottom: 64px;
	}

	body.is-black-page #main-wrapper .container.default-margin p {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------------
   Page « Tags » (body.is-tag-cloud) et lien du titre des pages tag
   ------------------------------------------------------------------ */

body.is-artworks-grid .page-heading .page-heading__title a.tag-cloud-back {
	color: #fff;
	text-decoration: none;
}

body.is-artworks-grid .page-heading .page-heading__title a.tag-cloud-back:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

body.is-artworks-grid .page-heading .page-heading__title a.tag-cloud-back:after {
	display: none;
}

body.is-tag-cloud .tag-cloud {
	padding: 32px 0 96px;
}

body.is-tag-cloud .tag-cloud__count {
	margin: 0 0 24px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8c8c8c;
	background: transparent;
}

body.is-tag-cloud .tag-cloud__list {
	font-family: "IBM Plex Sans", sans-serif;
	line-height: 1.25;
	text-align: left;
	overflow-wrap: anywhere;
}

body.is-tag-cloud .tag-cloud__list a {
	display: inline-block;
	margin: 0 .55em .2em 0;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	vertical-align: baseline;
	transition: color .15s ease;
}

body.is-tag-cloud .tag-cloud__list a:hover {
	color: #9000f6;
}

body.is-tag-cloud .tag-cloud__list a:after {
	display: none;
}

@media (max-width: 768px) {
	body.is-tag-cloud .tag-cloud {
		padding: 20px 0 64px;
	}
}

/* ------------------------------------------------------------------
   Liens : comportement unique — soulignés au survol, sans changement
   de couleur. Dans le texte courant, un soulignement gris discret au
   repos signale le lien ; il devient plein au survol.
   ------------------------------------------------------------------ */

.wrapper .artworks-filter a:hover,
.wrapper .artworks-filter a.is-active:hover,
body.is-tag-cloud .tag-cloud__list a:hover,
body.is-artwork #main-wrapper .post-meta a:hover,
body.is-artwork #main-wrapper .single-post .journal-back:hover,
body.is-artwork #main-wrapper .single-post .post-tags a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wrapper .artworks-filter a:hover,
body.is-tag-cloud .tag-cloud__list a:hover {
	color: #fff;
}

body.is-artwork #main-wrapper .post-meta a:hover,
body.is-artwork #main-wrapper .single-post .journal-back:hover,
body.is-artwork #main-wrapper .single-post .post-tags a:hover {
	color: var(--a-muted);
}

body.is-artwork #main-wrapper .single-post .post-tags a:hover {
	border-color: var(--a-rule);
}

body.is-artwork #main-wrapper .post-formatting a,
body.is-black-page #main-wrapper .container.default-margin a,
body.is-artworks-grid .page-heading .page-heading__description a {
	text-decoration: underline;
	text-decoration-color: #808080;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.is-artwork #main-wrapper .post-formatting a:hover,
body.is-black-page #main-wrapper .container.default-margin a:hover,
body.is-artworks-grid .page-heading .page-heading__description a:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------
   Sommaires noirs : les vignettes qui mènent vers une page blanche
   (articles du Journal et des rubriques associées) ont un cadre blanc
   de 5 px, dessiné par-dessus l'image sans en changer la taille.
   ------------------------------------------------------------------ */

body.is-artworks-grid #blog-posts-main li.is-journal-post .image-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 5px solid #fff;
	pointer-events: none;
}

body.is-artworks-grid #blog-posts-main li.is-journal-post .blog-image-placeholder {
	box-shadow: inset 0 0 0 5px #fff;
}

/* ------------------------------------------------------------------
   Texte courant en IBM Plex Serif (remplace Roboto Slab, qui n'était
   chargée qu'en une graisse : italiques et gras étaient simulés)
   ------------------------------------------------------------------ */

body.is-artwork #main-wrapper .post-formatting,
body.is-artwork #main-wrapper .post-formatting p,
body.is-artwork #main-wrapper .post-formatting li,
body.is-artwork #main-wrapper .post-formatting blockquote,
body.is-artwork #main-wrapper .post-formatting td,
body.is-artwork #main-wrapper .post-formatting th,
body.is-black-page #main-wrapper .container.default-margin p,
body.is-black-page #main-wrapper .container.default-margin li {
	font-family: "IBM Plex Serif", serif;
}

body.is-artwork #main-wrapper .post-formatting strong,
body.is-artwork #main-wrapper .post-formatting b {
	font-weight: 600;
}

/* Titres des sommaires en version étroite : plus de texte par ligne */
body.is-artworks-grid #blog-posts-main .post-title {
	font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
}