/* ===================================================================
   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 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; }
@media (max-width: 1000px) { .os-content .layout { grid-template-columns: 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; }

/* ---------- 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); }

/* ---------- 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;
}

/* ---------- 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; } }

/* ---------- 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: "→"; }