/* ============================================================
   AI-Ready · GEO — Page technique (mode ingénieur / spec sheet)
   Réutilise theme.css + components.css. Styles spécifiques ici.
   ============================================================ */

.doc-header { position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--border); }
.doc-header .bar { max-width: 1180px; margin: 0 auto; height: 64px; padding: 0 var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4); }
.doc-header .ver { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-faint);
  border: 1px solid var(--border); padding: 3px 8px; border-radius: var(--r-sm); }
.doc-header .h-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* Layout documentaire : TOC + contenu */
.doc-wrap { max-width: 1180px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8);
  display: grid; grid-template-columns: 232px 1fr; gap: var(--sp-7); align-items: start; }
.toc { position: sticky; top: 88px; }
.toc .toc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-3); }
.toc a { display: block; font-size: var(--t-small); color: var(--ink-soft); padding: 7px 12px;
  border-left: 2px solid var(--border); transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.toc a:hover { color: var(--ink); border-left-color: var(--ink-faint); }
.toc a .n { font-family: var(--font-mono); color: var(--accent-deep); margin-right: 8px; font-size: var(--t-micro); }

.doc-main { min-width: 0; }

/* Abstract / résumé spec */
.spec-abstract { padding: var(--sp-6); margin-bottom: var(--sp-6); }
.spec-abstract .kicker { display: block; margin-bottom: var(--sp-3); }
.spec-abstract h1 { font-size: var(--t-h1); letter-spacing: -0.03em; line-height: var(--lh-tight); margin-bottom: var(--sp-4); text-wrap: balance; }
.spec-abstract p { color: var(--ink-soft); font-size: var(--t-h3); line-height: var(--lh-snug); max-width: 62ch; }

/* Bandeau d'invariants (la garantie) */
.invariants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-top: var(--sp-5); }
.invariant { background: var(--surface); padding: var(--sp-4) var(--sp-4); }
.invariant .iv-v { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px; }
.invariant .iv-v .u { font-size: 15px; color: var(--accent-deep); }
.invariant .iv-k { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-faint);
  margin-top: 6px; letter-spacing: 0.02em; }

/* Sections doc */
.doc-section { padding: var(--sp-7) 0; border-top: 1px solid var(--border); scroll-margin-top: 84px; }
.doc-section:first-of-type { border-top: 0; padding-top: var(--sp-4); }
.doc-section > .s-num { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--accent-deep);
  letter-spacing: 0.1em; font-weight: 600; }
.doc-section > h2 { font-size: var(--t-h2); letter-spacing: -0.02em; margin: 8px 0 var(--sp-3); }
.doc-section > .s-lead { color: var(--ink-soft); max-width: 64ch; margin-bottom: var(--sp-5); }

/* Pipeline (étapes I/O) */
.pipeline { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; }
.pl-stage { background: var(--surface); padding: var(--sp-4) var(--sp-5);
  display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4); align-items: start; }
.pl-stage .pl-i { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft);
  color: var(--accent-deep); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; }
.pl-stage h3 { font-size: var(--t-h3); letter-spacing: -0.01em; margin-bottom: 4px; }
.pl-stage p { color: var(--ink-soft); font-size: var(--t-small); margin-bottom: 8px; }
.pl-io { display: flex; flex-wrap: wrap; gap: 8px; }
.io-tag { font-family: var(--font-mono); font-size: var(--t-micro); padding: 3px 8px; border-radius: 5px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); }
.io-tag b { color: var(--accent-deep); font-weight: 700; margin-right: 5px; }

/* Tableau de poids / specs */
table.spec { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
table.spec th { text-align: left; font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
  padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-strong); }
table.spec td { padding: var(--row-pad-y) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: top; }
table.spec tr:last-child td { border-bottom: 0; }
table.spec .mono { color: var(--ink); }
table.spec .w { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-weight: 700; }
table.spec .desc { color: var(--ink-faint); }
.spec-card { overflow: hidden; }
.spec-card thead th:first-child { padding-left: var(--sp-5); }
.spec-card td:first-child { padding-left: var(--sp-5); }
.spec-card th:last-child, .spec-card td:last-child { padding-right: var(--sp-5); }

/* Listes de points de contrôle */
.checks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.check-group { padding: var(--sp-5); }
.check-group h3 { font-size: var(--t-h3); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.check-group h3 code { font-family: var(--font-mono); font-size: 11px; color: var(--accent-deep);
  background: var(--accent-soft); padding: 2px 7px; border-radius: 5px; font-weight: 600; }
.check-group ul { display: flex; flex-direction: column; gap: 9px; margin-top: var(--sp-3); }
.check-group li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--t-small); color: var(--ink-soft); }
.check-group li .ic { width: 16px; height: 16px; color: var(--accent); margin-top: 2px; }
.check-group li code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }

/* Bloc code / config */
pre.code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); overflow-x: auto; }
pre.code .c { color: var(--ink-faint); }
pre.code .k { color: var(--accent-deep); font-weight: 700; }
pre.code .s { color: oklch(52% 0.12 150); }
[data-theme="dark"] pre.code .s { color: oklch(78% 0.12 150); }

/* L'Invariant — doctrine de confiance */
.doctrine { background: var(--bottle); color: var(--ink-onbrand); border-radius: var(--r-lg);
  padding: var(--sp-7); position: relative; overflow: hidden; }
[data-theme="dark"] .doctrine { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink); }
.doctrine .d-mark { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7; }
.doctrine h2 { font-size: var(--t-h1); letter-spacing: -0.03em; line-height: var(--lh-tight); margin: var(--sp-3) 0 var(--sp-4); color: inherit; border: 0; padding: 0; max-width: 22ch; }
.doctrine p { opacity: 0.9; font-size: var(--t-h3); line-height: var(--lh-snug); max-width: 60ch; margin-bottom: var(--sp-4); }
.doctrine .crash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-5) 0; }
.doctrine .crash { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md); padding: var(--sp-4); }
[data-theme="dark"] .doctrine .crash { background: var(--surface-3); border-color: var(--border); }
.doctrine .crash .ct { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-bottom: 8px; }
.doctrine .crash p { font-size: var(--t-small); opacity: 0.92; margin: 0; }
.doctrine blockquote { margin: var(--sp-5) 0 0; padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.18);
  font-size: var(--t-h3); line-height: var(--lh-snug); }
[data-theme="dark"] .doctrine blockquote { border-top-color: var(--border); }
.doctrine .sig { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-4); font-size: var(--t-small); opacity: 0.85; }
.doctrine .sig .av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; font-weight: 700; flex: none; }
[data-theme="dark"] .doctrine .sig .av { background: var(--accent); color: oklch(20% 0.03 170); }

/* Sorties */
.outputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.output { padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: flex-start; }
.output .oi { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center; flex: none; }
.output h3 { font-size: var(--t-body); letter-spacing: -0.01em; margin-bottom: 4px; }
.output p { font-size: var(--t-small); color: var(--ink-soft); }

@media (max-width: 880px) {
  .doc-wrap { grid-template-columns: 1fr; }
  .toc { display: none; }
  .invariants { grid-template-columns: 1fr 1fr; }
  .checks-grid, .outputs { grid-template-columns: 1fr; }
  .doctrine .crash-grid { grid-template-columns: 1fr; }
}