/* =============================================================================
 * SONOYA - nb-seller-card.css
 * -----------------------------------------------------------------------------
 * Carte vendeur reutilisable. Utilisee dans :
 *   - home.php (section vendeurs populaires)
 *   - vendeurs/vendeurs.php (annuaire)
 *   - vendeurs/vendeurDetails.php (bloc profil hero)
 *   - fiche produit (bloc vendeur du produit)
 *
 * Integration :
 *   - Follow button (D-022) via nb-btn globaux
 *   - Chat icon avec online dot (D-023) via nb-btn--circle
 *   - WhatsApp + Share via nb-btn--whatsapp / nb-btn--share
 *   - Live badge (D-025) si vendeur en direct
 *   - Video/shorts count (D-024)
 *
 * Variantes : default (grille), hero (banner + logo overlap), compact (list item),
 * mini (chip dans fiche produit).
 * ============================================================================= */

@layer components {

  /* ---------- Base card ---------- */
  .nb-seller {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-xl);
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                box-shadow var(--nb-dur-normal) var(--nb-ease-standard),
                transform var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  .nb-seller:hover {
    border-color: var(--nb-color-accent);
    box-shadow: var(--nb-shadow-lg);
    transform: translateY(-3px);
  }
  .nb-seller.is-live {
    border-color: var(--nb-color-live);
    box-shadow: 0 0 0 1px var(--nb-color-live), 0 4px 16px var(--nb-color-live-glow);
  }

  /* ---------- Banniere de fond ---------- */
  .nb-seller__banner {
    position: relative;
    height: 80px;
    background-size: cover;
    background-position: center;
  }

  /* Live badge dans la banniere */
  .nb-seller__live-badge {
    position: absolute;
    top: var(--nb-space-2);
    right: var(--nb-space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--nb-color-live);
    color: white;
    font-family: var(--nb-font-body);
    font-size: 0.62rem;
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    border-radius: var(--nb-radius-sm);
    z-index: 3;
    text-decoration: none;
    box-shadow: 0 0 10px var(--nb-color-live-glow);
    transition: transform var(--nb-dur-fast) var(--nb-ease-spring),
                box-shadow var(--nb-dur-normal) var(--nb-ease-standard);
  }
  .nb-seller__live-badge:hover {
    color: white;
    transform: scale(1.05);
    box-shadow: 0 0 20px color-mix(in oklch, var(--nb-color-live) 65%, transparent);
  }
  .nb-seller__live-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: nb-live-pulse 1.4s var(--nb-ease-out-expo) infinite;
    flex-shrink: 0;
  }
  .nb-seller__live-badge-viewers {
    padding-inline-start: 4px;
    font-variant-numeric: tabular-nums;
  }

  /* Verified badge (top-left banniere) */
  .nb-seller__official {
    position: absolute;
    top: var(--nb-space-3);
    left: var(--nb-space-3);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    background: var(--nb-color-surface);
    color: var(--nb-color-info);
    font-size: 0.6rem;
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    border-radius: var(--nb-radius-xs);
    z-index: 2;
    box-shadow: var(--nb-shadow-sm);
  }

  /* ---------- Logo (chevauche la banniere) ---------- */
  .nb-seller__logo {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 var(--nb-space-4);
    background: var(--nb-color-surface);
    border: 3px solid var(--nb-color-surface);
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    box-shadow: var(--nb-shadow-sm);
    z-index: 2;
  }
  .nb-seller__logo--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--nb-font-heading);
    font-size: 1.15rem;
    font-weight: var(--nb-fw-heavy);
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
  }

  /* ---------- Enveloppe cliquable ----------
   * Elle contient la banniere, le logo et l'identite : tout le haut de la carte
   * est une seule cible tactile. Sur un ecran de telephone, viser un nom de
   * boutique de 13px est penible ; viser une zone de 150px ne l'est pas.
   *
   * `flex: 1` est indispensable : le corps n'est plus un enfant direct de la
   * carte, c'est donc ce lien qui doit absorber la hauteur disponible pour que
   * les rangees de stats et d'actions s'alignent d'une carte a l'autre dans la
   * grille. Sans lui, deux cartes de slogans de longueurs differentes decalent
   * leurs boutons. */
  .nb-seller__link {
    display: block;
    flex: 1;
    min-width: 0;
    color: var(--nb-color-text);
    text-decoration: none;
  }
  .nb-seller__link:hover { color: var(--nb-color-text); }

  /* ---------- Body ---------- */
  .nb-seller__body {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    padding: var(--nb-space-2) var(--nb-space-4) 0;
    flex: 1;
    min-width: 0;
  }

  .nb-seller__name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    line-height: var(--nb-lh-tight);
    margin: 0;
  }
  .nb-seller__verified {
    color: var(--nb-color-info);
    flex-shrink: 0;
    font-size: 1rem;
  }

  .nb-seller__tagline {
    font-size: 0.72rem;
    color: var(--nb-color-text-muted);
    line-height: var(--nb-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Location + region */
  .nb-seller__location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--nb-color-text-faint);
    margin-top: 2px;
  }
  .nb-seller__location > i,
  .nb-seller__location > svg {
    color: var(--nb-color-accent);
    flex-shrink: 0;
    font-size: 0.75rem;
  }

  /* ---------- Stats bar (rating, followers, orders) ---------- */
  .nb-seller__stats {
    display: flex;
    align-items: center;
    /* `wrap` inconditionnel : il ne se declenche que si la place manque, donc
     * aucun seuil a deviner. Sans lui, la valeur des abonnes etait purement
     * COUPEE des que la carte descendait sous ~260px — l'icone restait visible
     * et le nombre disparaissait, ce qui est le pire des deux mondes. */
    flex-wrap: wrap;
    gap: 2px var(--nb-space-3);
    padding: var(--nb-space-2) var(--nb-space-4);
    font-size: 0.7rem;
    color: var(--nb-color-text-faint);
    border-top: 1px solid var(--nb-color-border-alt);
    margin-top: var(--nb-space-2);
  }
  .nb-seller__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .nb-seller__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .nb-seller__rating::before {
    content: "★";
    color: var(--nb-color-star);
    font-size: 0.8rem;
  }
  .nb-seller__rating-value {
    color: var(--nb-color-text-strong);
    font-weight: var(--nb-fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .nb-seller__rating-count {
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;
  }
  .nb-seller__orders {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
  }
  .nb-seller__orders > i,
  .nb-seller__orders > svg { color: var(--nb-color-text-muted); }
  .nb-seller__followers {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
  }
  .nb-seller__followers > i,
  .nb-seller__followers > svg { color: var(--nb-color-text-muted); }
  .nb-seller__followers-value {
    color: var(--nb-color-text-strong);
    font-weight: var(--nb-fw-semibold);
  }

  /* ---------- Badges vendeur (power_seller, hub, artisan, terroir) ---------- */
  .nb-seller__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 var(--nb-space-4);
    margin-top: var(--nb-space-1);
  }
  .nb-seller__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 0.56rem;
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    border-radius: var(--nb-radius-xs);
  }
  .nb-seller__badge--power     { background: var(--nb-color-accent-soft); color: var(--nb-color-accent-hover); }
  .nb-seller__badge--verified  { background: var(--nb-color-info-soft); color: var(--nb-color-info); }
  .nb-seller__badge--hub       { background: var(--nb-color-info-soft);   color: var(--nb-color-info-hover); }
  .nb-seller__badge--artisan   { background: var(--nb-color-success-soft); color: var(--nb-color-success-hover); }
  .nb-seller__badge--terroir   { background: var(--nb-color-warning-soft); color: var(--nb-color-warning-hover); }
  .nb-seller__badge--official  { background: var(--nb-color-text); color: var(--nb-color-text-inverse); }
  .nb-seller__badge--cooperative { background: color-mix(in oklch, oklch(60% 0.14 240) 15%, var(--nb-color-surface)); color: oklch(45% 0.14 240); }

  /* ---------- Videos/lives count (D-024, D-025) ---------- */
  .nb-seller__media-stats {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-2) 0;
    border-top: 1px dashed var(--nb-color-border);
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--nb-color-text-muted);
  }
  .nb-seller__media-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .nb-seller__media-stat--videos > svg { color: oklch(60% 0.22 300); }
  .nb-seller__media-stat--lives > svg  { color: var(--nb-color-live); }
  .nb-seller__media-count {
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Actions (Follow + icones circulaires) ---------- */
  .nb-seller__actions {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-3) var(--nb-space-4) var(--nb-space-4);
  }
  .nb-seller__actions > .nb-btn--pill { flex: 1; }

  .nb-seller__online-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    background: var(--nb-color-success);
    border-radius: 50%;
    border: 2px solid var(--nb-color-surface);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--nb-color-success) 40%, transparent);
    animation: nb-online-pulse 2s var(--nb-ease-out-expo) infinite;
  }
  @keyframes nb-online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--nb-color-success) 50%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in oklch, var(--nb-color-success) 0%, transparent); }
  }

  /* ---------- Variant --hero (fiche vendeur detaillee) ---------- */
  .nb-seller--hero {
    border-radius: var(--nb-radius-2xl);
  }
  .nb-seller--hero .nb-seller__banner {
    height: auto;
    aspect-ratio: 4 / 1;
    min-height: 240px;
  }
  .nb-seller--hero .nb-seller__logo {
    width: 112px;
    height: 112px;
    margin-top: -56px;
    border-radius: var(--nb-radius-xl);
    border-width: 4px;
  }
  .nb-seller--hero .nb-seller__logo--initials {
    font-size: 2.4rem;
  }
  .nb-seller--hero .nb-seller__body { padding: var(--nb-space-5) var(--nb-space-6); }
  .nb-seller--hero .nb-seller__name { font-size: var(--nb-fs-xl); }
  .nb-seller--hero .nb-seller__tagline {
    font-size: var(--nb-fs-md);
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  /* ---------- Variant --compact (row dense, e.g. dans une liste) ---------- */
  .nb-seller--compact {
    flex-direction: row;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-3) var(--nb-space-4);
    border-radius: var(--nb-radius-lg);
  }
  .nb-seller--compact:hover { transform: none; }
  .nb-seller--compact .nb-seller__banner,
  .nb-seller--compact .nb-seller__actions { display: none; }
  .nb-seller--compact .nb-seller__logo {
    width: 52px;
    height: 52px;
    margin: 0;
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    flex-shrink: 0;
  }
  .nb-seller--compact .nb-seller__body {
    padding: 0;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .nb-seller--compact .nb-seller__name {
    font-size: var(--nb-fs-sm);
  }
  .nb-seller--compact .nb-seller__stats {
    font-size: 0.66rem;
    padding: 0;
    border-top: none;
    margin-top: 0;
  }

  /* ---------- Variant --mini (chip dans fiche produit) ---------- */
  .nb-seller--mini {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--nb-space-2);
    padding: 4px var(--nb-space-3) 4px 4px;
    background: var(--nb-color-surface-alt);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-pill);
    text-decoration: none;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-seller--mini:hover {
    border-color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
    transform: none;
  }
  .nb-seller--mini .nb-seller__banner,
  .nb-seller--mini .nb-seller__body,
  .nb-seller--mini .nb-seller__actions,
  .nb-seller--mini .nb-seller__tagline,
  .nb-seller--mini .nb-seller__location,
  .nb-seller--mini .nb-seller__stats,
  .nb-seller--mini .nb-seller__badges,
  .nb-seller--mini .nb-seller__media-stats { display: none; }
  .nb-seller--mini .nb-seller__logo {
    width: 26px;
    height: 26px;
    margin: 0;
    border: 0;
    border-radius: 50%;
  }
  .nb-seller--mini::after {
    content: attr(data-seller-name);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text);
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* =============================================================================
   * DENSITE — la carte s'adapte a SA largeur, pas au viewport
   *
   * Mesures reelles dans l'annuaire : la carte fait 158px a 360px de viewport en
   * deux colonnes, et 350px en une seule. Un meme jeu de regles ne peut pas
   * servir les deux. Container queries donc, comme pour nb-product-card
   * (AGENTS.md regle 25).
   * ============================================================================= */
  .nb-seller { container-type: inline-size; }

  /* ---------- Carte etroite (< 240px) ----------
   * Trois defauts constates a 170px : la valeur des abonnes etait COUPEE apres
   * son icone, le slogan se coupait en plein mot, et le lieu passait sur deux
   * lignes. On ne masque aucune information : on la laisse passer a la ligne. */
  @container (max-width: 239px) {
    .nb-seller__banner { height: 56px; }
    .nb-seller__logo { width: 44px; height: 44px; margin-top: -22px; margin-left: var(--nb-space-3); }
    .nb-seller__logo--initials { font-size: 0.9rem; }

    .nb-seller__body,
    .nb-seller__badges,
    .nb-seller__stats { padding-inline: var(--nb-space-3); }
    .nb-seller__actions { padding: var(--nb-space-2) var(--nb-space-3) var(--nb-space-3); }

    /* Le passage a la ligne est deja acquis a la base ; on resserre seulement
     * la typographie et l'espacement horizontal. */
    .nb-seller__stats {
      gap: 2px var(--nb-space-2);
      font-size: 0.66rem;
    }

    /* Un badge de plus que la largeur disponible creait une 2e ligne qui
     * desalignait toute la grille. Une seule ligne, defilement masque. */
    .nb-seller__badges {
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .nb-seller__tagline { -webkit-line-clamp: 2; line-clamp: 2; }
    .nb-seller__location {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }
  }

  /* ---------- Coupure de mot : jamais au milieu ----------
   * « Chaus-sures » etait lisible mais laid. On coupe entre les mots, et on ne
   * force une coupure que sur un mot plus long que la colonne. */
  .nb-seller__tagline,
  .nb-seller__location,
  .nb-seller__name {
    hyphens: manual;
    overflow-wrap: break-word;
  }


  /* =============================================================================
   * PRESENTATION EN LISTE — mobile
   *
   * Sous 560px, deux colonnes donnent des cartes de 158px : illisible. Mais une
   * colonne unique avec la carte verticale complete donnerait 25 cartes de
   * ~320px, soit 8 000px de defilement.
   *
   * D'ou cette troisieme presentation : la MEME carte, le MEME markup, reorganise
   * en grille — logo a gauche, contenu a droite. Hauteur ramenee a ~150px, la
   * liste devient parcourable du pouce et tout redevient lisible.
   *
   * Pilotee par la classe `.nb-seller-list` posee sur le CONTENEUR, pas sur la
   * carte : c'est une decision de mise en page, pas une variante de composant.
   * Media query et non container query, pour la meme raison (regle 25).
   * ============================================================================= */
  @media (max-width: 559px) {
    /* La carte reste une COLONNE simple. C'est `.nb-seller__link` qui porte la
     * grille horizontale, parce que le logo et le corps sont ses enfants — pas
     * ceux de la carte.
     *
     * Premiere version de ce bloc : la grille etait posee sur `.nb-seller` avec
     * des `grid-area: logo / body`. Ces zones ne s'appliquaient a rien, le lien
     * entier devenait un seul element de grille et se retrouvait ECRASE dans la
     * colonne de 52px — nom sur deux lignes, slogan reduit a « Beaute... », lieu
     * sur trois lignes, et la moitie droite de la carte vide. */
    .nb-seller-list .nb-seller {
      display: flex;
      flex-direction: column;
      gap: var(--nb-space-2);
      padding: var(--nb-space-3);
      border-radius: var(--nb-radius-lg);
    }
    .nb-seller-list .nb-seller:hover { transform: none; }

    /* La banniere n'apporte rien sur 52px de haut : elle devient une bande de
     * couleur illisible. Les medias sont une information secondaire ici. */
    .nb-seller-list .nb-seller__banner,
    .nb-seller-list .nb-seller__media-stats { display: none; }

    /* ---- Le lien devient la rangee logo + identite ---- */
    .nb-seller-list .nb-seller__link {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      align-items: center;
      gap: var(--nb-space-3);
      /* En liste, la hauteur n'est plus a egaliser : chaque carte fait sa taille. */
      flex: 0 0 auto;
    }

    .nb-seller-list .nb-seller__logo {
      width: 52px;
      height: 52px;
      margin: 0;
      border: 1px solid var(--nb-color-border);
      border-radius: var(--nb-radius-md);
      box-shadow: none;
    }
    .nb-seller-list .nb-seller__logo--initials { font-size: 1.05rem; }

    .nb-seller-list .nb-seller__body {
      padding: 0;
      gap: 2px;
      min-width: 0;
    }

    /* Nom sur UNE ligne : la place est desormais la, il n'y a aucune raison de
     * le couper en deux. */
    .nb-seller-list .nb-seller__name-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Slogan sur une ligne : au-dela il repousse les stats et desaligne les
     * cartes entre elles. */
    .nb-seller-list .nb-seller__tagline {
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }
    .nb-seller-list .nb-seller__location {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      margin-top: 0;
    }

    .nb-seller-list .nb-seller__badges {
      padding: 0;
      margin: 0;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .nb-seller-list .nb-seller__stats {
      padding: var(--nb-space-2) 0 0;
      margin: 0;
      gap: 2px var(--nb-space-3);
    }

    .nb-seller-list .nb-seller__actions { padding: 0; }
    /* Le bouton « suivre » ne prend plus toute la largeur : une barre orange de
     * 300px pour une action secondaire ecrase toute la hierarchie de la carte. */
    .nb-seller-list .nb-seller__actions > .nb-btn--pill { flex: 0 0 auto; }

    /* Le badge « boutique officielle » vivait sur la banniere, qui n'existe plus
     * ici. Il n'est pas perdu : la coche verifiee reste a cote du nom, et le
     * badge « Officiel » figure dans la rangee de distinctions. */
    .nb-seller-list .nb-seller__official { display: none; }

    /* Le direct, lui, ne doit JAMAIS disparaitre : c'est le signal le plus
     * perissable de la carte. Il repasse dans le flux et remonte en tete de la
     * colonne (`order: -1`), au-dessus du nom : c'est la premiere chose a voir. */
    .nb-seller-list .nb-seller__live-badge {
      position: static;
      order: -1;
      align-self: flex-start;
      box-shadow: none;
    }
  }
}