/**
 * Boutons Socialter.
 *
 * Classe à ajouter sur n'importe quel bouton pour afficher
 * la flèche à droite du texte :
 * - btn-fleche
 *
 * Style de bouton principal (CTA bleu, bordure et texte bleu foncé,
 * ombre « marketing » au survol) :
 * - btn-principal
 *   Se combine avec btn-fleche. Reprend le bouton de la maquette Figma
 *   (composant Bouton 1:403), comme le formulaire Gravity Forms.
 *
 * Bouton principal inactif :
 * - btn-principal-deactivated
 *   Même bouton que btn-principal, recouvert d'un voile blanc de faible
 *   opacité, sans animation au survol (maquette : bouton « inactif »).
 *   S'utilise seul sur le bouton d'envoi Gravity Forms, ou avec btn-principal.
 *
 * Gutenberg : classes additionnelles du bloc Bouton.
 * HTML : class="btn-fleche" sur <a>, <button> ou .wp-element-button.
 *
 * SVG : assets/svg/fleche-droite.svg
 */

.btn-fleche:not(.wp-block-button),
.wp-block-button.btn-fleche .wp-block-button__link,
.wp-block-button.btn-fleche .wp-element-button,
.wp-block-button .wp-block-button__link.btn-fleche,
.wp-block-button .wp-element-button.btn-fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.btn-fleche:not(.wp-block-button)::after,
.wp-block-button.btn-fleche .wp-block-button__link::after,
.wp-block-button.btn-fleche .wp-element-button::after,
.wp-block-button .wp-block-button__link.btn-fleche::after,
.wp-block-button .wp-element-button.btn-fleche::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../svg/fleche-droite.svg") no-repeat center / contain;
	mask: url("../svg/fleche-droite.svg") no-repeat center / contain;
}

