/* Stylesheet for the DT Hub presentation page.
 *
 * No remote font, no tracker, no audience measurement: the project promises
 * to send nothing without being asked, and its page holds to that same
 * line.
 *
 * A single theme, dark: the application is dark, so are the screenshots, and
 * a light page would turn every image into a hole of light.
 *
 * **The screenshots carry the page.** Two attempts taught this: first too
 * large in the middle of long paragraphs, then shrunk to thumbnails that
 * could no longer be read. They are now at a size where the application's
 * text can be read, and each one opens a section. */

:root {
  --fond: #14161a;
  --carte: #1b1e24;
  --releve: #22262e;
  --trait: #2c313a;
  --texte: #e8ebf1;
  --doux: #9aa2b1;
  --accent: #f0b429;
  --accent-fond: rgba(240, 180, 41, 0.1);
  --vert: #6fcf8a;
  --lien: #7cb7ff;
  --rayon: 10px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 1000px; margin: 0 auto; padding: 0 24px 80px; }

a { color: var(--lien); text-underline-offset: 2px; }
a:hover { color: #a8cfff; }

/* Top bar */

.barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0 0; font-size: 15px;
}
.barre .marque { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; }
.barre .marque img { width: 30px; height: 30px; }
.barre nav { display: flex; align-items: center; gap: 16px; }
.barre nav a { display: inline-flex; align-items: center; }
.barre nav a .ic { margin-right: 6px; }
.barre nav a[aria-current] { color: var(--doux); text-decoration: none; }

/* Header */

header.hero { padding: 44px 0 0; }
header.hero h1 {
  font-size: clamp(30px, 4.4vw, 40px); margin: 0 0 12px;
  letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
header.hero .accroche { font-size: 19px; margin: 0; max-width: 60ch; color: var(--texte); }
header.hero .accroche strong { color: var(--texte); }

ul.faits-cles {
  list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 1px;
  background: var(--trait); border: 1px solid var(--trait);
  border-radius: var(--rayon); overflow: hidden;
}
ul.faits-cles li { background: var(--carte); padding: 13px 18px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
ul.faits-cles b { color: var(--vert); font-weight: 650; white-space: nowrap; font-size: 15px; }
ul.faits-cles span { color: var(--doux); font-size: 16px; flex: 1 1 340px; }

/* Download */

.telecharger { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 28px 0 0; }
.bouton {
  display: inline-block; background: var(--accent); color: #1a1205;
  font-weight: 650; font-size: 17px; padding: 13px 26px;
  border-radius: var(--rayon); text-decoration: none;
}
.bouton:hover { background: #ffc844; color: #1a1205; }
.sous-bouton { color: var(--doux); font-size: 15px; }

/* Sections and categories */

section { margin-top: 64px; }
h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -0.01em; padding-bottom: 10px; border-bottom: 1px solid var(--trait); }
h3 { font-size: 19px; margin: 0 0 6px; }
p { margin: 10px 0; }
.chapo { color: var(--doux); margin-top: 10px; }

/* A category: a title, a list of features, a screenshot beside it.
 *
 * **Side by side, not one below the other.** Stacked, the image and the list
 * took up twice the height, and the page became a long scroll where the
 * screenshots crowded out the text. Placed side by side, they take up the
 * same space and read together. Below eight hundred pixels wide, they stack
 * for lack of room, and that is the only case where they do. */

.categorie { margin-top: 34px; display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; }
.categorie:first-of-type { margin-top: 22px; }
.categorie.large { grid-template-columns: 1fr; }
.categorie h3 { margin: 0 0 8px; }
.categorie figure { margin: 0; }
.categorie img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte);
}
.categorie ul.liste { margin-top: 0; }

@media (max-width: 800px) {
  .categorie { grid-template-columns: 1fr; gap: 18px; }
}

/* Lists */

ul.liste { list-style: none; padding: 0; margin: 14px 0 0; }
ul.liste li { padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid var(--trait); }
ul.liste li:last-child { border-bottom: none; }
ul.liste li::before { content: "›"; position: absolute; left: 4px; top: 9px; color: var(--accent); font-weight: 700; }
ul.liste .note { color: var(--doux); }

/* Callout box */

.encart { background: var(--accent-fond); border: 1px solid rgba(240, 180, 41, 0.32); border-radius: var(--rayon); padding: 16px 20px; margin-top: 22px; }
.encart h3 { margin-top: 0; }
.encart p { margin: 8px 0; }

/* Code */

pre { background: var(--releve); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 13px 15px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; }
code { font-family: var(--mono); font-size: 0.9em; }
p code, li code, td code { background: var(--releve); padding: 2px 6px; border-radius: 5px; }

/* Table */

.defilant { overflow-x: auto; margin-top: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--trait); }
th { color: var(--doux); font-weight: 600; font-size: 14px; }
td:first-child { white-space: nowrap; font-family: var(--mono); color: var(--accent); }

/* Footer */

footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--trait); color: var(--doux); font-size: 15px; }
footer p { margin: 10px 0; }
footer .liens { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }

@media (prefers-reduced-motion: no-preference) {
  a, .bouton { transition: color .12s ease, background-color .12s ease; }
}

/* Icons.
 *
 * Drawn on the page, in the application's own hand: several are its glyphs
 * copied path for path, so the page and the software say the same thing the
 * same way. No icon font, for the reason at the top of this file.
 *
 * They decorate text that already carries the meaning, so the whole set is
 * hidden from screen readers rather than given labels nobody wrote. */

.jeu-icones { display: none; }

.ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.12em;
}

h2 { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; }
h2 .ic { color: var(--accent); width: 1.05em; height: 1.05em; }

/* A fixed width on the label so the four descriptions start on the same
   line. Ragged, the eye reads four separate rows instead of a table. It
   gives way below its own width, where the list stacks anyway. */
ul.faits-cles b { display: flex; align-items: center; gap: 9px; min-width: 206px; }
ul.faits-cles b .ic { color: var(--vert); width: 18px; height: 18px; }

.bouton { display: inline-flex; align-items: center; }
.bouton .ic { margin-right: 9px; stroke-width: 1.6; }

/* The mark, a touch warmer than a flat image on a flat bar. */

.barre .marque img {
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--trait), 0 2px 10px rgba(0, 0, 0, .35);
}

/* A glow behind the title. Barely there: it lifts the top of the page off
 * the flat background without becoming something anyone notices. */

header.hero { position: relative; }
header.hero::before {
  content: ""; position: absolute; z-index: -1;
  left: -12%; right: -12%; top: -70px; height: 340px;
  background: radial-gradient(60% 70% at 30% 0%, rgba(240, 180, 41, .10), transparent 70%);
  pointer-events: none;
}

/* The warning that greets a first launch, said in two lines under the
 * button rather than only in the section far below. Someone who downloads
 * from the top of the page meets Windows before they ever scroll. */

.avertissement {
  display: flex; align-items: flex-start; gap: 11px;
  /* Its own line: the download block is a flex row, and without this the
     note would sit beside the button instead of under it. */
  flex-basis: 100%;
  margin: 4px 0 0; max-width: 62ch;
  color: var(--doux); font-size: 15px; line-height: 1.5;
}
.avertissement .ic { color: var(--accent); width: 17px; height: 17px; margin-top: 3px; }