/* ============================================================
   LOBAKA Audio Core — interface
   Charte reprise du site lobaka.com pour que la démonstration
   ressemble au produit, et non à un outil de test.
   Charcoal #2B2B2B · Lime #6DD339 · Ash #797373 · Ivory #FCFFFA
   ============================================================ */

@font-face {
  font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ubuntu-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ubuntu-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/ubuntu-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
}

:root {
  --ground: #171A15;
  --surface: #1F231D;
  --raised: #2B2B2B;
  --lime: #6DD339;
  --lime-dim: #5CB82F;
  --ivory: #FCFFFA;
  --ash: #797373;
  --ash-warm: #9A948E;
  --line: rgba(252, 255, 250, .09);
  --line-2: rgba(252, 255, 250, .16);
  --warn: #E0A03A;
  --bad: #E05555;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit l'emporter sur nos display:flex / display:block.
   Sans cela, un bloc marque hidden reste visible — le bandeau « en ecoute »
   s'affichait alors qu'aucun canal n'etait choisi, ce qui laissait croire que
   le son passait deja. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 24px 20px calc(40px + env(safe-area-inset-bottom));
  background: var(--ground);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  max-width: 640px;
  margin-inline: auto;
}

:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 3px; }
img { max-width: 100%; display: block; }

/* ---------- Typographie ---------- */
h1, h2, h3 { margin: 0; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
h1 { font-size: 28px; line-height: 1.1; }
h2 { font-size: 13px; line-height: 1.3; text-transform: uppercase; letter-spacing: .12em;
     color: var(--ash-warm); font-weight: 500; margin: 32px 0 12px; }
p { margin: 0; }
.mono { font-family: var(--mono); }

/* Logotype typographique plutot qu'une image.
   Le fichier logo-horizontal.png est une icone accompagnee d'un texte : a la
   taille utile ici (30 px de haut) il devient illisible, et il exige un filtre
   d'inversion pour passer sur fond fonce. La marque LOBAKA etant d'abord une
   typographie, un texte reste net a toute taille et sur tout ecran. */
.wordmark {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ivory);
  margin: 0 0 4px;
  line-height: 1;
}
.wordmark .dotmark {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  margin-left: 2px;
  vertical-align: baseline;
}
.sub { color: var(--ash-warm); font-size: 15px; margin-bottom: 4px; }

/* ---------- Blocs ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 16px;
}

label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ash-warm);
  margin-bottom: 6px;
  font-weight: 500;
}

input, select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--ground);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--ivory);
  font-family: inherit;
  font-size: 16px;   /* 16px minimum : en dessous, iOS zoome au focus */
}
input:focus, select:focus { border-color: var(--lime); outline: none; }
input::placeholder { color: var(--ash); }

button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--raised);
  color: var(--ivory);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
button:hover:not(:disabled) { border-color: var(--line-2); background: #343434; }
button:disabled { opacity: .4; cursor: not-allowed; }

button.primary {
  width: 100%;
  background: var(--lime);
  border-color: var(--lime);
  color: #12210A;
  font-weight: 700;
}
button.primary:hover:not(:disabled) { background: var(--lime-dim); border-color: var(--lime-dim); }

button.danger { background: transparent; border-color: rgba(224, 85, 85, .5); color: #E58080; }
button.danger:hover:not(:disabled) { background: rgba(224, 85, 85, .1); }

.row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.row > div { flex: 1; }
.row > button { flex-shrink: 0; }

/* ---------- Sélecteur de canal — l'écran que verront les entreprises ------- */
.channels { display: flex; flex-direction: column; gap: 10px; }

.channel {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;          /* large : on le touche du pouce, debout, dans le noir */
  padding: 14px 18px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.channel:hover:not(:disabled) { background: var(--raised); }

.channel-body { flex: 1; min-width: 0; }
.channel strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.channel .meta {
  display: block;
  font-size: 12px;
  color: var(--ash-warm);
  font-family: var(--mono);
  margin-top: 2px;
}

/* Pastille de gauche : vide au repos, pleine quand le canal est écouté. */
.channel-mark {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
}

.channel[aria-pressed="true"] {
  background: rgba(109, 211, 57, .09);
  border-color: var(--lime);
}
.channel[aria-pressed="true"] .channel-mark {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 0 4px rgba(109, 211, 57, .18);
}
.channel[aria-pressed="true"] strong { color: var(--lime); }

/* Canal sans émetteur : dit pourquoi c'est silencieux, plutôt que de laisser
   croire à une panne. */
.channel .silent {
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ash);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- Bandeau d'état ---------- */
.now-playing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(109, 211, 57, .09);
  border: 1px solid rgba(109, 211, 57, .3);
  border-radius: 6px;
  margin-bottom: 18px;
}
.now-playing .label { font-size: 12px; color: var(--ash-warm); text-transform: uppercase; letter-spacing: .1em; }
.now-playing .value { font-size: 18px; font-weight: 700; color: var(--lime); }

.pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lime); flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(109, 211, 57, .5); }
  50% { opacity: .75; box-shadow: 0 0 0 6px rgba(109, 211, 57, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.status { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ash); flex-shrink: 0; }
.dot.live, .dot.ok { background: var(--lime); }
.dot.warn { background: var(--warn); }
.dot.bad  { background: var(--bad); }

/* ---------- Tables techniques ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td:first-child { color: var(--ash-warm); width: 45%; }
td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; }

/* Détails techniques repliés : présents pour qui les cherche, invisibles pour
   qui regarde le produit. */
details.tech { margin-top: 24px; }
details.tech > summary {
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ash);
  padding: 10px 0;
  list-style: none;
}
details.tech > summary::-webkit-details-marker { display: none; }
details.tech > summary::before { content: '▸ '; }
details.tech[open] > summary::before { content: '▾ '; }
details.tech > summary:hover { color: var(--ash-warm); }

