/* Pages d'aide « api-* » du manuel : documentation API, webhooks et mailhooks.
   Chargée en plus de layoutManuel261013b.css, uniquement par les pages api-*.
   Même famille de couleurs que .bloc-chemin et .tbl-reglages. */

/* Tableau de propriétés : Propriété / Type / Explications */
.tbl-api tbody th {
    width: 25%;
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 14px;
    word-break: break-word;
}
.tbl-api tbody td.api-col-type {
    width: 15%;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .tbl-api tbody th { width: auto; }
    .tbl-api tbody td.api-col-type { width: auto; white-space: normal; padding-bottom: 0; }
}

/* Pastille de type : texte, entier, booléen... */
.api-type {
    display: inline-block;
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 0 8px;
    border-radius: 10px;
    background: #eef2fb;
    color: #3050ac;
    border: 1px solid #cfd9f2;
}

/* Code dans une phrase */
.api-code {
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 0.92em;
    background: #eef2fb;
    color: #243b85;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Exemple de requête ou de JSON */
pre.api-json {
    margin: 14px 0 24px 0;
    padding: 16px 18px;
    background: #f6f8fc;
    color: #1f2a44;
    border: 2px solid #3050ac;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    overflow: auto;
    max-height: 560px;
    white-space: pre;
    -moz-tab-size: 2;
    tab-size: 2;
}

/* Encadré : remarque à retenir, ou attention */
.api-note,
.api-attention {
    margin: 16px 0 22px 0;
    padding: 12px 16px;
    border-left: 5px solid #3050ac;
    border-radius: 6px;
    background: #E3F7FF;
}
.api-attention {
    border-left-color: #d97706;
    background: #fff6e5;
}

/* Liste d'étapes */
ol.api-etapes {
    margin: 10px 0 18px 22px;
    padding: 0;
}
ol.api-etapes li { margin: 6px 0; }

/* =====================================================================
   Mise en page des pages api-* : menu latéral, sommaire de page, ancres
   ===================================================================== */

/* plus large que les autres pages du manuel, pour loger le menu latéral */
body.api-doc .row { width: auto; max-width: 1220px; margin-left: auto; margin-right: auto; padding: 0 24px; }
body.api-doc .span12 { float: none; width: auto; margin-left: 0; }

.api-layout { display: flex; align-items: flex-start; gap: 34px; }
.api-nav { flex: 0 0 236px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
           font-size: 14px; line-height: 1.35; }
.api-contenu { flex: 1 1 auto; min-width: 0; max-width: 860px; }

.api-nav summary { display: none; }
.api-nav .api-nav-titre { margin: 18px 0 6px 0; font-weight: 700; color: #3050ac; text-transform: uppercase;
                          font-size: 12px; letter-spacing: .04em; }
.api-nav .api-nav-titre:first-child { margin-top: 0; }
.api-nav a { display: block; padding: 6px 10px; margin: 1px 0; border-radius: 6px; color: #333; text-decoration: none; }
.api-nav a:hover { background: #eef2fb; color: #3050ac; }
.api-nav a.api-nav-actif { background: #3050ac; color: #fff; font-weight: 600; }

@media (max-width: 900px) {
    .api-layout { display: block; }
    .api-nav { position: static; max-height: none; margin: 0 0 18px 0; border: 2px solid #3050ac; border-radius: 10px; background: #fff; }
    .api-nav summary { display: block; cursor: pointer; padding: 10px 14px; font-weight: 600; color: #3050ac; }
    .api-nav .api-nav-corps { padding: 0 8px 10px 8px; }
}
.in-iframe .api-nav { display: none; }

/* Sommaire de la page */
.api-toc { margin: 4px 0 24px 0; padding: 12px 18px; border: 1px solid #cfd9f2; border-radius: 10px; background: #f6f8fc; }
.api-toc strong { display: block; margin-bottom: 4px; color: #3050ac; }
.api-toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.api-toc li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 700px) { .api-toc ul { columns: 1; } }

/* Ancres des titres */
h2 .api-ancre { margin-left: 8px; font-size: .8em; color: #b4c0e6; text-decoration: none; opacity: 0; }
h2:hover .api-ancre, h2 .api-ancre:focus { opacity: 1; }
h2 { scroll-margin-top: 16px; }

/* Page précédente / suivante, mise à jour */
.api-prevnext { display: flex; justify-content: space-between; gap: 14px; margin: 34px 0 10px 0; }
.api-prevnext a { flex: 1 1 0; padding: 12px 16px; border: 1px solid #cfd9f2; border-radius: 10px; background: #fff; text-decoration: none; }
.api-prevnext a:hover { background: #eef2fb; }
.api-prevnext .api-pn-sens { display: block; font-size: 12px; color: #6b78a8; text-transform: uppercase; letter-spacing: .04em; }
.api-prevnext .api-pn-suiv { text-align: right; }
.api-maj { margin: 6px 0 26px 0; font-size: 13px; color: #7a8299; }

/* Routes : méthode en couleur */
.api-route { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 22px 0; padding: 12px 16px;
             border: 1px solid #cfd9f2; border-radius: 10px; background: #f6f8fc; }
.api-methode { display: inline-block; min-width: 54px; text-align: center; padding: 2px 10px; border-radius: 6px; color: #fff;
               font-weight: 700; font-size: 13px; letter-spacing: .03em; }
.api-GET { background: #1f9d55; }
.api-POST { background: #3050ac; }
.api-PUT { background: #d97706; }
.api-route .api-code { font-size: 14px; background: transparent; padding: 0; }

/* Blocs de code : bouton Copier, coloration du JSON */
.api-bloc { position: relative; }
.api-bloc pre.api-json { margin-bottom: 0; }
.api-bloc { margin: 14px 0 24px 0; }
.api-barre { position: absolute; top: 8px; right: 10px; display: flex; gap: 6px; }
.api-btn { font: 600 12px/1 "Open Sans", Arial, sans-serif; padding: 6px 10px; border-radius: 6px; cursor: pointer;
           border: 1px solid #b4c0e6; background: #fff; color: #3050ac; }
.api-btn:hover { background: #eef2fb; }
.api-btn-ok { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.j-k { color: #1e55c4; }
.j-s { color: #1b7f4a; }
.j-n { color: #b45309; }
.j-b { color: #a31d9a; }
.api-bloc pre.api-json { padding-right: 150px; }
.api-bloc pre.api-json.api-sans-btn { padding-right: 18px; }

/* Zone « votre adresse et votre clé » */
.api-perso { margin: 0 0 22px 0; padding: 12px 16px; border: 2px solid #3050ac; border-radius: 10px; background: #E3F7FF; }
.api-perso > summary { cursor: pointer; font-weight: 700; color: #3050ac; }
.api-perso-corps { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.api-perso label { display: block; flex: 1 1 260px; font-size: 13px; color: #3050ac; font-weight: 600; }
.api-perso input[type=text], .api-perso input[type=password] { display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
           padding: 8px 10px; border: 1px solid #b4c0e6; border-radius: 6px; font: 14px Menlo, Consolas, monospace; }
.api-perso .api-perso-aide { flex: 1 1 100%; font-size: 13px; color: #44507a; margin: 0; }
/* base.css retire l'apparence de tous les <input> (appearance: none) : une case à cocher n'afficherait jamais son coche. On lui rend l'apparence native. */
.api-perso .api-perso-memo { display: inline; margin: 0; }
.api-perso .api-perso-memo input[type=checkbox] {
    -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: auto;
    display: inline-block; width: 18px; height: 18px; max-width: none; margin: 0 4px; padding: 0;
    vertical-align: -3px; border: 0; background: none; accent-color: #3050ac; cursor: pointer;
}
.api-perso .api-perso-aide label { display: inline; font-weight: 400; color: #44507a; }

/* Résultat du bouton Essayer */
.api-essai { margin: -10px 0 24px 0; }
.api-essai-etat { font-size: 13px; margin: 6px 0; font-weight: 600; }
.api-essai-etat.api-ok { color: #1f9d55; }
.api-essai-etat.api-ko { color: #b91c1c; }
pre.api-essai-corps { margin: 0; max-height: 380px; }

/* Encadré des particularités */
.api-particularites ul { margin: 6px 0 0 18px; padding: 0; }
.api-particularites li { margin: 5px 0; }

/* Téléchargements */
.api-telecharger { display: inline-block; margin: 4px 8px 12px 0; padding: 10px 16px; border-radius: 8px; background: #3050ac; color: #fff !important;
                   text-decoration: none; font-weight: 600; }
.api-telecharger:hover { background: #243b85; }