/* ==========================================================================
   API REFERENCE — Mextyl Liquid Glass Design System (v6 — fond blanc pur,
   pills toujours translucides, layout à 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-post: #c85a2b;  --ar-post-rgb: 200,90,43;
  --ar-patch: #a3720b; --ar-patch-rgb: 163,114,11;
  --ar-delete: #c23b3b; --ar-delete-rgb: 194,59,59;
  --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: var(--ar-delete); --ar-5xx-rgb: var(--ar-delete-rgb);

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

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

  /* Glass — teintes neutres (plus de bleu dans les ombres) */
  --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.ar-html,
body.ar-page,
body.ar-page::before,
body.ar-page::after {
  background: #ffffff !important;
  background-image: none !important;
}
.ar-shell{
  background: #ffffff;
}

*{ box-sizing:border-box; }

/* ==========================================================================
   LAYOUT GLOBAL — hauteur fixe
   - html/body : 100vh, pas de scroll global
   - nav : sticky top:0, hauteur figée = --ar-nav-h
   - .ar-shell : hauteur exacte = 100vh - navH, jamais plus, jamais moins
   - sidebar / tryit : height:100% du shell, NE scrollent PAS elles-mêmes
     (seule leur zone de liste interne .ar-sidebar-scroll / le corps du
     tryit peut avoir un scroll interne discret)
   - .ar-main-col : seul élément scrollable verticalement (overflow-y:auto)
   ========================================================================== */
html.ar-html, body.ar-page{
  margin:0;
  height:100%;
  background:#ffffff;
  overflow:hidden; /* le scroll de la fenêtre est désactivé : c'est .ar-main-col qui scrolle */
}
body.ar-page{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100vh;
}
body.ar-page nav.lp-nav{
  position:sticky !important;
  top:0;
  z-index:1000;
  background:#ffffff;
  height:var(--ar-nav-h);
  flex:0 0 auto;
}

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

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

/* Suppression de tout effet outline/focus bleu par défaut du navigateur */
.ar-page button:focus,
.ar-page a:focus,
.ar-page input:focus,
.ar-page [tabindex]:focus{
  outline:none !important;
  box-shadow:none;
}
.ar-page button:focus-visible,
.ar-page a:focus-visible{
  outline:2px solid rgba(10,10,10,.35) !important;
  outline-offset:2px;
}

/* Fond de page 100% blanc pur, aucun overlay */
body.ar-page::before{ content:none; background:none; }

/* ---------- Icon badges (translucides) ---------- */
.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.neutral{ background:rgba(var(--ar-gray-rgb),.14); color:var(--ar-ink-soft); }
.ar-icon-badge.get{ background:rgba(var(--ar-get-rgb),.14); color:var(--ar-get); }
.ar-icon-badge.post{ background:rgba(var(--ar-post-rgb),.14); color:var(--ar-post); }
.ar-icon-badge.patch{ background:rgba(var(--ar-patch-rgb),.14); color:var(--ar-patch); }
.ar-icon-badge.delete{ background:rgba(var(--ar-delete-rgb),.14); color:var(--ar-delete); }
.ar-icon-badge.mcp{ background:rgba(var(--ar-mcp-rgb),.14); color:var(--ar-mcp); }
.ar-icon-badge.danger{ background:rgba(var(--ar-delete-rgb),.12); color:var(--ar-delete); border-radius:12px; }
.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); }
.ar-chevron{ font-size:11px; color:var(--ar-ink-soft); }
ion-icon.ar-spin{ animation: arSpin .8s linear infinite; }
@keyframes arSpin{ to{ transform:rotate(360deg); } }

/* ---------- SHELL — hauteur fixe, 3 colonnes ---------- */
.ar-shell{
    display:grid;
    grid-template-columns:var(--ar-sidebar-w) 1fr var(--ar-tryit-w);
    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;
  }
  /* Fix critique : empêche les grid-items de forcer la ligne à s'étirer
     au-delà de la hauteur du shell à cause de leur contenu interne */
  .ar-shell > *{
    min-height: 0;
    min-width: 0;
  }

/* ---------- SIDEBAR — hauteur fixe = toute la colonne, ne scrolle jamais elle-même ---------- */
.ar-sidebar{
    height: calc(100% - 28px); /* 14px haut + 14px bas */
    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);
  }

/* Zone fixe : search pill + toggle REST/MCP — ne scrolle jamais */
.ar-sidebar-fixed{
  flex:0 0 auto;
}

/* Zone scrollable : uniquement la liste de navigation, à l'intérieur de la card fixe */
.ar-sidebar-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:2px;
  margin-right:-2px;
}

.ar-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;
}
.ar-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); }
.ar-sidebar-search ion-icon{ color:var(--ar-ink-soft); font-size:15px; flex-shrink:0; }
.ar-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;
}

