/* ai.20h.com — feuille de style du site public.
   Servie telle quelle, sans compilation : une dépendance de build de moins,
   et un fichier qu'on peut corriger directement sur le serveur en cas
   d'urgence. Aucune police externe, aucun script : la page n'a besoin de
   rien d'autre que d'elle-même. */

/* --- jetons ----------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --fond: #f7f7f5;
  --surface: #ffffff;
  --encart: #eeeeea;
  --texte: #1c1e22;
  --texte-doux: #5b6270;
  --bordure: #dcdedb;
  --bordure-forte: #c4c7c3;
  --accent: #1f56b5;
  --accent-teinte: rgba(31, 86, 181, 0.09);
  --accent-contraste: #ffffff;
  --alerte: #b3261e;
  --hausse: #176a33;
  --hausse-teinte: rgba(23, 106, 51, 0.12);
  --baisse: #a12a20;
  --baisse-teinte: rgba(161, 42, 32, 0.12);

  --ombre: 0 1px 2px rgba(20, 24, 32, 0.05), 0 6px 18px rgba(20, 24, 32, 0.05);
  --rayon: 12px;

  /* Deux gabarits de largeur : la mesure de lecture (≈ 70 caractères à
     17 px) pour les billets, une largeur plus généreuse pour les pages qui
     alignent des tableaux et des listes. L'en-tête et le pied prennent
     toujours la plus large, pour que la navigation ne saute pas d'une page
     à l'autre. */
  --mesure: 42rem;
  --largeur: 62rem;
  --gouttiere: 1rem;

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
  --police-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                 "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121417;
    --surface: #1a1d22;
    --encart: #22262d;
    --texte: #e6e8eb;
    --texte-doux: #a0a7b2;
    --bordure: #2b3038;
    --bordure-forte: #3a404a;
    --accent: #8fb5f5;
    --accent-teinte: rgba(143, 181, 245, 0.13);
    --accent-contraste: #0f1a2e;
    --alerte: #ff8a80;
    --hausse: #6fd68f;
    --hausse-teinte: rgba(111, 214, 143, 0.15);
    --baisse: #ff9d92;
    --baisse-teinte: rgba(255, 157, 146, 0.15);
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
  }
}

/* --- base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.6 var(--police);
  font-feature-settings: "kern", "liga";
  /* ⚠ GARDE CONTRE LE DÉBORDEMENT HORIZONTAL, sur TOUTES les pages. Le rendu
     markdown active `Linkify` : une URL nue devient un lien dont le TEXTE est
     l'URL — une chaîne de 80 caractères sans espace. Sur un téléphone, un seul
     mot plus large que l'écran suffit à élargir la page entière, et le
     défilement vertical se met alors à partir de côté.
     `break-word` et non `anywhere` : il ne coupe qu'en dernier recours,
     laissant les césures normales opérer d'abord. */
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.012em; font-weight: 650; }
h1 { font-size: 2rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 0.7rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }

code, pre, kbd { font-family: var(--police-mono); }

img, svg, video { max-width: 100%; height: auto; }

main {
  flex: 1;
  width: 100%;
  max-width: var(--mesure);
  margin: 0 auto;
  padding: 1.5rem var(--gouttiere) 4rem;
}

/* Les pages qui alignent des colonnes ou des listes denses s'élargissent ;
   celles qui se lisent gardent la mesure. Le gabarit est posé en classe
   sur <body> par le générateur. */
.page-flux main,
.page-valeurs main,
.page-gitpulse main,
.page-accueil main,
.page-liste main { max-width: 52rem; }

/* --- en-tête ---------------------------------------------------------- */

.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

.entete-int {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0.9rem var(--gouttiere);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.marque:hover { color: var(--accent); }
.puce {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-teinte);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0 -0.55rem;
}
.nav a {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--texte); background: var(--encart); }
/* L'entrée courante : fond teinté et texte accentué. `aria-current` est le
   marqueur, il n'y a pas de classe « actif » à tenir en double. */
.nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-teinte);
  font-weight: 600;
}

/* --- pied ------------------------------------------------------------- */

.pied {
  margin-top: auto;
  border-top: 1px solid var(--bordure);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--texte-doux);
}
.pied-int {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.6rem var(--gouttiere) 2.4rem;
}
.pied-marque { margin: 0 0 0.8rem; color: var(--texte); }
.pied-marque a { color: var(--texte-doux); margin-left: 0.15rem; }
.pied .mention { margin: 0; max-width: 60rem; }
.pied strong { color: var(--texte); font-weight: 600; }

/* --- éléments communs -------------------------------------------------- */

.tete-page { margin: 0.5rem 0 1.8rem; }
.tete-page h1 { margin-bottom: 0.3rem; }
.chapo {
  color: var(--texte-doux);
  font-size: 1.08rem;
  line-height: 1.55;
  margin: 0;
}

.tag {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--encart);
  border: 1px solid transparent;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}
.tag:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-teinte); }
.compte { opacity: 0.65; font-variant-numeric: tabular-nums; margin-left: 0.15rem; }

.nuage-tags {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.nuage-tags .tag { font-size: 0.88rem; padding: 0.25rem 0.8rem; }

.meta {
  font-size: 0.82rem;
  color: var(--texte-doux);
  margin: 0;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}
.meta time { font-variant-numeric: tabular-nums; }

.petit { font-size: 0.85rem; }
.doux { color: var(--texte-doux); }
.vide { color: var(--texte-doux); font-style: italic; padding: 1.5rem 0; }

/* Mention de régime en bas de page : un filet, pas un aplat, pour rester
   lisible sans concurrencer le contenu. */
main > .mention {
  margin: 3rem 0 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--bordure-forte);
  background: var(--surface);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: 0.88rem;
  color: var(--texte-doux);
}
main > .mention strong { color: var(--texte); }

.message-perime {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--alerte);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 0.8rem 1rem;
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
}

/* Un tableau trop large défile dans son cadre, jamais la page. */
.table-defilante { overflow-x: auto; margin: 1rem 0 1.6rem; }
.table-defilante table { margin: 0; }

/* --- accueil et listes de billets ------------------------------------- */

.tete-accueil { margin-bottom: 2.2rem; }
.titre-accueil { font-size: 2.3rem; }

.liste-billets {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: 1rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.2rem 1.4rem 1.3rem;
  box-shadow: var(--ombre);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.carte:hover { border-color: var(--bordure-forte); }
.carte h2 { font-size: 1.32rem; margin: 0.5rem 0 0.45rem; line-height: 1.3; }
.carte h2 a { color: var(--texte); text-decoration: none; }
.carte h2 a:hover { color: var(--accent); text-decoration: underline; }
.resume { margin: 0; color: var(--texte-doux); font-size: 0.97rem; }

/* --- billet ----------------------------------------------------------- */

.tete-billet { margin: 0.5rem 0 2rem; }
.tete-billet h1 { font-size: 2.15rem; margin: 0.6rem 0 0.7rem; }
.tete-billet .chapo { font-size: 1.15rem; }

.corps { font-size: 1.02rem; }
.corps > :first-child { margin-top: 0; }
.corps h2 { font-size: 1.35rem; margin: 2.2rem 0 0.7rem; }
.corps h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.corps p { margin: 0 0 1.15rem; }
.corps ul, .corps ol { margin: 0 0 1.15rem; padding-left: 1.5rem; }
.corps li { margin-bottom: 0.4rem; }
.corps li > p { margin-bottom: 0.4rem; }
.corps hr { border: 0; border-top: 1px solid var(--bordure); margin: 2rem 0; }
.corps img { border-radius: 8px; }

.corps blockquote {
  margin: 1.4rem 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--texte-doux);
}
.corps blockquote p:last-child { margin-bottom: 0; }

