/* ════════════════════════════════════════════════════════════════════ PLB — Modèle de menu / barre de navigation profil Partagé par : activity.html · agenda.html · network.html · offres.html (les variables --surface / --border / --muted ont un fallback intégré pour rester cohérentes quelle que soit la page) ════════════════════════════════════════════════════════════════════ */ .site-header { /* Fond fixe (navy + flou) pour un volet IDENTIQUE sur les 4 pages, quelle que soit la palette du . */ background: rgba(10,15,30,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.09); padding: 0 2rem; display: flex; align-items: center; gap: .55rem; height: 66px; position: sticky; top: 0; z-index: 100; } /* ── Logo « PasseLaBalle » ────────────────────────────────────────── */ .site-header .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: .35rem; } .site-header .brand img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; } .site-header .brand-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.3px; } /* ── Séparateurs · (un seul › après le logo, géré dans le HTML) ────── */ .sep { color: rgba(255,255,255,.22); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: .85rem; user-select: none; } /* ── Catégories (onglets) ─────────────────────────────────────────── */ /* Police fixée ici pour que le menu soit identique sur toutes les pages, quelle que soit la font du (Readex Pro sur offres, system ailleurs). */ .nav-cat { display: inline-flex; align-items: center; padding: .36rem .72rem; border-radius: 9px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: .9rem; font-weight: 600; line-height: 1; color: rgba(255,255,255,.62); text-decoration: none; transition: background .15s, color .15s, box-shadow .15s; } .nav-cat:hover { color: #fff; background: rgba(255,255,255,.06); } /* Catégorie active = page courante */ .nav-cat.is-active { color: #fff; background: rgba(61,214,196,.12); box-shadow: inset 0 0 0 1px rgba(61,214,196,.4); } /* ── Zone outils à droite (sélecteur joueur, déconnexion, etc.) ───── */ .nav-tools { margin-left: auto; display: flex; align-items: center; gap: .6rem; } /* ════════════════════════════════════════════════════════════════════ Volet profil (hero) — IDENTIQUE sur activity / agenda / network (avatar, nom, sous-titre). Les éléments spécifiques à chaque page — .hero-badges, .hero-chips, .sync-btn — restent dans la page. ════════════════════════════════════════════════════════════════════ */ .hero { background: linear-gradient(135deg, #161b22 0%, #0d1117 100%); border-bottom: 1px solid var(--border, #30363d); padding: 2rem; } .hero-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--teal, #3DD6C4), var(--violet, #4B39EF)); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .hero-info h1 { font-size: 1.5rem; font-weight: 700; } .hero-info .sub { color: var(--muted, #8b949e); font-size: 0.85rem; margin-top: 0.2rem; } @media (max-width: 600px) { .hero { padding: 1.3rem 1rem; } .avatar { width: 56px; height: 56px; font-size: 1.5rem; } .hero-info h1 { font-size: 1.3rem; } } /* ── Mobile : barre compacte, tous les onglets visibles sans défilement ─ On masque le texte « PasseLaBalle » (le logo suffit) et les séparateurs, on resserre les onglets, et on autorise le passage sur 2 lignes pour que rien ne soit jamais coupé (pas de scroll horizontal). */ @media (max-width: 600px) { .site-header { padding: .5rem .7rem; height: auto; min-height: 56px; gap: .3rem .35rem; flex-wrap: wrap; } .site-header .brand { margin-right: .1rem; } .site-header .brand img { width: 30px; height: 30px; } .site-header .brand-name { display: none; } .sep { display: none; } .nav-cat { padding: .3rem .55rem; font-size: .82rem; } }