/*
 * Découverte V2 — the shared editorial components.
 *
 * Ruled rows, hairlines and type carry structure. Cards appear only where a
 * photograph IS the content, and never twice in a row.
 *
 * NOTE ON SELF-SUFFICIENCY. Every component declares its own type, colour and
 * spacing rather than inheriting an element default. That is not verbosity: the
 * site runs SiloPress, whose frontend stylesheet styles bare `article h2`,
 * `article h3`, `article p`, `article a` and `article figure`. A descendant
 * selector like that outranks our element-level rules, so a preview built on
 * `<article>` would silently pick up a 1.5rem italic heading and a 3rem margin.
 * Components that state their own values are immune to it.
 */

/* The catch-all for markup inside our components that carries no class of ours
   and would otherwise be styled by a host plugin's bare element selector. */
:is(.dcv-masthead, .dcv-preview, .dcv-index) :is(h1, h2, h3, h4, p, figure, figcaption, blockquote):not([class*="dcv-"]) {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	max-width: none;
}

/* --- the nameplate --------------------------------------------------------- */

/*
 * A NAMEPLATE, NOT A HERO. See the note in template-parts/masthead.php: an
 * archive exists to put a reader in front of articles, and every pixel above the
 * first one is a cost. Three lines and a hairline, in roughly 230px.
 *
 * The hairline at the foot is the nameplate's own; the first section below it
 * carries no top border, so the page opens on exactly one rule.
 */
.dcv-masthead {
	max-width: var(--dcv-canvas-max);
	margin-inline: auto;
	padding: var(--dcv-space-lg) var(--dcv-gutter) var(--dcv-space-md);
	border-bottom: 1px solid var(--dcv-line);
}

/*
 * The nine illustrated entrances are full-width bands, not framed plates. The
 * illustration sits behind an opaque olive reading ground, then emerges through
 * a directional veil. This guarantees contrast while letting the art feel like
 * depth inside the Hero instead of an image placed beside it (ADR-0030).
 */
.dcv-masthead--hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	width: 100%;
	max-width: none;
	min-height: clamp(24rem, 45vw, 34rem);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-bottom: 0;
	background: var(--dcv-olive-deep);
	box-shadow: inset 0 -1px var(--dcv-on-olive-line);
}

.dcv-masthead--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to top,
			var(--dcv-olive-deep) 0%,
			oklch(0.205 0.019 132 / 0.72) 20%,
			oklch(0.205 0.019 132 / 0.16) 58%,
			oklch(0.205 0.019 132 / 0) 82%
		),
		linear-gradient(
			to right,
			var(--dcv-olive-deep) 0%,
			var(--dcv-olive-deep) 31%,
			oklch(0.205 0.019 132 / 0.92) 43%,
			oklch(0.205 0.019 132 / 0.48) 68%,
			oklch(0.205 0.019 132 / 0.16) 100%
		);
}

.dcv-masthead--hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		circle at 76% 28%,
		oklch(0.800 calc(var(--dcv-cat-c) * 0.62) var(--dcv-cat-h) / 0.16),
		transparent 32%
	);
}

.dcv-masthead__art {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--dcv-olive-deep);
}

.dcv-masthead__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
	filter: saturate(0.88) contrast(1.035);
	transform: scale(1.012);
}

.dcv-masthead--hero .dcv-masthead__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--dcv-canvas-max);
	margin-inline: auto;
	padding: clamp(3.5rem, 7vw, 6.25rem) var(--dcv-gutter) clamp(2.5rem, 5vw, 4.25rem);
}

.dcv-masthead--hero .dcv-masthead__rule {
	max-width: min(100%, 46rem);
}

.dcv-masthead--hero .dcv-masthead__kicker { color: var(--dcv-cat-glow); }

.dcv-masthead--hero .dcv-masthead__rule-line {
	background: linear-gradient(to right, var(--dcv-cat-glow), var(--dcv-on-olive-line) 58%);
}

