@charset "UTF-8";

/*************************/
/*************************/
/********** NAV **********/
/*************************/
/*************************/

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

nav,
nav a {
	display: inline-flex;
}
nav a {
	margin: 0;
}

/****************************/
/********** CUSTOM **********/
/*****************************/

nav.full {
	width: 100%;
}
nav.list {
	flex-direction:column;
}
nav.centered {
	justify-content:center;
}

/*****************************/
/*****************************/
/********** BUTTONS **********/
/*****************************/
/*****************************/

/**
nav.buttons
a.button
button (form)

buttons > a / span

nav.buttons			: short line under (text-decoration)
nav.buttons.large	: larger line under (border-bottom)
**/

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

.buttons {
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--global-spacing);
}
.buttons > *,
.button,
button {
	position:relative;
	z-index:10;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:1em;
	font-size: var(--body-font-size);
	line-height:1;
	white-space: nowrap;
	padding:1em 1.5em;
	color:var(--bright-color);
	background:var(--accent-color);
	border:0;
	border-radius: 2em;
}
.buttons a:hover,
.button:hover,
button:hover {
	color:var(--accent-color);
	background:var(--bright-color);
}
.buttons a > *,
.button > *,
button > * {
	margin:0;
}

/****************************/
/********** CUSTOM **********/
/****************************/

/********** LARGE **********/

.buttons.large > *,
.button.large,
button.large {
	font-size: calc(var(--body-font-size) * 1.25);
}

/********** SHORT **********/

.buttons.short {
	gap: 1em;
}
.buttons.short > *,
.button.short,
button.short {
	font-size: calc(var(--body-font-size) * .75);
}

/**************************/
/**************************/
/********** MENU **********/
/**************************/
/**************************/

/**
.menu
ul.menu / ol.menu
.menu > li > a + .menu > li > a
.menu > li > a + .menu > li > a

in : apply
**/

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

.menu {
	display:flex;
	flex-wrap:wrap;
	align-items: flex-start;
	gap:0;
	text-align: left;
}
.menu .menu {
	flex-direction:column;
	font-size: .75em;
	margin:0;
}
.menu > * {
	position:relative;
	list-style: none;
	margin:0;
}
.menu a {
	display:inline-flex;
	flex-direction:row;
	gap:1em;
	padding:.5em;
	color:inherit;
	text-shadow:inherit;
	border:0 !important;
}

/*******************************/
/*******************************/
/********** SECONDARY **********/
/*******************************/
/*******************************/

/**
in : footer
**/

nav.secondary > * {
	align-items: center;
	margin: 0;
	line-height: 1;
}
nav.secondary .copyright {
	padding: 20px;
}

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

/** mobile **/
@media (max-width:760px) {
	nav.secondary {
		flex-direction: column;
	}
}

/****************************/
/****************************/
/********** NAVBAR **********/
/****************************/
/****************************/

/**
in : header
**/

#navbar {
	position: absolute;
	top:0;
	left:0;
	right: 0;
	display:inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
	font-size: calc(var(--body-font-size) * .75);
	white-space: nowrap;
	pointer-events:none;
	padding:1em;
}
#navbar > * {
	position:relative;
	z-index:10;
	display:inline-flex;
	align-items:center;
	line-height: 1;
	margin:0;
	pointer-events:auto;
}
#navbar:after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dark-color);
	opacity: 0;
	transform: translateY(-100%);
}
body.scrolled #navbar:after {
	opacity: 1;
	transform: translateY(0);
}
#navbar .logo {
	margin-left:auto;
	height: 2em;
	opacity: 0;
	transform: translateX(100%);
}
body.scrolled #navbar .logo {
	opacity: 1;
	transform: translateX(0);
}

/******************************/
/******************************/
/********** SHAREBAR **********/
/******************************/
/******************************/

/**
in : #navigation / footer
**/

nav.sharebar {
	display:flex;
	flex-wrap:wrap; /* for mobile */
	align-items:center;
	white-space:nowrap;
	line-height:1;
}
nav.sharebar > * {
	display:inline-block;
	vertical-align:middle;
	padding:1em;
}
nav.sharebar a > * {
	display:block;
	height:1em;
	width:1em;
}

/********************************/
/********************************/
/********** CONTEXTUAL **********/
/********************************/
/********************************/

/**
in : apply
**/

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

nav.contextual {
	width:100%;
}

/***************************/
/***************************/
/********** STEPS **********/
/***************************/
/***************************/

