/* ==========================================================================
   TAYEBOOKS — En-tête (v2)
   Trois bandeaux, trois questions : où me livre-t-on / que vend le site /
   comment filtrer. La RECHERCHE est l'élément le plus large — dans une
   librairie, c'est le premier geste. §12, §15
   ========================================================================== */

.tb-header { position: relative; z-index: var(--z-header); }

/* ---------- bandeau 1 : logo · lieu · recherche · compte · panier ---------- */
.tb-belt { background-color: var(--tb-band); color: var(--color-text-invert); }

.tb-belt__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.tb-belt a { color: inherit; }

.tb-brand {
  font-weight: var(--fw-bold);
  font-size: 1.1875rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.tb-brand img { max-block-size: 34px; inline-size: auto; }

.tb-geo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-meta);
  line-height: 1.15;
  white-space: nowrap;
}

.tb-geo b { display: block; font-size: var(--fs-body); }

/* La recherche occupe tout l'espace restant : c'est voulu. */
.tb-search { flex: 1 1 auto; min-inline-size: 0; }

.tb-search__field {
  display: flex;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--tb-white);
}

.tb-search__field:focus-within {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.tb-search__scope {
  border: 0;
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-meta);
  padding-inline: var(--space-2);
  cursor: pointer;
  max-inline-size: 9rem;
}

.tb-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  padding: var(--space-3);
  font: inherit;
  font-size: var(--fs-input);
  color: var(--color-text);
}

.tb-search__input:focus { outline: none; }

.tb-search__submit {
  flex: none;
  border: 0;
  background-color: var(--color-accent);
  color: var(--tb-ink);
  padding-inline: var(--space-5);
  min-inline-size: var(--tap-target);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tb-search__submit:hover { background-color: var(--color-accent-hover); color: var(--tb-white); }
:dir(rtl) .tb-search__submit .tb-icon { transform: scaleX(-1); }

.tb-belt__tools { display: flex; align-items: center; gap: var(--space-4); }

.tb-tool {
  display: block;
  font-size: var(--fs-meta);
  line-height: 1.15;
  white-space: nowrap;
  padding-block: var(--space-2);
}

.tb-tool b { display: block; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.tb-tool:hover { text-decoration: underline; }

/*
   Le panier : l'icône, et le nombre posé dessus.

   Le nombre était seul — un « 0 » orange flottant devant le mot « Panier »,
   sans rien qui dise qu'il s'agissait d'un panier. L'icône est le repère ;
   le nombre s'y appuie, il ne le remplace pas.
*/
.tb-cart { display: flex; align-items: flex-end; gap: var(--space-1); font-weight: var(--fw-bold); }

.tb-cart-count-wrap {
  position: relative;
  display: block;
  line-height: 0;
}

/*
   Une pastille au coin, pas un nombre au milieu du dessin.

   Posé au centre de l'icône, le chiffre tombait pile sur le bord du panier
   et sur la barre de la poignée : les traits le traversaient, on lisait mal
   un « 0 » pourtant écrit. Le panier est un dessin au trait, il n'a pas
   d'aplat où loger un chiffre. La pastille se place donc en dehors, au coin
   supérieur — le même langage que la pastille de la barre d'onglets mobile.

   Ocre clair sur bandeau bleu encre, texte encre sur ocre : les deux
   contrastes tiennent largement. Position en propriétés logiques, donc juste
   en arabe sans une seule règle en plus. §5, §70
*/
.tb-cart__count {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-end: -7px;

  min-inline-size: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);

  background-color: var(--color-accent-on-dark);
  color: var(--color-text);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
}

/* Panier vide : l'icône suffit. Une pastille « 0 » ne dit rien d'utile et
   attire l'œil sur un néant. L'élément reste dans le document pour que le
   fragment AJAX puisse le remplacer au premier ajout. */
.tb-cart__count.is-empty { display: none; }

/* ---------- bandeau 2 : rayons ---------- */
.tb-rayons { background-color: var(--tb-band-2); color: var(--color-text-invert); }

/*
   La barre passe à la ligne au lieu de défiler.

   `overflow-x: auto` crée un conteneur de défilement, et un conteneur de
   défilement rogne ses enfants sur les DEUX axes : le menu déroulant, qui
   descend sous la barre, aurait été coupé net. Le retour à la ligne évite le
   problème à la racine — et avec sept ou huit rayons, une deuxième ligne est
   plus lisible qu'une barre qu'il faut faire défiler à l'aveugle.
*/
.tb-rayons__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-2);
}

.tb-rayons a {
  color: inherit;
  font-size: var(--fs-body);
  white-space: nowrap;
  padding-block: var(--space-1);
}

.tb-rayons a:hover { text-decoration: underline; }
.tb-rayons .is-all { font-weight: var(--fw-bold); }

/* --------------------------------------------------------------------------
   Rayon avec sous-catégories
   -------------------------------------------------------------------------- */

.tb-rayon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.tb-rayon__toggle {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.75;
  padding: var(--space-1);
  transition: transform var(--dur-fast) var(--ease);
}

.tb-rayon__toggle:hover { opacity: 1; }
.tb-rayon__toggle[aria-expanded="true"] { transform: rotate(180deg); opacity: 1; }

.tb-rayon__sub {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  min-inline-size: 14rem;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}

.tb-rayon__toggle[aria-expanded="true"] ~ .tb-rayon__sub,
.tb-rayon__sub:focus-within {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Le survol n'est qu'un raccourci, jamais le seul moyen d'ouvrir. */
@media (hover: hover) and (pointer: fine) {
  .tb-rayon:hover .tb-rayon__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.tb-rayon__sub li { display: block; }

.tb-rayon__sub a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-4);
  color: var(--color-link);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  min-block-size: 34px;
  white-space: normal;
}