.dcv-masthead--hero .dcv-masthead__figure,
.dcv-masthead--hero .dcv-masthead__title { color: var(--dcv-on-olive); }

.dcv-masthead--hero .dcv-masthead__unit,
.dcv-masthead--hero .dcv-masthead__standfirst { color: var(--dcv-on-olive-muted); }

.dcv-masthead--hero .dcv-masthead__title {
	max-width: 16ch;
	margin-top: var(--dcv-space-md);
	font-size: clamp(2.5rem, 1.55rem + 4vw, 5rem);
	letter-spacing: -0.035em;
	text-shadow: 0 2px 24px oklch(0.16 0.018 132 / 0.28);
}

.dcv-masthead--hero .dcv-masthead__standfirst {
	max-width: 56ch;
	font-size: var(--dcv-text-prose);
	line-height: 1.55;
}

/*
 * The rule row: what this page is on the left, how much of it there is on the
 * right, and the rule that ties them together. Everything on it is metadata at
 * metadata scale — a page has one headline, and it is the title below.
 */
.dcv-masthead__rule {
	display: flex;
	align-items: center;
	gap: var(--dcv-space-sm);
	margin: 0;
	padding: 0;
}

.dcv-masthead__kicker {
	display: flex;
	align-items: center;
	gap: var(--dcv-space-2xs);
	color: var(--dcv-cat-ink);
	margin: 0;
	flex: none;
}

/* The rule leaves the kicker in the section's own pigment and fades to the
   page's hairline. The only place the colour is stated at full width. */
.dcv-masthead__rule-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--dcv-cat-line), var(--dcv-line) 45%);
	min-width: var(--dcv-space-sm);
}

/* Always the real number: a padded count would be a lie the design does not need. */
.dcv-masthead__count {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	flex: none;
	white-space: nowrap;
}

.dcv-masthead__figure {
	font-family: var(--dcv-font-display);
	font-size: var(--dcv-text-base);
	line-height: 1;
	color: var(--dcv-ink);
	font-variant-numeric: tabular-nums;
}

.dcv-masthead__unit { color: var(--dcv-muted); }

.dcv-masthead__title {
	font-family: var(--dcv-font-display);
	font-weight: 700;
	font-style: normal;
	color: var(--dcv-ink);
	margin: var(--dcv-space-sm) 0 0;
	padding: 0;
	font-size: var(--dcv-display-2);
	line-height: var(--dcv-leading-display);
	letter-spacing: -0.026em;
	max-width: 20ch;
	text-wrap: balance;
}

.dcv-masthead__standfirst {
	margin: var(--dcv-space-xs) 0 0;
	font-style: normal;
	max-width: 64ch;
	font-size: var(--dcv-text-base);
	line-height: 1.6;
	color: var(--dcv-muted);
}

/* On a phone the rule row stacks rather than squeezing the count off the edge. */
@media (max-width: 34rem) {
	.dcv-masthead__rule { flex-wrap: wrap; gap: var(--dcv-space-2xs); }
	.dcv-masthead__rule-line { display: none; }
	.dcv-masthead__count { width: 100%; }

	.dcv-masthead--hero {
		min-height: clamp(27rem, 135vw, 33rem);
	}

	.dcv-masthead--hero::before {
		background:
			linear-gradient(
				to top,
				var(--dcv-olive-deep) 0%,
				var(--dcv-olive-deep) 30%,
				oklch(0.205 0.019 132 / 0.88) 52%,
				oklch(0.205 0.019 132 / 0.18) 100%
			),
			linear-gradient(
				to right,
				oklch(0.205 0.019 132 / 0.9),
				oklch(0.205 0.019 132 / 0.18)
			);
	}

	.dcv-masthead__image { object-position: 68% center; }

	.dcv-masthead--hero .dcv-masthead__content {
		padding-top: 7.5rem;
		padding-bottom: var(--dcv-space-lg);
	}

	.dcv-masthead--hero .dcv-masthead__count { color: var(--dcv-on-olive-muted); }

	.dcv-masthead--hero .dcv-masthead__title {
		margin-top: var(--dcv-space-sm);
		font-size: clamp(2.35rem, 11vw, 3.35rem);
	}
}

