:root {
  --fond: #f5f6f8;
  --carte: #ffffff;
  --texte: #1c2330;
  --discret: #5b6575;
  --bord: #d9dde4;
  --accent: #1f5fd1;
  --accent-texte: #ffffff;
  --danger: #b3261e;
  --ok: #1a7f45;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #11151c;
    --carte: #1a202b;
    --texte: #e8ecf3;
    --discret: #9aa5b8;
    --bord: #2d3646;
    --accent: #6ea0ff;
    --accent-texte: #0b1220;
    --danger: #ff8a80;
    --ok: #5fd08e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bord);
  background: var(--carte);
}

.entete h1 { margin: 0; font-size: 1.15rem; }
.compte { color: var(--discret); font-size: .9rem; }
a { color: var(--accent); }

main {
  display: grid;
  gap: 1rem;
  max-width: 56rem;
  margin: 1rem auto;
  padding: 0 1rem;
}

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
}

.carte h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.aide { color: var(--discret); font-size: .9rem; margin: .25rem 0 .75rem; }

form { display: grid; gap: .75rem; }
label { display: grid; gap: .25rem; font-size: .9rem; }
label.case { display: flex; gap: .5rem; align-items: flex-start; }

input:not([type="checkbox"]) {
  padding: .6rem .75rem;
  font: inherit;
  color: inherit;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: .5rem;
}

button {
  padding: .6rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-texte);
  background: var(--accent);
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
}

button.secondaire { color: var(--texte); background: transparent; border: 1px solid var(--bord); }
button.danger { background: var(--danger); color: #fff; }
button:disabled { opacity: .5; cursor: default; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--bord);
  border-radius: .5rem;
}

.liste .nom { font-weight: 600; }
.liste .detail { color: var(--discret); font-size: .85rem; }
.liste .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.point { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; background: var(--discret); }
.point.en-ligne { background: var(--ok); }

details { margin-top: 1rem; }
summary { cursor: pointer; font-weight: 600; }
.billet { padding: .75rem; background: var(--fond); border: 1px solid var(--bord); border-radius: .5rem; white-space: pre-wrap; word-break: break-all; user-select: all; }

dialog { max-width: 24rem; border: 1px solid var(--bord); border-radius: .75rem; background: var(--carte); color: var(--texte); }
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog menu { display: flex; gap: .5rem; justify-content: flex-end; margin: 0; padding: 0; }

.message { max-width: 56rem; margin: 1rem auto; padding: .75rem 1rem; border-radius: .5rem; border: 1px solid var(--danger); color: var(--danger); background: var(--carte); }
.message.info { border-color: var(--bord); color: var(--texte); }

#session { display: grid; grid-template-rows: auto 1fr; height: calc(100vh - 3.2rem); }
#session[hidden] { display: none; }
.barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; background: var(--carte); border-bottom: 1px solid var(--bord); }
#ecran { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; outline: none; touch-action: none; }