@charset "UTF-8";

/**
 * structure.css 1.0.0
 *
 * Global layout — body, wrapper, header, footer, sections, aside.
 *
 * SECTIONS
 * [default]  — normal content max-width
 * .focus     — heading section
 * .full      — no content max-width, no padding
 * .large     — no content max-width
 * .min       — short padding
 * .cover     — fullscreen (100svh) min-height
 *
 * WP / CSS mapping
 * section           ↔ .section / .wp-block-group
 * section-content   ↔ .wp-block-group__inner-container
 * null              ↔ short
 * alignwide         ↔ normal
 * alignfull         ↔ large
 *
 * BREAKPOINTS
 * 50rem  = 800px
 * 62.5rem = 1000px
 * 75rem  = 1200px
 * 87.5rem = 1400px
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


/* ========== GLOBAL ========== */

:root {
	--stroke-width: .125rem;
	
	--text-color: var(--dark-color);
	--background-color: var(--bright-color);
}


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

/*
50rem  = 800px
62.5rem = 1000px
75rem  = 1200px
87.5rem = 1400px
*/

:root {
	/*--short-content-max-width: calc(100% - var(--gutter-gap) * 4 * 2 / 3);*/
	/*--content-max-width: calc(100% - var(--gutter-gap) * 4);*/
	--content-max-width: 75rem;
}

@media (min-width: 1200px) {
	:root {
		--content-max-width: 87.5rem;
	}
}


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

@media (max-width: 1000px) {
	:root {
		--index-font-size: 1.5em;
		--index-height: 100%;
		--index-width: 100%;
		--index-ratio: 16/3;
	}
}
@media (min-width: 1000px) {
	:root {
		--index-font-size: 3em;
		--index-height: 100%;
		--index-width: 100%;
	}
}


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


:root {
	/*--header-height: calc(var(--font-size) + var(--gutter-gap) * 2 + var(--font-size) * .75 * 3);*/
	--header-height: calc(var(--nav-font-size) * 5 + var(--font-size) * .75 * 3);
	--sticky-footer-height: calc(var(--button-font-size) * 3);
}
body {
	--viewport-height: calc(100svh - var(--header-height) - var(--sticky-footer-height));
	--banner-height: calc(80svh - var(--header-height) - var(--sticky-footer-height));
}
.introduction {
	--banner-height: calc(100svh - var(--header-height) - var(--sticky-footer-height));

}

@media (max-width: 1000px) {
	:root {
		--header-height: calc(var(--font-size) * 5);
	}
}


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

/*
--gutter-gap     = structure
--global-spacing = content spacing vertically (e.g. p + *)
--section-gap    = section margin left / right
*/


@media (min-width: 0px) {
	:root {
		--gutter-gap: 1.25rem;
		--content-spacing: 1.25rem;
		--section-gap: 1.25rem;
		--section-width: calc(100% - var(--section-gap) * 2);
		--section-margins: var(--gutter-gap) var(--section-gap);
	}
}
@media (min-width: 760px) {
	:root {
		--content-spacing: 1.5rem;
		--section-gap: 2rem;
	}
}
@media (min-width: 1000px) {
	:root {
		--gutter-gap: 2rem;
		--content-spacing: 2rem;
	}
}
@media (min-width: 1200px) {
	:root {
		--gutter-gap: 3rem;
	}
}


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

:root {
	--section-width: calc(100% - var(--section-gap) * 2);
	--section-margins: var(--gutter-gap) var(--section-gap);
}
section.large {
	--section-width: calc(100% - var(--gutter-gap) * 2);
	--section-margins: var(--gutter-gap);
}
section.min {
	--section-width: calc(100% - var(--gutter-gap) / 4 * 2);
	--section-margins: calc(var(--gutter-gap) / 2) calc(var(--gutter-gap) * 2);
}


/* ==================================================== */
/* ==================== 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:
		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);
}
section.banner {
	transition: all var(--duration-fast) var(--ease);
}


/* ========== CUSTOM ========== */

/* here for custom animation overrides */


/* ================================================ */
/* ==================== GLOBAL ==================== */
/* ================================================ */

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


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

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


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

/* flex — keeps footer at bottom */

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


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

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


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


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

