/* The public site. Same tokens as the simulator so that the two read as one
   product, and the same rule: colours are declared once, dark mode included. */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --ink: #131820;
  --muted: #5c6875;
  --border: #d7dde4;
  --accent: #2f6ccc;
  --accent-soft: #e8eefb;
  --warn: #c67b12;
  --measure: 62ch;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px rgb(16 24 40 / 6%);

  /* Les trois régimes du circuit. Ce ne sont pas des couleurs décoratives :
     refoulement, ligne liquide et aspiration se lisent au premier coup d'œil
     parce qu'un frigoriste les distingue ainsi sur une machine.

     Le liquide est VERT, et pas un orange plus clair que le refoulement : la
     nuance ne tranchait pas, et le vert est la convention du liquide HP sur
     un schéma. Le voyant, qui est une fenêtre sur cette ligne, garde son
     anneau vert — c'est cohérent, pas redondant. */
  --hot: #d9542c;
  --hot-tint: #fbeee9;
  --liquid: #1b8a52;
  --liquid-tint: #e7f3ec;
  --cold: #3b82d6;
  --cold-tint: #e9f1fc;
  --ok: #3a9d68;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1218;
    --surface: #161c25;
    --surface-2: #1e2631;
    --ink: #e7edf4;
    --muted: #93a1b1;
    --border: #2a3441;
    --accent: #6e9ff0;
    --accent-soft: #1c2739;
    --warn: #e5a13c;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 28%);
    --hot: #f0794f;
    --hot-tint: #2a1d18;
    --liquid: #48bd7e;
    --liquid-tint: #15241b;
    --cold: #6e9ff0;
    --cold-tint: #172231;
    --ok: #5cc48c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 650; color: var(--ink); text-decoration: none; }
.bar nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 15px; }
.bar nav a[aria-current] { color: var(--ink); font-weight: 600; }

