@charset "UTF-8";


.short-content {
	max-width: calc(var(--content-maxwidth) / 3);
}



/****************************/
/****************************/
/********** GLOBAL **********/
/****************************/
/****************************/

html,
body {
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
	width: 100%;
}

/********** BODY **********/

body {
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	color: var(--dark-color);
	text-shadow: 0 0 0;
}

/********** WRAPPER **********/

/*
flex == footer at bottom
*/

#wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: inherit;
	margin: 0;
	padding: 0;
}

/********** MAIN **********/

main {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	margin: 0;
	flex-grow: 1;
	overflow-y: visible;
	overflow-x: clip;
}

/****************************/
/****************************/
/********** HEADER **********/
/****************************/
/****************************/

header {
	position: fixed;
	z-index: 1200;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}
header > * {
	z-index: 10;
	pointer-events: auto;
	color: inherit;
	fill: inherit;
}

/*******************************/
/*******************************/
/********** ERROR 404 **********/
/*******************************/
/*******************************/

body.error main {
	align-items: center;
}
body.error main section {
	margin-top:auto;
	margin-bottom: auto;
}

/****************************/
/****************************/
/********** FOOTER **********/
/****************************/
/****************************/

footer {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	pointer-events: none;
	font-size: .875em;
	line-height: 1;
	padding: 1em;
	color:var(--txt-footer-color);
	background: var(--back-footer-color);
}
footer > * {
	text-align: center;
	pointer-events: auto;
	margin: 0 !important;
}

/********** @MEDIA **********/

@media (max-width:1000px) {
	footer {
		font-size: .75em;
	}
}

/******************************/
/******************************/
/********** SECTIONS **********/
/******************************/
/******************************/

/*
[default]	== normal content max-width
.banner		== 50svh max

.focus		== heading section
.full		== no content max-width / no padding
.large		== no content max-width
.min		== short padding
.cover		== Fullscreen (100vh) min-height

null		<=> short
alignwide 	<=> normal
alignfull	<=> large
*/

section {
	position: relative;
	z-index: 10;
	clear: both;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	overflow: initial;
	width: 100%;
	max-width:none;
	padding: 0 !important;
	margin: 0;
	overflow: visible;
}

/********** SECTION FULL **********/

section.full,
section.full > .section-content {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none;
	width:100%;
}

/********** SECTION LARGE **********/
/* like full with margin */

section.large,
section.large > .section-content {
	max-width: none;
}

/********** SECTION COVER **********/
/* fullscreen */

section.cover {
	display: flex;
	min-height: 100svh;
}
section.cover .section-content.vertical-aligned {
	margin: auto;
}

/********** SECTION CONTENT / ASIDE **********/

section .section-content {
	position: relative;
	z-index: 10;
	flex-grow: 1;
}
section > .section-content {
	flex-basis: 0;
}
section > aside {
	flex-grow: 0.5;
	flex-basis: 0;
}
section .section-content .columns .short img {
	margin: 0 0 0 auto;
}

/********** ASIDE SIDEBAR **********/

.sidebar {
	display:flex;
	flex-direction: column;
}
.sidebar > * + * {
	margin-top:1em;
}
.sidebar > .short + * {
	margin-top:0;
}

/********** @MEDIA **********/

@media (max-width: 760px) {
	section > aside {
		flex-basis: 100%;
	}
}

/********** MARGIN **********/

section .section-content {
	margin: var(--gutter-gap) calc(var(--gutter-gap) * 2);
	max-width:var(--content-maxwidth);
	width: calc(100% - var(--gutter-gap) * 4);
}
section.large .section-content {
	margin: var(--gutter-gap);
	width: calc(100% - var(--gutter-gap) * 2);
}
section.min .section-content {
	margin: calc(var(--gutter-gap) / 2) calc(var(--gutter-gap) * 2);
	width: calc(100% - var(--gutter-gap) / 4 * 2);
}
section.has-dark-background-color .section-content,
.has-white-background-color .section-content,
.has-light-background-color .section-content {
	margin: calc(var(--gutter-gap) * 2);
	margin: var(--gutter-gap) calc(var(--gutter-gap) * 2);
}
section aside {
	margin: var(--gutter-gap) calc(var(--gutter-gap) * 2);
}

