/* En-tête unifié Zikof (shared/js/zikof-header.js) porté dans la charte Zikof Pronos.
   ────────────────────────────────────────────────────────────────────────────
   Pourquoi ce fichier existe : le header unifié se colore avec des variables
   CSS (--ink, --sh, --surf…). Nos pages Pronos déclarent --ink (noir encre) et
   --sh (ombre dure) pour la charte papier ; sans cette re-déclaration, le titre
   du header héritait du noir encre et s'affichait noir sur noir.
   On rétablit donc ici la palette du header — barre noire, texte papier, accent
   jaune — pour qu'il s'accorde au reste de la page. */
.zkh-bar {
  --surf: #17150f;
  --surf-2: #221f18;
  --line: #fffdf7;
  --ink: #fffdf7;
  --soft: #cfc7b4;
  --yellow: #ffce3a;
  --on-yellow: #17150f;
  --radius-full: 999px;
  --radius-md: 8px;
  --border-w: 2px;
  --font: 'Hanken Grotesk', system-ui, sans-serif;
  --font-display: 'Anton', Impact, sans-serif;
  --fast: .12s;
  --sh: 2px 2px 0 #fffdf7;
  --shadow-hard-sm: 2px 2px 0 #fffdf7;
  background: #17150f;
  border-bottom: 3px solid #17150f;
}

/* Écrans serrés : le nom du jeu cède la place aux actions (profil, aide). */
@media (max-width: 560px) {
  .zkh-bar { padding: 8px 10px; gap: 7px; }
  .zkh-back-label { display: none; }
  .zkh-title { font-size: .95rem; }
  .zkh-status { max-width: 96px; font-size: .72rem; padding: 4px 8px; }
  .zkh-profile { width: 34px; height: 34px; }
}

/* ── Indicateur visuel d'état de connexion SANS CLIQUER ── */
.zkh-profile {
  position: relative !important;
}

/* 1. Cas DÉCONNECTÉ (Mode invité) */
.zkh-bar.is-guest .zkh-profile {
  border-color: rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.06) !important;
  color: #a8a29e !important;
}
/* Petit badge cadenas / déconnecté discret sur l'avatar */
.zkh-bar.is-guest .zkh-profile::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #f59e0b; /* Ambre = invité / attention */
  border: 2px solid #17150f;
  border-radius: 50%;
}

/* Bouton explicite "Connexion" sur la barre */
.zkh-btn-login {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card, #ffce3a);
  color: var(--ink, #17150f);
  font-family: 'Anton', sans-serif;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
  border: 2px solid var(--ink, #17150f);
  box-shadow: 2px 2px 0 var(--ink, #17150f);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .05s;
}
.zkh-btn-login:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }

/* 2. Cas CONNECTÉ */
.zkh-bar.is-auth .zkh-profile {
  border-color: #22c55e !important;
  background: rgba(34,197,94,.15) !important;
  color: #fff !important;
}
/* Point vert connecté 🟢 */
.zkh-bar.is-auth .zkh-profile::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #22c55e; /* Vert éclatant = En ligne / connecté */
  border: 2px solid #17150f;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(34,197,94,.8);
}

.zkh-bar.is-auth .zkh-status {
  display: inline-flex !important; /* Visible même sur mobile ! */
  align-items: center;
  gap: 5px;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.4);
  color: #86efac !important;
  font-weight: 800 !important;
  font-size: .75rem !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
}
.zkh-bar.is-auth .zkh-status::before {
  content: '';
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 5px #22c55e;
}

/* ── Géométrie des pastilles d'état (les deux pointes étaient posées à gauche
   à cause d'un `right` hérité) et badge « 0 » parasite ── */
.zkh-bar.is-guest .zkh-profile::after,
.zkh-bar.is-auth .zkh-profile::after {
  left: auto !important;
  right: -3px !important;
  top: -3px !important;
  bottom: auto !important;
  width: 11px;
  height: 11px;
}

/* Le compteur de badges du header porte l'attribut `hidden`, mais sa feuille
   force `display:flex` : un « 0 » jaune restait affiché en permanence, à côté
   d'un bouton « Connexion ». On rétablit le masquage tant qu'on est invité. */
.zkh-bar.is-guest .zkh-badge-count {
  display: none !important;
}

/* Sur très petit écran, le bouton Connexion se réduit à son pictogramme. */
@media (max-width: 400px) {
  .zkh-btn-login { padding: 5px 8px; font-size: .7rem; }
}

/* ── ÉTAT DE CONNEXION VISIBLE SUR MOBILE (au 15/09) ──────────────────────────
   shared/css/zikof-header.css masque .zkh-status sous 720 px. Conséquence : sur
   téléphone, un joueur ne voit ni « Mode invité » ni son pseudo — il ne lui reste
   qu'un bouton « Connexion » qui, si le portail le connaît déjà, le renvoie ici.
   D'où l'impression de boucler. On réaffiche l'état, en version compacte. */
@media (max-width: 720px) {
  .zkh-bar .zkh-status {
    display: inline-block !important;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
    padding: 5px 6px;
  }
}
.zkh-bar.is-auth .zkh-status { color: #ffd84d; font-weight: 800; }