/* --- the preview, both families -------------------------------------------- */

.dcv-preview { position: relative; }

.dcv-preview__label {
	margin: 0 0 var(--dcv-space-2xs);
	padding: 0;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * The Context label carries the Article's own section colour — but only in the
 * visual family, where there are three of them on a section and each one is an
 * editorial choice. Twelve coloured labels down an index would be a badge row
 * by another name, so an index row states its pigment when it is addressed.
 */
.dcv-preview--visual .dcv-preview__label { color: var(--dcv-cat-ink); }

.dcv-preview__title {
	font-family: var(--dcv-font-display);
	font-weight: 700;
	font-style: normal;
	font-size: var(--dcv-display-4);
	line-height: var(--dcv-leading-title);
	letter-spacing: -0.006em;
	color: var(--dcv-ink);
	margin: 0;
	padding: 0;
	text-wrap: pretty;
}

.dcv-preview__link {
	color: inherit;
	font-style: normal;
	text-decoration: none;
	background-image: linear-gradient(var(--dcv-cat-ink), var(--dcv-cat-ink));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--dcv-duration) var(--dcv-ease);
}

.dcv-preview:hover .dcv-preview__link,
.dcv-preview__link:focus-visible { background-size: 100% 1px; }

/* The whole preview is a click target for a mouse; the title carries the link
   for a keyboard and a screen reader. */
.dcv-preview__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dcv-preview__excerpt {
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-base);
	font-style: normal;
	margin: var(--dcv-space-2xs) 0 0;
	padding: 0;
	color: var(--dcv-muted);
	line-height: 1.55;
	max-width: 58ch;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Visual family — the photograph is the content, so it earns a frame. */
.dcv-preview--visual .dcv-preview__figure {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--dcv-radius);
	margin-bottom: var(--dcv-space-sm);
}

.dcv-preview--visual .dcv-preview__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--dcv-duration-slow) var(--dcv-ease);
}

.dcv-preview--visual:hover .dcv-preview__image { transform: scale(1.03); }

/* Index family — a ruled row. Numeral in the gutter, thumbnail only when the
   cadence calls for one. */
.dcv-preview--index {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--dcv-space-sm);
	align-items: start;
}

.dcv-preview--index.dcv-preview--illustrated {
	grid-template-columns: 2.75rem minmax(0, 1fr) clamp(5rem, 12vw, 9rem);
}

.dcv-preview__numeral {
	margin: 0;
	font-family: var(--dcv-font-display);
	font-style: normal;
	font-size: var(--dcv-text-sm);
	color: var(--dcv-muted);
	padding-top: 0.35em;
	font-variant-numeric: tabular-nums;
}

.dcv-preview--index .dcv-preview__figure {
	margin: 0;
	padding: 0;
	grid-column: 3;
	grid-row: 1;
	overflow: hidden;
	border-radius: var(--dcv-radius);
}

.dcv-preview--index .dcv-preview__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dcv-preview--index .dcv-preview__body { grid-column: 2; grid-row: 1; }

@media (max-width: 40rem) {
	/* Mobile is composed, not stacked: the row reduces to numeral and title. */
	.dcv-preview--index,
	.dcv-preview--index.dcv-preview--illustrated {
		grid-template-columns: 2rem minmax(0, 1fr);
	}

	.dcv-preview--index .dcv-preview__figure { display: none; }
	.dcv-preview--index .dcv-preview__excerpt { display: none; }
}

/* --- the index ------------------------------------------------------------- */

.dcv-index {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
}

