/* Menu de thèmes (menu déroulant) : même mécanique que le sélecteur de langue.
   Couleurs branchées sur les variables du site : le menu suit le thème actif. */
.theme-menu { position: relative; display: inline-block; }
.theme-menu__list {
  position: absolute; inset-inline-end: 0; z-index: 1000;
  min-width: 210px; margin: .35rem 0 0; padding: .3rem; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow);
}
.theme-menu__list[hidden] { display: none; }

/* Apparition du menu : liens en "pop" avec ressort et décalage (menu-pop-animation) */
@media (prefers-reduced-motion: no-preference) {
  .theme-menu__list > li { opacity: 0; transform: translate3d(0, -12px, 0) scale(.8); }
}
.theme-menu__list.is-open > li {
  opacity: 1; transform: none;
  transition-property: transform, opacity;
  transition-duration: 496ms, 240ms;
  transition-timing-function: cubic-bezier(.34, 1.4, .64, 1), cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms);
}
@supports (transition-timing-function: linear(0, 1)) {
  .theme-menu__list.is-open > li {
    transition-timing-function: linear(0, 0.0603, 0.2033, 0.3821, 0.5633, 0.7258, 0.8584, 0.9574, 1.0242, 1.0634, 1.0809, 1.0828, 1.0747, 1.0613, 1.046, 1.0313, 1.0186, 1.0085, 1.0012, 0.9965, 0.994, 0.9931, 0.9933, 0.9941, 0.9953, 0.9966, 0.9978, 0.9988, 1), cubic-bezier(.22, 1, .36, 1);
  }
}
@media (prefers-reduced-motion: reduce) { .theme-menu__list.is-open > li { transition: none; } }
.theme-menu__list button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 0 12px;
  font: inherit; font-size: 0.97rem; color: var(--ink); text-align: start;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
  transition: background-color 0.2s;
}
.theme-menu__list button:hover { background: var(--bg-soft); }
.theme-menu__list button:focus-visible,
.theme-menu__button:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.theme-menu__button[aria-expanded="true"] { border-color: var(--accent); background: var(--bg-soft); }

.theme-menu__swatch {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border);
}
.theme-menu__swatch[data-swatch="light"] { background: linear-gradient(135deg, #fbfcfc 50%, #067a56 50%); }
.theme-menu__swatch[data-swatch="dark"]  { background: linear-gradient(135deg, #0c1519 50%, #3ddc97 50%); }
.theme-menu__swatch[data-swatch="brand"] { background: linear-gradient(135deg, #fff4d6 50%, #263baa 50%); }
.theme-menu__swatch[data-swatch="navy"]  { background: linear-gradient(135deg, #071a52 50%, #a7ff83 50%); }
.theme-menu__swatch[data-swatch="coffee"] { background: linear-gradient(135deg, #251603 50%, #b84512 50%); }
.theme-menu__swatch[data-swatch="olive"] { background: linear-gradient(135deg, #283113 50%, #f3ff74 50%); }
.theme-menu__swatch[data-swatch="rainbow"] { background: conic-gradient(from 0deg, #ff3b30, #ff9500, #ffd60a, #34c759, #00c7be, #0a84ff, #bf5af2, #ff2d55, #ff3b30); border-color: transparent; }

.theme-menu__name { flex: 1; }
/* Thème actif : coche, jamais de simple couleur */
.theme-menu__list button[aria-current="true"] { font-weight: bold; }
.theme-menu__list button[aria-current="true"]::after {
  content: ""; flex: none; width: 6px; height: 11px; margin-inline-end: 4px;
  border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-2px);
}

/* Chinois : pas d'interlettrage négatif */
html:lang(zh) .theme-menu__list button { letter-spacing: normal; }

@media (max-width: 1200px) {
  .site-header .theme-menu { flex: none; }
}