:root {
    --dark: #444;
    --gray: #555;
    --light: #fff;
    --light-dark: #edeef0;
    --button-primary-bg: #267cee;
    --button-secondary-bg: var(--light);
    --button-primary-hover: #1a5bb8;
    --button-secondary-hover: var(--light-dark);
    --links: #0061e0;
    --links-visited: #b5007f;
    --links-active: #b50000;
    --code-background: var(--light-dark);
    --max-width: 960px;
}
* {
    font-variant-ligatures: none;
}
html {
    background: var(--light);
    scroll-behavior: smooth;
}
body {
    color: var(--dark);
    background: var(--light);
    font: 1rem/1.5 monospace;
    max-width: 720px;
    margin: 0.5em auto;
    padding: 0 2vw;
}
header {
    margin: 1em auto;
    max-width: 640px;
}
header p {
    margin: 0;
    padding: 0 0 0.3em 0;
}
main {
    max-width: var(--max-width);
    margin: 2em 0;
}
main p,
main ul,
main ol,
main dl {
    margin-bottom: 2em;
}
ol ol,
ul ul,
dl dl {
    margin-bottom: 0;
}
[lang] {
    font-style: oblique;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.3;
}
h2,
.h2 {
    font-size: 1.5rem;
}
h3,
.h3 {
    font-size: 1.3rem;
}
h4,
.h4 {
    font-size: 1.2rem;
}
h5,
.h5 {
    font-size: 1.1rem;
}
h6 {
    font-size: 1rem;
}
.title {
    font-weight: normal;
    color: #444;
}
small,
.small {
    font-size: 0.8em;
}
h2 .tc {
    text-align: center;
    display: block;
}
mark {
    background: transparent;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0.3em;
    text-underline-offset: -0.2em;
    text-decoration-skip-ink: none;
    font-weight: bold;
}
.mark--greenIT {
    text-decoration-color: #88f96f;
}
.mark--a11y {
    text-decoration-color: #76f3f3;
}
.mark--foss {
    text-decoration-color: #ffea63;
}
.mark--noGAFAM {
    text-decoration-color: #dc88f3;
}
a {
    color: var(--links);
    text-decoration: none;
}
a:hover {
    color: var(--links);
    text-decoration: 0.1em var(--links) underline solid;
    text-underline-offset: 0.2em;
}
a:active {
    color: var(--links-actifs);
    text-decoration-color: var(--links-actifs);
}
table {
    border-collapse: collapse;
    min-width: 80%;
    font-size: 0.85em;
    text-align: left;
}
table caption {
    text-align: left;
    margin-bottom: 1em;
}
table tbody {
    border: dashed var(--dark);
    border-width: 1px 0;
}
table th,
table td {
    vertical-align: middle;
    padding-right: 2ch;
}
table tbody tr:first-child td {
    padding-top: 1ch;
}
table tbody tr:last-child td {
    padding-bottom: 1ch;
}
table tr th:first-of-type {
    min-width: 35ch;
}
hr {
    border: 0;
    border-top: 1px dashed var(--dark);
}
details summary {
    cursor: pointer;
}
details summary:hover {
    text-decoration: underline;
}
a.home-link:not(:hover, :active) {
    color: inherit;
}
.strike {
    text-decoration: line-through;
}
.up {
    text-transform: uppercase;
}
.gray {
    color: var(--gray);
}
.table-wrapper {
    overflow-x: scroll;
}
.logo {
    --c: #29885b;
    --s: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: end;
    color: var(--c);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: -0.2rem;
    padding-right: 1px;
    margin: 0 1ch 0 0;
    background: var(--c);
    color: #fff;
    border: 2px solid var(--c);
    border-radius: 0.3rem;
    min-height: var(--s);
    width: var(--s);
    box-shadow:
        -2px 2px 0 #fff,
        -4px 4px 0 var(--c);
    transform: rotate3d(1, 1, 1, -30deg);
}
#acces-rapide p {
    margin: 0 0 2em 0;
}
header nav details {
    display: inline-block;
    position: relative;
    margin: 1em 0;
}
header nav details summary {
    list-style: none;
    text-transform: lowercase;
    cursor: pointer;
    padding: 0.2em 1ch;
    border: 1px dashed var(--dark);
    max-width: max-content;
}
header nav details summary .status {
    margin-left: 0.5ch;
}
header nav details summary .status::before {
    display: inline-block;
    content: "›"/"";
    transform: rotate(90deg) translateY(-2px);
}
header nav details summary:hover,
header nav details[open] summary {
    background: var(--dark);
    color: var(--light);
}
header nav details[open] summary .status::before {
    transform: rotate(-90deg) translateY(0);
}
header nav details summary + ul {
    list-style: none;
    border: 1px solid var(--dark);
    background: var(--light);
    margin: 0;
    padding: 0.5em 0.5em 0.5em 2ch;
    min-width: 220px;
    position: absolute;
    right: unset;
    left: 0;
    top: 100%;
    z-index: 5;
}
header nav > ul {
    list-style: none;
    padding: 0;
    margin: 1em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3ch;
}
#fil_dAriane ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
#fil_dAriane ol li::before {
    content: "/" / "";
    display: inline-block;
    color: var(--gray);
    position: relative;
}
#fil_dAriane ol {
    display: flex;
}
#fil_dAriane {
    margin: 1em 0;
}
#fil_dAriane li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.sitemap {
    margin: 4em auto;
    max-width: 640px;
}
.sitemap > ol li {
    margin: 0.25em 0;
}
.sitemap ol {
    counter-reset: item;
    list-style: none;
    padding-left: 0.75em;
    font-weight: bold;
    color: var(--links);
}
.sitemap ol ol {
    padding-left: 2.5em;
}
.sitemap > ol > li::before {
    content: counters(item, ".") ". " / "";
}
.sitemap ol li::before {
    content: counters(item, ".") ". " / "";
    counter-increment: item;
}
.index main ul {
    list-style: none;
    border: dashed var(--dark);
    border-width: 1px 0;
    padding: 0.5em 0;
}
.index main ul li {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1ch;
}
.index main ul li::before {
    content: "🖹"/"";
}
.index main ul li a {
    flex-grow: 1;
}
.index main ul li time {
    color: var(--gray);
    font-size: 0.8em;
    justify-self: right;
    white-space: nowrap;
}
.url ul {
    list-style: none;
    border: dashed var(--dark);
    border-width: 1px 0;
    padding: 0.5em 0;
}
.url ul li {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1ch;
}
.url ul li::before {
    content: "🖧"/"";
}
.url ul li a {
    flex-grow: 1;
}
.url ul li time {
    color: var(--gray);
    font-size: 0.8em;
    justify-self: right;
    white-space: nowrap;
}
.footnote-ref {
    font-size: 0.9em;
}
table tbody,
.index main ul {
    border: dashed var(--dark);
    border-width: 1px 0;
}

