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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn,
input[type='submit'].btn {--border-color: var(--color-base);position: relative;z-index: 1;border: 0.07em solid var(--border-color);padding: 0;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1.125em;font-weight: 500;line-height: 1.2;color: var(--color-base);text-decoration: none;box-sizing: border-box;text-align: left;border-radius: 100vw;max-width: 100%;transition: color 0.3s, background-color 0.3s;}
.btn::before {position: absolute;display: block;content:" ";background-color: var(--color-base);top: 0;bottom: 0;left: 0;right: 0;border-radius: 100vw;opacity: 0;transition: opacity 0.3s;}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.8em 2em;}
.btn__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 0;}

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

	/* Centered on mobile (text will be centered if it's breaking on 2 lines) */
	@media (max-width:46rem) {
		.btn__label {text-align: center; }
	}

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

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

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

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


	/*
	ALT :
	Button with icon. */
	button.btn:has(.btn__icon),
	a.btn:has(.btn__icon),
	input[type='submit'].btn:has(.btn__icon) {padding: 0 0.22em;}
	.btn:has(.btn__icon)::before { }
	.btn:has(.btn__icon) .btn__label {padding: 1em 1em;}
	.btn:has(.btn__icon) .btn__icon {display: block;font-size: 2.9em;color: var(--color-white);background: var(--color-base);position: relative;width: 1em;height: 1em;border-radius: 100vw;}
	.btn:has(.btn__icon) .btn__icon .svgIcon {font-size: 0.95em;position: absolute;top: 50%;left:50%;transform:translate3d(-50%, -50%, 0);}

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


	/*
	ALT :
	Filled variant with solid background. */
	button.btn--fill,
	a.btn--fill,
	input[type='submit'].btn--fill {color: var(--color-white); background-color: var(--color-black); }
	.btn--fill::before {background-color: var(--color-white); }

	/* With icon */
	.btn--fill:has(.btn__icon) .btn__icon {color: var(--color-base); background-color: var(--color-white);}

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

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

		/* With icon */
		.onDark .btn--fill:has(.btn__icon) .btn__icon {color: var(--color-white); background-color: var(--color-black);}

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



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {--border-color: var(--color-base);font-size: 3.7em;border: none;color: var(--color-white);background: var(--color-base);font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative;cursor: pointer;padding: 0;width: 1em;height: 1em;border-radius: 100vw;box-shadow: inset 0 0 0 0.02em var(--border-color);transition: color 0.3s, background-color 0.3s, opacity 0.5s;}
.btnIcon .svgIcon {font-size: 0.75em;position: absolute;top: 50%;left:50%;transform:translate3d(-50%, -50%, 0);}

	/* Size */
	@media (max-width:62rem) {
		button.btnIcon,
		a.btnIcon,
		.btnIcon {font-size: 3em; }
	}

	/* Disabled: invisible et non-cliquable */
	.btnIcon.disabled {opacity:0; pointer-events: none; }

	/* Hover */
	button.btnIcon:hover,
	a.btnIcon:hover,
	a:hover .btnIcon {color: var(--color-base); background-color: var(--color-white); }

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

		/* Hover */
		.onDark .btnIcon:hover {color: var(--color-white); background-color: var(--color-base); }

	/*
	ALT:
	No background. */
	button.btnIcon--noBG,
	a.btnIcon--noBG,
	.btnIcon--noBG {color: var(--color-base);background: transparent;box-shadow: none;}

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

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

			/* Hover */
			.onDark .btnIcon--noBG:hover {color: var(--color-white); background-color: transparent; }


	/*
	ALT:
	No spacing. */
	.btnIcon--noSpacing { }
	.btnIcon--noSpacing .svgIcon {font-size: 1em;}


	/*
	ALT:
	Beige background. */
	button.btnIcon--beige,
	a.btnIcon--beige,
	.btnIcon--beige {--border-color: var(--color-beige); color: var(--color-base); background-color: var(--color-beige); }

		/* Hover */
		button.btnIcon--beige:hover,
		a.btnIcon--beige:hover,
		a:hover .btnIcon--beige {color: var(--color-beige); background-color: var(--color-base); }

		/* On dark */
		.onDark .btnIcon--beige {--border-color: var(--color-beige); color: var(--color-base); background-color: var(--color-beige); }

			/* Hover */
			.onDark .btnIcon--beige:hover {color: var(--color-beige); background-color: var(--color-base); }


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

		/* Size */
		@media (max-width:62rem) {
			button.btnIcon--big,
			a.btnIcon--big,
			.btnIcon--big {font-size: 4em; }
		}

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


	/*
	ALT:
	With drop shadow.
	BG beige on hover. */
	button.btnIcon--shadow,
	a.btnIcon--shadow,
	.btnIcon--shadow {box-shadow: none; filter: drop-shadow(0 0.05em 0.05em rgba(0, 0, 0, 0.2));}

		/* Hover */
		button.btnIcon--shadow:hover,
		a.btnIcon--shadow:hover,
		a:hover .btnIcon--shadow {color:var(--color-base); background-color: var(--color-beige);}

		/* On dark */
		.onDark .btnIcon--shadow { }

			/* Hover */
			.onDark .btnIcon--shadow:hover {color:var(--color-base); background-color: var(--color-beige);}



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