@font-face {
	font-family: FontTitle;
	src: url(./assets/fonts/RomanAntique.ttf) format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: FontSubtitle;
	src: url(./assets/fonts/RomanAntique.ttf) format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: FontDescription;
	src: url(./assets/fonts/poiret-one.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: FontMain;
	src: url(./assets/fonts/BalsamiqSans-Regular.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-title: "FontTitle";
	--font-subtitle: "FontSubtitle";
	--font-description: "FontDescription";
	--font-main: "FontMain";

	--color-bleu: #b6eeee; /*Chevre/fromage*/
	--color-vert: #b0d78a; /*Maraichage*/
	--color-orange: #fca525; /*home*/
	--color-beige: #ffe9ab; /*fond*/
	--color-brun: #2f1d13; /*textes*/
	--color-link: darkseagreen;
}

* {
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;

	text-overflow: ellipsis;
	overflow: hidden;
}
ul, li {
	overflow: visible;
}
ul {
	margin-left: 1em;
	list-style: disc;
}
.menu ul {
	margin-left: 0;
	list-style: none;
}
a.is-active {
  background-color: hsl(90.3, 50.3%, 64.5%);
}
/* Prevent images from being deformed when resized */
img {
	object-fit: cover;
}

html,
body {
	min-height: 100%;
	font-family: var(--font-main), sans-serif;
	color: var(--color-brun);
}
h1,
h1 > a,
h2,
h2 > a,
h3,
h3 > a,
h4,
h4 > a,
h5,
h5 > a,
h6,
h6 > a {
	/*color: var(--color-brun);*/
	/*font-weight: bold;*/
}

a {
	color: var(--color-link);
}
html {
	background-image: url("./assets/images/background.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 100%;
	body {
		min-height: 100%;
	}

	header {
        display: flex;
        justify-content: center;
		&.section {
			font-family: var(--font-title), sans-serif;
			display: flex;
			font-size: 2em;
			text-align: center;
			> div {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.center {
				img {
					max-height: 5em;
				}
				> :last-child {
					font-family: var(--font-description), sans-serif;
					font-size: 0.4em;
				}
			}
			.left {
				justify-content: space-evenly;
				transform: translateY(1em) rotate(-15deg);
				/*align-items: flex-end;*/
			}
			.right {
				justify-content: space-evenly;
				transform: translateY(1em) rotate(15deg);
				/*align-items: flex-start;*/
			}
		}
	}

	.page,
	.columns,
	.column {
		overflow: visible;
	}

	aside {
		&.menu {
			background: white;
			padding: 1em;
			transform: translateX(-2em);
			box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
				0 10px 10px rgba(0, 0, 0, 0.22);
			width: calc(100% + 2em);
			@media screen and (max-width: 1024px) {
				transform: none;
				width: 100%;
			}
			@media screen and (max-width: 768px) {
				position: fixed;
				background: white;
				z-index: 99;
				height: 100vh;
				width: 100vw;
				left: -100vw;
				top: 0;
				transition: left 0.3s;

				&.is-active {
					left: 0;
				}
			}
		}
	}

	.page {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		background: white;

		@media screen and (max-width: 1024px) {
			margin-top: 0 !important;
		}

		.content-main {
			padding: 2em;
			flex: 1;
			h2 {
				font-size: 1.5em;
				margin-bottom: 0.5em;
			}
			h3 {
				font-size: 1.2em;
				margin-bottom: 0.2em;
			}

			.page-index {
				h2 {
					border-bottom: 2px solid var(--color-brun);
					font-size: 1.5em;
					margin-bottom: 1em;
					a {
						display: block;
						color: var(--color-link);
						font-weight: normal;
						padding-bottom: 0.5em;
						padding-top: 0.5em;
					}
				}
			}
		}

		/*facebook pour centrer à l'arrache à virer à terme*/
		.facebook {
			display: flex;
			justify-content: center;
		}
	}

	footer.footer {
		padding: 1em;
		a {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			max-width: 100%;

			i {
				margin-right: 0.25em;
			}
		}

		text-align: center;
		> .column {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.address {
			> :first-child {
				font-family: var(--font-title), sans-serif;
				font-size: 1.5em;
			}
		}
		.contacts {
			align-items: normal;
			flex-direction: row;
			font-size: 0.75em;
			text-align: center;
			gap: 0.5em;
			.card-content {
				display: flex;
				flex-direction: column;
				height: 100%;

				> :nth-child(3) {
					margin-top: auto;
				}
			}
		}

		.logos {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 1em;

			.placeholder-logo {
				width: 2em;
				height: 2em;
				background: lightgray;
				border-radius: 0.5em;
			}
		}

		.sociaux {
			display: flex;
			flex-direction: row;
			gap: 1em;
		}

		.legal {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
	}
}