/* ===================================================================
   OddScore — Thème éditorial des articles de blog (vitrine GEO/SEO).
   Porté depuis la maquette du ticket #929. TOUT est scopé sous
   `.os-content` : aucun débordement sur la nav/footer de l'app ni sur
   le reste du site (qui reste en thème sombre). Les fontes (Archivo,
   JetBrains Mono) et les resets sont déjà fournis par l'app.
   =================================================================== */

.os-content {
  --accent: #ccff00;
  --accent-deep: #5c7800; /* lime lisible comme texte sur fond clair */
  --dark: #0a0a0a;
  --dark-2: #141414;
  --bg: #fafaf6; /* ivoire chaud */
  --surface: #ffffff;
  --surface-2: #f2f2eb;
  --ink: #16170f; /* presque noir */
  --ink-soft: #56584a; /* texte secondaire */
  --ink-faint: #8c8e80; /* meta */
  --line: rgba(22, 23, 15, 0.12);
  --line-soft: rgba(22, 23, 15, 0.07);
  --os-maxw: 1180px;
  --os-read: 720px;

  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  scroll-behavior: smooth;
}

.os-content .mono { font-family: "JetBrains Mono", monospace; }
/* Gouttières horizontales alignées sur la landing (`px-10 max-md:px-5`).
   `padding-inline` (longhand) : les bandes hero/shell/ctaband partagent l'élément
   `.wrap` et ne posent QUE du vertical (`padding-block`), donc elles n'écrasent
   plus cette gouttière. */
.os-content .wrap { max-width: var(--os-maxw); margin: 0 auto; padding-inline: 40px; }
@media (max-width: 767px) { .os-content .wrap { padding-inline: 20px; } }

/* ---------- breadcrumb (bande sombre, raccord avec le header de l'app) ---------- */
.os-content .crumb-band { background: var(--dark); }
.os-content .crumb { padding: 16px 0 6px; }
.os-content .crumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0; padding: 0;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.45);
}
.os-content .crumb a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.os-content .crumb a:hover { color: var(--accent); }
.os-content .crumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: rgba(255, 255, 255, 0.3); }
.os-content .crumb li[aria-current] { color: #fff; }

/* ---------- HERO (sombre) ---------- */
.os-content .hero { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.os-content .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(54% 60% at 88% 6%, rgba(204, 255, 0, 0.12), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: radial-gradient(ellipse 100% 90% at 50% 20%, #000, transparent 88%);
}
.os-content .hero-inner { position: relative; padding-block: 30px 64px; }
.os-content .hero .eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 11px;
}
.os-content .hero .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.os-content .hero .byline {
  display: block; margin-top: 12px; font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: rgba(255, 255, 255, 0.6);
}
.os-content .hero .byline a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.os-content .hero .byline a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.os-content .hero .updated {
  display: block; margin-top: 6px; font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: rgba(255, 255, 255, 0.45);
}
.os-content .hero h1 {
  font-family: "Archivo"; font-weight: 900; letter-spacing: -0.035em; line-height: 1;
  font-size: clamp(38px, 5.4vw, 68px); margin-top: 22px; max-width: 20ch; text-wrap: balance;
}
.os-content .hero h1 .it { font-style: italic; color: var(--accent); }
.os-content .hero .standfirst {
  font-weight: 400; font-size: 16px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.78); margin-top: 22px; max-width: 62ch; text-wrap: pretty;
}
.os-content .hero .standfirst strong { color: #fff; }
.os-content .hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.os-content .btn-hero,
.os-content .btn-primary {
  background: var(--accent); color: #000; font-family: "Archivo", sans-serif; font-weight: 600; font-size: 15px;
  padding: 14px 22px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.2), 0 8px 32px rgba(204, 255, 0, 0.18); transition: transform 0.15s, box-shadow 0.15s;
}
.os-content .btn-hero:hover,
.os-content .btn-primary:hover {
  transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.3), 0 14px 44px rgba(204, 255, 0, 0.32);
}
.os-content .hero .reassure {
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.55);
}

/* ---------- shell + layout ---------- */
.os-content .shell { padding-block: 56px 40px; }
.os-content .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
/* `minmax(0, 1fr)`, pas `1fr` seul : sans le `0` explicite, l'item de grille
   garde sa largeur minimale par défaut (`min-width: auto`), qui se cale sur le
   contenu le plus large (une table) — la grille entière déborde alors du
   viewport, même sous un enfant `overflow-x: auto` (`.table-scroll`). */
