/* ===================================================================
   CATALOGUE BRODOTECH - la vitrine de la Brodotèque
   Chargée UNIQUEMENT sur la page qui porte [brodotech_catalogue]
   (njb-brodotech-catalogue.php, njb_cata_assets).

   Les @font-face NJ Garamond / NJ Classico sont posées en PHP juste avant
   (njb_cata_polices) : leurs fichiers vivent dans le thème enfant, dont
   l'adresse n'est connue qu'en PHP.

   ⚠ TOUT est préfixé « njb-cata » ou porté par « #njb-cata ». Aucune classe
   étrangère n'est touchée : cette feuille ne peut rien casser ailleurs, et
   de toute façon elle n'est chargée nulle part ailleurs.
   =================================================================== */

.njb-cata {
  --njc-vert:      #1E3A2F;   /* le vert profond du site */
  --njc-vert-2:    #2F4A3A;
  --njc-or:        #C8A46A;   /* l'or des filets et des aplats */
  --njc-or-texte:  #A9852F;   /* l'or LISIBLE, réservé au texte (cf. charte) */
  --njc-creme:     #FCFBF3;
  --njc-blanc:     #FFFFFF;   /* le blanc PUR des textes sur or - pas le crème */
  --njc-creme-2:   #FBF6EC;   /* le crème chaud des fonds de bloc */
  --njc-encre:     #33352E;
  --njc-gris:      #8F8F86;
  --njc-filet:     #E4DCC4;
  --njc-serif:     'NJ Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --njc-sans:      'NJ Classico', Optima, 'Gill Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 4.5rem;
  color: var(--njc-encre);
  font-family: var(--njc-serif);
}

/* -------------------------------------------------------------------
   1. LE HÉROS
   ------------------------------------------------------------------- */

.njb-cata__hero {
  margin: 0 0 2.8rem;
  padding: 3.4rem 1.6rem 3.6rem;
  background: var(--njc-creme-2);
  border: 1px solid var(--njc-filet);
  border-radius: 2px;
  text-align: center;
}

/* ⚠️ ALIGNÉ SUR LA RECETTE UNIQUE LE 23/08 : .22em et non plus .24em, .55rem
   sous le sur-titre et non plus 1rem. Ce hero avait sa propre recette, à trois
   valeurs près du modèle de l'espace membre - assez peu pour qu'on ne le voie
   pas côte à côte, assez pour que les deux écrans ne soient pas les mêmes.
   ⚠️ --njc-or-texte vaut #A9852F et --njc-sans la pile NJ Classico : les valeurs
   de la recette sont donc bien celles-là, servies par les variables du fichier. */
.njb-cata__sur {
  font-family: var(--njc-sans);
  font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--njc-or-texte);
  margin: 0 0 .55rem;
}

/* ⚠ #njb-cata pour battre les règles de titre du Customizer Themify, qui
   visent « h1 » et « .sidebar-none .page-title » sans !important : un
   identifiant (1-0-0) passe devant sans avoir à en poser un. */
#njb-cata .njb-cata__h1 {
  font-family: var(--njc-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--njc-vert);
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
}

/* Le filet or sous le titre : la signature de la charte.
   ⚠️ 56 × 1 px DEPUIS LE 23/08, et non plus 68 × 2. Le trait de 2 px était le
   plus épais du site : à côté de l'espace membre, ce n'était plus une signature
   commune mais deux dessins différents. Une seule valeur, partout. */
#njb-cata .njb-cata__h1::after {
  content: "";
  display: block;
  width: 56px; height: 1px;
  margin: .9rem auto 0;
  background: var(--njc-or);
}

.njb-cata__accroche {
  max-width: 34rem;
  margin: 1.4rem auto 0;
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--njc-encre);
  text-wrap: pretty;
}