.cta, .button {
  display: inline-block;
  padding: 8px 16px;
  color: var(--surface);
  background: var(--accent);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.button { padding: 12px 22px; font-size: 17px; }

main { max-width: 1040px; margin: 0 auto; padding: 32px 20px 64px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 44px;
}
.hero-text { max-width: var(--measure); }
.hero h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 14px; }
.eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.lead { font-size: 19px; color: var(--muted); }
.note { font-size: 14px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button-ghost {
  display: inline-block;
  padding: 12px 20px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
}
.button-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* En dessous de 900 px le dessin passe sous le texte : il illustre, il ne
   porte aucune information qu'on perdrait à le reléguer. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-art { order: -1; max-width: 420px; }
}

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 44px 0;
  counter-reset: argument;
}
.columns > div {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.columns > div::before {
  counter-increment: argument;
  content: counter(argument, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.columns h2 { font-size: 17px; margin: 0 0 8px; }
.columns p { margin: 0; color: var(--muted); font-size: 14.5px; }

.band {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.band h2 { margin-top: 0; }
.band p { max-width: var(--measure); }

.prose { max-width: var(--measure); }
.prose h1 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.02em; }
.prose h2 { margin-top: 36px; font-size: 19px; }
.prose li { margin-bottom: 8px; }
.todo { padding: 10px 14px; background: var(--surface-2); border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; }

footer {
  padding: 24px 20px 40px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
footer p { margin: 4px 0; }

.narrow { max-width: 42ch; }
.form p { display: grid; gap: 6px; margin: 0 0 16px; }
.form label { font-size: 14px; color: var(--muted); }
.form input {
  font: inherit;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.error {
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid #d4462f;
  border-radius: 0 8px 8px 0;
}
.inline-form { display: inline; }
.linkish {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ── Le menu du membre, en haut à droite ──────────────────────────────────
   Un `<details>` déguisé en menu. Pas de JavaScript : il se déplie au clavier
   comme à la souris, et il se replie tout seul. La flèche par défaut du
   navigateur est retirée, sinon on en a deux. */
.menu-membre { position: relative; }
.menu-membre > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}
.menu-membre > summary::-webkit-details-marker { display: none; }
.menu-membre > summary::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border: 4px solid transparent;
  border-top-color: var(--muted);
  /* Le triangle est dessiné avec des bordures : il suit la couleur du texte
     sans image à charger, et reste net à tous les grossissements. */
  transform: translateY(2px);
}
.menu-membre > summary:hover,
.menu-membre[open] > summary { background: var(--surface-2); }
.menu-membre > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu-membre .role {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
}
.menu-membre[open] > summary .role { background: var(--surface); }

/* Le masquage est EXPLICITE, et ce n'est pas une ceinture de plus.
   Mesuré : un `<details>` replié laissait ce panneau à 190x95 px, visible
   par-dessus la page. Un enfant en position absolue échappe à la façon dont
   le navigateur replie le contenu — le comportement varie d'ailleurs d'un
   moteur à l'autre, et on ne peut pas s'appuyer dessus au plancher de 2020. */
.menu-membre:not([open]) .menu-panneau { display: none; }

.menu-panneau {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 190px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.35);
}
.menu-panneau a,
.menu-panneau button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  text-align: left;
  /* Sans soulignement : dans un menu, ce sont des entrées, pas des liens
     dans une phrase. Le survol les désigne mieux qu'un trait permanent. */
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}
.menu-panneau a:hover,
.menu-panneau button:hover { background: var(--surface-2); }
.menu-panneau form { width: 100%; margin: 0; }

/* ── L'espace privé d'un membre ───────────────────────────────────────────*/
.card {
  margin: 0 0 24px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.card h2 { margin-top: 0; }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.fiche dt { color: var(--muted); font-size: 14px; }
.fiche dd { margin: 0; }

.chiffres { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 8px; padding: 0; list-style: none; }
.chiffres strong { display: block; font-size: 26px; line-height: 1.1; }
.chiffres li { font-size: 14px; color: var(--muted); }

.tentatives { width: 100%; border-collapse: collapse; font-size: 14px; }
.tentatives th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; }
.tentatives td { padding: 6px 8px; border-top: 1px solid var(--border); }

/* Le verdict se lit, il n'est pas seulement coloré : un daltonien doit
   pouvoir s'en servir, et la couleur seule ne porte jamais l'information. */
.verdict-right { color: #1a7f4b; }
.verdict-wrong, .verdict-abandoned { color: #b23c26; }

.carte { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; padding: 0; list-style: none; }
.carte li {
  padding: 6px 12px;
  font-size: 14px;
  background: var(--surface-2);
  border-radius: 999px;
}
.carte .etiquette { margin-left: 6px; font-size: 12px; color: var(--muted); }
.carte .niveau-mastered, .carte li.niveau-mastered { background: #e3f3ea; }
.carte li.niveau-fragile { background: #fbe9e5; }

.empty { color: var(--muted); font-style: italic; }

/* Le jeu d'icônes inline : présent dans le document, jamais affiché. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Les coins du site ────────────────────────────────────────────────────
   Une carte par famille de métier, sa couleur en bandeau, ses modules
   dessous avec leur état. C'est la structure du site, pas une rubrique :
   elle se construit depuis le catalogue. */
.trades { margin: 44px 0; }
.trades h2, .audiences h2 { margin-bottom: 4px; font-size: 24px; letter-spacing: -0.015em; }
.lead-small { margin: 0 0 22px; color: var(--muted); max-width: var(--measure); }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

.trade {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--trade, var(--accent));
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.trade-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.trade-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: var(--trade, var(--accent));
  background: color-mix(in srgb, var(--trade, var(--accent)) 12%, var(--surface));
}
.trade-icon svg { width: 24px; height: 24px; }
.trade h3 { margin: 2px 0 4px; font-size: 18px; letter-spacing: -0.01em; }
.trade-summary { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.modules { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.module {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.module-name { font-weight: 600; }
.module.soon .module-name { font-weight: 500; color: var(--muted); }
.module-summary { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.pill {
  justify-self: end;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
}
.pill-open { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }

/* La tuile qui dit que la liste reste ouverte. Trait discontinu : elle
   n'annonce rien, elle tient la place. */
.trade-next {
  background: none;
  border: 1px dashed var(--border);
  border-top: 1px dashed var(--border);
  box-shadow: none;
}
.trade-next .trade-icon { color: var(--muted); background: var(--surface-2); }
.trade-next-ask { margin: auto 0 0; font-size: 14px; color: var(--muted); }

/* ── Les deux publics ─────────────────────────────────────────────────── */
.audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin: 44px 0; }
.audience {
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.audience h2 { margin: 0 0 10px; }
.audience p { color: var(--muted); }
.audience > p:last-child { margin-bottom: 0; }
.ticks { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* ── La vignette du bandeau ───────────────────────────────────────────────
   Décorative, contrairement au synoptique du simulateur. Les animations s'en
   tiennent à transform et opacity, sauf stroke-dashoffset pour le fluide —
   la seule exception que le §6 bis accepte. */
.hero-art { justify-self: center; width: 100%; }
.vg { display: block; width: 100%; height: auto; overflow: visible; }

.vg-pipes path { stroke-width: 5.5; }
.vg-pipes .vg-hot { stroke: var(--hot); }
.vg-pipes .vg-liquid { stroke: var(--liquid); }
.vg-pipes .vg-cold { stroke: var(--cold); }

.vg-flow path {
  stroke: var(--surface);
  stroke-width: 3;
  stroke-dasharray: 2.5 21;
  animation: vg-flow 1.15s linear infinite;
}

.vg-coil { stroke-width: 2; }
.vg-coil-hot { fill: var(--hot-tint); stroke: var(--hot); }
.vg-coil-cold { fill: var(--cold-tint); stroke: var(--cold); }
.vg-fins { fill: none; stroke: var(--border); }
.vg-fan-well { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.vg-blades { transform-box: fill-box; transform-origin: center; animation: vg-spin 0.9s linear infinite; }
.vg-blades path { fill: var(--muted); opacity: 0.8; }
.vg-hub { fill: var(--ink); }

.vg-body { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.vg-sight { fill: none; stroke: var(--ok); stroke-width: 2.5; }
.vg-stem { fill: none; stroke: var(--ink); stroke-width: 2; }
.vg-head { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.vg-capillary { stroke: var(--muted); stroke-width: 1.4; stroke-linejoin: round; }
.vg-bulb { fill: var(--muted); stroke: var(--ink); stroke-width: 1.4; }

.vg-shell { fill: var(--surface-2); stroke: var(--ink); stroke-width: 2; }
.vg-seam { stroke: var(--border); stroke-width: 1.6; }
.vg-box { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.vg-term { fill: var(--muted); }
.vg-feet { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.vg-shake { transform-box: fill-box; transform-origin: center; animation: vg-shake 0.16s linear infinite; }

@keyframes vg-flow { to { stroke-dashoffset: -23.5; } }
@keyframes vg-spin { to { transform: rotate(360deg); } }
@keyframes vg-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(0.4px, -0.3px); }
  50%      { transform: translate(-0.3px, 0.4px); }
  75%      { transform: translate(0.3px, 0.3px); }
}

/* Même règle que le simulateur : qui demande moins de mouvement n'en a aucun,
   et le fluide disparaît plutôt que de se figer en pointillés inexpliqués. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vg-flow { visibility: hidden; }
}


/* Le tableau de bord du formateur -------------------------------------------
   Un écran de PRODUIT, pas un back-office : même langue graphique que le site
   public, parce que c'est ce qu'un centre regarde avant d'acheter (§9). Des
   tableaux sobres, des chiffres lisibles de loin, et rien qui ressemble à une
   liste de tables. */
.board { max-width: 1040px; margin: 0 auto; padding: 32px 20px 64px; }
.board h1 { margin: 0 0 4px; }
.board .crumb { margin: 0 0 10px; font-size: 14px; }
.board .lede { margin: 0 0 24px; color: #5b6673; }

.board-figures {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 0 28px;
}
.board-figures div {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
}
.board-figures strong { display: block; font-size: 30px; line-height: 1.1; }
.board-figures span { font-size: 13px; color: #5b6673; }

.board-table { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e3e8ee; border-radius: 12px; overflow: hidden; }
.board-table th, .board-table td { padding: 11px 14px; text-align: left;
  border-bottom: 1px solid #eef2f6; }
.board-table th { font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em; color: #5b6673; background: #f7f9fb; }
.board-table tr:last-child td { border-bottom: 0; }
/* Un groupe fermé ou une inscription terminée reste LISIBLE, seulement plus
   discret : l'historique appartient au centre, on ne le raye pas. */
.board-table tr.closed td { color: #8a93a0; }
.board-table code { font-family: ui-monospace, monospace; font-size: 13px; }
.board-table .ok { color: #1a7f4b; font-weight: 600; }
.board-table .bad { color: #b3261e; font-weight: 600; }
.board .empty { padding: 28px; text-align: center; color: #5b6673;
  background: #f7f9fb; border-radius: 12px; }

/* La barre de gauche du tableau de bord -------------------------------------
   Demandée par l'auteur après avoir vu la première version : « chaque membre
   enregistré doit avoir accès à la navigation de gauche, c'est juste qu'on va
   retirer des liens en fonction du profil. »

   La forme est celle de la console ; la mécanique est l'inverse. Les entrées
   viennent de dashboard/nav.py, où chacune porte sa condition, et rien ne
   s'affiche qui n'y soit écrit. */
.board-shell {
  display: grid;
  gap: 28px;
  grid-template-columns: 210px minmax(0, 1fr);
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  align-items: start;
}
.board-nav { position: sticky; top: 20px; }
.board-nav-title {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a93a0;
}
.board-nav-title:first-child { margin-top: 0; }
.board-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.board-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #1f2933;
  text-decoration: none;
}
.board-nav a:hover { background: #eef2f6; }
.board-nav a[aria-current="page"] { background: #e7effb; color: #1c4fa1; font-weight: 600; }

/* Le contenu reprend la largeur : la barre porte déjà la marge. */
.board-main .board { max-width: none; margin: 0; padding: 0; }

@media (max-width: 760px) {
  /* Au téléphone la barre passe au-dessus, en ligne : une colonne de liens
     sur un écran étroit coûterait tout l'écran avant le contenu. */
  .board-shell { grid-template-columns: 1fr; gap: 16px; }
  .board-nav { position: static; }
  .board-nav ul { grid-auto-flow: column; justify-content: start; gap: 6px;
    overflow-x: auto; }
}

/* Les messages, et le formulaire du tableau de bord -------------------------
   Le mot de passe engendré passe par un message : il doit être lisible du
   premier coup et ne s'affichera plus. */
.flash { list-style: none; max-width: 1240px; margin: 12px auto 0; padding: 0 20px;
  display: grid; gap: 8px; }
.flash li { padding: 12px 16px; border-radius: 10px; font-size: 15px;
  background: #e8f5ee; border: 1px solid #b6e0c8; color: #14532d; }
.flash .flash-error { background: #fdecea; border-color: #f4c7c3; color: #7f1d1d; }

.board-form { max-width: 460px; }
.board-form p { margin: 0 0 14px; }
.board-form label { display: block; margin-bottom: 4px; font-size: 14px; color: #5b6673; }
.board-form input[type="text"], .board-form input[type="date"], .board-form select {
  width: 100%; font: inherit; padding: 9px 11px;
  border: 1px solid #d7dde5; border-radius: 8px; }
.board-form .helptext { display: block; margin-top: 4px; font-size: 13px; color: #8a93a0; }
.board-form ul.errorlist { margin: 0 0 6px; padding-left: 18px; color: #b3261e; font-size: 14px; }

/* La fiche d'une tentative --------------------------------------------------
   Le verdict d'abord et en grand : c'est la question à laquelle un formateur
   veut une réponse avant de lire le reste. */
.verdict-band { margin: 18px 0; padding: 14px 18px; border-radius: 10px;
  font-size: 17px; font-weight: 600; }
.verdict-ok { color: #14532d; background: #e8f5ee; border: 1px solid #b6e0c8; }
.verdict-bad { color: #7f1d1d; background: #fdecea; border: 1px solid #f4c7c3; }
.verdict-half { color: #854d0e; background: #fef6e0; border: 1px solid #f0d9a0; }

.attempt-detail { display: grid; grid-template-columns: 220px 1fr; gap: 0;
  margin: 0 0 28px; background: #fff; border: 1px solid #e3e8ee;
  border-radius: 12px; overflow: hidden; }
.attempt-detail dt, .attempt-detail dd { margin: 0; padding: 11px 16px;
  border-bottom: 1px solid #eef2f6; }
.attempt-detail dt { color: #5b6673; font-size: 14px; background: #f7f9fb; }
.attempt-detail dt:last-of-type, .attempt-detail dd:last-of-type { border-bottom: 0; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 24px; padding: 0; }
.chips li { padding: 5px 11px; font-size: 14px; background: #eef2f6;
  border-radius: 999px; font-family: ui-monospace, monospace; }


/* La marque : le symbole et le mot, alignés sur la ligne de base optique.
   Le logo est carré ; lui donner la hauteur du texte le ferait paraître plus
   petit que lui, d'où les deux pixels de plus. */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand img { display: block; flex: none; }