@charset "UTF-8";


.sticky.sidebar.inline:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	height: 100%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: var(--bright-color);
	pointer-events: none;

}

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

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

nav {
	position: relative;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 1em;
	line-height: 1;
}
nav a {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	line-height: 1;
	margin: 0;
	text-decoration: none;
}

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

nav.full {
	width: 100%;
}
nav.inline {
	width: 100%;
}
nav.inline > * + * {
	margin-top: 0;
}
nav.vertical {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	   -moz-box-orient:vertical;
	   -moz-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
}
nav.centered {
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        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 **********/
/*****************************/

nav.buttons a,
.button,
button {
	position:relative;
	z-index:10;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	gap:1em;
	font-size: var(--button-font-size);
	line-height:1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	width: auto;
	padding: 1em 1.5em;
	border:solid var(--line-height);
	background:var(--bright-color);
	-webkit-border-radius: 2em;
	   -moz-border-radius: 2em;
	        border-radius: 2em;
}
nav.buttons a:hover,
.button:hover,
button:hover,
nav.buttons a.active,
.button.active,
button.active {
	color: var(--bright-color);
	border-color: var(--dark-color);
	background: var(--dark-color);
}
nav.buttons a > *,
nav.buttons > .button,
.button > *,
button > * {
	margin: 0;
}

/********** IN CONTENT **********/

h1 .button,
h2 .button,
h3 .button,
h4 .button,
h5 .button,
h6 .button,
p .button {
	margin-top: 0;
}

/******************************/
/********** DONWLOAD **********/
/******************************/

nav.buttons.download a,
.button.download {
	border: 0;
	padding: 0;
	position: relative;
	gap: .5em;
}
nav.buttons.download a:before,
.button.download:before {
	content:"⮑";
}
nav.buttons.download a span,
.button.download span {
	text-shadow: none;
	text-decoration-line: underline;
	text-decoration-thickness: calc(var(--line-height) / 2);
	text-underline-position: from-font;
	text-underline-offset: var(--line-height);
}
nav.buttons.download a:hover,
.button.download:hover {
	color: inherit;
	background: none;
}


/*******************************/
/********** CONTAINER **********/
/*******************************/

/* eg. in sidebar */

nav.buttons-container {
	gap: var(--global-spacing);
}
nav.buttons-container > nav.buttons {
	width: 100%;
	margin: 0;
}

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

/********** LARGE **********/
/** like form inputs **/

nav.buttons.large > *,
.button.large,
button.large {
	font-size: var(--font-size);
	min-height: var(--input-min-height);
	padding: 1em 2em;
}

/********** SMALL **********/

nav.buttons.small > *,
.button.small,
button.small {
	font-size: -webkit-calc(var(--button-font-size) * .75);
	font-size: -moz-calc(var(--button-font-size) * .75);
	font-size: calc(var(--button-font-size) * .75);
}

/********** ALT **********/
/** for filters "all" buttons **/

nav.buttons.alt a,
nav.buttons a.alt,
.button.alt,
button.alt {
	color: var(--bright-color);
	border: solid var(--line-height) var(--dark-color);
	background: var(--dark-color);
}

/********** CENTERED **********/

nav.buttons.centered {
	width: 100%;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.button.centered {
	margin-left:auto;
	margin-right:auto;
}

/********** MORE-LINK **********/

.more-link {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	border:none;
}
.more-link:after {
	display:none;
}

/********** READ-MORE **********/

.read-more {
	margin-right: .5em;
}

/*****************************/
/********** GO-BACK **********/
/*****************************/

.go-back {
	font-size: var(--go-back-size);
	min-width: auto;
}

/**************************/
/********** LIVE **********/
/**************************/

nav a.is-live {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	gap: .5em;
	color: var(--accent-color);
}
nav a.is-live:before {
	content: "";
	display: inline-block;
	height: .75em;
	width: .75em;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
	background-color: var(--accent-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: block;
	font-size: .75em;
	line-height: 1;
	text-align:center;
	height: 1em;
	width: 2em;
	padding: .5em 0 !important;
	margin: -.5em;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
	color: inherit;
	background: inherit;
	border: inherit;
	pointer-events: none;
}
[data-filters-count="0"]:after {
	opacity: 0;
}

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

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

in :
**/

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

.menu {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: unset;
	-webkit-box-direction: unset;
	-webkit-flex-direction: unset;
	   -moz-box-orient: unset;
	   -moz-box-direction: unset;
	    -ms-flex-direction: unset;
	        flex-direction: unset;
	-webkit-flex-wrap:wrap;
	    -ms-flex-wrap:wrap;
	        flex-wrap:wrap;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	   -moz-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap:0;
	text-align: left;
}
.menu > * {
	position:relative;
	list-style: none;
	margin:0;
	padding: 0;
}
.menu a {
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-webkit-flex-direction:row;
	   -moz-box-orient:horizontal;
	   -moz-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	gap:1em;
	padding:1em;
	border:0 !important;
}

/********** SUBMENU **********/

.menu .menu {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	   -moz-box-orient:vertical;
	   -moz-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
	font-size: .75em;
	margin:0;
}

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

/**
in : header
**/

#navbar {
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	   -moz-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/***************************/
/********** ORDER **********/
/***************************/

#navbar nav.alias {
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	   -moz-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}
#navbar #accessibility-toggle {
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	   -moz-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
#navbar #navigation-expand {
	-webkit-box-ordinal-group: 4;
	-webkit-order: 3;
	   -moz-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
}

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

@media (max-width:760px) {
	#navbar nav.alias {
		display:none;
		visibility:hidden;
	}
}

