body {
	min-height: 100%;
	background-color: #18181b;
	> header {
		background-color: $gray-800;
		color: $gray-100;
		border-bottom: 0.1rem solid $black;
		nav.navigation a {
			color: $base-link;
			&:hover, &:focus {
				color: lighten($base-link, 25%);
			}
		}
	}
	> footer {
		background-color: $gray-800;
		color: $gray-500;
		border-top: 0.1rem solid $black;
		font-size: 1.5rem;
		position: static;
		bottom: 0;
		a {
			color: $base-link;
			&:hover, &:focus {
				color: lighten($base-link, 25%);
			}
		}
	}
	ul {
		list-style-type: '» ';
	}
	.block {
		border-left: .5rem solid lighten($link-color-hover, 25%);
		border-right: .1rem solid lighten($link-color-hover, 25%);
		background: darken($gray-400, 50%);
		padding: 1rem 2rem;
		color: $gray-400;
		border-radius: .5rem;
	}
	blockquote::before {
		color: lighten($link-color-hover, 25%);
		display: none;
	}
}

nav[role="navigation"] input[type="checkbox"].menu {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

nav[role="navigation"] label.menu {
	display: none;
	cursor: pointer;
	user-select: none;
}

/* gestion de l’affichage pour les petits écrans */
@media screen and (max-width: 800px) {
	html, body {
		margin: 0;

		header .brand {
			font-size: 1.5rem;
		}
		.infos {
			width: 100%;
			font-size: $font-size-base*.65;
		}
	}
	nav[role="navigation"] ul {
		display: none;
	}
	nav[role="navigation"] label.menu {
		display: inline;
		width: 100%;
		margin-top: .5rem;
	}
	nav[role="navigation"] label.menu:after {
		position: absolute;
		right: 2rem;
		top: 0rem;
		content: "\2261";
	}
	nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
		content: "\203A";
	}
	nav[role="navigation"] input[type=checkbox].menu:checked ~ ul {
		display: block;
		font-size: 1.5rem;
	}
	.w50, .w60 {
		width: 90%;
	}
	.pal {
		padding: 1rem;
	}
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}