/* ═══════════════════════════════════════════════════════════════
   [Sphere-Nav] NAVIGATION RESPONSIVE — SPÉCIFIQUE nexus-sphere.html

   Le système générique vit dans css/nexus-responsive-nav.css, partagé avec
   nexus-myvessel.html. NE PAS le redupliquer ici.

   Ce fichier porte trois choses propres à sphere :
     1. la hauteur de navbar variable (4rem sous 768px, 5rem au-delà)
     2. la NEUTRALISATION de css/marketplace-responsive.css, qui masquait
        délibérément toute navigation sous 1024px
     3. la compaction de l'en-tête sous 768px

   ORDRE DE CHARGEMENT :
     css/marketplace-responsive.css
     → css/sidebar-autohide.css
     → css/nexus-responsive-nav.css
     → CE FICHIER (doit rester le dernier : il surcharge les trois autres)

   ───────────────────────────────────────────────────────────────
   POURQUOI CE FICHIER NEUTRALISE marketplace-responsive.css
   ───────────────────────────────────────────────────────────────
   Cette feuille contenait un parti pris explicite, commenté « Sidebar
   entièrement masquée < lg — la grille Vue d'ensemble remplace la
   navigation » : sous 1024px, elle masquait le burger (`display:none
   !important`, blocs <640 / 640-767 / 768-1023) ET la sidebar
   (`translateX(-100%) !important; width:0 !important`, bloc 768-1023).

   Le défaut de ce parti pris : la grille Vue d'ensemble ne vit que dans
   l'onglet `overview`. Depuis n'importe quel autre onglet, l'utilisateur
   n'avait AUCUN moyen de revenir — la navigation n'était pas dégradée,
   elle était absente.

   marketplace-navigation.js n'a jamais été cassé : son contrat DOM était
   satisfait, mais son bouton déclencheur était invisible. Son rôle de
   drawer est désormais assuré par js/nexus-responsive-nav.js. Les éléments
   de l'ancien drawer (#mp-menu-toggle, #mp-sidebar-overlay) sont neutralisés
   ci-dessous pour éviter deux backdrops concurrents.
   ═══════════════════════════════════════════════════════════════ */

/* Hauteur de navbar — l'<aside> de sphere est en `top-16 md:top-20`.
   Le backdrop générique s'aligne dessus via --nexus-navbar-height. */
/* --nexus-navbar-height n'est plus surchargé ici : la valeur générique
   (5rem = 80px, celle de myvessel) fait foi. L'ancienne surcharge dérivait de
   --mp-header-height (88px) — elle alignait le drawer sur une navbar
   surdimensionnée au lieu de corriger le surdimensionnement. */

/* ═══════════════════════════════════════════════════════════════
   HAUTEUR DE NAVBAR — < 768px

   --mp-header-height vaut 88px, commenté « 56px logo + 32px padding » dans
   css/marketplace-responsive.css:14. Ce calcul n'a plus cours sous 768px :
   le logo y fait 32px depuis que [data-nexus-brand-mark] le pilote. La
   navbar restait donc 8px plus haute que celle de myvessel.

   5rem (80px) est la hauteur de myvessel, et elle coïncide avec son `top-20`
   et avec le --nexus-navbar-height par défaut du générique.

   Une seule variable suffit : --mp-header-height pilote à la fois
   .mp-header{height}, .mp-sidebar{top} et
   .marketplace-wrapper{padding-top}. Les trois s'alignent d'un coup, sans
   contre-règle. (C'était main{margin-top} jusqu'à ce que la compensation
   soit ramenée sur le wrapper, source unique — la respiration de <main>
   lui appartient désormais seule.)

   Portée limitée à < 768px : au-delà, le logo reprend ses 56px et 88px
   redevient la bonne valeur.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    :root {
        --mp-header-height: 5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NEUTRALISATION DE L'ANCIEN DRAWER

   #mp-menu-toggle a été SUPPRIMÉ du markup : il n'y a plus de burger nulle
   part, le drawer s'ouvre uniquement par « Plus » dans la bottom bar.
   La règle sur .mp-menu-toggle reste comme filet — une feuille héritée ne
   doit pas pouvoir en réafficher un.

   #mp-sidebar-overlay reste dans le DOM (d'autres scripts le référencent)
   mais ne participe plus à l'affichage : deux backdrops concurrents
   produiraient un clic mort au-dessus de l'autre.
   ═══════════════════════════════════════════════════════════════ */
.mp-menu-toggle,
#mp-sidebar-overlay,
.mp-sidebar-overlay {
    display: none !important;
}