/***************************/
/***************************/
/********** ALIAS **********/
/***************************/
/***************************/

/**
in : header
**/

nav.alias {
	font-size: .75em;
	text-transform: lowercase;
	gap: 0;
}
nav.alias a {
	padding: 1em;
}

/*****************************/
/*****************************/
/********** PRIMARY **********/
/*****************************/
/*****************************/

/**
in : header
**/

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

nav.primary {
	max-width:var(--content-maxwidth);
	margin: 0 -1em 0 auto; /* for <header> */
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
nav.primary .menu {
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
nav.primary a {
	position:relative;
	pointer-events:auto;
	margin:0;
	padding:0;
	gap: .25em;
}
nav.primary a.active {
	pointer-events:none;
}

/*******************************/
/********** UNDERLINE **********/
/*******************************/

nav.primary a span {
	position: relative;
	padding: .5em;
}
nav.primary a span:after {
	content:"";
	position: absolute;
	bottom: 0;
	left: .5em;
	height: var(--line-height);
	width: 0%;
	-webkit-border-radius: var(--line-height);
	   -moz-border-radius: var(--line-height);
	        border-radius: var(--line-height);
	color: currentColor;
	background-color: currentColor;
	-webkit-transform: translate(0, -.25em);
	   -moz-transform: translate(0, -.25em);
	    -ms-transform: translate(0, -.25em);
	     -o-transform: translate(0, -.25em);
	        transform: translate(0, -.25em);
	pointer-events: none;
}
nav.primary .menu .active a span:after,
nav.primary a:hover span:after,
nav.primary a.active span:after {
	width: -webkit-calc(100% - 1em);
	width: -moz-calc(100% - 1em);
	width: calc(100% - 1em);
}

/*********************************/
/********** SEPARATIONS **********/
/*********************************/

nav.primary a:before,
nav.primary a:after {
	content:"";
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-flex:1;
	-webkit-flex-grow:1;
	   -moz-box-flex:1;
	    -ms-flex-positive:1;
	        flex-grow:1;
	-webkit-flex-basis:0;
	    -ms-flex-preferred-size:0;
	        flex-basis:0;
	font-size: 1.5em;
	width: 0;
	margin:auto;
	pointer-events:none;
}
nav.primary .menu :not(:last-child) a:after,
nav.primary a:not(:last-child):after {
	content:"・";
}
nav.primary a:not(:last-child):after {
	visibility: hidden;
}

/********************************/
/********** RESPONSIVE **********/
/********************************/

@media (max-width:760px) {
	header nav.primary {
		display:none;
		visibility:hidden;
	}
}

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

@media (min-width:0px) {
	nav.primary {
		font-size:1.25em;
	}
}
@media (min-width:1400px) {
	nav.primary {
		font-size: 2em;
	}
}

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

/**
in : footer
**/

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

nav.secondary a {
	margin: 0;
	padding: 0;
}

/*******************************/
/********** UNDERLINE **********/
/*******************************/

nav.secondary a span {
	position: relative;
	padding: .5em;
}
nav.secondary a span:after {
	content:"";
	position: absolute;
	bottom: 0;
	left: .5em;
	height: var(--line-height);
	width: 0%;
	-webkit-border-radius: var(--line-height);
	   -moz-border-radius: var(--line-height);
	        border-radius: var(--line-height);
	color: currentColor;
	background-color: currentColor;
	-webkit-transform: translate(0, -.25em);
	   -moz-transform: translate(0, -.25em);
	    -ms-transform: translate(0, -.25em);
	     -o-transform: translate(0, -.25em);
	        transform: translate(0, -.25em);
	pointer-events: none;
}
nav.secondary .menu .active a span:after,
nav.secondary a:hover span:after,
nav.secondary a.active span:after {
	width: -webkit-calc(100% - 1em);
	width: -moz-calc(100% - 1em);
	width: calc(100% - 1em);
}

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

/** mobile **/
@media (max-width:760px) {
	footer nav.secondary {
		display:none;
	}
}
/** desktop **/
@media (min-width:760px) {
	header nav.secondary {
		display:none;
	}
}

/********************************/
/********************************/
/********** NAVIGATION **********/
/********************************/
/********************************/

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

#navigation {
	position: fixed;
	z-index: 1300;
	top: -webkit-calc(var(--header-height));
	top: -moz-calc(var(--header-height));
	top: calc(var(--header-height));
	left: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	   -moz-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	height: 0;
	width: 100%;
	overflow: hidden;
	visibility: hidden;
	scroll-behavior: smooth;
}

/****************************************/
/********** NAVIGATION CONTENT **********/
/****************************************/

#navigation .navigation-content {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: var(--gutter-gap);
	height: 100%;
	width: 100%;
	padding: var(--gutter-gap) -webkit-calc(var(--gutter-gap) * 2);
	padding: var(--gutter-gap) -moz-calc(var(--gutter-gap) * 2);
	padding: var(--gutter-gap) calc(var(--gutter-gap) * 2);
	background: var(--bright-color);
}
#navigation .navigation-content > * {
	pointer-events: auto;
	opacity: 0;
	margin-left: auto;
	margin-right: auto;
	-webkit-transform: translate3d(0, -3em, 0);
	   -moz-transform: translate3d(0, -3em, 0);
	        transform: translate3d(0, -3em, 0);
}

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

