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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn,
.btn-special a,
input[type="submit"].btn{appearance: none;position:relative;border: 1px solid var(--color-dark-blue);background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 0.85em;font-weight: bold;line-height: 1.2;color: var(--color-dark-blue);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;}

/* More squared version
a.btn-square {border-radius: var(--round-borders-square);padding: 0 2em;}
a.btn-square .btn__label {padding: 1.55em 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-dark-blue); color: #fff;}

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

	/* On dark */
	.onDark .btn-special a, .onDark .btn {background-color: transparent; color: var(--color-dark-blue);}

		/* Hover */
		.onDark .btn-special a:hover:not(:disabled), .onDark .btn:hover:not(:disabled) {background-color: var(--color-dark-blue); 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: 200;line-height: 1.2;color: var(--color-blue);margin:0;padding: 0;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;transition: color 0.3s;text-transform: none;}
.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;padding: 0.4em;background: var(--color-blue);color: var(--color-base-on-dark);border-radius: 50%;transition: transform 0.3s, color 0.3s;font-size: 2em;padding: 0.1em;}

	@media (max-width: 992px){
		.btnSubtle__icon{
			font-size: 1.2em;
		}
	}

	/* 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;}

	.btnSubtle .svgIcon{
		transform: translate(-50%, 0%);
		transition: transform .3s ease;
	}
	.btnSubtle svg{
		/* width: 1.5em; */
		transform: translate();
		/* height: 1.5em; */
	}

	/* Hover */
	.btn.btnSubtle:hover:not(:disabled) {background-color: transparent;}
	.btnSubtle:hover .svgIcon{
		transform: translate(50%, 0);
	}

	/* 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-blue); }

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

	/* 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-blue); 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 { }
	.btnSubtle--back > * + * {margin-left: 1.3em;}
	.btnSubtle--back .svgIcon {transform: translate(50%, 0%);}

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


/*
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-dark-blue);color: #fff;border: 1px solid var(--color-dark-blue);border-radius: 50%;transition: all 0.3s, color 0.3s;transition-property: background-color, border-color;}
.btnAlert__icon-adj .svgIcon {padding-left: 0.3rem;}
	/* 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-dark-blue); }
	.btnAlert:hover:not(:disabled) .btnAlert__icon,
	a:hover .btnAlert .btnAlert__icon {background-color: transparent; color: var(--color-dark-blue); }

		/* Alternate hover */
		.btnAlert:hover:not(:disabled) .btnAlert__icon,
		a:hover .btnAlert .btnAlert__icon {background-color: #fff;border-color: #fff;color: var(--color-dark-blue); }

	/* 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-blue);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-blue);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: 5em;/*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-blue); }

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

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

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

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

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

		/* 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-blue); }

		/* 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-blue); }

		/* 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; }

	/*
	ALT:
	With offset arrow */
	button.btnIcon--crossArrow,
	.btnIcon--crossArrow{
		transition: opacity 1s;
		transition-delay: 1.5s;
		background: var(--color-navy);
		color: var(--color-base-on-dark);
		border: none;
	}
		/* On dark */
		.onDark button.btnIcon--crossArrow:not(.onLight),
		.onDark .btnIcon--crossArrow:not(.onLight){
			background-color: var(--color-dark-blue);
			color: var(--color-base-on-dark);
			border-radius:50%
		}

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



/*
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;}


/*  BTN ICON
    Bouton qui contient seulement une icone avec BG. */
    .btnIcon {font-size: 4em;border: none;color: #fff;background: #002e5f;cursor: pointer;font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;position: relative;padding: 0;width: 1em;height: 1em;}
    .btnIcon .svgIcon {font-size: 0.44em;position: absolute;top: 50%;left:50%;backface-visibility: hidden;transform:translate(-50%, -50%);transition: opacity 0.4s ease, transform .3s ease;}

	    /* Hover */
	    .btnIcon:hover .svgIcon {/*opacity: 0.5;*/}

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


        /*  ALT:
            No background. */
            .btnIcon--noBG {background: transparent;color: #002e5f;}

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


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


        /* Mobile */
        @media (max-width:767px) {
            .btnIcon {font-size: 3.5em;}
        }

/**
 * BRANDED PLAY BUTTON
 * Big button with animated circle of text
**/
.playBtnWText{
	width: 6em;
	max-width: 100%;
	position: relative;
	display: inline-block;
}

.bEmploi__cMainImg .playBtnWText{
	width: 10em;
}

.playBtnWText svg{
	fill: currentColor;
}
.playBtnWText__icon{
	position: absolute;
	width: 20%;
	top: 50%;
	left: 53%;
	transform: translate(-50%, -50%);
	transition: all 0.3s;
	transition-property: width, color;
}
.playBtnWText__text{
	display: block;
	color: var(--color-blue);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	animation:spin 15s linear infinite;
}

	/* Hover */
	a.playBtnWText:hover .playBtnWText__icon {width: 25%;color: var(--color-blue);}
	a.playBtnWText:hover .playBtnWText__text {animation-play-state: paused;}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg); 
    } 
}