.corps code {
  font-size: 0.86em;
  background: var(--encart);
  padding: 0.12rem 0.35rem;
  border-radius: 5px;
}
.corps pre {
  background: var(--encart);
  border: 1px solid var(--bordure);
  padding: 1rem 1.1rem;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.55;
}
.corps pre code { background: none; padding: 0; font-size: inherit; }

.corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
  display: block;
  overflow-x: auto;
}
.corps th, .corps td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  vertical-align: top;
}
.corps th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texte-doux);
}
.corps tbody tr:nth-child(even) td { background: var(--surface); }

.corps .footnotes { font-size: 0.88rem; color: var(--texte-doux); margin-top: 2rem; }

/* --- sources et transparence ------------------------------------------ */

.sources {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bordure);
}
.sources h2 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texte-doux); margin: 0 0 0.9rem;
}
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li { margin-bottom: 0.7rem; font-size: 0.94rem; line-height: 1.45; }
.origine { color: var(--texte-doux); font-size: 0.82rem; display: block; margin-top: 0.1rem; }

/* La mention de transparence DOIT se voir : bandeau teinté, filet accentué
   et un intitulé posé par la feuille de style. C'est le contrat du site
   envers le lecteur, pas une note de bas de page. */
.transparence {
  margin-top: 2.2rem;
  padding: 1rem 1.2rem 1.05rem;
  background: var(--accent-teinte);
  border: 1px solid transparent;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: 0.9rem;
  color: var(--texte);
}
.transparence::before {
  content: "Transparence";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.transparence p { margin: 0; }
.transparence .petit { color: var(--texte-doux); }

/* --- à propos --------------------------------------------------------- */

.apropos h2 { margin-top: 2.4rem; }
.apropos .etapes { padding-left: 1.4rem; }
.apropos .etapes li { margin-bottom: 0.9rem; }
.apropos .etapes li::marker { color: var(--accent); font-weight: 700; }

/* Tableau des régimes de confiance : l'information la plus importante du
   site pour un lecteur, elle dit ce qu'il peut croire de chaque page. */
table.regimes {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  font-size: 0.92rem;
}
table.regimes th, table.regimes td {
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--bordure);
  text-align: left; vertical-align: top;
}
table.regimes th {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texte-doux); background: var(--encart);
}
table.regimes tbody tr:last-child td { border-bottom: none; }
table.regimes tbody tr:nth-child(even) td { background: var(--fond); }

/* --- veille (/veille/) ------------------------------------------------- */

.digest {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.3rem 1.5rem 1.1rem;
  margin: 0 0 1.4rem;
  box-shadow: var(--ombre);
}
.digest .jour { margin-top: 0; }
.corps-digest { font-size: 0.98rem; }
.corps-digest h2 { font-size: 1.12rem; margin: 1.5rem 0 0.5rem; }
.corps-digest h3 { font-size: 1rem; }
.digest .petit { margin: 1rem 0 0; }

/* --- agrégateur (/flux/) ---------------------------------------------- */
/* Densité assumée : une page d'agrégation se parcourt à l'œil, elle ne se lit
   pas. Titres serrés, métadonnées discrètes, et un repère de date par jour —
   sans lui, la liste devient illisible dès la cinquantième ligne. */

.jour {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 0.4rem;
  margin: 2.2rem 0 0.7rem;
}
.jour time { color: inherit; }

.jour-flux { margin: 0; }

.liste-flux { list-style: none; padding: 0; margin: 0; }

.liste-flux li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--bordure);
}
.liste-flux li:last-child { border-bottom: none; }

