/* Site des jeux de speuz — le peu de style qui lui est propre.
 *
 * Tout le reste vient des feuilles du superviseur (style.css, theme.css,
 * jeux.css), publiees telles quelles : les pages de jeu sont les memes des
 * deux cotes, et une deuxieme identite visuelle serait deux fois a tenir.
 * Ne sont definies ici que les classes que seul l'onglet Serveur emploie.
 */

/* Deux colonnes tant que la place le permet : l'etat a gauche, les actions a
   droite. Sous 900 px elles s'empilent — un telephone lit une colonne. */
.jx-grille-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

/* Barre de boutons d'action. Le retour a la ligne est voulu : sept boutons
   sur un ecran etroit doivent s'empiler, jamais deborder. */
.jx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}

/* Un serveur deja actif garde son bouton « Démarrer » visible mais efface :
   le faire disparaitre ferait sauter les autres boutons d'un rendu a l'autre,
   et on cliquerait sur « Arrêter » en visant « Démarrer ». */
.bouton.off {
  opacity: .45;
}

/* Journal et console de tache. La hauteur est plafonnee et le defilement
   interne : 500 lignes de journal ne doivent pas allonger la page. */
.jx-journal {
  max-height: 340px;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  background: var(--creux);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  font-family: var(--fm);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--texte-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* L'etat d'une tache en cours, au-dessus de sa console. */
.jx-tache-etat {
  font-size: 12px;
  color: var(--texte-2);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.jx-tache-etat.bon     { color: var(--ok); }
.jx-tache-etat.mauvais { color: var(--crit); }

/* Un paragraphe d'avertissement dans une modale destructrice. */
.modale p.mauvais {
  color: var(--crit);
}

/* Les modales de ce site posent des champs de saisie : la largeur par defaut
   d'un `input` ne remplit pas la boite. */
.modale .saisie {
  width: 100%;
  margin: 6px 0 4px;
}

/* ═══ En-tete masquee et commandes de session au rail ══════════════════════
 *
 * Demande explicite : sur une page de jeu, la barre du haut disparait pour
 * rendre ses 58 px au contenu, et le theme et la deconnexion descendent en bas
 * du rail. La regle est conditionnee a `[data-vue^="jeu-"]` plutot que posee
 * sur `header` tout court : aujourd'hui toutes les vues de ce site sont des
 * jeux, donc l'effet est le meme — mais le jour ou une vue qui n'en est pas un
 * entre au rail, elle retrouve sa barre sans qu'on ait a y repenser.
 *
 * Le nom du jeu n'est pas perdu : il est dans l'entree active du rail, et
 * site.js le pose aussi dans le titre de l'onglet du navigateur.
 */
body[data-vue^="jeu-"] header { display: none; }

/* Les quatre commandes, en colonne. `nav` porte `flex:1` dans style.css :
   ce bloc et le pied sont donc plaques en bas sans qu'on ait rien a caler. */
.rail-outils {
  border-top: 1px solid var(--bord);
  padding: 10px;
  display: grid;
  gap: 6px;
}
.rail-outils .bouton {
  width: 100%;
  justify-content: flex-start;
}
/* La pastille de session n'est pas un bouton : elle n'est pas cliquable et ne
   doit pas s'offrir comme telle. */
.rail-outils #session {
  justify-content: center;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: default;
}
/* Fermer la session est la seule action irreversible du rail. Elle ne prend
   pas l'accent du jeu au survol, mais la couleur d'alerte. */
#quitter:hover:not(:disabled) {
  border-color: var(--crit);
  color: var(--crit);
  background: var(--crit-fond);
}
#quitter:disabled { opacity: .45; }

/* Rail etroit (le meme seuil que style.css) : on garde les quatre commandes et
   on ne montre que leurs icones — meme parti que `nav a span`. Les masquer
   entierement, comme le fait `.pied`, rendrait le theme et la deconnexion
   INATTEIGNABLES sur un ecran etroit, alors qu'ils n'ont plus d'autre acces
   depuis que l'en-tete a disparu. */
@media (max-width: 940px) {
  .rail-outils { padding: 8px 6px; }
  .rail-outils span:not(.point) { display: none; }
  .rail-outils .bouton { justify-content: center; padding: 7px 0; }
  .rail-outils #session { padding: 6px 0; }
}