/*
 * core/button — survols.
 *
 * theme.json decrit deja le bouton plein et son :hover. Ce fichier ne traite que
 * les deux cas qu'il ne sait PAS couvrir :
 *
 *  1. le bouton fantome, qui est un style de bloc ;
 *  2. le bouton dont la couleur vient d'une classe de palette.
 *
 * Le cas 2 est un vrai defaut, pas une coquetterie : WordPress imprime les
 * classes de palette (.has-base-background-color, .has-contrast-color…) avec
 * !important. Elles ecrasent donc le :hover de theme.json, qui n'en a pas.
 * Resultat : un bouton pose sur un hero — « Commencer ici » — n'avait aucun
 * survol. Seul un !important peut lui en rendre un.
 */

/* Transition commune : la couleur change, elle ne saute pas. */
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

/*
 * Survol perceptible : le bouton se soulève d'un cran et prend une ombre.
 * Un simple changement de teinte passait inaperçu sur un bleu vif (revue
 * pix-flow, retour #9). Sans mouvement demandé, seule la couleur change.
 */
@media (prefers-reduced-motion: no-preference) {

	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 0.5rem 1.25rem -0.5rem rgb(0 0 0 / 0.45);
	}
}

/*
 * Bouton fantome.
 * Action secondaire : meme encombrement que le bouton plein, moins de poids.
 */
.wp-block-button.is-style-gaia-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border-strong);
}

.wp-block-button.is-style-gaia-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-gaia-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/*
 * Bouton inverse : clair sur fond sombre (hero photographique, banniere).
 *
 * Au repos il porte le fond de page ; au survol il passe a l'accent. L'accent
 * est le seul choix dont le contraste sur `base` soit GARANTI : audit-contrast
 * verifie la paire « accent / fond » a 4,5:1 dans chaque variation. Le survol
 * suit donc le rebranding sans qu'on ait a le revalider.
 */
.wp-block-button__link.has-base-background-color:hover,
.wp-block-button__link.has-base-background-color:focus,
.wp-block-button__link.has-surface-background-color:hover,
.wp-block-button__link.has-surface-background-color:focus {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--accent) !important;
}

/*
 * Bouton fantome inverse : contour clair sur fond sombre.
 *
 * Son texte est fige en `base` par une classe de palette, donc le survol du
 * fantome ne pouvait teindre que le fond. Le fond devenant `contrast`, le
 * texte clair reste lisible — mais on le redit ici pour que la regle ne
 * depende pas d'un effet de bord.
 */
.wp-block-button.is-style-gaia-ghost .wp-block-button__link.has-base-color {
	border-color: currentcolor;
}

.wp-block-button.is-style-gaia-ghost .wp-block-button__link.has-base-color:hover,
.wp-block-button.is-style-gaia-ghost .wp-block-button__link.has-base-color:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/*
 * Bouton fléché : le bouton plein, suivi d'une flèche qui avance au survol.
 *
 * La flèche est un masque peint en currentcolor, pas un caractère « → » : un
 * glyphe dans ::after est lu à voix haute (« flèche droite ») et change de
 * dessin avec la police de chaque variation.
 */
.wp-block-button.is-style-gaia-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.wp-block-button.is-style-gaia-arrow .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--wp--custom--transition--base);
}

.wp-block-button.is-style-gaia-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-gaia-arrow .wp-block-button__link:focus-visible::after {
	transform: translateX(0.25em);
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-button.is-style-gaia-arrow .wp-block-button__link:hover::after,
	.wp-block-button.is-style-gaia-arrow .wp-block-button__link:focus-visible::after {
		transform: none;
	}
}

@media (forced-colors: active) {

	.wp-block-button.is-style-gaia-arrow .wp-block-button__link::after {
		forced-color-adjust: none;
		background-color: ButtonText;
	}
}

/* Bouton grand : un cran de texte et de marge au-dessus du bouton courant. */
.wp-block-button.is-style-gaia-large .wp-block-button__link {
	font-size: var(--wp--preset--font-size--base);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}