@media (max-width: 1000px) { .os-content .layout { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- TOC ---------- */
/* Sticky porté par la cellule grid (`.toc-aside`), pas par `.toc` : son bloc
   conteneur est `.layout` (haut comme l'article), ce qui donne la course de
   scroll. `align-self: start` empêche l'étirement du grid item (sinon il
   remplit la rangée et n'a plus de place pour « coller »). */
/* `max-height` + `overflow-y` : un sommaire plus haut que la fenêtre reste
   entièrement atteignable (scroll interne) au lieu de couper ses derniers items. */
/* `--toc-top` doit dépasser le bord bas de la nav de l'app (sticky `top: 36px`,
   hauteur 68px → 104px) pour que le titre « Sommaire » ne soit pas recouvert. */
.os-content .toc-aside {
  --toc-top: 120px;
  position: sticky; top: var(--toc-top); align-self: start;
  max-height: calc(100vh - var(--toc-top) - 24px); overflow-y: auto; overscroll-behavior: contain;
}
.os-content .toc-h {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px;
}
.os-content .toc ol {
  list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--line); margin: 0; padding: 0;
}
.os-content .toc li { counter-increment: toc; }
.os-content .toc a {
  display: block; padding: 8px 0 8px 18px; margin-left: -1px;
  border-left: 2px solid transparent; text-decoration: none;
  font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.4;
  color: var(--ink-soft); transition: all 0.15s;
}
.os-content .toc a:hover { color: var(--ink); }
.os-content .toc a.active { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }
.os-content .toc a::before { content: counters(toc, ".", decimal-leading-zero) "  "; color: var(--ink-faint); }
@media (max-width: 1000px) {
  .os-content .toc-aside { display: none; }
}

/* ---------- article body ---------- */
.os-content .article { max-width: var(--os-read); }
.os-content .article > * + * { margin-top: 24px; }
.os-content .article h2 {
  font-family: "Archivo"; font-weight: 800; font-size: clamp(23px, 2.6vw, 29px);
  letter-spacing: -0.025em; line-height: 1.14; margin-top: 56px; scroll-margin-top: 92px; text-wrap: balance;
  counter-increment: h2c;
}
.os-content .article { counter-reset: h2c; }
.os-content .article h2::before {
  content: counter(h2c, decimal-leading-zero); font-family: "JetBrains Mono", monospace;
  font-size: 0.5em; font-weight: 700; color: var(--accent-deep); vertical-align: middle; margin-right: 12px;
}
.os-content .article h3 {
  font-family: "Archivo"; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; margin-top: 36px; line-height: 1.25;
}
.os-content .article p { color: var(--ink); }
/* answer-first : 1er paragraphe après un H2 = réponse citable, gras surligné */
.os-content .article h2 + p { font-size: 16px; line-height: 1.6; }
.os-content .article h2 + p strong { background: linear-gradient(transparent 62%, rgba(204, 255, 0, 0.55) 62%); padding: 0 2px; }
.os-content .article a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; transition: background 0.15s;
}
.os-content .article a:hover { background: rgba(204, 255, 0, 0.25); }
.os-content .article strong { font-weight: 700; }
.os-content .article ul, .os-content .article ol { padding-left: 26px; color: var(--ink); }
.os-content .article li { margin-top: 10px; }
.os-content .article li::marker { color: var(--accent-deep); }

