/* ═══════════════════════════════════════════════════════════════════════
   /no-kyc-crypto-card — complements a la mise en page des documents longs
   (.lg-*, legal.css), qui fournit deja le sommaire colle et la typographie
   de lecture longue.
   ═══════════════════════════════════════════════════════════════════════ */

.gd-cta-hero{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
/* Bouton fantome sur fond SOMBRE : les jetons du theme clair y donneraient
   du gris fonce sur noir. Couleurs ecrites en clair. */
.btn-ghost-light{
  background:transparent;border-color:rgba(255,255,255,.28);color:#fff;
}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* Etapes numerotees */
.gd-steps{counter-reset:g;margin:0 0 16px;padding:0}
.gd-steps li{
  position:relative;counter-increment:g;list-style:none;
  padding:0 0 0 40px;margin-bottom:13px;color:var(--ink-2);font-size:16px;line-height:1.65;
}
.gd-steps li::before{
  content:counter(g);position:absolute;left:0;top:2px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--acid);
  font-family:var(--font-mono);font-size:12px;font-weight:700;
}
.gd-steps b{color:var(--ink)}

/* L'accent sur la derniere colonne n'a de sens que quand cette colonne,
   c'est nous : d'ou la classe `gd-table-us` posee par gd_table(). Sur le
   tableau des cryptos, la derniere colonne est un avertissement — la
   surligner en vert dirait l'inverse de ce qu'elle raconte. */
.gd-table-us td:last-child{background:var(--acid-soft);color:var(--ink)}
.gd-table-us th:last-child{color:var(--green-ink)}
.gd-table td:nth-child(2){color:var(--muted)}

/* ── voisins, en bas d'un guide ───────────────────────────────────────── */
.gd-more-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gd-card{
  display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  transition:border-color .16s,transform .16s var(--ease);
}
.gd-card:hover{border-color:var(--acid);transform:translateY(-2px);color:var(--ink)}
.gd-card-ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--acid-soft);border:1px solid rgba(201,242,78,.34);color:var(--green-ink);
}
.gd-card-ic svg{width:18px;height:18px}
.gd-card-tx{flex:1;min-width:0}
.gd-card-tx small{display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gd-card-tx b{display:block;margin-top:2px;font-family:var(--font-display);
  font-size:14.5px;line-height:1.3;letter-spacing:-.01em}
.gd-card > svg{flex:0 0 auto;width:15px;height:15px;color:var(--muted-2)}


@media (max-width:1040px){ .gd-more-row{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .gd-more-row{grid-template-columns:1fr} }

/* FAQ : meme accordeon que le centre d'aide. */
.gd-faq{border-top:1px solid var(--line);margin-top:6px}

.gd-end{border-top:1px solid var(--line);padding-top:40px}
.gd-end-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

@media (max-width:640px){
  .gd-cta-hero{flex-direction:column}
  .gd-cta-hero .btn{width:100%;min-height:50px}
  .gd-steps li{padding-left:36px;font-size:15.5px}
  .gd-end-row .btn{width:100%}
  /* Trois colonnes ne tiennent pas : chaque ligne devient un bloc, et
     l'intitule de colonne revient devant la valeur — pris sur le <th> reel
     via data-label, jamais ecrit en dur. */
  .gd-table td:last-child{background:none;font-family:inherit;font-size:inherit}
  .gd-table td[data-label]::before{
    content:attr(data-label) ": ";
    font-family:var(--font-mono);font-size:11px;color:var(--muted-2);font-weight:400;
  }
  .gd-table-us td:last-child{font-weight:700}
  .gd-table-us td:last-child[data-label]::before{color:var(--green-ink)}
}

/* ── fenetre de code, dans un guide ───────────────────────────────────────
   `.code-head` et `.code-body` sont deja globales (app.css) : seule
   l'enveloppe vivait dans docs.css, qui n'est PAS chargee sur un guide. Sans
   elle, `.code-body` perdait son fond sombre et rendait du gris clair sur
   fond bone. Regle identique a celle de /api-docs, pour que les deux pages
   montrent la meme fenetre.
   ───────────────────────────────────────────────────────────────────────── */
.lg-sec .code-win{
  border-radius:13px;overflow:hidden;background:#0b0c0e;
  border:1px solid #1c1f26;box-shadow:var(--shadow);margin:0 0 16px;
}
.lg-sec .code-win:last-child{margin-bottom:0}

/* `.lg-sec code` habille le code EN LIGNE de la prose (encre verte sur bone).
   Le meme selecteur attrape le <code> de la fenetre sombre : on le remet a
   plat, exactement comme docs.css le fait pour `.dsec code`. */
.lg-sec .code-body code{
  background:none;border:none;padding:0;border-radius:0;
  color:inherit;font-size:inherit;word-break:normal;
}
.lg-sec .code-body code span{background:none;border:none;padding:0}