@charset "UTF-8";

/**
 * Theme  : Neutral
 * Version: 3.0.0
 * Author : hybrid.
 *
 * layout.css — Core layout : wrapper, header, footer, main, sections, aside.
 * Project overrides → theme-layout.css.
 *
 * Section modifiers
 * [default]  — normal content max-width
 * .focus     — heading section
 * .full      — no content max-width, no padding
 * .large     — no content max-width
 * .min       — reduced padding
 * .cover     — fullscreen (100svh) min-height
 * .banner    — introduction section, fixed height
 *
 * WP / CSS mapping
 * section             ↔ .section / .wp-block-group
 * section-content     ↔ .wp-block-group__inner-container
 * null (alignnone)    ↔ short
 * alignwide           ↔ normal
 * alignfull           ↔ large
 *
 * Breakpoints
 * 47.5rem  = 760px
 * 62.5rem  = 1000px
 * 75rem    = 1200px
 * 87.5rem  = 1400px
 *
 * Tokens
 * --gutter-gap         structural spacing: header/section padding, first/last child in main.
 *                      Responsive: 1rem → 2rem → 3rem.
 * --section-gap-x      horizontal margin of .section-content. Derived from --gutter-gap.
 * --section-gap-y      vertical margin of .section-content. Derived from --gutter-gap.
 * --section-width      effective width of .section-content. Derived from --section-gap-x.
 * --content-max-width  max-width of content areas (86rem).
 * --stroke-width       border width used throughout (default: .125rem).
 *
 * Heights
 * --viewport-height    100svh − header − sticky-footer. Touch: 90vh (JS-rectified).
 * --header-height      logo + navbar + primary nav + padding. Responsive.
 * --footer-height      footer block height.
 * --contextual-height  sticky contextual nav height.
 * --banner-height      default banner section height.
 * --sticky-footer-height fixed bottom bar height.
 *
 * Dependencies
 * --font-size     defined in fonts.css
 * --logo-height        defined in fonts.css or vars.css
 * --content-spacing    defined in spacing.css
 * --bright-color       defined in colors.css
 * --dark-color         defined in colors.css
 * --background-color   defined in colors.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* ============================== LAYOUT ============================== */

:root {
	/* header */
	--header-direction: column;
	--header-align: stretch;
	--header-justify: space-between;
	--header-padding: .75em;

	/* footer */
	--footer-direction: row;
	--footer-align: center;
	--footer-justify: space-between;
	--footer-padding: 0;

	/* misc */
	--stroke-width: .125rem;
}


@media (min-width: 760px) {
	:root { --header-padding: .5em; }
}



/* ============================== MAX WIDTH ============================== */

:root {
	--content-max-width: 86rem;
}


/* ============================== GUTTERS ============================== */

/*
--gutter-gap     = structural spacing
--section-gap-x  = section-content horizontal margin (= gutter-gap * 2)
--section-gap-y  = section-content vertical margin   (= gutter-gap)
--section-width  = section-content effective width
*/

:root {
	--gutter-gap: 1rem;
	--section-gap-x: calc(var(--gutter-gap) * 2);
	--section-gap-y: var(--gutter-gap);
	--section-width: calc(100% - var(--section-gap-x) * 2);
}

@media (min-width: 760px) {
	:root { --gutter-gap: 2rem; }
}

@media (min-width: 1200px) {
	:root { --gutter-gap: 3rem; }
}

section.full {
	--section-gap-x: 0px;
	--section-gap-y: 0px;
	--section-width: 100%;
}

section.large {
	--section-gap-x: var(--gutter-gap);
	--section-width: calc(100% - var(--gutter-gap) * 2);
}

section.min {
	--section-gap-x: calc(var(--gutter-gap) / 2);
	--section-gap-y: calc(var(--gutter-gap) / 2);
	--section-width: calc(100% - var(--gutter-gap));
}


/* ============================== HEIGHTS ============================== */

:root {
	/* viewport — default */
	--viewport-height: 100svh;

	/* logo-based header height */
	--header-height: calc(var(--font-size) * 5);

	--footer-height: calc(var(--font-size) * 3);
	--contextual-height: calc(var(--font-size) * 3);
	--sticky-footer-height: 0px;

	--banner-height: 60svh;
}

@media (pointer: coarse) {
	:root {
		--viewport-height: 90vh; /* JS-rectified */
	}
}

@media (min-width: 760px) {
	:root {
		--header-height: calc(var(--logo-height) + var(--font-size) * 6.5);
	}
}


