@charset "UTF-8";

/**
 * Fonts
 */
@font-face {
	font-family: "Fira Sans";
	src: local("Fira Sans Regular"),
	local("FiraSans-Regular"),
	local("Fira Sans Book"),
	local("FiraSans-Book"),
	url("../fonts/firasans-book.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-stretch: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Fira Sans";
	src: local("Fira Sans Bold"),
	local("FiraSans-Bold"),
	url("../fonts/firasans-bold.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-stretch: normal;
	font-weight: 700;
}

@font-face {
	font-family: "Fira Sans";
	src: local("Fira Sans Regular Italic"),
	local("FiraSans-RegularItalic"),
	local("Fira Sans Book Italic"),
	local("FiraSans-BookItalic"),
	url("../fonts/firasans-bookitalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-stretch: normal;
	font-weight: 400;
}

/**
 * Base
 */
html {
	--font-stack: Fira Sans, Helvetica Neue, Arial, Nimbus Sans L, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
	--type-scale: 1.125;
	--h5: calc(1rem * var(--type-scale));
	--h4: calc(var(--h5) * var(--type-scale));
	--h3: calc(var(--h4) * var(--type-scale));
	--h2: calc(var(--h3) * var(--type-scale));
	--h1: calc(var(--h2) * var(--type-scale));
	box-sizing: border-box;
	overflow-y: scroll;
	scroll-padding-top: 1rem;
}

@media (min-width: 48rem) {
	html {
		--type-scale: 1.25;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: -1ms !important;
		scroll-behavior: auto !important;
		background-attachment: initial !important;
	}
}

*,
*::after,
*::before {
	box-sizing: inherit;
}

::selection {
	background-color: #ffce00;
	color: #483d23;
	text-shadow: none;
}

:focus {
	outline: .125rem solid currentColor;
	outline-offset: .25rem;
	isolation: isolate;
}

:focus:not(:focus-visible) {
	outline-color: transparent;
	isolation: auto;
}

:focus-visible {
	outline-color: currentColor;
	outline-offset: .25rem;
	isolation: isolate;
}

@media (hover: hover) {
	body:hover [tabindex="-1"]:focus {
		outline-color: transparent;
		isolation: auto;
	}
}

/**
 * Layout
 */
body {
	background-color: #f7f7f7;
	background-image: url("data:image/svg+xml,%3Csvg width='56' height='28' viewBox='0 0 56 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 26c-2.813 0-5.456.726-7.752 2H56v-2zm-26 2h4.087C38.707 20.783 46.795 16 56 16v-2c-.672 0-1.339.024-1.999.07L54 14a2 2 0 0 1 2-2v-2a4 4 0 0 0-3.98 3.602 28.087 28.087 0 0 0-2.793-3.862A7.994 7.994 0 0 1 56 6V4a9.988 9.988 0 0 0-8.17 4.232 28.156 28.156 0 0 0-3.03-2.634A13.979 13.979 0 0 1 56 0h-7.752a16.078 16.078 0 0 0-5.09 4.454 27.941 27.941 0 0 0-3.536-1.936c.63-.896 1.33-1.738 2.095-2.518H39.03c-.46.557-.893 1.137-1.297 1.737A27.787 27.787 0 0 0 33.723.585c.12-.196.24-.392.364-.585H30l-.001.07A28.406 28.406 0 0 0 26 .07L26 0h-4.087c.124.193.245.389.364.585a27.787 27.787 0 0 0-4.009 1.152c-.404-.6-.837-1.18-1.297-1.737h-2.688c.764.78 1.466 1.622 2.095 2.518-1.23.562-2.41 1.21-3.536 1.936A16.078 16.078 0 0 0 7.752 0H0c4.58 0 8.645 2.199 11.2 5.598a28.156 28.156 0 0 0-3.03 2.634A9.988 9.988 0 0 0 0 4v2a7.994 7.994 0 0 1 6.773 3.74 28.087 28.087 0 0 0-2.793 3.862A4 4 0 0 0 0 10v2a2 2 0 0 1 1.999 2.07C1.339 14.024.672 14 0 14v2c9.205 0 17.292 4.783 21.913 12H26a2 2 0 1 1 4 0zM7.752 28C5.456 26.726 2.812 26 0 26v2h7.752zM56 20c-6.832 0-12.936 3.114-16.971 8h2.688A19.94 19.94 0 0 1 56 22v-2zm-39.029 8C12.936 23.114 6.831 20 0 20v2a19.94 19.94 0 0 1 14.283 6h2.688zm15.01-.398a28.087 28.087 0 0 1 2.792-3.862A7.994 7.994 0 0 0 28 20a7.994 7.994 0 0 0-6.773 3.74 28.087 28.087 0 0 1 2.793 3.862 4 4 0 0 1 7.96 0zm14.287-11.865C42.318 9.864 35.61 6 28 6c-7.61 0-14.318 3.864-18.268 9.737a27.787 27.787 0 0 0-4.009-1.152C10.275 7.043 18.548 2 28 2c9.452 0 17.725 5.043 22.277 12.585a27.787 27.787 0 0 0-4.009 1.152zm-5.426 2.717a27.941 27.941 0 0 1 3.536-1.936C40.76 11.367 34.773 8 28 8s-12.76 3.367-16.378 8.518c1.23.562 2.41 1.21 3.536 1.936C18.075 14.537 22.741 12 28 12s9.925 2.537 12.842 6.454zm-4.672 3.778a28.156 28.156 0 0 1 3.03-2.634A13.979 13.979 0 0 0 28 14c-4.58 0-8.645 2.199-11.2 5.598a28.156 28.156 0 0 1 3.03 2.634A9.988 9.988 0 0 1 28 18a9.988 9.988 0 0 1 8.17 4.232z' fill='%23f3f3f3' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 6rem 3rem;
	color: #3e4b55;
	font-family: var(--font-stack);
	counter-reset: titles;
	margin: 0;
	min-height: 100vh;
	padding-top: 2rem;
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: optimizeSpeed;
}

header {
	align-items: center;
	display: flex;
	flex-direction: column;
}

main {
	background: #fcf9e9;
	border: 1px solid #e5dec8;
	border-radius: .25rem 0 0 .25rem;
	border-right: 0;
	overflow-x: hidden;
	padding: 0 1rem;
}

main > * + * {
	margin-bottom: 3rem;
	max-width: 70ch;
}

footer {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
}

footer div {
	display: flex;
	flex: 1 0 100%;
	justify-content: space-between;
	padding-inline: 2rem;
}

aside {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	padding-top: 2rem;
}

aside > * {
	max-width: calc(100vw - 2rem);
}

img,
iframe {
	max-width: 100%;
}

@media (min-width: 30rem) {
	main {
		padding: 0 0 0 2rem;
	}
}

@media (min-width: 48rem) {
	body {
		display: grid;
		gap: 2rem;
		grid-template-columns: minmax(15rem, 33vw) 1fr;
	}

	header {
		display: contents;
	}

	[id="skip-links"] {
		grid-column: 1 / span 2;
	}

	aside > * {
		width: 15rem;
	}
}

/* Type scale */
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
textarea {
	font-size: 1rem;
	line-height: 1.5;
	margin: 1.5rem 0;
}

h1, h2, h3,
h4, h5, h6 {
	line-height: 1.25;
	margin: 1.5rem 0 .75rem;
}

h1 {
	font-size: var(--h1);
}

h2[id] {
	background-color: #fcf9e9;
	counter-increment: titles;
	font-size: var(--h2);
	padding: 0 0 0 1.25ch;
	position: relative;
	max-width: max-content;
	z-index: 1;
}

article:nth-of-type(9) ~ article h2[id] {
	padding: 0 0 0 2ch;
}

h2[id]::after,
h2[id]::before {
	bottom: 0;
	content: "";
	position: absolute;
	top: 0;
}

h2[id]::after {
	background-color: inherit;
	color: #e5dec8;
	content: counter(titles) ".";
	font-style: italic;
	font-weight: 400;
	left: -1rem;
	right: -1rem;
	text-indent: .5rem;
	z-index: -1;
}

h3 {
	font-size: var(--h3);
}

h4 {
	font-size: var(--h5);
}

h5 {
	font-size: var(--h5);
}

li :is(p, ul) {
	margin-top: 0;
	margin-bottom: 0;
}

textarea,
table,
td,
th,
samp,
div,
p {
	hyphenate-limit-chars: 6 3 2;
	hyphenate-limit-lines: 2;
	hyphenate-limit-last: always;
	hyphenate-limit-zone: 8%;
	hyphens: auto;
	word-wrap: break-word;
}

article > ul a {
	display: inline-block;
	overflow-wrap: anywhere;
	vertical-align: top;
}

@media (min-width: 30rem) {
	h2[id]::before {
		background-color: #ece7d4;
		background-image: radial-gradient(rgba(0, 0, 0, .05) 15%, transparent 16%),
		radial-gradient(rgba(0, 0, 0, .05) 15%, transparent 16%);
		background-position: 0 0, .25rem .25rem;
		background-size: .5rem .5rem;
		left: -2rem;
		min-width: 15rem;
		width: 100vw;
		z-index: -2;
	}
}

@media (min-width: 48rem) {
	h2[id]::before {
		width: 67vw;
	}
}

/* Tables */
table {
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	width: 100%;
}

th,
td {
	padding: .75rem;
	text-align: left;
	vertical-align: top;
}

thead th {
	border-bottom: .125rem solid #e5dec8;
	color: #483d23;
}

tbody :is(th, td) {
	border-bottom: 1px solid #e5dec8;
	color: #7b6e50;
}

tbody th {
	color: #3e4b55;
	font-weight: 400;
}

td {
	line-height: 1.25;
	max-width: 100%;
}

td p {
	margin: 0;
}

/* Code */
code {
	line-height: 1;
}

pre {
	color: #032c36;
	direction: ltr;
	font-family: monospace;
	font-size: calc(1rem / var(--type-scale));
	hyphens: none;
	tab-size: 4;
	overflow-x: auto;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
}

:is(p, ul, th, td) code {
	border: 1px solid;
	border-radius: .2em;
	display: inline-block;
	font-family: inherit;
	padding: .1em;
	white-space: nowrap;
}

/* Blockquotes */
/* @see https://github.com/tetue/tinytypo/blob/fc1a3a90d2ffefeaed2bf4dcee0fb88320c65348/css/typo.css#L424 */
blockquote {
	border-left: .25rem solid #ece7d4;
	color: #7b6e50;
	font-style: italic;
	padding-left: 2rem;
	quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote::before {
	content: open-quote;
	margin-left: -1rem;
}

blockquote::after {
	content: close-quote;
}

blockquote p {
	display: inline;
}

blockquote :is(em, code, strong) {
	color: #483d23;
	font-style: normal;
}

/* Links */
a {
	color: #3462af;
	outline-offset: 2rem;
	text-decoration-skip-ink: auto;
	transition: outline-offset .3s cubic-bezier(0, .5, .5, 1);
}

main a:visited {
	color: rebeccapurple;
}

a:is(:hover, :focus) {
	color: #093785;
	outline-color: transparent;
	text-decoration: none;
}

a:focus-visible {
	outline-color: currentcolor;
}

a:active {
	color: rebeccapurple;
	outline-color: transparent;
}

a[href="#skip-links"]::after {
	content: "\A0⇪";
}


/**
 * Components
 */

/* Logo */
[id="logo"] {
	color: #483d23;
	padding-right: 1rem;
	text-align: right;
}

[id="logo"]:is(:hover, :focus) {
	color: #911;
}

/* Box */
.box {
	background: white;
	border: 1px solid lightGray;
	box-shadow: inset 0 0 0 .25rem rgba(0, 0, 0, .05);
	padding: 1rem;
}

.box ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-bottom: 0;
}

.box li + li {
	margin-left: 2rem;
}

aside .box {
	border-radius: .25rem 0 0 .25rem;
	border-right: 0;
	margin: 0 -2rem 2rem -1rem;
	min-width: 18rem;
}

.box-title {
	align-items: center;
	display: flex;
	font-size: var(--h5);
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
}

.box-title code {
	margin-inline-start: auto;
}

/* Main navigation */
.nav {
	align-self: center;
}

.nav ul {
	display: flex;
	flex-flow: row wrap;
}

.nav a {
	display: inline-block;
	padding: .75rem 1rem;
	position: relative;
	text-decoration: none;
}

/**
 * @note Un petit effet « kikoo lol », avec quelques variantes.
 * @author Manoela Ilic a.k.a. Mary Lou @codrops
 * @see http://tympanus.net/codrops/2013/08/06/creative-link-effects/
 * @see http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-12
 */
.nav a::after,
.nav a::before {
	--scale: .2;
	border: 2px solid var(--background, currentColor);
	border-radius: var(--radius, .25rem);
	content: "";
	height: var(--size, 3rem);
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transition: transform .3s, opacity .3s;
	transform: translate3d(-50%, -50%, 0) scale(var(--scale)) rotate(var(--turn, 0deg));
	width: var(--size, var(--width, calc(100% - .5em)));
	z-index: -1;
}

.nav a::after {
	--scale: .8;
	background: var(--background, currentColor);
	border: 0;
	height: var(--size, 2.5rem);
	width: var(--size, var(--after-width, calc(100% - 1em)));
}

.index {
	--color: #039be5;
}

.errors {
	--radius: 50%;
	--size: 4rem;
	--color: #911;
}

.errors::after {
	--size: 3.25rem;
}

.warnings {
	--turn: 45deg;
	--color: #000;
	--width: 3rem;
	--after-width: 2.5rem;
	--background: #ffce00;
}

.obsolete {
	--color: RoyalBlue;
	--width: 3rem;
	--after-width: 2.5rem;
}

.advices {
	--color: OliveDrab;
}

.nav a:is(:hover, :focus, [aria-current="page"]) {
	color: var(--color, #3462af);
}

.nav a:where(:hover, :focus, [aria-current="page"])::after,
.nav a:where(:hover, :focus, [aria-current="page"])::before {
	--scale: 1;
	opacity: .1;
}

.warnings:is(:hover, :focus, [aria-current="page"])::after,
.warnings:is(:hover, :focus, [aria-current="page"])::before {
	--color: #ffce00;
	opacity: .3;
}

/* Table of contents */
[id="toc"] ol {
	list-style-position: outside;
	padding: 0;
}

[id="toc"] ul ol {
	margin: .75rem 0 2rem;
}

[id="toc"] li {
	margin: .25rem 0 .5rem;
}

[id="toc"] ul > li > a {
	font-size: var(--h4);
	font-weight: bold;
}

[id="toc"] ol a {
	display: inline-block;
	position: relative;
	vertical-align: top;
}

[id="toc"] [aria-current="true"]::before {
	content: "➜";
	left: -2.5em;
	position: absolute;
}

/* Code blocks */
.pre {
	background: #fffef9;
	border: 1px solid #e5dec8;
	border-radius: .25rem;
	position: relative;
}

.pre + .pre {
	border-radius: 0 0 .25rem .25rem;
	margin-top: -.25rem;
}

.pre + .pre code::before {
	border-top-left-radius: 0;
}

.pre > div {
	background: #fff;
	margin: 2em 0 0;
	padding: 1em;
}

.pre pre {
	margin: 0;
	padding: 1em;
}

.pre pre:not(:first-child) {
	border-top: 1px solid #e5dec8;
}

.pre pre:only-child code {
	display: block;
	margin: 2.5em 0 0;
}

.pre code::before {
	background: #fcf9e9;
	border: 1px solid #e5dec8;
	border-radius: .25rem 0 .25rem 0;
	color: #7b6e50;
	content: attr(data-language);
	font-family: var(--font-stack);
	font-style: italic;
	left: -1px;
	padding: .5em 1em;
	position: absolute;
	top: -1px;
}

.pre img,
.pre svg,
.pre input,
.pre iframe {
	vertical-align: bottom;
}

/* Footer */
.builtWith {
	border-top: 0;
	margin: -2rem 2rem 0 auto;
	padding: 1rem;
	width: fit-content;
}

/* Contents */
form label {
	min-width: 1em;
}

#empty-link_code,
#empty-title_code,
#empty-node_code {
	display: inline-block;
	min-height: 1em;
	min-width: 1em;
}

#check-alt-0 {
	display: none;
}

header svg[aria-hidden="true"]:not(:empty),
footer svg[aria-hidden="true"]:not(:empty) {
	counter-increment: unset !important;
	outline: none !important;
}

/* Helpers */
.list-unstyled {
	list-style: none;
	padding: 0;
}

@media (max-width: 48rem) {
	.hidden-sm {
		display: none;
	}
}

/*
  Improved screen reader only CSS class
  @author Gaël Poupard
    @note Based on Yahoo!'s technique
    @author Thierry Koblentz
    @see https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
  * 1.
    @note `clip` is deprecated but works everywhere
    @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
  * 2.
    @note `clip-path` is the future-proof version, but not very well supported yet
    @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
    @see http://caniuse.com/#search=clip-path
    @author Yvain Liechti
    @see https://twitter.com/ryuran78/status/778943389819604992
  * 3.
    @note preventing text to be condensed
    author J. Renée Beach
    @see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
    @note Drupal 8 goes with word-wrap: normal instead
    @see https://www.drupal.org/node/2045151
    @see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
  * 4.
    @note !important is important
    @note Obviously you wanna hide something
    @author Harry Roberts
    @see https://csswizardry.com/2016/05/the-importance-of-important/
*/
.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	clip-path: inset(50%) !important; /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important; /* 3 */
}
