/**
 * Ascenseur site (viewport + panneaux scroll) — feuille dédiée pour cache-bust indépendant.
 * Tokens : --scrollbar-viewport-* dans style.css (:root + html[data-theme="light"]).
 */

:root,
html,
body,
* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-viewport-thumb-mid) var(--scrollbar-viewport-track);
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

:root::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: var(--scrollbar-viewport-size);
  height: var(--scrollbar-viewport-size);
}

:root::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    #1a1c24 0%,
    var(--scrollbar-viewport-track) 42%,
    #0c0d10 100%
  );
  border-inline-start: 1px solid var(--scrollbar-viewport-track-edge);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

:root::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--scrollbar-viewport-thumb-mid) 0%,
    var(--scrollbar-viewport-thumb) 48%,
    #050506 100%
  );
  border: 1px solid var(--scrollbar-viewport-thumb-border);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 var(--scrollbar-viewport-thumb-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 255, 255, 0.06);
  min-height: 2.5rem;
}

:root::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scrollbar-viewport-thumb-mid) 70%, #fff 30%) 0%,
    var(--scrollbar-viewport-thumb-mid) 45%,
    var(--scrollbar-viewport-thumb) 100%
  );
}

:root::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: var(--scrollbar-viewport-track);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root::-webkit-scrollbar-track,
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  *::-webkit-scrollbar-track {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--scrollbar-viewport-track) 88%, #fff 12%) 0%,
      var(--scrollbar-viewport-track) 42%,
      color-mix(in srgb, var(--scrollbar-viewport-track) 92%, #000 8%) 100%
    );
  }

  :root::-webkit-scrollbar-thumb,
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--scrollbar-viewport-thumb-mid) 55%, #fff 45%) 0%,
      var(--scrollbar-viewport-thumb) 38%,
      color-mix(in srgb, var(--scrollbar-viewport-thumb) 85%, #000 15%) 100%
    );
  }
}