/* ---------- TL;DR ---------- */
.os-content .tldr {
  background: var(--dark); color: #fff; border-radius: 18px; padding: 30px 32px; position: relative; overflow: hidden;
}
.os-content .tldr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 100% 0%, rgba(204, 255, 0, 0.14), transparent 65%);
}
.os-content .tldr .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 9px;
}
.os-content .tldr .lbl::before { content: "⚡"; }
.os-content .tldr p { font-size: 16px; line-height: 1.55; margin-top: 14px; color: rgba(255, 255, 255, 0.92); position: relative; }
.os-content .tldr p strong { color: #fff; }

/* ---------- define (En bref) ---------- */
.os-content .define {
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0;
  background: var(--surface-2); padding: 22px 26px;
}
.os-content .define .term { font-family: "Archivo"; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.os-content .define .term .tag {
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 6px;
}
.os-content .define p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-top: 8px; }

/* ---------- table (comparatifs, barèmes) ---------- */
/* Style partagé par toutes les tables d'article : celles générées par le rendu
   Markdown (GFM) et celles écrites en HTML brut à l'intérieur d'un `.define`
   (le renderer redcarpet ne traite pas les blocs Markdown imbriqués dans du HTML). */
.os-content .article table { width: 100%; border-collapse: collapse; }
.os-content .define table { margin-top: 12px; }
.os-content .article th {
  text-align: left; padding: 10px 16px; font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.os-content .article th:not(:first-child) { white-space: normal; }
.os-content .article td {
  padding: 12px 16px; font-size: 14px; line-height: 1.55;
  border-bottom: 1px solid var(--line-soft);
}
.os-content .article tr:last-child td { border-bottom: none; }
.os-content .article td:first-child { white-space: nowrap; vertical-align: top; font-weight: 600; }
/* Une table ne rétrécit jamais sous son contenu (colonnes figées par le texte) :
   sans wrapper dédié, un `overflow-x: auto` posé directement sur la `<table>` ne
   la contient pas — le navigateur laisse grandir la boîte à sa largeur intrinsèque
   et c'est toute la page qui déborde horizontalement. Le wrapper (bloc normal,
   largeur 100% de son parent par défaut) fournit la seule frontière de scroll. */
.os-content .table-scroll { overflow-x: auto; }

/* ---------- glossary (page /glossaire, #2096) ---------- */
.os-content .glossary-index {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
}
.os-content .glossary-index a {
  font-family: "JetBrains Mono", monospace; font-size: 12.5px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); text-decoration: none;
}
.os-content .glossary-index a:hover { border-color: var(--accent-deep); color: var(--ink); }
.os-content .glossary-list { display: flex; flex-direction: column; gap: 0; }
.os-content .glossary-entry {
  padding: 20px 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 96px;
}
.os-content .glossary-entry:target { background: rgba(204, 255, 0, 0.08); border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.os-content .glossary-entry dt {
  font-family: "Archivo"; font-weight: 800; font-size: 18px; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.os-content .glossary-anchor { color: var(--ink-soft); text-decoration: none; font-weight: 500; opacity: 0.5; }
.os-content .glossary-anchor:hover { opacity: 1; color: var(--accent-deep); }
.os-content .glossary-entry dd p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-top: 8px; }
.os-content .glossary-aka { font-size: 13px; font-style: italic; }
.os-content .glossary-see {
  display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
}

/* ---------- licensed operators (liste réglementaire bookmakers, #1826) ---------- */
/* Le H2 de section n'a pas de margin-bottom et `.define` n'a pas de margin-top
   par défaut (contrairement aux enfants directs de `.article`, espacés via
   `.article > * + *`) : sans cette règle, l'encadré du tableau colle au H2. */
.os-content .licensed-operators h2 + .define { margin-top: 24px; }
/* Avertissement « juridiction étrangère » (#1919). Volontairement distinct de
   `.verify-box` (neutre, informatif) : ambre + filet épais à gauche, pour être lu
   avant la première marque du tableau. Pas de rouge d'alerte — le message est
   réglementaire, pas une erreur d'application. */
.os-content .foreign-notice {
  background: rgba(180, 83, 9, 0.06); border: 1px solid rgba(180, 83, 9, 0.28);
  border-left: 4px solid #b45309; border-radius: 14px; padding: 20px 24px; margin-bottom: 20px;
}
.os-content .foreign-notice .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: #8a3f07;
}
.os-content .foreign-notice p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 10px 0 0; }
.os-content .foreign-notice .foreign-notice-link {
  margin-top: 14px; display: inline-flex; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
  color: var(--ink); text-decoration: underline; text-decoration-color: #b45309;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.os-content .foreign-notice .foreign-notice-link:hover { background: rgba(180, 83, 9, 0.12); }

/* Exception à l'avertissement, dans la cellule de la marque : même ambre que
   l'encadré, en creux (contour seul) pour ne pas concurrencer le badge OddScore
   plein, qui reste le seul signal en aplat de couleur du tableau. */
.os-content .home-licensed-badge {
  display: inline-flex; align-items: center; margin-top: 4px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #8a3f07;
  border: 1px solid rgba(180, 83, 9, 0.45); background: rgba(180, 83, 9, 0.06);
  padding: 3px 8px; border-radius: 999px;
}

.os-content .verify-box {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px;
}
.os-content .verify-box .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* `display: contents` sur le wrapper de chaque paire dt/dd : les deux éléments
   deviennent des enfants directs de la grille `dl`, alignés sur ses 2 colonnes,
   sans que le wrapper (qui ne sert qu'à la sémantique HTML) ne casse la grille. */
.os-content .verify-box dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 16px 0 0; }
.os-content .verify-box dl > div { display: contents; }
.os-content .verify-box dt { font-size: 14px; color: var(--ink-faint); margin: 0; }
.os-content .verify-box dd { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.os-content .verify-box .register-link {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.os-content .verify-box .register-link:hover { background: rgba(204, 255, 0, 0.25); }

.os-content .operators-table .brand-name { display: block; font-weight: 700; }
.os-content .operators-table .brand-domain {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 400;
  color: var(--ink-faint); margin-top: 2px;
}
/* Contredit `.article td:first-child { white-space: nowrap }` : la marque + le
   domaine doivent pouvoir passer à la ligne sur mobile plutôt que forcer la
   largeur du tableau. */
.os-content .operators-table td:first-child { white-space: normal; }

.os-content .status-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.os-content .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.os-content .status-badge.status-active { color: var(--accent-deep); }
.os-content .status-badge.status-active::before { background: var(--accent-deep); }

.os-content .oddscore-badge {
  display: inline-flex; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #000; background: var(--accent);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.os-content .oddscore-none { color: var(--ink-faint); }

/* ---------- note / callout ---------- */
.os-content .note {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px;
  font-size: 15px; color: var(--ink-soft);
}
.os-content .note strong { color: var(--ink); }

/* Bloc ``` (exemple annoté brut, ex. ligne/sélection/cote) : jamais utilisé
   avant le cluster « Marchés et types de paris » (#2050), qui active
   `fenced_code_blocks` côté MarkdownRenderer — largeur toujours scrollable dans
   sa propre boîte, jamais celle de la page (cf. .table-scroll). */
.os-content .article pre {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px;
  overflow-x: auto; font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.os-content .article pre code { font-family: inherit; }

/* ---------- callout (encart pédagogique typé, #2000) ---------- */
/* Base commune aux 7 types : label mono + corps. La couleur (`tone`) est portée
   par un modificateur `.callout-<tone>`, réutilisant les deux accents déjà posés
   ailleurs (`.define` lime, `.foreign-notice` ambre) plutôt qu'une palette dédiée. */
.os-content .callout {
  border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 0 14px 14px 0;
  background: var(--surface-2); padding: 20px 24px;
}
.os-content .callout-label {
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; display: block; margin-bottom: 8px;
}
.os-content .callout-body { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.os-content .callout-body p { margin: 0; }
.os-content .callout-body p + p { margin-top: 10px; }
.os-content .callout-body strong { color: var(--ink); }

.os-content .callout-accent { border-left-color: var(--accent); }
.os-content .callout-accent .callout-label { color: var(--accent-deep); }

.os-content .callout-neutral { border-left-color: var(--ink-faint); }
.os-content .callout-neutral .callout-label { color: var(--ink-faint); }

.os-content .callout-amber { border-left-color: #b45309; background: rgba(180, 83, 9, 0.06); }
.os-content .callout-amber .callout-label { color: #8a3f07; }

/* ---------- 3 questions ---------- */
.os-content .qrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 620px) { .os-content .qrow { grid-template-columns: 1fr; } }
.os-content .qcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.os-content .qcard .qn {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep);
}
.os-content .qcard .qt { font-family: "Archivo"; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; margin: 10px 0 8px; }
.os-content .qcard p { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- cluster ---------- */
.os-content .cluster { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 620px) { .os-content .cluster { grid-template-columns: 1fr; } }
.os-content .cluster-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  transition: background 0.15s, border-color 0.15s;
}
.os-content .cluster-card:hover { background: rgba(204, 255, 0, 0.10); border-color: var(--ink); }
.os-content .cluster-card .kx {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep);
}
.os-content .cluster-card h4 { font-family: "Archivo"; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-top: 12px; line-height: 1.18; }
.os-content .cluster-card p { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; }
.os-content .cluster-card .go {
  margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
}
.os-content .cluster-card .go::after { content: "→"; transition: transform 0.15s; }
.os-content .cluster-card:hover .go::after { transform: translateX(4px); }
/* cluster-card à l'intérieur du corps article : neutralise les styles `a` hérités
   (.article a ajoute underline + fond jaune au hover) et rétablit l'apparence card.
   On garde uniquement le fond jaune au hover (identité visuelle article). */
.os-content .article .cluster-card {
  text-decoration: none; color: inherit; background: var(--surface);
}
.os-content .article .cluster-card:hover {
  background: rgba(204, 255, 0, 0.10);
  transform: none; box-shadow: none; border-color: var(--ink);
}
.os-content .article .cluster-card h4 { text-decoration: none; color: var(--ink); }
.os-content .article .cluster-card p { text-decoration: none; color: var(--ink-soft); }
.os-content .article .cluster-card .go { color: var(--ink); text-decoration: none; }
.os-content .article .cluster-card:hover .go::after { transform: translateX(4px); }

/* carte « à venir » (article futur non publié) */
.os-content .cluster-card.is-pending { cursor: default; opacity: 0.62; }
.os-content .cluster-card.is-pending:hover { transform: none; border-color: var(--line); box-shadow: none; }
.os-content .cluster-card.is-pending .go::after { content: "·"; }

/* ---------- FAQ ---------- */
.os-content .faq { border-top: 1px solid var(--line); }
.os-content .faq details { border-bottom: 1px solid var(--line); }
.os-content .faq summary {
  cursor: pointer; list-style: none; padding: 22px 0; display: flex; gap: 18px; align-items: flex-start;
  font-family: "Archivo"; font-weight: 700; font-size: 16px; letter-spacing: -0.015em; color: var(--ink);
}
.os-content .faq summary::-webkit-details-marker { display: none; }
.os-content .faq summary .q { flex: 1; }
.os-content .faq summary .ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; transition: all 0.2s; position: relative;
}
.os-content .faq summary .ic::before, .os-content .faq summary .ic::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; }
.os-content .faq summary .ic::before { width: 12px; height: 2px; }
.os-content .faq summary .ic::after { width: 2px; height: 12px; transition: transform 0.2s; }
.os-content .faq details[open] summary .ic { background: var(--accent); border-color: var(--accent); }
.os-content .faq details[open] summary .ic::after { transform: rotate(90deg); opacity: 0; }
.os-content .faq .a { padding: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.os-content .faq .a p + p { margin-top: 14px; }

/* ---------- sources / méthode ---------- */
.os-content .sources { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px; }
.os-content .sources .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.os-content .sources p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; }
.os-content .method { counter-reset: m; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; list-style: none; padding: 0; }
.os-content .method li { counter-increment: m; display: flex; gap: 16px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0; }
.os-content .method li::before {
  content: counter(m); flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent); color: #000; display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 14px;
}

/* Source hébergée par un opérateur de paris : citée, jamais liée (#1939). Le
   domaine remplace le lien pour que la provenance reste vérifiable à l'œil. */
.os-content .source-operator { color: var(--ink-soft); }
.os-content .source-domain {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--ink-faint); margin-top: 2px;
}

/* ---------- resources index ---------- */
.os-content .resources-shell { padding-block: 56px 80px; }
.os-content .resources-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .os-content .resources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .os-content .resources-grid { grid-template-columns: 1fr; } }

