/* ════════════════════════════════════════════════════════ ZIKOF HEADER — header unifié pour tous les jeux du portail Injecté dynamiquement par /shared/js/zikof-header.js Style « Pop / Memphis » (cf design.md §7 — migration Phase 2). Tokens de zikof-theme.css + fallbacks (marche sur jeux non migrés, s'adapte automatiquement clair/sombre). ════════════════════════════════════════════════════════ */ .zkh-bar { position: sticky; top: 0; z-index: 100; width: 100%; /* plein largeur même si le du jeu est en flex centré */ box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--surf, #241f33); border-bottom: var(--border-w, 2px) solid var(--line, #fbf2dd); font-family: var(--font, 'Hanken Grotesk', system-ui, sans-serif); color: var(--ink, #fbf2dd); } /* Back-link : pastille Pop (contour net + ombre dure, décalage au survol) */ .zkh-back { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: var(--radius-full, 999px); background: var(--surf-2, #2d2740); border: var(--border-w, 2px) solid var(--line, #fbf2dd); box-shadow: var(--shadow-hard-sm, 2px 2px 0 #000); color: inherit; font-size: 0.85rem; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: transform var(--fast, 140ms ease), box-shadow var(--fast, 140ms ease); } .zkh-back:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--sh, #000); } .zkh-back:active { transform: translate(0, 0); box-shadow: var(--shadow-hard-sm, 2px 2px 0 #000); } .zkh-back-label { margin-left: 5px; } /* Brand : icône + nom du jeu (font display, encre — PAS de dégradé-texte) */ .zkh-brand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: inherit; font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 800; letter-spacing: -0.02em; min-width: 0; } .zkh-brand:hover { opacity: 0.9; } .zkh-icon { border: var(--border-w, 2px) solid var(--line, #fbf2dd); box-shadow: var(--shadow-hard-sm, 2px 2px 0 #000); } .zkh-emoji { font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .zkh-title { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink, #fbf2dd); } /* Actions à droite : pastilles carrées Pop */ .zkh-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .zkh-actions > button, .zkh-actions > .zkh-profile { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--surf-2, #2d2740); border: var(--border-w, 2px) solid var(--line, #fbf2dd); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-hard-sm, 2px 2px 0 #000); cursor: pointer; font-size: 1rem; color: inherit; text-decoration: none; position: relative; transition: transform var(--fast, 140ms ease), box-shadow var(--fast, 140ms ease); } .zkh-actions > button:hover, .zkh-actions > .zkh-profile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--sh, #000); } .zkh-actions > button:active, .zkh-actions > .zkh-profile:active { transform: translate(0, 0); box-shadow: var(--shadow-hard-sm, 2px 2px 0 #000); } /* Badge count sur l'avatar profil : pastille jaune pop */ .zkh-badge-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--yellow, #ffd23f); color: var(--on-yellow, #1a1a1a); font-size: 0.64rem; font-weight: 800; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line, #fbf2dd); } /* Statut (Mode invité / connecté) */ .zkh-status { font-size: 0.8rem; font-weight: 600; color: var(--soft, #b9b3c9); padding: 5px 11px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; border-radius: var(--radius-full, 999px); cursor: pointer; display: inline-block; transition: color var(--fast, 140ms ease); } .zkh-status:hover { color: var(--ink, #fbf2dd); } .zkh-status.logged-in, .zkh-status.is-logged { color: var(--ink, #fbf2dd); font-weight: 700; } /* Favoris : patch contraste (étoile injectée dans le header) */ [data-theme="light"] .zikof-fav-btn:not(.is-favorite) { background: var(--surf-2); color: #8a5e00; } /* Mobile : compact — évite que les icônes se chevauchent quand le header est chargé (langue + pastille XP + profil + aide + thème). */ @media (max-width: 600px) { .zkh-bar { padding: 8px 9px; gap: 6px; flex-wrap: nowrap; } .zkh-back { padding: 7px 10px; font-size: 0.8rem; } .zkh-back-label { display: none; } .zkh-brand { gap: 6px; } .zkh-title { font-size: 0.95rem; } .zkh-status { display: none; } .zkh-actions { gap: 5px; min-width: 0; flex-shrink: 0; } .zkh-actions > button, .zkh-actions > .zkh-profile { width: 34px; height: 34px; font-size: 0.95rem; } /* Sélecteur de langue : on supprime la marge latérale (gérée par le gap du flex) */ .zkh-actions #langSwitcherHost, .zkh-actions .zikof-lang-switcher { margin: 0 !important; } /* Pastille XP : on garde 🌱 + niveau, on masque le « N XP » (récupère ~40px) */ .zkh-actions .zikof-xp-pill { padding: 4px 7px; } .zkh-actions .zikof-xp-pill > span:last-child { display: none; } } /* Petits écrans : on libère le centre — l'icône du jeu suffit à identifier le contexte */ @media (max-width: 440px) { .zkh-brand .zkh-emoji { display: none; } .zkh-title { display: none; } .zkh-actions > button, .zkh-actions > .zkh-profile { width: 32px; height: 32px; } } /* Masque automatiquement les anciens headers quand le nouveau est présent */ body.zkh-installed .game-header:not(.zkh-bar), body.zkh-installed .main-header:not(.zkh-bar), body.zkh-installed .lp-header:not(.zkh-bar), body.zkh-installed .zo-header:not(.zkh-bar), body.zkh-installed .ad-header:not(.zkh-bar), body.zkh-installed .top-ui:not(.zkh-bar), body.zkh-installed .floating-back { display: none !important; } /* ── Zone tactile des commandes ────────────────────────────────────────────── Mesuré le 2026-08-20 sur dix jeux : profil et aide tombent à 32 × 32 px sous 440 px de large, le retour à 36 × 38 — contre 44 px recommandés au doigt. On n'agrandit PAS les pastilles : la réduction est délibérée, sans elle les cinq commandes (langue, XP, profil, aide, thème) se chevauchent, comme le dit le commentaire du bloc responsive ci-dessus. On étend la zone SENSIBLE autour, par un pseudo-élément transparent, en laissant le dessin intact. L'extension est asymétrique, et c'est voulu : verticalement la barre a de la marge (padding 8px), donc +6px de chaque côté portent la cible de 32 à 44px. Horizontalement l'écart entre deux pastilles n'est que de 5px : on se limite à +2px par côté, sinon les zones voisines se recouvriraient et un appui entre deux boutons deviendrait imprévisible. */ .zkh-actions > button, .zkh-actions > .zkh-profile, .zkh-back{ position: relative; } .zkh-actions > button::after, .zkh-actions > .zkh-profile::after, .zkh-back::after{ content: ''; position: absolute; inset: -6px -2px; /* Purement tactile : aucun trait, aucune couleur, et sous le contenu pour ne jamais masquer une icône ou un badge de notification. */ z-index: -1; }