.dcv-index__row {
	padding-block: var(--dcv-space-sm);
	border-bottom: 1px solid var(--dcv-line);
	transition: background-color var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * The row answers in its own Article's pigment: the faintest wash of it as the
 * ground, and the numeral — the one piece of the row that is pure apparatus —
 * taking the colour at full strength.
 */
.dcv-index__row:hover { background-color: var(--dcv-cat-wash); }

.dcv-index__row:hover .dcv-preview__numeral,
.dcv-index__row:focus-within .dcv-preview__numeral { color: var(--dcv-cat-ink); }

.dcv-index__row:hover .dcv-preview__label,
.dcv-index__row:focus-within .dcv-preview__label { color: var(--dcv-cat-ink); }

/* --- pagination: the crawlable baseline, styled as a ruled row -------------- */

.dcv-pagination { margin-top: var(--dcv-space-lg); }

.dcv-pagination__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dcv-space-2xs);
	margin: 0;
	padding: 0;
}

.dcv-pagination__item a,
.dcv-pagination__item span {
	position: relative;
	isolation: isolate;
	display: inline-block;
	padding: var(--dcv-space-2xs) var(--dcv-space-xs);
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--dcv-radius);
	color: var(--dcv-muted);
	transition: color var(--dcv-duration-fast) var(--dcv-ease),
	            border-color var(--dcv-duration-fast) var(--dcv-ease);
}

/* The same plate as an action, on the same theme pair, at the size a page number
   deserves. A fixed olive here would vanish against the dark canvas. */
.dcv-pagination__item a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--dcv-ink);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-pagination__item a:hover::before,
.dcv-pagination__item a:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
	transition-duration: var(--dcv-duration);
}

.dcv-pagination__item a:hover,
.dcv-pagination__item a:focus-visible {
	color: var(--dcv-canvas);
	border-color: var(--dcv-ink);
}

.dcv-pagination__item .current {
	color: var(--dcv-ink);
	border-color: var(--dcv-line-strong);
}

/* --- actions --------------------------------------------------------------- */

/*
 * ONE GESTURE FOR EVERY ACTION ON THE SITE: a plate wipes in from the left, the
 * trailing Mark advances, and the label lands on a ground that INVERTS the
 * surface the action is standing on.
 *
 * The inversion is the whole idea. A hover that darkens a fill by one step is a
 * state a reader has to go looking for; a plate that arrives is one they cannot
 * miss — and it takes the label from "passes AA" to a contrast that is not in
 * question:
 *
 *   on the canvas      terracotta or outlined  ->  ink plate, canvas-coloured label
 *   on an olive band   terracotta or outlined  ->  gold plate, olive-deep label
 *
 * On the canvas the plate is the theme PAIR — `--dcv-ink` on `--dcv-canvas` — so
 * it inverts correctly by construction rather than by luck: near-black under
 * cream type in light, cream under near-black type in dark, 14.8:1 either way.
 * A fixed olive plate was tried first and measured 1:1 against the dark canvas —
 * the effect simply vanished in dark mode.
 *
 * On the olive band the pair would be wrong, because the band does not flip: gold
 * takes the plate there, and both gold and olive are theme-constant, so that
 * branch is identical in both themes too. The surface decides which branch by
 * overriding two custom properties — never by writing a second set of hover
 * rules.
 *
 * The plate ENTERS FROM THE LEFT AND LEAVES TO THE RIGHT, so a pointer crossing a
 * row of actions reads as movement in one direction rather than a row of lamps
 * switching on and off. Leaving is faster than arriving: that asymmetry is most of
 * what makes a hover feel answered rather than sticky.
 *
 * Hover is never the only affordance. Every rule below is also a :focus-visible
 * rule, nothing here carries meaning that is not already in the label, and the
 * focus ring sits outside the plate where it lands on the page, not on the button.
 */

