/**
 * Copilhost Doc — premium documentation UI (light).
 */

[data-cpd-root]{
  --cpd-bg:#ffffff;
  --cpd-fg:#1c2024;
  --cpd-muted:#6b7280;
  --cpd-border:#e7e9ee;
  --cpd-surface:#f7f8fa;
  --cpd-accent:#5b5bd6;
  --cpd-accent-fg:#ffffff;
  --cpd-code-bg:#f4f4f6;
  --cpd-radius:12px;
  --cpd-sidebar-w:264px;
  --cpd-toc-w:212px;
  --cpd-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cpd-maxw:1320px;

  color:var(--cpd-fg);
  background:var(--cpd-bg);
  font-family:var(--cpd-font);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
[data-cpd-root] *{box-sizing:border-box}
[data-cpd-root] a{color:var(--cpd-accent);text-decoration:none}
[data-cpd-root] a:hover{text-decoration:underline}

/* ---- Topbar ---- */
.cpd-topbar{
  max-width:var(--cpd-maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 28px;border-bottom:1px solid var(--cpd-border);
}
.cpd-breadcrumbs{font-size:.86rem;color:var(--cpd-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cpd-breadcrumbs a{color:var(--cpd-muted)}
.cpd-breadcrumbs a:hover{color:var(--cpd-fg)}
.cpd-breadcrumbs [aria-current="page"]{color:var(--cpd-fg);font-weight:500}
.cpd-sep{color:var(--cpd-border)}

/* ---- Layout ---- */
.cpd-layout{
  max-width:var(--cpd-maxw);margin:0 auto;
  display:grid;
  grid-template-columns:var(--cpd-sidebar-w) minmax(0,1fr) var(--cpd-toc-w);
  gap:42px;padding:34px 28px 90px;
  transition:grid-template-columns .28s ease;
}
/* TOC opt-in disabled (Réglages > Apparence) — the aside is not
   rendered at all, so collapse the grid to sidebar + main. The
   hidden-sidebar state below it stays compatible. */
.cpd-layout-no-toc{
  grid-template-columns:var(--cpd-sidebar-w) minmax(0,1fr);
}
.cpd-sidebar-hidden .cpd-layout-no-toc{
  grid-template-columns:0 minmax(0,1fr);
}

/* ---- Discreet scrollbars (sidebar + TOC) ---- */
.cpd-sidebar,.cpd-toc{
  scrollbar-width:thin;                       /* Firefox */
  scrollbar-color:var(--cpd-border) transparent;
}
.cpd-sidebar::-webkit-scrollbar,
.cpd-toc::-webkit-scrollbar{width:7px}
.cpd-sidebar::-webkit-scrollbar-track,
.cpd-toc::-webkit-scrollbar-track{background:transparent}
.cpd-sidebar::-webkit-scrollbar-thumb,
.cpd-toc::-webkit-scrollbar-thumb{
  background:var(--cpd-border);               /* terne par défaut */
  border-radius:8px;
}
.cpd-sidebar:hover::-webkit-scrollbar-thumb,
.cpd-toc:hover::-webkit-scrollbar-thumb{
  background:#cfd3da;                          /* à peine plus marqué au survol */
}

/* ---- Sidebar ---- */
.cpd-sidebar{
  position:sticky;top:24px;align-self:start;
  /* Height-bounded: with many categories/articles the list is cut
     into an internal scroll area instead of stretching the page. */
  max-height:calc(100vh - 48px);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;min-width:0;
  transition:opacity .22s ease;
  /* No top/bottom padding: the sticky search must stick FLUSH to
     the very top of the scroll area, otherwise scrolled text shows
     in the gap above it. Left/right keep the scrollbar gutter. */
  padding:0 14px 0 4px;
}
/* Search stays reachable while scrolling a long tree. Opaque band,
   flush to the top, bleeding over the side gutters so no scrolling
   text can ever appear above or beside it. */
.cpd-search{
  position:sticky;top:0;z-index:5;
  background:var(--cpd-bg);
  margin:0 -14px 0 -4px;
  padding:14px 14px 12px 4px;
}
.cpd-search-input{
  width:100%;padding:10px 14px;border-radius:var(--cpd-radius);
  border:1px solid var(--cpd-border);background:var(--cpd-surface);
  color:var(--cpd-fg);font-family:inherit;font-size:.9rem;
}
.cpd-search-input:focus{outline:none;border-color:var(--cpd-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cpd-accent) 22%,transparent)}
.cpd-nav{margin-top:22px}
.cpd-nav-group{margin-bottom:22px}
.cpd-nav-cat-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cpd-nav-cat{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cpd-muted);flex:1 1 auto;min-width:0;
}
.cpd-nav-cat:hover{color:var(--cpd-fg);text-decoration:none}
/* Collapsible category: caret toggle + grid-rows height animation. */
[data-cpd-root] .cpd-nav-caret{
  appearance:none;-webkit-appearance:none;border:0;background:none;
  box-shadow:none;outline:none;cursor:pointer;flex:0 0 auto;
  color:var(--cpd-muted);padding:2px;display:inline-flex;line-height:0;
}
[data-cpd-root] .cpd-nav-caret:hover,
[data-cpd-root] .cpd-nav-caret:focus-visible{color:var(--cpd-accent);background:none;outline:none}
.cpd-nav-caret svg{display:block;transition:transform .2s ease}
.cpd-nav-group.is-collapsed .cpd-nav-caret svg{transform:rotate(-90deg)}
.cpd-nav-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}
.cpd-nav-collapse>ul{min-height:0;overflow:hidden}
.cpd-nav-group.is-collapsed .cpd-nav-collapse{grid-template-rows:0fr}
.cpd-nav ul{list-style:none;margin:0;padding:0}
.cpd-nav li{margin:1px 0}
.cpd-nav-link{
  display:block;padding:6px 12px;border-radius:8px;font-size:.9rem;
  color:var(--cpd-fg);border-left:2px solid transparent;
}
.cpd-nav-link:hover{background:var(--cpd-surface);text-decoration:none}
.cpd-nav-link.is-active{
  color:var(--cpd-accent);font-weight:600;
  background:color-mix(in srgb,var(--cpd-accent) 10%,transparent);
  border-left-color:var(--cpd-accent);
}
.cpd-nav-empty{font-size:.86rem;color:var(--cpd-muted);padding:8px 12px}

/* Visual hierarchy: the sidebar is calm by default — accent is
   reserved for the ACTIVE item only. Selectors are specific enough
   to override the generic [data-cpd-root] a accent colour. */
/* Sidebar links never underline (overrides the generic a:hover
   underline — it is ours, not a theme setting). */
.cpd-sidebar a,
.cpd-sidebar a:hover,
.cpd-sidebar a:focus{text-decoration:none}
.cpd-sidebar a.cpd-nav-cat{color:var(--cpd-muted)}
.cpd-sidebar a.cpd-nav-cat:hover{color:var(--cpd-fg)}
.cpd-sidebar a.cpd-nav-link{color:var(--cpd-muted);font-weight:400}
.cpd-sidebar a.cpd-nav-link:hover{color:var(--cpd-fg);background:var(--cpd-surface)}
.cpd-sidebar a.cpd-nav-link.is-active{color:var(--cpd-accent);font-weight:600}

/* ---- Article ---- */
.cpd-main{min-width:0}
.cpd-article-head{padding-bottom:22px;border-bottom:1px solid var(--cpd-border);margin-bottom:30px}
.cpd-eyebrow{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cpd-accent);margin-bottom:12px;
}
.cpd-title{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.15;margin:0 0 12px;letter-spacing:-.02em}
.cpd-lede{font-size:1.1rem;color:var(--cpd-muted);margin:0 0 14px}
.cpd-meta{font-size:.82rem;color:var(--cpd-muted)}

