/* Charte commune au hub et à l'application distante, alignée sur le site scorio.fr.
   Ne contient que des jetons et des contrôles génériques : le tableau de score est dans
   scoreboard.css, la console arbitre et le formulaire de match dans controls.css, et chaque hôte
   garde ses styles de page. Aucun nom de classe n'est inventé ici — uniquement l'apparence. */

:root {
  --fond:         #0B1D0F;  /* vert très sombre, fond général */
  --fond-2:       #101610;  /* barres et zones secondaires */
  --surface:      #14171C;  /* cartes, champs, cellules du tableau de score */
  --surface-haut: #1A1F26;  /* survol d'une surface */
  --bordure:      #2A3327;
  --bordure-vive: #3D4A38;

  --texte:        #F5F7F2;
  --texte-doux:   #A9B5A2;
  --texte-faible: #77856F;

  --accent:       #D8FF3E;  /* jaune-vert balle de tennis : action principale */
  --accent-fonce: #B8E01A;
  --or:           #FFD60A;  /* les points, au tableau de score */
  --vert:         #1B5E20;  /* le set en cours */
  --vert-vif:     #2E7D32;  /* joueur A */
  --bleu:         #1565C0;  /* joueur B */
  --rouge:        #B71C1C;  /* annuler, révoquer */

  --rayon:    12px;
  --rayon-l:  16px;
  --pilule:   999px;

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-fonce); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- En-tête de l'application distante ---------- */
/* Repris du site : barre collante, fond translucide, liens discrets, action principale en pilule. */
nav.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  padding: 0 20px; min-height: 64px;
  background: rgba(11, 29, 15, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}
nav.top .marque { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
nav.top .marque img { height: 28px; width: auto; display: block; }
nav.top a { color: var(--texte-doux); text-decoration: none; font-size: .95rem; font-weight: 600; }
nav.top a:hover { color: var(--texte); }
nav.top .marque:hover { opacity: .85; }
nav.top .spacer { flex: 1; }
nav.top form { display: inline; margin: 0; }
nav.top .hint { font-size: .88rem; color: var(--texte-faible); }

/* L'action principale de la barre : même pilule que le bouton « Ouvrir l'application » du site. */
nav.top a.bouton-nav {
  background: var(--accent); color: var(--fond);
  padding: 9px 18px; border-radius: var(--pilule);
  font-weight: 700; font-size: .92rem; white-space: nowrap;
}
nav.top a.bouton-nav:hover { background: var(--accent-fonce); color: var(--fond); }

/* Dans la barre, « Se déconnecter » est une action mineure : elle se fond parmi les liens plutôt
   que de concurrencer l'action principale. */
nav.top button.secondary {
  background: transparent; border: none; padding: 6px 2px;
  font-size: .95rem; font-weight: 600; color: var(--texte-doux);
}
nav.top button.secondary:hover:not(:disabled) { color: var(--texte); transform: none; }

/* ---------- Contenu ---------- */
main { max-width: 860px; margin: 0 auto; padding: 36px 20px 64px; }

/* ---------- Boutons ---------- */
/* Pilule, comme sur le site. L'action principale porte l'accent ; le reste est plus discret. */
button, .bouton {
  font-family: inherit; font-size: 1rem; font-weight: 700;
  padding: 11px 22px; border: 2px solid transparent; border-radius: var(--pilule);
  background: var(--accent); color: var(--fond);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
button:hover:not(:disabled) { background: var(--accent-fonce); transform: translateY(-1px); }
button.secondary {
  background: transparent; border-color: var(--bordure); color: var(--texte);
}
button.secondary:hover:not(:disabled) { background: transparent; border-color: var(--accent); }
button.danger { background: var(--rouge); color: var(--texte); }
button.danger:hover:not(:disabled) { background: #d32f2f; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Formulaires ---------- */
label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; font-size: .92rem; color: var(--texte-doux); font-weight: 600; }
input, select, textarea {
  font-family: inherit; font-size: 1rem;
  padding: 11px 13px; border-radius: var(--rayon);
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure);
}
input:hover, select:hover { border-color: var(--bordure-vive); }
input::placeholder { color: var(--texte-faible); }

/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--bordure); }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-faible); font-weight: 700; }

/* ---------- Messages et pastilles ---------- */
.error, .validation-message { color: #FF8A80; }
.hint { color: var(--texte-faible); font-size: .9rem; }
.badge {
  display: inline-block; padding: 4px 11px; border-radius: var(--pilule);
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.badge.online  { background: rgba(216,255,62,.15); color: var(--accent); }
.badge.offline { background: rgba(169,181,162,.12); color: var(--texte-doux); }
.badge.revoked { background: rgba(183,28,28,.2); color: #FF8A80; }

.waiting { text-align: center; font-size: 1.8rem; color: var(--texte-doux); padding-top: 4rem; }