*, *::before, *::after {
  box-sizing: border-box;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}
*:focus, *:focus-visible, button:focus, button:focus-visible, input:focus {
  outline: none !important;
  box-shadow: none !important;
}
[hidden] { display: none !important; }

img, .trame, [class*="t-icon"], [class*="s-ic"] { -webkit-user-drag: none; pointer-events: none; }
button img, .src-btn img { pointer-events: none; }

html, body, #stage, #nac, .screen {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-text-size-adjust: none;
  touch-action: none !important;
  -ms-touch-action: none !important;
}
html, body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}
body {
  font-family: var(--font-peugeot);
  color: var(--px-color1);
  display: flex; align-items: center; justify-content: center;
}

#stage {
  position: relative;
  flex: 0 0 auto;
  width: 800px;
  height: 480px;
  transform-origin: center center;
  transform: scale(1);
}
#nac   { position: absolute; inset: 0; width: 800px; height: 480px; overflow: hidden; background: var(--px-color-fond0); }

.screen {
  position: absolute; inset: 0; width: 800px; height: 480px;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease-out;
  pointer-events: none;
  transform: translateZ(0);
  will-change: opacity;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }
.screen.leaving { pointer-events: none; }
.main-frame {
  position: absolute; inset: 0; width: 800px; height: 480px;
  z-index: 2;
  transform: translateZ(0);
}

.trame {
  position: absolute; inset: 0; width: 800px; height: 480px;
  background-image: url("../assets/img/ambiance_1/trameAbiance_Media.png"),
                    url("../assets/img/ambiance_1/trameAbiance_Settings.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
}

#statusline {
  position: absolute; left: 0; top: 0; width: 800px; height: 56px;
  background: var(--px-color-header);
  display: flex; align-items: stretch; z-index: 60;
  transform: translateY(-56px);
  will-change: transform;
}
#statusline.down { transform: translateY(0); transition: transform 950ms cubic-bezier(.16,1,.3,1); }
#statusline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 800px; height: 1px; background: var(--px-color-line-header); }

#statusline .sl-group { position: relative; height: 56px; display: flex; align-items: center; }
.sl-nav::before, .sl-notif::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 34px;
  background: url("../assets/img/ambiance_1/fond_line.png") no-repeat center/3px 34px;
  filter: hue-rotate(var(--px-theme-hue, 0deg));
}
.sl-temp  { flex: 0 0 100px; width: 100px; padding: 0; justify-content: center; gap: 2px; font-family: var(--font-peugeot); font-weight: 400; }
.sl-mute  { flex: 0 0 48px; width: 48px; margin-left: 0; justify-content: center; }
.sl-spacer { flex: 1 1 auto; min-width: 0; }
.sl-nav   { flex: 0 0 60px; width: 60px; justify-content: center; }
.sl-notif { flex: 0 0 50px; width: 50px; justify-content: center; }
.sl-time  { flex: 0 0 100px; width: 100px; justify-content: flex-start; padding-left: 6px; }

.sl-temp .val   { font-family: var(--font-peugeot); font-weight: 400; font-size: 26px; color: var(--px-color1); }
.sl-temp .ice   { width: 18px; height: 18px; }
.sl-temp.ice .val, .sl-temp.ice .unit { color: var(--px-color-primary); }
.sl-temp .unit  { font-family: var(--font-peugeot); font-weight: 400; font-size: 15px; color: var(--px-color1); margin-left: 3px; vertical-align: 5px; }
.sl-notif img, .sl-nav img, .sl-mute img { width: 32px; height: 27px; object-fit: contain; }
.sl-time .clock { font-family: var(--font-peugeot); font-weight: 400; font-size: 26px; color: var(--px-color1); font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.sl-time .clock i { font-style: normal; }

.sl-nav.press, .sl-notif.press { background: var(--px-effetcolor-btn); }
.sl-nav.press img, .sl-notif.press img { filter: brightness(0); }

#nac-popup { position: absolute; inset: 0; width: 800px; height: 480px; z-index: 200; }
#nac-popup .pop-trame {
  position: absolute; inset: 0; width: 800px; height: 480px;
  background: url("../assets/img/ambiance_1/trameAbiance_Popups.png") no-repeat 0 0, var(--px-color-fond0);
  opacity: 0; transition: opacity 200ms ease-out;
}
#nac-popup.open .pop-trame { opacity: var(--px-opacity-fond-popup, .8); }

