@charset "UTF-8";

/**
 * layout.css 2.0.0
 * Author: hybrid.
 *
 * Core layout — wrapper, header, footer, sections, aside, sidebar.
 * Project overrides live in 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       — short 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              ↔ short
 * alignwide         ↔ normal
 * alignfull         ↔ large
 *
 * Breakpoints
 * 50rem   = 800px
 * 62.5rem = 1000px
 * 75rem   = 1200px
 * 87.5rem = 1400px
 *
 * Tokens
 * --gutter-gap         structural spacing: header padding, first/last child in main,
 *                      gap between section-content and aside, sticky sidebar offset.
 *                      Varies widely: 1.25rem → 3rem.
 * --section-gap        horizontal only: margin-left / margin-right of .section-content.
 *                      Varies moderately: 1.25rem → 2rem.
 * --content-max-width  max-width of content areas (default: 75rem → 87.5rem at 1400px)
 * --stroke-width       border width used throughout the theme (default: .125rem)
 *
 * Dependencies
 * --content-spacing  defined in spacing.css
 * --font-size        defined in fonts.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: row;
	--header-align: center;
	--header-justify: space-between;
	--header-padding: var(--content-spacing);

	/* footer */
	--footer-direction: column;
	--footer-align: center;
	--footer-padding: 0;
}


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

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

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

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


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

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

:root { --gutter-gap: 1rem; /*1.25rem;*/ }
@media (min-width: 760px) {
	:root { --gutter-gap: 2rem; }
}
@media (min-width: 1200px) {
	:root { --gutter-gap: 3rem; }
}


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

:root {
	--banner-height: 60svh;

	--header-height: calc((var(--font-size) * 6) + (var(--content-spacing) * 2));
	--contextual-height: calc(var(--font-size) + var(--content-spacing) * 2 + var(--font-size)); /* padding nav a */
	--viewport-height: calc(100svh - var(--header-height) - var(--sticky-footer-height));
	--sticky-footer-height: calc(var(--button-font-size) * 3);
}

@media (max-width: 1000px) {
	:root {
		--header-height: calc((var(--font-size) * 3) + (var(--content-spacing) * 2));
		--contextual-height: calc(var(--font-size) * .75 + var(--font-size) * .75 * .5 * 2 + var(--content-spacing) * 2);
	}
}


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

:root {
	--section-gap-x: calc(var(--gutter-gap) * 2);
	--section-gap-y: var(--gutter-gap);
	--section-width: calc(100% - var(--section-gap-x) * 2);
}
section.full {
	--section-gap-x: 0;
	--section-gap-y: 0;
	--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); /*calc(var(--gutter-gap) * 2);*/
	--section-gap-y: calc(var(--gutter-gap) / 2);
	--section-width: calc(100% - var(--gutter-gap) / 4 * 2);
}


/* ============================== 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:
		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);
}

/* for header background */

header > * { z-index: 10; }


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

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


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

header.sticky {
	position: sticky;
	z-index: 1200;
	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); /* si tu veux garder la marge */
}


/* =============== 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
 */

/* =============== 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 =============== */

/* full, large, min, cover */

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



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


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

/* In <section> — alone == .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; }
}
@media (min-width: 1000px) {
	section > .section-content + aside {
		flex-grow: .5;
		flex-basis: 0;
	}
}

@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-x) / 2));
	}
	section > .section-content + aside {
		max-width: calc(var(--content-max-width) * 1 / 3 - calc(var(--section-gap-x) / 2));
		margin-left: 0;
	}
	section > aside.reversed {
		margin-inline: calc(var(--section-gap-x) / 2) 0;
	}
}



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

/* here for project-specific media overrides */

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

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


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

footer { --content-max-width: none; }
footer nav.secondary { flex-grow: 1; flex-basis: 0; }
footer nav.socialbar { width: auto; align-self: center; }

@media (max-width: 1000px) {
	footer .section-content.inline {
		margin-inline: 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 ============================== */

/* content-header.php */

#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);

	--swiper-controls-font-size: calc(var(--font-size) * .5); /*var(--font-size);*/
	
	--swiper-full-controls-button-top: 50%;
	--swiper-full-controls-previous-from: translate(-50%, -50%);
	--swiper-full-controls-next-from: translate(50%, -50%);
	--swiper-full-controls-previous-to: translate(0, -50%);
	--swiper-full-controls-next-to: translate(0, -50%);
}

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


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

#contextual .menu {
	flex-direction: row;
	flex-wrap: nowrap;
}
#contextual .swiper-controls a {
	height: 100%;
	width: auto;
	aspect-ratio: auto;
	border-radius: 0;
}
#contextual:hover .swiper-controls .previous {
	left: 0;
}
#contextual:hover .swiper-controls .next {
	right: 0;
}
#contextual .swiper-controls .previous [class^="icon-"],
#contextual .swiper-controls .next [class^="icon-"] {
	height: 3em;
	width: 3em;
	margin-inline: 1em;
}
#contextual .swiper-controls a [class^="icon-"]::after {
	height: 1em;
	width: 1em;
	padding: 2em;
	margin-inline: 1em;
	transform: translate(0, -50%);
	top: 50%;

}


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

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


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

main > .swiper-container.banner {
	margin-top: 0 !important;
}
.swiper-container.banner .swiper-slide-content {
	opacity: 1;
	overflow: hidden;
	height: var(--viewport-height);
}
.swiper-container.banner .infos {
	position: absolute;
	z-index: 10;
	inset: auto auto 0 0;
	display: flex;
	align-items: flex-end;
	padding: 1em;
	background: var(--background-color);
}


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

section.banner .more-link {
	margin: 0;
}
section.banner .mediaplayer-container {
	border-radius: 0;
}
section.banner figure.illustration {
	max-height: var(--banner-height);
}

section.banner figure.illustration figcaption {
	margin-top: 0 !important;
	max-width: var(--content-max-width);
	background: var(--bright-color);
}


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

main section.focus {
	background: var(--background-color);
}
/*
section.focus .section-content {
	display: flex;
	flex-direction: column;
}
*/
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;
}
section.focus + #contextual {
	margin-top: calc(var(--gutter-gap) * -1);
}


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

/* Override 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.full {
	width: 100%;
	padding-inline: var(--section-gap-x);
}
.sticky-footer > * {
	margin: 0;
}