/* Le bouton du héros : OR PLEIN au repos, VERT au survol, TEXTE BLANC DANS LES
   DEUX ÉTATS.
   ⚠ ÉTAT ARBITRÉ PAR BENJAMIN LE 23/08 (deuxième passe, elle remplace la
   première qui avait posé le vert au repos). L'or au repos, le vert au geste.
   ⚠ LE TEXTE NE CHANGE PAS AVEC LE FOND : blanc pur sur l'or comme sur le vert.
   C'est ce qui rend la bascule douce - seul l'aplat bouge, le libellé reste
   posé. Le contraste du blanc sur l'or est faible et c'est ASSUMÉ, la charte
   passe avant : ne pas reproposer de le « corriger » vers un texte foncé. */
#njb-cata .njb-cata__cta {
  display: inline-block;
  margin: 1.9rem 0 0;
  padding: .92rem 2rem;
  background: var(--njc-or);
  border: 1px solid var(--njc-or);
  border-radius: 2px;
  font-family: var(--njc-sans);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--njc-blanc);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  #njb-cata .njb-cata__cta:hover {
    background: var(--njc-vert);
    border-color: var(--njc-vert);
    color: var(--njc-blanc);
  }
}
/* ⚠ REPÈRE CLAVIER EN VERT : le bouton est OR au repos, donc c'est le vert qui
   s'y détache. (Il se confondrait avec le fond pendant un survol à la souris,
   mais le repère clavier et le survol souris ne se rencontrent pas en pratique.) */
#njb-cata .njb-cata__cta:focus-visible {
  outline: 2px solid var(--njc-vert);
  outline-offset: 3px;
}

/* La ligne qui remplace le bouton pour un abonné. */
.njb-cata__actif {
  /* ⚠ « flex-start » ET NON « center » : dès que la phrase passe sur deux lignes
     - c'est le cas sur téléphone - un alignement centré posait l'étoile au
     milieu du bloc, en face de rien. Elle se cale maintenant sur la première
     ligne, à hauteur de « Votre ». */
  display: inline-flex; align-items: flex-start; gap: .5rem;
  margin: 1.9rem 0 0;
  padding: .7rem 1.3rem;
  border: 1px solid var(--njc-or);
  border-radius: 2px;
  font-family: var(--njc-sans);
  font-size: .84rem;
  color: var(--njc-vert);
}
/* ⚠ line-height: inherit, et c'est CE réglage qui fait l'alignement fin. Avec
   « 1 », la boîte de l'étoile était plus courte qu'une ligne de texte et se
   collait en haut, au-dessus de la lettre. En héritant de l'interligne, elle
   occupe exactement une ligne : son glyphe se centre dedans, donc à la même
   hauteur que le premier mot. */
.njb-cata__actif-puce { font-size: .8rem; line-height: inherit; color: var(--njc-or-texte); }

/* -------------------------------------------------------------------
   2. LA BARRE DE FILTRES

   ⚠ MASQUÉE TANT QUE LE SCRIPT N'A PAS RÉPONDU. C'est catalogue.js qui pose
   « njb-cata--js » sur le conteneur. Sans JavaScript, la barre n'apparaît
   jamais et la grille complète reste visible : la page reste utilisable,
   simplement sans tri. Des boutons visibles mais inertes auraient promis un
   geste qui n'existe pas.
   ------------------------------------------------------------------- */

.njb-cata__filtres { display: none; }

.njb-cata--js .njb-cata__filtres {
  display: flex;
  /* ⚠ ÉCRIT POUR LE TÉLÉPHONE D'ABORD : une colonne, deux menus déroulants
     pleine largeur. La disposition en ligne, avec les boutons d'accès, est
     ajoutée plus bas à partir de 768 px.
     ⚠ CE FICHIER A LONGTEMPS IMPOSÉ LA COLONNE PARTOUT, parce que les boutons
     de thème grandissaient avec le nombre de termes et recomposaient la barre
     toute seule. Ce n'est plus vrai : le thème est devenu un déroulant, dont la
     largeur ne dépend pas du nombre d'options. La ligne redevient donc tenable
     sur grand écran. */
  flex-direction: column;
  /* ⚠ NI « stretch » NI « center ». Étirés, les déroulants prenaient toute la
     largeur et pesaient plus lourd que la grille qu'ils trient ; centrés, ils
     flottaient sans rapport avec les vignettes rangées à gauche. Ils partent
     donc du bord gauche, comme la grille. */
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 2.2rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--njc-filet);
}


