/* Tertium - grille catalogue (bloc 3)
   Jetons : voir assets/css/tokens.css. Aucune valeur en dur.

   Ce fichier porte : le bandeau beige de tete de rayon, la barre de resultats,
   la grille de cartes, la pagination et la barre collante mobile.
   La colonne de filtres est dans facettes.css.

   Mesures de la maquette sans jeton exact, arrondies au jeton le plus proche.
   Le detail des ecarts est dans JOURNAL.md, bloc 3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bandeau de tete : la seule surface beige de l'ecran
      Regle du projet : le beige se pose par touches, jamais sur une page.
   -------------------------------------------------------------------------- */

.tt-cat__tete {
  background: var(--tt-papier-alt);
  border-bottom: var(--tt-filet-or);
}

.tt-fil {
  padding-top: var(--tt-bloc);
  font-size: var(--tt-fs-micro);
  color: var(--tt-texte-2);
}

.tt-fil a { color: var(--tt-texte-2); }
.tt-fil a:hover { color: var(--tt-encre); }

/* Le dernier maillon, celui de la page courante, ne se distingue que par sa
   couleur : WooCommerce et Yoast ne posent pas de classe dessus. */
.tt-fil > :last-child { color: var(--tt-encre); }

.tt-cat__intro {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--tt-gouttiere);
  align-items: end;
  padding-top: var(--tt-gap-s);
  padding-bottom: calc(var(--tt-gap) + var(--tt-gap-s));
}

.tt-cat__titre {
  margin: 0 0 var(--tt-gap-s);
  line-height: var(--tt-lh-titre);
}

.tt-cat__chapeau {
  max-width: 33rem;                /* pas de jeton de mesure de ligne : 528px */
  color: var(--tt-texte-2);
}

.tt-cat__chapeau p { margin: 0; }

/* Puces de rayons, alignees a droite du titre */
.tt-puces {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--tt-gap-s) / 1.75);
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-puce {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--tt-gap-s) / 2);
  padding: calc(var(--tt-gap-s) / 1.75) var(--tt-gap-s);
  border: var(--tt-filet);
  border-color: var(--tt-bord-champ);
  background: transparent;
  color: var(--tt-encre);
  font-size: var(--tt-fs-meta);
  line-height: 1;
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide), border-color var(--tt-t-rapide);
}

.tt-puce:hover {
  background: var(--tt-or);
  color: var(--tt-encre);
  border-color: var(--tt-encre);
}

.tt-puce--courant {
  background: var(--tt-encre);
  border-color: var(--tt-encre);
  color: var(--tt-papier);
}

.tt-puce--courant:hover { color: var(--tt-encre); }

/* Le nombre etait a 50 % d'opacite : 3,28:1 sur le beige, sous le seuil de
   4,5:1 (axe-core, 17/09). Gris des metadonnees, pleine opacite : 4,52:1. */
.tt-puce__nb { color: var(--tt-texte-3); }
.tt-puce--courant .tt-puce__nb { color: inherit; opacity: .75; }

/* --------------------------------------------------------------------------
   2. Corps : colonne de filtres + resultats
   -------------------------------------------------------------------------- */

.tt-cat__corps {
  display: grid;
  grid-template-columns: 15.625rem 1fr;   /* 250px : largeur imposee par la maquette */
  gap: calc(var(--tt-gouttiere) - var(--tt-gap-s));
  padding-top: var(--tt-section);
  padding-bottom: var(--tt-section);
}

/* --------------------------------------------------------------------------
   3. Barre de resultats
   -------------------------------------------------------------------------- */

.tt-barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tt-gap-s);
  padding-bottom: var(--tt-gap-s);
  border-bottom: var(--tt-filet);
}

.tt-barre__compte {
  margin: 0;
  font-size: var(--tt-fs-corps-s);
  color: var(--tt-texte-2);
}

.tt-barre__compte b { color: var(--tt-encre); }

.tt-barre__tri {
  display: flex;
  align-items: center;
  gap: var(--tt-gap-s);
  margin-left: auto;
}

.tt-barre__tri-label {
  font-size: var(--tt-fs-micro);
  color: var(--tt-texte-2);
}