/* Un cluster = un pilier + ses pages satellites, regroupés visuellement dans un
   même bloc (fond teinté) pour que la hiérarchie éditoriale se voie d'un coup
   d'œil, plutôt qu'une grille plate mélangeant piliers et satellites. */
.os-content .resources-cluster-title {
  display: flex; align-items: center; gap: 16px;
  font-family: "Archivo"; font-weight: 900; font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -0.02em; color: var(--ink);
  margin-top: 56px; margin-bottom: 20px;
}
.os-content .resources-cluster-title::before { content: ""; width: 40px; height: 3px; background: var(--accent-deep); flex-shrink: 0; }
.os-content .resources-cluster-title:first-child { margin-top: 0; }
.os-content .resources-cluster {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 32px;
}
.os-content .resources-pillar-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px;
  transition: background 0.15s, border-color 0.15s;
}
.os-content .resources-pillar-card:hover { background: rgba(204, 255, 0, 0.10); border-color: var(--ink); }
.os-content .resources-pillar-card .kx {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #000; background: var(--accent); display: inline-block; padding: 3px 10px; border-radius: 999px;
}
.os-content .resources-pillar-card h3 { font-family: "Archivo"; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; margin-top: 14px; line-height: 1.18; }
.os-content .resources-pillar-card p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; max-width: 640px; }
.os-content .resources-pillar-card .go {
  margin-top: 18px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
}
.os-content .resources-pillar-card .go::after { content: "→"; transition: transform 0.15s; }
.os-content .resources-pillar-card:hover .go::after { transform: translateX(4px); }
.os-content .resources-satellites-heading {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 26px;
}
.os-content .resources-cluster .resources-grid { margin-top: 12px; }
@media (max-width: 620px) {
  .os-content .resources-cluster { padding: 20px; border-radius: 16px; }
  .os-content .resources-pillar-card { padding: 20px; }
}