#navigation nav.primary,
#navigation nav.secondary {
	width: 100%;
}
#navigation nav.primary .menu {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
#navigation nav.secondary .menu {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
#navigation nav.secondary a {
	padding: .75em 1em;
}

/******************************/
/********** EXPANDED **********/
/******************************/

#navigation-expand {
	position: relative;
	z-index: 2100;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-size: 1.5em;
	line-height: 1;
}

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

/** mobile **/
@media (max-width:760px) {
	body.expanded {
		overflow:hidden;
	}
	body.expanded #navigation {
		overflow: auto;
		visibility: visible;
		height: -webkit-calc(var(--viewport-height) - var(--header-height));
		height: -moz-calc(var(--viewport-height) - var(--header-height));
		height: calc(var(--viewport-height) - var(--header-height));
	}	
	body.expanded #navigation .navigation-content {
		overflow:auto;
	}
	body.expanded #navigation .navigation-content > * {
		opacity:1;
		-webkit-transform:translate3d(0,0,0);
		   -moz-transform:translate3d(0,0,0);
		        transform:translate3d(0,0,0);
	}
}
/** desktop **/
@media (min-width:760px) {
	#navigation-expand {
		display:none;
	}
}

/****************************/
/****************************/
/********** SOCIAL **********/
/****************************/
/****************************/

/**
socialbar > in #navigation / footer
**/

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

nav.socialbar,
nav.sharebar {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; /* for mobile */
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 0;
	white-space: nowrap;
	line-height: 1;
}
nav.socialbar:not(.buttons),
nav.sharebar:not(.buttons) {
	gap: 0;
}
nav.socialbar > *:not(span),
nav.sharebar > *:not(span) {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}
nav.socialbar > *:not(span) {
	padding: 1em;
}
nav.sharebar > *:not(span) {
	padding: 1em 1.25em;
}
nav.socialbar > .title,
nav.sharebar > .title {
	margin-right: 1em;
}
nav.socialbar a > *
nav.sharebar a > * {
	display: block;
	height: 1em;
	width: 1em;
}

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

nav.sharebar {
	font-size: .875em;
}
nav.buttons.sharebar > *:not(span) {
	padding: 1em;
}