header {
	position: sticky;
	z-index: 1200;
	top: 0;
	pointer-events: none;
	margin: 0;
}
header > * {
	z-index: 10;
	pointer-events: auto;
	margin: 0;
	color: inherit;
	fill: inherit;
}


/* ========== CHROME FIX ========== */

/* Chrome restoration scroll fix + js (scroll.js) */

body {
	scroll-padding-top: var(--header-height, 0px);
}


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

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


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

header .index {
	display: inline-flex;
	font-size: var(--index-font-size);
	white-space: nowrap;
	padding: var(--font-size) var(--gutter-gap);
}
header .index > * {
	width: var(--index-width);
	height: var(--index-height);
	/*aspect-ratio: var(--index-ratio);*/
}


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

/* content-header.php */

#heading {
	position: relative;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	margin: 0;
	gap: 0;
}
#heading > * {
	margin: 0;
}


#header nav.primary {
	justify-self: center;
}
/*
header nav.alias.only-desktop {
	width: 100%;
}
*/

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

#navbar nav.alias {
	justify-content: flex-end;
	width: 100%;
}


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


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

footer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	pointer-events: none;
	background: var(--bright-color);
}
footer > * {
	pointer-events: auto;
}


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

.sticky-footer {
	position: sticky;
	bottom: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: var(--dark-color);
	min-height: var(--sticky-footer-height);
	--nav-font-size: .75em;
	--text-color: var(--bright-color);
	--background-color: var(--dark-color);
}
.sticky-footer > * {
	margin: 0;
}


/* ========== EVENT ========== */

.sticky-actions {
	position: sticky;
	bottom: var(--sticky-footer-height);
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100% !important;
	padding: 1em;
	margin: 0 !important;
	background: var(--bright-color);
}
.sticky-actions > * {
	width: auto !important;
	margin: 0;
}



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

/**
 * max-width: none  — for WP back-compat
 * overflow: hidden — for swipers
 */


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

section {
	position: relative;
	/*z-index: 10;*/
	clear: both;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	min-height: auto;
	max-width: none;
	padding: 0 !important;
	margin-left: 0;
	margin-right: 0;
	overflow: clip;
}


/* ========== FULL ========== */

section.full > .section-content {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}


/* ========== LARGE ========== */

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


/* ========== MIN ========== */

/* cf. margins ? */


/* ========== COVER ========== */

section.cover {
	min-height: var(--viewport-height);
}
section.cover .section-content.vertical-aligned {
	margin: auto;
}


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

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


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

/**
 * In <section> — alone == .section-content
 */


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

aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
aside.reversed {
	order: -1;
}
section > aside {
	position: relative;
	z-index: 10;
	flex-grow: 1;
}

@media (max-width: 1000px) {
	section {
		flex-direction: column;
	}
	section > .section-content + aside {
		order: -1;
	}
}
@media (min-width: 1000px) {
	section > .section-content + aside {
		flex-grow: 0.5;
		flex-basis: 0;
	}
}


/* ========== SIDEBAR ========== */

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


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

#contextual + .sticky.sidebar {
	margin-top: 0;
}
.sticky.sidebar nav.filters.only-mobile {
	margin: 0;
}

@media (min-width: 1000px) {
	aside.sticky,
	.sticky.sidebar {
		position: sticky;
		z-index: 100;
		top: calc(var(--header-height) + var(--gutter-gap));
	}
}
@media (min-width: 760px) {
	#contextual + .sticky.sidebar,
	#contextual + .columns .sticky.sidebar {
		top: calc(var(--header-height) + var(--contextual-height));
	}
}


/* ========== INLINE ========== */

/* In books — .sidebar.inline */

.sidebar.inline .buttons-container {
	flex-direction: row;
	align-items: baseline;
	gap: var(--gutter-gap);
}
.sidebar.inline .buttons-container > * {
	flex-grow: 1;
	flex-basis: 0;
	white-space: nowrap;
	margin: 0;
}
.sidebar.inline .buttons-container fieldset {
	flex-grow: 2;
}
.sidebar.inline .buttons-container nav.buttons {
	flex-wrap: unset;
}


/** event **/

aside .infos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
aside .infos .post-tag {
	order: -1;
}


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

/**
<section> banner / introduction
**/

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

