/* Composants d'interface communs à toutes les pages du hub.
   Complète theme.css (jetons) — règle d'or : l'ombre dure = cliquable. */

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

/* ---------- Logotype (toujours deux lignes, centré) ---------- */
.logotype {
  display: inline-block; font-family: Anton, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  color: var(--text); line-height: .95; /* noir d'encre — décision 2026-07-23 */
}
.logotype .ligne { display: block; }
.logotype .lbomb {
  height: 1.08em; width: auto; margin: 0 .055em; vertical-align: baseline;
  transform: scaleX(1.18); transform-origin: center bottom; filter: grayscale(1);
}

/* ---------- Boutons ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: 12px 20px; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 2px solid var(--text); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--text); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn[disabled] {
  border-style: dashed; box-shadow: none; color: var(--muted);
  cursor: not-allowed; transform: none;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-small { padding: 8px 14px; font-size: .9rem; }

/* ---------- États vides : la tête + une phrase neutre ---------- */
.etat-vide { text-align: center; padding: 32px 16px; }
.etat-vide img { width: 96px; height: auto; }
.etat-vide p { color: var(--muted); margin-top: 8px; }
.etat-vide .btn { margin-top: 16px; }

/* Un contenu qui charge le dit : une zone vide en attente se lit sinon
   comme une zone vide tout court. */
.etat-chargement { color: var(--muted); text-align: center; padding: 32px 16px; }