/* Questions & réponses produit + galerie « Vu chez nos clients » (app community). */

/* ---------- Q&R fiche produit ---------- */
.ns-qa-count { font-size: .85rem; color: var(--ns-muted); font-weight: 600; }
.ns-qa-ask { background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius, 16px);
  padding: 1.1rem 1.2rem; box-shadow: var(--ns-shadow); position: sticky; top: 96px; }
.ns-qa-search .input-group-text { background: var(--ns-surface); border-color: var(--ns-border); color: var(--ns-muted); }
.ns-qa-item { background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: .85rem; }
.ns-qa-row { display: flex; gap: .75rem; align-items: flex-start; }
.ns-qa-answer { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--ns-border); }
.ns-qa-answer.is-official { background: linear-gradient(90deg, rgba(226,138,59,.08), transparent 70%);
  border-radius: 10px; border-top: 0; padding: .6rem .6rem; }
.ns-qa-tag { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #fff; }
.ns-qa-tag-q { background: var(--ns-navy); }
.ns-qa-tag-a { background: var(--naydor-gold); }
.ns-qa-text { font-size: .97rem; color: var(--ns-text); word-break: break-word; }
.ns-qa-item > .ns-qa-row:first-child .ns-qa-text { font-weight: 600; }
.ns-qa-meta { font-size: .78rem; color: var(--ns-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ns-qa-badge-official { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--naydor-dark-gold);
  background: rgba(226,138,59,.12); border-radius: 999px; padding: .1rem .55rem; }
.ns-qa-vote { margin-left: auto; border: 1px solid var(--ns-border); background: transparent; color: var(--ns-muted);
  border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; transition: all .15s ease; }
.ns-qa-vote:hover, .ns-qa-vote:focus-visible { border-color: var(--naydor-gold); color: var(--naydor-dark-gold); }
.ns-qa-vote.is-voted { background: var(--naydor-gold); border-color: var(--naydor-gold); color: #fff; }
.ns-qa-noanswer { margin: .4rem 0 0 2.55rem; font-style: italic; }
.ns-qa-reply { margin: .6rem 0 0 2.55rem; }
.ns-qa-reply summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--ns-blue); }
.ns-qa-empty { text-align: center; color: var(--ns-muted); border: 1px dashed var(--ns-border); border-radius: 14px; padding: 1.6rem 1rem; }
.ns-qa-dash-answer { border-left: 3px solid var(--ns-border); padding: .35rem .7rem; margin: .4rem 0; }
.ns-qa-dash-answer.is-official { border-left-color: var(--naydor-gold); }
#ns-qa-list.is-loading { opacity: .55; transition: opacity .15s; }
@media (max-width: 991.98px) { .ns-qa-ask { position: static; } }

/* ---------- Galerie « Vu chez nos clients » ---------- */
.ns-ugc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.ns-ugc-item { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--ns-surface-2); box-shadow: var(--ns-shadow); cursor: zoom-in; }
.ns-ugc-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ns-ugc-item:hover img, .ns-ugc-item:focus-visible img { transform: scale(1.06); }
.ns-ugc-item:focus-visible { outline: 3px solid var(--naydor-gold); outline-offset: 2px; }
.ns-ugc-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .6rem .45rem; font-size: .75rem; font-weight: 600;
  color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.65));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-ugc-stage { position: relative; }
.ns-ugc-full { max-width: 100%; max-height: 70vh; border-radius: 12px; object-fit: contain; }
.ns-ugc-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ns-navy); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.ns-ugc-prev { left: .4rem; }
.ns-ugc-next { right: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .ns-ugc-item img, .ns-qa-vote { transition: none; }
  .ns-ugc-item:hover img { transform: none; }
}