/**********************************/
/********** COPY / PASTE **********/
/**********************************/

.copy-toast {
	position: fixed;
	z-index: 10000;
	bottom: var(--gutter-gap);
	left: 50%;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
	color: var(--bright-color);
	background: var(--dark-color);
	font-size: .875em;
	padding: 1em;
	-webkit-border-radius: .5em;
	   -moz-border-radius: .5em;
	        border-radius: .5em;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all var(--duration-fast) ease;
	-o-transition: all var(--duration-fast) ease;
	-moz-transition: all var(--duration-fast) ease;
	transition: all var(--duration-fast) ease;
}
.copy-toast.show {
	opacity: 1;
	visibility: visible;
}
.copy-toast.error {
	background: #f44336;
}

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

/**
nav.contextual (#contextual is the fixed one)
can have x nav.contextual (eg. #contextual + filters)

nav.swiperable > .menu > li > a
**/

/*********************************/
/********** #CONTEXTUAL **********/
/*********************************/

#contextual {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1210;
	top: var(--header-height);
	margin: 0;
	width: 100%;
	max-width: none;
	font-size: var(--font-size);
	text-transform: uppercase;
	white-space: nowrap;
	padding-top: var(--global-spacing);
	padding-bottom: var(--global-spacing);
	gap: 0;
	background: var(--bright-color);
}
#contextual a {
	padding: .5em;
	margin: 0;
}
#contextual a:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: .5em;
	height: var(--line-height);
	width: 0%;
	-webkit-border-radius: var(--line-height);
	   -moz-border-radius: var(--line-height);
	        border-radius: var(--line-height);
	color: currentColor;
	background-color: currentColor;
	pointer-events: none;
}
#contextual a:hover:after,
#contextual a.active:after {
	width: -webkit-calc(100% - 1em);
	width: -moz-calc(100% - 1em);
	width: calc(100% - 1em);
}

/********************************/
/********** ADMIN ONLY **********/
/********************************/

/**
for hidden pages visible onlyy to admins
**/

nav a.admin-only {
	text-decoration: line-through;
}

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

#contextual .menu {
	-webkit-flex-wrap:nowrap;
	    -ms-flex-wrap:nowrap;
	        flex-wrap:nowrap;
	margin:0 auto;
	width:100%;
	gap: 0;
	max-width: var(--content-maxwidth);
}

/************************/
/********** FX **********/
/************************/

/**
based on .swiper-controls a width
color as default => theme color in colors.css
**/

nav.contextual.swiperable {
	padding: 0 -webkit-calc(var(--gutter-gap) * 2);
	padding: 0 -moz-calc(var(--gutter-gap) * 2);
	padding: 0 calc(var(--gutter-gap) * 2);
}
nav.contextual.swiperable:before {
	content: "";
	position: absolute;
	z-index: 10;
	inset: 0;
	pointer-events: none;
	background: var(--bright-color);
	background:
	-webkit-linear-gradient(
		left,
		rgba(var(--bright-rgb), 1) 0%,
		rgba(var(--bright-rgb), 0) -webkit-calc(var(--gutter-gap) * 2), 
		rgba(var(--bright-rgb), 0) -webkit-calc(100% - var(--gutter-gap) * 2),
		rgba(var(--bright-rgb), 1) 100
	);
	background:
	-moz-linear-gradient(
		left,
		rgba(var(--bright-rgb), 1) 0%,
		rgba(var(--bright-rgb), 0) -moz-calc(var(--gutter-gap) * 2), 
		rgba(var(--bright-rgb), 0) -moz-calc(100% - var(--gutter-gap) * 2),
		rgba(var(--bright-rgb), 1) 100
	);
	background:
	-webkit-gradient(
		linear,
		left top, right top,
		from(rgba(var(--bright-rgb), 1)),
		color-stop(rgba(var(--bright-rgb), 0)), 
		color-stop(rgba(var(--bright-rgb), 0)),
		color-stop(100, rgba(var(--bright-rgb), 1))
	);
	background:
	-o-linear-gradient(
		left,
		rgba(var(--bright-rgb), 1) 0%,
		rgba(var(--bright-rgb), 0) calc(var(--gutter-gap) * 2), 
		rgba(var(--bright-rgb), 0) calc(100% - var(--gutter-gap) * 2),
		rgba(var(--bright-rgb), 1) 100
	);
	background:
	linear-gradient(
		90deg,
		rgba(var(--bright-rgb), 1) 0%,
		rgba(var(--bright-rgb), 0) calc(var(--gutter-gap) * 2), 
		rgba(var(--bright-rgb), 0) calc(100% - var(--gutter-gap) * 2),
		rgba(var(--bright-rgb), 1) 100
	);
}

