/* Un seul thème, volontairement : le reste du site (boutique.css) n'a ni
   bascule ni prefers-color-scheme, il est marine et sarcelle en permanence.
   La doc reprend exactement les mêmes valeurs, pour qu'un clic depuis le
   pied de page ne change pas d'identité en changeant de page. Les noms de
   variables ne bougent pas : tout le reste du fichier continue de marcher
   sans y toucher. */
:root {
  --ground:      #060B18;
  --surface:     #0D192D;
  --surface-alt: #16233D;
  --ink:         #C4D2E6;
  --ink-soft:    #A2B3CB;
  --ink-faint:   #7D90AC;
  --rule:        #1D3155;
  --indigo:      #24C0C0;
  --indigo-soft: rgba(36, 192, 192, .12);
  /* Le site n'a pas d'ambre : c'est le seul ton que la doc invente, pour les
     mises en garde (« piège ») et le repère de tête. Le reste vient tel
     quel de boutique.css. */
  --brass:       #D9A44E;
  --brass-soft:  rgba(217, 164, 78, .12);
  --rust:        #d9534f;
  --rust-soft:   rgba(217, 83, 79, .12);
  --teal:        #23b07a;
  --teal-soft:   rgba(35, 176, 122, .12);
  --code-bg:     #0A1526;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* La même lueur sarcelle en haut de page que sur le reste du site,
     boutique.css:94-95 - un repère discret qu'on n'a pas quitté keplerbot.net. */
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(36, 192, 192, .08), transparent 60%),
    var(--ground);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- en-tete ---------- */
.bandeau {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.bandeau-int {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.marque {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.marque .orbite { color: var(--indigo); }
.fil {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}
.etat {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--brass);
  background: var(--brass-soft);
  border: 1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  border-radius: 3px;
  padding: 3px 10px;
}

/* ---------- charpente ---------- */
.charpente {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 96px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
nav.sommaire {
  position: sticky;
  top: 28px;
  padding-top: 44px;
  font-size: 14px;
}
nav.sommaire h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
  font-weight: 500;
}
nav.sommaire ol { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
nav.sommaire a {
  display: block;
  padding: 5px 12px;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid var(--rule);
  transition: color .12s, border-color .12s, background .12s;
}
nav.sommaire a:hover, nav.sommaire a:focus-visible {
  color: var(--indigo);
  border-left-color: var(--indigo);
  background: var(--indigo-soft);
}

main { padding-top: 44px; min-width: 0; }

/* ---------- typographie ---------- */
.mesure { max-width: 66ch; }
h1 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}
h2 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 62px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  text-wrap: balance;
}
h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 34px 0 10px;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0 0 16px; }
.chapo { font-size: 18.5px; color: var(--ink-soft); line-height: 1.6; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 2px; }

/* ---------- code ---------- */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.87em;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
}
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
  line-height: 1.7;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--indigo);
  border-radius: 4px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 20px;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.cm { color: var(--ink-faint); }
.ok { color: var(--teal); font-weight: 500; }
.no { color: var(--rust); font-weight: 500; }

/* ---------- tableaux ---------- */
.table-boite { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--rule); border-radius: 5px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th {
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 11px 16px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
td { padding: 11px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; }
td code { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- encadres ---------- */
.piege, .note {
  border-radius: 5px;
  padding: 18px 20px;
  margin: 0 0 22px;
  font-size: 15px;
}
.piege { background: var(--brass-soft); border: 1px solid color-mix(in srgb, var(--brass) 32%, transparent); }
.note  { background: var(--surface); border: 1px solid var(--rule); }
.piege > :last-child, .note > :last-child { margin-bottom: 0; }
.etiq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px;
}
.piege .etiq { color: var(--brass); }

/* ---------- compteurs ---------- */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; margin: 0 0 26px; }
.compteur { background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: 15px 17px; }
.compteur .n {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 31px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.compteur .l { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; display: block; line-height: 1.35; }
.compteur.fait .n { color: var(--teal); }
.compteur.manque .n { color: var(--rust); }

/* ---------- pied ---------- */
footer {
  border-top: 1px solid var(--rule);
  margin-top: 72px;
  padding-top: 22px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .charpente { grid-template-columns: 1fr; gap: 0; padding: 0 22px 72px; }
  nav.sommaire { position: static; padding-top: 30px; }
  nav.sommaire ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  main { padding-top: 20px; }
  .bandeau-int { padding: 18px 22px; }
}

/* ---------- pagination ---------- */
article.page[hidden] { display: none; }
nav.sommaire a.actif {
  color: var(--indigo);
  border-left-color: var(--indigo);
  background: var(--indigo-soft);
  font-weight: 500;
}
nav.sommaire #sommaire-local a {
  font-size: 13px;
  padding: 4px 12px;
  border-left-color: transparent;
  color: var(--ink-faint);
}
nav.sommaire #sommaire-local a:hover,
nav.sommaire #sommaire-local a:focus-visible {
  color: var(--indigo);
  border-left-color: var(--indigo);
}
nav.sommaire [hidden] { display: none; }

/* ---------- listes ---------- */
ul.mesure {
  margin: 0 0 18px;
  padding-left: 20px;
}
ul.mesure li { margin-bottom: 8px; }
ul.mesure li::marker { color: var(--ink-faint); }

