@hgdc/docs 0.0.0-stage → 0.1.1

package/src/styles/theme.css

@@ -0,0 +1,773 @@
+/*
+ * 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`).
+ */
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/geist";
+
+: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);
+  letter-spacing: -0.015em;
+}
+
+.sl-markdown-content :is(a:not(.hgdc-card)) {
+  text-underline-offset: 0.2em;
+}
+
+/* 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));
+}
+
+.expressive-code .frame {
+  border-radius: var(--hgdc-radius) !important;
+}
+
+/* --- Composants MDX (compatibles Mintlify) --- */
+
+.hgdc-card-group {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: minmax(0, 1fr);
+  margin-block: 1.25rem;
+}
+
+@media (min-width: 50em) {
+  .hgdc-card-group {
+    grid-template-columns: repeat(var(--hgdc-cols, 2), minmax(0, 1fr));
+  }
+}
+
+.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);
+}
+
+.hgdc-card__title {
+  display: block;
+  margin-block-end: 0.25rem;
+  color: var(--sl-color-white);
+  font-weight: 600;
+}
+
+.hgdc-card__body > :first-child {
+  margin-top: 0;
+}
+
+a.hgdc-card:hover {
+  background: var(--hgdc-surface-hover);
+}
+
+a.hgdc-card:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+.hgdc-steps {
+  counter-reset: hgdc-step;
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.hgdc-step {
+  position: relative;
+  counter-increment: hgdc-step;
+  padding-inline-start: 2.75rem;
+  padding-block-end: 0.5rem;
+}
+
+.hgdc-step::before {
+  content: counter(hgdc-step);
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  display: grid;
+  place-items: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  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;
+}
+
+.hgdc-step:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0.9rem;
+  top: 2.25rem;
+  bottom: 0.25rem;
+  width: 1px;
+  background: var(--sl-color-hairline-light);
+}
+
+.hgdc-step__title {
+  margin: 0.2rem 0 0.25rem !important;
+  color: var(--sl-color-white);
+  font-weight: 600;
+}
+
+.hgdc-accordion {
+  border-radius: var(--hgdc-radius);
+  background: var(--hgdc-surface);
+  margin-block: 0.5rem;
+}
+
+.hgdc-accordion summary {
+  cursor: pointer;
+  padding: 0.75rem 1rem;
+  color: var(--sl-color-white);
+  font-weight: 500;
+}
+
+.hgdc-accordion summary:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  border-radius: var(--hgdc-radius);
+}
+
+.hgdc-accordion__body {
+  padding: 0 1rem 0.75rem;
+}
+
+.hgdc-frame {
+  margin-block: 1.25rem;
+}
+
+.hgdc-frame :is(img, video) {
+  border-radius: var(--hgdc-radius);
+}
+
+.hgdc-frame figcaption {
+  margin-top: 0.5rem;
+  color: var(--sl-color-gray-3);
+  font-size: var(--sl-text-sm);
+  text-align: center;
+}
+
+/* --- Titre de page et actions « Copier pour un LLM » --- */
+
+.hgdc-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+}
+
+.hgdc-page-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.hgdc-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+  padding: 0 0.875rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--hgdc-surface);
+  color: var(--sl-color-gray-1);
+  font: inherit;
+  font-size: var(--sl-text-sm);
+  cursor: pointer;
+  list-style: none;
+  transition: background-color 150ms var(--hgdc-ease);
+  touch-action: manipulation;
+}
+
+.hgdc-action::-webkit-details-marker {
+  display: none;
+}
+
+.hgdc-action--icon {
+  width: 2.25rem;
+  padding: 0;
+  justify-content: center;
+}
+
+.hgdc-action:hover {
+  background: var(--hgdc-surface-hover);
+}
+
+.hgdc-action:active {
+  transform: scale(0.97);
+}
+
+.hgdc-action:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+.hgdc-menu {
+  position: relative;
+}
+
+.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;
+  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;
+}
+
+.hgdc-menu__list a:hover {
+  background: var(--hgdc-surface);
+}
+
+.hgdc-menu__list a:focus-visible {
+  background: var(--hgdc-surface);
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: -2px;
+}
+
+@keyframes hgdc-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* --- Onglets et versions en tête de sidebar --- */
+
+.hgdc-sections {
+  display: grid;
+  gap: 0.75rem;
+  margin-block-end: 1rem;
+}
+
+.hgdc-tabs {
+  display: grid;
+  gap: 0.125rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hgdc-tabs a {
+  display: block;
+  padding: 0.4rem 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--sl-color-gray-2);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.hgdc-tabs a:hover {
+  background: var(--hgdc-surface);
+  color: var(--sl-color-white);
+}
+
+.hgdc-tabs a:focus-visible,
+.hgdc-version select:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+.hgdc-tabs a[aria-current="page"] {
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-accent-high);
+}
+
+.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);
+}
+
+/* --- 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;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0 1rem;
+  border: 0;
+  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);
+}
+
+.hgdc-launcher:active {
+  transform: scale(0.97);
+}
+
+.hgdc-launcher:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 3px;
+}
+
+.hgdc-launcher[hidden] {
+  display: none;
+}
+
+.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;
+}
+
+@media (max-width: 50em) {
+  .hgdc-kbd {
+    display: none;
+  }
+}
+
+.hgdc-panel {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--sl-z-index-navbar) + 1);
+  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);
+}
+
+.hgdc-panel[hidden] {
+  display: none;
+}
+
+@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;
+  }
+}
+
+@keyframes hgdc-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+}
+
+@keyframes hgdc-panel-side {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hgdc-panel,
+  .hgdc-menu__list,
+  .hgdc-msg--pending {
+    animation: none;
+  }
+}
+
+.hgdc-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1rem 0.75rem 1.25rem;
+}
+
+.hgdc-panel__header h2 {
+  margin: 0;
+  color: var(--sl-color-white);
+  font-family: var(--hgdc-font-heading);
+  font-size: var(--sl-text-lg);
+}
+
+.hgdc-panel__header p {
+  margin: 0.125rem 0 0;
+  color: var(--sl-color-gray-3);
+  font-size: var(--sl-text-sm);
+}
+
+.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);
+}
+
+.hgdc-icon-button[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;
+}
+
+.hgdc-empty {
+  margin-block: auto;
+  padding: 1rem 0.25rem;
+  color: var(--sl-color-gray-3);
+  font-size: var(--sl-text-sm);
+  text-align: center;
+  text-wrap: balance;
+}
+
+.hgdc-empty[hidden] {
+  display: none;
+}
+
+.hgdc-empty__title {
+  color: var(--sl-color-white);
+  font-size: var(--sl-text-base);
+  font-weight: 500;
+}
+
+.hgdc-msg {
+  max-width: 100%;
+  font-size: var(--sl-text-sm);
+  line-height: 1.6;
+  color: var(--sl-color-gray-1);
+  overflow-wrap: anywhere;
+}
+
+.hgdc-msg > :first-child {
+  margin-top: 0;
+}
+
+.hgdc-msg :is(p, ul, ol, pre, h3) {
+  margin: 0 0 0.6rem;
+}
+
+.hgdc-msg h3 {
+  font-size: var(--sl-text-base);
+  color: var(--sl-color-white);
+}
+
+.hgdc-msg pre {
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  background: var(--hgdc-surface);
+  overflow-x: auto;
+}
+
+.hgdc-msg code {
+  font-family: var(--__sl-font-mono);
+  font-size: 0.85em;
+}
+
+.hgdc-msg :not(pre) > code {
+  padding: 0.1em 0.3em;
+  border-radius: 0.375rem;
+  background: var(--hgdc-surface);
+}
+
+.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;
+}
+
+.hgdc-msg--pending {
+  color: var(--sl-color-gray-3);
+  animation: hgdc-breathe 1.4s ease-in-out infinite;
+}
+
+@keyframes hgdc-breathe {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.hgdc-msg--error p {
+  color: var(--sl-color-gray-2);
+}
+
+.hgdc-retry {
+  min-height: 2.25rem;
+  padding: 0 0.875rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--hgdc-surface);
+  color: var(--sl-color-white);
+  font: inherit;
+  cursor: pointer;
+}
+
+.hgdc-ref {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  margin-inline: 0.15rem;
+  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;
+  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;
+}
+
+.hgdc-sources {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0 !important;
+  padding: 0;
+  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);
+  text-decoration: none;
+}
+
+.hgdc-sources a:hover {
+  background: var(--hgdc-surface-hover);
+}
+
+.hgdc-sources__n {
+  color: var(--sl-color-accent);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.hgdc-sources__section {
+  flex-basis: 100%;
+  color: var(--sl-color-gray-3);
+  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);
+}
+
+.hgdc-panel__form:focus-within {
+  outline: 2px solid var(--sl-color-accent);
+}
+
+.hgdc-panel__form textarea {
+  flex: 1;
+  min-height: 2.25rem;
+  max-height: 10rem;
+  padding: 0.5rem 0;
+  border: 0;
+  background: transparent;
+  color: var(--sl-color-white);
+  font: inherit;
+  font-size: 1rem;
+  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;
+  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 {
+    min-height: 2.75rem;
+  }
+
+  .hgdc-action--icon,
+  .hgdc-send {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+
+  .hgdc-ref {
+    position: relative;
+  }
+
+  .hgdc-ref::after {
+    content: "";
+    position: absolute;
+    inset: -0.75rem;
+  }
+}