/* -------------------------------------------------------------------
   LES MENUS DÉROULANTS
   ⚠ « appearance: none » RETIRE LA FLÈCHE NATIVE du système : sans elle, on
   aurait la flèche grise du navigateur À CÔTÉ de la nôtre. Le chevron or est
   donc une image de fond, en SVG écrit dans l'adresse - aucun fichier à charger.
   ⚠ Le « # » de la couleur doit s'écrire « %23 » dans une url() : tel quel, il
   ouvrirait une ancre et l'image ne s'afficherait pas.
   ------------------------------------------------------------------- */
#njb-cata .njb-cata__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  box-sizing: border-box;
  /* ⚠ LARGEUR DE CONTENU, PAS LARGEUR D'ÉCRAN. min-width tient le champ lisible
     quand l'option choisie est courte (« Tous ») ; max-width l'empêche de
     déborder sur un téléphone étroit quand un thème porte un nom long. */
  width: auto; min-width: 11rem; max-width: 100%;
  margin: 0;
  padding: .55rem 2.1rem .55rem .85rem;
  background-color: var(--njc-blanc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C8A46A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: .62rem auto;
  border: 1px solid var(--njc-filet);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--njc-sans);
  /* ⚠ font-weight:400 — les capitales espacées portent déjà l'accent ; le
     gras par-dessus alourdissait la barre. Écrit et non omis : sans lui, un
     <select> hériterait du gras que le thème pose sur les champs. */
  font-size: .72rem; font-weight: 400; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.3;
  color: var(--njc-vert);
  cursor: pointer;
  transition: border-color .2s ease;
}
#njb-cata .njb-cata__select:hover { border-color: var(--njc-or); }
#njb-cata .njb-cata__select:focus-visible {
  outline: 2px solid var(--njc-vert); outline-offset: 2px; border-color: var(--njc-or);
}
/* Les options retombent au rendu du système : leur police et leur fond ne sont
   pas stylables de façon fiable d'un navigateur à l'autre. On ne le tente pas. */
#njb-cata .njb-cata__select option { color: var(--njc-encre); text-transform: none; }

/* -------------------------------------------------------------------

.njb-cata__groupe {
  display: flex;
  /* ⚠ EN FER À GAUCHE, et non centré : les deux groupes se lisent l'un sous
     l'autre, alignés sur le même bord. */
  /* ⚠ C'EST ICI, ET NULLE PART AILLEURS, QUE LES BOUTONS SE REPLIENT.
     La légende et ses puces restent sur une ligne horizontale ; si elles
     débordent (téléphone, beaucoup de thèmes), elles passent à la ligne
     SANS que le groupe cesse d'être un groupe. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}

/* ⚠ LA LÉGENDE A UNE LARGEUR FIXE, ET C'EST TOUT L'INTÉRÊT : « Accès » et
   « Thème » n'ont pas la même longueur, si bien que les deux déroulants ne
   commençaient pas au même endroit. Une base commune les met au même fer.
   ⚠ flex:0 0 - la légende ne doit ni grandir ni rétrécir, sinon l'alignement
   qu'on vient de gagner se déferait au premier libellé plus long. */
#njb-cata .njb-cata__legende { flex: 0 0 4.6rem; margin-right: 0; }

/* ⚠ CE BLOC DOIT RESTER APRÈS LES RÈGLES DE BASE. Il les écrase à spécificité
   ÉGALE, donc uniquement par sa position. Placé plus haut - c'était le cas -
   la largeur fixe de la légende, écrite en dessous pour le téléphone, reprenait
   la main sur grand écran et le réglage desktop ne s'appliquait pas. */
   À PARTIR DE 768 px : l'accès repasse en boutons, la barre en ligne.
   ------------------------------------------------------------------- */