.tb-rayon__sub a:hover { background-color: var(--color-surface); }

.tb-rayon__count {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
}

/* Le menu s'ouvre vers l'intérieur près du bord de l'écran. */
.tb-rayon:nth-last-child(-n + 2) .tb-rayon__sub {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.tb-rayons .is-sale { color: var(--color-accent-on-dark); }

/* ---------- bandeau 3 : filtres ---------- */
.tb-chips { border-block-end: 1px solid var(--color-border); }

.tb-chips__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.tb-chips__inner::-webkit-scrollbar { display: none; }
.tb-chips__label { color: var(--color-text-soft); font-size: var(--fs-body); white-space: nowrap; }

/* ---------- tiroir mobile ---------- */
.tb-burger {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

.tb-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }

.tb-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-backdrop);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.tb-drawer.is-open .tb-drawer__backdrop { opacity: 1; }

.tb-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(86vw, 22rem);
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-out);
}

:dir(rtl) .tb-drawer__panel { transform: translateX(101%); }
.tb-drawer.is-open .tb-drawer__panel { transform: none; }

.tb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--tb-band);
  color: var(--color-text-invert);
  font-weight: var(--fw-bold);
}

.tb-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap-target);
  min-block-size: var(--tap-target);
  color: inherit;
}

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

.tb-drawer__list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border-soft);
  font-size: var(--fs-body);
  min-block-size: var(--tap-target);
}

.tb-drawer__section {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .tb-geo,
  .tb-tool b { display: none; }
  .tb-search__scope { display: none; }
}

@media (max-width: 620px) {
  .tb-belt__inner { flex-wrap: wrap; row-gap: var(--space-2); }
  .tb-search { order: 3; flex-basis: 100%; }
  .tb-burger { display: inline-flex; }
  .tb-rayons { display: none; }
  .tb-tool--account { display: none; }
  .tb-brand { font-size: 1rem; letter-spacing: 0.1em; margin-inline: auto; }
}

/*
   Filet de sécurité : si un plugin ou un walker tiers réintroduit une liste
   dans le bandeau, elle ne doit pas s'empiler verticalement.

   `:not(.tb-rayon__sub)` est indispensable. Sans cette exclusion, la règle
   s'appliquait AUSSI au menu déroulant des sous-catégories : le <ul> et ses
   <li> passaient en `display: contents`, le panneau disparaissait et ses
   éléments se répandaient dans la barre — on voyait un « 3 » et un « 1 »
   flotter à côté de « Psychiatrie ». Constaté en recette.
*/
.tb-rayons__inner > ul:not(.tb-rayon__sub) {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tb-rayons__inner > ul:not(.tb-rayon__sub) > li { display: contents; }


/* ==========================================================================
   Résultats de recherche instantanée
   --------------------------------------------------------------------------
   Le panneau est produit par SearchWP Live Ajax Search. On l'habille, on ne
   le remplace pas : surcharger son template lierait le thème aux entrailles
   d'une extension qui évolue. §68 demande justement une compatibilité
   visuelle, pas un second moteur de recherche.

   Par défaut il déverse la description entière du livre — plusieurs
   centaines de caractères par résultat. Ici : couverture, titre, et deux
   lignes de description. Le reste se lit sur la fiche.
   ========================================================================== */

.searchwp-live-search-results {
  inline-size: 100%;
  max-block-size: min(70vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: 0;
}

.searchwp-live-search-result {
  border-block-end: 1px solid var(--color-border-soft);
  padding: 0;
  margin: 0;
}

.searchwp-live-search-result:last-child { border-block-end: 0; }

/*
   Une ligne = une couverture + un bloc texte.
   `align-items: start` : la couverture ne s'étire pas à la hauteur du texte.
*/
.searchwp-live-search-result > a,
.searchwp-live-search-result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.searchwp-live-search-result:hover { background-color: var(--color-surface); }

/* Couverture : petite, jamais déformée. */
.searchwp-live-search-result--img {
  flex: none;
  inline-size: 48px;
}

.searchwp-live-search-result--img img {
  inline-size: 48px;
  block-size: auto;
  max-block-size: 72px;
  object-fit: contain;
  display: block;
}

.searchwp-live-search-result--info {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.searchwp-live-search-result--title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.searchwp-live-search-result--title a {
  color: var(--color-link);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.searchwp-live-search-result--title a:hover { text-decoration: underline; }

/*
   Description : deux lignes, puis coupée.

   `-webkit-line-clamp` est la seule coupure qui suit la vraie largeur rendue
   — une troncature en PHP couperait à un nombre de caractères fixe, donc
   trop tôt sur grand écran et trop tard sur petit.
*/
.searchwp-live-search-result--info p,
.searchwp-live-search-result--excerpt,
.searchwp-live-search-result--info > div:not([class]) {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--color-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prix, si l'extension en affiche un. */
.searchwp-live-search-result--price {
  margin-block-start: var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.searchwp-live-search-no-results {
  padding: var(--space-4);
  font-size: var(--fs-body);
  color: var(--color-text-soft);
}

.searchwp-live-search-no-results p { margin: 0; }

@media (max-width: 620px) {
  .searchwp-live-search-results { max-block-size: 60vh; }
  .searchwp-live-search-result--img,
  .searchwp-live-search-result--img img { inline-size: 40px; }
  .searchwp-live-search-result--img img { max-block-size: 60px; }
}