/* ---- "Discuter avec une IA" bar ---- */
.cpd-ai{
  /* Container hugs its contents (label + CTAs) rather than spanning
     the whole article width — looked oversized on wide articles.
     margin:auto centers the box horizontally; max-width:100% keeps
     it from overflowing on narrow viewports (mobile fallback). */
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  width:fit-content;max-width:100%;
  margin:0 auto 26px;padding:14px 16px;
  background:var(--cpd-surface);border:1px solid var(--cpd-border);
  border-radius:var(--cpd-radius);
}
/* Optional sticky mode (toggle in Réglages): stays pinned near the
   top with a small gap from the screen edge while scrolling. */
.cpd-ai-sticky{
  position:sticky;
  /* Offset is configurable (Réglages) so the bar sits below a
     theme's fixed/sticky header — theme-agnostic. */
  top:var(--cpd-ai-sticky-top,16px);
  z-index:20;
  box-shadow:0 8px 24px -16px rgba(20,15,12,.4);
}
.cpd-ai-label{font-size:.85rem;font-weight:600;color:var(--cpd-muted);margin-right:2px}
.cpd-ai-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  padding:7px 14px;border-radius:9px;
  border:1px solid var(--cpd-border);background:var(--cpd-bg);color:var(--cpd-fg);
  transition:box-shadow .15s ease,background .15s ease,transform .1s ease;
}
.cpd-ai-btn span{color:inherit}
.cpd-ai-logo{flex:0 0 auto;display:block}
.cpd-ai-btn:active{transform:scale(.97)}
.cpd-ai .cpd-ai-tool{background:var(--cpd-bg);color:var(--cpd-fg)}
/* Tool buttons: NO background change on hover — only a soft shadow,
   text and background stay put. */