/********************************/
/********** SWIPERABLE **********/
/********************************/

#contextual .swiper-controls {
	z-index: 20;
}
#contextual .swiper-controls a:after {
	display: none;
}
#contextual.swiperable .swiper-slide,
#contextual.swiperable a {
	width:auto;
}
nav.contextual.swiperable .swiper-slide:first-child {
	margin-left: auto;
}
nav.contextual.swiperable .swiper-slide:last-child {
	margin-right: auto;
}

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

nav.contextual,
nav.contextual.swiperable {
	overflow:hidden;
}
h1 + nav.contextual nav {
	width:100%;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	   -moz-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	max-width: var(--content-maxwidth);
}

/*****************************/
/********** ANCHORS **********/
/*****************************/

nav.contextual a {
	color:inherit;
	text-shadow:inherit;
}
nav.contextual a:hover,
nav.contextual a.active {
	opacity:1;
}
nav.contextual.vertical,
nav.filters.vertical {
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	   -moz-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}
nav.filters.vertical .title {
	margin-top: 2em;
}

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

/** in main **/

main > section nav.contextual {
	-webkit-transform: translateX(-webkit-calc(var(--gutter-gap) * -2));
	   -moz-transform: translateX(-moz-calc(var(--gutter-gap) * -2));
	    -ms-transform: translateX(calc(var(--gutter-gap) * -2));
	     -o-transform: translateX(calc(var(--gutter-gap) * -2));
	        transform: translateX(calc(var(--gutter-gap) * -2));
	width: -webkit-calc(100% + var(--gutter-gap) * 4);
	width: -moz-calc(100% + var(--gutter-gap) * 4);
	width: calc(100% + var(--gutter-gap) * 4);
}

/*********************************/
/*********************************/
/********** NAV FILTERS **********/
/*********************************/
/*********************************/

/**
nav.filters = default filters
**/

nav.filters {
	width: 100%;
}

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

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

nav.pagination {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 100%;
	text-transform: uppercase;
}
nav.pagination > * {
	padding:1em;
	margin:0;
}

/**********************************/
/********** PAGE NUMBERS **********/
/**********************************/

nav.pagination .page-numbers {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	text-align: center; /* for <span> */
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center; /* for <a> */
	height: 3em;
	width: 3em;
	aspect-ratio: 1/1;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
}
nav.pagination .page-numbers.active,
nav.pagination a.page-numbers:hover {
	color: var(--bright-color);
	background: var(--dark-color);
}

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

nav.pagination .previous,
nav.pagination .next {
	gap: 1em;
}
nav.pagination .previous:before,
nav.pagination .next:after {
	font-family:'icomoon'; /* cf. icons.css */
}
nav.pagination .previous:hover:before {
	-webkit-transform:translateX(-.25em);
	   -moz-transform:translateX(-.25em);
	    -ms-transform:translateX(-.25em);
	     -o-transform:translateX(-.25em);
	        transform:translateX(-.25em);
}
nav.pagination .next:hover:after {
	-webkit-transform:translateX(.25em);
	   -moz-transform:translateX(.25em);
	    -ms-transform:translateX(.25em);
	     -o-transform:translateX(.25em);
	        transform:translateX(.25em);
}

/**************************/
/********** DOTS **********/
/**************************/

/* conflict with .dots fx */

nav.pagination .page-numbers.dots {
	position: relative;
	top:auto;
	left:auto;
	height:auto;
	width: auto;
}

/**************************/
/**************************/
/********** TABS **********/
/**************************/
/**************************/

/*
.nav-tabs > span
.nav-tabs.large
ul.tabs > .tab
data-tabs == #tabs
*/

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

.nav-tabs {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	gap:.5em;
}
.nav-tabs a {
	text-transform:uppercase;
	white-space:nowrap;
}

/********** NAV TABS TITLES **********/

.nav-tabs.section-title:before {
	padding-right:0;
}

/********** TABS **********/

