/* Page /api : les blocs propres à la documentation.

   Les étapes, le cadre et les cartes viennent de socle.css et de
   style-guide.css, que cette page partage : une documentation se lit comme un
   guide, il n'y avait pas de raison qu'elle ait sa propre grammaire. */

/* Requête, réponse, en-tête d'authentification : du texte à recopier. Fond
   sombre comme les blocs <pre> du socle, pour qu'on voie d'un coup d'œil ce
   qui est de la machine et ce qui est du commentaire. */
.page-site .api-block {
    margin: 10px 0 0;
    padding: 14px 16px;
    overflow-x: auto;
    background: #1d2545;
    border-radius: var(--rayon-s);
    color: #e8ecf8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
}

.page-site .api-block a {
    color: var(--cyan-clair);
}

.page-site .param-table code {
    font-size: 12.5px;
}

/* Pastilles de palier : vert pour ce qui est ouvert à tous, ambre pour ce qui
   demande un token. */
.page-site .badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.page-site .badge-public {
    background: var(--succes-fond);
    color: var(--succes);
}

.page-site .badge-token {
    background: #fdf3d6;
    color: #8a6d1f;
}

/* Encadré appuyé : l'attribution et la demande de token, les deux seuls
   endroits de la page qui s'adressent au lecteur plutôt qu'à sa machine. */
.page-site .encadre-fort {
    background: var(--surface-douce);
    border-left-color: var(--navy);
}