/* ==========================================================================
   TAYEBOOKS — Interface mobile « application »
   --------------------------------------------------------------------------
   Barre d'onglets basse, recherche plein écran, panneau de filtres montant,
   barre d'achat collante.

   Tout est masqué au-delà de 620px : un seul balisage pour tous les écrans,
   aucune détection d'appareil côté serveur — celle-ci casserait le cache de
   page et servirait la mauvaise version à un visiteur sur deux.
   ========================================================================== */

.tb-tabbar,
.tb-sheet,
.tb-buybar { display: none; }


@media (max-width: 620px) {

  /* ------------------------------------------------------------------------
     Barre d'onglets
     ------------------------------------------------------------------------ */

  .tb-tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background-color: var(--color-background);
    border-block-start: 1px solid var(--color-border);
    /* Zone sûre iPhone : la barre d'accueil ne doit pas recouvrir un onglet. */
    padding-block-end: env(safe-area-inset-bottom, 0);
  }

  .tb-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-block-size: var(--tab-bar-h);
    padding-block: var(--space-1);
    background: none;
    border: 0;
    color: var(--color-text-soft);
    font: inherit;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    /* Pas de surbrillance bleue au tap : c'est le signe le plus visible
       qu'on est dans un navigateur et non dans une application. */
    -webkit-tap-highlight-color: transparent;
  }

  .tb-tabbar__item.is-current { color: var(--color-primary); }
  .tb-tabbar__item.is-current .tb-icon { stroke-width: 1.9; }
  .tb-tabbar__item:active { background-color: var(--color-surface); }

  .tb-tabbar__icon { position: relative; display: block; line-height: 0; }
  .tb-tabbar__label { line-height: 1.2; }

  .tb-tabbar__badge {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-start: 11px;
    min-inline-size: 16px;
    padding-inline: 4px;
    border-radius: var(--radius-pill);
    background-color: var(--color-deal);
    color: var(--tb-white);
    font-size: 10px;
    font-weight: var(--fw-bold);
    line-height: 16px;
    text-align: center;
  }

  /*
     Panier vide : la pastille est rendue quand même — un élément absent ne
     peut pas être remplacé par le fragment AJAX, et elle n'apparaissait donc
     qu'au rechargement suivant. Elle est simplement masquée jusqu'au premier
     article.
  */
  .tb-cart-badge.is-empty { display: none; }

  /* Le contenu ne finit jamais sous la barre. */
  body { padding-block-end: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px)); }

  /* Le bouton « retour en haut » remonterait sous la barre d'onglets :
     sur mobile l'onglet « Accueil » joue déjà ce rôle. */
  .tb-backtotop { display: none; }


  /* ------------------------------------------------------------------------
     Recherche plein écran
     ------------------------------------------------------------------------ */

  .tb-sheet--search {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background-color: var(--color-background);
    padding-block-start: env(safe-area-inset-top, 0);
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .tb-sheet--search[hidden] { display: none; }
  .tb-sheet--search.is-open { transform: none; }

  .tb-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--gutter);
    background-color: var(--tb-band);
    border-block-end: 1px solid var(--color-border);
  }

  .tb-sheet__head .tb-search { flex: 1 1 auto; min-inline-size: 0; }

  .tb-sheet__close {
    flex: none;
    background: none;
    border: 0;
    color: var(--color-text-invert);
    font: inherit;
    font-size: var(--fs-body);
    min-block-size: var(--tap-target);
    padding-inline: var(--space-2);
    cursor: pointer;
  }

  .tb-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) 0; }

  .tb-sheet__label {
    padding: var(--space-2) var(--gutter);
    color: var(--color-text-soft);
    font-size: var(--fs-meta);
  }

  .tb-sheet__list { list-style: none; margin: 0; padding: 0; }

  .tb-sheet__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--gutter);
    min-block-size: var(--tap-target);
    border-block-end: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-size: var(--fs-body);
  }

  .tb-sheet__list a span { color: var(--color-text-muted); font-size: var(--fs-meta); }


  /* ------------------------------------------------------------------------
     Barre d'achat collante — fiche produit
     ------------------------------------------------------------------------ */

  .tb-buybar {
    position: fixed;
    inset-inline: 0;
    /* Posée AU-DESSUS de la barre d'onglets, jamais par-dessus. */
    inset-block-end: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--z-sticky) - 1);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--gutter);
    background-color: var(--color-background);
    border-block-start: 1px solid var(--color-border);
    box-shadow: var(--shadow-up);
    transform: translateY(110%);
    transition: transform var(--dur-base) var(--ease);
  }

  .tb-buybar.is-visible { transform: none; }
  .tb-buybar[hidden] { display: flex; }
  .tb-buybar__price { flex: none; font-size: var(--fs-price); }
  .tb-buybar__btn { flex: 1 1 auto; }

  .single-product body { padding-block-end: calc(var(--tab-bar-h) + 4rem + env(safe-area-inset-bottom, 0px)); }


  /* ------------------------------------------------------------------------
     Panneau de filtres montant (bottom sheet). §30
     ------------------------------------------------------------------------ */

  .tb-chips { position: relative; }

  .tb-filters-open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 34px;
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-background);
    font: inherit;
    font-size: var(--fs-body);
    cursor: pointer;
  }

  .tb-sheet--filters {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-modal);
    max-block-size: 80vh;
    overflow-y: auto;
    background-color: var(--color-background);
    border-start-start-radius: 12px;
    border-start-end-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding-block-end: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .tb-sheet--filters[hidden] { display: none; }
  .tb-sheet--filters.is-open { transform: none; }

  /* Poignée : le signal visuel qu'on peut refermer en tirant vers le bas. */
  .tb-sheet--filters::before {
    content: "";
    display: block;
    inline-size: 36px;
    block-size: 4px;
    margin: var(--space-3) auto var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
  }

  .tb-sheet__backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background-color: var(--color-backdrop);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
  }

  .tb-sheet__backdrop.is-open { opacity: 1; }
}


/* --------------------------------------------------------------------------
   Mode installé
   Plus de barre d'adresse : l'encoche doit être compensée par le site.
   -------------------------------------------------------------------------- */

.tb-standalone .tb-belt { padding-block-start: env(safe-area-inset-top, 0); }

/* Pas de sélection de texte accidentelle sur les éléments de navigation :
   un appui long dans une application ne surligne pas un onglet. */
.tb-tabbar__item,
.tb-sheet__close { user-select: none; }

/* Lignes du panneau de filtres, construites en JS. */
@media (max-width: 620px) {
  .tb-sheet--filters .tb-sheet__body a {
    display: block;
    padding: var(--space-3) var(--gutter);
    min-block-size: var(--tap-target);
    border-block-end: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-size: var(--fs-body);
  }

  .tb-sheet--filters .tb-sheet__body a.is-on {
    font-weight: var(--fw-bold);
    color: var(--color-primary);
  }

  .tb-sheet--filters .tb-sheet__body a.is-on::after { content: " ✓"; }
}