.cpd-ai .cpd-ai-tool:hover,
.cpd-ai .cpd-ai-tool:focus-visible{
  background:var(--cpd-bg);
  color:var(--cpd-fg);
  box-shadow:0 4px 14px -6px rgba(20,15,12,.35);
}
.cpd-ai [data-cpd-ai="copy"]{background:var(--cpd-accent);color:var(--cpd-accent-fg);border-color:var(--cpd-accent)}
/* Copy button: SAME hover effect as the tool buttons — soft shadow
   only, background and text unchanged (uniform across all 4). */
.cpd-ai [data-cpd-ai="copy"]:hover,
.cpd-ai [data-cpd-ai="copy"]:focus-visible{
  background:var(--cpd-accent);
  color:var(--cpd-accent-fg);
  box-shadow:0 4px 14px -6px rgba(20,15,12,.35);
}

.cpd-toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);
  background:#1c2024;color:#fff;font-size:.88rem;font-weight:500;
  padding:12px 20px;border-radius:10px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999;
  max-width:90vw;text-align:center;
}
.cpd-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* Paste-needed variant: louder + larger so the user notices it and
   reads the instruction before tabbing into Gemini. */
.cpd-toast-paste{
  background:var(--cpd-accent);color:var(--cpd-accent-fg);
  font-size:.95rem;font-weight:600;
  padding:14px 22px;max-width:520px;
  box-shadow:0 14px 40px -10px rgba(20,15,12,.45);
}

.cpd-content{font-size:1rem}
.cpd-content h2{font-size:1.5rem;margin:2.2em 0 .6em;letter-spacing:-.01em;scroll-margin-top:calc(var(--cpd-ai-sticky-top,16px) + 24px)}
.cpd-content h3{font-size:1.18rem;margin:1.8em 0 .5em;scroll-margin-top:calc(var(--cpd-ai-sticky-top,16px) + 24px)}
.cpd-content p{margin:0 0 1.15em}
.cpd-content ul,.cpd-content ol{margin:0 0 1.15em;padding-left:1.4em}
.cpd-content li{margin:.3em 0}
.cpd-content img{max-width:100%;height:auto;border-radius:var(--cpd-radius)}
.cpd-content a{text-decoration:underline}
.cpd-content code{
  background:var(--cpd-code-bg);padding:.15em .4em;border-radius:6px;
  font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.cpd-content pre{
  background:var(--cpd-code-bg);padding:18px 20px;border-radius:var(--cpd-radius);
  overflow:auto;border:1px solid var(--cpd-border);margin:0 0 1.4em;
}
.cpd-content pre code{background:none;padding:0}
.cpd-content blockquote{
  margin:0 0 1.4em;padding:6px 18px;border-left:3px solid var(--cpd-accent);
  color:var(--cpd-muted);
}
.cpd-content table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.92rem}
.cpd-content th,.cpd-content td{border:1px solid var(--cpd-border);padding:9px 12px;text-align:left}
.cpd-content th{background:var(--cpd-surface)}
.cpd-anchor{opacity:0;margin-left:.35em;font-weight:400;text-decoration:none}
.cpd-content h2:hover .cpd-anchor,.cpd-content h3:hover .cpd-anchor{opacity:.5}