/* ============================== INDEX ============================== */

:root {
	--index-font-size: 1.5em;
	--index-height: 3rem;
	--index-width: auto;
	--index-padding: var(--font-size);
}

@media (min-width: 760px) {
	:root { --index-height: 4rem; }
}

@media (min-width: 1000px) {
	:root {
		--index-font-size: 3em;
		--index-height: 6rem;
	}
}



/* ===================================================================================================== */
/* ============================================= FALLBACKS ============================================= */
/* ===================================================================================================== */

/* overflow: clip  — fallback: hidden (Chrome < 90, Safari < 16)    */
/* min-height: svh — fallback: vh     (Chrome < 108, Safari < 15.4) */

section       { overflow: hidden; }
main          { overflow-x: hidden; }
section.cover { min-height: 100vh; }



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */

/* ============================== STRUCTURE ============================== */

#wrapper {
	transition:
		opacity var(--duration-fast) var(--ease),
		filter var(--duration-fast) var(--ease);
}

body {
	transition:
		color var(--duration-fast) var(--ease),
		background var(--duration-slow) var(--ease);
}

header {
	transition:
		color var(--duration-fast) var(--ease),
		opacity var(--duration-fast) var(--ease),
		background var(--duration-normal) var(--ease);
}

main,
footer {
	transition:
		opacity var(--duration-fast) var(--ease-fast),
		filter var(--duration-fast) var(--ease-fast),
		transform var(--duration-normal) var(--ease);
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== RESET ============================== */

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


/* ============================== BODY ============================== */

body {
	overflow-x: hidden;
	scroll-padding-top: var(--header-height, 0px); /* Chrome restoration scroll fix + scroll.js */
}


/* ============================== WRAPPER ============================== */

#wrapper {
	position: relative;
	display: flex; /* keeps footer at bottom */
	flex-direction: column;
	min-height: 100%;
	background: inherit;
	margin: 0;
	padding: 0;
}


/* ============================== HEADER / FOOTER ============================== */

header,
footer {
	position: relative;
	display: flex;
	width: 100%;
	pointer-events: none;
}

header > *,
footer > * {
	pointer-events: auto;
	margin: 0;
	color: inherit;
	fill: inherit;
}


/* =============== HEADER =============== */

header {
	z-index: 1200;
	flex-direction: var(--header-direction);
	align-items: var(--header-align);
	justify-content: var(--header-justify);
	height: var(--header-height);
	padding: var(--header-padding);
}

/* z-index for header::after background */

header > * { z-index: 10; }


/* =============== FOOTER =============== */

footer {
	flex-direction: var(--footer-direction);
	align-items: var(--footer-align);
	justify-content: var(--footer-justify);
	padding: var(--footer-padding);
}


/* =============== STICKY =============== */

header.sticky {
	position: sticky;
	z-index: 1300;
	top: 0;
}


/* ============================== MAIN ============================== */

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

/* extra bottom spacing */

main { padding-bottom: var(--gutter-gap); }
main:has(> section:last-child) { padding-bottom: 0; }


/* =============== FIRST / LAST CHILD =============== */

main > section:not(.focus):first-child .section-content { margin-top: 0 !important; }

main > *:first-child:not(.hidden):not(section):not(.sticky) { margin-top: var(--section-gap-y) !important; }

main > section.full:last-child .section-content { margin-bottom: 0; }


/* =============== CHILDREN =============== */

/*
 * Default width constraint for direct children of main
 * that do not manage their own width.
 * Keep exclusion list up to date when adding new full-width components.
 */

main > *:not(section):not(.full):not(.button):not([class*='-background-color']) {
	width: min(100% - var(--section-gap-x) * 2, var(--content-max-width));
	margin-inline: var(--section-gap-x);
}

main > .button {
	width: auto;
	align-self: flex-start;
	margin-inline: var(--section-gap-x);
}


/* =============== BACKGROUND COLOR BLOCKS =============== */

/* @see section.has-background */

main > :not(section)[class*='-background-color'] {
	position: relative;
	z-index: 5;
	width: calc(100% - var(--section-gap-x) * 4);
	padding: var(--section-gap-y) 0;
	margin-inline: calc(var(--section-gap-x) * 2);
	max-width: var(--content-max-width);
}

main > :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;
}


/* ============================== SECTIONS ============================== */

/*
 * max-width: none — for WP back-compat
 * overflow: hidden — for swipers (see FALLBACKS)
 */


/* =============== DEFAULT =============== */

