/**
 * Studio Tabs, le bouton.
 *
 * Un seul gabarit pour tous les boutons du site : en-tete, pages, pied de page.
 * Avant, chaque bouton dependait du reglage pose dans le constructeur et d'un
 * bloc de style loge dans la page d'accueil ; le meme bouton n'avait donc pas la
 * meme allure d'une page a l'autre, et son survol virait au blanc a texte noir.
 *
 * Cette feuille est desormais la seule source : elle neutralise le CSS que
 * genere Elementor par element, d'ou les `!important`. Les reglages de couleur,
 * de police ou de rayon faits dans le constructeur n'ont plus d'effet sur les
 * boutons, ce qui est le prix d'une charte reellement uniforme.
 *
 * Anatomie : une pilule au degrade de la marque, le libelle a gauche, une
 * pastille blanche portant la fleche encastree a droite.
 *
 *   +-------------------------------------------+
 *   |  26px   Libelle        18px    ( -> )  5px |  47px de haut
 *   +-------------------------------------------+
 */

/**
 * Point d'accroche.
 *
 * Elementor 4 n'emet plus la classe `elementor-widget-button` sur le conteneur du
 * widget : s'y accrocher ne selectionnait rien. L'attribut `data-widget_type`,
 * lui, est toujours present et vaut `button.default`. Il a l'avantage d'exclure
 * naturellement les autres elements qui portent la classe `elementor-button`,
 * comme le declencheur du panier.
 */

[data-widget_type^="button"] .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 47px;
	/* Le libelle respire a gauche ; a droite, la pastille est encastree de 5px,
	   soit exactement son retrait en haut et en bas. */
	padding: 5px 5px 5px 26px !important;
	border: 0 !important;
	border-radius: var(--st-radius-pill, 999px) !important;
	background-color: transparent !important;
	background-image: var(--st-btn) !important;
	color: #ffffff !important;
	font-family: var(--st-font-ui, "Figtree", sans-serif) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	transition: background-image 0.25s ease, transform 0.15s ease;
}

[data-widget_type^="button"] .elementor-button:hover,
[data-widget_type^="button"] .elementor-button:focus {
	/* Le degrade s'inverse : le bouton s'eclaircit vers la droite au lieu de la
	   gauche. Le libelle reste blanc, du noir tomberait sous le seuil de
	   lisibilite sur ce brun. */
	background-image: var(--st-btn-hover) !important;
	color: #ffffff !important;
}

[data-widget_type^="button"] .elementor-button:active {
	transform: translateY(1px);
}

/**
 * Enveloppe.
 *
 * Elementor la met en `row-reverse` : la fleche est premiere dans le document et
 * s'affiche donc a droite. On garde ce sens, on annule ses marges internes et on
 * lui interdit de s'etirer, sinon le contenu se recentre et le libelle derive.
 */
[data-widget_type^="button"] .elementor-button-content-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

[data-widget_type^="button"] .elementor-button-text {
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	white-space: nowrap;
}

/**
 * Pastille de la fleche.
 *
 * Blanche, avec le glyphe en brun : l'inverse, tel que le template le posait,
 * donnait une fleche blanche sur fond blanc, donc invisible.
 */