section.banner {
	height: var(--banner-height);
	margin-top: 0;
	max-width: none;
}
body.onload section.banner {
	transform: none;
}
section.banner .section-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin: 0 auto;
	max-width: none;
	height: 100%;
	width: 100%;
}
section.banner .section-content > *,
section.banner .thumbnail {
	height: var(--banner-height);
}


/* ========== SWIPER ========== */

section.banner .swiper-container .infos,
section.focus .swiper-container .infos {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: flex-start;
	gap: .5em;
	max-width: 100%;
	font-size: var(--font-size);
	padding: 1.5em;
	color: var(--bright-color);
	background: var(--dark-color);
}
section.banner .swiper-container .infos > *,
section.focus .swiper-container .infos > * {
	margin: 0;
}
section.banner .swiper-container .post-title,
section.focus .swiper-container .post-title {
	font-size: 1.25em;
}


/* ========== MEDIAPLAYER ========== */

section.banner .mediaplayer-container {
	border-radius: 0;
}


/* ========== ILLUSTRATION ========== */

section.banner figure.illustration {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	max-width: none;
}
section.banner figure.illustration picture {
	flex-grow: 1;
	overflow: hidden;
}
section.banner figure.illustration img {
	height: 100%;
	width: 100%;
	max-width: none;
	object-fit: cover;
}
section.banner figure.illustration figcaption {
	display: block;
	width: 100%;
	padding: 1em;
	margin: 0 auto;
	line-height: 1;
	max-width: var(--content-max-width);
	background: var(--bright-color);
}


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

/**
page color header
**/

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

section.focus .section-content {
	display: flex;
	flex-direction: column;
}


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

section.focus .main-title:after {
	content: "";
	position: relative;
	z-index: 100;
	pointer-events: none;
	height: 100%;
	width:100%;
	margin-top: var(--gutter-gap);
	aspect-ratio: var(--line-break-ratio);
	background: var(--line-break);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}


/* ========== IS-THEME ========== */

[class^="is-theme-"] section.focus + #contextual {
	margin-top: -webkit-calc(var(--gutter-gap) * -1);
	margin-top: -moz-calc(var(--gutter-gap) * -1);
	margin-top: calc(var(--gutter-gap) * -1);
}


/* ================================================= */
/* ==================== MARGINS ==================== */
/* ================================================= */


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

section .section-content {
	width: var(--section-width);
	margin: calc(var(--content-spacing) * 2) var(--section-gap);
	max-width: var(--content-max-width);
}

section.banner > .section-content,
section.full > .section-content {
	margin-top: 0;
}


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

section aside {
	width: var(--section-width);
	margin: calc(var(--content-spacing) * 2) var(--section-gap);
	max-width: var(--content-max-width);
}

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

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


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

main > section:first-child .section-content {
	margin-top: 0 !important;
}
main > *:first-child:not(.hidden):not(section):not(.sticky),
main > .page-title.hidden + * {
	margin-top: var(--gutter-gap) !important;
}
main > *:last-child:not(.hidden):not(section):not(.sticky) {
	margin-bottom: var(--gutter-gap) !important;
}
main > section.full:last-child .section-content {
	margin-bottom: 0;
}

/*main > *:not(section):not(.button):not(#contextual):not(.is-limited-large):not([class*='-background-color']) {*/
main > *:not(section):not(.button):not(#contextual):not(.full):not(.is-limited):not([class*='-background-color']) {
	width: calc(100% - var(--section-gap) * 2);
	margin-left: var(--section-gap);
	margin-right: var(--section-gap);
	max-width: var(--content-max-width);
}

main > :not(section)[class*='-background-color'] {
	position: relative;
	z-index: 5;
	width: calc(100% - var(--gutter-gap) * 4);
	padding: var(--gutter-gap) 0;
	margin-left: calc(var(--gutter-gap) * 2);
	margin-right: calc(var(--gutter-gap) * 2);
	max-width: var(--content-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;
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


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

/* For images, text (unused) */

.short-content {
	max-width: calc(var(--content-max-width) * 2 / 3) !important;
}
.min-content {
	max-width: calc(var(--content-max-width) * 1 / 3) !important;
}
.short-content:not(.centered),
.min-content:not(.centered) {
	margin-right: auto;
}


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

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