@font-face {
  font-family: "Special Elite";
  src: url("../fonts/special-elite-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ground: #15100b;
  --ground-raised: #211810;
  --oak: #8a5a32;
  --oak-light: #b07a45;
  --oak-dark: #4a3020;
  --paper: #eadfc2;
  --paper-cold: #b9ad90;
  --ink: #211810;
  --ink-soft: #4a3b2a;
  --brass: #c29a4b;
  --brass-light: #e4c17a;
  --enamel: #2f5d4a;
  --enamel-light: #8fb8a4;
  --ember: #e0621f;
  --ember-deep: #9c3a0c;
  --ember-light: #f0a06a;
  --text: #efe5cc;
  --muted: #b3a488;

  --display: "Special Elite", "Courier New", monospace;
  --type: "Courier Prime", "Courier New", monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --tag-shadow: 0 14px 28px -12px rgba(0, 0, 0, .7), 0 2px 5px rgba(0, 0, 0, .45);
}

/* Ambiance moderne : labo de recherche de nuit, étiquettes imprimées, voyant vert */
body[data-ambiance="moderne"] {
  --ground: #0b0d10;
  --ground-raised: #15191d;
  --oak: #3a4047;
  --oak-light: #59616a;
  --oak-dark: #1d2126;
  --paper: #eef1f3;
  --paper-cold: #b3bcc4;
  --ink: #0e1114;
  --ink-soft: #37414a;
  --brass: #7f8f9c;
  --brass-light: #c3d0da;
  --enamel: #20252b;
  --enamel-light: #9fd8ff;
  --ember: #2fcf7a;
  --ember-deep: #1c6e45;
  --ember-light: #8ff0bd;
  --text: #e6ebef;
  --muted: #9aa6b1;
  --display: "Courier Prime", "Courier New", monospace;
}
body[data-ambiance="moderne"] .plate-title h1 { font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
body[data-ambiance="moderne"] .tag-name { font-weight: 700; }
body[data-ambiance="moderne"] .tag { border-radius: 3px; }
body[data-ambiance="moderne"] .tag::before { display: none; }
body[data-ambiance="moderne"] .tag-live { padding-top: 1.3rem; }
body[data-ambiance="moderne"] .tag-off { padding-top: .9rem; }
body[data-ambiance="moderne"] .lamp-bulb { fill: #eaf3ff; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--ground); scrollbar-color: var(--oak) var(--ground); }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--text);
  font: 400 1rem/1.55 var(--type);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ember); color: var(--ink); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
}
.skip:focus { top: 1rem; }

h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; }

/* ---------- Plaques (en-tête) ---------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  position: relative;
  z-index: 3;
}

.plate-title h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--paper);
}

.status {
  margin: .45rem 0 0;
  color: var(--muted);
  font-size: .95rem;
}

.hint {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .85rem;
  max-width: 52ch;
}

.topbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 30rem) {
  .topbar { flex-direction: column; align-items: stretch; gap: .9rem; }
  .topbar-actions { justify-content: flex-start; }
  .plate-small { font-size: .74rem; padding: .45rem .75rem; }
}

.plate-small {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1px solid rgba(194, 154, 75, .55);
  border-radius: 6px;
  background: rgba(33, 24, 16, .82);
  color: var(--brass-light);
  font: 700 .82rem/1 var(--type);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.plate-small:hover { border-color: var(--brass-light); background: rgba(58, 42, 24, .9); color: var(--paper); }
.plate-small svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Étiquettes ---------- */

.shelf { list-style: none; margin: 0; padding: 0; }

.tag {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--tag-shadow);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s var(--ease-out);
}

/* œillet en laiton */
.tag::before {
  content: "";
  position: absolute;
  top: .7rem;
  left: 50%;
  width: .8rem;
  height: .8rem;
  margin-left: -.4rem;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 0 0 2.5px var(--brass), inset 0 1px 2px rgba(0, 0, 0, .6);
}

.tag-name {
  font-family: var(--display);
  line-height: 1.05;
  color: var(--ink);
}

.tag-desc { color: var(--ink-soft); }

.tag-state {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tag-live .tag-state::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--ember-light);
}

