/* ═══════════════════════════════════════════════════════════════
   [Sphere-Autohide] SIDEBAR AUTO-MASQUÉ — FEUILLE PARTAGÉE
   NautiSphere — chargée par nexus-sphere.html et nexus-myvessel.html

   Extrait à l'identique de css/marketplace-responsive.css (bloc ajouté au
   commit 1035538) pour être réutilisable par plusieurs portails sans leur
   imposer les 1 400 lignes de layout marketplace.

   ORDRE DE CHARGEMENT : ce fichier doit rester chargé JUSTE APRÈS
   css/marketplace-responsive.css sur nexus-sphere.html, afin de reproduire
   exactement la position que le bloc occupait dans la cascade avant
   extraction. Le déplacer plus loin changerait la précédence.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   [Sphere-Autohide] SIDEBAR AUTO-MASQUÉ — DESKTOP UNIQUEMENT (≥ 1024px)
   Piloté par js/marketplace/sidebar-autohide.js
   Voir l'en-tête de ce module : le rail est une couche STATIQUE séparée,
   c'est ce qui garantit le zéro-reflow par construction. Ne pas fusionner.

   ATTENTION : sur nexus-sphere.html, css/marketplace-responsive.css contient
   un bloc @media (min-width:768px) and (max-width:1023px) avec d'anciennes
   règles hover qui animent `width`. Elles sont neutralisées dans leur propre
   media query et sont hors périmètre ici — les deux media queries sont
   disjointes, aucune collision possible.
   ═══════════════════════════════════════════════════════════════ */

/* Sous 1024px : ces éléments n'existent pas visuellement.
   Le comportement burger/drawer mobile reste strictement identique. */
#sphere-sidebar-trigger,
#sphere-sidebar-rail,
#sphere-sidebar-pin {
    display: none;
}

