/* ============================================================
   EasyParafe — /api/ : la page de vente de l'API d'intégration.

   Cette feuille ne porte QUE les éléments que la landing n'a pas :
   la carte du flux (hero), les blocs de code, l'encart du volume
   et les notes de la grille. Tout le reste — hero, bandeau de
   garanties, sections, cartes de prix, accordéon FAQ, rappel
   final, filets de grille, apparitions au défilement, responsive —
   vient de landing.css, chargée juste avant sur cette page.

   Deux règles de survie :

   1. AUCUN sélecteur de type nu sous .pf-api. Le wrapper enveloppe
      la barre et le pied (base_site.html) : `.pf-api pre` les
      atteindrait aussi. Passer par une classe.
      Gardé par test_api_landing.ApiCssNAtteintPasLaChromeTest.

   2. Les tokens (--pf-or-500, --pf-on-dark…) viennent de .pf-lp,
      que le wrapper porte aussi. Ne rien redéclarer ici.
   ============================================================ */

/* ---------- Hero : la carte des trois temps ----------
   Elle occupe la seconde colonne de .pf-hero__in (grille déjà déclarée
   par landing.css, repliée à une colonne sous 980 px). */
.pf-api .pf-api__flux {
  background: rgba(6, 26, 27, .55);
  border: 1px solid var(--pf-hairline-dark);
  border-radius: var(--pf-r-lg);
  padding: 26px 28px 22px;
  box-shadow: var(--pf-shadow-xl);
}
.pf-api .pf-api__fluxhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 1px solid var(--pf-hairline-dark);
}
.pf-api .pf-api__fluxhead b {
  font-size: 13.5px; font-weight: 600; color: var(--pf-on-dark);
  letter-spacing: .01em;
}
.pf-api .pf-api__beta {
  flex: none; padding: 4px 11px; border-radius: var(--pf-r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pf-or-300); background: rgba(201, 168, 106, .16);
}
.pf-api .pf-api__fluxlist {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
}
.pf-api .pf-api__fluxlist li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid rgba(243, 239, 230, .06);
}
.pf-api .pf-api__fluxlist li:last-child { border-bottom: 0; padding-bottom: 4px; }
.pf-api .pf-api__fluxnum {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: lining-nums;
  font-size: 12px; font-weight: 700;
  color: var(--pf-petrole-900); background: var(--pf-or-500);
}
.pf-api .pf-api__fluxlist b {
  display: block;
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  font-size: 13px; font-weight: 600; color: var(--pf-or-300);
  word-break: break-word;   /* « POST /api/v1/requests » à 390 px */
}
.pf-api .pf-api__fluxtext {
  display: block; margin-top: 5px;
  font-size: 13px; line-height: 1.55; color: var(--pf-on-dark-soft);
}

@media (max-width: 620px) {
  .pf-api .pf-api__flux { padding: 20px 18px 16px; }
}

/* ---------- Lisibilité du titre de « L'appel » sur fond sombre ----------
   .pf-sec__head (landing.css) suppose un fond clair : --pf-ink et
   --pf-ink-soft sur son h2 et son p, presque noirs. La seule autre section
   .pf-proof du site (« La preuve ») ne connaît pas ce défaut : elle
   n'utilise pas .pf-sec__head et hérite du --pf-on-dark de .pf-proof. Ici,
   .pf-sec__head est préféré à .pf-proof__in (mise en page à une colonne :
   le grid 2 colonnes de .pf-proof__in ne convient pas à trois blocs de
   code pleine largeur) — on restaure donc la même hiérarchie de couleur
   (titre clair, texte adouci) par une redéclaration ciblée. */
.pf-api .pf-proof .pf-sec__head h2 { color: var(--pf-on-dark); }
.pf-api .pf-proof .pf-sec__head p { color: var(--pf-on-dark-soft); }

/* ---------- Blocs de code ----------
   Fond plus profond que la section, liseré doré discret. Aucune
   coloration syntaxique : elle demanderait soit du JavaScript (la page
   n'en charge aucun), soit un nid de <span> dans un <pre>, où chaque
   balise ajoutée est une occasion de casser l'alignement du JSON. */
.pf-api .pf-api__code {
  position: relative; z-index: 2;
  margin: 0 auto; max-width: var(--pf-wrap);
  background: rgba(6, 26, 27, .62);
  border: 1px solid var(--pf-hairline-dark);
  border-radius: var(--pf-r-md);
  overflow-x: auto;                 /* le bloc défile, jamais la page */
  overscroll-behavior-x: contain;   /* et il n'entraîne pas l'historique */
}
.pf-api .pf-api__codehead {
  position: sticky; left: 0;        /* reste lisible quand le bloc défile */
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--pf-hairline-dark);
}
.pf-api .pf-api__codehead b {
  font-size: 12.5px; font-weight: 700; color: var(--pf-on-dark);
  letter-spacing: .02em;
}
.pf-api .pf-api__codehead span {
  font-size: 11.5px; color: var(--pf-on-dark-faint);
}
.pf-api .pf-api__code pre {
  margin: 0; padding: 20px;
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  font-size: 12.5px; line-height: 1.62; color: var(--pf-on-dark-soft);
  white-space: pre;                 /* jamais de retour forcé dans du JSON */
}
.pf-api .pf-api__codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; margin-top: 22px;
}
/* Les trois encarts d'explication, sous les blocs. .pf-args de landing.css
   est une colonne : ici, trois colonnes sous les blocs pleine largeur. */
.pf-api .pf-args {
  margin-top: 44px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
}
.pf-api .pf-args code {
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  font-size: .92em; color: var(--pf-or-300);
}

@media (max-width: 980px) {
  .pf-api .pf-api__codes { grid-template-columns: 1fr; }
  .pf-api .pf-args { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 620px) {
  .pf-api .pf-api__code pre { padding: 16px; font-size: 11.5px; }
  .pf-api .pf-api__codehead { padding: 11px 16px; }
}

/* ---------- Tarif : l'encart du volume et les notes ---------- */
.pf-api .pf-api__volume {
  position: relative; z-index: 2;
  max-width: 940px; margin: 40px auto 0;
  padding: 30px 34px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(201, 168, 106, .38);
  border-radius: var(--pf-r-md);
}
.pf-api .pf-api__volume h3 {
  margin: 0; font-size: 22px; line-height: 1.25; color: var(--pf-petrole-800);
}
.pf-api .pf-api__volumetext {
  margin: 13px 0 0; font-size: 14.5px; line-height: 1.62;
  color: var(--pf-ink-soft);
}
.pf-api .pf-api__volume b { color: var(--pf-ink); font-weight: 600; }
.pf-api .pf-api__note {
  font-size: 12.5px; line-height: 1.6; color: var(--pf-ink-faint);
}
.pf-api .pf-api__volume .pf-api__note { margin-top: 13px; }
.pf-api .pf-api__note--centre {
  position: relative; z-index: 2;
  max-width: 720px; margin: 26px auto 0; text-align: center;
}

@media (max-width: 620px) {
  .pf-api .pf-api__volume { padding: 24px 20px; }
  .pf-api .pf-api__volume h3 { font-size: 19px; }
}