/* Switcher flottant (coin de l’écran) */

.floating-mode-switcher-wrap {
  position: fixed;
  left: 22px;
  bottom: 7px;
  z-index: 999999;
  pointer-events: auto;
  animation: dm-switcher-enter 2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.floating-mode-switcher-wrap.floating-bottom-right {
  left: 22px;
  bottom: 7px;
}

@keyframes dm-switcher-enter {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dm-switch {
  --dm-switch-w: 52px;
  --dm-switch-h: 30px;
  --dm-switch-pad: 3px;
  --dm-switch-knob: calc(var(--dm-switch-h) - 2 * var(--dm-switch-pad));

  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.dm-switch__btn {
  /* Le DOM injecté n’a pas forcément de wrapper .dm-switch */
  --dm-switch-w: 52px;
  --dm-switch-h: 30px;
  --dm-switch-pad: 3px;
  --dm-switch-knob: calc(var(--dm-switch-h) - 2 * var(--dm-switch-pad));

  width: var(--dm-switch-w);
  height: var(--dm-switch-h);
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, var(--awb-custom_color_9) 0%, var(--awb-color4) 25%, var(--awb-color5) 50%, var(--awb-custom_color_1) 75%, var(--awb-custom_color_2) 100%);
  padding: 0;
  cursor: pointer;
  position: relative;
}

.dm-switch__btn::before {
  content: "";
  position: absolute;
  top: var(--dm-switch-pad);
  left: var(--dm-switch-pad);
  width: var(--dm-switch-knob);
  height: var(--dm-switch-knob);
  border-radius: 999px;
  background: #fff;
  /* Picto lune (clair) */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M21%2013.1c-1.2.6-2.6.9-4.1.9-5%200-9-4-9-9%200-1.5.3-2.9.9-4.1C5.4%202.4%203%205.6%203%209.2%203%2015.2%207.8%2020%2013.8%2020c3.6%200%206.8-2.4%207.2-5.9Z%27%20fill%3D%27%230b1115%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: transform 180ms ease;
}

html[data-theme="dark"] .dm-switch__btn {
  border-color: rgba(231, 238, 242, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .dm-switch__btn::before {
  transform: translateX(calc(var(--dm-switch-w) - var(--dm-switch-knob) - 2 * var(--dm-switch-pad)));
  background-color: #0b1115;
  /* Picto lune (dark) */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M21%2013.1c-1.2.6-2.6.9-4.1.9-5%200-9-4-9-9%200-1.5.3-2.9.9-4.1C5.4%202.4%203%205.6%203%209.2%203%2015.2%207.8%2020%2013.8%2020c3.6%200%206.8-2.4%207.2-5.9Z%27%20fill%3D%27%23ffffff%27/%3E%3C/svg%3E");
}

.dm-switch__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .floating-mode-switcher-wrap {
    animation: none;
  }
}