:root {
  color-scheme: light dark;
  --fond: #fbfbfd;
  --fond-menu: #f1f2f6;
  --encre: #1c1f26;
  --encre-douce: #5b6270;
  --trait: #d8dbe3;
  --accent: #1d5fa8;
  --accent-doux: #e8f0fa;
  --m-bdd: #7B5CD6;
  --m-flu: #0553B1;
  --m-git: #E64A19;
  --m-mail: #00695C;
  --m-mdp: #1565C0;
  --m-mtp: #EF6C00;
  --m-net: #00838F;
  --m-pdc: #00838F;
  --m-ps: #D84315;
  --m-saf: #EF6C00;
  --m-srv: #2E7D32;
  --m-plan: #3949AB;
  --m-reg: #AD1457;
  --m-svn: #512DA8;
  --fam-detruit: #C62828;
  --fam-ecrit: #2E7D32;
  --fam-lit: #B26A00;
  --fam-ouvre: #1565C0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #15171c;
    --fond-menu: #1c1f26;
    --encre: #e6e8ed;
    --encre-douce: #a0a7b4;
    --trait: #333843;
    --accent: #7db3ef;
    --accent-doux: #1d2733;
  --m-bdd: #B39DFF;
  --m-flu: #54C5F8;
  --m-git: #FF8A65;
  --m-mail: #80CBC4;
  --m-mdp: #82B1FF;
  --m-mtp: #FFB74D;
  --m-net: #4DD0E1;
  --m-pdc: #4DD0E1;
  --m-ps: #FF8A65;
  --m-saf: #FFB74D;
  --m-srv: #81C784;
  --m-plan: #9FA8DA;
  --m-reg: #F48FB1;
  --m-svn: #B39DDB;
  --fam-detruit: #EF9A9A;
  --fam-ecrit: #81C784;
  --fam-lit: #FFB74D;
  --fam-ouvre: #82B1FF;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: grid;
  grid-template-columns: 17rem 1fr;
  min-height: 100vh;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* LE CLIC DANS LE MENU Y VA EN DOUCEUR : le saut sec faisait perdre l’endroit
   d’où l’on partait, et l’on ne savait plus si la page avait bougé. */
html { scroll-behavior: smooth; }

/* LE MENU NE DÉFILE PAS AVEC LE TEXTE. Il partait vers le haut au premier
   tour de molette, et il fallait remonter tout le manuel pour changer de
   sujet. Il tient sa place et défile pour son compte quand il déborde. */
nav {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem 1.2rem 3rem;
  border-right: 1px solid var(--trait);
  background: var(--fond-menu);
}

/* Le champ de recherche, en tête du menu : il cherche dans TOUT le manuel. */
nav .chercher { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.9rem; }
nav .chercher input { flex: 1 0 100%; }
/* SUIVANT ET PRÉCÉDENT : la recherche trouve souvent douze fois, et sauter à
   la première ne servait qu’une fois sur douze. */
nav .chercher .pas { display: inline-flex; gap: 0.2rem; }
nav .chercher .pas button {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: 4px;
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
nav .chercher .pas button:hover { background: var(--accent-doux); color: var(--accent); }
nav .chercher input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--trait);
  border-radius: 5px;
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  font-size: 0.88rem;
}
nav .chercher input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
nav .trouves { font-size: 0.75rem; color: var(--encre-douce); white-space: nowrap; }
/* LA LANGUE, EN HAUT A DROITE, COMME SUR LE SITE : le choix vivait sous la
   recherche, et l'on ne l'y cherchait pas. Le menu est pose a la publication
   par tool/publier_site.py, qui sait ou sont les drapeaux du site. */