.tabs {
	display:block;
	width: 100%;
	overflow:hidden;
}
.tabs:after {
	content:"";
	display:block;
	clear:both;
}
.tabs > * {
	display:block;
	float:left;
	width:100%;
	margin-left:-9999rem;
	height:0;
	opacity:0;
	visibility: hidden;
}
.tabs > .active {
	margin-left:0;
	height:100%;
	opacity:1;
	visibility:visible;
}
.tabs > li + li {
	margin:0;
}

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

.tabs.is-loading:before {
	position:fixed;
	z-index:100;
	top:50%;
	left:50%;
	-webkit-transform:translate3d(-50%,-50%,0);
	   -moz-transform:translate3d(-50%,-50%,0);
	        transform:translate3d(-50%,-50%,0);
}
.tabs.is-loading .tab {
	opacity:0;
}

/*********************************/
/*********************************/
/********** COLLAPSIBLE **********/
/*********************************/
/*********************************/

/**
.collapsible
.collapsible-toggle
.collapsible-toggle.button / .collapsible-toggle.button.small
.collapsible-toggle.simple

cf. single director : list films
cf. single film : generic

max-height: in JS
**/

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

div.collapsible {
	position: relative;
	display: block;
	max-height: 0;
	padding-bottom: 0;
	/*overflow: hidden;*/
}
a.collapsible-toggle:before {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	color: inherit;
	aspect-ratio: 1300/3; /*var(--line-break-ratio);*/
	background: var(--line-break);
	-webkit-background-size: 100% auto;
	   -moz-background-size: 100% auto;
	     -o-background-size: 100% auto;
	        background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}
div.collapsible + a.collapsible-toggle:before {
	display: none;
}
div.collapsible:after {
	content: "";
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
	display:block;
	color:inherit;
	aspect-ratio: 1300/3; /*var(--line-break-ratio);*/
	background: var(--line-break);
	-webkit-background-size: 100% auto;
	   -moz-background-size: 100% auto;
	     -o-background-size: 100% auto;
	        background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}
div.collapsible > * {
	position: absolute;
	top: -9999rem;
	visibility: hidden;
	opacity: 0;
}
div.collapsible > *:last-child,
div.collapsible > *:first-child:last-child {
	padding-bottom: var(--global-spacing);
}
div.collapsible.collapsed {
	max-height: 100rem;
}
div.collapsible.collapsed > * {
	position: relative;
	top:auto;
	visibility: visible;
	opacity: 1;
}
div.collapsible:not(.collapsed),
div.collapsible + .collapsible-toggle {
	margin-top: 0 !important;
}

/*******************************************/
/********** COLLAPSIBLE-CONTAINER **********/
/*******************************************/

/* FAQ mode => unused now */

.collapsible-container {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

/***********************************/
/********** TOGGLE BUTTON **********/
/***********************************/
/* cf. FAQ */

a.collapsible-toggle {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	   -moz-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	gap: 1em;
	width: 100%;
	/*padding: .75em;*/
	padding: .75em 0;
}
a.collapsible-toggle:after {
	display: none;
}
a.collapsible-toggle > * {
	margin: 0;
}
a.collapsible-toggle > [class^="icon-"] {
	margin-left: auto;
}
a.collapsible-toggle.active > [class^="icon-"] {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}

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

@media (max-width: 760px) {
	a.collapsible-toggle > [class^="icon-"] {
		font-size: 1em;
	}
}
@media (min-width: 760px) {
	a.collapsible-toggle > [class^="icon-"] {
		font-size: 2em;
	}
}

/***********************************/
/***********************************/
/********** ACCESSIBILITY **********/
/***********************************/
/***********************************/

/*********************************/
/********** ALTERATIONS **********/
/*********************************/

/*
body.zoomed == font-size changed (JS)
body.contrasted == colors changed (JS)
*/

/********** ACCESSIBILITY-TOGGLE **********/

#accessibility-toggle {
	position:relative;
	z-index:2100;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-size: 1.5em;
	line-height: 1;
}

/***********************************/
/********** FOCUS-VISIBLE **********/
/***********************************/

/*
:focus == hover and keyboard
:focus-visible == tab key only
tabindex = -1 == no keyboard
*/

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

button:focus-visible,
a:focus-visible {
	outline:solid;
	outline-width: var(--line-height);
	outline-offset: -webkit-calc(var(--line-height) * -1);
	outline-offset: -moz-calc(var(--line-height) * -1);
	outline-offset: calc(var(--line-height) * -1);
}