.titre-flux {
  flex: 1 1 22rem;
  /* ⚠ `min-width: 0` EST OBLIGATOIRE, PAS COSMÉTIQUE. Un élément de flex a
     `min-width: auto` par défaut : il refuse de descendre sous la largeur
     min-content de son contenu, quel que soit son `flex-shrink`. Un titre
     contenant un mot long dépasse alors l'écran, et c'est toute la PAGE qui
     devient plus large que la fenêtre — le défilement vertical se met à
     partir de côté. */
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
  color: var(--texte);
  line-height: 1.45;
}
.titre-flux:hover { color: var(--accent); text-decoration: underline; }

.meta-flux {
  font-size: 0.76rem;
  color: var(--texte-doux);
  display: flex;
  /* ⚠ LA CAUSE DU DÉBORDEMENT SUR MOBILE, MESURÉE LE 2026-08-31. Cette ligne
     était en `white-space: nowrap` : un lien relayé par quatre communautés
     produit « 3× Embrace the Red · Hacker News (100+) · Hacker News (best) ·
     Lobsters · 07:49 », soit ~560 px insécables pour ~352 px d'écran utile
     sur un téléphone. La page entière devenait plus large que la fenêtre, et
     le contenu partait de côté au défilement.
     Le `nowrap` reste sur chaque pastille — c'est là qu'il sert, pour ne pas
     couper « Hacker News (100+) » en deux — mais la LIGNE, elle, se replie. */
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 0.3rem 0.45rem;
}

.meta-flux .source,
.meta-flux .corrobore,
.meta-flux time { white-space: nowrap; }

.meta-flux .source {
  background: var(--encart);
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
}
.meta-flux time { font-variant-numeric: tabular-nums; }

/* Corroboration : le seul élément coloré de la liste, parce que c'est la seule
   information qu'on ajoute réellement au flux brut. */
.corrobore {
  background: var(--accent);
  color: var(--accent-contraste);
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.top-repris { margin: 0 0 1rem; }
.liste-top { padding-left: 1.6rem; counter-reset: top; }
.liste-top li { display: list-item; }
.liste-top li::marker { color: var(--texte-doux); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.liste-top .titre-flux { flex: none; font-weight: 500; }

/* « Ce qui monte » : une carte par sujet. Le nom en tête, le comptage qui
   justifie sa présence, les termes en petit, puis les liens — la carte se
   lit de haut en bas comme une fiche, et la grille les met côte à côte dès
   que la largeur le permet. */
.sujets { margin: 0 0 1rem; }
.grille-sujets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.sujet {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1rem 1.1rem 0.9rem;
  box-shadow: var(--ombre);
  min-width: 0;
}
.nom-sujet { font-size: 1.15rem; margin: 0 0 0.15rem; overflow-wrap: anywhere; }
.compte-sujet {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.termes { margin: 0 0 0.7rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.terme {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  color: var(--texte-doux);
  background: var(--encart);
  border-radius: 5px;
  padding: 0.05rem 0.4rem;
  overflow-wrap: anywhere;
}
.liste-sujet { list-style: none; padding: 0; margin: 0; }
.liste-sujet li {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--bordure);
  min-width: 0;
}
.liste-sujet .titre-flux { flex: none; font-size: 0.92rem; }
.liste-sujet .meta-flux { font-size: 0.72rem; }

/* Les dépôts liés au sujet : une ligne en pied de carte, dans le ton des
   métadonnées — c'est un complément aux liens, pas un second classement.
   Le gain reprend la couleur de /git-pulse/, les variables suivent le mode
   sombre d'elles-mêmes. */
.depots-sujet {
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.78rem;
  color: var(--texte-doux);
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem;
  font-variant-numeric: tabular-nums;
}
.depots-sujet .etiquette { font-weight: 600; }
.depot-sujet { display: inline-flex; flex-wrap: wrap; gap: 0 0.35rem; min-width: 0; }
.depot-sujet a { font-family: var(--police-mono); font-size: 0.75rem; overflow-wrap: anywhere; }
.depot-sujet .etoiles { white-space: nowrap; }
.depot-sujet .gain { white-space: nowrap; font-weight: 600; color: var(--hausse); }

/* --- cours (/valeurs/) ------------------------------------------------- */

.place { margin: 0 0 2.4rem; }
.place h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }

table.cours {
  width: 100%;
  border-collapse: collapse;
  /* ⚠ FIXE, ET NON `auto`. En `auto`, chaque tableau se dimensionne sur son
     propre contenu : les colonnes ne tombaient pas au même endroit d'une
     place à l'autre, et deux tableaux censés se lire ensemble paraissaient
     désalignés. Les largeurs viennent de <colgroup>. */
  table-layout: fixed;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
col.c-valeur { width: auto; }
col.c-cours  { width: 9rem; }
col.c-var    { width: 7.5rem; }

table.cours th, table.cours td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.94rem;
  vertical-align: baseline;
}
table.cours th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--texte-doux); text-align: left;
  background: var(--encart);
  padding: 0.5rem 0.9rem;
}
table.cours tbody tr:last-child td { border-bottom: none; }
table.cours tbody tr:nth-child(even) td { background: var(--fond); }
table.cours tbody tr:hover td { background: var(--accent-teinte); }