/* ---- TOC ---- */
.cpd-toc{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto;font-size:.86rem}
.cpd-toc-title{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cpd-muted);margin-bottom:12px}
.cpd-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--cpd-border)}
.cpd-toc li{margin:0}
.cpd-toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--cpd-muted)}
.cpd-toc a:hover{color:var(--cpd-fg);text-decoration:none}
.cpd-toc a.is-active{color:var(--cpd-accent);border-left-color:var(--cpd-accent);font-weight:500}
.cpd-toc a.lvl-3{padding-left:26px;font-size:.82rem}

/* ---- Hero / cards (archive) ---- */
/* Classic page header: full-width band with its own background,
   the title/subtitle/search sit inside it. */
.cpd-hero{
  text-align:center;
  /* Symmetric vertical padding + matching top/bottom borders so the
     header band reads as a self-contained section, not as something
     bleeding into the page chrome above it. */
  padding:66px 28px;
  background:var(--cpd-hero-bg,var(--cpd-surface));
  border-top:1px solid var(--cpd-border);
  border-bottom:1px solid var(--cpd-border);
}
.cpd-hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 12px;letter-spacing:-.02em}
.cpd-hero p{color:var(--cpd-muted);font-size:1.1rem;margin:0 auto 26px;max-width:560px}
/* Hero search: reset the sidebar sticky-band styling (no white box),
   it just sits centred on the header band. */
.cpd-search-hero{
  position:relative;max-width:480px;margin:0 auto;
  padding:0;background:transparent;
}
/* White field so it stands out on the tinted header band. */
.cpd-search-hero .cpd-search-input{background:var(--cpd-bg)}

/* Live-search results panel (overlays the content below). */
.cpd-search-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  text-align:left;background:var(--cpd-bg);
  border:1px solid var(--cpd-border);border-radius:var(--cpd-radius);
  box-shadow:0 12px 34px -14px rgba(17,24,39,.30);
  max-height:60vh;overflow-y:auto;overscroll-behavior:contain;padding:6px;
}
.cpd-search-empty{margin:0;padding:14px 12px;color:var(--cpd-muted);font-size:.9rem}
[data-cpd-root] a.cpd-search-result{
  display:block;padding:10px 12px;border-radius:8px;text-decoration:none;
  color:var(--cpd-fg);transition:background .12s ease;
}
[data-cpd-root] a.cpd-search-result:hover{background:var(--cpd-surface);text-decoration:none}
.cpd-search-result-title{display:block;font-weight:600;font-size:.95rem}
.cpd-search-result-ex{display:block;margin-top:3px;color:var(--cpd-muted);font-size:.84rem}
.cpd-cards{
  max-width:var(--cpd-maxw);margin:0 auto;padding:54px 28px 90px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;
}
.cpd-card{
  position:relative;
  border:1px solid var(--cpd-border);border-radius:var(--cpd-radius);
  padding:26px;background:var(--cpd-bg);
  box-shadow:0 1px 2px rgba(17,24,39,.04),0 10px 30px -14px rgba(17,24,39,.16);
  transition:box-shadow .18s ease,transform .18s ease;
}
.cpd-card:hover{
  box-shadow:0 6px 14px -8px rgba(17,24,39,.10),0 22px 48px -18px rgba(17,24,39,.26);
  transform:translateY(-3px);
}
/* Whole-card click → category, via a stretched overlay on the title
   link. Inner links sit above it so they stay individually clickable. */