[data-widget_type^="button"] .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 37px;
	height: 37px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--st-radius-pill, 999px);
	background-color: #ffffff !important;
	color: var(--st-accent-deep, #702d1d) !important;
	fill: var(--st-accent-deep, #702d1d) !important;
	font-size: 14px;
	line-height: 1;
	transition: transform 0.25s ease;
}

[data-widget_type^="button"] .elementor-button-icon svg {
	width: 14px;
	height: 14px;
}

/* La fleche avance de trois pixels au survol. Un deplacement court vaut mieux
   que la rotation d'origine, qui faisait clignoter le glyphe. */
[data-widget_type^="button"] .elementor-button:hover .elementor-button-icon {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	[data-widget_type^="button"] .elementor-button:hover .elementor-button-icon {
		transform: none;
	}
}

/* Sur les petits ecrans, un libelle long doit pouvoir revenir a la ligne plutot
   que de deborder. */
@media (max-width: 767px) {
	[data-widget_type^="button"] .elementor-button {
		padding-left: 20px !important;
	}

	[data-widget_type^="button"] .elementor-button-text {
		white-space: normal;
	}

	[data-widget_type^="button"] .elementor-button-content-wrapper {
		gap: 14px;
	}
}

/**
 * Pastilles d'information.
 *
 * Ces trois elements sont construits avec le widget bouton mais n'appellent
 * aucune action : ce sont des mentions posees sur une photo. Leur donner la
 * pilule brune et la fleche les ferait passer pour des liens. Ils gardent donc
 * un traitement d'etiquette.
 */
.elementor-element-f6d4037 .elementor-button,
.elementor-element-e72b0db .elementor-button,
.elementor-element-4df8bc38 .elementor-button {
	min-height: 0;
	padding: 9px 16px !important;
	background-image: none !important;
	background-color: #ffffff !important;
	color: var(--st-ink, #3d1e14) !important;
	font-size: 12px !important;
	line-height: 1.35;
}

.elementor-element-f6d4037 .elementor-button:hover,
.elementor-element-e72b0db .elementor-button:hover,
.elementor-element-4df8bc38 .elementor-button:hover {
	background-image: none !important;
	background-color: #ffffff !important;
	color: var(--st-ink, #3d1e14) !important;
}

.elementor-element-f6d4037 .elementor-button-content-wrapper,
.elementor-element-e72b0db .elementor-button-content-wrapper,
.elementor-element-4df8bc38 .elementor-button-content-wrapper {
	flex-direction: row;
	gap: 9px;
}

.elementor-element-f6d4037 .elementor-button-icon,
.elementor-element-e72b0db .elementor-button-icon,
.elementor-element-4df8bc38 .elementor-button-icon {
	width: auto;
	height: auto;
	background-color: transparent !important;
	color: var(--st-accent, #a3280a) !important;
	fill: var(--st-accent, #a3280a) !important;
	font-size: 15px;
}

.elementor-element-f6d4037 .elementor-button:hover .elementor-button-icon,
.elementor-element-e72b0db .elementor-button:hover .elementor-button-icon,
.elementor-element-4df8bc38 .elementor-button:hover .elementor-button-icon {
	transform: none;
}

/**
 * Chargement differe des sections.
 *
 * Pour economiser des images, Elementor supprime 'background-image' sur tous
 * les descendants des sections au-dela de la troisieme, tant que celles-ci ne
 * sont pas entrees dans l ecran. Nos boutons, dont le fond est justement un
 * degrade, s en trouvaient aplatis jusqu au defilement : selon l endroit de la
 * page, le meme bouton apparaissait plein ou transparent.
 *
 * On les en sort. Le selecteur reprend celui d Elementor prefixe de 'body' pour
 * passer devant a specificite egale ; la priorite est indispensable puisque la
 * regle d origine en porte une.
 */
body .e-con.e-parent:not(.e-lazyloaded) [data-widget_type^="button"] .elementor-button {
	background-image: var(--st-btn) !important;
}

body .e-con.e-parent:not(.e-lazyloaded) [data-widget_type^="button"] .elementor-button:hover {
	background-image: var(--st-btn-hover) !important;
}

/* Les pastilles d information n ont pas de degrade a preserver. */
body .e-con.e-parent:not(.e-lazyloaded) .elementor-element-f6d4037 .elementor-button,
body .e-con.e-parent:not(.e-lazyloaded) .elementor-element-e72b0db .elementor-button,
body .e-con.e-parent:not(.e-lazyloaded) .elementor-element-4df8bc38 .elementor-button {
	background-image: none !important;
}