/*--------------------------------------------------------------
## Boutons Beaver Builder

Le site en compte trois géométries différentes, héritées de réglages posés
bouton par bouton dans Beaver Builder : 54px de haut dans le hero, 50px pour
« Why using Heuritech? », 44px pour « Read our FAQ ». Même arrondi flottant,
entre 40 et 50px. Cette feuille les ramène à une seule forme.

Le CSS que Beaver Builder écrit par nœud est chargé après celle-ci, avec des
sélecteurs en `.fl-builder-content .fl-node-xxx a.fl-button` (0,3,0) : la
classe du bouton est donc répétée pour passer devant.

Les couleurs restent réglables dans Beaver Builder, seules la forme et la
réaction au clic sont fixées ici.
--------------------------------------------------------------*/

:root {
	--bouton-or: #BC8E4E;
	--bouton-ink: #23252B;
	--bouton-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ===== Le renfoncement au clic =====
Beaver Builder décale ses boutons d'un pixel vers le bas à l'enfoncement, ce
qui lit comme un bouton de formulaire système et détonne sur des boutons
arrondis. Aucun autre élément cliquable du site ne bouge au clic. */
.fl-builder-content .fl-button:active,
.fl-builder-content a.fl-button:active {
	position: static;
	top: auto;
}

/* ===== Une seule forme ===== */
.fl-builder-content a.fl-button.fl-button.fl-button {
	border-radius: 50px;
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: .06em;
	padding: 15px 30px;
	transition:
		background-color .3s var(--bouton-ease),
		border-color .3s var(--bouton-ease),
		color .3s var(--bouton-ease);
}

/* La flèche que Beaver Builder colle à droite double le rôle de la forme
   arrondie et décentre le libellé. */
.fl-builder-content a.fl-button.fl-button.fl-button:after {
	display: none;
}

/* Le hero garde sa propre géométrie, écrite dans `hero.css` avec une
   spécificité supérieure à celle-ci : rien à reprendre ici.

   Les deux pixels qui séparent un bouton cerclé d'un bouton plein à padding
   égal restent : leur donner à tous une bordure transparente réglerait le
   compte, mais écraserait du même coup la couleur que Beaver Builder pose par
   nœud, et les boutons dorés perdraient leur cercle. Les deux familles ne se
   côtoient nulle part, sauf dans le hero, où la compensation est explicite. */

/*--------------------------------------------------------------
## Boutons posés dans un bloc de texte

Certains appels à l'action ne sont pas des modules bouton mais de simples
liens écrits dans un module texte : « Read our articles » sous la grille du
blog s'affichait ainsi en lien doré souligné, au milieu d'une page où tous
les autres sont des boutons arrondis.

Il suffit d'ajouter la classe `hrt-bouton` au lien pour qu'il prenne la forme
commune, sans avoir à le reconstruire en module. Attention : l'éditeur visuel
de Beaver Builder retire cet attribut à l'enregistrement, il faut passer par
son onglet « Code ».

Faute de quoi le module se désigne par son nœud, comme ci-dessous pour
« Read our articles ». Le jour où ce module est recréé, son identifiant change
et la règle devient caduque.
--------------------------------------------------------------*/
.fl-rich-text a.hrt-bouton,
.fl-node-japblh5i01tx .fl-rich-text a {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid var(--bouton-or);
	border-radius: 50px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bouton-or);
	background-color: transparent;
	transition:
		background-color .3s var(--bouton-ease),
		border-color .3s var(--bouton-ease),
		color .3s var(--bouton-ease);
}

.fl-rich-text a.hrt-bouton:hover,
.fl-node-japblh5i01tx .fl-rich-text a:hover {
	background-color: var(--bouton-or);
	border-color: var(--bouton-or);
	color: #fff;
}

/*--------------------------------------------------------------
## Casse des libellés

Sur la page d'accueil, trois boutons s'affichaient en capitales et trois en
casse normale, chacun selon le réglage posé dans Beaver Builder au moment de
sa création.

La capitale est la convention retenue pour les boutons, celle du header
(« LOG IN ») et du hero (« BOOK A DEMO »). Elle s'applique ici à tous, et la
casse saisie dans l'éditeur n'a plus d'incidence sur le rendu.
--------------------------------------------------------------*/
.fl-builder-content a.fl-button.fl-button.fl-button,
.fl-rich-text a.hrt-bouton,
.fl-node-japblh5i01tx .fl-rich-text a {
	text-transform: uppercase;
}