@media (min-width: 768px) {
  .njb-cata--js .njb-cata__filtres {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* ⚠ 3rem ENTRE LES DEUX GROUPES, contre .5rem à l'intérieur d'un groupe :
       c'est cet écart de rapport qui fait lire « Accès ▾ » et « Thème ▾ » comme
       deux blocs, et non comme quatre éléments alignés au hasard. */
    gap: .85rem 3rem;
  }
  /* ⚠ LA LARGEUR FIXE DE LA LÉGENDE NE SERT QU'AU TÉLÉPHONE, où elle met les
     deux déroulants au même fer l'un sous l'autre. En ligne, elle n'alignait
     plus rien et ne faisait que creuser un trou entre « Accès » et sa commande -
     d'autant que le mot est plus court que la réserve. On la rend à sa largeur
     naturelle : les deux légendes collent alors leur déroulant du même écart,
     celui du groupe (.5rem). */
  #njb-cata .njb-cata__legende { flex: 0 0 auto; }
  /* Le déroulant de thème reprend une largeur de contenu, pas toute la ligne. */
  #njb-cata .njb-cata__select { width: auto; min-width: 13rem; }
}

.njb-cata__legende {
  margin-right: .35rem;
  font-family: var(--njc-sans);
  font-size: .78rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--njc-gris);
}

/* ⚠ EN RÉSERVE DEPUIS LE 23/08 : plus aucun bouton de filtre n'est rendu, les
   deux filtres sont des menus déroulants. Cet habillage est conservé tel quel
   au cas où les puces reviendraient - il ne s'applique à rien aujourd'hui.

   Les puces rectangulaires de la charte (mêmes que /dates/liste/ et Actualités).
   ⚠ On repart de zéro sur l'apparence du <button> : le thème et WooCommerce
   habillent les boutons de la page, et sans cette remise à plat nos puces
   hériteraient d'un fond, d'un rayon et d'une ombre qui n'ont rien à y faire. */
#njb-cata .njb-cata__f {
  display: inline-block;
  margin: 0;
  padding: .42rem .95rem;
  background: transparent;
  border: 2px solid var(--njc-filet);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--njc-sans);
  font-size: .7rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3;
  color: var(--njc-encre);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  #njb-cata .njb-cata__f:hover { border-color: var(--njc-or); color: var(--njc-or-texte); }
}
#njb-cata .njb-cata__f:focus-visible {
  outline: 2px solid var(--njc-or);
  outline-offset: 2px;
}
/* LA PUCE ACTIVE : VERT PLEIN, TEXTE BLANC - et la MÊME dans les deux groupes.
   ⚠ Le vert de l'actif et l'or du bouton du héros ne se contredisent pas : le
   héros VEND (l'or appelle le clic), la barre de filtres RANGE (le vert marque
   l'état en cours sans crier). Deux rôles, deux couleurs.
   ⚠ AUCUNE DISTINCTION « Gratuit » / « Premium » PARMI LES FILTRES, et il n'y en
   a jamais eu : les puces d'accès et de thème partagent cette seule règle. La
   seule distinction gratuit/premium du catalogue vit sur les BADGES DES CARTES
   (.njb-cata__badge--premium / --gratuit), qui ne sont pas des filtres et ne
   sont pas concernés ici.
   ⚠ ON DÉCLARE AUSSI L'ÉTAT SURVOLÉ, ET CE N'EST PAS UNE REDONDANCE. La règle
   « .njb-cata__f:hover » plus haut pèse exactement autant que
   « .njb-cata__f.est-actif » (1,2,0) : à égalité, c'est l'ORDRE D'ÉCRITURE qui
   tranche, et survoler une puce déjà active lui reprendrait sa couleur si ce
   bloc remontait d'un cran dans le fichier. Le sélecteur doublé pèse (1,3,0) et
   gagne quoi qu'il arrive. */
#njb-cata .njb-cata__f.est-actif,
#njb-cata .njb-cata__f.est-actif:hover {
  background: var(--njc-vert);
  border-color: var(--njc-vert);
  color: var(--njc-blanc);
}

/* -------------------------------------------------------------------
   3. LA GRILLE
   ------------------------------------------------------------------- */

.njb-cata__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 2rem 1.6rem;
}

.njb-cata__carte { margin: 0; }
.njb-cata__carte[hidden] { display: none; }

