/* ============================================================
   La documentation de l'API et du serveur MCP.

   Complément de /css/nexus.css, jamais un remplacement. Ce qu'on ajoute ici
   n'existe nulle part ailleurs sur le site : une colonne de sommaire, une
   recherche, et des pages qui se remplacent au lieu de s'empiler.

   Le rouleau d'origine faisait quarante-six mètres. On n'en montre plus
   qu'une page à la fois — et la colonne de gauche dit toujours où l'on est.
   ============================================================ */

/* ---------------- la charpente ---------------- */
.doc-hero{padding-bottom:clamp(20px,3vw,30px)}
.doc-section{padding-top:clamp(26px,4vw,40px)!important}
/* La référence prend la largeur de l'écran : ce n'est pas un article, c'est
   une application qu'on consulte. Au gabarit du site (1180), la colonne du
   milieu tombait à 425 pixels dès qu'on lui adjoignait les encadrés — trois
   colonnes dans la largeur de deux. */
.doc-hero > .wrap,
.doc-shell{max-width:1560px}
.doc-shell{
  display:grid;grid-template-columns:248px minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:start;
}
@media (max-width:1100px){.doc-shell{grid-template-columns:1fr}}

/* ---------------- la colonne de gauche ---------------- */
/* FIXE, et sur toute la hauteur de la fenêtre : elle ne défile pas avec la
   page, elle défile DANS elle-même. Un sommaire qui s'en va au premier
   mouvement de molette ne sert qu'à choisir une fois. */
.doc-nav{
  position:sticky;top:92px;height:calc(100vh - 116px);
  display:flex;flex-direction:column;min-height:0;
}
/* Le volet : sur grand écran il n'existe pas — c'est la colonne elle-même,
   qui doit rester une pile flexible pour que le sommaire prenne la hauteur
   restante et défile seul. */
.doc-volet{display:flex;flex-direction:column;flex:1;min-height:0}
.doc-selecteur{display:none}

@media (max-width:1100px){
  .doc-nav{
    position:sticky;top:0;z-index:30;height:auto;margin:0 0 18px;
    background:var(--bg-base);border-bottom:1px solid var(--border);
    padding:10px 0;
  }
  /* Le titre reste dans le document — un h1 est dû — mais il cède la place :
     la barre doit tenir sur une ligne. */
  .doc-titre{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .doc-selecteur{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:11px 14px;cursor:pointer;
    border:1px solid var(--border-strong);border-radius:var(--radius);
    background:var(--bg-raised);color:var(--text-primary);
    font-family:inherit;font-size:14.5px;font-weight:500;text-align:left;
  }
  .doc-selecteur .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .doc-selecteur svg{
    width:17px;height:17px;flex:none;fill:none;stroke:var(--text-tertiary);
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
    transition:transform var(--dur) var(--ease);
  }
  .doc-selecteur[aria-expanded="true"] svg{transform:rotate(180deg)}

  /* Le volet : posé PAR-DESSUS le contenu, jamais poussé au-dessus de lui.
     Une liste de soixante entrées insérée dans le flux repousserait la page
     qu'on vient d'ouvrir à deux écrans plus bas. */
  .doc-volet{
    display:none;position:absolute;left:0;right:0;top:calc(100% - 10px);
    max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;
    padding:12px;background:var(--bg-overlay);
    border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
  }
  .doc-volet[data-ouvert]{display:block}
  .doc-sommaire{margin-top:12px;overflow:visible}
  .doc-resultats{max-height:none}
}

.doc-chercher{position:relative;flex:none}
.doc-chercher svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--text-tertiary);
  stroke-width:1.8;stroke-linecap:round;pointer-events:none;
}
.doc-chercher input{padding-left:34px;font-size:13.5px}
/* la croix native du champ de recherche jure avec la palette : on la retire */
.doc-chercher input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* `display` et `margin-left` sont REPRIS à la règle globale `nav{}` de
   l'en-tête, qui met ses enfants en ligne et pousse la barre à droite. Sans
   ces deux lignes, les trois groupes du sommaire s'affichaient côte à côte,
   en trois colonnes de quatre-vingt-dix pixels. */
