/* .............................................................................
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-size: 1em;line-height: 1.2;color: #fff;margin:0;padding: 0 1.8em;text-decoration: none;box-sizing: border-box;text-align: center;max-width: 100%;border-radius: 1.6em;transition: background-color 0.3s, color 0.3s;}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 1.1em 0 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; background-color: var(--color-green); }

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

	/*
	ALT:
	Vert. */
	button.btn--green,
	a.btn--green {background-color: var(--color-green); }

		/* Hover */
		.btn--green:hover:not(:disabled) {color: #fff; background-color: var(--color-orange); }

	/*
	ALT:
	White on hover. */
	button.btn--hoverWhite,
	a.btn--hoverWhite { }

		/* Hover */
		footer .btn--hoverWhite:hover:not(:disabled) {color: var(--color-orange); background-color: #fff; }
		article .btn--hoverWhite:hover:not(:disabled) {color: #fff; background-color: var(--color-green); }
		.btn--green.btn--hoverWhite:hover:not(:disabled) {color: var(--color-green); }

	/*
	ALT:
	Blanc et orange. */
	button.btn--whiteOrange,
	a.btn--whiteOrange {color: var(--color-orange); background-color: #fff; }

		/* Hover */
		.btn--whiteOrange:hover:not(:disabled) {color:#fff; background-color: var(--color-orange); }

	/*
	ALT:
	Blanc et vert. */
	button.btn--whiteGreen,
	a.btn--whiteGreen {color: var(--color-green); background-color: #fff; }

		/* Hover */
		.btn--whiteGreen:hover:not(:disabled) {color:#fff; background-color: var(--color-green); }



/*
BUTTON / Subtle
Bouton subtile, sans background. */
button.btnSubtle,
a.btnSubtle {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1em;line-height: 1.2;color: var(--color-green);margin:0;padding: 0 0.3em;text-decoration: none;box-sizing: border-box;text-align: center;max-width: 100%;border-radius: 0;transition: color 0.3s;}
.btnSubtle__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.45em 0 0.15em 0;}
.btnSubtle__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 0;}

	/* Spacing entre le label et l'icone. */
	.btnSubtle > * + * {padding-left: 0.7em;}

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

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

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

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

	/*
	ALT:
	Bigger label. */
	.btnSubtle--biggerLabel { }
	.btnSubtle--biggerLabel .btnSubtle__label {font-size: 1.1em;}



/*
BUTTON / Icon reveal
Bouton icone avec texte qui apparait on hover. */
button.btnIconReveal,
a.btnIconReveal {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1em;line-height: 1.2;color: var(--color-orange);margin:0;padding: 0;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;border-radius: 0;}
.btnIconReveal__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.6em 0 0.4em 0;opacity: 0;transition: opacity 0.3s;}
.btnIconReveal__icon {z-index: 1;display: block;flex: 0 0 auto;}

	/* Spacing entre le label et l'icone. */
	.btnIconReveal > * + * {padding-left: 1.1em;}

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

	/* Hover */
	.btnIconReveal:hover:not(:disabled) { }
	.btnIconReveal:hover:not(:disabled) .btnIconReveal__label {opacity: 1; }

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

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



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none;font-size: 3.5em;border: none;color: #fff;background: none;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;border-radius: 50%;}
.btnIcon::before {position:absolute;z-index:0;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: var(--color-orange);border-radius: 50%;will-change: transform;transition: transform 0.2s;}
.btnIcon .svgIcon {font-size: 0.808em;position: absolute; z-index: 1; top: 50%;left:50%;backface-visibility: hidden;transform:translate3d(-50%, -50%, 0);transition: opacity 0.3s;}

	/* Hover, seulement si c'est un bouton ou un lien. */
	button.btnIcon,
	a.btnIcon {cursor: pointer; }

	button.btnIcon:hover::before,
	a.btnIcon:hover::before,
	a:hover .btnIcon::before,
	button:hover .btnIcon::before {transform: scale(1.2); }

	/* On dark */
	.onDark .btnIcon:not(.onLight) {color: var(--color-orange); }
	.onDark .btnIcon:not(.onLight)::before {background-color: #fff; }

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

	/*
	ALT:
	Smaller. */
	button.btnIcon--sm,
	a.btnIcon--sm,
	.btnIcon--sm {font-size: 2.25em;}

	/*
	ALT:
	Medium large. */
	button.btnIcon--mediumLarge,
	a.btnIcon--mediumLarge,
	.btnIcon--mediumLarge {width: 1.15em; height: 1.15em; }

	/*
	ALT:
	Large. */
	button.btnIcon--large,
	a.btnIcon--large,
	.btnIcon--large {width: 1.5em; height: 1.5em; }

	/*
	ALT:
	Badge. */
	button.btnIcon--badge,
	a.btnIcon--badge,
	.btnIcon--badge {width: 1.85em;height: 1.85em;}
	.btnIcon--badge::before {background-color: var(--color-green); }
	.btnIcon--badge .svgIcon {font-size: 1.5em; }

		/* On dark */
		.onDark .btnIcon--badge:not(.onLight) {color: var(--color-green); }

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

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

		/* On dark */
		.onDark .btnIcon--noBG:not(.onLight) {color: #fff; }

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