/**
 * Boutons — deux variantes seulement : pleine et fantome.
 * Radius pilule, seule exception au radius 0 du systeme.
 */

.button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-lg);
	border: var(--line-width) solid transparent;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-base); /* brun sur orange : 5.26:1, blanc serait a 3.43:1 */
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease);
}

.button:hover {
	background-color: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.button--ghost {
	background-color: transparent;
	border-color: var(--color-line);
	color: var(--color-text);
}

.button--ghost:hover {
	border-color: var(--color-text);
	color: var(--color-text);
}

.button[aria-disabled="true"],
.button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-accent);
	text-decoration: none;
}

.link-arrow::after {
	content: "\2192";
	transition: transform var(--duration-fast) var(--ease);
}

.link-arrow:hover::after {
	transform: translateX(0.25em);
}
/* Boutons de blocs — les états de base viennent de theme.json (éditables
   par le client). Ce qui suit ne traite que ce que theme.json ne couvre
   pas : la variante contourée et la transition. */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	transition:
		background-color var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease);
}

/* Variante contourée : équivalent de .button--ghost. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border-color: var(--color-line);
	color: var(--color-text);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-base);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):active {
	background-color: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Sur fond clair, le contour suit l'inversion des tokens. */
.invert .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--color-text);
	color: var(--color-paper);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: var(--focus-width) solid var(--color-accent);
	outline-offset: var(--focus-offset);
}

@media (max-width: 1023px) {
	.section > .wp-block-buttons {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-element-button {
		transition-duration: var(--duration-none);
	}
}