/* ==========================================================================
   DOCS PAGE — Mextyl Liquid Glass Design System (v2 — single-section view,
   suppression du panneau "On this page", layout 2 colonnes à hauteur fixe)
   ========================================================================== */

:root{
  --ar-ink: var(--ink-text, #0a0a0a);
  --ar-ink-soft: var(--ink-text-muted, #8a8a92);
  --ar-border: rgba(10,10,10,.10);
  --ar-white: #ffffff;
  --ar-orange: var(--carta-orange, #f2703e);
  --ar-orange-2: #f6935f;
  --ar-orange-rgb: 242,112,62;

  --ar-get: #178a53;   --ar-get-rgb: 23,138,83;
  --ar-mcp: #6d5bd0; --ar-mcp-rgb: 109,91,208;
  --ar-gray-rgb: 120,113,108;

  --ar-2xx: var(--ar-get);   --ar-2xx-rgb: var(--ar-get-rgb);
  --ar-4xx: #c2410c;         --ar-4xx-rgb: 194,65,12;
  --ar-5xx: #c23b3b;         --ar-5xx-rgb: 194,59,59;

  --ar-code-bg: #ffffff;
  --ar-code-bg-solid: #f7f6f4;

  --doc-sidebar-w: 280px;
  --ar-radius: 14px;
  --ar-nav-h: 72px; /* doit correspondre EXACTEMENT à la hauteur réelle de .lp-nav */

  /* Glass — teintes neutres (identique api-reference.css) */
  --glass-bg: rgba(255,255,255,.6);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-bg-soft: rgba(255,255,255,.4);
  --glass-border: rgba(10,10,10,.08);
  --glass-shadow: 0 8px 32px rgba(10,10,10,.07), 0 1px 2px rgba(10,10,10,.04);
  --glass-shadow-strong: 0 24px 64px rgba(10,10,10,.12), 0 4px 16px rgba(10,10,10,.06);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.4);
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-strong: blur(30px) saturate(190%);
}

/* Neutralise le fond bleu/gradient hérité de landing-institutional.css (body.lp-page) */
html.doc-html,
body.doc-page,
body.doc-page::before,
body.doc-page::after {
  background: #ffffff !important;
  background-image: none !important;
}
.doc-shell{ background: #ffffff; }

*{ box-sizing:border-box; }

/* ==========================================================================
   LAYOUT GLOBAL — hauteur fixe, identique à api-reference.css
   ========================================================================== */
html.doc-html, body.doc-page{
  margin:0;
  height:100%;
  background:#ffffff;
  overflow:hidden;
}
body.doc-page{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100vh;
}
body.doc-page nav.lp-nav{
  position:sticky !important;
  top:0;
  z-index:1000;
  background:#ffffff;
  height:var(--ar-nav-h);
  flex:0 0 auto;
}

.doc-page *{ box-sizing:border-box; }
.doc-page code{ font-family:'SF Mono',Consolas,monospace; }
.doc-page ion-icon{ pointer-events:none; }

/* Neutralise tout effet lien bleu hérité (landing-institutional.css) */
.doc-page a,
.doc-nav-link, .doc-nav-link:hover, .doc-nav-link:visited, .doc-nav-link:focus,
.doc-ref-link, .doc-ref-link:hover,
.ar-resp-tab, .ar-prevnext-btn, .ar-prevnext-btn:hover{
  color: inherit;
  text-decoration:none !important;
}
.doc-nav-link:hover{ color: var(--ar-ink) !important; }
.doc-ref-link{ color: var(--ar-orange) !important; }

.doc-page button:focus,
.doc-page a:focus,
.doc-page input:focus,
.doc-page [tabindex]:focus{
  outline:none !important;
  box-shadow:none;
}
.doc-page button:focus-visible,
.doc-page a:focus-visible{
  outline:2px solid rgba(10,10,10,.35) !important;
  outline-offset:2px;
}

body.doc-page::before{ content:none; background:none; }

/* ---------- Icon badges (repris de api-reference.css) ---------- */
.ar-icon-badge{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; flex-shrink:0; font-size:13px; }
.ar-icon-badge.on-dark{ background: rgba(10,10,10,.06); color:var(--ar-ink); cursor:pointer; transition:background .15s ease; }
.ar-icon-badge.on-dark:hover{ background:rgba(10,10,10,.12); }
.ar-icon-badge.ar-copied{ background:rgba(var(--ar-get-rgb),.16); color:var(--ar-get); }

/* ---------- SHELL — 2 colonnes, hauteur fixe (sidebar + main-col) ---------- */
.doc-shell{
  display:grid;
  grid-template-columns:var(--doc-sidebar-w) 1fr;
  align-items:stretch;
  height: calc(100vh - var(--ar-nav-h));
  max-height: calc(100vh - var(--ar-nav-h));
  min-height: 0;
  gap:0;
  overflow:hidden;
}
.doc-shell > *{ min-height:0; min-width:0; }

/* ---------- SIDEBAR — hauteur fixe, glass (identique .ar-sidebar) ---------- */
.doc-sidebar{
  height: calc(100% - 28px);
  max-height: calc(100% - 28px);
  min-height: 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:16px 14px 14px;
  margin:14px 8px 14px 14px;
  border-radius: var(--ar-radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
.doc-sidebar-fixed{ flex:0 0 auto; }
.doc-sidebar-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:2px;
  margin-right:-2px;
}

.doc-sidebar-search{
  display:flex; align-items:center; gap:8px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:999px; padding:9px 10px 9px 14px; margin-bottom:14px;
  overflow:hidden;
  flex-shrink:0;
}
.doc-sidebar-search input{ border:none;background:none;outline:none;font-size:.84rem;flex:1 1 auto;min-width:0;color:var(--ar-ink); font-family:var(--font-sans,'Inter',sans-serif); }
.doc-sidebar-search ion-icon{ color:var(--ar-ink-soft); font-size:15px; flex-shrink:0; }
.doc-sidebar-search kbd{
  font-size:.62rem; line-height:1; color:var(--ar-ink-soft); border:1px solid var(--ar-border);
  border-radius:5px; padding:3px 6px; background:rgba(0,0,0,.04); flex-shrink:0;
  white-space:nowrap;
}

.doc-nav{ min-width:0; }
.doc-nav-group{ margin-bottom:2px; min-width:0; }
.doc-nav-title{ font-size:.74rem; font-weight:700; color:var(--ar-ink); padding:14px 6px 8px; display:flex; align-items:center; justify-content:space-between; font-family: var(--font-sans,'Inter',sans-serif); gap:8px; }
.doc-nav-group:first-child .doc-nav-title{ padding-top:2px; }

.doc-nav-link{
  display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border-radius:10px;
  font-size:.84rem; color:var(--ar-ink); margin-bottom:2px; cursor:pointer; line-height:1.35;
  font-family: var(--font-sans,'Inter',sans-serif); transition:background .15s ease;
  min-width:0; width:100%;
}
.doc-nav-link:hover{ background: rgba(0,0,0,.05); }
.doc-nav-link.active{ background: var(--glass-bg-strong); font-weight:700; box-shadow: var(--glass-highlight); }

/* ---------- COLONNE PRINCIPALE — seule zone scrollable (identique .ar-main-col) ---------- */
.doc-main-col{
  min-width:0;
  height:100%;
  max-height:100%;
  min-height:0;
  align-self: stretch;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior: contain;
}

.doc-main{
  flex:1 0 auto;
  padding:24px 32px 8px 28px;
  max-width:840px;
}

.doc-breadcrumb{ font-size:.86rem; font-weight:600; color:var(--ar-orange); margin-bottom:8px; font-family: var(--font-sans,'Inter',sans-serif); }

/* ---------- SECTIONS — une seule visible à la fois ---------- */
.doc-section{ display:none; }
.doc-section.active{ display:block; animation: docSectionIn .18s ease; }
@keyframes docSectionIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.doc-section h1{ font-family: var(--font-serif,'Source Serif 4',serif); font-size:2rem; font-weight:500; margin:0 0 18px; line-height:1.2; letter-spacing:-0.015em; color:var(--ar-ink); }
.doc-lead{ color:var(--ink-text-secondary,#4a4a52); line-height:1.7; font-size:.98rem; max-width:700px; margin-bottom:22px; font-family: var(--font-sans,'Inter',sans-serif); }
.doc-section p{ color:var(--ink-text-secondary,#4d4a45); line-height:1.7; font-size:.92rem; margin-bottom:14px; font-family: var(--font-sans,'Inter',sans-serif); max-width:700px; }
.doc-list{ padding-left:20px; color:var(--ink-text-secondary,#4d4a45); line-height:1.8; font-size:.92rem; font-family: var(--font-sans,'Inter',sans-serif); max-width:700px; }
.doc-list code{ background:var(--ar-code-bg-solid); padding:2px 6px; border-radius:4px; color:var(--ar-orange); }
.doc-section p code{ background:var(--ar-code-bg-solid); padding:2px 6px; border-radius:4px; color:var(--ar-orange); font-size:.88em; }

.doc-callout{
  display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:12px; margin:20px 0;
  background: var(--glass-bg-soft); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); max-width:700px;
}
.doc-callout ion-icon{ color:var(--ar-orange); font-size:18px; flex-shrink:0; margin-top:1px; }
.doc-callout code{ color:var(--ar-orange); background:var(--ar-code-bg-solid); padding:2px 6px; border-radius:4px; }
.doc-callout div{ font-size:.9rem; color:var(--ar-ink); font-family: var(--font-sans,'Inter',sans-serif); }

/* ---------- Code blocks — même style que .ar-tryit-card / .ar-code-bg ---------- */
.doc-code-block{
  position:relative; border-radius:16px; margin:16px 0; overflow:hidden; max-width:700px;
  background: var(--ar-code-bg); border:1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 2px 10px rgba(10,10,10,.05);
}
.doc-code-block pre{ margin:0; padding:20px; overflow-x:auto; font-size:.83rem; line-height:1.65; color:var(--ar-ink); font-family:'SF Mono',Consolas,monospace; }
.doc-copy-btn{ position:absolute; top:10px; right:10px; }
.tok-kw{ color: var(--ar-orange); font-weight:600; } .tok-str{ color:#1a8754; } .tok-key{ color:#a3720b; } .tok-num{ color:#a3720b; }

/* ---------- Tabs (réutilise .ar-resp-tab) ---------- */
.doc-resp-tabs{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:6px; margin-bottom:14px; border-radius:999px; width:fit-content;
  background: var(--glass-bg-strong); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-highlight);
}
.doc-resp-tabs .ar-resp-tab{
  background: rgba(var(--ar-gray-rgb),.10); color: var(--ar-ink-soft);
  padding:7px 16px; border-radius:999px; font-size:.8rem; font-weight:800; cursor:pointer;
  font-family: var(--font-sans,'Inter',sans-serif); transition: background .15s ease,color .15s ease, box-shadow .15s ease;
}
.doc-resp-tabs .ar-resp-tab.active{ background: rgba(var(--ar-2xx-rgb),.22); color:var(--ar-2xx); box-shadow: inset 0 0 0 1.5px currentColor; }
.doc-tab-panel{ display:none; }
.doc-tab-panel.active{ display:block; }

/* ---------- Tables ---------- */
.doc-table{ width:100%; max-width:700px; border-collapse:collapse; margin:16px 0; font-size:.86rem; font-family: var(--font-sans,'Inter',sans-serif); }
.doc-table th,.doc-table td{ padding:10px 14px; border-bottom:1px solid var(--ar-border); text-align:left; }
.doc-table th{ color:var(--ar-ink-soft); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.doc-table td{ color:var(--ar-ink); }
.doc-table code{ color:var(--ar-orange); background:var(--ar-code-bg-solid); padding:2px 6px; border-radius:4px; }

/* ---------- Ref links (renvoi vers API reference) ---------- */
.doc-ref-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ar-orange) !important;
  font-size:.9rem; font-family: var(--font-sans,'Inter',sans-serif); transition: gap .2s ease;
}
.doc-ref-link:hover{ gap:12px; }
.doc-ref-link ion-icon{ font-size:14px; }

/* ==========================================================================
   BARRE PREVIOUS / NEXT — pills Liquid Glass, sticky bas de colonne
   (repris à l'identique de .ar-prevnext-bar / .ar-prevnext-btn)
   ========================================================================== */
.ar-prevnext-bar{
  position:sticky;
  bottom:0;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:24px 32px 0 28px;
  padding:14px 0;
  background: linear-gradient(to top, #ffffff 60%, rgba(255,255,255,0));
  z-index:5;
}
.ar-prevnext-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  border-radius:999px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  cursor:pointer; text-align:left; min-width:0;
  max-width:48%;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ar-prevnext-btn:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-strong), var(--glass-highlight);
}
.ar-prevnext-btn:hover:not(:disabled) .ar-prevnext-label strong{ color:var(--ar-orange); }
.ar-prevnext-btn:hover:not(:disabled) ion-icon{ color:var(--ar-ink); }
.ar-prevnext-btn:active:not(:disabled){ transform: translateY(0); }
.ar-prevnext-btn:disabled{ opacity:.3; cursor:not-allowed; background: var(--glass-bg-soft); box-shadow: var(--glass-shadow); }
.ar-prevnext-btn-next{ flex-direction:row-reverse; }
.ar-prevnext-btn ion-icon{
  font-size:15px; color:var(--ar-ink-soft); flex-shrink:0; transition:color .18s ease;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(10,10,10,.08);
  border-radius:50%;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
}
.ar-prevnext-label{ display:flex; flex-direction:column; gap:0; min-width:0; overflow:hidden; }
.ar-prevnext-btn-next .ar-prevnext-label{ align-items:flex-end; }
.ar-prevnext-label small{ font-size:.62rem; color:var(--ar-ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-family: var(--font-sans,'Inter',sans-serif); line-height:1.4; }
.ar-prevnext-label strong{ font-size:.8rem; color:var(--ar-ink); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; font-family: var(--font-sans,'Inter',sans-serif); transition:color .18s ease; }

.doc-prevnext-bar{ margin:24px 32px 0 28px; }

/* Scrollbars discrètes (identique api-reference.css) */
.doc-sidebar-scroll, .doc-main-col{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.doc-sidebar-scroll::-webkit-scrollbar, .doc-main-col::-webkit-scrollbar{ width:6px; }
.doc-sidebar-scroll::-webkit-scrollbar-thumb, .doc-main-col::-webkit-scrollbar-thumb{ background:transparent; border-radius:999px; }
.doc-sidebar-scroll:hover::-webkit-scrollbar-thumb, .doc-main-col:hover::-webkit-scrollbar-thumb{ background:rgba(var(--ar-gray-rgb),.35); }

@media (max-width:1240px){ .doc-shell{grid-template-columns:250px 1fr;} }
@media (max-width:980px){
  html.doc-html, body.doc-page{ overflow:auto; height:auto; }
  .doc-shell{grid-template-columns:1fr; height:auto; max-height:none; overflow:visible;}
  .doc-sidebar{ height:auto; max-height:60vh; margin:10px 14px; }
  .doc-main-col{ height:auto; max-height:none; overflow:visible; }
  .ar-prevnext-bar{ position:relative; bottom:0; margin:20px 14px 0; background:none; }
}

.doc-nav-skel{ height:14px; border-radius:6px; margin:6px 14px; background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.12),rgba(0,0,0,.06)); background-size:200% 100%; animation:docSkelShine 1.3s ease-in-out infinite; }
@keyframes docSkelShine{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.doc-method-pill{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:.7rem; font-weight:700; text-transform:uppercase; }
.doc-method-pill.get{ background:rgba(34,197,94,.12); color:#178a53; }
.doc-method-pill.post{ background:rgba(59,130,246,.12); color:#1d4ed8; }
.doc-method-pill.put,.doc-method-pill.patch{ background:rgba(245,158,11,.12); color:#b45309; }
.doc-method-pill.delete{ background:rgba(239,68,68,.12); color:#c23b3b; }

.doc-nav-empty{ padding:8px 14px; font-size:.8rem; color:var(--ar-ink-3,#8a8a92); }
.doc-nav-count{ font-size:.65rem; opacity:.6; margin-left:4px; }
.doc-nav-sublink{ padding-left:26px !important; font-size:.82rem; }

.doc-mcp-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:20px; }
.doc-mcp-cat-card{ display:block; padding:16px; border:1px solid rgba(0,0,0,.08); border-radius:12px; text-decoration:none; color:inherit; transition:.15s; }
.doc-mcp-cat-card:hover{ border-color:rgba(99,102,241,.35); box-shadow:0 4px 14px rgba(0,0,0,.06); }
.doc-mcp-cat-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.doc-mcp-cat-card-title{ font-weight:700; font-size:.9rem; }
.doc-mcp-cat-card-count{ font-size:.72rem; padding:2px 7px; border-radius:999px; background:rgba(99,102,241,.1); color:#4f46e5; font-weight:700; }
.doc-mcp-cat-card-desc{ font-size:.78rem; color:var(--ar-ink-3,#8a8a92); margin:0; }