.doc-sommaire{
  display:block;margin:16px 0 0;padding-right:4px;
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
}
/* Une entrée trop longue s'abrège : sans cela, la colonne se donne une barre
   de défilement horizontale, et le titre reste illisible malgré tout. */
.doc-groupe a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-groupe{margin-bottom:18px}
.doc-groupe b{
  display:block;margin-bottom:7px;font-size:11.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);
}
.doc-groupe a{
  display:block;padding:5px 10px;margin-left:-10px;border-radius:var(--radius-sm);
  font-size:13.5px;line-height:1.45;color:var(--text-secondary);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.doc-groupe a:hover{color:var(--text-primary);background:var(--bg-hover)}
/* La page courante : un liseré, pas un aplat — la colonne reste calme. */
.doc-groupe a.actif{
  color:var(--text-primary);background:var(--bg-raised);
  box-shadow:inset 2px 0 0 var(--accent);
}

/* ---------------- les résultats de recherche ---------------- */
.doc-resultats{
  margin-top:10px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-raised);max-height:60vh;overflow-y:auto;
}
.doc-resultats[hidden]{display:none}
.doc-resultat{
  display:block;padding:9px 12px;border-bottom:1px solid var(--border);color:inherit;
}
.doc-resultat:last-child{border-bottom:0}
.doc-resultat:hover,.doc-resultat.vise{background:var(--bg-hover);color:inherit}
.doc-resultat .t{display:block;font-size:13px;color:var(--text-primary)}
.doc-resultat .s{
  display:block;margin-top:2px;font-size:12px;color:var(--text-tertiary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.doc-resultat .g{
  float:right;font-size:10.5px;letter-spacing:.04em;color:var(--text-disabled);
}
.doc-vide{padding:14px 12px;font-size:13px;color:var(--text-tertiary)}

/* ---------------- le contenu, et la colonne des encadrés ----------------
 *
 * Trois colonnes, comme une référence d'API doit l'être : le sommaire, le
 * texte, et à droite ce qu'on VA COPIER — l'adresse, l'en-tête, l'appel type.
 * Ces encadrés sont collants : on garde la commande sous les yeux en lisant la
 * route qu'elle appelle.
 */
.doc-contenu{min-width:0}
.doc-page{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:clamp(24px,3vw,44px);align-items:start;
}
.doc-principal{min-width:0;max-width:72ch}
.doc-aside{position:sticky;top:100px;min-width:0}
@media (max-width:1240px){
  .doc-page{grid-template-columns:1fr}
  .doc-aside{position:static;margin-top:26px}
}
.doc-encart{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-raised);padding:16px 18px;
}
.doc-encart + .doc-encart{margin-top:14px}
.doc-encart h4{
  margin:0 0 10px;font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-tertiary);
}
.doc-encart p{
  font-family:var(--font-sans);font-size:13px;line-height:1.6;
  color:var(--text-secondary);margin:0 0 10px;
}
.doc-encart p:last-child{margin-bottom:0}
.doc-encart pre{
  background:var(--bg-terminal);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 12px;overflow-x:auto;margin:0 0 10px;
}
.doc-encart pre:last-child{margin-bottom:0}
.doc-encart pre code{font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--text-primary)}
/* Une paire par ligne, jamais deux : dans 300 pixels, deux colonnes de paires
   réduisent chaque description à trois mots par ligne. */
.doc-encart dl{margin:0;font-size:12.5px}
.doc-encart dl > div{
  display:grid;grid-template-columns:minmax(44px,auto) 1fr;gap:4px 12px;
  padding:6px 0;border-top:1px solid var(--border);
}
.doc-encart dl > div:first-child{border-top:0;padding-top:0}
.doc-encart dt{font-family:var(--font-mono);color:var(--text-primary)}
.doc-encart dd{margin:0;color:var(--text-secondary);line-height:1.5;overflow-wrap:anywhere}
/* Le code se replie plutôt que de défiler : une commande coupée à droite,
   dans une colonne de 300 pixels, ne se lit pas et ne se vérifie pas. */