#nac-popup .pop-fond {
  position: absolute; left: 92px; top: 55px; width: 618px; height: 364px;
  background: var(--px-color-fond0);
  border: 1px solid var(--px-color-line-titre-popup);
  opacity: 0; transform: scale(.94);
  transition: opacity 200ms ease-out, transform 200ms cubic-bezier(.2,.8,.2,1);
}
#nac-popup.open .pop-fond { opacity: 1; transform: scale(1); }

#nac-popup .pop-haut {
  position: absolute; left: 0; top: 0; width: 616px; height: 62px;
  background: url("../assets/img/ambiance_1/fond_bandeau_Popup.png") no-repeat 0 0;
  display: flex; align-items: center;
}
#nac-popup .pop-close {
  flex: 0 0 auto; width: 80px; height: 62px; border: 0; cursor: pointer;
  background: url("../assets/img/ambiance_1/PICTOS_tactile/PICTO_Back.png") no-repeat center;
}
#nac-popup .pop-close.press {
  background-image: url("../assets/img/ambiance_1/PICTOS_click/PICTO_Back.png");
  background-color: var(--px-effetcolor-btn);
}
#nac-popup .pop-title {
  flex: 1 1 auto; padding-right: 80px; text-align: center;
  font-family: var(--font-peugeot-light); font-weight: 300;
  font-size: 31px; text-transform: uppercase;
  color: var(--px-color-title); letter-spacing: .5px;
}
#nac-popup .pop-body {
  position: absolute; left: 0; top: 62px; width: 616px; height: 242px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 0 40px;
}
#nac-popup .pop-icon { max-height: 65px; max-width: 120px; object-fit: contain; }
#nac-popup .pop-text {
  text-align: center; font-size: 24px; line-height: 1.25;
  color: var(--px-color-secondary); white-space: pre-line;
}
#nac-popup .pop-bas {
  position: absolute; left: 1px; bottom: 0; width: 614px; height: 59px;
  background: url("../assets/img/ambiance_1/fond_bandeaubas_Popup.png") no-repeat 0 0;
}

#black-panel { position: absolute; inset: 0; width: 800px; height: 480px; background: #000; z-index: 300; }

.right-area {
  position: absolute; left: 590px; top: 55px; width: 210px; height: 66px;
  display: flex; align-items: center; gap: 10px; padding-left: 14px; cursor: pointer;
  z-index: 50;
}
.right-area img { width: 34px; height: 35px; }
.right-area .label { font-size: 26px; color: var(--px-color-btn); text-transform: uppercase; }
.right-area::after { content: ""; position: absolute; left: 0; top: 65px; width: 210px; height: 1px; background: var(--px-color-line-info2); }
.right-area.press { background: var(--px-effetcolor-btn); }
.right-area.press .label { color: var(--px-color-btn-down); }
.right-area.press img { filter: brightness(0); }

.bandeau-bas {
  position: absolute; left: 0; top: 373px; width: 800px; height: 107px;
  background-image: url("../assets/img/ambiance_1/FOND_BANDEAU_BAS.png");
  background-repeat: no-repeat; z-index: 40;
}
.bandeau-row { position: absolute; left: 0; top: 45px; width: 800px; height: 62px; display: flex; align-items: stretch; }
.bandeau-row, .bandeau-row .btn-rest, .bandeau-row .nac-btn { touch-action: manipulation; }
.bandeau-row .btn-first { flex: 1 1 140px; min-width: 140px; max-width: 200px; text-transform: uppercase; }
.bandeau-row .btn-rest  { flex: 1 1 auto; display: flex; }
.bandeau-row .btn-rest > .nac-btn { flex: 1 1 0; min-width: 0; }

.nac-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 20px;
  color: var(--px-color-btn);
  background: transparent; border: 0; padding: 0 5px;
  cursor: pointer; text-align: center; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nac-btn + .nac-btn::before,
.btn-rest > .nac-btn:first-child::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 3px; height: 34px;
  background: url("../assets/img/ambiance_1/fond_line.png") no-repeat center/3px 34px;
  z-index: 2;
}

