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

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

	/* Réduire espacement si icone présente */
	.btn__icon:first-child {margin-left: -0.3em; }
	.btn__icon:last-child {margin-right: -0.3em;}

	/* 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) { }
	.btn:hover:not(:disabled)::before {transform: scaleY(0.999);}

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

	/* On green */
	.onGreen .btn::before {background-color: var(--color-beige);}
	.onGreen .btn:hover:not(:disabled) {color: var(--color-red);}

	/* On red: button become green */
	.onRed button.btn,
	.onRed a.btn,
	.onRed input[type='submit'].btn {background-color: var(--color-green); }
	.onRed .btn::before {background-color: var(--color-beige);}
	.onRed .btn:hover:not(:disabled) {color: var(--color-green);}

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

	/* Size */
	@media (max-width:46rem) {
		button.btn,
		a.btn,
		input[type='submit'].btn {font-size: 1em; padding: 0 1.7em; }
		.btn__label {padding: 0.9em 0 1em 0;}
	}



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

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

	/* Hover */
	button.btnIcon:hover::before,
	a.btnIcon:hover::before,
	a:hover .btnIcon::before {transform: scale(1.1);}

	/* On green: icon becomes red with beige background */
	.onGreen button.btnIcon,
	.onGreen a.btnIcon,
	.onGreen .btnIcon {color: var(--color-red); }
	.onGreen .btnIcon::before {background-color: var(--color-beige);}

	/*
	ALT:
	Force red. */
	button.btnIcon.btnIcon--red,
	a.btnIcon.btnIcon--red,
	.btnIcon.btnIcon--red {color: var(--color-beige); }
	.btnIcon.btnIcon--red::before {background-color: var(--color-red);}

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

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

	/*
	ALT:
	No background. */
	button.btnIcon--noBG,
	a.btnIcon--noBG,
	.btnIcon--noBG {color: var(--color-green); transition: color 0.2s;}
	.btnIcon--noBG::before {display: none;}

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

		/* On green */
		.onGreen button.btnIcon--noBG,
		.onGreen a.btnIcon--noBG,
		.onGreen .btnIcon--noBG {color: var(--color-beige);}

			/* Hover */
			.onGreen button.btnIcon--noBG:hover,
			.onGreen a.btnIcon--noBG:hover,
			.onGreen a:hover .btnIcon--noBG {color: var(--color-red);}

		/* On red */
		.onRed button.btnIcon--noBG,
		.onRed a.btnIcon--noBG,
		.onRed .btnIcon--noBG {color: var(--color-beige);}

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



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