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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn,
span.btn,
input[type='submit'].btn {--size:11em;appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;justify-content: center;font-weight: 500;font-size: 1em;line-height: 1.3;letter-spacing: 0.2em;color: var(--color-white);padding: 0 0.5em;text-transform: uppercase;text-decoration: none;box-sizing: border-box;text-align: center;width: var(--size);height: var(--size);border-radius: 50%;transition: color 0.3s;}
.btn::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-red); border-radius: 50%; transition: background-color 0.3s, transform 0.3s; will-change: transform; }
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.5em 0;}
.btn__label__altColor {color: var(--color-blue); transition: color 0.3s; }
span.btnz {cursor: unset !important;}


	/* 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: var(--color-white); }
	.btn:hover:not(:disabled)::before {background-color: var(--color-blue); transform: scale(1.1); }
	.btn:hover:not(:disabled) .btn__label__altColor {color: var(--color-white); }

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

	/* On red */
	.onRed .btn {color: var(--color-red); }
	.onRed .btn::before {background-color:#fff; }

	/* 
	ALT :
	Shadowed button. */
	.btn--shadow::before {box-shadow: 0 0.5em 1em rgb(0 0 0 / 20%);}

	/* 
	ALT :
	Bigger. */
	button.btn--big,
	a.btn--big,
	input[type='submit'].btn--big {font-size: 1.2em; }

	/* Smaller */
	@media (max-width:62rem) {
		button.btn,
		a.btn,
		input[type='submit'].btn {font-size: 0.9em; }
	}

	@media (max-width:46rem) {
		button.btn,
		a.btn,
		input[type='submit'].btn {font-size: 0.8em; }
	}



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none; font-size: 3em;border: none;color: #fff;background: transparent;font-weight: 500;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative; padding: 0;width: 1em;height: 1em;border-radius: 50%; cursor: pointer; }
.btnIcon::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-red); border-radius: 50%; transition: background-color 0.3s, transform 0.3s; will-change: transform; }
.btnIcon .svgIcon {font-size: 0.65em;position: absolute;top: 50%;left:50%;/* backface-visibility: hidden; replace with will-change? */transform:translate3d(-50%, -50%, 0);}

	/* Hover */
	.btnIcon:hover::before,
	a:hover .btnIcon::before {background-color: var(--color-blue); transform: scale(1.1); }

	/* On red */
	.onRed .btnIcon {color: var(--color-red);transition: color 0.3s; }
	.onRed .btnIcon::before {background-color: var(--color-white); }

		/* Hover */
		.onRed button.btnIcon:hover,
		.onRed a.btnIcon:hover,
		.onRed a:hover .btnIcon {color: var(--color-blue);}

		.onRed button.btnIcon:hover::before,
		.onRed a:hover .btnIcon::before {background-color: var(--color-white);}