/* ============================================================
   APIBASE — theme.css  (chargé sur toutes les pages)
   ============================================================ */

:root {
  --ab-dark:   #0f172a;
  --ab-dark2:  #1e293b;
  --ab-muted:  #64748b;
  --ab-border: #e2e8f0;
  --ab-bg:     #f8fafc;
  --ab-blue:   #2563eb;
  --ab-accent: #60a5fa;
  --ab-mono:   'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

body { background: var(--ab-bg); color: var(--ab-dark2); }

/* ============================================================
   NAV
   ============================================================ */
.ab-nav {
  background: var(--ab-dark);
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 52px;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.ab-brand {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-decoration: none;
  margin-right: 32px;
  white-space: nowrap;
}
.ab-brand:hover { color: #e2e8f0; }
.ab-nav-links { display: flex; overflow-x: auto; }
.ab-nav-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: color .15s;
}
.ab-nav-link:hover        { color: #fff; }
.ab-nav-link.active       { color: #fff; box-shadow: inset 0 -2px 0 var(--ab-blue); }

/* ============================================================
   HERO
   ============================================================ */
.ab-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  padding: 80px 24px;
  text-align: center;
  color: #fff;
}
.ab-hero-inner    { max-width: 800px; margin: 0 auto; }
.ab-kicker {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 20px;
}
.ab-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin-bottom: 20px;
}
.ab-hero h1 .hl { color: #60a5fa; }
.ab-hero h1 .dim { color: #94a3b8; }
.ab-lead {
  font-size: 1.15rem;
  color: #94a3b8;
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.ab-badge-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.ab-badge {
  background: rgba(96,165,250,.12);
  border: 1px solid rgba(96,165,250,.25);
  color: #93c5fd;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.ab-cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ab-proof {
  font-size: .9rem;
  color: #64748b;
  line-height: 1.6;
}
.ab-hero-code {
  background: #0c1628;
  border: 1px solid #1e3a5f;
  border-radius: 12px;
  padding: 28px 32px;
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--ab-mono);
  font-size: .9rem;
  line-height: 1.8;
  color: #e2e8f0;
}

/* ============================================================
   SECTIONS & TYPOGRAPHY
   ============================================================ */
.ab-section {
  padding: 64px 24px;
  max-width: 900px;
  margin: 0 auto;
}
.ab-section + .ab-section { border-top: 1px solid var(--ab-border); }
.ab-full-section {
  padding: 64px 24px;
  border-top: 1px solid var(--ab-border);
}
.ab-full-section .ab-container { max-width: 900px; margin: 0 auto; }

.ab-section h2,
.ab-full-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ab-dark);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.ab-sub {
  font-size: 1rem;
  color: var(--ab-muted);
  margin-bottom: 28px;
  line-height: 1.6;
}
.ab-section h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ab-dark2);
  margin: 32px 0 10px;
}
.ab-section p, .ab-full-section p { color: #475569; margin-bottom: 16px; line-height: 1.7; }
.ab-section strong { color: var(--ab-dark2); }
.ab-section a:not(.btn), .ab-full-section a:not(.btn) { color: var(--ab-blue); }
.ab-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ab-muted);
  margin-bottom: 8px;
}

/* ============================================================
   CARDS
   ============================================================ */
