@charset "UTF-8";

/*
TODO
if section before has-background > 2X
*/

/****************************/
/****************************/
/********** 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;
	background: var(--bright-color);
}

/********** WRAPPER **********/
/* flex == footer at bottom */

#wrapper {
	position: relative;
	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;
	min-height: 100%;
	background: inherit;
	margin: 0;
	padding: 0;
}

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

main {
	position: relative;
	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;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 0;
	margin: 0;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	   -moz-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	/*overflow:hidden;*/ /* temp ? */
}

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

/* background in :after for animations */

header {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1200;
	top: 0;
	pointer-events: none;
	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;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	   -moz-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	   -moz-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	font-size: 1em;
	margin: 0;
	min-height:var(--navbar-height);
}
header > * {
	z-index: 10;
	pointer-events: auto;
	margin: 0;
	color: inherit;
	text-shadow: inherit;
	fill: inherit;
}
header:after {
	content:"";
	position:absolute;
	z-index: -1;
	top:0;
	left:0;
	height:100%;
	width:100%;
	-webkit-transform:translate3d(0,0,0);
	   -moz-transform:translate3d(0,0,0);
	        transform:translate3d(0,0,0);
	background: var(--bright-color);
}

/**************************/
/********** LOGO **********/
/**************************/

/* #logo == in header */

#logo,
#overlay-navigation .logo {
	height: var(--logo-height);
	fill: inherit;
}
#overlay-navigation .logo {
	margin: 0 auto 1em auto;
}

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

/** mobile **/
@media (max-width: 760px) {
	#logo {
		margin-top: 0.5em;
	}
}

/************************************************/
/********** INTRODUCED == LANDING PAGE **********/
/************************************************/

/** visible banner **/
/* visibility:hidden ==> no focusing */

body.introduced:not(.off) header {
	color:var(--bright-color);
	text-shadow:0 0 0 var(--bright-color);
}
body.introduced:not(.off) header:after {
	opacity:0;
	-webkit-transform:translate3d(0,-100%,0);
	   -moz-transform:translate3d(0,-100%,0);
	        transform:translate3d(0,-100%,0);
	background: none;
}
body.introduced:not(.off) #logo,
body.introduced:not(.off) #logo .logo-circles {
	fill:var(--bright-color);
}

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

/** mobile **/
@media (max-width: 760px) {
	header {
		padding: .75em;
	}
}
/** desktop **/
@media (min-width: 760px) {
	header {
		padding: .5em;
	}
}

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