/* Poste en service */
.tag-live {
  padding: 2.2rem 1.5rem 1.25rem;
  transform: rotate(-.6deg);
}
.tag-live .tag-name { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); }
.tag-live .tag-desc { margin: .55rem 0 1.1rem; font-size: 1rem; max-width: 40ch; }

.tag-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding-top: .9rem;
  border-top: 1px dashed rgba(33, 24, 16, .35);
}

.tag-host { font-size: .85rem; color: var(--ink-soft); }

.tag-open {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .25s var(--ease-out);
}
.tag-open svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }

.tag-live:hover, .tag-live:focus-visible, .tag-live.is-selected {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 22px 36px -14px rgba(0, 0, 0, .8), 0 3px 8px rgba(0, 0, 0, .45);
}
.tag-live:hover .tag-open, .tag-live:focus-visible .tag-open { background: var(--ember-deep); }
.tag-live:hover .tag-open svg, .tag-live:focus-visible .tag-open svg { transform: translateX(3px); }

/* Postes à venir */
.tag-off {
  padding: 1.9rem .9rem .9rem;
  background: var(--paper-cold);
  cursor: default;
  transform: rotate(1deg);
}
.shelf-waiting li:nth-child(even) .tag-off { transform: rotate(-1.2deg); }
.tag-off .tag-name { font-size: 1.2rem; }
.tag-off .tag-state {
  align-self: flex-start;
  margin-top: .55rem;
  padding: .15rem .4rem;
  border: 1.5px solid var(--ink-soft);
  border-radius: 3px;
  color: var(--ink-soft);
  letter-spacing: .1em;
}
.tag-off:hover, .tag-off:focus-visible, .tag-off.is-selected { transform: rotate(0deg) translateY(-2px); }

.tag-msg {
  display: block;
  min-height: 1.3em;
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--muted);
}

.empty { color: var(--muted); margin: 0; }
.noscript { color: var(--paper); max-width: 40ch; }

/* Crédits des ressources sous licence libre (Tripo CC BY, Poly Haven CC0).
   Sur la vue étagère seulement : en maquette, la paillasse sert de barre d'étiquettes. */