/* ----------
   Un paragraphe qui s'ouvre en gras est, dans toutes ces pages, la mise en
   garde qui suit un tableau : le liseré l'encode, il ne le décore pas.
   ---------- */
p.avert {
  border-left: 2px solid var(--brass);
  background: var(--brass-soft);
  padding: 12px 16px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 18px;
}
p.avert > strong:first-child { color: var(--brass); }

/* ---------- suite ---------- */
.suite {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.suite a { text-decoration: none; }
.suite a:hover { text-decoration: underline; }

h1 + * { margin-top: 0; }
.mesure > h2:first-child { margin-top: 62px; }
article.page > .mesure:first-child > h1 { margin-top: 0; }

/* ---------- index alphabetique ---------- */
/* L'index est le seul endroit qui sort de la mesure de lecture : ce n'est pas
   du texte suivi, c'est une grille qu'on balaie des yeux. */
.lettre-bloc, .filtre-boite { max-width: none; }

.filtre-boite {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 16px 0 14px;
  background: linear-gradient(var(--ground) 78%, transparent);
}
.filtre {
  flex: 0 1 340px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  color: var(--ink);
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 9px 13px;
}
.filtre::placeholder { color: var(--ink-faint); }
.filtre:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}
.compte {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.legende {
  display: flex;
  gap: 14px;
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.cle-genre { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.lettre-bloc { margin-bottom: 30px; }
h2.lettre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 24px 0 10px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}

.grille-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 2px 20px;
}
a.entree {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 9px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid transparent;
  min-width: 0;
}
a.entree:hover, a.entree:focus-visible {
  background: var(--surface);
  border-color: var(--rule);
}
/* « display: flex » l'emporte sur le « [hidden] { display: none } » du
   navigateur : sans cette ligne, le filtre compte juste et ne masque rien. */
a.entree[hidden], .lettre-bloc[hidden] { display: none; }
a.entree code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
}
a.entree:hover code { color: var(--indigo); }
a.entree .ou {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-left: auto;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La pastille dit le genre sans prendre la place d'un mot : sur deux cent
   soixante-dix lignes, trois etiquettes ecrites noieraient les noms, qui sont
   ce qu'on vient chercher. */
.pastille {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  align-self: center;
}
.g-fonction { color: var(--indigo); }
.g-valeur { color: var(--teal); }
.g-constante { color: var(--brass); }

@media (max-width: 760px) {
  .grille-index { grid-template-columns: 1fr; }
  a.entree .ou { display: none; }
  .legende { margin-left: 0; }
}

/* ---------- les fonctions a la suite ---------- */
/* Une fiche par fonction : le nom, ce qu'elle fait en une phrase, sa
   signature et un appel. Serre, parce qu'on vient y verifier une forme,
   pas y lire. */
.fiche { margin: 0 0 26px; }
.fiche h3 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 5px;
  scroll-margin-top: 16px;
}
.fiche h3 a { color: var(--ink); text-decoration: none; }
.fiche h3 a:hover { color: var(--indigo); text-decoration: underline; }
.fiche .dit {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 8px;
  max-width: 62ch;
}
.fiche pre { margin: 0; }

/* Le titre de famille ouvre un groupe : il porte deja son trait, celui de
   h2 ferait doublon juste au-dessus de la premiere fiche. */
#page-api h2 { margin-top: 54px; }
#page-api > .mesure:first-child + .mesure p { max-width: 66ch; }

/* Les constantes n'ont ni signature ni appel : une grille de noms, serree. */
.groupe-const { max-width: none; margin: 0 0 22px; }
.groupe-const h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 22px 0 9px;
}
.groupe-const h3 a { color: inherit; text-decoration: none; }
.groupe-const h3 a:hover { color: var(--indigo); text-decoration: underline; }
.grille-const {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 3px 18px;
}
.const {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  padding: 3px 0;
}
.const code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  color: var(--brass);
  white-space: nowrap;
}
.const .vaut {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) { .grille-const { grid-template-columns: 1fr; } }

/* Le lien vers l'autre langue, dans le bandeau.
   Les balises « alternate » disent à un moteur que les deux pages vont
   ensemble ; elles ne font découvrir personne. Ce lien-ci, oui. */
.bandeau .langue {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.bandeau .langue:hover, .bandeau .langue:focus-visible {
  color: var(--indigo);
  border-color: var(--indigo);
  background: var(--indigo-soft);
}

/* La marque des fonctions ecrites mais pas encore livrees.
   Discrete par choix : elles restent minoritaires et la page se lit d'abord
   pour ce qu'elle documente. Assez contrastee tout de meme pour se voir dans
   une liste de trois cents entrees. */
.pas-livre {
  margin-left: .5em;
  padding: .05em .45em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--brass-soft);
  white-space: nowrap;
  vertical-align: middle;
}
.avis-livraison {
  border-left: 3px solid var(--brass);
  padding-left: .7em;
}
a.entree .pas-livre { font-size: .66em; padding: 0 .35em; }

/* Le pied vers les pages du site (02/10/2026). */
.pied-site { border-top: 1px solid var(--line, #2a3442); margin-top: 48px; padding: 20px 16px 32px; }
.pied-site nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.pied-site a { color: inherit; opacity: .8; text-decoration: none; font-size: 14px; }
.pied-site a:hover, .pied-site a:focus-visible { opacity: 1; text-decoration: underline; }