.tt-select {
  padding: var(--tt-gap-s) var(--tt-gap-s);
  background: var(--tt-papier);
  border: var(--tt-filet);
  border-color: var(--tt-bord-champ);
  border-radius: var(--tt-radius);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-meta);
  color: var(--tt-encre);
  cursor: pointer;
}

.tt-barre__tri-ok { padding: var(--tt-gap-s) var(--tt-bloc); }

/* --------------------------------------------------------------------------
   4. Grille de cartes
      4 colonnes sur bureau, 3 sous 1200px, 2 sous 900px.
   -------------------------------------------------------------------------- */

.tt-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tt-bloc) var(--tt-gap);
  margin: 0;
  /* padding-top seul laissait les 40px de retrait par defaut d'une liste :
     la grille etait decalee vers la droite (constat du 17/09). */
  padding: var(--tt-bloc) 0 0;
  list-style: none;
}

.tt-carte-livre {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Couverture encadree, filet qui fonce au survol */
.tt-carte-livre__visuel { position: relative; }

.tt-carte-livre__couv {
  position: relative;
  display: block;
  aspect-ratio: var(--tt-ratio-couv);
  overflow: hidden;
  background: var(--tt-papier);
  border: var(--tt-filet);
  transition: border-color var(--tt-t-moyen), box-shadow var(--tt-t-moyen);
}

.tt-carte-livre__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tt-t-zoom);
}

.tt-carte-livre:hover .tt-carte-livre__couv,
.tt-carte-livre:focus-within .tt-carte-livre__couv {
  border-color: var(--tt-encre);
  box-shadow: var(--tt-ombre-carte);
}

.tt-carte-livre:hover .tt-carte-livre__image,
.tt-carte-livre:focus-within .tt-carte-livre__image {
  transform: scale(var(--tt-zoom-hover));
}

/* Etiquette en haut a gauche : une seule a la fois.
   Capsule de la maquette (POOL.badge) : 5px 9px, 9px, .12em, texte creme. */
.tt-carte-livre__etiquette {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0.3125rem 0.5625rem;  /* 5px 9px */
  background: var(--tt-brique);
  color: #F7F4ED;                /* creme de la maquette, sans jeton */
  font-size: 0.5625rem;          /* 9px */
  font-weight: 400;
  line-height: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Pastille de rayon, en bas a gauche, sur fond blanc plein. */
.tt-carte-livre__rayon {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  padding: var(--tt-gap-s) var(--tt-gap-s);
  background: var(--tt-papier);
  color: var(--tt-encre);
  font-size: var(--tt-fs-micro);
  line-height: 1;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
}

.tt-carte-livre__surtitre a {
  color: inherit;
  transition: color var(--tt-t-rapide);
}

.tt-carte-livre__surtitre a:hover { color: var(--tt-encre); }

.tt-carte-livre__surtitre {
  margin: var(--tt-gap-s) 0 0;
  font-size: var(--tt-fs-micro);
  line-height: 1.3;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-brique);
}

.tt-carte-livre__titre {
  margin: var(--tt-gap-s) 0 0;
  font-size: var(--tt-fs-carte);
  line-height: 1.18;
  letter-spacing: 0;
}

.tt-carte-livre__titre a {
  color: var(--tt-encre);
  transition: color var(--tt-t-rapide);
}

.tt-carte-livre__titre a:hover { color: var(--tt-brique); }

.tt-carte-livre__auteur {
  margin: calc(var(--tt-gap-s) / 2) 0 0;
  font-size: var(--tt-fs-meta);
  line-height: 1.4;
  color: var(--tt-texte-3);
}

.tt-carte-livre__auteur a {
  color: var(--tt-texte-3);
  transition: color var(--tt-t-rapide);
}

.tt-carte-livre__auteur a:hover { color: var(--tt-brique); }

/* Micro-mention numerique : or en texte, jamais l'or de fond. */
.tt-carte-livre__numerique {
  display: flex;
  align-items: center;
  gap: calc(var(--tt-gap-s) / 2);
  margin: calc(var(--tt-gap-s) / 2) 0 0;
  font-size: var(--tt-fs-micro);
  line-height: 1.3;
  color: var(--tt-or-texte);
}

.tt-carte-livre__numerique svg { flex: none; }

.tt-carte-livre__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-gap-s);
  margin-top: auto;
  padding-top: var(--tt-gap-s);
}