.cpd-card h2 a::after{content:"";position:absolute;inset:0;z-index:0}
.cpd-card a:hover{text-decoration:none}
/* Article links DO underline on hover (distinct from clicking the
   whole card → category). Higher specificity beats the rule above. */
.cpd-card ul a:hover{text-decoration:underline}
.cpd-card-thumb,
.cpd-card ul a{position:relative;z-index:1}
/* Calm hierarchy: dark neutral title (not accent). The small article
   links keep the accent colour (clear navigational cue). */
.cpd-card h2 a{color:var(--cpd-fg)}
.cpd-card ul a{color:var(--cpd-accent)}
.cpd-card-thumb{display:block;margin:-26px -26px 16px;border-radius:var(--cpd-radius) var(--cpd-radius) 0 0;overflow:hidden}
.cpd-card-thumb img{width:100%;height:150px;object-fit:cover;display:block}
.cpd-card h2{font-size:1.2rem;margin:0 0 10px}
.cpd-cat-hero{width:100%;max-height:240px;object-fit:cover;border-radius:var(--cpd-radius);margin:0 0 22px;display:block}
.cpd-card-desc{color:var(--cpd-muted);font-size:.9rem;margin:0 0 14px}
.cpd-card ul{list-style:none;margin:0;padding:0}
.cpd-card li{margin:5px 0;font-size:.84rem}
/* Max 3 items shown; when there are more, the bottom of the list
   (the 3rd item) dissolves progressively toward the card background,
   hinting "there's more — click the card". */
.cpd-card-list{position:relative}
.cpd-card-list.has-more ul{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
}

/* ---- List (taxonomy) ---- */
.cpd-list{list-style:none;margin:0;padding:0}
.cpd-list li{border-bottom:1px solid var(--cpd-border)}
.cpd-list a{display:block;padding:18px 14px;border-radius:6px;transition:background .15s ease}
.cpd-list a:hover{text-decoration:none;background:var(--cpd-surface)}
.cpd-list-title{display:block;font-weight:600;color:var(--cpd-fg);font-size:1.05rem}
.cpd-list-desc{display:block;color:var(--cpd-muted);font-size:.9rem;margin-top:4px}
.cpd-empty{color:var(--cpd-muted);padding:40px 0}
.cpd-search-hidden{display:none !important}

/* ---- Sidebar show/hide toggle (focus reading) ---- */
.cpd-topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.cpd-sidebar-toggle{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--cpd-muted);background:var(--cpd-surface);
  border:1px solid var(--cpd-border);border-radius:9px;padding:6px 12px;
  transition:box-shadow .15s ease;
}
/* Shadow ONLY while the mouse is over the button — it must NOT
   linger after a click. The accent goes on the icon only, on hover. */
.cpd-sidebar-toggle:hover{
  color:var(--cpd-muted);
  background:var(--cpd-surface);
  border-color:var(--cpd-border);
  box-shadow:0 4px 14px -6px rgba(20,15,12,.35);
}
/* Focus/active: keep it visually identical to rest state (no blue
   tint from theme/UA, no lingering shadow). */
.cpd-sidebar-toggle:focus,
.cpd-sidebar-toggle:focus-visible,
.cpd-sidebar-toggle:active{
  color:var(--cpd-muted);
  background:var(--cpd-surface);
  border-color:var(--cpd-border);
  outline:none;
  box-shadow:none;
}
/* Crisp SVG hamburger — 3 strictly identical bars, accent colour. */
.cpd-sidebar-toggle-bars{
  display:inline-flex;align-items:center;line-height:0;
  /* optical alignment with the label's visual midline */
  transform:translateY(1px);
}
.cpd-sidebar-toggle-bars svg{display:block;fill:var(--cpd-accent)}
/* No pressed-state tint — the sidebar visibly hiding is the feedback. */

/* Hidden state: sidebar removed, main content reclaims the space. */
/* Smooth collapse: the grid column animates to 0 and the sidebar
   fades — same track count as the base grid so it can transition. */
