/* Heop — le minibar d'ancres de la vitrine pro.
 *
 * IL Y A DEJA UNE BARRE FIXE EN BAS DE CETTE PAGE.
 *
 * `home-bottom-nav` est servie sur toutes les surfaces publiques, en
 * `position: fixed; bottom: 0; z-index: 90`. Poser un second element colle au
 * bas de l'ecran sans en tenir compte l'aurait recouvert sur telephone —
 * c'est-a-dire exactement la ou la navigation principale sert le plus.
 *
 * Le minibar se pose donc AU-DESSUS d'elle, en reprenant le jeton qu'elle
 * publie deja : `--hp-bottom-nav-height` vaut 62px quand la barre est rendue,
 * et 0px des que ses propres regles la retirent (souris, ou tablette
 * couchee). L'offset suit la barre sans que cette feuille ait a redecider
 * quand un appareil est un telephone — cette decision vit a un seul endroit.
 *
 * Le z-index reste sous celui de la barre : en cas de recouvrement imprevu,
 * c'est le raccourci de section qui passe dessous, jamais la navigation.
 *
 * ET SUR UN TELEPHONE, IL N'Y EN A PAS DEUX (14/09/2026).
 *
 * Julien, trois captures iPhone de la vitrine 57 : une pastille blanche VIDE,
 * ~112x52 points, flottait au-dessus de la pastille « Carte » de la barre
 * basse et recouvrait le troisieme disque de la rangee des unes. C'etait ce
 * minibar. Vide, parce que la regle « sous 520px, masquer les mots » etait
 * ecrite `a span { display: none }` — et le registre rend chaque pictogramme
 * dans un `<span class="ui-icon">` : elle masquait donc AUSSI les icones (le
 * piege que product-list.css a deja nomme sur le bouton rond). Personne
 * n'avait jamais vu ce minibar sur un telephone autrement qu'en pastille nue.
 *
 * Meme avec ses icones, il n'a pas sa place au pouce : la barre basse porte
 * deja la navigation, la rangee des unes porte deja les raccourcis de section
 * avec leurs MOTS (une destination, un nom — doctrine du 08/09), et une
 * seconde barre fixe mange 70 points d'un ecran de 844 tout en recouvrant ce
 * qu'on lit. Il ne se rend donc qu'a partir de 640px, ou l'ecran a la place
 * de deux barres et de leurs libelles. Les sections qu'il raccourcit restent
 * sur la page, a un defilement : rien n'est mure.
 *
 * ECRIT DEPUIS LE TELEPHONE : la regle de base ne le rend pas, le palier
 * `min-width` le rend — et reserve sa place au pied de la vitrine au meme
 * endroit, pour qu'une reservation sans barre n'existe pas.
 */

.public-producer-minibar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--hp-bottom-nav-height, 0px) + 14px);
    z-index: 80;
    display: none;
    gap: 2px;
    max-width: calc(100vw - 24px);
    padding: 5px;
    border: 1px solid var(--ui-color-line);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-plan-card);
    box-shadow: var(--ui-shadow-md);
    overflow-x: auto;
    translate: -50% 0;
    scrollbar-width: none;
}

.public-producer-minibar::-webkit-scrollbar {
    display: none;
}

.public-producer-minibar a {
    display: flex;
    align-items: center;
    gap: 6px;
    /* La cible dessine une pastille de 8px de haut ; le doigt en demande 44.
       C'est la regle de tout le depot, et elle gagne sur la maquette. */
    min-height: var(--tap-size);
    padding: 8px 13px;
    border-radius: var(--ui-radius-pill);
    color: var(--ui-color-muted);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.public-producer-minibar a:hover {
    background: var(--ui-plan-sunk);
    color: var(--ui-color-ink);
}

.public-producer-minibar a:focus-visible {
    background: var(--ui-color-brand);
    color: var(--ui-color-cream);
    outline: 2px solid var(--ui-color-brand);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .public-producer-minibar {
        display: flex;
    }

    /* Le pied de page ne doit pas finir sous le minibar. */
    .public-producer-profile-shell {
        padding-bottom: calc(var(--hp-bottom-nav-height, 0px) + 72px);
    }
}