/* =============================================================================
 * SONOYA - vendeurs.css
 * -----------------------------------------------------------------------------
 * Scope an- : annuaire des vendeurs (ecran 6).
 *
 * VOLONTAIREMENT MINCE. Cet ecran reutilise :
 *   - nb-seller-card.css  la carte vendeur canonique (D-030)
 *   - catalogue.css       la sidebar de facettes, la barre d'outils, les chips
 * Ce fichier n'ajoute que ce qui lui est PROPRE : l'en-tete de confiance, la
 * grille de cartes vendeur, la mise en avant et l'appel aux vendeurs.
 *
 * Si une regle d'ici commence a ressembler a une regle de catalogue.css, c'est
 * le signe qu'elle doit remonter dans catalogue.css, pas etre recopiee.
 *
 * Conforme D-032 : surfaces opaques, bordures visibles, teintes -soft reservees
 * aux petits elements.
 * ============================================================================= */

@layer pages {

  /* ===============================================
   * EN-TETE — la confiance en chiffres
   *
   * Ces quatre nombres sont l'argument central de l'ecran : ce sont eux qu'un
   * vendeur WhatsApp ne peut pas montrer (VISION_ROADMAP 1.3).
   * =============================================== */
  .an-header {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    margin-block: var(--nb-space-4) var(--nb-space-6);
  }

  .an-header__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xl);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    line-height: var(--nb-lh-tight);
  }
  @media (min-width: 768px) {
    .an-header__title { font-size: var(--nb-fs-2xl); }
  }

  .an-header__intro {
    max-width: 70ch;
    font-size: var(--nb-fs-sm);
    line-height: var(--nb-lh-snug);
    color: var(--nb-color-text-muted);
  }

  .an-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nb-space-2);
    margin: var(--nb-space-2) 0 0;
  }
  @media (min-width: 640px) {
    .an-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .an-trust__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--nb-space-3);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    box-shadow: var(--nb-shadow-xs);

    & > dt {
      font-size: var(--nb-fs-2xs);
      font-weight: var(--nb-fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--nb-color-text-faint);
    }
    & > dd {
      margin: 0;
      font-family: var(--nb-font-heading);
      font-size: var(--nb-fs-lg);
      font-weight: var(--nb-fw-heavy);
      color: var(--nb-color-text-strong);
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }
    & > dd > span {
      font-size: var(--nb-fs-xs);
      font-weight: var(--nb-fw-normal);
      color: var(--nb-color-text-faint);
    }
  }
  /* Le nombre de vendeurs verifies est le signal le plus fort : il est le seul
   * en couleur d'accent. Tout mettre en couleur equivaut a ne rien souligner. */
  .an-trust__item:nth-child(2) > dd { color: var(--nb-color-success); }


  /* ===============================================
   * MIS EN AVANT
   * =============================================== */
  .an-featured { margin-bottom: var(--nb-space-6); }

  .an-featured__title {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-3);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-base);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);

    & > i { font-size: 1.3rem; color: var(--nb-color-star); }
  }

  /* Les mis en avant restent en carte VERTICALE COMPLETE meme sur mobile, avec
   * leur banniere : ce sont trois cartes, pas vingt-cinq. La longueur n'est pas
   * un probleme et la banniere fait son travail de reconnaissance de marque.
   * Ce bloc ne porte donc PAS la classe nb-seller-list. */
  .an-featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-space-3);
  }
  @media (min-width: 560px) {
    .an-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .an-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }


  /* ===============================================
   * GRILLE DE VENDEURS
   *
   * Paliers calques sur ceux de la grille produit de catalogue.css, pour que
   * les deux ecrans se feuillettent au meme rythme. La carte vendeur est plus
   * haute qu'une card produit : on ne descend jamais sous deux colonnes, sinon
   * la page devient interminable au defilement.
   * =============================================== */
  /* UNE SEULE COLONNE SOUS 560px, et ce n'est pas un repli par defaut :
   * a 360px de viewport, deux colonnes donnent des cartes de 158px. La carte
   * vendeur porte banniere, slogan, lieu, badges, stats, medias et actions —
   * rien de tout cela ne tient dans 158px, la rangee de stats debordait meme.
   *
   * Le conteneur porte aussi `nb-seller-list`, qui declenche la presentation
   * horizontale definie dans nb-seller-card.css : logo a gauche, contenu a
   * droite. La liste reste courte (~150px par carte au lieu de 320px) et tout
   * redevient lisible. */
  .an-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-space-3);
  }
  @media (min-width: 560px) {
    .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 768px) {
    .an-grid { gap: var(--nb-space-4); }
  }
  @media (min-width: 1280px) {
    .an-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Enveloppe de filtrage. Elle ne porte AUCUN style visuel : la carte reste
   * seule responsable de son apparence (D-030). Elle sert uniquement a porter
   * les attributs data- que le JS lit, et a pouvoir se masquer.
   *
   * `display: flex` et non `display: contents` : contents rendrait la cellule
   * transparente en grille, mais un element en display:contents ne peut pas
   * etre masque — le filtrage serait impossible. En flex, la carte s'etire a
   * la hauteur de la rangee, ce qui aligne les bas de cartes. */
  .an-cell { display: flex; min-width: 0; }
  .an-cell > .nb-seller { flex: 1; min-width: 0; }
  .an-cell.is-hidden { display: none; }

  .an-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-12) var(--nb-space-4);
    text-align: center;
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);

    & > i { font-size: 3rem; color: var(--nb-color-text-disabled); }
  }


  /* ===============================================
   * APPEL AUX VENDEURS (cible D-026)
   * =============================================== */
  .an-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nb-space-4);
    margin-top: var(--nb-space-10);
    padding: var(--nb-space-6);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-inline-start: 4px solid var(--nb-color-accent);
    border-radius: var(--nb-radius-lg);
    box-shadow: var(--nb-shadow-sm);
  }
  @media (min-width: 768px) {
    .an-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  }

  .an-cta__body { display: flex; flex-direction: column; gap: var(--nb-space-2); min-width: 0; }

  .an-cta__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    line-height: var(--nb-lh-tight);
  }
  .an-cta__text {
    max-width: 62ch;
    font-size: var(--nb-fs-sm);
    line-height: var(--nb-lh-snug);
    color: var(--nb-color-text-muted);
  }
  .an-cta > .nb-btn { flex-shrink: 0; }

}