.ab-card {
  background: #fff;
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  padding: 24px;
}
.ab-card h4  { font-size: 1rem; font-weight: 600; color: var(--ab-dark); margin-bottom: 8px; }
.ab-card p   { font-size: .9rem; color: #475569; margin: 0; line-height: 1.6; }
.ab-card-grid { display: grid; gap: 16px; }
.ab-card-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.ab-card-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.ab-card-grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  .ab-card-grid.g2,
  .ab-card-grid.g3,
  .ab-card-grid.g4 { grid-template-columns: 1fr; }
}
.ab-card.left-blue  { border-left: 3px solid var(--ab-blue); }
.ab-card.left-green { border-left: 3px solid #059669; }
.ab-card.left-red   { border-left: 3px solid #f87171; }

.ab-kpi-title { font-size: .95rem; font-weight: 700; margin-bottom: 6px; color: var(--ab-dark2); }
.ab-kpi-body  { font-size: .875rem; color: #475569; margin: 0; line-height: 1.5; }

/* ============================================================
   HIGHLIGHT NOTE (kpi-style)
   ============================================================ */
.ab-note {
  background: #eff6ff;
  border-left: 3px solid var(--ab-blue);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: .9rem;
  color: #1e40af;
  line-height: 1.6;
}

/* ============================================================
   CODE
   ============================================================ */
pre {
  background: var(--ab-dark);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 24px;
  overflow-x: auto;
  font-family: var(--ab-mono);
  font-size: .875rem;
  line-height: 1.8;
  margin: 20px 0;
}
pre code { font-family: inherit; background: none; padding: 0; border: none; font-size: inherit; color: inherit; border-radius: 0; }
:not(pre) > code {
  background: #f1f5f9;
  border: 1px solid var(--ab-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--ab-mono);
  font-size: .84em;
  color: var(--ab-dark);
}
.kw { color: #60a5fa; }
.fn { color: #34d399; }
.st { color: #fbbf24; }
.cm { color: #64748b; }
.nb { color: #f472b6; }
.hl { color: #fb923c; }

/* ============================================================
   METHOD BADGES
   ============================================================ */
.ab-method { font-size:.72rem; font-weight:700; letter-spacing:.05em; padding:3px 9px; border-radius:5px; flex-shrink:0; font-family: var(--ab-mono); }
.ab-method.get    { background:#dcfce7; color:#15803d; }
.ab-method.post   { background:#dbeafe; color:#1d4ed8; }
.ab-method.put    { background:#fef9c3; color:#a16207; }
.ab-method.delete { background:#fee2e2; color:#b91c1c; }

/* ============================================================
   TABLES
   ============================================================ */
.ab-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.9rem; }
.ab-table th {
  text-align:left; padding:10px 14px; background:#f1f5f9;
  border:1px solid var(--ab-border); font-weight:600; color:#334155;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
}
.ab-table td { padding:10px 14px; border:1px solid var(--ab-border); color:#475569; vertical-align:top; }
.ab-table tr:nth-child(even) td { background:var(--ab-bg); }

/* ============================================================
   HIVE DIAGRAM
   ============================================================ */
.ab-hive {
  background: #fff;
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  padding: 32px;
  margin: 28px 0;
  font-family: var(--ab-mono);
  font-size: .875rem;
  line-height: 2.1;
  color: #334155;
  overflow-x: auto;
}
.hive-boss     { color: #2563eb; font-weight: 700; }
.hive-worker   { color: #059669; }
.hive-readonly { color: #d97706; }

/* ============================================================
   STEPS
   ============================================================ */
.ab-steps { counter-reset: steps; list-style: none; margin: 24px 0; padding: 0; }
.ab-steps li {
  counter-increment: steps;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.ab-steps li::before {
  content: counter(steps);
  background: var(--ab-blue);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}
.ab-steps li div { color: #475569; line-height: 1.65; }
.ab-steps li strong { color: var(--ab-dark); display: block; margin-bottom: 4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.ab-footer {
  background: var(--ab-dark);
  padding: 40px 24px;
  text-align: center;
  color: #94a3b8;
  font-size: .875rem;
  line-height: 1.8;
}
.ab-footer a { color: #60a5fa; text-decoration: none; }
.ab-footer a:hover { text-decoration: underline; }
.ab-footer-copy { color: #cbd5e1; font-weight: 500; margin-bottom: 4px; }

/* ============================================================
   ENDPOINT ROWS (devguide)
   ============================================================ */
.ab-endpoint-list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.ab-endpoint {
  display: flex;
  align-items: baseline;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  padding: 13px 18px;
}
.ab-endpoint-path { font-family: var(--ab-mono); font-size: .85rem; color: var(--ab-dark); flex: 1; }
.ab-endpoint-desc { font-size: .85rem; color: var(--ab-muted); }
@media (max-width: 600px) {
  .ab-endpoint { flex-direction: column; gap: 6px; }
}

/* ============================================================
   TLC GRID (devguide hero section)
   ============================================================ */
.ab-tlc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 28px 0; }
.ab-tlc-card { background: #fff; border: 1px solid var(--ab-border); border-radius: 12px; padding: 24px; text-align: center; }
.ab-tlc-letter { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.ab-tlc-card:nth-child(1) .ab-tlc-letter { color: #2563eb; }
.ab-tlc-card:nth-child(2) .ab-tlc-letter { color: #059669; }
.ab-tlc-card:nth-child(3) .ab-tlc-letter { color: #d97706; }
.ab-tlc-card h4 { font-size: .82rem; font-weight: 600; color: var(--ab-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.ab-tlc-card p  { font-size: .9rem; margin: 0; color: #475569; }
@media (max-width: 600px) { .ab-tlc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   URL ANATOMY
   ============================================================ */
.ab-url-box {
  background: #fff;
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 24px 0;
  font-family: var(--ab-mono);
  font-size: .9rem;
  overflow-x: auto;
  line-height: 2;
}
.seg-t { color: #2563eb; font-weight: 700; }
.seg-l { color: #059669; font-weight: 700; }
.seg-c { color: #d97706; font-weight: 700; }
.seg-o { color: #7c3aed; font-weight: 700; }
.seg-v { color: #db2777; font-weight: 700; }
.ab-url-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .82rem; color: var(--ab-muted); margin-top: 12px; }
.ab-url-legend span { white-space: nowrap; }
.leg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ============================================================
   TWO-COL LAYOUT (used in index, devguide)
   ============================================================ */
.ab-two-col { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; }
.ab-two-col > * { min-width: 0; }
.ab-two-col.rev { direction: rtl; }
.ab-two-col.rev > * { direction: ltr; }
@media (max-width: 767px) { .ab-two-col { grid-template-columns: 1fr; } .ab-two-col.rev { direction: ltr; } }

.fr,
span.fr {
	display: none !important;
}

html[lang="fr"] .en,
html[lang="fr"] span.en {
	display: none !important;
}

html[lang="fr"] .fr {
	display: block !important;
}

html[lang="fr"] span.fr {
	display: inline !important;
}

html[lang="fr"] a.fr {
	display: inline-flex !important;
}

.ab-nav {
	display: flex;
	align-items: center;
}

.ab-nav-links {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ab-lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 48px;
	height: 30px;
	padding: 0 14px;

	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 8px;

	background: #ffffff;
	color: #0f172a;

	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.03em;

	cursor: pointer;
	transform: translateY(0);
}

.ab-lang-btn:hover {
	background: #f8fafc;
	border-color: #60a5fa;
	color: #1d4ed8;
}