/* La Scénette – Menu console lumière */
.lsm-console {
  /* Réglables depuis l'administration (variables posées sur la console) */
  --lsm-w: 980px;
  --lsm-h: 150px;
  --lsm-neon: 1;               /* 0.5 doux · 1 normal · 1.8 intense */
  --lsm-glow: #ff3b2f;         /* couleur du liseré (curseur survolé ou actif) */
  --lsm-glow-rest: #ff3b2f;

  --lsm-metal-1: #33363b;
  --lsm-metal-2: #1c1d21;
  --lsm-ink: #e9e6df;
  --lsm-ink-dim: #8f8d86;
  --lsm-led: #ff3b2f;
  --lsm-speed: 120ms;

  width: min(100%, var(--lsm-w));
  height: var(--lsm-h);
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 10px 18px 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--lsm-metal-1), var(--lsm-metal-2));
  border: 1px solid #111;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  color: var(--lsm-ink);
  user-select: none;
  transition: border-color 200ms linear, box-shadow 200ms linear;
}

body.lsm-has-console { padding-bottom: var(--lsm-body-pad, 160px); }

/* Barre fixée en bas de l'écran */
.lsm-console--fixed {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 99999;
}
/* Console posée dans le contenu d'une page */
.lsm-console--inline {
  position: relative;
  margin: 24px auto;
  border-bottom: 1px solid #111;
  border-radius: 10px;
}

/* ---- Liseré lumineux ---- */
.lsm-console--glow {
  border-color: var(--lsm-glow);
  box-shadow:
    0 0 calc(6px * var(--lsm-neon)) var(--lsm-glow),
    0 0 calc(22px * var(--lsm-neon)) color-mix(in srgb, var(--lsm-glow) 55%, transparent),
    inset 0 0 calc(10px * var(--lsm-neon)) color-mix(in srgb, var(--lsm-glow) 25%, transparent),
    0 -6px 24px rgba(0,0,0,.5);
}
.lsm-console--glow::before { /* filet de lumière sur l'arête haute */
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff 15%, var(--lsm-glow) 50%, #fff 85%, transparent);
  opacity: .85;
  pointer-events: none;
  transition: background 200ms linear;
}
.lsm-console--fixed.lsm-console--glow::before { left: 18px; right: 18px; }

/* sous la barre d'administration WordPress (utilisateur connecté) */
body.admin-bar .lsm-rig { top: 32px; }
@media (max-width: 782px) { body.admin-bar .lsm-rig { top: 46px; } }

/* ---- Bulle d'information au survol ---- */
.lsm-bubble {
  --lsm-color: #ffd23f;
  --lsm-tail: 0px;
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  z-index: 4;
  max-width: min(260px, calc(100vw - 16px));
  width: max-content;
  box-sizing: border-box;
  padding: 10px 14px;
  background: #fff;
  color: #1d1b18;
  border: 2px solid var(--lsm-color);
  border-radius: 12px;
  box-shadow:
    0 0 calc(8px * var(--lsm-neon)) var(--lsm-color),
    0 6px 18px rgba(0,0,0,.25);
  font: 600 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px) scale(.96);
  transition: opacity 120ms ease, transform 120ms ease, border-color 120ms linear, box-shadow 120ms linear;
}
.lsm-bubble.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
/* pointe, dirigée vers le curseur */
.lsm-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% + var(--lsm-tail));
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 2px solid var(--lsm-color);
  border-bottom: 2px solid var(--lsm-color);
  transform: translate(-50%, -6px) rotate(45deg);
}

/* ---- Rangée de curseurs ---- */
.lsm-faders {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;          /* beaucoup de curseurs : défilement latéral */
  overflow-y: hidden;
  scrollbar-width: thin;
}
.lsm-fader { flex: 1 0 44px; }

.lsm-fader__link {
  --lsm-color: #ffd23f;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.lsm-fader__num {
  font-size: 10px;
  font-weight: 700;
  background: #d9d6cf;
  color: #222;
  border-radius: 2px;
  padding: 0 6px;
  line-height: 14px;
  transition: background var(--lsm-speed) linear, box-shadow var(--lsm-speed) linear;
}