section {
	position: relative;
	clear: both;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	min-height: auto;
	max-width: none;
	margin-inline: 0;
	overflow: clip;
}


/* =============== SECTION-CONTENT =============== */

.section-content {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: min(var(--section-width), var(--content-max-width));
	margin-inline: var(--section-gap-x);
	margin-top: var(--section-gap-y);
	margin-bottom: var(--section-gap-y);
	max-width: var(--content-max-width);
}

/* if multiple section-content */

section > .section-content { flex-basis: 0; }


/* =============== MODIFIERS =============== */
/*
section.full > .section-content {
	max-width: none;
	margin-top: 0;
}
section.large,
section.large > .section-content {
	max-width: none;
}
*/
section.cover {
	min-height: var(--viewport-height);
}


/* =============== RESPONSIVE =============== */

@media (max-width: 1000px) {
	section { flex-direction: column; }
}


/* ============================== ASIDE WIP ============================== */

/* In <section> — alone behaves like .section-content */


/* =============== DEFAULT =============== */

aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: var(--section-width);
	margin-inline: var(--section-gap-x);
	margin-top: var(--section-gap-y);
	margin-bottom: var(--section-gap-y);
	max-width: var(--content-max-width);
}


/* =============== MODIFIERS =============== */

aside.reversed { order: -1; }


/* =============== IN SECTION =============== */

section > aside {
	position: relative;
	z-index: 10;
	flex-grow: 1;
}

@media (max-width: 1000px) {
	section > .section-content + aside { order: -1; }
	section > aside.reversed { margin-bottom: 0; }
}

@media (min-width: 1000px) {
	section > .section-content + aside {
		flex-grow: .5;
		flex-basis: 0;
	}
	section > .section-content:not(:only-child) {
		max-width: calc(var(--content-max-width) * 2 / 3 - var(--section-gap-x) / 2);
	}
	section > .section-content + aside {
		max-width: calc(var(--content-max-width) * 1 / 3 - var(--section-gap-x) / 2);
		margin-left: 0;
	}
	section > aside.reversed {
		margin-inline: calc(var(--section-gap-x) / 2) 0;
	}
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */


/* ============================== HEADER ============================== */

/* background in ::after for transitions / introduced state */

header::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	transform: translate3d(0, 0, 0);
	background: var(--background-color);
}


/* =============== LOGO =============== */

#logo,
#overlay-navigation .logo {
	height: var(--logo-height);
	fill: inherit;
}

#overlay-navigation .logo { margin: 0 auto 1em auto; }

@media (max-width: 760px) {
	#logo { margin-top: .5em; }
}


/* =============== INTRODUCED =============== */

/* landing page: header transparent over hero */

body.introduced:not(.off) header {
	color: var(--bright-color);
}

body.introduced:not(.off) header::after {
	opacity: 0;
	transform: translate3d(0, -100%, 0);
	background: none;
}

body.introduced:not(.off) #logo,
body.introduced:not(.off) #logo .logo-circles {
	fill: var(--bright-color);
}


/* ============================== FOOTER ============================== */

footer {
	background: var(--light-color);
	--content-max-width: none;
}
/*footer nav.secondary { flex-grow: 1; flex-basis: 0; }
footer nav.socialbar { width: auto; }*/


/* ============================== INDEX ============================== */
/*
header .index {
	display: inline-flex;
	font-size: var(--index-font-size);
	white-space: nowrap;
	margin: 0 auto 0 0;
}

header .index::after { display: none; }

header .index > * {
	width: var(--index-width);
	height: var(--index-height);
}
*/

/* ============================== HEADING ============================== */

#heading {
	position: relative;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0;
}

#heading > * { margin: 0; }

#heading nav.primary {
	margin: 0 -1em 0 auto;
	justify-self: center;
}


/* ============================== NAVBAR ============================== */

#navbar {
	position: relative;
	z-index: 1200;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
	width: 100%;
}

#navbar > * {
	width: auto;
	margin: 0;
	pointer-events: auto;
}

#navbar nav.navbar {
	--nav-font-size: .75em;
	--nav-anchor-padding: 1.5em 1em;
}


/* =============== ORDER =============== */

#navbar nav.alias             { order: 1; }
#navbar #accessibility-toggle { order: 2; }
#navbar #navigation-expand    { order: 3; }


/* ============================== CONTEXTUAL ============================== */