.langues { position: absolute; top: 14px; right: 16px; z-index: 20; font-size: 0.9rem; }
.langues summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 12px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--fond);
  color: var(--encre);
}
.langues summary::-webkit-details-marker { display: none; }
/* LE DRAPEAU, ET NON UN EMOJI : Windows ne compose pas ceux des drapeaux. */
.langues .drapeau {
  width: 20px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.langues ul {
  position: absolute;
  right: 0;
  margin: 6px 0 0;
  padding: 6px 0;
  list-style: none;
  min-width: 180px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.langues a { display: block; padding: 4px 14px; color: var(--encre); text-decoration: none; }
.langues a:hover { background: var(--accent-doux); }
.langues a[aria-current] { font-weight: 600; color: var(--accent); }
nav a[hidden] { display: none; }

/* Une section du manuel assemblé : un trait les sépare, et le mot cherché
   s’allume. */
main section { max-width: 44rem; }
/* LE TITRE D’UN SUJET, ENTRE DEUX TRAITS. Dans une page qui les enchaîne, un
   seul trait ne disait pas si le sujet commençait au-dessus ou au-dessous de
   lui ; encadré, le titre se lit comme le début de ce qui suit. De l’air avant,
   pour que le trait appartienne au sujet qui commence et non à celui qui
   finit. */
main section + section { margin-top: 250px; }
main section > h1 {
  margin: 0 0 1.4rem;
  padding: 0.9rem 0;
  text-align: center;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
main section[hidden] { display: none; }
mark { background: var(--accent-doux); color: var(--accent); border-radius: 2px; }
/* CELLE OÙ L’ON EST, parmi les douze autres : sans elle, « suivant » faisait
   défiler la page sans qu’on sache vers quoi. */
mark.ici { background: var(--accent); color: var(--fond); }
nav .marque {
  display: block;
  margin-bottom: 1.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--encre);
  text-decoration: none;
}
nav .marque span { display: block; font-size: 0.78rem; font-weight: 400; color: var(--encre-douce); }
/* LE TITRE D’UN GROUPE, ENTRE DEUX TRAITS : les cinq familles se lisaient
   d’affilée, et rien ne disait où l’une finissait. */
nav h2 {
  margin: 1.6rem 0 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
/* Le premier n’a pas besoin de prendre l’air : la tête du menu est juste
   au-dessus. */
nav .sommaire h2:first-child { margin-top: 0; }
nav ul { margin: 0; padding: 0; list-style: none; }
/* SERRÉES, ET C’EST VOULU : le menu porte trente-et-une entrées, et les
   espacer le faisait déborder sans rien gagner. C’est la PAGE qui avait besoin
   d’air entre deux sujets, pas le sommaire. */
nav li { margin: 0.1rem 0; }
nav a {
  display: block;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  color: var(--encre);
  text-decoration: none;
  font-size: 0.93rem;
}
nav a:hover { background: var(--accent-doux); }
nav a[aria-current="page"] {
  background: var(--accent-doux);
  color: var(--accent);
  font-weight: 600;
}
/* **LA MARQUE ET LA RECHERCHE NE S’EN VONT PAS.** Le menu défile pour son
   compte dès qu’il déborde, et les emportait vers le haut : on ne savait plus
   où l’on était, et il fallait remonter tout le sommaire pour chercher.
   Seul le manuel assemblé porte cette tête — les pages prises seules gardent
   un menu d’une pièce. */
nav.fixe {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
nav.fixe .tete { flex: 0 0 auto; }
nav.fixe .sommaire { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* L'icone d'un module dans le menu : celle de la barre, dans sa teinte — en base64, pour que la page se suffise. */
nav a .mi { width: 1.05em; height: 1.05em; vertical-align: -0.2em; margin-right: 0.45em; }

main { padding: 2.4rem 2rem 5rem; }
article { max-width: 44rem; }

h1 { margin: 0 0 1.2rem; font-size: 1.85rem; line-height: 1.2; text-wrap: balance; }
h2 { margin: 2.1rem 0 0.6rem; font-size: 1.18rem; text-wrap: balance; }
p { margin: 0.7rem 0; }
.chapeau { font-size: 1.06rem; color: var(--encre-douce); }
ul, ol { margin: 0.7rem 0; padding-left: 1.3rem; }
li { margin: 0.25rem 0; }
a { color: var(--accent); }

code, kbd { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 0.9em; }
kbd {
  padding: 0.05em 0.35em;
  border: 1px solid var(--trait);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--fond-menu);
  white-space: nowrap;
}

/* Les icones de l'interface : elles prennent la couleur du texte qui les porte. */
.i {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
}
.i svg { display: block; width: 100%; height: 100%; }

/* La vignette d'un module, telle que la barre la dessine : icone, sigle, teinte. */
.glyphe {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.05em 0.35em 0.05em 0.25em;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
}
.glyphe .i { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }

/* Le cadenas d'un module protege : ses mots de passe sont scelles dans le
   coffre, et ne se lisent qu'une fois celui-ci ouvert. Discret — c'est une
   precision, pas un avertissement — et il mene a la page qui l'explique. */
.cadenas {
  color: var(--encre-douce);
  text-decoration: none;
}
.cadenas .i { width: 0.95em; height: 0.95em; vertical-align: -0.13em; }

.pastille {
  display: inline-block;
  width: 2.4rem;
  height: 1rem;
  border-radius: 3px;
  background: var(--teinte);
}

.fam { font-weight: 700; }
.fam-ouvre { color: var(--fam-ouvre); }
.fam-lit { color: var(--fam-lit); }
.fam-ecrit { color: var(--fam-ecrit); }
.fam-detruit { color: var(--fam-detruit); }

.tableau { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; }
th, td { padding: 0.38rem 0.6rem; text-align: left; vertical-align: top; }
th {
  border-bottom: 2px solid var(--trait);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
td { border-bottom: 1px solid var(--trait); }
td.sigle { width: 5.5rem; white-space: nowrap; }

figure { margin: 1.5rem 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--trait);
  border-radius: 6px;
}
figcaption { margin-top: 0.45rem; font-size: 0.88rem; color: var(--encre-douce); }

/* Réduite à la colonne, l'interface ne se lit pas : un clic l'ouvre en grand. */
figure img { cursor: zoom-in; }
dialog.agrandie {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  cursor: zoom-out;
}
dialog.agrandie::backdrop { background: rgba(10, 14, 20, 0.88); }
dialog.agrandie img {
  display: block;
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: 86vh;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
dialog.agrandie p {
  margin: 0.75rem auto 0;
  max-width: 70ch;
  font-size: 0.88rem;
  color: #e7edf4;
  text-align: center;
}

.pied {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  font-size: 0.85rem;
  color: var(--encre-douce);
}

@media (max-width: 62rem) {
  body { grid-template-columns: 1fr; }
  /* Sur un écran étroit le menu passe AU-DESSUS du texte : collé en haut, il
     mangerait l’écran entier. */
  nav {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--trait);
    padding-bottom: 1.4rem;
  }
  main { padding: 1.6rem 1.2rem 4rem; }
}