.dcv-action {
	/* The three properties a surface overrides. Nothing else is per-surface. */
	--dcv-action-plate: var(--dcv-ink);
	--dcv-action-on-plate: var(--dcv-canvas);

	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: var(--dcv-space-2xs);
	padding: 0.7em 1.4em;
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--dcv-radius);
	background: transparent;
	color: var(--dcv-on-olive);
	cursor: pointer;
	transition: color var(--dcv-duration-fast) var(--dcv-ease),
	            border-color var(--dcv-duration-fast) var(--dcv-ease),
	            transform var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * TWO LAYERS, BOTH BEHIND THE LABEL, AND THE ELEMENT ITSELF PAINTS NOTHING.
 *
 * The resting fill is `::after` and the arriving plate is `::before`, stacked at
 * -2 and -1. That is not decoration: a `<button>` paints its own background above
 * a negative-z-index pseudo-element in Chrome, so the plate was invisible on the
 * only two `<button type="submit">` actions in the theme while working perfectly
 * on every `<a>`. Giving the element no background of its own removes the layer
 * that was covering it, and makes the component behave identically whichever
 * element it is written on.
 */
.dcv-action::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: inherit;
	background: var(--dcv-accent-action);
}

/* The plate. Inside the border, so the border stays the engraved edge. */
.dcv-action::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--dcv-action-plate);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-action:hover::before,
.dcv-action:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
	transition-duration: var(--dcv-duration);
}

.dcv-action:hover,
.dcv-action:focus-visible {
	color: var(--dcv-action-on-plate);
	border-color: var(--dcv-action-plate);
}

.dcv-action:active { transform: translateY(1px); }

/*
 * The cue advances with the plate. Marked explicitly rather than selected by
 * position: an action can also carry a LEADING Mark — the 404's search action
 * carries a loupe — and that one is a noun, not a direction, so it stays put.
 */
.dcv-action__cue { transition: transform var(--dcv-duration) var(--dcv-ease); }

.dcv-action:hover .dcv-action__cue,
.dcv-action:focus-visible .dcv-action__cue { transform: translateX(0.34em); }

/* The quiet action states its edge at rest, because it has no fill to state it. */
.dcv-action--quiet {
	color: var(--dcv-ink);
	/* A hairline at 32% ink reads as a rule, not as the boundary of a control:
	   measured 2.3:1 against the canvas, under WCAG 1.4.11's 3:1 for a component
	   boundary. The muted tone is still quiet and is 5.6:1. */
	border-color: var(--dcv-muted);
}

.dcv-action--quiet::after { background: transparent; }

/*
 * On the olive band the plate inverts the other way: the olive it would otherwise
 * arrive as is the ground it is already standing on, so the gold takes the plate
 * and the olive takes the label.
 */
.dcv-open .dcv-action,
.dcv-band .dcv-action {
	--dcv-action-plate: var(--dcv-cat-glow);
	--dcv-action-on-plate: var(--dcv-olive-deep);
}

.dcv-open .dcv-action--quiet,
.dcv-band .dcv-action--quiet {
	color: var(--dcv-on-olive);
	border-color: var(--dcv-on-olive-line);
}

/* Disabled says so in tone and in the cursor, and stops the plate entirely. */
.dcv-action[disabled],
.dcv-action[aria-busy="true"] { cursor: progress; }
.dcv-action[disabled]::before,
.dcv-action[aria-busy="true"]::before { transform: scaleX(0); }

.dcv-empty {
	padding-block: var(--dcv-space-lg);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-prose);
}

/* --- « Charger plus » ------------------------------------------------------- */

.dcv-more {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dcv-space-2xs);
	margin-top: var(--dcv-space-md);
}

.dcv-more__button[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.dcv-more__status {
	margin: 0;
	font-size: var(--dcv-text-xs);
	color: var(--dcv-muted);
	min-height: 1.2em;
}

.dcv-more[data-error="true"] .dcv-more__status { color: var(--dcv-cat-ink); }