/* Page Console : pleine page, aérée */
html body.aventure.aventure .api.cn-main { width: min(1480px, calc(100% - 32px)); gap: 22px; }
.cn-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px); }
.cn-entete-texte { min-width: 0; }
html body.aventure .api .cn-entete h1 { margin: 8px 0 6px; }
.cn-entete .api-chapo { max-width: 62ch; }
.cn-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cn-badges li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--cadre-bord); border-radius: 12px; background: var(--champ); font-size: .92rem; }
.cn-badges strong { color: var(--encre-texte); font: 400 1rem/1 var(--bd); }

.cn-page { padding: clamp(18px, 2.4vw, 32px); }
#console-app { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }

/* Colonne des routes */
.cn-routes { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 112px); box-sizing: border-box; padding: 20px 14px 14px 18px; border: 1px solid var(--cadre-bord); border-radius: 18px; background: var(--champ); }
.cn-routes-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 4px; }
html body.aventure .cn-routes h2 { margin: 0; font-size: 1.35rem; }
.cn-compte { min-width: 1.8em; padding: 1px 9px; border-radius: 999px; color: #fff; background: #1a90f2; font: 400 .85rem/1.6 var(--bd); text-align: center; }
.cn-recherche { padding-right: 4px; }
.cn-recherche input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--cadre-bord); border-radius: 12px; color: var(--texte-papier); background: var(--papier); font: inherit; font-size: 1rem; }
.cn-recherche input:focus-visible { outline: 3px solid #ffb300; outline-offset: 1px; }
.cn-liste { display: grid; flex: 1; align-content: start; gap: 22px; min-height: 0; padding: 4px 8px 6px 0; overflow-y: auto; }
.cn-groupe[hidden], .cn-route[hidden] { display: none; }
.cn-groupe { display: grid; gap: 4px; }
html body.aventure .cn-groupe h3 { margin: 0 0 6px 4px; color: var(--doux-papier); font: 400 .82rem/1.2 var(--bd); letter-spacing: .08em; text-transform: uppercase; }
.cn-route { display: grid; gap: 3px; width: 100%; padding: 11px 14px; border: 1px solid transparent; border-radius: 12px; color: var(--texte-papier); background: none; text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
.cn-route:hover { background: var(--papier); }
.cn-route[aria-selected="true"] { border-color: var(--cadre-bord); background: var(--papier); box-shadow: inset 4px 0 0 #ffb300; }
.cn-route:focus-visible { outline: 3px solid #ffb300; outline-offset: 1px; }
.cn-route-ligne { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cn-route .api-methode { flex: none; font-size: .78rem; }
.cn-route-chemin { overflow: hidden; color: var(--encre-texte); font: 500 .95rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.cn-route-titre { padding-left: 34px; font-size: .88rem; opacity: .78; }
.cn-vide { margin: 8px 4px; font-size: .95rem; opacity: .8; }

/* Colonne centrale */
.cn-centre { display: grid; gap: 26px; min-width: 0; }
.cn-carte { min-width: 0; padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--cadre-bord); border-radius: 20px; background: var(--champ); box-shadow: var(--cadre-ombre-douce); }
.cn-carte-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
html body.aventure .cn-carte h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.cn-formulaire { display: grid; gap: 20px; }
.cn-etiquette { color: var(--encre-texte); font: 400 .95rem/1 var(--bd); letter-spacing: .04em; text-transform: uppercase; }
.cn-barre { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border-radius: 16px; background: #1d2138; box-shadow: inset 0 0 0 1px rgb(200 215 255 / .1); }
.cn-barre:focus-within { box-shadow: 0 0 0 3px #ffb300; }
.cn-methode { flex: none; color: #ffd04a; font: 400 1rem/1 var(--bd); letter-spacing: .05em; }
.cn-url { flex: 1; min-width: 0; padding: 12px 4px; border: 0; color: #e8f4ff; background: transparent; font: 500 1.08rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cn-url:focus, .cn-url:focus-visible { outline: 0; box-shadow: none; }
.cn-envoyer { display: inline-flex; flex: none; align-items: center; gap: 12px; min-height: 52px; padding: 6px 26px; font-size: 1.05rem; cursor: pointer; }
.cn-envoyer kbd { padding: 2px 7px; border-radius: 6px; background: rgb(0 0 0 / .25); font: 500 .74rem/1.4 ui-monospace, monospace; }
.cn-info { max-width: 78ch; margin: 0; font-size: 1.02rem; line-height: 1.65; }
.cn-info[hidden] { display: none; }
.cn-bloc-params { display: grid; gap: 14px; padding-top: 22px; border-top: 1px dashed var(--cadre-bord); }
.cn-bloc-params[hidden] { display: none; }
html body.aventure .cn-bloc-params h3 { margin: 0; font: 400 1.1rem/1.2 var(--bd); }
.cn-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px 24px; }
.cn-champ { display: grid; align-content: start; gap: 8px; min-width: 0; }
.cn-champ label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cn-champ-nom { color: var(--encre-texte); font: 700 1rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cn-champ-tag { padding: 1px 9px; border-radius: 999px; background: var(--papier); font-size: .76rem; opacity: .85; }
.cn-champ-tag.cn-requis { color: #fff; background: #e4572e; opacity: 1; }
.cn-champ input, .cn-champ select { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--cadre-bord); border-radius: 12px; color: var(--texte-papier); background: var(--papier); font: inherit; font-size: 1.02rem; }
.cn-champ input:focus-visible, .cn-champ select:focus-visible { outline: 3px solid #ffb300; outline-offset: 1px; }
.cn-champ small { font-size: .88rem; line-height: 1.45; opacity: .75; }

/* Réponse */
.cn-statut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cn-badge { padding: 5px 16px; border-radius: 10px; color: #fff; font: 400 1.1rem/1.4 var(--bd); background: #6b7499; }
.cn-badge[data-etat="ok"] { background: #3fa66c; }
.cn-badge[data-etat="client"] { background: #d9801a; }
.cn-badge[data-etat="serveur"], .cn-badge[data-etat="erreur"] { background: #e4572e; }
.cn-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-puce { padding: 4px 12px; border: 1px solid var(--cadre-bord); border-radius: 999px; background: var(--papier); font-size: .9rem; }
.cn-onglets { display: flex; gap: 6px; border-bottom: 2px solid var(--cadre-bord); }
.cn-onglets button { margin-bottom: -2px; padding: 10px 20px; border: 0; border-bottom: 3px solid transparent; color: var(--texte-papier); background: none; font: 400 1.05rem/1 var(--bd); cursor: pointer; opacity: .75; }
.cn-onglets button:hover { opacity: 1; }
.cn-onglets button[aria-selected="true"] { border-bottom-color: #ffb300; color: var(--encre-texte); opacity: 1; }
.cn-onglets-petits { gap: 6px; border: 0; }
.cn-onglets-petits button { margin: 0; padding: 7px 16px; border: 1px solid rgb(200 215 255 / .2); border-radius: 10px; color: #cfd9f6; font-size: .95rem; }
.cn-onglets-petits button[aria-selected="true"] { border-color: transparent; color: #33230a; background: linear-gradient(180deg, #ffd04a, #ffb300); }
.cn-volet { position: relative; display: grid; gap: 14px; margin-top: 20px; padding: 22px 24px 24px; border-radius: 16px; background: #1d2138; box-shadow: inset 0 0 0 1px rgb(200 215 255 / .08); }
.cn-volet[hidden] { display: none; }
.cn-outils { display: flex; justify-content: flex-end; gap: 8px; }
.cn-outils-code { justify-content: space-between; }
.cn-petit { padding: 6px 16px; border: 1px solid rgb(200 215 255 / .25); border-radius: 10px; color: #cfd9f6; background: #2a2f4e; font: 400 .95rem/1.3 var(--bd); cursor: pointer; }
.cn-petit:hover { color: #fff; background: #3a4170; }
.cn-petit[aria-pressed="true"] { color: #33230a; background: linear-gradient(180deg, #ffd04a, #ffb300); }
.cn-sortie { max-height: 640px; margin: 0; overflow: auto; color: #e8f4ff; font: 500 1.02rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.cn-sortie[hidden], .cn-vide-reponse[hidden] { display: none; }
html body.aventure .cn-page code { padding: 0; border: 0; background: none; font: inherit; }
.cn-vide-reponse { display: grid; justify-items: center; gap: 6px; padding: 46px 20px 50px; color: #b8c4dc; text-align: center; }
.cn-vide-reponse strong { color: #e8f4ff; font: 400 1.2rem/1.3 var(--bd); }
.cn-vide-icone { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 16px; color: #33230a; background: linear-gradient(180deg, #ffd04a, #ffb300); font-size: 1.3rem; }
.cn-entetes { overflow: auto; }
.cn-entetes table { width: 100%; border-collapse: collapse; color: #e8f4ff; font-size: .98rem; }
.cn-entetes th, .cn-entetes td { padding: 10px 12px; border-bottom: 1px solid rgb(200 215 255 / .12); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cn-entetes th { width: 32%; color: #7fdcff; font: 500 .95rem/1.5 ui-monospace, monospace; }
.cn-pied { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0 4px; font-size: .9rem; opacity: .75; }

/* Barres de défilement : comme le wiki Nalyora */
.cn-liste, .cn-sortie, .cn-entetes { scrollbar-width: thin; scrollbar-color: #1a90f2 transparent; }
.cn-liste::-webkit-scrollbar, .cn-sortie::-webkit-scrollbar, .cn-entetes::-webkit-scrollbar { width: 10px; height: 10px; }
.cn-liste::-webkit-scrollbar-track { border-radius: 999px; background: var(--papier); }
.cn-sortie::-webkit-scrollbar-track, .cn-entetes::-webkit-scrollbar-track { border-radius: 999px; background: rgb(255 255 255 / .06); }
.cn-liste::-webkit-scrollbar-thumb { border: 2px solid var(--papier); border-radius: 999px; background: linear-gradient(180deg, #4cc6f7, #1a90f2); }
.cn-sortie::-webkit-scrollbar-thumb, .cn-entetes::-webkit-scrollbar-thumb { border: 2px solid #1d2138; border-radius: 999px; background: linear-gradient(180deg, #4cc6f7, #1a90f2); }
.cn-liste::-webkit-scrollbar-thumb:hover, .cn-sortie::-webkit-scrollbar-thumb:hover, .cn-entetes::-webkit-scrollbar-thumb:hover { background: #1a90f2; }
.cn-sortie::-webkit-scrollbar-corner { background: transparent; }

@media (max-width: 1000px) {
  #console-app { grid-template-columns: minmax(0, 1fr); }
  .cn-routes { position: static; max-height: 340px; }
}
@media (max-width: 620px) {
  .cn-barre { flex-wrap: wrap; padding: 12px; }
  .cn-url { flex-basis: 100%; order: 3; }
  .cn-envoyer { margin-left: auto; }
  .cn-volet { padding: 16px 14px; }
  .cn-onglets button { padding: 10px 12px; }
}

/* ---------- Taille réduite ---------- */
html body.aventure.aventure .api.cn-main { width: min(1320px, calc(100% - 32px)); gap: 16px; }
.cn-entete { padding: 16px 22px; }
html body.aventure .api .cn-entete h1 { margin: 6px 0 4px; font-size: 1.7rem; }
.cn-entete .api-chapo { font-size: .92rem; }
.cn-badges li { padding: 5px 11px; font-size: .82rem; border-radius: 10px; }
.cn-badges strong { font-size: .88rem; }
.cn-page { padding: 16px; }
#console-app { grid-template-columns: 270px minmax(0, 1fr); gap: 18px; }

.cn-routes { gap: 10px; max-height: calc(100vh - 108px); padding: 14px 8px 10px 12px; border-radius: 14px; }
html body.aventure .cn-routes h2 { font-size: 1.05rem; }
.cn-compte { font-size: .72rem; padding: 0 7px; }
.cn-recherche input { height: 34px; padding: 0 10px; border-radius: 9px; font-size: .88rem; }
.cn-liste { gap: 12px; }
html body.aventure .cn-groupe h3 { margin: 0 0 3px 4px; font-size: .7rem; }
.cn-groupe { gap: 1px; }
.cn-route { gap: 1px; padding: 6px 9px; border-radius: 9px; }
.cn-route .api-methode { font-size: .66rem; }
.cn-route-chemin { font-size: .8rem; }
.cn-route-titre { padding-left: 27px; font-size: .75rem; }
.cn-route-ligne { gap: 7px; }
.cn-vide { font-size: .85rem; }

.cn-centre { gap: 16px; }
.cn-carte { padding: 18px 20px; border-radius: 14px; }
.cn-carte-tete { gap: 8px 14px; margin-bottom: 12px; }
html body.aventure .cn-carte h2 { font-size: 1.15rem; }
.cn-formulaire { gap: 12px; }
.cn-etiquette { font-size: .72rem; }
.cn-barre { gap: 10px; padding: 5px 5px 5px 14px; border-radius: 11px; }
.cn-methode { font-size: .82rem; }
.cn-url { padding: 8px 2px; font-size: .9rem; }
.cn-envoyer { gap: 8px; min-height: 36px; padding: 3px 16px; font-size: .88rem; }
.cn-envoyer kbd { padding: 1px 5px; font-size: .62rem; }
.cn-info { font-size: .88rem; line-height: 1.5; }
.cn-bloc-params { gap: 10px; padding-top: 14px; }
html body.aventure .cn-bloc-params h3 { font-size: .95rem; }
.cn-params { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 16px; }
.cn-champ { gap: 5px; }
.cn-champ-nom { font-size: .85rem; }
.cn-champ-tag { padding: 0 7px; font-size: .66rem; }
.cn-champ input, .cn-champ select { height: 36px; padding: 0 10px; border-radius: 9px; font-size: .9rem; }
.cn-champ small { font-size: .76rem; }

.cn-statut { gap: 7px; }
.cn-badge { padding: 2px 11px; border-radius: 8px; font-size: .92rem; }
.cn-puces { gap: 6px; }
.cn-puce { padding: 2px 9px; font-size: .76rem; }
.cn-onglets button { padding: 7px 14px; font-size: .9rem; }
.cn-onglets-petits button { padding: 4px 11px; border-radius: 8px; font-size: .8rem; }
.cn-volet { gap: 10px; margin-top: 12px; padding: 14px 16px 16px; border-radius: 12px; }
.cn-petit { padding: 3px 11px; border-radius: 8px; font-size: .78rem; }
.cn-sortie { max-height: 460px; font-size: .86rem; line-height: 1.6; }
.cn-vide-reponse { gap: 4px; padding: 26px 16px 30px; }
.cn-vide-reponse strong { font-size: 1rem; }
.cn-vide-reponse span:last-child { font-size: .85rem; }
.cn-vide-icone { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
.cn-entetes table { font-size: .84rem; }
.cn-entetes th, .cn-entetes td { padding: 6px 9px; }
.cn-entetes th { font-size: .82rem; }
.cn-pied { gap: 6px 18px; font-size: .78rem; }

@media (max-width: 1000px) { #console-app { grid-template-columns: minmax(0, 1fr); } }

/* Remontée de la page */
html body.aventure.aventure .api.cn-main { margin-top: 84px; margin-bottom: 40px; gap: 14px; }
.cn-entete { padding: 12px 20px; }
html body.aventure .api .cn-entete h1 { margin: 4px 0 2px; font-size: 1.5rem; }
.cn-entete .api-chapo { font-size: .88rem; }
.cn-routes { top: 84px; max-height: calc(100vh - 100px); }