/* Memento — le site.

   Blanc, noir, et le rouge du ruban du logo pour une seule chose : ce que
   Memento a fait tout seul. Pas sur un bouton, pas sur un lien, pas au survol.
   Quand l'application s'arrete et attend quelqu'un, c'est en noir.

   Schibsted Grotesk pour tout le texte, Commit Mono pour ce qui est vraiment
   du code : versions, branches, sorties de git. Tout est servi d'ici, rien
   ne vient d'un autre site. */

@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(schibsted.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(schibsted-italic.woff2) format('woff2'); }
@font-face { font-family: 'Commit Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(commit-mono.woff2) format('woff2'); }

:root {
  --bg: #ffffff;
  --bg-2: #f5f5f3;
  --ink: #111111;
  --ink-2: #353535;
  --ink-3: #696969;
  --rule: #e4e4e0;
  --rule-2: #c9c9c4;
  --ribbon: #e5533d;
  --shot: #151617;
  --sans: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Commit Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --wide: 1200px;
  --text: 680px;
  --pad: 32px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --bg-2: #1e1e1e;
    --ink: #f2f2f0;
    --ink-2: #d2d2ce;
    --ink-3: #9c9c97;
    --rule: #2b2b2b;
    --rule-2: #424242;
    --shot: #0e0e0f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 18px/1.6 var(--sans);
  /* Une URL ou un chemin plus long que l ecran passe a la ligne au lieu de
     faire defiler toute la page de cote. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 1em; }
b, strong { color: var(--ink); font-weight: 650; }
code { font-family: var(--mono); font-size: 0.84em; color: var(--ink); background: var(--bg-2);
       padding: 0.12em 0.36em; border-radius: 4px; overflow-wrap: anywhere; }
pre { margin: 0; font-family: var(--mono); font-size: 14px; line-height: 1.6; overflow-x: auto; }
pre code { background: none; padding: 0; font-size: inherit; color: inherit; white-space: pre; }
.kbd, kbd { font-family: var(--mono); font-size: 0.78em; color: var(--ink); white-space: nowrap;
            border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 5px;
            padding: 0.08em 0.42em; background: var(--bg); }
::selection { background: var(--ink); color: var(--bg); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.dim { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 0.85em; }

/* Le ruban : la forme du marque-page du logo. */
.ribbon {
  display: inline-block; flex: none; width: 9px; height: 14px; background: var(--ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

/* --- Boutons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 7px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  font: 650 17px/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.small { padding: 8px 15px; font-size: 15px; border-radius: 6px; white-space: nowrap; }

/* --- En-tete --------------------------------------------------------------- */
.top { border-bottom: 1px solid var(--rule); }
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none;
         font-weight: 800; font-size: 21px; letter-spacing: -0.02em; margin-right: 8px; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav > a.link { color: var(--ink-3); text-decoration: none; font-size: 16px; white-space: nowrap; }
.nav > a.link:hover { color: var(--ink); }
.nav > a.link[aria-current="page"] { color: var(--ink); text-decoration: underline;
                                     text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.nav .spacer { flex: 1; }

/* --- Pied de page ------------------------------------------------------------ */
.foot { border-top: 1px solid var(--rule); margin-top: 120px; padding: 44px 0 64px; font-size: 15px; color: var(--ink-3); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; }
.foot .colophon p { margin: 0 0 8px; max-width: 48ch; }
.foot .colophon .who { color: var(--ink); font-weight: 700; font-size: 16px; }
.foot nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 7px 48px; align-content: start; justify-content: end; }
.foot nav a { color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }

/* --- En-tete des pages secondaires ------------------------------------------- */
.page-head { padding: 80px 0 44px; }
.page-head h1 { font-size: clamp(36px, 6vw, 72px); line-height: 1; margin-bottom: 18px; }
.page-head p { font-size: 20px; max-width: 40em; margin: 0; }

/* =========================================================================
   Accueil
   ========================================================================= */

.hero { padding-top: 88px; padding-bottom: 56px; }
.hero h1 { font-size: clamp(46px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.035em; max-width: 14em; }
.hero .lead { font-size: 22px; line-height: 1.5; max-width: 34em; margin: 28px 0 36px; color: var(--ink-2); }
.hero .get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero .facts { margin: 16px 0 0; font-family: var(--mono); font-size: 13.5px; color: var(--ink-3); }
.hero .others { font-size: 16px; color: var(--ink-3); }

/* La visite : de vraies captures, choisies par des onglets de texte. */
.tour-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 18px; }
.tour-tabs button { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 500 16px/1.3 var(--sans);
                    color: var(--ink-3); border-bottom: 2px solid transparent; }
.tour-tabs button:hover { color: var(--ink); }
.tour-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.shot { margin: 0; }
.shot .frame { background: var(--shot); border-radius: 10px; overflow: hidden;
               box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 30px 60px -40px rgba(0, 0, 0, 0.5); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px;
                   margin-top: 14px; font-size: 16px; }
.shot figcaption p { margin: 0; max-width: 46em; color: var(--ink-2); }
.shot figcaption .when { font-family: var(--mono); font-size: 13px; color: var(--ink-3); white-space: nowrap; padding-top: 2px; }
/* Un detail a taille reelle : les pixels de la capture, sans agrandissement. */
.detail { margin: 0; }
.detail .frame { display: inline-block; background: var(--shot); border-radius: 10px; overflow: hidden; max-width: 100%;
                 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); }
.detail img { display: block; }
.detail figcaption { margin-top: 10px; font-size: 15.5px; color: var(--ink-3); max-width: 40em; }

/* Les sections. Un titre qui est une phrase, et ce qu'il faut lire dessous. */
.block { padding-top: 128px; }
.block-h { max-width: 52em; margin-bottom: 44px; }
.block-h h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.03em; }
.block-h p { font-size: 20px; margin: 18px 0 0; max-width: 36em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.split.wide-right { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.prose h3 { margin: 30px 0 6px; }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: 17px; }

/* Le journal, tel que l'application l'ecrit. */
.log { border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden; font-family: var(--mono);
       font-size: 14px; line-height: 1.55; background: var(--bg); }
.log ol { list-style: none; margin: 0; padding: 0; }
.log li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px;
          padding: 13px 20px 13px 38px; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.log li:last-child { border-bottom: 0; }
.log time { color: var(--ink-3); }
.log li.did::before {
  content: ''; position: absolute; left: 16px; top: 16px; width: 9px; height: 14px; background: var(--ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.log li.stop { background: var(--bg-2); color: var(--ink); }
.log li.stop::before { content: ''; position: absolute; left: 17px; top: 19px; width: 8px; height: 8px; background: var(--ink); }
.log li small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: 15px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend .sq { width: 8px; height: 8px; background: var(--ink); display: inline-block; }

/* Les regles : un tableau, parce que c'en est un. */
.rules { width: 100%; border-collapse: collapse; }
.rules th { text-align: left; font-size: 14px; font-weight: 600; color: var(--ink-3);
            padding: 0 24px 12px 0; border-bottom: 2px solid var(--ink); }
.rules td { vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule); font-size: 16.5px; }
.rules td:first-child { width: 16%; font-weight: 750; color: var(--ink); font-size: 19px; letter-spacing: -0.01em; }
.rules td:nth-child(2) { width: 22%; color: var(--ink-3); }
.rules td:last-child { padding-right: 0; }

/* Les vrais messages de l'application, cites mot pour mot. */
.quotes { margin: 0; padding: 0; }
.quotes div { padding: 18px 0; border-top: 1px solid var(--rule); }
.quotes div:last-child { border-bottom: 1px solid var(--rule); }
.quotes dt { font-size: 15px; color: var(--ink-3); margin-bottom: 4px; }
.quotes dd { margin: 0; font-size: 17.5px; color: var(--ink); }
.quotes dd q { quotes: '“' '”'; }

/* De la vraie sortie git. */
.term { background: var(--shot); color: #d9d9d4; border-radius: 10px; padding: 20px 22px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); }
.term .p { color: #8f8f89; user-select: none; }
.term .c { color: #ffffff; }
.term .h { color: #e6c86e; }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 17px; }
/* Une option courte ne se coupe pas a son tiret (« -- » d'un cote, « force »
   de l'autre) ; dans les docs, un long bout de code peut, lui, aller a la ligne. */
.rules code, .list-plain code, .hero code { white-space: nowrap; }
.list-plain li:last-child { border-bottom: 1px solid var(--rule); }

/* Les dernieres versions. */
.news { list-style: none; margin: 0; padding: 0; }
.news li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.news li:last-child { border-bottom: 1px solid var(--rule); }
.news .v { font-family: var(--mono); font-size: 14px; color: var(--ink); padding-top: 3px; }
.news .t { color: var(--ink); font-weight: 600; }
.news .d { display: block; font-size: 14.5px; color: var(--ink-3); }

.note { font-size: 20px; line-height: 1.55; color: var(--ink); max-width: 32em; }
.note p { margin: 0 0 0.9em; }
.note .sig { color: var(--ink-3); font-size: 17px; }

/* Telecharger : une ligne par systeme, avec ce qu'il faut savoir. */
.get-table { width: 100%; border-collapse: collapse; }
.get-table th, .get-table td { text-align: left; vertical-align: top; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--rule); }
.get-table tr:first-child th, .get-table tr:first-child td { border-top: 2px solid var(--ink); }
.get-table th { font-size: 26px; font-weight: 800; color: var(--ink); width: 20%; letter-spacing: -0.02em; line-height: 1.15; }
.get-table th .here { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.get-table .req { font-size: 16.5px; }
.get-table .req span { display: block; color: var(--ink-3); font-size: 15px; margin-top: 4px; }
.get-table .acts { text-align: right; white-space: nowrap; padding-right: 0; }
.get-table .acts .btn + .btn { margin-left: 8px; }
.license { margin: 22px 0 0; font-size: 16px; color: var(--ink-3); }

/* =========================================================================
   Documentation
   ========================================================================= */

.doc { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 72px; align-items: start; padding-top: 56px; }
.toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 0 24px;
       font-size: 15px; scrollbar-width: thin; }
.toc .toc-t { display: block; margin: 0 0 12px; padding: 0; border: 0; background: none; font: 700 15px/1.4 var(--sans); color: var(--ink); text-align: left; }
.toc .toc-t::after { content: none; }
/* Sur un telephone, le sommaire se replie : sinon ses 27 liens occupent tout
   le premier ecran avant le moindre mot de documentation. */
.toc.plie a { display: none; }
.toc.plie .toc-t::after, .toc.ouvert .toc-t::after { margin-left: 8px; color: var(--ink-3); }
.toc.plie .toc-t::after { content: "Show"; }
.toc.ouvert .toc-t::after { content: "Hide"; }
.toc a { display: block; padding: 4px 0 4px 14px; color: var(--ink-3); text-decoration: none; border-left: 2px solid var(--rule); }
.toc a.sub { padding-left: 28px; font-size: 14.5px; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-left-color: var(--ink); }
.doc article { max-width: var(--text); }
.doc article > h1 { font-size: clamp(34px, 5.6vw, 66px); line-height: 1; margin: 0 0 18px; }
.doc article > p.sub { font-size: 20px; color: var(--ink-2); }
.doc section { padding-top: 64px; scroll-margin-top: 16px; }
.doc section h2 { font-size: 36px; line-height: 1.08; margin: 0 0 18px; letter-spacing: -0.025em; }
.doc h3 { margin: 36px 0 8px; scroll-margin-top: 16px; }
.doc p, .doc li { font-size: 17px; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li { margin: 7px 0; }
.doc li::marker { color: var(--ink-3); }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 16px; }
.doc th { text-align: left; font-size: 14px; font-weight: 600; color: var(--ink-3); padding: 0 16px 9px 0; border-bottom: 2px solid var(--ink); }
.doc td { vertical-align: top; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule); }
.doc td:first-child { color: var(--ink); }
.doc .note { margin: 22px 0; padding: 16px 20px; max-width: none; font-size: 16.5px; line-height: 1.6;
             color: var(--ink-2); background: var(--bg-2); border-radius: 8px; }
.doc .note p:last-child { margin-bottom: 0; }
.doc .note.warn { background: transparent; border: 2px solid var(--ink); }

/* =========================================================================
   Notes de version
   ========================================================================= */

.rel { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 40px; padding: 40px 0; border-top: 1px solid var(--rule); }
.releases .rel:first-of-type { border-top: 2px solid var(--ink); }
.rel-h { display: flex; flex-direction: column; gap: 4px; }
.rel-v { font-family: var(--mono); font-size: 16px; color: var(--ink); }
.rel-d { font-size: 15px; color: var(--ink-3); }
.rel h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 16px; }
.rel ul { list-style: none; margin: 0; padding: 0; }
.rel li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 8px 0; font-size: 17px; border-top: 1px solid var(--rule); }
.rel li:first-child { border-top: 0; }
.tg { font-size: 14px; font-weight: 650; color: var(--ink-3); padding-top: 1px; }
.tg-new { color: var(--ink); }
/* Le marque-page : la ou on s'etait arrete la derniere fois. */
.since { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 10px 0; font-size: 15px; color: var(--ink-3); }
.since .ribbon { width: 11px; height: 17px; }
.support { margin-top: 72px; padding-top: 36px; border-top: 2px solid var(--ink);
           display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.support h2 { font-size: 28px; margin-bottom: 8px; letter-spacing: -0.02em; }
.support p { margin: 0; max-width: 52ch; }

/* =========================================================================
   Contact
   ========================================================================= */

.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 80px; align-items: start; }
form label { display: block; margin-bottom: 24px; font-size: 15px; font-weight: 600; color: var(--ink); }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
form input, form select, form textarea {
  display: block; width: 100%; margin-top: 8px; padding: 12px 14px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 7px;
  font: 400 17px/1.5 var(--sans);
}
form textarea { min-height: 220px; resize: vertical; }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
form ::placeholder { color: var(--ink-3); opacity: 0.75; }
form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form .send { display: flex; align-items: center; gap: 16px; }
form .count { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.msg { margin-top: 20px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 8px; }
.msg b { display: block; }
.msg span { color: var(--ink-3); }
.cols aside h2 { font-size: 22px; letter-spacing: -0.015em; margin: 0 0 8px; }
.cols aside p { font-size: 16.5px; margin-bottom: 32px; }
.cols aside .line { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--rule);
                    text-decoration: none; color: var(--ink-2); }
.cols aside .line:last-child { border-bottom: 1px solid var(--rule); }
.cols aside .line:hover { color: var(--ink); }

/* =========================================================================
   Mentions
   ========================================================================= */

.legal { max-width: var(--text); }
.legal h2 { font-size: 28px; letter-spacing: -0.02em; margin: 52px 0 12px; }
.legal p { font-size: 17px; }
.legal dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 24px; margin: 0; }
.legal dt { color: var(--ink-3); font-size: 16px; }
.legal dd { margin: 0; color: var(--ink); }
.legal .note { max-width: none; padding: 16px 20px; font-size: 16.5px; color: var(--ink-2); background: var(--bg-2); border-radius: 8px; }

/* =========================================================================
   404
   ========================================================================= */

.lost { padding: 96px 0 0; max-width: 760px; }
.lost h1 { font-size: clamp(34px, 5.5vw, 64px); line-height: 1.02; margin-bottom: 26px; }
.lost .term { margin: 28px 0; }
.lost .term a { color: #ffffff; }

/* =========================================================================
   Petits ecrans
   ========================================================================= */

@media (max-width: 1000px) {
  .split, .split.wide-right { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .toc { position: static; max-height: none; columns: 2; column-gap: 24px; padding-bottom: 20px;
         border-bottom: 1px solid var(--rule); }
  .toc .toc-t { column-span: all; }
  .toc a { break-inside: avoid; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .block { padding-top: 96px; }
}
@media (max-width: 760px) {
  .toc .toc-t { cursor: pointer; margin: 0; padding: 10px 0; }
  .toc.plie { padding-bottom: 6px; }
  :root { --pad: 20px; }
  body { font-size: 17px; }
  .nav { gap: 18px; height: 60px; }
  .nav .hide-sm { display: none !important; }
  .hero { padding-top: 56px; }
  .hero .lead { font-size: 19px; }
  .block { padding-top: 80px; }
  .block-h p { font-size: 18px; }
  .rules thead { display: none; }
  .rules, .rules tbody, .rules tr, .rules td { display: block; width: auto !important; }
  .rules tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .rules tr:first-child { border-top: 2px solid var(--ink); }
  .rules td { border: 0; padding: 3px 0; }
  .get-table, .get-table tbody, .get-table tr, .get-table th, .get-table td { display: block; width: auto; }
  .get-table tr { padding: 20px 0; border-bottom: 1px solid var(--rule); }
  .get-table tr:first-child { border-top: 2px solid var(--ink); }
  .get-table th, .get-table td, .get-table tr:first-child th, .get-table tr:first-child td { border: 0; padding: 4px 0; }
  .get-table .acts { text-align: left; padding-top: 14px; white-space: normal; }
  .log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  pre { font-size: 12.5px; }
  .shot figcaption .when { white-space: normal; }
  /* Un tableau des docs plus large que l'ecran defile seul, pas la page. */
  .doc table { display: block; overflow-x: auto; }
  .shot figcaption { flex-direction: column; }
  .rel { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 32px 0; }
  .rel-h { flex-direction: row; align-items: baseline; gap: 14px; }
  .rel li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .support { grid-template-columns: minmax(0, 1fr); }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .foot nav { justify-content: start; }
  form .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal dd { margin-bottom: 12px; }
  .toc { columns: 1; }
}
@media (max-width: 420px) {
  .nav .hide-xs { display: none !important; }
}
/* Les plus petits telephones : le logo seul, pour que « Download » tienne. */
@media (max-width: 380px) {
  .brand span { display: none; }
}