/* Chiffres alignés colonne par colonne : sans `tabular-nums`, les glyphes ont
   des chasses différentes et les décimales ne se superposent plus. */
table.cours .num { text-align: right; font-variant-numeric: tabular-nums; }
table.cours .cours-val { font-weight: 600; }

.nom { font-weight: 500; }
.symbole {
  display: block;
  font-family: var(--police-mono);
  font-size: 0.68rem; letter-spacing: 0.03em;
  color: var(--texte-doux); margin-top: 0.1rem;
}
.devise { font-size: 0.7rem; color: var(--texte-doux); margin-left: 0.3rem; font-weight: 400; }

/* Un indice donne le contexte des valeurs qui le suivent : il ouvre sa place
   et se distingue par un filet, pas par un aplat qui alourdirait le tableau. */
table.cours tr.indice td {
  font-size: 1rem;
  border-bottom: 2px solid var(--bordure-forte);
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
table.cours tr.indice .nom { font-weight: 700; }

/* ⚠ Vert et rouge sont les seules couleurs sémantiques du site, et elles ne
   sont JAMAIS le seul porteur d'information : le signe + ou - reste dans le
   texte. Une pastille daltonienne-compatible se lit encore en niveaux de
   gris. */
.var {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--encart);
}
.hausse, .var.hausse { color: var(--hausse); }
.baisse, .var.baisse { color: var(--baisse); }
.var.hausse { background: var(--hausse-teinte); }
.var.baisse { background: var(--baisse-teinte); }

/* --- veille GitHub (/git-pulse/) -------------------------------------- */
/* Onglets sans JavaScript : deux boutons radio cachés, des étiquettes qui les
   ciblent, et le panneau frère du bouton coché qui s'affiche. Sans CSS, les
   deux sections restent visibles l'une sous l'autre avec leur titre — la page
   dégrade en liste, pas en page vide. */

.onglets > input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

.barre-onglets {
  display: inline-flex; gap: 0.25rem;
  padding: 0.25rem;
  background: var(--encart);
  border-radius: 10px;
  margin: 0.4rem 0 1.4rem;
}

.barre-onglets label {
  padding: 0.4rem 1rem;
  border-radius: 7px;
  color: var(--texte-doux);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}
.barre-onglets label:hover { color: var(--texte); }

/* Le focus clavier doit se voir : le bouton radio est invisible, c'est
   l'étiquette qui porte l'anneau. */
.onglets > input:focus-visible + input + .barre-onglets label:first-child,
.onglets > input + input:focus-visible + .barre-onglets label:last-child {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

#onglet-top:checked ~ .barre-onglets label[for="onglet-top"],
#onglet-suivre:checked ~ .barre-onglets label[for="onglet-suivre"] {
  color: var(--texte);
  background: var(--surface);
  box-shadow: var(--ombre);
  font-weight: 600;
}

