/* ═══════════════════════════════════════════════════════════
   Barre de navigation commune aux trois sites
   ═══════════════════════════════════════════════════════════

   Source de vérité, comme tokens.css : caenhackyou.fr porte la marque
   mère, les deux autres dépôts en gardent une copie que leur chaîne
   d'intégration compare à l'original.

   Le balisage, lui, n'est pas partagé : chaque site l'écrit dans sa
   technologie (HTML statique, gabarit Jinja, composant React). Seules
   les classes et l'apparence sont communes — c'est ce qui permet à
   chacun de rester autonome sans que le rendu diverge.

   Dépend de tokens.css, à charger avant.
   ─────────────────────────────────────────────────────── */

.chy-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: rgb(0 0 0 / 0.85);
    /* Le flou laisse deviner le contenu qui défile dessous sans le rendre
       illisible : la barre reste présente sans masquer la page. */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--chy-line);
    font-family: var(--chy-font);
}

/* ── Marque ────────────────────────────────────────────────
   Le dégradé identifie la maison ; le nom du site reste en retrait,
   parce que c'est une déclinaison et non une marque concurrente. */
.chy-nav__marque {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    text-decoration: none;
    white-space: nowrap;
}

.chy-nav__nom {
    background: linear-gradient(135deg, var(--chy-cyan), #fff, var(--chy-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.chy-nav__site {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--chy-text-dim);
}

/* ── Liens ─────────────────────────────────────────────────  */
.chy-nav__liens {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    /* Sur mobile, les liens défilent plutôt que de passer à la ligne :
       une barre qui grandit en hauteur pousse tout le contenu. */
    scrollbar-width: none;
}
.chy-nav__liens::-webkit-scrollbar { display: none; }

.chy-nav__lien {
    color: var(--chy-text-dim);
    text-decoration: none;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: color 0.15s;
}

.chy-nav__lien:hover { color: var(--chy-cyan); }

/* Le site courant est signalé par un filet, pas par une couleur seule :
   la couleur seule est invisible pour une partie des utilisateurs. */
.chy-nav__lien[aria-current="page"],
.chy-nav__lien--actif {
    color: var(--chy-text);
    border-bottom: 1px solid var(--chy-cyan);
    padding-bottom: 2px;
}

/* ── Zone compte ───────────────────────────────────────────  */
.chy-nav__compte {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.chy-nav__connexion {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--chy-line-2);
    color: var(--chy-text-dim);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    transition: all 0.15s;
}

.chy-nav__connexion:hover {
    border-color: var(--chy-cyan);
    color: var(--chy-cyan);
    box-shadow: var(--chy-glow);
}

.chy-nav__avatar {
    width: 24px;
    height: 24px;
    border: 1px solid var(--chy-line-2);
    object-fit: cover;
}

.chy-nav__pseudo {
    font-size: 0.78rem;
    color: var(--chy-text);
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Étroit ────────────────────────────────────────────────  */
@media (max-width: 640px) {
    .chy-nav { gap: 0.9rem; padding: 0.6rem 0.8rem; }
    .chy-nav__site { display: none; }
    .chy-nav__pseudo { display: none; }
}