/* Things outside body. */
/* For ex: backround color on intense vertical scrolls (mobile) */
html {
	background-color: var(--color-darkish);
	color: var(--color-dark);
}

*,
*::before,
*::after {
	font-family: inherit;
	color: inherit;
	overflow-wrap: break-word;
	border-style: solid;
	border-width: 0;
	border-color: currentColor;
}

::placeholder {
	color: var(--color-lightest);
	padding: var(--s-5) var(--s-5) var(--s-5) 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-color: var(--color-lightest);
}

/* Headings */
h1,
h2 {
	font-weight: var(--font-weight-normal);
}
h1 {
	font-size: var(--s5);
}
h2 {
	font-size: var(--s4);
}

hr {
	border-color: var(--color-mid);
}
hr.small {
	width: 30%;
}

.bold {
	font-weight: bold;
}

/* Main link */
[href="#main"] {
	padding: 0 var(--s-1);
	background-color: var(--color-light);
}
[href="#main"]:focus {
	color: var(--color-dark);
	border-color: var(--color-lightish);
	left: var(--border-thick);
	top: var(--border-thick);
}

/* Block quotes */
blockquote {
	font-style: italic;
	padding-top: var(--s1);
	padding-bottom: var(--s1);
}
blockquote > p:before {
	content: "\00ab\202F";
}
blockquote > p:after {
	content: "\202F\00bb";
}

dt {
	margin: var(--s1) 0;
	list-style-position: inside;
}

dd {
	display: list-item;
	margin: var(--s-1) var(--s1);
	list-style-position: inside;
	list-style-type: var(--list-style-type);
}

/* If no JS available, some text can be displayed */
noscript {
	padding: var(--s-1);
	background-color: var(--color-lightish);
}

/* Forms */

input {
	padding: var(--s1);
	border-width: 0;
	border-radius: var(--border-radius-small);
}

input[type="submit"],
input[type="button"] {
	text-align: left;
}

input[type="submit"] {
	background-color: var(--color-light);
	color: var(--color-dark);
	font-weight: var(--font-weight-bold);
}

input[type="text"] {
	background-color: var(--color-darkish);
}

/* Shadow container */
.shadow-container {
	box-shadow: 0 10px 40px 10px rgba(0, 0, 0, 0.13);
}

/* Navigation */
nav a,
span[aria-current="page"],
span[data-state="active"] {
	position: relative;
	text-decoration: none;
}
nav span[aria-current="page"]::before,
nav span[data-state="active"]::before {
	content: "";
	display: block;
	width: 100%;
	height: var(--border-thin);
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: 0.25rem;
	border-bottom-width: var(--border-thin);
	border-color: var(--color-highlight-light);
}

/* Header */
header {
	padding-top: var(--s-3);
	padding-bottom: var(--s-3);
}

header .logo {
	padding-left: calc(var(--s4) / 2);
	padding-right: calc(var(--s4) / 2);
}

.header-container {
	position: relative;
	z-index: 2;
	background-color: var(--color-darkish);
}

