/* Connexion par code Jellyfin (Quick Connect) : le séparateur « ou », le bouton et le grand code. Variables des thèmes. */
.connexion-ou { display: flex; align-items: center; gap: 12px; color: var(--pale); font-size: .8rem; margin: 4px 0; }
.connexion-ou::before, .connexion-ou::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.connexion-code { display: grid; justify-items: center; gap: 1px; width: 100%; line-height: 1.2; }
.connexion-code small { font-size: .74rem; font-weight: 500; color: var(--doux); }
#panneau-code { display: grid; gap: 10px; text-align: center; }
#panneau-code .connexion-aide { text-align: left; }
.code-qc { display: block; margin: 6px auto 2px; padding: 14px 18px; min-width: 240px; border-radius: 16px; font: 800 2.4rem var(--titre);
  letter-spacing: .32em; text-indent: .32em; font-variant-numeric: tabular-nums; color: var(--encre);
  background: rgba(var(--lueur), .1); border: 1px solid rgba(var(--lueur), .5); box-shadow: 0 0 40px -12px rgba(var(--lueur), .9); }
.code-qc.attente { color: var(--pale); box-shadow: none; }
#panneau-code .petit { font-size: .76rem; margin: 0; }
@media (max-width: 420px) { .code-qc { min-width: 0; font-size: 2rem; letter-spacing: .22em; text-indent: .22em; } }