.doc-encart pre code{white-space:pre-wrap;word-break:break-word}
.doc-encart ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--text-secondary);line-height:1.6}
.doc-encart li+li{margin-top:5px}
/* La page d'entrée n'a rien à mettre à droite : ses deux cartes prennent la
   largeur, plutôt que de laisser une colonne vide à côté d'elles. */
.doc-page-large{grid-template-columns:1fr}
.doc-page-large .doc-principal{max-width:none}
.doc-page[hidden]{display:none}
.doc-page > h2{font-size:clamp(21px,2.8vw,27px);margin-bottom:6px}
.doc-page h3{font-size:16px;font-weight:600;margin:26px 0 8px}
.doc-page p{
  font-size:14.5px;line-height:1.65;
  color:var(--text-secondary);margin-bottom:13px;
}
.doc-page p strong{color:var(--text-primary);font-weight:600}
.doc-intro{margin-bottom:20px!important;color:var(--text-tertiary)!important}
.doc-page code{
  font-family:var(--font-mono);font-size:.86em;color:var(--data-text);
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:1px 5px;
}
.doc-page pre{
  background:var(--bg-terminal);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;overflow-x:auto;margin:0 0 16px;
}
.doc-page pre code{background:none;border:0;padding:0;color:var(--text-primary);font-size:12.5px}

/* ---------------- les deux cartes d'entrée ---------------- */
.doc-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.doc-carte{
  display:block;padding:26px;color:inherit;
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.doc-carte:hover{
  border-color:var(--accent-border);background:var(--bg-hover);
  transform:translateY(-2px);color:inherit;
}
.doc-carte svg{
  width:22px;height:22px;fill:none;stroke:var(--accent-text);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.doc-carte h2{font-size:17px;margin:14px 0 8px}
.doc-carte p{font-family:var(--font-sans);font-size:13.5px;line-height:1.6;margin:0}
.doc-suivre{
  display:inline-block;margin-top:14px;font-size:13px;font-weight:500;color:var(--accent-text);
}

/* ---------------- une route ---------------- */
.ep,.outil{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-raised);padding:14px 16px;margin-bottom:12px;
}
/* Visée depuis la recherche : le temps de la retrouver des yeux. */
.ep.vise,.outil.vise{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-ring)}
.ep-tete,.outil-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.method{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;
  padding:3px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--bg-overlay);color:var(--text-secondary);
}
.method.get{border-color:var(--success-border);background:var(--success-muted);color:var(--success-text)}
.method.post{border-color:var(--accent-border);background:var(--accent-muted);color:var(--accent-text)}
.method.put,.method.patch{border-color:var(--warning-border);background:var(--warning-muted);color:var(--warning-text)}
.method.delete{border-color:var(--danger-border);background:var(--danger-muted);color:var(--danger-text)}
.ep-chemin,.outil-nom{
  font-family:var(--font-mono);font-size:13px;color:var(--text-primary);
  overflow-wrap:anywhere;
}
.outil-titre{font-size:13px;color:var(--text-tertiary)}
.etiq{
  font-size:11px;letter-spacing:.03em;padding:2px 8px;border-radius:var(--radius-full);
  border:1px solid var(--border);background:var(--bg-overlay);color:var(--text-tertiary);
}
.etiq.admin{border-color:var(--warning-border);background:var(--warning-muted);color:var(--warning-text)}
.ep-resume,.outil-desc{
  font-size:14px;line-height:1.6;
  color:var(--text-secondary);margin:9px 0 0!important;
}
.ep-detail{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.ep-detail div{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin-top:5px}
.ep-detail b{
  display:inline-block;min-width:74px;font-size:11px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);
}
.outil-params{margin:10px 0 0;padding-left:18px}
.outil-params li{font-size:12.5px;line-height:1.6;color:var(--text-secondary);margin-bottom:3px}
.outil-params .p{font-family:var(--font-mono);color:var(--text-primary)}
.outil-params .t{font-size:11.5px;color:var(--text-tertiary)}