.hint { font-size: 13px; color: var(--ash-warm); margin-top: 10px; line-height: 1.5; }
.err { color: #E58080; font-size: 14px; margin-top: 12px; min-height: 1em; }
.big { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 16px; }

/* ---------- QR code projetable ---------- */
.qr-block { text-align: center; padding: 24px; }
.qr-block img { margin: 0 auto 16px; background: #fff; padding: 12px; border-radius: 6px; }
.qr-code {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: .18em;
  color: var(--lime);
  font-weight: 500;
}
.qr-url { font-family: var(--mono); font-size: 13px; color: var(--ash-warm); margin-top: 8px; word-break: break-all; }

/* Plein écran : c'est ce qu'on projette sur un mur devant une salle.
   Le QR doit tenir ENTIEREMENT a l'ecran, texte compris — un code coupe ne se
   scanne pas, et on ne s'en apercoit qu'une fois devant le public. */
.qr-full {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ground);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px, 2vh, 22px);
  padding: clamp(12px, 3vh, 32px);
  overflow: hidden;
}
.qr-full img {
  width: min(46vh, 62vw);
  height: auto;
  padding: clamp(10px, 1.6vh, 20px);
  background: #fff;
  border-radius: 6px;
}
.qr-full > * { margin: 0; text-align: center; }
.qr-full .qr-code { font-size: clamp(24px, 5vh, 52px); letter-spacing: .14em; }
.qr-full .qr-session { font-size: clamp(18px, 3.4vh, 36px); font-weight: 700; letter-spacing: -.02em; }
.qr-full .qr-hint { color: var(--ash-warm); font-size: clamp(12px, 1.9vh, 19px); }

/* ---------- Vumètre ---------- */
.meter { height: 10px; background: var(--ground); border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .08s linear; }

/* ---------- Avertissements ---------- */
.secure-warning {
  border: 1px solid var(--warn);
  border-left: 4px solid var(--warn);
  background: rgba(224, 160, 58, .08);
  padding: 16px 18px;
  margin: 0 0 24px;
  border-radius: 4px;
  line-height: 1.5;
}
.secure-warning strong { display: block; margin-bottom: 8px; color: #F0C070; }
.secure-warning p { margin: 8px 0; color: #d8d2cb; font-size: 14px; }
.secure-warning-link {
  display: inline-block; margin: 4px 0 8px; padding: 12px 16px;
  background: var(--lime); color: #12210A; font-weight: 700;
  text-decoration: none; border-radius: 4px; word-break: break-all; font-size: 14px;
}
.secure-warning-note { font-size: 13px; color: var(--ash); }

.wake { font-size: 13px; font-family: var(--mono); }
.wake.ok { color: var(--lime); }
.wake.warn { color: var(--warn); }

.hint-lock {
  border-left: 3px solid var(--warn);
  padding: 10px 0 10px 12px;
  margin: 14px 0;
  color: #d8d2cb;
  font-size: 14px;
  line-height: 1.5;
}
.hint-lock strong { color: #F0C070; }

a { color: var(--lime); }

/* Compteur d'auditeurs sur un canal, cote organisateur. */
.listener-count {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--lime);
  min-width: 40px;
  text-align: right;
}
.channel:not([aria-pressed="true"]) .listener-count { color: var(--ash); }

/* Retrait d'un canal avant demarrage. */
.ch-del {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
  background: transparent;
  border-color: var(--line-2);
  color: var(--ash-warm);
}
.ch-del:hover { color: #E58080; border-color: rgba(224, 85, 85, .5); }