/*
Styles optionnels du bloc Bouton (core/button).

Chargé uniquement sur les pages qui utilisent l'un de ces styles, voir
sixclicks_enqueue_conditional_styles() dans functions.php.

L'apparence PAR DÉFAUT des boutons n'est pas ici : elle vit dans theme.json,
sous styles.elements.button.
*/
/* ------------------------------------------------- Bouton, style « Bulles »

   Reprend l'effet de l'ancien bloc ACF « buttonslim » : des blobs qui
   remontent en décalé au survol. L'original ajoutait quatre <span> dans le
   markup ; ici deux pseudo-éléments portent deux bulles chacun, ce qui donne
   le même effet sans toucher au bloc natif. */

.wp-block-button.is-style-bubbles .wp-block-button__link {
	/* Couleur des bulles. Elle doit CONTRASTER avec le fond choisi dans
	   l'éditeur : sur un fond aubergine, des bulles violettes ne se voient
	   pas. Surchargeable bouton par bouton via une classe additionnelle. */
	--bubble-color: var(--wp--preset--color--lime);
	/* Largeur d'une bulle. 30 % pour quatre bulles = 120 % : elles se
	   chevauchent, sinon un creux de fond apparaît entre elles. */
	--bubble-width: 30%;
	/* Hauteur : à 100 % la bulle tient dans le bouton et son sommet arrondi
	   reste visible. Au-delà, le haut sort du cadre et on ne voit plus qu'un
	   rectangle à bout arrondi. */
	--bubble-height: 100%;

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Le fond, la bordure et la couleur du texte ne sont pas imposés ici : ils
   viennent de theme.json ou du choix fait dans l'éditeur. WordPress génère les
   classes de preset (.has-…-background-color) avec !important, les surcharger
   serait de toute façon un combat perdu. Ce style se contente d'ajouter les
   bulles. */

/* Quatre bulles réparties sur la largeur, deux par pseudo-élément pour
   obtenir deux délais et un départ en décalé.

   « ellipse closest-side » est indispensable : sans mot-clé de taille, le
   dégradé s'étend jusqu'au coin le plus éloigné et déborde la largeur de la
   tuile — on n'en voit alors qu'une bande pleine, soit un rectangle. */
.wp-block-button.is-style-bubbles .wp-block-button__link::before,
.wp-block-button.is-style-bubbles .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: var(--bubble-width) var(--bubble-height);
	background-image:
		radial-gradient(
			ellipse closest-side,
			var(--bubble-color) 98%,
			transparent 100%
		),
		radial-gradient(
			ellipse closest-side,
			var(--bubble-color) 98%,
			transparent 100%
		);
	translate: 0 150%;
	transition: translate 0.5s ease;
}

.wp-block-button.is-style-bubbles .wp-block-button__link::before {
	background-position:
		0% 50%,
		66.7% 50%;
}

.wp-block-button.is-style-bubbles .wp-block-button__link::after {
	background-position:
		33.3% 50%,
		100% 50%;
	transition-delay: 0.12s;
}

.wp-block-button.is-style-bubbles .wp-block-button__link:hover::before,
.wp-block-button.is-style-bubbles .wp-block-button__link:hover::after,
.wp-block-button.is-style-bubbles .wp-block-button__link:focus-visible::before,
.wp-block-button.is-style-bubbles .wp-block-button__link:focus-visible::after {
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-bubbles .wp-block-button__link::before,
	.wp-block-button.is-style-bubbles .wp-block-button__link::after {
		transition: none;
	}
}

/* --------------------------------------------------- Bouton, style « Tracé »

   Un trait parcourt le contour au survol. Le SVG est injecté au rendu par
   sixclicks_button_trace_svg() : le bloc Bouton ne permet pas de l'ajouter
   depuis l'éditeur.

   Le rect porte pathLength="100", donc le contour vaut 100 unités quelle que
   soit la taille réelle du bouton : le segment fait toujours 25 % du tour. */

.wp-block-button.is-style-trace .wp-block-button__link {
	position: relative;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
	transition:
		background-color 0.6s ease,
		color 0.6s ease;
}
a.wp-block-button.is-style-trace .btn-trace:hover {
	stroke: var(--wp--preset--color--snow)!important;
}

.wp-block-button.is-style-trace .btn-trace {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	fill: none;
	stroke: transparent;
	stroke-width: 2;
	stroke-dasharray: 25 100;
	stroke-dashoffset: 25;
	transition: stroke-dashoffset 1s ease-in-out;
}


.wp-block-button.is-style-trace .wp-block-button__link:hover,
.wp-block-button.is-style-trace .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--snow);
	
}

.wp-block-button.is-style-trace .wp-block-button__link:hover .btn-trace,
.wp-block-button.is-style-trace
	.wp-block-button__link:focus-visible
	.btn-trace {
	stroke-dashoffset: -100;
		stroke: var(--wp--preset--color--snow)!important;

}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-trace .btn-trace {
		transition: none;
	}
}