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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn {appearance: none;position:relative;border: none;background: var(--color-orange);cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 900;font-size: 1em;line-height: 1.2;color: #fff;margin:0;padding: 0 2em;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;transition: color 0.3s;}
.btn::before {position: absolute;z-index: 0;display: block;content:" ";background-color: var(--color-blue);top: -1px;bottom: -1px;left: -1px;right: -1px;transform-origin: 50% 100%;transform: scaleY(0);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.9em 0;}
.btn__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 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; }
	.btn:hover:not(:disabled)::before {transform: scaleY(0.999);}

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

	/* On dark */
	.onDark button.btn,
	.onDark a.btn {color: var(--color-orange); background-color: #fff; }
	.onDark .btn::before {background-color: var(--color-orange); }

	/* 
	ALT:
	Plus gros bouton. */
	button.btn--big,
	a.btn--big {font-size: 1.5em; }



/*
BUTTON / Rond
Bouton rond pour postuler. */
button.btnRond,
a.btnRond {appearance: none;position:relative;border: none;background: var(--color-orange);cursor: pointer;vertical-align: middle;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;font-weight: bold;font-size: 1em;line-height: 1.2;color: #fff;margin:0;padding: 0.5em;text-decoration: none;box-sizing: border-box;text-align: center;height: 9em;width: 9em;border-radius: 50%;transition: background 0.3s;}
.btnRond__label {font-size: 1.4em;display: block;padding: 0.1em 0 0 0;}
.btnRond__icon {display: block;font-size: 3.5em;margin-top: -0.2em;}

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

	/* Hover */
	.btnRond:hover:not(:disabled) {background-color: var(--color-blue); }

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

	/* Mobile */
	@media (max-width:47rem) {
		button.btnRond,
		a.btnRond {font-size: 0.85em;}
	}



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none;font-size: 4.5em;border: none;color: var(--color-green);background: #fff;font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative;margin: 0;padding: 0;width: 1em;height: 1em;box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 10%);border-radius: 50%;transition: color 0.3s;}
.btnIcon .svgIcon {font-size: 0.5em;position: absolute;top: 50%;left:50%;transform:translate(-50%, -50%); transition: transform 0.3s; will-change: transform; }

	/* Hover */
	button.btnIcon:hover,
	a.btnIcon:hover,
	a:hover .btnIcon {cursor: pointer; color: var(--color-blue); }
	button.btnIcon:hover .svgIcon,
	a.btnIcon:hover .svgIcon,
	a:hover .btnIcon .svgIcon {transform: translate(-50%, -50%) scale(1.2); }

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

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

		/* Hover */
		button.btnIcon--noBG:hover .svgIcon,
		a.btnIcon--noBG:hover .svgIcon,
		a:hover .btnIcon--noBG .svgIcon {transform: translate(-50%, -50%); }

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

			/* Hover */
			.onDark button.btnIcon--noBG:hover,
			.onDark a.btnIcon--noBG:hover,
			.onDark a:hover .btnIcon--noBG {color: #fff; }

	/*
	ALT:
	For the filters. */
	button.btnIcon--filters,
	a.btnIcon--filters,
	.btnIcon--filters {font-size: 2.5em;background: transparent;box-shadow: none;color: var(--color-blue);}
	.btnIcon--filters .svgIcon {font-size: 0.7em;will-change: auto;}

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

		button.btnIcon--filters:hover .svgIcon,
		a.btnIcon--filters:hover .svgIcon,
		a:hover .btnIcon--filters .svgIcon {transform: translate(-50%, -50%); }

		/* Active */
		button.btnIcon--filters.active,
		a.btnIcon--filters.active {color: var(--color-orange); }

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



/*
BUTTON / Nav
Bouton qui contient seulement une icone pour une navigation de carousel. */
button.btnNav,
a.btnNav {appearance: none;font-size: 4em;border: none;color: var(--color-green);background: transparent;font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative;margin: 0;padding: 0;width: 100%;height: 0.75em;transition: color 0.3s;}
.btnNav .svgIcon {font-size: 0.5em;position: absolute;top: 50%;left:50%;transform:translate(-50%, -50%); transition: transform 0.3s; will-change: transform; }

	/* Hover */
	button.btnNav:hover,
	a.btnNav:hover {cursor: pointer; color: var(--color-blue); }