[class^="ei"],
[class*=" ei"] {
    display: inline-block;
    font: 0.9em monospace;
    padding: 0 1ch;
}
.ei--a {
    color: #000;
    background: #2e9b43;
}
.ei--b {
    color: #000;
    background: #34bc6e;
}
.ei--c {
    color: #000;
    background: #cadd00;
}
.ei--d {
    color: #000;
    background: #f7ed00;
}

button,
input[type="submit"],
input[type="reset"] {
    cursor: pointer;
    border: none;
    border-radius: 3px;
    padding: 0.5em 1em;
    font-size: 16px;
}

button.primary,
input[type="submit"].primary,
input[type="reset"].primary {
    background-color: var(--button-primary-bg);
    color: var(--light);
}

button.primary:hover,
input[type="submit"].primary:hover,
input[type="reset"].primary:hover {
    background-color: var(--button-primary-hover);
}

button.secondary,
input[type="submit"].secondary,
input[type="reset"].secondary {
    background-color: var(--button-secondary-bg);
    color: var(--dark);
    border: 1px solid var(--gray);
}

button.secondary:hover,
input[type="submit"].secondary:hover,
input[type="reset"].secondary:hover {
    background-color: var(--button-secondary-hover);
}

form input[type="text"],
form input[type="url"],
form input[type="email"],
form input[type="password"],
form input[type="search"],
form input[type="tel"],
form textarea {
    border: 1px solid var(--gray);
    border-radius: 3px;
    padding: 8px 9px 7px;
    margin-bottom: 10px;
    font-size: 16px;
    background-color: #fff;
}

.extract {
    margin: 3em 0;
}

pre.code {
    display: flex;
    background-color: var(--code-background);
    padding: 1em;
    border-radius: 3px;
}

pre.code code {
    overflow: auto;
    text-wrap: auto;
}