/* =====================================================================
   entete-compact.css — bandeau des espaces connectés sur une seule ligne
   (2026-10-14)
   ---------------------------------------------------------------------
   Sur les écrans de portable (1 280 à 1 600 px), le bandeau des pages
   producteur et acheteur passait sur deux lignes : logo coupé « SV / VIN »,
   libellés coupés (« Offres de / Déstockage »). Seul l'accueil producteur
   (connexionproducteurs2.html) tenait, grâce à un menu resserré : on
   généralise ce réglage, par paliers selon la largeur.

   - Chargé EN DERNIER dans le <head> des 28 pages à menu, et sélecteurs
     plus précis (header.header …) : il passe devant les styles propres à
     chaque page sans !important.
   - Actif seulement entre 993 et 1 680 px : au-delà, rien ne change (les
     grands écrans tenaient déjà) ; en dessous, les règles existantes des
     pages (menu défilant côté acheteur, menu masqué côté producteur)
     restent maîtresses.
   ===================================================================== */

@media (min-width: 993px) and (max-width: 1680px) {
    header.header {
        gap: 0.75rem;
    }
    header.header .logo-text,
    header.header .header-nav .nav-link {
        white-space: nowrap;
    }
    /* Pas d'overflow sur .header-nav : il rognerait le sous-menu « Rechercher »
       des pages acheteur (positionné en absolu sous le lien). Les paliers
       ci-dessous suffisent à tout faire tenir. */
    header.header .header-nav {
        gap: 0.2rem;
    }
    header.header .header-nav .nav-link {
        padding: 0.55rem 0.75rem;
        font-size: 0.875rem;
    }
    /* Nom du compte : une ligne, coupé proprement s'il est long */
    header.header #headerUserName,
    header.header .user-info .user-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 190px;
    }
}

@media (min-width: 993px) and (max-width: 1440px) {
    header.header {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    header.header .header-nav .nav-link {
        padding: 0.5rem 0.55rem;
        font-size: 0.85rem;
    }
    header.header #headerUserName,
    header.header .user-info .user-name {
        max-width: 150px;
    }
    header.header .user-info .user-role {
        display: none;
    }
}

@media (min-width: 993px) and (max-width: 1280px) {
    header.header .header-nav .nav-link {
        padding: 0.45rem 0.45rem;
        font-size: 0.82rem;
    }
    /* L'avatar reste : le nom complet est dans son menu déroulant */
    header.header #headerUserName,
    header.header .user-info .user-name {
        display: none;
    }
}

@media (min-width: 993px) and (max-width: 1100px) {
    header.header {
        gap: 0.5rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    header.header .logo-text {
        font-size: 1.25rem;
    }
    header.header .header-nav .nav-link {
        padding: 0.4rem 0.35rem;
        font-size: 0.78rem;
    }
}

/* Écrans étroits : la pastille « Soon » des entrées désactivées (ajoutée par
   js/prospection-nav.js dans un <span class="nav-link">) laisse la place au libellé. */
@media (min-width: 993px) and (max-width: 1100px) {
    header.header .header-nav span.nav-link > span {
        display: none;
    }
}

/* Réglages acheteur : seule page à menu avec une icône devant le logo, et des
   libellés plus longs (« Recherche Producteur », « Recherche Vin »). */
@media (min-width: 993px) and (max-width: 1440px) {
    header.header .logo-container .logo-icon {
        display: none;
    }
}