.credits { display: none; margin: 2.5rem 0 0; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.view-shelf .credits { display: block; }
.credits a { color: inherit; }

/* ---------- Vue étagère (téléphone, repli sans WebGL) ---------- */

.view-shelf .bench {
  width: min(100%, 62rem);
  margin: 0 auto;
  padding: 1.5rem max(1rem, env(safe-area-inset-right)) calc(2.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.view-shelf .bench:focus { outline: none; }

.view-shelf .bench-live {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: .25rem;
}

/* flaque de lumière de la lampe */
.view-shelf .bench-live::before {
  content: "";
  position: absolute;
  inset: 2rem -1rem auto;
  height: 22rem;
  background: radial-gradient(50% 55% at 50% 30%, rgba(255, 196, 120, .2), rgba(255, 170, 90, .07) 55%, transparent 75%);
  pointer-events: none;
}

.lamp { width: 7.5rem; height: auto; display: block; position: relative; }
.lamp-cord { stroke: var(--brass); stroke-width: 2; }
.lamp-shade { fill: var(--enamel); }
.lamp-rim { stroke: var(--brass); stroke-width: 3; stroke-linecap: round; }
.lamp-bulb { fill: #ffd9a0; filter: drop-shadow(0 0 8px rgba(255, 190, 110, .9)); }

.view-shelf h2 {
  font-size: 1.05rem;
  color: var(--muted);
  letter-spacing: .02em;
}

.view-shelf .bench-live h2 {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.view-shelf .shelf-live {
  position: relative;
  width: min(100%, 32rem);
  margin-top: .35rem;
  display: grid;
  gap: 1.5rem;
}

/* planche de chêne sous chaque rangée */
.view-shelf .shelf::after {
  content: "";
  display: block;
  height: .8rem;
  margin: 1.4rem -.75rem 0;
  border-radius: 2px;
  background: linear-gradient(var(--oak-light), var(--oak) 35%, var(--oak-dark));
  box-shadow: 0 12px 18px -8px rgba(0, 0, 0, .8);
}
.view-shelf .shelf-live::after { margin-top: 0; }
.view-shelf .shelf-waiting::after { grid-column: 1 / -1; margin-top: .4rem; }

.view-shelf .bench-waiting { margin-top: 2.6rem; }
.view-shelf .bench-waiting h2 { margin-bottom: 1rem; }

.view-shelf .shelf-waiting {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1rem .9rem;
}

@media (max-width: 30rem) {
  .view-shelf .shelf-waiting { grid-template-columns: repeat(3, 1fr); gap: .8rem .55rem; }
  .view-shelf .tag-off { padding: 1.55rem .55rem .6rem; }
  .view-shelf .tag-off::before { top: .5rem; width: .65rem; height: .65rem; margin-left: -.325rem; }
  .view-shelf .tag-off .tag-name { font-size: 1rem; }
  .view-shelf .tag-off .tag-state { font-size: .64rem; letter-spacing: .06em; padding: .1rem .3rem; }
  .view-shelf .bench-waiting { margin-top: 2rem; }
}

@media (min-width: 48rem) {
  .view-shelf .bench { padding-top: 2.5rem; }
  .view-shelf .shelf-waiting { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Vue maquette (PC, iPad) ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.stage canvas.is-dragging { cursor: grabbing; }
.stage [hidden] { display: none; }
.stage canvas,
.stage video { transition: transform .4s var(--ease-out); }
/* Labo moderne : trajet vidéo entre deux panoramas (panorama.js) */
.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s linear, transform .4s var(--ease-out);
}
.stage video.is-playing { opacity: 1; }
.stage.is-travelling canvas { cursor: progress; }
.stage canvas.is-pointing { cursor: pointer; }

.scene-label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  gap: .1rem;
  margin: -4.2rem 0 0 -.9rem;
  padding: .45rem .75rem .5rem;
  border-radius: 4px;
  background: rgba(21, 16, 11, .82);
  border: 1px solid rgba(194, 154, 75, .45);
  color: var(--paper);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .25s var(--ease-out);
}
.scene-label strong { font: 400 1.15rem/1.1 var(--display); }
.scene-label span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scene-label.is-live span { color: var(--ember-light); }

.perf-meter {
  position: absolute;
  top: .6rem;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: .3rem .6rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, .75);
  color: #e6ebef;
  font: 700 .78rem/1.2 var(--type);
  pointer-events: none;
}

.stage-loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  margin: 0;
  color: var(--muted);
}
.stage.is-loading .stage-loading { display: grid; }

.view-model { overflow: hidden; height: 100dvh; }

.view-model .topbar {
  position: fixed;
  inset: 0 0 auto;
  pointer-events: none;
}
.view-model .topbar > * { pointer-events: auto; }
.view-model .plate-title { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

.view-model .bench {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  pointer-events: none;
}
.view-model .bench > * { pointer-events: auto; }
.view-model .bench:focus { outline: none; }

.view-model .lamp { display: none; }
.view-model .bench h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.view-model .shelf-live { display: flex; gap: 1rem; }
.view-model .tag-live { width: min(22rem, 40vw); padding: 1.9rem 1.2rem 1rem; }
.view-model .tag-live .tag-name { font-size: 2rem; }
.view-model .tag-live .tag-desc { font-size: .92rem; margin: .4rem 0 .8rem; }

.view-model .shelf-waiting { display: flex; flex-wrap: wrap; gap: .6rem; }
.view-model .tag-off { width: 7.4rem; padding: 1.6rem .7rem .7rem; }
.view-model .tag-off .tag-name { font-size: 1.05rem; }
.view-model .tag-off .tag-state { font-size: .68rem; }
.view-model .tag-msg {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 0;
  width: max-content;
  max-width: 14rem;
  min-height: 0;
  margin: 0;
  padding: .3rem .55rem;
  border-radius: 4px;
  background: var(--ground-raised);
  color: var(--paper);
}
.view-model .tag-msg:empty { display: none; }
.view-model .shelf-waiting li { position: relative; }

.view-model .tag.is-hover { transform: rotate(0deg) translateY(-3px); }
.view-model .tag.is-selected { box-shadow: 0 0 0 2px var(--brass-light), var(--tag-shadow); }

@media (max-width: 60rem) {
  .view-model .bench { flex-direction: column; align-items: stretch; }
  .view-model .tag-live { width: min(24rem, 100%); }
  .view-model .tag-off { width: 6.6rem; }
}

/* ---------- Téléphone et tablette : maquette seule, fiche au toucher ---------- */

.fiche[hidden], .layout-touch .scene-label { display: none; }

.layout-touch.view-model .topbar {
  flex-direction: row;
  align-items: center;
  padding: max(.6rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
}
.layout-touch.view-model .plate-title h1 { font-size: 1.35rem; }
.layout-touch.view-model .status { margin-top: .2rem; font-size: .78rem; }
.layout-touch.view-model .topbar-actions { flex-wrap: nowrap; }
.layout-touch.view-model .plate-small { font-size: .72rem; padding: .45rem .7rem; white-space: nowrap; }
.layout-touch.view-model .plate-exit { width: 44px; justify-content: center; padding: 0; }
.layout-touch.view-model .exit-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.layout-touch.view-model .hint {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(env(safe-area-inset-bottom) + 5.4rem);
  max-width: none;
  margin: 0;
  text-align: center;
  font-size: .78rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  transition: opacity .5s var(--ease-out);
}
.layout-touch.view-model .hint.is-faded { opacity: 0; }

/* rangée de puces, une par poste */
.layout-touch.view-model .bench {
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: row;
  align-items: stretch;
  gap: .5rem;
  padding: .6rem max(.75rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
}
.layout-touch.view-model .bench-live,
.layout-touch.view-model .bench-waiting { display: flex; margin: 0; }
.layout-touch.view-model .shelf { display: flex; flex-wrap: nowrap; gap: .5rem; }
.layout-touch.view-model .tag,
.layout-touch.view-model .tag-live,
.layout-touch.view-model .tag-off {
  flex: none;
  width: auto;
  min-width: 6.8rem;
  min-height: 44px;
  padding: .5rem .75rem;
  transform: none;
  scroll-snap-align: start;
}
.layout-touch.view-model .bench .tag::before,
.layout-touch.view-model .bench .tag-desc,
.layout-touch.view-model .bench .tag-host,
.layout-touch.view-model .bench .tag-open,
.layout-touch.view-model .bench .tag-msg { display: none; }
.layout-touch.view-model .bench .tag-foot { margin-top: .2rem; padding: 0; border: 0; }
.layout-touch.view-model .bench .tag-state { white-space: nowrap; font-size: .66rem; }
.layout-touch.view-model .tag .tag-name { font-size: 1.05rem; white-space: nowrap; }
.layout-touch.view-model .tag-off .tag-state { margin-top: .25rem; font-size: .64rem; padding: .05rem .3rem; }
.layout-touch.view-model .tag.is-selected { box-shadow: 0 0 0 2px var(--brass-light), var(--tag-shadow); }

/* fiche du poste choisi */
.fiche {
  position: fixed;
  left: max(.75rem, env(safe-area-inset-left));
  right: max(.75rem, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 5.2rem);
  z-index: 3;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--tag-shadow);
  animation: fiche-in .4s var(--ease-out);
}
@keyframes fiche-in { from { opacity: 0; transform: translateY(14px); } }
.fiche h2 { padding-right: 2.5rem; font-size: 1.9rem; line-height: 1.05; color: var(--ink); }
body[data-ambiance="moderne"] .fiche h2 { font-weight: 700; }
.fiche-desc { margin: .45rem 0 .9rem; color: var(--ink-soft); }
.fiche-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding-top: .8rem;
  border-top: 1px dashed rgba(33, 24, 16, .35);
}
.fiche-close {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.fiche-close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fiche .tag-open { text-decoration: none; }
.fiche .tag-open:hover, .fiche .tag-open:focus-visible { background: var(--ember-deep); }
.fiche.is-live .tag-state::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--ember-light);
}

@media (prefers-reduced-motion: reduce) {
  .fiche { animation: none; }
  .tag, .tag-open svg, .scene-label { transition-property: box-shadow, background-color, opacity; }
  .tag, .tag-off, .shelf-waiting li:nth-child(even) .tag-off, .tag-open svg { transform: none !important; }
}