/* La glissière */
.lsm-fader__track {
  position: relative;
  flex: 1;
  width: 100%;
}
.lsm-fader__track::before { /* fente, qui s'éclaire sous le curseur levé */
  content: "";
  position: absolute;
  left: 50%; top: 4px; bottom: 4px;
  width: 4px;
  transform: translateX(-50%);
  background: #050505;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transition: background var(--lsm-speed) linear, box-shadow var(--lsm-speed) linear;
}
.lsm-fader__track::after { /* graduations */
  content: "";
  position: absolute;
  left: calc(50% - 16px); top: 6px; bottom: 6px;
  width: 8px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 1px, transparent 1px 7px);
}

/* Le bouton du curseur */
.lsm-fader__cap {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 22px;
  transform: translate(-50%, 0);
  background: linear-gradient(180deg, #2b2b2b 0%, #0d0d0d 45%, #2b2b2b 55%, #111 100%);
  border-radius: 3px;
  box-shadow: 0 3px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    bottom var(--lsm-speed) cubic-bezier(.2,.9,.3,1.2),
    background var(--lsm-speed) linear,
    box-shadow var(--lsm-speed) linear;
}
.lsm-fader__cap::after { /* ligne repère */
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #cfcfcf;
  transition: background var(--lsm-speed) linear, box-shadow var(--lsm-speed) linear;
}

.lsm-fader__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lsm-ink-dim);
  transition: color var(--lsm-speed) linear, text-shadow var(--lsm-speed) linear;
}