p > a:focus-visible,
.read-more:focus-visible,
.link:focus-visible {
	outline-offset: -webkit-calc(var(--line-height) * 2);
	outline-offset: -moz-calc(var(--line-height) * 2);
	outline-offset: calc(var(--line-height) * 2);
}

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

.buttons a:focus-visible,
.button:focus-visible,
.section-link:focus-visible {
	outline-offset: -webkit-calc(var(--line-height) * 4);
	outline-offset: -moz-calc(var(--line-height) * 4);
	outline-offset: calc(var(--line-height) * 4);
}

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

#navbar a:focus-visible {
	outline-offset:0;
}

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

nav.grid-filters a {
	outline-offset: -webkit-calc(var(--line-height) * 2);
	outline-offset: -moz-calc(var(--line-height) * 2);
	outline-offset: calc(var(--line-height) * 2);
}

/********** #LOGO **********/

#logo:focus-visible {
	outline-offset: -webkit-calc(var(--line-height) * 3);
	outline-offset: -moz-calc(var(--line-height) * 3);
	outline-offset: calc(var(--line-height) * 3);
}

/********** PRIMARY **********/

nav.primary a:focus-visible {
	outline:none;
}
nav.primary a:focus-visible span {
	outline:solid;
	outline-width: var(--line-height);
	outline-color:var(--dark-color);
}

/*******************************************/
/********** ACCESSIBILITY OPTIONS **********/
/*******************************************/

.accessibility-options {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
	    -ms-flex-wrap:wrap;
	        flex-wrap:wrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap:1em;
	font-size:1em;
	line-height:1em;
}
.accessibility-options > * {
	margin:0;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	   -moz-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	-webkit-flex-basis:0;
	    -ms-flex-preferred-size:0;
	        flex-basis:0;
}

/********** BUTTON CONTROLLER **********/

.controller.button {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	   -moz-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap:.5em;
	padding: 0;
	white-space: nowrap;
	pointer-events: none;
	color: var(--dark-color) !important;
	background: var(--bright-color) !important;
}
.controller.button .increase,
.controller.button .decrease {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 1em;
	aspect-ratio: 1/1;
	pointer-events: all;
}
.controller.button .decrease {
	-webkit-border-radius: 2em 0 0 2em;
	   -moz-border-radius: 2em 0 0 2em;
	        border-radius: 2em 0 0 2em;
}
.controller.button .increase {
	-webkit-border-radius: 0 2em 2em 0;
	   -moz-border-radius: 0 2em 2em 0;
	        border-radius: 0 2em 2em 0;
}
.controller.button .increase:hover,
.controller.button .decrease:hover {
	color:var(--bright-color);
	background:var(--dark-color);
} 

/********** BUTTON SWITCHER **********/
/* ex. accessibility contrast button */

a.switcher {
	position:relative;
	z-index:10;
	padding-left: 4em;
	overflow: hidden;
}
a.switcher:before,
a.switcher:after {
	content:"";
	position:absolute;
	top:50%;
	left:0;
	-webkit-transform:translate3d(0,-50%,0);
	   -moz-transform:translate3d(0,-50%,0);
	        transform:translate3d(0,-50%,0);
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
a.switcher:before {
	content:"OFF";
	font-size: .75em;
	height:100%;
	aspect-ratio:1/1;
	color:var(--bright-color);
}
a.switcher:after {
	content:"";
	z-index:-1;
	height:3em;
	width:3em;
	background:var(--dark-color);
}
a.switcher.active {
	color:var(--bright-color);
}
a.switcher.active:before {
	content:"ON";
	left:100%;
	-webkit-transform:translate3d(-100%,-50%,0);
	   -moz-transform:translate3d(-100%,-50%,0);
	        transform:translate3d(-100%,-50%,0);
}
a.switcher.active:after {
	width:100%;
}

/********** @HOVER **********/

@media (hover: hover) {
	a.switcher:hover:before {
		left:1em;
	}
	a.switcher:hover:after {
		width:4em;
	}
	a.switcher.active:hover:before {
		left:-webkit-calc(100% - 1em);
		left:-moz-calc(100% - 1em);
		left:calc(100% - 1em);
	}
	a.switcher.active:hover:after {
		width:-webkit-calc(100% - 1em);
		width:-moz-calc(100% - 1em);
		width:calc(100% - 1em);
	}
}