header > * {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
header > * > * {
	padding-top: var(--s1);
	padding-bottom: var(--s1);
}
header > * > *:last-child,
header .menu-btn-container {
	flex-grow: 1;
}

header .menu-btn-container {
	padding-right: calc(var(--s4) / 2);
	text-align: right;
}

@media (max-width: 60rem) {
	header {
		justify-content: space-between;
		text-align: center;
	}
	header > * {
		justify-content: center;
	}
	header nav {
		flex-basis: 100%;
	}
}

/* Main navigation */
.js-ok .menu-btn-container {
	display: none;
}
.js-ok .menu-btn {
	width: fit-content;
	justify-content: center;
	align-items: center;
	font-family: var(--font-special);
	font-size: var(--s2);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	background-color: unset;
	color: var(--color-light);
	border-width: 0;
}
.js-ok .menu-btn .icon-l {
	margin-right: var(--s-3);
}

.js-ok .menu-btn path {
	stroke-width: var(--border-thin);
	transition: d 0.25s;
}
.js-ok .menu-btn[aria-expanded="true"] path {
	d: path("M3,3 27,27 M15,15 15,15 M3,27 27,3");
}

.main-nav-container {
	padding-left: calc(var(--s4) / 2);
	padding-right: calc(var(--s4) / 2);
}

.main-nav-container > * {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: calc(var(--s4) / 2 * -1);
}
.main-nav-container > * > * {
	margin: calc(var(--s4) / 2);
}

@media (max-width: 60rem) {
	.main-nav-container > * {
		justify-content: center;
		font-size: var(--s1);
	}

	.main-nav-container > * ul {
		justify-content: center;
	}

	.js-ok .main-nav-container[data-open="true"] {
		height: 100vh;
		display: block;
	}

	.js-ok .main-nav-container[data-open="false"] {
		display: none;
	}

	.js-ok .menu-btn-container {
		display: block;
	}
}

body {
	background-color: var(--color-primary);
	color: var(--color-light);
}

main {
	position: relative;
	z-index: 1;
	min-height: 70vh;
}

footer {
	padding-left: var(--s4);
	padding-right: var(--s4);
}

footer {
	padding-top: var(--s5);
}
footer > * {
	padding-top: var(--s4);
	padding-bottom: var(--s4);
}

.hero {
	width: 100%;
}

/* Blocs */

.em-card {
	display: flex;
	flex-direction: column;
	min-height: 14.5rem;
	padding: var(--s2);
	border-radius: 5px;
	background-color: var(--color-very-light-pink);
}
.em-card svg {
	fill: currentColor;
	margin-bottom: auto;
	max-width: var(--s4);
	max-height: var(--s4);
}

/* Svg */
.svg-symbols {
	display: none;
}

.hero h1 {
	font-size: var(--s5);
	padding-top: calc(2 * var(--s5));
	padding-right: 30%;
}

@media (max-width: 60rem) {
	.hero h1 {
		font-size: var(--s3);
		padding-top: calc(2 * var(--s4));
		padding-right: 0;
	}
}

.wg {
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.highlight {
	background-color: var(--color-mid);
	padding: var(--s1);
}

.info-container {
	padding-top: var(--s0p5);
	padding-bottom: var(--s0p5);
	background-color: var(--color-light);
	color: var(--color-dark);
	border-radius: var(--border-radius-large);
}

.info-container a:not([class]) {
	text-decoration-color: inherit;
}

.info-container > *:not(:first-child) > * {
	padding-top: calc(var(--s3) + 2%);
}

.info-container > *:not(:last-child) > * {
	padding-bottom: calc(var(--s3) + 2%);
}

.info-container > *:not(:last-child) > * {
	border-bottom-width: var(--border-thin);
	border-color: var(--color-mid);
}

:focus {
	outline: var(--border-focus) var(--focus-style) var(--color-focus-light);
}

.info-container :focus {
	outline: var(--border-focus) var(--focus-style) var(--color-focus-dark);
}

/* Language Switcher */
.language-switcher {
	text-align: center;
}
.language-switcher .lang {
	position: relative;
	padding: var(--s-5);
	border-radius: var(--s-5);
}
.language-switcher .lang[aria-current="true"]::after {
	position: absolute;
	content: "\A";
	top: 100%;
	left: calc(50% - var(--s-3) / 2);
	width: var(--s-3);
	height: var(--s-3);
	border-radius: 50%;
	background-color: var(--color-highlight-light);
}
.language-switcher .lang[aria-current="true"] {
	font-weight: var(--font-weight-bold);
}

.language-switcher .lang[aria-current="true"]::after {
	color: var(--color-lightish);
}

/* TODO: maybe move in separate file like decorations.css */
/*
 * Shapes pages decorations
 */

.deco-container {
	--deco-resp-top-factor: 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.deco-object {
	position: absolute;
	height: 0;
	/* height = width */
	max-width: 1000px;
	padding-bottom: 50%;
}

.deco-object svg {
	position: absolute;
	width: 100%;
	height: 100%;
}

.deco-type-home .deco-object--blob-1,
.deco-type-generic .deco-object--blob-1 {
	top: -24vw;
	right: -2vw;
	transform: rotate(-76deg);
	width: 49vw;
	fill: var(--color-yellow);
}

.deco-type-home .deco-object--blob-2 {
	top: -33.5vw;
	right: 8vw;
	transform: rotate(206deg) scaleX(-1);
	width: 49vw;
	fill: var(--color-light-green);
}

.deco-type-home .deco-object--blob-3 {
	top: 3vw;
	right: -31vw;
	transform: rotate(105deg);
	width: 47vw;
	fill: var(--color-dark-green);
}

.deco-type-home .deco-object--burger {
	--db-color-1: var(--color-light-yellow);
	--db-color-2: var(--color-yellow);
	top: 15.5vw;
	right: 10.2vw;
	width: 11vw;
	padding-bottom: 12%;
}

.deco-type-contribute .deco-object--blob-1 {
	top: calc(-21vw * var(--deco-resp-top-factor));
	left: -25vw;
	transform: rotate(-76deg);
	width: 49vw;
	fill: var(--color-yellow);
}

.deco-type-contribute .deco-object--blob-2 {
	top: calc(-24.4vw * var(--deco-resp-top-factor));
	right: -9vw;
	transform: rotate(-83deg) scaleX(-1);
	width: 72vw;
	fill: var(--color-light-green);
}

.deco-type-contribute .deco-object--blob-3 {
	top: calc(-1vw * var(--deco-resp-top-factor));
	right: -26vw;
	transform: rotate(105deg);
	width: 47vw;
	fill: var(--color-dark-green);
}

.deco-type-generic .deco-object--blob-1 {
	transform: rotate(74deg) scaleX(-1);
	fill: var(--color-dark-green);
}

.deco-type-generic .deco-object--blob-2 {
	top: -24vw;
	right: -9vw;
	transform: rotate(0);
	width: 49vw;
	fill: var(--color-yellow);
}

.deco-type-generic .deco-object--blob-3,
.deco-type-404 .deco-object--blob-2 {
	top: 0;
	right: -39vw;
	transform: rotate(-52deg) scaleX(-1);
	width: 49vw;
	fill: var(--color-light-green);
	z-index: 1;
}

/* Deco type loading page */
.deco-type-loading .deco-object--blob-1 {
	top: -52.5vw;
	right: 67vw;
	transform: rotate(38deg) scaleX(1);
	width: 70vw;
	padding-bottom: 100%;
	fill: var(--color-light-green);
}

/* Deco type 404 */
.deco-type-404 .deco-object--blob-1 {
	top: -26vw;
	right: -9vw;
	transform: rotate(0deg);
	width: 49vw;
	fill: var(--color-yellow);
}

.deco-type-404 .deco-object--blob-3 {
	top: -10vw;
	right: -24vw;
	transform: rotate(82deg);
	width: 31vw;
	fill: var(--color-dark-green);
	padding-bottom: 100%;
}

.deco-type-404 .deco-object--blob-4 {
	bottom: -31vw;
	right: 42vw;
	transform: rotate(160deg);
	width: 49vw;
	fill: var(--color-yellow);
}

.deco-type-404 .deco-object--blob-5 {
	bottom: -39vw;
	right: 68vw;
	transform: rotate(-152deg) scaleX(-1);
	width: 50vw;
	fill: var(--color-light-green);
}

.deco-type-404 .deco-object--blob-6 {
	bottom: -30vw;
	left: -22vw;
	transform: rotate(-128deg);
	width: 33vw;
	fill: var(--color-dark-green);
	padding-bottom: 100%;
}

@media (max-width: 60rem) {
	/* mobile deco */
	.deco-container {
		--deco-resp-top-factor: 1.3;
	}
	.deco-object {
		max-width: initial;
	}
	/* mobile deco type home */
	.deco-type-home .deco-object--blob-3 {
		top: calc(-79vw * var(--deco-resp-top-factor));
		right: -97vw;
		-webkit-transform: rotate(15deg);
		transform: rotate(-91deg) scaleY(-1);
		width: 170vw;
		height: 170vw;
	}
	.deco-type-home .deco-object--blob-1 {
		top: calc(-44vw * var(--deco-resp-top-factor));
		right: 57vw;
		-webkit-transform: rotate(-76deg);
		transform: rotate(-76deg);
		width: 110vw;
		height: 110vw;
	}
	.deco-type-home .deco-object--burger,
	.deco-type-home .deco-object--blob-2 {
		visibility: hidden;
	}
	/* mobile deco type contribute */
	.deco-container.deco-type-contribute .deco-object {
		padding-bottom: 79%;
	}
	.deco-type-contribute .deco-object--blob-1,
	.deco-type-contribute .deco-object--blob-2 {
		top: calc(-30vw * var(--deco-resp-top-factor));
	}
	.deco-type-generic .deco-object--blob-1 {
		top: calc(-13vw * var(--deco-resp-top-factor));
	}

	.deco-type-generic .deco-object--blob-2 {
		top: calc(-12vw * var(--deco-resp-top-factor));
	}

	.deco-type-generic .deco-object--blob-3 {
		top: calc(4vw * var(--deco-resp-top-factor));
	}
}

@media (max-width: 31rem) {
	.deco-container {
		--deco-resp-top-factor: 1;
	}
}

/* Infos columns */
.info_2_columns_col1 {
	flex-basis: calc(var(--measure) * 3 / 8);
	hyphens: auto;
}

.info_2_columns_col2 {
	padding-top: var(--s0);
}

.info_1_column {
	flex-basis: calc(var(--measure) * 3 / 8 + var(--s4p1) / 2) !important;
}

/* DEBUG */
/* .stack-l {
	border-color: #0000ffaa !important;
	border-width: 3px !important;
}
.box-l {
	border-color: #ff00ffaa !important;
	border-width: 3px !important;
}
.center-l {
	border-color: #ff0000aa !important;
	border-width: 3px !important;
} */