/************************************/
/************************************/
/********** SECTION BANNER **********/
/************************************/
/************************************/

/**
banner => default = 25svvh
banner.large => index page = 50svh
**/

/********** DEFAULT **********/

section.banner {
	height:33svh;
}
section.banner.large {
	height: 50svh;
}
section.banner .section-content {
    min-height:33svh;
}
section.banner.large .section-content {
    min-height: 50svh;
}
section.banner .section-content,
section.focus .section-content,

section.banner .swiper-container,
section.focus .swiper-container {
	height:inherit;
}

/********** CONTENT **********/

section.banner .section-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content:center;
	gap: var(--global-spacing);
	margin:auto;
	padding:0;
	max-width:none;
	width:100%;
}
section.banner .infos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content:center;
	gap: var(--global-spacing);
	padding: var(--gutter-gap);
	margin:auto;
}
.banner .logo + .main-title {
	margin-top:0;
}
section.banner .background:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: block;
	background: var(--dark-color);
	opacity: 0.33;
}

/********** @MEDIA **********/

/** mobile **/
@media (max-width: 760px) {
	section.banner .section-content .title {
		font-size:min(max(10vw), 5rem);
	}
}
/** desktop **/
@media (min-width: 760px) {
	section.banner .section-content .title {
		font-size:min(max(15vw), 6.25rem);
	}
}

/****************************/
/****************************/
/********** MARGIN **********/
/****************************/
/****************************/

/***************************/
/********** FRONT **********/
/***************************/

/** no section == directly in main == apply to content to behave like section **/
/*
ex. p
*/
main > *:not(section):not(#contextual):not(.is-limited-large):not([class*='-background-color']),
main > article > *:not(section):not(#contextual):not(.is-limited-large):not([class*='-background-color']) {
	width: calc(100% - var(--gutter-gap) * 4);
	margin-left:calc(var(--gutter-gap) * 2);
	margin-right:calc(var(--gutter-gap) * 2);
	max-width:var(--content-maxwidth);
}

/** columns ending with -background-color **/

main > :not(section)[class*='-background-color'],
main article > :not(section)[class*='-background-color'] {
	position:relative;
	z-index: 5;
	width:calc(100% - var(--gutter-gap) * 4);
	padding:var(--gutter-gap) 0;
	margin-left:calc(var(--gutter-gap) * 2);
	margin-right:calc(var(--gutter-gap) * 2);
	max-width:var(--content-maxwidth);
}
main > :not(section)[class*='-background-color']:after,
main > article > :not(section)[class*='-background-color']:after {
	content:"";
	position:absolute;
	z-index: -1;
	top:0;
	left:50%;
	height:100%;
	width:100vw;
	transform:translate3d(-50%,0,0);
	background:inherit;
	pointer-events: none;
}


main > *:not(section):first-child,
main > article > *:not(section):first-child {
	margin-top:calc(var(--global-spacing) * 3 / 2)
}
main > *:not(section):last-child,
main > article > *:not(section):last-child {
	margin-bottom: calc(var(--gutter-gap) * 2);
}

/********************************/
/********** SEARCHFORM **********/
/********************************/

#wrapper > .searchform {
	z-index: 10;
	width: calc(100% - var(--gutter-gap) * 4);
	margin-left:auto;
	margin-right:auto;
	max-width:var(--content-maxwidth);
}

/********** @MEDIA **********/

@media (max-width:760px) {
	#wrapper > .searchform {
		margin-top:-1.5em !important;
	}
}
@media (min-width:760px) {
	#wrapper > .searchform {
		margin-top:-2em !important;
	}
}

/*****************************/
/********** ARTICLE **********/
/*****************************/

main article {
	z-index: 10;
	margin-top:-2em !important;
	max-width: none;
	margin-bottom: 0 !important;
	background: var(--bright-color);
	filter:drop-shadow(0 0 .5em rgba(var(--dark-rgb), .25));
}

/************************************/
/********** ARTICLE HEADER **********/
/************************************/

