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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn,
input[type='submit'].btn {appearance: none;position:relative;border: none;background: var(--color-green);cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 700;font-size: 0.95em;line-height: 1.2;color: #fff;margin:0;padding: 0 3em;text-transform: none;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;transition: background-color 0.3s;}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 1.6em 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) {background-color:var(--color-blue); }

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

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



/*
BUTTON / Macaron nav
Bouton macaron pour la navigation dans le page head de l'accueil. */
button.btnMacaronNav,
a.btnMacaronNav,
.btnMacaronNav {--size: 7em;appearance: none;font-size: 1em;border: none;color: #fff;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: var(--size);height: var(--size);border: 1px solid var(--color-blue);border-radius: 50%;transition: border-color 0.3s;}
.btnMacaronNav::before {position:absolute;z-index:0;display:block;content:'';top: -1px;bottom:-1px;left:-1px;right:-1px;border-radius: 50%;background: var(--color-blue);transform: scale(0.9);will-change: transform;transition: transform 0.3s, background-color 0.3s;}
.btnMacaronNav__icon {font-size: 2.6em;display: block;position: absolute;z-index: 1;top: 41%;left:50%; transform:translate(-50%, -50%);}
.btnMacaronNav__label {display: block;position: absolute;z-index: 1;top: 65%;left: 0;right: 0;text-align: center;font-size: 0.75em;}

	/* Hover */
	button.btnMacaronNav:hover,
	a.btnMacaronNav:hover,
	a:hover .btnMacaronNav,
	button:not(:disabled):hover .btnMacaronNav {cursor: pointer; border-color: var(--color-base);}
	button.btnMacaronNav:hover::before,
	a.btnMacaronNav:hover::before,
	a:hover .btnMacaronNav::before,
	button:not(:disabled):hover .btnMacaronNav::before {transform: scale(1); background-color: var(--color-base); }

	/* Disabled */
	.btnMacaronNav:disabled {pointer-events: none; opacity: 0.5; }

	/* Size */
	@media (max-width:46rem) {
		button.btnMacaronNav,
		a.btnMacaronNav,
		.btnMacaronNav {font-size: 0.8em; }
	}

/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none; font-size: 4em;border: none;color: var(--color-base);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: 1em;height: 1em; transition: color 0.3s, opacity 0.3s;}
.btnIcon::before {position:absolute;z-index:0;display:block;content:'';top:0;bottom:0;left:0;right:0;border-radius: 50%;background: #fff;will-change: transform;transition: transform 0.3s, background-color 0.3s;}
.btnIcon .svgIcon {font-size: 0.55em;position: absolute;top: 50%;left:50%;/* backface-visibility: hidden; replace with will-change? */transform:translate3d(-50%, -50%, 0);}
.btnIcon__labelOver {display: block;font-size: 0.95rem;font-weight: bold;color: var(--color-base);position: absolute;left: 50%;top: -2.5em;padding: 0.4em;padding-bottom: 2em;white-space: nowrap;transform: translateX(-50%);}

	/* Hover */
	button.btnIcon:hover,
	a.btnIcon:hover,
	a:hover .btnIcon,
	button:not(:disabled):hover .btnIcon {cursor: pointer; color: #fff; }
	button.btnIcon:hover::before,
	a.btnIcon:hover::before,
	a:hover .btnIcon::before,
	button:not(:disabled):hover .btnIcon::before {transform: scale(1.1); background-color: var(--color-base); }

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

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

	/* 
	ALT :
	No background. */
	button.btnIcon--noBG,
	a.btnIcon--noBG,
	.btnIcon--noBG { }
	.btnIcon--noBG::before {display: none; }

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

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

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

	/* 
	ALT :
	Plus petit bouton rond. */
	button.btnIcon--sm,
	a.btnIcon--sm,
	.btnIcon--sm {font-size: 2.5em;}
	.btnIcon--sm .svgIcon {font-size: 0.9em;}

	/* 
	ALT :
	Bleu. */
	button.btnIcon--blue,
	a.btnIcon--blue,
	.btnIcon--blue {color: #fff; }
	.btnIcon--blue::before {background-color: var(--color-blue);}

	/* 
	ALT :
	Gris pale. */
	button.btnIcon--gray,
	a.btnIcon--gray,
	.btnIcon--gray { }
	.btnIcon--gray::before {background-color: var(--color-gray);}

	/* 
	ALT :
	Vert. */
	button.btnIcon--green,
	a.btnIcon--green,
	.btnIcon--green {color: #fff; }
	.btnIcon--green::before {background-color: var(--color-green);}

	/* 
	ALT :
	Bleu on HOVER. */
	button.btnIcon--hoverBlue:hover::before,
	a.btnIcon--hoverBlue:hover::before,
	a:hover .btnIcon--hoverBlue::before,
	button:not(:disabled):hover .btnIcon--hoverBlue::before {background-color: var(--color-blue);}

	/* 
	ALT :
	Vert on HOVER. */
	button.btnIcon--hoverGreen:hover::before,
	a.btnIcon--hoverGreen:hover::before,
	a:hover .btnIcon--hoverGreen::before,
	button:not(:disabled):hover .btnIcon--hoverGreen::before {background-color: var(--color-green);}

	/* 
	ALT :
	Scale animation. */
	button.btnIcon--scaleAnim,
	a.btnIcon--scaleAnim,
	.btnIcon--scaleAnim {color: var(--color-base); }

	.btnIcon--scaleAnim::before {background-color: #fff; transform: scale(0); opacity: 0; transition: transform 0.3s, background-color 0.3s, opacity 0.3s; }

		/* Hover */
		button.btnIcon--scaleAnim:hover,
		a.btnIcon--scaleAnim:hover,
		a:hover .btnIcon--scaleAnim,
		button:not(:disabled):hover .btnIcon--scaleAnim {color: var(--color-base); }

		button.btnIcon--scaleAnim:hover::before,
		a.btnIcon--scaleAnim:hover::before,
		a:hover .btnIcon--scaleAnim::before,
		button:not(:disabled):hover .btnIcon--scaleAnim::before {background-color: #fff; opacity: 1; }

		/* On light gray */
		.onLightGray .btnIcon--scaleAnim::before {background-color: var(--color-gray); }

			/* Hover */
			.onLightGray button.btnIcon--scaleAnim:hover::before,
			.onLightGray a.btnIcon--scaleAnim:hover::before,
			.onLightGray a:hover .btnIcon--scaleAnim::before,
			.onLightGray button:not(:disabled):hover .btnIcon--scaleAnim::before {background-color: var(--color-gray); }



/*
BUTTON / Label et icone.
Label a gauche de l'icone.
L'icone est la meme chose que .btnIcon. */
button.btnWI,
a.btnWI,
input[type='submit'].btnWI {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 700;font-size: 1em; line-height: 1.2;color: var(--color-base);margin:0;padding: 0;text-transform: none;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%; transition: color 0.3s;}
.btnWI__label {z-index: 1;display: block;flex: 1 1 auto;font-size: 0.95em;padding: 0;min-width: 3.5em;}
.btnWI__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 0;}

	/* Spacing entre le label et l'icone. */
	.btnWI > * + * {margin-left: 0.2em;}
	.btnWI > * + .btnIcon--sm {margin-left: 0.4em;}

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

	/* Hover */
	.btnWI:hover:not(:disabled) {color: var(--color-base); }

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

		/* Size */
		@media (max-width:46rem) {
			.btnWI__label {font-size: 0.85em;}
		}

	/* 
	ALT :
	Stacked on mobile. */
	.btnWI--mobileStacked { }

		/* Stacked */
		@media (max-width:46rem) {
			button.btnWI--mobileStacked,
			a.btnWI--mobileStacked,
			input[type='submit'].btnWI--mobileStacked {flex-direction: column; }
			.btnWI--mobileStacked .btnWI__label {order: 2; padding-top: 0.5em; text-align: center;}
			.btnWI--mobileStacked .btnWI__icon {order: 1; margin: 0;}
		}

	/* 
	ALT :
	On a green BG. */
	button.btnWI--onGreen,
	a.btnWI--onGreen,
	input[type='submit'].btnWI--onGreen {color: #fff; }
	.btnWI--onGreen .btnWI__icon {color: var(--color-green); }

		/* Hover */
		.btnWI--onGreen:hover:not(:disabled) {color: #fff; }

	/* 
	ALT :
	On a brown BG. */
	button.btnWI--onBrown,
	a.btnWI--onBrown,
	input[type='submit'].btnWI--onBrown {color: var(--color-green); }

		/* Hover */
		.btnWI--onBrown:hover:not(:disabled) {color: var(--color-green); }