/* ---------- OddScore Academy (/ressources, #2041) ----------
   Traduit du standalone fourni au ticket (mêmes tokens, mêmes proportions) :
   bande de parcours en 6 colonnes, choix du niveau, recherche/chips, rail
   sticky, en-tête de chapitre au grand numéro fantôme, carte pilier à filet
   d'accent, guides en liste numérotée à deux colonnes (pas des cards). */
.os-content .academy-hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.os-content .academy-btn {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  padding: 14px 24px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
}
.os-content .academy-btn-primary { background: var(--accent); color: #0a0a0a; transition: transform 0.15s; }
.os-content .academy-btn-primary:hover { color: #0a0a0a; transform: translateY(-1px); }
.os-content .academy-btn-secondary { border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; }
.os-content .academy-btn-secondary:hover { color: #fff; border-color: #fff; }
.os-content .academy-hero-stats {
  margin-top: 44px; display: flex; flex-wrap: wrap; gap: 0 48px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 22px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: rgba(255, 255, 255, 0.55);
}
.os-content .academy-hero-stats b { color: #fff; font-weight: 700; }

.os-content .academy-strip { background: var(--surface-2); border-bottom: 1px solid var(--line); padding-block: 52px 56px; }
.os-content .academy-strip h2 { font-family: "Archivo"; font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.03em; }
.os-content .academy-strip p { margin-top: 12px; color: var(--ink-soft); max-width: 66ch; font-size: 16px; }
/* Nombre de colonnes = nombre de chapitres (`--academy-flow-cols`, posée en
   style inline depuis la vue) : la grille reste sur une seule rangée quel que
   soit le nombre de chapitres, sans jamais recoder une constante ici. Un 8e
   chapitre n'aura donc plus jamais à faire l'objet d'un correctif CSS séparé —
   fallback à 6 si la variable n'est pas posée. */
.os-content .academy-flow {
  margin-top: 34px; display: grid; grid-template-columns: repeat(var(--academy-flow-cols, 6), 1fr); gap: 0; border-top: 1px solid var(--line);
}
/* Le filet vertical appartient à la colonne de gauche (`border-right`) : sans
   `padding-left`, le texte de la colonne suivante vient coller à ce filet. Seule
   la première colonne reste à ras du bord pour s'aligner sur le h2 au-dessus. */
.os-content .academy-flow a { padding: 22px 22px 24px; border-right: 1px solid var(--line); display: block; }
/* `:first-child` suffit désormais : le nombre de colonnes égalant le nombre
   d'items, il n'existe plus qu'une seule rangée sur ce breakpoint — jamais de
   second item de rangée à réaligner sur le bord (#2055). */
.os-content .academy-flow a:first-child { padding-left: 0; }
.os-content .academy-flow a:last-child { border-right: none; }
.os-content .academy-flow a:hover .academy-flow-title { color: var(--accent-deep); }
.os-content .academy-flow-number { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.os-content .academy-flow a:hover .academy-flow-number { color: var(--ink); }
.os-content .academy-flow-title { font-family: "Archivo"; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; margin-top: 10px; line-height: 1.2; }
.os-content .academy-flow-meta { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }
@media (max-width: 900px) {
  .os-content .academy-flow { grid-template-columns: 1fr 1fr; }
  .os-content .academy-flow a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 18px 20px; }
  /* 2 colonnes : ce sont les items impairs qui ouvrent une rangée à gauche. */
  .os-content .academy-flow a:nth-child(odd) { padding-left: 0; }
  /* `:last-child` en plus de `nth-child(2n)` : sur un total impair, le dernier
     item est seul dans sa rangée (position impaire, colonne de gauche) et
     garderait sinon un filet droit sans voisin (#2055). */
  .os-content .academy-flow a:nth-child(2n),
  .os-content .academy-flow a:last-child { border-right: none; }
}
@media (max-width: 520px) {
  .os-content .academy-flow { grid-template-columns: 1fr; }
  .os-content .academy-flow a { border-right: none; padding-left: 0; }
}

.os-content .academy-levels { padding-block: 56px 8px; }
.os-content .academy-levels h2 { font-family: "Archivo"; font-weight: 800; font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -0.03em; }
.os-content .academy-level-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .os-content .academy-level-grid { grid-template-columns: 1fr; gap: 0; } }
.os-content .academy-level { display: block; border-top: 2px solid var(--ink); padding: 20px 0 24px; }
@media (max-width: 860px) {
  .os-content .academy-level { border-top: 1px solid var(--line); }
  .os-content .academy-level:first-child { border-top: 2px solid var(--ink); }
}
.os-content .academy-level h3 { font-family: "Archivo"; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.os-content .academy-level p { color: var(--ink-soft); font-size: 15px; margin-top: 8px; }
.os-content .academy-level-go {
  margin-top: 14px; display: inline-flex; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700;
}
.os-content .academy-level-go::after { content: "→"; transition: transform 0.15s; }
.os-content .academy-level:hover .academy-level-go::after { transform: translateX(4px); }

.os-content .academy-search { padding-block: 44px 10px; }
.os-content .academy-search h2 { font-family: "Archivo"; font-weight: 800; font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -0.03em; }
.os-content .academy-searchbox {
  margin-top: 20px; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 20px; max-width: 760px;
}
.os-content .academy-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.os-content .academy-search-icon { width: 16px; height: 16px; border: 1.6px solid var(--ink-faint); border-radius: 50%; position: relative; flex-shrink: 0; }
.os-content .academy-search-icon::after {
  content: ""; position: absolute; width: 1.6px; height: 7px; background: var(--ink-faint); right: -3px; bottom: -4px; transform: rotate(-45deg);
}
.os-content .academy-searchbox input {
  flex: 1; border: 0; outline: 0; background: none; font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--ink);
}
.os-content .academy-searchbox input::placeholder { color: var(--ink-faint); }
.os-content .academy-searchbox:focus-within { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.os-content .academy-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 9px; }
.os-content .academy-chips .chip {
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-soft); border: 1px solid var(--line);
  background: var(--surface); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.os-content .academy-chips .chip:hover { border-color: var(--ink); color: var(--ink); }
.os-content .academy-chips .chip.chip-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.os-content .academy-empty { margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--ink-faint); }

.os-content .academy-shell { padding-block: 20px 40px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 60px; align-items: start; }
@media (max-width: 1040px) { .os-content .academy-shell { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.os-content .academy-rail { position: sticky; top: 100px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; padding-top: 60px; }
.os-content .academy-rail-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; }
.os-content .academy-rail ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.os-content .academy-rail a {
  display: flex; gap: 10px; padding: 8px 0 8px 12px; color: var(--ink-faint); border-left: 2px solid transparent; transition: 0.15s;
}
.os-content .academy-rail a:hover { color: var(--ink); }
.os-content .academy-rail a.active { color: var(--ink); border-left-color: var(--accent); font-weight: 700; }
.os-content .academy-rail a span { opacity: 0.7; font-size: 11.5px; }
@media (max-width: 1040px) { .os-content .academy-rail { display: none; } }
/* `--pinned-banners-height` (défaut 37px) + nav app `h-[68px]` (`pages/_pages_nav`)
   : même mécanique que `.toc-aside`/`--toc-top` plus haut dans ce fichier — sans
   ça, le rail mobile collait à une hauteur figée qui ne correspond ni au
   bandeau jeu responsable (variable) ni à la nav, et se faisait recouvrir. */
.os-content .academy-mobrail { display: none; }
@media (max-width: 1040px) {
  .os-content .academy-mobrail {
    /* z-index sous celui de la nav de l'app (`z-50`) : à hauteurs de bandeaux
       égales les deux ne se chevauchent pas, mais le bandeau épinglé est mesuré
       à l'exécution — si sa hauteur change d'un pixel le temps d'une frame, la
       nav doit rester au-dessus, pas ce rail (qui vient après elle dans le DOM). */
    display: block; position: sticky; top: calc(var(--pinned-banners-height, 37px) + 69px); z-index: 40;
    background: rgba(250, 250, 246, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); margin-top: 24px;
    /* Place pour la ligne du chapitre courant, posée en absolu sous la rangée. */
    padding-bottom: 30px;
  }
  /* `flex-wrap` plutôt qu'un scroll horizontal : les 6 numéros tiennent dans la
     largeur d'un téléphone, et sur un écran très étroit ils passent à la ligne
     au lieu de cacher les derniers chapitres derrière un scroll latéral.
     (Un `overflow-x` ici clipperait en plus le libellé positionné en absolu.) */
  .os-content .academy-mobrail ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 0;
    font-family: "JetBrains Mono", monospace; font-size: 12px;
  }
  .os-content .academy-mobrail a {
    display: block; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 13px; color: var(--ink-soft); background: var(--surface);
  }
  .os-content .academy-mobrail a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
  /* Masquage visuel, pas `display: none` : le nom du chapitre doit rester
     annoncé par un lecteur d'écran sur chacun des six liens, qui sinon ne
     s'énoncent que « 01 », « 02 »… */
  .os-content .academy-mobrail .lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .os-content .academy-mobrail a.active .lbl {
    width: auto; height: auto; clip-path: none; left: 20px; right: 20px; bottom: 8px;
    font-family: "Archivo", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: -0.01em;
    color: var(--ink); text-overflow: ellipsis;
  }
}

.os-content .academy-chapter { padding-top: 60px; padding-bottom: 8px; }
.os-content .academy-chapter + .academy-chapter { border-top: 1px solid var(--line); margin-top: 72px; }
/* Ancres de chapitre (#ch-01…) : `.public-scroll-offset` pose déjà, sur `<html>`,
   un `scroll-padding-top` qui dégage les bandeaux épinglés et la nav — inutile de
   le redire ici, scroll-padding et scroll-margin s'ADDITIONNENT. Seule la hauteur
   du rail mobile lui échappe (il n'existe que sous 1040px), d'où ce complément. */
@media (max-width: 1040px) {
  .os-content .academy-chapter { scroll-margin-top: 80px; }
}
.os-content .academy-chapter-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.os-content .academy-chapter-number {
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 0.85;
  letter-spacing: -0.04em; color: var(--ink); opacity: 0.13;
}
.os-content .academy-chapter-level { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); }
.os-content .academy-chapter-head h2 { font-family: "Archivo"; font-weight: 900; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.035em; line-height: 1.02; margin-top: 12px; max-width: 24ch; }
.os-content .academy-chapter-description { margin-top: 16px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; max-width: 64ch; }
.os-content .academy-notions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; }
.os-content .academy-notions li {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--ink-faint);
  border: 1px solid var(--line-soft); background: var(--surface-2); border-radius: 4px; padding: 5px 9px;
}
@media (max-width: 700px) {
  .os-content .academy-chapter-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .os-content .academy-chapter-number { font-size: 34px; opacity: 0.22; }
}