/* Le bouton « fermer » de l'en-tête de sidebar était réservé au mobile par
   marketplace-responsive.css. Le drawer couvrant désormais toute la plage
   < 1280px, il doit y rester disponible — il est branché sur le contrôleur
   générique via [data-nexus-drawer-close]. */
@media (max-width: 1279px) {
    .mp-sidebar-header,
    .sidebar-header {
        display: flex !important;
    }

    .mp-sidebar-close,
    .sidebar-close-btn {
        display: flex !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NEUTRALISATION DES RÈGLES SIDEBAR HÉRITÉES — < 1280px

   marketplace-responsive.css impose, selon la plage :
     <640 / 640-767  .mp-sidebar { transform: translateX(-100%); width: 280px }
     768-1023        .mp-sidebar { transform: translateX(-100%) !important;
                                   width: 0 !important; overflow: hidden !important }
     1024-1279       .mp-sidebar { transform: translateX(0) }   ← force ouverte

   Le générique pilote désormais `transform` via :root.nexus-drawer-open.
   Il faut donc rendre la largeur et l'overflow inconditionnels, et laisser
   le générique seul maître du transform.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {

    .mp-sidebar,
    aside.mp-sidebar,
    #marketplace-sidebar,
    aside.w-64.mp-sidebar {
        width: 16rem !important;      /* aligné sur Tailwind w-64 */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* `transform` volontairement ABSENT : c'est le générique qui le pilote.
           Les règles héritées sont battues par la spécificité de
           `:root.nexus-drawer-open [data-autohide-panel]` uniquement quand le
           drawer est ouvert — d'où le repli explicite ci-dessous à l'état fermé. */
    }

    /* État fermé : réaffirme le retrait, que la règle héritée soit en
       `!important` (768-1023) ou non (autres plages). */
    :root:not(.nexus-drawer-open) .mp-sidebar,
    :root:not(.nexus-drawer-open) #marketplace-sidebar {
        transform: translateX(-100%) !important;
    }

    /* État ouvert : bat le `translateX(-100%) !important` du bloc 768-1023
       et le `translateX(0)` du bloc 1024-1279. */
    :root.nexus-drawer-open .mp-sidebar,
    :root.nexus-drawer-open #marketplace-sidebar {
        transform: translateX(0) !important;
    }

    /* Les labels étaient réduits à zéro en 768-1023 pour simuler un rail.
       Dans un drawer, ils doivent être lisibles. */
    #marketplace-sidebar .nav-label,
    #marketplace-sidebar span.nav-label,
    #marketplace-sidebar [class*="badge"],
    #marketplace-sidebar [class*="count"],
    .mp-sidebar .nav-label,
    .mp-sidebar span.nav-label,
    .mp-sidebar .mp-sidebar-footer {
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
    }

    /* Le compteur de crédits est le seul badge sans `hidden` d'origine :
       il affichait un « 0 » permanent. Il reste géré par son writer. */
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR COMPACTE — < 1280px

   Composition cible, identique à celle de nexus-myvessel.html :
       logo N NEXUS · Skipper AI (icône seule) · avatar

   marketplace-responsive.css masquait .logo-text et .logo-subtitle sous
   768px seulement, et masquait purement et simplement Skipper AI
   (`.mp-btn-chat { display:none !important }`) sur les trois blocs < 1024px.
   On étend la compaction à toute la plage ET on rétablit le bouton, en icône
   seule : c'est son LABEL qui débordait, pas le bouton.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {

    /* marketplace-responsive.css masquait purement et simplement Skipper AI
       (`.mp-btn-chat { display:none !important }`) sur ses trois blocs
       < 1024px. On le RÉTABLIT ; sa forme (rectangle à label ≥768, carré
       icône seule en dessous) est ensuite pilotée par le crochet générique
       `data-nexus-skipper` de css/nexus-responsive-nav.css. */
    .mp-btn-chat,
    .btn-chat {
        display: flex !important;
    }

    .mp-header-logo .logo-subtitle,
    .header-logo .logo-subtitle {
        display: none !important;
    }
}

/* Padding externe de la navbar neutralisé sous 768px : `.mp-header` en portait
   16px de chaque côté EN PLUS du `px-4` de son conteneur interne, soit 64px
   contre 48 sur myvessel. Le padding vient désormais du seul crochet
   [data-nexus-navbar] de la feuille générique. Pure désamorce d'héritage —
   aucune valeur de géométrie n'est décidée ici. */
@media (max-width: 767px) {
    .mp-header {
        padding-left: 0;
        padding-right: 0;
    }
}

/* `.logo-text` n'est plus masquée sous 768px : le nom de marque est désormais
   visible sur toute la plage, c'est le crochet générique
   [data-nexus-brand-text] qui le révèle en battant le `hidden` de Tailwind. */