@media (min-width: 1024px) {

    :root {
        --sphere-rail-width: 64px;
        --sphere-trigger-width: 16px;
        /* Largeur réelle du panneau : Tailwind `w-64` (16rem) sur l'<aside>
           l'emporte sur --mp-sidebar-width (260px). On s'aligne dessus. */
        --sphere-panel-width: 16rem;
        /* Aligné sur `md:top-20` de l'<aside> — même origine verticale. */
        --sphere-panel-top: 5rem;
        --sphere-autohide-duration: 200ms;
        --sphere-navy: #001e57;
        --sphere-cyan: #00b9d1;
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] BANDE DE DÉCLENCHEMENT (16px, invisible)
       z-index sous le rail (43) et sous le sidebar déployé (45).
       ───────────────────────────────────────────────────────────── */

    #sphere-sidebar-trigger {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--sphere-trigger-width);
        z-index: 40;
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] RAIL STATIQUE (64px) — JAMAIS ANIMÉ
       Sa largeur est une constante : c'est elle qui fixe la marge du
       contenu principal, donc le contenu ne peut pas bouger au survol.
       ───────────────────────────────────────────────────────────── */

    #sphere-sidebar-rail {
        display: flex;
        position: fixed;
        top: var(--sphere-panel-top);
        bottom: 0;
        left: 0;
        width: var(--sphere-rail-width);
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 12px 0;
        background: #fff;
        border-right: 1px solid #e5e7eb;
        /* `overflow: visible` est OBLIGATOIRE : les infobulles des icônes sont
           des ::after positionnés à droite du rail. Le moindre `overflow:auto`
           (même sur un seul axe — l'autre bascule alors en `auto` d'office)
           les tronquerait au bord des 64px. En contrepartie, un menu très long
           déborderait sur un viewport bas : c'est pourquoi les emplacements
           sont compactés à 36px. ~15 entrées tiennent au-dessus de 640px de
           hauteur utile. Au-delà, préférer regrouper le menu plutôt que
           réintroduire un défilement ici. */
        overflow: visible;
        z-index: 43;
    }

    /* Point d'entrée clavier : l'<aside> replié est en visibility:hidden,
       donc non focusable. Ce bouton est ce qui permet au Tab d'atteindre
       puis de déployer la navigation. */
    #sphere-sidebar-reveal {
        display: flex;
        position: relative;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        padding: 0;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: var(--sphere-navy);
        font-size: 16px;
        cursor: pointer;
        transition: background var(--sphere-autohide-duration) ease-out,
                    color var(--sphere-autohide-duration) ease-out;
    }

    #sphere-sidebar-reveal:hover {
        background: #e6f7fb;
        color: var(--sphere-cyan);
    }

    #sphere-sidebar-reveal:focus-visible {
        outline: 2px solid var(--sphere-cyan);
        outline-offset: 2px;
    }

    .sphere-rail-icons {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .sphere-rail-icon {
        display: flex;
        position: relative;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #64748b;
        font-size: 15px;
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] INFOBULLES DU RAIL
       Sans elles le rail est illisible : une colonne d'icônes sans
       libellé. Elles apparaissent en ~100ms, donc AVANT que le panneau
       ne se déploie (120ms) — c'est précisément la fenêtre où l'on
       balaie le rail du regard sans vouloir l'ouvrir. Une fois le
       panneau ouvert il recouvre le rail et affiche les vrais libellés.
       ───────────────────────────────────────────────────────────── */

    .sphere-rail-icon[data-label]::after,
    #sphere-sidebar-reveal[data-label]::after {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        left: calc(100% + 10px);
        padding: 6px 10px;
        border-radius: 6px;
        background: var(--sphere-navy);
        box-shadow: 0 6px 16px -4px rgba(0, 30, 87, 0.45);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(-50%);
        visibility: hidden;
        pointer-events: none;
        transition: opacity 100ms ease-out, visibility 0s linear 100ms;
    }

    .sphere-rail-icon:hover::after,
    #sphere-sidebar-reveal:hover::after,
    #sphere-sidebar-reveal:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transition: opacity 100ms ease-out, visibility 0s;
    }

    /* Séparateurs de groupes logiques — reflètent le découpage du menu. */
    .sphere-rail-sep {
        width: 24px;
        height: 1px;
        flex-shrink: 0;
        margin: 6px 0;
        background: #e5e7eb;
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] PASTILLES DE NOTIFICATION
       Un compteur non lu invisible en mode replié est une régression
       fonctionnelle : le rail doit refléter les badges du panneau.
       ───────────────────────────────────────────────────────────── */

    .sphere-rail-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        border: 2px solid #fff;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 12px;
        text-align: center;
    }

    /* Les icônes sont clonées depuis le menu, où elles peuvent porter des
       utilitaires de couleur ou de taille (`text-white` sur Skipper+, par
       exemple, qui serait invisible sur le fond blanc du rail). On neutralise :
       la teinte et la taille appartiennent à l'emplacement, pas à l'icône. */
    .sphere-rail-icon i {
        width: auto;
        color: inherit;
        font-size: inherit;
    }

    .sphere-rail-icon.is-active {
        background: #e6f7fb;
        box-shadow: inset 3px 0 0 var(--sphere-cyan);
        color: var(--sphere-navy);
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] PANNEAU EN OVERLAY
       Largeur FIGÉE. Transitions sur transform + opacity uniquement,
       donc 100 % compositeur GPU, jamais de layout.
       visibility:hidden (et non opacity:0 seul) retire le panneau replié
       du calcul de position des tooltips d'onboarding — voir smoke test 9.
       ───────────────────────────────────────────────────────────── */

    /* Le panneau doit passer AU-DESSUS du rail (43) et de tout contenu
       positionné du <main>. Sans cette déclaration il reste en `z-index: auto`,
       et trois choses cassent d'un coup : le rail rogne le bouton d'épinglage,
       un enfant `position: relative` du <main> situé après l'<aside> dans le
       DOM recouvre le menu, et le contenu non positionné passe dessous.
       Sur nexus-sphere.html cette valeur venait de `.mp-sidebar` dans
       marketplace-responsive.css : le bloc en dépendait sans la déclarer, et
       l'extraction l'a laissée derrière. Elle appartient désormais à ce
       fichier, qui doit rester autonome pour tous les portails. */
    [data-autohide-panel] {
        z-index: 45;
    }

    :root:not(.sphere-sidebar-pinned) [data-autohide-panel] {
        width: var(--sphere-panel-width);
        box-shadow: 0 18px 45px -12px rgba(0, 30, 87, 0.38);
        opacity: 0;
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        /* La visibilité ne bascule qu'APRÈS le glissement, sinon le panneau
           disparaîtrait d'un coup au lieu de sortir. */
        transition: transform var(--sphere-autohide-duration) ease-out,
                    opacity var(--sphere-autohide-duration) ease-out,
                    visibility 0s linear var(--sphere-autohide-duration);
    }

    /* Le :focus-within maintient le panneau ouvert tant que le focus clavier
       est à l'intérieur, même si la souris est partie ailleurs. */
    :root:not(.sphere-sidebar-pinned).sphere-sidebar-expanded [data-autohide-panel],
    :root:not(.sphere-sidebar-pinned) [data-autohide-panel]:focus-within {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--sphere-autohide-duration) ease-out,
                    opacity var(--sphere-autohide-duration) ease-out,
                    visibility 0s;
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] CONTENU PRINCIPAL — MARGE CONSTANTE
       Elle ne dépend JAMAIS de l'état survolé : zéro reflow au survol.
       `!important` requis pour l'emporter sur l'utilitaire Tailwind `ml-64`,
       convention déjà employée par les media queries < 1024px de ce fichier.
       ───────────────────────────────────────────────────────────── */

    [data-autohide-main] {
        /* Aucune transition de layout : la marge ne s'anime jamais. */
        transition: none;
    }

    :root[data-sphere-sidebar-mode="rail"]:not(.sphere-sidebar-pinned) [data-autohide-main] {
        margin-left: var(--sphere-rail-width) !important;
    }

    :root[data-sphere-sidebar-mode="hidden"]:not(.sphere-sidebar-pinned) [data-autohide-main] {
        margin-left: 0 !important;
    }

    /* MODE 'hidden' : pas de rail du tout. */
    :root[data-sphere-sidebar-mode="hidden"] #sphere-sidebar-rail {
        display: none;
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] BOUTON ÉPINGLER
       ───────────────────────────────────────────────────────────── */

    #sphere-sidebar-pin {
        display: flex;
        width: calc(100% - 24px);
        align-items: center;
        gap: 10px;
        margin: 12px 12px 0;
        padding: 8px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        color: #64748b;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--sphere-autohide-duration) ease-out,
                    border-color var(--sphere-autohide-duration) ease-out,
                    color var(--sphere-autohide-duration) ease-out;
    }

    #sphere-sidebar-pin:hover {
        border-color: var(--sphere-cyan);
        background: #e6f7fb;
        color: var(--sphere-navy);
    }

    #sphere-sidebar-pin:focus-visible {
        outline: 2px solid var(--sphere-cyan);
        outline-offset: 2px;
    }

    #sphere-sidebar-pin .sphere-pin-icon {
        transition: transform var(--sphere-autohide-duration) ease-out;
    }

    #sphere-sidebar-pin.is-pinned {
        border-color: var(--sphere-cyan);
        background: linear-gradient(135deg, #e6f7fb, #ffffff);
        color: var(--sphere-navy);
    }

    #sphere-sidebar-pin.is-pinned .sphere-pin-icon {
        transform: rotate(-45deg);
        color: var(--sphere-cyan);
    }

    /* ─────────────────────────────────────────────────────────────
       [Sphere-Autohide] ÉTAT ÉPINGLÉ = comportement historique
       Panneau permanent, pas d'overlay, pas d'ombre, pas de rail.
       ───────────────────────────────────────────────────────────── */

    :root.sphere-sidebar-pinned #sphere-sidebar-rail,
    :root.sphere-sidebar-pinned #sphere-sidebar-trigger {
        display: none;
    }

    :root.sphere-sidebar-pinned [data-autohide-panel] {
        box-shadow: none;
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }

    :root.sphere-sidebar-pinned [data-autohide-main] {
        margin-left: var(--sphere-panel-width) !important;
    }

    /* Focus visible sur chaque item une fois le panneau déployé. */
    [data-autohide-panel] a:focus-visible,
    [data-autohide-panel] button:focus-visible {
        outline: 2px solid var(--sphere-cyan);
        outline-offset: -2px;
    }
}

/* ─────────────────────────────────────────────────────────────
   [Sphere-Autohide] ACCESSIBILITÉ — MOUVEMENT RÉDUIT
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {

    [data-autohide-panel],
    :root:not(.sphere-sidebar-pinned) [data-autohide-panel],
    :root:not(.sphere-sidebar-pinned).sphere-sidebar-expanded [data-autohide-panel],
    :root:not(.sphere-sidebar-pinned) [data-autohide-panel]:focus-within,
    #sphere-sidebar-rail,
    #sphere-sidebar-reveal,
    #sphere-sidebar-pin,
    #sphere-sidebar-pin .sphere-pin-icon,
    .sphere-rail-icon {
        transition: none !important;
    }

    /* Les infobulles restent fonctionnelles, mais sans fondu ni délai. */
    .sphere-rail-icon[data-label]::after,
    #sphere-sidebar-reveal[data-label]::after,
    .sphere-rail-icon:hover::after,
    #sphere-sidebar-reveal:hover::after,
    #sphere-sidebar-reveal:focus-visible::after {
        transition: none !important;
    }
}