.os-content .academy-pillar {
  margin-top: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; padding: 30px 34px;
}
.os-content .academy-pillar .pl-k { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.os-content .academy-pillar h3 { font-family: "Archivo"; font-weight: 800; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: -0.025em; margin-top: 10px; line-height: 1.2; max-width: 34ch; }
.os-content .academy-pillar p { color: var(--ink-soft); font-size: 15.5px; margin-top: 10px; max-width: 70ch; }
.os-content .academy-pillar .pl-cta {
  font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  display: inline-flex; gap: 8px; align-items: center; border-bottom: 2px solid var(--accent); padding-bottom: 3px;
}
.os-content .academy-pillar:hover .pl-cta { color: var(--accent-deep); }
@media (max-width: 760px) { .os-content .academy-pillar { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; align-items: start; } }
/* Chapitre « cœur du sujet » (ArticlesController::RESOURCES_HIGHLIGHTED_CHAPTER,
   mouvements de cotes) : la carte pilier passe en sombre pour le distinguer
   visuellement des autres chapitres, à l'image du standalone. */
.os-content .academy-chapter.is-key .academy-pillar { background: var(--dark); border-color: var(--dark); color: #fff; }
.os-content .academy-chapter.is-key .academy-pillar .pl-k { color: rgba(255, 255, 255, 0.5); }
.os-content .academy-chapter.is-key .academy-pillar p { color: rgba(255, 255, 255, 0.72); }
.os-content .academy-chapter.is-key .academy-pillar .pl-cta { color: var(--accent); }

.os-content .academy-sub { margin-top: 40px; }
.os-content .academy-sub-heading {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 10px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px;
}
.os-content .academy-items { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
@media (max-width: 860px) { .os-content .academy-items { grid-template-columns: minmax(0, 1fr); column-gap: 0; } }
.os-content .academy-item {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 6px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.os-content .academy-item:hover { background: linear-gradient(90deg, rgba(204, 255, 0, 0.16), rgba(204, 255, 0, 0) 70%); }
.os-content .academy-item .n { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-faint); }
.os-content .academy-item:hover .n { color: var(--accent-deep); }
.os-content .academy-item .t { font-weight: 600; font-size: 16px; letter-spacing: -0.012em; line-height: 1.35; }
.os-content .academy-item .d { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-faint); margin-top: 4px; line-height: 1.45; }
.os-content .academy-item .ar { font-family: "JetBrains Mono", monospace; font-size: 12px; color: transparent; justify-self: end; }
.os-content .academy-item:hover .ar { color: var(--ink); }
.os-content .academy-item .tool-tag {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: middle; white-space: nowrap;
}

.os-content .academy-creed { background: var(--dark); color: #fff; margin-top: 80px; padding: 76px 0; }
.os-content .academy-creed .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
@media (max-width: 860px) { .os-content .academy-creed .wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.os-content .academy-creed h2 { font-family: "Archivo"; font-weight: 900; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.035em; line-height: 1.04; }
.os-content .academy-creed h2 em { font-style: italic; color: var(--accent); }
.os-content .academy-creed p { color: rgba(255, 255, 255, 0.7); font-size: 16px; line-height: 1.6; }
.os-content .academy-creed .quote {
  font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgba(255, 255, 255, 0.55);
  border-left: 2px solid var(--accent); padding-left: 16px; margin-top: 22px; line-height: 1.7;
}
.os-content .academy-creed-cta {
  display: inline-flex; margin-top: 20px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700;
  color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px;
}
.os-content .academy-creed-cta:hover { color: #fff; border-color: #fff; }

[data-academy-search-target="item"][hidden],
[data-academy-search-target="chapter"][hidden],
[data-academy-search-target="sub"][hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .os-content .academy-level,
  .os-content .academy-chips .chip,
  .os-content .academy-item { transition: none; }
}

/* ---------- CTA band (sombre) ---------- */
.os-content .ctaband { background: var(--dark); color: #fff; position: relative; overflow: hidden; margin-top: 64px; }
.os-content .ctaband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 120% at 50% 0%, rgba(204, 255, 0, 0.13), transparent 60%);
}
.os-content .ctaband-inner { position: relative; padding-block: 72px; text-align: center; }
.os-content .ctaband h2 {
  font-family: "Archivo"; font-weight: 900; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em;
  line-height: 1.05; text-wrap: balance; max-width: 18ch; margin: 0 auto;
}
.os-content .ctaband h2 .it { font-style: italic; color: var(--accent); }
.os-content .ctaband p { color: rgba(255, 255, 255, 0.72); margin-top: 18px; font-size: 18px; max-width: 52ch; margin-left: auto; margin-right: auto; }
.os-content .ctaband .btn-primary { margin-top: 30px; }
.os-content .ctaband .reassure {
  display: block; margin-top: 14px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.55);
}
.os-content .btn-primary::after { content: "→"; }

/* ---------- calculateurs (cluster « Probabilités & cotes », #1834) ---------- */
/* Le bloc est servi complet par le serveur (libellés, exemple chiffré, notes) :
   ces styles ne supposent jamais que le JS a tourné. `.calc` est utilisé par le
   mini-calculateur des articles ET par les deux outils autonomes. */
.os-content .calc {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 28px; display: grid; gap: 20px;
  container-type: inline-size;
}
@media (max-width: 620px) { .os-content .calc { padding: 20px; } }
.os-content .calc .tag {
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 6px;
}
.os-content .calc-title { font-family: "Archivo"; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.os-content .calc-intro { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 8px 0 0; }

.os-content .calc-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.os-content .calc-field { display: grid; gap: 6px; flex: 1 1 190px; min-width: 160px; }
.os-content .calc-field label {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.os-content .calc-input {
  font-family: "JetBrains Mono", monospace; font-size: 17px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; width: 100%;
}
.os-content .calc-input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.os-content .calc-hint { font-size: 13px; line-height: 1.45; color: var(--ink-faint); margin: 0; }
.os-content .calc-reset {
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; cursor: pointer;
}
.os-content .calc-reset:hover { background: rgba(204, 255, 0, 0.25); }
.os-content .calc-reset:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.os-content .calc-results {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
}
.os-content .calc-results-title {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px;
}
.os-content .calc-results dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 22px; margin: 0;
}
.os-content .calc-result dt { font-size: 13px; line-height: 1.4; color: var(--ink-faint); margin: 0; }
.os-content .calc-result dd {
  font-size: 20px; font-weight: 700; color: var(--ink); margin: 4px 0 0; font-variant-numeric: tabular-nums;
}
.os-content .calc-result-hint { font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; }

/* L'avertissement ne repose pas sur la couleur seule : il porte un libellé
   explicite (« Attention : ») rendu côté serveur. */
.os-content .calc-warning {
  display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.5;
  color: var(--ink); background: rgba(204, 255, 0, 0.2);
  border: 1px solid var(--line); border-left: 4px solid var(--accent-deep);
  border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0;
}
.os-content .calc-warning[hidden] { display: none; }
.os-content .calc-warning-label { font-weight: 800; white-space: nowrap; }
.os-content .calc-note { font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); margin: 0; }

/* ---------- outils autonomes (#1836) ---------- */
.os-content .calc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.os-content .calc-presets-label {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.os-content .calc-preset {
  font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.os-content .calc-preset:hover { background: rgba(204, 255, 0, 0.25); }
.os-content .calc-preset:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.os-content .calc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.os-content .calc-reset[disabled] { opacity: 0.45; cursor: not-allowed; }

.os-content .calc-rows { display: grid; gap: 14px; }
.os-content .calc-row {
  display: grid; gap: 14px 18px; align-items: start;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 160px) minmax(240px, 2fr) auto;
  padding: 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface-2);
}
/* @container, pas @media : .calc-row vit dans .article (max-width: 720px), toujours
   plus étroit que le seuil 900px. Un @media sur la largeur de viewport ne se
   déclenchait donc jamais en desktop normal — la grille 4 colonnes restait figée à
   ses minmax minimums (240px pour la colonne résultats), trop étroite pour ses 3
   stats empilées, qui s'effondraient alors sur 1 seule colonne au lieu de 3. */
@container (max-width: 900px) { .os-content .calc-row { grid-template-columns: 1fr 1fr; } }
@container (max-width: 620px) { .os-content .calc-row { grid-template-columns: 1fr; } }
.os-content .calc-row .calc-input { background: var(--surface); }
.os-content .calc-row-results {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 18px; margin: 0;
}
.os-content .calc-row-results dd { font-size: 17px; }
.os-content .calc-row-remove {
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer;
}
.os-content .calc-row-remove:hover:not([disabled]) { background: rgba(204, 255, 0, 0.25); color: var(--ink); }
.os-content .calc-row-remove[disabled] { opacity: 0.45; cursor: not-allowed; }
.os-content .calc-row-remove:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* Message d'erreur d'un champ (wrapper simple_form `oddscore_editorial`). */
.os-content .calc-error { font-size: 13px; line-height: 1.45; color: var(--accent-deep); font-weight: 600; margin: 0; }

/* Le wrapper simple_form ajoute les classes Tailwind globales (`config.label_class`)
   sur les labels : illisibles sur le fond clair du thème éditorial. La spécificité
   de ce sélecteur (0,3,1) l'emporte sur une utilitaire Tailwind (0,1,0). */
.os-content .calc .calc-field label {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}