.cpd-sidebar-hidden .cpd-sidebar{opacity:0;pointer-events:none}
.cpd-sidebar-hidden .cpd-layout{grid-template-columns:0 minmax(0,1fr) var(--cpd-toc-w)}

/* ---- Article feedback / UGC ---- */
.cpd-fb{
  margin:48px 0 10px;padding:26px 28px;
  border:1px solid var(--cpd-border);border-radius:var(--cpd-radius);
  background:var(--cpd-surface);
}
.cpd-fb-vote{margin:0 0 6px}
.cpd-fb-vote + .cpd-fb-head{margin-top:22px;padding-top:22px;border-top:1px solid var(--cpd-border)}
.cpd-fb-vote-q{font-family:inherit;font-weight:700;font-size:1.02rem;margin:0 0 12px;color:var(--cpd-fg)}
.cpd-fb-vote-btns{display:flex;gap:10px}
[data-cpd-root] .cpd-fb-vote-btn{
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:.9rem;
  font-weight:600;cursor:pointer;color:var(--cpd-fg);
  background:var(--cpd-bg);border:1px solid var(--cpd-border);
  border-radius:var(--cpd-radius);padding:8px 18px;line-height:1.2;
  box-shadow:none;transition:box-shadow .15s ease,border-color .15s ease;
}
[data-cpd-root] .cpd-fb-vote-btn:hover,
[data-cpd-root] .cpd-fb-vote-btn:focus-visible{
  border-color:var(--cpd-accent);box-shadow:0 1px 6px rgba(0,0,0,.08);outline:none;
}
[data-cpd-root] .cpd-fb-vote-btn:disabled{cursor:default;opacity:.55;box-shadow:none}
[data-cpd-root] .cpd-fb-vote-btn.is-picked,
[data-cpd-root] .cpd-fb-vote-btn.is-picked:hover,
[data-cpd-root] .cpd-fb-vote-btn.is-picked:focus-visible{
  background:var(--cpd-bg);border-color:var(--cpd-accent);
  color:var(--cpd-accent);opacity:1;
  box-shadow:inset 0 0 0 1px var(--cpd-accent);
}
.cpd-fb-vote-thanks{margin:12px 0 0;color:var(--cpd-muted);font-size:.9rem}
.cpd-fb-title{font-family:inherit;font-weight:700;font-size:1.02rem;margin:0 0 4px;color:var(--cpd-fg)}
.cpd-fb-sub{margin:0 0 16px;color:var(--cpd-muted);font-size:.92rem}
.cpd-fb-open{
  display:inline-flex;align-items:center;font-family:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer;color:var(--cpd-accent-fg);
  background:var(--cpd-accent);border:1px solid var(--cpd-accent);
  border-radius:9px;padding:9px 18px;transition:box-shadow .15s ease;
}
/* Hover = shadow ONLY (props pinned + [data-cpd-root] beats theme). */
[data-cpd-root] .cpd-fb-open:hover,
[data-cpd-root] .cpd-fb-open:focus-visible{
  background:var(--cpd-accent);color:var(--cpd-accent-fg);
  border-color:var(--cpd-accent);outline:none;
  box-shadow:0 4px 14px -6px rgba(20,15,12,.35);
}
[data-cpd-root] .cpd-fb-open:focus,
[data-cpd-root] .cpd-fb-open:active{
  background:var(--cpd-accent);color:var(--cpd-accent-fg);
  border-color:var(--cpd-accent);outline:none;box-shadow:none;
}
/* Smooth reveal: collapsed by default, animates open via .is-open. */
.cpd-fb-form{
  display:flex;flex-direction:column;gap:14px;
  /* tiny inset so the focus ring isn't clipped by overflow:hidden */
  padding:4px;
  overflow:hidden;max-height:0;opacity:0;margin-top:0;
  transition:max-height .34s ease,opacity .26s ease,margin-top .26s ease;
}
.cpd-fb-form.is-open{max-height:680px;opacity:1;margin-top:18px}
/* After the reveal animation, stop clipping so the submit button's
   shadow is fully visible. */
