@hgdc/docs 0.3.0 → 0.4.1

package/src/styles/theme.css

@@ -1,686 +1,2353 @@
 /*
- * DA HGDC pour Starlight : chrome monochrome, un seul accent (la couleur du client, sinon le
- * violet HGDC), profondeur par la teinte plutôt que par les bordures, coins arrondis.
- * Les variables d'accent sont injectées depuis docs.json (`core/theme.ts`).
+ * Interface des sites HGDC Docs, posée sur Starlight.
+ *
+ * Même dessin que les produits (`@hgdc/ui`) : gris OKLCH sans teinte, Inter pour les titres,
+ * Geist pour le texte, un seul accent (la couleur du produit, `colors.primary` de docs.json,
+ * ajustée au contraste par `core/theme.ts`), des surfaces séparées par la teinte. Les
+ * valeurs des gris reprennent celles de `@hgdc/ui/styles.css` : un site de doc n'embarque
+ * pas Tailwind, il ne peut pas importer le fichier du kit.
+ *
+ * Écart assumé avec le kit : le contenu (code, cartes, encadrés, tableaux) porte un filet.
+ * Sur une page blanche de lecture, c'est lui qui tient les blocs, comme chez Mintlify.
  */
 @import "@fontsource-variable/inter";
 @import "@fontsource-variable/geist";
 