ol.steps {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width:100%;
}
ol.steps li {
	flex-direction: column;
	flex-grow: 1;
	flex-basis: 0;
	margin-top:0;
}
ol.steps li:before {
	font-size:calc(var(--body-font-size) * .875);
	padding: 1em;
	margin:0;
}
ol.steps li.active:before {
	color: var(--dark-color);
	background: var(--accent-color);
}
ol.steps li.done:before {
	content:"";
}
ol.steps li.done .fa-solid {
	position: absolute;
	top:0;
	left:50%;
	color:var(--bright-color);
	transform: translate(-50%, .75em);
}
ol.steps li:not(:last-child):after {
	content:"";
	position: absolute;
	z-index: -1;
	top:calc(1.375em - var(--line-height));
	left:50%;
	height:var(--line-height);
	width: calc(100% - (2.25em / 2));
	box-shadow:inset 0 0 0 var(--line-height);
}
ol.steps a {
	border:0;
}
ol.steps .infos {
	padding: 1em; text-align:center; 
}

/** vertical **/

ol.steps.vertical {
	flex-direction: column;
}
ol.steps.vertical li {
	flex-direction: row;
	align-items: center;
}
ol.steps.vertical li:not(:last-child):after {
	display: none;
}
ol.steps.vertical li .infos:after {
	content:"";
	position: absolute;
	z-index: -1;
	top:50%;
	transform:translateY(-50%);
	left:calc(1.375em - var(--line-height));
	height:100%;
	width: var(--line-height);
	box-shadow:inset 0 0 0 var(--line-height);
}
ol.steps.vertical li:first-child .infos:after {
	top:calc(50% + 1em);
	transform:translateY(-50%);
	height:calc(100% - 1em);
}
ol.steps.vertical li:last-child .infos:after {
	top:calc(50% - 1em);
	transform:translateY(-50%);
	height:calc(100% - 1em);
}

/*****************************/
/*****************************/
/********** FILTERS **********/
/*****************************/
/*****************************/

/**
nav.filters
nav.grid-filters
**/

/*****************************/
/********** FILTERS **********/
/*****************************/

nav.filters {
	align-items: center;
	justify-content: flex-start;
}
nav.filters > * {
	margin-top:0;
}
nav.filters .count {
	display:flex;
	align-items: center;
	justify-content: center;
	font-size: .75em;
	line-height: 1;
	padding:.75em;
	height:2.25em;
	width:2.25em;
	margin:-1em -1em -1em 0;
	border-radius: 50%;
	color:var(--accent-color);
	background:var(--dark-color);
}

/****************************************/
/********** DATA-FILTERS-COUNT **********/
/****************************************/

/* in button => opposite colors */

[data-filters-count] {
	position:relative;
}
[data-filters-count]:after {
	content: attr(data-filters-count);
	position:absolute;
	top:0;
	right:0;
	display:none;
	font-size:.75em;
	line-height:1;
	text-align:center;
	height:1em;
	width:2em;
	padding:.5em 0 !important;
	margin:-.5em;
	border-radius:50%;
	color: var(--accent-color);
	background:var(--dark-color);
	pointer-events: none;
}
[data-filters-count]:hover:after {
	color: var(--dark-color);
	background:var(--accent-color);
}

/**********************************/
/********** GRID FILTERS **********/
/**********************************/

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

nav.grid-filters {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	margin:0;
	line-height:1em;
}
nav.grid-filters > * {
	margin:0;
}

/********** INFOS **********/

.grid-filters-infos,
.grid-filters-infos-results,
.grid-filters-infos-criteria {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.grid-filters-infos {
	gap:1em;
}
.grid-filters-infos-results,
.grid-filters-infos-criteria {
	gap: .5em;
}
.grid-filters-infos > *,
.grid-filters-infos-results > *,
.grid-filters-infos-criteria > * {
	margin: 0;
}



/********** TITLE **********/

nav.grid-filters .title {
	white-space: nowrap;
}
nav.grid-filters .title:hover,
nav.grid-filters .title.active {
	color:var(--accent-color);
}

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

@media (min-width:0px) {
	nav.grid-filters {
		font-size:1em;
		gap:1em;
	}
	nav.grid-filters .title {
		font-size:1em;
	}
}
@media (min-width:1000px) {
	nav.grid-filters {
		gap:2em;
	}
	nav.grid-filters .title {
		font-size:1.5em;
	}
}

/********************************/
/********************************/
/********** PAGINATION **********/
/********************************/
/********************************/

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

nav.pagination {
	display:flex;
	align-items:center;
	justify-content: center;
	gap:.5em;
	width:100%;
	font-size:1em;
	line-height:1;
	text-transform:uppercase;
}
nav.pagination > * {
	display:inline-flex;
	align-items: center;
	justify-content: center;
	font-size:inherit;
	font-weight:bold;
	text-align: center;
	height:3em;
	width:3em;
	padding:1em;
	margin:0;
	aspect-ratio: 1/1;
	border-radius: 50%;
	color:var(--bright-color);
	background:var(--dark-color);
}
nav.pagination a.active,
nav.pagination a:hover {
	color:var(--dark-color);
	background:var(--accent-color);
}

/*************************************/
/********** PREVIOUS / NEXT **********/
/*************************************/

nav.pagination .previous,
nav.pagination .next {
	display:inline-flex;
	align-items:center;
}