* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0B0B0F; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.stage { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.dock {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 999px;
  background: rgba(18,18,24,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.45);
  color: #fff; font-size: 14px; max-width: calc(100vw - 24px);
}
.dock__brand { font-weight: 800; letter-spacing: -.02em; padding: 0 8px; white-space: nowrap; }
.dock__themes { display: flex; gap: 4px; }
.dock__themes button {
  appearance: none; border: 0; background: transparent; color: #cfd0da; cursor: pointer;
  font: inherit; font-weight: 600; padding: 9px 15px; border-radius: 999px; min-height: 42px;
  white-space: nowrap; touch-action: manipulation; transition: background .2s, color .2s;
}
.dock__themes button:hover { color: #fff; }
.dock__themes button.is-active { background: #fff; color: #111; }
.dock__themes button:focus-visible, .dock__mode:focus-visible { outline: 2px solid #8B7CF0; outline-offset: 2px; }
.dock__mode {
  appearance: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex: none;
  display: grid; place-items: center; touch-action: manipulation; transition: border-color .2s, background .2s;
}
.dock__mode:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.dock__mode svg { width: 18px; height: 18px; }
/* Sous-selecteur (variante du theme Chaleureux : Creme / Aurore) */
.dock__sub { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); }
.dock__sub[hidden] { display: none; }
.dock__sub button {
  appearance: none; border: 0; background: transparent; color: #cfd0da; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 12px; padding: 7px 12px; border-radius: 999px;
  min-height: 36px; white-space: nowrap; touch-action: manipulation; transition: background .2s, color .2s;
}
.dock__sub button:hover { color: #fff; }
.dock__sub button.is-active { background: #fff; color: #111; }
.dock__sub button:focus-visible { outline: 2px solid #8B7CF0; outline-offset: 2px; }
.dock .icon-sun { display: none; }
.dock.is-dark .icon-sun { display: block; }
.dock.is-dark .icon-moon { display: none; }

@media (max-width: 520px) {
  .dock__brand { display: none; }
  .dock__themes button { padding: 9px 11px; }
  .dock { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}