.ar-mode-switch{
  display:flex; gap:0; padding:3px; margin-bottom:14px; 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);
  flex-shrink:0;
}
.ar-mode-btn{ flex:1; padding:8px 10px; border:none; background:transparent; border-radius:999px; font-size:.78rem; font-weight:800; cursor:pointer; color:var(--ar-ink-soft); font-family: var(--font-sans,'Inter',sans-serif); transition:background .2s ease,color .2s ease; }
.ar-mode-btn.active{ background:rgba(10,10,10,.08); color:var(--ar-ink); box-shadow: var(--glass-highlight); }

.ar-nav{ min-width:0; }
.ar-nav-group{ margin-bottom:2px; min-width:0; }
.ar-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; }
.ar-nav-group:first-child .ar-nav-title{ padding-top:2px; }
.ar-nav-count{ color:var(--ar-ink-soft); font-size:.74rem; font-weight:600; flex-shrink:0; }

.ar-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%;
}
.ar-nav-link:hover{ background: rgba(0,0,0,.05); }
.ar-nav-link.active{ background: var(--glass-bg-strong); font-weight:700; box-shadow: var(--glass-highlight); }
.ar-nav-link > span:last-child{
  flex:1 1 auto; min-width:0;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.ar-nav-empty{ font-size:.82rem;color:var(--ar-ink-soft);padding:12px 10px;text-align:center; }
.ar-skel-line{ height:11px;border-radius:6px;margin-bottom:12px;background:linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.13) 37%, rgba(0,0,0,.06) 63%);background-size:400% 100%;animation:arShimmer 1.4s ease infinite; }
@keyframes arShimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- COLONNE PRINCIPALE — seule zone scrollable verticalement ---------- */
.ar-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;
}