/* ============================================================
   LE MODE APPLICATION
   ------------------------------------------------------------
   La référence n'est pas une page, c'est un tableau de bord : la
   fenêtre ne défile pas, ce sont les DEUX colonnes qui défilent,
   chacune de son côté. On lit une route sans perdre le sommaire,
   et on parcourt le sommaire sans perdre la route.

   Tout est sous condition de largeur : en dessous de 1100 pixels,
   deux zones de défilement l'une à côté de l'autre deviennent un
   piège au doigt — la page redevient une page, qui défile.
   ============================================================ */
@media (min-width:1101px){
  html:has(body.doc-app){overflow:hidden}
  body.doc-app{height:100vh;overflow:hidden}
  .doc-app .shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}

  /* L'en-tête reste au-dessus des deux colonnes, et ne défile plus avec
     rien : la page ne bouge pas. */
  .doc-app header{position:relative;flex:none}
  .doc-app main{flex:1;min-height:0;display:block;overflow:hidden}

  .doc-app .doc-section{
    height:100%;padding:0!important;border-top:0;overflow:hidden;
  }
  .doc-app .doc-shell{
    max-width:none;width:100%;height:100%;padding:0;gap:0;
    grid-template-columns:296px minmax(0,1fr);
  }

  /* La colonne : toute la hauteur sous la barre, collée au bord, avec son
     propre défilement. C'est le rail d'un tableau de bord, pas un encart. */
  .doc-app .doc-nav{
    position:static;height:100%;min-height:0;margin:0;
    padding:22px 12px 0 clamp(18px,2.4vw,34px);
    border-right:1px solid var(--border);background:var(--bg-base);
  }
  .doc-app .doc-sommaire{margin-top:14px;padding-bottom:28px}

  /* Le contenu : l'autre zone qui défile. */
  .doc-app .doc-contenu{
    height:100%;overflow-y:auto;
    padding:30px clamp(22px,3vw,52px) 80px;
  }
  /* Une colonne arrivée en butée n'entraîne pas l'autre : sans cela, finir le
     sommaire ferait repartir le contenu, et l'on défilerait les deux à la
     fois sans l'avoir demandé. */
  .doc-app .doc-sommaire,
  .doc-app .doc-contenu{overscroll-behavior:contain}
  .doc-app .doc-page{max-width:1180px}
  .doc-app .doc-aside{top:0}

  /* Le pied de page du site n'a plus de place dans une fenêtre qui ne défile
     pas : ses liens vivent au bas de la colonne (voir `.doc-pied`). */
  .doc-app footer{display:none}

  /* Des barres de défilement discrètes : on doit deviner qu'une colonne
     défile, sans qu'un rail clair coupe l'écran en deux. */
  .doc-app .doc-sommaire,
  .doc-app .doc-contenu{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
  .doc-app .doc-sommaire::-webkit-scrollbar,
  .doc-app .doc-contenu::-webkit-scrollbar{width:10px}
  .doc-app .doc-sommaire::-webkit-scrollbar-thumb,
  .doc-app .doc-contenu::-webkit-scrollbar-thumb{
    background:var(--border-strong);border-radius:999px;
    border:3px solid var(--bg-base);
  }
  .doc-app .doc-sommaire::-webkit-scrollbar-track,
  .doc-app .doc-contenu::-webkit-scrollbar-track{background:transparent}
}

/* ---------------- le titre de la documentation ---------------- */
.doc-titre{flex:none;margin-bottom:16px}
.doc-titre h1{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}
.doc-titre p{margin-top:5px;font-size:12px;line-height:1.5;color:var(--text-tertiary)}

/* ---------------- le pied de la colonne ---------------- */
.doc-pied{
  display:flex;flex-wrap:wrap;gap:4px 14px;
  margin-top:8px;padding-top:14px;border-top:1px solid var(--border);
}
.doc-pied a{font-size:12px;color:var(--text-tertiary)}
.doc-pied a:hover{color:var(--text-primary)}