.cpd-fb-form.cpd-fb-open-done{overflow:visible}
.cpd-fb-field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:var(--cpd-fg)}
.cpd-fb-req{color:#c0392b;margin-left:3px}
.cpd-fb-opt{font-weight:400;font-size:.78rem;color:var(--cpd-muted)}
.cpd-fb-field textarea,
.cpd-fb-field input{
  font-family:inherit;font-size:.92rem;font-weight:400;
  padding:10px 12px;width:100%;
}
.cpd-fb-field textarea{resize:vertical;min-height:90px}

/* Unified field appearance + focus across the WHOLE plugin. The
   [data-cpd-root] prefix raises specificity so it overrides the
   active theme's input styling (border/radius/focus), making every
   field — search, suggestion, e-mail — look and focus identically. */
[data-cpd-root] .cpd-search-input,
[data-cpd-root] .cpd-fb-field input,
[data-cpd-root] .cpd-fb-field textarea{
  border:1px solid var(--cpd-border);
  border-radius:var(--cpd-radius);
  color:var(--cpd-fg);
}
/* Feedback fields stay white to pop on the surface-toned card. */
[data-cpd-root] .cpd-fb-field input,
[data-cpd-root] .cpd-fb-field textarea{background:var(--cpd-bg)}
[data-cpd-root] .cpd-search-input:focus,
[data-cpd-root] .cpd-fb-field input:focus,
[data-cpd-root] .cpd-fb-field textarea:focus{
  outline:none;
  border-color:var(--cpd-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cpd-accent) 22%,transparent);
}
.cpd-fb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.cpd-fb-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cpd-fb-submit{
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  color:var(--cpd-accent-fg);background:var(--cpd-accent);
  border:1px solid var(--cpd-accent);border-radius:9px;padding:9px 18px;
  transition:box-shadow .15s ease;
}
[data-cpd-root] .cpd-fb-submit:hover,
[data-cpd-root] .cpd-fb-submit:focus-visible{
  background:var(--cpd-accent);color:var(--cpd-accent-fg);
  border-color:var(--cpd-accent);outline:none;
  box-shadow:0 4px 14px -6px rgba(20,15,12,.35);
}
[data-cpd-root] .cpd-fb-submit:focus,
[data-cpd-root] .cpd-fb-submit:active{
  background:var(--cpd-accent);color:var(--cpd-accent-fg);
  border-color:var(--cpd-accent);outline:none;box-shadow:none;
}
.cpd-fb-submit:disabled{opacity:.6;cursor:default;box-shadow:none}
.cpd-fb-msg{margin:0;font-size:.88rem;font-weight:600}
.cpd-fb-msg.is-ok{color:#1f8a52}
.cpd-fb-msg.is-err{color:#c0392b}

/* ---- Responsive ---- */
@media(max-width:1080px){
  .cpd-layout{grid-template-columns:var(--cpd-sidebar-w) minmax(0,1fr);}
  .cpd-toc{display:none}
  /* 2 tracks both states → still animatable. */
  .cpd-sidebar-hidden .cpd-layout{grid-template-columns:0 minmax(0,1fr)}
}
@media(max-width:820px){
  .cpd-layout{grid-template-columns:1fr;gap:24px}
  /* Mobile: drop the whole left navigation. Articles are reached
     via the homepage cards, internal links, or search — the sidebar
     itself takes too much vertical room on a phone. */
  .cpd-sidebar{display:none}
  /* The "Navigation" toggle would now toggle nothing — hide it. The
     breadcrumb fills the topbar width. */
  .cpd-sidebar-toggle{display:none}
  .cpd-topbar-left{width:100%}
  /* "Discuter avec une IA" bar: drop sticky on mobile so it never
     floats over the article on a narrow viewport — keep it inline. */
  .cpd-ai-sticky{position:static;top:auto}
  /* Hidden-sidebar state is now redundant on mobile (sidebar always
     gone), but keep the override explicit so any class combination
     stays sane. */
  .cpd-sidebar-hidden .cpd-sidebar{display:none}
  .cpd-sidebar-hidden .cpd-layout{grid-template-columns:1fr}
}