.ar-main{
  flex:1 0 auto;
  padding:24px 24px 8px 20px;
}
.ar-breadcrumb{ font-size:.86rem; font-weight:600; color:var(--ar-orange); margin-bottom:8px; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.ar-page-head h1{ font-family: var(--font-serif,'Source Serif 4',serif); font-size:2rem; font-weight:500; margin:0; line-height:1.2; letter-spacing:-0.015em; color:var(--ar-ink); }
.ar-page-lead{ color:var(--ink-text-secondary,#4a4a52); line-height:1.7; font-size:.98rem; max-width:700px; margin-bottom:26px; font-family: var(--font-sans,'Inter',sans-serif); }

.ar-copy-page-wrap{ position:relative; flex-shrink:0; }
.ar-copy-page-btn{
  display:flex; align-items:center; gap:8px; border-radius:999px; padding:9px 16px; font-size:.83rem; font-weight:700; cursor:pointer; white-space:nowrap; color:var(--ar-ink);
  background: var(--glass-bg-strong); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); font-family: var(--font-sans,'Inter',sans-serif); transition: background .2s ease;
}
.ar-copy-page-btn:hover{ background: rgba(0,0,0,.06); }
.ar-copy-page-btn ion-icon{ font-size:14px; }
.ar-copy-page-menu{
  position:absolute; top:calc(100% + 8px); right:0; border-radius:16px; padding:6px; width:260px; z-index:50; display:none;
  background: var(--glass-bg-strong); backdrop-filter:var(--glass-blur-strong); -webkit-backdrop-filter:var(--glass-blur-strong);
  border:1px solid var(--glass-border); box-shadow: var(--glass-shadow-strong), var(--glass-highlight);
}
.ar-copy-page-menu.open{ display:block; }
.ar-copy-page-item{ display:flex; gap:10px; align-items:flex-start; padding:10px 10px; border-radius:12px; cursor:pointer; }
.ar-copy-page-item:hover{ background:rgba(0,0,0,.05); }
.ar-copy-page-item ion-icon{ margin-top:2px; color:var(--ar-ink-soft); width:16px; font-size:15px; }
.ar-copy-page-logo{ width:16px; height:16px; object-fit:contain; margin-top:2px; flex-shrink:0; }
.ar-copy-page-item b{ display:block; font-size:.83rem; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-copy-page-item span{ display:block; font-size:.72rem; color:var(--ar-ink-soft); }

/* ---------- Barre méthode + path + Try It ---------- */
.ar-endpoint-bar{
  display:flex; align-items:stretch; flex-wrap:nowrap; overflow:hidden; margin-bottom:36px; 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);
}
.ar-endpoint-bar code{
  flex:1; min-width:0; padding:0 16px; font-size:.85rem; font-weight:500; display:flex; align-items:center; gap:2px;
  color:var(--ar-ink); white-space:nowrap; overflow-x:auto; scrollbar-width:none;
  font-family:'SF Mono',Consolas,monospace;
}
.ar-endpoint-bar code::-webkit-scrollbar{ display:none; }
.ar-endpoint-bar code .ar-path-seg{ color:var(--ar-ink-soft); margin:0 2px; }
.ar-tryit-btn-inline{
  background:rgba(10,10,10,.9); color:#fff; border:none; padding:0 20px; margin:8px; border-radius:999px;
  font-weight:700; font-size:.85rem; cursor:pointer; display:flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap;
  font-family: var(--font-sans,'Inter',sans-serif); transition: background .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 10px rgba(10,10,10,.18);
}
.ar-tryit-btn-inline ion-icon{ font-size:12px; }
.ar-tryit-btn-inline:hover{ background:#2a2a30; box-shadow: 0 4px 16px rgba(10,10,10,.24); }

.ar-section-title{ font-family: var(--font-serif,'Source Serif 4',serif); font-size:1.25rem; font-weight:500; margin:36px 0 14px; color:var(--ar-ink); }
.ar-section-title:first-of-type{ margin-top:0; }

.ar-auth-row{
  padding:16px 18px; margin-bottom:10px; border-radius:12px;
  background: var(--glass-bg-soft); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
}
.ar-auth-name{ font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-tag{ font-size:.72rem; font-weight:700; padding:2px 10px; border-radius:999px; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-tag.header{ background:rgba(var(--ar-gray-rgb),.16); color:var(--ar-ink-soft); }
.ar-tag.required{ background:rgba(var(--ar-delete-rgb),.14); color:var(--ar-delete); }

.ar-field-row{
  padding:16px 18px; margin-bottom:8px; border-radius:12px;
  background: var(--glass-bg-soft); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
}
.ar-field-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.ar-field-name{ font-weight:700; font-family:'SF Mono',Consolas,monospace; font-size:.88rem; }
.ar-field-type{ font-size:.82rem; color:var(--ar-ink-soft); }
.ar-field-desc{ color:var(--ink-text-secondary,#4d4a45); font-size:.88rem; line-height:1.65; margin:0; font-family: var(--font-sans,'Inter',sans-serif); }

.ar-field-toggle{
  display:flex; align-items:center; gap:8px; padding:10px 4px; cursor:pointer; font-weight:700; font-size:.9rem;
  border-top:1px solid var(--ar-border); margin-top:8px; font-family: var(--font-sans,'Inter',sans-serif);
  color:var(--ar-ink); user-select:none;
}
.ar-field-toggle ion-icon{ font-size:12px; transition:transform .15s ease; flex-shrink:0; }
.ar-field-toggle.open ion-icon{ transform:rotate(180deg); }
.ar-field-children{ padding-left:16px; margin-top:10px; display:none; }
.ar-field-children.open{ display:block; }

/* ---------- Response tabs (main content) ---------- */
.ar-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);
}
.ar-resp-tab{
  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;
}
.ar-resp-desc{ font-size:.85rem; color:var(--ar-ink-soft); margin-bottom:14px; font-family: var(--font-sans,'Inter',sans-serif); }

.ar-loading-state,.ar-error-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:110px 20px; text-align:center; }
.ar-loading-state p, .ar-error-state h3{ font-family: var(--font-sans,'Inter',sans-serif); }
.ar-spinner{ width:32px; height:32px; border-radius:50%; border:3px solid rgba(var(--ar-orange-rgb),.18); border-top-color:var(--ar-orange); animation:arSpin .8s linear infinite; }
.hidden{ display:none !important; }

/* ---------- BARRE NEXT/PREVIOUS — flottante, sticky en bas du main-col ---------- */
.ar-prevnext-bar{
  position:sticky;
  bottom:0;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:24px 24px 0 20px;
  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:180px; font-family: var(--font-sans,'Inter',sans-serif); transition:color .18s ease; }

/* ---------- RIGHT PANEL "TRY IT" — hauteur fixe = toute la colonne ---------- */
.ar-tryit{
    height: calc(100% - 28px);
    max-height: calc(100% - 28px);
    min-height: 0;
    overflow-y:auto;
    padding:16px 16px 20px;
    margin:14px 14px 14px 8px;
    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);
  }

.ar-tryit-card{
  border-radius:16px; color:var(--ar-ink); margin-bottom:16px; overflow:hidden;
  background: var(--ar-code-bg);
  border:1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 2px 10px rgba(10,10,10,.05);
}
.ar-tryit-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 16px 10px; font-size:.85rem; font-weight:700; font-family:var(--font-sans,'Inter',sans-serif); background:var(--ar-code-bg); }
.ar-lang-select{ position:relative; display:flex; align-items:center; gap:7px; background:rgba(10,10,10,.06); border-radius:999px; padding:6px 12px; font-size:.76rem; cursor:pointer; flex-shrink:0; font-weight:600; transition:background .15s ease; }
.ar-lang-select:hover{ background:rgba(10,10,10,.1); }
.ar-lang-select i, .ar-lang-select ion-icon{ font-size:13px; width:14px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
.ar-lang-select img, .ar-lang-item img{ width:14px; height:14px; object-fit:contain; flex-shrink:0; }

.ar-lang-menu{
  position:fixed; border-radius:14px; padding:6px; z-index:3200; display:none; min-width:150px;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong);
  border:1px solid var(--glass-border); box-shadow: var(--glass-shadow-strong), var(--glass-highlight);
}
.ar-lang-menu.open{ display:block; }
.ar-lang-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; font-size:.82rem; cursor:pointer; color:var(--ar-ink); }
.ar-lang-item:hover{ background:rgba(0,0,0,.06); }
.ar-lang-item i, .ar-lang-item ion-icon{ font-size:14px; width:16px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
.ar-lang-item .fa-check-ic{ margin-left:auto; font-size:12px; color:var(--ar-orange); width:auto; }
.ar-tryit-card pre{ margin:0; padding:0 16px 14px; overflow-x:auto; font-size:.78rem; line-height:1.65; color:var(--ar-ink); background:var(--ar-code-bg); }
.ar-tryit-card-actions{ display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--ar-border); background:var(--ar-code-bg); }

.tok-kw{ color: var(--ar-orange); font-weight:600; } .tok-str{ color:#1a8754; } .tok-num{ color:#a3720b; } .tok-com{ color:#9a9a94; }

.ar-tryit-status-tabs{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:6px 6px;
  border-top:1px solid var(--ar-border); background:var(--ar-code-bg-soft);
}
.ar-tryit-status-tab{ font-size:.76rem; font-weight:800; cursor:pointer; padding:6px 13px; border-radius:999px; transition:background .15s ease,color .15s ease, box-shadow .15s ease; }
.ar-tryit-json-body{
  padding:14px 16px; max-height:340px; overflow:auto; font-size:.78rem; color:var(--ar-ink);
  background: #ffffff;
}
.ar-tryit-json-body pre{ margin:0; white-space:pre-wrap; }

.ar-tryit-placeholder{ color:var(--ar-ink-soft); text-align:center; margin-top:60px; font-family: var(--font-sans,'Inter',sans-serif); }

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

/* ==========================================================================
   MODAL "TRY IT"
   ========================================================================== */
.ar-tryit-modal-overlay{
  position:fixed; inset:0; z-index:2500; background:rgba(10,10,10,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto;
}
.ar-tryit-modal-overlay.open{ display:flex; }
.ar-tryit-modal{
  width:100%; max-width:1320px; border-radius:24px; overflow:hidden; animation:arModalIn .18s ease;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong);
  border:1px solid var(--glass-border); box-shadow: var(--glass-shadow-strong), var(--glass-highlight);
}
@keyframes arModalIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

.ar-tryit-modal-header{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--ar-border); flex-wrap:nowrap; }
.ar-tryit-modal-methodselect{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--glass-border); font-size:.86rem; font-weight:700; white-space:nowrap; font-family: var(--font-sans,'Inter',sans-serif); background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); flex-shrink:0; }
.ar-tryit-modal-methodselect .ar-method-pill{ margin:0; }
.ar-tryit-modal-pathbar{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; border:1px solid var(--glass-border); border-radius:999px; overflow:hidden; background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding:6px; }
.ar-tryit-modal-pathbar code{ padding:8px 14px; font-size:.86rem; flex:1; min-width:0; color:var(--ar-ink); white-space:nowrap; overflow-x:auto; scrollbar-width:none; font-family:'SF Mono',Consolas,monospace; }
.ar-tryit-modal-pathbar code::-webkit-scrollbar{ display:none; }
.ar-tryit-modal-send{
  background:rgba(10,10,10,.9); color:#fff; border:none; border-radius:999px; padding:11px 26px; font-weight:700;
  font-size:.9rem; cursor:pointer; display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0;
  font-family: var(--font-sans,'Inter',sans-serif); transition: background .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 10px rgba(10,10,10,.18);
}
.ar-tryit-modal-send:hover{ background:#2a2a30; box-shadow: 0 4px 16px rgba(10,10,10,.24); }
.ar-tryit-modal-send:disabled{ opacity:.6; cursor:wait; }
.ar-tryit-modal-send ion-icon{ font-size:12px; }
.ar-tryit-modal-close{ background:rgba(10,10,10,.06); border:none; color:var(--ar-ink-soft); cursor:pointer; font-size:20px; padding:7px; border-radius:10px; display:flex; flex-shrink:0; transition:background .15s ease; }
.ar-tryit-modal-close:hover{ background:rgba(10,10,10,.12); color:var(--ar-ink); }

.ar-tryit-modal-body{ display:grid; grid-template-columns:1fr 460px; min-height:560px; }
.ar-tryit-modal-left{ padding:26px 28px; border-right:1px solid var(--ar-border); overflow-y:auto; max-height:84vh; }
.ar-tryit-modal-right{ padding:20px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; max-height:84vh; }

.ar-tryit-modal-title{ font-family: var(--font-serif,'Source Serif 4',serif); font-size:1.3rem; font-weight:500; margin:0 0 8px; color: var(--ar-ink); }
.ar-tryit-modal-desc{ color:var(--ar-ink-soft); font-size:.9rem; line-height:1.65; margin-bottom:20px; font-family: var(--font-sans,'Inter',sans-serif); }

.ar-tryit-modal-section{ border-top:1px solid var(--ar-border); padding-top:16px; margin-top:16px; }
.ar-tryit-modal-section-title{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; cursor:pointer; margin-bottom:14px; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-tryit-modal-section-title ion-icon{ font-size:12px; transition:transform .15s ease; }
.ar-tryit-modal-section-title.collapsed ion-icon{ transform:rotate(-90deg); }
.ar-tryit-modal-section-content.hidden{ display:none; }

.ar-tryit-modal-field-row{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.ar-tryit-modal-field-label{ font-size:.85rem; font-weight:700; min-width:120px; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-tryit-modal-field-input{
  flex:1; padding:10px 13px; border-radius:10px; border:1px solid var(--ar-border); font-size:.85rem;
  background: rgba(255,255,255,.6); color:var(--ar-ink); font-family:'SF Mono',Consolas,monospace;
}
.ar-tryit-modal-field-input.with-prefix{ display:flex; align-items:center; padding:0; }
.ar-tryit-modal-field-input .prefix{ color:var(--ar-ink-soft); padding:10px 0 10px 13px; font-weight:600; }
.ar-tryit-modal-field-input input{ border:none;outline:none;background:none;flex:1;padding:10px 13px 10px 4px;font-family:inherit;font-size:inherit;color:inherit; }
.ar-tryit-modal-field-desc{ color:var(--ar-ink-soft); font-size:.82rem; margin:4px 0 0 130px; line-height:1.5; font-family: var(--font-sans,'Inter',sans-serif); }

.ar-tryit-modal-env-switch{ display:flex; gap:0; padding:3px; margin-bottom:16px; border-radius:999px; background:rgba(255,255,255,.5); border:1px solid var(--ar-border); }
.ar-tryit-modal-env-btn{ flex:1; padding:9px 12px; border:none; background:transparent; border-radius:999px; font-size:.8rem; font-weight:700; cursor:pointer; color:var(--ar-ink-soft); display:flex; align-items:center; justify-content:center; gap:6px; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-tryit-modal-env-btn ion-icon{ font-size:13px; }
.ar-tryit-modal-env-btn.active{ background:rgba(255,255,255,.95); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ar-tryit-modal-env-btn.active[data-env="sandbox"]{ color:var(--ar-mcp); }
.ar-tryit-modal-env-btn.active[data-env="live"]{ color:var(--ar-orange); }

.ar-tryit-modal-token-box{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 16px; border-radius:999px; background:rgba(var(--ar-mcp-rgb),.12); font-size:.79rem; color:var(--ar-mcp); font-weight:700; margin-bottom:14px; font-family: var(--font-sans,'Inter',sans-serif); }
.ar-tryit-modal-token-gen{ background:var(--ar-mcp); color:#fff; border:none; border-radius:999px; padding:7px 14px; font-size:.72rem; font-weight:700; cursor:pointer; }
.ar-tryit-modal-token-gen:hover{ background:#5b4bb8; }

.ar-tryit-modal-code-block{ border-radius:16px; overflow:hidden; background: var(--ar-code-bg); border:1px solid var(--glass-border); }
.ar-tryit-modal-code-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px; font-size:.82rem; font-weight:700; color:var(--ar-ink); font-family:var(--font-sans,'Inter',sans-serif); background:var(--ar-code-bg); }
.ar-tryit-modal-code-head-actions{ display:flex; gap:8px; align-items:center; }
.ar-tryit-modal-code-head-actions ion-icon{ font-size:14px; color:var(--ar-ink-soft); cursor:pointer; }
.ar-tryit-modal-code-block pre{ margin:0; padding:0 15px 15px; overflow-x:auto; font-size:.78rem; line-height:1.6; color:var(--ar-ink); background:var(--ar-code-bg); }

.ar-tryit-modal-resp-block{ border-radius:16px; overflow:hidden; background: var(--ar-code-bg); border:1px solid var(--glass-border); }
.ar-tryit-modal-resp-status-tabs{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:8px 8px;
  border-bottom:1px solid var(--ar-border); background:var(--ar-code-bg-soft);
}
.ar-tryit-modal-resp-status-tab{ font-size:.76rem; font-weight:800; cursor:pointer; padding:6px 13px; border-radius:999px; transition:background .15s ease,color .15s ease, box-shadow .15s ease; }
.ar-tryit-modal-resp-body{
  padding:14px 15px; max-height:320px; overflow:auto; font-size:.79rem; color:var(--ar-ink);
  background: #ffffff;
}
.ar-tryit-modal-resp-body pre{ margin:0; white-space:pre-wrap; }
.ar-tryit-modal-resp-status-error-msg{ color:var(--ar-delete); display:flex; align-items:center; gap:8px; font-weight:700; padding:14px; }
.ar-tryit-modal-resp-placeholder{ color:var(--ar-ink-soft); text-align:center; padding:30px 14px; }

.ar-tryit-modal-mcp-info{ background:rgba(var(--ar-mcp-rgb),.08); border:1px solid rgba(var(--ar-mcp-rgb),.2); border-radius:16px; padding:18px; font-size:.86rem; line-height:1.7; color:var(--ar-ink); font-family: var(--font-sans,'Inter',sans-serif); }
.ar-tryit-modal-mcp-info ion-icon{ color:var(--ar-mcp); font-size:16px; margin-right:6px; vertical-align:-2px; }

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

@media (max-width:900px){ .ar-tryit-modal-body{grid-template-columns:1fr;} .ar-tryit-modal-left{border-right:none; border-bottom:1px solid var(--ar-border);} }

/* ---------- FOOTER (si utilisé ailleurs) ---------- */
.ar-footer-mini{
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  padding:14px 20px;
  font-size:.8rem; color:var(--ar-ink-soft); font-family: var(--font-sans,'Inter',sans-serif);
  border-top:1px solid var(--ar-border);
  background:#ffffff;
}
.ar-footer-mini-links{ display:flex; gap:16px; }
.ar-footer-mini-links a{ color:var(--ar-ink-soft) !important; text-decoration:none; transition:color .15s ease; }
.ar-footer-mini-links a:hover{ color:var(--ar-ink) !important; }

/* ==========================================================================
   METHOD PILLS — TOUJOURS TRANSLUCIDES (GET/POST/PATCH/DELETE/MCP)
   Aucune variante "solid" pleine, peu importe le contexte (sidebar,
   endpoint bar, modal). Sélectionné ou non → même style translucide.
   ========================================================================== */
.ar-method-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:800;
  font-size:10.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:5px 13px;
  min-width:auto;
  line-height:1.5;
  font-family: var(--font-sans,'Inter',sans-serif);
  white-space:nowrap;
  flex-shrink:0;
  background: rgba(var(--ar-gray-rgb),.14);
  color: var(--ar-ink-soft);
  border:1px solid transparent;
}
.ar-method-pill.get{     background: rgba(var(--ar-get-rgb),.16);    color: var(--ar-get); }
.ar-method-pill.post{    background: rgba(var(--ar-post-rgb),.16);   color: var(--ar-post); }
.ar-method-pill.patch{   background: rgba(var(--ar-patch-rgb),.16);  color: var(--ar-patch); }
.ar-method-pill.delete{  background: rgba(var(--ar-delete-rgb),.16); color: var(--ar-delete); }
.ar-method-pill.mcp{     background: rgba(var(--ar-mcp-rgb),.16);    color: var(--ar-mcp); }

/* La classe .solid n'ajoute plus de couleur pleine : simple alias, translucide identique */
.ar-method-pill.solid{ background:inherit; color:inherit; }

/* ---------- Sidebar nav (liste des endpoints à gauche) ---------- */
.ar-nav-link .ar-method-pill{
  padding:3px 10px;
  font-size:9.5px;
  margin-top:1px;
}

/* ---------- Barre principale endpoint (méthode + path + Try it) ---------- */
.ar-endpoint-bar .ar-method-pill{
  border-radius:999px;
  padding:8px 16px;
  font-size:11.5px;
  margin:8px;
}

/* ---------- Modal Try It — méthode sélectionnée + pathbar ---------- */
.ar-tryit-modal-methodselect .ar-method-pill,
.ar-tryit-modal-pathbar .ar-method-pill{
  border-radius:999px;
  padding:7px 14px;
  margin:0;
}

/* ==========================================================================
   STATUS TABS (200/400/401/...) — TOUJOURS TRANSLUCIDES, sélectionnées ou non
   Seule différence entre actif/inactif : légère montée d'opacité + anneau,
   jamais de fond plein.
   ========================================================================== */

/* ---------- Tabs dans le contenu principal (.ar-resp-tabs) ---------- */
.ar-resp-tab{
  background: rgba(var(--ar-gray-rgb),.10);
  color: var(--ar-ink-soft);
}
.ar-resp-tab[data-status^="2"]{ background: rgba(var(--ar-2xx-rgb),.14); color: var(--ar-2xx); }
.ar-resp-tab[data-status^="4"]{ background: rgba(var(--ar-4xx-rgb),.14); color: var(--ar-4xx); }
.ar-resp-tab[data-status^="5"]{ background: rgba(var(--ar-5xx-rgb),.14); color: var(--ar-5xx); }

.ar-resp-tab.active{ box-shadow: inset 0 0 0 1.5px currentColor; }
.ar-resp-tab.active[data-status^="2"]{ background: rgba(var(--ar-2xx-rgb),.22); }
.ar-resp-tab.active[data-status^="4"]{ background: rgba(var(--ar-4xx-rgb),.22); }
.ar-resp-tab.active[data-status^="5"]{ background: rgba(var(--ar-5xx-rgb),.22); }

/* ---------- Tabs dans l'aperçu statique "Try it" (colonne droite) ---------- */
.ar-tryit-status-tab{
  background: rgba(var(--ar-gray-rgb),.10);
  color: var(--ar-ink-soft);
}
.ar-tryit-status-tab[data-status^="2"]{ background: rgba(var(--ar-2xx-rgb),.14); color: var(--ar-2xx); }
.ar-tryit-status-tab[data-status^="4"]{ background: rgba(var(--ar-4xx-rgb),.14); color: var(--ar-4xx); }
.ar-tryit-status-tab[data-status^="5"]{ background: rgba(var(--ar-5xx-rgb),.14); color: var(--ar-5xx); }

.ar-tryit-status-tab.active{ box-shadow: inset 0 0 0 1.5px currentColor; }
.ar-tryit-status-tab.active[data-status^="2"]{ background: rgba(var(--ar-2xx-rgb),.22); }
.ar-tryit-status-tab.active[data-status^="4"]{ background: rgba(var(--ar-4xx-rgb),.22); }
.ar-tryit-status-tab.active[data-status^="5"]{ background: rgba(var(--ar-5xx-rgb),.22); }

/* ---------- Tabs dans le modal Try It (droite, réponse) ---------- */
.ar-tryit-modal-resp-status-tab{
  background: rgba(var(--ar-gray-rgb),.10);
  color: var(--ar-ink-soft);
}
.ar-tryit-modal-resp-status-tab[data-status^="2"]{ background: rgba(var(--ar-2xx-rgb),.14); color: var(--ar-2xx); }
.ar-tryit-modal-resp-status-tab[data-status^="4"]{ background: rgba(var(--ar-4xx-rgb),.14); color: var(--ar-4xx); }
.ar-tryit-modal-resp-status-tab[data-status^="5"]{ background: rgba(var(--ar-5xx-rgb),.14); color: var(--ar-5xx); }

.ar-tryit-modal-resp-status-tab.active{ box-shadow: inset 0 0 0 1.5px currentColor; }
.ar-tryit-modal-resp-status-tab.active[data-status^="2"]{ background: rgba(var(--ar-2xx-rgb),.22); }
.ar-tryit-modal-resp-status-tab.active[data-status^="4"]{ background: rgba(var(--ar-4xx-rgb),.22); }
.ar-tryit-modal-resp-status-tab.active[data-status^="5"]{ background: rgba(var(--ar-5xx-rgb),.22); }
.ar-tryit-modal-resp-status-tab.error-tab.active{ background: rgba(var(--ar-5xx-rgb),.22); }
.ar-tryit-modal-resp-status-tab.success-tab.active{ background: rgba(var(--ar-2xx-rgb),.22); }

/* ==========================================================================
   RESPONSE BODY — fond blanc pur pour tous les statuts
   ========================================================================== */
#arRespBody{ background:#ffffff; }
.ar-tryit-json-body{ background:#ffffff; }
.ar-tryit-modal-resp-body{ background:#ffffff; }
.ar-tryit-status-tabs, .ar-tryit-modal-resp-status-tabs{ background:#fbfaf9; }

.ar-sidebar,
.ar-tryit{
  align-self: stretch; /* au lieu d'hériter passivement */
}

/* ==========================================================================
   PATCH — Tag "optional" (toujours visible à côté de required)
   ========================================================================== */
.ar-tag.optional {
  background: rgba(100, 116, 139, 0.08);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.18);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   PATCH — MODAL "TRY IT" EN BLANC OPAQUE (pas de liquid glass)
   ========================================================================== */

.ar-tryit-modal-overlay{
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ar-tryit-modal{
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(10,10,10,.08);
  box-shadow: 0 24px 64px rgba(10,10,10,.18), 0 4px 16px rgba(10,10,10,.08);
}

.ar-tryit-modal-header{
  background: #ffffff;
  border-bottom: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-methodselect{
  background: #f7f6f4;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-pathbar{
  background: #f7f6f4;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-left{
  background: #ffffff;
  border-right: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-right{
  background: #fbfaf9;
}

.ar-tryit-modal-section{
  border-top: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-field-input{
  background: #ffffff;
  border: 1px solid rgba(10,10,10,.12);
}

.ar-tryit-modal-env-switch{
  background: #f7f6f4;
  border: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-env-btn.active{
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.ar-tryit-modal-token-box{
  background: rgba(var(--ar-mcp-rgb),.10);
}

.ar-tryit-modal-code-block{
  background: #ffffff;
  border: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-code-head{
  background: #f7f6f4;
  border-bottom: 1px solid rgba(10,10,10,.06);
}

.ar-tryit-modal-code-block pre{
  background: #ffffff;
}

.ar-tryit-modal-resp-block{
  background: #ffffff;
  border: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-resp-status-tabs{
  background: #f7f6f4;
  border-bottom: 1px solid rgba(10,10,10,.08);
}

.ar-tryit-modal-resp-body{
  background: #ffffff;
}

.ar-tryit-modal-mcp-info{
  background: rgba(var(--ar-mcp-rgb),.06);
  border: 1px solid rgba(var(--ar-mcp-rgb),.15);
}

/* Scrollbars du modal, cohérence visuelle */
.ar-tryit-modal-left::-webkit-scrollbar-thumb,
.ar-tryit-modal-right::-webkit-scrollbar-thumb{
  background: transparent;
}
.ar-tryit-modal-left:hover::-webkit-scrollbar-thumb,
.ar-tryit-modal-right:hover::-webkit-scrollbar-thumb{
  background: rgba(120,113,108,.3);
}
/* ==========================================================================
   FIX — Overflow horizontal (flex-items sans min-width:0)
   ========================================================================== */
.ar-page-head{
  flex-wrap: wrap;
  row-gap: 12px;
}
.ar-page-head h1{
  min-width: 0;
  flex: 1 1 260px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ar-copy-page-wrap{
  flex-shrink: 0;
}

@media (max-width: 980px){
  html.ar-html, body.ar-page{
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Dropdown "Copy page" : ancrage à gauche sur mobile pour éviter le clip
   (le CSS d'origine ancre à right:0, ce qui déborde si le bouton est proche
   du bord gauche une fois que .ar-page-head a wrappé) */
@media (max-width: 640px){
  .ar-copy-page-menu{
    right: auto;
    left: 0;
    width: min(260px, calc(100vw - 32px));
  }
}

/* ==========================================================================
   FIX — Modal "Try It" plein écran + header lisible sur mobile
   ========================================================================== */
@media (max-width: 900px){
  .ar-tryit-modal-overlay{
    padding: 0 !important;
    align-items: stretch !important;
  }
  .ar-tryit-modal{
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header : colonne verticale, close en absolu top-right */
  .ar-tryit-modal-header{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 14px 46px 14px 16px !important;
    position: relative;
  }
  .ar-tryit-modal-close{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
  }

  /* Le pill + summary complet doit pouvoir wrapper sur plusieurs lignes */
  .ar-tryit-modal-methodselect{
    white-space: normal !important;
    flex-shrink: 1 !important;
    align-items: flex-start !important;
    border-radius: 14px !important;
    width: 100%;
  }
  .ar-tryit-modal-methodselect .ar-method-pill{
    flex-shrink: 0;
    margin-top: 1px;
  }
  .ar-tryit-modal-methodselect span:not(.ar-method-pill){
    white-space: normal;
    word-break: break-word;
    font-size: .82rem;
    line-height: 1.4;
  }

  .ar-tryit-modal-pathbar{
    width: 100%;
  }
  .ar-tryit-modal-pathbar code{
    min-width: 0;
  }

  .ar-tryit-modal-send{
    width: 100%;
    justify-content: center;
  }

  .ar-tryit-modal-body{
    grid-template-columns: 1fr !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .ar-tryit-modal-left,
  .ar-tryit-modal-right{
    max-height: none !important;
    padding: 18px 16px !important;
  }
  .ar-tryit-modal-left{
    border-right: none;
    border-bottom: 1px solid rgba(10,10,10,.08);
  }

  .ar-tryit-modal-field-row{ flex-wrap: wrap; }
  .ar-tryit-modal-field-label{ min-width: 100%; }
  .ar-tryit-modal-field-desc{ margin-left: 0; }
}