/* .............................................................................
BUTTONS
............................................................................. */

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn {
	appearance: none;
	position:relative;
	border: none;
	background: var(--color-green-light);
	cursor: pointer;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	font-size: 1em;
	color: #fff;
	margin:0;
	padding: 0.25em 1.8em 0 1.8em;
	text-decoration: none;
	box-sizing: border-box;
	text-align: center;
	line-height: 0.9;
	max-width: 100%;
	border-radius: 1.6em;
	transition: background-color 0.3s, color 0.3s;
}


.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 1em 0;}

	/* Spacing entre le label et l'icone.
	.btn > * + * {padding-left: 1.002em;}
*/
	/* Pour que le target dans event delegation soit le button au lieu du contenu a l'interieur. */
	.btn * {pointer-events: none;}

	/* Hover */
	.btn:hover:not(:disabled) {color:#fff; background-color: var(--color-green); }

	/* Disabled */
	.btn:disabled {opacity: 0.5; cursor: default;}

	/*
	ALT:
	White on hover. */
	button.btn--hoverWhite,
	a.btn--hoverWhite { }

		/* Hover */
		.btn--hoverWhite:hover:not(:disabled) {color: var(--color-green-light); background-color: #fff; }

	/*
	ALT:
	BG animate on hover. */
	button.btn--hoverAnimBG,
	a.btn--hoverAnimBG { }
	button.btn--hoverAnimBG::before,
	a.btn--hoverAnimBG::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-green-light); border-radius: 1.6em; will-change: transform; transition: transform 0.2s;}

		/* Hover */
		.btn--hoverAnimBG:hover:not(:disabled) {color: #fff; background-color: var(--color-orange); }
		/* .btn--hoverAnimBG:hover:not(:disabled)::before {transform: scale(1.1); } */

	/*
	ALT:
	Bigger button. */
	button.btn--big,
	a.btn--big {font-size: 1.8em;}

		/* Smaller */
		@media (max-width:62rem) {
			button.btn--big,
			a.btn--big {font-size: 1.4em;}
		}

		@media (max-width:46rem) {
			button.btn--big,
			a.btn--big {font-size: 1em;}
		}



/*
BUTTON / Subtle
Bouton subtile, sans background. */
button.btnSubtle,
a.btnSubtle {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1em;line-height: 1.2;color: var(--color-green);margin:0;padding: 0 0.3em;text-decoration: none;box-sizing: border-box;text-align: center;max-width: 100%;border-radius: 0;transition: color 0.3s;}
.btnSubtle__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.3em 0;}
.btnSubtle__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 0;}

	/* Spacing entre le label et l'icone. */
	.btnSubtle > * + * {padding-left: 0.7em;}

	/* Pour que le target dans event delegation soit le button au lieu du contenu a l'interieur. */
	.btnSubtle * {pointer-events: none;}

	/* Hover */
	.btnSubtle:hover:not(:disabled) {color:var(--color-orange); }

	/* Disabled */
	.btnSubtle:disabled {opacity: 0.5; cursor: default;}

	/* On dark */
	.onDark button.btnSubtle,
	.onDark a.btnSubtle {color: var(--color-orange);}

		/* On dark */
		.onDark button.btnSubtle:hover:not(:disabled)
		/* .onDark a.btnSubtle:hover {color: #fff;} */