.nac-btn.press {
  background: url("../assets/img/ambiance_1/fond_clicked.png") repeat;
  color: var(--px-color-btn-down);
}
.nac-btn.press::before { opacity: 0; }
.nac-btn[disabled] { color: var(--px-color-btn-disable); pointer-events: none; }
.nac-btn.on { color: var(--px-color-title); }
.nac-btn.tab.sel { color: var(--px-color-title); }
.nac-btn.tab.sel::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: var(--px-color-line-primary); }

.sec-title { position: absolute; left: 40px; top: 70px; width: 720px; font-size: 31px; color: var(--px-color-title); }
.sec-title::after { content: ""; position: absolute; left: 0; top: 44px; width: 720px; height: 1px; background: var(--px-color-line-titre-popup); }

.nac-list {
  position: absolute; left: 40px; top: 126px; width: 720px; height: 240px;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.nac-list::-webkit-scrollbar { width: 6px; }
.nac-list::-webkit-scrollbar-thumb { background: var(--px-color-line-secondary); }
.nac-row {
  position: relative; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 12px;
  border-bottom: 1px solid var(--px-color-line-secondary); cursor: pointer;
}
.nac-row.press { background: url("../assets/img/ambiance_1/fond_clicked.png") repeat; }
.nac-row.press .r-name, .nac-row.press .r-idx, .nac-row.press .r-freq { color: var(--px-color-btn-down); }
.nac-row.sel .r-name { color: var(--px-color-title); }
.nac-row .r-idx  { width: 34px; font-size: 22px; color: var(--px-color6); text-align: right; }
.nac-row .r-name { flex: 1 1 auto; font-size: 26px; color: var(--px-color1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nac-row .r-freq { font-size: 22px; color: var(--px-color6); flex: 0 0 auto; }

.nac-toggle {
  position: relative; flex: 0 0 auto; width: 92px; height: 38px;
  border: 1px solid var(--px-color-outline); background: var(--px-color-fond0);
  display: flex; align-items: center; cursor: pointer; padding: 0;
}
.nac-toggle .knob { position: absolute; top: 2px; left: 2px; width: 44px; height: 32px; background: var(--px-color-btn-secondary); transition: transform 140ms ease-out, background 140ms; }
.nac-toggle .lbl  { flex: 1 1 0; font-size: 18px; text-align: center; z-index: 2; font-family: inherit; }
.nac-toggle .lbl.off { color: var(--px-color1); }
.nac-toggle .lbl.on  { color: var(--px-color6); }
.nac-toggle.on .knob { transform: translateX(42px); background: var(--px-color-primary); }
.nac-toggle.on .lbl.off { color: var(--px-color6); }
.nac-toggle.on .lbl.on  { color: var(--px-color-btn-down); }
.nac-toggle.press .knob { background: var(--px-effetcolor-btn); }

.abs { position: absolute; }
.hidden { display: none !important; }
.scroll-label { overflow: hidden; white-space: nowrap; position: relative; }
.scroll-label > span { display: inline-block; will-change: transform; }

.right-area img, .t-icon, .t-icon-p, .s-ic-n, .s-ic-p, .seek, .fn-info,
#rd-opt-rds, #rd-opt-info, #rd-opt-ta, #rd-opt-dab,
.aud-radio, .aud-check.on, .sl-notif img, .sl-nav img, .sl-mute img {
  filter: hue-rotate(var(--px-theme-hue, 0deg));
}

.nac-btn.press, .nac-row.press, .fn-row.press, .right-area.press, .src-btn.press,
.preset.press, .set-row.press, .radio-options button.press, .transport button.press,
.bandeau-row .btn-first.press, .menu-tile.press {
  background: var(--px-color-btn-focus);
  color: var(--px-color-btn-down);
  filter: hue-rotate(var(--px-theme-hue, 0deg));
}
.nac-btn.press img, .nac-row.press img, .src-btn.press img, .right-area.press img {
  filter: brightness(0);
}
.menu-tile.press .t-label {
  color: var(--px-color-btn-down);
}

.right-area::after, .sec-title::after, #statusline::after {
  background: var(--px-color-line-primary);
}