/* ========== BARRE DE NAVIGATION : tailles et espacements communs ==========
   Chargé par base.html APRÈS la feuille de style de la page : la barre a la même police,
   les mêmes tailles et les mêmes espacements partout (référence : la page d'accueil).
   Volontairement AUCUNE couleur ni AUCUN fond ici : chaque page garde les siens
   (ex. les fonds noirs de certaines pages du wiki).
   Les tailles sont en px pour ne pas dépendre de la taille de texte de la page. */

nav.navbar {
    padding-top: 8px;
    padding-bottom: 8px;
    /* !important : la classe Bootstrap px-3 du template est en rem, donc varie avec la page */
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* Épaisseur seulement (admin.css la met à 4px avec !important) ; la couleur reste celle de la page */
    border-bottom-width: 1px !important;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
}

nav.navbar .navbar-brand {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    padding: 5px 0;
}

nav.navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin: 0;
}

nav.navbar .navbar-nav .nav-link {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    padding: 6px 8px;
}

nav.navbar .navbar-nav .nav-user-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Taille de l'avatar : !important car admin.css la force déjà ; la couleur de la bordure reste celle de la page */
nav.navbar .nav-avatar {
    box-sizing: border-box;
    width: 24px !important;
    height: 24px !important;
    border-width: 2px !important;
}

/* ========== Compteurs et cloche des notifications ==========
   Exception à la règle « aucune couleur » : un compteur doit se voir sur tous les fonds.
   Style rétro : afficheur ambré façon tableau de bord des années 80 (police VT323). */
nav.navbar .nav-compteur {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 5px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 17px;
    line-height: 18px;
    text-align: center;
    vertical-align: 1px;
    color: #ffb000;
    background: #1a1206;
    border: 1px solid #6b4a12;
    border-radius: 2px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8), 0 0 4px rgba(255, 176, 0, 0.35);
    text-shadow: 0 0 4px rgba(255, 176, 0, 0.8);
}
nav.navbar .nav-compteur[hidden] { display: none; }

/* ========== Disposition : navigation à gauche, outils et compte à droite ========== */
nav.navbar .nav-principale { margin-left: 24px; }
nav.navbar .nav-outils { margin-left: auto; }
nav.navbar .nav-principale .nav-link.actif {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Icônes (recherche, messages, cloche) : le libellé ne s'affiche que dans le menu replié */
nav.navbar .nav-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
nav.navbar .nav-icone .nav-libelle { display: none; }
nav.navbar .nav-icone .nav-compteur {
    position: absolute;
    top: -2px;
    right: -8px;
    margin: 0;
}
nav.navbar .nav-cloche .fa-bell { transform-origin: 50% 10%; }

/* Inscription : seul bouton plein de la barre */
nav.navbar .nav-inscription {
    border: 1px solid currentColor;
    border-radius: 2px;
}

/* Menu du compte : une fiche de papier, comme le reste du site */
nav.navbar .nav-user-link.dropdown-toggle::after { margin-left: 2px; vertical-align: 2px; }
nav.navbar .nav-menu-compte {
    min-width: 210px;
    padding: 6px 0;
    background: #f3e6b8;
    border: 2px solid #5c4636;
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(60, 40, 20, 0.35);
    font-family: Arial, sans-serif;
    font-size: 15px;
}
nav.navbar .nav-menu-compte .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    color: #3a2a1a;
}
nav.navbar .nav-menu-compte .dropdown-item i { width: 16px; text-align: center; color: #6b5344; }
nav.navbar .nav-menu-compte .dropdown-item:hover,
nav.navbar .nav-menu-compte .dropdown-item:focus { background: #5c4636; color: #fffde7; }
nav.navbar .nav-menu-compte .dropdown-item:hover i,
nav.navbar .nav-menu-compte .dropdown-item:focus i { color: #ffb000; }
nav.navbar .nav-menu-compte .nav-menu-panel,
nav.navbar .nav-menu-compte .nav-menu-panel i { color: #8b2020; font-weight: bold; }
nav.navbar .nav-menu-compte .dropdown-divider { margin: 4px 0; border-top: 1px dashed #8a6a30; opacity: 1; }

/* Quelque chose à lire : le voyant clignote doucement, comme une lampe témoin */
nav.navbar .nav-cloche.a-lire .nav-compteur { animation: nav-voyant 2.4s steps(1) infinite; }
nav.navbar .nav-cloche.sonne .fa-bell { animation: nav-sonnerie 0.9s ease-in-out; }

@keyframes nav-voyant {
    0%, 70% { color: #ffb000; text-shadow: 0 0 4px rgba(255, 176, 0, 0.8); }
    71%, 100% { color: #7a5200; text-shadow: none; }
}
@keyframes nav-sonnerie {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(18deg); }
    30% { transform: rotate(-16deg); }
    45% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
    nav.navbar .nav-cloche.a-lire .nav-compteur,
    nav.navbar .nav-cloche.sonne .fa-bell { animation: none; }
}
/* Menu replié (mobile) : une liste, chaque icône avec son libellé */
@media (max-width: 991.98px) {
    nav.navbar .nav-principale { margin-left: 0; margin-top: 6px; }
    nav.navbar .nav-outils { margin-left: 0; border-top: 1px dashed currentColor; margin-top: 6px; padding-top: 6px; }
    nav.navbar .nav-icone .nav-libelle { display: inline; }
    nav.navbar .nav-icone .nav-compteur { position: static; }
    nav.navbar .navbar-nav .nav-profil { flex-direction: column; align-items: flex-start; }
    nav.navbar .nav-menu-compte { box-shadow: none; margin: 4px 0 8px; }
}