.panneau { display: none; }
#onglet-top:checked ~ #panneau-top,
#onglet-suivre:checked ~ #panneau-suivre { display: block; }

/* Le titre de section double l'étiquette de l'onglet : il ne sert qu'aux
   lecteurs sans CSS et aux lecteurs d'écran. */
.onglets .titre-onglet { position: absolute; left: -10000px; }

.panneau > .petit { margin: 0 0 0.6rem; }

.liste-depots {
  padding-left: 0; margin: 0.6rem 0 0;
  list-style: none;
  counter-reset: depot;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.liste-depots > li {
  counter-increment: depot;
  position: relative;
  padding: 0.85rem 1.1rem 0.85rem 3.1rem;
  border-bottom: 1px solid var(--bordure);
  min-width: 0;
}
.liste-depots > li:nth-child(even) { background: var(--fond); }
.liste-depots > li:last-child { border-bottom: none; }
.liste-depots > li::before {
  content: counter(depot);
  position: absolute;
  left: 1.1rem; top: 0.95rem;
  width: 1.5rem;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
}

.ligne-depot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem;
  min-width: 0;
}
.nom-depot {
  font-weight: 600; text-decoration: none; color: var(--texte);
  overflow-wrap: anywhere; min-width: 0;
}
.nom-depot:hover { color: var(--accent); text-decoration: underline; }

.langage, .jeune {
  font-size: 0.72rem; border-radius: 999px; padding: 0.06rem 0.5rem;
  white-space: nowrap;
}
.langage { background: var(--encart); color: var(--texte-doux); }
.jeune { background: var(--accent); color: var(--accent-contraste); font-weight: 600; }

.desc-depot {
  margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--texte-doux);
  overflow-wrap: anywhere;
}

.meta-depot {
  margin: 0.35rem 0 0; font-size: 0.8rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem;
  font-variant-numeric: tabular-nums;
}
.meta-depot .gain { font-weight: 700; color: var(--hausse); }
.meta-depot .sep { color: var(--bordure-forte); }

/* Un dépôt publié sans verdict du classifieur : signalé par un filet
   discret, pas par un aplat — c'est l'état normal pendant quelques heures. */
.liste-depots > li.non-classe { box-shadow: inset 3px 0 0 var(--bordure-forte); }

/* --- petits écrans ------------------------------------------------------ */

@media (max-width: 40rem) {
  body { font-size: 16px; }
  h1 { font-size: 1.65rem; }
  .titre-accueil { font-size: 1.85rem; }
  .tete-billet h1 { font-size: 1.7rem; }
  .tete-billet .chapo, .chapo { font-size: 1.02rem; }

  main { padding-top: 1rem; }
  .entete-int { padding-top: 0.75rem; padding-bottom: 0.6rem; }
  .nav a { padding: 0.3rem 0.5rem; font-size: 0.88rem; }

  .carte { padding: 1rem 1.1rem 1.1rem; }
  .carte h2 { font-size: 1.15rem; }

  /* À cette largeur, un titre et ses pastilles ne cohabitent jamais sur une
     ligne : autant l'assumer plutôt que de laisser le flex arbitrer. */
  .titre-flux { flex-basis: 100%; }
  .liste-flux li { gap: 0.2rem; padding: 0.5rem 0; }

  .digest { padding: 1rem 1.1rem 0.9rem; }
  .liste-depots > li { padding-left: 2.6rem; }
  .liste-depots > li::before { left: 0.8rem; }

  /* Sous cette largeur, la colonne des cours étoufferait le nom de la valeur. */
  col.c-cours { width: 6.6rem; }
  col.c-var   { width: 5.4rem; }
  table.cours th, table.cours td { padding: 0.5rem 0.45rem; font-size: 0.86rem; }
  .var { padding: 0.1rem 0.35rem; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .entete, .pied, .nav { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; }
  a { color: inherit; }
}