/* Bouton principal : <a>, <button>, ou bloc Bouton Gutenberg. */
.btn-principal:not(.wp-block-button),
.wp-block-button.btn-principal .wp-block-button__link,
.wp-block-button.btn-principal .wp-element-button,
.wp-block-button .wp-block-button__link.btn-principal,
.wp-block-button .wp-element-button.btn-principal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-block-size: 2.75rem;
	margin: 0;
	padding: var(--wp--preset--spacing--xx-small, 0.375rem) 1.125rem;
	border: 0.03125rem solid var(--wp--preset--color--primary-alt-accent, #00264d);
	border-radius: var(--wp--preset--border-radius--sm, 0.375rem);
	background-color: var(--wp--preset--color--primary-alt, #80caff);
	box-shadow: none;
	opacity: 1;
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
	font-family: var(--wp--preset--font-family--primary, "Rethink Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--chapo-petit, 1.0625rem);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight, 1.1);
	letter-spacing: var(--wp--custom--letter-spacing--wide, 0.01em);
	text-decoration: none;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-principal:not(.wp-block-button):hover,
.wp-block-button.btn-principal .wp-block-button__link:hover,
.wp-block-button.btn-principal .wp-element-button:hover,
.wp-block-button .wp-block-button__link.btn-principal:hover,
.wp-block-button .wp-element-button.btn-principal:hover {
	border-width: 0.09375rem;
	background-color: var(--wp--preset--color--primary-alt, #80caff);
	box-shadow: var(--wp--preset--shadow--marketing, 0 0.25rem 0 0 #00264d);
	transform: translateY(-0.25rem);
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
}

.btn-principal:not(.wp-block-button):focus-visible,
.wp-block-button.btn-principal .wp-block-button__link:focus-visible,
.wp-block-button.btn-principal .wp-element-button:focus-visible,
.wp-block-button .wp-block-button__link.btn-principal:focus-visible,
.wp-block-button .wp-element-button.btn-principal:focus-visible {
	outline: 0.125rem solid var(--wp--preset--color--primary-alt-accent, #00264d);
	outline-offset: 0.125rem;
}

.btn-principal:not(.wp-block-button):disabled,
.btn-principal:not(.wp-block-button)[aria-disabled="true"],
.wp-block-button.btn-principal .wp-block-button__link[aria-disabled="true"] {
	border-color: #919191;
	background-color: var(--wp--preset--color--tertiary, #f7f7f7);
	box-shadow: none;
	transform: none;
	color: #919191;
	cursor: not-allowed;
}

/* Bouton principal inactif : voile blanc, pas d'ombre ni de décalage au survol. */
.btn-principal-deactivated:not(.wp-block-button),
.wp-block-button.btn-principal-deactivated .wp-block-button__link,
.wp-block-button.btn-principal-deactivated .wp-element-button {
	background-image: linear-gradient(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6));
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

.btn-principal.btn-principal-deactivated:not(.wp-block-button):hover,
.wp-block-button.btn-principal.btn-principal-deactivated .wp-block-button__link:hover,
.wp-block-button.btn-principal.btn-principal-deactivated .wp-element-button:hover {
	border-width: 0.03125rem;
	box-shadow: none;
	transform: none;
}

/* Bouton jaune (abonnement), variante « Abo » de la maquette Figma (1:403). */
.btn-jaune:not(.wp-block-button),
.wp-block-button.btn-jaune .wp-block-button__link,
.wp-block-button.btn-jaune .wp-element-button,
.wp-block-button .wp-block-button__link.btn-jaune,
.wp-block-button .wp-element-button.btn-jaune {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-block-size: 2.75rem;
	margin: 0;
	padding: var(--wp--preset--spacing--xx-small, 0.375rem) 1.125rem;
	border: none;
	border-radius: var(--wp--preset--border-radius--sm, 0.375rem);
	background-color: var(--wp--preset--color--abonnement, #fff047);
	box-shadow: none;
	opacity: 1;
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
	font-family: var(--wp--preset--font-family--primary, "Rethink Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--chapo-petit, 1.0625rem);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight, 1.1);
	letter-spacing: var(--wp--custom--letter-spacing--wide, 0.01em);
	text-decoration: none;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-jaune:not(.wp-block-button):hover,
.wp-block-button.btn-jaune .wp-block-button__link:hover,
.wp-block-button.btn-jaune .wp-element-button:hover,
.wp-block-button .wp-block-button__link.btn-jaune:hover,
.wp-block-button .wp-element-button.btn-jaune:hover,
.esh-btn.btn-jaune:hover,
.stl-btn.btn-jaune:hover {
	border: 0.09375rem solid var(--wp--preset--color--primary-alt-accent, #00264d);
	background-color: #ffe46b;
	box-shadow: var(--wp--preset--shadow--marketing, 0 0.25rem 0 0 #00264d);
	transform: translateY(-0.25rem);
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
}

.btn-jaune:not(.wp-block-button):focus-visible,
.wp-block-button.btn-jaune .wp-block-button__link:focus-visible,
.wp-block-button.btn-jaune .wp-element-button:focus-visible,
.wp-block-button .wp-block-button__link.btn-jaune:focus-visible,
.wp-block-button .wp-element-button.btn-jaune:focus-visible {
	outline: 0.125rem solid var(--wp--preset--color--primary-alt-accent, #00264d);
	outline-offset: 0.125rem;
}

.btn-jaune:not(:hover),
.wp-block-button.btn-jaune:not(:hover) .wp-block-button__link,
.wp-block-button.btn-jaune:not(:hover) .wp-element-button,
.wp-block-button:not(:hover) .wp-block-button__link.btn-jaune,
.wp-block-button:not(:hover) .wp-element-button.btn-jaune,
.esh-btn.btn-jaune:not(:hover),
.stl-btn.btn-jaune:not(:hover) {
	border: 1px solid transparent;
}

.btn-jaune:not(.wp-block-button):disabled,
.btn-jaune:not(.wp-block-button)[aria-disabled="true"],
.wp-block-button.btn-jaune .wp-block-button__link[aria-disabled="true"] {
	border: none;
	background-color: var(--wp--preset--color--tertiary, #f7f7f7);
	box-shadow: none;
	transform: none;
	color: #919191;
	cursor: not-allowed;
}

/* Bouton secondaire : contour plein au repos, contour pointillé au survol (Figma 1:403). */
.btn-secondaire:not(.wp-block-button),
.wp-block-button.btn-secondaire .wp-block-button__link,
.wp-block-button.btn-secondaire .wp-element-button,
.wp-block-button .wp-block-button__link.btn-secondaire,
.wp-block-button .wp-element-button.btn-secondaire {
	display: inline-flex;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: var(--space-6, 6px) var(--space-Marges-mobile, 18px);
	justify-content: center;
	align-items: center;
	gap: var(--space-9, 9px);
	border-radius: var(--space-6, 6px);
	border: 0.5px solid var(--Accent-fonc, #00264d);
	background: transparent;
	color: var(--Accent-fonc, #00264d);
	font-family: var(--wp--preset--font-family--primary, "Rethink Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--chapo-petit, 1.0625rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
}

.btn-secondaire:not(.wp-block-button):hover,
.wp-block-button.btn-secondaire .wp-block-button__link:hover,
.wp-block-button.btn-secondaire .wp-element-button:hover,
.wp-block-button .wp-block-button__link.btn-secondaire:hover,
.wp-block-button .wp-element-button.btn-secondaire:hover {
	border: 1.5px dashed var(--Accent-fonc, #00264d);
	color: var(--Accent-fonc, #00264d);
	text-decoration: none;
}

/* Variations du bloc Bouton (sélecteur de styles Gutenberg). */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-button-brand .wp-block-button__link,
.wp-block-button.is-style-button-brand-alt .wp-block-button__link,
.wp-block-button.is-style-button-dark .wp-block-button__link,
.wp-block-button.is-style-button-light .wp-block-button__link,
.wp-block-button.is-style-secondary-button .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 40px;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 0.5px solid var(--wp--preset--color--primary-alt-accent, #00264d);
	background-color: transparent;
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border: 1.5px dashed var(--wp--preset--color--primary-alt-accent, #00264d);
	background-color: transparent;
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
}

.wp-block-button.is-style-button-brand .wp-block-button__link:hover,
.wp-block-button.is-style-button-dark .wp-block-button__link:hover,
.wp-block-button.is-style-button-light .wp-block-button__link:hover,
.wp-block-button.is-style-secondary-button .wp-block-button__link:hover {
	border-width: 1.5px;
	border-style: solid;
	box-shadow: var(--wp--preset--shadow--marketing, 0 0.25rem 0 0 #00264d);
	transform: translateY(-0.25rem);
}

.wp-block-button.is-style-button-brand .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-alt, #80caff);
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
}

.wp-block-button.is-style-button-brand-alt .wp-block-button__link {
	border: none;
}

.wp-block-button.is-style-button-brand-alt .wp-block-button__link:hover {
	border: 1.5px solid var(--wp--preset--color--primary-alt-accent, #00264d);
	background-color: #ffe46b;
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
	box-shadow: var(--wp--preset--shadow--marketing, 0 0.25rem 0 0 #00264d);
	transform: translateY(-0.25rem);
}

.wp-block-button.is-style-button-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-alt-accent, #00264d);
	border-color: var(--wp--preset--color--primary-alt-accent, #00264d);
	color: var(--wp--preset--color--base, #fff);
	box-shadow: 0 0.25rem 0 0 #000;
}

.wp-block-button.is-style-button-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
}

.wp-block-button.is-style-secondary-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-accent, #ddf1ff);
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
}

/*
 * Pop-up Socialter (<dialog>) : l’appearance système du navigateur
 * masque sinon les fonds / bordures des classes btn-*.
 * Classe additionnelle : sur le bloc Bouton (wrapper) ou sur le lien.
 */
.stl-popup__content :is(
	.wp-block-button__link,
	.wp-element-button,
	a[class*="btn-"],
	button[class*="btn-"]
) {
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 781px) {
	.wp-block-buttons {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		box-sizing: border-box;
		justify-content: center;
		width: 100%;
	}

	/* Dans la pop-up : garder les boutons cote a cote (pas d'empilement force). */
	.stl-popup__content .wp-block-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.stl-popup__content .wp-block-buttons > .wp-block-button {
		flex: 0 1 auto;
		width: auto;
	}

	.stl-popup__content .wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: auto;
	}
}