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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn,
input[type='submit'].btn {appearance: none;position:relative;border: none;border-radius: var(--radius-btn);background: var(--color-red);cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;gap: 1em;font-size: 1.1em;font-weight: 700;line-height: 1.2;color: var(--color-white);padding: 0 2.5em;text-transform: none;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;overflow: hidden;transition: color 0.3s;}
.btn::before {position: absolute;z-index: 0;display: block;content:" ";background-color: var(--color-black);top: -1px;bottom: -1px;left: -1.5em;right: -1.5em;transform-origin: 0% 50%;transform: skewX(-45deg) scaleX(0);transition: transform 0.3s var(--ease-cubic);}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 1.1em 0;}
.btn__icon {font-size: 1.5em;z-index: 1;display: block;flex: 0 0 auto;padding: 0;}

	/* 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 {transform: skewX(-45deg) scaleX(1);}

	/* Disabled */
	.btn:disabled {opacity: 0.5; cursor: not-allowed; pointer-events: none;}

	/* On dark */
	.onDark .btn {color: var(--color-white); }
	.onDark .btn::before {background-color: var(--color-white); }

		/* Hover */
		.onDark .btn:hover:not(:disabled) {color:var(--color-black); }

	/* Padding */
	@media (max-width:46rem) {
		button.btn,
		a.btn,
		input[type='submit'].btn {padding: 0 2em;}
	}



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none;font-size: 3.75em;border: none;border-radius: var(--radius-btn);color: var(--color-white);background: var(--color-red);font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative;cursor: pointer;padding: 0;overflow: hidden;width: 1em;height: 1em;transition: color 0.3s, opacity 0.3s;}
.btnIcon::before {position: absolute;z-index: 0;display: block;content:" ";background-color: var(--color-black);top: -1px;bottom: -1px;left: -0.5em;right: -0.5em;transform-origin: 0% 50%;transform: skewX(-45deg) scaleX(0);transition: transform 0.3s var(--ease-cubic);}
.btnIcon .svgIcon {font-size: 0.5em;position: absolute;top: 50%;left:50%;transform:translate(-50%, -50%);}

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

	/* Disabled */
	.btnIcon:disabled,
	.btnIcon.disabled {opacity:0; pointer-events: none; }

	/* Hover */
	.btnIcon:hover:not(:disabled) {color:var(--color-white); }
	.btnIcon:hover:not(:disabled)::before {transform: skewX(-45deg) scaleX(1);}

	/* On dark */
	.onDark .btnIcon {color: var(--color-white); }
	.onDark .btnIcon::before {background-color: var(--color-white); }

		/* Hover */
		.onDark .btnIcon:hover:not(:disabled) {color:var(--color-black); }

	/* Smaller */
	@media (max-width:46rem) {
		button.btnIcon,
		a.btnIcon,
		.btnIcon {font-size: 3.25em; }
	}



/*
BUTTON / Side by side */
.btnSBS {display: flex;flex-wrap: wrap;gap: 1em 2em;}
.btnSBS > .btn {flex:0 1 auto; }