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

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

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

	/* On dark */
	.onDark .btn { }

		/* Hover */
		.onDark .btn:hover:not(:disabled) {color: #fff; border-color: #fff; }

	/* On red */
	.onRed .btn {border-color: var(--color-base); background-color: var(--color-base); }

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

	/* 
	ALT:
	Black button. */
	button.btn--black,
	a.btn--black,
	input[type="submit"].btn--black{border-color: var(--color-base); background-color: var(--color-base); }

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

	/* 
	ALT:
	Bigger button. */
	button.btn--bigger,
	a.btn--bigger,
	input[type="submit"].btn--bigger{font-size: 1.2em;padding: 0 5em;}
	input[type="submit"].btn--bigger{padding: 1.15em 5em;}

	/* 
	ALT:
	Wider button. */
	button.btn--wider,
	a.btn--wider,
	input[type="submit"].btn--wider{padding: 0 5em;}



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

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

	/* 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),
	a:hover .btnSubtle {color: var(--color-base); }
	.btnSubtle:hover:not(:disabled) .btnSubtle__icon,
	a:hover .btnSubtle .btnSubtle__icon {transform: translateX(20%); }

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

	/* On dark */
	.onDark .btnSubtle { }

		/* Hover */
		.onDark .btnSubtle:hover:not(:disabled),
		.onDark a .btnSubtle {color: #fff; }

	/* On grey */
	.onGrey .btnSubtle {color: var(--color-base); }
	.onGrey .btnSubtle__icon {color: #fff; background-color: var(--color-red); }

		/* Hover */
		.onGrey .btnSubtle:hover:not(:disabled),
		.onGrey a:hover .btnSubtle {color: var(--color-red); }

	/* On red */
	.onRed .btnSubtle {color: #fff; }

		/* Hover */
		.onRed .btnSubtle:hover:not(:disabled),
		.onRed a:hover .btnSubtle {color: var(--color-base); }

	/*
	ALT:
	More contrast for the icon. */
	.btnSubtle--contrast { }
	.btnSubtle--contrast .btnSubtle__icon {background-color: var(--color-red); color: #fff; }

		/* On dark */
		.onDark .btnSubtle--contrast { }
		.onDark .btnSubtle--contrast .btnSubtle__icon { }

		/* On red */
		.onRed .btnSubtle--contrast { }
		.onRed .btnSubtle--contrast .btnSubtle__icon {background-color: var(--color-bg-dark); }

	/*
	ALT:
	Back button. */
	.btnSubtle--back { }

		/* Hover */
		.btnSubtle--back:hover:not(:disabled) .btnSubtle__icon,
		a:hover .btnSubtle--back .btnSubtle__icon {transform: translateX(-20%); }


/*
BUTTON / Alert
Bouton pour alerte emploi.
Icone a gauche, texte a droite. */
button.btnAlert,
a.btnAlert,
.btnAlert {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1em;font-weight: normal;line-height: 1.2;color: var(--color-base);margin:0;padding: 0 0.1em;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;transition: color 0.3s;}
.btnAlert__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.6em 0;}
.btnAlert__icon {z-index: 1;display: block;flex: 0 0 auto;font-size: 2.04em;padding: 0.45em;background: var(--color-red);color: #fff;border: 1px solid var(--color-red);border-radius: 50%;transition: background-color 0.3s, color 0.3s;}

	/* Spacing entre le label et l'icone. */
	.btnAlert > * + * {margin-left: 0.6em;}

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

	/* Hover */
	.btnAlert:hover:not(:disabled),
	a:hover .btnAlert {color: var(--color-red); }
	.btnAlert:hover:not(:disabled) .btnAlert__icon,
	a:hover .btnAlert .btnAlert__icon {background-color: transparent; color: var(--color-red); }

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

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



/*
BUTTON / Number
Bouton avec un chiffre. */
button.btnNumber,
a.btnNumber {appearance: none;position:relative;border: 1px solid var(--color-bg-dark);background: var(--color-bg-dark);cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1.4em;font-weight: bold;line-height: 1.2;color: #fff;margin:0;padding: 0 0.9em;text-transform: uppercase;text-decoration: none;box-sizing: border-box;text-align: center;border-radius: var(--round-borders);max-width: 100%;transition: color 0.3s, background-color 0.3s;}
.btnNumber__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.5em 0;}
.btnNumber__number {z-index: 1;display: block;font-size: 0.75em;position: absolute;top: -1em;right: 0;background: var(--color-red);border-radius: var(--round-borders);padding: 0.2em 0.9em;}

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

	/* On dark */
	.onDark .btnNumber {background-color: #fff; border-color: var(--color-bg-dark); color: var(--color-base); }
	.onDark .btnNumber__number {color: #fff; }



/*
BUTTON / Stroke
Bouton dans un contour.
Utile pour les 2 boutons dans la sidebar de l'offre d'emploi. */
button.btnStroke,
a.btnStroke {appearance: none;position:relative;border: 1px solid var(--color-base);background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1em;font-weight: bold;line-height: 1.2;color: var(--color-base);margin:0;padding: 0.8em;text-transform: uppercase;text-decoration: none;box-sizing: border-box;text-align: left;border-radius: var(--round-borders);max-width: 100%;width: 100%;transition: color 0.3s, background-color 0.3s;}
.btnStroke__label {z-index: 1;display: block;flex: 1 1 auto;margin-left: 1em;padding: 0.35em 0;}
.btnStroke__icon {z-index: 1;display: block;flex: 0 0 auto;font-size: 1.02em;padding: 0.4em;background: var(--color-red);color: #fff;border-radius: 50%;transition: transform 0.3s, color 0.3s;}
.btnStroke + .btnStroke {margin-top: 1em; }

	/* Spacing entre le label et l'icone. */
	.btnStroke > * + * {margin-left: 1.002em;}

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

	/* Hover */
	.btnStroke:hover:not(:disabled) {background-color: var(--color-bg-dark); color: #fff; }

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



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none; font-size: 4em;border: 1px solid var(--color-base); border-radius: 50%; color: var(--color-base);background: transparent;font-weight: normal;text-decoration: none;text-align: center;line-height: 1;display: inline-block;vertical-align: middle;position: relative; margin: 0; padding: 0;width: 1em;height: 1em; transition: color 0.3s, background-color 0.3s;}
.btnIcon .svgIcon {font-size: 0.5em;position: absolute;top: 50%;left:50%;backface-visibility: hidden;transform:translate3d(-50%, -50%, 0); }

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

	/* On dark */
	.onDark .btnIcon {color: #fff; border-color: #fff; }

		/* Hover */
		.onDark button.btnIcon:hover,
		.onDark a.btnIcon:hover,
		.onDark a:hover .btnIcon {background-color: #fff; color: var(--color-bg-dark); }

	/* On red */
	.onRed .btnIcon { }

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

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

	/* 
	ALT:
	Filled. */
	button.btnIcon--filled,
	a.btnIcon--filled,
	.btnIcon--filled {border-color: var(--color-red); background-color: var(--color-red); color: #fff; }

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

		/* On dark */
		.onDark .btnIcon--filled {color: #fff; border-color: var(--color-red); }

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

		/* On red */
		.onRed .btnIcon--filled {border-color: var(--color-bg-dark); background-color: var(--color-bg-dark); }

			/* Hover */
			.onRed button.btnIcon--filled:hover,
			.onRed a.btnIcon--filled:hover,
			.onRed a:hover .btnIcon--filled {background-color: transparent; color: var(--color-bg-dark); }

	/*
	ALT:
	No background. */
	button.btnIcon--noBG,
	a.btnIcon--noBG,
	.btnIcon--noBG {background: transparent;border:none;border-radius: 0;}

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

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

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

		/* On red */
		.onRed .btnIcon--noBG {color: #fff; }

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

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



/*
BUTTON / Buttons SBS
Boutons side-by-side sur desktop qui deviennent un par-dessus l'autre.
Largeur de bouton fixe. */
.iBtnSBS {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.iBtnSBS__btn {flex: 0 0 auto;width: 15em;padding: 0.5em;box-sizing: content-box;}
.iBtnSBS__btn .btn {width: 100%;padding: 0 1em;}