/* styles/theme/pinboard/service-band.css
 * ═══════════════════════════════════════════════════════════════════
 * « PANNEAU À LA DEMANDE » (préfixe svc-) — réglages des écrans
 * mode-config. L'écran reste pur (plaque + toggle + posters) : un
 * bouton capsule « RÉGLAGES » dans la ligne du toggle (.bt-ctlrow)
 * déplie un pupitre MÉTAL en surimpression — même aluminium brossé
 * + rivets que le pupitre du lobby (.bt-strip) — contenant les
 * grappes RÉSEAU (pastilles M / RER) et DIFFICULTÉ (poussoirs à LED
 * de bt-lobby-station.css). Fermé : clic extérieur, Échap, re-clic.
 * + poster multi « REJOINDRE » (.svc-join) : cadre Decaux dont la
 *   vitre est un guichet sombre ambre (écho du code SIEL du lobby).
 * Rendu par src/ui/mode-config/options-panel.js. Cibles ≥ 44px.
 * Max 300 L.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Bouton RÉGLAGES : capsule de la même famille que .bt-toggle ── */
.svc-ctl{ position:relative; }
.svc-open{
  appearance:none; cursor:pointer;
  padding:12px 22px;
  background:var(--lv-paper, #fbf7ec);
  border:1px solid rgba(0,0,0,.2);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.12);
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:700; font-size:13px; letter-spacing:1.8px;
  text-transform:uppercase;
  color:rgba(0,0,0,.45);
  transition:color .15s ease, background .15s ease, box-shadow .15s ease;
}
html[data-theme="dark"] .svc-open{
  background:#26292e;
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.3);
  color:rgba(245,241,230,.5);
}
.svc-open:hover{ color:var(--lv-tile-blue, #003f7a); }
html[data-theme="dark"] .svc-open:hover{ color:#6ea8ff; }
/* Panneau ouvert : capsule remplie bleu (même état que le toggle actif) */
.svc-open.is-open{
  background:var(--lv-tile-blue, #003f7a);
  color:#f8f6f0;
  box-shadow:
    inset 0 0 0 2px rgba(245,241,230,.6),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}

/* ─── Le pupitre dépliant : panneau métal flottant sous le bouton ── */
.svc-pop{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  translate:-50% 0;
  z-index:6;
  width:max-content;
  max-width:min(320px, calc(100vw - 24px));
  /* Aluminium brossé — même recette que .bt-strip du lobby */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0 1px,
      rgba(0,0,0,.04) 1px 2px),
    linear-gradient(180deg, #8a867d 0%, #6a6660 50%, #4a4641 100%);
  border:1px solid #1a1a1a;
  border-radius:4px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 6px rgba(0,0,0,.45),
    0 18px 40px rgba(0,0,0,.45);
  animation:svc-pop-in .16s ease-out;
}
.svc-pop[hidden]{ display:none; }
@keyframes svc-pop-in{
  from{ opacity:0; margin-top:-6px; }
  to  { opacity:1; margin-top:0; }
}
/* Ergot pointant vers le bouton (carré métal pivoté) */
.svc-pop::before{
  content:''; position:absolute; top:-6.5px; left:50%;
  width:12px; height:12px;
  transform:translateX(-50%) rotate(45deg);
  background:#84807a;
  border-left:1px solid #1a1a1a;
  border-top:1px solid #1a1a1a;
}

.svc-sections{ position:relative; display:flex; flex-direction:column; align-items:stretch; }
/* 2 rivets aux coins bas du pupitre */
.svc-sections::before, .svc-sections::after{
  content:""; position:absolute; bottom:6px; width:7px; height:7px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #c9bfa3 0%, #4a463d 65%, #0f0e0b 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.12);
}
.svc-sections::before{ left:6px; }
.svc-sections::after{ right:6px; }

.svc-section{
  display:flex; flex-direction:column; justify-content:center;
  /* Grappe d'instruments : label gravé centré au-dessus du contrôle,
   * même motif que les .bt-opt du pupitre lobby. */
  align-items:center;
  gap:9px;
  padding:clamp(13px, 1.6vh, 18px) 22px;
}
/* Rainure gravée entre grappes (trait sombre + filet de lumière) */
.svc-section + .svc-section{
  border-top:1px solid rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* Labels GRAVÉS dans le métal — même recette que .bt-opt-label lobby */
.svc-lbl{
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800; font-size:11px; letter-spacing:2.2px;
  text-transform:uppercase;
  color:rgba(10,10,10,.78);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* ─── RÉSEAU : pastilles M / RER montées sur le métal ──────────────
 * Mêmes états que le lobby : éteint = grisé, actif = couleurs réelles
 * + halo ambre de voyant. Les sigles se suffisent (aria-label). */
.svc-net{ display:flex; align-items:center; justify-content:center; gap:8px; }
.svc-pastille{
  appearance:none; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
  padding:6px;
  min-width:54px; min-height:54px;
  border-radius:4px; cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.svc-pastille:hover{ background:rgba(255,255,255,.07); }
.svc-pastille:active{ transform:translateY(1px); }

.svc-roundel{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed','Barlow Semi Condensed',sans-serif;
  font-weight:800;
  transition:filter .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.svc-roundel-m{
  width:42px; height:42px; border-radius:50%;
  background:#f8f6f0; color:#003f7a;
  font-size:24px;
  border:3px solid #003f7a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.35);
}
.svc-roundel-rer{
  min-height:42px; padding:0 13px; border-radius:9px;
  background:#003f7a; color:#f8f6f0;
  font-size:17px; letter-spacing:.5px;
  border:2.5px solid #003f7a;
  box-shadow:inset 0 0 0 2px #f8f6f0, 0 1px 3px rgba(0,0,0,.4);
}
/* Éteint / allumé — recette des pastilles du lobby */
.svc-pastille:not(.active) .svc-roundel{ filter:grayscale(1) brightness(.55); opacity:.45; }
.svc-pastille.active .svc-roundel{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 0 8px rgba(255,154,31,.55),
    0 1px 3px rgba(0,0,0,.35);
}

/* ─── DIFFICULTÉ : boutons-poussoirs MÉTAL du lobby, agrandis ───── */
.svc-pop .diff-pb{
  padding:12px 14px;
  min-height:46px;
  font-size:12px; letter-spacing:1.4px;
}
.svc-pop .diff-pb-led{ width:8px; height:8px; }

/* ─── POSTER « REJOINDRE » : guichet ambre dans le cadre Decaux ──── */
.bt-poster.svc-join{ cursor:default; }
.bt-poster.svc-join:hover{ transform:none; filter:none; }
.svc-join-face{
  position:relative;
  flex:1 1 auto; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px, 2.2cqw, 18px);
  background:#0a1420;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 4px 14px rgba(0,0,0,.8);
  overflow:hidden;
}
/* Scanlines CRT — même recette que .bt-crt du lobby */
.svc-join-face::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.25) 3px 4px);
  pointer-events:none;
}
.svc-join-face > *{ position:relative; }
.svc-join-kicker{
  font-family:'VT323','Share Tech Mono',monospace;
  font-size:clamp(13px, 4cqw, 17px); letter-spacing:3px;
  color:rgba(232,162,58,.6);
  text-transform:uppercase;
}
/* Cases code : dot-matrix ambre (écho du SIEL où l'hôte lit le code).
 * Largeurs en cqw (container = .bt-poster) pour que 4 cases + gaps
 * tiennent TOUJOURS dans la vitre, quel que soit le format du poster. */
.svc-join .bt-code-boxes{ gap:clamp(4px, 1.5cqw, 9px); }
.svc-join .bt-code-box{
  width:clamp(26px, 19cqw, 48px); height:clamp(40px, 26cqw, 60px);
  background:#050608;
  border:1px solid rgba(232,162,58,.4); border-radius:2px;
  color:#ffbf66;
  font-family:'Share Tech Mono','VT323',monospace;
  font-weight:700; font-size:clamp(20px, 13cqw, 32px);
  text-shadow:0 0 5px rgba(255,154,31,.55);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8);
}
.svc-join .bt-code-box:focus{
  border-color:#ff9a1f;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8), 0 0 8px rgba(255,154,31,.4);
}
.svc-join .bt-code-box:placeholder-shown{ color:rgba(232,162,58,.28); text-shadow:none; }
/* VALIDER : bouton mécanique vert (recette btn-ready du lobby) */
.svc-join-go{
  appearance:none; cursor:pointer;
  padding:11px clamp(18px, 6cqw, 30px);
  min-height:44px;
  border:1.5px solid #0a0b0d; border-radius:3px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800; font-size:clamp(11px, 3.2cqw, 13px);
  letter-spacing:2px; text-transform:uppercase;
  background:linear-gradient(180deg, #3fb55a 0%, #1d7a36 55%, #0c4818 100%);
  color:#f5fff8;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.5);
  transition:filter .12s ease, transform .12s ease;
}
.svc-join-go:hover:not([disabled]){ filter:brightness(1.1); transform:translateY(-1px); }
.svc-join-go:active:not([disabled]){ transform:translateY(0); }
.svc-join-go[disabled]{
  cursor:not-allowed;
  background:linear-gradient(180deg, #3a3c40 0%, #232527 60%, #161719 100%);
  color:rgba(233,227,207,.3);
  text-shadow:none;
}

/* ─── Mobile (≤ 720px) ────────────────────────────────────────────
 * Bouton à hauteur du toggle mobile ; le panneau s'ancre au bord
 * droit du contrôle (un centrage déborderait de l'écran). */
@media (max-width: 720px){
  .svc-open{ padding:14px 20px; }
  .svc-pop{
    left:auto; right:0;
    translate:0 0;
    max-width:min(300px, calc(100vw - 24px));
  }
  .svc-pop::before{ left:auto; right:38px; transform:rotate(45deg); }
  .svc-section{ padding:12px 16px; }
  .svc-pop .diff-pb{ padding:12px 10px; font-size:11px; letter-spacing:1px; }
}