/* ---- Survol / focus / page active : le curseur monte et s'allume en néon ---- */
.lsm-fader__link:hover .lsm-fader__cap,
.lsm-fader__link:focus-visible .lsm-fader__cap,
.lsm-fader__link.is-active .lsm-fader__cap {
  bottom: calc(100% - 22px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lsm-color) 55%, #fff) 0%,
    var(--lsm-color) 45%,
    color-mix(in srgb, var(--lsm-color) 70%, #000) 100%);
  box-shadow:
    0 0 calc(4px * var(--lsm-neon)) #fff,
    0 0 calc(10px * var(--lsm-neon)) var(--lsm-color),
    0 0 calc(24px * var(--lsm-neon)) var(--lsm-color),
    0 0 calc(44px * var(--lsm-neon)) color-mix(in srgb, var(--lsm-color) 50%, transparent);
}
.lsm-fader__link:hover .lsm-fader__cap::after,
.lsm-fader__link:focus-visible .lsm-fader__cap::after,
.lsm-fader__link.is-active .lsm-fader__cap::after {
  background: #fff;
  box-shadow: 0 0 6px #fff;
}
.lsm-fader__link:hover .lsm-fader__track::before,
.lsm-fader__link:focus-visible .lsm-fader__track::before,
.lsm-fader__link.is-active .lsm-fader__track::before {
  background: linear-gradient(0deg, var(--lsm-color), color-mix(in srgb, var(--lsm-color) 40%, #fff));
  box-shadow: 0 0 calc(6px * var(--lsm-neon)) var(--lsm-color), 0 0 calc(14px * var(--lsm-neon)) var(--lsm-color);
}
.lsm-fader__link:hover .lsm-fader__label,
.lsm-fader__link:focus-visible .lsm-fader__label,
.lsm-fader__link.is-active .lsm-fader__label {
  color: color-mix(in srgb, var(--lsm-color) 60%, #fff);
  text-shadow:
    0 0 calc(4px * var(--lsm-neon)) var(--lsm-color),
    0 0 calc(12px * var(--lsm-neon)) var(--lsm-color);
}
.lsm-fader__link:hover .lsm-fader__num,
.lsm-fader__link.is-active .lsm-fader__num {
  background: var(--lsm-color);
  box-shadow: 0 0 calc(8px * var(--lsm-neon)) var(--lsm-color);
}

.lsm-fader__link:focus-visible .lsm-fader__num { outline: 2px solid var(--lsm-color); outline-offset: 2px; }

/* Jauge quand l'option « ouvrir au survol » est active */
.lsm-fader__link.is-arming .lsm-fader__num {
  background: linear-gradient(90deg, var(--lsm-color) var(--lsm-progress, 0%), #d9d6cf 0);
}

/* ---- Mobile ---- */
@media (max-width: 700px) {
  .lsm-console { height: min(var(--lsm-h), 130px); gap: 10px; padding: 8px 10px 10px; }
  .lsm-console--fixed { border-radius: 0; }
  .lsm-faders { scroll-snap-type: x mandatory; }
  .lsm-fader { flex-basis: 56px; scroll-snap-align: start; }
  .lsm-spot { display: none; }
  .lsm-spot--center { display: block; }
  .lsm-spot--center .lsm-spot__beam { width: 160vw; }
}

/* ---- Projecteurs ---- */
.lsm-rig {
  --lsm-spot: #ffd23f;
  --lsm-spot-power: .6;
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  overflow: hidden;
}
/* lumière diffuse sur toute la page */
.lsm-rig__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, var(--lsm-spot), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 260ms ease, background 220ms linear;
}
.lsm-rig.is-on .lsm-rig__wash { opacity: calc(var(--lsm-spot-power) * .9); }

.lsm-spot {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 0;
  transform: translateY(-120px);
  transition: transform 220ms cubic-bezier(.2,.9,.3,1.15) var(--d, 0ms);
}
.lsm-rig.is-on .lsm-spot { transform: translateY(0); }

/* le boîtier (projecteur PAR suspendu) */
.lsm-spot__body {
  position: absolute;
  left: 0; top: 4px;
  width: 44px; height: 46px;
  transform: translateX(-50%) rotate(var(--a));
  transform-origin: 50% 0;
  background: linear-gradient(90deg, #0d0d0f, #3a3c42 45%, #16171a);
  border-radius: 8px 8px 14px 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.lsm-spot__body::before { /* lyre de fixation */
  content: "";
  position: absolute;
  left: 50%; top: -10px;
  width: 54px; height: 22px;
  transform: translateX(-50%);
  border: 4px solid #222;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.lsm-spot__lens {
  position: absolute;
  left: 50%; bottom: -5px;
  width: 36px; height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #fff 0%, var(--lsm-spot) 55%, color-mix(in srgb, var(--lsm-spot) 50%, #000) 100%);
  box-shadow:
    0 0 6px #fff,
    0 0 calc(18px + 30px * var(--lsm-spot-power)) var(--lsm-spot);
  opacity: .35;
  transition: opacity 200ms linear, background 220ms linear, box-shadow 220ms linear;
}
.lsm-rig.is-on .lsm-spot__lens { opacity: 1; }

/* le faisceau */
.lsm-spot__beam {
  position: absolute;
  left: 0; top: 46px;
  width: 70vw; height: 115vh;
  transform: translateX(-50%) rotate(var(--a)) scaleY(.15);
  transform-origin: 50% -42px;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lsm-spot) 85%, #fff) 0%,
    var(--lsm-spot) 25%,
    color-mix(in srgb, var(--lsm-spot) 30%, transparent) 75%,
    transparent 100%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease, background 220ms linear;
}
.lsm-rig.is-on .lsm-spot__beam {
  opacity: calc(var(--lsm-spot-power) * .38);
  transform: translateX(-50%) rotate(var(--a)) scaleY(1);
}

/* projecteur central : plus grand, faisceau plus large */
.lsm-spot--center .lsm-spot__body { width: 56px; height: 54px; border-radius: 10px 10px 18px 18px; }
.lsm-spot--center .lsm-spot__body::before { width: 68px; }
.lsm-spot--center .lsm-spot__lens { width: 46px; height: 14px; }
.lsm-spot--center .lsm-spot__beam { top: 54px; width: 95vw; transform-origin: 50% -50px; }

@media (max-width: 700px) {
  .lsm-spot__beam { width: 140vw; }
}

@media (prefers-reduced-motion: reduce) {
  .lsm-bubble { transition: opacity 120ms linear; transform: translate(-50%, 0); }
  .lsm-fader__cap { transition: background var(--lsm-speed) linear; }
  .lsm-spot, .lsm-spot__beam { transition: opacity 200ms linear; }
  .lsm-spot { transform: none; }
}