+/* --- Jetons --- */
+
 :root {
-  --sl-font: "Inter Variable", "Inter", system-ui, sans-serif;
-  --sl-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
-  --hgdc-font-heading: "Geist Variable", "Inter Variable", system-ui, sans-serif;
-  --hgdc-radius: 1rem;
-  --hgdc-radius-card: 1.5rem;
-  --hgdc-ease: cubic-bezier(0.23, 1, 0.32, 1);
-
-  /* Sombre (défaut de Starlight) : gris neutres, sans la teinte bleue d'origine. */
-  --sl-color-white: #fafafa;
-  --sl-color-gray-1: #ececec;
-  --sl-color-gray-2: #c9c9c9;
-  --sl-color-gray-3: #9b9b9b;
-  --sl-color-gray-4: #6a6a6a;
-  --sl-color-gray-5: #393939;
-  --sl-color-gray-6: #1d1d1e;
-  --sl-color-black: #0f0f10;
-  --hgdc-surface: #19191a;
-  --hgdc-surface-hover: #222224;
-}
-
-:root[data-theme="light"] {
-  --sl-color-white: #0a0a0a;
-  --sl-color-gray-1: #1c1c1c;
-  --sl-color-gray-2: #383838;
-  --sl-color-gray-3: #5c5c5c;
-  --sl-color-gray-4: #8a8a8a;
-  --sl-color-gray-5: #c8c8c8;
-  --sl-color-gray-6: #ececec;
-  --sl-color-gray-7: #f6f6f6;
-  --sl-color-black: #ffffff;
-  --hgdc-surface: #f5f5f5;
-  --hgdc-surface-hover: #ededed;
-}
-
-.sl-markdown-content :is(h1, h2, h3, h4),
-h1#_top {
-  font-family: var(--hgdc-font-heading);
+  --hd-font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+  --hd-font-heading: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --hd-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
+  --hd-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --hd-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+
+  --hd-nav-h: 3.5rem;
+  --hd-sidebar-w: 17.5rem;
+  --hd-toc-w: 15.5rem;
+  --hd-panel-w: 26rem;
+  --hd-content-w: 45rem;
+  --hd-gutter: 1.25rem;
+
+  /* Sombre, recouvert par le clair tant que `ThemeProvider.astro` n'a pas choisi le sombre :
+     clair par défaut, et clair sans JavaScript. */
+  color-scheme: dark;
+  --hd-bg: oklch(0.145 0 0);
+  --hd-fg: oklch(0.985 0 0);
+  --hd-fg-2: oklch(0.87 0 0);
+  --hd-muted: oklch(0.205 0 0);
+  --hd-muted-2: oklch(0.269 0 0);
+  --hd-muted-fg: oklch(0.708 0 0);
+  --hd-border: oklch(1 0 0 / 10%);
+  --hd-border-strong: oklch(1 0 0 / 16%);
+  --hd-floating: oklch(0.205 0 0);
+  --hd-code-bg: oklch(0.17 0 0);
+  --hd-code-header: oklch(0.2 0 0);
+  --hd-hover: oklch(1 0 0 / 6%);
+  --hd-shadow: 0 1px 2px oklch(0 0 0 / 30%), 0 12px 32px -8px oklch(0 0 0 / 50%);
+  --hd-scroll-thumb: oklch(1 0 0 / 22%);
+  --hd-backdrop: oklch(0 0 0 / 55%);
+  --hd-primary: oklch(0.922 0 0);
+  --hd-primary-fg: oklch(0.205 0 0);
+
+  --hd-tone-note: oklch(0.72 0.15 256);
+  --hd-tone-info: oklch(0.708 0 0);
+  --hd-tone-tip: oklch(0.75 0.14 156);
+  --hd-tone-check: oklch(0.75 0.14 156);
+  --hd-tone-warning: oklch(0.82 0.15 86);
+  --hd-tone-danger: oklch(0.72 0.19 22);
+
+  --hd-accent: var(--sl-color-accent);
+  --hd-accent-fg: var(--hgdc-on-accent, #fff);
+  --hd-accent-soft: color-mix(in oklab, var(--hd-accent) 9%, transparent);
+
+  /* Starlight, pour ce qui reste de son dessin (onglets, badges, contenu). */
+  --sl-font: var(--hd-font-sans);
+  --sl-font-mono: var(--hd-font-mono);
+  --sl-nav-height: var(--hd-nav-h);
+  --sl-sidebar-width: var(--hd-sidebar-w);
+  --sl-content-width: var(--hd-content-w);
+  --sl-mobile-toc-height: 0rem;
+  --sl-color-bg: var(--hd-bg);
+  --sl-color-bg-nav: var(--hd-bg);
+  --sl-color-bg-sidebar: var(--hd-bg);
+  --sl-color-hairline: var(--hd-border);
+  --sl-color-hairline-light: var(--hd-border);
+  --sl-color-hairline-shade: var(--hd-border);
+  --sl-color-text: var(--hd-fg-2);
+  --sl-color-text-accent: var(--hd-accent);
+  --sl-color-white: var(--hd-fg);
+  --sl-color-gray-1: oklch(0.92 0 0);
+  --sl-color-gray-2: oklch(0.82 0 0);
+  --sl-color-gray-3: var(--hd-muted-fg);
+  --sl-color-gray-4: oklch(0.55 0 0);
+  --sl-color-gray-5: oklch(0.32 0 0);
+  --sl-color-gray-6: var(--hd-muted);
+  --sl-color-black: var(--hd-bg);
+  --sl-text-h1: 2.25rem;
+  --sl-text-h2: 1.5rem;
+  --sl-text-h3: 1.1875rem;
+  --sl-text-h4: 1rem;
+}
+
+:root:not([data-hd-theme="dark"]) {
+  color-scheme: light;
+  --hd-bg: oklch(1 0 0);
+  --hd-fg: oklch(0.145 0 0);
+  --hd-fg-2: oklch(0.3 0 0);
+  --hd-muted: oklch(0.97 0 0);
+  --hd-muted-2: oklch(0.94 0 0);
+  --hd-muted-fg: oklch(0.52 0 0);
+  --hd-border: oklch(0.922 0 0);
+  --hd-border-strong: oklch(0.87 0 0);
+  --hd-floating: oklch(1 0 0);
+  --hd-code-bg: oklch(1 0 0);
+  --hd-code-header: oklch(0.975 0 0);
+  --hd-hover: oklch(0 0 0 / 4.5%);
+  --hd-shadow: 0 1px 2px oklch(0 0 0 / 5%), 0 12px 32px -8px oklch(0 0 0 / 14%);
+  --hd-scroll-thumb: oklch(0 0 0 / 20%);
+  --hd-backdrop: oklch(0 0 0 / 30%);
+  --hd-primary: oklch(0.205 0 0);
+  --hd-primary-fg: oklch(0.985 0 0);
+
+  --hd-tone-note: oklch(0.5 0.17 256);
+  --hd-tone-info: oklch(0.45 0 0);
+  --hd-tone-tip: oklch(0.47 0.12 155);
+  --hd-tone-check: oklch(0.47 0.12 155);
+  --hd-tone-warning: oklch(0.5 0.12 70);
+  --hd-tone-danger: oklch(0.53 0.21 27);
+
+  --sl-color-gray-1: oklch(0.25 0 0);
+  --sl-color-gray-2: oklch(0.35 0 0);
+  --sl-color-gray-3: var(--hd-muted-fg);
+  --sl-color-gray-4: oklch(0.65 0 0);
+  --sl-color-gray-5: oklch(0.87 0 0);
+  --sl-color-gray-6: var(--hd-muted);
+  --sl-color-gray-7: oklch(0.985 0 0);
+}
+
+/* --- Base --- */
+
+html {
+  background: var(--hd-bg);
+  scroll-padding-top: calc(var(--hd-nav-h) + 1.5rem);
+  scrollbar-width: thin;
+  scrollbar-color: var(--hd-scroll-thumb) transparent;
+}
+
+body {
+  background: var(--hd-bg);
+  color: var(--hd-fg-2);
+  font-family: var(--hd-font-sans);
+  font-size: 1rem;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background: color-mix(in oklab, var(--hd-accent) 24%, transparent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--hd-accent);
+  outline-offset: 2px;
+}
+
+/* Barres de défilement fines, visibles quand la souris ou le clavier est dans le bloc. */
+:where(.sidebar-pane, .hd-toc-scroll, .expressive-code pre, .hgdc-panel__body, .hd-palette__results, .hd-table) {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  scrollbar-gutter: stable;
+}
+:where(.sidebar-pane, .hd-toc-scroll, .expressive-code pre, .hgdc-panel__body, .hd-palette__results, .hd-table):is(
+  :hover,
+  :focus-within
+) {
+  scrollbar-color: var(--hd-scroll-thumb) transparent;
+}
+:where(
+  .sidebar-pane,
+  .hd-toc-scroll,
+  .expressive-code pre,
+  .hgdc-panel__body,
+  .hd-palette__results,
+  .hd-table
+)::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+:where(
+  .sidebar-pane,
+  .hd-toc-scroll,
+  .expressive-code pre,
+  .hgdc-panel__body,
+  .hd-palette__results,
+  .hd-table
+)::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 999px;
+}
+:where(.sidebar-pane, .hd-toc-scroll, .expressive-code pre, .hgdc-panel__body, .hd-palette__results, .hd-table):is(
+    :hover,
+    :focus-within
+  )::-webkit-scrollbar-thumb {
+  background: var(--hd-scroll-thumb);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.hd-icon {
+  flex-shrink: 0;
+}
+
+.hd-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--hd-border);
+  background: var(--hd-bg);
+  color: var(--hd-muted-fg);
+  font: 500 0.6875rem/1 var(--hd-font-sans);
+  white-space: nowrap;
+}
+.hd-kbd--button {
+  cursor: pointer;
+}
+
+.hd-icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--hd-muted-fg);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    transform 160ms var(--hd-ease-out);
+}
+.hd-icon-button:hover {
+  background: var(--hd-hover);
+  color: var(--hd-fg);
+}
+.hd-icon-button:active {
+  transform: scale(0.95);
+}
+
+.hd-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 2.25rem;
+  padding: 0 1rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font: 500 0.875rem/1 var(--hd-font-sans);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    transform 160ms var(--hd-ease-out);
+}
+.hd-pill:active {
+  transform: scale(0.97);
+}
+.hd-pill--ghost {
+  border-color: var(--hd-border);
+  background: var(--hd-bg);
+  color: var(--hd-fg);
+}
+.hd-pill--ghost:hover {
+  background: var(--hd-muted);
+}
+.hd-pill--primary {
+  background: var(--hd-accent);
+  color: var(--hd-accent-fg);
+}
+.hd-pill--primary:hover {
+  background: color-mix(in oklab, var(--hd-accent) 88%, var(--hd-fg));
+}
+
+/* --- En-tête --- */
+
+.hd-topbar {
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 30;
+  height: var(--hd-nav-h);
+  padding: 0 0.75rem 0 0.5rem;
+  background: var(--hd-bg);
+  border-bottom: 1px solid var(--hd-border);
+}
+
+.hd-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+}
+.hd-header__start {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.hd-header__tabs {
+  display: none;
+}
+.hd-header__end {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 0 0 auto;
+}
+.hd-header__links {
+  display: none;
+}
+
+.hd-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.75rem;
+  color: var(--hd-fg);
+  text-decoration: none;
+}
+.hd-brand__mark {
+  display: inline-grid;
+  flex-shrink: 0;
+}
+.hd-brand__mark img {
+  grid-area: 1 / 1;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.hd-brand--footer .hd-brand__mark img {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.hd-brand__dark,
+:root[data-hd-theme="dark"] .hd-brand__light {
+  visibility: hidden;
+}
+:root[data-hd-theme="dark"] .hd-brand__dark {
+  visibility: visible;
+}
+.hd-brand__name {
+  font: 600 1.0625rem/1 var(--hd-font-heading);
+  letter-spacing: -0.02em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hd-theme-button .hd-theme-button__sun,
+:root[data-hd-theme="dark"] .hd-theme-button .hd-theme-button__moon {
+  display: none;
+}
+:root[data-hd-theme="dark"] .hd-theme-button .hd-theme-button__sun {
+  display: block;
+}
+.hd-header .hd-theme-button {
+  display: none;
+}
+
+.hd-search-trigger {
+  display: inline-grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--hd-muted-fg);
+  font: 400 0.875rem/1 var(--hd-font-sans);
+  cursor: pointer;
+}
+.hd-search-trigger:hover {
+  background: var(--hd-hover);
+  color: var(--hd-fg);
+}
+.hd-search-trigger__label,
+.hd-search-trigger .hd-kbd {
+  display: none;
+}
+
+@media (min-width: 50em) {
+  .hd-topbar {
+    padding: 0 1.25rem 0 0.75rem;
+  }
+  .hd-menu-button {
+    display: none;
+  }
+  .hd-header .hd-theme-button {
+    display: inline-grid;
+  }
+  .hd-search-trigger {
+    display: inline-flex;
+    gap: 0.5rem;
+    width: 15rem;
+    height: 2.25rem;
+    padding: 0 0.375rem 0 0.875rem;
+    margin-inline-end: 0.25rem;
+    border: 1px solid var(--hd-border);
+    background: var(--hd-bg);
+    text-align: start;
+  }
+  .hd-search-trigger:hover {
+    border-color: var(--hd-border-strong);
+    background: var(--hd-bg);
+  }
+  .hd-search-trigger__label {
+    display: block;
+    flex: 1;
+  }
+  .hd-search-trigger .hd-kbd {
+    display: inline-flex;
+  }
+}
+
+@media (min-width: 64em) {
+  .hd-header {
+    display: grid;
+    grid-template-columns: var(--hd-sidebar-w) 1fr auto;
+    gap: 0;
+  }
+  .hd-header__start {
+    margin-inline-start: -0.25rem;
+  }
+  .hd-header__end {
+    grid-column: 3;
+  }
+  .hd-header__tabs {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+    padding-inline-start: 1rem;
+  }
+  .hd-header__tabs a {
+    padding: 0.5rem 0.875rem;
+    border-radius: 999px;
+    color: var(--hd-muted-fg);
+    font: 500 0.875rem/1 var(--hd-font-sans);
+    text-decoration: none;
+    white-space: nowrap;
+    transition:
+      background-color 150ms ease,
+      color 150ms ease;
+  }
+  .hd-header__tabs a:hover {
+    color: var(--hd-fg);
+  }
+  .hd-header__tabs a[aria-current="page"] {
+    background: var(--hd-muted);
+    color: var(--hd-fg);
+  }
+  .hd-header__links {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-inline: 0.5rem 0.25rem;
+  }
+}
+
+/* --- Barre latérale --- */
+
+.hd-sidebar .sidebar-pane {
+  position: fixed;
+  z-index: 40;
+  inset: 0 auto 0 0;
+  width: min(20rem, 86vw);
+  height: 100dvh;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: var(--hd-bg);
+  color: inherit;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  box-shadow: var(--hd-shadow);
+  transform: translateX(-100%);
+  transition:
+    transform 320ms var(--hd-ease-drawer),
+    display 320ms allow-discrete,
+    overlay 320ms allow-discrete;
+}
+.hd-sidebar .sidebar-pane:popover-open {
+  transform: none;
+}
+@starting-style {
+  .hd-sidebar .sidebar-pane:popover-open {
+    transform: translateX(-100%);
+  }
+}
+.hd-sidebar .sidebar-pane::backdrop {
+  background: var(--hd-backdrop);
+  opacity: 0;
+  transition:
+    opacity 320ms ease,
+    display 320ms allow-discrete,
+    overlay 320ms allow-discrete;
+}
+.hd-sidebar .sidebar-pane:popover-open::backdrop {
+  opacity: 1;
+}
+@starting-style {
+  .hd-sidebar .sidebar-pane:popover-open::backdrop {
+    opacity: 0;
+  }
+}
+
+.hd-sidebar__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-height: 100%;
+  padding: 1rem 0.75rem 2rem 1rem;
+}
+
+.hd-sidebar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: -0.25rem -0.25rem 0 -0.5rem;
+}
+
+@media (min-width: 50em) {
+  .hd-sidebar .sidebar-pane {
+    display: block;
+    inset: var(--hd-nav-h) auto 0 0;
+    width: var(--hd-sidebar-w);
+    height: auto;
+    box-shadow: none;
+    transform: none;
+    transition: none;
+  }
+  .hd-sidebar__content {
+    padding: 1.5rem 1rem 3rem 1.25rem;
+  }
+  .hd-mobile-only {
+    display: none !important;
+  }
+}
+
+.hd-nav {
+  display: grid;
+  gap: 1px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.hd-nav--depth-0 {
+  gap: 1.5rem;
+}
+.hd-nav--depth-0 > li:not(.hd-nav__group) {
+  margin-bottom: -1.5rem;
+}
+.hd-nav--depth-0 > li:not(.hd-nav__group) + li:not(.hd-nav__group) {
+  margin-top: calc(1px - 1.5rem);
+}
+.hd-nav__heading {
+  margin: 0 0 0.375rem;
+  padding-inline: 0.75rem;
+  color: var(--hd-fg);
+  font: 600 0.8125rem/1.25rem var(--hd-font-heading);
+  letter-spacing: -0.005em;
+}
+.hd-nav--depth-2,
+.hd-nav--depth-3 {
+  margin: 1px 0 0.25rem 0.75rem;
+  padding-inline-start: 0.5rem;
+  border-inline-start: 1px solid var(--hd-border);
+}
+
+.hd-nav__link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--hd-muted-fg);
+  font: 400 0.875rem/1.35 var(--hd-font-sans);
+  text-decoration: none;
+  cursor: pointer;
+  list-style: none;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+.hd-nav__link::-webkit-details-marker {
+  display: none;
+}
+.hd-nav__link > span:first-child {
+  flex: 1;
+  min-width: 0;
+}
+.hd-nav__link:hover {
+  background: var(--hd-hover);
+  color: var(--hd-fg);
+}
+.hd-nav__link[aria-current="page"] {
+  background: var(--hd-accent-soft);
+  color: var(--hd-accent);
+  font-weight: 500;
+}
+.hd-nav__chevron {
+  color: var(--hd-muted-fg);
+  transition: transform 200ms var(--hd-ease-out);
+}
+.hd-nav__fold[open] > summary .hd-nav__chevron {
+  transform: rotate(90deg);
+}
+
+.hd-badge {
+  flex-shrink: 0;
+  padding: 0.125rem 0.4rem;
+  border-radius: 999px;
+  background: var(--hd-accent-soft);
+  color: var(--hd-accent);
+  font: 600 0.6875rem/1 var(--hd-font-sans);
+}
+
+.hd-sidebar-tabs {
+  display: grid;
+  gap: 1px;
+}
+.hd-sidebar-tabs a {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--hd-fg-2);
+  font: 500 0.875rem/1.2 var(--hd-font-sans);
+  text-decoration: none;
+}
+.hd-sidebar-tabs a[aria-current="page"] {
+  background: var(--hd-muted);
+  color: var(--hd-fg);
+}
+
+.hd-version select {
+  width: 100%;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 0.875rem;
+  background: var(--hd-bg);
+  color: var(--hd-fg);
+  font: 500 0.875rem var(--hd-font-sans);
+}
+
+.hd-sidebar-footer {
+  display: grid;
+  gap: 1rem;
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid var(--hd-border);
+}
+.hd-sidebar-links {
+  display: grid;
+  gap: 0.25rem;
+}
+.hd-sidebar-links a:not(.hd-pill) {
+  padding: 0.5rem 0.75rem;
+  color: var(--hd-fg-2);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.hd-theme-choice {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--hd-border);
+  border-radius: 999px;
+  justify-self: start;
+}
+.hd-theme-choice button {
+  display: grid;
+  place-items: center;
+  width: 1.875rem;
+  height: 1.75rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--hd-muted-fg);
+  cursor: pointer;
+}
+.hd-theme-choice button:hover {
+  color: var(--hd-fg);
+}
+.hd-theme-choice button[aria-checked="true"] {
+  background: var(--hd-muted-2);
+  color: var(--hd-fg);
+}
+
+/* --- Cadre et colonnes --- */
+
+.hd-main-frame {
+  padding-top: var(--hd-nav-h);
+  transition: margin 320ms var(--hd-ease-out);
+}
+@media (min-width: 50em) {
+  [data-has-sidebar] .hd-main-frame {
+    margin-inline-start: var(--hd-sidebar-w);
+  }
+}
+
+main {
+  padding: 0 0 2rem;
+}
+.content-panel {
+  padding: 0 var(--hd-gutter);
+}
+.content-panel + .content-panel {
+  border-top: 0;
+}
+.sl-container {
+  max-width: var(--hd-content-w);
+  margin-inline: auto;
+}
+
+.hd-columns__toc {
+  display: none;
+}
+
+@media (min-width: 50em) {
+  :root {
+    --hd-gutter: 2.5rem;
+  }
+}
+
+@media (min-width: 72em) {
+  .hd-columns--toc {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--hd-toc-w);
+  }
+  .hd-columns__toc {
+    display: block;
+    position: relative;
+  }
+  .hd-toc-scroll {
+    position: sticky;
+    top: var(--hd-nav-h);
+    max-height: calc(100dvh - var(--hd-nav-h));
+    overflow-y: auto;
+    padding: 2.5rem 1.5rem 2rem 0.5rem;
+  }
+}
+
+/* Table des matières (composant de Starlight, redessiné). */
+starlight-toc h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.75rem;
+  color: var(--hd-fg);
+  font: 500 0.8125rem/1.25rem var(--hd-font-heading);
+}
+starlight-toc h2::before {
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h13'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+}
+starlight-toc ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+starlight-toc ul ul {
+  padding-inline-start: 0.75rem;
+}
+starlight-toc a {
+  display: block;
+  padding: 0.3rem 0 0.3rem 0.875rem;
+  border-inline-start: 1px solid var(--hd-border);
+  color: var(--hd-muted-fg);
+  font: 400 0.8125rem/1.4 var(--hd-font-sans);
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+starlight-toc ul ul a {
+  margin-inline-start: -0.75rem;
+  padding-inline-start: 1.625rem;
+}
+starlight-toc a:hover {
+  color: var(--hd-fg);
+}
+starlight-toc a[aria-current="true"] {
+  border-inline-start-color: var(--hd-accent);
+  color: var(--hd-accent);
+  font-weight: 500;
+}
+starlight-toc a .hd-method {
+  display: none;
+}
+
+/* --- En-tête de page --- */
+
+.hd-title {
+  padding-top: 2rem;
+}
+.hd-eyebrow {
+  margin: 0 0 0.5rem;
+  color: var(--hd-accent);
+  font: 500 0.8125rem/1.25rem var(--hd-font-sans);
+}
+.hd-title__row {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.hd-title h1 {
+  margin: 0;
+  color: var(--hd-fg);
+  font: 600 1.875rem/1.15 var(--hd-font-heading);
+  letter-spacing: -0.025em;
+  text-wrap: balance;
+}
+.hd-lead {
+  margin: 0.75rem 0 0;
+  color: var(--hd-muted-fg);
+  font-size: 1.0625rem;
+  line-height: 1.6;
+  text-wrap: pretty;
+}
+.hd-title__row + .hd-lead {
+  margin-top: 0.75rem;
+}
+
+@media (min-width: 50em) {
+  .hd-title {
+    padding-top: 2.75rem;
+  }
+  .hd-title__row {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+  .hd-title h1 {
+    font-size: 2.25rem;
+  }
+  .hd-lead {
+    font-size: 1.125rem;
+  }
+}
+
+.hd-page-actions {
+  order: 2;
+  flex-shrink: 0;
+}
+.hd-title__row h1 {
+  order: 1;
+}
+@media (max-width: 49.99em) {
+  .hd-title__row {
+    display: contents;
+  }
+  .hd-title {
+    display: flex;
+    flex-direction: column;
+  }
+  .hd-page-actions {
+    order: 3;
+    margin-top: 1rem;
+  }
+  .hd-lead {
+    order: 2;
+  }
+  .hd-eyebrow {
+    order: 0;
+  }
+}
+
+.hd-split {
+  display: inline-flex;
+  align-items: stretch;
+  height: 2.125rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 999px;
+  background: var(--hd-bg);
+}
+.hd-split__main,
+.hd-split__more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: 0;
+  background: transparent;
+  color: var(--hd-fg);
+  font: 500 0.8125rem/1 var(--hd-font-sans);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+.hd-split__main {
+  padding: 0 0.75rem 0 0.875rem;
+  border-radius: 999px 0 0 999px;
+}
+.hd-split__more {
+  height: 100%;
+  padding: 0 0.625rem 0 0.5rem;
+  border-inline-start: 1px solid var(--hd-border);
+  border-radius: 0 999px 999px 0;
+  list-style: none;
+}
+.hd-split__more::-webkit-details-marker {
+  display: none;
+}
+.hd-split__main:hover,
+.hd-split__more:hover {
+  background: var(--hd-muted);
+}
+.hd-split__main:active {
+  transform: scale(0.98);
+}
+
+.hd-menu {
+  position: relative;
+}
+.hd-menu__list {
+  position: absolute;
+  z-index: 20;
+  inset-inline-end: -1px;
+  top: calc(100% + 0.5rem);
+  display: grid;
+  gap: 1px;
+  width: 17rem;
+  margin: 0;
+  padding: 0.375rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 1.25rem;
+  background: var(--hd-floating);
+  box-shadow: var(--hd-shadow);
+  list-style: none;
+  transform-origin: top right;
+  animation: hd-pop 150ms var(--hd-ease-out);
+}
+@media (max-width: 49.99em) {
+  .hd-menu__list {
+    inset-inline: 0 auto;
+    transform-origin: top left;
+  }
+}
+.hd-menu__list :is(a, button) {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 0;
+  border-radius: 0.875rem;
+  background: transparent;
+  color: var(--hd-muted-fg);
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+.hd-menu__list .hd-icon {
+  margin-top: 0.125rem;
+}
+.hd-menu__list span {
+  display: grid;
+  gap: 0.125rem;
+}
+.hd-menu__list strong {
+  color: var(--hd-fg);
+  font: 500 0.8125rem/1.3 var(--hd-font-sans);
+}
+.hd-menu__list small {
+  font-size: 0.75rem;
+  line-height: 1.3;
+}
+.hd-menu__list :is(a, button):hover {
+  background: var(--hd-muted);
+}
+
+@keyframes hd-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.97) translateY(-2px);
+  }
+}
+
+/* --- Contenu --- */
+
+.sl-markdown-content {
+  padding-top: 2rem;
+  color: var(--hd-fg-2);
+  font-size: 1rem;
+  line-height: 1.75;
+}
+.sl-markdown-content :is(h2, h3, h4, h5, h6) {
+  color: var(--hd-fg);
+  font-family: var(--hd-font-heading);
+  font-weight: 600;
+  scroll-margin-top: calc(var(--hd-nav-h) + 1.5rem);
+}
+.sl-markdown-content h2 {
+  margin-top: 2.75rem;
+  font-size: 1.5rem;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+}
+.sl-markdown-content h3 {
+  margin-top: 2rem;
+  font-size: 1.1875rem;
+  line-height: 1.4;
   letter-spacing: -0.015em;
 }
-
-.sl-markdown-content :is(a:not(.hgdc-card)) {
-  text-underline-offset: 0.2em;
+.sl-markdown-content h4 {
+  margin-top: 1.5rem;
+  font-size: 1rem;
+}
+.sl-markdown-content :is(h2, h3, h4) + * {
+  margin-top: 0.75rem;
+}
+.sl-markdown-content
+  :is(p, ul, ol, table, .hd-table, blockquote, figure, aside, details, .expressive-code)
+  + :is(
+    p,
+    ul,
+    ol,
+    .hd-table,
+    blockquote,
+    figure,
+    aside,
+    details,
+    .expressive-code,
+    .hgdc-card-group,
+    .hgdc-steps,
+    starlight-tabs,
+    hd-code-group
+  ) {
+  margin-top: 1.25rem;
+}
+.sl-markdown-content strong {
+  color: var(--hd-fg);
+  font-weight: 600;
+}
+.sl-markdown-content a:not(:where(.not-content *, .hgdc-card, .sl-anchor-link)) {
+  color: var(--hd-fg);
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--hd-accent) 55%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.22em;
+  transition: text-decoration-color 150ms ease;
+}
+.sl-markdown-content a:not(:where(.not-content *, .hgdc-card, .sl-anchor-link)):hover {
+  text-decoration-color: var(--hd-accent);
+  text-decoration-thickness: 2px;
+}
+.sl-markdown-content :is(ul, ol) {
+  padding-inline-start: 1.375rem;
+}
+.sl-markdown-content li + li {
+  margin-top: 0.375rem;
+}
+.sl-markdown-content li::marker {
+  color: var(--hd-muted-fg);
+}
+.sl-markdown-content :not(pre) > code {
+  padding: 0.125em 0.4em;
+  border: 1px solid var(--hd-border);
+  border-radius: 0.45rem;
+  background: var(--hd-muted);
+  color: var(--hd-fg);
+  font-family: var(--hd-font-mono);
+  font-size: 0.85em;
+  overflow-wrap: anywhere;
+}
+.sl-markdown-content blockquote {
+  margin-inline: 0;
+  padding-inline-start: 1rem;
+  border-inline-start: 2px solid var(--hd-border-strong);
+  color: var(--hd-muted-fg);
+}
+.sl-markdown-content hr {
+  margin-block: 2.5rem;
+  border: 0;
+  border-top: 1px solid var(--hd-border);
+}
+
+/* Ancres des titres (Starlight) : discrètes, au survol. */
+.sl-markdown-content .sl-anchor-link {
+  color: var(--hd-muted-fg);
+}
+
+/* Tableaux : un cadre arrondi, défilement horizontal dans le cadre. */
+.sl-markdown-content .hd-table {
+  overflow-x: auto;
+  border: 1px solid var(--hd-border);
+  border-radius: 1rem;
+}
+.sl-markdown-content table {
+  display: table;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+}
+.sl-markdown-content :is(th, td) {
+  padding: 0.625rem 0.875rem;
+  border: 0;
+  border-bottom: 1px solid var(--hd-border);
+  text-align: start;
+  vertical-align: top;
+}
+.sl-markdown-content tr:last-child td {
+  border-bottom: 0;
+}
+.sl-markdown-content th {
+  background: var(--hd-muted);
+  color: var(--hd-fg);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.sl-markdown-content td:first-child code {
+  white-space: nowrap;
+}
+
+/* Images : zoom au clic (widget/code.ts). */
+.sl-markdown-content img {
+  border-radius: 1rem;
+}
+.hd-zoomable {
+  cursor: zoom-in;
+}
+.hd-zoom {
+  max-width: min(92vw, 80rem);
+  max-height: 92dvh;
+  padding: 0;
+  border: 0;
+  border-radius: 1rem;
+  background: transparent;
+  cursor: zoom-out;
+  animation: hd-zoom-in 220ms var(--hd-ease-out);
+}
+.hd-zoom img {
+  display: block;
+  max-width: 100%;
+  max-height: 92dvh;
+  border-radius: 1rem;
+}
+.hd-zoom::backdrop {
+  background: oklch(0 0 0 / 70%);
+}
+@keyframes hd-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* --- Endpoints (`## GET /chemin`) --- */
+
+.sl-markdown-content .hd-endpoint {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+  margin-top: 3rem;
+  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 1rem;
+  background: var(--hd-muted);
+  font-size: 1rem;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+.hd-method {
+  --tone: var(--hd-tone-info);
+  display: inline-flex;
+  align-items: center;
+  height: 1.625rem;
+  padding: 0 0.5rem;
+  border-radius: 0.5rem;
+  background: color-mix(in oklab, var(--tone) 14%, transparent);
+  color: var(--tone);
+  font: 700 0.75rem/1 var(--hd-font-mono);
+  letter-spacing: 0.02em;
+}
+.hd-method[data-method="get"] {
+  --tone: var(--hd-tone-tip);
+}
+.hd-method[data-method="post"] {
+  --tone: var(--hd-tone-note);
+}
+.hd-method:is([data-method="put"], [data-method="patch"]) {
+  --tone: var(--hd-tone-warning);
+}
+.hd-method[data-method="delete"] {
+  --tone: var(--hd-tone-danger);
+}
+.sl-markdown-content .hd-endpoint .hd-path {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--hd-fg);
+  font: 500 0.9375rem/1.4 var(--hd-font-mono);
+  overflow-wrap: anywhere;
+}
+.hd-path__param {
+  text-decoration: underline dotted var(--hd-accent);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.25em;
+}
+
+/* --- Blocs de code --- */
+
+.sl-markdown-content .expressive-code {
+  position: relative;
+}
+.expressive-code .frame {
+  position: relative;
+}
+.expressive-code .frame.has-title .header,
+.expressive-code .frame.is-terminal .header {
+  min-height: 2.5rem;
+}
+.expressive-code .frame .header .title {
+  font-weight: 500;
+}
+.expressive-code .copy {
+  display: none !important;
+}
+.hd-code-actions {
+  position: absolute;
+  top: 0.375rem;
+  inset-inline-end: 0.375rem;
+  z-index: 2;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border-radius: 999px;
+  background: var(--hd-code-bg);
+}
+.frame.has-title .hd-code-actions,
+.frame.is-terminal .hd-code-actions {
+  background: transparent;
+}
+.hd-code-action {
+  display: grid;
+  place-items: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--hd-muted-fg);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+.hd-code-action:hover {
+  background: var(--hd-hover);
+  color: var(--hd-fg);
+}
+.expressive-code .frame:not(.has-title):not(.is-terminal) pre {
+  padding-inline-end: 6.5rem;
+}
+.hd-code-active pre,
+.hd-code-active .header {
+  border-color: var(--hd-accent) !important;
+}
+
+.hd-report {
+  display: grid;
+  gap: 0.625rem;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 1.25rem;
+  background: var(--hd-floating);
+  box-shadow: var(--hd-shadow);
+  animation: hd-pop 160ms var(--hd-ease-out);
+}
+.hd-report__title {
+  margin: 0;
+  color: var(--hd-fg);
+  font: 600 0.9375rem/1.4 var(--hd-font-heading);
+}
+.hd-report__hint {
+  margin: 0 !important;
+  color: var(--hd-muted-fg);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.hd-report textarea,
+.hgdc-feedback textarea {
+  width: 100%;
+  min-height: 5rem;
+  margin: 0 !important;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--hd-border-strong);
+  border-radius: 1rem;
+  background: var(--hd-bg);
+  color: var(--hd-fg);
+  font: 400 0.875rem/1.5 var(--hd-font-sans);
+  resize: vertical;
+}
+.hd-report textarea:focus-visible,
+.hgdc-feedback textarea:focus-visible {
+  outline: none;
+  border-color: var(--hd-accent);
+  box-shadow: 0 0 0 3px var(--hd-accent-soft);
 }
-
-/* Encadrés : lavis teinté, sans la barre latérale épaisse. */
-.starlight-aside {
-  border-inline-start-width: 0;
-  border-radius: var(--hgdc-radius);
-  padding: 0.875rem 1rem;
-  /* Un lavis de la couleur de l'encadré sur la surface, pas l'aplat saturé de Starlight. */
-  background: color-mix(in srgb, var(--sl-color-asides-border) 10%, var(--hgdc-surface));
+.hd-report__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin: 0 !important;
 }
 
-.expressive-code .frame {
-  border-radius: var(--hgdc-radius) !important;
+/* CodeGroup : onglets au-dessus des blocs, soulignés dans l'accent. */
+.hgdc-code-group {
+  display: block;
+}
+.hgdc-code-group:not([data-ready]) > :not(:first-child) {
+  display: none;
+}
+.hgdc-code-group[data-ready] {
+  overflow: hidden;
+  border: 1px solid var(--hd-border);
+  border-radius: 1rem;
+  background: var(--hd-code-bg);
+}
+.hgdc-code-group[data-ready] .expressive-code {
+  margin: 0 !important;
+}
+.hgdc-code-group[data-ready] .expressive-code .frame pre,
+.hgdc-code-group[data-ready] .expressive-code .frame .header {
+  border: 0 !important;
+  border-radius: 0 !important;
+}
+.hgdc-code-group[data-ready] .expressive-code .frame .header {
+  display: none;
+}
+.hgdc-code-group[data-ready] .hd-code-actions {
+  top: -2.375rem;
+  background: transparent;
+}
+.hd-code-tabs {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0 7rem 0 0.75rem;
+  border-bottom: 1px solid var(--hd-border);
+  background: var(--hd-code-header);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.hd-code-tabs button {
+  position: relative;
+  height: 2.5rem;
+  padding: 0 0.5rem;
+  border: 0;
+  background: transparent;
+  color: var(--hd-muted-fg);
+  font: 500 0.8125rem/1 var(--hd-font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.hd-code-tabs button:hover {
+  color: var(--hd-fg);
+}
+.hd-code-tabs button[aria-selected="true"] {
+  color: var(--hd-fg);
+}
+.hd-code-tabs button[aria-selected="true"]::after {
+  content: "";
+  position: absolute;
+  inset: auto 0.25rem -1px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--hd-accent);
+}
+.hd-code-tabs button:focus-visible {
+  outline-offset: -2px;
 }
 
-/* --- Composants MDX (compatibles Mintlify) --- */
+/* --- Composants MDX --- */
 
-.hgdc-card-group {
-  display: grid;
+.hd-callout {
+  --tone: var(--hd-tone-note);
+  display: flex;
   gap: 0.75rem;
-  grid-template-columns: minmax(0, 1fr);
-  margin-block: 1.25rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid color-mix(in oklab, var(--tone) 22%, transparent);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--tone) 7%, var(--hd-bg));
+  color: var(--hd-fg-2);
+  font-size: 0.9375rem;
+  line-height: 1.65;
 }
-
-@media (min-width: 50em) {
-  .hgdc-card-group {
-    grid-template-columns: repeat(var(--hgdc-cols, 2), minmax(0, 1fr));
-  }
+.hd-callout[data-tone="info"] {
+  --tone: var(--hd-tone-info);
+  background: var(--hd-muted);
+  border-color: var(--hd-border);
 }
-
-.hgdc-card {
-  display: block;
-  border-radius: var(--hgdc-radius-card);
-  background: var(--hgdc-surface);
-  padding: 1.125rem 1.25rem;
-  color: var(--sl-color-gray-2);
-  text-decoration: none;
-  transition: background-color 150ms var(--hgdc-ease);
+.hd-callout[data-tone="tip"] {
+  --tone: var(--hd-tone-tip);
 }
-
-.hgdc-card__title {
-  display: block;
-  margin-block-end: 0.25rem;
-  color: var(--sl-color-white);
-  font-weight: 600;
+.hd-callout[data-tone="check"] {
+  --tone: var(--hd-tone-check);
 }
-
-.hgdc-card__body > :first-child {
+.hd-callout[data-tone="warning"] {
+  --tone: var(--hd-tone-warning);
+}
+.hd-callout[data-tone="danger"] {
+  --tone: var(--hd-tone-danger);
+}
+.hd-callout__icon {
+  margin-top: 0.2rem;
+  color: var(--tone);
+}
+.hd-callout__body {
+  min-width: 0;
+  flex: 1;
+  margin: 0;
+}
+.hd-callout__body > :first-child {
   margin-top: 0;
 }
-
-a.hgdc-card:hover {
-  background: var(--hgdc-surface-hover);
+.hd-callout__body > * + * {
+  margin-top: 0.5rem !important;
 }
-
-a.hgdc-card:focus-visible {
-  outline: 2px solid var(--sl-color-accent);
-  outline-offset: 2px;
+.hd-callout__title {
+  margin: 0;
+  color: var(--hd-fg);
+  font-weight: 600;
 }
 
 .hgdc-steps {
-  counter-reset: hgdc-step;
+  margin: 1.75rem 0 0;
+  padding: 0;
   list-style: none;
-  padding-inline-start: 0;
+  counter-reset: hgdc-step;
 }
-
 .hgdc-step {
   position: relative;
+  padding: 0 0 1.5rem 2.75rem;
   counter-increment: hgdc-step;
-  padding-inline-start: 2.75rem;
-  padding-block-end: 0.5rem;
 }
-
+.hgdc-step + .hgdc-step {
+  margin-top: 0 !important;
+}
 .hgdc-step::before {
   content: counter(hgdc-step);
   position: absolute;
-  inset-inline-start: 0;
-  top: 0;
+  inset: 0 auto auto 0;
   display: grid;
   place-items: center;
-  width: 1.875rem;
-  height: 1.875rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 1px solid var(--hd-border);
   border-radius: 999px;
-  background: var(--hgdc-surface);
-  color: var(--sl-color-white);
-  font-size: var(--sl-text-sm);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  background: var(--hd-muted);
+  color: var(--hd-fg);
+  font: 600 0.8125rem/1 var(--hd-font-heading);
 }
-
 .hgdc-step:not(:last-child)::after {
   content: "";
   position: absolute;
-  inset-inline-start: 0.9rem;
-  top: 2.25rem;
-  bottom: 0.25rem;
+  inset: 2.25rem auto 0.5rem 0.875rem;
   width: 1px;
-  background: var(--sl-color-hairline-light);
+  background: var(--hd-border);
 }
-
 .hgdc-step__title {
-  margin: 0.2rem 0 0.25rem !important;
-  color: var(--sl-color-white);
-  font-weight: 600;
+  margin: 0;
+  padding-top: 0.125rem;
+  color: var(--hd-fg);
+  font: 600 1rem/1.5rem var(--hd-font-heading);
+  letter-spacing: -0.01em;
+}
+.hgdc-step__body {
+  margin-top: 0.375rem !important;
+}
+.hgdc-step__body > :last-child {
+  margin-bottom: 0;
+}
+.hgdc-step__body > :first-child {
+  margin-top: 0;
 }
 
-.hgdc-accordion {
-  border-radius: var(--hgdc-radius);
-  background: var(--hgdc-surface);
-  margin-block: 0.5rem;
+.hgdc-card-group {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+@media (min-width: 40em) {
+  .hgdc-card-group {
+    grid-template-columns: repeat(min(var(--hgdc-cols, 2), 2), minmax(0, 1fr));
+  }
+}
+@media (min-width: 64em) {
+  .hgdc-card-group {
+    grid-template-columns: repeat(var(--hgdc-cols, 2), minmax(0, 1fr));
+  }
+}
+.hgdc-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1.125rem 1.25rem 1.25rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 1.25rem;
+  background: var(--hd-bg);
+  color: var(--hd-muted-fg);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  text-decoration: none;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    transform 160ms var(--hd-ease-out);
+}
+.hgdc-card__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  color: var(--hd-fg);
+  font: 600 1rem/1.4 var(--hd-font-heading);
+  letter-spacing: -0.01em;
+}
+.hgdc-card__arrow {
+  color: var(--hd-muted-fg);
+  opacity: 0;
+  transform: translateX(-4px);
+  transition:
+    opacity 150ms ease,
+    transform 200ms var(--hd-ease-out);
+}
+.hgdc-card__body > :first-child {
+  margin-top: 0;
+}
+.hgdc-card__body > * + * {
+  margin-top: 0.5rem !important;
+}
+.hgdc-card__body img {
+  border-radius: 0.5rem;
+}
+.hgdc-card:has(.hgdc-card__body > img:first-child),
+.hgdc-card:has(.hgdc-card__body > p:first-child > img:first-child) {
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+}
+a.hgdc-card:hover {
+  border-color: var(--hd-border-strong);
+  background: var(--hd-muted);
+}
+a.hgdc-card:hover .hgdc-card__arrow {
+  opacity: 1;
+  transform: none;
+}
+a.hgdc-card:active {
+  transform: scale(0.99);
 }
 
+.sl-markdown-content details.hgdc-accordion {
+  padding-inline-start: 0;
+}
+.sl-markdown-content .hgdc-accordion > summary::before {
+  display: none;
+}
+.hgdc-accordion__body,
+.hgdc-step__body,
+.hgdc-card__body {
+  margin-top: 0;
+}
+.hgdc-accordion {
+  border: 1px solid var(--hd-border);
+  border-radius: 1rem;
+  background: var(--hd-bg);
+}
 .hgdc-accordion summary {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.875rem 1rem;
+  color: var(--hd-fg);
+  font: 500 0.9375rem/1.4 var(--hd-font-sans);
   cursor: pointer;
-  padding: 0.75rem 1rem;
-  color: var(--sl-color-white);
-  font-weight: 500;
+  list-style: none;
+  border-radius: 1rem;
 }
-
-.hgdc-accordion summary:focus-visible {
-  outline: 2px solid var(--sl-color-accent);
-  border-radius: var(--hgdc-radius);
+.hgdc-accordion summary::-webkit-details-marker {
+  display: none;
+}
+.hgdc-accordion summary:hover {
+  background: var(--hd-hover);
+}
+.hgdc-accordion__chevron {
+  color: var(--hd-muted-fg);
+  transition: transform 200ms var(--hd-ease-out);
+}
+.hgdc-accordion[open] .hgdc-accordion__chevron {
+  transform: rotate(90deg);
 }
-
 .hgdc-accordion__body {
-  padding: 0 1rem 0.75rem;
+  padding: 0 1rem 1rem 2.625rem;
+}
+.hgdc-accordion__body > :first-child {
+  margin-top: 0;
+}
+.hgdc-accordion-group {
+  border: 1px solid var(--hd-border);
+  border-radius: 1rem;
+}
+.hgdc-accordion-group .hgdc-accordion {
+  margin: 0 !important;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.hgdc-accordion-group .hgdc-accordion + .hgdc-accordion {
+  border-top: 1px solid var(--hd-border);
+}
+.hgdc-accordion-group .hgdc-accordion summary {
+  border-radius: 0;
+}
+.hgdc-accordion-group .hgdc-accordion:first-child summary {
+  border-radius: 1rem 1rem 0 0;
 }
 
 .hgdc-frame {
-  margin-block: 1.25rem;
+  margin-inline: 0;
+  padding: 0.5rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 1.25rem;
+  background: var(--hd-muted);
 }
-
 .hgdc-frame :is(img, video) {
-  border-radius: var(--hgdc-radius);
+  display: block;
+  width: 100%;
+  border-radius: 0.875rem;
 }
-
 .hgdc-frame figcaption {
-  margin-top: 0.5rem;
-  color: var(--sl-color-gray-3);
-  font-size: var(--sl-text-sm);
+  padding: 0.5rem 0.5rem 0.125rem;
+  color: var(--hd-muted-fg);
+  font-size: 0.8125rem;
   text-align: center;
 }
 
-/* --- Titre de page et actions « Copier pour un LLM » --- */
+/* Onglets (composant de Starlight) : soulignés, comme les blocs de code. */
+starlight-tabs .tablist-wrapper {
+  border-bottom: 1px solid var(--hd-border);
+}
+starlight-tabs [role="tablist"] {
+  gap: 0.5rem;
+  border: 0 !important;
+}
+starlight-tabs [role="tab"] {
+  margin: 0 !important;
+  padding: 0.625rem 0.25rem !important;
+  border: 0 !important;
+  border-bottom: 2px solid transparent !important;
+  color: var(--hd-muted-fg) !important;
+  font: 500 0.875rem/1 var(--hd-font-sans) !important;
+}
+starlight-tabs [role="tab"]:hover {
+  color: var(--hd-fg) !important;
+}
+starlight-tabs [role="tab"][aria-selected="true"] {
+  border-bottom-color: var(--hd-accent) !important;
+  color: var(--hd-fg) !important;
+}
+starlight-tabs [role="tabpanel"] {
+  margin-top: 1.25rem;
+}
+
+/* --- Bas de page : avis et pages voisines --- */
 
-.hgdc-title {
+.hgdc-feedback {
+  display: block;
+  margin-top: 3.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--hd-border);
+}
+.hgdc-feedback [hidden] {
+  display: none !important;
+}
+.hgdc-feedback [data-step="ask"] {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: 0.75rem 1rem;
+  gap: 0.75rem;
 }
-
-.hgdc-page-actions {
+.hgdc-feedback__question,
+.hgdc-feedback label {
+  margin: 0;
+  color: var(--hd-fg);
+  font: 500 0.875rem/1.4 var(--hd-font-sans);
+}
+.hgdc-feedback__choices {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.375rem;
-  margin-top: 0.25rem;
+  gap: 0.5rem;
+  margin: 0 !important;
 }
-
-.hgdc-action {
+.hgdc-feedback button {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  min-height: 2.25rem;
+  height: 2rem;
   padding: 0 0.875rem;
-  border: 0;
+  border: 1px solid var(--hd-border);
   border-radius: 999px;
-  background: var(--hgdc-surface);
-  color: var(--sl-color-gray-1);
-  font: inherit;
-  font-size: var(--sl-text-sm);
+  background: var(--hd-bg);
+  color: var(--hd-fg);
+  font: 500 0.8125rem/1 var(--hd-font-sans);
   cursor: pointer;
-  list-style: none;
-  transition: background-color 150ms var(--hgdc-ease);
-  touch-action: manipulation;
+  transition:
+    background-color 150ms ease,
+    transform 160ms var(--hd-ease-out);
 }
-
-.hgdc-action::-webkit-details-marker {
-  display: none;
+.hgdc-feedback button:hover {
+  background: var(--hd-muted);
 }
-
-.hgdc-action--icon {
-  width: 2.25rem;
-  padding: 0;
-  justify-content: center;
+.hgdc-feedback button:active {
+  transform: scale(0.97);
 }
-
-.hgdc-action:hover {
-  background: var(--hgdc-surface-hover);
+.hgdc-feedback button[type="submit"] {
+  border-color: var(--hd-accent);
+  background: var(--hd-accent);
+  color: var(--hd-accent-fg);
 }
-
-.hgdc-action:active {
-  transform: scale(0.97);
+.hgdc-feedback form {
+  display: grid;
+  gap: 0.625rem;
 }
-
-.hgdc-action:focus-visible {
-  outline: 2px solid var(--sl-color-accent);
-  outline-offset: 2px;
+.hgdc-feedback__done {
+  margin: 0;
+  color: var(--hd-muted-fg);
+  font-size: 0.875rem;
 }
 
-.hgdc-menu {
-  position: relative;
+.hd-pagination {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}
+.hd-pagination__link {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.875rem 1.125rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 1rem;
+  color: var(--hd-fg);
+  text-decoration: none;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}
+.hd-pagination__link--next {
+  grid-column: 2;
+  text-align: end;
+}
+.hd-pagination__link:hover {
+  border-color: var(--hd-border-strong);
+  background: var(--hd-muted);
+}
+.hd-pagination__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--hd-muted-fg);
+  font-size: 0.8125rem;
+}
+.hd-pagination__link--next .hd-pagination__hint {
+  justify-content: flex-end;
+}
+.hd-pagination__title {
+  font: 500 0.9375rem/1.35 var(--hd-font-heading);
 }
 
-.hgdc-menu__list {
-  position: absolute;
-  inset-inline-end: 0;
-  z-index: var(--sl-z-index-menu);
-  min-width: 15rem;
-  margin: 0.375rem 0 0;
-  padding: 0.375rem;
+/* --- Pied de page du site --- */
+
+.hd-site-footer {
+  display: grid;
+  gap: 1.25rem;
+  margin: 2rem var(--hd-gutter) 0;
+  padding: 2rem 0 2.5rem;
+  border-top: 1px solid var(--hd-border);
+}
+.hd-site-footer__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.hd-site-footer__row--meta p {
+  max-width: 32rem;
+  margin: 0;
+  color: var(--hd-muted-fg);
+  font-size: 0.875rem;
+  line-height: 1.55;
+}
+.hd-brand--footer {
+  margin-inline-start: -0.5rem;
+}
+.hd-brand--footer .hd-brand__name {
+  font-size: 0.9375rem;
+}
+.hd-socials {
+  display: flex;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
   list-style: none;
-  border-radius: var(--hgdc-radius);
-  background: var(--sl-color-black);
-  box-shadow:
-    0 12px 32px -8px rgb(0 0 0 / 0.25),
-    0 0 0 1px var(--sl-color-hairline-light);
-  transform-origin: top right;
-  animation: hgdc-pop 160ms var(--hgdc-ease);
 }
 
-.hgdc-menu__list a {
-  display: block;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.75rem;
-  color: var(--sl-color-gray-1);
-  font-size: var(--sl-text-sm);
-  text-decoration: none;
+/* --- Recherche --- */
+
+.hd-palette {
+  width: min(40rem, calc(100vw - 1.5rem));
+  max-height: min(36rem, calc(100dvh - 6rem));
+  margin: min(12vh, 7rem) auto auto;
+  padding: 0;
+  border: 1px solid var(--hd-border);
+  border-radius: 1.5rem;
+  background: var(--hd-floating);
+  color: var(--hd-fg-2);
+  box-shadow: var(--hd-shadow);
+  overflow: hidden;
+}
+.hd-palette::backdrop {
+  background: var(--hd-backdrop);
+}
+.hd-palette[open] .hd-palette__box {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+}
+.hd-palette__field {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--hd-border);
+  color: var(--hd-muted-fg);
+}
+.hd-palette__field input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--hd-fg);
+  font: 400 1rem/1.5 var(--hd-font-sans);
+  outline: none;
 }
-
-.hgdc-menu__list a:hover {
-  background: var(--hgdc-surface);
+.hd-palette__field input::-webkit-search-cancel-button {
+  display: none;
 }
-
-.hgdc-menu__list a:focus-visible {
-  background: var(--hgdc-surface);
-  outline: 2px solid var(--sl-color-accent);
-  outline-offset: -2px;
+.hd-palette__results {
+  display: grid;
+  gap: 1px;
+  padding: 0.375rem;
+  overflow-y: auto;
 }
-
-@keyframes hgdc-pop {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
+.hd-palette__results:empty {
+  display: none;
 }
-
-/* --- Onglets et versions en tête de sidebar --- */
-
-.hgdc-sections {
-  display: grid;
+.hd-result {
+  display: flex;
   gap: 0.75rem;
-  margin-block-end: 1rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 0;
+  border-radius: 0.875rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
 }
-
-.hgdc-tabs {
+.hd-result[aria-selected="true"] {
+  background: var(--hd-muted);
+}
+.hd-result__icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.0625rem;
+  color: var(--hd-muted-fg);
+  font: 500 0.875rem/1 var(--hd-font-mono);
+}
+.hd-result--page .hd-result__icon {
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Zm0 0v5h5M9 13h6m-6 4h4'/%3E%3C/svg%3E")
+    center / 1.1rem no-repeat;
+}
+.hd-result--ask .hd-result__icon {
+  color: var(--hd-accent);
+}
+.hd-result__body {
   display: grid;
   gap: 0.125rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  min-width: 0;
 }
-
-.hgdc-tabs a {
-  display: block;
-  padding: 0.4rem 0.75rem;
-  border-radius: 0.75rem;
-  color: var(--sl-color-gray-2);
+.hd-result__title {
+  color: var(--hd-fg);
+  font: 500 0.9375rem/1.4 var(--hd-font-sans);
+}
+.hd-result__context {
+  color: var(--hd-muted-fg);
+  font-size: 0.75rem;
+}
+.hd-result__excerpt {
+  overflow: hidden;
+  color: var(--hd-muted-fg);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.hd-result__excerpt mark {
+  background: transparent;
+  color: var(--hd-accent);
   font-weight: 500;
-  text-decoration: none;
 }
-
-.hgdc-tabs a:hover {
-  background: var(--hgdc-surface);
-  color: var(--sl-color-white);
+.hd-palette__status {
+  margin: 0;
+  padding: 1rem 1.25rem;
+  color: var(--hd-muted-fg);
+  font-size: 0.875rem;
 }
-
-.hgdc-tabs a:focus-visible,
-.hgdc-version select:focus-visible {
-  outline: 2px solid var(--sl-color-accent);
-  outline-offset: 2px;
+.hd-palette__results:not(:empty) + .hd-palette__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
 }
-
-.hgdc-tabs a[aria-current="page"] {
-  background: var(--sl-color-accent-low);
-  color: var(--sl-color-accent-high);
+.hd-palette__hints {
+  display: none;
+  gap: 1.25rem;
+  padding: 0.625rem 1rem;
+  border-top: 1px solid var(--hd-border);
+  color: var(--hd-muted-fg);
+  font-size: 0.75rem;
 }
-
-.hgdc-version select {
-  width: 100%;
-  min-height: 2.25rem;
-  padding: 0 0.75rem;
-  border: 0;
-  border-radius: 999px;
-  background: var(--hgdc-surface);
-  color: var(--sl-color-white);
-  font: inherit;
-  font-size: var(--sl-text-sm);
+.hd-palette__hints span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+@media (min-width: 50em) {
+  .hd-palette__hints {
+    display: flex;
+  }
 }
 
 /* --- Assistant --- */
 
-.hgdc-launcher {
-  position: fixed;
-  inset-inline-end: max(1rem, env(safe-area-inset-right));
-  bottom: max(1rem, env(safe-area-inset-bottom));
-  z-index: var(--sl-z-index-navbar);
-  display: inline-flex;
+.hd-askbar {
+  position: sticky;
+  bottom: 1rem;
+  z-index: 10;
+  display: flex;
   align-items: center;
   gap: 0.5rem;
-  min-height: 2.75rem;
-  padding: 0 1rem;
-  border: 0;
+  width: min(var(--hd-content-w), calc(100% - 2 * var(--hd-gutter)));
+  height: 3.25rem;
+  margin: 2rem auto 0;
+  padding: 0 0.5rem 0 1.25rem;
+  border: 1px solid var(--hd-border-strong);
   border-radius: 999px;
-  background: var(--sl-color-white);
-  color: var(--sl-color-black);
-  font: inherit;
-  font-weight: 500;
-  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.45);
-  cursor: pointer;
-  touch-action: manipulation;
-  transition: transform 160ms var(--hgdc-ease);
+  background: var(--hd-floating);
+  box-shadow: var(--hd-shadow);
+  transition:
+    opacity 200ms ease,
+    transform 300ms var(--hd-ease-out),
+    border-color 150ms ease;
 }
-
-.hgdc-launcher:active {
-  transform: scale(0.97);
+.hd-askbar:focus-within {
+  border-color: var(--hd-accent);
 }
-
-.hgdc-launcher:focus-visible {
-  outline: 2px solid var(--sl-color-accent);
-  outline-offset: 3px;
+.hd-askbar input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  color: var(--hd-fg);
+  font: 400 0.9375rem/1 var(--hd-font-sans);
+  outline: none;
 }
-
-.hgdc-launcher[hidden] {
-  display: none;
+.hd-askbar input::placeholder {
+  color: var(--hd-muted-fg);
 }
-
-.hgdc-kbd {
-  padding: 0.05rem 0.4rem;
-  border-radius: 0.375rem;
-  background: color-mix(in srgb, var(--sl-color-black) 15%, transparent);
-  font-family: var(--__sl-font);
-  font-size: 0.75rem;
+:root[data-hgdc-assistant] .hd-askbar {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.5rem);
 }
-
-@media (max-width: 50em) {
-  .hgdc-kbd {
+@media (max-width: 49.99em) {
+  .hd-askbar {
+    bottom: 0.75rem;
+    height: 3rem;
+  }
+  .hd-askbar .hd-kbd {
     display: none;
   }
 }
 
-.hgdc-panel {
+.hd-send {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--hd-accent);
+  color: var(--hd-accent-fg);
+  cursor: pointer;
+  transition:
+    opacity 150ms ease,
+    transform 160ms var(--hd-ease-out);
+}
+.hd-send:active {
+  transform: scale(0.94);
+}
+.hd-send:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+hgdc-assistant {
+  display: block;
+}
+hgdc-assistant::before {
+  content: "";
   position: fixed;
   inset: 0;
-  z-index: calc(var(--sl-z-index-navbar) + 1);
+  z-index: 44;
+  background: var(--hd-backdrop);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 300ms ease;
+}
+
+.hgdc-panel {
+  position: fixed;
+  z-index: 45;
+  inset: auto 0 0;
   display: flex;
   flex-direction: column;
-  background: var(--sl-color-black);
-  padding-top: env(safe-area-inset-top, 0px);
-  padding-bottom: env(safe-area-inset-bottom);
-  animation: hgdc-panel-in 220ms var(--hgdc-ease);
+  height: min(88dvh, 44rem);
+  border: 1px solid var(--hd-border);
+  border-bottom: 0;
+  border-radius: 1.5rem 1.5rem 0 0;
+  background: var(--hd-bg);
+  box-shadow: var(--hd-shadow);
+  transform: translateY(100%);
+  visibility: hidden;
+  transition:
+    transform 380ms var(--hd-ease-drawer),
+    visibility 0s linear 380ms;
+}
+:root[data-hgdc-assistant] .hgdc-panel {
+  transform: none;
+  visibility: visible;
+  transition:
+    transform 380ms var(--hd-ease-drawer),
+    visibility 0s;
+}
+@media (max-width: 49.99em) {
+  :root[data-hgdc-assistant] hgdc-assistant::before {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
-
-.hgdc-panel[hidden] {
-  display: none;
+.hgdc-panel__grip {
+  width: 2.5rem;
+  height: 0.3125rem;
+  margin: 0.5rem auto 0;
+  border-radius: 999px;
+  background: var(--hd-border-strong);
 }
 
 @media (min-width: 50em) {
   .hgdc-panel {
-    inset: 0.75rem 0.75rem 0.75rem auto;
-    width: min(26rem, calc(100vw - 1.5rem));
-    border-radius: var(--hgdc-radius-card);
-    box-shadow:
-      0 24px 64px -16px rgb(0 0 0 / 0.35),
-      0 0 0 1px var(--sl-color-hairline-light);
-    animation-name: hgdc-panel-side;
+    inset: var(--hd-nav-h) 0 0 auto;
+    width: var(--hd-panel-w);
+    height: auto;
+    border: 0;
+    border-inline-start: 1px solid var(--hd-border);
+    border-radius: 0;
+    transform: translateX(100%);
+  }
+  .hgdc-panel__grip {
+    display: none;
   }
 }
-
-@keyframes hgdc-panel-in {
-  from {
-    opacity: 0;
-    transform: translateY(1rem);
+/* En dessous de 64em, le panneau passe par-dessus ; au-delà, il pousse la page. */
+@media (min-width: 50em) and (max-width: 63.99em) {
+  :root[data-hgdc-assistant] .hgdc-panel {
+    box-shadow: var(--hd-shadow);
   }
 }
-
-@keyframes hgdc-panel-side {
-  from {
-    opacity: 0;
-    transform: translateX(1rem);
+@media (min-width: 64em) {
+  .hgdc-panel {
+    box-shadow: none;
+  }
+  :root[data-hgdc-assistant] .hd-main-frame {
+    margin-inline-end: var(--hd-panel-w);
+  }
+  :root[data-hgdc-assistant] .hd-columns--toc {
+    grid-template-columns: minmax(0, 1fr) 0;
+  }
+  :root[data-hgdc-assistant] .hd-columns__toc {
+    visibility: hidden;
   }
 }
-
 @media (prefers-reduced-motion: reduce) {
   .hgdc-panel,
-  .hgdc-menu__list,
-  .hgdc-msg--pending {
-    animation: none;
+  :root[data-hgdc-assistant] .hgdc-panel,
+  .hd-main-frame,
+  .hd-sidebar .sidebar-pane {
+    transition-duration: 0s !important;
+  }
+  .hd-askbar {
+    transition: opacity 150ms ease;
+    transform: none !important;
   }
 }
 
 .hgdc-panel__header {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 1rem 0.75rem 1.25rem;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem 0.625rem 1.25rem;
 }
-
 .hgdc-panel__header h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   margin: 0;
-  color: var(--sl-color-white);
-  font-family: var(--hgdc-font-heading);
-  font-size: var(--sl-text-lg);
+  color: var(--hd-fg);
+  font: 600 1rem/1.3 var(--hd-font-heading);
 }
-
-.hgdc-panel__header p {
-  margin: 0.125rem 0 0;
-  color: var(--sl-color-gray-3);
-  font-size: var(--sl-text-sm);
+.hgdc-panel__header h2 .hd-icon {
+  color: var(--hd-accent);
 }
-
 .hgdc-panel__tools {
   display: flex;
-  gap: 0.25rem;
-}
-
-.hgdc-icon-button {
-  display: grid;
-  place-items: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--sl-color-gray-2);
-  cursor: pointer;
-}
-
-.hgdc-icon-button:hover {
-  background: var(--hgdc-surface);
-  color: var(--sl-color-white);
-}
-
-.hgdc-icon-button:focus-visible {
-  outline: 2px solid var(--sl-color-accent);
+  gap: 0.125rem;
 }
-
-.hgdc-icon-button[hidden] {
+.hgdc-panel__tools [hidden] {
   display: none;
 }
-
 .hgdc-panel__body {
   flex: 1;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 0.25rem 1.25rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
+  padding: 0.5rem 1.25rem 1rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
-
 .hgdc-empty {
-  margin-block: auto;
-  padding: 1rem 0.25rem;
-  color: var(--sl-color-gray-3);
-  font-size: var(--sl-text-sm);
+  margin: auto 0;
+  padding: 1rem 0;
+  color: var(--hd-muted-fg);
+  font-size: 0.875rem;
+  line-height: 1.6;
   text-align: center;
-  text-wrap: balance;
 }
-
 .hgdc-empty[hidden] {
   display: none;
 }
-
+.hgdc-empty p {
+  margin: 0;
+}
 .hgdc-empty__title {
-  color: var(--sl-color-white);
-  font-size: var(--sl-text-base);
-  font-weight: 500;
+  margin-bottom: 0.375rem !important;
+  color: var(--hd-fg);
+  font: 600 1rem/1.4 var(--hd-font-heading);
 }
-
 .hgdc-msg {
-  max-width: 100%;
-  font-size: var(--sl-text-sm);
-  line-height: 1.6;
-  color: var(--sl-color-gray-1);
+  color: var(--hd-fg-2);
+  font-size: 0.9375rem;
+  line-height: 1.65;
   overflow-wrap: anywhere;
 }
-
 .hgdc-msg > :first-child {
   margin-top: 0;
 }
-
 .hgdc-msg :is(p, ul, ol, pre, h3) {
-  margin: 0 0 0.6rem;
+  margin: 0.5rem 0 0;
+}
+.hgdc-msg :is(ul, ol) {
+  padding-inline-start: 1.25rem;
 }
-
 .hgdc-msg h3 {
-  font-size: var(--sl-text-base);
-  color: var(--sl-color-white);
+  color: var(--hd-fg);
+  font: 600 0.9375rem/1.4 var(--hd-font-heading);
 }
-
 .hgdc-msg pre {
-  padding: 0.75rem;
-  border-radius: 0.75rem;
-  background: var(--hgdc-surface);
+  padding: 0.75rem 0.875rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 0.875rem;
+  background: var(--hd-code-bg);
   overflow-x: auto;
 }
-
 .hgdc-msg code {
-  font-family: var(--__sl-font-mono);
-  font-size: 0.85em;
+  font-family: var(--hd-font-mono);
+  font-size: 0.8125rem;
 }
-
 .hgdc-msg :not(pre) > code {
-  padding: 0.1em 0.3em;
+  padding: 0.1em 0.35em;
   border-radius: 0.375rem;
-  background: var(--hgdc-surface);
+  background: var(--hd-muted);
+}
+.hgdc-msg a {
+  color: var(--hd-fg);
+  text-decoration-color: var(--hd-accent);
+  text-underline-offset: 0.2em;
 }
-
 .hgdc-msg--user {
   align-self: flex-end;
   max-width: 85%;
   padding: 0.5rem 0.875rem;
-  border-radius: 1.125rem;
-  background: var(--hgdc-surface);
-  color: var(--sl-color-white);
-  white-space: pre-wrap;
+  border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
+  background: var(--hd-muted);
+  color: var(--hd-fg);
 }
-
 .hgdc-msg--pending {
-  color: var(--sl-color-gray-3);
-  animation: hgdc-breathe 1.4s ease-in-out infinite;
+  color: var(--hd-muted-fg);
+  animation: hgdc-breathe 1.6s ease-in-out infinite;
 }
-
 @keyframes hgdc-breathe {
   50% {
     opacity: 0.5;
   }
 }
-
+@media (prefers-reduced-motion: reduce) {
+  .hgdc-msg--pending {
+    animation: none;
+  }
+}
 .hgdc-msg--error p {
-  color: var(--sl-color-gray-2);
+  color: var(--hd-tone-danger);
 }
-
 .hgdc-retry {
-  min-height: 2.25rem;
+  margin-top: 0.5rem;
+  height: 2rem;
   padding: 0 0.875rem;
-  border: 0;
+  border: 1px solid var(--hd-border);
   border-radius: 999px;
-  background: var(--hgdc-surface);
-  color: var(--sl-color-white);
-  font: inherit;
+  background: var(--hd-bg);
+  color: var(--hd-fg);
+  font: 500 0.8125rem/1 var(--hd-font-sans);
   cursor: pointer;
 }
-
 .hgdc-ref {
   display: inline-grid;
   place-items: center;
-  min-width: 1.15rem;
-  height: 1.15rem;
-  margin-inline: 0.15rem;
+  min-width: 1.125rem;
+  height: 1.125rem;
+  margin-inline: 0.125rem;
   padding: 0 0.25rem;
   border-radius: 999px;
-  background: var(--sl-color-accent-low);
-  color: var(--sl-color-accent-high);
-  font-size: 0.7rem;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  text-decoration: none;
+  background: var(--hd-accent-soft);
+  color: var(--hd-accent) !important;
+  font: 600 0.6875rem/1 var(--hd-font-sans);
+  text-decoration: none !important;
   vertical-align: 0.15em;
 }
-
 .hgdc-sources__label {
-  margin: 0.75rem 0 0.25rem !important;
-  color: var(--sl-color-gray-3);
-  font-size: 0.75rem;
-  font-weight: 500;
+  margin-top: 0.875rem !important;
+  color: var(--hd-muted-fg);
+  font: 500 0.75rem/1 var(--hd-font-sans);
 }
-
 .hgdc-sources {
   display: grid;
-  gap: 0.25rem;
-  margin: 0 !important;
-  padding: 0;
+  gap: 0.375rem;
+  margin-top: 0.5rem !important;
+  padding: 0 !important;
   list-style: none;
 }
-
 .hgdc-sources a {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  gap: 0.25rem 0.5rem;
-  padding: 0.5rem 0.625rem;
-  border-radius: 0.75rem;
-  background: var(--hgdc-surface);
-  color: var(--sl-color-white);
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--hd-border);
+  border-radius: 0.875rem;
+  color: var(--hd-fg);
+  font-size: 0.8125rem;
   text-decoration: none;
 }
-
 .hgdc-sources a:hover {
-  background: var(--hgdc-surface-hover);
+  background: var(--hd-muted);
 }
-
 .hgdc-sources__n {
-  color: var(--sl-color-accent);
+  color: var(--hd-accent);
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
 }
-
 .hgdc-sources__section {
   flex-basis: 100%;
-  color: var(--sl-color-gray-3);
+  color: var(--hd-muted-fg);
   font-size: 0.75rem;
 }
-
 .hgdc-panel__form {
   display: flex;
   align-items: flex-end;
   gap: 0.5rem;
   margin: 0 0.75rem;
-  padding: 0.375rem 0.375rem 0.375rem 1rem;
-  border-radius: 1.375rem;
-  background: var(--hgdc-surface);
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border: 1px solid var(--hd-border-strong);
+  border-radius: 1.5rem;
+  background: var(--hd-bg);
+  transition: border-color 150ms ease;
 }
-
 .hgdc-panel__form:focus-within {
-  outline: 2px solid var(--sl-color-accent);
+  border-color: var(--hd-accent);
 }
-
 .hgdc-panel__form textarea {
   flex: 1;
   min-height: 2.25rem;
@@ -688,86 +2355,45 @@ a.hgdc-card:focus-visible {
   padding: 0.5rem 0;
   border: 0;
   background: transparent;
-  color: var(--sl-color-white);
-  font: inherit;
-  font-size: 1rem;
+  color: var(--hd-fg);
+  font: 400 0.9375rem/1.4 var(--hd-font-sans);
   resize: none;
   outline: none;
 }
-
-.hgdc-send {
-  display: grid;
-  place-items: center;
-  flex: none;
-  width: 2.25rem;
-  height: 2.25rem;
-  border: 0;
-  border-radius: 999px;
-  background: var(--sl-color-white);
-  color: var(--sl-color-black);
-  cursor: pointer;
-}
-
-.hgdc-send:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
 .hgdc-panel__note {
-  margin: 0.5rem 1.25rem 0.75rem;
-  color: var(--sl-color-gray-3);
-  font-size: 0.75rem;
+  margin: 0;
+  padding: 0.5rem 1.25rem 0.875rem;
+  color: var(--hd-muted-fg);
+  font-size: 0.6875rem;
+  line-height: 1.45;
   text-align: center;
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/* Chrome monochrome : le nom du site et « vous êtes ici » restent en teinte, pas en accent. */
-.site-title {
-  color: var(--sl-color-white);
-  font-family: var(--hgdc-font-heading);
-  letter-spacing: -0.015em;
-}
-
-.sidebar-content a[aria-current="page"],
-.sidebar-content a[aria-current="page"]:hover,
-.sidebar-content a[aria-current="page"]:focus {
-  background-color: var(--hgdc-surface-hover);
-  color: var(--sl-color-white);
-  font-weight: 600;
-}
-
-.sidebar-content a {
-  border-radius: 0.625rem;
-}
-
 /* Cibles tactiles de 44 px au doigt, sans changer le dessin à la souris. */
 @media (pointer: coarse) {
-  .hgdc-action,
-  .hgdc-retry {
+  .hd-nav__link {
     min-height: 2.75rem;
   }
-
-  .hgdc-action--icon,
-  .hgdc-send {
+  .hd-icon-button,
+  .hd-search-trigger {
     width: 2.75rem;
     height: 2.75rem;
   }
+}
 
-  .hgdc-ref {
-    position: relative;
+@media print {
+  .hd-topbar,
+  .hd-sidebar,
+  .hd-columns__toc,
+  .hd-askbar,
+  hgdc-assistant,
+  .hd-site-footer,
+  .hd-page-actions,
+  .hgdc-feedback {
+    display: none !important;
   }
-
-  .hgdc-ref::after {
-    content: "";
-    position: absolute;
-    inset: -0.75rem;
+  .hd-main-frame {
+    margin: 0 !important;
+    padding: 0 !important;
   }
 }