article section.article-header {
	position: sticky;
	z-index: 20;
	top: var(--navbar-height);
	padding:var(--gutter-gap);
	background: var(--bright-color);
}
article section.article-header.is-stuck {
	filter:drop-shadow(0 0 .5em rgba(var(--dark-rgb), .25));
}
article section.article-header.is-stuck .section-content {
	margin:calc(var(--gutter-gap) / 2);
}
article section.article-header.is-stuck .section-content > * + * {
	margin-top: calc(var(--global-spacing) / 2);
}

/********** @MEDIA **********/

/** mobile **/
@media (max-width:760px) {
	article section.article-header.is-stuck h1 {
		font-size: 1em;
	}
	article section.article-header.is-stuck .tags.large {
		font-size: .625em;
	}
}
@media (min-width:760px) {
	article section.article-header.is-stuck h1 {
		font-size: 1.5em;
	}
}

/**********************************/
/**********************************/
/********** STICKY APPLY **********/
/**********************************/
/**********************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.sticky-apply {
	position: fixed;
	z-index: 100;
	bottom: 2em;
	left: 2em;
	right: 2em;
	pointer-events: none;
	max-width: 20em !important;
	width:100% !important;
	transform-origin: bottom center;
	background:var(--dark-color);
	border-radius:2em;
	filter:drop-shadow(0 .5em .5em rgba(var(--dark-rgb), .25));
}
.sticky-apply > * {
	pointer-events: auto;
}
.sticky-apply .form-apply {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 2em;
	margin-left: auto;
	margin-right: auto;
}
.sticky-apply .form-apply *,
.sticky-apply .form-apply .form-infos * {
	margin-top: 0 !important;
}
.sticky-apply .form-apply .form-infos {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: auto;
}

/*********************************/
/********** OFFER = ALL **********/
/*********************************/

.sticky-apply.all .button {
	color:var(--bright-color);
	background:var(--accent-color);
}

/********** @MEDIA **********/

/** mobile **/
@media (max-width: 760px) {
	.sticky-apply {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
/** desktop **/
@media (min-width: 760px) {
	.sticky-apply {
		margin-left: auto !important;
		margin-right: 0 !important;
	}
}

/**********************************/
/********** OFFER = THIS **********/
/**********************************/

.sticky-apply.this {
	position: sticky;
	padding-left: calc(var(--gutter-gap) * 2);
	padding-right: calc(var(--gutter-gap) * 2);
	margin-left: auto !important;
	margin-right: auto !important;
	color:inherit;
	background: none;
}
.sticky-apply.this .form-apply {
	padding: 0;
}

/********************************/
/********** ANIMATIONS **********/
/********************************/

/********** DEFAULT **********/


body.scrolled .sticky-apply.all:hover .form-apply {
	padding: 2em;
}
body.scrolled .sticky-apply.all .form-apply {
	padding: 0;
}
body.scrolled .sticky-apply.all .form-infos,
body.scrolled .sticky-apply.all:hover .form-infos {
	gap: 1em;
	width: 16em;
}
body.scrolled .sticky-apply.all .form-infos {
	gap: 0;
}
.sticky-apply.all .form-infos > *:not(.keep-visible),
body.scrolled .sticky-apply.all:hover .form-infos > *:not(.keep-visible) {
	max-height: 10em;
	opacity: 1;
	transform: scale(1) translateY(0);
	overflow: hidden;
}
body.scrolled .sticky-apply.all .form-infos > *:not(.keep-visible) {
	max-height: 0;
	opacity: 0;
	transform: scale(0) translateY(.5em);
}

/********** ALL **********/

body.scrolled .sticky-apply.all:hover {
	max-width: 20em !important;
}
body.scrolled .sticky-apply.all {
	max-width: 16em !important;
}
body.scrolled .sticky-apply.all:hover .form-apply {
	padding: 2em;
}
body.scrolled .sticky-apply.all .form-apply {
	padding: 0;
}
body.scrolled.end .sticky-apply.all {
	bottom: calc(var(--footer-height) + 2em);
}

/********** THIS **********/

body.scrolled.end .sticky-apply.this {
	border-radius: 0;
	filter: none;
}