#contextual {
	position: sticky;
	z-index: 1100;
	top: var(--header-height);
	margin: 0;
	width: 100%;
	max-width: none !important;
	font-size: var(--font-size);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	padding-top: var(--content-spacing);
	padding-bottom: var(--content-spacing);
	gap: 0;
	background: var(--bright-color);
}

main #contextual + section[class*="-background-color"] .section-content {
	margin-top: calc(var(--content-spacing) / 2);
}







/* ============================== SECTION BANNER ============================== */
/*OK*/

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

section.banner .section-content {
	color: var(--bright-color);
	text-shadow: 0 0 0 var(--bright-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	font-size: 1.25em;
	margin: auto;
	max-width: none;
	width: 100%;
}

section.banner .section-content .title {
	font-size: min(max(var(--font-size), 4em), 6.25rem);
	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: calc(var(--gutter-gap) * 3);
	font-size: 2.5em;
	line-height: 1em;
	color: var(--bright-color);
	text-shadow: 0 0 0 var(--bright-color);
	transform: translate3d(-50%, 0, 0);
}

section.banner .svg-icon-outline {
	fill: none;
	stroke: var(--bright-color);
	stroke-width: calc(var(--logo-line-height) / 4);
}

/* swiper */

section.banner .swiper-slide {
	height: var(--viewport-height);
}

section.banner .swiper-slide-content {
	display: flex;
}

section.banner .infos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin: auto;
}

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

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


/* ============================== FOCUS ============================== */

main section.focus {
	background: var(--background-color);
}

section.focus + #contextual {
	margin-top: calc(var(--gutter-gap) * -1);
}




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

section.focus {
	display: flex;
	align-items: stretch;
	padding: 0;
}

section.focus > * {
	flex-grow: 1;
	flex-basis: 0;
}

section.focus .section-content {
	display: inline-flex;
	justify-content: center;
}

/* thumbnail */

section.focus .thumbnail {
	margin: 0;
}

/* infos */

section.focus .infos {
	position: relative;
	z-index: 30;
	display: flex;
	flex-direction: column;
	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 calc(var(--gutter-gap) * 2);
}

@media (max-width: 760px) {
	section.focus .columns .thumbnail { order: -1; }
	section.focus .columns .infos {
		margin: calc(var(--gutter-gap) * 2);
		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 .section-content { margin-top: 0; }

/* event / action */

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

/* responsive */

section.focus .infos { height: 100%; }
section.focus .columns { 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; }

@media (min-width: 760px) {
	section.focus { min-height: 20rem; }
	section.focus .columns { flex-wrap: nowrap; }

	section.focus .thumbnail,
	section.focus .mediaplayer-container,
	section.focus .infos {
		max-height: calc(var(--viewport-height) - var(--header-height) - var(--gutter-gap) * 2);
	}

	section.focus .columns .thumbnail { max-width: 50%; }

	#contextual + section.focus .thumbnail,
	#contextual + section.focus .mediaplayer-container,
	#contextual + section.focus .infos {
		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: calc(var(--gutter-gap) * 2) !important;
	}
}

@media (min-width: 1000px) {
	section.focus .columns { flex-wrap: wrap; }

	section.focus .infos > * + *,
	section.focus .infos .event-link > * + * { margin-top: 2rem; }

	section.focus.post .infos { max-width: calc(50% - 8em); }
}

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






/* ============================== SHORT CONTENT ============================== */

/* Override --short-content-max-width per project if needed */

.short-content,
.short-content.is-center,
.short-content.is-right {
	max-width: calc(100% * 2 / 3) !important;
}

.short-content {
	margin-inline: 0 auto !important;
}

.short-content.is-center {
	align-self: center;
	margin-inline: auto !important;
}

.short-content.is-right {
	align-self: flex-end;
	margin-inline: auto 0 !important;
}

main > .short-content,
main > .short-content.is-center,
main > .short-content.is-right {
	max-width: calc(var(--content-max-width) * 2 / 3) !important;
}

main > .short-content:not(.is-center) {
	align-self: flex-start;
	margin-left: max(var(--section-gap-x), calc((100% - var(--content-max-width)) / 2)) !important;
}

main > .short-content.is-right {
	align-self: flex-end;
	margin-right: max(var(--section-gap-x), calc((100% - var(--content-max-width)) / 2)) !important;
}


/* ============================== STICKY FOOTER ============================== */

.sticky-footer {
	position: sticky;
	bottom: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: var(--background-color);
}

.sticky-footer > * { margin: 0; }


/* ============================== 404 ============================== */

body.error main { align-items: center; }

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