/* Theme de pczone2000.com : memes couleurs, police et formes que le site. */
@font-face {
  font-family: "Raleway";
  src: url("raleway.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root { color-scheme: light; --bleu: #2f6cb0; --bleu-fonce: #235189; --marine: #062536; --encre: #1c2733; --doux: #4a5565; --ligne: #e3e8ef; --doux-fond: #f3f6fa; --danger: #b3261e; --ok: #2e7d32; --rayon: 20px; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #fff; color: var(--encre); font: 400 17px/1.5 "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }

.entete { display: flex; align-items: center; gap: 12px; padding: 10px max(16px, calc((100% - 1040px) / 2)); background: #fff; border-bottom: 1px solid var(--ligne); }
.entete img { height: 44px; width: auto; }
.entete .marque { flex: 1; min-width: 0; font-weight: 700; color: var(--marine); }
main { max-width: 1040px; margin: 0 auto; padding: 32px 16px; }
.surtitre { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.8px; color: var(--marine); }
#message { color: var(--danger); min-height: 24px; margin: 8px 0 12px; }

button:not(.iso) { font: 700 15px/1.2 inherit; font-family: inherit; padding: 9px 18px; color: var(--marine); background: #fff; border: 1px solid var(--marine); border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
button:not(.iso):hover:not(:disabled) { color: #fff; background: var(--marine); }
button.principal { color: #fff; background: var(--bleu); border-color: var(--bleu); }
button.principal:hover:not(:disabled) { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
button.danger:hover:not(:disabled) { background: #8c1d18; border-color: #8c1d18; }
button:disabled { opacity: .6; cursor: progress; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
input, select { font: inherit; color: inherit; background: #fff; border: 1px solid var(--ligne); border-radius: 10px; }
input { width: 100%; padding: 11px 14px; }

#session { display: flex; flex-direction: column; height: 100%; }
#barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--ligne); }
#barre img { height: 32px; width: auto; }
#barre strong { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--marine); }
#barre label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--doux); }
#barre select { padding: 5px 8px; font-size: 14px; }
#cadre { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
/* Avec un zoom, la VM a une definition plus basse et le navigateur l'agrandit. */
#ecran { position: absolute; top: 0; left: 0; width: calc(100% / var(--zoom, 1)); height: calc(100% / var(--zoom, 1)); border: 0; background: #000; transform: scale(var(--zoom, 1)); transform-origin: 0 0; }