/**
 * Display — eyebrow, titre hero, chapeau, placeholders visuels.
 * Composants d'affichage uniquement. Aucune mise en page.
 */

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.display {
	font-family: var(--font-display);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-display);
	max-width: 18ch;
}

.lede {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-body);
	max-width: 46ch;
}

/* Gutenberg centre les blocs plus étroits que le constrained.
   Le chapeau doit retomber sur la verticale du titre.
   Exception : un alignement centre explicite centre aussi le bloc. */
.is-layout-constrained > .lede {
	margin-inline: 0 !important;
}

.is-layout-constrained > .lede.has-text-align-center,
.is-layout-constrained > .display.has-text-align-center {
	margin-inline: auto !important;
}

.section.ruled-accent:not(:has(.columns-ruled)) > .display,
.section.ruled-accent:not(:has(.columns-ruled)) > .lede {
	margin-inline: auto !important;
	text-align: center;
}

.section.ruled-accent:not(:has(.columns-ruled)) > .wp-block-buttons {
	justify-content: center;
}

.section.section--loose.ruled-accent {
	--section-space: var(--space-3xl);
}

/* PLACEHOLDER — a supprimer une fois les visuels fournis. */
.placeholder {
	display: grid;
	place-items: center;
	background-color: var(--color-surface-alt);
	color: var(--color-line);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: var(--line-width) dashed var(--color-line);
}

.placeholder--wide {
	aspect-ratio: 16 / 9;
}

.placeholder--square {
	aspect-ratio: 1 / 1;
}