:root {
    color-scheme: light;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #18232c;
    background: #f4f6f8;
}
* { box-sizing: border-box; }
body {
    margin: 0 auto;
    max-width: 74rem;
    padding: 1rem;
    overflow-wrap: anywhere;
}
header, nav, main, footer {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #cbd3da;
    border-radius: .35rem;
    background: #fff;
}
h1, h2, h3, h4, h5 { line-height: 1.3; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; margin-bottom: .4rem; }
a { color: #174e87; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: 3px solid #a64b00; outline-offset: 4px; }
.nom-site { font-size: 1.35rem; font-weight: 700; }
.menu {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.menu a { display: inline-block; padding: .4rem 0; }
form { max-width: 32rem; }
label { display: block; margin-top: 1rem; font-weight: 600; }
input, button {
    font: inherit;
    min-height: 2.75rem;
    border: 1px solid #667785;
    border-radius: .25rem;
    padding: .5rem .75rem;
}
input:not([type="hidden"]) { display: block; width: 100%; background: #fff; }
button {
    margin-top: 1rem;
    color: #fff;
    background: #174e87;
    cursor: pointer;
}
button:hover { background: #10375f; }
[role="alert"], [data-refus] {
    border-left: .3rem solid #a02828;
    padding-left: 1rem;
}
.arbre, .arbre ul { padding-left: 1.25rem; }
.arbre > li { margin-bottom: 2rem; }
.arbre [data-poste] {
    margin-bottom: 1rem;
    padding: .25rem .75rem 1rem;
    border-left: 2px solid #cbd3da;
}
.comptages { display: flex; flex-wrap: wrap; gap: 1rem; }
.comptages div { padding: .5rem 1rem; background: #edf2f7; }
.comptages dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
dt { font-weight: 600; }
dd { margin-left: 1rem; }
small { font-size: .9rem; }
footer { color: #40505d; }
.evitement {
    position: absolute;
    left: -10000px;
    top: 0;
}
.evitement:focus {
    left: 1rem;
    padding: 1rem;
    background: #fff;
    z-index: 10;
}
@media (max-width: 38rem) {
    body { padding: .5rem; }
    header, nav, main, footer { padding: .75rem; }
    .menu { display: block; }
    .arbre, .arbre ul { padding-left: .85rem; }
    .comptages { gap: .5rem; }
}