.tt-carte-livre__prix {
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  white-space: nowrap;
  color: var(--tt-encre);
}

/* WooCommerce enveloppe le prix dans des <span> et <del>/<ins> en promotion. */
.tt-carte-livre__prix del { opacity: .55; font-weight: 400; }
.tt-carte-livre__prix ins { text-decoration: none; }

.tt-carte-livre__ajouter {
  padding: calc(var(--tt-gap-s) / 2) var(--tt-gap-s);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-meta);
  line-height: 1.2;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* Le bouton cede la place au prix plutot que de deborder de la carte :
     defaut mesure le 30/08, quand le catalogue est redevenu achetable. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-carte-livre__prix { flex: 0 0 auto; }

.tt-carte-livre__ajouter:hover { box-shadow: var(--tt-ombre-couv); }

/* WooCommerce ajoute ses propres classes au lien d'ajout : on neutralise. */
.tt-carte-livre .added_to_cart {
  display: block;
  margin-top: calc(var(--tt-gap-s) / 2);
  font-size: var(--tt-fs-micro);
}

/* --------------------------------------------------------------------------
   5. « Voir la suite » (remplace la pagination numerotee)
      Le bouton reprend .tt-btn-secondaire (tokens.css) ; seule sa place et
      son etat de chargement sont definis ici.
   -------------------------------------------------------------------------- */

.tt-suite {
  display: flex;
  justify-content: center;
  margin-top: var(--tt-section);
}

.tt-suite--debut {
  justify-content: flex-start;
  margin: 0 0 var(--tt-gap);
}

.tt-suite__bouton {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--tt-gap-s) / 2);
  min-height: var(--tt-touch);
}

.tt-suite__reste {
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-3);
}

.tt-suite__bouton:hover .tt-suite__reste { color: inherit; }

.tt-suite__bouton--charge {
  opacity: .6;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   6. Etat vide
   -------------------------------------------------------------------------- */

.tt-vide {
  padding: var(--tt-section) 0;
  color: var(--tt-texte-2);
}

.tt-vide a { margin-left: var(--tt-gap-s); }

/* --------------------------------------------------------------------------
   7. Barre collante mobile : masquee sur bureau, revelee par le script
      Le script retire l'attribut hidden : sans JavaScript, le tiroir n'aurait
      pas de quoi s'ouvrir, et la colonne de filtres reste alors en pleine
      largeur au-dessus des resultats. Degradation volontaire.
   -------------------------------------------------------------------------- */

.tt-cat__barre-mobile { display: none; }

/* --------------------------------------------------------------------------
   8. Points de rupture
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .tt-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {

  .tt-cat__intro {
    grid-template-columns: 1fr;
    gap: var(--tt-gap);
    align-items: start;
  }

  .tt-puces { justify-content: flex-start; }

  .tt-cat__corps {
    grid-template-columns: 1fr;
    gap: var(--tt-bloc);
  }

  .tt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Barre collante Filtrer / Trier, revelee par le script. */
  .tt-cat__barre-mobile:not([hidden]) {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tt-gap-s);
    padding: var(--tt-gap-s) var(--tt-gouttiere);
    background: var(--tt-papier);
    border-top: var(--tt-filet-or);
  }

  .tt-cat__barre-mobile button {
    min-height: var(--tt-touch);
    font-family: var(--tt-sans);
    font-size: var(--tt-fs-meta);
    letter-spacing: var(--tt-ls-micro);
    text-transform: uppercase;
  }

  .tt-barre { row-gap: var(--tt-gap-s); }
  .tt-barre__tri { margin-left: 0; width: 100%; }
  .tt-barre__tri .tt-select { flex: 1; }
}

@media (max-width: 600px) {

  .tt-cat__chapeau { max-width: none; }
  .tt-grille { gap: var(--tt-gap) var(--tt-gap-s); }

  /* Deux colonnes a 375 px laissent moins de 10 rem par carte : le prix et le
     bouton ne tiennent plus cote a cote, le bouton debordait de la feuille.
     On les empile, et le bouton prend toute la largeur de la carte. */
  .tt-carte-livre__pied {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--tt-gap-s) / 2);
  }

  .tt-carte-livre__ajouter {
    min-height: var(--tt-touch);
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}