#njb-cata .njb-cata__lien {
  display: block;
  text-decoration: none;
  color: inherit;
}
#njb-cata .njb-cata__lien:focus-visible {
  outline: 2px solid var(--njc-or);
  outline-offset: 4px;
}

/* --- La vignette --- */

.njb-cata__vignette {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;              /* les planches sont en portrait 1200x1600 */
  overflow: hidden;
  background: var(--njc-creme-2);
  border: 1px solid var(--njc-filet);
  border-radius: 2px;
  transition: border-color .2s ease;
}

#njb-cata .njb-cata__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

/* La couverture manquante : un aplat crème et le nom de la marque, jamais un
   trou blanc. */
.njb-cata__img--vide {
  display: flex; align-items: center; justify-content: center;
  background: var(--njc-creme-2);
  font-family: var(--njc-sans);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--njc-or);
}

@media (hover: hover) and (pointer: fine) {
  .njb-cata__lien:hover .njb-cata__vignette { border-color: var(--njc-or); }
  .njb-cata__lien:hover .njb-cata__img      { transform: scale(1.035); }
}
/* ⚠ On respecte le réglage système : pas d'agrandissement pour qui a demandé
   moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  #njb-cata .njb-cata__img { transition: none; }
  .njb-cata__lien:hover .njb-cata__img { transform: none; }
}

/* --- Le badge d'accès, posé sur la vignette --- */

.njb-cata__badge {
  position: absolute;
  top: .6rem; left: .6rem;
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .28rem .6rem;
  border-radius: 2px;
  font-family: var(--njc-sans);
  font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1;
}
.njb-cata__badge--premium {
  background: var(--njc-vert);
  border: 1px solid var(--njc-or);
  color: var(--njc-or);
}
.njb-cata__badge--gratuit {
  background: var(--njc-creme);
  border: 1px solid var(--njc-filet);
  color: var(--njc-vert);
}
.njb-cata__cadenas { flex: 0 0 auto; }

/* --- Le corps de la carte --- */

.njb-cata__corps {
  display: block;
  padding: .85rem .1rem 0;
}

.njb-cata__theme {
  display: block;
  margin: 0 0 .35rem;
  font-family: var(--njc-sans);
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--njc-or-texte);
}

.njb-cata__titre {
  display: block;
  font-family: var(--njc-serif);
  font-size: 1.14rem;
  line-height: 1.28;
  color: var(--njc-vert);
  text-wrap: balance;
  transition: color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .njb-cata__lien:hover .njb-cata__titre { color: var(--njc-or-texte); }
}

.njb-cata__meta {
  display: block;
  margin: .4rem 0 0;
  font-family: var(--njc-sans);
  font-size: .76rem;
  font-weight: 300;
  color: var(--njc-gris);
}

/* -------------------------------------------------------------------
   4. LE MESSAGE « AUCUN RÉSULTAT »
   ------------------------------------------------------------------- */

.njb-cata__vide {
  margin: 2.4rem 0 0;
  padding: 2rem;
  border: 1px dashed var(--njc-filet);
  border-radius: 2px;
  text-align: center;
  font-size: .98rem;
  font-weight: 300;
  color: var(--njc-gris);
}
.njb-cata__vide[hidden] { display: none; }
.njb-cata__vide--toujours { margin-top: 0; }

/* -------------------------------------------------------------------
   5. TÉLÉPHONE
   ------------------------------------------------------------------- */

@media (max-width: 640px) {
  .njb-cata { padding-bottom: 3rem; }
  .njb-cata__hero { padding: 2.4rem 1.1rem 2.6rem; margin-bottom: 2rem; }
  .njb-cata__accroche { font-size: 1rem; }
  /* ⚠ UNE SEULE VALEUR depuis que la barre est en colonne : le second nombre
     d'un « gap » est l'écart entre COLONNES, et il n'y en a plus qu'une. */
  .njb-cata--js .njb-cata__filtres { gap: .75rem; }
  .njb-cata__grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 1rem; }
  .njb-cata__titre { font-size: 1.02rem; }
}