body.error main {
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
body.error main section {
	margin-top:auto;
	margin-bottom: auto;
}

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

footer {
	position: relative;
	z-index: 10;
	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;
	width: 100%;
	pointer-events: none;
	line-height: 1em;
	background: var(--light-color);
}
footer > * {
	text-align: center;
	pointer-events: auto;
	margin: 0 !important;
}
footer .copyright {
	padding: 1rem;
	margin: 0;
}

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

/** mobile **/
@media (max-width:760px) {
	footer {
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		   -moz-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
}
/** desktop **/
@media (min-width:760px) {
	footer {
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		   -moz-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
}

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

/*
[default]	== normal content max-width
.focus		== heading section
.full		== no content max-width / no padding
.large		== no content max-width
.cover		== Fullscreen (100vh) min-height

css <=> wp 
section <=> .section / .wp-block-group
section .content <=> .wp-block-group__inner-container

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

section {
	position: relative;
	z-index: 10;
	clear: both;
	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;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	overflow: initial;
	width: 100%;
	max-width:none; /* for back WP */
	padding: 0 !important;
	margin: 0;
	background: var(--bright-color);
	overflow:hidden; /* for swipers */
}

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

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

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

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

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

section.cover {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	min-height: var(--viewport-height);
}
section.cover .content.vertical-aligned {
	margin: auto;
}

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

section .content {
	position: relative;
	z-index: 10;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	   -moz-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}
section > .content {
	-webkit-flex-basis: 0;
	    -ms-flex-preferred-size: 0;
	        flex-basis: 0;
}
section > aside {
	-webkit-box-flex: 0.5;
	-webkit-flex-grow: 0.5;
	   -moz-box-flex: 0.5;
	    -ms-flex-positive: 0.5;
	        flex-grow: 0.5;
	-webkit-flex-basis: 0;
	    -ms-flex-preferred-size: 0;
	        flex-basis: 0;
}
section .content .columns .short img {
	margin: 0 0 0 auto;
}

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

.sidebar {
	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;
}
.sidebar > * + * {
	margin-top:1em;
}
.sidebar > .short + * {
	margin-top:0;
}
/*
.sidebar > .short i {
	font-style: inherit;
}
*/
/********** ASIDE STICKY-BUTTON **********/
/** for donation sticky button **/

aside .sticky-button {
	position:fixed;
	top:50%;
	-webkit-transform:translate3d(0,-50%,0);
	   -moz-transform:translate3d(0,-50%,0);
	        transform:translate3d(0,-50%,0);
	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;
	aspect-ratio:1/1;
	font-size:2em;
	text-align: center;
	color:var(--bright-color);
	text-shadow:0 0 0 var(--bright-color);
	background:var(--primary-color);
	padding:var(--global-spacing);
	max-width:6em;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
}

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

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

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

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

section.banner {
	height:var(--viewport-height);
	margin-top:-webkit-calc(var(--header-height) * -1);
	margin-top:-moz-calc(var(--header-height) * -1);
	margin-top:calc(var(--header-height) * -1);
}

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

section.banner .content {
	color: var(--bright-color);
	text-shadow: 0 0 0 var(--bright-color);
	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;
	-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: 1.25em;
	margin:auto;
	max-width:none;
	width:100%;
}
section.banner .content .title {
	font-size:min(max(var(--body-font-size), 4em), 6.25rem); /* desktop */
	line-height: 1em;
}
section.banner .background:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: block;
	background: var(--dark-color);
	opacity: 0.25;
}
section.banner .button {
	color: var(--primary-color);
	text-shadow: 0 0 0 var(--primary-color);
}
section.banner .section-link {
	position:absolute;
	z-index:10;
	left:50%;
	bottom:-webkit-calc(var(--gutter-gap) * 3);
	bottom:-moz-calc(var(--gutter-gap) * 3);
	bottom:calc(var(--gutter-gap) * 3); /** pagination **/
	font-size:2.5em;
	line-height: 1em;
	color: var(--bright-color);
	text-shadow: 0 0 0 var(--bright-color);
	-webkit-transform:translate3d(-50%,0,0);
	   -moz-transform:translate3d(-50%,0,0);
	        transform:translate3d(-50%,0,0);
}
section.banner .svg-icon-outline {
	fill:none;
	stroke:var(--bright-color);
	stroke-width:-webkit-calc(var(--logo-line-height) / 4);
	stroke-width:-moz-calc(var(--logo-line-height) / 4);
	stroke-width:calc(var(--logo-line-height) / 4);
}

/********** SWIPER **********/

section.banner .swiper-slide {
	height:var(--viewport-height);
}
section.banner .swiper-slide-content {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
}
section.banner .infos {
	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;
	-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;
	margin:auto;
}

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

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

/***********************************/
/***********************************/
/********** SECTION FOCUS **********/
/***********************************/
/***********************************/

section.focus {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	   -moz-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	padding: 0;
}
section.focus > * {
	-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;
}
section.focus .content {
	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;
}

/********** THUMBNAIL **********/
/* keep ratio 1/1 */

section.focus .thumbnail {
	margin: 0;
}

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

section.focus .infos {
	position: relative;
	z-index: 30;
	margin: auto;
	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;
	-webkit-align-self: stretch;
	    -ms-flex-item-align: stretch;
	            -ms-grid-row-align: stretch;
	        align-self: stretch;
	width: 100%;
	gap: 0;
	margin: 0;
}
section.focus .infos.centered .event-link {
	width: 100%;
}
section.focus .infos.centered > *,
section.focus .infos.centered .event-link > * {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/********** COLUMNS **********/

section.focus .columns {
	margin: 0;
}
section.focus .columns .thumbnail {
	margin-left: auto;
}
section.focus .columns .infos + .thumbnail {
	margin-right: auto;
}
section.focus .columns .infos {
	height: auto;
	margin: auto -webkit-calc(var(--gutter-gap) * 2);
	margin: auto -moz-calc(var(--gutter-gap) * 2);
	margin: auto calc(var(--gutter-gap) * 2);
}

/** @media **/

@media (max-width: 760px) {
	section.focus .columns .thumbnail {
		-webkit-box-ordinal-group: 0;
		-webkit-order: -1;
		   -moz-box-ordinal-group: 0;
		    -ms-flex-order: -1;
		        order: -1;
	}
	section.focus .columns .infos {
		margin: -webkit-calc(var(--gutter-gap) * 2);
		margin: -moz-calc(var(--gutter-gap) * 2);
		margin: calc(var(--gutter-gap) * 2);
		max-width: -webkit-calc(100% - var(--gutter-gap) * 4);
		max-width: -moz-calc(100% - var(--gutter-gap) * 4);
		max-width: calc(100% - var(--gutter-gap) * 4);
	}
}

/********** POST **********/

section.focus.post {
	color: var(--bright-color);
	text-shadow: 0 0 0 var(--bright-color);
}
section.focus.post .thumbnail {
	width: 100%;
}
section.focus.post .mediaplayer-container {
	height: auto;
	width: 100%;
}
section.focus.post + section .content {
	margin-top: 0;
}

/********** EVENT / ACTION **********/

section.focus .event-title {
	margin: auto 0 0 0;
}

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

@media (min-width: 0px) {
	/** default **/
	section.focus .infos {
		height: 100%;
	}
	section.focus .event-title {
		font-size: 1.5em;
	}
	section.focus .event-dates {
		font-size: 2em;
	}
	section.focus .infos > * + *,
	section.focus .infos .event-link > * + * {
		margin-top: 1rem;
	}
	section.focus .infos .event-title + .event-dates {
		margin-top: 0;
	}
	/** columns **/
	section.focus .columns {
		height: 100%;
	}
}
@media (min-width: 760px) {
	/** default **/
	section.focus {
		min-height:20rem;
	}
	/** columns **/
	section.focus .columns {
		-webkit-flex-wrap: nowrap;
		    -ms-flex-wrap: nowrap;
		        flex-wrap: nowrap;
	}
	section.focus .thumbnail,
	section.focus .mediaplayer-container,
	section.focus .infos {
		max-height: -webkit-calc(var(--viewport-height) - var(--header-height) - var(--gutter-gap) * 2);
		max-height: -moz-calc(var(--viewport-height) - var(--header-height) - var(--gutter-gap) * 2);
		max-height: calc(var(--viewport-height) - var(--header-height) - var(--gutter-gap) * 2);
	}
	section.focus .columns .thumbnail {
		max-width: 50%;
	}
	/** with contextual before == cf. page **/
	#contextual + section.focus .thumbnail,
	#contextual + section.focus .mediaplayer-container,
	#contextual + section.focus .infos {
		max-height: -webkit-calc(var(--viewport-height) - var(--header-height) - var(--contextual-height) - var(--gutter-gap) * 2);
		max-height: -moz-calc(var(--viewport-height) - var(--header-height) - var(--contextual-height) - var(--gutter-gap) * 2);
		max-height: calc(var(--viewport-height) - var(--header-height) - var(--contextual-height) - var(--gutter-gap) * 2);
	}
	/* to test !!! */
	section.focus .columns:not(.vertical-centered) .infos {
		margin-bottom: -webkit-calc(var(--gutter-gap) * 2) !important;
		margin-bottom: -moz-calc(var(--gutter-gap) * 2) !important;
		margin-bottom: calc(var(--gutter-gap) * 2) !important;
	}
}
@media (min-width: 1000px) {
	/** columns **/
	section.focus .columns {
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
	}
	/* spacing */
	section.focus .infos > * + *,
	section.focus .infos .event-link > * + * {
		margin-top: 2rem;
	}
	/* post */
	section.focus.post .infos {
		max-width: -webkit-calc(50% - 8em);
		max-width: -moz-calc(50% - 8em);
		max-width: calc(50% - 8em);
	}
}

/** portrait mobile **/

@media (orientation: portrait) {
	section.focus {
		min-height: auto;
	}
	section.focus:before {
		padding: 100% 0 0 0;
	}
}

/********************************/
/********************************/
/********** WP CONTENT **********/
/********************************/
/********************************/

/* css <> wp */

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